/* nexibeo.com · page styles on top of the scrollcraft floor. Engine classes are not restyled. */
@font-face{font-family:"Graphik";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/Graphik-Regular.woff2) format("woff2")}
@font-face{font-family:"Graphik";font-weight:400;font-style:italic;font-display:swap;src:url(/assets/fonts/Graphik-RegularItalic.woff2) format("woff2")}
@font-face{font-family:"Graphik";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/Graphik-Medium.woff2) format("woff2")}
@font-face{font-family:"Graphik";font-weight:500;font-style:italic;font-display:swap;src:url(/assets/fonts/Graphik-MediumItalic.woff2) format("woff2")}

/* ---- tokens: two grounds, one hue at two lightnesses ---- */
:root{
  --sc-font-display:"Graphik",system-ui,sans-serif;
  --sc-font-text:"Graphik",system-ui,sans-serif;
  --sc-font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --paper:#F4F2ED; --paper-surface:#FBFAF7; --paper-ink:#33312f; --paper-soft:#6B655D; --paper-accent:#1F45E0;
  --ink:#33312f; --ink-surface:#43403A; --ink-ink:#F4F2ED; --ink-soft:#CFC9C0; --ink-accent:#C3D0FF;
  --btn-bg:var(--paper-accent); --btn-ink:#FFFFFF; --btn-edge:transparent;
  --sc-r-sm:4px; --sc-r-md:4px; --sc-r-lg:4px; --sc-r-pill:4px;
  --sc-shadow-color:35 10% 12%;
  --sc-maxw:78rem;
}

.g-paper, body{ --btn-bg:var(--paper-accent); --btn-ink:#FFFFFF; --btn-edge:transparent; --sc-canvas:var(--paper); --sc-surface:var(--paper-surface); --sc-ink:var(--paper-ink); --sc-ink-soft:var(--paper-soft); --sc-accent:var(--paper-accent); --sc-accent-ink:#FFFFFF; background:var(--sc-canvas); color:var(--sc-ink); }
.g-ink{ --sc-accent-ink-fix:1; --btn-bg:#3B5BDB; --btn-ink:#FFFFFF; --btn-edge:#C3D0FF; --sc-canvas:var(--ink); --sc-surface:var(--ink-surface); --sc-ink:var(--ink-ink); --sc-ink-soft:var(--ink-soft); --sc-accent:var(--ink-accent); --sc-accent-ink:#33312f; background:var(--sc-canvas); color:var(--sc-ink); }
/* light on dark: a touch more leading, tracking and weight */
.g-ink{ line-height:1.68; letter-spacing:0; }
.g-ink .sc-body, .g-ink p{ font-weight:400; }
.g-ink .sc-display{ letter-spacing:-0.03em; }
body{ font-weight:400; }
h1,h2,h3,h4{ font-family:var(--sc-font-display); font-weight:500; letter-spacing:var(--sc-track-snug); line-height:1.08; text-wrap:balance; margin:0; }
p{ margin:0; text-wrap:pretty; }
strong,b{ font-weight:500; }
a{ transition:color var(--sc-d-fast) var(--sc-ease-out), opacity var(--sc-d-fast) var(--sc-ease-out); }
a:hover{ color:var(--sc-accent); }
.u-soft{ color:var(--sc-ink-soft); }
.u-measure{ max-width:var(--sc-measure); }
.u-hide{ display:none !important; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sc-grain{ opacity:.035; }

/* ---- buttons: one radius, offset shadows, press feedback ---- */
.btn{ display:inline-flex; align-items:center; gap:.6em; padding:.9em 1.35em; border-radius:var(--sc-r-sm); background:var(--btn-bg); color:var(--btn-ink); font-family:var(--sc-font-display); font-weight:500; font-size:var(--sc-t-base); line-height:1; text-decoration:none; border:1px solid var(--btn-edge); white-space:nowrap; cursor:pointer;
  box-shadow:var(--sc-e1); transition:transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out); }
.btn:hover{ color:var(--btn-ink); box-shadow:var(--sc-e2); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px) scale(.985); box-shadow:none; }
.btn:disabled{ opacity:.5; cursor:default; transform:none; }
.btn--ghost{ background:transparent; color:var(--sc-ink); border-color:var(--sc-hairline-strong); box-shadow:none; }
.btn--ghost:hover{ color:var(--sc-ink); border-color:var(--sc-ink); box-shadow:none; }
.btn--wa svg{ width:1.15em; height:1.15em; flex:none; }
.btn--lg{ font-size:var(--sc-t-lg); padding:1em 1.5em; }
/* Standalone links are targets, not prose. Give them the 24px floor. */
@media (pointer:coarse){ .link, .prose li > a, .article__end ul a, .smallprint a{ display:inline-block; padding-block:.3rem; } }
.link{ font-family:var(--sc-font-display); font-weight:500; text-decoration:underline; text-underline-offset:.28em; text-decoration-thickness:1px; }
.link::after{ content:" \2197"; font-weight:400; }
.link--in::after{ content:" \2192"; }

/* ---- masthead (inner pages; scrolls away, never fixed) ---- */
.masthead{ position:relative; z-index:var(--sc-z-chrome); }
.masthead__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sc-6);
  padding-block:var(--sc-5); border-bottom:1px solid var(--sc-hairline); }
.masthead__end{ display:flex; align-items:center; gap:var(--sc-4); justify-self:end; }
.wordmark{ display:inline-grid; gap:.15rem; text-decoration:none; color:var(--sc-ink); line-height:1.1; }
.wordmark__name{ font-family:var(--sc-font-display); font-weight:500; font-size:1.35rem; letter-spacing:-.04em; }
.wordmark__slogan{ font-family:var(--sc-font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sc-ink-soft); }
.wordmark:hover{ color:var(--sc-ink); }

.nav{ display:flex; align-items:center; justify-content:center; gap:var(--sc-6); }
.nav a{ text-decoration:none; font-weight:500; color:var(--sc-ink-soft); }
.nav a[aria-current="page"], .nav a:hover{ color:var(--sc-ink); }

/* .nav a (0,2,0) outranks .btn (0,1,0) and was painting the CTA in muted ink. */
.nav a.btn{ color:var(--btn-ink); }
.nav a.btn--ghost{ color:var(--sc-ink); }
.nav__toggle{ display:none; }
@media (max-width:980px){
  .masthead__row{ grid-template-columns:minmax(0,1fr) auto; gap:var(--sc-4); }
  .masthead__end{ flex:none; }
  .wordmark{ min-width:0; }
  .wordmark__slogan{ white-space:normal; line-height:1.35; }
  .nav{ display:none; }
  .nav.is-open{ display:flex; flex-direction:column; align-items:stretch; position:absolute; left:0; right:0; top:100%;
    background:var(--sc-surface); padding:var(--sc-5) var(--sc-gutter) var(--sc-6); gap:var(--sc-4);
    box-shadow:var(--sc-e3); border-bottom:1px solid var(--sc-hairline); z-index:var(--sc-z-chrome); }
  /* CTA stays on screen at phone width, sitting to the left of the menu button. */
  .masthead__end .btn{ padding:.7em 1em; font-size:var(--sc-t-sm); }
  .nav__toggle{ display:inline-flex; background:none; color:var(--sc-ink); border:1px solid var(--sc-hairline-strong);
    border-radius:var(--sc-r-sm); padding:.62em .85em; font-weight:500; cursor:pointer; }
}
@media (max-width:560px){
  .wordmark__slogan{ font-size:.6rem; letter-spacing:.08em; }
  .masthead__end{ gap:var(--sc-2); }
  .masthead__end .btn{ padding:.62em .8em; }
}

/* ---- folio: the homepage's chapter index, in the margin ---- */
.folio{ position:fixed; left:clamp(.75rem,1.6vw,1.6rem); top:50%; transform:translateY(-50%); z-index:var(--sc-z-chrome);
  display:none; flex-direction:column; gap:var(--sc-3); font-family:var(--sc-font-mono); font-size:var(--sc-t-xs);
  letter-spacing:.06em; text-transform:uppercase;
  /* Panel so the rail is legible on both grounds instead of floating as faint marks. */
  padding:var(--sc-4) var(--sc-3); border:1px solid var(--sc-hairline-strong); border-radius:14px;
  background:color-mix(in oklab, var(--sc-surface) 92%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:var(--sc-e1); }
@media (min-width:1180px){ .folio{ display:flex; } .is-home .sc-wrap{ padding-inline-start:clamp(4.5rem,6vw,6.5rem); } .is-home .masthead .sc-wrap{ padding-inline-start:var(--sc-gutter); } .is-home .rail{ padding-inline-start:clamp(4.5rem,6vw,6.5rem); } }
.folio a{ position:relative; display:grid; place-items:center; width:1.9rem; height:1.6rem; border-radius:7px;
  text-decoration:none; color:var(--sc-ink-soft);
  transition:color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out); }
