/* Punto Due Studio — spatial experience layer
   Creative thesis: two independent perspectives converge into one direction. */
:root{
  --font-sans:"Avenir Next","Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-serif:"Iowan Old Style",Baskerville,"Baskerville Old Face",Georgia,Cambria,"Times New Roman",serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --focus-ring:#556038;
  --surface-glass:rgba(243,240,231,.88);
}

body{font-family:var(--font-sans);letter-spacing:-.012em;font-kerning:normal;font-optical-sizing:auto}
h1,h2,.project-body h3,.portfolio-cta>p,.not-found h1{letter-spacing:-.052em}
em,.initials{font-family:var(--font-serif)}
.section-label,.eyebrow,.package-level,.preview-kicker,.process-grid span{letter-spacing:.14em}
:where(a,button,input,summary):focus-visible{outline-color:var(--focus-ring)}

/* Sticky navigation stays quiet but feels more deliberate. */
.header{background:rgba(243,240,231,.92);backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%)}
.header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line) 86%,transparent);pointer-events:none}
#navigation>a{transition:color .24s var(--ease-soft),opacity .24s var(--ease-soft)}
#navigation>a.is-current{color:var(--olive)}

/* Signature hero: two viewpoints, one aligned center. No canvas and no perpetual render loop. */
.hero-art{min-height:420px;background:
  radial-gradient(circle at 76% 20%,rgba(243,240,231,.64),transparent 27%),
  radial-gradient(circle at 24% 80%,rgba(80,101,59,.18),transparent 34%),
  linear-gradient(145deg,#dde1c4 0%,#ccd3a7 46%,#b8c08e 100%);
  perspective:1150px;contain:paint;box-shadow:inset 0 0 0 1px rgba(41,44,36,.05)}
.hero-art::before,.hero-art::after{content:"";position:absolute;z-index:1;pointer-events:none}
.hero-art::before{inset:12%;border:1px solid rgba(41,47,36,.1);border-radius:50%;transform:rotate(-8deg)}
.hero-art::after{width:1px;height:76%;left:50%;top:12%;background:linear-gradient(transparent,rgba(41,44,36,.28),transparent);transform:rotate(18deg)}
.art-grid{opacity:.7;background-size:clamp(44px,5vw,72px) clamp(44px,5vw,72px);mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 92%)}
.scene-depth{--shift-x:0px;--shift-y:0px;transform:translate3d(var(--shift-x),var(--shift-y),0) rotateX(var(--scene-x,0deg)) rotateY(var(--scene-y,0deg));transition:transform .36s var(--ease-out)}
.perspective-plane{position:absolute;left:50%;top:50%;width:min(52vw,360px);aspect-ratio:1.42;border:1px solid rgba(243,240,231,.5);transform-style:preserve-3d;pointer-events:none}
.plane-one{transform:translate3d(-67%,-56%,38px) rotateZ(-17deg) rotateY(22deg);background:linear-gradient(135deg,rgba(243,240,231,.16),rgba(243,240,231,.02));box-shadow:22px 30px 55px rgba(42,51,35,.12)}
.plane-two{transform:translate3d(-25%,-39%,-78px) rotateZ(15deg) rotateY(-25deg);border-color:rgba(62,78,48,.3);background:linear-gradient(135deg,rgba(70,89,51,.1),transparent)}
.axis-line{position:absolute;left:50%;top:50%;width:min(55%,460px);height:1px;background:linear-gradient(90deg,transparent,rgba(41,44,36,.58),transparent);transform:translate3d(-50%,-50%,105px) rotate(-18deg);transform-origin:center}
.point-node{position:absolute;z-index:2;width:18px;height:18px;border-radius:50%;border:1px solid rgba(243,240,231,.9);box-shadow:0 8px 24px rgba(39,51,33,.18);transform-style:preserve-3d}
.point-node::after{content:"";position:absolute;inset:5px;border-radius:inherit;background:var(--paper)}
.point-one{left:31%;top:34%;background:#667447;transform:translateZ(152px)}
.point-two{right:29%;bottom:27%;background:#27352a;transform:translateZ(26px)}
.sphere{transition:transform .42s var(--ease-out),filter .42s var(--ease-out);backface-visibility:hidden}
.sphere-one{filter:saturate(.85) contrast(1.02);transform:translate3d(-8px,-2px,88px)}
.sphere-two{filter:saturate(.8);transform:translate3d(12px,6px,-28px)}
.orbit{opacity:.72;transition:transform .5s var(--ease-out),opacity .3s}
.scene-logo{z-index:4;transform:translate3d(-2px,-4px,165px) rotateZ(-8deg);transition:transform .45s var(--ease-out),filter .45s var(--ease-out)}
.interactive-scene.spatial-active .scene-logo{filter:drop-shadow(16px 22px 18px rgba(23,34,25,.32))}
.interactive-scene.spatial-active .orbit{opacity:.9}
.scene-controls{background:var(--surface-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.art-caption{max-width:230px;line-height:1.5}

/* Brand-specific convergence moment: two paths resolve into the mark. */
.convergence{display:grid;grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr);gap:clamp(36px,7vw,100px);align-items:center;border-top:1px solid var(--line);padding-block:clamp(72px,8vw,120px)}
.convergence-copy .section-label{margin-bottom:20px}
.convergence-copy h2{font-size:clamp(42px,5.3vw,72px);max-width:9ch}
.convergence-copy>p{margin-top:24px;max-width:42ch;color:var(--muted);line-height:1.8}
.convergence-stage{position:relative;min-height:330px;overflow:hidden;border:1px solid #c8cdb9;border-radius:10px;background:linear-gradient(155deg,#e9eadf,#d6dbc0);isolation:isolate}
.convergence-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(76,88,57,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(76,88,57,.08) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 78%)}
.convergence-path{position:absolute;left:14%;right:14%;height:1px;top:50%;background:linear-gradient(90deg,transparent,rgba(76,88,57,.42) 22%,rgba(76,88,57,.42) 78%,transparent);transform-origin:center}
.path-one{transform:rotate(18deg)}
.path-two{transform:rotate(-18deg)}
.convergence-point{position:absolute;top:50%;width:58px;height:58px;margin-top:-29px;border-radius:50%;display:grid;place-items:center;font-size:11px;letter-spacing:.12em;font-weight:700;transition:left 1s var(--ease-out),right 1s var(--ease-out),transform 1s var(--ease-out),background .65s var(--ease-soft),color .65s var(--ease-soft);will-change:transform}
.convergence-point.one{left:14%;background:var(--paper);border:1px solid #a9b192;transform:translate3d(0,-76px,35px)}
.convergence-point.two{right:14%;background:var(--dark);color:var(--paper);transform:translate3d(0,76px,10px)}
.convergence-mark{position:absolute;left:50%;top:50%;width:82px;height:82px;margin:-41px 0 0 -41px;border-radius:24px;display:grid;place-items:center;background:rgba(243,240,231,.94);border:1px solid rgba(76,88,57,.22);box-shadow:0 22px 50px rgba(41,44,36,.12);opacity:.25;transform:translateZ(80px) scale(.86) rotate(-8deg);transition:opacity .8s .16s var(--ease-soft),transform .9s .16s var(--ease-out)}
.convergence-mark img{width:52px;height:52px}
.convergence-stage.is-active .convergence-point.one{left:50%;transform:translate3d(-125%,-11px,35px)}
.convergence-stage.is-active .convergence-point.two{right:50%;transform:translate3d(125%,11px,10px)}
.convergence-stage.is-active .convergence-mark{opacity:1;transform:translateZ(80px) scale(1) rotate(0)}
.convergence-caption{position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.13em;color:var(--muted)}

/* Spatial portfolio: depth on fine pointers, stable cards everywhere else. */
.project-cover-link{transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(0);transition:transform .42s var(--ease-out),border-color .25s;will-change:transform}
.project-cover-link::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),rgba(255,255,255,.17),transparent 33%);opacity:0;transition:opacity .28s}
.project-card.spatial-card-active .project-cover-link::after{opacity:1}
.project-card.spatial-card-active .preview-chrome{transform:translateZ(24px)}
.project-card.spatial-card-active .preview-site-ui{transform:translateZ(38px)}
.preview-chrome,.preview-site-ui{transform-style:preserve-3d;transition:transform .42s var(--ease-out)}
.project-body{position:relative}
.project-body::before{content:"";position:absolute;left:0;top:0;width:0;height:1px;background:var(--olive);transition:width .55s var(--ease-out)}
.project-card:hover .project-body::before,.project-card:focus-within .project-body::before{width:72px}

/* Services and process gain directional continuity, not more cards. */
.service-row{position:relative;isolation:isolate}
.service-row::before{content:"";position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,rgba(98,107,67,.065),transparent);transition:width .45s var(--ease-out);z-index:-1}
.service-row:hover::before,.service-row:focus-within::before{width:100%}
.process-grid{position:relative}
.process-grid::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--light),rgba(203,212,177,.18));transform-origin:left;transform:scaleX(.08);transition:transform 1.1s var(--ease-out)}
.process.is-active .process-grid::before{transform:scaleX(1)}
.process-grid article{position:relative}
.process-grid article::before{content:"";position:absolute;left:0;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--light);box-shadow:0 0 0 5px rgba(203,212,177,.08)}

