/* ============================================================
   ECO LENS  —  stylesheet
   ------------------------------------------------------------
   QUICK GUIDE FOR EDITING (no coding needed):

   1. COLORS        → change them once in :root just below
   2. HEADING FONT  → drop "TheSeason.woff2" into assets/fonts
                      (see assets/fonts/README-FONT.txt)
   3. TEXT          → all wording lives in the .html files
   4. LOGO SPEED    → search for "MARQUEE SPEED"
   ============================================================ */


/* ============ 1. COLOR SYSTEM  (EDIT HERE) ================== */
:root {
  --cream:  #f4f0e5;   /* base background                       */
  --forest: #33503b;   /* headings, buttons, sharp accents      */
  --ink:    #1e2c22;   /* body text on cream                    */
  --sage:   #dcdcc9;   /* dividers, quiet card backgrounds      */
  --terra:  #bf6a3a;   /* warm accent, used only a few times    */

  /* in between tones used by the long background melt          */
  --cream-deep: #ece8d9;

  /* ============ 2. FONT SYSTEM  (EDIT HERE) ================= */
  /* "The Season" loads from assets/fonts when you add the file.
     Until then the site falls back to Cormorant Garamond.      */
  --font-display: 'The Season', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Times New Roman', Times, serif;

  /* type scale */
  --text-hero:    clamp(4.2rem, 15vw, 13rem);
  --text-kinetic: clamp(3.2rem, 11vw, 9.5rem);
  --text-title:   clamp(2.4rem, 6vw, 4.6rem);
  --text-mission: clamp(2.6rem, 7vw, 6rem);
  --text-body:    clamp(1.06rem, 1.5vw, 1.22rem);
  --text-label:   0.78rem;

  /* layout */
  --gutter: clamp(1.4rem, 6vw, 7rem);
  --max-w: 1280px;
}

/* ---- heading font: The Season (drop the file in assets/fonts) */
@font-face {
  font-family: 'The Season';
  src: url('../fonts/TheSeason.woff2') format('woff2'),
       url('../fonts/TheSeason.woff')  format('woff'),
       url('../fonts/TheSeason.otf')   format('opentype'),
       url('../fonts/TheSeason.ttf')   format('truetype');
  font-weight: 400 600;
  font-display: swap;
}
/* ---- bundled fallback serif so the site never looks broken   */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}


/* ============ RESET / BASE ================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink);
  overflow-x: hidden;
  /* anchors the full page droplet field to the whole document  */
  position: relative;

  /* ONE CONTINUOUS SCENE:
     the whole page sits on a single long gradient so there is
     never a visible line where one section ends and the next
     starts. Cream melts into sage and back, top to bottom.     */
  background:
    linear-gradient(180deg,
      var(--cream)      0%,
      var(--cream)      16%,
      var(--cream-deep) 27%,
      var(--sage)       38%,
      var(--cream-deep) 47%,
      var(--cream)      58%,
      var(--cream-deep) 72%,
      var(--cream)      84%,
      var(--cream)      100%);
}

img, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--forest); color: var(--cream); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--forest);
}

/* film grain overlay: makes everything feel like one photograph */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 80;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cream veil: covers page arrivals and departures. It only ever
   exists while the motion script runs; without JS, or with
   reduced motion, it is never shown at all                      */
.veil {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 90;                /* over the grain, under the cursor */
  pointer-events: none;
  display: none;
}
.js .veil { display: block; }
html.rm .veil { display: none !important; }

/* generic layout helpers */
.wrap {
  width: min(var(--max-w), 100% - 2 * var(--gutter));
  margin-inline: auto;
  /* content rides above the drifting leaf and droplets         */
  position: relative;
  z-index: 7;
}

/* a soft breath of sage air placed between sections, so no
   boundary ever reads as a hard edge                           */
.melt {
  height: 26vh;
  margin: -13vh 0;
  background: linear-gradient(180deg,
    rgba(220, 220, 201, 0)    0%,
    rgba(220, 220, 201, 0.03) 10%,
    rgba(220, 220, 201, 0.12) 22%,
    rgba(220, 220, 201, 0.27) 34%,
    rgba(220, 220, 201, 0.42) 44%,
    rgba(220, 220, 201, 0.5)  50%,
    rgba(220, 220, 201, 0.42) 56%,
    rgba(220, 220, 201, 0.27) 66%,
    rgba(220, 220, 201, 0.12) 78%,
    rgba(220, 220, 201, 0.03) 90%,
    rgba(220, 220, 201, 0)   100%);
  pointer-events: none;
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--forest);
}
/* terracotta accent dot  (accent use 1 of 4) */
.label .dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 10px;
  border-radius: 50%;
  background: var(--terra);
  vertical-align: middle;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  background: var(--forest);
  color: var(--cream);
  padding: 1.05rem 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--forest);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }
/* with the leaf cursor active, buttons are magnetic instead: the
   script owns their movement, so CSS lets go of the transform    */
.cursor-on .btn { transition: background 0.35s ease, border-color 0.35s ease; }
.cursor-on .btn:hover { transform: none; }
/* touch feedback: buttons and cards acknowledge the finger       */
@media (hover: none) {
  .btn:active { transform: scale(0.97); }
  .workprev__item .imgwrap { transition: transform 0.25s ease; }
  .workprev__item:active .imgwrap { transform: scale(0.985); }
}

.btn--ghost {
  background: transparent;
  color: var(--forest);
  border: 1px solid rgba(51, 80, 59, 0.45);
}
.btn--ghost:hover { background: var(--forest); color: var(--cream); }

/* keyboard focus */
a:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; border-radius: 2px; }


/* ============ NAVIGATION ==================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  transition: background 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem var(--gutter);
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--forest);
  transition: color 0.5s ease;
  display: inline-flex;
  align-items: center;
}
.nav__logo img { display: block; height: clamp(46px, 4.6vw, 64px); width: auto; }
.nav__links {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  list-style: none;
}
.nav__links a {
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.5s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.6, 0, 0.2, 1);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* while the dark hero video is behind the nav, links are cream */
body:not(.past-hero) .nav--overhero .nav__logo,
body:not(.past-hero) .nav--overhero .nav__links a { color: var(--cream); }

