@font-face{
  font-family:"Bebas Neue";
  src:url("/fonts/bebas-neue/bebas-neue-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Vremena Grotesk";
  src:url("/fonts/vremena/vremenagroteskbook-webfont.woff2") format("woff2"),
      url("/fonts/vremena/vremenagroteskbook-webfont.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Vremena Grotesk";
  src:url("/fonts/vremena/vremenagroteskmedium-webfont.woff2") format("woff2"),
      url("/fonts/vremena/vremenagroteskmedium-webfont.woff") format("woff");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Vremena Grotesk";
  src:url("/fonts/vremena/vremenagrotesk-webfont.woff2") format("woff2"),
      url("/fonts/vremena/vremenagrotesk-webfont.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Vremena Grotesk";
  src:url("/fonts/vremena/vremenagroteskbold-webfont.woff2") format("woff2"),
      url("/fonts/vremena/vremenagroteskbold-webfont.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"EB Garamond";
  src:url("/fonts/eb-garamond/eb-garamond-italic.ttf") format("truetype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

@font-face{
  font-family:"EB Garamond";
  src:url("/fonts/eb-garamond/eb-garamond-semibold-italic.ttf") format("truetype");
  font-weight:600;
  font-style:italic;
  font-display:swap;
}

:root{
  --racing-green:#003D1F;
  --brass:#D4A574;
  --paper:#F2EDE4;
  --ink:#000000;
  --white:rgb(248, 246, 243);
  --rule-strong:rgba(44, 42, 36, 0.30);
  --rule-soft:rgba(44, 42, 36, 0.15);
  --hairline:var(--rule-strong);
  --hero-gutter-left:8vw;
  --hero-max-width:75vw;

  --footer-gap-tight:24px;
  --footer-gap-standard:48px;
  --footer-gap-generous:80px;

  /* Footer + BackToTop tokens — values from the implementation brief.
     `--green` aliases `--racing-green` (same hex) so the footer code can
     use the brief's token names without disturbing the rest of the site. */
  --green:var(--racing-green);
  --paper-soft:#ebe5d8;
  --green-soft:#a8b5ad;
  --green-line:rgba(244, 239, 230, 0.2);
  --bronze:#8b6f3d;
  --ink-mute:#6b7a72;
  --ink-line:rgba(0, 61, 31, 0.15);
  --ease-veeral:cubic-bezier(0.65, 0, 0.35, 1);

  /* Single source of truth for eyebrow text sizing across the site.
     12px on mobile, scales to 14px on 27"+ displays. */
  --eyebrow-size:clamp(12px, 0.85vw, 14px);

  --font-wordmark:"Bebas Neue",sans-serif;
  --font-serif:"EB Garamond","Adobe Caslon",Georgia,serif;
  --font-ui:"Vremena Grotesk",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-narrative:"Vremena Grotesk",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --page-margin:clamp(20px,4vw,120px);
  --media-width:1600px;
  --text-width:clamp(700px,46vw,1100px);
  --supporting-text-width:clamp(700px,46vw,1100px);
  --section-pad:96px;
  --section-pad-large:144px;
  --type-body-line:1.55;
  --type-body-weight:500;
  --type-heading-weight:600;
  --type-h1-line:.94;
  --type-h1-tracking:-.02em;
  --type-body-lg-line:var(--type-body-line);
  --type-body-lg-tracking:0;
  --type-nav-tracking:.22em;

  --text-body: clamp(21px, 1.5vw, 34px);
  --text-sm: clamp(22px, 1.8vw, 26px);
  --text-md: clamp(28px, 2.4vw, 56px);
  --text-lg: clamp(36px, 3.2vw, 80px);
  --text-hero: clamp(72px, 6.5vw, 300px);
  --text-page-title: clamp(56px, 6vw, 95px);
  --text-wordmark: clamp(28px, 3.2vw, 48px);
  --text-ui-sm: clamp(12px, 0.8vw, 14px);
  --text-ui-md: clamp(14px, 1vw, 16px);

  --type-ui-track-02:.02em;
  --type-ui-track-03:.03em;
  --type-ui-track-22:.22em;
  --type-ui-track-30:.3em;
  --type-ui-track-32:.32em;
  --type-ui-track-35:.35em;
  --type-ui-track-38:.38em;

  --side-padding:var(--page-margin);
  --header-pad-y:18px;

  --logo-scale:clamp(4rem,14vw,22rem);

  --space-4:4px;
  --space-6:6px;
  --space-10:10px;
  --space-12:12px;
  --space-14:14px;
  --space-16:16px;
  --space-18:18px;
  --space-20:20px;
  --space-22:22px;
  --space-24:24px;
  --space-27:27px;
  --space-40:40px;
  --space-44:44px;
  --space-56:56px;
  --space-60:60px;
  --space-68:68px;
  --space-72:72px;
  --space-90:90px;
  --space-100:100px;
  --space-110:110px;
  --space-120:120px;
  --space-130:130px;
  --space-140:140px;
  --space-150:150px;
  --space-220:220px;
  --space-225:225px;

  --page-copy-width:var(--text-width);
  --page-title-top:var(--section-pad-large);
  --page-title-bottom:var(--space-24);
  --page-content-top:var(--section-pad);
  --page-content-bottom:var(--section-pad);
  --page-paragraph-gap:16px;
  
  --mv-footer-offset:523px;
  --mv-footer-logo-offset:0px;
  --mv-footer-logo-scale:1.08;
  --footer-wordmark-offset:285px;
  --footer-wordmark-size:260px;

  --reveal-duration:0.85s;
  --reveal-distance:24px;

  --marquee-gap:clamp(44px,6vw,80px);
  --space-between-projects:clamp(80px,8vw,130px);
  --marquee-text:clamp(14px,1.25vw,18px);
  --hero-overlay-opacity:0;
}

*{padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html{
  overflow-x:hidden;
  scrollbar-width:none;
}
html::-webkit-scrollbar{ display:none; }

body{
  margin:0;
  /* Extra height so the fixed footer-lower can be fully revealed as the page
     scrolls past. Body background matches footer-lower for a seamless reveal. */
  padding-bottom:var(--footer-lower-height, 349px);
  background:var(--racing-green);
  /* Homepage section bg variable — drives the green→cream animation across
     works-section, reflections, bridge-block, and footer-upper. Flipped to
     paper when body[data-homepage-bg="paper"] (set at 35% scroll progress). */
  --home-section-bg:var(--racing-green);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--text-body);
  line-height:var(--type-body-line);
  font-weight:var(--type-body-weight);
  -webkit-font-smoothing:antialiased;
  transition: background-color 0.5s ease, color 0.5s ease;
}

h1{font-size:var(--text-hero);}
h2{font-size:var(--text-lg);}
h3{font-size:var(--text-md);}

h1,h2,h3,h4,h5,h6,
.primary-nav a,
.site-button{
  font-weight:var(--type-heading-weight);
}

b,strong{
  font-weight:700;
}

body:not([data-page="home"]){
  background:var(--paper);
}

body[data-page="practice"],
body[data-page="work"],
body[data-page="work-film"],
body[data-page="work-hybrid"],
body[data-page="work-photography"],
body[data-page="reflections"],
body[data-page="contact"]{
  background:var(--paper);
  color:var(--ink);
}

a{color:inherit;text-decoration:none;}
a:visited{color:inherit;}
a:hover{opacity:.85;}
p + p{margin-top:0;}

/* Ensure there is always scrollable height in main */
main{min-height:100vh;}

/* During Barba sync transitions two containers coexist — clip the incoming one
   immediately so the dark green body background never flashes through */
[data-barba="container"] ~ [data-barba="container"] {
  clip-path: inset(100% 0 0 0);
}

body.is-page-transitioning{
  transition:none;
}

body.is-page-transitioning .site-header,
body.is-page-transitioning .site-header .wordmark,
body.is-page-transitioning .primary-nav a{
  transition:none !important;
}

.page-transition-shell{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:var(--racing-green);
  z-index:9000;
  pointer-events:none;
}

.page-transition-panel{
  position:absolute;
  inset:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.page-transition-panel--current *,
.page-transition-panel--current *::before,
.page-transition-panel--current *::after{
  transition:none !important;
  animation:none !important;
}

/* Sit above the fixed footer-lower so page content covers the green band
   while it's in view. Footer-lower is exposed only via body's padding-bottom
   once the page has scrolled past. Opaque background per data-theme keeps
   the fixed green band hidden through the page surface. */
main.page-shell{
  position:relative;
  z-index:1;
  background:var(--paper);
}
main.page-shell[data-theme="green"],
main.page-shell[data-theme="hero"]{
  background:var(--racing-green);
}

/* ---- Homepage green→cream animation ----
   Scroll-linked: --home-bg-progress (set in JS, 0→1) drives a continuous
   colour interpolation across four sections + footer-upper + back-to-top.
   No CSS transitions — scroll itself is the timeline, so the colour change
   tracks the user's scroll velocity instead of firing as a single fade. */
/* Scroll-linked progress driver lives on :root so the JS-applied value on
   <html> propagates everywhere without being shadowed by a body-level
   default. The derived colour vars are scoped under body[data-page="home"]
   so non-home pages don't pay the calc() cost. */
:root{
  --home-bg-progress:0;
}
body[data-page="home"]{
  --home-bg-pct:calc(var(--home-bg-progress) * 100%);
  --home-section-bg:color-mix(in srgb, var(--racing-green), var(--paper) var(--home-bg-pct));
  --home-section-fg:color-mix(in srgb, var(--white), var(--ink) var(--home-bg-pct));
  --home-section-fg-mute:color-mix(in srgb, var(--green-soft), var(--ink-mute) var(--home-bg-pct));
  --home-section-line:color-mix(in srgb, var(--green-line), var(--ink-line) var(--home-bg-pct));
  --home-section-line-soft:color-mix(in srgb, rgba(248,246,243,0.15), rgba(20,22,26,0.2) var(--home-bg-pct));
}
body[data-page="home"] .works-section,
body[data-page="home"] .reflections,
body[data-page="home"] .bridge-block,
body[data-page="home"] .footer-upper,
body[data-page="home"] .back-to-top{
  background-color:var(--home-section-bg);
  transition:none;
}
body[data-page="home"] .footer-upper,
body[data-page="home"] .back-to-top{
  color:var(--home-section-fg);
  border-top-color:var(--home-section-line);
}
body[data-page="home"] .back-to-top__btn,
body[data-page="home"] .back-to-top__arrow,
body[data-page="home"] .footer-practice__copy,
body[data-page="home"] .footer-dispatch__heading,
body[data-page="home"] .footer-enquiry__heading,
body[data-page="home"] .footer-connect__list a,
body[data-page="home"] .footer-pages__list a,
body[data-page="home"] .footer-dispatch__input,
body[data-page="home"] .footer-dispatch__submit,
body[data-page="home"] .footer-enquiry__cta{
  color:var(--home-section-fg);
  transition:none;
}
body[data-page="home"] .footer-eyebrow{
  color:var(--home-section-fg-mute);
  transition:none;
}
body[data-page="home"] .footer-dispatch__input::placeholder{
  color:var(--home-section-fg-mute);
}
body[data-page="home"] .footer-dispatch__form{
  border-bottom-color:var(--home-section-fg);
  transition:none;
}
body[data-page="home"] .footer-enquiry__cta{
  border-top-color:var(--home-section-fg);
  border-bottom-color:var(--home-section-fg);
}

/* Practice stays green throughout. */
body[data-page="home"] .practice-block{
  background-color:var(--racing-green);
}

/* Body text inside the animated sections follows the scroll-linked
   foreground colour. Brass/bronze accents stay as-is via their own rules. */
body[data-page="home"] .home-sections .works-section,
body[data-page="home"] .home-sections .works-section .works-title,
body[data-page="home"] .home-sections .works-section .project-title,
body[data-page="home"] .home-sections .works-section .project-discipline,
body[data-page="home"] .home-sections .works-section .project-meta,
body[data-page="home"] .home-sections .works-section .project-link,
body[data-page="home"] .home-sections .reflections,
body[data-page="home"] .home-sections .reflections-title,
body[data-page="home"] .home-sections .reflection,
body[data-page="home"] .home-sections .reflection-title,
body[data-page="home"] .home-sections .reflection-fragment,
body[data-page="home"] .home-sections .reflection-meta,
body[data-page="home"] .home-sections .reflection-date,
body[data-page="home"] .home-sections .reflection-tag,
body[data-page="home"] .home-sections .reflection-more,
body[data-page="home"] .home-sections .bridge-block,
body[data-page="home"] .home-sections .bridge-block__statement,
body[data-page="home"] .home-sections .bridge-block__signature{
  color:var(--home-section-fg);
  transition:none;
}
/* Eyebrows in practice + bridge blocks follow the muted foreground tint. */
body[data-page="home"] .home-sections .practice-block__eyebrow,
body[data-page="home"] .home-sections .bridge-block__eyebrow{
  color:var(--home-section-fg-mute);
  transition:none;
}
/* Project tile divider hairline interpolates with the page colour. */
body[data-page="home"] .home-sections .works-section .project{
  border-bottom-color:var(--home-section-line-soft);
  transition:none;
}
/* Archive CTAs ("View all work →", "Read all reflections →") stay brass
   throughout — same accent colour as the bridge-block CTA. */
body[data-page="home"] .home-sections .works-archive-cta a,
body[data-page="home"] .home-sections .reflections-cta{
  color:var(--brass);
}
/* Rulers framing the archive CTA interpolate with the page colour. */
body[data-page="home"] .home-sections .works-archive-cta{
  border-top-color:var(--home-section-line-soft);
  border-bottom-color:var(--home-section-line-soft);
}
/* Reflections runs full width on the homepage. The "Read all reflections →"
   CTA stays anchored right but the ruler beneath it spans the full content
   row from left to right. Each reflection row is capped so the meta cluster
   (date · tag · read more) sits close to the title, not flung to the edge. */
body[data-page="home"] .home-sections .reflections-content{
  max-width:none;
  width:100%;
}
body[data-page="home"] .home-sections .reflection{
  max-width:720px;
}
body[data-page="home"] .home-sections .reflection-more{
  align-self:flex-end;
}
body[data-page="home"] .home-sections .reflections-footer{
  display:block;
  width:100%;
  max-width:720px;
  margin-top:clamp(60px, 7vw, 100px);
  padding-bottom:clamp(40px, 5vw, 64px);
  border-bottom:1px solid var(--home-section-line-soft);
  text-align:right;
}

.page-transition-panel .page-shell{
  min-height:100vh;
  margin-bottom:0;
}

.char-wrap{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
}

.mediaBlock{
  margin:0;
  position:relative;
}

.mediaFrame{
  position:relative;
  overflow:hidden;
  transform-origin:center center;
}

.mediaAsset{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform-origin:center center;
}


/* Header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  isolation:isolate;
  padding:var(--header-pad-y) var(--side-padding);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:none;
  background:transparent;
  color:var(--white);
  transition:opacity 0.22s ease;
  overflow:hidden;
}

.site-header.is-hero,
.site-header[data-theme="hero"]{
  background:transparent;
  color:var(--white);
}

.site-header.is-paper,
.site-header[data-theme="paper"]{
  background:transparent;
  color:var(--ink);
}

.site-header.is-green,
.site-header[data-theme="green"]{
  background:transparent;
  color:var(--white);
}

.wordmark{
  grid-column:2;
  justify-self:center;
  font-family:var(--font-wordmark);
  font-size:var(--text-hero);
  line-height:0.8;
  letter-spacing:0;
  text-transform:uppercase;
  display:flex;
  align-items:baseline;
  white-space:nowrap;
  text-decoration:none;
  color:inherit;
  transition:none;
}

.site-header .wordmark{
  font-size:clamp(35px, 3.2vw, 48px);
}


.site-header .wordmark,
.primary-nav a{
  color:inherit;
}

.v-pivot{
  display:inline-block;
  transform:skew(-8deg);
  font-style:italic;
  margin-left:0.14em;
  margin-right:0.17em;
}

.refined-r{display:inline-block;padding-left:0.05em;}

.primary-nav{
  grid-column:3;
  justify-self:end;
  display:flex;
  gap:24px;
  font-family:var(--font-ui);
  font-size:var(--text-ui-sm);
  letter-spacing:var(--type-nav-tracking);
  text-transform:uppercase;
}

.primary-nav > .primary-nav__social{
  display:none;
}

.primary-nav > .primary-nav__wordmark{
  display:none;
}

@media (max-width:1100px){
  .primary-nav > .primary-nav__social{
    display:flex;
  }
}

.menu-toggle,
.menu-backdrop{
  display:none;
}

.menu-toggle{
  grid-column:3;
  justify-self:end;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  color:inherit;
  font-family:var(--font-ui);
  font-size:var(--text-ui-sm);
  letter-spacing:var(--type-nav-tracking);
  text-transform:uppercase;
  font-weight:var(--type-heading-weight);
  cursor:pointer;
}

.menu-toggle__label{
  line-height:1;
}

.menu-toggle__icon{
  width:18px;
  height:14px;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
}

.menu-toggle__icon span{
  display:block;
  width:100%;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transform-origin:center;
  transition:transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}

.primary-nav a{
  font-weight:var(--type-heading-weight);
  opacity:1;
  display:inline-block;
  transition:color 0.35s ease,
             opacity 0.25s ease,
             transform 300ms var(--ease-veeral);
}
.primary-nav a:hover{
  transform:translateX(4px);
}

body.is-page-transitioning .site-header{
  pointer-events:none;
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a.is-current,
.primary-nav a[aria-current="page"]{
  opacity:1;
}

@media (max-width:1100px){
  body.is-menu-open{
    overflow:hidden;
  }

  .menu-toggle{
    display:inline-flex;
    position:relative;
    z-index:10003;
  }

  .menu-backdrop{
    display:block;
    position:fixed;
    inset:0;
    border:0;
    margin:0;
    padding:0;
    background:rgba(0, 0, 0, 0.35);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:none;
    z-index:10001;
  }

  .primary-nav{
    position:fixed;
    top:0;
    right:0;
    width:min(420px, 100vw);
    height:100vh;
    padding:var(--header-pad-y) var(--side-padding) 40px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:20px;
    background:transparent;
    color:#ffffff;
    transform:translateX(104%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:none;
    z-index:10002;
  }

  /* Menu items: fade-up + stagger when the panel opens. Uses a CSS
     animation (not a transition) so the keyframes always fire on each
     open, regardless of prior transform state. Mirrors the PageTextBlock
     reveal motion. */
  .primary-nav > *{
    opacity:0;
    transform:translateY(20px);
  }
  @keyframes nav-item-reveal{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .site-header[data-menu-open="true"] .primary-nav > *{
    animation: nav-item-reveal 700ms cubic-bezier(0.65, 0, 0.35, 1) both;
  }
  .site-header[data-menu-open="true"] .primary-nav > *:nth-child(1){ animation-delay: 120ms; }
  .site-header[data-menu-open="true"] .primary-nav > *:nth-child(2){ animation-delay: 180ms; }
  .site-header[data-menu-open="true"] .primary-nav > *:nth-child(3){ animation-delay: 240ms; }
  .site-header[data-menu-open="true"] .primary-nav > *:nth-child(4){ animation-delay: 300ms; }
  .site-header[data-menu-open="true"] .primary-nav > *:nth-child(5){ animation-delay: 360ms; }
  .site-header[data-menu-open="true"] .primary-nav > *:nth-child(6){ animation-delay: 420ms; }
  .site-header[data-menu-open="true"] .primary-nav > *:nth-child(n+7){ animation-delay: 480ms; }
  @media (prefers-reduced-motion: reduce){
    .primary-nav > *{ opacity:1; transform:none; }
    .site-header[data-menu-open="true"] .primary-nav > *{ animation:none; }
  }

  .site-header[data-menu-ready="true"] .menu-backdrop{
    transition:opacity 0.32s ease;
  }

  .site-header[data-menu-ready="true"] .primary-nav{
    transition:
      transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease;
  }
/*
  .primary-nav a{
    font-size:var(--text-ui-md);
    letter-spacing:0.03em;
    line-height:1.12;
    text-transform:none;
    font-weight:600;
  }
*/

.primary-nav a{
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 600;
}

.site-header .primary-nav .primary-nav__wordmark{
    display: inline-flex;
    font-size: clamp(28px, 6vw, 36px);
    font-weight: 400;
    margin-bottom: clamp(32px, 5vw, 56px);
  }

.primary-nav__social{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-top:24px;
}

.primary-nav__social a{
  font-family:var(--font-ui);
  font-size:var(--text-ui-sm, 13px);
  font-weight:600;
  letter-spacing:var(--type-ui-track-14, 0.14em);
  text-transform:uppercase;
  line-height:1.2;
  opacity:0.7;
}

.primary-nav__social a:hover,
.primary-nav__social a:focus-visible{
  opacity:1;
}

  .site-header[data-menu-open="true"] .menu-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .site-header[data-menu-open="true"] .primary-nav{
    background:var(--racing-green);
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  /* Menu-open colour override beats per-theme header rules (e.g. the
     monograph layout's body:has(.project-page--monograph) rule that
     paints the header black). Also kills the .primary-nav a color
     transition while the menu is open so the swap is instant — otherwise
     it animates from the theme colour to white over 350ms. */
  body .site-header[data-menu-open="true"] .primary-nav,
  body .site-header[data-menu-open="true"] .primary-nav a{
    color:#ffffff !important;
    transition:opacity 0.25s ease, transform 300ms var(--ease-veeral);
  }

  .site-header[data-menu-open="true"] .menu-toggle{
    color:var(--white);
  }

  .site-header[data-menu-open="true"] .menu-toggle__icon span:first-child{
    transform:translateY(6.2px) rotate(45deg);
  }

  .site-header[data-menu-open="true"] .menu-toggle__icon span:last-child{
    transform:translateY(-6.2px) rotate(-45deg);
  }
}

/*
START OF MOVEMENT 2 CSS REFERENCES
*/

.m2{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:0 var(--side-padding) var(--section-pad);
  background: var(--racing-green);
  position:relative;
  overflow:hidden;
  margin-bottom:0;
}

.m2 h1{
  font-weight:var(--type-heading-weight);
  font-size:var(--text-page-title);
  line-height:var(--type-h1-line);
  letter-spacing:var(--type-h1-tracking);
  margin:0;
  color:var(--white);
  width:100%;
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}

/* Supporting page reusable template blocks */
.supporting-title-block{
  min-height:auto;
  align-items:flex-start;
  padding:0;
  background:var(--paper);
}

.m2.supporting-title-block{
  padding-top:0 !important;
}

.supporting-title-grid{
  padding-top:0;
  padding-bottom:0;
}

.content-wrap.supporting-title-grid{
  padding-bottom:0;
  margin-bottom:0;
}

.supporting-content-block{
  --page-content-top:0;
}

body:not([data-page="practice"]) .supporting-content-block{
  padding-top:clamp(12px, 1.2vw, 20px) !important;
}

body[data-page="practice"] .supporting-content-block{
  padding-top:16px !important;
}

.supporting-title-block::before,
.supporting-title-block::after{
  display:none;
}

.supporting-title-block h1{
  font-size:var(--text-page-title);
  line-height:var(--type-h1-line);
  letter-spacing:normal;
  text-transform:none;
  color:var(--ink);
  margin:0;
  opacity:1;
  transform:none;
  transition:none;
}

.page-title{
  margin-left:0;
  margin-top:clamp(40px, 4vw, 80px) !important;
  margin-bottom:clamp(24px, 2.5vw, 40px) !important;
}

.supporting-content-block{
  --page-content-top:clamp(16px, 2vh, 24px);
  padding:clamp(16px, 2vh, 24px) var(--side-padding) var(--page-content-bottom);
}

.m2 p{
  margin:0;
  font-family:var(--font-narrative);
  font-weight:var(--type-body-weight);
  font-size:var(--text-body);
  line-height:var(--type-body-line);
  letter-spacing:var(--type-body-lg-tracking);
  max-width:var(--text-width);
  color:var(--white);
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.8s ease 0.1s, transform 0.8s ease 0.1s;
}

.supporting-title-block .text-block,
.supporting-title-block .text-block p{
  opacity:1;
  transform:none;
  transition:none;
  color:var(--ink);
}

.supporting-title-block .text-block p{
  max-width:100%;
}

@media (max-width:860px){
  .m2 h1{line-height:1.02;}
}

/* Movement 2 final styles */
.m2::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--racing-green);
  opacity:0 !important;
  pointer-events:none;
}

.m2::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:22vh;
  background:
    linear-gradient(180deg, rgba(0, 61, 31, 0) 0%, rgba(0, 61, 31, 0.72) 62%, rgb(0, 61, 31) 100%);
  opacity:1;
  pointer-events:none;
  z-index:1;
  will-change:opacity;
}

.m2 .m2-content{
  position: relative;
  z-index: 1;
  opacity: 1;
  font-family: var(--font-narrative);
}

.m2 .m2-content .m2-caption-stack{
  margin-top: 300px;
  margin-bottom: 180px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-narrative);
}

.m2 .m2-content .home-intro{
  margin: 0;
  font-weight:var(--type-body-weight);
  letter-spacing: normal;
  text-align: left;
  color: rgb(252, 250, 247);
  opacity: 1;
  transform: none;
  transition: none;
}

.m2 .m2-content .home-intro.m2-caption-2{
  font-weight: var(--type-heading-weight);
  margin-left: 0;
}

.m2 .m2-content .home-intro.m2-text{
  font-size:clamp(36px, 6.2vw, 170px);
  line-height:1.06;
  max-width:none;
  text-align:justify;
}

@media (max-width:640px){
  .m2 .m2-content .home-intro.m2-text{
    font-size:clamp(26px, 8.5vw, 48px);
    line-height:1.1;
    max-width:none;
  }
}

.m2 .m2-content .home-intro .m2-lede{
  display:block;
  font-weight:700;
}

.m2 .m2-content .home-intro.m2-unfurl{
  perspective: 1600px;
  perspective-origin: 50% 65%;
}

.m2 .m2-content .home-intro.m2-unfurl .m2-line-wrap{
  display:block;
  overflow:hidden;
  --m2-line-progress: 0;
  clip-path: inset(0 0 calc((1 - var(--m2-line-progress)) * 100%) 0);
  transition: clip-path 160ms linear;
  font-family: var(--font-narrative);
}

.m2 .m2-content .home-intro.m2-unfurl .m2-line-inner{
  display:block;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: calc(0.08 + (var(--m2-line-progress) * 0.92));
  filter: blur(calc((1 - var(--m2-line-progress)) * 5px));
  transform:
    translateY(calc((1 - var(--m2-line-progress)) * 1em))
    rotateX(calc((1 - var(--m2-line-progress)) * -70deg))
    skewX(calc((1 - var(--m2-line-progress)) * -2deg))
    scaleY(calc(1.08 - (var(--m2-line-progress) * 0.08)));
  transition:
    transform 160ms linear,
    filter 160ms linear,
    opacity 160ms linear;
  will-change: transform, filter, opacity;
  font-family: var(--font-narrative);
}

@media (prefers-reduced-motion: reduce){
  .m2 .m2-content .home-intro.m2-unfurl .m2-line-wrap{
    clip-path: inset(0 0 0 0);
    transition: none;
  }

  .m2 .m2-content .home-intro.m2-unfurl .m2-line-inner{
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

.m2-content{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:100%;
  gap:var(--space-220);
  font-family: var(--font-narrative);
}

/*
END OF MOVEMENT 2 CSS REFERENCES
*/
.container{
  width:100%;
  padding-left:var(--page-margin);
  padding-right:var(--page-margin);
  margin:0;
}

.content-column{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:0;
  margin-left:0;
  max-width:min(100%, var(--content-column-width, 100%));
}

.wrap,
.media-width{
  width:min(100%, var(--media-width));
  margin:0 auto;
}

.section{
  padding:var(--section-pad) 0;
}

.section-large{
  padding:var(--section-pad-large) 0;
}

.content-wrap{
  padding-top:var(--page-content-top);
  padding-bottom:var(--page-content-bottom);
  padding-left:clamp(20px, 6vw, 120px);
  padding-right:clamp(20px, 6vw, 120px);
}
.supporting-intro-block--title-align{
  width:100%;
  padding:0 0 clamp(32px, 3.33vw, 60px);
}
.supporting-body-block--title-align{
  width:100%;
  margin-top:clamp(32px, 3.33vw, 60px);
}
.page-copy,
.text-block{
  width:100%;
  max-width:clamp(600px, 42vw, 720px);
  margin-top:0;
  margin-left:0;
}

.text-block--p{
  margin-top:0;
}

.text-block p + p{
  margin-top:clamp(16px, 2vh, 24px);
}
.page-prose p + p{margin-top:0;}


/* Marquee animation for Movement 4 */
@keyframes mvMarquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}

.clients-row{
  overflow:hidden;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:var(--space-44) 0;
  color:var(--ink);
}

.marquee{
  display:flex;
  width:max-content;
  align-items:center;
  gap:var(--marquee-gap);
  animation: mvMarquee 42s linear infinite;
  will-change: transform;
}

.marquee-track{
  display:flex;
  align-items:center;
  gap:var(--marquee-gap);
  width:max-content;
  flex:0 0 auto;
  color:var(--ink);
}

@media (prefers-reduced-motion: reduce){
  .marquee{animation:none;transform:none;}
}

.m4 .project{
  width: 100%;
  display:flex;
  justify-content:center;
}

.m4 > *{
  position:relative;
  z-index:1;
}

.m4 .project + .project{
  margin-top: calc(clamp(60px, 10vw, 120px) * 0.5);
}

.project-sheet{
  width: min(var(--media-width), calc(100% - (var(--page-margin) * 2)));
  margin: 0 auto;
  background: transparent;
  min-height: 600px;
  padding: clamp(16px, 2vw, 24px) 0;
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
  gap: clamp(12px, 1.5vw, 24px);
}

.project{
  margin-bottom:0;
}

.project-label{
  font-family:var(--font-narrative);
  font-size:var(--text-ui-md);
  line-height:1.3;
  letter-spacing:var(--type-nav-tracking);
  text-transform:uppercase;
  font-weight:var(--type-heading-weight);
  color:rgba(0, 0, 0, 0.7);
  margin:0;
  width:100%;
}

.project-media{
  width:100%;
  aspect-ratio: 16 / 9;
  border:1px solid var(--rule-soft);
  border-radius:0;
  flex:0 0 auto;
}

.project-meta{
  width:100%;
  display:flex;
  align-items:baseline;
  gap:clamp(20px, 2vw, 26px);
  margin:0;
}

@media (max-width:860px){
  .project-meta{
    gap:8px;
    flex-direction:column;
    align-items:flex-start;
  }
}

.project-name{
  font-weight:var(--type-heading-weight);
  font-size:var(--text-sm);
  margin:0;
  letter-spacing:0.02em;
  color:var(--ink);
}

.client-name{
  font-family:var(--font-narrative);
  font-size:var(--text-ui-md);
  line-height:var(--type-body-line);
  letter-spacing:0;
  font-weight:var(--type-body-weight);
  opacity:0.7;
  color:var(--ink);
}

.m4 .project:last-child{
  margin-bottom: 0;
}

 

.m4{
  margin-top: -1px;
}

.m4-title-anchor{
  height:clamp(34px, 4.2vw, 60px);
  margin:0 0 80px;
  visibility:hidden;
  pointer-events:none;
}

body.is-paper{
  background: var(--paper);
  color: var(--ink);
}

/* =========================
   HEADER – STRUCTURAL SYSTEM
   ========================= */

.site-header{
  transition: color 0.35s ease, opacity 0.35s ease;
}

.header-progress-bar{
  position:absolute;
  top:0;
  left:0;
  height:6px;
  width:0%;
  background:var(--brass);
  z-index:1;
  transition:width 0.05s linear;
}

/* HERO */
.site-header.is-hero,
.site-header[data-theme="hero"]{
  background: transparent;
  color: var(--white);
}

/* GREEN CHAPTER */
.site-header.is-green,
.site-header[data-theme="green"]{
  background: transparent;
  color: var(--white);
}

/* PAPER CHAPTER */
.site-header.is-paper,
.site-header[data-theme="paper"]{
  background: transparent;
  color: var(--ink);
}

/* =========================
   MOVEMENT 3 – PAPER TEXT RESET
   ========================= */

.m4,
.m4 h1,
.m4 .section-title,
.m4 .project-label,
.m4 .project-name,
.m4 .client-name{
  color: var(--ink);
}

/* HOMEPAGE SPECIFIC */
.m1{
  height:100vh;
  min-height:640px;
  position:relative;
  overflow:hidden;
  background:#0f1511;
}

.hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#0f1511;
}

.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:var(--hero-overlay-opacity);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.08), rgba(255,255,255,0) 50%),
    linear-gradient(135deg, rgba(0,61,31,0.62), rgba(15,21,17,0.92));
}

.home-intro{
  margin:0;
  font-family:var(--font-narrative);
  font-weight:var(--type-body-weight);
  font-size:var(--text-body);
  line-height:var(--type-body-line);
  letter-spacing:var(--type-body-lg-tracking);
  max-width:var(--text-width);
  color:var(--ink);
}

.section-title{
  font-family:var(--font-ui);
  font-weight:var(--type-heading-weight);
  text-transform:none;
  font-size:var(--text-page-title);
  line-height:var(--type-h1-line);
  letter-spacing:var(--type-h1-tracking);
  margin:0;
  padding:var(--section-pad-large) var(--side-padding) var(--section-pad);
  background:var(--paper);
  color:var(--ink);
}

.section-title.interpreting-title{
  font-size:var(--text-page-title);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin-bottom:clamp(28px, 5vh, 72px);
}

.section-title.clients-title,
.section-title.reflections-title{
  font-family:var(--font-ui);
  padding-top: 0;
  padding-bottom: var(--section-pad);
  color:var(--ink);
  background:none !important;
  padding: 0 clamp(0px, 2vw, 10px);
  overflow: hidden;
  width:100%;
  max-width:var(--media-width);
  align-self:flex-start;
  font-size:var(--text-page-title);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin-bottom:clamp(28px, 5vh, 72px);
  text-align:left;
}

.m5{
  background:var(--paper);
  padding:0 var(--side-padding) var(--space-140);
}

.logo{
  font-family:var(--font-narrative);
  font-weight:600;
  font-size:var(--text-sm);
  letter-spacing:0.18em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink);
  padding:0 var(--space-6);
  line-height:1;
}

