/* ===========================================================
   ARAGO POINT
   Brand kit, September 2026. Black, white, grey — nothing else.
   Red appears in exactly one place on this site: a found contact
   on the radar. It carries meaning, so it is never decorative.

   The logo is the supplied artwork, used whole. Never redrawn,
   recoloured, split or recomposed.
   =========================================================== */

@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/IBMPlexSans-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Michroma";src:url(fonts/Michroma-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root,[data-theme="dark"]{
  --bg:#0A0A0A;
  --bg-2:#111111;
  --surface:#121212;
  --bg-rgb:10,10,10;
  --fg:#FFFFFF;
  --fg-rgb:255,255,255;
  --mute:#9A9C9F;          /* secondary text on dark */
  --faint:#8A8C90;
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.30);
  --dot:255,255,255;
  --red:214,43,58;
  --btn-fg:#0A0A0A;
}
[data-theme="light"]{
  --bg:#FFFFFF;
  --bg-2:#F4F4F5;
  --surface:#FFFFFF;
  --bg-rgb:255,255,255;
  --fg:#0A0A0A;
  --fg-rgb:10,10,10;
  --mute:#5F6266;          /* the kit's grey, for secondary text only */
  --faint:#6B6E72;
  --line:rgba(10,10,10,.14);
  --line-2:rgba(10,10,10,.30);
  --dot:10,10,10;
  --red:190,30,45;
  --btn-fg:#FFFFFF;
}
:root{--max:1280px;--gut:40px}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:"Plex",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-weight:600;line-height:1.08;letter-spacing:-.032em;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5vw,4.1rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.7rem)}
h3{font-size:1.18rem;letter-spacing:-.015em}
p{margin:0 0 1.1em}
strong{font-weight:600}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:820px}
.mute{color:var(--mute)}

/* Michroma is the kit's display face: logo and small technical labels only.
   It is never used for body copy or headlines. */
.label{
  font-family:"Michroma",sans-serif;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--fg);opacity:.55;margin:0 0 1.5rem;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.label::before{content:"";width:40px;height:1px;background:currentColor;opacity:.6;flex:none}
.label--plain::before{display:none}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;padding:18px 0;
  background:rgba(var(--bg-rgb),.80);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-header.is-stuck{border-bottom-color:var(--line)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:block;color:var(--fg);flex:none;text-decoration:none}
.logo svg{height:74px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:28px}
.nav a{text-decoration:none;font-size:.86rem;color:var(--fg);opacity:.62;
  padding:6px 0;border-bottom:1.5px solid transparent;white-space:nowrap;transition:opacity .18s,border-color .18s}
.nav a:hover{opacity:1}
.nav a.is-active{opacity:1;border-bottom-color:var(--fg)}
.icon-btn{width:38px;height:38px;flex:none;padding:0;cursor:pointer;background:transparent;
  border:1px solid var(--line-2);border-radius:50%;color:var(--fg);opacity:.7;
  display:flex;align-items:center;justify-content:center;text-decoration:none;transition:opacity .18s,border-color .18s}
.icon-btn:hover{opacity:1;border-color:var(--fg)}
.icon-btn svg{width:16px;height:16px}
.icon-btn--li svg{width:14px;height:14px}
[data-theme="dark"] .i-moon,[data-theme="light"] .i-sun{display:none}
.detail dd a.icon-btn{border-bottom:0}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;padding:9px;color:var(--fg)}
.nav-toggle span{display:block;height:1.5px;background:currentColor;margin:5px 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;letter-spacing:.01em;
  padding:15px 30px;text-decoration:none;border:1px solid var(--fg);
  background:var(--fg);color:var(--btn-fg);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--fg)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn--ghost:hover{background:transparent;border-color:var(--fg)}
.link-more{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font-size:.86rem;
  border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:gap .2s,border-color .2s}
.link-more:hover{gap:.9em;border-bottom-color:var(--fg)}

/* ---------- sections ---------- */
section{padding:clamp(64px,8vw,118px) 0}
.sec--alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-hero{padding:clamp(56px,7vw,100px) 0 clamp(38px,5vw,64px);border-bottom:1px solid var(--line)}
.page-hero p{max-width:720px;font-size:1.04rem;color:var(--mute)}
.page-hero p strong{color:var(--fg)}
.lede{font-size:clamp(1rem,1.35vw,1.14rem);color:var(--mute);max-width:640px}
.lede strong{color:var(--fg)}

