/* ============================================================
   COREX CIVILS site styles
   Black + sand. Montserrat display, Inter body.
   Matches the homepage direction so inner pages read as one site.
   ============================================================ */

:root{
  --night:#0C0C0C;
  --night-2:#121110;
  --night-3:#1A1815;
  --frost:#FFFFFF;
  --frost-dim:#A39B8D;
  --sand:#C9AD87;
  --sand-deep:#B89A72;
  --sand-pale:#DAC5A4;
  --line:rgba(255,255,255,.13);
  --line-sand:rgba(201,173,135,.32);
  --max:1320px;
  --pad:clamp(20px,4vw,60px);
  /* How far a list marker hangs left of the text origin. Tightened on phones so
     the marker stays clear of the screen edge without moving the text. */
  --hang:1.15rem;
  /* The one gutter between the two columns of every two column layout. */
  --colgap:clamp(1.6rem,4vw,4rem);
  --bs:'Montserrat',sans-serif;
  --body:'Inter',sans-serif;
  /* legacy aliases so older rules keep working */
  --black:#0C0C0C;
  --white:#FFFFFF;
  --ink-soft:#A39B8D;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--night);
  color:var(--frost);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--sand);color:var(--night)}

/* Sentence case per the brand rules. The heavy Montserrat weight carries the
   family resemblance to the homepage without long all-caps headlines. */
h1,h2,h3,h4,.display{
  font-family:var(--bs);
  font-weight:800;
  letter-spacing:-.005em;
  line-height:1.04;
  margin:0 0 .5em;
}
/* opt-in caps for short display lines */
.display-caps{text-transform:uppercase;letter-spacing:.005em;line-height:.98}
h1{font-size:clamp(2.3rem,5.6vw,4.6rem)}
h2{font-size:clamp(1.8rem,3.6vw,3rem)}
h3{font-size:clamp(1.1rem,1.7vw,1.45rem);letter-spacing:.02em}
h4{font-size:1rem}

p{margin:0 0 1.1rem}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--sand);outline-offset:4px}
img,svg,canvas{display:block;max-width:100%}

.container{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

.eyebrow{
  font-family:var(--bs);font-weight:700;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sand);margin:0 0 .9rem;display:inline-block;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--bs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;
  padding:1.15em 2.4em;border-radius:4px;border:1.5px solid transparent;
  transition:box-shadow .3s ease,transform .15s ease,background .25s ease,color .25s ease,border-color .25s ease;
  cursor:pointer;white-space:nowrap;
}
.btn-primary{background:var(--sand);color:var(--night)}
.btn-primary:hover{box-shadow:0 0 34px rgba(201,173,135,.45);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--frost);border-color:var(--line-sand)}
.btn-outline:hover{background:var(--frost);color:var(--night);border-color:var(--frost)}
.btn-light{background:var(--sand);color:var(--night)}
.btn-light:hover{box-shadow:0 0 34px rgba(201,173,135,.45);transform:translateY(-2px)}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:60;
  background:rgba(12,12,12,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:.85rem;
}
.brand{display:inline-flex;align-items:center;gap:.7rem}
.brand-x{
  width:36px;height:36px;flex:0 0 auto;display:block;
  border:1px solid var(--line-sand);border-radius:8px;overflow:hidden;
}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark .wm-top{
  font-family:var(--bs);font-weight:800;
  font-size:1.05rem;letter-spacing:.1em;color:var(--frost);
}
.wordmark .wm-sub{
  font-family:var(--bs);font-weight:700;
  font-size:.56rem;letter-spacing:.34em;color:var(--sand);margin-top:4px;
}
.nav-links{display:flex;align-items:center;gap:clamp(1.1rem,2vw,1.9rem)}
.nav-links a:not(.btn){
  font-family:var(--bs);font-weight:600;
  font-size:.8rem;letter-spacing:.04em;color:var(--frost-dim);
  transition:color .2s;
}
.nav-links a:not(.btn):hover,.nav-links a.here{color:var(--frost)}
.nav-links a.btn-primary{color:var(--night)}
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:42px;height:42px;padding:9px;
}
.nav-toggle span{display:block;height:2px;background:var(--frost);margin:5px 0;border-radius:2px}

