/* ============================================================================
   JDS TRUCKING & REPAIR INC — SAMPLE B, "Dispatch"

   A light editorial system: bone paper, near-black type, brand-pink accent,
   monospaced data labels, full-bleed photography and hairline rules.

   HOW TO TUNE THIS FILE
   ---------------------
   Every measurement lives in the CONTROL PANEL below, each with a one-line
   comment. The panel is MOBILE-FIRST; two override blocks raise the values:
       @media (min-width: 768px)   -> TABLET
       @media (min-width: 1080px)  -> DESKTOP
   Breakpoint numbers cannot be variables (CSS does not allow it), so they are
   written literally: tablet 768px, desktop 1080px.
   ========================================================================= */


/* ############################################################################
   CONTROL PANEL
   ######################################################################### */

:root{

  /* ==========================================================
     1. COLOUR
     ========================================================== */
  --paper:#f3f2ef;               /* Main page background — warm bone */
  --paper-2:#e9e7e2;             /* Slightly deeper panel background */
  --paper-3:#dedbd4;             /* Deepest light tone, used for photo frames */
  --ink:#111214;                 /* Near-black: headings and dark sections */
  --ink-2:#1c1e22;               /* Slightly lifted dark for cards on dark */
  --ink-soft:#5b5f66;            /* Body text and muted labels */
  --ink-faint:#8b9098;           /* Very muted text: captions, meta */
  --rule:#d8d5ce;               /* Hairline rule colour on light backgrounds */
  --rule-dark:rgba(255,255,255,.14); /* Hairline rule colour on dark backgrounds */
  /* Brand colours, taken from the logo. The logo pink is only 2.7:1 against the
     bone background, so it is used for fills, rules and large display type —
     never for small text on light. --accent is a darkened pink that clears
     4.5:1 and carries the same hue for labels, links and small numerals. */
  --brand-pink:#f4657f;          /* Logo pink — button fills, rules, large accents */
  --brand-pink-hi:#ef4e6c;       /* Deeper logo pink for button hover */
  --brand-blue:#8cc8e4;          /* Logo blue — secondary accent */
  --accent:#be3a60;              /* Text-safe pink for small text on light (4.7:1) */
  --accent-hi:#a8324f;           /* Darker pink for hover states */
  --accent-lt:#f4657f;           /* Logo pink for text on dark backgrounds (6.1:1) */
  --accent-ring:rgba(244,101,127,.28); /* Focus glow around form fields */
  --on-dark:#f3f2ef;             /* Text colour on dark sections */
  --on-dark-soft:#a7adb5;        /* Muted text colour on dark sections */

  --scrim-hero:.55;              /* Darkness over photos that sit behind text */
  --photo-saturation:.92;        /* Colour intensity of photography — 1 = untouched */
  --photo-contrast:1.05;         /* Contrast of photography — 1 = untouched */


  /* ==========================================================
     2. TYPOGRAPHY — families
     ========================================================== */
  --font-sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; /* Headings and body */
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;          /* Labels and data */
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;                  /* Display numerals and accents */

  /* ---------- Font sizes (mobile) ---------- */
  --text-body:16px;              /* Base paragraph size */
  --text-small:13px;             /* Fine print and captions */
  --hero-title-size:42px;        /* Main hero headline */
  --hero-sub-size:17px;          /* Paragraph under the hero headline */
  --page-title-size:36px;        /* H1 on interior pages */
  --page-sub-size:17px;          /* Intro paragraph on interior pages */
  --section-title-size:30px;     /* Every H2 */
  --card-title-size:20px;        /* H3 headings in cards and list rows */
  --index-title-size:26px;       /* Big titles in the numbered service index */
  --lede-size:18px;              /* Intro paragraph under a section headline */
  --label-size:11px;             /* Monospaced labels — the smallest text used */
  --nav-link-size:14px;          /* Navigation links */
  --logo-size:17px;              /* "JDS TRUCKING" wordmark */
  --logo-sub-size:9px;           /* "& REPAIR INC" line under the wordmark */
  --btn-font-size:14px;          /* Button labels */
  --ticker-size:12px;            /* Scrolling marquee text */
  --stat-number-size:56px;       /* Big serif numerals in stat rows */
  --index-number-size:13px;      /* 01/02/03 numerals in the service index */
  --quote-size:22px;             /* Pull-quote text */
  --table-size:15px;             /* Spec-sheet values */

  /* ---------- Line heights ---------- */
  --leading-display:1.05;        /* Inside big headlines — lower is tighter */
  --leading-heading:1.2;         /* Inside small headings */
  --leading-body:1.7;            /* Inside paragraphs */
  --leading-lede:1.55;           /* Inside intro paragraphs */
  --leading-tight:1.1;           /* Labels, nav, numerals */

  /* ---------- Letter spacing ---------- */
  --tracking-display:-.025em;    /* Big headlines — negative is tighter */
  --tracking-heading:-.015em;    /* Small headings */
  --tracking-label:.18em;        /* Monospaced labels — wide and technical */
  --tracking-button:.1em;        /* Button text */
  --tracking-nav:.06em;          /* Navigation links */

  /* ---------- Weights ---------- */
  --weight-body:400;             /* Paragraph weight */
  --weight-medium:500;           /* Labels and nav */
  --weight-semi:600;             /* Strong text */
  --weight-bold:700;             /* Headlines */


  /* ==========================================================
     3. SPACING SCALE
     ========================================================== */
  --space-3xs:4px;               /* Hairline gaps */
  --space-2xs:8px;               /* Icon-to-label gap */
  --space-xs:12px;               /* Tight related items */
  --space-sm:16px;               /* Standard small gap */
  --space-md:24px;               /* Standard medium gap */
  --space-lg:32px;               /* Between blocks inside a section */
  --space-xl:48px;               /* Large gap */
  --space-2xl:64px;              /* Very large gap */
  --space-3xl:96px;              /* Biggest gap */


  /* ==========================================================
     4. PAGE CONTAINER & SECTION RHYTHM
     ========================================================== */
  --container-max:1320px;        /* Maximum content width of the site */
  --container-padding:24px;      /* Space between content and the screen edge */
  --measure:64ch;                /* Maximum paragraph width, in characters */
  --measure-narrow:46ch;         /* Maximum width of hero and caption text */

  --section-spacing:64px;        /* Vertical space above and below sections */
  --section-spacing-sm:44px;     /* Vertical space for compact sections */
  --section-head-bottom:36px;    /* Space under a section headline block */
  --section-head-gap:16px;       /* Space inside a section headline block */
  --section-head-label-gap:12px; /* Space between the small label and the H2 below it */
  --section-head-lede-gap:26px;  /* Space between the H2 and its intro paragraph */
  --heading-gap:20px;            /* Space under a headline followed by text */

  --grid-gap:20px;               /* Gap between cards in a grid */
  --split-gap:32px;              /* Gap between the halves of a two-column section */
  --stack-gap:14px;              /* Gap between stacked list items */


  /* ==========================================================
     5. HEADER & NAVIGATION
     ========================================================== */
  --nav-height:64px;             /* Height of the sticky header */
  --nav-link-gap:2px;            /* Space between nav links */
  --nav-link-padding-x:12px;     /* Left/right padding inside nav links */
  --nav-link-padding-y:10px;     /* Top/bottom padding inside nav links */
  --nav-cta-padding-x:20px;      /* Left/right padding of the header quote button */
  --nav-cta-gap:14px;            /* Space before the header quote button */
  --nav-marker-size:5px;         /* Size of the dot marking the current page */
  --logo-mark-width:92px;        /* Width of the JDS mark in the header (height follows) */
  --logo-gap:10px;               /* Space between logo tile and wordmark */
  --burger-size:44px;            /* Size of the mobile menu button */
  --mobile-menu-padding:20px;    /* Padding inside the open mobile menu */


  /* ==========================================================
     6. HERO (split: text one side, photo the other)
     ========================================================== */
  --hero-photo-height:380px;     /* Height of the hero photo when stacked on mobile */
  --hero-min-height:auto;        /* Minimum height of the hero on wide screens */
  --hero-padding-top:40px;       /* Space above the hero kicker */
  --hero-padding-bottom:48px;    /* Space below the hero buttons */
  --hero-content-gap:24px;       /* Base space between hero elements */
  --hero-label-gap:14px;         /* Space between the small label and the headline — keep tight, they belong together */
  --hero-cta-gap:40px;           /* Space above the hero buttons — keep large, they are a separate step */
  --hero-text-width:100%;        /* Maximum width of the hero text column */
  --hero-photo-ratio:3 / 4;      /* Shape of the hero photo on wide screens */
  --hero-zoom-scale:1.06;        /* How far the hero photo slowly zooms in */
  --hero-zoom-duration:24s;      /* How long one zoom cycle takes */


  /* ==========================================================
     7. TICKER (scrolling marquee)
     ========================================================== */
  --ticker-padding-y:12px;       /* Height of the marquee strip */
  --ticker-gap:40px;             /* Space between marquee items */
  --ticker-duration:40s;         /* How long one full marquee loop takes */


  /* ==========================================================
     8. INTERIOR PAGE HEADER
     ========================================================== */
  --phead-padding-top:48px;      /* Space above interior page titles */
  --phead-padding-bottom:40px;   /* Space below interior page intros */
  --phead-gap:16px;              /* Space between breadcrumb, title and intro */
  --phead-text-width:56ch;       /* Maximum width of interior header intro text */


  /* ==========================================================
     9. SERVICE INDEX (numbered rows)
     ========================================================== */
  --index-row-padding-y:24px;    /* Top/bottom padding of each index row */
  --index-number-width:56px;     /* Width of the 01/02/03 column */
  --index-hover-shift:10px;      /* How far a row slides right on hover */
  --index-thumb-width:150px;     /* Width of the thumbnail revealed on hover */
  --index-thumb-ratio:4 / 3;     /* Shape of that thumbnail */
  --index-thumb-rest-opacity:.55;/* How visible the thumbnail is before hover */


  /* ==========================================================
     10. BUTTONS
     ========================================================== */
  --btn-height:48px;             /* Height of buttons and minimum tap target */
  --btn-padding-x:26px;          /* Left/right padding inside buttons */
  --btn-radius:2px;              /* Corner rounding of buttons */
  --btn-border-width:1px;        /* Thickness of outlined button borders */
  --btn-icon-size:16px;          /* Size of icons inside buttons */
  --btn-icon-gap:10px;           /* Space between a button icon and its label */
  --btn-row-gap:12px;            /* Space between adjacent buttons */
  --btn-underline-height:1px;    /* Thickness of the text-link underline */


  /* ==========================================================
     11. CARDS & PANELS
     ========================================================== */
  --card-padding:24px;           /* Padding inside cards */
  --card-radius:2px;             /* Corner rounding of cards and photos */
  --card-hover-lift:-4px;        /* How far a card rises on hover */
  --card-icon-size:26px;         /* Size of the icon at the top of a card */
  --card-icon-gap:18px;          /* Space under a card icon */
  --card-label-gap:12px;         /* Space under a card's mono label */


  /* ==========================================================
     12. SPEC SHEET (definition rows)
     ========================================================== */
  --spec-row-padding-y:13px;     /* Top/bottom padding of each spec row */
  --spec-label-width:32%;        /* Width of the label column in a spec row */
  --table-cell-padding-y:14px;   /* Top/bottom padding inside data table cells */
  --table-cell-padding-x:16px;   /* Left/right padding inside data table cells */
  --table-min-width:520px;       /* Width at which a data table starts scrolling sideways */


  /* ==========================================================
     13. STATISTICS
     ========================================================== */
  --stat-gap:28px;               /* Space between statistic blocks */
  --stat-rule-height:1px;        /* Thickness of the line above a statistic */
  --stat-padding-top:18px;       /* Space between that line and the numeral */
  --stat-label-gap:8px;          /* Space between a numeral and its caption */


  /* ==========================================================
     14. PHOTOGRAPHY
     ========================================================== */
  --figure-caption-gap:12px;     /* Space between a photo and its caption */
  --strip-height:260px;          /* Height of full-bleed photo strips */
  --photo-frame-width:1px;       /* Thickness of the frame drawn over photos */


  /* ==========================================================
     15. FORMS
     ========================================================== */
  --field-height:48px;           /* Height of inputs and selects */
  --field-padding-x:14px;        /* Left/right padding inside inputs */
  --field-radius:2px;            /* Corner rounding of inputs */
  --field-gap:24px;              /* Vertical space between fields */
  --field-label-gap:8px;         /* Space between a label and its input */
  --field-border-width:1px;      /* Thickness of input borders */
  --textarea-height:128px;       /* Height of the message box */
  --form-padding:24px;           /* Padding inside the form panel */
  --focus-ring-width:2px;        /* Thickness of the keyboard focus outline */
  --focus-ring-offset:3px;       /* Gap between an element and its focus ring */
  --form-status-bar:3px;         /* Thickness of the coloured bar on form messages */


  /* ==========================================================
     16. FOOTER
     ========================================================== */
  --footer-padding-top:56px;     /* Space above footer content */
  --footer-grid-gap:32px;        /* Space between footer columns */
  --footer-bottom-padding:20px;  /* Padding of the copyright strip */
  --footer-link-gap:10px;        /* Space between footer links */
  --footer-wordmark-size:44px;   /* Size of the large footer wordmark */
  --footer-wordmark-gap:40px;    /* Space under the large footer wordmark */


  /* ==========================================================
     17. LINES & SHADOWS
     ========================================================== */
  --hairline:1px;                /* Standard hairline thickness */
  --rule-accent-width:26px;      /* Length of the short accent dash in a label */
  --rule-accent-height:1px;      /* Thickness of that dash */
  --shadow-card:0 20px 50px -30px rgba(17,18,20,.5);  /* Shadow under raised cards */


  /* ==========================================================
     18. MOTION
     ========================================================== */
  --transition-fast:.18s;        /* Speed of hover changes */
  --transition-base:.32s;        /* Speed of larger movements */
  --ease:cubic-bezier(.22,1,.36,1); /* Easing curve used everywhere */
  --reveal-duration:.8s;         /* Speed of the scroll fade-in */
  --reveal-distance:20px;        /* How far a block slides up as it fades in */
  --reveal-stagger:.08s;         /* Delay added between staggered items */
}


