/* ==========================================================================
   UGL Dispatch Services — homepage
   Design proposal by Deve-Loops. Second pass.

   Brief: the logo's red shades carried across the page, the off-white kept,
   the boxed stiffness of the first pass relaxed, and an American rig
   animated through the site — for a company that dispatches trucking only.

   The rig is not an ornament. It is the scroll-progress indicator in the
   header, and it drives the route the company actually runs (Batroun to
   Amman) in the hero. Every animation here is additive: strip all of it and
   the page still reads. Nothing is hidden until you scroll to it.
   ========================================================================== */

:root {
  /* ─────────────────────────────────────────────────────────────────
     Every colour below is the logo's own, or a tint/shade of it.
     Sampled from ugl-logo.png: the artwork contains exactly four
     colours and no others —
       #E92F36  red      43,563 px
       #F5F5F5  off-white 15,611 px
       #FFFFFF  white      7,626 px
       #2D4D60  navy       5,913 px
     The red ramp is that red held at H358 S81% with only lightness
     moving, so no step drifts to a different red. The neutrals are
     the navy hue desaturated, so greys sit with the brand instead of
     fighting it.
     ───────────────────────────────────────────────────────────────── */

  /* ground */
  --paper:    #F1F1EF;   /* the off-white, neutralised to match the logo's */
  --paper-2:  #F5F5F5;   /* the logo's own letter fill */
  --surface:  #FFFFFF;   /* the logo's white */

  /* red — H358 S81%, lightness 97 → 20 */
  --red-50:   #FEF1F2;
  --red-100:  #FBDADB;
  --red-200:  #F7B5B7;
  --red-300:  #F17E82;
  --red-400:  #EE595E;
  --red-500:  #E92F36;   /* the logo, exactly */
  --red-600:  #D9171D;
  --red-700:  #AF1218;
  --red-800:  #860E12;
  --red-900:  #5C0A0C;

  /* navy — the logo's second colour, H202 */
  --navy-300: #34596F;
  --navy-500: #2D4D60;   /* the logo, exactly */
  --navy-700: #1A2D37;

  /* neutrals — the navy hue, desaturated */
  --ink:      #14222A;
  --ink-2:    #4E6674;
  --ink-3:    #7C919C;
  --hair:     #DADFE2;

  --on-navy:   #F5F5F5;
  --on-navy-2: #A6BCC9;
  --on-red:    #FFFFFF;

  --display:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:     "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:     "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --shell:    72rem;
  --pad:      clamp(1.25rem, 4vw, 2.5rem);
  --band:     clamp(4.5rem, 9vw, 7.5rem);

  --r-sm:     10px;
  --r-md:     18px;
  --r-lg:     28px;

  --lift:     0 1px 2px rgba(20, 34, 42, .05), 0 10px 30px -12px rgba(20, 34, 42, .16);
  --lift-2:   0 2px 4px rgba(20, 34, 42, .06), 0 22px 50px -18px rgba(175, 18, 24, .30);

  --haul:     0;   /* 0 → 1, written by the scroll handler */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

[id] { scroll-margin-top: 6.5rem; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: .8125rem; z-index: 80;
}
.skip:focus { left: 1rem; top: 1rem; }

a { color: inherit; }
:where(a, button):focus-visible { outline: 2px solid var(--red-600); outline-offset: 3px; border-radius: 4px; }

/* ── the rig ───────────────────────────────────────────────────────── */

.truck { display: block; overflow: visible; }
.rig-box   { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.rig-band  { fill: var(--red-500); }
.rig-cab   { fill: var(--red-600); }
.rig-glass { fill: var(--on-red); opacity: .95; }
.rig-tank  { fill: var(--paper-2); }
.rig-dark  { fill: var(--ink); }
.rig-wheel circle { fill: var(--ink); }
.rig-wheel .hub   { fill: var(--paper-2); }
/* Three spokes, because a plain circle rotating about its own centre is
   visually identical at every angle -- it rotates and looks dead still. */
.rig-spoke { stroke: var(--paper-2); stroke-width: 2.4; stroke-linecap: round; fill: none; }

/* The rig is drawn once and cloned with <use>. Inside a <use> shadow tree
   the ancestor chain does not include the page's elements, so a descendant
   selector like `.road .rig-wheel` never matches and the wheels sit dead
   still. A single-class selector does match -- which is also why the
   fills above work. Keep these rules ancestor-free. */
@keyframes roll { to { transform: rotate(360deg); } }
.rig-wheel {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: roll 1.1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rig-wheel { animation: none; }
}

/* ── top bar ───────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar-in { display: flex; align-items: center; gap: 1.5rem; min-height: 5rem; }

.mark { display: inline-flex; align-items: center; margin-right: auto; line-height: 0; }
.mark img { display: block; width: clamp(96px, 11vw, 124px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 1.9rem); font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

.nav a {
  position: relative;
  text-decoration: none; color: var(--ink-2);
  padding-block: .4rem; white-space: nowrap;
  transition: color .2s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--red-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.22,.8,.3,1);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.is-here::after { transform: scaleX(1); }
.nav a.is-here { color: var(--ink); }

.nav-cta {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--on-red); background: var(--red-600);
  padding: .62rem 1.15rem; border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(175,18,24,.75);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover { background: var(--red-700); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(175,18,24,.85); }

/* ── the haul: scroll progress, driven ─────────────────────────────── */

.haul { position: relative; height: 18px; }
.haul-road {
  position: absolute; inset-inline: 0; bottom: 4px; height: 2px;
  background: linear-gradient(90deg, var(--red-200), var(--red-100));
}
.haul-road::before {
  content: ""; position: absolute; inset: 0;
  transform-origin: left; transform: scaleX(var(--haul));
  background: var(--red-500);
}
.haul-truck {
  position: absolute; bottom: 3px; left: 0;
  width: 92px;
  transform: translateX(calc(var(--haul) * (100vw - 92px)));
  will-change: transform;
}
.truck-sm { width: 92px; }

/* ── hero ──────────────────────────────────────────────────────────── */

.hero { padding-top: clamp(3rem, 7vw, 5.5rem); }

.hero-copy { max-width: 40rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1.5rem;
}
.eyebrow { flex-wrap: wrap; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); flex: none; }
.eb-loc { display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow .sep { color: var(--red-400); }
.eyebrow-inv { color: var(--on-navy-2); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; text-wrap: balance; margin: 0; }

h1 {
  font-size: clamp(2.7rem, 7.4vw, 5.1rem);
  line-height: .95; font-weight: 800;
}
h1 em {
  font-style: normal;
  color: var(--red-600);
  position: relative;
}
h1 em::after {
  content: ""; position: absolute; left: 0; right: 6%; bottom: .1em;
  height: .09em; border-radius: 999px; background: var(--red-200);
}

h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); line-height: 1.06; }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--ink-2); max-width: 34rem;
  margin: 1.7rem 0 0; text-wrap: pretty;
}

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.3rem; }

