:root{--paper:#f4f0e6;--paper-2:#e9e4d7;--ink:#121212;--muted:#5f5b52;--sun:#f5b301;--ember:#c2410c;--blue:#0b69a3;--blue-dark:#6cc0f0;--surface:var(--paper);--surface-2:var(--paper-2);--text:var(--ink);--secondary:var(--muted);--border:#c9c3b7;--link:var(--blue);--action:var(--ember);--action-text:#ffffff;--sans:Archivo,Arial,sans-serif;--serif:'Instrument Serif',Georgia,serif;--mono:'JetBrains Mono',monospace;--max:1180px;--space:clamp(22px,5vw,72px);color-scheme:light}
:root[data-theme="dark"]{--surface:#121212;--surface-2:#23221f;--text:#f4f0e6;--secondary:#c8c2b6;--border:#514e47;--link:#6cc0f0;color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--surface:#121212;--surface-2:#23221f;--text:#f4f0e6;--secondary:#c8c2b6;--border:#514e47;--link:#6cc0f0;color-scheme:dark}}
/* ---------------------------------------------------------------------------------------------
   The editorial office. Register: the owner's own office paper (the job card, the carbon copy,
   the rubber stamp) set like a magazine. The three lines above are the token authority that the
   client documents mirror; everything below builds on them and adds no new base colour.
   --------------------------------------------------------------------------------------------- */
:root{
 --wide:1280px;--gutter:clamp(20px,4.4vw,64px);
 --step--1:13px;--step-0:clamp(17px,.25vw + 16px,19px);--step-1:clamp(19px,.7vw + 16.5px,24px);--step-2:clamp(21px,.8vw + 17.5px,29px);--step-3:clamp(31px,3.3vw + 18px,68px);--step-4:clamp(40px,6.4vw + 14px,112px);
 --ease-out:cubic-bezier(.16,.84,.3,1);--quick:180ms;--settle:320ms;
 --line:1.5px solid var(--text);--hair:1px solid var(--border);
 /* The ladder: eight stage hues around the brand ground, set in OKLCH to Clay-level chroma (plan/132
    § Colour amendment): a saturated pill (L 0.55 or less; its text white or ink by measured contrast),
    a tint for the card ground (L 0.86-0.90, C 0.07-0.10), a soft for rings, chips and the thread
    (L 0.77, C 0.12-0.14), and a deep text that reads 4.55:1 or better on both. Measured 4 Nov 2026. */
 --stage-1:#1467c2;--on-stage-1:#ffffff;--stage-1-tint:#b3d4fe;--stage-1-soft:#80b7fe;--stage-1-text:#024589;
 --stage-2:#c2410c;--on-stage-2:#ffffff;--stage-2-tint:#ffc5b3;--stage-2-soft:#fe9371;--stage-2-text:#7c2400;
 --stage-3:#00837b;--on-stage-3:#ffffff;--stage-3-tint:#90f3e8;--stage-3-soft:#05cfc2;--stage-3-text:#03524c;
 --stage-4:#d99a00;--on-stage-4:#121212;--stage-4-tint:#ffd899;--stage-4-soft:#e3a939;--stage-4-text:#5b3f03;
 --stage-5:#b8237a;--on-stage-5:#ffffff;--stage-5-tint:#fec4de;--stage-5-soft:#f68dbf;--stage-5-text:#820153;
 --stage-6:#5b3fb8;--on-stage-6:#ffffff;--stage-6-tint:#cecaff;--stage-6-soft:#b0a7ff;--stage-6-text:#4d22ad;
 --stage-7:#4d7c0f;--on-stage-7:#ffffff;--stage-7-tint:#c7ecaa;--stage-7-soft:#93c664;--stage-7-text:#305101;
 --stage-8:#2b3a67;--on-stage-8:#ffffff;--stage-8-tint:#d3defa;--stage-8-soft:#a4b4db;--stage-8-text:#30437d;
 --tint-mix:16%;--tint-base:#f4f0e6;--card:#fbf9f3;--shadow-paper:color-mix(in srgb,#121212 9%,transparent);
}
:root[data-theme="dark"]{--stage-1-tint:#102c4d;--stage-1-soft:#1a4579;--stage-1-text:#7cb6ff;--stage-2-tint:#481d0f;--stage-2-soft:#702e18;--stage-2-text:#fe9371;--stage-3-tint:#01332f;--stage-3-soft:#00504b;--stage-3-text:#07ccbf;--stage-4-tint:#3b2700;--stage-4-soft:#5c3f02;--stage-4-text:#e3a939;--stage-5-tint:#441b30;--stage-5-soft:#6b2b4c;--stage-5-text:#f68dbf;--stage-6-tint:#2a244c;--stage-6-soft:#433a77;--stage-6-text:#afa5fe;--stage-7-tint:#1e3208;--stage-7-soft:#304f0a;--stage-7-text:#92c562;--stage-8-tint:#252b3b;--stage-8-soft:#394460;--stage-8-text:#94b1ff;--tint-mix:22%;--tint-base:#121212;--card:#1b1a18;--shadow-paper:rgba(0,0,0,.45)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--stage-1-tint:#102c4d;--stage-1-soft:#1a4579;--stage-1-text:#7cb6ff;--stage-2-tint:#481d0f;--stage-2-soft:#702e18;--stage-2-text:#fe9371;--stage-3-tint:#01332f;--stage-3-soft:#00504b;--stage-3-text:#07ccbf;--stage-4-tint:#3b2700;--stage-4-soft:#5c3f02;--stage-4-text:#e3a939;--stage-5-tint:#441b30;--stage-5-soft:#6b2b4c;--stage-5-text:#f68dbf;--stage-6-tint:#2a244c;--stage-6-soft:#433a77;--stage-6-text:#afa5fe;--stage-7-tint:#1e3208;--stage-7-soft:#304f0a;--stage-7-text:#92c562;--stage-8-tint:#252b3b;--stage-8-soft:#394460;--stage-8-text:#94b1ff;--tint-mix:22%;--tint-base:#121212;--card:#1b1a18;--shadow-paper:rgba(0,0,0,.45)}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--text);font:400 var(--step-0)/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.1' filter='url(%23g)'/%3E%3C/svg%3E")}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--link);text-underline-offset:.22em;text-decoration-thickness:1px;transition:text-decoration-thickness var(--quick) ease-out}
a:hover{text-decoration-thickness:2px}
button,a,input,textarea,select,summary{touch-action:manipulation}
button{cursor:pointer}
*:focus-visible{outline:3px solid var(--link);outline-offset:4px;border-radius:2px}
.tone-sun *:focus-visible{outline-color:var(--ink)}
h1,h2,h3,h4,p,ul,ol,dl,figure{margin-top:0}
h1,h2,h3{font-weight:600;text-wrap:balance;color:var(--text)}
h1{font-size:var(--step-4);line-height:.96;letter-spacing:-.052em;margin-bottom:.42em;max-width:15ch}
h2{font-size:var(--step-3);line-height:1.02;letter-spacing:-.045em;margin-bottom:.5em;max-width:18ch}
h3{font-size:var(--step-2);line-height:1.12;letter-spacing:-.03em;margin-bottom:.55em}
h1 em,h2 em,h3 em{font:400 italic 1.1em/.9 var(--serif);letter-spacing:-.025em}
p{text-wrap:pretty}
.lede{font-size:var(--step-1);line-height:1.42;letter-spacing:-.012em;max-width:42ch;margin-bottom:1.2em}
.meta,.caption{font:400 14px/1.6 var(--sans);color:var(--secondary)}
.caption{max-width:78ch;margin:28px 0 0}
.mono{font-family:var(--mono)}
.optional{font:400 12px var(--mono);color:var(--secondary);margin-left:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;top:-100px;left:16px;z-index:99;background:var(--surface);color:var(--text);padding:12px 16px;border:var(--line)}
.skip:focus{top:12px}

/* Header: brand, the one action, two quiet switches */
.site-header{position:relative;z-index:5;max-width:var(--wide);margin:0 auto;padding:22px var(--gutter);display:flex;align-items:center;gap:20px}
@media(min-width:1408px){.site-header{padding-inline:0}}
.brand{display:inline-flex;align-items:center;gap:10px;font:650 19px/1 var(--sans);letter-spacing:-.04em;color:var(--text);text-decoration:none;white-space:nowrap}
.brand-mark{width:22px;height:22px;border-radius:50%;flex:none;background:linear-gradient(var(--surface) 0 50%,var(--ember) 50% 100%);border:2px solid var(--text)}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:15px}
.site-nav>a:not(.button){color:var(--text);text-decoration:none}
.site-nav>a:not(.button):hover{text-decoration:underline}
.site-toggles{display:flex;gap:8px}
.icon-button{display:grid;place-items:center;width:44px;height:44px;flex:none;border:var(--hair);background:transparent;color:var(--text);border-radius:50%;padding:0}
.icon-button svg{width:18px;height:18px;fill:currentColor}
.icon-button:hover{border-color:var(--text)}
#motion .icon-moving,#motion[aria-pressed="true"] .icon-still{display:none}
#motion[aria-pressed="true"] .icon-moving{display:block}

/* Buttons: one filled action, everything else a text link */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--action);color:var(--action-text);border:1.5px solid var(--action);border-radius:999px;min-height:54px;padding:13px 28px;font:600 17px/1.2 var(--sans);letter-spacing:-.01em;text-align:center;text-decoration:none;transition:background-color var(--quick) ease-out,transform var(--quick) ease-out}
.button:hover{background:color-mix(in srgb,var(--action) 86%,#000)}
.button:active{transform:translateY(1px)}
.button--small{min-height:44px;padding:9px 18px;font-size:15px}
.arrow-link{font-weight:550;color:var(--text);text-decoration:underline;text-decoration-color:var(--ember);text-decoration-thickness:2px;text-underline-offset:.3em}
.arrow-link:hover{text-decoration-thickness:3px}
.text-button{border:0;background:transparent;color:var(--text);text-decoration:underline;text-underline-offset:4px;padding:10px 0;min-height:44px}

/* Hero */
.hero{max-width:var(--wide);margin:0 auto;padding:clamp(28px,5vw,72px) var(--gutter) clamp(56px,8vw,120px)}
@media(min-width:1408px){.hero{padding-inline:0}}
.hero-trail{font:400 13px/1.5 var(--mono);color:var(--secondary);margin-bottom:28px}
.hero h1{max-width:14.5ch}
.hero--article h1,.hero:not(.hero--home) h1{font-size:clamp(40px,5.4vw + 14px,96px);max-width:17ch}
.hero .lede{max-width:40ch}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:36px}
.actions .meta{margin:0;max-width:30ch}
.hero-audience{font-size:15px;line-height:1.6;max-width:56ch;color:var(--secondary);margin:30px 0 0;padding-top:20px;border-top:var(--hair)}
.hero .site-character.character-key{display:inline-block;vertical-align:-.16em;width:1.3em;margin-left:-.02em}


/* Sections: a numeral in the margin, the content beside it */
.section{position:relative;padding:clamp(64px,9vw,136px) max(var(--gutter),calc((100% - var(--wide))/2));border-top:var(--hair)}
.section-n{font:500 13px/1 var(--mono);color:var(--secondary);margin:0 0 22px;display:flex;align-items:center;gap:12px}
.section-n::after{content:'';width:28px;height:1.5px;background:currentColor;opacity:.6}
.section-head{max-width:820px;margin-bottom:clamp(32px,4vw,56px)}
.section-head .lede:last-child{margin-bottom:0}
@media(min-width:1100px){
 .section{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:32px}
 .section-n{flex-direction:column;align-items:flex-start;gap:14px;padding-top:.9em;margin:0}
 .section-n::after{width:1.5px;height:44px}
}
.tone-paper{background:var(--surface);color:var(--text)}
.tone-paper-2{--surface:var(--surface-2);background:var(--surface-2);color:var(--text)}
.tone-ink{--surface:#121212;--surface-2:#23221f;--text:#f4f0e6;--secondary:#c8c2b6;--border:#514e47;--link:#6cc0f0;background:var(--surface);color:var(--text)}
.tone-sun{--surface:#f5b301;--surface-2:#ffc933;--text:#121212;--secondary:#28251e;--border:#9b7100;--link:#121212;background:var(--surface);color:var(--text)}
.tone-ink{--action:#f5b301;--action-text:#121212;--card:#1b1a18;--shadow-paper:rgba(0,0,0,.5);border-top-color:transparent}
.tone-sun{--action:#121212;--action-text:#f4f0e6;--card:#ffd04d;border-top-color:transparent}
:root[data-theme="dark"] .tone-ink{--surface:#1c1b19;--surface-2:#272522}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tone-ink{--surface:#1c1b19;--surface-2:#272522}}
.tone-ink+.tone-ink,.tone-sun+.section{border-top-color:transparent}

/* Text: heading and prose side by side on wide screens */
.prose{max-width:64ch}
.prose p{margin-bottom:1.1em}
.prose p:first-child{font-size:var(--step-1);line-height:1.45;letter-spacing:-.01em}
@media(min-width:900px){
 .block-text .section-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(32px,5vw,80px);align-items:start}
 .block-text .section-head{margin-bottom:0}
 .block-text h2{font-size:clamp(31px,2.6vw + 14px,54px)}
}

/* Three ways: three doors, not a card kit */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--line)}
.card{padding:28px clamp(18px,2.4vw,36px) 32px 0;display:flex;flex-direction:column}
.card+.card{padding-left:clamp(18px,2.4vw,36px);border-left:var(--hair)}
.card h3{font-size:clamp(23px,1.4vw + 15px,34px)}
.card p{color:var(--secondary);max-width:40ch}
.card .arrow-link{margin-top:auto;padding-top:14px;align-self:flex-start}

/* Steps: a real sequence, drawn as a track */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--count,5),minmax(0,1fr));gap:0}
.steps li{position:relative;padding:0 22px 0 0;border-top:var(--line);padding-top:30px}
.step-label{font:500 13px/1.4 var(--mono);color:var(--secondary);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.step-n{position:absolute;top:-15px;left:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:var(--line);color:var(--text);font:600 13px/1 var(--mono)}
.step-label{padding-left:0}
.steps h3{font-size:clamp(21px,.8vw + 16px,26px)}
.steps li>p:last-child{font-size:16px;color:var(--secondary);margin:0}
.steps li:last-child .step-n{background:var(--sun);border-color:var(--sun);color:var(--ink)}

/* Definition: the term is the picture */
.definition{max-width:900px;margin:0}
.definition dt{font:400 italic clamp(40px,4vw + 20px,92px)/1 var(--serif);letter-spacing:-.025em;margin-bottom:24px}
.definition dd{margin:0;font-size:var(--step-1);line-height:1.45;max-width:46ch}
.block-definition h2{font-size:var(--step-0);font-weight:500;letter-spacing:0;font-family:var(--mono);color:var(--secondary)}

/* Module cards: one offer, one price line, one action */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);align-items:stretch}
.price-grid--single{grid-template-columns:minmax(0,520px)}
.price-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:var(--line);border-radius:10px;padding:30px clamp(22px,2.2vw,34px) 26px;overflow:hidden}
.price-card::before{content:'';position:absolute;inset:0 0 auto 0;height:8px;background:var(--mark)}
.mark-sun{--mark:var(--sun)}.mark-ember{--mark:var(--ember)}.mark-blue{--mark:var(--blue)}.mark-ink{--mark:var(--text)}
.price-kind{font:400 13px/1.4 var(--mono);color:var(--secondary);margin:6px 0 18px}
.price-card h3{font-size:clamp(25px,1vw + 18px,32px);margin-bottom:22px}
.price{display:flex;flex-direction:column;gap:6px;margin:0 0 22px;padding:18px 0;border-block:var(--hair)}
.price-amount{font:500 clamp(30px,1.6vw + 20px,42px)/1 var(--mono);letter-spacing:-.04em}
.price-unit{font:400 13px/1.4 var(--mono);color:var(--secondary)}
.price-summary{font-size:17px;line-height:1.55}
.price-terms{list-style:none;padding:0;margin:0 0 20px;font-size:15px;line-height:1.5;color:var(--secondary)}
.price-terms li{padding:9px 0 9px 22px;position:relative;border-top:var(--hair)}
.price-terms li::before{content:'';position:absolute;left:2px;top:17px;width:9px;height:1.5px;background:var(--text)}
.price-extra{font-size:14px;color:var(--secondary);margin:0 0 20px}
.price-action{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:50px;border:var(--line);border-radius:999px;color:var(--text);text-decoration:none;font-weight:600;font-size:16px;transition:background-color var(--quick) ease-out,color var(--quick) ease-out}
.price-action:hover{background:var(--text);color:var(--surface)}

