/* ============================================================
   Sprout Media — shared chrome
   Tokens, nav, footer and the pieces every page uses.
   Page-specific layout stays in each page's own <style>.
   ============================================================ */
:root {
  --green-vivid:   #80C41C;
  --green-mid:     #8DC63F;
  --green-deep:    #00742F;
  --green-emerald: #00984A;
  --green-pale:    #AED477;
  --green-ghost:   #D2E288;
  --olive-dark:    #585743;
  --olive-warm:    #A9A791;
  --khaki:         #99997A;
  --offwhite:      #E6E3E1;
  --warm-white:    #F4F2EE;
  --dark-base:     #0F1209;
  --dark-mid:      #141710;
  --dark-card:     #1A1D12;
  --dark-surface:  #1F2317;
  --gold:          #FFCC00;
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --section-pad:   clamp(5rem, 10vw, 9rem);
  --container:     1200px;
  --gutter:        clamp(1.25rem, 5vw, 3rem);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h:         clamp(88px, 11.5vw, 124px);
  --nav-drop:      clamp(15px, 2vw, 26px);     /* shelf hangs below the bar */
  --nav-pad-l:     clamp(30px, 4vw, 64px);
  --nav-pad-r:     clamp(18px, 2.4vw, 44px);
  --nav-logo-h:    clamp(64px, 8.6vw, 111px);   /* 10% larger */
  --nav-logo-ar:   3.3307;                     /* 161.54 / 48.50 — the white
                                                  shelf is sized from this, so it
                                                  must track the logo exactly */
  --nav-curve-w:   clamp(92px, 11vw, 160px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: #000000;
  color: var(--offwhite);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* height:auto matters as much as max-width here. Every <img> on the site
   carries real width/height attributes so the browser can reserve the space
   before the file arrives; without height:auto, any rule that narrows the
   width leaves the attribute height standing and the picture stretches. */
img { max-width: 100%; height: auto; display: block; }
/* Any author `display` beats the UA stylesheet's [hidden] rule, so an element
   hidden via the attribute can still sit over the page eating clicks. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }


/* NAV — solid white bar, always present */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  padding: 0 var(--nav-pad-r) 0 var(--nav-pad-l);
  gap: clamp(1rem, 3vw, 3rem);
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;   /* the two shapes below are the bar */
}
/* ONE white plate: the bar, plus the shelf that hangs below it, plus the
   ogee that joins them. All three are opaque white with no shadow of
   their own — the shadow is applied once to the group, so it traces only
   the outer silhouette. Shadows on the individual pieces were painting
   grey bands across the white where their edges met. */
.nav-plate {
  position: absolute; left: 0; top: 0; right: 0; height: 100%;
  z-index: -1; pointer-events: none;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.13));
}
.nav-plate i { position: absolute; display: block; background: #ffffff; }
.nav-bar-fill { left: 0; right: 0; top: 0; height: 100%; }
.nav-shelf-fill {
  left: 0; top: 0;
  width: calc(var(--nav-pad-l) + var(--nav-logo-h) * var(--nav-logo-ar) + var(--nav-pad-r));
  height: calc(100% + var(--nav-drop));
}
.nav-shelf-fill::after {
  content: ''; position: absolute; left: 100%; bottom: 0;
  width: var(--nav-curve-w); height: var(--nav-drop);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,40 C56,40 88,0 160,0 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

.nav-logo { height: var(--nav-logo-h); width: auto; display: block; }
/* Flex centres the logo in the bar, but the white plate is taller than
   the bar by the shelf's drop. Nudging down by half that drop centres the
   logo in the plate itself — exactly, at every width, rather than by eye.
   A centred flex item is positioned by its MARGIN box, so a top margin
   moves it down by half its value: the margin is the full drop to get a
   half-drop shift. */
.nav-logo-link { flex: 0 0 auto; position: relative; margin-top: var(--nav-drop); }
.nav-links { display: flex; align-items: center; gap: clamp(0.85rem,1.9vw,2.2rem); list-style: none; flex: 0 1 auto; }
.nav-links a {
  font-size: clamp(0.66rem, 0.92vw, 0.78rem);
  font-weight: 500; letter-spacing: 0.08em; color: #585743;
  text-transform: uppercase; transition: color 0.25s; position: relative;
  white-space: nowrap;            /* a nav item never breaks across lines */
}
/* The row is grey throughout so that green carries exactly one meaning: the
   page you are on. Hover darkens and draws the rule rather than going green,
   which would borrow the signal back. */
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px; background: var(--green-vivid); transition: width 0.3s var(--ease-out); }
.nav-links a:hover { color: #2E2D22; }
.nav-links a:hover::after { width: 100%; }
.nav-links a.is-active { color: var(--green-emerald); }
.nav-links a.is-active:hover { color: var(--green-emerald); }
.nav-cta { color: #ffffff !important; background: var(--green-vivid); padding: 0.6rem clamp(0.85rem, 1.5vw, 1.4rem); border-radius: 2px; white-space: nowrap; transition: background 0.25s, transform 0.2s !important; }
.nav-cta::after { display: none !important; }
.nav-cta:hover { color: #ffffff !important; background: var(--green-emerald); transform: translateY(-1px); }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.nav-hamburger span { display: block; width: 26px; height: 2px; background: #585743; transition: all 0.3s; }

/* ── MOBILE NAV — BELONGS HERE, NOT IN A PAGE ───────────────────────────────
   Until 2026-09-18 these rules existed only in index.html's inline CSS. Every
   other page carried the hamburger markup and the shared toggle script, but
   nothing ever revealed the hamburger or hid the desktop link row — so on a
   phone six of the seven pages rendered the full horizontal nav running off
   the right edge, with no way to open the menu at all.

   It survived launch because the home page was the one being checked on the
   phone. These stay in site.css: the nav is shared markup driven by shared JS,
   so its responsive behaviour has to be shared too, or the next page added
   inherits the same bug.

   900px is where the link row stops fitting beside the logo. */
@media (max-width: 900px) {
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }
}
nav.mobile-open .nav-links {
  display: flex; flex-direction: column;
  position: fixed; inset: 0;
  background: #ffffff;
  justify-content: center; align-items: center;
  gap: 2.5rem; z-index: 99;
}
nav.mobile-open .nav-links a { font-size: 1.2rem; }


/* SECTION LABELS */
.section-label {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green-deep); margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.section-label::before { content: ''; display: block; width: 24px; height: 1px; background: currentColor; flex-shrink: 0; }

/* BUTTONS */
.btn-outline { display: inline-block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); border: 1px solid var(--green-deep); padding: 0.8rem 2rem; border-radius: 2px; margin-top: 3rem; transition: background 0.25s, color 0.25s; }

.btn-outline:hover { background: var(--green-deep); color: var(--offwhite); }

.btn-solid { display: inline-block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-base); background: var(--green-vivid); padding: 0.9rem 2.25rem; border-radius: 2px; transition: background 0.25s, transform 0.2s; }

.btn-solid:hover { background: var(--green-emerald); transform: translateY(-2px); }

/* SCROLL REVEAL */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }

.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-delay-1 { transition-delay: 0.1s; }

.reveal-delay-2 { transition-delay: 0.2s; }

.reveal-delay-3 { transition-delay: 0.3s; }

.reveal-delay-4 { transition-delay: 0.4s; }

/* KEYFRAMES */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scrollPulse { 0%,100% { opacity: 0.4; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.15); } }
@keyframes leafPulse { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } }

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* RESPONSIVE */
@media (max-width: 1024px) {
}


/* FOOTER CTA — lives here now, not only on the homepage, which is why the
   headline was sitting flush to the top of its band on the inner pages. */
#footer-cta {
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(4.5rem, 8vw, 7rem);
  background: var(--dark-mid); text-align: center; position: relative;
}
#footer-cta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(128,196,28,0.3), transparent);
}
.footer-cta-headline { font-family: var(--font-display); font-size: clamp(1.9rem, 3.8vw, 3.4rem); font-weight: 300; font-style: italic; color: var(--offwhite); letter-spacing: -0.02em; line-height: 1.2; margin: 0 auto 1.25rem; max-width: 22ch; }
.footer-cta-body { font-size: 1rem; color: var(--olive-warm); max-width: 50ch; margin: 0 auto 2.5rem; line-height: 1.7; }

/* FOOTER
   The wordmark was drawn for light ground, so it sits on its own white plate
   — the same device as the nav's shelf, which makes it read as part of the
   system rather than an apology for the logo. */
