/* ==========================================================================
   fcProctor — marketing site
   Design system: "The Question Paper"

   The page is set as a printed examination paper. White stock, wide margins,
   heavy section rules, outlined rubric blocks, and a persistent margin column
   carrying section letters. Orange is the examiner's pen: it appears only as
   annotation — a circled seat, a margin note, a flag, a tick — never as
   decoration. Navy is the printed ink.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Brand — sampled from the fcProctor logo artwork */
  --navy:       #1B3668;
  --orange:     #EF6C24;
  --orange-ink: #A94F17;   /* pen at text weight, AA on white */
  --orange-lt:  #F5883F;   /* pen at text weight, AA on navy */

  /* Ink */
  --ink:        #16294D;
  --ink-2:      #3B4C71;
  --muted:      #66739180;
  --grey:       #5F6C89;
  --grey-lt:    #64708C;   /* lightest grey that still passes AA on white */

  /* Stock */
  --paper:      #FFFFFF;
  --tint:       #F2F4F8;   /* the one filled surface, used sparingly */

  /* Rules — printed, so they are ink, not grey */
  --rule:       #1B3668;
  --rule-mid:   #9AA6C0;
  --rule-soft:  #D3D9E5;

  /* The one non-brand hue: a cleared result */
  --clear:      #0C6E59;

  /* Type */
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --body:    "Outfit", "Helvetica Neue", Arial, sans-serif;
  /* Kept monospaced: seat codes, paper codes and the register's timestamps
     need tabular alignment, and Outfit has no monospaced cut. */
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Measure */
  --sheet:  1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --margin-col: 104px;      /* the paper's left margin, where section letters sit */
  --rule-line: 32px;        /* answer-booklet ruling pitch */
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -.003em;   /* Outfit sets a touch wide at text sizes */
  color: var(--ink-2);
  background: var(--paper);
  /* Answer-booklet ruling. Faint enough to read as texture, not as stationery. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule-line) - 1px),
    rgba(27, 54, 104, .05) calc(var(--rule-line) - 1px),
    rgba(27, 54, 104, .05) var(--rule-line));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--orange); color: #FFFFFF; }

/* --- Sheet -------------------------------------------------------------- */
.sheet {
  position: relative;
  width: 100%;
  max-width: var(--sheet);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The margin rule down the left of an answer booklet, in the pen's own colour.
   It is aligned to the sheet, not the viewport, so it lands inside the margin
   column where a real booklet prints it. */
.para { position: relative; }
.para::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(50% - min(var(--sheet), 100%) / 2 + var(--gutter) + var(--margin-col) - 26px);
  width: 1px;
  background: var(--orange);
  opacity: .32;
  pointer-events: none;
}
.band-ink.para::before { background: var(--orange-lt); opacity: .4; }
@media (max-width: 860px) {
  .para::before { left: calc(50% - min(var(--sheet), 100%) / 2 + var(--gutter) - 11px); }
}

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.t1 { font-size: clamp(2.2rem, 4.6vw, 3.625rem); line-height: 1.04; letter-spacing: -.038em; font-weight: 600; }
.t2 { font-size: clamp(1.65rem, 2.8vw, 2.375rem); line-height: 1.1; letter-spacing: -.032em; }
.t3 { font-size: clamp(1.125rem, 1.55vw, 1.375rem); line-height: 1.25; letter-spacing: -.022em; }
/* Body and display are one family now, so weight carries the distinction */
.t4 { font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -.012em; }

.lede { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.58; letter-spacing: -.008em; color: var(--ink-2); max-width: 62ch; }
p { text-wrap: pretty; }
p + p { margin-top: .875em; }

/* Every small label on this paper is monospaced, as printed forms are */
.mono {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 500;
}

/* --- Rules -------------------------------------------------------------- */
.rule-heavy { height: 3px; background: var(--rule); border: 0; }
.rule-thin  { height: 1px; background: var(--rule); border: 0; }
.rule-soft  { height: 1px; background: var(--rule-soft); border: 0; }

/* --- Header ------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
.hdr[data-stuck="true"] { border-bottom-color: var(--rule); }

.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5625rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -.03em;
}
.brand__mark { width: 25px; height: 25px; flex: none; color: var(--orange); }
.brand span { color: var(--ink); }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--grey);
  text-decoration: none;
  padding: .375rem 0;
  position: relative;
  transition: color .15s ease;
}
.nav a:hover { color: var(--ink); }
/* The examiner underlines the page you are on */
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: 0;
  height: 2px;
  background: var(--orange);
}
.nav > .btn { display: none; }

