/* Metric-matched fallback for the sans only. Measured in-browser on real body
   copy: DM Sans 788px, Arial 758px -> size-adjust 103.96%, which takes the swap
   from -3.8% to zero. No serif fallback is defined on purpose: Georgia already
   sets our headline within 0.22% of DM Serif Display, and every type role here
   carries an explicit line-height, so vertical overrides would do nothing. */
@font-face{font-family:'AB Sans Fallback';src:local('Arial');
  size-adjust:103.96%;ascent-override:95.42%;descent-override:29.82%;line-gap-override:0%}
/* ALBLANCO — shared design system
   Tokens and components per the alblanco-template-assets skill (web-guide.md).
   Background is cream #F0EDE6, never pure white. */

:root{
  --ab-cream:#F0EDE6; --ab-cream-dark:#E8E4DB; --ab-ink:#1A1A18; --ab-ink-light:#4A4A46;
  --ab-stone:#8A8A84; --ab-stone-light:#B5B5AE; --ab-divider:#D4D0C8; --ab-warm-tint:#E2DDD3;
  --ab-font-serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --ab-font-sans:'DM Sans','AB Sans Fallback',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --ab-space-sm:16px; --ab-space-md:32px; --ab-space-lg:64px; --ab-space-xl:120px; --ab-space-2xl:160px;
  --ab-max-width:1100px; --ab-text-max-width:640px; --ab-page-padding:80px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--ab-font-sans);font-weight:400;color:var(--ab-ink-light);background-color:var(--ab-cream);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
.ab-page{max-width:var(--ab-max-width);margin:0 auto;padding:0 var(--ab-page-padding)}
.ab-caption{font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ab-stone);line-height:1.5}
.ab-divider{height:1px;background:var(--ab-divider)}

/* ---------- header ---------- */
.ab-header{position:sticky;top:0;z-index:20;background:rgba(240,237,230,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--ab-divider)}
.ab-header-inner{max-width:var(--ab-max-width);margin:0 auto;padding:18px var(--ab-page-padding);display:flex;align-items:center;justify-content:space-between;gap:var(--ab-space-md)}
.ab-header-left{display:flex;align-items:center;gap:14px}
.ab-monogram{width:38px;height:38px;flex-shrink:0}
.ab-wordmark{display:flex;align-items:center;gap:12px}
.ab-wordmark-line{display:block;width:44px;height:1px;background:var(--ab-ink)}
.ab-logo{font-weight:700;font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--ab-ink)}
.ab-nav{display:flex;align-items:center;gap:28px}
.ab-nav a{font-size:14px;text-decoration:none;color:var(--ab-ink);opacity:.75;transition:opacity .2s ease}
.ab-nav a:hover,.ab-nav a[aria-current="page"]{opacity:1}
.ab-nav-cta{font-size:14px;color:var(--ab-ink);text-decoration:none;border-bottom:1px solid var(--ab-ink);padding-bottom:2px;transition:opacity .2s ease}
.ab-nav-cta:hover{opacity:.65}
.ab-nav-toggle{display:none}

/* ---------- hero ---------- */
.ab-hero{padding-top:var(--ab-space-2xl);padding-bottom:var(--ab-space-xl)}
.ab-hero-meta{display:flex;gap:var(--ab-space-md);flex-wrap:wrap;margin-bottom:var(--ab-space-md)}
.ab-hero h1{font-family:var(--ab-font-serif);font-weight:400;font-size:clamp(38px,6.4vw,68px);line-height:1.08;color:var(--ab-ink);max-width:860px;letter-spacing:-.017em}
.ab-hook{font-family:var(--ab-font-serif);font-size:clamp(24px,3.4vw,34px);line-height:1.25;color:var(--ab-ink);margin-top:var(--ab-space-md);max-width:720px;letter-spacing:-.013em}
.ab-editorial{font-size:17px;color:var(--ab-ink-light);margin-top:var(--ab-space-sm);max-width:var(--ab-text-max-width)}

/* ---------- facts ---------- */
.ab-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ab-space-md);padding:var(--ab-space-lg) 0}
.ab-fact-n{font-family:var(--ab-font-serif);font-size:30px;line-height:1.1;color:var(--ab-ink);margin-bottom:6px;letter-spacing:-.013em}

/* ---------- brand grid ---------- */
.ab-section{padding-top:var(--ab-space-xl);padding-bottom:var(--ab-space-xl)}
.ab-section-heading{font-family:var(--ab-font-serif);font-weight:400;font-size:clamp(20px,3vw,28px);line-height:1.3;color:var(--ab-ink);letter-spacing:-.010em}
.ab-section-head{margin-bottom:var(--ab-space-lg)}
.ab-section-head .ab-caption{margin-bottom:12px}
.ab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ab-tile{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ab-cream-dark)}
.ab-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.ab-tile:hover img{transform:scale(1.04)}
.ab-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.18) 45%,rgba(0,0,0,0));pointer-events:none;z-index:1}
.ab-tile-type::after{display:none}
.ab-tile-name{position:absolute;left:14px;bottom:12px;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55);z-index:2}
.ab-tile-type{display:flex;align-items:center;justify-content:center;height:100%;background:var(--ab-cream-dark)}
.ab-tile-type span{font-family:var(--ab-font-serif);font-size:clamp(26px,3.4vw,40px);color:var(--ab-ink);letter-spacing:-.013em}
.ab-tile-type .ab-tile-name{color:var(--ab-ink);text-shadow:none}
/* differentiation matrix */
.ab-matrix{width:100%;border-collapse:collapse;margin-top:var(--ab-space-md)}
.ab-matrix th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ab-stone);padding:0 var(--ab-space-md) 10px 0;border-bottom:1px solid var(--ab-divider);white-space:nowrap}
.ab-matrix td{padding:13px var(--ab-space-md) 13px 0;border-bottom:1px solid var(--ab-divider);font-size:15px;color:var(--ab-ink-light);vertical-align:baseline}
.ab-matrix td:first-child{color:var(--ab-ink);font-weight:700;white-space:nowrap}
.ab-matrix-wrap{overflow-x:auto}
@media (max-width:900px){.ab-matrix td,.ab-matrix th{font-size:13px;padding-right:var(--ab-space-sm)}}
.ab-reels{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.ab-reel{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--ab-cream-dark)}
.ab-reel video{width:100%;height:100%;object-fit:cover;display:block}
.ab-reel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));pointer-events:none;z-index:1}
@media (max-width:900px){.ab-reels{grid-template-columns:repeat(2,1fr)}}
.ab-credit{margin-top:var(--ab-space-md);font-size:13px;color:var(--ab-stone)}
.ab-credit a{color:var(--ab-ink-light);text-decoration:underline;text-underline-offset:3px}

/* ---------- narrative ---------- */
.ab-block{padding:var(--ab-space-lg) 0;border-top:1px solid var(--ab-divider);display:grid;grid-template-columns:220px 1fr;gap:var(--ab-space-lg)}
/* STAR labels are stage directions, not the story. They name where you are in
   the argument and then get out of the way, so the narrative beats around them
   become the loudest thing on the page. */
