/* ========================================================================== Alliance Prime - legacy page styles -------------------------------------------------------------------------- Interim stylesheet for the inner pages that have not yet been converted to Tailwind + ACF (About, Services, service pages, Blog, Careers, Contact). It is the original front-end stylesheet MINUS the header, footer and floating-action rules - those are now built with Tailwind utilities in header.php / footer.php and shared by every page. Loaded only on non-front-page templates. Delete a rule block from here as the page that depends on it is converted. ========================================================================== */ /* ========================================================================== Alliance Prime — Accounting & Tax Consultancy, Dubai Homepage stylesheet -------------------------------------------------------------------------- TABLE OF CONTENTS 01. Design tokens 02. Reset & base elements 03. Layout & utility helpers 04. Scroll-reveal motion 05. Buttons & links 06. Site header (utility bar + sticky nav) 07. Hero 08. Credentials strip 09. About 10. Services & quick links 11. Why choose us 12. Statistics 13. Industries 14. Process 15. Testimonials 16. Client logos 17. CTA band 18. FAQ 19. Insights / blog 20. Contact 21. Footer 22. Floating quick actions 23. Reduced motion & print ========================================================================== */ /* ========================================================================== 01. DESIGN TOKENS ========================================================================== */ :root { /* --- Brand palette ------------------------------------------------------- Sampled from the logo artwork itself (images/brand/alliance-logo.webp): #1B4077 is the navy of the "Alliance" wordmark, #243863 the deeper navy of the mark's shaded facet, and #D21E3B the red of "Prime". Every tint and shade below is a step away from one of those three, so nothing on the site carries a colour the identity does not. */ --navy-950: #0A1630; --navy-900: #10204A; --navy-800: #243863; /* logo mark, shaded facet */ --navy-700: #1B4077; /* brand navy — logo wordmark */ --navy-600: #23529A; --navy-500: #2F68BE; --navy-400: #5B8DDB; --navy-300: #9DBEF3; --red-700: #931527; --red-600: #B31A30; --red-500: #D21E3B; /* brand red — logo "Prime" */ --red-400: #E3435C; --red-200: #FFA9B6; /* --- Neutrals ----------------------------------------------------------- Cool greys tinted towards the brand navy, so borders and surfaces sit in the same family as the headings instead of reading as flat grey. */ --white: #FFFFFF; --tint-50: #F6F8FC; --tint-100: #EAF0F9; --tint-200: #D7E2F2; --line: #E4EAF3; --line-strong: #CBD7EA; --ink: #0E1B36; --body: #3F4D69; /* body copy — 8.4:1 on white */ --muted: #5C6A85; /* secondary — 5.5:1 on white */ /* --- Semantic surfaces ------------------------------------------------- */ --surface: var(--white); --surface-alt: var(--tint-50); --brand: var(--navy-700); --accent: var(--red-500); /* --- Gradients ---------------------------------------------------------- */ --grad-navy: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%); --grad-navy-soft: linear-gradient(140deg, #214A8C 0%, #1A3364 52%, #0D1B3D 100%); --grad-red: linear-gradient(135deg, var(--red-500) 0%, var(--red-700) 100%); --grad-line: linear-gradient(90deg, var(--red-500), var(--navy-600)); --grad-sheen: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%); /* Film grain — a 200px tile of fractal noise, used at very low opacity to stop large dark areas from looking like flat vector fills. */ --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); /* --- Typography ---------------------------------------------------------- The live site pairs Figtree with Roboto; the same pairing is used here. Figtree carries every display, heading and UI label (its tighter geometric forms hold up at large sizes), Roboto carries running copy. */ --font-head: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-body: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* One fluid scale: each step runs from a phone size to a desktop size, so the hierarchy stays in proportion without a breakpoint per heading. */ --fs-h2: clamp(1.75rem, 1.3rem + 1.85vw, 2.625rem); --fs-h3: clamp(1.125rem, 1.05rem + 0.32vw, 1.3rem); --fs-lead: clamp(1.05rem, 1rem + 0.28vw, 1.1875rem); --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --lh-tight: 1.12; /* display type */ --lh-snug: 1.3; /* card titles, short headings */ --lh-copy: 1.7; /* UI copy */ --lh-prose: 1.8; /* long-form reading */ --measure: 62ch; /* longest comfortable line of copy */ /* --- Spacing scale (4px grid) ------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3.5rem; --sp-9: 5rem; --section-y: clamp(3rem, 5vw, 4.5rem); --gutter: clamp(1.25rem, 4vw, 2.5rem); --card-pad: clamp(1.5rem, 2.4vw, 2.125rem); /* one inner padding for every card */ --grid-gap: clamp(1rem, 2vw, 1.5rem); /* one gutter for every card grid */ --container: 1240px; /* --- Header metrics ------------------------------------------------------- One source of truth for the sticky bar: the nav row height, the compact height it settles into once scrolled, and the lock-up height in each. Also drives scroll-padding, so anchor jumps land clear of the bar. */ --nav-h: 84px; --nav-h-stuck: 70px; --logo-h: 46px; --logo-h-stuck: 38px; --scroll-offset: calc(var(--nav-h-stuck) + 1.5rem); /* Footprint of the fixed quick-action cluster (two 54px buttons + gap, plus its offset from the viewport edge). Kept in sync with .floating-actions so the page end can reserve room for it. */ --fab-inset: clamp(.85rem, 2vw, 1.5rem); --fab-reserve: calc(54px * 2 + .6rem + var(--fab-inset)); /* --- Radii --------------------------------------------------------------- */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* --- Shadows (two-layer: contact shadow + ambient spread) ---------------- Tinted with the brand ink rather than black and kept low in opacity: depth should be felt before it is noticed. */ --sh-xs: 0 1px 2px rgba(14, 27, 54, .05); --sh-sm: 0 1px 2px rgba(14, 27, 54, .05), 0 6px 16px -8px rgba(14, 27, 54, .10); --sh-md: 0 2px 4px rgba(14, 27, 54, .04), 0 14px 32px -14px rgba(14, 27, 54, .18); --sh-lg: 0 4px 8px rgba(14, 27, 54, .05), 0 30px 60px -28px rgba(14, 27, 54, .28); --sh-red: 0 1px 2px rgba(147, 21, 39, .24), 0 10px 22px -12px rgba(210, 30, 59, .55); --ring-inset: inset 0 1px 0 rgba(255, 255, 255, .5); /* --- Motion --------------------------------------------------------------- */ --ease: cubic-bezier(.22, .8, .3, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: .18s var(--ease); --t-base: .32s var(--ease); --t-slow: .55s var(--ease); } /* ========================================================================== 02. RESET & BASE ELEMENTS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--scroll-offset); /* clears the sticky nav on anchor jumps */ } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-copy); color: var(--body); background: var(--surface); font-feature-settings: "kern", "liga", "calt"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--ink); line-height: var(--lh-tight); letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; } h2 { font-size: var(--fs-h2); letter-spacing: -0.026em; } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.015em; } p { text-wrap: pretty; } a { color: var(--navy-600); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--red-500); } /* A phone number split across two lines reads as two numbers; the contact column is narrow enough at 360px for that to happen. */ a[href^="tel:"] { white-space: nowrap; } ul, ol { list-style: none; padding: 0; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } sup { font-size: .55em; vertical-align: super; line-height: 0; } ::selection { background: var(--navy-600); color: var(--white); } :focus-visible { outline: 3px solid var(--navy-500); outline-offset: 3px; border-radius: 4px; } /* ========================================================================== 03. LAYOUT & UTILITY HELPERS ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .section--tint { background: var(--surface-alt); isolation: isolate; } /* Faint blueprint grid on tinted sections, faded out towards the edges */ .section--tint::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(90deg, rgba(27, 64, 119, .05) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(27, 64, 119, .05) 0 1px, transparent 1px 72px); -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%); } /* Film-grain overlay for dark surfaces */ .grain, .why::after, .cta-band::after, .contact::after, .site-footer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain-url); background-size: 200px 200px; opacity: .05; mix-blend-mode: overlay; } /* Section headings ---------------------------------------------------------*/ .section__head { max-width: 46rem; margin-inline: auto; margin-bottom: clamp(2.75rem, 4.5vw, 4rem); text-align: center; } .section__head--split { max-width: none; text-align: left; display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-end; justify-content: space-between; } .section__head--light .section__title { color: var(--white); } .section__head--light .section__lead { color: rgba(255, 255, 255, .8); } .section__title { margin-bottom: var(--sp-4); } .section__lead { font-size: var(--fs-lead); color: var(--muted); } /* Eyebrow label ------------------------------------------------------------*/ .eyebrow { display: inline-flex; align-items: flex-start; /* keeps the dot on the first line when the pill wraps */ gap: var(--sp-2); margin-bottom: var(--sp-4); padding: .42rem 1rem .42rem .72rem; border-radius: var(--r-pill); background: var(--tint-100); border: 1px solid rgba(27, 64, 119, .10); color: var(--navy-700); font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .eyebrow--light { background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .94); border-color: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); } .eyebrow__dot { flex: none; margin-top: .42em; width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); box-shadow: 0 0 0 4px rgba(210, 30, 59, .16); } .text-accent { color: var(--navy-300); display: block; } /* Icons --------------------------------------------------------------------*/ .icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; } .icon--lg { width: 1.7em; height: 1.7em; } /* Accessibility helpers ----------------------------------------------------*/ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 999; padding: .75rem 1.4rem; background: var(--navy-800); color: var(--white); border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 600; transition: top var(--t-base); } .skip-link:focus-visible { top: 0; color: var(--white); } /* Pills --------------------------------------------------------------------*/ .pill { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .7rem; border-radius: var(--r-pill); font-size: .72rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; } .pill--live { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .22); } .pill--ok { background: rgba(63, 190, 130, .18); color: #96F2C4; border: 1px solid rgba(63, 190, 130, .35); } .pill--progress { background: rgba(210, 30, 59, .20); color: #FFB3BB; border: 1px solid rgba(210, 30, 59, .42); } /* ========================================================================== 04. SCROLL-REVEAL MOTION Progressive enhancement: elements are fully visible by default and only animate where the browser supports scroll-driven animations. ========================================================================== */ @keyframes reveal-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .reveal { animation: reveal-up linear both; animation-timeline: view(); /* Completes while the element is still entering the viewport, so content near the end of the document can never be left half-faded. */ animation-range: entry 5% entry 65%; } /* Cards in a row cascade rather than snapping in together */ .card-grid > *, .industry-grid > *, .steps > *, .testimonial-grid > *, .post-grid > *, .why__grid > *, .credentials__list > * { animation-range: entry 5% entry 70%; } .card-grid > :nth-child(3n+2), .industry-grid > :nth-child(4n+2), .steps > :nth-child(4n+2), .testimonial-grid > :nth-child(3n+2), .post-grid > :nth-child(3n+2), .why__grid > :nth-child(4n+2), .credentials__list > :nth-child(5n+2) { animation-range: entry 2% entry 62%; } .card-grid > :nth-child(3n+3), .industry-grid > :nth-child(4n+3), .steps > :nth-child(4n+3), .testimonial-grid > :nth-child(3n+3), .post-grid > :nth-child(3n+3), .why__grid > :nth-child(4n+3), .credentials__list > :nth-child(5n+3) { animation-range: entry 0% entry 56%; } } } /* ========================================================================== 05. BUTTONS & LINKS ========================================================================== */ .btn { --btn-py: .82rem; --btn-px: 1.55rem; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: var(--btn-py) var(--btn-px); border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font-head); font-size: .95rem; font-weight: 700; letter-spacing: .005em; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: transform var(--t-base), box-shadow var(--t-base), background-color var(--t-base), color var(--t-base), border-color var(--t-base); } /* Light sweep across the button face on hover */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-sheen); transform: translateX(-120%); opacity: .0; transition: transform .75s var(--ease-out), opacity var(--t-fast); } .btn:hover::before { transform: translateX(120%); opacity: .55; } .btn .icon { transition: transform var(--t-base); } .btn:hover .icon { transform: translateX(3px); } .btn:active { transform: translateY(1px); } .btn--sm { --btn-py: .6rem; --btn-px: 1.2rem; font-size: .875rem; } .btn--lg { --btn-py: 1.02rem; --btn-px: 2.05rem; font-size: 1rem; } .btn--block { width: 100%; } /* Primary — brand red with layered depth */ .btn--primary { background: var(--grad-red); color: var(--white); box-shadow: var(--sh-red); } .btn--primary:hover { color: var(--white); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(147, 21, 39, .26), 0 16px 28px -14px rgba(210, 30, 59, .6); } /* Ghost — for dark backgrounds */ .btn--ghost { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .3); color: var(--white); backdrop-filter: blur(8px); } .btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .62); color: var(--white); transform: translateY(-2px); } /* Outline — for light backgrounds */ .btn--outline { background: var(--white); border-color: var(--line-strong); color: var(--navy-700); box-shadow: var(--sh-xs); } .btn--outline:hover { border-color: var(--navy-600); color: var(--navy-700); transform: translateY(-2px); box-shadow: var(--sh-sm); } /* Text link button */ .btn--link { padding-inline: 0; overflow: visible; color: var(--navy-700); background: none; } .btn--link::before { display: none; } .btn--link::after { content: ""; position: absolute; left: 0; bottom: .45rem; width: 100%; height: 2px; background: var(--red-500); transform: scaleX(0); transform-origin: right; transition: transform var(--t-base); } .btn--link:hover { color: var(--red-500); } .btn--link:hover::after { transform: scaleX(1); transform-origin: left; } /* Inline card link with a circular arrow */ .card-link { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-head); font-size: .9rem; font-weight: 700; color: var(--red-500); } .card-link .icon { width: 1.9em; height: 1.9em; padding: .42em; border-radius: 50%; border: 1px solid currentColor; opacity: .75; transition: transform var(--t-base), background-color var(--t-base), color var(--t-base), opacity var(--t-base); } /* ========================================================================== 07. HERO ========================================================================== */ .hero { position: relative; isolation: isolate; padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(6.5rem, 11vw, 10rem); color: rgba(255, 255, 255, .84); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -3; } .hero__bg-svg { width: 100%; height: 100%; } /* Dark overlay keeps headline contrast well above WCAG AA */ .hero__overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, rgba(5, 15, 38, .94) 0%, rgba(8, 24, 56, .8) 45%, rgba(8, 24, 56, .62) 100%), radial-gradient(60% 60% at 10% 100%, rgba(210, 30, 59, .2), transparent 70%); } /* Soft colour orbs add depth behind the glass panel */ .hero__orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; } .hero__orb--a { width: min(42vw, 480px); aspect-ratio: 1; top: -14%; right: -8%; background: radial-gradient(circle, rgba(47, 104, 190, .75), transparent 68%); } .hero__orb--b { width: min(34vw, 380px); aspect-ratio: 1; bottom: -18%; left: -10%; background: radial-gradient(circle, rgba(210, 30, 59, .58), transparent 68%); } .hero__inner { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } @media (min-width: 62em) { .hero__inner { grid-template-columns: 1.05fr .95fr; } } .hero__title { color: var(--white); margin-bottom: var(--sp-5); } .hero__title .text-accent { background: linear-gradient(100deg, #9CC4FA 0%, #E8F0FE 55%, #FFB9BF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__lead { font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); max-width: 40rem; color: rgba(255, 255, 255, .82); margin-bottom: var(--sp-6); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-7); } .hero__trust { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, .16); font-size: var(--fs-sm); color: rgba(255, 255, 255, .8); } .hero__trust li { display: inline-flex; align-items: center; gap: .5rem; } .hero__trust .icon { color: var(--navy-300); } /* Hero visual — glass panel + floating badge. The bottom padding reserves room for the floating card so it always hangs off the panel edge instead of covering its content. */ .hero__art { position: relative; padding-bottom: 2.75rem; } /* About hero: editor-supplied photograph in place of the glass panel. The image keeps its own proportions (height:auto) so it is never cropped. */ .hero__photo { border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); box-shadow: var(--sh-lg); background: rgba(255, 255, 255, .06); } .hero__photo-img { display: block; width: 100%; height: auto; } @media (max-width: 61.99em) { .hero__art { max-width: 560px; margin-inline: auto; width: 100%; } } .hero__inner--solo { grid-template-columns: minmax(0, 1fr); } .about__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 52rem; } .glass-panel { position: relative; padding: clamp(1.35rem, 2.4vw, 1.9rem); border-radius: var(--r-lg); background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .2); box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255, 255, 255, .22); backdrop-filter: blur(18px) saturate(135%); color: var(--white); transition: transform var(--t-slow), box-shadow var(--t-slow); } .glass-panel:hover { transform: translateY(-4px); } .glass-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .glass-panel__title { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; } .glass-panel__chart { width: 100%; height: auto; margin-bottom: var(--sp-4); } .glass-panel__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); } .glass-panel__stats li { padding: .8rem .95rem; border-radius: var(--r-md); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); } .glass-panel__stats strong { display: block; font-family: var(--font-head); font-size: 1.4rem; letter-spacing: -.02em; color: var(--white); line-height: 1.2; } .glass-panel__stats span { font-size: var(--fs-xs); color: rgba(255, 255, 255, .72); } @media (max-width: 30em) { .glass-panel__stats li { padding: .7rem .75rem; } .glass-panel__stats strong { font-size: 1.25rem; } .glass-panel__stats span { font-size: .72rem; } } .glass-panel__rows { display: grid; gap: .55rem; } .glass-panel__rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: .62rem .9rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .06); font-size: var(--fs-sm); transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast); } .glass-panel__rows li:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .18); transform: translateX(4px); } .glass-panel__label { color: rgba(255, 255, 255, .9); } /* Kept here rather than with the other <=30em hero overrides above, which are declared after the rules they modify. A media query carries no extra specificity, so this has to follow the base rule to win. */ @media (max-width: 30em) { .glass-panel__rows li { padding: .58rem .7rem; font-size: .84rem; } } .float-card { position: absolute; left: clamp(-1.75rem, -1.6vw, -.75rem); bottom: 0; display: flex; align-items: center; gap: .8rem; padding: .9rem 1.2rem; border-radius: var(--r-md); background: var(--white); color: var(--navy-800); box-shadow: var(--sh-lg); } .float-card .icon { color: var(--red-500); } .float-card strong { display: block; font-family: var(--font-head); font-size: 1rem; letter-spacing: -.01em; line-height: 1.25; } .float-card span { font-size: var(--fs-xs); color: var(--muted); } @media (max-width: 35.99em) { .hero__art { padding-bottom: 0; } .float-card { position: static; margin-top: var(--sp-4); } } /* Scroll cue */ .hero__scroll { position: absolute; left: 50%; bottom: clamp(4.5rem, 7vw, 6.5rem); transform: translateX(-50%); display: none; align-items: center; gap: .7rem; font-family: var(--font-head); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .hero__scroll:hover { color: var(--white); } .hero__scroll-track { position: relative; width: 22px; height: 36px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .35); } .hero__scroll-dot { position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--white); } @media (min-width: 62em) { .hero__scroll { display: inline-flex; } } /* Bottom wave transition into the white page body */ .hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 1; } .hero__wave svg { width: 100%; height: clamp(40px, 5vw, 82px); } /* Entrance + ambient animation for above-the-fold content ------------------- */ @keyframes orb-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 5%, 0) scale(1.1); } } @keyframes draw-line { to { stroke-dashoffset: 0; } } @keyframes fade-in { to { opacity: 1; } } @keyframes scroll-dot { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } } @media (prefers-reduced-motion: no-preference) { .hero .reveal { animation: reveal-up .9s var(--ease-out) both; animation-timeline: auto; } .hero__content .reveal:nth-child(1) { animation-delay: .05s; } .hero__content .reveal:nth-child(2) { animation-delay: .14s; } .hero__content .reveal:nth-child(3) { animation-delay: .23s; } .hero__content .reveal:nth-child(4) { animation-delay: .32s; } .hero__content .reveal:nth-child(5) { animation-delay: .41s; } .hero__art.reveal { animation-delay: .3s; } .hero__orb { animation: orb-float 16s var(--ease) infinite alternate; } .hero__orb--b { animation-duration: 21s; animation-delay: -5s; } .chart-line { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw-line 1.9s .55s var(--ease-out) forwards; } .chart-dot { opacity: 0; animation: fade-in .5s 2.1s forwards; } .hero__scroll-dot { animation: scroll-dot 2.1s var(--ease) infinite; } } /* ========================================================================== 08. CREDENTIALS STRIP ========================================================================== */ .credentials { padding-block: clamp(2.75rem, 4.5vw, 4rem); background: var(--white); } .credentials__label { text-align: center; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-6); } .credentials__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); } .credential { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.05rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .credential:hover { transform: translateY(-5px); border-color: transparent; box-shadow: var(--sh-md); } .credential .icon { color: var(--navy-600); padding: .4rem; width: 2.35em; height: 2.35em; border-radius: 11px; background: var(--tint-100); transition: background var(--t-base), color var(--t-base); } .credential:hover .icon { background: var(--grad-navy); color: var(--white); } .credential span { display: grid; font-size: .74rem; color: var(--muted); line-height: 1.45; white-space: nowrap; /* keeps each credential on two tidy lines */ } .credential strong { font-family: var(--font-head); font-size: .92rem; letter-spacing: -.01em; color: var(--ink); } @media (max-width: 30em) { .credential span { white-space: normal; } } /* ========================================================================== 09. ABOUT ========================================================================== */ .about__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } @media (min-width: 62em) { .about__grid { grid-template-columns: .92fr 1.08fr; } } .about__media { position: relative; padding: 0 0 var(--sp-6) var(--sp-6); } /* Keep the artwork from ballooning when the grid collapses to one column */ @media (max-width: 61.99em) { .about__media { max-width: 560px; margin-inline: auto; } } @media (max-width: 47.99em) { .about__media { padding-bottom: 0; } } .about__media::before { /* decorative red block behind the image frame */ content: ""; position: absolute; left: 0; bottom: 0; width: 62%; height: 62%; border-radius: var(--r-lg); background: var(--grad-red); opacity: .1; z-index: 0; } .about__media::after { /* soft ambient glow */ content: ""; position: absolute; inset: -8% -6% -4% 2%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(27, 64, 119, .18), transparent 75%); filter: blur(10px); } .about__frame { /* Block-level even when the frame is a link (the blog's featured article): an inline box does not clip, so the image lost its rounded corners. */ display: block; position: relative; z-index: 1; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); transition: transform var(--t-slow); } .about__frame::after { /* hairline highlight on the frame edge */ content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .16); pointer-events: none; } .about__media:hover .about__frame { transform: translateY(-6px); } .about__illustration { width: 100%; height: auto; } .about__badge { position: absolute; right: clamp(-.5rem, -1vw, 0rem); bottom: clamp(1rem, 3vw, 2.5rem); z-index: 2; display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.4rem; border-radius: var(--r-md); background: var(--white); box-shadow: var(--sh-lg); } .about__badge strong { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; background: var(--grad-red); -webkit-background-clip: text; background-clip: text; color: transparent; } .about__badge span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; } /* On phones the badge tucks fully inside the frame instead of hanging off it */ @media (max-width: 47.99em) { .about__badge { right: .85rem; bottom: .85rem; padding: .8rem 1rem; gap: .7rem; } .about__badge strong { font-size: 2rem; } } .about__body p + p { margin-top: var(--sp-4); } .about__body .section__lead { margin-bottom: var(--sp-4); color: var(--body); } .checklist { display: grid; gap: .75rem; margin-block: var(--sp-6); } @media (min-width: 40em) { .checklist { grid-template-columns: 1fr 1fr; } } .checklist li { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-sm); color: var(--ink); font-weight: 500; } .checklist .icon { margin-top: .22rem; padding: 3px; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--tint-100); color: var(--navy-600); box-shadow: 0 0 0 4px rgba(27, 64, 119, .05); } .about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); } /* ========================================================================== 10. SERVICES & QUICK LINKS ========================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--grid-gap); counter-reset: service; } .service-card { position: relative; isolation: isolate; overflow: hidden; counter-increment: service; padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh-xs); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } /* Sliding navy wash on hover */ .service-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-navy-soft); opacity: 0; transition: opacity var(--t-base); } .service-card::after { /* top accent rule */ content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 100%; background: var(--grad-line); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow); } .service-card:hover { transform: translateY(-8px); border-color: transparent; box-shadow: var(--sh-lg); } .service-card:hover::before { opacity: 1; } .service-card:hover::after { transform: scaleX(1); } .service-card__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--sp-5); border-radius: 20px; background: linear-gradient(150deg, var(--tint-100), #FFFFFF); border: 1px solid var(--line); color: var(--navy-600); box-shadow: var(--ring-inset); transition: background var(--t-base), color var(--t-base), transform var(--t-base), border-color var(--t-base); } .service-card:hover .service-card__icon { background: var(--grad-red); border-color: transparent; color: var(--white); transform: rotate(-6deg) scale(1.06); } /* Ghost index numeral, generated from the grid counter */ .service-card__icon::after { content: counter(service, decimal-leading-zero); position: absolute; top: var(--card-pad); right: var(--card-pad); font-family: var(--font-head); font-size: 2.15rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--tint-100); transition: color var(--t-base), -webkit-text-stroke-color var(--t-base); } @supports (-webkit-text-stroke: 1px red) { .service-card__icon::after { color: transparent; -webkit-text-stroke: 1.5px var(--tint-200); } .service-card:hover .service-card__icon::after { -webkit-text-stroke-color: rgba(255, 255, 255, .3); } } .service-card__title { margin-bottom: var(--sp-3); transition: color var(--t-base); } .service-card p { font-size: var(--fs-sm); margin-bottom: var(--sp-5); transition: color var(--t-base); } .service-card:hover .service-card__title { color: var(--white); } .service-card:hover p { color: rgba(255, 255, 255, .8); } .service-card:hover .card-link { color: #FF9AA4; } .service-card:hover .card-link .icon { background: var(--red-500); color: var(--white); border-color: transparent; opacity: 1; transform: translateX(3px); } /* Quick links --------------------------------------------------------------*/ .quicklinks { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.35rem); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-sm); display: grid; gap: var(--sp-4); align-items: center; } @media (min-width: 56em) { .quicklinks { grid-template-columns: auto 1fr; gap: var(--sp-6); } } .quicklinks__title { font-size: 1.15rem; } .quicklinks__list { display: flex; flex-wrap: wrap; gap: .6rem; } .quicklinks__list a { display: inline-block; padding: .52rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--tint-200); background: var(--tint-50); color: var(--navy-700); font-size: var(--fs-sm); font-weight: 500; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .quicklinks__list a:hover { background: var(--grad-red); border-color: transparent; color: var(--white); transform: translateY(-2px); box-shadow: var(--sh-red); } /* ========================================================================== 11. WHY CHOOSE US ========================================================================== */ .why { position: relative; isolation: isolate; color: rgba(255, 255, 255, .8); background: var(--grad-navy-soft); overflow: hidden; } .why__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 55% at 85% 12%, rgba(47, 104, 190, .38), transparent 70%), radial-gradient(40% 50% at 8% 92%, rgba(210, 30, 59, .3), transparent 70%), repeating-linear-gradient(90deg, rgba(143, 182, 242, .05) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(143, 182, 242, .05) 0 1px, transparent 1px 72px); } .why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: var(--grid-gap); } .why-card { position: relative; overflow: hidden; padding: var(--card-pad); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(10px); transition: transform var(--t-base), background var(--t-base), border-color var(--t-base); } .why-card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--red-500), transparent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow); } .why-card:hover { transform: translateY(-6px); background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); border-color: rgba(255, 255, 255, .3); } .why-card:hover::after { transform: scaleX(1); } .why-card__icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: var(--sp-4); border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: var(--white); transition: background var(--t-base), transform var(--t-base), border-color var(--t-base); } .why-card:hover .why-card__icon { background: var(--grad-red); border-color: transparent; transform: translateY(-3px); } .why-card h3 { color: var(--white); margin-bottom: var(--sp-3); font-size: 1.16rem; } .why-card p { font-size: var(--fs-sm); color: rgba(255, 255, 255, .76); } .why__cta { margin-top: clamp(2.5rem, 4vw, 3.5rem); text-align: center; } /* ========================================================================== 12. STATISTICS ========================================================================== */ .stats { padding-block: clamp(2rem, 4vw, 3rem); background: var(--white); } .stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); margin-top: clamp(-5.5rem, -6vw, -4rem); /* pulls the card over the navy band */ padding: clamp(1.85rem, 3vw, 2.6rem); border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-lg); position: relative; z-index: 2; } @media (min-width: 56em) { .stats__grid { grid-template-columns: repeat(4, 1fr); } } .stat { text-align: center; position: relative; padding: var(--sp-2) var(--sp-3); } @media (min-width: 56em) { .stat + .stat::before { content: ""; position: absolute; left: 0; top: 12%; width: 1px; height: 76%; background: linear-gradient(180deg, transparent, var(--line-strong), transparent); } } .stat__value { display: block; font-family: var(--font-head); font-size: clamp(2.2rem, 1.4rem + 2.5vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, var(--navy-700), var(--navy-500)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__value sup { color: var(--red-500); -webkit-text-fill-color: var(--red-500); } .stat__label { display: block; margin-top: var(--sp-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } /* Tighter tracking on phones keeps every label to a maximum of two lines */ @media (max-width: 36em) { .stat { padding-inline: var(--sp-1); } .stat__label { font-size: .68rem; letter-spacing: .04em; margin-top: var(--sp-2); } } /* ========================================================================== 13. INDUSTRIES ========================================================================== */ /* Deterministic column counts keep the eight tiles in even rows at every size: 2-up on phones (a single column of eight would run far too long), 4-up from tablet upwards. */ .industry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.85rem, 1.6vw, 1.25rem); } @media (min-width: 48em) { .industry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .industry { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base), background var(--t-base); } .industry .icon { color: var(--navy-600); padding: .48rem; width: 2.9em; height: 2.9em; border-radius: 14px; background: var(--tint-100); transition: color var(--t-base), transform var(--t-base), background var(--t-base); } .industry h3 { font-size: 1.02rem; letter-spacing: -.015em; transition: color var(--t-base); } .industry:hover { transform: translateY(-6px); border-color: transparent; background: var(--grad-navy-soft); box-shadow: var(--sh-md); } .industry:hover .icon { color: var(--white); background: rgba(255, 255, 255, .12); transform: scale(1.05); } .industry:hover h3 { color: var(--white); } /* Two cards per row below 48em leaves each title barely 108px to wrap in, which is not enough for "Construction & Contracting" to avoid stranding the ampersand on a line of its own. Tightening the padding and title buys the ~13px needed. These must stay after the base rules above: a media query adds no specificity, so declared first they would simply lose to them. */ @media (max-width: 47.99em) { .industry { gap: var(--sp-3); padding: 1.15rem 1rem; } .industry h3 { font-size: .92rem; } .industry .icon { width: 2.6em; height: 2.6em; } } /* ========================================================================== 14. PROCESS ========================================================================== */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--grid-gap); } .step { position: relative; overflow: hidden; padding: var(--card-pad); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-xs); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } /* Dotted connector with an arrow head, between steps on wide screens */ @media (min-width: 62em) { .step:not(:last-child)::after { content: ""; position: absolute; top: 3.4rem; right: calc(-1 * var(--grid-gap) - 1px); width: var(--grid-gap); height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); } } .step:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--sh-md); } .step__num { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-4); border-radius: 18px; background: var(--grad-navy); color: var(--white); font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; box-shadow: var(--sh-sm); transition: background var(--t-base), transform var(--t-base); } .step:hover .step__num { background: var(--grad-red); transform: translateY(-2px); } .step__title { margin-bottom: var(--sp-3); font-size: 1.14rem; } .step p { font-size: var(--fs-sm); } /* ========================================================================== 15. TESTIMONIALS ========================================================================== */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--grid-gap); } .testimonial { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--card-pad); border-radius: var(--r-lg); background: var(--tint-50); border: 1px solid var(--line); transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base); } .testimonial:hover { transform: translateY(-6px); background: var(--white); border-color: transparent; box-shadow: var(--sh-md); } .testimonial__quote { width: 2.7rem; height: 2.7rem; color: var(--tint-200); fill: currentColor; stroke: none; transition: color var(--t-base); } .testimonial:hover .testimonial__quote { color: var(--navy-300); } .rating { display: flex; gap: .18rem; margin-top: calc(-1 * var(--sp-2)); } .rating svg { width: 1.05rem; height: 1.05rem; fill: var(--red-500); } .testimonial blockquote p { font-size: 1.02rem; color: var(--ink); line-height: 1.66; } .testimonial__author { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line); } .avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--grad-navy); color: var(--white); font-family: var(--font-head); font-size: .92rem; font-weight: 700; letter-spacing: .04em; box-shadow: 0 0 0 4px rgba(27, 64, 119, .07); } .testimonial__meta { display: grid; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; } .testimonial__meta strong { font-family: var(--font-head); font-size: .95rem; color: var(--ink); } /* ========================================================================== 16. CLIENT LOGOS — INFINITE MARQUEE Twenty marks of wildly different weight, palette and lock-up shape have to read as one band. The tiles carry that job — identical footprint, identical inner box, one border and one shadow across the set — which frees the artwork to run in its own colours instead of being flattened to grey. The loop is two identical tracks and one keyframe; see marquee-scroll. ========================================================================== */ .marquee { --marquee-gap: clamp(.75rem, 1.4vw, 1.35rem); --marquee-speed: 55s; display: flex; gap: var(--marquee-gap); overflow: hidden; /* No break-out needed: the element is a direct child of the full-width section, so it is already screen-wide. */ padding-block: var(--sp-2); /* Marks dissolve into the background at both ends rather than being sliced off by a hard edge — the detail that separates a marquee that looks built from one that looks clipped. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .marquee__track { display: flex; flex-shrink: 0; gap: var(--marquee-gap); /* Guards the seam on ultra-wide displays: should twenty tiles ever total less than the frame, the track still fills it and the tiles spread evenly instead of leaving dead space before the copy begins. */ min-width: 100%; justify-content: space-around; align-items: center; list-style: none; margin: 0; padding: 0; animation: marquee-scroll var(--marquee-speed) linear infinite; } /* Each track travels exactly its own width plus one gap, which lands the copy precisely on the original's starting position — the loop restarts on an identical frame, so there is nothing to see. Transform only, so the whole thing stays on the compositor and never triggers layout or paint. */ @keyframes marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100% - var(--marquee-gap)), 0, 0); } } /* Smaller tiles cover less ground per loop, so shorten the cycle to keep the apparent speed roughly constant rather than crawling on a phone. */ @media (max-width: 47.99em) { .marquee { --marquee-speed: 32s; } } .client { /* Fixed basis, no grow or shrink: every tile is the same width whatever the viewport, which is what keeps the spacing even as the band moves. */ flex: 0 0 clamp(8rem, 12.5vw, 11rem); display: grid; place-items: center; padding: clamp(.6rem, 1.15vw, .95rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .client img { width: 100%; height: auto; /* Every source is a uniform 400x300 canvas. Matching that 4:3 window exactly means `contain` letterboxes nothing, so each mark is drawn as large as the tile allows — and because the ratio is shared, every tile resolves to the same height without one being declared. Cropping instead would clip the tall stacked lock-ups (HLG, Ansar Mall). */ aspect-ratio: 4 / 3; object-fit: contain; transition: filter var(--t-base); } /* Only wire hover up for real pointers — on touch it latches after a tap and stays stuck. Deliberately nothing here touches animation-play-state: the tile reacts while the band keeps moving underneath it. The lift has to read on the tile's frame, not behind the mark: these sources are JPEGs, so each paints an opaque white rectangle over the whole content box. A tinted wash behind a logo is invisible however it is layered — only the border, the halo and the scale are ever on show. */ @media (hover: hover) { .client:hover { transform: scale(1.06); border-color: var(--navy-300); box-shadow: var(--sh-md), 0 0 0 4px rgba(27, 64, 119, .07); } .client:hover img { filter: brightness(1.06) saturate(1.05); } } /* Perpetual motion is exactly what this preference exists to switch off. The band becomes a normal swipeable row, and the duplicate track is dropped — stationary, it would just be the same twenty marks listed twice. */ @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .marquee__track[aria-hidden="true"] { display: none; } .marquee { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .marquee:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 4px; } .client { scroll-snap-align: start; } .client, .client img { transition: none; } .client:hover { transform: none; } .client:hover img { filter: none; } } .clients__foot { margin-top: clamp(2rem, 3.5vw, 3rem); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; } .clients__note { font-size: var(--fs-sm); color: var(--muted); } /* ========================================================================== 17. CTA BAND ========================================================================== */ .cta-band { position: relative; isolation: isolate; padding-block: clamp(3.25rem, 6vw, 5rem); background: var(--grad-navy-soft); color: rgba(255, 255, 255, .82); overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 100% 0%, rgba(210, 30, 59, .4), transparent 65%), radial-gradient(45% 100% at 0% 100%, rgba(47, 104, 190, .34), transparent 65%); } .cta-band__inner { display: grid; gap: var(--sp-6); align-items: center; } @media (min-width: 56em) { .cta-band__inner { grid-template-columns: 1.4fr auto; gap: var(--sp-8); } } .cta-band__title { color: var(--white); margin-bottom: var(--sp-3); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); } .cta-band__text { max-width: 44rem; color: rgba(255, 255, 255, .8); } .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* ========================================================================== 18. FAQ ========================================================================== */ .faq__grid { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); align-items: start; } @media (min-width: 62em) { .faq__grid { grid-template-columns: .8fr 1.2fr; } .faq__intro { position: sticky; top: 110px; } } .faq__intro .section__lead { margin-bottom: var(--sp-5); } .faq__list { display: grid; gap: .75rem; } .faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); box-shadow: var(--sh-xs); transition: border-color var(--t-base), box-shadow var(--t-base); } .faq-item:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); } .faq-item[open] { border-color: transparent; box-shadow: var(--sh-md); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 1.2rem clamp(1.15rem, 2vw, 1.65rem); cursor: pointer; list-style: none; font-family: var(--font-head); font-size: 1.02rem; font-weight: 600; color: var(--ink); transition: color var(--t-fast); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--navy-700); } .faq-item summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(var(--navy-700), var(--navy-700)) center / 11px 2px no-repeat, linear-gradient(var(--navy-700), var(--navy-700)) center / 2px 11px no-repeat, var(--tint-100); transition: transform var(--t-base), background-color var(--t-base); } .faq-item[open] summary { color: var(--navy-700); } /* Open state collapses the plus into a minus on the brand red disc */ .faq-item[open] summary::after { transform: rotate(180deg); background: linear-gradient(#fff, #fff) center / 11px 2px no-repeat, var(--red-500); } .faq-item__body { padding: 1.1rem clamp(1.15rem, 2vw, 1.65rem) 1.4rem; font-size: var(--fs-sm); border-top: 1px solid var(--line); margin-top: -.35rem; } @media (prefers-reduced-motion: no-preference) { .faq-item[open] .faq-item__body { animation: reveal-up .35s var(--ease) both; } } /* ========================================================================== 19. INSIGHTS / BLOG ========================================================================== */ .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--grid-gap); } .post-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-xs); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .post-card:hover { transform: translateY(-8px); border-color: transparent; box-shadow: var(--sh-lg); } .post-card__media { position: relative; display: block; overflow: hidden; background: var(--tint-100); border-bottom: 1px solid var(--line); } .post-card__media svg { width: 100%; height: auto; aspect-ratio: 5 / 3; /* the illustrations are drawn on a 400x240 canvas */ transition: transform var(--t-slow); } .post-card:hover .post-card__media svg { transform: scale(1.06); } /* The category sits in the meta row, ahead of the date. Most article images carry their own headline, and a chip laid over the picture covered part of it on every card. */ .post-card__tag { padding: .26rem .7rem; border-radius: var(--r-pill); background: var(--tint-100); border: 1px solid var(--tint-200); color: var(--navy-700); font-family: var(--font-head); font-size: .68rem; font-weight: 700; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; white-space: nowrap; } .post-card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--card-pad); flex: 1; } .post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .75rem; font-size: var(--fs-xs); color: var(--muted); } .post-card__read { position: relative; padding-left: .85rem; } .post-card__read::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--red-500); } .post-card__title { font-size: 1.16rem; line-height: 1.34; } .post-card__title a { color: var(--ink); } .post-card__title a:hover { color: var(--navy-600); } .post-card__body p { font-size: var(--fs-sm); } .post-card .card-link { margin-top: auto; } .post-card:hover .card-link .icon { background: var(--red-500); color: var(--white); border-color: transparent; opacity: 1; transform: translateX(3px); } /* ========================================================================== 20. CONTACT ========================================================================== */ .contact { position: relative; isolation: isolate; color: rgba(255, 255, 255, .82); background: var(--grad-navy-soft); overflow: hidden; } .contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 90% 8%, rgba(47, 104, 190, .38), transparent 70%), radial-gradient(45% 60% at 4% 96%, rgba(210, 30, 59, .26), transparent 70%); } .contact__grid { display: grid; gap: clamp(2.5rem, 4vw, 4rem); align-items: start; } @media (min-width: 62em) { .contact__grid { grid-template-columns: 1fr 1fr; } } .contact .section__title { color: var(--white); } .contact .section__lead { color: rgba(255, 255, 255, .8); margin-bottom: var(--sp-6); } .contact__list { display: grid; gap: var(--sp-4); } .contact__list li { display: flex; gap: var(--sp-4); align-items: flex-start; padding: .85rem; margin-left: -.85rem; border-radius: var(--r-md); transition: background var(--t-fast); } .contact__list li:hover { background: rgba(255, 255, 255, .06); } .contact__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); color: var(--white); transition: background var(--t-base), transform var(--t-base); } .contact__list li:hover .contact__icon { background: var(--grad-red); border-color: transparent; transform: translateY(-2px); } .contact__list strong { display: block; font-family: var(--font-head); font-size: .95rem; color: var(--white); margin-bottom: .15rem; } .contact__list span { font-size: var(--fs-sm); color: rgba(255, 255, 255, .78); line-height: 1.6; } .contact__list a { color: rgba(255, 255, 255, .92); } .contact__list a:hover { color: var(--red-200); } /* Form ---------------------------------------------------------------------*/ .contact__form { padding: clamp(1.6rem, 3vw, 2.5rem); border-radius: var(--r-lg); background: rgba(255, 255, 255, .97); border: 1px solid rgba(255, 255, 255, .5); box-shadow: var(--sh-lg); display: grid; gap: var(--sp-4); } .contact__form-title { font-size: 1.32rem; margin-bottom: var(--sp-1); } .field { display: grid; gap: .42rem; } .field-row { display: grid; gap: var(--sp-4); } @media (min-width: 30em) { .field-row { grid-template-columns: 1fr 1fr; } } .field label { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .field input, .field select, .field textarea { width: 100%; padding: .82rem 1rem; border: 1px solid var(--tint-200); border-radius: var(--r-sm); background: var(--tint-50); color: var(--ink); font-size: .95rem; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .field textarea { resize: vertical; min-height: 112px; } .field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--navy-700) 50%), linear-gradient(135deg, var(--navy-700) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; } .field input::placeholder, .field textarea::placeholder { color: #93A3BC; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; /* background-color only — the shorthand would wipe the select's arrow */ background-color: var(--white); border-color: var(--navy-500); box-shadow: 0 0 0 4px rgba(47, 104, 190, .14); } .form-trust { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: var(--fs-xs); color: var(--body); } .form-trust li { display: inline-flex; align-items: center; gap: .35rem; } .form-trust .icon { width: .95em; height: .95em; color: var(--navy-600); stroke-width: 2.6; } .form-note { font-size: var(--fs-xs); color: var(--muted); text-align: center; } /* --- About page: cards carrying the live site's icon artwork ------------- */ .step__icon { width: 62px; height: auto; margin-bottom: var(--sp-3); } /* --- Services page: transparent hero graphic in place of the glass panel -- */ .hero__art > .hero__art-img { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(3, 12, 31, .45)); } /* --- Careers page: CV upload field styled to match the other inputs ------- */ .field input[type="file"] { padding: .65rem .8rem; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--tint-50); font-size: var(--fs-sm); color: var(--muted); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); } .field input[type="file"]:hover { border-color: var(--navy-500); background: var(--tint-100); } .field input[type="file"]::file-selector-button { margin-right: .9rem; padding: .5rem 1.1rem; border: 0; border-radius: var(--r-pill); background: var(--navy-600); color: var(--white); font: 600 .82rem var(--font-head); cursor: pointer; transition: background var(--t-fast); } .field input[type="file"]::file-selector-button:hover { background: var(--navy-700); } /* --- Blog: photographic card media alongside the existing SVG variant ----- */ .post-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--t-slow); } .post-card:hover .post-card__media img { transform: scale(1.06); } /* --- Prose block: shared by the service pages and the blog article -------- */ .article-body { max-width: 47.5rem; margin: clamp(2.25rem, 4.5vw, 3.5rem) auto 0; /* Slightly larger and looser than UI copy: this is long-form reading, not interface text, so the measure and rhythm are tuned for sustained prose. */ font-size: clamp(1.02rem, .99rem + .16vw, 1.09rem); line-height: 1.78; } .article-body > * + * { margin-top: 1.15em; } .article-body h2 { margin-top: 2.2em; font-size: clamp(1.42rem, 1.24rem + .8vw, 1.85rem); scroll-margin-top: 6rem; } /* Short brand rule above each major heading, echoing the section heads */ .article-body h2::before { content: ""; display: block; width: 42px; height: 3px; margin-bottom: .7rem; border-radius: 2px; background: var(--grad-line); } .article-body h3 { margin-top: 1.8em; font-size: 1.16rem; color: var(--navy-700); scroll-margin-top: 6rem; } /* The global reset strips list styling; prose lists need it back */ .article-body ul, .article-body ol { padding-left: 1.45rem; display: grid; gap: .55rem; } .article-body ul { list-style: disc; } .article-body ol { list-style: decimal; } .article-body li::marker { color: var(--red-500); font-weight: 600; } .article-body li { padding-left: .2rem; } .article-body strong { color: var(--ink); font-weight: 600; } .article-body a { text-decoration: underline; text-underline-offset: 3px; } /* Opening paragraph carries a little more presence than the body */ .article-body > p:first-of-type { font-size: 1.12em; line-height: 1.7; color: var(--body); } /* Reading-progress bar — scroll-driven, no JavaScript. Falls back to simply not appearing where scroll timelines are unsupported. */ @supports (animation-timeline: scroll()) { .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; transform-origin: 0 50%; background: var(--grad-line); animation: read-progress linear both; animation-timeline: scroll(root block); } @keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } } @media (prefers-reduced-motion: reduce) { .read-progress { display: none; } } /* ========================================================================== 21. DESIGN REFINEMENTS Polish layered over the base components: sharper typography, richer depth on cards and media, and motion that reads as considered rather than busy. Uses only existing palette tokens — no new colours are introduced. ========================================================================== */ /* In-page anchors glide instead of jumping, and clear the sticky nav */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } :target { scroll-margin-top: var(--scroll-offset); } [id] { scroll-margin-top: var(--scroll-offset); } /* Optical tracking: large display type wants to be tighter than body copy */ .hero__title { letter-spacing: -.035em; } .section__title { text-wrap: balance; } .section__lead { text-wrap: pretty; } /* Section heads breathe a little more, and the eyebrow sits closer to its title */ .eyebrow { margin-bottom: var(--sp-3); } /* --- Cards: deeper, more deliberate hover --------------------------------- The base components already lift; these refine the easing and add an inner highlight so the raised state reads as lit rather than merely offset. */ .service-card, .industry, .post-card, .testimonial, .step { transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base), background var(--t-base); } .service-card:hover, .post-card:hover, .testimonial:hover { box-shadow: var(--sh-lg), var(--ring-inset); } /* Card media gets a subtle zoom-and-settle rather than a flat swap */ .post-card__media img, .post-card__media svg { will-change: transform; } /* --- Media frames --------------------------------------------------------- Photographs inside the split sections gain a soft inner edge so they sit on the page rather than floating above it. */ .about__frame img { transition: transform var(--t-slow); } .about__media:hover .about__frame img { transform: scale(1.03); } /* --- Forms: clearer affordance and focus ---------------------------------- */ .field input, .field select, .field textarea { transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 4px rgba(27, 64, 119, .12); } /* --- Links: underline grows from the left instead of snapping on ---------- */ .card-link { position: relative; } .card-link::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-base); } .card-link:hover::after { transform: scaleX(1); } /* --- Stat values: tabular figures so columns align optically -------------- */ .stat__value, .glass-panel__stats strong { font-variant-numeric: tabular-nums; } /* --- Scroll-driven entrance for section headings -------------------------- */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .section__head > .eyebrow, .section__head > .section__title, .section__head > .section__lead { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; } .section__head > .section__title { animation-range: entry 8% entry 63%; } .section__head > .section__lead { animation-range: entry 11% entry 66%; } } } /* --- Footer: links get the same considered hover as the rest of the site --- */ .footer__social a { will-change: transform; } /* --- Print: keep the essentials, drop the furniture ----------------------- */ @media print { .floating-actions, .read-progress, .hero__scroll, .nav__burger { display: none !important; } } /* ========================================================================== 22. PAGE HEAD (compact banner for pages that do not need a full hero) ========================================================================== */ .page-head { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.25rem, 6vw, 5.25rem); text-align: center; color: rgba(255, 255, 255, .85); background: var(--grad-navy-soft); } .page-head__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 82% 15%, rgba(47, 104, 190, .4), transparent 70%), radial-gradient(38% 55% at 10% 92%, rgba(210, 30, 59, .3), transparent 70%), repeating-linear-gradient(90deg, rgba(143, 182, 242, .05) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(143, 182, 242, .05) 0 1px, transparent 1px 72px); } .page-head__inner { position: relative; } .page-head__title { color: var(--white); letter-spacing: -.03em; margin-bottom: var(--sp-4); text-wrap: balance; } .page-head__lead { max-width: 44rem; margin-inline: auto; font-size: var(--fs-lead); color: rgba(255, 255, 255, .82); } /* ========================================================================== 23. CONTACT PAGE ========================================================================== */ .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--grid-gap); } .contact-card { padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh-xs); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .contact-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--sh-md); } .contact-card__icon { display: grid; place-items: center; width: 3.1em; height: 3.1em; margin-bottom: var(--sp-4); padding: .55rem; border-radius: 16px; background: var(--tint-100); color: var(--navy-600); transition: background var(--t-base), color var(--t-base), transform var(--t-base); } .contact-card:hover .contact-card__icon { background: var(--grad-navy-soft); color: var(--white); transform: scale(1.05); } .contact-card h2 { font-size: 1.05rem; margin-bottom: var(--sp-2); } .contact-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.75; } .contact-card a { color: var(--navy-600); } .contact-card a:hover { color: var(--red-500); } /* Social row inside the dark contact column */ .contact__social { margin-top: var(--sp-5); } /* --- Map card ------------------------------------------------------------- */ .map-card { position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--sh-md); } .map-card iframe { display: block; width: 100%; min-height: 380px; border: 0; /* Desaturated so the map reads as a supporting surface, not a focal point */ filter: grayscale(.35) contrast(1.05); transition: filter var(--t-slow); } .map-card:hover iframe { filter: none; } .map-card__panel { padding: clamp(1.25rem, 2.4vw, 1.75rem); border-top: 1px solid var(--line); background: var(--white); } .map-card__panel strong { display: block; font-family: var(--font-head); font-size: 1.02rem; color: var(--ink); margin-bottom: .35rem; } .map-card__panel p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-4); } @media (min-width: 56em) { .map-card { grid-template-columns: 1.65fr 1fr; } .map-card iframe { min-height: 440px; height: 100%; } .map-card__panel { border-top: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; } } /* ========================================================================== 23. REDUCED MOTION & PRINT ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .chart-line { stroke-dashoffset: 0; } .chart-dot { opacity: 1; } } @media print { .topbar, .nav, .floating-actions, .hero__wave, .hero__scroll, .cta-band__actions, .grain, .why::after, .cta-band::after, .contact::after, .site-footer::after { display: none !important; } body { color: #000; background: #fff; } .hero, .why, .contact, .cta-band, .site-footer { background: #fff !important; color: #000 !important; } .hero__overlay, .hero__bg, .hero__orb, .why__bg { display: none !important; } .hero__title, .section__title, .cta-band__title { color: #000 !important; } a { color: #000; text-decoration: underline; } } /* ========================================================================== 24. SYSTEM POLISH The layer that turns the individual components into one design system: typography calibrated for the Figtree / Roboto pairing the live site uses, a consistent header lock-up, a motion fallback for browsers without scroll-driven animations, and the responsive corrections that keep every breakpoint honest. ========================================================================== */ /* --- 24.1 Typography ------------------------------------------------------ Roboto sets a little smaller than Inter at the same size and Figtree a little larger, so the base is nudged up and display tracking pulled in to land on the same optical weight the layout was designed around. */ body { font-size: clamp(1rem, .985rem + .07vw, 1.0625rem); line-height: var(--lh-copy); letter-spacing: 0; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } /* Figtree carries real weight at 800/900; display sizes want tighter tracking than the browser default to avoid looking loose. */ .hero__title, .page-head__title { letter-spacing: -.035em; } .section__title { font-weight: 700; letter-spacing: -.026em; } .stat__value, .about__badge strong { font-weight: 900; } /* Small caps-style labels: Figtree's uppercase needs a touch more air */ .eyebrow, .credentials__label, .stat__label, .field label, .breadcrumb { font-family: var(--font-head); } /* Long-form prose reads better slightly looser in Roboto */ .article-body { line-height: 1.8; } /* Copy measure: nothing should run past a comfortable line length, whatever the container width. */ .section__lead, .hero__lead, .page-head__lead, .cta-band__text, .footer__about { max-width: 62ch; } .section__head:not(.section__head--split) .section__lead { margin-inline: auto; } /* Tablet and phone: the lock-up shrinks with the bar rather than dominating it */ @media (max-width: 47.99em) { :root { --nav-h: 72px; --nav-h-stuck: 64px; --logo-h: 40px; --logo-h-stuck: 34px; } } @media (max-width: 22.5em) { :root { --logo-h: 34px; --logo-h-stuck: 30px; } .nav__burger { width: 42px; height: 42px; } } /* --- 24.3 Motion fallback ------------------------------------------------- Only Chromium supports `animation-timeline: view()`. Elsewhere site.js sets .js-reveal on and observes the same elements, so the entrance reads identically in Safari and Firefox. The class is removed after 4s no matter what, so a scripting failure can never strand content at opacity 0. */ .js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); } .js-reveal .reveal.is-inview { opacity: 1; transform: none; } /* Cards in a row cascade instead of arriving together */ .js-reveal .card-grid > .reveal:nth-child(3n+2), .js-reveal .industry-grid > .reveal:nth-child(4n+2), .js-reveal .steps > .reveal:nth-child(4n+2), .js-reveal .post-grid > .reveal:nth-child(3n+2), .js-reveal .why__grid > .reveal:nth-child(4n+2), .js-reveal .testimonial-grid > .reveal:nth-child(3n+2) { transition-delay: .09s; } .js-reveal .card-grid > .reveal:nth-child(3n+3), .js-reveal .industry-grid > .reveal:nth-child(4n+3), .js-reveal .steps > .reveal:nth-child(4n+3), .js-reveal .post-grid > .reveal:nth-child(3n+3), .js-reveal .why__grid > .reveal:nth-child(4n+3), .js-reveal .testimonial-grid > .reveal:nth-child(3n+3) { transition-delay: .18s; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; } } /* --- 24.4 Responsive corrections ----------------------------------------- `overflow-x: hidden` on hides a horizontal overflow; it does not fix one — the page still scrolls sideways on iOS and the scroll position of anchored elements still drifts. These are the actual causes. */ /* Grid and flex children default to min-width:auto, so a single long word or a wide 
 forces the whole track wider than its column. */
.hero__inner > *,
.about__grid > *,
.contact__grid > *,
.faq__grid > *,
.cta-band__inner > *,
.footer__grid > *,
.map-card > * { min-width: 0; }

/* Decorative glows sat outside their own box and pushed the document wider on
   narrow screens; they now bleed vertically only. */
.about__media::after { inset: -6% 0 -4% 0; }

/* Note on clipping: `overflow-x: clip` is deliberately NOT used as a blanket
   guard here. Where one axis is clip the other computes to clip too, which
   would cut off the statistics card that intentionally hangs up out of its
   section and the badge that hangs off the about artwork. The overflow causes
   are fixed at source instead. */

/* A URL, an email address or a long service name must wrap rather than push */
.contact__list span,
.contact__list a,
.footer__links a,
.nav__sub a,
.contact-card p,
.contact-card a { overflow-wrap: anywhere; }

/* Embedded maps and iframes stay inside their card at every width */
iframe { max-width: 100%; border: 0; }

/* Tables in article bodies scroll inside their own frame instead of stretching
   the page. */
.article-body .table-scroll,
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
}

