/* ==========================================================================
   Yieldpaper - design tokens
   Trimmed to what this page actually uses. The full token set (semantic
   surface/text/link scales, the slide and A4 geometry, the paper and green
   theme blocks) lives in the Yieldpaper Design System project; 49 unused
   declarations were removed here rather than shipped as dead bytes.

   Fonts are self-hosted. They previously came from cdn.fontshare.com plus a
   Google Fonts @import - two extra origins, each costing a DNS lookup, TCP
   connect and TLS handshake before a single glyph arrived, and the @import
   made it a chained request behind the stylesheet. Serving them from this
   origin reuses the connection the page is already on.
   ========================================================================== */

/* Satoshi - the Yieldpaper core face, the foundry's own licensed webfont
   files, subset to Latin-1 + punctuation + currency (-38% each).

   Three weights, not four. The 700 face was cut: its only users were the two
   overlay titles, yet every visitor paid 15.5kB for it on first load, because
   the panel is visibility:hidden rather than display:none and the browser
   therefore counts its text as rendered. Those titles now take 900, which is
   already being fetched for the headline.

   woff2 only - universally supported by anything that can run this page, and
   the legacy woff duplicates were never being fetched. */
@font-face{font-family:'Satoshi';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/satoshi-400.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/satoshi-500.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:900;font-style:normal;font-display:swap;src:url('../fonts/satoshi-900.woff2') format('woff2')}

:root{
  /* - Core palette (exact values from the Figma file) - */
  --yp-black:#000000;
  --yp-white:#FFFFFF;
  --yp-green:#4A6A43;
  --yp-mint:#E2EADF;
  --yp-paper:#F3F5F0;

  --yp-green-stroke:#7FAC78;   /* focus ring */

  /* - Extended accent scale - DEPARTS FROM THE SOURCE DESIGN SYSTEM -
     The DS states: "Green is the only chromatic colour in the system... There
     is no secondary hue." These were added on the brand owner's instruction.
     Every value is sampled from the hero photograph's own palette (warm
     papers #E0D0C0, sages #506040, olives #808060) and then darkened until it
     clears WCAG AA on paper, so the accents belong to the image rather than
     being imported from outside it. Ordered deep -> warm. */
  --accent-forest:#2B3F26;
  --accent-green:#4A6A43;
  --accent-olive:#5F6B3C;
  --accent-brass:#63481A;   /* deepened from #7A5A21 so it holds against the
                               mid-tone architecture, not just against paper */

  /* Warm near-black. The photograph is warm; pure #000 sits slightly cold
     against it, so display type uses this instead. */
  --ink-display:#12130E;

  /* - Type - */
  --font-core:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fw-regular:400;
  --fw-medium:500;
  --fw-bold:900;   /* 900, not 700 - the 700 face was dropped, see above */

  --type-subhead:36px;
  --type-title:35px;
  --type-lead:30px;
  --type-body-lg:25px;

  --lh-tight:100%;
  --lh-body:1.35;

  /* - Spacing steps observed in the source layouts - */
  --space-2:10px;
  --space-3:11px;
  --space-4:20px;
  --space-5:25px;
  --space-6:38px;
  --space-7:50px;
  --space-8:63px;

  --control-h-sm:63.6px;
  --control-h-md:78px;

  /* Radius - the brand is square. There is no radius scale. */
  --radius-none:0px;

  /* - Effects - */
  /* Hairline "glass" edge, applied as an INSET box-shadow so it sits inside
     the shape. This is the system's only border treatment. */
  --edge-hairline:inset 0 0 0 0.3px rgba(194,194,194,0.5);

  /* The signature glass fill on paper: transparent centre to 55% white edge */
  --glass-fill-on-paper:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0) 0%,rgba(255,255,255,0.55) 100%);
  --glass-blur:blur(20px);

  /* Motion - fades and opacity shifts only. No bounce, no spring, no slide. */
  --ease-standard:cubic-bezier(0.2,0,0,1);
  --dur-base:200ms;
  --dur-slow:420ms;
}

