/* GENERATED by bin/build_css.php — do not edit.
 * Edit the partials in assets/css/ and re-run the script.
 * Source order: tokens, typography, layout, components, forms, responsive
 */

/* ===========================================================================
   MillionCurves — design tokens.
   The single source of truth for colour, type, spacing, rhythm and motion.
   Nothing below this file should hard-code a hex, a font stack or a gap.
   =========================================================================== */
:root{
  /* --- colour ------------------------------------------------------------
     Two darks so a section can sit against another dark without going flat,
     one warm ivory for the light bands, and champagne used sparingly enough
     that it still reads as an accent rather than a second brand colour. */
  --ink:#0B0A09;              /* black — page ground */
  --ink-2:#141210;            /* near-black — raised panels, inputs */
  --ink-3:#1D1A17;            /* near-black — hover on raised panels */
  --ivory:#EFE9DF;            /* warm ivory — light bands */
  --ivory-2:#E4DCCF;          /* warm ivory, one step down — light panels */
  --champagne:#C9A06A;        /* the accent */
  --champagne-dim:rgba(201,160,106,.42);
  --champagne-line:rgba(201,160,106,.28);
  --champagne-line-soft:rgba(201,160,106,.2);
  /* the accent, darkened for light grounds — 5.0:1 on --ivory.
     Champagne itself is 1.99:1 there and must never carry text. */
  --champagne-on-light:#7E5C30;

  /* text — named by the ground they sit on, not by their lightness, so a
     wrong pairing is obvious at the call site */
  --on-dark:#F6F2EB;
  --on-dark-mute:#A69E94;     /* 7.0:1 on --ink — safe for body copy */
  --on-dark-faint:#837D74;    /* 4.85:1 on --ink — small print only */
  --on-light:#191512;
  --on-light-mute:#5C5248;    /* 7.2:1 on --ivory */

  /* state */
  --danger:#D9705E;           /* error on dark — 4.8:1 on --ink */
  --danger-on-light:#9C3A28;  /* error on ivory — 6.4:1 */
  --success:#8FA97C;          /* confirmation on dark — 5.4:1 */
  --success-on-light:#40632C;

  /* --- type -------------------------------------------------------------- */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Oswald',Impact,'Arial Narrow',sans-serif;

  /* --- spacing ------------------------------------------------------------
     A fluid scale. Every one clamps, so a phone never inherits desktop air
     and a 1920 screen never feels cramped. */
  --space-xs:clamp(.4rem,.8vw,.6rem);
  --space-sm:clamp(.8rem,1.4vw,1.1rem);
  --space-md:clamp(1.3rem,2.4vw,2rem);
  --space-lg:clamp(2rem,4vw,3.2rem);
  --space-xl:clamp(3rem,6vw,5rem);
  --space-2xl:clamp(4.5rem,10vw,8rem);

  /* the vertical padding every standard section uses, so two stacked
     sections always meet with the same rhythm */
  --section-pad:clamp(4.5rem,12vh,8.5rem);
  --section-pad-sm:clamp(3rem,7vh,5rem);

  /* --- measure ------------------------------------------------------------ */
  --container-width:1400px;   /* one central width for the whole site */
  --container-pad:clamp(1.25rem,4.4vw,4rem);
  --reading-width:34rem;      /* lede paragraphs */
  --prose-width:46rem;        /* legal / long-form reading column */

  /* --- lines -------------------------------------------------------------- */
  /* Where a photograph half meets an ink half, a hard edge makes the two read
     as two separate boxes. These fade the picture into the panel so the pair is
     one rectangle. -x for a side-by-side split, -y for when it stacks on a
     phone and the image sits above the panel instead of beside it. */
     Measured against the casting crop: the lit subject runs to about 65% across
     and the frame is already near-black past 80%, so the fade starts at 62% —
     late enough to leave her untouched, early enough to close smoothly. */
  --edge-fade-x:linear-gradient(90deg,
      transparent 0%, transparent 62%,
      rgba(11,10,9,.22) 76%, rgba(11,10,9,.58) 86%,
      rgba(11,10,9,.86) 94%, var(--ink) 100%);
  --edge-fade-y:linear-gradient(180deg,
      transparent 0%, transparent 64%,
      rgba(11,10,9,.24) 78%, rgba(11,10,9,.60) 88%,
      rgba(11,10,9,.88) 96%, var(--ink) 100%);

  --hair:1px;
  --line-on-dark:rgba(246,242,235,.16);
  --line-on-light:rgba(25,21,18,.16);

  /* --- motion -------------------------------------------------------------
     One easing curve everywhere. Speed is the only thing that varies. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.35s;
  --t-mid:.5s;
  --t-slow:.9s;

  --header-h:clamp(64px,8vh,88px);
  --z-head:60;
  --z-menu:70;
}

/* ===========================================================================
   Typography. Two families, used for strictly separate jobs:
   the serif states, the condensed sans labels. A page that needs a third
   voice is a page that has gone wrong.
   =========================================================================== */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--on-dark);
     font-family:var(--sans);font-weight:300;line-height:1.7;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
     overflow-x:hidden}