.reflections{
  background:var(--paper);
  margin-top:var(--section-pad-large);
  padding:0 var(--side-padding) var(--page-content-bottom);
}

.featured{
  max-width:var(--media-width);
}

.writing-title{
  font-weight:var(--type-heading-weight);
  text-transform:none;
  font-size:var(--text-lg);
  letter-spacing:-0.01em;
  margin-bottom:var(--space-18);
  color:var(--ink);
}

.writing-excerpt{
  font-family:var(--font-narrative);
  font-weight:600;
  font-size:var(--text-sm);
  letter-spacing:var(--type-body-lg-tracking);
  line-height:var(--type-body-lg-line);
  color:var(--ink);
}

.writing-excerpt p{
  margin:0 0 var(--space-24);
}

.writing-excerpt p:last-child{
  margin-bottom:0;
}

.featured a{
  display:block;
  width:max-content;
  margin-left:auto;
  margin-top:var(--space-18);
  font-weight:700;
  font-size:var(--text-ui-md);
  letter-spacing:var(--type-ui-track-32);
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid rgba(0,0,0,0.35);
  padding-bottom:var(--space-4);
}

.home-sections{
  background:var(--racing-green);
}

.home-sections .reflections{
  margin-top:0;
  padding:0 var(--side-padding) clamp(100px,12vw,160px);
  background:var(--racing-green);
  color:var(--white);
}