/* ---------- home hero over the radar ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;border-bottom:1px solid var(--line)}
#radar{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero__in{position:relative;z-index:2;width:100%;min-width:0;max-width:1040px;padding:0 var(--gut)}

/* ---------- the call to action, pinned to the radar hub ----------
   Above the breakpoint the button is positioned so that its blip lands exactly
   on Singapore — the sweep then visibly radiates out of the button itself, and
   the canvas stops drawing a hub marker of its own. radar.js measures the blip
   and nudges this container, so it stays exact at any size or font scale.
   Below the breakpoint it returns to normal flow and the canvas draws the hub. */
.hero__cta{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:46px}
@media(min-width:900px) and (min-height:620px){
  .hero{justify-content:center}
  .hero__in{margin-bottom:clamp(70px,17vh,210px)}
  .hero__cta{position:absolute;margin-top:0;left:50%;transform:translateX(-50%);top:calc(68% - 29px)}
}
.hero h1{margin-bottom:22px}
/* three words have to carry the page, so they get the room to do it */
.hero__h1{font-size:clamp(3rem,10vw,8.5rem);letter-spacing:-.05em;line-height:.95;margin-bottom:34px}
.hero__fine{margin:20px 0 0;font-size:.82rem;color:var(--mute)}

/* ---------- the radar button ----------
   Two corner ticks on the diagonal rather than a frame, with a red contact blip
   ahead of the words. Red appears in exactly two places on this site — here and
   on the radar — and means the same in both: a contact found.

   Three things make it carry over the map without becoming a heavy filled box:
   the ticks are long, they breathe on a slow cycle, and a translucent panel sits
   behind the words so contacts stop lighting up between the letters. The tick
   cycle is 4.2s against the blip's 2.6s — deliberately not a multiple, so the two
   drift in and out of phase instead of beating together. */
.btn--radar{
  background:transparent;border:0;color:var(--fg);font-weight:600;
  padding:18px 34px;gap:13px;position:relative;isolation:isolate;
}
.btn--radar:hover{background:transparent;color:var(--fg)}

/* The translucent ground sits on inset:0 — the exact rectangle the four tick
   arms describe, since each tick is anchored to a corner of this same box. */
.btn__pad{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(var(--bg-rgb),.26);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .22s;
}
.btn--radar:hover .btn__pad{background:rgba(var(--bg-rgb),.40)}

/* the ticks: long, and breathing. The resting values live here rather than only
   in the keyframes, so a reduced-motion visitor still gets the open, bright state. */
.btn--radar::before,.btn--radar::after{
  content:"";position:absolute;width:24px;height:24px;
  border:1.5px solid rgba(var(--fg-rgb),.52);
  animation:btn-tick 4.2s ease-in-out infinite;
  transition:border-color .22s ease,width .22s ease,height .22s ease;
}
.btn--radar::before{top:0;left:0;border-right:0;border-bottom:0}      /* top left     */
.btn--radar::after {bottom:0;right:0;border-left:0;border-top:0}      /* bottom right */
@keyframes btn-tick{
  0%,100%{width:20px;height:20px;border-color:rgba(var(--fg-rgb),.34)}
  50%    {width:28px;height:28px;border-color:rgba(var(--fg-rgb),.78)}
}
/* on approach they stop breathing and hold open — the hover should feel decisive */
.btn--radar:hover::before,.btn--radar:hover::after,
.btn--radar:focus-visible::before,.btn--radar:focus-visible::after{
  animation-play-state:paused;
  border-color:rgb(var(--fg-rgb));width:30px;height:30px;
}

.btn__blip{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:rgb(var(--red));
  animation:btn-blip 2.6s ease-out infinite;
}
@keyframes btn-blip{
  0%  {box-shadow:0 0 0 0    rgba(var(--red),.55)}
  70% {box-shadow:0 0 0 11px rgba(var(--red),0)}
  100%{box-shadow:0 0 0 0    rgba(var(--red),0)}
}
/* On the hero the strip is a centred group, not a full-width rule: every cell
   carries the same padding on both sides, so the row is symmetric by
   construction rather than by measurement. The last cell loses .26em of
   padding to cancel the trailing letter-space of "DEFENCE", which would
   otherwise push the optical centre a pixel or two to the left. */
