@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:400 700;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hankengrotesk-normal-400-700.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrumentserif-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibmplexmono-normal-400.woff2) format("woff2");font-weight:400;font-display:swap}

/* Giraffe Partners hub. Layout: company file folders stacked on a dark desk; every inner page is a paper sheet laid on its folder.
   Palette from the 2026 brand moodboard. Fonts are free stand-ins: Archivo (Coolvetica), Hanken Grotesk (Neue Montreal), Instrument Serif (PP Editorial New). */
:root{
  --ground:#171519; --ground-2:#1F1B26; --rule:rgba(255,255,255,.09); --dim:#B0A3BA; --bright:#FBF7FC;
  --purple:#3E2B78; --indigo:#272047; --indigo-2:#312454; --violet:#52328F; --violet-2:#754DAB; --grey:#766C82; --lilac:#B0A3BA;
  --industrial:#754DAB; --cx:#312454; --ai:#B0A3BA; --arre:#3E2B78;
  --paper:#FBF7FC; --ink:#171519; --ink-2:#4F4859; --line:#E4DCEA; --accent:#C9B8E6;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.33,1,.68,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ground);color:var(--bright);font-family:var(--body);font-size:18px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.g{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wide{max-width:1320px;margin:0 auto}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.01em}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.h-display{font-family:var(--display);font-weight:700;font-stretch:84%;letter-spacing:-.025em;line-height:.92;margin:0}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--bright);color:var(--ink);padding:8px 12px;z-index:99}
[hidden]{display:none!important}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:40;height:68px;display:flex;align-items:center;gap:24px;
  background:linear-gradient(var(--ground),rgba(23,21,25,.88));border-bottom:1px solid var(--rule);transition:transform .65s var(--ease)}
.top.is-hidden{transform:translateY(-100%);transition-duration:.33s}
.top .logo img{height:34px;width:auto}
.top nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.top nav a{font-size:15px;text-decoration:none;opacity:.8;transition:opacity .3s}
.top nav a:hover,.top nav a[aria-current="page"]{opacity:1}
.top nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.menu-btn{display:none;margin-left:auto;font-size:15px}
@media (max-width:820px){
  .menu-btn{display:block}
  .top nav{display:none;position:fixed;top:68px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--ground);border-bottom:1px solid var(--rule);padding:8px max(20px,env(safe-area-inset-left,0px)) 18px}
  .top nav.is-open{display:flex}
  .top nav a{font-size:22px;padding-block:10px;opacity:1}
}
main{padding-top:68px}

/* home hero */
.hero{padding-block:clamp(44px,8vw,110px) 40px}
.hero h1{font-size:clamp(54px,10.4vw,168px);max-width:12ch}
.hero h1 .it{font-size:1.06em}
.hero .sub{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;margin-top:34px;align-items:flex-end}
.hero .sub p{margin:0;max-width:46ch;color:var(--dim);font-size:clamp(17px,1.5vw,20px)}
.offices{display:flex;gap:10px;flex-wrap:wrap}
.offices span{font-family:var(--mono);font-size:13px;border:1px solid var(--rule);border-radius:99px;padding:5px 12px;color:var(--bright)}

