/* ===========================================================
   Concept Point Nigeria Limited — site stylesheet
   Built to CPNL Brand Guidelines v2.0
   Navy #141414 · Deep #0D0D0D · Gold #CC9966 · Graphite #2A3F63
   =========================================================== */

:root{
  --navy:#141414;   /* ink: headings, dark surfaces */
  --deep:#0D0D0D;   /* deepest ground */
  --gold:#CC9966;   /* copper, straight from the logo */
  --bronze:#9C6B33; /* darkened copper: copper-coloured TEXT on light grounds */
  --mist:#F6F3EE;
  --ink:#3D3A36;
  --steel:#6E675F;
  --line:#E5E0D8;
  --pad:clamp(26px,5.5vw,88px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Poppins",system-ui,sans-serif;background:#fff;color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-loading{overflow:hidden;height:100vh}
h1,h2,h3,h4,th,.mono{font-family:"Montserrat",system-ui,sans-serif}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy);
  padding:12px 20px;z-index:9999;font-family:"Montserrat";font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

/* ---------- type ---------- */
.eyebrow{
  font-family:"Montserrat";font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--navy);display:block;margin-bottom:18px;
}
.eyebrow.on-dark{color:var(--gold)}
.h-sec{font-size:clamp(28px,4vw,48px);font-weight:700;line-height:1.04;letter-spacing:-.015em;text-transform:uppercase;color:var(--navy)}
.h-sec .acc{color:var(--navy)}
.h-sec.on-dark{color:#fff}
.h-sec.on-dark .acc{color:var(--bronze)}
.h-sub{font-size:clamp(19px,2.1vw,26px);font-weight:700;text-transform:uppercase;color:var(--navy);letter-spacing:-.01em;line-height:1.15}
.rule{width:72px;height:2px;background:var(--gold);margin:20px 0 32px}
p{font-size:clamp(14px,1.05vw,15.5px);line-height:1.72}
.lead{font-size:clamp(16px,1.3vw,18.5px);line-height:1.62;color:var(--navy)}
.on-dark p,.on-dark li{color:rgba(255,255,255,.74)}
.on-dark .lead{color:rgba(255,255,255,.9)}
.cap{font-size:11.5px;line-height:1.55;color:var(--steel)}

/* ---------- shell ---------- */
.wrap{max-width:1480px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap-narrow{max-width:1080px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{position:relative;scroll-margin-top:clamp(88px,11vh,116px)}
.pad-y{padding-top:clamp(84px,9.5vw,140px);padding-bottom:clamp(84px,9.5vw,140px)}
.bg-navy{background:var(--navy);color:#fff;overflow:hidden}
.bg-deep{background:var(--deep);color:#fff;overflow:hidden}
.bg-mist{background:var(--mist)}

/* ---------- preloader ---------- */
#pre{
  position:fixed;inset:0;z-index:9999;background:var(--deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  transition:opacity .6s var(--ease),visibility .6s;
}
#pre.done{opacity:0;visibility:hidden;pointer-events:none}
/* Backstop: even with no JS at all, the overlay clears itself and the page
   below stays usable. */
#pre{animation:preBail .6s ease 8s forwards}
@keyframes preBail{to{opacity:0;visibility:hidden;pointer-events:none}}
body:not(.is-loading) #pre{display:none}
#pre[hidden]{display:none}
#pre svg rect{opacity:0;transform-origin:center;transform-box:fill-box}
#pre.go svg rect{animation:pop .45s var(--ease) forwards}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.pre-meta{width:min(280px,60vw);text-align:center}
.pre-track{height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.pre-bar{height:100%;width:0;background:var(--gold);transition:width .32s var(--ease)}
.pre-row{
  display:flex;justify-content:space-between;margin-top:12px;font-family:"Montserrat";
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.pre-row b{color:var(--gold);font-weight:700}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(16px,3vw,44px);padding:18px var(--pad);
  background:rgba(13,13,13,.92);backdrop-filter:blur(10px);
  transition:padding .4s var(--ease),background .4s var(--ease);
}
.nav.transparent{padding:22px var(--pad)}
.nav.transparent.stuck{padding:13px var(--pad)}
.brand{display:flex;align-items:center;gap:16px;flex:none;min-width:0}
.brand-txt{font-family:"Montserrat";font-size:11.5px;font-weight:700;letter-spacing:.14em;color:#fff;line-height:1.5;text-transform:uppercase}
.menu{display:flex;gap:clamp(14px,2vw,30px);align-items:center;flex:1 1 auto;justify-content:center;min-width:0}
.menu a{
  font-family:"Montserrat";font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);position:relative;padding:6px 0;transition:color .3s var(--ease);
}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .38s var(--ease)}
.menu a:hover{color:#fff}
.menu a:hover::after,.menu a[aria-current="page"]::after{width:100%}
.menu a[aria-current="page"]{color:#fff}
.nav-cta{
  font-family:"Montserrat";font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);background:var(--gold);padding:12px 22px;position:relative;overflow:hidden;
}
.nav-cta span{position:relative;z-index:2}
.nav-cta::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .4s var(--ease)}
.nav-cta:hover::before{transform:translateY(0)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger i{display:block;width:24px;height:2px;background:#fff;margin:5px 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:"Montserrat";font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:16px 30px;position:relative;overflow:hidden;border:1px solid var(--gold);
  cursor:pointer;background:none;
}
.btn span{position:relative;z-index:2;transition:color .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .42s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn-solid{background:var(--gold);color:var(--navy)}
.btn-solid::before{background:#fff}
.btn-ghost{color:var(--gold)}
.btn-ghost:hover span{color:var(--navy)}
.btn-dark{border-color:var(--navy);color:var(--navy)}
.btn-dark::before{background:var(--navy)}
.btn-dark:hover span{color:#fff}

/* ---------- page banner (inner pages) ---------- */
.banner{position:relative;overflow:hidden;background:var(--deep);padding:clamp(160px,17vw,230px) 0 clamp(70px,7vw,104px)}
.banner .wrap{position:relative;z-index:2}
.banner h1{font-size:clamp(32px,5vw,62px);font-weight:700;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:#fff;max-width:19ch}
.banner h1 .acc{color:var(--bronze)}
.banner p{color:rgba(255,255,255,.7);max-width:56ch;margin-top:20px}
.crumbs{display:flex;gap:10px;align-items:center;margin-bottom:20px;font-family:"Montserrat";font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.crumbs a:hover{color:var(--gold)}
.crumbs i{width:14px;height:1px;background:rgba(255,255,255,.3);display:block}

/* ---------- parallax motif ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- home hero ---------- */
.hero{min-height:100svh;position:relative;overflow:hidden;background:var(--deep);display:flex;flex-direction:column}
#gl{position:absolute;inset:0;width:100%;height:100%}
.hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(13,13,13,.94) 0%,rgba(13,13,13,.7) 44%,rgba(13,13,13,.1) 80%),
    linear-gradient(to top,rgba(13,13,13,.96) 2%,rgba(13,13,13,0) 40%);
}
.hero-inner{
  position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(132px,17vh,196px) var(--pad) clamp(48px,7vh,88px);
  max-width:1480px;margin:0 auto;width:100%;
}
.hero h1{font-size:clamp(32px,4.7vw,66px);font-weight:700;line-height:1;letter-spacing:-.022em;text-transform:uppercase;color:#fff;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero .sub{color:rgba(255,255,255,.76);max-width:48ch;margin-top:24px;font-size:clamp(14px,1.2vw,17px);line-height:1.65}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-stats{position:relative;z-index:4;margin-top:auto;border-top:1px solid rgba(255,255,255,.14);background:rgba(13,13,13,.42);backdrop-filter:blur(6px)}
.hero-stats .row{display:grid;grid-template-columns:repeat(4,1fr);max-width:1480px;margin:0 auto;padding:0 var(--pad)}
.hero-stats .cell{padding:22px 20px 24px;border-left:1px solid rgba(255,255,255,.11);transition:background .35s var(--ease)}
.hero-stats .cell:first-child{border-left:0}
.hero-stats .cell:hover{background:rgba(204,153,102,.1)}
.hero-stats b{font-family:"Montserrat";font-weight:700;font-size:clamp(22px,2.4vw,32px);color:var(--gold);display:block;line-height:1}
.hero-stats span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);font-family:"Montserrat";font-weight:600;display:block;margin-top:8px}
.no-webgl #gl{display:none}
.no-webgl .hero{background-color:#0D0D0D;background-image:radial-gradient(120% 90% at 78% 32%,#1d3d6e 0%,#0D0D0D 62%)}

/* ---------- grids ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px)}
.g2-wide{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,84px)}
.tiles.four{grid-template-columns:repeat(4,1fr)}
/* auto-fit: three points sit three-up, a fourth joins the row */
.tiles.auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tiles.on-navy{background:var(--line);border-color:var(--line)}
.tile{background:#fff;padding:36px 32px;position:relative;overflow:hidden;transition:background .45s var(--ease),transform .45s var(--ease)}
.tiles.on-navy .tile{background:#fff}
.tile:hover{transform:translateY(-3px)}
.tiles.on-navy .tile:hover{background:#fff}
.tile h3{font-size:15px;font-weight:700;text-transform:uppercase;color:var(--navy);letter-spacing:.03em;margin:20px 0 10px}
.tiles.on-navy .tile h3{color:var(--navy)}
.tile p{font-size:13.5px}
.tiles.on-navy .tile p{color:var(--ink)}
.tile .more{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .5s var(--ease)}
.tile:hover .more,.tile:focus-within .more{max-height:200px;opacity:1;margin-top:14px}
.tile .more li{list-style:none;font-size:12.5px;color:var(--navy);padding-left:15px;position:relative;margin-bottom:6px;line-height:1.5}
.tiles.on-navy .tile .more li{color:var(--bronze)}
.tile .more li::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;background:currentColor}

.numgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.numgrid div{background:#fff;padding:clamp(22px,2.4vw,38px) clamp(16px,1.8vw,30px);transition:background .45s var(--ease)}
.numgrid div:hover{background:var(--mist)}
.numgrid b{font-family:"Montserrat";font-weight:700;font-size:clamp(26px,3.2vw,48px);color:var(--navy);display:block;line-height:.95;letter-spacing:-.02em}
.numgrid span{display:block;margin-top:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);font-family:"Montserrat";font-weight:600}
.numgrid p{margin-top:9px;font-size:12.5px;color:var(--ink)}

/* ---------- data table ---------- */
table.spec{width:100%;border-collapse:collapse;font-size:13.5px}
table.spec th{text-align:left;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);font-weight:700;padding:0 18px 12px;border-bottom:2px solid var(--navy)}
table.spec td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.spec{border-collapse:separate;border-spacing:0}
table.spec tr{transition:background .3s var(--ease)}
table.spec tbody tr:hover td:first-child{border-radius:var(--r) 0 0 var(--r)}
table.spec tbody tr:hover td:last-child{border-radius:0 var(--r) var(--r) 0}
/* Sections alternate white and mist grounds. A mist hover is invisible on the
   mist ones, which is why the highlight looked inconsistent. A copper tint
   reads on both. */
table.spec tbody tr:hover{background:rgba(204,153,102,.14)}
table.spec tbody tr:hover td.k{color:var(--bronze)}
table.spec td.k{font-family:"Montserrat";font-weight:700;color:var(--navy);font-size:13px;white-space:nowrap}

/* ---------- horizontal scroll ---------- */
.hpin{position:relative;background:var(--mist);height:520vh}
.hstick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.hhead{padding:clamp(80px,7vw,96px) var(--pad) 0;max-width:1480px;margin:0 auto;width:100%}
.htrack{display:flex;align-items:stretch;will-change:transform;flex:1;padding-bottom:0}
.hstep{
  width:min(60vw,680px);flex:none;border-left:1px solid var(--line);
  padding:clamp(28px,3.2vw,48px) clamp(24px,2.8vw,50px);display:flex;flex-direction:column;justify-content:center;
  background:var(--mist);transition:background .5s var(--ease);
}
.hstep:hover{background:#fff}
.hstep .n{font-family:"Montserrat";font-weight:700;font-size:clamp(18px,1.5vw,22px);line-height:1;color:var(--gold);letter-spacing:.16em;transition:color .5s var(--ease)}
.hstep:hover .n{color:var(--navy)}
.hstep h3{font-size:clamp(24px,2.9vw,38px);font-weight:700;text-transform:uppercase;color:var(--navy);margin-top:14px;line-height:1.06;letter-spacing:-.015em}
.hstep p{margin-top:12px;max-width:48ch;font-size:13.5px;line-height:1.62}
.hstep .out{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.hstep .out span{font-family:"Montserrat";font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.hstep .out p{margin-top:8px;font-size:12.5px;color:var(--steel)}
.hprog{height:3px;background:var(--line);position:relative;flex:none}
.hprog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold)}
.hnote{font-family:"Montserrat";font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--steel);display:flex;align-items:center;gap:10px;margin-top:16px}

/* ---------- clients marquee ---------- */
.mq{overflow:hidden;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:24px 0}
.mq-in{display:flex;gap:60px;width:max-content;animation:slide 32s linear infinite}
.mq:hover .mq-in{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mq span{font-family:"Montserrat";font-weight:700;font-size:clamp(16px,2vw,24px);letter-spacing:.04em;color:rgba(255,255,255,.34);white-space:nowrap;transition:color .35s var(--ease);text-transform:uppercase}
.mq span:hover{color:var(--gold)}

/* ---------- lists ---------- */
.ticks{list-style:none}
.ticks li{padding-left:20px;position:relative;margin-bottom:12px;font-size:14px;line-height:1.62}
.ticks li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--gold)}
.on-dark .ticks li{color:rgba(255,255,255,.75)}

/* ---------- governance accordion ---------- */
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:22px 0;
  display:flex;align-items:center;gap:20px;font-family:"Montserrat";font-size:15px;font-weight:700;
  text-transform:uppercase;color:var(--navy);letter-spacing:.01em;
}
.acc-btn .num{font-size:12px;font-weight:700;color:var(--navy);width:26px;flex:none}
.acc-btn .sign{margin-left:auto;width:14px;height:14px;position:relative;flex:none}
.acc-btn .sign::before,.acc-btn .sign::after{content:"";position:absolute;background:var(--gold);transition:transform .35s var(--ease)}
.acc-btn .sign::before{left:0;right:0;top:6px;height:2px}
.acc-btn .sign::after{top:0;bottom:0;left:6px;width:2px}
.acc-btn[aria-expanded="true"] .sign::after{transform:scaleY(0)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc-panel .inner{padding:0 0 24px 46px}
.acc-panel .inner p{margin-bottom:12px}

/* ---------- contact ---------- */
.cta{display:grid;grid-template-columns:1.1fr .9fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.cta > div{background:#fff;padding:clamp(32px,3.8vw,56px)}
.field{margin-bottom:20px}
.field label{display:block;font-family:"Montserrat";font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;border:1px solid var(--line);background:var(--mist);padding:13px 14px;
  font-family:"Poppins";font-size:14px;color:var(--navy);transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);background:#fff}
.field textarea{min-height:110px;resize:vertical}
.detail{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.detail:last-of-type{border-bottom:0}
.detail .k{font-family:"Montserrat";font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);width:88px;flex:none;padding-top:3px}
.detail .v{font-size:14px;color:var(--navy);line-height:1.6}
.detail a:hover{color:var(--navy);text-decoration:underline}
.formnote{font-size:11.5px;color:var(--steel);margin-top:6px}


/* ---------- closing call to action ---------- */
.strip{
  background:var(--navy);color:#fff;padding:clamp(64px,7vw,104px) 0;position:relative;overflow:hidden;
}
.strip::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 88% 18%,rgba(204,153,102,.20) 0%,rgba(204,153,102,0) 58%);
}
.strip .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.strip .said{flex:1 1 460px;max-width:640px}
.strip .kicker{
  font-family:"Montserrat";font-size:11px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:16px;
}
.strip h2{font-size:clamp(28px,3.6vw,48px);font-weight:700;text-transform:uppercase;line-height:1.02;letter-spacing:-.02em;color:#fff}
.strip h2 em{font-style:normal;color:var(--gold)}
.strip p{color:rgba(255,255,255,.62);margin-top:18px;max-width:46ch}
.bigcta{
  display:inline-flex;align-items:center;gap:20px;background:var(--gold);color:var(--navy);
  font-family:"Montserrat";font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding:24px 30px;border-radius:var(--r);position:relative;overflow:hidden;
  transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.bigcta span{position:relative;z-index:2}
.bigcta .arrow{
  position:relative;z-index:2;width:34px;height:34px;border-radius:50%;background:var(--navy);
  display:grid;place-items:center;transition:transform .45s var(--ease);
}
.bigcta .arrow svg{width:15px;height:15px;stroke:var(--gold);stroke-width:2.2;fill:none}
.bigcta:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(204,153,102,.32)}
.bigcta:hover .arrow{transform:translateX(5px)}
@media(max-width:720px){
  .strip .wrap{flex-direction:column;align-items:flex-start;gap:28px}
  .bigcta{width:100%;justify-content:space-between;padding:20px 22px}
}

/* ---------- footer ---------- */
.foot{background:var(--deep);color:#fff;padding:clamp(60px,6.5vw,96px) 0 34px}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot h4{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot a,.foot p{color:rgba(255,255,255,.6);font-size:13px;line-height:2}
.foot a:hover{color:var(--gold)}
.legal{display:flex;align-items:center;gap:12px}
.legal a{font-size:11px;letter-spacing:.12em}
.legal a:hover{color:var(--gold)}
.legal i{display:block;width:1px;height:11px;background:rgba(255,255,255,.25)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;padding-top:22px;flex-wrap:wrap;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.38);font-family:"Montserrat";font-weight:500}




/* ---------- three-up helper ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15)}
.cols3 > *{margin:0}
.cols3 .card{min-height:0;padding:34px 32px;border:0}
.cols3 .tile{min-height:0}
@media(max-width:1080px){.cols3{grid-template-columns:1fr}}

/* ---------- enquiry form ---------- */
.reqform .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;margin-bottom:30px}
.fld{position:relative;padding-top:20px}
.fld input,.fld textarea{
  width:100%;border:0;border-bottom:1.5px solid var(--line);background:transparent;
  padding:8px 0 9px;font-family:"Montserrat",sans-serif;font-size:15px;font-weight:600;
  color:var(--navy);outline:none;border-radius:0;
}
.fld textarea{min-height:86px;resize:vertical;line-height:1.6}
.fld label{
  position:absolute;left:0;top:28px;font-size:14px;color:var(--steel);pointer-events:none;
  transition:top .3s var(--ease),font-size .3s var(--ease),color .3s var(--ease),letter-spacing .3s var(--ease);
}
.fld input:focus + label,.fld input:not(:placeholder-shown) + label,
.fld textarea:focus + label,.fld textarea:not(:placeholder-shown) + label{
  top:4px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  font-family:"Montserrat";font-weight:700;color:var(--navy);
}
.fld > i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .45s var(--ease)}
.fld input:focus ~ i,.fld textarea:focus ~ i{width:100%;box-shadow:0 4px 16px rgba(204,153,102,.45)}
.fld.area{margin-bottom:28px}

.chips{border:0;padding:0;margin:0 0 30px}
.chips legend{
  font-family:"Montserrat";font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--navy);padding:0;margin-bottom:14px;display:flex;gap:10px;
}
.chip{display:inline-block;margin:0 8px 8px 0;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:block;border:1px solid var(--line);padding:10px 16px;
  font-family:"Montserrat";font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--steel);
  transition:all .35s var(--ease);
}
.chip:hover span{border-color:var(--gold);color:var(--navy)}
.chip input:checked + span{
  background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:700;
  box-shadow:0 6px 20px rgba(204,153,102,.35);
}
.chip input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}

@media(max-width:640px){.reqform .fgrid{grid-template-columns:1fr}}


/* ---------- no orphans: keep a single word off its own line ---------- */
h1,h2,h3,h4,.h-sec,.h-sub,.hero h1,.banner h1,.strip h2,.hstep h3,.tile h3,.card h3{
  text-wrap:balance;
}


/* ---------- locator map ---------- */
.mapwrap{background:var(--deep);padding:clamp(28px,3.4vw,48px);display:flex;gap:clamp(24px,3vw,44px);align-items:center;flex-wrap:wrap}
.mapwrap .art{flex:1 1 260px;min-width:0;display:flex;justify-content:center}
.mapwrap svg{width:100%;max-width:320px;height:auto}
.mapwrap .land{fill:#1C1C1C;stroke:none}
.mapwrap .pin{fill:var(--gold)}
.mapwrap .ring{fill:none;stroke:var(--gold);opacity:.55}
.mapwrap .ring.pulse{animation:mapPulse 2.8s ease-out infinite}
@keyframes mapPulse{0%{r:8;opacity:.6}70%{r:34;opacity:0}100%{r:34;opacity:0}}
.mapwrap .said{flex:1 1 240px;min-width:0}
.mapwrap .said h3{font-family:"Montserrat";font-size:15px;font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:.04em;margin-bottom:12px}
.mapwrap .said p{color:rgba(255,255,255,.72);font-size:14px}
.mapwrap .said .coords{font-family:"Montserrat";font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:16px}
@media(prefers-reduced-motion:reduce){.mapwrap .ring.pulse{animation:none}}

/* ---------- gold glow on hover ---------- */
.brand svg{transition:filter .4s var(--ease)}
.brand:hover svg{filter:drop-shadow(0 0 12px rgba(204,153,102,.7))}
.menu a{transition:color .3s var(--ease),text-shadow .3s var(--ease)}
.menu a:hover{text-shadow:0 0 14px rgba(204,153,102,.75)}
.btn{transition:box-shadow .4s var(--ease),border-color .4s var(--ease)}
.btn:hover,.nav-cta:hover{box-shadow:0 0 0 1px rgba(204,153,102,.55),0 10px 34px rgba(204,153,102,.38)}
.nav-cta{transition:box-shadow .4s var(--ease)}
.card:hover,.tile:hover,.numgrid div:hover,.hero-stats .cell:hover,.ins div:hover{
  box-shadow:inset 0 0 0 1px rgba(204,153,102,.45),0 0 42px rgba(204,153,102,.18);
}
.mq span{transition:color .35s var(--ease),text-shadow .35s var(--ease)}
.mq span:hover{text-shadow:0 0 18px rgba(204,153,102,.6)}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:0 0 0 3px rgba(204,153,102,.22)}
.acc-btn:hover{color:var(--navy)}
.acc-btn:hover .sign::before,.acc-btn:hover .sign::after{box-shadow:0 0 10px rgba(204,153,102,.9)}
.detail a:hover{text-shadow:0 0 12px rgba(204,153,102,.45)}
@media(max-height:780px){
  .hero h1{font-size:clamp(30px,4vw,52px)}
  .hero .sub{font-size:14px;margin-top:18px}
  .hero-actions{margin-top:26px}
  .hero-inner{padding-top:clamp(118px,15vh,150px)}
}
@media(prefers-reduced-motion:reduce){
  .brand:hover svg,.menu a:hover,.mq span:hover{filter:none;text-shadow:none}
}


.note-flag{margin-top:34px;background:#FBF4EA;border-left:4px solid var(--gold);padding:18px 22px}
.note-flag p{font-size:13px;color:var(--ink)}

/* ================= THEME ================= */
:root{color-scheme:light}


/* ---- dark surfaces ---- */






/* ---------- responsive ---------- */
@media(max-width:1080px){
  .g2,.g2-wide{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .hstep{width:min(78vw,540px)}
}
@media(max-width:760px){
  .hero-stats .row{grid-template-columns:repeat(2,1fr)}
  .hero-stats .cell:nth-child(3){border-left:0}
  .hero-stats .cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.11)}
  .numgrid{grid-template-columns:repeat(2,1fr)}
  .hstep{width:86vw}
  .hpin{height:420vh}
  .acc-panel .inner{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}




/* ---------- form: required marks, other field, timeline select ---------- */
.fld label em{
  font-style:normal;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-left:6px;vertical-align:2px;
}
.fld.invalid input,.fld.invalid textarea{border-bottom-color:#E0553F}
.fld.invalid label{color:#E0553F}
.other-fld{margin-top:-6px}
.other-fld[hidden]{display:none}
.select-fld{position:relative}
.select-fld select{
  width:100%;appearance:none;background:transparent;border:0;border-bottom:1.5px solid var(--line);
  padding:26px 28px 12px 0;font-family:"Poppins";font-size:15px;color:var(--navy);cursor:pointer;
}
.select-fld select:focus{outline:none;border-bottom-color:var(--gold)}
.select-fld::after{
  content:"";position:absolute;right:6px;bottom:20px;width:8px;height:8px;
  border-right:2px solid var(--steel);border-bottom:2px solid var(--steel);
  transform:rotate(45deg);pointer-events:none;
}
.formnote.is-error{color:#E0553F}
.formnote.is-ok{color:#1F7A44}

/* ---------- reach: the detail arrives on hover ---------- */
.reveal-on-hover .tile p{
  max-height:0;opacity:0;overflow:hidden;margin:0;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .5s var(--ease);
}
.reveal-on-hover .tile:hover p,
.reveal-on-hover .tile:focus-within p{max-height:220px;opacity:1;margin-top:12px}
.reveal-on-hover .tile{cursor:default}
.reveal-on-hover .tile h3{margin-bottom:0}
@media(hover:none){
  .reveal-on-hover .tile p{max-height:none;opacity:1;margin-top:12px}
}

/* ============================================================
   WIRE HOVER
   A gold wire traces the perimeter on hover: the top and left edges
   grow from one corner, the bottom and right from the opposite one,
   so the two halves meet. Softer corner radii throughout take the
   hard rectangle off the whole page.
   ============================================================ */

:root{--r:6px;--r-lg:10px}

.tile,.card,.numgrid div,.hero-stats .cell,.mat article,.ins div,.cta > div,
.mapwrap,.hstep,.swatch,.btn,.nav-cta,.field input,.field textarea,.field select,
.fld input,.fld textarea,.reqform .chip,.badge{border-radius:var(--r)}
.tiles,.numgrid,.mat,.ins,.cta,.projects{border-radius:var(--r-lg);overflow:hidden}

/* the wire itself */
.tile,.card,.numgrid div,.mat article,.ins div,.hero-stats .cell,.mapwrap,.hstep{position:relative}
.tile::before,.tile::after,
.card::before,.card::after,
.numgrid div::before,.numgrid div::after,
.mat article::before,.mat article::after,
.hero-stats .cell::before,.hero-stats .cell::after{
  content:"";position:absolute;width:0;height:0;pointer-events:none;
  border-color:var(--gold);border-style:solid;border-width:0;
  border-radius:var(--r);z-index:2;
  transition:width .3s var(--ease),height .3s var(--ease) .3s,border-width .01s;
}
.tile::before,.card::before,.numgrid div::before,.mat article::before,.hero-stats .cell::before{
  top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;
}
.tile::after,.card::after,.numgrid div::after,.mat article::after,.hero-stats .cell::after{
  bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;
}
.tile:hover::before,.tile:hover::after,.tile:focus-within::before,.tile:focus-within::after,
.card:hover::before,.card:hover::after,
.numgrid div:hover::before,.numgrid div:hover::after,
.mat article:hover::before,.mat article:hover::after,
.hero-stats .cell:hover::before,.hero-stats .cell:hover::after{
  width:100%;height:100%;
  transition:width .3s var(--ease),height .3s var(--ease) .3s;
}

/* the old flat box-shadow glow steps aside for the wire */
.card:hover,.tile:hover,.numgrid div:hover,.hero-stats .cell:hover,.ins div:hover{box-shadow:none}
.mat article:hover{box-shadow:none;transform:translateY(-2px)}

/* buttons keep their rising fill, so the wire is drawn as an offset ring */
.btn{overflow:hidden;box-shadow:0 0 0 0 rgba(204,153,102,0),0 0 0 0 rgba(204,153,102,0)}
.btn:hover{box-shadow:0 0 0 1.5px var(--gold),0 0 0 6px rgba(204,153,102,.16)}

@media(hover:none){
  .tile::before,.tile::after,.card::before,.card::after,
  .numgrid div::before,.numgrid div::after,.mat article::before,.mat article::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .tile::before,.tile::after,.card::before,.card::after{transition:none}
}

/* ============================================================
   LIGHT / DARK SURFACES
   Light mode is genuinely light: the header, footer and cards all
   sit on white. Dark mode takes the whole page down. The mark swaps
   with the ground it sits on rather than staying one colourway.
   ============================================================ */

.marks{display:grid;line-height:0;font-size:0;flex:none}
.mk{display:block}
.mk{grid-area:1/1;display:block}
.mk-light{opacity:1}
.mk-dark{opacity:0}
.mk{transition:opacity .35s var(--ease)}

/* --- header: light in light mode, dark over the hero and in dark mode --- */
.nav{background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(20,20,20,.1)}
.nav .brand-txt{color:var(--navy)}
.nav .menu a{color:rgba(20,20,20,.66)}
.nav .menu a:hover,.nav .menu a[aria-current="page"]{color:var(--navy)}
.nav .burger i{background:var(--navy)}

.nav.transparent:not(.stuck){background:transparent;box-shadow:none}

/* --- footer follows the theme too --- */
.foot{background:var(--mist);color:var(--navy)}
.foot h4{color:var(--navy)}
.foot .brand-txt{color:var(--navy)}
.foot a,.foot p{color:rgba(20,20,20,.68)}
.foot a:hover{color:var(--navy)}
.foot-top{border-bottom-color:rgba(20,20,20,.14)}
.foot-bot{color:rgba(20,20,20,.5)}
.foot .legal i{background:rgba(20,20,20,.25)}




/* ---------- contrast corrections (measured, not guessed) ---------- */
/* gold on a light ground measures 1.2:1, so it is never used for text there */
.hstep .n{color:var(--navy)}
.fld label em{color:var(--steel)}
.detail .k{color:var(--navy)}
.chips legend{color:var(--navy)}
.hstep .out span{color:var(--navy)}

/* ============================================================
   RESPONSIVE SYSTEM
   One place for every breakpoint. Appended last so it wins.
   Ladder: 1700 / 1180 / 1080 / 900 / 820 / 720 / 600 / 480 / 380
   ============================================================ */

/* NOTE: overflow-x must NOT be set on <html>. Doing so makes <html> the scroll
   container and silently breaks every position:sticky descendant - which killed
   the pinned horizontal-scroll section. Keep the clip on <body> only, where the
   value propagates to the viewport and body itself stays overflow:visible. */
body{overflow-x:clip}
img,svg,video,table{max-width:100%}
.brand-txt{white-space:nowrap}
.detail .k{width:auto;min-width:76px}

/* the skip link was extending the scroll area to the left */
.skip{position:absolute;left:0;top:0;transform:translateY(-200%);opacity:0}
.skip:focus{transform:none;opacity:1;left:12px;top:12px}

/* ---------- very large screens: let the grid breathe ---------- */
@media(min-width:1700px){
  .wrap{max-width:1560px}
  .wrap-narrow{max-width:1140px}
}

/* ---------- large laptop ---------- */
@media(max-width:1080px){
  .tiles.four{grid-template-columns:repeat(2,1fr)}
}

/* ---------- tablet landscape: the nav becomes a drawer ---------- */
@media(max-width:1080px){
  .menu{
    /* The nav carries backdrop-filter, which makes it the containing block for
       position:fixed children - so the drawer has to be sized explicitly rather
       than pinned to the viewport with inset. */
    position:fixed;top:0;right:0;left:auto;bottom:auto;
    height:100vh;height:100svh;width:min(340px,86vw);background:var(--deep);
    flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;
    padding:0 clamp(28px,6vw,42px);z-index:1;right:0;
    /* Revealed with clip-path rather than a translate: a transform that pushes
       the panel outside the viewport still counts toward scrollable overflow,
       which was adding a sliver of horizontal scroll on narrow phones. */
    transform:none;clip-path:inset(0 0 0 100%);visibility:hidden;pointer-events:none;
    transition:clip-path .42s var(--ease),visibility .42s;
  }
  .menu.open{clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto}
  .menu a{font-size:16px;letter-spacing:.1em}
  .menu a::after{display:none}
  .burger{display:block;z-index:2;order:3}
  .nav-cta{display:inline-block;margin-right:14px;padding:11px 18px;font-size:10.5px}
  .nav{gap:12px}
  .numgrid{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr;gap:36px}
  .g2,.g2-wide,.cta,.hse,.split{grid-template-columns:1fr}
  .cols3{grid-template-columns:1fr}
}

/* ---------- tablet portrait ---------- */
@media(max-width:900px){
  .pad-y{padding-top:clamp(64px,10vw,88px);padding-bottom:clamp(64px,10vw,88px)}
  .banner{padding:clamp(126px,22vw,168px) 0 clamp(52px,9vw,76px)}
  .hstep{width:min(74vw,540px)}
}

/* ---------- small tablet / large phone ---------- */
@media(max-width:820px){
  .hero-stats .row{grid-template-columns:repeat(2,1fr)}
  .hero-stats .cell{border-left:0;border-top:1px solid rgba(255,255,255,.11);padding:18px 16px 20px}
  .hero-stats .cell:nth-child(2n){border-left:1px solid rgba(255,255,255,.11)}
  .hero-stats .cell:nth-child(-n+2){border-top:0}
}

/* ---------- phone landscape / small tablet ---------- */
@media(max-width:720px){
  .tiles,.tiles.four,.mat,.ins,.factgrid,.foot-top,.cols2,.cols4{grid-template-columns:1fr}
  .numgrid{grid-template-columns:repeat(2,1fr)}
  .cap-head{margin-bottom:38px;gap:26px}
  .rule{margin:20px 0 26px}
  .hstep{width:88vw;padding:26px 24px}
  .hstep .n{font-size:16px}
  .hstep h3{font-size:26px;margin-top:12px}
  .hhead{padding:clamp(96px,20vw,116px) var(--pad) 0}
  .chatform .chat{font-size:16px;line-height:2.5}
  .blank{max-width:100%}
      .mq{padding:18px 0}
  .mq-in{gap:38px}
}

/* ---------- phone ---------- */
@media(max-width:600px){
  .brand svg{width:44px;height:44px}
  .brand{gap:12px}
  .brand-txt{font-size:10px;letter-spacing:.12em}
  .nav{padding:12px var(--pad)}
  .nav.transparent{padding:14px var(--pad)}
  .pad-y{padding-top:clamp(56px,12vw,72px);padding-bottom:clamp(56px,12vw,72px)}
  .banner{padding:clamp(112px,28vw,140px) 0 clamp(44px,11vw,60px)}
  .cta > div{padding:28px 24px}
  .split-body{padding:44px 24px}

  /* tables become stacked records */
  table.spec thead{display:none}
  table.spec tr{display:block;border-bottom:1px solid var(--line);padding:16px 0}
  table.spec tbody tr:hover{background:transparent}
  table.spec td{display:block;border:0;padding:0 4px}
  table.spec td.k{
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--steel);margin-bottom:6px;white-space:normal;font-weight:700;
  }
  table.spec td + td{margin-top:2px}
}

/* ---------- small phone ---------- */
@media(max-width:480px){
  .nav-cta{display:none}
  .burger{margin-left:auto}
  .hero h1{font-size:clamp(28px,8.4vw,38px);max-width:none}
  .hero .sub{font-size:14.5px}
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1 1 100%;text-align:center}
  .banner h1{font-size:clamp(28px,8.6vw,40px)}
  .h-sec{font-size:clamp(24px,7.6vw,34px)}
  .h-sub{font-size:19px}
  .numgrid{grid-template-columns:1fr}
  .hstep{width:90vw;padding:22px 20px}
  .foot-bot{gap:12px}

  /* the sentence form stacks into labelled blanks */
  .chatform .chat{font-size:15.5px;line-height:2.1}
  .blank{display:block;width:100%;margin:8px 0 14px;padding:8px 6px}
  .blank-sel{width:100%}
}

/* ---------- very small phone ---------- */
@media(max-width:380px){
  .brand-txt{display:none}
  .brand svg{width:40px;height:40px}
  .hero h1{font-size:27px}
  .h-sec{font-size:23px}
  .btn{padding:14px 20px;font-size:10.5px}
  .detail{flex-direction:column;gap:6px}
  .detail .k{min-width:0}
}

/* ---------- short viewports (landscape phones, small laptops) ---------- */
@media(max-height:640px) and (min-width:721px){
  .hero-inner{padding-top:clamp(110px,16vh,132px);padding-bottom:32px}
  .hero h1{font-size:clamp(28px,3.8vw,44px)}
  .hero .sub{margin-top:14px}
  .hero-actions{margin-top:22px}
}


/* ---------- mobile density polish ---------- */
@media(max-width:720px){
  .card{min-height:0}
  .tile .more{max-height:none;opacity:1;margin-top:14px}
  .card .more{max-height:none;opacity:1;margin-top:14px}
  .hstep .out{margin-top:16px;padding-top:14px}
  .foot a,.foot p{line-height:1.9}
  .foot-top{gap:32px;padding-bottom:34px}
  .crumbs{margin-bottom:16px}
}
@media(max-width:480px){
  .mq span{font-size:16px}
  .lead{font-size:15.5px}
  p{font-size:14px}
}

/* ---------- pointer-coarse: hover reveals need to be open by default ---------- */
@media(hover:none){
}


/* ============================================================
   MOBILE DRAWER
   The panel is dark in both themes, so its links are always light.
   In light mode they were inheriting the header's navy and vanishing.
   ============================================================ */
@media(max-width:1080px){
  .menu{background:#141414}
  .nav .menu a,
  .nav.on-dark-ground .menu a,
  .nav .menu a:hover,
  .nav .menu a[aria-current="page"],
  .nav.on-dark-ground .menu a:hover,
  .nav.on-dark-ground .menu a[aria-current="page"],
}

/* ---------- open drawer: dim the page, get the CTA out of the way ---------- */
body.nav-open::after{
  content:"";position:fixed;inset:0;background:rgba(20,20,20,.55);
  backdrop-filter:blur(2px);z-index:880;
}
body.nav-open .nav-cta{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
@media(min-width:1081px){
  body.nav-open::after{display:none}
  body.nav-open .nav-cta{opacity:1;pointer-events:auto}
}

/* ============================================================
   THE GOLD LINE
   One device, one weight, both themes: a 2px gold underline on the
   accented word. Headings that carry it drop the separate rule bar,
   so a heading never sits above two lines.
   ============================================================ */
.hero h1 em{padding-bottom:4px}


/* the hero line is a short mark at the left, not a full-width underline */

/* ============================================================
   VERTICAL RHYTHM
   One ladder for every heading block, so eyebrow, heading, line,
   subhead and body sit at the same intervals on every page.
   ============================================================ */
.eyebrow{margin-bottom:14px}
.h-sec,.banner h1,.strip h2{margin-bottom:0}
.rule{margin:20px 0 28px}

/* heading straight into body copy, with no rule between */
.h-sec + p,
.h-sec + .lead,
.banner h1 + p,
.strip h2 + p{margin-top:24px}
/* an eyebrow already sets the gap, so a subhead under one does not add more */
.eyebrow + .h-sub{margin-top:0}

/* subheads sit closer to what they introduce than to what precedes them */
.h-sub{margin-top:0;margin-bottom:18px}
* + .h-sub{margin-top:44px}
.cta > div > .h-sub:first-child,
.g2 > div > .h-sub:first-child,
.wrap-narrow .reveal > .h-sub:first-child{margin-top:0}

/* paragraphs breathe evenly */
p + p,p + .ticks,.lead + p,p + table.spec,.ticks + p{margin-top:16px}
.lead{margin-bottom:0}
.cap{margin-top:16px}

/* a button after copy always sits the same distance below it */
.cta-row{margin-top:28px}
p + .cta-row,.ticks + .cta-row{margin-top:28px}

/* the hero uses the same intervals */
.hero .sub{margin-top:26px}
.hero-actions{margin-top:32px}
.banner p{margin-top:24px}
.crumbs{margin-bottom:18px}

@media(max-width:720px){
  .rule{margin:16px 0 22px}
  .h-sec + p,.h-sec + .lead,.banner h1 + p,.strip h2 + p{margin-top:20px}
  * + .h-sub{margin-top:34px}
  .hero .sub{margin-top:22px}
  .hero-actions{margin-top:26px}
}

/* ============================================================
   POINTS OF PRESENCE
   The claim and the picture are the same thing: a lattice of the
   logo's squares where the cells actually count. Pick a row and the
   matching cells light and ripple outward.
   ============================================================ */
.pop{position:relative;margin-top:56px;isolation:isolate}
.pop-list{position:relative;z-index:2;display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:760px}
.pop-item{
  display:grid;grid-template-columns:78px 1fr;grid-template-areas:"n t" ". d";
  gap:0 20px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:24px 0;cursor:pointer;font:inherit;color:inherit;position:relative;
}
.pop-item::before{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--gold);
  transition:width .5s var(--ease);
}
.pop-item[aria-selected="true"]::before{width:100%}
.pop-n{
  grid-area:n;font-family:"Montserrat";font-weight:700;font-size:clamp(28px,3.2vw,42px);
  line-height:1;letter-spacing:-.02em;color:var(--steel);transition:color .4s var(--ease);
}
/* The selected figure matches the lit cells, but copper on the light ground
   measures 2.28:1. Bronze is the same hue, dark enough to read. */
.pop-item[aria-selected="true"] .pop-n{color:var(--bronze)}
.pop-t{
  grid-area:t;align-self:center;font-family:"Montserrat";font-weight:700;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
}
.pop-d{
  grid-area:d;font-size:13.5px;line-height:1.62;color:var(--ink);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .5s var(--ease);
}
.pop-item[aria-selected="true"] .pop-d{max-height:180px;opacity:1;margin-top:12px}

/* the lattice sits behind the type, faded back so it reads as texture */
.pop-viz{
  position:absolute;inset:-6% -2% -6% auto;right:0;width:min(62%,720px);
  z-index:1;pointer-events:none;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%);
}
.pop-grid{width:100%;height:auto;overflow:visible}
.pop-grid rect{
  fill:var(--navy);opacity:.07;
  transition:opacity .45s var(--ease),fill .45s var(--ease),transform .45s var(--ease);
  transform-origin:center;transform-box:fill-box;
}
/* the selected group lights, ripples, and lifts off the field */
.pop[data-active="centre"] .pop-grid rect[data-g="centre"],
.pop[data-active="hub"] .pop-grid rect[data-g="hub"],
.pop[data-active="outer"] .pop-grid rect[data-g="outer"]{
  fill:var(--gold);opacity:1;animation:popPulse 2.6s var(--ease) infinite;animation-delay:var(--d);
}
.pop[data-active="hub"] .pop-grid rect[data-g="hub"]{transform:scale(1.5)}
.pop[data-active="outer"] .pop-grid rect[data-g="outer"]{transform:scale(1.35)}
@keyframes popPulse{0%,100%{opacity:1}50%{opacity:.68}}
@media(prefers-reduced-motion:reduce){.pop-grid rect{animation:none!important}}

@media(max-width:900px){
  .pop{margin-top:40px}
  .pop-viz{inset:-4% -8% -4% auto;width:78%;opacity:.8}
  .pop-list{max-width:none}
}
@media(max-width:600px){
  .pop-viz{width:100%;inset:0;opacity:.55;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
            mask-image:linear-gradient(180deg,#000 0%,transparent 92%);}
}
@media(max-width:480px){
  .pop-item{grid-template-columns:58px 1fr;padding:20px 0}
  .pop-t{font-size:12.5px}
}

/* spam honeypot: off-screen for people, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.reqform button[type="submit"]:disabled{opacity:.6;cursor:progress}

/* ---------- enquiry sent confirmation ---------- */
.sent{padding:8px 0 4px;outline:none}
.sent-tick{width:56px;height:56px;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px}
.sent-tick circle{stroke-dasharray:151;stroke-dashoffset:151;animation:sentRing .6s var(--ease) forwards}
.sent-tick path{stroke-dasharray:36;stroke-dashoffset:36;animation:sentTick .35s var(--ease) .5s forwards}
@keyframes sentRing{to{stroke-dashoffset:0}}
@keyframes sentTick{to{stroke-dashoffset:0}}
.sent h3{font-family:"Montserrat";font-size:clamp(22px,2.6vw,30px);font-weight:700;text-transform:uppercase;color:var(--navy);letter-spacing:-.01em;margin-bottom:14px}
.sent p{max-width:44ch}
.sent .sent-meta{margin-top:14px;font-size:13px;color:var(--steel)}
.sent .sent-meta a{color:var(--navy);text-decoration:underline}
.sent .btn{margin-top:28px}
@media(prefers-reduced-motion:reduce){
  .sent-tick circle,.sent-tick path{animation:none;stroke-dashoffset:0}
}

/* ---------- paired columns: keep the two halves on the same baselines ---------- */
.g2 > div{display:flex;flex-direction:column}
.g2 > div > p{margin-top:0}
.g2 > div > .ticks{margin-top:20px}
.g2 > div > .ticks li:last-child{margin-bottom:0}

/* ---------- paired columns that stay on the same baselines ----------
   Two side-by-side blocks drift apart as soon as one heading wraps to a
   second line. Subgrid makes both columns share the parent's rows, so the
   eyebrow, heading, rule, intro and list line up whatever the wrapping. */
@supports (grid-template-rows: subgrid){
  .g2-sync{grid-template-rows:auto auto auto auto 1fr}
  .g2-sync > div{display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:0}
  .g2-sync > div > *{margin-top:0;margin-bottom:0;align-self:start}
  .g2-sync .eyebrow{padding-bottom:14px}
  .g2-sync .rule{margin:20px 0 28px}
  .g2-sync > div > p{padding-bottom:20px}
}
/* Browsers without subgrid: reserve two lines for both headings instead. */
@supports not (grid-template-rows: subgrid){
  .g2-sync .h-sec{min-height:2.08em}
}
@media(max-width:1080px){
  .g2-sync{grid-template-rows:none}
  .g2-sync > div{display:flex;grid-row:auto}
  .g2-sync .h-sec{min-height:0}
  .g2-sync .eyebrow{padding-bottom:0;margin-bottom:14px}
  .g2-sync > div > p{padding-bottom:0}
}

/* ---------- mobile drawer: always light type on the dark panel ----------
   The light-mode header rules further up set navy links, which is right for a
   white header bar but invisible once those same links move into the dark
   drawer. Scoped to the drawer breakpoint and placed last so it wins in both
   themes and over the .on-dark-ground variants. */
@media(max-width:1080px){
  .menu{background:#141414}
  html .nav .menu a,
  html .nav.on-dark-ground .menu a,
  html .nav .menu a:hover,
  html .nav .menu a[aria-current="page"],
  html .nav.on-dark-ground .menu a:hover,
  html .nav.on-dark-ground .menu a[aria-current="page"],
}

/* ---------- links inside body copy ----------
   These were previously coloured inline, which the dark theme could not
   override - navy on navy, invisible. A class lets both themes set it. */
.inline-link{
  color:var(--navy);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .3s var(--ease);
}
.inline-link:hover{color:var(--bronze,#6E671F)}

/* ---------- native control accents ----------
   Browsers paint select highlights, checkboxes and text selection with their
   own blue unless told otherwise. */
:root{accent-color:var(--gold);color-scheme:light}
select,option,input,textarea{accent-color:var(--gold)}
.select-fld select option:checked,
.select-fld select option:hover{background:var(--gold);color:var(--navy)}
::selection{background:var(--gold);color:var(--navy)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--gold)}

/* ---------- five statistics across the hero bar ---------- */
.hero-stats .row{grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){.hero-stats .row{grid-template-columns:repeat(3,1fr)}
  .hero-stats .cell:nth-child(4){border-left:0}
  .hero-stats .cell:nth-child(n+4){border-top:1px solid var(--line)}}
@media(max-width:600px){.hero-stats .row{grid-template-columns:repeat(2,1fr)}
  .hero-stats .cell:nth-child(3){border-left:0}
  .hero-stats .cell:nth-child(n+3){border-top:1px solid var(--line)}
  .hero-stats .cell:nth-child(4){border-left:1px solid var(--line)}}

/* ============================================================
   LIGHT SURFACES
   One theme only. Copper stays an element colour - type accents, rules,
   the mark, the button - and no section is a full dark field.
   ============================================================ */
.bg-navy,.bg-deep,.banner,.strip{background:var(--mist);color:var(--ink)}
.banner h1,.strip h2,.h-sec.on-dark,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--navy)}
.on-dark p,.on-dark li,.banner p,.strip p{color:var(--ink)}
.eyebrow.on-dark,.strip .kicker{color:var(--navy)}
.crumbs{color:var(--steel)}
.crumbs i{background:var(--line)}

/* cards inside those sections are white, edged rather than filled */
.tiles.on-navy{background:var(--line);border-color:var(--line)}
.tiles.on-navy .tile{background:#fff}
.tiles.on-navy .tile h3{color:var(--navy)}
.tiles.on-navy .tile p{color:var(--ink)}
.tiles.on-navy .tile .more li{color:var(--navy)}
.tiles.on-navy .tile svg{stroke:var(--gold)}
.numgrid{background:var(--line);border-color:var(--line)}
.numgrid div{background:#fff}
.numgrid b{color:var(--navy)}
.numgrid span{color:var(--steel)}
.numgrid p{color:var(--ink)}
.ins{background:var(--line);border-color:var(--line)}
.ins div{background:#fff;color:var(--ink)}
.ins div:hover{background:var(--gold);color:var(--navy)}
.ticks li{color:var(--ink)}

/* client marquee reads as type, not a dark band */
.mq{border-color:var(--line)}
.mq span{color:rgba(20,20,20,.3)}
.mq span:hover{color:var(--navy);text-shadow:none}

/* the hero and its stat bar */
.hero{background-color:var(--mist)}
.hero-veil{background:linear-gradient(90deg,rgba(246,243,238,.95) 0%,rgba(246,243,238,.72) 44%,rgba(246,243,238,.05) 82%)}
.hero h1{color:var(--navy)}
.hero h1 em{color:var(--navy)}
.hero .sub{color:var(--ink)}
.hero .eyebrow.on-dark{color:var(--navy)}
.hero-stats{background:rgba(255,255,255,.72);border-top-color:var(--line)}
.hero-stats .cell{border-left-color:var(--line)}
.hero-stats b{color:var(--navy)}
.hero-stats span{color:var(--steel)}
.hero-stats .cell:hover{background:rgba(204,153,102,.1)}
.scroll-hint{color:var(--steel)}
.scroll-hint i{background:linear-gradient(to bottom,var(--navy),transparent)}
.no-webgl .hero{background-color:var(--mist);background-image:radial-gradient(120% 90% at 78% 32%,#fff 0%,var(--mist) 62%)}

/* the header sits on a light hero */
.nav,.nav.on-dark-ground{background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(20,20,20,.08)}
.nav .brand-txt,.nav.on-dark-ground .brand-txt{color:var(--navy)}
.nav .menu a,.nav.on-dark-ground .menu a{color:rgba(20,20,20,.62)}
.nav .menu a:hover,.nav .menu a[aria-current="page"],
.nav.on-dark-ground .menu a:hover,.nav.on-dark-ground .menu a[aria-current="page"]{color:var(--navy)}
.nav .burger i,.nav.on-dark-ground .burger i{background:var(--navy)}
.nav.on-dark-ground .mk-light{opacity:1}
.nav.on-dark-ground .mk-dark{opacity:0}
.nav.transparent:not(.stuck){background:transparent;box-shadow:none}

/* the closing block keeps its copper button, on a light ground */
.strip{border-top:1px solid var(--line)}
.strip::before{background:radial-gradient(120% 140% at 88% 18%,rgba(204,153,102,.26) 0%,rgba(204,153,102,0) 60%)}

/* footer */
.foot{background:var(--mist);color:var(--navy)}
.foot h4,.foot .brand-txt{color:var(--navy)}
.foot a,.foot p{color:rgba(20,20,20,.66)}
.foot a:hover{color:var(--gold)}
.foot-top{border-bottom-color:var(--line)}
.foot-bot{color:var(--steel)}
.foot .legal i{background:var(--line)}

/* ghost button: copper type fails on a light ground, so the outline carries it */
.btn-ghost{color:var(--navy);border-color:var(--gold)}
.btn-ghost:hover span{color:var(--navy)}

/* the mark always uses its light colourway now */
.mk-dark{display:none}

/* the WebGL canvas paints the light ground itself; these back it up */
.hero,.no-webgl .hero{background-color:var(--mist)}
.hero-veil{background:linear-gradient(90deg,rgba(246,243,238,.95) 0%,rgba(246,243,238,.7) 44%,rgba(246,243,238,.04) 82%),linear-gradient(to top,rgba(246,243,238,.9) 2%,rgba(246,243,238,0) 40%)}
.hero-stats{background:rgba(255,255,255,.8);border-top:1px solid var(--line)}
.hero-stats .cell{border-left:1px solid var(--line)}
.hero-stats b{color:var(--navy)}
.hero-stats span{color:var(--steel)}
.hero-stats .row{grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){.hero-stats .row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.hero-stats .row{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   ROUND 11 CORRECTIONS
   ============================================================ */

/* 1. buffer page on white, with the mark in its own colours */
#pre{background:#FFFFFF}
#pre .preword{color:var(--navy)}
#pre .prebar{background:var(--line)}
#pre .prebar i{background:var(--gold)}

/* 3. the four lines of work: hover lifts the card, it does not invert it.
   The wire and a warm tint carry the state instead of a colour flip. */
.tiles.on-navy .tile,
.tiles .tile{background:#fff;color:var(--ink)}
.tiles .tile:hover,
.tiles .tile:focus-within{
  background:#fff;color:var(--ink);
  box-shadow:0 14px 40px rgba(20,20,20,.07);
}
.tiles .tile:hover h3,.tiles .tile:focus-within h3{color:var(--navy)}
.tiles .tile:hover p,.tiles .tile:focus-within p{color:var(--ink)}
.tiles .tile:hover svg,.tiles .tile:focus-within svg{stroke:var(--gold)}
.tiles .tile:hover .more li,.tiles .tile:focus-within .more li{color:var(--navy)}

/* the reach tiles behave the same way */
.reveal-on-hover .tile:hover,
.reveal-on-hover .tile:focus-within{background:#fff;color:var(--ink)}


/* 6. the timeline dropdown, hovered and open */
.select-fld select{border-bottom-color:var(--line);color:var(--navy)}
.select-fld:hover select,
.select-fld select:hover{border-bottom-color:var(--gold);color:var(--navy)}
.select-fld:hover::after,
.select-fld select:hover + label + i,
.select-fld select:focus + label{border-color:var(--gold)}
.select-fld:hover::after{border-right-color:var(--bronze);border-bottom-color:var(--bronze)}
.select-fld select:focus{border-bottom-color:var(--gold);outline:none}
.select-fld select option{background:#fff;color:var(--navy)}
.select-fld select option:checked{background:var(--gold);color:var(--navy)}

/* 7. mobile drawer: dark panel, so its links must stay light.
   The single-theme rules above set navy links for the white header bar, which
   is correct there and invisible here. Last word, scoped to the drawer. */
@media(max-width:1080px){
  .menu{background:#141414}
  .nav .menu a,
  .nav.on-dark-ground .menu a,
  .menu a{color:rgba(255,255,255,.84)}
  .nav .menu a:hover,
  .nav .menu a[aria-current="page"],
  .nav.on-dark-ground .menu a:hover,
  .nav.on-dark-ground .menu a[aria-current="page"],
  .menu a:hover,
  .menu a[aria-current="page"]{color:var(--gold)}
  .menu a::after{background:var(--gold)}
}

/* ============================================================
   HEADING RULE
   One device: a 72px copper rule, left-aligned under every section
   heading. It is attached to the heading itself, not to the accented
   word, so its position never depends on where that word falls.
   ============================================================ */
.h-sec,.banner h1,.strip h2,.hero h1{position:relative;padding-bottom:22px}
.h-sec::after,.banner h1::after,.strip h2::after,.hero h1::after{
  content:"";position:absolute;left:0;bottom:0;
  width:72px;height:2px;background:var(--gold);
}
/* the accented word is a colour change only */
.h-sec .acc,.banner h1 .acc,.hero h1 em,.strip h2 em{
  color:var(--bronze);font-style:normal;display:inline;
  padding:0;box-shadow:none;
}
.hero h1 em,.strip h2 em{color:var(--bronze)}
/* the old standalone bar is now redundant everywhere the rule appears */
.h-sec + .rule,.banner h1 ~ .rule{display:none}
@media(max-width:600px){
  .h-sec,.banner h1,.strip h2,.hero h1{padding-bottom:18px}
  .h-sec::after,.banner h1::after,.strip h2::after,.hero h1::after{width:56px}
}

/* ---------- timeline dropdown ----------
   A native <select> popup is drawn by the operating system, so its blue
   highlight cannot be restyled with CSS. This is a listbox built from real
   elements, which keeps it in the palette and keyboard accessible. */
.sel{position:relative}
.sel-lbl{
  position:absolute;left:0;top:6px;pointer-events:none;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);font-family:"Montserrat";font-weight:600;
}
.sel-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:transparent;border:0;border-bottom:1.5px solid var(--line);
  padding:30px 4px 12px 0;font-family:"Poppins";font-size:15px;color:var(--navy);
  cursor:pointer;text-align:left;transition:border-color .3s var(--ease);
}
.sel-btn:hover,.sel-btn[aria-expanded="true"]{border-bottom-color:var(--gold)}
.sel-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sel-val{color:var(--steel)}
.sel.chosen .sel-val{color:var(--navy)}
.sel-arrow{
  width:9px;height:9px;flex:none;margin-bottom:4px;
  border-right:2px solid var(--steel);border-bottom:2px solid var(--steel);
  transform:rotate(45deg);transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.sel-btn:hover .sel-arrow,.sel-btn[aria-expanded="true"] .sel-arrow{border-color:var(--bronze)}
.sel-btn[aria-expanded="true"] .sel-arrow{transform:rotate(-135deg);margin-bottom:-2px}
.sel-list{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 44px rgba(20,20,20,.12);padding:6px;margin:0;
  list-style:none;max-height:260px;overflow:auto;
}
.sel-list[hidden]{display:none}
.sel-list li{
  padding:11px 14px;font-size:14px;color:var(--ink);cursor:pointer;
  border-radius:calc(var(--r) - 2px);transition:background .2s var(--ease),color .2s var(--ease);
}
.sel-list li:hover,.sel-list li.active{background:var(--gold);color:var(--navy)}
.sel-list li[aria-selected="true"]{font-weight:600;color:var(--navy)}
.sel-list li[aria-selected="true"]::after{content:" \2713";color:var(--bronze)}