/* Atelier West — homepage concept
   Built from the Atelier West Design System (design-system/). Tokens are the source of truth;
   this file only composes them into real CSS classes for a standalone, Elementor-portable page. */

/* ---------- Tokens ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');
:root{
  /* neutral foundation */
  --neutral-0:#F5F5F0; --neutral-50:#ECECE7; --neutral-100:#C9C9C3;
  --neutral-400:#85857F; --neutral-600:#40403D; --neutral-900:#0A0A0A; --neutral-950:#000; --neutral-white:#fff;
  --canvas-primary:var(--neutral-0); --canvas-secondary:var(--neutral-50); --canvas-inverse:var(--neutral-900);
  --surface-card:var(--neutral-white);
  --text-primary:var(--neutral-900); --text-secondary:var(--neutral-600); --text-tertiary:var(--neutral-400);
  --text-inverse:var(--neutral-0); --text-on-accent:var(--neutral-white);
  --border-subtle:rgba(10,10,10,.18); --border-default:var(--neutral-100); --border-inverse:rgba(255,255,255,.22);
  --focus-ring:var(--neutral-900);
  /* adaptive client accents (derived per client world) */
  --ref-fashion-2:#6B4FA0; --ref-tech-1:#2F6FED; --ref-realestate-1:#A79C8E;
  --ref-realestate-2:#1A1A1A; --ref-cleaning-2:#1F8A6E; --ref-sport-1:#E8622C;
  /* type scale */
  --fs-display-xl:clamp(64px,8.4vw,128px); --fs-display-l:clamp(56px,7.8vw,112px);
  --fs-h1:clamp(48px,5.6vw,80px); --fs-h2:clamp(38px,4vw,56px); --fs-h3:clamp(28px,2.5vw,36px);
  --fs-h4:24px; --fs-lead:22px; --fs-body:17px; --fs-body-s:14px; --fs-caption:12px; --fs-label:12px; --fs-nav:15px; --fs-button:15px;
  --lh-display:.90; --lh-heading:1.0; --lh-heading-sm:1.05; --lh-card-title:1.15; --lh-lead:1.35; --lh-body:1.45; --lh-ui:1;
  --weight-regular:400; --weight-medium:500;
  --ls-display:-.04em; --ls-display-l:-.035em; --ls-heading:-.025em; --ls-heading-sm:-.02em; --ls-card-title:-.015em; --ls-label:.02em; --ls-wide:.04em; --ls-tight:-.02em;
  /* spacing */
  --space-2xs:8px; --space-xs:12px; --space-s:16px; --space-m:24px; --space-l:32px; --space-xl:48px; --space-2xl:64px; --space-3xl:96px; --space-4xl:128px; --space-5xl:160px; --space-6xl:200px;
  /* layout */
  --container-max:1920px; --container-gutter:48px; --grid-gap:24px;
  --section-gap:128px; --section-gap-large:160px;
  /* radius */
  --radius-none:0px; --radius-sm:8px; --radius-lg:24px; --radius-xl:32px; --radius-full:9999px; --radius-circle:50%;
  /* motion */
  --duration-fast:180ms; --duration-base:300ms; --duration-slow:500ms; --duration-reveal:800ms;
  --ease-standard:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.22,1,.36,1);
  --font-grotesk:'Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
}
@media (max-width:1023px){:root{--container-gutter:32px;--grid-gap:20px;--section-gap:96px;--section-gap-large:112px}}
@media (max-width:767px){:root{--container-gutter:20px;--grid-gap:14px;--section-gap:72px;--section-gap-large:80px}}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;background:var(--canvas-primary);color:var(--text-primary);font-family:var(--font-grotesk);font-size:var(--fs-body);line-height:var(--lh-body)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--neutral-900);color:var(--neutral-0)}
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-gutter)}
.section{padding-block:var(--section-gap)}
.hairline{border:0;border-top:1px solid var(--border-subtle);margin:0}

