/* ============================================================
   AKRA GROUP — "One standard, four trades."
   Annual-report / corporate-register art direction.
   House system: every size, space, time from the tokens below.
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subsets) ---------- */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-normal-100-900.woff2") format("woff2");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("fonts/sourceserif4-normal-200-900.woff2") format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("fonts/sourceserif4-italic-200-900.woff2") format("woff2");
  font-weight:200 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plexmono-normal-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plexmono-normal-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* ink & ground — petrol #1E4356 is Akra's own live overlay colour */
  --ink:#12242E;
  --ink-soft:#42586390;
  --ink-mid:#3D535F;
  --petrol:#1E4356;
  --petrol-deep:#152E3B;
  --paper:#F4F6F5;
  --card:#FFFFFF;
  --line:#D9E0DF;
  --line-ink:#2E4854;

  /* the four units — Sports carries EKANA's brand gold + navy; the rest
     are each sampled from that unit's own real logo */
  --sports:#BAA53C;
  --navy:#001F3D;
  --food:#0F8E46;
  --paint:#E6C41E;
  --consult:#ED8D11;
  --accent:var(--petrol);
  --accent-ink:#FFFFFF;

  /* type scale — one ratio (1.25), fluid */
  --t--1:clamp(0.79rem, 0.76rem + 0.15vw, 0.88rem);
  --t-0:clamp(1rem, 0.96rem + 0.22vw, 1.13rem);
  --t-1:clamp(1.22rem, 1.16rem + 0.3vw, 1.4rem);
  --t-2:clamp(1.5rem, 1.4rem + 0.5vw, 1.8rem);
  --t-3:clamp(1.85rem, 1.66rem + 0.95vw, 2.4rem);
  --t-4:clamp(2.25rem, 1.9rem + 1.75vw, 3.3rem);
  --t-5:clamp(2.7rem, 2.1rem + 3vw, 4.6rem);
  --t-mast:clamp(4.2rem, 1.4rem + 14vw, 12.5rem);

  /* space scale — 8px rhythm */
  --s-1:0.5rem;
  --s-2:1rem;
  --s-3:1.5rem;
  --s-4:2.5rem;
  --s-5:4rem;
  --s-6:6.5rem;
  --s-7:9rem;

  /* motion */
  --ease:cubic-bezier(.19,.84,.26,1);
  --dur-1:.28s;
  --dur-2:.7s;
  --dur-3:1.1s;

  /* exactly two radii, two shadows */
  --r-s:2px;
  --r-full:999px;
  --shadow-1:0 1px 3px rgba(18,36,46,.10);
  --shadow-2:0 22px 44px -20px rgba(18,36,46,.28);

  --w-wide:75rem;
  --w-text:44rem;
}

/* per-unit page keying */
body[data-unit="sports"]{--accent:var(--sports); --accent-ink:#12242E;}
body[data-unit="food"]{--accent:var(--food);}
body[data-unit="paint"]{--accent:var(--paint); --accent-ink:#12242E;}
body[data-unit="consult"]{--accent:var(--consult); --accent-ink:#12242E;}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:var(--t-0);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{
  font-family:"Archivo",system-ui,sans-serif;
  font-stretch:105%;
  font-weight:700;
  line-height:1.08;
  margin:0 0 var(--s-3);
  letter-spacing:-.01em;
  text-wrap:balance;
}
p{margin:0 0 var(--s-3);}
a{color:var(--petrol);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-s);}
/* on dark surfaces the petrol outline vanishes — Electrum gold reads on all of them */
.site-head :focus-visible,.mast :focus-visible,.band :focus-visible,
.cta-band :focus-visible,.ekana-band :focus-visible,.vision-plate :focus-visible,
.site-foot :focus-visible{outline-color:var(--sports);}
::selection{background:var(--petrol);color:#fff;}

.mono{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--t--1);
  letter-spacing:.14em;
  text-transform:uppercase;
}

.wrap{max-width:var(--w-wide);margin-inline:auto;padding-inline:var(--s-3);}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:var(--s-1) var(--s-2);
}
.skip-link:focus{left:0;}