/* ==========================================================================
   Yieldpaper - interim hero page (single frame, non-scrolling)
   Built strictly to the Yieldpaper Design System rules:
     * Zero radius, everywhere. No exceptions.
     * One border treatment - a 0.3px hairline, applied as an inset shadow.
     * No drop shadows anywhere. Nothing floats.
     * Green is the only chromatic colour; one solid button per view.
     * Line-height 100% on display; 1.15-1.35 on body.
     * Motion is fades and opacity only, 200ms, cubic-bezier(0.2,0,0,1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,p,figure,dl,dd,ul,ol{margin:0}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--yp-green-stroke);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important}
}

/* The page is one locked frame. It does not scroll. */
html,body{height:100%}
body{
  margin:0;
  overflow:hidden;
  background:var(--yp-paper);
  color:var(--yp-black);
  font-family:var(--font-core);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Full-bleed. The old 1728px cap centred the column, so on a 2000px screen
   136px of void sat before the gutter even began - 245px of nothing before
   the logo. This is a hero, not a document: content hugs one consistent
   gutter measured from the viewport edge, at every width. */
.wrap{
  width:100%;
  padding-inline:clamp(22px,4.4vw,88px);
}

/* --------------------------------------------------------------------------
   Hero - the frame
   Three explicit rows: nav pinned top, statement centred in the slack,
   taxonomy pinned bottom. The previous flex + space-between + auto-margin
   combination fought itself and left 295px of dead air above the logo.
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  height:100svh;
  overflow:hidden;
  background:var(--yp-paper);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding-block:clamp(22px,3.2vh,44px);
}
/* The statement sits centred in whatever the nav and taxonomy leave behind. */
.hero__mid{display:flex;align-items:center;min-height:0}

/* Photographic backdrop, full bleed, as in the comp.
   The picture element is positioned rather than dissolved with
   display:contents - under display:contents its children become grid items
   of .hero and inject phantom rows, which broke the three-row layout. */
picture{position:absolute;inset:0;display:block}
.hero__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% center;
  pointer-events:none;
  user-select:none;
}

/* The scrim that carries the type. Left-to-right, paper to clear.
   These are the comp's exact stops, and they hold above 1180px because the
   statement measure keeps the type left of the architecture. */
.hero__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(243,245,240,0.94) 0%,
    rgba(243,245,240,0.82) 44%,
    rgba(243,245,240,0.32) 76%,
    rgba(243,245,240,0.12) 100%);
  pointer-events:none;
}

/* Between the phone layout and the width at which the measure starts doing
   its job, the type still spans the whole frame while the scrim's clear zone
   has moved left with it - so the copy ends up over open image. The stops
   have to hold more paper across the middle here. Measured at 800x500: the
   comp curve puts the lede at 3.85:1 and the taxonomy at 3.93:1, both under
   AA; these stops lift them to 5.2:1 and 5.8:1. */
@media (min-width:721px) and (max-width:1180px){
  .hero__scrim{
    background:linear-gradient(90deg,
      rgba(243,245,240,0.94) 0%,
      rgba(243,245,240,0.84) 50%,
      rgba(243,245,240,0.45) 80%,
      rgba(243,245,240,0.20) 100%);
  }
}

/* The taxonomy row spans the full width of the frame, so unlike the headline
   it can't be pulled clear of the architecture by the measure - at 1181px it
   sits at 4.3:1, under AA. A short paper fade along the bottom edge carries
   it to ~10:1 while leaving the tower and stairs in the upper right entirely
   open, which costs the image far less than washing the whole right side. */
@media (min-width:721px){
  .hero::after{
    content:'';
    position:absolute;
    left:0; right:0; bottom:0;
    height:clamp(110px,15vh,170px);
    background:linear-gradient(to top,
      rgba(243,245,240,0.82) 0%,
      rgba(243,245,240,0.49) 45%,
      rgba(243,245,240,0) 100%);
    pointer-events:none;
    z-index:1;
  }
}

