/* Synaform v2 site styles. Tokens follow Synaform-Branding styles/lookbook.css (signed-off white surfaces).
   Shared by the homepage and every subpage (built by build.py). */

:root{
  color-scheme:light;
  --ink:#201c16;--paper:#ffffff;--alt:#f7f7f6;--sand:#f2f2f0;--stone:#e2e2df;
  --body:#474641;--meta:#67665f;--line:#c6c6c2;--hair:rgba(32,28,22,.1);
  --accent:#e2552b;--accent-ink:#a8451a;--cta:#c94a22;--cta-hover:#b5421e;
  --on-dark:#ffffff;--on-dark-body:#c6c6c2;--on-dark-lead:#e7e7e4;--on-dark-line:rgba(255,255,255,.16);
  --r0:#201c16;--r3:#984321;--r5:#e2552b;--r6:#ee8a4f;
  --ramp:linear-gradient(90deg,#201c16,#984321 45%,#e2552b 80%,#ee8a4f);
  --flag-bg:#fff1c2;--flag-ink:#6b5410;
  --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --wrap:1200px;--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--ink)}
a{color:inherit}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media (max-width:600px){.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
.eyebrow{font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink)}
.dark .eyebrow,.hero .eyebrow{color:var(--accent)}
.h2{font-size:clamp(32px,4.2vw,52px);line-height:1.04;letter-spacing:-.03em;font-weight:700}
.lead{font-size:19px;line-height:1.55;color:var(--body);max-width:62ch}
.prose{display:flex;flex-direction:column;gap:16px;color:var(--body);max-width:64ch}
section{padding-block:clamp(72px,9vw,120px)}
.alt{background:var(--alt)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 64px;align-items:end;padding-top:28px;border-top:2px solid var(--ink);margin-bottom:56px}
.sec-head>div{display:flex;flex-direction:column;gap:14px;min-width:0}
.dark .sec-head{border-top-color:var(--on-dark)}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* Buttons: one orange per view */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;white-space:nowrap}
.btn.cta{background:var(--cta);color:#fff}
.btn.cta:hover{background:var(--cta-hover)}
.btn.ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn.ghost:hover{background:#fff;color:var(--ink)}
.btn.outline{border-color:var(--ink);color:var(--ink)}
.btn.outline:hover{background:var(--ink);color:#fff}
.more{font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--accent);padding-bottom:2px}
.more:hover{color:var(--accent-ink)}
.dark .more{color:#fff}

/* Review notes */
.draftbar{background:var(--flag-bg);color:var(--flag-ink);font-size:14px}
.draftbar .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;padding-block:10px}
.draftbar b{color:#4a3a08}
.draftbar button{font:600 13px/1 var(--font);border:1.5px solid var(--flag-ink);background:transparent;color:var(--flag-ink);border-radius:999px;padding:8px 14px;cursor:pointer}
.draftbar button[aria-pressed="true"]{background:var(--flag-ink);color:var(--flag-bg)}
.rv{display:none;font:500 12px/1.45 var(--font);letter-spacing:0;text-transform:none;background:var(--flag-bg);color:var(--flag-ink);border-radius:8px;padding:6px 10px;max-width:58ch}
.rv::before{content:"Review · ";font-weight:700}
body.review .rv{display:block}
body.review .rv.inline{display:inline-block;margin-left:6px;vertical-align:middle}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--ink);color:#fff}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ramp)}
.site-head .wrap{display:flex;align-items:center;gap:28px;height:72px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:26px;width:auto}
.nav{display:flex;gap:4px;flex:1;justify-content:center}
.nav a{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--on-dark-lead);padding:8px 10px;border-radius:8px;white-space:nowrap}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.site-head .btn{height:40px;padding:0 18px;font-size:14px}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;font:600 14px/1 var(--font);border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:10px 16px}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;left:0;right:0;top:72px;background:var(--ink);padding:12px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--on-dark-line)}
.menu-panel a{color:#fff;text-decoration:none;padding:12px 4px;font-size:17px;border-bottom:1px solid var(--on-dark-line)}
.menu-panel .btn{margin-top:16px;align-self:flex-start;height:48px}
@media (max-width:1080px){.nav,.site-head .head-cta{display:none}.menu{display:block}}

/* Hero: the film shows only through the bars of the mark */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding-block:clamp(56px,7vw,96px) clamp(64px,8vw,104px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:center}
.hero-text{display:flex;flex-direction:column;gap:24px;position:relative;z-index:2}
.hero h1{font-size:clamp(44px,6.2vw,84px);line-height:.98;letter-spacing:-.04em;font-weight:700}
.hero h1 span{color:var(--accent)}
.hero p{font-size:19px;line-height:1.55;color:var(--on-dark-lead);max-width:50ch}
.hero p.sub{font-size:16.5px;color:var(--on-dark-body)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.window{position:relative;width:100%;max-width:600px;justify-self:end;aspect-ratio:244/260}
.window .frame{position:absolute;inset:0;overflow:hidden;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='66 68 244 260'%3E%3Cpath d='M70.949,276.061L81.484,294.605A60.601,60.601 0 0 0 164.11,317.364L263.071,261.146A60.601,60.601 0 0 0 285.83,178.521L275.296,159.976Z'/%3E%3Cpath d='M303.918,120.16L293.384,101.616A60.601,60.601 0 0 0 210.758,78.857L111.797,135.075A60.601,60.601 0 0 0 89.038,217.7L99.572,236.245Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='66 68 244 260'%3E%3Cpath d='M70.949,276.061L81.484,294.605A60.601,60.601 0 0 0 164.11,317.364L263.071,261.146A60.601,60.601 0 0 0 285.83,178.521L275.296,159.976Z'/%3E%3Cpath d='M303.918,120.16L293.384,101.616A60.601,60.601 0 0 0 210.758,78.857L111.797,135.075A60.601,60.601 0 0 0 89.038,217.7L99.572,236.245Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:saturate(1.05) contrast(1.05)}
/* Hero still: a slow push-in across the light trails, inside the bars mask */
.window .frame img{width:100%;height:100%;object-fit:cover;transform-origin:62% 70%;animation:sf-push 26s ease-in-out infinite alternate;will-change:transform}
@keyframes sf-push{from{transform:scale(1) translate(0,0)}to{transform:scale(1.16) translate(-2.5%,-1.5%)}}
@media (prefers-reduced-motion:reduce){.window .frame img{animation:none}}
.window svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.window .echo path{fill:none;stroke:var(--accent);stroke-width:.5;transform-box:fill-box;transform-origin:center;opacity:.55}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .window{max-width:360px;justify-self:center;order:-1;width:66%}
}

/* Approach */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.split > *{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.cut-img{position:relative;aspect-ratio:4/3;width:100%;max-width:100%;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 136px),calc(100% - 77px) 100%,0 100%);border-radius:0}
.cut-img img{width:100%;height:100%;object-fit:cover}
figure{margin:0;display:flex;flex-direction:column;gap:10px}
figcaption{font:400 12px/1.4 var(--mono);color:var(--meta);text-transform:uppercase;letter-spacing:.04em}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:960px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--paper);border:1px solid var(--hair);border-radius:16px;padding:32px 28px 28px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.pillar::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--c)}
.pillar .kicker{font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--meta)}
.pillar h3{font-size:30px;letter-spacing:-.02em;line-height:1.05}
.pillar .tag{font-size:17px;font-weight:600;color:var(--ink);margin-top:-8px}
.pillar p{color:var(--body);font-size:16px}
.pillar ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);display:flex;flex-direction:column}
.pillar li{border-bottom:1px solid var(--hair)}
.pillar li a,.pillar li .nolink{display:flex;flex-direction:column;gap:2px;padding:12px 0;text-decoration:none}
.pillar li a b{font-size:15.5px;font-weight:600;display:block}
.pillar li a b .pill{margin-left:6px;vertical-align:2px}
.pillar li a b{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.pillar li a:hover b{color:var(--accent-ink);text-decoration-color:var(--accent)}
.pillar li span{font-size:14.5px;color:var(--meta);line-height:1.45}
.pill{font:600 11px/1 var(--font);letter-spacing:.05em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--sand);color:var(--body)}
.pillar .different{margin-top:auto;background:var(--sand);border-radius:12px;padding:16px 18px;font-size:15px;color:var(--body)}
.pillar .different a{font-weight:600;color:var(--ink)}

/* Product screens: set on mist, inset top-left, cropped at the right and bottom edges */
.screens{position:relative;background:var(--sand);border-radius:12px;height:236px;overflow:hidden}
.screens img{position:absolute;border-radius:6px 0 0 0;max-width:none;box-shadow:0 1px 2px rgba(32,28,22,.08),0 8px 24px rgba(32,28,22,.08)}
.screens .s1{left:20px;top:20px;width:430px}
.screens .s2{left:44%;top:112px;width:520px;border-radius:6px 0 0 0}
.screens figcaption{position:absolute;left:12px;bottom:10px;z-index:2;display:flex;gap:6px;flex-wrap:wrap}
.screens figcaption span{font:600 11px/1 var(--font);letter-spacing:.04em;text-transform:none;background:rgba(255,255,255,.94);color:var(--ink);padding:6px 8px;border-radius:999px}