/* ############################################################################
   TABLET OVERRIDES — 768px and wider
   ######################################################################### */
@media (min-width:768px){
  :root{
    --text-body:17px;              /* Base paragraph size */
    --hero-title-size:60px;        /* Hero headline */
    --hero-sub-size:18px;          /* Hero paragraph */
    --page-title-size:52px;        /* Interior page H1 */
    --page-sub-size:18px;          /* Interior page intro */
    --section-title-size:40px;     /* Section H2 */
    --index-title-size:34px;       /* Service index titles */
    --card-title-size:21px;        /* Card headings */
    --lede-size:19px;              /* Section intro */
    --nav-link-size:14px;          /* Nav links */
    --logo-size:18px;              /* Wordmark */
    --stat-number-size:72px;       /* Statistic numerals */
    --quote-size:26px;             /* Pull quotes */
    --footer-wordmark-size:64px;   /* Footer wordmark */
    --footer-wordmark-gap:56px;    /* Space under the footer wordmark */

    --container-padding:32px;      /* Space to the screen edge */
    --section-spacing:88px;        /* Space above/below sections */
    --section-spacing-sm:60px;     /* Compact sections */
    --section-head-bottom:48px;    /* Space under section headlines */
    --grid-gap:24px;               /* Gap between cards */
    --split-gap:40px;              /* Gap between column halves */
    --heading-gap:24px;            /* Space under a headline */

    --nav-height:72px;             /* Header height */
    --logo-mark-width:104px;       /* Header mark width */

    --hero-padding-top:56px;       /* Space above the hero kicker */
    --hero-padding-bottom:64px;    /* Space below the hero buttons */
    --hero-content-gap:28px;       /* Space between hero elements */

    --phead-padding-top:72px;      /* Interior page header */
    --phead-padding-bottom:56px;   /* Interior page header */

    --index-row-padding-y:30px;    /* Service index row height */
    --btn-height:50px;             /* Button height */
    --card-padding:28px;           /* Card padding */
    --form-padding:32px;           /* Form padding */
    --strip-height:340px;          /* Photo strip height */
    --footer-padding-top:72px;     /* Space above footer */
    --footer-grid-gap:40px;        /* Footer column gap */
  }
}


