@import url('/assets/css/fonts.css'); /* ============================================================ NORTH SOUND CAPITAL Tokens per website-outline.md §1. One accent, no gradients, square corners, hairline rules. ============================================================ */ :root { /* Color */ --paper: #F2F2F3; --ink: #1D1F20; --steel: #5980A6; --steel-700: #3F5F7F; /* accent text + links: passes contrast on paper */ --deep: #1D2D3D; --steel-300: #B8CDE2; --line: #D4D4D6; --muted: #6E7073; /* Hairlines on dark fields */ --line-deep: rgba(184, 205, 226, 0.22); --muted-deep: #8FA6BC; /* Layout */ --max: 1320px; --gutter: 48px; --baseline: 24px; --header-h: 76px; /* Type */ --font-head: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; --font-body: 'Barlow', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --step-eyebrow: 12px; --step-body: 18px; --step-lead: 21px; } @media (max-width: 900px) { :root { --gutter: 24px; } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Bathymetric contour field, generated at build time by lib/contours.py. Opacity is baked into the SVG stroke, so these are plain background images with no pseudo-element or stacking-context work. */ html { background: var(--paper); } /* The contour field rides on a fixed pseudo-element rather than on `background-attachment: fixed`. iOS Safari sizes a fixed background against the whole document instead of the viewport, so with `cover` the pattern blows up to several times its intended scale and then sits still in the wrong place. A fixed element is sized by the viewport everywhere. The paper colour moves to so it paints the canvas; leaving it on would propagate to the canvas and bury this pseudo-element. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/images/contours-paper.svg') center / cover no-repeat; } body { margin: 0; color: var(--ink); font-family: var(--font-body); font-size: var(--step-body); font-weight: 400; line-height: 1.55; text-wrap: pretty; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } img { height: auto; } /* The UA's [hidden] rule is an author-stylesheet loser: any `display` we set on an element (.tx-grid is grid, .tx-card is flex) silently overrides it, so `el.hidden = true` would set the attribute and change nothing on screen. Everything that toggles visibility from JS depends on this. */ [hidden] { display: none !important; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; line-height: 0.98; letter-spacing: 0.005em; margin: 0; text-wrap: balance; } p { margin: 0 0 var(--baseline); } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--steel-700); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--steel); } :focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; } .deep :focus-visible { outline-color: var(--steel-300); } ::selection { background: var(--steel-300); color: var(--deep); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0; left: 0; z-index: 200; transform: translateY(-120%); background: var(--deep); color: var(--steel-300); padding: 12px 20px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; text-decoration: none; } .skip-link:focus { transform: translateY(0); } /* ---------- Layout primitives ---------- */ .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: calc(var(--baseline) * 4); } .section--tight { padding-block: calc(var(--baseline) * 2.5); } @media (max-width: 900px) { .section { padding-block: calc(var(--baseline) * 2.5); } } /* A page header (eyebrow + h1 + deck) is followed immediately by its own content section. Both carrying full block padding stacked ~180px of dead space under the deck. These must come AFTER the media query above: it redefines .section with equal specificity, so an earlier .section--head rule loses on source order and the fix silently applies only above 900px. */ .section--head { padding-bottom: 0; } .section--head + .section { padding-top: calc(var(--baseline) * 1.5); } /* The 5/7 asymmetric split — the board's grammar */ .split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--baseline); } } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } .deep .rule { background: var(--line-deep); } /* Deep steel field — the only field color */ .deep { background: var(--deep) url('/assets/images/contours-deep.svg') center / cover no-repeat; color: var(--paper); } .deep h1, .deep h2, .deep h3 { color: var(--paper); } .deep a { color: var(--steel-300); } .deep a:hover { color: #fff; } /* ---------- Type utilities ---------- */ .eyebrow { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--step-eyebrow); color: var(--muted); margin: 0 0 var(--baseline); display: block; } .deep .eyebrow { color: var(--muted-deep); } .h-display { font-size: clamp(52px, 9vw, 132px); line-height: 0.95; } .h-1 { font-size: clamp(38px, 5.2vw, 68px); } .h-2 { font-size: clamp(28px, 3.4vw, 44px); } .h-3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: 0.02em; } .h-4 { font-size: 17px; letter-spacing: 0.06em; } .lead { font-size: var(--step-lead); line-height: 1.5; } .meta { font-size: 13px; color: var(--muted); line-height: 1.5; } .deep .meta { color: var(--muted-deep); } .measure { max-width: 62ch; } .tabular { font-variant-numeric: tabular-nums; } /* ---------- Logo ---------- */ .logo-mark-box { display: block; } .logo-mark { width: 100%; height: 100%; color: var(--steel); } .deep .logo-mark { color: var(--steel-300); } .wordmark { white-space: nowrap; line-height: 1; } .wordmark__top { display: block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } .wordmark__bottom { display: block; font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.38em; font-size: 52%; white-space: nowrap; margin-top: 0.28em; } /* Horizontal lockup — header */ .lockup-h { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--steel); } .lockup-h .logo-mark-box { width: 30px; height: 30px; flex: none; } .lockup-h .divider { width: 1px; align-self: stretch; background: var(--line); flex: none; } .deep .lockup-h .divider, .site-header--over .lockup-h .divider { background: var(--line-deep); } .lockup-h .wordmark { color: var(--ink); font-size: 19px; } .deep .lockup-h .wordmark, .site-header--over .lockup-h .wordmark { color: var(--paper); } /* Stacked lockup — hero + footer */ .lockup-s { display: inline-block; text-decoration: none; text-align: left; } .lockup-s .logo-mark-box { width: 34px; height: 34px; margin-bottom: 14px; } .lockup-s .wordmark { font-size: 20px; color: inherit; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line); transition: background 200ms ease, border-color 200ms ease; } /* Transparent over the deep hero, solid on scroll */ .site-header--over { background: transparent; border-bottom-color: transparent; color: var(--paper); } .site-header--over .nav-link { color: var(--paper); } .site-header--over .nav-link:hover { color: var(--steel-300); } .site-header--over .logo-mark { color: var(--steel-300); } .site-header--over .nav-toggle span { background: var(--paper); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--baseline); height: var(--header-h); } .nav { display: flex; align-items: center; gap: 34px; } .nav-link { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; color: var(--ink); text-decoration: none; padding-block: 6px; transition: color 150ms ease; } .nav-link:hover { color: var(--steel-700); } .nav-link[aria-current="page"] { color: var(--steel-700); } .site-header--over .nav-link[aria-current="page"] { color: var(--steel-300); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; padding: 9px 8px; flex-direction: column; justify-content: space-between; } .nav-toggle span { display: block; height: 1.5px; width: 100%; background: var(--ink); transition: background 150ms ease; } @media (max-width: 900px) { .nav-toggle { display: flex; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--deep); flex-direction: column; align-items: stretch; gap: 0; padding: var(--baseline) var(--gutter) calc(var(--baseline) * 1.5); border-bottom: 1px solid var(--line-deep); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; } .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); } .nav .nav-link { color: var(--paper); font-size: 20px; padding-block: 14px; border-bottom: 1px solid var(--line-deep); } .nav .btn { margin-top: var(--baseline); text-align: center; } } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; line-height: 1; padding: 15px 26px; border: 1px solid var(--steel); background: var(--steel); color: #fff; text-decoration: none; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } .btn:hover { background: var(--steel-700); border-color: var(--steel-700); color: #fff; } .btn:active { background: #35506C; border-color: #35506C; } .btn--ghost { background: transparent; color: var(--steel-700); border-color: var(--steel); } .btn--ghost:hover { background: var(--steel); color: #fff; } .deep .btn--ghost, .site-header--over .btn--ghost { color: var(--steel-300); border-color: var(--steel-300); } .deep .btn--ghost:hover, .site-header--over .btn--ghost:hover { background: var(--steel-300); color: var(--deep); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } .link-arrow { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .link-arrow::after { content: '\2192'; transition: transform 150ms ease; } .link-arrow:hover::after { transform: translateX(4px); } /* ---------- Hero ---------- */ /* The hero runs under the sticky header so the transparent header state sits on the deep field rather than on paper. Height is capped: the content is bottom-aligned, so on a tall or portrait window an uncapped 100svh strands the headline at the bottom of a very large empty field. The cap keeps it full-bleed on ordinary laptop viewports and stops it growing past the point where the space reads as a gap rather than as composition. */ .hero { min-height: min(100svh, 900px); margin-top: calc(var(--header-h) * -1); display: flex; align-items: flex-end; padding-block: calc(var(--header-h) + var(--baseline) * 2) calc(var(--baseline) * 3.5); position: relative; } .hero__corner { margin-bottom: auto; padding-bottom: calc(var(--baseline) * 3); } .hero__inner { width: 100%; display: flex; flex-direction: column; } .hero__headline { white-space: pre-line; margin-bottom: var(--baseline); max-width: 16ch; } /* At the 52px floor "Judgment is not." is a few pixels too wide for a 375px phone and drops "not." to a line of its own. Scale just under it instead. */ @media (max-width: 640px) { .hero__headline { font-size: clamp(34px, 13vw, 52px); } } .hero__sub { font-size: var(--step-lead); max-width: 48ch; color: var(--steel-300); margin-bottom: calc(var(--baseline) * 1.5); } /* ---------- Section header (eyebrow + heading + deck, 5/7) ---------- */ .section-header { margin-bottom: calc(var(--baseline) * 2); } .section-header__deck { color: var(--muted); } .deep .section-header__deck { color: var(--muted-deep); } /* ---------- Principle blocks ---------- */ .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: calc(var(--baseline) * 2); } @media (max-width: 900px) { .principles { grid-template-columns: 1fr; gap: var(--baseline); } } .principle { border-top: 1px solid var(--line); padding-top: 18px; } .deep .principle { border-top-color: var(--line-deep); } .principle h3 { margin-bottom: 10px; } .principle p { font-size: 16px; color: var(--muted); } .deep .principle p { color: var(--muted-deep); } /* ---------- Capability cards ---------- */ .cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } /* Column count follows the number of practices so the row never leaves a gap. */ .cap-grid--3 { grid-template-columns: repeat(3, 1fr); } .cap-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1100px) { .cap-grid, .cap-grid--3, .cap-grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cap-grid, .cap-grid--3, .cap-grid--2 { grid-template-columns: 1fr; } } .cap-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: calc(var(--baseline) * 1.25); display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; min-height: 260px; transition: background 150ms ease; } .cap-card:hover { background: rgba(89, 128, 166, 0.06); } .cap-card h3 { color: var(--ink); } .cap-card p { font-size: 16px; color: var(--muted); margin: 0; } .cap-card__size { margin-top: auto; font-family: var(--font-head); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; color: var(--steel-700); font-variant-numeric: tabular-nums; } /* ---------- Stat band ---------- */ .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } @media (max-width: 900px) { .stat-band { grid-template-columns: repeat(2, 1fr); gap: var(--baseline); } } @media (max-width: 480px) { .stat-band { grid-template-columns: 1fr; } } .stat { border-top: 1px solid var(--line-deep); padding-top: 18px; } .stat__value { font-family: var(--font-head); font-weight: 600; font-size: clamp(40px, 5vw, 66px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--paper); display: block; margin-bottom: 12px; } .stat__label { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: var(--muted-deep); } /* ---------- Spec plate (hairline key/value table) ---------- */ .spec-plate { border-top: 1px solid var(--line); width: 100%; } .spec-plate__row { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--baseline); border-bottom: 1px solid var(--line); padding-block: 14px; } @media (max-width: 560px) { .spec-plate__row { grid-template-columns: 1fr; gap: 4px; } } .spec-plate__key { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: var(--muted); padding-top: 3px; } .spec-plate__val { font-size: 16px; font-variant-numeric: tabular-nums; } /* ---------- Transaction cards ---------- */ .tx-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } @media (max-width: 1100px) { .tx-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tx-grid { grid-template-columns: 1fr; } } .tx-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: calc(var(--baseline) * 1.25); display: flex; flex-direction: column; gap: 10px; min-height: 230px; text-align: left; transition: background 150ms ease; } /* Same highlight as .cap-card. The card links nowhere, so no pointer cursor. */ .tx-card:hover { background: rgba(89, 128, 166, 0.06); } .tx-card__amount { font-family: var(--font-head); font-weight: 600; font-size: clamp(32px, 3.4vw, 42px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } .tx-card__structure { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: var(--steel-700); } .tx-card__meta { margin-top: auto; font-size: 14px; color: var(--muted); } .tx-card__meta span { display: block; } .tx-card__flag { align-self: flex-start; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; color: var(--muted); border: 1px solid var(--line); background: transparent; padding: 3px 7px; } /* ---------- Transaction table view ---------- */ .tx-table-wrap { overflow-x: auto; } .tx-table { width: 100%; border-collapse: collapse; font-size: 15px; } .tx-table th, .tx-table td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); white-space: nowrap; } .tx-table th { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--muted); border-bottom-color: var(--ink); } .tx-table td.num { font-variant-numeric: tabular-nums; } /* ---------- Filter chips ---------- */ .filters { margin-bottom: calc(var(--baseline) * 1.5); } /* One row: facet menus left, count and view controls right. */ .fmenus { display: flex; flex-wrap: wrap; gap: 8px; } .fmenu__n:not(:empty) { margin-left: 8px; color: var(--steel-700); font-variant-numeric: tabular-nums; } .fmenu__btn[data-on="true"] { border-color: var(--steel); color: var(--steel-700); } .fmenu__btn[data-on="true"] .fmenu__n { color: var(--steel-700); } .fmenu__btn[aria-expanded="true"] { background: var(--steel); border-color: var(--steel); color: #fff; } .fmenu__btn[aria-expanded="true"] .fmenu__n { color: #fff; } /* A drawer, not a popover. Full width inside the filter bar and in normal flow, so opening it pushes the count and the grid down instead of covering the rows being filtered. order 2 puts it under the buttons and above the count. */ .fmenu__panel { flex-basis: 100%; order: 2; display: flex; flex-wrap: wrap; align-items: center; /* Same 7px block padding and 1px border as .chip, and the options carry the chip's type, so a closed drawer and an open one are the same height as the buttons above them. */ gap: 6px 24px; padding: 7px 13px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.5); } .fopt { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; line-height: normal; cursor: pointer; white-space: nowrap; } /* margin:0 matters — the UA gives a checkbox 3px all round, which would make the drawer 4px taller than the buttons it sits under. */ .fopt input { accent-color: var(--steel); width: 13px; height: 13px; margin: 0; flex: none; } .chip { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; padding: 7px 13px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .chip:hover { border-color: var(--steel); color: var(--steel-700); } .chip[aria-pressed="true"] { background: var(--steel); border-color: var(--steel); color: #fff; } .filter-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; } .filter-bar__right { display: flex; gap: 14px; align-items: center; } /* The count sits on its own line under the menus: a full-basis flex item, so it wraps below without needing a second container. */ .filter-bar__count { flex-basis: 100%; order: 3; margin: 0; } .view-toggle { display: flex; } .view-toggle .chip + .chip { margin-left: -1px; } /* Phones: the four chip rows filled roughly half the viewport before a single transaction came into view, so the facets and the clear button come out. The count and the card/table toggle stay. This block must sit after the .filter-group rule above — same specificity, so source order decides. */ /* Phones: the facet menus come out. Four chip rows used to fill half the viewport; the menus are far smaller, but Brian asked for no filters at all on a phone. The count and the cards/table toggle stay. */ @media (max-width: 640px) { .fmenus, .fmenu__panel, #tx-clear { display: none; } .filter-bar { justify-content: space-between; } /* With the menus gone there is nothing for the count to sit under, so it returns to the toggle's line rather than leaving it stranded right. */ .filter-bar__count { flex-basis: auto; order: -1; } } /* Honeypot: off-screen rather than display:none, which some bots skip. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note--off { color: var(--muted); } .form-note--busy { color: var(--muted); } .form-note--ok { color: var(--steel-700); } .form-note--error { color: var(--ink); border-left: 2px solid var(--steel); padding-left: 12px; } /* ---------- Network / map ---------- */ .map { margin: 0; } .map svg { width: 100%; height: auto; display: block; } .map figcaption { margin-top: 12px; } .office-list { margin-top: calc(var(--baseline) * 1.5); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } @media (max-width: 900px) { .office-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .office-list { grid-template-columns: 1fr; } } .office { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 18px; } .office__city { display: block; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; } .office__firm { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; } /* The home office reads as the anchor, matching its darker marker on the map. */ .office--home { background: rgba(29, 45, 61, 0.05); } .office--home .office__city { color: var(--deep); } .source-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: calc(var(--baseline) * 0.5); } @media (max-width: 900px) { .source-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .source-list { grid-template-columns: 1fr; } } .source-list li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px; font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; } .footer-bottom .meta a { color: var(--muted-deep); margin-left: 14px; } .footer-bottom .meta a:hover { color: var(--steel-300); } .footer-membership a { color: var(--muted-deep); text-decoration: none; } .footer-membership a:hover { color: var(--steel-300); text-decoration: underline; } /* ---------- Process steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } @media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--baseline); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step { border-top: 1px solid var(--line); padding-top: 18px; } .step__n { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; color: var(--steel-700); display: block; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .step h3 { margin-bottom: 8px; } .step p { font-size: 16px; color: var(--muted); } /* ---------- Long-form (Approach) ---------- */ .longform { max-width: 62ch; } .longform > section { padding-block: calc(var(--baseline) * 2); border-top: 1px solid var(--line); } .longform > section:first-child { border-top: 0; padding-top: 0; } .longform h2 { margin-bottom: var(--baseline); } .longform__n { font-family: var(--font-head); font-weight: 500; letter-spacing: 0.22em; font-size: 12px; color: var(--muted); display: block; margin-bottom: 10px; } .pullquote { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: clamp(24px, 3vw, 34px); line-height: 1.02; color: var(--steel-700); border-left: 2px solid var(--steel); padding-left: 22px; margin: calc(var(--baseline) * 1.5) 0; max-width: 22ch; } /* ---------- Capability detail ---------- */ .cap-row { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); border-top: 1px solid var(--line); padding-block: calc(var(--baseline) * 2); } @media (max-width: 900px) { .cap-row { grid-template-columns: 1fr; gap: var(--baseline); } } .fitlist li { border-top: 1px solid var(--line); padding-block: 14px; font-size: 16px; display: grid; grid-template-columns: 22px 1fr; gap: 12px; } .fitlist li::before { content: ''; width: 9px; height: 9px; background: var(--steel); margin-top: 8px; } .fitlist--no li::before { background: var(--muted); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: calc(var(--baseline) * 1.5); } } .structure-list li { border-bottom: 1px solid var(--line); padding-block: 12px; font-size: 16px; } /* ---------- FAQ accordion ---------- */ .faq details { border-top: 1px solid var(--line); padding-block: 4px; } .faq details:last-of-type { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding-block: 16px; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: 19px; letter-spacing: 0.02em; display: flex; justify-content: space-between; align-items: center; gap: var(--baseline); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--steel); font-size: 22px; flex: none; } .faq details[open] summary::after { content: '\2212'; } .faq summary:hover { color: var(--steel-700); } .faq details > *:not(summary) { padding-bottom: 18px; font-size: 16px; color: var(--muted); max-width: 62ch; } /* ---------- Team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } @media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--baseline); } } @media (max-width: 620px) { .team-grid { grid-template-columns: 1fr; } } /* Two principals sit as an even pair rather than a 3-up grid with a gap. */ .team-grid--pair { grid-template-columns: repeat(2, 1fr); } @media (max-width: 620px) { .team-grid--pair { grid-template-columns: 1fr; } } /* The whole card sits at 90% of its column, so the portrait, the contact rule and the biography rule all stop on the same line. */ .person { width: 90%; } .person--founder { grid-column: span 2; } @media (max-width: 620px) { .person--founder { grid-column: span 1; } } .person__frame { border: 1px solid var(--line); aspect-ratio: 1; background: #E4E5E7; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; overflow: hidden; } .person--founder .person__frame { aspect-ratio: 2 / 1; } @media (max-width: 620px) { .person--founder .person__frame { aspect-ratio: 1; } } /* Portrait photos in a square frame: a centred crop takes equal slices off top and bottom, which clips the top of the head. Bias the visible window upward so the crop comes off the chest instead. No effect on already-square images. */ .person__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; } .person__placeholder { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; color: var(--muted); } .person h3 { margin-bottom: 4px; } .person__title { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--steel-700); margin-bottom: 10px; } .person__focus { font-size: 16px; color: var(--muted); margin-bottom: 12px; } .person__links { display: flex; gap: 18px; font-size: 14px; margin-bottom: 8px; flex-wrap: wrap; } /* ---------- Duotone image wrapper ---------- */ .duotone { position: relative; background: var(--deep); overflow: hidden; } .duotone img { width: 100%; filter: grayscale(1) contrast(1.06); mix-blend-mode: luminosity; opacity: 0.92; } .duotone::after { content: ''; position: absolute; inset: 0; background: var(--steel); mix-blend-mode: color; pointer-events: none; } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--baseline) var(--gutter); } @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } } .field--full { grid-column: 1 / -1; } .field label { display: block; font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--muted); margin-bottom: 8px; } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 13px 14px; transition: border-color 150ms ease; -webkit-appearance: none; appearance: none; } .field select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235980A6' d='M0 0h12L6 8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; padding-right: 38px; } .field textarea { min-height: 140px; resize: vertical; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel); } .field input::placeholder, .field textarea::placeholder { color: #A8AAAD; } .field input[type="file"] { padding: 11px 14px; font-size: 14px; } .field__hint { font-size: 13px; color: var(--muted); margin-top: 7px; } .field__opt { letter-spacing: 0.12em; color: var(--muted); opacity: 0.75; margin-left: 6px; } .form-note { border-top: 1px solid var(--line); padding-top: 16px; margin-top: var(--baseline); font-size: 14px; color: var(--muted); max-width: 62ch; } /* ---------- Contact ---------- */ .contact-line { border-top: 1px solid var(--line); padding-block: 14px; } /* Phone and email belong to one person — keep them as a block, not paragraphs. */ .contact-line p { margin-bottom: 3px; } .contact-line p:last-child { margin-bottom: 0; } .contact-line__key { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--muted); margin-bottom: 5px; } /* ---------- Footer ---------- */ /* Background comes from .deep, which the footer already carries. */ .site-footer { color: var(--paper); padding-block: calc(var(--baseline) * 3) calc(var(--baseline) * 2); } .footer-top { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); padding-bottom: calc(var(--baseline) * 2); } @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; gap: calc(var(--baseline) * 1.5); } } .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } .footer-nav--4 { grid-template-columns: repeat(4, 1fr); gap: calc(var(--gutter) * 0.6); } @media (max-width: 900px) { .footer-nav--4 { grid-template-columns: repeat(2, 1fr); gap: var(--baseline); } } @media (max-width: 620px) { .footer-nav, .footer-nav--4 { grid-template-columns: 1fr; gap: var(--baseline); } } .footer-nav h4 { font-size: 12px; letter-spacing: 0.22em; font-weight: 500; color: var(--muted-deep); margin-bottom: 14px; } .footer-nav li { margin-bottom: 9px; } .footer-nav a { font-size: 16px; text-decoration: none; } .footer-bottom { border-top: 1px solid var(--line-deep); padding-top: var(--baseline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; } /* ---------- Draft banner ---------- */ /* Draft chrome is deliberately outside the brand palette's *roles* but built from its colours — it is temporary scaffolding, not a brand element, so it reads as a system bar rather than as part of the design. */ .draft-bar { background: var(--ink); color: var(--paper); font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; text-align: center; padding: 9px var(--gutter); position: relative; z-index: 150; } /* ---------- Motion — one 200ms fade-and-rise, never the hero ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 200ms ease-out, transform 200ms ease-out; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- Print ---------- */ @media print { .site-header, .site-footer, .draft-bar, .filters { display: none; } /* Drop the contour field — it wastes toner and prints as grey mud. */ body { background: #fff none; color: #000; font-size: 11pt; } html { background: #fff; } body::before { display: none; } .deep { background: #fff none !important; color: #000 !important; } .deep h1, .deep h2, .deep h3, .stat__value { color: #000 !important; } }