/* --------------------------------------------------------------------------
   Nav - sits directly on the canvas. No bar, no border, no background.
   -------------------------------------------------------------------------- */
.nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:flex-start}
.lockup{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:var(--yp-black);
  transition:opacity var(--dur-base) var(--ease-standard);
}
.lockup:hover{opacity:0.72}
/* Aspect is 4.56:1, so height alone sizes it. The mark's own height is the
   full 79.58 of the lockup box, which puts it at the comp's proportions. */
.lockup__logo{
  height:clamp(32px,3vw,52px);
  width:auto;
  display:block;
}

/* --------------------------------------------------------------------------
   Statement
   -------------------------------------------------------------------------- */
/* The statement block. The DS puts this measure at 804px on the web hero;
   at 1040px the headline settles to a longest line of ~806px on its own,
   which keeps it clear of the architecture on the right of the backdrop.
   Widen this and the headline runs into the tower - contrast drops from
   14:1 to 3.8:1. The measure is doing the work, not the scrim. */
.hero__inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.6vh,38px);
  /* The vw term matters on wide-but-short windows. There the type shrinks to
     fit the height while 1040px still spans most of the frame, so the last
     words of the headline land far right over open image. Near-black survives
     that; a mid-tone accent does not - brass measured 1.48:1 at 1280x400.
     Capping the measure against viewport width keeps every word inside the
     protected zone at any aspect ratio. */
  max-width:min(1040px,66vw);
}

/* Bigger and heavier than the source spec, on instruction. Satoshi Black
   (900) is loaded above, so this uses the real weight rather than faux-
   bolding a lighter one.

   Line-height was 0.96 and that was wrong. Measured at 900 weight: cap
   ascent 0.745em, descender depth 0.264em -- 1.009em of ink in a 0.96em line
   box, so every line overflowed its own box by ~3px and the 'g' in "Building"
   struck the line beneath it. Where the next line begins with the glass
   panel, its background box sits higher still, needing ~1.029em.
   The ink ratio is not constant: it measures 1.004em at 82px but 1.025em at
   40px, because hinting and rounding bite harder at small sizes. 1.04 left
   only 0.6px of headroom on a phone. 1.06 holds a real margin at both ends
   and still sits nearer the DS's 100% than 0.96 ever did.
   Do not take this below 1.04. */
.hero__title{
  font-size:clamp(40px,min(6.6vw,10.4vh),132px);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-0.032em;
  color:var(--ink-display);
  text-wrap:balance;
}
/* Accented words. Kept to two so the line still reads as one sentence
   rather than a ransom note. */
.hero__title .accent-brass{color:var(--accent-brass)}

/* The signature glass callout on a single highlighted word. Padding scales
   with the type now - a flat 24px looked deliberate at 82px and clumsy at
   132px. The hairline is warmed to the forest accent so the panel reads as
   part of the coloured system rather than a leftover. */
.glass-word{
  display:inline-block;
  padding:0.02em 0.22em;
  color:var(--accent-forest);
  background-image:var(--glass-fill-on-paper);
  box-shadow:inset 0 0 0 0.3px rgba(43,63,38,0.55);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}

/* The larger headline pushes this further down and the measure ran wider,
   putting it over more open image - it measured 4.30:1 there, under AA.
   Narrower measure plus a denser ink brings it back. The headline now
   separates itself by size and weight, so the lede no longer needs to be
   lightened to stay secondary. */
.hero__lede{
  max-width:760px;
  font-size:clamp(17px,2.2vh,23px);
  line-height:1.45;
  letter-spacing:-0.005em;
  color:rgba(18,19,14,0.9);
  text-wrap:balance;
}
.hero__lede strong{font-weight:var(--fw-medium);color:var(--accent-forest)}

.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-7);align-items:center}

/* Taxonomy band at the foot of the frame.
   The comp separated these with hairline dashes; with an icon on each the
   row was doing two jobs at once, so the dashes are gone and spacing does
   the separating. */
