/* ============ Tokens ============ */
:root{
  --paper:#f2f6f5; --white:#fdfefd; --ink:#102d35; --green:#092229;
  --ox:#8ed8e8; --oxwash:#dbeef2; --gold:#e84d38; --gold-deep:#c2371f;
  --muted:#51666c; --muted-dark:#9fb8bd;
  --line:#d3dedd; --line-dark:rgba(255,255,255,.18);
  --pad:clamp(20px,4vw,56px); --rad:22px; --rad-img:14px;
  --serif:"Libre Caslon Display",Georgia,serif; --serif-i:"Libre Caslon Text",Georgia,serif; --sans:"DM Sans",Arial,sans-serif;
  --shadow:0 24px 60px rgba(9,34,41,.16),0 4px 14px rgba(9,34,41,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.55}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
/* height:auto is REQUIRED — images carry intrinsic width/height attributes (for CLS),
   and without this the raw pixel height wins wherever CSS only sets width. */
img{max-width:100%;height:auto;display:block}
.skip-link{position:fixed;top:0;left:1rem;z-index:1000;padding:.75rem 1rem;background:var(--white);border-radius:0 0 12px 12px;transform:translateY(-120%)}
.skip-link:focus{transform:none}

/* ============ Kicker system ============ */
.kicker,.eyebrow{display:flex;align-items:center;gap:.8rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;margin:0 0 1.6rem}
.kicker:before{content:"";width:44px;height:2px;background:var(--gold);flex:none}
.mini-kicker{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;margin:0 0 1rem}

/* ============ Buttons & links ============ */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;border:0;border-radius:999px;padding:1rem 1.75rem;font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;line-height:1}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(9,34,41,.18)}
.button-gold{background:var(--gold);color:#07181d}
.button:focus-visible,.text-link:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible+*,.ba input:focus-visible~.ba-handle{outline:2px solid var(--gold);outline-offset:3px}
.text-link{display:inline-block;font-size:.9rem;font-weight:600;border-bottom:1.5px solid var(--gold);padding:.2rem 0}

/* ============ Header (pill nav) ============ */
.site-header{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:76px;padding:0 var(--pad);background:rgba(242,246,245,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s,background .25s}
/* No compact-on-scroll shrink (Brad, 2026-08-21). The header holds 76px at every
   scroll position; only the background lift and shadow change. The shrink was the
   cause of the header jitter: sticky but in normal flow, so changing its height
   moved everything below it and knocked scrollY by 14px, which the scroll listener
   then oscillated on. Keep min-height out of this rule. */
.site-header.compact{background:rgba(242,246,245,.95);box-shadow:0 8px 24px rgba(9,34,41,.08)}
.brand{display:inline-flex;align-items:center;gap:.72rem;font-size:1.1rem;font-weight:600;letter-spacing:-.03em}
.brand em{font-family:var(--serif);font-weight:400}
.brand-mark{position:relative;width:26px;height:26px;display:block}
.brand-mark i{position:absolute;width:9px;height:9px;border-color:currentColor;border-style:solid}
.brand-mark i:nth-child(1){top:0;left:0;border-width:1.5px 0 0 1.5px}
.brand-mark i:nth-child(2){top:0;right:0;border-width:1.5px 1.5px 0 0}
.brand-mark i:nth-child(3){bottom:0;left:0;border-width:0 0 1.5px 1.5px}
.brand-mark i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.site-header nav{display:flex;gap:.4rem}
.site-header nav a{padding:.55rem 1.05rem;border-radius:999px;font-size:.85rem;font-weight:500;transition:background .2s}
.site-header nav a:hover,.site-header nav a:focus-visible{background:rgba(9,34,41,.07)}
.header-cta{justify-self:end;padding:.8rem 1.4rem;font-size:.85rem}
.menu-button{display:none;background:none;border:0;font-weight:600;cursor:pointer;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line)}
/* Legal and thanks pages carry no nav and no menu button. The 1020px rule hides
   .header-cta and hands over to .menu-button — with no menu button on those pages
   that would leave them with no way back, so .header-plain opts out of the swap. */
.site-header.header-plain{grid-template-columns:1fr auto}

/* ============ Hero ============ */
.hero{position:relative;padding:clamp(4rem,9vh,7.5rem) var(--pad) 0;text-align:center}
.hero-shapes{overflow:hidden}
.hero-inner{position:relative;z-index:1;max-width:1280px;margin:0 auto}
.booking-chip{display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 2.1rem;padding:.32rem 0;text-decoration:none;transition:color .2s}
.booking-chip:hover,.booking-chip:focus-visible{color:var(--ink)}
.booking-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.chip-arrow{color:var(--gold-deep);transition:transform .2s}
.booking-chip:hover .chip-arrow{transform:translateY(2px)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.2rem,7.4vw,7.5rem);line-height:.96;letter-spacing:-.04em;margin:0 0 1.8rem;text-wrap:balance}
.hero h1 em{font-weight:400}
.hero-sub{font-size:clamp(1.2rem,1.95vw,1.6rem);font-weight:500;line-height:1.42;color:#28444c;max-width:52ch;margin:0 auto;text-wrap:balance}
.hero-shapes{position:absolute;inset:0;pointer-events:none}
.hero-shapes span{position:absolute;display:block}
.hs1{width:min(34vw,480px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(16,45,53,.13);right:-5%;top:2%;animation:drift1 26s ease-in-out infinite alternate}
.hs1:after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(16,45,53,.09)}
.hs3{width:88px;height:88px;border-radius:50%;background:rgba(142,216,232,.45);left:16%;top:10%;animation:drift3 30s ease-in-out infinite alternate}
.hs-scales{width:clamp(130px,14vw,200px);right:4%;top:13%;transform:rotate(-4deg);animation:drift2 34s ease-in-out infinite alternate-reverse}
.hs-scales svg{display:block;width:100%;height:auto;stroke:rgba(16,45,53,.16);fill:none;stroke-width:1.1;stroke-linecap:round}
.hs-scales circle{fill:rgba(16,45,53,.16);stroke:none}
@keyframes drift1{to{transform:translate(-34px,42px) rotate(6deg)}}
@keyframes drift2{to{transform:translate(26px,-30px) rotate(-4deg)}}
@keyframes drift3{to{transform:translate(44px,26px)}}
.service-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.5rem 0;width:min(100%,920px);margin:clamp(3rem,6vh,4.5rem) auto clamp(3.5rem,7vh,5.5rem)}
.service-bar-item{display:flex;flex-direction:column;gap:.2rem;text-align:left}
.service-bar-item+.service-bar-item{border-left:1px solid var(--line);padding-left:clamp(1.5rem,4vw,3.5rem)}
.service-bar-item b{font-family:var(--serif);font-weight:400;font-size:1.35rem;letter-spacing:-.02em}
.service-bar-item span{font-size:.78rem;color:var(--muted)}
.service-bar .button{margin-left:clamp(.5rem,2vw,1.5rem)}

