/* Grab Hire Guildford — the Cinematic style (demo 2, chosen by the client). The photograph
   fills the screen and slowly pulls back, a heavy grotesque headline with a lighter yellow
   second line, pill buttons, photo tiles, one dark band per page. */
:root{
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,sans-serif;
  --radius:10px; --radius-ctl:999px;
  --topbar:40px;
  --rail-bg:rgba(10,31,68,.9); --rail-line:rgba(255,255,255,.18); --rail-fg:#fff; --rail-hover:#FFC20E; --rail-hover-fg:#0A1F44;
}
html{scroll-padding-top:calc(var(--hdr) + var(--topbar) + 14px)}
body{font-size:17px}
h1,h2,h3{font-weight:800; letter-spacing:-.028em; font-family:var(--font-display)}
h1 em,h2 em{font-style:normal; font-weight:400; letter-spacing:-.02em; color:var(--yellow)}
em.acc{color:var(--blue); font-weight:400; font-style:normal}
.head h2{font-size:clamp(2.1rem,3.9vw,3.4rem); line-height:1.05}
.head p{font-size:1.08rem}
.btn{border-radius:999px; padding:0 30px; font-weight:600}
.btn-hdr{border-radius:999px}
.eyebrow,.head .eyebrow{font-size:.78rem; letter-spacing:.2em}
.drawer nav a{font-weight:400}

/* ---------- top bar + header ---------- */
.d2-top{position:fixed; inset:0 0 auto 0; z-index:61; height:var(--topbar); background:var(--navy-2); color:rgba(255,255,255,.82); font-size:.82rem}
.d2-top .wrap-wide{display:flex; align-items:center; justify-content:space-between; gap:20px; height:100%}
.d2-top a{display:inline-flex; align-items:center; gap:8px; font-weight:500; white-space:nowrap}
.d2-top a svg{color:var(--yellow)}
.d2-top a:hover{color:#fff}
.d2-top-note{color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.d2-hdr{top:var(--topbar); --logo-h:68px}
.d2-hdr::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,31,68,.55),rgba(10,31,68,0)); pointer-events:none; transition:opacity .35s var(--ease)}
.d2-hdr.solid{background:rgba(10,31,68,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); height:76px; box-shadow:0 1px 0 rgba(255,255,255,.08)}
.d2-hdr.solid::before{opacity:0}
.d2-hdr.solid .lockup img{height:56px}
.d2-hdr.solid .nav a{color:#fff}
.d2-hdr.solid .burger{border-color:rgba(255,255,255,.3); color:#fff}
.js.no-reveal .d2-hdr::before{opacity:1 !important}
.drawer{top:0}

/* ---------- hero ---------- */
.d2-hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--navy); padding:calc(var(--hdr) + var(--topbar) + 40px) 0 clamp(64px,9vh,110px)}
.d2-hero-bg{position:absolute; inset:0; overflow:hidden}
.d2-hero-bg img{width:100%; height:100%; object-fit:cover; object-position:var(--hpos,62% 50%); animation:d2kb 16s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes d2kb{from{transform:scale(1.16)} to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.d2-hero-bg img{animation:none}}
.d2-hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,31,68,.78) 0%,rgba(10,31,68,.6) 24%,rgba(10,31,68,.22) 46%,rgba(10,31,68,0) 60%), linear-gradient(180deg,rgba(10,31,68,.18) 0%,rgba(10,31,68,0) 22%,rgba(10,31,68,0) 62%,rgba(10,31,68,.55) 100%)}
.d2-hero h1,.d2-hero .lead,.d2-hero .eyebrow{text-shadow:0 2px 18px rgba(10,31,68,.55), 0 1px 2px rgba(10,31,68,.4)}
.d2-hero-in{position:relative; display:flex; justify-content:flex-start}
.d2-hero-copy{max-width:760px}
.d2-pill{display:flex; width:max-content; max-width:100%; align-items:center; gap:10px; margin:0 0 18px; padding:8px 16px 8px 12px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; font-size:.86rem; font-weight:600}
.d2-pill i{position:relative; width:10px; height:10px; border-radius:50%; background:var(--yellow); flex:none}
.d2-pill i::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--yellow); opacity:0; animation:d2pulse 2.2s ease-out infinite}
@keyframes d2pulse{0%{transform:scale(.5); opacity:.9} 100%{transform:scale(1.5); opacity:0}}
@media (prefers-reduced-motion:reduce){.d2-pill i::after{animation:none}}
.d2-hero h1{font-size:clamp(2.6rem,5.5vw,5.2rem); line-height:1.02; color:#fff; margin-bottom:26px}
.d2-hero .lead{color:rgba(255,255,255,.86); margin-bottom:32px; max-width:56ch}
.d2-scroll{position:absolute; left:50%; transform:translateX(-50%); bottom:28px; display:flex; flex-direction:column; align-items:center; gap:6px; color:rgba(255,255,255,.7); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase}
.d2-scroll svg{animation:d2bob 2.2s ease-in-out infinite}
@keyframes d2bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.d2-scroll svg{animation:none}}

