/* ==========================================================================
   Travis Klein — Portfolio
   Design tokens
   Color:  --ink #0B0C0E (near-black ground) · --paper #F5F3EE (warm off-white)
           --accent #D8FF3E (acid chartreuse — Klein's signature "K" pop)
           --muted #8C8B86 (warm grey text on dark) · --line rgba(245,243,238,.14)
   Type:   Display — "Fraunces" (variable, wght 300-900) italics for emphasis
           Body/UI — "Inter"
           Mono/Eyebrow — "IBM Plex Mono" for numbers + labels
   Layout: Full-bleed single column, huge type, numbered project index,
           generous negative space, dark ground throughout (no theme toggle —
           this is a deliberate all-dark identity, like the reference site).
   ========================================================================== */

/* Font loading lives in each page's <head> as a <link rel="stylesheet">
   (after the preconnect hints), not as a CSS @import — @import blocks
   font discovery until this file is fetched AND parsed, so it starts the
   font request noticeably later. A <link> is discovered by the browser's
   preload scanner immediately, in parallel with everything else. */

:root{
  --ink:#0B0C0E;
  --ink-2:#141519;
  --paper:#F5F3EE;
  /* Accent system — an Adobe Color "analogous + pop" harmony built off the
     lime brand color (72°). Each hue is a ~40-70° step around the wheel,
     held at similar saturation/lightness so they read as one family
     rather than a random rainbow. Lime stays the primary/brand color;
     the other four are used to differentiate stats, numbers, and data. */
  --accent:#D8FF3E;    /* lime — primary brand accent, 72° */
  --accent-2:#7CF29C;  /* spring green, 132° */
  --accent-3:#5FD9D9;  /* teal/cyan, 178° */
  --accent-4:#8FB8FF;  /* periwinkle, 220° */
  --accent-5:#E39BFF;  /* orchid, 285° */
  --muted:#8C8B86;
  --line:rgba(245,243,238,.14);
  --line-strong:rgba(245,243,238,.28);
  --maxw:1320px;
  --gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;margin:0;text-wrap:balance;}
/* Emphasis words inside headlines stay serif italic + accent color — the
   one deliberate contrast against the bold sans headline face. */
h1 em,h1 i,h1 .accent,h2 em,h2 i,h2 .accent,h3 em,h3 i,h3 .accent{
  font-family:'Fraunces',Georgia,serif;font-weight:500;font-style:italic;
  color:var(--accent);letter-spacing:0;
}
em,i{font-style:italic;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.mono{font-family:'IBM Plex Mono',monospace;}

/* ---------- Nav — logo mark + hamburger only; links live in the
   full-screen .menu overlay below. ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  background:linear-gradient(var(--ink) 55%, transparent);
}
.nav__logo{display:inline-flex;align-items:center;transition:opacity .2s;}
.nav__logo:hover{opacity:.82;}
.nav__logo img{height:40px;width:auto;display:block;}

/* Hamburger — two bars that rotate into an X when the menu opens. */
.nav__toggle{
  position:relative;z-index:101;
  width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:none;border:0;cursor:pointer;
}
.nav__toggle-bar{
  width:24px;height:2px;background:var(--paper);border-radius:2px;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s ease;
}
.nav__toggle.is-open .nav__toggle-bar:first-child{transform:translateY(4px) rotate(45deg);}
.nav__toggle.is-open .nav__toggle-bar:last-child{transform:translateY(-4px) rotate(-45deg);}

/* ---------- Full-screen menu overlay — logo-mark style nav with a
   portrait photo, in the spirit of ownitt.fr. Hidden by default with
   opacity/visibility (belt-and-suspenders for browsers without
   clip-path support); the clip-path circle reveal is the "cool, unique"
   open transition, expanding from the hamburger button's corner. ---------- */
.menu{
  position:fixed;inset:0;z-index:95;
  display:grid;grid-template-columns:1.1fr .9fr;
  background:var(--ink-2);
  opacity:0;visibility:hidden;pointer-events:none;
  clip-path:circle(2% at calc(100% - 48px) 44px);
  transition:clip-path .7s cubic-bezier(.65,0,.35,1),opacity .1s linear .6s,visibility 0s linear .7s;
}
.menu.is-open{
  opacity:1;visibility:visible;pointer-events:auto;
  clip-path:circle(150% at calc(100% - 48px) 44px);
  transition:clip-path .7s cubic-bezier(.65,0,.35,1),opacity 0s linear;
}
.menu__media{position:relative;overflow:hidden;}
.menu__media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.menu__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,21,25,.55) 0%,transparent 35%);
}
.menu__panel{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 clamp(32px,6vw,80px);list-style:none;
}
.menu__link{
  display:flex;align-items:baseline;gap:18px;
  font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(32px,4.6vw,56px);color:var(--paper);
  padding:10px 0;
  overflow:hidden;
}
.menu__link .menu__num{font-size:14px;color:var(--accent);font-weight:400;}
.menu__link span:not(.menu__num){
  display:inline-block;transform:translateY(100%);opacity:0;
  transition:transform .55s cubic-bezier(.16,.84,.24,1),opacity .4s ease;
}
.menu.is-open .menu__link span:not(.menu__num){transform:translateY(0);opacity:1;}
.menu__link:hover{color:var(--accent);}
.menu__cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:28px;width:fit-content;
  background:var(--accent);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:13px;
  padding:13px 26px;border-radius:100px;
  transition:transform .25s ease,opacity .5s ease;
  opacity:0;transform:translateY(12px);
}
.menu.is-open .menu__cta{opacity:1;transform:translateY(0);transition-delay:.3s;}
.menu__cta:hover{transform:translateY(-2px);}
.menu__meta{
  display:flex;gap:24px;margin-top:48px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);
  opacity:0;transition:opacity .5s ease .4s;
}
.menu.is-open .menu__meta{opacity:1;}
.menu__meta a:hover{color:var(--accent);}
/* Stagger each link's reveal */
.menu__panel .menu__link:nth-child(1) span:not(.menu__num){transition-delay:.12s;}
.menu__panel .menu__link:nth-child(2) span:not(.menu__num){transition-delay:.19s;}
.menu__panel .menu__link:nth-child(3) span:not(.menu__num){transition-delay:.26s;}
.menu__panel .menu__link:nth-child(4) span:not(.menu__num){transition-delay:.33s;}

html.menu-open{overflow:hidden;}

@media(max-width:760px){
  .menu{grid-template-columns:1fr;}
  .menu__media{position:absolute;inset:0;z-index:0;}
  .menu__media::after{background:linear-gradient(180deg,rgba(11,12,14,.35) 0%,rgba(11,12,14,.96) 78%);}
  .menu__panel{position:relative;z-index:1;padding:0 28px;justify-content:flex-end;padding-bottom:64px;}
  .menu__link{font-size:clamp(30px,10vw,44px);}
}
@media(prefers-reduced-motion:reduce){
  .menu,.menu.is-open{transition:opacity .25s ease;clip-path:none;}
  .menu__link span:not(.menu__num){transition:opacity .25s ease;transform:none;}
}

