/* =============================================================
   CJE Agency — Google Ads & PPC Management, Dublin
   Shared stylesheet for index.html, form.html and thank-you.html.

   Official brand colours: red #ef0f0f · black #101010
   ============================================================= */

/* -------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------- */
:root {
  /* ===========================================================
     BACKGROUND TUNING — edit these three to taste
     -----------------------------------------------------------
     --overlay-opacity  strength of the navy tint over the photo.
                        LOWER = lighter page, HIGHER = darker.
                        0.25 = navy at 25% opacity (75% transparent).

     The two scrims below are NOT page-wide. They sit only behind
     the text areas (the hero block at the top and the footer at
     the bottom) and fade to nothing in between, because the
     photo's sky is blown out to near-white exactly where the
     white logo sits. At 0.25 navy with no scrim the white logo
     measures 1.75:1 — unreadable. Raise these if you lower
     --overlay-opacity further; lower them if you raise it.
     =========================================================== */
  --overlay-opacity: 0.25;   /* lower = lighter, higher = darker */
  --scrim-hero:      0.66;   /* behind logo + headline + tagline */
                             /* Raised from 0.46 when the headline moved to the
                                official #ef0f0f. That red is a mid-dark colour:
                                on the old, lighter scrim it measured 2.54:1,
                                under the 3:1 large-text minimum. 0.66 brings it
                                to 3.3:1 and keeps the brand red exact. Lowering
                                this again means using a brighter red instead. */
  --scrim-footer:    0.24;   /* behind the footer line only */

  /* ===========================================================
     BRAND COLOURS — the two official values
     =========================================================== */
  --brand-red:   #ef0f0f;
  --brand-black: #101010;

  /* Two derived shades. Both are all but indistinguishable from
     --brand-red; they exist only where the official value falls
     just short of a contrast threshold:
       --brand-red-soft  small text + focus rings on black panels
                         (#ef0f0f is 4.30:1 there, this is 4.69:1)
       --brand-red-deep  hover / pressed states                    */
  --brand-red-soft: #f52525;
  --brand-red-deep: #c00b0b;

  --brand-navy:     #001f3f;   /* background tint only, see §3 */

  /* Surfaces.
     Panels are SOLID --brand-black rather than a translucent grey.
     That matters for more than looks: on the old translucent panel
     the brand red measured 2.35:1 and was unusable, whereas on
     #101010 it reaches 4.30:1 and white reaches 19:1. */
  --panel:         var(--brand-black);
  --panel-hover:   #171717;
  --glass:         rgba(255, 255, 255, 0.055);
  --border:        rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.28);

  /* Text. Measured against the lightened backdrop at its worst
     (brightest) point in each zone:
     #ffffff logo 8.0:1 · #ddd9e6 tagline 6.3:1 · #c9c4d6 footer 6.0:1 */
  --text:        #ffffff;
  --text-soft:   #ddd9e6;
  --text-muted:  #c9c4d6;   /* lifted with the background: 4.69:1 -> 5.99:1 in the footer */
  --danger:      var(--brand-red-soft);   /* 4.69:1 on the black panels */

  /* Fluid type scale */
  --step--2: clamp(0.75rem, 0.72rem + 0.14vw, 0.82rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.18vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.10rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.40vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.18rem + 0.85vw, 1.85rem);
  --step-4:  clamp(2.10rem, 1.55rem + 2.55vw, 3.75rem);

  /* ===========================================================
     LOGO SIZE — tune here
     Roughly double the previous values. The clamp is
     clamp(MOBILE_MIN, SCALES_WITH_VIEWPORT, DESKTOP_MAX):
     raise the last number to make the logo bigger on desktop,
     the first to make it bigger on phones.
     =========================================================== */
  --logo-width:         clamp(280px, 46vw, 620px);   /* home page hero  */
  --logo-width-compact: clamp(210px, 34vw, 410px);   /* form + thank-you */

  /* Shape & spacing */
  --radius:    16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --gutter:    clamp(1.15rem, 4.5vw, 2.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* The text scrims in section 3b are sized larger than the blocks
     they sit behind, so they extend past the viewport edge on
     narrow screens. They are purely decorative, so clip rather
     than let them create a horizontal scrollbar. */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100svh;
  background-color: #080710;      /* shows before the photo loads */
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; }

