/* ===========================================================
   UPPERSKY MEDIA — contact: "the arrival gate"
   Page-only styles, namespaced .ct-. Tokens live in styles.css;
   chapters, buttons, FAQ and the flight-plan form come from kit.css.
   =========================================================== */

/* how far the first light chapter slides up over the hero */
.page--contact{ --ct-lift: clamp(20px, 3vw, 40px); }

/* ===================== HERO — story + the gate ===================== */
.ct-hero{
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg-dark);
  color: var(--on-dark);
  overflow: clip;
}
.ct-hero__media{
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  /* the photo fades itself out, so the parallax drift never reveals its bottom edge */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
}
.ct-hero__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 66% 42%;
  /* near-monochrome: a warm-grey sky, so the lime is the only colour on screen */
  filter: saturate(.32) contrast(1.08) brightness(.92);
}
.ct-hero__shade{
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(10,11,14,.95) 0%, rgba(10,11,14,.84) 34%, rgba(10,11,14,.5) 64%, rgba(10,11,14,.66) 100%),
    linear-gradient(180deg, rgba(10,11,14,.72) 0%, rgba(10,11,14,0) 24%, rgba(10,11,14,0) 54%, var(--bg-dark) 92%);
}
.ct-hero__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(440px, 44vw, 580px));
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "intro gate"
    "next  next"
    "log   log";
  column-gap: clamp(40px, 6vw, 110px);
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(108px, 15vh, 150px) var(--pad) 0;
}
/* clear the fixed menu tab (64px, top-left) whenever the content edge would sit under it */
@media (min-width: 769px){
  .ct-hero__inner{ padding-left: max(var(--pad), calc(96px - max(0px, (100vw - var(--max)) / 2))); }
}

