/* ============================================================================
   AGAVE: Business Solutions
   Colours are sampled directly from the logo file — do not "tidy" them.
   ============================================================================
   1. Tokens          5. Components
   2. Reset & base    6. Sections
   3. Utilities       7. Effects
   4. Typography      8. Responsive      9. Reduced motion
   ========================================================================== */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* Sampled from AGAVE Business Solutions Logo.png */
  --ivory:        #F5F1E9;   /* logo background */
  --ivory-2:      #EFEADD;   /* recessed panels */
  --ivory-3:      #E7E1D2;   /* hairline fills */
  --ink:          #2A2D2B;   /* logo side leaves */
  --sage:         #8C976E;   /* logo centre leaf */

  /* Derived, hue-matched to --sage (H 76°) */
  --ink-soft:     #5C6159;
  --ink-faint:    #8A8E84;
  --sage-deep:    #74805A;
  --sage-bright:  #A9B686;   /* sage that glows on the dark section */
  --agave:        #2B3323;   /* deep agave green — dark section only */
  --agave-2:      #364028;

  /* Warm glow sampled from the closing shot of the AGAVE logo animation —
     the soft light the mark resolves into. Drives the "sunlight" layer. */
  --sunlight:     #F0C989;

  --line:         rgba(42, 45, 43, .13);
  --line-strong:  rgba(42, 45, 43, .26);
  --line-dark:    rgba(245, 241, 233, .16);

  /* Soft, hue-matched washes for the hero image and the ambient gradient
     that flows behind everything after Selected Work. */
  --wash-1: color-mix(in srgb, var(--sage-bright) 46%, var(--ivory) 54%);
  --wash-2: color-mix(in srgb, var(--sage)        34%, var(--ivory) 66%);
  --wash-3: color-mix(in srgb, var(--agave-2)     24%, var(--ivory) 76%);
  --wash-4: color-mix(in srgb, var(--sage-deep)   28%, var(--ivory) 72%);
  --wash-5: color-mix(in srgb, var(--sunlight)    30%, var(--ivory) 70%);

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-soft:  cubic-bezier(.25, .46, .45, .94);

  --shell: 1280px;
  --gutter: 1.4rem;
  --nav-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Ambient gradient: shows through every transparent section from
     Capabilities onward (Hero/Work/Why/Footer stay opaque on top of it).
     --flow-x/--flow-y are nudged by scroll position in main.js, which
     drifts the blobs so the colours keep mixing as you scroll. --sun-x/
     --sun-y drift a slower, warmer glow on top — the "sunlight" moving. */
  --flow-x: 0%;
  --flow-y: 0%;
  --sun-x: 0%;
  --sun-y: 0%;
  background:
    radial-gradient(42% 38% at calc(74% + var(--sun-x)) calc(14% + var(--sun-y)), color-mix(in srgb, var(--sunlight) 55%, transparent), transparent 72%),
    radial-gradient(48% 44% at calc(18% + var(--flow-x)) calc(16% + var(--flow-y)), var(--wash-1), transparent 68%),
    radial-gradient(52% 48% at calc(86% - var(--flow-y)) calc(28% + var(--flow-x)), var(--wash-2), transparent 66%),
    radial-gradient(58% 52% at calc(24% - var(--flow-x)) calc(84% - var(--flow-y)), var(--wash-3), transparent 70%),
    radial-gradient(54% 50% at calc(82% + var(--flow-y)) calc(90% - var(--flow-x)), var(--wash-4), transparent 68%),
    radial-gradient(60% 54% at calc(50% + var(--flow-y)) calc(50% - var(--flow-x)), var(--wash-5), transparent 74%),
    var(--ivory);
}

/* Warm stone texture behind the whole page. Fixed + negative z-index so it
   paints behind every section (position:fixed still forces its own stacking
   context, but a negative z-index guarantees that context sits before all
   normal in-flow content, not after) — no page content ever sits under it.
   Soft-light blend lets the ambient colour wash above tint it, and opaque
   sections (Hero interior card, Work, Why, Footer) simply cover it. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: url("assets/img/texture-stone.webp") center/cover no-repeat;
  opacity: .5;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Fine grain over the whole page, not just the hero — keeps every wash of
   colour from reading as a flat digital gradient. Fixed + very low opacity,
   so it never interferes with legibility or clicks. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .03;
  mix-blend-mode: multiply;
  pointer-events: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
::selection { background: var(--sage); color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

/* =============================================================
   3. UTILITIES
   ============================================================= */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  padding: .7rem 1.1rem; border-radius: 6px;
  background: var(--ink); color: var(--ivory);
  font-size: .9rem; font-weight: 500;
}
.skip-link:focus { top: 1rem; }