/* ---------- Type utilities ---------- */
.display{font-size:var(--fs-display-l);font-weight:400;line-height:var(--lh-display);letter-spacing:var(--ls-display-l);margin:0}
.h1{font-size:var(--fs-h1);font-weight:400;line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0}
.h2{font-size:var(--fs-h2);font-weight:400;line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0}
.h3{font-size:var(--fs-h3);font-weight:400;line-height:var(--lh-heading-sm);letter-spacing:var(--ls-heading-sm);margin:0}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-secondary);margin:0}
.body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-secondary);margin:0}
.eyebrow{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary);margin:0}
.measure{max-width:58ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-grotesk);font-weight:500;font-size:var(--fs-button);
  padding:15px 24px;border-radius:var(--radius-full);border:1.5px solid transparent;cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.btn--filled{background:var(--neutral-900);color:var(--text-on-accent)}
.btn--filled:hover{background:var(--neutral-600)}
.btn--outline{background:transparent;color:var(--text-primary);border-color:var(--neutral-900)}
.btn--outline:hover{background:var(--neutral-900);color:var(--text-on-accent)}
.btn--light{background:var(--neutral-white);color:var(--neutral-900)}
.btn--light:hover{background:var(--neutral-0)}
.btn--ghost{padding:0;border:0;background:none;color:var(--text-primary)}
.arrowlink{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:var(--fs-nav);color:var(--text-primary);transition:color var(--duration-fast) var(--ease-standard)}
.arrowlink:hover{color:var(--text-secondary)}
.arrowlink .ar,.btn .ar{display:inline-block;transition:transform var(--duration-fast) var(--ease-out)}
.arrowlink:hover .ar,.btn:hover .ar{transform:translateX(4px)}

/* ---------- Nav (two separate floating blurred pills, no outline) ---------- */
.nav{position:sticky;top:0;z-index:100;padding-top:16px;pointer-events:none}
.nav .container{pointer-events:none}
.nav__row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;--nav-h:52px}
/* all three nav elements share ONE height so they align perfectly with the button */
.nav__logo,.nav__menu,.nav__cta{height:var(--nav-h);display:inline-flex;align-items:center}
/* shared pill treatment: blur + soft translucent fill, NO border, NO shadow */
.nav__logo,.nav__menu{pointer-events:auto;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
  border-radius:var(--radius-full)}
/* logo pill — left; 32px logo, tighter 12px left padding */
.nav__logo{padding-left:12px;padding-right:24px}
.nav__logo img{height:32px;width:auto;display:block}
/* menu pill — centered */
.nav__menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:28px;padding-inline:28px}
.nav__menu a{font-size:var(--fs-nav);font-weight:500;color:var(--text-primary);line-height:1}
/* CTA — right, standalone (reference height for the pills) */
.nav__cta{pointer-events:auto;padding-block:0}
.nav__links a{font-size:var(--fs-nav);font-weight:500;color:var(--text-primary);position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:currentColor;transition:width var(--duration-base) var(--ease-standard)}
.nav__links a:hover::after{width:100%}
@media (max-width:860px){.nav__menu{display:none}}