.hero .sectors{justify-content:center;border-top:0;margin:0 0 40px;
  width:-moz-fit-content;width:fit-content;max-width:100%;margin-inline:auto}
.hero .sectors span{padding:15px 22px;margin:0;border-right:1px solid var(--line)}
.hero .sectors span:last-child{padding-right:calc(22px - .26em);border-right:0;margin-right:0}
.hero__acts{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* the four categories, used on the hero and page heroes */
.sectors{display:flex;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);margin:0 0 36px}
.sectors span{font-family:"Michroma",sans-serif;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  opacity:.68;padding:15px 24px 15px 0;margin-right:24px;border-right:1px solid var(--line);line-height:1}
.sectors span:last-child{border-right:0;margin-right:0;padding-right:0}

/* Phones: the strip drops its rules and dividers and becomes a centred,
   wrapping group. Kept as a bordered flex row it either breaks mid-label or
   runs past the right edge of the screen. Measured on a 375px viewport:
   both rows and the headline share the same centre, and the document no
   longer scrolls sideways. */
@media(max-width:620px){
  .sectors,.hero .sectors{display:flex;flex-wrap:wrap;border-top:0;width:auto;
    margin:0 0 28px;gap:.9em 1.5em;justify-content:flex-start}
  .hero .sectors{justify-content:center}
  .sectors span,.hero .sectors span{display:inline-block;padding:0;margin:0;border:0;
    font-size:.6rem;white-space:nowrap}
  .label{font-size:.6rem}
}

/* ---------- grids and cards ---------- */
.grid{display:grid;gap:clamp(24px,3vw,46px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cap{border-top:1px solid var(--line);padding-top:20px}
.cap .n{font-family:"Michroma",sans-serif;font-size:.56rem;letter-spacing:.28em;opacity:.45;display:block;margin-bottom:16px}
.cap h3{margin-bottom:.4em}
.cap p{margin:0;color:var(--mute);font-size:.95rem}
.card{border:1px solid var(--line);background:var(--surface);padding:26px 24px 28px}
.card h3{margin-bottom:.45em}
.card p{margin:0;color:var(--mute);font-size:.95rem}

/* two-column do / do-not */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,60px)}
.duo ul{list-style:none;margin:0;padding:0}
.duo li{border-top:1px solid var(--line);padding:14px 0;font-size:.95rem;color:var(--mute)}
.duo li:first-child{border-top:0}
.duo--no li{opacity:.6;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--line-2)}

/* ---------- the nine forces ----------
   Nine photographs, each carrying its own number and title. The files are stored
   in COLOUR and desaturated by CSS, so the hover can restore the colour — a tile
   baked to greyscale has nothing left to bring back. At rest: black and white,
   held down. On approach: full colour, full brightness, scaled up, lifted, and
   the sentence underneath opens out.

   The description animates on grid-template-rows rather than max-height, so it
   expands to exactly its own height however long the line is. */
.forces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,26px);margin-top:56px}
.force{position:relative;aspect-ratio:4/3;overflow:hidden;margin:0;cursor:default;
  border:1px solid var(--line);outline:none;isolation:isolate;
  transition:border-color .35s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.force__img{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  filter:grayscale(1) brightness(.58) contrast(1.02);transform:scale(1.03);
  transition:filter .55s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.force__img--none{background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),#141414;
  filter:none;transform:none}
/* a scrim from the foot, so the type never sits on raw photograph */
.force::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 38%,rgba(10,10,10,.12) 70%,transparent 100%);
  transition:opacity .45s ease}
.force__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px 24px;color:#fff}
.force__n{display:block;font-family:"Michroma",sans-serif;font-size:.54rem;letter-spacing:.3em;
  opacity:.72;margin-bottom:10px}
