/* ==================================================================
   TRADESTUDIO - Ivory, gold, deep green. Residential design office.
   ================================================================== */
:root{
  --ivory:#FBF8F1; --band:#F5EFE1; --paper:#FFFDF8; --white:#fff;
  --ink:#191713; --ink-2:#3A352B; --muted:#6B6355; --faint:#9A9182;
  --line:#E7DEC9; --line-2:#F1EADA;
  --gold:#B4923C; --gold-d:#8E7130; --gold-l:#E8D5A8; --gold-tint:#FBF3DF;
  --deep:#14201C; --deep-2:#22392F; --deep-3:#0D1614;
  --green:#1D6B4F; --green-bg:#EDF5F0;
  --red:#A93E2E; --red-bg:#FBEFEC;
  --shadow:0 1px 2px rgba(25,23,19,.04),0 8px 24px rgba(25,23,19,.06);
  --shadow-lg:0 2px 4px rgba(25,23,19,.04),0 26px 60px rgba(25,23,19,.13);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:16px; --r-lg:22px;
}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.7;font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;line-height:1.1;
  letter-spacing:-.008em;font-variant-numeric:lining-nums tabular-nums}
p{margin:0 0 1em}
img,svg{max-width:100%}
a{color:var(--gold-d);text-underline-offset:3px}
a:hover{color:var(--gold)}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* the single horizontal gutter. see rule 1 in the module docstring. */
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-d);margin:0 0 18px}
.serif-eyebrow{font-family:var(--serif);font-style:italic;font-size:19px;font-weight:600;
  color:var(--gold-d);margin:0 0 10px;letter-spacing:0}

/* ---------------- header ---------------- */
/* Frosted, not opaque: over the hero film the page shows through the bar,
   which is most of what reads as expensive. Opacity comes back up the moment
   there is no backdrop-filter, so an old engine gets a solid bar, not a see-through one. */
.site-head{position:sticky;top:0;z-index:60;background:rgba(9,15,13,.92);color:#F3EFE4;
  border-bottom:1px solid rgba(201,169,106,.18)}
/* .84, not the .62 the reference uses. The bar sits ABOVE the hero in flow,
   so at the top of the page what is behind it is the ivory body, and at .62
   that mixed to a flat grey. At .84 it stays dark over ivory and still lets
   the page ghost through once the visitor scrolls. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-head{background:rgba(9,15,13,.84);
    -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
}
.site-head .bar{display:flex;align-items:center;gap:20px;padding-block:14px}
.mark{display:block;text-decoration:none;color:#F6F1E4;margin-right:auto;flex:0 0 auto}
.mark b{display:block;font-family:var(--serif);font-size:23px;font-weight:600;
  line-height:1.1;letter-spacing:.01em}
.mark span{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-l);margin-top:3px}
/* The nav is a normal flex item holding a list. It used to be a <details> with
   display:contents, which Chrome does not lay out: the list measured zero wide
   and its seven items simply ran off the right of the header. */
.nav{display:flex;align-items:center;min-width:0}
.nav-list{display:flex;gap:20px;align-items:center;list-style:none;margin:0;padding:0;
  flex-wrap:wrap}
.nav-list a{color:#D5CEBD;text-decoration:none;font-size:14.5px;font-weight:500;
  white-space:nowrap;padding-block:4px}
.nav-list a:hover{color:#fff}
.nav-list a[aria-current]{color:var(--gold-l);box-shadow:inset 0 -1px 0 var(--gold)}
.nav-cta{background:var(--gold);color:#241D0A !important;font-weight:600;font-size:13.5px;
  padding:11px 20px;border-radius:999px;text-decoration:none;white-space:nowrap;
  flex:0 0 auto}
.nav-cta:hover{background:var(--gold-l);color:#241D0A !important}
.menu-btn{display:none;cursor:pointer;background:transparent;color:#E4DCCA;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid rgba(201,169,106,.4);border-radius:999px;
  padding:10px 18px}
.menu-btn[aria-expanded=true]{color:var(--gold-l);background:rgba(201,169,106,.14)}

/* ---------------- buttons ---------------- */
.btns{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:#241D0A;
  font-weight:600;font-size:15.5px;padding:14px 28px;border-radius:999px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  box-shadow:0 8px 24px rgba(180,146,60,.30);transition:transform .16s ease,
  background .16s ease,box-shadow .16s ease}
.btn:hover{background:var(--gold-l);color:#241D0A;transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(180,146,60,.38)}
.btn.ghost{background:rgba(255,255,255,.04);color:#EFE8D8;border-color:rgba(232,213,168,.45);
  box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn.ghost:hover{background:rgba(232,213,168,.14);color:#fff;transform:translateY(-1px);
  border-color:#fff}
.btn.dark{background:var(--deep);color:var(--gold-l);box-shadow:0 6px 20px rgba(20,32,28,.2)}
.btn.dark:hover{background:var(--deep-2);color:#fff}
.btn.line{background:transparent;color:var(--ink-2);border-color:var(--line);box-shadow:none}
.btn.line:hover{background:var(--gold-tint);border-color:var(--gold-l);color:var(--gold-d)}
.btn .ic{width:18px;height:18px;flex:0 0 auto}
.btn-note{font-size:13.5px;color:var(--muted)}

/* ---------------- hero ----------------
   The artwork is an isometric drawing, so the hero gives it an actual camera.
   `.hero` holds the perspective, `.hero-3d` is the preserve-3d stage, and the
   planes inside it sit at different Z. Pointer and scroll rotate the stage a
   couple of degrees; the parallax between the planes is then produced by the
   projection itself rather than by moving each layer by hand.

   THREE THINGS HERE ARE LOAD-BEARING
   1. The stage is an INNER element. `.hero` must keep overflow:hidden to clip
      the oversized planes, and a clipping box is flattened to transform-style
      flat by every engine, which would collapse the depth to nothing.
   2. `.hero-3d` is inset by a negative percentage. Rotating a plane that
      exactly fills its box swings its corners inside the frame and shows the
      dark background behind them.
   3. Every transform reads from --px/--py/--sy, which default to 0. With no
      script, or with reduced motion, they stay 0 and this renders square on:
      the flat hero exactly as it was. The effect can never be load-bearing. */
.hero{position:relative;background:var(--deep);color:#F5F1E6;overflow:hidden;
  isolation:isolate;min-height:min(86vh,820px);display:flex;align-items:center;
  perspective:1180px;perspective-origin:68% 46%;
  --px:0;--py:0;--sy:0}
/* THE FILM. Present only when _build/media holds hero_1600.mp4, hero_mobile.mp4
   and hero_poster.jpg (made by _build/hero_video.py). Then the 3D stage is not
   rendered at all and this full-bleed video takes its place: poster first, so
   the first paint is a finished frame, then a slow push-in that reads as
   camera drift rather than as a loop restarting. The scrim gets the heavier
   left veil the copy needs over live footage. */
.hero-media{position:absolute;inset:0;overflow:hidden;background:var(--deep-3)}
.hero-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:56% 58%;
  transform:scale(1.07);animation:kb 22s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes kb{to{transform:scale(1)}}
.hero.has-film .hero-scrim{background:
  linear-gradient(90deg,rgba(7,11,18,.93) 0%,rgba(7,11,18,.76) 36%,rgba(7,11,18,.28) 60%,
    rgba(7,11,18,0) 80%),
  linear-gradient(180deg,rgba(7,11,18,.28) 0%,rgba(7,11,18,0) 30%,rgba(7,11,18,0) 66%,
    rgba(7,11,18,.78) 100%)}
/* The copy rises in, staggered. Only when a script runs and motion is wanted;
   otherwise it is simply there. */
@media (prefers-reduced-motion:no-preference){
  .js .hero .wrap>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .js .hero .wrap>*:nth-child(2){animation-delay:.08s}
  .js .hero .wrap>*:nth-child(3){animation-delay:.16s}
  .js .hero .wrap>*:nth-child(4){animation-delay:.24s}
  .js .hero .wrap>*:nth-child(5){animation-delay:.32s}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}
.hero-3d{position:absolute;inset:-7%;transform-style:preserve-3d;
  transform:rotateX(calc(var(--py) * -2.4deg)) rotateY(calc(var(--px) * 3.2deg));
  transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 58%;transform-origin:68% 54%;
  transform:translateZ(calc(-150px - var(--sy) * 90px)) scale(1.17);
  transition:transform .45s cubic-bezier(.22,.61,.36,1)}
/* There was a receding grid plane here, to give the eye a horizon to read the
   rotation against. It is gone, and the reason is worth keeping: the drawing
   is opaque and full bleed, so a floor has nowhere to be. It rendered behind
   the sky, showed nothing at any width, and still cost a composited layer.
   The drawing already carries its own ground and a dashed gold lot line, so a
   second grid was redundant even where it could be seen. The depth that does
   the work is the Z gap between the drawing and the text. */
/* Warm light in front of everything, so the near plane is not just the text. */
.hero-glow{position:absolute;inset:0;transform:translateZ(62px);pointer-events:none;
  background:radial-gradient(46% 58% at 78% 40%,rgba(201,169,106,.20),transparent 70%)}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(96deg,rgba(9,16,14,.95) 0%,rgba(11,19,17,.88) 34%,
    rgba(13,22,20,.52) 60%,rgba(13,22,20,.12) 84%,rgba(13,22,20,0) 100%)}
/* width:100% is load-bearing. .hero is a flex container, so without it the
   .wrap sizes to its own content, `margin:0 auto` centres that, and the hero
   text starts 280px right of every other section on the page.
   The text is deliberately OUTSIDE the 3D stage: it counter-moves in 2D
   instead. Inside the stage it would inherit the rotation, and rotated type
   at this size goes soft on the far edge on any non-retina screen. */
.hero .wrap{position:relative;z-index:2;padding-block:88px;width:100%;
  transform:translate3d(calc(var(--px) * -13px),calc(var(--py) * -8px),0);
  transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.hero h1{font-size:clamp(44px,6.3vw,82px);line-height:.98;max-width:15ch;
  letter-spacing:-.018em;font-weight:600;text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold-l)}
.hero .type-line{margin:22px 0 0;font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);
  color:var(--gold-l);letter-spacing:.01em;max-width:26ch}
.hero .lede{color:#D3CCBB;max-width:29em;margin:20px 0 0;font-size:clamp(17px,2vw,20px);
  line-height:1.55;text-wrap:pretty}
.hero .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--gold-l);
  font-size:12px;letter-spacing:.22em;margin-bottom:22px}
.hero .eyebrow::before{content:"";width:28px;height:1px;background:var(--gold);flex:0 0 28px}
@media (max-width:820px){
  .hero{min-height:0;perspective:none}
  /* Flat below 820. A phone has no pointer to drive the camera, the rotation
     costs a composite layer on the weakest hardware that loads this page, and
     the floor grid eats the drawing at that width. */
  .hero-3d{position:absolute;inset:0;transform:none;transform-style:flat}
  .hero-bg{object-position:66% 62%;transform:none}
  /* Dead centre, and the Y is deliberately 50 rather than a tuned
     number: below 900px the page loads hero_mobile.mp4, which is
     already a 4:5 crop framed on the building, so there is almost no
     overflow left to steer. The old 52%/60% was steering a 16:9 film
     of which the phone could only ever show 36% of the width, and its
     Y did nothing at all because a wide film in a portrait box has no
     vertical overflow to move. */
  .hero-media video{object-position:50% 50%;transform:none;animation:none}
  .hero-glow{transform:none;opacity:.7}
  .hero .wrap{transform:none}
  .hero .eyebrow{font-size:10.5px;letter-spacing:.16em;gap:10px}
  .hero .eyebrow::before{width:18px;flex-basis:18px}
  .hero.has-film .hero-scrim{background:linear-gradient(180deg,rgba(7,11,18,.55) 0%,
    rgba(7,11,18,.82) 45%,rgba(7,11,18,.96) 100%)}
  .hero-scrim{background:linear-gradient(180deg,rgba(9,16,14,.93) 0%,
    rgba(11,19,17,.9) 55%,rgba(11,19,17,.86) 100%)}
}

/* page heads for the inner pages */
.phead{background:
    radial-gradient(760px 340px at 82% -30%,rgba(201,169,106,.2),transparent 62%),
    linear-gradient(140deg,var(--deep) 0%,var(--deep-2) 100%);
  color:#F3EFE4;padding:66px 0 70px;position:relative;overflow:hidden}
.phead::before{content:'';position:absolute;inset:0;opacity:.14;
  background-image:linear-gradient(rgba(201,169,106,.6) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,169,106,.6) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 90% at 16% 0%,#000 20%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 16% 0%,#000 20%,transparent 76%)}
.phead .wrap{position:relative;z-index:2}
.phead .eyebrow{color:var(--gold-l)}
.phead h1{font-size:clamp(33px,4.6vw,52px);max-width:22ch;letter-spacing:-.015em}
.phead .lede{color:#CFC8B7;max-width:56ch;margin:20px 0 0;font-size:17.5px}
.crumb{font-size:13px;color:#A9A190;margin:0 0 14px;letter-spacing:.02em}
.crumb a{color:var(--gold-l);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---------------- the project-type strip ---------------- */
/* Dark band under the hero, continuous with it, so the top of the page reads
   as one cinematic block and the ivory begins below with the work. The icons
   sit in gold-lined tiles; the hairlines are drawn by the gap trick, and five
   items go into 1 / 2 / 5 columns, all of which the mobile rule closes. */
.strip{background:var(--deep-3);color:#EDE6D6;border-top:1px solid rgba(201,169,106,.22);
  border-bottom:1px solid rgba(201,169,106,.14)}
.strip ul{display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:0;
  padding:0;gap:1px;background:rgba(201,169,106,.14)}
.strip li{background:var(--deep-3)}
.strip a{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:30px 12px 28px;text-decoration:none;color:#EDE6D6;text-align:center;
  transition:background .18s ease,color .18s ease}
.strip a:hover{background:rgba(201,169,106,.09);color:var(--gold-l)}
.strip .ic{width:54px;height:54px;padding:12px;border-radius:14px;color:var(--gold-l);
  background:rgba(201,169,106,.12);border:1px solid rgba(201,169,106,.32);
  transition:background .18s ease,border-color .18s ease}
.strip a:hover .ic{background:rgba(201,169,106,.2);border-color:rgba(232,213,168,.6)}
.strip span{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.3}
@media (max-width:820px){
  .strip ul{grid-template-columns:repeat(2,1fr)}
  .strip li:last-child{grid-column:1 / -1}
  .strip a{flex-direction:row;justify-content:center;padding:15px 12px;gap:10px}
  .strip .ic{width:40px;height:40px;padding:9px;border-radius:11px}
  .strip span{font-size:11.5px;letter-spacing:.08em}
}

/* ---------------- sections ---------------- */
section{padding:104px 0}
section.tint{background:var(--band);border-block:1px solid var(--line)}
/* The "why us" band carries the hero still behind it at low opacity, the same
   trick the flow band on the HouseScan page uses: one picture, seen twice,
   ties the top of the page to the middle. Only when the film exists. */
section.ink.film{position:relative;isolation:isolate;overflow:hidden}
/* A real <img>, not a url() in a custom property: a url() written inside a
   custom property is resolved against the STYLESHEET when the var is consumed,
   so `assets/media/x.jpg` set inline on the page became assets/assets/media/x.jpg
   and the sweep failed on a 404. An img src resolves against the page. */
section.ink.film .film-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;opacity:.22;filter:saturate(.7)}
section.ink.film::after{content:'';position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(20,32,28,.92) 0%,rgba(20,32,28,.78) 50%,rgba(20,32,28,.94) 100%)}
section.paper{background:var(--paper);border-block:1px solid var(--line)}
section.ink{background:
    radial-gradient(760px 360px at 78% -24%,rgba(201,169,106,.16),transparent 62%),
    linear-gradient(140deg,var(--deep) 0%,var(--deep-2) 100%);color:#DCD4C2}
section.ink h2,section.ink h3,section.ink h4{color:#F6F1E4}
section.ink h2::after{background:rgba(201,169,106,.5)}
section.ink .eyebrow,section.ink .serif-eyebrow{color:var(--gold-l)}
section.ink .sub{color:#BFB7A5}
section.ink a{color:var(--gold-l)}
section.tight{padding:64px 0}

h2{font-size:clamp(34px,4.2vw,54px);max-width:22ch;padding-bottom:20px;position:relative;
  letter-spacing:-.018em;line-height:1.04;text-wrap:balance}
h2 em{font-style:italic;font-weight:500;color:var(--gold-d)}
section.ink h2 em,.band h2 em{color:var(--gold-l)}
h2::after{content:'';position:absolute;left:0;bottom:0;width:68px;height:1px;
  background:var(--gold)}
/* Every eyebrow gets the short gold rule the hero's has, so the sections read
   as one family with the top of the page. */
.eyebrow{display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);flex:0 0 22px}
h2.plain{padding-bottom:0}
h2.plain::after{display:none}
h3{font-size:22px}
.sub{color:var(--muted);max-width:62ch;margin:20px 0 0;font-size:17px}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
  flex-wrap:wrap}
.head-row .btns{margin-top:0}

.grid{display:grid;gap:26px;margin-top:44px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* ---------------- project cards ---------------- */
.pcard{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;position:relative;
  transition:box-shadow .28s ease,transform .28s ease,border-color .28s ease}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);
  border-color:var(--gold-l)}
/* The renders are drawings, and they are framed as drawings: a plate with a
   hairline mat and a slow push-in on hover, not a photo pretending to be built. */
.pcard .shot{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  background:var(--band);border-bottom:1px solid var(--line);
  transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.pcard:hover .shot{transform:scale(1.035)}
.pcard::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold-l),var(--gold));opacity:0;
  transition:opacity .28s ease}
.pcard:hover::after{opacity:1}
.pcard .body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1 1 auto}
.pcard h3{font-size:24px;line-height:1.16;margin:0 0 10px;color:var(--ink)}
.pcard:hover h3{color:var(--gold-d)}
.pcard p{margin:0;font-size:16px;color:var(--ink-2)}
.pcard .more{margin-top:20px;font-weight:600;color:var(--gold-d);font-size:14.5px;
  letter-spacing:.02em;display:inline-flex;align-items:center;gap:7px}
.pcard:hover .more{gap:11px}
.meta{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;list-style:none;padding:0}
.meta li{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-d);background:var(--gold-tint);border:1px solid #EEE1BC;
  padding:5px 11px;border-radius:999px}
.example-note{margin:20px 0 0;font-size:13.5px;color:var(--muted);font-style:italic;
  font-family:var(--serif);font-size:16px}

/* ---------------- service cards ---------------- */
.scard{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 32px 30px;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;
  transition:box-shadow .26s ease,transform .26s ease,border-color .26s ease}
.scard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--gold-l)}
.scard .ic{width:56px;height:56px;padding:13px;border-radius:14px;color:var(--gold-d);
  background:var(--gold-tint);border:1px solid #EEE1BC;margin-bottom:22px;
  transition:background .26s ease,color .26s ease,border-color .26s ease}
.scard:hover .ic{background:var(--gold);color:#241D0A;border-color:var(--gold)}
.scard h3{font-size:23px;margin:0 0 9px}
.scard:hover h3{color:var(--gold-d)}
.scard p{margin:0;font-size:16px;color:var(--ink-2);flex:1 1 auto}
.scard .more{margin-top:18px;font-weight:600;color:var(--gold-d);font-size:14.5px}

/* ---------------- steps ---------------- */
/* Six steps, so the column count must DIVIDE six or the shared hairline background
   shows through the leftover cells as a solid slab. auto-fit gave four columns at
   1360px and printed a two-column-wide tan block under steps 05 and 06. */
.steps{counter-reset:s;display:grid;gap:1px;margin-top:44px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  grid-template-columns:1fr}
@media(min-width:620px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--paper);padding:34px 30px 36px;position:relative;overflow:hidden;
  transition:background .26s ease}
.step:hover{background:var(--gold-tint)}
.step .ic{width:34px;height:34px;color:var(--gold-d)}
/* The step number is the big serif numeral, set faint and large behind the
   corner, the way a plate number sits on a drawing sheet. */
.step b{counter-increment:s;display:block;font-family:var(--serif);font-size:12px;
  font-weight:700;letter-spacing:.18em;color:var(--gold-d);margin:16px 0 8px}
.step b::before{content:'STEP ' counter(s,decimal-leading-zero)}
.step b::after{content:counter(s,decimal-leading-zero);position:absolute;right:18px;top:6px;
  font-size:84px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--gold);
  opacity:.14;pointer-events:none}
.step h3{font-size:21px;margin:0 0 8px}
.step p{margin:0;color:var(--muted);font-size:15.5px}

/* ---------------- trust ---------------- */
.trust-row{display:grid;gap:1px;background:rgba(201,169,106,.22);
  border:1px solid rgba(201,169,106,.26);border-radius:var(--r-lg);overflow:hidden;
  margin-top:8px;grid-template-columns:1fr}
@media(min-width:560px){.trust-row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.trust-row{grid-template-columns:repeat(4,1fr)}}
.trust-item{background:rgba(9,16,14,.55);padding:34px 30px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .26s ease}
.trust-item:hover{background:rgba(9,16,14,.72)}
.trust-item .ic{width:46px;height:46px;padding:10px;border-radius:12px;color:var(--gold-l);
  background:rgba(201,169,106,.12);border:1px solid rgba(201,169,106,.32)}
.trust-item strong{display:block;font-family:var(--serif);font-size:28px;font-weight:600;
  color:#F6F1E4;margin:18px 0 6px;line-height:1.14}
.trust-item span{display:block;font-size:14px;color:#B4AB99;line-height:1.5}

/* The family tiles are counted out of the rulebook, so the number of them is not
   fixed and no column count can be guaranteed to divide it. The hairlines are
   therefore drawn by each TILE, and the panel behind them is the SAME colour as a
   tile, so a short last row reads as blank panel rather than as a slab of the
   hairline colour. The outward 1px spread of the edge tiles lands in the container
   border and is clipped by overflow:hidden, so the outer line stays one hairline. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin-top:44px}
.stat{background:var(--paper);padding:30px 26px;box-shadow:0 0 0 1px var(--line)}
.stat b{display:block;font-family:var(--serif);font-size:48px;font-weight:600;line-height:1;
  color:var(--gold-d)}
.stat span{display:block;font-size:14px;color:var(--muted);margin-top:12px;line-height:1.5}
section.ink .stats{background:rgba(9,16,14,.4);border-color:rgba(201,169,106,.24)}
section.ink .stat{background:rgba(9,16,14,.4);box-shadow:0 0 0 1px rgba(201,169,106,.2)}
section.ink .stat b{color:var(--gold-l)}
section.ink .stat span{color:#B4AB99}

/* ---------------- the gold band ---------------- */
.band{background:linear-gradient(118deg,#3A2C0D 0%,#6E5519 62%,#7E6220 100%);
  color:#F8F1DE;border-radius:var(--r-lg);padding:52px 52px 54px;position:relative;
  overflow:hidden;box-shadow:var(--shadow-lg)}
.band::before{content:'';position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,242,210,.65) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,242,210,.65) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 100% at 92% 6%,#000 16%,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 92% 6%,#000 16%,transparent 74%)}
.band>*{position:relative}
.band .eyebrow{color:#E9D6A9}
.band h2{color:#FCF5E3;max-width:26ch}
.band h2::after{background:rgba(255,242,210,.55)}
.band p{color:#E6DAB9;max-width:58ch;margin:18px 0 0;font-size:16.5px}
.band .btns{margin-top:30px}
.band .btn{background:#FBF3DF;color:#3A2C0D;box-shadow:none}
.band .btn:hover{background:#fff;color:#3A2C0D}
.band .btn.ghost{background:transparent;color:#F3E7C6;border-color:rgba(251,243,223,.42)}

/* ---------------- plain content cards ---------------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 30px 32px;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px}
.card p{color:var(--ink-2)}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card ul{margin:14px 0 0;padding-left:20px;color:var(--muted);font-size:16px}
.card li{margin-bottom:9px}
.card li:last-child{margin-bottom:0}
.card li::marker{color:var(--gold)}
.card .ic{width:32px;height:32px;color:var(--gold-d);margin-bottom:14px}
.card.flag{border-left:3px solid var(--gold)}
.card.good{border-top:3px solid var(--green);background:var(--green-bg);border-color:#C6DED1}
.card.warn{border-top:3px solid var(--gold-d);background:var(--gold-tint);border-color:#EEE1BC}

.note{background:var(--gold-tint);border:1px solid #EEE1BC;border-left:3px solid var(--gold);
  border-radius:var(--r);padding:28px 30px;margin-top:44px}
.note h3{font-size:20px;margin:0 0 12px;color:var(--gold-d)}
.note ul{margin:0;padding-left:20px;color:var(--ink-2);font-size:16px}
.note li{margin-bottom:10px}
.note li:last-child{margin-bottom:0}
.note li::marker{color:var(--gold)}
.note p{color:var(--ink-2);font-size:16px}
.note p:last-child{margin-bottom:0}

/* prose, for the pages that genuinely are reading pages */
.prose{max-width:74ch}
.prose h2{margin-top:52px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:23px;margin:38px 0 10px}
.prose p,.prose li{color:var(--ink-2);font-size:17px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1.1em}
.prose li{margin-bottom:11px}
.prose li::marker{color:var(--gold)}
.prose blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:2px solid var(--gold-l);
  font-family:var(--serif);font-size:21px;font-style:italic;line-height:1.5;color:var(--ink)}
.prose .cite{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-d);margin:0 0 8px}

/* ---------------- project detail page ---------------- */
.plate{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.plate img{display:block;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;
  background:var(--band)}
.plate.doc img{aspect-ratio:auto;object-fit:contain;padding:14px;background:var(--paper)}
.plate figcaption{padding:16px 22px 18px;border-top:1px solid var(--line-2);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--gold-d);display:flex;justify-content:space-between;gap:12px;
  align-items:baseline}
.plate figcaption em{font-family:var(--serif);font-size:15px;font-style:italic;
  letter-spacing:0;text-transform:none;color:var(--muted);font-weight:400}
figure{margin:0}
.spec{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.spec div{background:var(--paper);padding:22px 24px}
.spec dt{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px}
.spec dd{margin:0;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2}
.two{display:grid;gap:34px;grid-template-columns:1.15fr .85fr;align-items:start;
  margin-top:44px}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:26px}}

/* ---------------- forms ---------------- */
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 34px 36px;box-shadow:var(--shadow)}
.form h3{font-size:26px;margin:0 0 6px}
.form .hint{color:var(--muted);font-size:15.5px;margin:0 0 24px}
.fields{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.f-wide{grid-column:1 / -1}
label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
label .req{color:var(--gold-d)}
input,select,textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold-l);
  outline-offset:1px;border-color:var(--gold)}
textarea{min-height:118px;resize:vertical}
select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
input[type=file]{padding:10px 12px;background:var(--band);cursor:pointer;font-size:14.5px}
.form .btns{margin-top:26px}
.form .fine{margin:16px 0 0;font-size:13.5px;color:var(--faint)}
.form-out{margin-top:22px;padding:22px 24px;border-radius:var(--r);
  background:var(--gold-tint);border:1px solid #EEE1BC;font-size:16px;color:var(--ink-2)}
.form-out h4{font-size:19px;margin:0 0 8px;color:var(--gold-d)}
.form-out p:last-child{margin-bottom:0}
@media (max-width:640px){.fields{grid-template-columns:1fr}}

/* ---------------- footer ---------------- */
footer{background:
    radial-gradient(700px 300px at 8% 0%,rgba(201,169,106,.10),transparent 60%),
    var(--deep-3);color:#ADA593;padding:84px 0 44px;font-size:15px;
  border-top:1px solid rgba(201,169,106,.2)}
footer .foot-grid{display:grid;gap:34px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
footer strong{display:block;color:#F6F1E4;font-weight:600;font-family:var(--serif);
  font-size:19px;margin-bottom:10px}
footer a{color:var(--gold-l);text-decoration:none}
footer a:hover{text-decoration:underline}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:8px}
footer .fine{margin-top:46px;padding-top:24px;border-top:1px solid rgba(201,169,106,.18);
  font-size:13px;color:#867E6E;display:flex;flex-wrap:wrap;gap:8px 28px}

/* ---------------- scroll reveal ----------------
   Hidden ONLY when a script is running and the visitor has not asked for less
   motion. See rule 3. verify.js turns reduced motion ON, so a full-page
   screenshot shows the finished page rather than a column of blank sections. */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(12px);
    transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv-2{transition-delay:.08s}
  .js .rv-3{transition-delay:.16s}
}

/* ---------------- mobile ----------------
   Seven nav items, a wordmark and a call to action stop fitting on one line at
   about 1050px, measured, so the disclosure starts at 1080. Below it the list
   is collapsed ONLY when a script is running: with scripting off it simply
   renders as a stacked list, which works, rather than as a button that does
   nothing. */
@media (max-width:1080px){
  .menu-btn{display:block}
  .site-head .bar{flex-wrap:wrap}
  .nav{order:3;width:100%;display:block}
  .js .nav-list{display:none}
  .js .nav[data-open] .nav-list,.nav-list{flex-direction:column;align-items:stretch;
    gap:0;padding:10px 0 4px;width:100%}
  .js .nav[data-open] .nav-list{display:flex}
  .nav-list li{border-top:1px solid rgba(201,169,106,.14)}
  .nav-list a{display:block;padding:13px 0;font-size:16px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  section{padding:60px 0}
  section.tight{padding:46px 0}
  .hero .wrap{padding-block:60px}
  .phead{padding:48px 0 52px}
  .band{padding:34px 28px 36px}
  .card,.scard,.form{padding:26px 24px}
  .grid{gap:20px;margin-top:32px}
  .step{padding:26px 24px 28px}
  h2{padding-bottom:15px}
  .pcard .body{padding:22px 22px 24px}
  .plate figcaption{padding:14px 18px 16px;flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pcard,.scard,.btn{transition:none}
  .pcard:hover,.scard:hover,.btn:hover{transform:none}
  /* The camera is off, not slowed. verify.js runs with reduced motion on, so
     this is also the state every screenshot in _build/shots is taken in. */
  .hero{perspective:none}
  .hero-3d{position:absolute;inset:0;transform:none;transform-style:flat;transition:none}
  .hero-bg,.hero-glow,.hero .wrap{transform:none;transition:none}
  .hero-media video{animation:none;transform:none}
}