:root {
  --ink: #12120f;
  --ink-soft: #292923;
  --paper: #f5f1e8;
  --white: #fffdf7;
  --sun: #ff9349;
  --sun-dark: #b6551b;
  --mint: #a8e6d7;
  --line: rgba(18, 18, 15, 0.14);
  --muted: #69685f;
  --shadow: 0 24px 60px rgba(18, 18, 15, 0.13);
  --radius: 24px;
  --font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

button,
a,
label {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: var(--white);
  background: var(--ink);
  border-radius: 8px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  min-height: 96px;
  padding: 14px clamp(20px, 5vw, 74px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  background: #080808;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-decoration: none;
}

/* Display the approved HD artwork unchanged, clipping the exterior checkerboard.
   The safe circular bounds in the 1254px PNG are x=30,y=30,w=1190,h=1190. */
.logo-crop {position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:50%;isolation:isolate;flex-shrink:0;}
.logo-crop img {position:absolute;display:block;max-width:none;width:105.378151%;height:105.378151%;left:-2.521008%;top:-2.521008%;}
.logo-small {width:48px;height:48px;}
.brand-wordmark {font-family:Georgia,"Times New Roman",serif;font-size:1rem;font-weight:900;line-height:.95;letter-spacing:.065em;}
.site-header .brand {max-width:100%;gap:16px;color:#fff;}
.site-header .logo-small {width:64px;height:64px;}
.site-header .brand-wordmark {font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.05;letter-spacing:.025em;}
.site-header .brand-wordmark > span {white-space:nowrap;}
.hero-emblem {position:relative;width:82%;max-width:480px;margin:auto;box-shadow:0 26px 65px #0006;}

.brand-mark {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--sun);
}

.brand-mark::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
}

.header-cta {
  display: inline-flex;
  min-height: 44px;
  flex-shrink: 0;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 2px solid currentColor;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.site-header .brand:focus-visible,
.site-header .header-cta:focus-visible,
.site-header .cart-toggle:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 5px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  min-height: calc(100vh - 96px);
  overflow: hidden;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px, 9vw, 130px) clamp(26px, 7vw, 105px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: #5b594f;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 25px;
  height: 2px;
  background: var(--sun-dark);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
}

h1 {
  max-width: 820px;
  margin-bottom: 28px;
  font-size: clamp(3.25rem, 6.7vw, 7.1rem);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.91;
}

h1 em {
  position: relative;
  z-index: 1;
  font-family: Georgia, serif;
  font-weight: 400;
}

h1 em::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -3%;
  bottom: 3%;
  left: -1%;
  height: 18%;
  background: var(--sun);
  transform: rotate(-1.5deg);
}

.hero-lede {
  max-width: 610px;
  margin-bottom: 34px;
  color: #57564e;
  font-size: clamp(1rem, 1.4vw, 1.17rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 23px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:focus-visible,
.text-link:focus-visible,
.header-cta:focus-visible,
.mobile-cta:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

.button-primary {
  color: var(--ink);
  background: var(--sun);
  box-shadow: 0 10px 26px rgba(180, 83, 25, 0.18);
}

.button-primary:hover {
  background: #ffa765;
  box-shadow: 0 14px 28px rgba(180, 83, 25, 0.24);
}

.button-dark {
  width: 100%;
  color: var(--white);
  background: var(--ink);
}

.button-dark:hover {
  background: #2d2d26;
}

.text-link {
  padding: 10px 0;
  border-bottom: 1px solid var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 50px 0 0;
  padding: 0;
  color: #515047;
  font-size: 0.82rem;
  list-style: none;
}

.trust-list span {
  color: #16826e;
  font-weight: 800;
}

.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 0;
  min-height: 640px;
  overflow: hidden;
  background: #191714;
}

.hero-campaign {position:relative;flex:none;min-height:0;margin:0;overflow:hidden;background:#191714;}
.hero-campaign img {display:block;width:100%;height:auto;}
.hero-campaign figcaption {position:absolute;right:16px;bottom:16px;left:16px;width:fit-content;max-width:calc(100% - 32px);margin-left:auto;padding:7px 10px;border-radius:4px;color:#fff;background:#080808d9;font-size:.8125rem;line-height:1.4;}

.sun-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,147,73,0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.sun-disc::before,
.sun-disc::after {
  content: "";
  position: absolute;
  border: inherit;
  border-radius: inherit;
}

.sun-disc::before {
  inset: 12%;
}

.sun-disc::after {
  inset: 25%;
}

.glasses {
  position: absolute;
  top: 45%;
  left: 50%;
  display: flex;
  align-items: center;
  transform: translate(-50%, -50%) rotate(-4deg);
  filter: drop-shadow(0 28px 18px rgba(18, 18, 15, 0.25));
}

.lens {
  position: relative;
  width: clamp(145px, 16vw, 235px);
  height: clamp(120px, 13vw, 190px);
  border: clamp(10px, 1vw, 16px) solid var(--ink);
  background: linear-gradient(140deg, rgba(255,255,255,0.28), rgba(95,122,115,0.36));
}

.lens-left {
  border-radius: 49% 43% 50% 45%;
}

.lens-right {
  border-radius: 43% 49% 45% 50%;
}

.lens::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 18%;
  width: 27%;
  height: 12%;
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
  transform: rotate(-20deg);
}

.bridge {
  width: clamp(30px, 4vw, 58px);
  height: clamp(14px, 1.3vw, 20px);
  margin: -22px -1px 0;
  border: 8px solid var(--ink);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.arm {
  position: absolute;
  top: 12%;
  width: 70px;
  height: 15px;
  border-radius: 999px;
  background: var(--ink);
}

.arm-left {
  right: 95%;
  transform: rotate(13deg);
}

.arm-right {
  left: 95%;
  transform: rotate(-13deg);
}

.delivery-signature {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 28px clamp(24px, 3.5vw, 48px) 32px;
  border-top: 1px solid #ff934966;
  color: #fff1e5;
}

.delivery-time {margin:0;color:var(--sun);}
.delivery-time > span {display:block;margin-bottom:6px;font-size:.875rem;}
.delivery-time strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 5vw, 5.25rem);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
}
.delivery-time strong span {font-size:1.6rem;letter-spacing:0;}
.delivery-kicker {display:block;margin-bottom:8px;color:var(--sun);font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.delivery-copy > strong {display:block;font-size:1rem;line-height:1.4;}
.delivery-copy p {margin:8px 0 0;color:#d3c4b7;font-size:.875rem;line-height:1.5;}

.quote-section {
  padding: clamp(80px, 10vw, 145px) clamp(20px, 7vw, 105px);
  background: var(--white);
}

.section-heading {
  max-width: 700px;
  margin-bottom: 62px;
}

.section-heading h2,
.booking-intro h2 {
  margin-bottom: 18px;
  font-size: clamp(2.3rem, 4.5vw, 4.5rem);
  letter-spacing: -0.055em;
  line-height: 1;
}

.section-heading > p:last-child,
.booking-intro > p {
  max-width: 560px;
  color: var(--muted);
  line-height: 1.65;
}

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.75fr);
  gap: clamp(34px, 6vw, 90px);
  align-items: start;
}

.quote-builder fieldset {
  margin: 0 0 54px;
  padding: 0;
  border: 0;
}

.quote-builder legend {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
}

.quote-builder legend > span {
  color: #9b988e;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
}

.optional-tag {
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: #77746b;
  background: #eeebe3;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.choice-card {
  position: relative;
  min-height: 146px;
  cursor: pointer;
}

.choice-card input {
  position: absolute;
  opacity: 0;
}

.choice-content {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: #faf8f2;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.choice-card:hover .choice-content {
  transform: translateY(-2px);
  border-color: rgba(18,18,15,0.34);
}

.choice-card input:checked + .choice-content {
  border-color: var(--ink);
  background: #fff0e3;
  box-shadow: inset 0 0 0 1px var(--ink);
}

.choice-card input:focus-visible + .choice-content {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

.choice-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
}

.choice-detail {
  margin: 4px 0 16px;
  color: var(--muted);
  font-size: 0.82rem;
}

.lens-options .choice-content {justify-content:flex-start;padding-top:42px;}
.lens-options .choice-detail {margin-bottom:10px;font-size:.875rem;line-height:1.5;}
.choice-included {display:block;margin:0 0 18px;color:#69401e;font-size:.875rem;font-weight:600;line-height:1.5;}
.lens-options .choice-content > strong {margin-top:auto;font-size:1rem;}

.choice-content strong {
  font-size: 0.86rem;
}

.choice-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #6b4b00;
  background: #ffd3b1;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.prescription-box {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #faf8f2;
}

.prescription-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 7px;
  border-bottom: 1px solid var(--line);
  background: #eeeae0;
}

.prescription-tabs label {
  position: relative;
  cursor: pointer;
}

.prescription-tabs input {
  position: absolute;
  opacity: 0;
}

.prescription-tabs span {
  display: grid;
  min-height: 45px;
  place-items: center;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.prescription-tabs input:checked + span {
  background: var(--white);
  box-shadow: 0 4px 13px rgba(18,18,15,0.08);
}

.prescription-tabs input:focus-visible + span {
  outline: 3px solid var(--mint);
  outline-offset: 1px;
}

.prescription-panel {
  padding: 23px;
}

.prescription-help {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

.prescription-head,
.prescription-row {
  display: grid;
  grid-template-columns: 76px repeat(4, minmax(72px, 1fr));
  gap: 8px;
  align-items: end;
}

.prescription-head {
  padding: 0 0 7px;
  color: #8a877e;
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

.prescription-head span:first-child {
  text-align: left;
}

.prescription-row + .prescription-row {
  margin-top: 10px;
}

.prescription-row > strong {
  display: flex;
  height: 46px;
  flex-direction: column;
  justify-content: center;
  padding-left: 4px;
  font-size: 0.85rem;
}

.prescription-row > strong small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 500;
}

.prescription-row label {
  display: block;
}

.prescription-row label > span {
  display: none;
}

.prescription-row input,
.pd-field input {
  width: 100%;
  height: 46px;
  padding: 0 9px;
  border: 1px solid #d6d2c7;
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  text-align: center;
}

.prescription-row input:focus-visible,
.pd-field input:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 1px;
  border-color: var(--ink);
}

.pd-field {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 110px auto;
  gap: 10px;
  align-items: center;
  max-width: 420px;
  margin-top: 18px;
  color: #55534c;
  font-size: 0.72rem;
  font-weight: 700;
}

.pd-field small {
  color: var(--muted);
  font-weight: 500;
}

.prescription-notes {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  color: #55534c;
  font-size: 0.72rem;
  font-weight: 700;
}

.prescription-notes textarea {
  width: 100%;
  padding: 12px;
  resize: vertical;
  border: 1px solid #d6d2c7;
  border-radius: 10px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  line-height: 1.45;
}

.prescription-notes textarea:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 1px;
  border-color: var(--ink);
}

.photo-panel {
  padding: 23px;
}

.upload-zone {
  display: flex;
  min-height: 188px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 26px;
  border: 1.5px dashed #aaa69c;
  border-radius: 14px;
  background: var(--white);
  cursor: pointer;
  text-align: center;
  transition: border-color 180ms ease, background 180ms ease;
}

.upload-zone:hover {
  border-color: var(--ink);
  background: #fff9e8;
}

.upload-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.upload-zone:focus-within {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

.upload-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 13px;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  font-size: 1.3rem;
  font-weight: 800;
}

.upload-zone strong {
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.upload-zone small {
  color: var(--muted);
  font-size: 0.7rem;
}

.upload-error {
  min-height: 0;
  margin: 8px 0 0;
  color: #b83226;
  font-size: 0.72rem;
}

.photo-preview {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 13px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #b9decf;
  border-radius: 12px;
  background: #effaf5;
}

.photo-preview img {
  width: 62px;
  height: 55px;
  border-radius: 8px;
  object-fit: cover;
}

.photo-preview strong,
.photo-preview small {
  display: block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-preview strong {
  font-size: 0.74rem;
}

.photo-preview small {
  margin-top: 3px;
  color: #5e665f;
  font-size: 0.64rem;
}

.photo-preview button {
  padding: 7px 9px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.privacy-note {
  display: flex;
  gap: 8px;
  margin: 13px 1px 0;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.45;
}

.privacy-note span {
  color: #188064;
}

.treatment-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.treatment-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding: 14px 18px;
  background: #faf8f2;
  cursor: pointer;
}

.treatment-list > .treatment-row:not(:first-child) {
  border-top: 1px solid var(--line);
}

.treatment-help {margin:-4px 0 18px;color:var(--muted);font-size:.9375rem;line-height:1.6;}
.treatment-row {grid-template-columns:auto minmax(0,1fr) auto;}
.treatment-row.treatment-included {background:#fff0e3;cursor:default;}
.treatment-included b {color:#69401e;}
.color-options {padding:4px 18px 20px 55px;background:#faf8f2;}
.color-options label {display:block;margin-bottom:8px;font-size:.875rem;font-weight:600;}
.color-options select {display:block;width:100%;min-height:48px;padding:10px 12px;border:1px solid #9e9a8e;border-radius:10px;color:var(--ink);background:var(--white);font:inherit;font-size:1rem;}
.color-options select:focus-visible {outline:3px solid var(--mint);outline-offset:3px;}

.treatment-row:hover {
  background: #fffaf0;
}

.treatment-row input {
  position: absolute;
  opacity: 0;
}

.check-ui {
  position: relative;
  width: 23px;
  height: 23px;
  border: 1.5px solid #9e9a8e;
  border-radius: 7px;
  background: var(--white);
}

.treatment-row input:checked + .check-ui {
  border-color: var(--ink);
  background: var(--ink);
}

.treatment-row input:checked + .check-ui::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--sun);
  font-size: 0.78rem;
  font-weight: 800;
  transform: translate(-50%, -53%);
}

.treatment-row input:focus-visible + .check-ui {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

.treatment-row strong,
.treatment-row small {
  display: block;
}

.treatment-row strong {
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.treatment-row small {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.treatment-row b {
  font-size: 0.875rem;
}

.segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #eeeae0;
}

.segmented-control label {
  position: relative;
  cursor: pointer;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
}

.segmented-control span {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 11px;
  font-size: 0.84rem;
  font-weight: 600;
}

.segmented-control input:checked + span {
  background: var(--white);
  box-shadow: 0 4px 12px rgba(18,18,15,0.08);
}

.segmented-control input:focus-visible + span {
  outline: 3px solid var(--mint);
}

.segmented-control small {
  margin-left: 5px;
  color: #16826e;
  font-size: 0.7rem;
}

.quote-card {
  position: sticky;
  top: 104px;
  padding: 28px;
  color: var(--white);
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: var(--shadow);
}

.quote-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  color: #d6d2c8;
  font-size: 0.78rem;
  font-weight: 700;
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.status-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
}

.quote-total {
  position: relative;
  padding: 30px 0 22px;
}

.quote-total small {
  display: block;
  margin-bottom: 4px;
  color: #aaa79f;
  font-size: 0.72rem;
}

.quote-total strong {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  letter-spacing: -0.05em;
}

.quote-total > span {
  margin-left: 7px;
  color: #aaa79f;
  font-size: 0.7rem;
}

.quote-summary {
  padding: 17px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  color: #d6d2c8;
  font-size: 0.74rem;
}

.summary-line strong {
  color: var(--white);
  font-weight: 500;
  text-align: right;
}

.payment-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  font-size: 0.75rem;
}

.payment-row span {
  color: #aaa79f;
}

.delivery-note {
  display: flex;
  gap: 12px;
  margin: 4px 0 22px;
  padding: 14px;
  border: 1px solid rgba(246, 191, 38, 0.28);
  border-radius: 13px;
  color: var(--ink);
  background: var(--sun);
}

.delivery-note > span {
  font-size: 1.1rem;
}

.delivery-note strong,
.delivery-note small {
  display: block;
}

.delivery-note strong {
  margin-bottom: 2px;
  font-size: 0.78rem;
}

.delivery-note small {
  color: #6b540d;
  font-size: 0.65rem;
}

.fine-print {
  margin: 15px 2px 0;
  color: #8e8b83;
  font-size: 0.63rem;
  line-height: 1.55;
  text-align: center;
}

.booking-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 0.72fr);
  gap: clamp(45px, 8vw, 130px);
  padding: clamp(80px, 10vw, 140px) clamp(20px, 8vw, 120px);
  color: var(--white);
  background: var(--ink);
}

.eyebrow-light {
  color: #aba89f;
}

.booking-intro > p {
  color: #b9b6ae;
}

.process-list {
  display: grid;
  gap: 0;
  max-width: 480px;
  margin: 45px 0 0;
  padding: 0;
  list-style: none;
}

.process-list li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: center;
  padding: 19px 0;
  border-top: 1px solid rgba(255,255,255,0.13);
}

.process-list li > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  color: var(--sun);
  font-size: 0.74rem;
  font-weight: 800;
}

.process-list strong,
.process-list small {
  display: block;
}

.process-list strong {
  margin-bottom: 4px;
}

.process-list small {
  color: #8e8b84;
}

.booking-form {
  padding: clamp(24px, 4vw, 42px);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 28px 70px rgba(0,0,0,0.26);
}

.form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 30px;
  font-family: var(--font-display);
  font-weight: 800;
}

.quote-pill {
  padding: 7px 10px;
  border-radius: 999px;
  color: #684d07;
  background: #ffdcc0;
  font-family: var(--font-body);
  font-size: 0.68rem;
}

.booking-form > label,
.field-pair > label {
  display: grid;
  gap: 8px;
  margin-bottom: 17px;
  color: #4f4e47;
  font-size: 0.72rem;
  font-weight: 700;
}

.booking-form input:not([type="checkbox"]),
.booking-form select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid #d7d3c8;
  border-radius: 11px;
  color: var(--ink);
  background: #fcfaf5;
}

.booking-form input::placeholder {
  color: #aaa69c;
}

.booking-form input:user-invalid,
.booking-form select:user-invalid {
  border-color: #c64536;
}

.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.consent {
  display: flex !important;
  grid-template-columns: auto 1fr;
  gap: 10px !important;
  align-items: flex-start;
  margin: 8px 0 20px !important;
  color: #716f67 !important;
  font-weight: 500 !important;
  line-height: 1.5;
}

.consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ink);
}

.booking-submit {
  width: 100%;
}

.form-note {
  margin: 13px 0 0;
  color: #918e85;
  font-size: 0.65rem;
  text-align: center;
}

.error-message {
  min-height: 0;
  color: #b83226;
  font-weight: 500;
}

.form-success {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #b9decf;
  border-radius: 16px;
  background: #effaf5;
  text-align: center;
}

.success-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto 13px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: #188064;
  font-weight: 800;
}

.form-success h3 {
  margin-bottom: 6px;
  font-size: 1.15rem;
}

.form-success p {
  margin-bottom: 18px;
  color: #5e665f;
  font-size: 0.78rem;
  line-height: 1.5;
}

.success-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.success-actions .button {
  min-height: 46px;
}

.text-button {
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.copy-status {
  min-height: 1em;
  margin: 10px 0 0 !important;
  color: #188064 !important;
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 34px clamp(20px, 7vw, 105px);
  border-top: 1px solid var(--line);
  color: #5f5d55;
  background: var(--paper);
  font-size: 0.76rem;
}

footer p {
  margin: 0;
}

footer > a:last-child {
  font-weight: 700;
  text-decoration: none;
}

.mobile-cta {
  display: none;
}

@media (max-width: 1050px) {
  .hero {
    grid-template-columns: 1fr 0.8fr;
  }

  .hero-copy {
    padding-right: 42px;
    padding-left: 42px;
  }

  .quote-section {
    padding-right: 42px;
    padding-left: 42px;
  }

  .quote-layout {
    gap: 36px;
  }

  .booking-section {
    padding-right: 42px;
    padding-left: 42px;
  }
}

@media (max-width: 820px) {
  html {
    scroll-padding-top: 100px;
  }

  .site-header {
    min-height: 84px;
    padding: 12px 20px;
  }

  .site-header .logo-small {width:56px;height:56px;}
  .site-header .brand {gap:12px;}

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-copy {
    padding: 72px 24px 62px;
  }

  .hero-visual {
    min-height: auto;
    gap: 0;
    padding: 0;
  }

  .sun-disc {
    width: 77vw;
  }

  .lens {
    width: 34vw;
    height: 27vw;
  }

  .quote-section {
    padding-right: 24px;
    padding-left: 24px;
  }

  .quote-layout {
    grid-template-columns: 1fr;
  }

  .quote-card {
    position: relative;
    top: auto;
  }

  .booking-section {
    grid-template-columns: 1fr;
    padding-right: 24px;
    padding-bottom: 110px;
    padding-left: 24px;
  }

  footer {
    flex-direction: column;
    padding-bottom: 105px;
    text-align: center;
  }

  .mobile-cta {
    position: fixed;
    z-index: 30;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    color: var(--white);
    background: var(--ink);
    box-shadow: 0 14px 36px rgba(0,0,0,0.28);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
  }
}

@media (max-width: 560px) {
  .site-header {gap:10px 12px;padding:10px 16px;}
  .site-header .brand {gap:10px;}
  .site-header .logo-small {width:52px;height:52px;}
  .site-header .brand-wordmark {font-size:clamp(1.125rem,5.5vw,1.375rem);line-height:1.05;letter-spacing:.03em;}
  .site-header .brand-wordmark > span {display:block;}
  .brand {
    font-size: 0.7rem;
  }

  .brand-mark {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .brand-mark::after {
    width: 14px;
    height: 14px;
  }

  .header-cta {
    max-width: 5.25rem;
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: right;
  }

  h1 {
    font-size: clamp(3rem, 15vw, 4.7rem);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .text-link {
    align-self: flex-start;
  }

  .trust-list {
    display: grid;
    gap: 9px;
    margin-top: 38px;
  }

  .hero-visual {
    min-height: auto;
  }

  .glasses {
    top: 44%;
  }

  .arm {
    width: 42px;
    height: 11px;
  }

  .delivery-signature {gap:16px;padding:22px 24px 26px;}
  .delivery-kicker {letter-spacing:.04em;}

  .section-heading {
    margin-bottom: 42px;
  }

  .choice-grid {
    grid-template-columns: 1fr;
  }

  .choice-card {
    min-height: 126px;
  }

  .prescription-panel,
  .photo-panel {
    padding: 17px;
  }

  .prescription-head {
    display: none;
  }

  .prescription-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    padding: 15px 0;
    border-top: 1px solid var(--line);
  }

  .prescription-row:first-of-type {
    border-top: 0;
  }

  .prescription-row > strong {
    grid-column: 1 / -1;
    height: auto;
    padding: 0;
  }

  .prescription-row label > span {
    display: block;
    margin-bottom: 6px;
    color: #77746b;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .pd-field {
    grid-template-columns: 1fr 100px;
  }

  .pd-field small {
    display: none;
  }

  .photo-preview {
    grid-template-columns: 55px 1fr;
  }

  .photo-preview img {
    width: 55px;
  }

  .photo-preview button {
    grid-column: 2;
    justify-self: start;
  }

  .quote-builder fieldset {
    margin-bottom: 42px;
  }

  .treatment-row {
    gap: 11px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .treatment-row small {
    max-width: 170px;
  }

  .segmented-control {
    grid-template-columns: 1fr;
  }

  .quote-card {
    padding: 24px 20px;
  }

  .field-pair {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .success-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

[hidden] {
  display: none !important;
}

.payment-preference {display:grid;grid-template-columns:1fr auto;gap:9px;padding:18px 0;border-top:1px solid #ffffff24;font-size:.8rem;}
.payment-preference small {grid-column:1/-1;color:#ccc8be;line-height:1.5;}
.quote-whatsapp {width:100%;margin-top:12px;border:1px solid #a8e6d7;color:#a8e6d7;font-size:.83rem;}
.floating-whatsapp {position:fixed;bottom:24px;right:24px;z-index:31;display:flex;align-items:center;gap:9px;min-height:52px;padding:12px 18px;border:1px solid #b7e7d4;border-radius:999px;background:#136548;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 24px #0003;}
.floating-whatsapp svg {width:26px;height:26px;}
.floating-whatsapp {touch-action:manipulation;cursor:pointer;}
.floating-whatsapp * {pointer-events:none;}
.contact-help {margin-top:28px;padding:20px;border:1px solid #ffffff35;border-radius:16px;}
.contact-help p {color:#d6d2c8;font-size:.85rem;line-height:1.6;}
.contact-help .button {font-size:.85rem;}
.contact-help .contact-number {margin:15px 0 0;user-select:text;}
.frame-catalog {margin-top:20px;}
.frame-benefits {margin-top:16px;padding:16px 18px;border-left:3px solid var(--sun);background:#fff0e3;border-radius:0 12px 12px 0;}
.frame-benefits strong {display:block;font-size:.9375rem;line-height:1.5;}
.frame-benefits p {margin:6px 0 0;color:var(--muted);font-size:.875rem;line-height:1.6;}
.frame-choice img {width:100%;height:150px;object-fit:contain;margin-bottom:10px;border-radius:10px;}
.prescription-row label > span {display:block;font-size:.65rem;color:#666;margin-bottom:5px;}
.prescription-head {display:none;}
.prescription-head,.prescription-row {grid-template-columns:60px repeat(4,minmax(0,1fr));}
@media (max-width:820px) {.floating-whatsapp {bottom:84px;right:16px;padding:12px;}.floating-whatsapp span {display:none;}}
@media (max-width:560px) {.prescription-row {grid-template-columns:repeat(2,minmax(0,1fr));}.quote-builder legend {flex-wrap:wrap;}.optional-tag {margin-left:0;}}

@media (max-width:820px) {.hero-emblem {width:min(86%,300px);}.logo-small {width:42px;height:42px;}.brand-wordmark {font-size:.86rem;}}

/* Black Sunshine: a composed editorial direction, with clear paths to quote and contact. */
.hero {grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0;align-items:stretch;}
.hero-copy {padding:clamp(40px,6vw,90px) clamp(24px,5vw,78px);}
.hero h1 {font-size:clamp(3.5rem,6.6vw,6.9rem);line-height:1;letter-spacing:-.055em;margin-bottom:28px;}
.hero h1 em::after {display:none;}
.hero h1 em {color:var(--ink);letter-spacing:-.05em;background:linear-gradient(transparent 72%,var(--sun) 72%,var(--sun) 93%,transparent 93%);-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.hero-signature {font-weight:700;font-size:1.0625rem;line-height:1.5;margin-bottom:18px;}
.hero-lede {font-size:1.0625rem;line-height:1.7;}
.hero-actions {flex-wrap:wrap;gap:12px 24px;}
.hero-actions .button {width:100%;max-width:360px;}
.hero .trust-list {font-size:.875rem;line-height:1.5;margin-top:30px;}
.hero-visual {min-height:0;justify-content:start;}
.hero-campaign {flex:1;}
.hero-campaign img {height:100%;object-fit:cover;object-position:center top;aspect-ratio:4/5;}
.hero-campaign figcaption {background:#171714d9;font-size:.875rem;letter-spacing:.015em;}
.hero .delivery-signature {position:relative;flex:none;margin-top:0;border-radius:0;}
.site-header .contact-direct {border:1px solid #ffffff8c;border-radius:999px;padding:10px 20px;gap:16px;font-size:.9375rem;min-height:46px;line-height:1.25;}
.site-header .contact-direct:hover {background:#fff;color:#111;}
.brand-story,.reviews-section,.faq-section {padding:clamp(52px,7vw,100px) clamp(24px,6vw,90px);display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,6vw,90px);border-bottom:1px solid var(--line);}
.brand-story h2,.reviews-section h2,.faq-section h2,.closing-cta h2 {font-size:clamp(2.15rem,4vw,4.4rem);line-height:1.07;letter-spacing:-.045em;margin-bottom:22px;}
.brand-story h2 em,.why-section h2 em,.reviews-section h2 em,.faq-section h2 em,.closing-cta h2 em,.recipe-intro h3 em {font-family:Georgia,serif;font-weight:400;}
.story-copy p,.reviews-section p,.faq-section>div>p {font-size:1.0625rem;line-height:1.75;color:#55534c;}
.story-copy .story-lead {font-size:clamp(1.2rem,1.8vw,1.5rem);color:var(--ink);line-height:1.55;}
.brand-story > div:first-child {align-self:start;padding:clamp(24px,3vw,40px);border-radius:18px;background:var(--sun);color:var(--ink);}
.brand-story > div:first-child .eyebrow {color:#462712;}
.brand-story > div:first-child .eyebrow > span {background:var(--ink);}
.brand-story > div:first-child h2 {margin-bottom:0;}
.eyebrow {font-size:.875rem;line-height:1.5;}
.why-section {padding:clamp(52px,7vw,100px) clamp(24px,6vw,90px);color:var(--paper);background:#191916;}
.why-heading {max-width:880px;}
.why-heading h2 {font-size:clamp(2.25rem,4vw,4.4rem);line-height:1.12;letter-spacing:-.045em;}
.why-heading>p:last-child {color:#d4d0c6;max-width:640px;line-height:1.7;font-size:1.0625rem;}
.why-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:50px 0 30px;}
.why-grid article {border-top:1px solid #ffffff45;padding-top:22px;}
.why-number {font-size:.875rem;letter-spacing:.1em;color:#ffad71;}
.why-grid h3 {font-size:1.375rem;line-height:1.3;margin:24px 0 16px;}
.why-grid p {font-size:1rem;line-height:1.7;color:#d4d0c6;}
.recipe-fieldset {scroll-margin-top:30px;}
.recipe-intro {padding:28px;background:#f9dfca;border:1px solid #dfb590;border-radius:20px 20px 0 0;}
.recipe-intro .eyebrow {color:#77360f;margin-bottom:12px;}
.recipe-intro h3 {font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.03em;line-height:1.1;margin-bottom:20px;}
.recipe-intro p {font-size:1rem;line-height:1.65;}
.recipe-intro p:last-child {margin-bottom:0;}
.recipe-promise {border-top:1px solid #b86a323f;border-bottom:1px solid #b86a323f;padding:15px 0;}
.recipe-fieldset .prescription-box {border-top:0;border-radius:0 0 20px 20px;}
.prescription-tabs span,.prescription-help,.prescription-notes,.pd-field,.upload-zone small,.privacy-note {font-size:.875rem;line-height:1.5;}
.prescription-row label>span,.prescription-row>strong small {font-size:.875rem;text-transform:none;}
.prescription-row input,.pd-field input,.prescription-notes textarea {font-size:1rem;}
.contact-person {padding:28px 0 0;border-top:1px solid #ffffff4d;margin-top:32px;}
.contact-person strong {font-size:1.25rem;line-height:1.4;}
.contact-person small {display:block;margin-top:14px;color:#d4d0c6;font-size:.875rem;}
.contact-help summary {cursor:pointer;font-size:.9375rem;line-height:1.5;min-height:44px;}
.reviews-section {background:#ece7dd;align-items:center;}
.faq-list details {border-bottom:1px solid var(--line);}
.faq-list details:first-child {border-top:1px solid var(--line);}
.faq-list summary {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0;min-height:60px;font-size:1.0625rem;font-weight:700;line-height:1.45;cursor:pointer;list-style:none;}
.faq-list summary::-webkit-details-marker {display:none;}
.faq-list summary::after {content:'+';font-size:1.5rem;font-weight:400;flex:none;}
.faq-list details[open] summary::after {content:'−';}
.faq-answer p {font-size:1rem;line-height:1.75;color:#56544d;margin-bottom:24px;}
.faq-list summary:focus-visible,.contact-help summary:focus-visible {outline:3px solid var(--sun);outline-offset:4px;}
.closing-cta {background:var(--sun);padding:clamp(56px,7vw,100px) 24px;text-align:center;}
.closing-cta .eyebrow {justify-content:center;color:#422712;}
.closing-actions {display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:32px 0 24px;}
.closing-actions .button {width:auto;min-width:220px;}
.button-outline {background:transparent;color:var(--ink);border:1px solid var(--ink);}
.closing-cta>p:last-child {font-size:1rem;line-height:1.7;}
footer {flex-wrap:wrap;gap:24px;}
@media(max-width:980px){.hero {grid-template-columns:1fr 1fr;}.hero h1 {font-size:clamp(3.3rem,6.8vw,5rem);}.hero-copy {padding:42px 28px;}.why-grid {gap:24px;}.delivery-signature {gap:14px;}.brand-story,.faq-section,.reviews-section {grid-template-columns:1fr 1.25fr;gap:30px;}}
@media(max-width:720px){.hero {grid-template-columns:1fr;}.hero-copy {padding:48px 24px 38px;}.hero h1 {font-size:clamp(3.5rem,12vw,5rem);}.hero-campaign {max-height:none;}.hero-campaign img {height:auto;aspect-ratio:4/5;object-fit:cover;}.brand-story,.reviews-section,.faq-section {grid-template-columns:1fr;}.why-grid {grid-template-columns:1fr;gap:20px;margin-top:32px;}.why-grid h3 {margin-top:18px;}.hero .trust-list {margin-top:24px;}.hero-actions .button {max-width:none;}.recipe-intro {padding:23px;}.closing-actions {flex-direction:column;max-width:460px;margin-left:auto;margin-right:auto;}}

.hero-price{margin:0 0 26px;font-size:1.0625rem;line-height:1.6}.hero-price span{display:block;font-size:.875rem;color:#59564e}

.treatment-unavailable { opacity:.58; cursor:not-allowed; }
.treatment-help { font-size:.875rem; line-height:1.6; color:#6d421d; padding:12px 14px; background:#fff0e1; border-radius:10px; }

/* Original brand photographs, retouched for the storefront. */
.brand-story { align-items:center; }
.story-portrait { position:relative; margin:0; overflow:hidden; border-radius:18px; background:#d6c6b0; }
.story-portrait img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.story-portrait figcaption { position:absolute; inset:auto 0 0; padding:42px 24px 22px; background:linear-gradient(transparent,#171714e8); color:#fff; font-size:.9375rem; line-height:1.6; }
.story-portrait figcaption span { display:block; font-size:1.3rem; font-weight:700; }
.story-title { padding:clamp(22px,3vw,36px); margin-bottom:26px; border-radius:18px; background:var(--sun); }
.story-title .eyebrow { color:#462712; }
.story-title .eyebrow span { background:var(--ink); }
.story-title h2 { margin:0; font-size:clamp(2rem,3.3vw,3.7rem); }
.why-intro { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:clamp(28px,5vw,70px); }
.why-intro h2 { font-size:clamp(2.15rem,3.5vw,3.8rem); }
.why-lifestyle { margin:0; overflow:hidden; border-radius:14px; background:#242420; }
.why-lifestyle img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.why-lifestyle figcaption { padding:15px 18px; font-size:.9375rem; line-height:1.5; color:#e7dfd0; }
@media(max-width:720px) {
  .brand-story .story-copy { order:0; }
  .brand-story .story-portrait { order:1; max-width:440px; width:100%; justify-self:center; }
  .why-intro { grid-template-columns:1fr; gap:24px; }
  .story-title h2 { font-size:clamp(2rem,7.4vw,3rem); }
}

/* Let content shrink inside columns before it pushes past the viewport. */
.hero > *, .quote-layout > *, .booking-section > *, .brand-story > *,
.reviews-section > *, .faq-section > *, .why-intro > *, .field-pair > * { min-width:0; }
.field-pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
.quote-builder fieldset, .booking-form { min-width:0; }
.button { max-width:100%; overflow-wrap:anywhere; }
.booking-form :is(input,select,textarea) { min-width:0; max-width:100%; }
@media (max-width:1100px) {
  .quote-layout, .booking-section { grid-template-columns:minmax(0,1fr); }
  .quote-card { position:static; top:auto; }
  .booking-section { gap:36px; }
}
@media (max-width:560px) {
  .field-pair { grid-template-columns:minmax(0,1fr); }
  .closing-actions .button { width:100%; min-width:0; }
}

/* Balance the desktop opening within its own column; keep phone alignment. */
@media (min-width:761px) {
  .hero-copy {align-items:center;text-align:center;}
  .hero-copy .eyebrow {justify-content:center;}
  .hero-copy h1 {width:100%;}
  .hero-copy .hero-lede {max-width:46ch;margin-left:auto;margin-right:auto;}
  .hero-copy .hero-actions {width:100%;justify-content:center;}
  .hero-copy .trust-list {justify-content:center;max-width:540px;}
}

/* One appointment action; the optional form stays available on request. */
.booking-options {min-width:0;align-self:start;}
.booking-options .contact-person {margin-top:0;}
.booking-alternative {margin-top:24px;}
.booking-alternative > summary {padding:14px 0;min-height:48px;cursor:pointer;color:var(--white);font-weight:600;line-height:1.5;}
.booking-alternative > summary:focus-visible {outline:3px solid var(--sun);outline-offset:4px;}
.booking-alternative .booking-form {margin-top:18px;}
.mobile-cta[hidden] {display:none;}

/* Visible keyboard focus on the light storefront; keep a light ring on dark cards. */
.button:focus-visible,.text-link:focus-visible,.mobile-cta:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.choice-card input:focus-visible + .choice-content,
.prescription-tabs input:focus-visible + span,
.prescription-row input:focus-visible,.pd-field input:focus-visible,
.prescription-notes textarea:focus-visible,.upload-zone:focus-within,
.color-options select:focus-visible,.treatment-row input:focus-visible + .check-ui,
.segmented-control input:focus-visible + span,
.faq-list summary:focus-visible,.booking-alternative > summary:focus-visible {
  outline:3px solid var(--sun-dark);outline-offset:3px;
}
.quote-card :is(a,button,input,select,textarea):focus-visible,
.contact-help :is(a,button,summary):focus-visible {outline-color:var(--mint);}