/* ==========================================================================
   Pool Headquarters — public Coming Soon page
   Single static document. No framework, no build step, no JavaScript.
   Every string a visitor can read lives in the markup below, once.
   ========================================================================== */

@font-face{
  font-family:'PH Display';
  src:url('/assets/fonts/ph-display.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'PH Body';
  src:url('/assets/fonts/ph-body.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* water */
  --abyss:#021627;
  --deep:#05253e;
  --water:#0a5079;
  --lit:#0f6f9e;

  /* ink */
  --white:#ffffff;
  --spray:rgba(255,255,255,.905);
  --foam:#9fe2f2;          /* tagline — measured against the plate below */
  --quiet:rgba(255,255,255,.70);
  --reagent:#e2542f;       /* divider only; graphic, never text */

  --gutter:clamp(1.25rem,5vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  background:var(--abyss);
  color:var(--spray);
  font-family:'PH Body',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}

/* --------------------------------------------------------------------------
   The water. Five stacked layers, all decorative, all pointer-events:none.
   Only the two caustic planes move, and only via transform, so the whole
   animation stays on the compositor.
   -------------------------------------------------------------------------- */
.water{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
  /* sun entering the surface, top-centre */
  radial-gradient(115% 74% at 50% -10%, rgba(140,225,255,.30) 0%, rgba(140,225,255,0) 60%),
  /* the body of the water, deepening toward the floor */
  linear-gradient(178deg, var(--deep) 0%, var(--water) 30%, var(--lit) 55%, #0a4c72 78%, var(--abyss) 100%);
}

/* Each plane is far larger than the viewport so the drift never exposes an
   edge of the tiled texture. */
.caustic{
  position:absolute;
  left:-50%; top:-50%; width:200%; height:200%;
  background-image:url('/assets/img/caustics.webp');
  background-repeat:repeat;
  mix-blend-mode:screen;
  will-change:transform;
  backface-visibility:hidden;
}
.caustic--near{
  background-size:clamp(420px,52vmax,960px) auto;
  opacity:.25;
  animation:drift-near 71s linear infinite;
}
.caustic--far{
  background-size:clamp(760px,95vmax,1750px) auto;
  opacity:.15;
  filter:blur(1.6px);
  animation:drift-far 113s linear infinite;
}
/* Two co-prime-ish periods on different paths: the pattern never visibly
   repeats, and neither loop has a seam because both end where they began. */
@keyframes drift-near{
  0%  {transform:translate3d(0,0,0) scale(1)}
  25% {transform:translate3d(-1.6%,1.1%,0) scale(1.035)}
  50% {transform:translate3d(-3.1%,-0.7%,0) scale(1.012)}
  75% {transform:translate3d(-1.4%,-1.9%,0) scale(1.041)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes drift-far{
  0%  {transform:translate3d(0,0,0) scale(1.02)}
  33% {transform:translate3d(2.1%,-1.2%,0) scale(1.05)}
  66% {transform:translate3d(1.1%,1.6%,0) scale(1.01)}
  100%{transform:translate3d(0,0,0) scale(1.02)}
}

/* A slow surface breath. Opacity only, and only a few percent, so it reads as
   the sun going in and out rather than as an animation. */
.water::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(88% 58% at 50% 2%, rgba(198,244,255,.16) 0%, rgba(198,244,255,0) 70%);
  mix-blend-mode:screen;
  animation:breathe 29s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* Vignette. Pulls the eye to the middle and holds the corners down. */
.water::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(108% 86% at 50% 44%, rgba(2,16,28,0) 26%, rgba(2,16,28,.44) 62%, rgba(2,16,28,.74) 86%, rgba(2,16,28,.90) 100%);
}

/* --------------------------------------------------------------------------
   The plate: a soft field of shade behind the type. Deliberately not a card —
   no border, no radius, no edge. It exists only so the text keeps its contrast
   while the caustics move underneath it.
   -------------------------------------------------------------------------- */
.plate{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 47%, rgba(3,22,36,.62) 0%, rgba(3,22,36,.44) 46%, rgba(3,22,36,0) 78%);
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */
.page{
  position:relative;z-index:2;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:clamp(2rem,7vh,4rem) var(--gutter) clamp(1.25rem,3.5vh,2rem);
  padding-bottom:max(clamp(1.25rem,3.5vh,2rem),env(safe-area-inset-bottom));
}

.stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  gap:0;
}

/* --- mark --- */
.mark{
  width:clamp(124px,34vw,212px);
  filter:drop-shadow(0 18px 38px rgba(1,14,24,.55));
}

/* --- wordmark --- */
.wordmark{
  margin:clamp(1.85rem,4.4vh,2.9rem) 0 0;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.32rem,7.1vw,3.05rem);
  letter-spacing:.115em;
  line-height:1.06;
  color:var(--white);
  text-transform:uppercase;
  /* the last letter's tracking would otherwise push the line off-centre */
  text-indent:.115em;
  text-shadow:0 2px 22px rgba(2,20,32,.55);
}

.tagline{
  margin:clamp(.75rem,1.8vh,1.05rem) 0 0;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(.615rem,2.62vw,1.02rem);
  letter-spacing:.205em;
  line-height:1.45;
  color:var(--foam);
  text-transform:uppercase;
  text-indent:.205em;
  text-shadow:0 2px 16px rgba(2,20,32,.6);
}

/* --- divider --- */
.rule{
  width:clamp(44px,9vw,72px);
  height:2px;
  margin:clamp(1.6rem,4vh,2.6rem) 0;
  border:0;
  background:var(--reagent);
  border-radius:2px;
  opacity:.95;
}

/* --- announcement --- */
.soon{
  margin:0;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem,9.4vw,4.15rem);
  letter-spacing:.17em;
  line-height:1.02;
  color:var(--white);
  text-transform:uppercase;
  text-indent:.17em;
  text-shadow:0 3px 30px rgba(2,20,32,.6);
}

.support{
  margin:clamp(1.15rem,3vh,1.7rem) 0 0;
  max-width:44ch;
  font-size:clamp(1rem,3.5vw,1.19rem);
  line-height:1.55;
  text-wrap:balance;
  color:var(--spray);
  text-shadow:0 2px 18px rgba(2,20,32,.55);
}
/* On phones the sentence is held in from the gutter so it breaks into two
   balanced lines with air either side, rather than running edge to edge. */
@media (max-width:520px){.support{max-width:87%}}

/* --- footer --- */
.foot{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  margin-top:clamp(2.5rem,6vh,4rem);
  font-size:clamp(.78rem,2.5vw,.855rem);
  line-height:1.5;
  color:var(--quiet);
  text-align:center;
}
.foot a{
  color:var(--quiet);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.26);
  padding-bottom:1px;
  word-break:break-word;
}
.foot a:hover{color:var(--white);border-bottom-color:rgba(255,255,255,.7)}
.foot a:focus-visible{
  outline:2px solid var(--foam);
  outline-offset:3px;
  border-radius:2px;
  color:var(--white);
}

/* --------------------------------------------------------------------------
   Narrow phones: this is a different composition, not a smaller one. The mark
   gives up relative size, the wordmark gives up tracking so it holds one line,
   and the vertical rhythm opens up instead of compressing.
   -------------------------------------------------------------------------- */
@media (max-width:430px){
  /* Sizes below are the largest that keep POOL HEADQUARTERS and COMING SOON
     on a single line at 320, 360, 390, 412 and 430 CSS px. Measured, not guessed. */
  .wordmark{letter-spacing:.075em;text-indent:.075em;font-size:clamp(1.05rem,6.15vw,1.7rem)}
  .tagline{letter-spacing:.13em;text-indent:.13em;font-size:clamp(.68rem,3.3vw,.75rem)}
  .soon{letter-spacing:.14em;text-indent:.14em;font-size:clamp(1.65rem,8.4vw,2.5rem)}
  .plate{background:radial-gradient(78% 44% at 50% 48%, rgba(3,22,36,.66) 0%, rgba(3,22,36,.46) 50%, rgba(3,22,36,0) 82%)}
}

/* Very short landscape viewports: keep everything on one screen. */
@media (max-height:560px) and (orientation:landscape){
  .page{padding-top:clamp(1rem,4vh,2rem)}
  .mark{width:clamp(64px,15vh,110px)}
  .wordmark{margin-top:clamp(.7rem,3.2vh,1.3rem);font-size:clamp(1.05rem,5.4vh,2.1rem)}
  .tagline{margin-top:clamp(.35rem,1.4vh,.7rem);font-size:clamp(.66rem,1.9vh,.85rem)}
  .rule{margin:clamp(.7rem,2.6vh,1.3rem) 0}
  .soon{font-size:clamp(1.6rem,7.4vh,2.9rem)}
  .support{margin-top:clamp(.6rem,2.2vh,1rem);font-size:clamp(.92rem,2.6vh,1.06rem);max-width:34ch}
  .foot{margin-top:clamp(1rem,3vh,1.75rem)}
}

/* Large screens: the composition grows with the room instead of becoming a
   small island in the middle of a very wide page. */

@media (min-width:1720px) and (min-height:900px){
  .mark{width:236px}
  .wordmark{font-size:3.55rem}
  .tagline{font-size:1.16rem}
  .soon{font-size:4.9rem}
  .support{font-size:1.32rem}
  .rule{width:84px}
}

/* --------------------------------------------------------------------------
   Reduced motion: the water stops, but it stops on a good frame. The two
   planes are parked at the offsets they would hold roughly a third of the way
   through their loops, which is where the texture reads best.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .caustic--near{animation:none;transform:translate3d(-1.9%,.6%,0) scale(1.03)}
  .caustic--far {animation:none;transform:translate3d(1.7%,-.9%,0) scale(1.04)}
  .water::before{animation:none;opacity:.85}
}

@media (forced-colors:active){
  .rule{background:CanvasText;forced-color-adjust:none}
}
@media print{
  .water,.plate{display:none}
  body{background:#fff;color:#000}
}


/* ==========================================================================
   ADDED FOR THE MULTI-PAGE SITE
   Everything above this line is the original homepage stylesheet, moved here
   verbatim. Everything below is new and is scoped so it cannot reach the
   homepage's existing elements.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Footer navigation — present on every page, including the homepage.
   -------------------------------------------------------------------------- */
.foot__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:.35rem 1.35rem;
  margin-bottom:.35rem;
}
.foot__nav a{
  color:var(--quiet);
  text-decoration:none;
  border-bottom:0;
  padding-bottom:0;
  letter-spacing:.055em;
}
.foot__nav a:hover{color:var(--white);border-bottom:0}
.foot__nav a[aria-current="page"]{color:var(--spray)}

/* --------------------------------------------------------------------------
   Document pages: /privacy, /terms, /disclaimer, /support
   The water stays, because the identity should not change between the front
   door and the paperwork — but it is quietened right down, and the type is
   given a real reading measure. Readability wins every argument on these pages.
   -------------------------------------------------------------------------- */
.doc .caustic--near{opacity:.09}
.doc .caustic--far{opacity:.06}
.doc .water::before{opacity:.4;animation:none}
.doc .water::after{
  background:linear-gradient(180deg, rgba(2,16,28,.62) 0%, rgba(2,16,28,.78) 42%, rgba(2,16,28,.86) 100%);
}
.doc .plate{
  background:radial-gradient(72% 52% at 50% 22%, rgba(3,22,36,.5) 0%, rgba(3,22,36,0) 82%);
}
.doc .page{
  display:block;
  min-height:100svh;
  padding-top:clamp(1.5rem,4vh,2.5rem);
}

/* --- masthead: the mark, so a document page never feels orphaned --- */
.mast{
  display:flex;align-items:center;gap:.7rem;
  margin:0 auto clamp(2rem,5vh,3rem);
  max-width:44rem;
  text-decoration:none;
  width:100%;
  justify-content:flex-start;
}
.mast img{width:34px;height:34px;flex:none}
.mast span{
  font-family:var(--font-display,'PH Display'),ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-size:.94rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--white);
}
.mast:hover span{color:var(--foam)}
.mast:focus-visible{outline:2px solid var(--foam);outline-offset:5px;border-radius:4px}

