/* ==========================================================================
   Gautam Photography site styles

   SYSTEM
   Colour    Warm paper and deep umber, never black. Colour comes from the photographs:
             sections sit on heavily blurred copies of our own colourful product shoots.
   Type      No web fonts. System Helvetica Neue / Helvetica / Arial; hierarchy from size,
             weight and tracking only. No italics, no accent coloured words, no dashes.
             Scale (perfect fourth from 16px): 12 · 16 · 21 · 28 · 38 · 50 · 67 · 89 · 119.
   Space     8pt grid. Body 16/24, lede 20/32, labels 12/16.
   Grid      12 columns, 24px gutter (16 on phones), 1440px measure.
   Optical   Display type trimmed to cap height and pulled left by its side bearing; quote
             marks hang; tracked caps cancel their trailing space; icons nudged to visual centre.
   ========================================================================== */
:root{
  --paper:#f4eee6; --paper-2:#ece3d6; --card:#fffaf3;
  --ink:#33261c; --mute:rgba(51,38,28,.7); --dim:rgba(51,38,28,.5);
  --line:rgba(51,38,28,.14); --line-2:rgba(51,38,28,.26);
  --accent:#b4532a; --light:#fffaf3; --red:#c8432f;
  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --text:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --t-12:12px; --t-16:16px; --t-21:21px; --t-28:28px;
  --t-38:clamp(28px,2.6vw,38px); --t-50:clamp(34px,3.5vw,50px);
  --t-67:clamp(32px,4.65vw,67px); --t-89:clamp(44px,6.2vw,89px); --t-119:clamp(44px,8.25vw,119px);
  --s-half:4px; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --sec:clamp(96px,11vw,176px);
  --gut:24px; --pad:clamp(16px,4vw,64px); --max:1440px;
  --r:4px; --r-ui:16px; --pill:999px;
  --ease:cubic-bezier(.2,.7,.1,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --track:.12em;
}
@media(max-width:720px){:root{--gut:16px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--s7);scroll-behavior:smooth;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:var(--t-16);line-height:24px;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
b,strong{font-weight:600}
em,i{font-style:normal}
ol,ul{list-style:none}
::selection{background:var(--accent);color:var(--light)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{width:100%;max-width:calc(var(--max) + var(--pad)*2);padding-inline:var(--pad);margin-inline:auto}

/* labels and kickers: tracked caps, trailing tracking cancelled so they align right and centre truly */
.lbl,.kicker{font-size:var(--t-12);line-height:16px;font-weight:600;letter-spacing:var(--track);text-transform:uppercase;font-variant-numeric:lining-nums tabular-nums}
.lbl>span:last-child,.kicker{margin-right:calc(var(--track)*-1)}
.kicker{color:var(--accent);display:block}
.muted{color:var(--dim)}

.display{font-family:var(--display);font-weight:500;line-height:.94;letter-spacing:-.045em;text-box:trim-both cap alphabetic;margin-left:-.05em;text-wrap:balance}
.h2{font-size:var(--t-119);max-width:12em}
.lede{color:var(--mute);font-size:var(--t-21);line-height:32px;max-width:34em}
.lede i{color:var(--ink);font-weight:600}
@media(max-width:720px){.lede{font-size:18px;line-height:28px}}

section{position:relative}
.sec{padding-block:var(--sec)}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s4);align-items:end;margin-bottom:var(--s7)}
.sec-head>div{grid-column:1/span 7}
.sec-head>.lede{grid-column:9/-1;text-box:trim-both cap alphabetic}
.sec-head .display{margin-top:var(--s3)}
@media(max-width:980px){.sec-head>div,.sec-head>.lede{grid-column:1/-1}.sec-head{margin-bottom:var(--s6)}}

/* blurred photograph backgrounds: the shoot itself, out of focus, under a paper veil */
.blur{isolation:isolate;overflow:hidden}
.blur::before,.blur::after{content:"";position:absolute;inset:0;z-index:-1}
.blur::before{inset:-10%;background:var(--bg) center/cover no-repeat;filter:saturate(1.15)}
.blur::after{background:linear-gradient(180deg,rgba(244,238,230,.62),rgba(244,238,230,.46) 50%,rgba(244,238,230,.66))}

/* buttons: 56 / 48 tall, side padding = height/2 + 8 so the round caps don't look tight */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:56px;padding-inline:36px;border-radius:var(--pill);font-size:15px;line-height:16px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;transition:background .35s var(--ease),color .35s,box-shadow .35s,transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-sm{height:48px;padding-inline:28px;font-size:14px}
.btn-solid{background:var(--ink);color:var(--light)}
.btn-solid:hover{background:var(--accent)}
.btn-ghost{box-shadow:inset 0 0 0 1.5px currentColor}
.btn-ghost:hover{background:var(--ink);color:var(--light);box-shadow:none}

/* reveal */
.rv{opacity:0;transform:translateY(var(--s4));transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;color:var(--ink);transition:background .5s,box-shadow .5s,transform .6s var(--ease),color .6s}
.nav[data-tone=light]:not(.solid){color:var(--light)}
.nav[data-tone=light]:not(.solid) .btn-solid{background:var(--light);color:var(--ink)}
.nav.solid{background:rgba(244,238,230,.84);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.nav.hide{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:80px;gap:var(--s3)}
.logo{display:flex;align-items:baseline;gap:var(--s1)}
.logo b{font-weight:700;font-size:24px;line-height:32px;letter-spacing:-.045em}
.logo b i{color:var(--accent)}
.logo span{font-size:10px;line-height:16px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;opacity:.6}
.nav ul{display:flex;gap:var(--s4)}
.nav ul a{font-size:14px;line-height:24px;font-weight:500;opacity:.78;transition:opacity .3s;position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav ul a:hover{opacity:1}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;position:relative;z-index:101}
.burger i{position:absolute;left:15px;right:15px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger i:first-child{top:20px}.burger i:last-child{top:27px}
.menu-open .nav{color:var(--ink)!important}
.menu-open .burger i:first-child{top:23.5px;transform:rotate(45deg)}
.menu-open .burger i:last-child{top:23.5px;transform:rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:99;background:var(--paper);display:flex;flex-direction:column;justify-content:center;gap:var(--s1);padding:var(--s7) var(--pad) var(--s5);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease-io),visibility .8s}
.menu-open .mmenu{clip-path:inset(0);visibility:visible}
.mmenu>a{font-size:48px;line-height:56px;font-weight:500;letter-spacing:-.04em}
.mmenu .mfoot{margin-top:var(--s5)}
@media(max-width:1080px){.nav ul,.nav .wrap>.btn{display:none}.burger{display:block}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(80px + var(--s5));padding-bottom:var(--s5);overflow:hidden;isolation:isolate;color:var(--ink);transition:color .8s var(--ease)}
.hero[data-tone=light]{color:var(--light)}
.hero-bg{position:absolute;inset:0;z-index:-1;background:var(--paper)}
.hero-bg .layer{position:absolute;inset:-8%;background:center/cover no-repeat;opacity:0;transform:scale(1.08);transition:opacity 1.4s var(--ease),transform 2.4s var(--ease);filter:saturate(1.15)}
.hero-bg .layer.in{opacity:1;transform:none}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s5);align-items:center;flex:1}
.hero-copy{grid-column:1/span 6;display:flex;flex-direction:column}
.hero[data-tone=light] .kicker{color:var(--light)}
.kicker{transition:opacity .4s var(--ease),transform .4s var(--ease)}
.kicker.out{opacity:0;transform:translateY(-8px)}
.hero-h{font-size:clamp(48px,6.6vw,104px);line-height:.98;margin-top:var(--s3);min-height:2.94em;display:flex;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;column-gap:.24em}
.hero[data-tone=light] .hero-h{text-shadow:0 2px 40px rgba(90,40,10,.18)}
.hero-h .w{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-h .w>span{display:inline-block;transition:transform .9s var(--ease) var(--d),opacity .9s var(--ease) var(--d)}
.hero-h.pre .w>span{transform:translateY(105%);opacity:0;transition:none}
.hero-h.out .w>span{transform:translateY(-105%);opacity:0;transition:transform .45s cubic-bezier(.5,0,.75,0) calc(var(--d)*.5),opacity .45s calc(var(--d)*.5)}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;column-gap:var(--s5);margin-top:var(--s6)}
.facts li{padding-left:var(--s2);box-shadow:inset 1.5px 0 0 currentColor}
.facts b{display:block;font-size:var(--t-28);line-height:32px;font-weight:600;letter-spacing:-.03em}
.facts span{display:block;margin-top:var(--s1);font-size:14px;line-height:20px;opacity:.82}
.hero-cta{display:flex;gap:var(--s2);margin-top:var(--s6);flex-wrap:wrap}
.hero[data-tone=light] .hero-cta .btn-solid{background:var(--light);color:var(--ink)}
.hero[data-tone=light] .hero-cta .btn-solid:hover{background:var(--paper-2)}
.hero[data-tone=light] .hero-cta .btn-ghost:hover{background:var(--light);color:var(--ink)}
.hero-frame{grid-column:8/-1;position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;box-shadow:0 48px 96px -40px rgba(80,40,15,.45);background:rgba(255,250,243,.2)}
.hero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path 1.2s var(--ease-io),transform 2.2s var(--ease)}
.hero-frame img.in{clip-path:inset(0);transform:none}
.hero-foot{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5)}
.hero-dots{display:flex;gap:var(--s1)}
.hero-dots button{width:40px;height:24px;position:relative}
.hero-dots button::before,.hero-dots button i{content:"";position:absolute;left:0;right:0;top:11px;height:2px;border-radius:2px;background:currentColor;opacity:.3}
.hero-dots button i{right:auto;width:0;opacity:1}
.hero-dots button.on i{animation:fill 6.5s linear forwards}
.hero.paused .hero-dots button.on i{animation-play-state:paused}
@keyframes fill{to{width:100%}}
.hero-cap{opacity:.75}
@media(max-width:980px){
  .hero-copy{grid-column:1/-1;order:2}.hero-frame{grid-column:1/-1;order:1;aspect-ratio:4/3}
  .hero-h{min-height:0}
  .facts{column-gap:var(--s3)}
}
@media(max-width:560px){
  .hero{padding-top:calc(80px + var(--s2))}
  .facts{grid-template-columns:1fr 1fr 1fr;column-gap:var(--s2)}
  .facts li{padding-left:var(--s1)}
  .facts b{font-size:21px;line-height:24px}
  .facts span{font-size:12px;line-height:16px}
  .hero-cta .btn{flex:1;padding-inline:var(--s3)}
  .hero-cap{display:none}
}

/* ---------- clients ---------- */
.clients{padding-block:var(--s6);background:var(--paper)}
.client-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:var(--s3);box-shadow:inset 0 1px 0 var(--line)}
.client-grid li{padding:var(--s2) var(--s2) var(--s2) 0;box-shadow:inset 0 -1px 0 var(--line);font-size:17px;line-height:24px;font-weight:500;letter-spacing:-.01em;color:var(--mute)}
@media(max-width:980px){.client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.client-grid li{font-size:15px}}

