/* ==========================================================================
   Furniture Pros: Landing Page
   Art direction per design.md: warm ivory ground, editorial asymmetry,
   photography and typography doing the work. No cards, no shadows, no gradients.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Palette from design.md */
  --ivory:        #F2EBDD;
  --parchment:    #E4D9C6;
  --olive:        #46553A;
  --deep-olive:   #303B2B;
  --walnut:       #553A27;
  --dark-walnut:  #34251C;
  --brass:        #A38655;
  --brass-light:  #C4A87A;   /* brass on deep olive / dark walnut, for AA */

  /* Call to action. Bright warm orange against the olive and ivory so it reads
     as the one thing to press. Dark ink on it rather than ivory: at this
     brightness ivory only reaches 2.5:1, while ink reaches 5.07:1. */
  --cta:          #E07A28;
  --cta-hover:    #C96716;
  --cta-ink:      #29251F;
  /* The fill alone is only 2.53:1 against ivory, so the button's own edge would
     not be identifiable. This border clears 3:1 on ivory and on parchment. */
  --cta-edge:     #B85A10;
  /* Same orange lifted for the dark olive section. The page orange only reaches
     3.91:1 there, under the 4.5:1 a link at this size needs; this reaches 5.22. */
  --cta-light:    #EE9A3C;
  --ink:          #29251F;

  /* Derived */
  --ink-soft:     #5F564B;
  --ink-faint:    #665D51;   /* darkened: #8A7F71 was 3.31:1 on ivory, below AA */
  --rule:         rgba(41, 37, 31, 0.16);
  --rule-soft:    rgba(41, 37, 31, 0.09);
  --rule-light:   rgba(242, 235, 221, 0.22);

  /* Type */
  --serif: "DM Serif Display", "Georgia", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --shell:     1320px;
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 11vw, 9.5rem);

  /* 100vw includes the scrollbar; --sbw is set from JS so the full-bleed
     figures land exactly on the viewport edge instead of ~8px past it */
  --sbw: 0px;
  --vw: calc(100vw - var(--sbw));

  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.06; }
p { margin: 0; }
/* figure carries a 40px side margin by default, it silently shrinks every
   before/after image and knocks the pair columns out of alignment */
figure, figcaption, dl, dd { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--deep-olive); color: var(--ivory);
  padding: 0.85rem 1.25rem; text-decoration: none;
  font-size: 0.875rem; letter-spacing: 0.04em;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}

/* ---- Layout primitives -------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1.5rem;
}
.eyebrow--light { color: var(--brass-light); }

.section-title {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 1.35rem + 3.9vw, 4rem);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.section-title--light { color: var(--ivory); }

.section-head { margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }

.section-head--split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.section-head__aside {
  color: var(--ink-soft);
  max-width: 42ch;
  font-size: 1.0625rem;
}

/* ---- Buttons & links ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.0625rem 2.125rem;
  border: 1px solid var(--cta-edge);
  border-radius: var(--radius);
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.btn:hover { background: var(--cta-hover); border-color: var(--cta-edge); }
.btn--sm { padding: 0.8125rem 1.5rem; font-size: 0.8125rem; }
/* Bigger target and bigger type for the form's own submit */
.btn--lg { padding: 1.375rem 2.125rem; font-size: 1.0625rem; letter-spacing: 0.06em; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.link-arrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease);
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { background-size: 0% 1px; }
.link-arrow--light { color: var(--ivory); }
/* The call to action on the dark section, orange like every other one */
.link-arrow--cta { color: var(--cta-light); font-weight: 600; }

/* ---- Figures & image fallback ------------------------------------------- */
.fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--parchment);
}
.fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.fig--4x5 { aspect-ratio: 4 / 5; }
.fig--3x2 { aspect-ratio: 3 / 2; }
.fig--2x3 { aspect-ratio: 2 / 3; }
.fig--1x1 { aspect-ratio: 1 / 1; }

/* The real photos come in at very different ratios, so a few need their crop
   biased away from dead centre to keep the whole piece in frame. */
.obj-top { object-position: center top; }
.obj-low { object-position: center 55%; }

/* Tonal placeholder shown when a photo hasn't been added yet */
.fig.is-empty img { display: none; }
.fig.is-empty {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(85, 58, 39, 0.045) 0 14px,
      rgba(85, 58, 39, 0)   14px 28px
    ),
    var(--parchment);
}
.fig.is-empty::after {
  content: attr(data-empty-label);
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1.125rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.fig__stamp {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--ivory);
  color: var(--olive);
  padding: 0.9rem 1.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--rule-soft); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-right: auto;
}
.brand__mark { width: 40px; height: 40px; color: var(--olive); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-family: var(--serif);
  font-size: 1.3125rem;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.brand__tag {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}

.site-nav { display: none; gap: 2rem; }
.site-nav a {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--olive); }