.ab-block h2{font-family:var(--ab-font-sans);font-weight:500;font-size:11px;line-height:1.5;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ab-stone);margin-bottom:14px}
.ab-block p{font-size:17px;line-height:1.65;color:var(--ab-ink-light);max-width:var(--ab-text-max-width)}
.ab-block p + p{margin-top:var(--ab-space-sm)}
.ab-sub{margin-top:var(--ab-space-md)}
.ab-sub h3{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ab-ink);margin-bottom:6px}
.ab-statement{font-family:var(--ab-font-serif);font-size:clamp(22px,3vw,30px);line-height:1.35;color:var(--ab-ink);max-width:720px;padding:var(--ab-space-lg) 0;letter-spacing:-.013em}

/* ---------- capabilities ---------- */
.ab-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--ab-space-md)}
.ab-tag{font-size:12px;letter-spacing:.04em;color:var(--ab-ink-light);border:1px solid var(--ab-divider);padding:7px 13px;border-radius:100px}

/* ---------- conversion ---------- */
.ab-convert{background:var(--ab-warm-tint);margin-top:var(--ab-space-xl);padding:var(--ab-space-xl) 0}
.ab-convert h2{font-family:var(--ab-font-serif);font-weight:400;font-size:clamp(28px,4.4vw,44px);line-height:1.15;color:var(--ab-ink);max-width:640px;letter-spacing:-.015em}
.ab-actions{display:flex;flex-wrap:wrap;gap:var(--ab-space-md);margin-top:var(--ab-space-lg);align-items:center}
.ab-actions a{font-size:15px;color:var(--ab-ink);text-decoration:none;border-bottom:1px solid var(--ab-ink);padding-bottom:3px;transition:opacity .2s ease}
.ab-actions a:hover{opacity:.65}

/* ---------- footer ---------- */
.ab-footer{background:var(--ab-warm-tint);padding:0 0 var(--ab-space-md)}
.ab-footer-bottom{display:flex;justify-content:space-between;padding-top:var(--ab-space-sm);flex-wrap:wrap;gap:12px}
.ab-footer .ab-caption{font-weight:700;color:var(--ab-ink);letter-spacing:.12em}

/* ---------- motion ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease-out,transform .7s ease-out}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .ab-tile img{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--ab-page-padding:24px;--ab-space-xl:80px;--ab-space-2xl:100px}
  .ab-nav{display:none}
  .ab-facts{grid-template-columns:repeat(2,1fr)}
  .ab-grid{grid-template-columns:repeat(2,1fr)}
  .ab-block{grid-template-columns:1fr;gap:var(--ab-space-sm)}
}

/* ---------- language switch ---------- */
.ab-lang{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ab-stone);text-decoration:none;border:1px solid var(--ab-divider);padding:5px 10px;border-radius:100px;transition:color .2s ease,border-color .2s ease}
.ab-lang:hover{color:var(--ab-ink);border-color:var(--ab-stone)}

/* ---------- approach phases ---------- */
.ab-phase-list{display:grid;gap:0}
.ab-phase{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--ab-space-lg);padding:var(--ab-space-md) 0;border-bottom:1px solid var(--ab-divider);align-items:baseline}
.ab-phase-num{font-family:var(--ab-font-serif);font-size:28px;color:var(--ab-stone-light);letter-spacing:-.010em}
.ab-phase-name{font-family:var(--ab-font-serif);font-weight:400;font-size:24px;color:var(--ab-ink);margin-bottom:4px;letter-spacing:-.010em}
.ab-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ab-space-md);margin-top:var(--ab-space-lg)}
.ab-caps h3{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ab-ink);margin-bottom:12px}
.ab-caps ul{list-style:none}
.ab-caps li{font-size:14px;line-height:1.9;color:var(--ab-ink-light)}
.ab-people{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ab-space-lg);max-width:760px}
.ab-person{font-family:var(--ab-font-serif);font-weight:400;font-size:26px;color:var(--ab-ink);margin-bottom:6px;letter-spacing:-.010em}
@media (max-width:900px){
  .ab-phase{grid-template-columns:60px minmax(0,1fr);gap:var(--ab-space-md)}
  .ab-caps{grid-template-columns:repeat(2,1fr)}
  .ab-people{grid-template-columns:1fr;gap:var(--ab-space-md)}
}

/* ---------- ZLYDE case: product shots ---------- */
.ab-zl-shots{display:grid;grid-template-columns:minmax(0,1.333fr) minmax(0,0.573fr);gap:var(--ab-space-md);align-items:end}
.ab-zl-shots img{width:100%;height:auto;display:block}
.ab-zl-desk,.ab-zl-mob{background:var(--ab-cream-dark);overflow:hidden}
.ab-zl-brand{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.ab-zl-brand img{width:100%;height:auto;display:block}
@media (max-width:900px){
  .ab-zl-shots{grid-template-columns:1fr}
  .ab-zl-mob{max-width:60%;margin:0 auto}
  .ab-zl-brand{grid-template-columns:1fr}
}

/* ---------- case listing rows (home + /work) ---------- */
.ab-case-row{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--ab-space-lg);padding:var(--ab-space-lg) 0;border-top:1px solid var(--ab-divider);align-items:start;text-decoration:none;color:inherit}
.ab-case-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--ab-cream-dark)}
.ab-case-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
a.ab-case-row:hover .ab-case-thumb img{transform:scale(1.04)}
.ab-case-thumb-empty{display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--ab-font-serif);font-size:24px;color:var(--ab-stone-light);text-align:center;padding:0 12px;letter-spacing:-.010em}
.ab-case-title{font-family:var(--ab-font-serif);font-size:clamp(22px,2.6vw,30px);line-height:1.2;color:var(--ab-ink);margin:10px 0 8px;letter-spacing:-.013em}
.ab-case-meta{display:flex;gap:var(--ab-space-md);flex-wrap:wrap}
.ab-soon{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ab-stone-light)}
.ab-operates{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--ab-space-lg)}
.ab-lede{padding-top:var(--ab-space-2xl);padding-bottom:var(--ab-space-lg)}
.ab-lede h1{font-family:var(--ab-font-serif);font-weight:400;font-size:clamp(40px,7vw,76px);line-height:1.06;color:var(--ab-ink);max-width:820px;letter-spacing:-.017em}
.ab-thesis{font-family:var(--ab-font-serif);font-size:clamp(22px,3vw,30px);line-height:1.3;color:var(--ab-ink);margin-top:var(--ab-space-md);letter-spacing:-.013em}
.ab-phases{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--ab-space-sm);margin-top:var(--ab-space-lg)}
.ab-phase-n{font-family:var(--ab-font-serif);font-size:22px;color:var(--ab-ink);letter-spacing:-.010em}
.ab-phase-l{font-weight:700;font-size:13px;color:var(--ab-ink);margin-top:4px}
@media (max-width:900px){
  .ab-case-row{grid-template-columns:1fr;gap:var(--ab-space-sm)}
  .ab-phases{grid-template-columns:repeat(3,1fr)}
}