/* ============ Ticker ============ */
.ticker{overflow:hidden;background:var(--ox);padding:1.05rem 0}
.ticker div{display:flex;gap:2rem;width:max-content;animation:ticker 28s linear infinite;text-transform:uppercase;font-size:.7rem;font-weight:600;letter-spacing:.14em}
.ticker i{font-style:normal;color:var(--gold-deep)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ============ Section scaffolding ============ */
.section{padding:clamp(90px,12vh,150px) var(--pad)}
.section>.kicker,.section>h2,.section>.lead,.section>.steps-row,.section>.service-list,.section>.addon,.section>.note,.section>.team-row,.section>.work-head,.section>.case-card,.section>.feat-head,.section>.feat-row,.aftercare-row,.contact-grid,.ed-row{max-width:1240px;margin-left:auto;margin-right:auto}
.section h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1;letter-spacing:-.035em;margin:0 0 1.6rem;text-wrap:balance}
.section h2 em{font-weight:400}
.lead{font-size:1.1rem;max-width:58ch;margin:0 0 2.2rem}
.lead-center{margin:0 auto 3.5rem;text-align:center}
.note{font-size:.92rem;color:var(--muted);max-width:58ch;margin:2.6rem auto 0}
.dark-pass{background:var(--green);color:var(--paper)}
.dark-pass .lead,.dark-pass .note{color:var(--muted-dark)}
.sky-pass{background:var(--oxwash)}
.sky-pass .lead{color:#274850}
.sky-pass .note{color:#33555e}

/* ============ Fact lists (static text — never button-shaped) ============ */
.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem 2rem;margin:0;padding:0}
.chip-list li{display:flex;align-items:center;gap:.65rem;font-size:.95rem;font-weight:500}
.chip-list li:before{content:"";width:8px;height:8px;background:var(--gold);flex:none}
.fact-stack{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.fact-stack li{padding:1.15rem 0;border-bottom:1px solid var(--line-dark)}
.fact-stack b{display:flex;align-items:center;font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.1}
.fact-stack b:before{content:"";width:8px;height:8px;background:var(--gold);margin-right:.85rem;flex:none}
.fact-stack span{display:block;margin:.4rem 0 0 1.35rem;font-size:.92rem;color:var(--muted-dark)}

/* ============ Editorial rows ============ */
.ed-row{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.ed-flip .ed-text{order:1}
.ed-flip .ed-visual{order:0}
.ed-text .chip-list{margin-top:.4rem}
.ed-text .note{margin:2rem 0 0}

/* Websites visual: layered site sheets */
.ed-visual{position:relative}
.site-sheet{position:relative;z-index:1;background:var(--white);border-radius:var(--rad);padding:1.6rem;box-shadow:var(--shadow);max-width:440px;margin-left:auto}
.site-sheet-back{position:absolute;z-index:0;inset:auto 8% -7% auto;width:78%;height:88%;padding:0;background:var(--ox);opacity:.9;transform:rotate(4deg)}
.sheet-bar{display:flex;gap:5px;margin-bottom:1.1rem}
.sheet-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.sheet-nav{display:flex;gap:.6rem;align-items:center;margin-bottom:1.6rem}
.sheet-nav b{width:56px;height:9px;border-radius:99px;background:var(--ink)}
.sheet-nav span{width:30px;height:7px;border-radius:99px;background:var(--line);margin-left:auto}
.sheet-nav span~span{margin-left:0}
.sheet-h1{height:20px;border-radius:99px;background:var(--ink);width:88%;margin-bottom:.7rem}
.sheet-h2{height:20px;border-radius:99px;background:var(--ink);width:64%;margin-bottom:1.3rem}
.sheet-cta{height:34px;width:128px;border-radius:99px;background:var(--gold);margin-bottom:1.6rem}
.sheet-cols{display:flex;gap:.8rem}
.sheet-cols i{flex:1;height:74px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}

/* Video visual: film slate */
/* Attorney reel. Replaces the CSS slate mockup that stood in before the film
   existed; .slate rules are kept because the make-cards still use them. */
.vframe{position:relative;aspect-ratio:16/9;border-radius:var(--rad);overflow:hidden;
  background:var(--green);box-shadow:var(--shadow)}
.vplayer{display:block;width:100%;height:100%;object-fit:cover;background:var(--green)}
.slate{position:relative;z-index:1;background:var(--ink);border:1px solid var(--line-dark);border-radius:var(--rad);max-width:430px;box-shadow:var(--shadow)}
.slate-back{position:absolute;inset:auto auto -8% 6%;width:80%;height:90%;background:rgba(142,216,232,.24);border:0;transform:rotate(-4deg);z-index:0}
.slate-bar{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.4rem;border-bottom:1px solid var(--line-dark);font-size:.6rem;letter-spacing:.14em;color:var(--muted-dark)}
.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(232,77,56,.18)}
.slate-quote{display:flex;gap:.9rem;padding:2.4rem 1.6rem 2.6rem}
.slate-quote span{font-family:var(--serif);font-size:3.4rem;line-height:.7;color:var(--ox)}
.slate-quote p{font-family:var(--serif);font-size:clamp(1.7rem,2.4vw,2.2rem);line-height:1.05;margin:0;color:var(--paper)}
.slate-foot{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;border-top:1px solid var(--line-dark)}
.slate-foot i{display:block;width:44%;height:7px;border-radius:99px;background:rgba(255,255,255,.16)}
.slate-foot b{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ox);display:grid;place-items:center;color:var(--ox);font-size:.8rem}

/* ============ Work / portfolio ============ */
.work-head{margin-bottom:2.6rem}
.work-head h2{margin:0}
.work-sub{margin:.65rem 0 0;max-width:60ch;color:var(--muted);font-size:1.05rem}
.case-card{position:relative;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:calc(var(--rad) + 6px);padding:clamp(.8rem,1.6vw,1.4rem);box-shadow:var(--shadow)}
.frame-corner,.photo-slot:before,.photo-slot:after{position:absolute;width:16px;height:16px;border-color:var(--gold);border-style:solid;pointer-events:none}
.case-card .frame-corner.tl{top:-6px;left:-6px;border-width:2px 0 0 2px}
.case-card .frame-corner.br{right:-6px;bottom:-6px;border-width:0 2px 2px 0}
.photo-slot:before{content:"";top:12px;left:12px;border-width:1.5px 0 0 1.5px;border-color:var(--gold-deep);z-index:3}
.photo-slot:after{content:"";right:12px;bottom:12px;border-width:0 1.5px 1.5px 0;border-color:var(--gold-deep);z-index:3}
.ba{position:relative;border-radius:var(--rad);overflow:hidden;aspect-ratio:16/10;background:var(--ink)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:2}
.ba-handle:before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--gold)}
.ba-handle span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--gold);color:#07181d;display:grid;place-items:center;font-size:.72rem;font-weight:600;letter-spacing:.05em;box-shadow:0 6px 18px rgba(9,34,41,.35)}
.ba-tag{position:absolute;top:1.2rem;z-index:2;font-size:1.05rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.7rem 1.1rem;border-radius:4px;transition:opacity .3s;pointer-events:none;box-shadow:0 6px 20px rgba(9,34,41,.35)}
.ba-tag-b{left:1.2rem;background:rgba(9,34,41,.94);color:#fff}
.ba-tag-a{right:1.2rem;background:var(--gold);color:#07181d}
.ba.at-after .ba-tag-b,.ba.at-before .ba-tag-a{opacity:0}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3;-webkit-appearance:none;appearance:none}
.case-row{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,4vw,3.8rem);align-items:start;max-width:1240px;margin:0 auto}
.case-row>*{min-width:0}
.case-main{width:100%}
.case-side{display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem;padding-top:.4rem}
.case-head{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3vw,2.7rem);line-height:1.08;letter-spacing:-.02em;margin:0;max-width:16ch}
.case-head em{font-style:italic}
.did-stack{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);width:100%}
.did-stack li{padding:1.05rem 0;border-bottom:1px solid var(--line)}
.did-stack b{display:flex;align-items:center;font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.1}
.did-stack b:before{content:"";width:8px;height:8px;background:var(--gold);margin-right:.85rem;flex:none}
.did-stack span{display:block;margin:.35rem 0 0 1.35rem;font-size:.92rem;line-height:1.55;color:var(--muted)}
.case-devices{position:relative;padding-bottom:1rem}
.cd{margin:0;background:var(--white);overflow:hidden}
.cd img{display:block;width:100%}
.cd-desktop{width:65%;border:1px solid var(--line);border-radius:var(--rad-img);box-shadow:var(--shadow)}
.cd-tablet{position:absolute;width:38%;right:0;top:5%;border-radius:14px;border:5px solid #0d2f38;background:#0d2f38;box-shadow:var(--shadow)}
.cd-tablet img{border-radius:9px}
.cd-phone{position:absolute;width:21%;right:2%;bottom:2%;border-radius:16px;border:5px solid #0d2f38;background:#0d2f38;box-shadow:var(--shadow);transform:rotate(2deg)}
.cd-phone img{border-radius:11px}
.case-meta{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;padding:1.2rem .6rem .4rem}
.drag-hint{font-size:.85rem;color:var(--muted);white-space:nowrap}
.drag-hint:before{content:"◂ ▸";color:var(--gold);letter-spacing:.05em;margin-right:.55rem}
.feat-head{display:flex;align-items:baseline;gap:1.4rem;margin:5rem auto 1.8rem;flex-wrap:wrap}
.feat-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.4vw,2.2rem);margin:0}
.feat-head p{margin:0;color:var(--muted);font-size:.95rem}
.feat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.swipe-hint{display:none}
/* Padding is EQUAL top and bottom so the button + line sit optically centred between
   the hairline rule above and the section edge below. The section's own bottom padding
   is zeroed out so it can't add space on one side only. */
