[hidden]{display:none!important}
/* =========================================================================
   The Light — Media Solutions · main stylesheet
   Look: approved Main.html (light theme). Type & motifs: portfolio "FINAL 10".
   Sections: 1 fonts · 2 tokens · 3 base · 4 layout · 5 header/nav · 6 buttons
             7 hero · 8 sections (home) · 9 cards/work · 10 services · 11 about
             12 contact/form · 13 lightbox · 14 footer · 15 motion · 16 responsive
   ========================================================================= */

/* 1 ─ fonts (self-hosted, subset Latin) ---------------------------------- */
@font-face{font-family:"SF Pro Display Web";src:url(../fonts/sfpro-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SF Pro Display Web";src:url(../fonts/sfpro-medium.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"SF Pro Display Web";src:url(../fonts/sfpro-light-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"SF Pro Display Web";src:url(../fonts/sfpro-semibold-italic.woff2) format("woff2");font-weight:500 600;font-style:italic;font-display:swap}
@font-face{font-family:"SF Pro Display Web";src:url(../fonts/sfpro-heavy-italic.woff2) format("woff2");font-weight:700 900;font-style:italic;font-display:swap}
@font-face{font-family:"SF Pro Display Head";src:url(../fonts/sfpro-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibmplex-var.woff2) format("woff2");font-weight:100 700;font-stretch:85% 100%;font-style:normal;font-display:swap}

/* 2 ─ tokens -------------------------------------------------------------- */
:root{
  --y:#ffdd15;            /* sun */
  --k:#231f20;            /* ink */
  --k2:#2c2728;           /* ink, raised */
  --w:#fff;
  --paper:#f4f4f4;
  --ph:#e6e6e6;
  --mute:#6b6667;
  --body2:#5d5859;
  --grey:#c6c5c5;         /* logo "light" grey */
  --line:rgba(35,31,32,.16);
  --line2:rgba(35,31,32,.25);
  --line-inv:rgba(255,255,255,.16);
  --pad:clamp(20px,5vw,72px);
  --sec:clamp(72px,11vw,150px);
  --gap:clamp(32px,7vw,112px);
  --max:1440px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --f-ui:"SF Pro Display Web",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","SF Pro Display Web",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --header-h:72px;
  --f-head:"SF Pro Display Head",-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif; /* headings: Medium face + synthesized bold, as in the original Main.html look */
  --fi:normal;            /* display-type style (set to italic to bring the italic headings back) */
}

body.home{--fi:normal}

/* 3 ─ base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px);-webkit-text-size-adjust:100%;font-synthesis:none}
body{font-family:var(--f-body);font-size:17px;line-height:1.6;color:var(--k);background:var(--w);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img,video,svg,canvas,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--y);outline-offset:3px}
::selection{background:var(--y);color:var(--k)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--y);color:var(--k);padding:10px 16px;border-radius:99px;font-family:var(--f-ui);font-weight:500;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* type roles */
h1,h2,h3,h4,.display{font-family:var(--f-head)}
.t-ui{font-family:var(--f-ui)}
h4{font-weight:500}
h1,h2,h3,.display,.st b,.st span,.wwd-title,.journey h2,.book-title{font-synthesis:weight}
.display,h1,h2{font-style:var(--fi);letter-spacing:-.025em}
h1{font-weight:800;font-size:clamp(46px,8.4vw,128px);line-height:.94;letter-spacing:-.035em}
h2{font-weight:700;font-size:clamp(34px,5vw,66px);line-height:1.03;max-width:17ch}
h3{font-weight:500;font-size:clamp(22px,2.4vw,32px);line-height:1.15;letter-spacing:-.015em}
.lead{font-family:var(--f-body);font-size:clamp(19px,2vw,27px);line-height:1.38;font-weight:500;letter-spacing:-.008em;max-width:34ch}
.sub{color:var(--mute);max-width:48ch;font-size:clamp(16px,1.45vw,19px)}
.prose p{color:var(--body2);max-width:60ch}
.prose p+p{margin-top:1em}
.mute{color:var(--mute)}
.label{font-family:var(--f-ui);font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--mute);display:flex;align-items:center;gap:10px}
.label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--y);flex:none}
.num-dec{font-family:var(--f-ui);font-style:var(--fi);color:var(--y)}

/* 4 ─ layout -------------------------------------------------------------- */
.sec{padding:var(--sec) var(--pad);position:relative}
.sec--tight{padding-block:clamp(48px,7vw,96px)}
.sec--paper{background:var(--paper)}
.sec--ink{background:var(--k);color:var(--w)}
.sec--ink .sub,.sec--ink .mute{color:#a8a3a4}
.wrap{max-width:var(--max);margin-inline:auto;position:relative}
.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap)}
.split--rev{grid-template-columns:7fr 5fr}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.head+*{margin-top:clamp(40px,6vw,80px)}
.hair{border-top:1px solid var(--line)}