/* ---------- intro + stats ---------- */
.d2-intro{background:#fff; position:relative}
.d2-intro-in{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(40px,7vw,120px); align-items:start}
.d2-intro-hint,.d2-intro-meter{display:none}
/* the freeze screen: the section is the runway, the stage sticks under the header for one screen,
   the paragraphs and stats arrive one step at a time and stay */
.freeze-on .d2-intro-stage{position:sticky; top:calc(var(--hdr) + var(--topbar)); height:calc(100svh - var(--hdr) - var(--topbar)); padding:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden}
.freeze-on .d2-intro-in{align-items:center}
.freeze-on [data-freeze-para],.freeze-on [data-freeze-stat]{opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease), transform .65s var(--ease-out)}
.freeze-on [data-freeze-para].seen,.freeze-on [data-freeze-stat].seen{opacity:1; transform:none}
.freeze-on [data-freeze-para].seen:not(.on){color:var(--mute)}
.freeze-on .d2-intro-hint{display:block; margin-top:18px; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); font-weight:600; transition:opacity .4s var(--ease)}
.freeze-on.freeze-done .d2-intro-hint{opacity:0}
.freeze-on .d2-intro-meter{display:block; position:absolute; left:50%; bottom:22px; transform:translateX(-50%); height:3px; background:var(--grey-200); border-radius:2px; overflow:hidden}
.freeze-on .d2-intro-meter i{display:block; height:100%; background:var(--yellow); transform:scaleX(0); transform-origin:0 50%; transition:transform .25s linear}
.js .freeze-on .d2-stats.in li::after{transform:scaleX(0)}
.js .freeze-on .d2-stats.in li.seen::after{transform:scaleX(1)}
.d2-intro h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:22px; line-height:1.05}
.d2-intro p{margin-bottom:16px; font-size:1.06rem}
.d2-intro p:last-child{margin-bottom:0}
.d2-stats{display:grid; gap:0; border-top:1px solid var(--line)}
.d2-stats li{position:relative; padding:22px 0; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:18px}
.d2-stats li::after{content:""; position:absolute; left:0; bottom:-1px; height:3px; width:100%; background:var(--yellow); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.2s var(--ease-out) .35s}
.js .d2-stats li.in::after,.js .d2-stats.in li::after{transform:scaleX(1)}
.d2-stats b{font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(2.6rem,4vw,3.8rem); line-height:1; color:var(--ink); display:flex; align-items:baseline; gap:4px; min-width:3.2em; font-variant-numeric:tabular-nums}
.d2-stats b .u{font-size:.4em; color:var(--yellow-ink); font-family:var(--font-body); font-weight:600; letter-spacing:0}
.d2-stats li > span{color:var(--mute); font-size:1rem}

/* ---------- services: photo tiles ---------- */
.d2-services{background:linear-gradient(180deg,#F7F9FD 0%,var(--sky) 100%)}
.d2-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.d2-tile{position:relative; display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); background:var(--grey-300)}
.d2-tile img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.d2-tile:hover img{transform:scale(1.05)}
.d2-tile-arrow{position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; background:var(--yellow); color:var(--navy); display:flex; align-items:center; justify-content:center; transform:translate(8px,-8px) scale(.6); opacity:0; transition:transform .4s var(--ease), opacity .3s var(--ease); z-index:2}
.d2-tile:hover .d2-tile-arrow,.d2-tile:focus-visible .d2-tile-arrow{transform:none; opacity:1}
.d2-tile-cap{position:absolute; inset:auto 0 0 0; padding:80px 22px 22px; background:linear-gradient(180deg,rgba(10,31,68,0),rgba(10,31,68,.88)); color:#fff; display:flex; flex-direction:column; gap:4px; z-index:1}
.d2-tile-cap b{font-family:var(--font-display); font-weight:700; font-size:1.4rem; line-height:1.1; letter-spacing:-.01em; min-height:2.2em; display:flex; align-items:flex-end}
.d2-tile-cap span{font-size:.88rem; color:rgba(255,255,255,.8); max-height:0; opacity:0; overflow:hidden; transition:max-height .45s var(--ease), opacity .4s var(--ease)}
.d2-tile:hover .d2-tile-cap span,.d2-tile:focus-visible .d2-tile-cap span{max-height:3em; opacity:1}
@media (hover:none){.d2-tile-cap span{max-height:3em; opacity:1}}

/* ---------- which lorry: the chooser ---------- */
.d2-which{background:#fff}
.d2-chooser{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,56px); align-items:start}
.d2-chips{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.d2-chips legend{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--blue); margin-bottom:14px}
.d2-chip{position:relative; display:block; cursor:pointer}
.d2-chip input{position:absolute; opacity:0; width:1px; height:1px}
.d2-chip span{display:flex; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--line); border-radius:999px; font-weight:500; color:var(--ink); transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)}
.d2-chip span::before{content:""; width:10px; height:10px; border-radius:50%; border:2px solid var(--grey-300); flex:none; transition:background .25s var(--ease), border-color .25s var(--ease)}
.d2-chip:hover span{border-color:var(--vivid); color:var(--vivid)}
.d2-chip input:checked + span{background:var(--vivid); border-color:var(--vivid); color:#fff; box-shadow:0 10px 24px -12px rgba(26,95,230,.7)}
.d2-chip input:checked + span::before{background:var(--yellow); border-color:var(--yellow)}
.d2-chip input:focus-visible + span{outline:3px solid var(--yellow); outline-offset:2px}
.d2-panels{display:grid; gap:14px}
.d2-panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3vw,36px)}
.is-live .d2-panel{display:none}
.is-live .d2-panel.on{display:block; animation:d2in .45s var(--ease) both}
@keyframes d2in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.is-live .d2-panel.on{animation:none}}
.d2-panel-job{font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--ink); margin-bottom:18px; line-height:1.1; letter-spacing:-.02em}
.d2-panel dl{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 18px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.d2-panel dt{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:6px; font-weight:600}
.d2-panel dd{margin:0; font-weight:600; color:var(--ink); font-size:1rem; line-height:1.35}
.d2-panel > p{font-size:1rem}

/* ---------- dark yard band ---------- */
.d2-band{display:grid; grid-template-columns:1fr 1fr; background:var(--grad-dark); min-height:70vh; margin-inline:var(--gutter); border-radius:24px; overflow:hidden; position:relative}
.d2-band-copy{position:relative}
.d2-band-copy::before{content:""; position:absolute; inset:0; background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%), rgba(59,123,255,.35), transparent 62%); pointer-events:none; opacity:0; transition:opacity .5s var(--ease)}
.d2-band-copy.lit::before{opacity:1}
.d2-band-photo{position:relative; overflow:hidden; min-height:380px}
.d2-band-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); will-change:transform}
.d2-band-copy{padding:clamp(48px,6vw,96px) clamp(28px,5vw,88px); display:flex; flex-direction:column; justify-content:center}
.d2-band-copy h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:34px; max-width:18ch}
.d2-why{display:grid; gap:0}
.d2-why li{padding:20px 0 20px 26px; border-top:1px solid var(--line-dark); position:relative}
.d2-why li::before{content:""; position:absolute; left:0; top:29px; width:10px; height:10px; border-radius:3px; background:var(--yellow); transform:rotate(45deg)}
.d2-why h3{font-size:1.2rem; margin-bottom:6px; color:#fff}
.d2-why p{font-size:.94rem; color:rgba(255,255,255,.72)}

/* ---------- how it works ---------- */
.d2-how{background:#fff}
.d2-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); position:relative}
.d2-steps::before{content:""; position:absolute; left:28px; right:28px; top:27px; height:2px; background:linear-gradient(90deg,var(--vivid),var(--yellow)); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.6s var(--ease-out) .2s}
.js .d2-steps:has(li.in)::before{transform:scaleX(1)}
.d2-steps li{padding-top:0; border-top:0; position:relative}
.d2-step-n{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--yellow); color:var(--navy); font-family:var(--font-display); font-weight:800; font-size:1.3rem; line-height:1; margin-bottom:18px; letter-spacing:-.02em; box-shadow:0 0 0 8px #fff; position:relative; z-index:1}
.d2-steps h3{font-size:1.2rem; margin-bottom:10px; min-height:2.2em}
.d2-steps p{font-size:.94rem}

/* ---------- areas ---------- */
.d2-areas{background:linear-gradient(180deg,var(--sky) 0%,#F7F9FD 100%)}
.d2-areas-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:start}
.d2-areas .head{margin-bottom:0}
.d2-area-list{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px)}
.d2-area-list li{background:#fff; border:1px solid var(--line); border-radius:var(--radius); transition:transform .35s var(--ease), border-color .35s var(--ease)}
.d2-area-list li > a{display:block; padding:clamp(20px,2.4vw,30px); height:100%}
.d2-area-list li:hover{transform:translateY(-4px); border-color:var(--vivid); box-shadow:0 22px 40px -24px rgba(26,95,230,.5)}
.d2-area-list.three{grid-template-columns:repeat(3,1fr)}
.d2-areas-in.stack{grid-template-columns:1fr; gap:clamp(24px,3vw,40px)}
.d2-areas-in.stack .head{max-width:760px}
.d2-more{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:.88rem; font-weight:600; color:var(--blue); white-space:nowrap}
.d2-more svg{transition:transform .25s var(--ease)}
li:hover .d2-more svg,a:hover > .d2-more svg{transform:translateX(3px)}
.d2-link{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--blue); margin-top:6px}
.d2-area-list h3{font-size:1.45rem; margin-bottom:4px}
.d2-pc{display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vivid); font-weight:600; margin-bottom:12px}
.d2-area-list p{font-size:.94rem}

/* ---------- contact ---------- */
.d2-contact{background:radial-gradient(700px circle at 100% 0%, rgba(255,194,14,.22), transparent 60%), var(--grad-dark); border-radius:36px 36px 0 0; position:relative; overflow:hidden}
.d2-contact::before{content:""; position:absolute; inset:0; background:radial-gradient(520px circle at var(--mx,80%) var(--my,20%), rgba(59,123,255,.32), transparent 62%); pointer-events:none; opacity:0; transition:opacity .5s var(--ease)}
.d2-contact.lit::before{opacity:1}
.d2-contact::after{content:""; position:absolute; right:-80px; bottom:-120px; width:460px; height:460px; background:url(/assets/img/brand/ghg-mark.svg) center/contain no-repeat; opacity:.07; pointer-events:none}
.d2-contact .wrap{position:relative; z-index:1}
.d2-contact-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:start}
.d2-contact-copy h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px}
.d2-contact-copy .lead{margin-bottom:30px}
.d2-contact-list{display:grid; gap:14px}
.d2-contact-list li{display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.82)}
.d2-contact-list svg{color:var(--yellow); flex:none; margin-top:4px}
.d2-contact-list a{color:#fff; font-weight:600; font-size:1.15rem}
.d2-form{background:#fff; border-radius:18px; padding:clamp(22px,3vw,40px); box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.d2-form .field input,.d2-form .field select,.d2-form .field textarea{border-radius:12px}
.d2-contact-list li svg{width:18px;height:18px}
.d2-cred{background:#fff; border-top:1px solid var(--line)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .d2-tile-cap b{font-size:1.2rem}
  .d2-tile-cap{padding:60px 16px 16px}
  .d2-steps{grid-template-columns:repeat(2,1fr); row-gap:32px}
  .d2-intro-in,.d2-chooser,.d2-areas-in,.d2-contact-in{grid-template-columns:1fr}
  .d2-band{grid-template-columns:1fr}
  .d2-band-photo{min-height:52vw}
  .d2-steps::before{display:none}
}
@media (max-width:900px){
  .d2-top-note{display:none}
  .d2-hero-bg img{object-position:50% 50%}
  .d2-hero-bg::after{background:linear-gradient(180deg,rgba(10,31,68,.14) 0%,rgba(10,31,68,.3) 24%,rgba(10,31,68,.78) 48%,rgba(10,31,68,.9) 100%)}
  .d2-hero-bg img{object-position:50% 50%}
}
@media (max-width:700px){
  :root{--topbar:36px}
  .d2-hdr .lockup img,.d2-hdr.solid .lockup img{height:54px !important}
  .d2-top .d2-top-note{display:none}
  .d2-top a:first-child{display:none}
  .d2-top .wrap-wide{justify-content:center}
  .d2-hero{padding-top:calc(var(--hdr) + var(--topbar) + 24px); min-height:92svh}
  .d2-hero h1{font-size:clamp(2rem,8.8vw,3.3rem)}
  .d2-hero-bg img{object-position:50% 50%}
  .d2-hero-bg::after{background:linear-gradient(180deg,rgba(10,31,68,.14) 0%,rgba(10,31,68,.3) 24%,rgba(10,31,68,.8) 48%,rgba(10,31,68,.92) 100%)}
  .d2-scroll{display:none}
  .d2-tiles{grid-template-columns:1fr}
  .d2-tile-cap b{min-height:0}
  .d2-band{margin-inline:0; border-radius:0}
  .d2-contact{border-radius:22px 22px 0 0}
  .d2-contact::after{width:300px; height:300px; right:-90px; bottom:-90px}
  .d2-steps{grid-template-columns:1fr}
  .d2-steps h3{min-height:0}
  .d2-area-list,.d2-area-list.three{grid-template-columns:1fr}
  .d2-panel dl{grid-template-columns:1fr; gap:12px}
  .d2-stats b{min-width:2.6em}
}

/* ---------- FAQ: a centred column of pill rows ---------- */
.d2-faq{background:var(--paper)}
.d2-faqs{max-width:820px; margin-inline:auto; display:grid; gap:10px}
.d2-q{background:var(--paper); border:1px solid var(--line); border-radius:22px; overflow:hidden; transition:border-color .3s var(--ease)}
.d2-q[open]{border-color:var(--vivid); background:#fff; box-shadow:0 18px 40px -28px rgba(26,95,230,.45)}
.d2-q[open] .d2-q-a{animation:d2in .45s var(--ease) both}
@media (prefers-reduced-motion:reduce){.d2-q[open] .d2-q-a{animation:none}}
.d2-q summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 22px; font-weight:600; color:var(--ink); font-size:1.05rem}
.d2-q summary::-webkit-details-marker{display:none}
.d2-q summary i{position:relative; flex:none; width:30px; height:30px; border-radius:50%; background:var(--vivid); transition:transform .35s var(--ease), background .3s var(--ease)}
.d2-q summary i::before,.d2-q summary i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:#fff; transform:translate(-50%,-50%)}
.d2-q summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.d2-q[open] summary i{transform:rotate(45deg); background:var(--yellow)}
.d2-q[open] summary i::before,.d2-q[open] summary i::after{background:var(--navy)}
.d2-q-a{padding:0 22px 20px; font-size:1rem; color:var(--body)}

/* ---------- inner page: mini grab ---------- */
.d2-hero-pg{min-height:80svh}
.d2-spec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.d2-spec-grid li{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.4vw,28px); position:relative; overflow:hidden; transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease)}
.d2-spec-grid li::before{content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:var(--yellow); transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease)}
.d2-spec-grid li:hover{transform:translateY(-4px); border-color:var(--vivid); box-shadow:0 22px 40px -24px rgba(26,95,230,.45)}
.d2-spec-grid li:hover::before{transform:scaleX(1)}
.d2-n{display:block; font-family:var(--font-display); font-weight:800; font-size:.9rem; letter-spacing:.08em; color:var(--vivid); margin-bottom:12px}
.d2-spec-grid h3{font-size:1.25rem; line-height:1.25; min-height:2.5em; display:flex; align-items:flex-end; margin-bottom:8px}
.d2-cmp{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px)}
.d2-cmp-panel ul{display:grid; gap:0}
.d2-cmp-panel li{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:.94rem}
.d2-cmp-panel li span{color:var(--mute)}
.d2-cmp-panel li b{color:var(--ink); text-align:right; max-width:60%}
@media (max-width:1100px){.d2-spec-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .d2-hero-pg{min-height:70svh}
  .d2-spec-grid,.d2-cmp{grid-template-columns:1fr}
  .d2-spec-grid h3{min-height:0}
  .d2-cmp-panel li{flex-direction:column; gap:2px}
  .d2-cmp-panel li b{text-align:left; max-width:none}
}


