/* ============================================================
   system.css: the site's design system ("Slab"), picked 2026-09-29 by a
   three-critic panel over two other directions and the old look.
   LOAD ORDER IS LOAD-BEARING. BaseLayout links this at the TOP OF <body>,
   not in <head>, so it comes after style.css AND after the component CSS
   Astro injects just before </head>. Its rules are written at the same
   specificity as the rules they replace and win on order alone; move the
   link into <head> and half the system silently loses.
   Fonts: Archivo only (variable wdth + wght), self-hosted in /assets/fonts, preloaded by BaseLayout.
   ============================================================ */

/* ============================================================
   Direction C, "Slab", refined (v2). Bold AND premium: one accent, one card,
   heavy type only in headlines.
   - ONE terracotta (#8C3B1E). It means "act here": buttons, the promo strip,
     in-text links, one small structural rule per section, and one display
     accent phrase on the home hero. No salmon anywhere.
   - ONE card: white, 1px hairline #D6D4CE, radius 0, no shadow, on every card type.
   - 2px ink only as structure: the header rule and the two section dividers
     that open the closing areas (form section, closing CTA).
   - Ink bands: page-hero (inner pages) or materials (home), plus the footer.
     Never more than 2 per page. The closing CTA is a paper block.
   - Display: Archivo condensed 800, h1 and h2 only. h3 and card titles are 700
     at normal width. Body 400 and 500. Buttons 600.
   ============================================================ */

/* Archivo, self-hosted (SIL OFL, the Google Fonts v25 files) and preloaded by BaseLayout.
   From Google it arrived after first paint, so every page painted in the system face and
   then reflowed when Archivo swapped in (CLS 0.19 on our-standards), and it cost two extra
   connections before any text. Descriptors match Google's CSS exactly. */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(/assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Archivo's own ampersand reads as a backwards 3 or an 8 at every width (checked at
   condensed 800, normal 700 and normal 400). AmpFix swaps in a conventional ampersand
   from a system face for U+0026 only, so every other glyph stays Archivo. It leads both
   font stacks. Two faces so body weight and heading weight each get a matching cut. */
@font-face{
  font-family:'AmpFix';font-style:normal;font-weight:100 500;
  src:local('Helvetica Neue'),local('HelveticaNeue'),local('Arial'),local('ArialMT'),local('Roboto'),local('Roboto-Regular'),local('Liberation Sans'),local('Noto Sans');
  unicode-range:U+0026;
}
@font-face{
  font-family:'AmpFix';font-style:normal;font-weight:600 900;
  src:local('Helvetica Neue Bold'),local('HelveticaNeue-Bold'),local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold'),local('Liberation Sans Bold'),local('LiberationSans-Bold'),local('Noto Sans Bold'),local('NotoSans-Bold');
  unicode-range:U+0026;
}

:root{
  color-scheme:light;

  /* ground: real stone, not paper */
  --paper:#F2F1EE;
  --paper-2:#EAE9E5;
  --paper-3:#E2E0DB;
  --card:#FFFFFF;
  --card-2:#EAE9E5;

  /* ink: one token, every dark band */
  --ink:#161616;
  --ink-2:#161616;
  --ink-3:#1E1D1B;
  --ink-4:#3A3835;

  /* text on stone (all 7:1 or better on paper, paper-2 and white) */
  --body:#2E2E2E;
  --body-2:#2E2E2E;
  --muted:#454541;
  --muted-2:#3A3A37;

  /* the one accent */
  --terra:#8C3B1E;        /* fill, with cream labels 7.13:1; also display accent words at 24px and up */
  --terra-deep:#6A2A12;   /* hover fill */
  --terra-text:#7E3418;   /* small text on stone: 7.2 on paper-2, 8.0+ on paper and white */

  /* warm cream, the text on every ink band */
  --cream:#FBF7F0;
  --cream-2:#EFE7DA;
  --cream-3:#BDB6A8;      /* muted text on ink, 9.4:1 */

  /* The light terracotta is retired. style.css and a few pages still reference these
     names, so they resolve to cream instead of salmon. */
  --terra-lt:var(--cream);
  --terra-lt2:var(--cream-2);

  /* one hairline */
  --line:#D6D4CE;
  --line-2:#D6D4CE;
  --line-3:#D6D4CE;
  --field-line:#161616;

  /* shape: sharp, flat */
  --radius:0;
  --radius-lg:0;
  --radius-xl:0;
  --shadow:none;
  --shadow-sm:none;
  --shadow-lift:none;
  --rule:2px solid var(--ink);
  --hair:1px solid #D6D4CE;

  --ring:0 0 0 3px rgba(140,59,30,.35);
  --section-y:clamp(60px,8vw,112px);
  --head-gap:clamp(30px,4.4vw,52px);

  /* one family, two voices: --display is the condensed heading stack (AmpFix first) */
  --wdth:72%;
  --display:'AmpFix','Archivo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --sans:'AmpFix','Archivo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --serif:var(--sans);
  --mono:var(--sans);
}

/* ---------- base ---------- */
html{scroll-behavior:auto}
/* clip (not hidden) keeps sticky children working while nothing can widen the page */
main,.site-header,.site-footer,.promo-bar{overflow-x:clip}
body{
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.55;
  background:var(--paper);color:var(--ink);
}
main{overflow-wrap:break-word}
/* A <picture> from <Photo> adds no box of its own, so the <img> inside it lays out exactly as a
   bare <img> did under every existing rule (.page-hero .hero-photo img, .card-img, ...). Rules that
   style a specific picture, like the gallery hero's, are more specific and still win. */
picture{display:contents}
::selection{background:var(--terra);color:var(--cream)}
a{color:var(--terra-text)}
p{color:var(--body)}
b,strong{font-weight:700}
.mono{font-family:var(--sans);overflow-wrap:anywhere}

:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
.btn:focus-visible,.nav-drop-toggle:focus-visible,.nav-toggle:focus-visible,
.card-link:focus-visible,.faq summary:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
.site-footer :focus-visible,.mat-section :focus-visible,.page-hero :focus-visible,
.promo-bar:focus-visible{outline-color:var(--cream)}

/* ---------- type ---------- */
h1,h2{
  font-family:var(--display);font-weight:800;font-stretch:var(--wdth);
  letter-spacing:-.01em;line-height:.98;color:var(--ink);text-wrap:balance;
}
h3,h4{
  font-family:var(--sans);font-weight:700;font-stretch:100%;
  letter-spacing:-.006em;line-height:1.2;color:var(--ink);text-wrap:balance;
}
h1{font-size:clamp(40px,8.6vw,84px);line-height:.96}
h2{font-size:clamp(34px,6.2vw,64px);margin-bottom:var(--s4)}
h3{font-size:clamp(20px,2vw,24px);margin-bottom:var(--s2)}
h1+.lead,h2+.lead,h3+.lead,h1+p,h2+p,h3+p{margin-top:var(--s4)}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--body);max-width:36em}

/* section labels: sentence case, one short terracotta bar in front (a single structural rule) */
.kicker{
  display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.25;
  color:var(--ink);margin-bottom:var(--s4);
}
h2.kicker{font-stretch:100%;text-wrap:wrap}
.kicker::before{content:"";flex:none;width:28px;height:4px;background:var(--terra)}
/* inside a card the label is just a label: the bar belongs to the section, not to every box */
.card .kicker::before,.card-body .kicker::before,.material-card .kicker::before,.hub-card .kicker::before,
.package-band .kicker::before,.quote-card .kicker::before,.spotlight-body .kicker::before,.step .kicker::before{display:none}
.card .kicker,.card-body .kicker{font-size:15px;color:var(--muted);margin-bottom:var(--s3)}
.accent{font-style:normal;color:var(--terra)}
.small{font-size:15px;line-height:1.55;color:var(--muted)}
.table-note,.form-note{color:var(--muted)}

/* links inside running text are underlined, never told apart by colour alone */
p a,li a,.lead a,.faq-a a,.small a,.table-note a,.hub-note a{
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
}
p a:hover,li a:hover,.lead a:hover,.faq-a a:hover,.small a:hover,.table-note a:hover,.hub-note a:hover{
  color:var(--ink);text-decoration-color:var(--terra);
}

/* ---------- buttons: exactly two styles ---------- */
/* primary = terracotta fill, cream label. secondary = 1px ink outline, ink label. */
.btn{
  border-radius:0;gap:.45em;
  font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:0;line-height:1.15;
  min-height:48px;min-width:44px;padding:12px 22px;
  border:1px solid transparent;
}
.btn:hover,.btn:active{transform:none}
.btn-big{font-size:17px;min-height:54px;padding:14px 26px}
.btn .ph{width:1.1em;height:1.1em;flex:none;vertical-align:-.15em;fill:currentColor}
.btn-gold,.btn-light,.cta-band .btn-dark{background:var(--terra);border-color:var(--terra);color:var(--cream);box-shadow:none}
.btn-gold:hover,.btn-light:hover,.cta-band .btn-dark:hover{background:var(--terra-deep);border-color:var(--terra-deep);color:var(--cream);box-shadow:none}
.btn-outline,.btn-outline-dark,.btn-dark,.btn-terra-lt{background:transparent;border-color:var(--ink);color:var(--ink);box-shadow:none;font-size:inherit}
.btn-outline:hover,.btn-outline-dark:hover,.btn-dark:hover,.btn-terra-lt:hover{background:var(--ink);border-color:var(--ink);color:var(--cream);box-shadow:none}
.btn-big.btn-outline,.btn-big.btn-outline-dark,.btn-big.btn-dark{font-size:17px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:1;background:var(--paper-3);border-color:var(--paper-3);color:var(--muted)}

/* on an ink band: primary keeps the rust fill with a cream-ish edge so it never vanishes; secondary is a cream outline */
.page-hero .btn-gold,.mat-section .btn-gold,.site-footer .btn-gold,
.page-hero .btn-light,.mat-section .btn-light,.page-hero .btn-dark:not(.x){
  background:var(--terra);border-color:var(--cream-3);color:var(--cream);
}
.page-hero .btn-gold:hover,.mat-section .btn-gold:hover,.site-footer .btn-gold:hover,
.page-hero .btn-light:hover,.mat-section .btn-light:hover,.page-hero .btn-dark:hover{
  background:var(--terra-deep);border-color:var(--cream);color:var(--cream);
}
/* the closing CTA is a paper block: same two buttons as everywhere else */
.cta-band .btn-light,.cta-band .btn-gold{background:var(--terra);border-color:var(--terra);color:var(--cream)}
.cta-band .btn-light:hover,.cta-band .btn-gold:hover{background:var(--terra-deep);border-color:var(--terra-deep);color:var(--cream)}
.cta-band .btn-outline,.cta-band .btn-outline-dark{background:transparent;border-color:var(--ink);color:var(--ink)}
.cta-band .btn-outline:hover,.cta-band .btn-outline-dark:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.cta-band :focus-visible{outline-color:var(--terra)}