/* --- display serif -------------------------------------------------------
   Hero headings, page titles, section headings, pull statements. Uppercase
   with open tracking is the house voice; .display-mixed is the exception for
   long statements where all-caps would stop being readable. */
.display{font-family:var(--serif);font-weight:400;line-height:1.06;margin:0;
         text-transform:uppercase;letter-spacing:.035em}
.display em{font-style:italic;display:block}
.display-mixed{font-family:var(--serif);font-weight:400;line-height:1.18;margin:0;
               text-transform:none;letter-spacing:.005em}

/* the standard sizes, so a heading is picked from a scale rather than invented */
.t-hero{font-size:clamp(2.9rem,7.6vw,7.4rem);letter-spacing:.055em;line-height:1.04}
.t-page{font-size:clamp(2.3rem,5.6vw,4.6rem);line-height:1.02}
.t-section{font-size:clamp(1.9rem,4.2vw,3.5rem)}
.t-sub{font-size:clamp(1.3rem,2.1vw,1.95rem);line-height:1.1}

/* --- condensed sans ------------------------------------------------------ */

/* The small uppercase label above a heading. One class, one look, everywhere. */
.eyebrow{margin:0 0 var(--space-sm);font-size:10.5px;letter-spacing:.3em;
         text-transform:uppercase;color:var(--champagne);font-weight:400}
.eyebrow.mute{color:var(--on-dark-mute)}
/* On a light band the accent is unreadable, so the darkened one is used
   instead. Scoped to the ground rather than set per page. */
.on-ivory .eyebrow,.statement .eyebrow{color:var(--champagne-on-light)}
.on-ivory .eyebrow.mute{color:var(--on-light-mute)}

/* metadata, location strips, counts */
.meta{font-size:10px;letter-spacing:.3em;text-transform:uppercase;
      color:var(--on-dark-mute);margin:0}

/* body copy — the only two sizes that should carry running text */
.body-copy{font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.95;font-weight:300}
.lede{margin:0;font-size:clamp(13px,1.1vw,15px);line-height:1.9;
      font-weight:300;max-width:var(--reading-width)}

/* ground-aware colour helpers */
.on-dark{color:var(--on-dark)} .on-dark-mute{color:var(--on-dark-mute)}
.on-light{color:var(--on-light)} .on-light-mute{color:var(--on-light-mute)}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--champagne);color:var(--ink)}

/* Keyboard users must always be able to see where they are. Applied globally
   so no component can quietly drop it. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--champagne);outline-offset:3px}

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

/* Skip link — visible only once focused. */
.skip{position:absolute;left:var(--space-md);top:-100px;z-index:100;
      background:var(--ink);color:var(--on-dark);padding:.75rem 1.1rem;
      border:1px solid var(--champagne);font-size:11px;letter-spacing:.24em;
      text-transform:uppercase;transition:top var(--t-fast) var(--ease)}
.skip:focus{top:var(--space-md)}

/* ===========================================================================
   Layout. One container width, one section rhythm, one page-hero language.
   =========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

/* The single central measure. Full-bleed photography opts out with .bleed. */
.wrap{max-width:var(--container-width);margin:0 auto;padding:0 var(--container-pad)}
.wrap-narrow{max-width:var(--prose-width);margin:0 auto;padding:0 var(--container-pad)}
.bleed{width:100%;max-width:none;padding:0}