/* 5 ─ header / nav -------------------------------------------------------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;padding:14px var(--pad);padding-top:calc(14px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);transition:transform .45s var(--ease)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hwrap{max-width:var(--max);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:24px}
.site-header.is-hidden{transform:translateY(-100%)}
.brand{display:block;flex:none;position:relative;z-index:2}
.brand img{height:44px;width:auto}
.nav{display:flex;gap:clamp(18px,3vw,40px);align-items:center;font-family:var(--f-ui)}
.nav a{text-decoration:none;font-size:15px;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .25s}
.nav a:hover,.nav a[aria-current=page]{border-color:var(--y)}
.nav .cta{background:var(--y);color:var(--k);padding:9px 18px;border-radius:99px;border:0;transition:background .25s,color .25s}
.nav .cta:hover{background:var(--k);color:var(--w)}
.menu-btn{display:none;background:none;border:1px solid var(--line2);color:var(--k);border-radius:99px;padding:8px 16px;font-family:var(--f-ui);font-size:14px;font-weight:500;cursor:pointer}

/* 6 ─ buttons & links ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--y);color:var(--k);padding:15px 26px;border-radius:99px;text-decoration:none;font-family:var(--f-ui);font-weight:500;font-size:16px;border:0;cursor:pointer;transition:background .25s,color .25s,transform .25s;will-change:transform}
.btn:hover{background:var(--k);color:var(--w)}
.btn--lg{padding:20px 34px;font-size:19px;gap:14px}
.btn--lg .arr{width:22px;height:22px}
.btn--ink{background:var(--k);color:var(--w)}
.btn--ink:hover{background:var(--y);color:var(--k)}
.btn--line{background:transparent;border:1px solid var(--line2)}
.btn--line:hover{background:var(--k);border-color:var(--k)}
.sec--ink .btn--line{border-color:var(--line-inv);color:var(--w)}
.sec--ink .btn--line:hover{background:var(--y);color:var(--k);border-color:var(--y)}
.btn .arr{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.link{font-family:var(--f-ui);font-weight:500;color:inherit;text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:3px;text-underline-offset:5px;transition:text-decoration-color .25s}
.link:hover{text-decoration-color:currentColor}

/* "eye" — the portfolio's white view-bar, as a pill that opens media */
.eye{display:inline-flex;align-items:center;gap:0;height:44px;padding:0 13px;border-radius:99px;background:#f5f5f4;color:var(--k);border:0;cursor:pointer;font-family:var(--f-ui);font-size:14px;font-weight:500;text-decoration:none;overflow:hidden;white-space:nowrap;transition:gap .4s var(--ease),padding .4s var(--ease),background .25s}
.eye svg{width:24px;height:24px;flex:none}
.eye span{max-width:0;opacity:0;transition:max-width .45s var(--ease),opacity .3s}
.eye:hover,.eye:focus-visible,.card:hover .eye{gap:10px;padding:0 18px 0 13px;background:var(--y)}
.eye:hover span,.eye:focus-visible span,.card:hover .eye span{max-width:180px;opacity:1}
.eye--bar{width:100%;max-width:520px;justify-content:flex-start;height:48px;border-radius:14px;padding:0 16px}
.eye--bar span{max-width:none;opacity:1;margin-left:12px}
.eye--bar:hover{padding:0 16px}

/* 7 ─ hero ---------------------------------------------------------------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--header-h) + 48px) var(--pad) clamp(28px,4vw,48px);position:relative;overflow:hidden;background:var(--w)}
.hero .wrap{width:100%}
.sun{position:absolute;width:min(62vw,720px);aspect-ratio:1;border-radius:50%;background:var(--y);right:-8vw;top:12vh;opacity:0;animation:rise 1.6s .1s var(--ease) forwards;will-change:transform}
@keyframes rise{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:none}}
.sunwrap{position:absolute;width:min(62vw,720px);aspect-ratio:1;right:-8vw;top:12vh;will-change:transform}
.sunwrap .sun{inset:0;right:auto;top:auto;width:100%}
.waves{position:absolute;left:-65%;top:-65%;width:230%;max-width:none;height:auto;pointer-events:none;color:#e9b900;opacity:.7}
.waves path,.waves ellipse,.waves circle{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
.hero h1{position:relative;font-size:clamp(56px,11.5vw,172px);line-height:.9;font-weight:800;letter-spacing:-.04em}
.hero h1 span{display:block;opacity:.22;animation:lit .9s forwards}
.hero h1 span:nth-child(1){animation-delay:.5s}
.hero h1 span:nth-child(2){animation-delay:1.1s}
.hero h1 span:nth-child(3){animation-delay:1.7s}
@keyframes lit{to{opacity:1}}
.hero-meta{position:absolute;top:calc(var(--header-h) + 28px);left:max(var(--pad),calc((100% - var(--max))/2));right:max(var(--pad),calc((100% - var(--max))/2));display:flex;justify-content:space-between;gap:16px;font-family:var(--f-ui);font-size:13px;font-weight:500;color:var(--mute);letter-spacing:.02em}
.tc{font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:8px}
.tc i{width:8px;height:8px;border-radius:50%;background:#e5322d;animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.hero-foot{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:clamp(32px,5vw,64px);padding-top:24px;border-top:1px solid var(--line)}
.hero-foot p{max-width:44ch;font-size:clamp(18px,1.6vw,21px)}
/* inner-page hero (smaller) */
.phero{padding:calc(var(--header-h) + clamp(72px,10vw,140px)) var(--pad) clamp(56px,8vw,110px);position:relative;overflow:hidden}
.phero h1{max-width:14ch;position:relative}
.phero .sub{margin-top:clamp(20px,3vw,32px);position:relative}
.phero .sun{width:min(46vw,520px);right:-6vw;top:auto;bottom:calc(min(46vw,520px) * -.42)}
.phero .crumb{margin-bottom:clamp(20px,3vw,36px);position:relative}

/* 8 ─ home sections ------------------------------------------------------- */
/* stats band */
.stats{background:var(--y);color:var(--k);padding:clamp(40px,5.5vw,72px) var(--pad)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.st{padding:0 clamp(12px,2vw,32px);border-left:1px solid rgba(35,31,32,.35)}
.st:first-child{border-left:0;padding-left:0}
.st b{display:block;font-family:var(--f-head);font-weight:800;font-size:clamp(52px,6.4vw,108px);line-height:.95;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.st span{display:block;margin-top:14px;font-family:var(--f-head);font-size:clamp(14px,1.3vw,18px);font-weight:600;line-height:1.3}
.sec--ink .stats,.stats--ink{background:var(--k);color:var(--w)}
.stats--ink .st{border-color:var(--line-inv)}

/* outline velocity marquee */
.velo{overflow:hidden;padding-block:clamp(28px,4vw,56px);border-block:1px solid var(--line);background:var(--w)}
.velo__track{display:flex;width:max-content;will-change:transform}
.velo__item{font-family:var(--f-ui);font-style:var(--fi);font-weight:300;font-size:clamp(64px,11vw,176px);line-height:1;letter-spacing:-.03em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(35,31,32,.55);padding-right:.35em;display:flex;align-items:center;gap:.35em}
.velo__item i{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--y);-webkit-text-stroke:0}

/* intro, restored from Main.html: "Light is where every idea begins." */
.about__grid{display:grid;grid-template-columns:6fr 6fr;gap:clamp(32px,7vw,112px)}
.about h2{max-width:none;font-size:clamp(32px,4vw,56px)}
.about__lead{font-family:var(--f-ui);font-size:clamp(20px,2.2vw,30px);line-height:1.35;letter-spacing:-.01em;font-weight:500}
.about__body{font-family:var(--f-ui);margin-top:1.2em;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--body2);max-width:56ch}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(36px,4.5vw,56px);padding-top:24px;border-top:1px solid var(--line2)}
.vals b{display:block;font-family:var(--f-ui);font-weight:500;font-size:17px;margin-bottom:6px}
.vals span{display:block;font-family:var(--f-ui);font-size:14px;line-height:1.5;color:var(--body2)}

