:root{
  --bg:#050A14;
  --ink:#EAF1FB;
  --muted:#93A6C2;
  --blue:#4D94FF;
  --cyan:#8AD8FF;
  --mint:#46E3B0;
  --amber:#FFB547;
  --lav:#A3A9FF;
  --panel:rgba(9,17,32,.84);
  --edge:rgba(138,190,255,.18);
  --display:"Anybody","Arial Black",Impact,sans-serif;
  --body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",Verdana,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
#bg-dots{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page{position:relative;z-index:1}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,5vw,56px)}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,var(--cyan))}
.muted{color:var(--muted)}

/* accessibility + trust */
.skip{position:absolute;left:12px;top:-80px;z-index:60;background:var(--blue);color:#04101F;font-weight:700;padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--cyan)}
.crumbs span[aria-current]{color:var(--ink)}
.trust{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.cta-band blockquote{margin:16px 0 0;padding-left:14px;border-left:2px solid var(--edge);color:var(--ink);max-width:40em}
.cta-band blockquote cite{display:block;margin-top:4px;font-style:normal;color:var(--muted);font-size:.88rem}
/* In Contact's narrow side column the display-face .quote read like a headline; there it is set as text. */
.contact-side .quote{font-family:inherit;font-weight:400;font-variation-settings:normal;font-size:1.1rem;line-height:1.5;color:var(--ink);text-wrap:pretty;margin:10px 0 8px}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(5,10,20,.92);border-bottom:1px solid rgba(138,190,255,.08)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:70px;position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand b{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 104;font-size:1.4rem;letter-spacing:.02em;color:var(--ink)}
.brand b i{font-style:normal;color:inherit}
.brand span{font-size:.82rem;color:var(--muted)}
.brand img{width:30px;height:30px;display:block}

/* the WITS mark: draws itself in once, and re-writes the tick on hover */
.brand .mark{width:34px;height:34px;flex:none;overflow:visible}
.mark .m-arc{fill:none;stroke-width:40}
.mark .m-w{fill:#0DBEBB;fill-opacity:.22}
.mark .m-tick{fill:#0DBEBB}
@media (prefers-reduced-motion:no-preference){
  .brand .mark .m-arc{stroke-dasharray:1;animation:m-draw 1.1s cubic-bezier(.6,0,.2,1) both}
  .brand .mark .m-arc-b{animation-delay:.15s}
  .brand .mark .m-w{animation:m-fade .6s .5s both}
  .brand .mark .m-tick{animation:m-tick .6s .85s cubic-bezier(.2,.8,.2,1) both}
  .brand:hover .mark .m-tick,.brand:focus-visible .mark .m-tick{animation:m-tick-again .6s cubic-bezier(.2,.8,.2,1) both}
  .emblem .mark .m-arc{stroke-dasharray:1;animation:m-draw 1.6s .2s cubic-bezier(.6,0,.2,1) both}
  .emblem .mark .m-arc-b{animation-delay:.4s}
  .emblem .mark .m-w{animation:m-fade .8s .9s both}
  .emblem .mark .m-tick{animation:m-tick .7s 1.3s cubic-bezier(.2,.8,.2,1) both}
  .emblem:hover .mark .m-tick{animation:m-tick-again .6s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes m-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-tick{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes m-tick-again{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:.95rem;white-space:nowrap}
.nav a:hover{color:var(--ink);background:rgba(138,190,255,.07)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--cyan);border-radius:8px 8px 0 0}
.menu-btn{display:none;background:transparent;border:1px solid var(--edge);color:var(--ink);border-radius:10px;padding:8px 12px;font:inherit;font-size:.9rem;cursor:pointer}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#04101F;font-weight:700;text-decoration:none;border-radius:999px;padding:11px 19px;border:0;cursor:pointer;line-height:1.2;white-space:nowrap;font-family:var(--body);font-size:1rem}
.cta:hover{background:var(--cyan)}
.cta.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge)}
.cta.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--cyan);color:var(--cyan)}
.cta.small{padding:9px 15px;font-size:.92rem}

/* hero */
.hero{padding-block:clamp(44px,7vw,100px) clamp(36px,5vw,72px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:center}
h1{font-family:var(--display);font-weight:850;font-variation-settings:"wdth" 110;font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:.98;letter-spacing:-.015em;margin:14px 0 0;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent,var(--blue))}
.lead{margin-top:18px;font-size:1.15rem;color:var(--muted);max-width:38em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:24px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}
.emblem{width:100%;max-width:340px;aspect-ratio:1/1;justify-self:center}
.emblem .mark{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 0 32px rgba(13,190,187,.28))}

/* sections */
section.block{padding-block:clamp(44px,6vw,88px)}
section.block.tight{padding-top:0}
.sec-head{max-width:46rem;display:grid;gap:10px;margin-bottom:30px}
h2{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 108;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.05;margin:0;text-wrap:balance}
h3{font-family:var(--display);font-weight:750;font-variation-settings:"wdth" 104;font-size:1.22rem;line-height:1.2;margin:0}
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:16px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:12px}
.ticks li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent,var(--cyan));box-shadow:0 0 10px var(--accent,var(--cyan));margin-top:.66em}
.ticks.no li::before{background:var(--muted);box-shadow:none}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.col{padding:clamp(20px,3vw,30px);display:grid;gap:16px;align-content:start}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{padding:22px;display:grid;gap:8px;align-content:start}
.card .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,var(--cyan))}
.card p{color:var(--muted)}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.price{padding:22px;display:grid;gap:6px;align-content:start}
.price .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,var(--cyan))}
.price .num{font-family:var(--display);font-weight:850;font-variation-settings:"wdth" 116;font-size:2.3rem;line-height:1.05;font-variant-numeric:tabular-nums}
.price .num small{font-family:var(--body);font-weight:400;font-size:.92rem;color:var(--muted)}
.price p{color:var(--muted);font-size:.95rem}
.note{margin-top:16px;font-size:.92rem;color:var(--muted);max-width:60em}