/* Shared SVG mark colouring */
.nav-mark, .footer-mark, .form-mark, .divider-mark { fill: var(--ink); }
.mk-sage { fill: var(--sage); }
.mk-rule { stroke: var(--ivory); stroke-width: 1.4; fill: none; }
.divider-mark path { stroke: var(--ink); stroke-width: 1.1; fill: none; opacity: .5; }
.divider-mark .mk-sage-s { stroke: var(--sage); opacity: 1; stroke-width: 1.4; }
.divider-mark circle { fill: var(--ink); opacity: .5; }
.divider-mark circle.mk-sage { fill: var(--sage); opacity: 1; }

/* =============================================================
   4. TYPOGRAPHY
   ============================================================= */
h1, h2, h3, h4 { font-weight: 400; line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.eyebrow::before {
  content: ""; flex: none;
  width: 6px; height: 6px;
  background: var(--sage);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin-top: .5rem;
}
.section-title em { font-style: italic; color: var(--sage-deep); }

.section-note {
  margin-top: .7rem;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.lede {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* =============================================================
   5. COMPONENTS
   ============================================================= */

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .78rem 1.35rem;
  border-radius: 999px;
  font-size: .88rem; font-weight: 500; letter-spacing: .01em;
  transition: background .45s var(--ease-out), color .45s var(--ease-out),
              border-color .45s var(--ease-out), transform .45s var(--ease-out);
  will-change: transform;
}
.btn .arr { transition: transform .45s var(--ease-out); }
.btn:hover .arr { transform: translate(2px, -2px); }

.btn-solid { background: var(--ink); color: var(--ivory); }
.btn-solid:hover { background: var(--sage-deep); transform: translateY(-2px); }

.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--ivory); transform: translateY(-2px); }

.btn-lg { padding: 1rem 1.8rem; font-size: .95rem; }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .5s var(--ease-out), background .5s var(--ease-out);
}
@supports (backdrop-filter: blur(12px)) {
  .nav { background: color-mix(in srgb, var(--ivory) 72%, transparent); backdrop-filter: blur(14px) saturate(160%); }
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: var(--nav-h);
}
.nav-brand { display: inline-flex; align-items: center; gap: .6rem; }
.nav-mark { width: 20px; height: auto; }
.nav-word {
  font-size: 1.02rem; font-weight: 500;
  letter-spacing: .3em; text-indent: .3em;
}
.nav-word-i { color: var(--sage); }
.nav-links { display: none; gap: 2rem; }
.nav-links a {
  position: relative; font-size: .86rem; color: var(--ink-soft);
  transition: color .4s var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: var(--sage);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: none; }

.nav-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; margin-right: -8px; align-items: center;
}
.nav-burger span {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform .45s var(--ease-out), opacity .3s;
}
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.nav-panel {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .6rem var(--gutter) 1.6rem;
  border-top: 1px solid var(--line);
  background: var(--ivory);
}
.nav-panel[hidden] { display: none; }
.nav-panel a {
  padding: .75rem 0; font-size: 1.35rem; font-family: var(--serif);
  border-bottom: 1px solid var(--line);
}
.nav-panel .btn { margin-top: 1rem; align-self: flex-start; }

/* ---- Divider: abstract three-leaf mark ---- */
.divider {
  display: flex; align-items: center; gap: 1.2rem;
  max-width: var(--shell); margin: 0 auto;
  padding-inline: var(--gutter);
}
.divider-rule { flex: 1; height: 1px; background: var(--line); }
.divider-mark { width: 84px; height: auto; flex: none; }

/* =============================================================
   6. SECTIONS
   ============================================================= */
.section { padding-block: clamp(1.7rem, 4vw, 3.2rem); }
.section-head { max-width: 62ch; }

/* ---- HERO: the logo animation as a full-bleed cinematic background.
   Text overlays the left where the render's negative space and the scrim
   leave it readable; the sculpture reads on the right third via
   object-position (--hero-obj-x below and its breakpoint overrides —
   tuned by eye against the actual render, not by formula). ---- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--ivory); /* floor colour: shows for an instant before paint */
  --hero-obj-x: 46%; /* mobile default: closer to centre so the sculpture stays whole */
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-bg-video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-obj-x) center;
  will-change: transform;
}

