/* ==========================================================================
   Trumanmade — design system
   Editorial, asymmetric, wood-toned. Display: Fraunces. Body: Karla.
   No purple, no gradients beyond the hero scrim, nothing centered by default.
   ========================================================================== */

/* --- Fonts: self-hosted variable subsets, latin only ---------------------- */
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-latin-var.woff2') format('woff2-variations');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';
  src:url('/assets/fonts/karla-latin-var.woff2') format('woff2-variations');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* wood palette */
  --walnut:#2B211A;      /* darkest ground */
  --walnut-2:#352920;    /* raised dark surface */
  --heartwood:#5C4330;
  --sap:#A98963;         /* accent on dark */
  --maple:#F2EDE2;       /* page ground */
  --shaving:#E7DFD0;     /* raised light surface */
  --paper:#FBF8F1;
  --moss:#4A5436;        /* action / link, AA on maple */
  --ink:#3A2E24;         /* body copy on light */
  --ink-soft:#574635;
  --line-light:#D9CEB8;
  --line-dark:#4A3A2B;
  --on-dark:#DDD2BE;     /* body copy on walnut */

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Karla',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  /* ===== TYPE SCALE =========================================================
     Base 17px. Text steps ratio 1.2, display steps ratio 1.25. Ten steps, and
     nothing on this site may use a size that is not one of them.

       100   12px   uppercase labels and controls
       200   14px   fine print, captions, secondary meta
       300   17px   body copy
       400   21px   lede, intro paragraphs
       500   26px   h3, small display
       600   33px   figures: prices, stat numerals
       700   41px   pull quotes, step numerals
       800   51px   h2
       900   64px   h1, interior pages
       1000  80px   h1, home hero

     Sizes are rem so they honour the reader's browser font setting.
     Fluid roles interpolate between two adjacent steps on one shared rule:
     every one reaches its minimum at a 400px viewport and its maximum at
     1400px, so the hierarchy holds its proportions at every width.
     Middle term = (min - 0.4 x delta)rem + (delta / 10)vw.
     ======================================================================== */
  --t-100:0.75rem;      /* 12 */
  --t-200:0.875rem;     /* 14 */
  --t-300:1.0625rem;    /* 17 */
  --t-400:1.3125rem;    /* 21 */
  --t-500:clamp(1.3125rem, 1.1875rem + 0.5vw, 1.625rem);   /* 21 -> 26 */
  --t-600:clamp(1.625rem, 1.45rem + 0.7vw, 2.0625rem);     /* 26 -> 33 */
  --t-700:clamp(1.625rem, 1.25rem + 1.5vw, 2.5625rem);     /* 26 -> 41 */
  --t-800:clamp(2.0625rem, 1.6125rem + 1.8vw, 3.1875rem);  /* 33 -> 51 */
  --t-900:clamp(2.5625rem, 1.9875rem + 2.3vw, 4rem);       /* 41 -> 64 */
  --t-1000:clamp(2.5625rem, 1.5875rem + 3.9vw, 5rem);      /* 41 -> 80 */

  /* Leading decreases monotonically as size increases. Bound to the step. */
  --lh-label:1.45;      /* 100 */
  --lh-fine:1.55;       /* 200 */
  --lh-body:1.65;       /* 300 */
  --lh-lede:1.5;        /* 400 */
  --lh-h3:1.28;         /* 500 */
  --lh-figure:1.15;     /* 600 */
  --lh-quote:1.34;      /* 700, running text */
  --lh-numeral:1;       /* 700, single glyph */
  --lh-h2:1.12;         /* 800 */
  --lh-h1:1.06;         /* 900 / 1000 */

  /* Tracking. Uppercase opens up, display tightens as it grows. Two
     uppercase roles only: decorative labels, and interactive controls. */
  --tr-label:0.16em;
  --tr-control:0.08em;
  --tr-h3:-0.005em;
  --tr-quote:-0.01em;
  --tr-h2:-0.015em;
  --tr-h1:-0.022em;

  --wrap:1200px;
  --gut:clamp(20px,4vw,40px);
  --sec:clamp(72px,9vw,124px);

  --shadow-1:0 2px 10px rgba(43,33,26,.06),0 12px 34px rgba(43,33,26,.10);
  --shadow-2:0 4px 16px rgba(43,33,26,.10),0 24px 60px rgba(43,33,26,.18);
  /* ===== MOTION ============================================================
     Three durations, no others. Everything lands inside 200-300ms.
     Both curves are monotonic — every control point sits within [0,1], so
     no property can overshoot its final value on the way in or out.
     Nothing bounces, springs, or settles back.
     ======================================================================== */
  --dur-fast:200ms;   /* colour and opacity: no distance to travel */
  --dur:250ms;        /* the default for hover states */
  --dur-slow:300ms;   /* anything that moves a distance: lifts, reveals */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.33,1,.68,1);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px;}
