/* Serendip Digital: site styles
   Palette: Misty Blue base, Navy text, Burgundy accents, Olive + Gray secondary (decorative only).
   Type: HK Grotesk (Hanken Grotesk variable) + Georgia Italic for single moments of emphasis. */

@font-face{font-family:"HK Grotesk";src:url(../fonts/HankenGrotesk-var-latin.woff2) format("woff2-variations"),url(../fonts/HankenGrotesk-var-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"HK Fallback";src:local("Arial"),local("Helvetica Neue"),local("Roboto");size-adjust:99%;ascent-override:100%;descent-override:30%;line-gap-override:0%}

:root{
  --misty:#C7D5E4; --misty-hi:#D5E0EB; --misty-lo:#B9C9DA;
  --navy:#172733; --navy-70:rgba(23,39,51,.72); --navy-55:rgba(23,39,51,.58);
  --burgundy:#4B1020; --olive:#6D712E; --gray:#A6AAA5;
  --line:rgba(23,39,51,.14);
  --sans:"HK Grotesk","HK Fallback",Arial,sans-serif;
  --hh:76px; --gutter:clamp(22px,6.5vw,112px); --maxw:1240px;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --ease:cubic-bezier(.22,.8,.24,1); --t-fast:160ms; --t:260ms; --t-slow:520ms;
  --glass:rgba(255,255,255,.30); --glass-line:rgba(255,255,255,.55);
  --shadow-float:0 1px 2px rgba(23,39,51,.05),0 18px 40px -26px rgba(23,39,51,.30);
}
@media (max-width:760px){:root{--hh:64px;--gutter:20px}}

*{box-sizing:border-box;margin:0}
html{overflow-x:clip;scroll-padding-top:calc(var(--hh) + 24px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:220ms;animation-timing-function:var(--ease)}
body{background:var(--misty);color:var(--navy);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px;border-radius:8px}
::selection{background:var(--burgundy);color:#F6EEF0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none;transition:top var(--t) var(--ease)}
.skip:focus{top:12px}

/* barely-perceptible paper grain */
body::before{content:none;position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.15  0 0 0 0 0.2  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,footer{position:relative;z-index:1}

/* ---------- type ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-70)}
.eyebrow img{width:22px;height:auto;aspect-ratio:216/96;opacity:.85}
.h1{font:400 clamp(2.4rem,4.4vw,4rem)/1.05 var(--sans);letter-spacing:-.03em;text-wrap:balance}
.h2{font:400 clamp(1.8rem,3vw,2.6rem)/1.08 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.h3{font:700 clamp(1.25rem,1.7vw,1.5rem)/1.2 var(--sans);letter-spacing:-.015em}
.em{font-weight:700}
.lede{font:400 clamp(1.08rem,1.35vw,1.25rem)/1.55 var(--sans);color:var(--navy-70);max-width:52ch;text-wrap:pretty}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;
  font:700 15px/1 var(--sans);text-decoration:none;cursor:pointer;border:1px solid transparent;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn:active{transform:scale(.97)}
.btn svg{width:12px;height:12px;flex:none;transition:transform var(--t) var(--ease)}
.btn:hover svg.ne{transform:translate(2px,-2px)}
.btn:hover svg.e{transform:translateX(3px)}
.btn-solid{background:var(--burgundy);color:#F6EEF0}
.btn-solid:hover{background:#3A0A17}
.btn-line{border-color:var(--burgundy);color:var(--burgundy);background:transparent}
.btn-line:hover{background:var(--burgundy);color:#F6EEF0}
.btn-quiet{border-color:var(--line);background:rgba(255,255,255,.22);color:var(--navy)}
.btn-quiet:hover{background:rgba(255,255,255,.45)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;color:var(--burgundy);border-bottom:1px solid rgba(75,16,32,.3);padding-bottom:2px;
  transition:border-color var(--t-fast) var(--ease)}
.link:hover{border-color:var(--burgundy)}
.link svg{width:11px;height:11px;transition:transform var(--t) var(--ease)}
.link:hover svg{transform:translateX(3px)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--hh);border-bottom:1px solid transparent;
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),-webkit-backdrop-filter var(--t) var(--ease),backdrop-filter var(--t) var(--ease)}
.site-header.is-solid{background:var(--misty)}
.header-inner{height:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav-l,.nav-r{display:flex;align-items:center;gap:clamp(24px,2.8vw,40px)}
.nav-r{justify-content:flex-end}
.mark{display:flex;align-items:center;justify-self:center;padding:10px;border-radius:12px;transition:opacity var(--t-fast) var(--ease)}
.mark:hover{opacity:.7}
.mark img{height:17px;width:auto;aspect-ratio:216/96}
.nav{display:flex;align-items:center;gap:clamp(22px,2.6vw,38px)}
.nav-link{font-weight:400;font-size:15.5px;text-decoration:none;position:relative;padding:8px 0}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nav-r .btn{min-height:40px;padding:0 18px;font-size:15px;font-weight:400}
.menu-btn{display:none}
@media (max-width:820px){
  .header-inner{grid-template-columns:auto 1fr}
  .nav-l,.nav-r{display:none}
  .mark{justify-self:start;margin-left:-10px}
  .menu-btn{justify-self:end}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 12px;border:0;background:none;font-weight:700;font-size:15px;cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent}
  .menu-btn:active{opacity:.7}
  .burger{width:22px;height:11px;position:relative}
  .burger i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px}
  .burger i:first-child{top:0}.burger i:last-child{bottom:0}
}

/* ---------- reveal ---------- */
/* (reveal timing lives in the v21 motion block) */

/* ---------- glass + photo frames ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);box-shadow:var(--shadow-float)}
.frame{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--misty-lo);box-shadow:var(--shadow-float);isolation:isolate}
.frame img{width:100%;height:100%;object-fit:cover}
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none}
.tag{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  font:700 12.5px/1 var(--sans);color:var(--navy);background:rgba(232,239,246,.72);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--olive)}
.fields{position:relative}
.fields::before{content:none;position:absolute;inset:-6% -2%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 18% 40%,rgba(75,16,32,.16),transparent),radial-gradient(closest-side at 82% 60%,rgba(109,113,46,.20),transparent),radial-gradient(closest-side at 50% 0%,rgba(23,39,51,.12),transparent)}

/* placeholder frame for missing project imagery: calm, intentional, no visible notes */
.ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(150deg,#DCE5EE 0%,#C2D0DF 55%,#B3C3D3 100%)}
.ph .browser{margin-top:7%;width:84%;aspect-ratio:16/10;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 60px -30px rgba(23,39,51,.45);overflow:hidden}
.ph .phone{position:absolute;right:7%;bottom:9%;width:21%;aspect-ratio:9/19;border-radius:22px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);box-shadow:0 30px 50px -24px rgba(23,39,51,.5)}
.ph .phone::before{content:"";position:absolute;inset:12% 10% auto;aspect-ratio:1;border-radius:12px;background:linear-gradient(160deg,rgba(75,16,32,.16),rgba(75,16,32,.06))}

/* ---------- HOME: hero ---------- */
.hero{min-height:100svh;padding-top:calc(var(--hh) + clamp(28px,6vh,72px));padding-bottom:clamp(40px,8vh,96px);display:flex;align-items:center}
.fan{position:relative;aspect-ratio:1/1.02;max-width:560px;justify-self:end;width:100%}
.fan .frame{position:absolute;will-change:transform;transform:translate3d(var(--x,0),var(--y,0),0) rotate(var(--r,0deg))}
@media (max-width:900px){
  .hero{min-height:auto;align-items:flex-start}
  .fan{justify-self:center;max-width:460px;aspect-ratio:1/0.92}
}

/* ---------- HOME: intro ---------- */
.intro{padding-block:clamp(56px,11vh,140px)}
.intro p{font:400 clamp(1.5rem,2.7vw,2.35rem)/1.28 var(--sans);letter-spacing:-.018em;max-width:28ch;text-wrap:pretty}
.intro .em{font-weight:700}
.offer{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.offer span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.18);font-weight:700;font-size:15px}
.offer span i{width:6px;height:6px;border-radius:50%;background:var(--olive)}

/* ---------- section heads ---------- */
.sec{padding-block:clamp(64px,11vh,140px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,4.5vw,52px);flex-wrap:wrap}
.sec-head .h2{margin-top:14px}

/* ---------- HOME: work grid ---------- */
.work-grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:clamp(16px,2vw,24px)}
.wcard{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--navy);box-shadow:var(--shadow-float);
  transform:translate3d(0,0,0);transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease)}
