/* ==========================================================================
   Rowan & Vale — landscape gardeners, Cotswolds
   --------------------------------------------------------------------------
   Design direction: stone and timber, not green. The photographs supply all the
   greenery a garden site needs, so the interface is built from the other half of
   the subject's world — Cotswold limestone, chalk, raw oak, weathered lead. Green
   appears only as the deepest ink and on the one primary button. The template
   answer for a landscaper is a green website; this is the opposite, and it lets
   the gardens be the only saturated thing on the page.

   Signature: every tall photograph is cut with a shallow arched top. It is the
   shape of a garden gate and a Cotswold doorway, it costs nothing, and it is the
   one thing this site will be remembered by. It appears on the hero, the moving
   strip and the work panels, and it flattens to a square edge as the strip video
   expands to fill the screen.
   ========================================================================== */

/* [hidden] must beat any class that sets a display value. One rule, at the top,
   covering every element — a per-element pairing only covers the ones you
   remembered, and the one you forget is the one that breaks. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* ---- ground and ink ---- */
  --chalk:   #F3F5EF;   /* page */
  --paper:   #FBFCF9;   /* raised cards */
  --sisal:   #E7E1D3;   /* warm band */
  --ink:     #16201A;   /* body text          15.3:1 on chalk */
  --ink-2:   #4A5851;   /* secondary text      6.3:1 on chalk */
  --yew:     #22452C;   /* primary             9.6:1 on chalk, 10.7:1 white on it */
  --yew-d:   #16301E;
  --moss:    #5E7F4A;
  --oak:     #9A7549;   /* 3.75:1 — rules, large type and borders only, never body */
  --oak-ink: #7A5A33;   /* 5.6:1 — the timber tone when it has to carry words */
  --line:    #DCDDD2;
  --line-2:  #C7C3B4;

  /* ---- measure ---- */
  --gut: clamp(20px, 4.2vw, 68px);
  --sec: clamp(76px, 9vw, 140px);
  --max: 1280px;

  /* How far the estimator runs out over the photograph. One number, used by the
     card and by the label sitting flush above it. */
  --ec-over: clamp(28px, 13vw, 215px);

  --r:    3px;
  --r-lg: 8px;
  --arch: 49% 49% var(--r) var(--r) / 13% 13% 0 0;   /* the signature */

  --fx:   cubic-bezier(.16, 1, .3, 1);   /* expo-out: most of the distance in the first third */
  --fx-2: cubic-bezier(.4, 0, .2, 1);

  --z-nav: 50;
  --z-wa:  60;
}

/* ==========================================================================
   Type
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: Karla, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;      /* clip, never hidden — hidden makes body a scroll container */
}

h1, h2, h3, .fr {
  font-family: Fraunces, ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 96;
  letter-spacing: -0.018em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.65rem, 6.1vw, 5.2rem); }
h2 { font-size: clamp(2.05rem, 4.2vw, 3.4rem); line-height: 1.07; }
h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.18;
  font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 30;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.lead {
  font-size: clamp(1.06rem, 1.35vw, 1.2rem);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 46ch;
}

/* Small uppercase labels. Generous tracking, oak ink so they read as a mark rather
   than as a heading that lost its nerve. */
.eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--oak-ink);
  margin: 0 0 1.15rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--oak);
  flex: none;
}
.eyebrow--right { justify-content: flex-end; }
.eyebrow--right::before { order: 2; }
.eyebrow--bare::before { display: none; }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec { padding-block: var(--sec); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- buttons -------------------------------------------------------------- */

.btn {
  --bg: var(--yew);
  --fg: #FBFCF9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s var(--fx-2), transform .22s var(--fx-2), border-color .22s var(--fx-2);
}
.btn:hover { background: var(--yew-d); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { background: rgba(22,32,26,.045); border-color: var(--ink-2); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--bg); }

/* A text link that draws its own underline on hover, left to right. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  color: var(--yew);
  background-image: linear-gradient(var(--yew), var(--yew));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s var(--fx);
  padding-bottom: 2px;
}
.tlink:hover { background-size: 100% 1px; }
.tlink svg { transition: transform .3s var(--fx); }
.tlink:hover svg { transform: translateX(3px); }

/* ---- focus ---------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--yew);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip {
  position: absolute; left: 12px; top: -60px;
  z-index: 100;
  background: var(--yew); color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 var(--r-lg) var(--r-lg);
  text-decoration: none; font-weight: 600; font-size: .9rem;
  transition: top .18s var(--fx-2);
}
.skip:focus { top: 0; }

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

/* ==========================================================================
   Navigation — a floating pill, not a bar
   ========================================================================== */

.nav {
  position: fixed;
  top: clamp(12px, 1.6vw, 20px);
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--max), calc(100% - var(--gut)));
  z-index: var(--z-nav);
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .18rem .5rem .18rem 1.35rem;
  border-radius: 999px;
  background: rgba(251, 252, 249, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(22, 32, 26, .09);
  box-shadow: 0 1px 2px rgba(22,32,26,.04), 0 10px 30px -14px rgba(22,32,26,.20);
  transition: box-shadow .35s var(--fx-2), background-color .35s var(--fx-2);
}
.nav.is-stuck .nav-pill {
  background: rgba(251, 252, 249, .93);
  box-shadow: 0 1px 2px rgba(22,32,26,.05), 0 16px 40px -16px rgba(22,32,26,.30);
}

.brand {
  /* Padding, NOT flex. Making this a flex container turns each inline child into its
     own flex item and the whitespace between them collapses, so "Rowan & Vale" sets
     as "Rowan&Vale". Padding gets the 44px touch height without touching layout. */
  display: inline-block;
  padding-block: .72rem;
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-variation-settings: "SOFT" 18, "WONK" 0, "opsz" 40;
  font-weight: 500;
  font-size: 1.16rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}
.brand i { font-style: normal; color: var(--oak-ink); }

.nav-links {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links > li { position: relative; }

.nav-a {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  padding: .62rem .82rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s var(--fx-2), color .2s var(--fx-2);
}
.nav-a:hover { background: rgba(22,32,26,.055); }
.nav-a svg { transition: transform .25s var(--fx-2); opacity: .55; }
.nav-a[aria-expanded="true"] { background: rgba(22,32,26,.06); }
.nav-a[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---- the Work dropdown: the SEO surface ----------------------------------- */

.drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(560px, calc(100vw - 2 * var(--gut)));
  padding: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(22,32,26,.34);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s var(--fx-2), transform .3s var(--fx), visibility .24s;
}
.nav-links > li.is-open .drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.drop h4 {
  margin: 0 0 .75rem;
  font-family: inherit;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oak-ink);
}
.drop ul { list-style: none; margin: 0; padding: 0; }
.drop li + li { margin-top: .1rem; }
.drop a {
  display: block;
  padding: .42rem .6rem;
  margin-inline: -.6rem;
  border-radius: 8px;
  font-size: .9rem;
  text-decoration: none;
  color: var(--ink);
  transition: background-color .18s var(--fx-2), color .18s var(--fx-2);
}
.drop a:hover { background: rgba(34,69,44,.07); color: var(--yew); }
.drop a small {
  display: block;
  font-size: .75rem;
  color: var(--ink-2);
  margin-top: .05rem;
}

.nav-burger { display: none; }

/* ==========================================================================
   Hero
   --------------------------------------------------------------------------
   A split, deliberately: copy on flat chalk on the left, the photograph bleeding
   off the right edge. No type sits on a photograph anywhere on this page, so
   there is no scrim to measure and nothing breaks when a picture is swapped.
   The estimator card is the thing that ties the two halves together — it starts
   in the copy column and runs over the edge of the photograph.
   ========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(96px, 11vh, 138px);
  padding-bottom: clamp(48px, 6vw, 90px);
  overflow: clip;
}

.hv {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}

.hv-copy { padding-top: clamp(4px, 2vh, 30px); }

.hv-copy h1 { margin-bottom: 1.4rem; }
.hv-copy h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 110;
  color: var(--yew);
}

.hv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.4rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-2);
}
.hv-meta b { color: var(--ink); font-weight: 600; }

/* The photograph runs the full height of the hero and bleeds to the right edge of the
   VIEWPORT, not to the edge of the centred container — so on a wide screen it has to
   escape half the dead space either side of `.wrap` as well as the gutter. The arch
   stays below the top of the section on purpose: it is the signature, and cropping it
   off against the browser chrome would throw it away. */
