/* Board and animation layers shared by both modes. Loaded after dark.css. */
.home-hero{position:relative;overflow:hidden}
.home-hero > .wrap{position:relative;z-index:1}
.flow-bg{position:absolute;left:0;top:0;pointer-events:none;z-index:0}
/* ====================================================================== */
/* balanced operations board                                              */
/* ====================================================================== */
:root{--b-line:color-mix(in srgb,var(--line) 80%,var(--card))}
html[data-board] .board{background:var(--card)}
html[data-board] .lane + .lane{border-left-color:var(--b-line)}
html[data-board] .lane:nth-child(n+3){border-top-color:var(--b-line)}
/* every box the same: the What you get shade, one quiet border, no colored edges */
html[data-board] .item,html[data-board] .item.handled,html[data-board] .item.review,html[data-board] .work-card{background-color:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.28)}
html[data-board] .item:hover,html[data-board] .item.review:hover{border-color:var(--line-2)}
html[data-board] .item.moved,html[data-board] .item.review.moved{border-color:var(--line-2);box-shadow:0 0 0 1px var(--line-2),0 0 28px rgba(var(--glow),.16)}
html[data-board] .item .it-ico{background:color-mix(in srgb,var(--card) 70%,var(--bg));color:var(--ink-2)}
html[data-board] .item.handled .it-ico{background:var(--blue-soft);color:var(--blue-ink)}
html[data-board] .item.review .it-ico{background:var(--amber-soft);color:var(--ink)}
/* the outcome line: readable grey, with a small dot in the lane's color */
html[data-board] .item .it-note{color:var(--ink-2);font-weight:600}
html[data-board] .item .it-note::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--blue-ink)}
html[data-board] .item.review .it-note::before{background:var(--ink)}
/* lane titles: all white, a dot says which lane */
html[data-board] .lane-h,html[data-board] .lane.working .lane-h,html[data-board] .lane.review .lane-h,html[data-board] .lane:nth-child(3) .lane-h{color:var(--head);justify-content:flex-start;gap:9px}
html[data-board] .lane-h .n{margin-left:auto;background:color-mix(in srgb,var(--card) 70%,var(--bg));border-color:var(--b-line)}
html[data-board] .lane-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
html[data-board] .lane.working .lane-h::before,html[data-board] .lane:nth-child(3) .lane-h::before{background:var(--blue-ink)}
html[data-board] .lane.review .lane-h::before{background:var(--ink)}
/* industry select: quiet, like the other controls */
html[data-board] #boardIndustry{background-color:color-mix(in srgb,var(--card) 70%,var(--bg));border-color:var(--line-2);color:var(--ink)}
html[data-board] .stat.r b{color:var(--ink)}
/* AI working steps: the current step in readable blue, done steps white */
html[data-board] .work-card{position:relative;overflow:hidden}
/* even: lanes one step darker than the board, never black */
html[data-board="even"] .lanes{background:color-mix(in srgb,var(--card) 55%,var(--bg))}
/* tint: dark lanes, a faint wash of each lane's color from the top */
html[data-board="tint"] .lanes{background:color-mix(in srgb,var(--card) 25%,var(--bg))}
html[data-board="tint"] .lane.working,html[data-board="tint"] .lane:nth-child(3){background:linear-gradient(180deg,rgba(var(--glow),.10),transparent 70%)}
html[data-board="tint"] .lane.review{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 70%)}
html[data-board="tint"] .item.handled .it-note{color:color-mix(in srgb,var(--blue-ink) 55%,var(--ink-2))}
/* ====================================================================== */
/* new animations                                                         */
/* ====================================================================== */
.flow-pulse{display:none}
@media (prefers-reduced-motion:no-preference){
  /* headings show up like everything else (founder, 2026-10-19: the light sweep was dropped for a plain show-up).
     Section headings fade and rise with the same motion as the section's content; the subheading follows a beat later. */
  .rv-on .rise{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .rv-on .rise.sub{transition-delay:.12s}
  .rv-on .rise.in{opacity:1;transform:none}
  /* hero: everything in place within a second of load; the headline first */
  .home-hero h1{animation-duration:.8s;animation-delay:0s}
  .home-hero .areas,.home-hero .lede,.home-hero .actions,.home-hero .hero-card,.home-hero .hero-proof{animation-duration:.68s}
  .home-hero .areas{animation-delay:.08s}
  .home-hero .lede{animation-delay:.16s}
  .home-hero .actions{animation-delay:.24s}
  .home-hero .hero-card{animation-delay:.12s}
  .home-hero .hero-proof{animation-delay:.32s}
  /* board: the AI working box is scanned while it reads */
  .work-card::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(var(--glow),.10) 70%,rgba(var(--glow),.45) 100%);
    border-bottom:1px solid rgba(var(--glow),.55);animation:readScan 2.2s cubic-bezier(.45,0,.55,1) infinite}
  @keyframes readScan{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
  /* board: boxes travel to their lane (the travelling copy) */
  .item.in-flight{visibility:hidden}
  .item-ghost{position:fixed;z-index:60;pointer-events:none;margin:0;transform-origin:0 0;
    transition:transform .75s cubic-bezier(.6,.05,.25,1),opacity .25s ease .7s;box-shadow:0 0 0 1px var(--line-2),0 18px 40px rgba(0,0,0,.55),0 0 34px rgba(var(--glow),.30)}
  /* counters tick */
  @keyframes tick{0%{transform:translateY(-55%);opacity:0}100%{transform:none;opacity:1}}
  .stat b.tick{display:inline-block;animation:tick .4s cubic-bezier(.2,.7,.2,1)}
  /* step flows: a light runs down the line; each step lights as it passes */
  .flow-pulse{display:block;position:absolute;left:15px;top:0;width:10px;height:10px;border-radius:50%;z-index:2;pointer-events:none;
    background:var(--c2);box-shadow:0 0 14px 4px rgba(var(--glow),.7);opacity:0}
  .flow-pulse.run{animation:flowRun var(--dur,1.6s) cubic-bezier(.45,0,.55,1) forwards}
  @keyframes flowRun{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:calc(100% - 10px);opacity:0}}
  .tflow li .num{transition:box-shadow .35s ease,border-color .35s ease}
  .tflow li.lit .num{box-shadow:0 0 0 4px rgba(var(--glow),.22),0 0 22px rgba(var(--glow),.55);border-color:var(--blue-ink)}
  /* clickable boxes: a soft light follows the cursor */
  @media (hover:hover){
    .fit,.svc-card,.ind-link,.ind-card,.problem,.x-tab,.item{background-image:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),rgba(var(--glow),.13),transparent 60%)}
  }
}
/* light mode: the board and animations with light shadows */
html[data-theme="light"][data-board] .item,html[data-theme="light"][data-board] .item.handled,html[data-theme="light"][data-board] .item.review,html[data-theme="light"][data-board] .work-card{box-shadow:0 1px 2px rgba(14,34,64,.06),0 4px 12px rgba(14,34,64,.06)}
html[data-theme="light"] .item-ghost{box-shadow:0 0 0 1px var(--line-2),0 18px 40px rgba(14,34,64,.18),0 0 30px rgba(var(--glow),.18)}
html[data-theme="light"] .work-card::after{background:linear-gradient(180deg,transparent,rgba(var(--glow),.06) 70%,rgba(var(--glow),.25) 100%);border-bottom-color:rgba(var(--glow),.4)}
/* the theme switch */
.theme-btn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer}
.theme-btn:hover{color:var(--ink);border-color:var(--line-2)}
.theme-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.theme-btn svg{width:20px;height:20px}
html[data-theme="dark"] .theme-btn .moon,html[data-theme="light"] .theme-btn .sun{display:none}
/* small phones: the header has no room, so the switch moves into the menu panel */
.theme-row{display:none}
@media (max-width:480px){
  .links .theme-btn{display:none}
  .theme-row{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 4px;margin-top:4px;border:0;border-bottom:1px solid var(--line);background:none;font:600 16px/1.2 var(--sans);color:var(--ink);cursor:pointer}
  .theme-row svg{width:20px;height:20px}
  html[data-theme="dark"] .theme-row .moon,html[data-theme="light"] .theme-row .sun{display:none}
  html[data-theme="dark"] .theme-row .to-dark,html[data-theme="light"] .theme-row .to-light{display:none}
}