/* ---------- Hero ---------- */
.hero{padding-top:96px;padding-bottom:var(--section-gap)}
.hero__grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-xl);align-items:stretch}
.hero__copy{display:flex;flex-direction:column;justify-content:center}
.hero .display{max-width:12ch}
.hero__lead{max-width:38ch;margin-top:var(--space-m)}
.hero__cta{display:flex;gap:16px;align-items:center;margin-top:var(--space-xl);flex-wrap:wrap}
.hero__media{aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;position:relative;background:linear-gradient(150deg,#1b1b19,#2f2f2c 60%,#454541)}
@media (max-width:860px){.hero__grid{grid-template-columns:1fr;gap:var(--space-l)}.hero__media{aspect-ratio:4/3}.hero__copy{max-width:none}}

/* image placeholder — editorial, intentional (real client photography drops in here) */
.ph{position:relative;width:100%;height:100%;overflow:hidden;background:var(--neutral-100)}
.ph--dark{background:var(--neutral-900)}
.ph img,.ph video{width:100%;height:100%;object-fit:cover}
/* hero: video plays once over the still, then fades to reveal the studio image (held static) */
.hero__still,.hero__vid{position:absolute;inset:0}
.hero__vid{transition:opacity 700ms var(--ease-out)}
.hero__vid.done{opacity:0}
.ph__label{position:absolute;left:16px;bottom:14px;font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.ph__label--ink{color:var(--text-tertiary)}
.ph__accent{position:absolute;left:0;top:0;bottom:0;width:4px}

/* ---------- Statement ---------- */
.statement{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-xl);align-items:end}
.statement .h1{max-width:14ch}
@media (max-width:860px){.statement{grid-template-columns:1fr;gap:var(--space-m)}}

/* ---------- Services (4 products) ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.svc{border-top:1px solid var(--border-subtle);padding-top:var(--space-m);display:flex;flex-direction:column;min-height:340px}
.svc__no{font-size:var(--fs-caption);color:var(--text-tertiary);letter-spacing:var(--ls-wide)}
.svc__title{font-size:28px;font-weight:400;letter-spacing:var(--ls-heading-sm);margin:14px 0 10px}
.svc__desc{font-size:var(--fs-body-s);color:var(--text-secondary);line-height:1.5;margin:0}
.svc__meta{margin-top:auto;padding-top:var(--space-m);font-size:var(--fs-body-s);color:var(--text-primary)}
.svc__price{color:var(--text-tertiary)}
@media (max-width:1023px){.services{grid-template-columns:repeat(2,1fr)}.svc{min-height:0}}
@media (max-width:560px){.services{grid-template-columns:1fr}}

/* ---------- Work ---------- */
.work__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-xl);gap:24px;flex-wrap:wrap}
.work__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--grid-gap);row-gap:var(--space-xl)}
.case{display:block}
.work__grid .case{grid-column:span 2}
.work__grid .case--wide{grid-column:span 3}
.case__media{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--neutral-100)}
.case--wide .case__media{aspect-ratio:3/2}
.case__media .ph__accent{width:5px}
.case__meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;font-size:14px;color:var(--text-secondary)}
.case__title{font-size:24px;font-weight:400;line-height:1.15;letter-spacing:var(--ls-card-title);margin-top:8px}
.case .ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}
.case:hover .ph img{transform:scale(1.04)}
@media (max-width:860px){.work__grid{grid-template-columns:repeat(2,1fr)}.case,.case--wide{grid-column:span 1}}
@media (max-width:560px){.work__grid{grid-template-columns:1fr}.case,.case--wide{grid-column:span 1}}

/* ---------- Review (dark signature block) ---------- */
.review{background:var(--neutral-950);color:var(--text-inverse);border-radius:var(--radius-xl);overflow:hidden}
.review__inner{padding:clamp(40px,6vw,96px)}
.review__grid{display:grid;grid-template-columns:6fr 6fr;gap:var(--space-xl);align-items:start}
.review .h2{color:var(--neutral-white);max-width:16ch}
.review__lead{color:rgba(245,245,240,.72);font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:44ch;margin:0}
.review__list{list-style:none;margin:var(--space-l) 0 0;padding:0}
.review__list li{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--border-inverse);font-size:var(--fs-body)}
.review__list li:last-child{border-bottom:1px solid var(--border-inverse)}
.review__list .k{color:var(--neutral-400);min-width:24px;font-size:14px}
.review__list .v{color:var(--neutral-white)}
.review__list .d{color:rgba(245,245,240,.6);font-size:14px;margin-top:4px}
.review__cta{margin-top:var(--space-l)}
@media (max-width:860px){.review__grid{grid-template-columns:1fr;gap:var(--space-l)}}