/* ---------- Sections ---------- */
.section{padding-block:clamp(64px,9vw,120px)}
.section-tight{padding-block:clamp(44px,6vw,76px)}
.panel-dark{background:var(--night-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.panel-dark .eyebrow{color:var(--sand)}
.lead{font-size:clamp(1.02rem,1.3vw,1.22rem);max-width:62ch;color:var(--frost-dim)}
.lead strong,.lead b{color:var(--frost);font-weight:500}
.measure{max-width:68ch}
.measure p{color:var(--frost-dim)}

/* sand feature band */
.panel-sand{background:var(--sand);color:var(--night)}
.panel-sand .eyebrow{color:var(--night)}
.panel-sand p,.panel-sand .lead{color:rgba(12,12,12,.74)}
.panel-sand h1,.panel-sand h2,.panel-sand h3,.panel-sand h4{color:var(--night)}
/* List text and markers default to the dark background palette, which is close
   to invisible on sand. Everything inside the band flips to ink. */
.panel-sand li,
.panel-sand .check-list li{color:rgba(12,12,12,.78)}
.panel-sand .check-list li::before,
.panel-sand .prose ul li::before{background:var(--night)}
.panel-sand .steps .step-n{color:var(--night)}
.panel-sand .steps p{color:rgba(12,12,12,.74)}
.panel-sand a:not(.btn){color:var(--night);text-decoration:underline;text-underline-offset:3px}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(56px,8vw,110px);position:relative}
.hero h1{max-width:20ch}
.hero .lead{margin-top:1.2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}

/* ---------- Grids and cards ---------- */
.grid{display:grid;gap:clamp(14px,1.5vw,20px)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:linear-gradient(165deg,var(--night-3),var(--night-2) 65%);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.7rem 1.6rem 1.5rem;
  transition:border-color .3s ease,transform .25s ease;
}
.card .icon{width:44px;height:44px;color:var(--sand);margin-bottom:1.1rem;display:block}
.card .icon svg,.card svg.icon{width:44px;height:44px}
.card h3{margin-bottom:.5rem;color:var(--frost)}
.card p{margin:0;font-size:.92rem;color:var(--frost-dim)}
a.card{display:block}
a.card:hover{border-color:var(--line-sand);transform:translateY(-3px)}
.card .more{
  font-family:var(--bs);font-weight:700;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sand);
  margin-top:1.2rem;display:inline-flex;gap:.4rem;align-items:center;
}

/* ---------- Trust / accreditation placeholders ---------- */
.trust-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}
.trust-slot{
  flex:1 1 170px;min-height:96px;
  border:1.5px dashed var(--line-sand);border-radius:8px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:.9rem;
  font-family:var(--bs);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--frost-dim);
  background:var(--night-2);
}
.panel-dark .trust-slot{background:var(--night-3)}

/* ---------- Reviews ----------
   One review per card. The quote leads, the attribution sits under a hairline
   so it reads as a signature rather than more body copy. */
.reviews{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(1.8rem,3vw,2.6rem);
}
.review{
  display:flex;flex-direction:column;
  background:linear-gradient(165deg,var(--night-3),var(--night-2) 65%);
  border:1px solid var(--line);border-radius:12px;
  padding:1.8rem 1.7rem 1.5rem;
}
.review blockquote{
  margin:0 0 1.4rem;flex:1;
  font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.55;color:var(--frost);
}
.review .who{
  border-top:1px solid var(--line);padding-top:1rem;
  font-family:var(--bs);font-weight:700;font-size:.82rem;
  letter-spacing:.02em;color:var(--frost);
}
.review .job{
  display:block;margin-top:.3rem;
  font-family:var(--bs);font-weight:600;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sand);
}
/* Shown while there are no reviews to show. Deliberately plain, so the page
   never implies feedback that does not exist yet. */
