/* ============================================================================ Tony McChrystal v2 - "Editorial" refinement layer ---------------------------------------------------------------------------- Ported from the Pavesen v2/v4 refinement work (~/pavesen-site-v4), adapted to this site's markup. Loaded LAST in , after css/site.css, so it wins the cascade on equal specificity without needing !important (used only where an inline style= attribute has to be beaten). Same palette, same logo, same graphics, same copy. What changes is the CRAFT - the tells that make a page read as generated: 1. filled cards + gold left-bars -> hairline-ruled editorial columns 2. hover lift (translateY + shadow) -> flat colour transitions 3. rounded corners on a prestige site -> square corners, clean plates 4. one uniform 80px section rhythm -> varied, breathing scale 5. eyebrow + 48px gold bar everywhere -> tracked micro-caps + diamond rule 6. lining figures, tight body copy -> old-style figures, editorial type 7. floating AND rotating brand cube -> drift only, original tempo 8. flat single-tone navy -> one deep ground, tonally set No new hues. Every colour is the existing navy, the existing gold, or a tonal step between them. ============================================================================ */ :root { /* tonal steps derived from the existing palette - no new hues */ --abyss: #00070f; /* deepest ground */ --navy-deep: #000d24; /* the mid bands, deepened from #00102d */ --navy-lift: #011a3a; /* the one band that lifts, for contrast */ --gold-soft: #c9ad63; /* gold at reading weight on dark */ --gold-ghost: rgba(167,136,49,0.42); /* hairlines - the single most important token in this layer */ --rule-dark: rgba(167,136,49,0.20); --rule-dark-2: rgba(255,255,255,0.09); --rule-light: rgba(0,18,51,0.13); --rule-light-2:rgba(0,18,51,0.08); /* vertical rhythm */ --pad-sec: clamp(4.5rem, 9vw, 8rem); --pad-tight: clamp(3rem, 6vw, 5rem); --ease-ed: cubic-bezier(0.22, 0.61, 0.24, 1); } /* --------------------------------------------------------------------------- 1. TYPE - old-style figures, balanced wrapping, editorial measure ------------------------------------------------------------------------ */ body { font-size: 16.5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .t-hero, .t-h2, .cta-hl, .sc-title, .sc-num, .tl-num, .tl-title, .pv-pillar-title, .adv-pillar-num, .pp-pillar-title, .pc-value { font-feature-settings: "onum" 1, "liga" 1, "dlig" 1, "kern" 1; font-variant-numeric: oldstyle-nums; } .t-hero { line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; } .t-h2 { line-height: 1.14; letter-spacing: -0.012em; text-wrap: balance; } .t-hero em, .t-h2 em, .cta-hl em { font-style: italic; font-weight: 300; } /* Body copy: a touch larger, a touch tighter. Reads set, not generated. */ .t-body { font-size: 1.005rem; line-height: 1.78; } .t-body p + p, p.t-body + p.t-body { margin-top: 1.15rem; } /* Eyebrows: smaller, far wider tracking, lighter weight, leading hairline. This one change re-reads every label on the page as editorial, not UI. */ .t-eyebrow { display: inline-flex; align-items: center; gap: 0.95em; font-size: 0.685rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; } .t-eyebrow::before { content: ""; width: 34px; height: 1px; flex: none; background: currentColor; opacity: 0.75; } /* centred contexts: hairline both sides so it reads as a rule, not an arrow */ .pv-section-hdr.center .t-eyebrow, .pv-advisors .t-eyebrow, .pv-pavesen .t-eyebrow, .pv-cta .t-eyebrow, .pv-404-inner .t-eyebrow { justify-content: center; } .pv-section-hdr.center .t-eyebrow::after, .pv-advisors .t-eyebrow::after, .pv-pavesen .t-eyebrow::after, .pv-cta .t-eyebrow::after, .pv-404-inner .t-eyebrow::after { content: ""; width: 34px; height: 1px; flex: none; background: currentColor; opacity: 0.75; } /* the hero eyebrow already carries its own drawn line - don't double it */ .pv-hero-eyebrow .pv-eyebrow-txt { font-size: 0.685rem; font-weight: 500; letter-spacing: 0.3em; } /* On a phone the drawn rule plus a longer label wraps to two lines and leaves the rule stranded beside the first of them. Below 600 the label keeps the width to itself. */ @media (max-width: 600px) { .pv-hero-eyebrow .pv-eyebrow-line { display: none; } .pv-hero-eyebrow { gap: 0; } .pv-hero-eyebrow .pv-eyebrow-txt { letter-spacing: 0.24em; } } /* The 48px gold bar is kept, but redrawn as an ornament: a hairline with a small rotated diamond at its head. */ .gold-rule { position: relative; width: 68px; height: 1px; background: var(--gold-ghost); margin: 20px 0 28px; overflow: visible; } .gold-rule::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; background: var(--gold); transform: translate(-1px, -50%) rotate(45deg); } .gold-rule.center { width: 96px; background: linear-gradient(90deg, transparent, var(--gold-ghost) 22%, var(--gold-ghost) 78%, transparent); } .gold-rule.center::before { left: 50%; transform: translate(-50%, -50%) rotate(45deg); } /* The eyebrow now carries its own hairline, so a bar sitting directly under it is a doubled rule. Drop it; the rule that follows a HEADING is kept, where it reads as a deliberate ornament. */ .t-eyebrow + .gold-rule { display: none; } .t-eyebrow:has(+ .gold-rule) { margin-bottom: 1.45rem; } .t-h2 + .gold-rule { margin-top: 1.6rem; margin-bottom: 2.2rem; } /* with the bar gone, the heading holds its own space above the copy */ .t-h2 + p, .t-h2 + div { margin-top: 1.7rem; } /* --------------------------------------------------------------------------- 2. SURFACES - tonal depth, flat and clean ------------------------------------------------------------------------ */ /* No grain. The base sheet ships a fixed noise overlay on body::before; it is switched off here rather than edited, so site.css stays a one-line revert. */ body::before { display: none; } /* varied vertical rhythm instead of a uniform 80px everywhere */ .pv-section { padding: var(--pad-sec) 0; } .pv-cta { padding: clamp(5.5rem, 11vw, 9rem) 0 clamp(4.5rem, 9vw, 7.5rem); } /* hairline seams between bands - a set page, not stacked blocks */ .pv-serve, .pv-advisors, .pv-pavesen { border-top: 1px solid var(--rule-dark); } /* --------------------------------------------------------------------------- 3. BUTTONS - square, no lift. The translateY(-2px)+shadow hover is the single most recognisable generated micro-interaction on the web. ------------------------------------------------------------------------ */ .btn-primary, .btn-ghost, .btn-blue { border-radius: 0; font-size: 0.7rem; letter-spacing: 0.2em; font-weight: 500; padding: 1.15em 2.5em; transition: background 0.35s var(--ease-ed), color 0.35s var(--ease-ed), border-color 0.35s var(--ease-ed); } .btn-primary:hover, .btn-ghost:hover, .btn-blue:hover { transform: none; box-shadow: none; } .btn-primary { border: 1px solid var(--gold); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); } .btn-primary:hover { background: var(--gold2); border-color: var(--gold2); } .btn-ghost { border-color: var(--gold-ghost); color: var(--gold-soft); } .btn-ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } /* --------------------------------------------------------------------------- 4. CARDS -> HAIRLINE COLUMNS Filled panel + 1px border + 2px gold left bar + hover-fill is the house style of every generated page on the internet. Replaced with ruled editorial columns: no fill, no box, one hairline, air. ------------------------------------------------------------------------ */ /* --- Areas of Specialism, 2-up --- */ .pv-serve-cards { gap: 0 clamp(2rem, 4.5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.75rem); } .pv-serve-card { background: transparent; border: 0; border-top: 1px solid var(--rule-dark); padding: 2.6rem 0 2.9rem; transition: border-color 0.35s var(--ease-ed); } .pv-serve-card:hover { background: transparent; border-top-color: var(--gold-ghost); } .pv-serve-card::before { display: none; } @media (min-width: 641px) { .pv-serve-card:nth-child(even) { border-left: 1px solid var(--rule-dark); padding-left: clamp(2rem, 4.5vw, 4rem); } } /* the roman numeral: an italic mark in the flow, not a giant ghosted digit */ .sc-num { font-size: 1.55rem; font-style: italic; color: var(--gold); opacity: 0.85; margin-bottom: 1.1rem; letter-spacing: 0.02em; } .pv-serve-card:hover .sc-num { color: var(--gold); opacity: 1; } .sc-title { font-size: 1.62rem; font-weight: 400; line-height: 1.2; margin-bottom: 0.95rem; letter-spacing: -0.005em; transition: color 0.35s var(--ease-ed); } .pv-serve-card:hover .sc-title { color: var(--gold-soft); } /* --- credentials strip: drop the boxed dividers for hairlines --- */ .pv-stats { border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); } .pv-pillar-box { padding: clamp(2.2rem, 4vw, 3rem) clamp(1.6rem, 3vw, 2.4rem) clamp(2.2rem, 4vw, 3rem) 0; border-right: 0; } @media (min-width: 769px) { .pv-pillar-box + .pv-pillar-box { border-left: 1px solid var(--rule-dark-2); padding-left: clamp(1.6rem, 3vw, 2.4rem); } } .pv-pillar-title { font-size: 1.34rem; font-weight: 400; margin-bottom: 0.75rem; letter-spacing: -0.005em; } .pv-pillar-txt { font-size: 0.885rem; line-height: 1.75; } /* --- fact registers (approach + Pavesen): unbox them --- */ .adv-pillars, .pv-pavesen-pillars { border: 0; border-top: 1px solid var(--rule-dark); gap: 0; margin-top: clamp(3rem, 6vw, 4.5rem); } .adv-pillar { padding: clamp(2rem, 4vw, 2.8rem) 1.5rem; border-right: 0; } @media (min-width: 601px) { .adv-pillars .adv-pillar + .adv-pillar, .pv-pavesen-pillars .adv-pillar + .adv-pillar { border-left: 1px solid var(--rule-dark-2); } } .adv-pillar-num { font-size: 2.5rem; font-weight: 300; line-height: 1.05; margin-bottom: 0.7rem; color: var(--gold-soft); } .adv-pillar-lbl { font-size: 0.645rem; font-weight: 500; letter-spacing: 0.22em; line-height: 1.8; } .pp-pillar-title { font-size: 1.3rem; font-weight: 400; margin-bottom: 0.7rem; letter-spacing: -0.005em; } .pp-pillar-txt { font-size: 0.885rem; line-height: 1.75; } /* --- career register: ruled rows, larger serif numeral --- */ .pv-timeline { max-width: 820px; } .tl-item { grid-template-columns: 2.4rem 1fr; gap: clamp(1.2rem, 2.4vw, 2rem); padding: clamp(1.8rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--rule-dark-2); } .tl-num { font-size: 1.5rem; font-style: italic; opacity: 0.8; line-height: 1.25; } .tl-item:hover .tl-num { opacity: 1; color: var(--gold); } .tl-title { font-size: 1.42rem; font-weight: 500; line-height: 1.25; margin-bottom: 0.65rem; letter-spacing: -0.005em; } /* --- contact register: three ruled columns, not a boxed grid --- */ .pv-contact-grid { border: 0; border-top: 1px solid var(--rule-dark); gap: 0; margin-top: clamp(3rem, 6vw, 4.25rem); } .pv-contact-card { padding: clamp(2.2rem, 4vw, 3rem) 1.5rem; border-right: 0; text-align: center; transition: none; } .pv-contact-card:hover { background: transparent; } @media (min-width: 701px) { .pv-contact-card + .pv-contact-card { border-left: 1px solid var(--rule-dark-2); } } .pc-icon { opacity: 0.7; transition: opacity 0.35s var(--ease-ed); } .pv-contact-card a:hover .pc-icon { opacity: 1; transform: none; } .pc-label { font-size: 0.645rem; font-weight: 500; letter-spacing: 0.26em; margin-bottom: 1rem; } .pc-value { font-size: 1.22rem; transition: color 0.35s var(--ease-ed); } /* --------------------------------------------------------------------------- 5. IMAGERY - square it. No corner ticks: the hero composite already carries its own baked-in offset frame and grid, and a second frame fights it. ------------------------------------------------------------------------ */ .pv-img-wrap, .pv-img-wrap img { border-radius: 0; } .pv-portrait img, .pv-portrait::before, .pv-portrait::after { border-radius: 0; } /* --------------------------------------------------------------------------- 6. NAVIGATION ------------------------------------------------------------------------ */ /* No band of its own: the masthead sits ON the hero so there is no seam across the top of the page. It takes a surface once you scroll, which is also when it needs one for legibility. */ .pv-nav { background: transparent; border-bottom: 1px solid transparent; transition: background 0.45s var(--ease-ed), border-color 0.45s var(--ease-ed), -webkit-backdrop-filter 0.45s var(--ease-ed), backdrop-filter 0.45s var(--ease-ed); } .pv-nav.scrolled { background: rgba(0, 12, 31, 0.94); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom-color: var(--rule-dark); } .pv-nav-links a { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.66); } .pv-nav-links a:hover, .pv-nav-links a.active { color: var(--gold-soft); } /* the width-growing underline is a generated-UI staple - use a fixed tick */ .pv-nav-links a::after { bottom: -7px; left: 50%; width: 0; transition: width 0.35s var(--ease-ed), left 0.35s var(--ease-ed); } .pv-nav-links a:hover::after, .pv-nav-links a.active::after { width: 14px; left: calc(50% - 7px); } .pv-nav-cta { border-radius: 0; font-size: 0.665rem; letter-spacing: 0.2em; padding: 0.95em 1.75em; box-shadow: none; } .pv-nav-tel { letter-spacing: 0.06em; font-size: 0.775rem; } .pv-mobile-menu { background: rgba(0, 12, 31, 0.97); } /* --------------------------------------------------------------------------- 7. HERO ------------------------------------------------------------------------ */ .pv-hero-sub { font-size: 1.055rem; line-height: 1.72; color: rgba(245, 243, 239, 0.7); max-width: 46ch; } .pv-hero-actions { gap: 1rem 1.4rem; align-items: center; } /* The hero keeps the ORIGINAL navy. The composite portrait has a solid #001233 slab baked in behind it; deepening this plate to the sitewide ground turned that slab into a pale rectangle floating behind his head. The asset is right - the ground under it was wrong. Everything below the hero still takes #000e26, so the hero reads as the one plate with depth, which is what a hero is for. */ .pv-hero-framed { filter: drop-shadow(0 26px 64px rgba(0, 0, 0, 0.42)); } .pv-hero-cube { animation: pvDrift 8s ease-in-out infinite; } @keyframes pvDrift { 0%, 100% { transform: translateY(0); } 33% { transform: translateY(-18px); } 66% { transform: translateY(-8px); } } /* the ghosted background cubes are texture - they drift slower, and they are masked at the edges so the section boundary does not slice them */ .pv-serve-cube, .pv-advisors-cube { animation: pvDriftGhost 15s ease-in-out infinite; /* The mask is here ONLY to stop the section boundary hard-clipping the cube into a sliced object. An earlier version faded from 42% outward, which ate the whole shape and left a smudge in the corner instead of a cube. It fades at the very edge and nowhere else. */ -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); } @keyframes pvDriftGhost { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 14px)); } } .pv-advisors-cube { animation-name: pvDriftGhostB; } @keyframes pvDriftGhostB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, -12px); } } .pv-pavesen-watermark { opacity: 0.04; } /* --------------------------------------------------------------------------- 8. CTA BAND + PRESS STRIP + FOOTER ------------------------------------------------------------------------ */ .pv-cta::after { background: linear-gradient(90deg, transparent, var(--gold-ghost) 25%, var(--gold-ghost) 75%, transparent); } .pv-cta::before { width: 900px; height: 520px; background: radial-gradient(ellipse, rgba(167,136,49,0.07) 0%, transparent 66%); } .cta-hl { line-height: 1.22; letter-spacing: -0.012em; margin: 1.4rem auto 1.1rem; } .cta-sub { font-size: 1.005rem; line-height: 1.75; margin-bottom: clamp(2.6rem, 5vw, 3.4rem); color: rgba(255,255,255,0.62); } .pv-press-strip { border-top: 1px solid var(--rule-dark); border-bottom: 0; padding: clamp(2.2rem, 4vw, 2.9rem) 40px; } .pv-press-eyebrow { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.3em; margin-bottom: 1.5rem; color: rgba(167,136,49,0.9); } .pv-press-outlet { font-size: 1.1rem; color: rgba(255, 255, 255, 0.62); } /* On a phone the outlets fall into a 3-column grid and "Family Office Magazine" is the one that takes two lines. Centred rows then put its first line above its neighbours' only line. Aligned to the top of the row instead, so every first line sits on one level. */ @media (max-width: 768px) { .pv-press-outlets { align-items: start; } .pv-press-outlet { line-height: 1.35; } } .pv-footer { border-top: 1px solid var(--rule-dark); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.5rem; } .pv-fcol-title { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.28em; margin-bottom: 1.4rem; } .pv-flinks a { font-size: 0.845rem; color: rgba(255, 255, 255, 0.55); transition: color 0.3s var(--ease-ed); } .pv-flinks a:hover { color: var(--gold-soft); } .pv-footer-tag { font-size: 0.85rem; line-height: 1.75; } .pv-footer-btm { border-top: 1px solid var(--rule-dark-2); padding-top: 1.9rem; } .pv-social-links a { border-radius: 0; border-color: var(--rule-dark); transition: color 0.3s var(--ease-ed), border-color 0.3s var(--ease-ed); } .pv-social-links a:hover { transform: none; border-color: var(--gold); color: var(--gold); } .pv-copyright { font-size: 0.735rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.62); } .pv-to-top { border-radius: 0; } /* --------------------------------------------------------------------------- 9. MOTION - slow, restrained scroll reveal ------------------------------------------------------------------------ */ [data-reveal] { transform: translateY(16px); transition: opacity 0.95s var(--ease-ed), transform 0.95s var(--ease-ed); } [data-reveal-delay="1"] { transition-delay: 0.09s; } [data-reveal-delay="2"] { transition-delay: 0.18s; } [data-reveal-delay="3"] { transition-delay: 0.27s; } @media (prefers-reduced-motion: reduce) { .pv-hero-cube, .pv-serve-cube, .pv-advisors-cube { animation: none; } .pv-hero-eyebrow, .pv-hero-headline, .pv-hero-sub, .pv-hero-actions { animation: none; opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 10. RESPONSIVE CORRECTIONS for the hairline treatment ------------------------------------------------------------------------ */ @media (max-width: 768px) { .pv-pillar-box { border-left: 0; padding: 1.9rem 0; border-right: 0; border-bottom: 1px solid var(--rule-dark-2); } .pv-pillar-box:last-child { border-bottom: 0; } .pv-serve-card { padding: 2.1rem 0 2.3rem; } } @media (max-width: 700px) { .pv-contact-card { border-left: 0; border-right: 0; border-bottom: 1px solid var(--rule-dark-2); } .pv-contact-card:last-child { border-bottom: 0; } } @media (max-width: 640px) { .pv-serve-cards { gap: 0; } .pv-serve-card:nth-child(even) { border-left: 0; padding-left: 0; } } @media (max-width: 600px) { .adv-pillars .adv-pillar + .adv-pillar, .pv-pavesen-pillars .adv-pillar + .adv-pillar { border-left: 0; border-top: 1px solid var(--rule-dark-2); } .adv-pillar { border-bottom: 0; border-right: 0; } } @media (max-width: 480px) { .pv-stats-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- 11. THE GROUND - one dark tone ---------------------------------------------------------------------------- The page ran four near-identical navies (#001233, #00102d, #011a3a, #0d1f38). Four tones that differ by a few points do not read as tonal range; they read as inconsistency. One ground, with the single light band left alone to carry the page's rhythm. Applied as background-color, never by redefining --navy: that token is also the text colour on gold buttons and on the light band. ------------------------------------------------------------------------ */ :root { --ground: #000e26; } body, .pv-stats, .pv-serve, .pv-advisors, .pv-pavesen, .pv-press-strip, .pv-cta, .pv-footer, .pv-404, [style*="background:#0d1f38"], [style*="background: #0d1f38"] { background-color: var(--ground) !important; } /* The hero keeps the ORIGINAL navy. The composite carries a solid #001233 slab offset behind the photograph, and that slab only reads as a MOUNT while it is a little LIGHTER than what surrounds it. Darker-than-ground was tried (the slab recoloured to #000F1F) and it reads as two shadow smudges either side of his head, not as a panel. The relationship is what matters, not the value. Everything below the hero still takes #000e26, so the hero is the one plate on the page with depth - which is what a hero is for. */ .pv-hero { background-color: #001233 !important; background-image: radial-gradient(92% 78% at 74% 34%, rgba(167,136,49,0.07), transparent 62%), linear-gradient(135deg, #001233 0%, #00102d 100%) !important; } .pv-serve, .pv-advisors, .pv-pavesen, .pv-stats, .pv-cta, .pv-footer, .pv-press-strip { background-image: none; } /* the 404 keeps a plate of its own - it is a full-screen band with no hero above it, so a flat ground would leave the masthead floating on nothing */ .pv-404 { background-image: radial-gradient(90% 80% at 50% 34%, rgba(167,136,49,0.08), transparent 62%), linear-gradient(160deg, #001233 0%, var(--abyss) 100%) !important; } .pv-404-rule { width: 68px; } /* --------------------------------------------------------------------------- 12. MOBILE RHYTHM ---------------------------------------------------------------------------- The scale that gives the desktop page its air is too generous once every band is a single column: at 390px the page ran ~9,200px, and a good part of that was empty ground between sections rather than content. The rhythm tokens are redefined here rather than patched per-section, so every band that uses them tightens together and the proportions between them are preserved. Desktop is untouched - this block only exists below 700px. ------------------------------------------------------------------------ */ @media (max-width: 700px) { :root { --pad-sec: clamp(3.25rem, 11vw, 4.5rem); --pad-tight: clamp(2.25rem, 8vw, 3rem); } /* the two bands that set their own padding rather than using the tokens */ .pv-cta { padding: clamp(3.75rem, 13vw, 5.5rem) 0 clamp(3rem, 10vw, 4.5rem); } /* section headers stop holding desktop-sized space above their content */ .pv-section-hdr { margin-bottom: clamp(1.75rem, 6vw, 2.5rem); } /* stacked registers: the side padding is doing nothing in one column, and the vertical padding was tuned for three items side by side, not nine rows */ .adv-pillar { padding: 1.6rem 0; } .pv-contact-card { padding: 1.8rem 0; } .pv-pillar-box { padding: 1.6rem 0; } .pv-serve-card { padding: 1.8rem 0 2rem; } .tl-item { padding: 1.5rem 0; } /* the press strip is a label and six names - it does not need a band's worth of room above and below */ .pv-press-strip { padding: clamp(1.9rem, 6vw, 2.4rem) 24px; } .pv-footer { padding: clamp(2.75rem, 9vw, 3.75rem) 0 2rem; } } /* The statement keeps proportionally more air than its neighbours - it is the one moment on the page, and squeezing it would make it just another band - but it does not need the full desktop measure on a phone. */ @media (max-width: 700px) { .v4-statement { padding: clamp(4.25rem, 15vw, 6rem) 0 clamp(3.25rem, 11vw, 4.5rem); } }