/* ---------- Industries ---------- */
.tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-m)}
.tag{display:inline-flex;align-items:center;padding:8px 16px;border:1px solid var(--border-default);color:var(--text-secondary);
  font-size:var(--fs-label);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;border-radius:var(--radius-full)}

/* ---------- Principle / quote ---------- */
.principle{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-xl);align-items:start}
.principle blockquote{margin:0;border-top:1px solid var(--border-subtle);padding-top:var(--space-m)}
.principle .q{font-size:clamp(30px,3.4vw,52px);font-weight:400;letter-spacing:var(--ls-heading);line-height:1.08;margin:0;max-width:16ch}
.principle .cite{margin-top:20px;font-size:14px;color:var(--text-secondary)}
.principle .note{font-size:var(--fs-body);color:var(--text-secondary);align-self:end;max-width:34ch}
@media (max-width:860px){.principle{grid-template-columns:1fr;gap:var(--space-m)}}

/* ---------- Contact ---------- */
.contact{background:var(--canvas-secondary)}
.contact__grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-xl);align-items:start}
.contact .h1{max-width:11ch}
.contact__sub{margin-top:var(--space-s);max-width:32ch}
.form{display:flex;flex-direction:column;gap:var(--space-m)}
.field label{display:block;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
.field input,.field textarea{width:100%;border:0;border-bottom:1px solid var(--border-default);background:transparent;padding:10px 0;
  font-family:var(--font-grotesk);font-size:16px;color:var(--text-primary);outline:none}
.field textarea{resize:vertical;min-height:72px}
.field input:focus,.field textarea:focus{border-bottom-color:var(--focus-ring)}
@media (max-width:860px){.contact__grid{grid-template-columns:1fr;gap:var(--space-l)}}

/* ---------- Footer ---------- */
.footer{background:var(--neutral-950);color:var(--text-inverse)}
.footer__top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;padding-block:var(--space-2xl) var(--space-xl);border-bottom:1px solid var(--border-inverse)}
.footer__logo{height:44px;width:auto;display:block}
@media (max-width:767px){.footer__logo{height:36px}}
.footer__cols{display:flex;gap:64px;flex-wrap:wrap}
.footer__col h4{font-size:13px;font-weight:500;color:var(--neutral-400);text-transform:uppercase;letter-spacing:var(--ls-label);margin:0 0 14px}
.footer__col a{display:block;font-size:15px;color:var(--text-inverse);padding:5px 0;opacity:.85}
.footer__col a:hover{opacity:1}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:22px;font-size:12px;color:var(--neutral-400)}

/* ================= Sub-pages: Werk index + Case detail ================= */
/* sub-page hero (below the floating nav) */
.subhero{padding-top:calc(96px + 40px);padding-bottom:var(--section-gap)}
.subhero__eyebrow{margin-bottom:20px}
.subhero .display{max-width:16ch}
.subhero__lead{max-width:52ch;margin-top:var(--space-m)}

/* Werk index grid: uniform editorial portfolio grid */
.werk__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);row-gap:var(--space-2xl)}
.werk__grid .case__media{aspect-ratio:4/5}
.werk__grid .case .case__title{font-size:24px}
@media (max-width:860px){.werk__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.werk__grid{grid-template-columns:1fr}}

/* horizontal scroll gallery (case page) */
.hscroll-wrap{margin-inline:calc(-1 * var(--container-gutter))}
.hscroll{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 var(--container-gutter) 18px;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{height:6px}
.hscroll::-webkit-scrollbar-track{background:transparent}
.hscroll::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:99px}
.hcard{flex:0 0 auto;height:clamp(340px,54vh,540px);border-radius:var(--radius-lg);overflow:hidden;
  position:relative;scroll-snap-align:start;background:var(--neutral-100)}