.hv-shot {
  position: relative;
  margin-right: calc(-1 * (max(0px, (100vw - var(--max)) / 2) + var(--gut)));
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--sisal);
  min-height: clamp(460px, 76vh, 760px);
  z-index: 1;
}
.hv-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- the estimator -------------------------------------------------------- */

/* Flush right against the copy column, so it lines up with the rule above it and
   stays on chalk — the card runs out over the photograph, but no type does. */
.ec-head {
  margin: clamp(26px, 3.4vw, 46px) 0 .7rem;
  text-align: right;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ink-2);
}

.ec {
  position: relative;
  z-index: 4;
  width: calc(100% + var(--ec-over));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(22,32,26,.03), 0 28px 60px -30px rgba(22,32,26,.30);
  padding: clamp(20px, 2.4vw, 30px);
}

.ec-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}
.ec-top h2 {
  font-size: clamp(1.3rem, 1.9vw, 1.62rem);
  font-variation-settings: "SOFT" 22, "WONK" 0, "opsz" 36;
  letter-spacing: -0.012em;
}
.ec-step {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.f { margin-bottom: 1.25rem; }
.f:last-of-type { margin-bottom: 0; }

.f > label, .f > .flab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .005em;
  margin-bottom: .6rem;
}
.f .fval {
  font-weight: 700;
  color: var(--yew);
  font-variant-numeric: tabular-nums;
}
.f .fhint { font-weight: 400; color: var(--ink-2); font-size: .78rem; }

/* range */
.rng { width: 100%; -webkit-appearance: none; appearance: none; background: none; height: 44px; cursor: grab; touch-action: none; }
.rng:active { cursor: grabbing; }
.rng::-webkit-slider-runnable-track { height: 4px; border-radius: 999px;
  background: linear-gradient(var(--yew), var(--yew)) 0/var(--fill,40%) 100% no-repeat, var(--line-2); }
.rng::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line-2); }
.rng::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--yew); }
.rng::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -9px;
  border-radius: 50%; background: var(--paper);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(22,32,26,.12), 0 4px 10px -3px rgba(22,32,26,.3);
  transition: transform .18s var(--fx-2);
}
.rng::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(22,32,26,.12), 0 4px 10px -3px rgba(22,32,26,.3);
}
.rng:hover::-webkit-slider-thumb { transform: scale(1.12); }
.rng:active::-webkit-slider-thumb { transform: scale(1.02); }

.rng-scale {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: var(--ink-2);
  margin-top: -.55rem;   /* pulls back the extra height the 44px touch target adds */
}

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .855rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  min-height: 42px;
  transition: background-color .18s var(--fx-2), border-color .18s var(--fx-2), color .18s var(--fx-2);
}
.chip:hover { border-color: var(--ink-2); background: rgba(22,32,26,.035); }
.chip .tick {
  width: 15px; height: 15px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  transition: background-color .18s var(--fx-2), border-color .18s var(--fx-2);
}
.chip .tick svg { width: 9px; height: 9px; opacity: 0; transition: opacity .16s var(--fx-2); }
.chip[aria-pressed="true"] {
  background: rgba(34,69,44,.075);
  border-color: var(--yew);
  color: var(--yew);
}
.chip[aria-pressed="true"] .tick { background: var(--yew); border-color: var(--yew); }
.chip[aria-pressed="true"] .tick svg { opacity: 1; }

/* segmented control */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 3px;
  background: rgba(22,32,26,.05);
  border-radius: 12px;
}
.seg button {
  padding: .6rem .4rem;
  border: 0; border-radius: 9px;
  background: transparent;
  font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  min-height: 42px;
  transition: background-color .2s var(--fx-2), color .2s var(--fx-2), box-shadow .2s var(--fx-2);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(22,32,26,.10), 0 2px 6px -2px rgba(22,32,26,.16);
}

.ec-foot { margin-top: 1.5rem; }
.ec-note {
  margin-top: .85rem;
  font-size: .745rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
}

/* ---- estimator result ----------------------------------------------------- */