.folio a:hover{ background:color-mix(in oklab, var(--sc-ink) 8%, transparent); }
.folio a[aria-current="true"]{ background:color-mix(in oklab, var(--sc-accent) 18%, transparent); }
/* The title slides out of the rail, so the rail itself stays ~2em wide and the
   hero can start at the page gutter instead of clearing a 19rem column. */
.folio__t{ position:absolute; left:calc(100% + .55rem); top:50%; translate:0 -50%; white-space:nowrap; opacity:0;
  padding:.45em .7em; border:1px solid var(--sc-hairline-strong); border-radius:8px;
  background:var(--sc-surface); color:var(--sc-ink); box-shadow:var(--sc-e2);
  transition:opacity var(--sc-d-base) var(--sc-ease-out); pointer-events:none; }
.folio a:hover .folio__t, .folio a:focus-visible .folio__t{ opacity:1; }
.folio a[aria-current="true"]{ color:var(--sc-ink); font-weight:500; }
.folio a:hover{ color:var(--sc-ink); }
.folio__n{ color:var(--sc-accent); font-size:.68rem; }
.folio a[aria-current="true"] .folio__n{ color:var(--sc-ink); }

/* ---- home: title page ---- */
.title-page{ min-height:100svh; display:grid; align-content:end; padding-block:var(--sc-8) var(--sc-9); }
/* On a phone, pinning the title page to the bottom of the viewport means the
   reader opens to a screen of empty ground and the brand wall sits below the
   fold. Let it start under the masthead instead. */
@media (max-width:860px){
  .title-page{ min-height:auto; align-content:start; padding-block:var(--sc-6) var(--sc-8); }
  .title-page__grid{ gap:var(--sc-6); }
}
.title-page .sc-display--xl{ max-width:14ch; font-size:clamp(2.6rem, 1.2rem + 7.2vw, 8rem); }
/* Hero: copy hard left, the five brands beside it so they are visible on open.
   Tiles are content-width so they pack instead of stretching. */
.title-page__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sc-7); align-items:end; text-align:left; }
.title-page__copy{ text-align:left; }
@media (min-width:1000px){ .title-page__grid{ grid-template-columns:minmax(0,1.5fr) minmax(300px,.5fr); gap:var(--sc-7); } }
.brandwall{ align-self:end; }
.brandwall__label{ font-family:var(--sc-font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sc-ink-soft); margin:0 0 .9rem; }
.brandwall__grid{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.brandwall__tile{ display:inline-flex; align-items:center; min-height:2.4rem; padding:.4rem .7rem; border:1px solid var(--sc-hairline-strong);
  border-radius:var(--sc-r-sm); text-decoration:none; background:color-mix(in oklab, var(--sc-ink) 5%, transparent);
  transition:border-color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out); }
/* Greyed back so the wall reads as one quiet block, not five logos competing. */
.brandwall__tile .mark{ font-size:.74rem; filter:grayscale(1); opacity:.72; color:var(--sc-ink);
  transition:filter var(--sc-d-base) var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out); }
.brandwall__tile .mark svg, .brandwall__tile .mark img{ height:1.2em; }
.brandwall__tile:hover, .brandwall__tile:focus-visible{ border-color:var(--sc-ink-soft); background:color-mix(in oklab, var(--sc-ink) 9%, transparent); }
.brandwall__tile:hover .mark, .brandwall__tile:focus-visible .mark{ filter:none; opacity:1; }
@media (prefers-reduced-motion:reduce){ .brandwall__tile, .brandwall__tile .mark{ transition:none; } }

.title-page__sub{ margin-top:var(--sc-6); max-width:min(38ch,100%); font-size:var(--sc-t-lg); line-height:1.4; color:var(--sc-ink-soft); }
.title-page__top{ position:absolute; top:0; left:0; right:0; }
@media (max-width:700px){ .title-page .sc-display--xl{ font-size:var(--sc-t-2xl); max-width:none; } }

/* ---- chapter plates: full-stop intertitles ---- */
.plate{ padding-block:var(--sc-9) var(--sc-7); border-top:1px solid var(--sc-hairline); }
.plate__n{ font-family:var(--sc-font-mono); font-size:var(--sc-t-sm); letter-spacing:.12em; color:var(--sc-accent); }
.plate__t{ margin-top:var(--sc-4); font-size:var(--sc-t-3xl); line-height:.98; letter-spacing:var(--sc-track-tight); max-width:16ch; }
.plate__lede{ margin-top:var(--sc-6); max-width:46ch; font-size:var(--sc-t-lg); line-height:1.45; color:var(--sc-ink-soft); }