.page-hero .btn-outline,.page-hero .btn-outline-dark,.mat-section .btn-outline,.mat-section .btn-outline-dark,
.site-footer .btn-outline,.site-footer .btn-outline-dark{
  background:transparent;border-color:var(--cream);color:var(--cream);
}
.page-hero .btn-outline:hover,.page-hero .btn-outline-dark:hover,.mat-section .btn-outline:hover,.mat-section .btn-outline-dark:hover,
.site-footer .btn-outline:hover,.site-footer .btn-outline-dark:hover{
  background:var(--cream);border-color:var(--cream);color:var(--ink);
}

/* ---------- promo strip: slim terracotta, cream type ---------- */
.promo-bar{
  background:var(--terra);color:var(--cream);border-bottom:0;
  padding:8px var(--wrap-x);gap:2px 12px;
  font-size:14px;line-height:1.35;
}
.promo-bar .promo-tag{
  font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:13px;font-weight:700;
  color:var(--terra-text);background:var(--cream);border-radius:0;padding:2px 8px;
}
.promo-bar .promo-text{color:var(--cream);font-weight:500}
.promo-bar .promo-cta{color:var(--cream);font-weight:700;border-bottom:0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.promo-bar:hover .promo-cta{color:var(--cream);text-decoration-color:var(--cream-2)}
.promo-bar:hover .promo-text{text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.promo-bar{font-size:13.5px;line-height:1.3;padding:7px var(--wrap-x);gap:1px 8px}}

/* ---------- header ---------- */
.site-header{
  background:var(--paper);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:2px solid var(--ink);
}
/* style.css sets padding:12px 0 here, which zeroed the .wrap gutter: the logo sat flush against the left edge and the menu button against the right */
.header-inner{gap:var(--s4);padding:8px var(--wrap-x)}
.logo-link{gap:10px}
.main-nav ul{gap:2px}
.main-nav a{
  display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  color:var(--ink);font-weight:500;font-size:15px;padding:0 13px;border-radius:0;
}
.main-nav a:hover{color:var(--ink);background:transparent;text-decoration:underline;text-decoration-color:var(--terra);text-decoration-thickness:2px;text-underline-offset:9px}
.main-nav a[aria-current="page"]{color:var(--ink);background:transparent;font-weight:700;text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:9px}
.header-phone{gap:var(--s3)}
.header-phone .tel{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);font-size:15px;font-weight:600;padding:0 4px;border-radius:0;
}
.header-phone .tel:hover{color:var(--terra-text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.header-phone .btn{padding:10px 20px;font-size:15px;min-height:44px}
.nav-toggle{
  background:var(--paper);border:1px solid var(--ink);border-radius:0;color:var(--ink);
  width:44px;height:44px;font-size:20px;
}
.nav-toggle:hover{background:var(--ink);color:var(--paper)}
.nav-drop-toggle{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);font-weight:500;font-size:15px;padding:0 13px;border-radius:0;
}
.nav-drop-toggle:hover,.nav-drop-toggle.is-active{color:var(--ink);background:transparent;text-decoration:underline;text-decoration-color:var(--terra);text-decoration-thickness:2px;text-underline-offset:9px}
.main-nav .nav-drop-menu{
  background:var(--card);border:var(--hair);border-radius:0;box-shadow:none;padding:6px;
}
.nav-drop-menu a{
  display:flex;align-items:center;min-height:44px;border-radius:0;padding:0 12px;font-size:15px;text-decoration:none;
}
.nav-drop-menu a:hover{background:var(--ink);color:var(--paper);text-decoration:none}

@media(max-width:980px){
  .header-inner{gap:10px}
  .header-phone .tel{display:none}
  .header-phone{margin-left:auto}
  .nav-toggle{margin-left:0}
  .main-nav{background:var(--paper);border-bottom:2px solid var(--ink);padding:8px var(--wrap-x) 16px}
  .main-nav a{display:flex;padding:0 4px;font-size:17px;font-weight:600;border-bottom:var(--hair);min-height:52px;text-decoration:none}
  .main-nav a:hover,.main-nav a[aria-current="page"]{text-decoration:none;background:var(--paper-2)}
  .nav-drop-toggle{
    display:flex;width:100%;min-height:44px;padding:8px 4px;
    font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);
  }
  .nav-drop-toggle:hover,.nav-drop-toggle.is-active{text-decoration:none;background:transparent}
  .main-nav .nav-drop-menu{border:0;box-shadow:none;padding:0 0 0 12px;background:none}
  .nav-drop-menu a{min-height:52px;padding:0 4px;font-size:17px}
}
@media(max-width:560px){
  .header-phone .btn{padding:10px;font-size:0;min-width:46px;min-height:46px}
  .header-phone .btn svg{width:20px;height:20px}
  .nav-toggle{width:46px;height:46px}
}
@media(max-width:360px){
  .header-inner{gap:6px;padding-left:16px;padding-right:16px}
  .header-phone .btn{min-width:44px;min-height:44px;padding:10px}
  .nav-toggle{width:44px;height:44px}
}

/* ---------- home hero ---------- */
.hero{padding:14px 0 30px}
.hero .wrap{gap:clamp(28px,4vw,60px);align-items:center}
.hero-copy{flex:1.5 1 460px}
.hero-media{flex:1 1 340px}
.hero h1{font-size:clamp(38px,10.4vw,60px);font-stretch:64%;margin-bottom:var(--s3)}
@media(min-width:561px){.hero{padding:clamp(18px,5vw,72px) 0 clamp(32px,5.5vw,72px)}.hero h1{font-size:clamp(60px,9.4vw,84px);font-stretch:var(--wdth);margin-bottom:var(--s4)}}
@media(max-width:360px){.hero h1{font-size:34px;font-stretch:62%}}
@media(min-width:981px){
  .hero h1{font-size:clamp(64px,5.9vw,80px)}
  .hero-copy{flex:1.45 1 560px}
  .hero-media{flex:1 1 380px}
}
.hero .lead{margin-bottom:var(--s5);font-size:clamp(16.5px,1.6vw,20px);line-height:1.5}
/* the display accent: rust type, no box */
#hero#hero .accent{
  font-style:normal;color:var(--terra);background:none;text-decoration:none;padding:0;
}
/* the tag above the headline shares the section-label recipe */
.badge{
  display:flex;align-items:center;gap:12px;padding:0;border:0;
  border-radius:0;background:none;margin-bottom:var(--s3);
}
.badge::before{content:"";flex:none;width:28px;height:4px;background:var(--terra)}
.badge .dot{display:none}
.badge span:last-child{
  font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);line-height:1.3;
}
.hero .badge span:last-child{text-transform:lowercase}
.hero .badge span:last-child::first-letter{text-transform:uppercase}
.hero-ctas{gap:var(--s3)}
.hero-micro{gap:4px 20px;align-items:baseline;color:var(--body);font-size:15px}
.hero-micro .mono{font-family:var(--sans);font-weight:700;font-size:20px;line-height:1;color:var(--ink);margin-right:-12px}
.hero-micro .sep{display:none}
#hero .hero-viz-link{
  display:block;min-height:44px;margin-top:var(--s2);padding:10px 0;gap:0;
  font-size:16px;line-height:1.4;font-weight:500;color:var(--ink);
  border-bottom:0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:var(--terra);
}
#hero .hero-viz-link .dot{display:none}
#hero .hero-viz-link em{font-family:var(--sans);font-style:normal;font-weight:700}
#hero .hero-viz-link:hover{color:var(--terra-text)}

/* photo frame: square, one hairline, the city caption as a plate at its foot */
.hero-photo-frame,.hero-viz,.split-img{border-radius:0;box-shadow:none}
.hero-photo-frame{background:var(--paper-3);border:var(--hair)}
#hero .hero-photo-frame{min-height:clamp(320px,40vw,560px)}
#hero .hero-photo-frame img{inset:0 0 48px 0;height:calc(100% - 48px)}
#hero .hero-photo-tag,#why .why-photo-tag{
  left:0;right:0;bottom:0;
  display:flex;align-items:center;min-height:48px;
  font:500 15px/1.25 var(--sans);letter-spacing:0;text-transform:none;
  color:var(--ink);background:var(--card);border-top:var(--hair);
  -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;padding:10px 16px;
}
.hero-badge{
  top:0;right:0;background:var(--ink);color:var(--cream);border-radius:0;padding:14px 18px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.hero-badge .n{font-family:var(--display);font-weight:800;font-stretch:var(--wdth);font-size:34px}
.hero-badge .l{font-size:14px;letter-spacing:0;color:var(--cream-2)}

/* ---------- AI visualizer compare slider ---------- */
.hero-viz{background:var(--paper-3);border:var(--hair)}
.hero-viz-divider{width:3px;background:var(--cream);box-shadow:0 0 0 1px var(--ink)}
.hero-viz-knob{border-radius:0;background:var(--cream);border:1px solid var(--ink);color:var(--ink);box-shadow:none}
.hero-viz-range:focus-visible{outline:3px solid var(--terra);outline-offset:-3px;border-radius:0}
.hero-viz-frame:focus-within .hero-viz-knob{box-shadow:0 0 0 3px var(--terra)}
.hero-viz-badge{border-radius:0;background:var(--cream);border:1px solid var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.hero-viz-tag{
  bottom:0;font:600 14px/1.2 var(--sans);letter-spacing:0;text-transform:none;
  color:var(--cream);background:var(--ink);border-radius:0;padding:9px 14px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.hero-viz-tag-l{left:0}
.hero-viz-tag-r{right:0}
.hero-viz-hint{
  top:12px;bottom:auto;font:600 14px/1 var(--sans);letter-spacing:0;color:var(--ink);
  background:var(--cream);border:1px solid var(--ink);border-radius:0;box-shadow:none;padding:8px 12px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.hero-viz-note{font-size:14.5px;color:var(--muted)}
.hero-viz-note b{color:var(--ink)}
.viz-demo .hero-viz-frame{min-height:clamp(260px,32vw,420px)}

/* ---------- stat strip: a quiet spec plate ---------- */
.stat-strip{background:var(--paper-2);border-top:var(--hair);border-bottom:var(--hair)}
.stat-strip .wrap{padding:0}
#stats#stats .stat{
  text-align:left;padding:26px var(--wrap-x);border:0;border-right:var(--hair);
}
#stats#stats .stat:last-child{border-right:0}
.stat .n{
  font-family:var(--display);font-weight:800;font-stretch:var(--wdth);letter-spacing:-.01em;
  font-size:clamp(40px,9.6vw,64px);color:var(--ink);line-height:.95;
}
#stats#stats .stat .l{
  font-family:var(--sans);font-size:15px;line-height:1.35;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--body);margin-top:var(--s2);
}
@media(max-width:760px){
  #stats#stats .stat{border-right:0;border-bottom:var(--hair);padding:20px var(--wrap-x)}
  #stats#stats .stat:nth-child(odd){border-right:var(--hair)}
  #stats#stats .stat:nth-last-child(-n+2){border-bottom:0}
  .stat .n{font-size:clamp(34px,9.6vw,48px)}
}
@media(max-width:560px){.stat-strip .wrap{padding:0}}

/* ---------- the one card: white, 1px hairline, radius 0, no shadow ---------- */
.card,.spotlight,.stone-card,.fam-dir-card,.hub-card,.hub-card[data-astro-cid-5smz3lb2],.quote-card,.package-band,
#services#services .services-ask,.area-wrap,.quote-box,.brand-note,figure.gal,.viz-teaser,.grv.grv-card,.grv.grv-bar,
.grid>.material-card,.faq details,#faq#faq .faq details{
  background:var(--card);border:var(--hair);border-radius:0;box-shadow:none;
}
.card:hover,.spotlight:hover,.stone-card:hover,.fam-dir-card:hover{border-color:var(--ink);box-shadow:none}
.card-img{aspect-ratio:4/3}
.card-body{padding:var(--s5)}
.card-body p{font-size:16px;color:var(--body);line-height:1.55}
.card-link{
  display:inline-block;align-self:flex-start;line-height:1.35;padding:14px 0 8px;min-height:44px;min-width:44px;
  font-family:var(--sans);font-size:16px;font-weight:600;color:var(--terra-text);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
}
.card-link:hover{color:var(--ink)}
#services#services .card-body h3,#pricing#pricing .card-body h3{font-size:clamp(20px,2vw,24px);line-height:1.2}
#pricing#pricing .card-body h3{font-size:clamp(22px,2.3vw,28px);letter-spacing:-.012em}
#services#services .services-ask{border-style:solid;justify-content:center}
#services#services .services-ask h3{font-style:normal}
#pricing#pricing .card-highlight{background:var(--card);border:var(--hair);box-shadow:none}
#pricing#pricing .card-highlight .kicker{color:var(--muted)}
#pricing#pricing .card-highlight .card-body h3{color:var(--ink)}
#pricing#pricing .card-highlight .card-body p{color:var(--body)}
.package-band{padding:var(--s5) var(--s6)}
.package-band p{color:var(--body)}
.pricing-byline{color:var(--body);font-size:16px}
.hero-micro span{color:inherit}