.ec-fig {
  text-align: center;
  padding: .3rem 0 1.2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.ec-fig .ec-figv {
  display: block;
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-variation-settings: "SOFT" 24, "WONK" 0, "opsz" 110;
  font-weight: 400;
  font-size: clamp(2.1rem, 3.5vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ec-fig .ec-figl {
  display: block;
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--ink-2);
}

.ec-lines { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.ec-lines li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem 1rem;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: .855rem;
}
.ec-lines li:last-child { border-bottom: 0; }
.ec-lines .ecl-q { grid-column: 1; font-size: .74rem; color: var(--ink-2); margin-top: -.3rem; }
.ec-lines .ecl-v { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.ec-when {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.ec-when div { background: var(--paper); padding: .8rem .9rem; }
.ec-when dt {
  font-size: .69rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--oak-ink); margin-bottom: .25rem;
}
.ec-when dd { margin: 0; font-size: .92rem; font-weight: 600; }

.ec-actions { display: grid; gap: .5rem; }

/* the send form */
.ec-fields { display: grid; gap: .7rem; margin-bottom: 1rem; }
.fld label {
  display: block;
  font-size: .76rem; font-weight: 600;
  margin-bottom: .3rem;
}
.fld input {
  width: 100%;
  padding: .72rem .85rem;
  font: inherit; font-size: .92rem;
  color: var(--ink);
  background: var(--chalk);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  min-height: 46px;
  transition: border-color .18s var(--fx-2), background-color .18s var(--fx-2);
}
.fld input:focus { background: var(--paper); border-color: var(--yew); outline-offset: 1px; }
.fld input::placeholder { color: #97A099; }
.fld .err { margin-top: .3rem; font-size: .76rem; color: #9A2A21; font-weight: 600; }

.ec-done { text-align: center; padding: 1.2rem 0 .4rem; }
.ec-done .ec-tick {
  width: 46px; height: 46px; margin: 0 auto 1rem;
  border-radius: 50%; background: rgba(34,69,44,.1);
  display: grid; place-items: center; color: var(--yew);
}
.ec-done h3 { margin-bottom: .5rem; }
.ec-done p { font-size: .9rem; color: var(--ink-2); max-width: 34ch; margin-inline: auto; }

/* ==========================================================================
   The moving work strip
   --------------------------------------------------------------------------
   Five tiles in a row; the middle one is film and grows to fill the screen as the
   section scrolls. The growing tile is ABSOLUTELY POSITIONED inside the sticky
   stage, so changing its width and height reflows nothing else on the page —
   which is the only reason it is safe to animate those two properties at all.
   ========================================================================== */

.mw { background: var(--chalk); }

.mw-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 80px);
  padding-bottom: clamp(36px, 4vw, 60px);
}
.mw-head h2 { max-width: 13ch; }
.mw-head p {
  text-align: right;      /* copy written to the alignment and broken by hand in the markup */
  text-wrap: nowrap;
  font-size: .95rem;
  color: var(--ink-2);
  flex: none;
}

.mw-track { position: relative; height: 300vh; }

.mw-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  display: grid;
  place-items: center;
  --p: 0;    /* growth   0 -> 1 */
  --q: 0;    /* overlay  0 -> 1 */
}

.mw-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.3vw, 22px);
  width: 100%;
  padding-inline: var(--gut);
}

.mw-t {
  position: relative;
  flex: 0 0 auto;
  width: clamp(90px, 13vw, 210px);
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--sisal);
  opacity: calc(1 - var(--p) * 1.7);
  transform: translateX(calc(var(--dir, 0) * var(--p) * 9vw)) scale(calc(1 - var(--p) * .08));
  will-change: transform, opacity;
}
.mw-t img { width: 100%; height: 100%; object-fit: cover; }
.mw-t--slot { visibility: hidden; }      /* holds the middle gap; the film sits over it */

.mw-grow {
  position: absolute;
  left: 50%;
  top: 50%;
  width:  calc(var(--w0) + (100vw   - var(--w0)) * var(--p));
  height: calc(var(--h0) + (100svh  - var(--h0)) * var(--p));
  transform: translate(-50%, -50%);
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--ink);
  will-change: width, height;
  --w0: clamp(90px, 13vw, 210px);
  --h0: calc(var(--w0) * 4 / 3);
}
/* The arch belongs to a tile, not to a full-bleed frame, so both of its corners
   interpolate to square as the film fills the screen. Leaving it in place puts a
   curved wedge of page colour across the top of the video. */
