/* =========================================================================
   MAGIC CAR RENTAL GOA — "Goan editorial / retro road-trip"
   Sun-bleached paper, ink, vermillion. Condensed poster type + mono rate card.
   ========================================================================= */

:root{
  --paper:      #f4ece0;
  --paper-lift: #fbf6ee;
  --paper-deep: #e9dfcd;
  --ink:        #16130f;
  --ink-70:     #4a4136;
  --ink-45:     #8a7f70;
  --vermillion: #d93a0b;
  --teal:       #0e6b5a;
  --mustard:    #e9a800;

  --rule:       rgba(22,19,15,.20);
  --rule-soft:  rgba(22,19,15,.11);

  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(16px, 4vw, 48px);
  --max: 1440px;
  --head-h: 74px;

  --ease: cubic-bezier(.22,.68,.32,1);
}

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

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

section[id]{ scroll-margin-top:88px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16.5px;
  line-height:1.58;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* paper grain over everything */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--vermillion); color:var(--paper); }

:focus-visible{
  outline:2.5px solid var(--vermillion);
  outline-offset:3px;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:500;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; font-family:var(--font-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
}
.skip-link:focus{ left:0; }

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

/* ---------------------------------------------------------------- type */
.kicker{
  font-family:var(--font-mono);
  font-size:11.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.19em;
  color:var(--vermillion);
  margin:0 0 14px;
}

.sec-title{
  font-size:clamp(2.1rem, 5.2vw, 4rem);
  font-weight:900;
  font-variation-settings:"wdth" 88;
  line-height:.95;
  letter-spacing:-.022em;
  text-transform:uppercase;
  margin:0;
}

.sec-sub{
  max-width:56ch; margin:16px 0 0;
  color:var(--ink-70); font-size:16.5px;
}

.sec-head{
  display:flex; flex-wrap:wrap; gap:28px;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(30px,4vw,52px);
}
.sec-head-center{ flex-direction:column; align-items:center; text-align:center; }
.sec-head-center .sec-sub{ margin-inline:auto; }

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
  padding:15px 26px; border:1.5px solid var(--ink); border-radius:2px;
  cursor:pointer; transition:background .22s var(--ease), color .22s var(--ease), transform .18s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }

.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:var(--vermillion); border-color:var(--vermillion); color:#fff; }

.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

