/* =========================================================================
   A&K PROPERTY SOLUTIONS — "THE HAUL SHEET"
   Art direction: a printed dispatch ticket / freight work-order.
   Warm kraft paper, heavy black ink, sign-painter condensed type, hard
   offset block-shadows (no blur), DOT-tape rules, halftone rate stamp.
   ========================================================================= */

:root{
  --paper:    #EDE6D6;   /* dominant kraft/manila */
  --kraft:    #E3DAC6;   /* alt band */
  --concrete: #D6CDBA;   /* cards / panels */
  --ink:      #16140F;   /* warm near-black */
  --body:     #3A352B;   /* long-form text */
  --muted:    #7A7263;   /* labels / meta */
  --hair:     #B7AD97;   /* tan hairlines */
  --lime:     #A8E10C;   /* load-bearing accent */
  --blue:     #1B6CF0;   /* quiet second voice */

  --display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font:    "Libre Franklin", system-ui, -apple-system, sans-serif;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 60px);
  --shadow: 6px 6px 0 var(--ink);   /* hard offset block — the only shadow */
  --shadow-sm: 4px 4px 0 var(--ink);

  /* halftone print screen */
  --halftone: radial-gradient(var(--ink) 1.1px, transparent 1.5px);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
  font-family:var(--font); font-weight:400; font-size:1.0625rem; line-height:1.62;
  background:var(--paper); color:var(--body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; position:relative;
}
/* paper grain — felt, not seen */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit }
ul{ list-style:none }
::selection{ background:var(--lime); color:var(--ink) }
:focus-visible{ outline:2.5px solid var(--blue); outline-offset:3px }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:3 }
section{ position:relative; z-index:3 }

h1,h2,h3,h4{ font-family:var(--display); font-weight:800; line-height:.96; letter-spacing:-.01em; text-transform:uppercase; color:var(--ink) }

/* ---------- field-tag (numbered eyebrow) ---------- */
.tag{ display:inline-flex; align-items:baseline; gap:9px; margin-bottom:14px }
.tag .num{ font-family:var(--display); font-weight:700; font-size:1.18rem; color:var(--ink); letter-spacing:.01em }
.tag .sl{ color:var(--hair); font-weight:400; font-size:1.05rem }
.tag .lbl{ font-family:var(--font); font-weight:600; text-transform:uppercase; font-size:.73rem; letter-spacing:.06em; color:var(--muted) }

/* ---------- DOT reflective tape ---------- */
.tape{
  height:7px; width:100%;
  background:
    repeating-linear-gradient(90deg, var(--lime) 0 18px, transparent 18px 180px),
    repeating-linear-gradient(90deg, var(--ink) 0 17px, var(--paper) 17px 23px);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:1.06rem;
  background:var(--lime); color:var(--ink); border:2px solid var(--ink);
  padding:.74em 1.25em; box-shadow:var(--shadow-sm);
  transition:transform .12s steps(2), box-shadow .12s steps(2);
}
.btn svg{ width:1.1em; height:1.1em }
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink) }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink) }
.btn--ghost{ background:transparent; color:var(--ink) }
.btn--block{ width:100% }
.btn--lg{ font-size:1.2rem; padding:.82em 1.5em }

/* ---------- framed plate (photo / map) ---------- */
.plate{ position:relative; border:3px solid var(--ink); box-shadow:var(--shadow); background:var(--concrete) }
.plate > img, .plate > iframe{ display:block; width:100% }
.tick{ position:absolute; width:13px; height:13px; border:2px solid var(--ink); z-index:4 }
.tick.tl{ top:7px; left:7px; border-right:0; border-bottom:0 }
.tick.tr{ top:7px; right:7px; border-left:0; border-bottom:0 }
.tick.bl{ bottom:7px; left:7px; border-right:0; border-top:0 }
.tick.br{ bottom:7px; right:7px; border-left:0; border-top:0 }

/* corner caption plate */
.cap-plate{
  position:absolute; left:0; bottom:0; z-index:5;
  background:var(--ink); color:var(--paper);
  font-family:var(--font); font-weight:600; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 11px;
}

/* ===================================================================
   TOP BAR + HEADER
   =================================================================== */
.topbar{ border-bottom:2px solid var(--ink); background:var(--paper) }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:38px; flex-wrap:wrap }
.topbar span{ font-family:var(--font); font-weight:600; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted) }
.topbar a{ font-family:var(--display); font-weight:700; font-size:1rem; color:var(--ink); letter-spacing:.01em }
.topbar a:hover{ color:var(--blue) }

.header{ position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:2px solid var(--ink) }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:74px }
.brand{ display:flex; align-items:center; gap:12px }
.badge{ background:#000; border-radius:50%; padding:5px; display:grid; place-items:center; flex:none }
.badge img{ height:44px; width:auto; display:block }
.brand .bn{ display:flex; flex-direction:column; line-height:1 }
.brand .bn b{ font-family:var(--display); font-weight:800; font-size:1.14rem; color:var(--ink); text-transform:uppercase; letter-spacing:-.01em }
.brand .bn span{ font-family:var(--font); font-weight:600; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:3px }
.brand .bn .uline{ height:3px; width:34px; background:var(--blue); margin-top:5px }
.nav-links{ display:flex; align-items:center; gap:26px }
.nav-links a{ font-family:var(--display); font-weight:700; font-size:1.02rem; text-transform:uppercase; letter-spacing:.01em; color:var(--ink); transition:color .15s }
.nav-links a:hover{ color:var(--blue) }
.nav-cta{ display:flex; align-items:center; gap:14px }
.nav-phone{ font-family:var(--display); font-weight:800; font-size:1.18rem; color:var(--ink); display:inline-flex; align-items:center; gap:7px }
.nav-phone svg{ width:17px; height:17px }
.nav-phone:hover{ color:var(--blue) }
.burger{ display:none; width:46px; height:42px; border:2px solid var(--ink); align-items:center; justify-content:center }
.burger span,.burger span::before,.burger span::after{ content:""; display:block; width:20px; height:2.5px; background:var(--ink); position:relative }
.burger span::before{ position:absolute; top:-6px } .burger span::after{ position:absolute; top:6px }
body.menu-open .burger span{ background:transparent }
body.menu-open .burger span::before{ top:0; transform:rotate(45deg) }
body.menu-open .burger span::after{ top:0; transform:rotate(-45deg) }
.nav-links.mobile{ display:none }

/* ===================================================================
   SECTION SCAFFOLD
   =================================================================== */
.sec{ padding:clamp(48px,7vw,92px) 0; border-bottom:2px solid var(--ink) }
.sec.kraft{ background:var(--kraft) }
.sec-head{ margin-bottom:clamp(28px,4vw,48px) }
.sec-head h2{ font-size:clamp(1.9rem,4.6vw,3.2rem); margin-top:4px; max-width:18ch }
.sec-head p{ max-width:54ch; color:var(--body); margin-top:12px }

/* ===================================================================
   01 — HERO
   =================================================================== */
.hero{ padding:clamp(34px,5vw,68px) 0 clamp(40px,6vw,72px); border-bottom:2px solid var(--ink) }
.hero-grid{ display:grid; grid-template-columns:1.16fr .84fr; gap:clamp(26px,4vw,52px); align-items:center }
.hero h1{ font-size:clamp(2.6rem,7vw,5.6rem); line-height:.9; margin:6px 0 0 }
.hero h1 .lime{ color:var(--ink); position:relative; display:inline-block }
.hero h1 .lime::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:.08em; height:.26em; background:var(--lime); z-index:-1 }
.hero-sub{ font-size:1.16rem; color:var(--body); max-width:42ch; margin-top:20px; font-weight:400 }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px }
.spec-strip{ margin-top:26px; display:flex; flex-wrap:wrap; gap:0; border:2px solid var(--ink); width:fit-content; max-width:100% }
.spec-strip span{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:.92rem; letter-spacing:.02em; color:var(--ink); padding:9px 16px; border-right:2px solid var(--ink) }
.spec-strip span:last-child{ border-right:0 }

.hero-photo{ position:relative }
.hero-photo .plate{ aspect-ratio:4/3 }
.hero-photo .plate img{ height:100%; object-fit:cover }

/* ===================================================================
   02 — WHAT YOU GET  (line-item rows)
   =================================================================== */
.items{ border-top:2px solid var(--ink) }
.item{ display:grid; grid-template-columns:88px 1fr; gap:clamp(14px,3vw,40px); align-items:start; padding:26px 0; border-bottom:1px solid var(--hair) }
.item:last-child{ border-bottom:0 }
.item .n{ font-family:var(--display); font-weight:800; font-size:3.2rem; line-height:.8; color:var(--ink) }
.item .n .sq{ display:inline-block; width:12px; height:12px; background:var(--lime); margin-left:2px }
.item h3{ font-size:1.5rem; margin-bottom:5px }
.item p{ color:var(--body); max-width:56ch }

/* ===================================================================
   03 — THE RATE
   =================================================================== */
.rate-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:stretch }
.rate-stamp{
  position:relative; background:var(--concrete); border:3px solid var(--ink); box-shadow:var(--shadow);
  padding:clamp(22px,3vw,34px) clamp(22px,3vw,34px) clamp(24px,3vw,38px); overflow:hidden; display:flex; flex-direction:column; justify-content:center;
}
.rate-stamp::before{ /* halftone screen behind price */
  content:""; position:absolute; inset:0; background-image:var(--halftone); background-size:7px 7px;
  -webkit-mask-image:linear-gradient(115deg,#000 30%,transparent 72%); mask-image:linear-gradient(115deg,#000 30%,transparent 72%);
  opacity:.5; pointer-events:none;
}
.rate-stamp .rk{ font-family:var(--font); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--muted); position:relative }
.rate-stamp .amt{ position:relative; display:flex; align-items:flex-start; gap:4px; margin:2px 0 6px }
.rate-stamp .amt .c{ font-family:var(--display); font-weight:800; font-size:2.4rem; color:var(--lime); -webkit-text-stroke:1.5px var(--ink); margin-top:.7rem }
.rate-stamp .amt .v{ font-family:var(--display); font-weight:800; font-size:clamp(5rem,15vw,9rem); line-height:.78; color:var(--lime); -webkit-text-stroke:2.5px var(--ink); letter-spacing:-.02em }
.rate-stamp .rsub{ position:relative; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.04rem; color:var(--ink) }
.rate-stamp .fine{ position:relative; color:var(--muted); font-size:.86rem; margin-top:10px }

.spec-table{ display:flex; flex-direction:column; justify-content:center; gap:0 }
.spec-row{ display:flex; align-items:baseline; gap:.5rem; padding:11px 0; border-bottom:1px solid var(--hair); font-family:var(--display); font-weight:700; text-transform:uppercase }
.spec-row:first-child{ border-top:2px solid var(--ink) }
.spec-row .k{ color:var(--ink); font-size:1.04rem; letter-spacing:.02em }
.spec-row .lead{ flex:1; border-bottom:2px dotted var(--hair); align-self:flex-end; margin-bottom:5px; min-width:18px }
.spec-row .v{ color:var(--ink); font-size:1.04rem; letter-spacing:.02em }
.spec-row .v b{ color:var(--ink) }
.rate-cta{ margin-top:22px }

/* what goes in / fee / keep out */
.goes{ margin-top:clamp(28px,4vw,44px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); border-top:2px solid var(--ink); padding-top:26px }
.goes col, .goes .col{ display:block }
.goes h4{ font-size:1.16rem; margin-bottom:12px; display:flex; align-items:center; gap:9px }
.goes h4 .sq{ width:12px; height:12px; flex:none }
.goes .in h4 .sq{ background:var(--lime) } .goes .out h4 .sq{ background:#9c3b2e }
.goes li{ padding:6px 0 6px 20px; position:relative; color:var(--body); font-size:.98rem }
.goes .in li::before{ content:"+"; position:absolute; left:0; color:var(--ink); font-family:var(--display); font-weight:800 }
.goes .out li::before{ content:"\00d7"; position:absolute; left:0; color:#9c3b2e; font-family:var(--display); font-weight:800 }
.keepout{ grid-column:1/-1; border-top:1px solid var(--hair); padding-top:18px; margin-top:4px; color:var(--body); font-size:.95rem }
.keepout b{ font-family:var(--display); font-weight:800; text-transform:uppercase; color:var(--ink); letter-spacing:.02em }

/* ===================================================================
   04 — HOW IT WORKS
   =================================================================== */
.route{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--ink); position:relative }
.route::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--ink) }
.step{ padding:30px clamp(16px,2.4vw,30px) 8px; border-right:1px solid var(--hair); position:relative }
.step:last-child{ border-right:0 }
.step::before{ content:""; position:absolute; top:-7px; left:clamp(16px,2.4vw,30px); width:13px; height:13px; background:var(--lime); border:2px solid var(--ink) }
.step .n{ font-family:var(--display); font-weight:800; font-size:2.6rem; line-height:.9; color:var(--ink) }
.step h3{ font-size:1.5rem; margin:8px 0 6px }
.step p{ color:var(--body); font-size:.98rem; max-width:34ch }

/* ===================================================================
   05 — WHERE WE RUN
   =================================================================== */
.area-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(26px,4vw,52px); align-items:center }
.radius-big{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,5vw,3.6rem); color:var(--ink); line-height:.9; margin:6px 0 18px }
.radius-big .lime{ color:var(--lime); -webkit-text-stroke:1.5px var(--ink) }
.towns{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; border-top:2px solid var(--ink) }
.towns li{ display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--hair); font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.1rem; color:var(--ink); letter-spacing:.01em }
.towns li .sq{ width:11px; height:11px; background:var(--lime); flex:none; border:1.5px solid var(--ink) }
.towns li.home{ color:var(--ink) }
.towns li.home .sq{ background:var(--lime); box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--lime) }
.towns li.home small{ font-family:var(--font); font-weight:600; font-size:.56rem; letter-spacing:.1em; color:var(--blue); margin-left:6px }
.area-note{ margin-top:18px; color:var(--body); font-size:.96rem }
.area-note a{ color:var(--blue); font-weight:600; border-bottom:2px solid var(--lime) }

.map-frame{ position:relative }
.map-frame .plate{ padding:6px; background:var(--concrete) }
.map-frame iframe{ width:100%; height:400px; border:0; display:block; filter:grayscale(.4) sepia(.18) contrast(1.03); transition:filter .4s }
.map-frame:hover iframe, .map-frame:focus-within iframe{ filter:none }
.map-open{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-family:var(--display); font-weight:700; text-transform:uppercase; color:var(--ink); font-size:1rem }
.map-open:hover{ color:var(--blue) } .map-open .ar{ color:var(--lime); -webkit-text-stroke:.6px var(--ink) }

/* ===================================================================
   06 — FROM THE JOBS (contact sheet)
   =================================================================== */
.sheet{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:18px }
.fig{ position:relative; border:3px solid var(--ink); box-shadow:var(--shadow); overflow:hidden; cursor:pointer; background:var(--concrete) }
.fig img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.fig:hover img{ transform:scale(1.05) }
.fig.big{ grid-column:span 2; grid-row:span 2 }
.fig.tall{ grid-row:span 2 }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(22,20,15,.93); display:none; place-items:center; padding:5vw }
.lightbox.open{ display:grid }
.lightbox img{ max-width:92vw; max-height:82vh; border:3px solid var(--paper); box-shadow:10px 10px 0 rgba(0,0,0,.4) }
.lb-cap{ position:absolute; bottom:4vh; left:0; right:0; text-align:center; font-family:var(--font); font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--paper) }
.lb-btn{ position:absolute; width:52px; height:52px; background:var(--paper); border:2px solid var(--ink); display:grid; place-items:center; color:var(--ink); box-shadow:var(--shadow-sm) }
.lb-btn:hover{ background:var(--lime) }
.lb-btn svg{ width:22px; height:22px }
.lb-close{ top:4vh; right:5vw } .lb-prev{ left:4vw; top:50% } .lb-next{ right:4vw; top:50% }

/* ===================================================================
   07 — WHO YOU'RE CALLING
   =================================================================== */
.owner{ max-width:74ch }
.owner p{ font-size:clamp(1.18rem,2vw,1.5rem); line-height:1.5; color:var(--ink); font-weight:400 }
.owner .sig{ margin-top:20px; display:inline-block }
.owner .sig b{ font-family:var(--display); font-weight:800; font-size:1.5rem; text-transform:uppercase; color:var(--ink); display:block }
.owner .sig .ul{ height:3px; width:120px; background:var(--lime); margin-top:6px }
.owner .sig span{ font-family:var(--font); font-weight:600; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:block; margin-top:8px }

/* ===================================================================
   08 — FAQ
   =================================================================== */
.faq-list{ border-top:2px solid var(--ink) }
details.qa{ border-bottom:1px solid var(--hair); position:relative }
details.qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 4px 20px 18px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.18rem; color:var(--ink); position:relative }
details.qa summary::-webkit-details-marker{ display:none }
details.qa summary::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:transparent; transition:background .15s }
details.qa[open] summary::before{ background:var(--lime) }
details.qa .pm{ flex:none; width:24px; height:24px; position:relative }
details.qa .pm::before,details.qa .pm::after{ content:""; position:absolute; background:var(--ink); transition:background .15s }
details.qa .pm::before{ top:11px; left:4px; width:16px; height:2.5px }
details.qa .pm::after{ top:4px; left:11px; width:2.5px; height:16px }
details.qa[open] .pm::after{ transform:scaleY(0) }
details.qa[open] .pm::before{ background:var(--lime) }
details.qa .ans{ padding:0 18px 22px; color:var(--body); font-size:1rem; max-width:64ch }
details.qa .ans b{ color:var(--ink); font-weight:600 }

/* ===================================================================
   09 — WORK ORDER (form)
   =================================================================== */
.wo-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:start }
.wo-pitch h2{ font-size:clamp(2rem,4.4vw,3.2rem) }
.wo-pitch p{ color:var(--body); margin-top:14px; max-width:42ch }
.wo-contact{ margin-top:26px; border-top:2px solid var(--ink) }
.wo-contact a{ display:flex; align-items:center; gap:14px; padding:16px 4px; border-bottom:1px solid var(--hair) }
.wo-contact a:hover .v{ color:var(--blue) }
.wo-contact .ic{ width:40px; height:40px; border:2px solid var(--ink); display:grid; place-items:center; flex:none; color:var(--ink) }
.wo-contact .ic svg{ width:20px; height:20px }
.wo-contact .k{ font-family:var(--font); font-weight:600; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block }
.wo-contact .v{ font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--ink); text-transform:uppercase; line-height:1 }
.wo-contact .v.sm{ font-size:1rem; text-transform:none }

.wo-card{ position:relative; background:var(--concrete); border:3px solid var(--ink); box-shadow:var(--shadow); padding:clamp(22px,3vw,36px) clamp(20px,3vw,32px) clamp(24px,3vw,34px) }
.wo-tab{ display:inline-block; background:var(--ink); color:var(--paper); font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:1.04rem; padding:7px 22px 7px 14px; clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%); margin-bottom:18px }
.wo-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px }
.field{ display:flex; flex-direction:column; gap:5px }
.field.full{ grid-column:1/-1 }
.field label{ font-family:var(--font); font-weight:600; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted) }
.field label .rq{ color:var(--blue) }
.field input,.field select,.field textarea{
  font-family:var(--font); font-size:1rem; color:var(--ink); background:transparent;
  border:0; border-bottom:2px solid var(--ink); border-radius:0; padding:8px 2px; width:100%; transition:border-color .15s;
}
.field textarea{ resize:vertical; min-height:84px; border:2px solid var(--ink); padding:10px }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); opacity:.7 }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue) }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140F' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 2px center; background-size:18px; padding-right:26px }
.hp{ position:absolute; left:-9999px; opacity:0; width:0; height:0 }
.wo-submit{ margin-top:24px }
.wo-fine{ font-family:var(--font); font-size:.82rem; color:var(--muted); margin-top:14px; text-align:center }

/* ===================================================================
   FOOTER — the bottom of the ticket (only dark band)
   =================================================================== */
.footer{ background:var(--ink); color:var(--paper); position:relative; z-index:3 }
.footer .tape{ background:
  repeating-linear-gradient(90deg, var(--lime) 0 18px, transparent 18px 180px),
  repeating-linear-gradient(90deg, var(--paper) 0 17px, var(--ink) 17px 23px); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1.1fr; gap:34px; padding:clamp(38px,5vw,60px) 0 }
.footer .brand .bn b{ color:var(--paper) } .footer .brand .bn span{ color:#a89e8a }
.foot-about{ color:#c9bfa8; font-size:.92rem; max-width:34ch; margin-top:14px }
.foot-col h4{ color:var(--paper); font-size:1.04rem; margin-bottom:14px }
.foot-col li{ margin-bottom:9px }
.foot-col a,.foot-col span{ color:#c9bfa8; font-size:.94rem; font-weight:500 }
.foot-col a:hover{ color:var(--lime) }
.foot-phone{ font-family:var(--display); font-weight:800; font-size:1.9rem; color:var(--lime); -webkit-text-stroke:1px var(--paper); display:inline-block; line-height:1 }
.foot-bottom{ border-top:1px solid #38332a; padding:18px 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--font); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:#8d8473 }

/* ===================================================================
   MOBILE STICKY BAR
   =================================================================== */
.mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:none; grid-template-columns:1fr 1fr 1fr; border-top:2px solid var(--ink); background:var(--ink) }
.mobile-bar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 6px 11px; font-family:var(--display); font-weight:700; font-size:.78rem; text-transform:uppercase; color:var(--paper); border-right:1px solid #38332a }
.mobile-bar a:last-child{ border-right:0 }
.mobile-bar a svg{ width:19px; height:19px }
.mobile-bar a.call{ color:var(--lime) } .mobile-bar a.book{ background:var(--lime); color:var(--ink) }

/* ===================================================================
   REVEAL (subtle, snappy — no glow)
   =================================================================== */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease }
.reveal.in{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.06s } .reveal.d2{ transition-delay:.12s } .reveal.d3{ transition-delay:.18s }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:980px){
  .nav-links{ display:none }
  .nav-cta .nav-phone{ display:none }
  .burger{ display:flex }
  body.menu-open{ overflow:hidden }
  .nav-links.mobile{
    display:flex; position:fixed; inset:0 0 0 auto; width:min(84vw,340px); z-index:60; flex-direction:column;
    align-items:flex-start; gap:4px; padding:96px 30px 40px; background:var(--paper); border-left:2px solid var(--ink);
    transform:translateX(100%); transition:transform .25s ease;
  }
  body.menu-open .nav-links.mobile{ transform:none }
  .nav-links.mobile a{ font-size:1.7rem; padding:9px 0 }
  .nav-links.mobile .btn{ margin-top:16px; width:100% }
  .hero-grid,.rate-grid,.area-grid,.wo-grid{ grid-template-columns:1fr }
  .hero-photo{ order:-1; max-width:560px }
  .item{ grid-template-columns:62px 1fr }
  .item .n{ font-size:2.4rem }
  .route{ grid-template-columns:1fr }
  .step{ border-right:0; border-bottom:1px solid var(--hair); padding:26px 0 22px 24px }
  .step::before{ left:0; top:auto }
  .sheet{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .mobile-bar{ display:grid }
  body{ padding-bottom:58px }
}
@media (max-width:560px){
  :root{ --pad:18px }
  .goes,.towns,.wo-grid2{ grid-template-columns:1fr }
  .sheet{ grid-template-columns:1fr 1fr; grid-auto-rows:130px }
  .fig.big{ grid-column:span 2; grid-row:span 1 }
  .foot-grid{ grid-template-columns:1fr }
  .spec-strip{ width:100% }
  .spec-strip span{ flex:1; text-align:center; font-size:.78rem; padding:8px 8px }
  .topbar .wrap{ justify-content:center }
  .hero h1{ font-size:clamp(2.4rem,11vw,3.4rem) }
}