/* Grab Hire Guildford — the signature module each inner page carries. Shared tokens come from
   base.css; the page furniture (hero, band, steps, FAQ, contact) from site.css. */

/* ---------- shared bits: range sliders, chips, verdicts, maps, the yellow marker ---------- */
.rc-range{display:block; margin-bottom:16px}
.rc-range > span{display:flex; justify-content:space-between; align-items:baseline; font-weight:600; color:#fff; margin-bottom:10px; font-size:1rem}
.rc-range output{font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--yellow); line-height:1}
.rc-range input[type="range"],.fs-range input[type="range"]{-webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; cursor:pointer; margin:0}
.rc-range input[type="range"]::-webkit-slider-runnable-track,.fs-range input[type="range"]::-webkit-slider-runnable-track{height:6px; background:rgba(255,255,255,.22); border-radius:3px}
.rc-range input[type="range"]::-webkit-slider-thumb,.fs-range input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:30px; height:30px; border-radius:50%; background:var(--yellow); border:4px solid var(--navy); margin-top:-12px; box-shadow:0 0 0 2px var(--yellow)}
.rc-range input[type="range"]::-moz-range-track,.fs-range input[type="range"]::-moz-range-track{height:6px; background:rgba(255,255,255,.22); border-radius:3px}
.rc-range input[type="range"]::-moz-range-thumb,.fs-range input[type="range"]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--yellow); border:4px solid var(--navy); box-shadow:0 0 0 2px var(--yellow)}
.rc-chips{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:22px}
.rc-chip{width:100%; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font-weight:500; font-size:.92rem; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)}
.rc-chip:hover{border-color:var(--yellow); color:var(--yellow)}
.rc-verdict{border-left:4px solid var(--yellow); padding:6px 0 6px 20px; transition:border-color .3s var(--ease)}
.rc-verdict b{display:block; font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:#fff; margin-bottom:6px; line-height:1.1}
.is-out .rc-verdict{border-color:var(--blue-3)}
.rc-verdict p{font-size:1rem; color:rgba(255,255,255,.8)}
.map-box{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--grey-200); aspect-ratio:4/3; max-width:100%}
.map-box iframe{display:block; width:100%; height:100%; border:0}
.on-dark .map-box{border-color:var(--line-dark)}
.mk{background-image:linear-gradient(var(--yellow),var(--yellow)); background-repeat:no-repeat; background-size:0% .42em; background-position:0 92%; padding:0 .08em; margin:0 -.08em; transition:background-size 1s var(--ease-out) .35s; font-style:normal; color:inherit}
.js [data-reveal].in .mk,.js.no-reveal .mk{background-size:100% .42em}
@media (prefers-reduced-motion:reduce){.mk{background-size:100% .42em}}
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)); transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease)}
[data-tilt].tilting{transition:transform .08s linear, border-color .35s var(--ease), box-shadow .35s var(--ease)}

/* ---------- grab hire: materials wall ---------- */
.mw{background:#fff}
.mw-in{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:stretch}
.mw-chips{border:0; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mw-chip{position:relative; display:block; cursor:pointer}
.mw-chip input{position:absolute; opacity:0; width:1px; height:1px}
.mw-chip span{display:flex; width:100%; align-items:center; gap:10px; min-height:48px; padding:0 16px; white-space:nowrap; border:1px solid var(--line); border-radius:999px; font-weight:500; color:var(--ink); background:#fff; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease)}
.mw-chip span svg{color:var(--vivid)}
.mw-chip.no span svg{color:#C0392B}
.mw-chip.sep span svg{color:var(--yellow-ink)}
.mw-chip:hover span{border-color:var(--vivid); transform:translateY(-2px)}
.mw-chip input:checked + span{background:var(--navy); border-color:var(--navy); color:#fff}
.mw-chip input:checked + span svg{color:var(--yellow)}
.mw-chip input:focus-visible + span{outline:3px solid var(--yellow); outline-offset:2px}
.mw-panels{display:grid; gap:12px}
.mw-panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start}
.is-live .mw-panel{display:none}
.is-live .mw-panel.on{display:flex; animation:d2in .45s var(--ease) both}
.mw-badge{display:inline-block; padding:6px 12px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px}
.mw-badge.yes{background:#DDF3E4; color:#0F5F32}
.mw-badge.sep{background:#FFF1BF; color:var(--yellow-ink)}
.mw-badge.no{background:#FBE0DC; color:#8E2418}
.mw-panel h3{font-size:1.5rem; margin-bottom:8px}
.mw-panel p{font-size:1rem}
@media (max-width:900px){.mw-in{grid-template-columns:1fr}}
@media (max-width:560px){.mw-chips{grid-template-columns:1fr}}

/* ---------- grab hire: grab vs skip ---------- */
.vs{background:var(--grad-dark)}
.vs-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,80px); align-items:start}
.vs .head{margin-bottom:0}
.vs-seg{display:none}
.vs-table table{width:100%; border-collapse:collapse; table-layout:fixed}
.vs-c1{width:30%} .vs-c2{width:36%} .vs-c3{width:34%}
.vs-table th,.vs-table td{padding:18px 16px; text-align:left; border-bottom:1px solid var(--line-dark); vertical-align:middle; font-size:1rem; line-height:1.35}
.vs-table thead th{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); font-weight:600; padding-top:0; padding-bottom:14px}
.vs-table tbody th{font-weight:600; color:#fff}
.vs-table td:nth-child(2){background:rgba(255,255,255,.07)}
.vs-table thead th:nth-child(2){background:rgba(255,255,255,.07); border-radius:10px 10px 0 0}
.vs-table tbody tr:last-child td:nth-child(2){border-radius:0 0 10px 10px}
.vs-yes,.vs-no{display:flex; align-items:flex-start; gap:10px}
.vs-yes{color:#fff; font-weight:600}
.vs-no{color:rgba(255,255,255,.66)}
.vs-yes i,.vs-no i{flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:0}
.vs-yes i{background:var(--yellow); color:var(--navy)}
.vs-no i{background:rgba(255,255,255,.12); color:rgba(255,255,255,.7)}
@media (max-width:1280px){.vs-in{grid-template-columns:1fr} .vs .head{margin-bottom:28px}}
@media (max-width:700px){
  .vs-seg{display:flex; gap:6px; padding:4px; background:rgba(255,255,255,.1); border-radius:999px; margin-bottom:18px}
  .vs-seg button{flex:1; min-height:44px; border:0; border-radius:999px; background:transparent; color:rgba(255,255,255,.75); font-weight:600; cursor:pointer}
  .vs-seg button.is-on{background:var(--yellow); color:var(--navy)}
  .vs-table.show-2 td:nth-child(3),.vs-table.show-2 th:nth-child(3){display:none}
  .vs-table.show-3 td:nth-child(2),.vs-table.show-3 th:nth-child(2){display:none}
  .vs-table th,.vs-table td{padding:14px 10px}
  .vs-c1{width:40%} .vs-c2{width:60%} .vs-c3{width:60%}
}

/* ---------- grab lorry hire: fleet cards + reach checker ---------- */
.fl{background:linear-gradient(180deg,#fff,var(--sky))}
.fl-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,36px)}
.fl-card{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -40px rgba(10,31,68,.4)}
.fl-photo{position:relative; aspect-ratio:16/10; overflow:hidden}
.fl-photo img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.fl-card:hover .fl-photo img{transform:scale(1.04)}
.fl-tag{position:absolute; left:18px; top:18px; padding:8px 14px; border-radius:999px; background:var(--yellow); color:var(--navy); font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase}
.fl-body{padding:clamp(20px,2.6vw,32px)}
.fl-body h3{font-size:1.6rem; margin-bottom:14px}
.fl-body ul{display:grid}
.fl-body li{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); font-size:.96rem}
.fl-body li span{color:var(--mute)}
.fl-body li b{color:var(--ink); text-align:right}
@media (max-width:900px){.fl-grid{grid-template-columns:1fr}}
.rc{background:var(--navy); position:relative; overflow:hidden}
.rc::after{content:""; position:absolute; left:-20%; bottom:-30%; width:50vw; height:50vw; max-width:700px; max-height:700px; background:radial-gradient(closest-side,rgba(255,194,14,.14),transparent 70%); pointer-events:none}
.rc-in{position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:center}
.rc-copy h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px; line-height:1.05}
.rc-copy .lead{margin-bottom:30px; font-size:1.1rem}
.rc-draw{background:var(--navy-2); border:1px solid var(--line-dark); border-radius:var(--radius); padding:clamp(14px,2vw,28px)}
.reach-svg{width:100%; height:auto}
.reach-svg [data-reach-arm]{transition:d .35s var(--ease)}
.is-out .reach-svg [data-reach-pile] path{fill:#8A94A6; opacity:.55}
.is-out .reach-svg [data-reach-bucket]{opacity:.7}
@media (max-width:1000px){.rc-in{grid-template-columns:1fr}}

/* ---------- muck away: density ladder + spoil flow ---------- */
.dl{background:#fff}
.dl-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,80px); align-items:start}
.dl h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px; line-height:1.05}
.dl-in > div > p{font-size:1.04rem; margin-bottom:22px}
.dl-seg{display:flex; gap:6px; padding:4px; background:var(--paper); border:1px solid var(--line); border-radius:999px}
.dl-seg button{flex:1; min-height:44px; border:0; border-radius:999px; background:transparent; color:var(--mute); font-weight:600; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease)}
.dl-seg button.is-on{background:var(--navy); color:#fff}
.dl-list{display:grid; gap:10px}
.dl-list li{display:grid; grid-template-columns:150px 1fr 84px 120px; gap:14px; align-items:center; padding:10px 14px; border-radius:12px; background:var(--paper); border:1px solid var(--line); transition:border-color .3s var(--ease), background .3s var(--ease)}
.dl-list li:hover{border-color:var(--vivid); background:#fff}
.dl-name{font-weight:600; color:var(--ink); font-size:.96rem}
.dl-bar{position:relative; height:14px; border-radius:999px; background:var(--grey-200); overflow:hidden}
.dl-bar i{position:absolute; left:0; top:0; bottom:0; width:calc(var(--v) * 100%); border-radius:999px; background:linear-gradient(90deg,var(--vivid),var(--yellow)); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s var(--ease-out) .15s}
.js .dl-list li.in .dl-bar i,.js.no-reveal .dl-bar i{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.dl-bar i{transform:scaleX(1)}}
.dl-t{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.05rem; text-align:right; font-variant-numeric:tabular-nums}
.dl-load{font-size:.86rem; color:var(--mute); text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:1000px){.dl-in{grid-template-columns:1fr}}
@media (max-width:560px){.dl-list li{grid-template-columns:1fr 70px; grid-template-areas:"name t" "bar bar" "load load"; row-gap:6px} .dl-name{grid-area:name} .dl-bar{grid-area:bar} .dl-t{grid-area:t} .dl-load{grid-area:load; text-align:left}}
.sf{background:var(--paper)}
.sf-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:sf}
.sf-flow li{position:relative; padding:28px 34px 28px 30px; background:#fff; border:1px solid var(--line); clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%); margin-right:-14px}
.sf-flow li:first-child{clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); border-radius:12px 0 0 12px}
.sf-flow li:last-child{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 22px 50%); border-radius:0 12px 12px 0; margin-right:0}
.sf-flow li:nth-child(odd){background:var(--sky)}
.sf-n{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--yellow); color:var(--navy); font-family:var(--font-display); font-weight:800; margin-bottom:12px}
.sf-flow h3{font-size:1.15rem; margin-bottom:8px; min-height:2.4em; display:flex; align-items:flex-end}
.sf-flow p{font-size:.92rem}
@media (max-width:1000px){.sf-flow{grid-template-columns:1fr 1fr; gap:14px} .sf-flow li,.sf-flow li:first-child,.sf-flow li:last-child{clip-path:none; margin:0; border-radius:12px} .sf-flow h3{min-height:0}}
@media (max-width:560px){.sf-flow{grid-template-columns:1fr}}

/* ---------- soil removal: estimator + take list ---------- */
.de{background:linear-gradient(180deg,var(--sky),#fff)}
.de-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:start}
.de h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px; line-height:1.05}
.de-in > div > p{font-size:1.04rem}
.de-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(22px,3vw,36px); display:grid; gap:16px; box-shadow:0 30px 60px -40px rgba(10,31,68,.4)}
.de-card .field input,.de-card .field select{border-radius:12px}
.de-label{font-size:.88rem; font-weight:600; letter-spacing:.04em; color:var(--ink); margin-bottom:-8px}
.de-chips{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.de-chip{width:100%; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:500; font-size:.92rem; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)}
.de-chip b{font-weight:700; color:var(--vivid)}
.de-chip:hover{border-color:var(--vivid)}
.de-chip.is-on{background:var(--navy); border-color:var(--navy); color:#fff}
.de-chip.is-on b{color:var(--yellow)}
.de-out{background:var(--grad-dark); color:#fff; border-radius:var(--radius); padding:20px 22px}
.de-out b{display:block; font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1; color:var(--yellow); margin-bottom:8px}
.de-out b span.pop{animation:vcpop .4s var(--ease)}
.de-out p{font-size:.96rem; color:rgba(255,255,255,.86)}
@media (max-width:1000px){.de-in{grid-template-columns:1fr}}
@media (max-width:460px){.de-chips{grid-template-columns:1fr 1fr}}
.tl{background:#fff}
.tl-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,36px)}
.tl-col{border-radius:18px; padding:clamp(22px,3vw,36px); border:1px solid var(--line)}
.tl-col.yes{background:linear-gradient(180deg,#F1FAF4,#fff)}
.tl-col.no{background:linear-gradient(180deg,#FDF2F0,#fff)}
.tl-col h3{font-size:1.4rem; margin-bottom:16px}
.tl-col ul{display:grid; gap:10px}
.tl-col li{display:flex; align-items:center; gap:12px; font-weight:500; color:var(--ink)}
.tl-col li svg{flex:none; width:30px; height:30px; padding:6px; border-radius:50%}
.tl-col.yes li svg{background:#DDF3E4; color:#0F5F32}
.tl-col.no li svg{background:#FBE0DC; color:#8E2418}
.tl-col .small{margin-top:18px}
@media (max-width:760px){.tl-grid{grid-template-columns:1fr}}

/* ---------- cheap grab hire: fill slider + price factors ---------- */
.fs{background:var(--grad-dark)}
.fs-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center}
.fs-copy h2{font-size:clamp(2rem,3.6vw,3.1rem); margin-bottom:18px; line-height:1.06}
.fs-copy .lead{margin-bottom:28px; font-size:1.08rem}
.fs-range{display:block; margin-bottom:16px}
.fs-range > span{display:flex; justify-content:space-between; align-items:baseline; font-weight:600; color:#fff; margin-bottom:10px}
.fs-range output{font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--yellow); line-height:1}
.fs-verdict{border-left:4px solid var(--yellow); padding:6px 0 6px 20px}
.fs-verdict b{display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:6px}
.fs-verdict p{color:rgba(255,255,255,.8); font-size:1rem}
.fs-draw{background:rgba(255,255,255,.06); border:1px solid var(--line-dark); border-radius:var(--radius); padding:clamp(14px,2vw,28px)}
.fs-draw svg{width:100%; height:auto}
.fs-draw [data-fs-fill]{transition:y .45s var(--ease-out), height .45s var(--ease-out)}
@media (max-width:1000px){.fs-in{grid-template-columns:1fr}}
.pf{background:#fff}
.pf-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,80px); align-items:start}
.pf .head{margin-bottom:0}
.pf-list{display:grid; gap:0}
.pf-list li{display:flex; gap:22px; padding:22px 0; border-top:1px solid var(--line); align-items:flex-start}
.pf-list li:last-child{border-bottom:1px solid var(--line)}
.pf-n{flex:none; font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:var(--vivid); line-height:1; width:2.2em; letter-spacing:-.03em}
.pf-list h3{font-size:1.2rem; margin-bottom:6px}
.pf-list p{font-size:.96rem}
@media (max-width:1000px){.pf-in{grid-template-columns:1fr}}

/* ---------- mini grab: fit checker ---------- */
.fc{background:var(--navy); position:relative; overflow:hidden}
.fc::after{content:""; position:absolute; right:-20%; top:-30%; width:50vw; height:50vw; max-width:700px; max-height:700px; background:radial-gradient(closest-side,rgba(59,123,255,.25),transparent 70%); pointer-events:none}
.fc-in{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center}
.fc-copy h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px; line-height:1.05}
.fc-copy .lead{margin-bottom:28px; font-size:1.06rem}
.fc-draw{background:var(--navy-2); border:1px solid var(--line-dark); border-radius:var(--radius); padding:clamp(14px,2vw,28px)}
.fc-draw svg{width:100%; height:auto; max-height:420px}
.fc-draw [data-fit-road],.fc-draw [data-fit-edge-l],.fc-draw [data-fit-edge-r]{transition:x .35s var(--ease), width .35s var(--ease), x1 .35s var(--ease), x2 .35s var(--ease)}
.fc-draw [data-fit-mini],.fc-draw [data-fit-big]{transition:opacity .35s var(--ease)}
.fc-in.fits-none [data-fit-mini]{opacity:.35}
.fc-in.fits-both [data-fit-big]{opacity:1}
@media (max-width:1000px){.fc-in{grid-template-columns:1fr}}

/* ---------- site clearance: phase tabs ---------- */
.pt{background:linear-gradient(180deg,#fff,var(--sky))}
.pt-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,80px); align-items:start}
.pt .head{margin-bottom:0}
.pt-list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.pt-list button{min-height:46px; padding:0 20px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:600; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease)}
.pt-list button:hover{border-color:var(--vivid); transform:translateY(-2px)}
.pt-list button[aria-selected="true"]{background:var(--vivid); border-color:var(--vivid); color:#fff; box-shadow:0 12px 24px -12px rgba(26,95,230,.7)}
.pt-panel{background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(22px,3vw,36px); animation:d2in .4s var(--ease) both}
.pt-panel + .pt-panel{margin-top:12px}
.pt-panel h3{font-size:1.5rem; margin-bottom:10px}
.pt-panel p{font-size:1rem; margin-bottom:18px}
.pt-panel dl{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0; padding-top:18px; border-top:1px solid var(--line)}
.pt-panel dt{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-weight:600; margin-bottom:6px}
.pt-panel dd{margin:0; font-weight:600; color:var(--ink)}
@media (prefers-reduced-motion:reduce){.pt-panel{animation:none}}
@media (max-width:1000px){.pt-in{grid-template-columns:1fr}}

/* ---------- aggregates: product cards + round trip ---------- */
.pc{background:#fff}
.pc-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.6vw,20px)}
.pc-grid li{position:relative; background:linear-gradient(180deg,var(--sky),#fff); border:1px solid var(--line); border-radius:16px; padding:clamp(18px,2vw,26px); overflow:hidden; display:flex; flex-direction:column; gap:8px}
.pc-grid li::before{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,var(--vivid),var(--yellow))}
.pc-use{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vivid); font-weight:700}
.pc-grid h3{font-size:1.25rem; min-height:2.5em; display:flex; align-items:flex-end}
.pc-grid p{font-size:.9rem; flex:1}
.pc-t{display:inline-block; align-self:flex-start; margin-top:6px; padding:6px 10px; border-radius:999px; background:var(--navy); color:#fff; font-size:.78rem; font-weight:600}
@media (max-width:1100px){.pc-grid{grid-template-columns:repeat(3,1fr)} .pc-grid li:nth-child(4),.pc-grid li:nth-child(5){grid-column:span 1}}
@media (max-width:700px){.pc-grid{grid-template-columns:1fr} .pc-grid h3{min-height:0}}
.rt{background:var(--grad-dark)}
.rt-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:center}
.rt h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px; line-height:1.05}
.rt .lead{margin-bottom:26px}
.rt-stats{display:flex; gap:clamp(20px,4vw,48px)}
.rt-stats b{display:flex; align-items:baseline; gap:4px; font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,4vw,3.4rem); color:var(--yellow); line-height:1}
.rt-stats b .u{font-size:.4em; color:#fff; font-family:var(--font-body); font-weight:600}
.rt-stats li > span{display:block; color:rgba(255,255,255,.75); font-size:.94rem}
.rt-draw{background:rgba(255,255,255,.06); border:1px solid var(--line-dark); border-radius:var(--radius); padding:clamp(14px,2vw,28px)}
.rt-draw svg{width:100%; height:auto}
.rt-lorry{offset-path:path('M70 190 C160 60 360 60 450 190 C360 230 160 230 70 190 Z'); offset-rotate:auto; animation:rtgo 9s linear infinite}
@keyframes rtgo{to{offset-distance:100%}}
@media (prefers-reduced-motion:reduce){.rt-lorry{animation:none; offset-distance:50%}}
@media (max-width:1000px){.rt-in{grid-template-columns:1fr}}

/* ---------- emergency: hours strip + ready checklist ---------- */
.hs{background:#fff}
.hs-strip{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:14px; padding-top:34px}
.hs-strip::before{content:""; position:absolute; left:0; right:0; top:14px; height:4px; border-radius:2px; background:linear-gradient(90deg,var(--sky),var(--vivid),var(--navy))}
.hs-now{position:absolute; top:6px; left:calc(var(--now,0) * 100%); width:20px; height:20px; border-radius:50%; background:var(--yellow); border:4px solid #fff; box-shadow:0 0 0 2px var(--yellow); transform:translateX(-50%); display:none}
.hs-strip.has-now .hs-now{display:block}
.hs-strip li{position:relative; padding:16px; border-radius:12px; background:var(--paper); border:1px solid var(--line); transition:transform .3s var(--ease), border-color .3s var(--ease)}
.hs-strip li::before{content:""; position:absolute; left:16px; top:-26px; width:12px; height:12px; border-radius:50%; background:var(--vivid); border:3px solid #fff; box-shadow:0 0 0 1px var(--vivid)}
.hs-strip li:hover{transform:translateY(-4px); border-color:var(--vivid)}
.hs-strip li.is-now{border-color:var(--yellow); background:#FFF8DF}
.hs-strip b{display:block; font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:var(--ink); margin-bottom:6px}
.hs-strip p{font-size:.9rem}
@media (max-width:1000px){.hs-strip{grid-template-columns:repeat(3,1fr)} .hs-strip::before,.hs-now{display:none !important} .hs-strip li::before{display:none} .hs-strip{padding-top:0}}
@media (max-width:560px){.hs-strip{grid-template-columns:1fr}}
.rd{background:var(--grad-dark)}
.rd-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:center}
.rd h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px; line-height:1.05}
.rd .lead{margin-bottom:22px}
.rd-count{font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:#fff; margin-bottom:22px}
.rd-count b{color:var(--yellow); font-size:1.6em}
.rd-list{display:grid; gap:12px}
.rd-list label{display:flex; align-items:flex-start; gap:16px; padding:18px 20px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease)}
.rd-list label:hover{border-color:var(--yellow)}
.rd-list input{position:absolute; opacity:0; width:1px; height:1px}
.rd-box{flex:none; width:30px; height:30px; border-radius:8px; border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; color:transparent; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)}
.rd-list input:checked ~ .rd-box{background:var(--yellow); border-color:var(--yellow); color:var(--navy)}
.rd-list input:focus-visible ~ .rd-box{outline:3px solid var(--yellow); outline-offset:2px}
.rd-list input:checked ~ .rd-text b{text-decoration:line-through; opacity:.7}
.rd-text b{display:block; color:#fff; font-weight:600}
.rd-text small{display:block; color:rgba(255,255,255,.7); font-size:.9rem}
@media (max-width:1000px){.rd-in{grid-template-columns:1fr}}

/* ---------- area pages ---------- */
.dg{background:#fff}
.dg-in{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,3vw,44px); align-items:start}
.dg-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.dg-grid li{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px 20px 20px 56px; position:relative}
.dg-grid li:hover{border-color:var(--vivid); box-shadow:0 18px 36px -24px rgba(26,95,230,.45)}
.dg-pin{position:absolute; left:16px; top:20px; width:28px; height:28px; border-radius:50%; background:var(--yellow); color:var(--navy); display:flex; align-items:center; justify-content:center}
.dg-grid h3{font-size:1.08rem; margin-bottom:6px}
.dg-grid p{font-size:.9rem}
.dg-map .map-box{position:sticky; top:calc(var(--hdr) + var(--topbar) + 24px); aspect-ratio:3/4}
@media (max-width:1000px){.dg-in{grid-template-columns:1fr} .dg-map .map-box{position:static; aspect-ratio:4/3}}
@media (max-width:560px){.dg-grid{grid-template-columns:1fr}}
.ag{background:linear-gradient(180deg,var(--sky),#fff)}
.ag-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,80px); align-items:start}
.ag .head{margin-bottom:0}
.ag .head .map-box{margin-top:22px}
.ag-list{display:grid; gap:12px}
.ag-list li{display:grid; grid-template-columns:1fr auto; gap:6px 18px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:14px; align-items:center}
.ag-list li > p{grid-column:1/-1; font-size:.94rem; padding-top:8px; border-top:1px solid var(--line)}
.ag-where h3{font-size:1.15rem; margin-bottom:2px}
.ag-badge{padding:7px 12px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.ag-badge.mini{background:var(--yellow); color:var(--navy)}
.ag-badge.big{background:var(--navy); color:#fff}
@media (max-width:1000px){.ag-in{grid-template-columns:1fr}}
.gg{background:#fff}
.gg-in{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,3vw,44px); align-items:start}
.gg-strata{display:grid; gap:10px}
.gg-strata li{position:relative; padding:20px 22px 20px 26px; border-radius:14px; background:var(--paper); border:1px solid var(--line); border-left:8px solid var(--vivid)}
.gg-strata li:nth-child(1){border-left-color:#E0B252}
.gg-strata li:nth-child(2){border-left-color:#B08850}
.gg-strata li:nth-child(3){border-left-color:var(--vivid)}
.gg-strata li:nth-child(4){border-left-color:#5D8F3E}
.gg-t{position:absolute; right:16px; top:16px; padding:5px 10px; border-radius:999px; background:var(--navy); color:#fff; font-size:.76rem; font-weight:600}
.gg-strata h3{font-size:1.15rem; margin-bottom:6px; padding-right:110px}
.gg-strata p{font-size:.92rem}
@media (max-width:1000px){.gg-in{grid-template-columns:1fr}}
.ro{background:linear-gradient(180deg,#fff,var(--sky))}
.ro-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:start}
.ro h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px; line-height:1.05}
.ro-in > div > p{font-size:1.04rem; margin-bottom:22px}
.ro-list{display:grid; gap:12px}
.ro-list li{display:flex; gap:16px; align-items:flex-start; padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:14px}
.rt-sign{flex:none; width:36px; height:36px; border-radius:8px; background:var(--vivid); color:#fff; display:flex; align-items:center; justify-content:center}
.ro-list h3{font-size:1.1rem; margin-bottom:4px}
.ro-list p{font-size:.92rem}
@media (max-width:1000px){.ro-in{grid-template-columns:1fr}}
.ty-list{display:grid; gap:8px}
.ty-list li{position:relative; padding-left:22px; font-size:.94rem; color:var(--body)}
.ty-list li::before{content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:3px; background:var(--yellow); transform:rotate(45deg)}

/* ---------- about: fleet rail + statement ---------- */
.fr{background:var(--paper); overflow:hidden}
.fr-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px}
.fr-head .head{margin-bottom:0}
.fr-nav{display:flex; gap:8px; margin-bottom:6px}
.fr-btn{width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease)}
.fr-btn:hover{background:var(--navy); color:#fff}
.fr-rail{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:clamp(28px,4vw,48px) var(--gutter) 6px; margin:0 calc(-1 * var(--gutter)); cursor:grab; scrollbar-width:none}
.fr-rail::-webkit-scrollbar{display:none}
.fr-rail.dragging{cursor:grabbing; scroll-snap-type:none}
.fr-shot{flex:0 0 400px; scroll-snap-align:start; margin:0}
.fr-shot img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; pointer-events:none}
.fr-shot figcaption{font-size:.88rem; color:var(--mute); margin-top:10px}
@media (max-width:700px){.fr-shot{flex-basis:78vw}}
.st{background:var(--navy)}
.st-text{font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,3.4vw,3rem); line-height:1.15; letter-spacing:-.02em; color:rgba(255,255,255,.5); max-width:22ch}
.st-text .fw{transition:color .35s var(--ease)}
.st-text .fw.lit{color:#fff}
.st-text.fill-live{color:rgba(255,255,255,.5)}

/* ---------- contact: what to send ---------- */
.sc{background:linear-gradient(180deg,#fff,var(--sky))}
.sc-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:start}
.sc .head{margin-bottom:0}
.sc .head .btn{margin-top:8px}
.sc-list{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.sc-list li{display:flex; gap:14px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:14px}
.sc-n{flex:none; width:36px; height:36px; border-radius:50%; background:var(--yellow); color:var(--navy); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800}
.sc-list h3{font-size:1.08rem; margin-bottom:4px}
.sc-list p{font-size:.9rem}
@media (max-width:1000px){.sc-in{grid-template-columns:1fr}}
@media (max-width:560px){.sc-list{grid-template-columns:1fr}}

/* ---------- hub: coverage map ---------- */
.cm{background:#fff}
.cm-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,80px); align-items:center}
.cm h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px; line-height:1.05}
.cm-in > div > p{font-size:1.04rem}
.cm .map-box{aspect-ratio:16/10}
@media (max-width:1000px){.cm-in{grid-template-columns:1fr}}