/* once scrolled, nav gets a quiet cream veil so it stays legible */
.nav.is-scrolled {
  background: rgba(244, 240, 229, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(51, 80, 59, 0.08);
}
.nav.is-scrolled .nav__logo,
.nav.is-scrolled .nav__links a { color: var(--ink); }

/* --- mobile menu --- */
.nav__toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  position: relative;
  z-index: 71;
}
.nav__toggle span {
  display: block;
  width: 26px; height: 2px;
  background: var(--forest);
  margin: 6px auto;
  transition: transform 0.4s ease, opacity 0.4s ease, background 0.4s ease;
}
body:not(.past-hero) .nav--overhero .nav__toggle span { background: var(--cream); }
.nav.is-scrolled .nav__toggle span { background: var(--ink); }

.menu-open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu-open .nav__toggle span { background: var(--forest) !important; }

.mobile-menu {
  position: fixed; inset: 0;
  z-index: 55;   /* sits under the nav bar so the close button stays reachable */
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.menu-open .mobile-menu { opacity: 1; pointer-events: auto; }
.mobile-menu ul { list-style: none; text-align: center; }
.mobile-menu a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 3.6rem);
  color: var(--forest);
  padding: 0.55rem 0;
}


/* ============ HERO ========================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: 1;
}
.hero__media video,
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* a quiet dark veil so cream text stays readable on the video */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(20, 32, 24, 0.34);
}
/* THE DISSOLVE: the video melts upward into cream through a
   long eased ramp, so there is no line where the hero ends     */
.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 58vh;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(244, 240, 229, 0)    0%,
    rgba(244, 240, 229, 0.04) 14%,
    rgba(244, 240, 229, 0.12) 27%,
    rgba(244, 240, 229, 0.26) 39%,
    rgba(244, 240, 229, 0.45) 51%,
    rgba(244, 240, 229, 0.66) 63%,
    rgba(244, 240, 229, 0.84) 75%,
    rgba(244, 240, 229, 0.95) 87%,
    var(--cream)              98%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 3;
  color: var(--cream);
  padding: 0 var(--gutter);
}
.hero__label { color: var(--cream); opacity: 0.92; }
.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--text-hero) * 0.8);   /* 20% smaller than base */
  line-height: 0.98;
  color: var(--cream);
  margin: 1.6rem 0 2rem;
  text-shadow: 0 2px 40px rgba(20, 32, 24, 0.35);
}
.hero__manifesto {
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-style: italic;
  min-height: 1.8em;
  opacity: 0.95;
}
.hero__manifesto .caret {
  display: inline-block;
  width: 1px; height: 1.05em;
  background: var(--cream);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: caret-blink 1.05s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.hero__manifesto.done .caret { animation: caret-fade 1.6s ease forwards; }
@keyframes caret-fade { to { opacity: 0; } }

.hero__scrollcue {
  position: absolute;
  bottom: 3.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--cream);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
  text-align: center;
}
.hero__scrollcue::after {
  content: "";
  display: block;
  width: 1px; height: 44px;
  margin: 0.9rem auto 0;
  background: linear-gradient(180deg, var(--cream), transparent);
  animation: cue 2.6s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0);   opacity: 0; }
  35%  { transform: scaleY(1);   opacity: 0.9; }
  75%  { transform: scaleY(1);   opacity: 0; }
  100% { transform: scaleY(0);   opacity: 0; }
}

/* ============ DROPLETS down the whole page ================== */
/* a sparse field of water drops rests along the full length of
   the site and drifts gently downward on scroll. They are built
   from light and shadow only, so they read as real water
   sitting on paper, not drawn shapes                           */