.btn-paper{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-paper:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.btn-outline-paper{ background:transparent; color:var(--paper); border-color:rgba(244,236,224,.55); }
.btn-outline-paper:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* --------------------------------------------------------------- header */
.site-head{
  position:sticky; top:0; z-index:120;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:rgba(244,236,224,.92);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom-color:var(--rule);
  box-shadow:0 6px 22px -18px rgba(22,19,15,.7);
}
.head-inner{
  max-width:var(--max); margin-inline:auto; padding:12px var(--pad);
  min-height:var(--head-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.wordmark{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.wordmark .mark{
  width:28px; height:28px; flex:none;
  fill:var(--vermillion);
  transition:transform .5s var(--ease);
}
.wordmark:hover .mark{ transform:rotate(90deg); }
.spark-sm{ fill:none; stroke:var(--vermillion); stroke-width:2.4; }
.wordmark-text{ display:flex; flex-direction:column; line-height:1; }
.wm-main{
  font-weight:900; font-variation-settings:"wdth" 86;
  font-size:23px; letter-spacing:-.015em; text-transform:uppercase;
}
.wm-sub{
  font-family:var(--font-mono); font-size:8.5px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-45);
  margin-top:4px; white-space:nowrap;
}

.site-nav{ display:flex; gap:clamp(16px,2.4vw,34px); }
.site-nav a{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.11em; text-decoration:none;
  color:var(--ink-70); padding:6px 0;
  border-bottom:1.5px solid transparent;
  transition:color .2s, border-color .2s;
}
.site-nav a:hover{ color:var(--ink); border-bottom-color:var(--vermillion); }

.head-actions{ display:flex; align-items:center; gap:14px; }

.phone{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.04em; text-decoration:none; color:var(--ink);
}
.phone svg{ width:15px; height:15px; fill:var(--vermillion); }
.phone.is-placeholder span{ color:var(--ink-45); border-bottom:1px dashed var(--ink-45); }
.head-actions .btn{ padding:12px 20px; }

/* ----------------------------------------------------------------- hero */
.hero{
  padding:clamp(26px,4vw,54px) 0 0;
  border-bottom:2px solid var(--ink);
}
.hero-grid{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,5vw,70px); align-items:stretch;
}

.hero-title{
  font-size:clamp(3rem, 8.6vw, 7.4rem);
  font-weight:900;
  font-variation-settings:"wdth" 86;
  line-height:.88;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
}
.hero-title em{
  font-style:italic; color:var(--vermillion);
  font-variation-settings:"wdth" 92;
}

.hero-sub{
  max-width:50ch; margin:26px 0 0;
  font-size:clamp(15.5px,1.35vw,18px); color:var(--ink-70);
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,auto);
  gap:clamp(16px,3vw,42px); justify-content:start;
  margin:38px 0 0; padding-top:22px;
  border-top:1px solid var(--rule);
}
.hero-stats dt{
  font-family:var(--font-mono); font-size:9.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.15em; color:var(--ink-45);
  margin-bottom:6px;
}
.hero-stats dd{
  margin:0; font-size:clamp(20px,2.2vw,30px); font-weight:800;
  font-variation-settings:"wdth" 90; letter-spacing:-.02em;
}

.hero-fig{ margin:0; position:relative; display:flex; flex-direction:column; }
.hero-frame{
  position:relative; flex:1 1 auto; display:flex;
  border:2px solid var(--ink);
  background:#fff;
  padding:9px;
  box-shadow:14px 14px 0 rgba(22,19,15,.14);
  transform:rotate(-.65deg);
}
.hero-frame img{
  width:100%; height:100%; min-height:400px;
  object-fit:cover; object-position:48% 64%;
  filter:saturate(1.04) contrast(1.03);
}

.sticker{
  position:absolute; right:-34px; bottom:-34px;
  width:132px; height:132px; border-radius:50%;
  background:var(--vermillion); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 26px -12px rgba(217,58,11,.9);
  animation:spin 26s linear infinite;
}
.sticker svg{ position:absolute; inset:0; width:100%; height:100%; }
.sticker text{
  font-family:var(--font-mono); font-size:9.4px; font-weight:600;
  letter-spacing:.14em; fill:#fff; text-transform:uppercase;
}
.sticker-star{ display:grid; place-items:center; animation:spin-rev 26s linear infinite; }
.sticker-star svg{ position:static; width:30px; height:30px; fill:#fff; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spin-rev{ to{ transform:rotate(-360deg); } }

.fig-cap{
  display:flex; gap:14px; align-items:baseline;
  font-family:var(--font-mono); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--ink-45);
  margin-top:16px; padding-left:2px;
}
.fig-cap span:first-child{ color:var(--vermillion); font-weight:600; flex:none; }

.photo-credit{
  font-family:var(--font-mono); font-size:10px; line-height:1.5;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-45);
  margin-top:20px; padding-top:12px; border-top:1px solid var(--rule);
}

/* --------------------------------------------------------------- ticker */
.ticker{
  margin-top:clamp(34px,5vw,64px);
  background:var(--ink); color:var(--paper);
  overflow:hidden; padding:11px 0;
  border-top:2px solid var(--ink);
}
.ticker-track{
  display:flex; gap:26px; align-items:center; width:max-content;
  animation:ticker 46s linear infinite;
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; white-space:nowrap;
}
.ticker-track i{ color:var(--vermillion); font-style:normal; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------- fleet */
.fleet{ padding:clamp(58px,8vw,110px) 0 clamp(50px,7vw,96px); }

.fleet-tools{ display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; }

.search{
  display:flex; align-items:center; gap:9px;
  border-bottom:1.5px solid var(--ink); padding:8px 2px; min-width:270px;
}
.search svg{ width:16px; height:16px; fill:none; stroke:var(--ink-45); stroke-width:1.8; flex:none; }
.search input{
  border:0; background:transparent; outline:none; width:100%;
  font-family:var(--font-sans); font-size:15px; color:var(--ink);
}
.search input::placeholder{ color:var(--ink-45); }

.sort-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:transparent; border:1px solid var(--rule); border-radius:2px;
  padding:7px 15px; cursor:pointer; text-align:left;
  transition:border-color .2s, background .2s;
}
.sort-btn:hover{ border-color:var(--ink); background:var(--paper-lift); }
.sort-label{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-45);
}
.sort-value{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--ink);
}

