/* ---------- Fonts ---------- */
/* Plus Jakarta Sans — Google Fonts, SIL OFL (variable 400–700, latin) */
@font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/PlusJakartaSans-var.woff2) format("woff2");font-weight:400 700;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* ---- Colour system: 4 neutrals, 1 accent, line + surface helpers ---- */
  --ink:#0a0a0a;             /* headings + primary text on light */
  --muted:#4f4f4f;           /* body + secondary text on light */
  --white:#fff;              /* page background; text on dark + accent */
  --muted-dark:rgba(255,255,255,.7); /* body + secondary text on dark */
  --night:#0a0b12;           /* dark sections, hero, menu, footer */
  --surface:#f5f5f5;         /* light cards + alternate light sections */
  --surface-dark:rgba(255,255,255,.05); /* raised cards on dark */
  --line:#e0e0e0;            /* dividers + borders on light */
  --line-dark:rgba(255,255,255,.2);     /* dividers + borders on dark/accent */
  --accent:#c2410c;          /* the one accent: labels, fills, active states. 5.2:1 on white, 4.75:1 on --surface, white text on it 5.2:1 (WCAG AA) */
  --accent-bright:#ea580c;   /* large display text only (3:1 large-text threshold) */
  --accent-light:#fb923c;    /* accent on dark backgrounds + hover */
  --accent-soft:#fff1e6;     /* accent tint: selected / active fills */
  --pad:48px;
  --max:1328px;
  --ease:cubic-bezier(.44,0,.56,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --font-head:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);font-weight:500;font-size:16px;line-height:1.4;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,p{margin:0;font-weight:inherit}
ul{margin:0}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
body.menu-open{overflow:hidden}