body{
  font-family:var(--body);
  font-size:var(--t-300);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--maple);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
img{height:auto;background:var(--shaving);}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
ul,ol{list-style:none;}
::selection{background:var(--sap);color:var(--walnut);}

/* --- Typography ----------------------------------------------------------- */
/* Optical size tracks rendered size — that is what the opsz axis is for. */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  text-wrap:balance;
}
h1{font-size:var(--t-900);line-height:var(--lh-h1);letter-spacing:var(--tr-h1);font-variation-settings:'opsz' 96;}
h2{font-size:var(--t-800);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-variation-settings:'opsz' 72;}
h3{font-size:var(--t-500);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);font-variation-settings:'opsz' 30;}
h4{font-size:var(--t-400);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);font-variation-settings:'opsz' 26;}

/* Feature headings: an h3 in a slot that needs display weight. */
.h-feature{font-size:var(--t-600);line-height:var(--lh-figure);letter-spacing:var(--tr-quote);font-variation-settings:'opsz' 40;}
p{text-wrap:pretty;}
a{color:var(--moss);text-underline-offset:.22em;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease);}
a:hover{color:var(--walnut);}
strong{font-weight:700;}

.eyebrow{
  display:block;
  font-family:var(--body);
  font-weight:700;
  font-size:var(--t-100);
  line-height:var(--lh-label);
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--heartwood);
}
.eyebrow::before{
  content:"";display:inline-block;width:22px;height:1px;
  background:var(--sap);vertical-align:middle;margin-right:12px;
  transform:translateY(-1px);
}
.on-walnut .eyebrow{color:var(--sap);}
.lede{font-size:var(--t-400);line-height:var(--lh-lede);color:var(--ink-soft);}
.on-walnut .lede{color:var(--on-dark);}

/* --- Layout --------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}
section{padding-block:var(--sec);}
.on-walnut{background:var(--walnut);color:var(--on-dark);}
.on-walnut h1,.on-walnut h2,.on-walnut h3,.on-walnut h4{color:var(--maple);}
.on-walnut a{color:var(--sap);}
.on-walnut a:hover{color:var(--maple);}
.on-shaving{background:var(--shaving);}

/* Asymmetric section head — sits left of centre, never centred.
   Vertical rhythm rule: a gap that SEPARATES two content units clears at least
   one body line (28px). A gap that COUPLES a unit to its own label or value
   stays tight on purpose. Section padding is the outer tier and is unchanged. */
.section-head{max-width:34em;margin-bottom:clamp(40px,5vw,64px);}
.section-head h2{margin-top:28px;}
.section-head .lede{margin-top:36px;}
.section-head--offset{margin-left:0;}
@media(min-width:1000px){
  .section-head--offset{margin-left:8%;}
}

/* Two-column editorial split, deliberately unequal. */
.split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,72px);align-items:center;}
.split--wide-right{grid-template-columns:.85fr 1.15fr;}
.split--top{align-items:start;}
@media(max-width:900px){.split,.split--wide-right{grid-template-columns:1fr;}}

.rule{height:1px;background:var(--line-light);border:0;margin-block:clamp(40px,5vw,64px);}
.on-walnut .rule{background:var(--line-dark);}

/* Hairline "grain" divider between major movements */
.grain{display:block;line-height:0;}
.grain svg{width:100%;height:14px;}

/* --- Skip link ------------------------------------------------------------ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--walnut);color:var(--maple);padding:12px 20px;
  font-weight:700;font-size:var(--t-200);line-height:var(--lh-fine);text-decoration:none;
}
.skip:focus{left:0;}

/* --- Focus --------------------------------------------------------------- */
:focus-visible{outline:3px solid var(--moss);outline-offset:3px;border-radius:1px;}
.on-walnut :focus-visible{outline-color:var(--sap);}