/* ---------- SHAY case ---------- */
.ab-shay-hero img,.ab-shay-wide img{width:100%;height:auto;display:block}
.ab-shay-hero{max-width:760px;margin:0 auto}
.ab-shay-pkg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ab-shay-pkg img,.ab-shay-pkg video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1/1}
.ab-shay-film{background:var(--ab-cream-dark);overflow:hidden}
.ab-shay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ab-shay-grid img{width:100%;height:auto;display:block}
@media (max-width:900px){
  .ab-shay-pkg{grid-template-columns:repeat(2,1fr)}
  .ab-shay-grid{grid-template-columns:1fr}
}

/* ---------- NOCK case ---------- */
.ab-nock-band img{width:100%;height:auto;display:block;background:var(--ab-cream-dark)}
.ab-nock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ab-nock-grid img{width:100%;height:auto;display:block}
@media (max-width:900px){.ab-nock-grid{grid-template-columns:1fr}}
.ab-nock-dna{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.ab-nock-dna img{width:100%;height:auto;display:block;background:var(--ab-cream-dark)}
@media (max-width:900px){.ab-nock-dna{grid-template-columns:1fr}}
.ab-nock-matrix th:not(:first-child){color:var(--ab-ink);font-weight:700;font-size:13px;letter-spacing:.1em}
.ab-nock-matrix td:first-child{color:var(--ab-stone);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- LUUNA case ---------- */
.ab-luuna-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-items:start}
.ab-luuna-open img,.ab-luuna-grid img,.ab-luuna-wide img{width:100%;height:auto;display:block}
.ab-luuna-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:4px;align-items:start}
@media (max-width:900px){.ab-luuna-open,.ab-luuna-grid{grid-template-columns:1fr}}
.ab-luuna-motion{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.ab-luuna-motion video{width:100%;height:auto;display:block;background:var(--ab-cream-dark)}
@media (max-width:900px){.ab-luuna-motion{grid-template-columns:1fr}}

/* ---------- DONKEBAB case ---------- */
.ab-dk-film video{width:100%;height:auto;display:block;background:var(--ab-ink)}
.ab-dk-grid{display:grid;gap:4px}
.ab-dk-grid img{width:100%;height:auto;display:block}
.ab-zl-explainer video{width:100%;height:auto;display:block;background:var(--ab-cream-dark)}

/* ---------- supporting cases ---------- */
.ab-sup-pair{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:4px;align-items:stretch}
.ab-sup-pair>figure{display:flex;min-height:0}
.ab-sup-pair img,.ab-sup-pair video{width:100%;height:100%;object-fit:cover}
.ab-sup-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-items:start}
.ab-sup-two img{width:100%;height:auto;display:block}
.ab-sup-pair img,.ab-sup-wide img,.ab-sup-grid img,.ab-sup-quad img{width:100%;height:auto;display:block}
.ab-sup-vid video{width:100%;height:auto;display:block;background:var(--ab-cream-dark)}
.ab-sup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.ab-sup-quad{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.ab-sup-quad figure:first-child{grid-column:1 / -1}
@media (max-width:900px){
  .ab-sup-pair,.ab-sup-grid,.ab-sup-quad,.ab-sup-two{grid-template-columns:1fr}
  .ab-sup-vid{max-width:60%;margin:0 auto}
}

/* ---------- contact ---------- */
.ab-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ab-divider);border-bottom:1px solid var(--ab-divider);margin-top:var(--ab-space-lg)}
.ab-contact-card{background:var(--ab-cream);padding:var(--ab-space-lg) var(--ab-space-md) var(--ab-space-lg) 0;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;transition:background .25s ease}
.ab-contact-card:hover{background:var(--ab-cream-dark)}
.ab-contact-card h2{font-family:var(--ab-font-serif);font-weight:400;font-size:clamp(22px,2.4vw,28px);line-height:1.2;color:var(--ab-ink);margin-top:4px;letter-spacing:-.010em}
.ab-contact-card .ab-body{font-size:15px}
.ab-contact-val{font-size:15px;color:var(--ab-ink);text-decoration:underline;text-underline-offset:3px;margin-top:auto}
.ab-contact-card .ab-cta{margin-top:auto;font-size:15px;color:var(--ab-ink)}
.ab-contact-card .ab-cta::after{content:'→';margin-left:7px}
.ab-contact-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--ab-space-lg)}
.ab-contact-list{list-style:none;margin-top:10px}
.ab-contact-list li{font-size:16px;line-height:1.6;color:var(--ab-ink-light);padding:10px 0;border-bottom:1px solid var(--ab-divider)}
@media (max-width:900px){
  .ab-contact-grid{grid-template-columns:1fr}
  .ab-contact-card{padding:var(--ab-space-md) 0}
  .ab-contact-foot{grid-template-columns:1fr;gap:var(--ab-space-md)}
}

/* ---------- mobile navigation ---------- */
.ab-nav-toggle{display:none;background:none;border:0;padding:10px 0 10px 10px;cursor:pointer;flex-direction:column;gap:5px;align-items:flex-end}
.ab-nav-toggle span{display:block;width:22px;height:1.5px;background:var(--ab-ink);transition:transform .25s ease,opacity .25s ease}
.ab-nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.ab-nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:900px){
  .ab-header-inner{position:relative}
  .ab-nav-toggle{display:flex;order:3}
  .ab-wordmark{order:2;margin-left:auto;margin-right:16px}
  .ab-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ab-cream);
    border-bottom:1px solid var(--ab-divider);flex-direction:column;align-items:flex-start;
    gap:0;padding:8px 0 20px;z-index:30}
  .ab-nav.is-open{display:flex}
  .ab-nav a{width:100%;padding:14px 0;font-size:18px;border-bottom:1px solid var(--ab-divider);opacity:1}
  .ab-nav a:last-child{border-bottom:0}
  .ab-nav-cta{border-bottom:1px solid var(--ab-divider);padding-bottom:14px}
  .ab-lang{margin-top:14px;align-self:flex-start}
}