/* Readability scrim: warm ivory, not black. Mobile default is a flatter,
   stronger wash — below 640px the copy runs the full width and can sit
   over any part of the frame, so there's no "clear" side to fade into.
   From 640px up (once the sculpture has room to sit clear of the text)
   it becomes the left-to-right fade: strong behind the copy, gone by the
   time it reaches the sculpture on the right. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ivory) 86%, transparent) 0%,
    color-mix(in srgb, var(--ivory) 76%, transparent) 60%,
    color-mix(in srgb, var(--ivory) 82%, transparent) 100%);
  pointer-events: none;
}
@media (min-width: 640px) {
  .hero-scrim {
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--ivory) 82%, transparent) 0%,
      color-mix(in srgb, var(--ivory) 55%, transparent) 30%,
      color-mix(in srgb, var(--ivory) 16%, transparent) 56%,
      transparent 76%);
  }
}

/* Soft warm glow: drifts as the hero scrolls out, reading as sunlight
   shifting across the architecture (--shadow-x/--shadow-y, main.js). */
.hero-shadow {
  position: absolute; inset: -12%; z-index: 1;
  background: radial-gradient(46% 42% at calc(18% + var(--shadow-x, 0%)) calc(26% + var(--shadow-y, 0%)), color-mix(in srgb, var(--sunlight) 34%, transparent), transparent 72%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* Fine grain keeps the video from reading as a flat digital loop — kept
   extremely restrained so it never looks grainy or dirty. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .02;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(3.5rem, 9vw, 5.5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.hero-copy { max-width: 34rem; }
.hero-copy > * + * { margin-top: .7rem; }

.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.7rem, 8vw, 4.6rem);
  line-height: .99;
  letter-spacing: -.02em;
  max-width: 15ch;
}
.hero-title em { font-style: italic; color: var(--sage-deep); }

.hero-motto {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  color: var(--sage-deep);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---- Hero primary CTA: an organic blob, not a pill — the one place on the
   site that departs from the standard button, so it reads as a deliberate
   flourish rather than an inconsistency. */
.btn-blob {
  --blob: 63% 37% 54% 46% / 43% 37% 63% 57%;
  justify-content: center;
  padding: 1.5rem 2.7rem;
  border-radius: var(--blob);
  background: linear-gradient(155deg, var(--ivory-3), var(--wash-4));
  color: var(--ink);
  font-size: 1rem;
  box-shadow: 0 24px 46px -24px rgba(42, 45, 43, .35);
  transition: border-radius .7s var(--ease-out), transform .4s var(--ease-out),
              box-shadow .4s var(--ease-out), background .5s var(--ease-out);
}
.btn-blob:hover {
  border-radius: 46% 54% 63% 37% / 57% 63% 37% 43%;
  background: linear-gradient(155deg, var(--sage-bright), var(--sage-deep));
  color: var(--ivory);
  transform: translateY(-3px);
  box-shadow: 0 30px 56px -26px rgba(42, 45, 43, .42);
}

/* ---- SELECTED WORK ---- */
/* Transparent + tighter top pad: closes the gap left by the hero, and lets
   the ambient wash/texture flow through unbroken from the divider above. */
.section.work { padding-top: clamp(1rem, 2.5vw, 1.7rem); position: relative; z-index: 1; }
.work-item { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.work-item--featured { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }
.work-rest > .work-item { padding-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid var(--line); }

.work-media { position: relative; }
.work-media-link { display: block; }
.work-shot {
  width: 100%; height: auto;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(42,45,43,.05), 0 18px 44px -22px rgba(42,45,43,.34);
  transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out);
  will-change: transform;
}
/* Scoped to .work-media (the image itself), not the whole card — hovering
   the title/text below no longer triggers the lift. */
.work-media:hover .work-shot {
  transform: scale(1.018) translateY(-4px);
  box-shadow: 0 1px 2px rgba(42,45,43,.05), 0 30px 60px -24px rgba(42,45,43,.42);
}

.work-phone {
  display: none;
  position: absolute; right: 3%; bottom: -8%;
  width: 15%; height: auto;
  filter: drop-shadow(0 22px 40px rgba(42,45,43,.3));
  transition: transform .8s var(--ease-out);
}
.work-media:hover .work-phone { transform: translateY(-8px); }

/* Three independent phone mockups side by side (e.g. an app case study) —
   each image keeps its own rounded corners and shadow, rather than one
   rectangular photo containing three screens. */
.work-media--phones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 2.8vw, 1.2rem);
  align-items: end;
}
.work-media--phones .work-shot {
  border-radius: 11% / 5%;
}