.mw-grow {
  --a: calc(1 - var(--p));
  border-radius:
    calc(49% * var(--a)) calc(49% * var(--a)) var(--r) var(--r) /
    calc(13% * var(--a)) calc(13% * var(--a)) 0 0;
}

.mw-grow > img,
.mw-grow > video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mw-grow > video { opacity: 0; transition: opacity .6s var(--fx-2); }
.mw-grow.is-playing > video { opacity: 1; }

.mw-over {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(24px, 5vw, 68px);
  color: #FBFCF9;
  opacity: var(--q);
  transform: translateY(calc((1 - var(--q)) * 20px));
  /* The only place on this site where type sits on a photograph, so the scrim is
     measured rather than eyeballed — see _measure.py, which samples the 99.5th
     percentile luminance behind each line. The worst pixel decides, not the average
     one, and the worst pixel here is lit limestone paving. */
  background: linear-gradient(to top,
    rgba(10,15,11,.70) 0%,
    rgba(10,15,11,.58) 32%,
    rgba(10,15,11,.34) 60%,
    rgba(10,15,11,.12) 82%,
    rgba(10,15,11,0) 100%);
  padding-top: clamp(90px, 16vh, 190px);
}
.mw-over h3 {
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  max-width: 18ch;
  color: #FBFCF9;
  margin-bottom: .6rem;
}
.mw-over p {
  max-width: 44ch;
  font-size: clamp(.92rem, 1.1vw, 1.04rem);
  color: rgba(251,252,249,.94);
}

.mw-cap {
  position: absolute;
  left: 50%; bottom: clamp(18px, 3vh, 34px);
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2);
  opacity: calc(1 - var(--p) * 2.2);
  white-space: nowrap;
}

/* ==========================================================================
   Work — the expanding panels
   ========================================================================== */

.wk { background: var(--sisal); }

.wk-head { text-align: center; padding-bottom: clamp(34px, 4vw, 56px); }
.wk-head .eyebrow { justify-content: center; }
.wk-head p { margin-inline: auto; margin-top: 1rem; }

.wk-row {
  display: flex;
  gap: 10px;
  height: clamp(380px, 52vh, 560px);
}

.wk-p {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #FBFCF9;
  transition: flex-grow .62s var(--fx);
}
.wk-p.is-on { flex-grow: 2.9; }

.wk-p img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform .8s var(--fx), filter .5s var(--fx-2);
  filter: saturate(.86) brightness(.82);
}
.wk-p.is-on img { transform: scale(1); filter: saturate(1) brightness(.94); }

.wk-p::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,18,14,.52) 0%, rgba(12,18,14,.18) 45%, rgba(12,18,14,.02) 78%);
  transition: opacity .5s var(--fx-2);
}

.wk-b {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(52px, 7vw, 86px) clamp(16px, 1.6vw, 26px) clamp(16px, 1.6vw, 26px);
  display: grid;
  gap: .5rem;
  /* Sized to the copy block rather than to the card, so it still covers the text when
     the block grows — on the wide first card at phone width the copy is most of the
     card's height, and a bottom-third gradient leaves the heading on bare stone. */
  background: linear-gradient(to top,
    rgba(12,18,14,.90) 0%, rgba(12,18,14,.80) 48%, rgba(12,18,14,.44) 76%, rgba(12,18,14,0) 100%);
}
.wk-b h3 {
  font-size: clamp(1.02rem, 1.35vw, 1.3rem);
  color: #FBFCF9;
  /* Collapsed panels are narrow. Let the label wrap rather than truncate. */
}
.wk-x {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .6s var(--fx), opacity .38s var(--fx-2);
}
.wk-p.is-on .wk-x { grid-template-rows: 1fr; opacity: 1; }
/* Must match the actual child, which is a span, not a div — a `0fr` grid row only
   collapses if the child itself carries `min-height:0` and clips. When this selector
   missed, each panel kept its paragraph's height and the labels sat at five different
   heights down the row. */
.wk-x > * { overflow: hidden; min-height: 0; display: block; }
.wk-x p {
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(251,252,249,.82);
  max-width: 34ch;
  margin-bottom: .7rem;
}
.wk-more {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  color: #FBFCF9;
  border-bottom: 1px solid rgba(251,252,249,.42);
  padding-bottom: 2px;
}
.wk-n {
  text-shadow: 0 1px 6px rgba(12,18,14,.55);
  position: absolute;
  top: clamp(14px, 1.4vw, 20px);
  right: clamp(14px, 1.4vw, 20px);
  z-index: 2;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: rgba(251,252,249,.62);
}

