/* ============================================================
   Holloway & Sons — concept site
   Design system: Stykka (light, achromatic, editorial)
   Tokens taken verbatim from the supplied style reference.
   ============================================================ */

:root{
  /* Colours */
  --color-press-black:#000000;
  --color-gallery-white:#ffffff;
  --color-plate-gray:#b8b8b8;

  /* Type families */
  --font-inter:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-azeret-mono:'Azeret Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --font-system-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Type scale */
  --text-caption:11px;   --leading-caption:1.2;  --tracking-caption:.23px;
  --text-body-sm:14px;   --leading-body-sm:1.25; --tracking-body-sm:.29px;
  --text-body:16px;      --leading-body:1.5;     --tracking-body:-.37px;
  --text-subheading:22px;--leading-subheading:1.2;--tracking-subheading:-.79px;
  --text-heading-sm:24px;--leading-heading-sm:1.2;--tracking-heading-sm:-.89px;
  --text-heading:30px;   --leading-heading:1.1;  --tracking-heading:-1.2px;
  --text-display:46px;   --leading-display:1.05; --tracking-display:-1.93px;

  --font-weight-regular:400;
  --font-weight-medium:500;

  /* Spacing */
  --spacing-4:4px;  --spacing-5:5px;  --spacing-8:8px;  --spacing-10:10px;
  --spacing-11:11px;--spacing-12:12px;--spacing-15:15px;--spacing-18:18px;
  --spacing-20:20px;--spacing-24:24px;--spacing-25:25px;--spacing-30:30px;
  --spacing-33:33px;--spacing-36:36px;--spacing-40:40px;--spacing-50:50px;

  /* Layout */
  --page-max-width:1280px;
  --section-gap:clamp(60px,6vw,80px);
  --element-gap:10px;
  --edge:clamp(20px,4vw,40px);

  /* Radius */
  --radius-lg:8px;
  --radius-2xl:16px;
  --radius-buttons:8px;
  --radius-cards:16px;
  --radius-imagecontainers:0px;

  /* Surfaces */
  --surface-canvas:#ffffff;
  --surface-ink:#000000;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
:target{scroll-margin-top:6rem}
body{
  margin:0;background:var(--surface-canvas);color:var(--color-press-black);
  font-family:var(--font-inter);font-size:var(--text-body);
  line-height:var(--leading-body);letter-spacing:var(--tracking-body);
  font-weight:var(--font-weight-regular);
  font-feature-settings:"ss01" on,"tnum";
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
a,button,input,select,textarea,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:#000;color:#fff}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:1px solid currentColor;outline-offset:3px;
}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:#000;color:#fff;padding:10px 18px}
.skip:focus{left:0}

.wrap{max-width:var(--page-max-width);margin-inline:auto;padding-inline:var(--edge)}

/* ── type primitives ───────────────────────────────────── */
.label{
  font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-body-sm);line-height:var(--leading-body-sm);
  text-transform:uppercase;
}
.label--inv{color:var(--color-gallery-white)}

.display{
  text-wrap:balance;
  font-weight:var(--font-weight-regular);
  font-size:clamp(34px,4vw,var(--text-display));
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
}
.heading{
  text-wrap:balance;
  font-weight:var(--font-weight-regular);
  font-size:var(--text-heading);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);
  max-width:24ch;
}
.heading--inv{color:var(--color-gallery-white)}

