@import url('./fonts.css');

:root{
  --bg:#0a0a0a; --ink:#f2f2f2; --line:#1a1a1a;
  --accent:#B10E1E;
   --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-ui: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --h1: clamp(3rem, 10vw, 9rem);
  --h2: clamp(1.1rem, 3vw, 2rem);
  --pad: clamp(16px,2vw,40px);

 --isl-vh: 1vh; /* fallback, JS will overwrite with correct px value */
}

/* Utility: Full viewport height (safe across browsers) */
.full-viewport-height {
  height: 100vh;
}

@supports (height: 100dvh) {
  .full-viewport-height {
    height: 100dvh;
  }
}

@supports (height: 100lvh) {
  .full-viewport-height {
    height: 100lvh;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* prevent line breaks */
  border: 0;
}

/* iOS Safari viewport groundwork */
html{
  height: -webkit-fill-available;
}

body{
  min-height: 100vh;              /* fallback for older engines */
  min-height: 100dvh;             /* dynamic viewport (modern) */
  height: -webkit-fill-available; /* iOS uses real screen height */
  overflow-x: clip;
}

html, body {
  margin: 0;
  padding: 0;
}

/* iOS Safari viewport groundwork + your original body styles */
html {
  height: -webkit-fill-available; /* iOS enable fill-available */
}

body {
  font: 16px/1.65 var(--font-body);
  background: var(--bg);
  color: var(--ink);

  min-height: 100vh;              /* fallback for old browsers */
  height: -webkit-fill-available; /* iOS uses real screen height */
  overflow-x: clip;               /* prevent horizontal jitter on iOS */
}



/* iOS 26 Safari: solid root paint while overlay is open */
html.has-overlay,
body.has-overlay{
  background: #000 !important; /* match overlay tone */
}


/* iOS 26 Liquid UI: when menu is open, hide all page content so the
   browser samples only the solid root background behind the URL bar. */
body.overlay-hide-content > *:not(#overlay):not(script):not(style) {
  visibility: hidden !important;   /* keeps layout but removes paint */
}

/* Ensure the overlay stays visible */
#overlay { visibility: visible !important; }



/* iOS 26 Safari: viewport-wide backdrop under overlay, above page */
body.has-overlay::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.96);
  pointer-events: none;
  z-index: 79;                  /* overlay uses z-index:80 */
  transform: translateZ(0);     /* ensure its own layer during UI anims */
  will-change: transform;
}






/* Base */
*{box-sizing:border-box}

a{color:inherit;text-decoration:none}
img,video,iframe{display:block;max-width:100%;height:auto}
h1,h2,.kicker,.btn{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.08em}

/* Header */
.header{
  position:fixed;top:0;left:0;right:0;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);z-index:60;border-bottom:1px solid var(--line);
  background:rgba(10,10,10,.5);backdrop-filter:blur(6px)
}

/* Brand / badge */
.header .brand{
  display:flex; flex-direction:row; align-items:baseline; gap:.6rem;
  text-decoration:none; color:inherit;
}
/* Header brand uses body font now (no Space Grotesk) */
.header .brand-name{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: none;
}
.header .brand-roles{
  font-family:var(--font-ui); font-size:.7rem; opacity:.6;
  letter-spacing:.08em; text-transform:uppercase;
}
@media (max-width:520px){
  .header .brand{ flex-direction:column; align-items:flex-start; gap:.25rem; }
  .header .brand-name{ font-size:.95rem; }
  .header .brand-roles{ font-size:.65rem; }
}

/* Overlay menu buttons */
.menu-btn,#closeMenu{
  all:unset;display:inline-block;border:1px solid var(--line);
  color:var(--ink);font-family:var(--font-ui);font-size:.9rem;letter-spacing:.12em;
  padding:.5rem .8rem;text-transform:uppercase;cursor:pointer;border-radius:4px;
  transition:border-color .25s ease,color .25s ease, transform .15s ease
}
.menu-btn:hover,#closeMenu:hover{border-color:var(--accent);color:var(--accent)}
.menu-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent);transform:scale(1.02)}
#closeMenu{position:absolute;top:20px;right:20px}