.wk-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: .875rem;
  color: var(--ink-2);
}

/* ==========================================================================
   Process — numbers right-aligned against a hairline, text left of it
   ========================================================================== */

.pr { background: var(--chalk); }

.pr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(32px, 5vw, 86px);
  align-items: center;
}

.pr-film {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--sisal);
}
.pr-film img, .pr-film video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.pr-film video { opacity: 0; transition: opacity .7s var(--fx-2); }
.pr-film.is-playing video { opacity: 1; }

.pr-tag {
  position: absolute;
  left: 50%; bottom: clamp(16px, 2vw, 26px);
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  background: rgba(251,252,249,.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.pr-tag i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--moss);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

.pr-steps { list-style: none; margin: 2rem 0 0; padding: 0; }
.pr-s {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0 clamp(16px, 1.8vw, 28px);
  padding: clamp(16px, 1.8vw, 24px) 0;
  border-top: 1px solid var(--line);
}
.pr-s:last-child { border-bottom: 1px solid var(--line); }
.pr-s .pr-n {
  grid-row: 1 / span 2;
  text-align: right;            /* a real optical column, not a bullet */
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 60;
  font-size: 1.55rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--oak);
  padding-top: .1rem;
}
.pr-s h3 { margin-bottom: .35rem; }
.pr-s p { font-size: .92rem; color: var(--ink-2); margin: 0; max-width: 42ch; }

/* ==========================================================================
   Before and after
   ========================================================================== */

.ba { background: var(--sisal); }
.ba-head { text-align: center; padding-bottom: clamp(30px, 3.5vw, 50px); }
.ba-head .eyebrow { justify-content: center; }

.ba-stage {
  position: relative;
  max-width: 1020px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 30px 70px -34px rgba(22,32,26,.5);
  touch-action: pan-y;          /* let the page still scroll vertically over the slider */
  --x: 50%;
  --xn: .5;     /* the same position, unitless, for the label fades */
}
.ba-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}
.ba-after { clip-path: inset(0 0 0 var(--x)); }

.ba-lab {
  position: absolute;
  top: clamp(12px, 1.6vw, 20px);
  z-index: 3;
  padding: .38rem .78rem;
  border-radius: 999px;
  background: rgba(12,18,14,.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #FBFCF9;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  pointer-events: none;
}
/* Each label fades out once the divider has passed it, so neither ever sits over
   the image it is not naming. */
.ba-lab--b { left: clamp(12px, 1.6vw, 20px);  opacity: clamp(0, calc((var(--xn) - .08) * 12), 1); }
.ba-lab--a { right: clamp(12px, 1.6vw, 20px); opacity: clamp(0, calc((.92 - var(--xn)) * 12), 1); }

.ba-line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--x);
  width: 2px;
  margin-left: -1px;
  background: rgba(251,252,249,.92);
  z-index: 4;
  pointer-events: none;
}
.ba-line::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(251,252,249,.96);
  box-shadow: 0 3px 14px rgba(12,18,14,.4);
}
.ba-grip {
  position: absolute;
  top: 50%; left: var(--x);
  transform: translate(-50%, -50%);
  z-index: 5;
  color: var(--ink);
  pointer-events: none;
}

/* The real control is a range input laid over the picture: keyboard, screen reader
   and touch all come free, and no custom drag code has to reimplement them. */
.ba-rng {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 6;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  background: none;
}
.ba-rng::-webkit-slider-thumb { -webkit-appearance: none; width: 54px; height: 100%; }
.ba-rng::-moz-range-thumb { width: 54px; height: 200px; border: 0; opacity: 0; }
.ba-rng:focus-visible ~ .ba-line::after { outline: 3px solid var(--yew); outline-offset: 3px; }

.ba-cap {
  max-width: 56ch;
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  text-align: center;
  font-size: .9rem;
  color: var(--ink-2);
}

/* ==========================================================================
   Closing band and footer
   ========================================================================== */

.cta { padding-bottom: 0; background: var(--chalk); }