.view-toggle{
  display:flex; align-self:stretch; border:1px solid var(--rule); border-radius:2px;
  overflow:hidden; transition:border-color .2s;
}
.view-toggle:hover{ border-color:var(--ink); }
.view-btn{
  background:transparent; border:0; cursor:pointer; padding:7px 15px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45);
  transition:background .2s, color .2s;
}
.view-btn + .view-btn{ border-left:1px solid var(--rule); }
.view-btn:hover{ color:var(--ink); background:var(--paper-lift); }
.view-btn.is-on{ background:var(--ink); color:var(--paper); }

.filters{
  display:flex; gap:clamp(14px,2.4vw,32px);
  border-bottom:1px solid var(--rule); margin-bottom:6px;
  overflow-x:auto; scrollbar-width:none;
}
.filters::-webkit-scrollbar{ display:none; }
.filter{
  background:none; border:0; cursor:pointer; white-space:nowrap;
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink-45);
  padding:12px 0 11px; border-bottom:2.5px solid transparent;
  margin-bottom:-1px; transition:color .2s, border-color .2s;
}
.filter span{ font-size:9.5px; color:var(--ink-45); margin-left:5px; vertical-align:super; }
.filter:hover{ color:var(--ink); }
.filter.is-on{ color:var(--ink); border-bottom-color:var(--vermillion); font-weight:600; }
.filter.is-on span{ color:var(--vermillion); }

.fleet-legend{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 250px 118px 138px 240px;
  gap:16px; align-items:end;
  padding:20px 0 9px;
  font-family:var(--font-mono); font-size:9.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--ink-45);
}
.lg-rate, .lg-act{ text-align:right; }

.fleet-list{ list-style:none; margin:0; padding:0; }

.row{
  position:relative;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 250px 118px 138px 240px;
  gap:16px; align-items:center;
  padding:20px 0;
  border-top:1px solid var(--rule);
  cursor:pointer;
  transition:background .25s var(--ease);
}
.fleet-list li:last-child .row{ border-bottom:1px solid var(--rule); }
.row::before{
  content:""; position:absolute; left:-14px; top:0; bottom:0; width:3px;
  background:var(--vermillion); transform:scaleY(0); transform-origin:center;
  transition:transform .3s var(--ease);
}
.row:hover{ background:var(--paper-lift); }
.row:hover::before{ transform:scaleY(1); }

.row-no{
  font-family:var(--font-mono); font-size:12px; color:var(--ink-45);
  transition:color .2s; padding-left:4px;
}
.row:hover .row-no{ color:var(--vermillion); }

.row-car{ display:flex; align-items:center; gap:16px; min-width:0; }
.row-thumb{ display:none; width:74px; height:52px; object-fit:contain; flex:none; mix-blend-mode:multiply; }

.row-name{
  font-size:clamp(19px,1.9vw,26px); font-weight:800;
  font-variation-settings:"wdth" 90;
  letter-spacing:-.018em; line-height:1.1; margin:0;
  text-transform:uppercase;
}
.row-sub{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink-45);
  margin-top:5px;
}
.row-sub b{ color:var(--teal); font-weight:600; }

.row-spec, .row-col{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink-70);
  line-height:1.65;
}
.row-col{ color:var(--ink-45); }

.row-rate{ text-align:right; }
.row-rate b{
  font-family:var(--font-mono); font-size:19px; font-weight:600;
  letter-spacing:-.02em; color:var(--ink);
}
.row-rate span{
  display:block; font-family:var(--font-mono); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.13em; color:var(--ink-45); margin-top:2px;
}