.work-body { margin-top: .9rem; }
.work-meta {
  display: flex; align-items: baseline; gap: .7rem;
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-faint);
}
.work-num {
  font-size: .7rem; letter-spacing: .1em;
  color: var(--sage-deep); font-weight: 500;
}
.work-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 3rem);
  margin-top: .6rem;
}
.work-item--featured .work-title { font-size: clamp(2.4rem, 9vw, 4.2rem); }
.work-line {
  margin-top: .9rem; max-width: 48ch;
  color: var(--ink-soft); font-size: 1.02rem;
}
.work-item--featured .work-line { font-size: 1.12rem; max-width: 52ch; }

.work-visit {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .7rem;
  font-size: .82rem; font-weight: 500;
  color: var(--sage-deep);
  transition: color .4s var(--ease-out);
}
.work-visit .arr { display: inline-block; transition: transform .45s var(--ease-out); }
.work-visit:hover { color: var(--ink); }
.work-visit:hover .arr { transform: translate(2px, -2px); }

.work-demo-note {
  margin-top: .7rem;
  font-size: .8rem; font-style: italic;
  color: var(--ink-faint);
}

/* ---- Case study (native <details>, JS only smooths the height) ---- */
.case { margin-top: .8rem; }
.case-summary {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 0;
  font-size: .82rem; font-weight: 500; letter-spacing: .04em;
  color: var(--ink); cursor: pointer;
  border-bottom: 1px solid var(--line-strong);
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out);
  list-style: none;
}
.case-summary::-webkit-details-marker { display: none; }
.case-summary::marker { content: ""; }
.case-summary:hover { color: var(--sage-deep); border-color: var(--sage); }

.case-summary-close { display: none; }
.case[open] > .case-summary > .case-summary-open { display: none; }
.case[open] > .case-summary > .case-summary-close { display: inline; }

.case-chevron {
  width: 9px; height: 9px; flex: none;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .5s var(--ease-out);
}
.case[open] > .case-summary .case-chevron { transform: translateY(1px) rotate(-135deg); }

.case-panel { padding-top: 1rem; }
.case-grid { display: grid; gap: .95rem; }
.case-block h4 {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 500;
  padding-bottom: .7rem; margin-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.case-block p { font-size: .95rem; color: var(--ink-soft); max-width: 56ch; }
.case-services { display: flex; flex-wrap: wrap; gap: .45rem; }
.case-services li {
  padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: .78rem; color: var(--ink-soft);
}

/* ---- SERVICES: bordered card grid ---- */
.capabilities { position: relative; overflow: clip; }
.capabilities::before {
  content: ""; position: absolute; z-index: -1;
  top: -8%; right: -6%;
  width: clamp(260px, 32vw, 480px); aspect-ratio: 1;
  background: linear-gradient(160deg, var(--sage-bright), transparent 70%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  opacity: .16;
  filter: blur(2px);
}

.cap-grid {
  display: grid; gap: 1.1rem;
  margin-top: clamp(.9rem, 2vw, 1.4rem);
}
/* Each card carries its own accent (drawn from the existing brand palette,
   nothing new introduced) — a deliberate darkening ramp left to right, from
   the brighter greens through the deep agave tone and into the neutral
   near-black of the last card, so hovering across the row reads as one
   continuous gradient rather than four unrelated highlights. */
.cap-card:nth-child(1) { --cap-a: var(--sage);    --cap-b: var(--sage-deep); }
.cap-card:nth-child(2) { --cap-a: var(--sage-deep); --cap-b: var(--agave-2); }
.cap-card:nth-child(3) { --cap-a: var(--agave-2);   --cap-b: var(--agave); }
.cap-card:nth-child(4) { --cap-a: var(--ink-soft);  --cap-b: var(--ink); }

.cap-card {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ivory) 40%, transparent), transparent 65%);
  transition: background .4s var(--ease-soft), border-color .4s var(--ease-soft), color .4s var(--ease-soft),
              transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.cap-card:hover {
  background: linear-gradient(155deg, var(--cap-a), var(--cap-b));
  border-color: transparent;
  color: var(--ivory);
  transform: translateY(-6px) rotate(-.3deg);
  box-shadow: 0 30px 56px -26px color-mix(in srgb, var(--cap-b) 65%, transparent);
}
.cap-card-num {
  display: block;
  font-family: var(--serif); font-size: 3.2rem; line-height: 1;
  color: var(--sage-bright); opacity: .4;
  transition: color .4s var(--ease-soft), opacity .4s var(--ease-soft);
}
.cap-card:hover .cap-card-num { color: var(--ivory); opacity: .5; }
.cap-card-title {
  font-family: var(--serif); font-size: 1.6rem;
  margin-top: .6rem;
}
.cap-card-desc { margin-top: .9rem; color: var(--ink-soft); font-size: .95rem; transition: color .4s var(--ease-soft); }
.cap-card:hover .cap-card-desc { color: color-mix(in srgb, var(--ivory) 88%, transparent); }
.cap-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.cap-tags li {
  padding: .32rem .75rem; border-radius: 999px;
  background: var(--ivory-2);
  font-size: .76rem; color: var(--ink-soft);
  transition: background .4s var(--ease-out), color .4s var(--ease-out);
}
.cap-card:hover .cap-tags li { background: color-mix(in srgb, var(--ivory) 22%, transparent); color: var(--ivory); }