/* Standard section rhythm. .section-tight for bands that sit between two
   heavier neighbours and would otherwise add up to too much air. */
.section{padding:var(--section-pad) 0}
.section-tight{padding:var(--section-pad-sm) 0}
.on-ink{background:var(--ink);color:var(--on-dark)}
.on-ink-2{background:var(--ink-2);color:var(--on-dark)}
.on-ivory{background:var(--ivory);color:var(--on-light)}

/* Interior pages start under a fixed header, so their first section needs
   clearance the homepage hero does not (it sits behind the header on purpose). */
.below-head{padding-top:calc(var(--header-h) + var(--space-md))}

/* --- page hero -----------------------------------------------------------
   Pattern A: dark editorial. Eyebrow, serif title, one supporting sentence.
   Pattern B: the same, over a cinematic image with an overlay. Interior pages
   choose one of these two and never invent a third. */
.page-hero{position:relative;background:var(--ink);overflow:hidden;
           padding:calc(var(--header-h) + clamp(3.5rem,9vh,6.5rem)) 0 clamp(3rem,7vh,5rem)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:var(--on-dark);max-width:16ch}
.page-hero .lede{margin-top:var(--space-md);color:var(--on-dark-mute)}
.page-hero .hero-rule{width:56px;height:1px;background:var(--champagne);
                      margin:var(--space-md) 0;transform-origin:left}

/* Pattern B adds the photograph and its overlay. The gradient runs to solid
   ink at the bottom so the hero meets the next section with no visible seam. */
.page-hero.has-image{padding-block:calc(var(--header-h) + clamp(5rem,13vh,9rem)) clamp(4rem,10vh,7rem)}
.page-hero-figure{position:absolute;inset:0;margin:0;z-index:1;overflow:hidden}
.page-hero-figure img{width:100%;height:100%;object-fit:cover}
.page-hero-figure::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(11,10,9,.62) 0%,rgba(11,10,9,.5) 38%,
                                      rgba(11,10,9,.86) 78%,var(--ink) 100%)}

/* --- section heading -----------------------------------------------------
   The eyebrow + rule + serif heading group that opens most sections. */
.section-head{margin-bottom:clamp(2.6rem,6vh,4rem)}
.section-head.split{display:grid;grid-template-columns:1fr 1fr;
                    gap:var(--space-lg);align-items:end}
.section-head h2{color:inherit}

/* The short champagne rule that opens most sections — draws itself in. */
.tick{width:54px;height:1px;background:var(--champagne);
      margin:0 0 clamp(1.6rem,3.4vh,2.4rem);transform-origin:left}
.js .tick{transform:scaleX(0);transition:transform 1s var(--ease) .15s}
.js .tick.in{transform:scaleX(1)}

/* Thin dividers. */
.rule{height:var(--hair);background:var(--line-on-dark);border:0;margin:0}
.rule.on-light{background:var(--line-on-light)}
.rule.gold{background:var(--champagne-line)}

/* --- reveal --------------------------------------------------------------
   The one motion primitive: a short fade-up as a block enters. Everything
   else on the site is a hover or a line draw. */
.js .rv{opacity:0;transform:translateY(20px);
        transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.10s} .rv-d2{transition-delay:.20s}
.rv-d3{transition-delay:.30s} .rv-d4{transition-delay:.40s}

/* ===========================================================================
   Components. Header, mobile menu, footer, CTAs, cards, empty states.
   Every one of these is emitted by app/ui.php — no page hand-rolls its own.
   =========================================================================== */

/* ---------------- global header ----------------
   Transparent over a dark hero, near-black once scrolled. Interior pages that
   have no image behind the header start in .solid so the nav is never floating
   over nothing. Height is a token, so it is identical on every page. */
.site-head{position:fixed;inset:0 0 auto 0;z-index:var(--z-head);padding:1.5rem 0;
           transition:background var(--t-mid) ease,padding var(--t-mid) ease,
                      border-color var(--t-mid) ease;
           border-bottom:var(--hair) solid transparent}
.site-head.compact{background:rgba(11,10,9,.95);backdrop-filter:blur(14px);
                   -webkit-backdrop-filter:blur(14px);padding:.8rem 0;
                   border-bottom-color:var(--champagne-line-soft)}