/* ---------- Layout ---------- */
.container{width:100%;max-width:calc(var(--max) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
/* Section rhythm, matched to the other pages: 120px between blocks on desktop, 80px on phones
   (same-background neighbours collapse to one gap; a background change gets that space each side). */
:root{--sec:120px;--gap-same:120px}
.flow>section:not(.dark):not(.hero)+section:not(.dark):not(.hero){padding-top:calc(var(--gap-same) - var(--sec))}
/* galleries inside the page flow get the same section spacing */
.flow>.gallery{padding-bottom:var(--sec)}
.dark{background:var(--night);color:var(--white)}

/* ---------- Type ---------- */
/* Headings → --font-head (Plus Jakarta Sans). Covers real headings plus heading-styled display text. */
h1,h2,h3,h5,
.display-xl,.display-l,.display-m,.display-s,
.cs-section h4,.proj-detail h4,
.menu-name,.menu-nav a{font-family:var(--font-head)}

.display-xl{font-size:148px;line-height:140px;font-weight:600;letter-spacing:-.02em}
.display-l{font-size:106px;line-height:120px;font-weight:600;letter-spacing:-.02em}
.display-m{font-size:70px;line-height:80px;font-weight:600;letter-spacing:-.015em}
.display-s{font-size:84px;line-height:84px;font-weight:600;letter-spacing:-.02em}
.t-28{font-size:28px;line-height:40px;font-weight:500;letter-spacing:-.02em}
.t-20{font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.015em}
.t-18{font-size:18px;line-height:25.2px;font-weight:400;letter-spacing:-.01em}
.t-16{font-size:16px;line-height:22.4px;font-weight:500;letter-spacing:-.01em}
.t-14{font-size:14px;line-height:16.8px;font-weight:500;letter-spacing:0}

.eyebrow{display:flex;flex-direction:column;gap:7px;font-size:16px;line-height:22.4px;letter-spacing:-.01em}
.eyebrow.row{flex-direction:row;gap:8px}

/* ---------- Roll-over link (text slides up, copy slides in) ---------- */
.roll{position:relative;display:inline-flex;align-items:center;gap:6px;overflow:hidden;vertical-align:top}
.roll .roll-in{display:block;position:relative;overflow:hidden}
.roll .roll-in span{display:block;transition:transform .45s var(--ease-out)}
.roll .roll-in span+span{position:absolute;left:0;top:100%}
.roll:hover .roll-in span{transform:translateY(-100%)}
.roll .arrow{width:14px;height:14px;flex:none;transition:transform .45s var(--ease-out)}
.roll:hover .arrow{transform:rotate(45deg)}

/* ---------- Pill button with radial fill ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:8px 16px;border-radius:100px;overflow:hidden;isolation:isolate;font-size:16px;line-height:22.4px;letter-spacing:-.01em;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;z-index:-1;width:155px;height:155px;left:50%;top:50%;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%) scale(0);transition:transform .55s var(--ease)}
.btn:hover{color:var(--white)}
.btn:hover::before{transform:translate(-50%,-50%) scale(1.6)}
.btn svg{width:14px;height:14px;transition:transform .45s var(--ease-out)}
.btn:hover svg{transform:rotate(45deg)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:80px;color:var(--ink);transition:transform .5s var(--ease-out),color .3s}
.site-header::before{content:"";position:absolute;inset:0;background:var(--white);transform:translateY(-100%);transition:transform .5s var(--ease-out)}
.site-header.solid::before{transform:none}
.site-header.hidden,.intro-pending .site-header{transform:translateY(-100%)}
.site-header.on-dark:not(.solid){color:var(--white)}
.site-header .container{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:6px;font-size:20px;line-height:28px;letter-spacing:-.01em}
.logo svg{width:24px;height:24px}
.logo path{fill:currentColor}
.header-right{display:flex;align-items:center;gap:64px}
.header-info{display:flex;gap:32px}
.header-info .item{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:16.8px;letter-spacing:-.01em}
.burger{position:relative;width:48px;height:24px;padding:0;background:none;border:0;cursor:pointer;color:inherit}
.burger i{position:absolute;right:0;height:2px;background:currentColor;transition:transform .45s var(--ease-out),width .45s var(--ease-out),top .45s var(--ease-out)}
.burger i:nth-child(1){top:6px;width:48px}
.burger i:nth-child(2){top:16px;width:28px}
.menu-open .burger i{width:36px}
.menu-open .burger i:nth-child(1){top:11px;transform:rotate(35deg)}
.menu-open .burger i:nth-child(2){top:11px;transform:rotate(-35deg)}
.menu-open .site-header{color:var(--white)!important;transform:none}
.menu-open .site-header::before{transform:translateY(-100%)}

/* ---------- Menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:40;background:var(--night);color:var(--white);clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-out);visibility:hidden}
.menu-open .menu{clip-path:inset(0);visibility:visible}
.menu .container{height:100%;display:flex;align-items:center;justify-content:space-between;padding-top:80px}
.menu-name{font-size:148px;line-height:140px;font-weight:600;letter-spacing:-.02em}
.menu-right{display:flex;flex-direction:column;align-items:flex-end}
.menu-clock{margin-top:48px;text-align:right;font-size:40px;line-height:54px;letter-spacing:-.02em}
.menu-social{display:flex;gap:28px;margin-top:56px;font-size:16px}
.menu-nav{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.menu-nav a{font-size:40px;line-height:60px;font-weight:600;letter-spacing:-.02em}
.menu-nav .arrow{width:22px;height:22px}
.menu-nav a,.menu-left>*,.menu-clock{opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s var(--ease-out)}
.menu-open .menu-nav a,.menu-open .menu-left>*,.menu-open .menu-clock{opacity:1;transform:none}
.menu-open .menu-clock{transition-delay:.25s}
.menu-open .menu-nav a:nth-child(2){transition-delay:.05s}.menu-open .menu-nav a:nth-child(3){transition-delay:.1s}.menu-open .menu-nav a:nth-child(4){transition-delay:.15s}.menu-open .menu-nav a:nth-child(5){transition-delay:.2s}

/* ---------- Cursor dot (inverts what's beneath it) ---------- */
.cursor-dot{position:fixed;top:0;left:0;z-index:100;width:16px;height:16px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.cursor-dot.on{opacity:1}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}.reveal[data-delay="2"]{transition-delay:.2s}.reveal[data-delay="3"]{transition-delay:.3s}

/* ---------- Home: hero ---------- */
.hero{position:relative;height:100vh;min-height:720px;background:var(--night);color:var(--white);overflow:hidden}
.hero-stage{position:absolute;inset:0;overflow:hidden}
/* Intro (timing measured from the original Framer site): three full-size layers rise
   from below in turn, each larger than the last (30% → 40% → 50–60% of the screen),
   then the top layer expands to full-bleed. Easing ≈ Framer's no-bounce spring. */
:root{--glide:cubic-bezier(.16,1,.3,1)}
.hero-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform;filter:saturate(1.45) contrast(1.08) brightness(1.12)}
.hero-layer.l1{transform:translateY(660px) scale(.3)}
.hero-layer.l2{transform:translateY(660px) scale(.4)}
.hero-layer.l3{transform:translateY(1020px) scale(.5)}
.hero.intro .l1{transform:translateY(0) scale(.3);transition:transform 1s var(--glide)}
.hero.intro .l2{transform:translateY(0) scale(.4);transition:transform 2s var(--glide) .4s}
.hero.intro .l3{transform:translateY(0) scale(.6);transition:transform 1.6s var(--glide) .8s}
.hero.expanded .l1,.hero.expanded .l2{transform:scale(.5);transition:transform 1.2s var(--glide)}
.hero.expanded .l3{transform:scale(1);transition:transform 1.2s var(--glide)}
.hero-text{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:56px}
.hero-name{display:flex;flex-direction:column}
.hero-name .r{text-align:right}
/* mask for the slide-up reveal; extra bottom room so descenders (j, y) aren't clipped */
.hero-name h1{overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
/* hidden start sits fully below the mask, including its .18em descender room */
.hero-name h1 span{display:block;transform:translateY(calc(100% + .25em));transition:transform 1.1s var(--ease-out)}
.hero.ready .hero-name h1 span{transform:none}
.hero.ready .hero-name h1.r span{transition-delay:.2s}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:40px}
/* list hugs its longest line so the block sits flush with the right edge */
.hero-cats{width:max-content;max-width:50%;font-size:32px;height:4.6em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 60%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 60%,transparent)}
.hero-cats ul{list-style:none;padding:0;font-size:1em;animation:cats 15s var(--ease) infinite}
.hero-cats li{font-family:var(--font-body);font-size:1em;line-height:1.2em;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
/* 6 items, list duplicated: step one line (1.2em) at a time, loop after six */
@keyframes cats{0%,13%{transform:translateY(0)}16.7%,29.7%{transform:translateY(-1.2em)}33.3%,46.3%{transform:translateY(-2.4em)}50%,63%{transform:translateY(-3.6em)}66.7%,79.7%{transform:translateY(-4.8em)}83.3%,96.3%{transform:translateY(-6em)}100%{transform:translateY(-7.2em)}}
.hero-copy{width:630px;max-width:50%;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
/* pill on a dark background: white ring, fills white with dark text on hover */
.btn.on-dark{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.btn.on-dark::before{background:var(--white)}
.btn.on-dark:hover{color:var(--ink)}
/* solid white pill on dark (primary hero action): fills with night on hover, keeping a white ring */
.btn.on-dark.solid{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--white)}
.btn.on-dark.solid::before{background:var(--night)}
.btn.on-dark.solid:hover{color:var(--white)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn svg.dl{width:16px;height:16px}
.btn:hover svg.dl{transform:translateY(2px)}
.hero-bottom>*{opacity:0;transform:translateY(40px);transition:opacity .8s .4s,transform 1s .4s var(--glide)}
.hero-bottom>.hero-cats{transition-delay:.6s}
.hero.ready .hero-bottom>*{opacity:1;transform:none}

/* ---------- Section heading block ---------- */
/* label sits above; the heading and the paragraph+button are centred on each other */
.head-split{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:7px}
.head-split .left{width:625px;max-width:100%}
.head-split .right{width:625px;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:32px}

/* ---------- Works grid ---------- */
.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:72px}
.work-card{display:flex;flex-direction:column;gap:10px}
.work-thumb{position:relative;aspect-ratio:628/500;border-radius:8px;overflow:hidden}
.work-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.work-card:hover .work-thumb img{transform:scale(1.04)}
.work-tags{position:absolute;left:16px;top:16px;right:16px;display:flex;flex-wrap:wrap;gap:6px;opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .5s var(--ease-out)}
.work-card:hover .work-tags,.work-card:focus-visible .work-tags{opacity:1;transform:none}
.work-tag{padding:6px 14px;border-radius:100px;background:var(--white);color:var(--ink);font-size:14px;line-height:16.8px;letter-spacing:-.01em;white-space:nowrap}
.work-title{padding-inline:6px;font-size:20px;line-height:28px;letter-spacing:-.01em}
.work-sub{margin-top:-6px;padding-inline:6px;font-size:15px;line-height:22px;color:var(--muted);font-weight:400}

@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- About (home) ---------- */
.about-grid{display:flex;gap:48px;align-items:stretch}
.about-img{flex:0 0 560px;border-radius:4px;overflow:hidden;aspect-ratio:560/680}
.about-img img{width:100%;height:100%;object-fit:cover}
/* text + button stay together (40px apart), block centred against the portrait */
.about-content{flex:1;max-width:792px;margin-left:auto;display:flex;flex-direction:column;justify-content:center;gap:40px}
.about-content .text{display:flex;flex-direction:column;gap:24px}

/* ---------- Marquee gallery ---------- */
.gallery{overflow:hidden;padding-block:0}
.gallery-track{display:flex;gap:24px;width:max-content;animation:tick 60s linear infinite}
.gallery:hover .gallery-track{animation-play-state:paused}
.gallery-track img{width:450px;height:550px;object-fit:cover;flex:none}
.gallery.rounded img{border-radius:10px}


/* ---------- How I work ---------- */
.how{background:var(--night)}
.how-head{display:flex;flex-direction:column;align-items:flex-start;gap:32px;margin-top:24px}
/* heading keeps its two lines ("Clarity before" / "pixels."); intro sits below it */
.how-title{flex:none;white-space:nowrap}
.how-intro{width:760px;max-width:100%;font-size:28px;line-height:40px;font-weight:400;letter-spacing:-.02em;color:var(--muted-dark)}
.steps{margin-top:96px;border-top:1px solid rgba(255,255,255,.14)}
.step{position:relative;display:grid;grid-template-columns:140px 1fr minmax(0,560px);align-items:start;gap:24px;padding:44px 24px;margin-inline:-24px;border-bottom:1px solid rgba(255,255,255,.14);transition:background .5s var(--ease-out)}
/* hover: faint lift, accent bar grows in, title nudges right, text brightens */
.step::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
.step:hover{background:rgba(255,255,255,.035)}
.step:hover::before{transform:scaleY(1)}
.step-title,.step-num,.step-desc{transition:transform .5s var(--ease-out),color .4s}
.step:hover .step-title{transform:translateX(10px)}
.step:hover .step-num{color:var(--accent-light)}
.step:hover .step-desc{color:var(--white)}
.step-num{padding-top:8px;font-size:14px;line-height:17px;color:var(--accent);font-variant-numeric:tabular-nums}
.step-title{font-size:52px;line-height:60px;font-weight:500;letter-spacing:-.02em;display:flex;align-items:center;gap:20px}
.step-title svg{width:48px;height:48px;flex:none;fill:currentColor}
.step-title{white-space:nowrap}
.step-desc{padding-top:8px;font-size:18px;line-height:30px;font-weight:400;color:var(--muted-dark)}

/* ---------- What I do (home) ---------- */
/* heading keeps its three lines; paragraph column narrows to fit beside it */
.what .head-split .left{width:auto;flex:none;white-space:nowrap}
.what .head-split .right{flex:0 1 560px;width:auto;gap:24px}
/* tool tiles: lit from top-left, darker bottom lip for depth, soft drop shadow */
.tools-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.tools-label{font-size:14px;line-height:20px;letter-spacing:.04em;text-transform:uppercase}
.tools{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px;perspective:600px}
.tool{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;cursor:default;outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -4px 0 rgba(0,0,0,.22),0 10px 18px -8px rgba(10,10,10,.45),0 2px 4px rgba(10,10,10,.12);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.tool::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%);pointer-events:none}
.tool img{position:relative;height:28px;width:auto}
.tool svg{position:relative;height:22px;width:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.tool-figma{background:linear-gradient(160deg,#ffffff,#e9e9ec)}
.tool-figma svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.tool-framer{background:linear-gradient(160deg,#2b2b2f,#050506)}
.tool-figjam{background:linear-gradient(160deg,#a24bff,#8a2cf2)}
.tool-miro{background:linear-gradient(160deg,#ffe066,#ffc928)}
.tool-claude{background:linear-gradient(160deg,#fbf6ee,#efe6d6)}
.tool-chatgpt{background:linear-gradient(160deg,#1c9e7d,#0b6b52)}
.tool-ps{background:linear-gradient(160deg,#0a3556,#001e36)}
.tool-ai{background:linear-gradient(160deg,#4a0d00,#2b0700)}
.tool-claude svg,.tool-chatgpt svg{height:28px}
.tool-chatgpt svg,.tool-figjam svg{filter:none}
.tool-figjam svg{height:26px}
.tool-ps svg,.tool-ai svg{height:24px;filter:none}
.tool:hover,.tool:focus-visible{transform:translateY(-4px) rotateX(10deg) rotateY(-10deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(0,0,0,.22),0 18px 26px -10px rgba(10,10,10,.5),0 4px 8px rgba(10,10,10,.14)}
.tool-tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);padding:5px 10px;border-radius:100px;background:var(--ink);color:var(--white);
  font-size:12px;line-height:16px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease-out)}
.tool:hover .tool-tip,.tool:focus-visible .tool-tip{opacity:1;transform:translate(-50%,0)}
.skills{display:grid;grid-template-columns:1fr 1fr;margin-top:96px;border-top:1px solid var(--line)}
.skill{position:relative;display:flex;flex-direction:column;padding:40px 40px 56px;border-bottom:1px solid var(--line);transition:background .5s var(--ease-out)}
.skill:nth-child(odd){border-right:1px solid var(--line)}
.skill .step-num{padding-top:0}
.skill-title{margin-top:64px;font-size:38px;line-height:46px;font-weight:500;letter-spacing:-.02em;transition:transform .5s var(--ease-out)}
.skill-desc{margin-top:20px;max-width:520px;font-size:18px;line-height:30px;font-weight:400;color:var(--muted);transition:color .4s}
/* hover: faint tint, accent bar along the top, title lifts, text darkens */
.skill::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.skill:hover{background:rgba(10,10,10,.025)}
.skill:hover::before{transform:scaleX(1)}
.skill:hover .skill-title{transform:translateY(-4px)}
.skill:hover .skill-desc{color:var(--ink)}

/* ---------- Experience (home) ---------- */
/* heading keeps its three lines; the paragraph column narrows to fit beside it */
.experience .head-split .left{width:auto;flex:none;white-space:nowrap}
.experience .head-split .right{flex:0 1 520px;width:auto}
.roles{margin-top:96px;border-top:1px solid var(--line)}
.role{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:24px;padding:24px 20px;margin-inline:-20px;border-bottom:1px solid var(--line);font-size:18px;line-height:26px;letter-spacing:-.01em;transition:background .5s var(--ease-out)}
/* hover: faint tint, accent bar grows in, company nudges right, role and years darken */
.role::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
.role:hover{background:rgba(10,10,10,.03)}
.role:hover::before{transform:scaleY(1)}
.role-co,.role-title,.role-yr{transition:transform .5s var(--ease-out),color .4s}
.role:hover .role-co{transform:translateX(10px)}
.role:hover .role-title{color:var(--ink)}
.role-title{text-align:center;color:var(--muted);font-weight:400}
.role-yr{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Footer ---------- */
.site-footer{background:var(--night);color:var(--white);padding-top:64px;overflow:hidden}
/* contact CTA: two-tone heading links to email; arrow lifts on hover */
.footer-cta{display:flex;flex-direction:column;align-items:center;text-align:center}
/* one line that fills the container: the title measures ~9.5em, so size = available width / 9.7 */
.cta-title{display:flex;align-items:center;justify-content:center;gap:.25em;white-space:nowrap;font-family:var(--font-head);font-size:min(calc((100vw - 2 * var(--pad)) / 9.7),calc(var(--max) / 9.7));line-height:1.05;font-weight:600;letter-spacing:-.02em;color:var(--white)}
.cta-title .accent{color:var(--accent-bright)}
.cta-sub{margin-top:32px;max-width:860px;font-size:22px;line-height:32px;font-weight:400;color:var(--muted-dark)}
.field{display:flex;flex-direction:column;gap:20px;margin-top:40px;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:12px}
.field+.field{margin-top:30px}
.field label{color:var(--line)}
.field input,.field textarea{background:none;border:0;outline:0;padding:0;color:var(--white);font-size:16px;resize:vertical}
.field textarea{min-height:62px}
.field ::placeholder{color:rgba(255,255,255,.45)}
.send{margin-top:32px;height:42px;border:0;border-radius:100px;background:var(--white);color:var(--ink);font-size:16px;cursor:pointer;transition:opacity .3s}
.send:disabled{opacity:.5;cursor:default}
/* two pill buttons under the CTA: white (email) and soft grey (call); address/number show on hover via title */
.footer-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.footer-ctas .btn{height:48px;padding:0 22px 0 20px;gap:10px;font-weight:500}
.footer-ctas .btn svg{width:18px;height:18px}
.footer-ctas .btn:hover svg{transform:none}
.btn.on-dark.soft{background:rgba(255,255,255,.1);box-shadow:none;color:var(--white)}
.btn.on-dark.soft:hover{color:var(--ink)}
/* one slim row under a divider: page links left, round social icons + back-to-top right */
.footer-bar{margin-top:80px;border-top:1px solid var(--line-dark)}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;padding-top:28px}
.footer-nav{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px;line-height:20px}
.footer-icons{display:flex;align-items:center;gap:10px}
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--white);transition:background .3s,color .3s,transform .4s var(--ease-out)}
.icon-btn:hover,.icon-btn:focus-visible{background:var(--white);color:var(--ink)}
.icon-btn svg{width:16px;height:16px}
.icon-btn.to-top{background:var(--white);color:var(--ink)}
.icon-btn.to-top svg{width:18px;height:18px}
.icon-btn.to-top:hover{transform:translateY(-3px)}
.footer-copy{margin-top:28px;text-align:center;font-size:13px;line-height:18px;color:var(--muted-dark)}
/* sign-off: a huge wordmark that fades into the background; "Adedeji" measures ~3.4em, so size = available width / 3.45 */
.footer-mark{margin-top:8px;text-align:center;font-family:var(--font-head);font-weight:600;font-size:min(calc((100vw - 2 * var(--pad)) / 3.45),calc(var(--max) / 3.45));line-height:.86;letter-spacing:-.05em;white-space:nowrap;background:linear-gradient(180deg,#3b3c46 0%,#1b1c25 55%,var(--night) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;-webkit-user-select:none}

/* ---------- Inner pages ---------- */
.page-top{padding-top:128px}
.center{text-align:center}
.container.wide{max-width:calc(var(--max) + var(--pad)*2);padding-inline:var(--pad)}
/* About page — editorial layout (based on about-page-proposal.html) */
.about-title{margin-top:24px;text-wrap:balance}
.about-title .accent{color:var(--accent-bright)}
/* 12-col grid: portrait spans 5, copy starts at col 7 and sits on the portrait's baseline */
.about-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-top:80px}
.about-portrait{grid-column:1/span 5;position:relative;margin:0;aspect-ratio:4/5;border-radius:10px;overflow:hidden}
.about-portrait img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.about-portrait:hover img{transform:scale(1.03)}
.about-portrait figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:16px;padding:64px 24px 22px;color:var(--white);font-size:13px;line-height:1.4;background:linear-gradient(transparent,rgba(0,0,0,.62))}
.about-portrait figcaption strong{font-weight:600}
.about-copy{grid-column:7/span 6;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.about-copy .lead{max-width:30ch;font-size:32px;line-height:44px;font-weight:500;letter-spacing:-.02em;text-wrap:pretty}
.about-copy p:not(.lead){max-width:58ch;font-size:18px;line-height:30px;font-weight:400;color:var(--muted);text-wrap:pretty}
.about-copy .btn{margin-top:8px}
.about-rule{display:flex;justify-content:space-between;gap:20px;margin-top:72px;padding-top:18px;border-top:1px solid var(--ink);font-size:14px;color:var(--muted)}
.muted{color:var(--muted)}
.interests .head-split{align-items:flex-end}
.interests .head-split .left{width:auto}
.interests .head-split .right{width:340px;text-wrap:pretty}
/* interest tiles: colour fields until a photo is added (inline background-image) */
.tiles{display:grid;grid-template-columns:7fr 5fr;grid-template-rows:repeat(2,minmax(300px,27vw));gap:24px;margin-top:64px}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;padding:40px;border-radius:10px;color:var(--white);background-size:cover;background-position:center;transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.tile::after{content:"";position:absolute;inset:40% 0 0;z-index:-1;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.tile::before{position:absolute;right:28px;top:20px;z-index:-1;font-family:var(--font-head);font-size:clamp(110px,13vw,200px);font-weight:600;line-height:1;letter-spacing:-.04em;opacity:.1;transition:opacity .7s var(--ease-out)}
.tile:hover{transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(10,10,10,.45)}
.tile:hover::before{opacity:.18}
.tile-anime{grid-row:1/3;background-color:#24264f;background-image:radial-gradient(circle at 32% 20%,#a4a8e4 0,transparent 38%),linear-gradient(145deg,#24264f,#665b9d 65%,#171a36)}
.tile-anime::before{content:"01"}
.tile-united{background-color:#570f20;background-image:radial-gradient(circle at 79% 20%,#f5a178 0,transparent 35%),linear-gradient(130deg,#570f20,#bd3348 65%,#4a0714)}
.tile-united::before{content:"02"}
.tile-lebron{background-color:#29204c;background-image:radial-gradient(circle at 75% 20%,#c5a261 0,transparent 40%),linear-gradient(140deg,#29204c,#71518b 70%,#222344)}
.tile-lebron::before{content:"03"}
.tile-head{position:absolute;left:40px;top:40px;display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.tile-head span:first-child{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(255,255,255,.5);border-radius:50%;font-variant-numeric:tabular-nums}
.tile-title{font-family:var(--font-head);font-size:clamp(44px,5.2vw,80px);line-height:.95;font-weight:600;letter-spacing:-.02em}
.tile-united .tile-title,.tile-lebron .tile-title{font-size:clamp(34px,3.6vw,54px)}

/* Projects page */
.proj-list{display:flex;flex-direction:column;gap:12px;margin-top:56px}
.proj-card{position:relative;display:block;height:800px;border-radius:10px;overflow:hidden}
.proj-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.proj-card:hover img{transform:scale(1.03)}
.proj-detail{position:absolute;left:0;right:0;bottom:0;padding:16px;background:var(--night);color:var(--white);text-align:center;display:flex;flex-direction:column;gap:5px}
.proj-detail .yr{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease-out),opacity .4s}
.proj-card:hover .proj-detail .yr{max-height:28px;opacity:1}
.shots-head{padding-top:120px;padding-bottom:40px}


/* Case study */
.cs-top{display:flex;justify-content:space-between;gap:48px;padding-top:180px}
.cs-intro{width:610px;display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.cs-intro p{margin-top:-12px}
.cs-meta{width:610px;padding-top:40px}
.cs-meta .row{display:flex;justify-content:space-between;align-items:center;padding-block:20px;border-bottom:1px solid var(--line)}
.cs-meta .row:first-child{padding-top:0}
.cs-hero{margin-top:96px;border-radius:10px;overflow:hidden;aspect-ratio:1280/800}
.cs-hero img{width:100%;height:100%;object-fit:cover}
.cs-section{display:flex;gap:24px;margin-top:120px}
.cs-section .label{flex:0 0 299px}
.cs-section .body{flex:1;max-width:958px}
.cs-section .rt{margin-top:20px}
.rt p{font-size:20px;line-height:28px;letter-spacing:-.01em}
.rt ul{padding-left:25px;margin-block:28px 0}
.rt ul ul{margin-top:0}
.rt li+li{margin-top:28px}
.rt ul ul li+li{margin-top:0}
.rt strong{font-weight:600}
.rt a{text-decoration:underline}
.cs-media{margin-top:56px;display:grid;gap:16px}
.cs-media img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.cs-media.g1 img{aspect-ratio:1280/600}
.cs-media.g2{grid-template-columns:1fr}
.cs-media.g2 img{aspect-ratio:1280/600}
.cs-media.g3{grid-template-columns:1fr 1fr;grid-template-rows:360px 360px}
.cs-media.g3 img:first-child{grid-row:span 2}
.cs-media.g3.flip img:first-child{grid-column:2;grid-row:1/span 2}
.cs-media.g3.flip img:nth-child(2){grid-column:1;grid-row:1}
.cs-media.g3.flip img:nth-child(3){grid-column:1;grid-row:2}
.more-works{padding-top:120px;padding-bottom:120px}
.more-works h1{margin-top:24px}

/* ---------- Responsive (Framer breakpoints: 1200 / 810) ---------- */
@media (max-width:1199px){
  :root{--pad:32px}
  .display-xl{font-size:110px;line-height:108px}
  .display-l{font-size:80px;line-height:88px}
  .display-m{font-size:54px;line-height:62px}
  .header-info{display:none}
  .head-split{flex-direction:column;align-items:flex-start}
  .about-grid{flex-direction:column}
  .interests .head-split{align-items:flex-start}
  .about-portrait{grid-column:1/span 6}
  .about-copy{grid-column:7/span 6}
  .about-img{flex:none;width:100%;max-width:560px}
  .how-intro{font-size:22px;line-height:32px}
  .how-title{white-space:normal}
  .steps{margin-top:64px}
  .step{grid-template-columns:80px 1fr;row-gap:12px}
  .step-desc{grid-column:2}
  .what .head-split .left{white-space:normal}
  .skill-title{margin-top:40px;font-size:36px;line-height:44px}
      .cs-top{flex-direction:column}
  .cs-intro,.cs-meta{width:100%}
  .cs-section{flex-direction:column}
  .cs-section .label{flex:none}

  .menu-name{font-size:110px;line-height:108px}
}
@media (max-width:809px){
  :root{--pad:16px}
  :root{--sec:80px;--gap-same:80px}
  .display-xl{font-size:64px;line-height:64px}
  .display-l{font-size:52px;line-height:58px}
  .display-m{font-size:38px;line-height:44px}
  .display-s{font-size:52px;line-height:56px}
  .t-28{font-size:22px;line-height:30px}
  .hero-bottom{flex-direction:column}
  .hero-cats,.hero-copy{width:100%;max-width:100%}
  .hero-copy{gap:20px}
  .hero-cats{font-size:22px}
  .works-grid{grid-template-columns:1fr}
  .gallery-track img{width:280px;height:342px}
  .step{grid-template-columns:40px 1fr;padding:32px 12px;margin-inline:-12px}
  .step-title{font-size:34px;line-height:40px;gap:14px;white-space:normal;align-items:flex-start}
  .step-title svg{width:34px;height:34px;margin-top:3px}
  .step-desc{font-size:16px;line-height:26px}
  .footer-bar{margin-top:56px}
  .footer-row{flex-direction:column;align-items:center}
  .footer-nav{justify-content:center}
  /* phones: back to two lines, large enough to read */
  .cta-title{flex-direction:column;gap:0;font-size:52px;line-height:58px}
  .cta-sub{font-size:18px;line-height:28px}
    .roles{margin-top:56px}
  .skills{grid-template-columns:1fr;margin-top:56px}
  .skill,.skill:nth-child(odd),.skill:nth-child(even){padding:32px 0 40px;border-right:0}
  .skill-title{margin-top:24px;font-size:30px;line-height:36px}
  .skill-desc{font-size:16px;line-height:26px}
  .role{grid-template-columns:1fr auto;row-gap:4px;font-size:16px;padding-inline:12px;margin-inline:-12px}
  .role-title{grid-row:2;text-align:left}
  .role-yr{grid-row:1/span 2;grid-column:2}
  .about-row{grid-template-columns:1fr;row-gap:32px;margin-top:40px}
  .about-portrait,.about-copy{grid-column:1/-1}
  .about-copy .lead{font-size:22px;line-height:32px}
  .about-copy p:not(.lead){font-size:16px;line-height:26px}
  .about-rule{flex-direction:column;gap:6px;margin-top:48px}
  .interests .head-split .right{width:100%}
  .tiles{display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:12px;margin-top:40px}
  .tile{min-height:340px;padding:24px}
  .tile-anime{grid-row:auto;min-height:440px}
  .tile-head{left:24px;top:24px}
  .experience .head-split .left{white-space:normal}
  .proj-card{height:auto;aspect-ratio:4/5}
  .cs-media.g3{grid-template-columns:1fr;grid-template-rows:auto}
  .cs-media.g3 img,.cs-media.g3.flip img{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3}
  .menu .container{flex-direction:column;justify-content:center;align-items:flex-start;gap:48px}
  .menu-nav,.menu-right{align-items:flex-start}
  .menu-clock{text-align:left}
  .menu-nav a{font-size:30px;line-height:44px;white-space:nowrap}
  .menu-name{font-size:64px;line-height:64px}
  .menu-clock{font-size:28px;line-height:36px;margin-top:24px}

}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Responsive refinements ---------- */
/* Tablet & phone: once sections stack, the paragraph column must not keep its desktop
   width as a height (that left a large empty gap under "What I do" / "Experience"). */
@media (max-width:1199px){
  .what .head-split .right,.experience .head-split .right{flex:none;width:100%}
}
/* Touch screens have no hover: keep project tags visible */
@media (hover:none){
  .work-tags{opacity:1;transform:none}
}
@media (max-width:809px){
  /* Hero (phone only): name, paragraph and CV sit together at the bottom; the photo shows above them.
     The skills list is hidden here; the same skills follow in "What I do". */
  .hero{height:100svh;min-height:560px}   /* fit the visible screen, so the CV button is never below the fold */
  .hero-text{justify-content:flex-end;gap:28px;padding-top:120px;padding-bottom:48px}
  .hero-name .r{text-align:left}
  .hero-cats{display:none}
  .hero-copy h4{font-size:20px;line-height:28px}
  .hero-ctas{gap:8px}
  .hero-ctas .btn{padding-inline:14px}   /* both pills fit on one row at 375px */
  /* phone only: light at the top so the photo reads, darkening toward the bottom where the text sits */
  .hero-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.1) 22%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.85) 62%,rgba(0,0,0,.92) 100%);opacity:0;transition:opacity 1.2s var(--glide);pointer-events:none}
  .hero.expanded .hero-stage::after{opacity:1}
  /* phone: name and paragraph+CV become siblings of .hero-text, stacked at the bottom */
  .hero-bottom{display:contents}
  /* Project tags wrap and scale down instead of running off the card */
  .work-tags{left:12px;top:12px;right:12px;gap:6px}
  .work-tag{white-space:normal;font-size:12px;line-height:15px;padding:5px 10px}
  /* How I work: number sits above the title, description below */
  .step{grid-template-columns:1fr;row-gap:10px}
  .step-num{padding-top:0}
  .step-desc{grid-column:1;padding-top:4px}
  /* Menu: centred links like the original mobile menu; name & socials hidden */
  /* equal top + bottom space so the links, date and time sit at the true centre */
  .menu .container{align-items:center;gap:0;padding-block:80px}
  .menu-left{display:none}
  .menu-right,.menu-nav{align-items:center}
  .menu-nav{gap:18px}
  .menu-clock{text-align:center;margin-top:40px}
}

/* About page — story, experience, toolkit */
.story-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.story-side{grid-column:1/span 4;display:flex;flex-direction:column;gap:24px}
.story-copy{grid-column:6/span 7;display:flex;flex-direction:column;gap:28px;padding-top:38px}
.story-copy p{font-size:22px;line-height:36px;font-weight:400;letter-spacing:-.015em;text-wrap:pretty}
.story-sign{margin-top:12px;padding-top:28px;border-top:1px solid var(--line);font-family:var(--font-head);font-size:28px!important;line-height:34px!important;font-weight:600!important}
.story-sign span{display:block;margin-top:8px;font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0;color:var(--muted)}
.now{margin-top:24px;display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line);border-radius:10px;transition:border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.now:hover{border-color:var(--ink);transform:translateY(-3px)}
.now-label{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.now-label i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(234,88,12,.5);animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(234,88,12,0)}100%{box-shadow:0 0 0 0 rgba(234,88,12,0)}}
.now strong{font-size:18px;line-height:26px;font-weight:600}
.now p{font-size:15px;line-height:24px;color:var(--muted)}

.career .head-split .left{width:auto;flex:none;white-space:nowrap}
.career .head-split .right{flex:0 1 520px;width:auto}
.career .t-20{color:var(--muted-dark)}
.jobs{margin-top:96px;border-top:1px solid rgba(255,255,255,.16)}
.job{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:40px 20px;margin-inline:-20px;border-bottom:1px solid rgba(255,255,255,.16);transition:background .5s var(--ease-out)}
.job::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--white);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
.job:hover{background:rgba(255,255,255,.035)}
.job:hover::before{transform:scaleY(1)}
.job-yr{grid-column:1/span 3;padding-top:8px;font-size:15px;line-height:22px;color:var(--muted-dark);font-variant-numeric:tabular-nums}
.job-who{grid-column:4/span 4;display:flex;flex-direction:column;gap:6px;transition:transform .5s var(--ease-out)}
.job:hover .job-who{transform:translateX(10px)}
.job-who h3{font-size:34px;line-height:40px;font-weight:600;letter-spacing:-.015em}
.job-who span{font-size:16px;line-height:24px;color:var(--muted-dark)}
.job-what{grid-column:8/span 5;padding-top:6px}
.job-what p{font-size:18px;line-height:28px;color:var(--white);text-wrap:pretty}
.job-what ul{list-style:none;padding:0;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.job-what li{position:relative;padding-left:22px;font-size:16px;line-height:25px;color:var(--muted-dark);text-wrap:pretty}
.job-what li::before{content:"";position:absolute;left:0;top:12px;width:10px;height:1px;background:currentColor}

.toolkit .head-split .left{width:auto}
.toolkit .head-split{align-items:flex-end}
.toolkit .head-split .right{width:340px;text-wrap:pretty}
.kits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:64px}
.kit{padding-top:24px;border-top:1px solid var(--ink)}
.kit h4{font-family:var(--font-head);font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.01em}
.kit ul{list-style:none;padding:0;margin-top:20px;display:flex;flex-direction:column;gap:6px}
.kit li{font-size:16px;line-height:26px;color:var(--muted);transition:color .3s,transform .4s var(--ease-out)}
.kit li:hover{color:var(--ink);transform:translateX(6px)}
.edu{margin-top:96px}
.edu h4{font-size:12px;line-height:18px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--line)}
.edu-row{display:grid;grid-template-columns:1fr 1fr auto;gap:24px;align-items:center;padding:24px 20px;margin-inline:-20px;border-bottom:1px solid var(--line);font-size:18px;line-height:26px;transition:background .5s var(--ease-out)}
.edu-row:hover{background:rgba(10,10,10,.03)}
.edu-title{font-weight:500}
.edu-where{color:var(--muted)}
.edu-yr{font-variant-numeric:tabular-nums}

@media (max-width:1199px){
  .story-side{grid-column:1/-1;position:static}
  .story-copy{grid-column:1/-1;padding-top:48px}
  .now{max-width:520px}
  .career .head-split .left{white-space:normal}
  .career .head-split .right,.toolkit .head-split .right{flex:none;width:100%}
  .toolkit .head-split{align-items:flex-start}
  .job-yr{grid-column:1/span 3}
  .job-who{grid-column:4/span 9}
  .job-what{grid-column:4/span 9;padding-top:20px}
  .kits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
}
@media (max-width:809px){
  .story-copy p{font-size:18px;line-height:30px}
  .story-sign{font-size:24px!important;line-height:30px!important}
  .jobs{margin-top:56px}
  .job{display:flex;flex-direction:column;gap:8px;padding:32px 12px;margin-inline:-12px}
  .job-yr{padding-top:0;font-size:14px}
  .job-who h3{font-size:28px;line-height:34px}
  .job-what{padding-top:12px}
  .job-what p{font-size:16px;line-height:26px}
  .job-what li{font-size:15px;line-height:24px}
  .kits{margin-top:48px;column-gap:16px;row-gap:40px}
  .kit h4{font-size:20px;line-height:26px}
  .kit li{font-size:15px;line-height:24px}
  .edu{margin-top:64px}
  .edu-row{grid-template-columns:1fr auto;row-gap:2px;font-size:16px;padding-inline:12px;margin-inline:-12px}
  .edu-where{grid-row:2;font-size:15px}
  .edu-yr{grid-row:1/span 2;grid-column:2}
}

/* About intro — text group left, portrait right, centred against each other */
.about-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.about-left{grid-column:1/span 7;display:flex;flex-direction:column;gap:28px}
.about-hero .about-portrait{grid-column:8/span 5;aspect-ratio:4/5;margin:0}
.about-hero .about-copy{margin:0}
.about-hero .about-copy .lead{max-width:24ch}
@media (max-width:1199px){
  .about-left{grid-column:1/span 7;gap:24px}
  .about-hero .about-portrait{grid-column:8/span 5}
}
@media (max-width:809px){
  .about-hero{grid-template-columns:1fr;row-gap:32px}
  .about-left{display:contents}
  .about-head{order:1}
  .about-hero .about-portrait{grid-column:1;order:2}
  .about-hero .about-copy{order:3}
}
.toolkit .head-split .left,.interests .head-split .left{width:100%}
.toolkit .head-split .left h2,.interests .head-split .left h2{text-wrap:balance}
.job-what .job-desc{margin-top:14px;font-size:16px;line-height:26px;color:var(--muted-dark)}
@media (max-width:809px){.job-what .job-desc{font-size:15px;line-height:24px}}
@media (max-width:1199px){.page-top{padding-top:120px}}
@media (max-width:809px){.page-top{padding-top:104px}}
/* About intro: text group fills its column, 64px gutter to the portrait */
.about-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px}
.about-left,.about-left{grid-column:1}
.about-hero .about-portrait{grid-column:2}
.about-hero .about-copy,.about-hero .about-copy .lead,.about-hero .about-copy p:not(.lead){max-width:none;width:100%}
@media (max-width:1199px){
  .about-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px}
  .about-left{grid-column:1}
  .about-hero .about-portrait{grid-column:2}
}
@media (max-width:809px){
  .about-hero{grid-template-columns:1fr}
  .about-hero .about-portrait{grid-column:1}
}
.about-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:96px}
@media (max-width:1199px){.about-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px}}
@media (max-width:809px){.about-hero{grid-template-columns:1fr}}
@media (max-width:1199px){
  .story-side h2 br,.career .head-split h2 br{display:none}
  .career .head-split .left{width:100%}
}


/* Tablet: home About image fills the column */
@media (max-width:1199px){
  .about-img{max-width:none;width:100%;aspect-ratio:1/1}
}
/* Tablet: About intro heading on one line across the full width; copy and portrait sit beneath it */
@media (max-width:1199px) and (min-width:600px){
  .about-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:48px}
  .about-left{display:contents}
  .about-head{grid-column:1/-1;grid-row:1}
  .about-hero .about-copy{grid-column:1;grid-row:2}
  .about-hero .about-portrait{grid-column:2;grid-row:2}
  .about-hero .about-title{font-size:calc((100vw - 2 * var(--pad)) / 10.8);line-height:1.1;white-space:nowrap}
  .about-hero .about-title br{display:none}
}

/* =============== BUKAH case study (bespoke) =============== */
.cs-bukah{--bk-lime:var(--accent);--bk-forest:var(--accent);--bk-warm:var(--surface);--bk-blue:var(--accent);--bk-paper:var(--surface);--cs-ui:var(--accent);--cs-hi:var(--accent-light);--bk-r:24px}
.cs-bukah h1,.cs-bukah h2,.cs-bukah h3,.cs-bukah h4{font-family:var(--font-head);font-weight:600;letter-spacing:-.02em;margin:0}
.cs-bukah p{margin:0}
.bk-sec{padding-block:var(--sec)}
.bk-dark{background:var(--night);color:var(--white)}
.bk-forest{background:var(--night);color:var(--white)}
.bk-sage{background:var(--surface)}
.bk-stone{background:var(--surface)}
.bk-blue{background:var(--bk-blue);color:var(--white)}
.bk-ruled{border-top:1px solid var(--line)}
.bk-label{font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;opacity:.6}

/* hero */
.bk-hero{padding-top:128px;padding-bottom:var(--sec);background:var(--white)}
.bk-kicker{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bk-name{margin-top:24px!important;font-size:clamp(110px,18vw,268px);line-height:.8;letter-spacing:-.04em!important}
.bk-name span{color:inherit}
.bk-hero-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:64px;align-items:center;margin-top:72px}
.bk-lede{font-size:clamp(40px,4.6vw,64px);line-height:1.05}
.bk-summary{font-size:20px;line-height:32px;font-weight:400;color:var(--muted);text-wrap:pretty}
.bk-meta{display:grid;grid-auto-flow:column;grid-auto-columns:auto;justify-content:space-between;gap:24px;margin:64px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.bk-meta div{display:flex;flex-direction:column;gap:8px}
.bk-meta dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bk-meta dd{margin:0;font-size:16px;line-height:22px}
.bk-cover{position:relative;margin:56px 0 0;border-radius:var(--bk-r);overflow:hidden;aspect-ratio:1248/760;background:var(--surface)}
.bk-cover img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.bk-cover:hover img{transform:scale(1.02)}
.bk-cover figcaption{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:96px 32px 30px;color:var(--white);background:linear-gradient(transparent,rgba(0,0,0,.6))}
.bk-cover figcaption span{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bk-cover figcaption strong{max-width:16ch;font-family:var(--font-head);font-size:clamp(24px,2.6vw,40px);line-height:1.05;font-weight:600;text-align:right}

/* section intro */
.bk-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:64px;align-items:last baseline}
.bk-head-main{display:flex;flex-direction:column;gap:24px}
.bk-title{font-size:clamp(44px,5.4vw,80px);line-height:1;max-width:16ch;text-wrap:balance}
.bk-head-aside{display:flex;flex-direction:column;gap:20px;font-size:18px;line-height:30px;font-weight:400;color:var(--muted);text-wrap:pretty}
.bk-dark .bk-head-aside,.bk-forest .bk-head-aside{color:var(--muted-dark)}
.bk-blue .bk-head-aside{color:var(--white)}
.bk-head-full{grid-template-columns:1fr}
.bk-head .bk-title{max-width:none}
.bk-head-full .bk-title{max-width:none}
.bk-note{padding-top:16px;border-top:1px solid var(--line);font-size:13px!important;line-height:21px!important;color:var(--muted)}
.bk-wide{margin:72px 0 0;border-radius:var(--bk-r);overflow:hidden}
.bk-wide img{width:100%;height:auto;display:block;aspect-ratio:16/8;object-fit:cover}

/* 01 overview */
.bk-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:64px;margin-top:72px;align-items:start}
.bk-quote{margin:0;padding:28px 0 0 28px;border-top:1px solid var(--line);border-left:4px solid var(--bk-forest);font-family:var(--font-head);font-size:clamp(28px,3vw,42px);line-height:1.15;font-weight:500;letter-spacing:-.02em;text-wrap:pretty}
.bk-copy{display:flex;flex-direction:column;gap:20px;font-size:18px;line-height:30px;font-weight:400;color:var(--muted)}
.bk-list{list-style:none;padding:0;margin:8px 0 0;border-top:1px solid var(--line)}
.bk-list li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:22px;color:var(--ink);font-weight:500}
.bk-list span{color:var(--muted);font-weight:400}

/* 02 system map */
.bk-map{display:grid;grid-template-columns:1fr .82fr 1fr;gap:24px;margin-top:72px;padding-top:72px;border-top:1px solid var(--line-dark)}
.bk-map-col{display:grid;gap:24px}
.bk-node{min-height:200px;display:flex;flex-direction:column;justify-content:flex-start;gap:20px;padding:28px;border:1px solid var(--line-dark);border-radius:var(--bk-r);background:var(--surface-dark);transition:transform .6s var(--ease-out),border-color .6s}
.bk-node:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.4)}
.bk-node span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.bk-node h3{font-size:clamp(24px,2.4vw,34px);line-height:1.1}
.bk-node p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted-dark);max-width:34ch}
.bk-node-core{background:var(--accent);color:var(--white);border-color:transparent}
.bk-node-core p{color:var(--white)}
.bk-node-core:hover{border-color:transparent}

/* 03 discovery */
.bk-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.bk-stat{display:flex;flex-direction:column;justify-content:flex-start;gap:40px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.bk-stat strong{font-family:var(--font-head);font-size:clamp(48px,5vw,72px);line-height:1;font-weight:600}
.bk-stat p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted)}
.bk-sub{display:flex;flex-direction:column;gap:24px;margin-top:120px;padding-top:32px;border-top:1px solid var(--line)}
.bk-subtitle{font-size:clamp(36px,4.4vw,64px);line-height:1.02;max-width:20ch;text-wrap:balance}
.bk-personas{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.bk-persona{--pp:clamp(28px,3.6vw,48px);min-height:560px;display:flex;flex-direction:column;padding:var(--pp);overflow:hidden;border-radius:var(--bk-r);background:var(--bk-paper);border:1px solid var(--line)}
.bk-persona:nth-child(2){background:var(--bk-warm)}
.bk-persona-img{margin:calc(-1*var(--pp)) calc(-1*var(--pp)) var(--pp);aspect-ratio:16/10;overflow:hidden;background:var(--line)}
.bk-persona-img img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 30%}
.bk-persona:first-child .bk-persona-img img{object-position:center 5%}
.bk-persona-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bk-badge{padding:7px 11px;border:1px solid currentColor;border-radius:999px;font-size:10px;white-space:nowrap}
.bk-persona h4{margin:48px 0 18px!important;font-size:clamp(34px,3.8vw,56px);line-height:1.02}
.bk-persona-quote{font-size:20px;line-height:30px;font-weight:400;text-wrap:pretty}
.bk-persona-quote b{font-weight:600}
.bk-persona-details{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:auto;padding-top:40px}
.bk-persona-details div{padding-top:14px;border-top:1px solid var(--line)}
.bk-persona-details b{display:block;margin-bottom:10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.bk-persona-details p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted)}

/* 05 architecture */
.bk-levels{display:grid;grid-template-columns:repeat(3,1fr);margin-top:72px;border-top:1px solid var(--line-dark)}
.bk-level{display:flex;flex-direction:column;justify-content:flex-start;gap:32px;padding:28px 28px 40px 0;border-right:1px solid var(--line-dark)}
.bk-level+.bk-level{padding-left:28px}
.bk-level:last-child{border-right:0}
.bk-level>span{color:var(--bk-lime);font-size:14px}
.bk-level h3{margin-bottom:16px!important;font-size:clamp(28px,3vw,44px);line-height:1.02}
.bk-level p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted-dark)}
.bk-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:72px}
.bk-cap{min-height:180px;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;background:var(--surface-dark);transition:background .5s var(--ease-out)}
.bk-cap:hover{background:rgba(255,255,255,.12)}
.bk-cap b{font-size:18px;line-height:24px;font-weight:600}
.bk-cap span{font-size:14px;line-height:22px;font-weight:400;color:var(--muted-dark)}