.home-sections .reflections-container{
  width:100%;
  margin:0;
}

.home-sections .reflections-content{
  max-width:720px;
}

.home-sections .reflections-header{
  margin-bottom:clamp(60px,8vw,100px);
}

.home-sections .reflections-label{
  display:block;
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-bottom:24px;
  opacity:0.6;
  font-weight:400;
  color:var(--white);
}

.home-sections .reflections .reflections-title{
  margin:0;
  padding:0;
  text-align:left;
  color:var(--white);
}

.home-sections .reflections-list{
  display:flex;
  flex-direction:column;
  border-top:1px solid rgba(248,246,243,0.15);
}

.home-sections .reflection{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:32px 0;
  border-bottom:1px solid rgba(248,246,243,0.15);
  color:inherit;
}

.home-sections .reflection-more{
  text-decoration:none;
  display:inline-block;
  transition:transform 300ms var(--ease-veeral);
}

.home-sections .reflection-more:hover,
.home-sections .reflection-more:focus-visible{
  transform:translateX(4px);
}

.home-sections .reflection-date{
  font-family:var(--font-ui);
  font-size:clamp(12px, 0.9vw, 14px);
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0.5;
  font-weight:400;
  color:var(--white);
}

.home-sections .reflection-tag{
  font-family:var(--font-ui);
  font-size:clamp(12px, 0.9vw, 14px);
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0.7;
  font-weight:400;
  color:var(--white);
}

