/* ==========================================================================
   CONTACT — loaded only by /contact and /es/contact.
   ========================================================================== */
/* --------------------------------------------------------------------------
   23. Contact page
   ONE schedule: every way in reaches Ricardo Monday to Friday, 3-9pm ET.

   The hours live in .csch, a one-column staff — a bounded 24-hour axis with a
   single interval drawn on it, length as duration, midnight at the floor. It
   is the surviving half of an earlier two-column component (.cts) whose
   deleted left column drew a second, much longer interval to argue a contrast
   between two kinds of hours. Ricardo ruled that distinction out, so .cts was
   deleted; the box is back at his request with ONLY the real schedule in it.
   That column's claim is deliberately not restated anywhere in this file:
   these comments ship, and dist/ is public.

   The ban is unchanged and applies to this component too: do not reintroduce a
   second availability window in any form — no second column, no second block,
   no chip or badge implying a window wider than this one, no per-row hours. A
   24-hour AXIS is a scale, not a second window; a second BLOCK on it would be
   one.

   Also gone with .cts and not coming back: the live ET clock (initContactScore,
   108 lines) and its now-band, which existed only to animate the contrast, and
   the --dot fill level ("scheduled, but not today"), which only meant anything
   next to a live clock. This staff is static and stateless.

   Five sections: .cth heads, .csch states the hours, .ctl lists the ways in,
   .ctb books, .ctf says what lands afterwards.
   -------------------------------------------------------------------------- */
.cth,
.csch,
.ctl,
.ctb,
.ctf {
  position: relative;
  padding-block: var(--section-y);
  /* Same reason as .prch: .aurora sits at inset:-10px and widens the document
     without this. `clip`, not `hidden` — hidden would create a scroll
     container. */
  overflow-x: clip;
}

.cth { background: var(--surface-0); padding-bottom: 8px; }
/* Tight top: the head sits directly above it and the pair is one statement.
   --csch-h is deliberately short on mobile — see the first-viewport note on the
   staff below. */
.csch { background: var(--surface-0); padding-top: 24px; --csch-h: 208px; --csch-gut: 2.25rem; }
.ctl { background: var(--surface-0); }
/* The --fade-rgb pair here is INERT for the same reason it is on Process: the
   shared band rule in base.css does not select .ctb/.ctf, so this page has hard
   section cuts. Pre-existing; see the note in process.css. */
.ctb { background: var(--surface-50); --fade-rgb: 247, 248, 250; }
.ctf { background: var(--surface-0); --fade-rgb: 255, 255, 255; }

/* The painter's cut at the head of each of the four sections. RESTORED
   2026-08-13: this rule shipped with the page in 3ec7166 and was deleted in
   c72d9fa, the commit that removed the system-hours split — it sat directly
   above `.cts__h`, part of the component being deleted, and was swept up with
   its neighbour. The four `<span class="ct-mark">` in each language survived,
   so Contact was the only page in the system rendering its section marks as
   nothing at all. Values are the originals (22/14), not the 26/20 that
   services.css and servicearea.css use; this is a revert, not a re-tune. */
.ct-mark {
  display: block;
  width: 4px;
  height: 22px;
  margin-bottom: 14px;
  background: var(--blue-brand);
  border-radius: 1px;
  transform: skewX(-18deg);
}

/* --- Page head ----------------------------------------------------------- */
.cth__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
  color: var(--ink-950);
  text-wrap: balance;
}
.cth__sub {
  margin-top: 22px;
  max-width: 36em;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-700);
}

/* --- Entries ------------------------------------------------------------- */
/* Hairline rows, inherited from .why__list rather than invented — the only
   container this system allows. Each row is one way in, keyed to its column. */
.ctl__head { max-width: 40em; margin-bottom: 40px; }
.ctl__h {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
  color: var(--ink-950);
}
.ctl__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-block: 24px;
  border-top: 1px solid var(--border);
  align-items: start;
}
.ctl__row:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 720px) {
  .ctl__row { grid-template-columns: 14rem minmax(0, 1fr); gap: 32px; }
}

