/* ==========================================================================
   SHRUFFLES INC — wholesale beauty supply
   Palette: white base / warm neutral surface / gold accent / blush secondary
   Type:    Cormorant Garamond (display serif) + Karla (sans)
   ========================================================================== */

:root {
  --bg:        #FFFFFF;
  --surface:   #FAF7F5;
  --surface-2: #F2EDE8;
  --ink:       #1A1A1A;
  --muted:     #6B6B6B;
  --line:      #E5DED7;
  --gold:      #C9A227;
  --gold-deep: #A8871C;
  --blush:     #D98BA0;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --max: 1280px;
  --band: clamp(4.5rem, 9vw, 8rem);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is required, not cosmetic. Every <img> carries width/height
   attributes; without this reset the height attribute applies as a
   presentational hint, and an explicit height makes the browser ignore
   aspect-ratio - so framed images render at full intrinsic height. */
img { max-width: 100%; display: block; height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------ utilities -- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band { padding-block: var(--band); }
.band--surface { background: var(--surface); }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.display {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
}
.display em {
  font-style: italic;
  color: var(--gold-deep);
}

.h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
.h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--muted);
  max-width: 56ch;
}

.muted { color: var(--muted); }
.measure { max-width: 62ch; }
.center { text-align: center; }

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

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

.btn--gold { background: var(--gold); border-color: var(--gold); color: #1A1A1A; }
.btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }

.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.textlink {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}
.textlink:hover { color: var(--gold-deep); border-color: var(--ink); }

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  flex: none;
}
.brand-name {
  font-family: var(--serif);
  font-size: 1.55rem;
  letter-spacing: 0.1em;
  line-height: 1;
}
.brand-suffix {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); }

.nav a {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding-block: 0.4rem;
  position: relative;
  transition: color .2s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .28s ease;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { width: 100%; }

.header-cta { display: flex; align-items: center; gap: 1.25rem; }
.header-phone {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--gold-deep); }
.header-cta .btn { padding: 0.75rem 1.35rem; font-size: 0.68rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: background .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform .28s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .header-cta .btn { display: none; }
  .nav {
    position: fixed;
    inset: 78px 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--pad) 1.75rem;
    transform: translateY(-120%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 24px 40px -28px rgba(0,0,0,.28);
  }
  .nav.is-open { transform: translateY(0); }
  .nav a {
    padding: 1rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--line);
  }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 1.25rem; }
}

/* ------------------------------------------------------------------ hero -- */
.hero { border-bottom: 1px solid var(--line); }

/* full-bleed wrapper — deliberately not .wrap, the hero runs edge to edge */
.hero-full { width: 100%; }

/* Full-bleed grid: the copy panel runs to the left viewport edge and the photo
   runs to the right edge, while the text itself stays aligned to the .wrap
   gutter. Using padding (not percentage margins) keeps this predictable —
   percentage margins on grid items resolve against the grid area, not the page. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  min-height: min(78vh, 720px);
}

.hero-copy {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 6vw, 6rem);
  padding-inline-end: clamp(1.25rem, 4vw, 4.5rem);
  padding-inline-start: max(var(--pad), calc(50vw - var(--max) / 2 + var(--pad)));
}

.hero-copy .display { margin-bottom: 1.4rem; }
.hero-copy .lede { margin-bottom: 2.2rem; }

.hero-media {
  position: relative;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-tag {
  position: absolute;
  left: 0; bottom: 0;
  background: rgba(255,255,255,.93);
  padding: 1rem 1.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-top: 2px solid var(--gold);
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding-inline: var(--pad); order: 2; }
  .hero-media { order: 1; aspect-ratio: 16 / 10; }
}

/* ----------------------------------------------------------- page header -- */
.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3.25rem, 7vw, 6rem);
}
.page-head .display { max-width: 20ch; margin-bottom: 1.3rem; }

.crumbs {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); }
.crumbs span { color: var(--line); margin-inline: 0.5rem; }

/* ------------------------------------------------------------ stat strip -- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------- SIGNATURE: index rows */
.index-list { border-top: 1px solid var(--line); }

