Meridian

1. COLORS — Use these exact hex tokens: --bg #FAFAFA (page background, a near-white warm canvas), --surface #FFFFFF (cards, metrics band), --navy #1B3A6B (deep corporate blue for primary buttons, section headings, hero stats, nav logo), --navy-deep #13294C (button hover, approach section full bleed, footer background, final CTA section), --text #16202E (primary text, deep blue-black), --muted #5E6675 (secondary/descriptive text throughout), --gold #B68A3E (eyebrow labels, service row numbers, gold tick bar, arrow hover, CTA button), --border #E4E7EC (hairline section dividers, card borders, hero side-panel separator), --steel #C8CDD6 (arrow icons default, nav rule, fine print areas). No gradient on the body itself — two solid background levels create the zoning. The overall palette mood is: "blue-suited authority on a parchment ledger." 2. TYPOGRAPHY — Load "Inter" from Google Fonts (weights 400, 500, 600, 700) — use it for both headings and body; there is no separate Display variant import, just Inter. Type scale: H1 64px / weight 700 / line-height 1.06 / letter-spacing -0.035em; H2 44px / weight 700 / line-height 1.1 / letter-spacing -0.03em; H3 (testimonial quote) 30px / weight 600 / line-height 1.35 / letter-spacing -0.02em; H4 (service name) 24px / weight 600 / line-height 1.3 / letter-spacing -0.02em; Body-L 19px / weight 400 / line-height 1.65; Body 16px / weight 400 / line-height 1.65; Eyebrow/label 12px / weight 600 / letter-spacing 0.10em / UPPERCASE / color #B68A3E (gold); Caption 13px / weight 400 / line-height 1.5. Special treatment: in the H1, wrap the phrase "measurable outcomes" in an <em> tag styled font-style:normal; color:#1B3A6B so it renders as the deep navy against the dark text — no gradient, just a color shift. Footer column headers use 12px / weight 600 / letter-spacing 0.06em / UPPERCASE / color rgba(255,255,255,0.4). 3. PAGE SECTIONS — Build sections in this exact order: sticky nav → hero (two-column: copy left, 3 stats right) → client logos strip ("Trusted by leaders at" + 5 company names) → services (numbered rows 01–06 with title and outcome line) → approach (full-bleed navy section, 3-column grid: Diagnose / Design / Deliver) → case studies (3 result cards with sector label, big result figure, metric name, description) → metrics band (4 large numbers on --surface background) → team/partners (4 headshots in a grid) → testimonial (2-column: left label + gold tick, right quote + attribution) → FAQ (2-column: left heading, right accordion with 4 questions) → final CTA (full-bleed --navy-deep, centered, gold eyebrow, white H2, gold primary button) → footer (4-column on --navy-deep). The services section must list exactly 6 rows: 01 Growth Strategy, 02 Operational Excellence, 03 Digital Transformation, 04 M&A & Diligence, 05 Organisation Design, 06 Sustainability Strategy. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The most visually distinctive element is the sticky navigation bar with frosted-glass transparency. Exact CSS: background: rgba(250,250,250,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid #E4E7EC; position: sticky; top: 0; z-index: 100; padding: 0 32px; height: 70px (inner .ni container). There is no box-shadow on the nav — the border-bottom hairline alone creates the separation. Nav items use color #5E6675 at 14px weight 500, transitioning to color #16202E on hover over 0.2s. The secondary signature is the gold tick bar (a 32px × 2px block, background #B68A3E, margin-bottom 24px) that precedes eyebrow labels in the hero, testimonial, and FAQ sections — this restrained gold rule anchors every major copy block without decoration. Combined, these two elements define the aesthetic: discipline over embellishment. 5. COMPONENT SPECS — Primary button (.btn-navy): background #1B3A6B, color #ffffff, font-size 14px, font-weight 600, padding 11px 22px (nav) / 14px 28px (hero + CTA), border-radius 4px, border none; hover: background #13294C, transform translateY(-1px), transition background 0.2s + transform 0.15s. Gold CTA button (.btn-gold): background #B68A3E, color #ffffff, padding 16px 34px, border-radius 4px; hover: filter brightness(1.08), transform translateY(-1px). Secondary/outline button (.btn-out): background transparent, color #1B3A6B, border 1px solid #C8CDD6, padding 14px 28px, border-radius 4px; hover: border-color #1B3A6B. Case study cards: background #FFFFFF, border 1px solid #E4E7EC, border-radius 0 (no radius on cards), padding 32px; hover: box-shadow 0 14px 40px rgba(22,32,46,0.07), transform translateY(-3px), transition 0.2s. Service rows: no card container — full-width horizontal rules, padding 32px 0, hover shifts padding-left to 12px and shows a left-edge gradient linear-gradient(90deg,rgba(27,58,107,0.02),transparent). 6. COPY VOICE — Target audience: C-suite and VP-level leaders at mid-to-large enterprises, whose core pain point is that consultancies deliver polished decks then disappear, leaving implementation to struggle. Four example headlines that fit this brand: "Complex problems, turned into measurable outcomes" (hero H1 with 'measurable outcomes' in navy); "We don't hand you a strategy. We change the outcome." (approach H2); "Bring us the problem that won't move." (final CTA H2); "Senior people do the work." (team section sub-line). Five banned generic phrases for this consulting niche: "End-to-end solutions", "Unlock your potential", "We partner with you", "Accelerate your digital journey", "Trusted by thousands of companies". Voice principles: no passive constructions, no consultant jargon fog, every claim quantified or attributed, and a faint undertone of polite refusal ("we'd rather refer you than fake it"). 7. BACKGROUND ZONES — Three distinct background levels. Zone 1: #FAFAFA — the base page background used for hero, logos, services, case studies, team, testimonial, FAQ sections. Zone 2: #FFFFFF — used for the metrics band (metrics-sec) and all card surfaces. Zone 3: #13294C (--navy-deep) — used for the approach section (which is actually #1B3A6B navy, not navy-deep), the final CTA section (background #13294C), and the footer (background #13294C). Clarification: the approach section uses --navy #1B3A6B as full-bleed background; the CTA + footer use --navy-deep #13294C. Every section is separated by a 1px border-bottom: #E4E7EC hairline divider on the #FAFAFA sections — these thin lines do the structural work that other templates assign to drop shadows. No texture or pattern anywhere — the grid's whitespace IS the decoration. No gradient bands; approach section bleeds edge-to-edge at full viewport width. 8. SCROLL ANIMATIONS — Every element with class .reveal starts at opacity 0 and transform translateY(22px), then transitions to opacity 1 and transform none when it enters the viewport (IntersectionObserver threshold 0.1). Transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1) — note this is NOT the standard material easing; it is a spring-like ease-out. Duration 600ms. Elements that animate: all section headings, body paragraphs, stat blocks, service rows, approach cells, case cards, metric numbers, team cards, testimonial, FAQ list, and CTA. Card stagger via data-delay attribute: data-delay="1" adds transition-delay 0.1s, data-delay="2" adds 0.2s, data-delay="3" adds 0.3s — maximum 3 stagger levels. Slide distance is 22px (not 16px as stated in design doc — use 22px per HTML). Service row hover: padding-left shifts from 0 to 12px over 0.25s, arrow translates +4px over 0.2s. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Three breakpoints: Desktop ≥1024px (full layout), Tablet 768–1023px, Mobile ≤767px. Hero: desktop 2-col grid (1.3fr 0.7fr) → tablet/mobile 1-col; hero side stats become a horizontal flex row on tablet, vertical column on mobile. Services: desktop 4-col grid (80px number, 1fr name, 1.4fr desc, 40px arrow) → tablet collapses to 2-col (50px + 1fr), hiding .serv-desc and .serv-arrow. Approach: 3-col grid → 1-col on tablet (each cell full width). Case studies: 3-col → 1-col on tablet. Metrics: 4-col → 2-col on tablet → 1-col on mobile. Team: 4-col → 2-col on tablet → 1-col on mobile. H1 size: 64px desktop → 48px tablet → 36px mobile. H2: 44px → 32px mobile. FAQ + testimonial: 2-col grid → 1-col on tablet. Nav links (.nl): visible desktop/tablet → display:none on mobile (≤767px). Buttons remain inline on desktop and tablet; on mobile, CTA row wraps via flex-wrap:wrap. Footer: 4-col (2fr 1fr 1fr 1fr) → 2-col on tablet → 1-col on mobile. 10. CRITICAL CSS — Always include these exact overrides: Add a <style> tag before </head> containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. Additionally, the main .wrap container must have padding: 0 80px on desktop (NOT the 32px side gutters listed in the design doc — the HTML uses 80px for the wrap and 32px only for the nav inner container .ni). The nav inner uses max-width: 1200px with margin: 0 auto inside its own 32px-padded nav element. Section padding is 110px top/bottom on desktop for most content sections, 90px for hero bottom, 48px for logos, 90px for metrics, 130px for final CTA, 64px top / 40px bottom for footer. 11. SEMANTIC HTML — Document structure: <header> is not used — the <nav> sits directly before <main> as a sibling. <main> contains one <section> per block with descriptive class names (hero, logos, serv-sec, appr-sec, case-sec, metrics-sec, team-sec, testi-sec, faq-sec, cta-sec). Case study cards use <article class="case-card"> inside the section. Exactly one <h1> in the hero. Heading hierarchy: h1 hero → h2 per section → no h3 skipped. SEO: <title> = "Meridian — Strategy That Turns Into Measurable Outcomes" (55 chars, within limit). <meta name="description"> = "Meridian is a senior strategy consultancy that turns complex enterprise problems into measurable outcomes. Growth, operations, and transformation for leaders who need results." (172 chars — trim to: "Senior strategy consultancy turning complex enterprise problems into measurable outcomes. Growth, operations, transformation."). og:image: 1200×630px, navy background #1B3A6B with Meridian wordmark in white centered, no busy graphics. Every team photo and case study chart gets descriptive alt text: e.g. alt="Eleanor Whitfield, Managing Partner at Meridian" and alt="Chart showing 31% reduction in cost-to-serve for retail banking client". 12. FOOTER STRUCTURE — Four columns on background #13294C (--navy-deep), padding 64px top / 40px bottom. Column 1 (2fr): Meridian wordmark in white at 20px weight 700, followed by a short brand description paragraph at 14px / color rgba(255,255,255,0.5) / max-width 300px. Column 2 (1fr): heading "SERVICES" at 12px / weight 600 / letter-spacing 0.06em / uppercase / color rgba(255,255,255,0.4); links: Growth, Operations, Transformation, M&A. Column 3 (1fr): heading "FIRM"; links: Approach, Partners, Case studies, Insights. Column 4 (1fr): heading "OFFICES"; links: London, New York, Singapore, Contact. All footer links: color rgba(255,255,255,0.7), font-size 14px, text-decoration none; hover: color #B68A3E (gold), transition color 0.2s. Below the 4-col grid: a 1px border-top rgba(255,255,255,0.12), padding-top 24px, with a flex row (space-between) containing: left "© 2025 Meridian Partners LLP · Registered in England & Wales" and right "Privacy · Terms · Modern Slavery Statement" — both at 12px / color rgba(255,255,255,0.35). No social icons. No newsletter input. 13. UNIQUE INTERACTIVE — The FAQ accordion (section.faq-sec) is the primary interactive element. It uses 4 question rows, each a <div class="faq-item"> with a <button class="faq-q"> and a <div class="faq-a">. Default state: .faq-a has display:none; the button shows a '+' via CSS ::after { content: '+'; font-size: 22px; color: #B68A3E; }. On click: JavaScript toggles the classes 'open' on both the button and the answer div — .faq-q.open::after { content: '−'; } and .faq-a.open { display: block; }. There is no CSS transition on height (no smooth expand) — the answer snaps open instantly via display toggle. Only one question can be open at a time: clicking any button does NOT auto-close others in the provided HTML (each toggles independently), but for an improved implementation add logic to close other open items before opening the clicked one. ARIA requirements: each <button> needs aria-expanded="false" (toggled to "true" when open) and aria-controls pointing to the answer div's id; each answer div needs id and role="region". The gold '+' / '−' indicator must remain visible regardless of focus state. Button height is set by padding: 22px 0 top/bottom with no fixed height. — Prompt set generated with Claude Sonnet 4.6 —