.review-empty{
  border:1.5px dashed var(--line-sand);border-radius:12px;
  padding:clamp(1.8rem,4vw,2.8rem);
  margin-top:clamp(1.8rem,3vw,2.6rem);
}
.review-empty p{margin:0;color:var(--frost-dim);max-width:60ch}
.review-empty p + p{margin-top:.9rem}

/* ---------- Section mark ----------
   A short sand rule above a section heading. It labels the section visually
   without inventing another eyebrow, and gives a page a readable sequence
   instead of a stack of similar looking headings. */
.sec-mark{display:block;width:34px;height:2px;background:var(--sand);margin:0 0 1.3rem}
.panel-sand .sec-mark{background:var(--night)}

/* ---------- Fact row ----------
   Three facts across the page rather than stacked inside a floating card. */
.facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.8rem,4vw,4.5rem);
  margin:clamp(1.6rem,3vw,2.4rem) 0 0;
  border-top:1px solid var(--line-sand);
}
.facts>div{padding-top:1.5rem}
.facts .k{
  display:block;font-family:var(--bs);font-weight:700;
  font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.25;
  color:var(--frost);margin-bottom:.4rem;
}
.facts .v{display:block;font-size:.94rem;color:var(--frost-dim)}
@media(max-width:760px){
  .facts{grid-template-columns:1fr;border-top:0}
  .facts>div{padding-block:1.25rem;border-top:1px solid var(--line-sand)}
}

/* ---------- About page ----------
   Section headings step down clearly from the page title. Left at the shared
   size they competed with the H1 and the page read as a mix of sizes. */
body.page-about h2{font-size:clamp(1.5rem,2.5vw,2.15rem);max-width:24ch}
body.page-about .hero h1{max-width:16ch}
/* Sand on the part of the heading that carries the meaning, the same two tone
   treatment the homepage uses, so the page is not all white on black. */
body.page-about h1 span,
body.page-about h2 span{color:var(--sand)}
body.page-about .facts .k{color:var(--sand)}

/* ---------- Jump index ----------
   The numbered schedule from the homepage, reused so a long page opens with a
   route through it rather than a wall of blocks. */
.jump-index{list-style:none;padding:0;margin:clamp(1.6rem,3vw,2.4rem) 0 0;border-top:1px solid var(--line-sand)}
.jump-index a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:1.2em;
  padding:1.05em 0;border-bottom:1px solid var(--line-sand);
  font-family:var(--bs);font-weight:700;letter-spacing:.02em;
  font-size:clamp(.98rem,1.15vw,1.12rem);color:var(--frost);
  transition:color .25s ease;
}
.jump-index .n{font-size:.7rem;letter-spacing:.12em;color:var(--sand)}
.jump-index .t{
  font-weight:600;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--frost-dim);text-align:right;transition:color .25s ease;
}
.jump-index a:hover,.jump-index a:hover .t{color:var(--sand)}
@media(max-width:640px){
  .jump-index a{grid-template-columns:auto 1fr;row-gap:.35em}
  .jump-index .t{grid-column:2;text-align:left}
}

/* ---------- Discipline blocks ---------- */
.svc-block{border-top:1px solid var(--line-sand);padding-block:clamp(44px,5.5vw,72px)}
.svc-block:first-of-type{border-top:0}
.svc-grid .svc-head .icon{width:56px;height:56px;margin-bottom:1.1rem;color:var(--sand)}
.svc-num{
  display:block;font-family:var(--bs);font-weight:800;
  font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1;
  color:var(--sand);margin-bottom:.7rem;letter-spacing:.01em;
}
.svc-tag{
  display:block;margin-top:1rem;
  font-family:var(--bs);font-weight:600;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--frost-dim);
}
.svc-link{
  display:inline-block;margin-top:1.5rem;
  font-family:var(--bs);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sand);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .25s ease;
}
.svc-link:hover{border-bottom-color:var(--sand)}

/* A sand rule rather than a grey box, so the callout reads as an aside instead
   of another card. */
