/* HomePage 2 round 4: final CTA band (animated brass gradient card + FAQ) and the footer restyle.
   Homepage only: every selector sits under .home2 / body.home2. The gradient drifts only once
   home2-cta.js marks the card .is-animated (JS, motion allowed, @property support) and pauses
   off-screen; no pause control (owner decision 2026-09-18). Without JS or with reduced motion
   the composition is static.
   Keep the readable "prop: value;" form: scripts/home2-cta.test.mjs reads these literals. */

/* Blob geometry, registered so it interpolates: x and y in % of the card, size in cqi (card
   width), so an open form (a tall card) keeps the same blob scale. Initial values are the static
   composition shown without JS or motion. */
@property --h2cta-1x { syntax: "<percentage>"; inherits: false; initial-value: 14%; }
@property --h2cta-1y { syntax: "<percentage>"; inherits: false; initial-value: 16%; }
@property --h2cta-1s { syntax: "<number>"; inherits: false; initial-value: 70; }
@property --h2cta-2x { syntax: "<percentage>"; inherits: false; initial-value: 60%; }
@property --h2cta-2y { syntax: "<percentage>"; inherits: false; initial-value: 4%; }
@property --h2cta-2s { syntax: "<number>"; inherits: false; initial-value: 43; }
@property --h2cta-3x { syntax: "<percentage>"; inherits: false; initial-value: 90%; }
@property --h2cta-3y { syntax: "<percentage>"; inherits: false; initial-value: 82%; }
@property --h2cta-3s { syntax: "<number>"; inherits: false; initial-value: 64; }
@property --h2cta-4x { syntax: "<percentage>"; inherits: false; initial-value: 12%; }
@property --h2cta-4y { syntax: "<percentage>"; inherits: false; initial-value: 94%; }
@property --h2cta-4s { syntax: "<number>"; inherits: false; initial-value: 78; }
@property --h2cta-5x { syntax: "<percentage>"; inherits: false; initial-value: 94%; }
@property --h2cta-5y { syntax: "<percentage>"; inherits: false; initial-value: 14%; }
@property --h2cta-5s { syntax: "<number>"; inherits: false; initial-value: 49; }