/* Questions */
.faq{max-width:920px;border-top:var(--line)}
.faq details{border-bottom:var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 0;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq-q{font-size:clamp(19px,.6vw + 16px,23px);font-weight:550;line-height:1.35;letter-spacing:-.015em}
.faq-mark{position:relative;flex:none;width:30px;height:30px;border:var(--line);border-radius:50%;margin-top:2px;transition:transform var(--settle) var(--ease-out),background-color var(--quick)}
.faq-mark::before,.faq-mark::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;translate:-50% -50%}
.faq-mark::after{rotate:90deg}
.faq details[open] .faq-mark{transform:rotate(135deg);background:var(--sun);border-color:var(--sun);color:var(--ink)}
.faq details p{margin:0 0 26px;max-width:66ch;color:var(--secondary)}
.sources{padding-left:20px}.sources li{margin-bottom:12px}

/* Forms */
.form-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.form-offer h3{font-size:clamp(25px,1.2vw + 18px,36px)}
.form-offer p:not(.meta){font-size:var(--step-1);line-height:1.45;max-width:36ch}
.form-split form{display:flex;flex-direction:column;gap:8px;background:var(--card);border:var(--line);border-radius:10px;padding:clamp(22px,3vw,36px)}
.form-split label{font-size:15px;font-weight:550;margin-top:8px}
.form-split input,.form-split textarea{width:100%;min-height:52px;padding:14px 16px;border:1.5px solid color-mix(in srgb,var(--text) 45%,transparent);background:var(--surface);color:var(--text);border-radius:6px;margin-bottom:6px;font-size:17px;transition:border-color var(--quick)}
.form-split input:hover,.form-split textarea:hover{border-color:var(--text)}
.form-split textarea{resize:vertical}
.form-split .button{align-self:stretch;margin:14px 0 6px}
.form-split form .meta{margin:10px 0 0}
.form-result{font-weight:550}
.block-closing h2{font-size:clamp(36px,4.4vw + 16px,96px);max-width:14ch}
.block-closing .form-split form{background:var(--surface-2);border-color:var(--border)}