.dropfield {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
/* each drop is built like real water resting on glass: a mostly
   clear body that darkens at its refracting rim, a bright pin of
   light at the top, a soft second glint low in the belly, and a
   small close shadow that gives it weight. The blur underneath
   bends whatever sits behind it, exactly like a drop on a
   mirror                                                        */
.waterdrop {
  position: absolute;
  border-radius: 48% 52% 50% 50% / 44% 44% 58% 58%;   /* heavier at the bottom */
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 60% 84%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 32%),
    radial-gradient(ellipse at 50% 58%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.03) 42%,
      rgba(30, 44, 34, 0.1) 72%,
      rgba(30, 44, 34, 0.26) 94%,
      rgba(30, 44, 34, 0.34) 100%);
  box-shadow:
    inset 0 -2px 3px rgba(255, 255, 255, 0.45),   /* light bent through the base */
    inset 0 2px 3px rgba(30, 44, 34, 0.22),       /* shaded upper rim            */
    0 3px 5px -1px rgba(30, 44, 34, 0.28),        /* close grounding shadow      */
    0 6px 12px -4px rgba(30, 44, 34, 0.14);       /* soft falloff                */
  backdrop-filter: blur(1.5px) saturate(1.15);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.15);
  will-change: transform;
}
@media (max-width: 900px) {
  /* skip the refraction blur on phones to keep scrolling smooth */
  .waterdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* ============ SECTION SHELL ================================= */
.section {
  position: relative;
  padding: clamp(6rem, 14vh, 11rem) 0;
}
.section__head { max-width: 46ch; }
.section__title {
  font-size: var(--text-title);
  margin: 1.4rem 0 1.2rem;
}
.section__line { font-size: clamp(1.05rem, 1.6vw, 1.25rem); opacity: 0.85; }


/* ============ KINETIC MANIFESTO ============================= */
/* the tall runway gives the pinned stage room to breathe       */
.kinetic { position: relative; height: 430vh; }
.kinetic__stage {
  position: relative;
  z-index: 7;                 /* rides above the drifting leaf  */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kinetic__line {
  position: absolute;
  font-family: var(--font-display);
  font-size: var(--text-kinetic);
  line-height: 1;
  color: var(--forest);
  text-align: center;
  padding: 0 var(--gutter);
  will-change: transform, opacity, filter;
}
/* hidden only when the motion script is running */
.js .kinetic__line { opacity: 0; }
/* without JS, or with reduced motion, the lines read as a calm
   stacked poem instead of overlapping                          */
html:not(.js) .kinetic, .rm .kinetic { height: auto; }
html:not(.js) .kinetic__stage, .rm .kinetic__stage {
  height: auto;
  flex-direction: column;
  gap: 2.4rem;
  padding: 22vh 0;
}
html:not(.js) .kinetic__line, .rm .kinetic__line {
  position: static;
  opacity: 1 !important;
}
.kinetic__line--resolve {
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-style: italic;
}


/* ============ WHO WE ARE ==================================== */
/* one large real leaf lies across the left of the frame, with
   the title and statement resting on it, matching the Canva
   reference. The leaf sweeps in from the right as the section
   arrives, and the whole scene lifts away as you scroll past.
   The leaf is clipped to this section and exists nowhere else. */
.who {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;           /* contains the leaf to this section */
}
.who__leaf {
  position: absolute;
  left: -9vw;
  top: 52%;
  transform: translateY(-50%);
  /* sized purely by the viewport so the text always lands on the
     leaf at any screen width. It crops past the section edges on
     purpose, for the macro feel                                 */
  width: 78vw;
  z-index: 1;
  pointer-events: none;
}
.who__leaf img {
  width: 100%; height: auto;
  /* lies on its side, toned down to sit calmly in the palette.
     The rotation is animated by main.js from a steeper angle   */
  transform: rotate(-96deg);
  filter: brightness(0.8) saturate(0.72)
          drop-shadow(0 34px 60px rgba(30, 44, 34, 0.35));
  will-change: transform;
}
.who__inner {
  position: relative;
  z-index: 7;
  /* anchored to the leaf, not the page grid, so the words stay
     on the blade at every viewport width                        */
  margin-left: 7vw;
  margin-right: auto;
  max-width: 46vw;
  padding: 14vh 0;
}
/* EDIT TEXT SIZE HERE: the big title resting on the leaf       */
.who__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.2rem, 9.6vw, 8.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: #f7f3e8;
  text-shadow: 0 2px 26px rgba(30, 44, 34, 0.38);
}
/* EDIT TEXT SIZE HERE: the statement resting on the leaf       */
.who__text {
  font-size: clamp(1.3rem, 2.5vw, 2.05rem);
  line-height: 1.52;
  color: #f7f3e8;
  max-width: 33ch;
  margin-top: 1.4rem;
  padding-left: clamp(0.2rem, 1.6vw, 1.5rem);
  text-shadow: 0 1px 20px rgba(30, 44, 34, 0.4);
}
.who__text strong { font-weight: 400; font-style: italic; }


/* ============ WHAT WE DO (SERVICES) ========================= */
/* a pinned scene. The blossom film slides up, then blooms two
   seconds at a time while the four services take turns in the
   open top left air. The choreography lives in main.js         */
.services {
  position: relative;
  height: 430vh;              /* the scroll runway for 5 steps  */
}
.services__stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.services__video {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.services__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 45%;   /* keeps the blossoms to the right */
}
/* the big title, kin to the WHO WE ARE treatment               */
.services__title {
  position: absolute;
  z-index: 3;
  top: clamp(5rem, 12vh, 8.5rem);
  left: clamp(1.4rem, 6vw, 7rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.7rem, 6.4vw, 5.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--forest);
  /* the soft light shadow that keeps type readable on the film */
  text-shadow: 0 0 14px rgba(244, 240, 229, 0.95), 0 0 34px rgba(244, 240, 229, 0.85);
}
.services__steps {
  position: absolute;
  z-index: 3;
  top: clamp(11rem, 30vh, 17rem);
  left: clamp(1.4rem, 6vw, 7rem);
  width: min(46ch, 46vw);
}
.sstep {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  visibility: hidden;
}
.sstep h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.05;
  color: var(--forest);
  margin-bottom: 0.8rem;
  text-shadow: 0 0 14px rgba(244, 240, 229, 0.95), 0 0 30px rgba(244, 240, 229, 0.85);
}
.sstep p {
  font-size: clamp(1.02rem, 1.5vw, 1.26rem);
  color: var(--ink);
  max-width: 44ch;
  text-shadow: 0 0 10px rgba(244, 240, 229, 0.95), 0 0 24px rgba(244, 240, 229, 0.8);
}
.services__end {
  margin-top: 1.2rem;
  font-style: italic;
  color: var(--forest);
}
/* without motion, the scene reads as a simple stacked chapter  */
html:not(.js) .services, .rm .services { height: auto; }
html:not(.js) .services__stage, .rm .services__stage { height: auto; padding: 18vh 0; }
html:not(.js) .services__video, .rm .services__video { position: absolute; }
html:not(.js) .sstep, .rm .sstep {
  position: static;
  opacity: 1 !important;
  visibility: visible !important;
  margin-bottom: 2.4rem;
}


/* ============ SELECTED WORK PREVIEW ========================= */
.workprev__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.workprev__strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  align-items: start;
}
.workprev__item { display: block; }
.workprev__item .imgwrap {
  display: block;          /* required so the crop and radius apply */
  overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 3 / 4;
}
.workprev__item:nth-child(2) { margin-top: clamp(2rem, 6vh, 4.5rem); }
.workprev__item:nth-child(3) { margin-top: clamp(1rem, 3vh, 2.2rem); }
.workprev__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.workprev__item:hover img { transform: scale(1.12); }
.workprev__item .cap {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  opacity: 0.75;
}


/* ============ GALLERY (home) ================================ */
/* the photograph fills the frame end to end; the word GALLERY
   stands over its top and stays fully in view; the line and the
   View pill rest on the open left of the image                  */
.gallery { overflow-x: clip; }   /* the wide word never scrolls the page */
.gallery__stage {
  position: relative;
  z-index: 7;                 /* rides above the drifting leaf   */
}
/* the image, end to end, sets the height of the whole scene     */
.gallery__imgwrap {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.gallery__imgwrap img {
  display: block;
  width: 100%;
  height: auto;
  /* the top and bottom edges melt into the cream page, so the
     band never reads as a hard rectangle break                  */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 96%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 96%, transparent 100%);
}
/* the word sits over the top of the image, never hidden by it   */
.gallery__word {
  position: absolute;
  z-index: 2;
  top: 2%;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(4.4rem, 19.4vw, 18.9rem);   /* 5% larger      */
  line-height: 0.82;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--forest);
}
/* the line and the View pill, aligned under the word's left edge
   (main.js sets the exact left and top to match the G)          */
.gallery__copy {
  position: absolute;
  z-index: 3;
  left: clamp(1.4rem, 10vw, 12rem);
  top: 30%;
}
.gallery__line {
  font-size: clamp(1.21rem, 1.96vw, 1.61rem);   /* 15% larger     */
  color: var(--ink);
}
.gallery__view {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0.55rem 1.5rem;
  font-size: 0.98rem;
}
.gallery__view svg { width: 18px; height: 18px; }
/* warms up on hover like the contact buttons                    */
.gallery__view:hover { background: var(--terra); border-color: var(--terra); }