/* ---------- The band: CTA card (1.6fr) + FAQ (1fr); one column, card first, at 900px ---------- */
.home2 .home2-cta-band__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 30px; align-items: start; }
@media (max-width: 900px) {
  .home2 .home2-cta-band__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- CTA card ---------- */
.home2 .home2-cta__card {
  /* Premium palette only: warm night base, brass, champagne (low alpha), rose-gold, deep bronze,
     smoky taupe, and a centred veil that keeps white text >= 4.5:1 wherever the blobs drift. */
  --h2cta-base: #1a1612;
  --h2cta-brass: rgb(168 132 79 / .72);
  --h2cta-champagne: rgb(233 217 184 / .22);
  --h2cta-rose: rgb(201 143 107 / .52);
  --h2cta-bronze: rgb(107 74 43 / .95);
  --h2cta-taupe: rgb(138 120 102 / .3);
  --h2cta-veil: rgb(20 16 12 / .64);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 710px;
  padding: 64px clamp(24px, 5vw, 72px);
  overflow: hidden;
  border-radius: 24px;
  background-color: var(--h2cta-base);
  box-shadow: 0 32px 64px -36px rgb(20 16 12 / .55);
  color: #ffffff;
  color-scheme: dark;
  text-align: center;
}
.home2 .home2-cta__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--h2cta-base);
  background-image:
    radial-gradient(66cqi 60% at 50% 50%, var(--h2cta-veil), transparent),
    radial-gradient(calc(var(--h2cta-2s) * 1cqi) calc(var(--h2cta-2s) * 1cqi) at var(--h2cta-2x) var(--h2cta-2y), var(--h2cta-champagne), color-mix(in srgb, var(--h2cta-champagne) 50%, transparent) 40%, transparent),
    radial-gradient(calc(var(--h2cta-3s) * 1cqi) calc(var(--h2cta-3s) * 1cqi) at var(--h2cta-3x) var(--h2cta-3y), var(--h2cta-rose), color-mix(in srgb, var(--h2cta-rose) 50%, transparent) 40%, transparent),
    radial-gradient(calc(var(--h2cta-1s) * 1cqi) calc(var(--h2cta-1s) * 1cqi) at var(--h2cta-1x) var(--h2cta-1y), var(--h2cta-brass), color-mix(in srgb, var(--h2cta-brass) 50%, transparent) 40%, transparent),
    radial-gradient(calc(var(--h2cta-5s) * 1cqi) calc(var(--h2cta-5s) * 1cqi) at var(--h2cta-5x) var(--h2cta-5y), var(--h2cta-taupe), color-mix(in srgb, var(--h2cta-taupe) 50%, transparent) 40%, transparent),
    radial-gradient(calc(var(--h2cta-4s) * 1cqi) calc(var(--h2cta-4s) * 1cqi) at var(--h2cta-4x) var(--h2cta-4y), var(--h2cta-bronze), color-mix(in srgb, var(--h2cta-bronze) 50%, transparent) 40%, transparent);
  /* Own layer: repainting the gradient never re-rasterises the form above it. */
  will-change: transform;
}
.home2 .home2-cta__card h2 { color: #ffffff; font-size: var(--h2-fs-display); font-weight: 400; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.home2 .home2-cta__lede { max-width: 32ch; margin-top: 16px; color: #ffffff; font-size: var(--h2-fs-lede); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-lede); text-wrap: pretty; }
.home2 .home2-cta__form { width: 100%; max-width: 560px; margin-top: 40px; text-align: left; }
.home2 .home2-cta__form noscript p { margin-top: 16px; color: #ffffff; font-size: var(--h2-fs-small); }

/* Porcelain rings on the dark card; the second selector outranks the shared form-input ring. */
.home2 .home2-cta__card :focus-visible,
.home2 .home2-cta__card .contact-form input:focus-visible { outline-color: var(--h2-focus-dark); }

/* Fields on the dark card: translucent white with a visible edge, white text, porcelain focus. */
.home2 .home2-cta__card :is(.office-select-label, .contact-form-field label, .contact-form-consent, .contact-form-intro, .contact-form > p, .contact-form-field p) { color: #ffffff; }
.home2 .home2-cta__card :is(.office-select, .contact-form-field input, .contact-form-field textarea) { border-color: rgb(255 255 255 / .7); background-color: rgb(255 255 255 / .08); color: #ffffff; }
.home2 .home2-cta__card .office-select { background: rgb(255 255 255 / .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; }
.home2 .home2-cta__card option { background-color: var(--h2cta-base); color: #ffffff; }
.home2 .home2-cta__card :is(.office-select, .contact-form-field input, .contact-form-field textarea):focus-visible { outline: 2px solid transparent; border-color: var(--h2-focus-dark); box-shadow: 0 0 0 1px var(--h2-focus-dark), 0 0 0 5px rgb(245 243 239 / .22); }
.home2 .home2-cta__card .contact-form :user-invalid { border-color: #ffc2ba; box-shadow: 0 0 0 1px #ffc2ba; }
/* The native dark checkbox edge drops below 3:1 over a blob, so the box is drawn here. */
.home2 .home2-cta__card .contact-form-consent input {
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid rgb(255 255 255 / .7);
  border-radius: 6px;
  background: rgb(255 255 255 / .08);
  cursor: pointer;
}
.home2 .home2-cta__card .contact-form-consent input:checked { border-color: var(--h2-porcelain); background: var(--h2-porcelain) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23232323' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 16px no-repeat; }
.home2 .home2-cta__card .contact-form a { color: #ffffff; }
/* The one primary action on a dark surface inverts to porcelain with an ink label. */
.home2 .home2-cta__card .button:not(.button--outline) { background: var(--h2-porcelain); color: var(--h2-ink); }
.home2 .home2-cta__card .button:not(.button--outline):hover { background: #ffffff; color: var(--h2-ink); }
.home2 .home2-cta__card .button:not(.button--outline):active { background: var(--h2-urgent); }
.home2 .home2-cta__card .callback-open { gap: 8px; margin-top: 24px; padding: 0; border: 0; background: none; color: #ffffff; cursor: pointer; }
.home2 .home2-cta__card .callback-open::after {
  content: "";
  width: 8px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5 5.5-5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5 5.5-5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 900px) {
  .home2 .home2-cta__card { min-height: 0; }
}
@media (max-width: 734px) {
  .home2 .home2-cta__card { padding: 48px 20px 40px; }
  .home2 .home2-cta__form { margin-top: 32px; }
}

/* ---------- FAQ column: native details restyled as separate white items ---------- */
/* The intro sits above the list in the same column, so it never sticks here. */
.home2 .home2-cta-band .home2-faq__intro { position: static; margin-bottom: 28px; }
.home2 .home2-cta-band .home2-faq__intro h2 { font-size: var(--h2-fs-tile); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-tile); }
.home2 .home2-cta-band .home2-faq__intro > p:not(.eyebrow) { max-width: 40ch; margin-top: 12px; font-size: var(--h2-fs-body); }
.home2 .home2-cta-band .home2-faq__intro .text-link { margin-top: 4px; }
.home2 .home2-cta-band .faq__list { display: flex; flex-direction: column; gap: 10px; border: 0; }
.home2 .home2-cta-band .faq__list details { border: 1px solid #f0f0f0; border-radius: 10px; background: #ffffff; box-shadow: 0 1px 2px rgb(20 18 16 / .04), 0 6px 16px -8px rgb(20 18 16 / .08); }
.home2 .home2-cta-band .faq__list details[open] { border-color: #eaeaea; }
.home2 .home2-cta-band .faq__list summary { gap: 16px; min-height: 60px; padding: 16px 18px 16px 20px; font-size: var(--h2-fs-body); font-weight: 600; line-height: 1.4; letter-spacing: var(--h2-ls-body); }
.home2 .home2-cta-band .faq__list summary:focus-visible { outline-offset: 2px; border-radius: 10px; }
/* The aria-hidden "+" becomes a chevron: down when closed, up when open. */
.home2 .home2-cta-band .faq__list summary > span {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background-color: var(--h2-graphite);
  color: transparent;
  font-size: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.home2 .home2-cta-band .faq__list details[open] summary > span { transform: none; rotate: 180deg; }
.home2 .home2-cta-band .faq__list details p { max-width: none; padding: 0 20px 20px; color: var(--h2-graphite); font-size: var(--h2-fs-small); line-height: 1.6; }
@media (hover: hover) {
  .home2 .home2-cta-band .faq__list details:hover { border-color: #eaeaea; }
  .home2 .home2-cta-band .faq__list summary:hover > span { background-color: var(--h2-ink); }
}

/* ---------- Footer (shared markup; restyled on the homepage only) ---------- */
/* Light band, clean columns, grey links that darken on hover, one thin rule above the bottom bar. */
.home2 .footer { padding-top: clamp(56px, 6vw, 88px); background: #fafafa; }
.home2 .footer :is(.footer__intro, .footer__primary, .footer__grid, .footer__offices, .footer__socials, .footer__legal) { border-bottom: 0; }
.home2 .footer__intro { padding-bottom: 32px; }
.home2 .footer__primary { padding: 0 0 24px; }
.home2 .footer__grid { padding: 24px 0; }
.home2 .footer__offices { padding: 24px 0; }
.home2 .footer__legal { padding: 24px 0; }
.home2 .footer :is(.footer__grid h2, .footer__legal h2, .footer__office h3) { margin-bottom: 4px; color: var(--h2-ink); font: 600 var(--h2-fs-small)/1.5 var(--h2-font-text); letter-spacing: 0; }
.home2 .footer :is(.footer__grid p, .footer__bottom p, .footer__grid a, .footer__office a, .footer__legal-links a, .footer__privacy a, .footer__socials a) { color: var(--h2-graphite); font-size: var(--h2-fs-small); }
.home2 .footer a:not(.button):hover { color: var(--h2-ink); text-decoration: none; }
.home2 .footer__bottom { margin-top: 16px; padding-top: 20px; border-top: 1px solid #eaeaea; }
@media (min-width: 1069px) {
  /* Four columns: primary links, then blurb (x2) + two link lists, then the three offices + socials,
     then Legal with its links; every row keeps DOM order left to right. */
  .home2 .footer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .home2 .footer > * { grid-column: 1 / -1; min-width: 0; }
  .home2 .footer :is(.footer__primary, .footer__grid, .footer__legal) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: subgrid; column-gap: 32px; }
  .home2 .footer__primary a { justify-self: start; }
  .home2 .footer__grid > div:first-child { grid-column: span 2; }
  .home2 .footer__offices { grid-column: 1 / 4; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: subgrid; }
  .home2 .footer__socials { grid-column: 4; flex-direction: column; align-items: flex-start; gap: 0; padding-top: 24px; }
  .home2 .footer__legal-links { grid-column: 2 / -1; column-gap: 32px; }
}
@media (min-width: 1069px) and (max-width: 84.99em) {
  /* The longest office email needs about 262px; until three of the four columns give it that
     (about 1300px), the offices take the full width and the socials follow in one row. */
  .home2 .footer__offices { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home2 .footer__socials { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px 20px; padding-top: 0; }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .home2 .footer__offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Motion (gated; titan's reduced-motion kill switch also stops it) ---------- */
@keyframes h2cta-blob-1 {
  0% { --h2cta-1x: 14%; --h2cta-1y: 16%; --h2cta-1s: 70; }
  35% { --h2cta-1x: 48%; --h2cta-1y: 6%; --h2cta-1s: 83; }
  70% { --h2cta-1x: 82%; --h2cta-1y: 34%; --h2cta-1s: 63; }
  100% { --h2cta-1x: 40%; --h2cta-1y: 62%; --h2cta-1s: 78; }
}
@keyframes h2cta-blob-2 {
  0% { --h2cta-2x: 60%; --h2cta-2y: 4%; --h2cta-2s: 43; }
  40% { --h2cta-2x: 26%; --h2cta-2y: 30%; --h2cta-2s: 55; }
  100% { --h2cta-2x: 76%; --h2cta-2y: 50%; --h2cta-2s: 39; }
}
@keyframes h2cta-blob-3 {
  0% { --h2cta-3x: 90%; --h2cta-3y: 82%; --h2cta-3s: 64; }
  30% { --h2cta-3x: 58%; --h2cta-3y: 96%; --h2cta-3s: 78; }
  65% { --h2cta-3x: 30%; --h2cta-3y: 66%; --h2cta-3s: 59; }
  100% { --h2cta-3x: 70%; --h2cta-3y: 40%; --h2cta-3s: 71; }
}
@keyframes h2cta-blob-4 {
  0% { --h2cta-4x: 12%; --h2cta-4y: 94%; --h2cta-4s: 78; }
  50% { --h2cta-4x: 52%; --h2cta-4y: 78%; --h2cta-4s: 92; }
  100% { --h2cta-4x: 86%; --h2cta-4y: 98%; --h2cta-4s: 71; }
}
@keyframes h2cta-blob-5 {
  0% { --h2cta-5x: 94%; --h2cta-5y: 14%; --h2cta-5s: 49; }
  45% { --h2cta-5x: 66%; --h2cta-5y: 34%; --h2cta-5s: 60; }
  100% { --h2cta-5x: 88%; --h2cta-5y: 70%; --h2cta-5s: 45; }
}
@media (prefers-reduced-motion: no-preference) {
  .home2 .home2-cta__card.is-animated::before {
    animation:
      h2cta-blob-1 18s ease-in-out infinite alternate,
      h2cta-blob-2 14s ease-in-out infinite alternate,
      h2cta-blob-3 22s ease-in-out infinite alternate,
      h2cta-blob-4 24s ease-in-out infinite alternate,
      h2cta-blob-5 16s ease-in-out infinite alternate;
  }
  .home2 .home2-cta__card.is-offscreen::before { animation-play-state: paused; }
  .home2 .home2-cta-band .faq__list details { transition: border-color var(--h2-dur-ui) var(--h2-ease-standard), box-shadow var(--h2-dur-ui) var(--h2-ease-standard); }
  .home2 .footer a:not(.button) { transition: color var(--h2-dur-ui) var(--h2-ease-standard); }
}

/* ---------- Forced colours: system surfaces, no gradient ---------- */
@media (forced-colors: active) {
  .home2 .home2-cta__card { border: 1px solid CanvasText; }
  .home2 .home2-cta__card::before { display: none; }
  .home2 .home2-cta__card .contact-form-consent input { appearance: auto; }
  .home2 .home2-cta-band .faq__list summary > span,
  .home2 .home2-cta__card .callback-open::after { forced-color-adjust: none; background-color: CanvasText; }
}