/* ==========================================================================
   Watershed — SEO — Garage Building Permits
   Faithful reproduction of Figma node 7004:4 (1920 x 8021)
   ========================================================================== */

:root {
  /* Design tokens (from Figma) */
  --navy:  #2c477b;
  --green: #72c156;
  --ink:   #0f1217;
  --grey:  #f4f5f5;
  --white: #ffffff;

  /* Layout constants */
  --canvas:      1920px;
  --gutter:      320px;  /* Section side padding */
  --section-y:   120px;  /* Section vertical padding */
  --stack-gap:    40px;  /* Gap between blocks within a section */
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html { background: var(--ink); }

body {
  margin: 0;
  font-family: Quicksand, "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

p,
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; }
img { display: block; border: 0; }
a { color: inherit; text-decoration: none; }

/* The design is a fixed 1920px canvas. The stage clips and owns the
   scaled height; the canvas inside is transform-scaled to fit narrower
   viewports. Without JS the page simply scrolls horizontally. */
.stage {
  overflow: hidden;
  width: 100%;
}

.canvas {
  width: var(--canvas);
  margin: 0 auto;
  background: var(--white);
  transform-origin: top left;
}

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

.h2 {
  font-size: 52px;
  font-weight: 700;
  line-height: normal;
}

.body {
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

.center { text-align: center; }

/* Preserves the trailing empty line present in the Figma text blocks */
.spacer-line { font-size: 24px; line-height: normal; }

/* --------------------------------------------------------------------------
   Section shells
   -------------------------------------------------------------------------- */

.section {
  width: var(--canvas);
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack-gap);
}

.section--grey  { background: var(--grey); }
.section--navy  { background: var(--navy); color: var(--white); }

/* Split (image + copy) sections */
.split {
  width: var(--canvas);
  display: flex;
  align-items: center;
  background: var(--navy);
}

.split__media { align-self: stretch; position: relative; }
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__copy {
  flex: 1 0 0;
  min-width: 0;
  padding: var(--section-y) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack-gap);
}

.split__copy--green { background: var(--green); }
.split__copy--green .h2 { color: var(--white); line-height: 1.1; }
.split__copy--green .body { color: var(--ink); }
.split__copy--navy { color: var(--white); }

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 32px 64px;
  border-radius: 100px;
  background: var(--green);
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  width: var(--canvas);
  height: 152px;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.nav__logo {
  width: 509px;
  height: 112px;
  flex-shrink: 0;
}

.nav__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav__links {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  color: var(--ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  width: var(--canvas);
  height: 670px;
  overflow: hidden;
}

/* Inner frame is 720px tall and sits 50px above the clipped box */
.hero__inner {
  position: absolute;
  left: 0;
  top: -50px;
  width: var(--canvas);
  height: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--ink);
  pointer-events: none;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.63;
}

.hero__title,
.hero__sub,
.hero .btn { position: relative; }

.hero__title {
  font-size: 70.031px;
  font-weight: 500;
  line-height: 85px;
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.hero__sub {
  font-size: 40px;
  font-weight: 500;
  line-height: 60px;
  color: var(--white);
  text-align: center;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Section 2 / 12 — centred heading + full-width body
   -------------------------------------------------------------------------- */

.section__heading {
  width: 100%;
  color: var(--navy);
}

.section__body { width: 100%; color: var(--ink); }

/* Sections 3 and 14 use a heading slightly wider than the gutter box */
.heading--wide { width: 1324px; }
.body--1280    { width: 1280px; }

/* --------------------------------------------------------------------------
   Split copy widths (match Figma text-box widths exactly)
   -------------------------------------------------------------------------- */

.copy-596 { width: 596px; }
.copy-580 { width: 580px; }
.copy-604 { width: 604px; }

/* --------------------------------------------------------------------------
   Section 6 — Why Trust Watershed
   -------------------------------------------------------------------------- */

.trust {
  position: relative;
  width: var(--canvas);
  height: 908px;
  background: var(--white);
}

.trust__heading {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 100px;
  height: 65px;
  text-align: center;
  color: var(--navy);
}

.trust__intro {
  position: absolute;
  left: 960px;
  top: 190px;
  width: 1344px;
  transform: translateX(-50%);
  color: var(--ink);
}

.trust__grid {
  position: absolute;
  left: 50%;
  top: 355px;
  width: 1620px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.trust__card {
  width: 246.667px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Outer icon box — preserved from the design, independent of the leaf */
.trust__icon {
  width: 161px;
  height: 139px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust__title {
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  color: var(--ink);
}

.trust__title--narrow { width: 224px; }

.trust__text {
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Section 7 — FAQs
   -------------------------------------------------------------------------- */

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

.faqs__heading { color: var(--navy); }

.faq {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.faq__q {
  flex: 1 0 0;
  min-width: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.faq__chevron {
  width: 28.004px;
  height: 16px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  width: var(--canvas);
  height: 720px;
}

.footer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Quote form + thank-you pages
   Built on the same tokens, type scale and 120/320 spacing rhythm as the
   main page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Short page header — same treatment as the home hero, reduced height
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  width: var(--canvas);
  height: 420px;
  overflow: hidden;
}

.pagehead__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.pagehead__bg {
  position: absolute;
  inset: 0;
  background: var(--ink);
  pointer-events: none;
}

.pagehead__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.63;
}

.pagehead__title,
.pagehead__sub { position: relative; }

.pagehead__title {
  font-size: 70.031px;
  font-weight: 500;
  line-height: 85px;
  color: var(--white);
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.pagehead__sub {
  font-size: 40px;
  font-weight: 500;
  line-height: 60px;
  color: var(--white);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Button as a real <button>
   -------------------------------------------------------------------------- */

button.btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

button.btn:hover,
a.btn:hover { background: #63ad4a; }

.btn:focus-visible {
  outline: 4px solid var(--navy);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form { width: 1280px; }

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field--full { grid-column: 1 / -1; }

.field__label {
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  color: var(--ink);
}

.field__label .req { color: var(--green); }

.field__hint {
  font-size: 20px;
  font-weight: 400;
  color: #5c636d;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 20px 24px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  color: var(--ink);
  background: var(--white);
  border: 2px solid #d5d9de;
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea {
  min-height: 220px;
  resize: vertical;
}

.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 76px;
  background-image: url("assets/chevron.svg");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 28.004px 16px;
}

.field input::placeholder,
.field textarea::placeholder { color: #9aa1aa; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(114, 193, 86, 0.25);
}

/* Error state — only applied after a submit attempt */
.field--error input,
.field--error select,
.field--error textarea { border-color: #c0392b; }

.field__error {
  display: none;
  font-size: 20px;
  font-weight: 500;
  color: #c0392b;
}

.field--error .field__error { display: block; }

/* Consent checkbox — overrides the column direction inherited from .field */
.consent {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.consent input {
  width: 32px;
  height: 32px;
  margin: 4px 0 0;
  flex-shrink: 0;
  accent-color: var(--green);
}

.consent label {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
}

.consent.field--error label { color: #c0392b; }

.form__actions {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.form__note {
  width: 1280px;
  margin-top: 40px;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  color: #5c636d;
}

/* --------------------------------------------------------------------------
   Thank-you page
   -------------------------------------------------------------------------- */

.confirm__icon {
  width: 175.5px;
  height: 201px;
}

.steps {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 80px;
}

.steps__card {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.steps__card .trust__title,
.steps__card .trust__text { width: 100%; }

.steps__num {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}