.taxonomy{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px clamp(22px,3.4vw,64px);
  font-size:clamp(11px,1.65vh,17px);
  font-weight:var(--fw-medium);
  letter-spacing:0.12em;
  color:var(--ink-display);
}
.tax__item{
  display:inline-flex;
  align-items:center;
  gap:clamp(8px,0.8vw,var(--space-3));
  white-space:nowrap;
}
/* Each term carries its own tone, stepping deep -> warm across the row.
   The labels stay near-black; only the icons are coloured, so the row reads
   as one line of type with accents rather than four coloured items. */
.tax__icon{
  width:clamp(17px,1.55vw,24px);
  height:auto;
  flex:none;
  color:var(--tone,var(--accent-green));
  transition:transform var(--dur-base) var(--ease-standard);
}
.tax__item:nth-child(1){--tone:var(--accent-forest)}
.tax__item:nth-child(2){--tone:var(--accent-green)}
.tax__item:nth-child(3){--tone:var(--accent-olive)}
.tax__item:nth-child(4){--tone:var(--accent-brass)}

/* --------------------------------------------------------------------------
   Buttons - solid / glass / light. Square corners, hairline edge.
   Hover lifts brightness 12%; press drops it 10%. The fill never changes.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  text-decoration:none;
  font-weight:var(--fw-regular);
  border:0;
  border-radius:var(--radius-none);
  cursor:pointer;
  box-shadow:var(--edge-hairline);
  transition:filter var(--dur-base) var(--ease-standard);
}
.btn:hover{filter:brightness(1.12)}
.btn:active{filter:brightness(0.9)}
.btn[disabled]{cursor:default;opacity:0.6}

.btn--solid{background:var(--yp-green);color:var(--yp-white)}

.btn--lg{
  min-width:209px;
  min-height:clamp(56px,8vh,var(--control-h-md));
  padding-inline:var(--space-6);
  font-size:clamp(18px,2.4vh,var(--type-lead));
}
.btn--md{
  min-width:209px;
  min-height:var(--control-h-sm);
  padding-inline:var(--space-5);
  font-size:clamp(16px,1.3vw,var(--type-body-lg));
}


/* --------------------------------------------------------------------------
   Contact overlay - opens over the frame. The page still never scrolls.
   Black, because black is the brand's primary canvas. Square, hairline,
   no shadow: it does not float, it replaces.
   -------------------------------------------------------------------------- */
.overlay{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vh,var(--space-7)) clamp(16px,4vw,var(--space-7));
  /* The page is paper, so the overlay stays in that world - a soft ink dim
     rather than a blackout, with the system's single 20px blur dissolving
     the frame behind it. */
  background:rgba(37,37,37,0.34);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  /* Closed state. visibility takes it out of the accessibility tree and the
     tab order without a display change, so opening never needs a style flush.
     pointer-events is belt and braces - a visibility:hidden layer already
     ignores the cursor. */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-standard),
             visibility 0s linear var(--dur-base);
}
.overlay[data-open="true"]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--dur-base) var(--ease-standard),visibility 0s;
}

/* A white sheet laid on the paper page - the company is called Yieldpaper
   and the brand is square and unshadowed, so the panel is exactly that:
   a sheet, held by a hairline, with nothing floating. */
.panel{
  position:relative;
  width:min(880px,100%);
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--yp-white);
  color:var(--yp-black);
  box-shadow:var(--edge-hairline);
  padding:clamp(28px,4.4vw,var(--space-8)) clamp(24px,4.4vw,var(--space-8)) clamp(28px,3.4vw,var(--space-7));
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,0.22) transparent;
}
.panel::-webkit-scrollbar{width:10px}
.panel::-webkit-scrollbar-track{background:transparent}
.panel::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.18)}
.panel::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.3)}

/* Entrance: opacity only, in three beats. The system permits fades and
   opacity shifts and nothing else - no slide, no scale, no spring. */