@media (max-width: 900px) {
  .gallery__word { font-size: clamp(2.94rem, 15.75vw, 6.3rem); top: 1.5%; }
  /* on a phone the line and pill rest below the image           */
  .gallery__copy {
    position: static;
    text-align: center;
    left: auto;
    margin-top: 1.5rem;
  }
}


/* ============ CLIENTS / LOGO MARQUEE ======================== */
.clients { text-align: center; }
.clients .section__head { margin-inline: auto; }

.marquee {
  margin-top: clamp(2.8rem, 7vh, 5rem);
  overflow: hidden;
  position: relative;
  z-index: 7;                 /* rides above the drifting leaf  */
  display: flex;
  /* soft edges so logos dissolve gently, well before the screen
     edge. The many stops follow an eased curve, so the fade has
     no visible start or end line, it just breathes away         */
  -webkit-mask-image: linear-gradient(90deg,
    transparent            0%,
    rgba(0, 0, 0, 0.02)    4%,
    rgba(0, 0, 0, 0.09)    7%,
    rgba(0, 0, 0, 0.24)   10%,
    rgba(0, 0, 0, 0.46)   13%,
    rgba(0, 0, 0, 0.68)   16%,
    rgba(0, 0, 0, 0.86)   19%,
    rgba(0, 0, 0, 0.96)   22%,
    #000                  25%,
    #000                  75%,
    rgba(0, 0, 0, 0.96)   78%,
    rgba(0, 0, 0, 0.86)   81%,
    rgba(0, 0, 0, 0.68)   84%,
    rgba(0, 0, 0, 0.46)   87%,
    rgba(0, 0, 0, 0.24)   90%,
    rgba(0, 0, 0, 0.09)   93%,
    rgba(0, 0, 0, 0.02)   96%,
    transparent          100%);
          mask-image: linear-gradient(90deg,
    transparent            0%,
    rgba(0, 0, 0, 0.02)    4%,
    rgba(0, 0, 0, 0.09)    7%,
    rgba(0, 0, 0, 0.24)   10%,
    rgba(0, 0, 0, 0.46)   13%,
    rgba(0, 0, 0, 0.68)   16%,
    rgba(0, 0, 0, 0.86)   19%,
    rgba(0, 0, 0, 0.96)   22%,
    #000                  25%,
    #000                  75%,
    rgba(0, 0, 0, 0.96)   78%,
    rgba(0, 0, 0, 0.86)   81%,
    rgba(0, 0, 0, 0.68)   84%,
    rgba(0, 0, 0, 0.46)   87%,
    rgba(0, 0, 0, 0.24)   90%,
    rgba(0, 0, 0, 0.09)   93%,
    rgba(0, 0, 0, 0.02)   96%,
    transparent          100%);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-right: clamp(2rem, 4vw, 3.5rem);
  flex-shrink: 0;
  /* MARQUEE SPEED  (EDIT HERE): higher seconds = slower drift  */
  animation: marquee 70s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* each logo sits on a quiet deep green chip: most client marks
   are white, so they need a dark ground to stay visible        */
.marquee__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(130px, 16vw, 190px);
  height: clamp(72px, 9vw, 96px);
  /* EDIT HERE: smaller padding = bigger logo inside the chip    */
  padding: 0.45rem 0.7rem;
  border-radius: 18px;
  background: linear-gradient(160deg, #3a5943, #24382b);
  border: 1px solid rgba(244, 240, 229, 0.08);
  box-shadow: 0 14px 34px rgba(30, 44, 34, 0.18);
}
.marquee__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* every mark is rendered in one quiet cream tone so the strip
     reads calm and even, whatever color the source logo is      */
  filter: brightness(0) invert(0.96) sepia(0.08);
  opacity: 0.92;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { flex-wrap: wrap; justify-content: center; }
}


/* ============ HOW WE WORK: the growing vine ================= */
/* a pinned scene. A single vine grows down the left rail as you
   scroll; each time its tip reaches a step, a bud swells, a leaf
   unfurls, and the step rises in. The vine path is drawn through
   the real node positions in main.js, so it lines up on every
   screen. Without JS or with reduced motion it becomes a quiet
   static list (see fallback below).                            */
.how {
  --rail: clamp(3.6rem, 8vw, 7rem);   /* width of the vine rail  */
  position: relative;
  height: 300vh;              /* EDIT HERE: scene length          */
  z-index: 7;
}
.how__stage {
  position: relative;
  height: 100vh;
  height: 100svh;             /* steady when phone bars collapse */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(4.5rem, 11vh, 8rem) var(--gutter) clamp(3rem, 8vh, 6rem);
}
.how__kicker {
  flex: none;
  margin-bottom: clamp(0.8rem, 2.5vh, 1.8rem);
  /* as large as the WHAT WE DO title, so the two pinned scenes
     speak with one voice                                        */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.7rem, 6.4vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--forest);
  position: relative;
  z-index: 2;                 /* above the product still          */
}
.js .how__kicker { opacity: 0; }      /* the scene brings it in   */

/* the product still resting on the right of the scene (web
   only; the phone keeps the pure vine animation)               */
.how__still {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62vw;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, black 55%, transparent 99%);
  mask-image: linear-gradient(to left, black 55%, transparent 99%);
}
.how__still img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 10%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 10%, black 92%, transparent 100%);
}