/* 06 design system */
.bk-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:72px}
.bk-swatch{min-height:220px;display:flex;flex-direction:column;justify-content:space-between;padding:18px;border-radius:20px;border:1px solid var(--line)}
.bk-swatch b{font-size:14px;font-weight:600}
.bk-swatch span{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.bk-sw-lime{background:#b1fa63}.bk-sw-forest{background:#243837;color:#fff}.bk-sw-ink{background:#101311;color:#fff}
.bk-sw-surface{background:#fff}.bk-sw-canvas{background:#f7f8f5}.bk-sw-line{background:#e4e7ec}
.bk-found{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin-top:72px}
.bk-panel{min-height:540px;padding:clamp(28px,3.6vw,48px);border-radius:var(--bk-r);background:var(--white)}
.bk-panel-dark{background:var(--night);color:var(--white)}
.bk-panel h3{margin:24px 0 32px!important;font-size:clamp(32px,3.8vw,56px);line-height:1.02}
.bk-type{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.bk-type span{font-size:11px;text-transform:uppercase;color:var(--muted)}
.bk-type b{font-weight:600}
.bk-t-display b{font-family:var(--font-head);font-size:44px;line-height:1}
.bk-t-heading b{font-family:var(--font-head);font-size:30px}
.bk-t-title b{font-size:21px}
.bk-t-body b{font-size:16px;font-weight:400}
.bk-t-label b{font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.bk-tokens{padding:22px 0;border-top:1px solid var(--line-dark)}
.bk-tokens>b{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-dark);font-weight:500}
.bk-tokens p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted-dark)}
.bk-space{display:flex;align-items:flex-end;gap:12px}
.bk-space span{width:46px;display:grid;justify-items:center;gap:8px;font-size:11px;color:var(--muted-dark)}
.bk-space i{display:block;width:100%;background:var(--bk-lime);border-radius:4px}
.bk-radius{display:flex;flex-wrap:wrap;gap:16px}
.bk-radius span{width:72px;height:72px;display:grid;place-items:center;border:1px solid var(--line-dark);background:var(--surface-dark);font-size:11px;color:var(--muted-dark)}
.bk-board{margin-top:24px;padding:clamp(28px,3.6vw,48px);border-radius:var(--bk-r);background:var(--surface);border:1px solid var(--line)}
.bk-board-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}
.bk-board-head h3{font-size:clamp(32px,3.8vw,56px);line-height:1.02}
.bk-board-head p{max-width:40ch;font-size:15px;line-height:24px;font-weight:400;color:var(--muted)}
.bk-comps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bk-comp{min-height:250px;display:flex;flex-direction:column;padding:22px;border-radius:18px;background:var(--white);border:1px solid var(--line);font-family:var(--font-body)}
.bk-comp>b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.bk-comp>div{display:grid;gap:12px;margin:auto 0}
.bk-comp-img{padding:0;overflow:hidden;background:var(--surface)}
.bk-comp-img img{width:100%;height:100%;object-fit:cover}
.ui-btn{min-height:42px;display:flex;align-items:center;justify-content:center;padding:0 16px;border:1px solid var(--ink);border-radius:10px;font-size:13px}
.ui-primary{background:var(--ink);border-color:var(--ink);color:var(--white)}
.ui-lime{background:var(--accent);border-color:var(--accent);color:var(--white)}
.ui-field{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--muted);font-weight:400}
.ui-chips{display:flex;flex-wrap:wrap;gap:8px}
.ui-chip{padding:7px 10px;border-radius:999px;background:var(--surface);font-size:11px}
.ui-ok{color:#087443;background:#e7f8ee}.ui-warn{color:#9a5b00;background:#fff3dc}.ui-err{color:#a61b1b;background:#feecec}
.ui-kpi{padding:14px 16px;border:1px solid var(--line);border-radius:12px}
.ui-kpi span{display:block;margin-bottom:6px;font-size:11px;color:var(--muted);font-weight:400}
.ui-kpi strong{font-family:var(--font-head);font-size:26px;font-weight:600}
.ui-table{overflow:hidden;border:1px solid var(--line);border-radius:12px}
.ui-table div{min-height:38px;display:grid;grid-template-columns:1fr .9fr .7fr;align-items:center;padding:0 12px;border-top:1px solid var(--line);font-size:11px;font-weight:400}
.ui-table div:first-child{border-top:0;background:var(--surface);color:var(--muted)}
.ui-nav{display:grid;gap:6px}
.ui-nav div{min-height:36px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:8px;font-size:12px;color:var(--muted);font-weight:400}
.ui-nav .on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.ui-nav i{width:8px;height:8px;border-radius:50%;background:currentColor}
.ui-chart{height:140px;display:flex;align-items:flex-end;gap:10px;padding:18px 14px 12px;border:1px solid var(--line);border-radius:12px}
.ui-chart i{flex:1;min-height:18px;border-radius:5px 5px 2px 2px;background:var(--ink)}
.ui-chart i:nth-child(3),.ui-chart i:nth-child(6){background:var(--accent)}
.bk-principles{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-top:1px solid var(--line)}
.bk-principle{min-height:220px;padding:26px 26px 26px 0;border-right:1px solid var(--line)}
.bk-principle+.bk-principle{padding-left:26px}
.bk-principle:last-child{border-right:0}
.bk-principle span{font-size:12px;color:var(--muted)}
.bk-principle b{display:block;margin:28px 0 12px;font-family:var(--font-head);font-size:24px;font-weight:600}
.bk-principle p{font-size:14px;line-height:22px;font-weight:400;color:var(--muted)}

/* 07 workflows */
.bk-flows{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:72px}
.bk-flow{min-height:560px;display:flex;flex-direction:column;padding:clamp(28px,3.6vw,48px);border-radius:var(--bk-r);background:var(--bk-paper)}
.bk-flow-dark{background:var(--night);color:var(--white)}
.bk-flow h3{margin:20px 0 16px!important;font-size:clamp(34px,4vw,60px);line-height:1}
.bk-flow>p{max-width:42ch;font-size:16px;line-height:26px;font-weight:400;color:var(--muted)}
.bk-flow-dark>p{color:var(--muted-dark)}
.bk-flow ol{list-style:none;counter-reset:st;margin:auto 0 0;padding:32px 0 0}
.bk-flow li{counter-increment:st;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;line-height:22px}
.bk-flow li::before{content:"0" counter(st);font-size:11px;color:var(--muted);padding-top:3px}
.bk-flow-dark li{border-color:var(--line-dark)}

/* 08 roles */
.bk-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:72px}
.bk-role{overflow:hidden;border-radius:var(--bk-r);background:var(--surface);transition:transform .6s var(--ease-out)}
.bk-role:hover{transform:translateY(-4px)}
.bk-role figure{margin:0;aspect-ratio:1/1.1;overflow:hidden;background:var(--surface)}
.bk-role figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.bk-role:hover figure img{transform:scale(1.04)}
.bk-role>div{padding:26px}
.bk-role h3{margin-bottom:12px!important;font-size:30px;line-height:1.1}
.bk-role p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted)}