.hdr__cta { display: flex; align-items: center; gap: .75rem; }

.burger {
  display: none;
  width: 2.5rem; height: 2.5rem;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
}
.burger span { display: block; width: 16px; height: 2px; background: var(--ink); position: relative; transition: background-color .2s ease; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--ink);
  transition: transform .2s ease;
}
.burger span::before { top: -5px; }
.burger span::after  { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .hdr__cta > .btn { display: none; }
  .nav {
    position: absolute;
    inset: 4.25rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 3px solid var(--rule);
    padding: 0 var(--gutter) 1.25rem;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .9375rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .8125rem; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav > .btn { display: inline-flex; margin-top: 1.25rem; }
}

/* --- Buttons — squared, printed, no shadow ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1.5rem;
  border: 2px solid var(--navy);
  border-radius: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--navy); color: #FFFFFF; }
.btn--primary:hover { background: #24457F; border-color: #24457F; }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { border-color: var(--orange); color: var(--orange-ink); }
.btn--light { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
.btn--light:hover { background: transparent; color: #FFFFFF; border-color: var(--orange); }
.btn--outline-light { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.45); }
.btn--outline-light:hover { border-color: var(--orange-lt); color: var(--orange-lt); }
.btn--lg { padding: .9375rem 1.75rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Text link — the pen underlines it on hover */
.tlink {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 600;
  color: var(--ink); text-decoration: none; padding-bottom: 3px;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.tlink:hover { background-size: 100% 2px; }
.tlink .arw { transition: transform .25s ease; }
.tlink:hover .arw { transform: translateX(3px); }
.band-ink .tlink { color: #FFFFFF; background-image: linear-gradient(var(--orange-lt), var(--orange-lt)); }

/* --- Focus -------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.band-ink :focus-visible { outline-color: var(--orange-lt); }
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--navy); color: #FFF; padding: .75rem 1.125rem;
  text-decoration: none; font-weight: 600; transition: top .2s ease;
}
.skip:focus { top: 1rem; }

/* --- Masthead ----------------------------------------------------------- */
.masthead { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.masthead__strip {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem 2rem;
  padding: .8125rem 0;
  border-top: 3px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.masthead__strip b { font-family: var(--mono); font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.masthead__strip span { font-family: var(--mono); font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: var(--grey); }

.masthead__title { padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.5rem); }
.masthead__title .t1 { max-width: 20ch; }

/* --- Rubric — the boxed instruction block on a question paper ----------- */
.rubric { border: 2px solid var(--rule); padding: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 62ch; }
.rubric__hd {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--ink);
  padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule-soft);
}
.rubric p { color: var(--ink-2); }
.rubric .btn-row { margin-top: 1.5rem; }
.rubric--wide { max-width: none; }

/* --- Seating plan — the signature -------------------------------------- */
.plan { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.plan__hd {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .375rem 1.5rem;
  padding-bottom: .625rem; border-bottom: 1px solid var(--rule);
}
.plan__hd b { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.plan__hd span { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }

.plan__sheet { position: relative; border-inline: 1px solid var(--rule-soft); border-bottom: 3px solid var(--rule); }
.plan__seats {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
@media (max-width: 900px) { .plan__seats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plan__seats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* A desk: ruled, empty, printed — not a video tile */
.seat {
  position: relative;
  aspect-ratio: 1 / .82;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding: .4375rem .5rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.seat__id { font-family: var(--mono); font-size: .625rem; letter-spacing: .06em; color: var(--ink); font-weight: 500; }
.seat__no { font-family: var(--mono); font-size: .5625rem; letter-spacing: .04em; color: var(--grey-lt); }

/* The invigilator's sweep: a ruled edge moving across the room */
.plan__sweep {
  position: absolute; inset-block: 0; width: 1px;
  background: var(--orange); opacity: .5;
  animation: sweep 9s linear infinite;
}
@keyframes sweep { 0% { left: 0; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .plan__sweep { display: none; } }

/* The pen: a ring drawn around a seat, then a tick once it is cleared.
   The SVG lives inside the seat it marks and stretches to the cell, so the
   annotation is anchored structurally — there is no runtime coordinate maths
   to drift. The stroke is driven by a transition on an inline dashoffset. */
.seat__pen {
  position: absolute;
  inset: -8%;
  overflow: visible;
  pointer-events: none;
}
.pen-ring {
  fill: none; stroke: var(--orange); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset .75s ease;
}
.pen-tick {
  fill: none; stroke: var(--orange); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset .45s ease .1s;
}
@media (prefers-reduced-motion: reduce) {
  .pen-ring, .pen-tick { transition: none; }
}

/* The margin note, written beside the ring it belongs to */
.pen-note {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  font-family: var(--mono); font-size: .625rem; letter-spacing: .07em;
  text-transform: uppercase; font-weight: 600; color: var(--orange-ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease .4s;
  pointer-events: none;
}
.pen-note[data-side="left"] { left: auto; right: calc(100% + 12px); }
.seat[data-marked] .pen-note { opacity: 1; }

/* --- Register — the incident log, written on the ruling ----------------- */
.register { border-bottom: 1px solid var(--rule); }
.register__hd {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--grey);
  padding: .75rem 0 .5rem;
}
.register ol { list-style: none; padding: 0; margin: 0; }
.register li {
  display: grid;
  grid-template-columns: 5.5rem 3.5rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  font-family: var(--mono); font-size: .75rem;
  padding: .5rem 0;
  border-top: 1px solid var(--rule-soft);
  animation: linein .3s ease both;
}
@keyframes linein { from { opacity: 0; } to { opacity: 1; } }
.register time { color: var(--grey); font-variant-numeric: tabular-nums; }
.register b { font-weight: 600; color: var(--ink); }
.register p { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register .verdict { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.register li[data-kind="flag"] .verdict { color: var(--orange-ink); }
.register li[data-kind="clear"] .verdict { color: var(--clear); }
@media (max-width: 620px) {
  .register li { grid-template-columns: 4.5rem 1fr; row-gap: .1875rem; }
  .register p { grid-column: 1 / -1; white-space: normal; }
}

/* --- Paragraph blocks — the margin column ------------------------------ */
.para { padding-block: clamp(3rem, 6vw, 5rem); }
.para--top { border-top: 3px solid var(--rule); }
.para--thin { border-top: 1px solid var(--rule); }

.para__grid {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 860px) { .para__grid { grid-template-columns: minmax(0, 1fr); } }

/* The section letter, sitting in the margin exactly as on a paper */
.para__mark { font-family: var(--mono); padding-top: .375rem; }
.para__mark b {
  display: block;
  font-family: var(--display); font-size: 2.75rem; font-weight: 600;
  color: var(--orange); line-height: .9; letter-spacing: -.04em;
}
.para__mark span {
  display: block; margin-top: .5rem;
  font-size: .625rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--grey); font-weight: 500;
}
@media (max-width: 860px) {
  .para__mark { display: flex; align-items: baseline; gap: .875rem; padding-top: 0; margin-bottom: 1.5rem; }
  .para__mark b { font-size: 1.75rem; }
  .para__mark span { margin-top: 0; }
}

.para__head { max-width: 30ch; margin-bottom: 1.25rem; }
.para__intro { margin-bottom: clamp(2rem, 4vw, 2.75rem); }

/* --- Question list — items with a marks column ------------------------- */
.qlist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.qlist > li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: 0 1.25rem;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.qlist__n { font-family: var(--mono); font-size: .8125rem; color: var(--orange-ink); font-weight: 600; padding-top: .1875rem; }
.qlist__b .t4 { margin-bottom: .3125rem; }
.qlist__b p { font-size: .9375rem; color: var(--ink-2); max-width: 68ch; }
/* The marks column: the real default state, printed where marks belong */
.qlist__m {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; color: var(--grey);
  white-space: nowrap; padding-top: .25rem; text-align: right;
}
.qlist__m[data-on="true"]  { color: var(--clear); }
.qlist__m[data-on="false"] { color: var(--grey-lt); }
@media (max-width: 620px) {
  .qlist > li { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .qlist__m { grid-column: 2; text-align: left; padding-top: .625rem; }
}

/* --- Two-column prose --------------------------------------------------- */
.cols { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.cols > * { break-inside: avoid; }
@media (max-width: 780px) { .cols { columns: 1; } }

/* --- Entry list — plain, ruled, no cards ------------------------------- */
.entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 780px) { .entries { grid-template-columns: minmax(0, 1fr); } }
.entry { padding: 1.5rem 0; border-top: 1px solid var(--rule-soft); }
.entry:first-child, .entries > .entry:nth-child(2) { border-top: 1px solid var(--rule); }
@media (max-width: 780px) { .entries > .entry:nth-child(2) { border-top-color: var(--rule-soft); } }
.entry__code { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--orange-ink); display: block; margin-bottom: .5rem; }
.entry .t4 { margin-bottom: .375rem; }
.entry p { font-size: .9375rem; color: var(--ink-2); }
.entry ul { list-style: none; padding: 0; margin: .875rem 0 0; display: flex; flex-wrap: wrap; gap: .3125rem .5rem; }
.entry li { font-family: var(--mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); border: 1px solid var(--rule-soft); padding: .1875rem .375rem; }

/* --- Navy band — the sealed envelope ----------------------------------- */
.band-ink { background: var(--navy); color: #B3C0D9; }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: #FFFFFF; }
.band-ink .lede, .band-ink p { color: #B3C0D9; }
.band-ink .rule-heavy, .band-ink .rule-thin { background: rgba(255,255,255,.3); }
.band-ink .para--top { border-top-color: transparent; }
.band-ink .para__mark b { color: var(--orange-lt); }
.band-ink .para__mark span { color: #93A2C0; }
.band-ink .masthead__strip { border-color: rgba(255,255,255,.3); }
.band-ink .entry { border-top-color: rgba(255,255,255,.18); }
.band-ink .entry:first-child, .band-ink .entries > .entry:nth-child(2) { border-top-color: rgba(255,255,255,.35); }
.band-ink .entry__code { color: var(--orange-lt); }
.band-ink .entry li { color: #93A2C0; border-color: rgba(255,255,255,.22); }
.band-ink .qlist { border-top-color: rgba(255,255,255,.35); }
.band-ink .qlist > li { border-bottom-color: rgba(255,255,255,.18); }
.band-ink .qlist__n { color: var(--orange-lt); }
.band-ink .qlist__m { color: #93A2C0; }
.band-ink .rubric { border-color: rgba(255,255,255,.35); }
.band-ink .rubric__hd { color: #FFFFFF; border-bottom-color: rgba(255,255,255,.22); }

/* --- Schedule table — a printed timetable ------------------------------ */
.tablewrap { overflow-x: auto; }
table.sched { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.sched th, table.sched td { text-align: left; padding: .875rem 1rem .875rem 0; vertical-align: top; border-bottom: 1px solid var(--rule-soft); }
table.sched thead th {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--grey); font-weight: 600;
  border-bottom: 1px solid var(--rule); padding-bottom: .625rem;
}
table.sched tbody th { font-weight: 600; color: var(--ink); width: 26%; }
table.sched td { color: var(--ink-2); }
table.sched tbody tr:last-child th, table.sched tbody tr:last-child td { border-bottom: 0; }
.band-ink table.sched thead th { color: #93A2C0; border-bottom-color: rgba(255,255,255,.35); }
.band-ink table.sched th, .band-ink table.sched td { border-bottom-color: rgba(255,255,255,.18); }
.band-ink table.sched tbody th { color: #FFFFFF; }
.band-ink table.sched td { color: #B3C0D9; }

.state { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.state--on   { color: var(--clear); }
.state--off  { color: var(--grey-lt); }
.state--flag { color: var(--orange-ink); }
.band-ink .state--flag { color: var(--orange-lt); }

/* --- Turn over --------------------------------------------------------- */
.turnover {
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
  padding: 1rem 0 0;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; color: var(--grey);
}
.turnover::after { content: "▸"; color: var(--orange); }

/* --- Plans -------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan-col { padding: 1.75rem 0 0; display: flex; flex-direction: column; }
@media (max-width: 900px) { .plan-col + .plan-col { border-top: 1px solid var(--rule-soft); } }
.plan-col__lbl { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--orange-ink); margin-bottom: .875rem; }
.plan-col .t3 { margin-bottom: .3125rem; }
.plan-col__price { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; color: var(--grey); margin-bottom: 1rem; }
.plan-col > p { font-size: .9375rem; margin-bottom: 1.25rem; }
.plan-col ul { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.plan-col li { font-size: .875rem; color: var(--ink-2); padding: .5rem 0 .5rem 1.25rem; border-top: 1px solid var(--rule-soft); position: relative; }
.plan-col li::before { content: "·"; position: absolute; left: .25rem; color: var(--orange); font-weight: 700; }
.plan-col .btn { margin-top: auto; }
.plan-col[data-emph="true"] .plan-col__lbl { color: var(--ink); background: var(--orange); display: inline-block; padding: .25rem .5rem; }

/* --- Contact ------------------------------------------------------------ */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (max-width: 940px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }

.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .4375rem; }
.field > label { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.field > label .req { color: var(--orange-ink); }
/* Inputs are ruled writing lines, not boxes */
.field input, .field select, .field textarea {
  width: 100%;
  padding: .5625rem .125rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-mid);
  border-radius: 0;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .15s ease;
}
.field textarea { resize: vertical; min-height: 6.5rem; border: 1px solid var(--rule-mid); padding: .625rem .75rem; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235F6C89' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .25rem center; background-size: 11px;
  padding-right: 1.75rem;
}
.field input::placeholder, .field textarea::placeholder { color: #97A1B8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); border-bottom-width: 2px; }
.field textarea:focus { border-width: 2px; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--orange-ink); }
.field__err { font-size: .8125rem; color: var(--orange-ink); display: none; }
.field[data-invalid="true"] .field__err { display: block; }
.field__hint { font-size: .8125rem; color: var(--grey); }

.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.consent { display: grid; grid-template-columns: 18px 1fr; gap: .75rem; align-items: start; font-size: .875rem; color: var(--ink-2); }
.consent input { width: 16px; height: 16px; margin-top: .25rem; accent-color: var(--navy); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--orange); outline-offset: 2px; }

.formnote { padding: .875rem 1rem; font-size: .9375rem; display: none; border: 2px solid; }
.formnote[data-show="true"] { display: block; }
.formnote[data-kind="ok"]  { border-color: var(--clear); color: #0A5A4A; }
.formnote[data-kind="err"] { border-color: var(--orange); color: var(--orange-ink); }

.aside__blk { padding: 1.5rem 0; border-top: 1px solid var(--rule-soft); }
.aside__blk:first-child { border-top: 3px solid var(--rule); }
.aside__blk .t4 { margin-bottom: .75rem; }
.aside__blk p { font-size: .9375rem; }
.aside dl { display: grid; gap: .875rem; margin: 0; }
.aside dt { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); font-weight: 600; margin-bottom: .125rem; }
.aside dd { margin: 0; font-size: .9375rem; color: var(--ink); }
.aside dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--orange); }
.aside dd a:hover { color: var(--orange-ink); }
.aside ol { margin: 0; padding-left: 0; list-style: none; counter-reset: step; }
.aside ol li { counter-increment: step; display: grid; grid-template-columns: 1.75rem 1fr; gap: .5rem; font-size: .9375rem; padding: .5rem 0; border-top: 1px solid var(--rule-soft); }
.aside ol li:first-child { border-top: 0; padding-top: 0; }
.aside ol li::before { content: "(" counter(step, lower-alpha) ")"; font-family: var(--mono); font-size: .75rem; color: var(--orange-ink); font-weight: 600; }

/* --- Footer ------------------------------------------------------------- */
.ftr { border-top: 3px solid var(--rule); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.75rem; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 860px) { .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ftr__top { grid-template-columns: minmax(0, 1fr); } }
.ftr .brand { margin-bottom: .875rem; }
.ftr__blurb { font-size: .9375rem; max-width: 32ch; color: var(--ink-2); }
.ftr h4 { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); font-weight: 600; margin-bottom: .875rem; }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { padding: .3125rem 0; }
.ftr a { text-decoration: none; font-size: .9375rem; color: var(--ink-2); transition: color .15s ease; }
.ftr a:hover { color: var(--orange-ink); }
.ftr__btm {
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey);
}

/* --- Reveal — a single fade, no travel --------------------------------- */
[data-reveal] { opacity: 0; transition: opacity .5s ease; }
[data-reveal][data-shown="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; } }

/* --- Utilities ---------------------------------------------------------- */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.mt-sm { margin-top: 1.125rem; }

/* The navy band must paint over the margin rule, so it needs to be positioned */
.band-ink { position: relative; }

/* A section laid out without the margin column has nowhere for the rule to sit */
.para--full::before { display: none; }

/* Honeypot: present to a bot, absent to a person and to a screen reader */
.trap {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}