/* Alpheratz — British luxury engineering & IT
   Palette sourced from the Alpheratz mark: navy #003e89, teal #2dbaac */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=IBM+Plex+Sans:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#07182c;
  --navy:#003e89;
  --navy-deep:#01254f;
  --teal:#2dbaac;
  --teal-deep:#17877f;
  --gilt:#b08b4a;
  --gilt-light:#d8bd86;
  --paper:#fbf9f4;
  --paper-2:#f4efe5;
  --slate:#4e5865;
  --slate-light:#7d8691;
  --rule:rgba(7,24,44,0.12);
  --rule-light:rgba(251,249,244,0.18);

  --display:'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --gut:clamp(22px, 5vw, 64px);
  --max:1240px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:16.5px;
  line-height:1.72;
}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;display:block;}
::selection{background:var(--navy);color:var(--paper);}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
.rule{height:1px;background:var(--rule);border:0;}

/* ── typography ─────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-0.005em;line-height:1.1;}
h1{font-size:clamp(2.9rem, 6.4vw, 5.4rem);letter-spacing:-0.018em;}
h2{font-size:clamp(2.1rem, 4vw, 3.3rem);}
h3{font-size:clamp(1.35rem, 2vw, 1.72rem);line-height:1.22;}
h4{font-size:1.16rem;}
em, .it{font-style:italic;}
p{max-width:68ch;}
.lede{font-family:var(--display);font-size:clamp(1.28rem,2.1vw,1.62rem);line-height:1.5;color:var(--slate);font-weight:300;max-width:44ch;}

.eyebrow{
  font-family:var(--mono);font-size:0.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:0.22em;color:var(--gilt);
  display:flex;align-items:center;gap:14px;white-space:nowrap;
}
.eyebrow::before{content:'';width:34px;height:1px;background:var(--gilt);flex:none;}
.eyebrow.on-dark{color:var(--gilt-light);}
.eyebrow.on-dark::before{background:var(--gilt-light);}
.eyebrow.center{justify-content:center;}

.num-tag{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.16em;color:var(--gilt);}

/* ── header ─────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:80;
  background:rgba(251,249,244,0.9);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px 0;}
.brand{display:flex;align-items:center;gap:13px;}
.brand svg,.brand img{height:40px;width:auto;}
.brand .name{
  font-family:var(--display);font-size:1.42rem;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--navy-deep);line-height:1;
}
.brand .name small{
  display:block;font-family:var(--mono);font-size:0.55rem;font-weight:400;
  letter-spacing:0.3em;color:var(--slate-light);margin-top:6px;text-transform:uppercase;
}
.navlinks{display:flex;gap:34px;align-items:center;font-size:0.85rem;letter-spacing:0.06em;}
.navlinks a{position:relative;padding:4px 0;color:var(--ink);text-transform:uppercase;font-weight:400;font-size:0.74rem;letter-spacing:0.14em;}
.navlinks a::after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gilt);transition:width .35s cubic-bezier(.2,.7,.3,1);}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{width:100%;}
.navlinks a[aria-current="page"]{color:var(--navy);}

.btn{
  display:inline-block;font-family:var(--mono);font-size:0.72rem;
  letter-spacing:0.18em;text-transform:uppercase;padding:14px 26px;
  border:1px solid var(--navy);color:var(--navy-deep);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn:hover{background:var(--navy);color:var(--paper);}
.btn-solid{background:var(--navy);color:var(--paper);border-color:var(--navy);}
.btn-solid:hover{background:var(--ink);border-color:var(--ink);}
.btn-gilt{border-color:var(--gilt);color:var(--gilt);}
.btn-gilt:hover{background:var(--gilt);color:var(--ink);}
.btn-light{border-color:var(--rule-light);color:var(--paper);}
.btn-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}

.burger{display:none;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;border:1px solid var(--rule);background:none;padding:11px 15px;cursor:pointer;color:var(--ink);}

@media (max-width:940px){
  .navlinks{
    position:fixed;top:77px;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;align-items:stretch;
    max-height:0;overflow:hidden;transition:max-height .4s ease;border-bottom:1px solid var(--rule);
  }
  .navlinks.open{max-height:560px;}
  .navlinks a{padding:19px var(--gut);border-top:1px solid var(--rule);}
  .nav .btn{display:none;}
  .burger{display:block;}
}

/* ── sections ───────────────────────────────────────────── */
section{padding:clamp(72px,9vw,132px) 0;}
section + section{border-top:1px solid var(--rule);}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:end;margin-bottom:clamp(42px,5vw,72px);}
.sec-head .note{font-size:0.95rem;color:var(--slate);max-width:46ch;}
@media (max-width:820px){.sec-head{grid-template-columns:1fr;align-items:start;}}