/* 09 testing */
.bk-context{padding-top:18px;border-top:1px solid var(--line)}
.bk-context strong{display:block;font-family:var(--font-head);font-size:clamp(26px,2.6vw,38px);line-height:1.05;font-weight:600;color:var(--ink)}
.bk-context p{margin-top:14px!important;font-size:15px;line-height:24px;color:var(--muted)}
.bk-iters{margin-top:72px;border-top:1px solid var(--line)}
.bk-iter{display:grid;grid-template-columns:70px minmax(0,.62fr) minmax(0,1.38fr);gap:16px 32px;padding:48px 0;border-bottom:1px solid var(--line)}
.bk-iter-no{font-size:12px;color:var(--muted);padding-top:10px}
.bk-iter h3{font-size:clamp(26px,2.6vw,40px);line-height:1.05}
.bk-iter-body{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.bk-iter-body p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted)}
.bk-iter-body b{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:600}
.bk-iter-pair{grid-column:2/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.bk-iter-img{position:relative;margin:0;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.bk-iter-img img{width:100%;height:100%;display:block;object-fit:cover;object-position:top left}
.bk-iter-a_combo img{object-fit:contain;object-position:center;padding:20px 0 0}
.bk-iter-sales img{object-position:center}
.bk-iter-a_branches{background:#fff}
.bk-iter-a_branches img{object-fit:contain;object-position:center}
.bk-iter-empty{background:transparent;border:1px dashed var(--line)}
.bk-iter-empty figcaption{background:var(--muted)!important}
.bk-iter-img figcaption{position:absolute;top:16px;left:16px;padding:8px 11px;border-radius:999px;background:var(--bk-forest);color:var(--white);font-size:10px;line-height:1;letter-spacing:.08em;text-transform:uppercase}

/* 10 AI */
.bk-ai{display:grid;grid-template-columns:1fr .9fr 1fr;gap:24px;margin-top:72px}
.bk-ai-img{margin:0;border-radius:var(--bk-r);overflow:hidden;background:var(--surface)}
.bk-ai-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.bk-ai-card{min-height:440px;display:flex;flex-direction:column;padding:32px;border-radius:var(--bk-r);background:var(--bk-paper)}
.bk-ai-future{background:var(--surface)}
.bk-ai-card h3{margin:18px 0 24px!important;font-size:clamp(30px,3vw,46px);line-height:1.02}
.bk-ai-card ul{list-style:none;padding:0;margin:auto 0 0}
.bk-ai-card li{padding:14px 0;border-top:1px solid var(--line);font-size:15px;line-height:22px;font-weight:400}
.bk-scope{margin-top:18px!important;font-size:13px;line-height:20px;color:var(--muted);font-weight:400}

/* 11 outcome */
.bk-outcomes{display:grid;grid-template-columns:repeat(3,1fr);margin-top:72px;border-top:1px solid var(--line-dark)}
.bk-outcome{min-height:220px;padding:28px 28px 28px 0;border-right:1px solid var(--line-dark)}
.bk-outcome+.bk-outcome{padding-left:28px}
.bk-outcome:last-child{border-right:0}
.bk-outcome strong{display:block;margin-bottom:20px;font-family:var(--font-head);font-size:clamp(40px,4vw,60px);line-height:1;font-weight:600}
.bk-outcome span{font-size:16px;line-height:26px;font-weight:400;color:var(--white)}
.cs-bukah .more-works{padding-top:var(--sec)}

@media (max-width:1199px){
  .bk-hero{padding-top:120px}
  .bk-hero-row,.bk-head,.bk-split{grid-template-columns:1fr;gap:32px}
  .bk-head-aside{max-width:640px}
  .bk-meta{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);justify-content:stretch;row-gap:28px}
  .bk-map{grid-template-columns:1fr 1fr}
  .bk-node-core{grid-column:1/-1;grid-row:1;min-height:220px}
  .bk-stats,.bk-caps{grid-template-columns:repeat(2,1fr)}
  .bk-palette{grid-template-columns:repeat(3,1fr)}
  .bk-found{grid-template-columns:1fr}
  .bk-comps{grid-template-columns:repeat(2,1fr)}
  .bk-principles{grid-template-columns:repeat(2,1fr)}
  .bk-principle,.bk-principle+.bk-principle{padding:26px 26px 26px 0;border-right:0;border-bottom:1px solid var(--line)}
  .bk-principle:nth-child(even){padding-left:26px;border-left:1px solid var(--line)}
  .bk-levels,.bk-outcomes{grid-template-columns:1fr}
  .bk-level,.bk-level+.bk-level{min-height:0;padding:28px 0;border-right:0;border-bottom:1px solid var(--line-dark)}
  .bk-outcome,.bk-outcome+.bk-outcome{min-height:0;padding:28px 0;border-right:0;border-bottom:1px solid var(--line-dark)}
  .bk-roles{grid-template-columns:1fr}
  .bk-role{display:grid;grid-template-columns:1fr 1fr}
  .bk-role figure{aspect-ratio:auto;min-height:320px}
  .bk-role>div{align-self:end}
  .bk-iter{grid-template-columns:54px 1fr}
  .bk-iter-body,.bk-iter-pair{grid-column:2}
  .bk-ai{grid-template-columns:1fr 1fr}
  .bk-ai-img{grid-column:1/-1;order:-1;aspect-ratio:16/10}
}
@media (max-width:809px){
  .bk-hero{padding-top:104px}
  .bk-name{font-size:25vw}
  .bk-hero-row{margin-top:40px}
  .bk-summary,.bk-copy,.bk-head-aside{font-size:16px;line-height:26px}
  .bk-meta{grid-template-columns:1fr 1fr;margin-top:40px}
  .bk-cover{aspect-ratio:4/5;margin-top:40px}
  .bk-cover figcaption{flex-direction:column;align-items:flex-start;padding:80px 20px 20px}
  .bk-cover figcaption strong{text-align:left}
  .bk-split,.bk-map,.bk-stats,.bk-personas,.bk-levels,.bk-flows,.bk-wide,.bk-palette,.bk-found,.bk-roles,.bk-iters,.bk-ai,.bk-outcomes{margin-top:48px}
  .bk-map{grid-template-columns:1fr;padding-top:48px}
  .bk-stats,.bk-caps,.bk-personas,.bk-flows,.bk-comps,.bk-ai,.bk-principles{grid-template-columns:1fr}
  .bk-principle,.bk-principle+.bk-principle,.bk-principle:nth-child(even){padding:22px 0;border-left:0}
  .bk-stat{min-height:160px}
  .bk-sub{margin-top:80px}
  .bk-persona{min-height:0}
  .bk-persona-details{grid-template-columns:1fr}
  .bk-palette{grid-template-columns:repeat(2,1fr)}
  .bk-swatch{min-height:140px}
  .bk-board-head{flex-direction:column;align-items:flex-start;gap:16px}
  .bk-type{grid-template-columns:80px 1fr}
  .bk-t-display b{font-size:32px}
  .bk-flow{min-height:0}
  .bk-role{display:block}
  .bk-role figure{aspect-ratio:1/1.05;min-height:0}
  .bk-iter{grid-template-columns:36px 1fr;gap:12px 16px;padding:36px 0}
  .bk-iter-body{grid-template-columns:1fr;gap:20px}
  .bk-iter-pair{grid-column:1/-1;grid-template-columns:1fr}
  .bk-ai-img{aspect-ratio:4/5}
  .bk-ai-card{min-height:0}
  .bk-wide img{aspect-ratio:4/3}
  .bk-panel{min-width:0;padding:24px}
  .bk-space{gap:6px}
  .bk-space span{width:auto;flex:1}
  .bk-radius span{width:60px;height:60px}
  .bk-title{font-size:38px;line-height:1.05;overflow-wrap:break-word}
  .bk-subtitle{font-size:34px}
}

/* =============== Shared case-study blocks (16Bags, Fharmer, DeskIt) =============== */
.cs-pale{background:var(--surface)}
.cs-stone{background:var(--surface)}
.cs-mint{background:var(--surface)}
.cs-lilac{background:var(--surface)}
.cs-card-label{display:block;font-size:12px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--bk-forest)}
.cs-card-icon svg{display:block;width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bk-dark .cs-card-label,.bk-blue .cs-card-label{color:var(--white)}
.bk-blue .cs-card-label{color:var(--white)}
.cs-cap{margin-top:16px!important;font-size:13px;line-height:20px;font-weight:400;color:var(--muted)}
.cs-note{margin-top:32px!important;max-width:64ch;font-size:15px;line-height:24px;font-weight:400;opacity:.72}
.cs-subhead{margin-top:96px!important;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}

/* card grids */
.cs-cards{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:32px;margin-top:72px}
.cs-card{display:flex;flex-direction:column;justify-content:flex-start;gap:24px}
.cs-card h3{font-size:clamp(24px,2.4vw,34px);line-height:1.08}
.cs-card p{margin-top:12px!important;font-size:15px;line-height:24px;font-weight:400;color:var(--muted);text-wrap:pretty}
.cs-ruled .cs-card{padding-top:24px;border-top:1px solid var(--ink)}
.cs-boxed{gap:16px}
.cs-boxed .cs-card{min-height:240px;padding:32px;border-radius:20px;background:var(--bk-paper);transition:transform .6s var(--ease-out)}
.cs-boxed .cs-card:hover{transform:translateY(-4px)}
.cs-pale .cs-boxed .cs-card,.cs-stone .cs-boxed .cs-card,.cs-mint .cs-boxed .cs-card,.bk-sage .cs-boxed .cs-card{background:var(--white)}
.cs-stat{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cs-stat .cs-card{min-height:240px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.bk-dark .cs-card p{color:var(--muted-dark)}
.bk-blue .cs-card p{color:var(--white)}
.bk-dark .cs-ruled .cs-card,.bk-blue .cs-ruled .cs-card{border-color:var(--line-dark)}

/* numbered rows */
.cs-rows{margin-top:64px;border-top:1px solid var(--line)}
.cs-row{display:grid;grid-template-columns:54px minmax(0,.9fr) minmax(0,1.1fr);gap:28px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.cs-row span{padding-top:8px;font-size:12px;color:var(--muted)}
.cs-row h3{font-size:clamp(22px,2.4vw,32px);line-height:1.1}
.cs-row p{font-size:16px;line-height:26px;font-weight:400;color:var(--muted)}
.cs-split .cs-rows{margin-top:0}
.cs-split .cs-row{grid-template-columns:40px 1fr;row-gap:8px}
.cs-split .cs-row p{grid-column:2}

/* text + image */
.cs-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:center;margin-top:56px}
.cs-split+.cs-split{padding-top:56px;border-top:1px solid var(--line)}
.cs-split.rev .cs-split-text{order:2}
.cs-split-text{display:flex;flex-direction:column;gap:16px}
.cs-split-text h3{font-size:clamp(32px,3.6vw,52px);line-height:1.04}
.cs-split-body{display:flex;flex-direction:column;gap:16px;font-size:17px;line-height:28px;font-weight:400;color:var(--muted)}
.cs-split-img{margin:0;border-radius:24px;overflow:hidden;background:var(--surface)}
.cs-split-img img{width:100%;height:auto;display:block;transition:transform 1s var(--ease-out)}
.cs-split-img:hover img{transform:scale(1.02)}
.cs-split.solo{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}
.cs-split.solo .cs-split-text{grid-column:1}
.cs-decision{margin-top:12px;padding-top:20px;border-top:1px solid var(--line)}
.cs-decision b{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--bk-forest)}
.cs-decision p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted)}

/* before / after */
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:72px}
.cs-pair-card{padding:18px;border-radius:20px;background:var(--white)}
.cs-pair-top{display:flex;justify-content:space-between;gap:16px;padding:6px 4px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.cs-pair-top span{color:var(--muted)}
.cs-pair-card figure{margin:0;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--surface)}
.cs-pair-card figure img{width:100%;height:100%;object-fit:contain}
.cs-pair-card p{padding:18px 4px 6px;font-size:15px;line-height:24px;font-weight:400;color:var(--muted)}
.cs-takeaway{margin-top:24px!important;padding:24px 30px;border-left:4px solid var(--bk-forest);background:var(--white);font-size:19px;line-height:30px;font-weight:400;max-width:64ch}

