/* Columen for trades. Traditional layout on cold-press paper.
   Brand: warm charcoal + brass from the column mark (token names kept from the navy era), WhatsApp green on the WhatsApp logo only, Archivo for everything, Marcellus for the wordmark only.
   One deliberate light look, so colours are set explicitly. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@font-face{font-family:Marcellus;src:url(/assets/fonts/marcellus.woff2) format('woff2');font-display:swap}
:root{
  --paper:#F1EFE9; --paper-hi:#F7F6F2; --ink:#1C1B19; --dim:#56514A; --rule:#DDD4C3; --rule-soft:#E9E2D4;
  --navy:#262421; --navy-deep:#181715; --gold:#B4893F; --gold-deep:#8E6421; --gold-light:#E6CB94;
  --wa:#25D366; --bad:#A3291F; --good:#2D6A39;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* cold-press paper, embossed tooth (assets/paper.svg) */
  --grain:url(/assets/paper.svg);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);background-image:var(--grain);color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.gut{padding-left:max(20px,env(safe-area-inset-left,0px),4vw);padding-right:max(20px,env(safe-area-inset-right,0px),4vw)}
.in{max-width:1180px;margin:0 auto}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper-hi);background-image:var(--grain);border-bottom:1px solid var(--rule)}
.top .in{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 22px Marcellus,Georgia,serif;letter-spacing:.04em;color:var(--navy)}
.brand svg{width:22px;height:22px;color:var(--gold)}
.links{display:flex;align-items:center;gap:26px;font:500 15px var(--font)}
.links a{text-decoration:none}
.links .tel{font-weight:700}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:6px;text-decoration:none;font:650 16px var(--font);border:2px solid var(--navy);cursor:pointer}
.btn.solid{background:var(--navy);color:#fff}
.btn.line{background:transparent;color:var(--navy)}
.btn .wa-logo{color:var(--wa)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.btn.light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn.sm{padding:10px 16px;font-size:15px}
.btn svg{width:18px;height:18px;flex:none}

/* type */
h1{font:800 clamp(40px,4.7vw,68px)/1.02 var(--font);letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
h1 span,h1 em{display:block}
h1 em{font-style:normal;color:var(--gold-deep)}
h2{font:800 clamp(32px,3.5vw,50px)/1.05 var(--font);letter-spacing:-.02em;margin:0 0 16px;max-width:20ch;text-wrap:balance}
h3{font:750 19px/1.3 var(--font);margin:0}
.intro{color:var(--dim);font-size:clamp(17px,1.3vw,19px);max-width:56ch;margin:0}
.sec{padding-block:104px}
.sec+.sec{border-top:1px solid var(--rule)}
.head{margin-bottom:48px}

/* 1 hero */
.hero .in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-block:76px 72px}
.kicker{margin:0 0 18px;font:600 16px var(--font);color:var(--dim)}
.sub{font-size:clamp(18px,1.4vw,20px);color:var(--dim);max-width:40ch;margin:0 0 30px}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.ticks{margin:26px 0 0;font:550 15px var(--font);color:var(--ink)}
.ticks span+span::before{content:"·";margin:0 10px;color:var(--gold-deep)}
.callline{margin:12px 0 0;font-size:15px;color:var(--dim)}
.callline a{font-weight:700;color:var(--ink)}
.demo{justify-self:center;width:100%;max-width:370px;margin:0;display:grid;gap:12px}
/* WhatsApp dark mode, drawn in CSS so it stays sharp. Number is from Ofcom's drama range (07700 900xxx). */
.wa{--wa-bg:#0B141A;--wa-bar:#1F2C34;--wa-in:#202C33;--wa-out:#005C4B;--wa-txt:#E9EDEF;--wa-dim:#8696A0;--wa-green:#00A884;--wa-blue:#53BDEB;
  background:var(--wa-bg);color:var(--wa-txt);border-radius:34px;border:8px solid #050607;overflow:hidden;box-shadow:0 34px 70px -30px rgba(10,17,28,.55);font:400 15px/1.35 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.wa-status{display:flex;justify-content:space-between;align-items:center;padding:10px 22px 4px;background:var(--wa-bar);font-weight:600;font-size:14px}
.wa-sig{display:flex;align-items:flex-end;gap:2px;height:11px}
.wa-sig i{width:3px;background:var(--wa-txt);border-radius:1px}
.wa-sig i:nth-child(1){height:4px}.wa-sig i:nth-child(2){height:6px}.wa-sig i:nth-child(3){height:8px}.wa-sig i:nth-child(4){height:11px}
.wa-head{display:flex;align-items:center;gap:10px;padding:8px 14px 10px 8px;background:var(--wa-bar)}
.wa-head svg{flex:none}
.wa-back{width:24px;height:24px;color:var(--wa-txt)}
.wa-av{width:36px;height:36px;border-radius:50%;background:#6A7175;color:#CFD4D6;display:grid;place-items:end center;overflow:hidden;flex:none}
.wa-av svg{width:30px;height:30px}
.wa-who{display:grid;flex:1;min-width:0;line-height:1.2}
.wa-who b{font-weight:600;font-size:16px}
.wa-who small{color:var(--wa-dim);font-size:12.5px}
.wa-ic{width:22px;height:22px;color:var(--wa-txt);margin-left:14px}
.wa-chat{display:grid;gap:6px;padding:12px 12px 14px;background:var(--wa-bg) radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.2px) 0 0/14px 14px}
.wa-day{justify-self:center;background:#182229;color:var(--wa-dim);font-size:12.5px;padding:5px 12px;border-radius:8px;margin-bottom:4px}
.wa-b{max-width:84%;padding:6px 9px 7px;border-radius:8px;font-size:14.5px;line-height:1.36;position:relative;margin:0}
.wa-b time{float:right;margin:6px 0 -4px 10px;font-size:11px;color:rgba(233,237,239,.6);display:inline-flex;align-items:center;gap:3px}
.wa-b.rx{justify-self:start;background:var(--wa-in);border-top-left-radius:0}
.wa-b.tx{justify-self:end;background:var(--wa-out);border-top-right-radius:0}
.tk{width:16px;height:10px;color:var(--wa-blue)}
.wa-b.call{display:flex;align-items:center;gap:10px;padding:8px 10px}
.wa-b.call b{display:block;font-weight:600;font-size:14.5px}
.wa-b.call small{color:var(--wa-dim);font-size:12.5px}
.wa-b.call time{float:none;align-self:flex-end;margin:0 0 -2px 6px}
.wa-miss{width:34px;height:34px;border-radius:50%;background:rgba(241,92,109,.16);color:#F15C6D;display:grid;place-items:center;flex:none}
.wa-miss svg{width:17px;height:17px}
.wa-bar{display:flex;align-items:center;gap:8px;padding:8px 10px 14px;background:var(--wa-bg)}
.wa-in{flex:1;background:var(--wa-bar);color:var(--wa-dim);border-radius:999px;padding:11px 16px;font-size:15px}
.wa-mic{width:44px;height:44px;border-radius:50%;background:var(--wa-green);color:#0B141A;display:grid;place-items:center;flex:none}
.wa-mic svg{width:20px;height:20px}
.cap{font-size:13px;color:var(--dim);text-align:center}


/* 2 a day on the job: a ruled ledger, like a day book */
.day{border-top:2px solid var(--ink)}
.day-h,.row{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);gap:0 40px}
.day-h{padding:12px 0;border-bottom:1px solid var(--ink);font:650 13px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.day-h span:last-child{color:var(--good)}
.row{padding:18px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.row time{font:700 20px/1.3 var(--font);font-variant-numeric:tabular-nums;font-stretch:90%;color:var(--navy)}
.row p{margin:0}
.row .now{font-size:18px;line-height:1.45;font-weight:600}
.row .now b{font-weight:700;color:var(--bad)}
.row .fix{color:var(--good);font-weight:600}
.row .fix{padding-left:1.1em;text-indent:-1.1em}
.row .fix::before{display:inline-block;width:1.1em;text-indent:0;font-weight:800}
.row .fix::before{content:"\2713"}
.day-end{margin:28px 0 0;font:600 clamp(18px,1.5vw,21px)/1.45 var(--font);max-width:58ch}

/* 3 story */
.story{background:var(--navy);color:#fff}
.story .in{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:72px;align-items:start}
.story h2{color:#fff;max-width:16ch}
.story p{margin:0 0 20px;color:rgba(255,255,255,.86);font-size:clamp(17px,1.35vw,19px);max-width:54ch}
.story .said{margin:30px 0 30px;padding:0 0 0 22px;border-left:2px solid var(--gold)}
.story .said p{font:500 clamp(21px,1.9vw,26px)/1.4 var(--font);color:#fff;margin:0 0 10px;max-width:30ch}
.story .said cite{font-style:normal;font-size:14px;color:rgba(255,255,255,.62)}
.me{margin:0;position:sticky;top:110px}
.me img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 0;border-radius:4px}
.me figcaption{margin-top:10px;font-size:13px;color:rgba(255,255,255,.6)}
.sign{display:flex;align-items:center;gap:14px;margin-top:30px}
.sign img{display:none;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.sign span{font:400 22px Marcellus,Georgia,serif;color:var(--gold-light);letter-spacing:.02em}
.sign small{display:block;font:500 14px var(--font);color:rgba(255,255,255,.62);letter-spacing:0;margin-top:2px}

/* 4 proof */
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:end}
.ba figure{margin:0;display:grid;gap:12px;min-width:0}
.handset{background:#0B0C0E;padding:7px;border-radius:30px;box-shadow:0 30px 60px -32px rgba(10,17,28,.55)}
.handset img{width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:23px}
.ba figcaption{font:600 14px var(--font);color:var(--dim);text-align:center}
.ba figure:last-child figcaption{color:var(--ink)}
.facts{margin:30px 0 0;border-top:2px solid var(--ink)}
.facts div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--rule)}
.facts dt{font:650 13px/1.9 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.facts dd{margin:0}

/* 5 pricing: a plain tariff */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.plan{padding:28px 28px 32px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:14px;min-width:0;border-bottom:1px solid var(--rule)}
.plan+.plan{border-left:1px solid var(--rule)}
.plan.pick{background:var(--paper-hi);background-image:var(--grain);box-shadow:inset 0 3px 0 var(--navy)}
.plan .flag{font:650 13px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);min-height:1.2em}
.plan h3{font-size:22px}
.price b{font:800 42px/1 var(--font);letter-spacing:-.02em}
.price b small{font:600 17px var(--font);letter-spacing:0;color:var(--dim)}
.price span{display:block;margin-top:6px;color:var(--dim);font-size:15px}
.plan ul{list-style:none;margin:6px 0 0;padding:0;display:grid;align-content:start}
.plan li{padding:9px 0;border-top:1px solid var(--rule-soft);font-size:16px;line-height:1.45}
.plan .btn{width:100%;margin-top:10px}
.note{margin-top:22px;color:var(--dim);font-size:15px;max-width:80ch}

/* 6 how it starts */
.how-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.how{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.how li{padding:18px 0;border-bottom:1px solid var(--rule)}
.how b{font-weight:700}
.how span{color:var(--dim)}

/* 7 faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.qs{border-top:2px solid var(--ink)}
.qs details{border-bottom:1px solid var(--rule);padding:4px 0}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font:700 18px/1.3 var(--font)}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";font:500 26px/1 var(--font);color:var(--gold-deep);flex:none}
.qs details[open] summary::after{content:"\2212"}
.qs details p{margin:0 0 18px;color:var(--dim);max-width:60ch}

/* 8 end */
.end{background:var(--navy-deep);color:#fff;text-align:center}
.end .in{display:grid;justify-items:center;gap:6px}
.end h2{color:#fff;margin-inline:auto}
.end .intro{color:rgba(255,255,255,.75);margin-bottom:26px}
.end .acts{justify-content:center}
.end .or{margin-top:18px;color:rgba(255,255,255,.7);font-size:15px}
.end .or a{color:#fff;font-weight:700}
.foot{background:var(--navy-deep);color:rgba(255,255,255,.6);font-size:14px;border-top:1px solid rgba(255,255,255,.1)}
.foot .in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:24px}
.foot .brand{font-size:18px;color:#fff}
.foot a{color:inherit}
.sticky{display:none}

@media (max-width:980px){
  .hero .in,.story .in,.case,.faq,.how-wrap{grid-template-columns:1fr;gap:44px}
  .hero .in{padding-block:44px 64px}
  .links a:not(.tel):not(.btn){display:none}
  .plans{grid-template-columns:1fr;max-width:560px}
  .plan+.plan{border-left:0}
  .plan.pick{order:-1}
  .me{display:none}
  .sign img{display:block}
  .ba{max-width:520px}
}
@media (max-width:640px){
  body{padding-bottom:78px}
  .links .tel{display:none}
  .sec{padding-block:68px}
  .head{margin-bottom:32px}
  .acts{display:grid}
  .ticks span{display:block;padding:3px 0}
  .ticks span+span::before{content:none}
  .day-h{display:none}
  .row{grid-template-columns:62px minmax(0,1fr);gap:2px 12px;padding:14px 0}
  .row time{font-size:15px;grid-row:span 2}
  .row .now{font-size:16px}
  .row .fix{font-size:15px;line-height:1.4}
  .facts div{grid-template-columns:1fr}
  .ba{gap:14px}
  .handset{padding:5px;border-radius:22px}
  .handset img{border-radius:18px}
  .plan{padding:24px 4px 28px}
  .plan.pick{padding-inline:18px;margin-inline:-18px;box-shadow:none}
  .sticky{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px));background:var(--paper-hi);border-top:1px solid var(--rule)}
  .sticky .btn{padding:13px 10px;font-size:15px}
}