/* ── hero ───────────────────────────────────────────────── */
.hero{padding:clamp(80px,11vw,160px) 0 clamp(60px,7vw,96px);position:relative;overflow:hidden;}
.hero::after{
  content:'';position:absolute;right:-14vw;top:-12vw;width:52vw;height:52vw;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(45,186,172,0.22), rgba(0,62,137,0.10) 46%, transparent 72%);
  pointer-events:none;
}
.hero h1{margin-top:30px;max-width:16ch;}
.hero h1 .gild{
  font-style:italic;
  background:linear-gradient(96deg,var(--navy) 0%, var(--teal-deep) 52%, var(--gilt) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{margin-top:34px;}
.hero-actions{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap;}

/* lifecycle rail */
.rail{margin-top:clamp(58px,7vw,96px);display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);}
.rail .stop{padding:26px 20px 0;border-right:1px solid var(--rule);position:relative;}
.rail .stop:last-child{border-right:none;}
.rail .stop::before{content:'';position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--paper);border:1px solid var(--navy);}
.rail .stop:first-child::before{background:var(--gilt);border-color:var(--gilt);}
.rail .k{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--slate-light);}
.rail .v{font-family:var(--display);font-size:1.22rem;margin-top:8px;color:var(--navy-deep);}
@media (max-width:820px){.rail{grid-template-columns:1fr 1fr;}.rail .stop{border-bottom:1px solid var(--rule);padding-bottom:18px;}}