.site-head.solid{background:rgba(11,10,9,.97);border-bottom-color:var(--champagne-line-soft)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand img{width:clamp(140px,13.5vw,196px);height:auto;transition:width var(--t-mid) ease}
.site-head.compact .brand img{width:clamp(118px,10vw,146px)}

.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,2rem);
     font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:300}
.nav a{color:var(--on-dark);opacity:.85;padding:.5rem .1rem;position:relative;
       transition:opacity var(--t-fast),color var(--t-fast)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.18rem;height:1px;
              background:var(--champagne);transform:scaleX(0);transform-origin:right;
              transition:transform .4s var(--ease)}
.nav a:hover{opacity:1;color:var(--champagne)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{opacity:1;color:var(--champagne)}
.nav .sep{width:1px;height:16px;background:rgba(246,242,235,.28);opacity:.6}
.nav .gold{color:var(--champagne);opacity:1}
.burger{display:none;background:none;border:0;color:var(--on-dark);font-family:var(--sans);
        font-size:11px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;
        padding:.6rem .2rem;min-height:44px}

/* ---------------- editorial CTAs ----------------
   A line with a rule under it, never a filled pill. .dark is the variant for
   ivory grounds. Forms get a heavier submit — see forms.css — but it is built
   from the same type and the same champagne. */
.link-cta{display:inline-flex;align-items:center;gap:1rem;padding:.5rem 0 .8rem;
          font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:400;
          color:var(--on-dark);border-bottom:var(--hair) solid rgba(201,160,106,.6);
          background:none;cursor:pointer;font-family:var(--sans);
          transition:color var(--t-fast) ease,border-color var(--t-fast) ease}
.link-cta.gold{color:var(--champagne)}
.link-cta:hover{color:var(--champagne);border-bottom-color:var(--champagne)}
.link-cta.dark{color:var(--on-light);border-bottom-color:rgba(25,21,18,.42)}
.link-cta.dark:hover{color:var(--champagne);border-bottom-color:var(--champagne)}
.link-cta .arw{transition:transform .4s var(--ease)}
.link-cta:hover .arw{transform:translateX(6px)}
.link-cta.wide{min-width:248px;justify-content:space-between}

/* A stacked list of full-width CTA rules — the final-CTA pattern. */
.cta-list{display:flex;flex-direction:column;gap:1.4rem}
.cta-list a{display:flex;align-items:center;justify-content:space-between;gap:2rem;
            font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--on-dark);
            padding:.7rem 0;border-bottom:var(--hair) solid rgba(201,160,106,.5);
            transition:color var(--t-fast),border-color var(--t-fast)}
.cta-list a:hover{color:var(--champagne);border-bottom-color:var(--champagne)}
.cta-list .arw{transition:transform .4s var(--ease)}
.cta-list a:hover .arw{transform:translateX(7px)}

/* ---------------- editorial grid ----------------
   The numbered four-across used by What We Do and the Services page. Divided
   by hairlines rather than boxed into cards. */
.ed-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.ed-item{padding:0 clamp(1.1rem,2vw,2rem)}
.ed-item:first-child{padding-left:0}
.ed-item + .ed-item{border-left:var(--hair) solid var(--champagne-line)}
.ed-item .n{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);
            color:var(--champagne);letter-spacing:.04em;display:block;line-height:1}
.ed-item h3{font-size:clamp(12px,1.05vw,14px);letter-spacing:.2em;text-transform:uppercase;
            font-weight:400;margin:1.1rem 0 .9rem;color:var(--on-dark);line-height:1.55}
.ed-item p{margin:0;font-size:12.5px;line-height:1.85;color:var(--on-dark-mute);font-weight:300}
.ed-item .arw{display:block;margin-top:1.4rem;color:var(--on-dark);font-size:1.1rem;
              transition:transform var(--t-mid) var(--ease)}
.ed-item:hover .arw{transform:translateX(8px)}

/* ---------------- split ----------------
   The 50/50 image-and-panel rectangle used by Casting and Contact. Two equal
   halves, identical height, nothing between them. */
.split{display:grid;grid-template-columns:50% 50%;background:var(--ink);align-items:stretch}
.split-img{position:relative;overflow:hidden;height:100%;margin:0;padding:0}
.split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* dissolves the picture into the panel beside it — see --edge-fade-x */
.split-img::after{content:"";position:absolute;inset:0;z-index:2;
                  pointer-events:none;background:var(--edge-fade-x)}
.split-body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
            padding-block:clamp(2.5rem,5vh,4rem);padding-inline:clamp(40px,6vw,110px)}
.split-body > *{max-width:650px;width:100%}

/* ---------------- empty state ----------------
   What a listing shows when it has nothing. Never a raw database message. */
.empty{text-align:center;padding:clamp(3.5rem,10vh,7rem) var(--container-pad);
       border:var(--hair) solid var(--champagne-line);background:var(--ink-2)}
.empty .mark{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.4rem);
             color:var(--champagne);line-height:1;margin:0 0 var(--space-md)}
.empty h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.05em;
          font-size:clamp(1.1rem,2vw,1.5rem);color:var(--on-dark);margin:0 0 var(--space-sm)}
.empty p{margin:0 auto var(--space-lg);max-width:38ch;font-size:13px;line-height:1.9;
         color:var(--on-dark-mute);font-weight:300}

/* ---------------- notice ----------------
   Page-level confirmations and errors. Refined, but impossible to miss. */
.notice{border-left:2px solid var(--champagne);background:var(--ink-2);
        padding:var(--space-md) var(--space-md);margin:0 0 var(--space-lg);
        font-size:13px;line-height:1.8;color:var(--on-dark)}
.notice.err{border-left-color:var(--danger);color:var(--danger)}
.notice.ok{border-left-color:var(--success);color:var(--success)}
.notice.tone-light{background:rgba(25,21,18,.05);color:var(--on-light)}
.notice.tone-light.err{color:var(--danger-on-light)}
.notice.tone-light.ok{color:var(--success-on-light)}

/* ---------------- global footer ---------------- */
.site-foot{background:var(--ink);padding:clamp(3rem,7vh,4.5rem) 0 clamp(2.4rem,6vh,3.6rem);
           border-top:var(--hair) solid var(--champagne-line-soft)}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;
         gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.foot-in img{width:clamp(132px,12vw,178px);height:auto}
.foot-mid{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
          color:var(--on-dark-mute);line-height:2}
.foot-nav{display:flex;flex-wrap:wrap;gap:clamp(1rem,2.4vw,2.2rem);
          font-size:10px;letter-spacing:.24em;text-transform:uppercase;justify-content:flex-end}
.foot-nav a{color:var(--on-dark-mute);padding:.5rem .1rem;transition:color var(--t-fast)}
.foot-nav a:hover{color:var(--champagne)}

/* ===========================================================================
   Forms. One system for every form on the site — enquiry, casting, sign-in,
   password reset, activation, member account.

   The rule: thin bottom-border inputs, condensed uppercase labels, no browser
   chrome, and states that are obvious without being loud. Inputs inherit the
   ground they sit on via .form-on-dark / .form-on-light on any ancestor.
   =========================================================================== */

.field{margin:0 0 clamp(1.4rem,3vh,2rem);position:relative}
.field:last-child{margin-bottom:0}

.field > label,.field-label{display:block;margin:0 0 .55rem;
     font-size:10px;letter-spacing:.26em;text-transform:uppercase;
     font-weight:400;color:var(--on-dark-mute);font-family:var(--sans)}
.field .req{color:var(--champagne);margin-left:.35rem}

/* The hint under a label — why we ask, or what shape the answer takes. */
.field .hint{margin:.5rem 0 0;font-size:11px;line-height:1.7;
             color:var(--on-dark-faint);font-weight:300;letter-spacing:.02em}

/* --- the control itself --------------------------------------------------
   appearance:none strips the platform look on every browser; everything
   visible after that is ours. A bottom rule only — no box. */
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=password],.field input[type=number],.field input[type=url],
.field input[type=date],.field textarea,.field select{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;margin:0;padding:.7rem 0 .65rem;
  background:transparent;color:var(--on-dark);
  font-family:var(--sans);font-size:15px;font-weight:300;line-height:1.6;
  border:0;border-bottom:var(--hair) solid rgba(246,242,235,.28);border-radius:0;
  transition:border-color var(--t-fast) ease,background var(--t-fast) ease;
  min-height:44px}
