/* ==========================================================================
   Fawry Delivery Services
   One stylesheet, no framework, no build step beyond concatenation.

   Rules this file enforces, so the defects they prevent cannot come back:

   1. Direction. Every inset, margin, padding and border uses a logical
      property. There is no `left`, `right`, `margin-left` or `text-align:
      left` anywhere below. The Arabic and English layouts are the same code.
   2. Letter spacing never touches Arabic. Arabic is a joined script and
      letter-spacing tears the glyph connections apart, so every tracked
      style is scoped to `[dir="ltr"]`.
   3. One component per idea. One `.btn`, one `.card`, one `.section`, one
      `.eyebrow`. A second implementation of any of these is a defect.
   4. No horizontal overflow by construction: `overflow-x: clip` on the root
      plus `min-width: 0` on every grid and flex child.
   5. Motion is opt-in through `.js` and opt-out through
      `prefers-reduced-motion`. With JavaScript off, every element is
      visible in its final state.
   ========================================================================== */

/* ---------- fonts ------------------------------------------------------- */
/* Self-hosted, so there is no third-party request on a mobile connection.

   Two weights, not three. Measured on the deployed site, a first view of the
   Arabic homepage pulled 193 KB of fonts out of 251 KB total, because an
   Arabic page contains Latin digits (the prices and the phone numbers) and so
   fetches both scripts at every weight. Dropping the 600 removed two files
   and about 66 KB. Everything that was 600 is now 700, which is a normal
   two-weight system rather than a compromise.

   unicode-range still means only the subsets a page actually uses are
   fetched; it cannot help when a page legitimately uses both. */