.home-sections .reflection-more{
  align-self:flex-end;
  margin-top:12px;
  font-family:var(--font-ui);
  font-size:clamp(12px, 1vw, 14px);
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--white);
}

.home-sections .reflection-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
}

.home-sections .reflection-meta{
  display:inline-flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:baseline;
  margin-left:auto;
  margin-bottom:8px;
  text-align:right;
  justify-content:flex-end;
}

.home-sections .reflection-title{
  font-family:var(--font-ui);
  font-size:clamp(24px, 2.5vw, 38px);
  line-height:1.3;
  letter-spacing:-0.005em;
  font-weight:500;
  margin:0 0 12px;
  color:var(--white);
}

.home-sections .reflection-fragment{
  font-family:var(--font-ui);
  font-size:clamp(16px, 1.6vw, 24px);
  line-height:1.6;
  letter-spacing:0;
  font-weight:400;
  margin:4px 0 12px;
  color:var(--white);
}

.home-sections .reflections-footer{
  margin-top:60px;
  display:flex;
  justify-content:flex-end;
}

.home-sections .reflections-cta{
  font-family:"EB Garamond", Georgia, "Times New Roman", Times, serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(22px, 2vw, 26px);
  text-decoration:none;
  color:#d4a574;
  display:inline-block;
  transition:transform 300ms var(--ease-veeral);
}

