/* ========================================
   LANDY GARCIA - Design System v2.1
   SINGLE SOURCE OF TRUTH - spacing - type - color - media
   Keep this header in sync; pages must only use tokens below.
   ────────────────────────────────────────
   1. COLORS (light, footer-only dark)
      --c-bg:#F4F1EB      page background
      --c-paper:#FFFCF8   cards / inputs
      --c-ink:#0E0E0E     headings / body (AA 18:1)
      --c-muted:#565552   body/secondary (AA 6.1:1)
      --c-muted-2:#6E6D6B large display only
      --c-line:#E8E2D9    hairlines / grid
      --c-line-strong:#D9D1C2 emphasized border
      --c-accent removed -> maps to --c-ink (no orange)
      Dark only: .rm-footer / .cta { bg var(--c-ink) }

   2. TYPOGRAPHY (free)
      --f-display:'Anton'  hero / h1-h4 (free alt to Humane)
      --f-body:'DM Sans'   paragraphs / UI
      --f-mono:'JetBrains Mono' captions / meta / tags
      Scale fluid:
        --fs-hero clamp(3.8rem,13vw,13rem)
        --fs-h1 clamp(2.6rem,7vw,6.5rem)
        --fs-h2 clamp(1.9rem,4.5vw,3.75rem)
        --fs-h3 clamp(1.25rem,2.6vw,1.85rem)
        --fs-body clamp(0.92rem,1vw,1.05rem)

   3. SPACING - 4pt base, always use tokens:
      --s-xs:0.5rem (8px)  | inside tags
      --s-sm:1rem  (16px) | stack xs
      --s-md:2rem  (32px) | section gutters
      --s-lg:4rem  (64px) | between sections mobile
      --s-xl:7rem  (112px)| between sections desktop
      --s-2xl:10rem(160px)| hero/cta only
      Page gutters: --gutter clamp(1.2rem,4vw,3.5rem)
      Pattern: heading->paragraph = 1.2rem (19px), card->card = 3rem

   4. MEDIA - FULL IMAGE, NO CROP
      Default: .rm-project__media is CONTAIN, not COVER.
      Container is auto-height letterbox (var(--c-paper) + 1.2rem pad)
      so any aspect (tall bottle, wide box, square label) shows 100%.
      Do not re-introduce aspect-ratio:1.55/1 + cover unless intentional.
      Future uploads: just <img> inside .rm-project__media, JS does nothing.
   ────────────────────────────────────────
   Free fonts: Anton + DM Sans + JetBrains Mono
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* 0. Font fallback for Morganite keep */
@font-face { font-family:'Morganite'; src:url('../assets/fonts/Morganite/Morganite-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }

/* 1. TOKENS - LIGHT */
:root{
  --c-bg:#F4F1EB;
  --c-paper:#FFFCF8;
  --c-ink:#0E0E0E;
  --c-ink-soft:#1A1A18;
  --c-muted:#565552; /* WCAG AA 6.1:1 on #F4F1EB */
  --c-muted-2:#6E6D6B; /* large text 3:1 pass */
  --c-line:#E8E2D9;
  --c-line-strong:#D9D1C2;
  --c-accent:var(--c-ink); /* orange removed - neutral ink */
  --c-accent-dark:var(--c-ink-soft);
  --c-accent-soft:var(--c-line);
  /* legacy aliases so old classes still work */
  --c-black:var(--c-ink);
  --c-white:var(--c-paper);
  --c-orange:var(--c-ink);
  --c-orange-dark:var(--c-ink);
  --c-gray-100:#EFE9DD;
  --c-gray-200:var(--c-line);
  --c-gray-300:var(--c-line-strong);
  --c-gray-400:var(--c-muted);
  --c-gray-500:var(--c-muted);
  --c-gray-600:var(--c-muted-2);

  --f-display:'Anton','Morganite',sans-serif;
  --f-body:'DM Sans','Helvetica Neue',sans-serif;
  --f-mono:'JetBrains Mono',monospace;

  --fs-hero:clamp(3.8rem,13vw,13rem);
  --fs-hero-sub:clamp(0.85rem,1.2vw,1.05rem);
  --fs-h1:clamp(2.6rem,7vw,6.5rem);
  --fs-h2:clamp(1.9rem,4.5vw,3.75rem);
  --fs-h3:clamp(1.25rem,2.6vw,1.85rem);
  --fs-h4:clamp(1rem,1.6vw,1.35rem);
  --fs-body:clamp(0.92rem,1vw,1.05rem);
  --fs-small:clamp(0.72rem,0.85vw,0.82rem);
  --fs-caption:0.68rem;

  --s-xs:0.5rem; --s-sm:1rem; --s-md:2rem; --s-lg:4rem; --s-xl:7rem; --s-2xl:10rem;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-smooth:cubic-bezier(0.25,0.46,0.45,0.94);
  --duration:0.6s;
  --container:min(92%,1400px);
  --gutter:clamp(1.2rem,4vw,3.5rem);
}

/* 2. RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
/* footer-only dark: no body tint elsewhere - smooth footer reveal */
html.lenis body{transition:background-color 0.9s var(--ease-smooth), color 0.9s var(--ease-smooth)}
body{background:var(--c-bg);color:var(--c-ink);font-family:var(--f-body);font-size:var(--fs-body);line-height:1.65;overflow-x:hidden;transition:background-color 0.9s var(--ease-smooth), color 0.9s var(--ease-smooth)}
body.theme-dark{--c-bg:#0E0E0E;--c-paper:#141412;--c-line:rgba(255,252,248,0.08);--c-line-strong:rgba(255,252,248,0.14)}
/* manifesto stays light - no dark inversion */
body.theme-dark .manifesto__text{color:inherit}
body.theme-dark .manifesto__text em{color:inherit}
body.menu-open{overflow:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--c-ink);color:var(--c-paper)}

/* Grain overlay */
body::after{content:'';position:fixed;inset:0;pointer-events:none;opacity:0.035;z-index:9999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");}

/* View Transitions */
::view-transition-old(root),::view-transition-new(root){animation-duration:0.45s}
::view-transition-old(root){animation-name:vt-out}
::view-transition-new(root){animation-name:vt-in}
@keyframes vt-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.page-transition{position:fixed;inset:0;background:var(--c-ink);z-index:2000;transform:translateY(100%);pointer-events:none}
.page-transition.active{transform:translateY(0);transition:transform 0.6s var(--ease)}

/* Progress bar - neutral */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--c-ink);width:0;z-index:1001;transform-origin:left;transition:width 0.08s linear;opacity:0.9}
.footer .scroll-progress{background:var(--c-paper)}

/* 3. TYPOGRAPHY */
.t-hero{font-family:var(--f-display);font-size:var(--fs-hero);line-height:0.84;letter-spacing:-0.03em;text-transform:uppercase;font-weight:400}
.t-h1{font-family:var(--f-display);font-size:var(--fs-h1);line-height:0.9;letter-spacing:-0.03em;text-transform:uppercase;font-weight:400}
.t-h2{font-family:var(--f-display);font-size:var(--fs-h2);line-height:0.92;letter-spacing:-0.02em;text-transform:uppercase;font-weight:400}
.t-h3{font-family:var(--f-display);font-size:var(--fs-h3);line-height:1;text-transform:uppercase;font-weight:400;letter-spacing:-0.01em}
.t-h4{font-family:var(--f-display);font-size:var(--fs-h4);line-height:1.05;text-transform:uppercase;font-weight:400}
.t-body{font-size:var(--fs-body);line-height:1.75;color:var(--c-muted)}
.t-small{font-size:var(--fs-small);line-height:1.6;color:var(--c-muted)}
.t-caption{font-family:var(--f-mono);font-size:var(--fs-caption);letter-spacing:0.14em;text-transform:uppercase;color:var(--c-accent);font-weight:500}
.t-label{font-family:var(--f-mono);font-size:var(--fs-caption);letter-spacing:0.16em;text-transform:uppercase;color:var(--c-muted);font-weight:400}
.t-caption + .t-h1,.t-caption + .t-h2,.t-caption + .t-h3{margin-top:var(--s-xs)}
.footer__brand .t-small{margin-top:var(--s-sm)}
.footer__label{margin-bottom:var(--s-sm)}

/* 4. LAYOUT */
.container{width:var(--container);margin:0 auto}
.section{padding:var(--s-xl) 0}
.section--lg{padding:var(--s-2xl) 0}
.section--gutter{padding:0 var(--gutter)}
.section--detail{padding:clamp(2.5rem,5vw,4rem) var(--gutter)}
.section--detail-top{padding:clamp(3rem,6vw,5rem) var(--gutter) 0}
.u-mt-xs{margin-top:var(--s-xs)}.u-mt-sm{margin-top:var(--s-sm)}.u-mt-md{margin-top:var(--s-md)}.u-mt-lg{margin-top:var(--s-lg)}.u-mb-sm{margin-bottom:var(--s-sm)}.u-self-start{align-self:flex-start}

/* 5. HEADER - light, consistent on every page (never inverts) */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1.1rem var(--gutter);display:flex;justify-content:space-between;align-items:center;background:transparent;transition:background 0.35s ease, border-color 0.35s ease;border-bottom:1px solid transparent}
.header.scrolled{background:rgba(244,241,235,0.92);backdrop-filter:blur(12px) saturate(1.1);border-color:var(--c-line)}
.header__logo{display:flex;align-items:center;gap:0.7rem;letter-spacing:-0.02em}
.header__logo-mark{font-family:var(--f-display);font-size:1.45rem;line-height:1;letter-spacing:-0.04em}
.header__logo-mark span{color:var(--c-ink)}
/* Footer: logo must stay light on dark bg - never inherit dark ink */
.rm-footer .header__logo-mark, .rm-footer .header__logo-mark span,
.footer .header__logo-mark, .footer .header__logo-mark span{color:var(--c-paper) !important}
.rm-footer .header__logo-text, .footer .header__logo-text{color:rgba(255,252,248,0.75) !important}
.header__logo-text{font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--c-muted);margin-top:2px}
.header__logo-icon{display:none}
.header__nav{display:flex;gap:2rem;align-items:center}
.header__link{font-family:var(--f-mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-ink);position:relative;padding:0.2rem 0}
.header__link::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--c-ink);transition:width 0.35s var(--ease)}
.header__link:hover::after,.header__link.active::after{width:100%}
.menu-btn{display:none;width:36px;height:22px;position:relative;z-index:1001}
.menu-btn__line{position:absolute;left:0;width:100%;height:1px;background:var(--c-ink);transition:all 0.4s var(--ease)}
.menu-btn__line:nth-child(1){top:0}.menu-btn__line:nth-child(2){top:50%;transform:translateY(-50%)}.menu-btn__line:nth-child(3){bottom:0}
.menu-btn.active .menu-btn__line:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.menu-btn.active .menu-btn__line:nth-child(2){opacity:0;transform:translateX(-10px)}
.menu-btn.active .menu-btn__line:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;background:var(--c-bg);z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.5s var(--ease)}
.mobile-menu.active{opacity:1;visibility:visible}
.mobile-menu__nav{display:flex;flex-direction:column;align-items:center;gap:var(--s-md)}
.mobile-menu__link{font-family:var(--f-display);font-size:clamp(2.8rem,10vw,5.5rem);text-transform:uppercase;color:var(--c-ink);opacity:0;transform:translateY(24px)}
.mobile-menu.active .mobile-menu__link{opacity:1;transform:translateY(0);transition:all 0.5s var(--ease)}
.mobile-menu.active .mobile-menu__link:nth-child(1){transition-delay:0.08s}.mobile-menu.active .mobile-menu__link:nth-child(2){transition-delay:0.14s}.mobile-menu.active .mobile-menu__link:nth-child(3){transition-delay:0.2s}.mobile-menu.active .mobile-menu__link:nth-child(4){transition-delay:0.26s}
.mobile-menu__link:hover{color:var(--c-muted)}

