/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 2.25rem;border:1px solid transparent;border-radius:8px;
  font-weight:600;font-size:var(--step-1);line-height:1.35;
  text-decoration:none;cursor:pointer;transition:background-color .18s,transform .18s;
}
.btn--primary{background:var(--gold);color:var(--ink)}         /* 12.57:1 */
.btn--primary:hover{background:#F0B01C;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--white);border-color:transparent;padding-inline:0}
.btn--ghost:hover{text-decoration:underline;text-underline-offset:.3em}

/* ---------- header ---------- */
.site-header{
  position:absolute;inset-block-start:0;inset-inline:0;z-index:20;
  padding-block:1.75rem;
}
/* The nav and wordmark are white because the header overlays a dark hero.
   Pages with no such hero must use this variant, or the header is invisible. */
.site-header--solid{position:static;background:var(--teal-900)}
.site-header__inner{display:flex;align-items:center;gap:2rem}
.site-header__brand{flex:0 0 auto;display:inline-flex}
.site-header__brand img{width:clamp(96px,8vw,124px)}
.site-nav{display:flex;align-items:center;gap:clamp(1.25rem,2.3vw,2.5rem);margin-inline:auto}
.site-nav a{
  color:var(--white);font-weight:600;font-size:var(--step-0);
  text-decoration:none;white-space:nowrap;
}
.site-nav a:hover{text-decoration:underline;text-underline-offset:.35em}
.site-header__actions{display:flex;align-items:center;gap:1.5rem;flex:0 0 auto}
/* Login lives twice in the header: once in the actions row for wide screens and
   once inside the drawer, because the actions row is hidden on phones and the
   drawer otherwise offered no route to it. Exactly one is ever visible, and the
   hidden one is display:none so it stays out of the accessibility tree.
   The colour has to be restated: `.site-nav a` sets white, which outranks
   `.btn--primary` on specificity and would leave 1.66:1 on the gold fill. */
.site-nav a.site-nav__login{display:none;color:var(--ink)}
/* .btn is a step larger than .site-nav a, so an unstyled button in this row
   reads as oversized beside the links. Both take the nav's size; only the
   filled one takes the tighter padding, since the ghost has none. */
.site-header__actions .btn{font-size:var(--step-0)}
.site-header__actions .btn--primary{padding:.5rem 1.75rem}
.site-header__toggle{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(255,255,255,.5);border-radius:8px;
  margin-inline-start:auto;
  /* The drawer covers the right of the screen, where this button sits. It has
     to outrank the drawer or there is no pointer route back out of the menu. */
  position:relative;z-index:40;
}
.site-header__toggle span,.site-header__toggle span::before,.site-header__toggle span::after{
  display:block;width:20px;height:2px;background:var(--white);content:'';position:relative;
  transition:transform .2s ease,background-color .2s ease,top .2s ease;
}
.site-header__toggle span::before{position:absolute;top:-6px}
.site-header__toggle span::after{position:absolute;top:6px}

/* Open: the three bars fold into a cross. */
.site-header__toggle[aria-expanded='true'] span{background:transparent}
.site-header__toggle[aria-expanded='true'] span::before{top:0;transform:rotate(45deg)}
.site-header__toggle[aria-expanded='true'] span::after{top:0;transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){
  .site-header__toggle span,
  .site-header__toggle span::before,
  .site-header__toggle span::after{transition:none}
}

/* ---------- panels ---------- */
.panel{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-panel);
  padding:var(--space-section) var(--gutter);
}
.panel--teal{background:var(--teal-800);color:var(--white)}
.panel--dark{background:var(--teal-900);color:var(--white)}
.panel__media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.panel__scrim{position:absolute;inset:0;z-index:-1}
.panel--teal a,.panel--dark a{color:var(--white)}

/* ---------- section header ---------- */
.section-header{display:flex;flex-direction:column;align-items:center;gap:2.25rem;text-align:center}
/* Both section headings are a single line in the design ("Frequently Asked
   Questions" is 756px, "How to Empower Your Loved One" 629px). A ch-based
   measure forced them to wrap; balance handles the phone wrap instead. */
.section-header h2{text-wrap:balance}

/* ---------- cards ---------- */
.card{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-card);overflow:hidden;height:100%;
}
.card__body{padding:2rem 1.75rem 2.5rem;text-align:center}
.card__title{color:var(--teal-800);font-size:var(--step-2);font-weight:700;margin-block-end:1.25rem}
.card__text{color:var(--body);font-size:var(--step-1);line-height:1.6}

.step-card{
  display:flex;flex-direction:column;gap:2.25rem;height:100%;
  padding:3rem 2rem;
  background:rgba(246,254,255,.9);
  border:1px solid var(--teal-800);border-radius:var(--radius-card);
  -webkit-backdrop-filter:blur(2px);  /* Safari only dropped the prefix in 18 */
  backdrop-filter:blur(2px);
}
.step-card__num{font-family:var(--font-display);font-size:var(--step-4);color:var(--teal-800);line-height:1}
.step-card__title{color:var(--teal-800);font-size:var(--step-2);font-weight:700;margin-block-end:1.1rem}
.step-card__text{color:var(--body-on-card);line-height:1.6}

/* ---------- FAQ ---------- */
.faq{
  display:flex;flex-direction:column;gap:1rem;
  max-width:46rem;margin-inline:auto;
  margin-block-start:clamp(1.75rem,3.4vw,2.7rem);  /* design: 43.2px */
}
.faq__item{background:var(--white);border-radius:14px;color:var(--ink)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.25rem 1.75rem;cursor:pointer;list-style:none;
  font-size:var(--step-1);line-height:1.4;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:'';flex:0 0 auto;width:26px;height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='12' fill='none' stroke='%23010101'/%3E%3Cpath d='M8.5 11.25 13 15.5l4.5-4.25' fill='none' stroke='%23010101' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px no-repeat;
  transition:transform .2s;
}
.faq__item[open] summary::after{transform:rotate(180deg)}
.faq__item > p{padding:0 1.75rem 1.5rem;color:var(--body);max-width:72ch}

/* ---------- footer ---------- */
.site-footer{background:var(--teal-900);color:var(--white);padding-block:var(--space-section)}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem}
.site-footer h2{
  font-size:var(--step--1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);font-family:var(--font-body);
}
.site-footer ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.9rem;margin-block-start:1.5rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:.3em}
.site-footer__brand{margin-block-end:2rem}
.site-footer__social{display:flex;gap:.75rem;margin-block:1.5rem}
.site-footer__social a{
  display:grid;place-items:center;width:38px;height:38px;
  background:var(--gold);border-radius:50%;color:var(--ink);
}
.site-footer__legal{font-size:var(--step--1);opacity:.85;margin-block-start:1.5rem;line-height:1.7}
.to-top{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;
  background:transparent;color:var(--white);margin-block-start:3rem;
}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.5rem;margin-block-end:1.75rem}
.field label{font-weight:700;font-size:var(--step-0)}
.field input,.field textarea,.field select{
  padding:.6rem 0;background:transparent;
  border:0;border-block-end:1px solid var(--teal-800);border-radius:0;
}
.field input::placeholder,.field textarea::placeholder{color:var(--hint)}

/* These fields are underlines, not boxes, so the global focus ring drew a heavy
   rectangle around them. Focus is shown by thickening and darkening the rule
   instead -- teal-900 on white is 14:1, well clear of the 3:1 that WCAG 2.4.11
   asks of a focus indicator. Padding compensates so nothing shifts by a pixel. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible,
.contact__phone:focus-within{
  box-shadow:none;
  border-block-end:2px solid var(--teal-900);
  padding-block-end:calc(.6rem - 1px);
}
.contact__phone:focus-within{padding-block-end:0}
.contact__phone select:focus-visible,
.contact__phone input:focus-visible{
  box-shadow:none;border-block-end:0;padding-block-end:.6rem;
}
.field textarea{resize:vertical;min-height:3rem}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:#B3261E}
.field__error{color:#B3261E;font-size:var(--step--1)}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  /* Brand takes a full row; Site and Legal stay side by side beneath it,
     down to the narrowest phone. */
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .site-footer__grid > :first-child{grid-column:1 / -1}
}
@media (max-width:767px){
  .site-header__toggle{display:inline-flex}
  .site-nav{
    position:fixed;inset:0 0 0 30%;z-index:30;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:1.5rem;padding:6rem 1.75rem;margin:0;
    background:var(--teal-900);
    transform:translateX(100%);transition:transform .25s ease;
  }
  .site-nav[data-open]{transform:translateX(0)}
  .site-header__actions{display:none}
  .site-nav a.site-nav__login{display:inline-flex;margin-block-start:1rem}
  .panel{border-radius:0;padding-inline:var(--gutter)}
  .site-footer__grid{gap:2.5rem clamp(1rem,6vw,3rem)}
}