.index-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.15fr) 2.5rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  /* isolate so the -1 hover wash stacks behind the row's own content but
     still in front of the section background */
  isolation: isolate;
  transition: padding .35s cubic-bezier(.4,0,.2,1), background-color .35s ease;
}
.index-row::before {
  content: "";
  position: absolute;
  inset: 0 -1.5rem;
  background: #fff;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}
.index-row:hover::before,
.index-row:focus-visible::before { opacity: 1; }
.index-row:hover,
.index-row:focus-visible { padding-inline: 1.5rem; outline: none; }

.index-num {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--line);
  transition: color .35s ease;
}
.index-row:hover .index-num,
.index-row:focus-visible .index-num { color: var(--gold); }

/* these live inside a wrapper span, so they need explicit block display */
.index-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  margin-bottom: 0.35rem;
}
.index-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.index-desc { color: var(--muted); font-size: 0.95rem; }

.index-arrow {
  font-size: 1.3rem;
  color: var(--line);
  justify-self: end;
  transition: color .35s ease, transform .35s ease;
}
.index-row:hover .index-arrow,
.index-row:focus-visible .index-arrow { color: var(--gold); transform: translateX(6px); }

@media (max-width: 760px) {
  .index-row {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.9rem 1.25rem;
    align-items: start;
  }
  .index-desc { grid-column: 2; }
  .index-arrow { display: none; }
}

/* ------------------------------------------------------------ split slab -- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 860px) {
  .split, .split--wide-left { grid-template-columns: 1fr; }
}

.framed {
  position: relative;
  background: var(--surface-2);
}
.framed img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Match the frame to the photo's real shape. object-fit:cover crops whatever
   does not fit, so a square or portrait image in the default 4/3 frame loses
   25-50% of the picture. */
.framed--sq img   { aspect-ratio: 1 / 1; }
.framed--tall img { aspect-ratio: 3 / 4; }
.framed::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201,162,39,.35);
  transform: translate(14px, 14px);
  pointer-events: none;
}
@media (max-width: 560px) { .framed::after { display: none; } }

/* --------------------------------------------------------------- capsules -- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

.card { display: flex; flex-direction: column; }
.card-media {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: 1.5rem;
}
.card-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-media img { transform: scale(1.05); }
.card-media .tagnum {
  position: absolute;
  top: 0; left: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--muted); font-size: 0.95rem; }

/* ---------------------------------------------------------------- gallery -- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: start;
}
.gallery figure { margin: 0; position: relative; overflow: hidden; background: var(--surface-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  padding: 1.5rem 1.25rem 1rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(26,26,26,.72), rgba(26,26,26,0));
}
.gal-a { grid-column: span 1; }
.gal-tall { grid-row: span 2; }
.gal-tall img { aspect-ratio: 3 / 4; }
.gal-a img, .gal-c img { aspect-ratio: 4 / 3; }
.gal-c { grid-column: span 1; }
.gallery .gal-note {
  background: var(--surface-2);
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  min-height: 180px;
}
@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal-tall { grid-row: span 2; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; }
  .gal-tall { grid-row: auto; }
}

/* ------------------------------------------------- tonal field placeholder -- */
.tonal {
  position: relative;
  background:
    linear-gradient(135deg, rgba(201,162,39,.10), rgba(217,139,160,.12) 55%, rgba(242,237,232,.9)),
    var(--surface-2);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line);
  min-height: 220px;
}
.tonal p {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 26ch;
  margin: 0;
}
.tonal--sq { aspect-ratio: 1 / 1; }
.tonal--wide { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------- spec table -- */
.spec { border-top: 1px solid var(--line); }
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.35rem, 2.4vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
}
.spec-row dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.spec-row dd { margin: 0; color: var(--ink); }
.spec-row dd small { display: block; color: var(--muted); font-size: 0.88rem; margin-top: 0.35rem; }
@media (max-width: 640px) {
  .spec-row { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ------------------------------------------------------------------ steps -- */
.steps { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line); }
.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1;
  color: var(--gold);
}
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--muted); max-width: 62ch; }
@media (max-width: 560px) { .step { grid-template-columns: 3rem minmax(0, 1fr); } }

/* -------------------------------------------------------------- checklist -- */
.checklist li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.9rem;
  color: var(--muted);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.85rem; height: 1px;
  background: var(--gold);
}
.checklist li strong { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------- accordion -- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 3rem 1.5rem 0;
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.25;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-deep); }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--gold);
  transition: transform .3s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); padding-bottom: 1.6rem; max-width: 68ch; }

/* ------------------------------------------------------------------- form -- */
.form-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .form-shell { grid-template-columns: 1fr; } }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.field label,
.fieldset-legend {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.field label .req { color: var(--blush); }
.field .hint {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.4rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.95rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.field input:invalid:not(:placeholder-shown) { border-color: var(--blush); }

fieldset { border: 0; margin: 0; padding: 0; }

.check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 760px) { .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .check-grid { grid-template-columns: 1fr; } }

.check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--line);
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: border-color .2s ease, background-color .2s ease;
  user-select: none;
}
.check:hover { border-color: var(--gold); }
.check input { width: 16px; height: 16px; accent-color: var(--gold-deep); flex: none; margin: 0; }
.check:has(input:checked) { border-color: var(--gold); background: rgba(201,162,39,.07); }

.form-note {
  font-size: 0.84rem;
  color: var(--muted);
  margin-top: 1.25rem;
}

.form-status {
  display: none;
  border: 1px solid var(--gold);
  background: rgba(201,162,39,.09);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
}
.form-status.is-visible { display: block; }
.form-status h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.form-status p { color: var(--muted); font-size: 0.95rem; }

.form-error {
  display: block;
  font-size: 0.78rem;
  color: #B0304C;
  margin-top: 0.4rem;
  min-height: 0;
}

/* ------------------------------------------------------------- aside card -- */
.aside-card {
  background: var(--surface);
  border-top: 2px solid var(--gold);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.aside-card + .aside-card { margin-top: 1.5rem; }
.aside-card h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.aside-card dl { margin: 0; }
.aside-card dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.1rem;
}
.aside-card dt:first-child { margin-top: 0; }
.aside-card dd { margin: 0.25rem 0 0; }
.aside-card dd a { text-decoration: none; border-bottom: 1px solid var(--line); }
.aside-card dd a:hover { border-color: var(--gold); color: var(--gold-deep); }

/* ------------------------------------------------------------- pull quote -- */
.pullquote {
  border-left: 2px solid var(--gold);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
}
.pullquote p {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.25;
  color: var(--ink);
}
.pullquote footer {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------- CTA band -- */
.cta-band {
  background: var(--ink);
  color: #fff;
  padding-block: var(--band);
}
.cta-band .h2 { color: #fff; margin-bottom: 1.1rem; }
.cta-band .h2 em { font-style: italic; color: var(--gold); }
.cta-band p { color: rgba(255,255,255,.68); max-width: 52ch; margin-bottom: 2rem; }
.cta-band .eyebrow { color: var(--gold); }
.cta-band .eyebrow::before { background: var(--gold); }
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 800px) { .cta-inner { grid-template-columns: 1fr; } }
.cta-contact {
  border-left: 1px solid rgba(255,255,255,.18);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.cta-contact dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1.25rem;
}
.cta-contact dt:first-child { margin-top: 0; }
.cta-contact dd { margin: 0.3rem 0 0; color: rgba(255,255,255,.85); }
.cta-contact dd a { text-decoration: none; }
.cta-contact dd a:hover { color: var(--gold); }
@media (max-width: 800px) {
  .cta-contact { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-left: 0; padding-top: 2rem; }
}

/* ----------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer .brand-name { color: #fff; }
.footer-about { max-width: 40ch; font-size: 0.92rem; margin-top: 1.25rem; }
.footer-col h4 {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.footer-col li { margin-bottom: 0.7rem; font-size: 0.92rem; }
.footer-col a { text-decoration: none; transition: color .2s ease; }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(255,255,255,.5);
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }

/* ------------------------------------------------------------- map / embed -- */
.embed-slot {
  border: 1px dashed var(--gold);
  background: var(--surface);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.embed-slot h3 { font-size: 1.4rem; margin-bottom: 0.75rem; }
.embed-slot p { color: var(--muted); font-size: 0.9rem; max-width: 46ch; margin-inline: auto; }
.map-frame { width: 100%; height: 400px; border: 0; display: block; filter: grayscale(.28) contrast(1.03); }

/* -------------------------------------------------------------- a11y bits -- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.85rem 1.4rem;
  z-index: 200;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- animations -- */
/* Scoped to .js so that if script.js fails to load, every section stays
   visible instead of being stuck at opacity 0. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------ anchored section offset -- */
/* keeps #face, #quote-form etc. clear of the sticky header when linked to */
[id] { scroll-margin-top: 96px; }