/* ============================================================================ Emba Consulting - shared site styles ("Prospectus" editorial system, v3) Self-hosted, loaded by every page on emba.au (CSP: style-src 'self'). v3 (17 Jul 2026, agy + council art direction): zero shadows, zero rounded corners, zero icons - hairline structural rules, a bronze rule-with-tick mark, oversized Fraunces numerals, macro spacing. Content sits ON the paper/espresso grounds, never inside floating boxes. Brand palette and Fraunces + Inter are the established emba identity - kept deliberately. ============================================================================ */ :root{ color-scheme:light; /* neutrals */ --paper:#FAF6F0; --surface:#FFFFFF; --field:#F6F1E9; --line:#E8DFD2; --line-strong:#D6C9B6; --ink:#1C1410; --body:#4A3F35; --mut:#7C6F61; --faint:#B3A292; /* accent - used like a seal */ --accent:#B4430A; --accent-strong:#B4430A; --accent-hover:#A03B09; --accent-press:#93380A; --accent-wash:#F7E8DC; /* espresso editorial bands */ --espresso:#171009; --espresso-2:#221710; --bronze:#C89B6A; --on-espresso:#F2E7D9; --on-espresso-mut:#CBB49C; --band-line:rgba(200,155,106,.25); /* semantic families */ --ok-ink:#1E6E42; --ok-bg:#ECF4EC; --ok-line:#CBE0CE; --err-ink:#B42318; --err-bg:#FBEFED; --err-line:#EDD2CC; --warn-ink:#92400E; --warn-bg:#F9F0E0; --warn-line:#EBD9BC; --info-ink:#2B4E9B; --info-bg:#E9EFFB; --info-line:#C9D7F2; /* interaction */ --ring:rgba(180,67,10,.28); /* layout - v3: no elevation anywhere; structure comes from hairlines */ --maxw:1160px; --shadow-card:none; /* one entrance easing site-wide (agy + Pro converged): fast start, long settle */ --ease:cubic-bezier(.22,1,.36,1); } /* Dark theme: deep espresso + warm off-white + muted bronze (not black SaaS). System preference applies unless the visitor has toggled; the toggle sets data-theme on and a tiny hashed inline guard applies it pre-paint. */ [data-theme="dark"]{ color-scheme:dark; --paper:#14100C; --surface:#1C1610; --field:#241C14; --line:#332818; --line-strong:#4A3A24; --ink:#F2E7D9; --body:#D9C9B4; --mut:#A98F73; --faint:#7C6A55; --accent:#E06A2B; --accent-strong:#C8551A; --accent-hover:#E06A2B; --accent-press:#B44C16; --accent-wash:#2C1D12; --espresso:#100C08; --espresso-2:#181109; --on-espresso:#F2E7D9; --on-espresso-mut:#C4AC90; --band-line:rgba(200,155,106,.2); --ok-ink:#7FBF98; --ok-bg:#15211A; --ok-line:#28402F; --err-ink:#E89A8E; --err-bg:#2A1714; --err-line:#4A2620; --warn-ink:#DDAE6B; --warn-bg:#28190D; --warn-line:#453014; --info-ink:#9FB6E8; --info-bg:#161D2E; --info-line:#2A3A5E; --ring:rgba(224,106,43,.35); --shadow-card:none; } /* ---- base ---------------------------------------------------------------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);color:var(--ink);background:var(--paper);line-height:1.55;font-size:1.0625rem;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{max-width:100%;display:block} a{color:var(--accent);text-decoration:none} p a,li a{text-decoration:underline;text-decoration-color:rgba(180,67,10,.35);text-underline-offset:3px} p a:hover,li a:hover{text-decoration-color:var(--accent)} ::selection{background:rgba(180,67,10,.18)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:0;font-weight:600} .skip-link:focus{left:0} /* ---- type (v3: architectural Fraunces, dense confident body) --------------- */ h1,h2,h3{font-family:var(--font-display,Georgia,"Times New Roman",serif);color:var(--ink);margin:0;font-weight:550;letter-spacing:-.01em;line-height:1.12;text-wrap:balance;font-optical-sizing:auto} p{margin:0;color:var(--body)} .display-1{font-size:clamp(3.25rem,7vw,5.5rem);line-height:.97;letter-spacing:-.028em;font-weight:560;font-variation-settings:"SOFT" 0,"WONK" 1;text-wrap:balance} .display-2{font-size:clamp(2.375rem,4.6vw,3.625rem);line-height:1.02;letter-spacing:-.02em;font-weight:540;font-variation-settings:"SOFT" 0,"WONK" 1} .display-3{font-size:clamp(1.75rem,6vw,2.25rem);line-height:1.1;letter-spacing:-.012em;font-weight:540} .title-1{font-size:1.375rem;line-height:1.25;letter-spacing:-.005em;font-weight:540} .eyebrow{display:block;text-transform:uppercase;letter-spacing:.2em;font-size:.6875rem;font-weight:500;color:var(--accent);font-family:var(--font-sans,sans-serif)} .hero-editorial .eyebrow,.band .eyebrow,.site-footer .eyebrow{color:var(--bronze)} .tabular{font-variant-numeric:tabular-nums} /* the house mark: bronze hairline finished with a solid square tick */ .rule-tick{position:relative;height:1px;background:var(--bronze)} .rule-tick:after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;background:var(--accent)} .band .rule-tick:after,.hero-editorial .rule-tick:after{background:var(--on-espresso)} /* ---- buttons ------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:.75rem 1.5rem;border-radius:0;border:1px solid transparent;font-family:inherit;font-weight:600;font-size:.9375rem;line-height:1.2;cursor:pointer;text-decoration:none;text-align:center;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)} .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .btn:disabled{opacity:.45;cursor:not-allowed} .btn-primary{background:var(--accent-strong);color:#fff} .btn-primary:hover{background:var(--accent-hover)} .btn-primary:active{background:var(--accent-press)} /* secondary on light ground (alias .btn-light for generated role cards) */ .btn-secondary,.btn-light{background:var(--surface);border-color:var(--line-strong);color:var(--ink)} .btn-secondary:hover,.btn-light:hover{background:var(--field)} /* secondary on espresso ground */ .btn-ghost{background:transparent;border-color:rgba(200,155,106,.45);color:var(--on-espresso)} .btn-ghost:hover{border-color:var(--bronze);background:rgba(200,155,106,.1)} /* quiet inline link-with-arrow (single-CTA discipline: one primary per view) */ .link-quiet{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;color:var(--on-espresso)} .link-quiet:after{content:"\2192";transition:transform .18s var(--ease)} .link-quiet:hover:after{transform:translateX(3px)} .section .link-quiet{color:var(--accent)} /* ---- header / nav (one pattern, all pages) -------------------------------- v3: solid espresso, no blur, no border - it blends seamlessly into the hero. */ .site-header{position:sticky;top:0;z-index:70;background:var(--espresso)} .nav{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:22px} /* brand and actions never shrink: a squeezed flex item lets its nowrap text overflow into the neighbour (the crowded-header bug, 17 Jul) */ .brand{display:flex;align-items:center;gap:10px;color:var(--on-espresso);font-weight:600;font-size:.9375rem;white-space:nowrap;flex:0 0 auto} .brand img{width:28px;height:28px;border-radius:0} .nav-links{display:flex;align-items:center;gap:20px} .nav-links>a{color:var(--on-espresso-mut);font-weight:500;font-size:.875rem;padding:4px 0;white-space:nowrap} .nav-links>a:hover,.nav-links>a[aria-current="page"]{color:var(--on-espresso);text-decoration:underline;text-decoration-color:var(--bronze);text-decoration-thickness:2px;text-underline-offset:6px} .nav-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto} .nav-actions .btn,.nav-panel-actions .btn{white-space:nowrap} .nav-actions .btn{padding:.75rem 1.25rem} /* the phone belongs to the widest viewports only; it lives in the menu + footer */ @media(max-width:1400px){.nav-actions .phone{display:none}} .phone{font-weight:500;color:var(--on-espresso-mut);white-space:nowrap;font-size:.875rem} a.phone:hover{color:var(--on-espresso)} .menu-btn,.theme-btn{display:inline-flex;background:transparent;border:0;color:var(--on-espresso);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;padding:0;border-radius:0} .menu-btn{display:none} .theme-btn:hover{background:rgba(200,155,106,.12)} .theme-btn .icon-sun{display:none} [data-theme="dark"] .theme-btn .icon-sun{display:block} [data-theme="dark"] .theme-btn .icon-moon{display:none} .menu-btn svg{display:block} .menu-btn .icon-close{display:none} body.nav-open .menu-btn .icon-burger{display:none} body.nav-open .menu-btn .icon-close{display:block} .nav-scrim{display:none} .nav-panel-actions{display:none} @media(max-width:1280px){ .menu-btn{display:inline-flex} .nav-links{display:none} .nav-actions .phone,.nav-actions .btn{display:none} body.nav-open{overflow:hidden} body.nav-open .nav-scrim{display:block;position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(20,12,6,.5);z-index:55} body.nav-open .nav-links{display:flex;position:fixed;top:64px;left:0;right:0;z-index:60;flex-direction:column;align-items:stretch;gap:0;background:var(--espresso);border-bottom:1px solid var(--band-line);padding:8px 22px calc(20px + env(safe-area-inset-bottom));max-height:calc(100dvh - 64px);overflow-y:auto} body.nav-open .nav-links>a{display:block;padding:14px 0;border-bottom:1px solid rgba(200,155,106,.14);font-size:1rem} body.nav-open .nav-panel-actions{display:grid;gap:12px;padding-top:16px} .nav-panel-actions .phone{display:inline-flex;font-size:1rem} .nav-panel-actions .btn{width:100%} } /* ---- hero (v3: typographic index - no gradient, no card, type IS the hero) - */ .hero-editorial{position:relative;background:var(--espresso);color:var(--on-espresso)} .hero-editorial .wrap{position:relative;padding-top:clamp(4.5rem,12vh,8rem);padding-bottom:clamp(3rem,6vw,4.5rem)} .hero-editorial h1{color:var(--on-espresso);max-width:18ch} .hero-editorial p{color:var(--on-espresso-mut)} .hero-copy .eyebrow{margin-bottom:20px} .hero-copy>p{font-size:clamp(1.0625rem,2vw,1.1875rem);max-width:52ch;margin-top:26px} .hero-actions{display:flex;gap:12px 22px;align-items:center;flex-wrap:wrap;margin-top:2.5rem} /* contract-footer columns: one bronze hairline, four flush-left text columns */ .hero-rule{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 24px;margin-top:clamp(3rem,7vh,4.5rem);padding-top:1.25rem;border-top:1px solid var(--bronze);position:relative} .hero-rule:before{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;background:var(--on-espresso)} .hero-rule span{display:block;font-size:.8125rem;font-weight:500;color:var(--on-espresso-mut);letter-spacing:.02em} /* single entrance: rise once on load, gentle stagger, nothing else moves */ @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:no-preference){ .hero-copy>*{animation:rise .5s var(--ease) both} .hero-copy>*:nth-child(2){animation-delay:.06s} .hero-copy>*:nth-child(3){animation-delay:.12s} .hero-copy>*:nth-child(4){animation-delay:.18s} .hero-copy>*:nth-child(5){animation-delay:.24s} } /* ---- sections / bands (v3: macro spacing, flush-left heads, tick rule) ------ */ .section{padding:clamp(5.5rem,9vw,9rem) 0;background:var(--paper);border-top:1px solid var(--line)} .section-head{max-width:820px;margin:0 0 clamp(3rem,5vw,4rem);text-align:left} .section-head.align-left{margin:0 0 3rem;text-align:left} .section-head .eyebrow{margin-bottom:14px} .section-head p{font-size:1.125rem;line-height:1.6;margin-top:18px;color:var(--mut);max-width:60ch} /* the mark, drawn under every section head: hairline at 40% width + tick */ .section-head h2:after{content:"";display:block;width:min(40%,220px);height:6px;margin-top:22px;background:linear-gradient(var(--accent),var(--accent)) right top/6px 6px no-repeat,linear-gradient(var(--bronze),var(--bronze)) left 2.5px/100% 1px no-repeat} .band .section-head h2:after{background:linear-gradient(var(--on-espresso),var(--on-espresso)) right top/6px 6px no-repeat,linear-gradient(var(--bronze),var(--bronze)) left 2.5px/100% 1px no-repeat} .band{background:var(--espresso-2);color:var(--on-espresso);border-top:1px solid var(--band-line)} .band h1,.band h2,.band h3{color:var(--on-espresso)} .band p,.band li,.band .section-head p{color:var(--on-espresso-mut)} /* ---- intro thesis band (v3: one column, the services read as one sentence) -- */ .intro .wrap{display:grid;grid-template-columns:1fr;gap:30px;padding-top:clamp(2.75rem,5vw,4rem);padding-bottom:clamp(2.75rem,5vw,4rem)} .intro p{font-size:1.125rem;max-width:62ch} .intro strong{color:var(--on-espresso);font-weight:600} .intro-list{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0;row-gap:6px} .intro-list div{color:var(--on-espresso);font-weight:500;font-size:clamp(1.25rem,2.4vw,1.5rem);letter-spacing:.01em} .intro-list div:not(:last-child):after{content:"\00B7";color:var(--bronze);margin:0 .55em;font-weight:600} /* ---- capability index (v3: hairline ledger, Fraunces italic numerals) ------ */ .cap-index{border-top:1px solid var(--line-strong)} .cap-row{display:grid;grid-template-columns:88px minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(18px,3vw,44px);align-items:start;padding:clamp(2.25rem,3.6vw,3rem) 0;border-bottom:1px solid var(--line)} .cap-row .cap-num{font-family:var(--font-display,Georgia,serif);font-style:italic;font-size:2.25rem;line-height:1;color:var(--bronze);font-variant-numeric:tabular-nums;font-weight:400} .cap-row h3{font-size:1.5rem} .cap-row p{color:var(--mut);font-size:1rem;line-height:1.6} /* v3: icons are gone site-wide - Fraunces carries the identity, not glyphs */ .cap-row svg{display:none} /* ---- product frame: the real portal UI as proof (the Attio move) ---------- The image already carries its own espresso browser chrome; here it just gets scale, a hairline shelf and an honest caption. New filenames per render - never reuse a product-shot path (zone cache pins assets 1yr). */ .product-frame{margin:0;max-width:1020px} .product-frame img{width:100%;height:auto;border:1px solid var(--line-strong)} .product-frame figcaption{margin-top:14px;font-size:.8125rem;color:var(--mut);display:flex;align-items:center;gap:10px} .product-frame figcaption:before{content:"";width:6px;height:6px;background:var(--accent);flex:0 0 auto} .band .product-frame img{border-color:var(--band-line)} .band .product-frame figcaption{color:var(--on-espresso-mut)} .band .product-frame figcaption:before{background:var(--bronze)} /* ---- split: editorial spread. The left column carries a giant Fraunces pull-quote so the space reads composed, never accidentally empty. --------- */ .split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,5vw,72px);align-items:center} .split img{width:100%;border:1px solid rgba(200,155,106,.22);object-fit:cover;aspect-ratio:4/3} .split-copy .eyebrow{margin-bottom:10px} .split-copy p{font-size:1.0625rem;margin-top:16px} .pull-quote{margin:0;align-self:center} .pull-quote p{font-family:var(--font-display,Georgia,serif);font-style:italic;font-weight:450;font-size:clamp(2rem,3.8vw,3.375rem);line-height:1.1;letter-spacing:-.018em;color:var(--on-espresso);text-wrap:balance;max-width:16ch} .pull-quote p:before{content:"\201C";display:block;font-size:1.7em;line-height:.55;color:var(--bronze);margin-bottom:.18em;font-style:normal} .pull-quote:after{content:"";display:block;width:min(38%,180px);height:6px;margin-top:26px;background:linear-gradient(var(--on-espresso),var(--on-espresso)) right top/6px 6px no-repeat,linear-gradient(var(--bronze),var(--bronze)) left 2.5px/100% 1px no-repeat} .section:not(.band) .pull-quote p{color:var(--ink)} .section:not(.band) .pull-quote:after{background:linear-gradient(var(--accent),var(--accent)) right top/6px 6px no-repeat,linear-gradient(var(--bronze),var(--bronze)) left 2.5px/100% 1px no-repeat} /* ---- annotated process (v3: staircase indents + watermark numerals) --------- */ .process-ledger{display:grid} .process-ledger .step{position:relative;max-width:560px;padding:clamp(2rem,3.4vw,2.75rem) 0 clamp(2rem,3.4vw,2.75rem) clamp(2.5rem,4vw,3.5rem);border-top:1px solid var(--line)} .process-ledger .step:first-child{border-top:0} .process-ledger .step:nth-child(2){margin-left:20%} .process-ledger .step:nth-child(3){margin-left:40%} /* the numeral is a watermark BEHIND the text, not a badge beside it */ .process-ledger .step-num{position:absolute;left:0;top:clamp(.5rem,1.5vw,1rem);z-index:0;font-family:var(--font-display,Georgia,serif);font-style:italic;font-size:clamp(5rem,9vw,7.5rem);line-height:1;color:var(--line);font-variant-numeric:tabular-nums;font-weight:400;pointer-events:none} .process-ledger .step>div{position:relative;z-index:1} .process-ledger h3{font-size:1.5rem} .process-ledger p{margin-top:10px;color:var(--mut);font-size:1rem;max-width:44ch} .section-more{margin-top:2.5rem} /* ---- outcomes ledger (bands variant) ----------------------------------------- */ .outcome-ledger{display:grid;border-top:1px solid var(--band-line)} .outcome-ledger .outcome{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr) auto;gap:clamp(18px,3vw,44px);align-items:baseline;padding:clamp(20px,2.6vw,28px) 0;border-bottom:1px solid rgba(200,155,106,.16)} .outcome-ledger h3{color:var(--on-espresso);font-size:1.375rem} .outcome-ledger p{color:var(--on-espresso-mut);font-size:.9688rem;max-width:52ch} .outcome-ledger .outcome>span{color:var(--bronze);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;white-space:nowrap} /* ---- procurement facts table -------------------------------------------------- */ .facts-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:0;overflow:hidden;box-shadow:var(--shadow-card)} .facts-table th,.facts-table td{text-align:left;padding:14px 20px;border-top:1px solid var(--line);font-size:.9375rem;vertical-align:top} .facts-table tr:first-child th,.facts-table tr:first-child td{border-top:0} .facts-table th{width:34%;font-weight:600;color:var(--ink);white-space:nowrap} .facts-table td{color:var(--body);font-variant-numeric:tabular-nums} @supports not (border-radius:0){.facts-table{border-radius:0}} /* ---- cards / chips / checks ------------------------------------------------ */ .card{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:24px;box-shadow:var(--shadow-card)} @media(min-width:640px){.card{padding:32px}} .card h3{margin-bottom:10px} .tag{display:inline-flex;align-items:center;min-height:24px;border-radius:0;background:var(--field);color:var(--mut);font-size:.75rem;font-weight:600;padding:3px 9px} /* reference chip - application ids, RFQ refs, week ISO, invoice numbers */ .docket{display:inline-flex;align-items:center;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.8125rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;background:var(--field);border:1px solid var(--line-strong);border-radius:0;padding:2px 8px;color:var(--body)} /* v3: checks are an enumerated ledger, not tick glyphs */ .checks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:0;counter-reset:check} .checks li{position:relative;counter-increment:check;padding:14px 0 14px 52px;color:var(--body);font-weight:500;border-top:1px solid var(--line)} .checks li:first-child{border-top:0} .checks li:before{content:counter(check,decimal-leading-zero) ".";position:absolute;left:0;top:13px;font-family:var(--font-display,Georgia,serif);font-style:italic;font-size:1.0625rem;color:var(--accent);font-variant-numeric:tabular-nums} .band .checks li{color:var(--on-espresso-mut);border-top-color:rgba(200,155,106,.16)} .band .checks li:first-child{border-top:0} .band .checks li:before{color:var(--bronze)} /* ---- forms (v3: bespoke intake form - underlined fields on the raw ground, no floating panel; focus thickens the baseline, no glow rings) ------------- */ .form-panel{background:transparent;color:var(--ink);border:0;padding:0;box-shadow:none} .form-panel label{display:block;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);margin:0 0 2px} .form-panel input,.form-panel select,.form-panel textarea{width:100%;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent;color:var(--ink);padding:.625rem 0;font:inherit;font-size:1.125rem;transition:border-color .18s var(--ease)} .form-panel input::placeholder,.form-panel textarea::placeholder{color:var(--faint)} .form-panel textarea{min-height:110px;resize:vertical} .form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus{outline:none;border-bottom:2px solid var(--accent);padding-bottom:calc(.625rem - 1px)} .form-panel .row{display:grid;grid-template-columns:1fr 1fr;gap:26px} .field{margin-bottom:26px} .form-panel button[type="submit"],.form-panel .btn{width:100%} .form-note{font-size:.8125rem;color:var(--mut);text-align:left;margin-top:14px} /* on espresso ground the same form reads in bronze and cream */ .band .form-panel label{color:var(--on-espresso-mut)} .band .form-panel input,.band .form-panel select,.band .form-panel textarea{color:var(--on-espresso);border-bottom-color:rgba(200,155,106,.45)} .band .form-panel input::placeholder,.band .form-panel textarea::placeholder{color:rgba(203,180,156,.55)} .band .form-panel input:focus,.band .form-panel select:focus,.band .form-panel textarea:focus{border-bottom-color:var(--bronze)} .band .form-panel select option{color:var(--ink);background:var(--surface)} .band .form-note{color:var(--on-espresso-mut)} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .turnstile-wrap{display:flex;margin:4px 0 16px;min-height:65px;overflow-x:auto;border-radius:0} .turnstile-wrap .cf-turnstile{flex:0 0 auto} .form-msg{display:none;margin-top:14px;padding:10px 14px;border-radius:0;border:1px solid transparent;font-size:.875rem;font-weight:500} .form-msg.ok{display:block;background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)} .form-msg.err{display:block;background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)} /* ---- contact block ------------------------------------------------------------ */ .contact .split{align-items:start} .contact-links{display:grid;gap:14px;margin-top:26px} .contact-links a{color:var(--on-espresso);font-weight:500} .contact-links a:hover{color:var(--bronze)} /* ---- facts-only trust strip -------------------------------------------------- */ .fact-strip{background:var(--paper);border-top:1px solid var(--line)} .fact-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding-top:20px;padding-bottom:20px} .fact-strip span,.fact-strip a{display:inline-flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:500;color:var(--mut);text-decoration:none} .fact-strip span:before,.fact-strip a:before{content:"";width:6px;height:6px;background:var(--accent);flex:0 0 auto} .fact-strip a{color:var(--accent)} .fact-strip a:hover{text-decoration:underline;text-underline-offset:3px} .fact-strip.band span,.band .fact-strip span{color:var(--on-espresso-mut)} .fact-strip.band span:before,.band .fact-strip span:before,.hero-editorial .fact-strip span:before{background:var(--bronze)} .fact-strip.band{background:var(--espresso-2);border-top:1px solid var(--band-line)} /* ---- footer (one pattern, all pages) ----------------------------------------- */ .site-footer{background:#120C07;color:var(--on-espresso-mut);border-top:1px solid var(--band-line);padding:4rem 0 2rem;font-size:.875rem} [data-theme="dark"] .site-footer{background:#0C0906} .site-footer .brand{color:var(--on-espresso)} .foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap} .foot-summary{max-width:340px} .foot p{color:var(--on-espresso-mut);margin-top:12px} .foot-small{font-size:.8125rem} .foot-abn{margin-top:10px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.6875rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--on-espresso-mut)} .foot-heading{display:block;margin-bottom:14px;text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;font-weight:600;color:var(--bronze)} .foot-list{display:grid;gap:10px} .site-footer a{color:var(--on-espresso-mut)} .site-footer a:hover{color:var(--on-espresso)} .foot-bottom{border-top:1px solid rgba(200,155,106,.18);margin-top:2.5rem;padding-top:1.25rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8125rem;color:var(--on-espresso-mut)} /* ---- motion layer (v3.2, Zura: 'fluid like Attio') ------------------------- Two mechanisms, both reduced-motion safe and CSP-clean: 1. reveal-on-scroll (site.js IO adds .reveal/.is-in): a single 500ms rise. 2. scroll-DRIVEN animations (animation-timeline: view()): reversible, tied to scroll position - product frames surface, section rules draw themselves, process watermarks drift at parallax depth. Browsers without view() timelines simply render the final state. */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .reveal.is-in{opacity:1;transform:none} @supports (animation-timeline: view()){ .product-frame{animation:pf-rise linear both;animation-timeline:view();animation-range:entry 0% entry 65%} .section-head h2:after{animation:rule-draw linear both;animation-timeline:view();animation-range:entry 5% entry 40%} .process-ledger .step-num{animation:num-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%} .pull-quote{animation:pq-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%} } /* Pro's amplitude discipline: movement <=16px, scale <=1.015, no levitation */ @keyframes pf-rise{from{opacity:.35;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} @keyframes rule-draw{from{width:0}to{width:min(40%,220px)}} @keyframes num-drift{from{transform:translateY(10px)}to{transform:translateY(-10px)}} @keyframes pq-rise{from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:none}} /* quiet page continuity: native cross-document view transitions (static-file safe, degrades to plain navigation). Masthead stays fixed; content dissolves with a 6px entry - no lateral slides, no shared-element morphs. */ @view-transition{navigation:auto} ::view-transition-old(root){animation:vt-out .18s var(--ease) both} ::view-transition-new(root){animation:vt-in .22s var(--ease) both} @keyframes vt-out{to{opacity:0}} @keyframes vt-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ @view-transition{navigation:none} } /* ---- responsive collapses (explicit per section) ------------------------------- */ @media(max-width:940px){ .intro .wrap,.split{grid-template-columns:1fr} .cap-row{grid-template-columns:64px 1fr;grid-template-rows:auto auto} .cap-row p{grid-column:2} .process-ledger .step:nth-child(2),.process-ledger .step:nth-child(3){margin-left:0} .process-ledger .step{max-width:none} .outcome-ledger .outcome{grid-template-columns:1fr;gap:8px} .outcome-ledger .outcome>span{order:-1} .facts-table th{width:auto} } @media(max-width:640px){ .hero-rule{grid-template-columns:1fr 1fr} .form-panel .row{grid-template-columns:1fr} .intro-list{display:grid;grid-template-columns:1fr;row-gap:10px} .intro-list div:not(:last-child):after{content:none} .facts-table th,.facts-table td{display:block;padding:10px 16px;border-top:0} .facts-table tr{display:block;border-top:1px solid var(--line);padding:6px 0} .facts-table tr:first-child{border-top:0} .facts-table th{padding-bottom:0;color:var(--mut);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em} } /* ============================================================================ v2 propagation (17 Jul 2026): shared subpage components, then one clearly commented section per page (body carries a .page-* class). Reuse the shared system above first; these sections hold only what a single page needs. ============================================================================ */ /* ---- shared: single-column subpage masthead (trust/privacy/terms) ------------ */ .hero-sub .wrap{padding-top:clamp(3.5rem,7vw,5rem);padding-bottom:clamp(2.75rem,5vw,4rem)} .hero-sub h1{max-width:26ch;margin-top:12px} .hero-sub p{font-size:1.125rem;max-width:66ch;margin-top:20px} .hero-sub .hero-actions{margin-top:1.75rem} /* ---- shared: espresso panel (rounded band card; use together with .band) ----- */ .espresso-panel{border:1px solid rgba(200,155,106,.25);border-radius:0;padding:28px} .espresso-panel p{margin-top:12px} .espresso-panel .eyebrow+h2{margin-top:8px} .espresso-panel .checks{margin-top:0} .panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px} .panel-grid p{margin-top:8px} .small{font-size:.875rem} @media(max-width:880px){.panel-grid{grid-template-columns:1fr}} /* ---- page: /jobs/ (.page-jobs) ------------------------------------------------ */ .page-jobs main{background:var(--paper);padding:3.5rem 0 5rem;display:grid;gap:3.5rem} .page-jobs .section-head{max-width:760px;margin:0 0 24px;text-align:left} /* base h2 size so daemon-generated "Open roles" blocks (no utility class) match */ .page-jobs .section-head h2{font-size:clamp(2.375rem,4.6vw,3.625rem);line-height:1.02;letter-spacing:-.02em;margin:7px 0 10px} .page-jobs .section-head p{margin:0;font-size:1.0625rem;text-align:left} /* hero candidate-promise panel */ .page-jobs .trust-panel{display:grid;gap:12px} .page-jobs .signal{border:1px solid rgba(200,155,106,.28);border-radius:0;background:rgba(255,255,255,.03);padding:18px;color:var(--on-espresso-mut)} .page-jobs .signal strong{display:block;color:var(--on-espresso);font-family:var(--font-display,Georgia,serif);font-weight:550;font-size:1.375rem;line-height:1.2;margin-bottom:5px} .page-jobs .signal span{display:block;font-size:.8125rem} /* posture metrics inside the shared intro band */ .page-jobs .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .page-jobs .metric{border:1px solid rgba(200,155,106,.28);border-radius:0;padding:13px 14px;color:var(--on-espresso)} .page-jobs .metric b{display:block;font-size:1.25rem;line-height:1.1;font-weight:600} .page-jobs .metric span{display:block;margin-top:4px;color:var(--on-espresso-mut);font-size:.8125rem;font-weight:500} /* tags (also used inside the generated open-roles block) */ .page-jobs .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px} /* generated open-roles block (EMBA:OPEN-ROLES markers) - keep selectors stable */ .page-jobs .roles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .page-jobs .role-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:0;padding:22px;box-shadow:var(--shadow-card)} .page-jobs .role-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .page-jobs .role-top h3{font-size:1.1875rem;line-height:1.25;margin:0} .page-jobs .role-type{flex:0 0 auto;background:var(--accent-wash);color:var(--accent-press);font-size:.75rem;font-weight:600;border-radius:0;padding:4px 10px;white-space:nowrap} .page-jobs .role-summary{margin:12px 0 0;color:var(--body);font-size:.875rem;line-height:1.6} .page-jobs .role-meta{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 0;padding:0} .page-jobs .role-meta li{display:flex;flex-direction:column} .page-jobs .role-meta span{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--mut)} .page-jobs .role-meta b{font-size:.875rem;color:var(--ink);font-weight:600} .page-jobs .role-apply{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:18px} .page-jobs .role-apply .btn{font-size:.875rem;padding:10px 15px;min-height:40px} .page-jobs .roles-empty{color:var(--body);font-size:.9375rem;background:var(--surface);border:1px solid var(--line);border-radius:0;padding:22px} /* registration split */ .page-jobs .register{display:grid;grid-template-columns:minmax(0,.82fr) minmax(360px,1fr);gap:28px;align-items:start} .page-jobs .register .process-ledger{margin:0} .page-jobs .form-panel h2{margin:0 0 8px} .page-jobs .form-panel>p{color:var(--body);margin:0 0 18px} .page-jobs .espresso-panel .panel-grid{margin-top:0;gap:24px;align-items:start} @media(max-width:940px){ .page-jobs .register{grid-template-columns:1fr} .page-jobs .trust-panel{grid-template-columns:repeat(3,1fr)} } @media(max-width:820px){.page-jobs .roles-grid{grid-template-columns:1fr}} @media(max-width:680px){ .page-jobs .trust-panel{display:flex;flex-direction:row;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px;padding-bottom:4px} .page-jobs .trust-panel .signal{flex:0 0 78%;scroll-snap-align:start} .page-jobs .signal strong{font-size:1.25rem} .page-jobs .metrics{grid-template-columns:1fr} } /* ---- page: /trust/ (.page-trust) ---------------------------------------------- */ .page-trust main{padding:4.5rem 0 5.5rem;background:var(--paper)} .page-trust .espresso-panel{margin-top:3.5rem} /* ---- page: /capability-pack/ (.page-capability) -------------------------------- */ .page-capability .hero-editorial h1{max-width:24ch} .page-capability .download-card{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:28px;box-shadow:var(--shadow-card)} .page-capability .download-card h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--ink)} .page-capability .download-card p{margin-top:12px;color:var(--body)} .page-capability .download-card .eyebrow{color:var(--accent)} .page-capability .download-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0} .page-capability .download-meta div{border:1px solid var(--line);border-radius:0;background:var(--field);padding:14px;font-weight:500;color:var(--body);font-size:.9375rem} .page-capability .download-meta span{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.11em;color:var(--mut);font-weight:600;margin-bottom:3px} .page-capability .download-note{font-size:.8125rem;color:var(--mut);margin-top:12px} .page-capability .intro .wrap{grid-template-columns:repeat(3,1fr);gap:16px;padding-top:1.5rem;padding-bottom:1.5rem;align-items:stretch} .page-capability .pill{border:1px solid rgba(200,155,106,.28);border-radius:0;padding:16px 18px;background:rgba(255,255,255,.03);font-weight:500;color:var(--on-espresso);font-size:.9375rem} .page-capability .pill span{display:block;color:var(--bronze);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:4px} .page-capability .two{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:start} .page-capability .lead-copy{margin-top:16px;font-size:1.125rem;color:var(--mut);line-height:1.65} .page-capability .quote-box{border:1px solid var(--line);border-radius:0;background:var(--surface);padding:28px;box-shadow:var(--shadow-card)} .page-capability .quote-box h3{margin-top:8px} .page-capability .quote-box p{font-size:1.0625rem;margin-top:16px;line-height:1.65} .page-capability .facts-block{margin-top:3.5rem} .page-capability .facts-block h3{margin-bottom:18px} .page-capability .cap-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid rgba(200,155,106,.28);border-radius:0;overflow:hidden;background:var(--surface)} .page-capability .cap-table th,.page-capability .cap-table td{text-align:left;vertical-align:top;padding:18px;border-bottom:1px solid var(--line);color:var(--body)} .page-capability .cap-table th{background:var(--field);color:var(--ink);font-size:.75rem;text-transform:uppercase;letter-spacing:.11em;font-weight:600} .page-capability .cap-table tr:last-child td{border-bottom:0} .page-capability .cap-table td:first-child{font-weight:600;color:var(--ink)} .page-capability .cta-card{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line);border-radius:0;background:var(--surface);box-shadow:var(--shadow-card);padding:28px} .page-capability .cta-card p{margin-top:8px;color:var(--mut)} @media(max-width:940px){ .page-capability .two{grid-template-columns:1fr} .page-capability .download-card{max-width:620px} .page-capability .intro .wrap{grid-template-columns:1fr 1fr} .page-capability .cta-card{align-items:flex-start;flex-direction:column} } @media(max-width:640px){ .page-capability .intro .wrap{grid-template-columns:1fr} .page-capability .download-meta{grid-template-columns:1fr} .page-capability .cap-table,.page-capability .cap-table tbody,.page-capability .cap-table tr,.page-capability .cap-table td{display:block} .page-capability .cap-table thead{display:none} .page-capability .cap-table tr{border-bottom:1px solid var(--line)} .page-capability .cap-table tr:last-child{border-bottom:0} .page-capability .cap-table td{border-bottom:0;padding:14px 16px} .page-capability .cap-table td:before{content:attr(data-label);display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.11em;color:var(--mut);font-weight:600;margin-bottom:3px} .page-capability .hero-actions .btn,.page-capability .download-card .btn,.page-capability .cta-card .btn{width:100%} } /* ---- pages: /privacy/ + /terms/ (.page-legal) ----------------------------------- */ /* narrow the reading column only - header/footer keep the shared 1160px wrap */ .page-legal main .wrap,.page-legal .hero-editorial .wrap,.page-legal .draftbar .wrap{max-width:1040px} .page-legal main{padding:4rem 0 5rem;background:var(--paper)} .page-legal main h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:44px} .page-legal main h3{font-size:1.25rem;margin-top:0} .page-legal main p{margin:12px 0 0} .page-legal main ul{margin:14px 0 0;padding-left:22px;color:var(--body)} .page-legal main li{margin:8px 0} .page-legal .card .eyebrow{margin-bottom:6px} .page-legal .card h2{margin-top:32px} .page-legal .card .eyebrow+h2{margin-top:6px} .page-legal .card-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px} .page-legal main .espresso-panel{margin-top:30px;padding:26px} .page-legal main .espresso-panel h2{margin-top:0} .page-legal main .espresso-panel .eyebrow+h2{margin-top:8px} /* terms draft notice - warn family */ .page-legal .draftbar{background:var(--warn-bg);color:var(--warn-ink);border-top:1px solid var(--warn-line);border-bottom:1px solid var(--warn-line)} .page-legal .draftbar .wrap{display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px;font-weight:600;font-size:.875rem} .page-legal .draftbar .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--warn-ink)} .page-legal .draft{background:var(--warn-bg);border:1px solid var(--warn-line);border-left-width:6px;border-radius:0;padding:22px 24px;margin-bottom:30px} .page-legal .draft .eyebrow{color:var(--warn-ink)} .page-legal .draft h2{margin-top:6px;color:var(--warn-ink);font-size:clamp(1.375rem,3.4vw,1.75rem)} .page-legal .draft p{color:var(--warn-ink)} @media(max-width:760px){.page-legal .card-grid{grid-template-columns:1fr}} /* ---- page: /work/ (.page-work) - illustrative case files ----------------------- */ .page-work .case-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:baseline;margin-bottom:clamp(2.5rem,4vw,3.5rem)} .page-work .case-num{font-family:var(--font-display,Georgia,serif);font-style:italic;font-size:clamp(3.5rem,6vw,5.5rem);line-height:.8;color:var(--line-strong);font-variant-numeric:tabular-nums} .page-work .band .case-num{color:rgba(200,155,106,.35)} .page-work .case-head .eyebrow{margin-bottom:10px} .page-work .case-head h2{max-width:20ch} .page-work .case-head h2:after{content:"";display:block;width:min(40%,220px);height:6px;margin-top:20px;background:linear-gradient(var(--accent),var(--accent)) right top/6px 6px no-repeat,linear-gradient(var(--bronze),var(--bronze)) left 2.5px/100% 1px no-repeat} .page-work .band .case-head h2:after{background:linear-gradient(var(--on-espresso),var(--on-espresso)) right top/6px 6px no-repeat,linear-gradient(var(--bronze),var(--bronze)) left 2.5px/100% 1px no-repeat} .page-work .case-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(32px,5vw,64px);align-items:start} .page-work .case-copy h3{font-size:1.25rem;margin-top:1.75rem} .page-work .case-copy h3:first-child{margin-top:0} .page-work .case-copy p{margin-top:10px;max-width:58ch} .page-work .band .case-copy p{color:var(--on-espresso-mut)} /* the exhibit: a document fragment presented like a prospectus appendix */ .exhibit{border:1px solid var(--line-strong);background:var(--surface)} .band .exhibit{border-color:var(--band-line);background:rgba(250,246,240,.04)} .exhibit-bar{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)} .band .exhibit-bar{border-bottom-color:var(--band-line);color:var(--bronze)} .exhibit-body{padding:22px 18px} .exhibit-body h4{font-family:var(--font-display,Georgia,serif);font-size:1.0625rem;font-weight:550;color:var(--ink);margin:0 0 14px} .band .exhibit-body h4{color:var(--on-espresso)} .exhibit-body dl{margin:0;display:grid} .exhibit-body dl>div{padding:10px 0;border-top:1px solid var(--line)} .band .exhibit-body dl>div{border-top-color:rgba(200,155,106,.16)} .exhibit-body dt{font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--mut);margin-bottom:3px} .band .exhibit-body dt{color:var(--bronze)} .exhibit-body dd{margin:0;font-size:.875rem;line-height:1.55;color:var(--body)} .band .exhibit-body dd{color:var(--on-espresso-mut)} .exhibit-body table{width:100%;border-collapse:collapse;font-size:.8125rem} .exhibit-body th,.exhibit-body td{text-align:left;padding:8px 10px 8px 0;border-top:1px solid var(--line);vertical-align:top;color:var(--body)} .band .exhibit-body th,.band .exhibit-body td{border-top-color:rgba(200,155,106,.16);color:var(--on-espresso-mut)} .exhibit-body thead th{border-top:0;font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut)} .band .exhibit-body thead th{color:var(--bronze)} .exhibit-body tbody tr:last-child td{font-weight:600;color:var(--ink)} .band .exhibit-body tbody tr:last-child td{color:var(--on-espresso)} .page-work .contact-cta .btn{margin-top:6px} @supports (animation-timeline: view()){ .exhibit{animation:pf-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%} } @media(max-width:940px){ .page-work .case-grid{grid-template-columns:1fr} .page-work .case-head{grid-template-columns:auto 1fr} } /* ---- page: /404.html (.page-404, standalone - no nav/footer/js) ----------------- */ .page-404{display:flex;align-items:center;justify-content:center;text-align:center;min-height:100svh;padding:24px;background:var(--espresso);color:var(--on-espresso);position:relative;overflow:hidden} .page-404 .box{position:relative;z-index:2;max-width:34rem;padding:clamp(1.75rem,6vw,3rem);background:rgba(34,23,16,.75);border:1px solid var(--band-line);border-radius:0;backdrop-filter:none} .page-404 .eyebrow{color:var(--bronze);margin-bottom:.75rem} .page-404 h1{font-size:clamp(4rem,16vw,7rem);line-height:1;color:var(--on-espresso);font-weight:560;letter-spacing:-.018em;font-variant-numeric:tabular-nums} .page-404 h2{font-size:clamp(1.25rem,3.4vw,1.625rem);margin:.75rem 0 .25rem;color:var(--on-espresso)} .page-404 p{font-size:1rem;color:var(--on-espresso-mut);margin:.5rem 0 1.75rem;line-height:1.6} .page-404 .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ---- motion ------------------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} } /* ---- print -------------------------------------------------------------------- */ @media print{ .site-header,.nav-scrim,.hero-actions,.turnstile-wrap,.form-panel,.menu-btn,.theme-btn,.fact-strip a{display:none!important} body{background:#fff;color:#000} .hero-editorial,.band,.site-footer{background:#fff!important;color:#000!important;border:0} .hero-editorial h1,.band h2,.band h3,.site-footer .brand{color:#000!important} .hero-editorial p,.band p,.band li{color:#333!important} .section{padding:1.5rem 0;border:0} a[href^="http"]:after{content:" (" attr(href) ")";font-size:.75em;color:#555} }