/* ---------- materials: the ink band ---------- */
.mat-section{background:var(--ink);color:var(--cream-2)}
.mat-section .kicker{color:var(--cream)}
.mat-section .kicker::before{background:var(--cream-3)}
.mat-section h2{color:var(--cream)}
.mat-section .lead,.mat-section p{color:var(--cream-2)}
.mat-grid{background:var(--ink-4);gap:1px;border-radius:0;border:1px solid var(--ink-4)}

/* light variant: a material card standing on a light page (blog, stones, service pages) */
.material-card{border-radius:0}
.grid>.material-card{display:block;padding:var(--s5)}
.grid>.material-card h3{color:var(--ink);margin:0 0 var(--s3);font-size:clamp(20px,2vw,24px);line-height:1.2}
.grid>.material-card p,.grid>.material-card li{color:var(--body);font-size:16px;line-height:1.55}
.grid>.material-card b,.grid>.material-card strong{color:var(--ink)}
.grid>.material-card .kicker{color:var(--muted)}
.grid>.material-card .idx{color:var(--muted)}
.grid>.material-card a:not([class]){color:var(--terra-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.grid>.material-card .checklist .x{color:var(--muted)}
.grid>.material-card:hover{background:var(--card);border-color:var(--ink)}
.material-card h3 .vein,.grid>.material-card h3 .vein{display:none}

/* dark variant: cells inside the ink band */
.mat-section .material-card,.mat-grid .material-card{
  display:block;background:var(--ink-3);border:0;padding:var(--s6) var(--s5);border-radius:0;
}
.mat-section .material-card:hover,.mat-grid .material-card:hover{background:#262421}
.mat-section .material-card h3,.mat-grid .material-card h3{color:var(--cream);font-size:clamp(24px,2.6vw,30px);line-height:1.1;margin:0 0 var(--s3)}
.mat-section .material-card p,.mat-grid .material-card p,.mat-section .material-card li{color:var(--cream-2);font-size:16px;line-height:1.55}
.mat-section .material-card b,.mat-section .material-card strong{color:var(--cream)}
.mat-section .material-card .idx,.mat-grid .material-card .idx{
  font-family:var(--sans);font-size:15px;font-weight:500;color:var(--cream-3);margin-bottom:var(--s3);
}
.mat-section .material-card a:not([class]),.material-card a:not([class]).on-dark{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.mat-section .material-card .checklist .x{color:var(--cream-2)}
.material-card .kicker{color:var(--cream)}

/* ---------- split, checklist, trust ---------- */
.split{gap:clamp(28px,4.4vw,64px)}
.split-img{background:var(--paper-3);border:var(--hair)}
#why .split-img img{inset:0 0 48px 0;height:calc(100% - 48px)}
.checklist{gap:var(--s4)}
.checklist li{color:var(--ink);font-size:17px;line-height:1.5}
/* ticks and the contact icons are plain ink marks: no filled chip, no accent */
.checklist .tick{
  width:26px;height:26px;border-radius:0;background:none;color:var(--ink);
  font-size:19px;font-weight:700;margin-top:0;
}
.checklist .tick .ph{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.checklist b{color:var(--ink);font-weight:700}
.trust-bar{background:var(--paper-2);border-top:0;border-bottom:var(--hair);padding:var(--s5) 0}
.trust-bar span{font-size:15px;font-weight:600;color:var(--ink)}
.trust-bar .tick{color:var(--ink);font-weight:700}

/* ---------- process ---------- */
.process{background:var(--paper-2);border-top:0;border-bottom:0}
.step,#process#process .step{
  background:transparent;border:0;border-top:var(--hair);border-radius:0;padding:var(--s5) 0 0;
}
.step .num,#process#process .step .num{
  font-family:var(--display);font-weight:800;font-stretch:var(--wdth);font-style:normal;
  font-size:clamp(44px,5vw,64px);line-height:.9;color:var(--ink);margin-bottom:var(--s4);letter-spacing:-.01em;
}
.step h3{font-family:var(--sans);font-weight:700;font-stretch:100%;font-size:clamp(20px,2vw,24px);line-height:1.2;letter-spacing:-.006em;color:var(--ink)}
.step p{font-size:16px;color:var(--body);line-height:1.55}
.step h3 a,.hub-step-link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}

/* ---------- gallery ---------- */
.gallery-grid{gap:12px}
.gallery-grid a,.gallery-grid figure{border-radius:0}
figure.gal figcaption{font-size:15px;color:var(--body);padding:12px 16px}
.gallery-head .btn{align-self:flex-end}

/* ---------- service area chips ---------- */
.area-wrap{padding:clamp(28px,4vw,48px)}
.areas span{
  background:var(--paper);border:var(--hair);border-radius:0;
  padding:9px 15px;font-size:15px;font-weight:500;color:var(--ink);
}
#service-area .area-lead{color:var(--body)}
#service-area .area-small{color:var(--muted)}
#service-area .area-small a{
  color:var(--terra-text);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
}
/* these links sit in short sentences: padding on an inline box widens the hit area to 44px without moving the text or splitting the full stop off the line */
#service-area .area-small a{display:inline;padding:14px 0}

/* ---------- visualizer teaser: a flat card ---------- */
.viz-teaser{color:var(--ink)}
.viz-teaser::before{display:none}
.viz-copy h2{color:var(--ink)}
.viz-copy .accent{color:var(--terra)}
.viz-copy p{color:var(--body);font-size:17px}
.pill-note{
  display:flex;align-items:center;gap:12px;padding:0;background:none;border:0;border-radius:0;margin-bottom:var(--s4);
}
.pill-note::before{content:"";flex:none;width:28px;height:4px;background:var(--terra)}
.pill-note .dot{display:none}
.pill-note span:last-child{font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
#visualizer .viz-fine{color:var(--muted);font-size:15px}
#visualizer .viz-fine b{color:var(--ink)}

/* ---------- closing CTA: a paper block under a 2px ink divider (no terracotta block) ---------- */
.cta-band{background:none;color:var(--ink);border-radius:0;border-top:2px solid var(--ink);overflow:visible}
.cta-band::before{display:none}
.cta-band h2{color:var(--ink);max-width:20ch;margin:0 auto var(--s4)}
.cta-band p{color:var(--body);font-size:18px}
.cta-band .fine{font-family:var(--sans);font-size:15px;color:var(--body)}
.cta-band a:not([class]){color:var(--terra-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
#cta .cta-band{padding:clamp(36px,5vw,64px) 0 0}
.cta-band .inner{margin-left:auto;margin-right:auto}
section.cta-band{background:var(--paper);padding:var(--section-y) 0}

/* ---------- page hero: the ink band on inner pages ---------- */
.page-hero{
  background:var(--ink);border-bottom:0;color:var(--cream-2);
  padding:clamp(28px,6vw,88px) 0 clamp(32px,5.5vw,76px);
}
.page-hero h1{color:var(--cream);max-width:15em;font-size:clamp(40px,8.4vw,76px)}
@media(max-width:560px){
  .page-hero{padding:16px 0 28px}
  .page-hero h1{font-size:38px;font-stretch:64%}
  .page-hero .lead{font-size:16.5px;line-height:1.5;margin-top:var(--s3)}
  .page-hero .crumbs{margin-bottom:var(--s2)}
}
@media(max-width:344px){.page-hero h1{font-size:34px;font-stretch:62%}}
.page-hero .lead{color:var(--cream-2);margin-top:var(--s4)}
.page-hero .lead b,.page-hero .lead strong{color:var(--cream)}
.page-hero .accent{color:var(--cream)}
.page-hero .hero-ctas{margin-top:var(--s5);margin-bottom:0}
.page-hero a:not(.btn){color:var(--cream)}
.page-hero p a:not(.btn),.page-hero .lead a:not(.btn){text-decoration-color:var(--cream-3)}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;
  font-family:var(--sans);font-size:15px;line-height:1.3;margin-bottom:var(--s3);color:var(--muted);
}
.crumbs a,.crumbs[data-astro-cid-5smz3lb2] a[data-astro-cid-5smz3lb2]{
  display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;margin:0;
  color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.crumbs a:hover{color:var(--terra-text)}
.page-hero .crumbs{color:var(--cream-3)}
.page-hero .crumbs a,.page-hero .crumbs[data-astro-cid-5smz3lb2] a[data-astro-cid-5smz3lb2]{color:var(--cream);text-decoration-color:var(--cream-3)}
.page-hero .crumbs a:hover{color:var(--cream);text-decoration-color:var(--cream)}

/* ---------- testimonials ---------- */
.quote-card{padding:var(--s5) var(--s6)}
.quote-card blockquote{font-family:var(--sans);font-style:normal;font-weight:500;font-size:clamp(19px,2vw,22px);line-height:1.45;color:var(--ink)}
.quote-card cite{font-size:15px;letter-spacing:0;color:var(--muted)}
.stars{color:var(--ink)}

/* ---------- FAQ: each question is a card ---------- */
.faq details,#faq#faq .faq details{margin-bottom:8px;overflow:visible}
.faq details:last-of-type,#faq#faq .faq details:last-of-type{border-bottom:var(--hair);margin-bottom:0}
.faq details:hover,.faq details[open]{border-color:var(--ink)}
.faq summary,#faq#faq .faq summary{
  font-family:var(--sans);font-weight:600;font-size:clamp(17px,2vw,20px);line-height:1.3;color:var(--ink);
  padding:var(--s4) var(--s5);min-height:60px;
}
.faq summary::after{
  content:"+";font-family:var(--sans);font-weight:500;font-size:30px;line-height:1;color:var(--ink);
  width:32px;text-align:center;
}
.faq details[open] summary::after{content:"\00D7";transform:none}
.faq summary:hover{color:var(--terra-text)}
.faq .faq-a,#faq#faq .faq .faq-a{padding:0 var(--s5) var(--s5);color:var(--body);font-size:17px;line-height:1.6}

/* ---------- forms ---------- */
.quote-section{background:var(--paper-2);border-top:2px solid var(--ink)}
.quote-box{background:var(--card)}
label,label[for]{
  display:flex;align-items:flex-end;min-height:44px;padding-bottom:6px;margin-bottom:0;
  font-size:16px;font-weight:600;letter-spacing:0;color:var(--ink);
}
input,select,textarea{
  border:1px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);
  font-size:17px;padding:13px 15px;min-height:52px;
}
textarea{min-height:130px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--terra);outline-offset:2px;box-shadow:none;border-color:var(--ink)}
input:user-invalid,textarea:user-invalid{border-color:var(--terra-deep);box-shadow:inset 4px 0 0 var(--terra-deep)}
.or-call{font-size:16px;color:var(--body)}
.or-call a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  color:var(--terra-text);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
}
.or-call a:hover{color:var(--ink)}