/* === RUSSELL CORE HERO - marquee 3 rows + centered portrait === */
.rm-hero{position:relative;min-height:92vh;background:var(--c-bg);overflow:hidden;padding:92px 0 2.6rem;display:flex;flex-direction:column;justify-content:center}
.rm-marquee{display:flex;flex-direction:column;gap:0.35rem}
.rm-marquee__row{overflow:hidden;white-space:nowrap;border-top:1px solid transparent}
.rm-marquee__row:first-child{margin-top:0.6rem}
.rm-marquee__track{display:inline-flex;align-items:center;gap:1.4rem;animation:rmMarquee 100s linear infinite;will-change:transform;width:max-content;min-width:200%}
.rm-marquee__track--reverse{animation:rmMarqueeReverse 100s linear infinite}
.rm-marquee__row span{font-family:var(--f-display);font-size:clamp(2.9rem,9vw,7.3rem);line-height:0.9;text-transform:uppercase;letter-spacing:-0.03em;color:var(--c-ink);flex-shrink:0}
.rm-marquee__row--alt span{color:transparent;-webkit-text-stroke:1.15px var(--c-ink);opacity:0.92}
.rm-marquee__row--alt span:nth-child(even){-webkit-text-stroke:0;color:var(--c-ink);opacity:0.18;font-size:1.1rem}
@keyframes rmMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes rmMarqueeReverse{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.rm-portrait{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);width:min(26vw,350px);height:min(68vh,525px);z-index:2;box-shadow:0 22px 60px rgba(0,0,0,0.12);background:var(--c-line);cursor:pointer}
.rm-portrait img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(0) saturate(0.96);transition:transform 0.7s var(--ease);will-change:transform}
.rm-portrait:hover img{transform:scale(1.04) rotate(-1.6deg)}
@media(hover:none){.rm-portrait:hover img{transform:none}}
.rm-hero__meta{position:absolute;bottom:1.2rem;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-muted)}
.rm-hero__meta span:nth-child(3){min-width:68px;text-align:center}