/* --- Tablet (48em–68em): the real gap in the old layout -------------------
   Auto-fit grids were falling to a single very wide column between roughly
   700px and 900px, which left service and post cards stretched to 2.5x the
   width their content wants. Fixing the column count in that band keeps the
   card proportions consistent with desktop. */
@media (min-width: 40em) {
  .card-grid,
  .post-grid,
  .testimonial-grid,
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62em) {
  .card-grid,
  .post-grid,
  .testimonial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Four process steps only get their own row once each one has real width;
   below that they stay 2x2 rather than being squeezed to a quarter each. */
@media (min-width: 68em) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The credentials strip reads as a 2-up block on tablet rather than an awkward
   three-plus-orphan row. */
@media (min-width: 34em) and (max-width: 61.99em) {
  .credentials__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Split section heads stack cleanly instead of the action being stranded */
@media (max-width: 47.99em) {
  .section__head--split { flex-direction: column; align-items: flex-start; }
  .section__head--split .section__lead { max-width: none; }
}

/* Buttons: full width on the narrowest phones so a two-button row never leaves
   one stub-width and the other full-width. */
@media (max-width: 26em) {
  .hero__actions,
  .cta-band__actions,
  .about__actions { display: grid; gap: .65rem; }
  .hero__actions .btn,
  .cta-band__actions .btn,
  .about__actions .btn { width: 100%; }
  .about__actions { justify-items: stretch; }
}

/* Section rhythm on phones: the desktop scale leaves too much dead space */
@media (max-width: 36em) {
  :root { --section-y: clamp(2.5rem, 8vw, 3.25rem); }
}


/* --- 24.5 Component consistency ------------------------------------------
   One border radius family, one border colour, one lift on hover — applied
   across every card-like surface so nothing reads as an exception. */
.service-card,
.post-card,
.testimonial,
.step,
.contact-card,
.industry,
.credential,
.faq-item,
.quicklinks,
.map-card,
.author-card { border-color: var(--line); }

/* Focus is never merely a colour change: every interactive surface gets the
   same visible ring, including the ones with their own background. */
.btn:focus-visible,
.nav__link:focus-visible,
.nav__burger:focus-visible,
.nav__close:focus-visible,
.nav__sub-toggle:focus-visible,
.card-link:focus-visible,
.footer__links a:focus-visible,
.footer__social a:focus-visible,
.topbar a:focus-visible,
.floating-actions__btn:focus-visible {
  outline: 3px solid var(--navy-500);
  outline-offset: 3px;
}
.nav__close:focus-visible,
.footer__social a:focus-visible,
.topbar a:focus-visible { outline-color: var(--navy-300); }

/* Comfortable hit areas on touch: 44px minimum on the small controls that
   were previously sized to their icon. */
@media (pointer: coarse) {
  .topbar__social a { width: 34px; height: 34px; }
  .footer__social a { width: 44px; height: 44px; }
  .article__share a { width: 46px; height: 46px; }
  .footer__links a,
  .quicklinks__list a { padding-block: .2rem; }
}

/* Buttons: a firmer, more deliberate press and a consistent minimum width so
   a row of two never looks lopsided. */
.btn { min-height: 44px; }
.btn--sm { min-height: 38px; }
.btn--lg { min-height: 52px; }
.btn--outline { background: var(--white); }

/* Cards: the accent rule at the top of a service card is the system's
   signature; the same treatment is given to the other feature surfaces so the
   hover language is shared rather than per-component. */
.contact-card,
.credential { position: relative; overflow: hidden; }
.contact-card::after,
.credential::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}
.contact-card:hover::after,
.credential:hover::after { transform: scaleX(1); }

/* Cards in a row are the same height because the grid stretches them, but
   their contents were not: a two-line card put its "Learn more" 40px higher
   than the four-line card beside it. Pushing the action to the bottom of the
   card lands every one of them on the same line. */
.service-card,
.contact-card {
  display: flex;
  flex-direction: column;
}
.service-card > p,
.contact-card > p { flex: 1 1 auto; }
.service-card .card-link,
.contact-card .card-link {
  margin-top: auto;
  align-self: flex-start;
}

/* Section heads keep an even optical gap to the content that follows */
.section__head { margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }

/* The hero's floating credential card is designed to hang off the left edge of
   the two-column artwork panel. Once the hero collapses to one column that
   panel is the full container width, so the card hung into the page gutter
   instead. It rejoins the flow as soon as the columns merge. */
@media (max-width: 61.99em) {
  .hero__art { padding-bottom: 0; }
  .float-card {
    position: static;
    margin-top: var(--sp-4);
    width: fit-content;
  }
}

/* Images never overflow their frame or lose their aspect ratio */
.about__illustration,
.article__figure img,
.post-card__media img,
.hero__art-img { max-width: 100%; height: auto; }


/* --- 24.6 Balanced rows ---------------------------------------------------
   A fixed three-column grid strands whatever does not divide by three: the
   fourth of four service cards sat alone on a second row, the seventh of
   seven likewise, and three process steps left a hole where a fourth would
   go. The grid is laid on six tracks so a short last row can be centred, and
   the step row takes as many columns as it has steps. Without :has() support
   the previous three-column layout simply remains. */
@media (min-width: 62em) {
  .card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card-grid > * { grid-column: span 2; }
  /* One left over: centre it. Two left over: centre the pair. */
  .card-grid > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
  .card-grid > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
  /* Exactly four reads better as two rows of two than as three and one */
  .card-grid:has(> :nth-child(4):last-child) > * { grid-column: span 3; }
}
/* The same idea at tablet width, where the grids run two-up: an odd card out
   is centred under the pair above it rather than left hanging at one side. */
@media (min-width: 40em) and (max-width: 61.99em) {
  .card-grid,
  .post-grid,
  .testimonial-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid > *,
  .post-grid > *,
  .testimonial-grid > * { grid-column: span 2; }
  .card-grid > :last-child:nth-child(odd),
  .post-grid > :last-child:nth-child(odd),
  .testimonial-grid > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 40em) and (max-width: 67.99em) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps > * { grid-column: span 2; }
  .steps > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 34em) and (max-width: 61.99em) {
  .credentials__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .credentials__list > * { grid-column: span 2; }
  .credentials__list > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 68em) {
  .steps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}



/* --- 24.7 Print ----------------------------------------------------------- */
@media print {
  .nav__menu,
  .nav__actions,
  .nav__backdrop,
  .nav__burger { display: none !important; }
  .logo__img { height: 46px !important; filter: none !important; }
}


/* ==========================================================================
   25. BLOG POST  —  editorial article layout
   Everything below is scoped to `.post`, which only blog-post.html carries.
   That matters: `.article-body` is shared with nine service pages, so an
   unscoped change here would silently restyle all of them.

   Structure, top to bottom:
     25.1  header band   full-width brand navy, like the hero on other pages
     25.2  layout grid   featured image + reading column | sticky sidebar,
                         with the top row overlapping the band
     25.3  prose         headings, lists, quotes, links, tables, media
     25.4  closing       share row and author card
     25.5  sidebar       contents list and consultation card
     25.6  responsive    single column below 56em
   ========================================================================== */
.post {
  --post-main: 44rem;   /* reading measure: ~75 characters of body copy */
  --post-aside: clamp(18.5rem, 25vw, 21rem);
  --post-gap: clamp(2rem, 4vw, 3.5rem);
  /* How far the image and sidebar ride up over the header band */
  --post-overlap: clamp(2.5rem, 7vw, 5.5rem);
  --post-aside-top: calc(var(--nav-h-stuck) + 1.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* --- 25.1 Header band ----------------------------------------------------- */
.article__head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The bottom padding is the overlap plus real breathing room, so the meta
     row never sits under the image that rides up over the band. */
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem)
                 calc(var(--post-overlap) + clamp(2rem, 4vw, 3rem));
  background: var(--grad-navy-soft);
  color: rgba(255, 255, 255, .82);
}
.article__head-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 70% at 88% 10%, rgba(47, 104, 190, .42), transparent 70%),
    radial-gradient(36% 60% at 4% 100%, rgba(210, 30, 59, .26), transparent 70%),
    repeating-linear-gradient(90deg, rgba(157, 190, 243, .05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(157, 190, 243, .05) 0 1px, transparent 1px 72px);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
}
.breadcrumb a { color: rgba(255, 255, 255, .72); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span[aria-hidden] { color: rgba(255, 255, 255, .35); }

.article__title {
  /* Capped in its own em so the headline breaks into two balanced lines on a
     desktop instead of running the full width of the band. */
  max-width: 19em;
  font-size: clamp(1.9rem, 1.3rem + 2.7vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: var(--white);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.35rem;
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .82);
}
.article__tag {
  display: inline-flex;
  align-items: center;
  padding: .34rem .85rem;
  border-radius: var(--r-pill);
  background: var(--red-500);
  color: var(--white);
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.3;
  text-transform: uppercase;
}
.article__meta-item { display: inline-flex; align-items: center; gap: .5rem; }
.article__meta-item .icon { width: 1.05em; height: 1.05em; color: var(--navy-300); }

/* --- 25.2 Layout grid ----------------------------------------------------- */
.article-layout {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem) var(--post-gap);
  margin-top: calc(-1 * var(--post-overlap));
  /* Above the band's own stacking context, so the overlap paints over it */
  position: relative;
  z-index: 1;
}
.article-main { min-width: 0; }