/* ---------- Hero — full-bleed B&W portrait, massive scroll-driven type ----------
   The nav sits on top (position:sticky, transparent-to-ink gradient), the
   photo fills the viewport behind everything, and the headline/sub sit in
   a bottom-anchored content block so the portrait reads large and
   uncropped at the top. js/hero-motion.js drives the two dynamic layers:
   a per-line "curtain" reveal on load, and a scroll-linked parallax/zoom/
   tint on .hero__media + .hero__content via the --p custom property. */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:0;background:var(--ink);}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 14%;
  transform:scale(1.08);
  filter:contrast(1.03);
}
.hero__media-grain{
  position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
.hero__media-tint{position:absolute;inset:0;background:var(--accent);mix-blend-mode:color;opacity:0;}
.hero__media-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,12,14,.1) 0%,rgba(11,12,14,.28) 40%,rgba(11,12,14,.97) 94%),
    linear-gradient(90deg,rgba(11,12,14,.88) 0%,rgba(11,12,14,.3) 50%,rgba(11,12,14,.05) 78%);
}
.hero__mark{
  position:absolute;top:12vh;right:-3%;width:min(40vw,480px);
  opacity:.1;transform:rotate(-4deg);z-index:1;pointer-events:none;
}
.hero__content{position:relative;z-index:2;padding:0 var(--gutter) clamp(64px,10vh,120px);width:100%;}
.hero__kicker{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.hero__kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.hero__headline{
  font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(48px,10.2vw,148px);
  line-height:.92;max-width:1160px;cursor:default;
}
.hero__headline .line{display:block;overflow:hidden;}
.hero__headline .line > span{
  display:block;transform:translateY(110%);
  transition:transform .9s cubic-bezier(.16,.84,.24,1);
}
.hero__headline .line > span.is-in{transform:translateY(0);}
.hero__headline .accent{color:var(--accent);font-style:italic;font-family:'Fraunces',Georgia,serif;font-weight:500;}
.hero__sub{
  margin-top:30px;max-width:540px;
  font-size:clamp(16px,1.9vw,19px);color:#D8D6CF;
}
.hero__scroll{
  position:absolute;left:var(--gutter);bottom:26px;z-index:2;
  display:flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  transition:opacity .4s ease;
}
.hero__scroll span{width:1px;height:28px;background:var(--line-strong);position:relative;overflow:hidden;}
.hero__scroll span::after{
  content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--accent);
  animation:scrollline 1.8s ease-in-out infinite;
}
@keyframes scrollline{0%{top:-100%;}50%{top:0;}100%{top:100%;}}

@media(max-width:760px){
  .hero__media img{object-position:62% 12%;}
  .hero__mark{display:none;}
  .hero__headline{font-size:clamp(40px,13.5vw,64px);}
  .hero__scroll{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .hero__headline .line > span{transition-duration:.3s;}
}

/* ---------- Stats bar — the hero's proof points, as their own thin
   band right below the photo (kept out of the hero so the portrait and
   headline stay uncluttered). ---------- */
.stats-bar{
  display:flex;gap:48px;flex-wrap:wrap;
  padding:52px 0 46px;
}
.stats-bar div{max-width:220px;}
.stats-bar .num{font-family:'Fraunces',serif;font-size:28px;color:var(--accent);}
.stats-bar p{margin:6px 0 0;font-size:13px;color:var(--muted);}
/* Each stat gets its own hue from the accent family — same weight/size,
   different color, so the row reads as a deliberate palette, not a
   single repeated lime. */
.stats-bar div:nth-child(1) .num{color:var(--accent);}
.stats-bar div:nth-child(2) .num{color:var(--accent-3);}
.stats-bar div:nth-child(3) .num{color:var(--accent-5);}
.stats-bar div:nth-child(4) .num{color:var(--accent-2);}

/* ---------- Section headers ---------- */
/* One consistent "display" scale for every major section header on the
   page — Featured Work / About / Let's talk — so they all read at the
   same bold, huge weight as the hero, per the Nex Studio reference. */
.section{padding:100px 0;border-top:1px solid var(--line);}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:64px;flex-wrap:wrap;}
.section__head h2,.display-h2{font-size:clamp(44px,8vw,108px);letter-spacing:-.02em;line-height:.96;}
.section__head .eyebrow{margin-bottom:14px;display:block;}