/* ---- spreads: text column + media column ---- */
.spread{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--sc-8); align-items:start; }
.spread--flip{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.spread__text{ position:sticky; top:var(--sc-8); }
.spread figure{ margin:0; }
.spread figcaption{ margin-top:var(--sc-3); font-family:var(--sc-font-mono); font-size:var(--sc-t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--sc-ink-soft); }
.spread img{ width:100%; height:auto; border:1px solid var(--sc-hairline); }
@media (max-width:900px){ .spread,.spread--flip{ grid-template-columns:1fr; gap:var(--sc-6); } .spread__text{ position:static; } }

/* ---- brands chapter ---- */
.products{ display:grid; gap:var(--sc-9); }
.product{ display:grid; gap:var(--sc-4); }
.product figure{ margin:0; overflow:hidden; border:1px solid var(--sc-hairline); background:var(--sc-surface); aspect-ratio:16/10; }
.product img{ width:100%; height:100%; object-fit:cover; object-position:top; border:0; }
.product__meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sc-3) var(--sc-5); }
.product__meta .sc-label{ color:var(--sc-ink-soft); }
.product h3{ font-size:var(--sc-t-xl); }
.product p{ color:var(--sc-ink-soft); max-width:52ch; }
.product__links{ display:flex; gap:var(--sc-5); flex-wrap:wrap; }