.article__figure { margin: 0; min-width: 0; }
.article__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--tint-100);
  box-shadow: var(--sh-lg);
}

@media (min-width: 56em) {
  .article-layout {
    /* The reading column is capped at its measure and the sidebar is fixed;
       whatever is left over becomes the gutter between them. Both outer
       edges therefore stay on the page container, in line with the logo
       above and the footer below. */
    grid-template-columns: minmax(0, var(--post-main)) var(--post-aside);
    justify-content: space-between;
    align-items: start;
  }
  .article__figure,
  .article-main { grid-column: 1; }
  .article-aside { grid-column: 2; grid-row: 1 / span 2; }
}

/* --- 25.3 Prose ----------------------------------------------------------- */
.post .article-body {
  max-width: none;
  margin: 0;
  font-size: clamp(1.0625rem, 1.03rem + .16vw, 1.125rem);
  line-height: var(--lh-prose);
  color: var(--body);
}
.post .article-body > * + * { margin-top: 1.3em; }

/* The column already has the grid gap above it, so whatever opens the prose
   must not add its own. With the contents sidebar in play the fallback
   callout ahead of it is display:none — still the first child, so the
   element after it is what actually starts the column. */
.post .article-body > :first-child,
.post.has-toc .article-body > .article-callout + * { margin-top: 0; }