/* One consistent, high-visibility focus ring everywhere */
:focus-visible {
  outline: 3px solid var(--brand-red-soft);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 100;
  transform: translate(-50%, -130%);
  padding: 0.7rem 1.25rem;
  background: var(--brand-red);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* Visually hidden but available to assistive tech (honeypot wrapper) */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------
   3. Background photo + navy tint

   Layering, bottom to top:
     .backdrop::before  the photograph, untouched (no filter)
     .backdrop::after   background-color  = the navy tint
                        background-image  = the two local scrims

   background-color always paints beneath background-image on the
   same element, so the navy tint covers the whole page and the
   scrims sit on top of it — only where text needs them.
   ------------------------------------------------------------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #33465c;   /* shows before the photo loads */
}

/* a. the photograph — no filter, no darkening */
.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../background.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* b. the navy tint — the ONLY page-wide overlay */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 31, 63, var(--overlay-opacity));
}

/* -------------------------------------------------------------
   3b. Local text scrims

   The photo's sky is blown out to near-white behind the logo and
   headline, where a 25% navy tint alone leaves white text at
   1.75:1. Rather than darkening the whole page back down, each
   exposed text block carries its own soft halo, sized to that
   block and fading out well before its edges. Everything between
   and around them stays at the plain navy tint.

   Panels (.choice, .form-section, .thanks) need none of this —
   they already sit on their own dark glass.
   ------------------------------------------------------------- */
.masthead,
.hero__lede,
.site-footer { position: relative; }

.masthead::before,
.hero__lede::before,
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Behind the logo. This one is deliberately large and holds full
   strength out to 58%: the logo sits directly over the blown-out
   sky, the brightest part of the whole photo. A tighter ellipse
   fades to almost nothing by the logo's corners and leaves the
   white mark at 2.2:1. */
.masthead::before {
  inset: -80% -28%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(2, 12, 26, var(--scrim-hero)) 0%,
    rgba(2, 12, 26, var(--scrim-hero)) 58%,
    rgba(2, 12, 26, 0) 88%);
}

/* behind the headline block */
.hero__lede::before {
  inset: -12% -10%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(2, 12, 26, var(--scrim-hero)) 0%,
    rgba(2, 12, 26, var(--scrim-hero)) 52%,
    rgba(2, 12, 26, 0) 82%);
}

/* Behind the footer line. Like the masthead scrim, the
   full-strength zone has to reach past the ends of the text —
   a tighter ellipse leaves the outer words at 4.3:1. */
.site-footer::before {
  inset: -90% -22%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(2, 12, 26, var(--scrim-footer)) 0%,
    rgba(2, 12, 26, var(--scrim-footer)) 60%,
    rgba(2, 12, 26, 0) 88%);
}

/* -------------------------------------------------------------
   4. Layout shell
   ------------------------------------------------------------- */
.shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4.5vw, 3rem);
  min-height: 100svh;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 3.75rem) var(--gutter) clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

.shell--narrow  { max-width: 44rem; }
.shell--centred { justify-content: center; }

/* Landing page centres its content in the viewport */
.page--landing .shell { justify-content: center; }

main { width: 100%; }

/* -------------------------------------------------------------
   5. Logo
   The white PNG has genuine transparency, so a soft shadow is
   safe here — it traces the letterforms, not a background box.
   ------------------------------------------------------------- */
.logo {
  width: var(--logo-width);
  /* Cap against the VIEWPORT, not the parent. .masthead shrink-wraps
     the logo, so a percentage max-width here resolves against the
     logo's own box and drags it back down (88% of itself, forever).
     A vw cap keeps the edge margin without that feedback loop. */
  max-width: 88vw;
  height: auto;            /* keeps the 1024x330 aspect ratio intact */
  margin-inline: auto;
  filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.65));
}

.logo--small { width: var(--logo-width-compact); }

.masthead--compact { padding-top: 0; }

/* -------------------------------------------------------------
   6. Hero (index.html)
   ------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 2.2vw, 1.25rem);
}

.eyebrow {
  display: inline-block;
  padding: 0.35rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  /* A dark pill, not a white-tinted one: on the light navy backdrop
     the old rgba(255,255,255,0.055) fill left this text at 3.95:1.
     Backing it with the scrim colour brings it to 7.6:1. */
  background: rgba(2, 12, 26, 0.45);
  color: var(--text-soft);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__title {
  max-width: 18ch;
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}

/* Gradient lettering with a solid colour underneath as fallback */
/* The emphasised half of the H1, in the official brand red.
   #ef0f0f needs the backdrop behind it held at or below L 0.029 to
   clear the 3:1 large-text threshold, which is what --scrim-hero
   is set for. No gradient and no pink. */
.accent-text {
  color: var(--brand-red);
}

.hero__tagline {
  max-width: 54ch;
  color: var(--text-soft);
  font-size: var(--step-1);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
  text-wrap: pretty;
}

.hero__prompt {
  margin-top: clamp(0.75rem, 2.5vw, 1.5rem);
  /* This line sits below the hero scrim, on the lightest part of the
     page, so it takes full white: --text-muted measured only 3.61:1
     here, white measures 6.14:1. */
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   7. The two choice cards
   Each card is one <a>, so the entire box is clickable and is
   announced as a single link.
   ------------------------------------------------------------- */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(0.9rem, 2.2vw, 1.35rem);
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
}

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: clamp(1.4rem, 3.2vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 0.3s var(--ease),
              border-color 0.3s var(--ease),
              background-color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

/* Brand hairline along the top edge */
.choice::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-red);
}

.choice:hover,
.choice:focus-visible {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: rgba(20, 16, 28, 0.82);
  box-shadow: 0 26px 60px -24px rgba(239, 15, 15, 0.55);
}

.choice__kicker {
  color: var(--brand-red-soft);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.choice__title {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.choice__copy {
  flex: 1;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

.choice__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  color: #fff;
  font-weight: 700;
  font-size: var(--step--1);
}

.choice__arrow { transition: transform 0.3s var(--ease); }
.choice:hover .choice__arrow,
.choice:focus-visible .choice__arrow { transform: translateX(5px); }

/* -------------------------------------------------------------
   7b. Featured card — the Google Ad Grant offer

   Additive only: nothing above is modified. The charity card gets
   a red border, a heavier top hairline and a badge, so it reads as
   the headline offer without changing the grid or either card's
   size. The Ad Grant is charity-only, so none of this is applied
   to the businesses card.
   ------------------------------------------------------------- */
.choice--featured {
  border-color: rgba(239, 15, 15, 0.55);
  box-shadow: 0 18px 44px -26px rgba(239, 15, 15, 0.5);
}

.choice--featured::before { height: 5px; }

.choice--featured:hover,
.choice--featured:focus-visible {
  border-color: var(--brand-red);
}

/* Kicker and badge on one row. Wraps instead of overlapping when
   the card is narrow, so the badge can never sit on the heading. */
.choice__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
}

/* "€10,000 FREE" badge.
   Red on black rather than white on a red fill: at this size white
   on #ef0f0f measures 4.43:1, just under the 4.5 needed for small
   text, whereas --brand-red-soft on the black panel is 4.69:1 —
   and it matches the kicker treatment already on the cards. */
.choice__badge {
  flex: none;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(239, 15, 15, 0.9);
  border-radius: var(--radius-pill);
  background: var(--brand-black);
  color: var(--brand-red-soft);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Eligibility caveat under the call to action */
.choice__note {
  margin-top: 0.3rem;
  color: var(--text-muted);
  font-size: var(--step--2);
  line-height: 1.45;
}

/* -------------------------------------------------------------
   8. Form (form.html)
   ------------------------------------------------------------- */
.form-section {
  width: 100%;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-align: left;
}

.form-heading {
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: center;
}

.form-intro {
  margin: 0.5rem auto clamp(1.5rem, 4vw, 2rem);
  max-width: 42ch;
  color: var(--text-muted);
  font-size: var(--step--1);
  text-align: center;
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.3rem);
}

/* Two fields side by side on wider screens */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.3rem);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.field__label {
  color: var(--text-soft);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.req { color: var(--brand-red-soft); }

.field__input {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: var(--step-0);
  transition: border-color 0.25s var(--ease),
              background-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}

.field__input::placeholder { color: rgba(255, 255, 255, 0.38); }

.field__input:hover { background: rgba(255, 255, 255, 0.09); }

.field__input:focus {
  outline: none;
  border-color: var(--brand-red-soft);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(239, 15, 15, 0.35);
}

/* Native select arrow, drawn inline so no image file is needed */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image:
    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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 1.05rem;
  cursor: pointer;
}

/* Dropdown list itself is painted by the OS — force a dark palette */
.field__select option { background: #14121c; color: #fff; }

/* Invalid state */
.field__input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 139, 167, 0.18);
}