.cta-shot {
  position: relative;
  height: clamp(240px, 34vw, 420px);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  background: var(--sisal);
}
.cta-shot img { width: 100%; height: 100%; object-fit: cover; }

/* The type sits on flat green under the photograph, never on it. */
.cta-card {
  background: var(--yew);
  color: #FBFCF9;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: clamp(38px, 5vw, 72px) clamp(24px, 4vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.cta-card h2 { color: #FBFCF9; max-width: 16ch; }
.cta-card p { color: rgba(251,252,249,.8); font-size: 1rem; max-width: 40ch; margin-top: 1rem; }
.cta-acts { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; }
.cta-acts .btn { background: #FBFCF9; color: var(--yew); }
.cta-acts .btn:hover { background: #fff; }
.cta-acts .btn--ghost { background: transparent; color: #FBFCF9; border-color: rgba(251,252,249,.38); }
.cta-acts .btn--ghost:hover { background: rgba(251,252,249,.1); border-color: rgba(251,252,249,.7); }

.foot { background: var(--chalk); padding-block: clamp(52px, 6vw, 88px) 2rem; }

.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(26px, 3vw, 52px);
  padding-bottom: clamp(34px, 4vw, 54px);
  border-bottom: 1px solid var(--line);
}
.foot h4 {
  margin: 0 0 1rem;
  font-family: inherit;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oak-ink);
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li + li { margin-top: .5rem; }
.foot a { font-size: .9rem; text-decoration: none; color: var(--ink-2); transition: color .18s var(--fx-2); }
.foot a:hover { color: var(--yew); }

.foot-brand .brand { font-size: 1.5rem; margin: 0 0 .6rem; display: inline-block; }
.foot-brand p { font-size: .9rem; color: var(--ink-2); max-width: 30ch; }

.foot-contact { text-align: right; }
.foot-contact a { display: block; }
.foot-contact .big {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 40;
  font-size: 1.32rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: .2rem;
}

.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.4rem;
  padding-top: 1.5rem;
  font-size: .78rem;
  color: var(--ink-2);
}
.foot-base p { margin: 0; }

/* The honesty line. A fictional firm says so, plainly, where anyone can read it. */
.foot-fict {
  margin-top: 1.1rem;
  padding: .9rem 1.1rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.foot-fict b { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */

.wa {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: var(--z-wa);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 56px;
  padding: 0 18px;
  border-radius: 999px;
  background: #1F8F4E;
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 6px 18px -6px rgba(12,18,14,.5), 0 2px 5px rgba(12,18,14,.16);
  transition: transform .26s var(--fx), background-color .2s var(--fx-2);
}
.wa:hover { background: #197A42; transform: translateY(-2px); }
.wa svg { width: 25px; height: 25px; flex: none; }
.wa span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .45s var(--fx), opacity .3s var(--fx-2), margin .45s var(--fx);
  margin-right: -.6rem;
}
@media (hover: hover) and (min-width: 700px) {
  .wa:hover span, .wa:focus-visible span { max-width: 200px; opacity: 1; margin-right: 0; }
}

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   The hero entrance is a pure CSS animation with `both`. It runs on load and ends
   visible, so a failed script can never leave the headline invisible — and a
   headless screenshot renders it fully.
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wipe {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes settle {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.rise { animation: rise .9s var(--fx) both; }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .14s; }
.rise-3 { animation-delay: .23s; }
.rise-4 { animation-delay: .34s; }
.rise-5 { animation-delay: .46s; }

/* A wipe paired with an over-scale settling out, at two different rates. Two rates
   moving together is what stops a reveal reading as a flat fade. */
.hv-shot { animation: wipe 1s var(--fx) both .1s; }
.hv-shot img { animation: settle 1.3s var(--fx) both .1s; }

/* Scroll reveals. The container never fades itself — two opacities multiplying is
   how the first child arrives at 25% while the last is still at 0. Scoped to `.js`
   so that if the script never runs, nothing is hidden. */
.js .reveal > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--fx), transform .8s var(--fx);
}
.js .reveal.is-in > * { opacity: 1; transform: none; }
.js .reveal.is-in > *:nth-child(2) { transition-delay: .07s; }
.js .reveal.is-in > *:nth-child(3) { transition-delay: .14s; }
.js .reveal.is-in > *:nth-child(4) { transition-delay: .21s; }
.js .reveal.is-in > *:nth-child(5) { transition-delay: .28s; }
.js .reveal.is-in > *:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal > * { opacity: 1; transform: none; }
  .mw-track { height: auto; }
  .mw-stage { position: static; height: auto; padding-block: var(--sec); }
  /* The slot only exists to hold the middle gap for the film to grow out of. With
     no growth there is nothing to hold, and it leaves a hole in the row. */
  .mw-t--slot { display: none; }
  .mw-grow { position: relative; left: auto; top: auto; transform: none;
             width: min(100%, 900px); height: auto; aspect-ratio: 16/9;
             margin: clamp(24px,4vw,48px) auto 0; border-radius: var(--r-lg); }
  .mw-grow > img, .mw-grow > video { position: relative; }
  .mw-over { position: static; background: none; opacity: 1; transform: none;
             color: var(--ink); padding: 1.4rem 0 0; }
  .mw-over h3 { color: var(--ink); }
  .mw-over p { color: var(--ink-2); }
  .mw-cap { display: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-contact { text-align: left; grid-column: span 2; }
}

@media (max-width: 900px) {
  .nav-links, .nav .btn { display: none; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 0; border-radius: 999px; background: rgba(22,32,26,.06);
    cursor: pointer; color: var(--ink);
  }
  .nav-pill { padding: .45rem .45rem .45rem 1.15rem; }

  .nav.is-open .nav-pill { border-radius: 22px; flex-wrap: wrap; }
  .nav.is-open .nav-links {
    display: block;
    width: 100%;
    order: 3;
    padding: .6rem .2rem .4rem;
    border-top: 1px solid var(--line);
    margin-top: .5rem;
  }
  .nav.is-open .nav-links > li { position: static; }
  .nav.is-open .nav-a { width: 100%; justify-content: space-between; padding: .8rem .7rem; font-size: 1rem; }
  .nav.is-open .drop {
    position: static; transform: none; width: auto; opacity: 1; visibility: visible;
    pointer-events: auto; box-shadow: none; border: 0; background: none;
    padding: .2rem .7rem 1rem; display: none; grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .nav.is-open .nav-links > li.is-open .drop { display: grid; }
  .nav.is-open .btn { display: inline-flex; width: 100%; order: 4; margin-top: .3rem; }

  .hv { grid-template-columns: 1fr; gap: 0; }
  .hv-shot {
    order: -1;
    margin: 0 calc(-1 * var(--gut)) clamp(26px, 5vw, 40px);
    /* The desktop min-height is a percentage of the viewport and would otherwise
       leak in here and push the headline off the bottom of a phone screen. */
    min-height: 0;
    height: clamp(260px, 42svh, 400px);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .hero { padding-top: 84px; }
  .ec { width: 100%; }
  .ec-head { text-align: left; }

  .mw-head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .mw-head p { text-align: left; max-width: 46ch; }

  .pr-grid { grid-template-columns: 1fr; }
  .pr-film { aspect-ratio: 16 / 10; }

  .cta-card { grid-template-columns: 1fr; }
  .cta-acts { justify-content: flex-start; }
}

@media (max-width: 760px) {
  /* The panels stop being a hover row and become stacked cards with the detail
     already open — a row of five hairlines is not a usable control on a phone. */
  .wk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: auto; }
  .wk-p { aspect-ratio: 3 / 4; flex: none; }
  .wk-p:first-child { grid-column: span 2; aspect-ratio: 4 / 3; }
  .wk-p .wk-x { grid-template-rows: 1fr; opacity: 1; }
  .wk-p img { transform: scale(1); filter: saturate(.96) brightness(.9); }
  .wk-x p, .wk-more { display: none; }
  .wk-p:first-child .wk-x p,
  .wk-p:first-child .wk-more { display: block; }
  .wk-p:first-child .wk-more { display: inline-flex; }
  .wk-p:not(:first-child) .wk-b { padding-top: clamp(40px, 12vw, 64px); }

  .mw-t { width: clamp(64px, 17vw, 120px); }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-contact { grid-column: auto; }
  .ba-stage { aspect-ratio: 3 / 4; }
}

@media (max-width: 440px) {
  .seg { grid-auto-flow: row; grid-auto-columns: auto; }
  .wa { height: 52px; padding: 0 15px; }
}