@font-face {
  font-family: 'Plex Arabic';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/f/plex-ar-arabic-400.6010e7fd.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Plex Arabic';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/f/plex-ar-arabic-700.04c730b4.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Plex Arabic';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/f/plex-ar-latin-400.9ed8dcb0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Arabic';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/f/plex-ar-latin-700.ae2d59f9.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ------------------------------------------------------ */
:root {
  /* Brand. Navy and orange are lifted from the printed waybill. */
  --navy-900: #06202F;
  --navy-800: #0A2E45;
  --navy-700: #0E3A5C;
  --navy-600: #17527C;
  --orange:   #F2601F;
  --orange-700: #C2450C;   /* darkened for orange TEXT on light surfaces: 5.06:1 on white */
  --orange-300: #FF9A63;   /* lightened for orange TEXT on navy: 8.01:1 on --navy-900 */
  /* RULE: nothing white ever sits on --orange. White measures 3.25:1 against
     it and fails AA; --on-orange measures 5.15:1. Every orange fill in this
     file uses --on-orange for its content, with no exceptions. */
  --on-orange: #06202F;

  /* Neutrals. --muted is measured against --paper, not eyeballed. */
  --ink:     #10232F;
  --body:    #33495A;
  --muted:   #5A6E7D;
  --line:    #DEE6EC;
  --line-soft: #EDF2F6;
  --paper:   #FFFFFF;
  --surface: #F4F7F9;
  --surface-warm: #FFF6F0;

  --radius:   18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(6, 32, 47, .06), 0 4px 12px rgba(6, 32, 47, .05);
  --shadow-md: 0 2px 6px rgba(6, 32, 47, .06), 0 18px 44px rgba(6, 32, 47, .09);
  --shadow-lg: 0 30px 80px rgba(6, 32, 47, .16);

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --measure: 1220px;
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* Type scale. Fluid, so no breakpoint has an orphaned size. */
  --fs-display: clamp(2.5rem, 1.4rem + 5.2vw, 5rem);
  --fs-h1:      clamp(2.125rem, 1.3rem + 3.9vw, 3.9rem);
  --fs-h2:      clamp(1.625rem, 1.15rem + 2.1vw, 2.6rem);
  --fs-h3:      clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  /* clip, not hidden: hidden on the root creates a scroll container and
     breaks position: sticky in some engines. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--body);
  font-family: 'Plex Arabic', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Arabic sits slightly larger and looser: the script has a smaller x-height
   relative to its em box, so matched pixel sizes read smaller than Latin. */
[dir="rtl"] body, body[dir="rtl"] { font-size: 1.09375rem; line-height: 1.85; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: normal;
  text-wrap: balance;
}
[dir="ltr"] h1, [dir="ltr"] h2 { letter-spacing: -.022em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.3; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* Latin numerals inside Arabic text keep their own direction, so a phone
   number or a price never reorders. */
.num, .price-fig { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
.dark :focus-visible, .hero :focus-visible { outline-color: #FFB68F; }

::selection { background: rgba(242, 96, 31, .22); color: var(--ink); }

/* ---------- layout ----------------------------------------------------- */
.wrap {
  width: min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
/* Rule 4: any grid or flex child can otherwise refuse to shrink and push
   the page sideways. */
.grid > *, .flex > *, [class*="-grid"] > * { min-width: 0; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--navy-800); color: #D9E4EC; }
.section--dark h2, .section--dark h3 { color: #fff; }

.skip {
  position: fixed; z-index: 200;
  inset-block-start: .75rem; inset-inline-start: .75rem;
  padding: .7rem 1.1rem;
  color: #fff; background: var(--navy-700);
  border-radius: var(--radius-pill);
  font-weight: 700;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- type components -------------------------------------------- */
.eyebrow {
  display: block;
  margin-block-end: .9rem;
  color: var(--orange-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
}
/* Rule 2. Tracking and uppercase are Latin-only; on Arabic they would break
   the joins and do nothing respectively. */
[dir="ltr"] .eyebrow { text-transform: uppercase; letter-spacing: .14em; }
.section--dark .eyebrow, .hero .eyebrow { color: var(--orange-300); }

.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--body); }
[dir="rtl"] .lead { line-height: 1.8; }
.section--dark .lead { color: #C3D3DF; }

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.head { max-width: 46rem; margin-block-end: clamp(2.25rem, 4vw, 3.5rem); }
.head--center { margin-inline: auto; text-align: center; }

/* ---------- button (the only one) -------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px;
  padding: .8rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
/* The arrow in a button points the way the text runs. */
[dir="rtl"] .btn .ico-arrow { transform: scaleX(-1); }

/* Navy on brand orange, not white on brand orange. White measures 3.25:1
   against #F2601F, which fails AA for a 17px label; navy measures 5.15:1 and
   keeps the brand colour exactly as printed on the waybill. */
.btn--primary { color: var(--on-orange); background: var(--orange); box-shadow: 0 8px 22px rgba(242, 96, 31, .28); }
.btn--primary:hover { background: #FF7A3D; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(242, 96, 31, .34); }
.btn--dark { color: #fff; background: var(--navy-700); }
.btn--dark:hover { background: var(--navy-800); transform: translateY(-2px); }
.btn--ghost { color: var(--navy-700); border-color: var(--line); background: var(--paper); }
.btn--ghost:hover { border-color: var(--navy-700); transform: translateY(-2px); }
.btn--onDark { color: #fff; border-color: rgba(255, 255, 255, .42); }
.btn--onDark:hover { color: var(--navy-800); background: #fff; border-color: #fff; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--orange-700); font-weight: 700;
}
.tlink svg { width: 1.05em; height: 1.05em; transition: transform .2s var(--ease); }
[dir="rtl"] .tlink svg { transform: scaleX(-1); }
.tlink:hover svg { transform: translateX(4px); }
[dir="rtl"] .tlink:hover svg { transform: scaleX(-1) translateX(4px); }
.section--dark .tlink { color: var(--orange-300); }

/* ---------- header ----------------------------------------------------- */
.hdr {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  border-block-end: 1px solid transparent;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .hdr { background: rgba(255, 255, 255, .72); backdrop-filter: blur(16px) saturate(150%); }
}
.hdr.is-stuck { border-block-end-color: var(--line); box-shadow: 0 6px 24px rgba(6, 32, 47, .07); }

.hdr-in {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
  min-height: 74px;
  transition: min-height .25s var(--ease);
}
.hdr.is-stuck .hdr-in { min-height: 62px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.brand svg { width: 44px; height: auto; flex: none; transition: width .25s var(--ease); }
.hdr.is-stuck .brand svg { width: 38px; }
.brand-txt { display: grid; line-height: 1.05; }
/* Arabic needs room above its tall ascenders: at 1.05 the tagline sat on the
   name's descenders in the Arabic header. */
[dir="rtl"] .brand-txt { line-height: 1.3; gap: .1rem; }
.brand-txt b { color: var(--navy-700); font-size: 1.28rem; font-weight: 700; }
.brand-txt span { color: var(--muted); font-size: .75rem; font-weight: 700; }
[dir="ltr"] .brand-txt span { text-transform: uppercase; letter-spacing: .1em; }

.nav { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.35rem); margin-inline: auto; }
.nav-act { display: none; }
.nav a {
  position: relative;
  padding: .45rem .25rem;
  color: var(--body);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}
.nav a::after {
  content: ''; position: absolute;
  inset-block-end: .1rem; inset-inline: .25rem;
  height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: center;
  transition: transform .22s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--navy-700); }

.hdr-act { display: flex; align-items: center; gap: .5rem; flex: none; }
/* 44px minimum: measured at 40-42px in the first audit pass. */
.lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .5rem .8rem;
  color: var(--navy-700);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700;
}
.lang:hover { border-color: var(--navy-700); }
.hdr-act .btn { min-height: 46px; padding-inline: 1.15rem; font-size: var(--fs-sm); }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.burger i { display: block; width: 18px; height: 2px; margin: 3.5px auto; background: var(--navy-700); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Scroll progress. A 3px rule, not a decoration. */
.prog {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 150;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: inline-start;
  will-change: transform;
}

@media (max-width: 960px) {
  .burger { display: block; }
  /* The panel is a child of the header, so its z-index competes with the
     header's own controls rather than with the page. At z-index 99 it painted
     over the burger, which is the only way to close it: the menu covered its
     own close button. The brand and the actions are lifted above it inside
     the header's stacking context, while the scrim stays outside and below. */
  .brand, .hdr-act { position: relative; z-index: 2; }
  .nav {
    position: fixed; z-index: 1;
    inset-block-start: 0; inset-inline-end: 0;
    display: grid; align-content: start; gap: .25rem;
    width: min(320px, 86vw); height: 100dvh;
    padding: 5.5rem 1.5rem 2rem;
    margin: 0;
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    transform: translateX(110%);
    /* visibility, not transform alone. A panel moved off screen with a
       transform is still in the tab order, and keyboard users were landing on
       six invisible links behind the closed menu.

       The transition is asymmetric on purpose. visibility is a discrete
       property, so a plain `visibility .34s` flips it half way through the
       slide: the panel was still hidden when the script tried to move focus
       into it, and the focus call silently did nothing. Opening therefore
       applies visibility at once, and closing delays it until the slide has
       finished so the panel does not vanish mid-animation. */
    visibility: hidden;
    transition: transform .34s var(--ease-out), visibility 0s linear .34s;
    overflow-y: auto;
  }
  [dir="rtl"] .nav { transform: translateX(-110%); }
  .nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .34s var(--ease-out), visibility 0s linear 0s;
  }
  .nav a { padding: .85rem .25rem; font-size: 1.0625rem; border-block-end: 1px solid var(--line-soft); }
  .nav a::after { display: none; }
  /* Actions inside the panel. Opening the menu is the clearest signal a
     visitor is looking for a way to get in touch, and the panel otherwise
     ended in two thirds of empty screen. */
  .nav-act { display: grid; gap: .6rem; margin-block-start: 1.5rem; }
  .nav-act .btn { width: 100%; }
  .nav-act a { padding: 0; border: 0; font-size: var(--fs-body); }
  .nav-act .nav-tel {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; color: var(--navy-700); font-weight: 700;
  }
  .nav-act .nav-tel svg { width: 1.05em; height: 1.05em; }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 98;
    background: rgba(6, 32, 47, .42);
    opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease);
  }
  .nav-scrim.is-on { opacity: 1; pointer-events: auto; }
  .hdr-act .btn--primary span { display: none; }
}
@media (max-width: 560px) {
  .brand-txt span { display: none; }
  .hdr-act .lang { padding-inline: .6rem; }
}

/* ---------- hero -------------------------------------------------------- */
.hero {
  position: relative;
  overflow: clip;
  background: var(--navy-900);
  color: #D9E4EC;
}
/* The photograph sits behind the copy on wide screens, dimmed only on the
   side the copy occupies, so the handover itself stays visible. Contrast of
   every run of text over it is measured by scripts/audit.mjs, not assumed. */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
/* Mirrored in Arabic. The subject of the photograph is on the right; with
   the copy on the right in a right-to-left layout, the headline covered the
   handover. Flipping the wrapper, not the image, keeps the settle animation's
   transform free, and it flips the scrim with it so no RTL override is
   needed. */
[dir="rtl"] .hero-bg { transform: scaleX(-1); }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(3, 18, 28, .20), rgba(3, 18, 28, .38)),
    linear-gradient(to right, rgba(4, 22, 34, .95) 0%, rgba(4, 22, 34, .92) 38%, rgba(4, 22, 34, .72) 54%, rgba(4, 22, 34, .22) 74%, rgba(4, 22, 34, .06) 100%);
}

/* Below the split, no text sits over the photograph at all. A horizontal
   scrim has no text side to darken in one column: measured at 390px the hero
   lead reached only 3.41:1 over the image. The photograph becomes its own
   band under the copy instead. */
@media (max-width: 899px) {
  .hero { display: flex; flex-direction: column; }
  .hero-in { order: 1; }
  .hero-bg { order: 2; position: relative; inset: auto; height: clamp(210px, 46vw, 330px); }
  .hero-bg img { object-position: 64% 38%; }
  .hero-bg::after {
    background: linear-gradient(to bottom, rgba(4, 22, 34, .55) 0%, rgba(4, 22, 34, .12) 34%, rgba(4, 22, 34, .10) 100%);
  }
  .hero-in { padding-block: clamp(2.5rem, 8vw, 4rem) clamp(2.25rem, 7vw, 3.5rem); }
}

.hero-in {
  position: relative; z-index: 1;
  display: grid;
  align-items: center;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
@media (min-width: 900px) {
  /* 84dvh: measured at 525px tall at 1440 on the first pass, which reads as a
     banner. dvh so mobile browser chrome does not push the fold off screen. */
  .hero-in { min-height: min(84dvh, 780px); }
  .hero-copy { max-width: 40rem; }
}
.hero h1 { color: #fff; font-size: var(--fs-h1); max-width: 18ch; }
.hero .lead { max-width: 44ch; margin-block-start: 1.25rem; color: #C3D3DF; }
.hero .btn-row { margin-block-start: 2rem; }

/* The price strip. Opaque, not glass: a translucent panel over a photograph
   measured anywhere between 2.67:1 and 4.47:1 for the same label across the
   audited widths. A solid ground makes the ratio a property of the palette.

   It sits in the copy column rather than beside it, so the right-hand half
   of the hero is the photograph and nothing else. */
.pricecard {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 1rem 1.75rem;
  max-width: 36rem;
  margin-block-start: 2.25rem;
  padding: 1.15rem 1.5rem;
  background: var(--navy-900);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(2, 12, 20, .45);
}
.pricecard-main { display: grid; gap: .15rem; }
.pricecard-lbl { color: var(--orange-300); font-size: var(--fs-xs); font-weight: 700; }
[dir="ltr"] .pricecard-lbl { text-transform: uppercase; letter-spacing: .14em; }
.pricecard-fig {
  display: flex; align-items: baseline; gap: .45rem;
  color: #fff;
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
}
.pricecard-cur { font-size: .34em; font-weight: 700; color: #CBDCE7; }
.pricecard-note { color: #CBDCE7; font-size: var(--fs-sm); }
.pricecard-extra {
  display: grid; align-content: center; gap: .45rem;
  flex: 1 1 12rem;
  padding-inline-start: 1.5rem;
  border-inline-start: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--fs-sm); color: #CBDCE7;
}
.pricecard-extra li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pricecard-extra b { color: #fff; font-weight: 700; white-space: nowrap; }
@media (max-width: 480px) {
  .pricecard-extra { padding-inline-start: 0; border-inline-start: 0; padding-block-start: 1rem; border-block-start: 1px solid rgba(255, 255, 255, .16); flex-basis: 100%; }
}

/* ---------- proof strip ------------------------------------------------- */
.proof { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 760px) { .proof { grid-template-columns: repeat(3, 1fr); } }
.proof-i { padding: clamp(1.5rem, 3vw, 2.25rem) var(--gutter); background: var(--paper); }
.proof-i b { display: block; color: var(--ink); font-size: var(--fs-h3); font-weight: 700; }
.proof-i span { display: block; margin-block-start: .35rem; color: var(--muted); font-size: var(--fs-sm); }
.proof-wrap { width: min(var(--measure), 100%); margin-inline: auto; }

/* ---------- card (the only one) ---------------------------------------- */
/* Column counts are explicit. auto-fit with a minimum width produced a
   3-1-3-1 layout for eight cards at 1024px, stranding a single card per row.
   Four items go 1, 2 or 4 across; three go 1 or 3; never an orphan. */
.cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cards--2, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 860px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: grid; align-content: start; gap: .6rem;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.card:hover { border-color: #C6D5E0; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card h3 { color: var(--ink); }
.card p { color: var(--body); font-size: var(--fs-sm); line-height: 1.65; }
[dir="rtl"] .card p { line-height: 1.8; }
.section--surface .card { background: var(--paper); }
.section--dark .card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
.section--dark .card p { color: #B6C8D6; }
.section--dark .card:hover { border-color: rgba(255, 255, 255, .3); box-shadow: none; }

.card-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-block-end: .5rem;
  color: var(--orange);
  background: var(--surface-warm);
  border-radius: 13px;
}
.card-ico svg { width: 23px; height: 23px; }
.section--dark .card-ico { color: var(--orange-300); background: rgba(242, 96, 31, .16); }

/* A numbered card, for ordered sequences. Shares .card, adds the numeral. */
.card-n {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--orange-700);
  font-variant-numeric: tabular-nums;
}
.section--dark .card-n { color: var(--orange-300); }

/* ---------- split ------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }
.split--sticky > :first-child { position: sticky; inset-block-start: 6.5rem; }
@media (max-width: 899px) { .split--sticky > :first-child { position: static; } }

/* ---------- steps rail -------------------------------------------------- */
.steps { display: grid; gap: 0; }
.step {
  position: relative;
  display: grid; gap: .5rem;
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  padding-inline-start: clamp(3rem, 6vw, 4.25rem);
  border-block-start: 1px solid var(--line);
}
.step:first-child { border-block-start: 0; }
.step-n {
  position: absolute;
  inset-block-start: clamp(1.4rem, 3vw, 2.1rem);
  inset-inline-start: 0;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  color: var(--navy-700);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  font-size: var(--fs-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.step.is-on .step-n { color: var(--on-orange); background: var(--orange); border-color: var(--orange); }
.step h3 { color: var(--ink); }
.step p { color: var(--body); font-size: var(--fs-sm); }
[dir="rtl"] .step p { line-height: 1.8; }

/* ---------- price table ------------------------------------------------- */
.ptable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.ptable { min-width: 22rem; font-size: var(--fs-sm); }
.ptable caption { padding: 1rem 1.25rem; color: var(--muted); font-size: var(--fs-xs); text-align: start; border-block-end: 1px solid var(--line); }
.ptable th, .ptable td { padding: .9rem 1.25rem; text-align: start; }
.ptable thead th { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; background: var(--surface); border-block-end: 1px solid var(--line); position: sticky; inset-block-start: 0; }
[dir="ltr"] .ptable thead th { text-transform: uppercase; letter-spacing: .1em; }
.ptable tbody tr + tr th, .ptable tbody tr + tr td { border-block-start: 1px solid var(--line-soft); }
.ptable tbody th { color: var(--ink); font-weight: 700; }
.ptable .cell-price { text-align: end; white-space: nowrap; }
.ptable .cell-price b { color: var(--ink); font-size: 1.0625rem; font-weight: 700; }
.ptable .cell-price span { color: var(--muted); font-size: var(--fs-xs); }
.ptable tbody tr.is-hit th, .ptable tbody tr.is-hit td { background: var(--surface-warm); }
.ptable tbody tr[hidden] { display: none; }
.ptable-group th {
  padding-block: .7rem;
  color: var(--orange-700);
  background: var(--surface);
  font-size: var(--fs-xs); font-weight: 700;
}
[dir="ltr"] .ptable-group th { text-transform: uppercase; letter-spacing: .1em; }

.finder { display: grid; gap: .5rem; max-width: 26rem; margin-block-end: 1.5rem; }
.finder label { color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
.finder input {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1.1rem;
  color: var(--ink);
  font: inherit;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
}
.finder input:focus { border-color: var(--navy-600); }
.finder-msg { color: var(--muted); font-size: var(--fs-sm); min-height: 1.7em; }

/* ---------- tiers ------------------------------------------------------- */
.tier { display: grid; gap: .85rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.tier-fig { display: flex; align-items: baseline; gap: .4rem; color: var(--ink); font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 700; line-height: 1; }
/* Only the currency shrinks. `.tier-fig span` also matched the figure
   itself, so the 25 rendered at 15px instead of 52px and the loudest number
   on the pricing page was the quietest thing in its card. */
.tier-cur { font-size: .3em; font-weight: 700; color: var(--muted); }
.tier h2 { color: var(--ink); font-size: var(--fs-h3); letter-spacing: normal; }
.tier p { color: var(--muted); font-size: var(--fs-sm); }
.tier-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: .35rem; }
.chip {
  padding: .4rem .8rem;
  color: var(--navy-700);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700;
}
.tier--core { border-color: #F6CDB6; background: var(--surface-warm); }
.tier--core .chip { background: var(--paper); border-color: #F6CDB6; }

/* ---------- checklist --------------------------------------------------- */
.checks { display: grid; gap: .8rem; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .75rem; align-items: start; color: var(--body); font-size: var(--fs-sm); }
.checks svg { width: 22px; height: 22px; margin-block-start: .15rem; color: var(--orange); flex: none; }
.section--dark .checks li { color: #B6C8D6; }
.section--dark .checks svg { color: var(--orange-300); }

/* ---------- definition rows -------------------------------------------- */
.defs { display: grid; gap: 0; border-block-start: 1px solid var(--line); }
.defs > div { display: grid; gap: .3rem; padding-block: 1.1rem; border-block-end: 1px solid var(--line); }
@media (min-width: 680px) { .defs > div { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.5rem; align-items: baseline; } }
.defs dt { color: var(--ink); font-weight: 700; font-size: var(--fs-body); }
.defs dd { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.section--dark .defs, .section--dark .defs > div { border-color: rgba(255, 255, 255, .14); }
.section--dark .defs dt { color: #fff; }
.section--dark .defs dd { color: #B6C8D6; }

/* ---------- faq --------------------------------------------------------- */
.faq { display: grid; gap: .6rem; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s var(--ease); }
.faq details[open] { border-color: #C6D5E0; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--ink); font-size: var(--fs-body); font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none;
  width: 11px; height: 11px;
  border-inline-end: 2px solid var(--orange);
  border-block-end: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: transform .24s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq-body { padding: 0 clamp(1.1rem, 2.5vw, 1.5rem) 1.25rem; color: var(--body); font-size: var(--fs-sm); }
[dir="rtl"] .faq-body { line-height: 1.8; }

/* ---------- coverage map ------------------------------------------------ */
.mapfig { display: grid; gap: 1.25rem; margin: 0; }
.mapfig svg { width: 100%; height: auto; overflow: visible; }
.map-land { fill: #DCE6EE; stroke: #BCCDD9; stroke-width: 1.1; }
.section--dark .map-land { fill: rgba(255, 255, 255, .10); stroke: rgba(255, 255, 255, .24); }
.map-route { fill: none; stroke: var(--orange); stroke-width: 4.6; stroke-linecap: round; }
.map-dot { fill: var(--navy-700); }
.map-remote { fill: none; stroke: var(--navy-600); stroke-width: 2; stroke-dasharray: 3 2.4; }
.map-pin { fill: var(--orange); }
.map-halo { fill: rgba(242, 96, 31, .22); }
.section--dark .map-dot { fill: #fff; }
.section--dark .map-remote { stroke: #8FA8BA; }

/* The viewBox is 560 units wide and renders between about 480 and 620px, so
   one unit is roughly one pixel and 11 units is an 11px label. An earlier
   revision used 6.2, which rendered near 5px and could not be read. */
.map-lbl { fill: var(--ink); font-size: 11px; font-weight: 700; }
.map-lbl--base { fill: var(--orange-700); font-weight: 700; }
.map-lbl--remote { fill: var(--muted); }
.map-price { fill: var(--orange-700); font-weight: 700; }
.section--dark .map-lbl { fill: #E2EBF2; }
.section--dark .map-lbl--base { fill: var(--orange-300); }
.section--dark .map-lbl--remote { fill: #A9BECD; }
.section--dark .map-price { fill: var(--orange-300); }

.map-key { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: var(--fs-xs); color: var(--muted); }
.map-key span { display: inline-flex; align-items: center; gap: .45rem; }
.map-key i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.map-key-pin { background: var(--orange); box-shadow: 0 0 0 3px rgba(242, 96, 31, .22); }
.map-key-dot { background: var(--navy-700); }
.map-key-remote { border: 2px dashed var(--navy-600); }
.section--dark .map-key { color: #A9BECD; }
.section--dark .map-key-dot { background: #fff; }
.section--dark .map-key-remote { border-color: #8FA8BA; }

/* ---------- cta band ---------------------------------------------------- */
.ctaband {
  display: grid; gap: 1.75rem; align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--navy-800);
  border-radius: var(--radius-lg);
  color: #C3D3DF;
  overflow: clip;
  position: relative;
}
@media (min-width: 820px) { .ctaband { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; } }
.ctaband h2 { color: #fff; }
.ctaband p { margin-block-start: .6rem; color: #B6C8D6; }
.ctaband-art { position: absolute; inset-block: -30%; inset-inline-end: -6%; width: 42%; opacity: .07; pointer-events: none; }
[dir="rtl"] .ctaband-art { inset-inline-end: auto; inset-inline-start: -6%; transform: scaleX(-1); }
.ctaband-art svg { width: 100%; height: 100%; }

/* ---------- contact ----------------------------------------------------- */
.ccards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ccard { display: grid; align-content: start; gap: .4rem; padding: clamp(1.4rem, 2.6vw, 1.8rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ccard h2 { color: var(--ink); font-size: var(--fs-h3); margin: 0; letter-spacing: normal; }
.ccard p { color: var(--muted); font-size: var(--fs-sm); }
.ccard-val { display: grid; gap: .3rem; margin-block-start: .5rem; }
.ccard-val a { color: var(--navy-700); font-size: 1.0625rem; font-weight: 700; }
.ccard-val a:hover { color: var(--orange-700); }

.tmpl { display: grid; gap: 1rem; padding: clamp(1.4rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tmpl pre {
  margin: 0; padding: 1.1rem;
  color: var(--ink);
  font-family: inherit; font-size: var(--fs-sm); line-height: 1.9;
  white-space: pre-wrap; word-break: break-word;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* ---------- footer ------------------------------------------------------ */
.ftr { padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; color: #A9BECD; background: var(--navy-900); }
.ftr-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 760px) { .ftr-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } }
.ftr .brand-txt b { color: #fff; }
.ftr .brand-txt span { color: var(--orange-300); }
.ftr-blurb { margin-block-start: 1rem; max-width: 34ch; font-size: var(--fs-sm); color: #A9BECD; }
.ftr h2 { color: #fff; font-size: var(--fs-xs); font-weight: 700; margin-block-end: 1rem; }
[dir="ltr"] .ftr h2 { text-transform: uppercase; letter-spacing: .14em; }
.ftr-col { display: grid; gap: .6rem; align-content: start; font-size: var(--fs-sm); }
.ftr-col a:hover { color: #fff; }
.ftr-bot {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-xs);
  color: #8FA8BA;
}
.ftr-bot p { max-width: 62ch; }

/* ---------- 404 --------------------------------------------------------- */
.nf { display: grid; place-items: center; min-height: 62vh; text-align: center; }
.nf .wrap { display: grid; gap: 1.25rem; justify-items: center; }

/* ==========================================================================
   Motion
   Gated on `.js` so that with JavaScript off every element renders in its
   final state, and cancelled entirely under prefers-reduced-motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js .hero h1, .js .hero .eyebrow, .js .hero .lead, .js .hero .btn-row, .js .pricecard {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    animation: rise .85s var(--ease-out) forwards;
  }
  .js .hero .eyebrow  { animation-delay: .06s; }
  .js .hero h1        { animation-delay: .14s; }
  .js .hero .lead     { animation-delay: .24s; }
  .js .hero .btn-row  { animation-delay: .32s; }
  .js .hero .pricecard { animation-delay: .40s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* The hero photograph settles rather than snapping into place. */
  .js .hero-bg img { animation: settle 1.6s var(--ease-out) forwards; }
  @keyframes settle { from { transform: scale(1.07); } to { transform: scale(1); } }

  /* The route draws itself once the map scrolls in.

     There is deliberately no stroke-dasharray here. An earlier revision used
     var(--len, 600) as a fallback, and when the real path turned out to be
     about 1100 units long the 600 fallback drew a dash followed by a gap, so
     the route appeared as a stub across the north of the country. The dash is
     now set only by site.js from getTotalLength, so no length is ever
     guessed: if the script does not run, the line is drawn in full. */
  .js .mapfig.is-in .map-route { transition: stroke-dashoffset 1.9s var(--ease-out) .15s; stroke-dashoffset: 0 !important; }
  .js .map-pin, .js .map-halo, .js .map-dot, .js .map-remote, .js .map-lbl { opacity: 0; transition: opacity .5s var(--ease) var(--pd, 0ms); }
  .js .mapfig.is-in .map-pin, .js .mapfig.is-in .map-halo, .js .mapfig.is-in .map-dot, .js .mapfig.is-in .map-remote, .js .mapfig.is-in .map-lbl { opacity: 1; }
}

/* With reduced motion the progress bar is static rather than animated. */
@media (prefers-reduced-motion: reduce) {
  .prog { display: none; }
}

/* ---------- faq and statement ------------------------------------------- */
.faq-wrap { max-width: 56rem; }

/* The statement example. Reuses the price table rather than a second table
   component, widened for seven columns and scrollable inside its own box on
   narrow screens. */
.ptable--wide { min-width: 44rem; }
.ptable tfoot th, .ptable tfoot td { padding-block: .7rem; border-block-start: 1px solid var(--line); background: var(--surface); }
.ptable tfoot th { color: var(--body); font-weight: 700; text-align: end; }
.ptable tfoot td { color: var(--ink); font-weight: 700; }
.ptable tfoot .stmt-due th, .ptable tfoot .stmt-due td { color: var(--ink); background: var(--surface-warm); font-size: 1.0625rem; }
.ptable td { color: var(--body); }
.stmt { margin: 0; display: grid; gap: 1rem; }
.stmt-foot { color: #B6C8D6; font-size: var(--fs-sm); }

/* Service summary cards lie on their side below four columns. Stacked, eight
   cards with one-line descriptions made a 2x4 wall about 1500px tall at
   1024px. Same card, icon beside the text instead of above it. */
@media (max-width: 1099px) {
  .card--row { grid-template-columns: 46px minmax(0, 1fr); column-gap: 1rem; row-gap: .25rem; align-items: start; }
  .card--row .card-ico { grid-row: span 2; margin: 0; }
}

/* Amounts in the statement are the content, not a currency suffix, so they
   do not take the muted small style of the price table's unit label. */
.stmt .cell-price span.num { color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
.stmt tbody td { font-size: var(--fs-sm); }