/* ============================================================
     DESIGN TOKENS — Dr. J Dream Rentals
     Direction: Dark Industrial-Luxury
     ============================================================ */
  :root{
    --ink:        #0A0B0D;   /* base steel black */
    --ink-2:      #101216;   /* deep panel */
    --surface:    #16191F;   /* raised card */
    --surface-2:  #1D222A;   /* hover / elevated */
    --line:       rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.16);

    --text:       #F4F1EA;   /* warm white */
    --text-soft:  #B7BCC5;   /* secondary */
    --text-mute:  #7C828C;   /* tertiary / captions */

    --amber:      #FFB020;   /* safety accent */
    --amber-bright:#FFC759;
    --amber-deep: #C77F00;
    --amber-glow: rgba(255,176,32,.35);

    --maxw: 1200px;
    --gutter: clamp(20px, 5vw, 64px);

    --r-sm: 8px;
    --r:    14px;
    --r-lg: 22px;

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

    --step--1: clamp(.82rem, .78rem + .2vw, .9rem);
    --step-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
    --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
    --step-2:  clamp(1.6rem, 1.35rem + 1.1vw, 2.1rem);
    --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);
    --step-4:  clamp(3rem, 2rem + 4.6vw, 5.6rem);
    --step-5:  clamp(3.6rem, 2rem + 7vw, 7.5rem);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    margin:0;
    background:var(--ink);
    color:var(--text);
    font-family:"Satoshi", system-ui, -apple-system, sans-serif;
    font-size:var(--step-0);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  h1,h2,h3,h4{
    font-family:"Clash Display","Satoshi",sans-serif;
    font-weight:700;
    line-height:1.02;
    letter-spacing:-.01em;
    word-spacing:.04em;
    margin:0;
    text-wrap:balance;
  }

  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  button{ font:inherit; cursor:pointer; }

  ::selection{ background:var(--amber); color:var(--ink); }

  :focus-visible{
    outline:3px solid var(--amber-bright);
    outline-offset:3px;
    border-radius:4px;
  }

  .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

  .eyebrow{
    font-family:"Space Mono",monospace;
    font-size:var(--step--1);
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--amber);
    display:inline-flex; align-items:center; gap:.7em;
    margin:0;
  }
  .eyebrow::before{
    content:""; width:26px; height:1px; background:var(--amber); display:inline-block;
  }
  .eyebrow.center::before,.eyebrow.center::after{ content:""; width:26px; height:1px; background:var(--amber); }

  .mono{ font-family:"Space Mono",monospace; }

  /* diamond-plate steel texture */
  .plate{
    background-image:
      linear-gradient(135deg, rgba(255,255,255,.04) 25%, transparent 25%),
      linear-gradient(225deg, rgba(255,255,255,.04) 25%, transparent 25%),
      linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 25%),
      linear-gradient(315deg, rgba(0,0,0,.25) 25%, transparent 25%);
    background-size:16px 16px;
    background-position:8px 0, 8px 0, 0 0, 0 0;
  }

  /* ---------- Skip link ---------- */
  .skip{
    position:absolute; left:16px; top:-60px; z-index:2000;
    background:var(--amber); color:var(--ink); padding:12px 18px; border-radius:8px;
    font-weight:700; transition:top .2s var(--ease);
  }
  .skip:focus{ top:16px; }

  /* ============================================================
     BUTTONS
     ============================================================ */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.6em;
    padding:15px 26px; border-radius:999px; border:1px solid transparent;
    font-weight:700; font-size:var(--step-0); letter-spacing:-.01em;
    min-height:52px; line-height:1;
    transition:transform .25s var(--ease), background .25s var(--ease),
               box-shadow .35s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
    will-change:transform;
  }
  .btn svg{ width:20px; height:20px; flex:none; }
  .btn-primary{
    background:var(--amber); color:var(--ink);
    box-shadow:0 8px 30px -8px var(--amber-glow);
  }
  .btn-primary:hover{ background:var(--amber-bright); transform:translateY(-2px); box-shadow:0 16px 40px -10px var(--amber-glow); }
  .btn-primary:active{ transform:translateY(0); }
  .btn-ghost{
    background:transparent; color:var(--text); border-color:var(--line-strong);
  }
  .btn-ghost:hover{ border-color:var(--text); background:rgba(255,255,255,.04); transform:translateY(-2px); }
  .btn-block{ width:100%; }

  /* ============================================================
     HEADER
     ============================================================ */
  header.site{
    position:fixed; inset:0 0 auto 0; z-index:1000;
    padding:18px 0;
    transition:padding .3s var(--ease), background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.site.scrolled{
    padding:10px 0;
    background:rgba(10,11,13,.78);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom-color:var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .brand{ display:flex; align-items:center; gap:12px; flex:none; }
  .monogram{
    width:44px; height:44px; border-radius:12px; flex:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:.86;
    background:linear-gradient(160deg,var(--amber),var(--amber-deep));
    box-shadow:0 6px 18px -6px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,.35);
    font-family:"Clash Display",sans-serif; font-weight:700; color:var(--ink); font-size:22px; letter-spacing:-.02em;
  }
  .monogram em{
    font-family:"Space Mono",monospace; font-style:normal; font-weight:700;
    font-size:7.5px; letter-spacing:.26em; text-indent:.26em; opacity:.92; margin-bottom:1px;
  }
  .brand-name{ display:flex; flex-direction:column; line-height:1.05; }
  .brand-name b{ font-family:"Clash Display",sans-serif; font-weight:700; font-size:1.02rem; letter-spacing:-.01em; white-space:nowrap; }
  .brand-name b .dream{ font-weight:500; color:var(--text-soft); }
  .brand-name > span{ font-family:"Space Mono",monospace; font-size:.62rem; letter-spacing:.24em; color:var(--text-mute); text-transform:uppercase; }
  .nav-links{ display:flex; align-items:center; gap:26px; flex-wrap:nowrap; }
  .nav-links a.link{ font-size:.95rem; color:var(--text-soft); position:relative; white-space:nowrap; transition:color .2s var(--ease); }
  .nav-links a.link::after{
    content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
    background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
  }
  .nav-links a.link:hover{ color:var(--text); }
  .nav-links a.link:hover::after{ transform:scaleX(1); }
  .nav-cta{ display:flex; align-items:center; gap:12px; flex:none; }
  .nav-phone{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.95rem; white-space:nowrap; }
  .nav-phone svg{ width:17px; height:17px; color:var(--amber); }

  /* ============================================================
     HERO
     ============================================================ */
  .hero{
    position:relative; padding-top:150px; padding-bottom:80px; overflow:hidden;
    background:
      radial-gradient(120% 90% at 78% -10%, rgba(255,176,32,.14), transparent 55%),
      radial-gradient(90% 70% at 10% 120%, rgba(255,176,32,.06), transparent 60%),
      var(--ink);
  }
  .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
  .hero h1{
    font-size:var(--step-5); margin:20px 0 0;
  }
  .hero h1 .line{ display:block; overflow:hidden; }
  .hero h1 .line > span{ display:block; }
  .hero h1 em{ font-style:normal; color:var(--amber); }
  .hero-sub{
    color:var(--text-soft); font-size:var(--step-1); max-width:46ch; margin:26px 0 0;
    line-height:1.5;
  }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
  .hero-note{ margin-top:18px; color:var(--text-mute); font-size:.9rem; display:flex; align-items:center; gap:8px; }
  .hero-note svg{ width:16px; height:16px; color:var(--amber); flex:none; }

  /* hero visual */
  .hero-visual{ position:relative; }
  .hauler-card{
    position:relative; border-radius:var(--r-lg); border:1px solid var(--line);
    background:linear-gradient(180deg,var(--surface),var(--ink-2));
    padding:26px; box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
    overflow:hidden;
  }
  .hauler-card::before{
    content:""; position:absolute; inset:0; opacity:.5;
    background:radial-gradient(80% 60% at 50% 0%, rgba(255,176,32,.14), transparent 60%);
    pointer-events:none;
  }
  .hauler-tag{
    position:absolute; top:20px; left:20px; z-index:3;
    font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--amber); border:1px solid var(--amber); padding:6px 11px; border-radius:999px;
    background:rgba(255,176,32,.08);
  }
  .hauler-svg{ width:100%; height:auto; margin:12px 0 6px; position:relative; z-index:2; }
  .hauler-meta{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; position:relative; z-index:2; }
  .hauler-meta .name{ font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.15rem; }
  .hauler-meta .price{ text-align:right; }
  .hauler-meta .price b{ font-family:"Clash Display",sans-serif; font-size:1.5rem; color:var(--amber); }
  .hauler-meta .price span{ display:block; font-family:"Space Mono",monospace; font-size:.62rem; letter-spacing:.16em; color:var(--text-mute); text-transform:uppercase; }

  /* stat strip */
  .stats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    margin-top:64px; border:1px solid var(--line); border-radius:var(--r);
    background:var(--ink-2); overflow:hidden;
  }
  .stat{ padding:26px 24px; border-left:1px solid var(--line); }
  .stat:first-child{ border-left:0; }
  .stat b{ font-family:"Clash Display",sans-serif; font-size:clamp(1.7rem,1.2rem+1.6vw,2.5rem); display:block; line-height:1; }
  .stat b .u{ font-size:.5em; color:var(--text-mute); font-weight:600; margin-left:4px; }
  .stat span{ font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); margin-top:10px; display:block; }

  /* ============================================================
     MARQUEE
     ============================================================ */
  .marquee{
    border-block:1px solid var(--line); background:var(--ink-2);
    padding:18px 0; overflow:hidden; margin-top:0;
  }
  .marquee-track{
    display:flex; gap:56px; width:max-content;
    animation:scrollx 34s linear infinite;
  }
  .marquee-track span{
    font-family:"Space Mono",monospace; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-soft); display:inline-flex; align-items:center; gap:56px; white-space:nowrap;
  }
  .marquee-track span::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); }
  @keyframes scrollx{ to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; flex-wrap:wrap; white-space:normal; } }

  /* ============================================================
     SECTION SHELL
     ============================================================ */
  section{ padding-block:clamp(72px,10vw,130px); position:relative; }
  .sec-head{ max-width:60ch; }
  .sec-head h2,.sec-head h1{ font-size:var(--step-4); margin-top:16px; }
  .sec-head p{ color:var(--text-soft); font-size:var(--step-1); margin:20px 0 0; line-height:1.5; }
  .sec-head.center{ margin-inline:auto; text-align:center; }
  .sec-head.center .eyebrow{ justify-content:center; }

  /* ============================================================
     THE MACHINE — feature spotlight
     ============================================================ */
  .machine{ background:linear-gradient(180deg,var(--ink),var(--ink-2)); }
  .machine-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-top:64px; }
  .feat-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
  .feat{
    display:flex; gap:20px; padding:22px; border:1px solid var(--line); border-radius:var(--r);
    background:var(--surface); transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  }
  .feat:hover{ border-color:var(--line-strong); transform:translateX(6px); background:var(--surface-2); }
  .feat-ic{
    width:48px; height:48px; border-radius:12px; flex:none; display:grid; place-items:center;
    background:rgba(255,176,32,.1); color:var(--amber); border:1px solid rgba(255,176,32,.25);
  }
  .feat-ic svg{ width:24px; height:24px; }
  .feat h3{ font-family:"Satoshi",sans-serif; font-weight:700; font-size:1.12rem; letter-spacing:-.01em; }
  .feat p{ margin:6px 0 0; color:var(--text-soft); font-size:.96rem; line-height:1.5; }

  .machine-visual{ position:sticky; top:100px; }
  .photo-slot{
    position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
    background:
      radial-gradient(90% 70% at 50% 0%, rgba(255,176,32,.12), transparent 60%),
      linear-gradient(180deg,var(--surface),var(--ink));
    aspect-ratio:4/3; display:grid; place-items:center; text-align:center;
  }
  .photo-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .photo-slot .ph{ padding:30px; color:var(--text-mute); }
  .photo-slot .ph svg{ width:56px; height:56px; margin:0 auto 14px; color:var(--amber); opacity:.7; }
  .photo-slot .ph b{ display:block; color:var(--text-soft); font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
  .photo-slot .ph small{ font-size:.82rem; }
  .machine-visual .cap{
    margin-top:16px; font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--text-mute); display:flex; justify-content:space-between;
  }

  /* ============================================================
     HAUL / USE CASES
     ============================================================ */
  .haul-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px; }
  .haul-card{
    padding:30px 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
    transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  }
  .haul-card:hover{ transform:translateY(-6px); border-color:rgba(255,176,32,.4); background:var(--surface-2); }
  .haul-card .ic{ color:var(--amber); margin-bottom:18px; }
  .haul-card .ic svg{ width:34px; height:34px; }
  .haul-card h3{ font-family:"Satoshi",sans-serif; font-weight:700; font-size:1.08rem; }
  .haul-card p{ margin:8px 0 0; color:var(--text-soft); font-size:.92rem; }

  /* ============================================================
     SPEC SHEET
     ============================================================ */
  .spec{ background:var(--ink-2); }
  .spec-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; margin-top:56px; align-items:start; }
  .spec-table{ border-top:1px solid var(--line); }
  .spec-row{
    display:grid; grid-template-columns:1fr auto; gap:16px; padding:17px 4px;
    border-bottom:1px solid var(--line); align-items:baseline;
  }
  .spec-row dt{ color:var(--text-mute); font-family:"Space Mono",monospace; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; }
  .spec-row dd{ margin:0; font-weight:700; font-size:1.02rem; text-align:right; font-variant-numeric:tabular-nums; }
  .spec-aside{ position:sticky; top:100px; }
  .callout{
    border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; background:var(--surface);
    position:relative; overflow:hidden;
  }
  .callout::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--amber),transparent);
  }
  .callout h3{ font-size:1.5rem; }
  .callout p{ color:var(--text-soft); margin:14px 0 0; }
  .callout .big{ font-family:"Clash Display",sans-serif; font-size:3.2rem; color:var(--amber); line-height:1; margin-top:6px; }

  /* ============================================================
     PRICING
     ============================================================ */
  .price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
  .price-card{
    border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; background:var(--surface);
    position:relative; display:flex; flex-direction:column; gap:6px;
    transition:transform .35s var(--ease), border-color .35s var(--ease);
  }
  .price-card:hover{ transform:translateY(-6px); }
  .price-card.featured{
    border-color:var(--amber); background:linear-gradient(180deg,rgba(255,176,32,.09),var(--surface));
    box-shadow:0 30px 70px -40px var(--amber-glow);
  }
  .price-card .plan{ font-family:"Space Mono",monospace; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mute); }
  .price-card .badge{
    position:absolute; top:-12px; right:24px; background:var(--amber); color:var(--ink);
    font-family:"Space Mono",monospace; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
    padding:6px 12px; border-radius:999px; font-weight:700;
  }
  .price-card .amt{ font-family:"Clash Display",sans-serif; font-size:3.4rem; line-height:1; margin-top:8px; }
  .price-card .amt small{ font-size:.9rem; color:var(--text-mute); font-family:"Space Mono",monospace; letter-spacing:.05em; }
  .price-card ul{ list-style:none; padding:0; margin:20px 0 26px; display:flex; flex-direction:column; gap:12px; }
  .price-card li{ display:flex; gap:11px; align-items:flex-start; color:var(--text-soft); font-size:.95rem; }
  .price-card li svg{ width:18px; height:18px; color:var(--amber); flex:none; margin-top:3px; }
  .price-card .btn{ margin-top:auto; }
  .deposit-note{
    margin-top:26px; text-align:center; color:var(--text-mute); font-size:.9rem;
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  }
  .deposit-note b{ color:var(--text); }

  /* ============================================================
     REQUIREMENTS
     ============================================================ */
  .req{ background:linear-gradient(180deg,var(--ink-2),var(--ink)); }
  .req-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 40px; margin-top:52px; }
  .req-item{ display:flex; gap:16px; padding:20px 4px; border-bottom:1px solid var(--line); }
  .req-item .n{ flex:none; width:30px; height:30px; margin-top:1px; border-radius:8px; display:grid; place-items:center; color:var(--amber); background:rgba(255,176,32,.1); border:1px solid rgba(255,176,32,.25); }
  .req-item .n svg{ width:17px; height:17px; }
  .req-item h3{ font-family:"Satoshi",sans-serif; font-weight:700; font-size:1.02rem; }
  .req-item p{ margin:5px 0 0; color:var(--text-soft); font-size:.92rem; line-height:1.5; }
  .req-warn{
    margin-top:36px; display:flex; gap:16px; align-items:flex-start;
    border:1px solid rgba(255,176,32,.3); background:rgba(255,176,32,.06);
    border-radius:var(--r); padding:22px 24px;
  }
  .req-warn svg{ width:26px; height:26px; color:var(--amber); flex:none; }
  .req-warn p{ margin:0; color:var(--text-soft); font-size:.95rem; }
  .req-warn b{ color:var(--text); }

  /* ============================================================
     RESERVE / FORM
     ============================================================ */
  .reserve{ background:var(--ink-2); }
  .reserve-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; margin-top:52px; align-items:start; }
  .reserve-side .contact-row{
    display:flex; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line);
  }
  .reserve-side .contact-row .ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(255,176,32,.1); color:var(--amber); border:1px solid rgba(255,176,32,.22); flex:none; }
  .reserve-side .contact-row .ic svg{ width:21px; height:21px; }
  .reserve-side .contact-row b{ display:block; font-size:1.02rem; }
  .reserve-side .contact-row span{ color:var(--text-mute); font-size:.86rem; font-family:"Space Mono",monospace; letter-spacing:.06em; }

  form.quote{
    border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,4vw,40px);
    background:var(--surface); box-shadow:0 30px 80px -50px rgba(0,0,0,.9);
  }
  .field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
  .field.full{ grid-column:1/-1; }
  .field label{ font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--text-soft); }
  .field label .req-star{ color:var(--amber); }
  .field input,.field select,.field textarea{
    background:var(--ink); border:1px solid var(--line-strong); border-radius:var(--r-sm);
    color:var(--text); padding:14px 15px; font:inherit; font-size:.98rem; min-height:52px;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease); width:100%;
  }
  .field textarea{ min-height:110px; resize:vertical; }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,176,32,.18);
  }
  .field input::placeholder,.field textarea::placeholder{ color:var(--text-mute); }
  select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237C828C' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:42px; }
  .form-foot{ display:flex; align-items:center; gap:16px; margin-top:8px; flex-wrap:wrap; }
  .form-foot p{ margin:0; color:var(--text-mute); font-size:.82rem; flex:1; min-width:180px; }

  /* ============================================================
     FAQ
     ============================================================ */
  .faq{ max-width:820px; margin-inline:auto; margin-top:52px; }
  .acc{ border-bottom:1px solid var(--line); }
  .acc-q{
    width:100%; text-align:left; background:none; border:0; color:var(--text);
    padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px;
    font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.15rem; letter-spacing:-.01em;
  }
  .acc-q .pm{ width:26px; height:26px; flex:none; position:relative; }
  .acc-q .pm::before,.acc-q .pm::after{ content:""; position:absolute; background:var(--amber); border-radius:2px; transition:transform .3s var(--ease); }
  .acc-q .pm::before{ top:12px; left:3px; right:3px; height:2px; }
  .acc-q .pm::after{ left:12px; top:3px; bottom:3px; width:2px; }
  .acc[open] .acc-q .pm::after{ transform:scaleY(0); }
  .acc-a{ overflow:hidden; color:var(--text-soft); font-size:1rem; line-height:1.6; padding-bottom:24px; max-width:70ch; }
  details.acc summary{ list-style:none; }
  details.acc summary::-webkit-details-marker{ display:none; }

  /* ============================================================
     CTA BAND
     ============================================================ */
  .cta-band{
    text-align:center;
    background:
      radial-gradient(90% 120% at 50% 0%, rgba(255,176,32,.16), transparent 55%),
      var(--ink);
  }
  .cta-band h2{ font-size:var(--step-4); }
  .cta-band p{ color:var(--text-soft); font-size:var(--step-1); max-width:44ch; margin:22px auto 0; }
  .cta-band .hero-actions{ justify-content:center; }

  /* ============================================================
     FOOTER
     ============================================================ */
  footer.site{ border-top:1px solid var(--line); padding-block:64px 40px; background:var(--ink-2); }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
  .foot-brand p{ color:var(--text-mute); font-size:.92rem; max-width:34ch; margin:18px 0 0; }
  .foot-col h4{ font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mute); font-weight:700; margin-bottom:18px; }
  .foot-col a,.foot-col p{ display:block; color:var(--text-soft); font-size:.95rem; margin-bottom:12px; transition:color .2s var(--ease); }
  .foot-col address{ font-style:normal; }
  .foot-col a:hover{ color:var(--amber); }
  .foot-bottom{ margin-top:52px; padding-top:26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--text-mute); font-size:.82rem; font-family:"Space Mono",monospace; letter-spacing:.05em; }

  /* ============================================================
     MOBILE STICKY ACTION BAR (phone only — designed, not shrunk)
     ============================================================ */
  .mbar{
    position:fixed; left:0; right:0; bottom:0; z-index:1200;
    display:none; gap:10px; padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    background:rgba(10,11,13,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .mbar .btn{ flex:1; min-height:50px; padding:13px; font-size:.98rem; }

  /* ============================================================
     REVEAL ANIMATIONS
     ============================================================ */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .reveal.in{ opacity:1; transform:none; }
  [data-stagger]{ transition-delay:calc(var(--i,0) * 70ms); }
  .hero h1 .line > span{ transform:translateY(105%); transition:transform .9s var(--ease-out); }
  .hero.loaded h1 .line > span{ transform:translateY(0); }
  .hero .load-fade{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
  .hero.loaded .load-fade{ opacity:1; transform:none; }
  .hero .load-fade[data-d="1"]{ transition-delay:.35s; }
  .hero .load-fade[data-d="2"]{ transition-delay:.5s; }
  .hero .load-fade[data-d="3"]{ transition-delay:.65s; }
  .hero .load-fade[data-d="4"]{ transition-delay:.8s; }

  @media (prefers-reduced-motion: reduce){
    .reveal,.hero h1 .line > span,.hero .load-fade{ transition:none !important; opacity:1 !important; transform:none !important; }
    *{ scroll-behavior:auto !important; }
  }

  /* ============================================================
     RESPONSIVE — mobile designed separately
     ============================================================ */
  @media (max-width:1024px){
    .hero-grid{ grid-template-columns:1fr; gap:44px; }
    .machine-grid,.spec-wrap,.reserve-grid{ grid-template-columns:1fr; gap:44px; }
    .machine-visual,.spec-aside{ position:static; }
    .haul-grid{ grid-template-columns:repeat(2,1fr); }
    .price-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
    .req-grid{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:1120px){ .nav-phone span{ display:none; } .nav-links{ gap:22px; } }
  @media (max-width:900px){ .nav-links{ display:none; } }
  @media (max-width:640px){
    .nav-links,.nav-cta{ display:none; }
    .hero{ padding-top:120px; padding-bottom:36px; }
    .stats{ grid-template-columns:1fr 1fr; }
    .stat{ border-left:1px solid var(--line); }
    .stat:nth-child(odd){ border-left:0; }
    .stat:nth-child(n+3){ border-top:1px solid var(--line); }
    .haul-grid{ grid-template-columns:1fr 1fr; gap:12px; }
    .field-grid{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr; gap:32px; }
    .foot-bottom{ flex-direction:column; }
    .mbar{ display:flex; }
    body{ padding-bottom:78px; }
    header.site{ padding:12px 0; }
    .cta-band .hero-actions .btn{ flex:1; }
    .fleet-actions{ width:100%; }
    .fleet-actions .btn{ flex:1; }
  }

  /* ============================================================
     THE FLEET (data-driven, scales 1 → N units)
     ============================================================ */
  .fleet-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; margin-top:56px; align-items:stretch; }
  .fleet-card{
    display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg);
    background:var(--surface); overflow:hidden;
    transition:transform .35s var(--ease), border-color .35s var(--ease);
  }
  .fleet-card:hover{ transform:translateY(-6px); border-color:rgba(255,176,32,.4); }
  .fleet-media{
    position:relative; aspect-ratio:16/10; overflow:hidden; display:grid; place-items:center;
    background:radial-gradient(90% 70% at 50% 0%, rgba(255,176,32,.14), transparent 60%), linear-gradient(180deg,var(--surface-2),var(--ink));
  }
  .fleet-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .fleet-media svg{ width:84%; height:auto; position:relative; z-index:1; }
  .fleet-status{
    position:absolute; top:14px; left:14px; z-index:2;
    font-family:"Space Mono",monospace; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
    padding:6px 10px; border-radius:999px; border:1px solid var(--amber); color:var(--amber); background:rgba(255,176,32,.12);
  }
  /* badge of honor — reservation counter */
  .honor-badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 13px 7px 9px; border-radius:999px;
    background:rgba(10,11,13,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,176,32,.45); box-shadow:0 8px 22px -12px #000; }
  .honor-badge .hb-ic{ width:26px; height:26px; display:grid; place-items:center; color:var(--amber); flex:none; }
  .honor-badge .hb-ic svg{ width:22px; height:22px; }
  .honor-badge .hb-txt{ display:flex; flex-direction:column; line-height:1; }
  .honor-badge .hb-txt b{ font-family:"Clash Display",sans-serif; font-weight:700; font-size:1rem; color:var(--text); font-variant-numeric:tabular-nums; }
  .honor-badge .hb-txt span{ font-family:"Space Mono",monospace; font-size:.55rem; letter-spacing:.13em; text-transform:uppercase; color:var(--amber); margin-top:3px; }
  .hauler-card .honor-badge-slot{ position:absolute; top:16px; right:16px; z-index:4; }
  .fleet-media .honor-badge{ position:absolute; top:14px; right:14px; z-index:3; }
  .fleet-body{ padding:24px; display:flex; flex-direction:column; gap:13px; flex:1; }
  .fleet-body h3{ font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.3rem; line-height:1.05; }
  .fleet-body .model{ font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-mute); margin-top:-6px; }
  .fleet-body p{ margin:0; color:var(--text-soft); font-size:.93rem; line-height:1.5; }
  .fleet-chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .fleet-chips span{ font-family:"Space Mono",monospace; font-size:.64rem; letter-spacing:.04em; color:var(--text-soft); border:1px solid var(--line-strong); border-radius:999px; padding:6px 11px; }
  .fleet-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:8px; }
  .fleet-price b{ font-family:"Clash Display",sans-serif; font-size:1.7rem; color:var(--amber); line-height:1; }
  .fleet-price span{ font-family:"Space Mono",monospace; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); display:block; margin-top:4px; }
  .fleet-actions{ display:flex; gap:8px; }
  .fleet-actions .btn{ min-height:44px; padding:11px 17px; font-size:.9rem; }
  .fleet-soon{
    border:1px dashed var(--line-strong); border-radius:var(--r-lg); background:transparent;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:13px; padding:30px; min-height:280px;
  }
  .fleet-soon .ic{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:rgba(255,176,32,.08); color:var(--amber); border:1px solid rgba(255,176,32,.2); }
  .fleet-soon .ic svg{ width:24px; height:24px; }
  .fleet-soon h3{ font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.25rem; }
  .fleet-soon p{ margin:0; color:var(--text-soft); font-size:.93rem; line-height:1.5; }
  .fleet-soon a{ color:var(--amber); font-weight:700; font-size:.93rem; }

  /* ============================================================
     DATE-RANGE CALENDAR (dependency-free)
     ============================================================ */
  .cal-wrap{ position:relative; }
  .date-trigger{
    width:100%; text-align:left; background:var(--ink); border:1px solid var(--line-strong); border-radius:var(--r-sm);
    color:var(--text); padding:14px 15px; min-height:52px; font:inherit; font-size:.98rem;
    display:flex; align-items:center; gap:12px; cursor:pointer;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .date-trigger:hover{ border-color:var(--text-mute); }
  .date-trigger[aria-expanded="true"]{ border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,176,32,.18); }
  .date-trigger .dt-icon{ color:var(--amber); display:flex; }
  .date-trigger .dt-icon svg{ width:19px; height:19px; }
  .date-trigger .dt-text{ flex:1; }
  .date-trigger.placeholder .dt-text{ color:var(--text-mute); }
  .date-trigger .dt-dur{ font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.04em; color:var(--amber); white-space:nowrap; }
  .calendar{
    position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:50;
    border:1px solid var(--line-strong); border-radius:var(--r); background:var(--ink-2);
    padding:16px; box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
    animation:calIn .18s var(--ease-out);
  }
  @keyframes calIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){ .calendar{ animation:none; } }
  .calendar[hidden]{ display:none; }
  .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .cal-month{ font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.02rem; }
  .cal-nav{
    width:38px; height:38px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--text); display:grid; place-items:center; font-size:1.2rem; line-height:1;
    transition:background .2s var(--ease), border-color .2s var(--ease);
  }
  .cal-nav:hover:not(:disabled){ background:var(--surface-2); border-color:var(--text-mute); }
  .cal-nav:disabled{ opacity:.3; cursor:not-allowed; }
  .cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
  .cal-dow span{ text-align:center; font-family:"Space Mono",monospace; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); padding:4px 0; }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
  .cal-day{
    aspect-ratio:1; border:0; background:transparent; color:var(--text); border-radius:9px;
    font:inherit; font-size:.9rem; font-variant-numeric:tabular-nums; position:relative; cursor:pointer;
    transition:background .15s var(--ease), color .15s var(--ease);
  }
  .cal-day:hover:not(:disabled):not(.is-empty){ background:var(--surface-2); }
  .cal-day:disabled,.cal-day.is-empty{ color:var(--text-mute); opacity:.32; cursor:default; }
  .cal-day.in-range{ background:rgba(255,176,32,.16); border-radius:0; }
  .cal-day.range-start{ background:var(--amber); color:var(--ink); border-radius:9px 0 0 9px; }
  .cal-day.range-end{ background:var(--amber); color:var(--ink); border-radius:0 9px 9px 0; }
  .cal-day.range-start.range-end{ border-radius:9px; }
  .cal-day.is-today::after{ content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--amber); }
  .cal-day.range-start.is-today::after,.cal-day.range-end.is-today::after{ background:var(--ink); }
  .cal-est{ margin-top:12px; padding:11px 14px; border-radius:var(--r-sm); background:rgba(255,176,32,.08); border:1px solid rgba(255,176,32,.2); display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .cal-est span{ font-size:.84rem; color:var(--text-soft); }
  .cal-est b{ font-family:"Clash Display",sans-serif; font-size:1.15rem; color:var(--amber); }
  .cal-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  .cal-hint{ font-size:.76rem; color:var(--text-mute); }
  .cal-clear{ background:none; border:0; color:var(--amber); font-weight:700; font-size:.84rem; cursor:pointer; }

  /* ============================================================
     REAL TRAILER PHOTOS + GALLERY
     ============================================================ */
  .hauler-photo{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:14px; margin:12px 0 6px; position:relative; z-index:2; display:block; }
  .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:52px; }
  .gallery-grid figure{ margin:0; position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:var(--surface); aspect-ratio:4/3; }
  .gallery-grid .feature{ grid-column:span 2; grid-row:span 2; }
  .gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s var(--ease); }
  .gallery-grid figure:hover img{ transform:scale(1.05); }
  @media (max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } .gallery-grid .feature{ grid-column:span 2; grid-row:span 1; } }
  @media (max-width:520px){ .gallery-grid{ gap:10px; } }

  /* ============================================================
     ABOUT / TEAM
     ============================================================ */
  .about-story{ max-width:70ch; margin-top:10px; }
  .about-story p{ color:var(--text-soft); font-size:var(--step-1); line-height:1.6; margin:0; }
  .team-heading{ font-size:var(--step-2); margin:64px 0 0; }
  .team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:28px; }
  .team-card{ display:flex; gap:22px; align-items:center; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:28px; transition:border-color .3s var(--ease), transform .3s var(--ease); }
  .team-card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
  .team-photo{ width:104px; height:104px; border-radius:16px; flex:none; display:grid; place-items:center; color:var(--amber); overflow:hidden;
    background:radial-gradient(120% 120% at 50% 0%, rgba(255,176,32,.14), transparent 60%), var(--surface-2); border:1px solid rgba(255,176,32,.22); }
  .team-photo img{ width:100%; height:100%; object-fit:cover; }
  .team-photo svg{ width:44px; height:44px; opacity:.85; }
  .team-role{ font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin:0; }
  .team-info h3{ font-family:"Clash Display",sans-serif; font-weight:600; font-size:1.3rem; margin:8px 0 0; }
  .team-info p:last-child{ margin:10px 0 0; color:var(--text-soft); font-size:.94rem; line-height:1.5; }
  @media (max-width:640px){ .team-grid{ grid-template-columns:1fr; } .team-card{ flex-direction:column; align-items:flex-start; } }

  /* ============================================================
     LIGHTBOX (gallery expand)
     ============================================================ */
  .gallery-grid figure{ cursor:zoom-in; }
  .lightbox{ position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:24px;
    background:rgba(5,6,8,.9); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .lightbox.open{ display:flex; }
  .lightbox img{ max-width:min(1200px,94vw); max-height:88vh; width:auto; height:auto; border-radius:12px; border:1px solid var(--line-strong); box-shadow:0 40px 120px -30px #000; }
  .lightbox-close{ position:absolute; top:18px; right:20px; width:48px; height:48px; border-radius:50%; border:1px solid var(--line-strong);
    background:rgba(20,22,26,.85); color:var(--text); display:grid; place-items:center; cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease); }
  .lightbox-close:hover{ background:var(--surface-2); transform:scale(1.05); }
  .lightbox-close svg{ width:22px; height:22px; }
  @media (prefers-reduced-motion: no-preference){
    .lightbox.open{ animation:lbIn .2s var(--ease-out); }
    .lightbox.open img{ animation:lbImg .28s var(--ease-out); }
    @keyframes lbIn{ from{ opacity:0 } to{ opacity:1 } }
    @keyframes lbImg{ from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:none } }
  }


  /* ============================================================
     MULTIPAGE additions
     ============================================================ */
  main.inner{ padding-top:88px; }
  main.inner > section:first-of-type{ padding-top:44px; }
  .nav-links a.link.is-active{ color:var(--text); }
  .nav-links a.link.is-active::after{ transform:scaleX(1); }
  @media (prefers-reduced-motion: no-preference){
    body{ animation:pageIn .45s var(--ease-out) both; }
    @keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
  }