.ctl__t {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-950);
}
.ctl__t a { color: inherit; text-decoration-color: var(--ink-300); text-underline-offset: 3px; }
.ctl__t a:hover { color: var(--blue-brand); text-decoration-color: currentColor; }
.ctl__d {
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-500);
  text-wrap: pretty;
}
/* The channel name column. Hours are NOT repeated per row — they are stated
   once, at the top of the page, because there is only one schedule. */
.ctl__k {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-500);
}

/* --- Booking ------------------------------------------------------------- */
.ctb__head { max-width: 40em; margin-bottom: 36px; }
.ctb__h {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
  color: var(--ink-950);
}
.ctb__p {
  margin-top: 14px;
  max-width: 46em;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-500);
}

/* The one moment of depth on this page — the One Panel Rule. The booking
   surface is the artifact being lifted out of the score, so it gets the panel
   and nothing else does. */
.ctb__panel {
  position: relative;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-lg);
  overflow: hidden;
}
.ctb__frame { display: block; width: 100%; height: 780px; border: 0; }
@media (min-width: 768px) { .ctb__frame { height: 700px; } }

/* Fallback for a blocked or JS-less third-party frame: the link that has
   always worked. It sits below the frame, so it is a quiet second option when
   the frame loads and the whole offer when it does not. */
.ctb__fallback {
  padding: 26px var(--gutter);
  text-align: center;
  border-top: 1px solid var(--border);
}
.ctb__fallback p {
  margin-bottom: 16px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-500);
}
.no-js .ctb__frame { display: none; }
.no-js .ctb__fallback { border-top: 0; }

/* --- What follows -------------------------------------------------------- */
/* The second short run of the score. Same law: time rises, the meeting is at
   the top. DOM order is chronological for assistive tech; CSS reverses it.
   Nothing in the run is focusable, so visual order and focus order cannot
   disagree. */
.ctf__head { max-width: 40em; margin-bottom: 40px; }
.ctf__h {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
  color: var(--ink-950);
}
.ctf__p {
  margin-top: 14px;
  max-width: 46em;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-500);
}
.ctf__run {
  display: flex;
  flex-direction: column-reverse;
  max-width: 44rem;
  border-left: 1px solid var(--border);
  padding-left: 30px;
}
.ctf__step { position: relative; padding-block: 20px; }
.ctf__step + .ctf__step { border-bottom: 1px solid var(--border); }

/* The node on the staff line. Colour carries the level, not opacity. */
.ctf__step::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 26px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface-0);
  box-shadow: inset 0 0 0 2px var(--ink-300);
}
.ctf__step--end::before {
  background: var(--blue-brand);
  box-shadow: inset 0 0 0 2px var(--blue-brand);
}
.ctf__k {
  font-size: max(11px, 0.6875rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.ctf__step--end .ctf__k { color: var(--blue-brand); }
.ctf__t {
  margin-top: 6px;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-950);
}
.ctf__d {
  margin-top: 4px;
  max-width: 60ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-500);
  text-wrap: pretty;
}
.ctf__actions { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Mobile -------------------------------------------------------------- */
/* Declared BELOW the base rules it overrides — a @media block adds no
   specificity, and this trap has already cost this project the Process dial
   twice. */
@media (max-width: 560px) {
  .cth { padding-top: 28px; }
  .cth__sub { margin-top: 12px; line-height: 1.5; }
}


/* --- The hours -----------------------------------------------------------
   One interval on a 24-hour axis. Time runs BOTTOM TO TOP: midnight at the
   floor, the future above, which is why the hour axis counts upward. Length is
   duration, so 15:00-21:00 is a block from 62.5% to 87.5% — a quarter of the
   day, and it reads as a quarter of the day before a word is read.

   bottom/height are written inline in the markup because they are DATA, not
   style: they are the schedule, expressed as percentages of a day. Change the
   hours and you change those two numbers, in both languages.
   -------------------------------------------------------------------------- */
.csch__box {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 0 26px;
  background: var(--surface-0);
}

/* Hairline-boxed and flat: no shadow and no elevated ground, because the
   booking panel below is this page's one moment of depth. */
/* A real heading, in the page's h2 treatment. This was an 11px uppercase
   tracked micro-label — an eyebrow, refused site-wide — and, being a <p>, it
   left the component out of heading navigation entirely: the outline ran
   h1 -> "Every way in" and never met the schedule. */
.csch__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: var(--csch-gut);
}
.csch__h {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-spacing: 0.03em;
  color: var(--ink-950);
}