/* ---------- About ---------- */
.about__head{margin-bottom:56px;}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.about__body p{font-size:clamp(18px,2.4vw,26px);font-family:'Fraunces',serif;font-weight:300;line-height:1.35;color:#E7E5DE;}
.about__facts{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;align-content:start;}
.about__facts .fact{border-top:1px solid var(--line);padding-top:14px;}
.about__facts .fact h4{font-size:14px;color:var(--accent);margin:0 0 6px;font-family:'IBM Plex Mono',monospace;letter-spacing:.03em;}
.about__facts .fact p{margin:0;font-size:14px;color:var(--muted);}
@media(max-width:820px){.about__grid{grid-template-columns:1fr;gap:40px;}}

/* ---------- Featured Work — brick/masonry grid ---------- */
.work-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:160px;
  grid-auto-flow:dense;
  gap:20px;
}
/* Entrance is scroll-scrubbed by JS (js/main.js sets opacity/transform/
   filter on every scroll tick as each tile approaches from "far away"),
   so there's deliberately no CSS transition on those three properties —
   it needs to track the scrollbar 1:1, the same way the hero photo does.
   Hover effects (border, shadow, shine) stay CSS-driven and transitioned
   normally since JS never touches them. */
.work-tile{
  position:relative;grid-column:span 2;grid-row:span 2;
  border-radius:16px;overflow:hidden;background:var(--ink-2);
  border:1px solid var(--line);
  transition:box-shadow .4s ease,border-color .3s ease;
  will-change:transform,opacity,filter;
}
.work-tile:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 36px 70px -24px rgba(0,0,0,.6),0 0 46px -6px rgba(216,255,62,.4);
}
/* Diagonal shine sweep on hover — a pseudo-element so no extra markup
   is needed per tile. Sits above the media/overlay, below nothing (tiles
   have no content after it), and ignores pointer events. */
.work-tile::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(245,243,238,.16) 48%,transparent 64%);
  transform:translateX(-130%);
  transition:transform .75s ease;
}
.work-tile:hover::after{transform:translateX(130%);}
.work-tile--lg{grid-column:span 2;grid-row:span 3;}
.work-tile--wide{grid-column:span 2;grid-row:span 2;}
.work-tile--sm{grid-column:span 1;grid-row:span 2;}
.work-tile__media{position:absolute;inset:0;}
.work-tile__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .5s ease;
}
.work-tile:hover .work-tile__media img{transform:scale(1.1);filter:brightness(.55);}
.work-tile__media .placeholder{width:100%;height:100%;}
.work-tile:hover .work-tile__media .placeholder{filter:brightness(.7);}
.work-tile__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(11,12,14,.92) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px;
}
.work-tile__num{
  position:absolute;top:18px;left:20px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--paper);
  opacity:.7;
}
.work-tile__tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease;
}
.work-tile__title{
  font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.01em;
  font-size:clamp(19px,2vw,28px);line-height:1.08;
  transition:transform .35s ease;
}
.work-tile__arrow{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--paper);
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease .05s,transform .35s ease .05s;
}
.work-tile:hover .work-tile__tag,
.work-tile:hover .work-tile__arrow{opacity:1;transform:translateY(0);}
.work-tile:hover .work-tile__title{transform:translateY(-4px);}

@media(max-width:900px){
  .work-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;}
  .work-tile,.work-tile--lg,.work-tile--wide,.work-tile--sm{grid-column:span 2;grid-row:span 2;}
}
@media(max-width:560px){
  .work-grid{grid-template-columns:1fr;}
  .work-tile,.work-tile--lg,.work-tile--wide,.work-tile--sm{grid-column:span 1;grid-row:span 2;}
  .work-tile__tag,.work-tile__arrow{opacity:1;transform:none;}
}