/* service hub */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.svc{padding:24px;display:grid;grid-template-columns:auto 1fr;gap:18px;text-decoration:none;align-items:start;transition:border-color .2s,transform .2s}
.svc:hover{border-color:var(--c);transform:translateY(-2px)}
.svc .node-dot{width:14px;height:14px;margin:8px 4px 0;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px rgba(138,190,255,.1),0 0 16px var(--c)}
.svc h3{margin-bottom:6px}
.svc p{color:var(--muted);font-size:.97rem}
.svc .go{display:inline-block;margin-top:10px;font-weight:700;color:var(--c)}

/* layout variants */
.ticks.two{display:block;columns:2;column-gap:36px}
.ticks.two li{display:grid;break-inside:avoid;margin-bottom:10px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
footer.site li{overflow-wrap:anywhere}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s}
.steps.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps li{counter-increment:s;padding:22px;display:grid;gap:8px;align-content:start}
.steps li::before{content:"Step " counter(s);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.steps p{color:var(--muted)}

/* faq */
.faq{border-bottom:1px solid var(--edge);padding-block:14px}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan);font-family:var(--mono);font-size:1.2rem;line-height:1}
.faq[open] summary::after{content:"−"}
.faq p{margin-top:10px;color:var(--muted);max-width:62em}

/* related */
.related{display:flex;flex-wrap:wrap;gap:10px}
.related a{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border-radius:999px;border:1px solid var(--edge);text-decoration:none;font-size:.95rem;background:rgba(9,17,32,.7)}
.related a i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.related a:hover{border-color:var(--c)}

/* table */
.table-scroll{overflow-x:auto;border-radius:16px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--edge);vertical-align:top}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
thead th{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
tbody th{font-weight:700}
tbody th small{display:block;font-weight:400;color:var(--muted);font-size:.85rem}
td.num{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 112;font-size:1.4rem;white-space:nowrap}
td.num small{font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--muted)}
td.fit{color:var(--muted);font-size:.95rem;min-width:16rem}

/* estimator */
.est{padding:22px;display:grid;gap:14px}
.est-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:end}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{background:transparent;border:1px solid var(--edge);border-radius:999px;padding:6px 12px;font:inherit;font-size:.88rem;cursor:pointer;color:var(--muted)}
.pill[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#04101F;font-weight:700}
.est input[type=range]{width:100%;accent-color:var(--cyan)}
.est .hours{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);font-variant-numeric:tabular-nums}
.est-total{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 120;font-size:2.8rem;line-height:1;font-variant-numeric:tabular-nums;text-align:right}
.est-note{font-size:.88rem;color:var(--muted)}