/* Contact: subtle dimensional climax while all contact controls stay direct. */
.contact{position:relative;isolation:isolate}
.contact::before,.contact::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(1px);opacity:.28;pointer-events:none}
.contact::before{width:210px;height:210px;right:8%;top:18%;border:1px solid var(--olive);transform:translate3d(0,var(--contact-shift,0px),0)}
.contact::after{width:130px;height:130px;right:15%;top:31%;background:radial-gradient(circle at 35% 30%,#e1e7c9,#aeb887 72%);transform:translate3d(0,calc(var(--contact-shift,0px) * -.55),0)}

/* Cookie/privacy utility. No first-visit banner: current site has no optional tracking. */
.cookie-fab{position:fixed;left:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:9px 13px;border:1px solid #b9bea9;border-radius:999px;background:rgba(243,240,231,.94);color:var(--ink);box-shadow:0 10px 28px rgba(41,44,36,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:600 11px/1 var(--font-sans);letter-spacing:.04em}
.cookie-fab:hover{border-color:var(--olive);color:var(--olive)}
.cookie-mark{position:relative;width:19px;height:19px;display:inline-block;transition:transform .45s var(--ease-out)}
.cookie-mark::before,.cookie-mark::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;top:6px}
.cookie-mark::before{left:1px;background:var(--olive)}
.cookie-mark::after{right:1px;background:var(--ink)}
.cookie-fab:hover .cookie-mark{transform:rotate(180deg)}
.cookie-dialog{width:min(620px,calc(100% - 32px));max-height:min(760px,calc(100dvh - 32px));padding:0;border:1px solid #bfc5af;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 34px 90px rgba(24,29,22,.28)}
.cookie-dialog::backdrop{background:rgba(25,29,23,.48);backdrop-filter:blur(4px)}
.cookie-panel{padding:clamp(22px,4vw,36px)}
.cookie-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.cookie-panel .section-label{color:var(--olive);margin-bottom:12px}
.cookie-panel h2{font-size:clamp(34px,6vw,50px);max-width:9ch}
.cookie-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:24px;line-height:1}
.cookie-panel>p{margin-top:20px;color:var(--muted);line-height:1.75;max-width:54ch}
.cookie-category{display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:center;margin-top:26px;padding:18px 0;border-block:1px solid var(--line)}
.cookie-category strong{font-size:14px}
.cookie-category p{grid-column:1;margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.cookie-state{grid-column:2;grid-row:1 / span 2;align-self:center;padding:7px 10px;border-radius:999px;background:#e3e7d5;color:#465037;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:24px}
.cookie-actions .button{min-width:120px;justify-content:center}
.cookie-actions .text-link{font-size:13px}
.footer-privacy{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.footer-privacy a,.footer-privacy button{min-height:44px;display:inline-flex;align-items:center;border:0;background:none;padding:0;color:var(--muted);font:12px/1.4 var(--font-sans);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.footer-privacy a:hover,.footer-privacy button:hover{color:var(--olive);text-decoration-color:currentColor}

/* Cookie policy page reuses the site system without pretending to be a marketing page. */
.policy-page .header{position:sticky}
.policy-main{padding-block:clamp(54px,8vw,110px)}
.policy-hero{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(30px,7vw,90px);align-items:end;padding-bottom:clamp(48px,7vw,86px);border-bottom:1px solid var(--line)}
.policy-hero h1{font-size:clamp(48px,7vw,92px);max-width:8ch}
.policy-hero p{max-width:52ch;color:var(--muted);line-height:1.8}
.policy-grid{display:grid;grid-template-columns:minmax(210px,.55fr) minmax(0,1.45fr);gap:clamp(30px,7vw,90px);padding-top:clamp(48px,7vw,86px)}
.policy-toc{position:sticky;top:126px;align-self:start;display:grid;gap:4px}
.policy-toc a{min-height:42px;display:flex;align-items:center;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.policy-toc a:hover{color:var(--olive)}
.policy-content{display:grid;gap:46px}
.policy-section{scroll-margin-top:130px}
.policy-section h2{font-size:clamp(30px,4vw,46px);margin-bottom:16px}
.policy-section p,.policy-section li{color:var(--muted);line-height:1.82}
.policy-section ul{padding-left:20px;margin:14px 0 0}
.policy-note{padding:18px;border-left:2px solid var(--olive);background:#e9eadf}
.policy-meta{font-size:12px;letter-spacing:.08em;color:var(--muted);margin-top:22px}

/* Intentional mobile treatment — less depth, same concept. */
@media(max-width:900px){
  .convergence{grid-template-columns:1fr;gap:30px}
  .convergence-copy h2{max-width:12ch}
  .convergence-stage{min-height:300px}
  .policy-hero,.policy-grid{grid-template-columns:1fr}
  .policy-toc{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .hero-art{min-height:300px}
  .perspective-plane{width:250px}
  .plane-one{transform:translate3d(-68%,-54%,28px) rotateZ(-16deg) rotateY(16deg)}
  .plane-two{transform:translate3d(-27%,-38%,-48px) rotateZ(14deg) rotateY(-18deg)}
  .axis-line{width:72%}
  .point-node{width:14px;height:14px}
  .point-node::after{inset:4px}
  .point-one{left:25%;top:31%}
  .point-two{right:25%;bottom:28%}
  .project-cover-link{transform:none!important}
  .project-cover-link::after{display:none}
  .preview-chrome,.preview-site-ui{transform:none!important}
  .process-grid::before{display:none}
  .process-grid article::before{top:-3px}
  .contact::before,.contact::after{display:none}
  .cookie-fab{left:12px;bottom:12px;padding:9px 11px}
  .cookie-fab>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cookie-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
  .cookie-panel{padding:22px 18px}
  .cookie-category{grid-template-columns:1fr}
  .cookie-state{grid-column:1;grid-row:auto;justify-self:start}
  .cookie-actions{align-items:stretch;flex-direction:column}
  .cookie-actions .button,.cookie-actions .text-link{width:100%}
  .policy-main{padding-top:36px}
  .policy-toc{grid-template-columns:1fr}
}
@media(max-width:360px){
  body{font-size:15px}
  .convergence-stage{min-height:270px}
  .convergence-point{width:50px;height:50px;margin-top:-25px;font-size:9px}
  .convergence-mark{width:70px;height:70px;margin:-35px 0 0 -35px}
  .convergence-mark img{width:44px;height:44px}
  .cookie-panel h2{font-size:32px}
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .project-card:hover .project-cover-link{border-color:#929b79}
  .button,.nav-contact,.demo-button{transform:translateZ(0)}
}

@media(prefers-reduced-motion:reduce){
  .scene-depth,.sphere,.orbit,.scene-logo,.project-cover-link,.preview-chrome,.preview-site-ui,.convergence-point,.convergence-mark,.cookie-mark,.process-grid::before{transition:none!important;transform:none!important}
  .convergence-stage .convergence-mark{opacity:1}
  .convergence-point.one{left:30%;top:50%}
  .convergence-point.two{right:30%;top:50%}
  .project-cover-link::after{display:none}
}