/* ############################################################################
   DESKTOP OVERRIDES — 1080px and wider
   ######################################################################### */
@media (min-width:1080px){
  :root{
    --hero-title-size:78px;        /* Hero headline */
    --hero-sub-size:19px;          /* Hero paragraph */
    --page-title-size:68px;        /* Interior page H1 */
    --page-sub-size:19px;          /* Interior page intro */
    --section-title-size:50px;     /* Section H2 */
    --index-title-size:44px;       /* Service index titles */
    --card-title-size:22px;        /* Card headings */
    --lede-size:20px;              /* Section intro */
    --nav-link-size:15px;          /* Nav links */
    --logo-size:20px;              /* Wordmark */
    --stat-number-size:88px;       /* Statistic numerals */
    --quote-size:30px;             /* Pull quotes */
    --footer-wordmark-size:88px;   /* Footer wordmark */
    --footer-wordmark-gap:72px;    /* Space under the footer wordmark */
    --table-size:16px;             /* Spec-sheet values */

    --leading-display:1.0;         /* Tighter headline spacing at large sizes */

    --container-padding:44px;      /* Space to the screen edge */
    --section-spacing:120px;       /* Space above/below sections */
    --section-spacing-sm:80px;     /* Compact sections */
    --section-head-bottom:60px;    /* Space under section headlines */
    --section-head-gap:20px;       /* Space inside section headlines */
    --grid-gap:28px;               /* Gap between cards */
    --split-gap:80px;              /* Gap between column halves */
    --heading-gap:28px;            /* Space under a headline */

    --nav-height:84px;             /* Header height */
    --logo-mark-width:118px;       /* Header mark width */

    --hero-min-height:640px;       /* Minimum hero height */
    --hero-padding-top:80px;       /* Space above the hero kicker */
    --hero-padding-bottom:88px;    /* Space below the hero buttons */
    --hero-content-gap:32px;       /* Space between hero elements */
    --hero-text-width:620px;       /* Width of the hero text column */

    --phead-padding-top:104px;     /* Interior page header */
    --phead-padding-bottom:72px;   /* Interior page header */

    --index-row-padding-y:38px;    /* Service index row height */
    --index-number-width:80px;     /* Width of the numeral column */
    --btn-height:52px;             /* Button height */
    --btn-padding-x:30px;          /* Button padding */
    --card-padding:32px;           /* Card padding */
    --form-padding:40px;           /* Form padding */
    --strip-height:460px;          /* Photo strip height */
    --spec-row-padding-y:16px;     /* Spec row height */
    --stat-gap:40px;               /* Space between statistic blocks */
    --footer-padding-top:96px;     /* Space above footer */
    --footer-grid-gap:48px;        /* Footer column gap */
  }
}