.how__steps {
  position: relative;
  z-index: 2;                 /* above the product still          */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: var(--rail);
}
/* the vine lives in the left rail and spans the steps           */
.how__vine {
  position: absolute;
  left: 0; top: 0;
  width: var(--rail);
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hw-vine {
  fill: none;
  stroke: var(--forest);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
}
/* a faint warm light that drifts behind the vine, never frozen  */
.how__glow {
  position: absolute;
  left: calc(var(--rail) * -0.4); top: 0;
  width: calc(var(--rail) * 2); height: 100%;
  pointer-events: none;
  background: radial-gradient(40% 24% at 50% 40%, rgba(191, 106, 58, 0.12), transparent 72%);
  animation: how-drift 15s ease-in-out infinite alternate;
}
@keyframes how-drift {
  from { transform: translate3d(-10%, -8%, 0); }
  to   { transform: translate3d(14%, 12%, 0); }
}

.how__step {
  position: relative;
  display: flex;
  align-items: center;
}
.js .how__step { opacity: 0; }        /* revealed as the vine arrives */

/* the node sits centered on the vine, just left of the words    */
.how__node {
  position: absolute;
  left: calc(var(--rail) / -2);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
}
/* terracotta bud that swells open  (accent use 2 of 4)          */
.how__bud {
  position: absolute;
  left: 0; top: 0;
  width: clamp(13px, 1.5vw, 19px);
  height: clamp(13px, 1.5vw, 19px);
  margin: calc(clamp(13px, 1.5vw, 19px) / -2);
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 0 0 rgba(191, 106, 58, 0.35);
  animation: how-bud-pulse 3.4s ease-out infinite;
}
@keyframes how-bud-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(191, 106, 58, 0.35); }
  70%  { box-shadow: 0 0 0 12px rgba(191, 106, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(191, 106, 58, 0); }
}
/* the leaf grows from the bud, base pinned so it sways from root */
.how__leaf {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(30px, 4vw, 52px);
  margin-left: calc(clamp(30px, 4vw, 52px) / -2);
  transform-origin: 50% 100%;
  line-height: 0;
}
.how__leaf svg { width: 100%; height: auto; display: block; }
.hw-furl { transform-box: fill-box; transform-origin: 50% 100%; }
.hw-leafshape { fill: var(--forest); }
.hw-leafvein  { stroke: rgba(244, 240, 229, 0.4); stroke-width: 2; fill: none; }

.how__text { padding-left: clamp(0.6rem, 1.5vw, 1.4rem); }
/* terracotta chapter numbers  (accent use 2 of 4)               */
.how__num {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: 0.32em;
  color: var(--terra);
  margin-bottom: 0.9rem;
}
.how__text h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.8vw, 4.9rem);   /* big, kin to WHAT WE DO */
  line-height: 1.0;
  margin-bottom: 0.9rem;
}
.how__text p { max-width: 34ch; font-size: var(--text-body); opacity: 0.88; }

/* ---- static fallback: no JS, or reduced motion ---- */
html:not(.js) .how, .rm .how { height: auto; }
html:not(.js) .how__stage, .rm .how__stage {
  height: auto;
  overflow: visible;
  display: block;
  padding: clamp(6rem, 14vh, 11rem) var(--gutter);
}
html:not(.js) .how__steps, .rm .how__steps { display: block; }
html:not(.js) .how__vine, .rm .how__vine { display: none; }
html:not(.js) .how__glow, .rm .how__glow { display: none; }
html:not(.js) .how__step, .rm .how__step {
  opacity: 1 !important;
  margin: clamp(2.6rem, 6vh, 4.4rem) 0;
}
html:not(.js) .how__kicker, .rm .how__kicker { opacity: 1 !important; }


/* ============ GALLERY PAGE ================================== */
/* the word across the whole width, two wide rooms looping under
   it, and the little helm that steers them                      */
.gpage {
  position: relative;
  z-index: 7;
  padding-top: clamp(6.5rem, 15vh, 10.5rem);
  overflow: hidden;
}
.gpage__head { text-align: center; position: relative; z-index: 1; }
.gpage__credit {
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.gpage__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(4.6rem, 19.5vw, 21rem);
  line-height: 0.8;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--forest);
  margin-top: 0.8rem;
}

/* --- the carousel of rooms --- */
.gcar {
  position: relative;
  z-index: 2;                     /* the rooms cover the word    */
  margin-top: clamp(-3.2rem, -5.5vw, -1.2rem);
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
}
.gcar__view {
  overflow: hidden;
  width: 100%;
  perspective: 1400px;            /* the air the curve bends in  */
  touch-action: pan-y;            /* fingers drag rooms sideways */
  /* the leaf cursor stays; dragging never selects the pictures  */
  user-select: none;
  -webkit-user-select: none;
}
.gcar__view img { -webkit-user-drag: none; }
.gcar__track {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  transform-style: preserve-3d;
  will-change: transform;
  /* the first room starts centered                              */
  /* EDIT HERE: keep in sync with .gcar__box width so the first
     room lands centered                                          */
  padding-left: calc((100vw - min(94vw, 1500px)) / 2);
}
.gcar__box {
  flex: 0 0 auto;
  width: min(94vw, 1500px);   /* EDIT HERE: room width (big)      */
  transform-style: preserve-3d;
}
.gcar__card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;       /* tall enough to fill the view     */
  /* a soft, lifted shadow so each room floats off the page       */
  box-shadow: 0 40px 90px -20px rgba(30, 44, 34, 0.34), 0 8px 24px rgba(30, 44, 34, 0.12);
  background: var(--sage);
}
.gcar__card img {
  position: absolute;
  left: -3%; top: -3%;
  width: 106%; height: 106%;     /* slack so the sway shows no edges */
  object-fit: cover;
}
/* the room's name, soft cream shine over the picture            */
.gcar__title {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 6.6rem);
  letter-spacing: 0.02em;
  background: linear-gradient(105deg, #f4f0e5 8%, #dcdcc9 32%, #fdfcf7 50%, #c9cab3 68%, #f4f0e5 92%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 3px 16px rgba(30, 44, 34, 0.35));
  pointer-events: none;
}

/* --- the helm --- */
.gcar__pill {
  margin: clamp(1.8rem, 4.5vh, 3.2rem) auto 0;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0.6rem;
  border-radius: 999px;
  background: rgba(51, 80, 59, 0.08);
  border: 1px solid rgba(51, 80, 59, 0.14);
  backdrop-filter: blur(10px);
}
.gcar__thumb {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
}
.gcar__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcar__label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
  min-width: 7ch;
  text-align: center;
}
.gcar__btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(51, 80, 59, 0.25);
  background: var(--cream);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.gcar__btn:hover { background: var(--forest); color: var(--cream); }
.gcar__btn:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.gcar__btn svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .gcar__track { padding-left: calc((100vw - 90vw) / 2); }
  .gcar__box { width: 90vw; }
  .gcar__card { aspect-ratio: 4 / 5; }   /* taller, fills a phone */
  .gcar__title { font-size: clamp(2.4rem, 11vw, 4rem); }
}

/* without JS, or with reduced motion, the rooms scroll natively */
html:not(.js) .gcar__view, .rm .gcar__view { overflow-x: auto; perspective: none; }
html:not(.js) .gcar__pill, .rm .gcar__pill { display: none; }


/* ============ MISSION LINE ================================== */
/* the single deep green moment. It fades in and out through a
   long gradient, never a hard block                            */