/* brand marks: mark + wordmark, rebuilt faithfully per brand */
.mark{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--sc-font-display); font-weight:500; text-decoration:none; color:var(--sc-ink); line-height:1; white-space:nowrap; }
.mark svg,.mark img{ height:1.6em; width:auto; flex:none; }
.mark--completeaitraining{ color:#E8891A; }
.mark--completeaitraining span{ display:inline-block; line-height:1; }
.mark--completeaiagents{ color:#154899; font-weight:600; letter-spacing:-.02em; }
.g-ink .mark--completeaiagents{ color:#AFC6FF; }
.mark--completeaiagents b{ color:#F98F2C; font-weight:600; }
.mark--yougotitall{ font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:0; }
.mark--yougotitall svg{ height:1.15em; }
.mark--templatesgrokbot{ letter-spacing:-.03em; font-weight:600; }
.mark--templatesgrokbot b{ color:#FF7A1A; font-weight:600; }
.mark--polycryptosignals svg{ height:1.25em; }
.mark--lg{ font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem); }

/* ---- interlude: authored silence ---- */
.interlude{ min-height:78svh; display:grid; place-items:center; text-align:left; }
.interlude p{ font-family:var(--sc-font-display); font-weight:500; font-size:var(--sc-t-2xl); line-height:1.12; letter-spacing:var(--sc-track-snug); max-width:22ch; }

/* ---- the invoice: signature move ---- */
.offer{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:var(--sc-8); align-items:start; }
.offer__text{ display:grid; gap:var(--sc-8); max-width:54ch; }
.offer__text p{ font-size:var(--sc-t-lg); line-height:1.5; }
.offer__text p strong{ color:var(--sc-ink); }
.invoice{ position:sticky; top:var(--sc-7); background:var(--sc-surface); color:var(--sc-ink); border:1px solid var(--sc-hairline-strong); box-shadow:var(--sc-e3), var(--sc-edge); padding:var(--sc-6) var(--sc-6) var(--sc-5); font-variant-numeric:tabular-nums; }
.invoice__head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sc-4); padding-bottom:var(--sc-4); border-bottom:1px solid var(--sc-hairline-strong); }
.invoice__head .sc-label{ color:var(--sc-ink-soft); }
.invoice__lines{ list-style:none; margin:0; padding:0; }
.invoice__line{ display:grid; grid-template-columns:1fr auto; gap:var(--sc-4); align-items:baseline; padding:var(--sc-3) 0; border-bottom:1px solid var(--sc-hairline); opacity:.18; transform:translateY(6px); transition:opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out); }
.invoice__line.is-on{ opacity:1; transform:none; }
.invoice__line span:last-child{ font-family:var(--sc-font-mono); font-size:var(--sc-t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--sc-ink-soft); opacity:0; transform:scale(.92); transition:opacity 220ms var(--sc-ease-out) 160ms, transform 220ms var(--sc-ease-out) 160ms, color 220ms; }
.invoice__line.is-on span:last-child{ opacity:1; transform:none; color:var(--sc-accent); }
.invoice__total{ margin-top:var(--sc-5); display:grid; gap:var(--sc-2); opacity:0; transform:translateY(10px) scale(.98); transition:opacity 520ms var(--sc-ease-out), transform 520ms var(--sc-ease-out); }
.invoice__total.is-on{ opacity:1; transform:none; }
.invoice__was{ font-family:var(--sc-font-mono); font-size:var(--sc-t-sm); color:var(--sc-ink-soft); text-decoration:line-through; text-decoration-thickness:1.5px; }
.invoice__now{ font-family:var(--sc-font-display); font-weight:500; font-size:var(--sc-t-3xl); letter-spacing:var(--sc-track-tight); line-height:1; }
.invoice__now small{ font-size:.34em; letter-spacing:0; color:var(--sc-ink-soft); font-weight:400; margin-left:.3em; }
.invoice__year{ color:var(--sc-ink-soft); }
.invoice__cta{ margin-top:var(--sc-5); display:flex; gap:var(--sc-4); flex-wrap:wrap; }
@media (max-width:900px){ .offer{ grid-template-columns:1fr; } .invoice{ position:static; } .invoice__line{ opacity:1; transform:none; } .invoice__line span:last-child{ opacity:1; transform:none; color:var(--sc-accent); } .invoice__total{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .invoice__line,.invoice__line span:last-child,.invoice__total{ opacity:1 !important; transform:none !important; transition:none; } .invoice__line span:last-child{ color:var(--sc-accent); } }

/* ---- proof rail ---- */
.rail{ display:flex; align-items:stretch; gap:var(--sc-5); padding-inline:var(--sc-gutter); height:100%; }
.rail__lead{ flex:0 0 clamp(18rem,30vw,26rem); align-self:center; }
.rail__lead .sc-body{ margin-top:var(--sc-4); }
.plate-card{ flex:0 0 clamp(19rem,32vw,27rem); align-self:center; display:grid; gap:var(--sc-3); text-decoration:none; color:inherit; }
.plate-card figure{ margin:0; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--sc-hairline); background:var(--sc-surface); }
.plate-card img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter var(--sc-d-slow) var(--sc-ease-out), transform var(--sc-d-slow) var(--sc-ease-out); }
.plate-card:hover img{ filter:none; transform:scale(1.02); }
.plate-card h3{ font-size:var(--sc-t-lg); line-height:1.2; }
.plate-card:hover{ color:inherit; }
.rail__end{ flex:0 0 clamp(16rem,24vw,20rem); align-self:center; }
@media (prefers-reduced-motion:reduce){ .rail{ height:auto; padding-block:var(--sc-6); } }

/* ---- ideas chapter / index ---- */
.count{ font-family:var(--sc-font-display); font-weight:500; font-size:clamp(5rem,2rem + 14vw,14rem); line-height:.9; letter-spacing:-.05em; }
.ideas-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(18rem,1fr)); gap:var(--sc-6) var(--sc-5); }
.idea-card{ display:grid; gap:var(--sc-3); text-decoration:none; color:inherit; align-content:start; }
.idea-card:hover{ color:inherit; }
.idea-card figure{ margin:0; aspect-ratio:3/2; overflow:hidden; background:var(--sc-surface); border:1px solid var(--sc-hairline); }
.idea-card img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter var(--sc-d-slow) var(--sc-ease-out); }
.idea-card:hover img{ filter:none; }
.idea-card h3{ font-size:var(--sc-t-lg); line-height:1.2; }
.idea-card p{ color:var(--sc-ink-soft); font-size:var(--sc-t-sm); }
.idea-card[hidden]{ display:none; }
.filters{ display:flex; flex-wrap:wrap; gap:var(--sc-2); align-items:center; }
.chip{ font-family:var(--sc-font-mono); font-size:var(--sc-t-xs); letter-spacing:.08em; text-transform:uppercase; padding:.55em .8em; border:1px solid var(--sc-hairline-strong); border-radius:var(--sc-r-sm); background:transparent; color:var(--sc-ink-soft); cursor:pointer; transition:all 140ms var(--sc-ease-out); }
.chip:hover{ color:var(--sc-ink); border-color:var(--sc-ink); }
.chip[aria-pressed="true"]{ background:var(--sc-ink); color:var(--sc-canvas); border-color:var(--sc-ink); }
.search{ width:100%; max-width:28rem; padding:.85em 1em; border:1px solid var(--sc-hairline-strong); border-radius:var(--sc-r-sm); background:var(--sc-surface); color:var(--sc-ink); }
.search::placeholder{ color:var(--sc-ink-soft); }
.toolbar{ display:grid; gap:var(--sc-4); margin-top:var(--sc-6); }
.result-count{ font-family:var(--sc-font-mono); font-size:var(--sc-t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--sc-ink-soft); }

