/* ---------------------------------------------------------------------------
   Get Winched Towing Port Macquarie.
   Everything on this page is taken off the round badge and the truck wrap:
   near-black base, chrome lettering, teal and violet diagonal slashes.

   Locked decisions, applied everywhere:
     theme   dark only. The badge is drawn on black and the chrome lettering
             loses its edge on a light field, so there is no light mode.
     colour  TEAL is the single interactive accent: every CTA, link, focus
             ring and icon. VIOLET is livery only: the diagonal slash stripes
             and edges that echo the truck wrap. It never sits on a button or
             on text. CHROME/silver is used for exactly one display treatment,
             the hero headline. Red appears only on a form error.
     shape   one radius, 6px, on every panel, tile, chip, input and button.
     type    Russo One for display (the blocky "GET WINCHED" lettering),
             Saira at 125% width for small wide labels ("PORT MACQUARIE"),
             Barlow for body. Emphasis is weight, never a second family.
     motion  hero entry, reveal-on-scroll via IntersectionObserver, button
             press. All of it off under prefers-reduced-motion.
     z-index 10 header, 20 mobile dock. Nothing else is layered.
--------------------------------------------------------------------------- */
:root{
  --bg:#0B0D0F; --surface:#121517; --surface-2:#191D20; --line:#23282C; --line-2:#343B41;
  --ink:#F3F5F7; --muted:#A4ACB4; --soft:#D5DAE0;
  --teal:#00A4C0; --teal-hi:#17B9D4; --teal-text:#2BC0DA; --teal-dim:rgba(0,164,192,.14);
  --violet:#4F1A8C; --violet-deep:#2E0A52;
  --err:#FF8A7A;
  --r:6px;
  --display:"Russo One",Impact,"Arial Black",sans-serif;
  --wide:"Saira",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.58;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,video{max-width:100%;display:block}
picture{display:block}
.wrap{max-width:1220px;margin:0 auto;padding:0 22px}
.ph,.ph-fill{line-height:1}
section{scroll-margin-top:88px}
:focus-visible{outline:3px solid var(--teal-hi);outline-offset:3px;border-radius:4px}

/* Type */
h1,h2,h3,.d{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1.04;letter-spacing:.005em}
h1{font-size:clamp(34px,3.7vw,54px);line-height:1.02}
h2{font-size:clamp(28px,3.4vw,46px);margin-bottom:14px}
h3{font-size:19px;line-height:1.15;letter-spacing:.01em}
p{margin:0 0 16px}
.sub{margin:0 0 36px;color:var(--muted);max-width:56ch;font-size:17.5px}
.wide{font-family:var(--wide);font-stretch:125%;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.eyebrow{margin:0 0 14px;color:var(--teal-text)}
/* Chrome. The one silver treatment on the page, kept subtle: top light, bottom steel. */
.chrome{color:#DDE2E7}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .chrome{background:linear-gradient(180deg,#FAFBFC 0%,#DCE1E6 48%,#A3ACB5 52%,#C9CFD6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
}

/* The livery slash: the diagonal teal and violet stripes off the truck wrap.
   Used three times, as an edge: under the hero, over the closing band, over the footer. */
.slash{height:9px;background:repeating-linear-gradient(115deg,var(--teal) 0 26px,transparent 26px 40px,var(--violet) 40px 70px,transparent 70px 92px)}

/* Buttons. One label per intent: the number for calling, "Text us your location" for texting. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;min-height:48px;padding:12px 22px;border-radius:var(--r);font:inherit;font-weight:700;font-size:16px;letter-spacing:.01em;text-decoration:none;border:0;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s,transform .12s}
.btn i{font-size:20px}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-call{background:var(--teal);color:var(--bg)}
.btn-call:hover{background:var(--teal-hi)}
.btn-call:focus-visible{outline-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--teal);color:var(--teal-text)}
.btn-ghost.is-done{box-shadow:inset 0 0 0 1.5px var(--teal);color:var(--teal-text)}

.bigphone{display:inline-flex;flex-direction:column;gap:3px;text-decoration:none;background:var(--teal);color:var(--bg);padding:13px 28px 15px;border-radius:var(--r);transition:background .18s,transform .12s}
.bigphone:hover{background:var(--teal-hi)}
.bigphone:active{transform:translateY(1px)}
.bigphone:focus-visible{outline-color:var(--ink)}
.bigphone small{font-family:var(--wide);font-stretch:125%;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.78}
.bigphone span{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.05;letter-spacing:.01em}

/* Preview notice, shown while this is still an unpublished preview */
.preview{background:var(--surface-2);color:var(--muted);font-size:13.5px;text-align:center;padding:10px 18px;border-bottom:1px solid var(--line)}
.preview b{color:var(--teal-text)}

/* Header: the badge and the name, nav, the number. 72px, one line. */
.top{position:sticky;top:0;z-index:10;background:rgba(11,13,15,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto;min-width:0}
.brand img{width:52px;height:52px;flex:0 0 auto}
.brand-name{display:flex;flex-direction:column;gap:3px;line-height:1}
.brand-name b{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.brand-name b em{font-style:normal;color:var(--teal-text)}
.brand-name span{font-family:var(--wide);font-stretch:125%;font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.top nav{display:flex;gap:26px;margin-left:auto;font-weight:600;font-size:15px}
.top nav a{text-decoration:none;color:var(--muted);padding:8px 0;border-bottom:2px solid transparent;transition:color .16s,border-color .16s}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--teal)}
.top .btn{padding:11px 18px;font-size:15px;flex:0 0 auto;min-height:44px}

/* Hero: copy on the left on solid black, the LandCruiser job bleeding off the right
   behind a slanted edge. The slant and its violet/teal bands are the wrap's slash. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.hero .wrap{position:relative;z-index:3;min-height:min(78vh,680px);display:flex;align-items:center;padding-top:56px;padding-bottom:64px}
/* The copy column is budgeted against the slant (46vw minus the gutter), so the headline
   and the buttons stay on solid black at every desktop width instead of crossing the bands. */
.hero-txt{max-width:min(560px,46vw - 60px)}
.hero-txt .lead{color:var(--soft);max-width:40ch;font-size:18.5px;margin:22px 0 32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.hero-cta .btn-ghost{padding:12px 18px;background:rgba(11,13,15,.6)}
.hero-cta .bigphone{padding:13px 24px 15px}
.hero-media,.hero-edge{position:absolute;top:0;bottom:0;right:0;width:54%;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}
.hero-edge{z-index:1}
.hero-edge.v{background:var(--violet);transform:translateX(-30px)}
.hero-edge.t{background:var(--teal);transform:translateX(-14px)}
.hero-media{z-index:2}
.hero-media picture{height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:38% 55%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,13,15,.78) 0%,rgba(11,13,15,.28) 32%,transparent 58%),linear-gradient(0deg,rgba(11,13,15,.55) 0%,transparent 30%)}
@media (prefers-reduced-motion:no-preference){
  .hero-txt>*{animation:rise .7s var(--ease) both}
  .hero-txt>:nth-child(2){animation-delay:.07s}.hero-txt>:nth-child(3){animation-delay:.14s}
  .hero-media{animation:fade .9s ease both}
  .hero-edge{animation:slide .9s var(--ease) both}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes slide{from{opacity:0;transform:translateX(40px)}to{opacity:1}}
  .hero-edge.v{animation-name:slide-v}.hero-edge.t{animation-name:slide-t}
  @keyframes slide-v{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(-30px)}}
  @keyframes slide-t{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(-14px)}}
}

/* Proof strip: only facts the listing supports */
.proof{background:var(--surface);border-bottom:1px solid var(--line)}
.proof .wrap{display:flex;flex-wrap:wrap;gap:0 44px;padding-top:8px;padding-bottom:8px;align-items:center}
.proof .item{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;color:var(--soft);min-height:44px}
.proof i{font-size:21px;color:var(--teal-text)}
.proof a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:4px;text-decoration-thickness:2px}
.proof a:hover{color:var(--teal-text)}

.block{padding:96px 0}
.block.tight{padding:80px 0}

/* What we haul: seven things, seven cells. Six carry a photo, one carries Johnny's own words. */
.haul .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:250px;gap:16px}
.tile{position:relative;overflow:hidden;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;isolation:isolate}
.tile picture,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,13,15,.08) 0%,rgba(11,13,15,.42) 46%,rgba(11,13,15,.92) 100%)}
.tile h3{margin-bottom:6px}
.tile p{margin:0;color:var(--soft);font-size:15px;line-height:1.45;max-width:38ch}
.tile .ico{position:absolute;top:18px;left:18px;width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r);background:rgba(11,13,15,.72);color:var(--teal-text);font-size:22px;box-shadow:inset 0 0 0 1px var(--line-2)}
.tile-big{grid-column:1/3;grid-row:1/3;padding:30px}
.tile-big h3{font-size:26px}
.tile-big p{font-size:16px;max-width:44ch}
.tile-big img{object-position:35% 60%}
.tile-wide{grid-column:1/3}
.tile-wide img{object-position:center 60%}
.tile-say{grid-column:3/5;justify-content:center;background:linear-gradient(135deg,rgba(0,164,192,.18),rgba(0,164,192,.05)),var(--surface);box-shadow:inset 0 0 0 1px rgba(0,164,192,.35)}
.tile-say::after{display:none}
.tile-say blockquote{margin:0;font-size:clamp(19px,1.7vw,23px);line-height:1.38;font-weight:500;color:var(--ink);max-width:30ch}
.tile-say blockquote::before{content:"\201C";display:block;font-family:var(--display);font-size:54px;line-height:.5;color:var(--teal-text);margin-bottom:12px}
.tile-say cite{display:block;margin-top:16px;font-style:normal;font-size:14.5px;color:var(--muted);font-weight:600}
.tile-boat img{object-position:center 45%}
.tile-kombi img{object-position:60% center}

/* Day or night: the servo clip beside the copy. The only image-plus-text split on the page. */
.night{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.night .wrap{display:grid;grid-template-columns:.78fr 1.22fr;gap:64px;align-items:center}
.night .media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:9/14;max-height:600px;width:100%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2)}
.night .media video,.night .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.night .media video{display:none}
.night .media.is-live video{display:block}
.night .media.is-live > picture{display:none}
.night .lead{color:var(--soft);font-size:18px;max-width:46ch;margin-bottom:34px}
.night ol{list-style:none;margin:0;padding:0;display:grid;gap:20px;max-width:560px}
.night li{display:flex;gap:16px;padding-left:18px;border-left:3px solid var(--teal)}
.night li i{font-size:24px;color:var(--teal-text);flex:0 0 auto;margin-top:2px}
.night b{display:block;font-size:17px;margin-bottom:3px}
.night span{color:var(--muted);font-size:15.5px}
.night .tips-h{margin:0 0 16px;font-size:15px;color:var(--muted);font-weight:600}

/* Reviews: the real number on the left, the words on the right */
.reviews .wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;align-items:start}
.score{position:sticky;top:96px}
.score .num{font-family:var(--display);font-size:clamp(84px,9vw,128px);line-height:.9;letter-spacing:0}
.score .stars{color:var(--teal-text);font-size:24px;display:flex;gap:4px;margin:14px 0 10px}
.score p{color:var(--muted);margin-bottom:22px;max-width:30ch}
.score .maplink{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:15.5px;text-decoration:none;padding:12px 18px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .16s,color .16s}
.score .maplink:hover{color:var(--teal-text);box-shadow:inset 0 0 0 1.5px var(--teal)}
.score .maplink i{font-size:19px;color:var(--teal-text)}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.quote{margin:0;padding:24px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.quote p{margin:0 0 14px;font-size:16.5px;line-height:1.5;color:var(--soft)}
.quote cite{font-style:normal;font-size:14px;color:var(--muted);font-weight:600}
.quote cite b{color:var(--ink);font-weight:700}
.quote-lead{grid-column:1/3;padding:30px;background:linear-gradient(135deg,rgba(0,164,192,.12),transparent 60%),var(--surface)}
.quote-lead p{font-size:clamp(19px,1.7vw,22px);line-height:1.42;color:var(--ink);font-weight:500}

/* Request a tow */
.request .panel{display:grid;grid-template-columns:.85fr 1.15fr;background:var(--surface);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.request .intro{padding:44px;border-right:1px solid var(--line)}
.request .intro p:not(.eyebrow){color:var(--muted);font-size:16.5px}
.request .intro ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.request .intro li{display:flex;gap:13px;color:var(--muted);font-size:15.5px;line-height:1.5}
.request .intro li i{color:var(--teal-text);font-size:20px;flex:0 0 auto;margin-top:2px}
.request form{padding:44px;display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label{font-weight:700;font-size:15px}
.field label small{font-weight:500;color:var(--muted);font-size:13.5px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;font:inherit;font-size:16px;background:var(--bg);color:var(--ink);border:1.5px solid var(--line-2);border-radius:var(--r);min-height:48px}
.field textarea{resize:vertical;min-height:84px}
.field input::placeholder,.field textarea::placeholder{color:#8A939C;opacity:1}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal)}
.field input[aria-invalid="true"]{border-color:var(--err)}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:42px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.loc-row{display:flex;gap:10px;flex-wrap:wrap}
.loc-row input{flex:1 1 240px}
.loc-row .btn{flex:0 0 auto;padding:12px 18px;font-size:15px}
.field-msg{margin:0;font-size:14px;color:var(--muted)}
.field-msg.err{color:var(--err)}
.field-msg.ok{color:var(--teal-text)}
.field-msg[hidden]{display:none}
.form-actions{display:flex;gap:12px;flex-wrap:wrap}
.sms-out{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:14px}
.sms-out[hidden]{display:none}
.sms-out p{margin:0;color:var(--muted);font-size:15px}
.sms-out pre{margin:0;padding:16px;background:var(--bg);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2);white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;color:var(--ink)}

/* Areas: the region in display type, suburbs as chips */
.areas{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.areas .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.areas .region{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.2vw,28px);color:var(--teal-text);margin-bottom:14px;line-height:1.1}
.areas p{color:var(--muted);max-width:42ch}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.chips li{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:var(--r);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2);font-weight:600;font-size:15.5px}
.chips i{color:var(--teal-text);font-size:17px}
.chips li.home{box-shadow:inset 0 0 0 1.5px var(--teal)}
.chips li.home small{font-weight:500;color:var(--muted);font-size:13px}

/* FAQ */
.faq .inner{max-width:860px}
.faq details{background:var(--surface);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:12px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;padding:20px 24px;font-weight:700;font-size:17px;list-style:none;border-radius:var(--r)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{color:var(--teal-text);font-size:21px;flex:0 0 auto;transition:transform .22s}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 24px 22px;color:var(--muted);font-size:16.5px;max-width:64ch}

/* Closing band: the hook, the badge, the number */
.close{position:relative;isolation:isolate;overflow:hidden;padding:88px 0 96px;background:var(--bg)}
.close > picture{position:absolute;inset:0;z-index:-2}
.close > picture img{width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.42}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,13,15,.96) 0%,rgba(11,13,15,.82) 50%,rgba(11,13,15,.55) 100%)}
.close .wrap{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.close .badge-wrap{display:flex;align-items:center;gap:34px}
.close .badge{width:184px;height:184px;flex:0 0 auto}
.close p{margin:8px 0 0;color:var(--soft);max-width:44ch}

footer{background:var(--surface);padding:52px 0 44px;font-size:15px;color:var(--muted)}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;align-items:start}
footer .brand{margin-bottom:16px}
footer p{margin:0 0 6px}
footer a{color:var(--ink);text-decoration:none;font-weight:600}
footer a:hover{color:var(--teal-text)}

/* Mobile dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));background:rgba(11,13,15,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.dock .btn-call{flex:1}
.dock .btn-ghost{flex:0 0 56px;padding:12px 0}

/* Reveal on scroll. The class is only added by JS, so a failed script hides nothing. */
@media (prefers-reduced-motion:no-preference){
  .js-rv .rv{opacity:0;transform:translateY(20px)}
  .js-rv .rv.in{opacity:1;transform:none;transition:opacity .62s var(--ease),transform .62s var(--ease)}
  .js-rv .rv.d1.in{transition-delay:.07s}
  .js-rv .rv.d2.in{transition-delay:.14s}
  .js-rv .rv.d3.in{transition-delay:.21s}
}

@media (max-width:1040px){
  .top nav{display:none}
  .hero .wrap{min-height:0;padding-top:48px;padding-bottom:56px}
  .hero-media,.hero-edge{width:50%}
  .haul .grid{grid-template-columns:1fr 1fr;grid-auto-rows:240px}
  .tile-big{grid-column:1/3;grid-row:auto;min-height:300px}
  .tile-wide,.tile-say{grid-column:1/3}
  .night .wrap{grid-template-columns:1fr;gap:36px}
  .night .media{max-width:440px;max-height:none;aspect-ratio:4/5}
  .reviews .wrap{grid-template-columns:1fr;gap:36px}
  .score{position:static}
  .request .panel{grid-template-columns:1fr}
  .request .intro{border-right:0;border-bottom:1px solid var(--line)}
  .areas .wrap{grid-template-columns:1fr;gap:34px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .preview{font-size:12.5px;padding:8px 16px;line-height:1.45}
  .top .wrap{height:64px;gap:14px}
  .brand img{width:44px;height:44px}
  .brand-name b{font-size:15px}
  .brand-name span{font-size:9px;letter-spacing:.16em}
  .top .btn{padding:0;width:44px;min-height:44px;margin-left:auto}
  .top .btn-text{display:none}
  /* Phone: the photo goes on top, full bleed, and the copy sits under it on solid black.
     The slant is kept, now on the photo's bottom edge. */
  .hero .wrap{display:block;padding-top:0;padding-bottom:40px}
  .hero-media,.hero-edge{position:relative;width:calc(100% + 44px);margin:0 -22px;aspect-ratio:16/10.5;clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}
  .hero-edge{display:none}
  .hero-media::after{background:linear-gradient(180deg,rgba(11,13,15,.1) 0%,transparent 40%,rgba(11,13,15,.72) 100%)}
  .hero-media img{object-position:30% 60%}
  .hero-txt{margin-top:-10px;max-width:none}
  .hero-cta .bigphone{padding:13px 24px 15px}
  h1{font-size:clamp(26px,7.6vw,36px)}
  .hero-txt .lead{font-size:17px;margin:14px 0 24px}
  .hero-cta{gap:12px;flex-direction:column}
  .bigphone{width:100%;align-items:center;text-align:center}
  .hero-cta .btn-ghost{width:100%}
  .proof .wrap{gap:0 24px;padding-top:6px;padding-bottom:6px}
  .proof .item{min-height:40px}
  .proof .item{font-size:14.5px}
  .block{padding:64px 0}
  .block.tight{padding:56px 0}
  .haul .grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .tile{min-height:228px;padding:20px}
  .tile-big,.tile-wide,.tile-say{grid-column:auto;grid-row:auto}
  .tile-big{min-height:340px;padding:22px}
  .tile-big h3{font-size:22px}
  .tile-say{min-height:0;padding:26px 22px}
  .night .media{max-width:none;aspect-ratio:4/4.6}
  .quotes{grid-template-columns:1fr}
  .quote-lead{grid-column:auto;padding:24px}
  .request .intro,.request form{padding:26px 22px}
  .row2{grid-template-columns:1fr}
  .form-actions .btn{width:100%}
  .close{padding:60px 0 68px}
  .close .wrap{gap:30px}
  .close .badge-wrap{flex-direction:column;align-items:flex-start;gap:22px}
  .close .badge{width:144px;height:144px}
  .close .bigphone{width:100%;align-items:center}
  footer .wrap{grid-template-columns:1fr;gap:22px}
  footer p a{display:inline-block;padding:10px 0}
  .dock{display:flex}
  main{padding-bottom:0}
  footer{padding-bottom:calc(44px + 74px + env(safe-area-inset-bottom))}
}