/* ---- WHY AGAVE (dark) ---- */
.why {
  background:
    radial-gradient(60% 80% at 88% 8%, color-mix(in srgb, var(--sage-bright) 30%, transparent), transparent 70%),
    radial-gradient(50% 60% at 6% 100%, color-mix(in srgb, var(--sage) 22%, transparent), transparent 68%),
    var(--agave);
  color: var(--ivory);
  position: relative;
  overflow: clip;
  padding-block: clamp(1.5rem, 3.25vw, 2.6rem);
}
.why::before {
  content: ""; position: absolute; z-index: 0;
  right: clamp(-4rem, -2vw, -1rem); bottom: clamp(-5rem, -6vw, -2rem);
  width: clamp(220px, 26vw, 380px); aspect-ratio: 34 / 88;
  background: linear-gradient(190deg, var(--sage-bright), transparent 85%);
  clip-path: polygon(50% 0%, 100% 42%, 50% 100%, 0% 42%);
  opacity: .14;
}
.why-inner { position: relative; z-index: 1; display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.why-title { color: var(--ivory); }
.why-text > * + * { margin-top: .6rem; }
.why-text p { color: rgba(245, 241, 233, .74); font-size: 1rem; max-width: 60ch; }
.why-lead {
  font-size: 1.16rem !important;
  color: var(--ivory) !important;
  line-height: 1.55;
}
.why-kicker {
  margin-top: 1rem !important;
  padding-top: .8rem;
  border-top: 1px solid var(--line-dark);
  color: var(--sage-bright) !important;
  font-size: 1.05rem !important;
}

/* ---- PROCESS: four stages in a static row with arrow connectors — no
   scroll-jacking, no click-to-select. Cards only ever react to :hover
   (and keyboard :focus-within), never a persisted "selected" state. ---- */
.process { position: relative; overflow: clip; }
.process::before {
  content: ""; position: absolute; z-index: -1;
  left: clamp(-2rem, -3vw, -.5rem); bottom: -4%;
  width: clamp(140px, 15vw, 220px); aspect-ratio: 1;
  border: 1.5px solid var(--sage);
  transform: rotate(45deg);
  opacity: .14;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: clamp(.9rem, 2vw, 1.4rem);
}

.step {
  flex: 1 1 0;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ivory) 45%, transparent), transparent 70%);
  transition: background .4s var(--ease-soft), border-color .4s var(--ease-soft), transform .4s var(--ease-out);
}
.step:hover, .step:focus-within {
  background: var(--ivory-2);
  border-color: var(--sage);
  transform: translateY(-4px);
}

.step-head { display: flex; align-items: center; gap: .65rem; }
.step-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  color: var(--sage-deep);
}
.step-icon svg { width: 22px; height: 22px; }
.step-head h3 { font-family: var(--serif); font-size: 1.4rem; }
.step p { margin-top: .7rem; color: var(--ink-soft); font-size: .92rem; }

