/* MetaGem services layer — shared styles for Services hub, offer pages, About.
Loaded after shell.css. Reuses shell tokens (--purple, --coral, --surface, etc.). */
.hl{color:#9d6bf0}
/* ---------- Page hero ---------- */
.svc-hero{text-align:center;padding:100px 0 44px}
.svc-hero .pill{margin-bottom:20px}
/* Matched to .hero-scene h1 on 2026-08-05 so every hero on the site runs one
scale. Was clamp(32px,5vw,54px) — a steeper rate as well as a different
ceiling, so About/Contact/Results were the LARGEST headlines below ~1080px
and the middle size above it. line-height and tracking come along too;
shell.css's h1 base (1.1 / -.01em) is looser than the hero standard. */
.svc-hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.07;letter-spacing:-.02em;max-width:18ch;margin:0 auto 18px}
.svc-hero p.lead{color:var(--muted);font-size:clamp(16px,2vw,20px);max-width:62ch;margin:0 auto}
.crumb{display:inline-block;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.04em;margin-bottom:18px}
.crumb a{color:var(--coral)}
section.svc{padding:30px 0 70px}
.svc-head{text-align:center;margin-bottom:42px}
.svc-head .pill{margin-bottom:16px}
.svc-head h2{font-size:clamp(26px,3.6vw,42px)}
.svc-head p{color:var(--muted);max-width:66ch;margin:16px auto 0;font-size:var(--fs-body)}
/* ---------- Wedge band (DSGVO + fixed-price) ---------- */
.wedges{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin:8px 0 0}
.wedge{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 22px 24px}
.wedge h4{font-size:var(--fs-card-title);margin-bottom:8px;color:#fff}
.wedge p{color:var(--muted);font-size:var(--fs-body);line-height:1.55}
/* ---------- Offer cards (hub) ---------- */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.offer{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px 26px;transition:transform .2s,border-color .2s,box-shadow .2s}
.offer:hover{transform:translateY(-6px);border-color:var(--purple);box-shadow:0 16px 44px rgba(80,26,200,.32)}
.offer .tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--purple);padding:5px 12px;border-radius:40px;margin-bottom:16px}
.offer h3{font-size:var(--fs-card-title);margin-bottom:10px}
.offer p{color:var(--muted);font-size:var(--fs-body);line-height:1.6;flex:1}
.offer .price{margin-top:18px;font-size:14px;color:#fff;font-weight:600}
.offer .price span{color:var(--muted);font-weight:400}
.offer .more{margin-top:14px;color:var(--coral);font-weight:700;font-size:13px}
.offer:hover .more{color:#fff}
.offer.feature{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple) inset}
/* ---------- The ladder ---------- */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:rung}
.rung{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px 24px 26px}
.rung::before{counter-increment:rung;content:counter(rung);position:absolute;top:-16px;left:24px;width:34px;height:34px;border-radius:9px;background:var(--purple);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(123,67,240,.5)}
.rung h4{font-size:var(--fs-card-title);margin:6px 0 8px}
.rung .lvl{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--coral)}
.rung p{color:var(--muted);font-size:var(--fs-body);line-height:1.55;margin-top:8px}
.rung .price{margin-top:14px;font-weight:600;color:#fff;font-size:14px}
/* ---------- Deliverables / checklist ---------- */
.deliv{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:10px}
.deliv li{list-style:none;color:var(--muted);font-size:var(--fs-bullet);line-height:1.5;padding-left:30px;position:relative}
.deliv li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:rgba(80,26,200,.25);border:1px solid var(--purple)}
/* CSS-drawn tick, not a font glyph: the ✓ character sat 2.4px high in its circle
(glyph ink != glyph box). Same construction as the homepage .svc-card tick,
positioned for this circle (top:3px). Pseudo-elements are content-box, so the
circle renders ~20px; these numbers are tuned to that, verified in-browser. */
.deliv li::after{content:"";position:absolute;left:6.9px;top:11px;width:6px;height:3px;border-left:2px solid #9d6bf0;border-bottom:2px solid #9d6bf0;transform:rotate(-45deg)}
.deliv li b{color:#fff;font-weight:600}
/* ---------- Two-column offer detail ---------- */
.detail{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.detail .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;position:sticky;top:96px}
.detail .panel h4{font-size:var(--fs-card-title);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.detail .panel .big{font-size:30px;font-weight:800;color:#fff;margin-bottom:4px}
.detail .panel .ph{color:var(--coral);font-size:12px;font-weight:700}
.detail .panel ul{list-style:none;margin:18px 0 0}
.detail .panel li{color:var(--muted);font-size:var(--fs-bullet);padding:7px 0;border-top:1px solid var(--border)}
.detail .panel li b{color:#fff}
.prose h3{font-size:22px;color:#fff;margin:30px 0 12px}
.prose p{color:#cfcbe0;font-size:var(--fs-body);line-height:1.75;margin-bottom:16px}
.prose .lead{font-size:var(--fs-body);color:#e7e4f2}
/* ---------- Trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.trust span{font-size:13px;font-weight:600;color:#fff;background:rgba(80,26,200,.16);border:1px solid var(--border);padding:9px 16px;border-radius:40px}
/* ---------- Founder / About ---------- */
.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.founder .photo{aspect-ratio:4/5;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;background:linear-gradient(150deg,var(--purple),var(--purple-glow));display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;font-size:13px;font-weight:600;position:sticky;top:96px}
.founder .photo img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------- Placeholder marker ---------- */
.ph-note{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;color:#0c0a14;background:#e3c84d;padding:2px 8px;border-radius:5px;text-transform:uppercase}
/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,rgba(80,26,200,.30),rgba(123,67,240,.10));border:1px solid var(--border);border-radius:20px;padding:52px 30px;text-align:center;margin-top:30px}
.cta-band h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:14px}
.cta-band p{color:var(--muted);max-width:56ch;margin:0 auto 26px}
.cta-band .sub{font-size:13px;color:var(--muted);margin-top:16px}
/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:0 22px;margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--coral);font-size:22px;font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);font-size:var(--fs-body);line-height:1.65;padding:0 0 20px}
@media(max-width:980px){
.offers{grid-template-columns:1fr 1fr}
.ladder{grid-template-columns:1fr}
.detail{grid-template-columns:1fr;gap:32px}
.detail .panel{position:static}
.founder{grid-template-columns:1fr;gap:28px}
.founder .photo{position:static;max-width:360px}
.wedges{grid-template-columns:1fr}
}
@media(max-width:600px){
.offers{grid-template-columns:1fr}
.deliv{grid-template-columns:1fr}
}
/* ============================================================
CHILD SERVICE PAGE PATTERNS (2026-07-25)
Added for the nine dedicated service pages under /services/.
Strictly ADDITIVE: every selector below is new, so no existing
page shifts. Composition, not uniformity — each page picks the
two or three patterns that suit its argument, in its own order.
============================================================ */
/* The reader's situation, stated as symptoms they will recognise */
.pains{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pain{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--coral);border-radius:10px;padding:18px 20px}
.pain b{display:block;color:#fff;font-size:16px;margin-bottom:5px}
.pain span{display:block;color:var(--muted);font-size:15px;line-height:1.55}
/* Outcomes: a claim plus the clause that makes it concrete */
.wins{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 34px}
.win{position:relative;padding-left:34px}
.win::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:7px;background:rgba(80,26,200,.28);border:1px solid var(--purple)}
/* CSS-drawn tick, same reasoning as .deliv above: pseudo-elements are
content-box, so the 22px box renders 24px and these are tuned to that. */
.win::after{content:"";position:absolute;left:8px;top:12px;width:7px;height:3.5px;border-left:2px solid #9d6bf0;border-bottom:2px solid #9d6bf0;transform:rotate(-45deg)}
.win b{display:block;color:#fff;font-size:16px;margin-bottom:4px}
.win p{color:var(--muted);font-size:15px;line-height:1.55;margin:0}
/* Process rail: numbered steps in a row, four or five across */
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:railstep}
.rail.four{grid-template-columns:repeat(4,1fr)}
.railstep{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px 20px 22px;transition:transform .2s,border-color .2s,box-shadow .2s}
.railstep:hover{transform:translateY(-4px);border-color:var(--purple);box-shadow:0 14px 40px rgba(80,26,200,.3)}
.railstep::before{counter-increment:railstep;content:"0" counter(railstep);position:absolute;top:-13px;left:20px;height:26px;padding:0 10px;border-radius:8px;background:var(--purple);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;box-shadow:0 0 16px rgba(123,67,240,.5)}
.railstep h4{font-size:16px;color:#fff;margin:4px 0 7px}
.railstep p{color:var(--muted);font-size:14px;line-height:1.55}
/* Who this is for, and who it is not for */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fitbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 26px 24px}
.fitbox h4{font-size:var(--fs-card-title);color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.fitbox h4::before{content:"";width:10px;height:10px;border-radius:50%;flex:none}
.fitbox.yes h4::before{background:#9d6bf0;box-shadow:0 0 12px rgba(123,67,240,.8)}
.fitbox.no h4::before{background:var(--coral)}
.fitbox ul{list-style:none}
.fitbox li{color:var(--muted);font-size:var(--fs-bullet);line-height:1.55;padding:10px 0;border-top:1px solid var(--border)}
.fitbox li:first-child{border-top:0;padding-top:0}
/* What MetaGem does, as a plain ruled column */
.doeslist{list-style:none;border-top:1px solid var(--border)}
.doeslist li{color:var(--muted);font-size:var(--fs-bullet);line-height:1.6;padding:14px 2px;border-bottom:1px solid var(--border)}
.doeslist li b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
/* Two even columns, for pages where the sticky .detail panel is too heavy */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
/* Credibility, in prose rather than badges */
.cred{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px 32px;max-width:860px;margin:0 auto}
.cred b{color:#fff}
.cred p{color:#cfcbe0;font-size:var(--fs-body);line-height:1.7;margin:0}
.cred p+p{margin-top:14px}
/* Case-study slot, deliberately empty until there is a real one to tell */
.casebox{border:1px dashed var(--border);border-radius:var(--radius);padding:24px 26px;background:rgba(80,26,200,.05);max-width:860px;margin:22px auto 0}
.casebox p{color:var(--muted);font-size:15px;line-height:1.6;margin:10px 0 0}
/* Related services, at the foot of a page */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.relcard{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 22px 20px;transition:transform .2s,border-color .2s,box-shadow .2s}
.relcard:hover{transform:translateY(-4px);border-color:var(--purple);box-shadow:0 14px 40px rgba(80,26,200,.3)}
.relcard b{display:block;color:#fff;font-size:var(--fs-card-title);margin-bottom:7px}
.relcard span{display:block;color:var(--muted);font-size:14px;line-height:1.55}
.relcard .more{display:inline-block;color:var(--coral);font-weight:700;font-size:13px;margin-top:12px}
.relcard:hover .more{color:#fff}
/* Disclaimer strip, same construction as the .aiact callout on the pillar */
.disclaim{background:linear-gradient(135deg,rgba(243,168,64,.10),rgba(80,26,200,.08));border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;display:flex;gap:16px;align-items:flex-start;max-width:860px;margin:0 auto}
.disclaim .lbl{flex:none;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#0c0a14;background:#f0b64e;padding:5px 11px;border-radius:6px;margin-top:2px}
.disclaim p{color:#cfcbe0;font-size:15px;line-height:1.65;margin:0}
.disclaim b{color:#fff}
@media(max-width:980px){
.rail,.rail.four{grid-template-columns:repeat(2,1fr)}
.rel{grid-template-columns:1fr}
.twocol{grid-template-columns:1fr;gap:30px}
}
@media(max-width:700px){
.pains{grid-template-columns:1fr}
.wins{grid-template-columns:1fr}
.fit{grid-template-columns:1fr}
.rail,.rail.four{grid-template-columns:1fr}
.disclaim{flex-direction:column;gap:10px}
}
/* ============================================================
HERO SYSTEM (2026-07-25). Two named patterns, so it is always
obvious which one a page should carry:
.hero-scene full-bleed layered artwork (gem, orbits, modules).
Homepage and the three pillar hubs. Four pages, ever.
Built to the Animated Hero Recipe; the homepage and
Workshops keep their own inline copies of that CSS.
What is below is only the PLACEHOLDER scene, drawn in
CSS, for pillars whose artwork does not exist yet.
.hero-offer every offer page. Service name on a coral rule,
benefit headline, lead, scope chips, CTA, and a
swappable art slot on the right.
Both are additive. .svc-hero stays for anything not yet migrated.
============================================================ */
/* ---------- Offer hero ---------- */
.hero-offer{position:relative;isolation:isolate;overflow:hidden;padding:78px 0 62px}
.hero-offer .wrap{position:relative;z-index:2}
.hero-offer h1{font-size:clamp(30px,4.4vw,50px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;max-width:19ch}
.hero-offer p.lead{color:var(--muted);font-size:clamp(16px,1.5vw,19px);line-height:1.62;max-width:60ch;margin:0 0 22px}
.hero-offer .pill{margin-bottom:16px}
/* The service name, for pages whose H1 is benefit-led and therefore does
not say what the service is called. Pages whose H1 already IS the name
carry a .pill instead, so nothing is ever said twice. */
.ho-name{display:block;color:#fff;font-size:clamp(20px,2.4vw,26px);font-weight:800;line-height:1.2;
letter-spacing:-.01em;padding-left:16px;border-left:3px solid var(--coral);margin-bottom:16px}
/* Scope, as chips a skimmer can read in one pass */
.ho-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.ho-chips span{font-size:13px;font-weight:600;color:#cfc9e0;background:rgba(80,26,200,.16);
border:1px solid var(--border);padding:7px 14px;border-radius:40px}
.hero-offer .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.hero-offer .hero-actions .note{color:var(--muted);font-size:13.5px;font-style:italic;margin:0}
/* ART SLOT. Everything inside .ho-art is placeholder and is meant to be
thrown away: replace the contents with the layered ![]()
stack from the
Animated Hero Recipe, keep the container. Nothing outside it moves. */
.ho-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ho-art i{position:absolute;right:-14%;top:50%;translate:0 -50%;aspect-ratio:1;border-radius:50%;
border:1px solid rgba(123,67,240,.30)}
.ho-art i:nth-of-type(1){width:420px}
.ho-art i:nth-of-type(2){width:640px;border-color:rgba(123,67,240,.20)}
.ho-art i:nth-of-type(3){width:880px;border-color:rgba(123,67,240,.13)}
.ho-art i:nth-of-type(4){width:1140px;border-color:rgba(123,67,240,.08)}
.ho-art b{position:absolute;right:calc(-14% + 210px);top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
border-radius:50%;background:#f6b64e;box-shadow:0 0 22px 4px rgba(246,182,78,.55);
animation:ho-pulse 3.6s ease-in-out infinite}
@keyframes ho-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ho-art b{animation:none}}
@media(max-width:900px){.ho-art{opacity:.45}}
@media(max-width:600px){
.hero-offer{padding:56px 0 46px}
.ho-art i:nth-of-type(3),.ho-art i:nth-of-type(4){display:none}
}
/* ---------- Scene hero ----------
The full-bleed layered scene from the Animated Hero Recipe, lifted verbatim
from the tuned Workshops implementation (canvas 1536x1024, gem at 61% 36%,
--gem-dx pixel-tuned to 1.35%). Used by the pillar hubs.
Workshops keeps its own inline copy for now, deliberately: those numbers were
tuned on staging and are not worth re-risking. Consolidate the two once the
remaining pillar artwork lands.
ARTWORK: each pillar wants its own /assets/hero-/ set (background,
orbits.svg, modules, gem) exported full-canvas and transparent so the layers
register 1:1. Gem placement differs per artwork, so --gem-x / --gem-y /
--gem-dx are set inline on .hs-scene per page rather than hardcoded here.
Defaults below are the Workshops values. Until those exist the pillars borrow the workshops set, which is
why two hubs currently look alike. Swapping is four src attributes per page. */
.hero-scene{position:relative;isolation:isolate;min-height:clamp(500px,52vw,660px);display:flex;align-items:center;overflow:hidden}
.hero-scene .eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b79bf2;margin-bottom:16px}
.hero-scene .eyebrow span{width:34px;height:2px;background:linear-gradient(90deg,#f6b64e,var(--purple-glow));border-radius:2px;flex:none}
.hero-scene h1{font-size:clamp(32px,4.4vw,52px);line-height:1.07;letter-spacing:-.02em;margin:0 0 18px;max-width:16ch}
.hero-scene p.lead{color:var(--muted);font-size:clamp(16px,1.5vw,19px);max-width:54ch;margin-bottom:26px;line-height:1.6}
.hero-scene .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-scene .microcta{margin-top:16px;font-size:13px;color:var(--muted)}
.hs-stage{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hs-scene{--gem-dx:1.35%;--gem-x:61%;--gem-y:36%;position:absolute;top:50%;right:1%;transform:translateY(-50%);height:min(116%,780px);aspect-ratio:1536/1024;-webkit-mask:linear-gradient(90deg,transparent 0,#000 34%);mask:linear-gradient(90deg,transparent 0,#000 34%)}
.hs-scene>*{position:absolute;inset:0;width:100%;height:100%}
.hs-scene img{object-fit:contain;object-position:center;display:block}
.hs-bg{z-index:0}
.hs-orbits{z-index:2}
.hs-modules{z-index:1}
.hs-gem{z-index:3;transform:translateX(var(--gem-dx));animation:hs-float 6s ease-in-out infinite;will-change:transform}
.hs-core{z-index:4;background:radial-gradient(circle at var(--gem-x) var(--gem-y),rgba(255,201,102,.6),rgba(255,201,102,.2) 3%,transparent 10%);mix-blend-mode:screen;transform:translateX(var(--gem-dx));animation:hs-float 6s ease-in-out infinite,hs-core 3.6s ease-in-out infinite;will-change:transform,opacity}
.hs-gem img{width:100%;height:100%;transform-origin:var(--gem-x) var(--gem-y);animation:hs-rot 11s ease-in-out infinite,hs-glow 3.6s ease-in-out infinite;will-change:transform,filter}
@keyframes hs-float{0%,100%{transform:translate(var(--gem-dx),0)}50%{transform:translate(var(--gem-dx),-8px)}}
@keyframes hs-rot{0%,100%{transform:rotate(-.4deg)}50%{transform:rotate(.4deg)}}
@keyframes hs-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
@keyframes hs-core{0%,100%{opacity:.4}50%{opacity:1}}
.hero-scene .wrap{position:relative;z-index:4;width:100%}
@media(prefers-reduced-motion:reduce){.hs-gem,.hs-gem img,.hs-core{animation:none}}
/* Ultrawide containment (2026-07-31, Vlad's Odyssey screenshot): the artwork
anchored right:1% of the viewport, so past ~1920px it drifted away from the
centered copy column and left a void of bare plate between them. Pin the
composition to a centered 1920px stage instead; the plate-matched section
background keeps the sides seamless. 19px = 1% of 1920, so the anchor is
continuous at the breakpoint. */
@media(min-width:1921px){
.hs-scene{right:calc((100% - 1920px)/2 + 19px)}
}
@media(max-width:860px){
.hs-stage{display:none}
.hero-scene{min-height:auto;padding:76px 0 40px;text-align:center}
.hero-scene .eyebrow{justify-content:center}
.hero-scene h1,.hero-scene p.lead{margin-left:auto;margin-right:auto}
.hero-scene .cta-row{justify-content:center}
}
/* Secondary button. Was inline on the Workshops page only; the pillar hubs
need it too, so it lives here now. */
.btn.ghost{background:transparent;border:1px solid var(--border);color:#fff;box-shadow:none}
.btn.ghost:hover{border-color:var(--purple);background:rgba(80,26,200,.14)}
/* ============================================================
SECTION DIVIDER (.mgd) — the MetaGem diamond rule.
Ported here 2026-07-25 so the service pages can use it.
DUPLICATED ON PURPOSE: index.html carries its own inline copy, because the
homepage does not load services.css and pulling 20 KB of service styles onto
it for one component would risk selector collisions. If you change these
values, change them in index.html too.
Markup:
--sm heading accent, 234px
--lg section break, up to 620px
--flush kills the block margin where section padding already supplies it
============================================================ */
.mgd{display:flex;align-items:center;justify-content:center;margin-inline:auto;box-sizing:border-box}
.mgd .ln{display:block;height:1px;flex:1 1 auto;min-width:0}
.mgd .ln-l{background:linear-gradient(90deg,transparent,var(--mgd-line))}
.mgd .ln-r{background:linear-gradient(90deg,var(--mgd-line),transparent)}
.mgd .mk{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:7px}
.mgd .mk i{display:block;width:5px;height:5px;background:var(--mgd-mark);transform:rotate(45deg);opacity:.45}
.mgd .mk i:nth-child(2){width:8px;height:8px;opacity:1}
.mgd--sm{--mgd-line:rgba(246,182,78,.34);--mgd-mark:#f6b64e;width:234px;gap:11px}
.mgd--lg{--mgd-line:rgba(246,182,78,.28);--mgd-mark:#f6b64e;width:min(620px,100%);gap:18px;margin-block:44px}
.mgd--flush{margin-block:0}
.mgd--lg .mk{gap:7px}
.mgd--lg .mk i{width:5px;height:5px}
.mgd--lg .mk i:nth-child(2){width:7px;height:7px}
/* ---------- Pillar kicker ----------
The line above the H1 on a scene hero. Same vertical-rule construction as
.ho-name on the offer pages, in amber rather than coral, so the two hero
families read as one system rather than two.
Its job is to say what the pillar COVERS. It must never repeat the H1, which
is what the old .eyebrow was doing on two of the three pillars. Left unscoped
from when Workshops still carried its own .whero CSS and this had to work in
both; that consolidated on 2026-07-26, so it could be scoped to .hero-scene
now, but unscoped is harmless and one less thing to break. */
.hs-kicker{display:inline-block;color:#fff;font-size:clamp(14px,1.5vw,16px);font-weight:700;
line-height:1.35;letter-spacing:.01em;padding-left:14px;border-left:3px solid #f6b64e;margin-bottom:18px}
/* Scene hero on wide screens.
The scene is sized from the hero's height, and the hero was capped at 660px,
so on a 1900px monitor the artwork stayed the same pixel size while the screen
grew and it read as small and stranded at the right edge. Above 1500px the
copy is confined to the 1180px wrap and the right side has room, so both the
hero and the scene are allowed to grow. Below 1500px the copy fills most of
the width and the tuned smaller scene is kept, otherwise the artwork rides
over the headline. Opt in per page with .hero-scene.grows. */
.hero-scene.grows .hs-scene{height:min(106%,715px)}
@media(min-width:1500px){
.hero-scene.grows{min-height:clamp(660px,52vw,880px)}
.hero-scene.grows .hs-scene{height:min(118%,1000px)}
}
/* Still scene: a single flat image instead of the layered stack. No gem, no
orbits, nothing to animate, so the float/rotate/glow rules simply have no
targets. Aspect ratio is set inline per page because a still is whatever
shape it was cropped to. */
.hs-still,
.hero-scene.grows .hs-still{height:min(66%,436px);
/* A still has no depth to lose, so the long 34% fade the layered scenes use
just eats the left third of the picture. Measured: shortening it to 12%
nearly doubles what survives on the left and costs nothing in contrast,
because at this scene size the copy barely overlaps the image at all. */
-webkit-mask:linear-gradient(90deg,transparent 0,#000 12%);
mask:linear-gradient(90deg,transparent 0,#000 12%)}
/* Capped at the source's own height so a wide screen never upscales a flat
still past 1:1. The AI Integration source is now 1740x888, so the ceiling
moves 523 -> 888; the layered scenes still cap at 1000, so a still can never
out-grow them. Raise this again only alongside a taller source. */
@media(min-width:1500px){.hero-scene.grows .hs-still{height:min(70%,888px)}}
/* Still heroes sit tighter under the header than layered ones.
Measured on staging at 1900px: the section was 880px, the still 70% of it
and vertically centred, which left a 132px empty band ABOVE the artwork and
an identical 132px below. Raising the percentage alone would have closed the
band by making the artwork wider (1207 -> ~1590px), pushing it further across
the headline. So the section shrinks and the percentage rises by the same
factor: the artwork renders at exactly the size it did before, only the empty
band changes.
Scoped with :has() rather than a modifier class so it stays limited to still
heroes -- .hero-scene.grows is shared with the Online Marketing pillar, which
is still the layered animated scene and must not shrink. As the other pillars
convert to stills they pick this up with no markup change.
min-height, not height: if the copy column ever outgrows the section the
section still expands and nothing clips.
Retuned after the source was trimmed. The AI Integration PNG carried 56
dead rows above its first ink (bottom had only 11, and those sit under the
Human Oversight box), so the top was cropped: 1740x888 -> 1740x832, ratio
1.959 -> 2.091. Because this slot sizes by HEIGHT, a shorter source renders
WIDER at the same height -- left uncorrected the artwork would have grown
1207 -> 1288px and pushed further across the headline. So the heights come
down to hold the rendered width steady: the artwork stays ~1200px wide and
the content inside it stays the same visual size, while the gap the padding
used to create disappears.
The section background is the load-bearing part, and it changes what the
band even means. Sampled on every edge of the source, the artwork's own
plate is a near-uniform #010415 -- a very dark blue. The page underneath is
--bg #07070C, greyer and lighter, so the still was reading as a rectangle
pasted onto a different surface: the picture's edges were showing as edges.
Painting the section the same #010415 removes the seam, and as a side
effect the empty band above and below the artwork stops registering as a
gap, because it is now the same colour as the plate that continues into it.
That is why the small-screen tuning is gone rather than merely relaxed. It
existed to close a band that is no longer visible, and it cost the copy
column its breathing room (140px -> 60px at 1280). Below 1500px the shared
.hero-scene geometry applies again, untouched. Above 1500px the tighter
660px section stays, because Vlad reviewed and wanted that one.
Hard bottom edge, deliberately: the .mgd diamond divider sits immediately
below the hero and reads as the join. No fade. */
@media(min-width:1500px){
.hero-scene.grows:has(.hs-still){min-height:660px}
.hero-scene.grows:has(.hs-still) .hs-still{height:min(87%,832px)}
}
/* Each pillar's plate is sampled from its own artwork and set inline as
--plate on the section, the same way --gem-x/--gem-y are. They are close but
not identical -- AI Integration #010315, Online Marketing #000019, Workshops
#000115 -- and since the whole point is that the seam disappears, each gets
its own rather than an averaged shared value. The fallback keeps a sane
colour if a new still hero ever ships without one. */
.hero-scene:has(.hs-still){background:var(--plate,#010415)}