/* ---------- hospitality route ---------- */
.ab-primary{display:block;text-decoration:none;color:inherit}
.ab-primary-img{aspect-ratio:16/7;overflow:hidden;background:var(--ab-cream-dark);display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
/* square variant: for key art whose lettering runs the full width and must not be cropped */
.ab-primary-img.is-square{aspect-ratio:4/1}
.ab-primary-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.ab-primary:hover .ab-primary-img img{transform:scale(1.04)}
.ab-primary-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ab-space-lg);margin-top:var(--ab-space-md)}
.ab-primary-title{font-family:var(--ab-font-serif);font-size:clamp(26px,3.4vw,38px);line-height:1.15;color:var(--ab-ink);margin:8px 0;letter-spacing:-.013em}
.ab-hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ab-space-md);margin-top:var(--ab-space-lg)}
.ab-hcard-img{aspect-ratio:4/3;overflow:hidden;background:var(--ab-cream-dark)}
.ab-hcard-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.ab-hcard:hover .ab-hcard-img img{transform:scale(1.03)}
.ab-hcard figcaption{padding-top:14px}
.ab-hcard-title{font-family:var(--ab-font-serif);font-size:21px;line-height:1.2;color:var(--ab-ink);margin:8px 0 6px;letter-spacing:-.010em}
@media (max-width:900px){
  .ab-hgrid{grid-template-columns:1fr}
  .ab-primary-body{grid-template-columns:1fr;gap:var(--ab-space-sm)}
  .ab-primary-img{aspect-ratio:16/10;grid-template-columns:repeat(2,1fr)}
  .ab-primary-img.is-square{aspect-ratio:2/1}
}
.ab-contact-grid:has(> a:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}

/* ---------- NINA case ---------- */
.ab-nina-open{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;align-items:start}
.ab-nina-open img,.ab-nina-grid img{width:100%;height:auto;display:block}
.ab-nina-grid{display:grid;grid-template-columns:minmax(0,0.714fr) minmax(0,0.781fr);gap:4px;align-items:start}
@media (max-width:900px){.ab-nina-open,.ab-nina-grid{grid-template-columns:1fr}}

/* ---------- tablet tier: grids that would otherwise jump 3→1 ---------- */
@media (min-width:601px) and (max-width:900px){
  .ab-hgrid,
  .ab-shay-grid,
  .ab-nock-grid,
  .ab-sup-grid,
  .ab-sup-two,
  .ab-luuna-open,
  .ab-shay-pkg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-caps{grid-template-columns:repeat(2,1fr)}
  .ab-facts{grid-template-columns:repeat(4,1fr)}
  .ab-case-row{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:var(--ab-space-md)}
}
@media (max-width:600px){
  .ab-hgrid,.ab-shay-grid,.ab-nock-grid,.ab-sup-grid{grid-template-columns:1fr}
}
.ab-dc-web{max-width:820px;margin:0 auto;background:var(--ab-cream-dark)}
.ab-dc-web img{width:100%;height:auto;display:block}
.ab-shay-colour{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4px;align-items:start}
.ab-shay-colour img{width:100%;height:auto;display:block}
@media (max-width:900px){.ab-shay-colour{grid-template-columns:1fr}}

/* ---------- sector collections (the only route to the sector pages) ---------- */
.ab-sectors{margin-top:var(--ab-space-lg)}
.ab-sector-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:4px;margin-top:var(--ab-space-md)}
.ab-sector-links a{display:block;padding:var(--ab-space-md);background:var(--ab-cream-dark);
  text-decoration:none;color:inherit;transition:background .25s ease}
.ab-sector-links a:hover{background:var(--ab-warm-tint)}
.ab-sector-t{display:block;font-family:var(--ab-font-serif);font-size:clamp(20px,2.2vw,25px);
  line-height:1.2;color:var(--ab-ink);letter-spacing:-.010em}
.ab-sector-t::after{content:'→';margin-left:9px;font-family:var(--ab-font-sans);font-size:.7em;
  vertical-align:.12em;color:var(--ab-stone)}
.ab-sector-d{display:block;margin-top:10px;font-size:15px;color:var(--ab-ink-light);max-width:46ch}

/* ---------- homepage masonry: the work sets the rhythm, not a grid ---------- */
.ab-mason{columns:2;column-gap:var(--ab-space-md);margin-top:var(--ab-space-lg)}
.ab-mason>*{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 var(--ab-space-xl);display:block;text-decoration:none;color:inherit}
.ab-mtile-img{overflow:hidden;background:var(--ab-cream-dark)}
.ab-mtile-img img{width:100%;height:auto;display:block;
  transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.ab-mtile:hover .ab-mtile-img img{transform:scale(1.05)}
.ab-mtile-meta{display:flex;gap:var(--ab-space-sm);flex-wrap:wrap;margin-top:var(--ab-space-md)}
.ab-mtile-title{font-family:var(--ab-font-serif);font-weight:400;
  font-size:clamp(23px,2.6vw,31px);line-height:1.15;color:var(--ab-ink);margin:10px 0 0;
  transition:color .25s ease;letter-spacing:-.013em}
.ab-mtile-title::after{content:'→';margin-left:10px;font-family:var(--ab-font-sans);
  font-size:.62em;vertical-align:.14em;color:var(--ab-stone-light);transition:color .25s ease,transform .25s ease;
  display:inline-block}
.ab-mtile:hover .ab-mtile-title::after{color:var(--ab-ink);transform:translateX(4px)}
.ab-mtile .ab-body{margin-top:10px;font-size:15px;max-width:46ch}
@media (max-width:760px){.ab-mason{columns:1}.ab-mason>*{margin-bottom:var(--ab-space-lg)}}
@media (prefers-reduced-motion:reduce){.ab-mtile-img img,.ab-mtile-title::after{transition:none}}

/* framed media. The frame keeps the exact proportions of the curated still; the
   media inside is taller than the frame, so it can drift a few pixels against the
   scroll. Depth, without moving the page — no page-level parallax. */
.ab-mtile-img.has-frame{position:relative;overflow:hidden;aspect-ratio:var(--ar,1.5)}
.ab-mtile-drift{position:absolute;left:0;right:0;top:-5%;bottom:-5%;
  transform:translate3d(0,var(--drift,0px),0)}
.ab-mtile-img.has-frame img,
.ab-mtile-img.has-frame video{width:100%;height:100%;object-fit:cover;display:block}
/* the film sits over the still and crossfades up once it is actually decoding, so
   the resting frame is always the image we chose. Works on a tile frame or on a
   plain case-page <figure> — the still keeps setting the height either way. */
.ab-film{position:relative;overflow:hidden}
.ab-film>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;opacity:0;transition:opacity .8s ease}
.ab-film.is-playing>video{opacity:1}
.ab-mtile.is-lead .ab-mtile-img.has-frame{aspect-ratio:auto;height:min(56vh,520px)}
@media (max-width:760px){
  .ab-mtile.is-lead .ab-mtile-img.has-frame{aspect-ratio:var(--ar,1.5);height:auto}
  .ab-mtile-drift{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ab-mtile-drift{transform:none}
  .ab-film>video{transition:none}
}

/* the grid breaks once, on purpose: the first case leads across both columns */
.ab-mtile.is-lead{column-span:all;margin-bottom:var(--ab-space-xl)}
.ab-mtile.is-lead .ab-mtile-title{font-size:clamp(30px,4.4vw,52px)}
.ab-mtile.is-lead .ab-body{font-size:17px;max-width:52ch}
.ab-mtile.is-lead .ab-mtile-img{max-height:min(56vh,520px)}
.ab-mtile.is-lead .ab-mtile-img img{height:100%;object-fit:cover}

/* choreographed reveal: the image wipes up and settles, staggered down the page.
   The tile's text uses the site's standard fade, so nothing blocks reading. */
.js .ab-mtile.reveal{opacity:1;transform:none}
.js .ab-mtile.reveal .ab-mtile-img img{clip-path:inset(100% 0 0 0);transform:scale(1.07);
  transition:clip-path 1.05s cubic-bezier(.22,.7,.24,1),transform 1.4s cubic-bezier(.22,.7,.24,1);
  transition-delay:calc(var(--i,0)*80ms)}
.js .ab-mtile.reveal.is-in .ab-mtile-img img{clip-path:inset(0 0 0 0);transform:scale(1)}
.js .ab-mtile.reveal .ab-mtile-meta,
.js .ab-mtile.reveal .ab-mtile-title,
.js .ab-mtile.reveal .ab-body{opacity:0;transform:translateY(14px);
  transition:opacity .7s ease-out,transform .7s ease-out;
  transition-delay:calc(var(--i,0)*80ms + 180ms)}
.js .ab-mtile.reveal.is-in .ab-mtile-meta,
.js .ab-mtile.reveal.is-in .ab-mtile-title,
.js .ab-mtile.reveal.is-in .ab-body{opacity:1;transform:none}

/* a quiet affordance that follows the cursor — no colour, no shadow */
.ab-mtile-img{position:relative}
.ab-cursor{position:fixed;top:0;left:0;z-index:40;pointer-events:none;
  width:88px;height:88px;border-radius:50%;background:var(--ab-ink);color:var(--ab-cream);
  display:grid;place-items:center;text-align:center;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translate(-50%,-50%) scale(.6);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.3,1)}