/* contact */
.big-phone{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 104;font-size:clamp(1.7rem,4vw,3rem);line-height:1;text-decoration:none;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 20%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.form{padding:clamp(20px,3vw,30px);display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px}
.field label{font-weight:700;font-size:.93rem}
.field small{color:var(--muted);font-size:.84rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:rgba(3,8,16,.7);border:1px solid var(--edge);border-radius:10px;padding:11px 13px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(138,216,255,.15)}
.warn{font-size:.88rem;color:var(--amber)}
.quote{font-family:var(--display);font-weight:650;font-variation-settings:"wdth" 96;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.22;margin:0;text-wrap:balance}

/* cta band */
.cta-band{padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.cta-band p{color:var(--muted);margin-top:8px;max-width:40em}
.cta-band .side{display:grid;gap:12px;justify-items:start}

/* footer */
footer.site{border-top:1px solid var(--edge);padding-block:40px 70px;color:var(--muted);font-size:.88rem;background:rgba(5,10,20,.85)}
footer.site .wrap{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:28px}
footer.site .fh{margin:0 0 10px;font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.nav .nav-book{display:none}

/* terms and privacy: a contents list beside readable sections */
.legal{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.toc{position:sticky;top:96px;font-size:.9rem}
.toc ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:5px 8px;border-radius:6px;color:var(--muted);text-decoration:none;line-height:1.35}
.toc a:hover{color:var(--ink);background:rgba(138,190,255,.07)}
.prose{max-width:74ch;display:grid;gap:30px}
.legal-intro{display:grid;gap:12px;color:var(--muted)}
.legal-intro strong{color:var(--ink)}
.legal-sec{display:grid;gap:12px;padding-top:26px;border-top:1px solid var(--edge);scroll-margin-top:96px}
.legal-sec h2{font-size:clamp(1.3rem,2.2vw,1.65rem)}
.legal-sec .legal-sub{color:var(--ink);font-weight:700}
.legal-sec p,.legal-sec li{color:var(--muted)}
.legal-sec strong{color:var(--ink)}
.legal-sec ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.legal a,.legal-intro a{color:var(--cyan)}
@media (max-width:900px){.legal{grid-template-columns:1fr}.toc{position:static}}
/* thanks page */
.thanks-support{margin-top:12px;max-width:60ch}
.thanks-card{margin-top:26px;padding:20px 22px;display:grid;gap:12px}
.thanks-card p{color:var(--ink)}

/* services network (network.js) */
.net{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:center}
.net-stage{position:relative;width:100%}
.net-stage canvas{display:none}
.net-labels{display:flex;flex-wrap:wrap;gap:8px}
.net-label{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;padding:7px 13px;border-radius:999px;background:rgba(7,14,27,.84);border:1px solid var(--edge);color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s,opacity .3s}
.net-label:hover,.net-label:focus-visible,.net-label.on{border-color:var(--cyan);color:var(--cyan)}
.net.live .net-stage{aspect-ratio:4/3}
.net.live .net-stage canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.net.live .net-labels{position:absolute;inset:0;display:block;pointer-events:none}
.net.live .net-label{position:absolute;left:0;top:0;pointer-events:auto;opacity:var(--in,1);will-change:transform}
/* phones: a square picture, then every service as a clear, tappable button */
.net.live.small .net-stage{aspect-ratio:1/1}
.net.small .net-labels{position:static;display:flex;flex-wrap:wrap;gap:8px;pointer-events:auto;grid-column:1/-1}
.net.small .net-labels::before{content:"Tap a service to see what WITS does";flex-basis:100%;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.net.small .net-label{position:static;opacity:1;transform:none;font-size:.84rem;padding:9px 13px}
.net-card{padding:20px 22px;display:grid;gap:10px;align-content:start}
.net-card h3{font-size:1.3rem}
.net-card p{color:var(--muted);margin:0}
@media (max-width:900px){
  .net{grid-template-columns:1fr}
  .net.live .net-stage{aspect-ratio:4/5}
}

/* Open layout: boxes only for things people click, compare or fill in (service cards, prices, the
   estimator, tables, the contact form, the network readout). Everything else sits on the page itself,
   divided by thin rules rather than borders. */
.col.panel,.card.panel,.steps li.panel,.cta-band.panel{background:none;border:0;border-radius:0}
.col.panel{padding:0}
.cards{gap:26px 34px}
.card.panel{padding:18px 0 0;border-top:1px solid var(--edge)}
.steps{gap:26px 34px}
.steps li.panel{padding:16px 0 0;border-top:1px solid var(--edge)}
.cta-band.panel{position:relative;padding:clamp(32px,5vw,60px) 0;border-block:1px solid var(--edge)}
.cta-band.panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 42% 70% at 76% 50%,rgba(77,148,255,.11),transparent 70%)}
.cta-band.panel > *{position:relative}

/* price cards lead somewhere */
a.price{color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
a.price:hover,a.price:focus-visible{border-color:var(--accent,var(--cyan));transform:translateY(-2px)}
.price .go{margin-top:6px;font-weight:700;font-size:.92rem;color:var(--accent,var(--cyan))}
.booking-hint{flex-basis:100%;margin:4px 0 0;color:var(--ink)}
.booking-hint b{color:var(--cyan)}
@media (prefers-reduced-motion:reduce){a.price{transition:none}}

/* the live contact and booking forms (same markup and field names as williamsitsolutions.co.uk) */
.contact-side{display:grid;gap:28px;align-content:start}
.form-title{font-size:1.6rem}
#contact-form,.contact-meta{display:grid;gap:18px}
.contact-meta label,.contact-meta legend{display:block;font-weight:700;margin-bottom:6px}
.contact-meta fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.contact-meta input:not([type=checkbox]):not([type=file]):not([type=hidden]),.contact-meta select,.contact-meta textarea,.booking-duration-picker select{width:100%;font:inherit;color:var(--ink);background:rgba(3,8,16,.75);border:1px solid var(--edge);border-radius:12px;padding:12px 14px}
.contact-meta textarea{min-height:140px;resize:vertical}
.contact-meta input:focus-visible,.contact-meta select:focus-visible,.contact-meta textarea:focus-visible,.booking-duration-picker select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.contact-meta input[type=file]{color:var(--muted);font:inherit}
#contact-form details summary{cursor:pointer;font-weight:700;color:var(--cyan)}
#contact-form details[open] summary{margin-bottom:14px}
.form-help{font-size:.9rem;color:var(--muted);margin:0}
.form-status{margin:0;color:var(--amber);font-weight:700}
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid var(--edge);background:transparent;color:var(--ink)}
.button.primary{background:var(--blue);border-color:var(--blue);color:#050A14}
.button.small{padding:8px 16px;font-size:.92rem}
.button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.preview-note{font-family:var(--mono);font-size:.84rem;font-weight:400}
@media (max-width:640px){.grid-2{grid-template-columns:1fr}}

/* live booking flow: booking-flow.js drives these classes */
.booking-notice{margin:0 0 6px;color:var(--ink)}
.booking-preview-note{color:var(--amber);font-family:var(--mono);font-size:.82rem;margin:0 0 18px}
.booking-flow-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,4vw,48px);align-items:start}
.booking-flow-card,.booking-summary-card,.booking-process-card{display:grid;gap:18px;padding:0}
.section-header{display:grid;gap:8px}
.section-title{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1}
.section-lead{color:var(--ink);margin:0}
.section-subhead{color:var(--muted);margin:0}
.booking-flow-steps{display:grid;gap:26px}
.booking-step{display:grid;gap:14px;padding-top:18px;border-top:1px solid var(--edge)}
.booking-step.is-disabled{opacity:.55}
.booking-step__header{display:grid;gap:4px}
.booking-step__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.booking-step__header p{color:var(--muted);margin:4px 0 0}
.booking-step__tools,.booking-calendar-toolbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end}
.booking-duration-picker{display:grid;gap:6px;min-width:220px}
.booking-duration-picker label{font-weight:700}
.booking-note{color:var(--muted);font-size:.92rem;margin:0}
.booking-note--compact{font-size:.86rem}
.booking-step-state{color:var(--muted);font-size:.95rem;margin:0}
.booking-step-state--error{color:var(--amber)}
.booking-selected-slot{font-weight:700;color:var(--cyan);margin:0}
.booking-calendar-view-switch{display:inline-flex;border:1px solid var(--edge);border-radius:999px;padding:3px}
.booking-calendar-view-switch__button{font:inherit;font-size:.88rem;padding:6px 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.booking-calendar-view-switch__button.is-active{background:rgba(77,148,255,.2);color:var(--ink)}
.booking-calendar-shell,.booking-time-panel,.booking-form-panel,.booking-request-summary{display:grid;gap:12px}
.booking-calendar-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.booking-calendar-nav__summary{display:grid;text-align:center}
.booking-calendar-nav__button{font:inherit;font-size:.9rem;padding:7px 14px;border-radius:999px;border:1px solid var(--edge);background:transparent;color:var(--ink);cursor:pointer}
.booking-calendar-nav__button:disabled{opacity:.4;cursor:default}
.booking-calendar-week-grid,.booking-calendar-days,.booking-calendar-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.booking-calendar-weekdays span{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-align:center}
.booking-year-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.booking-week-day,.booking-calendar-date,.booking-year-month{display:grid;gap:2px;justify-items:center;text-align:center;padding:10px 6px;border-radius:12px;border:1px solid var(--edge);background:var(--panel);color:var(--muted);font:inherit;font-size:.9rem}
button.booking-week-day,button.booking-calendar-date,button.booking-year-month{cursor:pointer;color:var(--ink)}
.booking-week-day.is-selectable,.booking-calendar-date.is-selectable{border-color:rgba(70,227,176,.45)}
.booking-week-day.is-unavailable,.booking-calendar-date.is-unavailable{opacity:.45}
.booking-week-day.is-selected,.booking-calendar-date.is-selected,.booking-year-month.is-current{border-color:var(--cyan);background:rgba(77,148,255,.18)}
.booking-calendar-date.is-today .booking-calendar-date__number,.booking-week-day.is-today .booking-week-day__title{color:var(--amber)}
.booking-calendar-date--empty{visibility:hidden}
.booking-week-day__eyebrow,.booking-year-month__eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.booking-week-day__title,.booking-calendar-date__number,.booking-year-month__title{font-weight:700;font-size:1.05rem}
.booking-week-day__meta,.booking-calendar-date__meta,.booking-year-month__meta{font-size:.72rem;color:var(--muted)}
.booking-calendar-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:.82rem;color:var(--muted)}
.booking-calendar-legend__item{display:inline-flex;align-items:center;gap:8px}
.booking-calendar-legend__dot{width:9px;height:9px;border-radius:50%}
.booking-calendar-legend__dot--available{background:var(--mint)}
.booking-calendar-legend__dot--today{background:var(--amber)}
.booking-slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.booking-slot-button{font:inherit;padding:10px 8px;border-radius:12px;border:1px solid rgba(70,227,176,.45);background:var(--panel);color:var(--ink);cursor:pointer}
.booking-slot-button.is-selected{border-color:var(--cyan);background:rgba(77,148,255,.22)}
.booking-request-summary__header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px}
.booking-request-summary__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 20px}
.booking-request-summary__item,.booking-stat,.booking-time-panel__summary{display:grid;gap:2px}
.booking-request-summary__label,.booking-stat__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.booking-confirmation-checkbox{display:flex;gap:10px;align-items:flex-start;font-weight:400!important}
.booking-confirmation-checkbox input{margin-top:.3em;accent-color:var(--cyan)}
.booking-sidebar{display:grid;gap:28px;position:sticky;top:96px}
.booking-overview-card__eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.booking-stat-grid{display:grid;gap:12px}
.booking-stat__value--lead{font-size:1.3rem;color:var(--mint)}
.booking-stat__value.is-empty{color:var(--muted)}
.booking-stat__hint{font-size:.82rem;color:var(--muted)}
.booking-calendar-actions{display:flex;flex-wrap:wrap;gap:10px}
.booking-trust-list{display:grid;gap:8px}
.booking-trust-list p,.booking-process-note{margin:0;color:var(--muted)}
.booking-trust-list strong{color:var(--ink)}
.booking-empty-state{display:grid;gap:8px}
/* On phones every grid and flex box in the booking flow sized its column to its widest content (long select
   options, the summary grid, the duration picker), which pushed the page 19px past the screen edge. Letting
   everything inside shrink keeps the page to the screen, including the steps shown after a date is picked. */
