/* =============================================================
   COMPONENTS — nav, buttons, cards, marquee, accordion, forms
   ============================================================= */

/* -------------------------------------------------------------
   BUTTONS
   The reference stacks two copies of the label and slides one out
   as the other slides in on hover. That is why its CTAs appear
   twice in the accessibility tree — the duplicate is aria-hidden
   here so screen readers announce the label once.
   ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--tk-black);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__label {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
}
.btn__label > span {
  display: block;
  /* The clip box is 1.2em tall but the span inherited the body's 1.6
     line-height, so half-leading pushed every label about 3px below the
     button's centre. Matching the two centres the text. */
  line-height: 1.2;
  transition: transform var(--dur-mid) var(--ease-out);
}
.btn__label > span:last-child {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
}
.btn:hover .btn__label > span:first-child { transform: translateY(-110%); }
.btn:hover .btn__label > span:last-child  { transform: translateY(0); }

.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  border: 1px solid var(--rule-strong);
}
.btn--ghost:hover { --btn-bg: var(--bg-elevated); border-color: var(--rule-strong); }

.btn--light { --btn-bg: var(--tk-offwhite); --btn-fg: var(--tk-black); }
.btn--dark  { --btn-bg: var(--tk-black); --btn-fg: var(--tk-offwhite); }
.btn--lg    { padding: 1.15rem 2rem; font-size: var(--fs-body); }

/* Inline text link with an underline that wipes in. */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding-bottom: 2px;
}
.link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-out);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }
.link:hover { color: var(--accent); }

/* -------------------------------------------------------------
   NAV
   ------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) var(--gutter);
  transition: background-color var(--dur-mid) var(--ease-out),
              padding var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
  padding-block: var(--s-4);
}

.nav__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.nav__logo sup {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}
.nav__logo .dot { color: var(--accent); }

/* The mark ships as the client's own white-on-transparent original, so it
   needs no colour filter, only sizing. */
.nav__logo img {
  display: block;
  height: 38px;
  width: auto;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav__logo:hover img { opacity: 0.72; }
/* The footer sits at a calmer scale than the nav. */
.footer__logo img { height: 44px; }
@media (max-width: 640px) {
  .nav__logo img { height: 30px; }
}

.nav__links { display: flex; align-items: center; gap: var(--s-6); }
.nav__links a {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  /* Text alone leaves a 22px target, two short of the minimum. The
     underline is positioned from the text box, so padding here does not
     move it. */
  padding-block: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav__links a:hover { color: var(--text-primary); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current="page"] { color: var(--text-primary); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: var(--s-5); }

/* Availability pill */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.status__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@media (prefers-reduced-motion: reduce) { html:not(.motion-on) .status__dot { animation: none; } }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0 8px;
}
.nav__burger span {
  display: block;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__links, .nav__right .status { display: none; }
  .nav__burger { display: flex; }
}

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-slow) var(--ease-out);
  visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
/* Direct children only. As `.menu a` this also caught the email address
   down in the footer and set it in 40px display type, where it needed
   644px of a 400px column and simply ran out of the panel. */
.menu > a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-3);
}
.menu a:hover { color: var(--accent); }
.menu__footer {
  margin-top: var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.menu__footer a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-secondary);
  /* An address is one long token; let it wrap rather than run off. */
  overflow-wrap: anywhere;
  max-width: 100%;
  transition: color var(--dur-fast) var(--ease-out);
}
.menu__footer a:hover,
.menu__footer a:focus-visible { color: var(--accent); }

/* -------------------------------------------------------------
   CURSOR — desktop pointer devices only
   ------------------------------------------------------------- */