/* ── practices / cards ──────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule);}
.cards.three{grid-template-columns:repeat(3,1fr);}
.cards.two{grid-template-columns:repeat(2,1fr);}
.card{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(28px,3vw,42px);min-height:264px;
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  background:transparent;transition:background .4s ease;position:relative;
}
.card::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gilt);transition:width .5s cubic-bezier(.2,.7,.3,1);}
.card:hover{background:var(--paper-2);}
.card:hover::after{width:100%;}
.card h3{color:var(--navy-deep);}
.card p{font-size:0.94rem;color:var(--slate);}
.card .more{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--teal-deep);}
@media (max-width:1000px){.cards,.cards.three{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.cards,.cards.three,.cards.two{grid-template-columns:1fr;}}

/* ── dark band ──────────────────────────────────────────── */
.band{background:var(--ink);color:var(--paper);border-top:none;position:relative;overflow:hidden;}
.band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(1100px 520px at 78% -8%, rgba(45,186,172,0.16), transparent 62%),
             radial-gradient(760px 420px at 6% 108%, rgba(0,62,137,0.42), transparent 66%);
  pointer-events:none;
}
.band .wrap{position:relative;z-index:2;}
.band h2,.band h3{color:var(--paper);}
.band p,.band .note{color:#b5c2ce;}
.band .lede{color:#c9d4de;}
.band .cards{border-color:var(--rule-light);}
.band .card{border-color:var(--rule-light);}
.band .card:hover{background:rgba(255,255,255,0.045);}
.band .card h3{color:var(--paper);}
.band .card p{color:#adbac6;}
.band .rule{background:var(--rule-light);}

/* ── editorial two-column ───────────────────────────────── */
.split{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(34px,6vw,90px);align-items:start;}
.split.even{grid-template-columns:1fr 1fr;}
.split p + p{margin-top:20px;}
.split .body p{color:var(--slate);}
@media (max-width:900px){.split,.split.even{grid-template-columns:1fr;}}

/* ── stats ──────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin-top:clamp(40px,5vw,68px);}
.stat{padding:30px 26px 0;border-right:1px solid var(--rule);}
.stat:last-child{border-right:none;}
.stat .n{font-family:var(--display);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--navy);}
.stat .c{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--slate-light);margin-top:14px;}
.band .stats{border-color:var(--rule-light);}
.band .stat{border-color:var(--rule-light);}
.band .stat .n{color:var(--teal);}
.band .stat .c{color:#9fadba;}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr;}.stat{border-bottom:1px solid var(--rule);padding-bottom:22px;}}

/* ── list blocks (values, disciplines) ──────────────────── */
.entries{border-top:1px solid var(--rule);}
.entry{
  display:grid;grid-template-columns:64px 1fr 1.25fr;gap:clamp(20px,3vw,48px);
  padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--rule);
  align-items:start;transition:background .35s ease;
}
.entry:hover{background:var(--paper-2);}
.entry .idx{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;color:var(--gilt);padding-top:8px;}
.entry h3{color:var(--navy-deep);}
.entry p{color:var(--slate);font-size:0.98rem;}
.entry p + ul{margin-top:18px;}
.entry ul strong{color:var(--navy-deep);font-weight:500;}
.entry ul{list-style:none;color:var(--slate);font-size:0.96rem;}
.entry ul li{padding-left:20px;position:relative;margin-bottom:9px;}
.entry ul li::before{content:'';position:absolute;left:0;top:12px;width:8px;height:1px;background:var(--teal-deep);}
@media (max-width:820px){.entry{grid-template-columns:1fr;gap:12px;}.entry .idx{padding-top:0;}}

/* ── sectors marquee-ish strip ──────────────────────────── */
.sectors{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);}
.sector{
  flex:1 1 220px;padding:26px 24px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--display);font-size:1.24rem;color:var(--navy-deep);transition:color .3s ease,background .3s ease;
}
.sector:hover{background:var(--paper-2);color:var(--teal-deep);}
.sector span{display:block;font-family:var(--mono);font-size:0.64rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate-light);margin-bottom:10px;}

/* ── roles ──────────────────────────────────────────────── */
.roles{border-top:1px solid var(--rule);}
.role{
  display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;
  padding:24px 4px;border-bottom:1px solid var(--rule);transition:padding-left .35s ease,background .35s ease;
}
.role:hover{background:var(--paper-2);padding-left:18px;}
.role h3{font-size:1.32rem;color:var(--navy-deep);}
.role .disc{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--gilt);}
.role .go{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal-deep);}
@media (max-width:700px){.role{grid-template-columns:1fr;gap:8px;}}

/* ── quote / credo ──────────────────────────────────────── */
.credo{text-align:center;padding:clamp(78px,10vw,140px) 0;}
.credo blockquote{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.25;max-width:19ch;margin:26px auto 0;
  color:var(--navy-deep);
}
.band .credo blockquote{color:var(--paper);}
.credo .attrib{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--slate-light);margin-top:34px;}

/* ── page masthead (inner pages) ────────────────────────── */
.masthead{padding:clamp(66px,8vw,120px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--rule);}
.masthead h1{font-size:clamp(2.5rem,5.4vw,4.4rem);max-width:18ch;margin-top:26px;}
.masthead .lede{margin-top:26px;max-width:56ch;}

/* ── contact ────────────────────────────────────────────── */
.form{display:grid;gap:22px;max-width:640px;}
.field label{display:block;font-family:var(--mono);font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate-light);margin-bottom:9px;}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:12px 2px;font-family:var(--body);font-size:1rem;font-weight:300;color:var(--ink);
  transition:border-color .3s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gilt);}
