/* ==========================================================================
   Stripes Cleaning Services
   All colour lives in the tokens below — change these five and the whole
   site follows.
   ========================================================================== */

:root{
  --sky:        #96D3FC;   /* PRIMARY brand colour */
  --sky-2:      #B9E2FA;   /* secondary light blue */
  --sky-wash:   #D7EFFE;   /* lightest — stripe overlay */
  --sky-pale:   #B9E2FA;
  --sky-deep:   #174665;   /* navy carries the "deep accent" role */

  --cream:      #FCFAF6;   /* page background */
  --header-bg:  #FAF6F3;   /* navigation bar */
  --sand:       #F3EFE9;
  --navy:       #174665;   /* borders, text, outlines, small details */
  --navy-deep:  #073B59;

  /* accents stay inside the blue / navy / cream system — no third hue */
  --butter:     #96D3FC;
  --clay:       #174665;
  --sage:       #B9E2FA;

  --ink:        #174665;
  --ink-soft:   #40708F;

  --display: "Russo One", "Arial Black", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* 1510px of CONTENT + 82px page padding either side = 1674px outer,
     so sections land on a 1510px grid at a ~1672px desktop. */
  --wrap: 1674px;
  --nav-h: 140px;
  --edge: clamp(20px, 5vw, 82px);
  --radius: 22px;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.5;
  /* `clip`, not `hidden` — `hidden` makes body a scroll container and breaks
     both the sticky nav and smooth scrolling on <html>. */
  overflow-x:clip;
}

img,svg{ max-width:100%; display:block }
a{ color:inherit }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{ position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--navy); color:var(--cream); padding:14px 22px; font-weight:700 }
.skip:focus{ left:12px; top:12px }
:focus-visible{ outline:3px solid var(--sky-deep); outline-offset:3px; border-radius:4px }

/* ---------- type ---------- */

.display{
  font-family:var(--display); font-weight:400;
  line-height:1.02; letter-spacing:.01em; text-transform:uppercase; margin:0;
}
.display--lg  { font-size:clamp(28px, 3.4vw, 46px) }
.display--xl  { font-size:clamp(34px, 4.4vw, 62px) }

.eyebrow{
  font-family:var(--cond);
  font-size:clamp(15px,1.15vw,19px); font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy); margin:0 0 18px;
}
.eyebrow--light{ color:var(--sky) }

/* ---------- buttons ---------- */

/* Flat, bordered, 20–24px radius. No heavy shadows anywhere. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--cond); font-size:clamp(17px,1.4vw,22px); font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  padding:18px 32px; border-radius:22px;
  border:2px solid var(--navy); background:transparent; color:var(--navy);
  cursor:pointer; white-space:nowrap;
  transition:background-color .2s ease, color .2s ease;
}

.btn--solid { background:var(--sky);    color:var(--navy) }
.btn--solid:hover{ background:var(--navy); color:var(--cream) }
.btn--butter{ background:var(--butter); color:var(--navy) }
.btn--butter:hover{ background:var(--navy); color:var(--cream) }
.btn--navy  { background:var(--navy);   color:var(--cream) }
.btn--navy:hover{ background:var(--navy-deep) }
.btn--outline{ background:transparent; color:var(--navy) }
.btn--outline:hover{ background:var(--navy); color:var(--cream) }
.btn--sm{ padding:13px 24px; font-size:clamp(15px,1.15vw,18px); border-radius:18px }

/* ---------- the stripe motif ---------- */

.stripe-band{
  height:26px;
  border-top:3px solid var(--navy);
  border-bottom:3px solid var(--navy);
  background:repeating-linear-gradient(
    -45deg,
    var(--sky) 0 16px,
    var(--cream) 16px 32px
  );
}
.stripe-band--top{ border-top:0 }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{ background:var(--cream) }
.hero__inner{
  max-width:var(--wrap); margin:0 auto;
  padding:50px var(--edge) clamp(60px,7vw,110px);
  display:grid; grid-template-columns:1.1fr .95fr; gap:65px;
  /* the copy column is centred against the card rather than pinned to its
     top — the copy rewraps as the viewport narrows, so a fixed top offset
     drifts out of balance at every width but the one it was measured at. */
  align-items:center;
}

/* ---- left: image card ---- */
/* Just the photograph. No tint, no caption, no stripe overlay — the stripe
   motif lives in .stripe-band between sections, not on top of the picture. */