/* ---------- pricing table ---------- */
.price-table{background:var(--card);border:var(--hair);border-radius:0}
.price-table th,.price-table td{font-size:16px;line-height:1.4;border-bottom:var(--hair);padding:var(--s4) var(--s5)}
.price-table th{
  background:var(--paper-2);color:var(--ink);font-family:var(--sans);font-weight:700;letter-spacing:0;
  font-size:16px;text-transform:none;padding-top:var(--s3);padding-bottom:var(--s3);
  border-bottom:1px solid var(--ink);
}
.price-table tbody tr:last-child td{border-bottom:0}
.price-table tbody tr:hover{background:var(--paper)}
.price-table td{color:var(--body)}
.price-table td:first-child{font-weight:600;color:var(--ink)}
/* price cells never wrap onto a third line */
.price-table td:last-child,.price-table th:last-child{white-space:nowrap}
.price-table td:last-child{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .price-table th,.price-table td{padding:11px 9px;font-size:15px;line-height:1.35}
  .price-table th{font-size:15px}
  .price-table th:first-child,.price-table td:first-child{padding-left:12px}
  .price-table th:last-child,.price-table td:last-child{padding-right:12px}
}
.table-scroll{border-radius:0}

/* ---------- project spotlights ---------- */
.spotlight-img .badge{
  top:auto;bottom:0;left:0;display:flex;background:var(--ink);border:0;border-radius:0;
  color:var(--cream);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;padding:8px 14px;
}
.spotlight-img .badge::before{display:none}
.spotlight-img .badge span,.spotlight-img .badge span:last-child{color:var(--cream);font-size:14px;letter-spacing:0;text-transform:none}
.spotlight-body p{color:var(--body);font-size:16px}
.spec span{
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);background:var(--paper);
  border:var(--hair);border-radius:0;padding:5px 10px;
}

/* ---------- footer: the second ink band ---------- */
.site-footer{background:var(--ink);color:var(--cream-2)}
.footer-grid{gap:var(--s7) var(--s6)}
@media(min-width:761px){
  .footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:normal}
  .footer-grid>*{min-width:0;max-width:none}
  .footer-grid>.footer-about,.footer-grid>div:last-child{grid-column:1/-1}
  .footer-grid>div:last-child ul.footer-contact{max-width:520px}
}
@media(min-width:1100px){
  .footer-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) minmax(0,1.25fr)}
  .footer-grid>.footer-about,.footer-grid>div:last-child{grid-column:auto}
  .site-footer .footer-about .footer-tag{font-size:40px}
}
/* footer column headings are h2 (an h4 after the page's h2s skipped a level on every page) but keep
   the small sans label look, so they undo the display-face h2 defaults */
.site-footer .foot-h{
  font-family:var(--sans);font-stretch:100%;text-wrap:wrap;
  color:var(--cream);font-size:17px;font-weight:700;letter-spacing:0;line-height:1.2;text-transform:none;
  margin-bottom:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--ink-4);
}
.site-footer p{font-size:16px;color:var(--cream-2)}
.site-footer ul{gap:0}
.site-footer a:not(.btn){
  display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;
  color:var(--cream-2);font-size:16px;line-height:1.3;
}
.site-footer a:not(.btn):hover{color:var(--cream);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.site-footer .footer-tag{
  font-family:var(--display);font-style:normal;font-weight:800;font-stretch:var(--wdth);letter-spacing:-.01em;
  font-size:clamp(36px,4.6vw,48px);line-height:.98;color:var(--cream);margin-top:var(--s5);max-width:none;
}
.site-footer ul.footer-trust{opacity:1;font-size:15px;color:var(--cream-2)}
.site-footer .footer-trust li:not(#a)::before{color:var(--cream-3)}
.footer-contact li{font-size:16px}
.footer-contact li{gap:12px;min-height:44px}
.footer-contact .ico{color:var(--cream-2);display:inline-flex;align-items:center;justify-content:center;width:22px;font-size:16px}
.footer-contact .ico .ph{width:1.25em;height:1.25em;flex:none;vertical-align:-.2em;fill:currentColor}
.footer-bottom{border-top:1px solid var(--ink-4);font-family:var(--sans);font-size:15px;color:var(--cream-3)}
.footer-bottom .wrap{display:block;text-align:center;line-height:1.4}
.footer-bottom a:not(.btn){font-size:15px;padding:0;min-height:44px;min-width:44px}
@media(max-width:760px){
  .footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)}
  .footer-grid>*{min-width:0;max-width:none}
  .footer-grid>.footer-about,.footer-grid>div:nth-child(4),.footer-grid>div:nth-child(5){grid-column:1/-1}
  .footer-grid>div a{overflow-wrap:anywhere}
}

/* ---------- call bar ----------
   Phone: a full-width dock, unchanged. 761 to 1023: a compact dock at the bottom right.
   1024 and up: hidden, because the sticky header already carries the phone number and "Free quote". */
