/* Flex Consulting site styles. Tokens and rationale: research/design-direction.md */

/* Archivo, self-hosted and preloaded so the headline does not reflow when the font arrives.
   The fallbacks are Arial scaled to Archivo's metrics (wide one for headings) to keep any swap small. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-stretch: 100% 125%; font-display: swap; src: url(/fonts/archivo-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-stretch: 100% 125%; font-display: swap; src: url(/fonts/archivo-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 98.8%; ascent-override: 89%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Wide Fallback"; src: local("Arial"); size-adjust: 124%; ascent-override: 71%; descent-override: 17%; line-gap-override: 0%; }

:root {
  --ink: #0F2438;
  --ink-2: #1B3550;
  --slate: #44566A;
  --mist: #EEF2F5;
  --rule: #D3DBE3;
  /* Brand colours, exactly as in the official logo files (research/logos/flex-brand-vector): the X is a gradient from
     #F69321 (top-left) to #FCDF07 (bottom-right). Use --brand-grad wherever a fill can take a gradient and
     --brand-orange where it cannot. --orange-deep is the brand orange darkened only for small text on light backgrounds,
     where the brand orange itself is 2.3:1 against the paper tone. Small body text never uses it. */
  --brand-orange: #F69321;
  --brand-yellow: #FCDF07;
  --brand-grad: linear-gradient(139deg, #F69321, #FCDF07);
  --orange: var(--brand-orange);
  --orange-deep: #D6801D; /* brand orange darkened to 3:1 on white: large/bold accents only (plus signs, arrows, hover headings) */
  --paper: #FFFFFF;
  --on-ink: #FFFFFF;
  --on-ink-soft: #B9C6D3;

  --font: "Archivo", "Archivo Fallback", Arial, sans-serif;
  --font-wide: "Archivo", "Archivo Wide Fallback", Arial, sans-serif;
  --wide: 116;

  --s-0: 0.875rem;
  --s-1: 1.0625rem;
  --s-2: 1.3125rem;
  --s-3: 1.6875rem;
  --s-4: clamp(1.75rem, 1.2rem + 1.6vw, 2.125rem);
  --s-5: clamp(2rem, 1.3rem + 2.2vw, 2.625rem);
  --s-6: clamp(2.25rem, 1.2rem + 3.4vw, 3.5rem);
  --s-hero: clamp(2.5rem, 1rem + 4.6vw, 5.25rem);

  --gutter: clamp(16px, 4vw, 64px);
  --max: 1520px;
  --measure: 68ch;
  --section: clamp(64px, 8vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--font);
  font-size: var(--s-1);
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  font-feature-settings: "tnum" 1;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink); text-decoration-color: var(--brand-orange); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4, .btn {
  font-family: var(--font-wide);
}
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 620;
  font-variation-settings: "wdth" var(--wide);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--s-6); }
h2 { font-size: var(--s-5); }
h3 { font-size: var(--s-3); line-height: 1.2; }
h4 { font-size: var(--s-2); line-height: 1.25; }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: 0.35em; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: var(--on-ink-soft); }
.section--ink h2, .section--ink h3 { color: var(--on-ink); }
.section--ink a { color: var(--on-ink); }
.lead { font-size: var(--s-2); line-height: 1.5; color: var(--ink-2); }
.section--ink .lead { color: var(--on-ink-soft); }
.muted { color: var(--slate); font-size: var(--s-0); }

/* Section heading row: title left, intro right on wide screens */
.head-row { display: grid; gap: 16px 64px; margin-bottom: clamp(32px, 4vw, 56px); }
.head-row h2 { margin: 0; max-width: 16ch; }
.head-row p { margin: 0; align-self: end; }
@media (min-width: 900px) { .head-row { grid-template-columns: 5fr 7fr; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 4px;
  font: inherit; font-weight: 600; font-variation-settings: "wdth" 108;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  line-height: 1.2;
}
.btn--primary { background: var(--brand-grad); background-origin: border-box; color: var(--ink); } /* border-box: the 2px transparent border would otherwise show the gradient repeating (yellow on the left edge, orange on the right) */
.btn--primary:hover { background: var(--brand-grad); background-origin: border-box; color: var(--ink); filter: brightness(1.05); }
.btn--ghost { border-color: currentColor; color: var(--ink); }
.section--ink .btn--ghost, .hero .btn--ghost { color: var(--on-ink); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); color: inherit; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

/* Header */
.site-header { background: var(--ink); color: var(--on-ink); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,0.08); }
.site-header .wrap { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--on-ink); text-decoration: none; }
.wm { display: inline-flex; align-items: center; line-height: 0; color: var(--on-ink); }
.wm svg { height: 26px; width: auto; display: block; }
@media (min-width: 900px) { .wm svg { height: 28px; } }
.site-footer .wm svg { height: 30px; }
.nav { margin-left: auto; display: none; gap: 28px; align-items: center; }
.nav a { color: var(--on-ink); text-decoration: none; font-weight: 500; font-size: 0.9875rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--orange); color: var(--on-ink); }
.nav .btn { padding: 10px 18px; border-bottom: 2px solid transparent; }
.nav .btn:hover { border-bottom-color: transparent; }
.nav .btn--primary, .nav .btn--primary:hover { color: var(--ink); } /* white on orange is 2.96:1 (Lighthouse, 21 Oct 2026) */
.menu-toggle { margin-left: auto; background: none; border: 1px solid rgba(255,255,255,0.3); color: var(--on-ink); border-radius: 4px; padding: 8px 14px; font: inherit; font-weight: 600; }
.mobile-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink); border-top: 1px solid rgba(255,255,255,0.1); padding: 8px var(--gutter) 24px; box-shadow: 0 24px 48px rgba(6, 18, 30, 0.45); max-height: calc(100vh - 72px); overflow-y: auto; }
.mobile-nav a { display: block; color: var(--on-ink); text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-weight: 500; }
.site-header[data-open="true"] .mobile-nav { display: block; }
@media (min-width: 1000px) { .nav { display: flex; } .menu-toggle, .mobile-nav, .site-header[data-open="true"] .mobile-nav { display: none; } }