/* ############################################################################
   COMPONENTS — these read the variables above
   ######################################################################### */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  font-weight:var(--weight-body);
  line-height:var(--leading-body);
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
svg{display:block;}
a{color:inherit;}
:focus-visible{
  outline:var(--focus-ring-width) solid var(--accent);
  outline-offset:var(--focus-ring-offset);
}

h1,h2,h3,h4{
  margin:0 0 var(--heading-gap);
  font-family:var(--font-sans);
  font-weight:var(--weight-bold);
  color:var(--ink);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
}
h1{font-size:var(--hero-title-size);}
h2{font-size:var(--section-title-size);}
h3{
  font-size:var(--card-title-size);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);
}
h4{
  font-size:var(--card-title-size);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);
}
/* italic serif accent inside a headline */
h1 em,h2 em{font-family:var(--font-serif);font-style:italic;font-weight:var(--weight-body);letter-spacing:0;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
strong{font-weight:var(--weight-semi);color:var(--ink);}
.on-dark strong,.hero-photo strong{color:#fff;}

/* ---------- Monospaced label ---------- */
.label{
  display:flex;align-items:center;gap:var(--space-2xs);
  margin:0 0 var(--space-sm);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  font-weight:var(--weight-medium);
  line-height:var(--leading-tight);
  text-transform:uppercase;
  letter-spacing:var(--tracking-label);
  color:var(--accent);
}
.label::before{
  content:"";
  width:var(--rule-accent-width);height:var(--rule-accent-height);
  flex:0 0 var(--rule-accent-width);
  background:currentColor;
}
.label--plain::before{display:none;}
.label--center{justify-content:center;}
.label--muted{color:var(--ink-faint);}

.lede{
  font-size:var(--lede-size);
  line-height:var(--leading-lede);
  color:var(--ink-soft);
  max-width:var(--measure);
}
.center{text-align:center;}
.center .lede{margin-inline:auto;}
.text-small{font-size:var(--text-small);}

/* ---------- Spacing utilities ---------- */
.mt-sm{margin-top:var(--space-sm);}
.mt-md{margin-top:var(--space-md);}
.mt-lg{margin-top:var(--space-lg);}
.mt-xl{margin-top:var(--space-xl);}
.mb-md{margin-bottom:var(--space-md);}
.mb-lg{margin-bottom:var(--space-lg);}
.mb-0{margin-bottom:0;}
.w-full{width:100%;}

/* ---------- Layout ---------- */
.wrap{
  width:100%;max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-padding);
}

.skip-link{
  position:fixed;
  top:var(--space-sm);
  left:var(--space-sm);
  z-index:10000;
  transform:translateY(-160%);
  padding:var(--space-sm) var(--space-md);
  background:var(--ink);
  color:var(--paper);
  font-weight:var(--weight-semi);
  text-decoration:none;
  transition:transform var(--transition-fast) var(--ease);
}
.skip-link:focus{transform:translateY(0);}
.sec{padding-block:var(--section-spacing);}
.sec--sm{padding-block:var(--section-spacing-sm);}
.sec--tone{background:var(--paper-2);}
.sec--dark{background:var(--ink);color:var(--on-dark-soft);}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:var(--on-dark);}
.sec--dark .lede{color:var(--on-dark-soft);}
.sec--dark .label{color:var(--accent-lt);}