.site-header__actions { display: flex; align-items: center; gap: 1.5rem; }
.tel-link {
  display: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.tel-link:hover { color: var(--olive); }
.site-header__actions .btn { display: none; }

@media (min-width: 62em) {
  .site-nav,
  .tel-link { display: flex; }
  .site-header__actions .btn { display: inline-flex; }
}

/* ==========================================================================
   1 · Hero
   ========================================================================== */
.hero--banner { padding: 0 0 clamp(2rem, 5vw, 3.5rem); }

/* Full-bleed banner. It is a link because the artwork shows a button. */
.hero__banner { display: block; line-height: 0; }
.hero__banner img { width: 100%; height: auto; }

/* The desktop banner's text is baked into the image, so below ~1000px it scales
   down to about 8px and stops being readable. Tablets get the portrait banner
   instead, but full width it would run over 1300px tall, so cap it. Its own
   background is warm ivory, so it reads as floating on the page rather than
   boxed. */
@media (min-width: 48em) and (max-width: 61.99em) {
  .hero__banner img { max-width: 34rem; margin-inline: auto; }
}
.hero__banner:focus-visible { outline: 2px solid var(--olive); outline-offset: -4px; }

.hero__below { padding-top: clamp(1.5rem, 3.5vw, 2.5rem); }
.hero__below .eyebrow { margin-bottom: 1.25rem; }

/* The H1 keeps the eyebrow's role in the layout, just a little more present */
.hero__h1 {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  max-width: 46ch;
  line-height: 1.5;
}

.hero__actions { display: grid; gap: 1.5rem; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.25rem;
}

.hero__note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 40ch;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}

@media (min-width: 48em) {
  .hero__actions {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2.5rem;
  }
  .hero__note {
    padding: 0.25rem 0 0.25rem 2.5rem;
    border-top: 0;
    border-left: 1px solid var(--rule-soft);
  }
}

/* ==========================================================================
   2 · A piece worth saving
   Long-form prose, so it gets its own column at a comfortable measure with the
   heading held beside it. Parchment separates it from the ivory either side.
   ========================================================================== */
.section--story { background: var(--parchment); }

.story__inner { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }

.story__body > * + * { margin-top: 1.375rem; }

.story__body p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft);
  /* 62ch measured out at 82 characters a line, past the comfortable range.
     52ch lands around 69. */
  max-width: 52ch;
}

.story__body .story__lead {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.32;
  color: var(--ink);
  max-width: 26ch;
}

/* The hinge of the argument, so it gets weight and a rule to sit against */
.story__body .story__turn {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 28ch;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.25rem);
  border-top: 1px solid var(--rule);
}

/* Reported speech, not a testimonial: no name, no stars, no card. */
.story__body .story__quote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.375rem);
  line-height: 1.2;
  color: var(--ink);
  max-width: 18ch;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  padding-left: clamp(1.125rem, 2vw, 1.75rem);
  border-left: 2px solid var(--brass);
}