/* Russell sections - consistent heading->paragraph rhythm */
.rm-section{padding:clamp(4rem,7vw,6.5rem) var(--gutter);border-top:1px solid var(--c-line);background:var(--c-bg)}
.rm-label{font-family:var(--f-mono);font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--c-muted);margin-bottom:1.6rem;display:block}
.rm-h2{font-family:var(--f-display);font-size:clamp(1.9rem,4.5vw,3.75rem);line-height:0.92;letter-spacing:-0.02em;text-transform:uppercase;margin-bottom:1.2rem}
.rm-h2--center{text-align:center;margin-bottom:0.6rem}
.rm-h2 + .rm-about__cols{margin-top:1.8rem}
.rm-hint{font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-muted);text-align:center;margin:0.8rem 0 2.8rem}
.rm-about__cols{display:grid;grid-template-columns:1fr 1fr;gap:2.8rem;max-width:900px;margin-top:0.4rem}
.rm-about__cols p{color:var(--c-muted);line-height:1.85;font-size:0.97rem}
.rm-about__cols p + p{margin-top:0.2rem}
.rm-featured{max-width:760px;margin:0 auto}
.rm-project{padding:3rem 0 2.6rem;border-top:1px solid var(--c-line)}
.rm-project:first-of-type{margin-top:0.6rem}
.rm-project__meta{display:flex;justify-content:space-between;gap:0.8rem;font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-muted);margin-bottom:0.85rem}
.rm-project__title{font-family:var(--f-display);font-size:clamp(1.45rem,3vw,2.45rem);line-height:0.92;letter-spacing:-0.02em;text-transform:uppercase;margin-bottom:1rem}
/* MEDIA: FULL, NO CROP - no white letterbox, just reduce if too big */
.rm-project__media{display:block;overflow:hidden;background:transparent;border:none;aspect-ratio:auto;margin-bottom:1.1rem}
.rm-project__media img{width:100%;height:auto;max-width:100%;display:block;object-fit:unset;transition:transform 0.85s var(--ease)}
.rm-project__media:hover img{transform:scale(1.01)}
.rm-project__desc{margin:0 0 0.9rem;color:var(--c-muted);max-width:62ch;line-height:1.8;font-size:0.95rem}
.rm-project__link{font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;border-bottom:1px solid var(--c-ink);padding-bottom:3px;display:inline-block;margin-top:0.2rem}
.rm-more{text-align:center;margin-top:2.2rem}
.rm-quote{padding:clamp(4rem,7vw,6.5rem) var(--gutter);border-top:1px solid var(--c-line);max-width:860px;margin:0 auto;text-align:center}
.rm-quote__text{color:var(--c-muted);font-size:1.08rem;line-height:1.85;text-align:center;max-width:72ch;margin:0 auto}
.rm-quote__label{font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--c-muted);margin-top:2rem}
.rm-services{padding:clamp(2rem,5vw,3.5rem) var(--gutter) clamp(3rem,6vw,5rem);border-top:1px solid var(--c-line);max-width:900px;margin:0 auto}
.rm-services .rm-label{margin-bottom:2rem}
.rm-svc{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem;padding:1.7rem 0;border-bottom:1px solid var(--c-line);text-align:left;cursor:pointer}
.rm-svc__title{font-family:var(--f-display);font-size:clamp(1.2rem,2.4vw,1.95rem);line-height:0.95;letter-spacing:-0.02em;text-transform:uppercase}
.rm-svc__badge{font-family:var(--f-mono);font-size:0.60rem;letter-spacing:0.11em;text-transform:uppercase;color:var(--c-muted);margin-left:0.45rem;vertical-align:middle}
.rm-svc__tags{font-family:var(--f-mono);font-size:0.60rem;letter-spacing:0.09em;text-transform:uppercase;color:var(--c-muted);margin-top:0.3rem}
.rm-svc__panel{max-height:0;overflow:hidden;transition:max-height 0.45s var(--ease), padding 0.35s var(--ease);color:var(--c-muted);line-height:1.8}
.rm-svc__panel.is-open{max-height:240px;padding:1rem 0 1.4rem}
.rm-svc__panel p{font-size:0.95rem}
.rm-services__footnote{margin-top:2.6rem;color:var(--c-muted);line-height:1.8;max-width:70ch;font-size:0.95rem}
.rm-footer{background:var(--c-ink);color:var(--c-paper);padding:clamp(3rem,6vw,5rem) var(--gutter) 1.6rem;text-align:center}
.rm-footer__top{font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,252,248,0.75)}
.rm-footer__big{font-family:var(--f-display);font-size:clamp(2.6rem,9vw,6.8rem);line-height:0.88;letter-spacing:-0.03em;text-transform:uppercase;margin:1rem 0;display:block;text-decoration:none;color:var(--c-paper);transition:opacity 0.3s ease}
.rm-footer__big:hover{opacity:0.85}
.rm-footer__links{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(255,252,248,0.12);border-bottom:1px solid rgba(255,252,248,0.12);padding:1rem 0;margin:1.4rem 0;font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.08em}
.rm-footer__links a{color:rgba(255,252,248,0.9)}
.rm-footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.08em;color:rgba(255,252,248,0.75)}
.rm-footer__bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.rm-about__cols{grid-template-columns:1fr;gap:1.4rem}.rm-about__cols p + p{margin-top:0}.rm-portrait{width:min(62vw,320px);height:46vh}.rm-marquee__row span{font-size:clamp(2.4rem,12vw,5.2rem)}.rm-project{padding:2.2rem 0 2rem}.rm-services{padding-left:var(--gutter);padding-right:var(--gutter)}}
@media(max-width:768px){
  .work-split{flex-direction:column}
  .work-list{width:100%;max-width:none;min-width:0;height:auto;position:static;overflow:visible;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0.6rem;padding:0.9rem var(--gutter);border-right:none;border-bottom:1px solid var(--c-line);scrollbar-width:none}
  .work-list::-webkit-scrollbar{display:none}
  .work-list__item{flex:0 0 auto;white-space:nowrap;border-bottom:none;border-right:1px solid var(--c-line);padding:0.6rem 1rem 0.6rem 0.9rem}
  .work-preview{width:100%;min-height:56vh;padding:1.2rem var(--gutter)}
  .work-preview__img{max-height:62vh}
}