/* --- the document column --- */
.doc__body{
  max-width:44rem;
  margin:0 auto;
  padding-bottom:clamp(3rem,8vh,5rem);
}
.doc__eyebrow{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--foam);
  margin:0 0 .75rem;
}
.doc h1{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.75rem,5.2vw,2.6rem);
  line-height:1.12;
  letter-spacing:-.005em;
  color:var(--white);
  margin:0 0 1rem;
  text-wrap:balance;
}
.doc__meta{
  font-size:.85rem;
  color:var(--quiet);
  margin:0 0 clamp(1.75rem,4vh,2.5rem);
}

/* --- the draft banner: unmissable, but not a shout --- */
.draft{
  border-left:3px solid var(--reagent);
  background:rgba(226,84,47,.10);
  padding:1rem 1.15rem;
  margin:0 0 clamp(2rem,5vh,3rem);
  border-radius:0 4px 4px 0;
}
.draft__label{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#ffb59c;
  margin:0 0 .45rem;
}
.draft p{margin:0;font-size:.92rem;line-height:1.6;color:var(--spray)}

/* --- section rhythm --- */
.doc section{margin:0 0 clamp(2rem,5vh,2.75rem)}
.doc h2{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.05rem,2.6vw,1.25rem);
  line-height:1.3;
  color:var(--white);
  margin:0 0 .85rem;
  display:flex;
  gap:.7rem;
  align-items:baseline;
}
.doc h2 .num{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--foam);
  flex:none;
  font-variant-numeric:tabular-nums;
}
.doc h3{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;
  font-size:1rem;
  color:var(--white);
  margin:1.5rem 0 .6rem;
}
.doc p,.doc li{
  font-size:1rem;
  line-height:1.72;
  color:var(--spray);
  margin:0 0 1rem;
}
.doc ul{margin:0 0 1rem;padding-left:1.2rem}
.doc li{margin:0 0 .5rem}
.doc li::marker{color:var(--foam)}
.doc a{color:var(--foam);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.doc a:hover{color:var(--white)}
.doc a:focus-visible{outline:2px solid var(--foam);outline-offset:3px;border-radius:2px;color:var(--white)}
.doc strong{color:var(--white);font-weight:400;font-family:'PH Display',ui-sans-serif,system-ui,sans-serif}

/* --- a body placeholder awaiting counsel --- */
.tbd{
  border:1px dashed rgba(255,255,255,.26);
  border-radius:4px;
  padding:.85rem 1rem;
  margin:0 0 1rem;
  font-size:.9rem;
  line-height:1.6;
  color:var(--quiet);
}
.tbd::before{
  content:"To be supplied by counsel";
  display:block;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#ffb59c;
  margin-bottom:.4rem;
}

/* --- a plain contact block, used on /support --- */
.card{
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  padding:clamp(1.1rem,3vw,1.5rem);
  margin:0 0 1.25rem;
  background:rgba(3,22,36,.34);
}
.card__label{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--foam);margin:0 0 .5rem;
}
.card__value{
  font-size:clamp(1.02rem,3vw,1.18rem);
  line-height:1.5;
  margin:0;
  word-break:break-word;
}
.card p:last-child{margin-bottom:0}