/* === FULL-SCREEN MENU OVERLAY (robust for iOS 26) === */
.overlay{
  position: fixed;
  inset: 0;
  z-index: 80;

  /* Let CSS own the height (avoid buggy visualViewport pixel values) */
  height: auto;
  min-height: 100vh;

  /* Paint background via ::before so it always covers the viewport */
  background: transparent;
  color: #fff;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;

  /* Prevent bottom gap on iPhone with home indicator */
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain;

  /* Create stacking context so ::before can sit behind content but above page */
  isolation: isolate;
}
@supports (height: 100lvh) { .overlay { min-height: 100lvh; } } /* iOS 17+/Safari modern */
@supports (height: 100dvh) { .overlay { min-height: 100dvh; } }
@supports (height: 100svh) { .overlay { min-height: 100svh; } }

/* Full-viewport dark layer that ignores iOS height glitches */
.overlay::before{
  content:"";
  position: fixed;
  inset: 0;                          /* paint full viewport regardless of overlay's computed height */
  background: rgba(0,0,0,.96);
  pointer-events: none;               /* don't block clicks */
  z-index: -1;                        /* behind overlay content, still above page due to isolation */
}

.overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s ease;
}

.overlay .menu {
  position: relative;
  z-index: 1;                       /* ensure it's above ::before background */
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain;
}

.overlay ul{list-style:none;margin:0;padding:0;text-align:center}
.overlay li{margin:.45rem 0; opacity:0; transform:translateY(6px)}
.overlay.is-open li{opacity:1; transform:none; transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1)}

/* stagger (first 10 items) */
.overlay.is-open li:nth-child(1){ transition-delay:.04s }
.overlay.is-open li:nth-child(2){ transition-delay:.08s }
.overlay.is-open li:nth-child(3){ transition-delay:.12s }
.overlay.is-open li:nth-child(4){ transition-delay:.16s }
.overlay.is-open li:nth-child(5){ transition-delay:.20s }
.overlay.is-open li:nth-child(6){ transition-delay:.24s }
.overlay.is-open li:nth-child(7){ transition-delay:.28s }
.overlay.is-open li:nth-child(8){ transition-delay:.32s }
.overlay.is-open li:nth-child(9){ transition-delay:.36s }
.overlay.is-open li:nth-child(10){transition-delay:.40s }

.overlay a{
  display:inline-block;position:relative;padding:.3rem 0;
  letter-spacing:.12em;font-weight:600
}
.overlay a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .25s ease
}
.overlay a:hover::after{transform:scaleX(1)}

/* Ensure the Close button sits above the centered menu grid */
.overlay .menu { position: relative; z-index: 1; }

#closeMenu{
  position:absolute; top:20px; right:20px;
  z-index: 2;                      /* above menu and ::before */
  /* optional: make it a bit more visible on dark bg */
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  opacity: 0;                      /* fade-in when overlay opens */
  transition: opacity .18s ease;
}

.overlay.is-open #closeMenu{ opacity: 1; }