/* ---------- Placeholder art (stand-in for real screenshots) ---------- */
.placeholder-art{
  background:linear-gradient(135deg,var(--p1,#1C1E24),var(--p2,#0B0C0E));
  color:rgba(245,243,238,.55);
}

/* Staggered reveal — each tile/fact fades in slightly after the last,
   instead of the whole block appearing at once. */
.work-grid .work-tile:nth-child(1){transition-delay:0ms;}
.work-grid .work-tile:nth-child(2){transition-delay:60ms;}
.work-grid .work-tile:nth-child(3){transition-delay:120ms;}
.work-grid .work-tile:nth-child(4){transition-delay:180ms;}
.work-grid .work-tile:nth-child(5){transition-delay:240ms;}
.work-grid .work-tile:nth-child(6){transition-delay:300ms;}
.work-grid .work-tile:nth-child(7){transition-delay:360ms;}
.work-grid .work-tile:nth-child(8){transition-delay:420ms;}
.about__facts .fact:nth-child(1){transition-delay:0ms;}
.about__facts .fact:nth-child(2){transition-delay:50ms;}
.about__facts .fact:nth-child(3){transition-delay:100ms;}
.about__facts .fact:nth-child(4){transition-delay:150ms;}
.about__facts .fact:nth-child(5){transition-delay:200ms;}
.about__facts .fact:nth-child(6){transition-delay:250ms;}
.testi-grid .testi:nth-child(1){transition-delay:0ms;}
.testi-grid .testi:nth-child(2){transition-delay:90ms;}
.testi-grid .testi:nth-child(3){transition-delay:180ms;}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.testi{
  margin:0;border:1px solid var(--line);border-radius:16px;
  padding:30px 26px;background:var(--ink-2);
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:260px;
}
.testi blockquote{
  margin:0 0 28px;font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:clamp(17px,1.9vw,20px);line-height:1.5;color:#E7E5DE;
}
.testi figcaption{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted);}
.testi__avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--accent-3),var(--accent-5));
  opacity:.55;
}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr;}}

/* ---------- Logos / credibility strip ---------- */
.strip{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;padding:46px 0;border-top:1px solid var(--line);opacity:.85;}
.strip span{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;color:var(--muted);}

/* ---------- Contact ---------- */
.contact{padding:110px 0 90px;text-align:left;}
.contact h2{font-size:clamp(44px,8vw,108px);line-height:.96;letter-spacing:-.02em;max-width:900px;}
.contact h2 .accent{color:var(--accent);font-style:italic;}
.contact__row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:56px;flex-wrap:wrap;}
.contact__email{
  font-family:'IBM Plex Mono',monospace;font-size:clamp(22px,3.4vw,32px);
  border-bottom:1px solid var(--line-strong);padding-bottom:10px;
  transition:border-color .2s,color .2s;
}
.contact__email:hover{color:var(--accent);border-color:var(--accent);}
.contact__socials{display:flex;gap:24px;font-size:14px;flex-wrap:wrap;}
.contact__socials a{opacity:.7;}
.contact__socials a:hover{opacity:1;color:var(--accent);}

.contact__actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:44px;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.02em;
  padding:16px 30px;border-radius:100px;cursor:pointer;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn--primary{background:var(--accent);color:var(--ink);border:none;}
.btn--primary:hover{transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--paper);border:1px solid var(--line-strong);}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:34px var(--gutter);display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:12px;}
footer a:hover{color:var(--accent);}

/* ---------- Case study page ---------- */
.cs-hero{padding:60px 0 60px;border-bottom:1px solid var(--line);}
.cs-hero__back{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);display:inline-flex;gap:8px;align-items:center;margin-bottom:40px;}
.cs-hero__back:hover{color:var(--accent);}
.cs-hero h1{font-size:clamp(36px,6.2vw,84px);max-width:900px;}
.cs-hero__dek{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:640px;margin-top:24px;}
.cs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;}
.cs-meta .fact h4{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px;}
.cs-meta .fact p{margin:0;font-size:14px;color:var(--paper);}
@media(max-width:760px){.cs-meta{grid-template-columns:1fr 1fr;}}

.cs-hero-img{margin:0;}
.cs-hero-img .placeholder{aspect-ratio:16/9;}

