/* GSA Bathrooms, homepage.
   Breakpoints follow the kit bands: structure changes at 1023px (tablet and
   phone) and 767px (phone). Everything else is fluid with clamp(). */

:root{
  /* colour */
  --paper:#242225;
  --surface:#2E2B2F;
  --placeholder:#3A373B;
  --img-bg:#4D4A4C;
  --hero-bg:#CBC7C2;
  --accent:#3EC7F3;
  --accent-hover:#6BD5F6;
  --accent-ink:#242225;
  --ink:#FFFFFF;
  --text:#F1F0F0;
  --text-strong:#F4F3F3;
  --muted:#E6E5E6;
  --subtle:#D9D7D8;
  --subtle-2:#C9C7C8;
  --subtle-3:#A9A7A8;
  --link-hover:#D6F3FC;
  --rule:rgba(255,255,255,.14);
  --rule-section:rgba(255,255,255,.08);
  --rule-control:rgba(255,255,255,.35);
  --rule-icon:rgba(255,255,255,.3);
  --rule-icon-hover:rgba(255,255,255,.75);
  --rule-link:rgba(255,255,255,.4);
  --rule-step:rgba(255,255,255,.22);
  --fill-hover:rgba(255,255,255,.10);

  /* type */
  --font-display:'Urbanist','Jost',sans-serif;
  --font-body:'Jost','Helvetica Neue',sans-serif;
  --t-h2:clamp(36px,5vw,76px);

  /* space and layout (kit content box) */
  --gutter:clamp(24px,4vw,64px);
  --content:1312px;
  --max-width:calc(var(--content) + 2 * var(--gutter));
  --edge:max(var(--gutter), calc((100vw - var(--content)) / 2));
  --nav-h:84px;
  --header-h:98px;                 /* 14px top padding plus the 84px nav */
  --section-pad:clamp(80px,8vw,120px);

  /* form */
  --radius-hero:18px;
  --radius-panel:22px;
  --radius-card:16px;
  --radius-tile:14px;
  --radius-thumb:12px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-fast:.2s;
  --dur-base:.35s;
  --dur-slow:.6s;
  --dur-expand:.35s;
  --ease-expand:cubic-bezier(.4,0,.2,1);
  --ease-reveal:cubic-bezier(.16,1,.3,1);   /* arrives fast, settles slowly */
  --rise:28px;
  --stagger:90ms;
}

/* ---------- base ---------- */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-weight:300;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
a{color:var(--ink)}
a:hover{color:var(--link-hover)}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none !important}

#why,#gallery,#services,#about,#reviews,#faqs,#contact,#main{scroll-margin-top:var(--header-h)}

.wrap{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:var(--gutter)}
/* Header, hero and footer sit on the viewport edges, as on harristaylor.co.uk:
   the same edge gap, no 1312px cap, so all three line up on any screen. */
.wrap-wide{max-width:none;padding-inline:max(var(--gutter), min(64px, (100% - var(--content)) / 2))}

.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:12px 20px;border-radius:999px;font-weight:500;text-decoration:none}
.skip:focus{top:12px;color:var(--accent-ink)}

/* ---------- shared parts ---------- */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 26px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) ease}
.btn:hover{background:var(--accent-hover);color:var(--accent-ink)}
.btn svg{flex:none}
.btn-block{display:flex;width:100%;height:52px}

.link-line{display:inline-block;font-size:16px;color:var(--text);text-decoration:none;padding:12px 0 6px;border-bottom:1px solid var(--rule-link);transition:border-color var(--dur-fast) ease}
.link-line:hover{color:var(--ink);border-color:var(--accent)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}

.eyebrow{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:400;color:var(--ink)}
.eyebrow::before,.sq{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--accent)}

.stars{display:flex;gap:2px}
.star{fill:var(--accent)}

.icon-btn{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--rule-icon);background:transparent;color:var(--ink);transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease}
.icon-btn-lg{width:48px;height:48px;border-color:var(--rule-control);cursor:pointer;padding:0}
.icon-btn-lg:hover{background:var(--fill-hover)}