.ab-cursor.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media (prefers-reduced-motion:reduce){
  .js .ab-mtile.reveal .ab-mtile-img img{clip-path:none;transform:none;transition:none}
  .js .ab-mtile.reveal .ab-mtile-meta,
  .js .ab-mtile.reveal .ab-mtile-title,
  .js .ab-mtile.reveal .ab-body{opacity:1;transform:none;transition:none}
  .ab-cursor{display:none}
}
@media (max-width:760px){.ab-cursor{display:none}.ab-mtile.is-lead .ab-mtile-img{max-height:none}}

/* ---------- onward navigation at the end of a case ---------- */
.ab-next-link{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:var(--ab-space-lg);align-items:center;text-decoration:none;color:inherit;
  padding:var(--ab-space-lg) 0 0}
.ab-next-title{font-family:var(--ab-font-serif);font-weight:400;
  font-size:clamp(30px,4.6vw,54px);line-height:1.08;color:var(--ab-ink);margin:10px 0 0;
  transition:color .25s ease;letter-spacing:-.015em}
.ab-next-title::after{content:'→';margin-left:14px;font-family:var(--ab-font-sans);
  font-size:.5em;vertical-align:.2em;color:var(--ab-stone-light);
  transition:color .25s ease,transform .25s ease;display:inline-block}
.ab-next-link:hover .ab-next-title::after{color:var(--ab-ink);transform:translateX(6px)}
.ab-next-img{overflow:hidden;background:var(--ab-cream-dark);aspect-ratio:4/3}
.ab-next-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.ab-next-link:hover .ab-next-img img{transform:scale(1.05)}
@media (max-width:760px){
  .ab-next-link{grid-template-columns:1fr;gap:var(--ab-space-md)}
  .ab-next-img{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .ab-next-img img,.ab-next-title::after{transition:none}
}

/* ---------- contrasting bands: the page gets a spine ----------
   Grounds are the brand's own: cream-dark for a quiet step, ink for the one
   bold moment. Everything inside an ink band re-tints from the same tokens. */
.ab-band{padding:var(--ab-space-xl) 0}
.ab-band-soft{background:var(--ab-cream-dark)}
.ab-band-ink{background:var(--ab-ink);color:var(--ab-cream)}
.ab-band-ink .ab-section-heading{font-size:clamp(28px,4.4vw,48px);line-height:1.08;max-width:16ch}
.ab-band-ink .ab-body{max-width:56ch}
.ab-band-ink .ab-section-heading,
.ab-band-ink .ab-phase-n,
.ab-band-ink .ab-phase-l{color:var(--ab-cream)}
.ab-band-ink .ab-caption{color:var(--ab-stone-light)}
.ab-band-ink .ab-divider{background:rgba(240,237,230,.22)}
.ab-band-ink .ab-body{color:#CFCBC2}
/* the ink band carries the six phases: give them room to read as a spine */
.ab-band-ink .ab-phases{margin-top:var(--ab-space-xl);gap:var(--ab-space-md)}
.ab-band-ink .ab-phase-n{font-size:26px;opacity:.55}
.ab-band-ink .ab-phase-l{margin-top:6px;font-size:14px;letter-spacing:.02em}
@media (max-width:900px){.ab-band{padding:var(--ab-space-lg) 0}}

/* ---------- paper: the cream stops being a flat fill ----------
   A fixed, very low-opacity grain over the whole page. It is what makes a warm
   minimal ground read as a material rather than a hex value. Non-interactive,
   painted once, and dropped entirely when the viewer asks for less motion. */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:220px 220px;
  opacity:.055;mix-blend-mode:multiply}
@media print{body::after{display:none}}

/* ---------- the opening happens, rather than simply being there ----------
   The headline wipes down from its own top edge; the thesis, the paragraph and
   the capability row follow on a short stagger. Nothing moves more than once. */
.js .ab-lede h1.reveal{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s cubic-bezier(.22,.7,.24,1)}
.js .ab-lede h1.reveal.is-in{clip-path:inset(0 0 0 0)}
.js .ab-lede > .ab-thesis.reveal{transition-delay:.42s}
.js .ab-lede > .ab-body.reveal{transition-delay:.56s}
.js .ab-lede > .ab-operates.reveal{transition-delay:.68s}
.js .ab-lede .ab-tag{transition:background .25s ease,border-color .25s ease}
@media (prefers-reduced-motion:reduce){
  .js .ab-lede h1.reveal{clip-path:none;transition:none}
  .js .ab-lede > .ab-thesis.reveal,
  .js .ab-lede > .ab-body.reveal,
  .js .ab-lede > .ab-operates.reveal{transition-delay:0s}
}

/* the opening is now an assertion and nothing else: headline, thesis, then the work */
.ab-lede{padding-top:clamp(80px,11vh,150px);padding-bottom:clamp(40px,5vh,64px)}
/* the work follows the assertion closely: the first image should meet the fold */
.ab-lede + .ab-section{padding-top:var(--ab-space-lg)}
.ab-lede .ab-thesis{margin-top:var(--ab-space-md)}


/* ---------- cross-document page transitions ----------
   The site behaves as one surface rather than a stack of documents. A named
   transition on each case frame carries the tile straight into the case hero:
   the tile image and the hero image are often different pictures, so the move
   reads as the idea becoming the thing in market. Browsers without the API
   simply navigate — nothing is required for the page to work. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.34s}
::view-transition-group(*){animation-duration:.52s;
  animation-timing-function:cubic-bezier(.22,.7,.24,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- proof, directly under the claim ----------
   Three verified outcomes, named to the client so they can be checked. Set as
   editorial type, not a dashboard: the figure carries, the line attributes. */
.ab-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ab-space-lg);
  padding:var(--ab-space-lg) 0 0;border-top:1px solid var(--ab-divider);
  margin-top:var(--ab-space-xl)}