/* --- The one CTA ---------------------------------------------------------- */
/* Exactly one button style on the site. Everything else is a text link. */
.cta{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--walnut);color:var(--maple);
  font-weight:700;font-size:var(--t-100);line-height:var(--lh-label);
  letter-spacing:var(--tr-control);text-transform:uppercase;
  padding:15px 28px;border:1px solid var(--walnut);
  text-decoration:none;
  position:relative;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);
}
.cta svg{width:16px;height:8px;flex:none;transition:transform var(--dur) var(--ease);}
.cta:hover{background:var(--heartwood);border-color:var(--heartwood);color:var(--maple);transform:translateY(-2px);box-shadow:var(--shadow-1);}
.cta:hover svg{transform:translateX(5px);}
.on-walnut .cta,.cta--on-dark{background:var(--sap);border-color:var(--sap);color:var(--walnut);}
.on-walnut .cta:hover,.cta--on-dark:hover{background:var(--maple);border-color:var(--maple);color:var(--walnut);}
.cta--sm{padding:11px 20px;}   /* size is fixed by the scale; scale changes by padding only */

/* --- CTA pulse ------------------------------------------------------------
   A ring that expands out of the button edge and fades. It runs on a
   pseudo-element, so the button itself never scales or moves — there is no
   transform to overshoot and nothing to bounce. The cycle is 2.6s: a pulse
   timed at 200-300ms would read as a strobe, not an invitation, so the
   transition budget governs the hover, and the pulse breathes slower.

   The ring colour is bound to the BUTTON VARIANT, not to the section class.
   Keying it off .on-walnut was wrong: .hero, .band and .pagehead are dark
   surfaces that do not carry that class, so their buttons inherited the dark
   ring and it was invisible against a dark ground.

   .cta--sm is excluded on purpose: three inline "Inquire" buttons pulsing in
   unison down a ledger looks like an error state. Primary actions pulse,
   repeated inline ones stay quiet. */
.cta{--pulse-ring:rgba(43,33,26,.42);}                          /* dark button, light ground */
.on-walnut .cta,.cta--on-dark{--pulse-ring:rgba(242,237,226,.50);}  /* light button, dark ground */

.cta:not(.cta--sm)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  animation:ctaPulse 2600ms var(--ease-out) infinite;
}
/* Colour holds to 40% before it fades, so the ring is actually legible.
   Fading from the first frame made it read as nothing at all. */
@keyframes ctaPulse{
  0%  {box-shadow:0 0 0 0    var(--pulse-ring);}
  40% {box-shadow:0 0 0 7px  var(--pulse-ring);}
  75% {box-shadow:0 0 0 15px rgba(0,0,0,0);}
  100%{box-shadow:0 0 0 0    rgba(0,0,0,0);}
}
/* Hover and focus take over: the ring stands down so the lift reads cleanly. */
.cta:not(.cta--sm):hover::after,
.cta:not(.cta--sm):focus-visible::after{animation:none;}

/* Secondary navigation is a ruled text link — never a competing button. */
.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:var(--t-100);line-height:var(--lh-label);
  letter-spacing:var(--tr-control);text-transform:uppercase;
  color:var(--walnut);text-decoration:none;
  border-bottom:1px solid var(--sap);padding-bottom:4px;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),gap var(--dur) var(--ease);
}
.tlink svg{width:15px;height:8px;flex:none;}
.tlink:hover{color:var(--heartwood);border-color:var(--heartwood);gap:14px;}
.on-walnut .tlink{color:var(--maple);border-color:var(--sap);}
.on-walnut .tlink:hover{color:var(--sap);border-color:var(--maple);}

/* --- Nav ------------------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(242,237,226,.94);
  border-bottom:1px solid var(--line-light);
  transition:box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
@supports(backdrop-filter:blur(8px)){.nav{backdrop-filter:saturate(150%) blur(10px);}}
.nav.is-stuck{box-shadow:0 6px 30px rgba(43,33,26,.11);}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:10px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-logo{display:block;flex:none;}
.nav-logo img{height:48px;width:auto;background:none;}
.nav-menu{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(14px,1.5vw,24px);}
.nav-menu a:not(.cta){
  font-weight:600;font-size:var(--t-100);line-height:var(--lh-label);
  letter-spacing:var(--tr-control);text-transform:uppercase;
  color:var(--walnut);text-decoration:none;position:relative;padding-block:6px;
  white-space:nowrap;   /* a label must never break across two lines */
}
/* The nav CTA is chrome, not a page-level action: same type, tighter box, so
   it does not drive the bar height or crowd the links. */
.nav .cta{padding:12px 22px;}
.nav-menu a:not(.cta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--heartwood);transition:right var(--dur) var(--ease);
}
.nav-menu a:not(.cta):hover::after,.nav-menu a[aria-current="page"]::after{right:0;}
.nav-menu a[aria-current="page"]{color:var(--heartwood);}
.nav-toggle{display:none;}

/* Collapse to the menu button at 1180px. The full nav needs ~1080px to lay out
   without crowding; collapsing at 1080px left a dead zone where it rendered but
   could not fit, and it wrapped. The extra headroom also absorbs browser zoom
   and larger default font sizes, since the type scale is in rem. */
@media(max-width:1180px){
  .nav-logo img{height:44px;}
  .nav-toggle{
    display:inline-flex;align-items:center;gap:10px;
    font-weight:700;font-size:var(--t-100);line-height:var(--lh-label);
    letter-spacing:var(--tr-control);text-transform:uppercase;
    color:var(--walnut);border:1px solid var(--line-light);padding:10px 14px;
  }
  .nav-toggle .bars{display:block;width:17px;height:11px;position:relative;}
  .nav-toggle .bars::before,.nav-toggle .bars::after,.nav-toggle .bars span{
    content:"";position:absolute;left:0;width:100%;height:1.5px;background:var(--walnut);
    transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease);
  }
  .nav-toggle .bars::before{top:0;}
  .nav-toggle .bars span{top:5px;}
  .nav-toggle .bars::after{bottom:0;}
  .nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .bars span{opacity:0;}
  .nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-5px) rotate(-45deg);}

  .nav-menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--maple);border-bottom:1px solid var(--line-light);
    padding:8px var(--gut) 26px;
    box-shadow:0 20px 40px rgba(43,33,26,.14);
  }
  .nav-menu[hidden]{display:none;}
  .nav-menu a:not(.cta){
    padding:15px 0;border-bottom:1px solid var(--line-light);
    font-size:var(--t-300);line-height:var(--lh-body);   /* step 300 takes step 300 leading */
  }
  .nav-menu a:not(.cta)::after{display:none;}
  /* Restore the full box in the drawer: 12px padding would put the tap
     target under 44px. */
  .nav-menu .cta{margin-top:20px;justify-content:center;padding:15px 28px;}
}

/* --- Hero ----------------------------------------------------------------- */
/* .hero and .pagehead are <section> elements, so they were inheriting
   section{padding-block:var(--sec)} — 124px top AND bottom — on top of the
   padding their own -inner already carries. That doubled padding is what
   pushed the hero CTA below the fold. They manage their own spacing. */
.hero,.pagehead{padding-block:0;}

/* Fill the viewport below the nav so the slab still reads full-bleed, but with
   the content anchored high: the leftover height falls BELOW the copy as more
   image, instead of above it as dead space. */
.hero{position:relative;isolation:isolate;color:var(--maple);overflow:hidden;background:var(--walnut);
  min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);}
.hero-media{position:absolute;inset:0;z-index:-2;}
.hero-media img{width:100%;height:100%;object-fit:cover;background:var(--walnut);}
.js .hero-media{animation:heroDrift 18s var(--ease) forwards;}
@keyframes heroDrift{from{transform:scale(1.07);}to{transform:scale(1);}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg,rgba(43,33,26,.20) 0%,rgba(43,33,26,.46) 45%,rgba(43,33,26,.86) 100%);
}
.hero-inner{
  max-width:var(--wrap);margin:0 auto;padding:clamp(72px,9vh,104px) var(--gut) clamp(56px,7vw,84px);
  display:flex;flex-direction:column;align-items:flex-start;
}
.hero .eyebrow{color:#DFD3BD;}
.hero .eyebrow::before{background:var(--sap);}
.hero h1{color:var(--maple);max-width:14ch;margin-top:36px;font-size:var(--t-1000);font-variation-settings:'opsz' 120;}
.hero-sub{margin-top:44px;max-width:46ch;font-size:var(--t-400);line-height:var(--lh-lede);color:#E4DACA;}
.hero-actions{display:flex;align-items:center;gap:clamp(18px,3vw,36px);flex-wrap:wrap;margin-top:clamp(28px,3.5vw,40px);}
.hero .tlink{color:var(--maple);border-color:rgba(217,205,184,.55);}
.hero .tlink:hover{color:var(--sap);border-color:var(--sap);}
.hero--tall .hero-inner{padding-top:clamp(88px,11vh,128px);}
.js .hero-inner>*{opacity:0;transform:translateY(12px);animation:riseIn var(--dur-slow) var(--ease-out) forwards;}
.js .hero-inner>*:nth-child(1){animation-delay:60ms;}
.js .hero-inner>*:nth-child(2){animation-delay:140ms;}
.js .hero-inner>*:nth-child(3){animation-delay:220ms;}
.js .hero-inner>*:nth-child(4){animation-delay:300ms;}
@keyframes riseIn{to{opacity:1;transform:none;}}

/* Compact page header for interior pages */
.pagehead{position:relative;background:var(--walnut);color:var(--on-dark);overflow:hidden;isolation:isolate;}
.pagehead-media{position:absolute;inset:0;z-index:-2;}
.pagehead-media img{width:100%;height:100%;object-fit:cover;}
.pagehead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(175deg,rgba(43,33,26,.62) 0%,rgba(43,33,26,.88) 100%);}
.pagehead-inner{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,7vw,76px) var(--gut) clamp(52px,7vw,80px);}
.pagehead h1{color:var(--maple);max-width:17ch;margin-top:32px;}
.pagehead .lede{color:var(--on-dark);max-width:52ch;margin-top:40px;}
.pagehead .eyebrow{color:var(--sap);}
.pagehead .hero-actions{margin-top:32px;}

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs{font-size:var(--t-100);line-height:var(--lh-label);letter-spacing:var(--tr-control);text-transform:uppercase;font-weight:600;}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.crumbs li{display:flex;align-items:center;gap:8px;color:var(--sap);}
.crumbs li+li::before{content:"/";color:rgba(169,137,99,.55);}
.crumbs a{color:#CBBBA1;text-decoration:none;}
.crumbs a:hover{color:var(--maple);}
.crumbs [aria-current]{color:var(--maple);}

/* --- Pull quote (left-aligned, hanging mark) ------------------------------ */
.quote{position:relative;padding-left:clamp(30px,5vw,58px);}
.quote::before{
  content:"\201C";position:absolute;left:0;top:-.16em;
  font-family:var(--display);font-size:var(--t-1000);line-height:var(--lh-numeral);
  color:var(--sap);opacity:.5;
}
.quote p{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:var(--t-700);line-height:var(--lh-quote);letter-spacing:var(--tr-quote);
  font-variation-settings:'opsz' 50;
  /* max-width lives here, not on .quote, and in em: measure has to scale
     with the paragraph's own rendered size (26-41px) or the line wraps to
     3-4 words at the wide end of the clamp. Pinning it to the parent's
     inherited body-copy size (16-18px) is what produced that. */
  max-width:22em;
}
.quote cite{
  display:block;margin-top:44px;font-family:var(--body);font-style:normal;
  font-weight:700;font-size:var(--t-100);line-height:var(--lh-label);
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--heartwood);
}
.on-walnut .quote cite{color:var(--sap);}