/* Modelling: levels of resolution */
.levels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:stretch;margin-top:8px}
@media (max-width:900px){.levels{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:22px}
/* Tiles grow to match the panel, so the two columns end level */
.stack .lvl{flex:1 1 auto;min-height:56px}
.levels-note{align-self:start}
.lvl{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:center;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--hair);border-radius:12px;padding:14px 16px;cursor:pointer;font:inherit;color:inherit;transition:border-color .2s,background-color .2s}
.lvl:hover{border-color:var(--line)}
.lvl[aria-selected="true"]{border-color:var(--ink);background:var(--paper);box-shadow:0 1px 0 var(--ink)}
.lvl .name{font:500 12.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta)}
.lvl[aria-selected="true"] .name{color:var(--accent-ink)}
.lvl svg{width:100%;height:clamp(26px,32%,44px)}
.lvl svg rect{fill:var(--stone)}
.lvl[aria-selected="true"] svg rect{fill:var(--ink)}
.lvl[aria-selected="true"] svg rect.hot{fill:var(--accent)}
/* Links between levels are drawn only where a decision crosses levels */
.lvl.linked::before{content:"";position:absolute;top:-24px;height:24px;left:var(--x,50%);border-left:1.5px dashed var(--line)}
.panel{background:var(--paper);border:1px solid var(--hair);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:18px;min-height:100%}
.panel .q{font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.panel dl{margin:0;display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px 20px;border-top:1px solid var(--hair);padding-top:18px}
.panel dt{font:500 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta)}
.panel dd{margin:0;color:var(--body);font-size:15.5px}
@media (max-width:520px){.panel dl{grid-template-columns:1fr;gap:4px}.panel dd{margin-bottom:10px}}
.panel .label{align-self:flex-start;font:600 11px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--sand);color:var(--body)}
.chainfig{border-top:1px solid var(--hair);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.chainfig svg{width:100%;height:auto;display:block}
.chainfig .t{font:500 10.5px var(--mono);fill:var(--meta);text-transform:uppercase;letter-spacing:.04em}
.chainfig .bar{fill:var(--stone)}
.chainfig .bind{fill:var(--accent)}
.chainfig .add{fill:none;stroke:var(--meta);stroke-width:1.2;stroke-dasharray:3 3}
.chainfig .lim{stroke:var(--accent-ink);stroke-width:1.2;stroke-dasharray:5 4}
.chainfig .note{font:600 11px var(--font);fill:var(--accent-ink)}
.chainfig .note2{font:500 11px var(--font);fill:var(--meta)}
.chainfig p{font-size:13.5px;color:var(--meta)}
.levels-note{grid-column:1/-1;font-size:14px;color:var(--meta);max-width:80ch}

.steps{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{position:relative;padding:28px 24px 0 0;display:flex;flex-direction:column;gap:8px;counter-increment:s}
.steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.steps li:nth-child(1){--c:var(--r0)}.steps li:nth-child(2){--c:var(--r3)}.steps li:nth-child(3){--c:var(--r5)}.steps li:nth-child(4){--c:var(--r6)}
.steps b{font-size:18px}
.steps b::before{content:counter(s,decimal-leading-zero) "  ";font:500 13px var(--mono);color:var(--meta)}
.steps span{font-size:15.5px;color:var(--body)}
.steps-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;align-items:baseline;margin-top:88px}
.steps-head h3{font-size:24px;letter-spacing:-.01em}
.steps-head p{font-size:15px;color:var(--meta);max-width:56ch}
.steps-head + .steps{margin-top:24px}

/* Technology band */
.dark{background:var(--ink);color:#fff}
.dark .lead,.dark .prose{color:var(--on-dark-lead)}
.tech-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.tech-grid{grid-template-columns:1fr}}
.kb{border:1px solid var(--on-dark-line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,.04)}
.kb .fig{font:700 64px/1 var(--font);letter-spacing:-.04em}
.kb .fig small{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-left:6px}
.kb p{color:var(--on-dark-body);font-size:15.5px}
.chain{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:6px 0 0;padding:0}
.chain li{font:500 12.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:9px 12px;border-radius:999px;border:1px solid var(--on-dark-line);color:var(--on-dark-lead)}
.chain li:last-child{border-color:var(--accent);color:#fff}
.tech-img{aspect-ratio:16/10;width:100%;max-width:100%;overflow:hidden;clip-path:polygon(77px 0,100% 0,100% 100%,0 100%,0 136px)}
.tech-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) brightness(.9)}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:72px;padding-top:32px;border-top:1px solid var(--on-dark-line)}
@media (max-width:860px){.principles{grid-template-columns:1fr;gap:24px}}
.principles div{display:flex;flex-direction:column;gap:8px}
.principles b{font-size:18px}
.principles span{color:var(--on-dark-body);font-size:15.5px}