/* Gaps here are deliberately uneven: the label belongs to the headline, so it
   sits close; the intro paragraph is a separate thought, so it sits further. */
.sec-head{
  display:flex;flex-direction:column;gap:var(--section-head-gap);
  max-width:var(--measure);
  margin-bottom:var(--section-head-bottom);
}
.sec-head > *{margin-block:0;}
.sec-head > .label + *{margin-top:calc(var(--section-head-label-gap) - var(--section-head-gap));}
.sec-head > h2 + .lede{margin-top:calc(var(--section-head-lede-gap) - var(--section-head-gap));}
.center .sec-head{margin-inline:auto;align-items:center;}

.grid{display:grid;gap:var(--grid-gap);align-items:start;}
.g2{grid-template-columns:1fr;}
.g3{grid-template-columns:1fr;}
/* Deliberately never four across. Inside a 1320px container, four boxed cards
   leave 223px of text — about 26 characters a line, at any viewport width.
   Two-up gives roughly 65 characters, and the "Step 01…04" labels keep the
   sequence unambiguous when it wraps to a second row. */
.g4{grid-template-columns:1fr;}
@media (min-width:640px){
  .g4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:768px){
  .g2,.g3{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1080px){
  .g3{grid-template-columns:repeat(3,1fr);}
}

.split{display:grid;grid-template-columns:1fr;gap:var(--split-gap);align-items:center;}
.split--top{align-items:start;}
@media (min-width:920px){
  .split{grid-template-columns:1fr 1fr;}
  .split--wide-l{grid-template-columns:1.2fr 1fr;}
  .split--wide-r{grid-template-columns:1fr 1.2fr;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--btn-icon-gap);
  min-height:var(--btn-height);
  padding-inline:var(--btn-padding-x);
  font-family:var(--font-mono);
  font-size:var(--btn-font-size);
  font-weight:var(--weight-medium);
  line-height:var(--leading-tight);
  text-transform:uppercase;
  letter-spacing:var(--tracking-button);
  text-decoration:none;cursor:pointer;
  border:var(--btn-border-width) solid transparent;
  border-radius:var(--btn-radius);
  transition:background var(--transition-fast) ease,
             color var(--transition-fast) ease,
             border-color var(--transition-fast) ease;
}
.btn svg{width:var(--btn-icon-size);height:var(--btn-icon-size);}
.btn--solid{background:var(--ink);color:var(--paper);}
.btn--solid:hover{background:var(--accent);color:#fff;}
.btn--accent{background:var(--brand-pink);color:var(--ink);}
.btn--accent:hover{background:var(--brand-pink-hi);}
.btn--line{border-color:var(--ink);color:var(--ink);}
.btn--line:hover{background:var(--ink);color:var(--paper);}
.btn--ghost{border-color:rgba(243,242,239,.45);color:var(--on-dark);}
.btn--ghost:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark);}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--btn-row-gap);}
.btn-row--center{justify-content:center;}
/* On a narrow screen two buttons of different label lengths leave a ragged
   right edge; matching their width reads as composed rather than accidental. */
@media (max-width:479px){
  .btn-row .btn{flex:1 1 100%;}
}

/* text link with an animated underline */
.link{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  font-family:var(--font-mono);
  font-size:var(--btn-font-size);
  text-transform:uppercase;letter-spacing:var(--tracking-button);
  color:var(--ink);text-decoration:none;
  padding-block:var(--space-xs);
}
.link span{position:relative;}
.link span::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;
  height:var(--btn-underline-height);background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--transition-base) var(--ease);
}
.link:hover span::after{transform:scaleX(1);}
.link:hover{color:var(--accent);}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(243,242,239,.92);
  backdrop-filter:blur(10px) saturate(140%);
  border-bottom:var(--hairline) solid var(--rule);
}
.hdr__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-md);
  min-height:var(--nav-height);
}
.logo{display:flex;align-items:center;gap:var(--logo-gap);text-decoration:none;color:var(--ink);}
/* The mark is the JDS letters and the road that forms the S. The full logo's
   stacked "TRUCKING / & REPAIR INC" is dropped here — at header height that
   text renders about 4px tall and is unreadable, so it is set as live text
   beside the mark instead. */
.logo__mark{
  width:var(--logo-mark-width);
  height:auto;
  flex:0 0 var(--logo-mark-width);
}
.logo__txt{line-height:1;}
.logo__txt b{
  display:block;
  font-size:var(--logo-size);
  font-weight:var(--weight-bold);
  letter-spacing:-.02em;
  color:inherit;
}
.logo__txt i{
  display:block;font-style:normal;
  margin-top:3px;
  font-family:var(--font-mono);
  font-size:var(--logo-sub-size);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--ink-faint);
}

.nav{display:flex;align-items:center;gap:var(--nav-link-gap);}
.nav a{
  position:relative;
  display:flex;align-items:center;gap:var(--space-2xs);
  padding:var(--nav-link-padding-y) var(--nav-link-padding-x);
  font-family:var(--font-mono);
  font-size:var(--nav-link-size);
  font-weight:var(--weight-medium);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-nav);
  color:var(--ink-soft);text-decoration:none;
  transition:color var(--transition-fast) ease;
}
.nav a:hover{color:var(--ink);}
.nav a.is-active{color:var(--ink);}
.nav a.is-active::before{
  content:"";
  width:var(--nav-marker-size);height:var(--nav-marker-size);
  border-radius:50%;background:var(--accent);
}
.nav a.btn{
  margin-left:var(--nav-cta-gap);
  padding:0 var(--nav-cta-padding-x);
  color:var(--paper);
}
.nav a.btn:hover{color:#fff;}
.nav a.btn.is-active::before{display:none;}

.burger{
  display:none;
  width:var(--burger-size);height:var(--burger-size);padding:0;
  background:none;border:var(--hairline) solid var(--rule);
  border-radius:var(--btn-radius);cursor:pointer;
}
.burger span{
  display:block;width:18px;height:1.5px;background:var(--ink);margin:4px auto;
  transition:transform var(--transition-base),opacity var(--transition-base);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

@media (max-width:1019px){
  .burger{display:block;}
  .nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:var(--hairline) solid var(--rule);
    box-shadow:var(--shadow-card);
    padding:var(--space-sm) var(--mobile-menu-padding) var(--space-lg);
  }
  .nav.is-open{display:flex;}
  .nav a{
    padding:var(--space-sm) 0;
    border-bottom:var(--hairline) solid var(--rule);
  }
  .nav a.btn{margin:var(--space-md) 0 0;padding:0 var(--btn-padding-x);border-bottom:none;}
}

/* ---------- Hero (split) ---------- */
.hero{border-bottom:var(--hairline) solid var(--rule);}
.hero__grid{
  display:grid;grid-template-columns:1fr;
  gap:0;
  align-items:stretch;
}
.hero__text{
  display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;
  gap:var(--hero-content-gap);
  padding-top:var(--hero-padding-top);
  padding-bottom:var(--hero-padding-bottom);
  padding-right:0;
}
.hero__text > *{margin-block:0;max-width:var(--hero-text-width);}
/* Uneven on purpose — even gaps flatten the hierarchy and make four separate
   objects out of what should read as label+headline, then body, then action. */
.hero__text > .label + h1{margin-top:calc(var(--hero-label-gap) - var(--hero-content-gap));}
.hero__text > .btn-row{margin-top:calc(var(--hero-cta-gap) - var(--hero-content-gap));}
.hero h1{letter-spacing:var(--tracking-display);}
.hero h1 em{color:var(--accent);}
.hero__sub{
  font-size:var(--hero-sub-size);
  line-height:var(--leading-lede);
  color:var(--ink-soft);
  max-width:var(--measure-narrow);
}
.hero__photo{
  position:relative;overflow:hidden;
  height:var(--hero-photo-height);
  background:var(--paper-3);
}
.hero__photo img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(var(--photo-saturation)) contrast(var(--photo-contrast));
  animation:kenburns var(--hero-zoom-duration) ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1);}
  to{transform:scale(var(--hero-zoom-scale));}
}
.hero__stamp{
  position:absolute;left:0;bottom:0;
  background:var(--paper);
  padding:var(--space-xs) var(--space-md);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink);
}
@media (min-width:920px){
  .hero__grid{grid-template-columns:1.1fr .9fr;gap:var(--split-gap);}
  .hero__text{min-height:var(--hero-min-height);}
  .hero__photo{height:auto;aspect-ratio:var(--hero-photo-ratio);align-self:stretch;}
}

/* ---------- Ticker ---------- */
.ticker{
  overflow:hidden;
  background:var(--ink);color:var(--on-dark);
  border-bottom:var(--hairline) solid var(--rule-dark);
  padding-block:var(--ticker-padding-y);
}
/* The track holds the same list twice and shifts by exactly -50%, so the loop
   is seamless. Spacing lives on the items (not as a track gap) to keep that
   50% exact. */
.ticker__track{
  display:flex;width:max-content;
  animation:ticker var(--ticker-duration) linear infinite;
}
.ticker__item{
  display:flex;align-items:center;
  gap:var(--ticker-gap);
  padding-right:var(--ticker-gap);
  font-family:var(--font-mono);
  font-size:var(--ticker-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  white-space:nowrap;
}
.ticker__item span{display:flex;align-items:center;}
.ticker__item span::after{
  content:"";
  width:4px;height:4px;flex:0 0 4px;
  margin-left:var(--ticker-gap);
  background:var(--accent);
}
@keyframes ticker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Interior page header ---------- */
.phead{
  border-bottom:var(--hairline) solid var(--rule);
  padding-top:var(--phead-padding-top);
  padding-bottom:var(--phead-padding-bottom);
}
.phead__inner{display:flex;flex-direction:column;gap:var(--phead-gap);align-items:flex-start;}
.phead__inner > *{margin-block:0;}
.phead h1{font-size:var(--page-title-size);}
.phead p{
  font-size:var(--page-sub-size);
  line-height:var(--leading-lede);
  max-width:var(--phead-text-width);
}
.crumb{
  font-family:var(--font-mono);
  font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--accent);}

/* ---------- Service index (numbered rows) ---------- */
.index{border-top:var(--hairline) solid var(--rule);}
.index__row{
  position:relative;
  display:grid;
  grid-template-columns:var(--index-number-width) 1fr;
  gap:var(--space-sm);
  align-items:start;
  padding-block:var(--index-row-padding-y);
  border-bottom:var(--hairline) solid var(--rule);
  transition:padding-left var(--transition-base) var(--ease);
}
.index__row:hover{padding-left:var(--index-hover-shift);}
.index__no{
  font-family:var(--font-mono);
  font-size:var(--index-number-size);
  line-height:1.6;
  letter-spacing:var(--tracking-label);
  color:var(--accent);
}
.index__title{
  margin:0 0 var(--space-xs);
  font-size:var(--index-title-size);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  color:var(--ink);
}
.index__body{max-width:62ch;}
.index__meta{
  margin-top:var(--space-sm);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
}
.index__thumb{display:none;}
@media (min-width:1080px){
  .index__row{grid-template-columns:var(--index-number-width) 1fr var(--index-thumb-width);}
  /* Visible at rest rather than revealed on hover: an empty 150px column on
     every row reads as an unfilled slot, not as deliberate whitespace. */
  .index__thumb{
    display:block;overflow:hidden;
    width:var(--index-thumb-width);aspect-ratio:var(--index-thumb-ratio);
    opacity:var(--index-thumb-rest-opacity);
    transition:opacity var(--transition-base) var(--ease);
  }
  .index__thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(var(--photo-saturation));}
  .index__row:hover .index__thumb{opacity:1;}
}