/* ---------- inner pages: hero without a photograph (legal, 404) ---------- */
.d2-hero-plain{min-height:52svh; background:var(--navy-2)}
.d2-hero-plain::after{content:""; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(180deg,rgba(10,31,68,0),rgba(10,31,68,.5)); pointer-events:none}
.d2-hero-plain .d2-hero-in{justify-content:flex-start}

/* ---------- load calculator (the SFS tonnage calculator, in this site's clothes) ---------- */
.d2-calc{background:radial-gradient(640px circle at 100% 0%, rgba(255,194,14,.2), transparent 60%), var(--sky)}
.d2-calc-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:start}
.d2-calc h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px; line-height:1.05}
.d2-calc-in > div > p{font-size:1.06rem; margin-bottom:22px}
.d2-calc-notes{display:grid; gap:10px}
.d2-calc-notes li{position:relative; padding-left:26px; font-size:.96rem; color:var(--body)}
.d2-calc-notes li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:12px; border-radius:50%; background:var(--yellow)}
.vcalc{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3vw,36px); display:grid; gap:18px}
.vc-seg{display:flex; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:4px; gap:4px}
.vc-seg button{flex:1; min-height:44px; border:0; border-radius:999px; background:transparent; font-weight:600; font-size:.95rem; color:var(--mute); cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease)}
.vc-seg button.on{background:var(--navy); color:#fff}
.vc-seg button:focus-visible{outline:3px solid var(--yellow); outline-offset:2px}
.vc-row3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.vcalc .field input,.vcalc .field select{border-radius:12px}
.vc-out{background:var(--grad-dark); color:#fff; border-radius:var(--radius); padding:22px 24px; display:grid; gap:8px}
.vc-meter{position:relative; height:12px; border-radius:999px; background:rgba(255,255,255,.14); margin:8px 0 22px; overflow:visible}
.vc-meter i{position:absolute; left:0; top:0; bottom:0; width:calc(var(--fill,0) * 100%); border-radius:999px; background:linear-gradient(90deg,var(--yellow-2),var(--yellow)); transition:width .55s var(--ease-out)}
.vc-meter b{position:absolute; top:-6px; width:2px; height:24px; background:rgba(255,255,255,.55)}
.vc-meter b::after{content:attr(data-l); position:absolute; top:26px; left:0; transform:translateX(-50%); white-space:nowrap; font-size:.72rem; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.72)}
.vc-meter b.mini{left:56.25%}
.vc-meter b.mini::after{top:auto; bottom:26px}
.vc-meter{margin-top:30px}
.vc-meter b.full{left:100%}
.vc-meter b.full::after{transform:translateX(-100%)}
.vc-big{font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,4vw,3rem); line-height:1; letter-spacing:-.03em; color:var(--yellow); display:flex; align-items:baseline; gap:10px; font-variant-numeric:tabular-nums}
.vc-big .u{font-size:.42em; font-family:var(--font-body); font-weight:600; letter-spacing:0; color:rgba(255,255,255,.85)}
.vc-big span:first-child.pop{animation:vcpop .4s var(--ease)}
@keyframes vcpop{0%{transform:translateY(6px); opacity:.4} 100%{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){.vc-big span:first-child.pop{animation:none}}
.vc-out p{font-size:.98rem; color:rgba(255,255,255,.86)}
.vc-note{font-size:.84rem !important; color:rgba(255,255,255,.62) !important}
.vcalc .btn-row .btn{width:auto}
@media (max-width:1100px){.d2-calc-in{grid-template-columns:1fr}}
@media (max-width:460px){.vc-row3{grid-template-columns:1fr 1fr} .vc-row3 .field:last-child{grid-column:1/-1}}

/* ---------- area pages: prose with a sticky side card ---------- */
.d2-prose{background:#fff}
.d2-prose-in{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,80px); align-items:start}
.d2-prose-block{margin-bottom:clamp(30px,4vw,48px)}
.d2-prose-block:last-child{margin-bottom:0}
.d2-prose-block h2{font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:14px; line-height:1.1}
.d2-prose-block p{margin-bottom:14px; font-size:1.04rem}
.d2-prose-block p:last-child{margin-bottom:0}
.d2-prose-side{position:sticky; top:calc(var(--hdr) + var(--topbar) + 24px); display:grid; gap:16px}
.d2-side-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.4vw,28px)}
.d2-side-card .eyebrow{margin-bottom:12px}
.d2-side-card .eyebrow + .d2-chips-list{margin-bottom:20px}
.d2-side-card .eyebrow + .d2-chips-list.pc{margin-bottom:0}
.d2-side-card.dark{background:var(--grad-dark); border-color:transparent; color:rgba(255,255,255,.84)}
.d2-side-card.dark p{margin-bottom:16px; font-size:.98rem}
.d2-side-card.dark .btn{width:auto; margin-bottom:12px}
.d2-side-link{display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:600}
.d2-side-link svg{color:var(--yellow)}
.d2-chips-list{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.d2-chips-list.pc{display:flex; flex-wrap:wrap}
.d2-chips-list li{padding:7px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.88rem; color:var(--ink); font-weight:500; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.d2-chips-list.pc li{background:var(--vivid); border-color:var(--vivid); color:#fff; font-weight:600; letter-spacing:.04em}
@media (max-width:1100px){.d2-prose-in{grid-template-columns:1fr} .d2-prose-side{position:static}}

/* ---------- service list cards (area pages) ---------- */
.d2-svc-list{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.d2-svc-list li{background:#fff; border:1px solid var(--line); border-radius:var(--radius); transition:transform .35s var(--ease), border-color .35s var(--ease)}
.d2-svc-list li:hover{transform:translateY(-4px); border-color:var(--vivid); box-shadow:0 22px 40px -24px rgba(26,95,230,.45)}
.d2-svc-list li a{display:block; padding:clamp(18px,2.2vw,26px); height:100%}
.d2-svc-list h3{font-size:1.2rem; margin-bottom:6px; min-height:2.4em; display:flex; align-items:flex-end}
.d2-svc-list p{font-size:.94rem}
@media (max-width:700px){.d2-svc-list{grid-template-columns:1fr} .d2-svc-list h3{min-height:0}}

/* ---------- areas hub ---------- */
.d2-area-cards{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px)}
.d2-area-cards li{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .35s var(--ease), border-color .35s var(--ease)}
.d2-area-cards li:hover{transform:translateY(-4px); border-color:var(--vivid); box-shadow:0 22px 40px -24px rgba(26,95,230,.45)}
.d2-area-cards li a{display:grid; grid-template-columns:.8fr 1.2fr; height:100%}
.d2-area-cards img{width:100%; height:100%; min-height:220px; object-fit:cover}
.d2-area-card-body{padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; justify-content:center}
.d2-area-card-body h3{font-size:1.6rem; margin-bottom:4px}
.d2-area-card-body p{font-size:.94rem}
.d2-villages-in .head{margin-bottom:22px}
.d2-villages{font-size:1.1rem; max-width:78ch; color:var(--body)}
@media (max-width:900px){.d2-area-cards{grid-template-columns:1fr}}
@media (max-width:520px){.d2-area-cards li a{grid-template-columns:1fr} .d2-area-cards img{aspect-ratio:16/10; min-height:0}}

/* ---------- contact page: find us + map ---------- */
.d2-find{background:var(--paper)}
.d2-find-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:start}
.d2-find h2{font-size:clamp(2.1rem,3.9vw,3.4rem); margin-bottom:18px; line-height:1.05}
.d2-find p{font-size:1.04rem; margin-bottom:18px}
.d2-find p.small{font-size:.92rem; color:var(--mute); margin:0}
.d2-hours{display:grid; gap:0; border-top:1px solid var(--line); margin-bottom:18px}
.d2-hours li{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:1rem}
.d2-hours b{color:var(--ink); white-space:nowrap}
.d2-map{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--grey-200); aspect-ratio:4/3; max-width:100%}
.d2-map iframe{display:block; width:100%; height:100%; border:0}
@media (max-width:1100px){.d2-find-in{grid-template-columns:1fr}}

/* ---------- legal + 404 ---------- */
.d2-legal{background:#fff}
.d2-legal-in{max-width:780px; margin-inline:auto}
.d2-legal-in h2{font-size:clamp(1.5rem,2.4vw,2rem); margin:34px 0 12px; line-height:1.1}
.d2-legal-in h2:first-child{margin-top:0}
.d2-legal-in p{margin-bottom:14px; font-size:1.04rem}
.d2-404-links{display:grid; grid-template-columns:repeat(3,1fr); gap:8px 20px; margin-bottom:10px}
.d2-404-links a{color:var(--blue); font-weight:600}
@media (max-width:700px){.d2-404-links{grid-template-columns:1fr}}


/* ---------- photo break: a full-bleed photograph between sections ---------- */
.d2-break{position:relative; height:clamp(360px,62vh,640px); overflow:hidden; background:var(--navy)}
.d2-break-photo{position:absolute; inset:0}
.d2-break-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; will-change:transform}
@media (max-width:700px){.d2-break{height:clamp(300px,58vh,440px)}}