.step-arrow {
  display: none;
  color: var(--sage);
  font-size: 1.3rem;
  line-height: 1;
}

/* Desktop: a single row, arrows filling the gaps between cards. */
@media (min-width: 860px) {
  .steps { flex-direction: row; align-items: stretch; gap: 0; }
  .step-arrow {
    display: flex; align-items: center; justify-content: center;
    flex: none; width: clamp(1.6rem, 3vw, 2.8rem);
  }
}

/* ---- Risk-free guarantees bar ---- */
.guarantees-bar {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.guarantees-bar li { position: relative; padding: .3rem 0; }
.guarantees-bar li + li { padding-left: 1.2rem; margin-left: 1.2rem; }
.guarantees-bar li + li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; transform: translateY(-50%);
  background: var(--sage); border-radius: 50%;
}

/* ---- ABOUT ---- */
.partners { display: grid; gap: 1.1rem; margin-top: clamp(1.25rem, 3vw, 2rem); }
.partner {
  position: relative;
  padding: .8rem .7rem .95rem;
  margin-inline: -.7rem;
  border-top: 1px solid var(--line);
  border-radius: 20px;
  transition: background .6s var(--ease-out), transform .5s var(--ease-out), box-shadow .6s var(--ease-out);
}
.partner:hover {
  background: linear-gradient(160deg, var(--ivory-2), var(--wash-1));
  transform: translateY(-10px);
  box-shadow: 0 30px 54px -28px rgba(42, 45, 43, .38);
}
/* Rhomboid leaf mark — the same silhouette as the side leaves in the AGAVE
   logo, not a generic avatar. Gradient fill + soft glow give it weight
   against the ivory ground; the centre partner gets the taller sage leaf,
   mirroring how the logo's centre leaf reads taller than the sides. */
.partner-leaf {
  display: block;
  width: 20px; height: 48px; margin-bottom: 1.3rem;
  background: linear-gradient(165deg, var(--sage-bright), var(--sage-deep));
  clip-path: polygon(50% 0%, 100% 42%, 50% 100%, 0% 42%);
  filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--sage-deep) 45%, transparent));
  transition: transform .6s var(--ease-out), filter .6s var(--ease-out);
}
.partner--center .partner-leaf {
  width: 24px; height: 64px;
  background: linear-gradient(165deg, var(--sage), var(--agave-2));
  filter: drop-shadow(0 14px 24px color-mix(in srgb, var(--agave-2) 45%, transparent));
}
.partner:hover .partner-leaf {
  transform: translateY(-8px) scale(1.12) rotate(-6deg);
  filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--sage-deep) 55%, transparent));
}
.partner-name {
  font-family: var(--serif); font-size: clamp(1.9rem, 6vw, 2.6rem);
  transition: color .5s var(--ease-out);
}
.partner:hover .partner-name { color: var(--sage-deep); }
.partner-role {
  position: relative;
  margin-top: .45rem; padding-bottom: .6rem;
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--sage-deep);
}
.partner-role::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px; background: var(--sage);
  transition: width .5s var(--ease-out);
}
.partner:hover .partner-role::after { width: 2.75rem; }
.partner-note { margin-top: .9rem; color: var(--ink-soft); font-size: .95rem; max-width: 32ch; }

/* ---- FINAL CTA ---- */
.cta {
  position: relative; overflow: clip;
  padding-block: clamp(1.8rem, 4.5vw, 3.5rem);
  text-align: center;
  background: radial-gradient(60% 70% at 50% 30%, var(--wash-1), transparent 72%);
}
.cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta-title {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 11vw, 5.5rem);
  line-height: 1;
}
.cta-note { margin-top: .75rem; max-width: 42ch; color: var(--ink-soft); }
.cta .btn { margin-top: 1.2rem; }