footer { background: #000000; padding: 0 0 2.5rem; }
footer > .container { padding-top: clamp(2rem, 3.5vw, 2.75rem); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; text-align: center; }

/* The wordmark was drawn for light ground. Rather than floating a box or a
   glow on the black — both read as the logo apologising for being there —
   the footer opens with a full-width band of light it simply lives on. The
   black picks up again below it. */
.footer-brand {
  position: relative;
  background: #ffffff;
  padding: clamp(0.95rem, 2.2vw, 1.9rem) var(--gutter) clamp(1.75rem, 3vw, 2.4rem);
  display: flex; justify-content: center;
  border-bottom: 2px solid var(--green-vivid);
}
/* The band's foot is the green rule; without something at its head it reads
   as a stripe dropped on the black. This raises the white to meet the logo
   on a wide, shallow arc — the nav's shelf curve, turned the other way up, so
   the two ends of the page are visibly the same piece of thinking. */
.footer-brand::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(26px, 3.4vw, 52px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 52' preserveAspectRatio='none'%3E%3Cpath d='M0,52 C420,52 500,0 800,0 C1100,0 1180,52 1600,52 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
.footer-logo-plate { display: block; line-height: 0; transition: transform 0.5s var(--ease-out); }
.footer-logo-plate:hover { transform: translateY(-2px); }
.footer-logo { height: clamp(54px, 6vw, 76px); width: auto; }

/* Desktop gets a fifth again more logo, and sits it slightly high in the band.
   The wordmark's weight is in its capitals; the descending stem and the rule
   under "your growth resource" are light, so measured centring reads as
   sagging. Taking a few pixels off the top and giving them to the bottom
   settles it. The phone keeps the rule above — at that width it is right. */
@media (min-width: 701px) {
  .footer-logo { height: clamp(65px, 7.2vw, 91px); }
  /* Rebalanced for the current wordmark. The previous values leaned the logo
     UP, because the old file was light at the bottom — a descending stem and
     a hairline rule — and measured centring read as sagging. This wordmark
     carries its blank space the other way round, so the same bias left the
     ink sitting at 42.5% of the band. These numbers put it back on the
     optical centre. Measured from the ink, not from the file's bounding box,
     which is what the eye actually reads. */
  .footer-brand { padding-top: clamp(0.8rem, 1.6vw, 1.6rem); padding-bottom: clamp(1.8rem, 3.2vw, 3rem); }
}

.footer-nav { display: flex; gap: clamp(1rem,2.4vw,2rem); list-style: none; flex-wrap: wrap; justify-content: center; }
.footer-nav a { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive-warm); transition: color 0.25s; }
.footer-nav a:hover { color: var(--green-pale); }

/* Contact on one line, separated by green rules. */
.footer-contact {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.footer-contact a, .footer-contact .legal { font-size: 0.9rem; color: var(--offwhite); letter-spacing: 0.01em; }
.footer-contact a { transition: color 0.25s; }
.footer-contact .legal { color: var(--olive-warm); }
.footer-contact a:hover { color: var(--green-vivid); }
.footer-contact .hash {
  width: 1px; height: 15px; background: var(--green-vivid); opacity: 0.6;
  display: inline-block;
}

.footer-copy { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 0.5px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-copy p { font-size: 0.72rem; color: var(--olive-warm); opacity: 0.55; letter-spacing: 0.04em; }
/* Scoped to .footer-copy on purpose. ".footer-copy p" above outranks a bare
   ".footer-tagline", so the line was silently inheriting the fine-print size
   and opacity meant for the copyright — which is why it was unreadable. This
   selector matches that weight and wins. */
.footer-copy .footer-tagline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-style: italic;
  letter-spacing: 0;
  color: var(--green-pale);
  opacity: 0.95;
}
@media (max-width: 700px) {
  .footer-copy { flex-direction: column; text-align: center; }
  /* The rules come out rather than wrap. A separator that lands at the end of
     a line hangs there with nothing after it, which reads as a mistake; at
     this width the line break separates the items well enough on its own. */
  .footer-contact .hash { display: none; }
  .footer-contact { gap: 0.55rem 1.4rem; }
  .footer-nav { gap: 0.7rem 1.4rem; }
}

/* ============================================================
   REFINEMENTS
   ============================================================ */

/* Brand-tinted selection rather than the browser's blue. */
::selection { background: rgba(128,196,28,0.30); color: #ffffff; }

/* One visible focus treatment for everything keyboard-reachable. */
:focus-visible { outline: 2px solid var(--green-vivid); outline-offset: 3px; border-radius: 2px; }

/* Body copy avoids orphaned last words; headings break on sense. */
p, li, figcaption { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* A QUESTION MARK AFTER AN ITALIC f.
   Cormorant's italic f overhangs its own advance width by about 7px at
   display size — the hook swings out past where the next letter starts. The
   question mark's left sidebearing is almost exactly 7px, so the two clear
   each other by roughly a tenth of a pixel. The headline's -0.02em tracking
   then removes about 1.1px, and they collide. This hands that back, plus
   enough to read as a deliberate space, and it scales with the type because
   it is set in em. */
.kern-q { margin-left: 0.06em; }

/* Old-style figures and real ligatures in the display serif. */
.page-title, .band-title, .story-title, .how-title, .svc-title, .tl-role,
.card-title, .form-title, .footer-cta-headline, .footer-tagline, .lb-cap {
  font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
}

/* Anchored jumps clear the fixed bar. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--nav-h) + var(--nav-drop) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Keyboard users can jump the nav. */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 400; background: var(--green-vivid); color: var(--dark-base);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.7rem 1.4rem; border-radius: 0 0 3px 3px; transition: transform 0.2s;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* A lit hairline where two dark sections meet — the same seam the homepage
   uses under the studio band, reused so sections read as one document. */
.seam { position: relative; }
.seam::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(128,196,28,0.45), transparent);
}

/* Inner-page headers carry a faint echo of the hero's sun so the pages feel
   like the same place, without repeating the animation. */
.page-head {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 50% -40%,
      rgba(128,196,28,0.16) 0%, rgba(128,196,28,0.06) 35%,
      rgba(0,0,0,0) 70%),
    var(--dark-mid) !important;
  /* --pp and --pf are driven by site.js; the layer drifts and fades on scroll */
  background-position: 50% var(--pp, 0px), 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, auto;
}
.page-head .container { position: relative; z-index: 1; opacity: var(--pf, 1); }
@media (prefers-reduced-motion: reduce) {
  .page-head { background-position: 50% 0, 0 0; }
  .page-head .container { opacity: 1; }
}
.page-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(128,196,28,0.35), transparent);
}