.section{padding-block:var(--section-pad);border-top:1px solid var(--rule-section)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;padding-bottom:clamp(32px,4vw,56px)}
.section-title{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;gap:20px}
.section h2,.cta h2{font-family:var(--font-display);font-weight:300;font-size:var(--t-h2);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.section-aside{flex:1 1 320px;max-width:420px;font-size:18px;line-height:1.55;color:var(--text)}

/* ---------- header and nav ---------- */

/* Pulled up over the hero photo by its own height. It sticks at top -14px, so
   the first 14px of scroll takes its top padding off screen and the stuck bar
   is just the 84px nav. Without JS it stays charcoal, so it never sits over
   text unreadably. */
.site-header{position:sticky;top:-14px;z-index:50;isolation:isolate;padding-top:14px;margin-bottom:calc(-1 * var(--header-h));background-color:var(--paper)}
/* With JS it is clear at the top of the page. Once scrolled, or while the menu
   is open, a charcoal bar fades in behind it, as its own layer. */
.js .site-header{background-color:transparent}
.js .site-header::before{content:"";position:absolute;z-index:0;left:0;right:0;top:0;bottom:0;background:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.10),0 8px 24px rgba(0,0,0,.25);opacity:0;transition:opacity .3s ease;pointer-events:none}
.js .site-header.is-scrolled::before,.js .site-header:has(.burger[aria-expanded="true"])::before{opacity:1}
.site-header > .nav{position:relative;z-index:1}
.nav{min-height:var(--nav-h);padding:18px clamp(28px, calc(2vw + 14px), 42px);display:flex;align-items:center;justify-content:space-between;gap:16px 40px}
.nav-logo{display:flex;align-items:center}
.logo{height:48px;width:auto}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 36px;font-size:16px;font-weight:400}
.nav-links a{display:block;padding:12px 0;line-height:24px;text-decoration:none}
.nav-actions{display:flex;align-items:center;gap:12px}

.burger{display:none;position:relative;width:48px;height:48px;border-radius:999px;border:1px solid var(--rule-control);background:transparent;cursor:pointer;padding:0}
.burger:hover{background:var(--fill-hover)}
.burger-line{position:absolute;left:14px;right:14px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .4s var(--ease),top .3s ease}
.burger-line-1{top:19px}
.burger-line-2{top:27px}
.burger[aria-expanded="true"] .burger-line-1{top:23px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger-line-2{top:23px;transform:rotate(-45deg)}

.menu{position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:40;background:var(--paper);opacity:0;transition:opacity var(--dur-base) ease}
.menu.is-open{opacity:1}
.menu-panel{height:100%;display:flex;flex-direction:column;padding-top:24px;padding-bottom:28px;overflow-y:auto}
.menu-panel > a{display:block;font-family:var(--font-display);font-weight:300;font-size:clamp(38px,9vw,56px);line-height:1.1;letter-spacing:-.02em;padding:10px 0;text-decoration:none;color:var(--ink)}
.menu-foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--rule)}
.menu-item{opacity:0;transform:translateY(14px);transition:opacity var(--dur-base) ease,transform .5s var(--ease)}
.menu.is-open .menu-item{opacity:1;transform:none}
.menu.is-open .menu-item:nth-child(1){transition-delay:.08s}
.menu.is-open .menu-item:nth-child(2){transition-delay:.13s}
.menu.is-open .menu-item:nth-child(3){transition-delay:.18s}
.menu.is-open .menu-item:nth-child(4){transition-delay:.23s}
.menu.is-open .menu-item:nth-child(5){transition-delay:.3s}
body.menu-open{overflow:hidden}

/* ---------- hero ---------- */

/* One screen on every device: a framed photo with the whole intro inside it. */
.hero{display:flex;height:100vh;height:100svh;min-height:560px;padding:14px}
.hero-frame{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;border-radius:var(--radius-panel);overflow:hidden;background:var(--placeholder)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-frost,.hero-glass,.hero-tint{position:absolute;inset:0;pointer-events:none}
.hero-frost{background:rgba(255,255,255,.025);-webkit-backdrop-filter:blur(1px) saturate(1.06);backdrop-filter:blur(1px) saturate(1.06)}
.hero-glass{background:rgba(255,255,255,.03);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);-webkit-mask-image:radial-gradient(ellipse 48% 42% at 50% 52%,#000 0%,rgba(0,0,0,.6) 55%,transparent 100%);mask-image:radial-gradient(ellipse 48% 42% at 50% 52%,#000 0%,rgba(0,0,0,.6) 55%,transparent 100%)}
.hero-tint{background:linear-gradient(180deg,rgba(36,34,37,.8) 0%,rgba(36,34,37,.45) 30%,rgba(36,34,37,.62) 65%,rgba(36,34,37,.92) 100%)}
.hero-spacer{flex:none;height:var(--nav-h)}
.hero-center,.hero-bottom{position:relative}
.hero-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,2.4vh,26px);padding:16px clamp(18px,4vw,40px);text-align:center}
.hero-tag{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:15px;font-weight:400;line-height:1.2;color:var(--ink)}
.hero-title{font-family:var(--font-display);font-weight:300;font-size:clamp(52px,min(11vw,19vh),184px);line-height:.92;letter-spacing:-.035em;color:var(--ink)}
.hero-desc{max-width:560px;font-size:clamp(17px,1.4vw,20px);font-weight:300;line-height:1.55;color:var(--text-strong)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn-hero{height:52px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(36,34,37,.25);color:var(--ink);font-size:16px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) ease}
.btn-ghost:hover{background:rgba(36,34,37,.5);color:var(--ink)}
.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(18px,2vw,28px) clamp(18px,2vw,26px)}
.hero-rating{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:400;color:var(--muted);text-decoration:none}
.hero-rating strong{color:var(--ink);font-weight:500}
.hero-rating:hover{color:var(--ink)}

@media (max-width:560px){
  .hero-title{font-size:clamp(56px,16vw,72px)}
  /* No room for labels beside the rating: icon-only circles, named by aria-label. */
  .socials-glass .social{width:40px;padding:0}
  .socials-glass .social-label{display:none}
  .hero-rating{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- gallery ---------- */

.gallery .section-head{padding-bottom:clamp(32px,4vw,48px)}
.play-btn{display:none}
.play-btn .icon-play,.gallery.is-paused .play-btn .icon-pause{display:none}
.gallery.is-paused .play-btn .icon-play{display:block}

/* Default, and on touch, narrow screens and reduced motion: a native swipe row.
   Inside the content box, like every other section. */
/* The row starts on the content edge and runs to the right edge of the
   screen, so photos arrive from the far side. 100cqw is the section's width,
   which leaves out any scrollbar, unlike 100vw. */
.gallery{container-type:inline-size}
.marquee{margin-right:calc(-1 * max(var(--gutter), (100cqw - var(--content)) / 2));overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.marquee::-webkit-scrollbar{display:none}
.marquee .track{display:flex;width:max-content;margin:0;padding:0 var(--gutter) 0 0}
.tile{flex:none;width:min-content;margin-right:16px;display:flex;flex-direction:column;gap:14px;scroll-snap-align:start}
.tile:last-child,.tile:has(+ .tile-dup){margin-right:0}
.tile-dup{display:none}
.tile-img{position:relative;height:clamp(240px,30vw,420px);border-radius:var(--radius-tile);overflow:hidden;background:var(--img-bg)}
.tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) ease}
.tile-cap{font-size:17px;font-weight:400;line-height:1.35;color:var(--ink)}

/* Mouse or trackpad, wide enough, motion allowed, JS running: the stepped
   carousel. main.js moves the track one tile at a time. This query is the
   inverse of the one in main.js; change them together. */
@media (hover:hover) and (pointer:fine) and (min-width:761px) and (prefers-reduced-motion:no-preference){
  .js .play-btn{display:inline-flex}
  /* Fade on the left only, where photos leave; clear to the screen edge on the right. */
  .js .marquee{overflow:hidden;scroll-snap-type:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(40px,7vw,110px),#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 clamp(40px,7vw,110px),#000 100%)}
  .js .track{padding:0;will-change:transform;backface-visibility:hidden}
  .js .tile:last-child,.js .tile:has(+ .tile-dup){margin-right:16px}
  .js .tile-dup{display:flex}
  .js .tile:hover .tile-img img{transform:scale(1.04)}
}
@media (hover:none),(pointer:coarse),(max-width:760px),(prefers-reduced-motion:reduce){
  .track{transform:none !important;transition:none !important}
}

/* ---------- why GSA ---------- */

.why{border-top:0}
.why-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:end}
.section .why-title{font-size:clamp(36px,3.9vw,56px)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0}
.stat{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--rule)}
.stat-accent{border-top-color:var(--accent)}
.stat-num{font-family:var(--font-display);font-weight:300;font-size:clamp(56px,5vw,72px);line-height:1;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
a.stat-num:hover{color:var(--ink)}
.stat-label{font-size:16px;font-weight:300;color:var(--muted)}
.accred{display:flex;align-items:center;gap:24px 40px;margin-top:clamp(48px,6vw,80px);padding-top:32px;border-top:1px solid var(--rule)}
.accred-label{flex:none;font-size:15px;font-weight:400;color:var(--subtle)}
.accred-logos{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0}
.logo-slot{display:flex;align-items:center;justify-content:center;height:56px;border:1px dashed var(--rule-control);border-radius:var(--radius-thumb);font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--subtle);text-align:center}

@media (max-width:900px){
  .why-top{grid-template-columns:minmax(0,1fr)}
  .accred{flex-direction:column;align-items:stretch}
  .accred-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .stats{grid-template-columns:minmax(0,1fr);gap:24px}
  .accred-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- services ---------- */

.svc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:stretch}
.svc-col{display:flex;flex-direction:column}
.hint{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:15px;font-weight:400;color:var(--subtle)}
.hint-touch{display:none}
.svc-list{display:flex;flex-direction:column;border-bottom:1px solid var(--rule)}
.svc-h{font:inherit}
.svc-btn{width:100%;display:flex;align-items:baseline;gap:20px;padding:22px 0;border:0;border-top:1px solid var(--rule);background:none;text-align:left;cursor:pointer}
.svc-num{min-width:28px;font-size:14px;font-weight:400;color:var(--subtle-3)}
.svc-name{flex:1 1 auto;min-width:0;font-family:var(--font-display);font-weight:300;font-size:clamp(26px,2.8vw,40px);line-height:1.1;color:var(--subtle-3);transition:color var(--dur-fast) ease}
.svc-btn .icon-btn{align-self:center}
.svc-btn:hover .svc-name{color:var(--ink)}
.svc-btn[aria-expanded="false"]:hover .icon-btn{border-color:var(--rule-icon-hover)}
.icon-arrow{display:none}
.svc-btn[aria-expanded="true"]{box-shadow:inset 0 2px 0 var(--accent)}
.svc-btn[aria-expanded="true"] .svc-num{color:var(--accent)}
.svc-btn[aria-expanded="true"] .svc-name{color:var(--ink)}
.svc-btn[aria-expanded="true"] .icon-btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.svc-btn[aria-expanded="true"] .icon-btn svg{transform:rotate(90deg)}
.svc-btn[aria-expanded="true"] .icon-plus{display:none}
.svc-btn[aria-expanded="true"] .icon-arrow{display:inline}
.icon-btn svg{transition:transform .3s ease}
.svc-panel{padding:0 0 26px 48px;display:flex;flex-direction:column;gap:18px}
.svc-panel p{font-size:17px;line-height:1.55;color:var(--text)}
.svc-inline-img{display:none;width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:var(--radius-thumb)}

.svc-big{position:relative;min-height:420px;border-radius:var(--radius-hero);overflow:hidden;background:var(--img-bg)}
.svc-big-img{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.svc-big-img.is-active{opacity:1}
.svc-big-img img{width:100%;height:100%;object-fit:cover}

/* ---------- steps ---------- */

.section-head-steps{padding-bottom:clamp(40px,5vw,72px)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:0;padding:0}
.step{position:relative;display:flex;flex-direction:column;gap:22px}
.step:not(:last-child)::after{content:"";position:absolute;top:28px;left:76px;right:-24px;height:1px;background:var(--rule-step)}
.step-node{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;border:1px solid var(--rule-control);font-family:var(--font-display);font-size:20px;font-weight:300;color:var(--ink)}
.step-body{display:flex;flex-direction:column;gap:10px;min-width:0;padding-right:8px}
.step h3{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,2.2vw,32px);line-height:1.1;color:var(--ink)}
.step p{font-size:16px;line-height:1.6;color:var(--muted)}
.steps-cta-bottom{display:none;padding-top:44px}

/* ---------- about ---------- */

.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:stretch}
.about-img{position:relative;min-height:560px;border-radius:var(--radius-hero);overflow:hidden;background:var(--placeholder)}
.about-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-body{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:8px 0}
.about-body h2{font-size:clamp(36px,4.6vw,68px);line-height:1.02}
.about-intro{max-width:560px;font-size:clamp(17px,1.3vw,19px);line-height:1.65;color:var(--text)}
.dots{max-width:560px;margin:0;border-bottom:1px solid var(--rule)}
.dots li{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--rule);font-size:17px;font-weight:400;color:var(--ink)}
.dots li::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--accent)}

/* ---------- reviews ---------- */

.rating-big{display:flex;align-items:center;gap:20px;padding:4px 0;text-decoration:none}
.rating-num{font-family:var(--font-display);font-weight:300;font-size:clamp(48px,5vw,72px);line-height:1;color:var(--ink)}
.rating-side{display:flex;flex-direction:column;gap:8px}
.rating-side .stars{gap:3px}
.rating-link{font-size:15px;font-weight:400;color:var(--muted);border-bottom:1px solid var(--rule-link);padding-bottom:3px;transition:border-color var(--dur-fast) ease}
.rating-big:hover .rating-link{color:var(--ink);border-color:var(--accent)}

.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.review{display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:340px;padding:clamp(24px,2.4vw,36px);background:var(--surface);border:1px solid var(--rule-section);border-radius:var(--radius-card)}
.review-top{display:flex;flex-direction:column;gap:22px}
.quote-mark{fill:var(--accent)}
.review blockquote{font-size:clamp(18px,1.4vw,21px);line-height:1.55;color:var(--text-strong)}
.review figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;border-top:1px solid var(--rule)}
.review-who{display:flex;flex-direction:column;gap:4px;min-width:0}
.review-name{font-size:17px;font-weight:400;color:var(--ink)}
.review-meta{font-size:14px;font-weight:400;color:var(--subtle)}
.review-src{flex:none;font-size:13px;font-weight:400;color:var(--subtle)}

/* ---------- faqs ---------- */

.faq-wrap{max-width:calc(960px + 2 * var(--gutter));display:flex;flex-direction:column;align-items:center;gap:clamp(32px,4vw,56px)}
.faq-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.faq-list{width:100%;border-bottom:1px solid var(--rule)}
.faq-h{font:inherit}
.faq-btn{width:100%;display:flex;align-items:center;gap:24px;padding:24px 0;border:0;border-top:1px solid var(--rule);background:none;text-align:left;cursor:pointer;color:var(--ink)}
.faq-q{flex:1 1 auto;min-width:0;font-size:clamp(18px,1.5vw,22px);line-height:1.4;font-weight:400}
.faq-btn[aria-expanded="false"]:hover .icon-btn{border-color:var(--rule-icon-hover)}
.faq-btn[aria-expanded="true"] .icon-btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.faq-btn[aria-expanded="true"] .icon-v{display:none}
/* FX/EXPAND, open and close on the same symmetrical curve. Rows go from 0fr
   to 1fr so the panel reaches its own content height without measuring it.
   Open by default, so the answers read without JS. */