/* phones (founder, 2026-10-25: the phone view looked stretched) */
@media (max-width:640px){
  /* What you get: even, compact spacing instead of the desktop 2x2 padding */
  html .home-hero .hero-card dl.two > div{padding:16px 0}
  html .home-hero .hero-card dl.two > div:first-child{padding-top:4px}
  html .home-hero .hero-card dl.two dt{font-size:20px}
  /* engagement stages: no reserved height under "Then", which only lines up cards side by side */
  .then{min-height:0}
  /* footer: the Services links in two columns (Industries stays one column: long names) */
  footer nav[aria-label="Services"] ul{columns:2;column-gap:20px}
  footer nav[aria-label="Services"] li{break-inside:avoid}
}

/* smaller screens: a type scale sized for the screen (founder, 2026-10-25: "mobile version looks too big") */
@media (max-width:1023px){
  html .home-hero h1,html .page-hero h1{font-size:clamp(34px,6.4vw,48px);line-height:1.1}
  html .home-hero .areas{font-size:18px;line-height:1.45}
  html .home-hero .lede,html .page-hero .lede{font-size:18px;line-height:1.65}
  html .head .sub{font-size:18px;line-height:1.5}
  html h2.h2{font-size:clamp(26px,4.6vw,34px)}
  html .home-hero .actions .btn,html .page-hero .actions .btn{font-size:16px;min-height:50px;padding-block:12px}
}
/* phones: the page is shown zoomed out, the same proportions as on larger screens, just smaller
   (founder, 2026-10-25: "a zoomed out version on mobile"). Buttons stay at least 44px tall after the zoom. */