.call-bar{
  display:flex;justify-content:center;
  left:0;right:0;bottom:0;transform:none;width:auto;max-width:none;
  background:var(--paper);border:0;border-top:1px solid var(--ink);border-radius:0;box-shadow:none;
  padding:8px var(--wrap-x) calc(8px + env(safe-area-inset-bottom));gap:10px;
}
.call-bar .btn{flex:1;min-height:48px;padding:10px 16px;font-size:16px}
.call-bar .btn-gold{background:var(--terra);border-color:var(--terra);color:var(--cream)}
.call-bar .btn-gold:hover{background:var(--terra-deep);border-color:var(--terra-deep);color:var(--cream)}
.call-bar .btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.call-bar .btn-outline:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* the phone dock sits over the foot of the ink footer, so the footer carries the clearance, not a stripe of body */
body{padding-bottom:0}
.site-footer{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
@media(min-width:761px) and (max-width:1023px){
  .call-bar{left:auto;right:16px;bottom:16px;padding:6px;gap:6px;border:1px solid var(--ink)}
  .call-bar .btn{flex:0 0 auto;min-height:44px;padding:8px 18px;font-size:15px}
  /* body clears the dock (16px offset + 58px dock); the footer is pulled back under that padding so no paper stripe shows below it */
  body{padding-bottom:74px}
  .site-footer{margin-bottom:-74px;padding-bottom:74px}
}
@media(min-width:1024px){
  .call-bar{display:none}
  body{padding-bottom:0}
  .site-footer{padding-bottom:0;margin-bottom:0}
}

/* ---------- reviews (reviews.js injects its own styles after this file, so these use two classes) ---------- */
html .grv,html .grv *{font-family:var(--sans)}
.grv .grv-brand{color:var(--ink);letter-spacing:0;font-size:16px}
.grv .grv-num{font-family:var(--display);font-stretch:var(--wdth);font-weight:800;color:var(--ink);font-size:34px}
.grv .grv-count{color:var(--body);font-weight:600;font-size:15px}
.grv .grv-verified{color:var(--body);font-size:15px}
.grv .grv-verified::before{background:var(--ink);color:var(--cream);border-radius:0}
.grv .grv-stars-bg{color:var(--muted)}
.grv .grv-stars-fg{color:var(--ink)}
.grv .grv-sub{color:var(--body);font-size:16px}
.grv .grv-btn{border-radius:0;min-height:48px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:600}
.grv .grv-btn:hover{transform:none}
.grv .grv-btn-primary{background:var(--terra);color:var(--cream);border:1px solid var(--terra)}
.grv .grv-btn-primary:hover{background:var(--terra-deep);border-color:var(--terra-deep);color:var(--cream)}
.grv .grv-btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.grv .grv-btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.grv.grv-bar{padding:6px 16px}
.grv .grv-bar-txt{color:var(--ink);font-size:15px}
.grv .grv-bar-link,.reviews-strip .grv-bar-link{
  color:var(--terra-text);font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;min-height:44px;padding:0;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
}
.grv .grv-bar-link:hover{color:var(--ink)}

/* ---------- stones page ---------- */
.stone-toolbar{background:var(--paper);border-bottom:var(--hair);-webkit-backdrop-filter:none;backdrop-filter:none}
.stone-search input{border:1px solid var(--ink);border-radius:0;font-size:16px;min-height:50px}
.stone-search input:focus{border-color:var(--ink)}
.stone-search svg{color:var(--ink)}
.stone-select{border:1px solid var(--ink);border-radius:0;min-height:50px;color:var(--ink)}
.stone-select:focus{border-color:var(--ink)}
.stone-count{color:var(--body);font-size:15px}
.chip{
  border:1px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink);
  font-weight:600;font-size:15px;min-width:44px;min-height:44px;
}
.chip:hover{border-color:var(--ink);background:var(--paper-3)}
.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.load-more{border:1px solid var(--ink);border-radius:0;background:var(--terra);border-color:var(--terra);color:var(--cream);font-size:16px;font-weight:600;min-height:52px}
.load-more:hover{background:var(--terra-deep);border-color:var(--terra-deep);color:var(--cream)}
.stone-swatch{background:var(--paper-3)}
.stone-swatch .code{background:var(--ink);color:var(--cream);border-radius:0;top:0;left:0;padding:6px 10px;font-size:14px}
.stone-swatch.has-photo::after{border-radius:0}
.stone-name{font-size:17px;font-weight:700;color:var(--ink)}
.stone-brand{color:var(--muted);font-size:15px}
.stone-cta,.stone-pick{border-radius:0}
.stone-empty{color:var(--body)}
.brand-note{color:var(--body);font-size:16px}
.brand-note b{color:var(--ink)}
.fam-dir-card .fd-name{font-family:var(--sans);font-stretch:100%;font-size:22px;font-weight:700;line-height:1.15}
.fam-dir-card .fd-count{color:var(--ink);font-weight:600;font-size:16px}
.fam-dir-card .fd-colours{color:var(--body);font-size:15px}
.fam-dir-card .fd-go{color:var(--terra-text);font-weight:600;font-size:16px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.fam-dir-note{color:var(--body);font-size:16px}
.fam-dir-note b{color:var(--ink)}
.to-top{border-radius:0;background:var(--ink);color:var(--cream);box-shadow:none;border:1px solid var(--cream);bottom:calc(84px + env(safe-area-inset-bottom))}
.to-top:hover{background:var(--terra-deep)}
@media(min-width:761px) and (max-width:1023px){.to-top{bottom:90px}}
@media(min-width:1024px){.to-top{bottom:24px}}
.lightbox .lb-pick,.lightbox .lb-cta{background:var(--terra);border:1px solid var(--cream-3);color:var(--cream);border-radius:0}
.lightbox .lb-pick:hover,.lightbox .lb-cta:hover{background:var(--terra-deep);border-color:var(--cream);color:var(--cream)}
.lightbox img{border-radius:0;box-shadow:none}
.lightbox .lb-code{font-family:var(--sans);border-radius:0;background:var(--cream)}
.lightbox .lb-mat{color:var(--cream-2)}
.picks-tray{background:var(--paper);border-top:var(--hair);box-shadow:none}
.pt-chip{background:var(--paper-2);border:var(--hair);border-radius:0}
.pt-chip img,.pt-chip .pt-dot{border-radius:0}
.pt-chip .pt-x{border-radius:0;background:var(--paper-3)}
.pt-clear{color:var(--muted);min-height:44px;min-width:44px}
.pt-hint{color:var(--ink)}

/* stones search: on a phone the search and the colour filter share one row (the pinned toolbar was
   three rows, about 184px, a quarter of the screen). The placeholder is short so it fits at 320. */
@media(max-width:560px){
  .toolbar-top{gap:8px}
  .stone-search{flex:1 1 0;min-width:0}
  .stone-search input{padding:12px 6px 12px 34px;font-size:16px}
  .stone-search svg{left:11px;width:16px;height:16px}
  .stone-select{flex:0 0 118px;padding:12px 8px}
}
/* desktop: the eleven material chips fit on one row at 1280 */
@media(min-width:1024px){.mat-chips{gap:6px}.mat-chips .chip{padding:9px 11px}}

/* (the stone card's pick toggle and quote link are defined in "stone catalogue" at the end of this file) */

/* ---------- partner-city hub pieces (Astro-scoped markup) ---------- */
.hub-card .tick.no,#covers .hub-card .tick.no{background:var(--ink);color:var(--cream)}
.hub-note{color:var(--body)}

/* ---------- hero button rows on a phone: primary full width, the rest a 2-up row (at most 2 rows) ---------- */
@media(max-width:760px){
  .hero-ctas>.btn{flex:1 1 calc(50% - 6px);min-width:0;padding:10px 10px;font-size:15px;min-height:48px}
  .hero-ctas>.btn:first-child{flex:1 1 100%;font-size:17px;min-height:54px;padding:12px 20px}
  .hero-ctas>.btn:nth-child(2):last-child{flex:1 1 100%}
  /* the phone number never breaks mid number: it keeps its natural width, the other button takes the rest */
  .hero-ctas>.btn:nth-child(3)[href^="tel:"]{flex:0 0 158px;min-width:158px}
  .page-hero .hero-ctas{margin-top:var(--s4)}
}
@media(max-width:344px){
  .hero-ctas>.btn:nth-child(3)[href^="tel:"]{flex:1 1 0;min-width:0}
}

/* ---------- readable floor: no body copy under 16px, one family on every control ---------- */
button,input,select,textarea{font-family:var(--sans)}
main p.small,main p.table-note,main p.form-note,main p.pricing-byline,main p.viz-fine,main p.area-small{font-size:16px}
main p.lead[style]{font-size:16px!important}
#visualizer p.viz-fine,#pricing p.pricing-byline{font-size:16px}

/* ---------- utilities ---------- */
.bg-white{background:var(--card)}
.bg-lime2{background:var(--paper-2)}
.center .hero-ctas,.center .areas{justify-content:center}

/* ---------- motion: everything that moves lives here ---------- */
.hero-copy,.hero-media{animation:none}
.hero-viz-badge .dot,.pill-note .dot,.badge .dot{animation:none}
.cta-nudge{animation:none}
/* the pulse ring is decorative and mis-renders (stray full-width rules at 375, a floating rectangle at 1280): off everywhere */
.cta-nudge::after{content:none;display:none;animation:none}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .main-nav a,.card-link,input,select,textarea,.btn,.card,.spotlight,.stone-card,.fam-dir-card,.grv .grv-btn,.material-card{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
  .gallery-grid img{transition:transform .3s ease}
  .gallery-grid a:hover img{transform:scale(1.03)}
  .hero-copy{animation:bdrkFade .6s ease both}
  .hero-media{animation:bdrkFade .8s ease both}
  /* one quiet 3px lift, no ring */
  @keyframes bdrkNudge{0%,100%{transform:none}35%{transform:translateY(-3px)}65%{transform:none}}
  .cta-nudge{animation:bdrkNudge 1.05s ease-out}
}

/* the reviews widget injects its own family (reviews.js); keep it on the system face */
.grv{font-family:var(--sans)}

/* ---------- pages the concept boards never showed: the price estimator and the research pages ----------
   Their CSS is inline in <head> (is:inline, unscoped), so these win on order at equal specificity. */
.est-lg,.est-kicker,.est-live-lab,.res-note-h,.res-card .res-card-foot{
  font-family:var(--sans);letter-spacing:0;text-transform:none;font-weight:700;
}
.est-lg{font-size:16px;color:var(--ink);margin-bottom:10px}
.est-kicker{font-size:15px;color:var(--cream)}
.est-live-lab{font-size:14px;color:var(--cream)}
.res-note-h{font-size:16px}
.res-card .res-card-foot{font-size:15px}
.est-form,.est-static{background:var(--card);border:var(--hair);border-radius:0}
.est-opt span{border-radius:0;background:var(--paper-2);border:1px solid var(--paper-2);font-size:15px;color:var(--ink)}
.est-opt small{font-size:14px;color:var(--muted)}
.est-opt input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.est-custom label{font-size:15px;color:var(--ink)}
.est-custom input{border-radius:0}
.est-help{font-size:16px;color:var(--body)}
.est-for,.est-basis,.est-attr{font-size:15px}
.est-caveats li{font-size:15px;color:var(--cream);background:rgba(251,247,240,.06);border-left:2px solid var(--cream-2);border-radius:0}
.est-honesty{background:transparent;border:1px solid rgba(251,247,240,.4);border-radius:0}
.est-honesty p{font-size:15px;color:var(--cream)}
.mkt-src-note{font-size:15px}

/* ---------- stone family (colour) pages: the colour strip, the stone cards, the show-all toggle ---------- */

/* The colour strip under the hero lead: one swatch per colour section, each a jump link.
   Under 720px it is five to a row (ten colours fit in two rows); from 720px it fills the row. */
.fam-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:var(--s5)}
.fam-strip a,.page-hero .fam-strip a{display:block;min-width:0;color:var(--cream);text-decoration:none}
.fam-strip .fs-sw{display:block;position:relative;aspect-ratio:1 / 1;overflow:hidden;border:1px solid rgba(251,247,240,.28);background:var(--ink-4)}
.fam-strip .fs-flat{background:var(--tint)}
.fam-strip .fs-sw img{display:block;width:100%;height:100%;object-fit:cover}
.fam-strip .fs-name{display:block;margin-top:6px;font-size:15px;font-weight:600;line-height:1.2;color:var(--cream);overflow-wrap:break-word}
.fam-strip .fs-n{display:block;margin-top:2px;font-size:14px;font-weight:500;line-height:1.2;color:rgba(251,247,240,.8)}
.fam-strip a:hover .fs-sw{border-color:var(--cream)}
.fam-strip a:hover .fs-name{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
@media(min-width:720px){
  .fam-strip{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}
}
/* Balanced rows: --n is the number of tiles, --k how many 100px tiles fit the page column. Rows are as even as they
   can be (10 tiles at 8 fit become 5 + 5, never 8 + 2) and the strip stops growing at 126px a tile. Browsers without
   round() keep the plain fill above. */
@supports (width:round(up,1px,1px)){
  @media(min-width:720px){
    .fam-strip{--k:6;--rows:round(up,calc(var(--n) / var(--k)),1);--cols:round(up,calc(var(--n) / var(--rows)),1);
      grid-template-columns:repeat(var(--cols),minmax(0,1fr));max-width:calc(var(--cols) * 126px + (var(--cols) - 1) * 12px)}
  }
  @media(min-width:832px){.fam-strip{--k:7}}
  @media(min-width:944px){.fam-strip{--k:8}}
  @media(min-width:1056px){.fam-strip{--k:9}}
  @media(min-width:1168px){.fam-strip{--k:10}}
}

/* The colour sections start right under the section head, or under the notes that follow it. */
.fam-blocks > .colour-block:first-child{margin-top:0}
.table-note + .fam-blocks{margin-top:32px}

/* The stone is the card and the card is the link: one hairline box, no button inside it. */
.fam-card{background:var(--card);border:var(--hair);border-radius:0;box-shadow:none;color:var(--ink);text-decoration:none}
.fam-card:hover{border-color:var(--ink)}
.fam-card:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
.fam-swatch{background:var(--paper-3)}
.fam-name{font-size:17px;font-weight:700;hyphens:auto}
.fam-sub{font-size:15px;color:var(--muted);font-weight:500}
.fam-go{
  margin-top:auto;padding-top:10px;font-size:15px;font-weight:600;color:var(--terra-text);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
}
.fam-card:hover .fam-go{color:var(--ink);text-decoration-color:var(--terra)}
/* A two-up phone card has about 129px of text width, so "this stone" wrapped the arrow onto its own line. */
@media (max-width:720px){.fam-go-x{display:none}}

/* Show all: the stones past the photo cards, closed until asked for. */
.fam-more{margin-top:16px}
.fam-more > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:48px;padding:10px 16px;background:var(--card);border:1px solid var(--ink);
  font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.3;color:var(--ink);
}
.fam-more > summary::-webkit-details-marker{display:none}
.fam-more > summary::after{
  content:"+";font-family:var(--sans);font-weight:500;font-size:30px;line-height:1;color:var(--ink);
  flex:none;width:32px;text-align:center;
}
.fam-more[open] > summary::after{content:"\00D7"}
.fam-more > summary:hover{color:var(--terra-text)}
.fam-more > :not(summary){margin-top:16px}
.fam-grid.fam-grid-sm{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(min-width:720px){
  .fam-grid.fam-grid-sm{grid-template-columns:repeat(6,minmax(0,1fr))}
}
.fam-card-sm .fam-body{padding:9px 10px 11px;gap:2px}
.fam-card-sm .fam-name{font-size:15px;font-weight:600;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
/* "Worth knowing" is several lead paragraphs in a row; .lead carries no margin of its own. */
.fam-know .lead + .lead{margin-top:var(--s4)}
.fam-card-sm .fam-sub{font-size:14px;font-weight:400}
.fam-nophoto{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.fam-grid-sm + .fam-nophoto{margin-top:28px}
.fam-names{list-style:none;margin:10px 0 0;padding:0;column-width:210px;column-gap:26px}
.fam-names li{font-size:15px;font-weight:400;line-height:1.6;color:var(--ink);break-inside:avoid}
.fam-nophoto + .fam-names{margin-top:10px}
.fam-code{color:var(--muted)}
/* A colour section with no photo at all has nothing to hide: its names and codes sit open. */
.fam-open{margin-top:20px}
.fam-open h3{margin:0;font-size:17px}

/* The closing band's second action: a plain text link, not a second button. */
.fam-textlink{
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-size:17px;font-weight:600;
  color:var(--terra-text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
}
.fam-textlink:hover{color:var(--ink);text-decoration-color:var(--terra)}

.fam-links a{min-height:44px;border:1px solid var(--ink);border-radius:0;background:var(--card);font-size:15px;font-weight:600}
.fam-links a:hover{border-color:var(--terra);color:var(--terra-text)}
.colour-block .colour-meta{color:var(--body);font-size:16px;font-weight:500}
.legal .updated{color:var(--muted);font-size:15px}

/* ---------- tap targets: standalone links reach 44px without moving anything ---------- */
/* The padding grows the hit box to 44px tall; the equal negative margin hands the space back,
   so the layout does not shift. 1lh is the link's own line height; a browser without lh drops
   both declarations and keeps the old box. The extra 1px each side covers sub-pixel line heights,
   which otherwise land the box at 43.8px. */
.card h3 > a,
.material-card h3 > a,
.material-card p > a:only-child,
.trust-bar span > a,
.price-table td > a:only-child,
main li > a[href^="tel:"],
main li > a[href^="mailto:"]{
  display:inline-block;
  padding-block:max(0px, calc((44px - 1lh) / 2 + 1px));
  margin-block:min(0px, calc((1lh - 44px) / 2 - 1px));
}
/* A table wide enough to scroll sideways is a keyboard stop (tabindex in the markup); show it. */
.table-scroll:focus-visible{outline:3px solid var(--terra);outline-offset:3px}

/* ---------- article template: hero photo, byline, captions, phone-width tables ---------- */

/* Hero photo. Every article leads with its own finished install.
   - Under 761px it is a full-bleed band directly under the site header, above the breadcrumb and
     the headline, 3:2, no border: a phone's first screen shows the stone before it shows any text.
     The wrap turns into a column so the figure can move to the top without touching the source order.
   - 761 to 1023px it follows the buttons at content width, so it can never push the primary button down.
   - From 1024px the hero is two columns: text left, the photo right, spanning every text row.
   Each hero sets its own crop in the img's style: --pos (phone and tablet focal point), --pos-d (desktop
   focal point) and --ar-d (desktop aspect ratio). The band stays ink, the photo takes square corners. */
.page-hero .hero-photo{margin:var(--s5) 0 0}
.page-hero .hero-photo img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:var(--pos,50% 50%);
  border:var(--hair);border-radius:0;
}
.page-hero .hero-photo figcaption{margin-top:var(--s2);font-size:15px;line-height:1.4;color:var(--cream-3)}
@media(max-width:760px){
  .page-hero:has(.hero-photo){padding-top:0}
  .page-hero:has(.hero-photo) .wrap{display:flex;flex-direction:column}
  .page-hero .hero-photo{order:-1;margin:0 calc(var(--wrap-x) * -1) var(--s2)}
  .page-hero .hero-photo img{aspect-ratio:3/2;border:0}
}
@media(min-width:1024px){
  .page-hero:has(.hero-photo) .wrap{
    display:grid;
    grid-template-columns:minmax(0,11fr) minmax(0,9fr);
    /* five text rows size to their content; the last row takes whatever height the photo needs */
    grid-template-rows:repeat(5,auto) 1fr;
    column-gap:clamp(40px,5vw,72px);
    align-items:start;
  }
  .page-hero:has(.hero-photo) .wrap > *{grid-column:1}
  .page-hero:has(.hero-photo) .wrap > .hero-photo{grid-column:2;grid-row:1 / -1;margin:0}
  .page-hero:has(.hero-photo) .hero-photo img{aspect-ratio:var(--ar-d,4/5);object-position:var(--pos-d,50% 50%)}
  .page-hero:has(.hero-photo) h1{font-size:clamp(40px,4.7vw,64px)}
}

/* Hero actions: one filled button ("Get my free quote") and one quiet text link beside it. The link is
   underlined, cream on the ink band, with the camera glyph, and 44px tall. The dark pricing band follows
   the same rule: one filled button, every other action a quiet link. */
body.page-article :is(.page-hero,.band-dark) .hero-ctas{align-items:center;gap:var(--s2) var(--s5)}
body.page-article :is(.page-hero,.band-dark) .hero-link{
  display:inline-flex;align-items:center;gap:.55em;min-height:44px;min-width:44px;padding:0;
  font-size:16px;font-weight:600;line-height:1.25;color:var(--cream);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--cream-3);
}
body.page-article :is(.page-hero,.band-dark) .hero-link:hover{text-decoration-color:var(--cream)}
body.page-article :is(.page-hero,.band-dark) .hero-link .ph{width:1.25em;height:1.25em;flex:none;fill:currentColor}
@media(max-width:760px){
  .page-hero:has(.hero-photo) .crumbs{margin-top:var(--s1)}
  body.page-article :is(.page-hero,.band-dark) .hero-ctas>.hero-link{flex:1 1 100%;justify-content:center}
}

/* Byline: who stands behind the page, and where the rules are. No date, no person. */
.page-hero .byline{margin:var(--s4) 0 0;font-size:15px;line-height:1.45;color:var(--cream-2)}
.page-hero .byline a{
  display:inline-block;
  padding-block:max(0px, calc((44px - 1lh) / 2 + 1px));
  margin-block:min(0px, calc((1lh - 44px) / 2 - 1px));
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
@media(min-width:1024px){.page-hero .byline{margin-top:var(--s5)}}

/* A captioned photo inside a split: the figure is the grid cell, the caption sits 8px under the image. */
.split-fig{margin:0}
.split-fig figcaption{margin-top:var(--s2);font-size:15px;line-height:1.4;color:var(--muted)}

/* Tables on a phone. */
@media(max-width:560px){
  /* A real price table (name, description, price) stacks: name and price on the first line,
     the description full width under them. Nothing scrolls sideways, so the column layout is not needed. */
  .price-table.stack,.price-table.stack thead,.price-table.stack tbody{display:block;width:100%}
  .price-table.stack tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4);row-gap:4px;
    padding:var(--s3) 12px;border-bottom:var(--hair);
  }
  .price-table.stack tbody tr:last-child{border-bottom:0}
  .price-table.stack tbody tr:hover{background:none}
  .price-table.stack thead tr{background:var(--paper-2);border-bottom:1px solid var(--ink)}
  .price-table.stack th,.price-table.stack td{display:block;padding:0;border:0;background:none}
  .price-table.stack tr > :first-child{grid-column:1;grid-row:1}
  .price-table.stack tr > :last-child{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
  .price-table.stack tr > :nth-child(2):not(:last-child){grid-column:1 / -1;grid-row:2}

  /* Every other table keeps its columns and scrolls. The first column stays put with a solid
     background, and a shadow on the right edge says there is more (it fades once you reach the end).
     The scroll box owns the card colour so its background layers show through the table. */
  .table-scroll:has(> .price-table:not(.stack)){
    background:
      linear-gradient(to left, var(--card), var(--card)) right center / 16px 100% no-repeat local,
      linear-gradient(to left, color-mix(in srgb, var(--ink) 28%, transparent), transparent) right center / 14px 100% no-repeat scroll;
    background-color:var(--card);
  }
  /* style.css sets overflow:hidden on the table, which would make the table (not the scroll box)
     the sticky container and pin nothing; separate borders keep each cell's rule attached to its cell */
  .table-scroll > .price-table:not(.stack){background:transparent;border-collapse:separate;border-spacing:0;overflow:visible}
  .price-table:not(.stack) th:first-child,.price-table:not(.stack) td:first-child{
    position:sticky;left:0;z-index:1;box-shadow:inset -1px 0 0 var(--line);
  }
  .price-table:not(.stack) td:first-child{background:var(--card)}
  /* the desktop rule that keeps the last column on one line clips it on a phone */
  .price-table:not(.stack) th:last-child,.price-table:not(.stack) td:last-child{white-space:normal}
}

/* ============================================================
   Article template, pass 2 (everything below is scoped to body.page-article, so no other page moves).
   1. One ground. The page is paper from hero to footer: no alternating greys, sections are told apart by
      space and a hairline. The single exception is one .band-dark section (ink, cream type).
   2. One reading axis. At 1024px and up section heads, intros, the FAQ, notes and the closing call to
      action sit on one centred 720px column, and a block's eyebrow, heading and intro share one alignment.
      Grids, tables and photo rows stay full width.
   3. Runs of three or more cards become a divided list on a phone.
   4. One paragraph size and rhythm.
   ============================================================ */

/* ---- 1. one ground ---- */
body.page-article .trust-bar,
body.page-article .process,
body.page-article .stat-strip,
body.page-article .quote-section,
body.page-article .mkt{background:var(--paper)}
body.page-article .trust-bar{border-bottom:var(--hair)}
body.page-article main > section:not(.page-hero):not(.quote-section){padding-block:clamp(48px,6vw,88px)}
/* a hairline between two plain sections; a band, the closing block and the hero bring their own edge */
body.page-article main > section:not(.page-hero):not(.band-dark):not(.quote-section) + section:not(.band-dark):not(.quote-section){
  border-top:var(--hair);
}

/* ---- the one dark band: ink ground, cream type, every edge at 9.4:1 or better ---- */
body.page-article .band-dark{background:var(--ink);color:var(--cream-2);border-top:0;border-bottom:0}
body.page-article .band-dark .section-head h2,
body.page-article .band-dark .section-head .kicker{color:var(--cream)}
body.page-article .band-dark .section-head .lead,
body.page-article .band-dark .table-note{color:var(--cream-2)}
body.page-article .band-dark .kicker::before{background:var(--cream-3)}
body.page-article .band-dark .section-head a,
body.page-article .band-dark .table-note a{color:var(--cream);text-decoration-color:var(--cream-3)}
body.page-article .band-dark .section-head a:hover,
body.page-article .band-dark .table-note a:hover{color:var(--cream);text-decoration-color:var(--cream)}
body.page-article .band-dark :focus-visible{outline-color:var(--cream)}
body.page-article .band-dark .btn-gold{border-color:var(--cream-3)}
body.page-article .band-dark .btn-dark,
body.page-article .band-dark .btn-outline,
body.page-article .band-dark .btn-outline-dark{background:transparent;border-color:var(--cream);color:var(--cream)}
body.page-article .band-dark .btn-dark:hover,
body.page-article .band-dark .btn-outline:hover,
body.page-article .band-dark .btn-outline-dark:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
/* a price table on the band is an ink table: cream figures, cream-3 rules */
body.page-article .band-dark .price-table{background:transparent;border:1px solid var(--cream-3)}
body.page-article .band-dark .price-table th{
  background:transparent;color:var(--cream);border-bottom:1px solid var(--cream);
}
body.page-article .band-dark .price-table th,
body.page-article .band-dark .price-table td{border-bottom:1px solid var(--cream-3)}
body.page-article .band-dark .price-table tbody tr:last-child td{border-bottom:0}
body.page-article .band-dark .price-table td{color:var(--cream-2)}
body.page-article .band-dark .price-table td:first-child{color:var(--cream)}
body.page-article .band-dark .price-table tbody tr:hover{background:rgba(251,247,240,.07)}
body.page-article .band-dark .price-table a{color:var(--cream);text-decoration-color:var(--cream-3)}
/* the estimator's result panel is ink too: a cream-3 edge keeps it a panel on the band */
body.page-article .band-dark .est-result{border:1px solid var(--cream-3)}
body.page-article .band-dark .est-attr{border-top-color:var(--cream-3)}
@media(max-width:560px){
  body.page-article .band-dark .price-table.stack th,
  body.page-article .band-dark .price-table.stack td{border:0;background:none}
  body.page-article .band-dark .price-table.stack tr{border-bottom:1px solid var(--cream-3)}
  body.page-article .band-dark .price-table.stack thead tr{background:transparent;border-bottom:1px solid var(--cream)}
  body.page-article .band-dark .table-scroll:has(> .price-table:not(.stack)){
    background:
      linear-gradient(to left, var(--ink), var(--ink)) right center / 16px 100% no-repeat local,
      linear-gradient(to left, rgba(251,247,240,.28), transparent) right center / 14px 100% no-repeat scroll;
    background-color:var(--ink);
  }
  body.page-article .band-dark .price-table:not(.stack) th:first-child,
  body.page-article .band-dark .price-table:not(.stack) td:first-child{
    background:var(--ink);box-shadow:inset -1px 0 0 var(--cream-3);
  }
}

/* ---- 2. one reading axis ---- */
body.page-article .center .kicker{justify-content:center}
body.page-article .quote-section > .wrap.center{max-width:780px}
@media(min-width:1024px){
  body.page-article main > section:not(.page-hero) > .wrap > .section-head{
    max-width:720px;margin-left:auto;margin-right:auto;text-align:center;
  }
  body.page-article main > section:not(.page-hero) > .wrap > .section-head .kicker{justify-content:center}
  body.page-article main > section:not(.page-hero) > .wrap > .section-head .lead{margin-left:auto;margin-right:auto}
  /* a head over running text (a paragraph, an FAQ, a research write-up) reads on the text's own left edge:
     same 720px column, same auto centring of the block, left-aligned inside it. A head over a table, a
     grid or cards stays centred. */
  body.page-article main > section:not(.page-hero) > .wrap > .section-head:has(+ :is(.prose-block,.faq,.res-prose)){text-align:left}
  body.page-article main > section:not(.page-hero) > .wrap > .section-head:has(+ :is(.prose-block,.faq,.res-prose)) .kicker{justify-content:flex-start}
  body.page-article main > section:not(.page-hero) > .wrap > .section-head:has(+ :is(.prose-block,.faq,.res-prose)) .lead{margin-left:0}
  body.page-article main > section:not(.page-hero) > .wrap:has(> .section-head + :is(.prose-block,.faq,.res-prose)) :is(.prose-cta,.hero-ctas){
    justify-content:flex-start;text-align:left;
  }
  body.page-article main > section:not(.page-hero) > .wrap:has(> .section-head + :is(.prose-block,.faq,.res-prose)) > .hero-ctas{
    max-width:720px;margin-left:auto;margin-right:auto;
  }
  body.page-article main > section:not(.page-hero) > .wrap > :is(.faq,.table-note,.prose-block,p.mt-2,p.mt-3){
    max-width:720px;margin-left:auto;margin-right:auto;
  }
  body.page-article main > section:not(.page-hero) > .wrap > .hero-ctas{justify-content:center}
  /* the research pages keep their prose and caveats on the same axis as their centred heads */
  body.page-article :is(.res-prose,.res-note,.res-method,.res-fig){max-width:720px;margin-left:auto;margin-right:auto}
}

/* ---- 3. a phone gets a divided list, not a stack of boxes ---- */
@media(max-width:760px){
  body.page-article .grid:has(> .material-card:nth-child(3)),
  body.page-article .grid:has(> .card:nth-child(3)){gap:0}
  body.page-article .grid:has(> .material-card:nth-child(3)) > .material-card,
  body.page-article .grid:has(> .card:nth-child(3)) > .card{
    background:none;border:0;border-radius:0;padding:16px 0;
  }
  body.page-article .grid:has(> .material-card:nth-child(3)) > .material-card:hover,
  body.page-article .grid:has(> .card:nth-child(3)) > .card:hover{background:none;border-color:transparent}
  body.page-article .grid:has(> .material-card:nth-child(3)) > .material-card + .material-card,
  body.page-article .grid:has(> .card:nth-child(3)) > .card + .card,
  body.page-article .grid:has(> .material-card:nth-child(3)) > .material-card + .material-card:hover,
  body.page-article .grid:has(> .card:nth-child(3)) > .card + .card:hover{border-top:var(--hair)}
  body.page-article .grid:has(> .card:nth-child(3)) > .card > .card-body{padding:16px 0 0}
  body.page-article .grid:has(> .card:nth-child(3)) > .card .card-img{margin-bottom:0}
}

/* ---- 4. one paragraph size, one rhythm ---- */
body.page-article main section > .wrap > :is(p:not([class]),p.mt-2,p.mt-3),
body.page-article main section .split > div > :is(p:not([class]),p.mt-2,p.mt-3),
body.page-article .prose-block > p{
  font-size:17px;line-height:1.6;margin-bottom:1em;
}
/* a paragraph that follows a list or a grid is a new thought: give it room, and never break a phone number */
body.page-article main :is(ul,ol,.grid,.table-scroll) + :is(p,.table-note){margin-top:var(--s5)}
body.page-article a[href^="tel:"]{white-space:nowrap}
body.page-article .prose-block{max-width:720px}
body.page-article .prose-block .prose-cta{margin:var(--s5) 0 0}
@media(min-width:1024px){body.page-article .prose-block{margin-left:auto;margin-right:auto}}

/* ---- tap targets: a link standing alone in its paragraph or list item, and the links in short notes ----
   Padding on an inline box widens the hit area to 44px and moves nothing: the line, the wrap and the
   underline stay exactly where they were. (A flex box here would break a link out of its sentence.) */
body.page-article main :is(p,li) > a:only-child:not(.btn):not(.hero-link),
body.page-article main :is(.table-note,.form-note,.small) a,
body.page-article .quote-section .lead a{
  display:inline;padding-block:15px;margin-block:0;
}
/* the research "exact pattern" disclosure: a 44px hit area with no change to where anything sits */
body.page-article .res-method summary{padding-block:12px;margin-block:-12px}

/* ============================================================
   Stone catalogue (stones.html): the stone is the card.
   Supersedes every earlier .stone-* card rule in this file and in the page's inline style.
   - The swatch is square and full card width. Name, then material and code, then one text link.
   - "Add to my picks" is a 44px icon toggle over the swatch's top right corner (the zoom hint
     is bottom left). The only saturated colour in the grid is the stones themselves: no filled
     terracotta bar on any card.
   - A stone without a photo gets a flat tile in its colour family's base colour and a plain
     "Photo on request" label. Nothing is drawn on it: a generated pattern beside a real
     stone's name and code would be an invented picture of that stone.
   - .page-hero-compact is the opt-in short hero for catalogue pages: crumbs, h1, one sentence,
     buttons at .btn size, so the first swatch is on the first screen.
   ============================================================ */
.page-hero-compact{padding:24px 0}
.page-hero-compact .crumbs{margin-bottom:var(--s1)}
.page-hero-compact h1{font-size:clamp(34px,4.6vw,56px)}
.page-hero-compact .lead{margin-top:var(--s3);font-size:clamp(16.5px,1.5vw,19px)}
.page-hero-compact .hero-ctas{margin-top:var(--s4);gap:var(--s2) var(--s3)}
.page-hero-compact .hero-ctas>.btn{flex:0 1 auto;min-height:48px;padding:10px 20px;font-size:16px;white-space:nowrap}
@media(max-width:760px){
  /* two rows: the primary button across the top, the other two side by side under it.
     Their labels may wrap to two lines, so the vertical padding is trimmed to keep both rows at 48px. */
  .page-hero-compact .hero-ctas>.btn{flex:1 1 0;min-width:0;padding:6px 10px;font-size:15px;white-space:normal;text-align:center}
  .page-hero-compact .hero-ctas>.btn:first-child{flex:1 1 100%;padding:10px 12px}
}
@media(max-width:560px){
  .page-hero-compact{padding:12px 0 16px}
  .page-hero-compact h1{font-size:30px;font-stretch:64%}
  .page-hero-compact .lead{margin-top:var(--s2)}
}

.stone-card{
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  transform:none;content-visibility:auto;contain-intrinsic-size:auto 400px;
}
.stone-swatch{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;background:var(--paper-3)}
.stone-swatch img{display:block;width:100%;height:100%;object-fit:cover}
.stone-swatch .code{
  position:absolute;top:0;left:0;max-width:calc(100% - 64px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:0;line-height:1.3;padding:6px 10px;
}
.stone-swatch.is-tile{display:flex;align-items:center;justify-content:center}
.stone-swatch .tile-note{
  max-width:calc(100% - 16px);padding:6px 10px;background:var(--card);border:var(--hair);
  color:var(--ink);font-size:15px;font-weight:600;line-height:1.25;text-align:center;
}

.stone-card .stone-pick{
  position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;min-height:44px;margin:0;padding:0;gap:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);color:var(--ink);border:1px solid var(--ink);border-radius:0;
  font-weight:600;line-height:1;
}
.stone-card .stone-pick .sp-ico{font-size:24px;line-height:1;font-weight:600}
.stone-card .stone-pick:hover{background:var(--paper-3);color:var(--ink);border-color:var(--ink)}
/* picked: same card colour and ink glyph, ticked, with the hairline doubled so it reads from a distance */
.stone-card .stone-pick.on{background:var(--card);color:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.stone-card .sp-txt{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.stone-body{display:flex;flex-direction:column;flex:1;gap:2px;padding:12px 12px 4px}
.stone-name{
  font-size:17px;font-weight:700;line-height:1.2;color:var(--ink);
  overflow-wrap:normal;word-break:normal;hyphens:manual;
}
.stone-brand{font-size:15px;font-weight:400;line-height:1.35;color:var(--muted)}
.stone-cta{
  align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:.3em;
  min-height:44px;padding:0;background:none;border:0;border-radius:0;
  color:var(--ink);font-size:15px;font-weight:600;line-height:1.25;text-decoration:none;
}
.stone-cta:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.stone-cta .arr{white-space:nowrap}
/* a card is a little over its own width tall; the skipped-card estimate follows the column count so the
   scrollbar does not jump as rows come into view */
@media(max-width:1100px){.stone-card{contain-intrinsic-size:auto 350px}}
@media(max-width:760px){.stone-card{contain-intrinsic-size:auto 290px}}
/* a 320px screen leaves 108px for a name: the longest single words ("Michelangelo") need 16px to stay whole */
@media(max-width:344px){
  .stone-body{padding-inline:8px}
  .stone-name{font-size:16px}
}

/* ============================================================
   Gallery (everything below is scoped to body.page-gallery, so no other page moves).

   Hero: the photo comes first.
   - Under 761px the photo is a full-bleed 1:1 band directly under the header, and the crumbs, headline,
     one sentence and the buttons follow on the ink band. Same order as the article template.
   - From 761px the photo is a full-bleed band about 70vh tall (480px to 720px) and the text sits in a
     solid ink panel laid over its bottom-left corner, hanging below the photo onto the page. A solid
     panel, not text on the photo, so the contrast is exact.
   The photo is a <picture>: a portrait island on phones, a landscape island from 761px. Each sets its
   own crop in --pos (phone) and --pos-w (wide) on the figure.

   Grid: each group opens on a featured tile (full width under 1024px, 2 columns by 2 rows from 1024px),
   then square crops: 2 columns under 1024px, 3 from 1024px. The counts per group (9, 3, 3) are chosen in
   the page so no row is left part-empty at 375px or at 1280px.
   ============================================================ */
body.page-gallery{--gh-h:clamp(480px,70vh,720px);--gh-hang:88px}

body.page-gallery .gal-hero{padding:0 0 28px}
body.page-gallery .gal-hero-photo{position:relative;margin:0;aspect-ratio:1/1;background:var(--ink-3);overflow:hidden}
body.page-gallery .gal-hero-photo picture{position:absolute;inset:0;display:block}
body.page-gallery .gal-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);border:0}
body.page-gallery .gal-hero .crumbs{margin:var(--s1) 0 var(--s2)}

/* One filled button and one quiet text link. The link is underlined, cream on the ink, with the camera
   glyph, and 44px tall. */
body.page-gallery .gal-hero .hero-ctas{align-items:center;gap:var(--s2) var(--s5)}
body.page-gallery .gal-hero .hero-link{
  display:inline-flex;align-items:center;gap:.55em;min-height:44px;min-width:44px;padding:0;
  font-size:16px;font-weight:600;line-height:1.25;color:var(--cream);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--cream-3);
}
body.page-gallery .gal-hero .hero-link:hover{text-decoration-color:var(--cream)}
body.page-gallery .gal-hero .hero-link .ph{width:1.25em;height:1.25em;flex:none;fill:currentColor}
@media(max-width:760px){
  body.page-gallery .gal-hero .hero-ctas>.hero-link{flex:1 1 100%;justify-content:center}
}

@media(min-width:761px){
  body.page-gallery .gal-hero{display:grid;background:transparent;padding:0 0 var(--gh-hang)}
  body.page-gallery .gal-hero-photo{grid-area:1 / 1;aspect-ratio:auto;height:var(--gh-h)}
  body.page-gallery .gal-hero-photo img{object-position:var(--pos-w,50% 50%)}
  /* the wrap shares the photo's grid cell, sits at its bottom edge, and hangs --gh-hang below it */
  body.page-gallery .gal-hero .wrap{
    grid-area:1 / 1;align-self:end;position:relative;width:100%;
    margin:0 auto calc(var(--gh-hang) * -1);
  }
  body.page-gallery .gal-hero-text{
    max-width:640px;background:var(--ink);
    padding:clamp(20px,2.4vw,32px) clamp(28px,3vw,44px) clamp(28px,3vw,40px);
  }
  body.page-gallery .gal-hero .crumbs{margin-top:0}
  body.page-gallery .gal-hero h1{font-size:clamp(40px,4.6vw,60px)}
}

/* The work. */
body.page-gallery .gal-section{padding-top:clamp(40px,5vw,64px)}
body.page-gallery .gal-group + .gal-group{margin-top:clamp(56px,7vw,96px)}
body.page-gallery .gal-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5) var(--s3);
}
body.page-gallery .gal-tile{margin:0;display:flex;flex-direction:column;min-width:0}
body.page-gallery .gal-tile a{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-3);
}
body.page-gallery .gal-tile img{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos,50% 50%);border:0;
}
body.page-gallery .gal-tile figcaption{margin-top:var(--s2);font-size:15px;line-height:1.35;color:var(--body)}
body.page-gallery .gal-tile.is-feature{grid-column:1 / -1}
body.page-gallery .gal-tile.is-feature a{aspect-ratio:4/3}
@media(min-width:761px){
  body.page-gallery .gal-grid{gap:var(--s5) var(--s4)}
  body.page-gallery .gal-tile.is-feature a{aspect-ratio:3/2}
}
@media(min-width:1024px){
  body.page-gallery .gal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.page-gallery .gal-tile.is-feature{grid-column:span 2;grid-row:span 2}
  /* the featured tile takes the height of the two rows beside it; the photo fills what is left above its caption */
  body.page-gallery .gal-tile.is-feature a{aspect-ratio:auto;flex:1 1 auto}
}