/* overview pieces */
.cs-facts{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:64px;margin-top:72px;padding-top:36px;border-top:1px solid var(--line)}
.cs-facts-lead{font-family:var(--font-head);font-size:clamp(24px,2.6vw,36px);line-height:1.2;font-weight:500}
.cs-fact-list{list-style:none;margin:0;padding:0}
.cs-fact-list li{display:grid;grid-template-columns:95px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:22px;font-weight:400}
.cs-fact-list b{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:500}
.cs-context{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:72px}
.cs-context-card{display:flex;flex-direction:column;gap:16px;min-height:300px;padding:clamp(28px,3.4vw,48px);border-radius:24px;background:var(--bk-paper)}
.cs-context-card.dark{background:var(--night);color:var(--white)}
.cs-context-card.dark .cs-card-label{color:var(--cs-hi)}
.cs-context-card h3{margin-top:16px!important;font-size:clamp(28px,3vw,42px);line-height:1.05}
.cs-context-card p{font-size:16px;line-height:26px;font-weight:400;color:var(--muted)}
.cs-context-card.dark p{color:var(--muted-dark)}
.cs-context-card .cs-card-label{margin-bottom:8px}

/* pathway, band, status, shots, metrics, reflection */
.cs-steps{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:16px;margin-top:72px}
.cs-step{display:flex;flex-direction:column;gap:12px;min-height:200px;padding-top:22px;border-top:1px solid var(--line-dark)}
.cs-step small{font-size:12px;color:var(--cs-hi)}
.cs-step strong{margin-top:24px;font-family:var(--font-head);font-size:clamp(22px,2.2vw,30px);line-height:1.1;font-weight:600}
.cs-step span{font-size:14px;line-height:22px;font-weight:400;opacity:.7}
.cs-band{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:24px;padding:clamp(32px,4.6vw,64px);border-radius:24px;background:var(--bk-forest);color:var(--white)}
.cs-band strong{font-family:var(--font-head);font-size:clamp(26px,3.2vw,46px);line-height:1.08;font-weight:600}
.cs-band p{align-self:end;font-size:17px;line-height:28px;font-weight:400;color:var(--muted-dark)}
.cs-status{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.cs-status span{padding:8px 12px;border:1px solid currentColor;border-radius:99px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.cs-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:72px}
.cs-shots figure{margin:0}
.cs-shots img{width:100%;aspect-ratio:4/3.6;object-fit:cover;border-radius:20px;background:var(--surface);display:block}
.cs-shots h3{margin:18px 0 6px!important;font-size:24px;line-height:1.1}
.cs-shots p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted)}
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:72px}
.cs-metrics div{padding:24px 0 40px;border-top:1px solid var(--line-dark)}
.cs-metrics strong{display:block;font-family:var(--font-head);font-size:clamp(64px,9vw,140px);line-height:.95;font-weight:600;letter-spacing:-.03em}
.cs-metrics span{display:block;max-width:26ch;margin-top:18px;font-size:16px;line-height:24px;font-weight:400;color:var(--white)}
.cs-reflect{display:grid;grid-template-columns:1fr 1fr;gap:96px;margin-top:72px}
.cs-reflect>div{padding-top:24px;border-top:1px solid currentColor}
.cs-reflect h3{margin-bottom:18px!important;font-size:clamp(26px,2.8vw,38px);line-height:1.1}
.cs-reflect p,.cs-reflect li{font-size:17px;line-height:28px;font-weight:400;color:var(--muted)}
.bk-dark .cs-reflect p{color:var(--muted-dark)}
.cs-reflect ul{margin:0;padding-left:18px}
.cs-reflect li+li{margin-top:12px}

/* DeskIt field map */
.cs-fieldmap{display:grid;grid-template-columns:1fr auto 1.5fr;gap:24px;align-items:stretch;margin-top:72px}
.cs-field{min-height:280px;padding:30px;border:1px solid var(--line-dark);border-radius:22px;background:var(--surface-dark)}
.cs-field.featured{background:var(--accent);color:var(--white);border-color:var(--accent)}
.cs-field.featured .cs-card-label{color:var(--white)}
.cs-field h3{margin:18px 0 28px!important;font-size:clamp(26px,3vw,40px);line-height:1.05}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-chips span{padding:9px 13px;border:1px solid var(--line-dark);border-radius:99px;font-size:13px}
.cs-field.featured .cs-chips span{border-color:rgba(255,255,255,.5);color:var(--white)}
.cs-plus{align-self:center;font-size:46px;color:var(--cs-hi)}

/* UI samples & table */
.cs-ui{display:grid;gap:12px}
.cs-ui-row{display:flex;flex-wrap:wrap;gap:10px}
.ui-solid{background:var(--cs-ui);border-color:var(--cs-ui);color:var(--white)}
.ui-outline{background:var(--white);border-color:var(--cs-ui);color:var(--cs-ui)}
.ui-sel{background:var(--cs-ui);color:var(--white)}
.cs-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.cs-table{width:100%;min-width:600px;border-collapse:collapse;text-align:left;font-size:13px;font-weight:400}
.cs-table th{background:var(--surface);color:var(--muted);font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:600}
.cs-table th,.cs-table td{padding:16px;border-bottom:1px solid var(--line)}
.cs-table tr:last-child td{border-bottom:0}
.cs-palette{grid-template-columns:repeat(5,1fr)}