.cta-band{display:flex;align-items:center;justify-content:flex-start;gap:1.1rem 2.2rem;flex-wrap:wrap;max-width:1240px;margin:clamp(2.2rem,4vh,3.2rem) auto 0;padding:2.4rem 0;border-top:1px solid var(--line)}
.section:has(> .cta-band:last-child){padding-bottom:0}
.cta-band .button{flex:none}
.cta-band p{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.15;letter-spacing:-.01em;max-width:26ch}
.sky-pass .cta-band{border-top-color:rgba(9,34,41,.16)}
.feat{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);padding:1.1rem 1.1rem 1.4rem;transition:transform .25s,box-shadow .25s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feat h4{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:1.1rem .3rem .3rem}
.feat p{margin:0 .3rem;font-size:.85rem;color:var(--muted)}
.mini-mock{border:1px solid var(--line);border-radius:var(--rad-img);overflow:hidden;background:var(--paper)}
.mini-bar{display:flex;gap:4px;padding:.55rem .7rem;background:var(--white);border-bottom:1px solid var(--line)}
.mini-bar i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.mini-body{padding:1rem;display:flex;flex-direction:column;gap:.55rem;min-height:132px}
.mini-h{height:13px;border-radius:99px;background:var(--ink);width:70%}
.mini-h.wide{width:88%}
.mini-l{height:7px;border-radius:99px;background:var(--line);width:90%}
.mini-l.short{width:55%}
.mini-blocks{display:flex;gap:.55rem;margin-top:.2rem}
.mini-blocks i{flex:1;height:34px;border-radius:8px;background:var(--ox);opacity:.55}
.mini-blocks.tall i{height:44px;background:var(--ink);opacity:.12}
.mini-cols{display:flex;gap:.55rem}
.mini-cols i{flex:1;height:40px;border-radius:8px;background:var(--white);border:1px solid var(--line)}
.feat-shot{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--rad-img);overflow:hidden;background:none;cursor:zoom-in}
.feat-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.feat-shot:hover img,.feat-shot:focus-visible img{transform:scale(1.03)}
.lightbox{border:0;border-radius:var(--rad);padding:.9rem .9rem 1rem;width:min(1080px,94vw);background:var(--white);box-shadow:var(--shadow)}
.lightbox::backdrop{background:rgba(9,34,41,.74);backdrop-filter:blur(5px)}
.lightbox img{width:100%;border-radius:var(--rad-img);border:1px solid var(--line)}
.lb-cap{margin:.85rem .3rem .1rem;font-size:.86rem;color:var(--muted)}
.lb-close{position:absolute;top:1.3rem;right:1.3rem;width:42px;height:42px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);cursor:pointer;font-size:.95rem;line-height:1}
.lb-close:hover{background:var(--gold);color:#07181d}
.device-trio{position:relative;padding:0 0 3.2rem 6%}
.dev{margin:0;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.dev img{display:block;width:100%}
.dev-desktop{border-radius:var(--rad-img)}
.dev-bar{display:flex;gap:5px;padding:.6rem .8rem;background:var(--white);border-bottom:1px solid var(--line)}
.dev-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dev-tablet{position:absolute;width:31%;left:-5%;bottom:-1.2rem;border-radius:14px;border:5px solid #0d2f38;background:#0d2f38}
.dev-tablet img{border-radius:9px}
.dev-phone{position:absolute;width:19%;right:-3%;bottom:-1.2rem;border-radius:16px;border:5px solid #0d2f38;background:#0d2f38;transform:rotate(2deg)}
.dev-phone img{border-radius:11px}
.trio-cap{margin:1.4rem 0 0 6%;font-size:.82rem}
.dark-pass .trio-cap{color:var(--muted-dark)}

/* ============ Process ============ */
.steps-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:3rem auto 0;padding:0;counter-reset:step}
.steps-row li{background:var(--white);border:1px solid rgba(9,34,41,.14);border-radius:var(--rad);padding:1.5rem 1.4rem 1.6rem}
.steps-row li>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--serif);font-size:1.15rem;margin-bottom:1.1rem}
.steps-row h3{font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.08;margin:0 0 .6rem}
.steps-row p{margin:0;font-size:.88rem;color:var(--muted)}
.sky-pass .steps-row p{color:#33555e}

/* ============ Studio ============ */
.studio{text-align:center}
.studio .kicker{justify-content:center}
.studio .kicker:before{display:none}
.studio .kicker:after{content:"";width:44px;height:2px;background:var(--gold);order:-1;margin-right:.8rem}
.team-row{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:2rem;justify-content:center;margin:0 auto}
.person{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);padding:1.2rem 1.2rem 1.8rem;text-align:left}
.photo-slot{position:relative;aspect-ratio:1000/564;border-radius:var(--rad-img);overflow:hidden;
  background:radial-gradient(135% 115% at 50% 6%,#f2fbfd 0%,var(--oxwash) 48%,#a8dfec 100%)}
.photo-slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;z-index:2;
  filter:drop-shadow(0 14px 24px rgba(16,45,53,.22))}
.photo-slot .ps-ring,.photo-slot .ps-sq,.photo-slot .ps-dot{position:absolute;z-index:1;pointer-events:none}
.photo-slot .ps-ring{width:58%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(16,45,53,.14);right:-13%;top:-24%}
.photo-slot .ps-ring:after{content:"";position:absolute;inset:17%;border-radius:50%;border:1px solid rgba(16,45,53,.09)}
.photo-slot .ps-sq{width:26%;aspect-ratio:1;border:1px solid rgba(232,77,56,.34);border-radius:9px;left:-7%;bottom:-14%;transform:rotate(11deg)}
.photo-slot .ps-dot{width:13%;aspect-ratio:1;border-radius:50%;background:rgba(253,254,253,.55);left:9%;top:13%}
.person h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:1.3rem .4rem .2rem}
.person .role{margin:0 .4rem .8rem;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-deep)}
.person p{margin:0 .4rem;font-size:.92rem;color:var(--muted)}