/* 6. HERO - russell-like: giant type behind portrait */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:0 var(--gutter) clamp(2rem,5vw,4rem);overflow:hidden;background:var(--c-bg)}
.hero__bg{position:absolute;inset:0 0 0 0;z-index:0;display:flex;justify-content:flex-end;align-items:center;padding-right:6vw;padding-top:8vh}
.hero__bg img{width:min(38vw,520px);height:min(78vh,720px);object-fit:cover;object-position:top center;filter:saturate(0.95) contrast(1.02);box-shadow:0 30px 80px rgba(0,0,0,0.12)}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(to top, var(--c-bg) 8%, transparent 55%);z-index:1}
.hero__content{position:relative;z-index:2;width:100%;padding-top:14vh}
.hero__eyebrow{display:flex;gap:1.5rem;align-items:center;font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--c-muted);margin-bottom:1rem}
.hero__eyebrow-dot{width:6px;height:6px;background:#22C55E;border-radius:50%;display:inline-block;animation:pulseDot 2s infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.85)}}
.hero__title{position:relative;line-height:0.82}
.hero__title-line{display:block;overflow:hidden}
.hero__title-line span{display:block;transform:translateY(105%)}
.hero__title-line--outline{color:transparent;-webkit-text-stroke:1.2px var(--c-ink);opacity:0.9}
.hero__accent{color:var(--c-ink)}
.hero__sub{max-width:560px;margin-top:1.6rem;font-size:var(--fs-body);color:var(--c-muted);line-height:1.7}
.hero__sub strong{color:var(--c-ink);font-weight:500}
.hero__meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--c-line);gap:1rem}
.hero__services{display:flex;flex-wrap:wrap;gap:1.2rem}
.hero__service{font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--c-muted)}
.hero__service::before{content:'-';margin-right:0.45rem;color:var(--c-ink);opacity:0.4}
.hero__scroll{display:flex;align-items:center;gap:0.7rem;font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-muted)}
.hero__scroll-line{width:1px;height:36px;background:var(--c-ink);opacity:0.18;animation:scrollPulse 1.8s ease-in-out infinite;transform-origin:top}
@keyframes scrollPulse{0%,100%{opacity:1;transform:scaleY(1)}50%{opacity:0.45;transform:scaleY(0.55)}}
.hero__availability{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;background:var(--c-paper);border:1px solid var(--c-line);padding:0.5rem 0.8rem;border-radius:999px}
.hero__availability::before{content:'';width:6px;height:6px;background:#22C55E;border-radius:50%;box-shadow:0 0 0 4px rgba(34,197,94,0.15)}

/* 7. MANIFESTO - generous breathing room */
.manifesto{padding:clamp(4rem,8vw,8.5rem) var(--gutter);display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.8rem}
.manifesto .t-small{margin-top:0.6rem;line-height:1.9}
.manifesto__kicker{font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--c-muted)}
.manifesto__text{max-width:880px;font-family:var(--f-display);font-size:clamp(1.6rem,3.6vw,3rem);line-height:0.95;text-transform:uppercase;letter-spacing:-0.02em;color:var(--c-muted-2)}
.manifesto__text em{font-style:normal;color:var(--c-ink)}

