/* HerwitzMueller — one stylesheet. Fonts, tokens, page rules. Every url() is relative to this file; all assets sit alongside it. */ /* Montserrat — Latin subset, all weights served from a single variable woff2 file downloaded from Google Fonts (v31). */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('./Montserrat-Latin.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('./Montserrat-Latin.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('./Montserrat-Latin.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('./Montserrat-Latin.woff2') format('woff2'); } /* --------------------------------------------------------------- Appended 2026-05-18 — added Latin-extended subset and italic faces. Existing declarations above are unchanged. Variable Montserrat files served by Google Fonts (v31). --------------------------------------------------------------- */ /* Latin (italic) — same codepoint range as the base Latin block above. */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url('./Montserrat-Latin-Italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; font-display: swap; src: url('./Montserrat-Latin-Italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url('./Montserrat-Latin-Italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url('./Montserrat-Latin-Italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Latin Extended (normal) — accented Euro/Vietnamese/extra-Latin glyphs. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('./Montserrat-LatinExt.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('./Montserrat-LatinExt.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('./Montserrat-LatinExt.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('./Montserrat-LatinExt.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Latin Extended (italic). */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; font-display: swap; src: url('./Montserrat-LatinExt-Italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; font-display: swap; src: url('./Montserrat-LatinExt-Italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; font-display: swap; src: url('./Montserrat-LatinExt-Italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; font-display: swap; src: url('./Montserrat-LatinExt-Italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Roboto Mono — monospace face for --font-mono. The woff2 below is supplied by the user via the upload banner; until it lands, the --font-mono fallback stack (ui-monospace, Menlo, Consolas…) renders in its place. Do not substitute a different family here. */ @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./RobotoMono-Latin.woff2') format('woff2'); } /* ============================================================ HerwitzMueller — Foundation tokens Brand Reference v1.0 (May 2026) — Section 04 (colour), Section 05 (type), Section 06 (spacing). ============================================================ */ :root { /* ----------------------------------------------------------- COLOUR — Primary palette (Section 04) ----------------------------------------------------------- */ --hm-teal-green: #4BB37D; /* identity anchor: mark fill, CTAs, active */ --hm-pastel-green: #9BD5B7; /* soft light: hover, secondary panels */ --hm-near-black: #414042; /* body text, primary headings */ --hm-graphite: #595959; /* secondary text, subheadings, metadata */ --hm-charcoal: #7F7F7F; /* captions, annotations, tertiary labels */ --hm-light-grey: #E8E8E8; /* borders, dividers, table rules */ --hm-off-white: #F7F7F5; /* page bg, panel bg, alt table rows */ --hm-white: #FFFFFF; /* primary content surfaces, cards */ /* Wordmark colour (Section 02). Near-black, distinct from body. */ --hm-wordmark: #414042; /* ----------------------------------------------------------- COLOUR — Semantic tokens Use these in product surfaces; never hardcode hex. ----------------------------------------------------------- */ --bg-page: var(--hm-off-white); --bg-surface: var(--hm-white); --bg-surface-alt: var(--hm-off-white); --bg-inverted: var(--hm-near-black); --bg-hover: var(--hm-pastel-green); /* subtle teal-tinted hover */ --bg-hover-neutral: #EFEFEC; /* greyscale hover for chrome */ --fg-primary: var(--hm-near-black); --fg-secondary: var(--hm-graphite); --fg-tertiary: var(--hm-charcoal); --fg-on-dark: var(--hm-white); --fg-on-accent: var(--hm-white); --fg-link: var(--hm-near-black); /* links inherit body, with rule */ --fg-accent: var(--hm-teal-green); --border-rule: var(--hm-light-grey); --border-strong: var(--hm-graphite); --border-focus: var(--hm-teal-green); --accent: var(--hm-teal-green); --accent-soft: var(--hm-pastel-green); --accent-press: #3FA06E; /* darken teal ~8% for press */ /* Status colours are deliberately conservative — no warm accents in brand contexts (Section 04 rule). These are utility only, not identity. */ --status-positive: var(--hm-teal-green); --status-attention: #B8932C; /* muted ochre for warnings */ --status-critical: #B23A3A; /* desaturated red for errors */ --status-info: var(--hm-graphite); /* ----------------------------------------------------------- TYPE — Families Montserrat across all brand & product contexts (Section 05). ----------------------------------------------------------- */ --font-sans: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace; /* Weights */ --w-regular: 400; /* @kind font */ --w-medium: 500; /* @kind font */ --w-semibold: 600; /* @kind font */ --w-bold: 700; /* @kind font */ /* wordmark only */ /* ----------------------------------------------------------- TYPE — Size hierarchy (Section 05) Use the semantic --t-* tokens in product code. ----------------------------------------------------------- */ --t-display: 40px; /* hero headlines, title slides 32–48 */ --t-h1: 26px; /* page titles 24–28 */ --t-h2: 19px; /* section headings 18–20 */ --t-h3: 16px; /* subheadings, card titles 15–16 */ --t-body: 15px; /* all body copy 14–15 */ --t-body-sm: 14px; --t-caption: 12px; /* labels, annotations 12 */ --t-data: 12px; /* table headers, badges 11–12 */ /* Line heights */ --lh-display: 1.15; /* @kind font */ --lh-heading: 1.2; /* @kind font */ --lh-body: 1.5; /* @kind font */ --lh-tight: 1.0; /* @kind font */ /* single-line labels & numeric data */ /* Tracking (letter-spacing) */ --ls-display: -0.02em; /* slight negative on large display */ --ls-heading: -0.01em; --ls-body: 0; /* @kind font */ --ls-caps: 0.08em; /* ALL CAPS labels only */ /* ----------------------------------------------------------- SPACING — 4px base scale ----------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* ----------------------------------------------------------- SHAPE — Radii. Section 08 calls for "small consistent corner radii". Pills only for status-style labels. No organic shapes. ----------------------------------------------------------- */ --radius-0: 0px; --radius-1: 2px; /* rules, inline chips */ --radius-2: 4px; /* default — buttons, inputs, cards */ --radius-3: 6px; /* surfaced panels */ --radius-pill: 999px; /* status badges */ /* ----------------------------------------------------------- ELEVATION — Sparing use. Precision-industrial register, not consumer-soft. Shadows are functional, not decorative. ----------------------------------------------------------- */ --shadow-none: none; --shadow-rule: 0 1px 0 0 var(--border-rule); /* hairline under sticky chrome */ --shadow-card: 0 1px 2px rgba(65,64,66,0.04), 0 0 0 1px rgba(65,64,66,0.06); --shadow-raised: 0 4px 12px rgba(65,64,66,0.06), 0 0 0 1px rgba(65,64,66,0.06); --shadow-modal: 0 16px 40px rgba(65,64,66,0.12), 0 0 0 1px rgba(65,64,66,0.08); --shadow-focus: 0 0 0 3px rgba(75,179,125,0.30); /* teal focus ring */ /* ----------------------------------------------------------- MOTION — Restrained. No bounces, no soft easings as identity. ----------------------------------------------------------- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ /* ----------------------------------------------------------- LAYOUT — 12-column digital grid (Section 06) ----------------------------------------------------------- */ --container-max: 1200px; --gutter: 24px; } /* ============================================================ BASE — Apply Montserrat globally; reset key defaults. ============================================================ */ html, body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============================================================ SEMANTIC TYPE — Use the .hm-* classes inside product surfaces when you need direct hierarchy without rewriting tag styles. ============================================================ */ .hm-display, .hm-h1, .hm-h2, .hm-h3 { font-family: var(--font-sans); color: var(--fg-primary); margin: 0; text-wrap: balance; } .hm-display { font-size: var(--t-display); font-weight: var(--w-semibold); line-height: var(--lh-display); letter-spacing: var(--ls-display); } .hm-h1 { font-size: var(--t-h1); font-weight: var(--w-semibold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); } .hm-h2 { font-size: var(--t-h2); font-weight: var(--w-medium); line-height: var(--lh-heading); } .hm-h3 { font-size: var(--t-h3); font-weight: var(--w-medium); line-height: var(--lh-heading); } .hm-body { font-size: var(--t-body); font-weight: var(--w-regular); line-height: var(--lh-body); color: var(--fg-primary); } .hm-body-secondary { font-size: var(--t-body); font-weight: var(--w-regular); line-height: var(--lh-body); color: var(--fg-secondary); } .hm-caption { font-size: var(--t-caption); font-weight: var(--w-regular); line-height: var(--lh-body); color: var(--fg-tertiary); } .hm-data-label { font-size: var(--t-data); font-weight: var(--w-medium); line-height: var(--lh-tight); color: var(--fg-secondary); text-transform: uppercase; letter-spacing: var(--ls-caps); } .hm-eyebrow { font-size: 11px; font-weight: var(--w-medium); line-height: var(--lh-tight); color: var(--fg-accent); text-transform: uppercase; letter-spacing: var(--ls-caps); } .hm-numeric { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ============================================================ FOCUS — Visible, teal, accessible. ============================================================ */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-2); } /* ---- page rules, from the source component ---- */ /* Page renders at 0.9 of its authored scale — the 90% reading. Every breakpoint below is the authored threshold x0.9, so cards still drop before they crowd. */ body { margin:0; zoom:0.9; } /* The 0.9 desktop zoom is dropped below the tablet breakpoint: mobile Chrome lays the body out at viewport/0.9 but paints 1:1, so the document ends up wider than the screen and body copy clips at the right edge. Mobile type is set ~10% smaller here to match the zoomed reading it was tuned against. */ @media (max-width:1000px) { body { zoom:1 !important; } } /* Overflow guard: nothing may exceed the viewport width. Note: overflow-x must NOT be hidden here — that makes html/body a scroll container and breaks position:sticky on the header. */ html, body { max-width:100%; } img, svg { max-width:100%; } a { color:var(--fg-primary); text-decoration:none; } a:hover { color:var(--accent); } /* ============================================================ META COLLAPSE — the dark utility strip collapses to a thin rule on scroll and becomes the scroll-progress track: teal fill left to right, dark remainder. Reduced motion keeps the strip at full height with no fill. ============================================================ */ #hm-meta { transition:height 300ms cubic-bezier(0.2,0,0.2,1); } #hm-meta-text, #hm-progress { transition:opacity 220ms linear; } #hm-meta[data-collapsed] { height:3px !important; } #hm-meta[data-collapsed] #hm-meta-text { opacity:0; } #hm-meta[data-collapsed] #hm-progress { opacity:1 !important; } @media (prefers-reduced-motion: reduce) { #hm-meta, #hm-meta-text, #hm-progress { transition:none !important; } } /* ==================== end META COLLAPSE ==================== */ /* Section name cross-fades as the reader moves through the page. */ #hm-section-name { transition:opacity 200ms linear; } @media (prefers-reduced-motion: reduce) { #hm-section-name { transition:none; } } /* Meta band: one fixed-height line, items dropped from the right, never truncated. */ @media (max-width:504px) { .hm-meta-3 { display:none !important; } } @media (max-width:360px) { .hm-meta-2 { display:none !important; } } /* Rule-plus-caption: one pattern for every source line, caption note and standing note on the page. Spans its container's full content width and starts at the same left edge as the rule. */ .hm-note { width:100%; margin:32px 0 0; padding-top:20px; border-top:1px solid var(--border-rule); font-size:13px; font-weight:400; line-height:1.5; color:var(--fg-tertiary); text-align:left; } /* Worked examples: three across, stacking before the cards get too narrow to read. */ @media (max-width:1000px) { .hm-practice-row { grid-template-columns:repeat(2,1fr) !important; } } @media (max-width:760px) { .hm-practice-row { grid-template-columns:1fr !important; } } /* ============================================================ CARD HOVER — small lift on the three scenario cards. Delete this block to remove; cards are static without it. ============================================================ */ .hm-card { transition:transform 220ms cubic-bezier(0.2,0,0.2,1), box-shadow 220ms cubic-bezier(0.2,0,0.2,1); will-change:transform; } @media (hover:hover) and (prefers-reduced-motion: no-preference) { .hm-card:hover { transform:scale(1.018); box-shadow:0 6px 20px rgba(28,28,29,0.10); } } /* ==================== end CARD HOVER ==================== */ /* ============================================================ RESPONSIVE — two breakpoints. Layout lives in inline styles, so these override with !important. Tablet loosens the grid; mobile collapses every two-column section to one full-width column. ============================================================ */ @media (max-width:1000px) { .hm-sec { padding:72px 32px !important; } .hm-hero { padding:112px 32px 96px !important; } .hm-grid { gap:24px !important; } .hm-cat-row { grid-template-columns:repeat(2,1fr) !important; } .hm-pad { padding-left:32px !important; padding-right:32px !important; } h1 { font-size:34px !important; } h2 { font-size:25px !important; } } @media (max-width:760px) { .hm-sec { padding:88px 36px !important; } .hm-hero { padding:116px 36px 100px !important; } .hm-stack { gap:28px !important; } .hm-stack-b > p + p { margin-top:28px !important; } .hm-note { margin-top:44px !important; padding-top:26px !important; } .hm-stack > .hm-note { margin-top:0 !important; } .hm-hero-scrim { background:linear-gradient(to bottom, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.52) 55%, rgba(0,0,0,0.62) 100%) !important; } .hm-hero-eyebrow { color:#8FDCB3 !important; } .hm-grid { grid-template-columns:1fr !important; } .hm-grid > * { grid-column:1 / -1 !important; } .hm-grid, .hm-cat-row, .hm-practice-row { gap:40px !important; } .hm-cat-row { grid-template-columns:1fr !important; } .hm-tier { grid-template-columns:repeat(2,1fr) !important; } .hm-tier-2 { grid-template-columns:repeat(2,1fr) !important; } .hm-navdrop { display:none !important; } .hm-pad { padding-left:36px !important; padding-right:36px !important; } .hm-contact-email { font-size:18px !important; } h1 { font-size:24px !important; } h2 { font-size:21px !important; } .hm-body { font-size:14.5px !important; } .hm-lede { font-size:16.5px !important; } } /* ==================== end RESPONSIVE ==================== */ /* ============================================================ FAN DRAW — upper (~20,000) diagram only. Delete this block and its matching