@font-face{font-family:"Playfair";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair";font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/caveat-latin-700-normal.woff2) format("woff2")}

:root{
  --paper:#F4F0EA;--paper-2:#EBE5DC;--paper-3:#E2DACF;--white:#FBF9F6;
  --ink:#151310;--ink-2:#3A3631;--muted:#726A60;--line:rgba(21,19,16,.14);--line-2:rgba(21,19,16,.3);
  --terra:#C4694A;--terra-d:#9A4E35;--terra-l:#E7B9A6;
  --serif:"Playfair",Georgia,serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--hand:"Caveat","Segoe Script",cursive;
  --gutter:clamp(20px,5vw,64px);--max:1240px;--r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.04rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.08}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.2}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.kicker{font:500 .74rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin:0 0 18px}
.kicker.t{color:var(--terra-d)}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:var(--ink-2);max-width:38rem}
.muted{color:var(--muted)}
.hand{font-family:var(--hand);font-weight:700;line-height:1;letter-spacing:-.01em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 26px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:500 .82rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.btn .ar{display:inline-block;transition:transform .25s}
.btn:hover{background:#000;transform:translateY(-1px)}.btn:hover .ar{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:rgba(21,19,16,.05);border-color:var(--ink)}
.btn.terra{background:var(--terra);border-color:var(--terra)}.btn.terra:hover{background:var(--terra-d)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}.btn.light:hover{background:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* header */
.top{position:sticky;top:0;z-index:60;background:rgba(244,240,234,.82);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .25s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{height:36px;width:auto}
.brand .b-name{font:700 1.05rem/1 var(--sans);letter-spacing:-.01em;display:block}
.brand .b-desc{font:500 .6rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-top:5px;white-space:nowrap}
nav.main ul{display:flex;gap:clamp(16px,2.2vw,30px);list-style:none;margin:0;padding:0}
nav.main a{text-decoration:none;font:500 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding:10px 0;position:relative;white-space:nowrap}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:var(--terra);transition:right .25s}
nav.main a:hover::after{right:0}
.top .cta{min-height:44px;padding:0 20px;font-size:.7rem;white-space:nowrap}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line-2);border-radius:999px;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);transition:transform .2s,top .2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1040px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:6px var(--gutter) 22px;box-shadow:0 24px 40px -24px rgba(0,0,0,.3)}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;gap:0}
  nav.main a{display:block;padding:16px 0;font-size:.9rem;border-bottom:1px solid var(--line)}
  nav.main a::after{display:none}
  nav.main li:last-child a{border-bottom:0}
  .burger{display:inline-flex}.top .cta{display:none}
}

section{position:relative}
.pad{padding:clamp(72px,10vw,140px) 0}
.sec-head{max-width:46rem;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .lead{margin-top:16px}

/* HERO */
.hero{min-height:calc(100vh - 76px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}
.hero-copy{padding:clamp(40px,7vw,100px) var(--gutter) clamp(48px,6vw,80px) max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.hero .slogan{font-size:clamp(3.6rem,7.4vw,6.8rem);line-height:.98;margin:0 0 14px;position:relative;display:inline-block;color:var(--ink)}
.hero .slogan .ul{position:absolute;left:4%;right:18%;bottom:-6px;height:22px;pointer-events:none}
.hero .slogan .ul path{fill:none;stroke:var(--terra);stroke-width:7;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.1s cubic-bezier(.6,.05,.3,1) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .tr{font:500 .9rem/1.4 var(--sans);color:var(--muted);margin:26px 0 0}
.hero .sub{font:500 .98rem/1.7 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);max-width:30rem;margin:30px 0 34px}
.hero .tiny{font:500 .74rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:30px 0 0}
.hero-media{position:relative;min-height:60vh;overflow:hidden;background:var(--paper-3)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;position:absolute;inset:0;filter:grayscale(1) contrast(1.05)}
.hero-media::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0,rgba(244,240,234,0) 22%),linear-gradient(0deg,rgba(21,19,16,.35),rgba(21,19,16,0) 45%);z-index:1}
.hero-note{position:absolute;right:clamp(16px,4vw,56px);bottom:clamp(24px,6vw,72px);z-index:2;color:#fff;font-size:clamp(1.7rem,3vw,2.6rem);text-align:right;transform:rotate(-4deg);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-note .ul2{display:block;margin:4px 0 0 auto;width:70%;height:12px}
.hero-note .ul2 path{fill:none;stroke:var(--terra);stroke-width:6;stroke-linecap:round}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:36px var(--gutter) 40px}
  .hero-media{min-height:0;aspect-ratio:4/5;max-height:70vh}
  .hero-media::before{background:linear-gradient(0deg,rgba(21,19,16,.4),rgba(21,19,16,0) 50%)}
}