/* ---- article pages (blog, idea, case) ---- */
.article{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,44rem) minmax(0,1fr); }
.article > *{ grid-column:2; }
.article__hero{ margin:0; grid-column:1/-1; }
.article__hero img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.article__head{ padding-block:var(--sc-8) var(--sc-6); }
.article__head h1{ font-size:var(--sc-t-3xl); line-height:1; letter-spacing:var(--sc-track-tight); }
.article__meta{ display:flex; flex-wrap:wrap; gap:var(--sc-4); margin-bottom:var(--sc-5); font-family:var(--sc-font-mono); font-size:var(--sc-t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--sc-ink-soft); }
.article__lede{ margin-top:var(--sc-5); font-size:var(--sc-t-lg); line-height:1.45; color:var(--sc-ink-soft); max-width:46ch; }
.prose{ font-size:1.0625rem; line-height:1.7; }
.prose > * + *{ margin-top:1.2em; }
.prose h2{ font-size:var(--sc-t-xl); margin-top:2.4em; line-height:1.15; }
.prose h3{ font-size:var(--sc-t-lg); margin-top:1.8em; }
.prose p{ max-width:66ch; }
.prose ul,.prose ol{ padding-left:1.3em; max-width:62ch; }
.prose li + li{ margin-top:.45em; }
.prose blockquote{ margin:1.6em 0; padding-left:1.2em; border-left:1px solid var(--sc-ink); color:var(--sc-ink); font-size:var(--sc-t-lg); line-height:1.4; }
.prose a{ text-decoration:underline; text-underline-offset:.22em; }
.prose hr{ border:0; height:1px; background:var(--sc-hairline); margin:2.4em 0; }
.prose strong{ color:var(--sc-ink); }
.article__end{ margin-top:var(--sc-8); padding-top:var(--sc-6); border-top:1px solid var(--sc-hairline); display:grid; gap:var(--sc-5); }
.kv{ display:grid; grid-template-columns:max-content 1fr; gap:var(--sc-2) var(--sc-5); font-size:var(--sc-t-sm); }
.kv dt{ font-family:var(--sc-font-mono); font-size:var(--sc-t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--sc-ink-soft); }
.kv dd{ margin:0; }
.contact-block{ margin-top:var(--sc-6); font-style:normal; display:grid; gap:var(--sc-4); font-size:var(--sc-t-sm); line-height:1.7; }
.contact-block a{ display:inline-block; padding-block:.25rem; text-decoration:underline; text-underline-offset:.22em; }
.contact-block__lines{ color:var(--sc-ink-soft); }
.steps{ counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:var(--sc-4); }
.steps li{ counter-increment:s; display:grid; grid-template-columns:2.4rem 1fr; gap:var(--sc-4); align-items:baseline; }
.steps li::before{ content:counter(s); font-family:var(--sc-font-mono); color:var(--sc-accent); font-size:var(--sc-t-sm); }
.two-up{ display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:var(--sc-6) var(--sc-8); }
.two-up--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); max-width:52rem; }
.two-up h3{ font-size:var(--sc-t-lg); }
.two-up p{ margin-top:var(--sc-2); color:var(--sc-ink-soft); }
.post-list{ display:grid; gap:var(--sc-7); }
.post-row{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--sc-6); text-decoration:none; color:inherit; align-items:start; padding-top:var(--sc-6); border-top:1px solid var(--sc-hairline); }
.post-row:hover{ color:inherit; }
.post-row figure{ margin:0; aspect-ratio:3/2; overflow:hidden; border:1px solid var(--sc-hairline); }
.post-row img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter var(--sc-d-slow) var(--sc-ease-out); }
.post-row:hover img{ filter:none; }
.post-row h2{ font-size:var(--sc-t-xl); line-height:1.15; margin-top:var(--sc-3); }
.post-row p{ margin-top:var(--sc-3); color:var(--sc-ink-soft); max-width:52ch; }
@media (max-width:700px){ .post-row{ grid-template-columns:1fr; } }