/* Hero */
.hero{position:relative;min-height:100svh;border-bottom:1px solid var(--line)}
.hero .bg{position:absolute;inset:0}
.hero .bg picture{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.9}
.hero .mask{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.75) 70%, rgba(0,0,0,.9) 100%)}
.hero .center{position:relative;z-index:1;min-height:100svh;display:grid;place-items:center;text-align:center;padding:0 var(--pad)}
.hero h1{font-size:var(--h1);line-height:.95;margin:0 0 1rem;max-width:16ch;letter-spacing:.03em}
.hero .subtitle{margin-top:1rem;color:#ccc;max-width:45ch;margin-inline:auto;line-height:1.5}
.hero .role{margin-top:1rem;display:inline-block;border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:.5rem .9rem}

/* Work */
#work{scroll-margin-top:80px}
.chapters{display:flex;flex-direction:column}
.chapter{
  display:grid;grid-template-columns:1.1fr .9fr;gap:2vw;
  align-items:center;min-height:70svh;padding:60px var(--pad);
  border-top:1px solid var(--line)
}
.chapter.reverse{grid-template-columns:.9fr 1.1fr}
.media{position:relative;border:1px solid var(--line);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease,opacity .2s ease}
.chapter .copy{max-width:40ch}

/* Global underline */
.chapter .copy h2{margin-top:0;margin-bottom:.6em;position:relative}
.chapter .copy h2::after{
  content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .28s ease;
}

/* Desktop/tablet layout */
@media (min-width:821px){
  #work .chapter{grid-template-columns:1fr 1fr!important}
  #work .chapter .copy{align-self:center!important;padding-block:12px}
  #work .chapter .copy{grid-column:2!important}
  #work .chapter.reverse .media{grid-column:2!important}
  #work .chapter.reverse .copy{grid-column:1!important}

  #work .chapter .copy p{line-height:1.7}
}

/* Mobile layout */
@media (max-width:820px){
  .chapter,.chapter.reverse{grid-template-columns:1fr;gap:14px;min-height:auto;padding:36px var(--pad)}
  #work .chapter{grid-template-columns:1fr!important}
  #work .chapter .media,#work .chapter .copy{grid-column:1!important;grid-row:auto!important;align-self:start!important}

  .chapter .copy h2{font-size:clamp(1rem,5vw,1.4rem)}
}

/* Hover (any-hover catches iPad + trackpad/mouse) */
@media (any-hover:hover){
  .chapter:hover .media img{transform:scale(1.02);filter:brightness(0.94) contrast(1.03)}
  .chapter:hover .copy h2::after{transform:scaleX(1)}
  .chapter .copy h2:hover::after{transform:scaleX(1)}
}

/* Touch feedback (press only) */
@media (hover:none){
  .chapter.touch-hover .media img{transform:scale(1.02);filter:brightness(0.94) contrast(1.03)}
  .chapter.touch-hover .copy h2::after{transform:scaleX(1)}
}

/* Text pages */
.textpage main{max-width:900px;margin:0 auto;padding:calc(64px + 40px) var(--pad) 40px}
.textpage h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.1;max-width:22ch}
.textpage p{line-height:1.75;color:rgba(242,242,242,.88)}