.wcard .media{position:relative;overflow:hidden}
.wcard .media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.wcard:hover{transform:translate3d(0,-4px,0)}
.wcard:hover .media img{transform:scale(1.03)}
.wcard .cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 12px 12px 18px;border-radius:18px;background:rgba(232,239,246,.68);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}
.wcard .cap b{display:block;font:700 16px/1.2 var(--sans);letter-spacing:-.01em}
.wcard .cap small{display:block;font:400 13px/1.3 var(--sans);color:var(--navy-70);margin-top:3px}
.wcard .go{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--burgundy);color:#F6EEF0;transition:transform var(--t) var(--ease)}
.wcard .go svg{width:12px;height:12px}
.wcard:hover .go{transform:rotate(-45deg)}
.wcard.big{grid-row:1 / span 2}
.wcard.big{min-height:560px}
.wcard.big .media{position:absolute;inset:0}
.wcard.sm .media{aspect-ratio:16/10.5;position:relative}
.wcard .media.arka{background:linear-gradient(150deg,#22394B,#172733 60%,#3A1620)}
.wcard .media.arka img{position:absolute;inset:auto auto 12% 8%;width:84%;height:auto;border-radius:12px;box-shadow:0 24px 40px -20px rgba(0,0,0,.6)}
.wcard .media.arka .g{position:absolute;right:6%;top:9%;width:58%;border-radius:10px;box-shadow:0 20px 30px -16px rgba(0,0,0,.55);transform:rotate(2deg)}
@media (max-width:820px){
  .work-grid{grid-template-columns:1fr}
  .wcard.big{grid-row:auto}
  .wcard.big{min-height:0}
  .wcard.big .media{position:relative;inset:auto;aspect-ratio:4/4.4}
}

/* ---------- packages (cards) ---------- */
.pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.pk{position:relative;border-radius:var(--r-lg);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;min-height:330px}
.pk .kind{font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-70)}
.pk .name{font:700 clamp(1.4rem,2vw,1.75rem)/1.1 var(--sans);letter-spacing:-.02em;margin-top:14px}
.pk .name .em{font-weight:400}
.pk .price{margin-top:22px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pk .price b{font:700 clamp(2rem,3vw,2.6rem)/1 var(--sans);letter-spacing:-.03em;color:var(--burgundy)}
.pk .price span{font-size:14.5px;color:var(--navy-70)}
.pk p{margin-top:16px;font-size:16px;color:var(--navy-70);max-width:34ch}
.pk .link{margin-top:auto;padding-top:26px;align-self:flex-start;border:0}
.pk .link span{border-bottom:1px solid rgba(75,16,32,.3);padding-bottom:2px;transition:border-color var(--t-fast) var(--ease)}
.pk .link:hover span{border-color:var(--burgundy)}
.pk.ongoing{border-color:rgba(75,16,32,.35)}
.pk .badge{position:absolute;top:22px;right:22px;font:700 12px/1 var(--sans);padding:7px 10px;border-radius:999px;background:var(--burgundy);color:#F6EEF0}
@media (max-width:900px){.pk-grid{grid-template-columns:1fr}.pk{min-height:0}}

/* ---------- how it goes ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);padding-top:64px}
.steps .wave{position:absolute;left:0;right:0;top:0;height:40px;width:100%;overflow:visible}
.steps .wave path{fill:none;stroke:var(--burgundy);stroke-width:1.6;stroke-linecap:round;opacity:.55}
.step .n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(75,16,32,.35);background:rgba(255,255,255,.3);font:700 15px/1 var(--sans);color:var(--burgundy);margin-bottom:22px}
.step h3{font:700 clamp(1.35rem,2vw,1.7rem)/1.15 var(--sans);letter-spacing:-.02em}
.step p{margin-top:10px;color:var(--navy-70);max-width:30ch}
@media (max-width:820px){
  .steps{grid-template-columns:1fr;padding-top:0;padding-left:64px;gap:36px}
  .steps .wave{display:none}
  .steps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:1px;background:rgba(75,16,32,.3)}
  .step{position:relative}
  .step .n{position:absolute;left:-64px;top:-6px;margin:0;background:var(--misty)}
}

/* ---------- contact band ---------- */
.band{border-radius:clamp(24px,3vw,36px);padding:clamp(36px,6vw,80px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:end}
.band .h2{max-width:16ch}
.band .acts{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.band .acts small{color:var(--navy-70);font-size:14.5px}
@media (max-width:820px){.band{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{padding:clamp(56px,9vh,110px) 0 36px;border-top:1px solid var(--line);margin-top:clamp(40px,8vh,96px)}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px}
.foot .logo{width:118px;height:auto;aspect-ratio:953/520}
.foot .line{margin-top:18px;color:var(--navy-70);max-width:28ch;font-size:15.5px}
.foot h4{font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-70);margin-bottom:16px}
.foot ul{list-style:none;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none;font-weight:400}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--navy-70)}
@media (max-width:820px){.foot{grid-template-columns:1fr 1fr}.foot > div:first-child{grid-column:1 / -1}}

/* ---------- inner page hero ---------- */
.page-hero{padding-top:calc(var(--hh) + clamp(48px,10vh,120px));padding-bottom:clamp(36px,6vh,72px)}
.page-hero .h1{margin-top:18px;max-width:18ch}
.page-hero .lede{margin-top:20px}

/* ---------- WORK page ---------- */
.jump{position:sticky;top:calc(var(--hh) + 10px);z-index:20;display:flex;gap:8px;flex-wrap:wrap;padding:8px;border-radius:999px;width:max-content;max-width:100%;margin-bottom:clamp(36px,6vh,64px)}
.jump a{padding:10px 16px;border-radius:999px;font-weight:700;font-size:14.5px;text-decoration:none;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.jump a:hover{background:rgba(255,255,255,.45)}
.jump a.on{background:var(--navy);color:#EEF3F8}
@media (max-width:640px){.jump{border-radius:22px;width:auto}.jump a{padding:9px 13px;font-size:14px}}
.project{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;padding-block:clamp(40px,8vh,96px);border-top:1px solid var(--line)}
.project:first-of-type{border-top:0;padding-top:0}
.project.flip .gallery{order:2}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.gallery .frame.wide{grid-column:1 / -1}
.gallery .frame.tall{aspect-ratio:4/5}
.gallery .frame.shot{background:#fff}
.gallery .frame.shot img{object-fit:cover;object-position:top left}
.did{list-style:none;padding:0;margin-top:26px;border-top:1px solid var(--line)}
.did li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-weight:700}
.did li span{color:var(--navy-70);font-weight:400;text-align:right}
@media (max-width:900px){.project{grid-template-columns:1fr}.project.flip .gallery{order:0}}

/* ---------- PACKAGES page ---------- */
.pk-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);padding:clamp(28px,4vw,56px);border-radius:var(--r-lg);margin-bottom:clamp(18px,2.4vw,28px)}
.pk-detail .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:22px}
.pk-detail .price b{font:700 clamp(2.4rem,4vw,3.4rem)/1 var(--sans);letter-spacing:-.035em;color:var(--burgundy)}
.pk-detail .price span{color:var(--navy-70)}
.pk-detail .sum{margin-top:18px;color:var(--navy-70);max-width:40ch}
.pk-detail .btn{margin-top:28px}
.incl h3{font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-70);margin:0 0 6px}
.incl ul{list-style:none;padding:0}
.incl li{position:relative;padding:13px 0 13px 30px;border-bottom:1px solid var(--line)}
.incl li::before{content:"";position:absolute;left:2px;top:21px;width:14px;height:8px;border-left:1.6px solid var(--burgundy);border-bottom:1.6px solid var(--burgundy);transform:rotate(-45deg)}
.incl .note{margin-top:22px;padding:16px 18px;border-radius:var(--r-sm);background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.5);font-size:15.5px;color:var(--navy-70)}
.incl .note + .note{margin-top:10px}
.incl h3 + ul{margin-bottom:10px}
.incl .sub{margin-top:26px}
@media (max-width:900px){.pk-detail{grid-template-columns:1fr}}