/* ---------- Cards ---------- */
.card{
  background:var(--paper);
  border:var(--hairline) solid var(--rule);
  border-radius:var(--card-radius);
  padding:var(--card-padding);
  transition:transform var(--transition-base) var(--ease),
             box-shadow var(--transition-base) var(--ease),
             border-color var(--transition-base) var(--ease);
}
.card:hover{transform:translateY(var(--card-hover-lift));box-shadow:var(--shadow-card);border-color:var(--ink-faint);}
.card h3{margin-bottom:var(--space-sm);}
.card__label{
  display:block;margin-bottom:var(--card-label-gap);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
}
.card__ico{
  width:var(--card-icon-size);height:var(--card-icon-size);
  color:var(--accent);margin-bottom:var(--card-icon-gap);
}
.card__ico svg{width:100%;height:100%;}
.sec--tone .card{background:var(--paper);}
.sec--dark .card{background:var(--ink-2);border-color:var(--rule-dark);color:var(--on-dark-soft);}
.sec--dark .card:hover{border-color:var(--ink-faint);}
.sec--dark .card__ico{color:var(--accent-lt);}
.sec--dark .card__label{color:var(--ink-faint);}

/* ---------- Spec sheet ---------- */
.spec{border-top:var(--hairline) solid var(--rule);}
.spec__row{
  display:flex;flex-wrap:wrap;gap:var(--space-sm);
  justify-content:space-between;
  padding-block:var(--spec-row-padding-y);
  border-bottom:var(--hairline) solid var(--rule);
}
.spec__key{
  flex:0 0 auto;max-width:var(--spec-label-width);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
  line-height:var(--leading-tight);
  align-self:center;
}
.spec__val{
  font-size:var(--table-size);
  font-weight:var(--weight-semi);
  color:var(--ink);
  text-align:right;
}
.sec--dark .spec,.sec--dark .spec__row{border-color:var(--rule-dark);}
.sec--dark .spec__val{color:var(--on-dark);}

/* ---------- Data table ---------- */
.table-scroll{overflow-x:auto;}
table.table{
  width:100%;border-collapse:collapse;
  min-width:var(--table-min-width);
  font-size:var(--table-size);
}
table.table th,table.table td{
  padding:var(--table-cell-padding-y) var(--table-cell-padding-x);
  text-align:left;
  border-bottom:var(--hairline) solid var(--rule);
  vertical-align:top;
}
table.table th{
  font-family:var(--font-mono);
  font-size:var(--label-size);
  font-weight:var(--weight-medium);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
  border-bottom-color:var(--ink);
  white-space:nowrap;
}
table.table td:first-child{color:var(--ink);font-weight:var(--weight-semi);}
table.table th:first-child,table.table td:first-child{padding-left:0;}
table.table th:last-child,table.table td:last-child{padding-right:0;}
table.table tr:last-child td{border-bottom:none;}
.sec--dark table.table th,.sec--dark table.table td{border-bottom-color:var(--rule-dark);}
.sec--dark table.table td:first-child{color:var(--on-dark);}

/* ---------- Statistics ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--stat-gap);}
@media (min-width:768px){.stats{grid-template-columns:repeat(4,1fr);}}
.stat{border-top:var(--stat-rule-height) solid var(--ink);padding-top:var(--stat-padding-top);}
.stat--hi{border-top-color:var(--accent);}
.stat b{
  display:block;
  font-family:var(--font-serif);
  font-size:var(--stat-number-size);
  font-weight:var(--weight-body);
  line-height:.95;
  color:var(--ink);
}
.stat--hi b{color:var(--accent);}
.stat span{
  display:block;margin-top:var(--stat-label-gap);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  line-height:var(--leading-heading);
  color:var(--ink-faint);
}
.sec--dark .stat{border-top-color:var(--rule-dark);}
.sec--dark .stat b{color:var(--on-dark);}
.sec--dark .stat--hi b{color:var(--accent-lt);}

/* ---------- Photography ---------- */
.figure{margin:0;}
.figure__img{position:relative;overflow:hidden;border-radius:var(--card-radius);background:var(--paper-3);}
.figure__img img{
  width:100%;display:block;
  filter:saturate(var(--photo-saturation)) contrast(var(--photo-contrast));
}
.figure__img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:var(--photo-frame-width) solid rgba(17,18,20,.12);
}
.figure figcaption{
  margin-top:var(--figure-caption-gap);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
}
.sec--dark .figure figcaption{color:var(--on-dark-soft);}

/* full-bleed photo strip */
.strip{position:relative;overflow:hidden;height:var(--strip-height);background:var(--ink);}
.strip img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(var(--photo-saturation)) contrast(var(--photo-contrast));
}
.strip__caption{
  position:absolute;left:0;bottom:0;
  padding:var(--space-xs) var(--space-md);
  background:var(--paper);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink);
}

/* ---------- Pull quote ---------- */
.quote{
  margin:0;
  padding-left:var(--space-md);
  border-left:var(--hairline) solid var(--accent);
}
.quote p{
  font-family:var(--font-serif);
  font-size:var(--quote-size);
  line-height:1.35;
  color:var(--ink);
}
.sec--dark .quote p{color:var(--on-dark);}
.quote cite{
  display:block;margin-top:var(--space-sm);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  font-style:normal;
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
}