/* ============ Ongoing services (Z layout) ============ */
.z-list{max-width:1240px;margin:0 auto}
.z-row{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:2.4rem 0;border-top:1px solid rgba(9,34,41,.16)}
.z-row:nth-child(even) .z-text{order:1}
.z-row:nth-child(even) .z-vis{order:0}
.z-text h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,2.8vw,2.4rem);margin:0 0 .6rem}
.z-text p{margin:0;font-size:1rem;color:#2c4d56;max-width:52ch;line-height:1.62}
.z-text p b{font-weight:600;color:var(--ink)}
.z-text .chip-list{margin-top:1.1rem}
.z-vis .mock-panel{background:var(--white);border:1px solid rgba(9,34,41,.16);border-radius:var(--rad-img);box-shadow:var(--shadow);padding:1.2rem 1.3rem;max-width:360px;margin-left:auto}
.z-row:nth-child(even) .mock-panel{margin-left:0;margin-right:auto}
.mp-search{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:999px;padding:.55rem .9rem;font-size:.82rem;color:var(--muted);margin-bottom:.9rem;background:var(--paper)}
.mp-search i{width:10px;height:10px;border:2px solid var(--ox);border-radius:50%;position:relative;flex:none}
.mp-search i:after{content:"";position:absolute;right:-4px;bottom:-3px;width:5px;height:2px;background:var(--ox);transform:rotate(45deg)}
.mp-card{border:1px solid var(--line);border-radius:12px;padding:.85rem .9rem}
.mp-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem}
.mp-card-top b{font-size:1rem;line-height:1.2}
.mp-cat{display:block;font-size:.74rem;color:var(--muted);margin-top:.15rem}
.mp-map{width:44px;height:44px;border-radius:8px;flex:none;background:var(--oxwash);position:relative;overflow:hidden}
.mp-map:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.9) 44%,transparent 46%),linear-gradient(200deg,transparent 60%,rgba(255,255,255,.85) 62%,transparent 64%)}
.mp-map i{position:absolute;top:13px;left:19px;width:7px;height:7px;border-radius:50% 50% 50% 0;background:var(--gold);transform:rotate(-45deg)}
.mp-rate{display:flex;align-items:center;gap:.45rem;margin:.5rem 0 .3rem}
.mp-rate em{font-style:normal;color:var(--gold-deep);font-size:.8rem;letter-spacing:.06em}
.mp-rate span{font-size:.74rem;color:var(--muted)}
.mp-open{display:flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--muted)}
.mp-open i{width:6px;height:6px;border-radius:50%;background:#2f7d5b;flex:none}
.mp-acts{display:flex;gap:.4rem;margin-top:.7rem}
.mp-acts span{font-size:.7rem;font-weight:600;padding:.32rem .6rem;border-radius:999px;background:var(--oxwash);color:#1c4a55}
.mp-acts .is-call{background:var(--gold);color:#25120d}
.mp-title{display:flex;justify-content:space-between;align-items:baseline;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.11em;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.mp-title span{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
.mp-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.88rem}
.mp-row b{flex:1;font-weight:500}
.mp-av{width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;background:var(--oxwash);color:#1c4a55;font-size:.6rem;font-weight:700;font-style:normal}
.mp-row span{font-size:.72rem;color:#2f7d5b;font-weight:600;display:flex;align-items:center;gap:.28rem}
.mp-row span:before{content:"✓";font-size:.66rem}
.mp-review{margin-top:.85rem;background:var(--oxwash);border-radius:10px;padding:.7rem .8rem}
.mp-review em{font-style:normal;color:var(--gold-deep);font-size:.74rem;letter-spacing:.06em}
.mp-review p{margin:.2rem 0 .25rem;font-size:.84rem;color:#1c4a55}
.mp-review small{font-size:.68rem;color:#456068}
.mp-q{display:flex;align-items:flex-start;gap:.55rem;font-family:var(--serif);font-size:1.02rem;line-height:1.35;background:var(--oxwash);border-radius:12px 12px 12px 3px;padding:.7rem .85rem;margin-bottom:.75rem;color:#123f49}
.mp-q i{width:20px;height:20px;border-radius:50%;flex:none;background:var(--ink);margin-top:.1rem}
.mp-a{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem}
.mp-a-head{display:flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.4rem}
.mp-spark{color:var(--gold-deep);font-size:.8rem}
.mp-a p{margin:0;font-size:.85rem;line-height:1.55;color:#2c4d56}
.mp-src{display:flex;gap:.35rem;margin-top:.65rem;flex-wrap:wrap}
.mp-src span{font-size:.66rem;padding:.22rem .5rem;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.mp-a b{color:var(--ink)}
.mp-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .7rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.mp-head span{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:100%}
.mp-head b{font-family:var(--serif);font-weight:400;font-size:2.2rem;line-height:1}
.mp-head em{font-style:normal;font-size:.78rem;font-weight:600;color:var(--gold-deep)}
.mp-chart{display:flex;align-items:flex-end;gap:.55rem;height:120px;margin:1.1rem 0 .5rem;padding-bottom:1.25rem;position:relative}
.mp-chart:before{content:"";position:absolute;left:0;right:0;bottom:1.25rem;border-bottom:1px solid var(--line)}
.mp-chart span{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-self:stretch}
.mp-chart i{display:block;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--ox) 0%,#a8e2ee 100%)}
.mp-chart .is-now i{background:linear-gradient(180deg,var(--gold) 0%,#f07a68 100%)}
.mp-chart small{position:absolute;bottom:0;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mp-chart .is-now small{color:var(--gold-deep);font-weight:600}
.mp-foot{display:flex;gap:1.6rem;padding-top:.85rem;border-top:1px solid var(--line)}
.mp-foot b{font-family:var(--serif);font-weight:400;font-size:1.3rem;display:block;line-height:1.1}
.mp-foot span{font-size:.76rem;color:var(--muted)}
.z-row.visible .mp-chart i{animation:barRise .85s cubic-bezier(.2,.7,.2,1) backwards}
.mp-chart span:nth-child(2) i{animation-delay:.07s}
.mp-chart span:nth-child(3) i{animation-delay:.14s}
.mp-chart span:nth-child(4) i{animation-delay:.21s}
.mp-chart span:nth-child(5) i{animation-delay:.28s}
.mp-chart span:nth-child(6) i{animation-delay:.35s}
@keyframes barRise{from{height:0}to{height:var(--h)}}
.addon{margin-top:3.5rem;border-top:1px solid rgba(9,34,41,.16);padding-top:2.2rem;max-width:1240px}
.addon-line{margin:0 0 1.1rem;font-size:.95rem;color:#2c4d56}

/* ============ Aftercare ============ */
.aftercare .ed-visual{position:relative;max-width:440px;margin-left:auto;margin-bottom:3.5rem}
.care-card{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow);padding:1.5rem 1.7rem}
.care-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.care-head b{font-size:1.02rem;font-weight:600}
.care-head small{margin-left:auto;font-size:.7rem;color:#256b43;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.care-dot{width:10px;height:10px;border-radius:50%;background:#2e9e5b;box-shadow:0 0 0 4px rgba(46,158,91,.16);flex:none}
.care-card ul{list-style:none;margin:0;padding:0}
.care-card li{display:flex;align-items:center;gap:.85rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.98rem}
.care-card li:last-child{border-bottom:0;padding-bottom:.2rem}
.care-card li:before{content:"✓";display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:rgba(232,77,56,.13);color:var(--gold-deep);font-size:.72rem;font-weight:700;flex:none}
.care-video{position:absolute;right:-8%;bottom:-3.2rem;width:76%;background:var(--ink);color:var(--paper);border-color:var(--line-dark);transform:rotate(2deg)}
.care-video .care-head{margin-bottom:.35rem}
.care-video p{margin:0;font-size:.86rem;color:var(--muted-dark)}

/* ============ Contact ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact-copy p{max-width:44ch}
.contact-copy>p:not(.kicker):not(.contact-note){font-size:1.08rem;color:var(--muted-dark);margin:0 0 2rem}
.contact-note{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--ox);margin:0}
.inquiry-form{background:var(--white);color:var(--ink);border-radius:var(--rad);padding:clamp(1.5rem,3.5vw,2.6rem);box-shadow:var(--shadow)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.inquiry-form label{display:block;margin-bottom:1.3rem}
.inquiry-form label>span{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.11em;margin-bottom:.45rem}
.inquiry-form input,.inquiry-form textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:.8rem .95rem;outline:none;transition:border-color .2s,box-shadow .2s}
.inquiry-form input:focus,.inquiry-form textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(142,216,232,.4)}
.inquiry-form textarea{resize:vertical}
.inquiry-form input:user-invalid,.inquiry-form textarea:user-invalid{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(232,77,56,.18)}
.inquiry-form .button{width:100%;margin-top:.4rem}
.field-hint{display:block;margin-top:.5rem;font-size:.78rem;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
.contact-alt{margin:.9rem 0 0;font-size:.92rem;color:var(--muted-dark)}
.contact-alt a{border-bottom:1.5px solid var(--gold);padding-bottom:.12rem;font-weight:600;color:#e8f1f2}
.footer-bottom a{border-bottom:1px solid rgba(255,255,255,.3)}
.form-note{font-size:.72rem;color:var(--muted);margin:1rem 0 0}
.honey{position:absolute;left:-9999px}

/* ============ Footer ============ */
footer{padding:4rem var(--pad) 1.5rem;background:var(--green);color:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;border-top:1px solid var(--line-dark)}
.footer-brand{font-size:1.25rem}
footer>p{max-width:420px;margin:0;justify-self:end;color:var(--muted-dark)}
.footer-links{display:flex;gap:1.8rem;font-size:.85rem;flex-wrap:wrap}
.footer-links a{display:inline-block;padding:.28rem 0;border-bottom:1px solid transparent;transition:border-color .2s}
.footer-links a:hover{border-color:currentColor}
.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line-dark);padding-top:1.1rem;color:var(--muted-dark);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}

/* ============ Legal pages & thanks (shared) ============ */
.legal-page{max-width:850px;margin:0 auto;padding:clamp(5rem,10vw,9rem) var(--pad)}
.legal-page h1{font-family:var(--serif);font-size:clamp(3rem,7vw,5.5rem);font-weight:400;line-height:.95;letter-spacing:-.04em;margin:0 0 1rem}
.legal-page h2{font-family:var(--serif);font-size:1.7rem;font-weight:400;margin:2.6rem 0 .5rem}
.legal-page p{font-size:1.02rem;max-width:68ch}
.legal-date{color:var(--muted);font-size:.72rem!important;text-transform:uppercase;letter-spacing:.1em}
.contact.section .contact-copy .eyebrow{color:inherit}

/* ============ Motion ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.steps-row li.reveal:nth-child(2){transition-delay:.12s}
.steps-row li.reveal:nth-child(3){transition-delay:.24s}
.steps-row li.reveal:nth-child(4){transition-delay:.36s}
.feat-row .feat:nth-child(2) .mini-mock{transition-delay:.12s}
.service-list li.reveal:nth-child(even){transition-delay:.12s}

/* ============ Responsive ============ */
@media(max-width:1020px){
  .site-header{grid-template-columns:1fr auto}
  .site-header nav,.header-cta{display:none}
  .site-header.header-plain .header-cta{display:inline-flex}
  .menu-button{display:inline-flex;align-items:center;gap:.5rem}
  .site-header.open nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);padding:.6rem var(--pad) 1.2rem;border-bottom:1px solid var(--line)}
  .site-header.open nav a{padding:1rem .4rem;border-radius:0;border-bottom:1px solid var(--line)}
  .ed-row{grid-template-columns:1fr;gap:3rem}
  .case-row{grid-template-columns:1fr;gap:2.6rem}
  .case-devices{max-width:560px}
  .case-head{max-width:24ch}
  .ed-flip .ed-visual{order:1}
  .site-sheet{margin:0 auto}
  .device-trio{padding-left:0}
  .aftercare .ed-visual{margin-left:0}
  .steps-row{grid-template-columns:1fr 1fr}
  .feat-row{grid-template-columns:1fr 1fr}
  .z-row{grid-template-columns:1fr;gap:1.6rem}
  .z-row:nth-child(even) .z-text{order:0}
  .z-row:nth-child(even) .z-vis{order:1}
  .z-vis .mock-panel,.z-row:nth-child(even) .mock-panel{margin:0}
  .aftercare-row,.contact-grid{grid-template-columns:1fr}
  .team-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .site-header.header-plain .header-cta{padding:.6rem 1rem;font-size:.8rem}
  body{font-size:16px}
  .booking-chip{max-width:100%;text-align:left}
  .hero h1{font-size:clamp(2.7rem,13vw,4rem)}
  .service-bar{flex-direction:column;align-items:stretch;width:100%;gap:0;padding:.6rem 0 1.3rem;margin-bottom:3rem}
  .service-bar-item{flex-direction:row;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding:.9rem 0}
  .service-bar-item+.service-bar-item{border-left:0;padding-left:0}
  .service-bar .button{margin:1.2rem 0 0}
  .steps-row,.team-row,.field-row,.aftercare-cards{grid-template-columns:1fr}
  /* Portfolio becomes a swipe carousel: all six stay reachable without six screens of scrolling */
  .feat-row{display:flex;grid-template-columns:none;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--pad);padding:.25rem var(--pad) 1.1rem;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .feat-row::-webkit-scrollbar{display:none}
  .feat-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .feat{flex:0 0 82%;scroll-snap-align:start}   /* 82% leaves a peek of the next card */
  .swipe-hint{display:block;margin:.1rem 0 0;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .swipe-hint span{color:var(--gold-deep)}
  .cta-band{margin-top:2rem;padding:1.9rem 0}
  .cta-band .button{width:100%;text-align:center}
  .service-list li{grid-template-columns:1fr;gap:.3rem}
  .ba-handle span{width:44px;height:44px}
  .ba-tag{font-size:.72rem;letter-spacing:.08em;top:.9rem;padding:.5rem .7rem}
  .dev-phone{width:24%}
  .care-video{right:0}
  .case-meta{padding:1.1rem .3rem .3rem}
  footer{grid-template-columns:1fr}
  footer>p{justify-self:start}
  .footer-bottom{flex-direction:column;gap:.5rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .ticker div{animation:none}
}

/* Libre Caslon Display ships no italic — Chrome would synthesize a fake slant.
   Libre Caslon Text is its companion face and has a true drawn italic. */
/* Libre Caslon Text is a text-optimised face: larger x-height than Display, so at the
   same px it reads oversized. .94em optically matches it to the Display roman. */
h1 em,h2 em,h3 em,.case-head em,.brand em,.hero h1 em{font-family:var(--serif-i);font-style:italic;font-size:.94em}

/* `.section>h2` is given `margin-left/right:auto` by the max-width rule, but the
   later `.section h2` block ties it on specificity and its `margin` shorthand
   resets both to 0 — so every h2 sat 44px left of its own kicker and lead, and
   the centred `.studio` heading was off-centre. Matches the root fix. */
.section>h2{margin-inline:auto}