/* The section rail: where you are on a long page */
.rail{display:none}
@media(min-width:1360px){
 .rail{display:block;position:fixed;z-index:6;right:clamp(14px,2vw,32px);top:50%;transform:translateY(-50%)}
 .rail ol{list-style:none;margin:0;padding:8px 6px;display:flex;flex-direction:column;gap:2px;background:color-mix(in srgb,var(--surface) 88%,transparent);border-radius:999px}
 .rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:24px;min-width:44px;color:var(--secondary);text-decoration:none;font:500 11px/1 var(--mono)}
 .rail a::after{content:'';width:12px;height:1.5px;background:currentColor;transition:width var(--settle) var(--ease-out)}
 .rail-label{position:absolute;right:calc(100% + 8px);white-space:nowrap;padding:6px 10px;background:var(--text);color:var(--surface);border-radius:4px;font:500 12px/1.2 var(--sans);opacity:0;pointer-events:none;transition:opacity var(--quick) ease-out}
 .rail a:hover .rail-label,.rail a:focus-visible .rail-label{opacity:1}
 .rail a[aria-current="true"]{color:var(--text)}
 .rail a[aria-current="true"]::after{width:26px;background:var(--ember)}
}

/* Footer: one calm block */
.site-footer{background:var(--surface-2);padding:clamp(48px,6vw,80px) max(var(--gutter),calc((100% - var(--wide))/2)) 32px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px 48px;border-top:var(--hair)}
.footer-line{font-size:var(--step-1);line-height:1.35;letter-spacing:-.015em;max-width:26ch;margin:22px 0 0}
.footer-line em{font:400 italic 1.08em/1 var(--serif)}
.footer-reach{align-self:end;justify-self:end;text-align:right}
.footer-mail{font-size:var(--step-1);font-weight:550;color:var(--text)}
.footer-reach .meta{margin:8px 0 0}
.footer-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 40px;padding-top:24px;border-top:var(--hair)}
.footer-links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.footer-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--secondary);font-size:14px;text-decoration:none}
.footer-links a:hover{color:var(--text);text-decoration:underline}
.footer-keep{grid-column:1/-1;margin:0;font:400 13px var(--mono);color:var(--secondary)}