/* Print: this is a print designer's site — it should print properly. */
@media print {
  nav, .nav-plate, .nav-hamburger, #footer-cta, .hero-scroll, .evo-wrap,
  #hero-canvas, .lb, .skip-link { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
  .page-head, .band, .gains, .lists, .creds, .contact, .work, footer,
  #studio, #services, #testimonials, #ai-advantage {
    background: #fff !important; padding: 1.5rem 0 !important;
  }
  .page-title, .band-title, .story-title, .how-title, .svc-title, .tl-role,
  .footer-cta-headline { color: #111 !important; }
  p, li, .page-intro, .band-copy p, .svc-copy, .tl-copy { color: #333 !important; }
  a { color: #111 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}

/* Buttons lift on approach and settle on press — the small physical cue that
   separates a crafted page from a styled one. */
.btn-solid, .btn-outline, .hero-cta, .nav-cta, .form-send {
  will-change: transform;
  transition: background 0.3s, color 0.3s, border-color 0.3s,
              transform 0.28s var(--ease-out), box-shadow 0.28s;
}
.btn-solid:hover, .hero-cta:hover, .form-send:hover { box-shadow: 0 10px 26px rgba(128,196,28,0.22); }
.btn-solid:active, .btn-outline:active, .hero-cta:active, .nav-cta:active, .form-send:active {
  transform: translateY(0) scale(0.985); box-shadow: 0 3px 10px rgba(128,196,28,0.18);
}

/* Reveals ride a touch further and slower — closer to film than to a toggle. */
.reveal { transition-duration: 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .btn-solid, .btn-outline, .hero-cta, .nav-cta, .form-send { transition: none; }
}

/* The bar gains a little weight once the page moves under it — depth without
   the cliché of a shrinking header. */
nav .nav-plate { transition: filter 0.5s var(--ease-out); }
body.scrolled nav .nav-plate { filter: drop-shadow(0 6px 26px rgba(0,0,0,0.30)); }

/* OPTICAL SIZE: THE PHOTOGRAPHY ICON.
   Its bounding box is the same as the others (99-100% of the frame), but it
   is a SOLID disc where the rest of the set is open line-and-shape work, so
   it carries 53.4% ink against the family's median 29.1% — 1.84x. Equal box,
   unequal weight, which is exactly why it reads bigger than its neighbours.
   Scaling to 0.91 takes it to roughly 1.5x and settles it into the row. A
   transform is used rather than a width change so nothing reflows. */
.service-icon-wrap img[src*="Shutter"],
.svc-icon img[src*="Shutter"] { transform: scale(0.91); }