@media (max-width:1199px){
  .cs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-split,.cs-split.solo,.cs-split.solo .cs-split-text,.cs-facts,.cs-context,.cs-reflect,.cs-fieldmap,.cs-band{grid-template-columns:1fr;gap:32px}
  .cs-split.rev .cs-split-text{order:0}
  .cs-split.solo .cs-split-body{grid-column:1;grid-row:auto}
  .cs-plus{justify-self:center}
  .cs-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-shots{grid-template-columns:repeat(2,1fr)}
  .cs-metrics{grid-template-columns:1fr;gap:0}
  .cs-palette{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:809px){
  .cs-cards,.cs-pair,.cs-shots,.cs-steps{grid-template-columns:1fr}
  .cs-cards,.cs-pair,.cs-shots,.cs-steps,.cs-facts,.cs-context,.cs-reflect,.cs-fieldmap{margin-top:48px}
  .cs-boxed .cs-card,.cs-stat .cs-card{min-height:0}
  .cs-row{grid-template-columns:36px 1fr;row-gap:8px}
  .cs-row p{grid-column:2}
  .cs-step{min-height:0;padding-bottom:16px}
  .cs-palette{grid-template-columns:repeat(2,1fr)}
  .cs-split-body{font-size:16px;line-height:26px}
  .cs-subhead{margin-top:64px!important}
  .cs-fact-list li{grid-template-columns:80px 1fr;gap:16px}
}
/* Fharmer is the longest name: cap its size so it always fits the container */
.cs-fharmer .bk-name{font-size:min(clamp(110px,18vw,268px),calc((100vw - 2 * var(--pad)) / 4.3))}

.cs-bracket .bk-name{font-size:min(clamp(110px,18vw,268px),calc((100vw - 2 * var(--pad)) / 5.6))}


@media (min-width:1200px){.cs-cards[style*="--cols:4"] .cs-card h3{font-size:clamp(22px,2vw,28px)}}

/* BUKAH overview: heading + quote group and body copy centred against each other */
.bk-split-center{margin-top:0;align-items:center}
.bk-split-left{display:flex;flex-direction:column;gap:56px}
@media (max-width:809px){.bk-split-left{gap:40px}}

/* =============== Style guide page =============== */
.sg-h1{margin-top:24px}
.sg-intro{max-width:56ch;margin-top:24px}
.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;margin-top:48px}
.sg-swatch{display:flex;flex-direction:column;gap:14px}
.sg-chip{aspect-ratio:4/3;display:flex;align-items:flex-end;padding:16px;border-radius:16px;border:1px solid var(--line);font-size:28px;font-weight:600}
.sg-meta b{display:block;font-size:15px}
.sg-meta span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.sg-meta p{margin-top:8px;font-size:14px;line-height:22px;font-weight:400;color:var(--muted)}
.sg-pairs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.sg-pair{display:flex;flex-direction:column;gap:12px;min-height:260px;padding:28px;border-radius:20px}
.sg-pair-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sg-pair h3{margin-top:auto;font-size:28px;line-height:1.1}
.sg-pair p{font-size:15px;line-height:24px;font-weight:400}
.sg-pair b{font-size:14px}
.sg-types{margin-top:40px;border-top:1px solid var(--line)}
.sg-type{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.sg-type-name{font-size:14px}
.sg-type-name small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.sg-sample{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-body{font-size:18px;line-height:30px;font-weight:400;color:var(--muted)}
.sg-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.sg-rules{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.sg-rules li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.sg-rules span{font-size:13px;color:var(--accent)}
.sg-rules p{font-size:18px;line-height:28px;font-weight:400;max-width:70ch}
@media (max-width:1199px){.sg-pairs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:809px){.sg-pairs{grid-template-columns:1fr}.sg-type{grid-template-columns:1fr;gap:8px}.sg-sample{white-space:normal}}

/* =============== Product tokens: design-system samples show each product's own colours + type =============== */
/* --p1 primary, --p2 secondary/highlight, --p2-ink text on --p2, --p-nav active-nav tint, --p-font product typeface */
.cs-bk{--p1:#243837;--p2:#b1fa63;--p2-ink:#18201b;--p-nav:#eef7e8}
.cs-bags{--p1:#0077b6;--p2:#ff7a00;--p2-ink:#141414;--p-nav:#e5f3f6;--p-font:"Raleway",Arial,sans-serif}
.cs-fharmer{--p1:#032f2c;--p2:#94ca3e;--p2-ink:#15201e;--p-nav:#eef5eb}
.cs-deskit{--p1:#061837;--p2:#ff8612;--p2-ink:#fff;--p-nav:#e7ecf6}
.cs-bukah .bk-type b,.cs-bukah .bk-board,.cs-bukah .cs-ui,.cs-bukah .cs-table{font-family:var(--p-font,var(--font-body))}
.cs-bukah .ui-btn{border-color:var(--p1)}
.cs-bukah .ui-primary,.cs-bukah .ui-solid,.cs-bukah .ui-sel{background:var(--p1);border-color:var(--p1);color:#fff}
.cs-bukah .ui-lime{background:var(--p2);border-color:var(--p2);color:var(--p2-ink)}
.cs-bukah .ui-outline{background:#fff;border-color:var(--p1);color:var(--p1)}
.cs-bukah .ui-nav .on{background:var(--p-nav);color:var(--p1)}
.cs-bukah .ui-chart i{background:var(--p1)}
.cs-bukah .ui-chart i:nth-child(3),.cs-bukah .ui-chart i:nth-child(6){background:var(--p2)}
.cs-bk .bk-space i{background:var(--p2)}
/* type specimens (cs_types rows): display, heading, interface, metadata — sizes from the product templates */
.cs-type-0 b{font-size:38px;line-height:1.05;font-weight:700}
.cs-type-1 b{font-size:24px;font-weight:600}
.cs-type-2 b{font-size:17px;font-weight:500}
.cs-type-3 b{font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:809px){.cs-type-0 b{font-size:28px}}

/* type panel heading shows the product typeface by name, set in that typeface */
.cs-bukah .bk-face{font-family:var(--p-font,var(--font-head))}

/* =============== Product design-system sections (values from each project's Figma file) =============== */
.ds-wrap{margin-top:72px}
.ds-swatches{display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:12px}
.ds-sw{display:flex;flex-direction:column;gap:6px}
.ds-sw-chip{aspect-ratio:1/1.1;border-radius:16px;border:1px solid var(--line);margin-bottom:6px}
.ds-sw b{font-size:13px;line-height:18px;font-weight:600}
.ds-sw span{font-size:12px;line-height:16px;color:var(--muted);font-weight:400}
.ds-found{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;margin-top:24px}
.ds-face{margin:20px 0 28px!important;font-size:clamp(34px,4vw,56px);line-height:1.02;font-weight:600}
.ds-trow{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.ds-trow span{font-size:12px;line-height:18px;color:var(--muted);font-weight:400}
.ds-trow b{font-size:15px;font-weight:500;overflow-wrap:anywhere}
.ds-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:baseline}
.ds-k{display:block;margin:24px 0 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.ds-k:first-child{margin-top:0}

/* 16Bags */
.x16{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;font-family:Raleway,sans-serif;color:#363636}
.x16-toggle{display:inline-flex;padding:2px;border:2px solid #00B4D8;border-radius:100px;background:#191630}
.x16-toggle span{padding:14px 34px;border-radius:100px;color:#fff;font-size:14px;font-weight:700}
.x16-toggle .on{background:linear-gradient(180deg,#00B4D8 18%,#0087E6 90%);box-shadow:0 0 4px rgba(0,0,0,.35)}
.x16-btns{display:flex;gap:12px}
.x16-btn{padding:10px 18px;border:1px solid #D0D5DD;border-radius:100px;background:#fff;font-size:14px;font-weight:600;line-height:24px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.x16-danger{background:#D92D20;border-color:#D92D20;color:#fff}
.x16-acc{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;margin-bottom:12px;padding:24px 28px;border-radius:18px;background:#fff;box-shadow:0 5px 16px rgba(8,15,52,.06)}
.x16-acc b{font-size:16px;font-weight:600}
.x16-acc i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(8,15,52,.1);color:#0077B6;font-style:normal;font-size:18px}
.x16-acc.open{border:2px solid #0077B6;border-radius:14px;box-shadow:0 6px 16px rgba(0,119,182,.19)}
.x16-acc.open i{background:#0077B6;color:#fff}
.x16-acc p{grid-column:1/-1;font-size:16px;line-height:1.75;font-weight:400}
.x16-card{padding:16px 16px 22px;border:1px solid #D5D5D5;border-radius:24px;background:#fff}
.x16-media{position:relative;aspect-ratio:338/248;border-radius:12px;overflow:hidden}
.x16-media img{width:100%;height:100%;object-fit:cover}
.x16-media::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(54,54,54,0),rgba(54,54,54,.75))}
.x16-lease,.x16-price{position:absolute;z-index:1;padding:4px 12px;border-radius:100px;color:#fff;font-size:14px;font-weight:700;line-height:1.2}
.x16-lease{top:12px;right:16px;background:#FF7A00}
.x16-price{left:16px;bottom:12px;background:#00B4D8}
.x16-card p{margin:20px 24px 10px!important;font-size:14px}
.x16-card b{display:block;margin:0 24px;font-size:18px;font-weight:700}

/* Fharmer */
.xfh{display:grid;grid-template-columns:1fr 1fr;gap:32px;font-family:Raleway,sans-serif;color:#333}
.xfh-job{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:340px;padding:24px 30px;border:1px solid rgba(51,51,51,.2);border-radius:4px;background:#F9FAFB}
.xfh-who{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.xfh-who>i{width:36px;height:36px;border-radius:50%;background:#C6D8C0}
.xfh-who b{display:block;font-size:14px;font-weight:600}
.xfh-who span{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:600;color:rgba(51,51,51,.5)}
.xfh-who em{width:10px;height:10px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#DF0000}
.xfh-job h4{font-family:Raleway,sans-serif!important;font-size:16px;line-height:1.5;font-weight:700;letter-spacing:.02em;color:#333}
.xfh-job p{margin-top:-6px!important;font-size:12px;line-height:1.5;letter-spacing:.02em;font-weight:400}
.xfh-apply{width:70px;padding:4px 8px;border:1px solid #042C2C;border-radius:4px;text-align:center;font-size:12px;font-weight:600}
.xfh-job small{font-size:12px;font-weight:600;color:rgba(51,51,51,.5)}
.xfh-checks{display:flex;gap:40px}
.xfh-checks i{display:grid;place-items:center;width:18px;height:18px;border:1.5px solid #042C2C;border-radius:4px;font-style:normal;font-size:11px;color:#fff}
.xfh-checks i.on{background:#042C2C}
.xfh-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px}
.xfh-chip{padding:8px 24px;border:1px solid rgba(51,51,51,.5);border-radius:8px;background:#EEEEEE;font-family:Poppins,sans-serif;font-size:14px;font-weight:300;line-height:1.5}
.xfh-chip.on{background:#96C93D;border-color:#96C93D;color:#042C2C}
.xfh-follow{width:200px;padding:13px 16px;border-radius:4px;background:#96C93D;text-align:center;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;color:#042C2C}
.xfh-follow.ing{background:rgba(4,44,44,.2)}
.xfh-follow.sm{width:auto;padding:4px 12px;font-size:11px}
.xfh-poll{display:flex;flex-direction:column;gap:8px}
.xfh-poll>p{margin-bottom:8px!important;font-size:14px;line-height:1.5;font-weight:400}
.xfh-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:100px;background:#fff}
.xfh-bar span{padding:4px 19px;border-radius:100px;background:linear-gradient(90deg,#FDC97C 0%,#96C93D 116%);font-size:14px;font-weight:500;line-height:1.5;white-space:nowrap}
.xfh-bar b{padding-right:4px;font-size:14px;font-weight:600}
.xfh-poll small{margin-top:4px;font-size:14px;font-weight:500}
.xfh-poll small b{font-weight:800;color:#BE1C1C}

/* DeskIt */
.xdk{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;font-family:'DM Sans',sans-serif;color:#172F51}
.xdk-form{padding:24px;border:1px solid #DCE0E5;border-radius:8px;background:#fff}
.xdk-form label{display:block;margin:14px 0 6px;font-size:12px;font-weight:500}
.xdk-form label:first-child{margin-top:0}
.xdk-in{display:flex;justify-content:space-between;padding:10px 12px;border-radius:4px;background:#F8FAFC;font-size:12px;color:#949FAF}
.xdk-in i{font-style:normal}
.xdk-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xdk-toggle{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:10px 12px;border-radius:4px;background:#F8FAFC;font-size:12px;color:#172F51;text-decoration:underline}
.xdk-toggle i{width:28px;height:16px;border-radius:99px;background:#DCE0E5;position:relative}
.xdk-toggle i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff}
.xdk-up{margin-top:14px;padding:18px;border:1px dashed #A6ABC8;border-radius:4px;text-align:center;font-size:12px;color:#FA8212}
.xdk-up small{color:#949FAF}
.xdk-btn{display:block;margin-top:16px;padding:11px;border-radius:4px;background:#FA8212;text-align:center;font-size:13px;font-weight:700;color:#fff}
.xdk-ticket{border:1px solid #DCE0E5;border-left:3px solid #172F51;border-radius:6px;background:#fff}
.xdk-tt{display:flex;gap:12px;padding:16px}
.xdk-tt>i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#4FAFCB;color:#fff;font-style:normal;font-weight:700}
.xdk-tt b{display:block;font-size:14px;font-weight:500}
.xdk-tt b em{margin-left:6px;padding:2px 6px;border-radius:4px;background:rgba(255,0,0,.1);color:#D82A04;font-style:normal;font-size:11px}
.xdk-tt span{display:block;margin-top:4px;font-size:12px;color:#6D7D92}
.xdk-meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #DCE0E5}
.xdk-meta div{padding:12px 16px;font-size:13px}
.xdk-meta small{display:block;margin-bottom:4px;font-size:11px;color:#6D7D92}
.xdk-pri::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;background:#4FAFCB}
.xdk-menu{display:inline-flex;flex-direction:column;border-radius:6px;background:#fff;box-shadow:0 8px 24px rgba(4,20,56,.12)}
.xdk-menu span{padding:12px 18px;border-bottom:1px solid #E8EAEE;font-size:13px}
.xdk-menu span:last-child{border-bottom:0}
.xdk-row{display:flex;flex-wrap:wrap;gap:8px}
.xdk-st{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:4px;background:#F8FAFC;font-size:12px;color:var(--c)}
.xdk-st i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.xdk-dept{padding:6px 10px;border-radius:4px;background:color-mix(in srgb,var(--c) 20%,transparent);font-size:12px;color:var(--c)}

/* BracketPay */
.xbp{display:grid;grid-template-columns:1fr 1fr;gap:32px;font-family:Raleway,sans-serif;color:#1E293B}
.xbp-row{display:flex;flex-wrap:wrap;gap:12px}
.xbp-btn{padding:12px 22px;border-radius:10px;background:#A0E600;font-family:Lexend,sans-serif;font-size:15px;font-weight:400;color:#1E293B}
.xbp-btn.ghost{background:transparent;border:1px solid #25315D;color:#25315D}
.xbp-btn.sm{padding:8px 16px;font-size:13px}
.xbp-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xbp-feats div{min-height:120px;padding:20px;border-radius:20px}
.xbp-feats b{font-family:Lexend,sans-serif;font-size:16px;font-weight:600;color:#25315D}
.xbp-faq{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid rgba(30,41,59,.25);font-size:15px;font-weight:300}
.xbp-faq i{font-style:normal;font-size:20px}
.xbp-cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:28px;border-radius:20px;background:#25315D}
.xbp-cta b{font-family:Lexend,sans-serif;font-size:22px;font-weight:600;line-height:1.3;color:#fff}
.xbp-cta em{font-style:normal;color:#A0E600}

@media (max-width:1199px){
  .ds-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ds-found,.x16,.xfh,.xdk,.xbp{grid-template-columns:1fr}
}
@media (max-width:809px){
  .ds-wrap{margin-top:48px}
  .ds-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-trow{grid-template-columns:1fr;gap:6px}
  .x16-toggle span{padding:12px 18px}
  .xfh-follow{width:auto;flex:1}
  .xdk-meta{grid-template-columns:1fr 1fr}
  .xbp-feats{grid-template-columns:1fr}
}

/* BUKAH (Urbanist; forest #243837, lime #A8DF46) */
.xbk{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;font-family:Urbanist,sans-serif;color:#1C274C}
.xbk-kpis{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #E2E6E9;border-radius:6px;background:#fff}
.xbk-kpi{display:flex;flex-direction:column;gap:8px;padding:16px;border-left:1px solid #E2E6E9}
.xbk-kpi:first-child{border-left:0}
.xbk-kpi span{font-size:12px;color:#7984A9}
.xbk-kpi b{font-size:24px;font-weight:500}
.xbk-kpi small{font-size:12px}
.xbk-kpi small em{font-style:normal;color:#7984A9}
.xbk-kpi .up{color:#36A70C}
.xbk-kpi .down{color:#AC0F05}
.xbk-table{border:1px solid #E2E6E9;border-radius:6px;background:#fff;overflow:hidden}
.xbk-tr{display:grid;grid-template-columns:.8fr .8fr 1.4fr 1fr;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid #E2E6E9;font-size:12px}
.xbk-th{border-top:0;background:#F5F5F6;color:#7984A9}
.xbk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.xbk-chip{justify-self:start;padding:4px 14px;border-radius:100px;background:color-mix(in srgb,var(--c) 10%,transparent);font-size:12px;color:var(--c);white-space:nowrap}
.xbk-ai{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px 32px 20px;border:1px solid #E2E6E9;border-radius:6px;background:radial-gradient(120% 90% at 85% 100%,#3d5a3c 0%,#243837 60%);text-align:center}
.xbk-ai-k{position:absolute;left:16px;top:14px;font-size:12px;font-weight:500;color:#fff}
.xbk-ai p{font-size:14px;font-weight:500;line-height:1.5;color:#E2E6E9}
.xbk-ai b{font-size:12px;font-weight:600;color:#A8DF46}
.xbk-ai i{display:flex;gap:4px;margin-top:10px}
.xbk-ai i em{width:6px;height:6px;border-radius:50%;background:#fff}
.xbk-ai i em.on{background:#A8DF46}
.xbk-nav{display:flex;flex-direction:column;gap:4px;max-width:240px}
.xbk-nav span{padding:10px 12px;border-radius:6px;font-size:14px;color:#1C274C}
.xbk-nav .on{background:linear-gradient(90deg,#F5F5F6,#E7EDF1);border-right:3px solid #243837;font-weight:600}
.xbk-filter{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:6px;background:#E8E8E8;font-size:14px;font-weight:500}
.xbk-filter.mint{background:#CDE0DF;color:#243837}
.xbk-btn{padding:10px 20px;border-radius:6px;background:#A8DF46;font-size:14px;font-weight:600;color:#1C274C}
.cs-bk{--p-font:Urbanist,sans-serif}
.xbk-chev{width:16px;height:16px;flex:none;display:block}
.bk-board+.bk-board{margin-top:24px}
/* waiter (tablet + mobile) */
.xbk-cats{display:flex;flex-wrap:wrap;gap:8px}
.xbk-cats span{padding:6px 14px;border-radius:6px;background:#EEF0F2;font-size:14px;color:#5A6478}
.xbk-cats .on{background:#243837;color:#fff}
.xbk-items{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.xbk-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;height:84px;min-width:0;padding:14px 16px;border:1px solid #E2E6E9;border-radius:8px;background:#fff;font-size:15px}
.xbk-item b{font-weight:400;color:#7984A9}
.xbk-item>span{flex:none;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.xbk-item.sel{border:2px solid #7AC943}
.xbk-item i{position:absolute;right:12px;bottom:12px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#243837;color:#fff;font-size:11px;font-style:normal}
.xbk-na{align-self:stretch;padding:5px 10px;border-radius:4px;background:#243837;color:#fff;font-size:13px;font-style:normal;text-align:center}
.xbk-seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:8px;background:#EEF0F2;max-width:420px}
.xbk-seg span{padding:9px;border-radius:6px;text-align:center;font-size:14px;color:#5A6478}
.xbk-seg .on{background:#243837;color:#fff;font-weight:500}
.xbk-oi,.xbk-tx{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border:1px solid #E2E6E9;border-radius:8px;background:#fff}
.xbk-oi div,.xbk-tx>div:first-child{display:flex;flex-direction:column;gap:6px}
.xbk-oi b,.xbk-tx b{font-size:14px;font-weight:500}
.xbk-oi small,.xbk-tx small{font-size:13px;color:#7984A9}
.xbk-oi-r{align-items:flex-end}
.xbk-tabs{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:10px;border:1px solid #E2E6E9;border-radius:8px;background:#fff}
.xbk-tabs span{padding:8px 12px;border-radius:6px;font-size:13px}
.xbk-tabs .on{background:#A8DF46;font-weight:600}
.xbk-order{border:1px solid #E2E6E9;border-radius:8px;background:#fff;font-size:14px}
.xbk-order-h{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #E2E6E9}
.xbk-order-h b{font-weight:600}
.xbk-order-b{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 16px;color:#7984A9}
.xbk-order-b span:nth-child(even),.xbk-order-b b{text-align:right}
.xbk-order-b b{font-weight:500;color:#1C274C}
.xbk-order-f{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 16px}
.xbk-order-f span{justify-content:center;text-align:center}
.xbk-txs{display:flex;flex-direction:column;gap:8px}
.xbk-tx-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.xbk-pin{display:flex;flex-direction:column;gap:16px;max-width:320px;padding:24px;border-radius:16px;background:#1E2422;color:#fff}
.xbk-pin-dots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.xbk-pin-dots i{height:36px;border-radius:6px;background:rgba(255,255,255,.12)}
.xbk-pin-dots i.on{background:rgba(255,255,255,.28)}
.xbk-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center;font-size:20px}
.xbk-keys span{padding:6px 0}
.xbk-pin .xbk-btn{text-align:center}
@media (max-width:1199px){.xbk{grid-template-columns:1fr}}
@media (max-width:809px){.xbk-kpis{grid-template-columns:1fr}.xbk-kpi{border-left:0;border-top:1px solid #E2E6E9}.xbk-kpi:first-child{border-top:0}.xbk-tr{grid-template-columns:1fr 1fr}}

/* case-study chapter bar (sits under the header; follows it when it hides) */
.cs-nav{position:fixed;left:0;right:0;top:0;z-index:49;height:44px;background:rgba(10,11,18,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .5s var(--ease-out),opacity .3s}
.cs-nav.on{transform:translateY(80px);opacity:1;pointer-events:auto}
.site-header.hidden~.cs-nav.on{transform:none}
.menu-open .cs-nav{opacity:0;pointer-events:none}
.cs-nav .container{height:100%}
.cs-nav ul{height:100%;display:flex;align-items:center;gap:4px;margin:0 -10px;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.cs-nav ul::-webkit-scrollbar{display:none}
.cs-nav li{flex:none}
.cs-nav a{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;font-weight:500;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--muted-dark);transition:color .2s}
.cs-nav a:hover{color:var(--white)}
.cs-nav a[aria-current]{color:var(--accent-light);font-weight:700}
/* reserve the bold width so links don't shift when the highlight moves */
.cs-nav a span{display:inline-flex;flex-direction:column}
.cs-nav a span::after{content:attr(data-t);height:0;overflow:hidden;visibility:hidden;font-weight:700}
.cs-nav a[aria-current]::before{content:"";width:5px;height:5px;background:currentColor}

/* BUKAH information architecture (service model x role) */
.bk-ia-intro{max-width:640px;font-size:18px;line-height:30px;font-weight:400;color:var(--muted)}
.bk-ia{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:56px}
.bk-ia-model{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:clamp(24px,2.4vw,32px);line-height:1.1}
.bk-ia-model small{font-size:14px;line-height:20px;font-weight:400;color:var(--muted)}
.bk-ia-card{padding:28px;border-radius:var(--bk-r);background:var(--surface);border:1px solid var(--line)}
.bk-ia-who{display:block;margin-bottom:16px;font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bk-ia-card ul{list-style:none;margin:0;padding:0}
.bk-ia-card li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:22px}
.bk-ia-card li b{font-weight:600}
.bk-ia-card li span{font-weight:400;color:var(--muted)}
.bk-ia-card li.own{margin:0 -12px;padding:12px;border-top-color:transparent;border-radius:10px;background:var(--accent-soft)}
.bk-ia-card li.own span{color:var(--ink)}
.bk-ia-card li.own b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;vertical-align:middle;border-radius:50%;background:var(--accent)}
.bk-ia-card li.own+li{border-top-color:transparent}
.bk-ia-foot{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.bk-ia-shared,.bk-ia-callout{display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:var(--bk-r);font-size:15px;line-height:24px;font-weight:400}
.bk-ia-shared{border:1px dashed var(--line);color:var(--muted)}
.bk-ia-callout{background:var(--night);color:var(--muted-dark)}
.bk-ia-shared b,.bk-ia-callout b{margin-bottom:4px;font-size:12px;line-height:1;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.bk-ia-callout b{color:var(--accent-light)}
@media (max-width:809px){
  .bk-ia,.bk-ia-foot{grid-template-columns:1fr}
  .bk-ia{gap:16px;margin-top:40px}
  .bk-ia-instant-staff{order:1}.bk-ia-instant-kitchen{order:2}.bk-ia-p{order:3;margin-top:32px}.bk-ia-pre-staff{order:4}.bk-ia-pre-kitchen{order:5}
  .bk-ia-card{padding:22px}
  .bk-ia-card li{grid-template-columns:90px 1fr;gap:12px;font-size:14px}
}
.bk-ia-board{margin:56px 0 0;padding:24px;border-radius:var(--bk-r);background:#F4F4F4;border:1px solid var(--line)}
.bk-ia-board figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.bk-ia-board figcaption a{font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bk-ia-maps{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bk-ia-map{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;background:#F4F4F4;border:1px solid #E4E4E4;transition:border-color .2s}
.bk-ia-map:hover{border-color:var(--ink)}
.bk-ia-map img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
.bk-ia-map span{font-size:13px;line-height:18px;color:var(--muted)}
@media (max-width:809px){.bk-ia-board{padding:16px;margin-top:40px}.bk-ia-maps{grid-template-columns:1fr}}

/* Fharmer components: grouped board (values from the Fharmer Figma screens) */
.xfh{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px;align-items:start}
.xfh-group{display:flex;flex-direction:column;gap:14px;min-width:0}
.xfh-group>.ds-k{margin-top:10px}
.xfh-group>.ds-k:first-child{margin-top:0}
.xfh-full{grid-column:1/-1}
.xfh-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.xfh-ic.sm{width:16px;height:16px}
.xfh-ic.lg{width:44px;height:44px;stroke-width:1.2;color:#333}
.xfh-ic .f{fill:currentColor;stroke:none}
.xfh-ic .w{stroke:#042C2C}
.xfh-ic.liked{fill:#DF0000;stroke:#DF0000}
.xfh-av{display:block;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#6B8F4E,#2F4A2A)}
.xfh-av.sm{width:28px;height:28px}
.xfh-av.lg{width:32px;height:32px;background:linear-gradient(135deg,#B08060,#5A3A2A)}
.xfh-gap{flex:1}
.xfh-card{border-radius:8px;background:#fff}
/* nav */
.xfh-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 28px;border-radius:8px;background:#042C2C;color:#fff;font-family:Raleway,sans-serif}
.xfh-logo{display:flex;align-items:center;gap:6px;font-size:24px;font-weight:700;letter-spacing:-.01em}
.xfh-logo svg{width:28px;height:28px}
.xfh-nav-items{display:flex;gap:36px}
.xfh-nav-items span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;font-weight:500}
.xfh-nav-items .on{color:#96C93D}
.xfh-nav-me{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500}
/* composer + post */
.xfh-compose{display:flex;gap:14px;padding:18px}
.xfh-compose>div{flex:1;min-width:0}
.xfh-input{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border:1px solid rgba(51,51,51,.2);border-radius:4px;background:#F4F4F4;font-size:14px;color:rgba(51,51,51,.5);font-family:Poppins,sans-serif;font-weight:300}
.xfh-input.sm{min-height:40px;font-family:Raleway,sans-serif;font-weight:400}
.xfh-compose-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.xfh-tool{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;background:#EEEEEE;font-size:12px;font-weight:500}
.xfh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border:1px solid #042C2C;border-radius:4px;background:#042C2C;color:#fff;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;white-space:nowrap}
.xfh-btn.sm{padding:5px 14px;font-size:12px;font-weight:500}
.xfh-btn.ghost{background:transparent;color:#042C2C}
.xfh-btn.mute{background:#C7D1D0;border-color:#C7D1D0;color:#042C2C}
.xfh-btn.block{display:flex;width:100%}
.xfh-post{padding:18px}
.xfh-post-head,.xfh-comment,.xfh-note,.xfh-person{display:flex;align-items:center;gap:12px}
.xfh-post-head>div,.xfh-comment>div,.xfh-note>div,.xfh-person>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.xfh-post-head b,.xfh-comment b,.xfh-person b{font-size:14px;font-weight:600}
.xfh-post-head span,.xfh-person span:not(.xfh-follow){font-size:12px;color:rgba(51,51,51,.5)}
.xfh-post>p{margin:14px 0!important;font-size:14px;line-height:1.5}
.xfh-post figure{margin:0;border-radius:6px;overflow:hidden;aspect-ratio:16/9}
.xfh-post figure img{width:100%;height:100%;object-fit:cover;display:block}
.xfh-actions{display:flex;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid #EEEEEE}
.xfh-actions em{margin-right:10px;font-style:normal;font-size:12px;font-weight:600}
.xfh-comment{padding-top:14px}
.xfh-comment span{font-size:13px;color:#4B7A1C}
.xfh-comment small,.xfh-note small{flex:none;font-size:11px;color:rgba(51,51,51,.5)}
.xfh-add{padding-top:14px;font-size:12px;color:rgba(51,51,51,.4)}
/* lists */
.xfh-list{padding:4px 18px}
.xfh-note,.xfh-person{padding:14px 0;border-top:1px solid #EEEEEE}
.xfh-note:first-child,.xfh-person:first-child{border-top:0}
.xfh-note p{margin:0!important;font-size:14px;line-height:1.4}
.xfh-note p b{font-weight:600}
.xfh-note div>span:not(.xfh-follow){font-size:12px;color:rgba(51,51,51,.5)}
.xfh-note .xfh-follow{align-self:flex-start}
/* fields */
.xfh-field{display:flex;flex-direction:column;gap:8px;font-family:Poppins,sans-serif}
.xfh-field>span{font-size:12px;font-weight:500}
.xfh-select{justify-content:space-between}
.xfh-select i{border:5px solid transparent;border-top:6px solid #333;border-bottom:0}
.xfh-upload{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px dashed rgba(51,51,51,.4);border-radius:6px;background:#fff}
.xfh-upload>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.xfh-upload b{font-size:13px;font-weight:500}
.xfh-upload span:not(.xfh-btn){font-size:11px;color:rgba(51,51,51,.5)}
/* tabs, hub, search, menu */
.xfh-tabs{display:flex;gap:28px;overflow-x:auto;border-bottom:1px solid rgba(51,51,51,.3);scrollbar-width:none}
.xfh-tabs span{flex:none;padding:0 4px 6px;font-size:14px}
.xfh-tabs .on{margin-bottom:-1px;border-bottom:2px solid #042C2C;font-weight:700;color:#042C2C}
.xfh-hub{display:inline-flex;align-self:flex-start;border-radius:6px;background:#042C2C;font-family:Poppins,sans-serif;font-size:15px;font-weight:600;color:#fff}
.xfh-hub span{padding:14px 40px}
.xfh-hub .on{border-radius:6px;background:linear-gradient(180deg,#96C93D,#5E9A2A);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.xfh-search{flex:1;min-width:160px;background:#fff}
.xfh-menu{display:flex;flex-direction:column;gap:4px;padding:12px;max-width:280px}
.xfh-menu span{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:4px;font-size:14px}
.xfh-menu .on{background:#CFD9D8}
.xfh-row{align-items:center;margin-bottom:0}
.xfh-checks{margin-left:8px}
@media (max-width:1199px){.xfh-nav-items{gap:20px}.xfh-nav-me span{display:none}}
@media (max-width:809px){
  .xfh{grid-template-columns:1fr;gap:40px}
  .xfh-nav{flex-wrap:wrap;padding:14px 16px}
  .xfh-nav-items{order:3;width:100%;justify-content:space-between;gap:8px}
  .xfh-nav-items span{font-size:11px}
  .xfh-hub span{padding:12px 22px}
  .xfh-upload{flex-wrap:wrap}
}

/* ---------- Polaris Digitech case study ---------- */
.pl-audit{margin:72px 0 0}
.pl-audit img{width:100%;height:auto;display:block;border-radius:var(--bk-r)}
.pl-findings{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:56px}
.pl-findings article{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--line)}
.pl-findings article>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--white);font-size:15px;font-weight:600}
.pl-findings h3{font-size:22px;line-height:1.2;margin-bottom:8px!important}
.pl-findings p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted)}
/* navigation map */
.pl-ia{margin-top:72px;display:flex;flex-direction:column;gap:20px}
.pl-ia-row{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start}
.pl-ia-tag{justify-self:start;padding:8px 12px;border:1px solid var(--line);border-radius:99px;font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pl-ia-tag.on{border-color:var(--ink);background:var(--ink);color:var(--white)}
.pl-ia-flat{display:flex;flex-wrap:wrap;gap:8px}
.pl-ia-flat span{padding:12px 18px;border-radius:12px;background:var(--surface);font-size:15px;color:var(--muted)}
.pl-ia-tree{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pl-ia-col{padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.pl-ia-col h4{padding-bottom:14px;margin-bottom:6px!important;border-bottom:1px solid var(--line);font-size:18px;line-height:1.2}
.pl-ia-col ul{margin:0;padding:0;list-style:none}
.pl-ia-col li{padding:8px 0;font-size:14px;line-height:20px;color:var(--muted)}
.pl-ia-col li em{margin-left:6px;padding:3px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.pl-menus{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.pl-menus figure{margin:0}
.pl-menus img{width:100%;aspect-ratio:1010/585;object-fit:contain;padding:14px;border-radius:20px;background:#1E1E22;display:block}
.pl-menus h3{margin:18px 0 6px!important;font-size:22px;line-height:1.1}
.pl-menus p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted)}
/* tall captures that scroll on hover */
.pl-scrolls{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:72px}
.cs-steps+.pl-scrolls{margin-top:48px}
.pl-scroll{margin:0;padding:14px;border-radius:24px;background:var(--white)}
.pl-scroll figcaption{padding:6px 6px 16px;font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pl-scroll-frame{height:clamp(380px,46vw,640px);border-radius:14px;overflow:hidden;background:var(--surface)}
.pl-scroll-frame img,.pl-phone-frame img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 0;transition:object-position 1.2s var(--ease-out)}
.pl-hint{margin-top:20px!important;font-size:13px;color:var(--muted)}
@media (hover:hover){
  .pl-scroll:hover img,.pl-phone:hover .pl-phone-frame:not(.still) img{object-position:50% 100%;transition:object-position var(--d,10s) linear}
}
@media (hover:none){.pl-hint{display:none}}
/* phones */
.pl-phones{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:72px}
.pl-phone{margin:0}
.pl-phone-frame{aspect-ratio:390/844;padding:7px;border-radius:34px;background:#141418;overflow:hidden}
.pl-phone-frame img{border-radius:27px}
.pl-phone figcaption{margin-top:14px;font-size:14px;text-align:center;color:var(--muted)}
/* product components */
.xpl{display:grid;grid-template-columns:1fr 1fr;gap:32px;font-family:Satoshi,sans-serif;color:#27252F}
.xpl-col{min-width:0}
.xpl-full{grid-column:1/-1;min-width:0}
.xpl-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.xpl-nav{display:flex;align-items:center;gap:32px;padding:12px 12px 12px 20px;border-radius:12px;background:#283172;color:#fff;font-size:13px;overflow:hidden;white-space:nowrap}
.xpl-nav b{display:flex;flex-direction:column;margin-right:auto;font-size:17px;line-height:1;letter-spacing:.06em;font-weight:500}
.xpl-nav b span{display:block}
.xpl-nav b i{font-style:normal;font-size:13px}
.xpl-nav b small{font-size:8px;letter-spacing:.42em;margin-top:2px}
.xpl-nav em{font-style:normal;font-size:10px}
.xpl-nav .on{color:#D7B56D;text-decoration:underline;text-underline-offset:4px}
.xpl-nav strong{padding:9px 18px;border-radius:8px;background:#4A4F73;font-weight:500}
.xpl-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;border-radius:10px;background:#0B1353;color:#fff;font-size:15px;font-weight:700}
.xpl-btn.gold{background:#D7B56D;color:#0B1353}
.xpl-btn.ghost{height:32px;padding:0 14px;border-radius:8px;background:#EBECF6;color:#283172;font-size:13px;font-weight:500}
.xpl-btn.sm{height:30px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:500}
.xpl-pill{padding:6px 20px;border:1px solid #D08F04;border-radius:99px;color:#D08F04;font-size:13px;font-weight:500}
.xpl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:26px 22px;border-radius:14px;background:#040937;text-align:center}
.xpl-stats b{display:block;font-size:clamp(34px,3.4vw,48px);line-height:1;font-weight:400;color:#D7B56D}
.xpl-stats span{display:block;margin-top:8px;font-size:11px;line-height:1.3;color:rgba(255,255,255,.8)}
.xpl-faq{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border-radius:10px;background:#fff;border:1px solid #E8EDFA;font-size:14px;color:#27252F}
.xpl-faq i{font-style:normal;font-size:18px;color:#6F7286}
.xpl-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xpl-pcard{display:flex;flex-direction:column;gap:10px;min-height:190px;padding:20px;border-radius:18px}
.xpl-pcard b{display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.3;font-weight:500}
.xpl-pcard svg{flex:none;width:20px;height:20px;fill:none;stroke:#27252F;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.xpl-pcard p{flex:1;font-size:13px;line-height:1.5;color:#46485F}
.xpl-pcard i{align-self:flex-end;font-style:normal}
.xpl-proj{display:flex;flex-direction:column;min-height:150px;padding:18px;border-radius:16px}
.xpl-proj small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.xpl-proj b{flex:1;margin-top:8px;font-size:20px;line-height:1.15;font-weight:500}
.xpl-proj span{align-self:flex-start;padding:6px 12px;border-radius:6px;background:rgba(255,255,255,.22);font-size:12px}
.xpl-chip{padding:7px 12px;border:1px solid #C9CCE6;border-radius:8px;background:#fff;font-size:13px;color:#283172}
.xpl-chip em{margin-left:4px;font-style:normal;color:#6F7286}
.xpl-chip.on{background:#0B1353;border-color:#0B1353;color:#fff}
.xpl-chip.on em{color:#fff}
.xpl-job{margin-top:12px;padding:20px;border-radius:14px;background:#fff;border:1px solid #E8EDFA}
.xpl-job b{font-size:16px;font-weight:500;color:#283172}
.xpl-job p{margin:8px 0 16px!important;font-size:13px;line-height:1.5;color:#6F7286}
.xpl-job div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.xpl-job small{font-size:12px;color:#6F7286}
@media (max-width:1199px){
  .pl-ia-tree{grid-template-columns:repeat(2,1fr)}
  .pl-menus{grid-template-columns:1fr 1fr}
  .pl-phones{grid-template-columns:repeat(3,1fr)}
  .xpl{grid-template-columns:1fr}
}
@media (max-width:809px){
  .pl-audit,.pl-ia,.pl-menus,.pl-scrolls,.pl-phones{margin-top:48px}
  .pl-findings{grid-template-columns:1fr;margin-top:40px}
  .pl-ia-row{grid-template-columns:1fr;gap:12px}
  .pl-ia-tree,.pl-menus,.pl-scrolls{grid-template-columns:1fr}
  .pl-scroll{padding:10px}
  .pl-phones{display:flex;gap:14px;overflow-x:auto;margin-inline:-16px;padding:0 16px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pl-phone{flex:0 0 62%;scroll-snap-align:center}
  .xpl-two,.xpl-stats{grid-template-columns:1fr}
  .xpl-nav>span{display:none}
}
.bk-meta dd a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.bk-meta dd a:hover{color:var(--accent)}

/* ---------- Projects page grids ---------- */
.proj-grid{margin-top:56px}
.shots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.shot{margin:0;aspect-ratio:450/550;border-radius:10px;overflow:hidden;background:var(--surface)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.shot:hover img{transform:scale(1.04)}
@media (max-width:809px){.proj-grid{margin-top:40px}.shots-grid{grid-template-columns:1fr 1fr;gap:12px}}

/* Year beside the project title, revealed on hover (always shown on touch) */
.work-title:has(.work-year){display:flex;justify-content:space-between;align-items:center;gap:16px}
.work-year{color:var(--muted);opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s var(--ease-out)}
.work-card:hover .work-year,.work-card:focus-visible .work-year{opacity:1;transform:none}
@media (hover:none){.work-year{opacity:1;transform:none}}

/* ---------- Work cards: two screens on a soft brand gradient; they part slightly on hover ---------- */
.work-thumb.ws{background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%)}
.work-thumb.ws img{position:absolute;height:auto;object-fit:initial;display:block;border-radius:10px;box-shadow:0 1px 0 1px rgba(255,255,255,.55),0 22px 48px -12px rgba(20,24,40,.28);transition:transform .7s var(--ease-out)}
/* two desktops: back one up and to the right, front one lower left */
.ws-dd .ws-back{left:32%;top:12.5%;width:60%}
.ws-dd .ws-front{left:8%;top:40.5%;width:60%}
.work-card:hover .ws-dd .ws-back{transform:translate(12px,-12px)}
.work-card:hover .ws-dd .ws-front{transform:translate(-12px,12px)}
/* desktop with a phone in front; two phones side by side */
.ws-dp .ws-back{left:6%;top:14%;width:72%}
.ws-dp .ws-front{right:7%;bottom:8%;width:24%}
.ws-ppp .ws-back{left:10%;top:14.5%;width:28%}
.ws-ppp .ws-side{right:10%;top:14.5%;width:28%}
.ws-ppp .ws-front{left:33.5%;top:8%;width:33%}
.work-card:hover .ws-dp .ws-back{transform:translate(-12px,-12px)}
.work-card:hover .ws-dp .ws-front{transform:translate(12px,12px)}
.work-card:hover .ws-ppp .ws-back{transform:translateX(-14px)}
.work-card:hover .ws-ppp .ws-side{transform:translateX(14px)}
.work-card:hover .ws-ppp .ws-front{transform:translateY(-8px)}
/* phone screens carry their own device frame, so no card edge or box shadow */
.work-thumb.ws-dp .ws-front,.work-thumb.ws-ppp img{border-radius:0;box-shadow:none;filter:drop-shadow(0 20px 26px rgba(20,24,40,.22))}

@media (max-width:809px){.work-tags{display:none}}
.work-year{font-size:15px;line-height:22px;letter-spacing:0}
@media (max-width:809px){.work-year{font-size:13px;line-height:20px}}

/* ---------- BracketPay: framed app screens + app components ---------- */
.bp-phones{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.bp-phones figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 20px 24px;border-radius:24px;background:var(--surface)}
.bp-phones img{width:min(100%,220px);height:auto;filter:drop-shadow(0 18px 24px rgba(20,24,40,.18))}
.bp-phones figcaption{font-size:14px;color:var(--muted)}
.bp-feature .cs-split-text h3{font-size:clamp(28px,3vw,44px)}
.bp-shot{margin:0;display:grid;place-items:center;padding:clamp(32px,5vw,64px) 24px;border-radius:24px;background:linear-gradient(135deg,#DCE0F2 0%,#F7F8F6 52%,#E7F7C4 100%)}
.bp-shot img{width:min(58%,280px);height:auto;filter:drop-shadow(0 24px 30px rgba(20,24,40,.22))}
.xbpa-bal{padding:18px 20px;border-radius:12px;background:#1A2755;color:#fff;font-family:Raleway,sans-serif}
.xbpa-bal-top{display:flex;justify-content:space-between;margin-bottom:22px}
.xbpa-bal-top span{padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.12);font-size:12px}
.xbpa-bal-top em{padding:3px 10px;border:1px solid #A0E600;border-radius:6px;color:#A0E600;font-style:normal;font-size:12px}
.xbpa-bal small{display:block;font-size:12px;opacity:.6}
.xbpa-bal b{font-family:Lexend,sans-serif;font-size:28px;font-weight:600}
.xbpa-bal b i{font-style:normal;opacity:.5}
.xbpa-acts{display:flex;justify-content:space-between;gap:8px;font-family:Raleway,sans-serif;font-size:12px;color:#25315D}
.xbpa-acts span{display:flex;flex-direction:column;align-items:center;gap:8px}
.xbpa-acts i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#E6E8F0;font-style:normal;font-size:16px}
.xbpa-btns{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;background:#25315D}
.xbpa-btn{display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;background:#A0E600;font-family:Raleway,sans-serif;font-size:15px;font-weight:600;color:#25315D}
.xbpa-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff}
.xbpa-swap{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;margin-bottom:8px;border-radius:12px;background:#F3F4F8;font-family:Raleway,sans-serif;color:#25315D}
.xbpa-swap>div{display:flex;flex-direction:column;gap:4px}
.xbpa-swap>div:last-child{align-items:flex-end}
.xbpa-swap b{font-family:Lexend,sans-serif;font-size:17px;font-weight:600}
.xbpa-swap small{font-size:12px;opacity:.6}
.xbpa-kv{display:flex;justify-content:space-between;padding:6px 2px;font-family:Raleway,sans-serif;font-size:14px;color:#25315D}
.xbpa-kv b{font-weight:600}
.xbpa-tx{display:flex;align-items:center;gap:14px;padding:12px 0;font-family:Raleway,sans-serif;color:#25315D}
.xbpa-tx>i{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#E3562A;color:#fff;font-style:normal;font-size:12px;font-weight:700}
.xbpa-tx>div{display:flex;flex-direction:column;gap:4px;flex:1}
.xbpa-tx>div.r{align-items:flex-end}
.xbpa-tx b{font-family:Lexend,sans-serif;font-size:15px;font-weight:500}
.xbpa-tx b.in{color:#1F9D55}
.xbpa-tx small{font-size:13px;opacity:.6}
.xbpa-tabs{display:flex;justify-content:space-between;padding:14px 18px;border-radius:12px;background:rgba(255,255,255,.7);box-shadow:0 2px 6px rgba(37,49,93,.1);font-family:Raleway,sans-serif;font-size:12px;font-weight:600;color:#25315D}
.xbpa-tabs span{opacity:.5}
.xbpa-tabs .on{opacity:1}
@media (max-width:1199px){.bp-phones{grid-template-columns:repeat(2,1fr)}}
@media (max-width:809px){
  .bp-phones{gap:12px;margin-top:40px}
  .bp-phones figure{padding:20px 12px 16px}
  .bp-shot img{width:min(70%,240px)}
}

/* ---------- 16Bags: verification gate + old card ---------- */
.b16-gate{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:48px 0 72px}
.b16-gate figure{margin:0;padding:14px;border-radius:24px;background:var(--surface)}
.b16-gate figcaption{padding:6px 6px 14px;font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.b16-gate img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.b16-was{display:flex;align-items:center;flex-wrap:wrap;gap:20px 32px;margin-top:56px;padding:28px;border-radius:24px;background:var(--white)}
.b16-was-tag{padding:8px 12px;border:1px solid var(--line);border-radius:99px;font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.b16-was-card{display:flex;flex-direction:column;gap:6px;min-width:240px;padding:16px 20px;border:3px solid #000;background:#ECEEEE;box-shadow:6px 6px 0 #000;font-family:Poppins,sans-serif;color:#2B3232}
.b16-was-card b{color:#0087E6;font-size:16px}
.b16-was-card small{font-size:14px}
.b16-was-card em{font-style:normal;font-size:14px}
.b16-was p{flex:1;min-width:220px;font-size:14px;line-height:22px;color:var(--muted)}
@media (max-width:809px){.b16-gate{grid-template-columns:1fr;margin:40px 0 56px}.b16-gate figure{padding:10px}}
.bk-head+.cs-table-wrap{margin-top:56px}
/* 16Bags subscription screen in a browser window */
.cs-bags .cs-split-img{padding:clamp(20px,3.4vw,44px);background:linear-gradient(135deg,#DCEBF5,#F5FAFD 55%,#FFE7D1)}
.cs-bags .cs-split-img img{border-radius:0 0 12px 12px;border:1px solid #D5DCE4;border-top:0;box-shadow:0 24px 40px -18px rgba(8,15,52,.28)}
.cs-bags .cs-split-img::before{content:"";display:block;height:30px;border:1px solid #D5DCE4;border-bottom:0;border-radius:12px 12px 0 0;background:radial-gradient(circle,#FF5F57 4.5px,transparent 5px) 12px 50%/12px 12px no-repeat,radial-gradient(circle,#FEBC2E 4.5px,transparent 5px) 30px 50%/12px 12px no-repeat,radial-gradient(circle,#28C840 4.5px,transparent 5px) 48px 50%/12px 12px no-repeat,#EEF1F5;box-shadow:0 24px 40px -18px rgba(8,15,52,.28)}
.cs-bags .cs-split-img:hover img{transform:none}
/* SVG arrows inside UI mockups */
.ic{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.15em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* adjacent sections on the same background: one tighter gap with a hairline */
.bk-join{padding-top:0!important;border-top:0}
.bk-join>.container{padding-top:var(--join);border-top:1px solid var(--line)}
section:has(+ .bk-join){padding-bottom:var(--join)!important}
:root{--join:80px}
@media (max-width:809px){:root{--join:56px}}
/* Side-by-side screen pair (e.g. light / dark mode) */
.cs-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.cs-modes figure{margin:0;padding:14px;border-radius:24px;background:var(--white)}
.cs-modes figcaption{padding:6px 6px 14px;font-size:12px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cs-modes img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
@media (max-width:809px){.cs-modes{grid-template-columns:1fr}.cs-modes figure{padding:10px}}
/* BUKAH paper sketches */
.bk-sketch-group{margin-top:48px!important;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bk-sketches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.bk-sketches figure{margin:0;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.bk-sketches img{display:block;width:100%;height:auto;border-radius:8px}
.bk-sketches figcaption{padding:10px 4px 2px;font-size:13px;color:var(--muted)}
@media (max-width:809px){.bk-sketches{grid-template-columns:1fr 1fr;gap:10px}.bk-sketches figure{padding:6px}}
.bk-iter-sketch{background:#fff}
.bk-iter-sketch img{object-fit:contain;object-position:center}
/* BUKAH: two overlapped screens in an iteration "after" (like the project cards, plain background) */
.bk-iter-stack{background:var(--white)}
.bk-stack{position:absolute;inset:0}
.bk-iter-img .bk-stack img{position:absolute;width:66%;height:auto;object-fit:fill;border-radius:10px;border:1px solid var(--line);box-shadow:0 18px 40px -14px rgba(20,24,40,.3);transition:transform .7s var(--ease-out)}
.bk-iter-img .bk-stack .bk-stack-back{right:5%;top:12%}
.bk-iter-img .bk-stack .bk-stack-front{left:5%;bottom:8%}
.bk-iter-stack:hover .bk-stack-back{transform:translate(10px,-10px)}
.bk-iter-stack:hover .bk-stack-front{transform:translate(-10px,10px)}
.bk-iter-stack figcaption{z-index:2}
/* BUKAH iteration "before" screenshot shown whole (not cropped), framed like the stacked screens */
.bk-iter-shot{display:grid;place-items:center;background:var(--white)}
.bk-iter-img.bk-iter-shot img{width:88%;height:auto;object-fit:contain;border-radius:10px;border:1px solid var(--line);box-shadow:0 18px 40px -14px rgba(20,24,40,.3)}
.bk-iter-shot figcaption{z-index:2}
/* BUKAH iteration cards share the sales mockup's sage background */
.bk-iter-img.bk-iter-stack,.bk-iter-img.bk-iter-shot,.bk-iter-img.bk-iter-sketch{background:#BAD1CF}
.bk-iter-img.bk-iter-sketch{display:grid;place-items:center}
.bk-iter-img.bk-iter-sketch img{width:88%;height:auto;border-radius:8px;box-shadow:0 18px 40px -14px rgba(20,24,40,.3)}
.bk-wide-natural img{aspect-ratio:auto}
/* BUKAH control-layer carousel */
.bk-ctl{margin-top:72px}
.bk-ctl-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.bk-ctl-nav{display:flex;gap:10px}
.bk-ctl-btn{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;color:var(--white);font-size:20px;cursor:pointer;transition:background .3s,opacity .3s}
.bk-ctl-btn[data-prev] .ic{transform:rotate(180deg)}
.bk-ctl-btn:hover{background:rgba(255,255,255,.1)}
.bk-ctl-btn:disabled{opacity:.35;cursor:default;background:transparent}
.bk-ctl-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,980px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.bk-ctl-track::-webkit-scrollbar{display:none}
.bk-ctl-slide{margin:0;scroll-snap-align:start}
.bk-ctl-shot{display:grid;place-items:center;aspect-ratio:16/10;padding:5%;border-radius:var(--bk-r);background:#BAD1CF}
.bk-ctl-shot img{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px;filter:drop-shadow(0 18px 30px rgba(20,24,40,.25))}
.bk-ctl-slide figcaption{display:grid;grid-template-columns:70px minmax(0,.7fr) minmax(0,1.3fr);gap:8px 24px;align-items:baseline;padding-top:24px}
.bk-ctl-slide figcaption span{font-size:12px;color:var(--muted-dark)}
.bk-ctl-slide h3{font-size:24px;line-height:1.2}
.bk-ctl-slide figcaption p{font-size:15px;line-height:24px;font-weight:400;color:var(--muted-dark)}
.bk-ctl-dots{display:flex;gap:8px;margin-top:28px}
.bk-ctl-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.3);cursor:pointer;transition:width .3s,background .3s}
.bk-ctl-dots button.on{width:28px;background:var(--white)}
@media (max-width:809px){
  .bk-ctl{margin-top:48px}
  .bk-ctl-track{grid-auto-columns:88%;gap:12px}
  .bk-ctl-slide figcaption{grid-template-columns:1fr;gap:6px}
  .bk-ctl-btn{width:40px;height:40px}
}
.bk-ctl-light .bk-ctl-btn{border-color:var(--line);color:inherit}
.bk-ctl-light .bk-ctl-btn:hover{background:rgba(0,0,0,.05)}
.bk-ctl-light .bk-ctl-btn:disabled{background:transparent}
.bk-ctl-light .bk-ctl-dots button{background:rgba(0,0,0,.18)}
.bk-ctl-light .bk-ctl-dots button.on{background:currentColor}
.bk-ctl-light .bk-ctl-slide figcaption span,.bk-ctl-light .bk-ctl-slide figcaption p{color:var(--muted,#6b6b6b)}
.fh-car .bk-ctl-shot{aspect-ratio:2048/1396}
.fh-car .bk-ctl-shot.fh-car-full{padding:0;overflow:hidden}
.fh-car .bk-ctl-shot.fh-car-full img{object-fit:cover;border-radius:0;filter:none}
@media (pointer:fine){.bk-ctl-track{cursor:grab}}
.bk-ctl-track.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.bk-ctl-track img{-webkit-user-drag:none;user-select:none}
.cs-pair-3{grid-template-columns:repeat(3,1fr)}
.cs-pair-3 .cs-pair-card figure{aspect-ratio:1440/1216}
.cs-pair-3 .cs-pair-card figure img{object-fit:cover;object-position:top}
@media (max-width:1100px) and (min-width:769px){.cs-pair-3{grid-template-columns:1fr 1fr}}
.fh-process{margin-top:72px}
.fh-process .cs-split:first-child{margin-top:0}
.fh-process .cs-split-img{border-radius:var(--bk-r);overflow:hidden}
.fh-process .cs-split-img img{width:100%;height:auto;aspect-ratio:auto;display:block}
.bk-dark .fh-process .cs-split+.cs-split{border-top-color:rgba(255,255,255,.14)}
.bk-dark .fh-process .cs-split-body p{color:var(--muted-dark)}
@media (min-width:769px){.cs-split.rev:not(.solo){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
/* DeskIt: more components */
.xdk-more{margin-top:40px;padding-top:40px;border-top:1px solid #E8EAEE}
.xdk-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.xdk-filter{padding:20px;border:1px solid #DCE0E5;border-radius:8px;background:#fff;font-size:13px}
.xdk-filter>b{display:block;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #E8EAEE;font-size:15px;color:#041438}
.xdk-fsearch{justify-content:flex-start;gap:8px;margin-bottom:6px}
.xdk-acc>span{display:flex;justify-content:space-between;padding:12px 0;font-weight:500}
.xdk-acc>span i{font-style:normal;color:#949FAF}
.xdk-acc.open>span i .ic{transform:rotate(180deg)}
.xdk-acc label{display:flex;align-items:center;gap:10px;padding:6px 0 6px 2px;color:#172F51}
.xdk-radio{width:14px;height:14px;border:1.5px solid #A6ABC8;border-radius:50%;flex:none;position:relative}
.xdk-radio.on{border-color:#FA8212}
.xdk-radio.on::after{content:"";position:absolute;inset:2px;border-radius:50%;background:#FA8212}
.xdk-ib{display:grid;place-items:center;width:40px;height:36px;border-radius:6px;background:#E8EAEE;color:#041438}
.xdk-ib.hov{background:#DCE0E5}
.xdk-ib.on{background:#041438;color:#fff}
.xdk-ib:nth-child(n+4){color:#B22405;background:rgba(178,36,5,.12)}
.xdk-ib:nth-child(5){background:rgba(178,36,5,.22)}
.xdk-ib:nth-child(6){background:#B22405;color:#fff}
.xdk-sw{width:36px;height:20px;border-radius:99px;background:#DCE0E5;position:relative}
.xdk-sw::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.xdk-sw.on{background:#FA8212}
.xdk-sw.on::after{left:18px}
.xdk-ms{padding:16px;border-radius:8px;background:#F8FAFC;border:1px solid #E8EAEE}
.xdk-ms>b{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;color:#041438}
.xdk-ms>b em,.xdk-msd b em:not(.xdk-due){display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#DCE0E5;font-style:normal;font-size:11px}
.xdk-msr{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:4px 12px;padding:10px 12px;border:1px solid #E8EAEE;background:#fff;font-size:13px}
.xdk-msr+.xdk-msr{border-top:0}
.xdk-msr>i{display:grid;place-items:center;width:24px;height:22px;border-radius:4px;background:#A6ABC8;color:#fff;font-style:normal;font-size:10px;grid-row:span 2}
.xdk-msr>small{grid-column:2;font-size:10px;color:#949FAF}
.xdk-msr>small b,.xdk-msd small b{color:#172F51;font-weight:500}
.xdk-msr>em{grid-row:1/3;grid-column:3}
.xdk-msr>.xdk-pill{grid-row:1/3;grid-column:4}
.xdk-due{padding:2px 6px;border-radius:4px;background:rgba(255,0,0,.1);color:#D82A04;font-style:normal;font-size:11px;font-weight:400}
.xdk-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:12px}
.xdk-pill i{font-style:normal;display:inline-flex}
.xdk-pill .ic{width:12px;height:12px}
.xdk-msd{padding:16px;border-radius:8px;background:#fff;border:1px solid #DCE0E5;font-size:13px}
.xdk-msd-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #E8EAEE}
.xdk-msd-h b{display:flex;align-items:center;gap:8px;color:#041438}
.xdk-msd-h>i{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:#E8EAEE;color:#041438}
.xdk-msd p{color:#6D7D92;font-size:14px}
.xdk-msd small{display:block;margin:6px 0 12px;font-size:10px;color:#949FAF}
.xdk-resolve{padding:16px;border-radius:8px;background:#fff;border:1px solid #DCE0E5;font-size:13px}
.xdk-resolve label{display:flex;align-items:center;gap:10px}
.xdk-resolve>span{display:block;margin:14px 0 6px;font-size:12px;font-weight:500}
@media (max-width:768px){.xdk-msr{grid-template-columns:auto 1fr}.xdk-msr>em,.xdk-msr>.xdk-pill{grid-row:auto;grid-column:2;justify-self:start}}
.hero-layer.l3{filter:none}
@media (max-width:768px){.cs-pair-3{grid-template-columns:1fr}}
.bk-concept{display:flex;width:fit-content;max-width:100%;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 40px!important;padding:10px 16px 10px 10px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:999px;background:var(--accent-soft);font-size:15px;line-height:22px;color:var(--ink,#111)}
.bk-concept b{padding:4px 12px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:768px){.bk-concept{border-radius:16px;font-size:14px}}
/* Case-study summary under the hero */
.cs-tldr{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;margin-top:64px}
.cs-tldr>div{padding:28px 0;border-top:1px solid var(--line)}
.cs-tldr h3{margin:0 0 12px!important;font-size:13px!important;line-height:1.2!important;font-weight:500!important;letter-spacing:.08em!important;text-transform:uppercase;color:var(--accent)}
.cs-tldr p{margin:0;font-size:18px;line-height:30px;font-weight:400;color:var(--ink,#111);text-wrap:pretty}
@media (max-width:768px){.cs-tldr{grid-template-columns:1fr;margin-top:40px}.cs-tldr>div{padding:22px 0}.cs-tldr p{font-size:16px;line-height:26px}}
.cs-context>:only-child{grid-column:1/-1}
/* Accent text on dark backgrounds uses the light variant (WCAG AA) */
.dark .step-num,.bk-dark .step-num{color:var(--accent-light)}
.bk-level>span{color:var(--accent-light)}
.cs-step small{color:var(--accent)}
.bk-dark .cs-step small,.dark .cs-step small{color:var(--cs-hi,var(--accent-light))}
/* Single context cards (team / brief): dark, white body, height follows content */
.cs-context>.cs-context-card:only-child{min-height:0;background:var(--night);color:var(--white)}
.cs-context>.cs-context-card:only-child .cs-card-label{color:var(--accent-light)}
.cs-context>.cs-context-card:only-child p{color:var(--white)}
/* Outlined step grid (matches .bk-stats) */
.cs-steps.boxed{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cs-steps.boxed .cs-step{min-height:0;padding:24px 24px 28px;border-top:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Menu playground: pills (skills) and balls (tool logos) are positioned by the physics in main.js.
   The layer sits above the menu text but only the pieces themselves take the pointer, so links stay clickable. */
.menu-play{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.mp{position:absolute;left:0;top:0;opacity:0;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform}
.mp.on{opacity:1}
.mp:active{cursor:grabbing}
@media (hover:hover) and (pointer:fine){.mp,.mp:active{cursor:pointer}}   /* desktop: pieces are shoved by hovering, clicked to hop */
.mp-pill{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:100px;white-space:nowrap;font-family:var(--font-body);font-size:16px;font-weight:600;letter-spacing:-.01em;background:var(--white);color:var(--ink)}
.mp-pill.o{background:var(--night);color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.mp-pill.a{background:var(--accent);color:var(--white)}
.mp-ball{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mp-ball svg{height:24px;width:auto}
.mp-ball img{height:30px;width:auto}
.mp-ball.tool-claude svg,.mp-ball.tool-chatgpt svg{height:30px}
@media (max-width:809px){
  .mp-wide{display:none}
  .mp-pill{height:38px;padding:0 15px;font-size:13px}
  .mp-ball{width:42px;height:42px}
  .mp-ball svg{height:20px}
  .mp-ball img,.mp-ball.tool-claude svg,.mp-ball.tool-chatgpt svg{height:24px}
}