/* starter.css - the single-page starter website, built for ourselves.
   Loads after the shared site sheet.

   FIRST RULE, AND THE REASON FOR IT. The shared sheet defines a display-face token on
   :root and points it at a serif family, and 38 of its own selectors read that token.
   A page cannot escape that by naming the token with a fallback beside it: a var()
   fallback fires only when the token is UNSET, and this one is set, so the fallback is
   dead text and the page paints the serif anyway. The display serif is banned on every
   surface, so this sheet repoints the token itself and every carrier follows it. Same
   ruling, readable floor: body never below 16px, labels never below 13px, and nothing
   in this sheet goes under 0.85rem. */

:root {
  --serif: Arial, Helvetica, sans-serif;
}

/* -------------------------------------------------------------- the open */

/* Deliberately not a centred stack. The words hold the left, the mark sits beside them,
   and the page starts reading rather than presenting. */
.sw-open {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-inline: clamp(24px, 3.2vw, 64px);
  padding-inline: var(--pad, clamp(24px, 3.2vw, 64px));
  padding-block: clamp(36px, 6vw, 88px) clamp(28px, 4vw, 56px);
}

@media (min-width: 900px) {
  .sw-open { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.sw-open__h {
  margin: 10px 0 0;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 18ch;
}

.sw-open__lede {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: #d7d6d1;
  color: var(--gray-1, #d7d6d1);
}

.sw-open__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

.sw-open__note {
  margin: 22px 0 0;
  max-width: 52ch;
  padding-top: 18px;
  border-top: 1px solid #2a2a28;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.sw-open__note a { color: #f1f0eb; color: var(--paper, #f1f0eb); }

.sw-open__fig { margin: 0; }

.sw-open__fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #2a2a28;
}

/* ------------------------------------------------------------- the acts */

.sw-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #f1f0eb;
  border-color: var(--paper, #f1f0eb);
  border-radius: 2px;
  background: transparent;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
}

/* One filled action per view: the telephone number. Everything else is outlined. */
.sw-act--first {
  background: #f1f0eb;
  background: var(--paper, #f1f0eb);
  color: #0a0a0a;
  color: var(--ink, #0a0a0a);
}

.sw-act:hover,
.sw-act:focus-visible { background: #d7d6d1; background: var(--gray-1, #d7d6d1); color: #0a0a0a; }
.sw-act:focus-visible { outline: 2px solid #f1f0eb; outline-offset: 3px; }

/* ---------------------------------------------------------- the sections */

/* Spacing steps down the page on purpose: the opening breathes most, the form sits
   tightest. One padding value repeated the whole way down is the monotony this house bans. */
.sw-sec {
  padding-inline: clamp(24px, 3.2vw, 64px);
  padding-inline: var(--pad, clamp(24px, 3.2vw, 64px));
  border-top: 1px solid #2a2a28;
}

.sw-sec--open  { padding-block: 52px 46px; }
.sw-sec--mid   { padding-block: 42px 36px; }
.sw-sec--tight { padding-block: 34px 28px; }
.sw-sec--close { padding-block: 28px 56px; }

.sw-h {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.sw-sub {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.sw-sub--wide { max-width: 70ch; }
.sw-sub a { color: #f1f0eb; color: var(--paper, #f1f0eb); }

/* ------------------------------------------------------------- the work */

/* A definition list, not a row of identical tinted cards. The rule sits on the left edge
   so the eye has a column to run down. */
.sw-defs { margin: 0; display: grid; gap: 0; }

.sw-defs > div {
  display: grid;
  gap: 6px;
  padding: 20px 0 20px 20px;
  border-left: 2px solid #3b3b3b;
  border-left-color: var(--line, #3b3b3b);
}

@media (min-width: 820px) {
  .sw-defs > div { grid-template-columns: 15rem minmax(0, 1fr); gap: 8px 28px; align-items: baseline; }
}

.sw-defs dt {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
}

.sw-defs dd {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

/* ------------------------------------------------------------ the towns */

.sw-towns {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.sw-towns a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid #3b3b3b;
  border-color: var(--line, #3b3b3b);
  border-radius: 2px;
}

.sw-towns a:hover,
.sw-towns a:focus-visible { background: #161616; text-decoration: underline; }
.sw-towns a:focus-visible { outline: 2px solid #f1f0eb; outline-offset: 2px; }

/* ------------------------------------------------------------- the steps */

.sw-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.sw-steps > li {
  padding: 22px 0 22px 20px;
  border-left: 2px solid #3b3b3b;
  border-left-color: var(--line, #3b3b3b);
}

@media (min-width: 820px) {
  .sw-steps > li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 4px 28px; }
  .sw-steps__n { grid-row: span 2; }
}

.sw-steps__n {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a76;
  color: var(--gray-3, #7a7a76);
}

.sw-steps__t { margin: 6px 0 0; font-size: 1.1rem; font-weight: 700; }

.sw-steps__d {
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.sw-steps__d a { color: #f1f0eb; color: var(--paper, #f1f0eb); }

/* ---------------------------------------------------------- the refusals */

.sw-wont { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; max-width: 74ch; }

.sw-wont > li {
  padding-left: 20px;
  border-left: 2px solid #3b3b3b;
  border-left-color: var(--line, #3b3b3b);
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.sw-wont strong { display: block; margin-bottom: 4px; color: #f1f0eb; color: var(--paper, #f1f0eb); }

/* ------------------------------------------------------------- the price */

/* Plain sans, by ruling. A money figure is not a place for a display face. */
.sw-price {
  margin: 0 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
}

/* -------------------------------------------------------------- the form */

.sw-form { display: grid; gap: 16px; max-width: 62ch; }

@media (min-width: 700px) {
  .sw-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-field--wide,
  .sw-form__act,
  .sw-form__fine { grid-column: 1 / -1; }
}

.sw-field { display: grid; gap: 7px; min-width: 0; }

.sw-field > span {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.sw-field input,
.sw-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
  background: #0a0a0a;
  border: 1px solid #3b3b3b;
  border-color: var(--line, #3b3b3b);
  border-radius: 2px;
}

.sw-field textarea { min-height: 110px; resize: vertical; }
.sw-field input::placeholder { color: #7a7a76; color: var(--gray-3, #7a7a76); }
.sw-field input:focus-visible,
.sw-field textarea:focus-visible { outline: 2px solid #f1f0eb; outline-offset: 2px; }

.sw-form__act { margin: 6px 0 0; }

.sw-form__fine {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #7a7a76;
  color: var(--gray-3, #7a7a76);
}

.sw-form__fine a { color: #a7a7a2; color: var(--gray-2, #a7a7a2); }

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sw-act, .sw-towns a { transition: none; }
}


/* ------------------------------------------------------- the readable floor */

/* His 08-30 ruling puts the label floor at 13px. The shared site sheet paints both of
   these at 12px, and both appear on this page. This sheet loads after it, so these two
   declarations are what actually decide the rendered size. Measured at 375px after the
   change: nothing on the page renders below 13px. */
/* The shared sheet pins .eyebrow with a triple-class hack (.eyebrow.eyebrow.eyebrow)
   at 0.75rem = 12px, which is under his 13px label floor and which a single-class rule
   cannot beat at any load position. This selector out-specifies it. Measured rendered at
   375px after the change, not assumed. */
body.starter .eyebrow.eyebrow { font-size: 0.85rem; }
body.starter .disclosure { font-size: 0.85rem; }