/* "The Light × Humanitarian Communication" (no longer on the home page) */
.xhead{font-weight:600;font-size:clamp(38px,5.6vw,80px);line-height:1;max-width:none;position:relative}
.xhead .a{display:block}
.xhead .b{display:block;margin-left:clamp(60px,15vw,230px)}
.xmark{position:absolute;left:clamp(150px,22vw,330px);top:-.32em;width:.95em;height:.95em;z-index:-1}
.xmark::before,.xmark::after{content:"";position:absolute;left:50%;top:50%;width:118%;height:30%;background:var(--y);transform:translate(-50%,-50%) rotate(45deg)}
.xmark::after{transform:translate(-50%,-50%) rotate(-45deg)}
.intro{display:grid;grid-template-columns:6fr 6fr;gap:var(--gap);align-items:center;margin-top:clamp(40px,6vw,72px)}
.intro .lead{font-weight:600;max-width:30ch}
.intro .prose{margin-top:24px}
.intro figure{position:relative}
.intro figure img{width:100%}

/* "What we do?" */
.wwd-title{font-weight:800;font-size:clamp(64px,10vw,150px);line-height:.88;letter-spacing:-.04em;max-width:none;position:relative}
.wwd-title .q{color:var(--y);font-weight:800;margin-left:-.06em;display:inline-block;transform-origin:50% 80%}
.wwd-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap);align-items:end}
.wwd-grid .lead{font-family:var(--f-ui);font-weight:500;font-size:clamp(24px,3vw,44px);line-height:1.12;max-width:20ch;letter-spacing:-.02em}
.areas{margin-top:clamp(48px,7vw,96px);border-top:1px solid var(--line);position:relative}
.area{display:grid;grid-template-columns:clamp(84px,11vw,160px) 1fr 1.1fr 40px;gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative;transition:padding .45s var(--ease),background .45s}
.area:hover{padding-left:16px;background:linear-gradient(90deg,rgba(255,221,21,.22),transparent 60%)}
.area .n{font-family:var(--f-ui);font-style:var(--fi);font-weight:500;font-size:clamp(48px,6.4vw,96px);line-height:.9;color:var(--y);letter-spacing:-.04em}
.area h3{font-size:clamp(22px,2.4vw,34px)}
.area p{color:var(--mute);max-width:46ch;font-size:16px}
.area .go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .45s var(--ease)}
.area .go svg{width:16px;height:16px}
.area:hover .go{background:var(--k);color:var(--w);border-color:var(--k);transform:rotate(-45deg)}
/* floating image that follows the cursor over the areas list */
.peek{position:fixed;left:0;top:0;width:clamp(220px,22vw,340px);aspect-ratio:4/3;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .3s,transform .4s var(--ease);overflow:hidden;background:var(--k)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.peek img.on{opacity:1}

/* image band (from Main.html) */
.band{height:clamp(240px,24vw,360px);display:grid;grid-template-columns:repeat(3,1fr);background:var(--k)}
.band figure{margin:0;position:relative;overflow:hidden}
.band img,.band video{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.band figure:hover img{transform:scale(1.04)}
.band figcaption{position:absolute;left:16px;bottom:14px;background:var(--y);color:var(--k);font-family:var(--f-ui);font-size:13px;font-weight:500;padding:5px 12px;border-radius:99px;z-index:2}
/* viewfinder overlay (technical signature) */
.vf{position:absolute;inset:14px;pointer-events:none;z-index:1;font-family:var(--f-ui);color:#fff;font-size:12px;font-weight:500;letter-spacing:.04em}
.vf::before,.vf::after,.vf i::before,.vf i::after{content:"";position:absolute;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.85)}
.vf::before{left:0;top:0;border-right:0;border-bottom:0}
.vf::after{right:0;top:0;border-left:0;border-bottom:0}
.vf i::before{left:0;bottom:0;border-right:0;border-top:0}
.vf i::after{right:0;bottom:0;border-left:0;border-top:0}
.vf .tc{position:absolute;right:26px;top:6px}
.vf .geo{position:absolute;left:26px;top:6px;opacity:.85}
.vf .cross{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}
.vf .cross::before,.vf .cross::after{content:"";position:absolute;background:rgba(255,255,255,.7)}
.vf .cross::before{left:50%;top:0;width:1px;height:100%}
.vf .cross::after{top:50%;left:0;height:1px;width:100%}

/* founder */
.founder{display:grid;grid-template-columns:6fr 6fr;gap:var(--gap);align-items:center}
.founder figure{position:relative;margin:0}
.founder figure img{position:relative;z-index:1;width:100%}
.founder .thirty{position:absolute;left:0;bottom:6%;z-index:2;display:flex;align-items:flex-end;gap:.08em;pointer-events:none}
.founder .thirty b{font-family:var(--f-ui);font-style:var(--fi);font-weight:800;font-size:clamp(120px,19vw,300px);line-height:.78;letter-spacing:-.06em;color:var(--y);mix-blend-mode:multiply}
.founder .thirty span{font-family:var(--f-ui);font-style:var(--fi);font-weight:600;font-size:clamp(26px,3.6vw,56px);line-height:.98;letter-spacing:-.02em;margin-left:-.6em;margin-bottom:.1em;color:var(--k)}
.founder h2{max-width:14ch}
.founder .prose{margin-top:28px}

/* dot map */
.map-head{display:grid;grid-template-columns:7fr 5fr;gap:var(--gap);align-items:end}
.map{position:relative;margin-top:clamp(40px,6vw,80px);aspect-ratio:2.07/1;width:100%}
.map canvas{position:absolute;inset:0;width:100%;height:100%}
.flag{position:absolute;width:clamp(22px,2.6vw,40px);aspect-ratio:1;border-radius:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--paper);background:var(--w);transition:transform .35s var(--ease)}
.flag img{width:100%;height:100%;object-fit:cover}
.flag:hover{transform:translate(-50%,-50%) scale(1.18);z-index:2}
.flag::after{content:attr(data-name);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-family:var(--f-ui);font-size:12px;font-weight:500;background:var(--k);color:var(--w);padding:3px 9px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .2s}
.flag{overflow:visible}
.flag img{border-radius:50%}
.flag:hover::after,.flag:focus-visible::after{opacity:1}
.countries{margin-top:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;padding:0;font-family:var(--f-ui);font-size:14px;font-weight:500}
.countries li{border:1px solid var(--line2);border-radius:99px;padding:6px 14px}
.countries li.hq{background:var(--k);color:var(--w);border-color:var(--k)}

/* clients (ink band) */
.clients h2{max-width:20ch}
.loop{overflow:hidden;margin-top:clamp(40px,6vw,72px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.loop__track{display:flex;width:max-content;gap:clamp(48px,6vw,96px);align-items:center;animation:loop 46s linear infinite}
.loop:hover .loop__track{animation-play-state:paused}
.loop--rev .loop__track{animation-direction:reverse;animation-duration:58s}
.loop img{height:clamp(84px,8vw,120px);width:auto;filter:grayscale(1) brightness(1.6) contrast(.9);opacity:.75;transition:filter .3s,opacity .3s}
.loop img:hover{filter:none;opacity:1}
/* partner marks: white SVGs, each with its own optical height (--h, px at desktop) */
.loop--logos{margin-top:clamp(28px,4vw,48px)}
.loop--logos .loop__track{gap:clamp(56px,7vw,112px)}
.loop--logos img{height:calc(var(--h) * 1px);filter:none;opacity:.82}
@media (max-width:600px){.loop--logos img{height:calc(var(--h) * .72px)}}
@keyframes loop{to{transform:translateX(-50%)}}

/* We Learn */
.wl-band{margin:0;padding:0;background:var(--k)}
.wl{background:var(--k);color:var(--w);display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(48px,7vw,96px) max(var(--pad),calc((100vw - 1280px) / 2 + var(--pad)));position:relative;overflow:hidden}
.wl__art{position:relative;display:grid;place-items:center;min-height:260px}
.wl__art img.char{width:min(100%,360px);position:relative;z-index:1}
.wl__art::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:#e2252d;opacity:.9}
.wl__logo{height:clamp(44px,5vw,64px);width:auto;margin-bottom:24px}
.wl p{color:#d9d5d6;max-width:58ch}
.wl .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.wl .btn--line{border-color:var(--line-inv);color:var(--w)}
.wl .btn--line:hover{background:var(--y);border-color:var(--y);color:var(--k)}
.wl .partners{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-inv);display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--f-ui);font-size:13px;color:#a8a3a4}
.wl .partners img{height:34px;width:auto}

/* closing CTA (portfolio p.30) */
.journey{text-align:center;padding-block:clamp(96px,14vw,200px)}
.journey h2{margin-inline:auto;max-width:none;font-size:clamp(30px,6.6vw,104px);font-weight:700;line-height:1.02}
.journey--book{padding-block:var(--sec)}
.booking{text-align:left}
.book-title{font-size:clamp(30px,3.6vw,52px);font-weight:700;line-height:1.05;letter-spacing:-.025em}
.booking dl.info{margin-top:clamp(28px,3.5vw,44px)}
form.bf--compact{gap:18px}
.us{display:inline-grid;place-items:center;width:1.32em;height:1.32em;border-radius:50%;background:var(--y);color:var(--k);vertical-align:-.28em;margin-left:.08em;font-weight:700}
.us span{transform:translateY(-.02em)}
.journey-row{margin-top:clamp(48px,8vw,110px);display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-family:var(--f-ui);font-style:var(--fi);font-size:clamp(16px,1.6vw,22px);text-align:center}
.journey-row a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}
.journey-row a:hover{border-color:var(--y)}
.journey-row>*:first-child{text-align:left}
.journey-row>*:last-child{text-align:right}

/* 9 ─ cards & work -------------------------------------------------------- */
.card{margin:0;position:relative}
.card .ph{position:relative;overflow:hidden;background:var(--ph);aspect-ratio:4/3}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .ph img{transform:scale(1.04)}
.card .ph .eye{position:absolute;left:14px;bottom:14px;z-index:2}
.card figcaption{padding-top:14px;display:flex;justify-content:space-between;gap:16px;font-family:var(--f-ui);font-size:15px;line-height:1.35}
.card figcaption b{font-weight:500}
.card figcaption span{color:var(--mute);text-align:right;flex:none}
.card .desc{margin-top:8px;color:var(--body2);font-size:16px;max-width:52ch}
.card .ph:has([data-media]){cursor:pointer}
.site-footer address{font-style:normal;line-height:1.6}
/* staggered featured row (Main.html) */
.stag{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,32px);align-items:start}
.stag .card{grid-column:span 4}
.stag .card .ph{aspect-ratio:3/4}
.stag .card:nth-child(2){margin-top:clamp(0px,9vw,140px)}
.stag .card:nth-child(3){margin-top:clamp(0px,3vw,48px)}
/* filters */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips button{font-family:var(--f-ui);font-size:14px;font-weight:500;padding:9px 18px;border-radius:99px;border:1px solid var(--line2);background:var(--w);color:var(--k);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chips button:hover{border-color:var(--k)}
.chips button[aria-pressed=true]{background:var(--k);color:var(--w);border-color:var(--k)}
.chips .count{opacity:.55;margin-left:4px;font-variant-numeric:tabular-nums}
.filterbar{position:sticky;top:calc(var(--header-h) - 1px);z-index:10;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:14px 0;border-bottom:1px solid var(--line);margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);transition:top .45s var(--ease)}
.hdr-hidden .filterbar{top:-1px}
.grid-feat{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,4vw,56px) clamp(16px,2.4vw,32px)}
.grid-feat .card .ph{aspect-ratio:16/9}
.grid-feat .card figcaption b{font-size:clamp(18px,1.7vw,22px)}
.grid-arch{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px 24px}
.grid-arch .card .ph{aspect-ratio:1361/929}
.card[hidden]{display:none}
.group-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:clamp(64px,8vw,110px) 0 28px;padding-top:24px;border-top:1px solid var(--line)}
.group-title h2{font-size:clamp(28px,3.4vw,44px)}
.group-title .mute{display:block;margin-top:6px;font-family:var(--f-ui);font-size:15px}
.arch .group-title{align-items:center;flex-wrap:wrap}
.arch-ctrl{display:flex;align-items:center;gap:10px}
.arch-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--k);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.arch-arrow svg{width:20px;height:20px}
.arch-arrow:hover:not(:disabled){background:var(--k);color:var(--w);border-color:var(--k)}
.arch-arrow:disabled{opacity:.3;cursor:default}
.arch-ctrl .btn{margin-left:6px}
.arch.is-collapsed .grid-arch{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.arch.is-collapsed .grid-arch::-webkit-scrollbar{display:none}
.arch.is-collapsed .grid-arch .card{flex:0 0 calc((100% - 72px) / 4);scroll-snap-align:start}
.arch.is-open .arch-arrow{display:none}
@media (max-width:1100px){.arch.is-collapsed .grid-arch .card{flex-basis:calc((100% - 48px) / 3)}}
@media (max-width:760px){.arch.is-collapsed .grid-arch .card{flex-basis:calc((100% - 24px) / 2)}}
@media (max-width:520px){.arch.is-collapsed .grid-arch .card{flex-basis:78%}.arch-ctrl{width:100%}.arch-ctrl .btn{margin-left:auto}}
.empty{padding:40px 0;color:var(--mute)}

/* 10 ─ services ----------------------------------------------------------- */
.toc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line);position:relative}
.toc a{display:flex;flex-direction:column;gap:12px;padding:22px clamp(12px,1.6vw,24px) 22px 0;text-decoration:none;font-family:var(--f-ui);font-weight:500;font-size:clamp(15px,1.3vw,18px);line-height:1.25;border-right:1px solid var(--line);transition:background .3s}
.toc a+a{padding-left:clamp(12px,1.6vw,24px)}
.toc a:last-child{border-right:0}
.toc a .n{font-style:var(--fi);color:var(--k);font-size:clamp(34px,3.6vw,52px);line-height:.9;letter-spacing:-.04em}
.toc a:hover{background:rgba(255,221,21,.18)}
.divider{position:relative;min-height:clamp(420px,72vh,760px);display:flex;align-items:flex-end;padding:var(--pad);overflow:hidden;color:var(--w);background:var(--k)}
.divider>img{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;filter:grayscale(1) blur(3px) brightness(.72);transform:scale(1.04);will-change:transform}
.divider .wrap{width:100%;display:flex;align-items:flex-end;gap:clamp(10px,1.4vw,22px)}
.divider .n{font-family:var(--f-ui);font-style:var(--fi);font-weight:500;font-size:clamp(120px,22vw,340px);line-height:.74;letter-spacing:-.06em;color:var(--y);position:relative}
.divider h2{color:var(--w);font-size:clamp(28px,5.6vw,88px);font-weight:600;line-height:.98;max-width:18ch;position:relative;margin-bottom:.06em}
.divider .vf{inset:clamp(14px,2vw,28px)}
.chapter{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap)}
.chapter .icon{width:88px;height:88px;border-radius:50%;background:var(--y);display:grid;place-items:center;margin-bottom:28px}
.chapter .icon>*{width:56px;height:56px}
.chapter .icon svg{width:44px;height:44px;stroke:var(--k);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.caps{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.caps li{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);font-family:var(--f-ui);font-weight:500;font-size:17px;display:flex;gap:12px;align-items:baseline}
.caps li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--y);flex:none;transform:translateY(-2px)}
.caps li:nth-child(odd){padding-right:24px}
.chapter .prose{margin-top:20px}
.related{margin-top:clamp(56px,7vw,96px)}
.related .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);margin-top:28px}
.related .row3 .card .ph{aspect-ratio:16/10}