.row-act{
  justify-self:end;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em;
  background:none; border:1px solid var(--rule); border-radius:2px;
  padding:9px 13px; cursor:pointer; color:var(--ink);
  transition:background .2s, color .2s, border-color .2s;
}
.row-act i{ font-style:normal; transition:transform .25s var(--ease); }
.row:hover .row-act{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.row-act:hover{ background:var(--vermillion) !important; border-color:var(--vermillion); color:#fff !important; }
.row-act:hover i{ transform:translateX(3px); }

.row-actions{
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
  justify-self:end; flex-wrap:wrap;
}
.row-wa{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
  background:none; border:1px solid var(--vermillion); border-radius:2px;
  padding:9px 13px; cursor:pointer; color:var(--vermillion);
  transition:background .2s, color .2s, border-color .2s;
}
.row-wa:hover{ background:var(--vermillion); border-color:var(--vermillion); color:#fff; }

/* ---------------------------------------------------- grid view ------ */
#fleet.is-grid .fleet-legend{ display:none; }

#fleet.is-grid .fleet-list{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
#fleet.is-grid .fleet-list li{ background:var(--paper); }

#fleet.is-grid .row{
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "no     no"
    "media  media"
    "car    car"
    "spec   colour"
    "rate   act";
  gap:12px 14px; align-items:end;
  height:100%; padding:18px 20px;
  border-top:0;
}
#fleet.is-grid .fleet-list li:last-child .row{ border-bottom:0; }

#fleet.is-grid .row-no{
  grid-area:no; display:block; padding:0 0 9px;
  border-bottom:1px solid var(--rule-soft);
  font-size:11.5px;
}
#fleet.is-grid .row-thumb{
  grid-area:media; display:block;
  width:100%; height:auto; aspect-ratio:16/10; object-fit:contain;
}
#fleet.is-grid .row-car{ grid-area:car; display:block; min-width:0; }
#fleet.is-grid .row-name{ font-size:clamp(18px,1.5vw,22px); }
#fleet.is-grid .row-spec{ grid-area:spec; font-size:10.5px; }
#fleet.is-grid .row-col{
  grid-area:colour; display:block; justify-self:end; align-self:start;
  font-size:10px; text-align:right;
}
#fleet.is-grid .row-rate{ grid-area:rate; text-align:left; align-self:end; }
#fleet.is-grid .row-actions{ grid-area:act; justify-self:end; align-self:end; }

/* hover: a vermillion bar wipes across the top of the card */
#fleet.is-grid .row::before{
  top:-1px; bottom:auto; left:-1px; right:-1px;
  width:auto; height:3px;
  transform:scaleX(0); transform-origin:left center;
}
#fleet.is-grid .row:hover::before{ transform:scaleX(1); }

@media (max-width:1180px){
  #fleet.is-grid .fleet-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  #fleet.is-grid .fleet-list{ grid-template-columns:1fr; }
  #fleet.is-grid .row{ padding:16px; }
}

.fleet-empty{
  text-align:center; padding:clamp(50px,8vw,90px) 20px;
  border-top:1px solid var(--rule);
}
.empty-title{ font-size:clamp(20px,3vw,30px); font-weight:800; font-variation-settings:"wdth" 90; text-transform:uppercase; margin:0 0 8px; }
.empty-sub{ color:var(--ink-70); margin:0 0 24px; }
.noscript-note{ font-family:var(--font-mono); font-size:13px; padding:20px 0; }

/* floating preview */
.peek{
  position:fixed; top:0; left:0; z-index:90; pointer-events:none;
  width:330px; opacity:0; transform:translate3d(-50%,-50%,0) scale(.9) rotate(-3deg);
  transition:opacity .3s var(--ease), transform .38s var(--ease);
  will-change:transform;
}
.peek.is-on{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1) rotate(-2deg); }
.peek img{
  width:100%; aspect-ratio:4/3; object-fit:contain;
  background:#fff; border:1.5px solid var(--ink);
  box-shadow:16px 16px 0 rgba(22,19,15,.16);
}

/* floating call / whatsapp tickets */
.fab{
  position:fixed; right:20px; bottom:22px; z-index:95;
  display:flex; flex-direction:column; align-items:flex-end; gap:11px;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.fab.is-on{ opacity:1; transform:none; pointer-events:auto; }
.modal-open .fab{ opacity:0 !important; pointer-events:none; }

.fab-item{
  display:flex; align-items:center; gap:11px;
  padding:11px 15px; text-decoration:none; cursor:pointer;
  background:var(--paper-lift); color:var(--ink);
  border:1.5px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .2s;
}
.fab-item:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); background:#fff; }
.fab-item svg{ width:19px; height:19px; flex:none; fill:currentColor; }
.fab-item svg path + path{ fill:currentColor; }

.fab-txt{ display:flex; flex-direction:column; line-height:1.15; }
.fab-txt b{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.11em;
}
.fab-txt small{
  font-family:var(--font-mono); font-size:9.5px; font-weight:400;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink-45); margin-top:3px;
}

