/* TM Elite Contracting — black & gold, matching the Cash Offer Kings hubs.
   Dark suits this trade: finished cabinetry photographs warm, and warm work
   against near-black reads as craft rather than as a catalogue page. */

:root{
  --bg:#050505; --bg-2:#0b0908; --panel:#141210; --panel-2:#1c1813;
  --line:#2a2620; --line-2:#3a3428;
  --gold:#C9A84C; --gold-br:#e9c96a; --gold-dim:#8a6f2e;
  --ink:#e8e4da; --ink-2:#9b9686;
  /* Was #6b665a -- 3.57:1, under the 4.5 AA needs for text this size.
     Same hue and saturation, lightened until it clears 4.5 on the
     darkest surface it appears on. */
  --ink-3:#7f796b;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Consolas,monospace;
  /* Pulled off the cabinetry in the hero photo, so the accent belongs to the
     work rather than being decoration. */
  --wood:#8A5A2B; --wood-lt:#A97440;
  /* From the animate skill table. The built-in CSS easings are too weak to
     read as intentional. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  /* One light source, gold, from above-left. Every surface below is lit by
     this and nothing else. */
  --lit:rgba(233,201,106,.14);      /* top edge catching the light */
  --unlit:rgba(0,0,0,.45);          /* bottom edge falling away */
  --bloom:rgba(201,168,76,.28);
  --surface:linear-gradient(168deg,#181511 0%,#131110 46%,#0e0c0a 100%);
  --surface-2:linear-gradient(168deg,#201b15 0%,#181410 52%,#110f0c 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
/* <picture> defaults to display:inline with auto height. An img inside it then
   cannot resolve height:100% against the figure -- the percentage hits the
   picture, which has no definite height, and collapses. It also leaves a
   baseline gap under every image. Both go away by making it a block that fills
   its parent. This broke the photo strips the moment the WebP <source>
   wrappers went in. */
picture{display:block;width:100%;height:100%}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.018em;line-height:1.14;text-wrap:balance}

/* ---------- aurora ---------- */
/* Two large warm fields on different periods so the loop never reads. */
.hero .aur{position:absolute;inset:-20% -10% 0 -10%;z-index:-1;pointer-events:none;
  overflow:hidden}
.hero .aur span{position:absolute;display:block;border-radius:50%;
  filter:blur(70px);opacity:.5;will-change:transform}
.hero .aur span:nth-child(1){width:58vw;height:46vw;left:44%;top:-12%;
  background:radial-gradient(circle,rgba(168,110,52,.55),transparent 66%);
  animation:aur1 34s var(--ease-in-out) infinite alternate}
.hero .aur span:nth-child(2){width:44vw;height:38vw;left:-8%;top:24%;
  background:radial-gradient(circle,rgba(201,168,76,.30),transparent 68%);
  animation:aur2 46s var(--ease-in-out) infinite alternate}
@keyframes aur1{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-7vw,5vh,0) scale(1.16)}}
@keyframes aur2{from{transform:translate3d(0,0,0) scale(1.06)}
  to{transform:translate3d(6vw,-4vh,0) scale(.92)}}
@media(prefers-reduced-motion:reduce){.hero .aur span{animation:none}}

/* ---------- cursor spotlight ---------- */
/* --mx/--my are set on the hovered element itself. Setting them on a shared
   parent would restyle every child on every pointer move. */
.card,.ways > div{position:relative;isolation:isolate}
.card::after,.ways > div::after{content:"";position:absolute;inset:0;z-index:-1;
  opacity:0;transition:opacity .35s var(--ease-out);pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(201,168,76,.13),transparent 70%)}
.card:hover::after,.ways > div:hover::after{opacity:1}

/* ---------- headline shimmer, once ---------- */
h1 em{background-size:220% 100%;background-position:100% 0;
  animation:sheen 1.5s var(--ease-out) .55s both}
@keyframes sheen{from{background-position:100% 0}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){h1 em{animation:none;background-position:0 0}}

/* ---------- lighting ---------- */
/* Raised surfaces. Lit edge on top, shadow edge underneath, gradient between --
   the same overhead source everywhere so the page reads as one lit scene. */
.card,form,.fork > div,.ways > div,.specs > div,.shot,.plate img,.vial{
  box-shadow:inset 0 1px 0 var(--lit),inset 0 -1px 0 var(--unlit)}
.card,.ways > div{background:var(--surface)}
.card:hover,.ways > div:hover{background:var(--surface-2);
  box-shadow:inset 0 1px 0 rgba(233,201,106,.24),inset 0 -1px 0 var(--unlit),
             0 18px 46px -20px rgba(0,0,0,.9)}

/* Gradient type. Solid colour first so a browser without background-clip gets
   gold rather than a transparent headline. */
h1 em,.dimgrid b,.fork b,.big-num{
  color:var(--gold-br);
  background:linear-gradient(150deg,#f6e4ab 0%,var(--gold-br) 38%,var(--wood-lt) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  h1 em,.dimgrid b,.fork b,.big-num{-webkit-text-fill-color:currentColor;background:none}
}
.pull blockquote{
  background:linear-gradient(178deg,#f2ece0 0%,#e8e4da 42%,#b9ad92 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Bloom, sized to importance. */
/* A moving highlight on a lit surface is what the rest of the system implies. */
.btn-p::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .65s var(--ease-out)}
.btn-p:hover::after{left:120%}
@media(prefers-reduced-motion:reduce){.btn-p::after{display:none}}

.big-num{filter:drop-shadow(0 0 22px rgba(201,168,76,.22))}
.tick{text-shadow:0 0 12px rgba(201,168,76,.5)}

/* Ambient washes so the ground has depth over a long page. */
.dims{background:radial-gradient(80% 100% at 50% 0%,rgba(201,168,76,.06),transparent 70%)}
#services{background:radial-gradient(70% 60% at 88% 8%,rgba(138,90,43,.13),transparent 62%)}
#how{background:radial-gradient(60% 70% at 6% 20%,rgba(201,168,76,.07),transparent 64%)}
#contact{background:
  radial-gradient(70% 80% at 82% 100%,rgba(138,90,43,.16),transparent 64%),
  radial-gradient(50% 60% at 4% 0%,rgba(201,168,76,.06),transparent 60%)}

/* Gallery: a scrim so the images sit in the page rather than on it. */
.shot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(184deg,rgba(201,168,76,.06) 0%,transparent 26%,
    rgba(5,5,5,.10) 62%,rgba(5,5,5,.52) 100%);
  transition:opacity .5s var(--ease-out)}
.shot:hover::before{opacity:.55}

/* Form focus picks up the same light. */

/* Header, once it solidifies, gets the lit edge too. */
header.solid{box-shadow:0 1px 0 rgba(233,201,106,.10),0 14px 40px -24px rgba(0,0,0,.9)}

/* ---------- micro-interactions ---------- */
/* Transform and opacity only, on the skill's curves. Nothing here moves
   content the reader is trying to read. */
.plate img{transition:transform 1s var(--ease-out)}
.plate:hover img{transform:scale(1.028)}
.more{position:relative;display:inline-block;transition:color .2s}
.more::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;
  background:var(--gold);transition:right .35s var(--ease-out)}
.more:hover::after{right:0}
.ways > div,.fork > div,.towns > div{position:relative}
.dimgrid div b{transition:color .3s var(--ease-out)}
.dimgrid div:hover b{color:var(--gold)}

/* ---------- the level rail ---------- */
/* The datum, made persistent. It fills as you scroll and the bubble rides the
   leading edge, so the page's signature is also its progress indicator rather
   than an ornament that scrolls away after the first screen. --p is set by a
   rAF-throttled scroll listener in the page script. */
.rail{position:fixed;left:0;right:0;top:var(--hh,66px);height:2px;z-index:49;
  background:linear-gradient(90deg,var(--line-2),rgba(42,38,32,0));
  pointer-events:none}
.rail i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,var(--wood),var(--gold) 60%,var(--gold-br));
  box-shadow:0 0 14px rgba(201,168,76,.35)}
.rail b{position:absolute;top:50%;left:calc(var(--p,0) * 100%);
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#f8ecc4,#C9A84C 70%,#8a6f2e);
  box-shadow:0 0 16px rgba(233,201,106,.75),inset 0 1px 1px rgba(255,248,225,.9)}
@media(prefers-reduced-motion:reduce){.rail i,.rail b{transition:none}}

/* ---------- ground texture ---------- */
/* Flat near-black over a long page reads as an empty div. Grain plus a faint
   section grid -- the paper a drawing is printed on. Both inline, no requests. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(201,168,76,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,168,76,.028) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 68%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 68%)}
body > *{position:relative;z-index:1}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),
             filter .8s var(--ease-out)}
.rv.in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- focus ---------- */
/* clip-path clips the focus ring with everything else outside the polygon, so
   the cut corner is dropped for as long as the element is focused. A
   box-shadow ring would have been clipped in exactly the same way. */
:focus-visible{outline:2px solid var(--gold-br);outline-offset:3px;border-radius:1px}
.btn:focus-visible,button:focus-visible,.sticky-call:focus-visible{clip-path:none}
.nav-links a:focus-visible,.call:focus-visible,.brand:focus-visible,
.more:focus-visible,footer a:focus-visible{outline:2px solid var(--gold-br);
  outline-offset:4px}
/* Pointer users keep the clean look; only keyboard focus draws a ring. */
:focus:not(:focus-visible){outline:none}

/* ---------- skip link ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--gold);color:#140f04;padding:11px 18px;font-weight:600;
  font-size:14px;text-decoration:none;transition:top .18s var(--ease-out)}
.skip:focus{top:12px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(5,5,5,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background .3s,border-color .3s}
header.solid{background:rgba(5,5,5,.97);border-bottom-color:var(--line-2)}
.nav{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand svg{flex:none}
/* The header wordmark IS the logo -- logo D is type only, so there is no image
   to embed and no retina variant to maintain. Same lockup, laid out
   horizontally: TM, a gold rule, then the wordmark stacked beside it. */
.brand .bm{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.04em;
  line-height:1;color:var(--ink)}
.brand .bw{display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding-left:11px;margin-left:11px;border-left:1px solid var(--gold)}
.brand .be{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.30em;
  color:var(--gold-br);line-height:1}
.brand .bc{font-family:var(--sans);font-size:7.5px;font-weight:700;letter-spacing:.26em;
  color:var(--ink-3);line-height:1}
@media(max-width:420px){.brand .bc{display:none}}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:14.5px}
.nav-links a{text-decoration:none;color:var(--ink-2);transition:color .2s;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .3s cubic-bezier(.2,.7,.3,1)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.on::after{right:0}
.nav-links a.on{color:var(--gold-br)}
.call{margin-left:8px;font-family:var(--mono);font-size:13.5px;font-weight:600;
  color:var(--gold-br);text-decoration:none;border:1px solid var(--gold-dim);
  padding:9px 16px;white-space:nowrap;transition:background .2s,box-shadow .2s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.call:hover{background:rgba(201,168,76,.12);box-shadow:inset 0 0 24px rgba(201,168,76,.14)}
/* ---------- mobile menu ---------- */
.navtoggle{display:none;background:none;border:1px solid var(--line-2);
  width:44px;height:44px;padding:0;cursor:pointer;flex:none;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.navtoggle span{display:block;width:19px;height:1.5px;background:var(--gold-br);
  transition:transform .28s var(--ease-out),opacity .2s}
.navopen .navtoggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navopen .navtoggle span:nth-child(2){opacity:0}
.navopen .navtoggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:860px){
  .nav{gap:12px}
  .navtoggle{display:flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;
    gap:0;margin:0;background:var(--bg-2);
    border-top:1px solid var(--line);border-bottom:1px solid var(--gold-dim);
    /* Collapsed by height rather than display:none so it can animate and so
       the links stay out of the tab order while hidden. */
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .3s var(--ease-out),visibility .3s}
  .navopen .nav-links{max-height:70vh;visibility:visible;overflow:auto}
  .nav-links a{padding:15px 22px;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links a::after{display:none}
  .nav-links a.on{background:rgba(201,168,76,.07)}
  header{position:sticky}
  .nav{position:relative}
}
@media(prefers-reduced-motion:reduce){
  .nav-links,.navtoggle span{transition:none}
}

/* ---------- hero ---------- */
/* The photo is a plate on a drawing now, not wallpaper behind text, so the
   hero needs no scrim and no drift. */
.hero{position:relative;padding:88px 0 0;isolation:isolate;
  min-height:88vh;display:flex;flex-direction:column;justify-content:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(138,90,43,.20),transparent 62%),
    radial-gradient(90% 70% at 8% 0%,rgba(201,168,76,.09),transparent 60%),
    var(--bg)}

/* The image column runs off the right edge of the viewport. Breaking one side
   out of the measure is what makes this read as a spread rather than a card;
   the copy column keeps the normal margin so the text still aligns with every
   section below it. */
/* Contained and centred, like every other section. The earlier version broke
   the image column out to the viewport edge using 100vw maths, which made the
   hero right-heavy and left it out of line with everything below it. The photo
   stays large by taking more of the grid instead of more of the screen. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(28px,3.4vw,56px);align-items:center}
@media(max-width:1040px){.hero-grid{grid-template-columns:1fr;gap:38px}}

.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-dim)}
h1{font-size:clamp(40px,6.6vw,78px);line-height:.99;letter-spacing:-.038em;max-width:14ch;
  font-variation-settings:'opsz' 144}
h1 em{font-style:normal;color:var(--gold-br)}
.hero p{font-size:17.5px;color:#c8c3b8;max-width:48ch;margin-top:22px;line-height:1.62}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}

.btn{display:inline-block;text-decoration:none;font-size:14.5px;font-weight:600;
  padding:14px 26px;
  transition:transform .16s var(--ease-out),box-shadow .25s var(--ease-out),
             background .2s,border-color .2s,color .2s;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.btn-p{background:linear-gradient(168deg,#e2bf62,var(--gold) 52%,#a9873a);color:#140f04;
  box-shadow:inset 0 1px 0 rgba(255,246,220,.45);position:relative;overflow:hidden}
.btn-p:hover{background:linear-gradient(168deg,#f0d183,var(--gold-br) 52%,#b8933f);
  box-shadow:0 10px 40px -8px var(--bloom),inset 0 1px 0 rgba(255,246,220,.6)}
.btn-s{border:1px solid var(--line-2);color:var(--ink)}
.btn-s:hover{border-color:var(--gold-dim);color:var(--gold-br)}
/* Buttons must feel pressed, not just hovered. */
.btn:active{transform:scale(.975)}

.trust{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2);margin-top:30px}
.trust div{display:flex;gap:8px;align-items:center}
.trust b{color:var(--ink);font-weight:600}
.tick{color:var(--gold);font-weight:700}

/* ---------- the photo as a drawing plate ---------- */
.plate{position:relative;margin:0}
.plate img{display:block;width:100%;height:clamp(460px,64vh,820px);object-fit:cover;
  object-position:center 56%;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
.plate::before{content:"";position:absolute;inset:-11px -11px 24px -11px;z-index:-1;
  border:1px solid var(--line-2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.plate figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3)}
.plate .pr{color:var(--gold)}

/* ---------- the datum ---------- */
/* The signature. A cabinet run is hung to a level line snapped on the wall,
   because floors slope -- so the page hangs off one too. */
.datum{display:flex;align-items:center;margin-top:64px}
.d-line{flex:1;height:1px;background:var(--gold-dim);opacity:.55;
  animation:draw .9s var(--ease-out) both}
.dl-l{transform-origin:left;animation-delay:.15s}
.dl-r{transform-origin:right;animation-delay:.15s}

.vial{position:relative;flex:none;width:92px;height:21px;margin:0 3px;
  border:1px solid var(--gold-dim);border-radius:11px;
  background:rgba(201,168,76,.05);overflow:hidden}
.grad{position:absolute;top:-1px;bottom:-1px;width:1px;background:var(--gold-dim);opacity:.75}
.g1{left:36px} .g2{left:55px}
.bubble{position:absolute;top:3.5px;left:50%;width:13px;height:13px;margin-left:-6.5px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#f8ecc4,#C9A84C 72%,#8a6f2e);
  box-shadow:0 0 16px rgba(233,201,106,.6),inset 0 1px 1px rgba(255,248,225,.9);
  animation:settle 1.25s var(--ease-in-out) .5s both}

@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* A damped oscillation. A real bubble overshoots and comes back. */
@keyframes settle{
  0%  {transform:translateX(-26px)}
  48% {transform:translateX(6.5px)}
  70% {transform:translateX(-2.5px)}
  87% {transform:translateX(1px)}
  100%{transform:translateX(0)}
}

.datum-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;margin:16px 0 0;
  padding-bottom:64px;
  animation:fade .7s var(--ease-out) 1.1s both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- sub-page hero ---------- */
.hero.sub{padding:74px 0 0;min-height:0;display:block}
.hero.sub h1{max-width:19ch}
.hero.sub .datum{margin-top:48px}
.hero.sub::before{background:
  radial-gradient(100% 80% at 82% 0%,rgba(138,90,43,.15),transparent 60%),
  var(--bg)}

/* ---------- hero load sequence ---------- */
/* One orchestrated moment rather than scattered effects: copy rises, plate
   settles, line draws, bubble finds level. */
.hero-copy > *{animation:rise .75s var(--ease-out) both}
/* Uncovered rather than faded in -- the way a drawing is unrolled. */
.hero-copy h1{animation:unroll 1.15s var(--ease-out) .1s both}
@keyframes unroll{
  from{clip-path:inset(0 0 100% 0);transform:translateY(18px);opacity:0}
  to{clip-path:inset(0 0 -12% 0);transform:none;opacity:1}
}
.hero-copy > :nth-child(1){animation-delay:.04s}
.hero-copy > :nth-child(2){animation-delay:.11s}
.hero-copy > :nth-child(3){animation-delay:.18s}
.hero-copy > :nth-child(4){animation-delay:.25s}
.hero-copy > :nth-child(5){animation-delay:.32s}
.plate{animation:plate 1s var(--ease-out) .16s both;
  translate:0 var(--par,0px);will-change:translate}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes plate{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .hero-copy > *,.hero-copy h1,.plate,.d-line,.bubble,.datum-cap{animation:none}
}

/* ---------- dimension strip ---------- */
/* These were serif display numerals in a card grid -- the exact "big number,
   small label" the design skill names as the template answer. Set as mono
   callouts hanging off a dimension line they read as measurements instead,
   which is also what they actually are. */
.dims{padding:0 0 78px;border-bottom:1px solid var(--line)}
.dimgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line-2)}
.dimgrid div{position:relative;padding:30px 22px 0 0}
.dimgrid div + div{padding-left:26px;border-left:1px solid var(--line)}
.dimgrid i{position:absolute;top:-1px;left:0;width:1px;height:11px;background:var(--gold)}
.dimgrid div + div i{left:26px}
.dimgrid b{display:block;font-family:var(--mono);font-size:30px;font-weight:600;
  line-height:1;color:var(--gold-br);letter-spacing:-.02em}
.dimgrid span{display:block;font-size:13px;color:var(--ink-3);margin-top:10px;line-height:1.5}
@media(max-width:820px){
  .dimgrid{grid-template-columns:1fr 1fr}
  .dimgrid div:nth-child(3){padding-left:0;border-left:0}
  .dimgrid div:nth-child(3) i{left:0}
  .dimgrid div:nth-child(n+3){border-top:1px solid var(--line);margin-top:26px;padding-top:30px}
}
@media(max-width:480px){
  .dimgrid{grid-template-columns:1fr}
  .dimgrid div + div{padding-left:0;border-left:0;border-top:1px solid var(--line);
    margin-top:22px;padding-top:28px}
  .dimgrid div + div i{left:0}
}

/* ---------- orphans from the hero pass ---------- */
.plate .pl{color:var(--ink-3)}
.sm-datum{margin-bottom:0}

/* ---------- spec list ---------- */
/* Mono term, plain definition. Reads like a schedule on a drawing rather than
   another run of body copy. */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 52px}
.specs > div{display:grid;grid-template-columns:130px 1fr;gap:22px;align-items:start;
  padding:22px 0;border-top:1px solid var(--line)}
.specs b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:600;padding-top:3px}
.specs p{color:var(--ink-2);font-size:15.5px;line-height:1.62;margin:0}
@media(max-width:940px){.specs{grid-template-columns:1fr;gap:0}}
@media(max-width:560px){
  .specs > div{grid-template-columns:1fr;gap:9px}
  .specs b{padding-top:0}
}