.expect{
  margin-top:1.6rem;padding:.1rem 0 .1rem 1.4rem;
  background:none;border:0;border-left:2px solid var(--sand);border-radius:0;
}
.expect h4{
  font-family:var(--bs);font-weight:700;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 .5rem;color:var(--sand);
}
.expect p{margin:0;font-size:.94rem;color:var(--frost-dim)}

/* the one sand discipline, the specialism */
.panel-sand .svc-num{color:var(--night)}
.panel-sand .svc-tag{color:rgba(12,12,12,.76)}
.panel-sand .svc-block{border-top-color:rgba(12,12,12,.2)}
.panel-sand .expect{border-left-color:var(--night)}
.panel-sand .expect h4{color:var(--night)}
.panel-sand .expect p{color:rgba(12,12,12,.74)}
.panel-sand a.svc-link{color:var(--night);text-decoration:none}
.panel-sand a.svc-link:hover{border-bottom-color:var(--night)}

/* ---------- Image / fleet placeholder ---------- */
.img-placeholder{
  width:100%;aspect-ratio:16 / 9;border-radius:12px;
  border:1.5px dashed var(--line-sand);
  background:
    repeating-linear-gradient(45deg,rgba(201,173,135,.05),rgba(201,173,135,.05) 14px,transparent 14px,transparent 28px),
    var(--night-2);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;
  font-family:var(--bs);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--frost-dim);
}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;left:50%;bottom:-60%;width:900px;height:560px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,173,135,.13),transparent 70%);
}
.cta-band .container{position:relative}
.cta-band h2{max-width:22ch}

.cta-band .btn{margin-top:1.8rem}

/* ---------- Contact form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;max-width:660px}
.field{display:flex;flex-direction:column;gap:.45rem}
.field.full{grid-column:1 / -1}
.field label{
  font-family:var(--bs);font-weight:600;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--frost-dim);
}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;font-weight:300;
  padding:.95rem 1rem;border:1px solid var(--line);border-radius:6px;
  background:var(--night-2);color:var(--frost);
  transition:border-color .25s ease;
  /* Without this a select sizes itself to its longest option, which on a small
     phone drags the whole page wider than the screen. */
  width:100%;min-width:0;max-width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sand)}
.field textarea{min-height:150px;resize:vertical}
.contact-details{display:grid;gap:.55rem}
.contact-details .row{display:flex;gap:.8rem}
.contact-details .lbl{
  font-family:var(--bs);font-weight:700;min-width:100px;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);
  padding-top:.2em;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--night);border-top:1px solid var(--line);
  padding-block:clamp(48px,7vh,72px) 1.6rem;
}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:2rem}
.site-footer .wordmark .wm-top{color:var(--frost)}
.site-footer .wordmark .wm-sub{color:var(--sand)}
.site-footer h4{
  font-family:var(--bs);font-weight:700;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 1rem;color:var(--sand);
}
.site-footer a{
  color:var(--frost-dim);text-decoration:none;display:block;
  margin-bottom:.5rem;font-size:.88rem;transition:color .2s;
}
.site-footer a:hover{color:var(--frost)}
.footer-note{color:var(--frost-dim);font-size:.86rem;margin:0 0 .5rem}
.footer-bottom{
  border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.5rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  font-size:.72rem;letter-spacing:.06em;color:var(--frost-dim);
}

/* ---------- Breadcrumbs ---------- */
.crumbs{
  font-family:var(--bs);font-weight:600;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--frost-dim);padding-top:1.6rem;
}
.crumbs a:hover{color:var(--frost)}
.crumbs .sep{opacity:.45;padding:0 .5rem}
.crumbs .here{color:var(--sand)}

/* ---------- Checklist ---------- */
/* The text sits on the shared origin and the marker hangs into the gutter, so a
   list item lines up with the heading above it instead of stepping inwards. */
.check-list{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.8rem}
.check-list.cols{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem 1.8rem}
.check-list li{
  position:relative;padding:0;
  font-size:.98rem;color:var(--frost-dim);
}
.check-list li::before{
  content:"";position:absolute;left:calc(var(--hang) * -1);top:.62em;
  width:7px;height:7px;
  background:var(--sand);border-radius:50%;
}