/* ---- FOOTER ---- */
.footer {
  position: relative; overflow: clip;
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem) 1rem;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(50% 65% at 82% 0%, var(--wash-2), transparent 70%),
    var(--ivory-2);
}
.footer-top { display: grid; gap: 1.4rem; }
.footer-mark { width: 26px; height: auto; }
.footer-tag {
  margin-top: .55rem; max-width: 26ch;
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.25;
}
.footer-nav { display: grid; gap: 1rem; }
.footer-nav h3 {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .9rem; font-weight: 500;
}
/* Roomy vertical padding keeps these at a comfortable touch size on phones. */
.footer-nav a, .footer-link-btn {
  display: block; padding: .5rem 0;
  font-size: .9rem; color: var(--ink-soft); text-align: left;
  transition: color .4s var(--ease-out);
}
.footer-nav a:hover, .footer-link-btn:hover { color: var(--sage-deep); }
.footer-plain { font-size: .9rem; color: var(--ink-faint); padding: .5rem 0; }

/* Easter egg: A, G and V are already the founders' initials */
.footer-egg {
  margin-top: 1.75rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.egg-word {
  font-family: var(--serif);
  font-size: clamp(3.6rem, 20vw, 10rem);
  line-height: .9; letter-spacing: .04em;
  color: var(--ink-faint);
}
.egg-word span { transition: color .7s var(--ease-out), transform .7s var(--ease-out); display: inline-block; }
.footer-egg.is-lit .egg-i { color: var(--sage); transform: translateY(-.045em); }
.footer-egg.is-lit .egg-i:nth-of-type(2) { transition-delay: .1s; }
.footer-egg.is-lit .egg-i:nth-of-type(3) { transition-delay: .2s; }

.egg-names {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 1.6rem;
  margin-top: .6rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: opacity .8s var(--ease-out) .35s, transform .8s var(--ease-out) .35s;
}
/* Hidden only when JS can reveal it again */
.js .egg-names { opacity: 0; transform: translateY(6px); }
.footer-egg.is-lit .egg-names { opacity: 1; transform: none; }

.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  margin-top: 1.25rem; padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--ink-faint);
}

/* ---- MODAL FORM ---- */
.modal {
  width: min(620px, calc(100vw - 1.6rem));
  max-height: min(88vh, 900px);
  /* The global reset sets margin:0, which kills the dialog's native centring. */
  margin: auto;
  padding: 0; border: 0; border-radius: 14px;
  background: var(--ivory);
  color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(42, 45, 43, .5);
  overflow: auto;
  overscroll-behavior: contain;
}
.modal::backdrop { background: rgba(42, 45, 43, .55); }
@supports (backdrop-filter: blur(4px)) {
  .modal::backdrop { backdrop-filter: blur(5px); }
}

.form { position: relative; padding: clamp(1.8rem, 5vw, 2.8rem); }
.modal-close {
  position: absolute; top: .9rem; right: .9rem;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.4rem; line-height: 1; color: var(--ink-faint);
  transition: background .4s var(--ease-out), color .4s var(--ease-out);
}
.modal-close:hover { background: var(--ivory-3); color: var(--ink); }

.form-head { margin-bottom: 2.2rem; }
.form-mark { width: 20px; height: auto; margin-bottom: 1.1rem; }
.form-title { font-family: var(--serif); font-size: clamp(1.9rem, 6vw, 2.5rem); }
.form-sub { margin-top: .6rem; color: var(--ink-faint); font-size: .9rem; }