.mission {
  position: relative;
  padding: clamp(16rem, 38vh, 24rem) 0;
  /* the cream melts into deep green through an eased curve with
     many stops, so the eye never finds a seam or a layer edge   */
  background: linear-gradient(180deg,
    rgba(51, 80, 59, 0)    0%,
    rgba(51, 80, 59, 0.02) 5%,
    rgba(51, 80, 59, 0.08) 10%,
    rgba(51, 80, 59, 0.19) 15%,
    rgba(51, 80, 59, 0.34) 20%,
    rgba(51, 80, 59, 0.52) 25%,
    rgba(51, 80, 59, 0.70) 30%,
    rgba(51, 80, 59, 0.85) 35%,
    rgba(51, 80, 59, 0.95) 40%,
    var(--forest)          46%,
    var(--forest)          54%,
    rgba(51, 80, 59, 0.95) 60%,
    rgba(51, 80, 59, 0.85) 65%,
    rgba(51, 80, 59, 0.70) 70%,
    rgba(51, 80, 59, 0.52) 75%,
    rgba(51, 80, 59, 0.34) 80%,
    rgba(51, 80, 59, 0.19) 85%,
    rgba(51, 80, 59, 0.08) 90%,
    rgba(51, 80, 59, 0.02) 95%,
    rgba(51, 80, 59, 0)    100%);
  text-align: center;
  overflow: hidden;
}
/* slow light drifting across the green, keeps the scene alive  */
.mission::before {
  content: "";
  position: absolute; inset: -20%;
  background: radial-gradient(42% 34% at 30% 40%, rgba(244, 240, 229, 0.1), transparent 70%);
  animation: light-drift 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes light-drift {
  from { transform: translate3d(-6%, -4%, 0); }
  to   { transform: translate3d(10%, 8%, 0); }
}
.mission__text {
  position: relative;
  z-index: 7;                 /* rides above the drifting leaf  */
  font-family: var(--font-display);
  font-size: var(--text-mission);
  line-height: 1.12;
  color: var(--cream);
  max-width: 18ch;
  margin-inline: auto;
  padding: 0 var(--gutter);
}


/* ============ CONTACT ======================================= */
.contact { text-align: center; }
.contact .section__head { margin-inline: auto; }
.contact__title { font-size: clamp(3rem, 8vw, 6.5rem); }
.contact__actions {
  margin-top: 2.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
/* contact button warms to terracotta on hover (accent 3 of 4)  */
.contact__actions .btn:hover {
  background: var(--terra);
  border-color: var(--terra);
}
.contact__email {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  border-bottom: 1px solid rgba(51, 80, 59, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.contact__email:hover { color: var(--forest); border-color: var(--forest); }
.contact__socials {
  display: flex;
  gap: 2.2rem;
  margin-top: 0.6rem;
}
.contact__socials a {
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.3s ease, color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.contact__socials a svg { width: 16px; height: 16px; flex: none; }
.contact__socials a:hover { opacity: 1; color: var(--forest); }


/* ============ FOOTER ======================================== */
/* deep ink green, blended in with a long soft ramp             */
.footer {
  position: relative;
  color: var(--cream);
  padding: clamp(10rem, 24vh, 16rem) 0 3rem;
  /* a long eased ramp with many stops, so the cream melts into
     the deep ink with no visible band or layer edge              */
  background: linear-gradient(180deg,
    rgba(30, 44, 34, 0)     0%,
    rgba(30, 44, 34, 0.015) 6%,
    rgba(30, 44, 34, 0.06)  12%,
    rgba(30, 44, 34, 0.13)  18%,
    rgba(30, 44, 34, 0.22)  24%,
    rgba(30, 44, 34, 0.34)  30%,
    rgba(30, 44, 34, 0.47)  36%,
    rgba(30, 44, 34, 0.60)  42%,
    rgba(30, 44, 34, 0.72)  48%,
    rgba(30, 44, 34, 0.82)  54%,
    rgba(30, 44, 34, 0.90)  60%,
    rgba(30, 44, 34, 0.96)  67%,
    var(--ink)              75%,
    var(--ink)              100%);
}
.footer__statement {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 4.6rem);
  line-height: 1.15;
  color: var(--cream);
  max-width: 22ch;
}
/* the single warm word in the footer  (accent use 4 of 4)      */
.footer__statement em {
  font-style: italic;
  color: var(--terra);
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;          /* brand, links, socials on one line */
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(4rem, 10vh, 7rem);
  padding-top: 2.2rem;
  border-top: 1px solid rgba(244, 240, 229, 0.16);
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 2rem;
}
.footer__nav { display: flex; gap: 1.8rem; list-style: none; flex-wrap: wrap; align-items: center; }
.footer__nav a { font-size: 0.95rem; opacity: 0.75; transition: opacity 0.3s; display: inline-flex; align-items: center; gap: 0.45rem; }
.footer__nav a:hover { opacity: 1; }
.footer__nav a svg { width: 15px; height: 15px; flex: none; }
.footer__note { font-size: 0.9rem; opacity: 0.55; width: 100%; margin-top: 2rem; }


/* ============ FALLING LEAF (scroll companion) =============== */
/* the leaf is large and half shown, resting in from the right
   edge of the screen. It drifts and tilts gently with scroll
   but stays local to its corner. It sits UNDER the copy so it
   never blocks reading                                         */
.fall-leaf {
  position: fixed;
  top: 0; left: 0;
  z-index: 5;
  width: clamp(280px, 30vw, 460px);
  pointer-events: none;
  opacity: 0;                 /* revealed by JS once ready      */
  will-change: transform;
}
/* a real photographed leaf with a soft, believable shadow.
   The slight tone down blends it into the muted palette        */
.fall-leaf__img {
  width: 100%; height: auto;
  filter: brightness(0.94) saturate(0.82)
          drop-shadow(0 16px 22px rgba(30, 44, 34, 0.3))
          drop-shadow(0 3px 6px rgba(30, 44, 34, 0.16));
}
/* the short line of quiet text sits BESIDE the leaf, never
   stamped across it                                            */
.fall-leaf__text {
  position: absolute;
  right: 104%;
  top: 46%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  letter-spacing: 0.1em;
  color: rgba(30, 44, 34, 0.62);
  /* a soft cream halo keeps it readable if it crosses imagery  */
  text-shadow: 0 0 10px rgba(244, 240, 229, 0.9), 0 0 22px rgba(244, 240, 229, 0.7);
  opacity: 0;
}
/* when the leaf crosses the dark mission band it gains a soft
   cream glow so it stays visible, and its caption turns light  */
.fall-leaf.on-dark .fall-leaf__img {
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.35))
          drop-shadow(0 0 26px rgba(244, 240, 229, 0.3));
}
.fall-leaf.on-dark .fall-leaf__text { color: rgba(244, 240, 229, 0.75); }


/* ============ CUSTOM CURSOR ================================= */
/* only on precise pointers; touch devices keep native behavior */
@media (hover: hover) and (pointer: fine) {
  body.cursor-on, body.cursor-on a, body.cursor-on button { cursor: none; }
}
.cursor, .cursor-echo {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  pointer-events: none;
  will-change: transform;
  display: none;              /* enabled by JS on fine pointers */
}
.cursor { width: 38px; transition: width 0.25s ease, opacity 0.25s ease; }
.cursor-echo { width: 20px; opacity: 0.28; transition: opacity 0.25s ease; }
.cursor svg, .cursor-echo svg,
.cursor img, .cursor-echo img { width: 100%; height: auto; display: block; }
/* the leaf breathes: a slow sway around its own tip, and a soft
   shadow so it reads as a real thing resting over the page      */
.cursor img {
  filter: drop-shadow(0 3px 4px rgba(30, 44, 34, 0.28));
  transform-origin: 10% 10%;
  animation: cursorSway 3.6s ease-in-out infinite alternate;
}
@keyframes cursorSway {
  from { transform: rotate(-3.5deg); }
  to   { transform: rotate(4deg); }
}
.cursor-echo img { filter: none; animation: none; }
.cursor.is-active { width: 48px; }
.cursor.is-down { width: 32px; }
/* wide open over imagery, inviting the click */
.cursor.is-media { width: 70px; opacity: 0.95; }
/* over embedded widgets the leaf steps aside                    */
body.cursor-suspended .cursor,
body.cursor-suspended .cursor-echo { opacity: 0 !important; }


/* ============ WORK PAGE ===================================== */
.pagehead {
  padding: clamp(11rem, 26vh, 16rem) 0 clamp(3rem, 8vh, 6rem);
}

/* the golden lake still resting on the right of the about page.
   Its left and lower edges melt into the cream so it reads as
   one scene with the copy and the footer below                  */
.about-photo {
  position: absolute;
  top: 0; right: 0;
  width: min(50vw, 900px);
  height: min(115vh, 1020px);
  z-index: 2;                 /* under the copy, over the cream   */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, black 52%, transparent 99%);
  mask-image: linear-gradient(to left, black 52%, transparent 99%);
}
.about-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 64% 50%;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, black 0, black 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0, black 78%, transparent 100%);
}
.pagehead h1 { font-size: clamp(3.2rem, 9vw, 7.5rem); margin-bottom: 1.4rem; }
.pagehead p { font-size: clamp(1.1rem, 1.8vw, 1.35rem); max-width: 52ch; opacity: 0.85; }