/* Opening paragraph: a standfirst, a step up from the body */
.post .article-body > p:first-of-type {
  font-size: 1.16em;
  line-height: 1.65;
  color: var(--ink);
}

/* Major headings open a new section: a hairline across the column with a
   short brand segment sitting on it. */
.post .article-body > h2 {
  position: relative;
  margin-top: clamp(2.75rem, 6vw, 3.75rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.25rem);
  border-top: 1px solid var(--line);
  font-size: clamp(1.45rem, 1.25rem + .9vw, 1.9375rem);
  line-height: 1.2;
  letter-spacing: -.024em;
  scroll-margin-top: var(--scroll-offset);
}
.post .article-body > h2::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 56px;
  height: 3px;
  margin: 0;
  border-radius: 3px;
  background: var(--grad-line);
}
/* The heading that opens the column needs no divider above it */
.post .article-body > h2:first-child,
.post.has-toc .article-body > .article-callout + h2 {
  padding-top: 0;
  border-top: 0;
}
.post .article-body > h2:first-child::before,
.post.has-toc .article-body > .article-callout + h2::before { display: none; }

.post .article-body > h3 {
  margin-top: 2em;
  font-size: clamp(1.14rem, 1.08rem + .3vw, 1.28rem);
  line-height: var(--lh-snug);
  letter-spacing: -.015em;
  color: var(--ink);
  scroll-margin-top: var(--scroll-offset);
}
.post .article-body > h4 {
  margin-top: 1.8em;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
/* A heading and the sentence it introduces belong together; the generic
   sibling rhythm above pushes them too far apart. */
.post .article-body > h2 + * { margin-top: 1em; }
.post .article-body > h3 + *,
.post .article-body > h4 + * { margin-top: .6em; }

/* Lists: the browser markers are replaced with ones drawn from the system —
   the red dot of the eyebrow labels, and a numbered badge for sequences. */
.post .article-body > ul,
.post .article-body > ol {
  display: grid;
  gap: .7em;
  padding-left: 0;
  list-style: none;
}
.post .article-body > ul > li,
.post .article-body > ol > li { position: relative; }
.post .article-body > ul > li { padding-left: 1.9rem; }
.post .article-body > ul > li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: calc(.9em - 3.5px);  /* centred on the first line: half of 1.8 leading */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-500);
  box-shadow: 0 0 0 4px rgba(210, 30, 59, .14);
}
.post .article-body > ol { counter-reset: step; }
.post .article-body > ol > li {
  counter-increment: step;
  padding-left: 2.85rem;
}
.post .article-body > ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: calc(.9em - .95rem);
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--tint-100);
  border: 1px solid var(--tint-200);
  color: var(--navy-700);
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
}