/* 8. WORK RAIL - horizontal pinned (russell featured work) */
.work{padding:clamp(3.5rem,7vw,6rem) 0 0;overflow:clip}
.work__header{display:flex;justify-content:space-between;align-items:flex-end;padding:0 var(--gutter);margin-bottom:2.2rem;gap:1.5rem}
.work__count{font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-muted)}
.work__hint{font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-muted);display:flex;align-items:center;gap:0.5rem}
.work__hint::after{content:'->';color:var(--c-ink);opacity:0.45}
.work-rail{position:relative}
.work-rail__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.work-rail__track{display:flex;gap:1.25rem;padding:0 var(--gutter);will-change:transform}
.work-rail__card{position:relative;flex:0 0 56vw;max-width:680px;aspect-ratio:1.35/1;overflow:hidden;background:var(--c-line);cursor:pointer;border:1px solid var(--c-line)}
.work-rail__card img{width:100%;height:100%;object-fit:cover;transition:transform 0.9s var(--ease), filter 0.5s ease}
.work-rail__card:hover img{transform:scale(1.06)}
.work-rail__overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(14,14,14,0.72) 0%, transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.4rem;color:#FFFCF8}
.work-rail__meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;opacity:0.9;margin-bottom:0.35rem}
.work-rail__cat{color:var(--c-ink);background:var(--c-paper);padding:0.22rem 0.5rem;border-radius:999px}
.work-rail__title{font-family:var(--f-display);font-size:clamp(1.1rem,2vw,1.9rem);line-height:0.95;text-transform:uppercase}
.work-rail__desc{font-family:var(--f-body);font-size:0.78rem;opacity:0.85;margin-top:0.3rem;line-height:1.5;max-width:92%}
/* fallback grid for no-js / mobile */
.work__grid{display:none}
.work__item{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:1.3/1;background:var(--c-line)}
.work__item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.work__item:hover img{transform:scale(1.06)}
.work__item-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(14,14,14,0.68), transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;opacity:0;transition:opacity 0.4s var(--ease);color:#FFFCF8}
.work__item:hover .work__item-overlay{opacity:1}
.work__item-category{font-family:var(--f-mono);font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-paper);opacity:0.85}
.work__item-title{font-family:var(--f-display);font-size:clamp(1.1rem,1.8vw,1.6rem);text-transform:uppercase;margin-top:0.2rem}
.work__placeholder{width:100%;height:100%;background:var(--c-line);display:flex;align-items:center;justify-content:center}
.work__placeholder svg{width:58%;height:58%;opacity:0.25}