.cs-section{padding:80px 0;border-bottom:1px solid var(--line);}
.cs-section__label{display:grid;grid-template-columns:100px 1fr;gap:24px;}
.cs-section__label .eyebrow{padding-top:6px;}
.cs-section__label .body{max-width:760px;}
.cs-section__label .body h3{font-size:clamp(24px,3.6vw,38px);margin-bottom:22px;}
.cs-section__label .body p{font-size:17px;color:#D8D6CF;line-height:1.7;margin:0 0 18px;}
.cs-section__label .body ul{margin:0 0 18px;padding-left:20px;color:#D8D6CF;font-size:17px;line-height:1.8;}
@media(max-width:700px){.cs-section__label{grid-template-columns:1fr;gap:10px;}}

.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px;}
.impact-card{border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--ink-2);}
.impact-card .big{font-family:'Fraunces',serif;font-size:38px;color:var(--accent);}
.impact-card p{margin:10px 0 0;font-size:14px;color:var(--muted);}
.impact-card:nth-child(1) .big{color:var(--accent);}
.impact-card:nth-child(2) .big{color:var(--accent-3);}
.impact-card:nth-child(3) .big{color:var(--accent-5);}
@media(max-width:760px){.impact-grid{grid-template-columns:1fr;}}

.gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
.gallery .placeholder{aspect-ratio:4/3;}
.gallery.full .placeholder{aspect-ratio:16/9;}
.gallery figure{margin:0;}
.gallery img{width:100%;border-radius:12px;display:block;}
.gallery figcaption{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.02em;}
@media(max-width:700px){.gallery{grid-template-columns:1fr;}}

/* ---------- Full-bleed stacked gallery (new case-study detail pages) ----------
   One image per row, full width, generous vertical rhythm — used for the
   portfolio-package case studies' ordered image lists. A `.pair` wraps two
   figures that should sit side by side on desktop (e.g. a responsive
   desktop/mobile screenshot pair) and stacks them on small screens. */
.cs-full-gallery{display:flex;flex-direction:column;gap:64px;margin-top:10px;}
.cs-full-gallery figure{margin:0;}
.cs-full-gallery img,.cs-full-gallery video{width:100%;border-radius:12px;display:block;background:var(--ink-2);}
.cs-full-gallery figcaption{margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.02em;}
.cs-full-gallery .pair{display:grid;grid-template-columns:1.7fr 1fr;gap:28px;align-items:end;}
.cs-full-gallery .pair figure{margin:0;}
@media(max-width:700px){.cs-full-gallery .pair{grid-template-columns:1fr;}}

/* ---------- Mosaic grid (brand identities / small supporting shots) ---------- */
.cs-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px;}
.cs-mosaic figure{margin:0;}
.cs-mosaic img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:12px;display:block;}
.cs-mosaic figcaption{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);}
@media(max-width:860px){.cs-mosaic{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.cs-mosaic{grid-template-columns:1fr;}}

/* ---------- Uneven grid (tall page screenshots — shows far more than a 4:3 crop) ---------- */
.cs-uneven{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px;align-items:start;}
.cs-uneven figure{margin:0;}
.cs-uneven img{width:100%;object-fit:cover;object-position:top center;aspect-ratio:3/5;border-radius:12px;display:block;}
.cs-uneven figcaption{margin-top:12px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);line-height:1.5;}
.cs-uneven figure:nth-child(2){margin-top:44px;}
@media(max-width:860px){
  .cs-uneven{grid-template-columns:repeat(2,1fr);}
  .cs-uneven figure:nth-child(2){margin-top:0;}
  .cs-uneven figure:nth-child(3){grid-column:1/-1;}
  .cs-uneven figure:nth-child(3) img{aspect-ratio:21/9;}
}
@media(max-width:520px){
  .cs-uneven{grid-template-columns:1fr;}
  .cs-uneven figure:nth-child(3) img{aspect-ratio:3/5;}
}

/* ---------- Brick grid (mixed rectangles/squares, each image keeps a crop sized to its own content — no one-size-fits-all square crop) ---------- */
.cs-brick{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:10px;}
.cs-brick figure{margin:0;}
.cs-brick img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;}
.cs-brick figcaption{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);line-height:1.5;}
@media(max-width:860px){
  .cs-brick{grid-template-columns:1fr;}
  .cs-brick figure{grid-column:auto !important;}
}

