/* West Tower Matchmaker.
   Brand tokens read from westtower.com's own stylesheet, 20 August 2026.
   Mobile first throughout. Every input sits at 16px or larger so iOS does not zoom
   on focus, and the layout holds down to about 260px. */

:root {
  --primary: #c59c5b;        /* gold, the brand accent and primary CTA */
  --secondary: #f3ebde;      /* warm sand, section grounds */
  --light-primary: #f9f5ee;  /* cream, page background and text on dark */
  --body-color: #2b2b2b;
  --dark-green: #848e7d;
  --light-green: #a6b29d;
  --dark-grey: #6a6a6a;      /* all heading text, per their system */
  --darker-grey: #42473e;    /* footer ground */
  --line: #e2d7c4;
  --radius: 8px;             /* they round every image at 8px */
  --ease: cubic-bezier(.76, 0, .24, 1);
  --head: "ivypresto-display", "Cormorant Garamond", Georgia, serif;
  --body: "new-hero", "Jost", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Serif faces default to oldstyle figures, which turns 100 into something that
   reads as IOO and a price into guesswork. Force lining figures everywhere a
   number carries meaning. */
.bracket-fig, .yours-fig, .slider-val, .bd-val, .bracket-day, .yours-day,
.slider-help, .r-sub, .date-echo {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

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

body {
  margin: 0;
  background: var(--light-primary);
  color: var(--body-color);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: .4px;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--head);
  font-weight: 300;
  color: var(--dark-grey);
  line-height: 1.2;
  letter-spacing: 1.6px;
  margin: 0 0 12px;
}

p { margin: 0 0 16px; }

a { color: inherit; }

.skip {
  position: absolute; left: -9999px;
  background: var(--primary); color: var(--light-primary);
  padding: 10px 16px; border-radius: 100px; z-index: 60;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------ chrome */

.site-head {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  background: var(--light-primary);
}
.wordmark { display: inline-block; line-height: 0; }
.wordmark img {
  width: 172px; height: auto;
  max-width: 60vw;
}

.site-foot {
  margin-top: 48px;
  padding: 34px 16px;
  background: var(--darker-grey);
  color: var(--light-primary);
  text-align: center;
  font-size: 14px;
}
.site-foot p { margin: 0 0 6px; }
.site-foot a {
  color: var(--light-primary);
  /* Was a 21px tap target; the padding lifts it over the 44px floor without
     changing how the footer reads. */
  display: inline-block;
  padding: 12px 4px;
}
.foot-mark { width: 38px; height: auto; opacity: .85; margin-bottom: 14px; }

/* Full bleed photography, the way westtower.com opens a page. */
.hero-shot {
  position: relative;
  margin: 0 0 26px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  line-height: 0;
}
.hero-shot img {
  width: 100%;
  height: clamp(210px, 42vh, 420px);
  object-fit: cover;
  display: block;
}
.hero-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 20px 18px;
  /* A soft scrim so the type stays legible over any frame. */
  background: linear-gradient(to top, rgba(43, 43, 43, .62), rgba(43, 43, 43, 0));
  text-align: center;
}
.hero-cap-line {
  font-family: var(--head);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 1.6px;
  color: #fff;
  line-height: 1.25;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 0;
}

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 16px;              /* 16px floor, no iOS zoom */
  font-weight: 500;
  line-height: 1.5;
  padding: 13px 26px;
  border: 0;
  border-radius: 100px;         /* their pill */
  letter-spacing: normal;       /* buttons are the one untracked element */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), opacity .2s var(--ease);
}
.btn-primary { background: var(--primary); color: var(--light-primary); }
.btn-primary:hover { background: #b78c48; }
.btn-quiet { background: transparent; color: var(--dark-grey); text-decoration: underline; padding-left: 0; padding-right: 0; font-size: 16px; }
.btn-big { padding: 15px 34px; font-size: 17px; }
.btn:disabled { opacity: .38; cursor: default; }
.btn-primary:disabled:hover { background: var(--primary); }

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

.progress {
  height: 3px;
  background: var(--line);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 14px;
}
.progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width .3s var(--ease);
}

.step-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.step-count { font-size: 13px; color: var(--dark-grey); letter-spacing: 1px; }
.link-back {
  background: none; border: 0;
  font-family: var(--body); font-size: 15px;
  color: var(--dark-grey); text-decoration: underline; cursor: pointer;
  /* Back appears on every question after the first and was a 22px target. The
     padding lifts the hit area over 44px and the matching negative margin keeps
     it sitting exactly where it did, so nothing moves on the page. */
  /* A button does not inherit the body line-height, so padding alone landed at
     43.5px. The explicit floor makes the 44px guarantee exact rather than
     arithmetic that quietly drifts if the font changes. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  margin: 0 -6px;
}

.q-title { font-size: 27px; margin-bottom: 10px; }
.q-help { font-size: 15px; color: var(--dark-grey); margin-bottom: 20px; }
.q-body { margin-top: 18px; }

/* ------------------------------------------------------------ choices */

.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.choices-stack { flex-direction: column; flex-wrap: nowrap; }

.choice {
  font-family: var(--body);
  font-size: 16px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  color: var(--body-color);
}
.choice:hover { border-color: var(--primary); }
.choice.is-on { border-color: var(--primary); background: var(--secondary); }
.choice-rich { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.choice-label { font-weight: 500; }
.choice-note { font-size: 14px; color: var(--dark-grey); line-height: 1.4; }
.choice.is-fixed { opacity: .8; cursor: default; }

/* -------------------------------------------------------------- forms */

.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-size: 14px; color: var(--dark-grey); margin-bottom: 6px; }

.input {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;              /* never below 16px */
  line-height: 1.4;
  padding: 13px 14px;
  min-height: 50px;
  color: var(--body-color);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
}
.input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

select.input { background-image: none; }

.row { display: flex; gap: 10px; margin-bottom: 16px; }
.row .input { flex: 1 1 0; min-width: 0; }

/* iOS renders an empty date input blank, so it carries its own placeholder. */
.date-wrap { position: relative; margin-bottom: 12px; }
.date-input { min-height: 52px; text-align: left; }
.date-placeholder {
  position: absolute;
  left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: #9a9a9a;
  pointer-events: none;
}
.date-wrap.has-value .date-placeholder { display: none; }
.date-echo { font-size: 15px; color: var(--dark-grey); }

/* The whole row is the label, so tapping the sentence toggles the box. It still
   needs to clear 44px in its own right: this is the consent that decides whether
   West Tower may contact them, and a mis-tap here is a compliance problem, not
   just an annoyance. */
.consent {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; color: var(--dark-grey);
  margin: 4px 0 20px; line-height: 1.4;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}
.consent input {
  width: 24px; height: 24px; margin: 0; flex: none;
  accent-color: var(--primary);
}

/* ------------------------------------------------------------- flags */

.flag {
  font-size: 15px;
  line-height: 1.45;
  padding: 13px 15px;
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
  background: var(--secondary);
  margin: 0 0 18px;
}
.flag-good { border-left-color: var(--light-green); }
.flag-warn { border-left-color: #b8794a; }

/* ----------------------------------------------------------- results */

.r-head { padding: 8px 0 4px; }
.r-title { font-size: 30px; letter-spacing: 1.4px; }
.r-sub { font-size: 16px; color: var(--dark-grey); }

.r-section { margin: 34px 0; }
.r-h2 { font-size: 23px; }
.r-note { font-size: 15px; color: var(--dark-grey); line-height: 1.5; }
.r-note-quiet { font-size: 14px; font-style: italic; }

/* Running order */
.runorder { list-style: none; margin: 14px 0 0; padding: 0; }
.ro-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.ro-when { font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--primary); }
.ro-what { font-size: 16px; line-height: 1.45; }

/* Gallery. The heaviest thing on the page, so lazy and sized from the start. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);   /* their 8px, everywhere */
  background: var(--secondary);
}
.shot-placeholder img { opacity: .95; }

/* Bracket */
.bracket {
  background: var(--secondary);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin: 16px 0 18px;
}
.bracket-ends { display: flex; justify-content: space-between; gap: 10px; }
.bracket-end { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bracket-end-right { text-align: right; align-items: flex-end; }
.bracket-cap { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dark-grey); }
.bracket-fig { font-family: var(--head); font-size: 25px; color: var(--dark-grey); line-height: 1.1; }
.bracket-day { font-size: 12px; color: var(--dark-grey); }

.track {
  position: relative;
  height: 3px;
  background: linear-gradient(90deg, var(--light-green), var(--primary));
  border-radius: 100px;
  margin: 16px 0 12px;
}
.track-marker {
  position: absolute; top: 50%;
  width: 15px; height: 15px;
  background: #fff;
  border: 3px solid var(--primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left .25s var(--ease);
}

.yours { display: flex; flex-direction: column; gap: 1px; align-items: center; text-align: center; }
.yours-cap { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dark-grey); }
.yours-fig { font-family: var(--head); font-size: 33px; color: var(--body-color); line-height: 1.1; }
.yours-day { font-size: 13px; color: var(--dark-grey); }

/* Sliders */
.sliders { margin: 22px 0 8px; }
.slider { margin-bottom: 20px; }
.slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.slider-label { font-size: 15px; }
.slider-val { font-family: var(--head); font-size: 22px; color: var(--dark-grey); }
.slider-help { font-size: 13px; color: var(--dark-grey); margin: 4px 0 0; line-height: 1.4; }

.range {
  display: block;
  width: calc(100% - 26px);     /* keep the thumb inside the track at both ends */
  margin: 4px auto 0;
  /* 44px is the accessibility floor for anything you drag with a thumb, and the
     guest sliders are the main interaction on the results page. The visible track
     stays 3px; the extra height is invisible grab area around it. */
  height: 44px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.range::-webkit-slider-runnable-track { height: 3px; background: var(--line); border-radius: 100px; }
.range::-moz-range-track { height: 3px; background: var(--line); border-radius: 100px; }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; margin-top: -11.5px;
  background: var(--primary); border: 0; border-radius: 50%; cursor: pointer;
}
.range::-moz-range-thumb {
  width: 26px; height: 26px;
  background: var(--primary); border: 0; border-radius: 50%; cursor: pointer;
}

/* Breakdown */
.breakdown { margin-top: 20px; }
.bd-h { font-size: 17px; font-family: var(--body); font-weight: 500; color: var(--body-color); letter-spacing: .4px; }
.bd-list { list-style: none; margin: 10px 0 0; padding: 0; }
.bd-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.bd-label { color: var(--dark-grey); min-width: 0; }
.bd-val { white-space: nowrap; }
.bd-row-req .bd-val { font-style: italic; color: var(--dark-grey); }
.bd-total { border-bottom: 0; border-top: 2px solid var(--primary); font-size: 17px; padding-top: 13px; }
.bd-total .bd-label { color: var(--body-color); }
.bd-total .bd-val { font-family: var(--head); font-size: 21px; }

/* Includes */
.includes { margin: 12px 0 0; padding-left: 20px; }
.includes li { margin-bottom: 9px; font-size: 15px; line-height: 1.5; }

/* Twilight door and CTA */
.r-twilight {
  margin: 34px 0;
  padding: 20px 18px;
  background: var(--secondary);
  border-radius: var(--radius);
}
.r-twilight .r-h2 { font-size: 20px; }
.r-twilight .r-note { margin-bottom: 0; }

.r-cta {
  margin: 38px 0;
  padding: 30px 20px;
  background: var(--primary);
  color: var(--light-primary);
  border-radius: var(--radius);
  text-align: center;
}
.r-cta-title { color: var(--light-primary); font-size: 25px; }
.r-cta-note { color: var(--light-primary); font-size: 15px; opacity: .95; }
.r-cta .btn-primary { background: var(--light-primary); color: var(--primary); }
.r-cta .btn-primary:hover { background: #fff; }
.r-cta-soft { color: var(--light-primary); font-size: 14px; margin: 14px 0 0; opacity: .92; }

.r-foot { margin: 30px 0 10px; }
/* Stays at the 16px floor even though it is a read only field: tapping it still
   focuses, and anything under 16px makes iOS zoom the page. */
.link-field { font-size: 16px; color: var(--dark-grey); margin-bottom: 12px; }

/* Gate and preview */
.gate { text-align: center; padding: 40px 0 20px; }
.gate .r-sub { max-width: 460px; margin: 0 auto 22px; }

.preview-badge {
  position: fixed; left: 10px; bottom: 10px; z-index: 50;
  background: var(--darker-grey); color: var(--light-primary);
  font-size: 12px; letter-spacing: 1px;
  padding: 7px 13px; border-radius: 100px;
}

.toast {
  position: fixed; left: 50%; bottom: 16px;
  transform: translate(-50%, 130%);
  background: var(--darker-grey); color: var(--light-primary);
  font-size: 14px; padding: 12px 18px; border-radius: 100px;
  max-width: calc(100vw - 24px);
  transition: transform .3s var(--ease);
  z-index: 55;
}
.toast.is-on { transform: translate(-50%, 0); }

/* ------------------------------------------------------- wider screens */

@media (min-width: 620px) {
  main { padding: 34px 24px 0; }
  .q-title { font-size: 33px; }
  .r-title { font-size: 40px; }
  .r-h2 { font-size: 27px; }
  .ro-row { grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .bracket { padding: 24px 22px; }
  .bracket-fig { font-size: 29px; }
  .yours-fig { font-size: 40px; }
  .r-cta { padding: 40px 30px; }
  .wordmark img { width: 210px; }
  .hero-shot { margin-bottom: 34px; }
  .hero-shot img { height: clamp(280px, 46vh, 520px); }
  .hero-cap-line { font-size: 26px; }
  .hero-cap { padding: 60px 24px 26px; }
}

/* Very narrow. A client reviewed a previous build at 258px. */
@media (max-width: 340px) {
  main { padding: 18px 10px 0; }
  .q-title { font-size: 22px; }
  .r-title { font-size: 24px; }
  .wordmark img { width: 138px; }
  .hero-shot img { height: 175px; }
  .hero-cap-line { font-size: 15px; }
  .hero-cap { padding: 30px 12px 12px; }
  .bracket { padding: 14px 11px; }
  .bracket-ends { gap: 6px; }
  .bracket-fig { font-size: 19px; }
  .bracket-day { font-size: 11px; }
  .yours-fig { font-size: 27px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 6px; }
  .btn { padding: 12px 16px; font-size: 15px; }
  .btn-big { padding: 13px 18px; font-size: 16px; }
  .bd-row { font-size: 14px; gap: 8px; }
  .r-cta { padding: 22px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}