.post .article-body strong { color: var(--ink); font-weight: 600; }
.post .article-body a {
  color: var(--navy-600);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--navy-300);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.post .article-body a:hover { color: var(--red-500); text-decoration-color: currentColor; }

/* Pull quote: a standout line set in the display face */
.pull-quote {
  position: relative;
  margin-block: clamp(2.25rem, 5vw, 3rem);
  padding: clamp(1.5rem, 3.2vw, 2.25rem);
  padding-left: clamp(3.9rem, 8vw, 5.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--tint-100), var(--tint-50) 60%);
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 1.08rem + .6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -.018em;
  color: var(--navy-700);
  text-wrap: balance;
}
.pull-quote::before {
  content: "\201C";
  position: absolute;
  left: clamp(1.15rem, 2.6vw, 1.75rem);
  top: clamp(.85rem, 2vw, 1.35rem);
  font-size: clamp(3.4rem, 7vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--red-500);
}
/* An ordinary quotation inside the prose */
.post .article-body > blockquote:not(.pull-quote) {
  padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--navy-300);
  color: var(--ink);
  font-style: italic;
}

/* Media, rules, tables and code an article may carry */
.post .article-body > hr {
  height: 1px;
  margin-block: clamp(2.25rem, 5vw, 3rem);
  border: 0;
  background: var(--line);
}
.post .article-body img {
  height: auto;
  border-radius: var(--r-md);
}
.post .article-body figure { margin-block: clamp(2rem, 4vw, 2.75rem); }
.post .article-body figcaption {
  margin-top: .75rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.post .article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.post .article-body th,
.post .article-body td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.post .article-body th {
  background: var(--tint-50);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
}
.post .article-body code {
  padding: .12em .4em;
  border-radius: 6px;
  background: var(--tint-100);
  font-size: .9em;
  color: var(--navy-700);
}

/* Fallback contents card. Shown only until article.js has built the real
   list in the sidebar — see `.has-toc`. */
.article-callout {
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--tint-50);
}
.post .article-body > .article-callout { margin-bottom: 2.5rem; }
.post.has-toc .article-callout { display: none; }
.article-callout h2 {
  margin: 0 0 .85rem;
  font-size: var(--fs-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--navy-700);
}
.article-callout h2::before { display: none; }
.article-callout ul { margin-top: 0; font-size: .97rem; }
/* Contents links read as navigation, not as inline prose citations */
.post .article-callout a { text-decoration: none; }
.post .article-callout a:hover { text-decoration: underline; }

