/* ========================================================================= ABOUT — page-scoped styles Loaded alongside the shared css/styles.css. Journey: Hero (perspective) -> Why We Exist (editorial) -> An Owner's Perspective (philosophy, dark) -> Zoom Out/Zoom In (signature visual moment, dark) -> Origin/Jamie (human) -> Our Team (two-tier) -> Strategy.Results.It's Our Nature (character) -> Close (dark). 2026 REDESIGN PASS: this file was rebuilt to reduce explanatory copy and increase visual storytelling per that brief. Two components were REMOVED because their content moved elsewhere rather than being deleted outright: .owner-axis (section 03's old four-step engagement track, which duplicated Delivery Capability's own canonical model) is gone from Owner's Perspective; the same visual mechanic now lives at .career-track in Origin (section 05), carrying Jamie's career progression instead. This is a relocation of an existing, tested pattern, not a new framework. ========================================================================= */ .pg-about .mark-stop { color: var(--lime); } /* ------------------------------------------------------------------------- 01 — HERO — PERSPECTIVE Shared .hero/.hero__media/.hero__lines from styles.css. Only page- specific measure overrides here. ------------------------------------------------------------------------- */ .hero--about h1 { max-width: 18ch; } .hero--about .hero__support { max-width: 56ch; } /* ------------------------------------------------------------------------- 02 — WHY WE EXIST One lead paragraph (was two competing blocks). The four questions get real visual weight - numeral + large serif question, generously spaced 2x2 field - instead of a dense 8-item bordered list. The section now ends on the questions themselves; the old standalone "Who is looking after the investment itself?" payoff line is gone - the four questions already carry that idea, and the .section-cine photographic beat right after (see below) is the section's actual close now. ------------------------------------------------------------------------- */ .exist-lead { max-width: 62ch; margin-top: clamp(1.6rem, 3vw, 2.2rem); } /* ------------------------------------------------------------------------- 02b — CINEMATIC PAUSE Page-scoped copy of the .section-cine pattern already established on strategic-services.html (image-only visual breath, no headline, no data - the point is pacing, not another message). Same class names deliberately, so the pattern reads as one shared site idiom rather than a new one-off. Lighter tint than the duotone photography used in Zoom Out/Zoom In: this is meant to read as a real place, not a textured backdrop. ------------------------------------------------------------------------- */ .section-cine { position: relative; overflow: hidden; isolation: isolate; height: clamp(18rem, 36vw, 28rem); } .section-cine__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.05); } .section-cine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,40,25,0.14) 0%, rgba(14,40,25,0.06) 45%, rgba(14,40,25,0.42) 100%); mix-blend-mode: multiply; } /* ------------------------------------------------------------------------- 03 — AN OWNER'S PERSPECTIVE .owner-verdict matches the pattern used on delivery-capability.html (aliased there as .decflow__verdict) - redefined here since each page carries its own stylesheet. Deliberately concise: paragraph, verdict, tagline, nothing beneath to trail off with. ------------------------------------------------------------------------- */ .owner-verdict { margin-top: clamp(2.2rem, 4vw, 3rem); padding-left: clamp(1.2rem, 2.5vw, 1.8rem); border-left: 2px solid var(--lime); } .owner-verdict-k { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 0.6rem; } .owner-verdict-t { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.24; letter-spacing: -0.01em; max-width: 42ch; color: var(--fg); } .owner-tagline { margin-top: clamp(1.8rem, 3vw, 2.4rem); font-style: italic; } /* ------------------------------------------------------------------------- 04 — ZOOM OUT / ZOOM IN — signature visual moment (REBUILT, take 2) Root cause of the first rebuild's failure: .zoom-side__media had no size ceiling of its own - width:100% of a wide grid column let the aspect-ratio box balloon to whatever the column happened to render at, while every text element stayed disciplined via clamp(), so images visually swamped the type instead of sitting in proportion with it. Fixed by giving the image an explicit rem-based max-width (not a percentage of the column) - it cannot grow past a sane size regardless of viewport or container width. True horizontal three- part composition (42/16/42), not a per-side vertical stack: ZOOM OUT./ZOOM IN. read as real sub-headings (not tiny tracked-caps labels), the connect node is a substantial ringed circle with a line reaching into both sides, and the whole thing stays compact - deliberately short of "two enormous photographs plus scrolling". ------------------------------------------------------------------------- */ /* Single source of vertical padding: the shared .section rule already applies padding-block to this element (it carries the .section class), so overriding it here directly - rather than ALSO padding the inner .container, which was double-stacking the two and was a real contributor to the "excessive whitespace on entry" issue. */ #zoom.zoom-signature { padding-block: clamp(2.2rem, 4vw, 4rem); position: relative; } .zoom-signature__over { color: var(--bone); opacity: 0.72; } .zoom-compose { display: grid; grid-template-columns: 42fr 16fr 42fr; align-items: start; gap: clamp(1.6rem, 3vw, 3rem); margin-top: clamp(2.2rem, 4vw, 3rem); } /* Explicit ceiling, not width:100% of the column - this is the actual fix. Both sides share the identical value, so the pair always reads as matched dimensions regardless of how wide the column itself is. */ .zoom-side__media { max-width: 23rem; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(198,243,81,0.22); margin: clamp(0.9rem, 1.6vw, 1.3rem) 0 clamp(1.3rem, 2.2vw, 1.7rem); } .zoom-side__media img { width: 100%; height: 100%; object-fit: cover; display: block; /* Restrained, not a heavy duotone: the industrial subject stays identifiable - a cooler, faintly green-leaning cast, not a filter that turns the photo into texture. */ filter: saturate(0.72) sepia(0.14) hue-rotate(75deg) contrast(1.04) brightness(0.95); } /* Major conceptual sub-heading, not an image caption - one shared rule for both sides, so "Zoom Out." and "Zoom In." are pixel-identical in font, size, weight, spacing AND alignment - both left-aligned, same typographic logic, no mirroring. */ .zoom-side__k { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.6vw, 1.7rem); letter-spacing: -0.005em; color: var(--bone); } /* One rule, used by both sides - identical typography, spacing, alignment and divider treatment; nothing distinguishes Zoom Out from Zoom In except which words are in the list. */ .zoom-side__list { display: flex; flex-direction: column; } .zoom-side__list li { font-family: var(--sans); font-weight: 400; font-size: clamp(1.05rem, 1.15vw, 1.2rem); line-height: 1.5; color: var(--fg); padding: 0.6rem 0; border-top: 1px solid var(--rule); } .zoom-side__list li:first-child { border-top: none; padding-top: 0; } /* CONNECT THE TWO: a substantial ringed node with a line reaching into both sides - "strategy ── connect the two ── execution" - not a small floating circle. */ .zoom-connect { display: flex; flex-direction: row; align-items: center; gap: 0.8rem; align-self: center; margin-top: clamp(1.6rem, 3vw, 2.2rem); } .zoom-connect__line { height: 1px; flex: 1 1 auto; min-width: 1rem; background: rgba(198,243,81,0.45); } .zoom-connect__node { flex: none; text-align: center; font-family: var(--sans); font-weight: 700; font-size: clamp(0.66rem, 0.8vw, 0.76rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); line-height: 1.3; border: 1.5px solid var(--lime); border-radius: 50%; width: clamp(6.4rem, 8.5vw, 8.4rem); height: clamp(6.4rem, 8.5vw, 8.4rem); display: flex; align-items: center; justify-content: center; } /* The closing proposition: real editorial weight, not the small sitewide .chars chip-list treatment used for e.g. "Clear. Honest. Open." elsewhere - this is a standalone statement in its own right. */ .zoom-cycle { margin-top: clamp(2.4rem, 4.2vw, 3.4rem); padding-top: clamp(1.8rem, 3vw, 2.4rem); border-top: 1px solid var(--rule); font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem); line-height: 1.5; letter-spacing: -0.005em; color: var(--bone); max-width: 62ch; } @media (max-width: 1024px) { .zoom-side__media { max-width: 18rem; } } @media (max-width: 780px) { .zoom-compose { grid-template-columns: 1fr; row-gap: 0; } .zoom-side__media { max-width: 26rem; } .zoom-connect { flex-direction: row; margin: 1rem 0; align-self: auto; } .zoom-side--in { margin-top: clamp(1.8rem, 3.4vw, 2.4rem); padding-top: clamp(1.8rem, 3.4vw, 2.4rem); border-top: 1px solid var(--rule); } } /* ------------------------------------------------------------------------- 05 — ORIGIN (JAMIE) Asymmetric portrait/text split, kept in natural colour (deliberately different from the duotone treatment used on hero/anchor photography elsewhere). .founder-quote reuses the exact type scale as .testi__quote in styles.css. .career-track beneath is the relocated engagement-track mechanic (see file header) - visual context for the portrait, not another framework. ------------------------------------------------------------------------- */ .founder-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: start; } .founder-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; } .founder-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .founder-body .lead { margin-top: clamp(1.2rem, 2vw, 1.6rem); max-width: 58ch; } .founder-body .lead:first-of-type { margin-top: clamp(1.6rem, 3vw, 2.2rem); } .founder-quote { margin: clamp(2rem, 3.6vw, 2.8rem) 0 0; padding: 0 0 0 clamp(1.2rem, 2.2vw, 1.6rem); border-left: 2px solid var(--forest-line); font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--fg); max-width: 42ch; } .founder-card { margin-top: clamp(1.8rem, 3vw, 2.4rem); padding-top: clamp(1.2rem, 2vw, 1.6rem); border-top: 1px solid var(--rule); } .founder-card__name { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--fg); } .founder-card__role { font-family: var(--sans); font-weight: 500; font-size: 0.86rem; color: var(--fg-soft); margin-top: 0.15rem; } @media (max-width: 860px) { .founder-grid { grid-template-columns: 1fr; } .founder-media { max-width: 22rem; aspect-ratio: 4/5; } } /* Journey band - the section's closing chapter, not a strip beside the biography. Full-bleed (sibling of .container, not inside it) and flush against #origin's own bottom edge (padding-bottom:0 below), so it reads as a deliberate dark chapter cutting straight into Our Team - the same light/dark rhythm the Cinematic Pause already established earlier on this page. Same 0.85fr/1.15fr ratio as .founder-grid above (image narrower, text wider) - a formal echo between the two rows, not a coincidence. The photograph fills the FULL height of the band (not a small capped thumbnail) and blends into the dark panel via a soft gradient rather than a hard seam, so image and track read as one continuous field, not two adjacent boxes. */ #origin { padding-bottom: 0; } .founder-journey { display: grid; grid-template-columns: 0.85fr 1.15fr; min-height: clamp(24rem, 36vw, 32rem); margin-top: clamp(4rem, 7vw, 6rem); } .founder-journey__media { position: relative; overflow: hidden; } .founder-journey__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.78) contrast(1.06) brightness(0.9); } .founder-journey__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,58,34,0.05) 0%, rgba(14,58,34,0.22) 70%, var(--forest-deep) 100%); } .founder-journey__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.4rem, 4vw, 3.4rem) clamp(1.6rem, 5vw, 4.5rem) clamp(2.4rem, 4vw, 3.4rem) clamp(2rem, 4vw, 3.6rem); } .career-track__constant { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: clamp(1.4rem, 2.6vw, 2rem); } .career-track__row { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 0.9rem; } .career-track__step { font-family: var(--serif); font-weight: 300; color: var(--fg-soft); } .career-track__step:not(:first-child) { margin-left: clamp(0.9rem, 1.8vw, 1.5rem); } .career-track__step:not(:first-child)::before { content: "\2192"; margin-right: clamp(0.9rem, 1.8vw, 1.5rem); color: var(--fg-faint); font-family: var(--sans); } .career-track__step[data-level="1"] { font-size: clamp(0.98rem, 1.15vw, 1.1rem); } .career-track__step[data-level="2"] { font-size: clamp(1.08rem, 1.3vw, 1.25rem); color: var(--fg); } .career-track__step[data-level="3"] { font-size: clamp(1.18rem, 1.42vw, 1.4rem); color: var(--fg); } .career-track__step[data-level="4"] { font-size: clamp(1.3rem, 1.6vw, 1.55rem); color: var(--fg); } /* Level 5 ("Glengarra") is the arrival point of the journey - lime is correct here without qualification: this component now lives exclusively on the dark .theme-forest-deep band, never on bone. */ .career-track__step[data-level="5"] { font-size: clamp(1.5rem, 1.85vw, 2.05rem); color: var(--lime); font-weight: 400; } @media (max-width: 860px) { .founder-journey { grid-template-columns: 1fr; min-height: 0; } .founder-journey__media { aspect-ratio: 16 / 10; } .founder-journey__media::after { background: linear-gradient(180deg, rgba(14,58,34,0.05) 0%, rgba(14,58,34,0.2) 70%, var(--forest-deep) 100%); } .founder-journey__content { padding: clamp(2rem, 4vw, 2.6rem) clamp(1.6rem, 4vw, 2.2rem); } } @media (max-width: 640px) { /* flex-direction:column is the actual fix - flex-wrap alone still packs multiple short steps onto one visual line, which is what was producing overlapping/jumbled text here. */ .career-track__row { flex-direction: column; align-items: flex-start; row-gap: 0.7rem; } .career-track__step:not(:first-child) { margin-left: 0; } .career-track__step { display: block; } .career-track__step:not(:first-child)::before { display: block; margin: 0 0 0.35rem; } } /* ------------------------------------------------------------------------- 05b — OUR TEAM — two groups, organisational not hierarchical Operational Team (5) and Technical & SME Team (8) share IDENTICAL card size, gap and type scale - only the column count differs, because 5 naturally fills one row and 8 reads best as a balanced 4+4. Neither group is styled to look more senior or important; do not reintroduce a size difference here. Photo consistency comes from individually re-cropped source files (see the completion note), not from a single generic object-position value - most of these photos are already pre-cropped to the exact 4:5 card ratio at the file level, so object-position has no effect on them; the few that aren't (Jamie, Albert, Stefan, Frank) use the browser's default centring correctly for their content. ------------------------------------------------------------------------- */ .team-tier__label { margin-top: clamp(2.6rem, 4.6vw, 3.6rem); font-family: var(--sans); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); } .team-tier__label--technical { margin-top: clamp(3.2rem, 5.6vw, 4.4rem); padding-top: clamp(1.8rem, 3vw, 2.4rem); border-top: 1px solid var(--rule); } .team-grid { display: grid; gap: clamp(1.6rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 1.6rem); margin-top: clamp(1.6rem, 2.6vw, 2.2rem); } .team-card { display: flex; flex-direction: column; align-items: center; text-align: center; } .team-card__media { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--bone-3); } /* Restrained tonal treatment: mostly monochrome (grayscale first, which is what actually normalises wildly different source colours - studio headshots, a phone photo, video-call screenshots, low-res avatars - before any tint is added), with only a faint warm-to-green cast, not a visible green filter. */ .team-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.95) sepia(0.12) hue-rotate(70deg) saturate(1.05) contrast(1.05) brightness(1.02); } .team-card__name { margin-top: 0.9rem; font-family: var(--sans); font-weight: 600; font-size: clamp(0.88rem, 1vw, 1rem); color: var(--fg); } .team-card__role { margin-top: 0.15rem; font-family: var(--sans); font-size: clamp(0.76rem, 0.85vw, 0.84rem); color: var(--fg-soft); } .team-grid--operational { grid-template-columns: repeat(5, 1fr); } .team-grid--technical { grid-template-columns: repeat(4, 1fr); } /* Placeholder: a clearly-identified pending state, never an invented portrait — a plain tinted panel with initials, dashed border. */ .team-card__media--pending { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--rule); background: var(--bone-2); } .team-card__initials { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2vw, 2rem); color: var(--fg-faint); } .team-card--pending .team-card__role { color: var(--fg-faint); } @media (max-width: 1040px) { .team-grid--operational { grid-template-columns: repeat(3, 1fr); } .team-grid--technical { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .team-grid--operational { grid-template-columns: repeat(2, 1fr); } .team-grid--technical { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; } } /* ------------------------------------------------------------------------- 06 — STRATEGY. RESULTS. IT'S OUR NATURE. (headline/grid rebuilt) .statement/.statement__grid/.chars are the shared components from styles.css (also used by Home and Our Work's closing sections) - both fixes below are SCOPED to #character specifically, so Home/Our Work are untouched: 1. The old headline was one