/* ---------- ABOUT ---------- */

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(20px,4vw,48px);align-items:start}
.form{border-radius:var(--r-lg);padding:clamp(24px,3.4vw,44px)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label,.field legend{font-weight:700;font-size:14.5px}
.field .opt{font-weight:400;color:var(--navy-70)}
.field input,.field textarea{width:100%;border-radius:14px;border:1px solid rgba(23,39,51,.22);background:rgba(255,255,255,.55);padding:13px 15px;font-size:16px;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--burgundy);background:rgba(255,255,255,.8);box-shadow:0 0 0 3px rgba(75,16,32,.14)}
.field textarea{min-height:130px;resize:vertical}
fieldset.field{border:0;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border-radius:999px;border:1px solid rgba(23,39,51,.22);background:rgba(255,255,255,.4);font-weight:700;font-size:15px;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.chip input:checked + span{background:var(--navy);color:#EEF3F8;border-color:var(--navy)}
.chip input:focus-visible + span{outline:2px solid var(--burgundy);outline-offset:2px}
.send{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.form-msg{margin-top:16px;font-size:15px;color:var(--navy-70);min-height:1.5em}
.form-msg.err{color:var(--burgundy)}
.side{display:grid;gap:16px}
.side .card{border-radius:var(--r-md);padding:24px}
.side .card h2{font:700 19px/1.25 var(--sans);letter-spacing:-.01em}
.side .card p{margin-top:8px;color:var(--navy-70);font-size:15.5px}
.side .card .btn{margin-top:16px}
.side .card a.plain{font-weight:700;text-decoration:none;border-bottom:1px solid var(--line)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}
  .js .rv{opacity:1;transform:none}
  .fan .frame{transform:rotate(var(--r,0deg)) !important}
  .wcard:hover,.wcard:hover .media img{transform:none}
}

/* icon sizing everywhere (arrows never inherit a huge default size) */
svg.e,svg.ne{width:12px;height:12px;flex:none}
@media (max-width:640px){
  .jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:999px;width:auto;scroll-snap-type:x proximity}
  .jump::-webkit-scrollbar{display:none}
  .jump a{flex:none;white-space:nowrap;scroll-snap-align:start}
}

/* ---------- HOME hero v2: logo + one line ---------- */
.hero2{padding:calc(var(--hh) + clamp(48px,10vh,112px)) var(--gutter) clamp(48px,9vh,96px);text-align:center}
.hero2 h1{margin:0}
.hero2 .logo{display:block;width:clamp(210px,24vw,340px);height:auto;aspect-ratio:953/520;margin:0 auto}
.hero2 .line{margin-top:clamp(28px,4.5vh,44px);font:400 clamp(1.25rem,1.9vw,1.6rem)/1.4 var(--sans);letter-spacing:-.012em;color:var(--navy);text-wrap:balance}
.hero2 .line b{font-weight:700}
.hero2 .line span{white-space:nowrap}
@keyframes enter{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.hero2 .logo,.hero2 .line{animation:enter 700ms var(--ease) both}
.hero2 .line{animation-delay:120ms}
.work-wrap{padding-bottom:clamp(56px,10vh,120px)}
.work-wrap .more{display:flex;justify-content:flex-end;margin-top:22px}

/* ===================== v3 adjustments ===================== */

/* paper texture: hero only, barely there, fades out before the projects */
.paper-zone{position:absolute;left:0;right:0;top:0;height:var(--paper-h,820px);z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09  0 0 0 0 .15  0 0 0 0 .20  0 0 0 .055 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
                   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%)}
.hero2,.work-wrap{position:relative;z-index:1}
.hero2 .logo{overflow:visible}
@media (prefers-reduced-motion:no-preference){.hero2 .logo{animation:enter 700ms var(--ease) both}}

/* bridge between the promise and the work */
.hero2{padding-bottom:clamp(40px,7vh,72px)}

/* text link, no icon */
.text-link{font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(23,39,51,.4);transition:text-decoration-color var(--t-fast) var(--ease)}
.text-link:hover{text-decoration-color:var(--burgundy);color:var(--burgundy)}
.link{border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* project cards: whole card is the link */
.wcard:focus-visible{outline:2px solid var(--burgundy);outline-offset:4px}
.wcard:hover{transform:translate3d(0,-3px,0)}
.wcard:hover .media img{transform:scale(1.02)}
.wcard .cap{padding:12px 18px}

/* ---- mobile: equal 4:5 cards that stack as you scroll ---- */
@media (max-width:820px){
  .work-grid{display:block}
  .work-grid .wcard{position:sticky;top:calc(var(--hh) + 14px + var(--i,0) * 10px);aspect-ratio:4/5;min-height:0;margin-bottom:18px;
    transform:scale(var(--s,1));transform-origin:50% 0;transition:none}
  .work-grid .wcard:nth-child(1){--i:0}.work-grid .wcard:nth-child(2){--i:1}.work-grid .wcard:nth-child(3){--i:2}
  .work-grid .wcard .media,.work-grid .wcard.big .media,.work-grid .wcard.sm .media{position:absolute;inset:0;aspect-ratio:auto;height:auto}
  .work-grid .wcard .cap{top:12px;bottom:auto}  /* label sits at the top, so it stays readable while the next card covers from below */
  .work-grid .wcard:hover{transform:scale(var(--s,1))}
  .work-grid .wcard .media.arka img{width:92%;left:4%;bottom:6%}
  .work-grid .wcard .media.arka .g{width:84%;right:4%;top:22%}
  .work-grid .wcard .ph .browser{margin-top:22%}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .work-grid .wcard{position:relative;top:auto;transform:none}
}

/* ---- compact mobile menu ---- */
.menu-btn .mb-label{min-width:44px;text-align:left}
.burger i{transition:transform var(--t) var(--ease),top var(--t) var(--ease),bottom var(--t) var(--ease)}
.menu-btn[aria-expanded="true"] .burger i:first-child{top:5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger i:last-child{bottom:4.5px;transform:rotate(-45deg)}
.mmenu{position:fixed;z-index:49;top:var(--hh);left:0;right:0;background:var(--misty);padding:4px var(--gutter) 22px;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translate3d(0,-6px,0);visibility:hidden;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility 0s linear var(--t)}
.menu-open .mmenu{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.menu-open .site-header{background:var(--misty)}
.mmenu nav a{display:flex;align-items:center;min-height:48px;font:400 17px/1.2 var(--sans);text-decoration:none;border-bottom:1px solid rgba(23,39,51,.08)}
.mmenu nav a[aria-current="page"]{font-weight:700}
.mm-acts{display:flex;align-items:center;gap:20px;margin-top:18px;flex-wrap:wrap}
.mm-acts .btn{min-height:44px;padding:0 20px}
.mm-wa{display:inline-flex;align-items:center;min-height:44px;font-size:15.5px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(23,39,51,.35)}
@media (min-width:821px){.mmenu{display:none}}

/* contact form: keep hidden checkboxes tiny and fields inside their column */
.chip{position:relative}
.chip input{width:1px;height:1px;margin:0}
.row2 > .field,.field{min-width:0}
.field input,.field textarea{min-width:0;max-width:100%}

/* ===================== v4 refinements ===================== */

/* one spacing scale for every section */
:root{--sec-y:clamp(56px,7.5vw,104px);--sec-y-sm:clamp(40px,5vw,72px)}
.sec{padding-block:var(--sec-y)}
.hero2{padding-bottom:var(--sec-y-sm)}
.intro{padding-block:0 var(--sec-y-sm)}
.intro p{font-weight:400;font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.34;max-width:32ch;text-align:left}
.intro .em{font-weight:700}
.work-wrap{padding-bottom:0}
.work-wrap .more{margin-top:18px}
.page-hero{padding-bottom:var(--sec-y-sm)}
.project{padding-block:var(--sec-y-sm)}
.site-footer{margin-top:0;padding:var(--sec-y-sm) 0 32px}

/* section reveal: whole block, short and small */
.js .rv{opacity:0;transform:translate3d(0,16px,0);transition:opacity 560ms var(--ease),transform 560ms var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- satin glass: on cards only ---------- */
.glass,.pk,.band,.pillar,.side .card,.form,.pk-detail{
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.24) 38%,rgba(255,255,255,.18) 100%);
  border:1px solid rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(23,39,51,.06),0 10px 26px -14px rgba(23,39,51,.28)}
.glass::before,.pk::before,.band::before,.pillar::before,.side .card::before,.form::before,.pk-detail::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 48% at 50% -14%,rgba(255,255,255,.55),rgba(255,255,255,0) 62%)}
/* project cards: photos stay clear, only a fine sheen on the top edge */
.wcard{box-shadow:0 1px 2px rgba(23,39,51,.06),0 10px 26px -14px rgba(23,39,51,.30);outline:1px solid rgba(255,255,255,.5);outline-offset:-1px}
.wcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 14%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.wcard .cap{background:linear-gradient(180deg,rgba(245,249,252,.86),rgba(232,239,246,.72));border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff,0 6px 16px -10px rgba(23,39,51,.3)}
.wcard:focus-visible{outline:2px solid var(--burgundy);outline-offset:4px}

/* ---------- mobile deck peel ---------- */
@media (max-width:820px){
  .work-grid{padding-bottom:0}
  .work-grid .wcard{position:sticky;top:calc(var(--hh) + 12px + var(--i,0) * 8px);aspect-ratio:4/5;margin:0 0 16px;
    transform:translate3d(0,0,0) scale(var(--s,1));transform-origin:50% 0;will-change:transform}
  .work-grid .wcard:last-child{margin-bottom:0}
  .work-grid .wcard .shade{position:absolute;inset:0;border-radius:inherit;background:#172733;opacity:var(--dim,0);pointer-events:none;z-index:2}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .work-grid .wcard{position:relative;top:auto;transform:none}
  .work-grid .wcard .shade{display:none}
}

/* ---------- packages: row on desktop, manual carousel below 980px ---------- */
.dots{display:none}
@media (max-width:980px){
  .pk-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter) * -1);padding:6px var(--gutter) 22px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .pk-grid::-webkit-scrollbar{display:none}
  .pk-grid .pk{flex:0 0 min(84%,420px);scroll-snap-align:start;min-height:0}
  .dots{display:flex;justify-content:center;gap:4px;margin-top:2px}
  .dots button{width:28px;height:28px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;border-radius:50%}
  .dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(23,39,51,.25);transition:background-color var(--t) var(--ease),transform var(--t) var(--ease)}
  .dots button[aria-current="true"]::before{background:var(--burgundy);transform:scale(1.15)}
}
@media (min-width:600px) and (max-width:980px){.pk-grid .pk{flex-basis:56%}}
.pk-grid:focus-visible{outline:2px solid var(--burgundy);outline-offset:4px;border-radius:12px}