/* --- 25.4 Share + author, as a closing block ------------------------------ */
.article__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: 1.15rem;
  border-block: 1px solid var(--line);
}
.article__share-label {
  /* Pushes the buttons to the far edge; the row reads label left, actions right */
  margin-right: auto;
  padding-right: .5rem;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}
.article__share a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--navy-700);
  transition: background var(--t-fast), color var(--t-fast),
              transform var(--t-fast), border-color var(--t-fast);
}
.article__share a:hover {
  background: var(--navy-700);
  border-color: transparent;
  color: var(--white);
  transform: translateY(-2px);
}

.author-card {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--tint-50);
}
.author-card__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-navy-soft);
  color: var(--white);
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--line);
}
.author-card__mark svg { width: 26px; height: 26px; }
.author-card strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  line-height: var(--lh-snug);
  letter-spacing: -.01em;
  color: var(--ink);
}
.author-card p {
  margin-top: .4rem;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
}

/* --- 25.5 Sidebar --------------------------------------------------------- */
.article-aside {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  min-width: 0;
}
@media (min-width: 56em) {
  .article-aside {
    position: sticky;
    top: var(--post-aside-top);
    display: flex;
    flex-direction: column;
    /* Bounded by the viewport so a long contents list scrolls inside the
       sidebar instead of running off the bottom of a short screen. */
    max-height: calc(100vh - var(--post-aside-top) - 1.5rem);
  }
  .toc { min-height: 0; }
  .aside-cta { flex: none; }
}