/* --- document footer --- */
.doc .foot{margin-top:0;padding-top:clamp(2rem,5vh,3rem);border-top:1px solid rgba(255,255,255,.12)}
.doc__inner-foot{max-width:44rem;margin:0 auto}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.nf{text-align:center;max-width:32rem;margin:0 auto}
.nf h1{font-size:clamp(1.5rem,5vw,2.2rem);margin-bottom:.85rem}
.nf p{margin:0 auto 1.5rem;max-width:34ch}

@media (max-width:430px){
  .doc__body,.mast,.doc__inner-foot{max-width:none}
  .doc p,.doc li{font-size:.98rem;line-height:1.68}
}

@media (prefers-reduced-motion:reduce){
  .doc .water::before{animation:none}
}


/* --------------------------------------------------------------------------
   Footer, re-asserted after the document rules.
   `.doc a` sets an underline for body copy, and at equal specificity it would
   otherwise reach into the footer and style the navigation differently on
   document pages than on the homepage. The footer must look the same on every
   page, so its rules are restated last.
   -------------------------------------------------------------------------- */
.doc .foot__nav a{
  text-decoration:none;
  border-bottom:0;
  color:var(--quiet);
}
.doc .foot__nav a:hover{color:var(--white);text-decoration:none}
.doc .foot__nav a[aria-current="page"]{color:var(--spray)}
.doc .foot a{
  color:var(--quiet);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.26);
  padding-bottom:1px;
}
.doc .foot a:hover{color:var(--white);border-bottom-color:rgba(255,255,255,.7)}
.doc .foot__nav a{border-bottom:0;padding-bottom:0}

/* The masthead is a link, so `.doc a` would underline it. */
.doc .mast{text-decoration:none}
.doc .mast span{text-decoration:none}