.gallery-notice{padding:18px 24px;background:var(--sun);color:var(--ink);font:400 13px var(--mono)}

/* Narrow screens: 375 px is the main canvas */
@media(max-width:1000px){.site-nav>a:not(.button){display:none}}
@media(max-width:900px){
 .card-grid{grid-template-columns:1fr}
 .card,.card+.card{padding:24px 0 28px;border-left:0;border-top:var(--hair)}
 .card:first-child{border-top:0}
 .price-grid{grid-template-columns:1fr}
 .form-split{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr;border-left:var(--line);margin-left:15px}
 .steps li{border-top:0;padding:0 0 30px 34px}
 .steps li:last-child{padding-bottom:0}
 .step-n{top:-2px;left:-16px}
 .steps h3{margin-bottom:8px}
}
@media(max-width:620px){
 body{font-size:17px}
 .site-header{padding-block:16px;gap:10px}
 .brand{font-size:18px;gap:9px}
 .brand-mark{width:20px;height:20px}
 .site-nav{gap:10px}
 .hero{padding-top:28px}
 .actions{flex-direction:column;align-items:stretch;gap:14px}
 .actions .button{width:100%}
 .actions .meta{max-width:none}
 .site-footer{grid-template-columns:1fr}
 .footer-reach{justify-self:start;text-align:left}
 .footer-links{flex-direction:column;gap:14px}
}
@media(max-width:430px){.site-nav .button{display:none}}