/* ---- consultancy page ---- */
.price-block{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:var(--sc-6); align-items:end; }
.price{ font-family:var(--sc-font-display); font-weight:500; font-size:var(--sc-t-3xl); letter-spacing:var(--sc-track-tight); line-height:1; }
.price small{ font-size:.32em; color:var(--sc-ink-soft); letter-spacing:0; font-weight:400; }
.price__was{ font-family:var(--sc-font-mono); font-size:var(--sc-t-sm); color:var(--sc-ink-soft); text-decoration:line-through; margin-bottom:var(--sc-2); }
.included{ list-style:none; padding:0; margin:0; columns:2; column-gap:var(--sc-8); }
.included li{ break-inside:avoid; padding:var(--sc-3) 0; border-bottom:1px solid var(--sc-hairline); display:grid; grid-template-columns:1.2em 1fr; gap:var(--sc-3); }
.included li::before{ content:"\2713"; color:var(--sc-accent); font-family:var(--sc-font-mono); }
@media (max-width:700px){ .included{ columns:1; } }
.month{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sc-6); }
.month > div{ padding-top:var(--sc-4); border-top:1px solid var(--sc-ink); }
.month .sc-label{ color:var(--sc-accent); }
.month h3{ margin-top:var(--sc-3); font-size:var(--sc-t-xl); }
.month p{ margin-top:var(--sc-3); color:var(--sc-ink-soft); }
@media (max-width:800px){ .month{ grid-template-columns:1fr; } }
.faq{ display:grid; gap:0; max-width:52rem; }
.faq details{ border-top:1px solid var(--sc-hairline); }
.faq details:last-child{ border-bottom:1px solid var(--sc-hairline); }
.faq summary{ cursor:pointer; list-style:none; padding:var(--sc-5) 0; font-family:var(--sc-font-display); font-weight:500; font-size:var(--sc-t-lg); display:grid; grid-template-columns:1fr auto; gap:var(--sc-5); align-items:baseline; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--sc-font-mono); color:var(--sc-accent); transition:transform var(--sc-d-base) var(--sc-ease-out); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding-bottom:var(--sc-5); color:var(--sc-ink-soft); max-width:60ch; }