/* ---------- how it goes: static wave, compact on mobile ---------- */
.steps .wave path{stroke-dashoffset:0 !important;stroke-dasharray:none !important}
@media (max-width:820px){.steps{gap:26px}.step h3{font-size:1.3rem}.step .n{margin:0}}

/* ---------- footer ---------- */
.foot{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:start}
.f-nav{display:flex;gap:28px;padding-top:6px}
.f-nav a,.f-hi a{text-decoration:none;font-weight:400;font-size:15.5px}
.f-nav a:hover,.f-hi a:hover{text-decoration:underline;text-underline-offset:4px}
.f-hi{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:4px}
.f-hi h2{font:700 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-70);margin-bottom:4px}
@media (max-width:820px){
  .foot{grid-template-columns:1fr 1fr;gap:26px 20px}
  .f-nav{flex-direction:column;gap:10px;padding:0}
  .f-hi{align-items:flex-start;padding:0}
  .f-nav a,.f-hi a{font-size:15px}
}

/* spacing between sections comes from the top only, so gaps never double */
.sec{padding-top:var(--sec-y);padding-bottom:0}
main > section:last-of-type{padding-bottom:var(--sec-y)}
.steps{margin-top:clamp(28px,4vw,48px) !important}

/* ---------- v5: project covers (picture per breakpoint, swap files in assets/img/covers) ---------- */
.wcard .media picture{display:block;width:100%;height:100%}
.wcard .media img{object-position:var(--fp,50% 50%)}
.wcard.big{min-height:0}                 /* big card = two small rows: ~9:10 on every desktop width */
.wcard.sm .media{aspect-ratio:3/2}
@media (max-width:820px){.wcard .media img{object-position:var(--fp-m,var(--fp,50% 50%))}}

/* ---------- v5: language switch ---------- */
.lang{display:inline-flex;align-items:center;gap:2px;font-size:13px;letter-spacing:.04em;line-height:1}
.lang a,.lang .on{display:inline-grid;place-items:center;min-width:30px;min-height:32px;padding:0 4px;text-decoration:none;border-radius:8px}
.lang a{color:var(--navy-70);font-weight:400;transition:color var(--t-fast) var(--ease)}
.lang a:hover{color:var(--navy)}
.lang .on{color:var(--navy);font-weight:700;position:relative}
.lang .on::after{content:"";position:absolute;left:9px;right:9px;bottom:6px;height:1.5px;background:var(--burgundy);border-radius:1px}
.lang .sep{color:var(--navy-70);opacity:.5}
.lang a:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.m-acts{display:none}
@media (max-width:820px){
  .m-acts{display:flex;align-items:center;gap:2px;justify-self:end}
  .lang-m a,.lang-m .on{min-width:36px;min-height:44px}
  .lang-m .on::after{bottom:11px;left:11px;right:11px}
  .lang-m{margin-right:2px;padding-right:8px;border-right:1px solid rgba(23,39,51,.14)}
}

/* ================= v6 ================= */
[id]{scroll-margin-top:calc(var(--hh) + 28px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sec .h2,.band .h2{margin-top:14px}
.steps{margin-top:clamp(28px,4vw,48px)}

/* project cards: the whole composition stays visible (contained on its own background); no sheen over the work */
.wcard{display:flex;flex-direction:column;background:var(--cover-bg,#fff)}
.wcard::after{display:none}
.wcard .media{background:var(--cover-bg,#fff)}
.wcard .media img{object-fit:contain}
.wcard:hover .media img{transform:none}
@media (min-width:821px){
  .wcard.big .media{position:relative;inset:auto;flex:1 1 auto;min-height:0}
  .wcard.big .media picture{position:absolute;inset:0}
  .wcard .cap{position:static;margin:0;border-radius:0;border:0;border-top:1px solid rgba(255,255,255,.7);
    background:linear-gradient(180deg,rgba(242,247,251,.94),rgba(228,236,244,.9));box-shadow:none;padding:14px 18px}
}
@media (max-width:820px){
  .wcard .media img{object-fit:cover}   /* mobile files are already 4:5 with the full composition inside */
}

/* our work: case studies */
.case{padding-block:clamp(40px,7vh,88px);border-top:1px solid var(--line)}
.case:first-of-type{border-top:0;padding-top:clamp(20px,3vh,32px)}
.shot-wide{aspect-ratio:3/2;background:var(--bg,#fff);margin:0}
.shot-wide img{object-fit:contain}
.case-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,5vw,80px);margin-top:clamp(28px,4vw,48px)}
.case .kind,.pk-detail .for{font:700 12.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-70)}
.case .h2{margin-top:12px}
.case .where{margin-top:10px;color:var(--navy-70)}
.case .tagline{margin-top:18px;font-size:1.15rem}
.case-text h3{font:700 15px/1.3 var(--sans);margin-top:22px}
.case-text h3:first-child{margin-top:0}
.case-text p{margin-top:6px;color:var(--navy-70);max-width:52ch}
.case .actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:24px}
.case .actions:empty{display:none}
.case .gallery{margin-top:clamp(24px,3vw,40px)}
.results{margin-top:clamp(24px,3vw,40px);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px)}
.results h3{font:700 15px/1.3 var(--sans)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}
.stats b{display:block;font:700 clamp(1.8rem,3.2vw,2.6rem)/1 var(--sans);color:var(--burgundy);letter-spacing:-.02em}
.stats span{display:block;margin-top:8px;font-size:14.5px;color:var(--navy-70)}
.fine{margin-top:18px;font-size:14px;color:var(--navy-70);max-width:70ch}
@media (max-width:900px){.case-body{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}}

/* packages page */
.pk-detail{scroll-margin-top:calc(var(--hh) + 28px)}
.pk-detail .for{margin-top:18px;text-transform:none;letter-spacing:0;font-weight:400;font-size:15.5px;line-height:1.5;max-width:44ch}
.pk-detail .addon-link{margin-top:18px}
.pk-detail.addon{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.1));border-style:dashed}

/* how it goes page */
.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,48px) clamp(20px,3vw,40px);counter-reset:none}
.flow li{border-top:1px solid var(--line);padding-top:20px}
.flow .n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(75,16,32,.35);font:700 14px/1 var(--sans);color:var(--burgundy)}
.flow h3{font:700 clamp(1.2rem,1.7vw,1.45rem)/1.2 var(--sans);margin-top:16px;letter-spacing:-.015em}
.flow p{margin-top:8px;color:var(--navy-70);max-width:34ch}
.fine-print{margin-top:clamp(36px,5vw,56px);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);max-width:760px}
.fine-print p{margin-top:10px;color:var(--navy-70)}
@media (max-width:820px){
  .flow{grid-template-columns:1fr;gap:0}
  .flow li{display:grid;grid-template-columns:40px 1fr;column-gap:16px;padding:18px 0}
  .flow .n{grid-row:1 / span 2}
  .flow h3{margin-top:6px}
}