/* services strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.strip .it{display:flex;gap:20px;align-items:flex-start;padding:30px 28px 30px 0;border-right:1px solid var(--line);text-decoration:none;color:inherit}
.strip .it+.it{padding-left:28px}
.strip .it:last-child{border-right:0;padding-right:0}
.strip .it svg{width:44px;height:44px;flex:none;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.strip .it b{display:block;font:600 .76rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:6px 0 10px}
.strip .it p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.5}
@media (max-width:900px){.strip .wrap{grid-template-columns:1fr}.strip .it{border-right:0;border-bottom:1px solid var(--line);padding:24px 0!important}.strip .it:last-child{border-bottom:0}}

/* pinned scenes */
.scene{height:320vh}
.scene .sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-items:center}
.scene .wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,5vw,72px);align-items:center;width:100%}
.scene .txt{position:relative}
.scene .txt h2{margin-bottom:18px}
.scene .txt p{color:var(--ink-2);max-width:32rem}
.scene .hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:500 .68rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;transition:opacity .4s}
.scene .hint i{width:1px;height:28px;background:var(--line-2);display:block;position:relative;overflow:hidden}
.scene .hint i::after{content:"";position:absolute;left:0;top:-28px;width:1px;height:28px;background:var(--terra);animation:scrollhint 1.6s ease-in-out infinite}
@keyframes scrollhint{to{top:28px}}
.scene.done .hint{opacity:0}
@media (max-width:900px){
  .scene{height:260vh}
  .scene .wrap{grid-template-columns:1fr;gap:18px;align-content:center}
  .scene .txt h2{font-size:clamp(1.7rem,7vw,2.4rem)}
  .scene .txt p{font-size:.95rem}
}

