/* ============================================================
   Texas Digital Co. — warm ink on bone
   Display: Instrument Serif · Text: Inter · Meta: JetBrains Mono
   ============================================================ */

:root{
  /* surfaces — warm drafting paper, per the reference's cream ground */
  --bone:#EDE4D0;
  --bone-2:#E4D9C0;
  --card:#FBF7EE;

  /* ink — charcoal, not black: the reference sets its type at #373737 */
  --ink:#2B2B27;
  --ink-2:#35342F;
  --body:#575145;
  --mute:#655D50;

  /* accent — jade at 5.13:1 on paper, the same weight the reference's blue
     carries on its own ground. Different hue, identical presence. */
  --pine:#116B4F;
  --pine-deep:#0B4A36;
  --pine-light:#7ED9B4;   /* the only one legible on --ink */
  --pine-wash:#DCE7DF;
  --clay:#A83409;

  /* on dark — lifted, because the ink is charcoal now rather than near-black */
  --on-dark:#D3CCBE;
  --on-dark-mute:#A09889;

  /* one accent per builder step */
  --s1:#116B4F; --s2:#15606B; --s3:#7A5B12; --s4:#A83409; --s5:#0B4A36;

  --line:rgba(43,43,39,.26);
  --line-soft:rgba(43,43,39,.14);
  --line-dark:rgba(237,228,208,.17);
  --line-dark-soft:rgba(237,228,208,.09);

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* --serif keeps its name so nothing downstream has to change, but the
     display face is now a geometric sans and the hand is a real one. */
  --serif:"Space Grotesk","Inter",Helvetica,Arial,sans-serif;
  --hand:"Architects Daughter","Bradley Hand","Segoe Print",cursive;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1280px;
  --gut:clamp(22px,5vw,52px);
  --sec:clamp(52px,9vw,150px);
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:2px;   /* drawn, not rounded: a pill reads soft, a square reads built */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:400;
  line-height:1.65;
  letter-spacing:-.006em;
  color:var(--body);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Graph paper: two rulings, a fine 8px cell and a heavier 96px major line,
   drawn once as gradients so it costs nothing and scrolls with the page. */
.paper{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--bone);
  background-image:
    linear-gradient(to right,rgba(122,96,58,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(122,96,58,.07) 1px,transparent 1px),
    linear-gradient(to right,rgba(122,96,58,.15) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(122,96,58,.15) 1px,transparent 1px);
  background-size:9px 9px,9px 9px,90px 90px,90px 90px;
}
body{background:transparent}
.section--wash,.section--dark{position:relative}

/* film grain — the thing that stops flat colour reading as a template */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}

::selection{background:var(--pine);color:#F4FBF7}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:2px}

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:clamp(56px,7vw,96px)}
/* Composites to exactly #E4D9C0 over the paper, so the audited contrast is
   unchanged while half the ruling still reads through. */
.section--wash{background:rgba(219,206,176,.5)}

.section--dark{background:var(--ink);color:var(--on-dark);position:relative;isolation:isolate}
.section--dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90% 120% at 100% 0%,rgba(46,140,110,.22) 0%,transparent 58%),
    radial-gradient(70% 90% at 0% 100%,rgba(46,140,110,.10) 0%,transparent 60%);
}
.rule{height:1.5px;background:var(--line);border:0;margin:0}
.section--dark .rule{background:var(--line-dark)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--pine);color:#F4FBF7;padding:14px 20px;font-weight:500;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pine-deep);margin-bottom:24px;line-height:1;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none}
.section--dark .eyebrow,.page-head .eyebrow{color:var(--pine-light)}
.eyebrow--muted{color:var(--mute)}

h1,.h-xl,h2,.h-lg,h3,.h-md{
  font-family:var(--serif);font-weight:500;color:var(--ink);
  font-feature-settings:"kern" 1;
}

h1,.h-xl{
  font-size:clamp(2.9rem,7.6vw,6.75rem);line-height:.95;letter-spacing:-.028em;
  text-wrap:balance;
}
h2,.h-lg{
  font-size:clamp(2.1rem,5vw,4.25rem);line-height:1;letter-spacing:-.025em;
  text-wrap:balance;
}
h3,.h-md{
  font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.018em;
}
h1 em,h2 em,h3 em{font-style:italic;color:var(--pine)}

.section--dark h1,.section--dark h2,.section--dark h3,
.section--dark .h-xl,.section--dark .h-lg,.section--dark .h-md,
.page-head h1,.page-head h2,.page-head h3{color:var(--bone)}
.section--dark h1 em,.section--dark h2 em,.page-head h1 em{color:var(--pine-light)}

.lede{
  font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.6;color:var(--body);
  max-width:56ch;letter-spacing:-.01em;
}
.section--dark .lede,.page-head .lede{color:var(--on-dark)}
p+p{margin-top:1.1em}
.prose p{color:var(--body);max-width:66ch}

/* ---------- buttons ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;font-size:.9375rem;font-weight:500;letter-spacing:-.005em;
  border:1px solid transparent;border-radius:var(--radius);cursor:pointer;text-align:center;
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:translateY(101%);transition:transform .42s var(--ease);
}
.btn:hover::before{transform:translateY(0)}

.btn--primary{background:var(--pine);color:#F4FBF7}
.btn--primary::before{background:var(--ink)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--bone);border-color:var(--ink)}

.btn--light{background:var(--bone);color:var(--ink)}
.btn--light::before{background:var(--pine)}
.btn--light:hover{color:#F4FBF7}

.btn--outline-light{background:transparent;color:var(--bone);border-color:var(--line-dark)}
.btn--outline-light::before{background:var(--bone)}
.btn--outline-light:hover{color:var(--ink);border-color:var(--bone)}

.btn--sm{padding:11px clamp(13px,3.4vw,20px);font-size:.875rem}
.btn{white-space:nowrap}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:.9375rem;
  color:var(--pine-deep);border-bottom:1px solid transparent;padding-bottom:3px;
  transition:border-color .25s var(--ease),gap .25s var(--ease);
}
.link-arrow:hover{border-color:currentColor;gap:15px}
.section--dark .link-arrow,.page-head .link-arrow{color:var(--pine-light)}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:100;background:rgba(244,240,232,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s;
}
.header.is-stuck{border-bottom-color:var(--line)}
.header.is-dark{background:rgba(23,20,15,.72)}
.header.is-dark.is-stuck{border-bottom-color:var(--line-dark)}
.header.is-dark .brand{color:var(--bone)}
.header.is-dark .nav a{color:var(--on-dark)}
.header.is-dark .nav a:hover{color:var(--bone)}
.header.is-dark .lang-link{color:var(--on-dark);border-color:var(--line-dark)}
.header.is-dark .lang-link:hover{color:var(--bone);border-color:var(--bone)}
.header.is-dark .menu-toggle{border-color:var(--line-dark)}
.header.is-dark .menu-toggle span,
.header.is-dark .menu-toggle::before,
.header.is-dark .menu-toggle::after{background:var(--bone)}
/* gaps and the CTA give ground as the bar tightens, so nothing has to be hidden */
.header-inner{display:flex;align-items:center;gap:clamp(10px,4vw,56px);height:78px}

.brand{display:flex;align-items:center;gap:10px;font-weight:500;font-size:1.0625rem;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.brand svg{color:var(--pine);transition:transform .5s var(--ease)}
.brand{gap:11px}
.brand .brand-tile{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  background:var(--pine);border-radius:2px;color:var(--card);
}
.brand .brand-tile svg{color:inherit}
.header.is-dark .brand .brand-tile{background:var(--pine-light);color:var(--ink)}

/* CTA carries a tile too, the way the reference nests a square in its button */
.btn--primary.btn--tile{padding-left:7px;gap:11px;border-radius:3px}
.btn--tile .btn-tile{
  display:grid;place-items:center;width:28px;height:28px;flex:none;
  background:var(--clay);border-radius:2px;color:#FFF3EC;
}
.brand:hover svg{transform:rotate(72deg)}

.nav{display:flex;gap:clamp(18px,2.4vw,34px);margin-right:auto}
.nav a{
  position:relative;font-size:.9375rem;font-weight:450;color:var(--body);padding:6px 0;
  transition:color .22s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--pine);
  transition:right .32s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}

.header-actions{display:flex;align-items:center;gap:clamp(7px,1.6vw,12px);min-width:0}
.lang-link{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--body);
  padding:10px 15px;border:1px solid var(--line);border-radius:var(--radius);transition:.25s var(--ease);
}
.lang-link:hover{color:var(--ink);border-color:var(--ink)}

.menu-toggle{display:none;width:44px;height:44px;background:none;border:1px solid var(--line);border-radius:var(--radius);padding:0;cursor:pointer;position:relative}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{
  content:"";position:absolute;left:13px;width:16px;height:1.5px;background:var(--ink);transition:.28s var(--ease);
}
.menu-toggle::before{top:16px}
.menu-toggle span{top:21px}
.menu-toggle::after{top:26px}
.menu-toggle[aria-expanded="true"]::before{top:21px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span{opacity:0}
.menu-toggle[aria-expanded="true"]::after{top:21px;transform:rotate(-45deg)}

.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--bone)}
.mobile-nav.is-open{display:block}
.mobile-nav-item{
  display:block;padding:19px 0;font-family:var(--serif);font-size:1.75rem;letter-spacing:-.02em;
  color:var(--ink);border-bottom:1px solid var(--line-soft);
}
.mobile-nav-footer{display:grid;gap:10px;padding:24px 0 32px}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-top:clamp(34px,9vw,110px);padding-bottom:clamp(34px,6vw,80px);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(64% 58% at 88% 4%,rgba(30,87,69,.12) 0%,transparent 62%);
}
.hero .container{position:relative;z-index:1}

/* Two lines, edge to edge. The old 7.4em measure was tuned for a serif and
   turns into a six-line column once the display face is a geometric sans. */
.hero-title{
  margin:0 auto;max-width:22ch;text-wrap:balance;text-align:center;
  font-size:clamp(2.4rem,6vw,5.4rem);line-height:.98;letter-spacing:-.035em;
}
.hero-head{
  display:grid;justify-items:center;gap:6px;
  grid-template-columns:1fr;
}
@media (min-width:70rem){
  .hero-head{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:0 22px;
  }
  .note-hand--lead{justify-self:end;transform:translateY(-1.1em) rotate(-3deg)}
  .note-hand--trail{justify-self:start;transform:translateY(1.1em) rotate(2deg)}
}
/* Wide, but not so wide that the mockup's own UI text outgrows the scale it
   was drawn at — the reference gets away with full bleed because its hero is
   an illustration with no small type in it. */
.hero-plate{
  position:relative;
  margin:clamp(22px,4vw,54px) 0 0;
  padding-inline:clamp(12px,1.6vw,26px);
}
.hero-plate .vz{border:1.5px solid rgba(43,43,39,.42);border-radius:0;display:block}
@media (max-width:60rem){
  .hero-plate .vz{aspect-ratio:3/4;height:auto}
}
@media (max-width:60rem) and (orientation:landscape){
  .hero-plate .vz{aspect-ratio:16/10}
}
.hero-cap{
  position:absolute;left:clamp(14px,1.6vw,26px);right:clamp(14px,1.6vw,26px);bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px clamp(14px,1.6vw,22px);
  background:var(--card);border:1.5px solid rgba(43,43,39,.42);border-top:0;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pine);
}
.hero-cap b{font-weight:500;color:var(--mute)}
@media (max-width:48rem){ .hero-cap b{display:none} }

/* email, hand-lettered in the far corner like the reference */
.corner-mail{
  position:fixed;right:20px;top:16px;z-index:120;
  font-family:var(--hand);font-size:.9375rem;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink);
}
.corner-mail:hover{color:var(--pine)}
@media (max-width:64rem){.corner-mail{display:none}}
.hero-under{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px 48px;margin-top:clamp(22px,3.4vw,44px);
}
.hero-under .lede{flex:1 1 30rem;margin:0}
.hero-under .btn-row{margin:0;flex:0 0 auto}
.hero-title em{font-style:normal;color:inherit}

/* Annotations pencilled over the headline, the way the reference marks up
   its own hero. Absolutely placed on wide screens, inline on narrow ones. */
.note-hand{
  font-family:var(--hand);font-weight:400;color:var(--ink);
  font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.1;letter-spacing:.075em;
  text-transform:uppercase;white-space:nowrap;
  display:inline-block;
  border-bottom:1.5px solid currentColor;padding-bottom:2px;
}
.note-hand--right{border-bottom:0;border-top:1.5px solid currentColor;padding:2px 0 0}

/* Copy left, artwork right. Below 62rem the artwork drops under the copy
   rather than shrinking past the point where its text is readable. */
.hero-grid{display:grid;gap:clamp(38px,5vw,72px);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:62rem){
  .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
}

.hero-facts{border-top:1px solid var(--line)}
.hero-facts--row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  column-gap:clamp(24px,3vw,52px);
  margin-top:clamp(46px,5vw,78px);
}
.hero-fact{
  display:flex;gap:14px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--body);line-height:1.5;
}
.hero-fact svg{flex:none;color:var(--pine);margin-top:4px}

/* ---------- marquee ---------- */
.marquee{
  background:var(--pine);color:#F4FBF7;overflow:hidden;
  border-block:1px solid rgba(23,20,15,.14);
  -webkit-user-select:none;user-select:none;
}
.marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:clamp(26px,4vw,58px);padding:16px clamp(13px,2vw,29px)}
.marquee-group span{
  font-family:var(--serif);font-size:clamp(1.35rem,2.7vw,2.15rem);
  letter-spacing:-.02em;white-space:nowrap;line-height:1.15;
}
.marquee-group i{font-style:normal;opacity:.62;font-size:.62em;transform:translateY(-.12em)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
}

/* ---------- section head ---------- */
.sec-head{margin-bottom:clamp(28px,5vw,72px)}
.sec-head h2{max-width:9em}
.sec-head p{margin-top:22px;color:var(--body);font-size:1.0625rem;max-width:56ch}
.section--dark .sec-head p{color:var(--on-dark)}
.sec-head--sm{margin-bottom:clamp(28px,3vw,38px)}
.sec-head--sm h2{font-size:clamp(1.75rem,2.8vw,2.35rem);line-height:1.05;letter-spacing:-.022em;max-width:none}
.sec-head--split{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:clamp(28px,5vw,80px);
}
.sec-head--split>:first-child{flex:999 1 24rem}
.sec-head--split p{margin-top:0;flex:1 1 20rem;max-width:52ch}

/* ---------- service index ---------- */
.index{
  border-top:1px solid var(--line);container-type:inline-size;
  --cols:54px minmax(0,1fr) minmax(0,1.15fr) 208px 34px;
  --row-pad:clamp(24px,2.9vw,38px);
  --name:clamp(1.6rem,3vw,2.6rem);
}
.index-row{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:var(--cols);
  gap:clamp(14px,2.4vw,36px);align-items:center;
  padding:var(--row-pad) 0;border-bottom:1px solid var(--line);
  transition:color .34s var(--ease);
}
.index-row::before{
  content:"";position:absolute;z-index:-1;
  inset-block:0;inset-inline:calc(var(--gut) * -.55);
  background:var(--pine);transform:scaleY(0);transform-origin:bottom center;
  transition:transform .42s var(--ease);
}
.index-row:hover::before{transform:scaleY(1)}

.index-num{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.1em;color:var(--mute);transition:color .34s var(--ease)}
.index-name{
  font-family:var(--serif);font-size:var(--name);letter-spacing:-.025em;
  line-height:1.05;color:var(--ink);transition:color .34s var(--ease),transform .42s var(--ease);
}
.index-desc{color:var(--body);font-size:.9375rem;line-height:1.55;transition:color .34s var(--ease)}
.index-price{font-family:var(--mono);font-size:.875rem;font-weight:500;color:var(--clay);white-space:nowrap;transition:color .34s var(--ease)}
.index-price small{display:block;font-family:var(--sans);font-size:.75rem;font-weight:400;color:var(--mute);margin-top:5px;transition:color .34s var(--ease)}
.index-arrow{color:var(--mute);justify-self:end;opacity:.5;transition:transform .42s var(--ease),color .34s var(--ease),opacity .34s var(--ease)}

.index-row:hover .index-name{color:#F4FBF7;transform:translateX(10px)}
.index-row:hover .index-num,
.index-row:hover .index-desc,
.index-row:hover .index-price,
.index-row:hover .index-price small{color:rgba(244,251,247,.86)}
.index-row:hover .index-price{color:#F4FBF7}
.index-row:hover .index-arrow{color:#F4FBF7;opacity:1;transform:translateX(8px)}

/* the compact variant only retunes the tokens the row already reads */
.index--sm{
  --cols:48px minmax(0,1fr) minmax(0,1.15fr) 190px 34px;
  --row-pad:clamp(20px,2.2vw,28px);
  --name:clamp(1.3rem,2vw,1.75rem);
}

/* the row stacks when ITS OWN box gets narrow, whatever the viewport is doing.
   Declaring the tokens on .index-row itself beats the inherited variant values. */
@container (max-width:780px){
  .index-row{
    --cols:44px minmax(0,1fr) minmax(0,auto);
    --row-pad:26px;
    row-gap:10px;align-items:start;
  }
  .index-name{grid-column:2;grid-row:1}
  /* the price stops being a rigid block once the row is tight: it wraps
     instead of pushing the row wider than the page (Spanish runs longer) */
  .index-price{grid-column:3;grid-row:1;text-align:right;padding-top:.4em;white-space:normal}
  .index-num{padding-top:.5em}
  .index-desc{grid-column:2/4;grid-row:2;font-size:.875rem}
  .index-arrow{display:none}
  .index-row:hover .index-name{transform:none}
}

/* ---------- terms ---------- */
/* four items: the 24rem floor makes three columns impossible inside --wrap,
   so auto-fit resolves to a full 2x2 or a full stack -- never a 3+1 orphan. */
.terms{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));
  column-gap:clamp(30px,4vw,72px);row-gap:0;border-bottom:1px solid var(--line);
}
.section--dark .terms{border-color:var(--line-dark)}
.term{padding:clamp(28px,3.2vw,44px) 0;border-top:1px solid var(--line)}
.section--dark .term{border-color:var(--line-dark)}
.term-num{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;color:var(--pine-light);display:block;margin-bottom:20px}
.term h3{margin-bottom:14px}
.term p{color:var(--body);font-size:.9375rem}
.section--dark .term p{color:var(--on-dark)}

/* ---------- steps ---------- */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));
  column-gap:clamp(24px,3vw,52px);row-gap:clamp(30px,3.4vw,46px);
}
.step{padding-top:32px;border-top:1px solid var(--ink);position:relative}
.step-num{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;color:var(--clay);display:block;margin-bottom:18px}
.step h3{margin-bottom:12px}
.step p{color:var(--body);font-size:.9375rem}

/* ---------- pricing ---------- */
.price-table{width:100%;border-collapse:collapse;text-align:left}
.price-table th,.price-table td{padding:26px clamp(16px,2vw,22px) 26px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.price-table thead th{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);padding-bottom:16px;border-bottom:1px solid var(--ink);
}
.price-table tbody th{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.1vw,1.75rem);
  letter-spacing:-.02em;color:var(--ink);white-space:nowrap;
}
.price-table tbody th a{transition:color .25s var(--ease)}
.price-table tbody tr:hover th a{color:var(--pine-deep)}
.price-table td{color:var(--body);font-size:.9375rem}
.price-table .col-price{
  text-align:right;padding-right:0;white-space:nowrap;
  font-family:var(--mono);font-size:.9375rem;font-weight:500;color:var(--clay);
}
.price-table .col-price small{display:block;font-family:var(--sans);font-size:.75rem;font-weight:400;color:var(--mute);margin-top:6px}
.price-table tbody tr{transition:background-color .25s var(--ease)}
.price-table tbody tr:hover{background:var(--pine-wash)}
.pay-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pine-deep);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:gap .3s var(--ease),border-color .3s var(--ease);
}
.pay-link:hover{gap:13px;border-bottom-color:currentColor}

/* A three-column table cannot survive 371px: it was 510px wide inside a 327px
   box, so prices sat behind a sideways swipe. On a phone each row becomes a
   card instead — same data, no horizontal scrolling. */
@media (max-width:48rem){
  .table-scroll{overflow:visible}
  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td{display:block;width:auto}
  .price-table thead{display:none}
  .price-table tr{
    background:var(--card);
    border:1px solid rgba(43,43,39,.18);
    border-radius:3px;
    padding:18px 18px 16px;
    margin-bottom:10px;
  }
  .price-table th,
  .price-table td{border:0;padding:0}
  .price-table th[scope="row"]{
    font-family:var(--serif);font-weight:500;font-size:1.25rem;line-height:1.15;
    color:var(--ink);margin-bottom:8px;
  }
  .price-table td{font-size:.9375rem;color:var(--body);line-height:1.55}
  .price-table .col-price{
    text-align:left;margin-top:14px;padding-top:12px;
    border-top:1px solid var(--line);white-space:normal;
  }
  .price-table .col-price small{display:inline;margin-left:8px}
  .price-table tbody tr:hover{background:var(--card)}
}

.price-cap{margin-top:26px;font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;color:var(--mute)}
.table-scroll{overflow-x:auto}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--ink);max-width:940px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:28px;
  padding:28px 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.25;
  color:var(--ink);letter-spacing:-.02em;
  transition:color .25s var(--ease);
}
.faq summary:hover{color:var(--pine-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:15px;height:15px;margin-top:11px;
  background-image:linear-gradient(var(--pine),var(--pine)),linear-gradient(var(--pine),var(--pine));
  background-position:center,center;background-repeat:no-repeat;
  background-size:100% 1.5px,1.5px 100%;
  transition:transform .35s var(--ease),background-size .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(180deg);background-size:100% 1.5px,1.5px 0}
.faq details p{padding-bottom:30px;color:var(--body);max-width:72ch;margin-top:-6px}

/* ---------- page head (inner pages) ---------- */
.page-head{
  background:var(--ink);color:var(--on-dark);position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(64px,9vw,124px);
}
.page-head::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(72% 100% at 92% 0%,rgba(46,140,110,.26) 0%,transparent 60%);
}
.page-head .lede{color:var(--on-dark);margin-top:26px}
.crumbs{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:var(--on-dark-mute);margin-bottom:30px}
.crumbs a{border-bottom:1px solid rgba(244,240,232,.24);transition:.2s}
.crumbs a:hover{border-bottom-color:var(--bone);color:var(--bone)}
.price-badge{
  display:inline-flex;align-items:baseline;gap:12px;margin-top:36px;padding:15px 24px;
  border:1px solid var(--line-dark);border-radius:var(--radius);
}
.price-badge b{font-family:var(--mono);font-size:1.0625rem;font-weight:500;letter-spacing:-.01em;color:var(--bone)}
.price-badge span{font-size:.8125rem;color:var(--on-dark-mute)}

.page-head .btn-row{margin-top:34px}

/* ---------- small text helpers ---------- */
.note{margin-top:12px;font-size:.9375rem;line-height:1.6;color:var(--body)}
.note--muted{color:var(--mute)}
.note--wide{max-width:60ch}
.note--gap{margin-top:22px}
.section--dark .note,.page-head .note{color:var(--on-dark)}

/* ---------- split layout ---------- */
.split{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(34px,6vw,96px);container-type:inline-size}
.split>*{flex:999 1 30rem;min-width:0}
.split-aside{flex:1 1 17rem;position:sticky;top:106px}
/* once the aside has wrapped to full width, pinning it would cover the copy */
@container (max-width:52rem){
  .split-aside{position:static}
}
.aside-h{margin-bottom:20px}
.aside-h--spaced{margin-top:40px}
.includes{border-top:1px solid var(--line)}
.includes li{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.5;color:var(--body)}
.includes svg{flex:none;color:var(--pine);margin-top:5px}
.detail-intro{color:var(--ink);margin-bottom:clamp(34px,4vw,50px)}
.detail+.detail{margin-top:48px;padding-top:48px;border-top:1px solid var(--line)}
.detail h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:16px}
.detail p{color:var(--body)}

/* ---------- forms ---------- */
.form{display:grid;gap:22px}
.field{display:grid;gap:9px}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:22px}
.label{font-size:.8125rem;font-weight:500;letter-spacing:.005em;color:var(--ink)}
.label span{font-weight:400;color:var(--mute)}
.hint{margin:0;font-size:.8125rem;line-height:1.45;color:var(--mute)}
.input,.select,.textarea{
  width:100%;padding:15px 18px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  font-size:.9375rem;transition:border-color .2s,box-shadow .2s;
}
.input::placeholder,.textarea::placeholder{color:var(--mute)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(30,87,69,.16)}
.textarea{min-height:140px;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C564C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;padding-right:46px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.8125rem;color:var(--mute)}
.form-status:empty{display:none}
.form-status{padding:15px 18px;font-size:.9375rem;font-weight:450;border-radius:10px;border-left:3px solid var(--pine);background:var(--pine-wash);color:var(--ink)}
.form-status.err{border-left-color:#B3261E;background:#FBEDEB;color:#8C1D18}

.panel-intro{margin-top:8px;margin-bottom:26px}
.btn-row--gap{margin-top:24px}
.cal-error{text-align:center;padding:34px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(28px,3.6vw,48px)}
.panel-wash{background:var(--bone-2);border-radius:16px;padding:clamp(28px,3.6vw,48px)}
.numbered{counter-reset:n;border-top:1px solid var(--line)}
.numbered li{
  counter-increment:n;display:flex;gap:20px;padding:17px 0;
  border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--body);line-height:1.55;
}
.numbered li::before{
  content:counter(n,decimal-leading-zero);flex:none;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;color:var(--pine-deep);margin-top:5px;
}

/* ---------- calendar ---------- */
.cal-wrap{min-height:520px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.cal-loading{display:flex;align-items:center;justify-content:center;min-height:520px;color:var(--mute);font-size:.9375rem;gap:12px}
.spinner{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--pine);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- analyzer ---------- */
.analyzer-form{display:flex;gap:14px;flex-wrap:wrap;max-width:880px;margin-top:14px}
.analyzer-form .input{flex:1;min-width:250px;padding:20px 24px;font-size:1.0625rem;background:rgba(244,240,232,.05);border-color:var(--line-dark);color:var(--bone)}
.analyzer-form .btn{padding-inline:36px}
.analyzer-form .input::placeholder{color:var(--on-dark-mute)}
.analyzer-form .input:focus{border-color:var(--pine);box-shadow:0 0 0 3px rgba(126,217,180,.24)}
.analyzer-status{margin-top:20px;font-size:.9375rem;color:var(--on-dark)}
.analyzer-status.err{color:#F0A48E}
.score-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  column-gap:clamp(20px,2.6vw,44px);row-gap:0;margin-top:38px;
  border-bottom:1px solid var(--line-dark);
}
.score{padding:26px 0;border-top:1px solid var(--line-dark)}
.score-value{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.75rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--bone)}
.score-label{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute);margin-top:14px}
.score.good .score-value{color:#6FDCA6}
.score.ok .score-value{color:#F0C060}
.score.bad .score-value{color:#F0806A}
.analyzer-note{margin-top:24px;font-size:.8125rem;color:var(--on-dark-mute);max-width:66ch}

/* ---------- cta ---------- */
.cta{text-align:left}
.cta h2{max-width:8em}
/* the CTA block is used on dark AND light grounds, so it cannot hardcode the
   on-dark text colour — that put 1.41:1 grey-on-bone at the end of /process/ */
.cta p{margin-top:24px;color:var(--body);font-size:1.0625rem;max-width:52ch}
.section--dark .cta p{color:var(--on-dark)}
.cta .btn-row{margin-top:40px}

/* ---------- footer ---------- */
.footer{
  background:var(--ink);color:var(--on-dark-mute);
  padding-top:clamp(60px,7vw,96px);font-size:.9375rem;overflow:hidden;
}
.footer-grid{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,60px);padding-bottom:56px}
.footer-grid>*{flex:1 1 9rem}
.footer-grid>:first-child{flex:2 1 19rem}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:500;font-size:1.0625rem;color:var(--bone);margin-bottom:18px;letter-spacing:-.03em}
.footer-brand svg{color:var(--pine-light)}
.footer h4{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);margin-bottom:20px}
.footer li{margin-bottom:12px}
.footer a{transition:color .22s var(--ease)}
.footer a:hover{color:var(--pine-light)}
.footer-bottom{
  border-top:1px solid var(--line-dark);padding-top:28px;padding-bottom:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;color:var(--on-dark-mute);
}
.footer-word{
  display:block;width:100%;height:auto;margin-top:34px;
  overflow:visible;
}
.footer-word text{
  font-family:var(--serif);font-size:118px;letter-spacing:-.02em;
  fill:rgba(244,240,232,.055);
  stroke:rgba(244,240,232,.17);stroke-width:.75;
}
.footer-blurb{max-width:36ch}
.footer-hours{margin-top:16px;font-size:.8125rem;color:var(--on-dark-mute)}

/* ---------- 404 ---------- */
.notfound{padding-block:clamp(90px,13vw,170px);text-align:center}
.notfound .btn-row{justify-content:center;margin-top:38px}
.notfound .lede{margin:20px auto 0}

/* ---------- visuals ----------
   Hand-drawn interface mockups (partials/visuals.njk). Fonts come from the
   page, so the drawings sit in the same type system as the copy around them.
   Colours stay literal inside the SVG: these are artwork, not UI. */
.vz{display:block;width:100%;height:auto}
.vz text{font-family:var(--sans)}
.vz .vz-sans{font-family:var(--sans)}
.vz .vz-mono{font-family:var(--mono);font-weight:500}
.vz .vz-serif{font-family:var(--serif);font-weight:400}
.vz .vz-italic{font-style:italic}

.vz-frame{
  position:relative;border-radius:2px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 44px 90px -52px rgba(23,20,15,.55),0 2px 5px rgba(23,20,15,.045);
}
.section--dark .vz-frame{border-color:var(--line-dark);box-shadow:0 44px 90px -52px rgba(0,0,0,.75)}
/* On a full-width page band the drawings outgrow the scale they were drawn
   at, so cap them rather than letting a 1280px column magnify a mockup. */
.vz-frame--page{max-width:58rem;margin-inline:auto}

.vz-cap{
  margin-top:18px;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
}

/* two-up gallery band */
.vz-gallery{
  display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr));
  margin-top:clamp(56px,6vw,96px);
}

/* ---------- landing offshoots ----------
   The landing now hands off to /pricing/, /process/ and /work/ instead of
   carrying them inline, so it needs the links that make the handoff visible. */
.index-foot{margin-top:clamp(28px,3vw,40px)}
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.8125rem;font-weight:500;letter-spacing:.06em;
  color:var(--pine-deep);
  border-bottom:1px solid transparent;padding-bottom:3px;
  transition:gap .32s var(--ease),border-color .32s var(--ease);
}
.link-arrow:hover{gap:16px;border-bottom-color:currentColor}


/* ---------- project builder ----------
   Two columns: the questions, and an estimate that stays put while you
   answer. Without JS every fieldset is simply visible and the panel shows
   the base price — the form still submits. */
.quoter{display:grid;gap:clamp(32px,4vw,64px);align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:64rem){
  .quoter{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
}
/* Swapping a tall step for a short one makes Chrome re-anchor the scroll
   position to keep the view "stable", which lands you in the middle of the
   new step and overrides the scroll we just asked for. */
.quote-form{
  min-width:0;overflow-anchor:none;
  background:var(--card);
  border:1.5px solid rgba(43,43,39,.34);
  border-radius:2px;
  padding:clamp(24px,3vw,42px);
}
.quoter{overflow-anchor:none}

/* each step colours itself from its own accent */
[data-accent="s1"]{--accent:var(--s1)}
[data-accent="s2"]{--accent:var(--s2)}
[data-accent="s3"]{--accent:var(--s3)}
[data-accent="s4"]{--accent:var(--s4)}
[data-accent="s5"]{--accent:var(--s5)}

/* ---- stepper rail ---- */
.qrail{
  grid-column:1/-1;
  background:var(--card);
  border:1.5px solid rgba(43,43,39,.34);
  border-radius:2px;
  padding:10px 14px;
  display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;
  margin-bottom:clamp(18px,2vw,26px);
}
.qrail-item{display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:999px;transition:background .3s var(--ease)}
.qrail-dot{
  display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;
  border:1px solid var(--line);color:var(--mute);background:var(--card);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.qrail-name{
  font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:0;
  color:var(--body);white-space:nowrap;
  transition:color .3s var(--ease);
}
.qrail-item.is-done .qrail-name{color:var(--body)}
.qrail-item.is-done .qrail-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.qrail-item.is-at{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.qrail-item.is-at .qrail-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.qrail-item.is-at .qrail-name{color:var(--accent)}
@media (max-width:52rem){
  /* one row, scrolled sideways: wrapping to two rows cost 60px of the only
     screen where the first question has to fit */
  .qrail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 10px}
  .qrail::-webkit-scrollbar{display:none}
  .qrail-item{padding:5px;flex:none}
  .qrail-item .qrail-name{display:none}
  .qrail-item.is-at .qrail-name{display:inline}
  .qrail-dot{width:28px;height:28px}
}

/* ---- step head ---- */
.qstep{border:0;padding:0;margin:0}
/* A step swap used to be instant, which read as the page glitching. This is
   short enough to stay out of the way and long enough to show direction. */
.qstep.is-entering{animation:qstep-in .34s var(--ease) both}
@keyframes qstep-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qstep-legend:focus{outline:none}
.qstep-legend:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}
/* keeps the heading below the sticky header when a step is scrolled to */
.qstep-legend{scroll-margin-top:104px}
.qstep-legend{display:flex;gap:16px;align-items:flex-start;width:100%;padding:0;margin-bottom:clamp(28px,3vw,42px)}
.qstep-mark{
  display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:13px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
}
.qstep-count{
  display:block;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.qstep-title{
  display:block;font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.04;letter-spacing:-.022em;
}

/* ---- questions ---- */
.qfield+.qfield{margin-top:clamp(24px,4vw,52px);padding-top:clamp(24px,4vw,52px);border-top:1px solid var(--line)}
.qlabel{font-size:1.0625rem;font-weight:500;color:var(--ink);line-height:1.45}
.qhelp{margin-top:8px;font-size:.9375rem;color:var(--body);max-width:52ch}
.qfield .input{margin-top:18px}
.qerror{margin-top:10px;font-size:.875rem;color:var(--clay)}
.qfield.is-bad .input{border-color:var(--clay)}

.qopts{display:grid;gap:10px;margin-top:20px}
.qopt{display:block;cursor:pointer}
.qopt input{position:absolute;opacity:0;width:0;height:0}
.qopt-box{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 14px;
  position:relative;padding:15px 18px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.qopt-icon{
  display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);
  transition:background .2s var(--ease);
}
/* groups without icons keep the radio dot in the same column */
.qopt-box:not(:has(.qopt-icon))::before{
  content:"";width:17px;height:17px;border:1.5px solid var(--line);border-radius:50%;background:#fff;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.qopt input[type="checkbox"]+.qopt-box:not(:has(.qopt-icon))::before{border-radius:5px}
.qopt-label{grid-column:2;font-size:.9375rem;font-weight:450;color:var(--ink);line-height:1.4}
.qopt-note{grid-column:2;margin-top:3px;font-size:.8125rem;color:var(--body)}
.qopt-price{
  grid-column:3;grid-row:1/-1;align-self:center;
  font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--clay);white-space:nowrap;
}

.qopt:hover .qopt-box{border-color:var(--accent);background:#fff}
.qopt input:focus-visible+.qopt-box{outline:2px solid var(--accent);outline-offset:2px}
.qopt input:checked+.qopt-box{
  border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card));
  box-shadow:inset 0 0 0 1px var(--accent);
}
.qopt input:checked+.qopt-box::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.qopt input:checked+.qopt-box .qopt-icon{background:color-mix(in srgb,var(--accent) 20%,transparent)}

.qnote{
  border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);
  padding:20px 22px;border-radius:0 10px 10px 0;margin-bottom:34px;
}
.qnote-h{font-family:var(--sans);font-size:.9375rem;font-weight:600;color:var(--ink);margin-bottom:8px}
.qnote p{font-size:.9375rem;color:var(--body);max-width:56ch}

/* ---- photo drop zone ---- */
.qdrop{
  border:1.5px dashed color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  border-radius:14px;padding:22px 24px;margin-bottom:30px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.qdrop.is-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.qdrop.has-files{border-style:solid}
.qdrop-p{font-size:.9375rem;color:var(--body);max-width:56ch}
.qdrop-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.qdrop-actions label{cursor:pointer}
.qdrop-hint{font-size:.875rem;color:var(--mute)}
.qdrop-err{margin-top:12px;font-size:.875rem;color:var(--clay)}

.qthumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.qthumbs:empty{display:none}
.qthumb{position:relative;width:88px;height:88px;border-radius:10px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.qthumb img{width:100%;height:100%;object-fit:cover}
.qthumb-x{
  position:absolute;top:4px;right:4px;width:22px;height:22px;padding:0;line-height:1;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(23,20,15,.72);color:#fff;font-size:15px;
}
.qthumb-x:hover{background:var(--ink)}

.form-status.warn{border-left-color:var(--clay);background:color-mix(in srgb,var(--clay) 10%,transparent)}

.quote-form .field,
.quote-form .field-row{margin-top:22px}
.quote-form .qnote+.field-row{margin-top:0}

.qnav{display:flex;gap:12px;margin-top:clamp(32px,4vw,48px);padding-top:28px;border-top:1px solid var(--line)}
.qnav .btn{flex:0 0 auto}
.qnav #qBack[disabled]{opacity:.35;pointer-events:none}

/* ---- estimate panel ---- */
.qpanel{position:sticky;top:104px}

/* On a phone the panel fell below the form, which buried the running estimate
   3,500px down the page — the one number the whole builder exists to move.
   It goes first, and the totals sit on one line to keep the cost low. */
@media (max-width:64rem){
  .qpanel{position:static;order:-1;margin-bottom:6px}
  .qpanel-inner{padding:18px 20px}
  .qpanel .eyebrow{margin-bottom:14px}
  .qtotal{display:inline-flex;margin:0 26px 0 0}
  .qtotal--mo{margin-top:0}
  .qtotal-num{font-size:2rem}
  .qtotal--mo .qtotal-num{font-size:1.25rem}
  .qlines{max-height:11rem;margin-top:18px}
  .qprogress{margin-top:18px}
  .qdisclaimer{margin-top:14px}
}
.qpanel-inner{
  background:var(--ink);color:var(--on-dark);border-radius:16px;
  padding:clamp(24px,3vw,32px);
  box-shadow:0 40px 80px -50px rgba(23,20,15,.6);
}
.qpanel .eyebrow{color:var(--pine-light);margin-bottom:20px}
.qtotal{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.qtotal--mo{margin-top:6px}
.qtotal-num{font-family:var(--serif);font-size:clamp(2.25rem,4vw,3rem);line-height:1;color:var(--bone)}
.qtotal--mo .qtotal-num{font-size:clamp(1.25rem,2vw,1.5rem);color:var(--pine-light)}
.qtotal-cap{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mute)}

.qlines{margin-top:26px;border-top:1px solid var(--line-dark);max-height:15rem;overflow:auto}
.qlines:empty{display:none}
.qlines li{
  display:flex;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-dark-soft);font-size:.875rem;
}
.qline-label{color:var(--on-dark);min-width:0}
.qline-amt{font-family:var(--mono);font-size:.8125rem;color:var(--pine-light);white-space:nowrap}

.qprogress{margin-top:26px;height:3px;background:var(--line-dark);border-radius:2px;overflow:hidden}
.qprogress span{display:block;height:100%;width:0;background:var(--pine-light);transition:width .45s var(--ease)}
.qdisclaimer{margin-top:18px;font-size:.875rem;line-height:1.6;color:var(--on-dark)}

/* ---------- phone formatting ----------
   The hero button row measured 423px inside a 371px viewport: it is a flex
   item sized to max-content, so its buttons never wrapped and the second one
   was clipped off-screen by the page's overflow-x. Let the row take the full
   width and the buttons share it. */
@media (max-width:34rem){
  .btn-row{width:100%}
  .hero-under .btn-row{flex:1 1 100%}
  .btn-row .btn{flex:1 1 auto;justify-content:center;text-align:center}
  .cta .btn-row .btn,
  .hero-under .btn-row .btn{flex:1 1 100%}

  /* 11px tracked-out mono is a squint on a phone */
  .eyebrow{font-size:.75rem;letter-spacing:.13em}
  .gap-num,.index-num,.step-num,.term-num,
  .qstep-count,.qtotal-cap,.price-cap,.vz-cap,
  .hero-cap,.hero-cap b,.clock{font-size:.75rem}
  .caps-list li{font-size:.9375rem}
}

/* ---------- quoter head ----------
   Compact by design: the tall dark band put the first field 404px below the
   fold on a phone, so the page opened on a pitch instead of on something to do. */
.quote-head{padding-top:clamp(18px,4vw,54px);padding-bottom:clamp(14px,2.4vw,28px)}
.quote-head h1{
  font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.06;letter-spacing:-.028em;max-width:18ch;
}
.quote-lede{margin-top:10px;font-size:.9375rem;line-height:1.5;color:var(--body);max-width:56ch}
.quote-meta{
  margin-top:11px;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pine);
}
.section--flush{padding-top:clamp(14px,2vw,26px)}

/* On a phone the panel is lifted out of the flow entirely and pinned to the
   bottom: the form starts immediately, and the number still never leaves
   the screen while you answer. */
@media (max-width:64rem){
  .qpanel{
    /* top:auto matters: the desktop rule sets top:104px, and an element with
       both top and bottom stretches to fill — it was 698px tall and covering
       the headline instead of sitting on the bottom edge. */
    position:fixed;top:auto;left:0;right:0;bottom:0;z-index:70;order:0;margin:0;
    border-top:1px solid var(--line-dark);
  }
  .qpanel-inner{
    border-radius:0;padding:10px clamp(16px,4vw,24px) 12px;
    box-shadow:0 -10px 30px -18px rgba(43,43,39,.5);
  }
  .qpanel .eyebrow,
  .qpanel .qlines,
  .qpanel .qdisclaimer{display:none}
  .qtotal{display:inline-flex;margin:0 22px 0 0}
  .qtotal-num{font-size:1.6rem}
  .qtotal--mo .qtotal-num{font-size:1.1rem}
  .qprogress{margin-top:8px}
  .quote-form{padding-bottom:96px}
  .qdisclaimer--flow{display:block;color:var(--body);margin-top:18px}
}
@media (min-width:64.01rem){
  .qdisclaimer--flow{display:none}
}

.page-head--tight{padding-bottom:clamp(30px,4vw,48px)}

/* clocks, now riding in the plate's caption bar */
.clocks{display:flex;gap:18px}
.clock{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.clock i{font-style:normal;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- drawing marks ----------
   Corner ticks and a dimension rule: the conventions of a construction
   drawing rather than the ornament of a design studio. A contractor reads
   these without being taught them. */
.plate{position:relative}
.plate::before,.plate::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:var(--pine);border-style:solid;opacity:.9;
}
.plate::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.plate::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}

.dim{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pine-deep);
}
.dim::before,.dim::after{content:"";height:1.5px;background:currentColor;opacity:.45;flex:1}
.dim::before{max-width:80px}

/* ---------- pledge ----------
   Trust does not read as lightness. Everything else on this page floats on
   the paper; this one sits on it with weight and a hard edge, because these
   are commitments rather than claims. */
.pledge{
  background:var(--ink);color:var(--on-dark);
  border-radius:2px;
  padding:clamp(26px,4vw,56px);
  box-shadow:0 40px 90px -55px rgba(43,43,39,.75);
}
.pledge .eyebrow{color:var(--pine-light)}
.pledge-head h2{color:var(--bone);max-width:18ch}
.pledge-head>p{margin-top:16px;color:var(--on-dark);font-size:1rem;max-width:54ch}
.pledge-list{
  display:grid;gap:clamp(20px,2.6vw,34px);
  margin-top:clamp(28px,3.4vw,44px);
  padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--line-dark);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
}
.pledge-item{display:flex;gap:14px;align-items:flex-start;min-width:0}
.pledge-tick{
  display:grid;place-items:center;width:26px;height:26px;flex:none;margin-top:2px;
  border-radius:50%;background:var(--pine-light);color:var(--ink);
}
.pledge-item h3{
  font-family:var(--serif);font-weight:500;color:var(--bone);
  font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.2;letter-spacing:-.015em;margin-bottom:8px;
}
.pledge-item p{font-size:.9375rem;line-height:1.6;color:var(--on-dark)}

/* ---------- the credibility gap ---------- */
.gap-grid{
  display:grid;gap:clamp(24px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.gap-item{min-width:0}
.gap-num{
  display:block;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;color:var(--clay);margin-bottom:16px;
}
.gap-item h3{
  font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.12;letter-spacing:-.02em;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.gap-item p{font-size:.9375rem;line-height:1.6;color:var(--body)}

/* ---------- capability taxonomy ----------
   Every line here is copied from what the service pages already promise, so
   the density is real rather than decorative. */
.caps{
  background:var(--card);
  border:1.5px solid rgba(43,43,39,.30);
  border-radius:2px;
  padding:clamp(18px,3vw,44px);
  display:grid;gap:clamp(30px,3.4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
}
.caps-col{min-width:0}
.caps-h{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.1;letter-spacing:-.02em;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.caps-h a{transition:color .22s var(--ease)}
.caps-h a:hover{color:var(--pine)}
.caps-list li{
  position:relative;padding:9px 0 9px 20px;font-size:.875rem;line-height:1.5;color:var(--body);
  border-bottom:1px solid var(--line-soft);
}
.caps-list li::before{
  content:"";position:absolute;left:0;top:16px;width:9px;height:1px;background:var(--pine);opacity:.6;
}

/* scramble: the character swap that resolves into the real word */
.scramble{font-variant-numeric:tabular-nums}

/* ---------- floating nav ----------
   The reference detaches the bar from the page edge and floats it as a card.
   It keeps the drafting-table feeling: something laid ON the paper. */
@media (min-width:64rem){
  .header{background:transparent;border:0;padding-top:16px}
  .header::after{display:none}
  .header-inner{
    width:max-content;max-width:calc(100% - 2 * var(--gut));margin-inline:auto;
    background:var(--card);
    border:1.5px solid rgba(43,43,39,.42);
    border-radius:2px;
    padding:7px 8px 7px 16px;gap:30px;
    box-shadow:0 12px 30px -24px rgba(43,43,39,.55);
  }
  .header.is-dark .header-inner{background:var(--ink);border-color:var(--line-dark)}
  .header .brand span{font-size:1rem}
  .header-actions{gap:10px}
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ---------- responsive ---------- */
/* The only genuine viewport question left: does the page chrome fit?
   Everything else above sizes itself from the space it is actually given. */
@media (max-width:900px){
  .nav,.header-actions .lang-link{display:none}
  .menu-toggle{display:block}
  .header-actions{margin-left:auto}
}
/* below this the bar cannot hold brand + CTA + toggle at any sane size;
   the CTA is already the first item inside the menu it opens. */
@media (max-width:430px){
  .header-actions .btn--primary{display:none}
}