/* ---------- city picker (src/components/CityPicker.astro) ----------
   The first-visit dialog, reopened by the footer's "Change city". Slab tokens only. style.css
   zeroes every margin, which would strip the dialog's built-in centring, so it is restored
   here. The backdrop is the ink token at 55%: ::backdrop does not reliably see custom
   properties in every engine we support, so the channels are written out. */
.city-pick{
  position:fixed;inset:0;margin:auto;
  width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;
  padding:var(--s5);border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);
  background:var(--paper);color:var(--ink);
}
/* Blurred as well as dimmed: the forced first-visit picker sits over a page written for the home
   city, and its prices must not be readable before the visitor says which city they are in. */
.city-pick::backdrop{background:rgba(22,22,22,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.city-pick h2{font-size:30px;line-height:1.02;margin:0 var(--s6) var(--s2) 0}
.city-pick-sub{font-size:16px;line-height:1.45;color:var(--body);margin:0 0 var(--s4)}
.city-pick-x{
  position:absolute;top:0;right:0;width:44px;height:44px;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:0;cursor:pointer;
  font:inherit;font-size:28px;line-height:1;color:var(--ink);
}
.city-pick-x:hover{background:var(--paper-2)}
.city-pick-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.city-pick-opt{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s3);align-items:center;
  width:100%;min-height:72px;margin:0;padding:var(--s3) var(--s4);
  background:var(--card);color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;
  font:inherit;border:1px solid var(--line);border-radius:var(--radius);
}
.city-pick-opt:hover,.city-pick-opt:focus-visible{border-color:var(--terra);box-shadow:var(--ring)}
.city-pick-name,.city-pick-areas{grid-column:1;min-width:0}
.city-pick-name{font-size:19px;font-weight:700;line-height:1.2;color:var(--ink)}
.city-pick-areas{font-size:15px;line-height:1.4;color:var(--ink-2);margin-top:4px}
.city-pick-go{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:22px;line-height:1;color:var(--terra-text)}
.city-pick-note{font-size:15px;line-height:1.45;color:var(--muted);margin:var(--s4) 0 0}

/* A button that reads as one of the footer's links: same type, underlined, no chrome. */
.link-btn{
  display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:0;padding:0;
  background:none;border:0;border-radius:0;cursor:pointer;font:inherit;color:inherit;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
}
.site-footer .link-btn{color:var(--cream-2)}
.site-footer .link-btn:hover{color:var(--cream)}

/* City mode (PLANS/city-mode-spec.md). A stored partner-city choice sets data-city on <html>: the
   home city's price blocks and offer lines are hidden, and one price note is printed in their place. */
html[data-city] [data-home-only],html[data-city] [data-home-price]{display:none!important}
.city-price-note{
  margin:var(--s4) 0;padding:var(--s4);
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  font-size:17px;line-height:1.5;
}
.city-price-note a{font-weight:700}
/* The note is a light card, so its link keeps the ink colour even inside a dark hero or band. */
p.city-price-note a:not(.btn){color:var(--ink);text-decoration-color:currentColor}