.panel__head,.panel__body,.panel__foot{
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-standard);
}
.overlay[data-open="true"] .panel__head{opacity:1;transition-delay:40ms}
.overlay[data-open="true"] .panel__body{opacity:1;transition-delay:110ms}
.overlay[data-open="true"] .panel__foot{opacity:1;transition-delay:170ms}
@media (prefers-reduced-motion:reduce){
  .panel__head,.panel__body,.panel__foot{opacity:1}
}

.panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-5);
  padding-bottom:clamp(20px,2.2vw,var(--space-5));
  border-bottom:0.3px solid rgba(0,0,0,0.16);
  margin-bottom:clamp(24px,2.6vw,var(--space-6));
}
.panel__eyebrow{
  font-size:11px;
  font-weight:var(--fw-medium);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--yp-green);
  margin-bottom:var(--space-4);
}
.panel__title{
  font-size:clamp(28px,3.1vw,var(--type-subhead));
  font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  letter-spacing:-0.012em;
  text-wrap:balance;
}
.panel__lede{
  margin-top:var(--space-3);
  font-size:clamp(15px,1.15vw,18px);
  line-height:var(--lh-body);
  color:rgba(0,0,0,0.7);
  max-width:52ch;
  text-wrap:balance;
}

/* Quiet by default, full strength on hover - the system's link behaviour,
   not a bordered control competing with the send button. */
.panel__close{
  flex:none;
  width:46px;
  height:46px;
  margin:-8px -8px 0 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  border-radius:var(--radius-none);
  color:var(--yp-black);
  /* 0.5 measures 3.98:1 on the sheet; this clears 4.5 with room to spare. */
  opacity:0.62;
  cursor:pointer;
  transition:opacity var(--dur-base) var(--ease-standard);
}
.panel__close:hover,.panel__close:focus-visible{opacity:1}
.panel__close svg{width:16px;height:16px}

/* --- Form ---------------------------------------------------------------
   Fields are ruled, not boxed. Six stacked rectangles read as a data-entry
   form; a ruled column reads as a document, which is what this business
   actually produces. It is the same single hairline the system allows,
   applied to one edge instead of four.
   ------------------------------------------------------------------------ */
.form{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,var(--space-5))}
.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,2.4vw,var(--space-6));
}
.field{display:flex;flex-direction:column}
.field__label{
  font-size:11px;
  font-weight:var(--fw-medium);
  letter-spacing:0.12em;
  text-transform:uppercase;
  /* Measured on the white sheet: this clears AA at 11px. */
  color:rgba(0,0,0,0.58);
  margin-bottom:var(--space-2);
  transition:color var(--dur-base) var(--ease-standard);
}
.field:focus-within .field__label{color:var(--yp-green)}

.field__input,.field__textarea{
  width:100%;
  background:transparent;
  color:var(--yp-black);
  border:0;
  border-radius:var(--radius-none);
  box-shadow:inset 0 -0.3px 0 0 rgba(0,0,0,0.26);
  padding:2px 0 11px;
  font-family:var(--font-core);
  font-size:clamp(16px,1.15vw,18px);
  line-height:1.35;
  transition:box-shadow var(--dur-base) var(--ease-standard);
}
/* The brief is auto-sized in script so the rule always sits directly under
   the last line of text - no dead air between the words and the rule.
   overflow:hidden stops a scrollbar appearing mid-measurement. */
.field__textarea{
  min-height:0;
  height:auto;
  overflow:hidden;
  resize:none;
}
.field__input::placeholder,.field__textarea::placeholder{color:rgba(0,0,0,0.34)}
.field__input:hover,.field__textarea:hover{box-shadow:inset 0 -0.3px 0 0 rgba(0,0,0,0.45)}
.field__input:focus,.field__textarea:focus{
  outline:none;
  box-shadow:inset 0 -1px 0 0 var(--yp-green);
}
/* No error red exists in this system, so an unfinished field is marked by
   weight, not hue: the rule goes solid and the label comes up to full. */
.field[data-invalid="true"] .field__input,
.field[data-invalid="true"] .field__textarea{box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.65)}
.field[data-invalid="true"] .field__label{color:var(--yp-black)}

