/* ==========================================================================
   Adult Health & Wellness Center — home page sections

   Written in the order they appear in the Figma. Every length is the Figma
   pixel divided by 16, so 1.25rem reads as "20px in the 1600px frame" and the
   root font size in style.css scales the whole page at once.

   Type sizes are not eyeballed: each one is the size at which Poppins renders
   the string to the width the Figma text node reports (e.g. "Labor Department"
   is 619px wide, which is Poppins 700 at 67px). Where the design's own face is
   a little narrower than Poppins the width is matched rather than the cap
   height, so every line breaks in the same place as the design.
   ========================================================================== */

/* ==========================================================================
   Hero
   The photograph runs the full 1600 x 825 of the frame, which starts behind
   the header, so it is pulled up by the header's own height and the section
   clips it. The wash over the left half is a gradient, not part of the image.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 7.125rem 0 9.3125rem;
}

.hero__bg {
  position: absolute;
  top: -5.25rem;
  left: 0;
  width: 100%;
  height: 51.5625rem;
  object-fit: cover;
  object-position: center;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(233, 240, 246, 0.96) 0%,
              rgba(233, 240, 246, 0.90) 26%,
              rgba(226, 236, 244, 0.55) 45%,
              rgba(219, 232, 242, 0.10) 62%,
              rgba(219, 232, 242, 0) 72%);
}

.hero__inner { position: relative; z-index: 1; }

.hero__eyebrow {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--teal);
}

.hero__title {
  margin-top: 0.875rem;
  font-size: 4.1875rem;
  font-weight: 300;
  line-height: 5.0625rem;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.hero__title strong { font-weight: 700; }

/* The home page's H1 comes from the content document and is a longer line
   than the Figma's display headline. Same face, weights and colour; the size
   is the one at which it still sets to three lines inside the hero's wash. */
.hero__title--long {
  font-size: 3.4375rem;
  line-height: 4.25rem;
}

.hero__tagline {
  margin-top: 0.6875rem;
  font-size: 1.84375rem;
  font-weight: 700;
  line-height: 2.8125rem;
  color: var(--teal);
}

.hero__lead {
  width: 40.75rem;
  max-width: 100%;
  margin-top: 0.625rem;
  font-size: 0.890625rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--navy);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.0625rem;
  margin-top: 2.125rem;
}

/* ==========================================================================
   Assurance strip — the four badges and the DEEOIC card beside them.
   The card starts 106px higher than the badges so it laps over the hero.
   ========================================================================== */
.assurance { position: relative; }

.assurance__inner {
  display: grid;
  grid-template-columns: 59.8125rem 25rem;
  gap: 3.9375rem;
  padding-top: 2.4375rem;
}

.badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.5rem;
}

.badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 10.5rem;
  padding: 2rem 0.25rem 0;
  border: 1px solid rgba(3, 40, 103, 0.45);
  border-radius: 0.75rem;
  background: var(--white);
  text-align: center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.badge:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.75rem 1.5rem rgba(4, 39, 103, 0.12);
}

/* the hairline between two badges, drawn in the gap rather than on a card and
   centred on the card whatever height its label gives it */
.badge + .badge::before {
  content: '';
  position: absolute;
  left: -1.78125rem;
  top: 50%;
  width: 1px;
  height: 2.8125rem;
  margin-top: -1.40625rem;
  background: rgba(0, 0, 0, 0.37);
}

.badge__icon { width: 3.5rem; height: 3.5rem; }

/* each label has its own measured width in the Figma, which is what decides
   where it breaks — "Experienced Medical / Team", "Specialists In /
   Occupational Lung / Disease" and so on */
.badge__label {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25rem;
  max-width: var(--label-w, none);
  color: var(--navy);
}

.badge:nth-child(1) { --label-w:  8.875rem; }
.badge:nth-child(2) { --label-w: 11.375rem; }
.badge:nth-child(3) { --label-w: 11.5rem;   }
.badge:nth-child(4) { --label-w: 11.25rem;  }

/* --- the navy DEEOIC card ------------------------------------------------ */
.deeoic {
  position: relative;
  z-index: 2;
  margin-top: -6.625rem;
  min-height: 17.125rem;
  padding: 0 1.875rem 1.8125rem;
  border-radius: 1rem;
  background: var(--navy);
  text-align: center;
}

/* the seal laps 41px over the top of the card, exactly as in the Figma */
.deeoic__seal {
  width: 9.375rem;
  height: 9.375rem;
  margin: -2.5625rem auto 0.875rem;
}

.deeoic__title {
  font-size: 1.54375rem;
  font-weight: 700;
  line-height: 2.4375rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--teal);
}

.deeoic__text {
  margin-top: 0.4375rem;
  max-width: 19.5rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.890625rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--white);
}

.assurance__rule {
  height: 1px;
  margin-top: 2.8125rem;
  background: #CFCFCF;
}

/* ==========================================================================
   How DEEOIC care works
   ========================================================================== */
.how { padding: 3.5rem 0 5.3125rem; }

.how__title { text-align: center; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 25rem);
  justify-content: space-between;
  margin-top: 4.5rem;
}

.step {
  position: relative;
  display: flex;
  gap: 1.15625rem;
}

.step__icon {
  flex: none;
  width: 3.48rem;
  height: 3.48rem;
  margin-top: 0.921875rem;
}

.step__text { min-width: 0; }

.step__label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal);
}

.step__title {
  margin-top: 0.19375rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.375rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--navy);
}

.step__desc {
  margin-top: 0.19375rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.28125rem;
  color: var(--body);
}

/* The dotted run sits in the space between two steps. The columns are 400
   wide rather than the Figma 410, which opens the gap to 110; the graphic
   and it is pulled 16px back off the column edge so it sits centred between
   where the step text actually ends (348 / 358) and the next step's disc
   (502) — roughly 30px of air on either side — rather than hugging the disc. */
.step__connector {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 5.5625rem;
  height: 0.8125rem;
  margin-left: -1rem;
  transform: translateY(-50%);
}

/* ==========================================================================
   Conditions we treat
   ========================================================================== */
.conditions {
  padding: 5.375rem 0 6.3375rem;
  background: var(--navy);
}

.conditions__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.conditions__title { color: var(--white); }

.conditions__lead {
  width: 46rem;
  max-width: 100%;
  margin-top: 1.5rem;
  font-size: 0.890625rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--white);
}

.conditions__head .btn { margin-top: 2.875rem; }

.condition-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.875rem;
  margin-top: 4.0625rem;
}

.condition {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 20.85rem;
  padding: 2rem 0.75rem 0;
  border: 1px solid rgba(16, 195, 167, 0.35);
  border-radius: 0.625rem;
  text-align: center;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.condition:hover {
  border-color: var(--teal);
  transform: translateY(-0.25rem);
}

/* the artwork keeps its own aspect ratio, at the height the Figma gives it */
.condition__art { width: auto; height: var(--art-h); }

.condition:nth-child(1) { --art-h: 11.703125rem; --lbl-w:  7.65625rem; }
.condition:nth-child(2) { --art-h: 12.169375rem; --lbl-w:  8.15625rem; }
.condition:nth-child(3) { --art-h: 11.703125rem; --lbl-w: 10.5625rem;  }
.condition:nth-child(4) { --art-h: 11.715625rem; --lbl-w: 11.8125rem;  }
.condition:nth-child(5) { --art-h: 11.548125rem; --lbl-w: 11.8125rem;  }
.condition:nth-child(6) { --art-h: 11.870625rem; --lbl-w: 11.8125rem;  }

.condition__label {
  position: relative;
  width: calc(100% + 1.5rem);
  height: 4.6rem;
  margin-top: auto;
  padding-top: 0.6875rem;
  border-top: 1px solid rgba(16, 195, 167, 0.35);
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.375rem;
  color: var(--teal);
}

/* each label wraps at its own Figma width, so the two lines split exactly
   where the design splits them */
.condition__label > span {
  display: block;
  margin: 0 auto;
  max-width: var(--lbl-w, none);
}


/* ==========================================================================
   Care team
   ========================================================================== */
.team { padding: 4.9375rem 0 0; }

.team__title { text-align: center; }

.team__sub {
  margin-top: 1.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--teal);
  text-align: center;
}

.team-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5625rem;
  margin-top: 3.5rem;
}

.member {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  min-height: 32.75rem;
  padding: 1.3125rem 1.3125rem 1.28125rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 0.625rem 1.75rem rgba(4, 39, 103, 0.10);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

/* the pale shape behind the photograph, clipped by the card */
.member::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -5.2425rem;
  left: 11.795rem;
  width: 16.6875rem;
  height: 16.6875rem;
  border-radius: 2.5rem;
  background: var(--lilac);
}

.member:hover {
  transform: translateY(-0.375rem);
  box-shadow: 0 1.25rem 2.5rem rgba(4, 39, 103, 0.16);
}

.member__photo {
  overflow: hidden;
  border-radius: 0.75rem;
  aspect-ratio: 1;
}

.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.member:hover .member__photo img { transform: scale(1.04); }

.member__badge {
  align-self: flex-start;
  margin-top: 1.048rem;
  padding: 0.2625rem 0.525rem;
  border-radius: 0.375rem;
  background: #CCFBF1;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 0.9375rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0F766E;
}

.member__name {
  margin-top: 0.524rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5625rem;
  color: var(--navy);
}

.member__desc {
  margin-top: 0.4rem;
  font-size: 0.785rem;
  font-weight: 400;
  line-height: 1.1875rem;
  color: var(--body);
}

.member__link {
  margin-top: auto;
  padding-top: 0.7875rem;
  border-top: 1px solid var(--line);
  font-size: 0.89375rem;
  font-weight: 600;
  line-height: 1.0625rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--teal);
  transition: color 0.2s ease;
}

.member__link span {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.member__link:hover span { transform: translateX(0.25rem); }

/* ==========================================================================
   Trust bar + work-related care

   The mint band starts level with the middle of the trust bar, so the bar is
   the first child of the section and is pulled half of its height upwards.
   ========================================================================== */
.work {
  margin-top: 10.4375rem;
  padding-bottom: 5.5rem;
  background: var(--mint);
}

.trust {
  position: relative;
  top: -5.5rem;
  display: grid;
  grid-template-columns: 25.375rem 1fr;
  max-width: 76rem;
  height: 10.375rem;
  margin: 0 auto;
  border-radius: 1rem;
  background: var(--teal);
  color: var(--white);
}

/* 34.5px is the size at which "Your Health Is in" measures the 285px it inks
   in the design; the two lines sit 44 apart */
.trust__title {
  align-self: center;
  padding: 0 1rem 0 3.5625rem;
  font-size: 2.15625rem;
  font-weight: 700;
  line-height: 2.75rem;
}

.trust__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 5.3125rem 5.0625rem;
  border-left: 1px solid rgba(255, 255, 255, 0.32);
}

.trust__list li {
  display: flex;
  align-items: center;
  gap: 0.7725rem;
  padding: 0 1rem 0 3.0625rem;
  font-size: 1.0375rem;
  font-weight: 400;
  line-height: 1.3125rem;
}

.trust__list li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.32); }

.trust__list img { flex: none; width: 2.1625rem; height: 2.1625rem; }

/* --- the section itself -------------------------------------------------- */
.work__grid {
  display: grid;
  grid-template-columns: 48.6875rem 39.1875rem;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.work__text { padding-top: 0.6875rem; }

.work__lead {
  width: 37.75rem;
  max-width: 100%;
  margin-top: 1.375rem;
  font-size: 0.890625rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--navy);
}

.work__subhead {
  margin-top: 1.5625rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 2rem;
  color: var(--teal);
}

.work__list { margin-top: 0.5625rem; }

.work__list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--navy);
}

.work__list img { flex: none; width: 1rem; height: 1rem; }

.work__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.3125rem;
}

.work__media { position: relative; }

.work__photo {
  width: 100%;
  height: 32.3125rem;
  border-radius: 1rem;
  object-fit: cover;
  object-position: 62% center;
}

/* The white benefits card laps out of the photograph to the left. The export
   carries a transparent margin — the card itself starts 7.7% down inside it —
   so the box is offset to put the visible card on the Figma position
   (x 526-946, y 3525-3795). The teal underneath is a soft glow, not a hard
   offset block, and the alpha channel lets drop-shadow trace the card. */
/* The benefits card laps out of the photograph to the left.
   The export is 1150 x 869 with the card itself occupying x 3-1138, y 67-801 —
   the rest is a transparent margin carrying a grey drop-shadow that has no
   business on the mint. So the box below is the *card*, and __face crops the
   export down to it and gives it a shadow of its own. */
.work__card {
  position: absolute;
  /* 13.5px lower than the Figma places it, so the foot of the card lines up
     with the foot of the buttons in the column beside it */
  top: 14.28125rem;
  left: -21.4375rem;
  width: 26.3125rem;
  aspect-ratio: 1136 / 735;
}

.work__card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0.8125rem;
  /* the Figma drop shadow: x 2, y 5, blur 12, spread 0, #10C3A7 at 29% */
  box-shadow: 0.125rem 0.3125rem 0.75rem rgba(16, 195, 167, 0.29);
}

.work__card__face img {
  position: absolute;
  left: -0.264%;      /*   -3 / 1136 */
  top: -9.116%;       /*  -67 /  735 */
  width: 101.232%;    /* 1150 / 1136 */
  max-width: none;
}

/* ==========================================================================
   Ready to schedule + the appointment form
   ========================================================================== */
.contact { padding: 4.375rem 0 4.875rem; }

.contact__grid {
  display: grid;
  grid-template-columns: 36.25rem 48.1875rem;
  gap: 4.3125rem;
  align-items: start;
}

.contact__side {
  padding-top: 1.125rem;
  text-align: center;
}

.contact__lead {
  width: 30.875rem;
  max-width: 100%;
  margin: 1.5rem auto 0;
  font-size: 0.890625rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--navy);
}

.contact__cards {
  display: grid;
  grid-template-columns: 17.8125rem 17.0625rem;
  gap: 1.0625rem 1.375rem;
  margin-top: 2.25rem;
  text-align: left;
}

.contact-card {
  padding: 2.25rem 1.6875rem;
  border: 1px solid rgba(3, 40, 103, 0.35);
  border-radius: 0.625rem;
  background: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-card:hover {
  border-color: var(--teal);
  transform: translateY(-0.25rem);
  box-shadow: 0 0.75rem 1.5rem rgba(4, 39, 103, 0.10);
}

/* the hours card is the one whose text runs the full width of the card in the
   Figma, and is centred inside it */
.contact-card--hours {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
}

.contact-card--hours .contact-card__head { justify-content: center; white-space: nowrap; }

/* 18.2px is the size at which "Mon – Fri: 9:00 AM – 5:00 PM" measures the
   253px the Figma gives it, so it stays on one line */
.contact-card--hours .contact-card__body { font-size: 1.0625rem; white-space: nowrap; }

.contact-card--wide {
  grid-column: 1 / -1;
  padding-left: 2.275rem;
  padding-right: 2.275rem;
}

.contact-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 1.40625rem;
  font-weight: 700;
  line-height: 2.125rem;
  color: var(--navy);
}

.contact-card__icon {
  display: block;
  flex: none;
  width: 1.99rem;
  height: 1.99rem;
}

.contact-card__icon img { width: 100%; height: 100%; }

.contact-card__phone {
  display: block;
  margin-top: 1.1875rem;
  font-size: 1.8125rem;
  font-weight: 700;
  line-height: 3rem;
  white-space: nowrap;
  color: var(--teal);
  transition: color 0.2s ease;
}

.contact-card__phone:hover { color: var(--navy); }

.contact-card__body {
  margin-top: 0.8125rem;
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.6875rem;
  color: var(--navy);
}

.contact-card--wide .contact-card__body { margin-top: 1.125rem; }

/* the address is a link to the Google listing, set exactly as the text was */
.contact-card__address {
  display: block;
  transition: color 0.2s ease;
}

.contact-card__address:hover { color: var(--teal); }

.contact__seal {
  width: 13.5rem;
  height: 13.5rem;
  margin: 1.8125rem auto 0;
}

/* --- the form card ------------------------------------------------------- */
.form-card {
  padding: 3rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1.25rem 2.75rem rgba(4, 39, 103, 0.08);
}

.form-card__title {
  font-size: 2.3125rem;
  font-weight: 500;
  line-height: 3.375rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-align: center;
}

.form-card__sub {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6875rem;
  color: var(--body);
  text-align: center;
}

.form { margin-top: 1.5rem; }

.form__field + .form__field,
.form__row + .form__field,
.form__field + .form__row { margin-top: 1.5rem; }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* the pair inside a row are grid cells, not stacked fields — the gap already
   separates them */
.form__row .form__field + .form__field { margin-top: 0; }

.form label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3125rem;
  color: var(--navy);
}

.form input,
.form select,
.form textarea {
  width: 100%;
  display: block;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4375rem;
  color: var(--navy);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form input,
.form select { height: 3.4375rem; }

.form textarea {
  height: 7.5rem;
  padding: 1rem;
  resize: vertical;
}

.form ::placeholder { color: #98A1AE; opacity: 1; }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 0;
  background: var(--white);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(16, 195, 167, 0.16);
}

/* the "I am a..." control carries the teal outline in the Figma */
.form__select { position: relative; }

.form__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  border-color: var(--teal);
  background: var(--white);
  cursor: pointer;
}

.form__chevron {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  color: var(--navy);
  pointer-events: none;
}

/* honeypot — off-screen rather than display:none, which some bots skip */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* nothing to say, nothing to take up room — the Figma has the button 36px
   under the message box */
.form-status:empty { display: none; }

.form-status.is-ok { color: #0E9C86; }
.form-status.is-error { color: #C0392B; }

.form .btn--block { margin-top: 2.25rem; }

/* ==========================================================================
   Tablet and mobile

   Above 1200 the page is the Figma frame scaled by one root font size, so
   nothing here runs. Below it the root returns to 16px and the layout
   re-flows in four steps:

     1200  desktop grids stack; the nav becomes a drawer
      900  two-up rows go to two narrow columns, the six conditions to three
      680  everything single column, type steps down
      420  small-phone trims

   Sizes written in the 1600px frame (a 3rem heading is 48px there) are
   brought back to sensible on-screen values as they go.
   ========================================================================== */
@media (max-width: 1200px) {
  .section-title { font-size: 2.25rem; line-height: 1.24; }

  /* --- hero --- */
  .hero { padding: 3.5rem 0 4rem; }

  .hero__bg { top: 0; height: 100%; object-position: 74% center; }

  .hero::after {
    background: linear-gradient(175deg,
                rgba(233, 240, 246, 0.96) 0%,
                rgba(233, 240, 246, 0.88) 42%,
                rgba(226, 236, 244, 0.78) 100%);
  }

  .hero__eyebrow { font-size: 0.9375rem; line-height: 1.5rem; letter-spacing: 0.04em; }
  .hero__title { margin-top: 0.5rem; font-size: 3rem; line-height: 1.14; }
  .hero__tagline { margin-top: 0.75rem; font-size: 1.5rem; line-height: 1.35; }
  .hero__lead { width: 34rem; margin-top: 0.75rem; font-size: 1rem; line-height: 1.6; }
  .hero__actions { flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

  /* --- badges + DEEOIC card --- */
  .assurance__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-top: 3rem;
  }

  .badges { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .badge:nth-child(n) { --label-w: none; }
  .badge { min-height: 0; padding: 1.75rem 0.75rem; }
  .badge + .badge::before { display: none; }

  /* the seal laps out of the top of the card, so on a stacked layout the card
     needs clear air above it or the seal sits on the badges */
  .deeoic {
    max-width: 30rem;
    margin: 3.25rem auto 0;
    padding: 0 1.75rem 2rem;
  }

  .deeoic__seal { width: 8.5rem; height: 8.5rem; margin-top: -2.75rem; }
  .deeoic__title { font-size: 1.375rem; line-height: 1.5; }
  .deeoic__text { max-width: none; font-size: 1rem; line-height: 1.6; }

  .assurance__rule { margin-top: 3rem; }

  /* --- steps --- */
  .how { padding: 3rem 0 3.5rem; }

  .steps {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 2.5rem;
  }

  .step__connector { display: none; }
  .step__icon { width: 3.25rem; height: 3.25rem; margin-top: 0.125rem; }
  .step__label { font-size: 0.75rem; }
  .step__title { font-size: 1.0625rem; line-height: 1.4; }
  .step__desc { font-size: 1rem; line-height: 1.55; }

  /* --- conditions --- */
  .conditions { padding: 3.5rem 0 4rem; }

  .conditions__head { flex-direction: column; align-items: flex-start; }
  .conditions__head .btn { margin-top: 1.5rem; }
  .conditions__lead { width: auto; max-width: 44rem; font-size: 1rem; line-height: 1.6; }

  .condition-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }

  .condition:nth-child(n) { --art-h: 9.5rem; --lbl-w: none; }
  .condition { height: auto; padding-bottom: 0; }
  .condition__art { margin-bottom: 1.5rem; }
  .condition__label { height: auto; padding-bottom: 1.125rem; font-size: 1.0625rem; line-height: 1.4; }

  /* --- team --- */
  .team { padding-top: 3.5rem; }
  .team__sub { margin-top: 1rem; font-size: 1rem; line-height: 1.5; }
  .team-row { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; }

  .member { min-height: 0; padding: 1.25rem 1.25rem 1.5rem; }
  .member::before { top: -6rem; left: auto; right: -5rem; }
  .member__badge { margin-top: 1rem; }
  .member__name { font-size: 1.25rem; line-height: 1.35; }
  .member__desc { font-size: 0.9375rem; line-height: 1.5; }
  .member__link { margin-top: 1.25rem; padding-top: 1rem; font-size: 0.875rem; }

  /* --- trust bar --- */
  .work { margin-top: 6rem; padding-bottom: 3.5rem; }

  .trust {
    grid-template-columns: 1fr;
    max-width: none;
    height: auto;
    top: -3.5rem;
    margin-bottom: -1rem;
    padding: 1.75rem 0;
  }

  .trust__title {
    padding: 0 1.75rem 1.25rem;
    font-size: 1.75rem;
    line-height: 1.32;
  }

  .trust__list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.32);
  }

  .trust__list li { padding: 0.9375rem 1.75rem; font-size: 1rem; line-height: 1.45; }
  .trust__list li:nth-child(n + 2) { border-top: 1px solid rgba(255, 255, 255, 0.32); }
  .trust__list li:nth-child(2) { border-top: 0; }
  .trust__list img { width: 1.75rem; height: 1.75rem; }

  /* --- work-related --- */
  .work__grid { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.5rem; }
  .work__text { padding-top: 0; }
  .work__lead { width: auto; max-width: 40rem; margin-top: 1rem; font-size: 1rem; line-height: 1.6; }
  .work__subhead { margin-top: 1.5rem; font-size: 1.25rem; }
  .work__list { margin-top: 0.5rem; }
  .work__list li { height: auto; padding: 0.375rem 0; font-size: 1rem; }
  .work__actions { flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

  .work__media { padding-bottom: 4rem; }
  .work__photo { height: 22rem; border-radius: 0.75rem; }

  .work__card {
    position: relative;
    top: auto;
    left: auto;
    width: 24rem;
    max-width: 82%;
    margin: -4.5rem auto 0 0;
  }

  /* --- contact --- */
  .contact { padding: 3.5rem 0; }
  .contact__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact__side { padding-top: 0; }
  .contact__lead { width: auto; max-width: 34rem; font-size: 1rem; line-height: 1.6; }

  .contact__cards { grid-template-columns: 1fr 1fr; max-width: 40rem; margin-inline: auto; }
  .contact-card { padding: 1.5rem 1.25rem; }
  .contact-card--hours,
  .contact-card--wide { padding-left: 1.25rem; padding-right: 1.25rem; }

  .contact-card--hours .contact-card__head,
  .contact-card--hours .contact-card__body { white-space: normal; }

  .contact-card__head { gap: 0.625rem; font-size: 1.1875rem; line-height: 1.4; }
  .contact-card__icon { width: 1.75rem; height: 1.75rem; }
  .contact-card__phone { margin-top: 0.75rem; font-size: 1.75rem; line-height: 1.3; }
  .contact-card__body,
  .contact-card--hours .contact-card__body { margin-top: 0.625rem; font-size: 1rem; line-height: 1.55; }

  .contact__seal { width: 9rem; height: 9rem; margin-top: 1.5rem; }

  .form-card { padding: 1.75rem; }
  .form-card__title { font-size: 1.875rem; line-height: 1.25; }
  .form-card__sub { margin-top: 0.5rem; font-size: 1rem; line-height: 1.5; }
  .form { margin-top: 1.25rem; }
  .form label { font-size: 0.9375rem; }

  /* 16px keeps iOS from zooming the page when a field takes focus */
  .form input,
  .form select,
  .form textarea { font-size: 1rem; }
}

/* ==========================================================================
   Tablet portrait
   ========================================================================== */
@media (max-width: 900px) {
  .section-title { font-size: 2rem; }

  .hero { padding: 3rem 0 3.5rem; }
  .hero__title { font-size: 2.5rem; }
  .hero__tagline { font-size: 1.375rem; }
  .hero__lead { width: auto; max-width: 34rem; }

  .badges { grid-template-columns: repeat(2, 1fr); }

  .condition-grid { grid-template-columns: repeat(3, 1fr); }
  .condition:nth-child(n) { --art-h: 8rem; }

  .team-row { grid-template-columns: repeat(2, 1fr); }

  .work__photo { height: 18rem; }
  .work__card { width: 22rem; margin-top: -3.75rem; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 680px) {
  .section-title { font-size: 1.75rem; line-height: 1.28; }

  .hero { padding: 2.5rem 0 3rem; }
  .hero__bg { object-position: 68% center; }
  .hero__eyebrow { font-size: 0.8125rem; letter-spacing: 0.06em; }
  .hero__title { font-size: 2.125rem; line-height: 1.18; }
  .hero__tagline { font-size: 1.25rem; }
  .hero__lead { font-size: 0.9375rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .assurance__inner { padding-top: 2.25rem; gap: 2rem; }
  .badges { grid-template-columns: 1fr; gap: 0.75rem; }
  .badge { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.25rem; text-align: left; }
  .badge__icon { width: 3rem; height: 3rem; }
  .badge__label { margin-top: 0; font-size: 1rem; }

  .deeoic { padding: 0 1.25rem 1.75rem; }
  .deeoic__seal { width: 7.5rem; height: 7.5rem; margin-top: -2.5rem; }
  .deeoic__title { font-size: 1.1875rem; }
  .deeoic__text { font-size: 0.9375rem; }

  .assurance__rule { margin-top: 2.25rem; }

  .how { padding: 2.5rem 0 2.75rem; }
  .steps { gap: 1.5rem; margin-top: 2rem; }
  .step { gap: 0.875rem; }
  .step__icon { width: 2.75rem; height: 2.75rem; }
  .step__title { font-size: 1rem; }
  .step__desc { font-size: 0.9375rem; }

  .conditions { padding: 2.75rem 0 3rem; }
  .conditions__lead { font-size: 0.9375rem; }
  .condition-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 2rem; }
  .condition:nth-child(n) { --art-h: 7rem; }
  .condition { padding: 1.25rem 0.5rem 0; }
  .condition__art { margin-bottom: 1rem; }
  .condition__label { width: calc(100% + 1rem); font-size: 0.9375rem; padding-bottom: 0.875rem; }

  .team { padding-top: 2.75rem; }
  .team-row { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
  .member { max-width: 24rem; margin: 0 auto; }
  .member::before { right: -6rem; }

  .work { margin-top: 4.5rem; padding-bottom: 2.75rem; }
  .trust { top: -3rem; margin-bottom: -0.75rem; padding: 1.25rem 0; }
  .trust__title { padding: 0 1.25rem 1rem; font-size: 1.5rem; }
  .trust__list li { padding: 0.8125rem 1.25rem; font-size: 0.9375rem; }
  .trust__list img { width: 1.5rem; height: 1.5rem; }

  .work__grid { gap: 2rem; margin-top: 2rem; }
  .work__list li { font-size: 0.9375rem; }
  .work__actions { flex-direction: column; align-items: stretch; }
  .work__actions .btn { width: 100%; }
  /* on a phone the card sits under the photograph with air between them
     rather than lapping over it */
  .work__media { padding-bottom: 0; }
  .work__photo { height: 14rem; }
  .work__card { width: 100%; max-width: 22rem; margin: 1.25rem auto 0; }

  .contact { padding: 2.75rem 0; }
  .contact__cards { grid-template-columns: 1fr; gap: 0.75rem; }
  .contact-card { padding: 1.25rem 1.125rem; }
  .contact-card--hours,
  .contact-card--wide { padding-left: 1.125rem; padding-right: 1.125rem; }
  .contact-card__phone { font-size: 1.625rem; }
  .contact__seal { width: 7.5rem; height: 7.5rem; }

  .form-card { padding: 1.25rem 1.125rem; }
  .form-card__title { font-size: 1.625rem; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .form__row .form__field + .form__field { margin-top: 1.25rem; }
  .form__field + .form__field,
  .form__row + .form__field,
  .form__field + .form__row { margin-top: 1.25rem; }
  .form .btn--block { margin-top: 1.75rem; }
}

/* ==========================================================================
   Small phone
   ========================================================================== */
@media (max-width: 420px) {
  .section-title { font-size: 1.5rem; }

  .hero__title { font-size: 1.875rem; }
  .hero__tagline { font-size: 1.125rem; }

  .badge { padding: 0.875rem 1rem; }
  .badge__icon { width: 2.75rem; height: 2.75rem; }
  .badge__label { font-size: 0.9375rem; }

  .condition-grid { grid-template-columns: 1fr; }
  .condition:nth-child(n) { --art-h: 9rem; }

  .contact-card__phone { font-size: 1.5rem; }
  .form-card__title { font-size: 1.4375rem; }
  .trust__title { font-size: 1.375rem; }
}

/* ==========================================================================
   Phone — centred layout

   On a narrow screen the two-column reading rhythm is gone, so everything
   that can sit on the centre line does. Kept in its own block, after the
   layout breakpoints, so the desktop rules above are untouched.
   ========================================================================== */
@media (max-width: 680px) {
  .hero__inner,
  .conditions__head,
  .work__text,
  .contact-card { text-align: center; }

  .hero__lead,
  .conditions__lead,
  .work__lead { margin-left: auto; margin-right: auto; }

  .hero__actions,
  .work__actions { align-items: center; }

  .conditions__head { align-items: center; }

  .badge {
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1.375rem 1rem;
    text-align: center;
  }

  .badge__label { margin-top: 0; }

  .step {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .step__icon { margin-top: 0; }

  .trust__title { text-align: center; }
  .trust__list li { justify-content: center; text-align: center; }

  .work__list li { justify-content: center; }

  /* the card is a flex column: centring its items would shrink the photo to
     nothing, so it is stretched back to the full card width */
  .member { align-items: center; text-align: center; }
  .member__photo { align-self: stretch; }
  .member__badge { align-self: center; }
  .member__link { width: 100%; text-align: center; }

  .contact-card__head { justify-content: center; }
  .contact-card__phone { text-align: center; }
}

/* ==========================================================================
   Anchor landings — the header does not stick, so a jump only needs a little
   air above the section it lands on.
   ========================================================================== */
[id] { scroll-margin-top: 1.5rem; }

/* ==========================================================================
   Notice pages — /thank-you/ and 404

   One block, shared by both: the mint band the rest of the site uses, a white
   card on it, and the same buttons. Neither page is in the sitemap and both
   carry noindex.
   ========================================================================== */
.notice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 5rem 0;
  background: var(--mint);
}

.notice__inner {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 3rem;
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1.25rem 2.75rem rgba(4, 39, 103, 0.08);
  text-align: center;
}

.notice__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
}

.notice__mark svg { width: 2.75rem; height: 2.75rem; }

.notice__code {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.notice__title {
  margin-top: 0.5rem;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.notice__lead {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--body);
}

.notice__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

.notice__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.notice__links a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  transition: color 0.2s ease;
}

.notice__links a:hover { color: var(--teal); }

@media (max-width: 680px) {
  .notice { min-height: 0; padding: 3rem 0; }
  .notice__inner { padding: 2.25rem 1.25rem; }
  .notice__mark { width: 4.5rem; height: 4.5rem; margin-bottom: 1.25rem; }
  .notice__mark svg { width: 2.25rem; height: 2.25rem; }
  .notice__code { font-size: 1rem; }
  .notice__title { font-size: 1.875rem; }
  .notice__lead { font-size: 1rem; }
  .notice__actions .btn { width: 100%; }
}