/* ========================================================================= Steam Cleaning Phuket — Design System Brand navy #011748 + white. Premium, clinical, editorial. Mobile-first. ========================================================================= */ /* ---------- Design tokens ---------- */ :root { /* Brand — sampled from client logo */ --navy: #011748; /* primary brand navy */ --navy-900: #010f31; --navy-800: #021c56; --navy-700: #062a72; --navy-600: #0d3c96; --navy-500: #1a55bd; /* interactive */ --navy-400: #3d79dd; /* accent on light */ --navy-300: #7aa5ea; /* accent on dark */ --navy-200: #b9d0f5; --navy-100: #e2ecfb; --wash: #eff4fc; /* pale blue wash */ --paper: #ffffff; --surface: #f5f8fd; --surface-2: #e9f0fa; --line: #dbe4f2; --line-soft: #e8eef8; --text: #011748; --text-2: #47587a; --text-3: #7d8ca8; --on-dark: #eaf1fb; --on-dark-2: #a9bddf; /* Validation — the one non-navy accent, reserved for form errors */ --error: #b3261e; --error-ring: rgba(179,38,30,.16); /* Type */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: "Newsreader", Georgia, "Times New Roman", serif; /* Rhythm */ --maxw: 1200px; --gutter: clamp(1.15rem, 4vw, 2.5rem); --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(1,23,72,.06), 0 2px 8px rgba(1,23,72,.05); --shadow: 0 10px 34px rgba(1,23,72,.10); --shadow-lg: 0 28px 68px rgba(1,23,72,.20); --ring: 0 0 0 3px rgba(61,121,221,.25); --header-h: 88px; --topbar-h: 40px; /* Clearance below the sticky header — JS keeps this in sync with real height */ --sticky-offset: calc(var(--topbar-h) + var(--header-h) + 20px); --ease: cubic-bezier(.22,.68,.32,1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Anchor jumps / in-page links land below the sticky header */ scroll-padding-top: var(--sticky-offset); } body { margin: 0; font-family: var(--font-sans); color: var(--text); background: var(--paper); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* clip stray horizontal overflow without creating a scroll container on (which would break position:sticky and IntersectionObserver) */ html { overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } a { color: var(--navy-500); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--navy-600); } h1, h2, h3, h4 { line-height: 1.1; margin: 0 0 .5em; color: var(--navy); font-weight: 700; letter-spacing: -.025em; } p { margin: 0 0 1rem; } ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; } li { margin: .3rem 0; } strong { color: var(--navy); font-weight: 650; } :focus-visible { outline: 3px solid var(--navy-400); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--navy-200); color: var(--navy); } /* ---------- Layout ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 820px; margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; } .section-sm { padding-block: clamp(2.5rem, 5vw, 4rem); } .section.alt { background: var(--surface); } .section.ink { background: var(--navy); color: var(--on-dark); } .section.ink h1,.section.ink h2,.section.ink h3 { color: #fff; } .section.teal { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%); color: var(--on-dark); } .section.teal h1,.section.teal h2,.section.teal h3 { color:#fff; } .center { text-align: center; } /* Type scale */ /* Section label — no decorative rule; the type carries it. */ .eyebrow { display: inline-block; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-500); margin: 0 0 .9rem; } .section.ink .eyebrow, .section.teal .eyebrow { color: var(--navy-300); } h1, .h1 { font-size: clamp(2.15rem, 5.4vw, 3.9rem); } h2, .h2 { font-size: clamp(1.75rem, 3.7vw, 2.7rem); } h3, .h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); } .lead { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--text-2); line-height: 1.55; } .section.ink .lead, .section.teal .lead { color: var(--on-dark-2); } .hero .lead { color: var(--text-2); } .serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.015em; } .muted { color: var(--text-3); } /* Thai vowels and tone marks sit above/below the base letter. Tight Latin line-heights (1.1) make those marks collide across lines. */ html[lang="th"] body { line-height: 1.75; } html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4, html[lang="th"] .h1, html[lang="th"] .h2, html[lang="th"] .h3, html[lang="th"] .article h1, html[lang="th"] .article-body h2, html[lang="th"] .blog-card-body h3, html[lang="th"] .pagehead h1 { line-height: 1.5; letter-spacing: 0; overflow: visible; padding-block: .1em .16em; } html[lang="th"] p, html[lang="th"] li, html[lang="th"] .lead, html[lang="th"] td, html[lang="th"] th, html[lang="th"] blockquote, html[lang="th"] .faq-q, html[lang="th"] .card p, html[lang="th"] .card h3, html[lang="th"] .statement-body > p, html[lang="th"] .quote-card blockquote, html[lang="th"] .article-body > p, html[lang="th"] .checks li { line-height: 1.7; } .small { font-size: .9rem; } .measure { max-width: 62ch; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--navy); --btn-fg: #fff; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: 1rem; line-height: 1; padding: 1rem 1.7rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); box-shadow: var(--shadow-sm); } /* shine sweep */ .btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-20deg); transition: left .6s var(--ease); } .btn:hover::after { left: 130%; } .btn:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--shadow); background: var(--navy-700); } .btn:active { transform: translateY(-1px); } .btn svg { width: 1.05em; height: 1.05em; position: relative; z-index: 1; transition: transform .25s var(--ease); } .btn:hover svg:last-child { transform: translateX(4px); } .btn.gold { --btn-bg: var(--navy-500); } .btn.gold:hover { background: var(--navy-600); } .btn.ghost { --btn-bg: transparent; --btn-fg: var(--navy); border-color: var(--line); box-shadow: none; } .btn.ghost:hover { background: var(--wash); color: var(--navy-600); border-color: var(--navy-300); } .btn.on-dark { --btn-bg: #fff; --btn-fg: var(--navy); } .btn.on-dark:hover { background: #fff; color: var(--navy); } .btn.ghost.on-dark { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.4); } .btn.ghost.on-dark:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.7); } .btn.lg { padding: 1.15rem 2.1rem; font-size: 1.06rem; } .btn.block { display: flex; width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; } /* ---------- Top utility bar ---------- */ .topbar { background: var(--navy); color: var(--on-dark-2); font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.08); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--topbar-h); padding-block: .45rem; flex-wrap: wrap; } .topbar-left, .topbar-right { display: flex; align-items: center; gap: .15rem 1.15rem; flex-wrap: wrap; } .topbar-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--on-dark-2); font-weight: 550; white-space: nowrap; transition: color .2s var(--ease); } .topbar-link svg { width: 14px; height: 14px; color: var(--navy-300); flex-shrink: 0; } .topbar-link small { display: inline-flex; align-items: center; justify-content: center; margin-left: .15rem; padding: .05rem .35rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: .04em; } .topbar-link:hover { color: #fff; } .topbar-cta { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: .28rem .7rem; border-radius: 999px; color: #fff; font-weight: 650; } .topbar-cta:hover { background: #fff; color: var(--navy); } .topbar-cta:hover svg { color: var(--navy); } @media (max-width: 760px) { /* Slim utility strip — WhatsApp icon + labeled EN/TH phones + CTA */ .topbar-inner { min-height: 36px; padding-block: .35rem; gap: .55rem; flex-wrap: nowrap; } .topbar-left { gap: .35rem; min-width: 0; } .topbar-right { gap: .45rem; flex-shrink: 0; } .topbar-left .topbar-link span { display: none; } .topbar-link[href^="mailto"] { display: none; } /* email lives in the menu / footer */ .topbar-left .topbar-link { width: 32px; height: 32px; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.06); } .topbar-left .topbar-link svg { width: 15px; height: 15px; color: #fff; margin: 0; } /* Phone buttons: keep EN / TH visible so the two icons aren't identical */ .topbar-left .topbar-link[href^="tel"] { width: auto; min-width: 2.75rem; padding: 0 .4rem; gap: .2rem; } .topbar-left .topbar-link[href^="tel"] small { display: inline-flex; margin: 0; padding: 0; background: transparent; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .05em; line-height: 1; } .topbar-left .topbar-link:not([href^="tel"]) small { display: none; } .topbar-cta { width: auto; height: auto; padding: .42rem .9rem; font-size: .72rem; letter-spacing: .02em; background: #fff; color: var(--navy); border-color: #fff; gap: .35rem; } .topbar-cta span { display: inline; color: inherit; } .topbar-cta svg { color: var(--navy); width: 12px; height: 12px; } .topbar-cta:hover { background: var(--navy-100); color: var(--navy); } } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; /* Solid-ish fill (no backdrop-filter) so fixed mobile nav isn't trapped inside the header's containing block and clipped to header height. */ background: rgba(255,255,255,.97); border-bottom: 1px solid transparent; transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .site-header.scrolled { border-bottom-color: var(--line-soft); box-shadow: 0 4px 24px rgba(1,23,72,.07); } .header-inner { display: flex; align-items: center; gap: 1.2rem; height: var(--header-h); transition: height .3s var(--ease); } .site-header.scrolled .header-inner { height: 72px; } .brand { display: flex; align-items: center; flex-shrink: 0; } .brand img { height: 58px; width: auto; transition: height .3s var(--ease); } .site-header.scrolled .brand img { height: 48px; } .nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; min-width: 0; } .nav a.navlink { position: relative; display: inline-flex; align-items: center; color: var(--navy); font-weight: 550; font-size: .95rem; padding: .55rem .72rem; border-radius: 8px; transition: color .2s var(--ease); white-space: nowrap; line-height: 1.2; } .nav a.navlink::after { content: ""; position: absolute; left: .72rem; right: .72rem; bottom: .3rem; height: 2px; background: var(--navy-500); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); border-radius: 2px; } .nav a.navlink:hover { color: var(--navy-500); } .nav a.navlink:hover::after, .nav a.navlink[aria-current="page"]::after { transform: scaleX(1); } .nav a.navlink[aria-current="page"] { color: var(--navy-500); } /* Thai / Russian labels run longer — keep one baseline, tighter chrome */ html[lang="th"] .nav a.navlink, html[lang="ru"] .nav a.navlink { font-size: .84rem; padding: .5rem .48rem; } html[lang="th"] .nav a.navlink::after, html[lang="ru"] .nav a.navlink::after { left: .48rem; right: .48rem; } html[lang="th"] .nav, html[lang="ru"] .nav { gap: 0; } /* Only the desktop nav lang control — not the mobile header clone */ html[lang="th"] .nav > .lang, html[lang="ru"] .nav > .lang { margin-left: .25rem; } /* Dropdown — only one open; closes instantly on leave (no fade-out pile-up) */ .has-drop { position: relative; display: flex; align-items: center; } /* Invisible bridge so the cursor can move from the tab into the panel without a gap blink */ .has-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } .drop-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 275px; padding: .5rem; opacity: 0; visibility: hidden; pointer-events: none; transition: none; /* snap closed — prevents two menus overlapping while fading */ z-index: 50; } .has-drop.is-open > .drop-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity .16s var(--ease), transform .16s var(--ease); z-index: 70; } .has-drop.is-open > .navlink { color: var(--navy-500); } .has-drop.is-open > .navlink::after { transform: scaleX(1); } .drop-panel a { display: block; padding: .65rem .75rem; border-radius: 9px; color: var(--navy); font-size: .92rem; font-weight: 550; transition: background .18s var(--ease), transform .18s var(--ease); } .drop-panel a:hover { background: var(--wash); color: var(--navy-600); transform: translateX(3px); } .drop-panel small { display: block; color: var(--text-3); font-weight: 400; font-size: .78rem; } /* Lang switcher */ .lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); margin-left: .5rem; } .lang a, .lang .lang-off { display: inline-flex; align-items: center; justify-content: center; min-width: 2.35rem; padding: .38rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--text-2); letter-spacing: .06em; transition: background .2s var(--ease), color .2s var(--ease); line-height: 1.2; } .lang a[aria-current="true"] { background: var(--navy); color: #fff; } .lang a:hover { background: var(--wash); color: var(--navy-500); } .lang a[aria-current="true"]:hover { background: var(--navy); color: #fff; } /* Unused when all locales are live; kept for optional disabled labels */ .lang .lang-off { cursor: default; user-select: none; opacity: .55; pointer-events: none; } /* Compact EN/TH/RU control shown in the header bar on mobile/tablet */ .lang-mobile { display: none; } /* Mobile drawer only — WhatsApp lives in the topbar on desktop */ .header-cta { display: none; } /* Mobile menu button — borderless, morphs to × when open */ .hamburger { display: none; margin-left: auto; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; align-items: center; justify-content: center; color: var(--navy); transition: background .25s var(--ease), color .25s var(--ease); -webkit-tap-highlight-color: transparent; } .hamburger:hover, .hamburger:focus-visible { background: var(--wash); } .hamburger-box { position: relative; display: block; width: 20px; height: 14px; } .hamburger-line { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .2s var(--ease), top .35s var(--ease); } .hamburger-line:nth-child(1) { top: 0; } .hamburger-line:nth-child(2) { top: 6.25px; } .hamburger-line:nth-child(3) { top: 12.5px; } body.nav-open .hamburger { background: var(--navy); color: #fff; } body.nav-open .hamburger-line:nth-child(1) { top: 6.25px; transform: rotate(45deg); } body.nav-open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } body.nav-open .hamburger-line:nth-child(3) { top: 6.25px; transform: rotate(-45deg); } /* Scrim behind the drawer — sibling of header content, fixed to the viewport */ .nav-scrim { display: none; position: fixed; inset: 0; z-index: 110; background: rgba(1, 23, 72, .45); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); } @media (max-width: 1180px) { :root { --header-h: 68px; --topbar-h: 36px; } .header-inner { height: var(--header-h); gap: .75rem; } .site-header.scrolled .header-inner { height: 60px; } .brand img { height: 44px; } .site-header.scrolled .brand img { height: 40px; } .hamburger { display: inline-flex; margin-left: 0; flex-shrink: 0; } /* Always-visible language pills next to the menu button */ .header-inner > .lang-mobile { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; margin-right: .1rem; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); width: auto; max-width: none; align-self: center; flex-shrink: 0; } .header-inner > .lang-mobile a, .header-inner > .lang-mobile .lang-off { flex: 0 0 auto; min-width: 1.85rem; min-height: 0; padding: .3rem .45rem; font-size: .68rem; letter-spacing: .05em; color: var(--text-2); } .header-inner > .lang-mobile a[aria-current="true"] { background: var(--navy); color: #fff; box-shadow: none; } .header-inner > .lang-mobile a:hover { background: var(--wash); color: var(--navy-500); } .header-inner > .lang-mobile a[aria-current="true"]:hover { background: var(--navy); color: #fff; } /* Holds layout space when the real header is position:fixed (inserted by JS) */ .nav-header-spacer { display: none; width: 100%; margin: 0; padding: 0; pointer-events: none; } body.nav-open .nav-header-spacer { display: block; } .nav-scrim { display: block; /* Sit under the header so the menu bar stays crisp and undimmed */ top: var(--nav-drawer-top, calc(var(--topbar-h) + var(--header-h))); } body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; } .nav { position: fixed; /* Flush under the header border — set in JS from header.getBoundingClientRect().bottom */ top: var(--nav-drawer-top, calc(var(--topbar-h) + var(--header-h))); right: 0; bottom: auto; height: calc(100dvh - var(--nav-drawer-top, calc(var(--topbar-h) + var(--header-h)))); max-height: calc(100vh - var(--nav-drawer-top, calc(var(--topbar-h) + var(--header-h)))); width: min(86vw, 340px); z-index: 120; margin: 0; padding: .35rem 1.25rem 2.5rem; background: #fff; flex-direction: column; align-items: stretch; gap: 0; overflow-x: hidden; overflow-y: auto; border-left: 1px solid var(--line-soft); border-top: none; /* Shadow only left/down — never across the header border */ box-shadow: -16px 18px 36px rgba(1, 23, 72, .14); clip-path: inset(0 -40px -40px -40px); transform: translate3d(100%, 0, 0); visibility: hidden; pointer-events: none; transition: transform .4s var(--ease), visibility 0s linear .4s; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav::-webkit-scrollbar { width: 0; height: 0; } body.nav-open .nav { transform: translate3d(0, 0, 0); visibility: visible; pointer-events: auto; transition: transform .4s var(--ease), visibility 0s; } /* Lock background scroll while the drawer is open (iOS needs position:fixed) */ html.nav-open { overflow: hidden; overscroll-behavior: none; } body.nav-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; overscroll-behavior: none; } /* Keep logo / EN·TH·RU / hamburger pinned; always paint above the drawer */ body.nav-open .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 130; background: #fff; border-bottom: 1px solid var(--line-soft); box-shadow: none; } .nav a.navlink, html[lang="th"] .nav a.navlink, html[lang="ru"] .nav a.navlink { padding: 1.05rem 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; font-size: 1.05rem; font-weight: 600; white-space: normal; letter-spacing: -.01em; line-height: 1.35; } .nav a.navlink::after { display: none; } .has-drop { display: block; border-bottom: 1px solid var(--line-soft); } .has-drop::after { display: none; } /* Accordion dropdowns — clean nested block under the parent row */ .has-drop .drop-panel, .has-drop.is-open > .drop-panel { display: none; position: static; left: auto; top: auto; right: auto; width: auto; min-width: 0; max-width: none; margin: 0 0 .55rem; padding: .15rem 0 .15rem .9rem; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--navy-100); border-radius: 0; background: var(--surface); transition: none; z-index: auto; } .has-drop.is-open > .drop-panel { display: block; } .has-drop .drop-panel a, .has-drop .drop-panel a:hover { display: block; padding: .75rem .75rem .75rem 0; font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--navy); border-radius: 0; border-bottom: none; background: transparent; transform: none; } .has-drop .drop-panel a + a { border-top: 1px solid var(--line-soft); } .has-drop .drop-panel small { display: block; margin-top: .2rem; font-size: .8rem; font-weight: 500; line-height: 1.35; color: var(--text-2); } .drop-toggle-label { display: flex !important; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: 1.05rem 0; font-weight: 700; color: var(--navy); border-bottom: none; } .drop-toggle-label::after { content: ""; width: 0.55rem; height: 0.55rem; margin-right: .15rem; border-right: 1.5px solid var(--navy-400); border-bottom: 1.5px solid var(--navy-400); transform: rotate(45deg); transition: transform .25s var(--ease); flex-shrink: 0; } .has-drop.is-open > .drop-toggle-label::after { transform: rotate(-135deg); margin-top: .25rem; } .has-drop.is-open > .drop-toggle-label { color: var(--navy-500); } .header-cta { display: inline-flex; align-self: center; width: auto; max-width: 100%; margin: 1.5rem auto 0; padding: .9rem 1.25rem; font-size: .95rem; white-space: nowrap; } /* Language lives in the header on small screens — hide the drawer duplicate */ .nav > .lang { display: none; } } @media (max-width: 760px) { :root { --topbar-h: 44px; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(165deg, #ffffff 0%, #f7faff 52%, #eef3fb 100%); color: var(--text); border-bottom: 1px solid var(--line-soft); } .hero::before, .hero::after { display: none; } .hero-grid-tex { display: none; } .hero-inner { position: relative; padding-top: clamp(1.6rem, 3.5vw, 2.6rem); padding-bottom: clamp(2.4rem, 5.5vw, 4rem); display: grid; gap: 2.5rem; z-index: 1; } .hero h1 { color: var(--navy); max-width: 16ch; } .hero .lead { max-width: 54ch; color: var(--text-2); } .hero .eyebrow { color: var(--navy-500); } @media (min-width: 900px) { .hero-inner.split { grid-template-columns: 1.15fr .85fr; align-items: center; } } .hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; } .hero-visual { position: relative; } .hero-visual .media.has-photo { min-height: 380px; box-shadow: var(--shadow-lg); border: 1px solid var(--line-soft); } .hero-visual .media.has-photo::after { background: linear-gradient(180deg, rgba(1,23,72,.03) 0%, transparent 42%, rgba(1,23,72,.06) 100%); } @media (max-width: 900px){ .hero-visual .media.has-photo { min-height: 260px; } } /* ---------- Certification strip ---------- */ .certstrip { background: var(--navy-800); color: var(--on-dark); border-top: 1px solid rgba(255,255,255,.08); overflow: hidden; } .certstrip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.7rem; padding-block: 1.15rem; } .certstrip .item { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 600; letter-spacing: .02em; color: var(--on-dark); white-space: nowrap; } .certstrip .item svg { width: 18px; height: 18px; color: var(--navy-300); } .certstrip .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.28); } @media (max-width:700px){ .certstrip .dot { display:none; } } /* ---------- Badges / pills ---------- */ .badge { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.17); color: var(--on-dark); padding: .55rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600; transition: background .25s var(--ease), transform .25s var(--ease); } .badge:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); } .badge svg { width: 16px; height: 16px; color: var(--navy-300); } .pill { display:inline-flex; align-items:center; gap:.4rem; background: var(--wash); color: var(--navy-600); border:1px solid var(--navy-200); padding:.38rem .8rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.02em; } .pill.gold { background: var(--navy); color:#fff; border-color: var(--navy); } .stat { font-weight: 800; letter-spacing: -.03em; color: var(--navy-500); } .section.ink .stat, .section.teal .stat { color: #fff; } /* ---------- Grid + cards ---------- */ .grid { display: grid; gap: 1.4rem; } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px){ .g-3, .g-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px){ .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } } /* Cards are flex columns so the trailing link/button of every card in a row lands on the same baseline, however long the copy above it runs. */ .card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .card > .more, .card > .card-foot { margin-top: auto; } .card > .more { align-self: flex-start; padding-top: .5rem; } .card-foot { padding-top: .9rem; } .card-foot .muted.small { margin-bottom: .9rem; } .card-foot .btn { align-self: flex-start; } /* top accent line reveal */ .card.link::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--navy-500), var(--navy-300)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .card.link:hover::before { transform: scaleX(1); } .card.link:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--navy-200); } .card > .seg-top { margin: -1.7rem -1.7rem 1.15rem; height: 180px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; } .card > .seg-top .media { min-height: 180px; height: 100%; border-radius: 0; } .card > .seg-top + h3 { margin-top: 0; } .card p { color: var(--text-2); margin-bottom: .8rem; } .card .ico { width: 54px; height: 54px; border-radius: 14px; background: var(--wash); color: var(--navy-500); display: grid; place-items: center; margin-bottom: 1rem; transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); } .card .ico svg { width: 28px; height: 28px; } .card.link:hover .ico { background: var(--navy); color: #fff; transform: scale(1.06) rotate(-4deg); } /* Scoped to the class, not to `.card` — blog cards and any future component use `.more` too, and without this the inline SVG renders at full size. */ .more { font-weight: 650; font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem; color: var(--navy-500); } .more svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease); } .card.link:hover .more svg, .blog-card:hover .more svg { transform: translateX(5px); } /* Segment card */ .seg { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .seg .seg-top { height: 155px; position: relative; overflow: hidden; } .seg .seg-top .media { min-height: 155px; height: 100%; border-radius: 0; transition: transform .6s var(--ease); } .seg:hover .seg-top .media { transform: scale(1.06); } .seg .seg-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; } .seg .seg-body p { flex: 1; } /* Icon badge on photos (top-left, brand navy) */ .media-badge { position: absolute; top: 12px; left: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(1,23,72,.28); border: 1px solid rgba(255,255,255,.18); pointer-events: none; } .media-badge svg { width: 22px; height: 22px; } .seg .seg-top .media-badge { top: 10px; left: 10px; width: 40px; height: 40px; border-radius: 10px; } .seg .seg-top .media-badge svg { width: 20px; height: 20px; } /* Feature list */ .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; } .checks li { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start; margin: 0; } .checks li svg { width: 22px; height: 22px; color: var(--navy-500); margin-top: 2px; } .section.ink .checks li svg, .section.teal .checks li svg { color: var(--navy-300); } /* Two-column feature */ .feature { display: grid; gap: 2.6rem; align-items: center; } @media (min-width: 900px){ .feature { grid-template-columns: 1fr 1fr; } .feature.rev > :first-child { order: 2; } } /* `.fill` — for rows where one column is a tall panel (a case study). The photo keeps its own landscape crop rather than being stretched to match; the headline figures below it take up the remaining height, so both columns finish level and the leftover space becomes deliberate spacing, not a void. */ .feature.fill { align-items: stretch; } .feature.fill > * { display: flex; flex-direction: column; } .feature.fill .media { aspect-ratio: 16 / 11; min-height: 0; height: auto; flex: none; } .feature.fill .casestudy { flex: 1; } /* Media placeholder */ .media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); min-height: 330px; display: grid; place-items: center; color: var(--navy-300); } .media.soft { background: linear-gradient(135deg, var(--surface-2), var(--wash)); color: var(--navy-500); } .media .ph-note { position:absolute; bottom:12px; left:12px; right:12px; font-size:.72rem; letter-spacing:.03em; background: rgba(1,23,72,.6); color:#fff; padding:.42rem .65rem; border-radius:9px; backdrop-filter: blur(4px); } .media.soft .ph-note { background: rgba(1,23,72,.1); color: var(--navy-600); } .media .ph-icon { width: 74px; height: 74px; opacity: .48; animation: floaty 6s ease-in-out infinite; } /* Real photography */ .media.has-photo { background: var(--navy-900); display: block; } .media.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } /* Curtains card: keep sheers + arched windows in frame on short crops */ .media.has-photo img[src*="curtains.jpg"] { object-position: 50% 35%; } /* faint navy tint keeps photos on-brand without dulling them */ .media.has-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(1,23,72,.12) 0%, rgba(1,23,72,0) 45%, rgba(1,23,72,.22) 100%); } .feature .media.has-photo:hover img, .card:hover .media.has-photo img { transform: scale(1.05); } @media (max-width: 900px){ .hero-visual .media.has-photo { min-height: 260px; } } @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} } /* ---------- Tables ---------- */ .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } table.data { border-collapse: collapse; width: 100%; min-width: 620px; background: #fff; font-size: .95rem; } table.data th, table.data td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line-soft); } table.data thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: .88rem; } table.data thead th:last-child { background: var(--navy-500); } table.data tbody th { font-weight: 600; color: var(--navy); background: var(--surface); } table.data tbody tr { transition: background .2s var(--ease); } table.data tbody tr:hover { background: var(--wash); } table.data td.hl { background: var(--wash); font-weight: 650; color: var(--navy-600); } table.data tr:last-child td, table.data tr:last-child th { border-bottom: none; } /* ---------- Testimonials ---------- */ .quote-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem 1.85rem 1.65rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0; min-height: 0; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--navy-200); } .quote-card blockquote { margin: 0 0 1.35rem; padding: 0; font-size: 1.02rem; line-height: 1.55; letter-spacing: -.01em; color: var(--navy-800); font-family: var(--font-serif); text-align: left; text-wrap: pretty; } .quote-card .who { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); } .quote-card .avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; } .quote-card .who b { display: block; font-size: .95rem; color: var(--navy); line-height: 1.25; } .quote-card .who small { display: block; color: var(--text-3); font-size: .82rem; line-height: 1.3; margin-top: .12rem; } .stars { color: #fbbc04; letter-spacing: 2.5px; font-size: .95rem; margin-bottom: .75rem; line-height: 1; } .grid.quotes { align-items: stretch; gap: 1.25rem; } @media (min-width: 760px) { .grid.quotes.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Lead magnet ---------- */ .leadmag { position: relative; overflow: hidden; background: linear-gradient(130deg, var(--navy) 0%, var(--navy-700) 100%); color: var(--on-dark); border-radius: var(--radius-lg); } .leadmag::before { content:""; position:absolute; inset:0; background: radial-gradient(75% 130% at 100% 0%, rgba(61,121,221,.45), transparent 62%); } .lm-inner { position: relative; display: grid; gap: 2rem; align-items: center; padding: clamp(2rem,5vw,3.4rem); } @media (min-width: 800px){ .lm-inner { grid-template-columns: 1fr auto; } } .lm-inner h2 { color: #fff; } .book-cover { margin: 0; border-radius: 6px 12px 12px 6px; overflow: hidden; box-shadow: var(--shadow-lg), -8px 0 0 rgba(0,0,0,.22); background: #fff; line-height: 0; } .book-cover img { width: 100%; height: auto; display: block; } .book-cover.home-book { width: min(220px, 42vw); display: block; transition: transform .5s var(--ease); } .leadmag:hover .book-cover.home-book { transform: rotate(-3deg) translateY(-6px); } /* Invisible Standard download gate */ .book-gate { display: grid; gap: 2.5rem; align-items: start; } @media (min-width: 960px) { .book-gate { grid-template-columns: minmax(280px, 1fr) minmax(300px, 420px); gap: 3.5rem; } } .book-cover-panel { text-align: left; } .book-whats-inside { margin-bottom: 1.75rem; } .book-whats-inside .checks { gap: .85rem; } .book-whats-inside .checks li { font-size: .98rem; color: var(--text-2); } /* The cover is the hero of this panel — centred in its column rather than pinned to the left edge, with the caption tracking it. */ .book-cover-panel .book-cover { max-width: 380px; margin-inline: auto; border: 0; border-radius: 0; background: transparent; box-shadow: var(--shadow-lg); } .book-cover-meta { margin: 1rem auto 0; max-width: 380px; text-align: center; } .book-gate-form { max-width: none; position: sticky; top: var(--sticky-offset); } @media (max-width: 959px) { .book-cover-panel .book-cover { margin-inline: auto; } .book-cover-meta { margin-inline: auto; text-align: center; } .book-gate-form { position: static; } } /* Contact — tight, premium form layout (fills the space under the banner) */ .contact-section { padding-top: clamp(1.25rem, 3vw, 2rem); padding-bottom: clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 42%); } .contact-layout { display: grid; gap: 1.75rem; align-items: start; } @media (min-width: 960px) { .contact-layout { grid-template-columns: 1.2fr .9fr; gap: 2rem; } } .contact-form-card { padding: clamp(1.75rem, 3.5vw, 2.6rem); border: 1px solid var(--line); box-shadow: var(--shadow); background: linear-gradient(180deg, #fff 0%, #fbfcff 100%); } .contact-form-card .eyebrow { margin-bottom: .45rem; } .contact-form-lead { margin: .35rem 0 1.35rem; font-size: .98rem; max-width: 48ch; } .contact-form-card .form { gap: 1.1rem; } .contact-form-card .field input, .contact-form-card .field select, .contact-form-card .field textarea, .contact-form-card .custom-select-trigger { padding: 1rem 1.05rem; border-radius: 12px; background: var(--paper); } .contact-form-card .field textarea { min-height: 150px; } .contact-form-card .btn.block { margin-top: .25rem; } .contact-aside { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.5vw, 1.9rem); box-shadow: var(--shadow-sm); } .contact-aside .map-wrap { border-radius: 12px; } .contact-aside .contact-list { gap: 1rem; } /* ---------- FAQ accordion ---------- */ .faq { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); } .faq-item + .faq-item { border-top: 1px solid var(--line-soft); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 650; color: var(--navy); padding: 1.2rem 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.03rem; transition: color .2s var(--ease), background .2s var(--ease); } .faq-q:hover { color: var(--navy-500); background: var(--wash); } .faq-q .chev { width: 22px; height: 22px; flex-shrink: 0; transition: transform .35s var(--ease); color: var(--navy-500); } .faq-q[aria-expanded="true"] { color: var(--navy-500); } .faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .faq-a > div { overflow: hidden; } .faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; } .faq-a p { padding: 0 1.35rem 1.3rem; color: var(--text-2); margin: 0; } /* ---------- Case study ---------- */ .casestudy { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); } .casestudy .cs-name { font-weight: 700; color: var(--navy); font-size: 1.25rem; margin-bottom: 1.15rem; letter-spacing: -.02em; } .casestudy dl { display: grid; gap: 1rem; margin: 0; } .casestudy dl > div { padding-bottom: .9rem; border-bottom: 1px solid var(--line-soft); } .casestudy dl > div:last-child { padding-bottom: 0; border-bottom: 0; } /* Headline figures under the case-study photo. The rows flex to absorb whatever height the panel opposite them adds, so the column never ends in dead space. */ .cs-proof { display: flex; flex-direction: column; gap: 1rem; flex: 1; margin-top: 1.2rem; } .cs-proof > div { flex: 1; display: flex; align-items: center; gap: 1.4rem; min-height: 92px; padding: 1.1rem 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .cs-proof b { font-family: var(--font-serif); font-weight: 500; flex: none; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1; letter-spacing: -.02em; color: var(--navy-500); } .cs-proof span { font-size: .92rem; color: var(--text-2); border-left: 1px solid var(--line); padding-left: 1.4rem; } @media (max-width: 520px){ .cs-proof > div { flex-direction: column; align-items: flex-start; gap: .4rem; } .cs-proof span { border-left: 0; padding-left: 0; } } .casestudy dt { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--navy-500); font-weight: 800; } .casestudy dd { margin: .15rem 0 0; color: var(--text-2); } /* ---------- Callout ---------- */ .callout { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 1.4rem 1.6rem; } .callout.warn { border-color: var(--navy-200); background: var(--wash); } .callout .tag { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; font-weight:800; color:var(--navy-500); margin-bottom:.45rem; } .callout.warn .tag { color: var(--navy-600); } .callout p:last-child { margin-bottom: 0; } /* Process steps */ .steps { display: grid; gap: 1.3rem; counter-reset: step; list-style: none; padding: 0; } @media (min-width: 760px){ .steps.row { grid-auto-flow: column; grid-auto-columns: 1fr; } } .step { position: relative; padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .step:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .step::before { counter-increment: step; content: counter(step); position: absolute; top: -15px; left: 1.4rem; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; box-shadow: 0 4px 12px rgba(1,23,72,.25); z-index: 1; } .step h4 { margin: .7rem 0 .3rem; } .step p { margin: 0; color: var(--text-2); font-size: .95rem; } .step-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--wash); color: var(--navy-500); display: grid; place-items: center; margin: .9rem 0 1.1rem; transition: background .3s var(--ease), color .3s var(--ease); } .step-ico svg { width: 24px; height: 24px; } .step:hover .step-ico { background: var(--navy); color: #fff; } /* `.linked` threads the numbered badges together across the gaps, so three cards read as one sequence instead of three unrelated boxes. */ @media (min-width: 760px){ .steps.linked .step:not(:last-child)::after { content: ""; position: absolute; top: 2px; left: 100%; width: 1.3rem; height: 2px; background: var(--navy-200); } } /* CTA band */ .ctaband { text-align: center; } .ctaband h2 { max-width: 20ch; margin-inline: auto; } .ctaband .lead { max-width: 52ch; margin-inline: auto; } .ctaband-actions { justify-content: center; align-items: center; margin-top: 1.4rem; } .ctaband-actions .btn { width: auto; max-width: 100%; white-space: nowrap; text-align: center; line-height: 1.25; height: auto; min-height: 0; padding: 1rem 1.45rem; } @media (max-width: 560px) { .ctaband-actions { flex-direction: column; align-items: center; } .ctaband-actions .btn { width: auto; justify-content: center; white-space: normal; padding: .95rem 1.35rem; } } /* ---------- Page head ---------- */ .pagehead { background: var(--surface); border-bottom: 1px solid var(--line-soft); position: relative; overflow: hidden; } .pagehead::before { content:""; position:absolute; right:-8%; top:-60%; width:45vw; height:45vw; max-width:520px; max-height:520px; border-radius:50%; background: radial-gradient(circle, rgba(61,121,221,.09), transparent 65%); } .pagehead .wrap { padding-block: clamp(2.4rem, 5.5vw, 3.8rem); position: relative; } .crumb { font-size: .82rem; color: var(--text-3); margin-bottom: .9rem; display: flex; gap: .4rem; flex-wrap: wrap; } .crumb a { color: var(--text-3); } .crumb a:hover { color: var(--navy-500); } /* ---- Page header with photo banner ---- */ .pagehead.has-photo { background: var(--navy-900); border-bottom: 0; } .pagehead.has-photo::before { display: none; } .pagehead.has-photo .ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; animation: phZoom 14s ease-out both; } @keyframes phZoom { from { transform: scale(1.08); } to { transform: scale(1); } } /* navy scrim keeps the type legible over any photo */ .pagehead.has-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(1,15,49,.94) 0%, rgba(1,23,72,.82) 45%, rgba(1,23,72,.42) 100%), linear-gradient(180deg, rgba(1,15,49,.55) 0%, transparent 40%); } .pagehead.has-photo .wrap { z-index: 2; padding-block: clamp(3.2rem, 8vw, 5.6rem); min-height: 300px; display: flex; flex-direction: column; justify-content: center; } /* CSS-only entrance — never depends on JS, so it can't leave the header blank */ .pagehead .wrap > * { animation: phIn .7s var(--ease) both; } .pagehead .crumb { animation-delay: .04s; } .pagehead .eyebrow { animation-delay: .10s; } .pagehead h1 { animation-delay: .16s; } .pagehead .lead { animation-delay: .24s; } @keyframes phIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .pagehead.has-photo h1 { color: #fff; } .pagehead.has-photo .lead { color: var(--on-dark-2); } .pagehead.has-photo .eyebrow { color: var(--navy-300); } .pagehead.has-photo .crumb, .pagehead.has-photo .crumb a { color: rgba(255,255,255,.65); } .pagehead.has-photo .crumb a:hover { color: #fff; } @media (max-width: 700px){ .pagehead.has-photo .wrap { min-height: 230px; } } /* ---------- Forms ---------- */ .form { display: grid; gap: 1rem; } .field { display: grid; gap: .35rem; } .field label { font-weight: 650; font-size: .9rem; color: var(--navy); } .field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: .85rem .95rem; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; color: var(--navy); width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .field textarea { min-height: 120px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-400); outline: none; box-shadow: var(--ring); } .field select.styled-select { appearance: none; -webkit-appearance: none; background-image: none; cursor: pointer; padding-right: 2.4rem; } /* Inline validation — replaces the browser's default bubbles */ .field-error { display: none; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 500; color: var(--error); } .field-error svg { width: 15px; height: 15px; flex: none; } .field.invalid .field-error { display: flex; } .field.invalid input, .field.invalid select, .field.invalid textarea, .field.invalid .custom-select-trigger { border-color: var(--error); } .field.invalid input:focus, .field.invalid select:focus, .field.invalid textarea:focus { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-ring); } .form-status.is-error { color: var(--error); font-weight: 550; } .recaptcha-wrap { justify-items: start; } .recaptcha-wrap .g-recaptcha { transform-origin: left top; } @media (max-width: 380px) { .recaptcha-wrap .g-recaptcha { transform: scale(0.92); } } .form button[type="submit"][disabled] { opacity: .65; cursor: wait; } .form-note svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: .25rem; } /* Custom select — consistent white dropdown on Mac, Windows, and mobile */ .custom-select { position: relative; width: 100%; } .custom-select select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .custom-select-trigger { width: 100%; text-align: left; font: inherit; font-size: 1rem; padding: .85rem .95rem; padding-right: 2.4rem; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; color: var(--navy); cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); position: relative; } .custom-select-trigger::after { content: ""; position: absolute; right: .95rem; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--navy-500); border-bottom: 2px solid var(--navy-500); transform: rotate(45deg); transition: transform .2s var(--ease); pointer-events: none; } .custom-select.open .custom-select-trigger { border-color: var(--navy-400); box-shadow: var(--ring); } .custom-select.open .custom-select-trigger::after { transform: rotate(-135deg); margin-top: -3px; } .custom-select-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-lg); max-height: 280px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; } .custom-select.open .custom-select-panel { opacity: 1; visibility: visible; transform: none; } .custom-select-option { display: block; width: 100%; text-align: left; border: 0; background: #fff; font: inherit; font-size: .95rem; color: var(--navy); padding: .72rem .95rem; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .custom-select-option:hover, .custom-select-option:focus { background: var(--wash); color: var(--navy-600); outline: none; } .custom-select-option[aria-selected="true"] { background: var(--navy-100); color: var(--navy-700); font-weight: 650; } /* Google map block — mirrors the live Google Business listing */ .map-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: #fff; } .map-wrap iframe { display: block; width: 100%; height: 320px; border: 0; background: var(--surface); } .map-card { padding: 1.15rem 1.2rem; background: #fff; border-bottom: 1px solid var(--line-soft); } .map-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .map-card strong { display: block; color: var(--navy); font-size: 1.12rem; margin-bottom: .35rem; letter-spacing: -.02em; } .map-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 650; color: var(--navy); margin-bottom: .2rem; } .map-stars { color: #fbbc04; letter-spacing: 1.5px; font-size: .85rem; } .map-sep { color: var(--text-3); font-weight: 400; } .map-rating a { font-weight: 650; color: var(--navy-500); } .map-rating a:hover { color: var(--navy-600); } .map-cat { margin: 0 0 .45rem; color: var(--text-3); font-size: .84rem; } .map-addr { margin: 0; color: var(--text-2); font-size: .9rem; line-height: 1.45; display: flex; align-items: flex-start; gap: .4rem; } .map-addr svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .15rem; color: var(--navy-500); } .map-dir { flex-shrink: 0; padding: .65rem 1rem; font-size: .88rem; white-space: nowrap; } @media (max-width: 560px) { .map-card-top { flex-direction: column; } .map-dir { width: 100%; } } .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.3rem); box-shadow: var(--shadow); } .grid-2f { display: grid; gap: 1rem; } @media (min-width: 560px){ .grid-2f { grid-template-columns: 1fr 1fr; } } .form-note { font-size: .8rem; color: var(--text-3); } /* Contact rows */ .contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.15rem; } .contact-list li { display: grid; grid-template-columns: 46px 1fr; gap: .95rem; align-items: start; margin: 0; } .contact-list .ci { width: 46px; height: 46px; border-radius: 12px; background: var(--wash); color: var(--navy-500); display: grid; place-items: center; transition: background .3s var(--ease), color .3s var(--ease); } .contact-list li:hover .ci { background: var(--navy); color: #fff; } .contact-list .ci svg { width: 22px; height: 22px; } .contact-list b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 800; } .contact-list a { font-size: 1.05rem; font-weight: 650; } /* ---------- Footer ---------- */ .credbar { background: var(--navy-800); color: var(--on-dark); border-bottom: 1px solid rgba(255,255,255,.07); } .credbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem 2.6rem; padding-block: 1.6rem; } .credbar .cred { display: flex; align-items: center; gap: .65rem; transition: transform .3s var(--ease); } .credbar .cred:hover { transform: translateY(-3px); } .credbar .cred .cmark { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); display: grid; place-items: center; color: var(--navy-300); } .credbar .cred .cmark svg { width: 22px; height: 22px; } .credbar .cred b { display: block; font-size: .85rem; color: #fff; } .credbar .cred small { color: var(--on-dark-2); font-size: .74rem; } .site-footer { background: var(--navy); color: var(--on-dark-2); } .footer-main { padding-block: clamp(3rem, 6vw, 4.8rem); display: grid; gap: 2.6rem; } @media (min-width: 640px){ .footer-main { grid-template-columns: 1fr 1fr; } .footer-main .footer-brand { grid-column: 1 / -1; } } @media (min-width: 1080px){ .footer-main { grid-template-columns: 1.55fr .85fr 1fr 1fr 1.25fr; } .footer-main .footer-brand { grid-column: auto; } } .site-footer h4 { color: #fff; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1.15rem; font-weight: 800; } .site-footer a { color: var(--on-dark-2); font-size: .95rem; } .site-footer a:hover { color: #fff; } .fcol ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .62rem; } .fcol a { display: inline-block; transition: transform .2s var(--ease), color .2s var(--ease); } .fcol a:hover { transform: translateX(4px); } .footer-brand img { height: 62px; width: auto; } .footer-brand p { max-width: 34ch; font-size: .95rem; margin-top: 1.2rem; } .social { display: flex; gap: .6rem; margin-top: 1.2rem; } .social a { width: 42px; height: 42px; border-radius: 11px; border: 1px solid rgba(255,255,255,.15); display: grid; place-items: center; color: var(--on-dark-2); transition: .28s var(--ease); } .social a:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-3px); } .social svg { width: 20px; height: 20px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; font-size: .84rem; } .footer-bottom .fnav { display: flex; gap: 1.2rem; flex-wrap: wrap; } /* Footer contact column */ .fcontact ul { gap: .8rem; } .fcontact li a { display: inline-flex; align-items: center; gap: .5rem; } .fcontact li a svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--navy-300); } .fcontact li small { display: block; color: var(--on-dark-2); opacity: .75; font-size: .74rem; margin-top: .1rem; padding-left: 1.55rem; } /* ---------- Google Reviews badge ---------- */ .gbadge { display: inline-flex; align-items: center; gap: .85rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1.15rem; margin-top: 1.4rem; box-shadow: var(--shadow-sm); max-width: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .gbadge:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .gbadge .g-mark { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; } .gbadge .g-mark svg { width: 30px; height: 30px; } .gbadge .g-stars { display: block; color: #fbbc04; letter-spacing: 2.5px; font-size: .82rem; line-height: 1.2; text-shadow: 0 1px 1px rgba(1,23,72,.08); } .gbadge .g-body b { display: block; color: var(--navy); font-size: .93rem; line-height: 1.3; font-weight: 700; } .gbadge .g-body small { display: block; color: var(--text-3); font-size: .75rem; line-height: 1.3; } .gbadge:hover .g-body b { color: var(--navy-600); } .gbadge.compact { padding: .6rem .95rem; gap: .7rem; margin-top: 0; } .gbadge.compact .g-mark { width: 28px; height: 28px; } .gbadge.compact .g-mark svg { width: 24px; height: 24px; } .gbadge.compact .g-body small { display: none; } /* ---------- Leadership ---------- */ /* Two portrait cards at full column width made the photos dominate the page. Capped and left-aligned so they read as profiles, not posters. */ .leadership-grid { gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; } @media (max-width: 700px){ .leadership-grid { grid-template-columns: minmax(0, 320px); } } .leader-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .leader-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .leader-photo { aspect-ratio: 1/1; overflow: hidden; background: var(--surface); } /* Crop from the top of the frame — centring a portrait cuts the head off. */ .leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; transition: transform .6s var(--ease); } .leader-card:hover .leader-photo img { transform: scale(1.04); } .leader-body { padding: 1.4rem 1.5rem 1.6rem; } .leader-body h3 { margin: 0 0 .25rem; } .leader-role { color: var(--navy-500); font-size: .86rem; font-weight: 700; margin: 0 0 .75rem; } .leader-body p:last-child { margin: 0; color: var(--text-2); } /* ---------- Blog cards ---------- */ .blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); color: inherit; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); min-width: 0; } .blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--navy-200); color: inherit; } /* A shallow crop — the image introduces the article, it isn't the point of the card. Anchored high in the frame: several of these are portraits, and a centred crop of a portrait lands on the subject's chin. */ .blog-card-media { aspect-ratio: 16/9; background: var(--navy-900); overflow: hidden; } .blog-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; transition: transform .7s var(--ease); } .blog-card:hover .blog-card-media img { transform: scale(1.05); } .blog-card-media-empty { background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); } .blog-card-body { padding: 1.35rem 1.45rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .blog-meta { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--text-3); } .blog-meta time { color: var(--text-3); } .blog-meta .blog-read::before { content: "·"; margin-right: .6rem; color: var(--line); } .blog-card-body h3 { margin: .55rem 0 .5rem; font-size: 1.06rem; line-height: 1.35; color: var(--navy); } .blog-card-body p { margin: 0 0 1.1rem; color: var(--text-2); font-size: .92rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card-body .more { margin-top: auto; } .blog-grid { align-items: stretch; } .blog-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 1.2rem; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .blog-scroll .blog-card { scroll-snap-align: start; } .blog-scroll::-webkit-scrollbar { height: 6px; } .blog-scroll::-webkit-scrollbar-thumb { background: var(--navy-200); border-radius: 999px; } /* ---------- Article page ---------- */ .article .crumb { margin-bottom: 1.2rem; } .article h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.12; margin: 0; } .article-meta { margin-top: 1rem; } /* Portrait source images are common here, so the hero is kept close to square-ish on narrow screens and anchored high — a wide letterbox crop of a portrait cuts the subject's head off entirely. */ /* Sits in the same column as the article text, so the image lines up with the copy instead of floating wider than the block it belongs to. */ .article-hero { margin: 2.4rem 0 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 3/2; background: var(--navy-900); } .article-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; } .article-body { margin-top: 2.6rem; } .article-body > h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; margin: 2.6rem 0 .9rem; color: var(--navy); } .article-body > h2:first-child { margin-top: 0; } .article-body > p { margin: 0 0 1.2rem; font-size: 1.06rem; line-height: 1.75; color: var(--text-2); } /* The opening paragraph carries the piece — set it larger and in full ink. */ .article-body > p:first-child { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.6; color: var(--text); margin-bottom: 1.6rem; } .article-body blockquote { margin: 2.2rem 0; padding: 0 0 0 1.6rem; border-left: 3px solid var(--navy-400); font-family: var(--font-serif); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.4; color: var(--navy); } .article-list { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .8rem; } .article-list li { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start; color: var(--text-2); line-height: 1.6; } .article-list li svg { width: 20px; height: 20px; color: var(--navy-500); margin-top: 3px; } .article-steps { list-style: none; padding: 0; margin: 0 0 1.6rem; counter-reset: astep; display: grid; gap: 1.1rem; } .article-steps li { counter-increment: astep; position: relative; padding-left: 3.1rem; color: var(--text-2); line-height: 1.65; } .article-steps li::before { content: counter(astep); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%; background: var(--wash); color: var(--navy-500); display: grid; place-items: center; font-size: .85rem; font-weight: 700; } .article-steps b { color: var(--navy); display: block; margin-bottom: .1rem; } /* ---------- Client logo grid ---------- */ .client-group + .client-group { margin-top: 2.6rem; } .client-group h3 { margin-bottom: 1.1rem; } .client-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .client-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .7rem; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem .85rem 1rem; min-height: 132px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .client-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--navy-200); } .client-logo { width: 64px; height: 64px; border-radius: 14px; background: var(--wash); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-soft); } .client-logo.has-img { background: #fff; padding: 8px; } .client-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .client-ini { font-weight: 800; font-size: .95rem; letter-spacing: .04em; color: var(--navy); } .client-name { font-size: .82rem; font-weight: 650; color: var(--navy); line-height: 1.3; max-width: 14ch; } /* Featured long-form review */ .review-featured { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--navy-500); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow-sm); } .review-featured blockquote { margin: 0 0 1.2rem; font-family: var(--font-serif); font-size: 1.08rem; color: var(--navy-800); } .review-featured blockquote p { margin-bottom: .9rem; } .review-featured .who { display: flex; align-items: center; gap: .8rem; } .review-featured .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; } .review-featured .who b { display: block; font-size: .97rem; color: var(--navy); } .review-featured .who small { color: var(--text-3); } /* Client list pills */ .client-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .55rem; } .client-list li { margin: 0; } .client-list li span { display: inline-block; background: var(--wash); border: 1px solid var(--line); color: var(--navy-700); font-weight: 600; font-size: .88rem; padding: .45rem .9rem; border-radius: 999px; transition: background .2s var(--ease), border-color .2s var(--ease); } .client-list li span:hover { background: var(--navy-100); border-color: var(--navy-200); } /* Map embed */ .map-embed { border: 0; width: 100%; height: 340px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: block; background: var(--surface-2); } /* ---------- Landing pages ---------- */ .lp-header { background: #fff; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 100; } .lp-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1rem; flex-wrap: nowrap; } .lp-header .brand { min-width: 0; } .lp-header .brand img { height: 52px; width: auto; } .lp-header .lp-phone { font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; flex-shrink: 0; transition: color .2s var(--ease); } .lp-header .lp-phone:hover { color: var(--navy-500); } .lp-header .lp-phone svg { width: 18px; height: 18px; color: var(--navy-500); } @media (max-width: 560px){ .lp-header .brand img { height: 44px; } .lp-header .lp-phone { gap: 0; padding: .6rem; border: 1.5px solid var(--line); border-radius: 999px; } .lp-header .lp-phone-num { display: none; } } /* Credential rail — editorial, evenly spaced, no wash fill */ .truststrip { background: var(--paper); border-block: 1px solid var(--line); } .truststrip .wrap, .truststrip-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 0; padding-block: 1.35rem; } .truststrip .item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .7rem; padding: .35rem 1.1rem; min-width: 0; position: relative; color: var(--navy); } .truststrip .item + .item::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--line); } .truststrip .item-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border: 1px solid var(--line); border-radius: 999px; color: var(--navy-500); flex-shrink: 0; } .truststrip .item-ico svg { width: 17px; height: 17px; display: block; } .truststrip .item-copy { display: flex; flex-direction: column; gap: .18rem; min-width: 0; } .truststrip .item-copy b, .truststrip .item-copy strong { font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; color: var(--navy); } .truststrip .item-copy a { font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; color: var(--navy); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease); } .truststrip .item-copy a:hover { color: var(--navy-500); border-bottom-color: var(--navy-300); } .truststrip .item-copy small, .truststrip .item-copy span { font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); line-height: 1.35; } /* Compact single-line variant (landing pages) */ .truststrip.compact .item { flex-direction: row; gap: .65rem; text-align: left; justify-content: center; } .truststrip.compact .item-ico { width: 1.9rem; height: 1.9rem; } .truststrip.compact .item-ico svg { width: 14px; height: 14px; } .truststrip.compact .item-copy b, .truststrip.compact .item-copy a { font-size: .72rem; letter-spacing: .03em; } @media (max-width: 900px) { .truststrip .wrap, .truststrip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; } .truststrip .item + .item::before { display: none; } .truststrip .item:nth-child(odd) { border-right: 1px solid var(--line-soft); } } @media (max-width: 520px) { .truststrip .wrap, .truststrip-inner { grid-template-columns: 1fr; } .truststrip .item:nth-child(odd) { border-right: none; } .truststrip .item { flex-direction: row; justify-content: flex-start; text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); } .truststrip .item:last-child { border-bottom: none; } } .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 28px rgba(1,23,72,.14); padding: .75rem var(--gutter); display: none; animation: slideUp .45s var(--ease) both; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .sticky-cta .btn { width: 100%; } @media (max-width: 760px){ .sticky-cta { display: block; } body.has-sticky { padding-bottom: 84px; } } /* ========================================================================= ANIMATION LAYER ========================================================================= */ /* Scroll reveal */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease), transform .75s var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; } [data-reveal].in { opacity: 1; transform: none; } [data-reveal="left"] { transform: translateX(-30px); } [data-reveal="right"] { transform: translateX(30px); } [data-reveal="scale"] { transform: scale(.955); } [data-reveal="fade"] { transform: none; } /* Hero entrance */ .hero-inner > div > * { animation: heroIn .9s var(--ease) both; } .hero-inner > div > *:nth-child(1) { animation-delay: .05s; } .hero-inner > div > *:nth-child(2) { animation-delay: .16s; } .hero-inner > div > *:nth-child(3) { animation-delay: .27s; } .hero-inner > div > *:nth-child(4) { animation-delay: .38s; } .hero-inner > div > *:nth-child(5) { animation-delay: .49s; } .hero-visual { animation: heroVisual 1.15s var(--ease) .2s both; } @keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes heroVisual { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } } /* Counter emphasis */ .count { font-variant-numeric: tabular-nums; } /* Utilities */ .mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem} .mb-2{margin-bottom:1.2rem}.mb-3{margin-bottom:2rem} .stack > * + * { margin-top: 1.1rem; } .divider { height:1px; background: var(--line-soft); border:0; margin: 2.6rem 0; } .hide { display: none !important; } .anchor, .section[id], main [id] { scroll-margin-top: var(--sticky-offset); } /* ---------- Editorial statement ---------- For sections that are a single argument rather than a grid: the label and heading hold the left column, the argument runs in the right. Gives the copy a measure it can actually be read at instead of one wide block adrift in white space, and puts a hairline between the claim and the reasoning. */ .statement { display: grid; gap: 1.4rem 5rem; } @media (min-width: 900px){ .statement { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } /* Must clear the sticky site header — was 110px and sat under the bar */ .statement-side { position: sticky; top: var(--sticky-offset); } } .statement-side h2 { margin: 0; } .statement-body { border-top: 1px solid var(--line); padding-top: 1.5rem; } @media (min-width: 900px){ /* The rule sits in the middle of the gutter with clearance on both sides — flush against the left column, descenders and commas touch it. */ .statement-body { border-top: 0; border-left: 1px solid var(--line); padding: .3rem 0 .3rem 2.5rem; margin-left: -2.5rem; } } .statement-body > p { margin: 0 0 1.1rem; } .statement-body > p:last-child { margin-bottom: 0; } /* First line sets the tone, the rest supports it. */ .statement-body > p:first-child { font-size: clamp(1.14rem, 1.7vw, 1.4rem); color: var(--text); line-height: 1.5; } .statement-body > p + p { color: var(--text-2); font-size: 1.02rem; line-height: 1.7; } /* ---------- Problem / solution contrast pair ---------- */ .contrast { display: grid; gap: 1.5rem; align-items: stretch; } @media (min-width: 920px){ .contrast { grid-template-columns: 1fr auto 1fr; gap: 0; } } .contrast-panel { position: relative; display: flex; flex-direction: column; padding: clamp(1.8rem, 3.4vw, 2.6rem); border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); } .contrast-panel h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: .35rem 0 0; } .contrast-panel p { margin: 1rem 0 0; color: var(--text-2); font-size: 1.03rem; } .cp-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.3rem; } .cp-ico svg { width: 26px; height: 26px; } /* The problem is stated quietly; the solution answers it in full brand navy. */ .contrast-panel.problem { background: var(--surface); border-color: var(--line-soft); box-shadow: none; } .contrast-panel.problem .cp-ico { background: #fff; color: var(--text-3); border: 1px solid var(--line); } .contrast-panel.problem .eyebrow { color: var(--text-3); } .contrast-panel.problem h2 { color: var(--text-2); } .contrast-panel.solution { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: var(--shadow); } .contrast-panel.solution .cp-ico { background: rgba(255,255,255,.12); color: #fff; } .contrast-panel.solution .eyebrow { color: var(--navy-300); } .contrast-panel.solution h2 { color: #fff; } .contrast-panel.solution p { color: var(--on-dark); } /* The connector between the two panels — a chip on the axis, rotated to point down when the panels stack on narrow screens. */ .contrast-arrow { display: grid; place-items: center; padding: .2rem; } .contrast-arrow::before { content: ""; grid-area: 1 / 1; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .contrast-arrow svg { grid-area: 1 / 1; width: 24px; height: 24px; color: var(--navy-500); transform: rotate(90deg); } @media (min-width: 920px){ .contrast-arrow { padding: 0 1.6rem; } .contrast-arrow svg { transform: none; } } /* ---------- Discount ladder ---------- */ .ladder { display: grid; gap: 1.2rem; align-items: end; } @media (min-width: 820px){ .ladder { grid-template-columns: repeat(3, 1fr); } } .rung { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem 1.7rem; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } /* Each rung sits a step higher than the last — the discount made visible. */ @media (min-width: 820px){ .rung { margin-bottom: calc(var(--rung) * 1.6rem); } } /* Accent sits on the border itself, so it can never fall outside the radius. */ .rung { border-top: 4px solid var(--navy-200); } .rung:nth-child(2) { border-top-color: var(--navy-400); } .rung:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--navy-200); } .rung-visits { font-weight: 700; color: var(--navy); font-size: 1.05rem; } .rung-visits small { font-weight: 500; color: var(--text-3); font-size: .82rem; } .rung-pct { font-family: var(--font-serif); font-size: clamp(3.4rem, 7vw, 4.6rem); line-height: 1; font-weight: 500; color: var(--navy-500); letter-spacing: -.03em; margin: .9rem 0 .2rem; } .rung-pct small { font-size: .38em; font-weight: 600; letter-spacing: 0; margin-left: .12em; } .rung-label { font-weight: 650; color: var(--navy); font-size: .95rem; } .rung-note { margin: .35rem 0 0; color: var(--text-2); font-size: .92rem; } .rung.best { background: var(--navy); border-color: var(--navy); border-top-color: var(--navy-300); box-shadow: var(--shadow); } .rung.best .rung-visits { color: #fff; } .rung.best .rung-visits small, .rung.best .rung-note { color: var(--on-dark-2); } .rung.best .rung-pct { color: #fff; } .rung.best .rung-label { color: var(--navy-300); } .rung-flag { position: absolute; top: -13px; right: 1.5rem; background: var(--navy-500); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; padding: .38rem .7rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(1,23,72,.28); } /* ---------- Document download gate ---------- */ .gate[hidden] { display: none; } .gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--gutter); } .gate-backdrop { position: absolute; inset: 0; background: rgba(1,15,49,.62); backdrop-filter: blur(3px); animation: gateFade .25s var(--ease) both; } .gate-panel { position: relative; width: min(100%, 480px); max-height: calc(100vh - 2 * var(--gutter)); overflow-y: auto; background: #fff; border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.4rem); box-shadow: var(--shadow-lg); animation: gateRise .32s var(--ease) both; } .gate-panel h2 { font-size: clamp(1.5rem, 3.4vw, 1.85rem); margin: .35rem 0 0; } .gate-panel .gate-doc { margin: .7rem 0 1.5rem; } .gate-panel .form { gap: 1.05rem; } .gate-panel .recaptcha-wrap { margin-top: .15rem; } @media (max-width: 420px) { .gate-panel .recaptcha-wrap .g-recaptcha { transform: scale(0.88); } } .gate-close { position: absolute; top: .85rem; right: .85rem; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--text-3); transition: background .2s var(--ease), color .2s var(--ease); } .gate-close:hover { background: var(--wash); color: var(--navy); } .gate-close svg { width: 18px; height: 18px; } body.gate-open { overflow: hidden; } @keyframes gateFade { from { opacity: 0; } to { opacity: 1; } } @keyframes gateRise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } }