/*
Theme Name: Pool Sharks Marketing
Theme URI: https://poolsharksmarketing.com
Author: Pool Sharks Marketing
Description: Custom block theme for Pool Sharks Marketing. Hand-built sections, brand tokens in theme.json.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: poolsharks
*/
/* ============================================================
Bundled below, in load order:
1. style.css — tokens, header, buttons, hero
2. sections.css — homepage sections 02+
3. service.css — service-page-only components
Image URLs are rewritten to the theme's assets/img folder.
============================================================ */
/* ==== style.css ==== */
/* ============================================================
Pixel Creatives — Hero
Ported 1:1 from Figma "Finalizing Agency Landingpage" (645:382)
============================================================ */
/* ---------- 1. Tokens ---------- */
:root{
/* brand */
--blue: #0F9CF4;
--blue-deep: #0B84D1;
--ink: #141414;
--ink-nav: #0A0D14;
--ink-title: #404040;
--ink-body: #525866;
--ink-tick: #1F1F1F;
--ink-badge: #2B2B2B;
--ink-ghost: #424242;
/* surfaces */
--white: #FFFFFF;
--hairline: #EBEBEB;
--stroke-soft: #CDCDCD;
--stroke-glass:#CBC4C4;
--stroke-badge:#E1E1E1;
--star: #FFB800;
/* hero gradient (Figma: 180deg, 32% -> 100%) */
--grad-a: rgba(205,190,255,.20);
--grad-b: rgba(38,160,218,.20);
/* metrics */
--canvas: 1440px;
--nav-w: 1300px;
--copy-w: 1080px;
--nav-h: 90px;
--radius-card: 34px;
--sc: 1; /* showcase card scale, stepped down per breakpoint */
--nav-gap: 30px; /* gap between viewport top and the nav pill */
--hero-pad: clamp(16px, 3vw, 40px); /* hero inner padding, reused by the rail */
/* type */
--f-display: 'Manrope', system-ui, sans-serif;
--f-ui: 'Satoshi', 'Manrope', system-ui, sans-serif;
--f-body: 'Plus Jakarta Sans', system-ui, sans-serif;
--f-nav: 'Inter', system-ui, sans-serif;
--ease-out: cubic-bezier(.22,1,.36,1);
}
/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* no scroll-behavior here — Lenis owns scrolling (see js/scroll.js) */
body{
margin:0;
background:var(--white);
color:var(--ink-body);
font-family:var(--f-body);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
a{ text-decoration:none; color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
.is-blue{ color:var(--blue); }
.is-ink { color:var(--ink); }
/* ============================================================
3. HEADER — floating white pill
============================================================ */
.site-header{
position:fixed;
inset:0 0 auto 0;
z-index:100;
/* the nav pill is the ONLY thing inset from the top — the hero is full bleed */
padding:var(--nav-gap) clamp(16px,3.5vw,50px) 0;
transition:padding .35s var(--ease-out);
}
/* stays a flat 30px from the top at all times — the pill shrinks and gains
shadow when scrolled, but never creeps toward the viewport edge */
.site-header.is-stuck{ padding-top:var(--nav-gap); }
.nav-pill{
position:relative;
width:100%;
max-width:var(--nav-w);
margin-inline:auto;
min-height:var(--nav-h);
display:flex;
align-items:center;
justify-content:space-between; /* logo hard left, actions hard right */
gap:24px;
padding:0 20px 0 30px;
background:var(--white);
border-radius:99px;
box-shadow:
0 4px 8px rgba(110,110,110,.02),
0 15px 15px rgba(110,110,110,.02),
0 33px 20px rgba(110,110,110,.01);
transition:box-shadow .35s var(--ease-out), min-height .35s var(--ease-out);
}
.site-header.is-stuck .nav-pill{
min-height:76px;
box-shadow:0 10px 34px rgba(70,90,120,.10);
}
/* brand — single lockup image (Figma 717:448, 250 x 52) */
.nav-brand{
display:flex;
align-items:center;
flex-shrink:0;
transition:opacity .25s var(--ease-out);
}
.nav-brand:hover{ opacity:.82; }
.nav-brand__logo{
width:clamp(168px, 17.4vw, 250px);
height:auto;
object-fit:contain;
}
/* links — pinned to the true centre of the pill, so neither the logo
width nor the button width can drag them off-centre */
.nav-links{
position:absolute;
left:50%;
translate:-50% 0;
display:flex;
align-items:center;
gap:24px;
white-space:nowrap;
}
.nav-links a{
position:relative;
font-family:var(--f-nav);
font-size:16px;
line-height:21px;
letter-spacing:-.0169em;
color:var(--ink-nav);
padding:6px 0;
transition:color .25s var(--ease-out);
}
.nav-links a::after{
content:"";
position:absolute;
left:0; bottom:0;
width:100%; height:2px;
background:var(--blue);
border-radius:2px;
transform:scaleX(0);
transform-origin:right;
transition:transform .35s var(--ease-out);
}
.nav-links a:hover{ color:var(--blue); }
.nav-links a:hover::after,
.nav-links a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav-actions{
display:flex;
align-items:center;
gap:12px;
flex-shrink:0;
}
/* ============================================================
4. BUTTONS
============================================================ */
.btn{
--btn-py:12px; --btn-px:24px;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:var(--btn-py) var(--btn-px);
border-radius:100px;
font-family:var(--f-ui);
font-weight:500;
font-size:16px;
line-height:24px;
letter-spacing:-.0169em;
white-space:nowrap;
overflow:hidden;
isolation:isolate;
transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
background-color .3s var(--ease-out), color .3s var(--ease-out),
border-color .3s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--ghost{
color:var(--ink-ghost);
border:1px solid var(--stroke-soft);
background:transparent;
}
.btn--ghost:hover{ color:var(--blue); border-color:var(--blue); background:rgba(15,156,244,.05); }
.btn--blue{
color:var(--white);
background:var(--blue);
box-shadow:0 6px 16px -4px rgba(15,156,244,.5);
}
.btn--blue:hover{ background:var(--blue-deep); box-shadow:0 12px 24px -6px rgba(15,156,244,.55); }
.btn__arrow{ transition:transform .35s var(--ease-out); }
.btn--blue:hover .btn__arrow{ transform:translateX(4px); }
/* large hero buttons — Figma 258 x 64 */
.btn--lg{
--btn-py:0; --btn-px:0;
min-width:258px;
height:64px;
border-radius:99px;
font-family:var(--f-ui);
font-size:18px;
line-height:18px;
letter-spacing:0;
}
.btn--dark{
color:var(--white);
background-image:linear-gradient(180deg, #000 0%, rgba(40,40,40,.85) 100%);
box-shadow:
0 10px 18px -2.5px rgba(0,0,0,.15),
0 2.3px 4.1px -1.7px rgba(0,0,0,.12),
inset 0 0 0 1px rgba(255,255,255,.18);
}
/* sweeping sheen */
.btn--dark::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
transform:translateX(-120%);
transition:transform .8s var(--ease-out);
}
.btn--dark:hover::before{ transform:translateX(120%); }
.btn--dark:hover{ box-shadow:0 18px 34px -8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25); }
.btn--glass{
color:var(--ink-badge);
background:rgba(255,255,255,.5);
border:1px solid var(--stroke-glass);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.btn--glass:hover{ background:var(--white); border-color:var(--ink-badge); }
.btn--full{ width:100%; }
/* ============================================================
5. MOBILE NAV
============================================================ */
.nav-toggle{
display:none;
width:44px; height:44px;
flex-direction:column;
justify-content:center;
align-items:center;
gap:5px;
margin-left:auto;
}
.nav-toggle span{
width:22px; height:2px;
background:var(--ink-nav);
border-radius:2px;
transition:transform .3s var(--ease-out), opacity .2s linear;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-drawer{
display:flex;
flex-direction:column;
gap:6px;
max-width:var(--nav-w);
margin:10px auto 0;
padding:18px;
background:var(--white);
border-radius:24px;
box-shadow:0 18px 40px rgba(70,90,120,.14);
}
.nav-drawer[hidden]{ display:none; }
.nav-drawer a:not(.btn){
font-family:var(--f-nav);
font-size:17px;
color:var(--ink-nav);
padding:12px 8px;
border-radius:12px;
}
.nav-drawer a:not(.btn):hover{ background:rgba(15,156,244,.07); color:var(--blue); }
.nav-drawer .btn{ margin-top:8px; height:52px; }
/* ============================================================
6. HERO
============================================================ */
.hero{
position:relative;
isolation:isolate;
overflow:hidden;
/* full bleed — no margin, no radius, no white edge on any side */
margin:0;
/* small bottom padding: the ::after white fade does the visual closing,
so the rail sits close to the edge and dissolves rather than stopping */
padding:clamp(150px,14.2vw,204px) var(--hero-pad) clamp(52px,5.6vw,88px);
background:linear-gradient(180deg, var(--grad-a) 32%, var(--grad-b) 100%);
}
/* white blend into the next section — the hero dissolves upward into white
so the rail's bottom edge is never a hard cut */
.hero::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
/* short, so real gradient is still visible where the form card overlaps */
height:clamp(90px, 11vw, 175px);
z-index:5;
pointer-events:none;
background:linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.18) 34%,
rgba(255,255,255,.48) 58%,
rgba(255,255,255,.80) 78%,
rgba(255,255,255,.95) 90%,
#fff 100%);
}
/* big soft white orb (Figma ellipse 1058px) */
.hero__glow{
position:absolute;
top:-456px;
left:50%;
width:1058px; height:1058px;
margin-left:-333px;
border-radius:50%;
background:rgba(255,255,255,.17);
box-shadow:inset 0 0 30px rgba(255,255,255,.2);
pointer-events:none;
z-index:-1;
}
.hero__inner{
display:flex;
flex-direction:column;
align-items:center;
gap:60px;
}
.hero__copy{
width:100%;
max-width:var(--copy-w);
display:flex;
flex-direction:column;
align-items:center;
gap:40px;
text-align:center;
}
/* --- badge --- */
.pill-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:6px 20px;
background:rgba(255,255,250,.2);
border:1px solid var(--stroke-badge);
border-radius:30px;
backdrop-filter:blur(7.5px);
-webkit-backdrop-filter:blur(7.5px);
}
.pill-badge__stars{ display:inline-flex; gap:3px; color:var(--star); }
.pill-badge__text{
font-family:var(--f-ui);
font-weight:500;
font-size:13px;
line-height:16.9px;
color:var(--ink-badge);
}
.pill-badge__arrow{
font-family:var(--f-nav);
font-size:13px;
color:var(--ink-badge);
transition:transform .35s var(--ease-out);
}
.pill-badge:hover .pill-badge__arrow{ transform:translateX(4px); }
/* --- headline --- */
.hero__title{
margin:0;
/* Measured in Manrope 800 @70px/-0.02em:
"Transform Your Brand with" 883px
"Modern Design & Development" 1020px
"Transform Your Brand with Modern" 1151px <- overflows
So 1080 (the --copy-w parent) yields exactly two lines. The old 960
cap pushed "with" down and produced three. */
max-width:var(--copy-w);
font-family:var(--f-display);
font-weight:800;
font-size:clamp(34px,4.86vw,70px);
line-height:1.07;
letter-spacing:-.02em;
color:var(--ink-title);
text-wrap:balance;
}
.hero__title .w{ display:inline-block; }
/* --- sub --- */
.hero__sub{
margin:0;
max-width:650px;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(15px,1.15vw,16px);
line-height:27px;
color:var(--ink-body);
}
/* --- ticks --- */
.hero__ticks{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:16px 40px;
}
.hero__ticks li{
display:flex;
align-items:center;
gap:12px;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(15px,1.3vw,18px);
line-height:27px;
color:var(--ink-tick);
}
.hero__ticks svg{ color:var(--blue); flex-shrink:0; }
/* --- CTA row --- */
.hero__cta{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}
/* ============================================================
7. SHOWCASE CARDS — glass, overflowing the canvas
============================================================ */
/* rail — breaks out to the hero's inner edges, never past them */
.showcase{
position:relative;
/* wider than the content box by exactly the hero padding on each side.
.hero__inner is align-items:center, so an over-wide item overflows
symmetrically — no negative margin needed (and one would double it). */
width:calc(100% + (2 * var(--hero-pad)));
overflow:hidden;
/* cards dissolve into the section at both edges */
-webkit-mask-image:linear-gradient(90deg,
transparent 0, rgba(0,0,0,.35) 5%, #000 16%, #000 84%, rgba(0,0,0,.35) 95%, transparent 100%);
mask-image:linear-gradient(90deg,
transparent 0, rgba(0,0,0,.35) 5%, #000 16%, #000 84%, rgba(0,0,0,.35) 95%, transparent 100%);
}
.showcase__track{
display:flex;
align-items:center;
gap:0; /* spacing comes from the negative margin below */
width:max-content;
will-change:transform;
}
/* Flat Figma exports. Frame is 536x410 but each PNG is 616x490 — Figma
bleeds 40px on every side for the drop shadow. Pulling 15px off each
flank turns that 80px of transparent bleed into the design's 50px gap:
40 + 40 - 15 - 15 = 50. */
.scard{
flex-shrink:0;
display:block;
width:calc(616px * var(--sc));
height:auto;
margin-inline:calc(-15px * var(--sc));
will-change:transform;
}
/* ============================================================
8. FLOATING DECOR
============================================================ */
/* Two white chips that hover over the gradient.
No CSS transform here on purpose — GSAP owns rotation + drift,
and a CSS transform would be silently overwritten. */
.float-card{
position:absolute;
margin:0;
z-index:2;
display:grid;
place-items:center;
background:var(--white);
border-radius:18px;
pointer-events:none;
will-change:transform;
box-shadow:
0 4px 8px rgba(133,133,133,.10),
0 14px 16px rgba(133,133,133,.09),
0 31px 24px rgba(133,133,133,.06),
0 55px 30px rgba(133,133,133,.03);
}
.float-card--figma{
top:clamp(140px, 15vw, 210px);
left:clamp(12px, 5.3vw, 78px);
width:clamp(68px, 6.4vw, 92px);
aspect-ratio:1;
}
.float-card--figma img{ width:46%; height:auto; }
.float-card--right{
top:clamp(300px, 31vw, 440px);
right:clamp(12px, 6vw, 86px);
width:clamp(72px, 7.2vw, 104px);
aspect-ratio:1;
border-radius:20px;
}
.float-card--right img{ width:56%; height:auto; }
/* ============================================================
8b. FREE ESTIMATE — split panel
Nested enclosure: outer shell (tinted, hairline) wraps an inner
core (white), which holds the pitch and a third-level form panel.
Concentric radii: 40 -> 32 -> 24.
============================================================ */
.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;
}
.estimate{
position:relative;
padding:clamp(72px,10vw,150px) clamp(16px,3vw,40px);
background:var(--white);
}
/* faint tint bleeding up from the section floor */
.estimate::before{
content:"";
position:absolute;
inset:auto 0 0 0;
height:60%;
background:radial-gradient(120% 100% at 50% 100%, rgba(15,156,244,.07) 0%, transparent 70%);
pointer-events:none;
}
/* --- outer shell --- */
.estimate__shell{
position:relative;
max-width:1240px;
margin-inline:auto;
padding:8px;
border-radius:40px;
background:linear-gradient(180deg, rgba(15,156,244,.07), rgba(166,152,255,.06));
box-shadow:inset 0 0 0 1px rgba(15,60,110,.06);
}
/* --- inner core --- */
.estimate__core{
display:grid;
grid-template-columns:0.86fr 1.14fr;
gap:clamp(28px,3.4vw,56px);
padding:clamp(28px,3.6vw,56px);
border-radius:32px;
background:var(--white);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.9),
0 2px 6px rgba(19,63,102,.04),
0 18px 40px rgba(19,63,102,.07),
0 50px 90px rgba(19,63,102,.06);
}
/* ---------- left: pitch ---------- */
.pitch{ display:flex; flex-direction:column; align-items:flex-start; }
.eyebrow{
display:inline-block;
padding:6px 14px;
border-radius:100px;
background:rgba(15,156,244,.09);
box-shadow:inset 0 0 0 1px rgba(15,156,244,.16);
font-family:var(--f-ui);
font-size:10px;
font-weight:500;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--blue);
}
.pitch__title{
margin:22px 0 0;
font-family:var(--f-display);
font-weight:800;
font-size:clamp(26px,2.9vw,40px);
line-height:1.12;
letter-spacing:-.025em;
color:#111418;
text-wrap:balance;
}
.pitch__body{
margin:16px 0 0;
max-width:42ch;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(14px,1.15vw,16px);
line-height:1.7;
color:var(--ink-body);
}
.pitch__points{
margin:26px 0 0;
display:flex;
flex-direction:column;
gap:12px;
}
.pitch__points li{
display:flex;
align-items:center;
gap:12px;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(13px,1.05vw,15px);
color:#2A3140;
}
.pitch__tick{
flex-shrink:0;
width:22px; height:22px;
display:grid; place-items:center;
border-radius:50%;
background:rgba(15,156,244,.10);
}
.pitch__tick svg{
width:13px; height:13px;
fill:none;
stroke:var(--blue);
stroke-width:2.4;
stroke-linecap:round;
stroke-linejoin:round;
}
/* direct line */
.pitch__call{
margin-top:auto;
padding-top:32px;
display:inline-flex;
align-items:center;
gap:13px;
transition:opacity .5s cubic-bezier(.32,.72,0,1);
}
.pitch__call:hover{ opacity:.72; }
.pitch__call-icon{
width:42px; height:42px;
display:grid; place-items:center;
border-radius:50%;
background:rgba(15,156,244,.09);
box-shadow:inset 0 0 0 1px rgba(15,156,244,.16);
}
.pitch__call-icon svg{ width:18px; height:18px; fill:var(--blue); }
.pitch__call-text{ display:flex; flex-direction:column; line-height:1.25; }
.pitch__call-text small{
font-family:var(--f-body);
font-size:12px;
color:#7A8496;
}
.pitch__call-text strong{
font-family:var(--f-display);
font-weight:800;
font-size:17px;
letter-spacing:-.01em;
color:#111418;
}
/* ---------- right: form panel (third bezel) ---------- */
.panel{
padding:clamp(18px,1.8vw,26px);
border-radius:24px;
background:#F7FAFD;
box-shadow:inset 0 0 0 1px rgba(15,60,110,.055);
}
.panel__form{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}
.field{ min-width:0; }
.field--full{ grid-column:1 / -1; }
.field__control{ position:relative; }
.field input,
.field select{
width:100%;
height:54px;
padding:0 48px 0 22px;
font-family:var(--f-body);
font-weight:500;
font-size:15px;
color:#1F2937;
background:var(--white);
border:0;
border-radius:100px;
outline:none;
appearance:none;
box-shadow:inset 0 0 0 1px #E4E9EF;
transition:box-shadow .5s cubic-bezier(.32,.72,0,1);
}
.field input::placeholder{ color:#98A2B2; }
.field select:invalid{ color:#98A2B2; }
.field input:hover,
.field select:hover{ box-shadow:inset 0 0 0 1px #C9D4E1; }
.field input:focus,
.field select:focus{
box-shadow:inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(15,156,244,.13);
}
.field__icon{
position:absolute;
right:20px; top:50%;
translate:0 -50%;
width:19px; height:19px;
fill:#98A2B2;
pointer-events:none;
transition:fill .5s cubic-bezier(.32,.72,0,1);
}
.field__icon--chev{ width:21px; height:21px; }
.field input:focus ~ .field__icon,
.field select:focus ~ .field__icon{ fill:var(--blue); }
/* --- errors --- */
.field__error{
margin:6px 0 0 22px;
font-family:var(--f-body);
font-size:12.5px;
line-height:1.35;
color:#D92D20;
opacity:0;
transform:translateY(-3px);
transition:opacity .45s cubic-bezier(.32,.72,0,1), transform .45s cubic-bezier(.32,.72,0,1);
}
.field.is-invalid .field__error{ opacity:1; transform:translateY(0); }
.field.is-invalid input,
.field.is-invalid select{ box-shadow:inset 0 0 0 1.5px #F0A4A0; background:#FFFCFC; }
.field.is-invalid input:focus,
.field.is-invalid select:focus{
box-shadow:inset 0 0 0 1.5px #D92D20, 0 0 0 4px rgba(217,45,32,.12);
}
.field.is-invalid .field__icon{ fill:#E4756E; }
/* --- CTA: button-in-button --- */
.field--submit{ margin-top:4px; }
.cta{
position:relative;
width:100%;
height:58px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding:0 10px 0 26px;
border-radius:100px;
background:var(--blue);
color:var(--white);
font-family:var(--f-ui);
font-weight:500;
font-size:16px;
letter-spacing:-.0169em;
box-shadow:0 8px 20px -6px rgba(15,156,244,.55), inset 0 1px 1px rgba(255,255,255,.22);
transition:background-color .5s cubic-bezier(.32,.72,0,1),
box-shadow .5s cubic-bezier(.32,.72,0,1),
transform .5s cubic-bezier(.32,.72,0,1);
}
.cta:hover{
background:var(--blue-deep);
box-shadow:0 14px 30px -8px rgba(15,156,244,.6), inset 0 1px 1px rgba(255,255,255,.28);
}
.cta:active{ transform:scale(.985); }
.cta[disabled]{ opacity:.62; cursor:not-allowed; transform:none; }
.cta__pip{
width:34px; height:34px;
display:grid; place-items:center;
border-radius:50%;
background:rgba(255,255,255,.18);
transition:transform .5s cubic-bezier(.32,.72,0,1), background-color .5s cubic-bezier(.32,.72,0,1);
}
.cta__pip svg{
width:17px; height:17px;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
.cta:hover .cta__pip{
background:rgba(255,255,255,.28);
transform:translate(3px,-1px) scale(1.06);
}
.cta.is-busy .cta__pip{ opacity:0; }
.cta__spinner{
display:none;
position:absolute;
right:22px;
width:17px; height:17px;
border:2px solid rgba(255,255,255,.35);
border-top-color:var(--white);
border-radius:50%;
animation:spin .7s linear infinite;
}
.cta.is-busy .cta__spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
/* --- status --- */
.form-status{
grid-column:1 / -1;
margin:2px 0 0;
font-family:var(--f-body);
font-size:13.5px;
font-weight:500;
color:var(--ink-body);
opacity:0;
transition:opacity .45s cubic-bezier(.32,.72,0,1);
}
.form-status.is-shown{ opacity:1; }
.form-status.is-ok { color:#067647; }
.form-status.is-error{ color:#D92D20; }
/* --- reveal ---
Deliberately small: 18px of travel and a fade, nothing else. Blur
was costing a GPU pass per element for an effect you stop noticing
after the first section. Content is visible by default; the hidden
state only exists under .js-reveal, which js/scroll.js adds right
before the observer that clears it. */
.js-reveal [data-reveal]{
opacity:0;
transform:translate3d(0,18px,0);
transition:opacity .72s cubic-bezier(.32,.72,0,1),
transform .72s cubic-bezier(.32,.72,0,1);
will-change:opacity, transform;
}
.js-reveal [data-reveal].is-in{
opacity:1;
transform:none;
will-change:auto;
}
/* light stagger for grouped children */
.js-reveal [data-reveal-group] > *{
opacity:0;
transform:translate3d(0,14px,0);
transition:opacity .6s cubic-bezier(.32,.72,0,1),
transform .6s cubic-bezier(.32,.72,0,1);
}
.js-reveal [data-reveal-group].is-in > *{ opacity:1; transform:none; }
.js-reveal [data-reveal-group].is-in > *:nth-child(1){ transition-delay:0ms; }
.js-reveal [data-reveal-group].is-in > *:nth-child(2){ transition-delay:60ms; }
.js-reveal [data-reveal-group].is-in > *:nth-child(3){ transition-delay:120ms; }
.js-reveal [data-reveal-group].is-in > *:nth-child(4){ transition-delay:180ms; }
.js-reveal [data-reveal-group].is-in > *:nth-child(5){ transition-delay:240ms; }
.js-reveal [data-reveal-group].is-in > *:nth-child(6){ transition-delay:300ms; }
/* --- responsive --- */
@media (max-width:940px){
.estimate__core{ grid-template-columns:1fr; }
.pitch__call{ margin-top:26px; padding-top:0; }
.pitch__body{ max-width:none; }
}
@media (max-width:560px){
.estimate__shell{ padding:6px; border-radius:30px; }
.estimate__core{ border-radius:24px; padding:20px; }
.panel{ border-radius:20px; }
.panel__form{ grid-template-columns:1fr; }
.field input,
.field select{ height:52px; }
.cta{ height:54px; }
}
@media (prefers-reduced-motion:reduce){
[data-reveal]{ opacity:1; transform:none; filter:none; }
}
/* ============================================================
9. ENTRANCE STATE (GSAP removes these)
============================================================ */
.js-anim .hero .pill-badge,
.js-anim .hero__title,
.js-anim .hero__sub,
.js-anim .hero__ticks,
.js-anim .hero__cta,
.js-anim .showcase{ opacity:0; }
.js-anim .hero__title .w{ opacity:0; }
.js-anim .site-header{ opacity:0; }
/* ============================================================
10. RESPONSIVE
============================================================ */
/* Cards are never pulled past the hero edge at any width — the rail sits
fully inside the padding box, so nothing clips at the bottom. */
@media (max-width:1500px){
:root{ --sc:.88; }
}
@media (max-width:1280px){
:root{ --sc:.78; }
.nav-links{ gap:18px; }
}
@media (max-width:1100px){
:root{ --sc:.70; }
.nav-links{ gap:14px; }
.nav-links a{ font-size:15px; }
.btn{ font-size:15px; padding:11px 18px; }
}
/* --- hamburger territory --- */
@media (max-width:1024px){
:root{ --sc:.62; }
.nav-links,
.nav-actions{ display:none; }
.nav-toggle{ display:flex; }
.nav-pill{ min-height:74px; padding:0 14px 0 20px; }
.float-card--figma{ top:clamp(120px,16vw,160px); }
.float-card--right{ top:clamp(280px,34vw,360px); }
}
@media (max-width:768px){
:root{ --sc:.52; }
.hero{ padding-top:clamp(118px,26vw,150px); }
.hero__copy{ gap:28px; }
.hero__inner{ gap:44px; }
.pill-badge{ padding:6px 14px; }
.pill-badge__text{ font-size:12px; }
.btn--lg{ min-width:0; width:100%; height:56px; font-size:16px; }
.hero__cta{ width:100%; max-width:340px; flex-direction:column; gap:12px; }
.hero__ticks{ gap:12px 22px; }
.float-card--figma,
.float-card--right{ display:none; }
.showcase{
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
}
@media (max-width:520px){
:root{ --sc:.42; }
.nav-pill{ min-height:64px; padding:0 12px 0 16px; }
.hero__title{ letter-spacing:-.01em; }
}
@media (max-width:380px){
:root{ --sc:.36; }
}
/* ============================================================
11. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
.js-anim .hero .pill-badge,
.js-anim .hero__title,
.js-anim .hero__sub,
.js-anim .hero__ticks,
.js-anim .hero__cta,
.js-anim .showcase,
.js-anim .hero__title .w,
.js-anim .site-header{ opacity:1 !important; }
}
/* ============================================================
NAV DROPDOWN — Our Services
Opens on hover AND focus-within, so it is reachable by keyboard
without any JS. A padded bridge covers the gap between trigger
and panel; without it the menu closes as the pointer travels.
============================================================ */
.nav-drop{ position:relative; }
.nav-drop__trigger{
display:inline-flex;
align-items:center;
gap:5px;
}
.nav-drop__chev{
width:15px; height:15px;
transition:transform .35s var(--ease-out);
}
.nav-drop:hover .nav-drop__chev,
.nav-drop:focus-within .nav-drop__chev{ transform:rotate(180deg); }
/* invisible bridge across the gap */
.nav-drop::after{
content:"";
position:absolute;
left:-14px; right:-14px;
top:100%;
height:26px;
}
.nav-drop__menu{
position:absolute;
top:calc(100% + 22px);
left:50%;
translate:-50% 0;
z-index:20;
width:288px;
padding:8px;
border-radius:20px;
background:var(--white);
box-shadow:
inset 0 0 0 1px rgba(15,60,110,.07),
0 6px 16px rgba(19,63,102,.07),
0 26px 48px rgba(19,63,102,.14);
opacity:0;
visibility:hidden;
transform:translateY(-8px) scale(.98);
transform-origin:50% 0;
pointer-events:none;
transition:opacity .32s var(--ease-out),
transform .32s var(--ease-out),
visibility 0s linear .32s;
}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
pointer-events:auto;
transition:opacity .32s var(--ease-out),
transform .32s var(--ease-out),
visibility 0s;
}
/* little pointer up to the trigger */
.nav-drop__menu::before{
content:"";
position:absolute;
top:-5px; left:50%;
width:12px; height:12px;
translate:-50% 0;
rotate:45deg;
border-radius:3px;
background:var(--white);
box-shadow:inset 1px 1px 0 rgba(15,60,110,.07);
}
.nav-drop__menu a{
position:relative;
display:flex;
flex-direction:column;
gap:2px;
padding:11px 14px;
border-radius:13px;
transition:background-color .3s var(--ease-out);
}
.nav-drop__menu a:hover{ background:rgba(15,156,244,.07); }
.nav-drop__menu a::after{ content:none; } /* cancel the nav underline sweep */
.nav-drop__t{
font-family:var(--f-nav);
font-size:15px;
font-weight:500;
color:var(--ink-nav);
transition:color .3s var(--ease-out);
}
.nav-drop__menu a:hover .nav-drop__t{ color:var(--blue); }
.nav-drop__d{
font-family:var(--f-body);
font-size:12.5px;
font-weight:500;
color:#8A96A6;
}
/* drawer sub-items */
.nav-drawer__sub{
padding-left:26px !important;
font-size:15px !important;
color:#5B6472 !important;
position:relative;
}
.nav-drawer__sub::before{
content:"";
position:absolute;
left:10px; top:50%;
width:6px; height:1px;
translate:0 -50%;
background:#C4CEDA;
}
/* ==== sections.css ==== */
/* ============================================================
Pool Sharks — page sections (02 onward)
Shares the tokens declared in style.css.
============================================================ */
/* ---------- shared primitives ---------- */
.shell{
width:100%;
max-width:1300px;
margin-inline:auto;
padding-inline:clamp(16px,3vw,40px);
}
.h2{
margin:22px 0 0;
font-family:var(--f-display);
font-weight:800;
font-size:clamp(31px,4.05vw,58px);
line-height:1.06;
letter-spacing:-.034em;
color:#0E1116;
text-wrap:balance;
}
.lede{
margin:20px 0 0;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(14.5px,1.12vw,16px);
line-height:1.78;
color:var(--ink-body);
}
/* button-in-button trailing pip */
/* .btn--lg zeroes --btn-px, so a pip button has to restate BOTH sides —
otherwise the label sits flush against the left edge. */
.btn--pip{ padding:0 8px 0 26px; gap:14px; }
.btn--lg.btn--pip{ min-width:0; padding:0 9px 0 30px; }
.btn--pip .pip{
width:38px; height:38px;
display:grid; place-items:center;
border-radius:50%;
background:rgba(255,255,255,.14);
transition:transform .7s cubic-bezier(.32,.72,0,1),
background-color .7s cubic-bezier(.32,.72,0,1);
}
.btn--pip .pip svg{
width:18px; height:18px;
fill:none; stroke:currentColor; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round;
}
.btn--pip:hover .pip{
background:rgba(255,255,255,.24);
transform:translate(3px,-1px) scale(1.06);
}
.btn--pip:active{ transform:scale(.985); }
/* ============================================================
02 · WHO WE ARE
Z-axis cascade. A rotated ghost panel sits behind a double-bezel
photo enclosure, with a solid credential chip breaking the front
plane. Depth comes from stacked planes, not a flat accent block.
============================================================ */
.who{
position:relative;
isolation:isolate;
padding-block:clamp(60px,6.6vw,112px);
background:var(--white);
overflow:clip;
}
/* Stays inside the 1300px .shell — same container as the nav pill.
align-items:stretch is the point: the media column is driven by the
copy's height, so a long paragraph can never leave a short photo
floating in dead space. */
.who__grid{
display:grid;
grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
align-items:stretch;
gap:clamp(40px,4.6vw,80px);
}
/* ---------- media stack ---------- */
.who__media{
position:relative;
display:flex;
margin:0;
min-height:clamp(360px,42vw,560px);
}
/* rotated panel behind — the second plane */
.who__ghost{
position:absolute;
inset:6% -5% -7% 6%;
border-radius:38px;
background:linear-gradient(155deg, rgba(15,156,244,.92) 0%, #0A6FB4 100%);
transform:rotate(-4deg);
box-shadow:0 30px 60px -24px rgba(11,111,180,.55);
}
/* outer bezel */
.who__shell{
position:relative;
flex:1;
display:flex;
padding:8px;
border-radius:34px;
background:rgba(255,255,255,.62);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.9),
0 2px 6px rgba(19,63,102,.05),
0 26px 50px rgba(19,63,102,.14),
0 60px 100px rgba(19,63,102,.10);
}
/* inner core — concentric radius: 34 - 8 = 26 */
.who__core{
position:relative;
flex:1;
overflow:hidden;
border-radius:26px;
box-shadow:inset 0 1px 1px rgba(255,255,255,.18);
}
/* fills whatever height the copy dictates; the crop favours the water */
.who__core img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 58%;
transform:scale(1.02);
transition:transform 1.4s cubic-bezier(.32,.72,0,1);
}
.who__media:hover .who__core img{ transform:scale(1.07); }
/* scrim so the chip always has something to sit against */
.who__core::after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:38%;
background:linear-gradient(180deg, transparent 0%, rgba(6,32,56,.28) 100%);
pointer-events:none;
}
/* credential chip — front plane */
.who__chip{
position:absolute;
right:clamp(-18px,-1.4vw,-6px);
bottom:clamp(-20px,-1.6vw,-8px);
display:flex;
align-items:center;
gap:15px;
padding:18px 24px 18px 20px;
border-radius:22px;
background:var(--white);
box-shadow:
inset 0 0 0 1px rgba(15,60,110,.07),
inset 0 1px 1px rgba(255,255,255,.9),
0 18px 40px rgba(19,63,102,.18);
}
.who__chip-rule{
width:4px;
align-self:stretch;
border-radius:99px;
background:linear-gradient(180deg, var(--blue), #7FC9FA);
}
.who__chip strong{
display:flex;
align-items:flex-start;
font-family:var(--f-display);
font-weight:800;
font-size:clamp(26px,2.4vw,34px);
line-height:1;
letter-spacing:-.035em;
color:#0E1116;
}
.who__chip strong em{
font-style:normal;
font-size:.55em;
line-height:1;
margin-top:.15em;
color:var(--blue);
}
.who__chip-txt{
font-family:var(--f-body);
font-weight:500;
font-size:12.5px;
line-height:1.4;
color:#5B6472;
}
/* ---------- body ---------- */
.who__body{
max-width:52ch;
align-self:center; /* copy centres against the full-height media */
}
.who__title{ max-width:15ch; }
.who__cta{ margin-top:36px; }
/* ---------- responsive ---------- */
@media (max-width:1024px){
.who__grid{ gap:44px; }
.who__title{ max-width:none; }
}
/* below 768 the cascade flattens — rotations and negative offsets
create touch-target conflicts and clipping on small screens */
@media (max-width:768px){
.who{ padding-block:72px; }
.who__grid{ grid-template-columns:1fr; gap:60px; }
/* stacked — go back to a fixed ratio, nothing to match height against */
.who__media{ min-height:0; }
.who__core img{ height:auto; aspect-ratio:16 / 11; }
.who__body{ max-width:none; }
.who__ghost{ inset:auto 0 -14px 0; height:64px; transform:none; border-radius:26px; }
.who__shell{ padding:6px; border-radius:28px; }
.who__core{ border-radius:22px; }
.who__chip{ right:12px; bottom:-16px; padding:15px 19px 15px 16px; gap:12px; }
}
@media (max-width:480px){
.who__chip{ left:12px; right:auto; }
.who__chip-txt{ font-size:11.5px; }
.who__cta{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
.who__core img,
.btn--pip .pip{ transition:none; }
.who__media:hover .who__core img{ transform:scale(1.02); }
}
/* ============================================================
03 · WHAT WE DO
The hero's gradient returns as a full-bleed panel, feathered to
white at both edges so it reads as a band of colour surfacing
through the page rather than a boxed-in section.
Asymmetric bento: 12 columns, four card scales.
============================================================ */
.serv{
position:relative;
isolation:isolate;
overflow:clip;
padding-block:clamp(80px,8.6vw,138px);
background:linear-gradient(180deg, var(--grad-a) 32%, var(--grad-b) 100%);
}
/* feathered edges — same trick as the hero's base, mirrored */
.serv__fade{
position:absolute;
left:0; right:0;
z-index:-1;
height:clamp(90px,11vw,170px);
pointer-events:none;
}
.serv__fade--top{
top:0;
background:linear-gradient(180deg,
#fff 0%, rgba(255,255,255,.92) 16%, rgba(255,255,255,.62) 42%,
rgba(255,255,255,.24) 72%, transparent 100%);
}
.serv__fade--bottom{
bottom:0;
background:linear-gradient(0deg,
#fff 0%, rgba(255,255,255,.92) 16%, rgba(255,255,255,.62) 42%,
rgba(255,255,255,.24) 72%, transparent 100%);
}
/* soft light source, upper right */
.serv__orb{
position:absolute;
z-index:-1;
right:-14%;
top:-8%;
width:58%;
aspect-ratio:1;
border-radius:50%;
background:radial-gradient(circle at 50% 50%,
rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 45%, transparent 70%);
pointer-events:none;
}
/* ---------- head ---------- */
/* copy on the left, CTA parked on the right baseline */
.serv__head{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:end;
gap:clamp(28px,4vw,64px);
margin-bottom:clamp(30px,3.2vw,48px);
}
.serv__head-copy{ max-width:58ch; }
.serv__head-copy .lede{ max-width:52ch; }
.serv__head-cta{ padding-bottom:6px; }
/* ---------- bento ---------- */
.serv__grid{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:clamp(14px,1.3vw,20px);
}
.serv__card--feature{ grid-column:span 5; grid-row:span 2; }
.serv__card--wide { grid-column:span 7; }
.serv__card--mid { grid-column:span 4; }
.serv__card--sm { grid-column:span 3; }
/* ---------- card: outer bezel ---------- */
.serv__card{
position:relative;
padding:6px;
border-radius:26px;
background:rgba(255,255,255,.34);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
transition:transform .7s cubic-bezier(.32,.72,0,1),
background-color .7s cubic-bezier(.32,.72,0,1);
}
.serv__card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.5); }
/* inner core — concentric: 26 - 6 = 20 */
.serv__core{
position:relative;
height:100%;
display:flex;
flex-direction:column;
align-items:flex-start;
padding:clamp(22px,2vw,30px);
border-radius:20px;
overflow:hidden;
background:rgba(255,255,255,.86);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.95),
0 2px 5px rgba(19,63,102,.04),
0 14px 30px rgba(19,63,102,.07);
transition:box-shadow .7s cubic-bezier(.32,.72,0,1),
background-color .7s cubic-bezier(.32,.72,0,1);
}
.serv__card:hover .serv__core{
background:rgba(255,255,255,.96);
box-shadow:
inset 0 1px 1px rgba(255,255,255,1),
0 4px 10px rgba(19,63,102,.06),
0 26px 52px rgba(19,63,102,.13);
}
/* accent wash that swells on hover */
.serv__core::before{
content:"";
position:absolute;
z-index:0;
left:-30%;
top:-60%;
width:80%;
aspect-ratio:1;
border-radius:50%;
background:radial-gradient(circle, rgba(15,156,244,.16) 0%, transparent 68%);
opacity:0;
transform:scale(.7);
transition:opacity .8s cubic-bezier(.32,.72,0,1),
transform .8s cubic-bezier(.32,.72,0,1);
pointer-events:none;
}
.serv__card:hover .serv__core::before{ opacity:1; transform:scale(1); }
.serv__core > *{ position:relative; z-index:1; }
/* ---------- card content ---------- */
.serv__ico{
width:46px; height:46px;
display:grid; place-items:center;
border-radius:14px;
background:rgba(15,156,244,.09);
box-shadow:inset 0 0 0 1px rgba(15,156,244,.15);
transition:background-color .7s cubic-bezier(.32,.72,0,1);
}
.serv__ico svg{
width:23px; height:23px;
fill:none;
stroke:var(--blue);
stroke-width:1.25;
stroke-linecap:round;
stroke-linejoin:round;
}
.serv__card:hover .serv__ico{ background:rgba(15,156,244,.15); }
.serv__num{
position:absolute;
top:clamp(20px,1.9vw,28px);
right:clamp(20px,1.9vw,28px);
font-family:var(--f-display);
font-weight:800;
font-size:12px;
letter-spacing:.14em;
color:rgba(14,17,22,.22);
}
.serv__h{
margin:20px 0 0;
font-family:var(--f-display);
font-weight:800;
font-size:clamp(17px,1.42vw,21px);
line-height:1.22;
letter-spacing:-.022em;
color:#0E1116;
text-wrap:balance;
}
.serv__p{
margin:10px 0 22px; /* the 22px is the guaranteed gap above the pip */
font-family:var(--f-body);
font-weight:500;
font-size:clamp(13.5px,1.02vw,14.5px);
line-height:1.68;
color:var(--ink-body);
}
.serv__pip{
margin-top:auto; /* pinned to the card floor at any card height */
width:34px; height:34px;
display:grid; place-items:center;
border-radius:50%;
background:rgba(14,17,22,.05);
opacity:.55;
transition:opacity .7s cubic-bezier(.32,.72,0,1),
transform .7s cubic-bezier(.32,.72,0,1);
}
.serv__pip svg{
width:17px; height:17px;
fill:none; stroke:#0E1116; stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round;
}
.serv__card:hover .serv__pip{ opacity:1; transform:translateX(4px); }
/* feature card carries more weight */
.serv__card--feature .serv__h{ font-size:clamp(21px,1.95vw,28px); }
.serv__card--feature .serv__ico{ width:54px; height:54px; border-radius:16px; }
.serv__card--feature .serv__ico svg{ width:27px; height:27px; }
/* ---------- staggered reveal ---------- */
.js-reveal .serv__grid [data-reveal]{ transition-delay:0ms; }
.js-reveal .serv__grid [data-reveal]:nth-child(2){ transition-delay:42ms; }
.js-reveal .serv__grid [data-reveal]:nth-child(3){ transition-delay:84ms; }
.js-reveal .serv__grid [data-reveal]:nth-child(4){ transition-delay:42ms; }
.js-reveal .serv__grid [data-reveal]:nth-child(5){ transition-delay:84ms; }
.js-reveal .serv__grid [data-reveal]:nth-child(6){ transition-delay:126ms; }
.js-reveal .serv__grid [data-reveal]:nth-child(7){ transition-delay:168ms; }
.js-reveal .serv__grid [data-reveal]:nth-child(8){ transition-delay:210ms; }
/* ---------- responsive ---------- */
@media (max-width:1100px){
.serv__card--feature{ grid-column:span 6; grid-row:span 1; }
.serv__card--wide { grid-column:span 6; }
.serv__card--mid { grid-column:span 6; }
.serv__card--sm { grid-column:span 6; }
}
@media (max-width:768px){
.serv{ padding-block:clamp(96px,16vw,130px); }
.serv__card--feature,
.serv__card--wide,
.serv__card--mid,
.serv__card--sm{ grid-column:span 12; }
.serv__grid{ gap:14px; }
.serv__head{ grid-template-columns:1fr; align-items:start; gap:26px; }
.serv__head-cta{ padding-bottom:0; }
.serv__head-cta .btn{ width:100%; }
/* no cascade offsets on touch — every card reveals together */
.js-reveal .serv__grid [data-reveal]{ transition-delay:0ms !important; }
}
@media (prefers-reduced-motion:reduce){
.serv__card,
.serv__core,
.serv__core::before,
.serv__pip,
.serv__ico{ transition:none; }
.serv__card:hover{ transform:none; }
}
/* ============================================================
04 · YOUR EDGE
Light treatment. The claim carries itself with scale and space;
the readout on the right is the proof — a live-reading panel
rather than a stock screenshot.
============================================================ */
.edge{
position:relative;
isolation:isolate;
overflow:clip;
padding-block:clamp(60px,6.6vw,110px);
background:var(--white);
}
.edge__inner{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
align-items:center;
gap:clamp(44px,5.2vw,92px);
}
/* ---------- copy ---------- */
.edge__title{
margin:24px 0 0;
font-family:var(--f-display);
font-weight:800;
font-size:clamp(32px,4.15vw,60px);
line-height:1.04;
letter-spacing:-.035em;
color:#0E1116;
text-wrap:balance;
}
.edge__body{
margin:22px 0 0;
max-width:48ch;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(14.5px,1.12vw,16.5px);
line-height:1.78;
color:var(--ink-body);
}
.edge__points{
margin:30px 0 0;
display:flex;
flex-direction:column;
gap:13px;
}
.edge__points li{
display:flex;
align-items:center;
gap:13px;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(13.5px,1.05vw,15px);
color:#2A3140;
}
.edge__points li span{
flex-shrink:0;
width:7px; height:7px;
border-radius:50%;
background:var(--blue);
box-shadow:0 0 0 4px rgba(15,156,244,.14);
}
.edge__copy .btn{ margin-top:36px; }
/* ---------- proof cards ----------
Real Search Console and rank-tracking captures, framed in the same
double bezel the rest of the page uses so they read as evidence
rather than pasted screenshots. */
.proof{
margin:0;
padding:8px;
border-radius:26px;
background:linear-gradient(180deg, rgba(15,156,244,.09), rgba(124,109,232,.07));
box-shadow:inset 0 0 0 1px rgba(15,60,110,.07);
transition:transform .7s cubic-bezier(.32,.72,0,1),
box-shadow .7s cubic-bezier(.32,.72,0,1);
}
.proof:hover{
transform:translateY(-5px);
box-shadow:inset 0 0 0 1px rgba(15,60,110,.12), 0 26px 52px -18px rgba(19,63,102,.28);
}
/* concentric: 26 - 8 = 18 */
.proof__core{
overflow:hidden;
border-radius:18px;
background:var(--white);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.9),
0 2px 6px rgba(19,63,102,.05),
0 18px 38px rgba(19,63,102,.10);
}
.proof__core img{
display:block;
width:100%;
height:auto;
}
.proof__cap{
display:flex;
flex-direction:column;
gap:5px;
padding:16px 14px 8px;
}
.proof__tag{
font-family:var(--f-body);
font-weight:500;
font-size:11px;
letter-spacing:.15em;
text-transform:uppercase;
color:#8A96A6;
}
.proof__stat{
font-family:var(--f-display);
font-weight:800;
font-size:clamp(15px,1.35vw,19px);
letter-spacing:-.024em;
color:#0E1116;
font-variant-numeric:tabular-nums;
}
.proof__sub{
font-family:var(--f-body);
font-weight:500;
font-size:13px;
color:var(--ink-body);
}
/* second row of supporting captures */
.proof__row{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(16px,1.8vw,26px);
margin-top:clamp(20px,2.2vw,32px);
}
.proof__row .proof__core img{
aspect-ratio:16 / 9;
object-fit:cover;
object-position:50% 0;
}
.proof__note{
margin:clamp(20px,2.2vw,30px) 0 0;
font-family:var(--f-body);
font-weight:500;
font-size:12.5px;
line-height:1.6;
color:#8A96A6;
}
/* ---------- responsive ---------- */
@media (max-width:1000px){
.edge__inner{ grid-template-columns:1fr; gap:52px; }
.edge__body{ max-width:none; }
}
@media (max-width:768px){
.edge{ padding-block:clamp(80px,14vw,110px); }
.edge__copy .btn{ width:100%; }
.proof{ border-radius:22px; padding:6px; }
.proof__core{ border-radius:16px; }
/* one per row — these are dense screenshots, two-up is unreadable here */
.proof__row{ grid-template-columns:1fr; }
.proof__row .proof__core img{ aspect-ratio:auto; }
}
@media (prefers-reduced-motion:reduce){
.proof{ transition:none; }
.proof:hover{ transform:none; }
}
/* ============================================================
05 · PROCESS
Editorial split: the pitch stays pinned on the left while the six
steps travel past it on a rail. The numbering is real information
here — it's a sequence — so it gets a progress meter rather than
being decoration.
============================================================ */
.proc{
position:relative;
padding-block:clamp(60px,6.6vw,110px);
background:var(--white);
}
/* Steps on the left, pitch on the right. DOM order keeps the heading
first so it still reads before the list; `order` handles the visual swap. */
.proc__grid{
display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
gap:clamp(44px,5.4vw,96px);
align-items:start;
}
.proc__list { order:1; }
.proc__aside{ order:2; }
/* ---------- sticky pitch ---------- */
.proc__sticky{
position:sticky;
/* clears the fixed nav pill: 30px gap + 90px pill + breathing room */
top:clamp(120px,13vw,150px);
}
.proc__sticky .lede{ max-width:44ch; }
.proc__sticky .btn{ margin-top:34px; }
/* progress meter */
.proc__meter{
display:flex;
align-items:center;
gap:16px;
margin-top:34px;
}
.proc__meter-track{
position:relative;
flex:1;
max-width:210px;
height:3px;
border-radius:99px;
background:#E7ECF2;
overflow:hidden;
}
.proc__meter-track i{
position:absolute;
inset:0 auto 0 0;
width:16.6%;
border-radius:99px;
background:linear-gradient(90deg, #7FC9FA, var(--blue));
transition:width .8s cubic-bezier(.32,.72,0,1);
}
.proc__meter-txt{
font-family:var(--f-display);
font-weight:800;
font-size:13px;
letter-spacing:.06em;
color:#9AA6B5;
font-variant-numeric:tabular-nums;
}
.proc__meter-txt b{ color:#0E1116; }
/* ---------- steps ---------- */
.proc__list{
list-style:none;
margin:0;
padding:0;
}
.step{
position:relative;
padding:0 0 clamp(38px,3.6vw,54px) clamp(38px,3.4vw,54px);
}
.step--last{ padding-bottom:0; }
/* the rail — grey track */
.step::before{
content:"";
position:absolute;
left:0; top:9px; bottom:0;
width:2px;
border-radius:99px;
background:#E7ECF2;
}
.step--last::before{ display:none; }
/* the rail — blue fill that runs as the step activates */
.step::after{
content:"";
position:absolute;
left:0; top:9px;
width:2px;
height:0;
border-radius:99px;
background:linear-gradient(180deg, var(--blue), #7FC9FA);
transition:height 1s cubic-bezier(.32,.72,0,1);
}
.step.is-active::after{ height:calc(100% - 9px); }
.step--last::after{ display:none; }
/* node */
.step__node{
position:absolute;
left:-7px; top:2px;
width:16px; height:16px;
border-radius:50%;
background:var(--white);
box-shadow:inset 0 0 0 2px #DDE4EC;
transition:box-shadow .7s cubic-bezier(.32,.72,0,1),
transform .7s cubic-bezier(.32,.72,0,1);
}
.step.is-active .step__node{
box-shadow:inset 0 0 0 5px var(--blue), 0 0 0 6px rgba(15,156,244,.14);
transform:scale(1.1);
}
.step__num{
display:block;
font-family:var(--f-display);
font-weight:800;
font-size:12px;
letter-spacing:.16em;
color:#B4BECB;
transition:color .7s cubic-bezier(.32,.72,0,1);
}
.step.is-active .step__num{ color:var(--blue); }
.step__h{
margin:10px 0 0;
font-family:var(--f-display);
font-weight:800;
font-size:clamp(19px,1.72vw,25px);
line-height:1.2;
letter-spacing:-.026em;
color:#0E1116;
text-wrap:balance;
}
.step__p{
margin:12px 0 0;
max-width:52ch;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(14px,1.08vw,15.5px);
line-height:1.75;
color:var(--ink-body);
opacity:.72;
transition:opacity .7s cubic-bezier(.32,.72,0,1);
}
.step.is-active .step__p{ opacity:1; }
/* ---------- responsive ---------- */
@media (max-width:1000px){
.proc__grid{ grid-template-columns:1fr; gap:52px; }
/* stacked: heading leads again, steps follow */
.proc__aside{ order:1; }
.proc__list { order:2; }
/* nothing to scroll past once stacked — pinning would just stick to the top */
.proc__sticky{ position:static; }
.proc__sticky .lede{ max-width:none; }
.proc__meter-track{ max-width:none; }
}
@media (max-width:768px){
.proc{ padding-block:clamp(80px,14vw,110px); }
.proc__sticky .btn{ width:100%; }
.step{ padding-left:32px; }
}
@media (prefers-reduced-motion:reduce){
.step::after{ transition:none; }
.step__node,
.step__num,
.step__p,
.proc__meter-track i{ transition:none; }
}
/* ============================================================
06 · FAQ
Editorial accordion. Oversized questions on hairline rules, with
a standing help card offset to the right of the heading. Answers
open via grid-template-rows 0fr -> 1fr, which animates to the
content's real height without measuring anything in JS.
============================================================ */
.faq{
position:relative;
padding-block:clamp(60px,6.6vw,110px);
background:var(--white);
}
/* ---------- head, centred ---------- */
.faq__top{
margin-bottom:clamp(30px,3.2vw,48px);
}
/* Measured in Manrope 800 @58px/-0.034em:
"Got questions?" 410px
"We've heard them all." 576px
The old 22ch cap was under half that, so both halves wrapped again.
text-wrap:normal so the explicit
is the only break point. */
.faq__head{
max-width:660px;
margin-inline:auto;
text-align:center;
}
.faq__head .h2{ text-wrap:normal; }
/* ---------- accordion ---------- */
.faq__list{
border-top:1px solid #E7ECF2;
}
.qa{
border-bottom:1px solid #E7ECF2;
transition:background-color .7s cubic-bezier(.32,.72,0,1);
}
.qa.is-open{ background:linear-gradient(90deg, rgba(15,156,244,.035), transparent 62%); }
.qa__hd{ margin:0; }
.qa__q{
width:100%;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:clamp(16px,2vw,28px);
padding:clamp(22px,2.2vw,30px) clamp(4px,1vw,14px);
text-align:left;
cursor:pointer;
}
.qa__q:focus-visible{ outline:2px solid var(--blue); outline-offset:-4px; border-radius:10px; }
.qa__n{
font-family:var(--f-display);
font-weight:800;
font-size:12px;
letter-spacing:.16em;
color:#B4BECB;
transition:color .7s cubic-bezier(.32,.72,0,1);
}
.qa.is-open .qa__n{ color:var(--blue); }
.qa__txt{
font-family:var(--f-display);
font-weight:800;
font-size:clamp(16.5px,1.62vw,23px);
line-height:1.3;
letter-spacing:-.026em;
color:#0E1116;
text-wrap:balance;
transition:color .7s cubic-bezier(.32,.72,0,1);
}
.qa__q:hover .qa__txt{ color:var(--blue); }
/* plus that morphs to a minus */
.qa__icon{
position:relative;
width:40px; height:40px;
border-radius:50%;
background:rgba(14,17,22,.045);
box-shadow:inset 0 0 0 1px rgba(15,60,110,.07);
transition:background-color .7s cubic-bezier(.32,.72,0,1),
box-shadow .7s cubic-bezier(.32,.72,0,1),
transform .7s cubic-bezier(.32,.72,0,1);
}
.qa__icon i{
position:absolute;
top:50%; left:50%;
width:14px; height:2px;
border-radius:99px;
background:#0E1116;
translate:-50% -50%;
transition:transform .7s cubic-bezier(.32,.72,0,1),
background-color .7s cubic-bezier(.32,.72,0,1);
}
.qa__icon i:last-child{ transform:rotate(90deg); }
.qa.is-open .qa__icon{
background:var(--blue);
box-shadow:inset 0 0 0 1px rgba(15,156,244,.4), 0 6px 16px -5px rgba(15,156,244,.7);
transform:rotate(180deg);
}
.qa.is-open .qa__icon i{ background:var(--white); }
.qa.is-open .qa__icon i:last-child{ transform:rotate(0deg); }
.qa__q:hover .qa__icon{ background:rgba(15,156,244,.10); }
.qa.is-open .qa__q:hover .qa__icon{ background:var(--blue-deep); }
/* answer — 0fr to 1fr animates to the real content height, no JS measuring */
.qa__a{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .65s cubic-bezier(.32,.72,0,1);
}
.qa.is-open .qa__a{ grid-template-rows:1fr; }
.qa__a-in{ overflow:hidden; }
.qa__a-in p{
max-width:74ch;
margin:0;
padding:0 clamp(52px,5vw,86px) clamp(26px,2.6vw,34px) clamp(38px,3.6vw,58px);
font-family:var(--f-body);
font-weight:500;
font-size:clamp(14px,1.08vw,15.5px);
line-height:1.8;
color:var(--ink-body);
opacity:0;
transition:opacity .5s cubic-bezier(.32,.72,0,1) .12s;
}
.qa.is-open .qa__a-in p{ opacity:1; }
/* ---------- responsive ---------- */
@media (max-width:600px){
.faq{ padding-block:clamp(80px,14vw,110px); }
.qa__n{ display:none; }
.qa__q{ grid-template-columns:minmax(0,1fr) auto; gap:14px; }
.qa__icon{ width:34px; height:34px; }
.qa__a-in p{ padding:0 0 24px; }
}
@media (prefers-reduced-motion:reduce){
.qa__a{ transition:none; }
.qa__icon,
.qa__icon i,
.qa__txt,
.qa__n,
.qa__a-in p{ transition:none; }
}
/* ============================================================
07 · BOOK YOUR FREE CONSULTATION
The page's one saturated section. Everything before it is white
or near-white, so the closing ask arrives on brand blue and reads
as the destination rather than one more block.
============================================================ */
.book{
position:relative;
isolation:isolate;
overflow:clip;
padding-block:clamp(62px,6.8vw,112px);
background:linear-gradient(158deg, #0F9CF4 0%, #0C7BC9 52%, #0A5C99 100%);
}
.book__glow{
position:absolute;
z-index:-1;
inset:0;
background:
radial-gradient(46% 54% at 88% 6%, rgba(255,255,255,.22) 0%, transparent 64%),
radial-gradient(52% 60% at 4% 96%, rgba(124,109,232,.34) 0%, transparent 66%);
pointer-events:none;
}
.book__grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
align-items:center;
gap:clamp(40px,5vw,84px);
}
/* ---------- copy ---------- */
.eyebrow--onblue{
background:rgba(255,255,255,.16);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
color:#EAF6FF;
}
.book__title{
margin:24px 0 0;
font-family:var(--f-display);
font-weight:800;
font-size:clamp(30px,3.7vw,52px);
line-height:1.05;
letter-spacing:-.034em;
color:#FFFFFF;
text-wrap:balance;
}
.book__title-alt{ color:#BFE6FF; }
.book__body{
margin:20px 0 0;
max-width:46ch;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(14.5px,1.1vw,16px);
line-height:1.75;
color:rgba(255,255,255,.82);
}
.book__points{
margin:28px 0 0;
display:flex;
flex-direction:column;
gap:12px;
}
.book__points li{
display:flex;
align-items:center;
gap:13px;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(13.5px,1.05vw,15px);
color:#FFFFFF;
}
.book__points li span{
flex-shrink:0;
width:23px; height:23px;
display:grid; place-items:center;
border-radius:50%;
background:rgba(255,255,255,.18);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.book__points li svg{
width:13px; height:13px;
fill:none; stroke:#fff; stroke-width:2.4;
stroke-linecap:round; stroke-linejoin:round;
}
.book__contact{
margin-top:32px;
display:flex;
flex-wrap:wrap;
gap:14px 34px;
}
.book__call{
display:inline-flex;
align-items:center;
gap:13px;
transition:opacity .5s cubic-bezier(.32,.72,0,1);
}
.book__call:hover{ opacity:.8; }
.book__call-ico{
width:44px; height:44px;
display:grid; place-items:center;
border-radius:50%;
background:rgba(255,255,255,.16);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.book__call-ico svg{ width:19px; height:19px; fill:#fff; }
.book__call-txt{ display:flex; flex-direction:column; line-height:1.25; }
.book__call-txt small{
font-family:var(--f-body);
font-size:12px;
color:rgba(255,255,255,.72);
}
.book__call-txt strong{
font-family:var(--f-display);
font-weight:800;
font-size:clamp(14px,1.25vw,18px);
word-break:break-word;
letter-spacing:-.015em;
color:#fff;
}
/* ---------- form panel ---------- */
.book__panel{
padding:8px;
border-radius:28px;
background:rgba(255,255,255,.16);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
}
/* concentric: 28 - 8 = 20 */
.book__form{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
padding:clamp(20px,2.2vw,30px);
border-radius:20px;
background:var(--white);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.9),
0 24px 54px rgba(6,44,80,.24);
}
.book__form textarea{
width:100%;
min-height:104px;
padding:16px 22px;
resize:vertical;
font-family:var(--f-body);
font-weight:500;
font-size:15px;
line-height:1.6;
color:#1F2937;
background:var(--white);
border:0;
border-radius:18px;
outline:none;
box-shadow:inset 0 0 0 1px #E4E9EF;
transition:box-shadow .5s cubic-bezier(.32,.72,0,1);
}
.book__form textarea::placeholder{ color:#98A2B2; }
.book__form textarea:hover{ box-shadow:inset 0 0 0 1px #C9D4E1; }
.book__form textarea:focus{
box-shadow:inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(15,156,244,.13);
}
.field.is-invalid textarea{ box-shadow:inset 0 0 0 1.5px #F0A4A0; background:#FFFCFC; }
.book__privacy{
grid-column:1 / -1;
display:flex;
align-items:center;
gap:9px;
margin:2px 0 0;
font-family:var(--f-body);
font-weight:500;
font-size:12.5px;
color:#8A96A6;
}
.book__privacy svg{
flex-shrink:0;
width:16px; height:16px;
fill:none; stroke:#8A96A6; stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round;
}
/* ---------- responsive ---------- */
@media (max-width:980px){
.book__grid{ grid-template-columns:1fr; gap:48px; }
.book__body{ max-width:none; }
}
@media (max-width:560px){
.book{ padding-block:clamp(72px,14vw,100px); }
.book__panel{ padding:6px; border-radius:24px; }
.book__form{ grid-template-columns:1fr; border-radius:18px; }
.book__call{ width:100%; }
}
/* ============================================================
FOOTER
Deliberately quiet — the blue section above is the closing note,
so this is wayfinding and legal, nothing more.
============================================================ */
.foot{
background:var(--white);
padding-block:clamp(38px,4vw,56px) 0;
}
.foot__inner{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:22px 34px;
padding-bottom:clamp(26px,2.8vw,38px);
}
.foot__brand img{
width:clamp(160px,15vw,210px);
height:auto;
transition:opacity .4s cubic-bezier(.32,.72,0,1);
}
.foot__brand:hover img{ opacity:.75; }
.foot__nav{
display:flex;
flex-wrap:wrap;
gap:10px 26px;
}
.foot__nav a{
font-family:var(--f-body);
font-weight:500;
font-size:14px;
color:var(--ink-body);
transition:color .4s cubic-bezier(.32,.72,0,1);
}
.foot__nav a:hover{ color:var(--blue); }
.foot__mail{
font-family:var(--f-body);
font-weight:500;
font-size:14px;
color:#0E1116;
transition:color .4s cubic-bezier(.32,.72,0,1);
}
.foot__mail:hover{ color:var(--blue); }
.foot__base{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:8px 24px;
padding-block:20px clamp(24px,2.6vw,34px);
border-top:1px solid #E7ECF2;
font-family:var(--f-body);
font-weight:500;
font-size:13px;
color:#8A96A6;
}
@media (max-width:640px){
.foot__inner{ flex-direction:column; align-items:flex-start; gap:20px; }
.foot__base{ flex-direction:column; align-items:flex-start; gap:6px; }
}
/* ============================================================
06 · TESTIMONIALS
Warm grey ground so the dark cards read as objects sitting on a
surface. Native scroll-snap rail — arrows drive scrollBy, so drag,
trackpad, arrow keys and the buttons all share one mechanism.
============================================================ */
.revs{
position:relative;
padding-block:clamp(56px,6.2vw,100px);
background:#F4F4F2; /* warm grey, not blue-grey — sits apart from the brand tints */
overflow:clip;
}
/* ---------- head ---------- */
.revs__head{
max-width:62ch;
margin:0 auto;
text-align:center;
}
.revs__title{
max-width:19ch;
margin-inline:auto;
text-wrap:balance;
}
.revs__lede{ margin-inline:auto; max-width:48ch; }
/* social-proof strip under the heading */
.revs__stat{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:10px 14px;
margin:clamp(26px,3vw,40px) 0 clamp(28px,3.2vw,44px);
}
.revs__count{
font-family:var(--f-display);
font-weight:800;
font-size:clamp(34px,3.6vw,50px);
line-height:1;
letter-spacing:-.04em;
color:#0E1116;
font-variant-numeric:tabular-nums;
}
.revs__label,
.revs__where{
font-family:var(--f-body);
font-weight:500;
font-size:clamp(14px,1.2vw,17px);
color:#3A424E;
}
.revs__where{ font-weight:600; color:#0E1116; }
.revs__logos{ display:inline-flex; gap:7px; }
.revs__logo{
width:32px; height:32px;
display:grid; place-items:center;
border-radius:50%;
background:var(--white);
box-shadow:0 2px 6px rgba(19,63,102,.10);
}
.revs__logo svg{ width:17px; height:17px; }
/* ---------- rail ---------- */
.revs__stage{ position:relative; padding-inline:26px; margin-inline:-26px; }
.revs__rail{
display:flex;
gap:clamp(14px,1.4vw,22px);
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scroll-padding-inline:26px;
/* generous padding so card shadows aren't sliced by the scroll container */
padding:26px;
margin:-26px;
/* hide the scrollbar without killing the scrolling */
scrollbar-width:none;
-ms-overflow-style:none;
}
.revs__rail::-webkit-scrollbar{ display:none; }
.revs__rail:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:22px; }
/* ---------- card ---------- */
.rev{
flex:0 0 auto;
width:clamp(268px,25.5vw,340px);
scroll-snap-align:start;
display:flex;
flex-direction:column;
padding:clamp(20px,1.9vw,26px);
border-radius:20px;
background:#17191C;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 10px 24px -12px rgba(12,18,26,.30);
transition:transform .7s cubic-bezier(.32,.72,0,1),
box-shadow .7s cubic-bezier(.32,.72,0,1);
}
.rev:hover{
transform:translateY(-4px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.09),
0 20px 40px -16px rgba(12,18,26,.38);
}
.rev__top{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:12px;
}
.rev__ava{
width:40px; height:40px;
display:grid; place-items:center;
border-radius:50%;
background:linear-gradient(150deg, rgba(15,156,244,.9), #0A6FB4);
font-family:var(--f-display);
font-weight:800;
font-size:13.5px;
letter-spacing:.02em;
color:#fff;
}
.rev__id{ min-width:0; }
.rev__id strong{
display:block;
font-family:var(--f-display);
font-weight:800;
font-size:14px;
letter-spacing:.01em;
text-transform:uppercase;
color:#F2F5F8;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.rev__co{
display:block;
margin-top:2px;
font-family:var(--f-body);
font-weight:500;
font-size:11.5px;
color:#8B96A5;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.rev__src{
width:28px; height:28px;
display:grid; place-items:center;
border-radius:50%;
background:#fff;
}
.rev__src svg{ width:15px; height:15px; }
.rev__rate{
display:flex;
align-items:center;
gap:8px;
margin:16px 0 0;
}
.rev__rate b{
font-family:var(--f-display);
font-weight:800;
font-size:14px;
color:#F2F5F8;
font-variant-numeric:tabular-nums;
}
.rev__stars{ display:inline-flex; gap:2px; }
.rev__stars svg{ width:13px; height:13px; fill:#FFB800; }
.rev__txt{
margin:13px 0 0;
font-family:var(--f-body);
font-weight:500;
font-size:13.5px;
line-height:1.72;
color:#B7C1CD;
}
/* ---------- arrows ---------- */
.revs__arrow{
position:absolute;
top:50%;
translate:0 -50%;
z-index:3;
width:46px; height:46px;
display:grid; place-items:center;
border-radius:50%;
background:var(--blue);
box-shadow:0 8px 20px -6px rgba(15,156,244,.6);
transition:background-color .5s cubic-bezier(.32,.72,0,1),
transform .5s cubic-bezier(.32,.72,0,1),
opacity .35s ease;
}
.revs__arrow svg{
width:20px; height:20px;
fill:none; stroke:#fff; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round;
}
.revs__arrow:hover{ background:var(--blue-deep); transform:translateY(-50%) scale(1.06); }
.revs__arrow:active{ transform:translateY(-50%) scale(.96); }
.revs__arrow--prev{ left:clamp(-14px,-1vw,-4px); }
.revs__arrow--next{ right:clamp(-14px,-1vw,-4px); }
.revs__arrow[disabled]{ opacity:0; pointer-events:none; }
/* ---------- responsive ---------- */
@media (max-width:768px){
.revs{ padding-block:clamp(66px,13vw,96px); }
.revs__head{ gap:8px 10px; }
/* arrows would sit on top of the cards at this width — swipe instead */
.revs__arrow{ display:none; }
.revs__stage{ padding-inline:0; margin-inline:0; }
.revs__rail{
scroll-snap-type:x proximity;
padding:18px 0 22px;
margin:-18px 0 0;
scroll-padding-inline:0;
}
}
@media (prefers-reduced-motion:reduce){
.rev,
.revs__arrow{ transition:none; }
.rev:hover{ transform:none; }
.revs__rail{ scroll-behavior:auto; }
}
/* ============================================================
06b · THE EQUATION
Traffic + Trust + Conversion = more pools sold.
Sits inside the testimonials section, directly under the rail.
============================================================ */
.eq{ margin-top:clamp(28px,3vw,46px); }
.eq__row{
display:flex;
align-items:stretch;
justify-content:center;
gap:clamp(10px,1.1vw,16px);
}
/* ---------- card ---------- */
.eq__card{
flex:1 1 0;
min-width:0;
display:flex;
flex-direction:column;
padding:clamp(18px,1.8vw,26px);
border-radius:20px;
background:var(--white);
box-shadow:
inset 0 0 0 1px rgba(15,60,110,.07),
0 10px 24px -14px rgba(19,63,102,.35);
transition:transform .7s cubic-bezier(.32,.72,0,1),
box-shadow .7s cubic-bezier(.32,.72,0,1);
}
.eq__card:hover{
transform:translateY(-4px);
box-shadow:
inset 0 0 0 1px rgba(15,156,244,.24),
0 20px 38px -16px rgba(19,63,102,.4);
}
/* blue edge, mirroring the reference's accent stripe */
.eq__card{ position:relative; overflow:hidden; }
.eq__card::before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width:4px;
background:linear-gradient(180deg, var(--blue), #7FC9FA);
}
.eq__top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.eq__num{
padding:5px 11px;
border-radius:9px;
background:rgba(15,156,244,.09);
box-shadow:inset 0 0 0 1px rgba(15,156,244,.2);
font-family:var(--f-display);
font-weight:800;
font-size:12px;
letter-spacing:.14em;
color:var(--blue);
}
.eq__ico{
width:34px; height:34px;
display:grid; place-items:center;
border-radius:10px;
background:rgba(15,156,244,.07);
}
.eq__ico svg{
width:19px; height:19px;
fill:none; stroke:var(--blue); stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round;
}
.eq__h{
margin:18px 0 0;
font-family:var(--f-display);
font-weight:800;
font-size:clamp(20px,2.1vw,30px);
line-height:1.05;
letter-spacing:-.03em;
text-transform:uppercase;
color:#0E1116;
}
.eq__sub{
margin:8px 0 0;
font-family:var(--f-body);
font-weight:600;
font-size:clamp(11.5px,.95vw,12.5px);
line-height:1.5;
letter-spacing:.03em;
text-transform:uppercase;
color:var(--blue);
}
/* ---------- disclosure ---------- */
.eq__btn{
margin-top:auto;
padding-top:18px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.eq__btn > span{
flex:1;
padding:13px 16px;
border-radius:12px;
background:var(--blue);
box-shadow:0 8px 18px -8px rgba(15,156,244,.7);
font-family:var(--f-ui);
font-weight:500;
font-size:14px;
letter-spacing:.02em;
color:#fff;
transition:background-color .5s cubic-bezier(.32,.72,0,1);
}
.eq__btn svg{
position:absolute;
right:calc(clamp(18px,1.8vw,26px) + 16px);
width:17px; height:17px;
fill:none; stroke:#fff; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round;
pointer-events:none;
transition:transform .5s cubic-bezier(.32,.72,0,1);
}
.eq__btn{ position:relative; }
.eq__btn:hover > span{ background:var(--blue-deep); }
.eq__btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.eq__ans{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .6s cubic-bezier(.32,.72,0,1);
}
.eq__btn[aria-expanded="true"] + .eq__ans{ grid-template-rows:1fr; }
.eq__ans-in{ overflow:hidden; }
.eq__ans-in p{
margin:14px 0 0;
font-family:var(--f-body);
font-weight:500;
font-size:13px;
line-height:1.68;
color:var(--ink-body);
}
/* ---------- operators ---------- */
.eq__op{
flex:0 0 auto;
align-self:center;
width:38px; height:38px;
display:grid; place-items:center;
border-radius:50%;
background:var(--white);
box-shadow:
inset 0 0 0 1px rgba(15,156,244,.22),
0 6px 14px -6px rgba(19,63,102,.3);
}
.eq__op svg{
width:18px; height:18px;
fill:none; stroke:var(--blue); stroke-width:2.2;
stroke-linecap:round;
}
.eq__op--eq svg{ stroke-width:2.4; }
/* ---------- result ---------- */
.eq__card--result{
justify-content:center;
background:linear-gradient(158deg, #0F9CF4 0%, #0C7BC9 55%, #0A5C99 100%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.22),
0 14px 30px -14px rgba(10,92,153,.7);
}
.eq__card--result::before{ display:none; }
.eq__card--result:hover{
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.34),
0 24px 46px -18px rgba(10,92,153,.75);
}
.eq__crown{
width:36px; height:36px;
display:grid; place-items:center;
border-radius:11px;
background:rgba(255,255,255,.18);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.eq__crown svg{
width:21px; height:21px;
fill:none; stroke:#fff; stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round;
}
.eq__h--result{ margin-top:16px; color:#fff; }
.eq__pill{
align-self:flex-start;
margin-top:14px;
padding:7px 14px;
border-radius:99px;
background:rgba(255,255,255,.18);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
font-family:var(--f-ui);
font-weight:500;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:#EAF6FF;
}
/* ---------- responsive ---------- */
@media (max-width:1080px){
.eq__row{ flex-wrap:wrap; }
.eq__card{ flex:1 1 calc(50% - 60px); }
.eq__card--result{ flex-basis:100%; }
}
@media (max-width:680px){
/* operators between stacked cards read as noise — drop them */
.eq__op{ display:none; }
.eq__row{ flex-direction:column; gap:12px; }
.eq__card{ flex:1 1 auto; }
.eq__h{ font-size:26px; }
.eq__pill{ align-self:flex-start; }
}
@media (prefers-reduced-motion:reduce){
.eq__card,
.eq__ans,
.eq__btn svg,
.eq__btn > span{ transition:none; }
.eq__card:hover{ transform:none; }
}
/* ==== service.css ==== */
/* ============================================================
Service pages — only what the homepage components don't cover.
Everything else (who / serv / proc / faq / book / footer) is
reused verbatim from sections.css.
============================================================ */
/* ---------- compact hero ---------- */
.shero{
position:relative;
isolation:isolate;
overflow:clip;
/* clears the fixed nav pill */
padding:clamp(126px,13vw,180px) 0 clamp(50px,5.4vw,86px);
background:linear-gradient(180deg, var(--grad-a) 30%, var(--grad-b) 100%);
}
.shero__fade{
position:absolute;
z-index:-1;
left:0; right:0; bottom:0;
height:clamp(80px,10vw,160px);
background:linear-gradient(0deg,
#fff 0%, rgba(255,255,255,.9) 20%, rgba(255,255,255,.55) 48%,
rgba(255,255,255,.2) 76%, transparent 100%);
pointer-events:none;
}
.shero__grid{
display:grid;
grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
align-items:center;
gap:clamp(40px,4.8vw,80px);
}
.shero__title{
margin:22px 0 0;
font-family:var(--f-display);
font-weight:800;
font-size:clamp(32px,4.2vw,60px);
line-height:1.05;
letter-spacing:-.035em;
color:#0E1116;
text-wrap:balance;
}
.shero__sub{
margin:22px 0 0;
max-width:52ch;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(14.5px,1.15vw,16.5px);
line-height:1.78;
color:var(--ink-body);
}
.shero__cta{
margin-top:34px;
display:flex;
flex-wrap:wrap;
gap:14px;
}
/* media — same double bezel language as the rest of the site */
.shero__media{ margin:0; }
.shero__frame{
padding:8px;
border-radius:30px;
background:rgba(255,255,255,.6);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.9),
0 2px 6px rgba(19,63,102,.05),
0 24px 46px rgba(19,63,102,.13),
0 56px 92px rgba(19,63,102,.09);
}
.shero__frame img{
display:block;
width:100%;
height:auto;
aspect-ratio:16 / 11;
object-fit:cover;
border-radius:22px; /* concentric: 30 - 8 */
}
/* ---------- why us ---------- */
.why{
position:relative;
padding-block:clamp(56px,6.2vw,102px);
background:var(--white);
}
/* A ch cap here is measured in 16px body text, not the 58px heading it is
meant to constrain — 24ch came out under 200px and stacked the words one
per line. Same trap the FAQ head hit, same fix: a real width.
Longest of the four page headings is 60 characters, which balances to
two lines at this width. */
.why__head{
max-width:720px;
margin:0 auto clamp(28px,3vw,46px);
text-align:center;
}
.why__head .h2{ text-wrap:balance; }
.why__grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(14px,1.4vw,22px);
}
.why__card{
position:relative;
padding:clamp(24px,2.2vw,32px);
border-radius:22px;
background:var(--white);
box-shadow:
inset 0 0 0 1px rgba(15,60,110,.07),
0 2px 5px rgba(19,63,102,.04),
0 14px 30px rgba(19,63,102,.06);
transition:transform .7s cubic-bezier(.32,.72,0,1),
box-shadow .7s cubic-bezier(.32,.72,0,1);
}
.why__card:hover{
transform:translateY(-5px);
box-shadow:
inset 0 0 0 1px rgba(15,156,244,.22),
0 4px 10px rgba(19,63,102,.05),
0 26px 50px rgba(19,63,102,.12);
}
.why__n{
display:block;
font-family:var(--f-display);
font-weight:800;
font-size:12px;
letter-spacing:.16em;
color:var(--blue);
}
.why__card h3{
margin:14px 0 0;
font-family:var(--f-display);
font-weight:800;
font-size:clamp(17px,1.4vw,20px);
line-height:1.25;
letter-spacing:-.024em;
color:#0E1116;
}
.why__card p{
margin:10px 0 0;
font-family:var(--f-body);
font-weight:500;
font-size:clamp(13.5px,1.02vw,14.5px);
line-height:1.7;
color:var(--ink-body);
}
/* ---------- responsive ---------- */
@media (max-width:1100px){
.why__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
.shero__grid{ grid-template-columns:1fr; gap:44px; }
.shero__sub{ max-width:none; }
}
@media (max-width:680px){
.shero{ padding-top:clamp(118px,26vw,150px); }
.shero__cta{ width:100%; flex-direction:column; }
.shero__cta .btn{ width:100%; }
.why__grid{ grid-template-columns:1fr; }
.why__head{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
.why__card{ transition:none; }
.why__card:hover{ transform:none; }
}
/* ---- editable tick list ----
The tick was an inline