/* ---------- the story ---------- */
.ct-story{ grid-area: intro; min-width: 0; padding-top: 4px; }
.ct-status{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.ct-pulse{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  animation: colophonPulse 2.2s var(--easing) infinite;
}
.ct-title{
  margin: 26px 0 24px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(46px, 6vw, 92px);
  line-height: .9;
  letter-spacing: -.004em;
  text-transform: uppercase;
}
.ct-title .line{ display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ct-title .line > span{ display: inline-block; }
.ct-title em{ font-style: italic; color: var(--yellow); padding-right: .08em; }
.ct-lede{
  max-width: 46ch;
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.65;
  color: var(--on-dark-2);
}

/* promise markers: Free · No commitment · Private */
.ct-promises{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 560px;
  margin: 32px 0 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
.ct-promise{
  display: grid;
  grid-template-areas: "icon" "label" "copy";
  align-content: start;
  gap: 6px;
}
.ct-promise__icon{
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 1px solid rgba(212,255,61,.42);
  background: rgba(212,255,61,.05);
  color: var(--yellow);
}
.ct-promise__icon svg{
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ct-promise b{
  grid-area: label;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ct-promise__copy{ grid-area: copy; font-size: 13.5px; line-height: 1.5; color: var(--on-dark-3); }

/* ---------- what happens next ---------- */
/* a full-width row of three waypoints under the form (a vertical list on phones) */
.ct-next{ grid-area: next; min-width: 0; align-self: start; margin-top: clamp(56px, 9vh, 96px); }
.ct-next__title{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.ct-next__title::before{ content: ''; width: 28px; height: 1px; background: currentColor; }
.ct-next__track{ position: relative; --ct-step-gap: clamp(24px, 3.4vw, 56px); }
/* dashed flight path from the first waypoint's centre to the last one's */
.ct-next__path{
  position: absolute;
  top: 19.25px;
  left: 20px;
  right: calc((100% - 2 * var(--ct-step-gap)) / 3 - 20px);
  border-top: 1.5px dashed rgba(255,255,255,.22);
  transform-origin: 0 50%;
}
.ct-next__list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px var(--ct-step-gap);
  margin: 0; padding: 0;
  list-style: none;
}
.ct-step{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ct-step__num{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: #0d0e12;
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--on-dark-2);
  transition: background .5s var(--easing), border-color .5s, color .5s, box-shadow .5s;
}
.ct-step__title{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ct-step__copy{ max-width: 44ch; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--on-dark-3); }
.ct-step__tag{
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(212,255,61,.12);
  color: var(--yellow);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .24em;
}
/* step 1 is where the visitor stands; once the plan is filed, step 2 lights up */
.ct-step:first-child .ct-step__num{
  background: var(--yellow);
  border-color: var(--yellow);
  color: #0a0b0e;
  box-shadow: 0 0 0 6px rgba(212,255,61,.12);
}
.ct-step__tag--next{ display: none; }
.ct-hero.is-filed .ct-step__tag--now{ display: none; }
.ct-hero.is-filed .ct-step__tag--next{ display: inline-block; }
.ct-hero.is-filed .ct-step:first-child .ct-step__num{
  background: #0d0e12;
  color: var(--yellow);
  box-shadow: none;
}
.ct-hero.is-filed .ct-step:nth-child(2) .ct-step__num{
  background: var(--yellow);
  border-color: var(--yellow);
  color: #0a0b0e;
  box-shadow: 0 0 0 6px rgba(212,255,61,.12);
}

/* ===================== THE GATE — instrument bezel + departure board ===================== */
.ct-gate{
  grid-area: gate;
  position: relative;
  align-self: start;
  min-width: 0;
  container-type: inline-size;
}
/* lime light pooling behind the panel */
.ct-gate__glow{
  position: absolute;
  z-index: -1;
  inset: 18% -4% 10% 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212,255,61,.2), rgba(212,255,61,0));
  filter: blur(40px);
  opacity: .6;
  pointer-events: none;
  animation: ct-breathe 7s ease-in-out infinite alternate;
}
@keyframes ct-breathe{ from{ transform: scale(.94); } to{ transform: scale(1.05); } }

.ct-bezel{
  position: relative;
  padding: 8px;
  border-radius: 26px;
  background:
    radial-gradient(520px circle at var(--mx, 86%) var(--my, -18%), rgba(255,255,255,.11), transparent 62%),
    linear-gradient(180deg, rgba(30,32,38,.76), rgba(14,15,19,.86));
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  box-shadow:
    0 70px 120px -50px rgba(0,0,0,.9),
    0 0 90px -34px rgba(212,255,61,.32);
}
/* glass edge: a bright rim top-left fading to a lime kiss bottom-right */
.ct-bezel::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,.44), rgba(255,255,255,.07) 30%, rgba(255,255,255,.03) 64%, rgba(212,255,61,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* viewfinder corners — the panel framed like a shot */
.ct-gate__frame{
  --c: rgba(212,255,61,.85);
  --l: 22px;
  --w: 1.5px;
  position: absolute;
  inset: -14px;
  pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) left top / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) right top / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) right top / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) left bottom / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) left bottom / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) right bottom / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) right bottom / var(--w) var(--l);
  background-repeat: no-repeat;
}

/* departure board */
.ct-board{
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(14px, 1.8vw, 24px);
  padding: 12px 14px 14px;
}
.ct-board__emblem{ width: 26px; height: 26px; align-self: center; color: var(--yellow); }
.ct-board__cell{ display: grid; gap: 7px; min-width: 0; }
.ct-board__cell--status{ justify-self: end; }
.ct-board__label{
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.ct-flap{
  display: inline-flex;
  gap: 2px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-dark);
}
.ct-flap--lime{ color: var(--yellow); }
.ct-tile{
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px; height: 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, #1e2127 0 50%, #16181d 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.6);
  letter-spacing: 0;
}
/* the hinge every split-flap character folds on */
.ct-tile::after{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0,0,0,.6);
}
.ct-tile.is-sym{ width: 10px; background: none; box-shadow: none; color: var(--yellow); }
.ct-tile.is-sym::after{ display: none; }
.ct-tile.is-flip{ animation: ct-flip .16s ease-out; }
@keyframes ct-flip{ from{ transform: perspective(60px) rotateX(-75deg); filter: brightness(1.7); } }
.ct-board__time{ display: inline-flex; align-items: flex-end; gap: 6px; }
.ct-board__ampm{
  padding-bottom: 3px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--on-dark-3);
}
.ct-board__status{ display: inline-flex; align-items: center; gap: 9px; }
.ct-board__dot{
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  animation: colophonPulse 2.2s var(--easing) infinite;
}
.ct-board[data-leg="done"] .ct-board__dot{ animation: none; box-shadow: 0 0 12px rgba(212,255,61,.9); }

/* the screen the form sits on — solid, so the boarding-pass notches match it */
.ct-screen{
  position: relative;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 19px;
  background: #0e0f13;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.45);
}
.ct-screen .flightplan{ --pass-cut: #0e0f13; }
/* the story already carries the free/no-commitment pill */
.ct-screen .flightform__kicker{ display: none; }
.ct-screen .flightform__title{ margin-top: 0; font-size: clamp(36px, 3.3vw, 50px); }
.ct-screen .mission__card{ min-height: 124px; }
/* hold the panel's height steady as the legs change, so the hero doesn't jump */
.ct-screen .flightform__stage{ min-height: 318px; }
.ct-screen .ff-btn:focus-visible,
.ct-screen .flightform__back:focus-visible{ outline: 2px solid var(--on-dark); outline-offset: 3px; }

.ct-gate__alt{
  margin: 24px 0 0;
  padding: 0 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--on-dark-3);
}
.ct-gate__alt a{
  color: var(--on-dark);
  border-bottom: 1px solid rgba(255,255,255,.25);
  white-space: nowrap;
  transition: color .25s, border-color .25s;
}
.ct-gate__alt a:hover{ color: var(--yellow); border-color: var(--yellow); }
.ct-hero a:focus-visible{ outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 2px; }

/* narrow panels: board folds onto two rows, screen tightens */
@container (max-width: 560px){
  .ct-board{ grid-template-columns: auto auto minmax(0, 1fr); row-gap: 12px; }
  .ct-board__cell--status{
    grid-column: 1 / -1;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
}
@container (max-width: 460px){
  .ct-screen{ padding: 22px 18px; border-radius: 17px; }
  .ct-screen .flightform__title{ font-size: 38px; }
}

/* ---------- flight log ---------- */
.ct-log{
  grid-area: log;
  display: grid;
  grid-template-columns: repeat(3, auto) minmax(0, 1fr);
  align-items: start;
  gap: 24px clamp(28px, 4.4vw, 72px);
  margin: clamp(64px, 10vh, 110px) 0 0;
  padding: 28px 0 calc(clamp(40px, 7vh, 72px) + var(--ct-lift));
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
.ct-log__stat{ display: grid; gap: 8px; min-width: 0; }
.ct-log__num{
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: .9;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.ct-log__num i{ font-style: normal; color: var(--yellow); }
.ct-log__label{
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.ct-log__tag{
  justify-self: end;
  align-self: center;
  max-width: 16ch;
  text-align: right;
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--on-dark-2);
}
.ct-log__tag em{ font-style: normal; color: var(--yellow); }

/* hero intro: held back until contact.js runs the arrival (head script adds .ct-arriving) */
@media (prefers-reduced-motion: no-preference){
  .ct-arriving .ct-hero [data-ct-in],
  .ct-arriving .ct-gate{ opacity: 0; }
  .ct-arriving .ct-title .line > span{ transform: translateY(110%); }
}

/* ===================== DIRECT LINES ===================== */
/* the first light chapter slides up over the hero like a sheet */
.ct-lines{
  z-index: 1;
  margin-top: calc(var(--ct-lift) * -1);
  border-radius: var(--ct-lift) var(--ct-lift) 0 0;
}
.ct-lines__list{ margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ct-line{
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 44px minmax(100px, 170px) minmax(0, 1fr) auto;
  grid-template-areas: "num label main go";
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 36px);
  padding: clamp(26px, 4.4vh, 44px) clamp(14px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  overflow: hidden;
  transition: color .45s var(--easing);
}
/* ink rises from the floor of the row on hover / focus */
.ct-line::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-dark);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .55s var(--easing);
}
.ct-line__num{
  grid-area: num;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--ink-3);
  transition: color .45s;
}
.ct-line__label{
  grid-area: label;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .45s;
}
.ct-line__main{ grid-area: main; display: grid; gap: 10px; min-width: 0; }
.ct-line__value{
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: clamp(36px, 5.2vw, 84px);
  line-height: .9;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
  transition: transform .55s var(--easing);
}
.ct-line__note{ font-size: 14.5px; line-height: 1.5; color: var(--ink-3); transition: color .45s; }
.ct-line__go{
  grid-area: go;
  display: grid;
  place-items: center;
  width: clamp(52px, 5vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background .4s var(--easing), border-color .4s, color .4s;
}
.ct-line__go svg{
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .5s var(--easing);
}
.ct-line__time{ grid-area: go; display: grid; gap: 6px; justify-items: end; text-align: right; }
.ct-line__time b{
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ct-line__time span{
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

a.ct-line:focus-visible{ color: var(--on-dark); outline: 2px solid var(--yellow); outline-offset: -2px; }
a.ct-line:focus-visible::before{ transform: scaleY(1); }
a.ct-line:focus-visible .ct-line__num,
a.ct-line:focus-visible .ct-line__label{ color: var(--yellow); }
a.ct-line:focus-visible .ct-line__note{ color: var(--on-dark-3); }
a.ct-line:focus-visible .ct-line__go{ background: var(--yellow); border-color: var(--yellow); color: #0a0b0e; }
@media (hover: hover){
  a.ct-line:hover{ color: var(--on-dark); }
  a.ct-line:hover::before{ transform: scaleY(1); }
  a.ct-line:hover .ct-line__num,
  a.ct-line:hover .ct-line__label{ color: var(--yellow); }
  a.ct-line:hover .ct-line__value{ transform: translateX(12px); }
  a.ct-line:hover .ct-line__note{ color: var(--on-dark-3); }
  a.ct-line:hover .ct-line__go{ background: var(--yellow); border-color: var(--yellow); color: #0a0b0e; }
  a.ct-line:hover .ct-line__go svg{ transform: rotate(45deg); }
}

/* ---------- privacy promise ---------- */
.ct-privacy{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin-top: clamp(64px, 11vh, 120px);
  border-radius: clamp(20px, 2.4vw, 30px);
  background: var(--bg-dark);
  color: var(--on-dark);
  overflow: hidden;
}
.ct-privacy__media{ position: relative; min-height: 440px; margin: 0; }
.ct-privacy__media > img{
  position: absolute;
  top: 0; left: 0;
  filter: saturate(.55) brightness(.82);
}
.ct-privacy__media::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,11,14,0) 38%, rgba(10,11,14,.7) 80%, var(--bg-dark) 100%),
    linear-gradient(0deg, rgba(10,11,14,.6), rgba(10,11,14,0) 46%);
  pointer-events: none;
}
/* the seal sits on the seam between photo and copy (5fr / 12fr = 41.667%) */
.ct-seal{
  position: absolute;
  z-index: 2;
  top: clamp(30px, 5vh, 52px);
  left: calc(41.667% - 66px);
  width: 132px; height: 132px;
}
.ct-seal svg{ width: 100%; height: 100%; overflow: visible; }
.ct-seal__disc{ fill: #111317; stroke: rgba(255,255,255,.14); stroke-width: 1; }
.ct-seal__ring{
  transform-box: view-box;
  transform-origin: 100px 100px;
  animation: ct-spin 26s linear infinite;
}
.ct-seal text{
  fill: var(--on-dark);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3px;
}
.ct-seal__core{ fill: var(--yellow); }
.ct-seal__lock{ fill: none; stroke: #0a0b0e; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ct-spin{ to{ transform: rotate(360deg); } }

.ct-privacy__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(36px, 5.4vw, 80px) clamp(28px, 5.4vw, 80px) clamp(36px, 5.4vw, 80px) clamp(48px, 7vw, 110px);
}
.ct-privacy .kicker{ color: var(--on-dark-3); }
.ct-privacy__title{
  margin: 0 0 18px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1;
  text-transform: uppercase;
}
.ct-privacy__title em{ font-style: italic; color: var(--yellow); }
.ct-privacy__copy{
  max-width: 44ch;
  margin: 0 0 26px;
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.65;
  color: var(--on-dark-2);
}
.ct-privacy__list{
  display: grid;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
.ct-privacy__list li{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* lime check badge */
.ct-privacy__list li::before{
  content: '';
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%230a0b0e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ===================== QUESTIONS ===================== */
.ct-faq__card{
  display: grid;
  justify-items: start;
  gap: 20px;
  max-width: 420px;
  margin-top: clamp(28px, 5vh, 44px);
  padding: 26px 26px 28px;
  border-radius: 18px;
  background: var(--bg-light);
  border: 1px solid var(--line);
}
.ct-faq__card-title{
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
  text-transform: uppercase;
}
.ct-faq .btn:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.ct-faq summary:focus-visible{ outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.ct-faq summary:hover{ color: var(--ink-2); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1180px){
  .ct-promise b{ font-size: 12px; letter-spacing: .14em; }
}

/* single column: story, then the gate, then what happens next */
@media (max-width: 960px){
  .ct-hero{ align-items: start; }
  .ct-hero__media{ bottom: auto; height: 110vh; height: 110svh; }
  .ct-hero__media img{ object-position: 62% 34%; }
  /* taller than the photo, so it still covers it after the parallax drift (+12%) */
  .ct-hero__shade{
    bottom: auto;
    height: 125vh;
    height: 125svh;
    background:
      linear-gradient(180deg, rgba(10,11,14,.55) 0%, rgba(10,11,14,.72) 26%, rgba(10,11,14,.9) 55%, var(--bg-dark) 86%);
  }
  .ct-hero__inner{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "intro" "gate" "next" "log";
  }
  .ct-title{ font-size: clamp(46px, 10vw, 96px); }
  .ct-gate{ width: 100%; max-width: 640px; margin-top: clamp(48px, 8vh, 72px); }
  .ct-next{ margin-top: clamp(56px, 9vh, 80px); }
  .ct-log{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-log__tag{ grid-column: 1 / -1; justify-self: start; max-width: none; text-align: left; }

  .ct-privacy{ grid-template-columns: minmax(0, 1fr); }
  .ct-privacy__media{ min-height: 300px; }
  .ct-privacy__media::after{ background: linear-gradient(0deg, var(--bg-dark), rgba(10,11,14,0) 55%); }
  .ct-seal{ top: calc(300px - 66px); left: auto; right: clamp(20px, 5vw, 44px); }
  .ct-privacy__body{ padding: clamp(80px, 12vw, 96px) clamp(24px, 6vw, 56px) clamp(36px, 7vw, 56px); }
}

@media (max-width: 768px){
  .ct-hero__inner{ padding-top: 100px; }
}

/* phones: the waypoints stack, path runs down beside the numbers */
@media (max-width: 640px){
  .ct-next__path{
    top: 20px; bottom: 44px; left: 19.25px; right: auto;
    border-top: 0;
    border-left: 1.5px dashed rgba(255,255,255,.22);
    transform-origin: 50% 0;
  }
  .ct-next__list{ grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ct-step{ grid-template-columns: 40px minmax(0, 1fr); }
  .ct-step__title{ margin: 9px 0 6px; }
}

@media (max-width: 760px){
  .ct-line{
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "num  label go"
      "main main  main";
    row-gap: 18px;
    column-gap: 14px;
  }
  .ct-line__go{ width: 46px; }
  .ct-line__go svg{ width: 18px; height: 18px; }
  .ct-line__value{ font-size: clamp(32px, 9vw, 56px); }
  .ct-line__time{ justify-items: end; }
  .ct-line__time b{ font-size: 24px; }
  .ct-line__time span{ display: none; }
}

@media (max-width: 640px){
  .ct-status{ font-size: 10px; letter-spacing: .2em; padding: 7px 12px 7px 10px; }
  .ct-title{ margin: 22px 0 20px; font-size: clamp(42px, 12.4vw, 60px); }
  .ct-promises{ grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .ct-promise{
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas: "icon label" "icon copy";
    column-gap: 14px;
    row-gap: 3px;
  }
  .ct-promise__icon{ margin: 0; }
  .ct-promise b{ align-self: end; letter-spacing: .18em; }
  .ct-gate__frame{ inset: -10px; --l: 16px; }
  .ct-bezel{ padding: 6px; border-radius: 22px; }
  .ct-log{ gap: 22px 16px; }
  .ct-log__num{ font-size: clamp(26px, 8vw, 34px); }
  .ct-log__label{ font-size: 10px; letter-spacing: .18em; }

  .ct-privacy__media{ min-height: 240px; }
  .ct-seal{ top: calc(240px - 54px); width: 108px; height: 108px; right: 20px; }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  .ct-gate__glow,
  .ct-seal__ring,
  .ct-pulse,
  .ct-board__dot{ animation: none; }
  .ct-tile.is-flip{ animation: none; }
  .ct-line::before,
  .ct-line__value{ transition: none; }
}