/* BUILD 2026-10-28 13:08 - brand.css. Open this file's URL in a browser; if the
date above is not the one you were told, the copy on the server
is stale and the upload did not land. */
/* ==========================================================
THE 100 MOVEMENT — SHARED STYLESHEET
Upload to: public_html/brand.css
The same void as /start, after dark. One material, no borders,
depth from light only. Structure comes from a margin rail,
not from boxes.
========================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
--void:#171a15; /* the one surface */
--well:#0f1210; /* pressed into it */
--lift:#1f231c; /* pulled out of it */
--milk:#d9dccf; /* her milky white, now the ink */
--ink:#c6cabe;
--quiet:#8d9287;
--faint:#878b81; /* 4.5:1 minimum — it carries 10px labels */
--green:#7da368;
--nav:64px;
--rail:185px;
--gut:56px;
/* light from upper left, same as /start */
--ridge:0 -1px 0 rgba(255,255,255,0.045), 0 1px 0 rgba(0,0,0,0.6);
--up:-1px -1px 0 rgba(255,255,255,0.045), -16px -16px 32px rgba(255,255,255,0.018),
2px 2px 2px rgba(0,0,0,0.5), 16px 16px 34px rgba(0,0,0,0.5);
--up-sm:-1px -1px 0 rgba(255,255,255,0.04), 1px 1px 1px rgba(0,0,0,0.5),
8px 8px 18px rgba(0,0,0,0.36);
/* No inner white pool: at this size it draws a visible rectangle.
The darker fill plus a 1px bottom rim is enough of a recess. */
--in:inset 2px 2px 4px rgba(0,0,0,0.7), inset 16px 16px 34px rgba(0,0,0,0.45),
inset -1px -1px 0 rgba(255,255,255,0.05);
--in-sm:inset 1px 1px 2px rgba(0,0,0,0.58), inset 6px 6px 14px rgba(0,0,0,0.32),
inset -1px -1px 0 rgba(255,255,255,0.032);
/* legacy aliases — older markup references these inline */
--g:var(--green); --w:var(--milk); --m:var(--quiet);
--d:var(--void); --b:rgba(255,255,255,0.055); --bg:var(--void);
}
html{scroll-behavior:smooth;background:var(--void);}
/* Two faces, each with one job.
Barlow is the reading face and the default, so anything that is a
sentence gets it without asking. Jost is pinned by name onto the
headlines, the tracked uppercase labels and the buttons.
Barlow Condensed - the same family as Barlow, just its narrow width -
draws the 100 and the numerals, which is what ties the body copy and
the mark together. */
body{background:var(--void);color:var(--ink);
font-family:'Barlow',sans-serif;font-weight:300;
letter-spacing:0.1px;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1010px;margin:0 auto;padding:0 56px;}
/* Every link in running text, not just the ones with a class.
Buttons opt out — they carry their own colour. */
a:not(.btn-primary):not(.btn-ghost):not(.nav-btn):not(.nav-l):not(.nav-logo):not(.menu-panel a){
color:var(--green);}
:is(.body,.note,.caps,.faq-a,.q-a,.alt-b,.callout,.tmpl,.rule-list,.plain-list,
.tbl,.contact-row,.quick-foot,.point-desc,.mid-s,.cta-sub,.contact-sub,.page-sub)
a:not(.btn-primary):not(.btn-ghost){
color:var(--green);text-decoration:none;
border-bottom:1px solid rgba(125,163,104,0.3);
transition:border-color .3s;}
:is(.body,.note,.caps,.faq-a,.q-a,.alt-b,.callout,.tmpl,.rule-list,.plain-list,
.tbl,.contact-row,.quick-foot,.mid-s,.cta-sub,.contact-sub,.page-sub)
a:not(.btn-primary):not(.btn-ghost):hover{
border-bottom-color:var(--green);}
/* Paragraph rhythm wherever prose runs. */
.faq-a p,.q-a p,.alt-b p,.caps p,.note p,.callout p,.quick-foot p,
.mid-s p,.contact-sub p,.page-sub p{margin-bottom:17px;}
.faq-a p:last-child,.q-a p:last-child,.alt-b p:last-child,.caps p:last-child,
.note p:last-child,.callout p:last-child,.quick-foot p:last-child,
.mid-s p:last-child,.contact-sub p:last-child,.page-sub p:last-child{margin-bottom:0;}
/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:var(--void);border-bottom:none;}
nav .wrap{height:var(--nav);display:flex;justify-content:space-between;
align-items:center;padding-top:0;padding-bottom:0;}
.nav-logo{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:5px;
color:var(--milk);text-transform:uppercase;text-decoration:none;}
.nav-r{display:flex;align-items:center;gap:34px;}
.nav-l{font-family:'Jost',sans-serif;font-size:11px;font-weight:400;letter-spacing:3px;color:var(--faint);
text-transform:uppercase;text-decoration:none;transition:color .3s;}
.nav-l:hover{color:var(--milk);}
.nav-btn{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:3px;color:var(--milk);
text-transform:uppercase;text-decoration:none;padding:13px 24px;border-radius:7px;
/* The same machined plateau as the big buttons, scaled down. */
background:#282d24;
border:none;
box-shadow:
-1px -1px 0 rgba(255,255,255,0.38),
-2px -2px 0 rgba(255,255,255,0.18),
1px 1px 0 rgba(0,0,0,1),
2px 2px 2px rgba(0,0,0,0.65),
6px 6px 14px rgba(0,0,0,0.45);
transition:color .25s ease, box-shadow .25s ease, background .25s ease;}
.nav-btn:hover{color:var(--green);}
.nav-btn:active{box-shadow:var(--in-sm);background:var(--well);}
/* ---------- page head ----------
Title sits low and oversized. The eyebrow drops into the rail
column so one invisible line runs the length of the page. */
.hero{background:var(--void);border-bottom:none;}
.hero .wrap{padding-top:120px;padding-bottom:104px;
display:grid;grid-template-columns:var(--rail) 1fr;column-gap:var(--gut);
align-items:end;}
.page-eye{font-family:'Jost',sans-serif;grid-column:1;font-size:10px;letter-spacing:5px;text-transform:uppercase;
color:var(--green);font-weight:500;padding-bottom:16px;line-height:1.9;}
.page-eye::before{display:none;}
.page-title{font-family:'Jost',sans-serif;grid-column:2;font-size:clamp(31px,6.2vw,50px);font-weight:300;
line-height:1.12;text-transform:none;letter-spacing:-0.3px;color:var(--milk);}
.page-sub{grid-column:2;font-size:17px;font-weight:300;color:var(--quiet);
margin-top:34px;max-width:52ch;line-height:1.95;}
/* ---------- the rail ----------
Blocks are not cards. They are one slab creased by light. */
.content{padding:0 0 118px;}
.block{display:grid;grid-template-columns:var(--rail) 1fr;column-gap:var(--gut);
padding:62px 0;background:none;border-bottom:none;box-shadow:var(--ridge);}
.block:last-child{box-shadow:0 -1px 0 rgba(255,255,255,0.045);}
.block > *{grid-column:2;}
.block-eye{font-family:'Jost',sans-serif;grid-column:1;grid-row:1 / span 50;align-self:start;
font-size:10px;letter-spacing:5px;text-transform:uppercase;
color:var(--green);font-weight:500;line-height:1.9;margin-bottom:0;}
.block-eye::before{display:none;}
.block-title{font-family:'Jost',sans-serif;font-size:clamp(24px,4.2vw,34px);font-weight:300;
text-transform:none;letter-spacing:-0.2px;color:var(--milk);
margin-bottom:26px;line-height:1.16;max-width:42ch;}
.body{font-size:17px;font-weight:300;color:var(--quiet);line-height:1.85;max-width:62ch;}
.body strong{color:var(--ink);font-weight:500;}
.body a{color:var(--green);text-decoration:none;
border-bottom:1px solid rgba(125,163,104,0.3);}
.body p{margin-bottom:19px;}
.body p:last-child{margin-bottom:0;}
.note{font-size:17px;font-weight:300;color:var(--quiet);line-height:1.85;max-width:62ch;}
/* One word carried in green, the same device the home page uses on
"Movement". It only ever marks the word the sentence turns on. */
.body .g,.block-title .g{color:var(--green);}
/* Small print that has to be read but must not compete with the copy
above it: the nonprofit status line, and anything like it later. */
.fine{font-size:14px;font-weight:300;color:var(--quiet);line-height:1.7;
max-width:62ch;opacity:0.8;margin-top:26px;}
/* ---------- lists ---------- */
.rule-list{list-style:none;max-width:62ch;}
.rule-list li{padding:22px 0;font-size:15px;font-weight:300;color:var(--quiet);
line-height:1.95;display:flex;gap:28px;box-shadow:var(--ridge);}
.rule-list li:first-child{box-shadow:0 1px 0 rgba(0,0,0,0.6);}
.rule-list li:last-child{box-shadow:0 -1px 0 rgba(255,255,255,0.045);}
.rule-num{font-size:11px;font-weight:500;color:var(--faint);
letter-spacing:3px;min-width:26px;margin-top:6px;}
.rule-list li strong{color:var(--ink);font-weight:500;}
.rule-list li a{color:var(--green);text-decoration:none;
border-bottom:1px solid rgba(125,163,104,0.3);}
.plain-list{list-style:none;margin-top:10px;max-width:62ch;}
.plain-list li{padding:16px 0;font-size:15px;font-weight:300;color:var(--quiet);
line-height:1.9;box-shadow:var(--ridge);}
.plain-list li:first-child{box-shadow:0 1px 0 rgba(0,0,0,0.6);}
.plain-list li:last-child{box-shadow:0 -1px 0 rgba(255,255,255,0.045);}
.plain-list li strong{color:var(--ink);font-weight:500;}
/* ---------- pressed callouts ----------
The only recessed shapes on the page. For the things that must
not be skimmed past. */
.callout{padding:30px 34px;margin:30px 0;max-width:62ch;border-radius:18px;
background:var(--well);box-shadow:var(--in-sm);border-left:none;
font-size:15px;font-weight:300;color:var(--quiet);line-height:2;}
.callout strong{color:var(--ink);font-weight:500;}
.callout a{color:var(--green);text-decoration:none;
border-bottom:1px solid rgba(125,163,104,0.3);}
/* Reading copy, set a size up - not a heading. Stays on Barlow. */
.big-note{padding:36px 38px;max-width:62ch;border-radius:20px;border:none;
background:var(--well);box-shadow:var(--in);
font-size:17px;font-weight:400;color:var(--milk);line-height:1.8;
letter-spacing:0.2px;}
.tmpl{padding:30px 34px;max-width:58ch;margin-top:24px;border-radius:18px;
background:var(--well);box-shadow:var(--in-sm);border-left:none;
font-size:16px;font-weight:300;color:var(--quiet);line-height:2;}
.tmpl strong{color:var(--ink);font-weight:500;}
.caps{font-size:13.5px;font-weight:300;color:var(--quiet);
line-height:2.05;max-width:66ch;letter-spacing:0.3px;}
.updated{font-family:'Jost',sans-serif;font-size:10px;color:var(--faint);letter-spacing:5px;
text-transform:uppercase;font-weight:500;margin-top:40px;}
/* ---------- tables ---------- */
.tbl{width:100%;max-width:62ch;border-collapse:collapse;margin-top:8px;}
.tbl td{padding:21px 0;font-size:15px;font-weight:300;color:var(--quiet);
line-height:1.9;vertical-align:top;box-shadow:var(--ridge);}
.tbl td:first-child{font-family:'Jost',sans-serif;width:180px;padding-right:28px;font-size:10px;font-weight:500;
letter-spacing:5px;text-transform:uppercase;color:var(--milk);padding-top:25px;}
.tbl tr:first-child td{box-shadow:0 1px 0 rgba(0,0,0,0.6);}
.tbl tr:last-child td{box-shadow:0 -1px 0 rgba(255,255,255,0.045);}
/* ---------- scoring ----------
A sequence, so it reads as one ledger, not four tiles. */
.points-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;
max-width:62ch;margin-top:4px;background:none;}
.point-block{padding:32px 0;border-radius:0;background:none;box-shadow:var(--ridge);}
.point-block.dark{background:none;}
.point-cat{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:5px;text-transform:uppercase;
color:var(--faint);font-weight:500;margin-bottom:14px;display:block;}
.point-val{font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:800;
color:var(--milk);line-height:1;letter-spacing:-0.03em;margin-bottom:10px;display:block;}
.point-desc{font-size:13px;font-weight:300;color:var(--quiet);line-height:1.8;}
.point-total{grid-column:1/-1;padding:34px;border-radius:18px;margin-top:26px;
background:var(--well);box-shadow:var(--in);}
.point-total .point-cat{color:var(--green);}
.point-total .point-val{color:var(--milk);}
.point-total .point-desc{color:var(--quiet);}
/* ---------- FAQ ---------- */
.faq-section{width:100%;border-bottom:none;background:var(--void);}
.faq-section .wrap{padding-top:0;padding-bottom:0;
display:grid;grid-template-columns:var(--rail) 1fr;column-gap:var(--gut);}
.faq-section.dark{background:var(--void);}
.faq-section .wrap > *{grid-column:2;}
.cat-eye{font-family:'Jost',sans-serif;grid-column:1;grid-row:1 / span 50;align-self:start;
font-size:10px;letter-spacing:5px;text-transform:uppercase;
color:var(--green);font-weight:500;margin-bottom:0;line-height:1.9;
/* Not sticky. Pinned, it hung in the rail for the whole category
while the questions scrolled past it, which reads as a stuck
element rather than a label. */
align-self:start;padding-top:44px;}
.cat-eye::before{display:none;}
.faq-item{padding:44px 0;margin-bottom:0;border-radius:0;
background:none;box-shadow:var(--ridge);border-bottom:none;}
.faq-q{font-family:'Jost',sans-serif;font-size:clamp(21px,3.2vw,27px);font-weight:300;text-transform:none;
letter-spacing:-0.2px;color:var(--milk);margin-bottom:18px;line-height:1.22;
max-width:42ch;}
/* ---- the FAQ as an accordion ------------------------------------
The .acc class is added by the script, not written into the page.
Without it every answer is simply visible - which is what a search
engine sees, and what anyone whose JavaScript failed sees. The
collapsing is an enhancement on top of a page that already works.
Same +/- mechanism as the quick questions on /contact. */
.acc .faq-q{width:100%;max-width:none;background:none;border:none;cursor:pointer;
text-align:left;display:flex;justify-content:space-between;align-items:baseline;
gap:20px;margin-bottom:0;padding:0;transition:color .3s;}
.acc .faq-q:hover{color:var(--green);}
.acc .faq-q:focus-visible{outline:2px solid var(--green);outline-offset:6px;}
.acc .faq-q .faq-mark{font-size:0.8em;color:var(--faint);flex-shrink:0;
font-weight:400;line-height:1;transition:color .3s;}
.acc .faq-q:hover .faq-mark{color:var(--green);}
.acc .faq-a{display:none;padding-top:18px;}
.acc .faq-a.open{display:block;}
.acc .faq-item{padding:26px 0;}
.faq-a{font-size:17px;font-weight:300;color:var(--quiet);line-height:1.85;max-width:60ch;}
.faq-a strong{color:var(--ink);font-weight:500;}
.faq-a a{color:var(--green);text-decoration:none;
border-bottom:1px solid rgba(125,163,104,0.3);}
.quick{padding:42px 44px;border-radius:22px;background:var(--well);box-shadow:var(--in);}
.quick-h{font-family:'Jost',sans-serif;font-size:20px;font-weight:400;color:var(--milk);
margin-bottom:22px;letter-spacing:0.2px;}
.quick-foot{font-size:14px;font-weight:300;color:var(--faint);line-height:1.9;margin-top:26px;}
.q{box-shadow:var(--ridge);}
.q:last-child{box-shadow:0 -1px 0 rgba(255,255,255,0.045);}
.q-btn{width:100%;background:none;border:none;cursor:pointer;text-align:left;
padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:18px;
font-family:'Jost',sans-serif;font-size:16px;font-weight:300;color:var(--ink);
transition:color .3s;}
.q-btn:hover{color:var(--milk);}
.q-mark{font-size:18px;color:var(--faint);flex-shrink:0;font-weight:400;transition:color .3s;}
.q-btn:hover .q-mark{color:var(--green);}
/* Collapsed until the script adds .open — the markup depends on it. */
.q-a{display:none;font-size:15px;font-weight:300;color:var(--quiet);line-height:2;
padding:0 0 24px;max-width:60ch;}
.q-a.open{display:block;}
/* ---- the menu ---------------------------------------------------
The same component the home page uses, moved here so every content
page shares one copy. Replaces the loose nav links: the pages that
are not the FAQ or Who We Are were unreachable from the bar, and
adding more links to it does not scale. */
.menu{position:relative;}
.menu-btn{font-family:'Jost',sans-serif;font-size:11px;font-weight:400;
letter-spacing:3px;text-transform:uppercase;color:var(--faint);
background:none;border:none;padding:8px 0;cursor:pointer;
display:flex;align-items:center;gap:8px;transition:color .3s;}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{color:var(--milk);}
.menu-btn:focus-visible{outline:2px solid var(--green);outline-offset:4px;}
.menu-caret{font-size:9px;line-height:1;transition:transform .25s;}
.menu-btn[aria-expanded="true"] .menu-caret{transform:rotate(180deg);}
.menu-panel{position:absolute;top:calc(100% + 14px);right:0;z-index:60;
min-width:212px;padding:10px;border-radius:18px;
background:var(--lift);box-shadow:var(--up-sm);}
.menu-panel[hidden]{display:none;}
.menu-panel a{font-family:'Jost',sans-serif;display:block;padding:13px 18px;
border-radius:12px;font-size:12px;font-weight:400;letter-spacing:2.2px;
text-transform:uppercase;color:var(--ink);text-decoration:none;
white-space:nowrap;transition:color .2s, background .2s;}
.menu-panel a:hover,.menu-panel a:focus-visible{
color:var(--milk);background:var(--void);}
/* On a phone it anchors to the screen, not the button, so a narrow
viewport cannot push it off the right edge. */
@media(max-width:560px){
.menu-panel{position:fixed;top:calc(var(--nav) + 10px);
left:16px;right:16px;min-width:0;}
.menu-btn{letter-spacing:2px;gap:6px;}
}
/* ---------- CTA ----------
The one lifted shape on the page. Boldness spent here.
Stays on the rail: one line runs the whole document. */
.cta-sec{border-bottom:none;background:var(--void);}
.cta-sec .wrap{padding-top:96px;padding-bottom:96px;
display:grid;grid-template-columns:var(--rail) 1fr;column-gap:var(--gut);}
.cta-sec .wrap > *{grid-column:2;}
/* A row of buttons needs air between them. */
.contact-row:has(> .btn-ghost),.contact-row:has(> .btn-primary),
.cta-row{display:flex;flex-wrap:wrap;gap:16px;padding-top:30px;
box-shadow:none;max-width:none;}
.btn-primary + .btn-ghost,.btn-ghost + .btn-ghost,
.btn-ghost + .btn-primary,.btn-primary + .btn-primary{margin-left:16px;}
.contact-row:has(> .btn-ghost) .btn-ghost + .btn-ghost,
.cta-row .btn-ghost + .btn-ghost{margin-left:0;}
.cta-head{font-family:'Jost',sans-serif;font-size:clamp(31px,6.2vw,50px);font-weight:300;text-transform:none;
letter-spacing:-0.3px;color:var(--milk);margin-bottom:18px;line-height:1.12;
max-width:42ch;}
.cta-sub{font-size:17px;font-weight:300;color:var(--quiet);
margin-bottom:42px;line-height:1.95;max-width:46ch;}
.mid-cta{padding:58px;border-radius:26px;background:var(--lift);
box-shadow:var(--up);margin:36px 0;}
.mid-h{font-family:'Jost',sans-serif;font-size:20px;font-weight:400;color:var(--milk);
margin-bottom:14px;letter-spacing:0.2px;}
.mid-s{font-size:16px;font-weight:300;color:var(--quiet);
line-height:1.95;margin-bottom:32px;max-width:48ch;}
.btn-primary,.btn-ghost{display:inline-block;justify-self:start;align-self:start;
cursor:pointer;border:none;
padding:21px 48px;
font-family:'Jost',sans-serif;font-size:13px;font-weight:500;letter-spacing:3.5px;
text-transform:uppercase;text-decoration:none;
/* ---- machined from the same light as the 100 ------------------
The mark is a raised plateau: a hard white edge upper-left where
the light lands, black lower-right where it does not, then a long
soft cast shadow. Identical offsets, as box-shadow instead of
text-shadow. The gradient is what reads as metal rather than
plastic. No border - the bevel is the edge. */
background:#282d24;
color:var(--ink);
border:none;border-radius:9px;
box-shadow:
-1px -1px 0 rgba(255,255,255,0.38),
-2px -2px 0 rgba(255,255,255,0.18),
-3px -3px 2px rgba(255,255,255,0.08),
1px 1px 0 rgba(0,0,0,1),
2px 2px 0 rgba(0,0,0,0.9),
4px 4px 3px rgba(0,0,0,0.7),
10px 10px 22px rgba(0,0,0,0.5);
transition:color .25s ease, box-shadow .25s ease, background .25s ease;}
/* Green arrives on hover, and the plateau lifts a little higher. */
.btn-primary:hover,.btn-ghost:hover{color:var(--green);
background:#31372c;}
/* Pressed: the plateau sinks into the surface. */
.btn-primary:active,.btn-ghost:active,.nav-btn:active{
background:#1b1f19;color:var(--green);
box-shadow:inset 2px 2px 5px rgba(0,0,0,0.9),
inset -1px -1px 0 rgba(255,255,255,0.10);}
/* Secondary: sits flush in the surface instead of standing on it. */
.btn-ghost{background:none;border-radius:9px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16);
color:var(--quiet);}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(125,163,104,0.45);color:var(--green);}
.btn-ghost:active{background:var(--well);box-shadow:var(--in-sm);color:var(--green);}
:where(a,button,input,textarea):focus-visible{outline:2px solid var(--green);outline-offset:5px;}
/* ---------- contact ----------
Sits on the same rail as everything above it. */
.form-sec .wrap,.contact-sec .wrap{
display:grid;grid-template-columns:var(--rail) 1fr;column-gap:var(--gut);}
.form-sec .wrap > *,.contact-sec .wrap > *{grid-column:2;}
.form-sec .wrap{padding-top:0;padding-bottom:96px;}
/* A plain container. Its children are the shapes — a slab holding
slabs just reads as clutter. */
.form-box{padding:0;background:none;box-shadow:none;max-width:100%;}
.form-box > form{margin:34px 0;}
/* .field is the wrapper: a label above its control. */
.field{display:block;width:100%;margin-bottom:22px;padding:0;
border:none;border-radius:0;background:none;box-shadow:none;}
.field label{font-family:'Jost',sans-serif;display:block;font-size:10px;letter-spacing:5px;
text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:11px;}
.field input,.field select,.field textarea{
width:100%;padding:19px 24px;border:none;border-radius:14px;
background:var(--well);box-shadow:var(--in-sm);
font-family:'Jost',sans-serif;font-size:15px;font-weight:300;color:var(--milk);
outline:none;transition:box-shadow .3s;appearance:none;-webkit-appearance:none;}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:var(--in);}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field textarea{min-height:170px;resize:vertical;line-height:1.8;}
.field select{cursor:pointer;padding-right:50px;
background-image:linear-gradient(45deg,transparent 50%,#878b81 50%),
linear-gradient(135deg,#878b81 50%,transparent 50%);
background-position:calc(100% - 25px) calc(50% + 1px), calc(100% - 19px) calc(50% + 1px);
background-size:6px 6px, 6px 6px;background-repeat:no-repeat;}
.field select option{background:#14160f;color:var(--milk);}
/* The submit sits apart from the stack it completes. */
#contact-form .btn-primary{margin-top:10px;}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none;}
.msg{font-size:14px;font-weight:300;line-height:1.9;margin-top:16px;color:var(--green);}
.contact-sec .wrap{padding-top:0;padding-bottom:96px;}
.contact-head{font-family:'Jost',sans-serif;font-size:clamp(26px,4.4vw,36px);font-weight:300;
color:var(--milk);margin-bottom:16px;letter-spacing:-0.2px;max-width:42ch;}
.contact-sub{font-size:16px;font-weight:300;color:var(--quiet);
line-height:2;margin-bottom:30px;max-width:52ch;}
.contact-row{font-size:15px;font-weight:300;color:var(--quiet);line-height:2;
padding:18px 0;box-shadow:var(--ridge);max-width:62ch;}
.contact-row:last-child{box-shadow:0 -1px 0 rgba(255,255,255,0.045);}
.contact-row strong{color:var(--ink);font-weight:500;}
.contact-row a:not(.btn-primary):not(.btn-ghost){
color:var(--green);text-decoration:none;}
.alt{padding:42px 44px;border-radius:22px;background:var(--well);
box-shadow:var(--in);margin-top:26px;}
.alt-h{font-family:'Jost',sans-serif;font-size:20px;font-weight:400;color:var(--milk);
margin-bottom:14px;letter-spacing:0.2px;}
.alt-b{font-size:15px;font-weight:300;color:var(--quiet);line-height:2;max-width:56ch;}
/* ---------- footer ---------- */
footer{border-top:none;background:var(--void);
box-shadow:0 -1px 0 rgba(255,255,255,0.045);}
footer .wrap{padding-top:48px;padding-bottom:60px;display:flex;
justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;}
.f-logo{font-size:11px;font-weight:500;letter-spacing:5px;color:var(--milk);}
.f-links{font-size:11px;font-weight:400;color:var(--faint);letter-spacing:2px;line-height:2.4;}
.f-links a{color:var(--faint);text-decoration:none;transition:color .3s;}
.f-links a:hover{color:var(--milk);}
.f-handle{font-size:11px;font-weight:400;color:var(--faint);letter-spacing:3px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
/* Social icons, sitting before the handle. Each link is padded to a
32px target so a thumb can hit it; the gap is small to compensate. */
.f-social{display:flex;gap:2px;margin-left:-8px;}
.f-social a{color:var(--faint);display:inline-flex;padding:8px;transition:color .3s;}
.f-social a:hover{color:var(--milk);}
.f-social svg{width:16px;height:16px;fill:currentColor;display:block;}
@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}
@media(max-width:1024px) and (min-width:861px){
:root{--rail:155px;--gut:40px;}
.wrap{padding:0 40px;}
}
/* Rail collapses: the label returns above its content, where it
still reads as a marker rather than decoration. */
@media(max-width:860px){
:root{--nav:56px;}
.wrap{padding:0 24px;}
.hero .wrap,.block,.faq-section .wrap,
.form-sec .wrap,.contact-sec .wrap,.cta-sec .wrap{display:block;}
.hero .wrap{padding-top:76px;padding-bottom:64px;}
.page-eye{padding-bottom:0;margin-bottom:20px;}
.page-title{font-family:'Jost',sans-serif;font-size:clamp(46px,14vw,78px);letter-spacing:-0.035em;}
.block-eye,.cat-eye{position:static;margin-bottom:22px;padding-top:0;}
.cat-eye{padding-top:36px;}
.block{padding:44px 0;}
.content{padding-bottom:70px;}
.faq-item{padding:34px 0;}
.mid-cta,.form-box{padding:36px 28px;border-radius:22px;}
.quick,.alt{padding:32px 26px;border-radius:20px;}
.big-note,.callout,.tmpl{padding:26px 24px;}
.points-grid{grid-template-columns:1fr;}
.point-block{padding:28px 0;}
.point-total{grid-column:1;padding:28px 26px;}
.rule-list li{flex-direction:column;gap:7px;}
.tbl td{display:block;box-shadow:none;padding:4px 0;}
.tbl td:first-child{width:auto;padding-right:0;padding-top:18px;}
.tbl tr{display:block;box-shadow:var(--ridge);padding-bottom:18px;}
.cta-sec .wrap{padding-top:62px;padding-bottom:62px;}
.btn-primary,.btn-ghost{padding:19px 38px;letter-spacing:0.24em;}
footer .wrap{flex-direction:column;align-items:flex-start;gap:18px;}
}
@media(max-width:560px){
.nav-l{display:none;}
/* At 390px the bar runs out of room and both the logo and the
button break onto a second line. Tighten them and forbid the
wrap outright. */
nav .wrap{padding-left:16px;padding-right:16px;}
.nav-logo{font-size:10px;letter-spacing:2.6px;white-space:nowrap;}
.nav-btn{padding:11px 18px;letter-spacing:2px;white-space:nowrap;}
/* 16px or iOS zooms the page on focus. */
.field input,.field select,.field textarea{font-size:16px;}
}
/* ---- large desktop ------------------------------------------------
The only tiers that existed were 1024 and below, so every desktop
from a 13" laptop to a 4K monitor rendered the same 1010px column.
These widen the shell, the rail and the type together. */
@media(min-width:1200px){
:root{--rail:215px;--gut:72px;}
.wrap{max-width:1180px;padding:0 64px;}
.body,.note{font-size:17.5px;}
.faq-a{font-size:17.5px;}
}
@media(min-width:1600px){
:root{--rail:245px;--gut:88px;}
.wrap{max-width:1320px;padding:0 72px;}
.body,.note,.faq-a{font-size:18px;max-width:64ch;}
.page-title{font-family:'Jost',sans-serif;font-size:clamp(64px,5vw,96px);}
}