/* ---------- intro ---------- */
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s6);align-items:start}
.intro>div:first-child{grid-column:1/span 7}
.intro-side{grid-column:9/-1;display:flex;flex-direction:column;gap:var(--s4)}
.statement{font-size:var(--t-67);line-height:1.06;font-weight:500;letter-spacing:-.04em;margin-top:var(--s4);text-box:trim-both cap alphabetic;margin-left:-.045em}
.portrait{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;box-shadow:0 32px 64px -32px rgba(80,40,15,.4)}
.portrait img{width:100%;height:100%;object-fit:cover}
.intro-side p{color:var(--mute)}
.intro-side p b{color:var(--ink)}
.sign{font-weight:600;color:var(--ink)!important}
@media(max-width:980px){.intro>div:first-child,.intro-side{grid-column:1/-1}}

/* ---------- numbers: a contact sheet of four frames ---------- */
.sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.frame{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);aspect-ratio:3/4;padding:var(--s3);display:flex;flex-direction:column;justify-content:flex-end;color:var(--light)}
.frame::before{content:"";position:absolute;inset:-10%;z-index:-2;background:var(--bg) center/cover;filter:saturate(1.2)}
.frame img{position:absolute;z-index:-1;top:var(--s3);left:var(--s3);width:calc(100% - var(--s5));aspect-ratio:1;object-fit:cover;border-radius:2px;box-shadow:0 24px 48px -24px rgba(60,25,5,.5);transition:transform 1.2s var(--ease)}
.frame:hover img{transform:scale(1.03) rotate(-1deg)}
.frame figcaption{position:relative}
.frame b{display:block;font-size:var(--t-67);line-height:1;font-weight:600;letter-spacing:-.05em;font-variant-numeric:lining-nums;text-box:trim-both cap alphabetic;text-shadow:0 2px 24px rgba(60,25,5,.25)}
.frame span{display:block;margin-top:var(--s2);font-size:15px;line-height:20px;font-weight:500;max-width:14em;text-shadow:0 1px 12px rgba(60,25,5,.3)}
.frame .fno{position:absolute;top:var(--s3);right:var(--s3);z-index:1;font-style:normal;font-size:11px;line-height:16px;font-weight:600;letter-spacing:var(--track);padding:4px 8px;border-radius:var(--pill);background:rgba(255,250,243,.9);color:var(--ink)}
@media(max-width:980px){.sheet{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.frame{padding:var(--s2)}.frame img{top:var(--s2);left:var(--s2);width:calc(100% - var(--s4))}.frame .fno{top:var(--s2);right:var(--s2)}.frame span{font-size:13px;line-height:18px}}

/* ---------- work ---------- */
.filters{display:flex;gap:var(--s1);flex-wrap:wrap}
.filters button{height:40px;padding-inline:20px;border-radius:var(--pill);box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:14px;line-height:16px;font-weight:500;color:var(--mute);display:inline-flex;align-items:center;gap:6px;transition:all .3s var(--ease)}
.filters button:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.filters button.on{background:var(--ink);color:var(--light);box-shadow:none}
.filters button sup{font-size:10px;line-height:1;opacity:.6;vertical-align:baseline;position:relative;top:-.4em}
.grid{columns:3;column-gap:var(--gut);margin-top:var(--s5)}
.tile{break-inside:avoid;margin-bottom:var(--gut);position:relative;overflow:hidden;border-radius:var(--r);background:var(--paper-2);cursor:zoom-in;display:block;width:100%;text-align:left}
.tile img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile .cap{position:absolute;left:var(--s2);bottom:var(--s2);padding:6px 12px;border-radius:var(--pill);background:rgba(255,250,243,.92);color:var(--ink);opacity:0;transform:translateY(var(--s1));transition:opacity .4s,transform .4s var(--ease)}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
.tile.enter{animation:tin .9s var(--ease) both}
@keyframes tin{from{opacity:0;transform:translateY(var(--s4))}}
.more{display:flex;justify-content:center;margin-top:var(--s6)}
@media(max-width:980px){.grid{columns:2}}
@media(max-width:720px){
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none}
  .grid{column-gap:var(--s1);margin-top:var(--s3)}
  .tile{margin-bottom:var(--s1)}
  .tile .cap{display:none}
}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:250;background:rgba(244,238,230,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;grid-template-rows:80px 1fr 80px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.lb.open{opacity:1;visibility:visible}
.lb-top,.lb-bot{display:flex;justify-content:space-between;align-items:center;padding-inline:var(--pad);color:var(--mute);gap:var(--s2)}
.lb-stage{position:relative;display:grid;place-items:center;padding-inline:calc(var(--s7) + var(--s2));min-height:0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r);transition:opacity .4s;box-shadow:0 32px 80px -40px rgba(80,40,15,.45)}
.lb-x,.lb-nav{width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;transition:background .3s,color .3s,box-shadow .3s;background:var(--card)}
.lb-x:hover,.lb-nav:hover{background:var(--ink);color:var(--light);box-shadow:none}
.lb-nav{position:absolute;top:50%;margin-top:-28px}
.lb-nav.p{left:var(--pad)}.lb-nav.n{right:var(--pad)}
.lb-nav.p svg{transform:translateX(-1px)}.lb-nav.n svg{transform:translateX(1px)}
.lb svg{width:20px;height:20px}
@media(max-width:720px){.lb-nav{display:none}.lb-stage{padding-inline:var(--s2)}}

/* ---------- quote ---------- */
.quote{text-align:center}
.quote blockquote p{font-size:var(--t-89);line-height:1;font-weight:500;letter-spacing:-.045em;max-width:13em;margin-inline:auto;text-wrap:balance}
/* both quote marks take no width and hang outside, so the words, not the marks, are centred */
.quote .q{display:inline-block;width:0}
.quote .q.o{text-indent:-.42em}
.quote cite{display:block;margin-top:var(--s5);font-style:normal;color:var(--mute);text-indent:var(--track)}

/* ---------- real vs ai ---------- */
.cmp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s6);align-items:center}
.cmp-grid>div:first-child{grid-column:1/span 6}
.cmp-grid>div:last-child{grid-column:8/-1}
.cmp{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;background:var(--paper-2);cursor:ew-resize;box-shadow:0 48px 96px -40px rgba(80,40,15,.45)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .ai{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.cmp .rule{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:var(--light);pointer-events:none}
.cmp .knob{position:absolute;top:50%;left:var(--x,50%);width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--light);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 24px rgba(80,40,15,.3);transition:transform .3s var(--ease);pointer-events:none}
.cmp:active .knob{transform:scale(.92)}
.cmp .knob svg{width:24px;height:24px}
.cmp .tag{position:absolute;top:var(--s3);height:32px;display:inline-flex;align-items:center;padding-inline:var(--s2) calc(var(--s2) - var(--track));border-radius:var(--pill);font-size:11px;line-height:16px;font-weight:600;letter-spacing:var(--track);text-transform:uppercase;transition:opacity .3s;pointer-events:none}
.cmp .tag.l{left:var(--s3);background:var(--red);color:var(--light)}
.cmp .tag.r{right:var(--s3);background:var(--light);color:var(--ink)}
.cmp input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;pointer-events:none}
.cmp:focus-within{outline:2px solid var(--accent);outline-offset:4px}
.cmp-hint{position:absolute;left:50%;bottom:var(--s3);transform:translateX(-50%);height:32px;display:inline-flex;align-items:center;padding-inline:var(--s2) calc(var(--s2) - var(--track));color:var(--ink);background:rgba(255,250,243,.9);border-radius:var(--pill);transition:opacity .5s;white-space:nowrap;pointer-events:none}
.cmp.touched .cmp-hint{opacity:0}
.pairs{display:flex;gap:var(--s1);margin-top:var(--s2)}
.pairs button{width:64px;height:64px;border-radius:var(--r);overflow:hidden;opacity:.5;transition:opacity .3s,box-shadow .3s}
.pairs button img{width:100%;height:100%;object-fit:cover}
.pairs button.on,.pairs button:hover{opacity:1}
.pairs button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent)}
.cmp-h{font-size:var(--t-89);margin-top:var(--s3)}
.cmp-grid .lede{margin-top:var(--s4)}
.vs{margin-top:var(--s5);box-shadow:inset 0 1px 0 var(--line)}
.vs div{display:grid;grid-template-columns:var(--s4) 1fr 1fr;column-gap:var(--s2);padding-block:var(--s2);box-shadow:inset 0 -1px 0 var(--line);font-size:15px;line-height:24px;align-items:baseline}
.vs div span:nth-child(1){font-size:var(--t-12);font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.vs div span:nth-child(2){color:var(--dim)}
.vs div:not(.hd) span:nth-child(n+2){position:relative;padding-left:var(--s3)}
.vs div:not(.hd) span:nth-child(n+2)::before{position:absolute;left:0;top:0;width:var(--s2);text-align:center}
.vs div:not(.hd) span:nth-child(2)::before{content:"×";color:var(--red);font-size:18px}
.vs div:not(.hd) span:nth-child(3)::before{content:"✓";color:var(--accent);font-size:13px}
.vs .hd span{font-size:11px;line-height:16px;font-weight:600;letter-spacing:var(--track);text-transform:uppercase;color:var(--dim)!important;padding-left:var(--s3)}
.vs .hd span:first-child{padding-left:0}
.cmp-grid .btn{margin-top:var(--s5)}
@media(max-width:980px){.cmp-grid>div:first-child,.cmp-grid>div:last-child{grid-column:1/-1}}
@media(max-width:560px){.vs div{grid-template-columns:var(--s3) 1fr 1fr;font-size:14px}}

/* ---------- services: photograph above, words below, on a 12 col mosaic ---------- */
.svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s6) var(--gut)}
.card{grid-column:span 4;display:block}
.card.w6{grid-column:span 6}.card.w8{grid-column:span 8}
.card .ph{display:block;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3;background:var(--paper-2)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card h3{font-size:var(--t-38);line-height:1;font-weight:500;letter-spacing:-.04em;margin-top:var(--s3);text-box:trim-both cap alphabetic;margin-left:-.04em}
.card p{color:var(--mute);font-size:15px;line-height:24px;margin-top:var(--s2);max-width:34em}
.svc .card.w8 .ph,.svc .card:not(.w6):not(.w8) .ph{aspect-ratio:4/3}
.svc .card.w8 .ph{aspect-ratio:16/9.6}
@media(max-width:980px){.card,.card.w6,.card.w8{grid-column:span 12}.svc .card .ph{aspect-ratio:4/3!important}}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s5)}
.step{padding:var(--s3);border-radius:var(--r-ui);background:rgba(255,250,243,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.step b{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--light);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.step h4{font-size:clamp(22px,2vw,28px);line-height:1;font-weight:600;letter-spacing:-.035em;margin:var(--s4) 0 var(--s2);text-box:trim-both cap alphabetic}
.step p{color:var(--mute);font-size:15px;line-height:24px}
@media(max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- legacy ---------- */
.legacy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s6)}
.legacy>div:first-child{grid-column:1/span 5}
.legacy>div:last-child{grid-column:7/-1}
.awards,.tl{margin-top:var(--s3)}
.awards li,.tl li{display:grid;grid-template-columns:112px 1fr;column-gap:var(--s3);padding-block:var(--s3);box-shadow:inset 0 -1px 0 var(--line);align-items:baseline}
.awards li:first-child,.tl li:first-child{box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.awards b,.tl b{font-size:var(--t-12);line-height:16px;font-weight:600;letter-spacing:var(--track);color:var(--accent);text-transform:uppercase;font-variant-numeric:lining-nums tabular-nums}
.awards h5,.tl h5{font-size:var(--t-21);line-height:28px;font-weight:500;letter-spacing:-.02em}
.awards h5{text-indent:-.36em}
.awards p,.tl p{color:var(--dim);font-size:14px;line-height:24px;margin-top:var(--s-half)}
.globe{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s4)}
.globe span{height:40px;display:inline-flex;align-items:center;padding-inline:var(--s2);border-radius:var(--pill);box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:14px;font-weight:500;color:var(--mute)}
@media(max-width:980px){.legacy>div:first-child,.legacy>div:last-child{grid-column:1/-1}.awards li,.tl li{grid-template-columns:88px 1fr}}

/* ---------- reviews ---------- */
.gbar{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;padding:var(--s3);border-radius:var(--r-ui);background:var(--card);box-shadow:0 16px 48px -24px rgba(80,40,15,.3)}
.gbar .glogo{width:40px;height:40px;flex:none}
.gbar .gt{display:flex;flex-direction:column}
.gbar .gt b{font-size:18px;line-height:24px}
.gbar .gt span{font-size:13px;line-height:16px;color:var(--dim)}
.stars{display:inline-flex;gap:2px;color:#f2a900}
.stars svg{width:16px;height:16px}
.gbar .acts{margin-left:auto;display:flex;gap:var(--s1);flex-wrap:wrap}
.rgrid{columns:3;column-gap:var(--gut);margin-top:var(--gut)}
.rcard{break-inside:avoid;margin-bottom:var(--gut);background:var(--card);border-radius:var(--r-ui);padding:var(--s3);box-shadow:0 12px 32px -20px rgba(80,40,15,.3)}
.rcard header{display:flex;align-items:center;gap:var(--s2)}
.rcard .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:16px;line-height:1;flex:none}
.rcard .who{min-width:0;flex:1}
.rcard .who b{display:block;font-size:15px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard .who span{display:block;font-size:13px;line-height:16px;color:var(--dim)}
.rcard .g{width:24px;height:24px;flex:none;padding:2px}
.rcard .stars{margin:var(--s2) 0 var(--s1)}
.rcard p{font-size:15px;line-height:24px;color:var(--mute)}
.rcard p.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rcard .rm{margin-top:var(--s1);font-size:14px;line-height:24px;color:var(--accent);font-weight:600}
.rmore{display:flex;justify-content:center;margin-top:var(--s4)}
@media(max-width:980px){.rgrid{columns:2}}
@media(max-width:720px){.rgrid{columns:1}.gbar .acts{margin-left:0;width:100%}.gbar .acts .btn{flex:1}}

/* ---------- contact ---------- */
.cta-big{font-size:var(--t-119);margin-top:var(--s3);max-width:11em}
.cgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s6);margin-top:var(--s7)}
.info{grid-column:1/span 5}
.info dl div{padding-block:var(--s3);box-shadow:inset 0 -1px 0 var(--line-2);display:grid;grid-template-columns:112px 1fr;column-gap:var(--s3);align-items:baseline}
.info dl div:first-child{box-shadow:inset 0 1px 0 var(--line-2),inset 0 -1px 0 var(--line-2)}
.info dt{color:var(--dim)}
.info dd{font-size:18px;line-height:28px;font-weight:500;overflow-wrap:anywhere}
.info dd a:hover{color:var(--accent)}
.map{margin-top:var(--s4);border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;box-shadow:0 24px 48px -32px rgba(80,40,15,.4)}
.map iframe{width:100%;height:100%;border:0;display:block}
form.qf{grid-column:7/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--gut);align-content:start;padding:var(--s4);border-radius:var(--r-ui);background:rgba(255,250,243,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fld{display:flex;flex-direction:column;gap:var(--s1);min-width:0;border:0}
.fld.full{grid-column:1/-1}
.fld label,.fld legend{color:var(--dim)}
.fld legend{margin-bottom:var(--s2)}
.fld input,.fld textarea{background:transparent;border:0;box-shadow:inset 0 -1.5px 0 var(--line-2);height:48px;font-size:20px;line-height:32px;color:var(--ink);outline:none;transition:box-shadow .3s;border-radius:0;width:100%}
.fld textarea{height:auto;min-height:128px;padding-block:var(--s1);resize:vertical}
.fld input:focus,.fld textarea:focus{box-shadow:inset 0 -1.5px 0 var(--accent)}
.fld textarea::placeholder{color:var(--dim)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chips label{cursor:pointer;position:relative}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{height:40px;display:inline-flex;align-items:center;padding-inline:20px;border-radius:var(--pill);box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:14px;font-weight:500;color:var(--mute);transition:all .3s}
.chips label:hover span{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.chips input:checked+span{background:var(--ink);color:var(--light);box-shadow:none}
.chips input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.qf .sub{grid-column:1/-1;display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap}
.qf .sub small{color:var(--dim);font-size:14px;line-height:24px}
.err{color:var(--red);font-size:14px;width:100%}
.err:empty{display:none}
@media(max-width:980px){.info,form.qf{grid-column:1/-1}.info dl div{grid-template-columns:88px 1fr}}
@media(max-width:560px){form.qf{grid-template-columns:1fr;padding:var(--s3)}.qf .sub .btn{width:100%}}

/* ---------- footer ---------- */
footer{background:var(--paper-2);padding-block:var(--s7) var(--s8);color:var(--mute)}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s5)}
.fgrid>div:first-child{grid-column:1/span 5}
.fgrid>div:nth-child(2){grid-column:7/span 2}
.fgrid>div:nth-child(3){grid-column:9/span 2}
.fgrid>div:nth-child(4){grid-column:11/span 2}
.fgrid .logo{color:var(--ink)}
.fgrid h6{font-size:var(--t-12);line-height:16px;font-weight:600;letter-spacing:var(--track);text-transform:uppercase;color:var(--dim);margin-bottom:var(--s3)}
.fgrid ul{display:grid;gap:var(--s1);font-size:15px;line-height:24px;overflow-wrap:anywhere}
.fgrid a:hover{color:var(--ink)}
.fgrid p{font-size:15px;line-height:24px;max-width:28em;margin-top:var(--s3)}
/* the wordmark fills the measure exactly: SVG textLength spreads the spacing, never distorts glyphs */
.wordmark{display:block;width:100%;height:auto;margin-top:var(--s7);fill:rgba(51,38,28,.1);font-family:var(--display);font-weight:600;letter-spacing:-.04em;font-size:106px;user-select:none;overflow:visible}
.fbot{display:flex;justify-content:space-between;gap:var(--s1) var(--s3);flex-wrap:wrap;margin-top:var(--s4);padding-top:var(--s3);box-shadow:inset 0 1px 0 var(--line);color:var(--dim)}
@media(max-width:980px){.fgrid>div:first-child{grid-column:1/-1}.fgrid>div:nth-child(2){grid-column:1/span 4}.fgrid>div:nth-child(3){grid-column:5/span 4}.fgrid>div:nth-child(4){grid-column:9/span 4}}
@media(max-width:560px){.fgrid>div:nth-child(2),.fgrid>div:nth-child(4){grid-column:span 6}.fgrid>div:nth-child(3){grid-column:1/-1}}

/* WhatsApp: 56 on the 8pt grid; the bubble's tail weighs low left, so the glyph shifts .5px up right */
.wa{position:fixed;right:var(--s3);bottom:var(--s3);z-index:90;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(20,90,50,.35);transition:transform .4s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px;transform:translate(.5px,-.5px)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rv{opacity:1;transform:none}
}

/* review photos: square thumbnails on a 4 col grid, tap to open */
.rphotos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1);margin-top:var(--s2)}
.rphotos.n1{grid-template-columns:1fr}.rphotos.n2{grid-template-columns:1fr 1fr}.rphotos.n3{grid-template-columns:repeat(3,1fr)}
.rphotos button{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--paper-2);cursor:zoom-in}
.rphotos.n1 button{aspect-ratio:4/3}
.rphotos img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.rphotos button:hover img{transform:scale(1.06)}

/* ==========================================================================
   v3: REAL headline, uncropped photographs, brand ring, magnetic buttons
   ========================================================================== */

/* REAL work. REAL products. REAL photos.
   One maximal word, letters inverting the colour behind them (mix-blend difference),
   bubbles rising through the strokes; the three nouns stay small and light. */
.real-h{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);margin-top:var(--s4)}
.real{display:block;flex:none;max-width:100%}
.real-svg{display:block;height:clamp(96px,11vw,176px);width:auto;max-width:100%;mix-blend-mode:difference;overflow:visible}
.real-svg .rt{font-family:var(--display);font-size:100px;font-weight:800;letter-spacing:-.055em}
/* the three nouns sit in one row; one at a time swells to a maximal, inverted word while the others shrink to quiet */
.real-rest{display:flex;flex-direction:row;align-items:baseline;flex-wrap:nowrap;column-gap:.32em;height:clamp(52px,6.4vw,100px);font-size:clamp(17px,1.5vw,22px);line-height:1;letter-spacing:-.01em;white-space:nowrap}
.real-rest>span{display:inline-block;font-size:1em;font-weight:300;opacity:.85;
  transition:font-size .9s cubic-bezier(.65,0,.2,1),letter-spacing .9s cubic-bezier(.65,0,.2,1),opacity .6s,font-weight 0s .3s,color .5s}