.fab-wa{ background:var(--vermillion); border-color:var(--vermillion); color:#fff; box-shadow:5px 5px 0 var(--ink); }
.fab-wa:hover{ background:#c23308; border-color:#c23308; color:#fff; }
.fab-wa .fab-txt small{ color:rgba(255,255,255,.75); }

/* ------------------------------------------------------------------ how */
.how{
  padding:clamp(58px,8vw,104px) 0;
  background:var(--paper-lift);
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
}
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(206px,1fr));
  gap:clamp(22px,3vw,38px);
}
.step{ border-top:2.5px solid var(--ink); padding-top:16px; }
.step-no{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:.16em; color:var(--vermillion); display:block; margin-bottom:12px;
}
.step h3{
  font-size:17.5px; font-weight:800; font-variation-settings:"wdth" 92;
  text-transform:uppercase; letter-spacing:-.01em; margin:0 0 9px; line-height:1.15;
}
.step p{ margin:0; font-size:14.5px; color:var(--ink-70); line-height:1.6; }

.how-note{
  display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(24px,4vw,54px); align-items:center;
  margin-top:clamp(48px,7vw,88px);
}
.how-note img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border:2px solid var(--ink); box-shadow:12px 12px 0 rgba(22,19,15,.12);
  transform:rotate(.7deg);
}
.big-note{
  font-size:clamp(21px,2.7vw,33px); font-weight:800;
  font-variation-settings:"wdth" 92; line-height:1.14;
  letter-spacing:-.02em; margin:0 0 16px;
}
.small-note{ margin:0; color:var(--ink-70); max-width:52ch; }

/* ------------------------------------------------------------ delivery */
.delivery{ padding:clamp(58px,8vw,104px) 0; }

.zone-list{ list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink); }
.zone{
  display:grid; grid-template-columns:74px minmax(0,1fr) 150px;
  gap:clamp(16px,3vw,36px); align-items:center;
  padding:24px 8px 24px 4px;
  border-bottom:1px solid var(--rule);
  transition:background .25s var(--ease), padding-left .25s var(--ease);
}
.zone:hover{ background:var(--paper-lift); padding-left:14px; }
.zone-code{
  font-family:var(--font-mono); font-size:13px; font-weight:600;
  letter-spacing:.06em; color:var(--ink);
  border:1.5px solid var(--ink); padding:7px 0; text-align:center;
  transition:background .25s, color .25s;
}
.zone:hover .zone-code{ background:var(--vermillion); border-color:var(--vermillion); color:#fff; }
.zone-body h3{
  font-size:clamp(17px,1.8vw,23px); font-weight:800;
  font-variation-settings:"wdth" 90; text-transform:uppercase;
  letter-spacing:-.015em; margin:0 0 5px;
}
.zone-body p{ margin:0; font-size:14.5px; color:var(--ink-70); max-width:62ch; }
.zone-tag{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--teal);
  text-align:right;
}

/* -------------------------------------------------------------- ledger */
.ledger{
  padding:clamp(58px,8vw,104px) 0;
  background:var(--paper-deep);
  border-top:2px solid var(--ink);
}
.ledger-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.6vw,32px); }
.ledger-col{ background:var(--paper-lift); border:2px solid var(--ink); padding:clamp(24px,3.4vw,42px); }
.ledger-col-alt{ background:var(--ink); color:var(--paper); }
.ledger-col h3{
  display:flex; align-items:center; gap:11px;
  font-size:16px; font-weight:800; font-variation-settings:"wdth" 92;
  text-transform:uppercase; letter-spacing:.05em;
  margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--rule);
}
.ledger-col-alt h3{ border-bottom-color:rgba(244,236,224,.25); }
.tick,.cross{
  display:grid; place-items:center; width:24px; height:24px; flex:none;
  font-size:12px; border-radius:50%;
}
.tick{ background:var(--teal); color:#fff; }
.cross{ background:var(--vermillion); color:#fff; }
.ledger-col ul{ list-style:none; margin:0; padding:0; }
.ledger-col li{
  position:relative; padding:11px 0 11px 24px;
  font-size:15.5px; line-height:1.5; border-bottom:1px solid var(--rule-soft);
}
.ledger-col-alt li{ border-bottom-color:rgba(244,236,224,.14); color:rgba(244,236,224,.86); }
.ledger-col li:last-child{ border-bottom:0; }
.ledger-col li::before{
  content:""; position:absolute; left:2px; top:20px;
  width:9px; height:1.5px; background:var(--vermillion);
}

/* ---------------------------------------------------------------- faq */
.faq{ padding:clamp(58px,8vw,104px) 0; }
.faq-list{ border-top:1.5px solid var(--ink); max-width:940px; }
.qa{ border-bottom:1px solid var(--rule); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:23px 4px; cursor:pointer; list-style:none;
  font-size:clamp(16px,1.7vw,20px); font-weight:700;
  font-variation-settings:"wdth" 94; letter-spacing:-.01em;
  transition:color .2s, padding-left .25s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--vermillion); padding-left:12px; }
.qa[open] summary{ color:var(--vermillion); }

.qa-icon{ position:relative; width:16px; height:16px; flex:none; }
.qa-icon::before,.qa-icon::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px;
  background:currentColor; transform:translateY(-50%);
  transition:transform .3s var(--ease);
}
.qa-icon::after{ transform:translateY(-50%) rotate(90deg); }
.qa[open] .qa-icon::after{ transform:translateY(-50%) rotate(0); }