/* Work and insights */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1060px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--hair);border-radius:16px;overflow:hidden;transition:border-color .2s}
.card:hover{border-color:var(--line)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .ph img{transform:scale(1.04)}
.card .body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .ph.place{position:relative;background:var(--sand);display:flex;flex-direction:column;justify-content:space-between;padding:22px 22px 30px}
.card .ph.place::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--ramp)}
/* Insight placeholder: the mark's bars as ink contours, cropped top-right (look book: contours on mist) */
.card .ph.place{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='40 50 300 300'%3E%3Cg transform='translate(188 198) scale(1) translate(-188 -198)' fill='none' stroke='%23201c16' stroke-opacity='0.32' stroke-width='1.40'%3E%3Cpath d='M70.949,276.061L81.484,294.605A60.601,60.601 0 0 0 164.11,317.364L263.071,261.146A60.601,60.601 0 0 0 285.83,178.521L275.296,159.976Z'/%3E%3Cpath d='M303.918,120.16L293.384,101.616A60.601,60.601 0 0 0 210.758,78.857L111.797,135.075A60.601,60.601 0 0 0 89.038,217.7L99.572,236.245Z'/%3E%3C/g%3E%3Cg transform='translate(188 198) scale(1.14) translate(-188 -198)' fill='none' stroke='%23201c16' stroke-opacity='0.2' stroke-width='1.23'%3E%3Cpath d='M70.949,276.061L81.484,294.605A60.601,60.601 0 0 0 164.11,317.364L263.071,261.146A60.601,60.601 0 0 0 285.83,178.521L275.296,159.976Z'/%3E%3Cpath d='M303.918,120.16L293.384,101.616A60.601,60.601 0 0 0 210.758,78.857L111.797,135.075A60.601,60.601 0 0 0 89.038,217.7L99.572,236.245Z'/%3E%3C/g%3E%3Cg transform='translate(188 198) scale(1.28) translate(-188 -198)' fill='none' stroke='%23201c16' stroke-opacity='0.11' stroke-width='1.09'%3E%3Cpath d='M70.949,276.061L81.484,294.605A60.601,60.601 0 0 0 164.11,317.364L263.071,261.146A60.601,60.601 0 0 0 285.83,178.521L275.296,159.976Z'/%3E%3Cpath d='M303.918,120.16L293.384,101.616A60.601,60.601 0 0 0 210.758,78.857L111.797,135.075A60.601,60.601 0 0 0 89.038,217.7L99.572,236.245Z'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-size:70% auto;background-position:118% -38%}
.card .ph.place{overflow:visible;gap:18px}
@media (min-width:1061px){.card .ph.place q{font-size:18px}}
.card .ph.place q{font-size:21px;line-height:1.28;font-weight:600;letter-spacing:-.015em;color:var(--ink);quotes:"\201C" "\201D"}
.card .ph.place small{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta)}
.card .label{font:500 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);display:flex;gap:8px;align-items:center}
.card .label i{font-style:normal;padding:4px 7px;border-radius:6px;background:var(--sand);color:var(--ink)}
.card .label i.model{background:#fbe3d6;color:#8a3512}
.card h3{font-size:20px;line-height:1.2;letter-spacing:-.01em}
.card p{font-size:15px;color:var(--body)}
.card .go{margin-top:auto;padding-top:6px;font-weight:600;font-size:14.5px;color:var(--accent-ink)}
.reading{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:40px;border-top:1px solid var(--hair)}
@media (max-width:860px){.reading{grid-template-columns:1fr}}
.reading a{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.reading a span{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta)}
.reading a b{font-size:16.5px;font-weight:600}
.reading a:hover b{color:var(--accent-ink)}
.row-links{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:36px}

/* Who we work with: the chain as one ramp */
.chain-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
@media (max-width:960px){.chain-row{grid-template-columns:1fr}}
.stage{display:flex;flex-direction:column;gap:8px;text-decoration:none;padding:24px 18px 20px 0;position:relative}
.stage::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--a),var(--b))}
.stage:nth-child(1){--a:#201c16;--b:#43291d}.stage:nth-child(2){--a:#43291d;--b:#6c3620}.stage:nth-child(3){--a:#6c3620;--b:#984321}
.stage:nth-child(4){--a:#984321;--b:#c24d24}.stage:nth-child(5){--a:#c24d24;--b:#e2552b}.stage:nth-child(6){--a:#e2552b;--b:#ee8a4f}
.stage em{font:500 12px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.07em;color:var(--meta)}
.stage b{font-size:16.5px;line-height:1.3}
.stage span{font-size:15px;color:var(--body)}
.stage:hover b{color:var(--accent-ink)}
@media (max-width:960px){.stage{padding:20px 0 16px 24px}.stage::before{left:0;right:auto;top:0;bottom:0;width:6px;height:auto;background:linear-gradient(180deg,var(--a),var(--b))}}

/* About and close */
.quotes{display:flex;flex-direction:column;gap:28px}
.quote{display:grid;grid-template-columns:88px minmax(0,1fr);gap:22px;align-items:start;padding-top:24px;border-top:1px solid var(--hair)}
.quote img{width:88px;height:88px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
@media (max-width:600px){.quote{grid-template-columns:56px minmax(0,1fr);gap:16px}.quote img{width:56px;height:56px}}
.quote p{font-size:19px;line-height:1.45;font-weight:500;letter-spacing:-.01em}
.quote cite{display:block;margin-top:8px;font-style:normal;font-size:14px;color:var(--meta)}
.quote cite b{color:var(--ink)}
.close{position:relative;color:#fff;padding-block:clamp(96px,12vw,160px);overflow:hidden;background:var(--ink)}
.close>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.close::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(32,28,22,.9) 0%,rgba(32,28,22,.62) 55%,rgba(32,28,22,.2) 100%);z-index:1}
.close .wrap{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.close h2{font-size:clamp(40px,6vw,76px);line-height:1;letter-spacing:-.04em;max-width:12ch}
.close p{font-size:19px;color:var(--on-dark-lead);max-width:48ch}
.close .contact-line{font-size:15px;color:var(--on-dark-body)}
.close .contact-line b{color:#fff;user-select:all}

/* Footer */
.foot{background:var(--ink);color:var(--on-dark-body);padding-block:64px 40px;border-top:1px solid var(--on-dark-line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.7fr) minmax(0,1.4fr) minmax(0,1.25fr) minmax(0,.7fr);gap:32px}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}
.foot h4{margin:0 0 12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot a{text-decoration:none;font-size:15px}
.foot a:hover{color:#fff}
.foot .legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--on-dark-line);font-size:13px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ================= Subpages ================= */
.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
.pg-hero{background:var(--ink);color:#fff;padding-block:clamp(40px,5vw,72px) clamp(56px,6vw,88px);overflow:hidden}
.pg-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.pg-hero.noimg .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.pg-hero .bars{justify-self:end;width:100%;max-width:400px;aspect-ratio:244/260}
.pg-hero .bars svg{width:100%;height:100%;overflow:visible}
.pg-hero .bars .b{fill:var(--accent)}
.pg-hero .bars .e1,.pg-hero .bars .e2{fill:none;stroke:var(--accent);stroke-width:.5;transform-box:fill-box;transform-origin:center}
.pg-hero .bars .e1{transform:scale(1.1);opacity:.55}
.pg-hero .bars .e2{transform:scale(1.2);opacity:.28}
@media (max-width:860px){.pg-hero.noimg .wrap{grid-template-columns:minmax(0,1fr)}.pg-hero .bars{display:none}}
.pg-hero-text{display:flex;flex-direction:column;gap:20px;min-width:0}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--on-dark-body)}
.crumbs li+li::before{content:"/";margin-right:6px;color:rgba(255,255,255,.35)}
.crumbs a{text-decoration:none;color:var(--on-dark-body)}
.crumbs a:hover{color:#fff}
.pg-hero h1{font-size:clamp(36px,4.8vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:700;max-width:18ch}
.pg-hero .intro{display:flex;flex-direction:column;gap:14px;max-width:60ch}
.pg-hero .intro p{font-size:18px;line-height:1.55;color:var(--on-dark-lead)}
.pg-hero .intro p+p{font-size:16.5px;color:var(--on-dark-body)}
.pg-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.pg-hero .chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-hero figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.pg-hero .heroimg{aspect-ratio:4/3;width:100%;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 120px),calc(100% - 68px) 100%,0 100%)}
.pg-hero .heroimg img{width:100%;height:100%;object-fit:cover}
.pg-hero figcaption{color:var(--on-dark-body)}
@media (max-width:860px){.pg-hero .wrap{grid-template-columns:1fr}.pg-hero figure{order:2}}

.pg-sec{padding-block:clamp(56px,7vw,96px)}
.pg-sec.alt{background:var(--alt)}
.pg-sec.dark{background:var(--ink);color:#fff}
.pg-sec.dark .prose,.pg-sec.dark .lead{color:var(--on-dark-lead)}
.pg-sec .sec-head{margin-bottom:40px}
.h3{font-size:clamp(24px,2.6vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:700;margin-bottom:20px}
.prose h3{font-size:20px;letter-spacing:-.01em;color:var(--ink);margin-top:12px}
.pg-sec.dark .prose h3{color:#fff}
.prose ul,.prose ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.prose li::marker{color:var(--accent-ink)}
.prose a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
.pg-sec.dark .prose a{color:#fff}
.prose strong,.prose b{color:var(--ink)}
.pg-sec.dark .prose strong{color:#fff}
.split > .prose{max-width:none}

.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:28px 32px}
.points>div{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:2px solid var(--ink);min-width:0}
.points b{font-size:17.5px;line-height:1.3}
.points span{font-size:15.5px;color:var(--body)}
.points a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
.pg-sec.dark .points>div{border-top-color:var(--on-dark-line)}
.pg-sec.dark .points span{color:var(--on-dark-body)}
.pg-sec .steps{margin-top:8px}

.linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.linkgrid a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;background:var(--paper);border:1px solid var(--hair);border-radius:14px;text-decoration:none;transition:border-color .2s}
.linkgrid a:hover{border-color:var(--ink)}
.linkgrid b{font-size:16.5px;line-height:1.3}
.linkgrid b::after{content:"\00a0→";color:var(--accent-ink)}
.linkgrid span{font-size:14.5px;color:var(--meta);line-height:1.45}
.linkgrid .chip{align-self:flex-start}

.callout{position:relative;background:var(--sand);border-radius:12px;padding:30px 28px 24px;max-width:80ch}
.callout::before{content:"";position:absolute;left:28px;top:16px;width:48px;height:3px;border-radius:2px;background:var(--ramp)}
.callout p{font-size:18px;line-height:1.5;color:var(--ink)}
.callout p+p{margin-top:10px;font-size:15.5px;color:var(--body)}
.pg-sec.alt .callout{background:var(--paper)}

.glance{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 28px;margin:0;padding:24px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--hair)}
.glance dt{font:500 12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta)}
.glance dd{margin:0;font-size:15.5px}
@media (max-width:520px){.glance{grid-template-columns:1fr;gap:2px}.glance dd{margin-bottom:10px}}

.tablewrap{overflow-x:auto;border:1px solid var(--hair);border-radius:12px;background:var(--paper)}
table.cap{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
table.cap th{text-align:left;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);padding:14px 18px;border-bottom:1px solid var(--line);background:var(--alt)}
table.cap td{padding:14px 18px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--body)}
table.cap tr:last-child td{border-bottom:0}
table.cap td:first-child{color:var(--ink);font-weight:500}

.chip{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border-radius:999px;white-space:nowrap;background:var(--sand);color:var(--body)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.live{background:#e4ecdf;color:#2f5a2a}
.chip.dev{background:#fbe3d6;color:#8a3512}
.chip.planned{background:#e1e7ef;color:#24406a}
.chip.model{background:#fbe3d6;color:#8a3512}
.chip.research{background:#e1e7ef;color:#24406a}
.chip.insight{background:var(--sand);color:var(--ink)}
.pg-hero .chip{background:rgba(255,255,255,.1);color:#fff}
.pg-hero .chip.dev,.pg-hero .chip.model{background:rgba(238,138,79,.18);color:#f6b896}

.faq{border-top:2px solid var(--ink);max-width:880px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:600;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 24px var(--font);color:var(--accent-ink)}
.faq details[open] summary::after{content:"−"}
.faq details>p,.faq details>div{padding:0 0 20px;color:var(--body);max-width:68ch}

.fig{margin:0;display:flex;flex-direction:column;gap:10px}
.fig img{width:100%;aspect-ratio:16/10;object-fit:cover;clip-path:polygon(0 0,100% 0,100% calc(100% - 120px),calc(100% - 68px) 100%,0 100%)}
.screen{margin:0;display:flex;flex-direction:column;gap:10px}
.screen>img{background:var(--sand);padding:28px 0 0 28px;border-radius:12px;width:100%;object-fit:cover;object-position:left top;max-height:460px}
.screen figcaption,.fig figcaption{font:400 12px/1.4 var(--mono);color:var(--meta);text-transform:uppercase;letter-spacing:.04em}

.pg-close{background:var(--ink);color:#fff;padding-block:clamp(64px,8vw,104px);position:relative}
.pg-close::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ramp)}
.pg-close .wrap{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.pg-close h2{font-size:clamp(32px,4.4vw,56px);line-height:1.02;letter-spacing:-.035em;max-width:16ch}
.pg-close p{font-size:18px;color:var(--on-dark-lead);max-width:52ch}
.pg-close .contact-line{font-size:15px;color:var(--on-dark-body)}
.pg-close .contact-line b{color:#fff}

.related-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.related-head h2{font-size:22px;letter-spacing:-.01em}

/* Contact form (not wired) */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;max-width:none;align-items:start}
.form .lbl{display:block}
.form .opt{font-weight:400;color:var(--meta)}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.form input,.form textarea,.form select{font:400 16px var(--font);padding:12px 14px;border:1.5px solid #85847e;border-radius:10px;background:var(--paper);color:var(--ink)}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.form .hint{font-weight:400;color:var(--meta);font-size:13px}
@media (max-width:600px){.form{grid-template-columns:1fr}}

/* Our approach: the method on one page (five steps along the ramp, with a validation loop back to the model) */
.method{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:14px;row-gap:0}
.method>a{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 18px 20px;background:var(--paper);border:1px solid var(--hair);border-radius:12px;text-decoration:none;transition:border-color .2s}
.method>a::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:5px;border-radius:12px 12px 0 0;background:var(--c)}
.method>a:hover{border-color:var(--ink)}
.method>a:not(:nth-of-type(5))::after{content:"→";position:absolute;right:-14px;top:50%;width:14px;text-align:center;transform:translateY(-50%);color:var(--accent-ink);font-weight:600}
.method em{font:500 12px var(--mono);font-style:normal;color:var(--meta)}
.method b{font-size:18px;line-height:1.2}
.method span{font-size:14.5px;color:var(--body);line-height:1.45}
.method-loop{grid-column:3/6;position:relative;height:40px;margin:0 calc(50% / 3);border:2px dashed var(--accent-ink);border-top:0;border-radius:0 0 14px 14px}
.method-loop::before{content:"";position:absolute;left:-8px;top:-4px;border:7px solid transparent;border-bottom:10px solid var(--accent-ink);border-top:0}
.method-loop span{position:absolute;left:50%;top:100%;transform:translate(-50%,10px);width:max-content;max-width:100%;text-align:center;font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink)}
.method{padding-bottom:34px}
.method-note{display:none;margin-top:16px;font-size:15px;color:var(--body)}
.method-note a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
@media (max-width:960px){
  .method{grid-template-columns:1fr;row-gap:14px}
  .method>a:not(:nth-of-type(5))::after{content:"↓";right:auto;left:22px;top:auto;bottom:-14px;transform:none;width:auto;height:14px;line-height:14px}
  .method-loop{display:none}
  .method-note{display:block}
}

/* Spacing between stacked blocks inside a section (text, cards, callouts, points) */
.pg-sec .wrap > * + :not(.rv){margin-top:36px}
.pg-sec .wrap > .sec-head + *{margin-top:0}
.pg-sec .wrap > .steps-head{margin-top:72px}
.pg-sec .wrap > .steps-head + .steps{margin-top:24px}
.pg-sec .wrap > .rv{margin-top:12px}
/* Link grids: avoid a lone card on the last row */
@media (min-width:900px){
  .linkgrid:has(> a:nth-child(5):last-child),.linkgrid:has(> a:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .linkgrid:has(> a:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){.linkgrid:has(> a:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* About: founder cards (look book team layout): black-and-white portrait, role, quote, bio */
.founders{display:flex;flex-direction:column;gap:24px}
.founder{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start;background:var(--paper);border:1px solid var(--hair);border-radius:16px;padding:24px}
.founder-photo{margin:0;aspect-ratio:1/1;overflow:hidden;border-radius:10px;clip-path:polygon(0 0,100% 0,100% calc(100% - 64px),calc(100% - 36px) 100%,0 100%)}
.founder-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.founder-body{display:flex;flex-direction:column;gap:12px;min-width:0;padding-top:4px}
.founder-body h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.025em;line-height:1.05}
.founder-body blockquote{margin:4px 0 4px;padding-left:16px;border-left:3px solid var(--accent);font-size:19px;line-height:1.45;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.founder-body p{color:var(--body);max-width:68ch}
.pg-sec.alt .founder{background:var(--paper)}
@media (max-width:760px){.founder{grid-template-columns:1fr}.founder-photo{max-width:320px}}

/* Full-width text runs flow into two balanced columns on wide screens, so a section never leaves its right side empty */
@media (min-width:960px){
  .pg-sec .wrap:not(.split) > .prose{display:block;max-width:none;columns:2;column-gap:56px;column-fill:balance}
  .pg-sec .wrap:not(.split) > .prose > * + *{margin-top:16px}
  .pg-sec .wrap:not(.split) > .prose > h3{break-after:avoid;margin-top:22px}
  .pg-sec .wrap:not(.split) > .prose > h3:first-child{margin-top:0}
  .pg-sec .wrap:not(.split) > .prose li{break-inside:avoid}
  .pg-sec .wrap:not(.split) > .prose > p{break-inside:avoid}
  .pg-sec .wrap:not(.split) > .prose:not(:has(> :nth-child(2))){columns:auto;max-width:72ch}
}

/* Insights: quote cards and the featured article */
.icards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.icards .card .ph.place{aspect-ratio:auto;min-height:220px}
.icards .card .ph.place q{font-size:19px}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--hair);border-radius:16px;overflow:hidden;transition:border-color .2s}
.feature:hover{border-color:var(--ink)}
.feature-quote{position:relative;background:var(--ink);color:#fff;padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:320px}
.feature-quote::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--ramp)}
.feature-quote small{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--on-dark-body)}
.feature-quote q{font-size:clamp(26px,2.8vw,38px);line-height:1.18;font-weight:600;letter-spacing:-.02em;color:#fff;quotes:"\201C" "\201D"}
.feature-body{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.feature-body .h2{font-size:clamp(28px,3vw,40px)}
.feature-meta{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--meta)}
.feature-body p{color:var(--body);max-width:56ch}
.feature-body .go{font-weight:600;color:var(--accent-ink)}
@media (max-width:860px){.feature{grid-template-columns:1fr}.feature-quote{min-height:0}}

/* Insights themes: one lead quote card (theme colour from the ramp) + compact rows */
.ilead{display:flex;flex-direction:column;gap:0}
.lead-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--hair);border-radius:16px 16px 0 0;overflow:hidden;transition:border-color .2s}
.lead-card:hover{border-color:var(--ink)}
.lq{background:var(--c);color:#fff;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:240px}
.lq small{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.lq q{font-size:clamp(21px,2.1vw,28px);line-height:1.25;font-weight:600;letter-spacing:-.015em;quotes:"\201C" "\201D"}
.lb{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:10px;justify-content:center}
.lb .label{font:500 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lb .label i,.irow .label i{font-style:normal;padding:4px 7px;border-radius:6px;background:var(--sand);color:var(--ink)}
.lb h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;line-height:1.15}
.lb p{color:var(--body);font-size:15.5px;max-width:60ch}
.lb .go{font-weight:600;color:var(--accent-ink);font-size:14.5px}
.irows{border:1px solid var(--hair);border-top:0;border-radius:0 0 16px 16px;background:var(--paper)}
.irow{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) 24px;gap:24px;align-items:center;padding:18px clamp(20px,3vw,40px);text-decoration:none;color:inherit;border-top:1px solid var(--hair)}
.irow:first-child{border-top:0}
.irow .label{font:500 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.irow-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.irow-t b{font-size:17px;line-height:1.3}
.irow-t span{font-size:14.5px;color:var(--body)}
.irow-go{color:var(--accent-ink);font-weight:600;transition:transform .2s var(--ease)}
.irow:hover b{color:var(--accent-ink)}
.irow:hover .irow-go{transform:translateX(4px)}
@media (max-width:860px){.lead-card{grid-template-columns:1fr}.lq{min-height:0}.irow{grid-template-columns:minmax(0,1fr) 20px;gap:8px 16px}.irow .label{grid-column:1/-1}}

/* Featured article: the mark's bars, orange on ink, cropped at the panel edge, so it reads as the page's headline item */
.feature-quote{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='66 68 244 260'%3E%3Cpath fill='%23e2552b' d='M70.949,276.061L81.484,294.605A60.601,60.601 0 0 0 164.11,317.364L263.071,261.146A60.601,60.601 0 0 0 285.83,178.521L275.296,159.976Z'/%3E%3Cpath fill='%23e2552b' d='M303.918,120.16L293.384,101.616A60.601,60.601 0 0 0 210.758,78.857L111.797,135.075A60.601,60.601 0 0 0 89.038,217.7L99.572,236.245Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:auto 92%;background-position:calc(100% + 150px) 50%}
.feature-quote q,.feature-quote small{position:relative;z-index:1;max-width:62%}
@media (max-width:860px){.feature-quote{background-size:auto 70%;background-position:calc(100% + 90px) 50%}.feature-quote q,.feature-quote small{max-width:72%}}

/* Our work: visual cards (photo or model graphic) */
.wcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:760px){.wcards{grid-template-columns:1fr}}
.wcards .card .ph{aspect-ratio:16/10}
.wcards .card h3{font-size:24px}
.wcards .card p{font-size:15.5px}
.card .ph.chart{background:var(--sand);display:flex;align-items:center;justify-content:center;padding:24px 28px 16px}
.card .ph.chart .chainfig{border-top:0;padding-top:0;width:100%}
.card .label i.research{background:#e1e7ef;color:#24406a}
.chainfig-wide{margin:40px 0 0;max-width:none;background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:24px 28px 18px}
.pg-sec.alt .chainfig-wide{background:var(--paper)}

/* Six-step sequences: two rows of three, each step coloured along the ramp */
.steps li:nth-child(5){--c:#ee8a4f}.steps li:nth-child(6){--c:#f2a877}
@media (min-width:901px){.steps:has(> li:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}}
@media (min-width:901px){.steps:has(> li:nth-child(6):last-child) li:nth-child(1){--c:#201c16}.steps:has(> li:nth-child(6):last-child) li:nth-child(2){--c:#6c3620}.steps:has(> li:nth-child(6):last-child) li:nth-child(3){--c:#984321}.steps:has(> li:nth-child(6):last-child) li:nth-child(4){--c:#c24d24}.steps:has(> li:nth-child(6):last-child) li:nth-child(5){--c:#e2552b}.steps:has(> li:nth-child(6):last-child) li:nth-child(6){--c:#ee8a4f}}

/* Closing band: the bars fill the empty right half (look book device 2) */
@media (min-width:1000px){
.pg-close{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='66 68 244 260'%3E%3Cpath fill='%23e2552b' d='M70.949,276.061L81.484,294.605A60.601,60.601 0 0 0 164.11,317.364L263.071,261.146A60.601,60.601 0 0 0 285.83,178.521L275.296,159.976Z'/%3E%3Cpath fill='%23e2552b' d='M303.918,120.16L293.384,101.616A60.601,60.601 0 0 0 210.758,78.857L111.797,135.075A60.601,60.601 0 0 0 89.038,217.7L99.572,236.245Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:auto 78%;background-position:right max(48px,calc((100vw - 1200px)/2 + 24px)) center}
}

/* Full-width diagram: larger type to match the wider drawing */
.chainfig-wide .t{font-size:12px}.chainfig-wide .note,.chainfig-wide .note2{font-size:13px}
.chainfig-wide .cf-narrow{display:none}
@media (max-width:760px){.chainfig-wide .cf-wide{display:none}.chainfig-wide .cf-narrow{display:block}.chainfig-wide .cf-narrow .t{font-size:10.5px}.chainfig-wide .cf-narrow .note,.chainfig-wide .cf-narrow .note2{font-size:11px}}
/* Six application cards: three per row, ramp-coloured rules */
.points-six{grid-template-columns:repeat(3,minmax(0,1fr))}
.points-six>div:nth-child(1){border-top-color:#43291d}.points-six>div:nth-child(2){border-top-color:#6c3620}.points-six>div:nth-child(3){border-top-color:#984321}
.points-six>div:nth-child(4){border-top-color:#c24d24}.points-six>div:nth-child(5){border-top-color:#e2552b}.points-six>div:nth-child(6){border-top-color:#ee8a4f}
@media (max-width:900px){.points-six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.points-six{grid-template-columns:minmax(0,1fr)}}
/* Callouts run the full content width so they read as bands, not a box that stops at two-thirds */
.callout{max-width:none}.callout p{font-size:20px;line-height:1.45;max-width:none}
/* ---------- Diagrams (HTML, so they reflow on small screens) ---------- */
.dia{margin:40px 0 0;background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:28px 28px 20px;display:flex;flex-direction:column;gap:18px}
.dia figcaption{font:400 13.5px/1.5 var(--font);text-transform:none;letter-spacing:0;color:var(--meta)}
.dia-title{font-weight:600;font-size:16px;color:var(--ink)}
.dia b{font-weight:600;color:var(--ink)}
.dia em{font:500 12px/1.3 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink)}
.dia span{font-size:14px;line-height:1.45;color:var(--body)}
/* Timeline */
.tl,.tl-groups{display:flex;gap:6px}
.tl>div{flex:var(--w,1) 1 0;min-width:128px;display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:8px solid var(--c,var(--stone))}
.tl>.open{border-top:0;padding-top:22px;background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 9px) top/100% 8px no-repeat}
.tl>.hot{border-top-color:var(--accent)}
.tl>.end{flex:0 0 auto;border-top:0;padding-top:0;align-self:stretch;justify-content:flex-start;border-left:3px solid var(--ink);padding-left:10px}
.tl-groups span{flex:var(--w) 1 0;min-width:0;font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);border-bottom:1px solid var(--line);padding-bottom:6px}
.tl-groups .fixed{color:var(--accent-ink);border-bottom-color:var(--accent)}
.lever{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.lever i{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--stone))}
.lever span{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--meta)}
/* Flow of stages with arrows */
.flow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:34px}
.flow>div{position:relative;display:flex;flex-direction:column;gap:8px}
.flow>.step{background:var(--alt);border-radius:10px;padding:18px 18px 16px;border-top:4px solid var(--stone)}
.flow>.step.hot{border-top-color:var(--accent);background:#fbeee8}
.flow>div:not(:last-child)::after{content:"";position:absolute;right:-24px;top:50%;width:14px;height:14px;border-top:2px solid var(--meta);border-right:2px solid var(--meta);transform:translateY(-50%) rotate(45deg)}
.flow .stack{gap:8px}
.flow .stack>div{background:var(--alt);border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;border-left:3px solid var(--ink)}
.flow .stack span{font-size:13px}
.ww{display:block;height:12px;border-radius:3px;background:repeating-linear-gradient(135deg,var(--line) 0 3px,transparent 3px 7px);overflow:hidden}
.ww i{display:block;height:100%;width:calc(var(--work)*1%);background:var(--ink)}
.flow .hot .ww i{background:var(--accent)}
.flow .q{display:flex;gap:4px}
.flow .q i,.key .k-q{width:12px;height:12px;border-radius:2px;background:var(--accent);opacity:.75;display:inline-block}
.key{display:flex;flex-wrap:wrap;gap:8px 22px}
.key span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--meta)}
.key i{width:22px;height:10px;border-radius:2px;display:inline-block}
.key .k-work{background:var(--ink)}
.key .k-wait{background:repeating-linear-gradient(135deg,var(--line) 0 3px,transparent 3px 7px);border:1px solid var(--line)}
/* Horizontal bars */
.hbars{display:flex;flex-direction:column;gap:12px}
.hbars>div{display:grid;grid-template-columns:minmax(150px,220px) 1fr 56px;align-items:center;gap:16px}
.hbars i{height:22px;border-radius:3px;background:var(--stone);width:calc(var(--v)*1%)}
.hbars .hot i{background:var(--accent)}
.hbars b{font:600 18px var(--font);text-align:right}
/* Catalogue stacked bar and funnel */
.stack-bar{display:flex;height:34px;border-radius:4px;overflow:hidden;gap:2px}
.stack-bar i{flex:var(--v) 1 0;background:var(--ink);color:#fff;font:500 11.5px/34px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.04em;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stack-bar i.b2{background:var(--accent);flex-basis:auto;flex-grow:0;min-width:112px}
.funnel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.funnel>div{position:relative;display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:4px solid var(--stone)}
.funnel>.hot{border-top-color:var(--accent)}
.funnel b{font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.03em}
.funnel>div:not(:last-child)::after{content:"";position:absolute;right:-24px;top:30px;width:12px;height:12px;border-top:2px solid var(--meta);border-right:2px solid var(--meta);transform:rotate(45deg)}
/* Resolution ladder (systems modelling) */
.ladder{display:flex;flex-direction:column;gap:10px}
.ladder>div{margin-left:calc(var(--i)*5%);background:var(--paper);border:1px solid var(--hair);border-left:6px solid var(--c);border-radius:10px;padding:18px 22px;display:grid;grid-template-columns:150px minmax(0,1.2fr) minmax(0,1fr);gap:8px 28px;align-items:start}
.ladder b{font-size:18px}
.ladder .q{margin:0;font-size:16px;color:var(--ink)}
.ladder dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.ladder dt{font:500 11px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta)}
.ladder dd{margin:0;font-size:14px;color:var(--body);line-height:1.45}
@media (max-width:860px){
  .tl,.flow,.funnel{display:flex;flex-direction:column;gap:22px}
  .tl-groups{display:none}
  .tl>div{border-top:0;border-left:6px solid var(--c,var(--stone));padding:2px 0 2px 14px}
  .tl>.open{background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 9px) left/6px 100% no-repeat;padding-left:20px}
  .tl>.hot{border-left-color:var(--accent)}
  .flow>div:not(:last-child)::after,.funnel>div:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-17px;transform:translateX(-50%) rotate(135deg)}
  .hbars>div{grid-template-columns:1fr 48px;gap:6px 12px}.hbars span{grid-column:1/-1}
  .ladder>div{margin-left:0;grid-template-columns:1fr}
  .dia{padding:20px 18px 16px}
}
@media (max-width:860px){.tl>div{min-width:0}}
.tl>.end{min-width:0}
/* DCO timeline: the five timed stages share a fixed width; pre-application takes the rest */
.tl.tl-dco>div{flex:0 0 146px}.tl.tl-dco>.open{flex:1 1 0}
.tl-groups.tl-dco span{flex:1 1 0}.tl-groups.tl-dco .fixed{flex:0 0 calc(5 * 146px + 4 * 6px)}
@media (max-width:860px){.tl.tl-dco>div,.tl.tl-dco>.open{flex:0 0 auto}}
/* Hero photo seen through the mark's bars (look book bars mask; Insights) */
.pg-hero .heroimg.withbars{position:relative;clip-path:none;aspect-ratio:244/260;width:100%;max-width:540px;justify-self:end;overflow:visible}
.pg-hero .heroimg.withbars img{-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%2766%2068%20244%20260%27%3E%3Cpath%20d%3D%27M70.949%2C276.061L81.484%2C294.605A60.601%2C60.601%200%200%200%20164.11%2C317.364L263.071%2C261.146A60.601%2C60.601%200%200%200%20285.83%2C178.521L275.296%2C159.976Z%27/%3E%3Cpath%20d%3D%27M303.918%2C120.16L293.384%2C101.616A60.601%2C60.601%200%200%200%20210.758%2C78.857L111.797%2C135.075A60.601%2C60.601%200%200%200%2089.038%2C217.7L99.572%2C236.245Z%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%2766%2068%20244%20260%27%3E%3Cpath%20d%3D%27M70.949%2C276.061L81.484%2C294.605A60.601%2C60.601%200%200%200%20164.11%2C317.364L263.071%2C261.146A60.601%2C60.601%200%200%200%20285.83%2C178.521L275.296%2C159.976Z%27/%3E%3Cpath%20d%3D%27M303.918%2C120.16L293.384%2C101.616A60.601%2C60.601%200%200%200%20210.758%2C78.857L111.797%2C135.075A60.601%2C60.601%200%200%200%2089.038%2C217.7L99.572%2C236.245Z%27/%3E%3C/svg%3E") center/contain no-repeat}
.pg-hero .bars-over{position:absolute;inset:0;pointer-events:none}
.pg-hero .bars-over svg{width:100%;height:100%;overflow:visible}
.pg-hero .bars-over .b{display:none}
.pg-hero .bars-over .e1{fill:none;stroke:var(--accent);stroke-width:.5;transform-box:fill-box;transform-origin:center;transform:scale(1.1);opacity:.55}
.pg-hero .bars-over .e2{fill:none;stroke:var(--accent);stroke-width:.5;transform-box:fill-box;transform-origin:center;transform:scale(1.2);opacity:.28}
@media (max-width:860px){.pg-hero .heroimg.withbars{max-width:300px;justify-self:start}}

/* Who we work with: six role cards in supply-chain order, ramp bar from ink to orange (homepage staircase device) */
.roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:none}
.roles li{display:flex}
.roles a{display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--hair);border-radius:16px;overflow:hidden;transition:border-color .2s}
.roles a:hover{border-color:var(--ink)}
.roles .ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sand)}
.roles .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.roles a:hover .ph img{transform:scale(1.04)}
.roles .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--a),var(--b))}
.roles li:nth-child(1){--a:#201c16;--b:#43291d}.roles li:nth-child(2){--a:#43291d;--b:#6c3620}.roles li:nth-child(3){--a:#6c3620;--b:#984321}
.roles li:nth-child(4){--a:#984321;--b:#c24d24}.roles li:nth-child(5){--a:#c24d24;--b:#e2552b}.roles li:nth-child(6){--a:#e2552b;--b:#ee8a4f}
.roles .body{display:flex;flex-direction:column;gap:8px;padding:18px 22px 24px;flex:1}
.roles em{font:500 12px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.07em;color:var(--meta);display:flex;gap:10px;align-items:baseline}
.roles em span{color:var(--accent-ink)}
.roles b{font-size:18px;line-height:1.28;letter-spacing:-.01em}
.roles b::after{content:"\00a0→";color:var(--accent-ink)}
.roles .body>span{font-size:15px;color:var(--meta);line-height:1.45}
@media (max-width:900px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.roles{grid-template-columns:1fr}.roles a{flex-direction:row}.roles .ph{aspect-ratio:auto;width:34%;flex:none}.roles .ph::after{left:auto;top:0;width:6px;height:auto;background:linear-gradient(180deg,var(--a),var(--b))}.roles .body{padding:14px 16px 16px}.roles b{font-size:16.5px}}

/* Two text columns side by side read from the same top line */
.split:has(> .prose + .prose){align-items:start}

/* PFI handbacks: interactive model viewer */
.modelview{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:16px;margin-top:8px}
.mv-stage{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#ece8e1;border:1px solid var(--hair)}
.mv-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;opacity:0;transition:opacity .4s}
.mv-stage canvas:active{cursor:grabbing}
.mv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.modelview.ready canvas{opacity:1}.modelview.ready .mv-poster{opacity:0}
.mv-load{position:absolute;inset:auto 0 24px 0;display:flex;flex-direction:column;align-items:center;gap:8px;font:500 13px var(--mono);color:var(--body)}
.mv-tools{position:absolute;top:14px;left:14px;display:flex;background:rgba(255,255,255,.92);border:1px solid var(--hair);border-radius:999px;padding:3px;gap:2px;z-index:2}
.mv-tools button{font:500 13.5px var(--font);border:0;background:none;padding:8px 14px;border-radius:999px;color:var(--body);cursor:pointer}
.mv-tools button[aria-pressed="true"]{background:var(--ink);color:#fff}
.mv-side{display:flex;flex-direction:column;gap:16px}
.mv-legend{list-style:none;margin:0;padding:18px 20px;background:var(--paper);border:1px solid var(--hair);border-radius:16px;display:flex;flex-direction:column;gap:10px;opacity:.45;transition:opacity .3s}
.modelview.basis .mv-legend{opacity:1}
.mv-legend:empty{display:none}
.mv-legend li{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;font-size:14px;color:var(--body);line-height:1.3}
.mv-legend i,.mv-info dd i{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid rgba(32,28,22,.15)}
.mv-legend b{font:500 13px var(--mono);color:var(--meta)}
.mv-info{padding:18px 20px;background:var(--paper);border:1px solid var(--hair);border-radius:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.mv-info b{font-size:16.5px;line-height:1.3}
.mv-info dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:4px 0 0;font-size:14px}
.mv-info dt{color:var(--meta)}.mv-info dd{margin:0;color:var(--body);display:flex;gap:8px;align-items:flex-start}
.mv-info dd i{flex:none;margin-top:2px}
.mv-hint{font-size:14.5px;color:var(--meta);margin:0}
.mv-note{font-size:14px;color:var(--meta);max-width:80ch;margin-top:14px}
@media (max-width:900px){.modelview{grid-template-columns:1fr}.mv-stage{aspect-ratio:1/1}}
.modelview.ready .mv-load{display:none}
/* Longer text after a full-width grid: two balanced columns on wide screens, so the section ends square */
.prose.wide{max-width:none}
@media (min-width:1000px){.prose.wide{columns:2;column-gap:clamp(40px,5vw,72px)}.prose.wide>*{break-inside:avoid}.prose.wide h3{break-after:avoid;margin-top:0}.prose.wide figure,.prose.wide .rv{column-span:all}}
.modelview.fallback .mv-load button{display:none}
.modelview:not(.ready) .mv-info .mv-hint::after{content:" Load the 3D model to select parts."}
/* Six or nine points: even rows of three, never a row of five with an orphan */
.points:has(>div:nth-child(6):last-child),.points:has(>div:nth-child(9):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.points:has(>div:nth-child(6):last-child),.points:has(>div:nth-child(9):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.points:has(>div:nth-child(6):last-child),.points:has(>div:nth-child(9):last-child){grid-template-columns:minmax(0,1fr)}}

/* Consenting at speed: 2026 reform diagrams */
.secgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.secgrid>div{display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border-radius:10px;border:1px solid var(--hair);background:var(--sand)}
.secgrid b{font:600 22px/1 var(--mono);letter-spacing:-.01em}
.secgrid span{font-size:14px;line-height:1.35;color:var(--body);flex:1}
.secgrid em{align-self:flex-start;font:500 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:5px 8px;border-radius:999px}
.secgrid .gone{background:transparent;border-style:dashed}
.secgrid .gone b{color:var(--meta);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(32,28,22,.35)}
.secgrid .gone span{color:var(--meta)}
.secgrid .gone em{background:rgba(32,28,22,.06);color:var(--meta)}
.secgrid .new{border-color:var(--accent);background:#fff4ee}.secgrid .new em{background:var(--accent);color:#fff}
.secgrid .keep{border-color:var(--ink)}.secgrid .keep em{background:var(--ink);color:#fff}
@media (max-width:760px){.secgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.gate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px;align-items:stretch}
.gate>div{border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.gate-must{background:var(--ink);color:#fff}
.gate-must em{color:#f6a37f}.gate-must b{color:#fff;font-size:18px;line-height:1.3}.gate-must span{color:rgba(255,255,255,.78)}
.gate-weigh{background:var(--sand);border:1px solid var(--hair)}
.gate-weigh ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gate-weigh li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--paper);border-radius:8px;border-left:3px solid var(--accent)}
@media (max-width:760px){.gate{grid-template-columns:1fr}.gate-weigh ul{grid-template-columns:1fr}}

.ctl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 16px;position:relative}
.ctl::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line)}
.ctl li{position:relative;padding-top:26px;display:flex;flex-direction:column;gap:5px}
.ctl li::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.ctl li.hot::before{background:var(--accent);border-color:var(--accent)}
.ctl li.next::before{border-color:var(--accent);border-style:dashed}
.ctl time{font:500 12.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink)}
.ctl-wait{font-size:14px;color:var(--body);padding:12px 14px;border:1px dashed var(--line);border-radius:8px;margin:0}
.ctl-wait em{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);margin-right:8px}
@media (max-width:860px){.ctl{grid-template-columns:1fr;gap:18px}.ctl::before{left:5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}.ctl li{padding:0 0 0 28px}.ctl li::before{top:2px}}

.prof{display:flex;flex-direction:column;gap:6px}
.prof-plot{position:relative;height:220px;display:grid;grid-template-columns:repeat(40,minmax(0,1fr));gap:2px;align-items:end;border-bottom:1px solid var(--line);padding-top:34px}
.prof-plot i{display:block;height:var(--h);background:#e9b9a2;border-radius:2px 2px 0 0}
.prof-plot i.hot{background:var(--accent)}
.prof-plot .mk{position:absolute;top:0;bottom:0;left:calc(var(--k) / 40 * 100%);border-left:1.5px dashed var(--ink);font:500 11.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;padding-left:6px;color:var(--ink);white-space:nowrap}
.prof-plot .mk.dec{color:var(--meta);border-left-color:var(--meta)}
.prof-x{position:relative;height:16px}
.prof-x span{position:absolute;left:calc((var(--k) + .5) / 40 * 100%);transform:translateX(-50%);font:400 11.5px var(--mono);color:var(--meta)}
.prof-lab{font-size:13px;color:var(--meta);text-align:center;margin:4px 0 0}
@media (max-width:760px){.prof-plot{height:170px;gap:1px}.prof-plot .mk{font-size:10px;writing-mode:vertical-rl;padding:4px 0 0 2px}.prof-x span:nth-child(even){display:none}}
/* Products landing: the product title is a box that opens its page */
.titlecard{display:flex;flex-direction:column;gap:10px;align-self:start;padding:22px 26px 20px;border:1px solid var(--hair);border-radius:16px;background:var(--paper);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;max-width:460px}
.titlecard:hover{border-color:var(--ink);transform:translateY(-2px)}
.titlecard .go{font-weight:600;font-size:15.5px;color:var(--accent-ink)}
.sec-head .titlecard .h2{margin:0}
/* Project:OS: feature rows, text beside its screen, alternating */
.featrows{display:flex;flex-direction:column;gap:clamp(40px,6vw,72px);margin-top:8px}
.featrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(28px,4vw,56px);align-items:center}
.featrow:nth-child(even) .ft-text{order:2}
.ft-text{display:flex;flex-direction:column;gap:12px}
.ft-text p{color:var(--body);font-size:16.5px;max-width:52ch}
.featrow .screen>img{max-height:420px}
.kgraph{margin:0;display:flex;flex-direction:column;gap:10px}
.kgraph iframe{width:100%;height:440px;border:0;border-radius:12px;background:var(--ink);display:block}
.kgraph figcaption{font:400 12px/1.4 var(--mono);color:var(--meta);text-transform:uppercase;letter-spacing:.04em}
@media (max-width:900px){.featrow{grid-template-columns:1fr}.featrow:nth-child(even) .ft-text{order:0}.kgraph iframe{height:360px}}
.kgraph-wide iframe{height:520px}
.kg-legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:var(--body)}
.kg-legend li{display:flex;align-items:center;gap:7px}
.kg-legend i{width:11px;height:11px;border-radius:50%;background:#ccc;box-shadow:0 0 0 1px rgba(32,28,22,.25)}
@media (max-width:900px){.kgraph-wide iframe{height:380px}}

/* Playground: four-step flow and one-model hub */
.pgflow{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.pgflow li{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 34px 22px 22px;background:var(--paper);border:1px solid var(--hair);margin-right:-1px}
.pgflow li:first-child{border-radius:12px 0 0 12px}.pgflow li:last-child{border-radius:0 12px 12px 0;padding-right:22px}
.pgflow li:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:24px;height:24px;transform:translateY(-50%) rotate(45deg);background:var(--paper);border-top:1px solid var(--hair);border-right:1px solid var(--hair);z-index:1}
.pgflow em{font:500 12px var(--mono);font-style:normal;color:var(--accent-ink);letter-spacing:.05em}
.pgflow b{font-size:22px;line-height:1.1;letter-spacing:-.02em}
.pgflow li:nth-child(1) b{color:#6c3620}.pgflow li:nth-child(2) b{color:#984321}.pgflow li:nth-child(3) b{color:#c24d24}.pgflow li:nth-child(4) b{color:var(--accent)}
.pgflow span{font-size:15px;color:var(--body);line-height:1.45}
.pgflow-base{margin:10px 0 0;padding:14px 20px;background:var(--ink);color:rgba(255,255,255,.82);border-radius:12px;font-size:15px}
.pgflow-base b{color:#fff;margin-right:8px}
@media (max-width:860px){.pgflow{grid-template-columns:1fr}.pgflow li{margin:0 0 -1px;padding:20px 22px 26px}.pgflow li:first-child{border-radius:12px 12px 0 0}.pgflow li:last-child{border-radius:0 0 12px 12px}
 .pgflow li:not(:last-child)::after{right:auto;left:28px;top:auto;bottom:-13px;transform:rotate(135deg)}}

.pghub-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pghub-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center}
.pghub-col{display:flex;flex-direction:column;gap:12px}
.pghub-col>em{font:500 12px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--meta)}
.pgchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pgchips li{font-size:13.5px;padding:7px 12px;border-radius:999px;background:var(--sand);border:1px solid var(--hair);color:var(--ink)}
.pgouts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pgouts li{font-size:14.5px;padding:10px 14px;border-radius:8px;background:var(--paper);border:1px solid var(--hair);border-left:3px solid var(--accent)}
.pghub-model svg{width:100%;height:auto;display:block}
.pghub-model line{stroke:#d8d1c6;stroke-width:1.5}
.pghub-model line.hot{stroke:var(--accent);stroke-width:3}
.pghub-model circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.pghub-model g.hot circle{fill:#fff4ee;stroke:var(--accent);stroke-width:2.5}
.pghub-model text{font:600 12.5px var(--font);fill:var(--ink)}
@media (max-width:900px){.pghub-grid{grid-template-columns:1fr}.pghub-model{max-width:340px;margin:0 auto;width:100%}}
.pgflow li:nth-child(1){z-index:4}.pgflow li:nth-child(2){z-index:3}.pgflow li:nth-child(3){z-index:2}.pgflow li:nth-child(4){z-index:1}
/* Playground: services list and status strip */
.pgsvc{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.pgsvc li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:6px 40px;padding:20px 0;border-bottom:1px solid var(--hair)}
.pgsvc b{font-size:17.5px;line-height:1.3}
.pgsvc b a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
.pgsvc span{font-size:15.5px;color:var(--body)}
.pgsvc + .rv + .steps-head,.pgsvc + .steps-head{margin-top:72px}
.pgstatus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);margin-top:20px;background:var(--paper);border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.pgstatus>div{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 24px}
.pgstatus>div+div{border-left:1px solid var(--hair)}
.pgstatus ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;row-gap:6px}
.pgstatus li{font-size:15.5px;color:var(--ink);line-height:1.45}
.pgstatus li:not(:last-child)::after{content:"\00b7";margin:0 10px;color:var(--meta)}
.pg-q{margin-top:64px}
@media (max-width:760px){.pgsvc li{grid-template-columns:1fr}.pgstatus{grid-template-columns:1fr}.pgstatus>div+div{border-left:0;border-top:1px solid var(--hair)}}
.pgstatus>div:first-child ul{flex-direction:column}.pgstatus>div:first-child li::after{content:none}
/* Project:OS architecture */
.poscmp{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:0;align-items:stretch}
.pc-col{display:flex;flex-direction:column;gap:12px;padding:26px 28px;border:1px solid var(--hair);border-radius:12px;background:var(--paper)}
.pc-col h3{font-size:26px;letter-spacing:-.02em;line-height:1.1}
.pc-tag{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta)}
.pc-col ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
.pc-col li{font-size:16px;color:var(--body);padding:10px 0;border-top:1px solid var(--hair)}
.pc-to{background:var(--ink);border-color:var(--ink)}
.pc-to h3{color:#fff}.pc-to .pc-tag{color:#ee8a4f}.pc-to li{color:rgba(255,255,255,.84);border-top-color:rgba(255,255,255,.14)}
.pc-arrow{position:relative}
.pc-arrow::before{content:"";position:absolute;left:10px;right:18px;top:50%;height:3px;background:var(--ramp);border-radius:2px}
.pc-arrow::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;border-top:3px solid var(--accent);border-right:3px solid var(--accent);transform:translateY(-50%) rotate(45deg)}
.pc-result{grid-column:1 / -1;margin-top:18px;font-size:18px;line-height:1.5;color:var(--ink)}
.pc-result b{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent-ink);margin-right:10px}
.pc-result a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
@media (max-width:820px){.poscmp{grid-template-columns:1fr}.pc-arrow{height:44px}.pc-arrow::before{left:50%;right:auto;top:6px;bottom:12px;width:3px;height:auto}.pc-arrow::after{left:50%;right:auto;top:auto;bottom:10px;margin-left:-6px;transform:rotate(135deg)}}
.pos-onto{margin:-8px 0 0}
.poslvl{margin-top:64px;display:flex;flex-direction:column;gap:20px}
.lv-head{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.3fr);gap:8px 28px;align-items:baseline;padding-top:16px;border-top:2px solid var(--ink)}
.lv-head em{font:500 12px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-ink)}
.lv-head h3{font-size:24px;letter-spacing:-.01em}
.lv-head p{font-size:16px;color:var(--body)}
@media (max-width:820px){.lv-head{grid-template-columns:1fr}}
.posfig{margin:0;background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:20px 20px 16px}
.posfig figcaption{margin-top:14px;font-size:13.5px;color:var(--meta);line-height:1.5}
.posfig figcaption a{color:inherit;text-decoration-color:var(--accent)}
.posx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pos-swipe{display:none}
@media (max-width:900px){.pos-swipe{display:inline}}
.poslife{min-width:900px;display:flex;flex-direction:column;gap:6px}
.pl-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:stretch}
.pl-lab{font-size:14px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.pl-lab small{font:400 12px var(--font);color:var(--meta);margin-top:2px}
.pl-trk{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}
.pl-base .pl-trk .ph{grid-column:span 2;display:flex;flex-direction:column;gap:3px;padding:10px 10px 12px;background:var(--ink);color:#fff;border-radius:6px;min-height:104px}
.pl-base .ph:nth-child(1){background:#201c16}.pl-base .ph:nth-child(2){background:#43291d}.pl-base .ph:nth-child(3){background:#6c3620}.pl-base .ph:nth-child(4){background:#984321}.pl-base .ph:nth-child(5){background:#b04a22}.pl-base .ph:nth-child(6){background:#c24d24}.pl-base .ph:nth-child(7){background:#d4502a}.pl-base .ph:nth-child(8){background:#a8451a}
.ph span{font:500 11.5px var(--mono);color:rgba(255,255,255,.7)}
.ph b{font-size:13.5px;line-height:1.2}
.ph i{font-style:normal;font-size:12px;line-height:1.3;color:rgba(255,255,255,.78)}
.pl-trk .cell{font-size:12.5px;line-height:1.25;padding:8px;border-radius:6px;background:#fff;border:1px solid var(--hair);color:var(--ink);display:flex;align-items:center}
.pl-trk .cell.post{background:var(--sand)}
.poshm{min-width:860px}
.poshm .hm-r{display:grid;grid-template-columns:minmax(260px,1.9fr) repeat(8,minmax(0,1fr)) 70px;gap:0 3px;margin-bottom:2px;min-height:26px}
.poshm .hm-l{font-size:13.5px;line-height:26px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poshm .hm-l i{display:inline-block;width:40px;font:500 12px var(--mono);font-style:normal;color:var(--meta)}
.poshm .hm-c{border-radius:4px;font:500 12px var(--mono);display:flex;align-items:center;justify-content:center}
.poshm .hm-t{font:500 12px var(--mono);color:var(--meta);display:flex;align-items:center;justify-content:flex-end}
.poshm .hm-h{min-height:44px;margin-bottom:6px;border-bottom:2px solid var(--ink);align-items:end;padding-bottom:6px}
.poshm .hm-h .hm-l,.poshm .hm-h .hm-t{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);line-height:1.2}
.poshm .hm-p{display:flex;flex-direction:column;font-size:11.5px;line-height:1.15;color:var(--body);padding-left:3px}
.poshm .hm-p b{font:500 11.5px var(--mono);color:var(--accent-ink)}
.poshm .hm-r.hi{outline:2px solid var(--ink);outline-offset:1px;border-radius:4px}
.poshm .hm-r.hi .hm-l{font-weight:700}.poshm .hm-r.hi .hm-l i{color:var(--accent-ink)}
.posw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px}
.pw-lab{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);margin-bottom:10px}
.pw-acts{background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:20px}
.pw-acts ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pw-acts li{font-size:14.5px;padding:7px 0;border-top:1px solid var(--hair);color:var(--ink)}
.pw-acts li i{display:inline-block;width:62px;font:500 12px var(--mono);font-style:normal;color:var(--accent-ink)}
.pw-side{display:flex;flex-direction:column;gap:16px}
.pw-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pw-tiles>div{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--paper);border:1px solid var(--hair);border-radius:10px}
.pw-tiles b{font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--accent)}
.pw-tiles span{font-size:14.5px;font-weight:600;color:var(--ink)}
.pw-tiles small{font-size:12.5px;color:var(--meta);line-height:1.35}
.pw-rules{display:flex;flex-direction:column;gap:8px;padding:18px 20px;background:var(--ink);border-radius:12px}
.pw-rules b{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#ee8a4f}
.pw-rules span{font-size:15px;color:rgba(255,255,255,.86);padding-left:14px;border-left:2px solid rgba(255,255,255,.2)}
@media (max-width:900px){.posw{grid-template-columns:1fr}}
@media (max-width:520px){.pw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pos-next{margin-top:56px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 28px;align-items:baseline;padding:20px 24px;background:var(--sand);border-radius:12px}
.pos-next em{font:500 12px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-ink)}
.pos-next p{font-size:17px;color:var(--ink);line-height:1.5}
@media (max-width:820px){.pos-next{grid-template-columns:1fr}}
/* Five-step lists: one row of five on wide screens, three over two (full width) in between */
.steps:has(> li:nth-child(5):last-child) li:nth-child(1){--c:#201c16}.steps:has(> li:nth-child(5):last-child) li:nth-child(2){--c:#6c3620}.steps:has(> li:nth-child(5):last-child) li:nth-child(3){--c:#984321}.steps:has(> li:nth-child(5):last-child) li:nth-child(4){--c:#c24d24}.steps:has(> li:nth-child(5):last-child) li:nth-child(5){--c:#e2552b}
@media (min-width:1000px){.steps:has(> li:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:999px){.steps:has(> li:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr));row-gap:32px}.steps:has(> li:nth-child(5):last-child) li{grid-column:span 2}.steps:has(> li:nth-child(5):last-child) li:nth-child(n+4){grid-column:span 3}}
@media (max-width:599px){.steps:has(> li:nth-child(5):last-child){grid-template-columns:1fr}}
.posfig figcaption{font:400 13.5px/1.5 var(--font);text-transform:none;letter-spacing:0}
.poshm .hm-r{grid-template-columns:minmax(330px,2.3fr) repeat(8,minmax(0,1fr)) 70px}
.poshm{min-width:940px}
.pw-rules{flex:1;justify-content:center}
/* Contrast (combined proposal F, 25 Oct): accent text on dark uses the lighter ramp end; homepage image follows the text on phones */
.dark .eyebrow,.hero .eyebrow,.pg-hero .eyebrow{color:#ee8a4f}
.lq small{color:#fff}
@media (max-width:860px){.window{order:2;margin-top:8px}}
/* SMR constraint schematic (Production flow) */
.smrfig{margin:20px 0 8px;background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:20px}
.smr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.smr-t{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);margin-bottom:10px}
.smrfig ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.smrfig li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;align-items:center;font-size:13.5px;color:var(--body)}
.smrfig li i{display:block;height:14px;width:var(--w);background:#d8d1c6;border-radius:3px}
.smrfig li.bind{color:var(--ink);font-weight:600}.smrfig li.bind i{background:var(--accent)}
.smr-n{margin-top:10px;font-size:14px;font-weight:600;color:var(--accent-ink)}
.smrfig figcaption{margin-top:14px;font:400 13px/1.5 var(--font);color:var(--meta);text-transform:none;letter-spacing:0}
@media (max-width:700px){.smr-grid{grid-template-columns:1fr}}
@media (min-width:1000px){.wcards:has(>.card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}.wcards:has(>.card:nth-child(3):last-child) .card h3{font-size:21px}}
@media (min-width:761px) and (max-width:999px){.wcards:has(>.card:nth-child(3):last-child)>.card:nth-child(3){grid-column:1 / -1}}
/* Site search funnel (Our work) */
.funnel{margin:0 0 32px;background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:22px 22px 16px}
.funnel ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.funnel li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) 70px;gap:14px;align-items:center;padding:10px 14px;border-radius:8px;overflow:hidden;isolation:isolate}
.funnel li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--sand);z-index:-1;border-radius:8px}
.funnel li.last::before{background:#fde3d6}
.funnel b{font-size:26px;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.funnel li.last b{color:var(--accent-ink)}
.funnel span{font-size:15px;color:var(--body)}
.funnel em{font:500 12.5px var(--mono);font-style:normal;color:var(--meta);text-align:right}
.funnel figcaption{margin-top:14px;font:400 13.5px/1.5 var(--font);color:var(--meta);text-transform:none;letter-spacing:0}
@media (max-width:560px){.funnel li{grid-template-columns:52px minmax(0,1fr);}.funnel em{grid-column:2;text-align:left}.funnel b{font-size:22px}}
.funnel{display:block;max-width:none;width:100%}
/* Services landing: four services in a row, Data, integration and implementation as the foundation beneath */
.linkgrid.svcgrid.svcgrid:has(> a:nth-child(5)){grid-template-columns:repeat(4,minmax(0,1fr))}
.linkgrid.svcgrid .svc-base{grid-column:1 / -1;background:var(--ink);border-color:var(--ink);flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 24px;padding:22px 26px;position:relative}
.linkgrid.svcgrid .svc-base::before{content:"";position:absolute;left:26px;right:26px;top:0;height:3px;background:var(--ramp);border-radius:0 0 2px 2px}
.svc-base em{flex-basis:100%;font:500 12px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:#ee8a4f}
.linkgrid.svcgrid .svc-base b{color:#fff;font-size:18px}
.linkgrid.svcgrid .svc-base b::after{color:#ee8a4f}
.linkgrid.svcgrid .svc-base span{color:rgba(255,255,255,.78);font-size:15px;flex:1 1 320px}
.linkgrid.svcgrid .svc-base:hover{border-color:var(--accent)}
@media (max-width:1060px){.linkgrid.svcgrid.svcgrid:has(> a:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.linkgrid.svcgrid.svcgrid:has(> a:nth-child(5)){grid-template-columns:1fr}}
/* Homepage Services pillar: Data, integration and implementation as the foundation */
.pillar li.svc-base{border-bottom:0;margin-top:10px;background:var(--ink);border-radius:10px;position:relative;overflow:hidden}
.pillar li.svc-base::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ramp)}
.pillar li.svc-base a{padding:14px 16px 14px}
.pillar li.svc-base em{font:500 11px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:#ee8a4f;margin-bottom:2px}
.pillar li.svc-base a b{color:#fff}
.pillar li.svc-base a:hover b{color:#fff;text-decoration-color:#ee8a4f}
.pillar li.svc-base span{color:rgba(255,255,255,.78)}
/* Pillars on a plinth (JL, 25 Oct): the four services stand on Data, integration and implementation */
.linkgrid.svcgrid.svcgrid:has(> a:nth-child(5)){row-gap:0;column-gap:16px}
.linkgrid.svcgrid > a:not(.svc-base){position:relative;margin-bottom:26px;border-radius:14px 14px 4px 4px}
.linkgrid.svcgrid > a:not(.svc-base)::after{content:"";position:absolute;left:50%;bottom:-27px;width:3px;height:26px;margin-left:-1.5px;background:var(--accent);border-radius:2px}
.linkgrid.svcgrid > a:not(.svc-base)::before{content:"";position:absolute;left:50%;bottom:-31px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--accent);z-index:2}
.linkgrid.svcgrid .svc-base{border-radius:6px 6px 14px 14px;margin-top:4px}
.linkgrid.svcgrid .svc-base::before{left:0;right:0;border-radius:0}
.svc-base em{color:#ee8a4f}
@media (max-width:1060px){
 .linkgrid.svcgrid.svcgrid:has(> a:nth-child(5)){row-gap:16px}
 .linkgrid.svcgrid > a:not(.svc-base){margin-bottom:0}
 .linkgrid.svcgrid > a:nth-child(-n+2)::after,.linkgrid.svcgrid > a:nth-child(-n+2)::before{display:none}
 .linkgrid.svcgrid > a:nth-child(3),.linkgrid.svcgrid > a:nth-child(4){margin-bottom:10px}
 .linkgrid.svcgrid > a:nth-child(3)::after,.linkgrid.svcgrid > a:nth-child(4)::after{bottom:-27px}
}
@media (max-width:560px){
 .linkgrid.svcgrid > a:nth-child(3)::after,.linkgrid.svcgrid > a:nth-child(3)::before{display:none}
 .linkgrid.svcgrid > a:nth-child(3){margin-bottom:0}
}
/* Homepage Services pillar: a rail from the four services down into the foundation */
.pillar ul:has(> li.svc-base) > li:not(.svc-base){position:relative;padding-left:20px}
.pillar ul:has(> li.svc-base) > li:not(.svc-base)::before{content:"";position:absolute;left:5px;top:0;bottom:-1px;width:2px;background:var(--accent);opacity:.55}
.pillar ul:has(> li.svc-base) > li:not(.svc-base)::after{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pillar ul:has(> li.svc-base) > li:nth-last-child(2)::before{bottom:-11px}
@media (max-width:1060px){.linkgrid.svcgrid .svc-base{margin-top:0}.linkgrid.svcgrid > a:nth-child(3),.linkgrid.svcgrid > a:nth-child(4){margin-bottom:12px}.linkgrid.svcgrid > a:not(.svc-base)::after{height:30px;bottom:-30px}.linkgrid.svcgrid > a:not(.svc-base)::before{bottom:-33px}}
/* Playground: four levels of analysis, as a rising ladder */
.alevels{display:block;margin:40px 0 8px;background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:22px 22px 18px}
.al-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.al-bands{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.al-bands span{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);padding-bottom:6px;border-bottom:2px solid var(--hair)}
.al-bands span+span{color:var(--accent-ink);border-bottom-color:var(--accent)}
.alevels ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.alevels li{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:10px;background:#fff;border:1px solid var(--hair);border-top:4px solid var(--c)}
.alevels li:nth-child(1){--c:#6c3620;margin-top:72px}.alevels li:nth-child(2){--c:#984321;margin-top:48px}.alevels li:nth-child(3){--c:#c24d24;margin-top:24px}.alevels li:nth-child(4){--c:var(--accent)}
.alevels em{font:500 11.5px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.05em;color:var(--meta)}
.alevels b{font-size:18px;letter-spacing:-.01em}
.alevels li > span{font-size:14.5px;color:var(--body);line-height:1.45}
.alevels i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--accent-ink);margin-top:4px}
.alevels i::before{content:"Scenario step: ";font-weight:400;color:var(--meta)}
.alevels figcaption{margin-top:14px;font:400 13.5px/1.5 var(--font);color:var(--meta);text-transform:none;letter-spacing:0}
@media (max-width:860px){.alevels ol{grid-template-columns:repeat(2,minmax(0,1fr))}.alevels li:nth-child(n){margin-top:0}}
@media (max-width:520px){.alevels ol{grid-template-columns:1fr}.al-bands{display:none}}
.alevels ol{align-items:start}
@media (max-width:860px){.al-bands{display:none}}
/* Services landing: the four service cards in orange (JL, 25 Oct); CTA orange keeps white text at AA */
.linkgrid.svcgrid > a:not(.svc-base){background:#c94a22;border-color:#c94a22}
.linkgrid.svcgrid > a:not(.svc-base):hover{background:#a8451a;border-color:#a8451a}
.linkgrid.svcgrid > a:not(.svc-base) b{color:#fff}
.linkgrid.svcgrid > a:not(.svc-base) b::after{color:#fff}
.linkgrid.svcgrid > a:not(.svc-base) span{color:#fff}
.tl-dco small{display:block;margin-top:6px;font:500 11.5px/1.35 var(--mono);color:var(--accent-ink)}
.hbars.num>div{grid-template-columns:minmax(140px,230px) 1fr 64px}
.hbars.num b{font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:560px){.hbars.num>div{grid-template-columns:1fr 64px}.hbars.num>div i{grid-column:1 / -1;order:3}}
.tl-dco>div{display:flex;flex-direction:column}.tl-dco small{margin-top:auto;padding-top:10px}
/* Product panel: where a product genuinely fits (combined proposal D) */
.ppanel{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px;align-items:center;margin-top:32px;padding:18px;background:var(--paper);border:1px solid var(--hair);border-radius:14px;text-decoration:none;color:inherit;transition:border-color .2s}
.ppanel:hover{border-color:var(--ink)}
.ppanel figure{margin:0;display:flex;flex-direction:column;gap:6px}
.ppanel img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:8px;border:1px solid var(--hair);background:#fff}
.ppanel figcaption{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--meta)}
.ppanel>div{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ppanel b{font-size:20px;letter-spacing:-.01em}
.ppanel b::after{content:"\00a0→";color:var(--accent-ink)}
.ppanel>div>span:not(.chip){font-size:15.5px;color:var(--body);max-width:60ch}
.ppanel em{font-style:normal;font-size:13px;color:var(--meta)}
@media (max-width:640px){.ppanel{grid-template-columns:1fr}}
/* Reservoir programme sequencing schematic */
.seqfig{display:block;margin:32px 0 0;background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:22px}
.seq-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.seq-t{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);margin-bottom:12px}
.seq-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 12px;align-items:center}
.seq-l{font-size:13px;color:var(--body);white-space:nowrap}
.seq-row{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));height:16px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/14 - 1px),var(--hair) calc(100%/14 - 1px) calc(100%/14));border-radius:3px}
.seq-row i{display:block;height:100%;background:var(--accent);border-radius:3px;opacity:.85}
.seq-load{height:46px;align-items:end;gap:2px;background:none;margin-top:6px}
.seq-load b{display:block;height:var(--h);background:#d8d1c6;border-radius:2px 2px 0 0}
.seq-load b.pk{background:var(--ink)}
.seq-n{margin-top:10px;font-size:14px;font-weight:600;color:var(--ink)}
.seqfig figcaption{margin-top:16px;font:400 13.5px/1.5 var(--font);color:var(--meta);text-transform:none;letter-spacing:0}
@media (max-width:760px){.seq-wrap{grid-template-columns:1fr}}
@media (min-width:761px){.wcards:has(>.card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Before and after pair */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vs-col{padding:22px 24px;border-radius:12px;background:var(--paper);border:1px solid var(--hair)}
.vs-with{background:var(--ink);border-color:var(--ink)}
.vs-t{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--meta);margin-bottom:12px}
.vs-with .vs-t{color:#ee8a4f}
.vs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.vs li{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--hair)}
.vs-with li{border-top-color:rgba(255,255,255,.14)}
.vs b{font-size:16.5px}.vs-with b{color:#fff}
.vs li span{font-size:14.5px;color:var(--body)}.vs-with li span{color:rgba(255,255,255,.8)}
@media (max-width:760px){.vs{grid-template-columns:1fr}}
/* Three-step maturity ladder (Technology and AI) */
.points.ladder3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.points.ladder3>div{border-top-width:4px}
.points.ladder3>div:nth-child(1){margin-top:56px;border-top-color:#984321}.points.ladder3>div:nth-child(2){margin-top:28px;border-top-color:#c24d24}.points.ladder3>div:nth-child(3){border-top-color:var(--accent)}
.split .points.ladder3{grid-template-columns:1fr}.split .points.ladder3>div:nth-child(n){margin-top:0;margin-left:calc((3 - var(--n,1)) * 0px)}
.split .points.ladder3>div:nth-child(1){margin-left:0;margin-right:24%}.split .points.ladder3>div:nth-child(2){margin-left:12%;margin-right:12%}.split .points.ladder3>div:nth-child(3){margin-left:24%}
@media (max-width:760px){.points.ladder3{grid-template-columns:1fr}.points.ladder3>div:nth-child(n){margin:0}}
.solcards .sfig{display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--meta);line-height:1.35}
.solcards .sfig b{font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--accent-ink)}
/* Integrations: sources feeding one decision */
.inputs{display:grid;grid-template-columns:minmax(0,1.4fr) 56px minmax(0,1fr);align-items:center;gap:0;margin:0}
.in-src{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.in-src li{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--paper);border:1px solid var(--hair);border-left:3px solid var(--accent);border-radius:10px}
.in-src b{font-size:16px}.in-src span{font-size:14.5px;color:var(--body)}
.in-arrow{position:relative;height:100%}
.in-arrow::before{content:"";position:absolute;left:8px;right:16px;top:50%;height:3px;background:var(--ramp)}
.in-arrow::after{content:"";position:absolute;right:10px;top:50%;width:13px;height:13px;border-top:3px solid var(--accent);border-right:3px solid var(--accent);transform:translateY(-50%) rotate(45deg)}
.in-dec{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--ink);border-radius:14px}
.in-dec em{font:500 12px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:#ee8a4f}
.in-dec b{color:#fff;font-size:20px;line-height:1.25}
.in-dec span{color:rgba(255,255,255,.8);font-size:15px}
@media (max-width:860px){.inputs{grid-template-columns:1fr}.in-arrow{height:44px}.in-arrow::before{left:50%;right:auto;top:6px;bottom:14px;width:3px;height:auto}.in-arrow::after{left:50%;right:auto;top:auto;bottom:12px;margin-left:-6px;transform:rotate(135deg)}}
@media (max-width:520px){.in-src{grid-template-columns:1fr}}
/* Systemisation: as written vs as done */
.lanes{display:block;margin:0 0 36px;background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:20px 22px}
.lane{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0}
.lane+.lane{border-top:1px dashed var(--hair)}
.lane em{font:500 12px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--meta)}
.lane.done em{color:var(--accent-ink)}
.lane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.lane li{position:relative;font-size:14px;font-weight:600;padding:8px 14px;background:#fff;border:1px solid var(--ink);border-radius:8px}
.lane li:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:50%;transform:translateY(-50%);color:var(--meta);font-weight:400}
.lane li.gap{font-weight:500;font-size:13px;color:var(--accent-ink);background:#fff4ee;border:1px dashed var(--accent)}
.lane li.loop::before{content:"↺ ";}
.lanes figcaption{margin-top:12px;font:400 13.5px/1.5 var(--font);color:var(--meta);text-transform:none;letter-spacing:0}
@media (max-width:560px){.lane{grid-template-columns:1fr;gap:8px}}
.steps .ms{font:500 11px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink)}
.ms-note{margin-top:20px;font-size:14.5px;color:var(--meta)}
.ms-note a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
/* Site search map with legend */
.mapfig{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start;margin:0 0 32px;background:var(--ink);border-radius:14px;padding:20px}
.mapfig img{width:100%;height:auto;border-radius:8px;display:block}
.mapfig figcaption{color:rgba(255,255,255,.8);font:400 14px/1.45 var(--font);text-transform:none;letter-spacing:0}
.maplegend{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px}
.maplegend li{display:flex;align-items:center;gap:10px}
.maplegend i{flex:0 0 22px;height:14px;border-radius:3px}
.lg-short{background:#e2552b;outline:1.5px solid #fff4ee}.lg-open{background:rgba(226,85,43,.4)}.lg-soft{background:rgba(214,162,74,.6)}.lg-hard{background:rgba(122,114,102,.6)}
.lg-fz{background:linear-gradient(90deg,rgba(47,106,143,.6) 50%,rgba(59,134,181,.85) 50%)}.lg-wood{background:#3f5c33}.lg-water{background:#4a93c2}.lg-alc{background:rgba(91,90,46,.6)}
.lg-ca{border:1.5px dashed #b9a27a}.lg-edge{border-top:2px dashed #f2d38a;height:0!important}.lg-lb{background:radial-gradient(circle,#f2d38a 3px,transparent 3.5px)}.lg-brown{border:2px solid #7fd1c3;flex-basis:14px!important}.lg-unreg{border:1.5px dotted #c9b6ff}
.mapfig figcaption p{font-size:13px;color:rgba(255,255,255,.6)}
@media (max-width:860px){.mapfig{grid-template-columns:1fr}}