:root{
  --abyss:#04121c; --abyss-2:#0a2033; --abyss-3:#123047;
  --line:rgba(160,205,225,.18);
  --aqua:#4fd1c5; --aqua-hi:#6fe0d6;
  --paper:#eef5f8; --paper-soft:#a9c3d1; --paper-faint:#7793a4;
  --display:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,32px);
  --section:clamp(56px,9vw,104px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
/* Light falls off with depth, so the page gets darker as you scroll. Fixed
   attachment so it reads as one body of water rather than as a gradient that
   restarts. */
body{background:var(--abyss);color:var(--paper);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 18% 0%, rgba(79,209,197,.075) 0%, rgba(18,48,71,0) 58%),
    linear-gradient(180deg, #081f2e 0%, #061826 42%, var(--abyss) 100%)}
img{max-width:100%;display:block}
a{color:var(--aqua);text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,6vw,4rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:600}
h3{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1.1em}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.wrap>.col{max-width:62ch}
.section{padding:var(--section) 0}
.eyebrow{font-family:var(--display);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);margin:0 0 .9em}
.lede{font-size:clamp(1.08rem,2vw,1.3rem);color:var(--paper-soft)}
.muted{color:var(--paper-soft)}

.masthead{position:sticky;top:0;z-index:20;background:rgba(4,18,28,.82);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
  color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--aqua);
  box-shadow:0 0 0 4px rgba(79,209,197,.16);flex:none}
.mast-nav{display:flex;align-items:center;gap:18px}
.mast-nav a.lnk{font-size:.9rem;color:var(--paper-soft);text-decoration:none;white-space:nowrap}
.mast-nav a.lnk:hover{color:var(--aqua)}
.mast-nav a.lnk[aria-current=page]{color:var(--paper)}
a.cta{font-family:var(--display);font-weight:600;font-size:.9rem;text-decoration:none;
  color:var(--abyss);background:var(--aqua);padding:9px 16px;border-radius:999px;white-space:nowrap}
a.cta:hover{background:var(--aqua-hi)}
/* Below 780px the three region links do not fit beside the brand and the
   button, and hiding them outright leaves a phone with no navigation at all —
   the exact failure the reference site's header once had. They move into a
   slim strip of their own instead. */
