:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

  :root {
    --bg: #0b0d0f;
    --surface: #14181c;
    --surface-2: #1b2025;
    --border: #262b30;
    --border-soft: #1e2226;
    --text: #edeff1;
    --text-muted: #98a1a9;
    --text-faint: #6b7379;
    --brand-blue: #1772ac;
    --brand-blue-bright: #4fa3d9;
    --brand-lightblue: #358bca;
    --brand-red: #e41d2d;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --display: 'Big Shoulders', 'Arial Narrow', sans-serif;
    --body: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.55;
  }

  a { color: var(--brand-blue-bright); text-decoration: none; }
  a:hover { color: var(--brand-lightblue); text-decoration: underline; }

  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 900;
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0;
    letter-spacing: -0.01em;
  }

  .wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
  }

  .bars {
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
    height: 1em;
    vertical-align: middle;
  }
  .bars span {
    width: 7px;
    transform: skewX(-14deg);
    display: block;
  }
  .bars .b1 { background: var(--brand-blue); }
  .bars .b2 { background: var(--brand-lightblue); }
  .bars .b3 { background: var(--brand-red); }

  /* ---------- masthead ---------- */
  .masthead {
    border-bottom: 1px solid var(--border);
    padding: 22px 0;
  }
  .masthead .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .masthead img { height: 34px; display: block; }
  .masthead nav {
    display: flex;
    gap: 28px;
    font-family: var(--body);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .masthead nav a { color: var(--text-muted); }
  .masthead nav a:hover { color: var(--text); text-decoration: none; }

  /* ---------- hero ---------- */
  .hero { padding: 88px 0 76px; }
  .eyebrow {
    font-family: var(--mono);
    font-size: clamp(15px, 1.4vw, 19px);
    letter-spacing: 0.16em;
    color: var(--brand-lightblue);
    text-transform: uppercase;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .hero h1 {
    font-size: clamp(42px, 6vw, 74px);
    line-height: 0.98;
    max-width: 15ch;
  }
  .hero h1 em {
    font-style: normal;
    color: var(--brand-red);
  }
  .hero .sub {
    margin-top: 26px;
    max-width: 46ch;
    font-size: 19px;
    color: var(--text-muted);
  }
  .cta-row { margin-top: 38px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
  .btn {
    display: inline-block;
    font-family: var(--body);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 15px 30px;
    border-radius: 3px;
    text-decoration: none;
  }
  .btn-primary { background: var(--brand-red); color: #fff; }
  .btn-primary:hover { background: #ff2d3f; color: #fff; text-decoration: none; }
  .btn-ghost { color: var(--text); border: 1px solid var(--border); }
  .btn-ghost:hover { border-color: var(--text-muted); text-decoration: none; color: var(--text); }

  /* ---------- section shell ---------- */
  section { padding: 72px 0; border-top: 1px solid var(--border); }
  .kicker {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 14px;
  }
  .section-head h2 { font-size: clamp(28px, 3.4vw, 40px); max-width: 22ch; }
  .section-head { margin-bottom: 44px; }

  /* ---------- two paths ---------- */
  .paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .path-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .path-card .tag {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--brand-lightblue);
    text-transform: uppercase;
  }
  .path-card h3 { font-size: 26px; }
  .path-card p { color: var(--text-muted); margin: 0; font-size: 16px; }
  .path-card svg { width: 100%; height: 90px; }

  /* ---------- spec / data plate ---------- */
  .plate {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
  }
  .plate-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }
  .plate-photo { position: relative; overflow: hidden; }
  .plate-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .plate-photo .cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 10px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e9edf0;
  }
  @media (max-width: 720px) {
    .plate-photos { grid-template-columns: 1fr; }
  }
  .plate-diagram { padding: 40px 36px 8px; overflow-x: auto; }
  .plate-diagram svg { width: 100%; min-width: 620px; height: auto; display: block; }
  .plate-rows { border-top: 1px solid var(--border); }
  .plate-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    padding: 16px 32px;
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--mono);
    font-size: 14.5px;
  }
  .plate-row:last-child { border-bottom: none; }
  .plate-row .label { color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; }
  .plate-row .value { color: var(--text); }

  /* ---------- compare ---------- */
  .compare {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
  }
  .compare .stat-block { display: flex; gap: 36px; margin-top: 30px; }
  .stat { }
  .stat .num {
    font-family: var(--display);
    font-weight: 900;
    font-size: 44px;
    color: var(--brand-lightblue);
    line-height: 1;
  }
  .stat .cap {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    max-width: 16ch;
  }
  .compare p { color: var(--text-muted); font-size: 16.5px; }
  .compare-right {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 30px;
  }
  .compare-right .line { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-family: var(--mono); font-size: 14.5px; }
  .compare-right .line:last-child { border-bottom: none; }
  .compare-right .line .k { color: var(--text-muted); }
  .compare-right .line .v { color: var(--text); }
  .compare-right .line.highlight .v { color: var(--brand-red); font-weight: 600; }

  /* ---------- why ---------- */
  .why-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
  .why-item { border-left: 2px solid var(--brand-blue); padding-left: 20px; }
  .why-item .n { font-family: var(--mono); font-size: 13px; color: var(--text-faint); }
  .why-item h3 { font-size: 20px; margin-top: 8px; text-transform: none; letter-spacing: 0; }
  .why-item p { color: var(--text-muted); font-size: 15.5px; margin-top: 8px; }

  /* ---------- contact ---------- */
  .contact { text-align: left; }
  .contact h2 { font-size: clamp(32px, 4.6vw, 52px); max-width: 18ch; }
  .contact .sub { color: var(--text-muted); max-width: 44ch; margin-top: 18px; font-size: 18px; }

  .response-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 0;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 24px;
    font-family: var(--mono);
    font-size: 13.5px;
    letter-spacing: 0.03em;
    color: var(--text);
  }
  .response-note .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #38d46a; flex-shrink: 0;
  }

  .inquiry-form { margin-top: 34px; max-width: 600px; }
  .field { margin-bottom: 22px; }
  .field-label {
    display: block;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 10px;
  }
  .field input[type="text"],
  .field input[type="email"],
  .field textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    padding: 13px 14px;
  }
  .field textarea { min-height: 92px; resize: vertical; }
  .field input:focus, .field textarea:focus {
    outline: none; border-color: var(--brand-blue-bright);
  }
  .method-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .method-pill { position: relative; }
  .method-pill input {
    position: absolute; opacity: 0; width: 0; height: 0;
  }
  .method-pill span {
    display: inline-block;
    padding: 11px 24px;
    border: 1px solid var(--border);
    border-radius: 24px;
    font-family: var(--body);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-muted);
    cursor: pointer;
  }
  .method-pill input:checked + span {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
  }
  .method-pill input:focus-visible + span {
    outline: 2px solid var(--brand-blue-bright); outline-offset: 2px;
  }
  .form-status { margin-top: 4px; font-family: var(--mono); font-size: 14px; min-height: 1px; }
  .form-status.error { color: var(--brand-red); }
  .confirm-box {
    margin-top: 34px;
    max-width: 600px;
    border: 1px solid var(--brand-blue);
    border-radius: 4px;
    padding: 30px 32px;
    background: var(--surface);
  }
  .confirm-box h3 {
    font-family: var(--display); text-transform: uppercase;
    font-size: 24px; margin: 0 0 10px; letter-spacing: -0.01em;
  }
  .confirm-box p { color: var(--text-muted); margin: 0; font-size: 16px; }

  footer {
    border-top: 1px solid var(--border);
    padding: 32px 0 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-faint);
  }

  @media (max-width: 720px) {
    .masthead nav { display: none; }
    .paths, .why-grid { grid-template-columns: 1fr; }
    .compare { grid-template-columns: 1fr; }
    .plate-row { grid-template-columns: 1fr; gap: 4px; }
    .compare .stat-block { gap: 24px 28px; flex-wrap: wrap; }
  }

/* Responsive and accessible local prototype refinements */
html { scroll-behavior:smooth; scroll-padding-top:30px; }
.masthead .storage-brand { width:210px; flex-shrink:0; background:#fff; padding:10px 14px; }
.masthead .storage-brand img { width:100%;height:auto; }
.masthead nav { align-items:center; }
.storage-toggle { display:none; }
.skip { position:absolute;top:-100px;left:12px;background:white;color:#071e3c;padding:12px;z-index:30; }
.skip:focus { top:12px; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {outline:3px solid #64b7ff;outline-offset:4px;}
.wrap { width:100%; }
.hero { border:0; }
.hero h1 { max-width:19ch;font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:400;line-height:1.08; }
h2,h3 { font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:400;line-height:1.18; }
.hero h1 em { color:#64b7ff; }
.hero .sub { max-width:52ch; }
.eyebrow,.kicker,.field-label,.plate-row .label { color:#a3adb7; }
.plate-photo { aspect-ratio:16/10; }
.plate-photo img { object-fit:cover; }
.plate-photo .cap { font-size:11px; }
.plate-diagram svg { min-width:0; }
.plate-diagram { padding:25px 18px 10px; }
.plate-note { padding:0 24px 20px;font-size:12px;color:#a3adb7; }
.compare-right .line { gap:18px;flex-wrap:wrap; }
.compare .stat-block { flex-wrap:wrap; }
.compare-right .line .v { text-align:right; }
.rate-message { color:#64b7ff;font-family:Impact,Arial,sans-serif;font-size:28px;line-height:1.2; }
.method-pill input { width:1px;height:1px; }
.field input,.field textarea { min-height:48px; }
.field-label { font-size:12px; }
fieldset { border:0;padding:0;margin:0;min-width:0; }
.contact-detail { margin-top:22px;color:#a3adb7;font-size:14px; }
.contact-detail a { white-space:nowrap; }
.prototype-note { color:#a3adb7;font-size:11px; }
.method-row { gap:8px; }
.method-pill span { padding:10px 21px; }
.draft-note { margin-top:12px;color:#a3adb7;font-size:13px; }
.form-status { color:#a3adb7; }
#email-fallback { display:inline-block;margin-top:15px; }
[hidden] { display:none!important; }
@media(max-width:720px){
 .wrap { padding-inline:20px; }
 .masthead .wrap { flex-wrap:wrap;gap:14px; }
 .masthead .storage-brand { width:190px; }
 .storage-toggle { display:block;background:transparent;border:1px solid #526277;color:white;padding:9px 12px;cursor:pointer; }
 .masthead nav.open { display:flex;flex-direction:column;align-items:stretch;flex-basis:100%;gap:0; }
 .masthead nav a { padding:12px 0;border-bottom:1px solid #262b30; }
 .hero { padding-block:55px; }
 .hero h1 { font-size:clamp(36px,8vw,58px); }
 .hero .sub { font-size:17px; }
 .eyebrow { font-size:11px;letter-spacing:.1em;gap:10px; }
 section { padding-block:50px; }
 .path-card { padding:26px 24px; }
 .plate-row { padding:16px 24px; }
 .plate-diagram { padding:18px 8px 10px; }
 .btn { padding:14px 21px; }
 .plate-note { padding-inline:18px; }
 .compare { gap:28px; }
 footer.wrap { padding-block:30px; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* Larger reverse-color logo and detailed trailer illustrations */
.masthead .storage-brand{width:320px;background:transparent;padding:0;}
.masthead nav{gap:20px;font-size:13px;}
.path-card{padding-top:0;overflow:hidden;}
.path-card .trailer-illustration{width:calc(100% + 60px);max-width:none;height:auto;margin:0 -30px 12px;display:block;}
.plate-diagram{padding:0;background:#101b25;}
.plate-diagram .trailer-illustration{width:100%;height:auto;display:block;}
.plate-note{padding-top:18px;}
@media(max-width:900px) and (min-width:721px){.masthead .storage-brand{width:270px;}.masthead nav{gap:13px;font-size:11px;}}
@media(max-width:720px){.masthead .storage-brand{width:min(270px,calc(100% - 85px));}.path-card .trailer-illustration{width:calc(100% + 48px);margin-inline:-24px;}.plate-diagram{padding:0;}}

/* Restored flat 2D technical drawings */
.path-card{padding-top:24px;}
.path-card .trailer-illustration{margin-bottom:8px;}
.plate-diagram{padding:14px 12px 0;}

/* Restored flat 2D technical drawings */
.path-card{padding-top:24px;}
.path-card .trailer-illustration{margin-bottom:8px;}
.plate-diagram{padding:14px 12px 0;}

/* Reference pricing and rental choices */
.hero-offer{margin-top:28px;border-left:3px solid #4fa3d9;padding:3px 0 3px 20px;}
.offer-label{font-family:var(--mono);font-size:11px;letter-spacing:1.6px;color:#a8c6db;}
.offer-price{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:62px;line-height:1.2;color:#64b7ff;letter-spacing:-1px;}
.offer-price span{font-family:Arial,sans-serif;font-size:17px;color:#c3d4df;letter-spacing:0;margin-left:7px;}
.hero-offer p{margin:7px 0 8px;color:#c3d4df;font-size:14px;max-width:42ch;}
.hero-offer a{font-size:12px;}
.rental-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.rental-card{background:var(--surface);border:1px solid #344956;padding:36px;display:flex;flex-direction:column;align-items:flex-start;}
.rental-card.featured{border-top:3px solid #4fa3d9;}
.rental-card .offer-label{margin:4px 0;}
.rental-card h3{font-size:36px;color:#eef3f8;line-height:1.15;}
.rental-intro{font-size:17px;color:#bdc8d0;margin:20px 0;max-width:36ch;}
.delivery-included{padding:16px 0;margin-bottom:25px;border-top:1px solid #344956;border-bottom:1px solid #344956;width:100%;}
.delivery-included strong,.delivery-included span{display:block;}.delivery-included strong{font-size:18px;color:#eef3f8;}.delivery-included span{font-size:14px;margin-top:4px;color:#bdc8d0;}
.rental-details{font-size:15px;color:#bdc8d0;margin:0 0 30px;}
.rental-card .btn{margin-top:auto;}
.field select{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--text);font:inherit;padding:13px 14px;min-height:48px;}
@media(max-width:720px){.rental-grid{grid-template-columns:1fr;}.rental-card{padding:28px 24px;}.offer-price{font-size:54px;}.hero-offer{padding-left:16px;}.rental-card .btn{font-size:14px;}}
.contact-detail{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;font-size:0!important}.contact-detail a{font-size:26px!important;font-weight:700;line-height:1.5;color:#fff;text-decoration:underline;text-decoration-color:#65b5ff;text-underline-offset:6px}.contact-detail a:hover{color:#65b5ff}@media(max-width:600px){.contact-detail{flex-direction:column;align-items:flex-start;gap:14px}.contact-detail a{font-size:clamp(18px,5.6vw,24px)!important;overflow-wrap:anywhere}}
.contact-detail a{white-space:normal}