/* ca-site.css — Cycles Arc, one stylesheet for the whole site.
Design tokens, type and components are lifted verbatim from the original
landing page so v2 inherits its look exactly; what changes is that they now
live in ONE file instead of being pasted into every page. */
/* ---------- tokens ---------- */
:root, html[data-theme="day"]{
--bg:#f5f4f0; --ink:#272424; --muted:#555; --muted2:#666; --footer-muted:#444;
--card:#fff; --accent:#047857; --accent-dark:#065f46; --accent-light:#34d399;
--section-dark-bg:#272424; --section-dark-text:#f5f4f0; --panel-dark:#1e1b1b;
--footer-bg:#1a1717; --nav-border:#e8e6df; --badge-bg:#e0e0e0;
--hair:rgba(0,0,0,0.08);
}
html[data-theme="night"]{
--bg:#0d2a1e; --ink:#e8f2ec; --muted:#9db5a8; --muted2:#93ab9f; --footer-muted:#6b8a7b;
--card:#123227; --accent:#10b981; --accent-dark:#0b8f66; --accent-light:#34d399;
--section-dark-bg:#0a2419; --section-dark-text:#e8f2ec; --panel-dark:#0a2016;
--footer-bg:#061a12; --nav-border:#1f4535; --badge-bg:#1f4535;
--hair:rgba(255,255,255,0.10);
}
html,body{ transition:background-color .35s ease, color .35s ease; }
:root{ accent-color:var(--accent); caret-color:var(--accent); }
::selection{ background:var(--accent); color:#fff; }
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:reduce){
::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
html,body{ transition:none; }
}
/* ---------- base ---------- */
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Raleway",sans-serif; font-size:12pt; line-height:1.5;
background-color:var(--bg); color:var(--ink); font-variant-numeric:lining-nums; }
.container{ max-width:1000px; margin:auto; padding:10px 6%; }
.container.wide{ max-width:1180px; }
h1,h2,h3{ color:var(--ink); }
h2{ font-size:1.5em; margin-bottom:.5em; }
h3{ font-size:1.2em; margin-bottom:.5em; }
p{ margin:0 0 .6em; }
ul{ list-style-position:outside; padding-left:1.4em; }
li{ text-indent:-.7em; padding-left:.7em; margin-bottom:.6em; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); }
/* ---------- header / nav ---------- */
.hero{ background-color:var(--bg); color:var(--ink); text-align:center; padding-bottom:30px; }
.top-logo{ height:20vh; width:auto; display:block; margin:0 auto; }
.main-heading{ margin-top:20px; font-size:2.5em; font-weight:700; margin-bottom:5px; letter-spacing:2px; }
.tagline{ margin-top:5px; font-size:1em; font-weight:400; color:var(--ink); margin-bottom:0; }
nav{ background-color:var(--bg); padding:15px 0; text-align:center;
border-bottom:1px solid var(--nav-border); position:relative; }
.nav-menu{ list-style:none; margin:0; padding:0; display:flex; justify-content:center;
align-items:center; flex-wrap:wrap; row-gap:10px; }
nav li{ padding:0 18px; position:relative; display:flex; align-items:center; }
/* The two prose rules at the top of this file — li{ text-indent:-.7em;
padding-left:.7em; margin-bottom:.6em } — are for hanging indents in body
copy, and they were leaking into the menu. nav li overrode the padding but
not the other two, so:
text-indent:-11.2px pulled the GLYPHS 11.2px left inside each while
the box stayed put. The boxes were centred perfectly and the words were
not: measured ink-to-line, every gap was 18.0px on the left of a
separator and 6.8px on the right. Every line sat 5.6px too far right,
which is 11.2/2 — the whole of the indent, halved.
margin-bottom:9.6px sat under each item inside a flex line that centres
the MARGIN box, lifting the entire row 4.8px above the middle of the bar.
Both are zeroed here. Measure the ink, not the box: a text-indent moves one
and not the other, and getBoundingClientRect on the reports centred. */
nav li{ text-indent:0; margin-bottom:0; }
nav li a{ text-indent:0; }
/* The separator hangs off the LEFT of every item but the first, not off the
right of every item but the last. The last in the menu is the Shop
link, which is .m-only and so display:none on desktop — with ::after the
rule painted a rule to the right of "For organisations" and left it hanging
in space. A ::before belongs to the item it precedes, so it disappears with
that item, and the row ends on a word at every width. */
nav li:not(:first-child)::before{ content:""; position:absolute; left:0; top:50%;
transform:translateY(-50%); width:1px; height:16px; background:var(--accent); }
nav a{ color:var(--ink); text-decoration:none; font-weight:400; font-size:1em;
transition:opacity .3s; cursor:pointer; white-space:nowrap;
display:inline-flex; align-items:center; line-height:1; }
nav a:hover{ opacity:.7; }
nav a.active{ font-weight:700; color:var(--accent); }
nav .nav-cta{ position:absolute; right:20px; top:50%; transform:translateY(-50%);
display:inline-flex; align-items:center; gap:14px; z-index:6; }
nav .nav-shop{ display:inline-flex; align-items:center; padding:8px 20px; background:var(--accent);
color:#fff; border-radius:40px; font-weight:700; font-size:.85em; letter-spacing:.02em;
text-decoration:none; white-space:nowrap; transition:background-color .2s ease; }
nav .nav-shop:hover{ background:var(--accent-dark); }
nav .nav-menu li.m-only{ display:none; }
.theme-toggle{ background:none; border:1px solid var(--ink); color:var(--ink); border-radius:50%;
width:34px; height:34px; font-size:1em; line-height:1; cursor:pointer; padding:0;
display:inline-flex; align-items:center; justify-content:center;
transition:opacity .3s, border-color .2s, color .2s; }
.theme-toggle:hover{ opacity:.7; }
.hamburger{ display:none; flex-direction:column; cursor:pointer; padding:8px; gap:5px;
background:none; border:none; }
.hamburger span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px;
transition:all .3s; }
.hamburger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }
/* ---------- sections ---------- */
.light-section{ background-color:var(--bg); color:var(--ink); padding:20px 1%; margin:0 0 40px; }
.dark-section{ background-color:var(--section-dark-bg); color:var(--section-dark-text);
padding:44px 1%; margin:0 0 40px; }
.dark-section h1,.dark-section h2,.dark-section h3{ color:var(--section-dark-text); }
/* The plain text page title, kept as the fallback for any page that has no
picture of its own. Every page currently uses .page-shot instead. */
.page-title{ padding:40px 1% 20px; margin:0; }
.page-title h1{ font-size:2.2em; font-weight:700; margin-bottom:10px; }
.eyebrow{ font-size:.78em; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
color:var(--accent); margin-bottom:16px; }
.lede{ font-size:1.12em; line-height:1.7; color:var(--footer-muted); max-width:700px; }
.rule{ width:32px; height:2px; background:var(--accent); margin:14px 0 18px; border-radius:2px; }
/* ---------- buttons ---------- */
.cta-button{ background-color:var(--accent); padding:12px 24px; border-radius:40px; font-weight:bold;
text-decoration:none; color:#fff; font-size:1rem; display:inline-block; transition:background-color .3s;
cursor:pointer; border:none; font-family:"Raleway",sans-serif; }
.cta-button:hover{ background-color:var(--accent-dark); }
.cta-quiet{ font-size:.95em; font-weight:600; color:var(--accent); text-decoration:underline;
text-underline-offset:4px; cursor:pointer; }
/* ---------- cards & grids ---------- */
.grid{ display:grid; gap:20px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.card{ background:var(--card); border:1px solid var(--accent); border-radius:16px; padding:30px 28px; }
.card h3{ font-size:1.35em; font-weight:700; margin-bottom:6px; }
.card p{ font-size:.92em; line-height:1.7; color:var(--muted); }
.card .more{ font-size:.9em; font-weight:700; color:var(--accent); text-decoration:none; }
.card-quiet{ background:var(--card); border:1px solid var(--nav-border); border-radius:14px; padding:24px; }
/* the four doors on the home page */
.door{ display:block; text-decoration:none; background:var(--card); border:1px solid var(--accent);
border-radius:16px; padding:30px 28px; transition:transform .15s ease, box-shadow .15s ease; }
.door:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(4,120,87,.16); }
.door .k{ font-size:.72em; font-weight:700; letter-spacing:2px; text-transform:uppercase;
color:var(--accent); margin-bottom:10px; }
.door h3{ font-size:1.5em; font-weight:700; margin-bottom:8px; }
.door p{ font-size:.92em; line-height:1.7; color:var(--muted); margin-bottom:0; }
/* ---------- the house: engines / press / imprints ---------- */
/* Three plain columns separated by a hairline, not three cards: the point is
that these are parts of one thing. */
.house{ gap:0; border-top:1px solid var(--hair); }
.house-part{ padding:26px 28px 26px 0; }
.house-part+.house-part{ padding-left:28px; border-left:1px solid var(--hair); }
.house-part h3{ font-size:1.25em; font-weight:700; margin-bottom:8px; }
.house-part p{ font-size:.94em; line-height:1.72; color:var(--muted); margin:0; }
.house-part a{ font-weight:600; text-decoration:underline; text-underline-offset:3px; }
/* the "under your name" band carries a paragraph and a button, so it is
taller than the quiet bands and its scrim is heavier at the left */
.band-tall{ min-height:clamp(320px,44vh,460px); }
.band-tall .over{ padding:44px 6%; }
.band-tall .band-sub{ font-size:.98em; font-weight:400; line-height:1.7; color:#c9d4d8;
max-width:56ch; margin:18px 0 0; }
.band-tall .band-cta{ margin-top:24px; }
/* ---------- the five-block subject spine ---------- */
.block{ padding:46px 0; border-top:1px solid var(--hair); }
.block:first-of-type{ border-top:none; }
.block-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.block-n{ font-family:"Open Sans",sans-serif; font-size:.72em; font-weight:700; letter-spacing:.18em;
color:var(--accent); }
.block h2{ margin:0 0 10px; font-size:1.55em; }
/* ---------- product shelf (reads the shop registry) ---------- */
.shelf{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:22px; }
.pcard{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--nav-border);
border-radius:12px; overflow:hidden; text-decoration:none; color:inherit;
transition:border-color .18s ease, transform .15s ease; }
.pcard:hover{ border-color:var(--accent); transform:translateY(-2px); }
.pcard .thumb{ aspect-ratio:3/4; background:var(--bg); border-bottom:1px solid var(--nav-border);
display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pcard .thumb img{ width:100%; height:100%; object-fit:cover; }
.pcard .thumb .glyph{ font-size:2.2em; color:var(--accent); opacity:.5; }
.pcard .meta{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:5px; flex:1; }
.pcard .fam{ font-family:"Open Sans",sans-serif; font-size:.62em; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--accent); }
.pcard .nm{ font-size:.95em; font-weight:700; line-height:1.35; }
.pcard .tg{ font-size:.8em; color:var(--muted); line-height:1.5; }
.pcard .ft{ margin-top:auto; padding-top:10px; font-size:.76em; color:var(--muted2); }
.shelf-foot{ margin-top:20px; }
/* filter bar on the catalogue wall */
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 8px; }
.chip{ font-family:"Open Sans",sans-serif; font-size:.74em; font-weight:600; letter-spacing:.04em;
padding:7px 15px; border-radius:30px; border:1px solid var(--nav-border); background:var(--card);
color:var(--muted); cursor:pointer; transition:all .16s ease; }
.chip:hover{ border-color:var(--accent); color:var(--accent); }
.chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* ---------- state notes: never claim more than is true ---------- */
.state{ display:inline-flex; align-items:center; gap:7px; font-family:"Open Sans",sans-serif;
font-size:.7em; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
padding:5px 12px; border-radius:20px; border:1px solid var(--nav-border); color:var(--muted); }
.state.live{ color:var(--accent); border-color:var(--accent); }
.state::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
/* ---------- lists of measured things ---------- */
.layers{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 26px; margin:18px 0 0;
padding:0; list-style:none; }
.layers li{ text-indent:0; padding:9px 0; margin:0; border-bottom:1px solid var(--hair);
font-size:.88em; color:var(--muted); }
.layers li b{ color:var(--ink); font-weight:600; }
/* ---------- FAQ ---------- */
.faq-list{ max-width:780px; margin:26px auto 0; text-align:left; }
.faq-item{ border-top:1px solid var(--hair); padding:22px 2px; }
.faq-item:last-child{ border-bottom:1px solid var(--hair); }
.faq-item h3{ font-size:1.06em; font-weight:700; margin:0 0 8px; line-height:1.4; }
.faq-item p{ margin:0; line-height:1.72; color:var(--muted); }
.dark-section .faq-item p{ color:#b8c9c0; }
/* ---------- footer ---------- */
footer{ background:var(--footer-bg); color:var(--section-dark-text); }
footer a{ color:#ccc; text-decoration:none; }
footer a:hover{ color:var(--accent-light); }
.f-top{ border-top:1px solid rgba(245,244,240,.12); border-bottom:1px solid rgba(4,120,87,.4);
padding:40px 40px 36px; display:flex; align-items:flex-end; justify-content:space-between;
gap:24px; flex-wrap:wrap; }
.f-top p{ font-size:1.35em; font-weight:700; line-height:1.3; color:var(--section-dark-text); margin:0; }
.f-top em{ font-style:italic; font-weight:400; color:#aaa; }
.f-note{ font-size:.78em; color:#888; text-align:right; line-height:1.6; font-style:italic; }
.f-note a{ color:#aaa; text-decoration:underline; text-underline-offset:3px; }
/* Five columns: the brand block, then the four the reader might actually be
looking for — the pillars, the things built on them, the company, the law.
The old site ran four because it had no column for the pillars; here they
are the argument, so they get their own. */
.footer-cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr 1fr 1fr; gap:0; padding:48px 40px;
border-bottom:1px solid rgba(245,244,240,.08); }
.footer-cols>div+div{ padding-left:32px; border-left:1px solid rgba(245,244,240,.08); }
.footer-cols .brand{ padding-right:40px; text-align:center; }
.footer-cols .brand img{ width:110px; margin:0 auto 16px; }
.footer-cols h4{ font-size:.7em; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
color:var(--accent); margin:0 0 18px; }
.footer-cols h4+h4{ margin-top:24px; }
.footer-cols p{ margin-bottom:10px; font-size:.88em; }
.f-legal{ padding:20px 40px; display:flex; align-items:center; justify-content:space-between;
gap:16px; flex-wrap:wrap; }
.f-legal p{ font-size:.75em; color:var(--footer-muted); margin:0; }
/* ---------- imagery ------------------------------------------------------
Every image on this site is a frame our own engine rendered, or a map plate
it drew. Nothing is stock and nothing is decoration standing in for a
capability we do not have. That is why the set is small: this is what there
is. The pages are cream and the pictures are night, so the image blocks are
the punctuation of the site rather than wallpaper behind the text. */
.figure-full{ position:relative; overflow:hidden; background:#05070d;
margin:0 0 40px; }
.figure-full > img{ width:100%; height:100%; object-fit:cover; display:block; }
/* the home hero: one picture, the promise over it */
.hero-shot{ position:relative; overflow:hidden; background:#05070d;
min-height:clamp(340px,62vh,560px); display:flex; align-items:flex-end;
margin:0 0 40px; }
.hero-shot .bg{ position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:1; }
/* The scrim is weighted to the LEFT, where the words are, so the right half of
the frame stays a picture instead of turning to mud. */
.hero-shot::after{ content:""; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(to right,rgba(5,7,13,.93) 0%,rgba(5,7,13,.80) 34%,
rgba(5,7,13,.34) 62%,rgba(5,7,13,.10) 100%),
linear-gradient(to top,rgba(5,7,13,.55) 0%,rgba(5,7,13,0) 55%); }
.hero-shot .over{ position:relative; z-index:2; width:100%;
max-width:1180px; margin:0 auto; padding:0 6% 52px; }
.hero-shot h1{ color:#f5f4f0; font-size:clamp(2em,4.4vw,3.1em); font-weight:700;
line-height:1.12; margin:0 0 14px; max-width:16ch; letter-spacing:-.01em; }
.hero-shot .lede{ color:#c9d4d8; max-width:52ch; font-size:1.06em; }
.hero-shot .eyebrow{ color:var(--accent-light); }
.hero-shot .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:24px;
align-items:center; }
.hero-shot .cta-row .cta-quiet{ color:#c9d4d8; }
.hero-shot .shot-note{ position:absolute; right:6%; bottom:14px; z-index:2;
font-family:"Open Sans",sans-serif; font-size:.64em; letter-spacing:.13em;
text-transform:uppercase; color:rgba(245,244,240,.42); }
/* the same device, shorter, as the title of a subject page */
.page-shot{ position:relative; overflow:hidden; background:#05070d;
min-height:clamp(240px,38vh,360px); display:flex; align-items:flex-end;
margin:0 0 40px; }
.page-shot .bg{ position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:1; }
.page-shot::after{ content:""; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(to right,rgba(5,7,13,.92) 0%,rgba(5,7,13,.78) 40%,
rgba(5,7,13,.30) 68%,rgba(5,7,13,.06) 100%),
linear-gradient(to top,rgba(5,7,13,.50) 0%,rgba(5,7,13,0) 60%); }
.page-shot .over{ position:relative; z-index:2; width:100%; max-width:1180px;
margin:0 auto; padding:0 6% 40px; }
.page-shot h1{ color:#f5f4f0; font-size:clamp(2em,4vw,2.6em); font-weight:700;
margin:0 0 12px; letter-spacing:-.01em; }
.page-shot .lede{ color:#c9d4d8; max-width:62ch; }
.page-shot .eyebrow{ color:var(--accent-light); }
/* a quiet full-width band used to break a long page */
.band{ position:relative; overflow:hidden; background:#05070d;
min-height:clamp(180px,26vh,260px); display:flex; align-items:center;
margin:0 0 40px; }
.band .bg{ position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; opacity:.92; }
.band::after{ content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(to right,rgba(5,7,13,.94) 0%,rgba(5,7,13,.72) 46%,
rgba(5,7,13,.20) 100%); }
.band .over{ position:relative; z-index:2; width:100%; max-width:1180px;
margin:0 auto; padding:28px 6%; }
.band .eyebrow{ color:var(--accent-light); }
.band p{ color:#e2e9ec; font-size:clamp(1.15em,2vw,1.6em); font-weight:700;
line-height:1.35; max-width:24ch; margin:0; }
.band p em{ font-style:italic; font-weight:400; color:#9fb0b8; }
/* a plate shown as itself, framed, with a caption underneath */
.plate{ margin:26px 0 0; }
.plate img{ width:100%; border-radius:14px; border:1px solid var(--nav-border);
background:#05070d; }
.plate figcaption{ margin-top:12px; font-size:.82em; color:var(--muted2);
line-height:1.65; }
/* a row of small square plates naming what a subject actually covers */
.artstrip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:26px 0 0; }
.artstrip figure{ margin:0; }
.artstrip img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px;
border:1px solid var(--nav-border); background:#05070d; }
.artstrip figcaption{ margin-top:10px; font-size:.82em; color:var(--muted); line-height:1.6; }
.artstrip figcaption b{ display:block; color:var(--ink); font-weight:600; font-size:1.03em;
margin-bottom:2px; }
/* ---------- doors, with the picture doing the work ---------- */
.door{ padding:0; overflow:hidden; border-color:var(--nav-border); }
.door:hover{ border-color:var(--accent); }
.door .shot{ display:block; aspect-ratio:4/3; overflow:hidden; background:#05070d; }
.door .shot img{ width:100%; height:100%; object-fit:cover;
transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.door:hover .shot img{ transform:scale(1.05); }
.door .body{ padding:22px 24px 26px; }
.door .body h3{ margin-bottom:6px; }
.dark-section .door{ background:var(--panel-dark); border-color:rgba(245,244,240,.14); }
.dark-section .door h3{ color:#f5f4f0; }
.dark-section .door p{ color:#9fb0b8; }
.dark-section .door:hover{ border-color:var(--accent-light); }
/* ---------- forms ----------
One form treatment for the whole site. The tools carry their own tightly
packed field styles (.mp-*, .cf-*) because they are instruments; this is for
ordinary page forms — the affiliate application and the waiting lists —
where the job is legibility, not density. Works on both section colours. */
.ca-form{ background:var(--card); border:1px solid var(--nav-border);
border-radius:20px; padding:40px 36px; }
.dark-section .ca-form{ background:var(--panel-dark); border-color:rgba(245,244,240,.14); }
.ca-fld{ margin-bottom:24px; }
.ca-fld.last{ margin-bottom:32px; }
.ca-fld label{ display:block; font-size:.78em; font-weight:700; letter-spacing:1.5px;
text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.ca-fld input,.ca-fld select,.ca-fld textarea{
width:100%; box-sizing:border-box; padding:14px 18px; border:1px solid var(--nav-border);
border-radius:10px; font-family:Raleway,sans-serif; font-size:.95em;
color:var(--ink); background:var(--bg); outline:none;
transition:border-color .18s ease; }
.ca-fld textarea{ resize:vertical; line-height:1.6; min-height:110px; }
.ca-fld select{ cursor:pointer; }
.ca-fld input:focus,.ca-fld select:focus,.ca-fld textarea:focus{ border-color:var(--accent); }
.ca-form button.cta-button{ width:100%; text-align:center; font-size:1em; padding:16px;
margin:0; border:none; cursor:pointer; font-family:Raleway,sans-serif; }
.ca-msg{ text-align:center; margin-top:16px; font-size:.88em; display:none; }
.ca-msg.ok{ display:block; color:var(--accent); }
.ca-msg.bad{ display:block; color:#c2410c; }
.dark-section .ca-msg.bad{ color:#fb923c; }
.ca-fine{ margin-top:14px; font-size:.78em; color:var(--muted2); font-style:italic;
text-align:center; }
.dark-section .ca-fine{ color:#8a958e; }
/* Inline single-field capture — the waiting-list strip. */
.ca-inline{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
max-width:460px; margin:0 auto; }
.ca-inline input{ flex:1 1 240px; box-sizing:border-box; padding:14px 18px;
border:1px solid var(--nav-border); border-radius:10px; font-family:Raleway,sans-serif;
font-size:.95em; color:var(--ink); background:var(--card); outline:none; }
.ca-inline input:focus{ border-color:var(--accent); }
.ca-inline button.cta-button{ margin:0; flex:0 0 auto; border:none; cursor:pointer;
font-family:Raleway,sans-serif; }
/* ---------- tier cards (affiliate commission bands) ---------- */
.tier{ background:var(--panel-dark); border:1px solid rgba(245,244,240,.14);
border-radius:16px; padding:36px 28px; text-align:center; }
.tier.mid{ border-color:var(--accent); }
.tier.top{ background:linear-gradient(135deg,var(--panel-dark) 0%,#0d2a1e 100%);
border-color:var(--accent-dark); }
.tier .lab{ font-size:.7em; font-weight:700; letter-spacing:2px; text-transform:uppercase;
color:#8a958e; margin-bottom:16px; }
.tier.mid .lab{ color:var(--accent); }
.tier.top .lab{ color:var(--accent-light); }
.tier .pct{ font-size:3em; font-weight:700; color:var(--section-dark-text); line-height:1;
margin-bottom:8px; font-variant-numeric:lining-nums; }
.tier .pct span{ font-size:.5em; }
.tier .bar{ width:32px; height:2px; background:#444; margin:16px auto; border-radius:2px; }
.tier.mid .bar{ background:var(--accent); }
.tier.top .bar{ background:var(--accent-dark); }
.tier .band-n{ font-size:.85em; color:#b9c4bd; line-height:1.6; margin-bottom:0; }
.tier .unlock{ font-size:.8em; color:#8a958e; margin-top:12px; margin-bottom:0; }
/* Numbered "how it works" steps. */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
max-width:860px; margin:0 auto; }
.steps .step{ text-align:center; padding:0 16px; }
.steps .n{ width:52px; height:52px; border-radius:50%; border:2px solid var(--accent);
display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
font-size:1.1em; font-weight:700; color:var(--accent); font-variant-numeric:lining-nums; }
.steps h3{ font-size:1em; margin-bottom:10px; }
.steps p{ font-size:.88em; color:var(--muted2); line-height:1.7; margin-bottom:0; }
.dark-section .steps p{ color:#b9c4bd; }
/* A single emphasised strip — used for the affiliate introductory offer. */
.strip{ background:var(--accent); padding:16px 40px; text-align:center; margin-bottom:40px; }
.strip p{ font-size:.85em; color:#fff; line-height:1.6; max-width:700px; margin:0 auto; }
/* Team cards — the contact page. */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.team .who{ background:var(--panel-dark); border:1px solid rgba(245,244,240,.14);
border-radius:14px; padding:26px 24px; }
.team .who h3{ font-size:.72em; font-weight:700; letter-spacing:2px; text-transform:uppercase;
color:var(--accent-light); margin-bottom:12px; }
.team .who .name{ font-size:1.05em; font-weight:600; color:var(--section-dark-text);
margin-bottom:6px; }
.team .who .mail{ font-size:.86em; margin-bottom:0; word-break:break-all; }
.team .who .mail a{ color:#b9c4bd; text-decoration:underline; text-underline-offset:3px; }
.team .who .mail a:hover{ color:var(--accent-light); }
/* ---------- responsive ---------- */
/* Five footer columns need a laptop. Below that the brand block takes the full
width and the four link columns go three-up; the 980 rule below then takes
them to two. Without this the columns squeeze narrow enough to break the
longest labels ("White-label publishing", "Data & API licensing") mid-phrase. */
@media (max-width:1100px){
.footer-cols{ grid-template-columns:repeat(3,1fr); }
.footer-cols>div+div{ padding-left:24px; }
.footer-cols .brand{ grid-column:1/-1; padding-right:0; margin-bottom:32px; }
.footer-cols .brand+div{ padding-left:0; border-left:none; }
}
@media (max-width:980px){
.house{ grid-template-columns:1fr; }
.house-part{ padding:22px 0; }
.house-part+.house-part{ padding-left:0; border-left:none; border-top:1px solid var(--hair); }
.steps{ grid-template-columns:1fr; gap:28px; }
.team{ grid-template-columns:repeat(2,1fr); }
.shelf{ grid-template-columns:repeat(3,1fr); }
.layers{ grid-template-columns:repeat(2,1fr); }
.artstrip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
/* On a phone the scrim has to work bottom-to-top, because there is no
"beside the picture" left to put the words in. The copy is then pushed
down the frame so the top of the picture survives as a picture instead of
arriving as a dark bar under the masthead. */
.hero-shot::after,.page-shot::after,.band::after{
background:linear-gradient(to top,rgba(5,7,13,.95) 0%,rgba(5,7,13,.86) 38%,
rgba(5,7,13,.44) 76%,rgba(5,7,13,.14) 100%); }
.hero-shot{ min-height:clamp(300px,58vh,440px); }
.hero-shot .over{ padding-top:clamp(96px,20vh,150px); padding-bottom:36px; }
.hero-shot h1{ max-width:none; }
.page-shot{ min-height:clamp(200px,32vh,280px); }
.page-shot .over{ padding-top:clamp(64px,13vh,104px); }
.band p{ max-width:none; }
.artstrip{ grid-template-columns:1fr 1fr; gap:12px; }
.artstrip figcaption{ font-size:.78em; }
.team{ grid-template-columns:1fr; }
.ca-form{ padding:32px 22px; }
.strip{ padding:16px 20px; }
}
@media (max-width:768px){
nav .nav-cta{ right:64px; gap:0; }
nav .nav-cta .nav-shop{ display:none; }
nav .nav-menu li.m-only{ display:flex; }
.hamburger{ display:flex; position:absolute; right:16px; top:50%; transform:translateY(-50%); }
.nav-menu{ display:none; flex-direction:column; align-items:center; width:100%; padding:10px 0 24px; gap:0; }
.nav-menu.open{ display:flex; }
.nav-menu li{ width:100%; text-align:center; padding:0; }
/* This said ::after. The separators moved to ::before (see the note beside
them) and this rule was left pointing at a pseudo-element that no longer
exists, so it killed nothing: the stacked phone menu carried a 1px green
tick at the far left of every full-width row while the name sat centred in
the middle of it. A separator between two names has to sit between them. */
.nav-menu li::before{ display:none !important; }
.nav-menu li a{ display:block; padding:14px 0; width:100%; justify-content:center; }
.g2,.g3,.g4{ grid-template-columns:1fr; }
.shelf{ grid-template-columns:repeat(2,1fr); }
.footer-cols{ grid-template-columns:1fr 1fr; padding:36px 24px; }
.footer-cols>div+div{ padding-left:0; border-left:none; }
.footer-cols .brand{ padding-right:0; }
}
@media (max-width:520px){
.layers{ grid-template-columns:1fr; }
.top-logo{ height:14vh; }
.main-heading{ font-size:2em; }
}