/* about page */
.story{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.names{border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);margin:0}
.names div+div{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.names dt{font:700 1.35rem/1.1 var(--sans);letter-spacing:-.015em}
.names dd{margin:6px 0 0;color:var(--navy-70)}
@media (max-width:900px){.story{grid-template-columns:1fr}}

/* contact */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-msg.ok{color:var(--olive)}
[aria-invalid="true"]{border-color:var(--burgundy)!important}

/* mobile menu: six links stay compact */
@media (max-width:820px){.mmenu nav a{min-height:46px}}

/* ================= v7: copy refinements ================= */
/* intro: centered, moderate measure */
.intro{text-align:center}
.intro p{max-width:min(740px,100%);margin-inline:auto;font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.32;text-wrap:balance}
/* projects heading: discreet */
.work-title{font:400 clamp(1.25rem,1.8vw,1.55rem)/1.2 var(--sans);letter-spacing:-.012em;margin:0 0 clamp(16px,2vw,24px)}
.work-title .em{font-weight:700}
/* card label: original client isotype before the name */
.wcard .cap b.nm{display:flex;align-items:center;gap:9px}
.wcard .cap .iso{height:26px;width:auto;flex:none;border-radius:6px}
.wcard .cap small{padding-left:35px}
/* website care row under the packages */
.care-row{margin-top:clamp(18px,2vw,26px);border-radius:var(--r-md,20px);padding:16px clamp(18px,2.4vw,28px);display:flex;align-items:center;gap:10px clamp(16px,2.4vw,32px);flex-wrap:wrap}
.care-row p{margin:0}
.care-row b{font-weight:700;margin-right:10px}
.care-price{color:var(--burgundy);font-weight:700}
.care-price span{font-weight:400;font-size:.9em;color:var(--navy-70)}
.care-text{color:var(--navy-70);flex:1 1 280px}
.dots + .care-row{margin-top:14px}
/* contact band supporting text */
.band-text{margin-top:14px;color:var(--navy-70);max-width:44ch}
/* how it goes: three steps with detail */
.flow .more{margin-top:10px;font-size:14.5px;color:var(--navy-70);max-width:38ch}
@media (max-width:820px){.flow .more{grid-column:2}}
/* headings: short titles stay on one line when there is room */
.page-hero .h1{max-width:none}
.band .h2{max-width:24ch}
@media (min-width:821px){.page-hero .h1,.sec-head .h2,.band .h2{text-wrap:balance}}
.intro p{text-align:center}
.band .h2{max-width:none}
@media (max-width:1000px){.band{grid-template-columns:1fr;align-items:start}}
@media (min-width:821px){.wcard .cap{padding:11px 18px}}
.wcard .cap b.nm{line-height:26px}
@media (min-width:1001px){.band{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}}

/* ================= v8 ================= */
/* intro vs. projects title: title smaller, burgundy, left, close to the cards */
.intro{padding-bottom:clamp(64px,8vw,112px)}
.work-title{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.3;letter-spacing:0;color:var(--burgundy);margin:0 0 12px}
.work-title .em{font-weight:700}

/* packages: subtle lift on the card being explored */
.pk{transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),border-color 220ms var(--ease);will-change:transform}
@media (min-width:981px){
  @media (hover:hover) and (pointer:fine){
    .pk:hover{transform:translate3d(0,-6px,0);border-color:rgba(255,255,255,.92);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(23,39,51,.06),0 18px 34px -16px rgba(23,39,51,.34)}
  }
  .pk:focus-within{transform:translate3d(0,-6px,0);border-color:rgba(255,255,255,.92);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(23,39,51,.06),0 18px 34px -16px rgba(23,39,51,.34)}
  .pk-grid{padding-top:8px;margin-top:-8px}   /* room for the lift; nothing gets clipped */
}
@media (max-width:980px){
  .pk-grid .pk.is-active{border-color:rgba(255,255,255,.95);
    background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,.26));
    box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(23,39,51,.06),0 14px 28px -16px rgba(23,39,51,.32)}
}
@media (prefers-reduced-motion:reduce){.pk{transition:none}.pk:hover,.pk:focus-within{transform:none}}

/* footer: social icons */
.f-social{display:flex;gap:2px;margin-right:-10px}
.f-social a{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--navy);transition:color 160ms var(--ease)}
.f-social a:hover{color:var(--burgundy);text-decoration:none}
.f-social a:focus-visible{color:var(--burgundy);outline:2px solid var(--burgundy);outline-offset:0}
.f-social svg{width:22px;height:22px;display:block}
@media (max-width:820px){.f-social{margin-left:-11px;margin-right:0}}

/* our work: website recordings in a simple browser frame */
.case-body.has-video{grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:start}
.case-main .case-text{margin-top:clamp(22px,3vw,32px)}
.vframe{margin:0;border-radius:18px;overflow:hidden;background:var(--vbg);box-shadow:0 1px 2px rgba(23,39,51,.08),0 14px 30px -16px rgba(23,39,51,.32);outline:1px solid rgba(255,255,255,.6);outline-offset:-1px;width:100%;max-width:400px;justify-self:end}
.vbox{position:relative;width:100%}
.vbox video{display:block;width:100%;height:100%;object-fit:contain;background:var(--vbg)}
.vtoggle{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.7);display:grid;place-items:center;cursor:pointer;
  background:rgba(245,249,252,.82);color:var(--navy);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 12px -6px rgba(23,39,51,.4)}
.vtoggle:hover,.vtoggle:focus-visible{color:var(--burgundy)}
.vtoggle:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.vtoggle svg{width:16px;height:16px;fill:currentColor}
.vtoggle .i-pause{display:none}
.vframe.is-playing .vtoggle .i-pause{display:block}
.vframe.is-playing .vtoggle .i-play{display:none}
@media (max-width:900px){.case-body.has-video{grid-template-columns:1fr}.vframe{justify-self:center}}
@media (min-width:901px){.case-body.has-video{grid-template-columns:minmax(0,1fr) minmax(0,360px)}.vframe{max-width:360px;position:sticky;top:calc(var(--hh) + 84px)}}

/* ================= v9 ================= */
/* projects title = same treatment as the other section titles */
.work-title{font:400 clamp(1.8rem,3vw,2.6rem)/1.08 var(--sans);letter-spacing:-.025em;color:var(--navy);margin:0 0 clamp(20px,2.4vw,28px);text-wrap:balance}
.work-title .em{font-weight:700}

/* footer: two rows on desktop, one centered column on small screens */
.site-footer .foot2{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,32px);padding-block:clamp(36px,4.5vw,56px)}
.f-row1,.f-row2{display:flex;justify-content:space-between;gap:24px}
.f-row1{align-items:center}
.f-row2{align-items:flex-end}
.f-logo{display:inline-flex}
.f-logo .logo{height:44px;width:auto}
.site-footer .f-nav{display:flex;flex-wrap:nowrap;gap:clamp(18px,2.6vw,36px)}
.site-footer .f-nav a{font-size:15.5px;white-space:nowrap;padding:8px 0}
.f-copy{margin:0;font-size:14.5px;color:var(--navy-70);white-space:nowrap}
.site-footer .f-hi{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:0}
.site-footer .f-hi h2{margin:0}
.f-mail{font-size:15.5px}
.site-footer .f-social{margin:0 -10px 0 0}
@media (max-width:760px){
  .site-footer .foot2{align-items:center;text-align:center;gap:18px;padding-block:36px 32px}
  .f-row1,.f-row2{display:contents}
  .f-logo{order:1}.site-footer .f-nav{order:2}.site-footer .f-hi{order:3}.f-copy{order:4}
  .f-logo .logo{height:36px}
  .site-footer .f-nav{flex-wrap:wrap;justify-content:center;gap:2px 18px;max-width:340px}
  .site-footer .f-nav a{font-size:15px;padding:10px 2px;min-height:44px;display:inline-flex;align-items:center}
  .site-footer .f-hi{align-items:center;gap:4px}
  .f-mail{font-size:15px;overflow-wrap:anywhere;padding:8px 0}
  .site-footer .f-social{margin:0;justify-content:center}
  .f-copy{font-size:14px;white-space:normal}
}

/* our work: phone recordings without background */
.vframe{background:none;box-shadow:none;outline:0;border-radius:0;overflow:visible;position:relative}
.vbox{border-radius:14.6% / 7.15%;overflow:hidden;filter:drop-shadow(0 14px 22px rgba(23,39,51,.22));isolation:isolate}
.vbox video{background:none}
.vframe .vtoggle{position:absolute;right:-6px;bottom:-6px}
@media (min-width:901px){.vframe{max-width:340px}.case-body.has-video{grid-template-columns:minmax(0,1fr) minmax(0,340px)}}
@media (max-width:900px){.vframe{max-width:340px;width:100%}}

/* our work: labeled media blocks (Arka) */
.media-block{margin:clamp(28px,4vw,48px) 0 0}
.media-label{font:700 12.5px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy-70);margin-bottom:14px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(12px,1.6vw,20px)}
.posts img{width:100%;height:auto;aspect-ratio:4/5;border-radius:var(--r-md,16px);display:block;box-shadow:0 1px 2px rgba(23,39,51,.08),0 10px 24px -14px rgba(23,39,51,.3)}
.gbp-shot{max-width:760px;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(23,39,51,.08),0 10px 24px -14px rgba(23,39,51,.3)}
.gbp-shot img{display:block;width:100%;height:auto}
@media (max-width:640px){
  .posts{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 14px;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .posts::-webkit-scrollbar{display:none}
  .posts img{flex:0 0 78%;scroll-snap-align:start}
}
.site-footer .f-nav{flex-direction:row;padding:0}
@media (max-width:760px){.site-footer .f-nav{gap:0 20px}.site-footer .f-nav a{padding:6px 2px}}
.vframe{z-index:2}
.vframe .vtoggle{z-index:3}
@media (min-width:901px){.vframe{position:sticky;top:calc(var(--hh) + 84px)}}

/* ================= v10 ================= */
/* intro: same .wrap container as the projects; centered text with its own wider measure */
.intro p{max-width:min(920px,100%);text-wrap:pretty}
@media (max-width:1024px){.intro p{max-width:100%}}

/* footer logo: ~20% larger on desktop only */
@media (min-width:1025px){.f-logo .logo{height:53px}}

/* about: one reading column on the continuous Misty Blue, no cards */

/* ================= v11 ================= */
/* hero: logo and line visible and still from the start */
.hero2 .logo,.hero2 .line{animation:none!important}
/* hero: a thin burgundy underline draws under "Your thing.", fades, then under "Ours."; pause; repeat */
.hero2 .line .ul{position:relative;display:inline-block}
.hero2 .line .ul::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:1.5px;border-radius:1px;background:#4B1020;
  transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hero2 .line .ul-1::after{animation:ul-a 7.5s cubic-bezier(.4,0,.2,1) 1s infinite}
  .hero2 .line .ul-2::after{animation:ul-b 7.5s cubic-bezier(.4,0,.2,1) 1s infinite}
}
@keyframes ul-a{0%{transform:scaleX(0);opacity:1}9%{transform:scaleX(1);opacity:1}20%{transform:scaleX(1);opacity:1}27%{transform:scaleX(1);opacity:0}100%{transform:scaleX(1);opacity:0}}
@keyframes ul-b{0%,29%{transform:scaleX(0);opacity:0}29.01%{transform:scaleX(0);opacity:1}38%{transform:scaleX(1);opacity:1}49%{transform:scaleX(1);opacity:1}56%{transform:scaleX(1);opacity:0}100%{transform:scaleX(1);opacity:0}}