/* ============================================================
   Header
   ============================================================ */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:color-mix(in srgb, var(--petrol-deep) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-ink);
}
.site-head .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);min-height:4.25rem;
}
.brand img{width:clamp(6.5rem,10vw,8.25rem);height:auto;}
.nav{display:flex;align-items:center;gap:var(--s-3);}
.nav a{
  font-family:"Archivo",sans-serif;font-stretch:105%;font-weight:600;
  font-size:var(--t--1);letter-spacing:.08em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  padding:var(--s-1) 0;
  border-bottom:2px solid transparent;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:#fff;}
body[data-unit="paint"] .nav a:hover,body[data-unit="paint"] .nav a[aria-current="page"],
body[data-unit="consult"] .nav a:hover,body[data-unit="consult"] .nav a[aria-current="page"]{border-bottom-color:var(--accent);}

.nav-units{position:relative;}
.nav-units>button{
  all:unset;cursor:pointer;
  font-family:"Archivo",sans-serif;font-stretch:105%;font-weight:600;
  font-size:var(--t--1);letter-spacing:.08em;text-transform:uppercase;color:#fff;
  padding:var(--s-1) 0;border-bottom:2px solid transparent;
}
.nav-units>button::after{
  content:"";display:inline-block;margin-left:.5em;
  width:.45em;height:.45em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-.15em);
  transition:transform var(--dur-1) var(--ease);
}
.nav-units.open>button::after{transform:rotate(225deg) translateY(-.05em);}
.nav-units>button:hover{border-bottom-color:var(--accent);}
.nav-units>button:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.nav-units ul{
  position:absolute;top:100%;left:50%;translate:-50% 0;
  min-width:13rem;margin:var(--s-1) 0 0;padding:var(--s-1);
  list-style:none;background:var(--card);border-radius:var(--r-s);
  box-shadow:var(--shadow-2);border:1px solid var(--line);
  display:none;
}
.nav-units.open ul{display:block;}
.nav-units ul a{
  display:flex;align-items:center;gap:var(--s-1);
  color:var(--ink);border-bottom:none;padding:var(--s-1) var(--s-2);
  border-left:3px solid var(--u,var(--petrol));
  margin-bottom:2px;
}
.nav-units ul a:hover{background:var(--paper);border-bottom:none;}
.u-sports{--u:var(--sports);} .u-food{--u:var(--food);}
.u-paint{--u:var(--paint);} .u-consult{--u:var(--consult);}

.nav-toggle{
  all:unset;
  display:none;cursor:pointer;color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:var(--t--1);
  letter-spacing:.14em;text-transform:uppercase;
  padding:var(--s-1) var(--s-2);border:1px solid var(--line-ink);border-radius:var(--r-s);
}
.nav-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px;}

@media (max-width:56rem){
  .nav-toggle{display:block;}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--petrol-deep);
    border-bottom:1px solid var(--line-ink);
    padding:var(--s-2) var(--s-3) var(--s-3);
    display:none;
  }
  .nav.open{display:flex;}
  .nav a{padding:var(--s-2) 0;border-bottom:1px solid var(--line-ink);}
  .nav-units{width:100%;}
  .nav-units>button{display:block;width:100%;padding:var(--s-2) 0;border-bottom:1px solid var(--line-ink);}
  .nav-units ul{position:static;translate:none;display:block;box-shadow:none;background:transparent;border:none;padding:0 0 0 var(--s-2);}
  .nav-units ul a{color:#fff;}
  .nav-units ul a:hover{background:transparent;}
}

/* ============================================================
   Hero — the masthead (home)
   ============================================================ */