@media (max-width:780px){ .mast-nav a.lnk{display:none} }
.region-strip{display:none}
@media (max-width:780px){
  .region-strip{display:flex;gap:8px;padding:10px var(--pad);overflow-x:auto;
    background:var(--abyss-2);border-bottom:1px solid var(--line);
    position:sticky;top:64px;z-index:19;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .region-strip::-webkit-scrollbar{display:none}
  .region-strip a{flex:none;font-family:var(--display);font-size:.86rem;font-weight:500;
    color:var(--paper-soft);text-decoration:none;padding:6px 13px;border-radius:999px;
    border:1px solid var(--line);white-space:nowrap}
  .region-strip a[aria-current=page]{color:var(--abyss);background:var(--aqua);border-color:transparent}
}

/* A region page carries three short paragraphs. Left alone in a 62ch column
   they leave most of the section empty and the page reads thin, so the ask —
   the only thing on the page that wants an answer — sits beside them where it
   has presence rather than trailing off underneath. */
.two{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
@media (max-width:820px){ .two{grid-template-columns:minmax(0,1fr)} }
.ask{background:var(--abyss-2);border:1px solid var(--line);border-left:3px solid var(--aqua);
  border-radius:14px;padding:24px 26px}
.ask p:last-child{margin-bottom:0}
.ask .eyebrow{margin-bottom:.7em}
@media (max-width:420px){
  .masthead .wrap{gap:10px}
  .brand{font-size:.95rem;gap:8px}
  a.cta{font-size:.82rem;padding:8px 13px}
}

/* Split hero, on the dark ground.
   The source photos are portrait or near-square and desktop viewports are
   landscape, so a full-bleed hero with object-fit:cover throws away 40-55% of
   every frame — which is the defect this replaced. Instead the photo gets a
   column shaped like the file itself: --photo-ar is the image's width/height,
   the column is that ratio at full hero height, and cover has nothing left to
   crop. Capped at 58% so the copy always has room.
   The reference site solves the same problem the same way; what differs here
   is only the ground it sits on. */
.hero-split{
  --photo-ar:0.8;
  --hero-h:calc(100svh - 64px);
  /* The seam. Named once so the grid and the mirror below cannot disagree
     about where the photograph ends — if they drift by a pixel the join stops
     being a join. */
  --photo-w:min(calc(var(--hero-h) * var(--photo-ar)), 58%);
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:var(--photo-w) 1fr;
  min-height:var(--hero-h);
  background:var(--abyss);
}

/* The water.
   The full-bleed hero this replaced felt like being underwater for one reason:
   the photograph was BEHIND the type, so the copy side carried the blue-green
   light of the frame rather than a flat colour. Cropping the photo to achieve
   that was the defect; losing the light was the cost of fixing it, and flat
   #04121c beside a photograph reads as black.
   So the frame goes back behind everything as an out-of-focus ground — blurred
   past the point where composition matters, which is also why nothing is
   cropped in any sense that counts — and the sharp, correctly-shaped photo sits
   on top of it. Same image, so no extra bytes. */
.hero-split .split-ambient{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.hero-split .split-ambient picture,
.hero-split .split-ambient img{display:block;width:100%;height:100%}

/* Base water: the whole frame, evenly blurred.
   Scoped to DIRECT children on purpose. The bleed layer below nests its own
   image inside .split-ambient, so a plain descendant selector here matches
   that one too — identical specificity, later in the file, so this rule
   silently overrode the bleed's blur and transform and the bleed rendered as
   a second copy of the base. The tell was measurements that would not move
   after a real change. */
.hero-split .split-ambient > picture > img,
.hero-split .split-ambient > img{
  object-fit:cover;
  /* scale past the edges so the blur has real pixels to sample instead of
     fading into the container border */
  transform:scale(1.18);
  filter:blur(46px) saturate(190%) brightness(1.02);
}

/* The continuation: the photograph carried past its own edge.
   Stretching the whole frame from the far left gave the copy side colour but
   no join — the pixels arriving at the seam were from the middle of the
   picture, so the edge stayed a hard line with a gradient beside it. Bill:
   "I want the edge of the photo and the right hand side to appear more
   seamless… those light blues with all the variation to bleed into the right."

   Mirroring solves it exactly. The same image, at the same size, flipped about
   the seam: the column of pixels immediately right of the edge IS the column
   immediately left of it, so the join is continuous by construction rather
   than by tuning. Water reflects, so a mirrored sea reads as more sea; the
   diver sits far enough left that only open water and kelp come across.

   Blur stays low (14px) on purpose — the whole point is that the ripple and
   the variation survive. The dissolve is the mask's job, not the blur's, and
   the deep ground underneath finishes it. */
.hero-split .split-mirror{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  --fade:linear-gradient(90deg,
    #000 0%, #000 var(--photo-w),
    rgba(0,0,0,.93) calc(var(--photo-w) + 7%),
    rgba(0,0,0,.66) calc(var(--photo-w) + 18%),
    rgba(0,0,0,.32) calc(var(--photo-w) + 32%),
    transparent calc(var(--photo-w) + 48%));
  -webkit-mask-image:var(--fade);
  mask-image:var(--fade);
}
.hero-split .split-mirror img{
  position:absolute;top:0;left:var(--photo-w);
  width:var(--photo-w);height:auto;aspect-ratio:var(--photo-ar);
  object-fit:cover;
  /* scaleX(-1) about the left origin flips the copy onto [-w, 0]; the
     translate puts it back on [0, w]. Net effect: its LEFT edge is the
     original's RIGHT edge. */
  transform:translateX(100%) scaleX(-1);
  transform-origin:left center;
  /* 22px, not 14. Low blur keeps the ripple, which is the point, but it also
     keeps the mirrored diver and the reef legible as shapes and they read as
     smudges rather than as water. 22 dissolves the objects and leaves the
     surface light. */
  filter:blur(22px) saturate(155%) brightness(1.05);
}
/* The glow is centred over the COPY column, not the photo. Centred at 26% it
   sat behind the sharp photograph, which already has its own light — all the
   lift went where it could not be seen and the type side stayed black. */
.hero-split .split-ambient::after{
  content:"";position:absolute;inset:0;
  background:
    /* One water, four photographs. Sampling the frame is what makes the copy
       side feel lit, but it also means a warm frame lights it warm — Catalina's
       sunset harbour turned the ground brown and broke the scheme. A flat blue
       veil over the blurred layer keeps every hero in the same body of water
       while still letting the frame's light and movement through. */
    linear-gradient(rgba(9,48,70,.34), rgba(9,48,70,.34)),
    /* The glow belongs AT the seam, not past it. Centred at 64% the copy side
       measured 48,81,99 at x=50% and 79,106,116 at x=60% — brighter further
       from the photograph, which reads as a lamp behind the text rather than
       as light coming out of the frame. At the seam the profile falls away
       monotonically and the eye reads direction. */
    radial-gradient(110% 90% at 48% 36%, rgba(79,209,197,.15) 0%,
      rgba(15,64,92,.27) 34%, rgba(4,18,28,.72) 78%),
    linear-gradient(180deg, rgba(4,18,28,.20) 0%, rgba(4,18,28,.40) 50%,
      rgba(4,18,28,.86) 100%);
}
/* On a phone the copy sits under the photo rather than beside it, so the
   horizontal deepening would darken the wrong half. */
@media (max-width:860px){
  .hero-split .split-ambient::after{
    background:
      linear-gradient(rgba(9,48,70,.34), rgba(9,48,70,.34)),
      radial-gradient(120% 70% at 50% 22%, rgba(79,209,197,.12) 0%,
        rgba(15,64,92,.26) 36%, rgba(4,18,28,.72) 78%),
      linear-gradient(180deg, rgba(4,18,28,.24) 0%, rgba(4,18,28,.48) 46%,
        rgba(4,18,28,.90) 100%);
  }
}
/* The falloff, applied ON TOP of the mirror rather than under it.
   The photograph is above every ambient layer, so any scrim inside
   .split-ambient darkens the mirrored side and not the photo — which puts a
   luminance step exactly at the seam and undoes the join. Measured before this
   moved: rgb(102,170,207) at seam-2 against rgb(51,93,107) at seam+2.
   So the mirror now matches the photo at the edge, and the darkening begins a
   few percent later, where the copy actually starts. Light falling off away
   from the frame is also just what light does. */
.hero-split .split-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    /* Every stop is keyed off the seam, not off the viewport, so the join
       stays bright at whatever width the column resolves to. The copy begins
       about 4.5% past the seam, so the ramp starts at 6%: the visible bleed is
       the first few percent, and the text sits in the part that has already
       fallen off. */
    linear-gradient(90deg,
      rgba(4,18,28,0) calc(var(--photo-w) + 1%),
      rgba(4,18,28,.20) calc(var(--photo-w) + 6%),
      rgba(4,18,28,.44) calc(var(--photo-w) + 17%),
      rgba(4,18,28,.62) calc(var(--photo-w) + 33%),
      rgba(4,18,28,.71) 100%),
    linear-gradient(180deg, rgba(4,18,28,0) 40%, rgba(4,18,28,.30) 100%);
}

.hero-split .split-photo,
.hero-split .split-copy{position:relative;z-index:1}
/* Regions get the inverse arrangement, because only landscape masters exist
   for them and the home page's maths does not survive a wide one.
   Sizing the column from a hero height fails twice over: a 2.074 master needs
   a column wider than the 58% cap, and even under the cap a grid row stretches
   to whichever column is taller, so the copy silently forces the photo cell
   past its ratio and cover crops it again. Measured: 28%, then 22%.
   So the photo governs itself. Fixed column width, aspect-ratio from the file,
   align-self:start so nothing stretches it. Zero crop at any width, whatever
   the copy does, and a taller copy just leaves more of the ground showing —
   which is the same colour anyway. */
.hero-split.region{--photo-w:52%;grid-template-columns:var(--photo-w) 1fr;min-height:0}
.hero-split.region .split-photo{align-self:start;aspect-ratio:var(--photo-ar);height:auto}
.hero-split.region .split-copy{padding-block:clamp(36px,4.5vw,64px)}
.hero-split .split-photo{position:relative;overflow:hidden;background:var(--abyss-2)}
.hero-split .split-photo picture{display:block;width:100%;height:100%}
.hero-split .split-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-split .split-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,5vw,76px) clamp(28px,4.5vw,72px)}
.hero-split .split-copy h1{font-size:clamp(1.9rem,3.4vw,3.1rem);max-width:17ch;
  margin-bottom:20px;text-wrap:balance}