/* ============ BOOK A CALL PAGE ============================== */
/* two quiet cards: pick a time, then tell us about the brand    */
.bookcall { padding-top: 0; }
.bookcall .wrap { max-width: 1080px; }
.bookcall__card {
  position: relative;
  z-index: 7;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(51, 80, 59, 0.12);
  border-radius: 26px;
  padding: clamp(1.6rem, 3.2vw, 3rem);
  box-shadow: 0 34px 80px -34px rgba(30, 44, 34, 0.2);
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.bookcall__card h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  color: var(--forest);
  margin-bottom: 0.5rem;
}
.bookcall__card > p { opacity: 0.82; margin-bottom: clamp(1.1rem, 2.5vh, 1.8rem); max-width: 62ch; }
.bookcall__cal .calendly-inline-widget {
  height: 740px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid rgba(51, 80, 59, 0.1);
}
.bookcall__form iframe {
  display: block;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  height: 1180px;
  border: 0;
  border-radius: 16px;
  background: transparent;
}
@media (max-width: 900px) {
  .bookcall__cal .calendly-inline-widget { height: 1000px; }
  .bookcall__form iframe { height: 1300px; }
}

.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  padding: clamp(4rem, 12vh, 8rem) 0;
}
.case:nth-child(even) .case__media { order: 2; }
.case__media {
  overflow: hidden;
  border-radius: 26px;
  aspect-ratio: 4 / 3;
  /* reveal state: JS animates the veil away on scroll          */
  position: relative;
}
.case__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.case:hover .case__media img { transform: scale(1.06); }
.case__brand { font-size: clamp(2rem, 4vw, 3.2rem); }
.case__cat {
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.65;
  margin-bottom: 1rem;
  display: block;
}
.case__what { margin: 1.1rem 0 0.9rem; font-size: 1.08rem; }
.case__outcome { font-style: italic; opacity: 0.8; max-width: 44ch; }


/* ============ ABOUT PAGE ==================================== */
.about-body {
  max-width: 62ch;
  display: grid;
  gap: 1.8rem;
  font-size: clamp(1.12rem, 1.8vw, 1.35rem);
}
.beliefs { margin-top: clamp(4rem, 10vh, 7rem); }
.beliefs h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 2rem; }
.beliefs ul { list-style: none; max-width: 60ch; }
.beliefs li {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--ink);
  padding: 1.6rem 0;
  border-top: 1px solid rgba(51, 80, 59, 0.18);
  line-height: 1.3;
}
.beliefs li:last-child { border-bottom: 1px solid rgba(51, 80, 59, 0.18); }


/* ============ SCROLL REVEAL BASE ============================ */
/* elements start softly hidden; JS releases them on approach.
   If JS ever fails they are still fully visible by default in
   the no-js state (class added by script).                     */
.js .fade-up { opacity: 0; transform: translateY(36px); }