@media (max-width:900px){
  .booking-flow-layout{grid-template-columns:minmax(0,1fr)}
  .booking-sidebar{position:static}
  #booking-request *{min-width:0}
  #booking-request select,#booking-request input,#booking-request textarea{max-width:100%}
  /* The same on every form: on Contact a select's longest option pushed "Service needed" and "Is this urgent?"
     39px past a phone's edge, where the page cut them off. */
  main form *{min-width:0}
  main form select,main form input,main form textarea{max-width:100%}
}
@media (max-width:560px){.booking-calendar-week-grid,.booking-calendar-days,.booking-calendar-weekdays{gap:4px}.booking-week-day,.booking-calendar-date{padding:8px 2px;font-size:.8rem}}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--cyan)}
footer.site p+p{margin-top:8px}
.draft{position:fixed;left:14px;bottom:14px;z-index:40;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:rgba(40,28,6,.9);color:var(--amber);border:1px solid rgba(255,181,71,.3)}
@media (max-width:760px){.draft{position:static;display:block;width:max-content;max-width:calc(100% - 32px);margin:24px auto 96px}}

@media (max-width:900px){
  .nav{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;background:rgba(5,10,20,.98);padding:10px 16px 18px;border-bottom:1px solid var(--edge)}
  .nav.open{display:flex}
  .nav a{padding:12px}
  .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--cyan);border-radius:0 8px 8px 0}
  .menu-btn{display:inline-flex;margin-left:auto}
  .brand span{display:none}
  .hero .wrap,.cols-2,.cta-band{grid-template-columns:1fr}
  .emblem{max-width:180px;order:-1}
  .steps,.steps.five{grid-template-columns:1fr}
  .ticks.two{columns:1}
  .cards.three,.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top .cta.book{margin-left:auto}
  .nav .nav-book{display:block}
  .menu-btn{margin-left:0}
  .est-grid{grid-template-columns:1fr}
  .est-total{text-align:left}
  footer.site .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .top .cta.book{display:none}
  .top .wrap{gap:10px}
  .top .cta{padding:8px 12px;font-size:.86rem}
  .form .row{grid-template-columns:1fr}
  .cards.three,.svc-grid{grid-template-columns:1fr}
  .menu-btn{margin-left:auto}
  footer.site .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .svc{transition:none}
}