/* Contents list */
.toc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
/* The shell ships with `hidden` and article.js reveals it once the list is
   built. An author-origin `display: flex` beats the UA's `[hidden]` rule, so
   the attribute has to be honoured explicitly or the empty box would show for
   anyone without scripting. */
.toc[hidden] { display: none; }

.toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex: none;
  padding: 1.2rem 1.4rem .85rem;
}
.toc__title {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--navy-700);
}
.toc__title::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-500);
  box-shadow: 0 0 0 4px rgba(210, 30, 59, .14);
}

.toc__toggle {
  display: none;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-block: -.4rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--tint-50);
  color: var(--navy-700);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.toc__toggle:hover { background: var(--tint-100); border-color: var(--line-strong); }
.toc__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast);
}
.toc__toggle[aria-expanded="true"] .toc__chevron { transform: translateY(2px) rotate(225deg); }

.toc__list {
  /* Positioned so article.js measures each link against the list itself when
     it keeps the active entry in view. */
  position: relative;
  display: grid;
  padding: 0 1.4rem 1.3rem;
  /* Flex children refuse to shrink past their content without this, which
     would push the list out of the bounded sidebar instead of scrolling it. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.toc__list::-webkit-scrollbar { width: 8px; }
.toc__list::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
  border: 2px solid var(--white);
}

/* Each link carries a segment of one continuous rail down the left of the
   list; the active section lights its segment in the brand red. */
.toc__link {
  display: block;
  padding: .46rem 0 .46rem 1rem;
  border-left: 2px solid var(--line);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.toc__link:hover { color: var(--navy-700); border-left-color: var(--navy-300); }
.toc__item--h3 .toc__link {
  padding-left: 1.85rem;
  font-size: .85rem;
  font-weight: 400;
}
/* The section being read, and the major heading it sits under */
.toc__link.is-parent { color: var(--ink); }
.toc__link.is-active {
  color: var(--navy-700);
  font-weight: 600;
  border-left-color: var(--red-500);
}

/* Consultation card */
.aside-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.35rem, 2.2vw, 1.6rem);
  border-radius: var(--r-lg);
  background: var(--grad-navy-soft);
  color: rgba(255, 255, 255, .8);
  box-shadow: var(--sh-md);
}
.aside-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 90% at 100% 0%, rgba(210, 30, 59, .36), transparent 68%);
}
.aside-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .9rem;
  padding: .28rem .75rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--white);
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.aside-cta__badge .icon { width: .95em; height: .95em; color: var(--red-200); }
.aside-cta__title {
  margin-bottom: .55rem;
  font-size: 1.125rem;
  line-height: var(--lh-snug);
  letter-spacing: -.015em;
  color: var(--white);
}
.aside-cta p {
  margin-bottom: var(--sp-4);
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}
.aside-cta .btn { width: 100%; }
.aside-cta__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .8rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}
.aside-cta__phone:hover { color: var(--red-200); }
.aside-cta__phone .icon { color: var(--navy-300); }

/* Desktop sidebar: sub-headings only show for the section being read, which
   keeps the list short enough to sit beside the consultation card without
   scrolling. article.js sets .is-open on the current section's entries. */
@media (min-width: 56em) {
  .toc__item--h3:not(.is-open) { display: none; }
}
/* Laptop-height screens: the card drops its badge and paragraph — the heading
   and both actions remain — before the contents list is forced to scroll. */
@media (min-width: 56em) and (max-height: 60em) {
  .aside-cta p,
  .aside-cta__badge { display: none; }
  .aside-cta__title { margin-bottom: var(--sp-4); }
}

/* --- 25.6 Below the sidebar breakpoint ------------------------------------
   The sidebar stops being a column. `display: contents` promotes its cards to
   grid items of the layout itself, so the order can run image → contents →
   article. A wrapper 
 rather than