/* ============================================================
Big Easy Bathrooms - homepage mockup
Design language modelled on dfinedesignandbuild.com:
warm cream ground, taupe accents, dark band, serif display
heading over a geometric sans body, floating pill navigation.
Content is Big Easy Bathrooms' own, carried from the live site.
Dark tone uses the client's brand navy #04223D in place of
D'Fine's near-black so the existing logo stays coherent.
============================================================ */
:root{
--cream:#F8F6F2; /* D'Fine ground */
--cream-2:#F3F1ED;
--line:#E8E6E1;
--taupe:#AE9E90; /* D'Fine accent */
--sand:#C7B29A;
--sand-2:#DCCDB8; /* light sand, for dark grounds only */
--hero-bg:#F1EADE; /* light sand wash under the hero only */
--ink:#242424; /* D'Fine heading ink */
--body:#55514C;
--navy:#04223D; /* Big Easy brand */
--navy-2:#0A3357;
--white:#fff;
--serif:"Fraunces",Georgia,"Times New Roman",serif;
--sans:"Outfit",-apple-system,"Segoe UI",Arial,sans-serif;
--r:22px;
--wrap:1440px; /* the page container, every band */
--gutter:26px; /* side padding inside it; phones take 18px */
--ease-quart:cubic-bezier(0.25,1,0.5,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--body);
overflow-x:clip; /* flourishes may fly in from off-canvas; never a scrollbar */
font-family:var(--sans);font-size:17px;line-height:1.75;
-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
/* A video is media like any other: it stops at the edge of what holds it. The
ones inside .sf-img are sized by their box, but a video placed on its own —
the process steps, the panel beside the copy — had nothing holding it in. */
video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:400;
letter-spacing:-.01em;margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.eyeb{font-family:var(--sans);font-size:.72rem;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);
margin:0 0 14px}
section{padding:88px 0}
/* ---- buttons: D'Fine's 13px uppercase pill ---- */
.btn{display:inline-block;font-family:var(--sans);font-size:13px;
font-weight:600;letter-spacing:.08em;text-transform:uppercase;
text-decoration:none;padding:15px 30px;border-radius:999px;
border:1.5px solid transparent;transition:.25s ease;cursor:pointer}
.btn-p{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-p:hover{background:var(--navy-2);border-color:var(--navy-2);
transform:translateY(-2px)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-s:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-l{background:#fff;color:var(--navy);border-color:#fff}
.btn-l:hover{background:var(--sand);border-color:var(--sand);color:var(--ink);
transform:translateY(-2px)}
.btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
/* a link inside body copy */
.tlink{color:var(--navy);font-weight:600;text-decoration:underline;
text-decoration-color:var(--sand);text-decoration-thickness:1.5px;text-underline-offset:3px}
.tlink:hover,.tlink:focus-visible{text-decoration-color:var(--navy)}
.btn-o:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}
/* ---- floating pill header, straight from D'Fine ----
The pill is the page's banner landmark, so it sits outside main.
Nothing comes before it in the flow, so top:0 is the top of the hero.
It is as wide as the container less its gutters, which lines the
pill's edges up with the content edges of every band below. */
.head{position:relative}
.topwrap{position:absolute;top:0;left:0;right:0;z-index:60;padding:22px var(--gutter)}
/* once stuck, the bar runs full width and meets the top edge; the logo,
menu and phone button stay on the container's content edges */
.topwrap.stuck{position:fixed;padding:0;
animation:drop .35s ease both}
.topwrap.stuck .top{max-width:none;border-radius:0;border-width:0 0 1px;
padding-left:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));
padding-right:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)))}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.top{max-width:calc(var(--wrap) - 2 * var(--gutter));margin:0 auto;background:#fff;
border:1px solid var(--line);
border-radius:999px;box-shadow:0 10px 34px rgba(20,20,20,.12);
display:flex;align-items:center;gap:20px;padding:10px 12px 10px 22px}
.top .logo img{height:40px;width:auto}
.nav-wrap{display:contents} /* the landmark adds no box; the list stays the flex item */
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav>li{list-style:none;position:relative}
/* The chevron follows its words on the same line: "Services" and its mark are
one thing, and a block box would let the space between them break, dropping
the chevron underneath and pushing the whole bar out of line. The flyout
links and the group rows below already hold their words together this way. */
.nav a{display:inline-flex;align-items:center;white-space:nowrap;
text-decoration:none;font-size:.9rem;font-weight:500;
color:var(--ink);padding:10px 13px;border-radius:999px;transition:.2s}
.nav a:hover,.nav .on>a{background:var(--cream-2);color:var(--navy)}
.nav ul{list-style:none;margin:0;padding:8px;position:absolute;top:100%;
left:0;min-width:262px;background:#fff;border:1px solid var(--line);
border-radius:18px;box-shadow:0 18px 46px rgba(20,20,20,.14);
opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;
max-height:70vh;overflow:auto}
.nav li:hover>ul,.nav li:focus-within>ul{opacity:1;visibility:visible;
transform:none}
.nav ul a{font-size:.86rem;padding:9px 14px;border-radius:11px;
white-space:nowrap;font-weight:400}
/* chevrons drawn from two borders: down on the top level, turning up while
its menu is open; pointing right on the flyout groups */
.nav .caret{display:inline-block;width:7px;height:7px;margin:0 2px 0 8px;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:translateY(-3px) rotate(45deg);opacity:.6;transition:transform .22s ease,opacity .22s ease}
.nav li:hover>a .caret,.nav li:focus-within>a .caret{transform:translateY(1px) rotate(-135deg);opacity:1}
.nav .grp .caret{transform:rotate(-45deg)}
.nav .sub:hover>.grp .caret,.nav .sub:focus-within>.grp .caret{transform:translateX(3px) rotate(-45deg);opacity:1}
/* Services: two groups, each opening a flyout beside the menu */
.nav ul.has-sub{overflow:visible;max-height:none;min-width:200px}
.nav ul li{position:relative}
.nav .grp{display:flex;align-items:center;justify-content:space-between;
font-size:.86rem;font-weight:500;color:var(--ink);padding:9px 14px;
border-radius:11px;cursor:default;white-space:nowrap;outline-offset:2px}
.nav .sub:hover>.grp,.nav .sub:focus-within>.grp{background:var(--cream-2);color:var(--navy)}
.nav .grp .caret{margin-left:14px}
.nav ul ul{top:-8px;left:100%;margin-left:6px}
/* Service Areas: every town and every service in it, in one panel of columns.
The item gives up its own positioning so the panel is placed against the
header and runs the width of the pill, centred under it. */
.nav>li.mega{position:static}
.nav .mega>ul{left:0;right:0;top:calc(100% + 8px);margin:0 auto;min-width:0;
width:min(calc(var(--wrap) - 2 * var(--gutter)),calc(100vw - 2 * var(--gutter)));
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 18px;padding:20px 22px;
max-height:calc(100vh - 150px);overflow:auto;overscroll-behavior:contain}
/* the gap between the pill and the panel still counts as the menu, so the
pointer can cross it without the panel closing; it is on the link, because
the panel scrolls and would clip anything hung outside it */
.nav>li.mega>a{position:relative}
.nav>li.mega:hover>a::after{content:"";position:absolute;left:-30px;right:-30px;top:100%;height:52px}
.nav .mega>ul>li{min-width:0}
.nav .mega .grp{display:block;padding:5px 10px;font-size:.8rem;font-weight:700;line-height:1.35;
letter-spacing:.06em;text-transform:uppercase;color:var(--navy);white-space:normal}
.nav .mega .grp .caret{display:none}
.nav .mega .sub:hover>.grp,.nav .mega .sub:focus-within>.grp{background:none}
.nav .mega a.grp:hover,.nav .mega a.grp:focus-visible{background:var(--cream-2)}
.nav .mega span.grp{cursor:default}
/* Services: two or three groups, so the panel is as wide as its columns and
opens under its own item like the other dropdowns */
.nav>li.mega-narrow{position:relative}
.nav .mega-narrow>ul{right:auto;margin:0;width:max-content;
max-width:calc(100vw - 2 * var(--gutter));
grid-template-columns:repeat(var(--cols,2),minmax(190px,max-content));gap:18px 28px}
.nav .mega ul ul{position:static;margin:4px 0 0 10px;padding:0 0 0 8px;min-width:0;
max-height:none;overflow:visible;border:0;border-left:1px solid var(--line);border-radius:0;
box-shadow:none;background:none;opacity:1;visibility:inherit;transform:none;transition:none}
.nav .mega ul ul a{display:flex;padding:4px 10px;font-size:.84rem;line-height:1.35;white-space:normal}
.tel{display:inline-flex;align-items:center;gap:9px;background:var(--navy);
color:#fff;text-decoration:none;padding:11px 21px;border-radius:999px;
font-weight:600;font-size:.88rem;white-space:nowrap;transition:.25s}
.tel:hover{background:var(--navy-2)}
/* three bars that turn into an X (SDBody's button, in the pill's round shape) */
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
background:var(--cream-2);border:1px solid var(--line);border-radius:50%;
width:46px;height:46px;padding:0;cursor:pointer;position:relative;z-index:130}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
transition:transform .35s var(--ease-quart),opacity .3s,background-color .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* ---- hero: full-bleed photo, D'Fine proportions ---- */
/* ============================================================
HERO - magazine spread
Photographs turn like pages on the left, copy sits on the right.
The copy is on the cream ground now, not over a photograph, so
every colour in here is chosen against cream.
============================================================ */
.hero{position:relative;background:var(--hero-bg);
padding:138px 0 62px;overflow:hidden}
/* a hairline so the wash ends deliberately rather than just stopping */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg,rgba(174,158,144,0),rgba(174,158,144,.45),
rgba(174,158,144,0))}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:auto minmax(0,1fr);
gap:108px;align-items:center}
/* ---- the magazine ---- */
.mag-wrap{position:relative}
/* Height-driven so the controls below it stay above the fold.
See the note in SESSION-NOTES.md for the measurement. */
.mag{position:relative;height:clamp(430px,76vh,720px);aspect-ratio:4/5;
width:auto;perspective:1900px;perspective-origin:0% 50%;
border-radius:3px 13px 13px 3px;
box-shadow:0 26px 58px rgba(36,36,36,.22),0 4px 10px rgba(36,36,36,.10)}
/* the spine, on the left, which is what the pages hinge on */
.mag::before{content:"";position:absolute;left:-10px;top:1.5%;bottom:1.5%;
width:15px;border-radius:9px 0 0 9px;z-index:0;
background:linear-gradient(90deg,#B4A490,#DCCDB8 55%,#C7B29A);
box-shadow:0 14px 32px rgba(36,36,36,.2)}
/* the cut edge of the pages underneath, so it reads as a stack */
.mag::after{content:"";position:absolute;right:-7px;top:1%;bottom:1%;width:9px;
border-radius:0 9px 9px 0;z-index:0;
background:repeating-linear-gradient(180deg,#fff 0 2px,#EAE6DF 2px 4px);
box-shadow:0 14px 28px rgba(36,36,36,.14)}
.mag-stack{position:absolute;inset:0;transform-style:preserve-3d}
.mag-pg{position:absolute;inset:0;margin:0;
transform-origin:left center;border-radius:3px 13px 13px 3px;
/* past 90deg the browser would paint a mirrored copy of the front
image, which reads as a page printed backwards. Hiding the backface
makes it simply turn away, which is what a page does. */
-webkit-backface-visibility:hidden;backface-visibility:hidden;
overflow:hidden;background:#E6DFD3;
/* hairline only. A full drop shadow here multiplies by the number of
pages, because they all sit at the same coordinates. */
box-shadow:0 0 0 1px rgba(36,36,36,.07);
transition:transform 1.15s cubic-bezier(.62,.03,.3,1)}
.mag-pg img{width:100%;height:100%;object-fit:cover;display:block}
.mag-pg img.mag-left{object-position:30% 50%}
/* the service each page shows, named on the page */
.mag-cap{position:absolute;left:16px;top:16px;z-index:3;margin:0;pointer-events:none;
font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink);background:rgba(248,246,242,.92);
border-radius:999px;padding:8px 14px}
/* gutter shading, deepest at the spine, so the page looks bound */
.mag-pg::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(36,36,36,.34) 0%,
rgba(36,36,36,.10) 9%,rgba(36,36,36,0) 30%)}
.mag-pg.turning{transform:rotateY(-172deg)}
.mag-pg.noanim{transition:none}
/* ---- a glint that sweeps across the page, like light on a glossy cover.
Above the pages, below the controls; clipped to the page's corners. ---- */
.mag-shine{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden;
border-radius:3px 13px 13px 3px}
.mag-shine::before{content:"";position:absolute;top:-45%;bottom:-45%;left:-70%;width:34%;
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 28%,
rgba(255,255,255,.48) 50%,rgba(255,255,255,.10) 72%,rgba(255,255,255,0) 100%);
transform:rotate(18deg);
animation:magShine 5.4s cubic-bezier(.45,.1,.3,1) 1.6s infinite}
@keyframes magShine{0%{left:-70%}48%,100%{left:140%}}
@media (prefers-reduced-motion:reduce){.mag-shine{display:none}}
/* ---- controls. Visible, large, and the slideshow can be stopped. ---- */
/* Controls sit on the photograph, bottom left, on a soft navy scrim.
Overlaying them frees about 76px of height, which is what lets the
page grow and still keep the controls above the fold. */
.mag-ctl{position:absolute;left:14px;bottom:14px;z-index:20;
display:flex;align-items:center;gap:8px;
background:rgba(4,34,61,.46);-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px 7px 7px}
.mag-btn{width:44px;height:44px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);
color:#fff;cursor:pointer;font-size:17px;line-height:1;
display:grid;place-items:center;transition:.2s ease}
.mag-btn:hover,.mag-btn:focus-visible{background:#fff;color:var(--navy);
border-color:#fff}
.mag-dots{display:flex;align-items:center;gap:7px;margin-left:6px}
.mag-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;
background:rgba(255,255,255,.55);cursor:pointer;transition:.25s ease}
.mag-dot[aria-current="true"]{background:var(--sand);width:28px;
border-radius:999px}
/* ---- the copy ---- */
.hero-copy{max-width:660px}
.stars{display:inline-flex;align-items:center;gap:10px;
background:var(--cream-2);border:1px solid var(--line);
border-radius:999px;padding:8px 18px;
color:var(--ink);font-size:.82rem;font-weight:500;margin-bottom:22px}
.stars b{color:#8A5E10;letter-spacing:.12em;font-size:.95rem}
.hero h1{color:var(--ink);font-size:clamp(2.3rem,4vw,3.7rem);line-height:1.08;
font-weight:300;margin:0 0 20px;text-wrap:balance}
.hero p{color:var(--body);font-size:1.24rem;margin:0 0 32px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}
@media (max-width:900px){
.hero{padding:128px 0 58px}
.hero-grid{grid-template-columns:1fr;gap:40px}
.hero-copy{max-width:none}
/* width-driven on small screens: a fixed height and a max-width
would contradict each other and distort the page */
.mag{height:auto;width:100%;max-width:500px;aspect-ratio:4/5}
.mag::before{left:-7px;width:11px}
.mag::after{right:-5px;width:7px}
}
/* A page that flips in 3D is exactly the motion to drop. Under reduced
motion the pages cross-fade instead, and nothing advances on its own. */
@media (prefers-reduced-motion:reduce){
.mag-pg{transition:opacity .35s ease}
.mag-pg.turning{transform:none;opacity:0}
}
/* ---- intro ---- */
.lead{max-width:900px}
.lead h2{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.18;margin:0 0 18px}
.lead p{font-size:1.1rem;margin:0}
/* ---- service cards ---- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
margin-top:46px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
transition:.3s ease}
.svc:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(20,20,20,.13);
border-color:var(--taupe)}
.svc-img{aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.svc:hover .svc-img img{transform:scale(1.06)}
.svc-b{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.svc-b h3{font-size:1.24rem;margin:0 0 9px}
.svc-b p{font-size:.95rem;line-height:1.65;margin:0 0 18px;flex:1}
.more{font-family:var(--sans);font-size:12px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--navy);
display:inline-flex;align-items:center;gap:8px}
.more span{transition:transform .3s}
.svc:hover .more span{transform:translateX(5px)}
.svc-all{text-align:center;margin-top:44px}
/* ---- split: image + copy ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
/* Designed Around You on a darker brown than the gallery, so the two bands
read apart; the gap above it is trimmed on both sides */
.dz{background:#E3D5C1;padding-top:64px}
.dz .eyeb{color:var(--navy)}
#services{padding-bottom:52px}
.split-img{border-radius:var(--r);overflow:hidden;aspect-ratio:5/4}
.split-img img,.split-img video{width:100%;height:100%;object-fit:cover;display:block}
.split-img.vid{aspect-ratio:auto;align-self:stretch;min-height:340px}
@media (max-width:900px){.split-img.vid{aspect-ratio:16/9;min-height:0;align-self:auto}}
.split h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.2;margin:0 0 18px}
.split p{margin:0 0 16px}
.split p:last-of-type{margin-bottom:26px}
/* ---- process, D'Fine's 4 across ---- */
/* ---- dark band ---- */
.band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.band h2{color:#fff;font-size:clamp(1.7rem,3.3vw,2.6rem);line-height:1.18;
margin:0 0 16px;font-weight:300}
.band p{color:rgba(255,255,255,.86);margin:0 0 28px}
.band .eyeb{color:var(--sand)}
.band-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;
align-items:center}
.band-cta{display:flex;gap:13px;flex-wrap:wrap}
.band-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.band-strip img{border-radius:16px;aspect-ratio:1/1;object-fit:cover;
width:100%}
.band-strip img:nth-child(1),.band-strip img:nth-child(4){aspect-ratio:4/5}
/* ---- why us: photograph under a navy scrim, glass cards, two CTAs ---- */
.why-sec{position:relative;overflow:hidden;color:var(--ink);padding:96px 0}
.why-bg{position:absolute;inset:0;z-index:0}
/* the photograph shows in its natural colour: no scrim, no tint */
.why-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.why-sec .wrap{position:relative;z-index:1}
/* the heading sits on a light frosted panel so it reads on any photo */
.why-sec .lead{background:rgba(248,246,242,.86);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.75);border-radius:var(--r);
padding:32px 38px 28px}
.why-sec .eyeb{color:var(--navy)}
.why-sec h2{color:var(--ink);margin-bottom:0}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.why-c{position:relative;overflow:hidden;
background:rgba(248,246,242,.86);border:1px solid rgba(255,255,255,.75);
border-radius:var(--r);padding:36px 30px 32px;
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.js .why-c.rv{transition:opacity .7s ease,transform .7s ease,
background .3s ease,border-color .3s ease}
.why-c:hover{background:rgba(248,246,242,.95);border-color:var(--sand)}
/* sand rule across the top, drawn as the card arrives */
.why-c::before{content:"";position:absolute;left:30px;right:30px;top:0;height:3px;
border-radius:0 0 3px 3px;
background:linear-gradient(var(--sand),var(--sand)) left top/100% 100% no-repeat}
.js .why-c::before{background-size:0% 100%}
.js .why-c.in::before{background-size:100% 100%;
transition:background-size .9s cubic-bezier(.22,1,.36,1) .35s}
.why-c p{margin:0;font-size:1.02rem;line-height:1.7;color:var(--ink)}
/* the three cards arrive one after another; hover stays instant */
.js .why .why-c.in:nth-child(2){transition-delay:.14s,.14s,0s,0s}
.js .why .why-c.in:nth-child(3){transition-delay:.28s,.28s,0s,0s}
.js .why .why-c.in:nth-child(2)::before{transition-delay:.49s}
.js .why .why-c.in:nth-child(3)::before{transition-delay:.63s}
.why-cta{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:42px}
@media (prefers-reduced-motion:reduce){
.js .why-c::before{background-size:100% 100%!important;transition:none!important}
}
/* ---- testimonial feature ---- */
/* ---- areas ---- */
.areas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.areas a{background:#fff;border:1px solid var(--line);border-radius:999px;
padding:11px 24px;text-decoration:none;font-size:.93rem;font-weight:500;
color:var(--ink);transition:.25s}
.areas a:hover{background:var(--navy);color:#fff;border-color:var(--navy);
transform:translateY(-2px)}
/* ---- newsletter / form ---- */
.form-card{background:#E9DDCB;border:1px solid rgba(199,178,154,.5);
border-radius:var(--r);padding:36px 40px 32px;text-align:center}
.form-card .eyeb{color:var(--navy)}
.form-card h2{font-size:clamp(1.5rem,2.8vw,2.2rem);margin:0 0 10px}
.form-card p{margin:0 0 22px;color:var(--ink)}
.frow{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;
max-width:900px;margin:0 auto;text-align:left}
.frow input{font-family:var(--sans);font-size:.95rem;padding:14px 17px;
border:1px solid var(--line);border-radius:12px;background:#fff;
color:var(--ink);width:100%}
.frow input:focus{outline:2px solid var(--taupe);outline-offset:1px;
background:#fff}
.note{font-size:.8rem;color:var(--body);margin:14px 0 0}
/* ---- footer ---- */
/* ============================================================
FOOTER
Navy ground with a sand edge, cream type, the site's bubbles drifting
behind. Brand and rating on the left; the menu's own structure as
columns: Showers, Bathtubs (plus Bathroom Safety), Service areas,
Company and Follow.
============================================================ */
footer{position:relative;overflow:hidden;background:var(--navy);color:rgba(255,255,255,.82);padding:0}
footer::before{content:"";display:block;height:5px;
background:linear-gradient(90deg,var(--sand),var(--sand-2),var(--sand))}
footer .wrap{position:relative;z-index:2}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:36px;padding:64px 0 44px}
.ft-brand p{font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 18px;max-width:34ch}
footer img.flogo{height:48px;width:auto;background:#fff;border-radius:12px;
padding:8px 12px;margin-bottom:20px;display:block}
.ft-rating{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 22px}
.ft-rating .tr-stars{font-size:1.05rem;color:var(--sand-2);letter-spacing:.06em}
.ft-rating .tr-r1{font-family:var(--serif);font-size:1.02rem;color:#fff}
.ft-rating .tr-badges{display:inline-flex;gap:6px}
footer h4{color:var(--sand-2);font-family:var(--sans);font-size:.72rem;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;margin:0 0 16px}
footer ul+h4{margin-top:26px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 9px}
footer a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.93rem;transition:color .2s ease}
footer a:hover,footer a:focus-visible{color:#fff;text-decoration:underline;
text-decoration-color:var(--sand);text-underline-offset:3px}
/* one profile per line, icon then name, on the same rhythm as the link columns */
.ft-social a{display:inline-flex;align-items:center;gap:10px}
.ft-social svg{flex:none;width:16px;height:16px}
.ft-bot{border-top:1px solid rgba(255,255,255,.16);padding:22px 0 26px;
display:flex;justify-content:space-between;gap:14px 18px;flex-wrap:wrap;
font-size:.85rem;color:rgba(255,255,255,.72)}
.ft-bot a{font-size:.85rem}
@media (max-width:1000px){
.ft-top{grid-template-columns:1fr 1fr 1fr;gap:30px}
.ft-brand{grid-column:1 / -1}
}
@media (max-width:640px){
.ft-top{grid-template-columns:1fr 1fr;padding:48px 0 36px;gap:26px 18px}
.ft-brand{grid-column:1 / -1}
}
/* A phone is too narrow for two columns of these link lists: "Tub to Shower
Conversions" alone is 25 characters, and half of a 390px screen is not enough
for it. So the columns stack, each list keeps the full width, and the rows are
separated by a hairline rather than by guesswork about spacing. */
@media (max-width:480px){
.ft-top{grid-template-columns:1fr;gap:0;padding:40px 0 28px}
.ft-top>div{padding:22px 0}
.ft-top>div+div{border-top:1px solid rgba(255,255,255,.14)}
.ft-brand{padding-top:0}
.ft-brand p{max-width:none}
footer h4{margin-bottom:12px}
footer li{margin:0 0 11px}
footer a{font-size:.95rem}
.ft-bot{justify-content:flex-start;gap:10px 16px;padding:20px 0 24px}
}
.mock{background:var(--sand);color:var(--ink);text-align:center;
padding:9px 16px;font-size:.8rem;font-weight:600;letter-spacing:.04em}
/* ---- reveal: content is visible by default and the animation only
enhances it, so a failed observer can never leave a blank screen.
This is deliberate: the audience for walk-in tubs and grab bars is
the last audience that should be shown an empty page. ---- */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(22px);
transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js .rv{opacity:1!important;transform:none!important;transition:none}
.btn,.svc,.step,.areas a,.svc-img img{transition:none!important}
.topwrap.stuck{animation:none}
}
@media (max-width:1080px){
.svc-grid,.why,.revs{grid-template-columns:1fr 1fr}
.steps{grid-template-columns:1fr 1fr}
.f-top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.nav,.tel{display:none}
.burger{display:flex;margin-left:auto}
.split,.band-in{grid-template-columns:1fr;gap:34px}
.frow{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
section{padding:62px 0}
:root{--gutter:18px}
.svc-grid,.why,.revs,.steps,.frow{grid-template-columns:1fr}
.hero{min-height:560px;padding:150px 0 50px}
.feat{padding:36px 24px}
.form-card{padding:34px 22px}
.f-top{grid-template-columns:1fr;gap:30px}
.btn{width:100%;text-align:center}
.hero-cta{gap:10px}
}
/* ============================================================
INTRO SEQUENCE
Bathroom scene + rising bubbles, then the Big Easy logo flies
in from the lower left, settles centre and floats there.
Accessibility contract for this audience (older homeowners):
- The overlay is display:none by DEFAULT. Only the inline
arming script turns it on, so no-JS never sees a gate.
- Two independent dismissals. The JS timer is PRIMARY and fires
even in a background tab. The CSS animation is the backup for
a dead script. Note the backup only advances while the page is
VISIBLE: a hidden tab freezes the animation timeline, so it
clears on focus rather than on a wall clock.
- prefers-reduced-motion: never armed at all.
- Shown once per browser tab session, not on every reload.
- Skippable by button, click, key or scroll.
- The page underneath is fully rendered the whole time.
============================================================ */
.intro{display:none}
.intro-armed .intro{
display:grid;place-items:center;position:fixed;inset:0;z-index:9999;
overflow:hidden;background:var(--navy);
animation:introOut .6s ease 3.6s forwards;
}
/* the scene: client's own bathroom photo, slow drift so it reads
as footage rather than a still. A video element can be swapped
in here later; see the note in the markup below. */
.intro-scene{position:absolute;inset:0;overflow:hidden}
.intro-scene img,.intro-scene video{
width:100%;height:100%;object-fit:cover;
animation:introDrift 6s ease-out forwards;
}
/* No colour cast. The photo shows through clear; only a soft neutral
vignette at the very edge, enough to seat the skip button. */
.intro-scene::after{
content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at 50% 50%,
rgba(0,0,0,0) 44%,rgba(0,0,0,.10) 76%,rgba(0,0,0,.26) 100%);
}
/* bubbles. Positioned + randomised by the arming script. */
.intro-bub{position:absolute;border-radius:50%;pointer-events:none;
left:var(--x);bottom:var(--y);width:var(--s);height:var(--s);
background:radial-gradient(circle at 32% 28%,
rgba(255,255,255,.92) 0%,rgba(255,255,255,.34) 38%,
rgba(255,255,255,.07) 62%,rgba(255,255,255,.16) 100%);
box-shadow:inset 0 0 7px rgba(255,255,255,.75),
0 0 0 1px rgba(116,168,204,.28),
0 2px 9px rgba(0,0,0,.12);
opacity:0;
animation:introRise var(--d) linear var(--delay) infinite;
}
@keyframes introRise{
0%{opacity:0;transform:translate3d(0,0,0) scale(.45)}
9%{opacity:var(--o)}
85%{opacity:var(--o)}
100%{opacity:0;transform:translate3d(var(--drift),calc(-100vh - 160px),0) scale(1)}
}
@keyframes introDrift{
0%{transform:scale(1.16) translate3d(0,1.5%,0)}
100%{transform:scale(1) translate3d(0,0,0)}
}
@keyframes introOut{to{opacity:0;visibility:hidden;pointer-events:none}}
/* ---- the logo: flight, then float ---- */
/* The logo rides inside one big bubble, which pops and releases it.
The scene is now clear rather than navy, so the navy logo has good
contrast on its own; a white halo lifts it off the busier areas. */
.intro-logo{position:relative;z-index:2;
width:min(80vw,400px);aspect-ratio:1;display:grid;place-items:center;
will-change:transform;
animation:logoFly 1.5s cubic-bezier(.22,.78,.3,1) .18s both}
/* the shell: glassy, refracts the bathroom behind it */
.intro-bubble{position:absolute;inset:0;border-radius:50%;
/* A bubble reads from its RIM, not its fill. The first gradient is a
bright band held right at the edge; without it the shape looks like
a smudge on a light photo. The second is the body and refraction. */
background:
radial-gradient(circle at 50% 50%,
rgba(255,255,255,0) 60%,rgba(255,255,255,.26) 82%,
rgba(255,255,255,.88) 94%,rgba(255,255,255,.60) 98.5%,
rgba(255,255,255,0) 100%),
radial-gradient(circle at 34% 28%,
rgba(255,255,255,.58) 0%,rgba(255,255,255,.20) 34%,
rgba(163,209,238,.16) 64%,rgba(255,255,255,.10) 100%);
border:1px solid rgba(255,255,255,.6);
box-shadow:inset 0 0 30px rgba(255,255,255,.55),
inset 16px 18px 42px rgba(255,255,255,.45),
inset -18px -22px 52px rgba(96,150,190,.32),
0 20px 48px rgba(0,0,0,.17);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
animation:bubblePop .34s cubic-bezier(.3,0,.6,1) 1.72s forwards}
/* bounce light, lower right */
.intro-bubble::after{content:"";position:absolute;
right:16%;bottom:15%;width:17%;height:11%;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,255,255,0) 72%)}
.intro-shine{position:absolute;left:19%;top:13%;width:25%;height:17%;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.98),rgba(255,255,255,0) 70%);
animation:bubblePop .34s cubic-bezier(.3,0,.6,1) 1.72s forwards}
/* the mark, released by the pop */
.intro-mark{position:relative;z-index:2;width:57%;
animation:markRelease .55s cubic-bezier(.2,.9,.3,1) 1.72s both}
.intro-mark img{width:100%;height:auto;display:block;
filter:drop-shadow(0 0 10px rgba(255,255,255,.92))
drop-shadow(0 2px 8px rgba(0,0,0,.24));
animation:logoFloat 3.4s ease-in-out 2.25s infinite}
/* droplets thrown out at the moment of the pop */
.intro-drop{position:absolute;left:50%;top:50%;width:11px;height:11px;
border-radius:50%;opacity:0;pointer-events:none;
background:radial-gradient(circle at 34% 30%,
rgba(255,255,255,.98),rgba(255,255,255,.42));
box-shadow:0 0 0 1px rgba(116,168,204,.3);
animation:dropBurst .5s ease-out 1.72s forwards}
@keyframes bubblePop{
0%{opacity:1;transform:scale(1)}
55%{opacity:.65;transform:scale(1.15)}
100%{opacity:0;transform:scale(1.32)}
}
@keyframes markRelease{
0%{transform:scale(.88)}
45%{transform:scale(1.07)}
100%{transform:scale(1)}
}
@keyframes dropBurst{
0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
18%{opacity:.95}
100%{opacity:0;
transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.25)}
}
@keyframes logoFly{
0%{opacity:0;transform:translate3d(-44vw,40vh,0) scale(.3) rotate(-13deg)}
14%{opacity:1}
62%{transform:translate3d(0,0,0) scale(1.07) rotate(2.5deg)}
80%{transform:translate3d(0,0,0) scale(.975) rotate(-1deg)}
100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}
}
@keyframes logoFloat{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(0,-13px,0)}
}
/* ---- skip ---- */
.intro-skip{position:absolute;z-index:3;right:20px;bottom:20px;
font-family:var(--sans);font-size:13px;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;
color:#fff;background:rgba(4,34,61,.74);
border:1.5px solid rgba(255,255,255,.7);border-radius:999px;
padding:13px 26px;cursor:pointer;transition:.2s ease}
.intro-skip:hover,.intro-skip:focus-visible{
background:#fff;color:var(--navy);border-color:#fff}
/* ---- sound toggle, bottom left, opposite Skip ---- */
.intro-sound{position:absolute;z-index:3;left:20px;bottom:20px;
font-family:var(--sans);font-size:13px;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;
color:#fff;background:rgba(4,34,61,.74);
border:1.5px solid rgba(255,255,255,.7);border-radius:999px;
padding:13px 22px;cursor:pointer;transition:.2s ease}
.intro-sound:hover,.intro-sound:focus-visible{background:#fff;color:var(--navy);
border-color:#fff}
.intro-sound[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff}
/* instant kill when skipped */
.intro-gone .intro{
animation:none!important;opacity:0!important;visibility:hidden!important;
pointer-events:none!important}
/* never gate anyone who asked for less motion */
@media (prefers-reduced-motion:reduce){
.intro-armed .intro{display:none!important}
}
/* ============================================================
KEYWORD HIGHLIGHTS
Two treatments only, chosen against measured contrast:
.kw sand block BEHIND navy text -> 7.89:1, passes AAA.
For cream grounds.
.kwg light sand text WITH a glow -> only where the ground is
dark (hero photo, navy band). Sand as lettering on cream
measures 1.90:1 and fails, so .kwg must never be used there.
Both follow the file's existing philosophy: the highlight is drawn
by default, and .js is what hides it so it can animate in. If the
script never runs, the highlight is simply already there.
============================================================ */
/* Both use an animated background-image rather than a positioned bar.
display:inline-block would make the span atomic and open a line-break
beside it, which orphaned the colon after the hero keyword. Inline plus
a background also means the bar follows the text across a wrap. */
.kw{display:inline;color:var(--ink);padding:0 .14em;
border-radius:5px;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
background-image:linear-gradient(var(--sand),var(--sand));
background-repeat:no-repeat;background-position:left center;
background-size:100% 78%}
.js .kw{background-size:0% 78%}
.js .kw.lit{background-size:100% 78%;
transition:background-size .8s cubic-bezier(.22,1,.36,1) .15s}
/* On a photograph the letters stay white and only the bar is sand.
See the note in SESSION-NOTES.md for the measured numbers. */
.kwg.on-photo{color:#fff}
.kwg{display:inline;color:var(--sand-2);padding-bottom:.06em;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
background-image:linear-gradient(var(--sand-2),var(--sand-2));
background-repeat:no-repeat;background-position:left 92%;
background-size:100% 4px}
.js .kwg{background-size:0% 4px}
.js .kwg.lit{background-size:100% 4px;
transition:background-size .95s cubic-bezier(.22,1,.36,1) .15s}
.js .kwg.lit{animation:kwGlow 3.6s ease-in-out 1.2s infinite alternate}
@keyframes kwGlow{
0%{text-shadow:0 1px 3px rgba(0,0,0,.45)}
100%{text-shadow:0 1px 3px rgba(0,0,0,.45),0 0 20px rgba(220,205,184,.7),
0 0 44px rgba(199,178,154,.42)}
}
@media (prefers-reduced-motion:reduce){
.js .kw{background-size:100% 78%!important;transition:none!important}
.js .kw.on-sand{background-size:100% 5px!important}
.js .kwg{background-size:100% 4px!important;transition:none!important}
.js .kwg.lit{animation:none!important}
}
/* ============================================================
TRUST STRIP
Five labels on the sand band under the hero. With JS, five bubbles
fly in from around the page, line up, the label appears inside,
the bubble pops and the label zooms in and settles.
The labels are drawn by default: no JS, or reduced motion, shows the
finished strip immediately.
Every label is a fact from the client's own site. The reference bar
carries "satisfaction guaranteed" and "5 star rating"; neither is
evidenced for Big Easy, so neither is here.
============================================================ */
.trust{background:var(--navy);position:relative;z-index:5;
padding:22px 0} /* navy is only the fallback under the footage */
/* the footage, in its natural colour: no scrim, no tint */
.trust-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.trust-bg video,.trust-bg img{width:100%;height:100%;object-fit:cover;
object-position:center 45%;display:block}
.trust .wrap{position:relative;z-index:2}
/* ============================================================
AMBIENT BUBBLES, shared by both sand sections
Same glass as the intro's bubbles. A clipped layer under each
section's content; the script mounts one on .trust and one on
.proc and sets --travel to the section's height.
============================================================ */
.amb{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;
--travel:400px}
.amb i{position:absolute;left:var(--x);bottom:var(--y);width:var(--s);height:var(--s);
border-radius:50%;opacity:0;
background:radial-gradient(circle at 32% 28%,
rgba(255,255,255,.92) 0%,rgba(255,255,255,.34) 38%,
rgba(255,255,255,.07) 62%,rgba(255,255,255,.16) 100%);
box-shadow:inset 0 0 7px rgba(255,255,255,.75),
0 0 0 1px rgba(116,168,204,.28),
0 2px 9px rgba(0,0,0,.12);
animation:ambRise var(--fd) linear var(--fdelay) infinite}
@keyframes ambRise{
0%{opacity:0;transform:translate3d(0,0,0) scale(.45)}
9%{opacity:var(--o)}
85%{opacity:var(--o)}
100%{opacity:0;transform:translate3d(var(--drift),calc(-1 * var(--travel)),0) scale(1)}
}
.proc{position:relative}
.proc .wrap{position:relative;z-index:1}
.trust-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
justify-content:center}
.tr-item{position:relative;flex:1 1 140px;min-height:224px;
display:flex;align-items:center;justify-content:center;
padding:20px 6px;text-align:center}
.tr-txt{position:relative;z-index:2;font-family:var(--serif);
font-size:1.06rem;font-weight:400;letter-spacing:0;line-height:1.25;
text-transform:none;color:#fff;max-width:150px;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
transform-origin:center}
.tr-txt::before{content:"\2713";color:var(--sand-2);font-size:.95em}
/* the review lockup: stars, the client's claim, platform badges */
.tr-rating{flex:0 0 auto;min-width:200px}
.tr-rating .tr-bub{width:162px;height:162px;margin:-81px 0 0 -81px}
.tr-txt-rating{flex-direction:column;gap:5px;letter-spacing:0;
text-transform:none;max-width:150px}
.tr-txt-rating::before{content:none}
.tr-stars{color:var(--sand-2);font-size:1rem;letter-spacing:.14em;line-height:1;
margin-right:-.14em}
.tr-r1{font-family:var(--serif);font-size:1rem;font-weight:400;
letter-spacing:0;text-transform:none;color:#fff}
.tr-badges{display:inline-flex;align-items:center;gap:6px}
.badge{display:inline-flex;align-items:center;background:#fff;border-radius:999px;
padding:3px 9px;font-weight:700;font-size:.76rem;line-height:1.2;
letter-spacing:0;text-transform:none}
.badge i{font-style:normal}
.badge.g i:nth-child(1){color:#4285F4}.badge.g i:nth-child(2){color:#EA4335}
.badge.g i:nth-child(3){color:#FBBC05}.badge.g i:nth-child(4){color:#4285F4}
.badge.g i:nth-child(5){color:#34A853}.badge.g i:nth-child(6){color:#EA4335}
.badge.fb{color:#1877F2;text-transform:lowercase}
.tr-badges small{font-size:.74rem;font-weight:600;color:var(--ink);
letter-spacing:.06em;text-transform:uppercase} /* ink: body was 3.85:1 on sand */
/* the bubble, same glass as the intro */
/* The intro's glass: white rim and highlights, which is what reads on
a dark ground. */
.tr-bub{position:absolute;left:50%;top:50%;width:148px;height:148px;
margin:-74px 0 0 -74px;border-radius:50%;pointer-events:none;z-index:1;
background:
radial-gradient(circle at 50% 50%,
rgba(255,255,255,0) 60%,rgba(255,255,255,.26) 82%,
rgba(255,255,255,.88) 94%,rgba(255,255,255,.6) 98.5%,
rgba(255,255,255,0) 100%),
radial-gradient(circle at 34% 28%,
rgba(255,255,255,.58) 0%,rgba(255,255,255,.2) 34%,
rgba(163,209,238,.16) 64%,rgba(255,255,255,.1) 100%),
radial-gradient(circle at 50% 55%,
rgba(4,34,61,.42) 0%,rgba(4,34,61,.26) 38%,rgba(4,34,61,0) 64%);
border:1px solid rgba(255,255,255,.6);
box-shadow:inset 0 0 30px rgba(255,255,255,.5),
inset 16px 18px 42px rgba(255,255,255,.4),
inset -18px -22px 52px rgba(96,150,190,.3),
0 18px 40px rgba(0,0,0,.35)}
/* ground shadow, so it sits on the band rather than floating in it */
.tr-bub::after{content:"";position:absolute;left:16%;right:16%;bottom:-11px;
height:14px;border-radius:50%;
background:radial-gradient(ellipse,rgba(0,0,0,.4),rgba(0,0,0,0) 70%)}
.tr-drops{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none}
.tr-drops i{position:absolute;left:0;top:0;width:9px;height:9px;
border-radius:50%;opacity:0;
background:radial-gradient(circle at 34% 30%,
rgba(255,255,255,.98),rgba(255,255,255,.45));
box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.tr-bub i{position:absolute;left:19%;top:13%;width:25%;height:17%;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.98),rgba(255,255,255,0) 70%)}
/* with JS, bubbles and labels wait for the reveal */
.js .trust:not(.go) .tr-txt,.js .trust:not(.go) .tr-bub{opacity:0}
.tr-item{--fx:-30vw;--fy:-40vh} /* defaults; the script randomises them */
.trust.go .tr-bub{
animation:trFly 1.15s cubic-bezier(.2,.8,.25,1) var(--d) both,
trPop .4s cubic-bezier(.3,0,.6,1) calc(2.15s + var(--d)) forwards}
/* the original pop, minus the fade: it swells and STAYS at 1.24x */
@keyframes trPop{
0%{opacity:1;transform:scale(1)}
55%{opacity:.72;transform:scale(1.14)}
100%{opacity:1;transform:scale(1.18)}
}
.trust.go .tr-drops i{animation:dropBurst .5s ease-out calc(2.15s + var(--d)) forwards}
.trust.go .tr-txt{animation:trText 2.9s cubic-bezier(.2,.8,.25,1) var(--d) both}
/* in from a random point on the page, as originally built */
@keyframes trFly{
0%{opacity:0;transform:translate3d(var(--fx),var(--fy),0) scale(.35)}
18%{opacity:1}
100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
/* the label: invisible while the bubble flies, small inside it, then
zooms IN on the pop and settles back OUT to its real size */
/* as originally built: hidden while the bubble flies, small inside it,
zooms IN on the pop, settles OUT to full size */
@keyframes trText{
0%,42%{opacity:0;transform:scale(.5)}
55%{opacity:1;transform:scale(.62)}
74%{opacity:1;transform:scale(.62)}
82%{opacity:1;transform:scale(1.55)}
100%{opacity:1;transform:scale(1)}
}
@media (max-width:700px){
.tr-item{flex:1 1 46%;min-height:184px;padding:12px 4px}
.tr-rating{flex:1 1 100%;min-height:196px}
.tr-txt{font-size:.92rem;max-width:118px;gap:6px}
.tr-bub{width:126px;height:126px;margin:-63px 0 0 -63px}
.tr-rating .tr-bub{width:140px;height:140px;margin:-70px 0 0 -70px}
}
/* ============================================================
HOW WE WORK
Left: the step numeral rises inside a bubble, the bubble pops and
releases it. Right: the step copy slides in from the right, the
outgoing pane slides off left. Auto-plays, pauses on hover or focus,
never auto-plays under reduced motion.
============================================================ */
.proc{background:var(--sand);color:var(--ink);padding:54px 0 40px} /* was 88 / 96 */
.proc .eyeb{color:var(--navy)}
.proc h2{color:var(--ink)}
/* on a sand ground a sand block vanishes and light-sand lettering
fails, so here the keyword takes a WHITE UNDERLINE that sweeps in.
Letters stay ink (7.59:1 on sand). */
.kw.on-sand{color:var(--ink);padding:0 .04em;
background-image:linear-gradient(#fff,#fff);
background-position:left 94%;background-size:100% 5px}
.js .kw.on-sand{background-size:0% 5px}
.js .kw.on-sand.lit{background-size:100% 5px;
transition:background-size .9s cubic-bezier(.22,1,.36,1) .15s}
.pp{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;
align-items:center;margin-top:30px}
.pp-left{text-align:center}
.pp-stage{position:relative;display:inline-block;padding:26px 34px}
.pp-num{display:block;position:relative;z-index:2;
font-family:var(--serif);font-weight:600;
font-size:clamp(7rem,15vw,12rem);line-height:.86;letter-spacing:-.02em;
color:transparent;
background:url(../img/hero-mag-3.jpg) center/cover;
-webkit-background-clip:text;background-clip:text;
-webkit-text-stroke:1.5px rgba(4,34,61,.55)}
.js .pp-stage:not(.play) .pp-num{opacity:0}
.pp-bub{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;
width:min(300px,66vw);aspect-ratio:1;border-radius:50%;opacity:0;
transform:translate(-50%,-50%);
/* same glass as the trust strip: tinted core and a hard rim, so it
reads on a flat sand ground */
background:
radial-gradient(circle at 50% 50%,
rgba(255,255,255,0) 58%,rgba(255,255,255,.3) 80%,
rgba(255,255,255,.96) 93%,rgba(255,255,255,.5) 98%,
rgba(255,255,255,0) 100%),
radial-gradient(circle at 34% 28%,
rgba(255,255,255,.72) 0%,rgba(255,255,255,.24) 30%,
rgba(4,34,61,.05) 60%,rgba(4,34,61,.16) 100%);
border:1px solid rgba(255,255,255,.85);
box-shadow:inset 0 0 22px rgba(255,255,255,.5),
inset -16px -20px 44px rgba(4,34,61,.14),
0 18px 36px rgba(36,36,36,.18)}
.pp-bub i{position:absolute;left:19%;top:13%;width:25%;height:17%;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.98),rgba(255,255,255,0) 70%)}
.pp-drops{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none}
.pp-drops i{position:absolute;left:0;top:0;width:11px;height:11px;
border-radius:50%;opacity:0;
background:radial-gradient(circle at 34% 30%,
rgba(255,255,255,.98),rgba(255,255,255,.42));
box-shadow:0 0 0 1px rgba(4,34,61,.18)}
.pp-stage.play .pp-bub{
animation:ppBubIn .8s cubic-bezier(.2,.8,.25,1) both,
ppBubPop .38s cubic-bezier(.3,0,.6,1) 1s forwards}
.pp-stage.play .pp-num{animation:ppNumIn 1.55s cubic-bezier(.2,.8,.25,1) both}
.pp-stage.play .pp-drops i{animation:dropBurst .5s ease-out 1s forwards}
@keyframes ppBubIn{
0%{opacity:0;transform:translate(-50%,-50%) translateY(150px) scale(.35)}
25%{opacity:1}
100%{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}
}
@keyframes ppBubPop{
0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
55%{opacity:.6;transform:translate(-50%,-50%) scale(1.16)}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.34)}
}
/* rides up inside the bubble small, then springs to full size on the pop */
@keyframes ppNumIn{
0%{opacity:0;transform:translateY(150px) scale(.3)}
22%{opacity:1;transform:translateY(64px) scale(.45)}
52%{opacity:1;transform:translateY(0) scale(.5)}
64%{transform:translateY(0) scale(.5)}
76%{transform:scale(1.14)}
100%{transform:scale(1)}
}
.pp-tag{font-family:var(--sans);font-size:.72rem;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:var(--navy);
margin:18px 0 22px}
.pp-dots{display:flex;justify-content:center;gap:12px}
.pp-dots button{position:relative;width:42px;height:42px;border-radius:50%;
border:1px solid rgba(4,34,61,.45);background:rgba(255,255,255,.4);
color:var(--navy);font-family:var(--sans);font-weight:600;
font-size:.74rem;cursor:pointer;
transition:background .3s,color .3s,border-color .3s,transform .3s}
.pp-dots button:hover,.pp-dots button:focus-visible{border-color:var(--navy);
background:#fff}
.pp-dots button.on{background:var(--navy);border-color:var(--navy);
color:#fff;transform:scale(1.12)}
.pp-dots button.on::before,.pp-dots button.on::after{content:"";
position:absolute;inset:-1px;border-radius:50%;
border:1px solid rgba(4,34,61,.55);animation:ppRipple 2s ease-out infinite}
.pp-dots button.on::after{animation-delay:1s}
@keyframes ppRipple{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.pp-hint{font-family:var(--sans);font-size:.7rem;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
opacity:.85;margin:18px 0 0}
.pp-right{position:relative}
.pp-pane{position:absolute;inset:0;opacity:0;transform:translateX(46px);
transition:opacity .55s,transform .65s cubic-bezier(.16,1,.3,1);
pointer-events:none}
.pp-pane.on{position:relative;opacity:1;transform:none;pointer-events:auto;
transition-delay:.12s}
.pp-pane.out{transform:translateX(-36px)}
.pp-step{font-family:var(--sans);font-size:.7rem;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;color:var(--navy);
margin:0 0 12px}
.pp-pane h3{font-family:var(--serif);font-weight:400;color:var(--ink);
font-size:clamp(1.55rem,2.7vw,2.2rem);line-height:1.15;margin:0 0 16px}
/* ink, not the body grey: body grey is 3.85:1 on sand */
.pp-pane p{color:var(--ink);font-size:1.08rem;line-height:1.7;
max-width:560px;margin:0}
@media (max-width:900px){
.pp{grid-template-columns:1fr;gap:40px}
.pp-num{font-size:clamp(5.5rem,26vw,8rem)}
.pp-pane p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
.js .trust .tr-txt{opacity:1!important;animation:none!important;
transform:none!important}
.trust .tr-bub{opacity:1!important;animation:none!important;
transform:scale(1.18)!important;filter:none!important}
.trust .tr-drops,.amb{display:none!important}
.js .pp-stage .pp-num{opacity:1!important;animation:none!important;
transform:none!important}
.pp-bub,.pp-drops,.pp-dots button.on::before,.pp-dots button.on::after{
display:none!important}
.pp-pane{transition:none!important}
}
/* ============================================================
REVIEWS, the spotlight
One review at a time in large type; the reviewer's initials ride
in a glass bubble that pops on every change. Tiles below jump to a
reviewer; pills filter by the tag the client's site gives each one.
============================================================ */
.revs-sec{background:var(--hero-bg)}
.rv-head{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end;
justify-content:space-between}
.rv-head .lead{margin:0}
.rv-rating{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
padding:16px 20px;background:#fff;border:1px solid var(--line);
border-radius:var(--r)}
.rv-rating .tr-stars{color:#8A5E10}
.rv-rating .tr-r1{color:var(--ink)}
.revs-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.rtab{font-family:var(--sans);font-size:.8rem;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
background:#fff;border:1.5px solid var(--line);border-radius:999px;
padding:12px 20px;cursor:pointer;transition:.22s ease}
.rtab b{font-weight:600;color:var(--body);margin-left:7px}
.rtab:hover,.rtab:focus-visible{border-color:var(--sand);background:var(--cream-2)}
.rtab[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.rtab[aria-pressed="true"] b{color:var(--sand-2)}
/* ---- the spotlight ---- */
.spot{display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;
align-items:center;margin-top:36px;background:#fff;border:1px solid var(--line);
border-radius:var(--r);padding:44px 48px}
.spot-left{text-align:center}
.spot-stage{position:relative;width:220px;height:220px;margin:0 auto 18px}
.spot-bub{position:absolute;inset:0;border-radius:50%;opacity:0;pointer-events:none;
background:
radial-gradient(circle at 50% 50%,
rgba(255,255,255,0) 58%,rgba(255,255,255,.3) 80%,
rgba(255,255,255,.96) 93%,rgba(255,255,255,.5) 98%,
rgba(255,255,255,0) 100%),
radial-gradient(circle at 34% 28%,
rgba(255,255,255,.72) 0%,rgba(255,255,255,.24) 30%,
rgba(4,34,61,.05) 60%,rgba(4,34,61,.16) 100%);
border:1px solid rgba(255,255,255,.85);
box-shadow:inset 0 0 18px rgba(255,255,255,.5),
inset -12px -14px 30px rgba(4,34,61,.14),
0 16px 34px rgba(36,36,36,.16)}
.spot-bub i{position:absolute;left:19%;top:13%;width:25%;height:17%;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.98),rgba(255,255,255,0) 70%)}
.spot-drops{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none}
.spot-drops i{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;
opacity:0;background:radial-gradient(circle at 34% 30%,
rgba(255,255,255,.98),rgba(255,255,255,.42));
box-shadow:0 0 0 1px rgba(4,34,61,.18)}
.spot-ini{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
font-family:var(--serif);font-weight:600;font-size:3.2rem;letter-spacing:.02em;
color:var(--navy)}
/* the reviewer's photograph sits in the bubble; the initials wait beneath it
and show only if the photograph fails to load */
.spot-ini b,.spot-face{grid-area:1/1}
.spot-face{position:relative;z-index:1;width:144px;height:144px;border-radius:50%;
object-fit:cover;display:block;background:var(--hero-bg);
border:3px solid #fff;box-shadow:0 8px 24px rgba(36,36,36,.22)}
.spot-face.bad,.rv-tile .mono img.bad{display:none}
.js .spot-stage:not(.play) .spot-ini{opacity:0}
.spot-stage.play .spot-bub{
animation:ppBubIn .8s cubic-bezier(.2,.8,.25,1) both,
ppBubPop .38s cubic-bezier(.3,0,.6,1) 1s forwards}
.spot-stage.play .spot-ini{animation:ppNumIn 1.55s cubic-bezier(.2,.8,.25,1) both}
.spot-stage.play .spot-drops i{animation:dropBurst .5s ease-out 1s forwards}
.spot-left .s{display:inline-flex;gap:6px;color:#8A5E10;font-size:1.2rem;line-height:1}
.spot-left .s i{font-style:normal}
.spot-right{position:relative;min-height:300px}
.spot-pane{position:absolute;inset:0;opacity:0;transform:translateX(40px);
transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.spot-pane.on{position:relative;opacity:1;transform:none;pointer-events:auto;
transition-delay:.12s}
.spot-pane.out{transform:translateX(-32px)}
.spot-pane .q{position:absolute;left:-14px;top:-42px;font-family:var(--serif);
font-weight:600;font-size:7rem;line-height:.6;color:var(--sand);opacity:.9;
pointer-events:none}
.spot-pane p{position:relative;font-family:var(--serif);font-weight:300;
font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.5;color:var(--ink);margin:0 0 22px}
/* The name and "verified client" share the first line; the service tag sits on
its own line beneath them. A grid rather than a wrapping flex row, so the tag
is only as wide as its words instead of filling the line. */
.spot-pane .who{display:grid;grid-template-columns:auto auto;justify-content:start;
align-items:center;gap:4px 12px}
.spot-pane .who b{font-family:var(--sans);font-size:1.02rem;font-weight:600;color:var(--ink)}
.spot-pane .who small{font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--body)}
/* display is reset because the services band styles .cat as a grid, and that
rule would otherwise stretch this tag to the band's column widths */
.spot-pane .cat{display:inline-block;grid-column:1 / -1;justify-self:start;
font-family:var(--sans);font-size:.6rem;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
background:var(--hero-bg);border:1px solid rgba(199,178,154,.6);
border-radius:999px;padding:4px 9px}
.spot-ctl{display:flex;align-items:center;gap:10px;margin-top:18px}
.spot-ctl .mag-btn{position:static;border-color:var(--line);background:#fff;color:var(--navy)}
.spot-ctl .mag-btn:hover,.spot-ctl .mag-btn:focus-visible{background:var(--navy);color:#fff;
border-color:var(--navy)}
.spot-hint{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--body);margin:0 0 0 8px}
/* ---- the tiles: one per reviewer, jump on click ---- */
.rv-tiles{list-style:none;margin:22px 0 0;padding:0;display:grid;
grid-template-columns:repeat(7,1fr);gap:10px}
.rv-tiles li[hidden]{display:none}
.rv-tile{width:100%;display:flex;align-items:center;gap:10px;text-align:left;
background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;
cursor:pointer;font-family:var(--sans);transition:.22s ease}
.rv-tile:hover,.rv-tile:focus-visible{border-color:var(--sand);background:var(--cream-2)}
.rv-tile[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.rv-tile .mono{flex:0 0 auto;width:40px;height:40px;border-radius:50%;
background:var(--hero-bg);border:1px solid var(--sand);color:var(--navy);
font-weight:600;font-size:.74rem;letter-spacing:.04em;display:grid;place-items:center;
position:relative;overflow:hidden}
.rv-tile .mono img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rv-tile b{display:block;font-size:.84rem;font-weight:600;color:var(--ink);line-height:1.2}
.rv-tile small{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--body);margin-top:2px}
@media (max-width:1100px){.rv-tiles{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){
.spot{grid-template-columns:1fr;gap:26px;padding:30px 24px}
.spot-right{min-height:0}
.spot-pane .q{left:-6px;top:-30px;font-size:5rem}
}
@media (max-width:700px){
.rv-tiles{grid-template-columns:1fr 1fr}
.rv-head{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
.js .spot-stage .spot-ini{opacity:1!important;animation:none!important;transform:none!important}
.spot-bub,.spot-drops{display:none!important}
.spot-pane{transition:none!important}
}
/* ============================================================
BEFORE AND AFTER GALLERY
Sample photographs for layout review; see the markup note.
============================================================ */
.gal{background:#E9DDCB} /* a shade of brown under the gallery, a step darker than the hero wash */
.gal .eyeb{color:var(--navy)}
.gal-note{font-size:.92rem;color:var(--body);margin:14px 0 0;
padding:10px 14px;border-left:3px solid var(--sand);background:var(--cream-2);
border-radius:0 10px 10px 0;display:inline-block}
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.ba{margin:0;--pos:50%;--slant:9%} /* divider is 18% of the width off-vertical */
.ba-frame{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
background:var(--cream-2);border:1px solid var(--line);
box-shadow:0 18px 44px rgba(36,36,36,.10);cursor:ew-resize;
-webkit-user-select:none;user-select:none}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
display:block;pointer-events:none}
.ba-before{clip-path:polygon(0 0,calc(var(--pos) + var(--slant)) 0,
calc(var(--pos) - var(--slant)) 100%,0 100%)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;
pointer-events:none;z-index:2}
.ba-handle::before{content:"";position:absolute;top:-6%;bottom:-6%;left:-1.5px;width:3px;
background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18);
transform:skewX(-13.5deg)} /* matches the clip on a 4:3 frame */
.ba-handle span{position:absolute;left:50%;top:50%;width:46px;height:46px;
margin:-23px 0 0 -23px;border-radius:50%;background:var(--navy);
border:2px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.3);
display:grid;place-items:center;color:#fff;font-size:18px;line-height:1}
.ba-tag{position:absolute;top:14px;z-index:2;pointer-events:none;
font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:#fff;background:rgba(4,34,61,.82);
border-radius:999px;padding:7px 12px}
.ba-tag-b{left:14px}
.ba-tag-a{right:14px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;
opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none}
.ba-frame:focus-within{outline:3px solid var(--sand);outline-offset:3px}
.ba figcaption{font-family:var(--sans);font-size:.9rem;font-weight:600;
color:var(--ink);margin:14px 4px 0;display:flex;align-items:center;gap:10px}
.ba figcaption::before{content:"";width:22px;height:3px;border-radius:3px;
background:var(--sand)}
@media (max-width:1000px){.ba-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
.ba-grid{grid-template-columns:1fr}
.tr-rating{order:10} /* phones: rating bubble last, no orphan label */
}
/* ============================================================
HOW WE WORK, the filling row
Card photographs slide in from the right one after another and the
descriptions follow beneath. Off-canvas starts are safe because
body has overflow-x:clip.
============================================================ */
.steps-fill{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.sf{background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.75);
border-radius:var(--r);overflow:hidden;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sf-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.sf-img img,.sf-img video{width:100%;height:100%;object-fit:cover;display:block}
.sf-n{position:absolute;left:14px;bottom:10px;font-family:var(--serif);
font-weight:600;font-size:2.3rem;line-height:1;color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.5),0 0 2px rgba(0,0,0,.6)}
.sf-body{padding:20px 22px 24px}
.sf-body .pp-step{margin-bottom:8px}
.sf h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;line-height:1.25;
color:var(--ink);margin:0 0 10px}
.sf p{color:var(--ink);font-size:.95rem;line-height:1.6;margin:0}
/* fill from the right, in order */
.js .sf{opacity:0;transform:translateX(110vw)}
.js .steps-fill.go .sf{opacity:1;transform:none;
transition:transform 1s cubic-bezier(.2,.8,.25,1),opacity .45s ease}
.js .steps-fill.go .sf:nth-child(2){transition-delay:1s}
.js .steps-fill.go .sf:nth-child(3){transition-delay:2s}
.js .steps-fill.go .sf:nth-child(4){transition-delay:3s}
/* the description comes up at the bottom once its photograph has landed */
.js .sf .sf-body{opacity:0;transform:translateY(14px)}
.js .steps-fill.go .sf .sf-body{opacity:1;transform:none;
transition:opacity .5s ease,transform .5s ease}
.js .steps-fill.go .sf:nth-child(1) .sf-body{transition-delay:.8s}
.js .steps-fill.go .sf:nth-child(2) .sf-body{transition-delay:1.8s}
.js .steps-fill.go .sf:nth-child(3) .sf-body{transition-delay:2.8s}
.js .steps-fill.go .sf:nth-child(4) .sf-body{transition-delay:3.8s}
@media (max-width:1000px){.steps-fill{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.steps-fill{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
.js .sf,.js .sf .sf-body{opacity:1!important;transform:none!important;
transition:none!important}
}
/* two buttons under the row, up once the last description has landed */
.sf-cta{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.js .sf-cta{opacity:0;transform:translateY(12px)}
.js .steps-fill.go+.sf-cta{opacity:1;transform:none;
transition:opacity .5s ease 4.3s,transform .5s ease 4.3s}
@media (prefers-reduced-motion:reduce){
.js .sf-cta{opacity:1!important;transform:none!important;transition:none!important}
}
/* ============================================================
SERVICES IN TWO CATEGORIES
A photograph band per category with compact cards beside it; the
second band mirrors the first. Bathroom Safety has a slim strip.
============================================================ */
.cat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;
align-items:stretch;margin-top:34px}
.cat.flip .cat-hero{order:2}
.cat-hero{position:relative;border-radius:var(--r);overflow:hidden;min-height:380px;
background:var(--cream-2)}
.cat-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-cap{position:absolute;left:0;right:0;bottom:0;padding:120px 28px 28px;color:#fff;
background:linear-gradient(to top,rgba(4,34,61,.9) 0%,rgba(4,34,61,.72) 45%,rgba(4,34,61,0) 100%)}
.cat-cap .eyeb{color:var(--sand-2);margin-bottom:8px}
.cat-cap h3{font-family:var(--serif);font-weight:400;font-size:2.4rem;line-height:1;
margin:0 0 10px;color:#fff}
.cat-cap p{margin:0;font-size:1rem;line-height:1.5;color:#fff;max-width:36ch}
.cat-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:stretch}
.cat.flip .cat-list{grid-template-columns:1fr}
.mini{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);
border-radius:16px;padding:12px 16px 12px 12px;text-decoration:none;color:var(--ink);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.mini:hover,.mini:focus-visible{border-color:var(--sand);transform:translateY(-3px);
box-shadow:0 14px 30px rgba(20,20,20,.1)}
.mini img{width:82px;height:66px;object-fit:cover;border-radius:10px;flex:0 0 auto;
background:var(--cream-2)}
.mini-t{flex:1;min-width:0}
.mini h4{font-family:var(--serif);font-weight:400;font-size:1.1rem;line-height:1.2;
margin:0 0 4px;color:var(--ink)}
.mini p{font-size:.86rem;line-height:1.45;color:var(--body);margin:0}
.mini-go{flex:0 0 auto;color:var(--navy);font-size:1.1rem;transition:transform .22s ease}
.mini:hover .mini-go{transform:translateX(4px)}
/* a real photograph (Unsplash, no people) behind a frosted panel; the
buttons live inside the box */
.safe{display:flex;align-items:center;justify-content:center;text-align:center;margin-top:24px;
position:relative;overflow:hidden;border-radius:var(--r);min-height:330px;padding:34px 26px;
background-color:#DCCDB8;color:var(--ink)}
/* the photograph is the Home page's own field, so it is an ![]()
filling the box */
.safe>.safe-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;z-index:0}
.safe .eyeb{color:var(--navy)}
.safe-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.safe img{width:190px;height:120px;object-fit:cover;border-radius:12px;flex:0 0 auto}
.safe-t{position:relative;z-index:1;flex:0 1 auto;width:100%;max-width:64ch;background:rgba(248,246,242,.92);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--r);padding:26px 30px 28px}
.safe-t .eyeb{display:block;margin-bottom:6px}
.safe h3{font-family:var(--serif);font-weight:400;font-size:2.3rem;line-height:1.05;margin:0 0 10px}
.safe p{margin:0;font-size:1.05rem;line-height:1.55;color:var(--ink)}
@media (max-width:900px){
.cat{grid-template-columns:1fr;gap:16px}
.cat.flip .cat-hero{order:0}
.cat-hero{min-height:250px}
.cat-cap{padding:80px 22px 22px}
.cat-cap h3{font-size:2rem}
.cat-list{grid-template-columns:1fr}
.safe{padding:22px 14px;min-height:0}
.safe-t{padding:20px 16px 22px}
}
@media (prefers-reduced-motion:reduce){
.mini,.safe,.mini-go{transition:none!important}
}
/* ============================================================
SERVICE AREAS, the water map
The idea is a coverage map (pins on a stylised regional map, a
vehicle on the routes, seen in another mockup); the theme is the
bathroom: tiled land, water for the lake and river, a navy pipe
carrying flowing water to the seven areas, a drop travelling the
route, markers that ripple. Map markers and the list light each
other up. The list is the keyboard and screen-reader route.
============================================================ */
.am-sec{background:var(--cream-2);padding-top:56px;padding-bottom:56px}
.am-sec .eyeb{color:var(--navy)}
#newsletter{padding:56px 0 48px} /* the gap into the areas band was the two paddings added up */
/* the heading runs the full width; under it the map card (left) stretches
to the height of the list (right), and the script extends the map's
viewBox to fill the taller box */
.am-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);grid-template-areas:"head head" "map side";
gap:22px 48px;align-items:stretch}
.am-head{grid-area:head;margin:0 0 6px;max-width:none} /* the heading runs the full width of the band */
.am-card{grid-area:map;display:flex;flex-direction:column}
.am-side{grid-area:side;align-self:start}
.am-lede{margin:14px 0 0;max-width:46ch;font-size:1.02rem}
/* the card: a pale tile, the map inset */
.am-card{position:relative;background:#FBF8F3;border:1px solid rgba(199,178,154,.55);border-radius:var(--r);
padding:18px 18px 14px;box-shadow:0 24px 60px rgba(36,36,36,.16)}
.am-prompt{display:flex;align-items:baseline;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;margin:0 2px 12px}
.am-prompt .eyeb{margin:0}
.am-prompt strong{font-family:var(--serif);font-weight:500;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em}
.am-stage{position:relative;flex:1 0 auto;aspect-ratio:1000/640} /* the aspect is a minimum; the card's height can stretch it */
.am-zoom .am-stage{aspect-ratio:770/470} /* the script's phone viewBox */
.am-map{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:14px;overflow:hidden}
.am-water{fill:#CFE0EA}
.am-waves path{fill:none;stroke:rgba(4,34,61,.16);stroke-width:2;stroke-linecap:round;animation:amWave 5s linear infinite}
.am-waves path:nth-child(2){animation-duration:6.5s;animation-direction:reverse;stroke:rgba(4,34,61,.12)}
.am-waves path:nth-child(3){animation-duration:7.5s}
@keyframes amWave{to{transform:translateX(-60px)}}
.am-river{fill:none;stroke:#CFE0EA;stroke-width:16;stroke-linecap:round}
.am-wlabel{font-family:var(--serif);font-style:italic;font-size:19px;fill:rgba(4,34,61,.62);text-anchor:middle}
.am-wlabel.am-small{font-size:16px}
.am-wlabel.am-home{font-family:var(--sans);font-style:normal;font-weight:600;font-size:17px;fill:var(--navy);text-anchor:start}
.am-pipe{fill:none;stroke:var(--navy);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.am-flow{fill:none;stroke:#BFDDF0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:10 14;animation:amFlow 1.5s linear infinite}
@keyframes amFlow{to{stroke-dashoffset:-24}}
.am-flow.am-lag{animation-delay:-.7s} /* the Northshore branch runs out of step with the trunk */
.am-ring{fill:none;stroke:var(--navy);stroke-width:2}
.am-core{fill:var(--navy);stroke:#fff;stroke-width:3;transform-box:fill-box;transform-origin:center;transition:transform .25s ease}
.am-dot.hot .am-core{transform:scale(1.4)}
.am-drop{filter:drop-shadow(0 3px 4px rgba(4,34,61,.35))}
/* labels over the map, real links; the pointer is a rotated square */
.am-pin{position:absolute;left:var(--px);top:var(--py);z-index:2;transform:translate(-50%,calc(-100% - 15px));
display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;
background:#fff;color:var(--navy);text-decoration:none;font-family:var(--sans);font-size:.9rem;font-weight:600;
line-height:1;white-space:nowrap;border:1px solid rgba(4,34,61,.2);box-shadow:0 8px 20px rgba(4,34,61,.14);
transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.am-pin b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;
font-size:.64rem;font-weight:700;letter-spacing:.04em;transition:background .2s ease,color .2s ease}
.am-pin::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:#fff;
border-right:1px solid rgba(4,34,61,.2);border-bottom:1px solid rgba(4,34,61,.2);transform:translateX(-50%) rotate(45deg);
transition:background .2s ease}
.am-pin.am-r{transform:translate(16px,-50%)}
.am-pin.am-r::after{left:-6px;bottom:auto;top:50%;transform:translateY(-50%) rotate(135deg)}
.am-pin.am-l{transform:translate(calc(-100% - 16px),-50%)}
.am-pin.am-l::after{left:auto;right:-6px;bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}
.am-pin:hover,.am-pin.hot{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 12px 26px rgba(4,34,61,.3)}
.am-pin:hover b,.am-pin.hot b{background:#fff;color:var(--navy)}
.am-pin:hover::after,.am-pin.hot::after{background:var(--navy);border-color:var(--navy)}
.am-note{display:flex;align-items:center;gap:8px;margin:12px 2px 0;font-size:.88rem;color:var(--body)}
.am-note svg{flex:0 0 auto}
/* the list: numeral, city, parish, arrow */
.am-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.am-row{display:flex;align-items:center;gap:14px;padding:9px 16px 9px 10px;border-radius:16px;background:#fff;
border:1px solid rgba(199,178,154,.5);text-decoration:none;color:var(--ink);transition:.2s ease}
.am-row b{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--navy);
color:#fff;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.06em;transition:.2s ease}
.am-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.am-city{font-family:var(--serif);font-size:1.16rem;font-weight:500;line-height:1.1;letter-spacing:-.01em}
.am-row small{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);transition:.2s ease}
.am-row i{margin-left:auto;font-style:normal;font-size:1.1rem;color:var(--navy);transition:.2s ease}
.am-row:hover,.am-row:focus-visible,.am-row.hot{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateX(4px)}
.am-row:hover b,.am-row:focus-visible b,.am-row.hot b{background:#fff;color:var(--navy)}
.am-row:hover small,.am-row:focus-visible small,.am-row.hot small{color:var(--sand-2)}
.am-row:hover i,.am-row:focus-visible i,.am-row.hot i{color:#fff;transform:translateX(3px)}
.am-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:22px}
@media (max-width:900px){
.am-grid{grid-template-columns:1fr;grid-template-areas:"head" "map" "side";gap:24px}
.am-head{margin:0}
}
@media (max-width:700px){
/* phones: the labels become numbered dots on the markers; the list
carries the names */
.am-pin,.am-pin.am-r,.am-pin.am-l{padding:2px;gap:0;transform:translate(-50%,-50%)}
.am-pin span{display:none}
.am-pin::after{display:none}
.am-pin b{width:24px;height:24px;font-size:.66rem}
.am-wlabel{font-size:26px}
.am-wlabel.am-small{font-size:22px}
.am-wlabel.am-home{font-size:24px}
.am-pipe{stroke-width:9}
.am-flow{stroke-width:3.5}
.am-card{padding:14px 14px 12px}
.am-prompt strong{font-size:1rem}
.am-city{font-size:1.06rem}
}
/* around town (area pages): the live page's local notes as four boxes on
the gallery brown, the neighbouring areas linked under them */
.lk{background:#E9DDCB;padding:64px 0}
.lk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.lk-box{background:#fff;border:1px solid rgba(199,178,154,.5);border-radius:18px;padding:22px 20px 20px}
.lk-box h3{font-size:1.22rem;line-height:1.2;margin:12px 0 6px}
.lk-box p{margin:0;font-size:.95rem;line-height:1.6}
.lk-box a{color:var(--navy);font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}
.lk-near{margin:24px 0 0;font-size:1.02rem}
.lk-near a{color:var(--navy);font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:900px){.lk-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lk-grid{grid-template-columns:1fr}.lk{padding:52px 0}}
@media (prefers-reduced-motion:reduce){
.am-waves path,.am-flow{animation:none!important}
.am-drop{display:none}
.am-core,.am-pin,.am-row,.am-row b,.am-row i{transition:none!important}
.am-row:hover,.am-row.hot{transform:none}
}
/* ============================================================
FAQ, rail and reading panel
Every question stays visible in a grouped rail on the left; the
chosen answer reads large in a white panel on the right, with an
oversized sand numeral. A navy card with the two buttons sits under
the panel. Phones drop the panel and open the answer under its
question. Same brown ground as the gallery.
============================================================ */
.fq{background:#E9DDCB}
.fq .eyeb{color:var(--navy)}
.fq-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;
align-items:start;margin-top:34px}
.fq-h{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--navy);margin:20px 0 8px 6px}
.fq-h:first-child{margin-top:0}
.fq-item{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:16px;
margin-bottom:8px;overflow:hidden;
transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.fq-item:hover{background:#fff}
.fq-item.on{background:#fff;box-shadow:0 14px 30px rgba(36,36,36,.12);transform:translateX(6px)}
.fq-q{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;cursor:pointer;
text-align:left;padding:15px 18px;font-family:var(--serif);font-weight:400;font-size:1.08rem;
line-height:1.3;color:var(--ink)}
.fq-q:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;border-radius:16px}
.fq-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--navy);
background:var(--hero-bg);border:1px solid var(--sand);transition:.2s ease}
.fq-item.on .fq-n{background:var(--navy);color:#fff;border-color:var(--navy)}
.fq-t{flex:1}
.fq-x{flex:none;color:var(--navy);opacity:0;transform:translateX(-6px);transition:.25s ease}
.fq-item.on .fq-x,.fq-item:hover .fq-x{opacity:1;transform:none}
.fq-a{display:none} /* desktop: the panel shows the answer */
.fq-side{position:sticky;top:110px}
.fq-panel{position:relative;background:#fff;border-radius:var(--r);padding:40px 40px 36px;
box-shadow:0 24px 60px rgba(36,36,36,.14);min-height:340px;overflow:hidden}
.fq-big{position:absolute;right:24px;top:10px;font-family:var(--serif);font-weight:600;
font-size:6.4rem;line-height:1;color:var(--sand);opacity:.5;pointer-events:none}
.fq-topic{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--navy);margin:0 0 14px}
.fq-panel h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.2vw,1.85rem);
line-height:1.2;color:var(--ink);margin:0 0 18px;padding-right:90px}
.fq-ans p{font-size:1.08rem;line-height:1.65;color:var(--ink);margin:0}
.fq-ans a{color:var(--navy);font-weight:600}
.fq-panel.swap .fq-topic,.fq-panel.swap h3,.fq-panel.swap .fq-ans{
animation:fqIn .5s cubic-bezier(.16,1,.3,1) both}
.fq-panel.swap h3{animation-delay:.05s}
.fq-panel.swap .fq-ans{animation-delay:.1s}
.fq-panel.swap .fq-big{animation:fqNum .7s cubic-bezier(.2,.8,.25,1) both}
@keyframes fqIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes fqNum{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:.5;transform:none}}
.fq-cta{margin-top:16px;background:var(--navy);color:#fff;border-radius:var(--r);padding:24px 28px;
display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.fq-cta .eyeb{color:var(--sand-2);margin-bottom:4px}
.fq-cta p{margin:0;color:#fff}
.fq-btns{display:flex;gap:10px;flex-wrap:wrap}
/* reveal: rail items slide in one after another, the panel rises */
.js .fq-item{opacity:0;transform:translateX(-22px)}
.js .fq.in .fq-item{opacity:1;transform:none;
transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),background .2s ease,box-shadow .2s ease}
.js .fq.in .fq-item.on{transform:translateX(6px)}
.js .fq.in .fq-item:nth-of-type(2){transition-delay:.05s}
.js .fq.in .fq-item:nth-of-type(3){transition-delay:.1s}
.js .fq.in .fq-item:nth-of-type(4){transition-delay:.15s}
.js .fq.in .fq-item:nth-of-type(5){transition-delay:.2s}
.js .fq.in .fq-item:nth-of-type(6){transition-delay:.25s}
.js .fq.in .fq-item:nth-of-type(7){transition-delay:.3s}
.js .fq.in .fq-item:nth-of-type(8){transition-delay:.35s}
.js .fq.in .fq-item:nth-of-type(9){transition-delay:.4s}
.js .fq.in .fq-item:nth-of-type(10){transition-delay:.45s}
.js .fq-side{opacity:0;transform:translateY(24px)}
.js .fq.in .fq-side{opacity:1;transform:none;
transition:opacity .7s ease .3s,transform .8s cubic-bezier(.16,1,.3,1) .3s}
@media (max-width:900px){
.fq-grid{grid-template-columns:1fr;gap:18px}
.fq-side{position:static}
.fq-panel{display:none} /* the answer opens under its question */
.fq-item.on,.js .fq.in .fq-item.on{transform:none}
.fq-item.on .fq-a{display:block;padding:0 18px 18px 66px;color:var(--ink);
font-size:.98rem;line-height:1.6}
.fq-a p{margin:0}
.fq-a a{color:var(--navy);font-weight:600}
.fq-x{display:none}
.fq-q{font-size:1rem;padding:14px 16px}
.fq-cta{padding:20px 18px}
}
@media (prefers-reduced-motion:reduce){
.js .fq-item,.js .fq-side{opacity:1!important;transform:none!important;transition:none!important}
.fq-panel.swap .fq-topic,.fq-panel.swap h3,.fq-panel.swap .fq-ans,.fq-panel.swap .fq-big{animation:none!important}
}
/* ============================================================
INNER PAGES (about.html, services.html), built from this file by
tools/build_pages.py. Hero: centred on the darker brown with the
ambient bubbles behind. Purpose and Mission: the mission copy beside
a white card carrying the three Big Easy Promise points as bubble
numerals. Unused on the homepage.
============================================================ */
.ah{position:relative;overflow:hidden;background:#E3D5C1;padding:150px 0 76px;text-align:center}
.ah .wrap{position:relative;z-index:2}
.ah .eyeb{color:var(--navy)}
.ah h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,5.4vw,4.4rem);
line-height:1.05;letter-spacing:-.01em;color:var(--ink);margin:0 auto 20px;max-width:16ch}
.ah-sub{max-width:64ch;margin:0 auto 28px;font-size:1.1rem;line-height:1.65;color:var(--ink)}
.ah-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.pm{background:var(--cream)}
.pm-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.pm-lead{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2vw,1.6rem);
line-height:1.35;color:var(--ink);margin:0 0 18px}
.pm-copy p{color:var(--ink)}
.pm-promise{background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:32px 30px 30px;box-shadow:0 18px 44px rgba(36,36,36,.08)}
.pm-promise h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2;margin:0 0 22px}
.pm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.pm-list li{display:flex;align-items:center;gap:16px;font-size:1.04rem;line-height:1.4;color:var(--ink)}
.pm-b{position:relative;flex:none;width:58px;height:58px;border-radius:50%;display:grid;
place-items:center;font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.08em;
color:var(--navy);border:1px solid rgba(255,255,255,.95);
background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95),rgba(255,255,255,.4) 40%,
rgba(199,178,154,.3) 72%,rgba(4,34,61,.12) 100%);
box-shadow:inset 0 0 12px rgba(255,255,255,.6),inset -8px -10px 18px rgba(4,34,61,.12),
0 10px 22px rgba(36,36,36,.12)}
.pm-b i{position:absolute;left:19%;top:13%;width:26%;height:18%;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.98),rgba(255,255,255,0) 70%)}
@media (max-width:900px){
.ah{padding:132px 0 56px}
.pm-grid{grid-template-columns:1fr;gap:26px}
}
/* contact.html: estimate form beside a navy details card; "what happens
next" as four steps on bubble numerals */
.ct{background:var(--cream)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:start}
.ct-form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 34px 30px;
box-shadow:0 18px 44px rgba(36,36,36,.08)}
.ct-form h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 6px}
.ct-form>p{margin:0 0 22px;color:var(--ink)}
.ct-f{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.ct-f .full{grid-column:1 / -1}
.ct-f label{display:block;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--navy);margin:0 0 6px}
.ct-f input,.ct-f select,.ct-f textarea{font-family:var(--sans);font-size:.98rem;padding:14px 16px;
border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);width:100%}
.ct-f textarea{min-height:140px;resize:vertical}
.ct-f input:focus,.ct-f select:focus,.ct-f textarea:focus{outline:2px solid var(--navy);outline-offset:1px;background:#fff}
.ct-side{position:sticky;top:110px}
.ct-card{background:var(--navy);color:#fff;border-radius:var(--r);padding:30px 30px 24px}
.ct-card h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;color:#fff;margin:0 0 14px}
.ct-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
.ct-row:first-of-type{border-top:0}
.ct-k{flex:none;width:112px;font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--sand-2);padding-top:4px}
.ct-v{color:#fff;font-size:1rem;line-height:1.5}
.ct-v a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--sand);text-underline-offset:3px}
.ct-v a.big{font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.1;display:inline-block;
text-decoration:none}
.ct-card .ft-social{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:10px}
.ct-card .ft-social li{margin:0}
.ct-card .ft-social a{color:#fff;text-decoration:none}
.ct-promise{margin-top:16px;background:#E9DDCB;color:var(--ink);border-radius:16px;padding:16px 18px;
font-size:.95rem;line-height:1.5}
.ct-promise b{color:var(--navy)}
.nx{background:#E9DDCB}
.nx .eyeb{color:var(--navy)}
.nx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.nx-step{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:22px 20px}
.nx-step h3{font-family:var(--serif);font-weight:400;font-size:1.15rem;line-height:1.25;margin:14px 0 8px}
.nx-step p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink)}
@media (max-width:1000px){.nx-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
.ct-grid{grid-template-columns:1fr}
.ct-side{position:static}
.ct-form{padding:26px 20px}
}
@media (max-width:640px){
.ct-f{grid-template-columns:1fr}
.nx-grid{grid-template-columns:1fr}
}
/* service pages: the benefits section, boxes over real bathroom footage
(natural colour, no tint), two buttons under them */
.bn{position:relative;overflow:hidden;background:var(--navy)}
.bn-bg{position:absolute;inset:0;z-index:0}
.bn-bg video{width:100%;height:100%;object-fit:cover;display:block}
.bn .wrap{position:relative;z-index:2}
.bn .lead{background:rgba(248,246,242,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border-radius:var(--r);padding:28px 32px;max-width:none} /* spans the grid, edge to edge */
.bn .lead .eyeb{color:var(--navy)}
.bn .lead p:not(.eyeb){color:var(--ink);margin:0}
.bn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.bn-box{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:22px 20px;
box-shadow:0 14px 34px rgba(4,34,61,.18)}
.bn-box h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;line-height:1.25;margin:14px 0 8px;color:var(--ink)}
.bn-box p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink)}
.bn-cta{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:16px;
background:rgba(248,246,242,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border-radius:var(--r);padding:18px 20px} /* buttons centred on their own frosted bar */
@media (max-width:1000px){.bn-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.bn-grid{grid-template-columns:1fr}.bn .lead{padding:22px 18px}}
/* ============================================================
OFF-CANVAS MOBILE MENU
SDBody's menu: a backdrop, a panel sliding in from the right, and
accordion submenus (one open per level). Built by script from the
desktop nav, so the two can never disagree.
============================================================ */
.mobile-backdrop{position:fixed;inset:0;z-index:110;background:rgba(9,13,24,.55);backdrop-filter:blur(2px);
opacity:0;visibility:hidden;transition:opacity .4s var(--ease-quart),visibility .4s}
.mobile-backdrop.open{opacity:1;visibility:visible}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;z-index:120;width:min(340px,86vw);background:var(--navy);
display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;
transition:transform .45s var(--ease-quart),visibility .45s;box-shadow:-24px 0 60px -24px rgba(0,0,0,.55);
overflow-y:auto;overscroll-behavior:contain}
.mobile-menu.open{transform:none;visibility:visible}
.mobile-menu__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
gap:1rem;padding:18px 22px;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-menu__brand{font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.mobile-menu__close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:none;
color:#fff;display:grid;place-items:center;flex-shrink:0;cursor:pointer;
transition:background .3s,border-color .3s,color .3s,transform .35s var(--ease-quart)}
.mobile-menu__close:hover{background:var(--sand);border-color:var(--sand);color:var(--ink);transform:rotate(90deg)}
.mobile-menu__close svg{width:22px;height:22px}
.mobile-nav{flex:1;padding:6px 22px}
.mobile-nav__list,.mobile-nav__sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mobile-nav__list>li{border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav__row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.mobile-nav a,.mobile-nav__label{display:block;flex:1;color:#fff;font-family:var(--sans);font-weight:600;
font-size:1.02rem;letter-spacing:.01em;line-height:1.4;text-decoration:none;text-align:left;
padding:.78em 0;background:none;border:0;cursor:pointer;transition:color .3s}
.mobile-nav a:hover,.mobile-nav__label:hover{color:var(--sand-2)}
.mobile-nav a[aria-current="page"]{color:var(--sand-2);text-decoration:underline;
text-decoration-color:var(--sand);text-decoration-thickness:2px;text-underline-offset:5px}
.has-current>.mobile-nav__row>a,.has-current>.mobile-nav__row>.mobile-nav__label{color:var(--sand-2)}
.mobile-nav a:active,.mobile-nav__label:active,.mobile-nav__toggle:active{color:var(--sand)}
.mobile-nav a,.mobile-nav__label,.mobile-nav__toggle,.mobile-menu__close,.burger{-webkit-tap-highlight-color:transparent}
.mobile-nav__toggle{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:#fff;
flex-shrink:0;cursor:pointer}
.mobile-nav__toggle svg{width:20px;height:20px;transition:transform .35s var(--ease-quart)}
.has-sub.open>.mobile-nav__row>.mobile-nav__toggle svg{transform:rotate(180deg)}
.mobile-nav__subwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-quart)}
.has-sub.open>.mobile-nav__subwrap{grid-template-rows:1fr}
.mobile-nav__sub{overflow:hidden;min-height:0;padding-left:14px}
.mobile-nav__sub a,.mobile-nav__sub .mobile-nav__label{font-size:.92rem;font-weight:500;color:rgba(255,255,255,.72)}
.mobile-nav__sub li:not(:last-child)>a,.mobile-nav__sub li:not(:last-child)>.mobile-nav__row{border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-nav a:focus-visible,.mobile-nav__label:focus-visible,.mobile-nav__toggle:focus-visible,
.mobile-menu__close:focus-visible{outline:2px solid var(--sand-2);outline-offset:2px}
.mobile-menu__cta{display:flex;flex-direction:column;gap:12px;padding:18px 22px calc(22px + env(safe-area-inset-bottom));
border-top:1px solid rgba(255,255,255,.12)}
.mobile-menu__cta .btn{width:100%;text-align:center}
.mobile-menu__cta .mm-call{color:#fff;text-align:center;font-weight:600;font-size:.95rem;text-decoration:none;padding:6px 0}
.mobile-menu__cta .mm-call:hover{color:var(--sand-2)}
/* scroll lock while the menu is open; a class, so nothing writes a style attribute */
body.scroll-locked{overflow:hidden}
@media (prefers-reduced-motion:reduce){
.mobile-backdrop,.mobile-menu,.mobile-nav__subwrap,.mobile-nav__toggle svg,.burger span,
.mobile-menu__close{transition:none!important}
}
/* ---- back to top: shows after the first screen; a button, so the URL never changes ---- */
.to-top{position:fixed;right:18px;bottom:18px;z-index:90;width:50px;height:50px;border-radius:50%;
border:1.5px solid rgba(255,255,255,.7);background:var(--navy);color:#fff;display:grid;place-items:center;
cursor:pointer;padding:0;box-shadow:0 12px 30px rgba(4,34,61,.3);
opacity:0;visibility:hidden;transform:translateY(14px);
transition:opacity .3s ease,visibility .3s,transform .3s ease,background .2s ease,color .2s ease,border-color .2s ease}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover,.to-top:focus-visible{background:var(--sand);border-color:var(--sand);color:var(--ink)}
.to-top:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.to-top svg{width:22px;height:22px}
/* the chat bubble takes the corner, so the button stands above it */
.has-chat .to-top{bottom:96px}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}
/* ---- in-page targets land clear of the stuck header ---- */
section[id]{scroll-margin-top:84px}
/* ---- status pages (404, thank you): a large numeral or a tick above the heading;
popular-page cards reuse the "what happens next" boxes as links ---- */
.st-num{font-family:var(--serif);font-weight:600;font-size:clamp(5rem,13vw,8.5rem);line-height:.9;
letter-spacing:-.02em;margin:0 0 6px;color:transparent;-webkit-text-stroke:1.5px rgba(4,34,61,.55)}
.pm-b.st-badge{width:84px;height:84px;margin:0 auto 20px}
.st-badge svg{position:relative;width:34px;height:34px;color:var(--navy)}
.nx-link{display:block;text-decoration:none;color:inherit;
transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.js .nx-link.rv.in{transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.nx-link:hover,.nx-link:focus-visible{background:#fff;transform:translateY(-4px);box-shadow:0 16px 34px rgba(36,36,36,.12)}
.nx-link .more{margin-top:14px}
.nx-link:hover .more span{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.nx-link,.js .nx-link.rv.in{transition:none}.nx-link:hover{transform:none}}
/* ============================================================
VALUES THAT USED TO SIT IN style="" ATTRIBUTES
Droplet offsets, strip delays and map pin positions, keyed by
position or by area. Scripts still override some of them at
runtime (the strip randomises its delays, the map re-places its
pins); these are the starting values.
============================================================ */
.intro-drop:nth-of-type(1){--dx:-168px;--dy:-124px}
.intro-drop:nth-of-type(2){--dx:158px;--dy:-138px}
.intro-drop:nth-of-type(3){--dx:196px;--dy:26px}
.intro-drop:nth-of-type(4){--dx:-186px;--dy:44px}
.intro-drop:nth-of-type(5){--dx:-96px;--dy:172px}
.intro-drop:nth-of-type(6){--dx:112px;--dy:164px}
.intro-drop:nth-of-type(7){--dx:14px;--dy:-198px}
.intro-drop:nth-of-type(8){--dx:-34px;--dy:190px}
.tr-drops i:nth-child(1){--dx:-74px;--dy:-58px}
.tr-drops i:nth-child(2){--dx:70px;--dy:-66px}
.tr-drops i:nth-child(3){--dx:88px;--dy:10px}
.tr-drops i:nth-child(4){--dx:-84px;--dy:22px}
.tr-drops i:nth-child(5){--dx:-40px;--dy:76px}
.tr-drops i:nth-child(6){--dx:52px;--dy:70px}
.spot-drops i:nth-child(1){--dx:-120px;--dy:-90px}
.spot-drops i:nth-child(2){--dx:112px;--dy:-100px}
.spot-drops i:nth-child(3){--dx:140px;--dy:20px}
.spot-drops i:nth-child(4){--dx:-132px;--dy:32px}
.spot-drops i:nth-child(5){--dx:-70px;--dy:124px}
.spot-drops i:nth-child(6){--dx:80px;--dy:118px}
.spot-drops i:nth-child(7){--dx:10px;--dy:-142px}
.spot-drops i:nth-child(8){--dx:-24px;--dy:136px}
.trust-row .tr-item:nth-child(1){--d:0s}
.trust-row .tr-item:nth-child(2){--d:.16s}
.trust-row .tr-item:nth-child(3){--d:.32s}
.trust-row .tr-item:nth-child(4){--d:.48s}
.trust-row .tr-item:nth-child(5){--d:.64s}
.trust-row .tr-item:nth-child(6){--d:.8s}
.trust-row .tr-item:nth-child(7){--d:.96s}
.am-pin[data-k="abita-springs"]{--px:60%;--py:18.75%}
.am-pin[data-k="covington"]{--px:45.5%;--py:17.19%}
.am-pin[data-k="hammond"]{--px:21.5%;--py:23.44%}
.am-pin[data-k="madisonville"]{--px:42.5%;--py:36.25%}
.am-pin[data-k="mandeville"]{--px:54.2%;--py:34.69%}
.am-pin[data-k="metairie"]{--px:50%;--py:73.44%}
.am-pin[data-k="slidell"]{--px:86%;--py:41.56%}
/* magazine stacking: the script sets data-z, top page highest */
.mag-pg[data-z="1"]{z-index:1}
.mag-pg[data-z="2"]{z-index:2}
.mag-pg[data-z="3"]{z-index:3}
.mag-pg[data-z="4"]{z-index:4}
.mag-pg[data-z="5"]{z-index:5}
.mag-pg[data-z="6"]{z-index:6}
/* ============================================================
RESPONSIVE FIXES (QA pass across 320 to 1920px)
============================================================ */
/* the logo keeps its size; the full nav needs 1100px, so below that the
header takes the burger instead of wrapping "Services" onto two lines */
.top .logo{flex:0 0 auto}
.tel{position:relative}
.tel svg{flex:none;width:16px;height:16px}
@media (max-width:1099px){
.nav{display:none}
/* the phone number stays one tap away: a round call button beside the menu */
.tel{display:inline-flex;justify-content:center;margin-left:auto;width:46px;height:46px;padding:0;gap:0}
.tel svg{width:20px;height:20px}
.tel .tel-txt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.burger{display:flex;margin-left:0}
}
@media (max-width:400px){
.top{gap:8px;padding-left:14px;padding-right:10px}
.top .logo img{height:34px}
.tel,.burger{width:42px;height:42px}
}
/* grid tracks that may shrink below their content's longest word */
.cat-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.cat.flip .cat-list{grid-template-columns:minmax(0,1fr)}
.rv-tile{min-width:0}
.rv-tile b,.rv-tile small{overflow-wrap:anywhere}
.ct-f>div{min-width:0}
@media (max-width:1100px){
.cat-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
.ct-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
.rv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* the areas list runs the full height of the map card, its buttons at the foot */
.am-side{align-self:stretch;display:flex;flex-direction:column}
.am-side .am-cta{margin-top:auto;padding-top:22px}
@media (max-width:900px){
.am-side .am-cta{margin-top:22px;padding-top:0}
}
/* small phones: the highlight's side padding stays inside the text column,
and pill buttons keep their label on one line */
@media (max-width:640px){
.kw{padding:0 .04em}
}
@media (max-width:400px){
.btn{padding-left:16px;padding-right:16px;letter-spacing:.04em}
.rv-tiles{grid-template-columns:minmax(0,1fr)}
}
/* ============================================================
HOVER ON SAND, HERO BELOW 1100PX
============================================================ */
/* the white button turns sand on hover everywhere else; on the sand band
that would leave only its label, so here it turns navy */
.proc .btn-l:hover,.proc .btn-l:focus-visible{background:var(--navy);border-color:var(--navy);color:#fff}
/* the magazine and the copy need 1100px side by side; below that the
photographs sit above the copy, as they already do on phones */
@media (max-width:1099px){
.hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
.hero-copy{max-width:none}
.mag{height:auto;width:100%;max-width:500px;aspect-ratio:4/5}
.mag::before{left:-7px;width:11px}
.mag::after{right:-5px;width:7px}
}
/* ============================================================
BLOG: LISTING AND ARTICLE
============================================================ */
/* the hidden attribute always hides, whatever display a class gives the element */
[hidden]{display:none!important}
/* ---- breadcrumb ---- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 18px;
font-size:.84rem;font-weight:500;line-height:1.5;color:var(--body)}
.crumb a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--sand);text-underline-offset:3px}
.crumb a:hover,.crumb a:focus-visible{text-decoration-color:var(--navy)}
.crumb [aria-current]{color:var(--ink)}
.ah .crumb{justify-content:center}
/* ---- article cards ---- */
.bl{background:var(--cream)}
.bl--related{background:#E9DDCB}
.bl--related .eyeb{color:var(--navy)}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.bl--related .bl-grid{margin-top:34px}
.bl-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.js .bl-card.rv{transition:opacity .7s ease,transform .7s ease,box-shadow .3s ease,border-color .3s ease}
.bl-card:hover,.bl-card:focus-within{transform:translateY(-6px);box-shadow:0 20px 44px rgba(20,20,20,.13);border-color:var(--taupe)}
.js .bl-card.bl-later{display:none}
.bl-media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--cream-2)}
.bl-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bl-card:hover .bl-media img{transform:scale(1.05)}
.bl-date{position:absolute;left:14px;top:14px;display:grid;place-items:center;min-width:56px;padding:6px 8px 7px;
border-radius:14px;background:rgba(248,246,242,.95);color:var(--navy);font-size:.68rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;line-height:1.15}
.bl-date b{font-family:var(--serif);font-weight:500;font-size:1.35rem;letter-spacing:0}
.bl-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.bl-cat{margin:0 0 8px;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.bl-title{font-size:1.2rem;line-height:1.3;margin:0 0 10px}
.bl-title a{color:var(--ink);text-decoration:none}
.bl-title a:hover,.bl-title a:focus-visible{color:var(--navy);text-decoration:underline;
text-decoration-color:var(--sand);text-decoration-thickness:2px;text-underline-offset:4px}
.bl-meta{margin:0 0 18px;font-size:.88rem;color:var(--body)}
.bl-card .more{margin-top:auto}
.bl-card:hover .more span{transform:translateX(5px)}
.bl-foot{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:40px}
.bl-status{margin:0;font-size:.92rem;color:var(--body)}
@media (max-width:1024px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media (max-width:640px){.bl-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
.bl-card,.bl-media img{transition:none!important}
.bl-card:hover{transform:none}
}
/* ---- article hero: the post's photograph under a navy tint ---- */
.ph{position:relative;overflow:hidden;background:var(--navy);display:flex;align-items:flex-end;
min-height:560px;padding:170px 0 76px}
.ph>.wrap{position:relative;z-index:2}
.ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-tint{position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(4,34,61,.92) 0%,rgba(4,34,61,.78) 50%,rgba(4,34,61,.42) 100%)}
.ph-copy{max-width:820px}
.ph .crumb,.ph .crumb [aria-current]{color:rgba(255,255,255,.82)}
.ph .crumb a{color:#fff}
.ph .eyeb{color:var(--sand-2)}
.ph h1{color:#fff;font-weight:300;font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.1;margin:0 0 18px;text-wrap:balance}
.ph-meta{margin:0 0 28px;font-size:.98rem;color:rgba(255,255,255,.88)}
.ph-cta{display:flex;gap:13px;flex-wrap:wrap}
@media (max-width:900px){
.ph{min-height:0;padding:140px 0 56px}
.ph-tint{background:rgba(4,34,61,.82)}
}
/* ---- article body and rail ---- */
.pb{background:var(--cream);padding:72px 0 84px}
.pb-grid{display:grid;grid-template-columns:minmax(0,880px) 320px;justify-content:space-between;gap:56px;align-items:start}
.pb-body{min-width:0;font-size:1.08rem;line-height:1.8;color:var(--ink)}
.pb-body h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.22;margin:46px 0 16px;scroll-margin-top:100px}
.pb-body p{margin:0 0 18px}
.pb-body ul,.pb-body ol{margin:0 0 22px;padding-left:1.35em}
.pb-body li{margin:0 0 8px;padding-left:4px}
.pb-body li::marker{color:var(--navy);font-weight:600}
.pb-body strong{font-weight:600}
.pb-body p a,.pb-body li a{color:var(--navy);font-weight:600;text-decoration:underline;
text-decoration-color:var(--sand);text-decoration-thickness:1.5px;text-underline-offset:3px}
.pb-body p a:hover,.pb-body p a:focus-visible,.pb-body li a:hover,.pb-body li a:focus-visible{text-decoration-color:var(--navy)}
.post-fig{margin:8px 0 28px;border-radius:var(--r);overflow:hidden;background:var(--cream-2)}
.post-fig img{width:100%;height:auto}
.pb-toc{margin:10px 0 34px;padding:22px 26px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.pb-toc__t{margin:0 0 10px!important;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.pb-toc ol{margin:0 0 6px}
.pb-body .pb-toc a{font-weight:500;text-decoration:none}
.pb-body .pb-toc a:hover,.pb-body .pb-toc a:focus-visible{text-decoration:underline;text-decoration-color:var(--sand)}
.pb-rail{position:sticky;top:100px;display:flex;flex-direction:column;gap:18px;
max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.pb-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 16px}
.pb-label{margin:0 0 12px;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.pb-rail-toc{display:flex;flex-direction:column;border-left:2px solid var(--line)}
.pb-rail-toc a{display:block;margin-left:-2px;padding:7px 0 7px 14px;border-left:2px solid transparent;
font-size:.9rem;line-height:1.4;color:var(--body);text-decoration:none;transition:color .2s ease,border-color .2s ease}
.pb-rail-toc a:hover,.pb-rail-toc a:focus-visible{color:var(--navy)}
.pb-rail-toc a.on{color:var(--navy);font-weight:600;border-left-color:var(--sand)}
.pb-cta{background:var(--navy);color:#fff;border-radius:var(--r);padding:24px 22px 22px}
.pb-cta h3{color:#fff;font-size:1.4rem;line-height:1.2;margin:0 0 8px}
.pb-cta p{margin:0 0 16px;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.88)}
.pb-cta .btn{display:block;width:100%;text-align:center}
.pb-phone{display:flex;flex-direction:column;margin-top:16px;color:#fff;text-decoration:none}
.pb-phone small{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-2)}
.pb-phone strong{font-family:var(--serif);font-weight:400;font-size:1.4rem}
.pb-phone:hover strong,.pb-phone:focus-visible strong{text-decoration:underline;text-decoration-color:var(--sand)}
.pb-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
@media (min-width:1100px){.pb-body .pb-toc{display:none}}
@media (max-width:1099px){
.pb-grid{grid-template-columns:minmax(0,1fr);gap:34px}
.pb-body{max-width:none}
.pb-rail{position:static;max-height:none;overflow:visible}
.pb-rail .pb-box{display:none}
}
@media (max-width:640px){
.pb{padding:52px 0 60px}
.pb-body{font-size:1.02rem}
.pb-toc{padding:18px 18px 12px}
}
/* ---- article FAQ: a true accordion ---- */
.pf{display:flex;flex-direction:column;gap:10px;margin:8px 0 10px}
.pf-item{background:#fff;border:1px solid var(--line);border-radius:16px;transition:border-color .2s ease,box-shadow .2s ease}
.pf-item.open{border-color:var(--sand);box-shadow:0 14px 30px rgba(36,36,36,.08)}
.pf-h{margin:0;font-size:1rem}
.pf-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 20px;
background:none;border:0;cursor:pointer;text-align:left;font-family:var(--serif);font-size:1.12rem;line-height:1.35;color:var(--ink)}
.pf-q:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;border-radius:16px}
.pf-ico{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--hero-bg);border:1px solid var(--sand)}
.pf-ico::before,.pf-ico::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;
background:var(--navy);transform:translate(-50%,-50%);transition:transform .3s ease}
.pf-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.pf-item.open .pf-ico::after{transform:translate(-50%,-50%) rotate(0deg)}
.pf-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s var(--ease-quart)}
.pf-in{overflow:hidden;min-height:0}
.pf-in p{margin:0;padding:0 20px 20px;font-size:1rem;line-height:1.7}
/* collapsed only once script is running; without it every answer reads open */
.js .pf-item:not(.open) .pf-a{grid-template-rows:0fr}
.js .pf-item:not(.open) .pf-in{visibility:hidden}
.js .pf-in{transition:visibility .35s}
@media (prefers-reduced-motion:reduce){.pf-a,.pf-ico::before,.pf-ico::after,.js .pf-in{transition:none}}
/* An article's own question-and-answer blocks. A few imported articles end on a
short FAQ built from ; it was styled on the elements themselves, so
the styling lives here instead and every article's block matches the site. */
.pb-body details{border-bottom:1px solid var(--line);padding:14px 0}
.pb-body details:first-of-type{border-top:1px solid var(--line)}
.pb-body summary{font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.35;color:var(--ink);cursor:pointer;list-style:none;padding-right:28px;position:relative}
.pb-body summary::-webkit-details-marker{display:none}
.pb-body summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:1.3rem;font-weight:400;color:var(--navy);transition:transform .25s var(--ease-quart)}
.pb-body details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.pb-body summary:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
.pb-body details p{margin:12px 0 0;color:var(--body);line-height:1.7}
.pb-body details p:last-child{margin-bottom:2px}
@media (prefers-reduced-motion:reduce){.pb-body summary::after{transition:none}}
/* Words that belong to someone reading by ear. "Read article" is clear enough
on screen, where the title sits directly above it; read on its own, out of
that context, it needs to say which article it leads to. */
.scr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* The card's "Read article" is a link in its own right now, not decoration. */
a.more{text-decoration:none}
a.more:hover,a.more:focus-visible{color:var(--navy);text-decoration:underline;
text-decoration-color:var(--sand);text-underline-offset:4px}
a.more:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:3px}
a.more:hover span[aria-hidden]{transform:translateX(5px)}
/* An article carried over from a sister site brings that site's FAQ markup with
it: a button for each question and a panel for each answer, written against
styles and a script that do not exist here. Left alone it reads as a row of
bare browser buttons with every answer already open. It is a real accordion
here, on the same rhythm as the blocks above. */
.pb-body .bebr-accwrap{margin:26px 0 10px}
.pb-body .bebr-acc{border-bottom:1px solid var(--line)}
.pb-body .bebr-acc:first-child{border-top:1px solid var(--line)}
.pb-body .bebr-acc>p{margin:0}
.pb-body .bebr-acc__q{display:flex;align-items:center;gap:16px;width:100%;
background:none;border:0;cursor:pointer;text-align:left;padding:16px 0;
font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.35;color:var(--ink)}
.pb-body .bebr-acc__q:hover{color:var(--navy)}
.pb-body .bebr-acc__q:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
/* the marker: a plus that loses its upright stroke when the answer is open */
.pb-body .bebr-acc__ico{flex:none;margin-left:auto;position:relative;width:22px;height:22px}
.pb-body .bebr-acc__ico::before,
.pb-body .bebr-acc__ico::after{content:"";position:absolute;left:50%;top:50%;
background:var(--navy);transition:transform .25s var(--ease-quart)}
.pb-body .bebr-acc__ico::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.pb-body .bebr-acc__ico::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.pb-body .bebr-acc.is-open .bebr-acc__ico::after{transform:translate(-50%,-50%) scaleY(0)}
/* Closed only where the script can open it again. */
.js .pb-body .bebr-acc__body{display:grid;grid-template-rows:0fr;
transition:grid-template-rows .3s var(--ease-quart)}
.js .pb-body .bebr-acc.is-open .bebr-acc__body{grid-template-rows:1fr}
.pb-body .bebr-acc__inner{min-height:0;overflow:hidden}
.pb-body .bebr-acc__inner p{margin:0 0 16px}
.pb-body .bebr-acc__inner p:last-child{margin-bottom:18px}
@media (prefers-reduced-motion:reduce){
.js .pb-body .bebr-acc__body{transition:none}
.pb-body .bebr-acc__ico::before,.pb-body .bebr-acc__ico::after{transition:none}
}
/* The two calls to action under the header on a phone.
The header floats above the page, so the bar cannot simply sit in the gap
below it — there are only about forty pixels there. It takes its own place in
the flow and the banner below moves down by its height, which is what the
extra top padding further down is for. Above the phone layout the bar is not
there at all: the header itself carries the button and the number. */
.mcta{display:none}
@media (max-width:1099px){
.mcta{display:block;padding:0 var(--gutter);margin:101px 0 10px}
.mcta-in{display:grid;grid-template-columns:1fr 1fr;gap:10px;
max-width:calc(var(--wrap) - 2 * var(--gutter));margin:0 auto}
.mcta .btn{width:100%;justify-content:center;padding:13px 14px;font-size:.9rem;white-space:nowrap}
.mcta .btn svg{width:17px;height:17px;flex:none}
.mcta .btn-s{background:#fff;border-color:var(--line);color:var(--navy);
display:inline-flex;align-items:center;gap:8px}
.mcta .btn-s:hover,.mcta .btn-s:focus-visible{background:var(--navy);border-color:var(--navy);color:#fff}
/* the banner starts below the bar rather than behind it */
.hero{padding-top:49px}
.ah{padding-top:49px}
}
@media (max-width:640px){
.mcta{margin-top:101px; margin-bottom: 10px;}
.mcta-in{gap:8px}
.mcta .btn{padding:12px 10px;font-size:.85rem}
.hero{padding-top:45px}
.ah{padding-top:45px}
}
@media (max-width:400px){
.mcta{padding:0 14px;margin-top: 94px;
margin-bottom: 10px;}
.mcta .btn{font-size:.82rem;padding:12px 8px}
}