/* 9. SERVICES ACCORDION (russell) */
.services{padding:clamp(3.5rem,7vw,6rem) var(--gutter);background:var(--c-paper);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.services__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.8rem;margin-bottom:3rem;flex-wrap:wrap}
.services__grid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--c-line)}
.service-accordion{border-bottom:1px solid var(--c-line)}
.service-accordion__trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.25rem;padding:1.7rem 0;text-align:left;cursor:pointer}
.service-accordion__left{display:flex;align-items:center;gap:1.2rem}
.service-accordion__num{font-family:var(--f-mono);font-size:0.68rem;letter-spacing:0.12em;color:var(--c-muted)}
.service-accordion__title{font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.9rem);text-transform:uppercase;line-height:0.95}
.service-accordion__icon{width:36px;height:36px;border:1px solid var(--c-line);border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:all 0.35s var(--ease);font-size:0.9rem}
.service-accordion.active .service-accordion__icon{transform:rotate(45deg);background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
.service-accordion__panel{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease), padding 0.4s var(--ease);padding:0}
.service-accordion.active .service-accordion__panel{max-height:520px;padding:0 0 1.5rem 2.9rem}
.service-accordion__desc{color:var(--c-muted);max-width:720px;line-height:1.7;margin-bottom:0.9rem}
.service-accordion__list{display:flex;flex-wrap:wrap;gap:0.5rem}
.service-accordion__tag{font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;background:var(--c-bg);border:1px solid var(--c-line);padding:0.4rem 0.6rem;border-radius:999px}
.service{display:none} /* hide old 4-col cards */

/* 10. QUOTE BAND */
.quote-band{padding:clamp(3.5rem,7vw,6rem) var(--gutter);border-top:1px solid var(--c-line);background:var(--c-bg);text-align:left}
.quote-band__inner{max-width:980px}
.quote-band__text{font-family:var(--f-display);font-size:clamp(1.4rem,3vw,2.4rem);line-height:0.98;text-transform:uppercase;letter-spacing:-0.02em;color:var(--c-ink)}
.quote-band__text span{color:var(--c-muted-2)}
.quote-band__author{margin-top:1rem;font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-muted)}

/* 11. CTA - last light-dark bridge before footer */
.cta{padding:clamp(4.5rem,9vw,8.5rem) var(--gutter);text-align:center;background:var(--c-ink);color:var(--c-paper);position:relative;overflow:hidden}
.cta .t-caption{color:rgba(255,252,248,0.62)}
.cta__title{max-width:860px;margin:0 auto;line-height:0.9;color:var(--c-paper)}
.cta__link{display:inline-flex;align-items:center;gap:1rem;margin-top:2rem;font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-paper);border:1px solid rgba(255,255,255,0.18);padding:1rem 1.6rem;border-radius:999px;transition:all 0.35s var(--ease)}
.cta__link:hover{background:var(--c-paper);color:var(--c-ink)}
.cta__link-arrow{transition:transform 0.3s var(--ease)}
.cta__link:hover .cta__link-arrow{transform:translate(4px,-4px)}

/* 12. FOOTER - ONLY dark section (CTA + footer are dark) */
.footer{padding:clamp(2.5rem,5vw,4rem) var(--gutter);border-top:1px solid rgba(255,252,248,0.08);background:var(--c-ink);color:var(--c-paper)}
.footer .t-label{color:rgba(255,252,248,0.52)}
.footer .t-small{color:rgba(255,252,248,0.68)}
.footer .footer__nav-link{color:rgba(255,252,248,0.68)}
.footer .footer__nav-link:hover{color:var(--c-paper)}
.footer .footer__social-link{border-color:rgba(255,252,248,0.12);color:rgba(255,252,248,0.68)}
.footer .footer__social-link:hover{border-color:var(--c-paper);color:var(--c-paper)}
.footer .footer__copy{color:rgba(255,252,248,0.52)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2rem}
.footer__brand{max-width:320px}
.footer__nav{display:flex;flex-direction:column;gap:0.45rem}
.footer__nav-link{font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-muted);transition:color 0.3s ease}
.footer__nav-link:hover{color:var(--c-ink)}
.footer__social{display:flex;gap:0.8rem;margin-top:0.8rem}
.footer__social-link{width:36px;height:36px;border:1px solid var(--c-line);border-radius:50%;display:grid;place-items:center;color:var(--c-muted);transition:all 0.3s ease}
.footer__social-link:hover{border-color:var(--c-ink);color:var(--c-ink)}
.footer__bottom{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--c-line);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer__copy{font-family:var(--f-mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--c-muted)}