.field__error {
  min-height: 0;
  color: var(--danger);
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.4;
}
.field__error:empty { display: none; }

/* Radio group */
.fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.fieldset legend { padding: 0; margin-bottom: 0.55rem; }

.radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.65rem;
}

.radio {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.radio:hover { background: rgba(255, 255, 255, 0.09); }

/* Hide the native control but keep it focusable AND announced.
   Note: `opacity: 0` would look identical but removes the input
   from the accessibility tree in Chrome, so screen-reader users
   could not reach this required field. The clip pattern below
   hides it visually while leaving it fully exposed to AT. */
.radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.radio__box {
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.radio__text { font-size: var(--step--1); font-weight: 600; }

.radio input:checked ~ .radio__box {
  border-color: var(--brand-red-soft);
  box-shadow: inset 0 0 0 4px var(--brand-red);
}

.radio:has(input:checked) {
  border-color: var(--brand-red-soft);
  background: rgba(239, 15, 15, 0.16);
}

/* Focus ring on the visible box, since the input itself is hidden */
.radio input:focus-visible ~ .radio__box {
  outline: 3px solid var(--brand-red-soft);
  outline-offset: 3px;
}

/* Form-level status message */
.form-status {
  color: var(--text-soft);
  font-size: var(--step--1);
  font-weight: 600;
}
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: var(--danger); }

.form-actions { margin-top: 0.25rem; }

.form-privacy {
  color: var(--text-muted);
  font-size: var(--step--2);
  text-align: center;
}

/* -------------------------------------------------------------
   9. Buttons & links
   ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand-red);
  color: #fff;
  font: inherit;
  font-weight: 700;
  /* 19px, held fixed rather than fluid. White on the official
     #ef0f0f is 4.43:1 — short of the 4.5 needed for normal-size
     text, but clear of the 3:1 that applies at 18.66px bold and
     above. Sizing the label up keeps the button the exact brand
     red instead of darkening it. */
  font-size: 1.19rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 18px 44px -18px rgba(239, 15, 15, 0.7);
  transition: background-color 0.25s var(--ease),
              transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}

.btn:hover {
  background: var(--brand-red-deep);
  transform: translateY(-2px);
  box-shadow: 0 24px 56px -18px rgba(239, 15, 15, 0.85);
}
.btn:active { transform: translateY(0); }

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.btn--submit { width: 100%; }

.footer-link,
.text-link {
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(239, 15, 15, 0.65);
  padding-bottom: 1px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.footer-link:hover,
.text-link:hover { color: var(--brand-red-soft); border-color: var(--brand-red-soft); }

/* -------------------------------------------------------------
   10. Thank-you page
   ------------------------------------------------------------- */
.thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4.5vw, 2.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.thanks__mark {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  box-shadow: 0 18px 44px -16px rgba(239, 15, 15, 0.75);
}

.thanks__title {
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.thanks__copy {
  max-width: 34ch;
  color: var(--text-soft);
  font-size: var(--step-1);
}

.thanks__meta {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.thanks__back { margin-top: 0.5rem; }

/* -------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: var(--step--2);
}

.site-footer__copy { opacity: 0.85; }

/* -------------------------------------------------------------
   12. Entrance animation
   Applied only once JS adds .js, so with scripts disabled the
   page renders immediately at full opacity.
   ------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 0.75s var(--ease) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------
   13. Reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------
   14. Small screens
   ------------------------------------------------------------- */
@media (max-width: 30rem) {
  .eyebrow { letter-spacing: 0.1em; }
  .choice { padding: 1.25rem; }
  .form-section { padding: 1.25rem 1.1rem; }
  /* Roomier tap targets on touch devices */
  .field__input { padding: 0.85rem 0.9rem; }
}

/* The photo is fixed by default; on very short landscape viewports
   let the whole page scroll normally instead. */
@media (max-height: 30rem) and (orientation: landscape) {
  .shell { justify-content: flex-start; }
  .page--landing .shell { justify-content: flex-start; }
}

/* -------------------------------------------------------------
   15. Print — drop the photo, print dark-on-white
   ------------------------------------------------------------- */
@media print {
  .backdrop, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .choice, .form-section, .thanks { border-color: #ccc; background: #fff; }
  .accent-text { color: #ef0f0f; }
  .logo { filter: invert(1); }
}