.qa-body{ padding:0 4px 26px; max-width:74ch; }
.qa-body p{ margin:0; color:var(--ink-70); font-size:15.5px; }

/* ----------------------------------------------------------- cta band */
.cta-band{
  position:relative; overflow:hidden;
  background:var(--vermillion); color:var(--paper);
  padding:clamp(64px,10vw,130px) 0;
  border-top:2px solid var(--ink);
}
.cta-media{ position:absolute; inset:0; }
.cta-media img{
  width:100%; height:100%; object-fit:cover;
  opacity:.30; mix-blend-mode:multiply; filter:grayscale(1) contrast(1.15);
}
.cta-inner{ position:relative; text-align:center; }
.cta-band .kicker{ color:rgba(244,236,224,.85); }
.cta-title{
  font-size:clamp(2.3rem,6.4vw,5.4rem); font-weight:900;
  font-variation-settings:"wdth" 86; line-height:.94;
  letter-spacing:-.03em; text-transform:uppercase; margin:0;
}
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px; }
.cta-foot{
  font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.15em; color:rgba(244,236,224,.8); margin-top:26px;
}

/* -------------------------------------------------------------- footer */
.site-foot{ background:var(--ink); color:var(--paper); padding:clamp(52px,7vw,84px) 0 30px; }
.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;
  gap:clamp(26px,4vw,54px);
  padding-bottom:44px; border-bottom:1px solid rgba(244,236,224,.18);
}
.wordmark-lg .wm-main{ font-size:34px; }
.wordmark-lg .mark{ width:34px; height:34px; }
.wordmark-lg .wm-sub{ color:rgba(244,236,224,.5); font-size:9.5px; }
.foot-tag{ color:rgba(244,236,224,.62); font-size:15px; max-width:34ch; margin:18px 0 0; }

.foot-col{ display:flex; flex-direction:column; gap:9px; }
.foot-col h4{
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; color:var(--vermillion);
  margin:0 0 8px;
}
.foot-col a,.foot-col span{
  font-size:14.5px; color:rgba(244,236,224,.76); text-decoration:none;
  transition:color .2s;
}
.foot-col a:hover{ color:var(--paper); }
.foot-contact a{ color:var(--paper); font-family:var(--font-mono); font-size:13.5px; }
.foot-addr{ font-family:var(--font-mono); font-size:11.5px !important; color:rgba(244,236,224,.45) !important; letter-spacing:.05em; }

.foot-base{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  padding-top:24px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  color:rgba(244,236,224,.5);
}
.foot-base p{ margin:0; }

/* --------------------------------------------------------------- modal */
.modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-backdrop{
  position:absolute; inset:0; background:rgba(22,19,15,.78);
  backdrop-filter:blur(3px); animation:fade .28s var(--ease);
}
.modal-panel{
  position:relative; width:min(1100px,100%); max-height:92vh;
  background:var(--paper); border:2px solid var(--ink);
  box-shadow:20px 20px 0 rgba(0,0,0,.3);
  display:flex; flex-direction:column; overflow:hidden;
  animation:pop .34s var(--ease);
}
@keyframes fade{ from{ opacity:0; } }
@keyframes pop{ from{ opacity:0; transform:translateY(22px) scale(.985); } }