.csch__staff {
  position: relative;
  margin-top: 18px;
  height: var(--csch-h);
  padding-inline: var(--csch-gut);
}

/* The axis must NOT be a grid item and must not take part in flow — as a plain
   block it consumed layout and pushed the interval column off its own track.
   Absolute, so the staff contains exactly one positioned column. */
.csch__axis {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Hour rules. NOT --border: the axis is the scale the interval is measured
   against, so it is a graphic required to understand the content and owes 3:1
   under WCAG 1.4.11. --border (#e4e7ec on white) measures 1.24:1 — the drawing
   was effectively invisible and only the numerals carried the reading.
   --ink-500 measures 5.5:1, and the two bounds go darker still so the frame
   reads as one whole day before the interior ticks are counted. */
.csch__rule {
  position: absolute;
  left: var(--csch-gut);
  right: var(--csch-gut);
  height: 1px;
  background: var(--ink-500);
}
.csch__rule--bound { background: var(--ink-950); }
/* Marginal type, small numerals — words stay out of the staff. Inset from 0:
   the original had no border to sit against, and flush against this box's
   hairline the numerals read as touching it. */
.csch__hour {
  position: absolute;
  left: 12px;
  transform: translateY(50%);
  font-size: max(11px, 0.6875rem);
  line-height: 1;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.csch__col { position: relative; height: 100%; }

.csch__blk {
  position: absolute;
  left: 0;
  right: 0;
}
/* Hatched, not solid. The fill says "scheduled interval"; solid was the level
   the deleted second column used and must not reappear here. */
.csch__blk::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--ink-700) 0 2px,
    var(--surface-0) 2px 7px
  );
  box-shadow: inset 0 0 0 1px var(--ink-700);
  transform: scaleY(var(--csch-rise, 1));
  transform-origin: 50% 100%;
}

/* The caption hangs off the block's LOWER edge and is pushed clear by its own
   height, which is the original component's trick and the only one that holds:
   anchoring to the block's top (bottom: 87.5%) makes the element grow UPWARD
   out of the staff, because `bottom` fixes the bottom edge — 14px of overflow
   in EN and far more in ES, where the caption runs to three lines. Anchored
   here it grows downward into empty staff instead, at any line count. */
.csch__cap {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(100%);
  /* Sized to the text and given the section's own ground, so the hour rule it
     crosses is knocked out behind the words instead of striking through them.
     Same device the deleted now-band label used. */
  width: max-content;
  max-width: 100%;
  padding-right: 10px;
  background: var(--surface-0);
  font-size: max(12px, var(--fs-xs));
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-950);
}
.csch__cap span {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  color: var(--ink-500);
}

/* FIRST VIEWPORT. The staff is the thing this page promises, and an earlier
   build put its component at 769px EN / 815px ES against a 667px fold — zero
   pixels of it visible. It is short and tight here for that reason, and the ES
   head is the binding constraint, not the EN one. Re-measure ES at 375x667
   before changing any height or padding above. */
@media (min-width: 768px) {
  .csch { --csch-h: 300px; --csch-gut: 3.5rem; padding-top: 32px; }
  .csch__box { padding: 26px 0 30px; }
}

/* The block grows from the floor on reveal — upward, the direction time runs.
   CSS falls back to fully drawn if JS never runs, so the schedule is never
   trapped at zero height. */
.csch__staff[data-reveal]:not(.is-revealed) .csch__blk { --csch-rise: 0; }
.csch__staff[data-reveal].is-revealed .csch__blk { --csch-rise: 1; }
.csch__staff[data-reveal].is-revealed .csch__blk::before {
  transition: transform 620ms var(--ease-out);
}
.no-js .csch__staff[data-reveal]:not(.is-revealed) .csch__blk { --csch-rise: 1; }

@media (prefers-reduced-motion: reduce) {
  .csch__staff[data-reveal]:not(.is-revealed) .csch__blk,
  .csch__staff[data-reveal].is-revealed .csch__blk { --csch-rise: 1; }
  .csch__staff[data-reveal].is-revealed .csch__blk::before { transition: none; }
}