.force h3{font-size:1.14rem;margin:0;color:#fff;letter-spacing:-.015em}
.force__desc{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .45s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
.force__desc > p{overflow:hidden;margin:0;font-size:.92rem;color:rgba(255,255,255,.82);padding-top:0}
.force:hover,.force:focus-visible{border-color:rgba(255,255,255,.42);transform:translateY(-4px)}
.force:hover .force__img,.force:focus-visible .force__img{
  filter:grayscale(0) brightness(1) contrast(1.04) saturate(1.04);transform:scale(1.09)}
.force:hover::after,.force:focus-visible::after{opacity:.82}
.force:hover .force__desc,.force:focus-visible .force__desc{grid-template-rows:1fr;opacity:1}
.force:hover .force__desc > p,.force:focus-visible .force__desc > p{padding-top:12px}
@media(max-width:900px){.forces{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.forces{grid-template-columns:1fr}
  .force__desc{grid-template-rows:1fr;opacity:1}          /* no hover on touch — show it */
  .force__desc > p{padding-top:12px}
  .force__img{filter:grayscale(1) brightness(.5)}
  .force:active .force__img{filter:grayscale(0) brightness(1)}
}

/* phases */
.phase{border-top:1px solid var(--line);padding-top:22px}
.phase .when{font-family:"Michroma",sans-serif;font-size:.55rem;letter-spacing:.26em;opacity:.45;display:block;margin-bottom:16px}
.phase h3{margin-bottom:.5em}
.phase ul{margin:0 0 18px;padding-left:1.05em;font-size:.92rem;color:var(--mute)}
.phase li{margin-bottom:.3em}
.phase .deliv{border-top:1px solid var(--line);padding-top:12px;font-size:.88rem}
.phase .deliv b{display:block;font-family:"Michroma",sans-serif;font-size:.52rem;letter-spacing:.24em;
  text-transform:uppercase;opacity:.45;margin-bottom:7px;font-weight:400}

/* ---------- the verdict row ----------
   Three ways in, stated as three figures rather than three paragraphs. The number
   is the message; the prose underneath is for the people who want it. */
.verdict{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:52px;
  border-top:1px solid var(--line)}
.verdict__col{padding:30px 34px 30px 0;border-right:1px solid var(--line)}
.verdict__col:last-child{border-right:0;padding-right:0}
.verdict__col:not(:first-child){padding-left:34px}
.verdict__way{display:block;font-family:"Michroma",sans-serif;font-size:.54rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.verdict__n{display:block;font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:600;letter-spacing:-.04em;
  line-height:1;color:var(--mute);margin-bottom:18px;transition:color .3s}
.verdict__col p{margin:0;font-size:.93rem;color:var(--mute)}
/* the one that is us carries full contrast; the other two sit back */
.verdict__col--us .verdict__n{color:var(--fg)}
.verdict__col--us p{color:var(--fg)}
.verdict__foot{margin:16px 0 0;font-family:"Michroma",sans-serif;font-size:.5rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--faint)}
@media(max-width:860px){
  .verdict{grid-template-columns:1fr}
  .verdict__col{border-right:0;border-bottom:1px solid var(--line);padding:26px 0}
  .verdict__col:not(:first-child){padding-left:0}
  .verdict__col:last-child{border-bottom:0}
}

/* metrics */
.mets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.mets div{padding:24px 20px 0 0}
.mets b{display:block;font-size:clamp(2rem,3.6vw,3.1rem);font-weight:600;letter-spacing:-.04em;line-height:1}
.mets i{display:block;font-style:normal;font-family:"Michroma",sans-serif;font-size:.54rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:12px}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin-top:34px;font-size:.95rem}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:18px 20px 18px 0;border-top:1px solid var(--line)}
.cmp thead th{font-family:"Michroma",sans-serif;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:400;opacity:.5;border-top:0;padding-bottom:10px}
.cmp tbody th{font-family:"Michroma",sans-serif;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;color:var(--mute);width:22%}
.cmp .big{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;display:block;margin-bottom:4px}
.cmp .us{font-weight:600}
.cmp td{color:var(--mute)}
.cmp td.us,.cmp .us .big{color:var(--fg)}
.note{font-size:.82rem;color:var(--faint);margin-top:16px}

/* ---------- client logo band ----------
   Each file is cropped to its own ink and padded only vertically onto a canvas
   140 units tall, so the flex gap below is literally the distance between one
   logo and the next — identical for every pair whatever the shape. Sizes are
   balanced by ink area rather than height, so a wide thin wordmark and a compact
   mark read as the same weight. The set is laid down twice so the loop wraps. */
.band{position:relative;margin-top:44px;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:30px 0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%)}
.band__track{display:flex;align-items:center;gap:var(--band-gap,74px);width:max-content;
  animation:band-slide 76s linear infinite}