.herocard{
  overflow:hidden;
  aspect-ratio:755/675;
  border:2px solid var(--navy);
  border-radius:24px;
  background:var(--sky-2);
}
.herocard > img{ width:100%; height:100%; object-fit:cover }

/* ---- right: headline, copy, CTA ---- */

.hero__title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(42px,4.75vw,72px); line-height:.98; letter-spacing:1px;
  margin:0 0 38px;
  color:var(--sky);
  -webkit-text-stroke:2px var(--navy);
  paint-order:stroke fill;
  text-shadow:3px 3px 0 var(--navy);
}
/* keep each line whole — CSS otherwise breaks them at the hyphens */
.hero__title span{ display:block; white-space:nowrap }

.hero__copy p{
  margin:0 0 35px; color:var(--navy); font-weight:400;
  font-size:clamp(17px,1.5vw,23px); line-height:1.45;
}
.hero__copy p:last-of-type{ margin-bottom:38px }

.hero__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:16px;
  width:490px; max-width:100%; height:84px;
  background:var(--sky); color:var(--navy);
  border:2px solid var(--navy); border-radius:22px;
  font-family:var(--cond); font-weight:800; text-transform:uppercase;
  font-size:clamp(18px,1.55vw,24px); letter-spacing:.05em;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
}
.hero__btn svg{ width:1.15em; height:1.15em; flex:0 0 auto }
.hero__btn:hover{ background:var(--navy); color:var(--cream) }

/* ==========================================================================
   NAV — sits above the hero in the DOM and sticks to the top of the viewport
   from the first pixel of scroll.
   ========================================================================== */

.nav-wrap{
  position:sticky; top:0; z-index:90;
  background:var(--header-bg);
  border-bottom:2px solid var(--navy);   /* thin navy divider */
}
.nav{
  max-width:var(--wrap); margin:0 auto;
  min-height:var(--nav-h); padding:0 var(--edge);
  /* minmax(0,1fr) — a bare 1fr floors at min-content, which lets the wider
     right-hand group push the logo off-centre. */
  display:grid;
  /* centre track is the spec's 250px logo, easing down on narrower screens */
  grid-template-columns:minmax(0,1fr) clamp(160px,15vw,250px) minmax(0,1fr);
  align-items:center; gap:clamp(14px,2vw,40px);
}

/* Nav type and gaps scale with the viewport. They have to: the links are
   `nowrap`, so if they don't fit their minmax(0,1fr) track they overflow it
   and slide under the centred logo. */
.nav__group{
  display:flex; align-items:center; gap:clamp(11px,1.55vw,32px);
  list-style:none; margin:0; padding:0; min-width:0;
}
.nav__group--right{ justify-content:flex-end }
.nav__group a:not(.nav__cta){
  font-family:var(--cond);
  font-size:clamp(14px,1.18vw,21px); font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none; color:var(--navy);
  white-space:nowrap; position:relative; padding:4px 0;
}
.nav__group a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--navy); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav__group a:not(.nav__cta):hover::after{ transform:scaleX(1) }

.nav__cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--sky); color:var(--navy);
  font-family:var(--cond); font-weight:800; text-transform:uppercase;
  font-size:clamp(14px,1.18vw,21px); letter-spacing:.04em;
  padding:clamp(12px,1.4vw,22px) clamp(16px,1.9vw,32px);
  border-radius:21px; text-decoration:none; white-space:nowrap;
  transition:background-color .2s ease, color .2s ease;
}
.nav__cta:hover{ background:var(--navy); color:var(--cream) }

.nav__brand{ display:block; line-height:0; justify-self:center; width:100% }
/* auto width + both caps: the box shrinks to the art, so it can never sit
   wider or taller than its track and collide with the links */
.nav__brand img{
  width:auto; height:auto; margin:0 auto;
  max-width:100%; max-height:calc(var(--nav-h) - 34px);
}