/* ---------- Split intro ---------- */
.split{align-items:start}
.aside-box{
  background:linear-gradient(165deg,var(--night-3),var(--night-2) 65%);
  border:1px solid var(--line-sand);
  border-radius:12px;padding:1.8rem 1.7rem;
}
.aside-box h3{color:var(--frost)}
.aside-box .eyebrow{color:var(--sand)}
.aside-box p{color:var(--frost-dim);font-size:.95rem}
.aside-box a.btn{margin-top:1.2rem}

/* ---------- Legal / prose ---------- */
.prose{max-width:none}
.container.prose{max-width:var(--max)}
/* readable line length without moving the origin */
.prose>p,.prose>ul,.prose>ol{max-width:74ch}
.prose h2{font-size:clamp(1.3rem,2vw,1.7rem);margin-top:2.4rem}
.prose h3{font-size:1.02rem;margin-top:1.6rem}
.prose p,.prose li{color:var(--frost-dim)}
.prose ul{padding-left:1.2rem;margin:0 0 1.1rem}
.prose li{margin-bottom:.45rem}
.prose .note{font-size:.9rem;color:var(--frost-dim)}

/* ---------- Dimension divider ---------- */
.dim{
  display:flex;align-items:center;gap:1em;
  font-family:var(--bs);font-weight:600;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--frost-dim);
}
.dim::before,.dim::after{content:"";flex:1;height:1px;background:var(--line)}
.dim i{display:none}

/* ---------- Section label ---------- */
.sec-label{
  display:flex;align-items:center;gap:1.2em;
  font-family:var(--bs);font-weight:700;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sand);
}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-label b{font-weight:700;color:var(--sand)}

/* ---------- Reveal ---------- */
.rv{transition:opacity .8s ease,transform .8s cubic-bezier(.3,0,.2,1)}
.js .rv{opacity:0;transform:translateY(22px)}
.js .in.rv,.js .in .rv{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1 / -1}
}
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:.3rem;
    background:var(--night-2);border-bottom:1px solid var(--line);
    padding:.8rem var(--pad) 1.5rem;
    clip-path:inset(0 0 100% 0);transition:clip-path .3s ease;
  }
  .nav-links.open{clip-path:inset(0 0 0 0)}
  .nav-links a:not(.btn){padding:.6rem 0;width:100%;font-size:1rem}
  .nav-links .btn{margin-top:.7rem}
}
@media (max-width:680px){
  .grid-3,.grid-2,.form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .contact-details .row{flex-direction:column;gap:.2rem}
}
@media (max-width:520px){
  .brand-x{width:30px;height:30px}
  .wordmark .wm-top{font-size:.92rem}
  .btn{font-size:.68rem;padding:1.05em 1.8em}
}

/* ============================================================
   SAND PAGE VARIANT
   Add class="page-sand" to <body>. Nav and footer stay dark so
   the site still reads as one thing; only the content flips.
   ============================================================ */
body.page-sand{background:var(--sand);color:var(--night)}
body.page-sand ::selection{background:var(--night);color:var(--sand)}
body.page-sand h1,
body.page-sand h2,
body.page-sand h3,
body.page-sand h4{color:var(--night)}
body.page-sand p,
body.page-sand li{color:rgba(12,12,12,.76)}
body.page-sand .lead{color:rgba(12,12,12,.78)}
body.page-sand .lead strong,
body.page-sand .lead b{color:var(--night)}
body.page-sand .eyebrow{color:var(--night)}
body.page-sand .crumbs{color:rgba(12,12,12,.6)}
body.page-sand .crumbs .here{color:var(--night)}
body.page-sand .crumbs a:hover{color:var(--night)}
/* The nav and footer stay dark on a sand page, so they keep the dark palette.
   Without this the page level ink rules above win on specificity and the whole
   footer turns dark text on a dark background. */