.cursor, .cursor-follow {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}
.cursor {
  width: 6px; height: 6px;
  background: var(--accent);
}
.cursor-follow {
  width: 34px; height: 34px;
  border: 1px solid var(--accent-line);
  transition: width var(--dur-fast) var(--ease-out),
              height var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.cursor-follow.is-active {
  width: 62px; height: 62px;
  background: var(--accent-glow);
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor, .cursor-follow { display: none; }
}

/* -------------------------------------------------------------
   MARQUEE
   ------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-5);
  border-block: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-right: var(--s-6);
  flex: none;
}
.marquee__item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.marquee__sep { color: var(--accent); font-size: 0.85em; }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .marquee__track { animation: none; }
  html:not(.motion-on) .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* -------------------------------------------------------------
   CARDS
   ------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition: background-color var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.card:hover {
  background: var(--bg-elevated);
  border-color: var(--rule-strong);
  transform: translateY(-3px);
}
.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  letter-spacing: 0.08em;
}

/* The rows slide in from 40px off-axis, which is 40px wider than the
   page until each trigger fires. Clip rather than scroll: `clip` does
   not create a scroll container, so it cannot break a sticky ancestor
   the way `hidden` would. */
.svc-list { overflow-x: clip; }

/* Service row — the reference lists services as full-width rows that
   expand, not as a boxed grid. */
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  gap: var(--s-5);
  align-items: start;
  padding-block: var(--s-6);
  border-top: 1px solid var(--rule);
  transition: background-color var(--dur-mid) var(--ease-out);
}
.svc-row:last-child { border-bottom: 1px solid var(--rule); }
.svc-row:hover { background: rgba(255, 195, 0, 0.03); }
.svc-row__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}
.svc-row__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); }
.svc-row__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}
.svc-row__bullets li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.svc-row__arrow {
  font-size: 1.25rem;
  color: var(--text-muted);
  transition: transform var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}
.svc-row:hover .svc-row__arrow { transform: translate(4px, -4px); color: var(--accent); }

@media (max-width: 860px) {
  .svc-row { grid-template-columns: 1fr; gap: var(--s-4); }
  .svc-row__arrow { display: none; }
}

/* Work card */
.work-card { position: relative; display: block; }
.work-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--rule);
}
.work-card__media img,
.work-card__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
}
.work-card:hover .work-card__media img,
.work-card:hover .work-card__media video {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1);
}
.work-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--s-5);
  background: linear-gradient(to top, rgba(10,10,10,0.85), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.work-card:hover .work-card__overlay { opacity: 1; }
.work-card__metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--accent);
}
.work-card__info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
}
.work-card__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; }
.work-card__cat { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: var(--ls-wide); text-transform: uppercase; }

/* Placeholder shown until real media lands. Deliberately labelled
   so an unfilled slot is obvious rather than looking intentional. */
.media-todo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--s-2);
  text-align: center;
  background:
    repeating-linear-gradient(45deg,
      var(--bg-surface) 0 10px,
      var(--bg-raised) 10px 20px);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
}

/* Filter buttons */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-btn {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.filter-btn:hover { color: var(--text-primary); border-color: var(--rule-strong); }
.filter-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--tk-black);
  font-weight: 600;
}

/* -------------------------------------------------------------
   ACCORDION (FAQ + process)
   ------------------------------------------------------------- */
.acc__item { border-top: 1px solid var(--rule); }
.acc__item:last-child { border-bottom: 1px solid var(--rule); }
.acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out);
}
.acc__trigger:hover { color: var(--accent); }
.acc__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); flex: none; }
.acc__icon {
  position: relative;
  flex: none;
  width: 16px; height: 16px;
}
.acc__icon::before, .acc__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__trigger[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-mid) var(--ease-out);
}
.acc__trigger[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p {
  padding-bottom: var(--s-5);
  max-width: 46rem;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------
   FORMS
   ------------------------------------------------------------- */
.field { position: relative; display: flex; flex-direction: column; gap: var(--s-2); }
.field label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.9rem 0;
  background: transparent;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--text-primary);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field select option { background: var(--bg-surface); color: var(--text-primary); }

.form-note { font-size: var(--fs-sm); color: var(--text-muted); }
.form-status {
  padding: var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok   { background: rgba(74, 222, 128, 0.1); color: #86EFAC; border: 1px solid rgba(74,222,128,0.25); }
.form-status--err  { background: rgba(248, 113, 113, 0.1); color: #FCA5A5; border: 1px solid rgba(248,113,113,0.25); }

/* Honeypot — bots fill it, humans never see it. */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */
.footer { border-top: 1px solid var(--rule); padding-top: var(--s-8); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-8);
}
.footer__col h2 {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}
.footer__col a, .footer__col p {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding-block: 5px;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--accent); }
.footer__mark {
  font-family: var(--font-display);
  font-weight: 800;
  /* TOMMYKREATION is 13 characters wide and was clipping at both ends: the
     old clamp had a 3rem floor that no longer fit a narrow viewport, and a
     9rem ceiling the wordmark outgrew. Sizing purely off the viewport keeps
     the whole word on screen at every width. */
  /* TOMMYKREATION measures 14.77em in Syne 800 at this tracking, so the
     type size is derived from that rather than guessed: 14.77 x 6.2vw is
     ~91.6% of the viewport, leaving even margin at every width. Both the
     size and the padding are viewport-relative so that ratio holds. */
  font-size: 6.2vw;
  line-height: 0.9;
  letter-spacing: var(--ls-mega);
  color: var(--text-ghost);
  padding-block: var(--s-6);
  padding-inline: 2vw;
  border-top: 1px solid var(--rule);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   PARTNER LOGO MARQUEE
   Logos are forced to flat white with a filter rather than being
   recoloured on disk, so the originals stay untouched and any
   source format works — provided it has a transparent background.

   Deliberately NOT lazy-loaded. The browser defers lazy images by
   layout position, and a transform-animated track never changes
   layout position — so logos further along the strip would never
   load and would scroll past as gaps. The whole set is ~320KB.
   ------------------------------------------------------------- */
.marquee--logos { padding-block: var(--s-6); }
.marquee--logos .marquee__group { align-items: center; min-height: 52px; }

.marquee__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* Per-logo height comes from optical-area normalisation at import time;
     35px is the fallback for anything without a measured value. */
  height: var(--logo-h, 35px);
  padding-inline: var(--s-5);
}
.marquee__logo img {
  height: 100%;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  /* Any colour in, flat white out. Alpha is preserved. */
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.marquee:hover .marquee__logo img { opacity: 0.62; }
.marquee__logo img:hover { opacity: 1; }

@media (max-width: 640px) {
  .marquee__logo { height: calc(var(--logo-h, 27px) * 0.78); padding-inline: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .marquee--logos .marquee__track { animation: none; }
}

/* -------------------------------------------------------------
   CONSENT NOTICE
   Sits at the foot of the screen rather than across the middle:
   the page is readable while the question is open, which is the
   difference between a notice and a toll gate.
   ------------------------------------------------------------- */
.consent {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--s-5);
  z-index: var(--z-menu);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--s-4) var(--s-5);
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.8);
  transform: translateY(calc(100% + var(--s-6)));
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-mid) var(--ease-out);
}
.consent.is-up { transform: none; opacity: 1; }
.consent[hidden] { display: none; }

.consent__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.consent__actions { display: flex; gap: var(--s-3); flex: none; }
.consent__btn {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.consent__btn:hover,
.consent__btn:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.consent__btn--yes {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-light);
  font-weight: 600;
}
.consent__btn--yes:hover,
.consent__btn--yes:focus-visible { background: var(--accent-400); border-color: var(--accent-400); color: var(--text-on-light); }

/* Stacked on a phone: side by side, the copy is squeezed to a column
   two words wide before the buttons will fit. */
@media (max-width: 640px) {
  .consent { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .consent__actions { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .consent { transition: none; }
}

/* A plain button styled as the quiet text link beside it, so the
   consent choice can be revisited without adding a page. */
.footer__consent {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule-strong);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__consent:hover,
.footer__consent:focus-visible { color: var(--accent); outline: none; }