.ab-proof-n{font-family:var(--ab-font-serif);font-weight:400;
  font-size:clamp(30px,3.6vw,46px);line-height:1;color:var(--ab-ink);
  letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.ab-proof-c{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ab-ink-light);max-width:30ch}
.ab-proof-c b{font-weight:700;color:var(--ab-ink)}
@media (max-width:760px){.ab-proof{grid-template-columns:1fr;gap:var(--ab-space-md);
  row-gap:var(--ab-space-md)}.ab-proof-c{max-width:none}}
.js .ab-lede > .ab-proof.reveal{transition-delay:.72s}
/* ---------- the diagnostic ----------
   The site's front door is the visitor's situation, not our client list. The
   statement carries at editorial scale; the outcome answers it in one line; the
   image is quiet until the row is engaged. Every row opens the case that proves it. */
.ab-sit-list{margin-top:var(--ab-space-lg);border-top:1px solid var(--ab-divider)}
.ab-sit-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr) 156px;
  gap:var(--ab-space-lg);align-items:center;padding:var(--ab-space-lg) 0;
  border-bottom:1px solid var(--ab-divider);text-decoration:none;color:inherit;
  transition:padding-left .45s cubic-bezier(.22,.7,.24,1)}
.ab-sit-q{font-family:var(--ab-font-serif);font-weight:400;
  font-size:clamp(22px,2.9vw,38px);line-height:1.14;color:var(--ab-ink);
  letter-spacing:-.013em;text-wrap:balance;margin:0}
.ab-sit-a{align-self:center}
.ab-sit-out{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ab-ink-light);max-width:38ch}
.ab-sit-img{aspect-ratio:4/3;overflow:hidden;background:var(--ab-cream-dark)}
.ab-sit-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.ab-sit-row:hover .ab-sit-img img{transform:scale(1.06)}
.ab-sit-row:hover,.ab-sit-row:focus-visible{padding-left:18px}
.ab-sit-row:hover .ab-sit-q{color:var(--ab-ink)}
@media (max-width:900px){
  .ab-sit-row{grid-template-columns:minmax(0,1fr) 96px;gap:var(--ab-space-md);
    align-items:start;padding:var(--ab-space-md) 0}
  .ab-sit-a{grid-column:1;margin-top:10px}
  .ab-sit-img{grid-column:2;grid-row:1/3}
  .ab-sit-row:hover,.ab-sit-row:focus-visible{padding-left:0}
}
.js .ab-sit-row.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease-out,transform .7s ease-out;
  transition-delay:calc(var(--i,0)*70ms)}
.js .ab-sit-row.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ab-sit-row,.ab-sit-img img{transition:none}
  .js .ab-sit-row.reveal{opacity:1;transform:none;transition:none}
}

/* ---------- the hook pays off in the work itself ----------
   Three films, full width, no captions. It is not a portfolio grid; it is
   evidence that the sentence above it is true. */
.ab-strip{width:100%;padding:0;margin:var(--ab-space-lg) 0 0}
.ab-strip-in{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ab-strip-cell{aspect-ratio:4/3;background:var(--ab-cream-dark)}
.ab-strip-cell img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  .ab-strip-in{grid-template-columns:1fr;gap:3px}
  .ab-strip-cell{aspect-ratio:16/9}
}

/* the hook's single call to action, set as a line rather than a button */
.ab-lede-cta{margin-top:var(--ab-space-lg)}
.ab-lede-cta a{font-size:17px;color:var(--ab-ink);text-decoration:none;
  border-bottom:1px solid var(--ab-ink);padding-bottom:4px;transition:opacity .2s ease}
.ab-lede-cta a::after{content:' \2192'}
.ab-lede-cta a:hover{opacity:.62}
.js .ab-lede > .ab-lede-cta.reveal{transition-delay:.62s}

/* the Result act lands the figures as the payoff, so they need more air */
.ab-section .ab-proof{margin-top:var(--ab-space-md);border-top:none;padding-top:0}

/* ---------- Work: the selected five, one at a time ---------- */
.ab-car-window{overflow:hidden;margin-top:var(--ab-space-md)}
.ab-car-track{display:flex;list-style:none;margin:0;padding:0;
  transition:transform .72s cubic-bezier(.22,.7,.24,1)}
.ab-car-slide{flex:0 0 100%;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:var(--ab-space-lg);align-items:center}
.ab-car-media{aspect-ratio:16/10;overflow:hidden;background:var(--ab-cream-dark)}
.ab-car-media img{width:100%;height:100%;object-fit:cover;display:block}
.ab-car-meta{display:flex;gap:var(--ab-space-sm);flex-wrap:wrap}
.ab-car-title{font-family:var(--ab-font-serif);font-weight:400;
  font-size:clamp(28px,3.6vw,46px);line-height:1.12;color:var(--ab-ink);margin:12px 0 10px;letter-spacing:-.015em}
.ab-car-body .ab-body{max-width:40ch}
.ab-car-body .ab-cta{margin-top:var(--ab-space-md)}
.ab-car-ctl{display:flex;justify-content:space-between;align-items:center;
  margin-top:var(--ab-space-md);padding-top:var(--ab-space-md);border-top:1px solid var(--ab-divider)}
.ab-car-dots{display:flex;gap:10px}
.ab-car-dot{width:34px;height:2px;padding:0;border:0;cursor:pointer;
  background:var(--ab-divider);transition:background .3s ease}
.ab-car-dot.is-on{background:var(--ab-ink)}
.ab-car-arrows{display:flex;gap:6px}
.ab-car-arrows button{width:38px;height:38px;border:1px solid var(--ab-divider);
  background:transparent;color:var(--ab-ink);cursor:pointer;font-size:15px;line-height:1;
  border-radius:100px;transition:border-color .25s ease,background .25s ease}
.ab-car-arrows button:hover{border-color:var(--ab-ink);background:var(--ab-cream-dark)}
.ab-car:not(.js-on) .ab-car-ctl{display:none}
@media (max-width:820px){
  .ab-car-slide{grid-template-columns:1fr;gap:var(--ab-space-md)}
  .ab-car-media{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){.ab-car-track{transition:none}}

/* ---------- Work: every case, filterable ---------- */
.ab-chips{display:flex;flex-wrap:wrap;gap:8px;margin:var(--ab-space-md) 0 var(--ab-space-lg)}
html:not(.js) .ab-chips{display:none}
.ab-chip{font-family:var(--ab-font-sans);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ab-stone);background:transparent;cursor:pointer;
  border:1px solid var(--ab-divider);border-radius:100px;padding:7px 14px;
  transition:color .25s ease,border-color .25s ease,background .25s ease}