/* CTA & Footer */
.cta{padding:80px 0;text-align:center;border-top:1px solid var(--line)}
.cta .big{font-family:var(--font-ui);font-weight:800;letter-spacing:.08em;font-size:clamp(28px,6vw,72px)}
.cta .mail{display:inline-block;margin-top:14px;border:2px solid var(--accent);border-radius:999px;padding:.75rem 1.2rem;transition:transform .2s ease,border-color .2s ease}
.cta .mail:hover{transform:scale(1.02);border-color:#fff}

footer{padding:18px var(--pad);display:flex;flex-wrap:wrap;gap:.6rem;color:#999;border-top:1px solid var(--line)}
footer small a:hover{text-decoration:underline}
@media (max-width:640px){
  footer{justify-content:center;gap:.8rem}
}
@media (min-width:641px){
  footer{justify-content:flex-start}
  footer small:nth-of-type(1){margin-right:auto}
  footer small:nth-of-type(2){margin-left:auto}
}

/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.media img.poster-fade-out{opacity:0;transition:opacity .2s ease}

/* Reduced motion: disable fancy stuff */
@media (prefers-reduced-motion:reduce){
  .overlay, .overlay.is-open, .overlay li, .chapter .media img, .chapter .copy h2::after {
    transition:none !important;
  }
  .overlay{opacity:1 !important; visibility:visible !important; pointer-events:auto !important;}
}

/* ===== PHASE 4 — Mockup-aligned visual tuning (append to end) ===== */

/* 1) Slightly stronger accent red (affects underlines/CTA/badges subtly) */
:root{
  --accent:#E01717; /* was #B10E1E */
}

/* 2) Hero: subtitle tighter + red divider under hero */
.hero .subtitle{
  line-height:1.35;
  max-width:40ch;
  opacity:.9;
}
.hero{
  position:relative;
  border-bottom:1px solid var(--line);
}
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:var(--accent); opacity:.7;  /* thin red divider */
  pointer-events:none;
}

/* 3) Work section hierarchy: stronger titles, lighter description */
.chapter .copy h2{
  font-weight:700;                /* a touch bolder, like the mockup */
  letter-spacing:.06em;           /* slightly tighter than global .08em */
}
.chapter .copy p{
  color: rgba(242,242,242,.84);   /* lighter body for contrast */
  font-weight:400;                /* keep light; title does the heavy lifting */
}

/* 4) CTA email: look closer to mockup (red text + editorial spacing) */
.cta .mail{
  color: var(--accent);
  letter-spacing: .08em;
  text-underline-offset: 2px;
}
.cta .mail:hover{
  border-color:#fff;              /* keep the premium hover */
  color:#fff;                     /* white on hover for a clean flip */
}

/* 5) Overlay menu polish: keep link underline speed consistent with accent bump */
.overlay a::after{
  transition: transform .22s ease;
}

/* 6) Safety: reduced motion keeps everything snappy */
@media (prefers-reduced-motion: reduce){
  .hero::after,
  .overlay a::after{
    transition: none !important;
  }
}

/* ===== PHASE 4b — Mobile headline wrapping fix ===== */

/* 1) Hero H1: tighter max-width + smaller font on very narrow screens */
@media (max-width: 480px){
  .hero h1{
    max-width: 12ch;           /* was 16ch — prevents overshoot */
    font-size: clamp(2.2rem, 10vw, 3.5rem);
    letter-spacing: .02em;     /* slightly tighter tracking for small screens */
  }
  .hero .subtitle{
    font-size: .95rem;
    max-width: 34ch;
  }
}

/* 2) Work section h2: make sure long titles wrap gracefully */
@media (max-width: 480px){
  .chapter .copy h2{
    font-size: 1.1rem;
    word-break: break-word;
    hyphens: auto;            /* allow hyphenation when supported */
  }
}

/* === Mobile headline wrapping & sizing (iPhone-safe) === */
@media (max-width: 480px){
  /* shrink the global hero size token so existing rules pick it up */
  :root{
    --h1: clamp(2.1rem, 9.5vw, 3.4rem);
  }

  /* hero title: tighter tracking + explicit wrapping */
  .hero h1{
    max-width: 12ch;         /* prevent overshoot */
    line-height: 1.02;
    letter-spacing: .02em;
    overflow-wrap: anywhere; /* break long words if needed */
    word-break: break-word;
    hyphens: auto;
  }

  /* hero subtitle slightly smaller, narrower measure */
  .hero .subtitle{
    font-size: .95rem;
    max-width: 34ch;
  }

  /* work titles: ensure clean wrap for long project names */
  .chapter .copy h2{
    font-size: 1.05rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  /* optional: add a touch more side padding on tiny screens */
  :root{ --pad: clamp(16px, 4vw, 28px); }
}

/* === Mobile fix: long H1 in privacy (German) === */
.textpage h1{
  overflow-wrap:anywhere;   /* allow breaks anywhere if needed */
  word-break:break-word;    /* fallback for engines that ignore overflow-wrap */
  hyphens:auto;             /* enable language-aware hyphenation (needs lang="de") */
}

@media (max-width: 480px){
  .textpage h1{
    font-size: clamp(1.6rem, 8.5vw, 2.2rem);
    letter-spacing: .02em;  /* a bit tighter so it fits better */
    max-width: 16ch;        /* prevent overshoot */
    line-height: 1.1;
  }
}

/* === Phase 4c — Hero H1 visual refinement === */
.hero h1 {
  font-weight: 700;            /* stronger weight for more impact */
  letter-spacing: 0.01em;      /* slightly tighter tracking */
  line-height: 0.9;            /* more dramatic vertical rhythm */
  max-width: 14ch;             /* narrow measure for cinematic look */
  text-transform: uppercase;   /* editorial vibe (optional) */
}

/* === Mobile Hero Refinement: Bigger + Centered === */
@media (max-width: 480px){
  .hero {
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: 0 1.2rem;
    text-align:center; /* centers everything */
  }
  .hero h1 {
    font-size: clamp(2.9rem, 13vw, 3.9rem); /* boost size */
    max-width: 95%;
    margin: 0 auto;       /* centers headline block */
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-align:center;    /* center text */
  }
  .hero .subtitle{
    margin-top:.8rem;
    font-size: 1rem;
    max-width: 90%;
    margin-inline:auto;
    text-align:center;
  }
}

/* === Mockup alignment — spacing rhythm & calm density === */

/* 1) Give each work chapter a little more vertical air on desktop/tablet */
@media (min-width: 821px){
  .chapter{
    padding-top: 80px;   /* was 60px */
    padding-bottom: 80px;
    gap: 2.4vw;          /* a hair more space between video and copy */
  }
  /* keep copy comfortably narrow and centered vertically */
  #work .chapter .copy{
    max-width: 42ch;     /* +2ch for longer titles to breathe */
  }
}

/* 2) On mobile, small bump without making it feel long */
@media (max-width: 820px){
  .chapter{
    padding-top: 44px;   /* was 36px */
    padding-bottom: 44px;
    gap: 16px;
  }
}

/* 3) Add a bit more ceremony before the CTA */
.cta{
  padding-top: 100px;    /* was 80px */
  padding-bottom: 90px;  /* was 80px */
}

/* ===== Work Section → Strict Grid (desktop/tablet only) ===== */
@media (min-width: 821px){

  /* 1) Make the container a 2-column grid with airy rhythm */
  #work .chapters{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem; /* row gap / column gap */
  }

  /* 2) Turn each project into a vertical “card” (media on top, copy below) */
  #work .chapter{
    display: flex !important;       /* override previous grid alternation */
    flex-direction: column;
    min-height: initial !important;
    padding: 0 !important;
    border-top: none !important;    /* we use gaps now, not rules */
    gap: 12px;
  }

  /* 3) Neutralize the old reverse layout on desktop */
  #work .chapter.reverse{
    grid-template-columns: none !important; /* no effect in flex context */
  }

  /* 4) Media: lock aspect ratio so rows align perfectly */
  #work .chapter .media video{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;     /* pick 3/2 if you prefer a taller look */
    object-fit: cover;
    display: block;
  }

  /* 5) Copy: full width within the card, keep your hover underline etc. */
  #work .chapter .copy{
    max-width: none;          /* let text align with the card width */
    align-self: stretch;
  }
  #work .chapter .copy h2{
    margin-top: .6rem;
  }
}