.btn {
  display: inline-block; font-family: var(--mono); font-size: .8125rem;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; padding: 1rem 1.7rem; border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-primary { background: var(--red-600); color: var(--on-red); box-shadow: 0 10px 26px -10px rgba(175,18,24,.8); }
.btn-primary:hover { background: var(--red-700); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(175,18,24,.9); }
.btn-ghost { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); transform: translateY(-2px); }

/* ── the route scene ───────────────────────────────────────────────── */

.scene { margin-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }

.scene-in {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 3.4rem var(--pad) 0;
}

/* Below the road line, not above it — the rig travels above the line and was
   driving straight over the labels. */
.stop {
  position: absolute; top: 30px;
  display: flex; flex-direction: column; gap: .15rem;
  font-family: var(--mono); text-transform: uppercase;
}
.stop b { font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--ink); }
.stop i { font-style: normal; font-size: .64rem; letter-spacing: .1em; color: var(--ink-3); }
.stop::after {
  content: ""; position: absolute; top: -30px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--red-500);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red-500) 20%, transparent);
  transform: translateY(-50%);
}
.stop-a { left: 0; }
.stop-a::after { left: 0; }
.stop-b { right: 0; align-items: flex-end; text-align: right; }
.stop-b::after { right: 0; }

.road {
  position: relative;
  height: 74px;
  border-top: 3px solid var(--ink);
  border-radius: 2px;
}
.road-dash {
  position: absolute; inset-inline: 0; top: 9px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--red-200) 0 22px, transparent 22px 44px);
}