/* folder stack */
.stack{padding-top:54px}
.folder{--c:var(--industrial);--on:#fff;--sub:color-mix(in srgb,var(--c) 70%,#fff 30%);position:relative;margin-top:-54px}
.folder:first-child{margin-top:0}
.folder:nth-child(2){z-index:2}.folder:nth-child(3){z-index:3}.folder:nth-child(4){z-index:4}
.f-industrial{--c:var(--industrial)}
.f-cx{--c:var(--cx);--sub:color-mix(in srgb,var(--cx) 72%,#fff 28%)}
.f-ai{--c:var(--ai);--on:var(--ink);--sub:color-mix(in srgb,var(--ai) 70%,#fff 30%)}
.f-arre{--c:var(--arre)}
.tabs{position:relative;height:54px;display:flex;align-items:flex-end;gap:30px;padding-left:28px;pointer-events:none}
.tab{pointer-events:auto;position:relative;height:46px;display:flex;align-items:center;gap:12px;padding:0 24px;border-radius:15px 15px 0 0;
  background:var(--tc,var(--c));color:var(--on);font-size:21px;font-weight:600;white-space:nowrap;text-decoration:none;transition:transform .45s var(--ease)}
.tab .no{font-family:var(--mono);font-size:12px;font-weight:400;opacity:.8}
.tab::before,.tab::after{content:"";position:absolute;bottom:0;width:15px;height:15px;pointer-events:none}
.tab::before{left:-15px;background:radial-gradient(circle at 0 0,transparent 14.5px,var(--tc,var(--c)) 15px)}
.tab::after{right:-15px;background:radial-gradient(circle at 100% 0,transparent 14.5px,var(--tc,var(--c)) 15px)}
.tab:hover,.tab:focus-visible{transform:translateY(-5px)}
.tab.sub{--tc:var(--sub);color:var(--ink);font-size:14px;font-weight:500;height:36px;font-family:var(--mono)}
.f-cx .tab.sub{color:#fff;--tc:color-mix(in srgb,var(--cx) 70%,#000 30%)}
.f-arre .tab.sub{color:#fff;--tc:color-mix(in srgb,var(--arre) 72%,#fff 28%)}
.strip{position:relative;background:var(--c);color:var(--on);border-radius:3px 3px 0 0}
.strip-head{display:flex;justify-content:flex-end;align-items:center;gap:10px;height:54px;padding:0 24px;width:100%;text-align:right}
.strip-head .lbl{font-family:var(--mono);font-size:13px}
.l-short{display:none}
.strip-head .chev{font-family:var(--mono);transition:transform .5s var(--ease)}
.folder.is-open .strip-head .chev{transform:rotate(-90deg)}
.drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.folder.is-open .drawer,.folder.is-expanded .drawer{grid-template-rows:1fr}
.drawer > div{overflow:hidden}
.peek{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 40px;padding:2px 24px 34px 40px}
.peek p{margin:0;max-width:60ch;font-size:16.5px;line-height:1.55}
.folder:last-child .peek{padding-bottom:110px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:14px;border:1px solid currentColor;border-radius:99px;padding:10px 18px;white-space:nowrap;text-decoration:none;transition:background .3s,color .3s}
.btn:hover{background:var(--on,var(--bright));color:var(--c,var(--ink))}
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.solid:hover{background:var(--purple);border-color:var(--purple);color:#fff}
.btn.light{background:var(--bright);color:var(--ink);border-color:var(--bright)}
.folder.is-expanded .peek{display:none}
.full{display:none;padding:6px clamp(14px,3vw,40px) clamp(30px,5vw,60px)}
.folder.is-expanded .full{display:block}
.folder:last-child.is-expanded .full{padding-bottom:110px}

/* paper sheet */
.paper{position:relative;background:var(--paper);color:var(--ink);border-radius:3px;padding:clamp(24px,4vw,60px) clamp(18px,4vw,60px) clamp(28px,4vw,60px) clamp(52px,7vw,100px);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.12  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.paper::before{content:"";position:absolute;left:clamp(26px,3.6vw,50px);top:0;bottom:0;border-left:1px solid color-mix(in srgb,var(--c,var(--purple)) 32%,transparent)}
.paper::after{content:"";position:absolute;left:clamp(10px,1.4vw,18px);top:60px;bottom:60px;width:14px;background:radial-gradient(circle,var(--c,var(--purple)) 6px,transparent 6.5px) 0 0/14px 160px repeat-y}
.paper a{color:var(--ink)}
.paper h2,.paper h3{color:var(--ink)}
.close{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:20px;font-family:var(--mono);transition:transform .3s var(--ease);z-index:2}
.close:hover{transform:scale(.95)}

/* company file (inside an expanded folder) */
.file-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;padding-right:56px;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:30px}
.file-head img{height:clamp(54px,6vw,78px);width:auto}
.file-head .mono{color:var(--ink-2)}
.file-head .host-link{text-decoration:underline;text-decoration-color:rgba(42,28,77,.3);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.file-head .host-link:hover{color:var(--ink);text-decoration-color:currentColor}
.file-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(26px,5vw,72px)}
.file-lede{font-family:var(--display);font-weight:600;font-stretch:88%;font-size:clamp(26px,2.8vw,38px);line-height:1.08;letter-spacing:-.015em;margin:0 0 22px}
.file-lede .it{font-size:1.08em}
.kv{display:grid;gap:14px;margin:0}
.kv dt{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.kv dd{margin:2px 0 0;font-size:17px}
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:10px;padding-block:12px;border-bottom:1px solid var(--line)}
.svc .n{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);padding-top:4px}
.svc b{display:block;font-weight:600}
.svc span.d{display:block;color:var(--ink-2);font-size:15.5px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.step{background:color-mix(in srgb,var(--c) 14%,var(--paper));padding:18px 18px 20px;border-radius:3px}
.step .mono{color:var(--ink-2)}
.step p{margin:8px 0 0;font-size:16px}
.file-cta{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.file-cta .quiet{font-size:15.5px;color:var(--ink-2)}
.file-cta .quiet a{color:var(--ink)}
.proof{margin-top:22px;font-size:15.5px;color:var(--ink-2);border-left:2px solid var(--c);padding-left:14px}

/* about strip on home */
.home-about{padding-block:clamp(60px,8vw,110px)}
.home-about .wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
.home-about h2{font-size:clamp(36px,4.6vw,64px)}
.home-about p{margin:0 0 22px;color:var(--dim);max-width:48ch}

/* inner pages */
.page-title{padding-block:clamp(40px,6vw,80px) clamp(24px,3vw,40px)}
.page-title .mono{display:block;color:var(--dim);margin-bottom:16px}
.page-title h1{font-size:clamp(56px,10vw,150px)}
.page-title p{margin:26px 0 0;max-width:52ch;color:var(--dim);font-size:clamp(17px,1.5vw,20px)}
.sheet-wrap{--c:var(--purple);background:var(--c);border-radius:0 6px 6px 0;margin-left:calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding:clamp(16px,3vw,40px) clamp(14px,3vw,40px) clamp(30px,5vw,60px) max(20px,clamp(16px,3vw,40px));margin-bottom:clamp(40px,6vw,80px)}
.sheet-wrap + .sheet-wrap{margin-top:-40px}
.sec{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(20px,4vw,60px);padding-block:clamp(26px,3.6vw,46px);border-top:1px solid var(--line)}
.sec:first-child{border-top:0;padding-top:0}
.sec.stacked{grid-template-columns:1fr;gap:26px}
.sec.stacked .founder{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.sec h2{font-family:var(--display);font-weight:700;font-stretch:84%;font-size:clamp(28px,3vw,42px);line-height:.98;letter-spacing:-.02em;margin:0}
.sec h2 .it{font-weight:400}
.sec .body p{margin:0 0 16px;max-width:60ch}
.sec .body p:last-child{margin-bottom:0}
.letter p{font-size:clamp(18px,1.6vw,21px)}
.founder{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(22px,4vw,50px)}
.founder img.ph{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.founder .sig{height:60px;width:auto;margin-top:6px}
.founder .who{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.rows{display:grid;gap:0;border-top:1px solid var(--line)}
.rows > div{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:20px;padding-block:14px;border-bottom:1px solid var(--line)}
.rows dt{font-weight:600}
.rows dd{margin:0;color:var(--ink-2)}
.office-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.office-cards div{border:1px solid var(--line);border-radius:3px;padding:16px 18px;background:#fff}
.office-cards b{display:block;font-family:var(--display);font-stretch:84%;font-size:24px;letter-spacing:-.01em}
.office-cards span{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.empty{border:1px dashed #CFC4D8;border-radius:3px;padding:22px 22px;color:var(--ink-2);font-size:16px;background:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{border:1px solid var(--line);background:#fff;border-radius:3px;padding:18px;display:flex;flex-direction:column;gap:8px}
.card .mono{color:var(--ink-2)}
.card b{font-size:18px;line-height:1.3}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.logo-grid figure{margin:0;border:1px solid var(--line);border-radius:3px;background:#fff;padding:18px;display:grid;place-items:center;min-height:110px}
.logo-grid figure.dark{background:var(--ink)}
.logo-grid img{max-height:64px;width:auto}

/* forms */
form.f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
form.f .full-row{grid-column:1 / -1}
form.f label{display:grid;gap:6px;font-size:14px;font-weight:600}
form.f input,form.f select,form.f textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fff;border:1px solid #CFC4D8;border-radius:3px;padding:11px 12px;width:100%}
form.f textarea{min-height:110px;resize:vertical}
form.f input:focus,form.f select:focus,form.f textarea:focus{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
form.f .consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--ink-2)}
form.f .consent input{width:auto;margin-top:4px}
form.f .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
form.f .note{font-size:13.5px;color:var(--ink-2)}
.tabs-switch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tabs-switch button{font-family:var(--mono);font-size:13.5px;border:1px solid #CFC4D8;border-radius:99px;padding:7px 14px;background:#fff;color:var(--ink)}
.tabs-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.legal .body h3{font-size:19px;margin:22px 0 6px}
.legal .body ul{margin:0 0 16px;padding-left:20px}

/* footer */
.foot{background:var(--ground-2);border-top:1px solid var(--rule);padding-block:50px 28px}
.foot .wide{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:30px}
.foot h2{font-size:clamp(34px,4vw,54px);margin-bottom:18px}
.foot h3{font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--dim);margin:0 0 10px;letter-spacing:.04em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15.5px}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot .base{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid var(--rule);padding-top:20px;margin-top:10px;color:var(--dim);font-size:14px}

@media (max-width:900px){
  .file-grid,.sec,.founder,.sec.stacked .founder,.home-about .wide{grid-template-columns:1fr}
  .founder img.ph{max-width:260px}
  .steps,.office-cards{grid-template-columns:1fr}
  .foot .wide{grid-template-columns:1fr 1fr}
  .foot .wide > div:first-child{grid-column:1 / -1}
}
@media (max-width:640px){
  .tabs{padding-left:18px;gap:24px}
  .tab{font-size:18px;padding:0 16px}
  .tab .no{display:none}
  .tab.sub{display:none}
  .strip-head .lbl{font-size:11.5px}
  .l-long{display:none}.l-short{display:inline}
  .peek{padding:2px 18px 28px 22px}
  form.f{grid-template-columns:1fr}
  .rows > div{grid-template-columns:1fr;gap:2px}
  .paper{padding-left:44px}
  .paper::after{left:8px}
  .paper::before{left:28px}
  .top .logo img{height:28px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- v2 (23 Oct 2026) ---------- */
.tab.tab-logo{--tc:var(--paper);height:48px;padding:0 22px}
.tab.tab-logo img{height:28px;width:auto;max-width:240px;object-fit:contain}
.f-arre .tab.tab-logo img{height:34px}
.sec-label{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.hero .lead{color:var(--bright);font-size:clamp(20px,1.9vw,26px);margin:0 0 10px;max-width:34ch;line-height:1.3}
.proof-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.proof-strip div{padding:20px 4px;display:flex;flex-direction:column;gap:2px}
.proof-strip div + div{border-left:1px solid var(--rule);padding-left:24px}
.proof-strip b{font-family:var(--display);font-stretch:84%;font-weight:700;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.02em}
.proof-strip span{font-family:var(--mono);font-size:13px;color:var(--dim)}
.page-title .proof-strip{max-width:760px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-family:var(--mono);font-size:12.5px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px;color:var(--ink)}
.chips.light span{background:transparent;border-color:var(--rule);color:var(--bright)}
.mini{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
.block{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.small{font-size:14px;color:var(--ink-2)}
.steps.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.step b{display:block;margin-top:6px;font-size:17px}
.step p{margin-top:4px;color:var(--ink-2);font-size:15px}
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ink-2)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:10px 0 0;color:var(--ink-2);max-width:66ch}
.home-faq{padding-block:clamp(50px,7vw,90px);border-top:1px solid var(--rule)}
.home-faq h2{font-size:clamp(34px,4vw,56px);margin-bottom:28px}
.home-faq .faq{border-color:var(--rule)}
.home-faq .faq details{border-color:var(--rule)}
.home-faq .faq summary{color:var(--bright)}
.home-faq .faq summary::after,.home-faq .faq details p{color:var(--dim)}
.closing{padding-block:clamp(50px,7vw,90px);background:var(--purple)}
.closing .wide{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px}
.closing h2{font-size:clamp(34px,4.4vw,60px);max-width:16ch}
.closing p{margin:16px 0 0;max-width:46ch;color:#E2D9F0}
.closing .actions{display:flex;flex-wrap:wrap;gap:12px}
.office-cards span{display:block;margin-top:6px;font-family:var(--body);font-size:15px;color:var(--ink-2);line-height:1.45}
blockquote.boiler{margin:0 0 12px;padding-left:18px;border-left:3px solid var(--purple);font-size:18px}
@media (max-width:900px){.steps.n4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .proof-strip{grid-template-columns:1fr}
  .proof-strip div + div{border-left:0;border-top:1px solid var(--rule);padding-left:4px}
  .steps.n4{grid-template-columns:1fr}
  .tab.tab-logo img{height:22px;max-width:170px}
  .f-arre .tab.tab-logo img{height:26px}
}
/* v2.1: larger logo tabs */
.stack{padding-top:66px}
.folder{margin-top:-66px}
.tabs{height:66px}
.strip-head{height:66px}
.tab.tab-logo{height:60px;padding:0 26px}
.tab.tab-logo img{height:40px;max-width:280px}
.f-arre .tab.tab-logo img{height:46px}
.hero .sub p.lead{color:var(--bright);font-size:clamp(20px,1.9vw,26px);margin:0 0 10px;max-width:34ch;line-height:1.3}
@media (max-width:640px){
  .stack{padding-top:56px}.folder{margin-top:-56px}.tabs{height:56px}.strip-head{height:56px}
  .tab.tab-logo{height:50px;padding:0 16px}
  .tab.tab-logo img{height:30px;max-width:190px}
  .f-arre .tab.tab-logo img{height:34px}
}

[tabindex="-1"]:focus{outline:none}

/* ---------- motion v3: file view (Mosby-style) ---------- */
.drawer{transition:grid-template-rows .6s cubic-bezier(.22,1,.36,1)}
.peek{opacity:0;transform:translateY(8px);transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.folder.is-open .peek{opacity:1;transform:none;transition-delay:.12s}
.tab{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.folder{will-change:transform}
.fileview{position:fixed;inset:0;z-index:35;background:var(--ground);opacity:0}
.fv-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.fv-inner{padding-top:68px}
.fv-title{padding-block:clamp(26px,4vw,48px) clamp(18px,2.4vw,30px)}
.fv-back{font-family:var(--mono);font-size:13px;color:var(--dim);margin-bottom:14px;display:block}
.fv-back:hover{color:var(--bright)}
.fv-name{font-size:clamp(52px,9vw,140px);min-height:1em;white-space:nowrap;overflow:hidden;text-overflow:clip}
.fv-grid{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:0 18px;align-items:start}
.fv-sheet{--c:var(--purple);position:relative;background:var(--c);border-radius:0 6px 6px 6px;padding:clamp(16px,3vw,40px) clamp(14px,3vw,40px) clamp(30px,5vw,60px);margin-top:60px;will-change:transform}
.fv-tab{position:absolute;left:28px;top:-56px;height:56px;display:flex;align-items:center;padding:0 26px;background:var(--paper);border-radius:15px 15px 0 0}
.fv-tab img{height:38px;width:auto;max-width:280px}
.fv-sheet .paper .close{display:none}
.fv-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:10px;margin-top:60px}
.fv-rail button{writing-mode:vertical-rl;background:var(--rc);color:#fff;font-size:15px;font-weight:600;padding:20px 0;border-radius:0 14px 14px 0;width:42px;text-align:center;transition:width .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.fv-rail button.on-light{color:var(--ink)}
.fv-rail button:hover{width:50px}
.fv-rail button[aria-current="true"]{width:54px}
.fv-next{display:block;width:100%;text-align:left;margin-top:clamp(60px,8vw,110px);background:var(--nc);color:#fff;min-height:70vh;padding-block:clamp(28px,4vw,48px)}
.fv-next.on-light{color:var(--ink)}
.fv-next .wide{display:flex;flex-direction:column;gap:12px}
.fv-next .mono{opacity:.8}
.fv-next-name{font-size:clamp(52px,9vw,130px)}
.fv-sentinel{height:2px}
html.fv-open body{overflow:hidden}
.top-file{position:absolute;left:max(20px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%);font-family:var(--display);font-stretch:84%;font-weight:700;font-size:20px;letter-spacing:-.01em;opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(.22,1,.36,1)}
.top.show-file .top-file{opacity:1}
.top.show-file .logo{opacity:0}
.top .logo{transition:opacity .35s cubic-bezier(.22,1,.36,1)}
html.fv-open .top{transform:none!important}
@media (max-width:900px){.fv-grid{grid-template-columns:1fr}.fv-rail{display:none}}
@media (max-width:640px){.fv-tab{left:16px;padding:0 16px;height:48px;top:-48px}.fv-tab img{height:28px}.fv-sheet{margin-top:52px}.fv-name{white-space:normal}}
@media (prefers-reduced-motion:reduce){.fileview{opacity:1}.peek{opacity:1;transform:none}}

/* v3.1 hover fix: next folder's tab row (66px) overlaps the bottom of each drawer, so reserve that space */
.peek{padding-bottom:calc(66px + 30px)}
.full{padding-bottom:calc(66px + 40px)}
.folder:last-child .peek,.folder:last-child.is-expanded .full{padding-bottom:110px}
.founder .sig{height:auto;width:min(260px,70%);margin:10px 0 2px}
@media (max-width:720px){.peek{padding-bottom:calc(56px + 24px)}.full{padding-bottom:calc(56px + 30px)}}

/* v3.2 duotone image slots. One ink per agency over near-black, square corners, hairline outline. */
.duo{--d1:#151219;--d2:#CDBDEB;position:relative;margin:0;overflow:hidden;background:var(--d1);border-radius:2px;outline:1px solid rgba(255,255,255,.06);outline-offset:-1px}
.duo img{display:block;width:100%;height:100%;object-fit:cover}
.t-industrial{--d1:#1A1027;--d2:#C2A6EA}.t-cx{--d1:#0F0A1D;--d2:#A796D6}.t-ai{--d1:#211C27;--d2:#ECE5F1}.t-arre{--d1:#140D2A;--d2:#B3A0EA}
.duo.ph{background:
  radial-gradient(120% 90% at 78% 18%,color-mix(in srgb,var(--d2) 34%,transparent),transparent 62%),
  radial-gradient(90% 80% at 12% 100%,color-mix(in srgb,var(--d2) 16%,transparent),transparent 60%),var(--d1)}
.duo.ph::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--d2) 55%,transparent) .9px,transparent 1.3px);background-size:9px 9px;
  -webkit-mask:linear-gradient(115deg,transparent 18%,#000 70%);mask:linear-gradient(115deg,transparent 18%,#000 70%)}
.duo.ph figcaption{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column;gap:4px;color:color-mix(in srgb,var(--d2) 85%,#fff);font-size:12.5px;line-height:1.35}
.duo.ph figcaption .mono{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.duo.ph.peek-img figcaption span:last-child,.office-cards .duo.ph figcaption span:last-child{display:none}

/* where slots sit */
.peek{align-items:center}
.peek .peek-img{flex:0 0 auto;width:clamp(150px,15vw,210px)}
.peek .peek-img + p{flex:1 1 320px}
.file-cover{width:100%;aspect-ratio:21/9 !important;margin:0 0 34px}
.home-about .span-all{grid-column:1/-1;margin-top:clamp(20px,3vw,40px)}
.sec .duo{margin-top:22px}
.duo-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.duo-row .duo{margin-top:0}
.office-cards div{padding:0 0 16px;overflow:hidden}
.office-cards div .duo{margin:0 0 14px;border-radius:0}
.office-cards div b,.office-cards div > span{padding:0 18px}
@media (max-width:720px){.peek .peek-img{display:none}.duo-row{grid-template-columns:1fr 1fr}.duo-row .duo:last-child{display:none}.file-cover{aspect-ratio:3/2 !important}}
.fv-name{font-size:min(clamp(52px,9vw,140px),calc(165vw / var(--n,10)))}
.tab:focus:not(:focus-visible){outline:none}
.founder .duo{width:100%}
.founder .duo img{object-position:50% 20%}

/* v3.3 bigger folders: each strip carries its label large in the free top row; the next folder's tab sits in the bottom row */
.strip-head{height:136px;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px 0 30px;text-align:left}
.strip-head .lbl{font-family:var(--display);font-stretch:84%;font-weight:700;font-size:clamp(24px,2.5vw,36px);line-height:1;letter-spacing:-.015em}
.strip-head .sh-meta{display:flex;align-items:center;gap:14px;padding-top:6px;white-space:nowrap}
.strip-head .sh-meta .mono{font-size:12.5px;opacity:.75}
.strip-head .chev{font-size:18px}
.folder:not(.is-open) .strip:hover .lbl{transform:translateX(6px)}
.strip-head .lbl{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.folder.is-open .peek{padding-top:0}
@media (max-width:720px){.strip-head{height:112px;padding:16px 16px 0 18px}.strip-head .lbl{font-size:21px}.strip-head .sh-meta .mono{display:none}}

/* v3.3 hero frames: the four agencies as duotone frames, each under its own colour rule */
.hero-frames{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin-top:clamp(34px,5vw,60px)}
.frame{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--bright);border-top:4px solid var(--c);padding-top:12px}
.frame.f-cx{border-top-color:color-mix(in srgb,var(--cx) 60%,#fff 40%)}
.frame .duo{aspect-ratio:4/5 !important}
.frame .duo img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.frame:hover .duo img{transform:scale(1.04)}
.frame .duo.ph figcaption span:last-child{display:none}
.fr-cap{display:flex;flex-direction:column;gap:3px}
.fr-cap .mono{font-size:12px;color:var(--dim)}
.fr-cap b{font-family:var(--display);font-stretch:84%;font-size:clamp(18px,1.6vw,23px);line-height:1.05;letter-spacing:-.01em}
.fr-cap > span:last-child{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.frame:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:720px){.hero-frames{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.frame .duo img,.strip-head .lbl{transition:none}}

/* v3.4 calmer inner pages: cards lose their boxes, image bands split long sheets into chapters */
.card{background:none;border:0;border-top:1px solid var(--ink);border-radius:0;padding:16px 0 4px}
.cards{gap:28px 30px}
.band{margin:calc(-1 * clamp(10px,2vw,30px)) 0 clamp(40px,6vw,80px)}
.band .duo{aspect-ratio:21/9}
.band-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.band-row .duo{aspect-ratio:4/5}
.band .duo.ph figcaption span:last-child{display:block}
@media (max-width:720px){.band .duo{aspect-ratio:3/2}.band-row{grid-template-columns:1fr 1fr}.band-row .duo:last-child{display:none}}
.card-img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:6px;border-radius:2px}
/* closing headline: three set lines */
.closing h2{max-width:none;font-size:clamp(40px,6.4vw,96px);line-height:.94}
.closing h2 span{display:block;white-space:nowrap}
@media (max-width:480px){.closing h2 span{white-space:normal}}

/* ======================================================================
   v4 real folders (23 Oct 2026). Brand purple desk, one beige stock for every folder, tab and cover in the same stock.
   Folders differ only by their printed halftone texture. Hover lifts a paper out of the folder; the front cover keeps its lip.
   ====================================================================== */
:root{
  --ground:#3E2B78; --ground-2:#33246A; --rule:rgba(255,255,255,.16); --dim:#CFC4E3;
  --paper:#FBF8F2; --fold:#EDE3D2; --fold-rgb:237,227,210; --fold-ink:#2A1C4D;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --light:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 26%,rgba(80,48,16,0) 70%,rgba(80,48,16,.07));
  /* four printed textures in brand-purple ink: fine dots, CX plus marks, 45-degree halftone, coarse dots */
  --tex-industrial:linear-gradient(102deg,rgb(var(--fold-rgb)) 34%,rgba(var(--fold-rgb),0) 88%),radial-gradient(rgba(62,43,120,.34) 1.05px,transparent 1.5px) 0 0/7px 7px;
  --tex-cx:linear-gradient(258deg,rgb(var(--fold-rgb)) 30%,rgba(var(--fold-rgb),0) 92%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 3.4v5.2M3.4 6h5.2' stroke='%233E2B78' stroke-opacity='.4' stroke-width='1.1'/%3E%3C/svg%3E") 0 0/12px 12px;
  --tex-ai:linear-gradient(90deg,rgb(var(--fold-rgb)) 40%,rgba(var(--fold-rgb),0)),radial-gradient(rgba(62,43,120,.30) 1.2px,transparent 1.7px) 0 0/10px 10px,radial-gradient(rgba(62,43,120,.30) 1.2px,transparent 1.7px) 5px 5px/10px 10px;
  --tex-arre:radial-gradient(120% 140% at 100% 0,rgba(var(--fold-rgb),0) 10%,rgb(var(--fold-rgb)) 70%),radial-gradient(rgba(62,43,120,.26) 1.9px,transparent 2.5px) 0 0/13px 13px;
  --tex:var(--tex-industrial);
  --stock:var(--light),var(--tex),var(--noise),var(--fold);
  --tw:clamp(178px,17vw,236px); --tabh:60px; --band:12px; --tr:72px;
}
.f-industrial{--tex:var(--tex-industrial)}.f-cx{--tex:var(--tex-cx)}.f-ai{--tex:var(--tex-ai)}.f-arre{--tex:var(--tex-arre)}
body{background:radial-gradient(90% 60% at 70% 0,#4A3590 0,rgba(74,53,144,0) 60%) no-repeat,var(--ground)}
.top{background:linear-gradient(var(--ground),rgba(62,43,120,.9));border-bottom-color:var(--rule)}
.top nav{background:var(--ground)}
.foot{background:var(--ground-2)}
.closing{background:#2A1C4D}
.frame,.frame.f-cx{border-top-color:var(--fold)}

/* stack geometry: each folder's tab row (tab + back-cover band) sits over the cover of the folder behind it */
.stack{padding-top:var(--tr)}
.folder{--on:var(--fold-ink);--sub:var(--fold);margin-top:calc(-1 * var(--tr));color:var(--fold-ink)}
.folder:first-child{margin-top:0}
.folder:nth-child(1){--i:0}.folder:nth-child(2){--i:1}.folder:nth-child(3){--i:2}.folder:nth-child(4){--i:3}
.tabs{height:var(--tr);gap:0;padding-left:calc(26px + var(--i,0) * (var(--tw) + 6px));align-items:flex-start}
.tabs::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:var(--band);border-radius:7px 7px 0 0;background:var(--noise),var(--fold);
  box-shadow:0 -3px 8px -2px rgba(20,8,48,.22)}

/* the tab: a trapezoid in the same stock, with flared shoulders into the back cover */
.tab.tab-logo{--tc:var(--fold);height:var(--tabh);width:var(--tw);justify-content:center;padding:0 18px;background:none;isolation:isolate;color:var(--fold-ink);z-index:1}
.tab.tab-logo::before{content:"";position:absolute;left:-12px;right:-12px;top:0;bottom:0;bottom:0;width:auto;height:auto;z-index:-1;border-radius:16px 16px 0 0;
  background:var(--light),var(--noise),var(--fold);transform:perspective(120px) rotateX(9deg);transform-origin:50% 100%;box-shadow:0 -4px 10px -3px rgba(20,8,48,.28)}
.tab.tab-logo::after{content:"";position:absolute;left:-26px;right:-26px;bottom:0;top:auto;width:auto;height:14px;z-index:-1;
  background:radial-gradient(circle at 0 0,transparent 13.5px,var(--fold) 14px) 0 100%/14px 14px no-repeat,radial-gradient(circle at 100% 0,transparent 13.5px,var(--fold) 14px) 100% 100%/14px 14px no-repeat}
.tab.tab-logo img{height:40px;max-width:calc(var(--tw) - 44px);width:auto;object-fit:contain}
.f-arre .tab.tab-logo img{height:46px}
.tab:hover,.tab:focus-visible{transform:translateY(-4px)}
.folder.is-open .tab.tab-logo{transform:translateY(-6px)}

/* the front cover */
.strip{display:flex;flex-direction:column;background:var(--stock);color:var(--fold-ink);border-radius:4px 4px 0 0;
  box-shadow:0 -10px 24px -8px rgba(18,8,45,.5),inset 0 1px 0 rgba(255,255,255,.55)}
.folder:last-child .strip{box-shadow:0 -10px 24px -8px rgba(18,8,45,.5),0 34px 60px -26px rgba(10,4,30,.7),inset 0 1px 0 rgba(255,255,255,.55)}
.strip-head{position:relative;z-index:2;background:var(--stock);border-radius:4px 4px 0 0;color:var(--fold-ink);
  transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1)}
.strip-head .sh-meta .mono{opacity:.72}
.folder:not(.is-open) .strip:hover .lbl{transform:translateX(6px)}

/* inside the folder: drawer opens above the cover, a paper rises out of it */
.drawer{order:-1}
.drawer > div{background:linear-gradient(180deg,rgba(52,30,10,.26),rgba(52,30,10,.08) 55%,rgba(52,30,10,.02));box-shadow:inset 0 10px 16px -10px rgba(40,20,6,.45)}
.peek{position:relative;isolation:isolate;margin:22px clamp(16px,4vw,52px) 0;padding:22px 26px 52px;background:var(--paper);color:var(--ink);border-radius:2px 2px 0 0;
  background-image:var(--noise);box-shadow:0 -1px 0 rgba(0,0,0,.04),0 12px 26px -16px rgba(30,16,4,.55);
  opacity:0;transform:translateY(70px) rotate(-.6deg);transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.peek::before{content:"";position:absolute;inset:-8px 14px 0 -10px;z-index:-1;background:#F3EEE4;background-image:var(--noise);border-radius:2px;transform:rotate(1.4deg);box-shadow:0 8px 18px -14px rgba(30,16,4,.5)}
.folder.is-open .peek{opacity:1;transform:translateY(0) rotate(-.6deg);transition-delay:.06s}
.folder.is-open .strip-head{transform:translateY(-28px);box-shadow:0 -14px 22px -12px rgba(35,18,4,.55)}
.peek p{color:var(--ink)}
.peek .btn{--on:var(--ink);--c:var(--paper);color:var(--ink)}
.peek,.folder:last-child .peek{padding-bottom:52px}
.peek .peek-img{outline:1px solid rgba(0,0,0,.08)}

/* hero frames and inner-page folders use the same stock */
.sheet-wrap{background:var(--stock);--tex:var(--tex-industrial);box-shadow:0 30px 60px -30px rgba(10,4,30,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.sheet-wrap .paper{box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 36px -22px rgba(30,16,4,.6)}
.legal .sheet-wrap{--tex:var(--tex-ai)}
.band .duo{outline-color:rgba(255,255,255,.12)}

/* file view: the opened folder, its tab and the rail are the same stock */
.fv-sheet{background:var(--stock);box-shadow:0 30px 60px -30px rgba(10,4,30,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.fv-tab{background:var(--light),var(--noise),var(--fold);box-shadow:0 -4px 10px -3px rgba(20,8,48,.25)}
.fv-rail button{background:var(--light),var(--noise),var(--fold);color:var(--fold-ink);box-shadow:4px 0 12px -6px rgba(10,4,30,.5)}
.fv-rail button.on-light{color:var(--fold-ink)}
.fv-rail button[aria-current="true"]{font-weight:700}
.fv-next{position:relative;background:var(--stock);color:var(--fold-ink);border-radius:4px 4px 0 0;margin-top:calc(clamp(60px,8vw,110px) + 60px);box-shadow:0 -12px 26px -10px rgba(10,4,30,.6)}
.fv-next.on-light{color:var(--fold-ink)}
.fv-next-tab{position:absolute;left:max(20px,calc((100% - 1320px) / 2 + 20px));top:-56px;height:56px;width:var(--tw);display:flex;align-items:center;justify-content:center;
  background:var(--light),var(--noise),var(--fold);border-radius:15px 15px 0 0;box-shadow:0 -4px 10px -3px rgba(20,8,48,.3)}
.fv-next-tab img{height:36px;width:auto;max-width:calc(var(--tw) - 40px)}

@media (max-width:1100px){:root{--tw:clamp(150px,19vw,200px)}.tab.tab-logo img{height:34px}.f-arre .tab.tab-logo img{height:40px}}
@media (max-width:720px){
  :root{--tw:min(46vw,190px);--tabh:50px;--band:10px;--tr:60px}
  .tabs{padding-left:14px}
  .folder:nth-child(even) .tabs{justify-content:flex-end;padding-left:0;padding-right:14px}
  .strip-head{height:112px}
  .tab.tab-logo img{height:28px}.f-arre .tab.tab-logo img{height:32px}
  .peek{margin-inline:12px;padding:16px 16px 44px}
  .folder.is-open .strip-head{transform:translateY(-22px)}
}
@media (prefers-reduced-motion:reduce){.peek,.folder.is-open .peek{transform:none}.strip-head,.folder.is-open .strip-head{transition:none}}
.folder.is-open .peek{padding-top:22px}
/* v4.1 printed halftones (assets/tex/*.svg): dots or plus marks that grow toward one corner, one pattern per agency */
:root{
  --strip-h:150px;
}
.fv-sheet[data-tex="industrial"],.fv-next[data-tex="industrial"]{--tex:var(--tex-industrial)}
.fv-sheet[data-tex="cx"],.fv-next[data-tex="cx"]{--tex:var(--tex-cx)}
.fv-sheet[data-tex="ai"],.fv-next[data-tex="ai"]{--tex:var(--tex-ai)}
.fv-sheet[data-tex="arre"],.fv-next[data-tex="arre"]{--tex:var(--tex-arre)}
.strip-head{height:var(--strip-h)}
.strip{box-shadow:0 -6px 16px -6px rgba(18,8,45,.38),inset 0 1px 0 rgba(255,255,255,.55)}
.folder:last-child .strip{box-shadow:0 -6px 16px -6px rgba(18,8,45,.38),0 34px 60px -26px rgba(10,4,30,.7),inset 0 1px 0 rgba(255,255,255,.55)}
.tabs::after{box-shadow:0 -2px 5px -1px rgba(20,8,48,.16)}
@media (max-width:720px){:root{--strip-h:118px}.strip-head{height:var(--strip-h)}}
/* the website name is a small paper sticker on the cover */
.strip-head .sh-meta .mono{opacity:1;background:var(--paper);background-image:var(--noise);color:var(--fold-ink);padding:5px 11px;border-radius:2px;box-shadow:0 1px 0 rgba(255,255,255,.6),0 2px 5px -1px rgba(40,20,6,.28);transform:rotate(-.4deg)}
.strip-head .chev{background:var(--paper);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;box-shadow:0 2px 5px -1px rgba(40,20,6,.28)}
.svc li{grid-template-columns:minmax(0,1fr)}

/* v4.2 clean (user: "so much clutter"): plain beige stock, no printed textures, no stickers, slim Mosby folders with a small label on the right */
:root{--tex-industrial:none;--tex-cx:none;--tex-ai:none;--tex-arre:none;--tex:none;--tw:clamp(160px,14vw,210px);--strip-h:var(--tr)}
.strip-head{height:var(--tr);padding:0 26px var(--band) 30px;align-items:center;justify-content:flex-end;gap:10px}
.strip-head .lbl,.folder:not(.is-open) .strip:hover .lbl{font-family:var(--mono);font-weight:400;font-size:13.5px;letter-spacing:0;line-height:1.3;transform:none}
.strip-head .sh-meta .mono{display:none}
.strip-head .sh-meta{padding-top:0}
.strip-head .chev{background:none;box-shadow:none;width:auto;height:auto;font-size:15px}
.tab.tab-logo img{height:36px}.f-arre .tab.tab-logo img{height:42px}
.peek::before{display:none}
.peek{transform:translateY(60px) rotate(-.4deg)}
.folder.is-open .peek{transform:translateY(0) rotate(-.4deg)}
.folder:last-child .strip{padding-bottom:18px}
.tabs::after{box-shadow:0 -1px 3px rgba(20,8,48,.1)}
.strip,.folder:last-child .strip{box-shadow:0 -4px 12px -6px rgba(18,8,45,.32),inset 0 1px 0 rgba(255,255,255,.5)}
.folder:last-child .strip{box-shadow:0 -4px 12px -6px rgba(18,8,45,.32),0 30px 50px -28px rgba(10,4,30,.6),inset 0 1px 0 rgba(255,255,255,.5)}
@media (max-width:999px){
  .tabs,.folder:nth-child(even) .tabs{justify-content:flex-start;padding-left:20px;padding-right:0}
  .l-long{display:none}.l-short{display:inline}
}
@media (max-width:720px){
  :root{--tw:150px}
  .strip-head{height:var(--tr);padding:0 16px var(--band) 16px}
  .tabs,.folder:nth-child(even) .tabs{padding-left:12px}
  .tab.tab-logo img{height:26px}.f-arre .tab.tab-logo img{height:30px}
  .strip-head .lbl{font-size:12.5px}
}
/* v4.3 finishing: the tab flows into the back cover with no seam. No shadow under the shoulders, same flat stock, shoulders kept inside the cover edge */
.tabs::after{box-shadow:none;background:var(--fold);left:6px;right:6px}
.tab.tab-logo::before{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),var(--fold);box-shadow:0 -3px 8px -4px rgba(20,8,48,.22)}
.tab.tab-logo::after{left:-22px;right:-22px;height:10px;
  background:radial-gradient(circle at 0 0,transparent 9.5px,var(--fold) 10px) 0 100%/10px 10px no-repeat,radial-gradient(circle at 100% 0,transparent 9.5px,var(--fold) 10px) 100% 100%/10px 10px no-repeat}
.tabs{padding-left:calc(40px + var(--i,0) * (var(--tw) + 6px))}
@media (max-width:999px){.tabs,.folder:nth-child(even) .tabs{padding-left:36px}}
@media (max-width:720px){.tabs,.folder:nth-child(even) .tabs{padding-left:30px}}
@media (max-width:720px){:root{--tw:128px}.tabs,.folder:nth-child(even) .tabs{padding-left:26px}.tab.tab-logo{padding:0 10px}.tab.tab-logo img{height:24px}.f-arre .tab.tab-logo img{height:28px}.strip-head .lbl{font-size:12px}}
/* the tab is part of the back cover: it never lifts on its own (a lift opened a gap above the cover band) */
.tab:hover,.tab:focus-visible,.folder.is-open .tab.tab-logo,.tab.tab-logo{transform:none}

/* v4.4 minimal (user: "shadows reduce minimalism"): flat stock, no shadows, no back-cover band, no tilt.
   Folders step from deeper beige at the back to lighter at the front, so each tab reads against the folder behind it. */
.folder:nth-child(1){--fold:#E3D7C3}.folder:nth-child(2){--fold:#E9DFCE}.folder:nth-child(3){--fold:#EEE6D8}.folder:nth-child(4){--fold:#F3EDE2}
.tabs::after{display:none}
.tab.tab-logo::before{background:var(--fold);box-shadow:none}
.strip,.folder:last-child .strip,.strip-head,.folder.is-open .strip-head{background:var(--fold);box-shadow:none}
.drawer > div{background:color-mix(in srgb,var(--fold) 88%,#2A1C4D);box-shadow:none}
.peek,.folder.is-open .peek{box-shadow:none;background-image:none;border-radius:0;transform:none}
.peek{opacity:0;transform:translateY(40px)}
.folder.is-open .peek{opacity:1;transform:none}
.peek .peek-img{outline:0}
.sheet-wrap,.fv-sheet{background:var(--fold);box-shadow:none}
.sheet-wrap .paper,.paper{box-shadow:none;background-image:none}
.fv-tab,.fv-rail button,.fv-next-tab{background:var(--fold);box-shadow:none}
.fv-next{background:var(--fold);box-shadow:none}
@media (prefers-reduced-motion:reduce){.peek{transform:none}}
.tabs{align-items:flex-end}
.strip-head{padding-bottom:0}

/* ======================================================================
   v5 Mosby hover (23 Oct 2026). The hovered folder's cover slides down and a touch wider, uncovering a strip of its back
   cover under the tab; every folder below slides down with it. The description sits on the folder, under the label.
   Desk objects (flat): white-bordered prints held by paperclips, a sticky note with a push pin, a typed index card.
   ====================================================================== */
:root{--pull:18px}
.drawer{order:0}
.folder,.strip{transition:translate .5s cubic-bezier(.22,1,.36,1)}
/* back cover strip: hidden behind the front cover until the cover slides down */
.tabs::after{display:block;left:10px;right:10px;bottom:calc(-1 * var(--pull) - 4px);height:calc(var(--pull) + 4px);border-radius:0;box-shadow:none;
  background:color-mix(in srgb,var(--fold) 93%,#2A1C4D)}
.strip{background:none;isolation:isolate}
.strip::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fold);border-radius:4px 4px 0 0;border-top:1px solid transparent;
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .3s}
.strip-head,.folder.is-open .strip-head{background:none;transform:none}
.folder.is-open .strip{translate:0 var(--pull)}
.folder.is-open .strip::before{transform:scaleX(1.012);border-top-color:rgba(42,28,77,.14)}
.folder.is-open ~ .folder{translate:0 var(--pull)}
.folder.is-open .strip-head .chev{transform:rotate(-90deg)}

/* the description lives on the folder (no separate sheet) */
.drawer > div{background:none}
.peek,.folder.is-open .peek,.folder:last-child .peek{margin:0;background:none;color:var(--fold-ink);
  padding:6px 30px calc(var(--tr) + 34px) 34px;align-items:center;gap:22px 48px}
.folder:last-child .peek{padding-bottom:34px}
.peek{opacity:0;transform:translateY(16px)}
.folder.is-open .peek{opacity:1;transform:none}
.peek p{font-family:var(--mono);font-size:14.5px;line-height:1.65;max-width:62ch;color:var(--fold-ink)}

/* print: white border, slight turn, a paperclip over the top edge */
.print{position:relative;background:#FFFDF8;padding:7px;transform:rotate(-1.8deg);outline:1px solid rgba(42,28,77,.1)}
.print .duo{margin:0;outline:0;border-radius:0}
.print .clip{position:absolute;z-index:2;top:-20px;right:16%;width:16px;height:48px;color:#A39CB0}
.peek .print{transform:rotate(-2.4deg)}
.founder .print{transform:rotate(-1.4deg)}
.founder .print .duo{aspect-ratio:4/5}

/* file cover: a print with a sticky note pinned over its corner */
.file-collage{position:relative;margin:6px 0 64px}
.file-collage .print{width:min(76%,860px)}
.file-collage .print .duo{aspect-ratio:21/9 !important}
.sticky{position:absolute;right:3%;bottom:-34px;width:min(300px,36%);background:#F3E2A0;color:#2A1C4D;padding:30px 24px 24px;transform:rotate(2.4deg);display:flex;flex-direction:column;gap:6px}
.sticky .mono{font-size:12px;opacity:.7}
.sticky b{font-family:var(--display);font-stretch:84%;font-weight:700;font-size:clamp(19px,1.8vw,25px);line-height:1.08;letter-spacing:-.01em}
.pin{position:absolute;top:9px;left:50%;width:15px;height:15px;margin-left:-7px;border-radius:50%;background:#5B3FA0;box-shadow:inset -2px -2px 0 rgba(0,0,0,.18)}
.pin::after{content:"";position:absolute;left:4px;top:3px;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5)}

/* AI example: a typed index card with a clip */
.block.example{position:relative;background:#E4DAF3;padding:28px 28px 22px;transform:rotate(-.6deg);margin-top:40px}
.block.example .clip{position:absolute;top:-22px;left:10%;width:16px;height:48px;color:#A39CB0}
.block.example .mini{margin-top:0}
.block.example dd,.block.example dt{font-family:var(--mono);font-size:14.5px}

@media (max-width:720px){
  :root{--pull:12px}
  .peek,.folder.is-open .peek{padding:4px 16px calc(var(--tr) + 24px) 18px}
  .folder:last-child .peek{padding-bottom:24px}
  .peek p{font-size:13.5px}
  .file-collage .print{width:100%}
  .sticky{position:relative;right:auto;bottom:auto;width:auto;max-width:280px;margin:-18px 0 0 auto}
}
@media (prefers-reduced-motion:reduce){.folder,.strip,.strip::before{transition:none}}
.folder:last-child .strip{background:none}
/* GSAP writes inline translate:none on .folder (intro and file-view tweens), so the slide goes on the folder's children */
.folder.is-open ~ .folder{translate:none}
.tabs{transition:translate .5s cubic-bezier(.22,1,.36,1)}
.folder.is-open ~ .folder > .tabs,.folder.is-open ~ .folder > .strip{translate:0 var(--pull)}
.print .clip,.block.example .clip{width:22px;height:66px;top:-28px;color:#8C84A0}
.file-collage .print.file-cover{aspect-ratio:auto !important;margin:0}
@media (max-width:720px){.file-collage .print .duo{aspect-ratio:3/2 !important}}

/* v6 Mosby tilt (from mosbyfiles.com source: --stack-perspective 3000px, --stack-rotation-angle -3deg, transform-origin bottom).
   The hovered folder tilts toward the viewer on its bottom edge: bottom corners stay, the top edge comes forward and widens.
   Folders below do not slide; only the opened description pushes them, smoothly. Nothing is open at rest. */
.folder-in{position:relative;transform-origin:50% 100%;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.folder.is-open .folder-in{transform:perspective(3000px) rotateX(-3deg)}
.folder.is-open .strip,.folder.is-open ~ .folder > .tabs,.folder.is-open ~ .folder > .strip,.folder.is-open ~ .folder .tabs,.folder.is-open ~ .folder .strip{translate:none}
.folder.is-open .strip::before{transform:none}
/* the back cover shows between tab and cover: the tab row (with its back cover strip) rises, the cover stays */
.folder .tabs{transition:translate .6s cubic-bezier(.22,1,.36,1)}
.folder.is-open .tabs{translate:0 calc(-1 * var(--pull))}
@media (prefers-reduced-motion:reduce){.folder-in,.folder .tabs{transition:none}.folder.is-open .folder-in{transform:none}}
/* the back cover strip is the same stock as its tab (user: "colour should match"); the cover's top hairline separates them */
.tabs::after{background:var(--fold)}

/* v6.1 tab shoulders: one smooth curve per side (own SVG mask), no trapezoid + curl seam.
   Shadow only on hover: the tilted cover's top and side edges cast a firm shadow so the depth reads; flat at rest. */
:root{--S:calc(var(--tabh) * .95);--tm:clamp(150px,12.5vw,186px);--tab-side:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 44' preserveAspectRatio='none'%3E%3Cpath d='M0 0C9 0 16 3.5 21 10.5L39 33C44 40 51 44 62 44H0Z'/%3E%3C/svg%3E")}
.tabs{padding-left:calc(var(--S) + 14px + var(--i,0) * (var(--tm) + var(--S) + 8px))}
.tab.tab-logo{width:var(--tm);padding:0 4px;background:var(--fold);border-radius:0;isolation:auto}
.tab.tab-logo::before,.tab.tab-logo::after{content:"";position:absolute;top:0;bottom:0;width:calc(var(--S) + 1px);height:auto;z-index:0;border-radius:0;box-shadow:none;transform:none;
  background:var(--fold);-webkit-mask:var(--tab-side) 0 0/100% 100% no-repeat;mask:var(--tab-side) 0 0/100% 100% no-repeat}
.tab.tab-logo::after{left:auto;right:calc(-1 * var(--S))}
.tab.tab-logo::before{right:auto;left:calc(-1 * var(--S));transform:scaleX(-1)}
.tab.tab-logo img{position:relative;z-index:1;max-width:calc(var(--tm) - 12px)}
.f-arre .tab.tab-logo img{height:40px}
.strip::before{transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .6s cubic-bezier(.22,1,.36,1)}
.folder.is-open .strip::before{box-shadow:0 -3px 12px -2px rgba(20,8,48,.32),12px 0 18px -10px rgba(20,8,48,.55),-12px 0 18px -10px rgba(20,8,48,.55)}
@media (max-width:999px){.tabs,.folder:nth-child(even) .tabs{padding-left:calc(var(--S) + 12px)}}
@media (max-width:720px){:root{--tm:118px;--S:calc(var(--tabh) * .8)}.tabs,.folder:nth-child(even) .tabs{padding-left:calc(var(--S) + 8px)}.tab.tab-logo img{height:24px}.f-arre .tab.tab-logo img{height:28px}}
/* v6.2 tab sizing: the fourth tab must clear the third folder's label */
:root{--tm:clamp(120px,10.5vw,150px);--S:clamp(36px,3.3vw,48px)}
@media (max-width:1180px){.l-long{display:none}.l-short{display:inline}}

/* v6.3 finishing against Mosby's file page (23 Oct) */
/* softer shadows everywhere, at Mosby's level (0 -1px 8px at 15%) */
.folder.is-open .strip::before{box-shadow:0 -1px 8px rgba(20,8,48,.15),6px 0 12px -8px rgba(20,8,48,.22),-6px 0 12px -8px rgba(20,8,48,.22)}
/* open file: no top tab; the agency tabs run down the right edge, attached with curved shoulders, the open one in the folder's own stock */
:root{--rs:22px;--rail-shoulder:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 62' preserveAspectRatio='none'%3E%3Cpath d='M0 0C0 9 3.5 16 10.5 21L33 39C40 44 44 51 44 62H0Z'/%3E%3C/svg%3E")}
.fv-tab{display:none}
.fv-sheet{margin-top:8px;border-radius:4px 0 4px 4px}
.fv-grid{grid-template-columns:minmax(0,1fr) 60px;gap:0}
/* margin-bottom: the sticky rail stops before the folder's bottom edge, so the last tab's lower shoulder stays on the folder */
.fv-rail{margin-top:56px;margin-bottom:calc(var(--rs) + 32px);gap:calc(2 * var(--rs) + 10px);align-items:flex-start}
/* the curved shoulders (::before/::after) round the tab ends, so the body stays square: a radius here left a notch where they meet */
.fv-rail button{position:relative;background:var(--fold);color:var(--fold-ink);width:44px;border-radius:0;padding:22px 0;box-shadow:none;font-weight:500}
.fv-rail button::before,.fv-rail button::after{content:"";position:absolute;left:0;width:100%;height:var(--rs);background:var(--fold);
  -webkit-mask:var(--rail-shoulder) 0 0/100% 100% no-repeat;mask:var(--rail-shoulder) 0 0/100% 100% no-repeat;pointer-events:none}
.fv-rail button::before{top:calc(-1 * var(--rs) + 1px)}
.fv-rail button::after{bottom:calc(-1 * var(--rs) + 1px);transform:scaleY(-1)}
.fv-rail button:hover{width:50px}
.fv-rail button[aria-current="true"]{width:52px;font-weight:700}
/* paper: faint grain, punched holes that show the folder behind, a quiet margin line, a drop cap on the first paragraph */
.paper,.sheet-wrap .paper,.fv-sheet .paper{background-color:var(--paper);background-image:var(--noise)}
.paper::after{background:radial-gradient(circle,color-mix(in srgb,var(--fold) 84%,#2A1C4D) 6px,transparent 6.5px) 0 0/14px 160px repeat-y}
.paper::before{border-left-color:rgba(42,28,77,.14)}
.paper p.drop::first-letter{float:left;font-family:var(--display);font-stretch:84%;font-weight:700;font-size:4.1em;line-height:.82;margin:.06em .1em 0 0;color:var(--ink)}
/* the peek button sat on beige: hover must flip to ink with paper text (the earlier rule kept ink text on ink) */
.peek .btn:hover,.peek .btn:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ======================================================================
   v7 audit fixes (23 Oct 2026). IDs refer to the pre-launch audit report.
   ====================================================================== */
/* A-01 hit areas: a folder's transparent box must never sit over the folder above it; only its tab and its cover take the pointer */
.folder,.folder-in{pointer-events:none}
.folder .tab,.folder .strip{pointer-events:auto}
/* A-05 phones and tablets: each label gets its own row above the next folder's tab, so a label always sits with its own folder */
@media (max-width:999px){
  .strip-head{height:calc(var(--tr) + 44px);align-items:flex-start;padding-top:14px}
}
/* A-08 file view on phones and portrait tablets: no empty rail column; long buttons wrap instead of running off the page */
@media (max-width:900px){.fv-grid{grid-template-columns:minmax(0,1fr)}}
.file-cta .btn,.sec .btn,.closing .btn{white-space:normal;max-width:100%;text-align:left}
/* A-09 logos keep their proportions in every slot */
.tab.tab-logo img,.fv-next-tab img,.file-head img,.top .logo img{object-fit:contain}
/* A-17 forms: visible field borders and a real checkbox */
form.f input,form.f select,form.f textarea{border-color:#8A7F9C}
form.f input[type="checkbox"]{appearance:auto;-webkit-appearance:checkbox;width:20px;height:20px;min-width:20px;accent-color:#2A1C4D;background:none;border:0;padding:0}
form.f [aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 1px #B3261E}
.field-error{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:#B3261E;font-weight:500}
.form-status{margin:4px 0 0;font-size:15px;min-height:1px}
.form-status:empty{display:none}
.form-status.is-ok{color:#1E6B45;font-weight:600}
.form-status.is-error{color:#B3261E;font-weight:600}
/* A-18 calmer line breaks: no lone last word in headings; phone numbers never split */
h1,h2,h3,.h-display{text-wrap:balance}
.nw{white-space:nowrap}
/* A-25 tap targets of 44px for the only exits on phones */
.menu-btn{min-height:44px;min-width:44px;padding:10px 14px}
.fv-back{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
.faq summary{padding-block:12px}
.foot ul a,.legal a{display:inline-block;padding-block:4px}
/* A-30 anchors and focused fields land below the fixed header */
[id]{scroll-margin-top:92px}
form.f input,form.f select,form.f textarea{scroll-margin-top:110px}
/* A-32 nothing wider than a 320px phone */
.cards{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
/* A-33 solid header (page text no longer shows through); file title never smaller than its lede on phones */
.top{background:var(--ground)}
@media (max-width:640px){.fv-name{font-size:clamp(34px,9vw,52px)}}
/* A-34 focus ring readable on every surface */
:focus-visible{outline:3px solid #F3E2A0;outline-offset:2px}
.paper :focus-visible,.strip :focus-visible,.sheet-wrap :focus-visible,.fv-rail :focus-visible,.fv-next:focus-visible,.peek :focus-visible,form.f :focus-visible{outline-color:#2A1C4D}
/* A-40 the photo's paperclip sits inside the drawer, not cut by it */
.peek .print .clip{top:-8px;height:48px}
/* A-41 buttons: border, fill and text change together; the light CTA has a hover */
.btn{transition:background-color .3s,color .3s,border-color .3s}
.btn.light:hover,.btn.light:focus-visible{background:#F3E2A0;border-color:#F3E2A0;color:var(--ink)}
/* A-23 header lines up with the page content on wide screens */
.top{padding-left:max(20px,calc((100vw - 1320px) / 2));padding-right:max(20px,calc((100vw - 1320px) / 2))}
/* A-24 hero captions start at the same height */
@media (min-width:721px){.fr-cap b{min-height:2.15em}}
/* agency pages (/companies/{slug}/): the static file, readable with or without JS */
.agency-static{background:var(--fold);padding:clamp(16px,3vw,40px) clamp(14px,3vw,40px) clamp(30px,5vw,60px)}
.agency-static .close{display:none}
.plain-list{margin:0 0 18px;padding-left:20px;line-height:1.9}
.soon{color:var(--ink-2);font-size:.9em}
/* the file view opens over the static agency page; hide the page under it (it reveals itself after 1.5 s if scripts never run) */
body[data-open] main{visibility:hidden;animation:gp-reveal 0s 1.5s forwards}
@keyframes gp-reveal{to{visibility:visible}}
html:not(.fv-open) body[data-open] main{animation-delay:1.5s}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}