/* 13. INNER PAGES */
.page-hero{text-align:center;padding:calc(72px + 5rem) var(--gutter) clamp(3.5rem,7vw,6rem);background:var(--c-bg);border-bottom:1px solid var(--c-line)}
.page-hero .t-h1{margin-top:1rem}
.page-hero__label{margin-bottom:0.6rem}
.about-content{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.about-content .t-h3{margin-bottom:var(--s-md)}
.about-content .t-body + .t-body{margin-top:var(--s-md)}
.section--lg .t-body + .t-body{margin-top:var(--s-sm)}
.section--lg .t-h2 + .t-body{margin-top:var(--s-md)}
.section--lg .t-caption + .t-h2{margin-top:var(--s-sm)}
.about-image{aspect-ratio:4/5;overflow:hidden;background:var(--c-line);border:1px solid var(--c-line)}
.about-image img{width:100%;height:100%;object-fit:cover;filter:saturate(0.98)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,2.5vw,2rem);margin-top:var(--s-lg)}
.values-grid .t-small{margin-top:var(--s-xs)}
.value-card__number{margin-bottom:var(--s-xs);display:block}
.value-card .t-h4{margin-top:var(--s-xs);margin-bottom:var(--s-xs)}
.value-card{padding:2.2rem 1.6rem;border:1px solid var(--c-line);background:var(--c-paper);transition:border-color 0.3s ease}
.value-card:hover{border-color:var(--c-ink)}
.value-card__number{font-family:var(--f-display);font-size:2rem;color:var(--c-ink)}
.service-block{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;padding:3rem 0;border-bottom:1px solid var(--c-line)}
.service-block:nth-child(even) .service-block__content{order:2}
.service-block__image{display:block;overflow:hidden;background:transparent;border:none;aspect-ratio:auto}
.service-block__image img{width:100%;height:auto;display:block}
.service-block__features{display:flex;flex-direction:column;gap:0.45rem;margin-top:1rem}
.service-block__feature{display:flex;align-items:center;gap:0.6rem;font-size:0.82rem;color:var(--c-muted)}
.service-block__feature svg{color:var(--c-ink);opacity:0.55;flex-shrink:0}
.work-filters{display:flex;justify-content:center;gap:0.7rem;margin-bottom:2.6rem;flex-wrap:wrap}
.work-filter{font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.55rem 1rem;border:1px solid var(--c-line);color:var(--c-muted);border-radius:999px;transition:all 0.3s ease;background:var(--c-paper)}
.work-filter:hover,.work-filter.active{border-color:var(--c-ink);color:var(--c-paper);background:var(--c-ink)}
.work-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2vw,1.75rem)}
.work-gallery__item{position:relative;overflow:hidden;cursor:pointer;background:transparent;border:none;display:block;aspect-ratio:auto}
.work-gallery__item img{width:100%;height:auto;display:block;transition:transform 0.85s var(--ease)}
.work-gallery__item:hover img{transform:scale(1.01)}
.work-gallery__overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(14,14,14,0.72), transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;opacity:0;transition:opacity 0.35s ease;color:#FFFCF8}
.work-gallery__item:hover .work-gallery__overlay{opacity:1}
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:3.5rem}
.contact-form{display:flex;flex-direction:column;gap:1.2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:0.4rem}
.form-group label{font-family:var(--f-mono);font-size:0.64rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--c-muted)}
.form-group input,.form-group textarea{background:var(--c-paper);border:1px solid var(--c-line);padding:0.9rem 0.9rem;font-family:var(--f-body);font-size:0.95rem;color:var(--c-ink);border-radius:6px;transition:border-color 0.3s ease}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--c-ink)}
.form-group textarea{min-height:120px;resize:vertical}
.contact-info{display:flex;flex-direction:column;gap:2rem}
.contact-info__item{display:flex;flex-direction:column;gap:0.4rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.13em;text-transform:uppercase;padding:1rem 1.6rem;border:1px solid var(--c-ink);color:var(--c-paper);background:var(--c-ink);border-radius:999px;transition:all 0.35s var(--ease)}
.btn:hover{background:transparent;color:var(--c-ink)}

/* 14. REVEAL */
.reveal{opacity:0;transform:translateY(22px)}
.reveal-left{opacity:0;transform:translateX(-18px)}
.reveal-right{opacity:0;transform:translateX(18px)}
.reveal-scale{opacity:0;transform:scale(0.98)}