.home-sections .reflections-cta:hover,
.home-sections .reflections-cta:focus-visible{
  transform:translateX(4px);
}

@media (max-width:900px){
  .home-sections .reflections{
    padding-top:clamp(40px, calc(40px + (100vw - 390px) * 60 / 510), 100px);
    padding-bottom:clamp(40px, calc(40px + (100vw - 390px) * 60 / 510), 100px);
  }
  .home-sections .reflections-content{
    max-width:100%;
  }
  .home-sections .reflections-header{
    margin-bottom:clamp(32px, calc(32px + (100vw - 390px) * 28 / 510), 60px);
  }
  .home-sections .reflection{
    padding:clamp(16px, calc(16px + (100vw - 390px) * 8 / 510), 24px) 0;
    gap:clamp(4px, calc(4px + (100vw - 390px) * 4 / 510), 8px);
  }
  .home-sections .reflection-head{
    gap:clamp(8px, calc(8px + (100vw - 390px) * 6 / 510), 14px);
  }
  .home-sections .reflection-title{
    margin:0 0 clamp(6px, calc(6px + (100vw - 390px) * 6 / 510), 12px);
  }
  .home-sections .reflection-fragment{
    margin:2px 0 clamp(6px, calc(6px + (100vw - 390px) * 6 / 510), 12px);
  }
  .home-sections .reflection-more{
    margin-top:clamp(6px, calc(6px + (100vw - 390px) * 6 / 510), 12px);
  }
  .home-sections .reflection-meta{
    margin-bottom:clamp(4px, calc(4px + (100vw - 390px) * 4 / 510), 8px);
    gap:clamp(8px, calc(8px + (100vw - 390px) * 6 / 510), 14px);
  }
  .home-sections .reflections-footer{
    margin-top:clamp(24px, calc(24px + (100vw - 390px) * 36 / 510), 60px);
  }
}