/* === Add vertical gap before the first Work row === */
@media (min-width: 821px){
  #work {
    padding-top: 60px; /* adjust if you want more/less air */
  }
}
@media (max-width: 820px){
  #work {
    padding-top: 36px;
  }
}

/* === Work Section: Grid Refinement + Left-Aligned Copy + Side Gutters === */

/* Always keep copy left-aligned and normalized across all breakpoints */
#work .chapter .copy{
  text-align: left !important;
  margin: 0;
  padding: 0;
}

/* Desktop/tablet: normalize vertical alignment + add side gutters */
@media (min-width: 821px){
  #work{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  #work .chapter .copy{
    max-width: none !important;
    align-self: flex-start !important;
  }
}

/* 3-column grid on wide desktops (≥1440px) */
@media (min-width: 1440px){
  #work .chapters{
    grid-template-columns: repeat(3, minmax(360px, 1fr)) !important;
    gap: 3.2rem 2.6rem; /* row / column gap */
    max-width: 1680px;
    margin-inline: auto;
    padding-left: 2.5rem;   /* maintain gutters even on wide screens */
    padding-right: 2.5rem;
  }

  #work .chapter{
    gap: 14px;
  }

  #work .chapter .media video{
    aspect-ratio: 3 / 2;
  }

  #work .chapter .copy h2{
    margin-top: .35rem;
    margin-bottom: .4rem;
  }

  #work .chapter .copy p{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* === Menu Button Color Inversion === */