/* mobile menu button: lines only (label stays for screen readers) */
.menu-btn .mb-label.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;min-width:0}
@media (max-width:820px){.menu-btn{width:44px;justify-content:center;padding:0}}

/* about: photo + story, no cards */

/* ================= v12: About as an editorial cover ================= */
.about-cover{padding-top:calc(var(--hh) + clamp(36px,7vh,88px));padding-bottom:var(--sec-y)}
.cover-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);align-items:start}
.cover-photo{grid-column:1 / 8;grid-row:1 / 3;position:relative;margin:0;border-radius:var(--r-lg,24px);overflow:hidden;aspect-ratio:1500/1488}
.cover-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* soft darkening only behind the overlapping word, so Misty Blue holds on the sky */
.cover-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse var(--sh-w,42%) var(--sh-h,15%) at var(--sh-x,86%) var(--sh-y,30%),rgba(23,39,51,.34),rgba(23,39,51,.16) 55%,rgba(23,39,51,0) 100%)}
.cover-title{grid-column:8 / 13;grid-row:1;position:relative;z-index:2;margin:clamp(28px,5vw,72px) 0 0}
.cover-title .t1{display:block;font:400 clamp(1.7rem,3vw,2.7rem)/1.08 var(--sans);letter-spacing:-.02em;color:var(--navy)}
.cover-title .t2{display:block;font:700 clamp(3.2rem,7.2vw,6.6rem)/1 var(--sans);letter-spacing:-.035em;color:#C7D5E4;
  margin:.06em 0 0 calc(-1 * clamp(110px,12.5vw,180px));white-space:nowrap;
  /* subtle deboss, after the logo: shade on the upper edge, a light rim below */
  text-shadow:-1px -1.5px 1.5px rgba(6,18,27,.30),1px 1.5px 1px rgba(255,255,255,.55)}
.cover-story{grid-column:8 / 13;grid-row:2;align-self:end;max-width:460px;margin-top:clamp(28px,3vw,40px)}
.cover-story p{margin:0 0 16px;font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.62;color:var(--navy)}
.cover-story b{font-weight:700}
.cover-story .story-hi{margin-top:24px}
@media (max-width:900px){
  .cover-grid{display:block}
  .cover-title{margin:0;text-align:left}
  .cover-title .t1{font-size:clamp(1.7rem,6.4vw,2.4rem)}
  .cover-title .t2{text-align:right;margin:0;padding:14px 16px 0 0;font-size:clamp(2.7rem,12vw,4.4rem)}
  .cover-photo{margin-top:calc(-1 * (clamp(2.7rem,12vw,4.4rem) + 14px) - 4px);
    --sh-w:60%;--sh-h:16%;--sh-x:76%;--sh-y:12%}
  .cover-photo{position:relative;z-index:1}
  .cover-title{position:relative;z-index:2}
  .cover-story{max-width:none;margin-top:clamp(24px,5vw,32px)}
}
@media (max-width:900px){
  .cover-grid{display:flex;flex-direction:column;align-items:stretch}
  .cover-title{order:1}.cover-photo{order:2}.cover-story{order:3}
}
@media (max-width:900px){
  .cover-title .t2{padding-top:30px;padding-right:18px}
  .cover-photo{margin-top:calc(-1 * (clamp(2.7rem,12vw,4.4rem) + 30px) + 14px)}
}

/* ================= v13: hero logo on desktop ================= */
@media (min-width:1025px){
  .hero2 .logo{width:clamp(262px,30vw,425px)}          /* ~25% wider than before, same proportions */
  .hero2{padding-top:calc(var(--hh) + clamp(64px,12vh,136px))}   /* air under the menu; logo + line move down together */
}

/* ================= v15: Home text blocks reveal once (fade + 12px rise, ~400ms) ================= */
.js .rv-b{opacity:0;transform:translate3d(0,12px,0);transition:opacity 400ms cubic-bezier(.2,.7,.2,1),transform 400ms cubic-bezier(.2,.7,.2,1)}
.js .rv-b.in{opacity:1;transform:none}
.js .steps .step.rv-b:nth-of-type(2){transition-delay:70ms}
.js .steps .step.rv-b:nth-of-type(3){transition-delay:140ms}
@media (prefers-reduced-motion:reduce){.js .rv-b{opacity:1;transform:none;transition:none}}

/* ================= v16: package terms ================= */
.pk-detail .sum-note{margin-top:12px;font-size:15px;line-height:1.55;color:var(--navy-70);max-width:46ch}
.pk-detail .sum-note b{color:var(--burgundy);font-weight:700}
.terms{margin-top:22px;border-top:1px solid var(--line);padding-top:6px}
.terms summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font:700 15px/1.3 var(--sans);color:var(--burgundy)}
.terms summary::-webkit-details-marker{display:none}
.terms summary::after{content:"+";font-weight:400;font-size:20px;line-height:1;color:var(--burgundy)}
.terms[open] summary::after{content:"–"}
.terms summary:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px;border-radius:6px}
.terms dl{margin:6px 0 4px}
.terms dl div{padding:10px 0;border-top:1px solid var(--line)}
.terms dl div:first-child{border-top:0}
.terms dt{font-weight:700;font-size:14.5px}
.terms dd{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--navy-70)}
.pk-detail .for{font-size:clamp(1.02rem,1.2vw,1.12rem);font-weight:700;color:var(--navy);line-height:1.4;max-width:34ch}

/* ===================== v17: blog: listing + article template ===================== */
.blog-hero{padding-bottom:clamp(40px,7vh,88px)}
.blog-hero .h1{max-width:16ch}

/* capsule tag */
.cap{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;border:1px solid rgba(75,16,32,.28);
  background:rgba(255,255,255,.5);color:var(--burgundy);font:700 13px/1 var(--sans);letter-spacing:.01em;width:max-content;max-width:100%}

/* circular arrow (navigation cue, never a separate link) */
.arrow-c{display:inline-grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(75,16,32,.45);color:var(--burgundy);
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.arrow-c svg{width:16px;height:16px;transition:transform var(--t) var(--ease)}
.arrow-c.sm{width:36px;height:36px}
.arrow-c.sm svg{width:14px;height:14px}

/* grid: one feature + two stacked (one column on mobile) */
.bgrid{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:901px){
  .bgrid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:repeat(2,auto);min-height:clamp(600px,54vw,720px)}
  .bgrid .pc-feature{grid-row:1/3}
}

/* card = one surface: media fills it edge to edge; category on top, reading zone at the bottom */
.pcard{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  min-height:clamp(380px,44vw,420px);padding:clamp(18px,2vw,26px);border-radius:var(--r-lg);overflow:hidden;
  background:rgb(var(--tint));color:#F4F6F8;
  box-shadow:0 1px 2px rgba(23,39,51,.08),0 12px 28px -16px rgba(23,39,51,.4)}
.pc-feature{min-height:clamp(520px,60vw,720px)}
.pc-media{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:inherit}
.pc-media picture,.pc-media img{display:block;width:100%;height:100%}
.pc-media img{object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(1);transition:transform 600ms var(--ease)}
@media (max-width:760px){.pc-media img{object-position:var(--pos-m,var(--pos,50% 50%))}}

.pcard > .cap{position:relative;align-self:flex-start;background:rgba(244,246,248,.9);border-color:transparent;color:var(--navy);
  font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;min-height:30px;padding:0 13px}