@media (max-width:640px){
  body{zoom:.86}
  html .home-hero .actions .btn,html .page-hero .actions .btn{min-height:52px}
}


/* board as a 2x2 grid with flow arrows wherever its lanes sit in two rows (founder, 2026-10-25: "2 boxes each row",
   "more creative"): Incoming -> AI working, then down to Handled by AI (diagonal) or Needs your team (straight down) */
@media (max-width:1100px){
  html body .board .lanes > .lane{position:relative}
  html body .board .lanes > .lane:nth-child(1)::after,
  html body .board .lanes > .lane:nth-child(3)::before,
  html body .board .lanes > .lane:nth-child(4)::before{
    position:absolute;z-index:2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
    background:var(--card);border:1px solid var(--line-2);color:var(--blue-ink);font:700 14px/1 var(--sans);pointer-events:none}
  html body .board .lanes > .lane:nth-child(1)::after{content:"\2192";right:-13px;top:58px}
  html body .board .lanes > .lane:nth-child(3)::before{content:"\2199";right:-13px;top:-13px}
  html body .board .lanes > .lane:nth-child(4)::before{content:"\2193";left:calc(50% - 13px);top:-13px}
}
/* phones: all four lanes, two per row, with compact boxes (two per lane; the counters show the rest) */
@media (max-width:640px){
  html body .board .lanes{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .board .lanes > .lane:nth-child(n){display:block;padding:12px 10px;border-top:0;border-left:0}
  html body .board .lanes > .lane:nth-child(2n){border-left:1px solid var(--b-line,var(--line))}
  html body .board .lanes > .lane:nth-child(n+3){border-top:1px solid var(--b-line,var(--line))}
  html body .board .lanes-toggle{display:none}
  html body .board .lane-h{font-size:13px;gap:6px;margin-bottom:4px}
  html body .board .lane-d{font-size:12px;line-height:1.4;margin:0 0 10px}
  html body .board .lane > ol{gap:6px}
  html body .board .lane > ol > :nth-child(n+3){display:none}
  html body .board .item{grid-template-columns:1fr;padding:8px 9px;gap:2px}
  html body .board .item .it-ico,html body .board .item .it-src,html body .board .work-card .it-src{display:none}
  html body .board .item .it-title{font-size:13px;line-height:1.3}
  html body .board .item .it-note{font-size:12px;line-height:1.35}
  html body .board .work-card{padding:10px}
  html body .board .work-steps li{font-size:12px;gap:6px}
  html body .board .work-steps li::before{width:12px;height:12px}
}

/* phones: keep the desktop arrangement of boxes, two per row, instead of long single columns
   (founder, 2026-10-25: "should be a box like how it is on the main website", "double check across the whole site") */
@media (max-width:640px){
  /* hero: the copy, then the card (What you get / At a glance), then the two buttons side by side */
  html body .hero-top{row-gap:0}
  html body .hero-top > div:first-child{display:contents}
  html body .hero-top > .hero-card{order:4;margin-top:28px}
  html body .hero-top .actions{order:5;margin-top:24px;flex-direction:row;flex-wrap:nowrap;gap:10px}
  html body .hero-top .actions .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;padding-inline:12px;font-size:15px;white-space:normal}
  html body .hero-card dl.two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  html body .home-hero .hero-card dl.two > div:nth-child(n){padding:14px 0}
  html body .home-hero .hero-card dl.two > div:nth-child(-n+2){padding-top:4px;border-top:0}
  html body .hero-card dl.two > div:nth-child(2){border-top:0}
  /* board counters in one row */
  html body .board .stats{flex-wrap:nowrap;gap:6px 14px}
  /* services: the six areas as a 2x3 grid of tabs; the detail boxes two per row, the list full width below */
  html body .x-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px}
  html body .x-list .x-tab{min-height:48px;padding:10px 12px}
  html body .xp-grid{display:grid;grid-template-columns:1fr;gap:12px}
  /* engagement stages two per row (the decision gates show between rows on larger screens) */
  /* principles, team tiles, industry links and the service page's two tiles: two per row */
  html body .prin-row,html body .wk-grid,html body .ind-links,html body .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  /* call to action: the box and its Add button on one line */
  html body .drop-row{flex-direction:row}
}

