/* ==========================================================================
   LE Pools LLC — site.css
   Hand-converted from the Claude Design export. Every inline style, every
   style-hover / style-focus attribute in the original now lives here.
   ========================================================================== */

/* --- fonts: self-hosted Poppins, latin + latin-ext only ------------------ */
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/poppins-300-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/poppins-300-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/poppins-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/poppins-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --- tokens ------------------------------------------------------------- */
:root{
  /* Brand blue is 2.71:1 against white — it fails WCAG AA in BOTH directions,
     so it is used for decoration only (rules, the wave, bullets, big fills
     that carry no text). --blue-deep is the text-safe blue: 4.72:1 with white.
     See README "Contrast" for the full table. */
  --blue:#4BA7D0;
  --blue-deep:#2B79A1;   /* 4.86:1 on #fff, 4.60:1 on --panel, 4.86:1 under white */
  --blue-light:#7CC6E6;

  --ink:#141414;
  --near-black:#111111;
  --body:#46525A;
  --body-soft:#4D5A63;
  --body-quiet:#5B6771;
  --muted:#5F6B74;
  --note:#68737B;

  --on-dark:#B9C4CB;
  --on-dark-muted:#8B979F;
  --on-dark-label:#75828A;

  --hairline:#E9EEF1;
  --hairline-2:#ECF0F2;
  --hairline-3:#EEF2F4;
  --field-border:#DDE5EA;
  --dark-rule:#262E34;
  --dark-rule-2:#232A2F;
  --panel:#F7F9FA;
  --off-white:#FAF9F5;   /* brand token; the approved design uses #fff + --panel */

  --wrap:1180px;
  --gut:clamp(20px,4vw,32px);
  --pad-y:clamp(64px,9vw,112px);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* --- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  font-family:Poppins,"Century Gothic",Helvetica,Arial,sans-serif;
  background:#fff;color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:var(--blue-deep);text-decoration:none}
a:hover{color:var(--ink)}
input,textarea,select,button{font:inherit;color:inherit}
::selection{background:var(--blue-deep);color:#fff}

/* visible focus everywhere, keyboard only */
:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.hero :focus-visible,.faq :focus-visible,.site-footer :focus-visible{
  outline-color:#fff}

.skip-link{
  position:absolute;left:12px;top:-64px;z-index:100;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 4px 4px;
  font-size:14px;font-weight:500;transition:top .12s ease-in}
.skip-link:focus{top:0;color:#fff}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* --- shared layout ------------------------------------------------------ */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:var(--pad-y)}
.autofit{display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
[id]{scroll-margin-top:84px}
/* The navigation wraps onto multiple rows on narrow screens. */
@media (max-width:639px){[id]{scroll-margin-top:184px}}

.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--blue-deep);margin-bottom:18px}
.on-dark .eyebrow{color:var(--blue)}          /* 5.6:1 on #111 — safe on dark */
.h1{font-size:clamp(38px,6.6vw,66px);line-height:1.05;font-weight:300;
  letter-spacing:-.025em;text-wrap:balance}
.h2{font-size:clamp(29px,4.2vw,42px);line-height:1.12;font-weight:300;letter-spacing:-.02em}
.h2--sm{font-size:clamp(28px,4vw,40px);line-height:1.14}
.h3{font-size:21px;font-weight:500;letter-spacing:-.01em}
.lede{font-size:18px;line-height:1.65;color:var(--body-soft);font-weight:300;text-wrap:pretty}
.mono{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.note{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--note)}

.btn{display:inline-block;border-radius:999px;padding:17px 34px;font-size:15px;
  font-weight:500;border:1px solid transparent;transition:background-color .15s,color .15s,border-color .15s}
.btn--primary{background:var(--blue-deep);color:#fff}
.btn--primary:hover{background:#fff;color:var(--near-black)}
.btn--ghost{border-color:#39434A;color:#fff}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.arrow{font-size:15px;font-weight:500;display:inline-block}
/* On the near-black sections the text-safe blue goes the wrong way: --blue-deep
   is only 4.03:1 on #111, while plain --blue is 7.0:1 there. */
.on-dark .arrow{color:var(--blue)}
.on-dark .arrow:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* --- header ------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline-2)}
@supports not (backdrop-filter:blur(4px)){.site-header{background:#fff}}
.site-header .wrap{padding-block:16px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.lockup{display:flex;align-items:flex-end;gap:12px;color:var(--ink)}
.lockup:hover{color:var(--ink)}
.lockup__mark{width:58px;height:38.8px;flex:none}
.lockup__word{font-size:13px;font-weight:400;letter-spacing:.34em;
  text-transform:uppercase;padding-bottom:2px}
.site-nav{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;
  font-size:13.5px;letter-spacing:.02em}
.site-nav a{color:var(--body)}
.site-nav a:hover{color:var(--ink)}
.site-nav .nav-cta{background:var(--blue-deep);color:#fff;padding:12px 22px;
  border-radius:999px;font-weight:500;letter-spacing:.03em}
.site-nav .nav-cta:hover{background:var(--ink);color:#fff}
.site-nav .nav-tel{font-weight:500;color:var(--blue-deep);white-space:nowrap}
.site-nav .nav-tel:hover{color:var(--ink)}
/* Keep section links on one row and contact options together on mobile. */
@media (max-width:639px){
  .site-nav{gap:12px 18px}
  .site-nav .nav-tel{padding-block:10px}
}
@media (max-width:359px){
  .site-nav{column-gap:6px}
  .site-nav .nav-cta{padding-inline:14px}
}

/* --- hero --------------------------------------------------------------- */
.hero{background:var(--near-black);color:#fff;position:relative;overflow:hidden}
.hero__grid{display:grid;gap:clamp(40px,5vw,64px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  padding-block:clamp(60px,8vw,104px) 0}
.hero__copy{padding-bottom:clamp(60px,8vw,104px)}
.hero__lede{margin-top:26px;font-size:19px;line-height:1.6;color:var(--on-dark);
  max-width:460px;font-weight:300;text-wrap:pretty}
.hero__cta{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.hero__facts{display:flex;gap:40px;margin-top:56px;padding-top:32px;
  border-top:1px solid var(--dark-rule-2);flex-wrap:wrap}
.hero__facts dt{font-size:13px;color:#8FA0AA}
.hero__facts dd{font-size:15px;margin-top:2px}
.hero__facts a{color:#fff}
.hero__facts a:hover{color:var(--blue)}

/* service log — solid deep blue so the white readings clear AA */
.log{align-self:stretch;min-height:clamp(300px,46vw,560px);display:flex}
.log__inner{flex:1;background:var(--blue-deep);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(28px,4vw,48px)}
.log__title{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff}
.log__rows{display:flex;flex-direction:column;margin-top:28px}
.log__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 0;border-top:1px solid rgba(255,255,255,.34)}
.log__row:last-child{border-bottom:1px solid rgba(255,255,255,.34)}
.log__row dt{font-size:15px;color:#fff}
.log__row dd{font-size:clamp(26px,3vw,34px);font-weight:300;color:#fff;letter-spacing:-.02em}
.log__row dd small{font-size:15px}
.log__foot{margin-top:26px;font-size:15px;line-height:1.6;color:#fff;
  font-weight:300;max-width:300px}

/* --- full-bleed photo bands --------------------------------------------- */
.band{margin:0;width:100%;overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band--hero{height:clamp(220px,21vw,322px)}
.band--hero img{object-position:62% 68%}
.band--services{height:clamp(200px,24vw,300px);margin-top:24px}
.band--services img{object-position:center 55%}

/* --- trust band --------------------------------------------------------- */
.trust{background:var(--blue-deep);color:#fff}
.trust ul{display:flex;flex-wrap:wrap;gap:10px 40px;align-items:center;
  font-size:13.5px;letter-spacing:.05em;padding-block:22px}

/* --- services ----------------------------------------------------------- */
.services__head{align-items:start;margin-bottom:64px}
.services__head .lede{padding-top:clamp(0px,3vw,42px)}
.card-grid{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.card{background:#fff;padding:36px clamp(24px,3vw,34px) 40px;min-height:260px;
  display:flex;flex-direction:column;transition:background-color .15s}
.card:hover{background:#FAFCFD}
.card--cta{justify-content:center}
.card__num{font-family:var(--mono);font-size:12px;color:var(--blue-deep);letter-spacing:.1em}
.card h3{margin-top:20px}
.card--cta h3{margin-top:0}
.card p{margin-top:14px;font-size:15px;line-height:1.68;color:var(--body-quiet);
  font-weight:300;text-wrap:pretty}
.card .arrow{margin-top:18px;font-size:14.5px}
@media (prefers-reduced-motion:reduce){.card{transition:none}}

/* --- dark split (green-pool recovery) ----------------------------------- */
.split{background:var(--near-black);color:#fff}
.split .wrap{display:grid;gap:clamp(32px,4vw,56px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  padding-block:clamp(56px,8vw,96px)}
.split figure{margin:0;aspect-ratio:480/230;border:1px solid var(--dark-rule);overflow:hidden}
.split figure img{width:100%;height:100%;object-fit:cover}
.split p{margin-top:20px;font-size:17px;line-height:1.7;color:var(--on-dark);
  font-weight:300;text-wrap:pretty}
.split .arrow{margin-top:26px}

/* --- process ------------------------------------------------------------ */
.process{background:var(--panel);border-top:1px solid var(--hairline-3);
  border-bottom:1px solid var(--hairline-3)}
.process .h2{max-width:620px}
.steps{display:grid;gap:32px;margin-top:64px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.step{border-top:2px solid var(--blue);padding-top:24px}
.step__n{font-size:13px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.step h3{margin-top:12px;font-size:20px;font-weight:500}
.step p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--body-quiet);
  font-weight:300;text-wrap:pretty}

/* --- plans -------------------------------------------------------------- */
.plans__head{display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:24px;margin-bottom:56px}
.plans__head p{font-size:14px;color:var(--muted);max-width:340px;line-height:1.6;font-weight:300}
.plans{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.plan{border:1px solid #E5EBEE;border-radius:4px;padding:36px clamp(24px,3vw,34px);
  display:flex;flex-direction:column;background:#fff;color:var(--ink)}
.plan--dark{background:var(--near-black);color:#fff;border-color:var(--near-black)}
.plan h3{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  font-weight:500}
.plan--dark h3{color:var(--on-dark-muted)}
.plan__price{display:flex;align-items:baseline;gap:8px;margin-top:26px;flex-wrap:wrap}
.plan__price span{font-size:15px;color:var(--muted)}
.plan--dark .plan__price span{color:var(--on-dark-muted)}
.plan__price strong{font-size:clamp(36px,3.6vw,46px);font-weight:300;letter-spacing:-.03em}
.plan__note{margin-top:10px}
.plan--dark .plan__note{color:var(--on-dark-label)}
.plan__blurb{margin-top:18px;font-size:15px;line-height:1.6;color:var(--muted);font-weight:300}
.plan--dark .plan__blurb{color:var(--on-dark-muted)}
.plan ul{display:flex;flex-direction:column;gap:12px;margin-top:32px;padding-top:28px;
  border-top:1px solid var(--hairline)}
.plan--dark ul{border-top-color:#2A3237}
.plan li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;font-weight:300}
.plan li::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--blue);
  margin-top:8px;flex:none}
.plan .arrow{margin-top:auto;padding-top:34px;font-size:14.5px}
.plan--dark .arrow{color:var(--blue)}
.plan--dark .arrow:hover{color:#fff}

/* --- the visit ---------------------------------------------------------- */
.visit{background:var(--near-black);color:#fff}
.visit__head{display:grid;gap:clamp(32px,5vw,64px);align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.visit__head p{font-size:17px;line-height:1.7;color:var(--on-dark);font-weight:300;text-wrap:pretty}
.gallery{display:grid;gap:16px;margin-top:52px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.gallery figure{margin:0;aspect-ratio:500/236;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover}
.checks{display:grid;gap:0 32px;margin-top:48px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.checks li{padding:24px 0;border-top:1px solid var(--dark-rule)}
.checks li span{font-family:var(--mono);font-size:11.5px;color:var(--blue);letter-spacing:.1em}
.checks li p{margin-top:12px;font-size:17px;font-weight:300}
.checks li.checks__last{grid-column:1/-1;margin-top:24px;background:var(--blue-deep);
  padding:24px 26px;display:flex;align-items:baseline;gap:14px;border-top:0}
.checks li.checks__last span{color:#fff}
.checks li.checks__last p{margin-top:0;font-size:17px;font-weight:400}

/* --- about -------------------------------------------------------------- */
/* The About photo is a wide short band (its native aspect), so centring it in a
   row sized by the taller text column left it adrift. Top-align instead, so its
   edge lines up with the eyebrow and the composition reads as deliberate. */
.about{display:grid;gap:clamp(40px,5vw,72px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.about>div{padding-top:4px}
/* 540/230 is the About photo's native aspect. The design had 540/430, which
   cover-cropped away 46% of a deliberately wide composition and then upscaled the
   remaining 289px by 1.92x - visibly grainy. Matching the source keeps the whole
   frame at a 1.03x upscale. Revert to 540/430 only alongside a ~1120x892 original.
   No min-height: it would override the aspect and reintroduce the crop. */
.about figure{margin:0;position:relative;width:100%;aspect-ratio:540/230;
  display:flex;align-items:flex-end;overflow:hidden}
.about figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The photo is only ~143px tall at 375px wide, so the old 19px floor wrapped to
   two lines and the gradient covered 75% of the image. Lower floors keep the
   caption to one line and under half the frame; desktop values are unchanged
   because the clamps hit their vw/max there. */
.about figcaption{position:relative;width:100%;
  padding:clamp(26px,4.5vw,56px) clamp(20px,3vw,32px) clamp(16px,2.2vw,26px);
  background:linear-gradient(to top,rgba(17,17,17,.96) 0%,rgba(17,17,17,.86) 55%,rgba(17,17,17,0) 100%);
  color:#fff;font-size:clamp(16px,2.2vw,24px);font-weight:300;line-height:1.3}
.about figcaption em{color:var(--blue-light);font-style:normal}
.about p{margin-top:24px;font-size:17px;line-height:1.7;color:var(--body-soft);
  font-weight:300;text-wrap:pretty}
.about p+p{margin-top:18px}
.cred{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:24px;
  border-top:1px solid var(--hairline);flex-wrap:wrap}
/* Slot for the official CPO badge. The markup is commented out in index.html
   until the real artwork exists, so this styles nothing yet - it is here so the
   badge lands correctly the moment the <img> is un-commented. Works for a square
   or wider badge; height is pinned and width follows. */
.cred__seal{height:72px;width:auto;max-width:120px;flex:none;object-fit:contain}
.cred__pill{border:1px solid var(--blue-deep);color:var(--blue-deep);border-radius:999px;
  padding:8px 18px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.cred span:last-child{font-size:14.5px;color:var(--body-quiet);font-weight:300}

/* --- reviews ------------------------------------------------------------ */
.reviews{background:var(--panel);border-top:1px solid var(--hairline-3);
  border-bottom:1px solid var(--hairline-3)}
.reviews .wrap{padding-block:clamp(56px,8vw,96px)}
.reviews__head{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:16px}
.reviews__head h2{font-size:32px;font-weight:300;letter-spacing:-.02em}
.reviews__head .note{font-size:11.5px}
.review-grid{display:grid;gap:20px;margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.review{margin:0;background:#fff;border:1px dashed #B6C4CD;padding:34px 30px;
  display:flex;flex-direction:column;min-height:200px}
.review p{font-size:16.5px;line-height:1.6;color:var(--muted);font-weight:300;font-style:italic}
.review footer{margin-top:auto;padding-top:24px;font-size:13px;letter-spacing:.06em;
  color:var(--note);text-transform:uppercase}

/* --- service area ------------------------------------------------------- */
/* Top-aligned for the same reason as .about: the photo is a wide short band and
   the text column (heading + copy + eight area pills) is much taller. */
.areas{display:grid;gap:64px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.areas>div{padding-top:4px}
.areas p{margin-top:22px;font-size:17px;line-height:1.7;color:var(--body-soft);font-weight:300}
.areas ul{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.areas li{border:1px solid var(--field-border);border-radius:999px;padding:9px 18px;
  font-size:14px;color:var(--body)}
/* 500/230 is the tile photo's native aspect. The design's 500/300 cropped 117px
   off a shot that runs coping-left to open-water-right, then upscaled the
   remaining 383px into a 558px box. Native keeps the frame at 90% of the box.
   No min-height: it would override the aspect and reintroduce the crop.
   Revert to 500/300 only alongside a ~1120x672 original. */
.areas figure{margin:0;width:100%;aspect-ratio:500/230;overflow:hidden}
.areas figure img{width:100%;height:100%;object-fit:cover}

/* --- FAQ (details/summary — works with zero JS) ------------------------- */
.faq{background:var(--near-black);color:#fff}
.faq .wrap{max-width:900px;padding-block:clamp(64px,9vw,104px)}
.faq h2{font-size:clamp(28px,4vw,40px);font-weight:300;letter-spacing:-.02em;margin-bottom:48px}
.faq__list{border-bottom:1px solid var(--dark-rule)}
.faq details{border-top:1px solid var(--dark-rule)}
.faq summary{padding:26px 0;display:flex;justify-content:space-between;align-items:center;
  gap:24px;cursor:pointer;font-size:19px;font-weight:400;list-style:none;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq summary::after{content:"+";font-size:26px;font-weight:300;color:var(--blue);
  flex:none;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 60px 30px 0;font-size:16.5px;line-height:1.7;color:var(--on-dark);
  font-weight:300;text-wrap:pretty}
/* progressive enhancement adds .faq--anim; without JS the panel just appears */
.faq--anim details[open] .faq__panel{animation:faq-open .22s ease-out}
@keyframes faq-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq--anim details[open] .faq__panel{animation:none}}

/* --- quote form --------------------------------------------------------- */
.quote{display:grid;gap:clamp(40px,5vw,72px);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.quote__intro p{margin-top:22px;font-size:17px;line-height:1.7;color:var(--body-soft);font-weight:300}
.quote__direct{margin-top:34px;padding-top:28px;border-top:1px solid var(--hairline)}
.quote__direct dt{font-size:13px;color:var(--muted)}
.quote__direct dd{font-size:19px;font-weight:400;margin-top:4px}
.quote__direct dd+dt{margin-top:16px}
.form{background:var(--panel);border:1px solid var(--hairline);padding:clamp(24px,4vw,40px);
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr))}
.form label{display:flex;flex-direction:column;gap:8px}
.form .full{grid-column:1/-1}
.form .lbl{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.form .lbl em{font-style:normal;text-transform:none;letter-spacing:.02em;color:var(--note)}
.form .hint{font-size:13.5px;line-height:1.5;color:var(--body-quiet);font-weight:300;margin-top:-2px}

/* --- form step headings ------------------------------------------------- */
.form__step{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);font-weight:500;
  margin:0;padding-bottom:14px;border-bottom:1px solid var(--field-border)}
.form__step:not(:first-child){margin-top:14px}
.form__step span{display:grid;place-items:center;width:20px;height:20px;border-radius:999px;
  background:var(--blue-deep);color:#fff;font-size:11px;letter-spacing:0;flex:none}
.form__step em{font-style:normal;text-transform:none;letter-spacing:.02em;
  color:var(--note);font-weight:400}

/* --- radio / checkbox groups -------------------------------------------- */
.form fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.form legend{padding:0;margin-bottom:2px}
.choices{display:flex;flex-direction:column;gap:2px;min-width:0}
.choices li{min-width:0}
.choices--cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:2px 18px}
/* No negative margin here: it makes each row wider than its container and pushes
   the option text past the page edge on narrow phones. */
.choices label{flex-direction:row;align-items:flex-start;gap:11px;cursor:pointer;
  padding:9px 8px;border-radius:4px;font-size:15px;line-height:1.45;
  font-weight:300;color:var(--ink);min-width:0}
.choices label:hover{background:#fff}
.choices label span{min-width:0;overflow-wrap:break-word}
.choices input{accent-color:var(--blue-deep);width:17px;height:17px;margin:1px 0 0;flex:none}
.choices input:focus-visible{outline:3px solid var(--blue-deep);outline-offset:2px}

/* --- photos: asked for by email, not uploaded ---------------------------- */
.photo-ask{background:#fff;border:1px dashed var(--field-border);border-radius:4px;
  padding:20px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.photo-ask__copy{font-size:14.5px;line-height:1.6;color:var(--body-quiet);font-weight:300}
.photo-ask__btn{display:inline-block;border:1px solid var(--blue-deep);color:var(--blue-deep);
  border-radius:999px;padding:11px 22px;font-size:14px;font-weight:500;
  transition:background-color .15s,color .15s}
.photo-ask__btn:hover{background:var(--blue-deep);color:#fff}
/* `.form label` is class+type, so a bare `.photo-ask__check` loses to it and the
   checkbox stacks above its text. Scoping under .form outranks it. */
.form .photo-ask__check{flex-direction:row;align-items:center;gap:10px;font-size:14.5px;
  font-weight:300;cursor:pointer;color:var(--ink)}
.form .photo-ask__check input{accent-color:var(--blue-deep);width:17px;height:17px;margin:0;flex:none}
@media (prefers-reduced-motion:reduce){.photo-ask__btn{transition:none}}

/* Kept for the day file uploads move onto a paid endpoint - not used today. */
.field-file input[type=file]{background:#fff;border:1px dashed var(--field-border);border-radius:3px;
  padding:14px;font-size:14px;width:100%;cursor:pointer;color:var(--body-quiet)}
.field-file input[type=file]:hover{border-color:var(--blue-deep)}
.field-file input[type=file]::file-selector-button{
  background:var(--blue-deep);color:#fff;border:0;border-radius:999px;
  padding:9px 18px;margin-right:14px;font-size:13.5px;font-weight:500;cursor:pointer}
/* Text-like fields only. Radios, checkboxes and the file input have their own
   rules above; without these :not() guards this later, equal-specificity rule
   overrides them and stretches a radio button to the full row width. */
.form input:not([type=radio]):not([type=checkbox]):not([type=file]),
.form select,.form textarea{background:#fff;border:1px solid var(--field-border);
  border-radius:3px;padding:13px 14px;font-size:15px;width:100%}
.form textarea{resize:vertical}
.form input:not([type=radio]):not([type=checkbox]):focus,
.form select:focus,.form textarea:focus{border-color:var(--blue-deep)}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
  outline:3px solid var(--blue-deep);outline-offset:1px}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__actions{grid-column:1/-1;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap}
.form__note{flex-basis:100%;font-size:13px;line-height:1.5;color:var(--note);font-weight:300;margin:0}
.form__fallback{font-size:13.5px;font-weight:500;text-decoration:underline}
.form button{background:var(--blue-deep);color:#fff;border:0;border-radius:999px;
  padding:16px 34px;font-size:15px;font-weight:500;cursor:pointer;transition:background-color .15s}
.form button:hover{background:var(--ink)}
.form__status{font-size:14px;color:var(--blue-deep);font-weight:500}
.form__status[data-state="error"]{color:#A8323C}
@media (prefers-reduced-motion:reduce){.form button{transition:none}}

/* --- footer ------------------------------------------------------------- */
.site-footer{background:var(--near-black);color:var(--on-dark-muted)}
.site-footer .wrap{padding-block:clamp(48px,7vw,72px) 40px;display:grid;gap:40px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,195px),1fr))}
.site-footer .lockup{color:#fff}
.site-footer .lockup:hover{color:#fff}
.site-footer__blurb{margin-top:22px;font-size:15px;line-height:1.7;max-width:320px;font-weight:300}
.footer-col{display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.footer-col h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-label);margin-bottom:6px;font-weight:400}
.footer-col a{color:var(--on-dark-muted)}
.footer-col a:hover{color:#fff}
.site-footer__legal{border-top:1px solid var(--dark-rule-2)}
.site-footer__legal .wrap{padding-block:24px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-size:13px;grid-template-columns:none}
.site-footer__legal .mono{font-family:var(--mono);letter-spacing:.05em;
  text-transform:uppercase;color:var(--on-dark-label)}

/* --- print -------------------------------------------------------------- */
@media print{
  .site-header,.skip-link,.band,.gallery,.form{display:none}
  body{color:#000;background:#fff}
  .hero,.split,.visit,.faq,.site-footer{background:#fff;color:#000}
  .faq details:not([open]) .faq__panel{display:block}
}