.band:hover .band__track{animation-play-state:paused}
.band__item{flex:none;display:flex;align-items:center}
.band__item img{height:var(--band-h,52px);width:auto;display:block;opacity:.74;transition:opacity .25s}
.band__item:hover img{opacity:1}
.band__item .on-dark{display:block}
.band__item .on-light{display:none}
[data-theme="light"] .band__item .on-dark{display:none}
[data-theme="light"] .band__item .on-light{display:block}
@keyframes band-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .band__track{animation:none;width:100%;justify-content:center;flex-wrap:wrap;gap:10px}
  .band__item[aria-hidden="true"]{display:none}
}
@media(max-width:860px){.band{--band-gap:46px;--band-h:38px}.band__track{animation-duration:53s}}

/* ---------- presence map ---------- */
.mapwrap{display:grid;grid-template-columns:1.55fr 1fr;gap:34px;align-items:start;margin-top:40px}
.map{border:1px solid var(--line);background:var(--bg-2)}
.map-svg{width:100%;height:auto;display:block}
/* Highlighting is done with weight, not colour — the chart has no second colour to spend. */
.map-ctx{fill:rgba(var(--fg-rgb),.05);stroke:rgba(var(--fg-rgb),.10);stroke-width:.7;pointer-events:none}
.map-c{fill:rgba(var(--fg-rgb),.22);stroke:rgba(var(--fg-rgb),.30);stroke-width:.8;cursor:pointer;outline:none;
  transition:fill .18s,stroke .18s}
.map-c.is-key{fill:rgba(var(--fg-rgb),.34)}
.map-c:hover,.map-c:focus-visible,.map-c.is-on{fill:rgba(var(--fg-rgb),.92);stroke:rgba(var(--fg-rgb),1)}
.map-pin{fill:rgba(var(--fg-rgb),.75);stroke:var(--bg-2);stroke-width:2.5;cursor:pointer;outline:none}
.map-pin:hover,.map-pin:focus-visible,.map-pin.is-on{fill:rgb(var(--fg-rgb))}
.map-lbl{fill:rgba(var(--fg-rgb),.5);font-family:"Michroma",sans-serif;font-size:19px;letter-spacing:.1em;
  pointer-events:none;text-transform:uppercase}
.map-lbl.is-on{fill:rgb(var(--fg-rgb))}
.mapinfo{border-top:2px solid var(--fg);background:var(--surface);padding:26px 24px 28px}
.mapinfo h3{font-size:1.4rem;margin-bottom:.4em}
.mapinfo__lead{font-family:"Michroma",sans-serif;font-size:.54rem;letter-spacing:.24em;text-transform:uppercase;
  opacity:.5;margin-bottom:14px}
.mapinfo p{font-size:.94rem;color:var(--mute)}
.mapinfo__hd{font-family:"Michroma",sans-serif;font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;
  opacity:.45;margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.mapinfo ul{margin:0;padding-left:1.05em;font-size:.9rem;color:var(--mute)}
.mapinfo li{margin-bottom:.32em}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,60px);align-items:start}
.founder__photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.person__role{font-family:"Michroma",sans-serif;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  opacity:.5;margin:-.4em 0 1.4em}
.founder__body p{color:var(--mute)}
.founder__body p strong{color:var(--fg)}
.founder__links{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px}
.pend{border:1px dashed var(--line-2);padding:22px 22px 24px;color:var(--mute)}
.pend h3{color:var(--fg)}

/* ---------- ventures ---------- */
.portfolio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.pf{border:1px solid var(--line);padding:30px 28px 32px;background:var(--surface)}
.pf__logo{width:100%;aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line);margin-bottom:24px;
  font-family:"Michroma",sans-serif;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase}
.pf__logo img{max-height:150px;max-width:90%;width:auto;height:auto;display:block;opacity:.9;
  transition:opacity .45s ease}
/* portfolio: brand colour on hover, button with company name */
.pf__cta{margin-top:30px;text-align:center}
.pf__stack{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.pf__stack img{max-width:90%}
.pf__logo .pf__hue{position:absolute;inset:0;margin:auto;max-width:90%;max-height:150px;width:100%;height:100%;
  object-fit:contain;opacity:0}
.pf:hover .pf__stack img:not(.pf__hue){opacity:0}
.pf:hover .pf__hue{opacity:1}
.pf__btn{display:inline-flex;align-items:center;gap:14px;padding:13px 22px 13px 26px;border-radius:999px;text-decoration:none;
  font-family:"Michroma",sans-serif;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg);border:1px solid var(--line-2);background:transparent;
  transition:border-color .3s ease,color .3s ease,background .3s ease}