.menu-btn{
  border-color: var(--accent);
  color: var(--accent);
}
.menu-btn:hover{
  border-color: #fff;
  color: #fff;
}
.menu-btn[aria-expanded="true"]{
  border-color: #fff;
  color: #fff;
}

/* === Footer Link Color Inversion === */
footer small a {
  color: var(--accent);
  transition: color .2s ease;
}
footer small a:hover {
  color: #fff;
}

/* === Footer Link Styling: Red → White, No Underline === */
footer small a {
  color: var(--accent);
  text-decoration: none;
  transition: color .2s ease;
}
footer small a:hover {
  color: #fff;
  text-decoration: none; /* ensure underline is suppressed even on hover */
}

/* About: headings, lists, pullquote polish */
.about-content h2{
  margin-top: 1.6rem; margin-bottom: .5rem;
  font-family: var(--font-ui); letter-spacing:.08em; text-transform:uppercase;
}
.about-content h2::before{
  content:""; display:block; height:1px; background:var(--accent);
  opacity:.6; margin-bottom:.75rem;
}

/* grid-list: tidy 2-column list on desktop, 1-column on mobile */
.about .grid-list{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem .8rem; }
@media (min-width:821px){ .about .grid-list{ grid-template-columns: repeat(2, minmax(180px,1fr)); } }

/* pullquote: subtle emphasis */
.about .pullquote{
  margin: 1rem 0 1.2rem; padding-left: 1rem; border-left: 2px solid var(--accent);
  font-size: 1.05rem; line-height:1.6; color: rgba(242,242,242,.9);
}

/* === ABOUT — Bold typographic sections inspired by inspo === */
.about-hero-statement{
  margin: 2.5rem 0 2rem;
  padding: clamp(24px, 4vw, 56px) clamp(18px, 3vw, 42px);
  border: 1px solid var(--line); /* keep our subtle frame */
  background: rgba(255,255,255,0.02); /* tiny lift without color shift */
}
.about-hero-statement .kicker{
  display:inline-block;
  font-family: var(--font-ui);
  letter-spacing:.14em;
  font-size:.78rem;
  opacity:.75;
  margin-bottom:.75rem;
}
.mega{
  font-family: var(--font-body);
  font-weight: 700;
  line-height: .98;
  letter-spacing: .005em;
  font-size: clamp(2rem, 5.6vw, 4.2rem); /* big and responsive */
  max-width: 26ch;
}