.mast{
  background:
    linear-gradient(160deg, var(--petrol-deep) 0%, var(--petrol) 78%, #29566D 100%);
  color:#fff;
  padding:calc(4.25rem + var(--s-5)) 0 var(--s-6);
  position:relative;
  overflow:hidden;
  min-height:min(100svh, 56rem);
  display:flex;align-items:center;
}
.mast .wrap{width:100%;}
/* scroll cue — a drawn line that keeps drawing */
.mast-scroll{
  position:absolute;right:var(--s-3);bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  color:#B9CBD6;text-decoration:none;
  writing-mode:vertical-rl;
  padding-bottom:0;
}
.mast-scroll::after{
  content:"";width:1px;height:var(--s-6);
  background:linear-gradient(to bottom, var(--sports), transparent 85%);
  animation:cue 2.6s var(--ease) infinite;
  transform-origin:top;
}
.mast-scroll:hover{color:#fff;}
@keyframes cue{
  0%{transform:scaleY(0);}
  45%{transform:scaleY(1);}
  100%{transform:scaleY(1);opacity:0;}
}
.mast::after{ /* faint ledger grid, drawn not imported */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:calc(var(--s-7) * 1.2) calc(var(--s-7) * 1.2);
}
.mast .wrap{position:relative;z-index:1;}
.mast-kicker{color:#B9CBD6;display:block;margin-bottom:var(--s-3);}
.mast-word{
  display:flex;gap:.06em;
  font-family:"Archivo",sans-serif;font-stretch:118%;font-weight:800;
  font-size:var(--t-mast);line-height:.95;letter-spacing:.01em;
  margin:0 0 var(--s-4);
}
.mast-word span{position:relative;display:inline-block;}
.mast-word span::after{
  content:"";position:absolute;left:.04em;right:.08em;bottom:-.06em;height:.055em;
  background:var(--u);transform:scaleX(0);transform-origin:left;
}
.mast-word .in::after{transform:scaleX(1);transition:transform var(--dur-2) var(--ease);}
.mast-word span:nth-child(1){--u:var(--sports);}
.mast-word span:nth-child(2){--u:var(--food);}
.mast-word span:nth-child(3){--u:var(--paint);}
.mast-word span:nth-child(4){--u:var(--consult);}
.mast-lede{
  font-size:var(--t-1);max-width:var(--w-text);
  color:#DCE6EB;margin-bottom:var(--s-5);
}
.mast-lede strong{color:#fff;font-weight:600;}

/* the masthead index line — one quiet pointer to the register below */
.mast-index{
  display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);align-items:center;
}
.mast-index a{
  color:#DCE6EB;text-decoration:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--t--1);letter-spacing:.14em;text-transform:uppercase;
  padding:var(--s-1) 0;border-bottom:2px solid var(--u,var(--petrol));
}
.mast-index a:hover{color:#fff;}

/* ============================================================
   Sections — ledger layout: margin label | content
   ============================================================ */
.sec{padding-block:var(--s-6);}
.sec-alt{background:var(--card);border-block:1px solid var(--line);}
.ledger{
  display:grid;grid-template-columns:11rem 1fr;gap:var(--s-4);
}
.ledger-label{position:relative;border-right:1px solid var(--line);}
.ledger-label .mono{color:var(--ink-mid);display:block;padding-top:var(--s-1);}
.ledger-n{
  display:block;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;
  font-size:var(--t-0);color:var(--ink);
  font-variant-numeric:tabular-nums;
  margin-bottom:2px;
}
.ledger-label::before{
  content:"";display:block;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
}
.in>.ledger-label::before,.ledger-label.in::before{
  transform:scaleX(1);transition:transform var(--dur-2) var(--ease);
}
@media (max-width:56rem){
  .ledger{grid-template-columns:1fr;gap:var(--s-3);}
  .ledger-label{border-right:none;}
  .ledger-label::before{width:var(--s-5);}
  .ledger-n{display:inline-block;margin-right:.75em;margin-bottom:0;}
}
.sec h2{font-size:var(--t-4);letter-spacing:-.02em;font-stretch:112%;}
.sec h3{font-size:var(--t-1);}
.lead{font-size:var(--t-1);line-height:1.55;}
.lead-xl{font-size:var(--t-2);line-height:1.4;letter-spacing:-.005em;}
.measure{max-width:var(--w-text);}

/* buttons */
.btn{
  display:inline-block;
  font-family:"Archivo",sans-serif;font-stretch:108%;font-weight:700;
  font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-s);
  text-decoration:none;border:1px solid var(--accent);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
  cursor:pointer;
}
.btn::after{
  content:"\2192";display:inline-block;margin-left:.65em;
  transition:transform var(--dur-1) var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(.35em);}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
/* quiet text link with drawn underline + arrow */
.link-arrow{
  display:inline-block;position:relative;z-index:1;
  font-family:"Archivo",sans-serif;font-stretch:108%;font-weight:700;
  font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  padding:2px 0 4px;
  background:linear-gradient(var(--u,var(--accent)),var(--u,var(--accent))) no-repeat left bottom / 100% 2px;
}
.link-arrow::after{
  content:"\2192";display:inline-block;margin-left:.6em;
  transition:transform var(--dur-1) var(--ease);
}
.link-arrow:hover{color:var(--ink);}
.link-arrow:hover::after,.link-arrow:focus-visible::after{transform:translateX(.35em);}

/* ============================================================
   Home — the group / companies register
   ============================================================ */
/* group strip — the register's bottom line: founded · units · bases */
.group-strip{
  display:grid;grid-template-columns:auto auto 1fr;gap:var(--s-5);
  align-items:center;
  border-block:1px solid var(--line);
  padding-block:var(--s-4);
  margin-top:var(--s-5);
}
.group-strip .g-cell .mono{color:var(--ink-mid);display:block;margin-bottom:var(--s-1);}
.group-strip .g-cell strong{
  font-family:"Archivo",sans-serif;font-stretch:118%;font-weight:800;
  font-size:var(--t-4);line-height:1;letter-spacing:-.01em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.group-strip .g-cell--bases{justify-self:end;text-align:right;}
.group-strip .g-cell--bases strong{font-size:var(--t-2);line-height:1.2;}
@media (max-width:56rem){
  .group-strip{grid-template-columns:1fr 1fr;gap:var(--s-3);}
  .group-strip .g-cell strong{white-space:normal;}
  .group-strip .g-cell--bases{grid-column:1/-1;justify-self:start;text-align:left;}
}

/* the register — a numbered table of contents, not a stack of cards */
.unit-index{display:grid;border-top:1px solid var(--line);margin-top:var(--s-4);}
.unit-row{
  position:relative;
  display:grid;grid-template-columns:3.25rem 1fr minmax(13rem,19rem);
  gap:var(--s-4);align-items:center;
  padding:var(--s-4) var(--s-2) var(--s-4) var(--s-3);
  border-bottom:1px solid var(--line);
  border-left:5px solid var(--u);
  transition:background var(--dur-1) var(--ease);
}
.unit-row:hover{background:color-mix(in srgb, var(--u) 7%, transparent);}
.unit-row .u-n{
  font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-size:var(--t-1);color:var(--ink-mid);
  font-variant-numeric:tabular-nums;
  align-self:start;padding-top:.5rem;
}
.unit-row .ph{aspect-ratio:37/24;overflow:hidden;border-radius:var(--r-s);}
.unit-row .ph img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-3) var(--ease);
}
.unit-row:hover .ph img{transform:scale(1.04);}
.unit-row h3{
  font-size:var(--t-3);margin-bottom:var(--s-1);
}
.unit-row h3 a{color:var(--ink);text-decoration:none;}
.unit-row h3 a::after{content:"";position:absolute;inset:0;} /* whole row is the link */
.unit-row p{margin-bottom:var(--s-2);color:var(--ink-mid);max-width:38rem;}
.unit-row .link-arrow{color:var(--ink);}
.unit-row:hover .link-arrow::after{transform:translateX(.35em);}
.unit-row .u-mark{width:auto;max-height:2.4rem;margin-bottom:var(--s-2);}
/* the lead row — Sports carries the register's asymmetry */
.unit-row--lead{
  grid-template-columns:3.25rem 1fr minmax(17rem,26rem);
  padding-block:var(--s-5);
  border-left-width:8px;
}
.unit-row--lead .ph{aspect-ratio:16/9;}
.unit-row--lead h3{font-size:var(--t-4);}
@media (max-width:56rem){
  .unit-row,.unit-row--lead{grid-template-columns:1fr;gap:var(--s-2);padding-right:0;}
  .unit-row .ph,.unit-row--lead .ph{order:-1;}
  .unit-row .u-n{padding-top:0;}
}

/* ============================================================
   Page header band (interior pages) — their own petrol-overlay move
   ============================================================ */
.band{
  position:relative;color:#fff;
  padding:calc(4.25rem + var(--s-6)) 0 var(--s-5);
  background-color:var(--petrol);
  background-size:cover;background-position:center 30%;
  overflow:hidden;
}
.band::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right, rgba(21,46,59,.92), rgba(30,67,86,.72));
}
.band::after{ /* same drawn ledger grid as the masthead */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:calc(var(--s-7) * 1.2) calc(var(--s-7) * 1.2);
}
.band .wrap{position:relative;z-index:1;}
.band h1{
  font-size:var(--t-5);font-stretch:114%;font-weight:800;
  text-transform:uppercase;margin-bottom:var(--s-1);
}
.band .crumbs{color:#B9CBD6;margin-bottom:0;}
.band .crumbs a{color:#fff;}
.band-meta{color:#B9CBD6;margin:var(--s-2) 0 0;}
.band-rule{
  height:4px;width:var(--s-6);background:var(--accent);
  margin-bottom:var(--s-3);
}

/* ============================================================
   Home closing band — contact as a statement, not a second form
   ============================================================ */
.cta-band{
  background:linear-gradient(160deg, var(--petrol-deep) 0%, var(--petrol) 90%);
  color:#fff;position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:calc(var(--s-7) * 1.2) calc(var(--s-7) * 1.2);
}
.cta-band .wrap{position:relative;z-index:1;}
.cta-band .ledger-label{border-right-color:var(--line-ink);}
.cta-band .ledger-label::before{background:var(--sports);}
.cta-band .ledger-label .mono{color:#B9CBD6;}
.cta-band .ledger-n{color:#fff;}
.cta-band h2{color:#fff;}
.cta-mail{
  display:inline-block;
  font-family:"Archivo",sans-serif;font-stretch:114%;font-weight:800;
  font-size:clamp(1.6rem, 1rem + 3.2vw, 3.6rem);
  line-height:1.1;letter-spacing:-.015em;
  color:#fff;text-decoration:none;
  margin-bottom:var(--s-3);
  background:linear-gradient(var(--sports),var(--sports)) no-repeat left bottom / 0% 3px;
  transition:background-size var(--dur-2) var(--ease);
  padding-bottom:6px;
  overflow-wrap:anywhere;
}
.cta-mail:hover,.cta-mail:focus-visible{color:#fff;background-size:100% 3px;}
.cta-meta{
  display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);
  color:#B9CBD6;margin-bottom:var(--s-4);
}
.cta-meta a{color:#fff;text-decoration:none;}
.cta-meta a:hover{text-decoration:underline;}
.cta-band .btn{
  background:transparent;color:#fff;border-color:#fff;
}
.cta-band .btn:hover{background:#fff;color:var(--petrol-deep);border-color:#fff;}

/* ============================================================
   About — year rail + prose
   ============================================================ */
.rail-kicker{margin-bottom:var(--s-3);}
.rail-kicker .mono{color:var(--ink-mid);}
.rail-kicker .ledger-n{display:inline-block;margin-right:.75em;margin-bottom:0;}
.year-rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));
  gap:1px;background:var(--line);
  border-block:1px solid var(--line);
}
.year-rail li{
  list-style:none;padding:var(--s-3) var(--s-2);
  background:var(--paper);
  position:relative;
}
.year-rail li::before{ /* the accent tick above each year */
  content:"";display:block;width:var(--s-4);height:3px;
  background:var(--accent);margin-bottom:var(--s-2);
}
.year-rail{margin:0;padding:0;}
.year-rail .yr{
  font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-size:var(--t-3);color:var(--petrol);display:block;margin-bottom:var(--s-1);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.year-rail .what{font-size:var(--t--1);color:var(--ink-mid);line-height:1.5;display:block;}
.sec-alt .year-rail li{background:var(--card);}
/* the year-less entry closes the rail as a full-width petrol strip */
.year-rail .rail-wide{grid-column:1/-1;background:var(--petrol);}
.year-rail .rail-wide::before{background:var(--sports);}
.year-rail .rail-wide .yr{color:#fff;}
.year-rail .rail-wide .what{color:#DCE6EB;font-size:var(--t-0);max-width:var(--w-text);}
.sec-alt .year-rail .rail-wide{background:var(--petrol);}
@media (max-width:56rem){
  .year-rail{grid-template-columns:1fr;}
  .year-rail li{display:grid;grid-template-columns:6rem 1fr;gap:var(--s-2);align-items:baseline;}
  .year-rail li::before{display:none;}
}

/* a clause of their own copy, set as the section's one visual moment */
.pull{
  font-family:"Source Serif 4",serif;font-style:italic;
  font-size:var(--t-2);line-height:1.4;color:var(--petrol);
  max-width:var(--w-text);margin:var(--s-4) 0;text-wrap:balance;
}
.pull::before{
  content:"";display:block;width:var(--s-4);height:3px;
  background:var(--sports);margin-bottom:var(--s-2);
}

.vision-plate{
  background:linear-gradient(160deg, var(--petrol-deep) 0%, var(--petrol) 90%);
  color:#fff;border-radius:var(--r-s);
  padding:var(--s-5);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);
  position:relative;overflow:hidden;
}
.vision-plate::before{ /* oversized quiet quote glyph */
  content:"\201C";position:absolute;top:-.12em;left:var(--s-3);
  font-family:"Source Serif 4",serif;font-weight:700;
  font-size:16rem;line-height:1;color:rgba(255,255,255,.06);
  pointer-events:none;
}
.vision-plate>div{position:relative;}
.vision-plate>div+div{border-left:1px solid var(--line-ink);padding-left:var(--s-5);}
.vision-plate h3{color:#B9CBD6;font-size:var(--t-0);letter-spacing:.1em;text-transform:uppercase;}
.vision-plate h3::after{
  content:"";display:block;width:var(--s-4);height:3px;
  background:var(--sports);margin-top:var(--s-2);
}
.vision-plate p{font-family:"Source Serif 4",serif;font-style:italic;font-size:var(--t-2);line-height:1.45;margin:0;color:#F0F5F7;text-wrap:balance;}
.vision-plate>div+div p{font-size:var(--t-1);}
@media (max-width:56rem){
  .vision-plate{grid-template-columns:1fr;gap:var(--s-4);}
  .vision-plate>div+div{border-left:none;padding-left:0;border-top:1px solid var(--line-ink);padding-top:var(--s-4);}
}

/* founder dossier — the credentials, set as register lines */
.cred-list{
  list-style:none;margin:var(--s-4) 0 0;padding:0;
  max-width:var(--w-text);
}
.cred-list li{
  border-top:1px solid var(--line);
  padding:var(--s-2) 0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--t--1);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mid);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);
}
.cred-list li:last-child{border-bottom:1px solid var(--line);}
.cred-list b{font-weight:500;color:var(--ink);}

/* ============================================================
   Unit pages
   ============================================================ */
.unit-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-5);align-items:center;}
.unit-logo-plate{
  background:var(--card);border:1px solid var(--line);
  border-top:5px solid var(--accent);
  border-radius:var(--r-s);box-shadow:var(--shadow-1);
  display:grid;place-items:center;
  padding:var(--s-5);
}
.unit-logo-plate img{width:min(100%,20rem);height:auto;}
@media (max-width:56rem){.unit-hero{grid-template-columns:1fr;}}

/* EKANA — a full-bleed brand moment in the brand's own navy + Electrum gold */
.ekana-band{
  background:var(--navy);color:#fff;
  position:relative;overflow:hidden;
}
.ekana-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(186,165,60,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(186,165,60,.07) 1px, transparent 1px);
  background-size:calc(var(--s-7) * 1.2) calc(var(--s-7) * 1.2);
}
.ekana-band .wrap{position:relative;z-index:1;}
.ekana-band .ledger-label{border-right-color:rgba(186,165,60,.35);}
.ekana-band .ledger-label .mono{color:var(--sports);}
.ekana-band .ledger-n{color:#fff;}
.ekana-band h2{color:#fff;}
.ekana-band .lead{color:#E8ECEF;}
.ekana-band .btn{
  background:var(--sports);color:var(--navy);border-color:var(--sports);
}
.ekana-band .btn:hover{background:#fff;border-color:#fff;color:var(--navy);}
.ekana-logo-lockup{
  display:grid;place-items:center;
  padding:var(--s-5) var(--s-4);
  border:1px solid rgba(186,165,60,.35);
  border-top:5px solid var(--sports);
  border-radius:var(--r-s);
}
.ekana-logo-lockup img{width:min(100%,24rem);height:auto;}

/* agencies & distribution (Sports page) */
.agencies{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-4);}
.agency{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  box-shadow:var(--shadow-1);padding:var(--s-4);
  display:grid;gap:var(--s-3);align-items:start;align-content:start;
}
.agency .ph{aspect-ratio:5/3;overflow:hidden;border-radius:var(--r-s);order:-1;}
.agency .ph img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-3) var(--ease);
}
.agency:hover .ph img{transform:scale(1.05);}
.agency>div{display:grid;gap:var(--s-2);align-content:start;}
.agency .logo img{width:auto;max-width:min(100%,13rem);height:auto;}
.agency p{color:var(--ink-mid);font-size:var(--t--1);line-height:1.6;margin:0;}
.agency .link-arrow{justify-self:start;}
.agency .wordmark{
  font-family:"Archivo",sans-serif;font-stretch:118%;font-weight:800;
  font-size:var(--t-3);letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy);
}
.agency--wide{grid-column:1/-1;}
.agency--wide>div{grid-template-columns:auto 1fr;column-gap:var(--s-6);align-items:center;}
.agency--wide .wordmark{grid-row:span 2;}
.agency--wide p{max-width:var(--w-text);font-size:var(--t-0);margin:0;}
.agency--wide .btn{justify-self:start;}
@media (max-width:56rem){
  .agency--wide>div{grid-template-columns:1fr;}
  .agency--wide .wordmark{grid-row:auto;}
}
@media (max-width:70rem){.agencies{grid-template-columns:1fr;}}

/* services list (Consulting) — the 84-word sentence, set as a numbered register */
.svc-list{
  list-style:none;margin:var(--s-4) 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--s-5);
  max-width:56rem;
  counter-reset:svc;
}
.svc-list li{
  counter-increment:svc;
  border-top:1px solid var(--line);
  padding:var(--s-2) 0;
  display:grid;grid-template-columns:2.6rem 1fr;gap:var(--s-2);
  align-items:baseline;
  font-family:"Archivo",sans-serif;font-stretch:108%;font-weight:600;
  font-size:var(--t-1);letter-spacing:-.005em;
}
.svc-list li::before{
  content:counter(svc,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-size:var(--t--1);color:var(--consult);
  font-variant-numeric:tabular-nums;
}
@media (max-width:34rem){.svc-list{grid-template-columns:1fr;}}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s-5);}
@media (max-width:56rem){.contact-grid{grid-template-columns:1fr;}}
.c-info{display:grid;gap:var(--s-3);align-content:start;}
.c-item{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  border-left:5px solid var(--accent);
  padding:var(--s-3);box-shadow:var(--shadow-1);
}
.c-item .mono{color:var(--ink-mid);display:block;margin-bottom:var(--s-1);}
.c-item p{margin:0;font-size:var(--t-1);}
.c-item a{text-decoration:none;}
.c-item .clock{
  display:block;margin-top:var(--s-1);
  color:var(--ink-mid);font-variant-numeric:tabular-nums;
  letter-spacing:.1em;
}
.c-item .clock:empty{display:none;}

form.mailer{display:grid;gap:var(--s-2);}
.mailer .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);}
@media (max-width:34rem){.mailer .two{grid-template-columns:1fr;}}
.mailer label{
  display:grid;gap:var(--s-1);
  font-family:"IBM Plex Mono",monospace;font-size:var(--t--1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid);
}
.mailer input,.mailer textarea{
  font-family:"Source Serif 4",serif;font-size:var(--t-0);color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:var(--s-2);width:100%;
}
.mailer input:focus,.mailer textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);}
.mailer textarea{resize:vertical;min-height:9rem;}
.mailer .note{font-size:var(--t--1);color:var(--ink-mid);margin:0;}