.real-rest>span.on{font-size:clamp(44px,5.4vw,88px);font-weight:800;letter-spacing:-.05em;opacity:1;color:#fff;mix-blend-mode:difference}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.hero .kicker{margin-top:0}

/* hero frame takes each photograph's proportions (set by script), so nothing is cropped */
.hero-frame{aspect-ratio:var(--ar,1);width:min(100%,calc(68vh * var(--ar,1)));justify-self:end;align-self:center;background:transparent;transition:width .9s var(--ease)}
.hero-frame img{object-fit:contain}
@media(max-width:980px){.hero-frame{aspect-ratio:var(--ar,1);width:min(100%,calc(52vh * var(--ar,1)));justify-self:center}}

/* every product photograph shows whole: natural proportions, no cover-cropping */
.portrait{aspect-ratio:auto}
.portrait img{height:auto}
.card .ph,.svc .card .ph,.svc .card.w8 .ph{aspect-ratio:auto!important;background:transparent}
.card .ph img{height:auto}
.svc{align-items:start}
.frame{aspect-ratio:auto;justify-content:flex-start;gap:var(--s3)}
.frame img{position:static;width:100%;aspect-ratio:auto;height:auto;z-index:auto}
.rphotos button{background:var(--paper)}
.rphotos img{object-fit:contain}

/* filter counts: same size as the label, just quieter */
.filters .ct{font-variant-numeric:tabular-nums;opacity:.5;margin-left:2px}
.filters button.on .ct{opacity:.6}

/* ---------- brand ring ---------- */
.ring-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s6);align-items:center}
.ring{grid-column:1/span 7;position:relative;width:100%;max-width:680px;aspect-ratio:1;justify-self:center}
.ring::before,.ring::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);transform:translate(-50%,-50%);pointer-events:none}
.ring::before{width:90%;height:90%}
.ring::after{width:58%;height:58%}
.ring-core{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--card);box-shadow:0 32px 64px -28px rgba(80,40,15,.4);display:grid;place-items:center;padding:7%;z-index:2}
.ring-core.in{animation:pop .7s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}}
.ring-core img{max-width:100%;max-height:100%;object-fit:contain}
.ring-core .wm{font-size:clamp(16px,1.8vw,24px);line-height:1.1;font-weight:700;letter-spacing:-.03em;text-align:center}
.badge{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:#fff;box-shadow:0 10px 24px -12px rgba(80,40,15,.45);display:grid;place-items:center;padding:12px;overflow:hidden;z-index:1;transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),box-shadow .4s;will-change:transform}
.badge img{max-width:100%;max-height:100%;object-fit:contain}
.badge .wm{font-size:8.5px;line-height:1.05;font-weight:700;letter-spacing:-.01em;text-align:center;text-transform:uppercase}
.badge:hover{box-shadow:0 0 0 2px var(--accent),0 10px 24px -12px rgba(80,40,15,.45)}
.badge.on{width:96px;height:96px;margin:-48px 0 0 -48px;box-shadow:0 0 0 3px var(--accent),0 16px 32px -14px rgba(80,40,15,.5);z-index:3}
.brand-card{grid-column:8/-1;min-height:420px}
.brand-card.in>*{animation:rise .7s var(--ease) both}
.brand-card.in>*:nth-child(2){animation-delay:.05s}.brand-card.in>*:nth-child(3){animation-delay:.1s}.brand-card.in>*:nth-child(4){animation-delay:.15s}.brand-card.in>*:nth-child(5){animation-delay:.2s}.brand-card.in>*:nth-child(6){animation-delay:.25s}
.brand-card h3{font-size:var(--t-50);line-height:1;font-weight:500;letter-spacing:-.045em;margin-top:var(--s2);text-box:trim-both cap alphabetic;margin-left:-.04em}
.brand-card .lbl{margin-top:var(--s4)}
.brand-card .work{font-size:var(--t-21);line-height:28px;margin-top:var(--s1)}
.brand-card blockquote{margin-top:var(--s4);padding-left:var(--s3);box-shadow:inset 2px 0 0 var(--accent)}
.brand-card blockquote p{font-size:18px;line-height:28px;color:var(--mute);text-indent:-.4em}
.brand-card cite{display:block;margin-top:var(--s1);font-style:normal;font-size:14px;font-weight:600}
.brand-card figure{margin-top:var(--s4)}
.brand-card figure img{max-height:260px;width:auto;max-width:100%;border-radius:var(--r);box-shadow:0 24px 48px -28px rgba(80,40,15,.45)}
@media(max-width:980px){.ring,.brand-card{grid-column:1/-1}.brand-card{min-height:0}}
@media(max-width:560px){.badge{width:48px;height:48px;margin:-24px 0 0 -24px;padding:8px}.badge.on{width:64px;height:64px;margin:-32px 0 0 -32px}.badge .wm{font-size:6px}}

/* ---------- magnetic buttons ---------- */
[data-magnet]{position:relative;transition:transform .7s cubic-bezier(.2,1.6,.4,1),background .35s,color .35s,box-shadow .35s}
[data-magnet]::before{content:"";position:absolute;inset:-20px}
[data-magnet].mag{transition:transform .18s ease-out,background .35s,color .35s,box-shadow .35s}
[data-magnet]:hover{transform:none}
[data-magnet]>span{display:inline-block;transition:transform .7s cubic-bezier(.2,1.6,.4,1)}
[data-magnet].mag>span{transition:transform .18s ease-out}
@media(max-width:560px){
  .real-svg{width:100%;height:auto}
  .real-rest{font-size:15px;height:48px}
  .real-rest>span.on{font-size:40px}
}

/* ring v2: dark badges for dark logos, review in the centre */
.badge.is-dark{background:#111}
.badge.is-wm{padding:7px}
.badge .wm{display:block;font-size:9px;line-height:1.05;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:0;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.ring-core{width:44%;padding:9% 8%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s1)}
.ring-core .stars svg{width:14px;height:14px}
.ring-core p{font-size:clamp(12px,1.05vw,15px);line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.ring-core cite{font-style:normal;font-size:12px;line-height:16px;font-weight:600;color:var(--accent)}
.brand-card figure img{max-height:300px}
@media(max-width:560px){.ring-core{width:56%;padding:7%}.ring-core p{font-size:11px;-webkit-line-clamp:6}.ring-core cite{font-size:10px}}

/* review lanes: speech bubbles drifting slowly, scrollable by hand */
.voices{padding-bottom:var(--s6);overflow:hidden}
.lanes{display:grid;gap:var(--s3);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lane{display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-block:var(--s2);cursor:grab;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.lane::-webkit-scrollbar{display:none}
.lane.drag{cursor:grabbing;user-select:none}
.lane-track{display:flex;gap:var(--s3);padding-right:var(--s3);flex:none}
.bub{flex:none;width:320px;padding:var(--s3);border-radius:22px 22px 22px 6px;background:var(--card);box-shadow:0 16px 36px -22px rgba(80,40,15,.45);animation:bob 6s ease-in-out infinite}
.bub:nth-child(2n){border-radius:22px 22px 6px 22px;animation-delay:-2s}
.bub:nth-child(3n){animation-delay:-4s;animation-duration:7.5s}
@keyframes bob{50%{transform:translateY(-6px) rotate(-.4deg)}}
.bub .stars svg{width:13px;height:13px}
.bub p{margin-top:var(--s1);font-size:15px;line-height:22px;color:var(--ink)}
.bub b{display:block;margin-top:var(--s2);font-size:12px;line-height:16px;letter-spacing:var(--track);text-transform:uppercase;color:var(--accent)}
@media(max-width:560px){.bub{width:260px}.bub p{font-size:14px;line-height:21px}}

/* ==========================================================================
   v4 hero: REAL and the cycling word on one line, laid over a bigger photograph
   ========================================================================== */
.hero-grid{align-items:center}
.hero-copy{grid-column:1/span 6;position:relative;z-index:3}
/* the photograph takes cols 6–12 and up to 80% of the screen height, at its own proportions */
.hero-frame{grid-column:6/-1;grid-row:1;justify-self:end;z-index:1;width:min(100%,calc(80svh * var(--ar,1)));transition:width 1.4s var(--ease)}
.hero-copy{grid-row:1}
/* one line: REAL, then the three words; the line may run on over the photograph,
   which is where the inverted letters really show */
.real-h{flex-direction:row;align-items:flex-end;gap:var(--s3);width:max-content;max-width:none;white-space:nowrap}
.real-svg{height:clamp(84px,8.6vw,148px);max-width:none}
.real-rest{height:auto;align-items:baseline;padding-bottom:0;column-gap:.34em}
.real-rest>span{font-size:clamp(15px,1.25vw,19px);font-weight:400;opacity:.78}
.real-rest>span.on{font-size:clamp(34px,3.7vw,62px);font-weight:800;letter-spacing:-.05em;opacity:1;color:inherit;mix-blend-mode:normal}
.hero[data-tone=light] .real-rest>span.on{text-shadow:0 2px 24px rgba(60,25,5,.28)}
/* photographs cross dissolve and drift: the new one slides in from the right while the old one drifts out left */
.hero-frame img{clip-path:none!important;opacity:0;transform:translateX(5%) scale(1.04);filter:blur(12px) saturate(1.35);transition:opacity 1.3s var(--ease),transform 1.8s var(--ease),filter 1.3s var(--ease)}
.hero-frame img.in{opacity:1;transform:none;filter:none}
.hero-frame img.out{opacity:0;transform:translateX(-5%) scale(.97);filter:blur(10px) saturate(1.2)}
.hero-bg .layer{transition:opacity 1.8s var(--ease),transform 2.6s var(--ease)}
@media(max-width:1180px){.real-svg{height:clamp(72px,8vw,110px)}.real-rest>span.on{font-size:clamp(28px,3.3vw,44px)}}
@media(max-width:980px){
  .hero-copy,.hero-frame{grid-column:1/-1;grid-row:auto}
  .hero-frame{order:1;justify-self:center;width:min(100%,calc(46svh * var(--ar,1)))}
  .hero-copy{order:2}
  .real-h{width:auto;flex-wrap:wrap}
}
@media(max-width:560px){
  .real-h{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .real-svg{width:100%;height:auto}
  .real-rest>span{font-size:15px}
  .real-rest>span.on{font-size:36px}
}

/* ring: bigger badges so typed brand names stay legible */
.badge{width:80px;height:80px;margin:-40px 0 0 -40px}
.badge.on{width:104px;height:104px;margin:-52px 0 0 -52px}
@media(max-width:560px){.badge{width:52px;height:52px;margin:-26px 0 0 -26px}.badge.on{width:68px;height:68px;margin:-34px 0 0 -34px}}
/* blend fix: no stacking context on the copy column, so REAL inverts the backdrop and the photograph it crosses */
.hero-copy{z-index:auto;position:static}
.real{position:relative;z-index:2;mix-blend-mode:difference}
.real-svg{mix-blend-mode:normal}
.real-rest{position:relative;z-index:2}
.hero-frame{position:relative;z-index:1}

/* Google source line on quoted reviews */
.gsrc{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:600;color:#5f6368;font-family:Roboto,Arial,var(--text)}
.gsrc .glogo-s{width:16px;height:16px;flex:none}
.gsrc .stars{margin-left:2px}
.gsrc .stars svg{width:12px;height:12px}
.ring-core .gsrc{flex-wrap:wrap;justify-content:center;row-gap:4px}
.bub .gsrc{margin-bottom:var(--s1)}
/* REAL colour: inverted by default; solid on muted mid-tone slides where inversion would lose contrast */
.real{color:#fff;transition:color .8s var(--ease)}
.hero[data-real=solid] .real{mix-blend-mode:normal}
.hero[data-real=solid][data-tone=light] .real{color:var(--light);filter:drop-shadow(0 4px 24px rgba(40,20,5,.22))}
.hero[data-real=solid][data-tone=dark] .real{color:var(--ink)}
/* the quiet words stay quiet but readable on any backdrop */
.real-rest>span{opacity:.92;font-weight:500}
.hero[data-tone=light] .real-rest>span{text-shadow:0 1px 14px rgba(40,20,5,.3)}

/* v5: the rising word matches REAL — same cap height, weight, tracking and inversion.
   --rh is REAL's cap height; Helvetica's cap height is 0.72em, so the word's font size is --rh / 0.72. */
.real-h{--rh:clamp(64px,6.6vw,118px);align-items:last baseline;gap:.22em}
.real-svg{height:var(--rh)}
.real-rest{position:static;z-index:auto;align-items:last baseline}
.real-rest>span{position:relative;z-index:2}
.real-rest>span.on{font-size:calc(var(--rh) / .72);font-weight:800;letter-spacing:-.055em;line-height:.9;opacity:1;color:#fff;mix-blend-mode:difference;text-shadow:none}
.hero[data-real=solid] .real-rest>span.on{mix-blend-mode:normal}
.hero[data-real=solid][data-tone=light] .real-rest>span.on{color:var(--light);filter:drop-shadow(0 4px 24px rgba(40,20,5,.22))}
.hero[data-real=solid][data-tone=dark] .real-rest>span.on{color:var(--ink)}
.real-rest>span{transition:font-size 1s cubic-bezier(.65,0,.2,1),letter-spacing 1s cubic-bezier(.65,0,.2,1),opacity .6s,font-weight 0s .35s,color .5s}
@media(max-width:1180px){.real-h{--rh:clamp(52px,6vw,80px)}}
@media(max-width:980px){.real-h{flex-wrap:nowrap}}
@media(max-width:560px){
  .real-h{--rh:auto;flex-direction:column;align-items:flex-start}
  .real-svg{width:100%;height:auto}
  .real-rest>span.on{font-size:clamp(40px,14vw,64px)}
}

/* ==========================================================================
   v6: brand chain, category tiles, lead pop-up, privacy, cookie bar, floating actions
   ========================================================================== */

/* hero layers built from an uploaded photo (no pre-blurred backdrop): blur it in CSS */
.hero-bg .layer.soft{filter:blur(60px) saturate(1.3);transform:scale(1.2)}
.hero-bg .layer.soft.in{transform:scale(1.15)}

/* ring with three orbits */
.ring::before{width:94%;height:94%}
.ring::after{width:74%;height:74%}
.ring .orbit-3{display:none}
.ring-core{width:40%}
.ring-core .core-name{font-size:12px;line-height:16px;font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);margin-bottom:2px}
.badge{width:64px;height:64px;margin:-32px 0 0 -32px;padding:10px}
.badge.is-big{width:74px;height:74px;margin:-37px 0 0 -37px;box-shadow:0 0 0 1.5px rgba(180,83,42,.35),0 10px 24px -12px rgba(80,40,15,.45)}
.badge.on{width:100px;height:100px;margin:-50px 0 0 -50px}
@media(max-width:560px){.badge,.badge.is-big{width:42px;height:42px;margin:-21px 0 0 -21px;padding:6px}.badge.on{width:60px;height:60px;margin:-30px 0 0 -30px}.ring-core{width:50%}.ring-core .core-name{font-size:9px;line-height:12px}}

/* "We worked for": a moving chain of every brand, two columns drifting upward */
.chain-wrap{grid-column:8/-1;align-self:stretch;display:flex;flex-direction:column;min-height:0}
.chain{position:relative;margin-top:var(--s3);height:560px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.chain-track{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding-bottom:var(--s2);animation:chain 70s linear infinite}
.chain:hover .chain-track{animation-play-state:running}
@keyframes chain{to{transform:translateY(-100%)}}
.ch{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);border-radius:var(--r-ui);background:var(--card);box-shadow:0 10px 28px -20px rgba(80,40,15,.45);cursor:pointer;transition:box-shadow .4s,transform .4s var(--ease)}
.ch:hover{transform:translateY(-2px)}
.ch.on{box-shadow:0 0 0 2px var(--accent),0 16px 36px -20px rgba(80,40,15,.5)}
.ch-mark{flex:none;width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;padding:8px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.ch.is-dark .ch-mark{background:#111}
.ch-mark img{max-width:100%;max-height:100%;object-fit:contain}
.ch-mark.is-wm b{font-size:8px;line-height:1.05;font-weight:700;text-transform:uppercase;text-align:center}
.ch-txt{min-width:0}
.ch-txt b{display:block;font-size:15px;line-height:20px;font-weight:700;letter-spacing:-.01em}
.ch-txt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:18px;color:var(--mute);margin-top:2px}
@media(max-width:980px){.chain-wrap{grid-column:1/-1}.chain{height:440px}}
@media(max-width:560px){.chain-track{grid-template-columns:1fr}.chain{height:380px}}

/* portfolio: category tiles, then a filter bar that sticks under the nav */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2);margin-bottom:var(--s5)}
.cat{display:flex;flex-direction:column;text-align:left;border-radius:var(--r-ui);background:var(--card);overflow:hidden;box-shadow:0 10px 28px -22px rgba(80,40,15,.45);transition:transform .4s var(--ease),box-shadow .4s}
.cat:hover{transform:translateY(-4px)}
.cat.on{box-shadow:0 0 0 2px var(--accent),0 16px 36px -22px rgba(80,40,15,.5)}
.cat-ph{display:block;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.cat-ph img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.cat:hover .cat-ph img{transform:scale(1.05)}
.cat b{display:block;padding:var(--s2) var(--s2) 0;font-size:15px;line-height:20px;font-weight:700}
.cat>span:last-child{display:block;padding:2px var(--s2) var(--s2);font-size:13px;line-height:18px;color:var(--mute)}
.filter-bar{position:sticky;top:0;z-index:20;margin-inline:calc(var(--pad)*-1);padding:var(--s2) var(--pad);background:rgba(244,238,230,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.filter-bar .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.filter-bar .filters::-webkit-scrollbar{display:none}
.filter-bar .filters button{flex:none}
@media(max-width:720px){.cats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:150px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}.cats::-webkit-scrollbar{display:none}}

/* contact call to action */
.cta-card{grid-column:7/-1;align-self:start;padding:var(--s5);border-radius:var(--r-ui);background:rgba(255,250,243,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 24px 64px -32px rgba(80,40,15,.45)}
.cta-t{font-size:var(--t-38);line-height:1.05;font-weight:600;letter-spacing:-.035em}
.cta-s{margin:var(--s2) 0 var(--s4);color:var(--mute)}
.cta-alt{display:flex;gap:var(--s1);margin-top:var(--s3);flex-wrap:wrap}
@media(max-width:980px){.cta-card{grid-column:1/-1;padding:var(--s4)}}

/* review avatars from Google */
img.av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper-2)}
.bub-who{display:flex;align-items:center;gap:var(--s1);margin-top:var(--s2)}
.bub-who img.av,.bub-who span.av{width:28px;height:28px;font-size:12px}
.bub-who b{margin:0}
.bub>b{display:none}

/* footer: back to top */
.linkish{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.totop{display:inline-flex;align-items:center;gap:var(--s1);font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink)}
.totop svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.totop:hover svg{transform:translateY(-3px)}

/* floating actions: social links stack above WhatsApp, back to top shows after scrolling */
.fab{position:fixed;right:var(--s3);bottom:var(--s3);z-index:90;display:flex;flex-direction:column;align-items:center;gap:var(--s1)}
.fab a,.fab button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px -8px rgba(40,20,5,.45);transition:transform .35s var(--ease),opacity .35s}
.fab a:hover,.fab button:hover{transform:scale(1.08)}
.fab svg{width:20px;height:20px}
.fab .fab-wa{width:56px;height:56px;background:#25d366}
.fab .fab-wa svg{width:28px;height:28px;transform:translate(.5px,-.5px)}
.fab-instagram{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.fab-facebook{background:#1877f2}.fab-youtube{background:#ff0000}.fab-linkedin{background:#0a66c2}.fab-x{background:#14171a}.fab-pinterest{background:#e60023}
.fab-top{background:var(--card)!important;color:var(--ink)!important;opacity:0;pointer-events:none;transform:translateY(8px)}
.fab.show-top .fab-top{opacity:1;pointer-events:auto;transform:none}
@media(max-width:560px){.fab{right:var(--s2);bottom:var(--s2)}.fab a,.fab button{width:40px;height:40px}.fab .fab-wa{width:52px;height:52px}}

/* lead pop-up: instant-form style card */
.lead,.pp{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:var(--s2);background:rgba(51,38,28,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease)}
.lead.open,.pp.open{opacity:1}
.lead[hidden],.pp[hidden]{display:none}
.lead-card,.pp-card{position:relative;width:min(440px,100%);max-height:calc(100svh - 32px);overflow:auto;border-radius:20px;background:var(--card);box-shadow:0 40px 100px -30px rgba(40,20,5,.55);padding:var(--s4) var(--s4) var(--s3);transform:translateY(16px) scale(.98);transition:transform .45s var(--ease)}
.lead.open .lead-card,.pp.open .pp-card{transform:none}
.lead-x{position:absolute;top:var(--s2);right:var(--s2);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--paper)}
.lead-x svg{width:18px;height:18px}
.lead-head{display:flex;align-items:center;gap:12px}
.lead-av{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--light);display:grid;place-items:center;font-size:16px;letter-spacing:-.04em}
.lead-av b i{color:var(--accent)}
.lead-brand{font-weight:700;font-size:15px;line-height:20px}
.lead-sub{font-size:13px;line-height:18px;color:var(--mute)}
.lead-prog{height:4px;border-radius:4px;background:var(--paper-2);margin:var(--s3) 0;overflow:hidden}
.lead-prog i{display:block;height:100%;width:8%;background:var(--accent);border-radius:4px;transition:width .5s var(--ease)}
.lstep{border:0;display:grid;gap:var(--s2)}
.lstep h3{font-size:24px;line-height:28px;font-weight:700;letter-spacing:-.03em}
.lhint{font-size:13px;line-height:18px;color:var(--mute);margin-top:-8px}
.lf{display:grid;gap:6px}
.lf span{font-size:13px;line-height:16px;font-weight:600;color:var(--mute)}
.lf input{height:52px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;padding:0 var(--s2);font-size:17px;color:var(--ink);outline:none;transition:border-color .25s,box-shadow .25s}
.lf input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(180,83,42,.14)}
.lq{font-size:13px;font-weight:600;color:var(--mute)}
.lchips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.lchips-col{flex-direction:column}
.lc{position:relative;cursor:pointer}
.lc input{position:absolute;opacity:0;pointer-events:none}
.lc span{display:flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;font-size:15px;font-weight:500;transition:all .2s}
.lc:hover span{border-color:var(--ink)}
.lc input:checked+span{border-color:var(--accent);background:rgba(180,83,42,.08);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}
.lc input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.lnote{font-size:12px;line-height:16px;color:var(--dim)}
.lnav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s3)}
.lnav .btn{min-width:110px}
.lnav[hidden]{display:none}
.lerr{color:var(--red);font-size:14px;line-height:20px;margin-top:var(--s2)}
.lerr:empty{display:none}
.lerr a{color:inherit;font-weight:700}
.ldone{text-align:center;justify-items:center;padding-block:var(--s3)}
.ltick{width:64px;height:64px;border-radius:50%;background:rgba(37,211,102,.14);color:#1a9e4b;display:grid;place-items:center}
.ltick svg{width:32px;height:32px}

/* privacy policy */
.pp-card{width:min(720px,100%);padding:var(--s5)}
.pp-card h2{font-size:var(--t-38);line-height:1.05;font-weight:600;letter-spacing:-.035em;margin-bottom:var(--s3)}
.pp-body h3{font-size:18px;line-height:24px;font-weight:700;margin:var(--s4) 0 var(--s1)}
.pp-body p{color:var(--mute);margin-top:var(--s1)}

/* cookie notice: one small bar */
.cookie{position:fixed;left:var(--s3);bottom:var(--s3);z-index:95;max-width:min(520px,calc(100% - 120px));display:flex;align-items:center;gap:var(--s2);padding:12px 12px 12px var(--s3);border-radius:var(--pill);background:var(--ink);color:var(--light);font-size:13px;line-height:18px;box-shadow:0 16px 40px -16px rgba(40,20,5,.5);opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s var(--ease)}
.cookie.in{opacity:1;transform:none}
.cookie[hidden]{display:none}
.cookie .btn{height:36px;padding-inline:18px;background:var(--light);color:var(--ink)}
@media(max-width:560px){.cookie{left:var(--s2);right:84px;max-width:none;border-radius:16px;padding:10px 10px 10px 14px;font-size:12px}}

/* chain v2: photo-led tiles in two columns moving opposite ways */
.chain{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);height:640px}
.chain-col{overflow:hidden;min-width:0}
.chain-col .chain-track{display:flex;flex-direction:column;gap:var(--s2);padding-bottom:var(--s2);grid-template-columns:none;animation:chain 80s linear infinite}
.chain-col.rev .chain-track{animation-name:chain-rev;animation-duration:95s}
@keyframes chain-rev{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.ch{display:block;padding:0;overflow:hidden}
.ch-ph{display:grid;place-items:center;height:168px;background:var(--paper);overflow:hidden}
.ch-ph img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.ch:hover .ch-ph img{transform:scale(1.05)}
.ch-ph.ch-logo{background:#fff;padding:var(--s4)}
.ch.is-dark .ch-ph.ch-logo{background:#111}
.ch-ph.ch-logo img{max-width:70%;max-height:90px;object-fit:contain}
.ch-ph.is-wm b{font-size:22px;line-height:1.05;font-weight:800;letter-spacing:-.03em;text-align:center;text-wrap:balance}
.ch-foot{display:flex;align-items:center;gap:12px;padding:12px var(--s2) var(--s2)}
.ch-foot .ch-mark{width:40px;height:40px;padding:6px}
.ch-foot .ch-mark.is-wm{background:var(--ink);color:var(--light)}
.ch-foot .ch-mark.is-wm b{font-size:16px}
.ch-txt b{font-size:15px;line-height:20px}
@media(max-width:560px){.chain{height:520px;gap:var(--s1)}.ch-ph{height:120px}.ch-txt span{font-size:12px;line-height:16px}.ch-foot{padding:10px;gap:8px}.ch-foot .ch-mark{width:32px;height:32px}}
.lstep[hidden]{display:none!important}
/* ring: lighter badges now that it carries more brands */
.badge{width:56px;height:56px;margin:-28px 0 0 -28px;padding:8px}
.badge.is-big{width:68px;height:68px;margin:-34px 0 0 -34px}
.badge.on{width:96px;height:96px;margin:-48px 0 0 -48px}
.ring-core{width:36%}
/* centre stays a true circle; long quotes clamp instead of stretching it */
.ring-core{width:36%;height:36%;aspect-ratio:auto;overflow:hidden;padding:4% 5%}
.ring-core p{-webkit-line-clamp:6}
.badge[hidden]{display:none}
@media(max-width:560px){.ring-core{width:58%;height:58%;padding:6%}.ring-core p{font-size:11px;line-height:15px;-webkit-line-clamp:5}.ring-core .gsrc span:not(.stars){display:none}}
@media(max-width:560px){
  .ring::after{width:76%;height:76%}
  .badge,.badge.is-big{width:44px;height:44px;margin:-22px 0 0 -22px;padding:6px}
  .badge.on{width:60px;height:60px;margin:-30px 0 0 -30px}
  .ring-core{width:56%;height:56%}
}

/* ==========================================================================
   v7 hero: bigger photograph, everything on the first screen, 2.5s slides
   ========================================================================== */
.hero{padding-top:calc(80px + var(--s2));padding-bottom:var(--s3);justify-content:stretch}
.hero-grid{flex:1;align-items:center}
.hero-copy{grid-column:1/span 6}
/* the photograph fills the screen height (minus the nav and a margin), at its own proportions */
.hero-frame{grid-column:5/-1;width:min(100%,calc((100svh - 80px - var(--s5)) * var(--ar,1)));max-height:calc(100svh - 80px - var(--s5))}
.hero-dots button.on i{animation-duration:2.5s}
.hero-foot{position:absolute;left:0;right:0;bottom:var(--s3);margin:0;pointer-events:none}
.hero-foot>*{pointer-events:auto}
.hero-cap{display:none}
/* the whole REAL line inverts what is behind it, so every word stays readable over photo or backdrop */
.real-rest>span{font-size:clamp(17px,1.4vw,22px);font-weight:600;opacity:1;color:#fff;mix-blend-mode:difference;text-shadow:none}
.hero[data-tone=light] .real-rest>span{text-shadow:none}
.hero[data-real=solid] .real-rest>span{mix-blend-mode:normal;color:inherit}
.hero[data-real=solid][data-tone=light] .real-rest>span{text-shadow:0 1px 14px rgba(40,20,5,.3)}
.facts{margin-top:var(--s5)}
.hero-cta{margin-top:var(--s5)}
@media(max-height:820px) and (min-width:981px){.facts{margin-top:var(--s4)}.hero-cta{margin-top:var(--s4)}.facts b{font-size:24px;line-height:28px}}
@media(max-width:980px){
  .hero{padding-top:calc(80px + var(--s1))}
  .hero-frame{grid-column:1/-1;width:min(100%,calc(36svh * var(--ar,1)));max-height:36svh}
  .hero-grid{row-gap:var(--s3)}
  .hero-foot{position:static;margin-top:var(--s3)}
}
@media(max-width:560px){
  .hero-frame{width:min(100%,calc(32svh * var(--ar,1)));max-height:32svh}
  .facts{margin-top:var(--s3);grid-template-columns:repeat(3,auto);column-gap:var(--s2)}
  .facts span{display:none}
  .facts b{font-size:18px;line-height:22px}
  .facts li:nth-child(1) b::after{content:" years"}
  .facts li:nth-child(2) b::after{content:" brands"}
  .facts li:nth-child(3) b::after{content:", Chandigarh"}
  .hero-cta{margin-top:var(--s3)}
  .hero-cta .btn{height:48px}
  .real-h{gap:var(--s1)}
  .real-rest{height:44px}
}
/* copy always sits above the photograph; on mid widths the photograph keeps to its own columns */
.hero .kicker,.facts,.hero-cta{position:relative;z-index:2}
@media(max-width:1180px) and (min-width:981px){.hero-frame{grid-column:7/-1}}
@media(max-width:560px){
  .real{width:100%}
  .real-svg{width:100%;height:auto}
  .cookie{padding:8px 8px 8px 14px}
  .cookie p{font-size:11.5px;line-height:15px}
}
@media(max-width:980px){.hero-copy{grid-column:1/-1}}
/* tablets and phones: REAL takes the full measure, the three words sit underneath */
@media(max-width:980px){
  .real-h{flex-direction:column;align-items:flex-start;gap:var(--s1);width:100%}
  .real{width:min(100%,620px)}
  .real-svg{width:100%;height:auto}
  .real-rest>span.on{font-size:clamp(36px,8vw,64px)}
}
/* phones: social buttons join WhatsApp once you scroll past the hero, so they never cover the hero buttons */
@media(max-width:560px){
  .fab .fab-s{display:none}
  .fab.show-top .fab-s{display:grid}
}
/* ring centre: content lives in the square inscribed in the circle (about 70% of its width) */
.ring-core{padding:0;display:grid;place-items:center;overflow:visible}
.core-in{width:72%;height:72%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;overflow:hidden}
.ring-core .core-q{display:block;-webkit-line-clamp:unset;font-size:clamp(12px,1.05vw,15px);line-height:1.4;color:var(--ink);overflow:visible}
@media(max-width:560px){.core-in{width:74%;height:74%;gap:4px}.ring-core .core-q{font-size:12px}}

/* QA: floating actions on phones and tablets: WhatsApp + a "+" that opens the social links */
.fab-more{display:none!important;background:var(--card)!important;color:var(--ink)!important}
.fab-more svg{transition:transform .35s var(--ease)}
@media(max-width:980px){
  .fab .fab-s,.fab.show-top .fab-s{display:none}
  .fab-more{display:grid!important}
  .fab.open .fab-s{display:grid}
  .fab.open .fab-more svg{transform:rotate(45deg)}
}
/* QA: services: very tall photos no longer stretch the grid; shown whole, capped in height */
.card .ph{display:flex;justify-content:center;align-items:center;max-height:460px}
.card .ph img{width:auto;max-width:100%;height:auto;max-height:460px;object-fit:contain}
.svc{align-items:start}
/* cookie note: one line on frosted glass (OK button unchanged) */
.cookie{background:rgba(255,250,243,.28);color:var(--ink);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 12px 32px -14px rgba(40,20,5,.35);max-width:none;width:max-content}
.cookie p{font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.35)}
@media(max-width:560px){.cookie{width:auto}}

/* v8 stacked hero (tablet + phone): photo first and biggest, then REAL, the three words,
   the category, the buttons, then the facts */
@media(max-width:980px){
  .hero{padding-top:calc(80px + var(--s1))}
  .hero-grid{row-gap:var(--s3);align-content:start}
  .hero-frame{order:1;grid-column:1/-1;justify-self:center;width:min(100%,calc(56svh * var(--ar,1)));max-height:56svh}
  .hero-copy{order:2;grid-column:1/-1}
  .real-h{order:1;margin-top:0}
  .hero .kicker{order:2;margin-top:var(--s2)}
  .hero-cta{order:3;margin-top:var(--s3)}
  .facts{order:4;margin-top:var(--s3)}
  .real{width:auto}
  .real-svg{width:auto;height:clamp(56px,9vw,84px)}
}
@media(max-width:560px){
  /* the photograph runs edge to edge */
  .hero-frame{width:min(calc(100% + var(--pad)*2),calc(52svh * var(--ar,1)));max-height:52svh;border-radius:0;margin-inline:calc(var(--pad)*-1)}
  .real-svg{width:auto;height:56px}
  .real-rest{height:auto}
  .real-rest>span.on{font-size:34px}
  .hero .kicker{margin-top:var(--s1)}
  .hero-cta{margin-top:var(--s2)}
  .facts{margin-top:var(--s2)}
}
/* desktop: photograph owns columns 7–12 at full height; text owns 1–6, so they never compete for space */
@media(min-width:981px){.hero-copy{grid-column:1/span 6}.hero-frame{grid-column:7/-1;justify-self:end}}
/* desktop: REAL on its own line, work / products / photos on the line below */
@media(min-width:981px){
  .real-h{flex-direction:column;align-items:flex-start;gap:var(--s2);width:auto}
  .real-svg{height:var(--rh)}
  .real-rest{align-items:last baseline}
  .real-rest>span.on{font-size:calc(var(--rh) * .62)}
}
/* magnetic buttons move as one piece; motion is frame-driven, so no transform transition */
[data-magnet],[data-magnet].mag{transition:background .35s,color .35s,box-shadow .35s!important;will-change:transform}
[data-magnet]>span,[data-magnet].mag>span{transform:none!important;transition:none!important}
/* all floating buttons the same size, WhatsApp included */
.fab .fab-wa{width:44px;height:44px}
.fab .fab-wa svg{width:22px;height:22px}
@media(max-width:560px){.fab .fab-wa{width:40px;height:40px}.fab .fab-wa svg{width:20px;height:20px}}
.fab-threads{background:var(--ink)}

/* photo protection (app.js): invisible watermarked copy over the photo under the pointer */
img{-webkit-user-drag:none}
img:not(.wm-shield){-webkit-touch-callout:none}
.wm-shield{position:absolute;display:block;opacity:0;margin:0;padding:0;border:0;max-width:none;max-height:none;transform:none;user-select:none;-webkit-touch-callout:default}

/* v9: tighter sections, full-width two-line headlines, the 1,000+ brands figure, even category grid */
.brands{padding-top:var(--s7)}
.brands .sec-head,.voices .sec-head,.numbers .sec-head{margin-bottom:var(--s5)}
.bstat{grid-column:8/-1;display:flex;flex-direction:column;gap:var(--s2);color:var(--ink)}
.bstat b{font-size:clamp(72px,9vw,148px);line-height:.86;font-weight:700;letter-spacing:-.045em;text-box:trim-both cap alphabetic}
.bstat span{font-size:clamp(19px,1.7vw,25px);line-height:1.3;font-weight:500;max-width:19em}
.voices{padding-top:var(--s7)}
.numbers{padding-block:var(--s7)}
.voices .sec-head>div,.numbers .sec-head>div{grid-column:1/-1}
.wide2{font-size:min(7.3vw,132px);line-height:.96;letter-spacing:-.035em;max-width:none;white-space:nowrap}
@media(max-width:980px){.bstat{grid-column:1/-1}.brands .sec-head{row-gap:var(--s4)}}

.cats{grid-template-columns:repeat(5,minmax(0,1fr))} /* All work (2x2) + 11 categories = three full rows of five */
.cat.all{grid-column:span 2;grid-row:span 2}
.cat.all .cat-ph{flex:1;aspect-ratio:auto;min-height:0;position:relative}
.pie{position:absolute;inset:0;width:100%;height:100%;display:block}
.pie .sl{transform-origin:50px 50px;transition:transform .9s var(--ease),opacity .9s var(--ease);transition-delay:calc(var(--i)*70ms)}
.cats:not(.in) .pie .sl{opacity:0;transform:rotate(-24deg) scale(.6)}
.cat.all:hover .pie .sl{transform:scale(1.03)}
.pie .sep line{stroke:var(--card);stroke-width:.7}
.pie .hub{fill:var(--card)}
@media(max-width:720px){.cats{grid-template-columns:none;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:150px}.cat.all{grid-column:span 2;grid-row:span 2}}

/* hero previous / next */
.hero-nav{display:flex;gap:var(--s1)}
.hero-nav button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:inherit;border:1.5px solid currentColor;background:transparent;transition:background .3s,color .3s,transform .3s var(--ease)}
.hero-nav button:hover{background:currentColor}
.hero-nav button:hover svg{stroke:var(--paper)}
.hero[data-tone=light] .hero-nav button:hover svg{stroke:var(--ink)}
.hero-nav button:active{transform:scale(.94)}
.hero-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){.hero-nav button{width:40px;height:40px}}

/* v10: on laptops the brands heading, figure, ring and "We worked for" grid share one screen */
@media(min-width:981px){
  .brands{padding-top:var(--s5)}
  .brands .sec-head{margin-bottom:var(--s3);row-gap:0}
  .brands .h2{font-size:clamp(36px,3.7vw,60px);max-width:14em}
  .brands .bstat{flex-direction:row;align-items:flex-end;gap:var(--s3)}
  .brands .bstat b{font-size:clamp(48px,4.8vw,80px)}
  .brands .bstat span{font-size:clamp(15px,1.15vw,18px);max-width:17em}
  .brands .ring{max-width:none} /* sized in app.js: the largest circle that fits the window under the heading */
  .brands .chain{height:min(640px,calc(100svh - 340px))}
}
/* logo bubbles shrink with the ring, so a smaller ring on a short laptop screen never overlaps them */
@media(min-width:981px){
  .brands .badge{width:calc(56px*var(--k,1));height:calc(56px*var(--k,1));margin:calc(-28px*var(--k,1)) 0 0 calc(-28px*var(--k,1));padding:calc(8px*var(--k,1))}
  .brands .badge.is-big{width:calc(68px*var(--k,1));height:calc(68px*var(--k,1));margin:calc(-34px*var(--k,1)) 0 0 calc(-34px*var(--k,1))}
  .brands .badge.on{width:calc(96px*var(--k,1));height:calc(96px*var(--k,1));margin:calc(-48px*var(--k,1)) 0 0 calc(-48px*var(--k,1))}
  .brands .badge .wm{font-size:max(6.5px,calc(9px*var(--k,1)))}
}
/* keep the hero photo clear of the floating social buttons (they sit 24px in, 44px wide) */
@media(min-width:981px){.hero-frame{margin-right:max(0px,calc(var(--s3) + 44px + var(--s2) - var(--pad)))}}
.fab-google{background:#fff;box-shadow:0 0 0 1px rgba(60,40,20,.12),0 8px 18px -10px rgba(60,40,20,.5)}.fab-google svg{width:22px;height:22px}
/* phones and tablets: the photo's row keeps one height whatever the photo's shape, so the text and buttons below stay put */
@media(max-width:980px){.hero-grid{grid-template-rows:56svh auto}.hero-frame{align-self:center}}
@media(max-width:560px){.hero-grid{grid-template-rows:52svh auto}}
@media(min-width:981px){.hero-copy{display:flex;flex-direction:column}.hero-copy>.facts{margin-top:auto;padding-top:var(--s5)}}

/* image viewer: the whole photo always fits (Safari ignores % heights inside the grid row), zoom and pan */
.lb-stage{overflow:hidden;touch-action:none}
.lb-stage img{max-width:100%;max-height:calc(100svh - 160px - var(--s3));width:auto;height:auto;transform-origin:center;transition:opacity .4s,transform .25s var(--ease);cursor:zoom-in;user-select:none;-webkit-user-select:none}
.lb.zoomed .lb-stage img{cursor:grab;border-radius:0;box-shadow:none}
.lb.zoomed .lb-stage img:active{cursor:grabbing}
.lb.zoomed .lb-nav{opacity:0;pointer-events:none}
.lb-tools{display:flex;align-items:center;gap:var(--s1)}
.lb-z{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);display:grid;place-items:center;background:var(--card);transition:background .3s,color .3s}
.lb-z:hover{background:var(--ink);color:var(--light)}
@media(max-width:720px){.lb-stage img{max-height:calc(100svh - 160px)}}

/* logo: the camera lockup, drawn as SVG in the page's text colour (camera a lighter grey) */
.logo{display:block;line-height:0}
.logo svg{display:block;height:46px;width:auto;--logo-cam:color-mix(in srgb,currentColor 42%,transparent)}
.fgrid .logo svg{height:84px}
.hero-logo{line-height:0;margin-bottom:var(--s3)}
.hero-logo svg{display:block;width:clamp(140px,min(22svh,16vw),240px);height:auto;--logo-cam:color-mix(in srgb,currentColor 45%,transparent)}
/* on desktop the big lockup in the hero is the first thing read; the small nav copy appears once you scroll */
@media(min-width:981px){.nav:not(.solid) .logo{opacity:0;pointer-events:none}.nav .logo{transition:opacity .4s var(--ease)}}
@media(max-width:980px){.hero-logo{display:none}.logo svg{height:40px}}
/* short laptop screens: no room for both, so the lockup moves to the nav and REAL keeps its size */
@media(min-width:981px) and (max-height:760px){.hero-logo{display:none}.nav:not(.solid) .logo{opacity:1;pointer-events:auto}}
/* the logo is the first read: large at the top-left on arrival, settling to its normal size once you scroll.
   (replaces the separate hero lockup, which left REAL too little room on laptop screens) */
.hero-logo{display:none!important}
.nav:not(.solid) .logo{opacity:1!important;pointer-events:auto!important}
.nav .wrap{transition:height .5s var(--ease)}
.nav .logo svg{transition:height .5s var(--ease)}
@media(min-width:981px){
  .nav:not(.solid) .logo svg{height:clamp(50px,7svh,64px);--logo-cam:color-mix(in srgb,currentColor 55%,transparent)}
  /* the bar keeps its original 80px; the big arrival logo hangs from the top-left corner over the hero */
  .nav:not(.solid) .logo{align-self:flex-start;margin-top:10px}
}
@media(max-width:980px){.nav:not(.solid) .logo svg{height:54px}}

/* name set beside the camera logo (nav and footer) */
.logo{display:flex;align-items:center;gap:var(--s2);line-height:normal}
.logo .logo-name{display:flex;flex-direction:column;gap:6px;opacity:1;font-size:inherit;line-height:1;letter-spacing:normal;text-transform:none;font-weight:inherit} /* undo the old text wordmark's span styles */
.logo-name b{font-size:30px;line-height:1;font-weight:500;letter-spacing:-.015em}
.logo .logo-name span{font-size:10px;line-height:1;font-weight:600;letter-spacing:.34em;text-transform:uppercase;opacity:.8}
@media(min-width:981px){.nav:not(.solid) .logo-name b{font-size:clamp(32px,3.9vw,58px)}.nav:not(.solid) .logo-name span{font-size:clamp(11px,1vw,15px)}}
.fgrid .logo-name b{font-size:30px}
@media(max-width:560px){.logo-name b{font-size:20px}.logo-name span{font-size:8.5px;letter-spacing:.28em}.logo{gap:var(--s1)}}

/* the name reads as a wordmark: GAUTAM in capitals, as tall as the camera beside it */
.logo .logo-name b{text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.logo .logo-name span{letter-spacing:.42em}
/* progress lines stretch to share the width they are given (set in app.js) */
.hero-dots{min-width:0}
.hero-dots button{flex:1 1 0;width:auto;min-width:6px;max-width:40px}

/* the photographer: portrait beside his story, awards and training below */
.bio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--s5);align-items:center;margin-bottom:var(--s7)}
.bio-ph{grid-column:1/span 5;margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px -40px rgba(80,40,15,.5);aspect-ratio:893/1200;background:var(--paper-2)}
.bio-ph img{width:100%;height:100%;object-fit:cover;display:block}
.bio-txt{grid-column:7/-1}
.bio-name{font-size:var(--t-89);line-height:.95;font-weight:600;letter-spacing:-.045em;margin-top:var(--s2);text-box:trim-both cap alphabetic}
.bio-role{margin-top:var(--s3);font-size:var(--t-21);line-height:1.35;color:var(--mute)}
.bio-q{margin:var(--s5) 0 0;padding-left:var(--s3);box-shadow:inset 2px 0 0 var(--accent)}
.bio-q p{font-size:clamp(20px,1.8vw,26px);line-height:1.35;font-weight:500;letter-spacing:-.015em;text-indent:-.4em}
.bio-body{margin-top:var(--s4);display:grid;gap:var(--s2);max-width:36em}
.bio-body p{font-size:17px;line-height:28px;color:var(--ink);opacity:.86}
.bio-txt .btn{margin-top:var(--s5)}
@media(max-width:980px){.bio-ph,.bio-txt{grid-column:1/-1}.bio-ph{max-width:520px}.bio{margin-bottom:var(--s6)}}
@media(max-width:560px){.bio-body p{font-size:16px;line-height:26px}}
@media(max-width:980px){.nav .logo svg,.nav:not(.solid) .logo svg{height:44px}.nav .logo .logo-name b{font-size:31px}.nav .logo .logo-name span{font-size:10.5px;letter-spacing:.36em}}
@media(max-width:380px){.nav .logo .logo-name b{font-size:26px}.nav .logo .logo-name span{font-size:9px}}
/* short laptop windows: a slightly smaller brands heading leaves more height for the ring */
@media(min-width:981px){
  .brands .h2{font-size:clamp(30px,min(3.7vw,6.4svh),60px)}
  .brands .bstat b{font-size:clamp(40px,min(4.8vw,8.4svh),80px)}
}
@media(min-width:981px) and (max-height:700px){.brands{padding-top:var(--s4)}.brands .sec-head{margin-bottom:var(--s2)}}

/* the name carries the same visual weight as REAL: the same extra-bold capitals, set large */
.logo .logo-name b{font-weight:800;letter-spacing:-.005em}
.logo .logo-name span{font-weight:700}
@media(min-width:981px){
  .nav:not(.solid) .logo-name b{font-size:clamp(36px,4.6vw,68px)}
  .nav:not(.solid) .logo-name span{font-size:clamp(11.5px,1.12vw,16.5px);letter-spacing:.5em}
  .nav:not(.solid) .logo svg{height:clamp(56px,7.6svh,72px)}
}

/* GAUTAM drawn like REAL (app.js): the svg is exactly cap height, so 0.72em of the name's font size */
.logo .logo-name b{display:block;line-height:0}
.nm-svg{display:block;height:.72em;width:auto;overflow:visible}
.nm-svg .nt{font-family:var(--display);font-size:100px;font-weight:800;letter-spacing:-.01em}
/* PHOTOGRAPHY: heavier, optically centred under GAUTAM (the trailing letter space is balanced on the left) */
.logo .logo-name{align-items:center;gap:.3em}
.logo .logo-name span{font-weight:800;opacity:.85;padding-left:.5em;text-align:center}
@media(min-width:981px){
  .nav:not(.solid) .logo-name b{font-size:clamp(40px,5vw,76px)}
  .nav:not(.solid) .logo-name span{font-size:clamp(12px,1.2vw,18px)}
}
/* GAUTAM cap height, set directly (about 12% up on the previous text size) */
.logo .nm-svg{height:24px}
.fgrid .logo .nm-svg{height:24px}
@media(min-width:981px){.nav:not(.solid) .logo .nm-svg{height:clamp(31px,3.75vw,55px)}}
@media(max-width:980px){.nav .logo .nm-svg{height:26px}}
@media(max-width:380px){.nav .logo .nm-svg{height:22px}}

/* menu button: three plain lines (no ring); turns into a cross when open */
.burger{box-shadow:none;border-radius:8px}
.burger i{left:12px;right:12px;height:2px;border-radius:2px}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:23px}.burger i:nth-child(3){top:30px}
.burger i:nth-child(2){transition:opacity .25s,transform .4s var(--ease)}
.menu-open .burger i:nth-child(1){top:23px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0;transform:scaleX(.4)}
.menu-open .burger i:nth-child(3){top:23px;transform:rotate(-45deg)}

/* ============ phones only: lighter text, a top bar clear of the Dynamic Island, compact reviews ============ */
@media(max-width:720px){
  .nav .wrap{padding-top:max(14px,env(safe-area-inset-top));height:calc(80px + max(14px,env(safe-area-inset-top)))}
  .hero{padding-top:calc(92px + var(--s1) + env(safe-area-inset-top))}
  .mmenu{padding-top:calc(96px + env(safe-area-inset-top))}

  /* long text reads lighter: smaller, a touch tighter, words a little further apart */
  body{word-spacing:.05em}
  .statement{font-size:24px;line-height:1.18;letter-spacing:-.018em;word-spacing:.06em}
  .lede{font-size:15px;line-height:22px;letter-spacing:0}
  .bio-body p,.bio-role{font-size:15px;line-height:22px}
  .bio-q p{font-size:18px;line-height:1.3}
  .rcard p{font-size:14px;line-height:21px}
  .card p,.svc p{font-size:14px;line-height:21px}

  /* "So many 5-star reviews, we stopped counting." and all three lanes fit on one screen */
  .voices{padding-top:var(--s5);padding-bottom:var(--s4)}
  .voices .sec-head{margin-bottom:var(--s3)}
  .lanes{gap:var(--s1)}
  .lane{padding-block:6px}
  .lane-track{gap:var(--s2)}
  .bub{width:210px;padding:12px 14px;border-radius:16px 16px 16px 5px}
  .bub:nth-child(2n){border-radius:16px 16px 5px 16px}
  .bub .stars svg{width:10px;height:10px}
  .bub p{margin-top:4px;font-size:12.5px;line-height:17px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .bub b{margin-top:8px;font-size:9.5px;line-height:12px}
}
@media(max-width:720px){
  /* review lanes, compact enough that the heading and all three rows share one screen */
  .lanes .bub{width:200px;padding:10px 12px}
  .lanes .bub .gsrc{font-size:10.5px;gap:4px;line-height:14px}
  .lanes .bub .gsrc svg.glogo-s{width:11px;height:11px}
  .lanes .bub .gsrc .stars svg{width:9px;height:9px}
  .lanes .bub p{margin-top:5px;font-size:12px;line-height:16px;-webkit-line-clamp:3}
  .lanes .bub .bub-who{margin-top:7px;gap:6px}
  .lanes .bub .bub-who .av{width:20px;height:20px;font-size:10px}
  .lanes .bub .bub-who b{margin-top:0;font-size:9px;line-height:12px}
  .statement{font-size:21px;line-height:1.22}
}
/* phones: GAUTAM's own size must outrank the camera icon's "svg" height rules */
@media(max-width:980px){.nav .logo .logo-name .nm-svg{height:27px}}
@media(max-width:380px){.nav .logo .logo-name .nm-svg{height:23px}}
/* phones: as large as you saw it, but never wide enough to push the menu button off screen */
@media(max-width:980px){.nav .logo .logo-name .nm-svg{height:clamp(24px,9.4vw,40px)}}
@media(max-width:380px){.nav .logo .logo-name .nm-svg{height:clamp(22px,9vw,30px)}}
.burger{flex:none}.nav .logo{min-width:0;flex:0 1 auto}
.logo>svg{flex:none}
@media(max-width:380px){.nav .logo .logo-name .nm-svg{height:clamp(20px,7.8vw,28px)}}
/* performance: card bobbing runs only in rows that are on screen */
.lane:not(.live) .bub{animation-play-state:paused}
.chain:not(.live) .chain-track{animation-play-state:paused}

/* brands ring: logos orbit by CSS (compositor), start angle and radius per logo set in app.js */
@keyframes orbit{
  from{transform:rotate(var(--a0)) translateX(var(--r)) rotate(calc(-1 * var(--a0)))}
  to{transform:rotate(calc(var(--a0) + 360deg)) translateX(var(--r)) rotate(calc(-1 * var(--a0) - 360deg))}
}
.ring .badge{transform:rotate(var(--a0,0deg)) translateX(var(--r,0px)) rotate(calc(-1 * var(--a0,0deg)));will-change:transform}
.ring:not(.live) .badge{animation-play-state:paused!important}
/* performance: review cards outside the visible part of a row are not drawn (identical look, far less paint) */
.lanes .bub{content-visibility:auto;contain-intrinsic-size:auto 320px auto 220px}
.lane-track{contain:layout paint}
@media(max-width:720px){.lanes .bub{contain-intrinsic-size:auto 200px auto 130px}}
/* founder note, moved into the photographer section */
.bio-founded{margin-top:var(--s4);font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--mute);max-width:36em}
.bio-founded b{color:var(--ink)}
.bio-sign{margin-top:var(--s4)}
@media(max-width:720px){.bio-founded{font-size:15px;line-height:22px}}

/* calmer type scale: headings and big figures about a third smaller (the hero's REAL is sized separately) */
:root{
  --t-119:clamp(34px,4.9vw,72px);
  --t-89:clamp(30px,4vw,58px);
  --t-67:clamp(24px,3.1vw,44px);
  --t-50:clamp(26px,2.6vw,38px);
}
.wide2{font-size:var(--t-119);white-space:normal;line-height:1.02}