@media (min-width: 62em) {
  .story__inner {
    grid-template-columns: 0.78fr 1.22fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .story__side { position: sticky; top: 7rem; }
}

/* ==========================================================================
   3 · Transformation proof
   ========================================================================== */
.section--proof {
  background: var(--ivory);
  border-top: 1px solid var(--rule-soft);
}

@media (min-width: 62em) {
  .section-head--split {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
  .section-head__aside { padding-bottom: 0.6rem; }
}

/* --- Transformation rows -------------------------------------------------
   Each pair is a plate: before and after side by side, caption underneath.

   The caption sits below rather than beside deliberately. The source photos
   run from 1.78 to 0.56, so a side caption ends up in a column as tall as the
   images with only ~115px of text in it, stranding up to 429px of empty space
   next to the tall pairs. Underneath, the plate is self-contained and the
   differing heights stop mattering.

   Every plate shares one width, so the left and right edges line up all the
   way down even though the photographs are different shapes.
   -------------------------------------------------------------------------- */
.tx { margin-bottom: clamp(4rem, 9vw, 7rem); }

.tx__plate { max-width: min(100%, 56rem); }
.tx__plate + .tx__plate { margin-top: clamp(5.5rem, 8vw, 7rem); }

.tx__imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.tx__imgs .fig { position: relative; }
.tx__plate:hover .fig img { transform: scale(1.03); }

.tx__tag {
  position: absolute;
  left: 0; top: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  background: var(--ivory);
  color: var(--ink);
}
.tx__tag--after { background: var(--deep-olive); color: var(--ivory); }

/* Hairline ties the words to the pictures above them */
.tx__cap {
  margin-top: 1.625rem;
  padding-top: 1.625rem;
  border-top: 1px solid var(--rule-soft);
}
.tx__cap h3 {
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
  margin-bottom: 0.5rem;
}
.tx__cap p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* On a phone, two photos side by side come out about 170px wide, too small to
   read a finish on. Below 576px each pair stacks so both photos get the full
   column; the Before and After tags carry the comparison instead of adjacency. */
/* Phones. Full-width photographs carry more visual weight than the same
   pictures do on a desktop grid, so they need more room around them, not less.
   Desktop values are deliberately untouched. */
@media (max-width: 47.99em) {
  .tx__plate + .tx__plate { margin-top: 6rem; }
  .tx__cap { margin-top: 2rem; padding-top: 1.75rem; }
  .tx__cap h3 { margin-bottom: 0.75rem; }
}

@media (max-width: 35.99em) {
  .tx__imgs { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* The landscape pair stays stacked further up the range, since a 3:2 frame
   loses height fastest as the column narrows. */
@media (min-width: 36em) and (max-width: 47.99em) {
  .tx__plate--wide .tx__imgs { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4 · What we do
   ========================================================================== */
.section--services {
  background: var(--parchment);
}

.services__inner { display: grid; gap: clamp(2.75rem, 6vw, 5rem); }

.services__lede {
  margin-top: 1.75rem;
  color: var(--ink-soft);
  max-width: 40ch;
}
.services__figure { margin-top: clamp(2rem, 4vw, 3rem); background: #ded2bd; }

.services__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 1.75rem;
  padding-block: clamp(1.5rem, 3vw, 2.125rem);
  border-top: 1px solid var(--rule);
}
.services__item:last-child { border-bottom: 1px solid var(--rule); }

.services__num {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--walnut);
  padding-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.services__body h3 {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  margin-bottom: 0.5rem;
}
.services__body p {
  color: var(--ink-soft);
  max-width: 52ch;
  font-size: 1rem;
}

@media (min-width: 62em) {
  .services__inner {
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .services__side { position: sticky; top: 7rem; }
  .services__figure { display: block; }
}
@media (max-width: 61.99em) {
  .services__figure { display: none; }
}

/* ==========================================================================
   5 · The plan  (the single dark section)
   ========================================================================== */
.section--plan {
  background: var(--deep-olive);
  color: var(--ivory);
}

.plan__head { max-width: 56ch; margin-bottom: clamp(3rem, 7vw, 5rem); }
.plan__lede {
  margin-top: 1.75rem;
  color: rgba(242, 235, 221, 0.72);
  max-width: 48ch;
  font-size: 1.0625rem;
}

.plan { display: grid; gap: 0; }

.plan__step {
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule-light);
}
.plan__step h3 {
  margin-top: 0.25rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  color: var(--ivory);
  margin-bottom: 0.75rem;
}
.plan__step p {
  color: rgba(242, 235, 221, 0.72);
  max-width: 34ch;
  font-size: 0.9875rem;
}

.plan__stakes {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule-light);
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + 1.15vw, 2rem);
  line-height: 1.32;
  color: var(--ivory);
  max-width: 34ch;
}
.plan__stakes .link-arrow {
  display: block;
  margin-top: 1.75rem;
  font-family: var(--sans);
  font-size: 0.875rem;
}

@media (min-width: 48em) {
  .plan { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
  .plan__stakes { max-width: 46ch; }
}

/* ==========================================================================
   6 · Quote form
   ========================================================================== */
.section--quote { background: var(--ivory); }

.quote__inner { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: start; }

.quote__lede {
  margin-top: 1.75rem;
  color: var(--ink-soft);
  max-width: 44ch;
}

/* FAQ: editorial list, not an accordion */
.faq { margin-top: 0; }
.faq__item { padding-block: 1.375rem; border-top: 1px solid var(--rule-soft); }
.faq__item:last-child { border-bottom: 1px solid var(--rule-soft); }
.faq dt {
  font-family: var(--serif);
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}
.faq dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 50ch;
}

/* --- Form --- */
.quote__formwrap {
  background: var(--parchment);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
}

.qform__row { display: grid; gap: 1.25rem; }
@media (min-width: 30em) { .qform__row { grid-template-columns: 1fr 1fr; } }

.field { margin-bottom: 1.25rem; }
.field label,
.uploads legend {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
  padding: 0;
}
.req { color: var(--walnut); }

.field input,
.field textarea {
  width: 100%;
  padding: 1rem 1.0625rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }
.field input:focus,
.field textarea:focus { border-color: var(--olive); outline-offset: 1px; }

.field.has-error input,
.field.has-error textarea { border-color: #8C3B2A; }
.field__err {
  font-size: 0.8125rem;
  color: #8C3B2A;
  margin-top: 0.4rem;
  display: none;
}
.field.has-error .field__err { display: block; }

/* Honeypot: off-screen, never display:none */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Upload slots --- */
.uploads { border: 0; padding: 0; margin: 1.5rem 0 2rem; }
.uploads__help {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* Plain instruction, deliberately large and high contrast. Many visitors are
   65 to 80 and will not assume a dashed square is a button. */
.uploads__how {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.uploads__plus {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--cta-edge);
  border-radius: 50%;
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 1.25rem;
  line-height: 1;
}
.uploads__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }

.slot { position: relative; }
.slot__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.slot__label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  aspect-ratio: 1;
  border: 2px dashed rgba(41, 37, 31, 0.6);
  border-radius: var(--radius);
  background: var(--ivory);
  cursor: pointer;
  margin: 0 !important;
  letter-spacing: 0.12em !important;
  color: var(--ink-soft) !important;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.slot__label:hover { border-color: var(--cta-edge); background: #F7F2E7; }
.slot__input:focus-visible + .slot__label { outline: 2px solid var(--olive); outline-offset: 2px; }
/* A bare "+" does not read as a button to someone who has not met one. Give it
   the same orange as every other call to action on the page. */
.slot__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--cta);
  border: 1px solid var(--cta-edge);
  color: var(--cta-ink);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
}
.slot__text { font-size: 0.8125rem; letter-spacing: 0.08em; }

.slot__preview { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }
.slot__preview img { width: 100%; height: 100%; object-fit: cover; }
.slot__remove {
  position: absolute;
  top: 0; right: 0;
  padding: 0.4rem 0.6rem;
  border: 0;
  background: var(--deep-olive);
  color: var(--ivory);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.slot__remove:hover { background: var(--walnut); }
.slot__meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.35rem 0.5rem;
  background: rgba(48, 59, 43, 0.86);
  color: var(--ivory);
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  text-align: center;
}
.slot.is-filled .slot__label { display: none !important; }

.qform__status {
  margin-top: 1rem;
  font-size: 1rem;
  min-height: 1.4em;
}
.qform__status.is-error { color: #8C3B2A; }
.qform__status.is-busy { color: var(--ink-soft); }

.qform__fine {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.qform__fine a { color: var(--olive); }

@media (min-width: 62em) {
  /* Put the FAQ back alongside the form: intro and FAQ stack in column one,
     the form spans both rows in column two. */
  .quote__inner {
    grid-template-columns: 1fr 1.02fr;
    grid-template-areas:
      "intro form"
      "faq   form";
    gap: clamp(2rem, 4vw, 3rem) clamp(3.5rem, 7vw, 6rem);
  }
  .quote__intro    { grid-area: intro; }
  .quote__faq      { grid-area: faq; }
  .quote__formwrap { grid-area: form; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--dark-walnut);
  color: rgba(242, 235, 221, 0.78);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  font-size: 0.9375rem;
}

.site-footer__inner {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.brand__mark--footer { width: 52px; height: 52px; color: var(--brass); }
.site-footer__slogan {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ivory);
  margin-top: 1.25rem;
  max-width: 12ch;
  line-height: 1.15;
}

.site-footer__h {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 1.125rem;
}
.site-footer__col p + p { margin-top: 0.5rem; }
.site-footer__col a { text-decoration: none; }
.site-footer__col a:hover { color: var(--ivory); }
/* .link-arrow defaults to dark ink, which is invisible on the dark walnut
   footer, scope it here so it can't be missed on a new footer link */
.site-footer .link-arrow { color: var(--ivory); }
.site-footer__areas { line-height: 1.8; max-width: 34ch; }

.site-footer__base {
  border-top: 1px solid var(--rule-light);
  padding-block: 1.75rem;
  font-size: 0.75rem;
  color: rgba(242, 235, 221, 0.62);
}

@media (min-width: 48em) {
  .site-footer__inner { grid-template-columns: 1.1fr 1fr 1fr; }
}

/* ==========================================================================
   Mobile action bar
   ========================================================================== */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
}
.mobile-bar a {
  padding: 1rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}
.mobile-bar__call { background: var(--ivory); color: var(--ink); }
.mobile-bar__cta { background: var(--cta); color: var(--cta-ink); font-weight: 600; }

@media (min-width: 62em) { .mobile-bar { display: none; } }
@media (max-width: 61.99em) {
  body { padding-bottom: 3.5rem; }
  html { scroll-padding-top: 6rem; }
}

/* ==========================================================================
   Motion
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* No-JS: never hide content behind an un-fired reveal */
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .site-header, .mobile-bar { display: none; }
  body { background: #fff; color: #000; }
}