:root { --accent-rgb: 192 0 0; }
:root, [data-palette="ledger"] {
  --paper: #FFFFFF; --surface: #F4F6F8; --band: #E8ECEF; --ink: #15191E; --ink-2: #3E464F; --mute: #5F6973;
  --line: #D8DEE3; --accent: #C00000; --accent-deep: #8F0000; --second: #7C8B97; --deep: #2A323B;
  --ink-rgb: 21 25 30;
}
[data-palette="oxblood"] {
  --paper: #FFFFFF; --surface: #F8F4F4; --band: #F0E7E7; --ink: #22151A; --ink-2: #4A3B3F; --mute: #6E6064;
  --line: #E6DADB; --accent: #C00000; --accent-deep: #7E0C12; --second: #A08588; --deep: #5C1016;
  --ink-rgb: 34 21 26;
}
[data-palette="verdigris"] {
  --paper: #FFFFFF; --surface: #F2F5F3; --band: #E2EAE6; --ink: #141E1A; --ink-2: #384640; --mute: #5B6A63;
  --line: #D5DFDA; --accent: #C00000; --accent-deep: #8F0000; --second: #5E8075; --deep: #22403A;
  --ink-rgb: 20 30 26;
}
[data-palette="charcoal"] {
  --paper: #FFFFFF; --surface: #F5F5F5; --band: #EAEAEA; --ink: #262626; --ink-2: #454545; --mute: #666666;
  --line: #DEDEDE; --accent: #C00000; --accent-deep: #900000; --second: #8A8A8A; --deep: #303030;
  --ink-rgb: 38 38 38;
}
[data-palette="harbour"] {
  --paper: #FFFFFF; --surface: #F2F5F8; --band: #E3E9EF; --ink: #18212B; --ink-2: #3B4856; --mute: #5C6976;
  --line: #D6DEE6; --accent: #C00000; --accent-deep: #8F0000; --second: #5F7A93; --deep: #2E4153;
  --ink-rgb: 24 33 43;
}
/* ===== Type: Franklin (locked by the client, 17 Oct). Labels echo the logo's condensed TECHNOLOGIES. ===== */
:root {
  --display: "Libre Franklin", "Segoe UI", sans-serif; --text: "Source Sans 3", "Segoe UI", sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", sans-serif; --label-family: "Barlow Condensed";
  --display-weight: 700; --display-track: -.022em;
}

/* ===== The old v5 names, mapped onto the v6 tokens ===== */
:root {
  --sheet: var(--paper); --hair: var(--line); --char: var(--surface); --char-2: var(--band); --char-hair: var(--line);
  --on-char: var(--ink); --on-char-2: var(--ink-2); --red: var(--accent); --red-ink: var(--accent); --red-text: var(--accent);
  --graphite: var(--band); --graphite-2: var(--surface); --graphite-3: var(--line); --steel: var(--second); --mist: var(--surface);
  --signal: var(--accent); --signal-dk: var(--accent);
}
body { background: var(--paper); color: var(--ink); }
.v5 { background: var(--paper); }

/* headings: one sans, one weight per pairing */
.v6 h1, .v6 h2, .v6 h3, .v6 .t { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); }

/* Heading scale (client, 17 Oct: headings must be bigger). Page titles, then section titles; sub-heads stay smaller. */
.v6 h1 { font-size: clamp(46px, 5vw, 72px) !important; line-height: 1.03 !important; }
.v6 h2.t, .v6 .people h2, .v6 .buys h2, .v6 .zero5 h2, .v6 .founder h2, .v6 .cta h2, .v6 .front h2, .v6 .indep5 h2,
.v6 .why-vain blockquote, .v6 .case h2, .v6 .sig-java .step h2, .v6 .estate .step h2 { font-size: clamp(36px, 3.9vw, 56px) !important; line-height: 1.06 !important; }
@media (max-width: 720px) {
  .v6 h1 { font-size: 40px !important; }
  .v6 h2.t, .v6 .people h2, .v6 .buys h2, .v6 .zero5 h2, .v6 .founder h2, .v6 .cta h2, .v6 .front h2, .v6 .indep5 h2,
  .v6 .why-vain blockquote, .v6 .case h2, .v6 .sig-java .step h2, .v6 .estate .step h2 { font-size: 32px !important; }
}

/* no paper, lamps or grain anywhere */
.desk::before, .desk::after { display: none !important; }
.desk { background: var(--surface); color: var(--ink); }
.sheet, .pen { display: none !important; }

/* ===== Top strip and header: light, with a hairline ===== */
.strap { background: var(--band); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.strap b { color: var(--accent); }
.site-head { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
.site-head .nav a, .more-menu summary { color: var(--ink-2); }
.site-head .nav a:hover, .more-menu summary:hover, .more-menu[open] summary { color: var(--ink); }
.more-menu .drop { background: var(--paper); border-top-color: var(--accent); box-shadow: 0 24px 40px -18px rgb(var(--ink-rgb) / .3); border: 1px solid var(--line); }
.more-menu .drop a { color: var(--ink-2); } .more-menu .drop a:hover { color: var(--ink); background: var(--surface); }
.menu span { background: var(--ink); }
@media (max-width: 980px) { .site-head.open .nav { background: var(--paper) !important; border-bottom: 1px solid var(--line); } }

/* ===== Logo: the client's own ===== */
.foot .foot-logo { height: 30px; width: auto; display: block; }
.foot .reach6 { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; }
.foot .reach6 a { color: var(--ink); text-decoration: none; font-weight: 600; }
.foot .reach6 a:hover { color: var(--accent); }

/* ===== Buttons: ink on light, never red ===== */
.btn { border-radius: 0; }
.btn-red, .desk .btn-red, .on-dark .btn-red, .meter-hero .btn-red, .sig-hero .btn-red, .sig-ula .btn-red { background: var(--ink) !important; color: #fff !important; }
.btn-red:hover, .desk .btn-red:hover, .meter-hero .btn-red:hover, .sig-hero .btn-red:hover, .sig-ula .btn-red:hover { background: var(--accent-deep) !important; }
.btn-ghost { color: var(--ink) !important; border: 1px solid rgb(var(--ink-rgb) / .3) !important; }
.btn-ghost:hover { border-color: var(--ink) !important; }
.link-arrow[style*="color:#fff"] { color: var(--ink) !important; }

/* ===== Footer: a quiet band, ink on light ===== */
.foot { background: var(--band); color: var(--ink-2); border-top: 1px solid var(--line); }
.foot h4 { color: var(--ink); }
.foot li a:hover { color: var(--accent); }
.foot .fine { color: var(--mute); border-top-color: rgb(var(--ink-rgb) / .12); }
.foot p[style*="color:#fff"] { color: var(--ink) !important; }

/* ===== Phones: easy to read on every page ===== */
@media (max-width: 720px) {
  body { font-size: 17.5px; line-height: 1.65; }
  .v5 .lede5, .lede, .lede5 { font-size: 18px !important; line-height: 1.6; }
  .kicker, .crumbs, .tags, h3.lbl, .k, .tag { font-size: 13px !important; letter-spacing: .1em !important; }
  p, li, dd { overflow-wrap: anywhere; }
  .foot { font-size: 16px; }
}

/* ===== Review panel (preview only) ===== */
.review6 { position: fixed; left: 16px; bottom: 16px; z-index: 9999; font: 500 13px/1.2 "Source Sans 3", system-ui, sans-serif; color: #15191E; }
.review6 .tog { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border: 1px solid #C9D0D6; box-shadow: 0 10px 30px -12px rgba(21,25,30,.35); font-weight: 600; }
.review6 .tog::before { content: ""; width: 8px; height: 8px; background: #C00000; }
.review6 .body { display: none; margin-top: 8px; padding: 14px 16px 12px; background: #fff; border: 1px solid #C9D0D6; box-shadow: 0 18px 40px -16px rgba(21,25,30,.4); max-width: min(560px, calc(100vw - 32px)); }
.review6.open .body { display: block; }
.review6 .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 0; border-top: 1px solid #E3E7EA; }
.review6 .row:first-child { border-top: 0; padding-top: 0; }
.review6 .h { width: 60px; font: 600 11px/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #5F6973; }
.review6 button, .review6 a { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #DCE1E5; color: #15191E; font-size: 13px; }
.review6 button[aria-pressed="true"] { border-color: #15191E; box-shadow: inset 0 0 0 1px #15191E; }
.review6 button:focus-visible, .review6 a:focus-visible, .review6 .tog:focus-visible { outline: 2px solid #C00000; outline-offset: 2px; }
.review6 .sw { display: inline-flex; border: 1px solid rgba(0,0,0,.12); }
.review6 .sw i { width: 9px; height: 16px; display: block; }
[data-embed="1"] .review6 { display: none; }
@media (max-width: 720px) { .review6 { left: 8px; right: 8px; bottom: 8px; } .review6 .h { width: 100%; } }

/* ===== Home: hero (the quote recounted), engagements viewer, the R at the close ===== */
.hero6 { background: var(--paper); }
.v6 .wrap.hero { grid-template-columns: 1.12fr .88fr; align-items: center; }
.v6 .hero h1 { font-size: clamp(40px, 3.7vw, 56px); line-height: 1.05; }
.v6 .hero h1 span { display: block; font-size: .86em; color: var(--accent); margin-top: .08em; } /* a couple of points under the first line, in red (client, 19 Oct) */
@media (max-width: 720px) { .v6 .hero h1 { font-size: 38px; } }
.recount { position: relative; height: clamp(440px, calc(100vh - 230px), 600px); }
.recount canvas, .view6 canvas, .rbuild canvas, .tower6 canvas, .slabs6 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.engage6 { background: var(--surface); padding: 65px 0; min-height: 100vh; display: flex; align-items: center; }
.engage6 > .wrap { width: 100%; }
.engage6 .grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 50px; align-items: center; }
.tabs6 { display: flex; flex-wrap: wrap; gap: 0 26px; border-bottom: 1px solid var(--line); margin: 18px 0 30px; }
.tabs6 button { all: unset; cursor: pointer; padding: 12px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 600 15px/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); transition: color .25s, border-color .25s; }
.tabs6 button.on { color: var(--ink); border-bottom-color: var(--accent); }
.tabs6 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panels6 { display: grid; }
.panel6 { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.panel6.on { opacity: 1; visibility: visible; }
.panel6 .tag { font: 600 13px/1.4 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.panel6 h3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; margin: 10px 0 14px; }
.panel6 p { margin: 0 0 18px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.panel6 ul { list-style: none; margin: 0 0 22px; padding: 0; }
.panel6 li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--line); font-size: 16.5px; color: var(--ink); }
.panel6 li::before { content: ""; position: absolute; left: 0; top: 21px; width: 12px; height: 2px; background: var(--accent); }
.views6 { position: relative; height: clamp(420px, 72vh, 620px); }
.view6 { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.view6.on { opacity: 1; }
.rbuild { position: relative; height: 420px; }
[data-still] .band .row { animation: none; }
@media (max-width: 980px) {
  .v6 .wrap.hero { grid-template-columns: 1fr; }
  .recount { height: 420px; }
  .engage6 { min-height: 0; padding: 80px 0; }
  .engage6 .grid { grid-template-columns: 1fr; gap: 30px; }
  .views6 { height: 440px; order: -1; }
  .rbuild { height: 300px; }
}
@media (max-width: 720px) {
  .recount { height: 380px; margin: 0 -20px; }
  .views6 { height: 470px; margin: 0 -20px; }
  .tabs6 { gap: 0 18px; }
  .tabs6 button { font-size: 14px; }
  .panel6 p { font-size: 17.5px; }
}

/* ===== Client savings: the tower and the line items ===== */
.ledger6 { display: grid; gap: 18px; }
.tower6 { position: relative; height: 470px; }
.asrev { border-top: 2px solid var(--ink); padding-top: 14px; }
.asrev .k { display: block; font: 600 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.asrev dl.rl { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important; margin: 0; }
.asrev dl.rl > div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.asrev dt { color: var(--ink-2); } .asrev dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; }
.asrev [data-mark="strike"] dd { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.asrev [data-mark="keep"] dt, .asrev [data-mark="keep"] dd { color: var(--accent); font-weight: 700; }
.asrev .rl-note { position: static !important; width: auto !important; height: auto !important; clip: auto !important; white-space: normal !important; overflow: visible !important; margin: 12px 0 0; font-size: 15px; color: var(--mute); }
.slabs6 { position: relative; height: 520px; }
@media (max-width: 720px) { .tower6 { height: 400px; } .slabs6 { height: 360px; margin: 0 -20px; } .asrev dl.rl > div { flex-direction: column; gap: 2px; } .asrev dd { text-align: left; white-space: normal; } }

/* ===== Guides and posts: the protocol summary, as text (the blog layout itself is locked) ===== */
.guide-head { background: var(--paper); }
.protocol6 { align-self: center; border-top: 2px solid var(--ink); padding-top: 14px; }
.protocol6 .k { display: block; font: 600 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.protocol6 dl { margin: 0; }
.protocol6 dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.protocol6 dt { font: 600 17px/1.2 var(--label); letter-spacing: .06em; color: var(--accent); }
.protocol6 dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
@media (max-width: 720px) { .protocol6 dl > div { grid-template-columns: 74px 1fr; gap: 10px; } .protocol6 dd { font-size: 16.5px; } }
@media (max-width: 720px) { .sig-ula .shield, .sam-scan .scan { margin-left: 0 !important; margin-right: 0 !important; } }
@media (max-width: 980px) { /* the estate, not pinned: floor first, then the words */
  .estate.still { min-height: 0; display: flex; flex-direction: column; }
  .estate.still .legend { position: relative; order: -2; left: auto; top: auto; bottom: auto; right: auto; padding: 28px 20px 0; flex-wrap: wrap; }
  .estate.still canvas { position: relative; inset: auto; order: -1; height: 380px; }
  .estate.still .veil { display: none; }
  .estate.still .copy { position: relative; left: auto; right: auto; bottom: auto; width: auto; padding: 10px 20px 60px; }
}

html, body { overflow-x: clip; } /* entrances that slide in from the side never widen the page */

:root { color-scheme: only light; } /* a light site: opt out of browsers that force dark mode */

/* ===== Home, after the client's review (17 Oct) ===== */
/* Hero: their renewal-quote card as a normal image */
.v6 .wrap.hero { grid-template-columns: 1.05fr .95fr !important; gap: 60px; }

/* The three practices, in the publishers' column format */
.practices6 { background: var(--paper); }
.practices6 .intro { padding-top: 58px; padding-bottom: 40px; }
.practices6 .col .pn { display: block; font: 600 13px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.practices6 .col h3 { font: 700 clamp(26px, 2.2vw, 34px)/1.08 var(--display); letter-spacing: -.015em; text-transform: none; margin: 0; color: var(--ink-2); transition: color .4s, font-size .4s; max-width: 12em; }
.practices6 .col.on h3 { color: var(--ink); font-size: clamp(34px, 3.2vw, 50px); }
.practices6 .col .detail p { margin: 0; font: 500 19px/1.5 var(--display); color: var(--ink); }
.practices6 .col .detail .vend { font: 600 14px/1.5 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.practices6 .col.on { background: var(--surface); }
.practices6 .cols { height: min(52vh, 440px); min-height: 380px; }

/* Client band: the big names first, larger and in colour; both rows faster */
.band .figs6 { display: flex; flex-wrap: wrap; gap: 20px 80px; align-items: flex-end; }
.band .figs6 .big { font-size: clamp(72px, 7.4vw, 112px); }
.band .figs6 > div { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: end; }
.band .figs6 span { font: 500 22px/1.3 var(--display); color: var(--ink-2); max-width: 18em; margin-bottom: 10px; }
.band .figs6 > div + div span { max-width: 7em; }
.band .big6 .row { gap: 90px; animation-duration: 34s; }
.band .big6 .row img { height: 64px; filter: none; opacity: 1; }
.band .rail.below .row { animation-duration: 40s; }
.band .rail.below .row img { height: 40px; }

/* Signature engagements: a big heading, then the viewer */
.engage6 { display: block; min-height: 0; padding: 65px 0 58px; }
.engage6 .head6 { margin-bottom: 30px; }
.engage6 .head6 .lede5 { max-width: 44em; }
.engage6 .tabs6 { gap: 0 22px; flex-wrap: nowrap; }
.engage6 .tabs6 button { font-size: 14px; white-space: nowrap; }
@media (max-width: 720px) { .engage6 .tabs6 { flex-wrap: wrap; } }
.engage6 .stage6 { min-height: min(78vh, 640px); align-items: center; }
.face6 { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: center; padding: 10px 0; }
.face6 img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; mix-blend-mode: multiply; }
.face6 .k { display: block; font: 600 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.face6 b { display: block; font: 700 30px/1.1 var(--display); letter-spacing: -.015em; }
.face6 p { margin: 10px 0 16px; font-size: 16.5px; color: var(--ink-2); }
.face6 dl { margin: 0 0 22px; }
.face6 dl > div { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.face6 dt { font: 600 12.5px/1.6 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.face6 dd { margin: 0; color: var(--ink); }

/* $0: smaller, a focal point: one framed figure, the claim beside it, the three points beneath */
.zero5 { padding: 65px 0 58px; }
.zero5 .zgrid { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: center; }
.zero5 .seal { background: var(--band); border-top: 4px solid var(--accent); padding: 34px 36px 30px; text-align: center; }
.zero5 .seal .big { font-size: clamp(120px, 12vw, 176px); line-height: .82; color: var(--accent); }
.zero5 .seal .cap { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.zero5 .say h2 { margin: 0 0 18px; }
.zero5 .pts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: 56px; }
.zero5 .pts div { border-top: 2px solid var(--ink); padding-top: 18px; }

/* AI on a contrasting ground, labelled as Practice 02 */
.v6 .ai5 { background: var(--band); }
.v6 .ai5 .board { background: var(--paper); }
.v6 .ai5 .kicker { margin-bottom: 14px; }
.v6 .ai5 h2.t { font-size: clamp(34px, 3.1vw, 48px) !important; }

/* Case studies: the result first */
.v6 .cases5 { background: var(--surface); }
.v6 .cases5 .fig { font-size: clamp(96px, 10vw, 150px); color: var(--accent); }
.v6 .cases5 .viewer .fsub { margin-top: 12px; font: 600 15px/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.v6 .cases5 .viewer h3 { font-size: clamp(26px, 2.4vw, 34px); }
.v6 .cases5 .viewer .link-red { display: inline-block; margin-top: 22px; }
.v6 .cases5 .list button { font-size: 18px; }

/* YouTube: two rows of the channel's videos, drifting like the client band */
.yt6 { background: var(--paper); padding: 65px 0 80px; overflow: hidden; }
.yt6 .head { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; margin-bottom: 40px; }
.yt6 .head h2.t { margin: 14px 0 0; }
.yt6 .head p { margin: 0 0 14px; }
.ytrail { width: min(calc(var(--wrap, 1280px) - 80px), calc(100% - 80px)); margin: 0 auto; padding: 10px 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } /* inside the page margins (owner, 18 Oct) */
.ytrow { display: flex; gap: 22px; width: max-content; animation: drift 70s linear infinite; }
.ytrow.rev { animation-direction: reverse; animation-duration: 80s; }
.ytrail:hover .ytrow { animation-play-state: paused; }
.yt { display: block; width: 280px; text-decoration: none; color: var(--ink); }
.yt img { display: block; width: 280px; height: 158px; object-fit: cover; background: var(--band); }
.yt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font: 600 15.5px/1.35 var(--display); }
.yt:hover span { color: var(--accent); }
[data-still] .ytrow { animation: none; }
[data-still] .ytrail { overflow-x: auto; mask-image: none; }

@media (max-width: 980px) {
  .v6 .wrap.hero { grid-template-columns: 1fr !important; }
  .quote6 { justify-self: start; }
  .practices6 .cols { height: auto; min-height: 0; }
  .practices6 .col .detail { position: static; opacity: 1; transform: none; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; pointer-events: auto; }
  .practices6 .col .peek { display: none; }
  .engage6 .stage6 { min-height: 0; }
  .face6 { grid-template-columns: 1fr 1.2fr; }
  .zero5 .zgrid { grid-template-columns: 1fr; gap: 36px; }
  .zero5 .seal { max-width: 360px; }
  .zero5 .pts { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .zero5 .pts div { padding: 16px 0; border-top-width: 1px; }
  .yt6 .head { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 720px) {
  .band .figs6 > div { grid-template-columns: 1fr; gap: 6px; }
  .band .big6 .row { gap: 50px; } .band .big6 .row img { height: 44px; } .band .rail.below .row img { height: 30px; }
  .face6 { grid-template-columns: 1fr; }
  .face6 img { max-width: 260px; }
  .yt, .yt img { width: 220px; } .yt img { height: 124px; }
}

/* ===== Shared header (every page, including those without v5.css, e.g. the article) ===== */
.menu { all: unset; display: none; cursor: pointer; width: 44px; height: 44px; position: relative; }
.menu span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); transition: transform .3s, top .3s; }
.menu span:first-child { top: 17px; } .menu span:last-child { top: 26px; }
.site-head.open .menu span:first-child { top: 21px; transform: rotate(45deg); }
.site-head.open .menu span:last-child { top: 21px; transform: rotate(-45deg); }
.more-menu { position: relative; }
.more-menu summary { list-style: none; cursor: pointer; color: var(--ink-2); }
.more-menu summary::-webkit-details-marker { display: none; }
.more-menu summary:hover, .more-menu[open] summary { color: var(--ink); }
.more-menu .drop { position: absolute; z-index: 60; top: calc(100% + 20px); left: -22px; min-width: 210px; padding: 10px 0; }
.more-menu .drop a { display: block; padding: 10px 22px; font: 600 15.5px/1.2 var(--text); text-decoration: none; }
@media (max-width: 1180px) { .nav { gap: 22px; font-size: 15px; } }
@media (max-width: 1100px) { .nav { gap: 17px; } } /* five links + More since 19 Oct: keep clear of the logo */
@media (max-width: 1040px) { .nav { gap: 14px; font-size: 14.5px; } .nav .btn { padding: 11px 14px; } }
@media (max-width: 980px) {
  .menu { display: block; }
  .site-head .nav { display: none; }
  .site-head.open .nav { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; position: absolute; left: 0; right: 0; top: 92px;
    padding: 26px 24px 30px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 30px 40px -20px rgb(var(--ink-rgb) / .25); font-size: 18px; }
  .site-head.open .nav .more::after { content: ""; }
  .site-head.open .more-menu .drop { position: static; min-width: 0; padding: 14px 0 0 2px; background: none; border: 0; box-shadow: none; display: grid; gap: 16px; }
  .site-head.open .more-menu .drop a { padding: 0; font-size: 17px; }
  .foot .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .strap { font-size: 12.5px; line-height: 1.45; padding: 9px 16px; }
  .site-head .wrap { height: 72px; }
  .site-head .logo img { height: 26px; }
  .site-head.open .nav { top: 72px; }
  .foot .wrap { grid-template-columns: 1fr; gap: 30px; padding-top: 48px; }
}

/* ===== Article (the approved blog template): desktop exactly as approved; readable on tablets and phones ===== */
@media (max-width: 980px) {
  .article6 .post-body .wrap { grid-template-columns: 1fr; gap: 50px; }
  .article6 .aside { border-top: 2px solid var(--ink); padding-top: 22px; }
}
@media (max-width: 720px) {
  .article6 .post-head .wrap { padding-top: 40px; padding-bottom: 30px; }
  .article6 .post-head h1 { font-size: 32px; line-height: 1.12; }
  .article6 .byline { flex-wrap: wrap; row-gap: 10px; }
  .article6 .byline .meta { width: 100%; text-align: left; }
  .article6 .post-body .wrap { padding-top: 36px; padding-bottom: 60px; }
  .article6 .prose { font-size: 18px; line-height: 1.7; }
  .article6 .author-card { grid-template-columns: 1fr; }
  .article6 .reading ol li { grid-template-columns: 34px 1fr; }
  .article6 .reading a { font-size: 19px; }
}

/* the article header sits in a short section: let the More menu hang below it */
.desk.short { overflow: visible; position: relative; z-index: 50; }

/* ===== Euladox (standalone page) ===== */
.eula-hero .grid { min-height: clamp(420px, calc(100vh - 260px), 560px); }
.eula-mark { justify-self: end; width: min(100%, 520px); } /* the logo sits straight on the hero, no white card (owner, 19 Oct) */
.eula-mark img { display: block; width: 100%; height: auto; }
/* the module bar stays at the top while the page scrolls */
.subnav6 { position: sticky; top: var(--headh, 93px); z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.subnav6 .wrap { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; }
.subnav6 .wrap::-webkit-scrollbar { display: none; }
.subnav6 a { flex: none; padding: 18px 0 15px; border-bottom: 2px solid transparent; font: 600 13px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
.subnav6 a:hover, .subnav6 a.on { color: var(--ink); border-bottom-color: var(--accent); }
.subnav6 ~ section[id] { scroll-margin-top: 52px; }
.eula-sam, .eula-ad, .eula-sec { padding: 72px 0; }
.eula-sam, .eula-sec, .eula-help { background: var(--paper); }
.eula-hw { background: var(--surface); }
.eula-ad { background: var(--band); }
.eula-sam h2.t, .eula-ad h2.t, .eula-hw h2.t, .eula-help h2.t { margin-top: 14px; }
.sam-glance .lede5, .eula-sam .lede5, .eula-ad .lede5, .eula-sec .lede5, .eula-hw .lede5, .eula-help .lede5 { max-width: 46em; }
/* the six modules, each a link down the page */
.mods6 { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.mods6 a { display: grid; grid-template-columns: 46px 1fr; gap: 8px 0; height: 100%; box-sizing: border-box; padding: 24px 0 28px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.mods6 .n { grid-row: span 2; font: 600 15px/1.6 var(--label); letter-spacing: .08em; color: var(--accent); }
.mods6 b { font: 600 clamp(21px, 1.8vw, 25px)/1.2 var(--display); color: var(--ink); }
.mods6 .d { font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.mods6 a:hover b { color: var(--accent); }
/* labelled lists side by side */
.lists6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 50px; margin-top: 70px; }
.lists6.four { grid-template-columns: repeat(4, 1fr); margin-top: 56px; }
.lists6 h4 { margin: 0 0 6px; padding-top: 16px; border-top: 2px solid var(--ink); font: 600 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.lists6 ul { list-style: none; margin: 0; padding: 0; }
.lists6 li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.4; color: var(--ink-2); }
.lists6 p { margin: 10px 0 4px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
/* short feature lists */
.feat6 { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 36px; }
.feat6.three { grid-template-columns: repeat(3, 1fr); }
.feat6 li { padding: 18px 0 24px; border-top: 2px solid var(--ink); font: 600 19px/1.3 var(--display); color: var(--ink); }
.feat6 li span { display: block; margin-top: 8px; font: 400 16.5px/1.5 var(--text); color: var(--ink-2); }
.feat6.plain li { border-top: 1px solid var(--line); font-weight: 500; }
/* scan to licence position: four steps on one line */
.eula-sam h3.lbl { margin-top: 80px; }
.flow6 { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 36px; counter-reset: fl; }
.flow6 li { counter-increment: fl; position: relative; padding-top: 52px; }
.flow6 li::before { content: "0" counter(fl); position: absolute; top: 0; left: 0; font: 600 15px/1 var(--label); letter-spacing: .1em; color: var(--accent); }
.flow6 li::after { content: ""; position: absolute; top: 25px; left: 0; right: -36px; height: 10px;
  background: linear-gradient(var(--accent), var(--accent)) left center / 10px 10px no-repeat, linear-gradient(var(--line), var(--line)) center / 100% 2px no-repeat; }
.flow6 li:last-child::after { right: 0; }
.flow6 b { display: block; font: 600 24px/1.2 var(--display); color: var(--ink); }
.flow6 p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.eula-sam .rows, .eula-hw .rows { margin-top: 70px; }
.eula-sam .after6 { margin: 60px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font: 500 21px/1.45 var(--display); color: var(--ink); max-width: 40em; }
.eula-sam .after6 a, .sam-tiers .after6 a { color: var(--accent); }
.sam-tiers .after6 { margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font: 500 21px/1.45 var(--display); color: var(--ink); max-width: 40em; }
.sam-tiers .lede5 { max-width: 46em; }
/* asset repository, AD reports: words left, list right */
.repo6, .ad6 { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 80px; padding-top: 40px; border-top: 2px solid var(--ink); align-items: start; }
.repo6 h3, .ad6 h3 { margin: 0 0 16px; font: 600 clamp(26px, 2.4vw, 34px)/1.2 var(--display); color: var(--ink); }
.repo6 p, .ad6 p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.ad6 .same { margin-top: 24px; font: 500 21px/1.45 var(--display); color: var(--ink); }
.repo6 ul, .ad6 ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 36px; }
.repo6 li, .ad6 li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--line); font: 500 17px/1.35 var(--display); color: var(--ink); }
/* the CIS Controls */
.cis6 { list-style: none; margin: 50px 0 80px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; }
.cis6 li { padding-top: 22px; border-top: 2px solid var(--ink); }
.cis6 span { font: 600 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.cis6 b { display: block; margin-top: 14px; font: 600 clamp(22px, 2vw, 27px)/1.2 var(--display); color: var(--ink); }
.cis6 p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.eula-help .rows { margin-top: 56px; }
.eula-help .steps6 { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; counter-reset: st; }
.eula-help .steps6 li { counter-increment: st; padding: 14px 0 14px 40px; border-top: 1px solid var(--line); position: relative; font: 600 18px/1.35 var(--display); color: var(--ink); }
.eula-help .steps6 li::before { content: counter(st); position: absolute; left: 0; top: 14px; font: 600 15px/1.35 var(--label); color: var(--accent); }
@media (max-width: 980px) {
  .eula-hero .grid { min-height: 0; } .eula-mark { justify-self: start; width: min(100%, 420px); }
  .mods6, .lists6, .lists6.four, .feat6, .feat6.three, .flow6, .eula-help .steps6 { grid-template-columns: 1fr 1fr; }
  .flow6 li::after { right: 0; }
  .repo6, .ad6, .cis6 { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .eula-sam, .eula-ad, .eula-sec { padding: 80px 0; }
  .mods6, .lists6, .lists6.four, .feat6, .feat6.three, .flow6, .eula-help .steps6 { grid-template-columns: 1fr; }
  .repo6 ul, .ad6 ul { columns: 1; }
  .subnav6 .wrap { gap: 24px; }
}
.eula-hero .kicker { margin-top: 18px; }
.feat6.plain li { padding: 14px 0 18px; }

/* SAVE (client, changes p.8): the heading leads, the six questions sit smaller */
.v6 .save-qs h2.t { font-size: clamp(42px, 4.6vw, 66px) !important; max-width: 15em; }
.save-qs .qs .ask-list button { font-size: clamp(20px, 1.75vw, 26px); padding: 9px 0; }
.save-qs .qs .ans p { font-size: clamp(20px, 1.8vw, 25px); }

/* About: three people side by side (client, 17 Oct) */
.people .pair.three { grid-template-columns: repeat(3, 1fr); gap: 56px; }
.pair.three .person .portrait { width: 100%; max-width: 300px; height: 318px; }
.pair.three .person h3 { font-size: clamp(30px, 2.6vw, 38px); }
.pair.three .person dl div { grid-template-columns: 96px 1fr; }
@media (max-width: 980px) { .people .pair.three { grid-template-columns: 1fr; gap: 70px; } .pair.three .person .portrait { width: 250px; height: 266px; } }

/* Contact: the four ways to reach us on one row, then the rest */
.lines2.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .lines2.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .lines2.four { grid-template-columns: 1fr; } }
.talk-where .reach6 { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.talk-where .reach6 a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }

/* Contact: a plain labelled form (owner, 18 Oct: the sentence-style form read oddly) */
.talk-hero .grid { grid-template-columns: 1fr 1fr; align-items: start; }
.enq6 { background: var(--paper); border: 1px solid var(--line); padding: 36px 36px 32px; }
.enq6 .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.enq6 .fld { margin-bottom: 20px; }
.enq6 label { display: block; margin-bottom: 8px; font: 600 13px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.enq6 label i { margin-left: 6px; font: 500 13px/1 var(--text); letter-spacing: 0; text-transform: none; color: var(--mute); }
.enq6 input, .enq6 select, .enq6 textarea { display: block; width: 100%; box-sizing: border-box; height: 50px; margin: 0; padding: 0 14px; font: 400 17px/1.4 var(--text); color: var(--ink); background: var(--paper); border: 1px solid rgb(var(--ink-rgb) / .28); border-radius: 0; outline: none; transition: border-color .2s, box-shadow .2s; }
.enq6 textarea { height: auto; min-height: 128px; padding: 12px 14px; resize: vertical; }
.enq6 select { appearance: none; cursor: pointer; padding-right: 42px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F6973' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; }
.enq6 input:focus, .enq6 select:focus, .enq6 textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.enq6 [aria-invalid="true"] { border-color: var(--accent); }
.enq6 ::placeholder { color: var(--mute); }
.enq6 .err { margin: 8px 0 0; font: 600 14px/1.4 var(--text); color: var(--accent); }
.enq6 .send { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.enq6 .send span { font: 400 14px/1.5 var(--text); color: var(--mute); max-width: 24em; }
.enq6 .thanks { margin: 6px 0 0; font: 500 22px/1.4 var(--display); color: var(--ink); }
@media (max-width: 980px) { .talk-hero .grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .enq6 { padding: 24px 18px; } .enq6 .f2 { grid-template-columns: 1fr; } .enq6 .send { flex-direction: column; align-items: flex-start; gap: 12px; } }
.enq6 .send .btn { flex: none; white-space: nowrap; }

/* Red-pen line through a phrase (their August homepage, owner 18 Oct), in the palette red */
.redline { position: relative; white-space: nowrap; }
.redline::after { content: ""; position: absolute; left: -3%; right: -3%; top: 54%; height: max(3px, .075em); background: var(--accent);
  transform: rotate(-1.5deg) scaleX(1); transform-origin: left center; transition: transform .75s cubic-bezier(.65, 0, .25, 1); }
.redline.pending::after { transform: rotate(-1.5deg) scaleX(0); }

/* Hero: their renewal-quote document in its own format, exact colours (owner, 18 Oct; an exception to the palette) */
.quote6 { justify-self: end; width: min(100%, 500px); background: #FDFCF9; color: #1A1A2E; border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(11, 31, 72, .30); font: 400 14px/1.6 "IBM Plex Mono", ui-monospace, monospace; transform: rotate(.6deg); }
.quote6 .ts6-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; background: #0B1F48; color: #fff; font-size: 11.5px; letter-spacing: .16em; }
.quote6 .ts6-head span:last-child { color: #E8441A; font-weight: 600; }
.quote6 .ts6-body { padding: 26px 26px 22px; }
.quote6 .ts6-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed #D8D3C6; }
.quote6 .ts6-l { color: #5B5647; }
.quote6 .ts6-v { font-weight: 600; white-space: nowrap; }
.quote6 .ts6-struck { text-decoration: line-through; text-decoration-color: #E8441A; text-decoration-thickness: 2.5px; color: #8B8574; }
.quote6 .ts6-result { border-bottom: none; padding-top: 18px; }
.quote6 .ts6-result .ts6-l { color: #1A1A2E; font-weight: 600; }
.quote6 .ts6-result .ts6-v { color: #E8441A; font-size: 19px; font-weight: 600; }
.quote6 .ts6-stamp { display: inline-block; margin-top: 16px; padding: 6px 12px; border: 2px solid #E8441A; border-radius: 4px; color: #E8441A; font-size: 11px; letter-spacing: .14em; font-weight: 600; transform: rotate(-2deg); }
.quote6 .ts6-foot { padding: 12px 26px 20px; font-size: 11px; color: #9A947F; border-top: 1px solid #EAE6D9; }
@media (max-width: 980px) { .quote6 { justify-self: start; } }
@media (max-width: 720px) { .quote6 { transform: none; font-size: 13px; } .quote6 .ts6-body { padding: 20px 18px 18px; } .quote6 .ts6-head { padding: 12px 18px; font-size: 10.5px; } .quote6 .ts6-foot { padding: 12px 18px 18px; } }
@media (max-width: 720px) { .quote6 .ts6-head { font-size: 9.5px; letter-spacing: .1em; padding: 12px 16px; } .quote6 .ts6-head span { white-space: nowrap; } }

/* Case list: just publisher and industry on the right (owner, 18 Oct: the titles live on the left with the result) */
.v6 .cases5 .list button { display: flex; align-items: center; gap: 14px; padding: 15px 0; }
.v6 .cases5 .list button.on::before { content: ""; flex: none; width: 22px; height: 2px; margin: 0; background: var(--accent); }
.cases5 .ctags { display: flex; flex-wrap: wrap; gap: 8px; }
.cases5 .ctags i { font: 600 14px/1 var(--label); font-style: normal; letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px 6px; background: var(--band); color: var(--ink-2); transition: background .2s, color .2s; }
.cases5 .ctags i.pub { background: rgb(var(--accent-rgb) / .09); color: var(--accent); }
.cases5 .ctags i.pub.ai { background: var(--ink); color: var(--paper); }
.cases5 .list button:not(.on) .ctags i { opacity: .72; }
.cases5 .list button:hover .ctags i { opacity: 1; }
.cases5 .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Engagements: Sheshagiri's portrait beside every tab; the booking button belongs to Advisor on Call (tab 2) */
.engage6 .views6 { height: auto; min-height: 0; align-self: center; }
.engage6 .view6.face6 { position: relative; inset: auto; opacity: 1; }
.engage6 .face6 .book6 { visibility: hidden; opacity: 0; transition: opacity .3s; }
.engage6 .views6[data-tab="1"] .face6 .book6 { visibility: visible; opacity: 1; }
@media (max-width: 980px) { .engage6 .views6 { order: 0; margin: 40px 0 0; } }
@media (max-width: 720px) { .ytrail { width: calc(100% - 40px); } }
/* video thumbnails rest in black and white and come into colour on hover or focus (owner, 18 Oct) */
.yt img { filter: grayscale(1); transition: filter .35s; }
.yt:hover img, .yt:focus-visible img { filter: none; }

/* ===== Client changes, 19 Oct ("client changes.pdf") =====
   The homepage's three practice sections share the "Our three practices" format: Practice 01 Oracle License Management
   (.olm6, four engagements) and Practice 02 AI (.ai6, six services) use the same expanding columns as practices and
   publishers. The first and last columns carry the page margin as padding, so they also get it as extra width:
   every title gets the same room whichever column is open. */
.olm6, .ai6 { --edge: max(40px, calc((100vw - 1280px) / 2 + 40px)); }
.v6 .pubs .intro .kicker, .zero5 .say .kicker { margin-bottom: 14px; }
.olm6 .col:first-child, .ai6 .col:first-child { flex-basis: calc(var(--edge) - var(--gut)); }
.olm6 .col:last-child, .ai6 .col:last-child { flex-basis: calc(var(--edge) - var(--gut)); }
.olm6 .col:last-child .detail, .ai6 .col:last-child .detail { right: var(--edge); }
.olm6 { --gut: 36px; }
.olm6 .cols { height: min(76vh, 600px); min-height: 560px; }
.olm6 .col h3 { max-width: 9em; }
.olm6 .col:not(.on) h3 { font-size: clamp(22px, 1.65vw, 26px); } /* closed columns are 245px: "ULA Management" fits (owner, 19 Oct) */
.olm6 .col .detail { grid-template-columns: 1.2fr 1fr; gap: 34px; }
.olm6 .col .detail p { font: 400 17px/1.55 var(--text); color: var(--ink-2); }
.olm6 .col .detail ul { margin: 0 0 18px; }
.olm6 .col .detail li { font: 500 16px/1.4 var(--display); padding: 8px 0; border-top: 1px solid var(--line); }
.olm6 .after { padding-top: 40px; padding-bottom: 62px; }
.strip6 { display: grid; grid-template-columns: 104px 1fr auto; gap: 28px; align-items: center; }
.strip6 img { width: 104px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; mix-blend-mode: multiply; }
.strip6 .k { display: block; font: 600 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.strip6 b { display: block; font: 700 24px/1.1 var(--display); letter-spacing: -.015em; }
.strip6 p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 44em; }
.v6 .ai5.ai6 { display: block; }
.ai6 { --gut: 22px; }
.ai6 .aihead6 { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.ai6 .aihead6 .text { padding-bottom: 80px; }
.ai6 .cols { height: min(62vh, 480px); min-height: 460px; }
.ai6 .col { padding-top: 40px; padding-bottom: 40px; }
.ai6 .col:not(:first-child) { padding-left: var(--gut); }
.ai6 .col:not(:last-child) { padding-right: var(--gut); }
.ai6 .col:not(:first-child) .detail { left: var(--gut); }
.ai6 .col:not(:last-child) .detail { right: var(--gut); }
.ai6 .col.on { flex-grow: 1.8; }
.ai6 .col h3 { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.22; max-width: none; }
@media (max-width: 1200px) { .ai6 .col:not(.on) h3 { hyphens: auto; } }
.ai6 .col.on h3 { font-size: clamp(22px, 1.8vw, 26px); }
.ai6 .col.on { background: var(--paper); }
.ai6 .col .detail { grid-template-columns: 1fr; bottom: 40px; }
.ai6 .col .detail p { font: 400 17px/1.55 var(--text); color: var(--ink-2); max-width: 30em; }
.ai6 .after { padding-top: 34px; padding-bottom: 58px; }
.cases5 .listk6 { margin-bottom: 16px; }
.sam-platform .eula6 { justify-self: end; text-align: center; }
.sam-platform .eula6 p { margin: 18px 0 0; }
/* "We aren't." (homepage) and "We don't." (Why Rythium) in the brand red, no red-pen line (owner and client, 19 Oct) */
.say6 { color: var(--accent); white-space: nowrap; }
/* Why Rythium hero: the client's two-sides diagram replaces the 3D table (client, 19 Oct), in the site's ink and red */
.side6 { justify-self: end; align-self: center; width: min(100%, 520px); margin: 0; background: var(--paper); border: 1px solid var(--line); padding: 26px 28px 30px; }
.side6 figcaption { text-align: center; font: 600 15px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.side6-board { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.side6-col { display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 18px; padding: 24px 22px 28px; }
.side6-col + .side6-col { border-left: 3px solid var(--accent); }
.side6-h { font: 600 13px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.side6-stack { display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 100%; max-width: 190px; }
.side6-stack b { display: block; padding: 12px 10px; text-align: center; font: 600 16px/1.2 var(--display); color: var(--ink); background: var(--paper); border: 1.5px solid rgb(var(--ink-rgb) / .4); }
.side6-stack b.fill { background: var(--ink); border-color: var(--ink); color: #fff; }
.side6-stack b.red { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 980px) { .side6 { justify-self: start; margin-top: 36px; } }
@media (max-width: 420px) { .side6 { padding: 20px 16px 22px; } .side6-col { padding: 18px 12px 22px; } .side6-stack b { font-size: 15px; } }
@media (max-width: 980px) {
  .olm6 .cols, .ai6 .cols { height: auto; min-height: 0; }
  .olm6 .col, .ai6 .col { flex-basis: auto !important; }
  .olm6 .col .detail, .ai6 .col .detail { right: auto !important; }
  .olm6 .col .detail { grid-template-columns: 1fr; gap: 18px; }
  .ai6 .aihead6 { grid-template-columns: 1fr; }
  .ai6 .col, .ai6 .col:not(:first-child), .ai6 .col:not(:last-child) { padding: 28px 40px 30px; }
  .ai6 .col h3, .ai6 .col.on h3 { font-size: 24px; }
  .strip6 { grid-template-columns: 88px 1fr; }
  .strip6 img { width: 88px; }
  .strip6 .btn { grid-column: 1 / -1; justify-self: start; }
  .sam-platform .eula6 { justify-self: start; text-align: left; }
}
@media (max-width: 720px) {
  .ai6 .col, .ai6 .col:not(:first-child), .ai6 .col:not(:last-child) { padding: 26px 20px 28px; }
}

/* WhatsApp (owner, 19 Oct): a fixed button bottom right on every page, and on the contact page beside the form.
   Monochrome like every other button; the WhatsApp mark makes it recognisable without the green. */
.wa-float6 { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 7px 22px 7px 7px;
  border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none;
  box-shadow: 0 12px 32px rgb(0 0 0 / .24), 0 2px 6px rgb(0 0 0 / .14); transition: transform .25s, box-shadow .25s;
  animation: waIn6 .6s 1.2s backwards cubic-bezier(.2, .7, .2, 1); }
.wa-float6 .ico { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; transition: transform .25s; }
.wa-float6 .ico svg { width: 25px; height: 25px; fill: #fff; }
.wa-float6 .txt { display: flex; flex-direction: column; }
.wa-float6 small { font: 600 11.5px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .62); margin-bottom: 5px; }
.wa-float6 b { font: 600 16px/1.1 var(--text); color: #fff; }
.wa-float6:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgb(0 0 0 / .28), 0 3px 8px rgb(0 0 0 / .16); }
.wa-float6:hover .ico { transform: rotate(-8deg) scale(1.05); }
.wa-float6:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@keyframes waIn6 { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
[data-still] .wa-float6 { animation: none; }
.wa-line6 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
.wa-line6 span { font: 600 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.wa-line6 .btn { display: inline-flex; align-items: center; gap: 9px; }
.wa-line6 svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
@media (max-width: 720px) { .wa-float6 { right: 14px; bottom: 14px; gap: 10px; padding: 6px 16px 6px 6px; } .wa-float6 .ico { width: 40px; height: 40px; }
  .wa-float6 .ico svg { width: 22px; height: 22px; } .wa-float6 small { display: none; } .wa-float6 b { font-size: 14.5px; } }
@media print { .wa-float6 { display: none; } }

/* Homepage order fixed (owner, 19 Oct): Practice 01 Oracle, 02 AI, 03 SAM, then $0. Backgrounds keep alternating:
   Oracle white, AI grey, SAM white (open column in the light surface, as in "Our three practices"), $0 grey with a
   white seal. */
.v6 #publishers.pubs { background: var(--paper); }
.v6 #publishers .col.on { background: var(--surface); }
.v6 .zero5 { background: var(--band); }
.v6 .zero5 .seal { background: var(--paper); }

/* Homepage AI section: the client's "four patterns" replace the chart (client, 19 Oct), in Ledger colours. The
   highlighted card turns ink; home6.js steps it 01 > 02 > 03 > 04 while the section is in view. */
.ai5 .board.drain6 { flex-direction: column; align-items: stretch; justify-content: center; }
.v6 .drain6-t { margin: 0 0 22px; font: 600 16px/1.25 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.drain6-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.drain6-grid li { position: relative; background: var(--surface); border: 1px solid var(--line); padding: 20px 22px 22px 24px;
  transition: background .45s, border-color .45s, transform .45s, box-shadow .45s; }
.drain6-grid li::before { content: ""; position: absolute; left: -1px; top: 20px; width: 3px; height: 34px; background: var(--accent); }
.drain6-grid .n { display: block; font: 700 34px/1 var(--display); letter-spacing: -.02em; color: var(--accent); transition: color .45s; }
.drain6-grid .drop { position: absolute; right: 20px; top: 22px; width: 16px; height: 16px; fill: var(--accent); }
.drain6-grid b { display: block; margin: 14px 0 8px; font: 700 18px/1.2 var(--display); color: var(--ink); transition: color .45s; }
.drain6-grid p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); transition: color .45s; }
.drain6-grid li.on { background: var(--ink); border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 14px 30px rgb(0 0 0 / .18); }
.drain6-grid li.on .n, .drain6-grid li.on b { color: #fff; }
.drain6-grid li.on p { color: rgb(255 255 255 / .8); }
[data-still] .drain6-grid li, [data-still] .drain6-grid li * { transition: none; }
@media (max-width: 560px) { .drain6-grid { grid-template-columns: 1fr; } }

/* Oracle page, ULA section: "ULA Optimization | [ULA Certification][ULA Renewal]" (client, 19 Oct). A two-button
   switch in the site's monochrome: the shown panel's button is filled ink, the other outlined. */
.ulatabs6 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } /* label on top, switch below (owner, 19 Oct) */
.ulatabs6 .kicker { margin: 0; }
.ulatabs6 .bar6 { display: none; }
.seg6 { display: inline-flex; border: 1.5px solid var(--ink); }
.seg6 button { all: unset; cursor: pointer; padding: 10px 18px; font: 600 14px/1 var(--label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: transparent; transition: background .25s, color .25s; }
.seg6 button + button { border-left: 1.5px solid var(--ink); }
.seg6 button[aria-selected="true"] { background: var(--ink); color: #fff; }
.seg6 button:not([aria-selected="true"]):hover { background: rgb(var(--ink-rgb) / .08); }
.seg6 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sig-ula .ulapanel6 > .wrap:first-child > h2.t { margin-top: 26px; }
.sig-ula .qs6 h3.lbl { margin: 4px 0 6px; }
.sig-ula .two > .qs6 > p { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); font: 500 18px/1.4 var(--display); color: var(--ink); }
#ula-renew .two { margin-top: 10px; }
@media (max-width: 720px) { .seg6 button { padding: 10px 12px; font-size: 13px; letter-spacing: .1em; } }

/* Advisor on Call board: the 20 / 40 hours switch was nearly invisible (its selected colour came from a variable
   that is a light grey in Ledger). Same look as the ULA switch now: selected filled ink, the other outlined. */
.v6 .sig-split .switch { border: 1.5px solid var(--ink); border-radius: 0; }
.v6 .sig-split .switch button { color: var(--ink); background: transparent; transition: background .25s, color .25s; }
.v6 .sig-split .switch button + button { border-left: 1.5px solid var(--ink); }
.v6 .sig-split .switch button.on { background: var(--ink); color: #fff; }
.v6 .sig-split .switch button:not(.on):hover { background: rgb(var(--ink-rgb) / .08); }

/* Oracle page, Java section at medium/low motion (.still, the only mode since motion was locked to Medium): the
   payroll grid filled the whole section and sat on the copy. The drawing now takes the right half on desktop and
   its own band above the copy on phones and tablets (owner, 19 Oct). */
/* Desktop: two columns; the drawing stays in view (sticky) beside the long copy instead of stretching over the
   whole tall section, which left a blank area under its legend (owner, 19 Oct). */
.sig-java.still { --edge: max(40px, calc((100vw - 1280px) / 2 + 40px)); display: grid; align-items: start; overflow: visible;
  grid-template-columns: calc(var(--edge) + min(470px, 40vw)) minmax(0, 1fr); column-gap: 40px; }
.sig-java.still .copy { grid-column: 1; grid-row: 1; left: 0; padding-left: var(--edge); width: auto; }
.sig-java.still canvas { grid-column: 2; grid-row: 1; inset: auto; position: sticky; top: 12vh; width: 100%; height: 70vh; }
@media (max-width: 980px) {
  .sig-java.still { padding-top: 0; display: block; }
  .sig-java.still canvas { position: relative; inset: auto; top: auto; display: block; width: 100%; height: 380px; }
  .sig-java.still .copy { width: auto; left: auto; right: auto; bottom: auto; padding: 30px 40px 0; }
}
@media (max-width: 720px) { .sig-java.still canvas { height: 250px; } .sig-java.still .copy { padding: 4px 20px 0; } }
/* Less air between the Java figures and "What the defense covers": 260px down to about 120 (owner, 19 Oct) */
.sig-java.still { padding-bottom: 40px; }
.sig-java.still .step:last-child { margin-bottom: 0; }
.sig-java.still + .sig-more.white { padding-top: 0; }

/* Managed SAM loop: labels sit outside the ring and read away from it (sam.js sets data-side), 19 Oct */
.cycle li[data-side="r"] { transform: translate(0, -50%); text-align: left; }
.cycle li[data-side="l"] { transform: translate(-100%, -50%); text-align: right; }
.cycle li[data-side="t"] { transform: translate(-50%, -100%); }
.cycle li[data-side="b"] { transform: translate(-50%, 0); }

/* Managed SAM, "What we discover": four list columns like the Euladox page (19 Oct) */
.lists6.disc6 { margin-top: 22px; }
.lists6 .note6 { margin-top: 12px; font-size: 14.5px; color: var(--mute); }

/* About: a professional opening in the same style as the other page heroes (19 Oct). No animation. */
.about-hero7 { background: var(--band); position: relative; overflow: hidden; }
.about-hero7::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 640px at 76% 52%, rgb(var(--ink-rgb) / .06), transparent 70%); }
.about-hero7 .grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; gap: 64px; align-items: center; padding: 34px 40px 80px; }
.about-hero7 h1 { font: 600 clamp(40px, 3.3vw, 52px)/1.06 var(--display); letter-spacing: -.02em; color: var(--ink); margin: 20px 0 22px; text-wrap: balance; }
.about-hero7 .lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; max-width: 33em; }
.about-hero7 .actions { display: flex; align-items: center; gap: 30px; margin-top: 30px; }
.pull7 { background: var(--paper); border-top: 3px solid var(--accent); padding: 34px 36px 30px; box-shadow: 0 18px 44px rgb(0 0 0 / .07); }
.pull7 p { margin: 14px 0 26px; font: 600 clamp(24px, 2.2vw, 30px)/1.25 var(--display); letter-spacing: -.012em; color: var(--ink); }
.pull7 dl { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); } /* four figures, 2 x 2 (owner, 19 Oct) */
.pull7 dt { font: 600 12.5px/1.2 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pull7 dd { margin: 8px 0 0; font: 600 44px/1 var(--label); color: var(--ink); }
.pull7 dd.z { color: var(--accent); }
.why7 { background: var(--surface); padding: 58px 0 84px; }
.why7 .cols7 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; margin-top: 26px; }
.why7 .cols7 > div { border-top: 2px solid var(--ink); padding-top: 22px; }
.why7 .n { display: block; margin-bottom: 14px; font: 600 15px/1 var(--label); letter-spacing: .14em; color: var(--accent); }
.why7 h2 { margin: 0 0 12px; font: 600 clamp(22px, 1.9vw, 26px)/1.22 var(--display); letter-spacing: -.012em; color: var(--ink); }
.why7 p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 980px) {
  .about-hero7 .grid { grid-template-columns: 1fr; gap: 36px; padding: 28px 40px 64px; }
  .why7 .cols7 { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 720px) {
  .about-hero7 .grid { padding: 22px 20px 50px; }
  .about-hero7 h1 { font-size: 36px; }
  .pull7 { padding: 26px 22px 24px; }
  .why7 { padding: 64px 0 56px; }
}

/* The site header stays at the top of every page (owner, 19 Oct). It now sits directly in <body>, so sticky works
   for the whole page; nav.js keeps --headh at its real height. The Euladox module bar sticks right below it, and
   in-page links land below both. */
body > .site-head { position: sticky; top: 0; z-index: 80; } /* about and article pages have no .v6 class */
html { scroll-padding-top: calc(var(--headh, 93px) + 14px); }
html:has(.subnav6) { scroll-padding-top: calc(var(--headh, 93px) + 63px); }

/* About, the rest of the page (owner, 19 Oct: "the redesign shall apply to the whole about page, better
   presentation, clean"): the principals as three even columns with same-size portraits; the record as one row of
   five figures. */
.people.p7 { padding: 65px 0 62px; }
.people.p7 .pair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 50px; }
.people.p7 .person .portrait { width: 100%; max-width: 350px; height: auto; aspect-ratio: 1 / 1; } /* the photos are 350px wide: no upscaling */
.people.p7 .person .role { margin-top: 22px; font-size: 13px; }
.people.p7 .person h3 { font-size: clamp(28px, 2.4vw, 34px); margin-bottom: 14px; }
.people.p7 .person p { font-size: 17px; line-height: 1.6; }
.people.p7 .person dl div { grid-template-columns: 96px 1fr; font-size: 15.5px; }
/* Desktop: the three columns share one grid, so the role, name, bio and each fact line sit at the same height in
   every column (owner, 19 Oct: "make it linear"). Narrower screens keep the simple stacked flow. */
@media (min-width: 981px) {
  .people.p7 .pair { row-gap: 0; }
  .people.p7 .person { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .people.p7 .person dl { display: contents; }
  .people.p7 .person dl > div:first-child { margin-top: 24px; }
}
.people.p7 .bio p:last-child { margin-bottom: 0; }
.people.p7 .together { max-width: none; margin-top: 70px; padding-top: 30px; font-size: clamp(22px, 2vw, 27px); }
.record7 { background: var(--band); padding: 62px 0 58px; }
.stats7 { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 26px; border-top: 2px solid var(--ink); }
.stats7 > div { padding: 26px 20px 4px 0; }
.stats7 > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.stats7 b { display: block; font: 600 clamp(48px, 4.6vw, 68px)/.95 var(--label); letter-spacing: -.01em; color: var(--ink); }
.stats7 b.z { color: var(--accent); }
.stats7 span { display: block; margin-top: 12px; font: 600 13px/1.3 var(--label); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.where7 { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 50px; margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line); }
.where7 .k { display: block; margin-bottom: 12px; font: 600 13px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.where7 p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 980px) {
  .people.p7 .pair { grid-template-columns: 1fr 1fr; gap: 48px 36px; }
  .stats7 { grid-template-columns: repeat(3, 1fr); }
  .stats7 > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .where7 { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .people.p7 { padding: 64px 0 60px; }
  .people.p7 .pair { grid-template-columns: 1fr; gap: 54px; }
  .people.p7 .person .portrait { max-width: 340px; }
  .record7 { padding: 64px 0 60px; }
  .stats7 { grid-template-columns: 1fr 1fr; }
  .stats7 > div { padding: 22px 12px 4px 0; }
  .stats7 > div + div { padding-left: 0; border-left: 0; }
  .stats7 > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .stats7 b { font-size: 46px; }
}

/* Case studies: the case labels pinned under the header, like the Euladox module bar, once the index in the hero has
   scrolled away (cases.js adds .show and marks the case in view). Fixed, so the page never jumps (client, 19 Oct). */
.case-bar6 { position: fixed; top: var(--headh, 93px); left: 0; right: 0; z-index: 40; background: var(--paper);
  border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
.case-bar6.show { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
.case-bar6 .wrap { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; }
.case-bar6 .wrap::-webkit-scrollbar { display: none; }
.case-bar6 a { flex: none; padding: 18px 0 15px; border-bottom: 2px solid transparent; font: 600 13px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
.case-bar6 a:hover, .case-bar6 a.on { color: var(--ink); border-bottom-color: var(--accent); }
html:has(.case-bar6) { scroll-padding-top: calc(var(--headh, 93px) + 66px); }
@media (max-width: 720px) { .case-bar6 .wrap { gap: 24px; } }

/* Section labels in red, like the kickers (client, 20 Oct, on Managed SAM's "What we discover": "in red?"; all of
   them, so they stay alike) */
.service h3.lbl, .sam-scan h3.lbl, .sig-ula h3.lbl { color: var(--accent); }
/* AI Procurement: the names sit right under the figures, in the same columns (client, 20 Oct: "move the names up,
   also less space") */
.figs3 + .clips { margin-top: 26px; }
.figs3 + .clips > div { padding-top: 16px; }
@media (min-width: 981px) { .figs3 + .clips { grid-template-columns: 1.2fr 1fr 1fr; } }