.modal-x{
  position:absolute; top:14px; right:14px; z-index:5;
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--paper); border:1.5px solid var(--ink); border-radius:2px;
  cursor:pointer; transition:background .2s, color .2s;
}
.modal-x svg{ width:17px; height:17px; stroke:currentColor; stroke-width:2; fill:none; }
.modal-x:hover{ background:var(--vermillion); border-color:var(--vermillion); color:#fff; }

.modal-body{ overflow-y:auto; overscroll-behavior:contain; }
.m-grid{ display:grid; grid-template-columns:.92fr 1.08fr; position:relative; }
.m-grid::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:46%;
  background:#fff; border-right:1.5px solid var(--ink); pointer-events:none;
}

.m-media{
  background:transparent;
  padding:clamp(18px,2.4vw,30px);
  display:flex; flex-direction:column; gap:14px;
  position:sticky; top:0; align-self:start;
}
.m-shot{
  aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(#fff,#f7f3ec);
}
.m-shot img{ width:100%; height:100%; object-fit:contain; }
.m-thumbs{ display:flex; gap:9px; flex-wrap:wrap; }
.m-thumb{
  width:60px; height:46px; padding:0; cursor:pointer;
  background:#fff; border:1.5px solid var(--rule); border-radius:2px;
  overflow:hidden; transition:border-color .2s, transform .2s;
}
.m-thumb img{ width:100%; height:100%; object-fit:contain; }
.m-thumb:hover{ transform:translateY(-2px); }
.m-thumb.is-on{ border-color:var(--vermillion); }
.m-shot-cap{
  font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase;
  letter-spacing:.13em; color:var(--ink-45);
}

.m-info{ padding:clamp(24px,3vw,42px); }
.m-idx{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--vermillion);
  margin:0 0 12px;
}
.m-title{
  font-size:clamp(28px,3.4vw,44px); font-weight:900;
  font-variation-settings:"wdth" 88; line-height:.98;
  letter-spacing:-.03em; text-transform:uppercase; margin:0;
}
.m-desc{ color:var(--ink-70); font-size:15.5px; margin:16px 0 24px; max-width:56ch; }

.m-specs{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
}
.m-specs div{ padding:14px 6px; border-right:1px solid var(--rule-soft); }
.m-specs div:last-child{ border-right:0; }
.m-specs dt{
  font-family:var(--font-mono); font-size:8.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink-45); margin-bottom:5px;
}
.m-specs dd{
  margin:0; font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  text-transform:uppercase; color:var(--ink);
}

.m-block-label{
  font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.17em; color:var(--ink-45);
  margin:26px 0 12px;
}
.m-features{ display:flex; flex-wrap:wrap; gap:7px; }
.m-features span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; background:var(--paper-lift);
  border:1px solid var(--rule); border-radius:2px; padding:6px 10px;
}

.rate-card{ border-top:1px solid var(--rule); }
.rate-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:10px 8px; border-bottom:1px solid var(--rule-soft);
  font-family:var(--font-mono); font-size:12.5px;
  transition:background .2s;
}
.rate-row span:first-child{ text-transform:uppercase; letter-spacing:.08em; color:var(--ink-70); }
.rate-row b{ font-weight:600; font-size:15px; }
.rate-row.is-on{ background:var(--ink); color:var(--paper); }
.rate-row.is-on span:first-child{ color:rgba(244,236,224,.8); }

.m-book{ margin-top:26px; background:var(--paper-lift); border:1.5px solid var(--ink); padding:clamp(18px,2.4vw,26px); }
.book-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family:var(--font-mono); font-size:9.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink-45);
}
.field input,.field select{
  font-family:var(--font-mono); font-size:13.5px; color:var(--ink);
  background:transparent; border:0; border-bottom:1.5px solid var(--ink);
  padding:8px 2px; outline:none; border-radius:0; width:100%;
  transition:border-color .2s;
}
.field input:focus,.field select:focus{ border-bottom-color:var(--vermillion); }

.m-estimate{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--rule);
}
.est-figures{ font-family:var(--font-mono); }
.est-line2{ font-size:clamp(24px,3vw,34px); font-weight:600; letter-spacing:-.03em; }
.est-line3{ font-size:11px; color:var(--teal); text-transform:uppercase; letter-spacing:.1em; margin-top:5px; }
.m-estimate .btn{ align-self:flex-end; }

