/* Auto-generated from service.html by build-site.mjs, do not edit directly. */
:root{
--ink:#23201B;
--ink-soft:#4A443B;
--ink-green:#073B1F;
/* NOTE: the --teal* names are historical (fork from a teal brand). They hold GOLD values. Do not rename - ~700 refs + 100+ generated pages. */
--teal:#C8912B;
--teal-deep:#8F6414; /* AA: 5.05 on white, 4.75 on tint */
--teal-press:#6E4C0F; /* solid-button hover, 7.6 with white text */
--teal-tint:#FBF3E0;
--cream:#FAF8F3;
--cream-2:#F2EEE4;
--white:#FFFFFF;
--line:rgba(35,32,27,.13);
--radius:14px;
--shadow:0 10px 30px rgba(35,32,27,.10);
--wrap:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
font-family:'Poppins',system-ui,-apple-system,sans-serif;
background:var(--cream);
color:var(--ink);
font-size:16px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
/* ---------- type ---------- */
.eyebrow{
font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--teal-deep);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);border-radius:2px}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(34px,5vw,56px);font-weight:700}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;margin:14px 0 12px}
h3{font-size:18px;font-weight:600}
.lede{color:var(--ink-soft);max-width:560px}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:inherit;font-size:16px;font-weight:600;
padding:14px 26px;border-radius:999px;border:2px solid transparent;
cursor:pointer;text-decoration:none;min-height:48px;
transition:background .2s,color .2s,border-color .2s,transform .15s;
touch-action:manipulation;
}
.btn:active{transform:scale(.985)}
.btn-solid{background:var(--teal-deep);color:#fff}
.btn-solid:hover{background:var(--teal-press)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:#101716}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn svg{flex:none}
/* ---------- nav ---------- */
header{
position:sticky;top:0;z-index:60;
background:rgba(249,248,243,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
/* On touch / small screens the per-frame backdrop blur makes scrolling stutter
(and stuttery scroll makes taps get dropped as scroll gestures). Drop it. */
@media (hover: none), (max-width: 900px){
header{ background:rgba(249,248,243,.98); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:46px;width:auto}
.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--teal-deep)}
.nav .btn{padding:11px 20px;font-size:15px;min-height:44px}
.show-s{display:none}
@media(max-width:860px){.nav-links{display:none}}
@media(max-width:480px){.nav .btn .hide-s{display:none}.nav .btn .show-s{display:inline}}
/* ---------- hero ---------- */
.hero{padding:64px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero .lede{margin:18px 0 28px;font-size:17px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none}
.chips li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-soft)}
.chips svg{flex:none}
.hero-proof{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--ink)}
.proof-split{display:grid;grid-template-columns:1fr 1fr}
.proof-half{position:relative;aspect-ratio:414/736;overflow:hidden}
.proof-half img{width:100%;height:100%;object-fit:cover}
.proof-half:first-child{border-right:3px solid var(--teal)}
.stamp{
position:absolute;top:14px;left:14px;
font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
padding:6px 12px;border-radius:6px;color:var(--cream);background:rgba(35,32,27,.82);
}
.stamp.after{background:var(--teal)}
.proof-cap{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 16px;background:var(--ink);color:var(--cream);font-size:13px;
}
.proof-cap b{font-weight:600}
.proof-cap span{color:rgba(249,248,243,.65)}
@media(max-width:920px){
.hero{padding:40px 0 20px}
.hero-grid{grid-template-columns:1fr;gap:36px}
}
/* ---------- swoosh divider (from the logo) ---------- */
.swoosh{display:block;width:min(340px,60%);margin:48px auto 0;height:auto}
/* ---------- sections ---------- */
section{padding:72px 0}
.sec-head{max-width:640px;margin-bottom:42px}
.alt{background:var(--cream-2)}
/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc{
background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
padding:26px 22px;transition:transform .2s,box-shadow .2s;
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc-ico{
width:48px;height:48px;border-radius:12px;background:var(--teal-tint);
display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.svc h3{margin-bottom:6px}
.svc p{font-size:14px;color:var(--ink-soft);line-height:1.55}
.svc.ask{background:transparent;border-style:dashed;display:flex;flex-direction:column;justify-content:center}
.svc.ask a{font-weight:600;color:var(--teal-deep);text-decoration:none}
.svc.ask a:hover{text-decoration:underline}
@media(max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr}}
/* ---------- results / before-after ---------- */
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ba-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 14px rgba(35,32,27,.06)}
/* ── Before/After Comparison Slider ── */
/* --split driven by JS inline style */
.ba-stage {
position: relative;
aspect-ratio: 828/736;
background: var(--cream-2);
overflow: hidden;
cursor: ew-resize;
user-select: none;
-webkit-user-select: none;
touch-action: pan-y;
}
.sl-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
draggable: false;
}
.sl-after-clip {
position: absolute; inset: 0;
clip-path: inset(0 0 0 var(--split, 50%));
will-change: clip-path;
}
/* Divider line */
.sl-divider {
position: absolute; top: 0; bottom: 0;
width: 3px;
background: #fff;
left: var(--split, 50%);
transform: translateX(-50%);
pointer-events: none;
box-shadow: 0 0 10px rgba(0,0,0,0.35);
}
/* Drag handle */
.sl-handle {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 48px; height: 48px;
border-radius: 50%;
background: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 14px rgba(35,32,27,0.35), 0 0 0 2px rgba(200,145,43,0.25);
transition: box-shadow 0.2s, transform 0.15s;
}
.ba-stage:active .sl-handle,
.ba-stage.dragging .sl-handle {
box-shadow: 0 4px 20px rgba(35,32,27,0.45), 0 0 0 3px var(--teal);
transform: translate(-50%, -50%) scale(1.1);
}
/* Before/After labels on the image */
.sl-label {
position: absolute; top: 14px;
font-size: 11px; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
padding: 5px 11px; border-radius: 6px;
color: var(--cream); pointer-events: none;
}
.sl-label-before { left: 14px; background: rgba(35,32,27,0.80); }
.sl-label-after { right: 14px; background: var(--teal); }
/* Caption bar */
.ba-bar { display: flex; align-items: center; padding: 14px 16px; gap: 10px; }
.ba-bar h3 { font-size: 16px; }
.ba-bar p { font-size: 13px; color: var(--ink-soft); }
.ba-bar .drag-hint {
margin-left: auto; flex: none;
font-size: 12px; color: var(--teal-deep); font-weight: 500;
display: flex; align-items: center; gap: 5px; opacity: 0.75;
}
@media(max-width:760px){ .res-grid{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
.sl-after-clip { clip-path: inset(0 0 0 50%) !important; }
}
/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px 26px}
.step::before{
counter-increment:step;content:counter(step,decimal-leading-zero);
font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--teal);
display:block;margin-bottom:14px;
}
.step h3{margin-bottom:8px}
.step p{font-size:14.5px;color:var(--ink-soft)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
/* ---------- area ---------- */
.area-flex{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.area-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:20px}
.area-chips li{
font-size:14px;font-weight:500;padding:9px 16px;border-radius:999px;
background:var(--white);border:1px solid var(--line);
}
@media(max-width:820px){.area-flex{grid-template-columns:1fr;gap:30px}}
/* ---------- shared form primitives ---------- */
label{font-size:13.5px;font-weight:600;display:grid;gap:6px}
input,select,textarea{
font-family:inherit;font-size:15px;color:var(--ink);
padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--cream);
width:100%;min-height:48px;transition:border-color .2s,box-shadow .2s;
-webkit-appearance:none;appearance:none;
}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2327768B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(200,145,43,.14)}
.opt-tag{
display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle;
}
.opt-tag.req{background:#FEE;color:#C0392B}
.opt-tag.opt{background:var(--teal-tint);color:var(--teal-deep)}
.form-note{font-size:13px;color:var(--ink-soft);text-align:center}
/* ---------- inline quote section ---------- */
.quote-wrap{max-width:780px;margin:0 auto}
.quote-side{text-align:left;margin-bottom:38px}
.quote-side .big-phone{
display:inline-flex;align-items:center;gap:12px;margin-top:18px;
font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--ink);text-decoration:none;
}
.quote-side .big-phone:hover{color:var(--teal-deep)}
.survey-form{
background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
padding:36px;box-shadow:var(--shadow);display:grid;gap:22px;
}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.survey-form .btn{width:100%;margin-top:6px}
@media(max-width:640px){.f-row{grid-template-columns:1fr}}
@media(max-width:520px){.survey-form{padding:22px}}
/* ---------- quote drawer ---------- */
.qt-overlay{
position:fixed;inset:0;z-index:90;background:rgba(35,32,27,.5);
opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.qt-overlay.open{opacity:1;pointer-events:all}
.qt-drawer{
position:fixed;top:0;right:0;bottom:0;z-index:91;
width:min(500px,100vw);background:var(--cream);
box-shadow:-8px 0 40px rgba(35,32,27,.22);
display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);
overflow:hidden;
}
.qt-drawer.open{transform:none}
.qt-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
padding:20px 22px;background:var(--ink);color:var(--cream);flex:none;
}
.qt-head-text h2{font-size:19px;font-weight:700;margin:0;color:var(--cream)}
.qt-head-text p{font-size:12px;color:rgba(249,248,243,.6);margin-top:2px}
.qt-close{
background:rgba(255,255,255,.12);border:none;border-radius:8px;
width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;
color:#fff;flex:none;transition:background .2s;margin-top:2px;
}
.qt-close:hover{background:rgba(255,255,255,.22)}
.qt-body{flex:1;overflow-y:auto;padding:20px 22px;display:grid;gap:16px;align-content:start}
.qt-body label{font-size:12.5px}
.qt-body input,.qt-body select,.qt-body textarea{font-size:14px;padding:11px 13px;min-height:44px}
.qt-body textarea{min-height:82px}
.qt-foot{padding:14px 22px calc(14px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--line);flex:none}
.qt-foot .btn{width:100%;min-height:50px}
.qt-success{
display:none;flex-direction:column;align-items:center;justify-content:center;
gap:14px;padding:40px 24px;text-align:center;flex:1;
}
.qt-success.show{display:flex}
.qt-success .tick{width:64px;height:64px;border-radius:50%;background:var(--teal-tint);display:flex;align-items:center;justify-content:center}
.qt-success h3{font-size:21px;color:var(--ink)}
.qt-success p{color:var(--ink-soft);max-width:320px;font-size:15px}
/* ---------- faq ---------- */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
padding:20px 4px;font-size:16.5px;font-weight:600;min-height:48px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal-tint);position:relative;transition:transform .25s}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--teal-deep);top:50%;left:50%;transform:translate(-50%,-50%)}
.faq summary .plus::before{width:12px;height:2px}
.faq summary .plus::after{width:2px;height:12px;transition:opacity .2s}
.faq details[open] summary .plus::after{opacity:0}
.faq details[open] summary .plus{transform:rotate(180deg)}
.faq details p{padding:0 4px 22px;color:var(--ink-soft);max-width:640px}
/* ---------- footer ---------- */
footer .foot-top{padding:56px 0 44px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.foot-grid img{height:64px;width:auto;margin-bottom:14px}
.foot-grid p{font-size:14px;color:var(--ink-soft);max-width:300px}
.foot-grid h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:14px}
.foot-grid ul{list-style:none;display:grid;gap:9px}
.foot-grid a{font-size:14.5px;color:var(--ink-soft);text-decoration:none}
.foot-grid a:hover{color:var(--teal-deep)}
.foot-social{display:flex;gap:12px;margin-top:18px}
.foot-social a{
display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;border-radius:50%;
background:var(--teal-tint);color:var(--teal-deep);
border:1px solid transparent;
transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
.foot-social a:hover{
background:var(--teal);color:#fff;transform:translateY(-3px);
box-shadow:0 8px 20px -6px rgba(200,145,43,.55);
}
.foot-social svg{width:20px;height:20px}
.phone-bar{background:var(--ink);color:var(--cream);padding:26px 0}
.phone-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.phone-bar a.num{
font-size:clamp(26px,4vw,38px);font-weight:700;letter-spacing:.04em;
color:var(--cream);text-decoration:none;
}
.phone-bar a.num:hover{color:#fff}
.phone-bar small{font-size:13px;color:rgba(249,248,243,.6)}
.phone-bar .foot-end{display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right}
.phone-bar .foot-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.phone-bar .foot-links a{font-size:13px;color:rgba(249,248,243,.78);text-decoration:none}
.phone-bar .foot-links a:hover{color:#fff}
@media(max-width:560px){
.phone-bar .foot-end{align-items:flex-start;text-align:left}
.phone-bar .foot-links{justify-content:flex-start;gap:14px}
}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:30px}}
/* ═══════════════════════════════════════════════════════
CINEMATIC HERO, Jakub primary, Jhey secondary
═══════════════════════════════════════════════════════ */
/* Custom bezier, smooth deceleration, Jakub-signed */
:root {
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}
/* Override old hero */
.hero { padding: 0; }
.hero-full {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
background: var(--ink);
}
@keyframes hero-ken-burns {
to { transform: scale(1); }
}
/* Gradient overlays, ink at bottom, subtle teal tint */
.hero-full::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(35,32,27,0.95) 0%, rgba(35,32,27,0.55) 45%, rgba(35,32,27,0.20) 100%),
linear-gradient(135deg, rgba(200,145,43,0.18) 0%, transparent 60%);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
padding: 0 24px 64px;
max-width: var(--wrap);
margin: 0 auto;
width: 100%;
}
/* Word-by-word stagger container */
.hero-eyebrow {
font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
color: var(--teal); display: flex; align-items: center; gap: 10px;
margin-bottom: 20px;
opacity: 0;
animation: hero-fade-up 0.6s var(--ease-out-expo) 0.2s forwards;
}
.hero-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--teal); border-radius: 2px; }
.hero-h1 {
font-size: clamp(38px, 6vw, 72px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
color: #fff;
margin-bottom: 22px;
/* Words animate individually via JS span injection */
}
/* Each .hw (hero word) gets staggered animation */
.hw {
display: inline-block;
opacity: 0;
filter: blur(6px);
transform: translateY(22px);
animation: hw-in 0.65s var(--ease-out-expo) forwards;
will-change: opacity, filter, transform;
}
@keyframes hw-in {
to { opacity: 1; filter: blur(0px); transform: translateY(0); }
}
.hero-sub {
font-size: clamp(16px, 2vw, 19px);
color: rgba(255,255,255,0.72);
max-width: 540px;
line-height: 1.6;
margin-bottom: 36px;
opacity: 0;
animation: hero-fade-up 0.7s var(--ease-out-expo) 0.75s forwards;
}
@keyframes hero-fade-up {
from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero-ctas-new {
display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 52px;
opacity: 0;
animation: hero-fade-up 0.6s var(--ease-out-expo) 0.9s forwards;
}
/* Stats bar */
.hero-stats {
display: flex; flex-wrap: wrap; gap: 0;
border-top: 1px solid rgba(255,255,255,0.14);
padding-top: 28px;
opacity: 0;
animation: hero-fade-up 0.6s var(--ease-out-expo) 1.05s forwards;
}
.hero-stat {
flex: 1; min-width: 140px;
padding: 0 28px 0 0;
}
.hero-stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.12); margin-right: 28px; }
.stat-num {
font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; color: #fff; line-height: 1;
display: flex; align-items: baseline; gap: 4px;
}
.stat-num .unit { font-size: 0.5em; color: var(--teal); font-weight: 700; }
.stat-label { font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 5px; }
/* Scroll hint arrow */
.hero-scroll {
position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 6px;
color: rgba(255,255,255,0.35); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
animation: hero-fade-up 0.5s var(--ease-out-expo) 1.4s both, scroll-hint-pulse 2.4s 1.8s ease-in-out infinite;
}
.hero-scroll svg { animation: scroll-arrow 1.6s ease-in-out 1.8s infinite; }
@keyframes scroll-arrow {
0%,100% { transform: translateY(0); opacity: .35; }
50% { transform: translateY(5px); opacity: .7; }
}
@keyframes scroll-hint-pulse {
0%,100% { opacity: .45; }
50% { opacity: .8; }
}
/* ── Water droplet particles (Jhey - brand signature) ── */
.drops { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.drop {
position: absolute;
width: 2px;
border-radius: 0 0 50% 50%;
background: rgba(200,145,43,0.55);
animation: drop-fall linear infinite;
}
@keyframes drop-fall {
0% { transform: translateY(-20px); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 0.6; }
100% { transform: translateY(100vh); opacity: 0; }
}
@media(max-width:640px) {
.hero-content { padding: 0 20px 52px; }
.hero-stat:not(:last-child) { border-right: none; margin-right: 0; padding-right: 0; }
.hero-stats { gap: 18px; }
}
/* ═══════════════════════════════════════════════════════
UPGRADED REVEAL, Jakub recipe (opacity+translateY+blur)
═══════════════════════════════════════════════════════ */
.reveal {
opacity: 0;
transform: translateY(22px);
filter: blur(5px);
transition:
opacity 0.65s var(--ease-out-expo),
transform 0.65s var(--ease-out-expo),
filter 0.55s var(--ease-out-expo);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Stagger children inside a stagger group */
.stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger > .reveal:nth-child(2) { transition-delay: 70ms; }
.stagger > .reveal:nth-child(3) { transition-delay: 140ms; }
.stagger > .reveal:nth-child(4) { transition-delay: 210ms; }
.stagger > .reveal:nth-child(5) { transition-delay: 280ms; }
.stagger > .reveal:nth-child(6) { transition-delay: 350ms; }
.stagger > .reveal:nth-child(7) { transition-delay: 420ms; }
.stagger > .reveal:nth-child(8) { transition-delay: 490ms; }
/* Service cards hover lift, Jakub shadow technique */
.svc {
transition: transform 0.28s var(--ease-out-quart), box-shadow 0.28s var(--ease-out-quart);
}
.svc:hover {
transform: translateY(-6px);
box-shadow:
0px 0px 0px 1px rgba(200,145,43,0.14),
0px 8px 24px -4px rgba(35,32,27,0.16),
0px 2px 8px 0px rgba(35,32,27,0.08);
}
/* Button press scale, Emil */
.btn:active { transform: scale(0.966); }
.btn { transition: background .22s, color .22s, border-color .22s, transform .14s, box-shadow .22s; }
.btn-solid:hover {
background: var(--teal-deep);
box-shadow: 0 6px 20px -4px rgba(200,145,43,0.45);
}
/* Inter-section CTA strip */
.cta-strip {
background: var(--ink);
padding: 52px 0;
}
.cta-strip .wrap {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
}
.cta-strip h2 { color: #fff; font-size: clamp(20px,2.6vw,28px); margin: 0; }
.cta-strip p { color: rgba(249,248,243,.6); font-size: 14px; margin-top: 4px; }
/* Reduce motion, disable all non-essential animation */
@media (prefers-reduced-motion: reduce) {
.hw, .hero-eyebrow, .hero-sub, .hero-ctas-new, .hero-stats, .hero-scroll,
.hero-bg, .drop { animation: none !important; }
.hw { opacity: 1; filter: none; transform: none; }
.hero-eyebrow, .hero-sub, .hero-ctas-new, .hero-stats { opacity: 1; }
.reveal { transition: none !important; }
.svc:hover { transform: none; }
}
/* ═══════════════════════════════════════════════════════
PROCESS SECTION, reference-style with AW colours
═══════════════════════════════════════════════════════ */
.process-section {
background: linear-gradient(160deg, var(--teal-tint) 0%, #f0f8fa 40%, var(--white) 100%);
padding: 80px 0 72px;
overflow: hidden;
}
.process-head {
text-align: center;
margin-bottom: 56px;
}
.process-head .eyebrow {
justify-content: center;
}
.process-head .eyebrow::before { display: none; }
.process-head h2 {
font-size: clamp(28px, 4vw, 44px);
margin: 10px 0 14px;
line-height: 1.1;
}
.process-head h2 em {
font-style: normal;
color: var(--teal);
letter-spacing: -.01em;
}
.process-head p {
color: var(--ink-soft);
max-width: 480px;
margin: 0 auto;
font-size: 15px;
}
/* Three-column step layout */
.process-row {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: flex-start;
gap: 0;
max-width: 860px;
margin: 0 auto;
}
/* Arrow connector */
.process-arrow {
display: flex;
align-items: flex-start;
padding-top: 60px;
padding-inline: 8px;
color: var(--ink-soft);
flex-shrink: 0;
}
.process-arrow svg {
opacity: 0.45;
}
/* Individual step */
.proc-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 8px;
}
/* Circle icon */
.proc-icon-wrap {
position: relative;
width: 130px;
height: 130px;
margin-bottom: 24px;
}
.proc-circle {
width: 130px;
height: 130px;
border-radius: 50%;
background: var(--white);
box-shadow:
0 0 0 1px rgba(200,145,43,0.12),
0 8px 32px rgba(35,32,27,0.10),
0 2px 6px rgba(35,32,27,0.06);
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow 0.28s var(--ease-out-quart), transform 0.28s var(--ease-out-quart);
}
.proc-step:hover .proc-circle {
transform: translateY(-4px);
box-shadow:
0 0 0 1px rgba(200,145,43,0.2),
0 16px 40px rgba(35,32,27,0.13),
0 4px 10px rgba(35,32,27,0.08);
}
.proc-circle svg {
width: 52px;
height: 52px;
}
/* Step number badge */
.proc-badge {
position: absolute;
top: -4px;
right: -4px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--ink);
color: var(--cream);
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(35,32,27,0.3);
}
.proc-step h3 {
font-size: 19px;
font-weight: 700;
margin-bottom: 10px;
color: var(--ink);
}
.proc-step p {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.6;
max-width: 210px;
}
/* Bottom CTA */
.process-cta {
display: flex;
justify-content: center;
margin-top: 52px;
}
/* Mobile */
@media(max-width: 680px) {
.process-row {
grid-template-columns: 1fr;
gap: 0;
max-width: 340px;
}
.process-arrow {
justify-content: center;
padding-top: 0;
padding-bottom: 0;
transform: rotate(90deg);
margin: 10px auto;
}
.proc-step { padding: 0 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
.proc-step:hover .proc-circle { transform: none; }
}
/* ═══════════════════════════════════════════════════════
BENEFITS SECTION
═══════════════════════════════════════════════════════ */
.benefits-section {
background: var(--cream-2);
padding: 80px 0;
}
.benefits-head {
text-align: center;
max-width: 640px;
margin: 0 auto 52px;
}
.benefits-head h2 span {
color: var(--teal);
}
.benefits-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--white);
}
.benefit-item {
padding: 36px 38px;
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
position: relative;
transition: background 0.22s var(--ease-out-quart);
}
.benefit-item:hover {
background: var(--teal-tint);
}
/* Remove right border on every second item (right column) */
.benefit-item:nth-child(even) {
border-right: none;
}
/* Remove bottom border on last two items */
.benefit-item:nth-last-child(-n+2) {
border-bottom: none;
}
.benefit-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--ink);
color: var(--cream);
font-size: 13px;
font-weight: 700;
flex: none;
margin-bottom: 14px;
transition: background 0.22s;
}
.benefit-item:hover .benefit-num {
background: var(--teal-deep);
}
.benefit-item h3 {
font-size: 17px;
font-weight: 700;
margin-bottom: 10px;
color: var(--ink);
}
.benefit-item p {
font-size: 14.5px;
color: var(--ink-soft);
line-height: 1.68;
max-width: 420px;
}
@media(max-width: 700px) {
.benefits-grid {
grid-template-columns: 1fr;
}
.benefit-item {
border-right: none;
padding: 28px 24px;
}
.benefit-item:nth-last-child(-n+2) {
border-bottom: 1px solid var(--line);
}
.benefit-item:last-child {
border-bottom: none;
}
}
/* ═══════════════════════════════════════════════════════
ABOUT / WHAT MAKES US DIFFERENT
═══════════════════════════════════════════════════════ */
.different-section {
background: var(--white);
padding: 80px 0 72px;
}
.different-head {
text-align: center;
margin-bottom: 56px;
}
.different-head h2 em {
font-style: normal;
color: var(--teal);
}
.diff-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px 32px;
}
.diff-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Reuses proc-icon-wrap / proc-circle / proc-badge from process section */
.diff-item .proc-icon-wrap { margin-bottom: 20px; }
.diff-item h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 9px;
color: var(--ink);
}
.diff-item p {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.65;
max-width: 240px;
}
@media(max-width: 820px) {
.diff-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
}
@media(max-width: 520px) {
.diff-grid { grid-template-columns: 1fr; gap: 28px; }
.diff-item p { max-width: 100%; }
}
/* ── Our Story ── */
.story-section {
background: var(--ink);
padding: 80px 0;
overflow: hidden;
}
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
/* Left text */
.story-copy .eyebrow { color: var(--teal); }
.story-copy .eyebrow::before { background: var(--teal); }
.story-copy h2 { color: #fff; margin-bottom: 22px; }
.story-copy p {
color: rgba(249,248,243,.72);
font-size: 15px;
line-height: 1.75;
margin-bottom: 16px;
}
.story-copy p:last-of-type { margin-bottom: 32px; }
/* Founder callout */
.founder-card {
display: flex;
align-items: center;
gap: 16px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(200,145,43,.25);
border-radius: 12px;
padding: 18px 20px;
margin-top: 28px;
}
.founder-avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--teal-deep);
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 800; color: #fff;
flex: none;
}
.founder-info strong {
display: block;
color: #fff;
font-size: 15px;
font-weight: 700;
}
.founder-info span {
font-size: 13px;
color: rgba(249,248,243,.55);
}
/* Right image */
.story-img-wrap {
position: relative;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 4/5;
box-shadow:
0 0 0 1px rgba(200,145,43,0.18),
0 24px 60px rgba(0,0,0,0.45);
}
.story-img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Teal accent bar at top of image */
.story-img-wrap::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--teal);
z-index: 1;
}
/* Year badge */
.story-badge {
position: absolute;
bottom: 18px; left: 18px;
background: var(--ink);
border: 1px solid rgba(200,145,43,0.35);
border-radius: 12px;
padding: 14px 18px;
z-index: 2;
}
.story-badge .yr { font-size: 26px; font-weight: 800; color: var(--teal); line-height: 1; }
.story-badge .lb { font-size: 12px; color: rgba(249,248,243,.55); font-weight: 500; margin-top: 3px; }
/* Service area pills under story */
.story-areas {
display: flex; flex-wrap: wrap; gap: 9px;
margin-top: 22px;
}
.area-pill {
font-size: 13px; font-weight: 500;
padding: 7px 13px; border-radius: 999px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(200,145,43,.22);
color: rgba(249,248,243,.75);
}
@media(max-width: 860px) {
.story-grid { grid-template-columns: 1fr; gap: 40px; }
.story-img-wrap { aspect-ratio: 16/9; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
.diff-item:hover .proc-circle { transform: none; }
}
/* ═══════════════════════════════════════════════════════
NAV DROPDOWNS + MOBILE MENU
═══════════════════════════════════════════════════════ */
/* Dropdown trigger */
.nav-links li { position: relative; list-style: none; }
.nav-links .has-drop > a {
display: flex; align-items: center; gap: 5px;
}
.nav-links .has-drop > a svg {
flex: none;
transition: transform 0.22s var(--ease-out-quart);
}
.has-drop:hover > a svg,
.has-drop.open > a svg { transform: rotate(180deg); }
/* Dropdown panel */
.drop-panel {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 240px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(35,32,27,0.14), 0 2px 8px rgba(35,32,27,0.06);
padding: 12px 0 8px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s var(--ease-out-quart), transform 0.22s var(--ease-out-quart);
z-index: 50;
}
/* Invisible bridge fills any sub-pixel gap between trigger and panel */
.drop-panel::before {
content: '';
position: absolute;
top: -12px; left: 0; right: 0;
height: 12px;
}
.has-drop:hover .drop-panel,
.has-drop.open .drop-panel {
opacity: 1;
pointer-events: all;
transform: translateX(-50%) translateY(0);
}
/* Two-column commercial panel */
.drop-panel.drop-wide {
min-width: 480px;
left: 0;
transform: translateY(-6px);
}
.drop-panel.drop-wide::before { left: 0; right: 0; }
.has-drop:hover .drop-panel.drop-wide,
.has-drop.open .drop-panel.drop-wide {
transform: translateY(0);
}
/* Right-anchored variant, prevents wide panels from overflowing the
right edge of the viewport when their trigger sits further right */
.drop-panel.drop-wide.align-right {
left: auto;
right: 0;
}
/* Narrow right-anchored panel (About menu near the right of the nav) */
.drop-panel.align-right:not(.drop-wide) {
left: auto;
right: 0;
transform: translateX(0) translateY(-6px);
}
.has-drop:hover .drop-panel.align-right:not(.drop-wide),
.has-drop.open .drop-panel.align-right:not(.drop-wide) {
transform: translateX(0) translateY(0);
}
@media(max-width: 1180px) {
.drop-panel.drop-wide { min-width: 440px; }
}
.drop-cols {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 4px 0;
}
.drop-col-head {
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--teal-deep);
padding: 4px 18px 6px;
}
.drop-panel a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
font-size: 14px;
font-weight: 500;
color: var(--ink-soft);
text-decoration: none;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.drop-panel a:hover {
background: var(--teal-tint);
color: var(--teal-deep);
}
.drop-panel a svg { flex: none; }
.drop-divider {
height: 1px;
background: var(--line);
margin: 6px 0;
}
/* ── Hamburger ── */
.ham-btn {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 8px;
color: var(--ink);
transition: background 0.18s;
flex: none;
}
.ham-btn:hover { background: var(--cream-2); }
.ham-line {
display: block;
width: 22px; height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 0.25s var(--ease-out-quart), opacity 0.2s;
margin: 4px 0;
}
.ham-btn.open .ham-line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.ham-btn.open .ham-line:nth-child(2) { opacity: 0; }
.ham-btn.open .ham-line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
/* ── Mobile drawer (accordion) ── */
.mobile-nav {
position: fixed;
top: 74px; left: 0; right: 0; bottom: 0;
background: var(--cream);
z-index: 55;
overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: 8px 20px calc(40px + env(safe-area-inset-bottom));
display: none;
}
.mobile-nav.open { display: block; animation: mobNavIn .26s cubic-bezier(0.22,1,0.36,1); }
@keyframes mobNavIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
header.nav-open { position: fixed; top: 0; left: 0; right: 0; }
.mob-acc { border-bottom: 1px solid var(--line); }
.mob-acc-trigger {
width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit;
display: flex; align-items: center; justify-content: space-between;
padding: 17px 4px; font-size: 17px; font-weight: 600; color: var(--ink);
}
.mob-acc-trigger svg { flex: none; color: var(--teal-deep); transition: transform .25s cubic-bezier(0.22,1,0.36,1); }
.mob-acc.open .mob-acc-trigger svg { transform: rotate(180deg); }
.mob-acc-panel { display: none; padding: 0 2px 12px; }
.mob-acc.open .mob-acc-panel { display: block; }
.mob-acc-panel a { display: block; padding: 11px 12px; font-size: 15.5px; color: var(--ink-soft); text-decoration: none; border-radius: 8px; }
.mob-acc-panel a:active { background: var(--teal-tint); color: var(--teal-deep); }
.mob-direct {
display: flex; align-items: center; justify-content: space-between;
padding: 17px 4px; font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none;
border-bottom: 1px solid var(--line);
}
.mob-direct.mob-phone { color: var(--teal-deep); }
.mob-ctas { display: grid; gap: 12px; margin-top: 22px; }
.mob-ctas .btn { width: 100%; justify-content: center; }
@media(max-width: 860px) {
.nav-links { display: none !important; }
.ham-btn { display: flex; flex-direction: column; justify-content: center; }
}
@media(min-width: 861px) {
.mobile-nav { display: none !important; }
}
/* ═══════════════════════════════════════════════════════
COMMERCIAL SERVICES SECTION
═══════════════════════════════════════════════════════ */
.commercial-section {
background: var(--ink);
padding: 80px 0;
}
.commercial-head {
max-width: 640px;
margin-bottom: 48px;
}
.commercial-head h2 { color: #fff; }
.commercial-head h2 em { font-style: normal; color: var(--teal); }
.commercial-head p { color: rgba(249,248,243,.65); }
.com-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.com-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(200,145,43,.18);
border-radius: var(--radius);
padding: 24px 22px;
transition: background 0.22s, border-color 0.22s, transform 0.22s var(--ease-out-quart);
}
.com-card:hover {
background: rgba(200,145,43,.12);
border-color: rgba(200,145,43,.4);
transform: translateY(-3px);
}
.com-ico {
width: 44px; height: 44px;
border-radius: 10px;
background: rgba(200,145,43,.15);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.com-ico svg { stroke: var(--teal); }
.com-card h3 {
font-size: 16px; font-weight: 600;
color: #fff; margin-bottom: 6px;
}
.com-card p {
font-size: 13.5px;
color: rgba(249,248,243,.55);
line-height: 1.6;
}
.commercial-cta {
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap;
margin-top: 44px;
}
.commercial-cta p {
font-size: 14px;
color: rgba(249,248,243,.5);
margin: 0;
}
@media(max-width: 860px) { .com-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width: 520px) { .com-grid { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion: reduce) { .com-card:hover { transform: none; } }
/* Nav "Free Quote" button, sized to balance the 46px logo on the left */
.nav-quote-btn {
padding: 12px 24px;
font-size: 15px;
min-height: 46px;
gap: 9px;
}
/* ═══════════════════════════════════════════════════════
SERVICE PICKER, multi-select checkbox groups w/ tabs
═══════════════════════════════════════════════════════ */
.field-block {
display: grid;
gap: 4px;
}
.picker-label {
font-size: 13.5px;
font-weight: 600;
}
/* Category dropdown */
.category-select-wrap {
display: grid;
gap: 6px;
margin: 16px 0 12px;
}
.category-select-hint {
font-size: 12.5px;
font-weight: 500;
color: var(--ink-soft);
}
.category-select {
font-weight: 600;
border-color: rgba(200,145,43,.35);
background-color: var(--teal-tint);
color: var(--teal-deep);
cursor: pointer;
}
.category-select:focus {
border-color: var(--teal);
}
/* Checkbox option cards */
.picker-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.picker-panel[hidden] {
display: none;
}
.picker-opt {
position: relative;
display: flex;
align-items: center;
padding: 11px 14px;
border: 1.5px solid var(--line);
border-radius: 10px;
background: var(--cream);
cursor: pointer;
font-size: 13.5px;
font-weight: 500;
color: var(--ink);
transition: border-color 0.18s, background 0.18s, color 0.18s;
line-height: 1.3;
}
.picker-opt:hover {
border-color: rgba(200,145,43,.4);
}
/* Checkbox input is visually hidden but stays keyboard-focusable and
in the form's data, the whole card is the visible control */
.picker-opt input[type="checkbox"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
margin: 0;
}
.picker-opt:has(input:checked) {
border-color: var(--teal);
background: var(--teal-tint);
color: var(--teal-deep);
font-weight: 600;
}
.picker-opt:has(input:focus-visible) {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
/* Other option, full width, sits below panels */
.other-opt {
margin-top: 10px;
}
/* Selected chips summary, grouped by category for clarity */
.picked-chips {
display: grid;
gap: 10px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--line);
}
.picked-chips:empty {
display: none;
border-top: none;
padding-top: 0;
margin-top: 0;
}
.chip-group {
display: grid;
gap: 6px;
}
.chip-group-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--teal-deep);
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.picked-chip {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--ink);
background: var(--white);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 8px 6px 13px;
}
.picked-chip button {
display: flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border: none;
border-radius: 50%;
background: var(--teal-tint);
color: var(--teal-deep);
cursor: pointer;
padding: 0;
transition: background 0.15s, color 0.15s;
}
.picked-chip button:hover {
background: var(--teal);
color: #fff;
}
/* Error state */
.picker-error {
font-size: 13px;
font-weight: 600;
color: #C0392B;
margin-top: 8px;
}
@media(max-width: 560px) {
.picker-panel { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════
EXPLORE ALL SERVICES, combined overview
═══════════════════════════════════════════════════════ */
.explore-section {
background: linear-gradient(180deg, var(--teal-tint) 0%, #FBF3E0 30%, var(--white) 100%);
padding: 80px 0;
}
.explore-head {
text-align: center;
max-width: 640px;
margin: 0 auto 52px;
}
.explore-head h2 em { font-style: normal; color: var(--teal); }
.explore-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
}
.explore-col { display: flex; flex-direction: column; }
.explore-img {
border-radius: 16px;
overflow: hidden;
aspect-ratio: 3/2;
margin-bottom: 22px;
box-shadow: 0 10px 30px rgba(35,32,27,0.12);
}
.explore-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s var(--ease-out-quart);
}
.explore-col:hover .explore-img img { transform: scale(1.04); }
.explore-col h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 18px;
color: var(--ink);
}
.explore-list {
list-style: none;
display: grid;
gap: 12px;
}
.explore-list a {
display: flex;
align-items: center;
gap: 10px;
font-size: 15.5px;
font-weight: 500;
color: var(--teal-deep);
text-decoration: none;
transition: color 0.18s, gap 0.18s;
line-height: 1.35;
}
.explore-list a:hover {
color: var(--ink);
gap: 14px;
}
.explore-list a .tick {
flex: none;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--teal-tint);
display: flex; align-items: center; justify-content: center;
transition: background 0.18s;
}
.explore-list a:hover .tick { background: var(--teal); }
.explore-list a:hover .tick svg { stroke: #fff; }
@media(max-width: 860px) {
.explore-grid { grid-template-columns: 1fr; gap: 44px; max-width: 460px; margin: 0 auto; }
}
@media(prefers-reduced-motion: reduce) {
.explore-col:hover .explore-img img { transform: none; }
}
/* House-wash hero: show the full photo (contain) over a blurred fill of itself */
.svc-hero-img.contain { position: relative; background: var(--cream-2); }
.svc-hero-img.contain::before {
content: ''; position: absolute; inset: 0;
background-image: var(--hero-bg); background-size: cover; background-position: center;
filter: blur(30px) brightness(.82); transform: scale(1.18);
}
.svc-hero-img.contain img { position: relative; object-fit: contain; }
/* Results gallery (e.g. house washing) */
.svc-gallery { padding: 4px 0 68px; }
.svc-gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1000px; margin: 0 auto; }
.svc-gal-grid.single { grid-template-columns: 1fr; max-width: 680px; }
.svc-gal-grid.single.portrait { max-width: 440px; }
.svc-gal-item { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; }
.svc-gal-item.portrait { aspect-ratio: 3/4; }
.svc-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.25,1,.5,1); }
@media(hover: hover) { .svc-gal-item:hover img { transform: scale(1.05); } }
@media(max-width: 760px) { .svc-gal-grid { grid-template-columns: 1fr 1fr; } }
/* Phones: a swipe strip, not a stack. Three full-width photos ran 771px, most
of a screen, and squeezing them two-up instead makes the work too small to
read. Flex + scroll-snap keeps each photo large and shows a sliver of the
next one so it's obviously swipeable. The negative margin lets it bleed to
the screen edges; the matching padding keeps the first photo aligned with the
text above it. Page-level sideways scroll is already clipped in footer.css. */
@media(max-width: 560px) {
.svc-gal-grid,
.svc-gal-grid.single {
display: flex;
grid-template-columns: none;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-inline: -24px;
padding: 0 24px 4px;
max-width: none;
}
.svc-gal-grid::-webkit-scrollbar { display: none; }
.svc-gal-item { flex: 0 0 80%; scroll-snap-align: center; }
.svc-gal-grid.single .svc-gal-item { flex: 0 0 100%; }
}
/* ── Service page specific ── */
.svc-hero {
background: linear-gradient(160deg, var(--teal-tint) 0%, #FBF3E0 45%, var(--white) 100%);
padding: 56px 0 64px;
}
.svc-breadcrumb {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--ink-soft); margin-bottom: 22px;
}
.svc-breadcrumb a { color: var(--teal-deep); text-decoration: none; font-weight: 500; }
.svc-breadcrumb a:hover { text-decoration: underline; }
.svc-breadcrumb span { color: var(--line); }
.svc-hero-grid {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.svc-cat-tag {
display: inline-block; font-size: 12px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep);
background: var(--white); border: 1px solid rgba(200,145,43,.25);
padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.svc-hero h1 { font-size: clamp(30px, 4.5vw, 46px); margin-bottom: 16px; }
.svc-hero .tagline { font-size: 18px; color: var(--ink-soft); margin-bottom: 28px; max-width: 520px; }
.svc-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.svc-hero-img {
border-radius: 18px; overflow: hidden; aspect-ratio: 4/3;
box-shadow: 0 20px 50px rgba(35,32,27,0.16);
}
.svc-hero-img img { width: 100%; height: 100%; object-fit: cover; }
@media(max-width: 880px) { .svc-hero-grid { grid-template-columns: 1fr; gap: 36px; } .svc-hero-img { order: -1; } }
.svc-body { padding: 72px 0; }
.svc-body-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
.svc-desc h2 { font-size: 26px; margin-bottom: 20px; }
.svc-desc p { color: var(--ink-soft); font-size: 16px; line-height: 1.75; margin-bottom: 18px; }
.svc-points { list-style: none; display: grid; gap: 14px; margin-top: 28px; }
/* The "what we clean" / "benefits" lists. Desktop keeps the auto-fit behaviour
the inline style used to carry.
⚠️ Two columns on phones was tried and REVERTED, it made these sections
TALLER. The items read short ("Render and painted surfaces") but at 163px
they wrap to two lines, so four double-height rows beat seven single ones by
nothing and the tighter gap lost. One column, slightly tighter, is the win. */
.svc-points.wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 40px; }
@media(max-width: 560px) {
.svc-points.wide { grid-template-columns: 1fr; gap: 9px; }
.svc-points { margin-top: 20px; }
.svc-points li { font-size: 14.5px; }
}
.svc-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 500; }
.svc-points .tick {
flex: none; width: 22px; height: 22px; border-radius: 50%;
background: var(--teal-tint); display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.svc-aside {
position: sticky; top: 96px;
background: var(--ink); border-radius: 16px; padding: 30px; color: var(--cream);
}
.svc-aside h3 { color: #fff; font-size: 20px; margin-bottom: 8px; }
.svc-aside p { font-size: 14px; color: rgba(249,248,243,.65); margin-bottom: 20px; }
.svc-aside .btn { width: 100%; margin-bottom: 12px; }
.svc-aside .phone {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 19px; font-weight: 700; color: #fff; text-decoration: none; padding: 10px;
}
.svc-aside .phone:hover { color: var(--teal); }
@media(max-width: 880px) { .svc-body-grid { grid-template-columns: 1fr; gap: 40px; } .svc-aside { position: static; } }
/* Before/after on service page */
.svc-ba { padding: 0 0 72px; }
.svc-ba-head { text-align: center; max-width: 600px; margin: 0 auto 40px; }
.svc-ba-stage {
position: relative; max-width: 820px; margin: 0 auto;
aspect-ratio: 828/736; border-radius: 16px; overflow: hidden;
cursor: ew-resize; user-select: none; -webkit-user-select: none;
touch-action: pan-y; box-shadow: 0 16px 40px rgba(35,32,27,0.14);
}
/* Shorter/narrower on phones so there's room to scroll past without the finger
catching the drag handle */
@media(max-width:640px){
.svc-ba-stage{ aspect-ratio: 3/2; max-width: 440px; }
.svc-ba-stage .svc-ba-handle{ width: 40px; height: 40px; }
}
.svc-ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.svc-ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.svc-ba-divider { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; left: 50%; transform: translateX(-50%); box-shadow: 0 0 10px rgba(0,0,0,.35); pointer-events: none; }
.svc-ba-handle {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 46px; height: 46px; border-radius: 50%; background: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 14px rgba(35,32,27,.35), 0 0 0 2px rgba(200,145,43,.25);
}
.svc-ba-label {
position: absolute; top: 14px; font-size: 11px; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
padding: 5px 11px; border-radius: 6px; pointer-events: none;
}
.svc-ba-label.bf { left: 14px; background: rgba(35,32,27,.8); }
.svc-ba-label.af { right: 14px; background: var(--teal); }
@media(prefers-reduced-motion: reduce){ .svc-ba-after { clip-path: inset(0 0 0 50%) !important; } }
/* Related services */
.svc-related { padding: 0 0 80px; }
.related-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.related-grid a {
font-size: 14px; font-weight: 600; color: var(--teal-deep);
background: var(--white); border: 1px solid var(--line);
padding: 11px 20px; border-radius: 999px; text-decoration: none;
transition: background .18s, border-color .18s;
}
.related-grid a:hover { background: var(--teal-tint); border-color: rgba(200,145,43,.4); }
/* Not-found state */
.svc-404 { padding: 120px 0; text-align: center; }
.svc-404 h1 { font-size: 32px; margin-bottom: 14px; }
.svc-404 p { color: var(--ink-soft); margin-bottom: 24px; }