/* ---------- three-way comparison ---------- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.ways > div{background:var(--bg);padding:34px 30px;display:flex;flex-direction:column;
  transition:background .3s var(--ease-out)}
.ways > div:hover{background:var(--panel)}
.band .ways > div{background:var(--surface)}
.band .ways > div:hover{background:var(--panel)}
.ways .wl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px}
.ways h3{margin-bottom:12px}
.ways p{color:var(--ink-2);font-size:15px;line-height:1.62;flex:1}
.ways .wf{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3)}
@media(max-width:860px){.ways{grid-template-columns:1fr}}

/* ---------- budget bars ---------- */
.bars{display:grid;gap:2px}
.bar{display:grid;grid-template-columns:230px 1fr 78px;gap:20px;align-items:center;
  padding:15px 0;border-top:1px solid var(--line)}
.bar .bl{font-size:15px;color:var(--ink)}
.bar .bt{display:block;height:7px;background:var(--panel-2);position:relative;overflow:hidden}
.bar .bt i{display:block;height:100%;background:linear-gradient(90deg,var(--wood),var(--gold));
  transform-origin:left}
.bar .bv{font-family:var(--mono);font-size:13px;color:var(--gold-br);text-align:right}
@media(max-width:700px){
  .bar{grid-template-columns:1fr 62px;gap:8px 14px}
  .bar .bt{grid-column:1/-1;order:3}
}

/* ---------- the cost fork ---------- */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.fork > div{background:var(--surface);padding:38px 34px}
.fork > div.hi{background:var(--surface-2);border-top:2px solid var(--wood)}
.fork .fk{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.fork > div.hi .fk{color:var(--wood-lt)}
.fork b{display:block;font-family:var(--mono);font-size:clamp(21px,3vw,28px);font-weight:600;
  color:var(--gold-br);letter-spacing:-.02em;line-height:1.1}
.fork p{color:var(--ink-2);font-size:15px;line-height:1.65;margin-top:16px}
@media(max-width:760px){.fork{grid-template-columns:1fr}}

/* ---------- ordered sequence ---------- */
/* Numbered here because a kitchen genuinely is a sequence -- tops cannot be
   templated before the boxes are set. The service cards are not, so they
   do not get numbers. */
.order{display:flex;flex-wrap:wrap;gap:0;margin:34px 0 0;
  border-top:1px solid var(--line-2)}
.order > div{flex:1 1 150px;padding:20px 18px 0 0;font-size:14px;color:var(--ink-2);
  position:relative}
.order > div + div{padding-left:20px;border-left:1px solid var(--line)}
.order span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--gold);margin-bottom:9px}
@media(max-width:640px){
  .order > div{flex:1 1 100%;padding:14px 0}
  .order > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}

/* ---------- text beside a photograph ---------- */
/* The services page already carries a full-bleed band lower down; a second
   would make the rhythm repetitive, so this one sits beside the copy. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(24px,3.5vw,52px);align-items:start}
.splitpic{margin:0;position:relative}
.splitpic img{display:block;width:100%;height:clamp(260px,34vw,420px);object-fit:cover;
  object-position:center 52%;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  box-shadow:inset 0 1px 0 var(--lit)}
.splitpic figcaption{margin-top:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
/* Mirrored, so two splits in a row read as a spread rather than a template. */
.split.flip{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
@media(max-width:820px){
  .split{grid-template-columns:1fr;gap:30px}
  /* Stacked, the copy should lead and the photograph follow. */
  .split.flip{grid-template-columns:1fr}
  .split.flip .splitpic{order:2}
}

/* ---------- full-bleed photo band ---------- */
/* Breaks a long run of text and marks a change of subject. Full-bleed on
   purpose -- an inset photo here would read as another card. */
.imgband{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.imgband figure{margin:0;position:relative}
.imgband img{display:block;width:100%;height:clamp(200px,30vw,380px);object-fit:cover;
  object-position:center 52%}
.imgband figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 26px 18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink);text-align:center;
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.86))}
.imgband::after{display:none}
@media(max-width:600px){.imgband figcaption{font-size:9.5px;letter-spacing:.12em;padding:36px 14px 14px}}

/* ---------- bathroom plans ---------- */
.plans{background:radial-gradient(70% 60% at 88% 10%,rgba(138,90,43,.11),transparent 62%)}
/* Same drawing register as the map and the datum: hairline walls, mono
   annotation, gold reserved for the thing carrying the information. */
.plangrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,54px);
  align-items:start}
.plangrid figure{margin:0}
.plangrid svg{display:block;width:100%;height:auto;max-width:300px;margin:0 auto}
.plangrid .wall{fill:none;stroke:var(--line-2);stroke-width:2.5}
.plangrid .fx{fill:rgba(201,168,76,.05);stroke:var(--ink-3);stroke-width:1.3}
.plangrid .ghost{fill:none;stroke:var(--ink-3);stroke-width:1.1;
  stroke-dasharray:4 4;opacity:.5}
.plangrid .fl{fill:var(--ink-3);font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-anchor:middle}
.plangrid .ghosttxt{opacity:.5}
/* The opened floor. Hatch is the drawing convention for a section cut. */
.plangrid .cut{stroke:var(--wood-lt);stroke-width:1.1;opacity:.9}
.plangrid .drain{fill:var(--gold-br);stroke:var(--bg);stroke-width:1.2}

.plangrid figcaption{margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line-2)}
.plangrid figcaption b{display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.plangrid figcaption.hi b{color:var(--wood-lt)}
.plangrid figcaption.hi{border-top-color:var(--wood)}
.plangrid figcaption span{font-size:14.5px;color:var(--ink-2);line-height:1.6}
@media(max-width:620px){.plangrid{grid-template-columns:1fr;gap:40px}}

/* ---------- county map ---------- */
.mapsec{padding:64px 0}
.map{margin:0}
.map svg{display:block;width:100%;max-width:540px;height:auto;margin:0 auto;
  overflow:visible}

.cty{fill:var(--panel);stroke:var(--line-2);stroke-width:1.4;
  stroke-linejoin:round;
  transition:fill .28s var(--ease-out),stroke .28s var(--ease-out)}
.cty:hover{fill:rgba(201,168,76,.15);stroke:var(--gold)}
/* Franklin is filled because it is the home county, not because it is hovered. */
.cty.home{fill:rgba(138,90,43,.34);stroke:var(--gold-dim);stroke-width:1.6}
.cty.home:hover{fill:rgba(201,168,76,.26);stroke:var(--gold)}

/* Labels live in their own group so they sit above every fill -- with real
   outlines the counties interlock, and a label drawn inside its own county
   ends up under whichever neighbour paints next. */
.clabels{pointer-events:none}
.clabels text{fill:var(--ink-3);font-family:var(--mono);font-size:13px;
  letter-spacing:.13em;text-anchor:middle;
  paint-order:stroke;stroke:var(--bg);stroke-width:3.5px;stroke-linejoin:round}
.clabels .home{fill:var(--gold-br)}

.pin{pointer-events:none}
.pin circle{fill:var(--gold-br)}
.pin .ring{fill:none;stroke:var(--gold);stroke-width:1.3;opacity:.5}
.cbl{fill:var(--gold);font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-anchor:start;pointer-events:none;
  paint-order:stroke;stroke:var(--bg);stroke-width:3.5px;stroke-linejoin:round}

.map figcaption{text-align:center;margin-top:26px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3)}

@media(max-width:560px){
  .mapsec{padding:44px 0}
  .clabels text{font-size:16px;letter-spacing:.08em}
  /* Five characters of mono in a 40px shape reads worse than nothing. */
  .clabels text:not(.home){display:none}
  .cbl{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.cty{transition:none}}

/* ---------- towns ---------- */
.towns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 44px}
.towns > div{padding:20px 0;border-top:1px solid var(--line)}
.towns b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.towns span{color:var(--ink-2);font-size:15px;line-height:1.7}

/* The only paragraph spacing on the site was scoped to .prose, so consecutive
   paragraphs anywhere else ran together into one block. */
.two p + p,.band p + p,.sec-head p + p{margin-top:15px}

/* ---------- sections ---------- */
section{padding:96px 0}
.band{background:linear-gradient(180deg,var(--bg-2),#0d0a08);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:58ch;margin-bottom:52px}
h2{font-size:clamp(29px,4.3vw,50px);letter-spacing:-.03em;
  font-variation-settings:'opsz' 96}
h3{font-size:21px;letter-spacing:-.016em}
.sec-head p{color:var(--ink-2);margin-top:16px;font-size:17px;line-height:1.6}

/* ---------- sheet numbers ---------- */
/* A drawing set numbers its sheets. The counter means no section has to know
   its own position -- reorder them and the numbering follows. */
main{counter-reset:sheet}
section{position:relative;overflow:hidden}
section:not(.hero):not(.dims):not(.pull)::after{
  counter-increment:sheet;
  content:"S-" counter(sheet,decimal-leading-zero);
  position:absolute;top:22px;right:28px;
  font-family:var(--mono);font-size:clamp(56px,9vw,124px);font-weight:600;
  letter-spacing:-.05em;line-height:1;
  color:var(--gold);opacity:.05;pointer-events:none;user-select:none;z-index:0}
@media(max-width:720px){
  section:not(.hero):not(.dims):not(.pull)::after{font-size:64px;top:14px;right:12px;opacity:.055}
}

/* ---------- warmth on alternating bands ---------- */
/* The wood token was declared and then never used, so the page ran grey on
   black the whole way down. */
.band{position:relative}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 12% 0%,rgba(138,90,43,.14),transparent 62%)}

/* ---------- service cards ---------- */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.card{background:var(--panel);padding:32px 28px;border-left:2px solid transparent;
  display:flex;flex-direction:column;
  transition:background .3s var(--ease-out),border-color .3s var(--ease-out)}
.card:hover{background:var(--panel-2);border-left-color:var(--wood-lt)}
.card .num{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--wood-lt);
  display:block;margin-bottom:14px}
.card h3{margin-bottom:11px}
.card p{color:var(--ink-2);font-size:15px}
.card ul{list-style:none;margin:18px 0 0;font-size:14.5px;color:var(--ink-2)}
.card li{padding:5px 0 5px 19px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:1px;background:var(--gold-dim)}
.card .more{display:inline-block;margin-top:auto;padding-top:20px;align-self:flex-start;font-size:14px;font-weight:600;
  color:var(--gold-br);text-decoration:none}
.card .more:hover{text-decoration:underline}

/* ---------- prose ---------- */
.prose{max-width:66ch}
.prose p{color:var(--ink-2);margin-top:15px}
.prose ul{margin:18px 0 0 2px;list-style:none;color:var(--ink-2)}
.prose li{padding:6px 0 6px 20px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:1px;
  background:var(--wood-lt)}
.prose ul.ticks li{padding-left:26px}
.prose ul.ticks li::before{content:"\2713";width:auto;height:auto;background:none;
  top:6px;color:var(--gold);font-size:12px;font-weight:700}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.step{position:relative;padding-top:34px;opacity:.98}
.step .k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-br);display:block;margin-bottom:9px}
.step h3{font-size:18px;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:14.5px}

/* ---------- work gallery ---------- */
/* Varied cells on a six-position cycle. All the sources are portrait, so the
   variety has to come from the cells rather than the images. */
.work{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  grid-auto-flow:dense;grid-auto-rows:auto}
.shot{position:relative;overflow:hidden;background:var(--panel);margin:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}

/* p1 tall lead, p2/p3 squares, p4 wide, p5 tall, p6 square. */
.shot.p1{grid-column:span 3;aspect-ratio:4/5}
.shot.p2{grid-column:span 3;aspect-ratio:4/5}
.shot.p3{grid-column:span 2;aspect-ratio:1}
.shot.p4{grid-column:span 2;aspect-ratio:1}
.shot.p5{grid-column:span 2;aspect-ratio:1}
.shot.p6{grid-column:span 6;aspect-ratio:21/8}

/* The gallery page has room to breathe, so the cycle gets bolder. */
.work.big{gap:16px}
.work.big .shot.p1{grid-column:span 4;aspect-ratio:4/5}
.work.big .shot.p2{grid-column:span 2;aspect-ratio:3/5}
.work.big .shot.p3{grid-column:span 2;aspect-ratio:3/5}
.work.big .shot.p4{grid-column:span 4;aspect-ratio:16/10}
.work.big .shot.p5{grid-column:span 3;aspect-ratio:1}
.work.big .shot.p6{grid-column:span 3;aspect-ratio:1}

@media(max-width:900px){
  .work{grid-template-columns:repeat(2,1fr);gap:10px}
  .shot.p1,.shot.p2,.shot.p3,.shot.p4,.shot.p5,
  .work.big .shot.p1,.work.big .shot.p2,.work.big .shot.p3,
  .work.big .shot.p5,.work.big .shot.p6{grid-column:span 1;aspect-ratio:3/4}
  .shot.p6,.work.big .shot.p4{grid-column:span 2;aspect-ratio:16/9}
}
@media(max-width:460px){
  .work{grid-template-columns:1fr}
  .shot,.work.big .shot{grid-column:span 1 !important;aspect-ratio:4/3 !important}
}

.more-wrap{margin-top:30px;text-align:center}
.more-wrap .more{font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-br);text-decoration:none}

.shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out)}
.shot::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(201,168,76,.16);
  pointer-events:none;transition:box-shadow .35s}
.shot:hover img{transform:scale(1.05)}
.shot:hover::after{box-shadow:inset 0 0 0 1px rgba(201,168,76,.5)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:600;padding:0 14px 12px 0;
  border-bottom:1px solid var(--line-2)}
td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
td:first-child{color:var(--ink);font-weight:500}
.note{font-size:13.5px;color:var(--ink-3);margin-top:14px}

/* ---------- faq ---------- */
.faq{max-width:74ch}
details{border-bottom:1px solid var(--line);padding:2px 0}
summary{cursor:pointer;padding:19px 0;font-weight:600;font-size:16px;list-style:none;
  display:flex;justify-content:space-between;gap:18px;transition:color .2s}
summary:hover{color:var(--gold-br)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-weight:400;font-size:20px;
  transition:transform .3s;flex:none;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details div{padding:0 0 20px;color:var(--ink-2);max-width:64ch}

/* ---------- contact ---------- */
/* .contact is the section wrapper only -- .cbox below does the columns. */
.contact .big{font-family:var(--mono);font-size:26px;color:var(--gold-br);text-decoration:none;
  display:inline-block;margin:20px 0 8px;transition:text-shadow .3s}
.contact .big:hover{text-shadow:0 0 26px rgba(233,201,106,.45)}
form{background:var(--surface);border:1px solid var(--line-2);
  border-top:2px solid var(--gold);padding:28px 26px}
label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin:16px 0 6px;font-weight:600}
input,select,textarea{width:100%;background:rgba(0,0,0,.5);border:1px solid var(--line-2);
  transition:border-color .2s,box-shadow .25s var(--ease-out);
  color:var(--ink);padding:12px;font-size:15.5px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.13),0 0 24px rgba(201,168,76,.16),
             inset 0 1px 0 var(--lit)}
textarea{min-height:104px;resize:vertical}
button[type=submit]{width:100%;margin-top:22px;background:var(--gold);color:#140f04;
  border:0;padding:15px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;
  transition:background .2s,box-shadow .25s;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
button[type=submit]:hover{background:var(--gold-br);box-shadow:0 8px 30px rgba(201,168,76,.3)}
.resp{color:var(--gold-br)!important;font-weight:600}
.resp::first-letter{color:var(--gold)}
.opt{font-family:var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-3);
  font-weight:400;font-size:11px;margin-left:6px}
.fine{font-size:12px;color:var(--ink-3);margin-top:12px;text-align:center;line-height:1.5}
.hp{position:absolute;left:-9999px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:44px 0 40px;font-size:14px;color:var(--ink-3)}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--gold-br)}


/* ---------- stat band ---------- */
/* Numbers set large enough to work as graphics rather than as text. This is
   the page's substitute for photography until there are more photos. */
/* ---------- pull quote ---------- */
/* Full-bleed break in the vertical rhythm. Without it the page is eight
   left-aligned prose blocks in a row. */
/* The best sentence on the site, given the viewport instead of a paragraph. */
.pull{background:
    radial-gradient(110% 80% at 50% 40%,rgba(138,90,43,.24),transparent 64%),
    linear-gradient(180deg,#0d0a08,var(--bg-2) 45%,#0a0806);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:0;min-height:min(86vh,760px);display:flex;align-items:center}
.pull blockquote{font-family:var(--serif);font-size:clamp(38px,7.6vw,92px);
  line-height:1.02;letter-spacing:-.042em;text-align:center;color:var(--ink);
  max-width:16ch;margin:0 auto;position:relative;
  font-variation-settings:'opsz' 144}
/* The datum again, without the vial. The line is the page structure; the
   bubble is the signature and only earns its keep once. */
.pull blockquote::before{content:"";display:block;width:min(560px,80%);height:1px;
  margin:0 auto 52px;background:linear-gradient(90deg,transparent,var(--gold-dim) 22%,
  var(--gold) 50%,var(--gold-dim) 78%,transparent)}
.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:17px;
  color:var(--ink-2);letter-spacing:0;margin-top:38px;line-height:1.6;max-width:38ch;
  margin-left:auto;margin-right:auto}

/* ---------- service card icons ---------- */
.ico{width:44px;height:34px;color:var(--wood-lt);margin-bottom:20px;
  transition:color .35s,transform .35s}
.card:hover .ico{color:var(--gold-br);transform:translateY(-2px)}

/* ---------- process as a timeline ---------- */
/* Four numbered paragraphs read as a list; a connected line reads as a
   sequence, which is what "how a project runs" is actually describing. */
.steps{position:relative}
.steps::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--wood),transparent)}
.step::before{content:"";position:absolute;top:-6px;left:0;width:12px;height:12px;
  background:var(--bg);border:2px solid var(--gold);border-radius:50%}
@media(max-width:760px){.steps::before{display:none}
  .step{border-top:2px solid var(--wood);padding-top:26px}
  .step::before{display:none}}

/* ---------- classes the markup actually uses ---------- */
.cbox{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
@media(max-width:860px){.cbox{grid-template-columns:1fr;gap:34px}}
.big-num{font-family:var(--mono);font-size:clamp(24px,4vw,32px);color:var(--gold-br);
  text-decoration:none;display:inline-block;margin:22px 0 10px;letter-spacing:-.01em;
  transition:text-shadow .3s}
.big-num:hover{text-shadow:0 0 28px rgba(233,201,106,.5)}
.sm{font-size:14px;color:var(--ink-2)}
.sm b{color:var(--ink)}
.mt{margin-top:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:52px}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:34px}}
.tw{max-width:66ch}
.n{font-size:13.5px;color:var(--ink-3);margin-top:14px}

/* Footer: four columns across, not a single stack. */
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:34px}
.foot-grid div:not(:first-child) b{color:var(--gold-br);font-weight:600;display:block;
  margin-bottom:11px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase}
.foot-grid div:first-child b{display:block;margin-bottom:9px;color:var(--ink);
  font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:-.01em}
.foot-grid div{line-height:1.85;font-size:13.5px}
.foot-b{border-top:1px solid var(--line);padding-top:22px;font-size:13px;color:var(--ink-3)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

.sticky-call{display:none}
@media(max-width:860px){
  .sticky-call{display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
    background:var(--gold);color:#140f04;text-align:center;padding:15px;font-weight:700;
    text-decoration:none;box-shadow:0 10px 34px rgba(0,0,0,.6);
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
}

/* ---------- colour below the hero ---------- */
/* A hairline of gold under every section head, so the eye gets warmth all the
   way down rather than only in the first screen. */
.sec-head h2::after{content:"";display:block;width:52px;height:2px;margin-top:16px;
  background:linear-gradient(90deg,var(--gold),var(--wood))}

/* ---------- sticky mobile call ---------- */