.pf__btn svg{width:11px;height:11px;transition:transform .3s ease}
.pf__btn:hover,.pf__btn:focus-visible{border-color:var(--brand,var(--fg));color:var(--brand,var(--fg));
  background:color-mix(in srgb,var(--brand,var(--fg)) 8%,transparent)}
[data-theme="light"] .pf__btn:hover,[data-theme="light"] .pf__btn:focus-visible{border-color:var(--brand-ink,var(--fg));color:var(--brand-ink,var(--fg))}
.pf__btn:hover svg,.pf__btn:focus-visible svg{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){.pf__logo img,.pf__btn,.pf__btn svg{transition:none}}
.pf__logo .on-light{display:none}
[data-theme="light"] .pf__logo .on-dark{display:none}
[data-theme="light"] .pf__logo .on-light{display:block}
.pf dl{margin:20px 0 0;font-size:.92rem}
.pf dt{font-family:"Michroma",sans-serif;font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;
  opacity:.45;margin-top:16px}
.pf dd{margin:5px 0 0;color:var(--mute)}

/* ---------- articles ---------- */
.carousel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.carousel-nav{display:flex;gap:10px}
.cbtn{width:40px;height:40px;border:1px solid var(--line-2);background:transparent;color:var(--fg);
  cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity .2s,border-color .2s}
.cbtn:hover:not(:disabled){opacity:1;border-color:var(--fg)}
.cbtn:disabled{opacity:.22;cursor:default}
.cbtn svg{width:17px;height:17px}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(360px,1fr);gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.carousel::-webkit-scrollbar{display:none}
.tile{position:relative;aspect-ratio:1/1;overflow:hidden;text-decoration:none;color:#fff;
  scroll-snap-align:start;border:1px solid var(--line);background:var(--bg-2)}
.tile__img{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(1);transition:transform .5s ease}
.tile:hover .tile__img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,10,10,0) 32%,rgba(10,10,10,.6) 62%,rgba(10,10,10,.94) 100%)}
.tile__li{position:absolute;top:14px;right:14px;z-index:2;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,.7);color:#fff;transition:background .2s}
.tile__li svg{width:13px;height:13px}
.tile:hover .tile__li{background:rgb(var(--red))}
.tile__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px 24px}
.tile__meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:"Michroma",sans-serif;
  font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.tile__title{display:block;font-size:1.25rem;font-weight:600;line-height:1.22;letter-spacing:-.02em}