with "It's our nature." as a nested inline at font-size:0.5em plus a
, inheriting the parent .display's line-height (tuned for the much bigger first line) - that combination is what was producing inconsistent/ overlapping line spacing at different widths. It's now two independent block elements (.character-headline__line1/line2), each with its own clamp() and line-height, so neither depends on the other's font-size to lay out correctly. 2. The shared .statement__grid uses align-items:end, which bottom- aligns both columns - fine when they're similar heights, but with a short headline beside five stacked principles it pushed the headline down and made the right column read as floating/ disconnected. Overridden to align-items:start here only. .character-mark: this section sits on a bone-2 background, so the shared .mark class (lime by default - correct on the dark hero/CTA/ footer instances of "It's our nature." elsewhere) is overridden here to the grounded forest tone per the site's colour rule: bright lime is reserved for dark backgrounds, never substantial bone-background type. ------------------------------------------------------------------------- */ #character .statement__grid { align-items: start; } .character-headline { max-width: 46ch; } .character-headline .display { margin: 0; } .character-headline__line2 { margin: 0.2em 0 0; font-family: var(--serif); font-style: italic; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem); } .character-mark { color: var(--forest-line); } .principles { display: flex; flex-direction: column; } .principle { padding: clamp(1rem, 2vw, 1.3rem) 0; border-top: 1px solid var(--rule); } .principle:last-child { padding-bottom: 0; } .principle__t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: var(--fg); } .principle__d { margin-top: 0.35rem; color: var(--fg-soft); font-size: 0.92rem; } /* Reduced to three statements - a single column reads as one quiet list; the 2-column large-desktop split below is for the five-item version and would leave an orphaned cell with only three. */ .principles.principles--three { display: flex; flex-direction: column; } /* "Clear. Honest. Open." reads as a closing signature to the five principles, not a continuation trailing off "Take ownership" - given its own rule/margin echoing the principles' own top-border rhythm, scoped to this section only (the shared .chars component elsewhere on the site is untouched). */ #character .chars { margin-top: clamp(2rem, 3.5vw, 2.8rem); padding-top: clamp(1.2rem, 2.2vw, 1.6rem); border-top: 1px solid var(--rule); } /* Team -> Glengarra Way spacing: the team section's own bottom padding (from .section) plus this section's own top padding was reading as a double gap once the Technical & SME Team's border-top rule was added directly above it - tightened here rather than touching global section spacing used everywhere else on the site. Tightened further in the editorial-rhythm pass: still real breathing room, just not two full section gaps stacked on top of each other. */ #character { padding-top: clamp(2.4rem, 4vw, 4rem); } /* Keep the two-column composition through tablet widths (only stack once space genuinely runs out), overriding the shared component's 900px collapse for this section specifically. */ @media (max-width: 900px) { #character .statement__grid { grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.8rem, 4vw, 2.6rem); } } @media (max-width: 680px) { #character .statement__grid { grid-template-columns: 1fr; } } /* ========================================================================= LARGE-DESKTOP ART DIRECTION (About) — ≥1500px only clamp(ORIGINAL, calc(ORIGINAL + slope*(100vw-1500px)), CEILING) throughout so 1280/1366/1440/tablet/mobile are untouched — including the wide container and the Zoom-In/Principles column switches below, which do not exist at all before 1500px (protected baseline = the original single-column/two-column layouts, unchanged). ========================================================================= */ @media (min-width: 1500px) { .owner-verdict-t { font-size: clamp(1.9rem, calc(1.9rem + 0.017 * (100vw - 1500px)), 2.65rem); max-width: 50ch; } /* Zoom Out/Zoom In: images and the connect node get a little more room at very large desktop, but every value here is still an explicit rem ceiling (calc() growth capped by clamp()'s own max), never a bare percentage of the column - that decoupling from column width is what keeps the composition "compact premium editorial" instead of ballooning at wide viewports. */ .zoom-side__media { max-width: clamp(23rem, calc(23rem + 0.03 * (100vw - 1500px)), 27rem); } .zoom-side__k { font-size: clamp(1.7rem, calc(1.7rem + 0.008 * (100vw - 1500px)), 1.95rem); } .zoom-side__list li { font-size: clamp(1.2rem, calc(1.2rem + 0.004 * (100vw - 1500px)), 1.32rem); } .zoom-connect__node { width: clamp(8.4rem, calc(8.4rem + 0.02 * (100vw - 1500px)), 9.6rem); height: clamp(8.4rem, calc(8.4rem + 0.02 * (100vw - 1500px)), 9.6rem); font-size: clamp(0.76rem, calc(0.76rem + 0.002 * (100vw - 1500px)), 0.82rem); } .zoom-cycle { font-size: clamp(1.9rem, calc(1.9rem + 0.008 * (100vw - 1500px)), 2.15rem); max-width: 68ch; } /* Founder — stronger human/editorial composition: the reading measure gets more width without letting lines run unreadably long. The column ratio is left exactly as the protected baseline (changing it at this threshold would shrink the portrait right at the boundary); only the text measure and portrait ceiling grow. */ .founder-grid { gap: clamp(3.6rem, calc(3.6rem + 0.02 * (100vw - 1500px)), 4.5rem); } /* Floor is the image's actual uncapped rendered width at 1500px (measured, not guessed) so the portrait doesn't visibly shrink right at the threshold — it keeps growing a little further, then holds. */ .founder-media { max-width: clamp(29.3rem, calc(29.3rem + 0.0966 * (100vw - 1500px)), 32rem); } /* ch is mixed with a plain px growth term (not a jump to a new ch value) so the measure widens continuously instead of snapping from 58ch to 64ch the instant the media query engages. */ .founder-body .lead { max-width: min(calc(58ch + 0.197 * (100vw - 1500px)), 66ch); font-size: clamp(1.5rem, calc(1.5rem + 0.011 * (100vw - 1500px)), 1.7rem); } .founder-quote { font-size: clamp(1.5rem, calc(1.5rem + 0.011 * (100vw - 1500px)), 1.7rem); max-width: min(calc(42ch + 0.13 * (100vw - 1500px)), 48ch); } /* Glengarra Way — sufficiently substantial without becoming a corporate values grid: five items compose as a two-column field (fifth sitting alone in the last row) against the headline, using the wider container's width as one related composition. */ .principles { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2.4rem, calc(2.4rem + 0.013 * (100vw - 1500px)), 3rem); } .principle { padding-right: clamp(1rem, calc(1rem + 0.011 * (100vw - 1500px)), 1.5rem); } .principle__t { font-size: clamp(1.3rem, calc(1.3rem + 0.016 * (100vw - 1500px)), 1.9rem); } .principle__d { font-size: clamp(0.92rem, calc(0.92rem + 0.007 * (100vw - 1500px)), 1.1rem); } /* Our Team — portraits stay "relatively small and elegant" per brief; only gap and name/role type grow modestly, not the photos themselves ballooning into giant profile cards. Both groups get the exact same growth curve - no differential treatment. */ .team-grid { gap: clamp(1.6rem, calc(1.6rem + 0.011 * (100vw - 1500px)), 2.2rem) clamp(1.2rem, calc(1.2rem + 0.013 * (100vw - 1500px)), 1.8rem); } .team-card__name { font-size: clamp(1rem, calc(1rem + 0.005 * (100vw - 1500px)), 1.14rem); } .team-card__role { font-size: clamp(0.84rem, calc(0.84rem + 0.004 * (100vw - 1500px)), 0.96rem); } }