.mono{
  font-family:var(--font-azeret-mono);font-size:18px;line-height:1;
  letter-spacing:-.01em;font-weight:400;
  padding:var(--spacing-30) 0;border-top:1px solid #000;border-bottom:1px solid #000;
  margin-top:var(--spacing-50);overflow-x:auto;white-space:nowrap;
}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  --bg:transparent;--fg:#000;--bd:#000;
  position:relative;display:inline-flex;align-items:center;gap:var(--spacing-10);
  font-size:var(--text-body);font-weight:var(--font-weight-medium);letter-spacing:-.01em;
  padding:var(--spacing-12) var(--spacing-18);border:1px solid var(--bd);
  border-radius:var(--radius-buttons);background:var(--bg);color:var(--fg);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{--bg:#000;--fg:#fff}
.btn--sm{padding:var(--spacing-8) var(--spacing-12);font-size:var(--text-body-sm)}
.btn--wide{width:100%;justify-content:space-between}

.ico{width:16px;height:16px;fill:currentColor;flex:none}
.ico--arrow{width:20px;height:12px;fill:none;stroke:currentColor;stroke-width:1.25;
  transition:transform .35s var(--ease)}
.btn:hover .ico--arrow{transform:translateX(5px)}

/* ── nav ───────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:50;color:var(--color-press-black);
  border-bottom:1px solid transparent}
.nav__in{max-width:var(--page-max-width);margin-inline:auto;padding:var(--spacing-20) var(--edge);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--spacing-20)}
.nav__links{display:flex;gap:var(--spacing-20);font-size:var(--text-body)}
.nav__links a{position:relative;display:inline-flex;align-items:center;gap:0;padding-bottom:2px}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.nav__links a::before{content:"";position:absolute;left:0;bottom:-1px;width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:0}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__links a:hover::before{animation:runDrop .9s var(--ease) .25s forwards}
@keyframes runDrop{0%{opacity:1;left:0}100%{opacity:0;left:calc(100% - 3px)}}
/* glyph: 1px line icon that draws itself on hover, pushing the label right */
.glyph{width:14px;height:14px;margin-right:var(--spacing-8);fill:none;stroke:currentColor;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.glyph path{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .6s var(--ease)}
.nav__links a:hover .glyph path,.nav__links a:focus-visible .glyph path{stroke-dashoffset:0}
.nav__m{display:none}
.nav__tel-s{display:none}

.wordmark{justify-self:center;text-align:center;line-height:1}
.wordmark__name{display:block;font-size:var(--text-subheading);font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-subheading)}
.wordmark__sub{display:block;margin-top:var(--spacing-4);font-size:var(--text-caption);
  letter-spacing:var(--tracking-caption);text-transform:uppercase}

.nav__right{justify-self:end;display:flex;align-items:center;gap:var(--spacing-20)}
.nav__tel{display:inline-flex;align-items:center;gap:var(--spacing-8);font-size:var(--text-body)}
.nav__tel .ico{transition:transform .4s var(--ease)}
.nav__tel:hover .ico{transform:rotate(-14deg) scale(1.1)}
.nav.is-stuck{background:var(--color-gallery-white);border-bottom-color:var(--color-press-black)}
.nav.is-hidden{transform:translateY(-100%)}
.nav.is-hidden:focus-within{transform:none}
.nav{transition:background .4s var(--ease),border-color .4s var(--ease),transform .45s var(--ease)}

.burger{display:none;background:none;border:0;padding:var(--spacing-8);cursor:pointer}
.burger span{display:block;width:22px;height:1px;background:currentColor;transition:transform .3s var(--ease)}
.burger span+span{margin-top:6px}

/* ── hero ──────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:#f2f2f2}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__video{width:100%;height:100%;object-fit:cover}
.hero__video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hero__video.is-on{opacity:1}

.hero__copy{position:relative;z-index:2;padding:var(--edge);
  padding-bottom:clamp(70px,15vh,150px);max-width:min(640px,86vw);color:var(--color-press-black)}
.hero__copy .display{margin:var(--spacing-20) 0 var(--spacing-20)}
.hero__sub{max-width:52ch;font-size:var(--text-body)}
.hero__cta{margin-top:var(--spacing-24);display:flex;flex-wrap:wrap;gap:var(--spacing-10)}
.hero__pause{position:absolute;left:var(--edge);bottom:calc(var(--edge) - 6px);z-index:3;font-size:var(--text-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;background:transparent;border:1px solid #000;border-radius:var(--radius-buttons);padding:var(--spacing-5) var(--spacing-10);cursor:pointer}
.hero__pause:hover{background:#000;color:#fff}


/* H5: staggered rise on first paint (once) */
.rise{display:inline-block;animation:rise .9s var(--ease) both;animation-delay:calc(.25s + var(--i,0) * .12s)}
@keyframes rise{from{transform:translateY(18px);clip-path:inset(0 0 100% 0)}
  to{transform:none;clip-path:inset(0 0 -20% 0)}}

/* ── facts ─────────────────────────────────────────────── */
.facts{border-bottom:1px solid #000}
.facts__grid{display:grid;grid-template-columns:repeat(4,1fr);
  padding-block:var(--spacing-40);gap:var(--spacing-20)}
.fact{display:flex;flex-direction:column;gap:var(--spacing-10);
  padding-left:var(--spacing-20);border-left:1px solid #000}
.fact:first-child{border-left:0;padding-left:0}
.fact__n{font-size:clamp(30px,3.6vw,46px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.trust.wrap{max-width:var(--page-max-width);margin-inline:auto}
.fact__l{font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);
  text-transform:uppercase;color:#000}

.trust{display:flex;flex-wrap:wrap;gap:var(--spacing-10) var(--spacing-30);border-top:1px solid #000;
  padding-block:var(--spacing-15);font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);text-transform:uppercase}
.trust strong{font-weight:var(--font-weight-medium)}

/* ── sections ──────────────────────────────────────────── */
.section{padding-block:calc(var(--section-gap)/2)}
.section--ink{padding-block:var(--section-gap)}
.section--flush{padding-bottom:0}
.section--ink{background:var(--surface-ink);color:var(--color-gallery-white)}

.sechead{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:var(--spacing-20) var(--spacing-40);
  align-items:start}
.sechead .label{grid-column:1/-1;margin-bottom:var(--spacing-10)}
.sechead--tight{grid-template-columns:1fr}
.sechead__body{display:grid;gap:var(--spacing-20);max-width:60ch}

/* ponytail: CSS scroll-driven reveal; browsers without view() timelines simply show the heading */
@supports (animation-timeline: view()){
  .reveal{animation:reveal 1s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes reveal{from{clip-path:inset(0 0 110% 0);transform:translateY(14px)}to{clip-path:inset(0 0 -20% 0);transform:none}}
}

/* ── about: full-bleed film with copy on a dark scrim ───── */
.about{position:relative;padding-block:0;background:#000;color:#fff;isolation:isolate}
.about__media{position:absolute;inset:0;z-index:0}
.about__media img,.about__video{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.about__video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.about__video.is-on{opacity:1}
.about__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.62) 38%,rgba(0,0,0,.18) 62%,rgba(0,0,0,0) 80%)}
.about__in{position:relative;z-index:1;min-height:min(82vh,760px);display:flex;align-items:center;
  padding-block:var(--section-gap)}
.about__copy{max-width:52ch;display:grid;gap:var(--spacing-20)}
.about__copy .label{margin-bottom:0}
.about__cap{font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);text-transform:uppercase;color:var(--color-plate-gray)}
.about > .wrap:last-child{position:relative;z-index:1;background:#fff;color:#000;max-width:none;padding-inline:0}
.about .mono{max-width:var(--page-max-width);margin-inline:auto;padding-inline:var(--edge);margin-top:0;border-top:0}

/* ── service grid ──────────────────────────────────────── */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:var(--spacing-20);row-gap:var(--spacing-40);margin-top:var(--spacing-50)}
.card{display:flex;flex-direction:column;gap:var(--element-gap)}
.fig{border-radius:var(--radius-imagecontainers);overflow:hidden;aspect-ratio:4/3;background:#f2f2f2}
.fig img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter 1.1s var(--ease)}
.card:hover .fig img{transform:scale(1.06)}
.card__t{font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-body-sm);text-transform:uppercase}
.card__b{font-size:var(--text-body);line-height:var(--leading-body)}
.card__m{font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);
  padding-top:var(--spacing-10);border-top:1px solid #000;margin-top:auto}

/* ── work grid ─────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-15);
  margin-top:var(--spacing-50);padding-inline:var(--spacing-15)}
.shot{display:flex;flex-direction:column;gap:var(--spacing-10)}
.shot img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#f2f2f2;transition:transform 1.2s var(--ease)}
.shot{overflow:hidden}
.shot:hover img{transform:scale(1.02)}
.shot figcaption{display:flex;justify-content:space-between;gap:var(--spacing-10);
  font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);text-transform:uppercase}

/* ── process ───────────────────────────────────────────── */
.section--water{position:relative;isolation:isolate}
.section--water > .water{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.section--water > .wrap{position:relative;z-index:1}
/* steps: hairlines draw in on scroll, number and title slide, hover ripple from the pointer */
.step{position:relative;overflow:hidden}
.step::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#000;transform:scaleX(0);transform-origin:left}
.step::after{content:"";position:absolute;left:var(--rx,50%);top:var(--ry,50%);width:0;height:0;border-radius:50%;
  border:1px solid #000;opacity:0;transform:translate(-50%,-50%);pointer-events:none}
.step.is-rippling::after{animation:ripple .9s var(--ease) forwards}
@keyframes ripple{0%{width:0;height:0;opacity:.5}100%{width:520px;height:520px;opacity:0}}
.step__n,.step__t,.step__b{transition:transform .5s var(--ease),opacity .5s var(--ease)}
@supports (animation-timeline: view()){
  .steps{border-top:0}
  .step::before{animation:drawX 1s var(--ease) both;animation-timeline:view();animation-range:entry 10% entry 70%}
  .step:first-child{border-top:1px solid #000}
  .step__n,.step__t{animation:slideIn .8s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .step__b{animation:slideIn .8s var(--ease) both;animation-timeline:view();animation-range:entry 15% entry 75%}
  @keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@supports not (animation-timeline: view()){.step::before{transform:none}}
.steps{margin-top:var(--spacing-50);border-top:1px solid #000}
.step{display:grid;grid-template-columns:80px 260px 1fr;gap:var(--spacing-20);
  align-items:baseline;padding-block:var(--spacing-25)}
.step__n{font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);font-variant-numeric:tabular-nums}
.step__t{font-size:var(--text-heading-sm);font-weight:var(--font-weight-regular);
  letter-spacing:var(--tracking-heading-sm)}
.step__b{max-width:none}

/* ── prices: baseline-aligned with dotted leaders ──────── */
.price{margin-top:var(--spacing-50);border-top:1px solid #000}
.price__row{display:flex;align-items:baseline;gap:var(--spacing-10);
  padding-block:var(--spacing-18);border-bottom:1px solid #000}
.price__row dt{order:0;flex:0 1 auto}
.price__row::before{content:"";order:1;flex:1 1 auto;align-self:flex-end;
  margin-bottom:5px;border-bottom:1px dotted var(--color-plate-gray);
  transition:border-bottom-color .3s var(--ease)}
.price__row dd{order:2;flex:none;font-variant-numeric:tabular-nums;
  font-weight:var(--font-weight-medium);transition:transform .3s var(--ease)}
.price__row:hover::before{border-bottom-color:#000}
.price__row:hover dd{transform:translateX(-4px)}
.price__note{margin-top:var(--spacing-25);max-width:62ch;font-size:var(--text-body-sm);
  line-height:var(--leading-body)}

/* ── reviews: three visible columns, hairline-separated ─────── */
.revs__src{margin-top:var(--spacing-15);max-width:60ch;color:var(--color-plate-gray)}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-40);margin-top:var(--spacing-50)}
.rev{display:grid;gap:var(--spacing-20);align-content:start;padding-left:var(--spacing-20);
  border-left:1px solid #fff}
.rev blockquote{font-size:var(--text-subheading);line-height:var(--leading-subheading);
  letter-spacing:var(--tracking-subheading);font-weight:var(--font-weight-regular)}
.rev__by{font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);
  text-transform:uppercase;color:var(--color-plate-gray)}
.stars{display:flex;gap:var(--spacing-5)}
.stars i{width:11px;height:11px;background:#fff;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@supports (animation-timeline: view()){
  .stars i{animation:pop .45s var(--ease) both;animation-timeline:view();animation-range:entry 20% entry 60%}
  .stars i:nth-child(2){animation-range:entry 28% entry 68%}
  .stars i:nth-child(3){animation-range:entry 36% entry 76%}
  .stars i:nth-child(4){animation-range:entry 44% entry 84%}
  .stars i:nth-child(5){animation-range:entry 52% entry 92%}
  @keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
}

/* ── emergency strip ───────────────────────────────────── */
.emerg{border-block:1px solid #000}
.emerg__in{display:flex;align-items:center;gap:var(--spacing-20);flex-wrap:wrap;
  max-width:var(--page-max-width);margin-inline:auto;padding:var(--spacing-30) var(--edge);
  transition:background .4s var(--ease),color .4s var(--ease)}
.emerg__in:hover{background:#000;color:#fff}
.bolt{width:22px;height:30px;fill:currentColor;flex:none;transform-origin:50% 20%}
.emerg__in:hover .bolt{animation:zap .5s var(--ease) infinite alternate}
@keyframes zap{from{transform:rotate(-6deg) scale(1)}to{transform:rotate(6deg) scale(1.18)}}
.emerg__t{flex:1 1 320px;min-width:0;font-size:clamp(18px,2vw,26px);letter-spacing:-.03em}
.emerg__n{font-size:var(--text-subheading);letter-spacing:var(--tracking-subheading);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums}

/* ── booking ───────────────────────────────────────────── */
.book{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-50) var(--spacing-40);
  align-items:start}
.book__l .heading{margin:var(--spacing-10) 0 var(--spacing-20)}
.book__lead{max-width:46ch}
.contact{margin-top:var(--spacing-40);border-top:1px solid #000}
.contact li{display:flex;gap:var(--spacing-20);padding-block:var(--spacing-15);
  border-bottom:1px solid #000;font-size:var(--text-body)}
.contact li span:first-child{flex:0 0 96px;font-size:var(--text-body-sm);
  letter-spacing:var(--tracking-body-sm);text-transform:uppercase}
.contact li a{border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.contact li a:hover{border-bottom-color:#000}

.book__f{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-20);
  border:1px solid #000;border-radius:var(--radius-cards);padding:var(--spacing-30)}
.f{display:grid;gap:var(--spacing-8)}
.f--full{grid-column:1/-1}
.f label{font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);text-transform:uppercase}
.f input,.f select,.f textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid #000;
  border-radius:0;padding:var(--spacing-10) 0;transition:border-color .3s var(--ease)}
.f textarea{resize:vertical}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:1px solid #000;outline-offset:4px}
.f--check{grid-template-columns:auto 1fr;align-items:center;gap:var(--spacing-12)}
.f--check input{width:16px;height:16px;accent-color:#000;border-bottom:0}
.f--check label{text-transform:none;font-size:var(--text-body-sm);letter-spacing:-.01em}
.book__f .btn{grid-column:1/-1}
.f__note{grid-column:1/-1;font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  text-transform:uppercase}
[aria-invalid="true"]{border-bottom-width:2px!important}
.f__err{display:none;font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm)}
.f__err:not(:empty){display:block}
.f__err--full{grid-column:1/-1}
.f__req{grid-column:1/-1;font-size:var(--text-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase}
.f__next{grid-column:1/-1;font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm)}
.contact__v{flex:1 1 auto;min-width:0}

/* ── footer ────────────────────────────────────────────── */
.foot{position:relative;background:var(--surface-ink);color:var(--color-gallery-white);isolation:isolate}
.foot > .water{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.foot > *:not(.water){position:relative;z-index:1}

/* F3: full-width CTA band */
.foot__cta{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;
  column-gap:var(--spacing-40);max-width:var(--page-max-width);margin-inline:auto;
  padding:var(--spacing-40) var(--edge);border-bottom:1px solid #fff;
  transition:background .4s var(--ease),color .4s var(--ease)}
.foot__cta-t{grid-row:1;font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:-.045em;font-weight:var(--font-weight-regular)}
.foot__cta-s{grid-row:2;margin-top:var(--spacing-12);font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);text-transform:uppercase}
.foot__cta-arrow{grid-row:1/3;width:clamp(40px,5vw,72px);height:auto;fill:none;stroke:currentColor;stroke-width:1.25;
  transition:transform .4s var(--ease)}
.foot__cta:hover{background:#fff;color:#000}
.foot__cta:hover .foot__cta-arrow{transform:translateX(14px)}

/* F2: sitemap as a pipe run */
.foot__map{position:relative;padding-top:var(--spacing-20)}
.pipe{display:block;width:100%;height:60px;fill:none;stroke:#fff;stroke-width:1}
.pipe__run,.pipe__drop{stroke-dasharray:1200;stroke-dashoffset:1200}
.pipe__jt{fill:#000;opacity:0}
.pipe__flow{stroke-width:2;stroke-dasharray:16 1184;opacity:0}
@supports (animation-timeline: view()){
  .pipe__run{animation:draw 1.2s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .pipe__drop{animation:draw 1.2s var(--ease) both;animation-timeline:view();animation-range:entry 40% entry 100%}
  .pipe__jt{animation:fadeIn .6s var(--ease) both;animation-timeline:view();animation-range:entry 60% entry 100%}
}
@supports not (animation-timeline: view()){.pipe__run,.pipe__drop{stroke-dashoffset:0}.pipe__jt{opacity:1}}
.foot.is-in .pipe__flow{opacity:.9;animation:flow 4s linear infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
@keyframes flow{to{stroke-dashoffset:-1200}}

.foot__in{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:var(--spacing-40);
  padding-block:var(--spacing-10) var(--spacing-50)}
.foot__mark{display:block;font-size:var(--text-heading-sm);font-weight:var(--font-weight-medium);
  letter-spacing:var(--tracking-heading-sm)}
.foot__sub{display:block;margin-top:var(--spacing-8);font-size:var(--text-caption);
  letter-spacing:var(--tracking-caption);text-transform:uppercase;color:var(--color-plate-gray)}
.foot__col li{font-size:var(--text-body-sm);line-height:1.9}
.foot__h{font-size:var(--text-caption);letter-spacing:var(--tracking-caption);
  text-transform:uppercase;color:var(--color-plate-gray);margin-bottom:var(--spacing-10)}
.foot__col a{border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.foot__col a:hover{border-bottom-color:#fff}

/* F4: live status */
.status{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:var(--spacing-4) var(--spacing-8);margin-top:var(--spacing-20);
  font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);text-transform:uppercase;line-height:1.4}
.status__dot{align-self:center}
.status__time{grid-column:2;color:var(--color-plate-gray);font-size:var(--text-caption);letter-spacing:var(--tracking-caption)}
.status__dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 2.4s var(--ease) infinite}
.status.is-closed .status__dot{animation:none;background:transparent;border:1px solid #fff}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* F1: outline wordmark filling with scroll */
.foot__big{overflow:hidden;padding:var(--spacing-20) var(--edge) var(--spacing-30);max-width:var(--page-max-width);margin-inline:auto}
.bigmark{display:block;width:100%;height:auto;font-family:var(--font-inter);font-weight:500;font-size:150px;
  letter-spacing:-.04em}
.bigmark__outline{fill:none;stroke:#fff;stroke-width:1}
.bigmark__solid{fill:#fff}
@supports (animation-timeline: view()){
  .bigmark__fill{animation:fillMark 1s linear both;animation-timeline:view();animation-range:entry 10% entry 100%}
  @keyframes fillMark{to{width:1000px}}
}
@supports not (animation-timeline: view()){.bigmark__fill{width:1000px}}

.legal{border-top:1px solid #fff}
.legal__in{display:flex;flex-wrap:wrap;gap:var(--spacing-10) var(--spacing-30);
  align-items:center;justify-content:space-between;padding-block:var(--spacing-20);
  font-family:var(--font-system-ui);font-size:12px;line-height:1.2;color:var(--color-plate-gray)}
.legal__links{display:flex;gap:var(--spacing-20)}
.legal__links a:hover{color:#fff}
.legal__demo{flex:1 1 100%;color:#fff}

/* ── cookie bar ────────────────────────────────────────── */
.cookie[hidden]{display:none}
.cookie{position:fixed;right:var(--edge);bottom:var(--edge);z-index:60;max-width:min(340px,calc(100vw - 2*var(--edge)));
  background:#fff;border:1px solid #000;border-radius:var(--radius-cards);
  padding:var(--spacing-20);display:grid;gap:var(--spacing-15);
  animation:riseCookie .6s var(--ease)}
.cookie p{font-size:var(--text-body-sm);line-height:1.5}
.cookie__b{display:flex;gap:var(--spacing-10)}
@keyframes riseCookie{from{opacity:0;transform:translateY(20px)}}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1024px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .sechead{grid-template-columns:1fr}
  .step{grid-template-columns:60px 1fr;row-gap:var(--spacing-10)}
  .step__b{grid-column:2}
  .foot__in{grid-template-columns:1fr 1fr;gap:var(--spacing-30)}
  .pipe{display:none}
}
@media (max-width:760px){
  .nav__links{display:none}
  .nav__in{grid-template-columns:auto 1fr auto}
  .wordmark{justify-self:start;text-align:left}
  .burger{display:block}
  .nav__cta{display:none}
  .nav__tel{border:1px solid currentColor;border-radius:var(--radius-buttons);padding:var(--spacing-8) var(--spacing-12);font-weight:var(--font-weight-medium)}
  .nav__tel-n{display:none}
  .nav__tel-s{display:inline}
  .nav.is-open .nav__links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:var(--spacing-20);background:#fff;color:#000;padding:var(--spacing-30) var(--edge);
    border-bottom:1px solid #000}
  .nav.is-open .nav__m{display:list-item}
  .nav.is-open .nav__m a{font-weight:var(--font-weight-medium)}
  .hero__pause{left:auto;right:var(--edge);bottom:auto;top:calc(var(--spacing-20) + 64px)}
  .emerg__t{flex-basis:auto}
  .cookie{left:var(--edge);right:var(--edge);max-width:none}
  .facts__grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-30) var(--spacing-20)}
  .fact:nth-child(3){border-left:0;padding-left:0}
  .grid4{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .shot img{aspect-ratio:4/3}
  .shot figcaption{transform:none}
  .book,.book__f{grid-template-columns:1fr}
  .hero{align-items:flex-start}
  .hero__media img,.hero__video{object-position:40% 50%}
  .hero__copy{padding-top:120px;padding-bottom:0}
  .emerg__in{flex-direction:column;align-items:flex-start;gap:var(--spacing-12)}
  .revs{grid-template-columns:1fr}
  .about__media img,.about__video{object-position:68% 30%}
  .about__media::after{background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.25) 100%)}
  .about__in{min-height:0}
  .foot__cta{grid-template-columns:1fr}
  .foot__cta-arrow{display:none}
  .foot__in{grid-template-columns:1fr}
  .mono{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ── cursor: a falling drop, with splashes on fast moves (pointer devices only) ── */
@media (hover:hover) and (pointer:fine){
  .cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:12px;height:14px;margin:-9px 0 0 -6px;
    transform:translate3d(var(--x,-40px),var(--y,-40px),0);opacity:0;transition:opacity .3s;
    mix-blend-mode:difference;color:#fff}
  .cursor.is-on{opacity:1}
  .cursor__drop{position:absolute;inset:0;border:1px solid currentColor;
    border-radius:0 50% 50% 50%;transform:rotate(45deg) scale(.92);transition:transform .25s var(--ease)}
  .cursor.is-link .cursor__drop{transform:rotate(45deg) scale(1.5)}
  .cursor.is-drip .cursor__drop{animation:dripFall .45s var(--ease)}
  @keyframes dripFall{0%{transform:rotate(45deg) scale(.92)}60%{transform:rotate(45deg) scale(1.15) translate(4px,4px)}100%{transform:rotate(45deg) scale(.92)}}
  .splash{position:fixed;inset:0;pointer-events:none;z-index:89;mix-blend-mode:difference}
  .splash i{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;
    transform:translate3d(var(--x),var(--y),0)}
  .splash i.go{animation:splash .55s var(--ease) forwards}
  @keyframes splash{0%{opacity:.9;transform:translate3d(var(--x),var(--y),0) scale(1)}
    100%{opacity:0;transform:translate3d(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy) + 14px),0) scale(.4)}}
}