/* Hero copy sits on a lit ground, so the secondary tones have to be brighter
   than they are on flat sections. Measured against the rendered water at
   rgb(51,89,100): --paper-soft came out 4.14:1 and --aqua 4.10:1, both under
   AA. These clear it at 5.9 and 5.0. */
.hero-split .split-copy .lede{max-width:48ch;margin:0;color:#d5e6ee}
.hero-split .split-copy .eyebrow{color:#96e9df}
/* The scrim exists only for the phone overlay treatment. It needs the same
   z-index as the photo and the copy: adding isolation + z-index:1 to those two
   left the scrim at auto, so it rendered UNDERNEATH the photograph and stopped
   doing anything at all. Invisible in the CSS, obvious in a 390px render. */
.hero-split .split-scrim{display:none;z-index:1}

@media (max-width:860px){
  /* Home: a phone screen is portrait, and there is a 9:16 master of the same
     frame, so the full-bleed overlay is the framing that actually fits. */
  /* Two sticky bars on a phone, not one: the masthead is 64px and the region
     strip another ~58. Subtracting only the masthead pushed the lede off the
     bottom of the viewport. */
  .hero-split.full-phone{--hero-h:calc(100svh - 122px);display:block;position:relative;min-height:var(--hero-h)}
  .hero-split.full-phone .split-photo{position:absolute;inset:0}
  /* the sharp photo is already full-bleed behind the type here */
  .hero-split.full-phone .split-ambient,
  .hero-split.full-phone .split-mirror,
  .hero-split.full-phone .split-veil{display:none}
  /* stacked, so a horizontal falloff would darken the wrong half */
  .hero-split.region .split-mirror,
  .hero-split.region .split-veil{display:none}
  .hero-split.full-phone .split-scrim{display:block;position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(4,18,28,.52) 0%,rgba(4,18,28,.32) 22%,
      rgba(4,18,28,.76) 58%,rgba(4,18,28,.96) 100%)}
  .hero-split.full-phone .split-copy{position:relative;z-index:2;
    min-height:var(--hero-h);justify-content:flex-end;padding-bottom:clamp(36px,9vw,64px)}
  /* Regions: only landscape masters exist, so stack and give the photo its own
     aspect ratio. Nothing is cropped at all on a phone. */
  .hero-split.region{display:block;min-height:0}
  .hero-split.region .split-photo{aspect-ratio:var(--photo-ar);height:auto}
  .hero-split.region .split-copy{padding:clamp(28px,7vw,44px) var(--pad) clamp(20px,5vw,32px)}
}

.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:2.4em}
.card{background:var(--abyss-2);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card-body{padding:18px 20px 22px}
.card-body p{margin:0;font-size:.95rem;color:var(--paper-soft)}

/* The fifth and sixth offerings span the whole row. Six cards in an auto-fit
   grid would orphan the last ones; making the two most distinctive offerings
   full-width features solves the layout and the hierarchy at once. Photo
   beside the copy rather than above it, so they don't read as bigger versions
   of the four above. The second mirrors the first so two full-width rows
   don't read as a repeated slab; on a phone both stack photo-first. */
.card.feature{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.card.feature img{aspect-ratio:auto;height:100%;min-height:300px}
.card.feature .card-body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,3.2vw,44px)}
.card.feature .eyebrow{margin-bottom:.6em}
.card.feature h3{font-size:1.5rem}
.card.feature.reverse img{order:2}
.card.feature.reverse .card-body{order:1}
@media (max-width:760px){
  .card.feature{display:flex;flex-direction:column}
  .card.feature img{min-height:0;aspect-ratio:3/2}
  .card.feature.reverse img{order:1}
  .card.feature.reverse .card-body{order:2}
}
/* The one line of feeling on a page of practical copy, so it gets room and a
   size nothing else on the page has. Aqua rather than paper: it should read as
   the site talking, not as another paragraph. */