/* team line: one line on phones and tablets; the company names scroll continuously, left to right (founder, 2026-10-25) */
.hp-scroll{display:contents}
.hero-proof li[aria-hidden="true"]{display:none}
@media (max-width:1023px){
  html body .hero-proof{flex-wrap:nowrap;gap:16px;align-items:center}
  html body .hero-proof .hp-l{flex:none;white-space:nowrap;margin:0}
  html body .hp-scroll{display:block;flex:1;min-width:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  html body .hp-scroll ul{display:flex;flex-wrap:nowrap;width:max-content;gap:0;justify-content:flex-start}
  html body .hp-scroll li{padding-inline:14px}
  html body .hp-scroll li[aria-hidden="true"]{display:list-item}
}
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  @keyframes hpScroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  html body .hp-scroll ul{animation:hpScroll 32s linear infinite}
  html body .hp-scroll:hover ul{animation-play-state:paused}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){
  html body .hp-scroll{overflow-x:auto}
  html body .hp-scroll li[aria-hidden="true"]{display:none}
}

/* phones: format fixes after the zoom (founder approved 2026-10-25): readable text, room and lines between sections,
   one box level in the services panel */
@media (max-width:640px){
  /* sections: more room, with a line between them */
  html body main > section.section,html body .cta{padding-block:64px}
  /* readable floors after the 0.86 zoom: body text 14px on screen, labels 12px */
  html body .board .item .it-title{font-size:16.5px}
  html body .board .item .it-note,html body .board .lane-d{font-size:15px}
  html body .board .work-steps li{font-size:15px}
  html body .hero-top .actions .btn{font-size:15px;padding-inline:8px;white-space:nowrap}
  html body footer ul a,html body .prin p,html body .stage li,html body .wk2 p,html body .fit p,html body .ind-link p{font-size:16.5px}
}

/* phones: What you get as a 2x2 grid; a short vertical line between the columns in each row, kept clear of the
   row lines, which stay as two separate pieces (founder, 2026-10-25) */
@media (max-width:640px){
  html body .home-hero .hero-card dl.two,html body .page-hero .hero-card dl.two{column-gap:32px}
  html body .home-hero .hero-card dl.two > div:nth-child(even),html body .page-hero .hero-card dl.two > div:nth-child(even){position:relative}
  html body .home-hero .hero-card dl.two > div:nth-child(even)::before,html body .page-hero .hero-card dl.two > div:nth-child(even)::before{
    content:"";position:absolute;left:-16px;top:18px;bottom:14px;width:1px;background:var(--line)}
  html body .home-hero .hero-card dl.two > div:nth-child(2)::before,html body .page-hero .hero-card dl.two > div:nth-child(2)::before{top:6px}
}

/* stacked picker (phones and small tablets): the worked example gets its own panel, as the right-hand panel does on
   desktop, so the choices and the example read as separate parts (founder, 2026-10-25: "all mixed") */
@media (max-width:960px){
  html body .picker .pick-side{border-bottom:0}
  html body .picker .pick-main{margin:0 14px 14px;padding:20px 18px;border:1px solid var(--line-2);border-radius:16px;
    background:color-mix(in srgb,var(--card) 70%,var(--bg))}
}

/* phones: the board's four lanes as separate panels with room between them; arrows sit in the gaps (founder, 2026-10-25:
   "these 4 boxes look very clustered") */
@media (max-width:640px){
  html body .board .lanes{gap:14px;padding:14px;background:transparent}
  html body .board .lanes > .lane:nth-child(n){border:1px solid var(--line);border-radius:14px;padding:12px;
    background:color-mix(in srgb,var(--card) 55%,var(--bg))}
  html body .board .lanes > .lane:nth-child(1)::after{right:-20px}
  html body .board .lanes > .lane:nth-child(3)::before{right:-20px;top:-20px}
  html body .board .lanes > .lane:nth-child(4)::before{top:-20px}
  html body .board .item .it-title{font-size:15.5px}
  html body .board .item .it-note,html body .board .lane-d{font-size:14px}
  html body .board .work-steps li{font-size:14px}
}