/* Motion: page transitions only, and only for people who have not asked for less */
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
:root[data-motion="still"] *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media print{body::before,.site-header,.site-footer,.rail,button,form{display:none}.section{padding:20px 0;break-inside:avoid;display:block}.section-n{display:none}.tone-ink,.tone-sun{--text:#121212;--secondary:#5f5b52;--surface:white;color:#121212;background:white}body{font-size:11pt;background:white}.card-grid,.price-grid{display:block}.price-card,.card{break-inside:avoid;margin-bottom:15px}h1{font-size:36pt}h2{font-size:25pt}details>p{display:block!important}}

/* Articles */
.article-layout{max-width:var(--wide);margin:auto;display:grid;grid-template-columns:minmax(0,3fr) minmax(200px,1fr);gap:56px;padding:0 var(--gutter) 60px}
.article-layout .section{padding:44px 0;display:block}
.article-layout .section-n{margin-bottom:18px;flex-direction:row}
.article-layout .section-n::after{width:28px;height:1.5px}
.article-layout h2{font-size:clamp(28px,2.2vw + 16px,42px);max-width:28ch}
.article-layout .section-head{margin-bottom:24px}
.article-layout .prose p:first-child{font-size:inherit}
.article-toc{position:sticky;top:28px;align-self:start;padding:44px 0}
.toc-title{font:500 13px var(--mono);color:var(--secondary);margin-bottom:16px}
.article-toc nav{display:grid;gap:12px;margin-bottom:30px;border-left:var(--line);padding-left:16px}
.article-toc nav a{font-size:14px;line-height:1.45;text-decoration:none;color:var(--text)}
.article-toc nav a:hover{text-decoration:underline}
.article-toc>a{font-size:15px}
@media(max-width:760px){.article-layout{grid-template-columns:1fr;gap:0}.article-toc{position:static;order:-1;padding:8px 0 24px}.article-toc nav{grid-template-columns:1fr 1fr;gap:12px 22px}.article-toc .meta,.article-toc>a{display:none}.article-layout .section{padding:34px 0}}
@media print{.article-layout{display:block;margin:0}.article-toc{display:none}}

/* Kyle selected all three original characters. Static SVGs share the page motion controls. */
.section-head.has-character{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:start}
.section-head.has-character>.site-character{grid-column:2;grid-row:1}
.section-head.has-character>h2,.section-head.has-character>.lede{grid-column:1}
.site-character{display:block;flex:none;width:112px;aspect-ratio:16/13;transform-origin:50% 80%;pointer-events:none}
.site-character img{display:block;width:100%;height:auto;aspect-ratio:16/13;user-select:none}
.character-key{transform-origin:49% 46%}.character-seedling{transform-origin:50% 77%}
@media(max-width:600px){.site-character{width:84px}}
@media(prefers-reduced-motion:no-preference){
 :root:not([data-motion="still"]) .character-key{animation:site-key-turn 5.5s ease-in-out infinite}
 :root:not([data-motion="still"]) .character-lantern-carrier{animation:site-lantern-guide 5.5s ease-in-out infinite}
 :root:not([data-motion="still"]) .character-seedling{animation:site-seedling-sway 6s ease-in-out infinite}
}
@keyframes site-key-turn{0%,18%,100%{transform:rotate(-7deg)}45%,65%{transform:rotate(12deg)}}
@keyframes site-lantern-guide{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes site-seedling-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
:root[data-motion="still"] .site-character{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.site-character{animation:none!important;transform:none!important}}
@media print{.site-character{display:none}}
.tone-sun .arrow-link{text-decoration-color:var(--ink)}
@media(min-width:901px){.price-grid:not(.price-grid--single) .price-card h3{min-height:2.3em}}
.article-layout .section.tone-ink,.article-layout .section.tone-sun{padding:40px clamp(20px,3vw,40px);border-radius:10px;margin:12px 0}
.hero-price{margin:0;font:500 15px/1.45 var(--sans);color:var(--text);max-width:46ch}
@media(max-width:620px){.hero-price{text-align:center;max-width:none}}
.hero-want{font:500 12px/1.4 var(--mono);color:var(--text);opacity:.78;margin:0 0 14px}
.hero-trail+.hero-want{margin-top:-14px}
/* A service page lists what its stage covers under the eyebrow; the home page is not the only reader. */
.hero-covers{list-style:none;margin:-14px 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:6px;max-width:60ch}
.hero-covers li{padding:5px 11px;border-radius:999px;border:var(--hair);background:var(--card);font:500 13px/1.3 var(--sans)}