/* ============================================================ ELARION PARTNERS — V1 site styles Two directions, switchable via [data-theme] on : a = "Aubergine & Champagne" (editorial / institutional) b = "Ultraviolet" (sharp / contemporary) ============================================================ */ /* ---------- Theme A : Aubergine & Champagne (default) ---------- */ :root, :root[data-theme="a"] { --bg: oklch(0.985 0.006 95); --bg-alt: oklch(0.958 0.012 92); --bg-deep: oklch(0.255 0.075 305); --paper: oklch(0.995 0.004 95); --ink: oklch(0.245 0.032 312); --ink-soft: oklch(0.435 0.030 312); --ink-mute: oklch(0.52 0.022 312); /* ≥4.5:1 on --bg-alt for small labels (WCAG 1.4.3) */ --ink-faint: oklch(0.585 0.022 312); /* large text only (≥3:1) — hero .soft spans */ --on-deep: oklch(0.965 0.012 95); --on-deep-soft: oklch(0.80 0.03 312); --primary: oklch(0.475 0.195 295); /* vivid ultraviolet; brand mark (#70479C / oklch(0.455 0.140 305)) to be regenerated to match */ --primary-deep: oklch(0.350 0.120 305); --accent: oklch(0.745 0.095 80); /* champagne gold */ --accent-deep: oklch(0.52 0.10 70); /* ≥4.5:1 on --bg-alt for small labels (WCAG 1.4.3) */ --line: oklch(0.885 0.012 92); --line-deep: oklch(0.79 0.02 92); --line-on-deep: oklch(0.40 0.06 305); --atc-blue: oklch(0.40 0.13 268); --atc-gold: oklch(0.76 0.11 84); /* type */ --font-display: "Newsreader", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-label: "Hanken Grotesk", system-ui, sans-serif; --display-weight: 500; --display-tracking: -0.012em; --label-tracking: 0.18em; --label-transform: uppercase; --label-size: 0.74rem; --radius: 3px; --radius-lg: 5px; --hero-rule: 1px; --maxw: 1180px; --gutter: clamp(1.25rem, 5vw, 5rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- Theme B : Ultraviolet ---------- */ :root[data-theme="b"] { --bg: oklch(0.984 0.004 300); --bg-alt: oklch(0.955 0.009 300); --bg-deep: oklch(0.205 0.055 300); --paper: oklch(1 0 0); --ink: oklch(0.205 0.022 300); --ink-soft: oklch(0.40 0.025 300); --ink-mute: oklch(0.55 0.02 300); --on-deep: oklch(0.97 0.008 300); --on-deep-soft: oklch(0.76 0.04 300); --primary: oklch(0.475 0.195 295); --primary-deep: oklch(0.34 0.145 296); --accent: oklch(0.70 0.165 300); /* vivid orchid */ --accent-deep: oklch(0.55 0.18 298); --line: oklch(0.905 0.008 300); --line-deep: oklch(0.83 0.015 300); --line-on-deep: oklch(0.36 0.05 298); --atc-blue: oklch(0.42 0.15 264); --atc-gold: oklch(0.78 0.12 86); --font-display: "Schibsted Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-label: "JetBrains Mono", ui-monospace, monospace; --display-weight: 700; --display-tracking: -0.028em; --label-tracking: 0.12em; --label-transform: uppercase; --label-size: 0.72rem; --radius: 2px; --radius-lg: 3px; --hero-rule: 2px; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ::selection { background: var(--primary); color: var(--paper); } /* Visible keyboard focus everywhere (WCAG 2.4.7). Form fields keep their own box-shadow focus style (their :focus rule is more specific). */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius); } /* On deep backgrounds the primary purple is too dark to see; use the gold. */ .section-deep :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .hero-dark :focus-visible, .questions :focus-visible, .sprint :focus-visible { outline-color: var(--accent); } /* Skip link: first tab stop on every page (hidden until focused) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--primary); color: var(--paper); font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 0.85em 1.3em; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } /* ---------- Layout primitives ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-wide { max-width: 1340px; margin-inline: auto; padding-inline: var(--gutter); } section { position: relative; } .section-pad { padding-block: clamp(4.5rem, 9vw, 9rem); } .section-pad-sm { padding-block: clamp(3rem, 6vw, 5.5rem); } .divider { height: 1px; background: var(--line); border: 0; } /* eyebrow / labels */ .eyebrow { font-family: var(--font-label); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); font-weight: 600; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow.accent { color: var(--accent-deep); } .eyebrow::before { content: ""; width: 1.8em; height: 1px; background: currentColor; opacity: 0.6; flex: none; } .eyebrow.no-rule::before { display: none; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.04; color: var(--ink); text-wrap: balance; } .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.02; font-size: clamp(2.7rem, 6.4vw, 5.4rem); text-wrap: balance; } h2.title { font-size: clamp(1.95rem, 4vw, 3.25rem); line-height: 1.06; } h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.12; } .lead { font-size: clamp(1.18rem, 1.9vw, 1.5rem); line-height: 1.5; color: var(--ink-soft); font-weight: 400; text-wrap: pretty; max-width: 42ch; } .prose { color: var(--ink-soft); text-wrap: pretty; } .prose strong { color: var(--ink); font-weight: 600; } em.em { font-style: italic; } :root[data-theme="b"] em.em { font-style: normal; color: var(--accent-deep); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-label); font-size: 0.82rem; letter-spacing: var(--label-tracking); text-transform: var(--label-transform); font-weight: 600; padding: 0.95em 1.5em; border-radius: var(--radius); border: 1px solid transparent; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); white-space: nowrap; line-height: 1; } .btn .arr { transition: transform .3s var(--ease); } .btn:hover .arr { transform: translateX(4px); } .btn-primary { background: var(--primary); color: var(--paper); } .btn-primary:hover { background: var(--primary-deep); } .btn-ghost { border-color: var(--line-deep); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); } .btn-on-deep { background: var(--accent); color: var(--bg-deep); } .btn-on-deep:hover { background: var(--paper); color: var(--bg-deep); } .btn-ghost-deep { border-color: var(--line-on-deep); color: var(--on-deep); } .btn-ghost-deep:hover { border-color: var(--on-deep); background: var(--on-deep); color: var(--bg-deep); } .link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-label); font-size: 0.8rem; letter-spacing: var(--label-tracking); text-transform: var(--label-transform); font-weight: 600; color: var(--primary); padding-bottom: 0.3em; border-bottom: 1px solid var(--line-deep); transition: border-color .25s var(--ease), gap .25s var(--ease); } .link-arrow:hover { border-color: var(--primary); gap: 0.85em; } :root[data-theme="b"] .link-arrow { color: var(--accent-deep); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in oklch, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease); } .site-header.scrolled { border-bottom-color: var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; } .brand-logo { height: 38px; width: auto; display: block; } .footer-logo { height: 54px; width: auto; display: block; margin-bottom: 0.1rem; } .brand .mark { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.42rem; letter-spacing: var(--display-tracking); color: var(--ink); } :root[data-theme="b"] .brand .mark { font-weight: 700; letter-spacing: -0.03em; } .brand .sub { font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; transform: translateY(-1px); } .brand .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; align-self: center; } :root[data-theme="b"] .brand .dot { border-radius: 1px; background: var(--primary); } .nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); } .nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); } .nav-links a { font-family: var(--font-label); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); position: relative; padding-block: 0.4rem; transition: color .2s var(--ease); } :root[data-theme="b"] .nav-links a { letter-spacing: 0.04em; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--primary); transition: width .25s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; } .nav-links a[aria-current="page"] { color: var(--ink); } .nav-links a.soon { color: var(--ink-mute); } .nav-links a.soon::after { background: var(--line-deep); } .nav-cta { display: inline-flex; } .menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; } .menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative; transition: .3s var(--ease); } .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--ink); transition: .3s var(--ease); } .menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; } body.menu-open .menu-toggle span { background: transparent; } body.menu-open .menu-toggle span::before { top: 0; transform: rotate(45deg); } body.menu-open .menu-toggle span::after { top: 0; transform: rotate(-45deg); } /* mobile nav panel. visibility:hidden while closed keeps its links out of the keyboard tab order and away from screen readers (opacity alone does not). */ .mobile-nav { position: fixed; inset: 76px 0 0 0; z-index: 55; background: var(--bg); padding: 2rem var(--gutter) 3rem; display: flex; flex-direction: column; gap: 0.4rem; transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; } body.menu-open .mobile-nav { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s; } /* Link styles scoped to :not(.btn): the CTA at the foot of the menu is a button and must keep its own typography, not the display-serif link style. */ .mobile-nav a:not(.btn) { font-family: var(--font-display); font-size: 1.8rem; font-weight: var(--display-weight); padding: 0.7rem 0; border-bottom: 1px solid var(--line); color: var(--ink); } .mobile-nav a.soon { color: var(--ink-mute); } .mobile-nav .btn { margin-top: 1.6rem; justify-content: center; width: 100%; } /* ---------- Hero ---------- */ .hero { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6.5rem); position: relative; } /* Home: full-bleed dark-aubergine hero band with the brand leaf motif baked in. A left-weighted scrim keeps both text columns legible over the artwork. */ .hero-dark { max-width: none; margin-inline: 0; padding-inline: var(--gutter); padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); color: var(--on-deep); background: linear-gradient(to right, oklch(0.31 0.135 300 / 0.93) 0%, oklch(0.31 0.135 300 / 0.78) 45%, oklch(0.31 0.135 300 / 0.45) 100%), oklch(0.31 0.135 300) url("hero-dark.jpg") right center / cover no-repeat; } .hero-dark > * { max-width: var(--maxw); margin-inline: auto; } .hero-dark .eyebrow { color: var(--on-deep-soft); } .hero-dark .display { color: var(--on-deep); } :root[data-theme="a"] .hero-dark .display .soft { color: var(--accent); } .hero-dark .hero-lead { color: var(--on-deep-soft); } .hero-dark .hero-meta { border-top-color: var(--line-on-deep); } .hero-dark .hero-meta .meta-head { color: var(--on-deep-soft); } .hero-dark .hero-meta .item .k { color: var(--on-deep-soft); } .hero-dark .hero-meta .item .v { color: var(--on-deep); } .hero-dark .btn-primary { background: var(--accent); color: #211430; border-color: var(--accent); } .hero-dark .btn-primary:hover { filter: brightness(1.06); } .hero-dark .btn-ghost { color: var(--on-deep); border-color: var(--line-on-deep); } .hero-dark .btn-ghost:hover { background: rgba(255,255,255,0.08); } @media (max-width: 760px) { /* Stacked: weight the scrim toward the bottom so text stays on dark ground. */ .hero-dark { background: linear-gradient(to bottom, oklch(0.31 0.135 300 / 0.88) 0%, oklch(0.31 0.135 300 / 0.74) 100%), oklch(0.31 0.135 300) url("hero-dark.jpg") right center / cover no-repeat; } } /* Inner pages: subtle light leaf watermark on the right — a quiet echo of the home dark band, on the same cream so it's seamless (no rectangle). */ .hero-soft { background: url("hero-soft.jpg") right center / cover no-repeat; } @media (max-width: 760px) { .hero-soft { background-size: 150% auto; background-position: right top; } } .hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); } .hero .display { margin-top: 1.4rem; max-width: 16ch; } .hero .display .soft { color: var(--ink-faint); } /* large text: 3:1 suffices */ :root[data-theme="a"] .hero .display .soft { font-style: italic; } .hero-lead { margin-top: 1.8rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; } .hero-meta { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); } .hero-meta .meta-head { flex-basis: 100%; font-family: var(--font-label); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-mute); font-weight: 700; margin-bottom: -0.6rem; } .hero-meta .item { display: flex; flex-direction: column; gap: 0.3rem; } .hero-meta .item .k { font-family: var(--font-label); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } .hero-meta .item .v { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); } /* ---------- Three Questions ---------- */ .questions { background: var(--bg-deep); color: var(--on-deep); } .questions .eyebrow { color: var(--on-deep-soft); } .questions .q-intro { color: var(--on-deep); font-size: clamp(1.5rem, 3vw, 2.4rem); font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.12; max-width: 20ch; margin-top: 1.2rem; } .q-list { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line-on-deep); } .q-item { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line-on-deep); cursor: pointer; } .q-item .num { font-family: var(--font-label); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.1em; color: var(--accent); padding-top: 0.5rem; } .q-item .q-body .q-text { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.16; color: var(--on-deep); letter-spacing: var(--display-tracking); transition: color .3s var(--ease); } .q-item .q-why { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .45s var(--ease), opacity .45s var(--ease), margin-top .45s var(--ease); opacity: 0; } .q-item .q-why > span { min-height: 0; } .q-item .q-why p { color: var(--on-deep-soft); max-width: 56ch; font-size: 1.02rem; } .q-item.open .q-why { grid-template-rows: 1fr; opacity: 1; margin-top: 1rem; } .q-item .toggle { grid-column: 2; justify-self: end; align-self: center; width: 34px; height: 34px; border: 1px solid var(--line-on-deep); border-radius: 50%; display: none; align-items: center; justify-content: center; color: var(--on-deep-soft); transition: .3s var(--ease); } .q-foot { margin-top: clamp(2rem, 4vw, 3rem); color: var(--on-deep-soft); max-width: 60ch; font-size: 1.05rem; text-wrap: pretty; } .q-foot strong { color: var(--on-deep); font-weight: 600; } /* ---------- Problems grid ---------- */ .problems-head { display: grid; gap: 1.4rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .problems-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); } .problem { padding: clamp(1.6rem, 3vw, 2.3rem) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.2rem; align-items: start; } .problems-grid .problem:nth-child(odd) { padding-right: clamp(1.5rem, 4vw, 3.5rem); border-right: 1px solid var(--line); } .problems-grid .problem:nth-child(even) { padding-left: clamp(1.5rem, 4vw, 3.5rem); } .problem .pn { font-family: var(--font-label); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; color: var(--accent-deep); padding-top: 0.25rem; } :root[data-theme="b"] .problem .pn { color: var(--primary); } .problem p { color: var(--ink-soft); text-wrap: pretty; font-size: 1.06rem; } .problem p .hl { color: var(--ink); font-weight: 600; } /* ---------- Categories of work (Advisory) ---------- */ /* Subgrid lets every card share row heights, so the title block, intro line and bullet divider all align across the three cards regardless of how the text wraps. */ .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto auto; gap: 1px; background: var(--line); border: 1px solid var(--line); } .work-cat { background: var(--bg); padding: clamp(1.8rem, 3vw, 2.6rem); display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.85rem; } .work-cat .work-no { font-family: var(--font-label); font-size: 0.74rem; letter-spacing: var(--label-tracking); color: var(--accent-deep); font-weight: 600; } :root[data-theme="b"] .work-cat .work-no { color: var(--primary); } .work-cat h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); align-self: start; } .work-cat .work-lead { color: var(--ink-soft); text-wrap: pretty; margin: 0; } .work-list { list-style: none; margin: 0; padding: 1.3rem 0 0; display: grid; gap: 0.95rem; align-content: start; border-top: 1px solid var(--line); } .work-list li { color: var(--ink-soft); font-size: 1rem; text-wrap: pretty; padding-left: 1.1rem; position: relative; } .work-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-deep); } :root[data-theme="b"] .work-list li::before { background: var(--primary); } .work-list li strong { color: var(--ink); font-weight: 600; } /* ---------- Who we are ---------- */ .who { background: var(--bg-alt); } .who-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem,4vw,3rem); } .who .statement { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.22; letter-spacing: var(--display-tracking); color: var(--ink); text-wrap: balance; } .who .statement .accent-word { color: var(--primary); } :root[data-theme="a"] .who .statement .accent-word { font-style: italic; } .who-sign { margin-top: 2rem; font-family: var(--font-label); font-size: 0.78rem; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } /* ---------- Sprint feature ---------- */ .sprint { background: var(--bg-deep); color: var(--on-deep); overflow: hidden; } .sprint .eyebrow { color: var(--accent); } .sprint-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; } .sprint h2 { color: var(--on-deep); margin-top: 1.3rem; } .sprint .prose { color: var(--on-deep-soft); margin-top: 1.4rem; max-width: 50ch; } .sprint-specs { display: grid; gap: 0; border: 1px solid var(--line-on-deep); border-radius: var(--radius-lg); } .sprint-spec { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--line-on-deep); } .sprint-spec:last-child { border-bottom: 0; } .sprint-spec .k { font-family: var(--font-label); font-size: 0.74rem; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--on-deep-soft); font-weight: 600; } .sprint-spec .v { font-family: var(--font-display); font-size: 1.15rem; color: var(--on-deep); text-align: right; } .sprint-spec .v.gold { color: var(--accent); } /* ---------- Service cards ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .svc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .svc-card { background: var(--bg); padding: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: 1rem; transition: background .3s var(--ease); position: relative; } .svc-card:hover { background: var(--paper); } .svc-card .svc-no { font-family: var(--font-label); font-size: 0.74rem; letter-spacing: var(--label-tracking); color: var(--ink-mute); font-weight: 600; } .svc-card h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); } .svc-card .svc-tag { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; } .svc-card p { color: var(--ink-soft); flex: 1; text-wrap: pretty; } .svc-card .link-arrow { margin-top: 0.4rem; align-self: flex-start; } .svc-card.atc { --primary: var(--atc-blue); --accent-deep: var(--atc-gold); } .svc-card .accent-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); } .svc-card:hover .accent-bar { transform: scaleY(1); } /* ---------- Section header (reusable) ---------- */ .sec-head { display: grid; gap: 1.4rem; max-width: 56ch; margin-bottom: clamp(2.5rem, 5vw, 3.8rem); } .sec-head.center { margin-inline: auto; text-align: center; justify-items: center; } .sec-head .lead { max-width: 56ch; } /* ---------- Services page detail ---------- */ .svc-detail { display: grid; grid-template-columns: 1fr; gap: clamp(2rem,4vw,3rem); padding-block: clamp(3rem,6vw,5rem); border-bottom: 1px solid var(--line); } .svc-detail:last-of-type { border-bottom: 0; } .svc-detail .sd-aside { display: flex; flex-direction: column; gap: 1rem; } .svc-detail .sd-index { font-family: var(--font-label); font-size: 0.78rem; letter-spacing: var(--label-tracking); color: var(--ink-mute); font-weight: 600; } .svc-detail h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); } .svc-detail .sd-entity { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; } .svc-detail .prose { font-size: 1.12rem; max-width: 60ch; } .svc-detail .sd-points { list-style: none; padding: 0; margin-top: 1.6rem; display: grid; gap: 0.9rem; } .svc-detail .sd-points li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; color: var(--ink-soft); } .svc-detail .sd-points li::before { content: ""; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; margin-top: calc((1lh - 7px) / 2); } :root[data-theme="b"] .svc-detail .sd-points li::before { border-radius: 1px; background: var(--primary); } .svc-detail.atc { --accent-deep: var(--atc-gold); --accent: var(--atc-gold); --primary: var(--atc-blue); } /* ---------- Principles ---------- */ .principles { background: var(--bg-alt); } .principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,3vw,2.5rem); margin-top: clamp(2.5rem,5vw,3.5rem); } .principle { display: flex; flex-direction: column; gap: 0.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line-deep); } .principle .pn { font-family: var(--font-label); font-size: 0.74rem; letter-spacing: var(--label-tracking); color: var(--accent-deep); font-weight: 600; } :root[data-theme="b"] .principle .pn { color: var(--primary); } .principle h3, .principle h4 { font-size: 1.25rem; } .principle p { color: var(--ink-soft); font-size: 0.99rem; text-wrap: pretty; } /* ---------- Team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem,2.5vw,2.2rem); } .member { display: flex; flex-direction: column; } .portrait { aspect-ratio: 4 / 5; width: 100%; border-radius: var(--radius-lg); background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--primary) 12%, var(--bg-alt)) 0 9px, color-mix(in oklch, var(--primary) 6%, var(--bg-alt)) 9px 18px); border: 1px solid var(--line); position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; } .portrait .ph-tag { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--font-label); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; opacity: 0.7; } .portrait .initials { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2.6rem; color: color-mix(in oklch, var(--primary) 55%, var(--ink)); position: absolute; top: 1rem; left: 1.1rem; opacity: 0.5; } .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .member .m-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.45rem; margin-top: 1.2rem; letter-spacing: var(--display-tracking); } .member .m-role { font-family: var(--font-label); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; margin-top: 0.5rem; line-height: 1.5; } :root[data-theme="b"] .member .m-role { color: var(--primary); } .member .m-cred { color: var(--ink); font-size: 0.98rem; margin-top: 0.7rem; font-weight: 500; } .member .m-bio { color: var(--ink-mute); font-size: 0.95rem; margin-top: 0.5rem; font-style: italic; } .member .m-entity { margin-top: 0.7rem; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } /* ---- Team cards: clickable; full bio opens in a modal ---- */ .member { cursor: pointer; border-radius: var(--radius-lg); transition: transform .25s var(--ease); } .member:hover { transform: translateY(-4px); } .member:hover .portrait { border-color: var(--primary); } .member:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; } /* Bio + entity stay in the DOM (SEO + no-JS), but are shown only in the modal. */ .member .m-bio, .member .m-entity { display: none; } .member .m-view { margin-top: 0.85rem; font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 0.45em; transition: gap .25s var(--ease); } :root[data-theme="b"] .member .m-view { color: var(--primary); } .member:hover .m-view { gap: 0.75em; } /* ---- Partner profile modal ---- */ .profile-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); } .profile-modal[hidden] { display: none; } .pm-backdrop { position: absolute; inset: 0; background: color-mix(in oklch, var(--bg-deep) 70%, transparent); backdrop-filter: blur(3px); } .pm-dialog { position: relative; z-index: 1; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); width: 100%; max-width: 54rem; max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 1fr; box-shadow: 0 30px 80px -20px color-mix(in oklch, var(--bg-deep) 60%, transparent); } /* Sticky close: stays visible while the dialog scrolls. It sits in a zero-height first grid row (negative bottom margin) so it overlays the content instead of pushing it down. */ .pm-close { position: sticky; top: 0.8rem; z-index: 2; grid-row: 1; grid-column: 1 / -1; justify-self: end; margin: 0.8rem 0.9rem -3rem 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease); } .pm-close:hover { background: var(--bg-alt); } .pm-portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--bg-alt); grid-row: 2; grid-column: 1; } .pm-body { grid-row: 3; grid-column: 1; } .pm-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .pm-portrait .initials { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 3.2rem; color: color-mix(in oklch, var(--primary) 55%, var(--ink)); position: absolute; top: 1rem; left: 1.2rem; opacity: 0.5; } .pm-portrait .ph-tag { display: none; } .pm-body { padding: clamp(1.6rem, 3.5vw, 2.8rem); } .pm-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: var(--display-tracking); } .pm-role { font-family: var(--font-label); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; margin-top: 0.6rem; line-height: 1.5; } :root[data-theme="b"] .pm-role { color: var(--primary); } .pm-cred { color: var(--ink); font-weight: 500; margin-top: 1.1rem; } .pm-bio { color: var(--ink-soft); margin-top: 0.8rem; text-wrap: pretty; } .pm-bio:empty { display: none; } .pm-bio p { margin: 0.7rem 0 0; } .pm-bio p:first-child { margin-top: 0; } .pm-entity { margin-top: 1.2rem; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } /* prev/next paging through the partner profiles */ .pm-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); } .pm-nav button { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--accent-deep); padding: 0.4em 0; transition: color .2s var(--ease); } .pm-nav button:hover { color: var(--ink); } @media (min-width: 680px) { /* Photo is a fixed-size card in the top-left, identical for every bio; the whole dialog scrolls when a long bio overflows. */ .pm-dialog { grid-template-columns: 15rem 1fr; align-items: start; } .pm-portrait { grid-row: 2; grid-column: 1; align-self: start; margin: clamp(1.6rem, 3.5vw, 2.8rem) 0 clamp(1.6rem, 3.5vw, 2.8rem) clamp(1.6rem, 3.5vw, 2.8rem); border-radius: var(--radius-lg); border: 1px solid var(--line); } .pm-body { grid-row: 2; grid-column: 2; } } body.pm-open { overflow: hidden; } @keyframes pm-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } .profile-modal:not([hidden]) .pm-dialog { animation: pm-in 0.28s var(--ease); } @media (prefers-reduced-motion: reduce) { .member, .member .m-view { transition: none; } .profile-modal:not([hidden]) .pm-dialog { animation: none; } } /* ---------- Insights feed ---------- Entries stack newest-first; each is meta (tag chip + date) beside the body. The filter bar is empty in the HTML — site.js builds its buttons from the tags actually present in the feed. */ .feed-filter { margin-bottom: clamp(1.4rem,3vw,2.2rem); } .feed-filter-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; } .feed-filter-buttons button { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ink-mute); background: none; border: 1px solid var(--line-deep); border-radius: 100px; padding: 0.55em 1.15em; cursor: pointer; transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease); } .feed-filter-buttons button:hover { color: var(--primary); border-color: var(--primary); } .feed-filter-buttons button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; } .feed { border-top: 1px solid var(--line); } .feed-item { display: grid; grid-template-columns: 1fr; gap: 1rem 3rem; padding: clamp(1.8rem,3.5vw,2.6rem) 0; border-bottom: 1px solid var(--line); } .feed-meta { display: flex; align-items: center; gap: 1rem; } .feed-meta time { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .feed-tag { display: inline-flex; align-items: center; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent-deep); border: 1px solid currentColor; border-radius: 100px; padding: 0.4em 0.85em; white-space: nowrap; } .feed-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; max-width: 62ch; } .feed-body h2 { font-size: clamp(1.4rem,2.4vw,1.9rem); line-height: 1.12; } .feed-body p { color: var(--ink-soft); text-wrap: pretty; } .feed-body .feed-standfirst { font-style: italic; color: var(--ink-mute); } @media (min-width: 720px) { .feed-item { grid-template-columns: 14rem 1fr; } .feed-meta { flex-direction: column; align-items: flex-start; gap: 0.8rem; } } /* Screen-reader-only utility (e.g. the feed filter's status line) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .badge-soon { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent-deep); border: 1px solid currentColor; border-radius: 100px; padding: 0.4em 0.85em; } .badge-soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ---------- CTA band ---------- */ .cta-band { background: var(--bg-deep); color: var(--on-deep); text-align: center; } .cta-band .eyebrow { color: var(--on-deep-soft); justify-content: center; margin-bottom: 1.1rem; } .cta-band h2 { color: var(--on-deep); font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 18ch; margin-inline: auto; } .cta-band .lead { color: var(--on-deep-soft); margin: 1.4rem auto 0; max-width: 48ch; } .cta-band .hero-actions { justify-content: center; margin-top: 2.4rem; } /* Deep-background section helper (reuses the dark-band palette). Used to make the Team track-record band stand out so visitors see there's more below. */ .section-deep { background: var(--bg-deep); color: var(--on-deep); } .section-deep .eyebrow { color: var(--on-deep-soft); } .section-deep .title, .section-deep h2, .section-deep h3, .section-deep h4 { color: var(--on-deep); } .section-deep .lead, .section-deep p { color: var(--on-deep-soft); } .section-deep .accent-word { color: var(--accent); } .section-deep .principle .pn { color: var(--accent); } .section-deep strong { color: var(--on-deep); } .section-deep .badge-soon { color: var(--accent); border-color: var(--line-on-deep); } /* Bridge cue: a short line + down-arrow that points from the grid to the band */ .team-bridge { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .team-bridge p { font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; text-align: center; padding-top: clamp(1.5rem, 3vw, 2.5rem); margin: 0; } .team-bridge .arr-down { display: block; margin: 0.6rem auto 0; width: 1px; height: clamp(1.6rem, 4vw, 2.6rem); background: linear-gradient(var(--line-deep), transparent); } /* ---------- Forms ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; } .form-card { display: grid; gap: 1.3rem; } .field { display: flex; flex-direction: column; gap: 0.5rem; } .field.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; } @media (max-width: 540px) { .field.row2 { grid-template-columns: 1fr; } } .field label { font-family: var(--font-label); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; } .field label .req { color: var(--accent-deep); } .field input, .field select, .field textarea { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-deep); border-radius: var(--radius); padding: 0.85em 1em; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); width: 100%; } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent); } .field.err input, .field.err select, .field.err textarea { border-color: oklch(0.55 0.2 25); } .field .err-msg { font-size: 0.8rem; color: oklch(0.52 0.2 25); display: none; } .field.err .err-msg { display: block; } .form-note { font-size: 0.85rem; color: var(--ink-mute); } .form-success { display: none; padding: clamp(1.5rem,3vw,2.2rem); border: 1px solid var(--primary); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--primary) 6%, var(--bg)); gap: 0.8rem; flex-direction: column; } .form-success.show { display: flex; } .form-success.show:focus { outline: none; } .form-success h2 { color: var(--primary); font-size: 1.45rem; } .form-success p { color: var(--ink-soft); } .contact-aside { display: flex; flex-direction: column; gap: 1.8rem; } .contact-block { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); } .contact-block:last-child { border-bottom: 0; } .contact-block .cb-label { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } .contact-block .cb-value { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); } .contact-block a.cb-value:hover { color: var(--primary); } .contact-block .cb-sub { color: var(--ink-soft); font-size: 0.95rem; } /* booking card */ .booking-card { padding: clamp(1.6rem,3vw,2.2rem); border: 1px solid var(--line-deep); border-radius: var(--radius-lg); background: var(--bg-alt); display: flex; flex-direction: column; gap: 1rem; } .booking-card h3 { font-size: 1.4rem; } .booking-card p { color: var(--ink-soft); font-size: 0.98rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-deep); color: var(--on-deep); padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem,4vw,3rem); padding-bottom: 3rem; border-bottom: 1px solid var(--line-on-deep); } .footer-brand .mark { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.7rem; color: var(--on-deep); letter-spacing: var(--display-tracking); } .footer-brand .tag { color: var(--on-deep-soft); margin-top: 1rem; max-width: 34ch; font-size: 1.02rem; text-wrap: pretty; } .footer-brand .entities { margin-top: 1.6rem; font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 600; line-height: 2; } .footer-col h2 { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--on-deep-soft); font-weight: 600; margin-bottom: 1.2rem; } .footer-col ul { list-style: none; padding: 0; display: grid; gap: 0.7rem; } .footer-col a { color: var(--on-deep); font-size: 0.98rem; transition: color .2s var(--ease); } .footer-col a:hover { color: var(--accent); } .footer-col .soon { color: var(--on-deep-soft); font-size: 0.98rem; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; } .footer-bottom p { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--on-deep-soft); } .footer-bottom a { color: var(--on-deep-soft); text-decoration: underline; text-underline-offset: 2px; } .footer-bottom a:hover { color: var(--on-deep); } /* ---- Legal / policy pages ---- */ .legal-doc { max-width: 72ch; margin: 0 auto; } .legal-doc h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: var(--display-tracking); margin: 2.3rem 0 0.6rem; } .legal-doc p, .legal-doc li { color: var(--ink-soft); line-height: 1.65; text-wrap: pretty; } .legal-doc p { margin-top: 0.7rem; } .legal-doc ul { margin: 0.6rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; } .legal-doc a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .legal-doc strong { color: var(--ink); } .legal-doc p.legal-draft { background: var(--bg-alt); border: 1px solid var(--line); border-left: 3px solid var(--accent-deep); border-radius: var(--radius-lg); padding: 0.9rem 1.1rem; color: var(--ink); margin-top: 0; } .legal-doc p.legal-meta { font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink-mute); } /* ---------- Direction switcher ---------- */ .dir-switch { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.4rem; z-index: 80; display: flex; align-items: center; gap: 0.6rem; background: color-mix(in oklch, var(--bg-deep) 92%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--line-on-deep); border-radius: 100px; padding: 0.45rem 0.55rem 0.45rem 1.1rem; box-shadow: 0 12px 40px -12px rgba(0,0,0,0.45); } .dir-switch .ds-label { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-deep-soft); font-weight: 600; } .dir-switch .ds-opts { display: flex; gap: 0.25rem; } .dir-switch button { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.05em; font-weight: 600; color: var(--on-deep-soft); padding: 0.5em 0.95em; border-radius: 100px; transition: .25s var(--ease); display: flex; flex-direction: column; align-items: center; line-height: 1.15; } .dir-switch button .dn { font-size: 0.58rem; letter-spacing: 0.1em; opacity: 0.75; } .dir-switch button[aria-pressed="true"] { background: var(--accent); color: var(--bg-deep); } :root[data-theme="b"] .dir-switch button[aria-pressed="true"] { background: var(--primary); color: var(--on-deep); } /* ---------- Reveal ---------- Content is unconditionally visible. (Entrance animations were removed: CSS animations don't advance in backgrounded/headless contexts, which could leave content stuck hidden. Reliability over flourish.) */ .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- Responsive ---------- */ @media (min-width: 760px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: end; } .who-grid { grid-template-columns: 1.5fr 1fr; align-items: center; } /* Reversed variant: paragraph on the left, title in the wide column on the right. DOM keeps title first (read order); only the visual order swaps. */ .who-grid.reverse { grid-template-columns: 1fr 1.5fr; } .who-grid.reverse > div:first-child { order: 2; } .who-grid.reverse > div:last-child { order: 1; } /* When a reversed head sits over a 3-card grid, use thirds so the title's left edge lands on the second card's edge (paragraph over card 1, title over cards 2-3). Without this the title floats between card columns. */ .who-grid.reverse.grid-3 { grid-template-columns: 1fr 2fr; } .sprint-grid { grid-template-columns: 1.1fr 0.9fr; } .svc-detail { grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem,5vw,5rem); } .contact-grid { grid-template-columns: 1.2fr 0.8fr; } .q-item .toggle { display: flex; } .principles-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .nav-links, .nav-cta { display: none; } .menu-toggle { display: flex; } .team-grid { grid-template-columns: repeat(2, 1fr); } .principles-grid { grid-template-columns: 1fr 1fr; } .work-grid { grid-template-columns: 1fr; grid-template-rows: none; } .work-cat { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; gap: 0.85rem; } .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 620px) { body { font-size: 16px; } .problems-grid { grid-template-columns: 1fr; } .problems-grid .problem:nth-child(odd) { padding-right: 0; border-right: 0; } .problems-grid .problem:nth-child(even) { padding-left: 0; } .svc-grid, .svc-grid.cols-3 { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; max-width: 22rem; } .principles-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } .hero-meta { gap: 1.5rem; } .brand-logo { height: 32px; } .dir-switch { bottom: 1rem; padding-left: 0.9rem; } .dir-switch .ds-label { display: none; } } /* ---------- Floating reach-out widget (injected by site.js) ---------- Quiet by design: brand card, no animation, dismissible for the session. z-index 90: above the sticky header (60), below the profile modal (100). */ .reachout { position: fixed; right: clamp(1rem, 2.5vw, 1.8rem); bottom: calc(clamp(1rem, 2.5vw, 1.8rem) + env(safe-area-inset-bottom, 0px)); z-index: 90; width: min(320px, calc(100vw - 2rem)); } .ro-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--radius-lg); padding: 0.85rem 0.95rem 0.85rem; box-shadow: 0 10px 32px oklch(0 0 0 / 0.13); } .ro-head { font-weight: 600; font-size: 0.98rem; margin: 0 1.3rem 0.5rem 0; color: var(--ink); } .ro-form { display: flex; flex-direction: column; gap: 0.55rem; } .ro-form input[type="email"] { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: 0.95rem; background: var(--bg); color: var(--ink); } .ro-form input[type="email"][aria-invalid="true"] { border-color: oklch(0.52 0.2 25); } .ro-submit { width: 100%; justify-content: center; } .ro-note { font-size: 0.82rem; color: var(--ink-mute); margin-top: 0.55rem; } .ro-note:empty { display: none; } .ro-close { position: absolute; top: 0.3rem; right: 0.45rem; background: none; border: 0; font-size: 1.35rem; line-height: 1; color: var(--ink-mute); cursor: pointer; padding: 0.25rem 0.45rem; } .ro-toggle { display: none; } body.menu-open .reachout { visibility: hidden; } .reachout.collapsed .ro-card { display: none; } .reachout.collapsed .ro-toggle { display: inline-flex; border-radius: 999px; box-shadow: 0 8px 26px oklch(0 0 0 / 0.16); } @media print { .reachout { display: none; } }