.ab-chip:hover{color:var(--ab-ink);border-color:var(--ab-stone-light)}
.ab-chip.is-on{color:var(--ab-cream);background:var(--ab-ink);border-color:var(--ab-ink)}
.ab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ab-space-lg) var(--ab-space-md)}
.ab-gcell{text-decoration:none;color:inherit;display:block}
.ab-gcell[hidden]{display:none}
.ab-gcell-img{aspect-ratio:4/3;overflow:hidden;background:var(--ab-cream-dark);position:relative}
.ab-gcell-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1),filter .5s ease}
.ab-gcell-img::after{content:"";position:absolute;inset:0;background:var(--ab-ink);
  opacity:0;transition:opacity .4s ease}
.ab-gcell:hover .ab-gcell-img img,.ab-gcell:focus-visible .ab-gcell-img img{transform:scale(1.06)}
.ab-gcell:hover .ab-gcell-img::after,.ab-gcell:focus-visible .ab-gcell-img::after{opacity:.07}
.ab-gcell-meta{display:flex;gap:var(--ab-space-sm);flex-wrap:wrap;margin-top:14px}
.ab-gcell-title{font-family:var(--ab-font-serif);font-weight:400;font-size:clamp(20px,2.1vw,26px);
  line-height:1.15;color:var(--ab-ink);margin:8px 0 0;transition:color .25s ease;letter-spacing:-.010em}
.ab-gcell-title::after{content:'\2192';margin-left:9px;font-family:var(--ab-font-sans);
  font-size:.62em;vertical-align:.14em;color:var(--ab-stone-light);
  transition:color .25s ease,transform .25s ease;display:inline-block}
.ab-gcell:hover .ab-gcell-title::after{color:var(--ab-ink);transform:translateX(4px)}
.ab-gcell .ab-body{margin-top:8px;font-size:14px;max-width:40ch}
.ab-grid-empty{margin-top:var(--ab-space-lg);color:var(--ab-stone)}
@media (max-width:980px){.ab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ab-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .ab-gcell-img img,.ab-gcell-title::after,.ab-chip{transition:none}
}
/* the carousel is the Work page's hero: it sits straight under the heading */
.ab-hero + .ab-car{padding-top:0;margin-top:calc(var(--ab-space-lg) * -1)}
.ab-car + .ab-grid-wrap{padding-top:var(--ab-space-lg)}


/* ---------- the statement page ----------
   The deck's signature move: one line, alone, owning the whole frame. A scroll
   has no page breaks, so the break has to be built — this section is sized to
   the viewport and holds nothing else. Centred, which the deck licenses and the
   rest of this site never does. */
.ab-say{min-height:74vh;display:flex;flex-direction:column;justify-content:center}
.ab-say .ab-section-head{text-align:center;margin-bottom:var(--ab-space-lg)}
.ab-say-line{font-family:var(--ab-font-serif);font-weight:400;
  font-size:clamp(28px,4.6vw,58px);line-height:1.17;letter-spacing:-.015em;
  text-align:center;max-width:22ch;margin:0 auto;color:var(--ab-cream);text-wrap:balance}
.ab-say-line em{font-style:italic}
@media (max-width:620px){.ab-say{min-height:auto;padding:var(--ab-space-2xl) 0}.ab-say-line{max-width:none}}

/* ---------- the wall ----------
   The deck's moodboard as a band: sixty-five pieces of delivered work packed
   tight, edge to edge. It is the density that makes the statement page above it
   read as confidence rather than as empty space. Decorative by intent — it is
   aria-hidden, and every case in it is reachable by name from /work/. */
.ab-wall{width:100%;background:var(--ab-cream-dark);aspect-ratio:12/5;overflow:hidden}
/* gapless, and clipped to whole rows so the wall never ends ragged */
.ab-wall-grid{list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(12,1fr)}
.ab-wall-grid li{aspect-ratio:1;overflow:hidden;background:var(--ab-cream-dark)}
.ab-wall-grid img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .45s ease,transform 1s cubic-bezier(.2,.7,.3,1)}
/* hovering one tile quiets the rest — the wall resolves into a single piece */
.ab-wall-grid:hover img{opacity:.42}
.ab-wall-grid img:hover{opacity:1;transform:scale(1.06)}
.ab-wall-note{padding-top:var(--ab-space-md);padding-bottom:0}
@media (max-width:1100px){.ab-wall{aspect-ratio:8/8}.ab-wall-grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width:700px){.ab-wall{aspect-ratio:5/13}.ab-wall-grid{grid-template-columns:repeat(5,1fr)}}
@media (hover:none){.ab-wall-grid:hover img{opacity:1}}

/* ---------- the situation lede ---------- */
/* The claim carries; the instruction underneath it recedes. Sized between body and
   section-heading so it reads as the trigger without competing with the question
   above it. */
.ab-trigger{margin-top:var(--ab-space-md);max-width:36ch;
  font-size:clamp(19px,2.3vw,23px);line-height:1.35;color:var(--ab-ink);letter-spacing:-.010em}
.ab-trigger span{display:block;margin-top:10px;font-size:15px;line-height:1.55;
  color:var(--ab-stone);letter-spacing:0}

/* ---------- wall tiles as an index ---------- */
/* Each tile names its brand, year and sector on hover or keyboard focus and links
   to the case. Nothing is revealed on load: at rest the wall is still a field of
   work, which is the point of it. */
.ab-wall-cell{position:absolute;inset:0;display:block;text-decoration:none;color:inherit}
.ab-wall-grid li{position:relative}
.ab-wall-tag{position:absolute;inset:auto 0 0 0;padding:8px 9px 9px;
  background:linear-gradient(to top,rgba(26,26,24,.92),rgba(26,26,24,.62) 62%,rgba(26,26,24,0));
  color:#fff;opacity:0;transition:opacity .22s ease;pointer-events:none;z-index:2}
.ab-wall-tag b{display:block;font-weight:700;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.25}
.ab-wall-tag i{display:block;font-style:normal;font-size:9px;letter-spacing:.06em;
  color:rgba(255,255,255,.72);margin-top:3px;line-height:1.3}
.ab-wall-cell:hover .ab-wall-tag,
.ab-wall-cell:focus-visible .ab-wall-tag{opacity:1}
.ab-wall-cell:focus-visible{outline:2px solid var(--ab-ink);outline-offset:-2px;z-index:3}
.ab-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:700px){.ab-wall-tag{display:none}}
@media (prefers-reduced-motion:reduce){.ab-wall-tag{transition:none}}
@media (prefers-reduced-motion:reduce){.ab-wall-grid img{transition:none}}