body.page-sand .site-footer h1,
body.page-sand .site-footer h2,
body.page-sand .site-footer h3,
body.page-sand .site-footer h4{color:var(--sand)}
body.page-sand .site-footer p,
body.page-sand .site-footer li,
body.page-sand .site-footer a,
body.page-sand .site-footer .footer-note,
body.page-sand .site-footer .footer-bottom,
body.page-sand .site-footer .footer-bottom span{color:var(--frost-dim)}
body.page-sand .site-footer a:hover{color:var(--frost)}
body.page-sand .site-footer .wordmark .wm-top{color:var(--frost)}
body.page-sand .site-footer .wordmark .wm-sub{color:var(--sand)}

/* controls */
body.page-sand .btn-primary,
body.page-sand .btn-light{background:var(--night);color:var(--sand)}
body.page-sand .btn-primary:hover,
body.page-sand .btn-light:hover{box-shadow:0 18px 44px rgba(12,12,12,.3)}
body.page-sand .btn-outline{color:var(--night);border-color:rgba(12,12,12,.35)}
body.page-sand .btn-outline:hover{background:var(--night);color:var(--sand);border-color:var(--night)}

/* surfaces */
body.page-sand .card,
body.page-sand .expect{background:#FFFFFF;border-color:rgba(12,12,12,.14)}
body.page-sand .expect h4{color:rgba(12,12,12,.6)}
body.page-sand .aside-box{background:var(--night);border-color:var(--night)}
body.page-sand .aside-box h3{color:var(--frost)}
body.page-sand .aside-box p{color:var(--frost-dim)}
body.page-sand .aside-box .eyebrow{color:var(--sand)}
body.page-sand .check-list li::before{background:var(--night)}
body.page-sand .contact-details .lbl{color:var(--night)}
body.page-sand .img-placeholder{background:rgba(255,255,255,.4);border-color:rgba(12,12,12,.3);color:rgba(12,12,12,.6)}

/* form fields on sand */
body.page-sand .field label{color:rgba(12,12,12,.74)}
body.page-sand .field input,
body.page-sand .field select,
body.page-sand .field textarea{background:#FFFFFF;color:var(--night);border-color:rgba(12,12,12,.2)}
body.page-sand .field input:focus,
body.page-sand .field select:focus,
body.page-sand .field textarea:focus{border-color:var(--night)}
body.page-sand .field input::placeholder,
body.page-sand .field textarea::placeholder{color:rgba(12,12,12,.42)}

/* keep the dark CTA band legible on a sand page */
body.page-sand .panel-dark{background:var(--night);border-color:rgba(12,12,12,.2)}
body.page-sand .panel-dark h1,
body.page-sand .panel-dark h2,
body.page-sand .panel-dark h3,
body.page-sand .panel-dark h4{color:var(--frost)}
body.page-sand .panel-dark p,
body.page-sand .panel-dark .lead{color:var(--frost-dim)}
body.page-sand .panel-dark .eyebrow{color:var(--sand)}
body.page-sand .panel-dark .btn-light{background:var(--sand);color:var(--night)}
/* A sand page turns list text to ink, which then disappears on a dark band
   inside it. Anything on the dark panel goes back to the dark palette. */
body.page-sand .panel-dark li,
body.page-sand .panel-dark .check-list li{color:var(--frost-dim)}
body.page-sand .panel-dark .check-list li::before,
body.page-sand .panel-dark .prose ul li::before{background:var(--sand)}
body.page-sand .panel-dark .steps .step-n{color:var(--sand)}
body.page-sand .panel-dark a:not(.btn){color:var(--frost)}

/* ============================================================
   ALIGNMENT SYSTEM
   One text origin per page. On any page and viewport the left edge of every
   eyebrow, heading, lead, paragraph and list item text is identical. Nothing
   gets its own margin-left, padding-left, text-indent or centring.

   .container is the origin: max-width 1320px, padding-inline clamp(20px,4vw,60px).
   Two column layouts all run on one twelve column grid and break at the same
   line, so the right hand column starts in the same place on every page.
   ============================================================ */
.head-split,.split,.svc-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colgap);
  row-gap:1.6rem;
  align-items:start;
}
.head-split>*:first-child,
.split>*:first-child,
.svc-grid>*:first-child{grid-column:1 / 8}
.head-split>*:nth-child(2),
.split>*:nth-child(2),
.svc-grid>*:nth-child(2){grid-column:8 / -1}
.head-split .lead{margin-top:0}