.creed{font-family:var(--display);font-weight:500;
  font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.32;color:var(--aqua);
  /* Shares the signup card's 720px measure and its centring, so it reads as
     the line above that card rather than a stray sentence at the page edge.
     A left-aligned line over a centred card looks like a mistake. */
  max-width:720px;margin:0 auto clamp(24px,3.4vw,40px);text-wrap:balance}
.creed span{display:block;max-width:22ch}
@media (max-width:700px){.creed span{max-width:none}}

.tint{background:linear-gradient(180deg,#0b2436 0%,var(--abyss-2) 60%,#08202f 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.regions{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2em}
.region-link{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:14px;
  background:var(--abyss-2);text-decoration:none;color:var(--paper)}
.region-link:hover{border-color:var(--aqua)}
.region-link strong{font-family:var(--display);font-size:1.05rem;display:block;margin-bottom:4px}
.region-link span{font-size:.92rem;color:var(--paper-soft)}

.signup{background:var(--abyss-3);border:1px solid var(--line);border-radius:18px;
  padding:clamp(28px,5vw,48px);max-width:720px;margin:0 auto}
form.sub{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.4em}
form.sub input[type=email]{flex:1 1 260px;min-width:0;background:rgba(4,18,28,.6);
  border:1px solid var(--line);color:var(--paper);font:inherit;font-size:1rem;
  padding:13px 16px;border-radius:10px}
form.sub input[type=email]::placeholder{color:var(--paper-faint)}
form.sub input[type=email]:focus{outline:2px solid var(--aqua);outline-offset:1px;border-color:transparent}
form.sub button{flex:0 0 auto;font-family:var(--display);font-weight:600;font-size:1rem;
  background:var(--aqua);color:var(--abyss);border:0;padding:13px 26px;border-radius:10px;cursor:pointer}
form.sub button:hover{background:var(--aqua-hi)}
form.sub button[disabled]{opacity:.55;cursor:default}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:.85rem;color:var(--paper-faint);margin:.9em 0 0}
.formmsg{margin:1em 0 0;font-size:.95rem;min-height:1.4em}
.formmsg.ok{color:var(--aqua)}
.formmsg.err{color:#ff9d84}

/* The demand survey.
   Email alone tells you someone is interested. A boat is bought against annual
   value per person, which is price x frequency, so the form asks both — and
   the region page's "Tell us" card was promising exactly this and delivering
   an email field. Native <dialog>: focus trap, Esc, and inert background for
   free, and nothing to load. */
dialog.survey{
  width:min(680px,calc(100vw - 2*var(--pad)));max-height:min(86vh,900px);
  padding:0;border:1px solid var(--line);border-radius:18px;
  background:var(--abyss-2);color:var(--paper);overflow:auto;
}
dialog.survey::backdrop{background:rgba(2,10,16,.72);backdrop-filter:blur(3px)}
.survey-inner{padding:0 clamp(24px,4vw,40px) clamp(24px,4vw,40px)}
/* A sticky bar rather than a floated button. Sticky + float put the close
   control on top of whatever field happened to be at the scroll position —
   it rendered as an x inside the phone input. */
.survey-bar{position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;
  padding:12px 12px 8px;
  background:linear-gradient(180deg,var(--abyss-2) 68%,rgba(10,32,51,0))}
.survey-close{width:34px;height:34px;display:grid;place-items:center;
  background:rgba(4,18,28,.6);border:1px solid var(--line);border-radius:50%;
  color:var(--paper-soft);font-size:1.3rem;line-height:1;cursor:pointer}
.survey-close:hover{color:var(--paper);border-color:var(--paper-faint)}
.survey h2{font-size:clamp(1.4rem,3vw,2rem)}

.field{margin:0 0 22px}
.field > label,.field .field-label{display:block;font-family:var(--display);
  font-size:.92rem;font-weight:600;margin:0 0 8px;color:var(--paper)}
.field-hint{font-size:.86rem;color:var(--paper-faint);margin:-4px 0 10px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{
  width:100%;background:rgba(4,18,28,.6);border:1px solid var(--line);
  color:var(--paper);font:inherit;font-size:1rem;padding:12px 14px;border-radius:10px}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--paper-faint)}
.field input:focus,.field textarea:focus{outline:2px solid var(--aqua);
  outline-offset:1px;border-color:transparent}

.opt-group{display:flex;flex-wrap:wrap;gap:8px}
/* Each option is its own control, so the label is the hit area and the whole
   chip is tappable on a phone rather than a 13px box. */
.opt-group label{display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;
  font-size:.93rem;color:var(--paper-soft);cursor:pointer;
  background:rgba(4,18,28,.45)}
.opt-group label:hover{border-color:var(--paper-faint)}
.opt-group input{accent-color:var(--aqua);margin:0;width:16px;height:16px;flex:none}
.opt-group label:has(input:checked){border-color:var(--aqua);color:var(--paper);
  background:rgba(79,209,197,.10)}
.opt-group label:has(input:focus-visible){outline:2px solid var(--aqua);outline-offset:2px}

/* Qualify this selector. A bare .consent-label (0,1,0) loses to the
   .field > label rule (0,1,1) and the entire disclosure renders as a bold
   display heading. Specificity, not order. */
.field.consent-field > label.consent-label{display:flex;gap:11px;align-items:flex-start;
  font-family:var(--body);font-weight:400;font-size:.86rem;
  color:var(--paper-faint);line-height:1.55;cursor:pointer}
.consent-label input{accent-color:var(--aqua);margin-top:3px;flex:none;
  width:16px;height:16px}
.consent-label strong{display:block;font-family:var(--display);font-size:.92rem;
  color:var(--paper);margin-bottom:3px}
.consent-label .fine{display:block;margin-top:6px;font-size:.8rem;opacity:.85}

.survey .btn{font-family:var(--display);font-weight:600;font-size:1rem;
  background:var(--aqua);color:var(--abyss);border:0;padding:13px 28px;
  border-radius:10px;cursor:pointer}
.survey .btn:hover{background:var(--aqua-hi)}
.survey .btn[disabled]{opacity:.55;cursor:default}
.form-status{margin:14px 0 0;font-size:.95rem}
.form-status.err{color:#ff9d84}
.survey-thanks h2{margin-top:.2em}

/* the secondary way in, under the email field */
.tell-more{margin:14px 0 0;font-size:.93rem}
.tell-more button{background:none;border:0;padding:0;font:inherit;
  color:var(--aqua);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tell-more button:hover{color:var(--aqua-hi)}

footer{border-top:1px solid var(--line);padding:44px 0;font-size:.9rem;color:var(--paper-faint)}
.foot-grid{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start}
.foot-links{display:flex;flex-direction:column;gap:8px}
.foot-links a{color:var(--paper-soft);text-decoration:none}
.foot-links a:hover{color:var(--aqua)}
.foot-legal{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);max-width:70ch}

/* ---- Location map ------------------------------------------------------
   The reference site's chart with the regulation layer removed. Two columns
   on a wide screen, stacked on a phone; below 900px the pins swap names for
   numbers that match the list, because the names are unreadable and
   overlapping at that size and the list is already saying them. The grid
   track is minmax(0,1fr), not 1fr — a bare 1fr is minmax(auto,1fr) and
   refuses to shrink below the chart's min-content width, which puts the
   whole page into a horizontal scroll. */
.cm{display:grid;gap:28px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:start;margin-top:2.2em}
.cm-intro{max-width:62ch}
.cm-chart{position:relative;position:sticky;top:84px}
.cm-svg{display:block;width:100%;height:auto;border-radius:14px;overflow:visible}
.cm-water{fill:#072434}
.cm-svg{background:#072434}
.cm-grat line{stroke:rgba(140,214,228,.10);stroke-width:1;vector-effect:non-scaling-stroke}
.cm-land{fill:#0d2b3d;stroke:rgba(140,214,228,.42);stroke-width:1.2;
  vector-effect:non-scaling-stroke}

.cm-pin{cursor:pointer}
.cm-hit{fill:transparent}
.cm-leader{stroke:rgba(140,214,228,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.cm-true{fill:rgba(140,214,228,.75)}
.cm-halo{fill:rgba(79,209,197,.14);stroke:rgba(79,209,197,.55);stroke-width:1.2;
  vector-effect:non-scaling-stroke;transition:fill .15s,stroke .15s}
.cm-dot{fill:var(--aqua)}
.cm-name{fill:#dbeef4;font-family:var(--display);font-size:13px;font-weight:600;
  paint-order:stroke;stroke:rgba(4,18,28,.85);stroke-width:3.5px;
  stroke-linejoin:round;pointer-events:none}
.cm-num{display:none;fill:#04121c;font-family:var(--display);font-size:11px;
  font-weight:700;pointer-events:none}
.cm-pin:hover .cm-halo{fill:rgba(79,209,197,.3)}
.cm-pin.is-on .cm-halo{fill:var(--aqua);stroke:#eafffb;stroke-width:2}
.cm-pin.is-on .cm-dot{fill:#04121c}

.cm-inset-frame{fill:none;stroke:rgba(140,214,228,.5);stroke-width:1.2;
  vector-effect:non-scaling-stroke}
.cm-inset-loc{fill:none;stroke:rgba(140,214,228,.5);stroke-width:1;
  stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.cm-inset-leader{stroke:rgba(140,214,228,.35);stroke-width:1;
  vector-effect:non-scaling-stroke}
.cm-inset-title{fill:#9fc4d2;font-family:var(--display);font-size:12px;font-weight:600}
.cm-inset-hit{fill:transparent;cursor:pointer}
.cm-inset-halo{fill:rgba(79,209,197,.2);stroke:rgba(79,209,197,.6);stroke-width:1;
  vector-effect:non-scaling-stroke}
.cm-inset-pin.is-on .cm-inset-halo{fill:var(--aqua)}
.cm-inset-num{fill:#dbeef4;font-family:var(--display);font-weight:700}
.cm-inset-pin.is-on .cm-inset-num{fill:#04121c}

.cm-scale line{stroke:rgba(213,230,238,.75);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.cm-scale text{fill:rgba(213,230,238,.8);font-family:var(--display);font-size:12px}
.cm-credit{margin:.9em 0 0;font-size:.76rem;line-height:1.5;color:var(--paper-faint)}

.cm-lede{margin:0 0 1em;font-size:.95rem;color:var(--paper-soft)}
.cm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
  max-height:none}
.cm-row{display:block;width:100%;text-align:left;background:transparent;
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;cursor:pointer;
  color:inherit;font:inherit;transition:border-color .15s,background .15s}
.cm-row:hover{border-color:rgba(79,209,197,.5);background:rgba(79,209,197,.06)}
.cm-row.is-on{border-color:var(--aqua);background:rgba(79,209,197,.13)}
.cm-row-head{display:flex;align-items:center;gap:9px}
.cm-row-n{flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(79,209,197,.18);color:var(--aqua);
  font-family:var(--display);font-size:.72rem;font-weight:700}
.cm-row.is-on .cm-row-n{background:var(--aqua);color:#04121c}
.cm-row-name{font-family:var(--display);font-weight:600;font-size:.98rem}
.cm-row-blurb{display:block;margin-top:5px;font-size:.86rem;line-height:1.5;
  color:var(--paper-soft)}
.cm-more{margin:2px 0 0 34px}
.cm-more summary{cursor:pointer;font-size:.78rem;color:var(--paper-faint);
  padding:3px 0}
.cm-more summary:hover{color:var(--aqua)}
.cm-facts{margin:.3em 0 .6em;padding-left:1.1em;font-size:.82rem;line-height:1.55;
  color:var(--paper-soft)}
.cm-facts li{margin-bottom:.35em}
.cm-facts a{color:var(--paper-faint);text-decoration:none;font-size:.75rem;
  white-space:nowrap}
.cm-facts a:hover{color:var(--aqua);text-decoration:underline}

.cm-form{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);
  max-width:640px}
.cm-count{margin:0 0 .8em;font-size:.9rem;color:var(--aqua)}
.cm-note-label{display:block;font-size:.85rem;color:var(--paper-soft);margin-bottom:.4em}
.cm-note,.cm-email{width:100%;background:var(--abyss);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;color:var(--paper);font:inherit;font-size:.95rem}
.cm-note{resize:vertical}
.cm-form .btn{font-family:var(--display);font-weight:600;font-size:.95rem;
  background:var(--aqua);color:#04121c;border:0;border-radius:999px;
  padding:12px 22px;cursor:pointer}
.cm-form .btn:hover{background:var(--aqua-hi)}
.cm-form .btn[disabled]{opacity:.55;cursor:default}
.cm-submit{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.cm-submit .cm-email{flex:1 1 240px;width:auto}
.cm-msg{margin:.7em 0 0;font-size:.88rem;min-height:1.2em}
.cm-msg.is-err{color:#f7a57c}
.cm-msg.is-ok{color:var(--aqua)}

@media (max-width:900px){
  .cm{grid-template-columns:minmax(0,1fr)}
  .cm-chart{position:relative;top:auto}
  .cm-name{display:none}
  .cm-num{display:block;font-size:var(--cm-fs)}
  /* The r attribute as a CSS property is SVG 2; where it is unsupported the
     pins stay small and the numbered list below still does the whole job.
     No backticks in this file's CSS comments -- it is inside a template
     literal and one backtick ends the string. */
  .cm-dot{r:var(--cm-dot)}
  .cm-halo{r:var(--cm-halo)}
  .cm-hit{r:var(--cm-hit)}
  .cm-list{max-height:none}
}