/* ============ RESPONSIVE ==================================== */
@media (max-width: 900px) {
  .who .wrap { grid-template-columns: 1fr; }
  .who__figure { max-width: 420px; }
  .services__grid { grid-template-columns: 1fr; }
  /* the growing vine: narrower rail, words sized to fill a phone */
  .how {
    --rail: clamp(2.6rem, 13vw, 4.2rem);
    height: 280vh;
  }
  .how__text h3 { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .workprev__strip { grid-template-columns: 1fr; }
  .workprev__item:nth-child(2), .workprev__item:nth-child(3) { margin-top: 0; }
  .case { grid-template-columns: 1fr; gap: 2rem; }
  .case:nth-child(even) .case__media { order: 0; }

  .nav__links { display: none; }
  .nav__toggle { display: block; }

  .kinetic { height: 340vh; }

  /* the leaf stays large and half shown on mobile too          */
  .fall-leaf { width: clamp(150px, 42vw, 220px); }
  /* the caption would crowd a small screen, so it rests        */
  .fall-leaf__text { display: none; }

  /* the who we are leaf scene adapts to small screens          */
  .who { min-height: 88svh; }
  .who__leaf {
    width: 125vw;
    left: -34vw;
    top: 50%;
  }
  .who__inner { margin-left: 8vw; max-width: 84vw; }
  .who__title { font-size: clamp(2.6rem, 12.5vw, 4rem); }
  .who__text { max-width: 100%; font-size: 1.18rem; }

  /* the services scene on a small screen: the film peeks in
     from the right while the words own the left               */
  .services { height: 400vh; }
  .services__video video { object-position: 84% 55%; }
  .services__title { font-size: clamp(2.4rem, 11vw, 3.4rem); left: 1.4rem; }
  .services__steps { left: 1.4rem; width: 88vw; top: clamp(9.5rem, 24vh, 13rem); }

  /* the phone keeps the pure vine scene and the clean about page */
  .how__kicker { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .how__still, .about-photo { display: none; }

  /* fewer, lighter droplets on mobile                          */
  .dropfield .waterdrop:nth-child(2n) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scrollcue::after, .mission::before { animation: none; }
  .js .fade-up { opacity: 1; transform: none; }
  .fall-leaf { display: none; }
}

/* ==================== the gallery rooms ==================== */
/* click a room in the carousel and its cover grows, then cracks
   like glass on a canvas. Underneath waits the room itself: a
   giant word and a tall feed of the real work. main.js section
   "gallery rooms" drives all of it.                            */

body.groom-lock { overflow: hidden; }

.groom {
  position: fixed; inset: 0;
  z-index: 75;              /* over the nav, under grain and veil */
  background: transparent;
}
.groom.is-open { background: var(--cream); }

.groom__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 4;               /* the glass flies over the room      */
  pointer-events: none;
}

.groom__scroll {
  position: absolute; inset: 0;
  overflow: hidden;         /* opens up once the cover has grown  */
  z-index: 2;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* the page behind never moves  */
  opacity: 0;
}
.groom.is-open .groom__scroll { overflow-y: auto; overflow-x: hidden; opacity: 1; }

.groom__head {
  padding: clamp(5.5rem, 13vh, 9rem) 4vw clamp(2.4rem, 6vh, 4rem);
  text-align: center;
}
.groom__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.6rem, 16vw, 15rem);
  line-height: 0.85;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--forest);
}

.groom__feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.6rem, 7vh, 5.5rem);
}

.gitem { width: min(88vw, 620px); margin: 0; }
.gitem--video { width: min(76vw, 430px); }

/* the piece itself; the roll folds it from its top edge         */
.gitem__media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px -18px rgba(30, 44, 34, 0.30), 0 6px 20px rgba(30, 44, 34, 0.10);
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
.gitem__media img,
.gitem__media video { display: block; width: 100%; height: auto; }

/* each piece rises softly as it arrives                         */
.js .gitem {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .gitem.is-in { opacity: 1; transform: none; }
.rm .gitem { opacity: 1; transform: none; transition: none; }

/* the little count chip on carousel posts                       */
.gitem__chip {
  position: absolute;
  right: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  background: rgba(244, 240, 229, 0.9);
  color: var(--forest);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.gitem__chip svg { width: 13px; height: 13px; }

/* the way back: a quiet pill that is always there               */
.groom__back {
  position: absolute;
  top: clamp(14px, 2.4vh, 24px);
  left: clamp(14px, 2vw, 26px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.3rem;
  border: 1px solid rgba(51, 80, 59, 0.28);
  border-radius: 999px;
  background: var(--cream);
  color: var(--forest);
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}
.groom__back:hover { background: var(--forest); color: var(--cream); }
.groom__back:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.groom__back svg { width: 15px; height: 15px; }

.groom__foot { display: flex; justify-content: center; padding: clamp(3rem, 8vh, 6rem) 0 clamp(4rem, 10vh, 7rem); }
.groom__return {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid rgba(51, 80, 59, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--forest);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}
.groom__return:hover { background: var(--forest); color: var(--cream); }
.groom__return:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.groom__return svg { width: 15px; height: 15px; }

/* ==================== the lightbox ==================== */
/* one piece, a little bigger, on plain black                   */
.glight {
  position: absolute; inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.2vh, 1.4rem);
  padding: clamp(1rem, 3vh, 2rem) 4vw;
  background: #000;
}
.glight__stage { display: flex; align-items: center; justify-content: center; }
.glight__stage img,
.glight__stage video {
  display: block;
  max-width: 90vw;
  max-height: 76vh;
  width: auto; height: auto;
  border-radius: 8px;
}
.glight__count {
  color: rgba(244, 240, 229, 0.85);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
}
.glight__back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.4rem;
  border: 1px solid rgba(244, 240, 229, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}
.glight__back:hover { background: var(--cream); color: #000; }
.glight__back:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.glight__back svg { width: 15px; height: 15px; }
.glight__close {
  position: absolute;
  top: clamp(12px, 2.4vh, 22px);
  right: clamp(12px, 2vw, 24px);
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 240, 229, 0.45);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  transition: background 0.3s ease, color 0.3s ease;
}
.glight__close:hover { background: var(--cream); color: #000; }
.glight__close:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.glight__close svg { width: 18px; height: 18px; }
.glight__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 240, 229, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--cream);
  transition: background 0.3s ease, color 0.3s ease;
}
.glight__nav:hover { background: var(--cream); color: #000; }
.glight__nav:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.glight__nav svg { width: 20px; height: 20px; }
.glight__nav--prev { left: clamp(10px, 3vw, 36px); }
.glight__nav--next { right: clamp(10px, 3vw, 36px); }

@media (max-width: 900px) {
  .gitem { width: 92vw; }
  .gitem--video { width: min(84vw, 400px); }
  .groom__back { padding: 0.6rem 1.05rem; font-size: 0.8rem; }
  .glight__nav { width: 44px; height: 44px; }
  .glight__stage img, .glight__stage video { max-height: 68vh; }
}

/* the room's covers are buttons now: show it when keys visit    */
.gcar__box:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }