/* ==========================================================================
   Rose Commercial Cleaning design system

   Direction: luxury hospitality. Four Seasons and Ritz-Carlton restraint.
   Serif display type, hairline rules, generous whitespace, gold used sparingly,
   understated CTAs. Colour does the least work; space and type do the most.

   Palette and type from RoseRestoration BloomBook 2026.
   Fully self contained: no webfonts, no CDN, no external CSS requests.
   ========================================================================== */

:root {
  /* Brand */
  --rose:        #930202;
  --rose-dark:   #6D0101;
  --colliseum:   #F6F3EE;
  --venetian:    #C1A986;
  --venetian-dp: #A98E69;
  --concrete:    #272727;
  --clay:        #423E39;
  --sage:        #7A8B6F;
  --white:       #FFFFFF;
  --warm-white:  #FAF8F5;

  /* Derived */
  --ink:         #1E1E1E;
  --body-ink:    #4A453F;
  /* 0.82, not 0.68. At 0.68 this measured 3.88:1 on white and 3.70:1 on
     Colliseum, both below the WCAG AA 4.5:1 floor, and it is used on every
     card paragraph and FAQ answer. 0.82 measures 5.67:1 / 5.29:1. */
  --muted:       rgba(74, 69, 63, 0.82);
  --hair:        rgba(39, 39, 39, 0.11);
  --hair-gold:   rgba(193, 169, 134, 0.55);
  --hair-dark:   rgba(246, 243, 238, 0.16);
  --cream-ink:   rgba(246, 243, 238, 0.9);

  /* Type. Baskerville and Hoefler Text ship on macOS, Georgia everywhere else.
     Brand book calls for Baskerville body, so this is the sanctioned stack. */
  --display: "Baskerville", "Hoefler Text", "Palatino Linotype", Georgia,
             "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Metrics. Whitespace is the primary luxury signal, so these run generous. */
  --wrap: 1200px;
  --narrow: 720px;
  --gut: 28px;
  --sp: 112px;
  --track: 0.22em;   /* wide tracking for uppercase sans */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body-ink);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* A long unbroken string (URL, email, product code) in body copy is the most
     common cause of horizontal scroll on narrow screens. */
  overflow-wrap: break-word;
}

/* There are no <img> elements today (the hero is a CSS background and the
   material swatches are gradients), but MAINTENANCE.md tells the next person to
   add photography. Without this, any image wider than the column overflows the
   viewport on mobile. Safety rail, not decoration. */
img, svg, video, iframe {
  max-width: 100%;
}
img, video {
  height: auto;
}

/* --------------------------------------------------------------- typography */

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 400;              /* weight is not how this design gets emphasis */
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.7rem); }
h3 {
  font-size: 1.16rem;
  letter-spacing: 0;
  line-height: 1.35;
}
h4 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

p { margin: 0 0 1.2rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--rose);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
a:hover { color: var(--rose-dark); }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }

strong { color: var(--ink); font-weight: 700; }
ul, ol { margin: 0 0 1.2rem; padding-left: 1.15em; }
li { margin-bottom: 0.45em; }

/* The eyebrow is the workhorse of this aesthetic: tiny, wide tracked, gold. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--venetian);
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::after {
  content: "";
  flex: 0 0 44px;
  height: 1px;
  background: var(--hair-gold);
}

.lede {
  font-size: clamp(1.14rem, 1.02rem + 0.5vw, 1.36rem);
  line-height: 1.62;
  max-width: 60ch;
  color: var(--body-ink);
}
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }
.center { text-align: center; }

/* -------------------------------------------------------------- scaffolding */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.narrow { max-width: var(--narrow); }

.section { padding-block: var(--sp); }
.section--tight { padding-block: calc(var(--sp) * 0.6); }
.section--alt { background: var(--colliseum); }
.section--warm { background: var(--warm-white); }

.section--dark { background: var(--concrete); color: var(--cream-ink); }
.section--dark h2,
.section--dark h3 { color: var(--colliseum); }
.section--dark strong { color: var(--white); }
.section--dark a { color: var(--venetian); }
.section--dark .eyebrow::after { background: var(--hair-dark); }

.section-head { max-width: 60ch; margin-bottom: 3.4rem; }

.rule { border: 0; border-top: 1px solid var(--hair); margin-block: 4rem; }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--concrete);
  color: var(--colliseum);
  padding: 14px 22px;
  z-index: 200;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--hair);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 86px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand svg { display: block; color: var(--venetian); flex: 0 0 auto; }
.brand-rose { display: block; height: 46px; width: auto; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.06; }
.brand-name {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-sub {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.nav {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 auto 0 12px;
  padding: 0;
}
.nav li { margin: 0; }
.nav a {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav a:hover,
.nav a[aria-current="page"] {
  border-bottom-color: var(--venetian);
  color: var(--ink);
}

/* ------------------------------------------------------------------ buttons */
/* Understated by design. Luxury CTAs do not shout; they sit there confidently. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 38px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--colliseum);
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.btn:hover { background: var(--rose); border-color: var(--rose); color: var(--white); }

.btn--sm { padding: 12px 24px; font-size: 0.63rem; letter-spacing: 0.15em; }

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

.btn--sand { background: var(--venetian); border-color: var(--venetian); color: var(--concrete); }
.btn--sand:hover { background: var(--colliseum); border-color: var(--colliseum); color: var(--concrete); }

/* Option C: gold primary, dark-fill Call button. Ink fill sits just under the
   concrete section so it reads as a clear secondary to the gold primary. */
.btn--outline-sand { background: var(--ink); border-color: rgba(246, 243, 238, 0.28); color: var(--colliseum); }
.btn--outline-sand:hover { background: var(--white); border-color: var(--white); color: var(--concrete); }

/* Secondary CTAs (the Call button) read lighter than the primary: less font
   weight so the primary action stays visually dominant. */
.btn--ghost, .btn--outline-sand { font-weight: 500; }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2.6rem; }
.cta-row--center { justify-content: center; }

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-block: clamp(78px, 9vw, 132px);
  background: var(--warm-white);
  border-bottom: 1px solid var(--hair);
}
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: 1.6rem; }

/* Homepage feature hero: dark, cinematic, gold hairline. This is the single
   strongest luxury cue on the site, so only the homepage gets it. */
.hero--feature {
  /* Real Rose project photography (polished hotel lobby marble) under a heavy
     dark scrim. The scrim is what keeps text at AA contrast and stops the
     photo competing with the type. */
  background-color: var(--concrete);
  background-image:
    linear-gradient(
      100deg,
      rgba(24, 24, 24, 0.94) 0%,
      rgba(24, 24, 24, 0.86) 42%,
      rgba(24, 24, 24, 0.58) 100%
    ),
    url("/images/hotel-lobby-marble-900.jpg");
  background-size: cover;
  background-position: center 62%;
  color: var(--cream-ink);
  border-bottom: 0;
  padding-block: clamp(96px, 12vw, 172px);
  overflow: hidden;
}
@media (min-width: 901px) {
  .hero--feature {
    background-image:
      linear-gradient(
        100deg,
        rgba(24, 24, 24, 0.94) 0%,
        rgba(24, 24, 24, 0.84) 40%,
        rgba(24, 24, 24, 0.52) 100%
      ),
      url("/images/hotel-lobby-marble-1800.jpg");
  }
}
.hero--feature::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -220px;
  width: 620px;
  height: 620px;
  border: 1px solid var(--hair-dark);
  border-radius: 310px 310px 0 0;
  pointer-events: none;
}
.hero--feature > .wrap { position: relative; z-index: 1; }
.hero--feature h1 { color: var(--colliseum); }
.hero--feature .lede { color: var(--cream-ink); }
.hero--feature .eyebrow::after { background: var(--hair-dark); }

.hero--page { padding-block: clamp(60px, 6vw, 92px); }
.hero--page h1 { max-width: 22ch; }

.crumbs {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  color: var(--muted);
}
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs span { padding-inline: 10px; color: var(--hair-gold); }

/* ----------------------------------------------------------------- trustbar */

.trustbar {
  background: var(--colliseum);
  padding-block: 46px;
  border-bottom: 1px solid var(--hair);
}
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.trust-grid div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
  border-left: 1px solid var(--hair-gold);
}
.trust-grid strong {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.trust-grid span { font-size: 0.95rem; color: var(--muted); }

/* -------------------------------------------------------------------- grids */

.grid { display: grid; gap: 1px; background: var(--hair); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 86px);
  align-items: start;
}
.split--even { grid-template-columns: 1fr 1fr; }

/* -------------------------------------------------------------------- cards */
/* Hairline separated tiles rather than floating boxes. No lift, no shadow. */

.card {
  background: var(--white);
  padding: 44px 38px;
  display: flex;
  flex-direction: column;
  transition: background-color 0.25s ease;
}
.card h3 { margin-bottom: 0.7rem; }
.card p { font-size: 1rem; color: var(--muted); margin: 0; }
.section--alt .card { background: var(--colliseum); }
.section--alt .grid { background: var(--hair); }

a.card { text-decoration: none; color: var(--body-ink); }
a.card:hover { background: var(--warm-white); }
a.card:hover h3 { color: var(--rose); }
.section--alt a.card:hover { background: var(--white); }

.card-more {
  margin-top: auto;
  padding-top: 1.8rem;
  font-family: var(--sans);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--venetian);
}
a.card:hover .card-more { color: var(--rose); }

.card--dark { background: rgba(246, 243, 238, 0.04); }

/* -------------------------------------------------------------------- stats */

.stat-stack { display: flex; flex-direction: column; }
.stat {
  padding: 26px 0 26px 24px;
  border-left: 1px solid var(--hair-gold);
  border-bottom: 1px solid var(--hair-dark);
}
.stat:last-child { border-bottom: 0; }
.section:not(.section--dark) .stat { border-bottom-color: var(--hair); }
.stat strong {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--venetian);
  margin-bottom: 4px;
}
.stat span { font-size: 0.96rem; display: block; }

/* -------------------------------------------------------------------- lists */

.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pill-list li {
  margin: 0;
  padding: 10px 20px;
  border: 1px solid var(--hair);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--body-ink);
}

.check-list { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 0.95em;
  font-size: 1rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 18px;
  height: 1px;
  background: var(--venetian);
}

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.steps li {
  counter-increment: step;
  margin: 0;
  padding-top: 34px;
  position: relative;
  font-size: 0.99rem;
  border-top: 1px solid var(--hair-gold);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 14px;
  left: 0;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--venetian);
}
.steps li strong { display: block; margin-bottom: 0.3rem; }

/* --------------------------------------------------------------- materials */

.material-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hair); }
.material { background: var(--white); }
.material-swatch { height: 150px; }
.material-body { padding: 26px 24px 30px; }
.material-body h3 { font-size: 1.02rem; margin-bottom: 0.45rem; }
.material-body p { font-size: 0.92rem; margin: 0; color: var(--muted); }

/* Abstract material references. Never presented as project photography. */
.sw-marble {
  background:
    linear-gradient(118deg, transparent 46%, rgba(39,39,39,0.13) 47%, transparent 49%),
    linear-gradient(103deg, transparent 62%, rgba(39,39,39,0.08) 63%, transparent 66%),
    linear-gradient(160deg, #FDFCFA, #EAE5DD);
}
.sw-terrazzo {
  background-color: #EFEBE3;
  background-image:
    radial-gradient(circle at 22% 30%, var(--venetian) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 22%, rgba(39,39,39,0.3) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 68%, var(--sage) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 74%, rgba(147,2,2,0.32) 0 2px, transparent 3px),
    radial-gradient(circle at 12% 82%, rgba(39,39,39,0.2) 0 3px, transparent 4px);
}
.sw-concrete {
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(150deg, #BDBAB5, #918E89);
}
.sw-vct {
  background-color: var(--colliseum);
  background-image:
    linear-gradient(45deg, rgba(39,39,39,0.06) 25%, transparent 25%, transparent 75%, rgba(39,39,39,0.06) 75%),
    linear-gradient(45deg, rgba(39,39,39,0.06) 25%, transparent 25%, transparent 75%, rgba(39,39,39,0.06) 75%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

/* ---------------------------------------------------------------- pullquote */

.pullquote {
  border: 0;
  border-top: 1px solid var(--hair-gold);
  border-bottom: 1px solid var(--hair-gold);
  padding: 30px 0;
  margin: 3rem 0;
  font-size: clamp(1.24rem, 1.1rem + 0.6vw, 1.55rem);
  line-height: 1.44;
  font-style: italic;
  color: var(--ink);
}
.section--dark .pullquote { color: var(--colliseum); border-color: var(--hair-dark); }

/* ---------------------------------------------------------------------- faq */

.faq h3 { margin-top: 2.8rem; padding-top: 2.8rem; border-top: 1px solid var(--hair); }
.faq h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.faq p { font-size: 1rem; color: var(--muted); }

/* -------------------------------------------------------------------- table */

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.97rem;
  vertical-align: top;
}
.spec-table th {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom-color: var(--hair-gold);
}
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------- form embed */

.form-embed { border: 1px solid var(--hair); background: var(--white); min-height: 1180px; }
.form-embed iframe { display: block; width: 100%; min-height: 1180px; border: 0; }
/* 580px, matching the narrow breakpoint used everywhere else. It was 560px,
   which left a 20px band where the grid was single-column but the form still
   used its desktop height. */
@media (max-width: 580px) { .form-embed, .form-embed iframe { min-height: 1450px; } }

/* ------------------------------------------------------------------- closer */

.closer {
  background: var(--concrete);
  color: var(--cream-ink);
  padding-block: var(--sp);
  text-align: center;
}
.closer h2 { color: var(--colliseum); }
.closer p { max-width: 54ch; margin-inline: auto; }

/* ------------------------------------------------------------------- footer */

.site-footer {
  background: var(--concrete);
  color: rgba(246, 243, 238, 0.78);
  padding-block: 76px 34px;
  border-top: 1px solid var(--hair-dark);
}
.site-footer a { color: rgba(246, 243, 238, 0.86); text-decoration: none; }
.site-footer a:hover { color: var(--venetian); }
.site-footer h4 { color: var(--venetian); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--hair-dark);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.66em; font-size: 0.92rem; }
.footer-brand .brand-name { color: var(--colliseum); font-size: 1.3rem; }
.footer-brand p { font-size: 0.94rem; margin-top: 1.3rem; max-width: 38ch; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 28px;
  font-size: 0.82rem;
  /* 0.5 measured exactly 4.50:1, right on the AA boundary with no margin. */
  color: rgba(246, 243, 238, 0.76);
}

/* -------------------------------------------------------- sticky mobile CTA */

.sticky-cta { display: none; }

@media (max-width: 900px) {
  .sticky-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 95;
    border-top: 1px solid var(--hair);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(180%) blur(10px);
  }
  .sticky-cta a {
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 20px 12px;   /* comfortably above the 44px tap target floor */
    color: var(--ink);
  }
  .sticky-cta .sticky-primary { background: var(--ink); color: var(--colliseum); }
  .site-footer { padding-bottom: 104px; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
  :root { --sp: 86px; }
  .grid--4, .material-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --sp: 68px; --gut: 22px; }
  body { font-size: 17px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--even { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .header-inner { min-height: 0; padding-block: 16px; gap: 20px; }
  .nav { order: 3; width: 100%; margin: 0; gap: 20px; row-gap: 12px; flex-wrap: wrap; }
  .hero--feature::after { display: none; }
  .card { padding: 34px 28px; }
}
@media (max-width: 580px) {
  .grid--2, .grid--3, .grid--4, .steps, .trust-grid, .material-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .brand-name { font-size: 1.2rem; }
}

/* ------------------------------------------------------------------- print */

@media print {
  .site-header, .closer, .cta-row, .skip, .sticky-cta { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .section, .hero { padding-block: 12pt; }
  .section--dark, .trustbar, .site-footer, .hero--feature {
    background: #fff; color: #000;
  }
  .hero--feature h1, .section--dark h2 { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ------------------------------------------------------- client credentials */
/* Deliberately typographic, not a logo wall. The parent brand already uses a
   grayscale logo bar, and a text treatment carries the past-work qualifier
   that a row of logos cannot. */
.client-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair-dark);
  margin-bottom: 2.4rem;
}
.client-col { background: var(--concrete); padding: 34px 30px; }
.client-col h3 {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--venetian);
  margin-bottom: 1.2rem;
}
.client-col ul { list-style: none; margin: 0; padding: 0; }
.client-col li {
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--colliseum);
  padding: 9px 0;
  border-bottom: 1px solid var(--hair-dark);
}
.client-col li:last-child { border-bottom: 0; }
@media (max-width: 900px)  { .client-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- CTA band */
/* Mid-page conversion band. Venetian-on-concrete so it reads as a deliberate
   pause without competing with the rose closer. */
.ctaband { background: var(--concrete); }
.ctaband-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 52px;
  flex-wrap: wrap;
}
.ctaband h2 { color: var(--colliseum); margin: 0 0 0.3rem; font-size: clamp(1.5rem,1.2rem+1vw,2rem); }
.ctaband p { color: var(--cream-ink); margin: 0; max-width: 46ch; }
.ctaband-actions { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 720px) {
  .ctaband-inner { flex-direction: column; align-items: flex-start; }
  .ctaband-actions { width: 100%; }
  .ctaband-actions .btn { flex: 1; }
}

/* ------------------------------------------------------- response commitment */
/* A concrete "reply within one business day" reduces the biggest hesitation a
   buyer has before submitting. Gold hairline flag, quiet but present. */
.respond-note {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Dark ink text (10.8:1), gold only on the border accent. The earlier gold
     text was 3.11:1, below AA. */
  color: var(--ink);
  border-left: 2px solid var(--venetian);
  padding: 4px 0 4px 14px;
  margin: 0 0 1.4rem;
}
/* On dark cards the same note reads in cream with the gold accent. */
.section--dark .respond-note,
.card .respond-note { color: var(--ink); }