/* ---------- Feature split (2-col copy + device/image block, alternating) ---------- */
.cs-split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;margin-bottom:72px;}
.cs-split--rev{grid-template-columns:1fr 1.1fr;}
.cs-split:last-child{margin-bottom:0;}
@media(max-width:860px){
  .cs-split,.cs-split--rev{grid-template-columns:1fr;}
  .cs-split--rev > *:first-child{order:2;}
  .cs-split--rev > *:last-child{order:1;}
}

/* ---------- Lazy video block (motion reel) ----------
   preload="none" + poster keeps these from downloading until played;
   a centered play affordance sits over the poster until the viewer
   starts it (native controls take over from there). */
.cs-video{position:relative;border-radius:12px;overflow:hidden;background:#000;}
.cs-video video{width:100%;display:block;}
.cs-video__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(11,12,14,.28);cursor:pointer;transition:background .25s ease;
}
.cs-video__play-btn{
  width:76px;height:76px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.6);transition:transform .25s ease;
}
.cs-video__play-btn svg{width:26px;height:26px;fill:var(--ink);margin-left:3px;}
.cs-video__play:hover .cs-video__play-btn{transform:scale(1.08);}
.cs-video.is-playing .cs-video__play{opacity:0;pointer-events:none;}
.cs-video__empty{
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--ink-2);border:1px dashed var(--line-strong);border-radius:12px;color:var(--muted);
  font-family:'IBM Plex Mono',monospace;font-size:13px;text-align:center;padding:24px;
}

/* ---------- "Current role" badge on a work tile ---------- */
.work-tile__badge{
  position:absolute;top:16px;right:18px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:var(--ink);
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;
}
.work-tile__badge .dot{width:6px;height:6px;border-radius:50%;background:var(--ink);animation:pulse-dot 1.8s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- "In progress" case-study banner (public-facing, replaces dev notes) ---------- */
.cs-wip-banner{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line-strong);border-radius:12px;
  padding:16px 20px;margin-bottom:8px;
  background:rgba(245,243,238,.04);
}
.cs-wip-banner .dot{width:7px;height:7px;min-width:7px;border-radius:50%;background:var(--accent);}
.cs-wip-banner p{margin:0;font-size:14px;color:var(--muted);line-height:1.6;}
.cs-wip-banner strong{color:var(--paper);font-weight:500;}

/* ---------- "In progress" badge — still being built, not a current-role flag ---------- */
.work-tile__badge--wip{
  background:rgba(245,243,238,.12);color:var(--paper);
  border:1px solid rgba(245,243,238,.3);
  backdrop-filter:blur(6px);
}
.work-tile__badge--wip .dot{background:var(--paper);animation:none;opacity:.8;}

.next-project{padding:90px 0;text-align:center;}
.next-project .eyebrow{display:block;margin-bottom:18px;}
.next-project h2{font-size:clamp(30px,6vw,64px);}
.next-project h2:hover{color:var(--accent);}

/* ---------- Device mockups (MacBook / iPhone / browser chrome) ----------
   Reusable frames for compositing real product screenshots into realistic
   hardware. Built in CSS (no external mockup assets) so they stay crisp at
   any size and inherit the site's own shadows/accents. */