/* pull quote (consultancy) */
.pull{border-left:3px solid var(--y);padding:8px 0 8px clamp(20px,3vw,40px);max-width:62ch}
.pull p{font-family:var(--f-ui);font-style:var(--fi);font-weight:300;font-size:clamp(20px,1.9vw,27px);line-height:1.3;letter-spacing:-.01em}
.pull p b{font-weight:800}
.pull .btn{margin-top:28px}
.related .head h3{font-style:var(--fi);font-weight:600}

/* 11 ─ about -------------------------------------------------------------- */
.story{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap);align-items:center}
.story-sun{position:relative;aspect-ratio:1;max-width:520px;width:100%}
.story-sun .core{position:absolute;inset:18%;border-radius:50%;background:var(--y)}
.story-sun svg{position:absolute;inset:0;width:100%;height:100%;color:#f0c419}
.story-sun svg circle{fill:none;stroke:currentColor;stroke-width:1}
.triad{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:36px}
.triad div{padding:18px 16px 0 0;font-family:var(--f-ui);font-style:var(--fi);font-weight:600;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em}
.triad div+div{padding-left:16px;border-left:1px solid var(--line)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(40px,6vw,72px)}
.value{border-top:2px solid var(--k);padding-top:22px}
.value .n{font-family:var(--f-ui);font-style:var(--fi);font-weight:300;font-size:clamp(40px,4.4vw,64px);line-height:1;color:var(--k);letter-spacing:-.04em}
.value h3{margin-top:18px;font-style:var(--fi);font-weight:600}
.value p{margin-top:12px;color:var(--body2);font-size:16px}

/* 12 ─ contact & form ----------------------------------------------------- */
.big{font-family:var(--f-ui);font-size:clamp(28px,4.4vw,64px);line-height:1;font-weight:600;font-style:var(--fi);letter-spacing:-.035em;text-decoration:none;word-break:break-word;border-bottom:3px solid var(--y);display:inline-block;transition:background .25s}
.big:hover{background:var(--y)}
.contact-grid h1{font-size:clamp(44px,5.6vw,88px);max-width:12ch}
.contact-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--gap);align-items:end}
dl.info{display:grid;gap:20px}
dl.info dt{color:var(--mute);font-family:var(--f-ui);font-size:14px;font-weight:500}
dl.info dd{font-size:17px;margin-top:2px}
dl.info dd a{text-decoration:none;border-bottom:1px solid rgba(35,31,32,.3);transition:border-color .2s}
dl.info dd a:hover{border-color:var(--y)}
.book{display:grid;grid-template-columns:4fr 8fr;gap:var(--gap)}
.book .sub{margin-top:20px}
.book .note{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--body2)}
form.bf{display:grid;gap:44px}
fieldset{border:0;padding:0;display:grid;gap:16px;min-width:0}
legend{font-family:var(--f-ui);font-style:var(--fi);font-weight:600;font-size:22px;margin-bottom:14px;letter-spacing:-.01em}
.fl{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--mute)}
.field .req{color:var(--k)}
input,select,textarea{font-family:var(--f-body);font-size:16px;color:var(--k);background:var(--w);border:1px solid var(--line2);padding:13px 14px;border-radius:6px;width:100%;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--k);box-shadow:0 0 0 3px rgba(255,221,21,.65)}
textarea{min-height:130px;resize:vertical}
.opts{display:flex;flex-wrap:wrap;gap:10px;border:0;padding:0}
.opts label{display:flex;align-items:center;gap:8px;color:var(--k);border:1px solid var(--line2);background:var(--w);padding:10px 15px;border-radius:99px;font-family:var(--f-ui);font-size:15px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s}
.opts input{width:auto;accent-color:var(--k)}
.opts label:has(input:checked){background:var(--y);border-color:var(--y)}
.opts label:has(input:focus-visible){outline:3px solid var(--k);outline-offset:2px}
.hp{position:absolute!important;left:-9999px!important}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.status{font-size:15px;min-height:1.4em;font-family:var(--f-ui)}
.status.ok{color:#1d7a3a}
.status.err{color:#b3261e}
.mapframe{position:relative;height:clamp(320px,42vw,520px);background:var(--ph)}
.mapframe iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
.mapframe .pin{position:absolute;left:var(--pad);bottom:var(--pad);background:var(--w);padding:20px 24px;max-width:340px;font-size:15px}
.mapframe .pin b{display:block;font-family:var(--f-ui);font-style:var(--fi);font-weight:600;font-size:20px;margin-bottom:6px}

/* reel (contact) */
.reel{position:relative;height:clamp(260px,38vw,540px);overflow:hidden;background:var(--k)}
figure.reel{margin:0}
.reel video,.reel img{width:100%;height:100%;object-fit:cover}
.reel .vf{inset:clamp(14px,2vw,28px)}
.reel__cap{position:absolute;left:var(--pad);bottom:clamp(20px,3vw,40px);z-index:2;max-width:46ch;background:var(--y);color:var(--k);font-family:var(--f-ui);font-weight:500;font-size:15px;padding:8px 16px;border-radius:99px}
@media (max-width:600px){.reel__cap{max-width:calc(100% - var(--pad) * 2);border-radius:20px}}

/* 13 ─ lightbox ----------------------------------------------------------- */
.lb{border:0;padding:0;margin:auto;width:min(1180px,94vw);max-height:92vh;background:transparent;color:var(--w);overflow:visible}
.lb::backdrop{background:rgba(20,17,18,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb[open]{animation:lbIn .45s var(--ease-out)}
@keyframes lbIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.lb__frame{position:relative;background:#000;aspect-ratio:16/9;width:100%}
.lb__frame.doc{aspect-ratio:auto;height:82vh;background:#1a1718}
.lb__frame.img{aspect-ratio:auto;background:transparent;max-height:82vh;display:grid;place-items:center}
.lb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb__frame img{max-height:82vh;width:auto;margin:auto}
.lb__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0 0;font-family:var(--f-ui)}
.lb__title{font-style:var(--fi);font-weight:600;font-size:clamp(17px,1.8vw,22px)}
.lb__title small{display:block;font-style:normal;font-weight:400;font-size:14px;color:#a8a3a4;margin-top:2px}
.lb__close{width:48px;height:48px;border-radius:50%;background:var(--y);color:var(--k);border:0;cursor:pointer;display:grid;place-items:center;flex:none;transition:transform .3s var(--ease)}
.lb__close:hover{transform:rotate(90deg)}
.lb__close svg{width:20px;height:20px}
.lb__ext{color:#d9d5d6;font-size:14px}

/* 14 ─ footer ------------------------------------------------------------- */
.site-footer{background:var(--k);color:#d9d5d6;padding:clamp(56px,7vw,96px) var(--pad) 28px;font-size:15px}
.site-footer .top{display:grid;grid-template-columns:4fr 2fr 3fr 3fr;gap:clamp(24px,4vw,64px)}
.site-footer .brand img{height:64px}
.site-footer .tag{margin-top:20px;font-family:var(--f-ui);font-style:var(--fi);font-weight:300;font-size:clamp(20px,2vw,26px);color:var(--y);letter-spacing:-.01em}
.site-footer h4{font-family:var(--f-ui);font-size:13px;font-weight:500;color:#a8a3a4;margin-bottom:14px;letter-spacing:.02em}
.site-footer ul{list-style:none;padding:0;display:grid;gap:8px}
.site-footer a{text-decoration:none;color:var(--w);transition:color .2s}
.site-footer a:hover{color:var(--y)}
.site-footer .mute{color:#a8a3a4}
/* WhatsApp: a sun-yellow pill fixed bottom-right; opens to a label like the "eye" */
.wa-fab{position:fixed;right:clamp(16px,2.4vw,32px);bottom:calc(clamp(16px,2.4vw,32px) + env(safe-area-inset-bottom,0px));z-index:45;display:inline-flex;align-items:center;gap:0;height:56px;padding:0 15px;border:1.5px solid var(--k);border-radius:99px;background:var(--y);font-family:var(--f-ui);font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;transition:gap .4s var(--ease),padding .4s var(--ease)}
.site-footer .wa-fab,.site-footer .wa-fab:hover{color:var(--k)}
.wa-fab svg{width:24px;height:24px;flex:none}
.wa-fab span{max-width:0;opacity:0;transition:max-width .45s var(--ease),opacity .3s}
.wa-fab:hover,.wa-fab:focus-visible{gap:10px;padding:0 19px 0 15px}
.wa-fab:hover span,.wa-fab:focus-visible span{max-width:160px;opacity:1}
.wa-fab:focus-visible{outline:2px solid var(--k);outline-offset:3px}
.site-footer .bottom{margin-top:clamp(48px,6vw,80px);padding-top:22px;border-top:1px solid var(--line-inv);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#a8a3a4}


/* preloader (first visit only; Lottie sun) */
.preload{position:fixed;inset:0;z-index:90;background:var(--w);display:none;place-items:center;transition:opacity .6s var(--ease),visibility .6s}
.has-preload .preload{display:grid}
.has-preload .hero .sun,.has-preload .hero h1 span{animation-play-state:paused}
.preload.done{opacity:0;visibility:hidden}
.preload__anim{width:min(42vw,260px);aspect-ratio:1}

/* 15 ─ motion helpers (JS adds .js on <html>) ----------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal="fade"]{transform:none}
.js [data-split]{visibility:hidden}
.js [data-split].split-ready{visibility:visible}
.split-line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}

/* 16 ─ responsive --------------------------------------------------------- */
@media (max-width:1100px){
  .site-footer .top{grid-template-columns:1fr 1fr}
  .area{grid-template-columns:clamp(70px,10vw,120px) 1fr 40px}
  .area p{grid-column:2;grid-row:2}
  .area .go{grid-column:3;grid-row:1}
}
@media (max-width:860px){
  :root{--header-h:64px}
  .brand img{height:38px}
  .menu-btn{display:block;position:relative;z-index:2}
  .nav{position:fixed;inset:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;background:var(--w);padding:96px var(--pad) 40px;display:flex;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
  .nav.open{visibility:visible;opacity:1}
  .nav a{font-size:clamp(34px,9vw,52px);font-style:var(--fi);font-weight:600;letter-spacing:-.02em;padding:6px 0;border:0}
  .nav .cta{margin-top:20px;font-size:18px;font-style:normal;font-weight:500;padding:14px 24px}
  .sunwrap{width:92vw;right:-30vw;top:14vh}
  .phero .sun{width:52vw;right:-18vw;bottom:calc(52vw * -.62)}
  .hero-meta .geo{display:none}
  .split,.split--rev,.intro,.about__grid,.wwd-grid,.founder,.map-head,.contact-grid,.book,.chapter,.story,.wl,.fl{grid-template-columns:1fr}
  .about h2{max-width:14ch}
  .stats .wrap{grid-template-columns:1fr 1fr;row-gap:44px}
  .st:nth-child(3){border-left:0;padding-left:0}
  .stag{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(var(--pad) * -1);padding-right:var(--pad);padding-bottom:8px}
  .stag .card{flex:0 0 78%;scroll-snap-align:start;margin-top:0!important}
  .band{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .band figure{flex:0 0 78%;scroll-snap-align:start}
  .grid-feat{grid-template-columns:1fr}
  .related .row3{grid-template-columns:1fr}
  .toc{grid-template-columns:1fr 1fr}
  .toc a:nth-child(2){border-right:0}
  .toc a:nth-child(3){padding-left:0}
  .toc a:nth-child(n+3){border-top:1px solid var(--line)}
  .caps{grid-template-columns:1fr}
  .values,.triad{grid-template-columns:1fr}
  .triad div+div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .journey-row{grid-template-columns:1fr;gap:10px}
  .journey-row>*{text-align:center!important}
  .xhead .b{margin-left:clamp(28px,10vw,80px)}
  .founder .thirty{left:0}
  .filterbar{top:calc(var(--header-h) - 1px)}
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .chips button{flex:none}
  .mapframe{height:auto}
  .mapframe iframe{display:block;height:clamp(320px,80vw,420px)}
  .mapframe .pin{position:static;max-width:none}
  .divider{min-height:clamp(360px,60vh,560px)}
  .peek{display:none}
}
/* hide scrollbars on swipe rows */
.stag,.band,.chips{scrollbar-width:none}
.stag::-webkit-scrollbar,.band::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
@media (max-width:600px){.flag{display:none}.map{margin-top:28px}.vals{grid-template-columns:1fr;gap:20px}}
@media (max-width:520px){
  .site-footer .top{grid-template-columns:1fr}
  .area{grid-template-columns:64px 1fr}
  .area .go{display:none}
  .stats .wrap{column-gap:0}
}
@media (hover:none){.peek{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sun,.hero h1 span{opacity:1}
  .js [data-reveal]{opacity:1;transform:none}
  .js [data-split]{visibility:visible}
  .loop__track,.velo__track{transform:none!important}
  .preload{display:none}
}
@media print{.site-header,.grain,.preload,.lb,.velo,.loop,.wa-fab{display:none!important}body{color:#000}}

/* 17 - round 4 ------------------------------------------------------------ */
/* content column ~15% narrower on desktop; bands that are full width keep their width */
@media (min-width:1000px){
  .wrap,.hwrap{max-width:min(calc(var(--max) * .85),85%)}
}
/* hero: the sun's centre is locked to the headline's centre; softer sun */
.hero-stage{position:relative;width:100%}
.hero-stage .sunwrap{top:calc(50% - min(62vw,720px) / 2);right:calc(-8vw - var(--pad))}
@keyframes rise-soft{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:.55;transform:none}}
.home .hero .sun{animation-name:rise-soft}
/* "What we do" - one big question mark behind both lines */
.wwd-title{width:fit-content;justify-self:start;padding-right:1.5em}
.wwd-title .q{position:absolute;top:0;bottom:0;right:0;display:grid;place-items:center;margin:0;padding-bottom:.7em;font-size:2.5em;line-height:1;pointer-events:none}
@media (min-width:861px){.wwd-grid{grid-template-columns:auto 1fr}}
/* the two wide bands are half as tall */
.reel--still{height:clamp(130px,19vw,270px)}
.wl-band .wl{padding-block:clamp(22px,2.6vw,36px);gap:clamp(20px,3vw,48px);grid-template-columns:3fr 9fr}
.wl-band .wl__art{min-height:0}
.wl-band .wl__art img.char{width:min(100%,200px)}
.wl-band .wl__art::before{width:min(86%,176px)}
.wl-band .wl__logo{height:clamp(34px,3.4vw,44px);margin-bottom:12px}
.wl-band .wl p{max-width:84ch;font-size:15px;line-height:1.5}
.wl-band .wl .acts{align-items:center;gap:12px 28px;margin-top:16px}
.wl-band .wl .acts .partners{margin:0 0 0 auto;padding:0;border:0}
.wl-band .wl .acts .btn{padding:11px 22px;font-size:15px}
@media (max-width:860px){
  .wl-band .wl{grid-template-columns:1fr}
  .wl-band .wl .acts .partners{margin-left:0;width:100%}
}

/* 18 - round 6 ------------------------------------------------------------ */
/* partner marks: white by default, real colours on a soft white card on hover */
.loop--logos .pl{position:relative;display:block;flex:none;height:calc(var(--h) * 1px)}
.loop--logos .pl::before{content:"";position:absolute;inset:-16px -20px;background:#fff;border-radius:14px;opacity:0;transition:opacity .3s}
.loop--logos .pl img{position:relative;display:block;height:100%;width:auto;transition:opacity .3s}
.loop--logos .pl img.c{position:absolute;left:0;top:0;opacity:0}
.loop--logos .pl:hover::before,.loop--logos .pl:hover img.c{opacity:1}
.loop--logos .pl:hover img:not(.c){opacity:0}
@media (max-width:600px){.loop--logos .pl{height:calc(var(--h) * .72px)}}
/* contact map: red pin that opens the location */
.mapframe .mpin{position:absolute;left:50%;top:50%;width:44px;height:58px;margin:-58px 0 0 -22px;z-index:2;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));transform-origin:50% 100%;transition:transform .25s var(--ease)}
.mapframe .mpin svg{display:block;width:100%;height:100%}
.mapframe .mpin:hover,.mapframe .mpin:focus-visible{transform:scale(1.15)}