/* Hero */
.hero { background: var(--ink); color: var(--on-ink-soft); position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; padding-top: clamp(56px, 9vw, 140px); padding-bottom: clamp(64px, 9vw, 140px); }
.hero h1 { color: var(--on-ink); font-size: var(--s-hero); font-weight: 640; line-height: 1.02; letter-spacing: -0.025em; max-width: 13ch; margin-bottom: 0.45em; }
.hero h1 .line { display: block; }
.hero .lead { color: var(--on-ink-soft); max-width: min(56ch, 50vw); margin-bottom: 36px; }
@media (max-width: 899px) { .hero .lead { max-width: 56ch; } }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-x { position: absolute; right: -6vw; top: 50%; transform: translateY(-50%); width: min(62vw, 880px); height: auto; }
.hero-x path { transform-box: fill-box; transform-origin: center; }
.hero-x .stroke-a { fill: url(#flex-grad); } /* 21 Oct 2026: both strokes gradient, as in the logo files. Roll back: fill: #24425F (copy in research/rollback-2026-10-21-two-tone-x) */
.hero-x .stroke-b { fill: url(#flex-grad); }
/* Phones: the X becomes a full-bleed poster above the headline, cropped by the screen edges */
@media (max-width: 899px) {
  .hero-art { position: relative; inset: auto; height: 84vw; max-height: 560px; }
  .hero-x { width: 140vw; max-width: none; left: -2vw; right: auto; top: -18vw; transform: none; }
  .hero .wrap { padding-top: 8px; text-align: center; }
  .hero h1, .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .actions { flex-direction: column; align-items: center; }
  .hero .actions .btn { min-width: 260px; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-x .stroke-a { animation: draw-a 900ms cubic-bezier(.2,.7,.2,1) both; }
  .hero-x .stroke-b { animation: draw-b 900ms 350ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes draw-a { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes draw-b { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
}

/* Page hero (inner pages) */
.page-hero { background: var(--ink); color: var(--on-ink-soft); }
.page-hero .wrap { padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(48px, 6vw, 88px); display: grid; gap: 32px; }
.page-hero h1 { color: var(--on-ink); max-width: 20ch; font-size: var(--s-6); }
.page-hero .lead { color: var(--on-ink-soft); max-width: 60ch; }
.crumbs { font-size: var(--s-0); color: var(--on-ink-soft); margin-bottom: 20px; }
.crumbs a { color: var(--on-ink-soft); }
.page-hero .meta { font-size: var(--s-0); color: var(--on-ink-soft); margin-top: 20px; }

/* Clients: sentence for people and crawlers, logo marquee for the eye */
.clients { border-bottom: 1px solid var(--rule); padding: 36px 0 40px; overflow: hidden; }
.clients h2 { font-family: var(--font); font-size: var(--s-1); font-weight: 500; font-variation-settings: "wdth" 100; color: var(--slate); letter-spacing: 0; line-height: 1.5; max-width: 80ch; margin: 0 auto 28px; text-align: center; }
.marquee { display: flex; width: max-content; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(48px, 6vw, 96px); padding-right: clamp(48px, 6vw, 96px); }
.marquee-track li { margin: 0; flex: none; display: flex; align-items: center; height: 56px; }
/* One ink tone for every logo (several source files are white-only); heights tuned by eye so they read at the same size */
.marquee-track img { height: 40px; width: auto; filter: brightness(0) invert(11%) sepia(30%) saturate(1400%) hue-rotate(182deg) brightness(92%); opacity: 0.78; }
.marquee-track .foodstuffs-ni img { height: 24px; }
.marquee-track .foodstuffs-si img { height: 46px; }
.marquee-track .skycity img { height: 42px; }
.marquee-track .craigs img { height: 36px; }
.marquee-track .contact-energy img { height: 40px; }
.marquee-track .chorus img { height: 17px; }
.marquee-track .nz-health-group img { height: 46px; }
.marquee-track .uoa img { height: 54px; }
.marquee-track .mercury img { height: 38px; }
.marquee-track span { font-weight: 600; color: var(--ink); white-space: nowrap; font-variation-settings: "wdth" 108; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-100%); } }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { width: auto; justify-content: center; padding: 0 var(--gutter); mask-image: none; }
  .marquee-track { flex-wrap: wrap; justify-content: center; gap: 24px 48px; padding: 0; }
  .marquee-track[aria-hidden] { display: none; }
}

/* Service index: rows, not cards */
.index { border-top: 2px solid var(--ink); }
.index-row { display: grid; gap: 8px 48px; padding: 28px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; position: relative; }
.index-row h3 { margin: 0; font-size: var(--s-3); }
.index-row p { margin: 0; }
.index-row .go { font-weight: 600; color: var(--ink); white-space: nowrap; }
a.index-row:hover h3 { color: var(--orange-deep); }
a.index-row:hover .go { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
@media (min-width: 900px) { .index-row { grid-template-columns: minmax(260px, 4fr) 6fr 2fr; align-items: baseline; } .index-row .go { justify-self: end; } }

/* Engagement steps: a real sequence */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: step; }
.team { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
@media (min-width: 760px) { .team { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; } }
@media (min-width: 1100px) { .team { grid-template-columns: repeat(5, 1fr); gap: 40px; } }
.team-card { margin: 0; }
.team-card img, .team-initials { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius, 8px); background: var(--mist); margin-bottom: 18px; }
.team-initials { display: grid; place-items: center; font-size: var(--s-4, 2rem); font-weight: 650; color: #fff; background: var(--ink); }
.team-card h3 { font-size: var(--s-1, 1.15rem); margin: 0 0 0.2em; }
.team-card p { margin: 0 0 0.5em; font-size: 0.95rem; }
.team-role { color: var(--orange-deep, #AA6517); font-weight: 600; }
.team-card a { overflow-wrap: anywhere; }
.steps li { counter-increment: step; padding: 28px 0 8px; border-top: 2px solid var(--ink); position: relative; margin: 0; }
.steps li::before { content: counter(step); display: block; font-size: var(--s-5); font-weight: 650; color: var(--orange); font-variation-settings: "wdth" 120; line-height: 1; margin-bottom: 14px; }
.steps h3 { font-size: var(--s-2); margin-bottom: 0.4em; }
.steps p { font-size: 1rem; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(5, 1fr); column-gap: 32px; } }

/* Industries: text blocks divided by rules */
.blocks { display: grid; gap: 0 48px; }
.block { padding: 28px 0; border-top: 1px solid var(--rule); }
.block h3 { font-size: var(--s-2); }
.block p { font-size: 1rem; }
.block .tags { font-size: var(--s-0); color: var(--ink-2); margin: 0; }
@media (min-width: 760px) { .blocks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .blocks { grid-template-columns: repeat(3, 1fr); } }

/* Case study panels */
.cases { display: grid; gap: 24px; }
.case { display: grid; gap: 24px 48px; padding: clamp(24px, 3vw, 40px); background: var(--paper); border-left: 4px solid var(--orange); }
.case h3 { margin: 0 0 8px; }
.case dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 1rem; }
.case dt { color: var(--ink); font-weight: 600; }
.case dd { margin: 0; }
.case .status { font-size: var(--s-0); color: var(--slate); margin: 12px 0 0; }
@media (min-width: 1000px) { .case { grid-template-columns: 5fr 7fr; } }
.case h3 a { color: inherit; text-decoration: none; }
.case h3 a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
/* Case study pages */
.case--page { align-items: start; }
.case-big { margin: 0 0 24px; display: grid; gap: 4px; }
.case-big .big { font-family: var(--font-wide); font-weight: 650; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 1; color: var(--ink); }
.case-big .small { color: var(--slate); }
.case--page .prose h2 { font-size: var(--s-2); margin: 0 0 8px; }
.case--page .prose h2 + p { margin: 0 0 28px; }
.case--page .prose ul { margin: 0 0 28px; padding-left: 1.2em; }
.case--page .prose li { margin-bottom: 8px; }
.case--page .case-facts h2.facts-h { font-family: var(--font); font-variation-settings: "wdth" 100; font-weight: 700; color: var(--ink); line-height: 1.4; font-size: var(--s-0); text-transform: uppercase; letter-spacing: 0.06em; margin: 28px 0 10px; }
.case-facts ul { margin: 0; padding-left: 1.2em; font-size: 1rem; }
.case-facts li { margin-bottom: 6px; }
.case-facts .used { list-style: none; padding: 0; }
@media (min-width: 1000px) { .case-facts { position: sticky; top: 96px; } }
.case-img { margin: 0 0 32px; }
.case-img img { display: block; width: 100%; height: auto; border-radius: var(--radius, 8px); background: var(--mist); }
.case--page blockquote { margin: 8px 0 0; padding-left: 20px; border-left: 3px solid var(--orange); font-size: var(--s-1); }
.case--page blockquote p { margin: 0 0 14px; }
.case--page blockquote footer { font-size: 1rem; color: var(--slate); }
.case--page blockquote cite { font-style: normal; font-weight: 700; color: var(--ink); }

/* Platforms */
.split { display: grid; gap: 40px 64px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.platform { border-top: 2px solid var(--ink); padding-top: 24px; }
.platform h3 { margin-bottom: 0.3em; }
.platform .when { color: var(--ink-2); font-weight: 600; }

/* Long-form service page body */
.doc { display: grid; gap: 48px 72px; }
@media (min-width: 1100px) { .doc { grid-template-columns: minmax(0, 8fr) minmax(260px, 3fr); } }
.doc-main > section { padding: 0 0 clamp(40px, 5vw, 64px); }
.doc-main > section + section { border-top: 1px solid var(--rule); padding-top: clamp(40px, 5vw, 64px); }
.doc-main h2 { font-size: var(--s-4); max-width: 24ch; }
.aside { align-self: start; position: sticky; top: 104px; display: grid; gap: 24px; }
.aside nav { border-top: 2px solid var(--ink); padding-top: 16px; }
.aside nav p { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.aside nav ol { list-style: none; padding: 0; margin: 0; }
.aside nav a { display: block; padding: 6px 0; text-decoration: none; color: var(--slate); font-size: 0.9875rem; }
.aside nav a:hover { color: var(--ink); }
.contact-card { background: var(--ink); color: var(--on-ink-soft); padding: 24px; }
.contact-card h2 { color: var(--on-ink); font-size: var(--s-2); }
.contact-card p { font-size: 1rem; }
.contact-card a:not(.btn) { color: var(--on-ink); }
@media (max-width: 1099px) { .aside { position: static; } .aside nav { display: none; } }

.pairs { display: grid; gap: 0 40px; }
@media (min-width: 760px) { .pairs { grid-template-columns: 1fr 1fr; } }
.pair { padding: 20px 0; border-top: 1px solid var(--rule); }
.pair h3 { font-size: var(--s-2); margin-bottom: 0.35em; }
.pair p { font-size: 1rem; margin: 0; }

.callout { background: var(--mist); padding: clamp(24px, 3vw, 40px); border-left: 4px solid var(--ink); }
.callout p:last-child { margin-bottom: 0; }

.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-weight: 600; color: var(--ink); font-size: var(--s-2); font-variation-settings: "wdth" 108; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.75rem; font-weight: 400; color: var(--orange-deep); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 20px; }

/* Closing ask */
.ask .wrap { display: grid; gap: 32px 64px; }
.ask h2 { max-width: 18ch; }
.ask .direct { display: grid; gap: 4px; align-content: start; font-size: var(--s-2); }
.ask .direct a { text-decoration: none; color: var(--on-ink); font-weight: 600; }
.ask .direct a:hover { color: var(--orange); }
@media (min-width: 900px) { .ask .wrap { grid-template-columns: 7fr 5fr; align-items: end; } }

/* Forms */
.form { display: grid; gap: 20px; max-width: 720px; }
.form .row { display: grid; gap: 20px; }
@media (min-width: 640px) { .form .row { grid-template-columns: 1fr 1fr; } }
.form label { display: grid; gap: 6px; font-weight: 600; color: var(--ink); font-size: 0.9875rem; }
.form label small { font-size: inherit; font-weight: 400; color: var(--slate); }
.form input, .form textarea, .form select { font: inherit; font-weight: 400; color: var(--ink); padding: 12px 14px; border: 1px solid #9AA8B6; border-radius: 4px; background: var(--paper); width: 100%; }
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-ink-soft); border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.9875rem; }
.site-footer .wrap { padding-top: 56px; padding-bottom: 40px; display: grid; gap: 40px; }
.site-footer h2 { font-size: 1rem; color: var(--on-ink); font-variation-settings: "wdth" 108; margin-bottom: 12px; letter-spacing: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--on-ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--on-ink); text-decoration: underline; }
.site-footer .social { display: flex; gap: 10px; margin-top: 18px; }
.site-footer .social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.22); border-radius: 6px; color: var(--on-ink); }
.site-footer .social a:hover { border-color: var(--orange); color: var(--orange); }
.site-footer .social svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer .legal { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--s-0); }
@media (min-width: 900px) { .site-footer .cols { display: grid; grid-template-columns: 4fr 2fr 2fr 2fr 2fr; gap: 40px; } }
.site-footer .cols { display: grid; gap: 32px; }

/* Staging only: unconfirmed claims */
.tbc { text-decoration: underline dotted var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.2em; cursor: help; }
.staging-bar { background: #FFF4E8; color: var(--ink); font-size: var(--s-0); padding: 8px var(--gutter); text-align: center; }

/* Steps inside the narrower service-page column */
@media (min-width: 700px) { .steps--doc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .steps--doc { grid-template-columns: repeat(2, 1fr); } }
.steps--doc li::before { font-size: var(--s-4); }

/* Inner page hero carries a cropped corner of the X */
.page-hero { position: relative; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .hero-x { width: 520px; right: -140px; top: auto; bottom: -220px; transform: none; opacity: 0.9; }
@media (max-width: 899px) { .page-hero .hero-art { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero .hero-art { view-timeline: --hero block; }
    .hero .hero-x .stroke-a { animation: draw-a 900ms cubic-bezier(.2,.7,.2,1) both, part-a linear both; animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%; }
    .hero .hero-x .stroke-b { animation: draw-b 900ms 350ms cubic-bezier(.2,.7,.2,1) both, part-b linear both; animation-timeline: auto, --hero; animation-range: normal, exit 0% exit 100%; }
    @keyframes part-a { to { transform: translate(-14%, 10%) rotate(-4deg); opacity: 0.5; } }
    @keyframes part-b { to { transform: translate(18%, -16%); } }
  }
}

/* Partner band: logo or name, then what we do with them. Four across, two by two on phones; logo and caption centred
   on each other (Matt B, 27 Oct 2026: the captions looked adrift under logos of different widths). */
.partner-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 32px; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); padding-top: 28px; }
@media (max-width: 699px) { .partner-list { grid-template-columns: 1fr 1fr; gap: 28px 16px; } }
.partner-list li { margin: 0; text-align: center; }
.partner-list .partner-logo { display: flex; align-items: center; justify-content: center; height: 56px; margin-bottom: 12px; }
.partner-list img { height: 56px; max-width: 100%; width: auto; display: block; }
.partner-list .partner-name { display: flex; align-items: center; justify-content: center; height: 56px; margin-bottom: 12px; font-weight: 650; font-size: var(--s-3); color: var(--ink); font-variation-settings: "wdth" 112; }
.partner-list p { margin: 0 auto; max-width: 26ch; font-size: var(--s-0); }

/* Contact form spam trap: off-screen for people, still in the form for bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Chat widget (static/chat.js). Hidden until /api/chat says the assistant is enabled. */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-family: var(--font); }
.chat-launcher { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(15,36,56,0.25); transition: transform 200ms var(--ease, ease), background 200ms; }
.chat-launcher svg { width: 20px; height: 20px; }
.chat-launcher:hover { background: var(--brand-grad); transform: translateY(-2px); }
.chat[data-open="true"] .chat-launcher { display: none; }
.chat-panel[hidden] { display: none; } /* the display:flex below would otherwise override the hidden attribute */
.chat-panel { width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 40px)); display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: var(--radius, 10px); box-shadow: 0 24px 60px rgba(15,36,56,0.28); overflow: hidden; }
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--ink); color: #fff; }
.chat-head strong { display: block; font-size: 1.05rem; }
.chat-head span { display: block; font-size: 0.8rem; opacity: 0.75; margin-top: 2px; }
.chat-close { border: 0; background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--mist, #f3f5f7); }
.chat-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 0.95rem; line-height: 1.5; }
.chat-msg p { margin: 0 0 8px; } .chat-msg p:last-child { margin-bottom: 0; }
.chat-msg ul { margin: 0 0 8px; padding-left: 18px; } .chat-msg li { margin-bottom: 4px; }
.chat-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chat-msg--assistant { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
.chat-msg--user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.chat-typing { display: flex; gap: 5px; padding: 14px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--slate, #667); animation: chat-dot 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; } .chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.chat-msg ol { margin: 0 0 8px; padding-left: 20px; }
.chat-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--orange-deep, #AA6517); animation: chat-blink 1s steps(2, start) infinite; }
@keyframes chat-blink { to { visibility: hidden; } }
.chat-status { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--slate, #667); margin: 8px 0 0; }
.chat-status:first-child { margin-top: 0; }
.chat-status .chat-typing { padding: 0; gap: 4px; }
.chat-status .chat-typing span { width: 5px; height: 5px; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; background: var(--mist, #f3f5f7); }
.chat-suggest:not(:empty) { padding-bottom: 10px; }
.chat-chip { border: 1px solid var(--ink); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; }
.chat-chip:hover { background: var(--ink); color: #fff; }
.chat-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(15,36,56,0.12); align-items: flex-end; }
.chat-form textarea { flex: 1; resize: none; border: 1px solid rgba(15,36,56,0.25); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 0.95rem; line-height: 1.4; max-height: 120px; }
.chat-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.chat-form .btn { padding: 10px 16px; }
.chat-foot { margin: 0; padding: 0 16px 12px; font-size: 0.78rem; color: var(--slate, #556); }
.chat-foot a { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 480px) { .chat { right: 0; bottom: 0; } .chat[data-open="false"] { right: 16px; bottom: 16px; } .chat-panel { width: 100vw; height: 100dvh; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .chat-launcher, .chat-typing span, .chat-caret { transition: none; animation: none; } }

/* Partners page and partner band links (26 Oct 2026) */
.partner-row { display: grid; gap: 32px 64px; }
@media (min-width: 900px) { .partner-row { grid-template-columns: 260px 1fr; } }
.partner-side { display: grid; gap: 16px; align-content: start; }
.partner-tile { display: grid; place-items: center; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius, 12px); height: 128px; padding: 28px 32px; overflow: hidden; }
.partner-tile img { max-height: 44px; max-width: 100%; width: auto; }
.partner-tile img[src*="anthropic"] { width: 74%; max-height: none; }
.partner-tile img[src*="microsoft"] { max-height: 40px; }
.partner-tile--navy { background: #111b59; border-color: #111b59; padding: 0; }
.partner-tile--navy img { max-height: none; height: 128px; width: auto; max-width: none; }
.partner-main h2 { margin-top: 0; max-width: 22ch; }
.partner-sub { margin-top: 32px; font-size: var(--s-1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.partner-cases { margin-top: 24px; }
.partner-list .partner-logo { display: flex; align-items: center; height: 56px; margin-bottom: 12px; }
.partner-list .partner-logo img { height: 40px; width: auto; margin: 0; }
.partner-list .partner-logo img[src*="anthropic"] { height: 28px; }
.partner-list .partner-logo--navy { background: #111b59; height: 72px; width: 72px; margin-left: auto; margin-right: auto; justify-content: center; border-radius: 8px; overflow: hidden; }
.partner-list .partner-logo--navy img { height: 72px; }
.partner-list a.partner-name { text-decoration: none; }

/* ==== Design option "proof-2" (lead option, 15 Oct 2026) ====
   "proof" plus Skene's feedback. Layered over styles.css in the --variant=proof-2 build only.
   Motion: each section has one moving idea. Everything is visible and still without JS
   (no .reveal-on class) or with prefers-reduced-motion. */

:root { --radius: 10px; --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; --ease: cubic-bezier(.2,.7,.2,1); }

/* ---------- Labels and headings ---------- */
.label { display: inline-block; margin: 0 0 18px; padding: 3px 7px 2px; background: var(--brand-grad); color: var(--ink); font-family: var(--mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; max-width: none; }
.label--plain { background: none; padding: 0; color: var(--ink); }
.section h2 { max-width: 22ch; margin-bottom: clamp(28px, 3.5vw, 48px); }

/* ---------- Hero: three lines, the last in orange, rising in turn ---------- */
.hero h1 { max-width: none; font-size: clamp(2.5rem, 1rem + 4vw, 4.25rem); }
@media (min-width: 1100px) { .hero h1 .line { white-space: nowrap; } }
.hero h1 .em { color: var(--brand-orange); background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .lead { max-width: min(60ch, 52vw); }
@media (max-width: 899px) { .hero .lead { max-width: 60ch; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .label, .hero h1 .line, .hero .lead, .hero .actions { animation: rise 800ms var(--ease) both; }
  .hero h1 .line:nth-child(1) { animation-delay: 120ms; }
  .hero h1 .line:nth-child(2) { animation-delay: 260ms; }
  .hero h1 .line:nth-child(3) { animation-delay: 400ms; }
  .hero .lead { animation-delay: 560ms; }
  .hero .actions { animation-delay: 680ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---------- Scroll reveal (shared) ---------- */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Clients on Mist ---------- */
.clients { background: var(--mist); border-bottom: 0; padding: 44px 0 48px; }

/* ---------- Statement band: the X turns as you scroll past, the key words underline themselves ---------- */
.statement { background: var(--ink-2); color: var(--on-ink); position: relative; overflow: hidden; padding: clamp(72px, 10vw, 144px) 0; }
.statement-x { position: absolute; right: 3%; top: 50%; height: 88%; width: auto; aspect-ratio: 81.01 / 93.543; transform: translateY(-50%); }
.statement-x path { transform-box: fill-box; }
.statement-x .xa { fill: url(#flex-grad); } /* was #24425F, see rollback note in styles.css */
.statement-x .xb { fill: url(#flex-grad); }
.statement .wrap { position: relative; z-index: 1; }
.statement p { font-family: var(--font-wide); font-variation-settings: "wdth" 112; font-weight: 600; font-size: var(--s-5); line-height: 1.18; letter-spacing: -0.015em; color: var(--on-ink); max-width: 24ch; margin: 0; }
.statement em { font-style: italic; color: var(--orange); background: var(--brand-grad) no-repeat 0 100% / 100% 3px; padding-bottom: 2px; }
.reveal-on .statement em { background-size: 0 3px; transition: background-size 900ms var(--ease) 500ms; }
.reveal-on .statement .is-in em { background-size: 100% 3px; }
.reveal-on .statement .is-in em + em { transition-delay: 800ms; }
/* The two strokes slide in from opposite sides and cross as the band comes into view: the brand idea, not a tilt */
.reveal-on .statement-x .xa, .reveal-on .statement-x .xb { transition: transform 1300ms var(--ease), opacity 900ms var(--ease); }
.reveal-on .statement-x .xa { transform: translateX(-40%); opacity: 0; }
.reveal-on .statement-x .xb { transform: translateX(40%); opacity: 0; transition-delay: 150ms; }
.reveal-on .statement.is-in .statement-x .xa, .reveal-on .statement.is-in .statement-x .xb { transform: none; opacity: 1; }

/* ---------- Stats: numbers count up, orange rules grow ---------- */
.stats-band { padding: clamp(56px, 6vw, 88px) 0; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stats li { margin: 0; padding: 4px 0 4px 24px; position: relative; }
.stats li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--brand-grad); transform-origin: top; }
.reveal-on .stats li::before { transform: scaleY(0); transition: transform 900ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 150ms); }
.reveal-on .stats li.is-in::before { transform: scaleY(1); }
.stats .num { display: block; font-family: var(--font-wide); font-variation-settings: "wdth" 118; font-weight: 650; font-size: clamp(3rem, 2rem + 3vw, 4.75rem); line-height: 1; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 12px; }
.stats .num span { color: var(--orange-deep); }
.stats .what { display: block; max-width: 22ch; }

/* ---------- Services: one row per group, the heading card on the left and a uniform grid of service cards on the right ---------- */
.svc-rows { display: grid; gap: 20px; }
.svc-row { display: grid; gap: 12px; }
.svc-grid { display: grid; gap: 12px; }
@media (min-width: 700px) and (max-width: 899px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
.svc-head { background: var(--ink); color: var(--on-ink-soft); border-radius: var(--radius); padding: 28px; position: relative; overflow: hidden; }
.svc-head h3 { max-width: 14ch; }
.svc-head h3 { color: var(--on-ink); font-size: var(--s-3); margin-bottom: 0.3em; }
.svc-head p { font-size: 1rem; margin: 0; }
.svc-n { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--orange); margin-bottom: 14px; letter-spacing: 0.08em; }
.svc-item { position: relative; display: block; background: var(--mist); border-radius: var(--radius); padding: 22px 56px 22px 24px; text-decoration: none; color: var(--slate); overflow: hidden; transition: background-color 250ms, transform 250ms var(--ease), box-shadow 250ms; }
.svc-item::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--brand-grad); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease); }
.svc-item h4 { font-size: var(--s-1); margin-bottom: 0.35em; font-variation-settings: "wdth" 108; }
.svc-item p { font-size: 0.9375rem; margin: 0; line-height: 1.55; }
.svc-item .arrow { position: absolute; right: 22px; top: 22px; color: var(--orange-deep); font-weight: 700; transition: transform 250ms var(--ease); }
.svc-item:hover, .svc-item:focus-visible { background: var(--paper); box-shadow: 0 14px 36px rgba(15,36,56,0.12); transform: translateY(-2px); color: var(--slate); }
.svc-item:hover::before, .svc-item:focus-visible::before { transform: scaleX(1); }
/* Desktop (Skene, 27 Oct 2026): the heading card on the left and the group's services as an index list on the right,
   one service per row with hairline rules, so a group of seven and a group of two both read as a list, never a ragged grid.
   Below 900px the card layout above stays (Skene: mobile is fine). */
@media (min-width: 900px) {
  .svc-rows { gap: 56px; }
  .svc-row { grid-template-columns: 1fr; gap: 0; }
  /* Heading above its list, not beside it (Skene, 27 Oct): number, title and blurb on one line, no card */
  .svc-head { background: none; color: var(--slate); border-radius: 0; padding: 0 0 18px; display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: baseline; overflow: visible; }
  .svc-head .svc-n { grid-row: 1 / span 2; align-self: start; margin: 0; padding-top: 0.55em; }
  .svc-head h3 { color: var(--ink); max-width: none; margin: 0; }
  .svc-head p { grid-column: 2; max-width: 70ch; }
  .svc-grid { grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--ink); }
  .svc-item { display: grid; grid-template-columns: minmax(220px, 4fr) 8fr; gap: 8px 32px; align-items: baseline; background: none; border-radius: 0; border-bottom: 1px solid var(--rule); padding: 18px 56px 18px 0; overflow: visible; transition: none; }
  .svc-item::before { display: none; }
  .svc-item h4, .svc-item p { margin: 0; }
  .svc-item .arrow { right: 12px; top: 50%; transform: translateY(-50%); }
  .svc-item:hover, .svc-item:focus-visible { background: none; box-shadow: none; transform: none; }
  .svc-item:hover h4, .svc-item:focus-visible h4 { color: var(--orange-deep); }
  .svc-item:hover .arrow, .svc-item:focus-visible .arrow { transform: translate(6px, -50%); }
}
.svc-item:hover .arrow, .svc-item:focus-visible .arrow { transform: translateX(5px); }
.svc-item:hover h4 { color: var(--orange-deep); }

/* ---------- Fractional CTO feature panel (from "editorial") ---------- */
.feature-wrap { padding-top: 0; }
.feature { background: var(--ink); color: var(--on-ink-soft); border-radius: 24px; padding: clamp(36px, 6vw, 88px); position: relative; overflow: hidden; }
.feature > :not(svg) { position: relative; z-index: 1; }
.feature h2 { color: var(--on-ink); max-width: 17ch; }
.feature .accent { color: var(--brand-orange); background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.feature .lead { color: var(--on-ink-soft); max-width: 46ch; margin-bottom: 32px; }
.feature .label { margin-bottom: 20px; }
.feature-x { position: absolute; right: 5%; top: 50%; height: 78%; width: auto; aspect-ratio: 81.01 / 93.543; transform: translateY(-50%); }
.feature-x .xa { fill: url(#flex-grad); } /* was #1B3550 */
.feature-x .xb { fill: url(#flex-grad); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--mist); color: var(--ink); }
.reveal-on .feature-x .xa, .reveal-on .feature-x .xb { transition: clip-path 1100ms var(--ease); }
.reveal-on .feature-x .xa { clip-path: inset(0 0 100% 0); transition-delay: 300ms; }
.reveal-on .feature-x .xb { clip-path: inset(100% 0 0 0); transition-delay: 550ms; }
.reveal-on .feature.is-in .feature-x .xa, .reveal-on .feature.is-in .feature-x .xb { clip-path: inset(0); }


/* ---------- How we work: sliding tab marker, panel fades in, deliverables tick in ---------- */
.tab-list { position: relative; display: flex; flex-wrap: wrap; gap: 4px 28px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; }
.tab-list button { font: inherit; font-family: var(--font-wide); font-variation-settings: "wdth" 108; font-weight: 600; color: var(--slate); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 0; margin-bottom: -1px; cursor: pointer; transition: color 200ms; }
.tab-list button span { color: var(--ink); opacity: 0.6; margin-right: 4px; }
.tab-list button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--orange); }
.tab-list button:hover { color: var(--ink); }
.tab-ink { display: none; position: absolute; left: 0; height: 3px; background: var(--brand-grad); transition: transform 350ms var(--ease), width 350ms var(--ease); }
.tabs.js .tab-ink { display: block; }
/* Auto-advance progress: the marker dims and an orange fill runs under the open tab */
.tab-list button { position: relative; }
.tabs.auto .tab-ink { opacity: 0.3; }
.tabs.auto .tab-list button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--orange); transform-origin: left; animation: tab-fill 6500ms linear both paused; }
.tabs.auto.in-view:not(.paused) .tab-list button[aria-selected="true"]::after { animation-play-state: running; }
@keyframes tab-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tabs.js .tab-list button[aria-selected="true"] { border-bottom-color: transparent; }
.tabs:not(.js) .tab-list { display: none; }
.tabs.js .tab-panel[data-hidden] { display: none; }
.tab-panel { display: grid; gap: 28px 64px; align-items: start; }
.tabs:not(.js) .tab-panel + .tab-panel { margin-top: 40px; }
@media (min-width: 900px) { .tab-panel { grid-template-columns: 6fr 5fr; } }
.tab-panel h3 { font-size: var(--s-4); }
.deliverables { background: var(--paper); border-radius: var(--radius); padding: 24px 28px; }
.deliverables .label { margin-bottom: 12px; }
.deliverables ul { list-style: none; margin: 0; padding: 0; }
.deliverables li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.deliverables li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230F2438' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .tabs.js .tab-panel:not([data-hidden]) .tab-copy { animation: fade-up 450ms var(--ease) both; }
  .tabs.js .tab-panel:not([data-hidden]) .deliverables li { animation: fade-left 450ms var(--ease) both; animation-delay: calc(150ms + var(--j) * 110ms); }
  @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes fade-left { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
}

/* ---------- Case studies: cards rise in turn, the X turns on hover ---------- */
.case-cards { display: grid; gap: 24px; }
@media (min-width: 900px) { .case-cards { grid-template-columns: repeat(3, 1fr); } }
.case-card { border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: var(--mist); transition: box-shadow 300ms, translate 300ms var(--ease); }
.case-card:hover { box-shadow: 0 18px 44px rgba(15,36,56,0.14); translate: 0 -4px; }
.case-top { background: var(--ink); color: var(--on-ink-soft); padding: 28px; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.case-x { position: absolute; right: -36px; top: -36px; width: 170px; height: 170px; transition: transform 700ms var(--ease); }
.case-x .xa, .case-x .xb { fill: #1B3550; transition: fill 400ms; }
.case-card:hover .case-x { transform: rotate(90deg) scale(1.1); }
.case-card:hover .case-x .xb { fill: url(#flex-grad); }
.case-top .big { position: relative; z-index: 1; font-family: var(--font-wide); font-variation-settings: "wdth" 118; font-weight: 650; font-size: 3.5rem; line-height: 1; color: var(--orange); }
.case-top .small { position: relative; z-index: 1; font-size: var(--s-0); margin-top: 6px; }
.case-body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.case-body .label { align-self: flex-start; margin-bottom: 14px; }
.case-body h3 { font-size: var(--s-2); line-height: 1.25; }
.case-body p { font-size: 1rem; }
.case-body .text-link { margin-top: auto; }
.btn--dark { background: var(--ink); color: var(--on-ink); transition: background-color 200ms; }
.btn--dark:hover { background: var(--ink-2); color: var(--on-ink); }

/* ---------- Industries: cards rise in, an orange bar grows on hover ---------- */
.ind-cards { display: grid; gap: 16px; }
@media (min-width: 700px) { .ind-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ind-cards { grid-template-columns: repeat(3, 1fr); } }
.ind-card { position: relative; background: var(--paper); border-radius: var(--radius); padding: 28px 28px 28px 32px; text-decoration: none; color: var(--slate); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 300ms, translate 300ms var(--ease); }
.ind-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-grad); transform: scaleY(0); transform-origin: bottom; transition: transform 400ms var(--ease); }
.ind-card h3 { font-size: var(--s-2); }
.ind-card p { font-size: 1rem; }
.ind-card .go { margin-top: auto; font-weight: 600; color: var(--ink); }
.ind-card .go::after { content: " \2192"; color: var(--orange-deep); display: inline-block; transition: transform 250ms var(--ease); }
.ind-card:hover { color: var(--slate); box-shadow: 0 14px 36px rgba(15,36,56,0.1); translate: 0 -3px; }
.ind-card:hover::before { transform: scaleY(1); }
.ind-card:hover .go::after { transform: translateX(5px); }

/* ---------- Partners: logo tiles on ink, rising in turn ---------- */
.partner-dark { background: var(--ink-2); }
.partner-dark h2 { text-align: center; margin-left: auto; margin-right: auto; }
.badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); } /* always four across above phone width */
.badges li { margin: 0; text-align: center; display: grid; gap: 14px; align-content: start; }
.badges .tbc { display: grid; gap: 14px; text-decoration: none; }
.badges .tbc .badge-role { text-decoration: underline dotted var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.logo-tile { display: grid; place-items: center; background: var(--paper); border-radius: var(--radius); height: 128px; padding: 28px 32px; transition: transform 300ms var(--ease), box-shadow 300ms; }
.logo-tile img { max-height: 44px; max-width: 100%; width: auto; }
/* OpenText: the official partner badge (white on its own navy) fills the tile */
.logo-tile:has(img[src*="opentext-partner"]) { background: #111b59; padding: 0; overflow: hidden; }
.logo-tile img[src*="opentext-partner"] { max-height: none; height: 128px; width: auto; max-width: none; }
.logo-tile img[src*="anthropic"] { width: 74%; max-height: none; }
.logo-tile img[src*="microsoft"] { max-height: 40px; }
.badges li:hover .logo-tile { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--orange), 0 18px 40px rgba(0,0,0,0.3); }
.badge-role { font-size: var(--s-0); color: var(--on-ink-soft); }

/* ---------- Closing ask: the X drifts in behind it ---------- */
.ask { position: relative; overflow: hidden; }
.ask::before { content: ""; position: absolute; left: -8%; bottom: -40%; width: min(42%, 560px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23163049' d='M21 16h15l13.5 20.5-7.6 9.6zM52.4 57.3l7.5-9.3L79 82H64z'/%3E%3Cpath fill='%23163049' d='M21 82h15l43-66H64z'/%3E%3C/svg%3E") no-repeat center / contain; pointer-events: none; }
.ask .wrap { position: relative; z-index: 1; }
.reveal-on .ask::before { opacity: 0; transform: translate(-40px, 40px) rotate(-10deg); transition: opacity 1200ms var(--ease), transform 1400ms var(--ease); }
.reveal-on .ask.is-in::before { opacity: 1; transform: none; }

/* ---------- Phones ---------- */
@media (max-width: 899px) {
  /* Hero: centred, with the X large and faint behind the text instead of a poster above it */
  .hero .hero-art { position: absolute; inset: 0; height: auto; max-height: none; }
  .hero .hero-x { width: 125vw; max-width: none; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); opacity: 0.2; }
  .hero .wrap { text-align: center; padding-top: 56px; padding-bottom: 64px; }
  .hero .label { margin-left: auto; margin-right: auto; }
  .hero .actions { flex-direction: column; align-items: stretch; max-width: 340px; margin: 0 auto; }
  .hero .actions .btn { min-width: 0; justify-content: center; }
  /* X marks become a small full-colour corner mark instead of sitting behind the text */
  .statement-x, .feature-x { height: 64px; top: 20px; right: 16px; transform: none; }
  .statement { padding-top: 100px; }
  .feature { padding-top: 104px; }
}
@media (max-width: 699px) {
  /* Numbers two by two */
  .stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .stats li { padding-left: 14px; min-width: 0; }
  .stats .what { max-width: none; hyphens: auto; }
  .stats .num { font-size: clamp(1.75rem, 1rem + 3.4vw, 3rem); }
  .stats .what { font-size: clamp(0.8125rem, 0.75rem + 0.4vw, 0.9375rem); }
  /* Services: titles only, so ten services fit in a short scroll */
  .svc-item { padding: 16px 48px 16px 20px; }
  .svc-item p { display: none; }
  .svc-item h4 { margin: 0; }
  .svc-item .arrow { top: 50%; transform: translateY(-50%); }
  .svc-item:hover .arrow { transform: translate(5px, -50%); }
  .svc-head { padding: 22px; }
  /* Tabs: one swipeable row */
  .tab-list { flex-wrap: nowrap; overflow-x: auto; gap: 22px; scrollbar-width: none; }
  .tab-list::-webkit-scrollbar { display: none; }
  .tab-list button { white-space: nowrap; flex: none; }
  .case-top { min-height: 140px; }
  /* Partners two by two */
  .badges { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .logo-tile { height: 84px; padding: 18px; }
  .logo-tile img { max-height: 30px; }
  .logo-tile img[src*="opentext-partner"] { height: 84px; }
  .badge-role { font-size: 0.8125rem; }
  /* Case studies: compact result cards, the number on the left, the headline on the right.
     The summaries stay in the HTML for search and AI answers; they are only hidden on small screens. */
  .case-cards { gap: 12px; }
  .case-card { flex-direction: row; }
  .case-top { min-height: 0; width: 108px; flex: none; padding: 18px 14px; justify-content: center; }
  .case-x { width: 90px; height: 90px; right: -30px; top: -30px; }
  .case-top .big { font-size: 1.75rem; }
  .case-top .small { font-size: 0.75rem; }
  .case-body { padding: 16px 18px; }
  .case-body .label { font-size: 0.6875rem; margin-bottom: 8px; }
  .case-body h3 { font-size: 1.0625rem; margin-bottom: 8px; }
  .case-body p:not(.label) { display: none; }
  .case-body .text-link { font-size: 0.9375rem; }
  /* Industries: a tidy list of tappable rows, two lines of description each */
  .ind-cards { gap: 8px; }
  .ind-card { padding: 16px 44px 16px 20px; }
  .ind-card::before { transform: scaleY(1); width: 3px; }
  .ind-card h3 { font-size: 1.0625rem; margin-bottom: 4px; }
  .ind-card p { font-size: 0.9375rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ind-card .go { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 0; }
  .ind-card .go::after { font-size: 1.125rem; content: "\2192"; }
  /* Footer: link columns side by side */
  .site-footer .wrap { padding-top: 40px; gap: 28px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .site-footer .cols > div:first-child { grid-column: 1 / -1; }
  .site-footer li { margin-bottom: 6px; }
}


/* ---------- Inner pages pick up the rounded corners ---------- */
.case, .callout, .contact-card { border-radius: var(--radius); }

/* Narrow screens: make sure a long label wraps rather than widening the page (defensive; checked fine at 412px in Lighthouse mobile emulation, 21 Oct 2026). */
@media (max-width: 600px) { .label { white-space: normal; max-width: 100%; } }

/* Feature pair (fractional CTO + build and test) and the partner band link, 26 Oct 2026 */
.features { display: grid; gap: 24px; }
@media (min-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
.features .feature { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; }
.features .feature h2 { font-size: var(--s-5); max-width: 16ch; }
.features .feature .lead { font-size: var(--s-1); max-width: 44ch; flex: 1; }
.features .feature .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.features .feature .label { align-self: flex-start; }
.features .feature-x { right: -10%; height: 60%; opacity: 0.4; }
.btn--ghost-light { color: var(--on-ink); border-color: rgba(255,255,255,0.45); }
.btn--ghost-light:hover { border-color: var(--on-ink); color: var(--on-ink); }
.partner-dark .lead { text-align: center; margin: 0 auto 36px; max-width: 60ch; color: var(--on-ink-soft); }
.partner-dark .band-more { text-align: center; margin: 36px auto 0; max-width: none; }
.section--ink .btn--light, .section--ink .btn--light:hover { color: var(--ink); }
.badges a.logo-tile { text-decoration: none; }