.tile__rule{display:block;width:34px;height:1px;background:#fff;opacity:.5;margin-top:16px}

/* ---------- contact router ---------- */
.routes{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.route{display:block;width:100%;text-align:left;background:var(--bg);border:0;cursor:pointer;
  padding:22px 22px 24px;color:var(--fg);font-family:inherit;transition:background .18s}
.route:hover{background:var(--bg-2)}
.route__n{font-family:"Michroma",sans-serif;font-size:.5rem;letter-spacing:.24em;opacity:.45;display:block;margin-bottom:12px}
.route__t{display:block;font-size:1.05rem;font-weight:600;letter-spacing:-.015em;margin-bottom:5px}
.route__b{display:block;font-size:.9rem;color:var(--mute)}
.rt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field--wide{grid-column:1/-1}
.field label{font-family:"Michroma",sans-serif;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.field input,.field select,.field textarea{font-family:inherit;font-size:.95rem;padding:12px 14px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--fg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--fg)}
.field textarea{min-height:120px;resize:vertical}
.rt-actions{display:flex;align-items:center;gap:18px;margin-top:24px;flex-wrap:wrap}
.rt-back{background:none;border:0;cursor:pointer;color:var(--mute);font-family:inherit;font-size:.86rem;
  text-decoration:underline;text-underline-offset:4px}
.rt-back:hover{color:var(--fg)}
.form-note{font-size:.84rem;color:var(--faint)}
.detail{border-top:1px solid var(--line);padding:16px 0}
.detail dt{font-family:"Michroma",sans-serif;font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;
  opacity:.45;margin-bottom:8px}
.detail dd{margin:0;font-size:.95rem}
.detail dd a{text-decoration:none;border-bottom:1px solid var(--line-2)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:70px 0 40px;background:var(--bg)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.footer-logo{color:var(--fg)}
.footer-logo svg{height:62px;width:auto}
.site-footer h4{font-family:"Michroma",sans-serif;font-size:.52rem;letter-spacing:.26em;text-transform:uppercase;
  opacity:.45;margin:0 0 16px;font-weight:400}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a{text-decoration:none;font-size:.9rem;color:var(--mute);transition:color .18s}
.site-footer a:hover{color:var(--fg)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:54px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--faint)}
.icon-btn--footer{margin-top:18px}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .mapwrap{grid-template-columns:1fr}
  .mets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sectors{border-top:0}
  .sectors span{border-right:0;border-top:1px solid var(--line);flex:1 1 44%;margin-right:0;padding:12px 0}
  .hero .sectors span{text-align:center}
}
@media(max-width:860px){
  :root{--gut:24px}
  .logo svg{height:46px}
  .footer-logo svg{height:46px}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:8px 24px 20px;display:none}
  .nav.is-open{display:flex}
  .nav a{width:100%;padding:13px 0;border-bottom:1px solid var(--line);opacity:.85}
  .nav .icon-btn{margin-top:14px}
  .nav-toggle{display:block}
  .site-header{position:relative}
  .grid-2,.grid-3,.grid-4,.duo,.portfolio,.founder,.rt-grid{grid-template-columns:1fr}
  .carousel{grid-auto-columns:minmax(280px,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
  .cmp thead{display:none}
  .cmp tbody th{padding-bottom:4px}
  .cmp td{padding-top:4px;border-top:0}
  .cmp tr{border-top:1px solid var(--line);padding:14px 0}
}
@media(max-width:620px){
  .mets{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* --- Three steps: one row per step, readable at a glance ------------- */
.steps{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:minmax(150px,.75fr) minmax(0,2.5fr);
  gap:clamp(24px,4vw,64px);padding:clamp(30px,3.6vw,50px) 0;border-bottom:1px solid var(--line)}
.step__meta{display:flex;flex-direction:column;gap:12px}
.step__n{font-size:clamp(2.6rem,5vw,4.2rem);font-weight:600;letter-spacing:-.05em;line-height:.88}
.step__when{font-family:"Michroma",sans-serif;font-size:.55rem;letter-spacing:.24em;color:var(--faint)}
.step__body h3{font-size:clamp(1.3rem,2.1vw,1.74rem);margin:0 0 12px;letter-spacing:-.022em}
.step__say{margin:0 0 26px;font-size:1.03rem;color:var(--mute);max-width:580px}
.step__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.8vw,44px)}
.step__cols h4{font-family:"Michroma",sans-serif;font-size:.5rem;letter-spacing:.24em;
  color:var(--faint);margin:0 0 14px;font-weight:400}
.step__cols ul{margin:0;padding-left:1.05em;font-size:.93rem;color:var(--mute)}
.step__cols li{margin-bottom:.44em}
.step__out{margin:0 0 14px;font-size:1rem;color:var(--fg)}
.step__how{margin:0;font-size:.88rem;color:var(--faint)}
@media(max-width:860px){
  .step{grid-template-columns:1fr;gap:18px;padding:34px 0}
  .step__meta{flex-direction:row;align-items:baseline;gap:18px}
  .step__n{font-size:2.4rem}
  .step__cols{grid-template-columns:1fr;gap:26px}
}

.forces--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wrap > .forces:first-child{margin-top:0}
@media(max-width:1080px){.forces--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.forces--4{grid-template-columns:1fr}}

/* --- Industries ------------------------------------------------------ */
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,46px) clamp(26px,3vw,52px);margin-top:clamp(40px,5vw,62px)}
.ind-group{border-top:1px solid var(--line);padding-top:20px}
.ind-group h3{font-size:1.02rem;margin:0 0 4px;letter-spacing:-.01em}
.ind-group .ind-n{font-family:"Michroma",sans-serif;font-size:.5rem;letter-spacing:.26em;
  color:var(--faint);display:block;margin-bottom:12px}
.ind-group ul{margin:0;padding:0;list-style:none;font-size:.9rem;color:var(--mute)}
.ind-group li{padding:5px 0;border-bottom:1px solid var(--line)}
.ind-group li:last-child{border-bottom:0}
@media(max-width:900px){.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ind-grid{grid-template-columns:1fr}}