.nav__toggle,.nav__mobile-cta{ display:none }
.nav__toggle{
  border:2.5px solid var(--navy); background:var(--cream); border-radius:12px;
  width:50px; height:44px; cursor:pointer; align-items:center; justify-content:center;

}
.nav__bars,.nav__bars::before,.nav__bars::after{
  display:block; width:22px; height:2.5px; background:var(--navy); border-radius:2px;
  transition:transform .22s ease, opacity .22s ease;
}
.nav__bars{ position:relative }
.nav__bars::before,.nav__bars::after{ content:""; position:absolute; left:0 }
.nav__bars::before{ top:-7px } .nav__bars::after{ top:7px }
.nav__toggle[aria-expanded="true"] .nav__bars{ background:transparent }
.nav__toggle[aria-expanded="true"] .nav__bars::before{ transform:translateY(7px) rotate(45deg) }
.nav__toggle[aria-expanded="true"] .nav__bars::after{ transform:translateY(-7px) rotate(-45deg) }

.drawer{
  position:fixed; inset:var(--nav-h) 0 0; z-index:80;
  background:var(--navy); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:0 var(--edge); overflow-y:auto;
}
/* display:flex above would otherwise beat the [hidden] attribute */
.drawer[hidden]{ display:none }
.drawer ul{ list-style:none; margin:0; padding:0 }
.drawer a{ display:block; padding:11px 0; text-decoration:none;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(26px,7.4vw,42px); line-height:1.1 }
.drawer__call{ margin-top:22px; font-weight:700; letter-spacing:.1em; color:var(--sky) }

/* ==========================================================================
   WELCOME
   ========================================================================== */

.welcome{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(72px,9vw,128px) var(--edge);
  display:grid; gap:clamp(36px,5vw,76px);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center;
}
.welcome__media{ position:relative }
.welcome__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:3px solid var(--navy); border-radius:var(--radius);

}
.welcome__tag{
  position:absolute; right:-14px; top:26px;
  background:var(--butter); color:var(--navy);
  border:2.5px solid var(--navy); border-radius:999px;
  padding:8px 18px; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;

}
.welcome__copy .display{ color:var(--navy); margin-bottom:26px }
.welcome__copy p{ margin:0 0 16px; color:var(--ink-soft) }
.welcome__kicker{ font-size:19px; color:var(--navy) !important; font-weight:500 }
.welcome__sign{
  font-size:13px !important; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sky-deep) !important; margin-bottom:30px !important;
}
.welcome__cta{ display:flex; flex-wrap:wrap; gap:12px }

/* ==========================================================================
   STANDARDS
   ========================================================================== */

.standards{
  background:var(--navy); color:var(--cream);
  padding:clamp(72px,9vw,130px) var(--edge);
}
.standards__head{ max-width:var(--wrap); margin:0 auto clamp(44px,5vw,72px) }
.standards__head .display{ color:var(--cream) }

.standards__grid{
  max-width:var(--wrap); margin:0 auto; list-style:none; padding:0;
  display:grid; gap:clamp(26px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  counter-reset:none;
}
.std{ border-top:3px solid rgba(129,182,241,.45); padding-top:22px }
.std__num{
  display:block; font-family:var(--display); font-size:44px;
  color:var(--butter); line-height:1; margin-bottom:14px;
}
.std h3{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:27px; letter-spacing:.01em; margin:0 0 4px; color:var(--sky);
}
.std__sub{
  margin:0 0 14px !important; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#9FC3E6;
}
.std p{ margin:0; color:#D8E6F3; font-size:15.5px }

/* ==========================================================================
   SERVICES
   ========================================================================== */

.services{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(72px,9vw,128px) var(--edge);
}
.services__head{ max-width:60ch; margin-bottom:clamp(42px,5vw,72px) }
.services__head .display{ color:var(--navy); margin-bottom:20px }
.services__lede{ margin:0; color:var(--ink-soft); font-size:clamp(16px,1.4vw,19px) }

.svc{
  display:grid; gap:clamp(28px,4vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;
  padding:clamp(32px,4vw,56px) 0;
  border-top:3px solid var(--sand);
}
.svc--flip .svc__media{ order:2 }
.svc__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:3px solid var(--navy); border-radius:var(--radius);

}
.svc__index{
  display:inline-block; font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sky-deep);
  margin-bottom:12px;
}
.svc__copy h3{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,3vw,40px); line-height:1; letter-spacing:.01em;
  margin:0 0 16px; color:var(--navy);
}
.svc__copy > p{ margin:0 0 20px; color:var(--ink-soft) }
.svc__list{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.svc__list li{ position:relative; padding-left:28px; font-size:15.5px; color:var(--ink) }
.svc__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:14px; height:3px; border-radius:2px; background:var(--sky);
}

