@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/oswald.woff2) format('woff2')}
:root{
--bg:#0b0c0f; --bg2:#13151a; --card:#181b21; --line:#282c35;
--bone:#f2efe9; --mid:#a2a9b4; --hot:#ff5a1f; --hotl:#ff9366; --steel:#5c6675;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--bone);
font:400 clamp(1rem,.96rem + .2vw,1.08rem)/1.68 Inter,system-ui,sans-serif;
-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Oswald,"Arial Narrow",sans-serif;font-weight:600;
letter-spacing:.005em;line-height:1.04;text-transform:uppercase}
h1{font-size:clamp(2.6rem,1.5rem + 4.6vw,5.4rem);margin:0 0 .6rem;font-weight:700}
h2{font-size:clamp(1.7rem,1.25rem + 1.7vw,2.9rem);margin:0 0 .7rem}
h3{font-size:1.16rem;margin:0 0 .4rem;letter-spacing:.02em}
p{margin:0 0 1.05rem;max-width:64ch}
a{color:var(--hotl)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
textarea:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1240px,92vw);margin-inline:auto}
section{padding:clamp(3.2rem,2rem + 4vw,6rem) 0;position:relative}
section:nth-of-type(odd){background:var(--bg2)}

/* header */
.top{position:relative;position:sticky;top:0;z-index:50;background:rgba(11,12,15,.9);
backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.2rem;min-height:64px}
.brand img{height:34px;width:auto}
@media (max-width:560px){.brand img{height:24px}}
.nav{display:flex;gap:.1rem;margin-left:auto;flex-wrap:wrap}
.nav a{font-family:Oswald,sans-serif;font-weight:500;font-size:.83rem;
letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--mid);
padding:.5rem .6rem;border-bottom:2px solid transparent}
.nav a:hover{color:var(--bone)}
.nav a[aria-current]{color:var(--hot);border-bottom-color:var(--hot)}
.call{font-family:Oswald,sans-serif;font-weight:600;font-size:.86rem;
letter-spacing:.05em;background:var(--hot);color:#0b0c0f;text-decoration:none;
padding:.55rem 1rem;white-space:nowrap;text-transform:uppercase}
.call:hover{background:var(--hotl)}

/* full-bleed hero */
.bleed{padding:0;background:var(--bg)}
.bleed .shot{position:relative;min-height:clamp(26rem,52vh,40rem);overflow:hidden;
display:flex;align-items:flex-end}
.bleed .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:.62}
.bleed .shot::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(11,12,15,.94) 8%,rgba(11,12,15,.35) 62%,rgba(11,12,15,.7))}
.bleed .cap{position:relative;z-index:2;width:min(1240px,92vw);margin-inline:auto;
padding:clamp(2.4rem,2rem + 3vw,4.6rem) 0}
.kick{font-family:Oswald,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.24em;
text-transform:uppercase;color:var(--hot);margin:0 0 .9rem}
.lede{font-size:1.18rem;color:#d6dae0;max-width:50ch}
.acts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.btn{font-family:Oswald,sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.06em;
text-transform:uppercase;text-decoration:none;padding:.8rem 1.35rem;display:inline-block}
.btn-a{background:var(--hot);color:#0b0c0f}
.btn-a:hover{background:var(--hotl)}
.btn-b{border:1.5px solid var(--steel);color:var(--bone)}
.btn-b:hover{border-color:var(--hot);color:var(--hot)}

/* timing slat - the signature list device */
.slats{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.slats li{display:grid;grid-template-columns:4.6rem 1fr;gap:1.5rem;
border-bottom:1px solid var(--line);padding:1.15rem 0;align-items:baseline;margin:0}
.slats .pos{font-family:Oswald,sans-serif;font-weight:700;font-size:1.65rem;
color:var(--hot);line-height:1;font-variant-numeric:tabular-nums}
.slats h3{margin:0 0 .3rem}
.slats p{margin:0;color:var(--mid);font-size:.96rem;max-width:70ch}
.slats a{text-decoration:none;color:inherit}
.slats a:hover h3{color:var(--hot)}

/* number plate cards */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.plate{background:var(--card);border:1px solid var(--line);margin:0;overflow:hidden}
.plate img{aspect-ratio:4/3;object-fit:cover;width:100%}
.plate .in{padding:1.2rem}
.plate h3{margin:0 0 .4rem}
.plate p{color:var(--mid);font-size:.95rem;margin:0}
.no{font-family:Oswald,sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.2em;
color:var(--hot);display:block;margin-bottom:.4rem}

/* spec table */
.tbl{overflow-x:auto;border:1px solid var(--line);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
caption{text-align:left;color:var(--mid);font-size:.86rem;padding:.9rem 1rem;
border-bottom:1px solid var(--line)}
th,td{padding:.75rem 1rem;border-bottom:1px solid var(--line);text-align:left}
th{font-family:Oswald,sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--mid)}
td b{font-family:Oswald,sans-serif;font-size:1.1rem;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}

/* photo strips */
.reel{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.reel img{aspect-ratio:3/2;object-fit:cover;width:100%}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,1rem + 2.4vw,3.2rem);
align-items:center}
.duo.flip>*:first-child{order:2}
figure{margin:0}
figcaption{color:var(--mid);font-size:.87rem;margin-top:.6rem}
.head{max-width:56ch;margin-bottom:2.2rem}
.head p{color:var(--mid)}
svg.dia{width:100%;height:auto}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
.tier{background:var(--card);border:1px solid var(--line);padding:1.6rem;margin:0;
border-top:4px solid var(--steel);display:flex;flex-direction:column}
.tier .addon{margin-top:auto}
.tier.on{border-top-color:var(--hot)}
.tier .amt{font-family:Oswald,sans-serif;font-weight:700;font-size:2.5rem;
display:block;margin:.5rem 0 0;line-height:1}
.tier .amt span{font-size:.86rem;color:var(--mid);font-weight:500}
.tier ul{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.5rem;font-size:.93rem}
.tier li{color:var(--mid);padding-left:1.1rem;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;
background:var(--hot)}
.addon{background:#20242c;border-left:3px solid var(--hot);padding:1rem 1.2rem;margin-top:1rem}
.tier-cta{display:block;text-align:center;margin-top:1rem;width:100%}
.addon b{font-family:Oswald,sans-serif;font-size:1.15rem}

/* article */
.post{display:grid;grid-template-columns:minmax(0,1fr) 16rem;
gap:clamp(1.6rem,1rem + 3vw,3.4rem);align-items:start}
.prose{max-width:66ch}
.prose h2{font-size:1.5rem;margin:2rem 0 .6rem}
.prose h3{font-size:1.12rem;margin:1.6rem 0 .45rem}
.rule{border:0;border-top:1px solid var(--line);margin:2.1rem 0}
.bul{margin:0 0 1.3rem;padding-left:1.1rem;display:grid;gap:.45rem;color:var(--mid)}
.pull{margin:1.8rem 0;padding:1.1rem 0 1.1rem 1.4rem;border-left:3px solid var(--hot)}
.pull p{font-family:Oswald,sans-serif;font-size:1.3rem;text-transform:none;
letter-spacing:.01em;line-height:1.35;margin:0;color:var(--bone)}
figure.inline{margin:1.9rem 0}
.side{position:sticky;top:82px}
.side h2{font-size:.76rem;letter-spacing:.16em;color:var(--mid)}
.side ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.side a{font-family:Oswald,sans-serif;font-weight:500;font-size:.94rem;line-height:1.25;
text-transform:none;letter-spacing:.01em;text-decoration:none;color:var(--bone);display:block}
.side a:hover{color:var(--hot)}
.meta{font-family:Oswald,sans-serif;font-size:.8rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--mid);margin:0 0 1rem}
.tag{color:var(--hot)}

/* forms */
.form{display:grid;gap:.9rem;max-width:34rem}
label{font-family:Oswald,sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.11em;
text-transform:uppercase;display:block;margin-bottom:.35rem;color:var(--mid)}
input,textarea,select{width:100%;font:inherit;font-size:.95rem;padding:.7rem .85rem;
background:var(--card);border:1px solid var(--line);color:var(--bone)}
.areas{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0}
.areas li{border:1px solid var(--line);padding:.32rem .8rem;font-family:Oswald,sans-serif;
font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mid)}

/* faq */
.faq{display:grid;gap:.5rem;list-style:none;padding:0;margin:0}
.faq li{background:var(--card);border:1px solid var(--line)}
summary{cursor:pointer;padding:.95rem 1.15rem;font-family:Oswald,sans-serif;
font-weight:500;font-size:1rem;letter-spacing:.02em}
details[open] summary{border-bottom:1px solid var(--line);color:var(--hot)}
.faq p,.clause p{padding:0 1.15rem;margin:.9rem 0;color:var(--mid);font-size:.95rem}

/* footer */
.foot{background:#07080a;border-top:1px solid var(--line);padding:3.2rem 0 2.2rem;
font-size:.92rem;color:var(--mid)}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1.8rem}
.foot h2{font-size:.76rem;letter-spacing:.18em;color:var(--bone);margin:0 0 .8rem}
.foot a{color:var(--hotl);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.foot .note{margin:2.4rem 0 0;padding-top:1.3rem;border-top:1px solid var(--line);
font-size:.83rem;color:#8b95a5;max-width:none}
section.band{background:var(--hot);color:#0b0c0f}
.band h2{margin:0 0 .4rem}
.band p{color:#3a1a0c;margin:0;max-width:54ch}
.band .wrap{display:grid;grid-template-columns:1fr auto;gap:1.6rem;align-items:center}
.band .btn-a{background:#0b0c0f;color:var(--hot)}

/* compact menu */
.menu{display:none;margin-left:.4rem}
.menu summary{list-style:none;cursor:pointer;display:grid;gap:4px;border:1px solid var(--line);
background:var(--card);width:42px;height:42px;align-content:center;justify-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:18px;height:2px;background:var(--bone)}
.menu[open] summary{border-color:var(--hot)}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg2);
border-bottom:1px solid var(--line);display:grid;padding:.5rem 4vw 1rem}
.menu-panel a{font-family:Oswald,sans-serif;font-weight:500;font-size:1rem;
letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--bone);
padding:.85rem .2rem;border-bottom:1px solid var(--line)}
.menu-panel a:last-child{border-bottom:0}
.menu-panel a[aria-current]{color:var(--hot)}

@media (max-width:960px){
.plates,.reel,.tiers{grid-template-columns:repeat(2,1fr)}
.duo,.post{grid-template-columns:1fr}
.duo.flip>*:first-child{order:0}
.side{position:static}
.foot .cols{grid-template-columns:repeat(2,1fr)}
.band .wrap{grid-template-columns:1fr}
}
@media (max-width:620px){
.plates,.reel,.tiers,.foot .cols{grid-template-columns:1fr}
.nav{display:none}
.menu{display:block}
.slats li{grid-template-columns:3rem 1fr;gap:1rem}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* inline style attributes, externalised for style-src 'self' */
.u-34b379{margin-top:1.3rem}
.u-39eadb{margin-top:1.4rem}
.u-3abfdd{grid-template-columns:repeat(4,1fr)}
.u-5c2e56{margin-top:.8rem}
.u-76e07c{margin-top:1.2rem}
.u-80dfcf{margin-top:1.5rem}
.u-ab79ea{margin:0}
.u-ade277{display:grid;grid-template-columns:1fr 1.4fr}
.u-aedc8a{grid-template-columns:repeat(2,1fr)}
.u-bf2682{margin-top:.6rem}
.u-cc6c10{margin-top:2rem}
.u-e3dbba{margin:1.6rem 0}
.u-eabc39{margin-top:1.2rem;grid-template-columns:1fr}
.u-fe48d7{color:inherit;text-decoration:none}
/* the enquiry honeypot: never shown, never focusable */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- email signup dock. NO JAVASCRIPT ANYWHERE ON THIS SITE ---------------
   sites-01 serves every hosted page with `script-src 'none'`, which is the
   primary XSS control on a customer domain. So this is not a popup in the
   Omnisend sense and cannot be: there is no timer and no exit intent, because
   both need script. It is a native <details> the visitor opens, plus a real
   <form> that posts across origins the way the contact form already does.

   80rem, not 48rem. The panel is 22rem fixed to the right edge with a 1rem
   inset and the measure is 64ch centred, so they stop overlapping only once
   half the viewport less half the measure clears the panel:
   V/2 - 512/2 >= 352 + 16  ->  V >= 1248px. Below that there is no dismiss
   control to get it off the text, because a dismiss control needs script. */
@media (min-width:80rem){
  .signup{position:fixed;inset-block-end:1rem;inset-inline-end:1rem;z-index:40;
    width:22rem;max-width:calc(100vw - 2rem);background:var(--card);
    border:1px solid var(--line);box-shadow:0 2px 16px rgba(0,0,0,.45)}
  .signup[open]{display:flex;flex-direction:column;
    max-block-size:calc(100dvh - 2rem)}
  /* The PANEL scrolls, never the <details>: <summary> fills the details' own
     padding box, so an overflow there clips the summary's 3px focus ring at
     its own edge and the keyboard ring vanishes exactly while the dock is
     open. */
  .signup[open] .signup-panel{min-block-size:0;overflow-y:auto}
}
.signup{margin:0}
.signup summary{cursor:pointer;list-style:none;padding:.9rem 1rem;
  font-family:Oswald,sans-serif;font-weight:600;font-size:.98rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--bone);
  min-height:44px;display:block}
.signup summary::-webkit-details-marker{display:none}
.signup summary span{display:block;margin-top:.25rem;font-family:Inter,sans-serif;
  font-weight:400;font-size:.82rem;letter-spacing:0;text-transform:none;
  color:var(--mid)}
.signup summary:hover{color:var(--hot)}
.signup-panel{padding:0 1rem 1rem}
.signup .form{max-width:none;gap:.7rem}
.signup-note{font-size:.8rem;color:var(--mid);margin:0;max-width:none}