/* ============================================================ Vertex Solar & Roofing · Site styles Ported from the Claude Design handoff (tokens + components). "Energy Independence Done Right." ============================================================ */ /* ---- Fonts ---- */ /* Bricolage Grotesque (display) · Hanken Grotesk (body) via Google Fonts. Loaded with preconnect + display=swap in for performance. */ /* ============================================================ TOKENS ============================================================ */ :root { /* Brand core */ --vsr-gulf-blue:#2C7BE5; --vsr-deep-marine:#0A2E4D; --vsr-lagoon-teal:#0FB6C2; --vsr-sunset-gold:#FBA817; --vsr-sunset-coral:#F2683C; --vsr-shell:#FBF7F0; --vsr-ink:#0E1B2A; /* Blue scale */ --blue-50:#EAF2FD; --blue-100:#CFE2FB; --blue-200:#A3C8F6; --blue-300:#6FA8EF; --blue-400:#4790EA; --blue-500:#2C7BE5; --blue-600:#1E63C2; --blue-700:#184E9C; --blue-800:#143E78; --blue-900:#0A2E4D; /* Teal scale */ --teal-50:#E5F9FB; --teal-100:#C2F0F4; --teal-200:#8AE2E9; --teal-300:#4FD0DA; --teal-400:#25C3CF; --teal-500:#0FB6C2; --teal-600:#0B96A1; --teal-700:#0A7882; --teal-800:#0A5C63; /* Gold scale */ --gold-50:#FEF4E0; --gold-100:#FDE7BC; --gold-200:#FCD380; --gold-300:#FBC04A; --gold-400:#FBB22B; --gold-500:#FBA817; --gold-600:#E0900A; --gold-700:#B57208; --gold-800:#8A5707; /* Coral scale */ --coral-50:#FDEDE6; --coral-100:#FAD6C6; --coral-200:#F6B299; --coral-300:#F4906B; --coral-400:#F37A4F; --coral-500:#F2683C; --coral-600:#D9521F; --coral-700:#B0411A; /* Sand neutrals */ --sand-0:#FFFFFF; --sand-50:#FBF7F0; --sand-100:#F4ECDF; --sand-200:#E8DCC8; --sand-300:#D6C7AD; --sand-400:#AE9E84; --sand-500:#8A7C66; --sand-600:#6B5F4D; --sand-700:#463E32; --sand-800:#2E2820; /* Ink neutrals */ --ink-900:#0E1B2A; --ink-800:#17293B; --ink-700:#243A4F; --ink-600:#3C5063; --ink-500:#5C6E7E; --ink-400:#8395A2; --ink-300:#AEBCC6; --ink-200:#D2DBE2; --ink-100:#E7ECF0; --ink-50:#F2F5F7; /* Surfaces */ --surface-page:var(--sand-50); --surface-page-alt:var(--sand-100); --surface-card:var(--sand-0); --surface-raised:var(--sand-0); --surface-sunk:var(--sand-100); --surface-dark:var(--blue-900); --surface-dark-alt:#0D3A5F; --surface-inverse:var(--ink-900); /* Text */ --text-heading:var(--blue-900); --text-body:var(--ink-800); --text-muted:var(--ink-500); --text-subtle:var(--ink-400); --text-on-dark:#EAF2FB; --text-on-dark-muted:#9DB6CC; --text-on-gold:var(--blue-900); --text-link:var(--blue-600); --text-link-hover:var(--blue-700); /* Brand / interactive */ --brand-primary:var(--blue-500); --brand-primary-hover:var(--blue-600); --brand-primary-active:var(--blue-700); --brand-cta:var(--gold-500); --brand-cta-hover:var(--gold-600); --brand-cta-active:var(--gold-700); --brand-accent:var(--teal-500); --brand-warm:var(--coral-500); /* Service worlds */ --service-solar:var(--gold-500); --service-roofing:var(--coral-500); --service-water:var(--teal-500); /* Lines */ --border-subtle:var(--ink-100); --border-default:var(--ink-200); --border-strong:var(--ink-300); --border-on-dark:rgba(255,255,255,0.14); --ring-focus:var(--blue-400); --danger:#D9412B; /* Gradients */ --grad-gulf-sunset:linear-gradient(105deg,var(--gold-500) 0%,var(--coral-500) 100%); --grad-gulf-water:linear-gradient(105deg,var(--blue-500) 0%,var(--teal-500) 100%); --grad-sunrise:linear-gradient(180deg,#FFE6B0 0%,var(--gold-400) 42%,var(--coral-400) 100%); --grad-deep-sea:linear-gradient(180deg,#1657A6 0%,var(--blue-900) 100%); --grad-shell-wash:linear-gradient(180deg,#FFFFFF 0%,var(--sand-50) 100%); --wash-gold:linear-gradient(180deg,rgba(251,168,23,0.10),rgba(242,104,60,0.06)); --wash-water:linear-gradient(180deg,rgba(44,123,229,0.08),rgba(15,182,194,0.06)); /* Type */ --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; --font-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --fs-display-2xl:clamp(3.25rem,6.5vw,5.5rem); --fs-display-xl:clamp(2.75rem,5vw,4.25rem); --fs-display-lg:clamp(2.25rem,3.8vw,3.25rem); --fs-h1:clamp(2rem,3vw,2.75rem); --fs-h2:clamp(1.625rem,2.3vw,2.125rem); --fs-h3:clamp(1.3rem,1.7vw,1.625rem); --fs-h4:1.25rem; --fs-h5:1.0625rem; --fs-xs:0.75rem; --fs-sm:0.875rem; --fs-base:1rem; --fs-md:1.0625rem; --fs-lg:1.1875rem; --fs-xl:1.375rem; --lh-tight:1.05; --lh-snug:1.18; --lh-heading:1.12; --lh-normal:1.5; --lh-relaxed:1.65; --ls-tighter:-0.03em; --ls-tight:-0.018em; --ls-wide:0.02em; --ls-eyebrow:0.14em; /* Spacing */ --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-7:2rem; --space-8:2.5rem; --space-9:3rem; --space-10:4rem; --space-11:5rem; --space-12:6rem; --pad-card:var(--space-6); --pad-card-lg:var(--space-8); --section-y:clamp(3.5rem,7vw,7rem); --section-y-sm:clamp(2.5rem,5vw,4.5rem); --container:1200px; --container-text:720px; --gutter:clamp(1.25rem,4vw,2.5rem); /* Radius */ --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-2xl:40px; --radius-pill:999px; --radius-button:var(--radius-pill); --radius-input:var(--radius-md); --radius-card:var(--radius-lg); --radius-tile:var(--radius-xl); /* Shadow + motion */ --shadow-xs:0 1px 2px rgba(10,46,77,0.06); --shadow-sm:0 2px 6px rgba(10,46,77,0.07); --shadow-md:0 8px 22px -8px rgba(10,46,77,0.16),0 2px 6px rgba(10,46,77,0.05); --shadow-lg:0 20px 44px -14px rgba(10,46,77,0.22),0 6px 14px rgba(10,46,77,0.06); --shadow-xl:0 36px 70px -22px rgba(10,46,77,0.30),0 10px 24px rgba(10,46,77,0.08); --glow-gold:0 8px 26px -6px rgba(251,168,23,0.55),0 2px 8px rgba(251,168,23,0.35); --glow-gold-strong:0 12px 34px -6px rgba(251,168,23,0.70),0 3px 10px rgba(242,104,60,0.40); --ring-focus-shadow:0 0 0 3px rgba(44,123,229,0.35); --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-spring:cubic-bezier(0.34,1.56,0.64,1); --dur-fast:140ms; --dur-base:220ms; --dur-slow:360ms; } /* ============================================================ BASE / RESET ============================================================ */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ margin:0;font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-normal); color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-heading);line-height:var(--lh-heading); letter-spacing:var(--ls-tight);font-weight:var(--fw-bold);margin:0 0 0.5em;text-wrap:balance;} p{margin:0 0 1em;text-wrap:pretty;} a{color:var(--text-link);text-decoration:none;} a:hover{color:var(--text-link-hover);} strong,b{font-weight:var(--fw-bold);} img,svg,video{display:block;max-width:100%;} ul{margin:0;padding:0;} ::selection{background:rgba(251,168,23,0.30);} :focus-visible{outline:none;box-shadow:var(--ring-focus-shadow);border-radius:var(--radius-xs);} .container{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);} .section{padding-top:var(--section-y-sm);padding-bottom:var(--section-y-sm);} .skip-link{position:absolute;left:-999px;top:0;background:var(--brand-cta);color:var(--blue-900); padding:0.6rem 1rem;border-radius:0 0 var(--radius-md) 0;font-weight:700;z-index:200;} .skip-link:focus{left:0;color:var(--blue-900);} /* Text helpers */ .eyebrow{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-sm); letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--brand-accent);display:inline-block;} .grad-text-sunset{background:var(--grad-gulf-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;} .grad-text-water{background:var(--grad-gulf-water);-webkit-background-clip:text;background-clip:text;color:transparent;} .lead{font-size:var(--fs-xl);line-height:var(--lh-normal);color:var(--text-body);} /* Icons (line-art sprite) */ .ic{width:1.375em;height:1.375em;display:inline-block;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:0 0 auto;} .ic-solid{fill:currentColor;stroke:none;} /* ============================================================ BUTTONS ============================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;font-family:var(--font-body); font-weight:var(--fw-bold);font-size:var(--fs-md);line-height:1;letter-spacing:0.005em;padding:0.75rem 1.5rem; border-radius:var(--radius-button);border:1px solid transparent;cursor:pointer;text-decoration:none; -webkit-tap-highlight-color:transparent; transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);} .btn:active{transform:scale(0.97);} .btn-sm{padding:0.5rem 1rem;font-size:var(--fs-sm);} .btn-lg{padding:1rem 2rem;font-size:var(--fs-lg);} .btn-block{display:flex;width:100%;} .btn-primary{background:var(--brand-cta);color:var(--text-on-gold);box-shadow:var(--glow-gold);} .btn-primary:hover{background:var(--brand-cta-hover);color:var(--text-on-gold);transform:translateY(-1px);box-shadow:var(--glow-gold-strong);} .btn-secondary{background:transparent;color:var(--brand-primary);border:1.5px solid var(--brand-primary);} .btn-secondary:hover{background:rgba(44,123,229,0.08);color:var(--brand-primary);transform:translateY(-1px);} .btn-ghost{background:transparent;color:var(--text-heading);border:1.5px solid transparent;} .btn-ghost:hover{background:var(--surface-sunk);color:var(--text-heading);} .btn-dark{background:var(--surface-dark);color:var(--text-on-dark);box-shadow:var(--shadow-md);} .btn-dark:hover{background:var(--surface-dark-alt);color:var(--text-on-dark);transform:translateY(-1px);box-shadow:var(--shadow-lg);} /* on-light (sunset band) variants */ .btn-on-light-secondary{color:var(--blue-900);border-color:rgba(10,46,77,0.4);} .btn-on-dark-secondary{color:#fff;border-color:rgba(255,255,255,0.6);} .btn .ic{width:1.1em;height:1.1em;} /* Text link with arrow */ .link-arrow{display:inline-flex;align-items:center;gap:0.45rem;font-family:var(--font-body); font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--text-link);cursor:pointer;} .link-arrow .arr{display:inline-block;transition:transform var(--dur-base) var(--ease-out);font-size:1.1em;line-height:1;} .link-arrow:hover .arr{transform:translateX(4px);} /* ============================================================ BADGE ============================================================ */ .badge{display:inline-flex;align-items:center;gap:0.4rem;padding:0.3rem 0.7rem;font-family:var(--font-body); font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:0.01em;line-height:1.1; border:1px solid var(--ink-200);border-radius:var(--radius-pill);white-space:nowrap; color:var(--ink-700);background:var(--ink-50);} .badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;} .badge-solar{background:var(--gold-50);color:var(--gold-700);border-color:var(--gold-200);} .badge-roofing{background:var(--coral-50);color:var(--coral-700);border-color:var(--coral-200);} .badge-water{background:var(--teal-50);color:var(--teal-700);border-color:var(--teal-200);} .badge-gold{background:var(--gold-500);color:var(--blue-900);border-color:transparent;} /* ============================================================ NAVBAR ============================================================ */ .navbar{position:sticky;top:0;z-index:50;background:rgba(251,247,240,0.82); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle);} .navbar .nav{max-width:var(--container);margin:0 auto;padding:0.75rem var(--gutter);display:flex;align-items:center;gap:var(--space-7);} .nav-logo{display:flex;align-items:center;flex:0 0 auto;} .nav-logo img{height:38px;width:auto;} .nav-links{display:flex;align-items:center;gap:var(--space-6);list-style:none;margin:0 0 0 var(--space-4);padding:0;} .nav-links a{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-md); color:var(--text-heading);padding-bottom:2px;border-bottom:2px solid transparent;transition:color var(--dur-base) var(--ease-out);} .nav-links a:hover,.nav-links a.active{color:var(--brand-primary);} .nav-links a.active{border-bottom-color:var(--brand-cta);} .nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-5);} .nav-phone{display:inline-flex;align-items:center;gap:0.4rem;font-weight:var(--fw-bold);color:var(--text-heading);font-size:var(--fs-md);} .nav-phone .ph{color:var(--brand-accent);} .nav-toggle{display:none;background:none;border:1px solid var(--border-default);border-radius:var(--radius-sm); width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer;color:var(--text-heading);} .nav-toggle svg{width:24px;height:24px;} .mobile-menu{display:none;} /* ============================================================ HERO ============================================================ */ .hero{position:relative;overflow:hidden;background:var(--grad-shell-wash);} .hero-sun{position:absolute;top:-90px;right:-70px;opacity:0.45;pointer-events:none;} .hero-sun svg{width:clamp(200px,26vw,320px);height:auto;} .hero-inner{position:relative;max-width:var(--container);margin:0 auto; padding:clamp(2.5rem,5vw,4.5rem) var(--gutter) clamp(3rem,5vw,5rem); display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-9);align-items:center;} .hero-copy{display:flex;flex-direction:column;gap:var(--space-5);} .hero h1{font-size:var(--fs-display-xl);line-height:1.02;margin:0;} .hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-2);} .hero-trust{display:flex;gap:var(--space-7);flex-wrap:wrap;margin-top:var(--space-4);} .hero-trust .ti{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:var(--fs-sm);} .hero-trust .ti b{color:var(--text-heading);} .hero-visual{position:relative;} .hero-photo{position:relative;height:440px;border-radius:var(--radius-2xl);overflow:hidden; background:var(--grad-deep-sea);box-shadow:var(--shadow-xl);} .hero-photo img{width:100%;height:100%;object-fit:cover;} .hero-photo .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,46,77,0.05),rgba(10,46,77,0.35));} .float-chip{position:absolute;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); padding:0.9rem 1.1rem;display:flex;align-items:center;gap:12px;} .float-chip .ci{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;} .float-chip .cv{display:block;font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--text-heading);line-height:1.1;} .float-chip .cl{display:block;font-size:var(--fs-sm);color:var(--text-muted);margin-top:2px;} .chip-energy{left:-18px;bottom:40px;} .chip-energy .ci{background:var(--gold-50);color:var(--gold-600);} .chip-co2{right:-14px;top:28px;} .chip-co2 .ci{background:var(--teal-50);color:var(--teal-600);} /* Partner strip */ .partner-strip{border-top:1px solid var(--border-subtle);background:rgba(255,255,255,0.5);} .partner-strip .ps{max-width:var(--container);margin:0 auto;padding:var(--space-5) var(--gutter); display:flex;align-items:center;gap:var(--space-7);flex-wrap:wrap;justify-content:center;color:var(--text-muted);} .partner-strip .lbl{font-size:var(--fs-sm);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;} .partner-strip .pn{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--text-heading);} /* ============================================================ WAVE DIVIDER + SUNBURST ============================================================ */ .wave{width:100%;line-height:0;} .wave svg{display:block;width:100%;height:70px;} .wave.flip{transform:scaleY(-1);} /* ============================================================ STATS BAND ============================================================ */ .stats-band{background:var(--surface-dark);} .stats-grid{max-width:var(--container);margin:0 auto;padding:0 var(--gutter) var(--section-y-sm); display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-7);} .stat{display:flex;flex-direction:column;gap:0.15rem;align-items:center;text-align:center;} .stat .sv{font-family:var(--font-display);font-weight:800;font-size:var(--fs-display-lg);line-height:1;letter-spacing:var(--ls-tight);color:#fff;} .stat .sl{font-family:var(--font-body);font-weight:600;font-size:var(--fs-md);color:var(--text-on-dark);} .stat .ss{font-size:var(--fs-sm);color:var(--text-on-dark-muted);} /* ============================================================ SECTION HEADERS ============================================================ */ .sec-head{text-align:center;max-width:640px;margin:0 auto var(--space-8);} .sec-head h2{font-size:var(--fs-display-lg);margin:8px 0 0;} .sec-head p{color:var(--text-body);font-size:var(--fs-lg);margin-top:var(--space-3);} .sec-head-split{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-7);} .sec-head-split h2{font-size:var(--fs-h1);margin:8px 0 0;} /* ============================================================ SERVICES TABS (signature motif) ============================================================ */ .services{display:grid;grid-template-columns:300px 1fr;gap:var(--space-8);align-items:stretch;} .tab-rail{display:flex;flex-direction:column;gap:var(--space-3);} .svc-tab{display:flex;align-items:center;gap:var(--space-4);text-align:left;padding:var(--space-5); border-radius:var(--radius-lg);cursor:pointer;background:transparent;border:1px solid transparent; border-left:4px solid transparent;transition:all var(--dur-base) var(--ease-out);width:100%;font-family:var(--font-body);} .svc-tab:hover{background:var(--surface-card);} .svc-tab[aria-selected="true"]{background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md);} .svc-tab[aria-selected="true"].t-solar{border-left:4px solid var(--service-solar);} .svc-tab[aria-selected="true"].t-roofing{border-left:4px solid var(--service-roofing);} .svc-tab[aria-selected="true"].t-water{border-left:4px solid var(--service-water);} .svc-tab .ti{width:46px;height:46px;border-radius:var(--radius-md);flex:0 0 auto;display:flex;align-items:center;justify-content:center; background:var(--sand-100);color:var(--text-muted);transition:all var(--dur-base) var(--ease-out);} .svc-tab[aria-selected="true"].t-solar .ti{background:var(--service-solar);color:var(--blue-900);} .svc-tab[aria-selected="true"].t-roofing .ti{background:var(--service-roofing);color:#fff;} .svc-tab[aria-selected="true"].t-water .ti{background:var(--service-water);color:#fff;} .svc-tab .tl{display:flex;flex-direction:column;gap:2px;} .svc-tab .tl b{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h4);color:var(--text-heading);} .svc-tab .tl span{font-size:var(--fs-sm);color:var(--text-muted);} .tab-rail .rail-note{display:flex;align-items:center;gap:8px;padding:0 var(--space-5);margin-top:var(--space-2);color:var(--text-muted);font-size:var(--fs-sm);} .svc-panel{display:grid;grid-template-columns:1.1fr 1fr;border-radius:var(--radius-xl);overflow:hidden; background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);} .svc-panel[hidden]{display:none;} .svc-panel .pc{padding:var(--pad-card-lg);display:flex;flex-direction:column;gap:var(--space-4);} .svc-panel h3{font-size:var(--fs-h2);margin:0;} .svc-panel .pb{margin:0;color:var(--text-body);font-size:var(--fs-md);line-height:var(--lh-relaxed);} .svc-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);} .svc-points li{display:flex;align-items:center;gap:var(--space-3);color:var(--text-body);} .svc-points .ck{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;} .svc-panel.s-solar .ck{background:var(--service-solar);color:var(--blue-900);} .svc-panel.s-roofing .ck{background:var(--service-roofing);} .svc-panel.s-water .ck{background:var(--service-water);} .svc-panel .pcta{display:flex;align-items:center;gap:var(--space-4);margin-top:auto;padding-top:var(--space-3);flex-wrap:wrap;} .svc-panel .pcta .pn{font-size:var(--fs-sm);color:var(--text-muted);} .svc-panel .pcta .pn b{color:var(--text-heading);} .svc-visual{position:relative;min-height:380px;} .svc-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;} .svc-visual .vgrad{position:absolute;inset:0;} .svc-panel.s-solar .vgrad{background:var(--grad-gulf-sunset);} .svc-panel.s-roofing .vgrad{background:linear-gradient(150deg,#F2683C,#B0411A);} .svc-panel.s-water .vgrad{background:var(--grad-gulf-water);} .svc-visual .vscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,46,77,0) 40%,rgba(10,46,77,0.55) 100%);} .svc-visual .vstat{position:absolute;left:var(--space-6);bottom:var(--space-6);right:var(--space-6);color:#fff;} .svc-visual .vstat .vv{font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1;} .svc-visual .vstat .vl{font-size:var(--fs-md);color:rgba(255,255,255,0.9);max-width:28ch;} /* ============================================================ TRUST / WHY (cards) ============================================================ */ .band-alt{background:var(--surface-page-alt);} .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);} .trust-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);padding:var(--pad-card);display:flex;flex-direction:column;gap:var(--space-3);} .trust-card .tci{width:52px;height:52px;border-radius:var(--radius-md);background:var(--wash-water);color:var(--brand-primary); display:flex;align-items:center;justify-content:center;} .trust-card h3{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h4);margin:0;} .trust-card p{margin:0;color:var(--text-body);} /* ============================================================ TESTIMONIALS ============================================================ */ .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);} .tcard{margin:0;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card); box-shadow:var(--shadow-md);padding:var(--pad-card);display:flex;flex-direction:column;gap:0.85rem;} .tcard .top{display:flex;align-items:center;justify-content:space-between;} .tcard .stars{color:var(--gold-500);font-size:1.05rem;letter-spacing:1px;} .tcard .stars .off{color:var(--ink-200);} .tcard .svc{font-size:0.72rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;} .tcard .svc.solar{color:var(--service-solar);}.tcard .svc.roofing{color:var(--service-roofing);}.tcard .svc.water{color:var(--service-water);} .tcard blockquote{margin:0;font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--text-body);text-wrap:pretty;} .tcard figcaption{display:flex;align-items:center;gap:0.7rem;margin-top:auto;} .tcard .av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center; background:var(--grad-gulf-water);color:#fff;font-weight:700;font-size:var(--fs-sm);} .tcard figcaption>span:last-child{display:flex;flex-direction:column;line-height:1.3;} .tcard .nm{display:block;font-weight:700;color:var(--text-heading);} .tcard .lo{display:block;font-size:var(--fs-sm);color:var(--text-muted);} .tcard .gmark{margin-left:auto;width:20px;height:20px;} /* ============================================================ CTA BAND ============================================================ */ .cta-band{border-radius:var(--radius-2xl);padding:clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden;box-shadow:var(--shadow-lg);} .cta-band.sunset{background:var(--grad-gulf-sunset);} .cta-band.marine{background:var(--grad-deep-sea);} .cta-band.water{background:var(--grad-gulf-water);} .cta-inner{position:relative;max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.6rem;} .cta-band h2{font-size:var(--fs-display-lg);margin:0;} .cta-band .cdesc{font-size:var(--fs-lg);margin:0.25rem 0 0;max-width:52ch;} .cta-band .cactions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-4);} .cta-band.sunset h2{color:var(--blue-900);} .cta-band.sunset .cdesc{color:rgba(10,46,77,0.78);} .cta-band.sunset .eyebrow{color:var(--blue-900);opacity:0.7;} .cta-band.marine h2,.cta-band.water h2{color:#fff;} .cta-band.marine .cdesc,.cta-band.water .cdesc{color:rgba(255,255,255,0.86);} .cta-band.marine .eyebrow,.cta-band.water .eyebrow{color:var(--brand-cta);} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--surface-dark);color:var(--text-on-dark);} .footer-grid{max-width:var(--container);margin:0 auto;padding:var(--section-y-sm) var(--gutter) var(--space-8); display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-9);} .footer-brand img{height:auto;width:auto;max-width:230px;margin-bottom:var(--space-5);} .footer-brand p{color:var(--text-on-dark-muted);max-width:34ch;font-size:var(--fs-md);} .footer-contact{display:flex;flex-direction:column;gap:0.35rem;margin-top:var(--space-5);} .footer-contact a:first-child{color:#fff;font-weight:700;} .footer-contact a{color:var(--text-on-dark-muted);} .footer-col h4{font-family:var(--font-body);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-size:var(--fs-sm); color:var(--brand-accent);margin:0 0 var(--space-4);font-weight:700;} .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.6rem;} .footer-col a{color:var(--text-on-dark);font-size:var(--fs-md);} .footer-col a:hover{color:var(--brand-cta);} .footer-bar{border-top:1px solid var(--border-on-dark);} .footer-bar .fb{max-width:var(--container);margin:0 auto;padding:var(--space-5) var(--gutter); display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;} .footer-bar span{font-size:var(--fs-sm);color:var(--text-on-dark-muted);} /* ============================================================ FORMS / QUOTE MODAL ============================================================ */ .field{display:flex;flex-direction:column;gap:0.4rem;} .field label{font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);color:var(--text-heading);} .field label .req{color:var(--coral-500);} .field .ctrl{display:flex;align-items:center;gap:0.6rem;background:var(--surface-card); border:1.5px solid var(--border-strong);border-radius:var(--radius-input);padding:0 0.9rem; transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);} .field .ctrl:focus-within{border-color:var(--brand-primary);box-shadow:var(--ring-focus-shadow);} .field input,.field textarea{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-body); font-size:var(--fs-md);color:var(--text-body);padding:0.75rem 0;width:100%;} .field textarea{padding:0.75rem 0.9rem;border:1.5px solid var(--border-strong);border-radius:var(--radius-input);resize:vertical; transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);} .field textarea:focus{border-color:var(--brand-primary);box-shadow:var(--ring-focus-shadow);} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);} .form-row.wide{grid-template-columns:1.6fr 1fr;} .modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center; background:rgba(10,46,77,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:var(--space-5);} .modal.open{display:flex;animation:vsrFade var(--dur-base) var(--ease-out);} .modal-card{width:min(560px,96vw);max-height:92vh;overflow-y:auto;background:var(--surface-card); border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);animation:vsrPop var(--dur-slow) var(--ease-spring);} .modal-head{position:relative;background:var(--grad-deep-sea);padding:var(--space-7) var(--space-8);color:#fff; border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl);} .modal-head .eyebrow{color:var(--brand-cta);} .modal-head h3{color:#fff;font-size:var(--fs-h2);margin:6px 0 0;} .modal-head p{margin:6px 0 0;color:rgba(255,255,255,0.82);} .modal-close{position:absolute;top:var(--space-5);right:var(--space-5);width:36px;height:36px;border-radius:50%; border:none;cursor:pointer;background:rgba(255,255,255,0.14);color:#fff;display:flex;align-items:center;justify-content:center;} .modal-body{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5);} .svc-chips{display:flex;gap:var(--space-3);flex-wrap:wrap;} .svc-chip{display:inline-flex;align-items:center;gap:8px;padding:0.6rem 1rem;border-radius:var(--radius-pill);cursor:pointer; font-weight:700;font-size:var(--fs-md);border:1.5px solid var(--border-strong);background:var(--surface-card);color:var(--text-body); font-family:var(--font-body);transition:all var(--dur-base) var(--ease-out);} .svc-chip[aria-pressed="true"]{border-color:var(--brand-primary);background:var(--blue-50);color:var(--brand-primary);} .modal-success{padding:var(--space-10) var(--space-8);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);} .modal-success .ok{width:64px;height:64px;border-radius:50%;background:var(--grad-gulf-sunset);display:flex;align-items:center;justify-content:center;box-shadow:var(--glow-gold);color:var(--blue-900);} .fineprint{margin:0;font-size:var(--fs-sm);color:var(--text-muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;} /* ============================================================ PAGE HEADER (sub-pages) ============================================================ */ .page-head{background:var(--grad-deep-sea);color:#fff;position:relative;overflow:hidden;} .page-head .ph-inner{max-width:var(--container);margin:0 auto;padding:clamp(2.5rem,5vw,4.5rem) var(--gutter) clamp(3rem,5vw,4.5rem);position:relative;} .page-head h1{color:#fff;font-size:var(--fs-display-lg);margin:10px 0 0;max-width:18ch;} .page-head p{color:rgba(255,255,255,0.85);font-size:var(--fs-lg);margin:var(--space-3) 0 0;max-width:60ch;} .page-head .eyebrow{color:var(--brand-cta);} .page-head .hb-sun{position:absolute;top:-90px;right:-70px;opacity:0.35;pointer-events:none;} /* Prose */ .prose{max-width:var(--container-text);margin:0 auto;} .prose p{font-size:var(--fs-md);line-height:var(--lh-relaxed);color:var(--text-body);} .prose h2{font-size:var(--fs-h2);margin-top:var(--space-8);} .prose h3{font-size:var(--fs-h3);margin-top:var(--space-6);} /* Work gallery */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);} .gtile{position:relative;border-radius:var(--radius-tile);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3;background:var(--surface-dark);} .gtile img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);} .gtile:hover img{transform:scale(1.06);} .gtile .gscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,46,77,0) 45%,rgba(7,30,52,0.82));} .gtile .gcap{position:absolute;left:var(--space-5);right:var(--space-5);bottom:var(--space-5);color:#fff;} .gtile .gcap b{font-family:var(--font-display);font-size:var(--fs-h4);display:block;} .gtile .gcap span{font-size:var(--fs-sm);color:rgba(255,255,255,0.85);} .gtile .gtag{position:absolute;top:var(--space-4);left:var(--space-4);} /* service-area chips */ .area-grid{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;} .area-chip{display:inline-flex;align-items:center;gap:8px;padding:0.6rem 1.1rem;border-radius:var(--radius-pill); background:var(--surface-card);border:1px solid var(--border-default);font-weight:600;color:var(--text-heading);box-shadow:var(--shadow-xs);} .area-chip .pin{color:var(--service-roofing);} /* split feature */ .split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center;} .split-media{border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-xl);aspect-ratio:5/4;background:var(--surface-dark);} .split-media img{width:100%;height:100%;object-fit:cover;} .split .eyebrow{margin-bottom:8px;} .split h2{font-size:var(--fs-h1);} .steps{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-5);} .step{display:flex;gap:var(--space-4);align-items:flex-start;} .step .num{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:800;background:var(--wash-gold);color:var(--gold-700);} .step h4{margin:0 0 2px;font-size:var(--fs-h4);} .step p{margin:0;color:var(--text-body);} /* FAQ */ .faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3);} .faq details{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);overflow:hidden;} .faq summary{padding:var(--space-5) var(--space-6);font-family:var(--font-display);font-weight:700;font-size:var(--fs-h5); color:var(--text-heading);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);} .faq summary::-webkit-details-marker{display:none;} .faq summary .pm{color:var(--brand-accent);font-size:1.4rem;line-height:1;transition:transform var(--dur-base) var(--ease-out);} .faq details[open] summary .pm{transform:rotate(45deg);} .faq .ans{padding:0 var(--space-6) var(--space-5);color:var(--text-body);} .faq .ans p{margin:0;} /* contact layout */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:start;} .contact-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--pad-card-lg);} .contact-list{list-style:none;margin:var(--space-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-4);} .contact-list li{display:flex;gap:var(--space-3);align-items:flex-start;color:var(--text-body);} .contact-list .ci{width:42px;height:42px;border-radius:var(--radius-md);background:var(--wash-water);color:var(--brand-primary);display:flex;align-items:center;justify-content:center;flex:0 0 auto;} .contact-list b{color:var(--text-heading);display:block;} .map-embed{border:0;width:100%;height:340px;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);} /* sticky mobile call bar */ .callbar{display:none;} /* 404 */ .nf{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-5);padding:var(--section-y) var(--gutter);} .nf .code{font-family:var(--font-display);font-weight:800;font-size:clamp(5rem,16vw,10rem);line-height:0.9; background:var(--grad-gulf-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;} /* ============================================================ SHOP ============================================================ */ .nav-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px; border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-heading);cursor:pointer; transition:transform var(--dur-fast) var(--ease-out);} .nav-cart:hover{transform:translateY(-1px);} .nav-cart.bump{animation:vsrPop var(--dur-base) var(--ease-spring);} .nav-cart .cc{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand-cta); color:var(--blue-900);font-size:11px;font-weight:800;display:none;align-items:center;justify-content:center;} .checkout-banner{margin:0;padding:var(--space-4) var(--gutter);text-align:center;font-weight:600;} .checkout-banner.ok{background:#E4F6ED;color:#137A4F;} .checkout-banner.cancel{background:var(--coral-50);color:var(--coral-700);} .shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);} .product-card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle); border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);} .product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);} .pc-media{position:relative;border:0;padding:0;cursor:pointer;background:var(--sand-100);aspect-ratio:1/1;overflow:hidden;display:block;} .pc-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);} .product-card:hover .pc-media img{transform:scale(1.05);} .pc-quick{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(10,46,77,0.82);color:#fff; font-size:var(--fs-sm);font-weight:700;padding:0.4rem 0.9rem;border-radius:var(--radius-pill);backdrop-filter:blur(4px);opacity:0;transition:opacity var(--dur-base) var(--ease-out);} .product-card:hover .pc-quick{opacity:1;} .pc-body{padding:var(--pad-card);display:flex;flex-direction:column;gap:var(--space-3);flex:1;} .pc-body h3{font-size:var(--fs-h4);margin:0;} .pc-body p{margin:0;color:var(--text-body);font-size:var(--fs-sm);flex:1;} .pc-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-2);} .pc-price{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h4);color:var(--text-heading);} .pc-price small{font-size:var(--fs-sm);color:var(--text-muted);font-weight:600;} /* qty stepper */ .qty{display:inline-flex;align-items:center;border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);overflow:hidden;} .qty button{width:36px;height:36px;border:0;background:var(--surface-card);color:var(--text-heading);font-size:1.1rem;cursor:pointer;line-height:1;} .qty button:hover{background:var(--surface-sunk);} .qty span{min-width:30px;text-align:center;font-weight:700;} /* quick view */ .qv-card{position:relative;width:min(940px,96vw);max-height:92vh;overflow-y:auto;background:var(--surface-card);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);animation:vsrPop var(--dur-slow) var(--ease-spring);} .qv-grid{display:grid;grid-template-columns:1fr 1fr;} .qv-media{background:var(--sand-100);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);} .qv-media #qv-main{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-lg);background:#fff;} .qv-thumbs{display:flex;gap:var(--space-3);} .qv-thumb{width:64px;height:64px;border-radius:var(--radius-sm);overflow:hidden;border:2px solid transparent;background:#fff;cursor:pointer;padding:0;} .qv-thumb.on{border-color:var(--brand-primary);} .qv-thumb img{width:100%;height:100%;object-fit:cover;} .qv-info{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3);} .qv-info h3{font-size:var(--fs-h2);margin:0;} .qv-price{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);color:var(--text-heading);} .qv-price small{font-size:var(--fs-md);color:var(--text-muted);font-weight:600;} .qv-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem;} .qv-features li{display:flex;align-items:center;gap:0.6rem;color:var(--text-body);font-size:var(--fs-sm);} .qv-opts{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-2);} .qv-opt{display:flex;flex-direction:column;gap:0.3rem;font-weight:600;font-size:var(--fs-sm);color:var(--text-heading);} .qv-opt select{padding:0.6rem 0.8rem;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--fs-md);background:var(--surface-card);color:var(--text-body);} .qv-note{font-size:var(--fs-sm);color:var(--text-muted);font-style:italic;margin:0;} .qv-actions{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-3);flex-wrap:wrap;} /* cart drawer */ .cart-drawer{position:fixed;inset:0;z-index:110;display:none;} .cart-drawer.open{display:block;} .cart-scrim{position:absolute;inset:0;background:rgba(10,46,77,0.5);backdrop-filter:blur(4px);animation:vsrFade var(--dur-base) var(--ease-out);} .cart-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,100vw);background:var(--surface-page);box-shadow:var(--shadow-xl); display:flex;flex-direction:column;animation:cartIn var(--dur-slow) var(--ease-out);} @keyframes cartIn{from{transform:translateX(100%);}to{transform:none;}} .cart-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6);border-bottom:1px solid var(--border-subtle);} .cart-head h3{margin:0;font-size:var(--fs-h3);} .cart-items{flex:1;overflow-y:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);} .cart-empty{text-align:center;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-10) 0;} .cart-row{display:grid;grid-template-columns:64px 1fr auto;gap:var(--space-3);align-items:start;} .cart-row img{width:64px;height:64px;border-radius:var(--radius-sm);object-fit:cover;background:var(--sand-100);} .cr-info{display:flex;flex-direction:column;gap:2px;} .cr-info b{font-size:var(--fs-sm);color:var(--text-heading);line-height:1.25;} .cr-opt{font-size:var(--fs-xs);color:var(--text-muted);} .cr-price{font-weight:700;color:var(--text-heading);font-size:var(--fs-sm);margin-top:2px;} .cr-side{display:flex;flex-direction:column;align-items:flex-end;gap:0.4rem;} .cr-side .qty button{width:28px;height:28px;font-size:1rem;} .cr-side .qty span{min-width:24px;} .cr-remove{background:none;border:0;color:var(--text-muted);font-size:var(--fs-xs);cursor:pointer;text-decoration:underline;} .cr-remove:hover{color:var(--danger);} .cart-foot{padding:var(--space-5) var(--space-6) var(--space-6);border-top:1px solid var(--border-subtle);background:var(--surface-card);} .cart-sub{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);} .cart-sub b{font-size:var(--fs-lg);} .cart-sub [data-subtotal]{font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);color:var(--text-heading);} .cart-demo{background:var(--gold-50);border:1px solid var(--gold-200);color:var(--gold-800);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--fs-sm);margin-bottom:var(--space-4);} .cart-note{font-size:var(--fs-xs);color:var(--text-muted);text-align:center;margin:var(--space-3) 0 0;display:flex;align-items:center;justify-content:center;gap:6px;} @media (max-width:980px){ .shop-grid{grid-template-columns:1fr;} .qv-grid{grid-template-columns:1fr;} .qv-media{padding:var(--space-5);} } /* reveal animation */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);} .reveal.in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}} @keyframes vsrFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} @keyframes vsrPop{from{opacity:0;transform:translateY(14px) scale(0.98);}to{opacity:1;transform:none;}} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:980px){ .hero-inner{grid-template-columns:1fr;} .hero-visual{order:-1;} .services{grid-template-columns:1fr;} .svc-panel{grid-template-columns:1fr;} .svc-visual{min-height:240px;} .stats-grid{grid-template-columns:repeat(2,1fr);row-gap:var(--space-7);} .trust-grid,.reviews-grid,.gallery{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;} .split,.contact-grid{grid-template-columns:1fr;gap:var(--space-7);} .split-media{order:-1;} .nav-links,.nav-phone{display:none;} .nav-toggle{display:flex;} .mobile-menu.open{display:block;background:var(--surface-card);border-bottom:1px solid var(--border-subtle);padding:var(--space-4) var(--gutter);} .mobile-menu.open ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);} .mobile-menu.open a{display:block;padding:var(--space-3) 0;font-weight:600;color:var(--text-heading);border-bottom:1px solid var(--border-subtle);} .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:1px;background:var(--border-default);box-shadow:0 -4px 18px rgba(10,46,77,0.12);} .callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:0.85rem;font-weight:700;font-size:var(--fs-md);} .callbar .call{background:var(--surface-dark);color:#fff;} .callbar .quote{background:var(--brand-cta);color:var(--blue-900);} body{padding-bottom:56px;} .reviews-grid{gap:var(--space-4);} .grad-text-sunset,.cta-band h2{} } @media (max-width:560px){ .form-row,.form-row.wide{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;gap:var(--space-7);} .float-chip{transform:scale(0.9);} .chip-energy{left:0;} .chip-co2{right:0;} } @media (max-width:380px){ .hero-photo{height:320px;} .stats-grid{gap:var(--space-5);} }