/* ---------- Tick list ---------- */
.checks{list-style:none;margin:0;padding:0;}
.checks li{
  position:relative;padding-left:var(--space-md);
  margin-bottom:var(--stack-gap);
}
.checks li:last-child{margin-bottom:0;}
.checks li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:var(--rule-accent-height);
  background:var(--accent);
}

/* ---------- Contact rows ---------- */
.rules{list-style:none;margin:0;padding:0;border-top:var(--hairline) solid var(--rule);}
.rules li{
  display:grid;grid-template-columns:1fr;gap:var(--space-3xs);
  padding-block:var(--spec-row-padding-y);
  border-bottom:var(--hairline) solid var(--rule);
}
@media (min-width:560px){
  .rules li{grid-template-columns:var(--spec-label-width) 1fr;gap:var(--space-sm);align-items:baseline;}
}
.rules b{
  font-family:var(--font-mono);
  font-size:var(--label-size);
  font-weight:var(--weight-medium);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
}
.rules a{color:var(--ink);text-decoration:none;font-weight:var(--weight-semi);}
.rules a:hover{color:var(--accent);text-decoration:underline;}
.rules .val{font-weight:var(--weight-semi);color:var(--ink);}

/* ---------- Forms ---------- */
.form{
  background:var(--paper);
  border:var(--hairline) solid var(--rule);
  border-radius:var(--card-radius);
  padding:var(--form-padding);
}
.sec--tone .form{background:var(--paper);}
.form h3{margin-bottom:var(--space-xs);}
.form > p{margin-bottom:var(--space-lg);}
.field{margin-bottom:var(--field-gap);}
.field label{
  display:block;margin-bottom:var(--field-label-gap);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  width:100%;min-height:var(--field-height);
  padding:var(--space-xs) var(--field-padding-x);
  font:inherit;color:var(--ink);
  background:transparent;
  border:var(--field-border-width) solid var(--rule);
  border-radius:var(--field-radius);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.field textarea{min-height:var(--textarea-height);resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 var(--focus-ring-width) var(--accent-ring);
}
.field-row{display:grid;grid-template-columns:1fr;gap:0 var(--field-gap);}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr;}}
.note{margin:var(--space-md) 0 0;font-size:var(--text-small);color:var(--ink-faint);}
.note a{color:var(--accent);font-weight:var(--weight-semi);}
/* Honeypot: a real field, hidden from people but visible to bots that fill
   everything. Not display:none — some bots skip those. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.form-status{
  display:none;margin-top:var(--space-md);
  padding:var(--space-sm);
  border-left:var(--form-status-bar) solid transparent;
  font-size:var(--text-small);line-height:1.5;
}
.form-status.is-visible{display:block;}
.form-status--ok{background:#eaf4ed;border-left-color:#1f7a4d;color:#14532d;}
.form-status--error{background:#fdecef;border-left-color:var(--accent);color:#8a1f3d;}
.form-status--pending{background:var(--paper-2);border-left-color:var(--ink-faint);color:var(--ink-soft);}

/* Field-level error state, set by the form handler */
.field.has-error label{color:var(--accent);}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:var(--accent);
  box-shadow:0 0 0 var(--focus-ring-width) var(--accent-ring);
}

/* ---------- Footer ---------- */
.foot{
  background:var(--ink);color:var(--on-dark-soft);
  padding-top:var(--footer-padding-top);
}
.foot__wordmark{
  font-size:var(--footer-wordmark-size);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-display);
  line-height:1;
  color:var(--on-dark);
  /* display type this large needs proportional air beneath it */
  margin:0 0 var(--footer-wordmark-gap);
}
.foot__wordmark em{font-family:var(--font-serif);font-style:italic;color:var(--accent-lt);}
.foot__grid{
  display:grid;grid-template-columns:1fr;
  gap:var(--footer-grid-gap);
  padding-bottom:var(--footer-grid-gap);
}
@media (min-width:560px){.foot__grid{grid-template-columns:1fr 1fr;}}
@media (min-width:920px){.foot__grid{grid-template-columns:1.6fr 1fr 1fr 1.4fr;}}
.foot h4{
  margin:0 0 var(--space-md);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  font-weight:var(--weight-medium);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
}
.foot a{display:inline-flex;align-items:center;min-height:24px;color:var(--on-dark-soft);text-decoration:none;}
.foot a:hover{color:var(--accent-lt);}
.foot ul{list-style:none;margin:0;padding:0;}
.foot li{margin-bottom:var(--footer-link-gap);}
.foot__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--space-2xs) var(--space-lg);
  padding-block:var(--footer-bottom-padding);
  border-top:var(--hairline) solid var(--rule-dark);
  font-family:var(--font-mono);
  font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--ink-faint);
}

/* ---------- Scroll reveal (scoped to .js so nothing hides without scripting) ---------- */
.js .reveal{
  opacity:0;transform:translateY(var(--reveal-distance));
  transition:opacity var(--reveal-duration) var(--ease),
             transform var(--reveal-duration) var(--ease);
}
.js .reveal.is-in{opacity:1;transform:none;}
.js .reveal[data-d="1"]{transition-delay:calc(var(--reveal-stagger) * 1);}
.js .reveal[data-d="2"]{transition-delay:calc(var(--reveal-stagger) * 2);}
.js .reveal[data-d="3"]{transition-delay:calc(var(--reveal-stagger) * 3);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  .hero__photo img{animation:none;}
  .ticker__track{animation:none;}
  .index__row:hover{padding-left:0;}
  .card:hover{transform:none;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}