/* ============================================================
   Footer
   ============================================================ */
.site-foot{background:var(--petrol-deep);color:#C9D6DD;margin-top:var(--s-6);overflow:hidden;}
/* their Vision line opens the footer as a full-width statement */
.foot-statement{
  border-bottom:1px solid var(--line-ink);
  padding-block:var(--s-5);
}
.foot-vision{
  font-family:"Source Serif 4",serif;font-style:italic;
  font-size:var(--t-2);line-height:1.4;color:#F0F5F7;
  max-width:52rem;margin:0;text-wrap:balance;
}
.foot-vision::before{
  content:"";display:block;width:var(--s-4);height:3px;
  background:var(--sports);margin-bottom:var(--s-3);
}
.foot-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);
  padding-block:var(--s-5);
}
.foot-grid h3{color:#fff;font-size:var(--t-0);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s-2);}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1);}
.foot-grid a{color:#C9D6DD;text-decoration:none;}
.foot-grid a:hover{color:#fff;text-decoration:underline;}
.foot-grid .u-dot{
  display:inline-block;width:.55em;height:.55em;border-radius:var(--r-full);
  background:var(--u,var(--petrol));margin-right:var(--s-1);
}
.foot-grid p{font-size:var(--t--1);line-height:1.7;}
@media (max-width:56rem){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:34rem){.foot-grid{grid-template-columns:1fr;}}
/* the register closes on the wordmark, set almost silent */
.foot-word{
  display:block;
  font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;
  font-size:clamp(3rem, 9.5vw, 8.75rem);
  line-height:.82;letter-spacing:.01em;text-transform:uppercase;
  color:rgba(255,255,255,.05);
  text-align:center;white-space:nowrap;
  user-select:none;pointer-events:none;
  margin-bottom:calc(var(--s-4) * -1);
}
.foot-copy{
  border-top:1px solid var(--line-ink);
  padding-block:var(--s-3);
  text-align:center;font-size:var(--t--1);color:#8FA6B2;
  position:relative;
}
.foot-copy strong{color:#fff;}

/* ============================================================
   Motion — reveals (JS adds .in), staggered children
   ============================================================ */
.rv{opacity:0;transform:translateY(1.25rem);}
.rv.in{
  opacity:1;transform:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
/* photos settle from a slight overscale as their row reveals */
.rv .ph img{transform:scale(1.06);}
.rv.in .ph img{transform:none;}
.rv.in:hover .ph img{transform:scale(1.04);}

/* hero load sequence (home) */
.mast-kicker,.mast-lede,.mast-index{opacity:0;transform:translateY(1rem);}
.js-loaded .mast-kicker{opacity:1;transform:none;transition:all var(--dur-2) var(--ease) .1s;}
.js-loaded .mast-lede{opacity:1;transform:none;transition:all var(--dur-2) var(--ease) .9s;}
.js-loaded .mast-index{opacity:1;transform:none;transition:all var(--dur-3) var(--ease) 1.15s;}
.no-js .mast-kicker,.no-js .mast-lede,.no-js .mast-index,.no-js .rv{opacity:1;transform:none;}
.no-js .rv .ph img{transform:none;}
.no-js .mast-word span::after{transform:scaleX(1);}
.no-js .ledger-label::before{transform:scaleX(1);}

/* cross-page fade — progressive enhancement, ignored where unsupported */
@view-transition{navigation:auto;}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .rv,.mast-kicker,.mast-lede,.mast-index{opacity:1 !important;transform:none !important;}
  .rv .ph img{transform:none !important;}
  .mast-word span::after{transform:scaleX(1) !important;}
  .ledger-label::before{transform:scaleX(1) !important;}
}