@media (max-width:720px){
  .home-sections .reflections{
    padding-top:0;
  }
}

/* ─── Global body prose ──────────────────────────────────────────────
   Single source of truth for long-form reading text used by
   .content-column on any page (practice, work, etc). */
.content-column p,
.content-column ul,
.content-column ol {
  font-family: var(--font-narrative);
  font-size: var(--text-body);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-lg-tracking);
  color: var(--ink);
  max-width: 100%;
}

.content-column p + p {
  margin-top: clamp(16px, 2vh, 24px);
}

/* =========================
   Barba.js Page Transition
========================= */

/* Disable pointer events on all links during transition */
body.barba-running a,
body.barba-running button {
  pointer-events: none;
}

/* ---- Custom scrollbar (Lenis-driven) ----
   Thin track pinned to the right edge, thumb height proportional to the
   visible viewport vs document height, position tracks scroll progress.
   --mv-scrollbar-opacity is bumped to 1 by JS while the user is actively
   scrolling and dropped to 0 after a brief idle pause. */
.mv-scrollbar{
  position:fixed;
  top:0;
  right:0;
  width:12px;
  height:100vh;
  z-index:1000;
  pointer-events:none;
  background:transparent;
  opacity:var(--mv-scrollbar-opacity, 0);
  transition:opacity 240ms ease-out;
}
.mv-scrollbar__thumb{
  position:absolute;
  top:0;
  left:2px;
  width:8px;
  height:60px;
  border-radius:6px;
  background:rgba(0, 0, 0, 0.4);
  will-change:transform, height;
}

/* Hide the persistent footer-upper, footer-lower, and back-to-top during
   a Barba page transition so the racing-green body backdrop shows through
   the gap between the shrinking outgoing container and the slide-up
   incoming container. They reappear once the transition finishes. */
body.is-page-transitioning .footer-upper,
body.is-page-transitioning .site-footer,
body.is-page-transitioning .footer-lower,
body.is-page-transitioning .back-to-top{
  visibility:hidden;
}

/* Non-home pages set body bg to paper, so a fading outgoing page would
   only reveal more paper underneath — no green tint. Override during a
   transition so racing-green is what shows behind the shrinking page. */
body.is-page-transitioning{
  background:var(--racing-green) !important;
}



/* =========================================================
   FOOTER + BACK TO TOP — variant-based system per the
   implementation brief. Three variants on .site-footer:
     default  (Practice + Dispatch)
     --project (Practice + Enquiry CTA)
     --minimal (green band only — Contact page)
   BackToTop is a separate paper-cream band that always
   renders above the footer.
   Tokens (--green, --paper-soft, --green-soft, --green-line,
   --bronze, --ink-mute, --ink-line, --ease-veeral, --font-serif)
   are defined at :root above.
   ========================================================= */

.back-to-top{
  position:relative;
  z-index:1;
  background:var(--green);
  padding:clamp(20px, calc(20px + (100vw - 390px) * 44 / 378), 64px) var(--side-padding) clamp(20px, calc(20px + (100vw - 390px) * 36 / 378), 56px);
  display:flex;
  justify-content:center;
  transition:background-color 600ms var(--ease-veeral), border-color 600ms var(--ease-veeral);
}
.back-to-top::before{
  content:'';
  display:block;
  position:absolute;
  top:0; left:var(--page-margin); right:var(--page-margin);
  height:1px;
  background:var(--green-line);
  transition:background-color 600ms var(--ease-veeral);
}

.back-to-top__btn{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--paper);
  font-family:inherit;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  padding:8px 16px;
  transition:color 600ms var(--ease-veeral);
}

.back-to-top__arrow{
  display:inline-block;
  transition:transform 600ms var(--ease-veeral),color 600ms var(--ease-veeral);
  font-size:18px;
  line-height:1;
}

.back-to-top__btn:hover{ color:var(--bronze); }
.back-to-top__btn:hover .back-to-top__arrow{
  transform:translateY(-6px);
  color:var(--bronze);
}

.back-to-top__btn:focus-visible{
  outline:1px solid var(--bronze);
  outline-offset:6px;
}


/* ---- Footer base ---- */
.site-footer{ font-family:var(--font-ui); }

/* ---- Upper band: Practice + Dispatch (default) | Practice + Enquiry (project) ----
       Horizontal padding uses --side-padding (the same token as .site-header) so
       the left edge of "The Practice" eyebrow aligns to the header nav. The
       footer-grid no longer has its own max-width/margin auto — width and edge
       alignment come from the parent band's --side-padding. See the brief's
       "Footer Alignment to Site Container System" section. */
.footer-upper{
  position:relative;
  z-index:1;
  background:var(--green);
  padding:48px var(--side-padding) 56px;
  color:var(--paper);
  transition:background-color 600ms var(--ease-veeral), color 600ms var(--ease-veeral), border-color 600ms var(--ease-veeral);
}
.footer-upper::before{
  content:'';
  display:block;
  position:absolute;
  top:0; left:var(--page-margin); right:var(--page-margin);
  height:1px;
  background:var(--green-line);
  transition:background-color 600ms var(--ease-veeral);
}

.footer-grid{
  /* Three equal groups distributed across the full content width:
     1) Practice    2) Dispatch (or Enquiry on project pages)    3) Connect + Pages
     CSS Grid with three 1fr tracks gives each group exactly one third of the
     available width, so the layout reads consistently across screen sizes.
     The parent `.footer-upper` controls outer breathing room via --side-padding;
     no inner max-width cap, the footer extends edge-to-edge with the rest of
     the site. `align-items: flex-start` keeps the groups top-aligned rather
     than stretching to match heights. The 96px gap creates breathing room
     between the three groups; Connect + Pages tighten internally (see below). */
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:96px;
  align-items:flex-start;
}

/* Group 3: Connect + Pages cluster as a tight flex pair, anchored to the
   right edge of the right grid cell so the block hugs the content's right
   margin. The two columns size to their content width; gap controls the
   space between them. */
.footer-utility{
  display:flex;
  gap:24px;
  align-items:flex-start;
  justify-self:start;
}

.footer-spacer{
  /* Vestigial — no longer rendered in markup. Rule kept inert so any
     stray `.footer-spacer` references in older content don't paint. */
  display:none;
}

.footer-eyebrow{
  font-size:var(--eyebrow-size);
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--green-soft);
  margin-bottom:20px;
  font-weight:500;
}

.footer-practice__copy{
  font-size:21px;
  line-height:1.5;
  letter-spacing:0.005em;
  margin-bottom:24px;
  max-width:480px;
  color:var(--paper);
}

.accent-italic{
  font-family:var(--font-serif);
  font-style:italic;
  color:var(--bronze);
}

/* Connect — vertical social stack column. Pages — vertical site-nav column.
   Both share the eyebrow + clean unstyled list pattern. */
.footer-connect__list,
.footer-pages__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  /* Track the Practice copy size on wide displays so the link columns
     don't read disproportionately small next to the body text. */
  font-size:clamp(16px, 1.4vw, 21px);
}

.footer-connect__list a,
.footer-pages__list a{
  color:var(--paper);
  text-decoration:none;
  display:inline-block;
  transition:color 300ms var(--ease-veeral),
             transform 300ms var(--ease-veeral);
}