/* Chrome paints autofilled inputs pale yellow, which would break the sheet.
   Repaint the fill and keep the rule. */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus,
.field__textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--yp-black);
  caret-color:var(--yp-black);
  -webkit-box-shadow:inset 0 -0.3px 0 0 rgba(0,0,0,0.26), inset 0 0 0 100px var(--yp-white);
  transition:background-color 8000s ease-in-out 0s;
}
.field__input:-webkit-autofill:focus{
  -webkit-box-shadow:inset 0 -1px 0 0 var(--yp-green), inset 0 0 0 100px var(--yp-white);
}

/* Enough air that the brief's own rule and this divider never read as one
   doubled line - they are 0.3px apart in weight and must be far apart in
   space to stay legible as two different things. */
.panel__foot{
  margin-top:clamp(30px,3.2vw,var(--space-7));
  padding-top:clamp(20px,2.2vw,var(--space-5));
  border-top:0.3px solid rgba(0,0,0,0.16);
}
.form__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-4) clamp(24px,2.6vw,var(--space-6));
}
.form__note{
  font-size:13px;
  line-height:1.5;
  color:rgba(0,0,0,0.56);
  max-width:44ch;
  flex:1 1 280px;
  text-wrap:pretty;
}

.form__status{
  font-size:clamp(15px,1.1vw,17px);
  line-height:var(--lh-body);
  color:var(--yp-green);
  margin:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-standard);
}
.form__status[data-visible="true"]{
  max-height:none;
  opacity:1;
  margin-top:clamp(22px,2.4vw,var(--space-5));
  padding-top:clamp(18px,2vw,var(--space-4));
  border-top:0.3px solid rgba(0,0,0,0.16);
}
.form__status[data-state="error"]{color:rgba(0,0,0,0.82)}

/* --- Sent -------------------------------------------------------------
   On a real send the form is replaced rather than annotated: the sheet
   stops asking for anything and simply confirms.
   ---------------------------------------------------------------------- */
.panel__done{display:none}
.panel[data-state="sent"] #contact-form{display:none}
.panel[data-state="sent"] .panel__done{display:block}
.done__title{
  font-size:clamp(22px,2.4vw,var(--type-title));
  font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  letter-spacing:-0.01em;
  margin-bottom:var(--space-4);
}
.done__body{
  font-size:clamp(15px,1.15vw,18px);
  line-height:var(--lh-body);
  color:rgba(0,0,0,0.7);
  max-width:52ch;
  margin-bottom:clamp(26px,2.8vw,var(--space-6));
  text-wrap:pretty;
}

/* Honeypot - off-screen and out of the accessibility tree. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------------------------
   Small screens - the frame relaxes so nothing is clipped. It scrolls only
   when the content genuinely cannot fit; on a phone that is honest.
   -------------------------------------------------------------------------- */
@media (max-width:720px){
  body{overflow:auto}
  .hero{height:auto;min-height:100svh;padding-block:28px 44px}
  .hero__inner{margin-block:clamp(48px,10vh,96px) clamp(48px,8vh,80px)}
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(243,245,240,0.95) 0%,
      rgba(243,245,240,0.9) 58%,
      rgba(243,245,240,0.55) 100%);
  }
  .glass-word{padding:0.02em 0.16em}
  .btn--lg{width:100%}
  .taxonomy{gap:10px 18px}
  .row{grid-template-columns:minmax(0,1fr)}
  .panel{padding:28px 22px 26px}
  .form__foot .btn--md{width:100%}
  .form__note{flex:1 1 100%}
}

/* Touch targets clear 44px without changing the pointer-device look. */
@media (hover:none),(max-width:720px){
  /* A ruled field's tappable area is the input box itself, which at desktop
     metrics is only 35px. Deepen it so a finger has 44px to land on. */
  .field__input,.field__textarea{padding:9px 0 14px}
}

/* Body is locked while the overlay is open, at every width. */
body[data-overlay="open"]{overflow:hidden}