/* phones: parts that ran together (founder, 2026-10-25: "check for such things all over the site") */
@media (max-width:640px){
  /* Services page: the parts inside each service card are separate boxes with space between them */
  html body .svc-card{display:flex;flex-direction:column;gap:12px}
  html body .svc-card > *{margin-top:0;margin-bottom:0}
  /* Operations page: before/after steps read top to bottom, each joined to the next by a short line */
  html body .steps{flex-direction:column;align-items:flex-start;gap:12px}
  html body .steps li:not(:last-child)::after{right:auto;left:22px;top:100%;width:0;height:12px;border-top:0;border-left:2px solid var(--line-2)}
}
@media (max-width:640px){
  /* long-text pairs and the team tiles read one per row on phones (too cramped at two) */
  html body .pair,html body .wk-grid{grid-template-columns:1fr}
}

/* phones: numbers readable (founder, 2026-10-25: "the numbers are hard to see on my phone"); sizes are before the 0.86 zoom */
@media (max-width:640px){
  html body .board .lane-h .n{font-size:16px;font-weight:700;color:var(--head);border-color:var(--line-2);padding:2px 9px;min-width:28px;text-align:center}
  html body .board .item .it-n,html body .board .work-card .it-n{font-size:13.5px}
  html body .board .item .it-id,html body .board .work-card .it-id{font-size:13.5px;color:var(--ink-2)}
  html body .step-l .n{font-size:15px}
  html body ol.path .stage .k{font-size:15px}
  html body .tflow .num{font-size:16px;color:var(--head)}
  html body .prin .pn{color:var(--blue-ink)}
}

/* TRIAL (2026-10-25, on the preview for the founder to review): box edges show more on phones and tablets in dark mode. A brighter edge line, a faint lit
   top edge and a soft blue glow, because a dark shadow is invisible on a near-black page. Selected and moving states keep
   their own highlight. */