/* ---------- the people, with faces ----------
   Portraits only on the studio page: the homepage keeps names and roles so the
   page it took work to shorten does not grow back. Black and white on purpose —
   it unifies two frames from the same session and sits with the cream. */
.ab-person-card{display:block}
.ab-person-img{aspect-ratio:4/5;overflow:hidden;background:var(--ab-cream-dark);
  margin-bottom:var(--ab-space-md)}
.ab-person-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.ab-person-card:hover .ab-person-img img{transform:scale(1.03)}
.ab-person-line{margin-top:10px;font-size:15px;line-height:1.55;
  color:var(--ab-ink-light);max-width:34ch}
@media (prefers-reduced-motion:reduce){.ab-person-img img{transition:none}}

/* ---------- who else is on it ----------
   Named collaborators, not a roster: the two principals are on every project and
   the specialists are named for the work they did. Sits under the people, above
   the engagement model. */
.ab-collab{margin-top:var(--ab-space-lg)}
.ab-collab .ab-body{margin-top:12px;max-width:62ch}
.ab-collab a{color:var(--ab-ink);text-decoration:none;border-bottom:1px solid var(--ab-divider);
  padding-bottom:1px;transition:border-color .25s ease}
.ab-collab a:hover{border-color:var(--ab-ink)}

/* ---------- the decade, told once ----------
   Sits between the result and the people: the numbers say what changed, this says
   how long it took, and only then does the page introduce anyone. */
.ab-story{padding-top:0}
.ab-story-body{margin-top:var(--ab-space-md);max-width:64ch}
.ab-story-body p{font-size:17px;line-height:1.6;color:var(--ab-ink-light);margin:0 0 14px}
.ab-story-close{font-family:var(--ab-font-serif);font-size:clamp(20px,2.4vw,28px);line-height:1.28;
  color:var(--ab-ink);margin-top:var(--ab-space-md)!important;margin-bottom:0!important;
  max-width:34ch;text-wrap:balance;letter-spacing:-.010em}

/* ---------- the entrance ----------
   One gesture: the hairline from the wordmark draws, then the cream lifts. It is
   the same cream as the page, so nothing flashes — the site settles rather than
   loads. Never shown without JS, never under reduced motion, once per session,
   and it removes itself on a timer so it can never trap the page. */
.ab-veil{display:none}
.js .ab-veil{display:grid;place-items:center;position:fixed;inset:0;z-index:9998;
  background:var(--ab-cream);
  transition:opacity .66s ease,transform .66s cubic-bezier(.22,.7,.24,1)}
.js .ab-veil.is-gone{opacity:0;transform:translateY(-10px);pointer-events:none}
.ab-veil-rule{display:block;width:0;height:1px;background:var(--ab-ink);
  transition:width .58s cubic-bezier(.22,.7,.24,1) .1s}
.js .ab-veil.is-drawn .ab-veil-rule{width:58px}
/* nothing scrolls while the curtain is up */
html.ab-entering,html.ab-entering body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.js .ab-veil{display:none}}
@media print{.ab-veil{display:none!important}}

/* ---------- skip link ----------
   Off-screen until focused, so a keyboard user reaches the content without
   tabbing the header on every page. */
.ab-skip{position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--ab-ink);color:var(--ab-cream);
  font-family:var(--ab-font-sans);font-size:13px;font-weight:500;letter-spacing:.06em;
  padding:12px 18px;text-decoration:none}
.ab-skip:focus{left:12px;top:12px}

/* ---------- positions ----------
   Opinions with evidence attached. The claim carries at display scale; the case
   that had to prove it sits under it, quietly, as a link. */
.ab-pos-list{border-top:1px solid var(--ab-divider);margin-top:var(--ab-space-lg)}
.ab-pos{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,230px);
  gap:var(--ab-space-md);align-items:baseline;
  padding:var(--ab-space-lg) 0;border-bottom:1px solid var(--ab-divider);
  text-decoration:none;color:inherit;transition:padding-left .45s cubic-bezier(.22,.7,.24,1)}
.ab-pos:hover,.ab-pos:focus-visible{padding-left:18px}
.ab-pos-n{font-family:var(--ab-font-serif);font-size:20px;color:var(--ab-stone-light);margin:0;
  letter-spacing:-.010em;font-variant-numeric:tabular-nums}
.ab-pos-line{font-family:var(--ab-font-serif);font-weight:400;
  font-size:clamp(21px,2.7vw,34px);line-height:1.2;letter-spacing:-.013em;
  color:var(--ab-ink);margin:0;text-wrap:balance}
.ab-pos-src{margin:0;font-size:15px;color:var(--ab-ink-light);align-self:center}
.ab-pos-src .ab-caption{display:block;margin-bottom:4px}
.ab-pos-src::after{content:' \2192';color:var(--ab-stone-light);
  transition:color .25s ease,transform .25s ease;display:inline-block}
.ab-pos:hover .ab-pos-src::after{color:var(--ab-ink);transform:translateX(4px)}
@media (max-width:860px){
  .ab-pos{grid-template-columns:44px minmax(0,1fr);gap:var(--ab-space-sm) var(--ab-space-md)}
  .ab-pos-src{grid-column:2;margin-top:10px}
  .ab-pos:hover,.ab-pos:focus-visible{padding-left:0}
}
.js .ab-pos.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s ease-out,transform .7s ease-out;transition-delay:calc(var(--i,0)*55ms)}
.js .ab-pos.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ab-pos,.ab-pos-src::after{transition:none}
  .js .ab-pos.reveal{opacity:1;transform:none;transition:none}
}

/* ---------- fit ----------
   Sits between the invitation and the three routes, so it filters before the
   click rather than after. Stated as courtesy, not as a gate. */
.ab-fit-in{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:var(--ab-space-lg);margin-top:var(--ab-space-lg)}
.ab-fit-body{max-width:62ch}
.ab-fit-body p{font-size:17px;line-height:1.6;color:var(--ab-ink-light);margin:0 0 14px}
.ab-fit-body p:last-child{margin-bottom:0;color:var(--ab-ink)}
@media (max-width:760px){.ab-fit-in{grid-template-columns:1fr;gap:var(--ab-space-sm)}}

/* ---------- Asia-Pacific request ----------
   Accommodation rather than a fourth option: a quiet line under the three
   routes, for the half of the world our booking hours cannot reach. */
.ab-apac{margin-top:var(--ab-space-lg);max-width:66ch;font-size:15px;line-height:1.6;
  color:var(--ab-ink-light)}
.ab-apac .ab-caption{display:block;margin-bottom:8px}
.ab-apac a{color:var(--ab-ink);text-decoration:none;border-bottom:1px solid var(--ab-ink);
  padding-bottom:2px;white-space:nowrap;transition:opacity .2s ease}
.ab-apac a:hover{opacity:.62}