.road-note {
  margin: .4rem 0 0;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); text-align: center;
}

/* The run and the bob are separated so they do not fight over `transform`:
   the wrapper carries the journey, the rig itself carries the suspension. */
@keyframes haul-across {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100vw); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

.rig-run {
  position: absolute; left: 0; top: 0;
  width: clamp(150px, 20vw, 230px);
  animation: haul-across 17s linear infinite;
}

/* wheels bottom out at 89/100 of the viewBox, so lifting the rig by 89%
   parks it exactly on the road line rather than floating above it */
.road .truck-lg {
  width: 100%;
  translate: 0 -89%;
  animation: bob .9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rig-run { animation: none; left: 50%; transform: translateX(-50%); }
  .road .truck-lg { animation: none; }
}

/* ── shared section furniture ──────────────────────────────────────── */

.sec-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 4.5vw, 3.6rem); }
.sec-lede { font-size: 1.0625rem; color: var(--ink-2); max-width: 38rem; margin: 1.2rem 0 0; text-wrap: pretty; }
.sec-lede-inv { color: var(--on-navy-2); }

/* arrival — additive only, content is visible without it */
.rise { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.3,1); }
  .rise.is-in { opacity: 1; transform: none; }
  .grid .rise:nth-child(2), .facts-in .rise:nth-child(2) { transition-delay: .06s; }
  .grid .rise:nth-child(3), .facts-in .rise:nth-child(3) { transition-delay: .12s; }
  .grid .rise:nth-child(4), .facts-in .rise:nth-child(4) { transition-delay: .18s; }
  .grid .rise:nth-child(5) { transition-delay: .24s; }
  .grid .rise:nth-child(6) { transition-delay: .30s; }
}

/* ── coverage ──────────────────────────────────────────────────────── */

.facts { padding-block: clamp(1rem, 3vw, 2rem) 0; }

.facts-in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.25rem);
}
@media (max-width: 46rem) { .facts-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fact {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow: var(--lift);
  display: flex; flex-direction: column; gap: .55rem;
}

.fact-n {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 4.2vw, 3rem); line-height: .9;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.fact-n i { font-style: normal; color: var(--red-500); }
.fact-k { font-family: var(--mono); font-size: .69rem; line-height: 1.55; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ── services ──────────────────────────────────────────────────────── */

.services { padding-block: var(--band); }

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.85rem, 1.8vw, 1.4rem);
}
@media (max-width: 62rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .grid { grid-template-columns: minmax(0, 1fr); } }

.card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--lift);
  display: flex; flex-direction: column; gap: .7rem;
  transition: transform .28s cubic-bezier(.22,.8,.3,1), box-shadow .28s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }

.card h3 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.012em; font-weight: 700; }
.card p { margin: 0; font-size: .9375rem; color: var(--ink-2); text-wrap: pretty; }

/* Named work, so a carrier scanning for "IFTA" finds it without reading. */
.tags {
  list-style: none; margin: .35rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .38rem;
}
.tags li {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--red-700);
  background: var(--red-50); border: 1px solid var(--red-100);
  padding: .32rem .6rem; border-radius: 999px;
}


/* ── departments ───────────────────────────────────────────────────── */