.field textarea{min-height:130px;resize:vertical;}
.contact-list dt{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate-light);margin-top:26px;}
.contact-list dd{font-family:var(--display);font-size:1.3rem;color:var(--navy-deep);margin-top:6px;}

/* ── CTA band ───────────────────────────────────────────── */
.cta{background:var(--navy-deep);color:var(--paper);text-align:center;padding:clamp(72px,9vw,124px) 0;border:0;position:relative;overflow:hidden;}
.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(760px 420px at 50% 130%, rgba(45,186,172,0.3), transparent 66%);}
.cta .wrap{position:relative;z-index:2;}
.cta h2{color:var(--paper);max-width:20ch;margin:22px auto 0;}
.cta p{color:#c2d0dc;margin:22px auto 0;max-width:48ch;}
.cta .btn{margin-top:38px;}

/* ── footer ─────────────────────────────────────────────── */
footer{background:var(--ink);color:#aab7c3;padding:clamp(56px,7vw,86px) 0 34px;}
footer a{color:#dbe3ea;}
footer a:hover{color:var(--teal);}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,60px);}
.foot-brand .name{font-family:var(--display);font-size:1.5rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--paper);}
.foot-brand p{margin-top:18px;font-size:0.92rem;color:#93a2af;max-width:34ch;}
.foot-col h4{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gilt-light);margin-bottom:18px;font-weight:500;}
.foot-col a{display:block;font-size:0.92rem;margin-bottom:11px;}
.foot-bottom{
  margin-top:clamp(44px,6vw,72px);padding-top:24px;border-top:1px solid var(--rule-light);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.12em;color:#7d8b98;text-transform:uppercase;
}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr;}}

/* ── reveal ─────────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1);}
.js .rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

@media (max-width:760px){
  .eyebrow{white-space:normal;}
  .eyebrow::before{width:22px;}
}

/* dark-band overrides for list entries + sectors */
.band .entries{border-color:var(--rule-light);}
.band .entry{border-color:var(--rule-light);}
.band .entry:hover{background:rgba(255,255,255,0.04);}
.band .entry h3{color:var(--paper);}
.band .entry p{color:#adbac6;}
.band .entry ul{color:#adbac6;}
.band .entry ul strong{color:var(--teal);}
.band .entry ul li::before{background:var(--teal);}
.band .entry .idx{color:var(--gilt-light);}
.band .sectors{border-color:var(--rule-light);}
.band .sector{border-color:var(--rule-light);color:var(--paper);}
.band .sector:hover{background:rgba(255,255,255,0.05);color:var(--teal);}
.band .roles,.band .role{border-color:var(--rule-light);}
.band .role h3{color:var(--paper);}
.band .role:hover{background:rgba(255,255,255,0.04);}
.band .btn{border-color:var(--rule-light);color:var(--paper);}
.band .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}

/* links inside headings keep the heading's colour, gain a gilt underline */
h2 a, h3 a{
  color:inherit;background-image:linear-gradient(var(--gilt),var(--gilt));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s cubic-bezier(.2,.7,.3,1);padding-bottom:2px;
}
h2 a:hover, h3 a:hover{background-size:100% 1px;}
.entry h3 a:hover{color:var(--teal-deep);}

/* long-form prose blocks on detail pages */
.prose p{color:var(--slate);margin-bottom:18px;}
.prose p:last-child{margin-bottom:0;}

/* a section that follows a masthead with no lede needs less air above it */
section.tight{padding-top:clamp(40px,5vw,64px);}
.entry p + p{margin-top:14px;}
.entry a, .prose a{color:var(--teal-deep);border-bottom:1px solid rgba(23,135,127,0.35);}
.entry a:hover, .prose a:hover{border-bottom-color:var(--teal-deep);}