.device-mac{ width:100%; }
.device-mac__lid{
  position:relative;
  background:linear-gradient(180deg,#2e2f33,#1b1c1f);
  border-radius:16px 16px 7px 7px;
  padding:14px 14px 16px;
  box-shadow:0 60px 120px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.device-mac__cam{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%;
  background:#050506; box-shadow:0 0 0 1px rgba(255,255,255,.07);
}
.device-mac__screen{
  position:relative;
  border-radius:5px; overflow:hidden; background:#000;
  aspect-ratio:1700/941;
}
.device-mac__screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.device-mac__hinge{ height:4px; background:#0f1012; margin:0 8px; }
.device-mac__base{
  height:13px; margin:0 -26px 0 -26px;
  background:linear-gradient(180deg,#dcdcde,#aaabaf);
  border-radius:0 0 9px 9px;
  position:relative;
}
@media(max-width:600px){
  .device-mac__base{ margin:0; }
}
.device-mac__base::after{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:84px; height:7px; background:#97979b; border-radius:0 0 7px 7px;
}

.device-phone{ width:100%; max-width:300px; margin:0 auto; }
.ct-gallery .device-phone,
.cs-brick .device-phone{ max-width:300px; margin:0 auto; }
.cs-split .device-phone,
.cs-split--rev .device-phone{ max-width:280px; margin:0 auto; }
.ct-gallery--compact .device-phone{ max-width:280px; margin:0 auto; }
.device-phone__frame{
  position:relative;
  background:linear-gradient(165deg,#3c3d41,#121214);
  border-radius:15% / 7.2%;
  padding:3.6% 3.2%;
  box-shadow:0 50px 110px -25px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.device-phone__screen{
  position:relative;
  border-radius:12% / 5.6%; overflow:hidden; background:#000;
  aspect-ratio:603/1311;
}
.device-phone__screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.device-phone__btn{ position:absolute; background:#232326; border-radius:2px; }
.device-phone__btn--power{ right:-.5%; top:17%; width:.8%; height:9%; }
.device-phone__btn--vol1{ left:-.5%; top:13%; width:.8%; height:4.5%; }
.device-phone__btn--vol2{ left:-.5%; top:19%; width:.8%; height:7%; }

.device-browser{
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
.device-browser__bar{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; background:#1a1b1f; border-bottom:1px solid var(--line);
}
.device-browser__dot{ width:9px; height:9px; border-radius:50%; background:#44454b; }
.device-browser__screen{ aspect-ratio:1700/941; background:#000; }
.device-browser__screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }

/* ---------- Citi Travel case study — dynamic device showcase ---------- */
.ct-hero-devices{
  position:relative;
  padding:30px 0 10px;
  display:grid;
  grid-template-columns:1.35fr .9fr;
  gap:0;
  align-items:center;
}
.ct-hero-devices__mac{
  transform:rotate(-1.2deg);
  filter:drop-shadow(0 0 90px rgba(216,255,62,.07));
}
.ct-hero-devices__phone{
  width:72%; max-width:320px; margin-left:-9%; margin-top:14%;
  transform:rotate(2.5deg);
  position:relative; z-index:2;
}
@media(max-width:860px){
  .ct-hero-devices{grid-template-columns:1fr;gap:56px;padding-top:10px;}
  .ct-hero-devices__mac{transform:none;}
  .ct-hero-devices__phone{width:62%;max-width:300px;margin:0 auto;transform:none;}
}

/* Callout tag pointing at a specific real UI element in a screenshot —
   used to literally point at the LTO placement win inside the hero image
   rather than just describing it in prose. */
.ct-callout{
  position:absolute;
  border:1.5px solid var(--accent);
  border-radius:10px;
  box-shadow:0 0 0 3px rgba(216,255,62,.14);
  pointer-events:none;
}
.ct-callout__tag{
  position:absolute; left:0; top:100%; margin-top:10px;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.02em; white-space:nowrap;
  padding:6px 10px; border-radius:100px;
}
@media(max-width:860px){ .ct-callout__tag{ font-size:10px; padding:5px 8px; } }

/* Dynamic staggered gallery — mixes phone frames and browser-chrome frames
   at varying sizes instead of a uniform grid. */
.ct-gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:24px;
  margin-top:10px;
}
.ct-gallery>div{ grid-column:span 3; }
.ct-gallery .ct-g--phone{ grid-column:span 2; align-self:start; }
.ct-gallery .ct-g--wide{ grid-column:span 4; }
.ct-gallery .ct-g--phone:nth-child(3n+2){ margin-top:60px; }
.ct-gallery figcaption{
  margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--muted); letter-spacing:.02em;
}
@media(max-width:900px){
  .ct-gallery{grid-template-columns:1fr 1fr;gap:32px;}
  .ct-gallery>div,.ct-gallery .ct-g--phone,.ct-gallery .ct-g--wide{grid-column:span 1;margin-top:0 !important;}
}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}