.footer-connect__list a:hover,
.footer-pages__list a:hover{
  color:var(--bronze);
  transform:translateX(4px);
}

/* Dispatch (default variant). Block max-width + justify-self: center on the
   .footer-dispatch grid item below page-centers the dispatch block on the
   wordmark in the band beneath. Same pattern for .footer-enquiry. */
.footer-dispatch,
.footer-enquiry{
  max-width:420px;
  justify-self:center;
}

.footer-dispatch__heading{
  font-size:28px;
  line-height:1.3;
  letter-spacing:0;
  margin-bottom:28px;
  font-weight:400;
  color:var(--paper);
}

.footer-dispatch__form{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--green-line);
  padding-bottom:8px;
  max-width:400px;
}

.footer-dispatch__input{
  background:transparent;
  border:0;
  outline:none;
  font-family:inherit;
  font-size:13px;
  color:var(--paper);
  flex:1;
  padding:4px 0;
}
.footer-dispatch__input::placeholder{ color:var(--green-soft); }

.footer-dispatch__submit{
  background:none;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  color:var(--paper);
  font-weight:500;
  padding:4px 0 4px 16px;
  transition:transform 300ms var(--ease-veeral);
}
.footer-dispatch__submit:hover{ transform:translateX(4px); }

.footer-newsletter-status{
  margin-top:14px;
  min-height:1.2em;
  font-size:13px;
  letter-spacing:0.04em;
  line-height:1.5;
  color:var(--racing-green);
  opacity:1;
  transform:translateY(4px);
  transition:transform 320ms var(--ease-veeral);
}
.footer-newsletter-status:not(:empty){ transform:translateY(0); }
.footer-newsletter-status.is-error{ color:#7a2418; }

/* Enquiry (project variant) */
.footer-enquiry__heading{
  font-size:28px;
  line-height:1.3;
  letter-spacing:0;
  margin-bottom:32px;
  font-weight:400;
  color:var(--paper);
}

.footer-enquiry__cta{
  display:inline-flex;
  align-items:center;
  gap:16px;
  padding:16px 0;
  border-top:1px solid var(--green-line);
  border-bottom:1px solid var(--green-line);
  text-decoration:none;
  color:var(--paper);
  font-size:15px;
  letter-spacing:-0.005em;
  width:100%;
  max-width:420px;
  justify-content:space-between;
  transition:color 300ms var(--ease-veeral),
             transform 300ms var(--ease-veeral);
}
.footer-enquiry__cta:hover{
  transform:translateX(4px);
}

.footer-enquiry__cta-label{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:28px;
  color:var(--bronze);
}

.footer-enquiry__cta-arrow{
  font-size:18px;
  transition:transform 300ms var(--ease-veeral),color 400ms var(--ease-veeral);
  color:var(--bronze);
}

.footer-enquiry__cta:hover .footer-enquiry__cta-label{ color:var(--bronze); }
.footer-enquiry__cta:hover .footer-enquiry__cta-arrow{
  transform:translateX(8px);
}

/* ---- Lower band: green wordmark + legal ---- */
/* Page-over footer-lower: green band is fixed to the viewport bottom.
   back-to-top and footer-upper sit above it (z-index:1) with opaque green
   backgrounds so they slide over the pinned green band as the user scrolls.
   JS sets --footer-lower-height on :root; body padding-bottom ensures the
   document is tall enough for footer-lower to be fully revealed. */
.footer-lower{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:0;
  background:var(--green);
  padding:56px var(--side-padding) 0;
  overflow:hidden;
}

.footer-wordmark{
  display:flex;
  justify-content:center;
  padding:16px 0 12px;
}
.footer-wordmark__brand{
  /* Scale the brand wordmark to fill the green band proportionally.
     Uses the shared .wordmark base (Bebas Neue + .v-pivot + .refined-r). */
  font-size:clamp(72px,16vw,240px);
  color:var(--bronze);
  line-height:0.8;
}

.footer-tagline{
  text-align:center;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--green-soft);
  margin:0 0 48px;
}

.footer-legal{
  /* Sits inside .footer-lower's --side-padding, so its left/right edges
     align to the upper band's outer edges. No own max-width — full width. */
  border-top:0.5px solid var(--green-line);
  padding:28px 0 32px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:center;
  font-size:11px;
  color:var(--green-soft);
  letter-spacing:0.02em;
}

.footer-legal a{
  color:inherit;
  text-decoration:none;
  transition:color 400ms var(--ease-veeral);
}
.footer-legal a:hover{ color:var(--paper); }

.footer-legal__sep{
  margin:0 10px;
  opacity:0.6;
}