@media (max-width:1023px){
  html[data-theme="dark"] body :is(.hero-card,.board,.explorer,.picker,.pick-main,.xp-tile,.fbox,ol.path > li.stage,.prin,.worked2,.wk2,.fit,.ind-link,.ind-card,.svc-card,.dlv,.blk,.cta-card,.your-item),
  html[data-theme="dark"] body .board .lanes > .lane:nth-child(n),
  html[data-theme="dark"] body .x-tab:not([aria-selected="true"]),
  html[data-theme="dark"] body .problem:not([aria-pressed="true"]),
  html[data-theme="dark"] body .item:not(.moved),
  html[data-theme="dark"] body .work-card{
    border-color:#2C4A7C;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(59,130,246,.06),0 0 22px rgba(59,130,246,.12),0 8px 24px rgba(0,0,0,.45)}
}

/* phones (founder, 2026-10-25): the board's lanes a step lighter than before; its boxes more compact so they aren't tall
   and narrow */
@media (max-width:640px){
  html body .board .lanes > .lane:nth-child(n){background:color-mix(in srgb,var(--card) 82%,var(--line))}
  html body .board .item{padding:8px 10px}
  html body .board .item .it-title{font-size:15px;line-height:1.3}
  html body .board .item .it-note{font-size:13.5px;line-height:1.35}
  html body .board .lane-d{font-size:13.5px;line-height:1.35}
}

/* 8113 TRIAL (2026-10-25): the white version everywhere, except the home page's top section, which stays dark as on 8110
   (founder: "personally i like the white version, except the main section on the main page in dark mode") */
.theme-btn,.theme-row{display:none !important}
html body .home-hero{background:linear-gradient(#01050E,#01050E) 0 0 / 100% var(--hs-h,100svh) no-repeat,var(--bg)}
html body .home-hero .hero-screen{
  --bg:#01050E;--card:#050E20;--line:#1D355C;--line-2:#28436F;--ink:#F1F5FC;--ink-2:#C3CEE3;--ink-3:#9AA9C4;
  --head:#FFFFFF;--navy:#FFFFFF;--blue-ink:#9CC3FF;--blue-soft:#0B1D44;color:var(--ink)}
html body .home-hero .hero-screen :is(h1,dt,.hero-proof li){color:#FFFFFF}
html body .home-hero .hero-screen .hero-card{background:#050E20;border:1px solid #1D355C;box-shadow:0 0 0 1px rgba(59,130,246,.06),0 0 22px rgba(59,130,246,.12),0 8px 24px rgba(0,0,0,.45)}
html body .home-hero .hero-screen .hero-card h2{color:#9CC3FF}
html body .home-hero .hero-screen .btn:not(.btn-primary){background:transparent;color:#FFFFFF;border-color:#28436F}
html body .home-hero .hero-screen .hero-proof{border-color:#1D355C}

/* 8118 TRIAL (2026-10-25), built on 8113 (white site, dark home top section). Founder:
   1. a lighter shade within the dark blue for the home top section and the closing section, as in the dark version
   2. more places pairing white with dark navy, as in the Services and Industries menus */

/* 1a. home top section: deep navy with a lighter blue glow inside it */
html body .home-hero{background:
  radial-gradient(55% 70% at 82% 30%,rgba(59,130,246,.20),transparent 65%) 0 0 / 100% var(--hs-h,100svh) no-repeat,
  radial-gradient(45% 60% at 0% 100%,rgba(34,211,238,.07),transparent 60%) 0 0 / 100% var(--hs-h,100svh) no-repeat,
  linear-gradient(#01050E,#01050E) 0 0 / 100% var(--hs-h,100svh) no-repeat,var(--bg)}
/* 1b. closing section and footer: dark, with the same glow (as the dark version) */
html body .cta{
  --card:#050E20;--line:#1D355C;--line-2:#28436F;--ink:#F1F5FC;--ink-2:#C3CEE3;--ink-3:#9AA9C4;--head:#FFFFFF;--navy:#FFFFFF;--blue-ink:#9CC3FF;
  background:radial-gradient(50% 120% at 85% 50%,rgba(59,130,246,.22),transparent 60%),radial-gradient(40% 100% at 10% 100%,rgba(238,242,248,.08),transparent 60%),#020814;
  color:var(--ink);border-top:1px solid #1D355C}
html body .cta :is(h2,label,.your-item h3,.your-item b){color:#FFFFFF}
html body .cta .your-item{background:#0A1631;border-color:#28436F;color:#F1F5FC;box-shadow:0 0 0 1px rgba(59,130,246,.06),0 0 22px rgba(59,130,246,.12)}
html body .cta .your-item *{color:inherit}
html body .cta .your-item a{color:#9CC3FF}
html body .cta .drop input{background:#0B1D44;border-color:#2C52A0;color:#FFFFFF}
html body .cta .drop input::placeholder{color:#9AA9C4}
html body .cta .btn:not(.btn-primary){background:transparent;color:#FFFFFF;border-color:#28436F}
html body footer{background:#01050E;border-top:1px solid #1D355C}

/* 2. white and navy together: the navy panel with white text, as in the Services and Industries menus */
html body .page-hero .hero-card{background:#13223E;border-color:#13223E;color:#E6ECF7;box-shadow:0 18px 40px rgba(14,34,64,.18)}
html body .page-hero .hero-card :is(h2,dd){color:#FFFFFF}
html body .page-hero .hero-card dt{color:#9CC3FF}
html body .page-hero .hero-card dl > div{border-color:rgba(255,255,255,.14)}
html body .board .board-head{background:#13223E;color:#E6ECF7;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
html body .board .board-head :is(b,.stat b,#board-h){color:#FFFFFF}
html body .board .board-head :is(span,label,.stat){color:#C3CEE3}
html body .board .board-head .stat.h b{color:#9CC3FF}
html body .board .board-head #boardIndustry{background-color:#0B1D44;border-color:#2C52A0;color:#FFFFFF}
html body .board .board-head .btn{background:transparent;color:#FFFFFF;border-color:#2C52A0}
html body .outcome{background:#13223E;color:#FFFFFF}
html body .outcome span{color:#9CC3FF}
html body .outcome p{color:#FFFFFF}
html body :is(.xp-ai,.ai-fit){background:#13223E;color:#E6ECF7;border-color:#13223E}
html body :is(.xp-ai,.ai-fit) p{color:#E6ECF7}
html body :is(.xp-ai,.ai-fit) :is(b,strong,.xp-l){color:#9CC3FF}
html body :is(.xp-ai,.ai-fit) a{color:#FFFFFF}

/* one navy for every white + navy panel: #13223E, the Where AI fits shade the founder picked (2026-10-25) */

/* 8119 TRIAL (2026-10-25), on top of 8118: navy (#13223E) marks the important information. The rule: navy means
   "the answer" (what you get, where AI fits, what changes, what your team sees), "your decision" (the gates) and
   "your current choice" (the selected tab or example). Everything else stays white. */
/* (selected tabs and examples keep their original light-blue highlight; founder, 2026-10-25) */
/* your decision: the line at the foot of each stage, and the gate note */
html body ol.path li.stage{padding-bottom:0;overflow:hidden}
html body ol.path li.stage > ul{padding-bottom:20px}
html body ol.path .stage .then{background:#13223E;color:#E6ECF7;border-top:0;border-radius:0;margin:auto -24px 0;padding:14px 24px 16px;min-height:0}
html body ol.path .stage .then b{color:#9CC3FF}
html body .legend span{display:inline-flex;align-items:center;gap:10px;background:#13223E;color:#FFFFFF;border-radius:999px;padding:8px 16px}
html body .legend i{border-color:#9CC3FF !important;background:transparent !important}
/* the answer: what your team sees on the service pages */
html body .dlv-pair > .dlv:last-child{background:#13223E;border-color:#13223E;color:#E6ECF7}
html body .dlv-pair > .dlv:last-child :is(.dlv-head b,h4){color:#FFFFFF}
html body .dlv-pair > .dlv:last-child .exc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
html body .dlv-pair > .dlv:last-child .exc :is(p,.it-id){color:#C3CEE3}
html body .dlv-pair > .dlv:last-child .exc .opts b{color:#9CC3FF}



/* 8119 (2026-10-25): the board header's controls are neutral, so the header reads as the same navy as Where AI fits
   (the bright blue dropdown fill and blue borders were the only blue inside it) */
html body .board .board-head #boardIndustry{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#FFFFFF}
html body .board .board-head .btn{background:transparent;border-color:rgba(255,255,255,.24);color:#FFFFFF}

/* 8119 (2026-10-25): home top section one notch lighter. Only the base navy moves (#01050E to #040B1C, same hue);
   the blue glow is unchanged (the earlier, brighter glow read as light blue) */
html body .home-hero{background:
  radial-gradient(55% 70% at 82% 30%,rgba(59,130,246,.20),transparent 65%) 0 0 / 100% var(--hs-h,100svh) no-repeat,
  radial-gradient(45% 60% at 0% 100%,rgba(34,211,238,.07),transparent 60%) 0 0 / 100% var(--hs-h,100svh) no-repeat,
  linear-gradient(#040B1C,#040B1C) 0 0 / 100% var(--hs-h,100svh) no-repeat,var(--bg)}
html body .home-hero .hero-screen{--bg:#040B1C}

/* 2026-10-25: founder: the Operations board header still looks a bit light; one small notch darker, same navy hue.
   Board header only (#13223E -> #101E38 -> #0D1A32); Where AI fits and the other navy panels stay #13223E. */
html body .board .board-head{background:#0D1A32}

/* 2026-10-25 phone fixes (founder): 1) What you get: a bit shorter and wider, type in line with the other cards
   (titles 18px like the principle and service titles, text 16px like body text). 2) Principles under "Built by people
   who have run the work": one box per row. */
@media (max-width:640px){
  html body .home-hero .hero-screen .hero-card{padding:24px 20px}
  html body .home-hero .hero-card dl.two{column-gap:20px}
  html body .home-hero .hero-card dl.two > div:nth-child(n){padding:12px 0}
  html body .home-hero .hero-card dl.two > div:nth-child(-n+2){padding-top:2px}
  html body .home-hero .hero-card dl.two dt{font-size:18px;line-height:1.3}
  html body .home-hero .hero-card dl.two dd{font-size:16px;line-height:1.55;margin-top:6px}
  html body .prin-row{grid-template-columns:1fr}
}

/* 2026-10-25 founder-approved fixes (list items 1, 2, 5, 6, 7, 8). */
/* 5. "All services", "All industries", "See how we work", "More about us": bottom right, in a small white box with the
   site's card border, on every page and width. */
html body .sec-foot .more{margin-left:auto;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-m);padding:0 16px;box-shadow:0 1px 2px rgba(14,34,64,.06)}
html body .sec-foot .more:hover{border-color:var(--blue-line)}
/* 6. Closing section: the sample card's status was white on white; amber, as it marks something for a person. */
html body .cta .your-item .status.review{background:rgba(245,158,11,.16);color:#FCD34D}
@media (max-width:640px){
  /* 1. Board counters: number above its label, each label on one line. */
  html body .board .board-head .stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 22px}
  html body .board .board-head .stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap}
  /* 2. Board lanes: each box takes its own height (no empty space under Incoming). */
  html body .board .lanes{align-items:start}
  /* 7. Footer: Industries in two columns, like Services. */
  html body footer nav[aria-label="Industries"] ul{columns:2;column-gap:18px}
  html body footer nav[aria-label="Industries"] li{break-inside:avoid}
  /* 8. Small labels at least 12px on screen after the 0.86 zoom. */
  html body :is(.pane-l,.p-id,.grp,.status,.it-id,.it-src,.it-n,.it-note,.lane-h,.lane-d,.fit-k,.mega-feat .k,.part .lbl,.dlv-note,.pair-note,.p3-ctx span,.foot-legal p,.trace .t,.trace .a){font-size:14px}
}
/* 2026-10-25 founder: board lanes on phones and tablets get a soft shade along their border so each reads as its own box. */
@media (max-width:1100px){
  html body .board .lanes > .lane{border-color:#D3DBE7;box-shadow:0 1px 2px rgba(14,34,64,.06),0 4px 14px rgba(14,34,64,.08)}
}
@media (max-width:640px){
  /* footer Industries in two columns: a name that wraps reads as one link */
  html body footer nav[aria-label="Industries"] a{line-height:1.3}
}
/* 2026-10-25 founder: the boxed section links match the hero buttons' size, on desktop and phones. */
html body .sec-foot .more{min-height:58px;padding:0 30px;font-size:18px;border-radius:10px;justify-content:center}
@media (max-width:640px){
  html body .sec-foot .more{min-height:52px;padding:0 20px;font-size:15px;min-width:calc(50% - 6px)}
}
/* 2026-10-26 founder (live site, phones): the open menu scrolls inside itself and the page behind stays still. */
@media (max-width:920px){
  html body .site-header.open .mnav{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html.menu-open,html.menu-open body{overflow:hidden}
}
/* 2026-10-26 founder (asked twice, "not enough yet"): board boxes on phones and tablets get a darker edge and a clearer shade so each lane and each item
   reads as its own box. */
@media (max-width:1100px){
  html body .board .lanes > .lane:nth-child(n){border-color:#94A3B8;box-shadow:0 1px 3px rgba(14,34,64,.14),0 8px 22px rgba(14,34,64,.16)}
  html body .board .item,html body .board .work-card{border-color:#AAB6C8;box-shadow:0 1px 2px rgba(14,34,64,.10),0 4px 12px rgba(14,34,64,.10)}
}
/* 2026-10-26 founder: phone menu organised like the desktop header: Services, Industries, How we work, About, then
   "Book a free call". Services and Industries each open their own panel in place of the menu, with "Menu" to go back
   and one item per line with room between (format from PwC and Accenture), ending with the navy card from the desktop panel. */
html body .mnav ul.m-root{padding:4px 0 20px}
html body .mnav .m-root > li > a,html body .mnav .acc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:56px;padding:0 4px;font:700 18px/1.3 var(--sans);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);
  border-radius:0;cursor:pointer;text-align:left}
html body .mnav .acc-btn svg{width:18px;height:18px;flex:none;color:var(--ink-2);transform:rotate(-90deg)}
/* drilled in: only the open panel shows */
html body .mnav .m-root.drilled > li:not(.on){display:none}
html body .mnav .m-root.drilled .acc-btn{display:none}
html body .mnav .acc-panel{padding:4px 0 8px}
html body .mnav .m-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font:600 16px/1 var(--sans);
  color:var(--ink-2);background:none;border:0;cursor:pointer}
html body .mnav .m-back svg{width:18px;height:18px;transform:rotate(90deg)}
html body .mnav .m-title{margin:8px 0 8px;padding:0 4px;font-size:24px;font-weight:800;color:var(--navy)}
html body .mnav ul.acc-list{padding:0 0 4px}
html body .mnav ul.acc-list a{min-height:48px;padding:4px;font-size:17px;font-weight:400;line-height:1.3;border-bottom:0;color:var(--ink)}
html body .mnav ul.acc-list li.all a{font-weight:700;color:var(--blue-ink)}
html body .mnav ul.acc-list a[aria-current="page"]{font-weight:700;color:var(--blue-ink)}
html body .mnav .m-feat{margin-top:20px;padding:22px 20px;border-radius:16px;gap:10px}
html body .mnav .m-feat b{font-size:20px;line-height:1.3}
html body .mnav .m-feat a{min-height:44px;margin-top:6px;padding:0;font-size:16px;font-weight:700;color:#fff;border-bottom:0}
html body .mnav .m-root > li.m-cta{padding-top:20px}
html body .mnav .m-root > li.m-cta > a{justify-content:center;background:var(--orange);min-height:52px;border:0;border-radius:var(--r-s);color:#fff;font-size:17px}
html body .mnav .m-root > li.m-cta > a:hover{background:var(--orange-ink)}