/* the reading zone carries its own gradient, in the image's tone, so every line has contrast */
.pc-body{position:relative;display:flex;flex-direction:column;gap:12px;max-width:560px}
.pc-body::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(-1 * clamp(18px,2vw,26px));right:calc(-1 * clamp(18px,2vw,26px) - 600px);bottom:calc(-1 * clamp(18px,2vw,26px));top:-96px;
  background:linear-gradient(to bottom,rgba(var(--tint),0) 0,rgba(var(--tint),.72) 56px,rgba(var(--tint),.94) 120px,rgb(var(--tint)) 100%)}
.pc-title{font:700 clamp(1.25rem,1.7vw,1.5rem)/1.2 var(--sans);letter-spacing:-.015em;text-wrap:balance}
.pc-feature .pc-title{font:400 clamp(1.8rem,3vw,2.6rem)/1.08 var(--sans);letter-spacing:-.025em}
.pc-link{color:inherit;text-decoration:none}
.pc-link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--r-lg)}
.pcard .pc-link{position:static}
.pc-sum{font-size:15.5px;line-height:1.5;color:rgba(244,246,248,.9);text-wrap:pretty}
.pc-foot{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:6px}
.pc-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:999px;
  background:#F4F6F8;color:var(--navy);font:700 15px/1 var(--sans);
  transition:background-color 180ms var(--ease),transform 160ms var(--ease)}
.pc-cta svg{width:15px;height:15px;transition:transform 180ms var(--ease)}
.pc-time{font-size:14px;color:rgba(244,246,248,.82)}

/* the logo cover keeps a clear reading zone (logo-cover.js measures it) */
.pc-media .lcover{border-radius:inherit}

/* interaction: photo zooms a touch inside its frame, text never moves */
@media (hover:hover){
  .pcard:hover .pc-media img{transform:scale(1.03)}
  .pcard:hover .pc-cta{background:#fff}
  .pcard:hover .pc-cta svg{transform:translateX(3px)}
}
.pcard:focus-within .pc-cta svg{transform:translateX(3px)}
.pcard:active .pc-cta{transform:scale(.97)}
.pc-link:focus-visible{outline:none}
.pcard:focus-within{outline:3px solid var(--burgundy);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.pc-media img,.pc-cta,.pc-cta svg{transition:none}.pcard:hover .pc-media img{transform:none}.pcard:active .pc-cta{transform:none}}

/* photo slot (until the real photo exists) */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;
  background:var(--misty-lo);box-shadow:inset 0 0 0 1px rgba(23,39,51,.08)}
.ph::before{content:"";position:absolute;inset:12px;border:1px dashed rgba(23,39,51,.28);border-radius:calc(var(--r-lg) - 10px);pointer-events:none}
.ph-tag{position:absolute;top:22px;left:22px;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--navy-70)}
.ph-note{max-width:46ch;font-size:15px;line-height:1.5;color:var(--navy-70)}

/* ---------- article ---------- */
.post-head,.prose{max-width:720px;margin-inline:auto}
.post-head{padding-top:calc(var(--hh) + clamp(32px,7vh,80px));box-sizing:content-box}
.back{display:inline-flex;align-items:center;gap:12px;font:700 15px/1 var(--sans);color:var(--navy);text-decoration:none;min-height:44px}
.back:hover .arrow-c{background:var(--burgundy);color:#F6EEF0;border-color:var(--burgundy)}
@media (prefers-reduced-motion:no-preference){.back:hover .arrow-c svg{transform:translateX(-2px)}}
.post-head .cap{display:flex;margin-top:clamp(28px,4vw,44px)}
.post-title{margin-top:16px;max-width:20ch}
.post-intro{margin-top:20px;max-width:60ch}
.post-meta{margin-top:18px;font-size:14.5px;color:var(--navy-70)}
.post-meta .draft{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;border:1px dashed rgba(23,39,51,.4);font-weight:700;font-size:13px}
.post-hero{margin-top:clamp(32px,5vw,56px)}
.post-hero img,.post-hero .ph{border-radius:var(--r-lg)}
.post-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-hero .ph{position:relative;aspect-ratio:16/8}
@media (max-width:760px){.post-hero img{aspect-ratio:4/3}.post-hero .ph{aspect-ratio:4/3}}

.prose{margin-top:clamp(40px,6vw,72px);font-size:18px;line-height:1.7}
.prose h2{font:700 clamp(1.3rem,1.9vw,1.6rem)/1.25 var(--sans);letter-spacing:-.015em;margin-top:2.1em;text-wrap:balance}
.prose p{margin-top:.85em;text-wrap:pretty}
.prose ul{margin-top:.85em;padding-left:1.25em}
.prose li{margin-top:.35em}
.prose li::marker{color:var(--burgundy)}
.prose .ex{margin-top:1.1em;padding:18px 22px;border-radius:var(--r-md);background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.65);font-size:16.5px;line-height:1.6}
.prose .pnote{margin-top:1.1em;padding:18px 22px;border-radius:var(--r-md);border:1px solid rgba(75,16,32,.32);background:rgba(75,16,32,.045);font-size:16.5px;line-height:1.6}
.prose .ex b,.prose .pnote b{color:var(--burgundy)}

.checklist{margin-top:clamp(48px,6vw,72px);padding:clamp(24px,3.4vw,40px);border-radius:var(--r-lg)}
.checklist h2{margin-top:0;font:400 clamp(1.7rem,2.6vw,2.2rem)/1.1 var(--sans);letter-spacing:-.025em}
.checklist ul{list-style:none;padding:0;margin-top:20px;display:grid;gap:14px}
.checklist li{display:flex;gap:14px;align-items:flex-start;margin:0;font-size:17px;line-height:1.5}
.checklist li svg{flex:none;width:24px;height:24px;padding:4px;margin-top:1px;border-radius:50%;border:1px solid rgba(75,16,32,.45);color:var(--burgundy)}

.more-posts .h2{margin-top:0}
.more-grid{display:grid;gap:clamp(16px,2vw,24px);margin-top:clamp(24px,3vw,36px)}
@media (min-width:761px){.more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  .arrow-c,.arrow-c svg{transition:none}
}

/* ===================== v19: editorial logo cover (blog) ===================== */
.lcover{position:absolute;inset:0;overflow:hidden;background:#172733;contain:layout paint}
.lcover svg{position:absolute;left:0;top:var(--safe-t,0px);width:100%;height:calc(100% - var(--safe-t,0px) - var(--safe-b,0px));display:block}
.lc-logo{fill:#C7D5E4}
.js .lcover.lc-wait .lc-logo{visibility:hidden}
@media (prefers-reduced-motion:reduce){.js .lcover.lc-wait .lc-logo{visibility:visible}}
.pcard .lcover{--safe-t:64px;--safe-b:48%}
.post-hero .tc-hero-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8}
@media (max-width:760px){.post-hero .tc-hero-wrap{aspect-ratio:4/3}}
@media (max-width:760px){.pcard{min-height:440px}.pc-feature{min-height:520px}}

/* ===================== v21: one motion system for the whole site =====================
   entries 450ms ease-out, 12px; groups staggered 40ms; colours 160–180ms; press .97;
   arrows nudge 3px in their direction; photos zoom 1.03 inside their frame; text never moves.
   Reduced motion: no movement, zoom or sheen (see the reduced-motion rules). */
.js .rv{opacity:0;transform:translate3d(0,12px,0);transition:opacity 450ms var(--ease),transform 450ms var(--ease)}
.js .rv.in,.js .rv-b.in{opacity:1;transform:none}
.js .rv.now,.js .rv-b.now{transition:none}                       /* already on screen at load: shown at once */
.js .rv[data-d="1"]{transition-delay:40ms}.js .rv[data-d="2"]{transition-delay:80ms}.js .rv[data-d="3"]{transition-delay:120ms}
.js .rv-b{transition-duration:420ms}
.js .steps .step.rv-b:nth-of-type(2){transition-delay:40ms}
.js .steps .step.rv-b:nth-of-type(3){transition-delay:80ms}

/* buttons and links: arrows also answer to keyboard focus; touch gets a press state */
a,button,summary{-webkit-tap-highlight-color:transparent}
.btn:focus-visible svg.ne{transform:translate(2px,-2px)}
.btn:focus-visible svg.e,.link:focus-visible svg{transform:translateX(3px)}
.link:active,.pk .link:active{opacity:.75}
.back:active .arrow-c,.jump a:active{transform:scale(.97)}
.back .arrow-c{transition:background-color 180ms var(--ease),color 180ms var(--ease),border-color 180ms var(--ease),transform 160ms var(--ease)}

/* project cards: photo zooms inside the frame, the card and its text stay put */
.wcard{transition:box-shadow 260ms var(--ease)}
.wcard:hover{transform:none}
.wcard .media img{transition:transform 600ms var(--ease)}
.wcard:hover .go,.wcard:focus-visible .go{transform:none}
.wcard .go svg{transition:transform 180ms var(--ease)}
.wcard:hover .go svg,.wcard:focus-visible .go svg{transform:translate(2px,-2px)}
.wcard:focus-visible .media img{transform:scale(1.03)}
@media (max-width:820px){.work-grid .wcard:hover .media img{transform:none}}   /* deck-peel owns the motion on mobile */

/* mobile menu: grows from the button (top right); closing is a little quicker than opening */
.mmenu{transform-origin:100% 0;transform:translate3d(0,-6px,0) scale(.985);
  transition:opacity 160ms var(--ease),transform 160ms var(--ease),visibility 0s linear 160ms}
.menu-open .mmenu{transition:opacity 220ms var(--ease),transform 220ms var(--ease),visibility 0s}

/* expandable terms (and FAQ when it exists): smooth height where supported, indicator turns */
:root{interpolate-size:allow-keywords}
.terms::details-content{block-size:0;overflow:hidden;transition:block-size 180ms var(--ease),content-visibility 180ms allow-discrete}
.terms[open]::details-content{block-size:auto;transition-duration:240ms}
.terms summary::after{content:"+";display:inline-block;transition:transform 220ms var(--ease)}
.terms[open] summary::after{content:"+";transform:rotate(45deg)}

/* form: field states ease in; the button shows a sending state only during a real request */
.field input,.field textarea,.field select{transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease),background-color 160ms var(--ease)}
.form-msg{transition:color 160ms var(--ease)}
.btn.is-sending{opacity:.72;cursor:progress}
.btn:disabled:active{transform:none}