.footer-times{
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.footer-times span + span::before{
  content:'·';
  margin:0 10px;
  opacity:0.5;
}

/* ---- Project-page green→paper render: when body.is-paper engages (header
       theme switches mid-scroll), back-to-top + footer-upper transition along
       with the page. White text → ink, bronze stays bronze. ---- */
body.is-paper[data-page^="work-"] .back-to-top{
  background:var(--paper);
}
body.is-paper[data-page^="work-"] .back-to-top::before{
  background:var(--ink-line);
}
body.is-paper[data-page^="work-"] .back-to-top__btn,
body.is-paper[data-page^="work-"] .back-to-top__arrow{
  color:var(--ink);
}
body.is-paper[data-page^="work-"] .footer-upper{
  background:var(--paper);
  color:var(--ink);
}
body.is-paper[data-page^="work-"] .footer-upper::before{
  background:var(--ink-line);
}
body.is-paper[data-page^="work-"] .footer-eyebrow{ color:var(--ink-mute); }
body.is-paper[data-page^="work-"] .footer-practice__copy,
body.is-paper[data-page^="work-"] .footer-dispatch__heading,
body.is-paper[data-page^="work-"] .footer-enquiry__heading,
body.is-paper[data-page^="work-"] .footer-connect__list a,
body.is-paper[data-page^="work-"] .footer-pages__list a,
body.is-paper[data-page^="work-"] .footer-dispatch__input,
body.is-paper[data-page^="work-"] .footer-dispatch__submit,
body.is-paper[data-page^="work-"] .footer-enquiry__cta{
  color:var(--ink);
}
body.is-paper[data-page^="work-"] .footer-dispatch__input::placeholder{ color:var(--ink-mute); }
body.is-paper[data-page^="work-"] .footer-dispatch__form{ border-bottom:1px solid var(--ink); }
body.is-paper[data-page^="work-"] .footer-enquiry__cta{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}

/* Smooth transitions on the children that change colour */
.back-to-top__btn,
.back-to-top__arrow,
.footer-eyebrow,
.footer-practice__copy,
.footer-dispatch__heading,
.footer-enquiry__heading,
.footer-connect__list a,
.footer-pages__list a,
.footer-dispatch__input,
.footer-dispatch__submit,
.footer-enquiry__cta,
.footer-dispatch__form{
  transition:color 600ms var(--ease-veeral), border-color 600ms var(--ease-veeral);
}

/* ---- Variant visibility — driven by body[data-variant] so the persistent
       Footer DOM (which sits outside the Barba container and renders all
       variants' content at SSR) shows the right content per route. JS in
       site-shared.js updates body.dataset.variant on each Barba transition. ---- */
body[data-variant="default"] .footer-enquiry,
body[data-variant="project"] .footer-dispatch,
body[data-variant="minimal"] .footer-upper{
  display:none;
}

/* Minimal variant (Contact page) — green band gets a paper-coloured hairline
   along its top edge since there's no .footer-upper providing one above it. */
body[data-variant="minimal"] .footer-lower{
  border-top:0.5px solid var(--ink-line);
}

/* ---- Contact page social block (lives on the page, not the footer) ---- */
.contact-social{
  margin-top:clamp(32px,4vw,48px);
}

.contact-social__eyebrow{
  font-size:var(--eyebrow-size);
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:12px;
  font-weight:500;
}

.contact-social__links{
  font-size:14px;
  color:var(--ink);
  line-height:1.6;
}

.contact-social__links a{
  color:var(--ink);
  text-decoration:none;
  transition:color 400ms var(--ease-veeral);
}

.contact-social__links a:hover{ color:var(--bronze); }

.contact-social__links span{
  margin:0 6px;
  color:var(--ink-mute);
}

/* ---- Responsive: stack the upper band + legal at 900px.
       Horizontal padding overrides removed — --side-padding adapts via clamp. ---- */
@media (max-width:900px){
  /* Stack the three top-level groups vertically; keep Connect + Pages
     as two vertical pairs side-by-side inside the utility group. Reset
     the justify-self values so each group left-aligns naturally in the
     single-column stack. */
  .footer-grid{ grid-template-columns:1fr; gap:clamp(24px, calc(24px + (100vw - 390px) * 24 / 378), 48px); }
  .footer-dispatch,
  .footer-enquiry{ justify-self:start; }
  .footer-utility{ gap:32px; justify-self:start; }
  .footer-legal{ grid-template-columns:1fr; gap:16px; text-align:center; }
  .footer-times{ text-align:center; }
  .footer-dispatch__heading,
  .footer-enquiry__heading{ font-size:22px; }
}

/* On the narrowest viewports, drop the Acknowledgement of Country onto its
   own line so it doesn't share visual weight with the © + Privacy + Terms row. */
@media (max-width:560px){
  .footer-legal__sep--ack{ display:none; }
  .footer-legal__ack{
    display:block;
    margin-top:8px;
  }
}

/* =========================================================
   Dedicated /reflections page typography overrides.
   The page renders entries via TextBlock (h2 + p meta + p body).
   Scoped to body[data-page="reflections"] only.
   ========================================================= */
body[data-page="reflections"] .reflections-index-flow .text-block--h2 h2{
  font-size:clamp(32px, 3vw, 48px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-0.005em;
  margin:0 0 12px;
}
body[data-page="reflections"] .reflections-index-flow .text-block--meta p{
  font-size:clamp(11px, 0.85vw, 13px);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin:0 0 8px;
}
body[data-page="reflections"] .reflections-index-flow .text-block:not(.text-block--h2):not(.text-block--meta) p{
  font-size:clamp(18px, 2.2vw, 34px);
  line-height:1.6;
  margin:0 0 16px;
}

/* =========================================================
   Static (non-animated) page footers — Practice, Work archive,
   Reflections, Reflection entries. The back-to-top + footer-upper
   read paper/cream throughout (matching the page surface)
   instead of starting green. Project pages and the homepage keep
   their existing scroll-driven green→cream transitions.
   ========================================================= */
body[data-page="practice"] .back-to-top,
body[data-page="work"] .back-to-top,
body[data-page="reflections"] .back-to-top,
body[data-page="reflection-entry"] .back-to-top,
body[data-page="contact"] .back-to-top{
  background:var(--paper);
}
body[data-page="reflections"] .back-to-top::before,
body[data-page="reflection-entry"] .back-to-top::before,
body[data-page="contact"] .back-to-top::before{
  background:var(--ink-line);
}
body[data-page="practice"] .back-to-top__btn,
body[data-page="practice"] .back-to-top__arrow,
body[data-page="work"] .back-to-top__btn,
body[data-page="work"] .back-to-top__arrow,
body[data-page="reflections"] .back-to-top__btn,
body[data-page="reflections"] .back-to-top__arrow,
body[data-page="reflection-entry"] .back-to-top__btn,
body[data-page="reflection-entry"] .back-to-top__arrow,
body[data-page="contact"] .back-to-top__btn,
body[data-page="contact"] .back-to-top__arrow{
  color:var(--ink);
}
body[data-page="practice"] .footer-upper,
body[data-page="work"] .footer-upper,
body[data-page="reflections"] .footer-upper,
body[data-page="reflection-entry"] .footer-upper,
body[data-page="contact"] .footer-upper{
  background:var(--paper);
  color:var(--ink);
}
body[data-page="practice"] .footer-upper::before,
body[data-page="work"] .footer-upper::before,
body[data-page="reflections"] .footer-upper::before,
body[data-page="reflection-entry"] .footer-upper::before,
body[data-page="contact"] .footer-upper::before{
  background:var(--ink-line);
}
body[data-page="practice"] .footer-eyebrow,
body[data-page="work"] .footer-eyebrow,
body[data-page="reflections"] .footer-eyebrow,
body[data-page="reflection-entry"] .footer-eyebrow,
body[data-page="contact"] .footer-eyebrow{ color:var(--ink-mute); }

/* Contact-page footer: hide Dispatch + Enquiry columns so only Practice
   (left) and Connect/Pages (right) read on the cream surface. Pin
   .footer-utility to col 3 so it doesn't collapse left when its grid
   neighbours are removed. */
body[data-page="contact"] .footer-dispatch,
body[data-page="contact"] .footer-enquiry{
  display:none !important;
}
body[data-page="contact"] .footer-utility{
  grid-column:3;
  justify-self:end;
}
body[data-page="practice"] .footer-practice__copy,
body[data-page="practice"] .footer-dispatch__heading,
body[data-page="practice"] .footer-enquiry__heading,
body[data-page="practice"] .footer-connect__list a,
body[data-page="practice"] .footer-pages__list a,
body[data-page="practice"] .footer-dispatch__input,
body[data-page="practice"] .footer-dispatch__submit,
body[data-page="practice"] .footer-enquiry__cta,
body[data-page="work"] .footer-practice__copy,
body[data-page="work"] .footer-dispatch__heading,
body[data-page="work"] .footer-enquiry__heading,
body[data-page="work"] .footer-connect__list a,
body[data-page="work"] .footer-pages__list a,
body[data-page="work"] .footer-dispatch__input,
body[data-page="work"] .footer-dispatch__submit,
body[data-page="work"] .footer-enquiry__cta,
body[data-page="reflections"] .footer-practice__copy,
body[data-page="reflections"] .footer-dispatch__heading,
body[data-page="reflections"] .footer-enquiry__heading,
body[data-page="reflections"] .footer-connect__list a,
body[data-page="reflections"] .footer-pages__list a,
body[data-page="reflections"] .footer-dispatch__input,
body[data-page="reflections"] .footer-dispatch__submit,
body[data-page="reflections"] .footer-enquiry__cta,
body[data-page="reflection-entry"] .footer-practice__copy,
body[data-page="reflection-entry"] .footer-dispatch__heading,
body[data-page="reflection-entry"] .footer-enquiry__heading,
body[data-page="reflection-entry"] .footer-connect__list a,
body[data-page="reflection-entry"] .footer-pages__list a,
body[data-page="reflection-entry"] .footer-dispatch__input,
body[data-page="reflection-entry"] .footer-dispatch__submit,
body[data-page="reflection-entry"] .footer-enquiry__cta,
body[data-page="contact"] .footer-practice__copy,
body[data-page="contact"] .footer-connect__list a,
body[data-page="contact"] .footer-pages__list a{
  color:var(--ink);
}
body[data-page="practice"] .footer-dispatch__input::placeholder,
body[data-page="work"] .footer-dispatch__input::placeholder,
body[data-page="reflections"] .footer-dispatch__input::placeholder,
body[data-page="reflection-entry"] .footer-dispatch__input::placeholder{ color:var(--ink-mute); }
body[data-page="practice"] .footer-dispatch__form,
body[data-page="work"] .footer-dispatch__form,
body[data-page="reflections"] .footer-dispatch__form,
body[data-page="reflection-entry"] .footer-dispatch__form{ border-bottom:1px solid var(--ink); }
body[data-page="practice"] .footer-enquiry__cta,
body[data-page="work"] .footer-enquiry__cta,
body[data-page="reflections"] .footer-enquiry__cta,
body[data-page="reflection-entry"] .footer-enquiry__cta{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}

/* ---- Reduced motion: keep layout, drop transitions ---- */
@media (prefers-reduced-motion: reduce){
  .back-to-top__btn,
  .back-to-top__arrow,
  .footer-connect__list a,
  .footer-pages__list a,
  .footer-dispatch__submit,
  .footer-legal a,
  .footer-enquiry__cta,
  .footer-enquiry__cta-arrow,
  .contact-social__links a{
    transition:none;
  }
}