/* === Accessibility (WCAG 2.2 AA) === */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;background:var(--c-ink);color:var(--c-paper);padding:0.7rem 1rem;border-radius:999px;font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;z-index:3000}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto}
:focus-visible{outline:2px solid var(--c-ink);outline-offset:3px}
a:focus-visible, button:focus-visible{outline:2px solid var(--c-ink);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *:not(.rm-marquee__track):not(.rm-marquee__track--reverse),*:not(.rm-marquee__track):not(.rm-marquee__track--reverse)::before,*:not(.rm-marquee__track):not(.rm-marquee__track--reverse)::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
  html.lenis{height:auto}
  .lenis{transform:none !important}
}
/* Work split 20/80 + cursor */
.cursor-dot{position:fixed;top:0;left:0;width:14px;height:14px;background:#fff;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%) scale(1);transition:transform 0.16s var(--ease), opacity 0.2s ease;opacity:1;mix-blend-mode:difference}
.cursor-dot.is-hover{transform:translate(-50%,-50%) scale(2.2);opacity:0.92}
.cursor-dot.is-hidden{opacity:0}
@media(hover:none){.cursor-dot{display:none} *{cursor:auto !important}}
.work-split{display:flex;min-height:calc(100vh - 72px);margin-top:72px;border-top:1px solid var(--c-line)}
.work-list{width:20%;min-width:220px;max-width:320px;border-right:1px solid var(--c-line);padding:2rem 1.2rem 2rem var(--gutter);position:sticky;top:72px;height:calc(100vh - 72px);overflow-y:auto;background:var(--c-bg)}
.work-list__item{position:relative;display:block;width:100%;text-align:left;padding:1rem 0 1rem 1.2rem;font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;line-height:1.35;color:var(--c-muted);border:none;border-bottom:1px solid transparent;transition:color 0.28s var(--ease), opacity 0.28s, border-color 0.28s}
.work-list__item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--c-ink);opacity:0;transition:opacity 0.28s var(--ease)}
.work-list__item.is-active{color:var(--c-ink)}
.work-list__item.is-active::before{opacity:1}
.work-list__item:hover{color:var(--c-ink)}
.work-list__item small{display:block;font-size:0.58rem;letter-spacing:0.04em;color:var(--c-muted-2);margin-top:0.15rem}
.work-preview{flex:1;width:80%;min-height:calc(100vh - 72px);display:grid;place-items:center;padding:2rem var(--gutter);background:var(--c-bg);overflow:hidden;position:relative}
.work-preview__img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;display:block;opacity:0;transform:scale(0.98);transition:opacity 0.45s var(--ease), transform 0.45s var(--ease);will-change:opacity, transform}
.work-preview__img.is-visible{opacity:1;transform:scale(1)}
.work-preview__placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--c-muted);font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase}

/* Lightbox — fullscreen image popup */
.lightbox{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:rgba(14,14,14,0.92);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity 0.3s var(--ease), visibility 0.3s;cursor:zoom-out}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__img{max-width:min(92vw,1400px);max-height:92vh;width:auto;height:auto;object-fit:contain;display:block;box-shadow:0 20px 80px rgba(0,0,0,0.5);transform:scale(0.97);transition:transform 0.35s var(--ease)}
.lightbox.is-open .lightbox__img{transform:scale(1)}
.lightbox__close{position:fixed;top:1.2rem;right:1.2rem;width:44px;height:44px;display:grid;place-items:center;background:rgba(255,252,248,0.12);border:1px solid rgba(255,252,248,0.18);border-radius:50%;color:var(--c-paper);font-size:1.2rem;cursor:pointer;transition:background 0.2s}
.lightbox__close:hover{background:var(--c-paper);color:var(--c-ink)}
.work-gallery__item img,.service-block__image img,.about-image img,.rm-portrait img,.rm-project__media img{cursor:zoom-in}

/* Ensure minimum tap target 44px */
.header__link, .work-filter, .service-accordion__trigger, .btn, .footer__nav-link{ min-height:44px; display:inline-flex; align-items:center }

/* 15. RESPONSIVE */
@media(max-width:1024px){
  .header__nav{display:none}.menu-btn{display:block}
  .hero__bg{padding-right:0;justify-content:center}
  .hero__bg img{width:min(62vw,420px);height:58vh}
  .work-rail__sticky{height:auto;position:relative}
  .work-rail__track{transform:none !important;flex-direction:column}
  .work-rail__card{flex:0 0 auto;max-width:100%;width:100%}
  .services__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .about-content,.service-block,.contact-grid{grid-template-columns:1fr}
  .service-block:nth-child(even) .service-block__content{order:0}
  .values-grid{grid-template-columns:1fr}
  .work-gallery{grid-template-columns:repeat(2,1fr)}
  .work__grid{display:grid;grid-template-columns:1fr;gap:1rem;padding:0 var(--gutter)}
  .work-rail{display:none}
}
@media(max-width:640px){
  .hero__meta{flex-direction:column;align-items:flex-start}
  .work-gallery{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;text-align:center}
}