.hcard img{width:100%;height:100%;object-fit:cover;display:block}
.hcard--por{aspect-ratio:4/5}
.hcard--land{aspect-ratio:3/2}
.hcard--wide{aspect-ratio:16/9}
.hcard--sq{aspect-ratio:1/1}
.hcard--brand{aspect-ratio:4/5;background:#1057E4;display:flex;align-items:center;justify-content:center;padding:40px}
.hcard--brand img{width:auto;height:auto;max-width:72%;max-height:40%;object-fit:contain}
.hcard__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px;color:#fff;background:linear-gradient(to top,rgba(10,10,10,.62),rgba(10,10,10,0) 58%)}
.hcard__eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;margin:0 0 8px;opacity:.92}
.hcard__cap{font-size:22px;font-weight:400;letter-spacing:-.01em;line-height:1.15;margin:0;max-width:22ch}
.hint{font-size:var(--fs-body-s);color:var(--text-tertiary);margin-top:14px}

/* image-in-image: device mockups floating on an atmosphere image */
.device-scene{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--neutral-900);
  padding:clamp(28px,5vw,72px);min-height:360px;display:grid;place-items:center}
.device-scene__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.device-scene > *{position:relative;z-index:1}
.device-scene > .mock-browser{width:100%;justify-self:stretch}

.mock-browser{width:100%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 40px 90px rgba(10,10,10,.42)}
.mock-browser__bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#ECECE7}
.mock-browser__dots{display:flex;gap:6px}
.mock-browser__dots i{width:11px;height:11px;border-radius:50%;background:#C9C9C3;display:block}
.mock-browser__url{flex:1;max-width:56%;height:22px;background:#fff;border-radius:99px}
.mock-browser img{display:block;width:100%;height:auto}

.mock-phones{display:flex;gap:clamp(14px,2vw,28px);align-items:flex-end}
.mock-phone{width:clamp(150px,17vw,230px);border-radius:32px;background:#0A0A0A;padding:9px;box-shadow:0 34px 80px rgba(10,10,10,.5)}
.mock-phone:nth-child(2){margin-bottom:clamp(28px,5vw,64px)}
.mock-phone__screen{border-radius:24px;overflow:hidden;background:#fff;aspect-ratio:390/844}
.mock-phone__screen img{display:block;width:100%;height:auto}

/* "wat we deden" deliverables overview */
.deliver{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.deliver__col h4{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--project-accent);margin:0 0 16px;font-weight:500}
.deliver__col ul{list-style:none;margin:0;padding:0}
.deliver__col li{font-size:var(--fs-body-s);color:var(--text-secondary);padding:10px 0;border-top:1px solid var(--border-subtle)}
@media (max-width:860px){.deliver{grid-template-columns:repeat(2,1fr);gap:var(--space-l)}}
@media (max-width:480px){.deliver{grid-template-columns:1fr}}

/* case detail */
.case-hero{padding-top:calc(96px + 24px)}
.case-hero__head{display:grid;grid-template-columns:8fr 4fr;gap:var(--space-xl);align-items:end;margin-bottom:var(--space-xl)}
.case-hero .display{max-width:14ch}
.case-hero__intro{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-secondary);align-self:end}
.case-hero__media{aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--neutral-100)}
.case-hero__media img{width:100%;height:100%;object-fit:cover}

/* metadata bar */
.meta-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:var(--space-m) 0;margin-top:var(--space-xl)}
.meta-bar dt{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-tertiary);margin:0 0 8px}
.meta-bar dd{margin:0;font-size:var(--fs-body);color:var(--text-primary)}
.meta-bar a{color:var(--project-accent);text-decoration:none}
.meta-bar a:hover{color:var(--text-primary)}
@media (max-width:700px){.meta-bar{grid-template-columns:repeat(2,1fr);row-gap:var(--space-m)}}

