/* ═══════════════════════════════════════════════════════════════ GAISER PARTNERS AG — BRAND IDENTITY & STYLE SHEET Gaiser Partners AG · Zürich · gaiser-partners.ch © 2026 Gaiser Partners AG · All rights reserved ═══════════════════════════════════════════════════════════════ TYPOGRAPHY ────────── Serif (headings, display, quotes, numbers): Cormorant Garamond — Google Fonts Weights: 300 (light), 400 (regular), 500, 600, italic variants Use: section titles, hero headlines, decorative numbers, pull quotes, founder bio, vision/mission text, value propositions Sans-serif (navigation, labels, body, buttons, tags): Josefin Sans — Google Fonts Weights: 300 (light), 400 (regular), 600 (semibold) Use: all UI labels, nav tabs, eyebrows, buttons, tags, body copy Import: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Josefin+Sans:wght@300;400;600&display=swap BASE FONT SIZE: 17px on TYPE SCALE ────────── XS labels/tags/eyebrows: 0.75rem (12.75px) — letter-spacing: 0.14–0.24em, uppercase SM buttons/small UI: 0.82rem (13.94px) MD body text: 0.94rem (15.98px) — line-height: 1.85 LG card quotes/values: 1.0rem (17px) XL card headings: 1.1rem (18.7px) 2XL sub-headlines: 1.3rem (22.1px) Display serif: clamp(1.9rem, 3vw, 3.2rem) Hero headline: clamp(3rem, 5vw, 6rem) COLOUR PALETTE ────────────── Gold (accent, borders, text labels on dark): --gold: #B8965A Primary gold — borders, decorative accents --gold-light: #D4AF78 High-contrast gold — all text labels (6:1 on charcoal-mid) --gold-dark: #8C6E3E Deep gold — gradient end, subdued use Dark (backgrounds): --charcoal: #1A1A1A Primary background --charcoal-mid: #222222 Secondary background (alternating sections) --charcoal-light: #2C2C2C Hover states, active cells --stone: #444444 Subtle text, footer copy, disabled states Text on dark: --cream: #F5F0E8 Primary text (headings, important content) --cream-dim: #E0D8C8 Secondary text (sub-headings, reference text) --mist: #8A8A8A Body text, descriptive copy SITE PHILOSOPHY — ALL DARK All backgrounds are dark (#1A1A1A or #222). No white or light-background sections. Gold is used exclusively as accent/label colour on dark backgrounds. Exception: marquee strip uses #B8965A background with #1A1A1A text. SPACING ─────── --pad-x: 5rem (horizontal section padding) --pad-y: 4rem (vertical section padding) Responsive: 2.5rem at ≤1100px · 1.2rem at ≤700px · 1rem at ≤480px BORDER TREATMENTS ───────────────── Section dividers: 1px solid rgba(184,150,90,0.1) very subtle Card borders: 1px solid rgba(184,150,90,0.15) light Hover borders: 1px solid rgba(184,150,90,0.4) medium Active/accent: 1px solid rgba(184,150,90,0.5) strong Featured border: 3px solid #B8965A (var(--gold)) left-border accent Grid gaps: 1px · background: rgba(184,150,90,0.15) grid-line effect COMPONENTS ────────── .btn-primary — gold fill, charcoal text, uppercase, letter-spacing 0.18em .btn-ghost — transparent, gold-light border, gold-light text .eyebrow — 0.75rem, uppercase, letter-spacing 0.24em, gold-light .section-title — serif, clamp(1.9–3.2rem), weight 300 .section-body — 0.94rem, mist colour, line-height 1.85, weight 300 .sp-tags span — 0.75rem, uppercase, gold-light, border rgba(gold,0.35) .reveal — opacity:0 → 1, translateY(16px) → 0, 0.55s ease ELEVATION / LAYERING ──────────────────── Landing overlay: z-index 9999 Nav bar: z-index 1000 (position:fixed, height:64px, blur backdrop) Nav drawer: z-index 999 Tooltips: z-index 2000 ANIMATION ───────── Marquee: 40s linear infinite (pause-on-hover optional) Reveal: 0.55s ease, staggered delays d1=0.1s d2=0.2s d3=0.3s d4=0.4s Hover transitions: 0.15–0.2s ease Hero chart bars: SVG animate, 0.85–1.05s, cubic-bezier(0.4,0,0.2,1) ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ RESET & VARIABLES ═══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 17px; } :root { --gold: #B8965A; --gold-light: #D4AF78; --gold-dark: #8C6E3E; --charcoal: #1A1A1A; --charcoal-mid: #222; --charcoal-light: #2C2C2C; --stone: #444; --mist: #8A8A8A; --cream: #F5F0E8; --cream-dim: #E0D8C8; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Josefin Sans', 'Helvetica Neue', sans-serif; --pad-x: 5rem; --pad-y: 4rem; } body { background: var(--charcoal); color: var(--cream); font-family: var(--sans); overflow-x: hidden; } a { text-decoration: none; color: inherit; } button { cursor: pointer; font-family: var(--sans); } em.gold-em { font-style: italic; color: var(--gold-light); } /* ── Page system ── */ .page { display: none; min-height: 100vh; padding-top: 64px; } .page.active { display: block; } /* ── Landing ── */ #landing { position: fixed; inset: 0; z-index: 9999; background: var(--charcoal); display: flex; align-items: center; justify-content: center; } #site-wrapper { display: none; } #site-wrapper.visible { display: block; } /* ── Backgrounds ── */ .bg-dark { background: var(--charcoal); } .bg-mid { background: var(--charcoal-mid); } .pad { padding: var(--pad-y) var(--pad-x); } /* ── Reveal animation ── */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.visible { opacity: 1; transform: none; } .d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; } .d4 { transition-delay: 0.4s; } /* ── NAVIGATION ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 64px; background: rgba(18,18,18,0.97); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(184,150,90,0.12); display: flex; align-items: center; } .nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex-shrink: 0; padding: 0 1.8rem; height: 100%; border-right: 1px solid rgba(184,150,90,0.12); } .nav-logo-mark { width: 30px; height: 30px; } .nav-logo-name { font-family: var(--serif); font-size: 1rem; font-weight: 500; color: var(--cream); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .nav-pages { display: flex; align-items: stretch; flex: 1; height: 100%; padding-left: 0.5rem; } .nav-tab { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; color: rgba(200,190,175,0.55); background: none; border: none; border-bottom: 2px solid transparent; padding: 0 1.1rem; height: 100%; cursor: pointer; white-space: nowrap; transition: color 0.18s, border-color 0.18s; } .nav-tab:hover { color: var(--cream); } .nav-tab.active { color: var(--gold-light); border-bottom-color: var(--gold-light); } .nav-right { display: flex; align-items: center; padding: 0 1.8rem; gap: 1rem; flex-shrink: 0; height: 100%; border-left: 1px solid rgba(184,150,90,0.12); } .nav-cta { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--charcoal); background: var(--gold); padding: 0.45rem 1.3rem; border: none; cursor: pointer; white-space: nowrap; transition: background 0.18s; text-decoration: none; display: inline-block; } .nav-cta:hover { background: var(--gold-light); } .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .nav-burger span { display: block; width: 20px; height: 1.5px; background: var(--gold); transition: all 0.2s; } .nav-drawer { position: fixed; top: 64px; left: 0; right: 0; background: rgba(18,18,18,0.99); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(184,150,90,0.15); z-index: 999; transform: translateY(-110%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); padding: 0.5rem 0 1rem; } .nav-drawer.open { transform: translateY(0); } .nav-drawer-btn { display: block; width: 100%; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; color: rgba(200,190,175,0.7); background: none; border: none; border-bottom: 1px solid rgba(184,150,90,0.06); padding: 1rem 2rem; text-align: left; cursor: pointer; transition: color 0.15s, background 0.15s; } .nav-drawer-btn:hover { color: var(--gold-light); background: rgba(184,150,90,0.04); } /* ── TYPOGRAPHY ── */ .section-title { font-family: var(--serif); font-size: clamp(1.9rem,3vw,3.2rem); font-weight: 300; line-height: 1.15; margin-bottom: 1.2rem; } .section-body { font-size: 0.94rem; color: var(--mist); line-height: 1.85; max-width: 560px; font-weight: 300; letter-spacing: 0.03em; } .eyebrow { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.8rem; } .eyebrow.centered::before { display: none; } /* ── BUTTONS ── */ .btn-primary { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--charcoal); background: var(--gold); border: none; padding: 0.85rem 2.2rem; cursor: pointer; transition: background 0.2s; } .btn-primary:hover { background: var(--gold-light); } .btn-ghost { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 300; color: var(--gold-light); background: none; border: 1px solid rgba(184,150,90,0.4); padding: 0.85rem 2.2rem; cursor: pointer; transition: all 0.2s; } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } /* ── HERO ── */ .hero { display: grid; grid-template-columns: 52% 48%; min-height: 72vh; } .hero-left { display: flex; flex-direction: column; justify-content: center; padding: 3.5rem var(--pad-x) 3.5rem; background: var(--charcoal); } .hero-eyebrow { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1.4rem; display: flex; align-items: center; gap: 0.9rem; } .hero-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold); } .hero-headline { font-family: var(--serif); font-size: clamp(3rem,5vw,6rem); font-weight: 300; line-height: 1.05; margin-bottom: 1.4rem; letter-spacing: -0.01em; } .hero-subhead { font-size: 0.94rem; letter-spacing: 0.04em; color: var(--mist); line-height: 1.85; max-width: 400px; margin-bottom: 2.2rem; font-weight: 300; } .hero-cta-row { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 3.5rem; } .hero-stats { display: flex; gap: 3rem; padding-top: 2rem; border-top: 1px solid rgba(184,150,90,0.2); } .hero-stat-num { font-family: var(--serif); font-size: 1.9rem; font-weight: 300; color: var(--gold-light); line-height: 1; margin-bottom: 0.2rem; } .hero-stat-label { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mist); } .hero-right { position: relative; overflow: hidden; background: var(--charcoal-mid); } /* ── VP STRIP ── */ .vp-strip { background: var(--charcoal-mid); border-top: 1px solid rgba(184,150,90,0.1); border-bottom: 1px solid rgba(184,150,90,0.1); } .vp-strip-inner { display: grid; grid-template-columns: repeat(5,1fr); } .vp-item { padding: 1.8rem 1.8rem; border-right: 1px solid rgba(184,150,90,0.1); } .vp-item:last-child { border-right: none; } .vp-inline-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; } .vp-roman { font-family: var(--serif); font-size: 0.85rem; font-weight: 400; color: var(--gold-light); line-height: 1; letter-spacing: 0.08em; } .vp-label { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0; font-weight: 400; } .vp-text { font-size: 0.94rem; color: var(--mist); line-height: 1.85; font-weight: 300; } /* ── PILLAR PREVIEW CARDS ── */ .pillars-preview { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(184,150,90,0.15); } .pillar-preview-card { background: var(--charcoal); padding: 1.5rem 1.5rem; cursor: pointer; transition: background 0.2s; position: relative; } .pillar-preview-card:hover { background: var(--charcoal-mid); } .pp-num { font-family: var(--serif); font-size: 2.0rem; font-weight: 300; color: rgba(184,150,90,0.18); line-height: 1; margin-bottom: 0.9rem; } .pp-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--cream); margin-bottom: 0.2rem; line-height: 1.2; } .pp-tag { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.8rem; } .pp-desc { font-size: 0.94rem; color: var(--mist); line-height: 1.8; font-weight: 300; } .pp-new { position: absolute; top: 1rem; right: 1rem; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--gold); color: var(--charcoal); padding: 0.22rem 0.55rem; font-weight: 600; } /* ── MARQUEE ── */ .marquee-strip { background: var(--gold); padding: 0.7rem 0; overflow: hidden; } .marquee-track { display: flex; animation: marquee 40s linear infinite; width: max-content; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-item { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--charcoal); padding: 0 1.8rem; font-weight: 600; white-space: nowrap; } .marquee-dot { color: var(--charcoal); opacity: 0.4; } /* ── SERVICES PAGE ── */ .services-page-header { padding: 4rem var(--pad-x) 3rem; background: var(--charcoal); border-bottom: 1px solid rgba(184,150,90,0.12); } .pillar-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(184,150,90,0.12); } .pillar-nav-btn { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; color: var(--mist); background: rgba(184,150,90,0.06); border: 1px solid rgba(184,150,90,0.2); padding: 0.65rem 1rem; cursor: pointer; transition: all 0.18s; display: flex; align-items: center; gap: 0.45rem; width: 100%; } .pillar-nav-btn:hover { color: var(--cream); background: rgba(184,150,90,0.16); border-color: rgba(184,150,90,0.5); } .pillar-nav-num { font-family: var(--serif); font-size: 0.88rem; font-weight: 300; color: var(--gold-light); line-height: 1; } .sp-pillar { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid rgba(184,150,90,0.1); } .sp-identity { padding: 2.5rem 2rem 2.5rem 2.5rem; border-right: 1px solid rgba(184,150,90,0.1); display: flex; flex-direction: column; gap: 0.4rem; } .sp-num { font-family: var(--serif); font-size: 3rem; font-weight: 300; color: rgba(184,150,90,0.18); line-height: 1; margin-bottom: 0.4rem; } .sp-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--cream); line-height: 1.2; } .sp-sub { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); margin-top: 0.2rem; } .sp-ref { font-size: 0.75rem; color: var(--stone); line-height: 1.5; border-top: 1px solid rgba(184,150,90,0.1); padding-top: 0.8rem; margin-top: 0.8rem; } .sp-deep { margin-top: auto; padding-top: 1.2rem; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); background: none; border: none; cursor: pointer; text-align: left; padding-left: 0; transition: color 0.2s; } .sp-deep:hover { color: var(--cream); } .sp-body { padding: 2.5rem; display: flex; flex-direction: column; gap: 1.4rem; } .sp-value { border-left: 2px solid rgba(184,150,90,0.3); padding-left: 1.2rem; } .sp-value p { font-family: var(--serif); font-size: 1.05rem; font-style: italic; color: var(--cream-dim); line-height: 1.65; font-weight: 300; } .sp-value em { color: var(--gold-light); font-style: italic; } .sp-delivers { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .sp-col-label { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.75rem; font-weight: 400; } .sp-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .sp-col ul li { font-size: 0.94rem; color: var(--mist); line-height: 1.65; padding-left: 0.9rem; position: relative; } .sp-col ul li::before { content: "›"; position: absolute; left: 0; color: var(--gold-light); } .sp-col p { font-size: 0.94rem; color: var(--mist); line-height: 1.8; font-weight: 300; margin-bottom: 1rem; } .sp-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; } .sp-tags span { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); border: 1px solid rgba(184,150,90,0.35); padding: 0.22rem 0.6rem; font-weight: 400; } /* ── APPROACH ── */ .approach-card { background: var(--charcoal-light); padding: 2rem; border-left: 3px solid transparent; transition: border-color 0.2s; } .approach-card:hover { border-left-color: var(--gold); } .approach-roman { font-family: var(--serif); font-size: 1.7rem; font-weight: 300; color: var(--gold-light); font-style: italic; margin-bottom: 0.9rem; } .approach-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; color: var(--cream); margin-bottom: 0.6rem; } .approach-text { font-size: 0.94rem; color: var(--mist); line-height: 1.85; font-weight: 300; } /* ── CREDENTIALS / REFERENCE LETTERS ── */ .ref-letter { padding: 2.5rem; } .ref-letter.alt { background: var(--charcoal-mid); } .ref-letter-grid { display: grid; grid-template-columns: 190px 1fr; gap: 2.5rem; align-items: start; } .ref-org { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.3rem; } .ref-text { font-family: var(--serif); font-size: 1.0rem; font-style: italic; color: var(--cream-dim); line-height: 1.65; } .ref-meta-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(184,150,90,0.5); margin-top: 0.9rem; margin-bottom: 0.2rem; } .ref-meta-value { font-size: 0.82rem; color: var(--mist); } .ref-certified { border-top: 1px solid rgba(184,150,90,0.12); padding-top: 1rem; margin-top: 1.2rem; } .ref-cert-label { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.6rem; } .ref-cert-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .ref-cert-tag { font-size: 0.75rem; color: var(--mist); background: rgba(184,150,90,0.06); border: 1px solid rgba(184,150,90,0.15); padding: 0.22rem 0.6rem; } /* ── FOUNDER ── */ .founder-bio p { font-size: 0.94rem; color: var(--mist); line-height: 1.9; font-weight: 300; letter-spacing: 0.03em; margin-bottom: 1rem; } .founder-bio p:last-child { margin-bottom: 0; } /* ── CAREER GRID ── */ .career-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(184,150,90,0.15); } .career-cell { background: var(--charcoal-mid); padding: 1.4rem 1.6rem; cursor: default; transition: background 0.15s; } .career-cell:hover { background: var(--charcoal-light); } /* ── EDUCATION ── */ .edu-row { display: flex; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(184,150,90,0.1); } .edu-icon { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid rgba(184,150,90,0.35); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 0.7rem; color: var(--gold-light); } .edu-degree { font-family: var(--serif); font-size: 1.0rem; color: var(--cream); margin-bottom: 0.1rem; } .edu-school { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--gold-light); text-transform: uppercase; } /* ── REGISTRATION ── */ .reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(184,150,90,0.15); } .reg-cell { background: var(--charcoal-mid); padding: 1.1rem 1.4rem; } .reg-cell.reg-wide { grid-column: 1 / -1; } .reg-label { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.25rem; } .reg-value { font-family: var(--serif); font-size: 1.0rem; color: var(--cream-dim); line-height: 1.3; } .reg-value.pending { color: var(--mist); font-style: italic; } /* ── VALUES GRID ── */ .values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(184,150,90,0.15); } .value-card { background: var(--charcoal); padding: 2rem 1.8rem; } .value-num { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; color: var(--gold-light); line-height: 1; margin-bottom: 0.9rem; } .value-title { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); margin-bottom: 0.6rem; font-weight: 400; } .value-text { font-size: 0.94rem; color: var(--mist); line-height: 1.85; font-weight: 300; } /* ── VISION / MISSION ── */ .vm-text { font-family: var(--serif); font-size: clamp(1.2rem,1.8vw,1.7rem); font-weight: 300; color: var(--cream); line-height: 1.4; margin-bottom: 1.1rem; } .vm-sub { font-size: 0.94rem; color: var(--mist); line-height: 1.85; font-weight: 300; } /* ── CONTACT ── */ .contact-detail-list { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2rem; } .contact-row { display: flex; gap: 1.1rem; align-items: flex-start; } .contact-lbl { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); min-width: 72px; margin-top: 0.1rem; } .contact-val { font-family: var(--serif); font-size: 1.0rem; color: var(--cream-dim); line-height: 1.4; } .contact-card { background: var(--charcoal-mid); border: 1px solid rgba(184,150,90,0.15); border-top: 3px solid var(--gold); padding: 2.5rem; } .contact-card-head { font-family: var(--serif); font-size: 1.3rem; font-weight: 300; color: var(--cream); line-height: 1.4; margin-bottom: 1.2rem; } .contact-note { font-size: 0.94rem; color: var(--mist); line-height: 1.8; margin-bottom: 1.2rem; } /* ── FOOTER ── */ footer { background: var(--charcoal); border-top: 1px solid rgba(184,150,90,0.1); padding: 2rem var(--pad-x); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-copy { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--stone); } .footer-tag { font-family: var(--serif); font-size: 0.94rem; font-style: italic; color: rgba(184,150,90,0.4); } .footer-nav { display: flex; gap: 1.5rem; } .footer-nav button { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); background: none; border: none; cursor: pointer; transition: color 0.2s; } .footer-nav button:hover { color: var(--gold-light); } /* ── TOOLTIPS ── */ #pillar-tooltip, #career-tooltip { display: none; position: fixed; z-index: 2000; background: var(--charcoal-light); border: 1px solid rgba(184,150,90,0.2); border-top: 2px solid var(--gold); padding: 1.4rem 1.6rem; width: 360px; max-width: 90vw; pointer-events: none; } #pt-num { font-family: var(--serif); font-size: 2.0rem; font-weight: 300; color: rgba(184,150,90,0.22); line-height: 1; margin-bottom: 0.4rem; } #pt-name { font-family: var(--serif); font-size: 1.1rem; color: var(--cream); margin-bottom: 0.2rem; line-height: 1.2; } #pt-tag { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.8rem; } #pt-value { font-family: var(--serif); font-size: 1.0rem; font-style: italic; color: var(--cream-dim); line-height: 1.6; margin-bottom: 0.9rem; border-left: 1px solid rgba(184,150,90,0.25); padding-left: 0.75rem; } .pt-section-label { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(184,150,90,0.55); margin-bottom: 0.4rem; margin-top: 0.7rem; } #pt-delivers li { font-size: 0.94rem; color: var(--mist); line-height: 1.65; padding-left: 0.8rem; position: relative; font-weight: 300; } #pt-delivers li::before { content:"›"; position:absolute;left:0;color:var(--gold-light); } #pt-engagement { font-size: 0.94rem; color: var(--mist); line-height: 1.7; font-weight: 300; } #pt-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.9rem; } .tooltip-tag { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); border: 1px solid rgba(184,150,90,0.3); padding: 0.2rem 0.55rem; font-weight: 400; } #career-tooltip { width: 320px; } #tt-period { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 0.3rem; } #tt-role { font-family: var(--serif); font-size: 1.05rem; color: var(--cream); margin-bottom: 0.7rem; line-height: 1.2; } #tt-summary { font-size: 0.94rem; color: var(--mist); line-height: 1.8; font-weight: 300; } #tt-divider { font-family: var(--sans); font-size: 0.75rem; color: rgba(184,150,90,0.45); letter-spacing: 0.1em; margin: 0.8rem 0 0.4rem; padding-top: 0.7rem; border-top: 1px solid rgba(184,150,90,0.12); } #tt-relevance { font-family: var(--serif); font-size: 0.94rem; font-style: italic; color: var(--cream-dim); line-height: 1.6; } /* ── LANDING PAGE ── */ .cl-lines { position:absolute;inset:0;pointer-events:none;overflow:hidden; } .cl-lines span { position:absolute;background:rgba(184,150,90,0.05); } .cl-h { left:0;right:0;height:1px; } .cl-v { top:0;bottom:0;width:1px; } .c-inner { text-align:center;max-width:640px;padding:2rem;position:relative;z-index:1; } .c-brand { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 2.5rem; display:flex;align-items:center;justify-content:center;gap:1rem; } .c-brand::before,.c-brand::after { content:'';display:block;width:36px;height:1px;background:var(--gold);opacity:0.5; } .c-title { font-family: var(--serif); font-size: clamp(4rem,10vw,8rem); font-weight:300; color:var(--cream); line-height:0.95; letter-spacing:0.02em; margin-bottom:0.4rem; } .c-sub { font-family: var(--serif); font-size: clamp(1.6rem,4vw,2.8rem); font-weight:300; font-style:italic; color:var(--gold-light); margin-bottom:2.5rem; } .c-body { font-family: var(--sans); font-size: 0.94rem; letter-spacing:0.06em; color:var(--mist); line-height:1.85; margin-bottom:3rem; } .c-btn { font-family: var(--sans); font-size: 0.82rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--charcoal); background:var(--gold); border:none; padding:1rem 3rem; cursor:pointer; font-weight:600; transition:background 0.2s; display:inline-block; margin-bottom:1.8rem; } .c-btn:hover { background: var(--gold-light); } .c-logo-wrap { margin-bottom: 2.5rem; display:flex;flex-direction:column;align-items:center;gap:0.6rem; } .c-logo-svg { width:88px;height:88px;margin-bottom:0.4rem; } .c-logo-name { font-family: var(--serif); font-size: 1.3rem; font-weight:400; color:var(--cream); letter-spacing:0.18em; text-transform:uppercase; } .c-logo-tag { font-family: var(--sans); font-size: 0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-light); opacity:0.8; } .c-divider { width:48px;height:1px;background:rgba(184,150,90,0.35);margin:0 auto 2.5rem; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .nav-pages { display: none; } .nav-burger { display: flex; } } @media (max-width: 600px) { nav { height: 56px; } .nav-logo { padding: 0 1rem; } .nav-right { padding: 0 1rem; gap: 0.6rem; } .nav-drawer { top: 56px; } .page { padding-top: 56px; } } @media (max-width: 1100px) { :root { --pad-x: 2.5rem; --pad-y: 3rem; } .hero { grid-template-columns: 1fr; min-height: auto; } .hero-left { padding: 3.5rem 2.5rem 2.5rem; } .hero-right { height: 38vw; min-height: 220px; } .vp-strip-inner { grid-template-columns: 1fr 1fr 1fr; } .pillars-preview { grid-template-columns: 1fr 1fr; } .sp-pillar { grid-template-columns: 180px 1fr; } .sp-identity { padding: 2rem 1.5rem 2rem 2rem; } .sp-body { padding: 2rem; } .sp-delivers { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .career-grid { grid-template-columns: 1fr 1fr; } .values-grid { grid-template-columns: 1fr 1fr; } .reg-grid { grid-template-columns: 1fr 1fr; } .ref-letter-grid { grid-template-columns: 1fr; gap: 1.5rem; } } @media (max-width: 700px) { :root { --pad-x: 1.2rem; --pad-y: 2.5rem; } .hero-left { padding: 2rem 1.2rem 1.5rem; } .hero-right { height: 48vw; min-height: 180px; } .hero-stats { flex-wrap: wrap; gap: 0.8rem 1.5rem; } .hero-cta-row { flex-direction: column; align-items: flex-start; gap: 0.7rem; } .vp-strip-inner { grid-template-columns: 1fr 1fr; } .pillars-preview, .values-grid, .career-grid, .reg-grid { grid-template-columns: 1fr; } .sp-pillar { grid-template-columns: 1fr; } .sp-identity { border-right: none; border-bottom: 1px solid rgba(184,150,90,0.1); padding: 1.5rem 1.2rem; } .sp-body { padding: 1.5rem 1.2rem; } .sp-delivers { grid-template-columns: 1fr; } .pillar-nav { grid-template-columns: 1fr 1fr; } .services-page-header { padding: 2rem 1.2rem; } .footer-nav { flex-wrap: wrap; gap: 0.5rem; } div[style*="grid-template-columns: 280px 1fr"] { grid-template-columns: 1fr !important; gap: 2rem !important; } div[style*="grid-template-columns:1fr 1fr"], div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } div[style*="grid-template-columns: repeat(3,1fr)"], div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; } div[style*="grid-template-columns: repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; } div[style*="grid-template-columns: 200px 1fr"] { grid-template-columns: 1fr !important; gap: 1rem !important; } div[style*="grid-template-columns: repeat(6,1fr)"] { grid-template-columns: repeat(3,1fr) !important; } section.pad { padding: 2rem 1.2rem; } } @media (max-width: 480px) { :root { --pad-x: 1rem; } .pillar-nav { grid-template-columns: 1fr; } .vp-strip-inner { grid-template-columns: 1fr; } div[style*="grid-template-columns: repeat(6,1fr)"] { grid-template-columns: repeat(2,1fr) !important; } }