/* Stacked below the breakpoint, and both columns return to the text origin.
   These selectors must match the specificity of the placement rules above,
   because a media query adds none of its own. */
@media(max-width:900px){
  .head-split,.split,.svc-grid{grid-template-columns:1fr;row-gap:1.4rem}
  .head-split>*:first-child,.head-split>*:nth-child(2),
  .split>*:first-child,.split>*:nth-child(2),
  .svc-grid>*:first-child,.svc-grid>*:nth-child(2){grid-column:1 / -1}
}

/* No section centres its own text. */
.cta-band,.cta-band h2,.cta-band .lead{text-align:left}
.cta-band h2,.cta-band .lead{margin-inline:0}

/* ---------- Credentials register ----------
   The certification list reads as a register rather than a bullet list. Two
   columns so no credential wraps, ruled rows for structure, and the display
   face so the tickets carry the weight they should. The text sits on the shared
   origin, so the accent mark is drawn on the rule above rather than indenting
   anything. */
.proof h2{max-width:24ch}
.credentials{
  list-style:none;padding:0;
  margin:clamp(1.8rem,3vw,2.6rem) 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,6vw,6rem);
}
.credentials li{
  position:relative;
  padding:clamp(.95rem,1.4vw,1.25rem) 0;
  border-top:1px solid var(--line);
  font-family:var(--bs);font-weight:600;
  font-size:clamp(1rem,1.05vw,1.1rem);
  line-height:1.4;letter-spacing:.004em;
  color:var(--frost);
}
/* short accent on the rule, giving rhythm without moving the text */
.credentials li::before{
  content:"";position:absolute;left:0;top:-1px;
  width:26px;height:2px;background:var(--sand);
}
@media(max-width:720px){
  .credentials{grid-template-columns:1fr}
}

/* on the sand band everything flips to ink */
.panel-sand .credentials li{color:var(--night);border-top-color:rgba(12,12,12,.2)}
.panel-sand .credentials li::before{background:var(--night)}
/* a dark band inside a sand page keeps the dark palette */
body.page-sand .panel-dark .credentials li{color:var(--frost);border-top-color:var(--line)}
body.page-sand .panel-dark .credentials li::before{background:var(--sand)}

/* Numbered job steps. One column so every step heading and paragraph sits on
   the same origin as the heading above them. */
.steps{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:1.6rem}
.steps li{position:relative}
.steps .step-n{
  display:block;font-family:var(--bs);font-weight:700;
  font-size:.62rem;letter-spacing:.2em;color:var(--sand);margin-bottom:.45rem;
}
.steps h3{margin:0 0 .35rem}
.steps p{margin:0;color:var(--frost-dim);font-size:.95rem;max-width:60ch}

/* Prose lists hang their markers too, so legal copy shares the same origin. */
.prose ul{list-style:none;padding-left:0;margin:0 0 1.1rem}
.prose ul li{position:relative;padding-left:0}
.prose ul li::before{
  content:"";position:absolute;left:calc(var(--hang) * -1);top:.62em;
  width:6px;height:6px;background:var(--sand);border-radius:50%;
}

/* The page gutter is only 20px on a phone, so the hang tightens to keep the
   marker off the screen edge. The text origin does not move. */
@media(max-width:600px){
  :root{--hang:.8rem}
}

/* Grid and flex children default to a minimum size of their content, so one long
   word or a wide control can push a track past the edge of a phone screen.
   Letting them shrink is what keeps every page inside the viewport. */
.svc-grid>*,.split>*,.head-split>*,.form-grid>*,.grid-2>*,.grid-3>*,.footer-grid>*{min-width:0}
.prose,.lead,.card p,.svc-block p{overflow-wrap:break-word}

/* Long single words in display headings would otherwise be clipped by the
   reveal masks on the narrowest phones. */
@media(max-width:380px){
  h1,h2,h3,.display{overflow-wrap:break-word;hyphens:auto}
}