/* laptop */
.web-scene{background:var(--paper-2)}
.laptop-wrap{perspective:3200px;perspective-origin:50% 30%;width:100%;max-width:680px;margin:0 auto;padding:0 0 40px}
.laptop{position:relative;width:100%;aspect-ratio:16/11;transform-style:preserve-3d;transform:rotateX(-42deg)}
.lid{position:absolute;left:0;right:0;bottom:16%;aspect-ratio:16/10.3;transform-origin:50% 100%;transform-style:preserve-3d;transform:rotateX(-90deg);border-radius:14px 14px 4px 4px;background:#1b1a19;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);will-change:transform}
.lid .screen{position:absolute;inset:3.2%;border-radius:8px;overflow:hidden;background:#000;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lid .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .35s}
.lid .screen img.on{opacity:1}
.lid .cam{position:absolute;top:1.2%;left:50%;width:6px;height:6px;border-radius:50%;background:#2d2d2d;transform:translateX(-50%)}
.lid .back{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,#d9d6d1,#b9b5af);transform:rotateX(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.base{position:absolute;left:-3%;right:-3%;bottom:16%;height:2.4%;background:linear-gradient(#e6e3de,#b9b4ad);border-radius:3px;transform-origin:50% 100%;transform:translateY(100%) rotateX(-90deg) translateY(-100%);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.base::after{content:"";position:absolute;left:44%;right:44%;top:0;height:40%;background:#a8a39c;border-radius:0 0 6px 6px}
.deck{position:absolute;left:-3%;right:-3%;bottom:0;height:16%;transform-origin:50% 0;transform:rotateX(90deg) scaleY(5.2);background:linear-gradient(#dcd8d2,#cdc8c0);border-radius:0 0 12px 12px;box-shadow:inset 0 1px 0 #fff}
.deck::before{content:"";position:absolute;left:9%;right:9%;top:14%;height:44%;background:repeating-linear-gradient(90deg,#bdb8b0 0 5.4%,transparent 5.4% 6.1%);border-radius:4px;opacity:.9}
.deck::after{content:"";position:absolute;left:38%;right:38%;bottom:8%;height:26%;background:#c8c3bb;border-radius:4px}
.lshadow{position:absolute;left:0;right:0;bottom:0;height:16%;transform-origin:50% 0;transform:rotateX(90deg) scaleY(5.6) translateZ(-2px);background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.32),transparent 68%);filter:blur(8px)}
.web-tabs{display:flex;gap:10px;justify-content:center;margin-top:clamp(40px,7vw,96px);flex-wrap:wrap}
.web-tabs span{font:500 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:9px 12px;border:1px solid var(--line);border-radius:999px;transition:all .3s}
.web-tabs span.on{color:#fff;background:var(--ink);border-color:var(--ink)}
@media (max-width:900px){.laptop-wrap{max-width:520px;padding:16px 0 30px}}

/* camera */
.cam-scene{background:var(--paper)}
.cam-svg{width:100%;height:auto;max-height:78vh;overflow:visible}
.cam-svg .part{transition:none;will-change:transform}
.cam-svg .lbl{opacity:0;transition:opacity .4s}
.cam-svg .lbl text{font:500 15px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-2)}
.cam-svg .lbl text.h{font:700 34px/1 var(--hand);letter-spacing:0;text-transform:none;fill:var(--terra-d)}
.cam-svg .lbl line{stroke:var(--terra);stroke-width:1.2;stroke-dasharray:3 4}
.cam-svg.x .lbl{opacity:1}
@media (max-width:900px){.cam-svg{max-height:46vh}.cam-svg .lbl text{font-size:19px}.cam-svg .lbl text.h{font-size:36px}}

/* video */
.video{background:var(--ink);color:var(--paper)}
.video .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.video .kicker{color:var(--terra-l)}
.video p{color:#CFC8BF}
.video .frame{border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#000;position:relative}
.video .frame video{width:100%;height:100%;object-fit:cover}
.video .frame .tag{position:absolute;left:14px;bottom:14px;font:500 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);padding:8px 12px;border-radius:999px;backdrop-filter:blur(6px)}
@media (max-width:900px){.video .wrap{grid-template-columns:1fr}}

/* examples */
.branches{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.2vw,16px)}
.branches a{text-decoration:none;color:inherit;display:block}
.branches .ph{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.branches .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.branches a:hover .ph img{transform:scale(1.04)}
.branches .cap{display:flex;justify-content:space-between;align-items:center;padding:12px 0 0;font:500 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.branches .cap .ar{transition:transform .25s}
.branches a:hover .cap .ar{transform:translateX(4px)}
@media (max-width:900px){.branches{grid-template-columns:repeat(2,1fr)}.branches a:last-child{grid-column:span 2}}
.webshots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(40px,5vw,64px)}
.webshots figure{margin:0}
.webshots .shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 20px 40px -24px rgba(0,0,0,.35);aspect-ratio:9/16}
.webshots .feat{grid-column:1/-1}
.webshots .feat .shot{aspect-ratio:16/10}
.webshots .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.webshots figcaption{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-top:10px;font-size:.9rem;color:var(--muted)}
.webshots figcaption b{font-weight:500;color:var(--ink)}
.pill{display:inline-block;font:500 .62rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:6px 9px;border-radius:6px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.live{border-color:var(--terra);color:var(--terra-d)}
@media (max-width:900px){.webshots{grid-template-columns:repeat(3,1fr);gap:10px}.webshots figcaption{flex-direction:column;gap:4px;font-size:.78rem}}

/* pricing */
.pricing{background:var(--paper-2);border-top:1px solid var(--line)}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);align-items:stretch}
@media (max-width:1000px){.ways{grid-template-columns:1fr;max-width:36rem}}
.way{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;gap:16px;position:relative}
.way.hi{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.way .hand{font-size:clamp(2.1rem,3vw,2.7rem);color:var(--terra-d)}
.way.hi .hand{color:var(--terra-l)}
.way .how{font-size:.95rem;color:var(--ink-2);margin:0;min-height:4.4em}
.way.hi .how{color:#CFC8BF}
.way ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.way.hi ul{border-color:rgba(255,255,255,.15)}
.way li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.way.hi li{border-color:rgba(255,255,255,.15)}
.way li b{font:500 1.25rem/1 var(--serif);white-space:nowrap}
.way li small{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}
.way.hi li small{color:#A9A299}
.way .btn{align-self:flex-start;margin-top:auto}
.way .fine{font-size:.8rem;color:var(--muted);margin:0}
.way.hi .fine{color:#A9A299}
.pricing .notes{margin-top:clamp(28px,4vw,44px);max-width:60rem;columns:2;column-gap:40px;font-size:.88rem;color:var(--ink-2)}
.pricing .notes p{margin:0 0 10px;break-inside:avoid}
@media (max-width:800px){.pricing .notes{columns:1}}

/* process */
.process ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);counter-reset:p;border-top:1px solid var(--line);padding-top:30px}
@media (max-width:900px){.process ol{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.process ol{grid-template-columns:1fr}}
.process li{position:relative}
.process .num{font:400 clamp(2rem,3vw,2.6rem)/1 var(--serif);color:var(--terra-l);display:flex;align-items:center;gap:14px;margin-bottom:18px}
.process .num svg{width:30px;height:30px;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.process h3{font-size:1.25rem;margin-bottom:8px}
.process p{margin:0;color:var(--ink-2);font-size:.95rem}
.process .time{margin-top:clamp(24px,3vw,36px);max-width:46rem;color:var(--muted);font-size:.92rem}

/* about */
.about .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.about .wrap{grid-template-columns:1fr}}
.about .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-width:440px;background:var(--paper-3)}
.about .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03)}
.about .q{font-family:var(--serif);font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.3;margin:0 0 22px}
.about p{color:var(--ink-2)}
.about .facts{display:flex;flex-wrap:wrap;gap:8px 22px;font:500 .7rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:22px}
.klarumi{margin-top:clamp(36px,5vw,56px);padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:var(--r);background:var(--white);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.klarumi .hand{font-size:2.2rem;color:var(--terra-d);line-height:1}
.klarumi p{margin:0;color:var(--ink-2);font-size:.95rem}
.klarumi b{font-weight:600;color:var(--ink)}
@media (max-width:640px){.klarumi{grid-template-columns:1fr}}

/* faq */
.faq .list{max-width:50rem}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:500 1.05rem/1.35 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:20px;height:20px;transition:transform .25s;stroke:var(--terra);fill:none;stroke-width:2}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--ink-2);max-width:44rem}

/* contact */
.contact{background:var(--paper-2);border-top:1px solid var(--line)}
.contact .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}
.contact .ways-c{display:grid;gap:10px;margin-top:28px}
.contact .ways-c a{display:flex;align-items:center;gap:14px;text-decoration:none;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--white);font-size:1rem}
.contact .ways-c a:hover{border-color:var(--ink)}
.contact .ways-c svg{width:20px;height:20px;flex:none;stroke:var(--terra-d);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact .ways-c small{display:block;color:var(--muted);font-size:.8rem}
form.f{display:grid;gap:14px;padding:clamp(22px,3vw,34px);background:var(--white);border:1px solid var(--line);border-radius:18px}
form.f .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){form.f .row{grid-template-columns:1fr}}
form.f label{display:grid;gap:6px;font:500 .8rem/1.3 var(--sans);color:var(--ink-2)}
form.f input,form.f select,form.f textarea{width:100%;font:400 1rem/1.4 var(--sans);color:var(--ink);background:#fff;border:1px solid rgba(21,19,16,.22);border-radius:10px;padding:13px 14px;min-height:50px}
form.f textarea{min-height:110px;resize:vertical}
form.f input:focus,form.f select:focus,form.f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(196,105,74,.22)}
form.f select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23151310' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
form.f .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
form.f .seg input{position:absolute;opacity:0;width:0;height:0;min-height:0}
form.f .seg span{display:block;text-align:center;padding:12px 8px;border:1px solid var(--line-2);border-radius:10px;font:500 .78rem/1.3 var(--sans);cursor:pointer;color:var(--ink-2)}
form.f .seg span small{display:block;font:700 1.05rem/1 var(--hand);color:var(--terra-d);margin-bottom:4px}
form.f .seg input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
form.f .seg input:checked+span small{color:var(--terra-l)}
form.f .seg input:focus-visible+span{outline:2px solid var(--terra);outline-offset:2px}
@media (max-width:560px){form.f .seg{grid-template-columns:1fr}}
form.f .chk[hidden]{display:none}
form.f .chk{display:flex;gap:12px;align-items:flex-start;font:400 .9rem/1.5 var(--sans);color:var(--ink-2)}
form.f .chk input{width:20px;height:20px;min-height:0;margin-top:2px;flex:none;accent-color:var(--terra)}
form.f .hp{position:absolute;left:-9999px}
form.f .fine{font-size:.8rem;color:var(--muted);margin:0}
form.f .btn{justify-self:start}
form.f .msg{display:none;padding:16px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:.95rem}
form.f .msg.show{display:block}form.f .msg.err{border-color:#B04A2E}
form.f .msg .btn-row{margin-top:12px}
.sum{font-size:.88rem;color:var(--muted);padding:12px 14px;border-radius:10px;background:var(--paper);border:1px dashed var(--line-2)}
.sum b{color:var(--ink);font-weight:600}

/* footer */
footer.site{padding:clamp(44px,6vw,72px) 0 32px;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr}}
footer.site .brand{margin-bottom:14px}
footer.site a{color:var(--ink-2);text-decoration:none}footer.site a:hover{text-decoration:underline}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer.site .legal{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:.84rem}
footer.site .hand{font-size:1.9rem;color:var(--terra-d);margin:0 0 8px}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*90ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .hero .slogan .ul path{animation:none;stroke-dashoffset:0}
  .scene{height:auto}.scene .sticky{position:static;height:auto;padding:60px 0}
  .lid{transform:rotateX(6deg)!important}.laptop{transform:rotateX(-8deg)!important}.lid .screen img:first-child{opacity:1}
  .cam-svg .lbl{opacity:1}
  .scene .hint{display:none}
}

/* subpages */
.page{padding:clamp(32px,5vw,64px) 0 clamp(64px,8vw,110px)}
.page .prose{max-width:44rem}
.page .prose h2{font:500 .74rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--terra-d);margin:40px 0 10px;padding-top:24px;border-top:1px solid var(--line)}
.page .prose p,.page .prose li{color:var(--ink-2)}
.back{display:inline-block;text-decoration:none;color:var(--muted);font:500 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;margin-bottom:28px}
.back:hover{color:var(--ink)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin-top:clamp(24px,3vw,40px)}
@media (max-width:860px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0;overflow:hidden;border-radius:12px;background:var(--paper-3);aspect-ratio:3/2}
.gal img{width:100%;height:100%;object-fit:cover}
.gal-head{margin-top:clamp(48px,6vw,80px);max-width:44rem}
.gal-head h2{margin-bottom:10px;font-size:clamp(1.6rem,3vw,2.2rem)}
.gal-head p{color:var(--ink-2);margin:0}

/* camera list (mobile) */
.cam-list{display:none;list-style:none;margin:10px 0 0;padding:0;gap:4px 18px;flex-wrap:wrap;opacity:0;transition:opacity .4s}
.cam-list li{font:700 1.25rem/1.2 var(--hand);color:var(--terra-d)}
.scene.x .cam-list{opacity:1}
@media (max-width:900px){.cam-list{display:flex}.cam-svg .lbl{display:none}.hero .slogan{font-size:clamp(3.6rem,13vw,5.4rem)}}