.field textarea{min-height:8.5rem;resize:vertical;line-height:1.85}

/* the native select arrow is platform chrome, so it is replaced */
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--champagne) 50%),
                               linear-gradient(135deg,var(--champagne) 50%,transparent 50%);
              background-position:calc(100% - 14px) calc(50% + 1px),calc(100% - 9px) calc(50% + 1px);
              background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem}
.field select option{background:var(--ink-2);color:var(--on-dark)}

.field input::placeholder,.field textarea::placeholder{
  color:var(--on-dark-faint);opacity:1;letter-spacing:.04em}

/* states — hover, focus, error, success, disabled */
.field input:hover,.field textarea:hover,.field select:hover{
  border-bottom-color:rgba(246,242,235,.5)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-bottom-color:var(--champagne)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--champagne);outline-offset:4px}

.field.has-error input,.field.has-error textarea,.field.has-error select{
  border-bottom-color:var(--danger)}
.field.is-ok input,.field.is-ok textarea,.field.is-ok select{
  border-bottom-color:var(--success)}

.field input:disabled,.field textarea:disabled,.field select:disabled{
  color:var(--on-dark-faint);border-bottom-style:dashed;cursor:not-allowed}

/* Chrome paints its own blue-white block on autofilled inputs. This keeps
   them on the page's own ground instead. */
.field input:-webkit-autofill,.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--on-dark);
  -webkit-box-shadow:0 0 0 1000px var(--ink-2) inset;
  caret-color:var(--on-dark)}

/* the per-field message, tied to the input by aria-describedby */
.field .msg{display:block;margin:.5rem 0 0;font-size:11px;letter-spacing:.08em;
            line-height:1.6;font-weight:300}
.field.has-error .msg{color:var(--danger)}
.field.is-ok .msg{color:var(--success)}

/* --- the same form on an ivory ground ------------------------------------ */
.form-on-light .field > label,.form-on-light .field-label{color:var(--on-light-mute)}
.form-on-light .field .hint{color:var(--on-light-mute);opacity:.85}
.form-on-light .field input,.form-on-light .field textarea,.form-on-light .field select{
  color:var(--on-light);border-bottom-color:rgba(25,21,18,.26)}
.form-on-light .field input::placeholder,.form-on-light .field textarea::placeholder{
  color:rgba(25,21,18,.45)}
.form-on-light .field input:hover,.form-on-light .field textarea:hover,
.form-on-light .field select:hover{border-bottom-color:rgba(25,21,18,.5)}
.form-on-light .field input:focus,.form-on-light .field textarea:focus,
.form-on-light .field select:focus{border-bottom-color:var(--champagne)}
.form-on-light .field select option{background:var(--ivory);color:var(--on-light)}
.form-on-light .field input:-webkit-autofill,
.form-on-light .field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--on-light);
  -webkit-box-shadow:0 0 0 1000px var(--ivory) inset}
.form-on-light .field.has-error .msg{color:var(--danger-on-light)}
.form-on-light .field.is-ok .msg{color:var(--success-on-light)}

/* --- layout helpers ------------------------------------------------------ */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.4rem,3vw,2.6rem)}
.field-row.thirds{grid-template-columns:repeat(3,1fr)}

/* checkbox and radio — a square that fills champagne, not a browser tick */
.check{display:flex;align-items:flex-start;gap:.85rem;cursor:pointer;
       font-size:12.5px;line-height:1.75;font-weight:300;color:var(--on-dark-mute);
       letter-spacing:.02em;padding:.35rem 0;min-height:44px}
.check input[type=checkbox],.check input[type=radio]{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;
  width:16px;height:16px;margin:.32rem 0 0;background:transparent;
  border:var(--hair) solid rgba(246,242,235,.45);border-radius:0;cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast)}
.check input[type=radio]{border-radius:50%}
.check:hover input{border-color:var(--champagne)}
.check input:checked{background:var(--champagne);border-color:var(--champagne)}
.check input:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
.form-on-light .check{color:var(--on-light-mute)}
.form-on-light .check input{border-color:rgba(25,21,18,.4)}

/* --- submit --------------------------------------------------------------
   The one place the site allows a filled control, because a form needs a
   clear terminal action. It is still a sharp rectangle in the brand type —
   no pill, no shadow, no gradient. */
.btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;
     justify-content:center;gap:1rem;cursor:pointer;
     font-family:var(--sans);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
     font-weight:400;line-height:1;border-radius:0;
     padding:1.15rem clamp(1.8rem,4vw,3rem);min-height:48px;
     background:var(--champagne);color:var(--ink);border:var(--hair) solid var(--champagne);
     transition:background var(--t-fast) ease,color var(--t-fast) ease,
                border-color var(--t-fast) ease}
.btn:hover{background:transparent;color:var(--champagne)}
.form-on-light .btn:hover{color:var(--on-light);border-color:var(--on-light)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(6px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{background:var(--champagne);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--on-dark);border-color:rgba(246,242,235,.35)}
.btn.ghost:hover{border-color:var(--champagne);color:var(--champagne)}
.btn.block{width:100%}

/* the row under a form: submit plus whatever secondary link belongs with it */
.form-actions{display:flex;flex-wrap:wrap;align-items:center;
              gap:clamp(1.2rem,3vw,2.2rem);margin-top:clamp(1.8rem,4vh,2.6rem)}
.form-actions .aside{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
                     color:var(--on-dark-mute)}
.form-on-light .form-actions .aside{color:var(--on-light-mute)}

/* the honeypot — off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ===========================================================================
   Responsive. Shared breakpoints for the shared components only — page-level
   sections keep their own rules next to the section they belong to.

   1024  tablet and small laptop: multi-column editorial grids collapse
    760  phone: the nav becomes a full-screen menu
   =========================================================================== */

@media (max-width:1024px){
  .section-head.split{grid-template-columns:1fr;gap:var(--space-md)}
  .ed-grid{grid-template-columns:repeat(2,1fr);row-gap:2.6rem}
  .ed-item:nth-child(odd){padding-left:0}
  .ed-item:nth-child(3){border-left:0}

  /* the split stays two-up on tablet; it only stacks below 760 */
  .split{grid-template-columns:52% 48%}
  .split-body{padding-inline:clamp(28px,4.5vw,56px)}

  .foot-in{grid-template-columns:1fr;text-align:left}
  .foot-nav{justify-content:flex-start}
}

@media (max-width:760px){
  /* ---- mobile navigation ----
     One full-screen panel, black ground, ivory type, champagne on the join
     link. Not a browser drawer, and not a second nav pattern per page. */
  .nav{display:none}
  .nav.open{display:flex;position:fixed;inset:0;background:rgba(11,10,9,.98);
            flex-direction:column;align-items:center;justify-content:center;
            gap:1.5rem;font-size:14px;letter-spacing:.3em;z-index:var(--z-menu);
            overflow-y:auto;padding:calc(var(--header-h) + var(--space-lg)) var(--container-pad) var(--space-xl)}
  .nav.open a{opacity:1;padding:.65rem .25rem;min-height:44px;
              display:flex;align-items:center}
  .nav.open .sep{display:none}
  .burger{display:block;position:relative;z-index:calc(var(--z-menu) + 10)}

  .ed-grid{grid-template-columns:1fr}
  .ed-item + .ed-item{border-left:0;border-top:var(--hair) solid var(--champagne-line);
                      padding-top:2rem;margin-top:2rem}
  .ed-item{padding-left:0;padding-right:0}

  /* image above, panel below — one column, nothing between them */
  .split{grid-template-columns:1fr}
  .split-img{height:68vw;min-height:320px;max-height:560px}
  /* the panel is now below the image, so the fade turns with it */
  .split-img::after{background:var(--edge-fade-y)}
  .split-body{padding-block:clamp(2.5rem,7vh,3.5rem);
              padding-inline:clamp(1.25rem,6vw,2rem)}

  .cta-list a{gap:1rem}
  .field-row,.field-row.thirds{grid-template-columns:1fr}
  .form-actions{gap:1.1rem}
  .form-actions .btn{width:100%}
}

/* ---------------------------------------------------------------------------
   Motion is a courtesy, not a requirement. Everything that moves stops here,
   and everything that fades in starts visible.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .tick{transform:scaleX(1);transition:none}
  .link-cta .arw,.cta-list .arw,.ed-item .arw,.btn .arw{transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}