/* HRH Skips preview site: one stylesheet for every page.
   Colours are the ones the Install preview was built in, kept on purpose. */
:root{--ink:#0f0f10;--tar:#18181a;--tar2:#222225;--line:#34343a;--or:#f47c20;--or2:#ff9a3d;--paper:#f4efe6;--mute:#a9a49b;--chrome:linear-gradient(180deg,#fdfdfd 0%,#c9cbcf 38%,#7d8187 52%,#e4e6e9 70%,#9a9ea4 100%);--head:"Anton",Impact,sans-serif;--body:"Archivo",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
.chev{height:14px;background:repeating-linear-gradient(-45deg,var(--or) 0 22px,var(--ink) 22px 44px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;font-size:15px;padding:16px 24px;border:2px solid var(--or);border-radius:3px;transition:transform .15s,background .15s,color .15s;cursor:pointer;font-family:var(--body)}
.btn.solid{background:var(--or);color:#0f0f10}
.btn.ghost{background:transparent;color:var(--paper)}
.btn:hover{transform:translateY(-2px)}
.btn.solid:hover{background:var(--or2);border-color:var(--or2)}
.btn.ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* preview ribbon */
.ribbon{background:#000;color:var(--mute);font-size:12.5px;text-align:center;padding:7px 12px;letter-spacing:.03em}
.ribbon b{color:var(--or)}

/* header */
header{position:sticky;top:0;z-index:40;background:rgba(15,15,16,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
/* HRH's own logo artwork (assets/hrh-logo.webp, black keyed out so it sits on any dark background) */
.mark{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.mark img{display:block;height:60px;width:auto}
/* the owner wants every header logo to say it goes home: a divider, a house
   and "Home" beside it, all part of the one logo link */
.mark__home{display:flex;flex-direction:column;align-items:center;gap:4px;margin-left:14px;padding-left:14px;border-left:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);transition:color .2s}
.mark__home svg{width:20px;height:20px;fill:none;stroke:var(--or);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.mark:hover .mark__home,.mark:focus-visible .mark__home{color:var(--or)}
.mark:hover .mark__home svg,.mark:focus-visible .mark__home svg{transform:translateY(-2px)}
footer .mark img{height:96px}
nav.main{display:flex;gap:18px;font-size:12.5px;white-space:nowrap;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
nav.main a{text-decoration:none;opacity:.8;padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover{opacity:1;color:var(--or)}
nav.main a[aria-current]{opacity:1;color:var(--or);border-color:var(--or)}
.tel{font-family:var(--head);font-size:24px;text-decoration:none;color:var(--paper);white-space:nowrap}
.tel small{display:block;font-family:var(--body);font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--or);line-height:1}
.menu{display:none;font:inherit;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:none;border:1.5px solid var(--line);border-radius:3px;padding:9px 12px;cursor:pointer}

/* hero (home) */
.hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero{background:var(--ink)}
.hero .ph{position:absolute;inset:0 0 0 36%;background:#2a211a url("hrh-street-lorry.webp") 72% 50%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%);z-index:-2;transform:scale(1.04);animation:drift 22s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,15,16,.82) 0%,rgba(15,15,16,.55) 42%,rgba(15,15,16,0) 70%),linear-gradient(180deg,rgba(15,15,16,.3) 0%,rgba(15,15,16,.2) 40%,rgba(15,15,16,.8) 78%,var(--ink) 100%)}
@keyframes drift{to{transform:scale(1.1) translateX(-1.5%)}}
.hero .wrap{width:100%;padding-bottom:54px;padding-top:190px}
.tag{display:inline-flex;align-items:center;gap:10px;background:var(--or);color:#0f0f10;font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;margin-bottom:20px}
.tag i{width:8px;height:8px;border-radius:50%;background:#0f0f10;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.hero h1{font-size:clamp(58px,11vw,160px)}
.hero h1 em{font-style:normal;color:var(--or);display:block;font-size:.5em;line-height:1.05}
.hero p.lead{max-width:560px;font-size:19px;margin:22px 0 28px;color:#e9e3d8}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* page banner (inner pages) */
/* Big phone banner across the top of each page's opening picture */
.callbar{position:absolute;top:0;left:0;right:0;z-index:2;background:var(--or);color:#0f0f10;border-bottom:4px solid #0f0f10;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.callbar .cb{max-width:1180px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 44px}
.callbar .k{font-family:var(--head);font-size:clamp(22px,2.6vw,34px);text-transform:uppercase;line-height:1}
.callbar a{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:#0f0f10;font-family:var(--head);font-size:clamp(30px,4.4vw,56px);line-height:1}
.callbar a:hover{color:#fff}
.callbar small{font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.banner{position:relative;isolation:isolate;overflow:hidden;padding:190px 0 54px;min-height:440px;display:flex;align-items:flex-end}
.banner .ph{position:absolute;inset:0;background:#2a211a center 55%/cover no-repeat;z-index:-2}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,15,16,.92) 0%,rgba(15,15,16,.7) 45%,rgba(15,15,16,.2) 100%),linear-gradient(180deg,transparent 60%,var(--ink) 100%)}
.banner .wrap{width:100%}
.banner h1{font-size:clamp(52px,8.4vw,116px);max-width:820px}
.banner h1 em{font-style:normal;color:var(--or)}
.banner p.lead{max-width:560px;font-size:19px;margin:18px 0 26px;color:#e9e3d8}
.crumb{font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
.crumb a{text-decoration:none;color:var(--mute)}

/* running strip */
.strip{background:var(--or);color:#0f0f10;overflow:hidden;white-space:nowrap;transform:rotate(-1.2deg) scale(1.03);margin:26px 0 0;border-block:3px solid #0f0f10}
.strip div{display:inline-block;padding:11px 0;font-family:var(--head);font-size:26px;text-transform:uppercase;animation:run 38s linear infinite}
.strip span{margin:0 22px}
.strip span::after{content:"◆";margin-left:44px;font-size:14px;vertical-align:4px}
@keyframes run{to{transform:translateX(-50%)}}

section{padding:96px 0}
.kick{font-size:12.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
h2{font-size:clamp(42px,6.4vw,84px);margin-bottom:18px}
h2 mark{background:linear-gradient(transparent 58%,var(--or) 58% 92%,transparent 92%);color:inherit;padding:0 .08em}
.sub{max-width:640px;color:var(--mute);font-size:18px}
.dark2{background:var(--tar);border-block:1px solid var(--line)}
.lightsec{background:var(--paper);color:var(--ink)}
.lightsec .sub{color:#5c574f}
.lightsec .kick{color:#b4500a}

/* skip size cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:44px}
.card{background:var(--ink);border:1px solid var(--line);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--or);transform:translateY(-3px)}
.cards.all{grid-template-columns:repeat(6,1fr)}
.cards.all .card{grid-column:span 2}
.cards.all .card:nth-child(n+4){grid-column:span 3}
.card .pic{height:150px;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:18px 16px 0;border-bottom:4px solid #4a4a52;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:30px 30px;background-position:-1px -1px}
.card .pic svg{flex:none}
/* size photo with the van or wagon it comes on */
.card .shot{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;border-bottom:4px solid var(--or);background:#222}
.card .shot>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .shot>img{transform:scale(1.04)}
.card .rides{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;background:rgba(15,15,16,.86);border:1px solid rgba(244,239,230,.18);border-radius:6px;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);line-height:1.3}
.card .rides img{width:84px;height:56px;object-fit:cover;border-radius:3px}
.card .rides b{display:block;color:var(--paper);font-size:12px;letter-spacing:.06em}
.card .in{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:46px;color:var(--or)}
.card h3 small{display:block;font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--paper);margin-top:6px}
.card p{font-size:15px;color:#ddd6ca;margin:12px 0 0}
.card dl{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-top:16px}
.card dl div{padding:8px 4px;text-align:center;border-right:1px solid var(--line)}
.card dl div:last-child{border:0}
.card dt{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);order:2}
.card dd{font-family:var(--head);font-size:19px}
.card .btn{margin-top:auto;width:100%;padding:13px 18px;font-size:14px}
.card .spacer{flex:1;min-height:18px}
.flag{position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border:1.5px solid var(--or);color:var(--or);background:var(--ink)}
.flag.ok{background:var(--or);color:#0f0f10}
.note{font-size:13.5px;color:var(--mute);margin-top:22px;max-width:760px}

/* video */
.reel{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:60px;align-items:center}
.reel figure{margin:0;position:relative}
.reel video{display:block;width:100%;aspect-ratio:9/16;background:#000;box-shadow:16px 16px 0 var(--or)}
.reel figcaption{margin-top:28px;font-size:13px;color:var(--mute)}

/* split: copy beside a photo */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.flip>figure{order:-1}
.photo{position:relative;margin:0}
.photo img{width:100%;aspect-ratio:4/3.3;object-fit:cover;box-shadow:16px 16px 0 var(--or)}
.photo.tall img{aspect-ratio:3/4}
.photo figcaption{position:absolute;left:-10px;bottom:26px;background:var(--ink);color:var(--paper);font-family:var(--head);text-transform:uppercase;font-size:24px;padding:8px 16px;transform:rotate(-3deg);border:2px solid var(--or)}
.rows{border-top:2px solid var(--paper);margin-top:26px}
.rows div{display:grid;grid-template-columns:54px 1fr;gap:14px;padding:19px 0;border-bottom:1px solid var(--line)}
.rows i{font-family:var(--head);font-style:normal;font-size:26px;color:var(--or)}
.rows b{display:block;font-size:19px}
.rows span{color:var(--mute);font-size:15.5px}
.lightsec .rows{border-color:var(--ink)}
.lightsec .rows div{border-color:#cfc8bb}
.lightsec .rows span{color:#5c574f}
.lightsec .rows i{color:#b4500a}

/* services list */
.svc{margin-top:40px;border-top:3px solid var(--ink)}
.svc a{display:grid;grid-template-columns:70px 1fr 1.3fr 40px;gap:20px;align-items:center;padding:26px 6px;border-bottom:1px solid #cfc8bb;text-decoration:none;transition:background .2s,padding .2s}
.svc a:hover{background:var(--or);padding-left:20px}
.svc i{font-family:var(--head);font-style:normal;font-size:20px;opacity:.5}
.svc h3{font-size:clamp(28px,3.6vw,46px)}
.svc p{font-size:16px;color:#3d3a35}
.svc u{text-decoration:none;font-size:28px;transition:transform .2s}
.svc a:hover u{transform:translateX(6px)}

/* photo strip */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:10px;margin-top:40px}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery img:first-child{grid-row:1/3}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;counter-reset:s}
.steps div{border-top:3px solid var(--or);padding-top:16px}
.steps div::before{counter-increment:s;content:"0" counter(s);font-family:var(--head);font-size:40px;color:var(--or);display:block;line-height:1;margin-bottom:10px}
.steps b{display:block;font-size:18px;margin-bottom:4px}
.steps span{color:var(--mute);font-size:15.5px}

/* checklists */
.ticks{list-style:none;margin-top:22px;display:grid;gap:10px}
.ticks li{padding-left:30px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:3px solid var(--or);border-bottom:3px solid var(--or);transform:rotate(-45deg)}
.confirm{margin-top:26px;border:1.5px dashed var(--or);padding:16px 18px;font-size:14.5px;color:#ddd6ca;max-width:640px}
.confirm b{color:var(--or);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:4px}
.lightsec .confirm{color:#3d3a35;border-color:#b4500a}
.lightsec .confirm b{color:#b4500a}

/* areas */
.towns{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:34px}
.towns span{font-family:var(--head);font-size:clamp(26px,4vw,50px);text-transform:uppercase;line-height:1;padding:8px 16px;border:2px solid var(--line);transition:.2s}
.towns span:hover{background:var(--or);border-color:var(--or);color:#0f0f10;transform:rotate(-1.5deg)}
.towns span.home{background:var(--or);border-color:var(--or);color:#0f0f10}
.yard{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px 40px;font-size:16px;color:var(--mute)}
.yard b{color:var(--paper)}

/* quote band (bottom of every page) */
.quote{background:var(--or);color:#0f0f10;padding:0}
.quote .in{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:70px 22px}
.quote h2{font-size:clamp(46px,7vw,92px);margin:0}
.quote .callbig{font-family:var(--head);font-size:clamp(40px,5.4vw,70px);text-decoration:none;display:block;line-height:1}
.quote .callbig small{display:block;font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:4px}
.quote .acts{display:grid;gap:12px;justify-items:start}
.quote .btn.solid{background:#0f0f10;border-color:#0f0f10;color:var(--paper)}
.quote .btn.solid:hover{background:#2a2a2e;border-color:#2a2a2e}

/* contact form */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start}
form{background:var(--tar);color:var(--paper);padding:30px;display:grid;gap:14px;border:1px solid var(--line);box-shadow:12px 12px 0 var(--or)}
form label{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:grid;gap:6px}
form input,form select,form textarea{font:inherit;font-size:16px;color:var(--paper);background:var(--tar2);border:1.5px solid var(--line);padding:13px 12px;border-radius:3px;width:100%;letter-spacing:0;text-transform:none}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--or);outline-offset:1px}
form .check{display:flex;gap:12px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:#ddd6ca}
form .check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--or)}
form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form .btn{width:100%}
form small{color:var(--mute);font-size:13px}
.side p{margin-top:18px;color:var(--mute)}
.side p b{display:block;color:var(--paper);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:2px}
.side .callbig{font-family:var(--head);font-size:clamp(40px,5vw,62px);text-decoration:none;line-height:1;display:block;color:var(--or);margin-top:8px}

footer{padding:56px 0 110px;font-size:14.5px;color:var(--mute);border-top:1px solid var(--line)}
footer .f{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
footer b{color:var(--paper)}
footer h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
footer ul{list-style:none;display:grid;gap:6px}
footer a{text-decoration:none}
footer a:hover{color:var(--or)}
footer .mark{margin-bottom:14px}
footer .small{margin-top:34px;font-size:12.5px}

/* phone call bar */
.dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;grid-template-columns:1fr 1fr;background:#0f0f10;border-top:2px solid var(--or)}
.dock a{padding:15px 8px;text-align:center;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:15px;text-decoration:none}
.dock a:first-child{background:var(--or);color:#0f0f10}

.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

@media (max-width:1180px){
  .menu{display:block}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);border-bottom:2px solid var(--or);padding:8px 22px 18px;font-size:16px}
  nav.main a{padding:13px 0;border-bottom:1px solid var(--line)}
  nav.main a[aria-current]{border-color:var(--line)}
  header.open nav.main{display:flex}
}
@media (max-width:900px){
  .cards.all{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.cards.all .card,.cards.all .card:nth-child(n+4){grid-column:auto}
  .split,.contact,.quote .in{grid-template-columns:1fr;gap:34px}
  .split.flip>figure{order:0}
  .photo{margin-right:16px}
  .reel{grid-template-columns:1fr;gap:34px}.reel figure{max-width:320px;margin-right:16px}
  .svc a{grid-template-columns:36px 1fr 28px;gap:12px}
  .svc p{grid-column:2/4;grid-row:2}
  .steps{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:200px 160px 160px}
  .gallery img:first-child{grid-row:auto;grid-column:1/3}
  footer .f{grid-template-columns:1fr}
  section{padding:68px 0}
  .dock{display:grid}
  .tel{display:none}
  .mark img{height:52px}
  .hero .ph{inset:0;-webkit-mask-image:none;mask-image:none;background-position:74% 50%}
  .hero .wrap{padding-top:120px}
  .banner{min-height:380px;padding-top:130px}
  .callbar .k{display:none}
  .callbar .cb{gap:4px 22px;padding:10px 12px}
  .callbar a{font-size:clamp(24px,7vw,34px);flex-direction:column;align-items:center;gap:2px}
  .callbar small{font-size:10.5px}
  .banner::after{background:linear-gradient(180deg,rgba(15,15,16,.45) 0%,rgba(15,15,16,.75) 55%,var(--ink) 100%)}
}
@media (max-width:520px){
  .two{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  form{padding:20px;box-shadow:8px 8px 0 var(--or)}
}

/* aggregate bays (illustrations) */
.bays{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.bay{position:relative;display:block;text-decoration:none;background:var(--ink);border:1px solid var(--line);transition:border-color .2s,transform .2s}
.bay:hover{border-color:var(--or);transform:translateY(-3px)}
.bay img{width:100%;height:auto;border-bottom:4px solid var(--or)}
.bay .sign{position:absolute;left:12px;top:12px;background:#0f0f10;color:var(--or);border:2px solid var(--or);font-family:var(--head);font-size:20px;text-transform:uppercase;padding:4px 10px;transform:rotate(-2deg)}
.bay b{display:block;padding:16px 18px 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.bay p{padding:6px 18px 18px;font-size:15px;color:#ddd6ca}
@media (max-width:900px){.bays{grid-template-columns:1fr 1fr;gap:12px}.bay .sign{font-size:16px}}
@media (max-width:520px){.bays{grid-template-columns:1fr}}

/* ── intro: an old skip under a flickering lamp, then the HRH skip drops on it ──
   Same rules as our other sites intros: the exit is a CSS animation with
   forwards, so the card clears itself even if script never runs; tap or scroll
   skips it (site.js); reduced-motion visitors never see it.
   Timeline: lamp flickers 0–1.6s · HRH skip falls 1.55–1.9s · impact 1.9s
   (flash, crush, shake, smoke, lamp swings) · name 2.3s · out 3.9s.
   assets/intro-sound.mp3 is timed to the same clock (site.js keeps it in sync). */
.intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center;align-content:center;gap:4px;background:#0b0b0c;cursor:pointer;overflow:hidden;animation:intro-out .85s cubic-bezier(.76,0,.24,1) 3.9s forwards}
.intro[hidden]{display:none}
@keyframes intro-out{to{transform:translateY(-100%);visibility:hidden}}
.intro.is-gone{transform:translateY(-100%);visibility:hidden;animation:none;transition:transform .5s cubic-bezier(.76,0,.24,1)}
/* The scene is 400x470 units; --u is one unit in CSS px. Each layer is placed
   in units and animates only transform/opacity, so phones composite it instead
   of repainting. Never animate filter, or put SVG filters on a moving layer, and keep var()
   out of @keyframes: Chrome runs those on the main thread every frame. Moves
   in keyframes are % of the layer's own box for that reason. */
.in-stage{--w:min(88vw,430px,54svh);--u:calc(var(--w) / 400);position:relative;width:var(--w);aspect-ratio:400/470}
.in-stage svg,.in-stage img,.in-stage i,.in-fg div{position:absolute;display:block}
.in-bg{inset:0;width:100%;height:100%;overflow:visible}
.in-fg{position:absolute;inset:0;animation:in-shake .5s linear 1.9s both;will-change:transform}
@keyframes in-shake{0%{transform:translate(0,0)}10%{transform:translate(-9px,7px)}20%{transform:translate(8px,-6px)}30%{transform:translate(-7px,4px)}40%{transform:translate(6px,-3px)}55%{transform:translate(-4px,2px)}70%{transform:translate(2px,-1px)}100%{transform:none}}
/* lamp box = the light's patch (-30,48)-(430,500); it swings from (200,0) */
.in-lamp{left:calc(var(--u) * -30);top:calc(var(--u) * 48);width:calc(var(--u) * 460);height:calc(var(--u) * 452);transform-origin:calc(var(--u) * 230) calc(var(--u) * -48);animation:in-swing 1.6s cubic-bezier(.3,.6,.4,1) 1.9s both;will-change:transform}
@keyframes in-swing{0%{transform:rotate(0)}12%{transform:rotate(13deg)}32%{transform:rotate(-9deg)}52%{transform:rotate(5deg)}72%{transform:rotate(-2.5deg)}100%{transform:rotate(0)}}
.in-cord{left:calc(var(--u) * 229);top:calc(var(--u) * -700);width:calc(var(--u) * 2);height:calc(var(--u) * 710);background:#3a3a3e}
.in-light{inset:0;width:100%;height:100%}
/* shade photo, 110x62 units, its mouth (and the bulb) at (200,94) */
.in-shadelamp{left:calc(var(--u) * 176.4);top:calc(var(--u) * -9);width:calc(var(--u) * 110);height:calc(var(--u) * 62)}
.in-light,.in-motes{animation:in-flicker 1.6s steps(1,end) both;will-change:opacity}
@keyframes in-flicker{0%{opacity:.08}7%{opacity:.85}9%{opacity:.12}13%{opacity:.95}27%{opacity:.8}29%{opacity:.05}33%{opacity:.9}55%{opacity:.95}58%{opacity:.25}61%{opacity:1}100%{opacity:1}}
.in-motes{inset:0}
.in-motes i{left:calc(var(--u) * (var(--x) + 30 - var(--r)));top:calc(var(--u) * (var(--y) - 48 - var(--r)));width:calc(var(--u) * var(--r) * 2);height:calc(var(--u) * var(--r) * 2);border-radius:50%;background:#fff1c8;animation:in-mote 3.6s ease-in-out infinite alternate}
.in-motes i:nth-child(2n){animation-duration:2.8s;animation-direction:alternate-reverse}
.in-motes i:nth-child(3n){animation-duration:4.2s}
@keyframes in-mote{from{transform:translate(-250%,330%);opacity:.25}to{transform:translate(330%,-580%);opacity:.9}}
.in-oldshadow{left:calc(var(--u) * 72);top:calc(var(--u) * 438);width:calc(var(--u) * 256);height:calc(var(--u) * 24);animation:in-oldsh .12s ease-in 1.9s both}
@keyframes in-oldsh{to{transform:scaleX(1.15)}}
/* old skip photo patch (91,318.5)-(309,448); crushed from its base centre (200,448).
   Floor-level things sit 18 units below the wall line (430): the skips are seen
   from above, so their feet stand on the floor in front of the wall, not on its foot. */
.in-old{left:calc(var(--u) * 91);top:calc(var(--u) * 318.5);width:calc(var(--u) * 218);height:calc(var(--u) * 129.5);transform-origin:50% 100%;animation:in-crush .12s cubic-bezier(.5,0,1,1) 1.9s both}
@keyframes in-crush{to{transform:scale(1.14,.2);opacity:.75}}
.in-newshadow{left:calc(var(--u) * 58);top:calc(var(--u) * 436);width:calc(var(--u) * 284);height:calc(var(--u) * 28);opacity:0;transform:scale(.3);animation:in-newsh .35s cubic-bezier(.55,0,1,.6) 1.55s forwards}
@keyframes in-newsh{to{opacity:1;transform:none}}
/* new skip patch (74,100)-(326,452), 352 units tall: the drop is in % of that
   (-760 units = -215.9%; -127 = -36.08% puts its base on the old skip's bricks
   at y=323), then it crushes through and settles on the floor at (200,450) */
.in-new{left:calc(var(--u) * 74);top:calc(var(--u) * 100);width:calc(var(--u) * 252);height:calc(var(--u) * 352);transform:translateY(-215.9%);transform-origin:50% 99.43%;animation:in-drop .35s cubic-bezier(.55,0,1,.6) 1.55s forwards,in-settle .3s ease-out 1.9s forwards;will-change:transform}
.in-new svg{inset:0;width:100%;height:100%}
/* the skip photo, 296x147 units (bigger than the old one it lands on), its base on (200,450) */
.in-new .in-skip{left:calc(var(--u) * -22);bottom:calc(var(--u) * 2);width:calc(var(--u) * 296);height:calc(var(--u) * 147)}
@keyframes in-drop{to{transform:translateY(-36.08%)}}
@keyframes in-settle{0%{transform:translateY(-36.08%)}35%{transform:translateY(1.14%) scale(1.03,.95)}70%{transform:translateY(-1.7%)}100%{transform:none}}
.in-new .in-streaks{opacity:0;animation:in-streak .4s linear 1.55s}
@keyframes in-streak{0%{opacity:0}30%{opacity:.5}90%{opacity:.5}100%{opacity:0}}
/* rubble that builds up after the impact. All three share the patch
   (20,398)-(380,462); the band sits behind the new skip so only its ends show,
   the heaps and the settling dust sit in front. Bases are on y=458 (93.75%). */
.in-rubble{left:calc(var(--u) * 20);top:calc(var(--u) * 398);width:calc(var(--u) * 360);height:calc(var(--u) * 64);opacity:0;transform-origin:50% 93.75%;will-change:transform,opacity}
.in-rubble--band{animation:in-band .6s cubic-bezier(.2,.8,.3,1) 1.9s forwards}
@keyframes in-band{0%{opacity:0;transform:scale(.35,0)}35%{opacity:1}100%{opacity:1;transform:none}}
.in-rubble--heaps{animation:in-heaps .8s cubic-bezier(.2,.8,.3,1) 2s forwards}
@keyframes in-heaps{0%{opacity:0;transform:scale(.7,0)}30%{opacity:1}100%{opacity:1;transform:none}}
.in-rubble--haze{animation:in-haze 1.4s ease-out 2.05s forwards}
@keyframes in-haze{0%{opacity:0;transform:scale(.6,.4)}50%{opacity:1}100%{opacity:.85;transform:none}}
.in-bit{left:calc(var(--u) * 186);top:calc(var(--u) * 426);width:calc(var(--u) * 32);height:calc(var(--u) * 22);opacity:0;animation:none .8s cubic-bezier(.2,.6,.4,1) 1.92s forwards}
@keyframes in-bit1{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-937.5%,-545.5%) rotate(-260deg)}}
@keyframes in-bit2{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(1000%,-418.2%) rotate(300deg)}}
@keyframes in-bit3{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-687.5%,-1000%) rotate(180deg)}}
@keyframes in-bit4{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(750%,-1090.9%) rotate(-200deg)}}
@keyframes in-bit5{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-1187.5%,-90.9%) rotate(120deg)}}
@keyframes in-bit6{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(1218.8%,-127.3%) rotate(-140deg)}}
/* smoke puffs all grow from one point (200,438), given per puff as --ox/--oy */
.in-puff{left:calc(var(--u) * var(--x));top:calc(var(--u) * var(--y));width:calc(var(--u) * var(--s));height:calc(var(--u) * var(--s));opacity:0;transform-origin:var(--ox) var(--oy);animation:none var(--d,2.2s) cubic-bezier(.2,.7,.4,1) var(--w,1.92s) forwards}
@keyframes in-puff1{0%{opacity:.95;transform:scale(0.35)}35%{opacity:.85}100%{opacity:0;transform:translate(-35.7%,-85.7%) scale(2.1)}}
@keyframes in-puff2{0%{opacity:.95;transform:scale(0.35)}35%{opacity:.85}100%{opacity:0;transform:translate(42.9%,-78.6%) scale(2.2)}}
@keyframes in-puff3{0%{opacity:.95;transform:scale(0.4)}40%{opacity:.8}100%{opacity:0;transform:translate(6.3%,-118.8%) scale(2.6)}}
@keyframes in-puff4{0%{opacity:.95;transform:scale(0.35)}35%{opacity:.85}100%{opacity:0;transform:translate(50%,-91.7%) scale(2.2)}}
@keyframes in-puff5{0%{opacity:.95;transform:scale(0.35)}35%{opacity:.85}100%{opacity:0;transform:translate(-41.7%,-100%) scale(2.1)}}
@keyframes in-puff6{0%{opacity:.95;transform:scale(0.35)}35%{opacity:.85}100%{opacity:0;transform:translate(50%,-91.7%) scale(2.2)}}
.in-flash{position:absolute;inset:0;background:#ffe6b8;opacity:0;pointer-events:none;animation:in-flash .35s ease-out 1.9s}
@keyframes in-flash{0%{opacity:.55}100%{opacity:0}}
.intro .mark{pointer-events:none;opacity:0;animation:in-name .6s cubic-bezier(.22,1,.36,1) 2.3s forwards;margin-top:6px}
.intro .mark img{width:min(54vw,250px);height:auto}
.intro__strap{margin:10px 0 0;font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--or);text-align:center;opacity:0;animation:in-name .6s ease 2.5s forwards}
@keyframes in-name{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.intro__skip{position:absolute;bottom:28px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);pointer-events:none}
.intro__sound{position:absolute;top:18px;right:18px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#0f0f10;background:var(--or);border:0;border-radius:999px;padding:10px 16px 10px 36px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.intro__sound::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:14px;margin-top:-7px;background:#0f0f10;clip-path:polygon(0 30%,35% 30%,75% 0,75% 100%,35% 70%,0 70%)}
.intro__sound[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* WhatsApp + social links (HRH 11-03). Icon colour follows the link. */
.wa-head,.wa,.wa-link,.social a{text-decoration:none}
.wa-head svg,.wa svg,.wa-link svg,.social svg{fill:currentColor;flex:none}
.wa-head{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#25d366;color:#0f0f10;transition:transform .15s}
.wa-head:hover{transform:scale(1.08)}
.wa-head svg{width:24px;height:24px}
.callbar a.wa{align-items:center}
.callbar a.wa svg{width:.7em;height:.7em}
.callbig.wa{color:#25d366}
.quote .callbig.wa{color:inherit}
.callbig.wa svg{display:inline-block;width:.62em;height:.62em;margin-right:.18em;vertical-align:-.04em}
.wa-link{display:inline-flex;align-items:center;gap:8px}
.wa-link svg{width:16px;height:16px;fill:#25d366}
footer .social{margin-top:18px}
footer .social .ic{display:flex;gap:10px}
footer .social a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;color:var(--paper);transition:color .15s,border-color .15s,transform .15s}
footer .social a:hover{color:var(--or);border-color:var(--or);transform:translateY(-2px)}
footer .social svg{width:19px;height:19px}
.dock{grid-template-columns:1fr 1fr 1fr}
.dock a.wa{display:flex;align-items:center;justify-content:center;gap:7px;background:#25d366;color:#0f0f10}
.dock a.wa svg{width:17px;height:17px}
.card .kind{margin:10px 0 0;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
@media (max-width:900px){.wa-head{margin-left:auto;width:42px;height:42px}.bar{gap:12px}}
.card .rides.big img{width:120px;height:80px}