.depts {
  background:
    radial-gradient(120% 90% at 12% 0%, var(--navy-300) 0%, transparent 62%),
    linear-gradient(150deg, var(--navy-500) 0%, var(--navy-700) 100%);
  color: var(--on-navy);
  padding-block: var(--band);
  border-radius: var(--r-lg);
  margin-inline: clamp(.5rem, 2vw, 1.5rem);
}
.depts h2, .depts h3 { color: var(--on-navy); }

.dept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.85rem, 1.8vw, 1.4rem); }
@media (max-width: 48rem) { .dept-grid { grid-template-columns: minmax(0, 1fr); } }

.dept {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-md);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.dept h3 { font-size: clamp(1.3rem, 2.3vw, 1.7rem); line-height: 1.1; margin-bottom: .85rem; }
.dept > p { margin: 0 0 1.6rem; font-size: .9375rem; color: var(--on-navy-2); max-width: 30rem; text-wrap: pretty; }

.roster { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.roster li {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase;
  padding: .5rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
}

/* ── contact ───────────────────────────────────────────────────────── */

.contact { padding-block: var(--band); }

.contact-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 4.5vw, 4rem); align-items: start;
}
@media (max-width: 54rem) { .contact-in { grid-template-columns: minmax(0, 1fr); } }

.details {
  margin: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .7rem;
}

.detail {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 1.2rem 1.4rem 1.35rem;
  box-shadow: var(--lift);
}
.detail dt { font-family: var(--mono); font-size: .67rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .45rem; }
.detail dd { margin: 0; font-size: .9375rem; line-height: 1.5; overflow-wrap: break-word; }
.detail dd a { text-decoration: none; border-bottom: 1px solid var(--red-200); transition: color .2s ease, border-color .2s ease; }
.detail dd a:hover { color: var(--red-600); border-bottom-color: var(--red-600); }

/* ── footer ────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--hair); padding-block: 2.4rem 3rem; }
.foot-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 2rem; }
.foot-mark { margin: 0; line-height: 0; }
.foot-mark img { display: block; width: 92px; height: auto; }
.foot-note { margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.foot-proposal {
  margin: 0; margin-left: auto;
  font-family: var(--mono); font-size: .67rem; line-height: 1.5; letter-spacing: .04em;
  color: var(--ink-3); border-left: 2px solid var(--red-400);
  padding-left: .75rem; max-width: 22rem;
}

/* ── narrow ────────────────────────────────────────────────────────── */

@media (max-width: 46rem) {
  .topbar-in { flex-wrap: wrap; gap: .85rem 1rem; padding-block: .85rem; min-height: 0; }
  .nav { order: 3; width: 100%; gap: 1.4rem; font-size: .72rem; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .foot-proposal { margin-left: 0; }
  .stop i { display: none; }
  /* the location half wraps badly at this width and the road already says it */
  .eb-loc { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   HIGHWAY MOTIF

   The hero rig drives on a road; the rest of the page is the same road
   surface seen from above. Two devices only, both very low contrast —
   the point is that you feel it rather than notice it.

     1. asphalt grain    a fine cross-hatch on the page ground
     2. lane markings    the rule between sections is a painted lane,
                         not a hairline

   All of it is CSS gradients: no image, nothing extra to download, and
   it scales to any width without tiling seams.
   ══════════════════════════════════════════════════════════════════════ */

body {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(112deg, rgba(20, 34, 42, .016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient( 68deg, rgba(20, 34, 42, .013) 0 1px, transparent 1px 5px);
}

/* lane markings between road segments */
.services,
.contact { position: relative; }

.services::before,
.contact::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg,
    var(--red-200) 0 22px, transparent 22px 44px);
  opacity: .55;
  pointer-events: none;
}

/* the navy band is the same road at night: markings lighten, grain stays */
.depts {
  position: relative;
  overflow: hidden;
}

.depts::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg,
    rgba(245, 245, 245, .30) 0 22px, transparent 22px 44px);
  pointer-events: none;
}

.depts::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient( 68deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px);
  pointer-events: none;
}