/* ---- forms ---- */
.form{ display:grid; gap:var(--sc-4); max-width:36rem; }
.form label{ display:grid; gap:var(--sc-2); font-family:var(--sc-font-mono); font-size:var(--sc-t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--sc-ink-soft); }
.form input,.form textarea,.form select{ width:100%; padding:.85em 1em; border:1px solid var(--sc-hairline-strong); border-radius:var(--sc-r-sm); background:var(--sc-surface); color:var(--sc-ink); font-family:var(--sc-font-text); font-size:var(--sc-t-base); letter-spacing:0; text-transform:none; transition:border-color var(--sc-d-fast) var(--sc-ease-out); }
.form input:hover,.form textarea:hover{ border-color:var(--sc-ink-soft); }
.form input:focus-visible,.form textarea:focus-visible{ outline:2px solid var(--sc-accent); outline-offset:2px; border-color:var(--sc-accent); }
.form textarea{ min-height:9rem; resize:vertical; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sc-4); }
@media (max-width:600px){ .form__row{ grid-template-columns:1fr; } }
.form__actions{ display:flex; gap:var(--sc-4); flex-wrap:wrap; align-items:center; }
.form__hp{ position:absolute; left:-9999px; }
.form__status{ font-size:var(--sc-t-sm); color:var(--sc-ink-soft); min-height:1.4em; }
.form__status.is-ok{ color:var(--sc-ink); }
.form__status.is-err{ color:#B4231C; }
.g-ink .form__status.is-err{ color:#FF8A7A; }

/* ---- colophon ---- */
.colophon{ padding-block:var(--sc-10) var(--sc-7); border-top:1px solid var(--sc-hairline); }
.colophon__cta{ font-family:var(--sc-font-display); font-weight:500; font-size:var(--sc-t-xl); line-height:1.25; max-width:34ch; letter-spacing:var(--sc-track-snug); }
.colophon__cta a{ text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; color:var(--sc-accent); }
.colophon__cta a:hover{ color:var(--sc-ink); }
.masthead-foot{ margin-top:var(--sc-9); display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:var(--sc-7) var(--sc-6); padding-top:var(--sc-6); border-top:1px solid var(--sc-hairline); font-size:var(--sc-t-sm); }
.masthead-foot ul{ list-style:none; margin:var(--sc-3) 0 0; padding:0; display:grid; gap:var(--sc-2); }
.masthead-foot a{ display:inline-block; padding-block:.3rem; text-decoration:none; color:var(--sc-ink-soft); }
.masthead-foot a:hover{ color:var(--sc-ink); }
.smallprint{ margin-top:var(--sc-7); display:flex; flex-wrap:wrap; gap:var(--sc-4) var(--sc-6); font-family:var(--sc-font-mono); font-size:var(--sc-t-xs); letter-spacing:.06em; color:var(--sc-ink-soft); }

/* ---- utilities ---- */
.section-tight{ padding-block:var(--sc-8); }
.section-sm{ padding-block:var(--sc-7); }
.hairline{ height:1px; background:var(--sc-hairline); border:0; }
.eyebrow{ font-family:var(--sc-font-mono); font-size:var(--sc-t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--sc-accent); }
.page-head{ padding-block:var(--sc-8) var(--sc-7); }
.page-head h1{ font-size:var(--sc-t-3xl); line-height:.98; letter-spacing:var(--sc-track-tight); max-width:18ch; }
.page-head .sc-lede{ margin-top:var(--sc-6); color:var(--sc-ink-soft); }
.tabs{ display:flex; gap:var(--sc-2); border-bottom:1px solid var(--sc-hairline); margin-top:var(--sc-6); }
.tabs a{ padding:var(--sc-3) var(--sc-4); text-decoration:none; font-weight:500; color:var(--sc-ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a[aria-current="true"]{ color:var(--sc-ink); border-bottom-color:var(--sc-ink); }
.case-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(20rem,1fr)); gap:var(--sc-7) var(--sc-5); }
.case-row{ display:grid; gap:var(--sc-3); text-decoration:none; color:inherit; }
.case-row:hover{ color:inherit; }
.case-row figure{ margin:0; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--sc-hairline); background:var(--sc-surface); }
.case-row img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter var(--sc-d-slow) var(--sc-ease-out); }
.case-row:hover img{ filter:none; }
.case-row h3{ font-size:var(--sc-t-lg); line-height:1.2; }
.black-row{ padding:var(--sc-7); margin-block:var(--sc-7); }
.black-row p + p{ margin-top:1em; }
/* The system, as a flow. Typographic, not a fake diagram. */
.flow{ grid-column:1/-1; padding:var(--sc-7) var(--sc-gutter); background:var(--sc-surface); border-block:1px solid var(--sc-hairline); margin-block:var(--sc-7); }
.flow .sc-label{ display:block; max-width:44rem; margin:0 auto var(--sc-4); }
.flow__steps{ list-style:none; margin:0 auto; padding:0; max-width:44rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .35rem; counter-reset:f; }
.flow__steps li{ font-family:var(--sc-font-mono); font-size:var(--sc-t-xs); letter-spacing:.04em; text-transform:uppercase;
  padding:.5em .75em; border:1px solid var(--sc-hairline-strong); border-radius:var(--sc-r-sm); background:var(--sc-canvas); }
.flow__steps li:not(:last-child)::after{ content:"\2192"; margin-left:.75em; color:var(--sc-accent); }
.agents{ display:grid; gap:var(--sc-2) 0; margin:0; }
.agents dt{ font-family:var(--sc-font-display); font-weight:500; margin-top:var(--sc-5); }
.agents dt:first-child{ margin-top:0; }
.agents dd{ margin:.25rem 0 0; color:var(--sc-ink-soft); max-width:62ch; }
.pager{ display:flex; justify-content:space-between; gap:var(--sc-5); margin-top:var(--sc-7); padding-top:var(--sc-5); border-top:1px solid var(--sc-hairline); font-size:var(--sc-t-sm); }
.pager a{ text-decoration:none; max-width:22rem; }
.pager a + a{ text-align:right; }
.pager .sc-label{ display:block; margin-bottom:var(--sc-1); }

/* --------------------------------------------------------------- phone hero --
   The masthead is absolutely positioned so the hero can sit under it on desktop.
   On a phone the hero starts at the top, so the masthead has to return to flow.
   Declared last so it wins on order against the base rule above. */
@media (max-width:860px){
  .title-page__top{ position:static; }
}