.services__more{
  list-style:none; margin:clamp(30px,4vw,52px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.services__more li{
  background:var(--sand); border:2.5px solid var(--navy); border-radius:999px;
  padding:9px 20px; font-size:14px; font-weight:500;
}

/* ==========================================================================
   MIDWAY BAND
   ========================================================================== */

.midway{ position:relative; isolation:isolate; overflow:hidden }
.midway__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2;
}
.midway::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(10,37,64,.88) 0%, rgba(10,37,64,.72) 46%, rgba(10,37,64,.32) 100%);
}
.midway__inner{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(88px,12vw,180px) var(--edge);
  color:var(--cream);
}
.midway__inner .display{ color:var(--cream); margin-bottom:24px }
.midway__inner p{ max-width:46ch; margin:0 0 34px; color:#E2EDF7; font-size:clamp(16px,1.5vw,19px) }

/* ==========================================================================
   REVIEWS
   ========================================================================== */

.reviews{
  background:var(--sand); border-block:3px solid var(--navy);
  padding:clamp(72px,9vw,120px) var(--edge);
}
.reviews__head{ max-width:var(--wrap); margin:0 auto clamp(38px,4vw,60px) }
.reviews__head .display{ color:var(--navy) }

.reviews__wrap{
  max-width:var(--wrap); margin:0 auto;
  display:grid; gap:clamp(22px,3vw,38px);
  grid-template-columns:minmax(230px,.7fr) minmax(0,2.3fr);
  align-items:start;
}
.rating{
  background:var(--navy); color:var(--cream);
  border:3px solid var(--navy); border-radius:var(--radius);
  padding:30px 26px; text-align:center;
}
.rating__score{ font-family:var(--display); font-size:64px; line-height:1; margin:0; color:var(--cream) }
.rating__stars{ color:var(--butter); letter-spacing:.18em; font-size:19px; margin:8px 0 6px }
.rating__meta{ margin:0 0 20px; font-size:13.5px; color:#B9D0E6 }

.reviews__grid{
  display:grid; gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.review{
  margin:0; padding:28px 26px 30px; background:var(--cream);
  border:3px solid var(--navy); border-radius:var(--radius);

  display:flex; flex-direction:column; gap:14px;
}
.review__stars{ color:var(--clay); letter-spacing:.16em; font-size:16px }
.review blockquote{ margin:0; flex:1 }
.review blockquote p{ margin:0; font-size:15.5px; color:var(--ink) }
.review figcaption{
  font-size:12px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--sky-deep);
}

/* ==========================================================================
   GALLERY
   ========================================================================== */

.gallery{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(72px,9vw,128px) var(--edge);
}
.gallery__head{
  display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:end; margin-bottom:clamp(30px,4vw,50px);
}
.gallery__head .display{ color:var(--navy) }
.gallery__head p{ margin:0; color:var(--ink-soft) }
.gallery__head a{ color:var(--navy); font-weight:700; text-underline-offset:4px }

.gallery__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px; grid-template-columns:repeat(4,1fr);
}
.shot{
  display:block; width:100%; padding:0; cursor:zoom-in; background:none;
  border:3px solid var(--navy); border-radius:14px; overflow:hidden;

  transition:transform .2s ease;
}
.shot img{ width:100%; aspect-ratio:4/5; object-fit:cover }
.shot:hover{ transform:translateY(-3px) }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(8,32,58,.94);
  display:flex; align-items:center; justify-content:center; gap:clamp(6px,2vw,26px);
  padding:clamp(14px,4vw,48px);
}
.lightbox[hidden]{ display:none }
.lightbox__stage{ margin:0; max-width:min(1000px,86vw); max-height:86vh }
.lightbox__stage img{
  max-width:100%; max-height:86vh; width:auto; margin:0 auto;
  border:3px solid var(--cream); border-radius:12px;
}
.lightbox__nav,.lightbox__close{
  background:var(--cream); color:var(--navy); border:3px solid var(--navy);
  border-radius:999px; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.lightbox__nav{ width:54px; height:54px; font-size:32px; padding-bottom:5px }
.lightbox__close{ position:absolute; top:18px; right:18px; width:46px; height:46px; font-size:26px }
.lightbox__nav:hover,.lightbox__close:hover{ background:var(--sky) }

/* ==========================================================================
   THE CLUB
   ========================================================================== */

.club{ background:var(--navy); color:var(--cream); padding:clamp(72px,9vw,128px) var(--edge) }
.club__inner{
  max-width:var(--wrap); margin:0 auto;
  display:grid; gap:clamp(36px,4vw,64px);
  grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr); align-items:center;
}
.club__copy .display{ color:var(--cream); margin-bottom:20px }
.club__copy p{ color:#D3E3F1; margin:0 0 30px; max-width:42ch }

.club__tiers{ list-style:none; margin:0; padding:0; display:grid; gap:16px }
.tier{
  position:relative; background:rgba(254,253,248,.06);
  border:2.5px solid rgba(129,182,241,.45); border-radius:var(--radius);
  padding:24px 26px;
}
.tier--featured{ background:var(--sky); border-color:var(--cream) }
.tier--featured h3,.tier--featured p{ color:var(--navy) !important }
.tier__flag{
  position:absolute; top:-13px; right:22px;
  background:var(--butter); color:var(--navy);
  border:2.5px solid var(--navy); border-radius:999px; padding:5px 14px;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.tier h3{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:26px; letter-spacing:.01em; margin:0 0 2px; color:var(--sky);
}
.tier__when{
  margin:0 0 10px !important; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#9FC3E6;
}
.tier p{ margin:0; color:#D8E6F3; font-size:15px; max-width:none }

/* ==========================================================================
   AREAS
   ========================================================================== */

.areas{
  background:var(--sand); border-block:3px solid var(--navy);
  padding:clamp(64px,8vw,110px) var(--edge);
}
.areas .display{ max-width:var(--wrap); margin:0 auto; color:var(--navy) }
.areas__lede{ max-width:min(var(--wrap),62ch); margin:18px auto 34px; color:var(--ink-soft) }
.areas__list{
  max-width:var(--wrap); margin:0 auto; list-style:none; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.areas__list li{
  background:var(--cream); border:2.5px solid var(--navy); border-radius:999px;
  padding:9px 20px; font-size:14px; font-weight:500;
}

/* ==========================================================================
   QUOTE
   ========================================================================== */

.quote{
  background:var(--sky); border-top:3px solid var(--navy);
  padding:clamp(72px,9vw,128px) var(--edge);
  display:grid; gap:clamp(36px,5vw,72px);
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  max-width:calc(var(--wrap) + var(--edge)*2); margin:0 auto;
}
.quote__copy .display{ color:var(--cream); text-shadow:0 3px 0 rgba(16,55,92,.22) }
.quote__copy .eyebrow--light{ color:var(--navy) }
.quote__sub{ margin:24px 0 22px; color:var(--navy); max-width:40ch }
.quote__contacts{ display:flex; flex-direction:column; gap:6px; margin:0 }
.quote__contacts a{
  font-family:var(--display); font-size:clamp(19px,2.2vw,28px);
  color:var(--navy); text-decoration:none; letter-spacing:.01em;
  max-width:100%; overflow-wrap:anywhere;
}
.quote__contacts a:hover{ text-decoration:underline; text-underline-offset:5px }

.quote__form{
  background:var(--cream); border:3px solid var(--navy); border-radius:var(--radius);
  padding:clamp(26px,3vw,38px);
  display:grid; grid-template-columns:1fr 1fr; gap:18px; align-self:start;
}
.hp{ position:absolute; left:-9999px }
.field{ display:flex; flex-direction:column; gap:7px; min-width:0 }
.field--full{ grid-column:1 / -1 }
.field label{
  font-size:11.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--sky-deep);
}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:16px; color:var(--ink); background:var(--cream);
  border:2.5px solid var(--navy); border-radius:11px; padding:12px 14px; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{ resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--sky-deep); box-shadow:0 0 0 4px rgba(150,211,252,.55);
}
.quote__form .btn{ grid-column:1 / -1; justify-self:start }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot{ background:var(--navy); color:var(--cream) }
.foot .stripe-band{ border-bottom-color:var(--navy) }
.foot__top{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(52px,6vw,84px) var(--edge) clamp(40px,5vw,64px);
  display:grid; gap:clamp(32px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.foot__brand img{ height:70px; width:auto; margin-bottom:18px }
.foot__brandcol p{ margin:0; color:#9FB8CE; font-size:14.5px; max-width:34ch }

.foot__nav{ display:flex; gap:clamp(24px,4vw,56px); flex-wrap:wrap }
.foot__nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px }
.foot__nav a{
  text-decoration:none; font-size:12.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:#CFE0F0;
}
.foot__nav a:hover{ color:var(--sky) }

.foot__contact{ display:flex; flex-direction:column; align-items:flex-start; gap:9px }
.foot__contact a:not(.btn){
  font-family:var(--display); font-size:21px; color:var(--cream);
  text-decoration:none; letter-spacing:.01em;
  max-width:100%; overflow-wrap:anywhere;
}
.foot__contact a:not(.btn):hover{ color:var(--sky) }
.foot__contact p{ margin:0 0 10px; color:#9FB8CE; font-size:14.5px }

.foot__bar{
  max-width:var(--wrap); margin:0 auto; padding:20px var(--edge) 26px;
  border-top:1px solid rgba(207,224,240,.22);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:13px; color:#9FB8CE;
}
.foot__bar p{ margin:0; display:flex; gap:22px; flex-wrap:wrap }
.foot__bar a{ color:#9FB8CE; text-decoration:none }
.foot__bar a:hover{ color:var(--sky) }

/* ==========================================================================
   REVEAL
   ========================================================================== */

.reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1) }
.reveal.is-in{ opacity:1; transform:none }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* tablet: headline down to ~55–60px, 40px page padding */
@media (max-width:1180px){
  :root{ --edge:40px; --nav-h:118px }
  .hero__inner{ gap:44px; padding-top:40px }
  .hero__title{ font-size:clamp(46px,5.6vw,60px) }
  .gallery__grid{ grid-template-columns:repeat(3,1fr) }
}

/* The full link row stops fitting around here. Because the links are `nowrap`
   they would overflow their track and slide under the centred logo rather
   than wrap — so hand over to the hamburger while there is still room. */
@media (max-width:1150px){
  :root{ --nav-h:96px }
  /* The toggle and the CTA are different widths, so side-by-side grid tracks
     can only ever centre the logo between them — not in the header. Pin both
     to the edges instead and let the logo have the whole row, so it sits on
     the true centre line at every width. Its max-width keeps it clear of them. */
  .nav{ position:relative; grid-template-columns:1fr }
  .nav__group{ display:none }
  .nav__toggle{
    display:inline-flex; position:absolute; left:var(--edge);
    top:50%; transform:translateY(-50%);
  }
  .nav__mobile-cta{
    display:inline-flex; position:absolute; right:var(--edge);
    top:50%; transform:translateY(-50%);
    padding:12px 18px; border-radius:14px; font-size:15px;
  }
  .nav__brand{ width:auto; max-width:min(180px, calc(100% - 190px)) }
}

@media (max-width:900px){
  :root{ --nav-h:88px; --edge:22px }

  /* stack: image above text, everything left aligned */
  .hero__inner{ grid-template-columns:1fr; gap:32px; padding-top:30px }
  .herocard{ aspect-ratio:4/5; max-width:560px; width:100% }
  .hero__copy{ text-align:left }
  .hero__title{ font-size:clamp(42px,9.6vw,46px); -webkit-text-stroke-width:1.5px }
  .hero__copy p{ max-width:none }
  .hero__btn{ width:100%; height:72px }

  .welcome{ grid-template-columns:1fr }
  .welcome__media{ max-width:420px }
  .svc,.club__inner{ grid-template-columns:1fr }
  .svc--flip .svc__media{ order:0 }
  .svc__media{ max-width:440px }
  .reviews__wrap{ grid-template-columns:1fr }

  /* keep the clearance guard from the 1150px block — a bare 150px here would
     let the lockup grow back under the pinned toggle and CTA */
  .nav__brand{ max-width:min(150px, calc(100% - 190px)) }
}

@media (max-width:640px){
  .gallery__grid{ grid-template-columns:repeat(2,1fr) }
  .quote__form{ grid-template-columns:1fr }
  .hero__cta .btn{ flex:1 1 auto }
  .foot__bar{ justify-content:flex-start }
  .lightbox__nav{ width:44px; height:44px; font-size:26px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  .btn,.shot{ transition:none }
}