/* --- Work cards ----------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px);}
.cards--2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.cards,.cards--2{grid-template-columns:1fr;}}

.card{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line-light);
  text-decoration:none;color:inherit;
  transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),border-color var(--dur) var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:var(--sap);color:inherit;}
.card-media{position:relative;aspect-ratio:4/3.4;overflow:hidden;background:var(--shaving);}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);}
.card-media img.is-alt{opacity:0;}
.card:hover .card-media img.is-alt{opacity:1;}
.card:hover .card-media img{transform:scale(1.03);}
@media(hover:none){.card-media img.is-alt{display:none;}}
.card-body{padding:clamp(20px,2vw,26px) clamp(20px,2vw,26px) clamp(24px,2.4vw,30px);flex:1;display:flex;flex-direction:column;}
.card-body h3{margin-bottom:20px;}
.card-body p{font-size:var(--t-300);line-height:var(--lh-body);color:var(--ink-soft);}
/* Scoped to outrank `.card-body p`, which would otherwise win on specificity. */
.card-body .card-note{margin-top:auto;padding-top:32px;font-size:var(--t-100);line-height:var(--lh-label);letter-spacing:var(--tr-label);text-transform:uppercase;font-weight:700;color:var(--heartwood);}
.card-more{margin-top:32px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--t-100);line-height:var(--lh-label);letter-spacing:var(--tr-control);text-transform:uppercase;color:var(--moss);}
.card-more svg{width:15px;height:8px;transition:transform var(--dur) var(--ease);}
.card:hover .card-more svg{transform:translateX(5px);}

/* --- Piece / inventory ---------------------------------------------------- */
/* Pieces are articles, not links — they warm on hover but never lift, so the
   cursor is never promised a click the whole card does not deliver. */
.piece{background:var(--paper);border:1px solid var(--line-light);display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.piece:hover{border-color:var(--sap);box-shadow:var(--shadow-1);}
.on-walnut .piece{background:var(--walnut-2);border-color:var(--line-dark);}
.piece img{aspect-ratio:16/11;object-fit:cover;width:100%;}
.piece-body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;flex:1;}
.piece h3{margin-bottom:8px;}
.piece .spec{font-size:var(--t-100);line-height:var(--lh-label);letter-spacing:var(--tr-label);text-transform:uppercase;font-weight:700;color:var(--heartwood);margin-bottom:28px;}
.on-walnut .piece .spec{color:var(--sap);}
.piece p{font-size:var(--t-300);line-height:var(--lh-body);color:var(--ink-soft);margin-bottom:40px;}
.on-walnut .piece p{color:var(--on-dark);}
.piece-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.price{font-family:var(--display);font-size:var(--t-600);line-height:var(--lh-figure);color:var(--walnut);font-variation-settings:'opsz' 40;}
.on-walnut .price{color:var(--maple);}
.badge{
  display:inline-block;font-size:var(--t-100);line-height:var(--lh-label);
  font-weight:700;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--moss);border:1px solid var(--moss);
  padding:4px 10px;margin-bottom:28px;
}
.on-walnut .badge{color:var(--sap);border-color:var(--sap);}

/* Feature piece: large image, offset detail column */
.feature{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,64px);align-items:center;}
.feature img{width:100%;border:1px solid var(--line-dark);}
@media(max-width:900px){.feature{grid-template-columns:1fr;}}

/* Ledger rows (collection list, spec tables) */
.ledger{border-top:1px solid var(--line-dark);}
.on-shaving .ledger,body>section:not(.on-walnut) .ledger{border-top-color:var(--line-light);}
.ledger-row{
  display:grid;grid-template-columns:1.5fr 1.2fr auto auto;gap:clamp(16px,2.5vw,28px);
  align-items:center;padding:24px 0;border-bottom:1px solid var(--line-dark);
  transition:border-color var(--dur) var(--ease);
}
.ledger-row:hover{border-bottom-color:var(--sap);}
body>section:not(.on-walnut) .ledger-row{border-bottom-color:var(--line-light);}
.ledger-row .nm{font-family:var(--display);font-size:var(--t-500);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);font-variation-settings:'opsz' 30;}
.ledger-row .sp{font-size:var(--t-200);line-height:var(--lh-fine);color:#C3B49B;}
body>section:not(.on-walnut) .ledger-row .sp{color:var(--ink-soft);}
.ledger-row .pr{font-family:var(--display);font-size:var(--t-500);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);color:var(--sap);white-space:nowrap;font-variation-settings:'opsz' 30;}
body>section:not(.on-walnut) .ledger-row .pr{color:var(--heartwood);}
@media(max-width:820px){
  .ledger-row{grid-template-columns:1fr auto;row-gap:10px;}
  .ledger-row .sp{grid-column:1/-1;order:3;}
}

/* --- Numbered steps ------------------------------------------------------- */
.steps{border-top:2px solid var(--walnut);}
.step{
  display:grid;grid-template-columns:92px 1.05fr .95fr;gap:clamp(20px,3vw,36px);
  padding:clamp(26px,3vw,36px) 0;border-bottom:1px solid var(--line-light);
}
.step-num{
  font-family:var(--display);font-size:var(--t-700);line-height:var(--lh-numeral);
  color:var(--sap);font-variation-settings:'opsz' 50;
}
.step h3{margin-bottom:20px;}
.step-what p{font-size:var(--t-300);line-height:var(--lh-body);color:var(--ink-soft);}
.step-hear{
  background:var(--shaving);border:1px solid var(--line-light);
  padding:18px 20px;font-size:var(--t-200);line-height:var(--lh-fine);
  color:var(--ink-soft);align-self:start;
}
.on-shaving .step-hear{background:var(--paper);}
.step-hear .tag{
  display:block;font-weight:700;font-size:var(--t-100);line-height:var(--lh-label);
  letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--moss);margin-bottom:7px;
}
@media(max-width:900px){
  .step{grid-template-columns:1fr;gap:14px;}
  /* No size override needed: --t-700 already resolves to 26px at 400px. */
}

/* --- Species list --------------------------------------------------------- */
.species{border-top:1px solid var(--line-dark);}
.species li{
  display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line-dark);
}
.species .name{font-weight:700;font-size:var(--t-400);line-height:var(--lh-lede);color:var(--maple);}
.species .latin{font-family:var(--display);font-style:italic;font-size:var(--t-300);line-height:var(--lh-body);color:var(--sap);font-variation-settings:'opsz' 26;}
.species .note{font-size:var(--t-200);line-height:var(--lh-fine);color:#C3B49B;max-width:36ch;text-align:right;}
@media(max-width:820px){.species .note{display:none;}}

/* --- Facts strip ---------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);}
.fact dt{font-size:var(--t-100);line-height:var(--lh-label);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--heartwood);margin-bottom:10px;}
.on-walnut .fact dt{color:var(--sap);}
.fact dd{font-family:var(--display);font-size:var(--t-600);line-height:var(--lh-figure);letter-spacing:var(--tr-quote);font-variation-settings:'opsz' 40;}
.fact .sub{font-family:var(--body);font-size:var(--t-200);line-height:var(--lh-fine);color:var(--ink-soft);margin-top:8px;}
.on-walnut .fact .sub{color:var(--on-dark);}
@media(max-width:820px){.facts{grid-template-columns:repeat(2,1fr);}}

/* --- Prose (long-form SEO copy) ------------------------------------------ */
.prose{max-width:68ch;}
.prose h2{margin-top:clamp(44px,4.5vw,66px);margin-bottom:36px;}
.prose h3{margin-top:clamp(30px,3vw,42px);margin-bottom:24px;}
.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose p{margin-bottom:38px;}          /* was 19px = 0.68 of a line, so paragraphs ran together */
.prose ul{margin:0 0 44px;padding-left:0;}
.prose ul li{position:relative;padding-left:26px;margin-bottom:22px;}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--sap);
}
.prose a{font-weight:600;}

/* Q&A blocks — the format AI answer engines lift cleanly */
.qa{border-top:1px solid var(--line-light);}
/* Doubled at desktop, where it was cramped. Eased on mobile, where the
   original 26px already read fine against a 72px section pad. */
.qa-item{padding:clamp(32px,3.6vw,52px) 0;border-bottom:1px solid var(--line-light);}
.on-walnut .qa,.on-walnut .qa-item{border-color:var(--line-dark);}
.qa-item h3{margin-bottom:24px;}
.qa-item p{font-size:var(--t-300);line-height:var(--lh-body);color:var(--ink-soft);max-width:72ch;}
.on-walnut .qa-item p{color:var(--on-dark);}

/* --- Contact block -------------------------------------------------------- */
.contact-list{display:grid;gap:40px;}
.contact-list dt{font-size:var(--t-100);line-height:var(--lh-label);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--heartwood);margin-bottom:5px;}
.on-walnut .contact-list dt{color:var(--sap);}
.contact-list dd{font-size:var(--t-300);line-height:var(--lh-body);}
.contact-list a{text-decoration:none;border-bottom:1px solid var(--sap);padding-bottom:2px;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);}
.contact-list a:hover{border-color:currentColor;}

/* --- Form ----------------------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:40px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field--full{grid-column:1/-1;}
.form label{font-weight:700;font-size:var(--t-100);line-height:var(--lh-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--heartwood);}
.form input,.form select,.form textarea{
  font-size:var(--t-300);line-height:var(--lh-body);color:var(--ink);background:var(--paper);
  border:1px solid #C6B99F;border-radius:0;padding:14px 15px;width:100%;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--heartwood);}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--moss);box-shadow:0 0 0 3px rgba(74,84,54,.14);}
.form textarea{min-height:140px;resize:vertical;}
.form-foot{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.form-status{font-size:var(--t-200);line-height:var(--lh-fine);color:var(--ink-soft);max-width:34ch;}
.form-status[data-state="error"]{color:#8A3A22;font-weight:600;}
.form-status[data-state="ok"]{color:var(--moss);font-weight:600;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
@media(max-width:820px){.form{grid-template-columns:1fr;}}

.assure{border-left:2px solid var(--moss);padding:6px 0 6px 18px;font-size:var(--t-300);line-height:var(--lh-body);color:var(--ink-soft);}
.on-walnut .assure{border-color:var(--sap);color:var(--on-dark);}

/* --- Closing CTA band ----------------------------------------------------- */
.band{background:var(--walnut);color:var(--on-dark);}
.band .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,60px);align-items:end;}
.band h2{color:var(--maple);max-width:16ch;}
.band p{color:var(--on-dark);margin-top:32px;max-width:44ch;}
.band-action{justify-self:start;}
@media(min-width:1000px){.band-action{justify-self:end;}}
@media(max-width:900px){.band .wrap{grid-template-columns:1fr;align-items:start;}}

/* --- Footer --------------------------------------------------------------- */
.foot{background:var(--walnut);color:var(--on-dark);padding:clamp(56px,6vw,80px) 0 40px;border-top:1px solid var(--line-dark);}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,48px);}
.foot img.mark{height:52px;width:auto;margin-bottom:20px;background:none;}
.foot h2{font-family:var(--body);font-weight:700;font-size:var(--t-100);line-height:var(--lh-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--sap);margin-bottom:32px;}
.foot li{margin-bottom:20px;}
.foot a{color:#EAE1D1;text-decoration:none;font-size:var(--t-300);line-height:var(--lh-body);}
.foot a:hover{color:var(--sap);}
.foot-note{font-size:var(--t-200);line-height:var(--lh-fine);max-width:34ch;color:var(--on-dark);}
.foot address{font-style:normal;font-size:var(--t-300);line-height:var(--lh-body);color:#EAE1D1;}
.foot-bottom{
  margin-top:clamp(40px,5vw,60px);padding-top:24px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:var(--t-200);line-height:var(--lh-fine);color:#A99878;
}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;}}

/* --- Reveal animation ----------------------------------------------------- */
/* Scroll reveal. 12px of travel, not 22 — at 300ms a longer throw reads as a
   slide, and the brief is subtle. Opacity leads slightly so it fades in
   rather than flying in. */
.js .reveal{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-visible{opacity:1;transform:none;}

/* Stagger only where siblings enter the viewport together. Steps and Q&A rows
   are observed individually as you scroll, so a delay there would just feel
   like lag. */
.js .cards>.reveal:nth-child(2),.js .feature>.reveal:nth-child(2){transition-delay:70ms;}
.js .cards>.reveal:nth-child(3){transition-delay:140ms;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .js .reveal{opacity:1;transform:none;transition-delay:0ms!important;}
  .js .hero-media{animation:none;}
  .js .hero-inner>*{opacity:1;transform:none;animation:none;}
  .cta::after{animation:none!important;box-shadow:none!important;}
  .card:hover,.piece:hover{transform:none;}
}

/* --- Print ---------------------------------------------------------------- */
@media print{
  .nav,.band,.hero-actions,.cta{display:none!important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .on-walnut{background:#fff;color:#000;}
}