.field { margin-bottom: 1.9rem; border: 0; padding: 0; }
.field legend, .field-label {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .84rem; font-weight: 500; margin-bottom: .9rem;
  padding: 0;
}
.field-num { font-size: .7rem; color: var(--sage-deep); letter-spacing: .1em; }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { position: relative; }
.pill input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.pill span {
  display: block; padding: .58rem 1.05rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .85rem; color: var(--ink-soft);
  transition: all .4s var(--ease-out);
}
.pill:hover span { border-color: var(--sage); color: var(--ink); }
.pill input:checked + span {
  background: var(--ink); border-color: var(--ink); color: var(--ivory);
}
.pill input:focus-visible + span { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

.form textarea, .form input[type="email"], .form input[type="text"] {
  width: 100%; padding: .85rem 1rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--ivory-2);
  border: 1px solid var(--line); border-radius: 8px;
  resize: vertical;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.form textarea::placeholder, .form input::placeholder { color: var(--ink-faint); }
.form textarea:focus, .form input[type="email"]:focus, .form input[type="text"]:focus {
  outline: none; border-color: var(--sage); background: var(--ivory);
}

.field-row { display: grid; gap: .8rem; }
@media (min-width: 480px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.form-error {
  margin-bottom: 1rem; padding: .7rem .95rem;
  border-radius: 8px; border: 1px solid rgba(168, 74, 58, .3);
  background: rgba(168, 74, 58, .07);
  color: #8E4133; font-size: .86rem;
}
.form-error[hidden] { display: none; }
.form-submit { width: 100%; justify-content: center; }

.form-done { text-align: center; padding: 1.5rem 0 .5rem; }
.form-done[hidden] { display: none; }
.form-done-mark { width: 26px; height: auto; margin: 0 auto 1.4rem; }
.form-done h3 { font-family: var(--serif); font-size: 2rem; }
.form-done p { margin: .9rem auto 1.8rem; max-width: 34ch; color: var(--ink-soft); font-size: .95rem; }

/* =============================================================
   7. EFFECTS
   ============================================================= */

/* Scroll reveals — only armed when JS is present (see <head> flag) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
/* Defensive: a split/marked element must never stay invisible */
.js [data-reveal][data-split] { opacity: 1; transform: none; }

/* Hero content reveal — pure CSS, never depends on JS running */
.js .ov { animation: ovIn .85s var(--ease-out) both; }
.js .ov-1 { animation-delay: .2s; }
.js .ov-2 { animation-delay: .32s; }
.js .ov-3 { animation-delay: .46s; }
.js .ov-4 { animation-delay: .58s; }
.js .ov-5 { animation-delay: .7s; }
@keyframes ovIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Safety net: if the entrance animation never runs (throttled tab, blocked
   animations), JS forces the hero visible at 3s — long after it should be done. */
.ov-safe .ov { opacity: 1 !important; transform: none !important; }

/* ---- About: partners enter like the logo (centre, then sides) ---- */
.js .partner { opacity: 0; transform: translateY(30px); }
.js .partners.is-revealed .partner {
  animation: ovIn .9s var(--ease-out) both;
}
.js .partners.is-revealed .partner--center { animation-delay: 0s; }
.js .partners.is-revealed [data-partner="left"]  { animation-delay: .16s; }
.js .partners.is-revealed [data-partner="right"] { animation-delay: .25s; }

/* ---- Case study height animation (JS-driven, degrades to instant) ---- */
.case-panel.is-animating { overflow: hidden; }

/* =============================================================
   8. RESPONSIVE
   ============================================================= */
@media (min-width: 540px) {
  :root { --gutter: 2rem; }
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.2rem; }
}

@media (min-width: 720px) {
  .partners { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .work-phone { display: block; }
  .work-item--featured .work-media { margin-bottom: 1.5rem; }
}

/* Responsive crop: a landscape 16:9 render inside viewports of very
   different proportions needs a different object-position at each, not
   one desktop value stretched down. Tuned by eye against the actual
   render at each tier — lower values push the (horizontally centred)
   sculpture further right as the container gets proportionally wider
   and crops more aggressively. */
@media (min-width: 640px) {
  .hero { --hero-obj-x: 28%; }
}
@media (min-width: 860px) {
  .hero { --hero-obj-x: 24%; }
}
@media (min-width: 1280px) {
  .hero { --hero-obj-x: 18%; }
}

@media (min-width: 960px) {
  :root { --gutter: 2.6rem; --nav-h: 80px; }

  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger, .nav-panel { display: none !important; }

  .why-inner { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }

  .cap-grid { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

  /* Non-featured work items: two-column editorial, alternating */
  .work-rest > .work-item {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.6rem;
    align-items: center;
  }
  .work-rest > .work-item .work-body { margin-top: 0; }
  .work-rest > .work-item:nth-child(even) .work-media { order: 2; }
  .case-grid { grid-template-columns: 1fr; gap: .85rem; }
  .work-item--featured .case-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.5rem; }

  .work-item--featured .work-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem 4rem;
    align-items: end;
  }
  .work-item--featured .work-meta { grid-column: 1 / -1; }
  .work-item--featured .work-line { padding-bottom: .5rem; }
  .work-item--featured .case { grid-column: 1 / -1; margin-top: 1.1rem; }

  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 2rem; }
}

@media (min-width: 1280px) {
  .work-rest > .work-item { gap: 2.25rem; }
}

/* =============================================================
   9. REDUCED MOTION — only genuinely intrusive things
   Windows ships this ON by default in many setups, so micro-
   interactions (hovers, fades, reveals) deliberately stay put.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .work-item:hover .work-shot { transform: none; }
  .work-item:hover .work-phone { transform: none; }
}