.faq-panel{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--dur-expand) var(--ease-expand),opacity var(--dur-expand) var(--ease-expand)}
.js .faq-panel:not(.is-open){grid-template-rows:0fr;opacity:0}
.faq-inner{min-height:0;overflow:hidden}
.faq-panel p{padding:0 64px 28px 0;font-size:17px;line-height:1.65;color:var(--muted)}
.faq-foot{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.faq-foot p{font-size:18px;line-height:1.55;color:var(--text)}

/* ---------- call to action ---------- */

.cta{padding-bottom:clamp(16px,3vw,40px)}
.cta-panel{position:relative;display:flex;align-items:flex-end;min-height:clamp(460px,40vw,600px);border-radius:var(--radius-panel);overflow:hidden;background:var(--placeholder);isolation:isolate}
.cta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(36,34,37,.92) 0%,rgba(36,34,37,.6) 45%,rgba(36,34,37,.25) 100%)}
.cta-body{position:relative;width:100%;padding:clamp(28px,5vw,72px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 48px}
.cta-text{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px}
.cta h2{font-size:clamp(40px,6vw,96px);letter-spacing:-.025em}
.cta-text p{max-width:520px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--text-strong)}
.cta-actions{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- social links ---------- */

.socials{display:flex;gap:8px;margin:0}
.social{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 16px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:14px;font-weight:400;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color var(--dur-fast) ease}
.social:hover{border-color:var(--accent);color:var(--ink)}
.social svg{flex:none}
/* 40px to look at, 44px to tap (kit floor). */
.social::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
.foot-col .socials{flex-wrap:wrap}
.socials-glass .social{background:rgba(36,34,37,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- footer ---------- */

.footer{padding-top:clamp(72px,7vw,96px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:40px clamp(24px,4vw,64px)}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.foot-brand > p{max-width:340px;font-size:16px;line-height:1.6;color:var(--muted)}
.foot-rating{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:400;color:var(--muted);text-decoration:none}
.foot-rating strong{color:var(--ink);font-weight:500}
.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.foot-label{font-size:14px;font-weight:400;color:var(--subtle-2);padding-bottom:10px}
.foot-col ul{margin:0 0 18px}
.foot-col li{font-size:16px;font-weight:400;color:var(--muted);padding:10px 0}
.foot-col li:has(a){padding:0}
.foot-col a:not(.btn):not(.social){display:block;padding:10px 0;color:var(--text);text-decoration:none}
.foot-col a:not(.btn):not(.social):hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

.foot-bottom{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-top:clamp(48px,6vw,80px);padding:24px 0 28px;border-top:1px solid var(--rule);font-size:14px;font-weight:400;color:var(--subtle-2)}
.foot-legal{display:flex;flex-direction:column;gap:4px}
.foot-credit a{display:inline-block;padding:12px 0;color:var(--muted);text-decoration:underline;text-underline-offset:4px}

/* ---------- effects ---------- */
/* FX/RISE, FX/BLUR, FX/ZOOM and FX/DRAW, played once by js/modules/reveal.js.
   Every hidden state hangs off .reveal-on, which the head only adds when motion
   is allowed, so reduced motion and a failed script both show the page as is.
   Hiding is instant; only the reveal is transitioned. --i sets the cascade. */
.reveal-on [data-reveal],.reveal-on [data-reveal-group] > *{opacity:0;transform:translate3d(0,var(--rise),0)}
.reveal-on [data-reveal="down"]{transform:translate3d(0,-12px,0)}
.reveal-on [data-reveal="blur"]{filter:blur(12px);transform:translate3d(0,18px,0)}
.reveal-on [data-reveal].is-in,.reveal-on [data-reveal-group].is-in > *{opacity:1;transform:none;filter:none;transition:opacity .9s ease,transform 1.2s var(--ease-reveal),filter 1.2s var(--ease-reveal);transition-delay:calc(var(--i, 0) * var(--stagger))}

/* Tight-set display type hangs its descenders below the line box, and Chrome
   can clip them while the element is moving. Room below, taken back out. */
.reveal-on :is(.section h2,.cta h2,.hero-title){padding-bottom:.12em;margin-bottom:-.12em}

/* Large photos settle from a slight zoom; the hero takes longest. */
.reveal-on [data-zoom] img{transform:scale(1.08)}
.reveal-on [data-zoom].is-in img{transform:none;transition:transform 1.8s var(--ease-reveal)}
.reveal-on .hero-frame[data-zoom].is-in img{transition-duration:2.6s}

/* The lines between the steps draw themselves in, after each step arrives. */
.reveal-on .steps > .step::after{transform:scaleX(0);transform-origin:left center}
.reveal-on .steps.is-in > .step::after{transform:none;transition:transform 1.1s var(--ease-reveal);transition-delay:calc(var(--i, 0) * var(--stagger) + .35s)}

/* Arrows nudge in the direction they point. */
.btn-arrow{transition:transform .35s var(--ease-reveal)}
.btn:hover .btn-arrow{transform:translateX(3px)}

/* ---------- sticky quote bar, phone and tablet ---------- */
/* As on Edinburgh Gardening Services: a floating pill 12px from the screen
   edges. Raised charcoal with a hairline, so it stands off the page. */
.sticky{position:fixed;z-index:15;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface);border:1px solid var(--rule);border-radius:999px;box-shadow:0 16px 40px rgba(0,0,0,.45);transform:translateY(calc(100% + 16px));visibility:hidden;transition:transform .24s var(--ease),visibility 0s linear .24s}
.sticky.is-shown{transform:none;visibility:visible;transition:transform .24s var(--ease),visibility 0s}
.sticky .btn{flex:1;height:44px}
@media (min-width:768px) and (max-width:1023px){
  .sticky{left:auto;width:360px}
}
@media (min-width:1024px){
  .sticky{display:none}
}

/* ---------- tablet and phone ---------- */

@media (max-width:1023px){
  .nav-links{display:none}
  /* Tablet and phone: the hero photo runs edge to edge, no frame. */
  .hero{padding:0}
  .hero-frame{border-radius:0}
  .js .burger{display:block}

  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .svc-big{display:none}
  .svc-inline-img{display:block}

  .steps{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .step{flex-direction:row;gap:20px}
  .step:not(:last-child)::after{left:28px;right:auto;top:68px;bottom:-28px;width:1px;height:auto}
  .reveal-on .steps > .step::after{transform:scaleY(0);transform-origin:center top}
  .steps-cta-top{display:none}
  .steps-cta-bottom{display:flex}

  .about{grid-template-columns:minmax(0,1fr)}
  .about-img{min-height:0;aspect-ratio:4 / 3}

  .reviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .reviews::-webkit-scrollbar{display:none}
  .review{flex:0 0 min(78%,420px);scroll-snap-align:start}

  .faq-panel p{padding-right:0}

  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1 / -1}
}

@media (min-width:1024px){
  .menu{display:none}
}

@media (hover:none),(pointer:coarse),(max-width:1023px){
  .hint-touch{display:inline}
  .hint-mouse{display:none}
}

/* ---------- phone ---------- */

@media (max-width:767px){
  .nav-cta{display:none}
  .svc-panel{padding-left:0}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .menu,.menu *,.sticky,.burger-line,.icon-btn svg,.svc-big-img,.tile-img img,.faq-panel{transition:none !important}
}