.m-fine{
  font-family:var(--font-mono); font-size:10.5px; line-height:1.7;
  color:var(--ink-45); margin:16px 0 0; letter-spacing:.03em;
}

/* -------------------------------------------------------------- reveal */
.js .reveal{ opacity:0; transform:translateY(20px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1180px){
  .fleet-legend,.row{ grid-template-columns:44px minmax(0,1fr) 200px 120px 240px; }
  .lg-col,.row-col{ display:none; }
}
@media (max-width:1024px){
  .site-nav{ display:none; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-fig{ order:-1; }
  .hero-frame{ flex:none; transform:none; box-shadow:9px 9px 0 rgba(22,19,15,.14); }
  .hero-frame img{ height:auto; min-height:0; aspect-ratio:16/9; object-position:50% 62%; }
  .sticker{ width:104px; height:104px; right:-16px; bottom:-20px; }
  .sticker text{ font-size:8.4px; }
  .m-grid{ grid-template-columns:1fr; }
  .m-grid::before{ display:none; }
  .m-media{ position:static; border-right:0; border-bottom:1.5px solid var(--ink); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .how-note{ grid-template-columns:1fr; }
  .ledger-grid{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .fleet-legend{ display:none; }
  .row{
    grid-template-columns:78px minmax(0,1fr) auto;
    grid-template-areas:"thumb car rate" "thumb spec act";
    gap:8px 14px; padding:16px 0;
  }
  .row::before{ left:-8px; }
  .row-thumb{ display:block; grid-area:thumb; align-self:center; }
  .row-car{ grid-area:car; }
  .row-no{ display:none; }
  .row-spec{ grid-area:spec; font-size:10px; }
  .row-col{ display:none; }
  .row-rate{ grid-area:rate; align-self:start; }
  .row-actions{ grid-area:act; align-self:center; justify-self:end; }
  .row-act, .row-wa{ padding:8px 11px; }
  .row-name{ font-size:19px; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .zone{ grid-template-columns:60px minmax(0,1fr); }
  .zone-tag{ grid-column:2; text-align:left; }
  .m-specs{ grid-template-columns:repeat(3,1fr); }
  .m-specs div{ border-bottom:1px solid var(--rule-soft); }
  .book-fields{ grid-template-columns:1fr; }
  .m-estimate{ flex-direction:column; align-items:stretch; }
  .m-estimate .btn{ width:100%; }
  .peek{ display:none; }
}
@media (max-width:640px){
  .phone span{ display:none; }
  .phone svg{ width:17px; height:17px; }
  .head-actions .btn{ padding:11px 15px; font-size:11.5px; }
  .wm-main{ font-size:20px; }
  .wm-sub{ font-size:7.5px; letter-spacing:.18em; }
  .hero-title{ font-size:clamp(2.6rem,12vw,4rem); }
  .sticker{ display:none; }
  .fig-cap{ flex-direction:column; gap:4px; }
  .foot-grid{ grid-template-columns:1fr; }
  .modal{ padding:0; }
  .modal-panel{ max-height:100vh; height:100%; border:0; box-shadow:none; }
  .cta-actions .btn{ width:100%; }
  .m-specs{ grid-template-columns:repeat(2,1fr); }
  /* index rows: stack the two buttons so the name keeps its width */
  .row-actions{ flex-direction:column; align-items:flex-end; gap:6px; }
  #fleet.is-grid .row-actions{ flex-direction:row; }
  /* floating actions become a full-width bottom bar */
  .fab{
    left:0; right:0; bottom:0; flex-direction:row; align-items:stretch; gap:0;
    transform:translateY(100%);
  }
  .fab-item{
    flex:1 1 0; min-width:0; justify-content:center; gap:8px;
    padding:12px 6px calc(12px + env(safe-area-inset-bottom));
    border-width:1.5px 0 0; box-shadow:none;
  }
  .fab-item + .fab-item{ border-left:0; }
  .fab-call{ border-right-width:1.5px; }
  .fab-item:hover{ transform:none; box-shadow:none; }
  .fab-wa{ border-color:var(--vermillion); }
  .fab-txt b{ font-size:11.5px; letter-spacing:.08em; }
  .fab-txt small{ font-size:9px; }
  body{ padding-bottom:56px; }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .peek{ display:none; }
}