/* logo cover: satin sheen passes once after the logo settles (JS); at rest it is flat Misty Blue */
.lc-logo{transition:none}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-b{opacity:1;transform:none;transition:none}
  .btn:active,.pcard:active .pc-cta,.back:active .arrow-c,.jump a:active{transform:none}
  .wcard:focus-visible .media img,.pcard:hover .pc-media img{transform:none}
  .terms::details-content{transition:none}
  .terms summary::after{transition:none}
}
.lcover.is-playing:not(.is-final) svg{top:0;height:100%}

/* ===================== v22: FAQ (native details: works without JS, keyboard and screen readers) ===================== */
.faq-hero .h1{max-width:14ch}
.faq-list{max-width:820px;margin-inline:auto;padding-bottom:var(--sec-y-sm)}
.faq-group+.faq-group{margin-top:clamp(40px,6vw,64px)}
.faq-group .eyebrow{display:block;margin-bottom:12px}
.faq{border-top:1px solid var(--line)}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;
  font:700 clamp(1.05rem,1.4vw,1.2rem)/1.35 var(--sans);letter-spacing:-.01em;color:var(--navy);transition:color 160ms var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--burgundy)}
.faq summary:focus-visible{outline:2px solid var(--burgundy);outline-offset:4px;border-radius:8px}
.faq summary i{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid rgba(75,16,32,.4);color:var(--burgundy);transition:transform 220ms var(--ease),background-color 180ms var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;background:currentColor;border-radius:1px}
.faq summary i::after{transform:rotate(90deg)}
.faq[open] summary i{transform:rotate(45deg)}
.faq summary:active i{transform:scale(.94)}
.faq[open] summary:active i{transform:rotate(45deg) scale(.94)}
.faq::details-content{block-size:0;overflow:hidden;transition:block-size 180ms var(--ease),content-visibility 180ms allow-discrete}
.faq[open]::details-content{block-size:auto;transition-duration:240ms}
.faq-a{padding:0 52px 22px 0;max-width:68ch}
.faq-a p{color:var(--navy-70);font-size:16.5px;line-height:1.65}
.faq-a p+p{margin-top:10px}
.faq-a b{color:var(--navy)}
.faq-a a{font-weight:700;color:var(--burgundy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(75,16,32,.4);transition:text-decoration-color 160ms var(--ease)}
.faq-a a:hover{text-decoration-color:var(--burgundy)}
@media (max-width:600px){.faq-a{padding-right:0}}
@media (prefers-reduced-motion:reduce){.faq::details-content,.faq summary i{transition:none}}

/* ===================== v23: legal pages, footer legal links, form note ===================== */
.f-copy p{margin:0}
.f-legal{margin-top:6px!important;font-size:14px}
.f-legal a{color:var(--navy-70);text-decoration:underline;text-decoration-color:rgba(23,39,51,.3);text-underline-offset:4px;transition:color 160ms var(--ease),text-decoration-color 160ms var(--ease)}
.f-legal a:hover{color:var(--navy);text-decoration-color:var(--navy)}
.form-note{margin-top:8px;font-size:14px;color:var(--navy-70)}
.form-note a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.legal-page .prose{padding-bottom:var(--sec-y-sm)}
.legal-page .prose ul li{margin-top:.6em}
.legal-page .prose a:not(.link){color:var(--burgundy);font-weight:700;text-underline-offset:4px}
.legal-other{margin-top:3em!important}

/* ===================== v24: analytics consent banner + footer "Cookie preferences" ===================== */
.cookie{position:fixed;z-index:60;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);width:min(460px,calc(100vw - 24px));
  padding:clamp(18px,2vw,24px);border-radius:var(--r-lg);background:rgba(240,244,248,.96);color:var(--navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 40px -18px rgba(23,39,51,.45)}
.cookie[hidden]{display:none}
.cookie h2{font:700 1.05rem/1.3 var(--sans);letter-spacing:-.01em;outline:none}
.cookie p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--navy)}
.cookie .cb-status:empty{display:none}
.cookie .cb-status{font-weight:700}
.cb-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.cb-actions .btn{width:100%;justify-content:center;min-height:44px;padding-inline:12px}
.cb-link{margin-top:12px!important}
.cb-link a{font-weight:700;color:var(--burgundy);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(75,16,32,.4)}
body.has-cookie-banner{padding-bottom:calc(var(--cb-h,0px) + 24px)}

.f-cookies{font:inherit;font-size:14px;color:var(--navy-70);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(23,39,51,.3);text-underline-offset:4px;transition:color 160ms var(--ease)}
.f-cookies:hover{color:var(--navy)}
.f-cookies:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px;border-radius:4px}
.menu-open .cookie{visibility:hidden}
@media (prefers-reduced-motion:no-preference){.cookie:not([hidden]){animation:cb-in 320ms var(--ease) both}}
@keyframes cb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===================== v25: 404 ===================== */
.nf{padding-bottom:var(--sec-y)}
.nf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}

/* ===================== v28: project cards, solid caption strip on desktop (Safari fix) =====================
   On desktop the caption sits in the card's flow (static). It used to keep the floating style's
   backdrop-filter, which WebKit/Safari paints as offset rectangles inside a rounded, overflow-hidden,
   transformed card, and it did not stretch to the full width. Desktop: no blur, one opaque colour,
   full width; the card's overflow:hidden + radius still clips the corners. Mobile (deck-peel) unchanged. */
@media (min-width:821px){
  .wcard .cap{-webkit-backdrop-filter:none;backdrop-filter:none;background:#EDF2F7;
    align-self:stretch;width:100%;max-width:none;box-sizing:border-box;flex:none;left:auto;right:auto;bottom:auto}
  .wcard .shade{display:none}
}

/* ===================== v28: cookie banner as a full-width bottom bar =====================
   Fixed to the viewport (left/right/bottom 0), content centred, Misty Blue translucent with a soft blur
   and an opaque-enough base for contrast (solid where blur isn't supported). Text and actions in one row
   when they fit, stacked on phones. Respects the iPhone safe area, and the page reserves the bar's height
   (body padding + scroll-padding) so no content or focused control stays hidden under it. */
.cookie{left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:0;
  padding:14px max(20px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:rgba(199,213,228,.94);border-top:1px solid rgba(23,39,51,.14);
  box-shadow:0 -10px 28px -18px rgba(23,39,51,.4);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cookie{background:#C7D5E4}}
.cb-inner{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;max-width:var(--maxw,1240px);margin:0 auto}
.cb-text{flex:1 1 auto;min-width:0}
.cookie h2{font:700 1rem/1.3 var(--sans)}
.cookie p{margin-top:2px;font-size:14.5px;line-height:1.5;color:var(--navy)}
.cookie .cb-link{margin:0 0 0 4px!important;font-weight:700;color:var(--burgundy);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(75,16,32,.45);white-space:nowrap}
.cb-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;flex:none;width:min(380px,100%)}
.cb-actions .btn{width:100%;min-height:44px;justify-content:center;background:rgba(255,255,255,.55)}
.cb-actions .btn:hover{background:#fff}
html:has(> body.has-cookie-banner){scroll-padding-bottom:calc(var(--cb-h,0px) + 16px)}
body.has-cookie-banner{padding-bottom:var(--cb-h,0px)}
@media (max-width:760px){
  .cb-inner{flex-direction:column;align-items:stretch;gap:10px}
  .cb-actions{width:100%}
  .cookie p{font-size:13.5px}
}
@media (prefers-reduced-motion:no-preference){.cookie:not([hidden]){animation:cb-up 280ms var(--ease) both}}
@keyframes cb-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}