/* alternating text + image blocks */
.case-block{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-2xl);align-items:center}
.case-block--flip{grid-template-columns:7fr 5fr}
.case-block--flip .case-block__text{order:2}
.case-block__kicker{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--project-accent);margin:0 0 16px}
.case-block__text h2{font-size:var(--fs-h3);font-weight:400;letter-spacing:var(--ls-heading-sm);line-height:var(--lh-heading-sm);margin:0 0 16px;max-width:18ch}
.case-block__text p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-secondary);margin:0 0 14px;max-width:46ch}
.figure{border-radius:var(--radius-lg);overflow:hidden;background:var(--neutral-100)}
.figure img{width:100%;height:auto;display:block}
@media (max-width:860px){.case-block,.case-block--flip{grid-template-columns:1fr;gap:var(--space-l)}.case-block--flip .case-block__text{order:0}}

/* project block: sticky meta sidebar + narrative column (ref: Flatline intro) */
.proj{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,6vw,96px);align-items:start}
.proj__aside{position:sticky;top:118px;align-self:start}
.proj__eyebrow{margin-bottom:24px}
.proj__meta{margin:0}
.proj__meta > div{padding:16px 0;border-top:1px solid var(--border-subtle)}
.proj__meta > div:last-child{border-bottom:1px solid var(--border-subtle)}
.proj__meta dt{font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-tertiary);margin:0 0 6px}
.proj__meta dd{margin:0;font-size:var(--fs-body);color:var(--text-primary)}
.proj__meta a{color:var(--project-accent)}
.proj__meta a:hover{color:var(--text-primary)}
.proj__statement{font-size:var(--fs-h3);font-weight:400;line-height:var(--lh-heading-sm);letter-spacing:var(--ls-heading-sm);margin:0 0 var(--space-2xl);max-width:26ch}
.proj__section{margin-top:var(--space-2xl)}
.proj__section:first-of-type{margin-top:0}
.proj__section h2{font-size:var(--fs-h3);font-weight:400;line-height:var(--lh-heading-sm);letter-spacing:var(--ls-heading-sm);margin:0 0 var(--space-l);max-width:20ch}
.proj__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}
.proj__cols p{margin:0 0 14px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-secondary)}
.proj__cols p:last-child{margin-bottom:0}
@media (max-width:860px){.proj{grid-template-columns:1fr;gap:var(--space-l)}.proj__aside{position:static}}
@media (max-width:600px){.proj__cols{grid-template-columns:1fr;gap:0}}

/* bento image grid (ref: Kyzenn brand board) */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  grid-template-rows:clamp(150px,17vw,200px) clamp(240px,26vw,320px) clamp(260px,28vw,350px);
  grid-template-areas:
    "phone pal  pal  grad"
    "phone logo logo grad"
    "cards cards mon  mon";}
.bento > *{border-radius:var(--radius-lg);overflow:hidden;position:relative;background:var(--neutral-100)}
.bento img{width:100%;height:100%;object-fit:cover;display:block}
.b-phone{grid-area:phone}
.b-pal{grid-area:pal;display:flex}
.b-pal span{flex:1}
.b-logo{grid-area:logo;background:var(--neutral-900);display:grid;place-items:center;padding:24px}
.b-logo img{width:auto;height:auto;max-width:60%;max-height:44%;object-fit:contain}
.b-grad{grid-area:grad}
.b-cards{grid-area:cards}
.b-mon{grid-area:mon}
@media (max-width:767px){
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:160px;grid-template-areas:none}
  .bento > *{grid-area:auto!important}
  .b-phone,.b-grad{grid-row:span 2}
}

/* full-bleed figure with caption */
.fullfig{margin-top:0}
.fullfig .figure{border-radius:var(--radius-lg)}
.fullfig figcaption{margin-top:14px;font-size:var(--fs-body-s);color:var(--text-tertiary)}

/* two-up figure row */
.fig-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
@media (max-width:700px){.fig-duo{grid-template-columns:1fr}}

/* next / closing band */
.next{border-top:1px solid var(--border-subtle);padding-block:var(--section-gap)}
.next__row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:24px}
.next .h2{max-width:16ch}

/* ---------- Reveal motion ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
html.showall .reveal{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}