/* Two statement tiles (desktop split, mobile stack) */
.about-tiles{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.5vw, 28px);
  margin: 2rem 0 2.5rem;
}
.about-tiles .tile{
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.about-tiles .kicker{
  display:inline-block;
  font-family: var(--font-ui);
  letter-spacing:.14em;
  font-size:.78rem;
  opacity:.75;
  margin-bottom:.6rem;
}
.about-tiles .mega{
  font-size: clamp(1.6rem, 4.6vw, 3rem); /* slightly smaller than hero block */
  max-width: 34ch;
}
.tile-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top: .9rem;
  font-family: var(--font-ui);
  letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
  transition: color .2s ease, border-color .2s ease;
}
.tile-cta:hover{ color:#fff; border-color:#fff; }

/* desktop split layout */
@media (min-width: 981px){
  .about-tiles{ grid-template-columns: 1fr 1fr; }
}

/* tighten rhythm on ultra-wide */
@media (min-width: 1440px){
  .about-hero-statement .mega{ max-width: 24ch; }
  .about-tiles .mega{ max-width: 30ch; }
}

/* About grid without image: center content nicely */
.about-grid{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 780px;
  margin-inline: auto;
}

/* About tiles: spacing for inline paragraphs (no “read more” links) */
.about-tiles .tile .mega{ margin-bottom: .6rem; }
.about-tiles .tile p{
  margin: .4rem 0 0;
  line-height: 1.65;
  color: rgba(242,242,242,.9);
  max-width: 60ch;
}

/* Philosophy block uses same styling as about-hero but slightly more breathing space */
.philosophy-block{
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* === About Section Vertical Rhythm === */
.about-hero-statement,
.philosophy-block {
  margin: clamp(2.5rem, 6vw, 4rem) 0;
  padding: clamp(24px, 4vw, 56px) clamp(18px, 3vw, 42px);
}

.about-tiles {
  margin: clamp(2rem, 5vw, 3rem) 0;
}

.philosophy-block {
  margin-top: clamp(3rem, 6vw, 4.5rem); /* slightly more space above */
}

/* Credentials panel (Clients / Agencies / Feature) */
.about-cred{
  max-width: 780px;          /* ✅ makes width match hero blocks */
  margin-left: auto;         /* ✅ centers horizontally */
  margin-right: auto;
  margin: clamp(2.5rem, 6vw, 4rem) 0;
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.about-cred .kicker{
  display:block;
  font-family: var(--font-ui);
  font-size:.78rem;
  letter-spacing:.14em;
  opacity:.75;
  margin-bottom:.4rem;
}
.about-cred ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.4rem .8rem;
}
@media (min-width: 821px){
  .about-cred ul{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

/* Philosophy spacing (hero style) */
.philosophy-block{
  margin: clamp(3rem, 6vw, 4.5rem) 0;
}

/* === About: normalize widths so all blocks align exactly === */
.about-grid{
  /* we previously set flex + max-width; keep that, but stretch children */
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* <- was flex-start: causes uneven widths */
  max-width: 780px;
  margin-inline: auto;
}

/* Ensure each section fills the grid width */
.about .about-hero-statement,
.about .about-tiles,
.about .philosophy-block,
.about .about-cred{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* === About Page Vertical Rhythm === */

/* Equalize spacing for hero blocks (ABOUT + PHILOSOPHY) */
.about .about-hero-statement,
.about .philosophy-block {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(24px, 4vw, 56px) clamp(18px, 3vw, 42px);
}

/* Balanced space around the tile grid */
.about .about-tiles {
  margin-top: clamp(2rem, 5vw, 3rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* Balanced space before credentials panel */
.about .about-cred {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}

/* === About Page Vertical Rhythm (Tighter Version) === */

/* Hero blocks (ABOUT + PHILOSOPHY) */
.about .about-hero-statement,
.about .philosophy-block {
  margin-top: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  padding: clamp(20px, 3vw, 44px) clamp(16px, 3vw, 36px);
}

/* Tile grid */
.about .about-tiles {
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* Credentials panel */
.about .about-cred {
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Reusable CTA button (red pill) */
.button-cta {
  display: inline-block;
  background: var(--accent);
  color: #000;
  padding: 0.9rem 2rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 50px;
  transition: background .2s ease, color .2s ease;
}

.button-cta:hover {
  background: #fff;
  color: #000;
}

/* --- WORK: simple, robust layout --- */
#work .chapter .media{
  overflow: hidden;
  border: 1px solid var(--line);
}

/* Poster lives in normal flow: gives container its height immediately */
#work .chapter .media img{
  display: block;
  width: 100%;
  height: auto;        /* keep intrinsic ratio */
  border: 0;
  object-fit: cover;   /* harmless; keeps cover if needed */
}

/* Vimeo player defines its own height via aspect-ratio */
#work .chapter .media iframe{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;  /* default; JS can override if data-h is set */
  border: 0;
}

/* WORK: ensure iframe defines height via aspect ratio after the swap */
#work .chapter .media iframe{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;   /* default; JS can still use other ratios via container lock during swap */
  height: auto;           /* after unlock, height follows aspect-ratio */
  border: 0;
}

/* Extra spacing before CTA on services page */
#contact-services {
  margin-top: 3rem;
}

.about-cta {
  margin-bottom: 2rem; /* default */
}

@media (min-width: 768px){
  .about-cta {
    margin-bottom: 3rem; /* more space on bigger screens */
  }
}