/* keep the band's own content above its texture layers */
.depts > .shell { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* nothing here moves; the motif is static by design */
}

/* ══════════════════════════════════════════════════════════════════════
   SAFETY PAGE
   ══════════════════════════════════════════════════════════════════════ */

/* no road scene under a subpage hero, so it carries its own bottom space */
.page-hero { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* The seven BASICs. Numbered because FMCSA genuinely enumerates them —
   this is a real set of seven, not a decorative sequence. */
.basics {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.85rem, 1.8vw, 1.4rem);
}
@media (max-width: 62rem) { .basics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .basics { grid-template-columns: minmax(0, 1fr); } }

.basics li {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  box-shadow: var(--lift);
  display: flex; flex-direction: column; gap: .45rem;
  border-top: 2px solid transparent;
  transition: transform .28s cubic-bezier(.22,.8,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.basics li:hover { transform: translateY(-4px); box-shadow: var(--lift-2); border-top-color: var(--red-500); }

.b-n {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; color: var(--red-600);
  font-variant-numeric: tabular-nums;
}
.basics h3 { font-size: .98rem; line-height: 1.25; letter-spacing: -.01em; }
.basics p  { margin: 0; font-size: .85rem; color: var(--ink-2); text-wrap: pretty; }

/* ══════════════════════════════════════════════════════════════════════
   SERVICES PAGE — detail rows
   A vertical stack rather than the homepage's card grid: this page is read
   for depth, not scanned, so the layout gives each line room and a hairline
   between rather than boxing them.
   ══════════════════════════════════════════════════════════════════════ */

.svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.9rem, 3.5vw, 2.9rem);
  border-top: 1px solid var(--hair);
}
.svc:first-of-type { border-top: none; padding-top: 0; }

@media (max-width: 48rem) {
  .svc { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
}

.svc-head h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.15; letter-spacing: -.018em;
}
.svc-note {
  margin: .55rem 0 0;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red-600);
}

.svc-body > p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.svc-body .tags { margin-top: 1rem; }
.svc-more { margin: 1rem 0 0; font-size: .9375rem; }
.svc-more a {
  font-family: var(--mono); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--red-600); text-decoration: none;
  border-bottom: 1px solid var(--red-200);
  transition: border-color .2s ease;
}
.svc-more a:hover { border-bottom-color: var(--red-600); }

/* ══════════════════════════════════════════════════════════════════════
   HOW IT WORKS — the sequence
   Numbered because onboarding genuinely is ordered: step three only makes
   sense after step two. This is not decoration.
   ══════════════════════════════════════════════════════════════════════ */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }

.steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--hair);
}
.steps li:first-child { border-top: none; padding-top: 0; }

.st-n {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1;
  letter-spacing: -.04em; color: var(--red-200);
  font-variant-numeric: tabular-nums;
}
.steps h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.2; letter-spacing: -.015em; margin-bottom: .5rem;
}
.steps p { margin: 0; color: var(--ink-2); max-width: 44rem; text-wrap: pretty; }

/* the fair-questions cards carry no roster list, so they need their own rhythm */
.depts .dept > p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════
   PROSE — legal pages
   Long-form reading, so a narrow measure and generous leading rather than
   the card rhythm the rest of the site uses.
   ══════════════════════════════════════════════════════════════════════ */

.prose { max-width: 42rem; }

.prose h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.2; letter-spacing: -.015em;
  margin: 2.6rem 0 .7rem;
}
.prose h2:first-child { margin-top: 0; }

.prose p {
  margin: 0 0 1rem;
  color: var(--ink-2);
  text-wrap: pretty;
}
.prose a { color: var(--red-700); text-underline-offset: 2px; }
.prose a:hover { color: var(--red-600); }

/* footer legal links */
.foot-links {
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.foot-links a {
  color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.foot-links a:hover { color: var(--ink); border-bottom-color: var(--red-500); }