/* Long pages: sections below the first are laid out and painted only when they come near the screen.
   The browser keeps each one's last known size, so scrolling and anchors stay steady. */
section.block ~ section.block,footer.site{content-visibility:auto;contain-intrinsic-size:auto 720px}
.emblem.person{max-width:300px}
.emblem.person picture{display:block;width:100%}
.emblem.person img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:2px solid rgba(138,216,255,.45);box-shadow:0 0 40px rgba(13,190,187,.18)}
/* On a phone the photo sits small above the headline, so the headline, the offer and the call button share the first screen. */
@media (max-width:900px){.hero .emblem.person{max-width:104px;justify-self:start;order:-1}}
/* The large WITS mark beside a page headline is decoration; on a phone or tablet it pushed the headline of the
   page an ad lands on half a screen down, and the header already shows the mark. */
@media (max-width:900px){.hero .emblem:not(.person){display:none}}
.about-proof{margin:0 auto;max-width:44em;font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.45;text-align:center;text-wrap:balance}
.about-proof cite{display:block;margin-top:10px;font-style:normal;font-size:.9rem;color:var(--muted)}

/* Header: switch to the Menu button while the full navigation would not fit (up to the content width, 1180px).
   Between 900px and about 1100px, including big screens at 125-150% zoom, the brand, seven links and both buttons
   ran wider than the window and every page scrolled sideways. */
@media (max-width:1180px){
  .nav{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;background:rgba(5,10,20,.98);padding:10px 16px 18px;border-bottom:1px solid var(--edge)}
  .nav.open{display:flex}
  .nav a{padding:12px}
  .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--cyan);border-radius:0 8px 8px 0}
  .menu-btn{display:inline-flex;margin-left:0}
  .top .cta.book{margin-left:auto}
  .nav .nav-book{display:block}
}