/* GENERATED by tools/build_legacy_css.py from assets/css/styles.css.
   Do not edit - edit styles.css and rerun the script. */
:where(#main) *,
:where(#main) *::before,
:where(#main) *::after { box-sizing: border-box; }

:where(#main),
:where(#main) h1,
:where(#main) h2,
:where(#main) h3,
:where(#main) h4,
:where(#main) h5,
:where(#main) h6,
:where(#main) p,
:where(#main) figure,
:where(#main) blockquote,
:where(#main) dl,
:where(#main) dd,
:where(#main) fieldset,
:where(#main) legend { margin: 0; }
:where(#main) ul[class],
:where(#main) ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(#main) img,
:where(#main) video,
:where(#main) canvas,
:where(#main) svg {
  display: block;
  max-width: 100%;
}
:where(#main) img { height: auto; }
:where(#main) picture { display: contents; }
:where(#main) input,
:where(#main) button,
:where(#main) textarea,
:where(#main) select {
  font: inherit;
  color: inherit;
}
:where(#main) button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:where(#main) fieldset {
  border: 0;
  padding: 0;
  min-width: 0;
}
:where(#main) a { color: inherit; }
:where(#main) table {
  border-collapse: collapse;
  width: 100%;
}
:where(#main) :where(h1, h2, h3, h4, h5, h6) { text-wrap: pretty; }
:where(#main) :where(p, li) { text-wrap: pretty; }
:where(#main) [hidden] { display: none !important; }
:root {
  --navy:        #00284d;   
  --navy-deep:   #000d1a;   
  --navy-raised: #04335f;   
  --violet:      #221c35;   
  --near-black:  #0c0a09;
  --accent-base:  var(--clraccent);
  --accent-dark:  var(--clraccentdeep);    
  --accent-light: var(--clraccentlight);   
  --accent-ink:   var(--clraccentink);     
  --water:        #4180c9;   
  --water-pale:   #9fc6f0;   
  --coral-purple: #6541cb;   
  --grey-300: #cbcbcb;
  --grey-400: #bababa;
  --grey-600: #4f4f4f;
  --tint:  #f9fcff;   
  --ice:   #f5f5fe;   
  --smoke: #fafafa;
  --brand-signal: #eb9622;   
  --surface:      #ffffff;
  --surface-soft: var(--tint);
  --ink:            var(--navy);
  --text-secondary: rgba(0, 40, 77, 0.78);
  --text-muted:     rgba(0, 40, 77, 0.55);
  --accent: var(--accent-dark);
  --cta:       var(--clrcta);
  --cta-ink:   var(--clrctaink);
  --cta-hover: var(--clrctahover);
  --border: rgba(0, 40, 77, 0.14);
  --tile:   var(--tint);
  --text-on-dark:       #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --hairline-onDark:    rgba(255, 255, 255, 0.2);
  --glass:       rgba(255, 255, 255, 0.1);
  --glass-hover: rgba(255, 255, 255, 0.2);
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: var(--font-display);
  --w-display:  300;   
  --w-emphasis: 700;   
  --w-body:     400;
  --w-ui:       600;   
  --step-display: clamp(3.84rem, 5.8vw, 7.04rem);       
  --step-h1:      clamp(3.36rem, 5.2vw, 7.04rem);       
  --step-h2:      clamp(3.04rem, 4.7vw, 7.04rem);       
  --step-h3:      clamp(2.56rem, 3.7vw, 5.28rem);       
  --step-h4:      clamp(2.08rem, 2.5vw, 3.52rem);       
  --step-h5:      clamp(2.08rem, 2.2vw, 3.4rem);   
  --step-h6:      clamp(1.8rem, 1.6vw, 2.2rem); 
  --step-body:    1.6rem;                             
  --step-small:   1.5rem;                        
  --step-meta:    1.4rem;                         
  --step-eyebrow: 1.4rem;                         
  --step-cta:     1.3rem;                        
  --numeral: clamp(5.6rem, 9vw, 8.8rem);
  --track-display: -0.05em;
  --track-h2:      -0.06em;
  --track-h3:      -0.04em;
  --track-h4:      -0.02em;
  --space-2xs: clamp(0.4rem, 0.4vw, 0.8rem);
  --space-xs:  clamp(0.8rem, 0.8vw, 1.2rem);
  --space-sm:  clamp(1.2rem, 1.2vw, 1.8rem);
  --space-md:  clamp(2rem, 2vw, 3.2rem);
  --space-lg:  clamp(3.2rem, 3.5vw, 5.6rem);
  --space-xl:  clamp(4.8rem, 5.5vw, 8.8rem);
  --space-2xl: clamp(6.4rem, 8vw, 12.8rem);
  --section-pad:   clamp(6.4rem, 9vw, 15.2rem);
  --section-pad-s: clamp(4.8rem, 6.5vw, 10.4rem);
  --container:  1320px;
  --container-narrow: 980px;
  --measure:    68ch;
  --measure-sm: 58ch;
  --gutter:     clamp(2rem, 5vw, 6rem);
  --header-h:  8.8rem;
  --utility-h: 3.6rem;
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-card:   cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 140ms;
  --dur-fast:  300ms;   
  --dur:       400ms;
  --dur-panel: 600ms;
  --dur-slow:  1000ms;  
  --radius:      20px;
  --radius-sm:   12px;
  --radius-lg:   32px;
  --radius-xl:   44px;
  --radius-pill: 100px;
  --shadow-sm: 0 8px 10px rgba(12, 10, 9, 0.08);
  --shadow-md: 0 8px 10px rgba(12, 10, 9, 0.18);
  --shadow-lg: 0 22px 46px -22px rgba(0, 13, 26, 0.6);
  --z-header:   100;
  --z-panel:    150;
  --z-drawer:   200;
  --z-lightbox: 400;
  --z-skip:     500;
}
:where(#main) .section--deep,
:where(#main) .section--black,
:where(#main) .site-footer {
  --surface:      var(--navy-raised);
  --surface-soft: rgba(255, 255, 255, 0.06);
  --ink:            #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-muted:     rgba(255, 255, 255, 0.58);
  --accent: var(--accent-base);   
  --cta:       var(--accent-base);
  --cta-ink:   var(--accent-ink);
  --cta-hover: var(--accent-light);
  --border: rgba(255, 255, 255, 0.2);
  --tile:   #ffffff;
  color: var(--text-secondary);
}
:where(#main) .section--deep { background: var(--navy); }
:where(#main) .section--black { background: var(--navy-deep); }

:where(#main) {
  margin: 0;
  background: #ffffff;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: var(--w-body);   
  line-height: 1.5;             
  font-variant-numeric: lining-nums;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked {
  overflow: hidden;
  padding-right: var(--scrollbar-w, 0px);
}
:where(#main) main { display: block; }
:where(#main) ::selection {
  background: var(--accent-base);
  color: var(--accent-ink);
}
:where(#main) :focus-visible {
  outline: 2px solid var(--accent-base);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:where(#main) .section--deep :focus-visible,
:where(#main) .section--black :focus-visible,
:where(#main) .site-footer :focus-visible,
:where(#main) .hero :focus-visible,
:where(#main) .page-hero :focus-visible,
:where(#main) .lightbox :focus-visible {
  outline-color: #ffffff;
}
:where(#main) .skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-skip);
  padding: 1.36rem 2.4rem;
  border-radius: 0 0 var(--radius-sm) 0;
  background: var(--accent-base);
  color: var(--accent-ink);
  font-size: var(--step-meta);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease-out);
}
:where(#main) .skip-link:focus { transform: translateY(0); }
:where(#main) h1,
:where(#main) h2,
:where(#main) h3,
:where(#main) h4,
:where(#main) h5,
:where(#main) h6,
:where(#main) .display,
:where(#main) .headline {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: var(--w-display);
  line-height: 1.05;
  letter-spacing: var(--track-h3);
}
:where(#main) h1,
:where(#main) h2,
:where(#main) h3,
:where(#main) h4,
:where(#main) .h1,
:where(#main) .h2,
:where(#main) .h3,
:where(#main) .h4,
:where(#main) .display,
:where(#main) .headline,
:where(#main) .gold-band__title {
  text-transform: uppercase;
  word-spacing: .06em;
}
:where(#main) h1,
:where(#main) .h1 { font-size: var(--step-h1); letter-spacing: var(--track-display); line-height: 1.0; }
:where(#main) h2,
:where(#main) .h2 { font-size: var(--step-h2); letter-spacing: var(--track-h2);      line-height: 1.0; }
:where(#main) h3,
:where(#main) .h3 { font-size: var(--step-h3); letter-spacing: var(--track-h3);      line-height: 1.03; }
:where(#main) h4,
:where(#main) .h4 { font-size: var(--step-h4); letter-spacing: var(--track-h4);      line-height: 1.1; }
:where(#main) h5,
:where(#main) .h5 { font-size: var(--step-h5); letter-spacing: var(--track-h4);      line-height: 1.06; }
:where(#main) h6,
:where(#main) .h6 { font-size: var(--step-h6); letter-spacing: -0.01em;              line-height: 1.25; }
:where(#main) .display {
  font-size: var(--step-display);
  font-weight: var(--w-display);
  line-height: 1.0;
  letter-spacing: var(--track-display);
}
:where(#main) .hl {
  font: inherit;
  font-weight: var(--w-emphasis);
  color: inherit;
  letter-spacing: inherit;
}
:where(#main) .hl--gold { color: var(--accent); }
:where(#main) .hl--water { color: var(--water); }
:where(#main) .hl + .hl { margin-left: 0; }
:where(#main) p { margin: 0 0 var(--space-md); }
:where(#main) p:last-child { margin-bottom: 0; }
:where(#main) .lede {
  font-size: var(--step-body);
  font-weight: var(--w-body);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: var(--measure-sm);
}
:where(#main) .prose > .lede,
:where(#main) .page-hero .lede { font-size: var(--step-h6); line-height: 1.45; }
:where(#main) .eyebrow {
  display: block;
  margin: 0 0 var(--space-md);
  font-size: var(--step-eyebrow);
  font-weight: var(--w-ui);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
:where(#main) .eyebrow--muted { color: var(--text-muted); }
:where(#main) .eyebrow--water { color: var(--water); }
:where(#main) .eyebrow--onDark { color: var(--accent-light); }
:where(#main) .eyebrow--rule {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
:where(#main) .eyebrow--rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}
:where(#main) .numeral {
  display: block;
  font-size: var(--numeral);
  font-weight: var(--w-display);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--accent);
  opacity: 0.4;
  pointer-events: none;
}
:where(#main) .caption {
  font-size: var(--step-meta);
  line-height: 1.45;
  color: var(--text-muted);
}
:where(#main) .meta {
  font-size: var(--step-cta);
  font-weight: var(--w-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
:where(#main) blockquote {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: var(--w-display);
  line-height: 1.15;
  letter-spacing: var(--track-h4);
  color: var(--ink);
}
:where(#main) strong,
:where(#main) b { font-weight: var(--w-emphasis); }
:where(#main) .prose > * + * { margin-top: var(--space-md); }
:where(#main) .prose { max-width: var(--measure); }
:where(#main) .prose a {
  color: var(--water);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .prose a:hover { color: var(--accent-dark); }
:where(#main) .section--deep .prose a,
:where(#main) .section--black .prose a { color: var(--water-pale); }
:where(#main) .section--deep .prose a:hover,
:where(#main) .section--black .prose a:hover { color: var(--accent-light); }
:where(#main) .prose ul { padding-left: 2rem; }
:where(#main) .prose li + li { margin-top: var(--space-xs); }
:where(#main) .link-wipe {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
:where(#main) .link-wipe::before {
  content: "";
  position: absolute;
  bottom: -0.32rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
:where(#main) .link-wipe:hover::before,
:where(#main) .link-wipe:focus-visible::before { transform: scaleX(1); }
:where(#main) .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
:where(#main) .u-measure { max-width: var(--measure); }
:where(#main) .u-measure-sm { max-width: var(--measure-sm); }
:where(#main) .u-center { margin-inline: auto; }
:where(#main) .u-text-center { text-align: center; }
:where(#main) .u-nowrap { white-space: nowrap; }
:where(#main) .u-tabular { font-variant-numeric: tabular-nums; }
:where(#main) .u-mt-sm { margin-top: var(--space-sm); }
:where(#main) .u-mt-md { margin-top: var(--space-md); }
:where(#main) .u-mt-lg { margin-top: var(--space-lg); }
:where(#main) .u-mt-xl { margin-top: var(--space-xl); }
:where(#main) .hairline {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 0;
}
:where(#main) .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
:where(#main) .container--narrow { max-width: var(--container-narrow); }
:where(#main) .container--wide { max-width: 1760px; }
:where(#main) .section {
  padding-block: var(--section-pad);
  position: relative;
}
:where(#main) .section--compact { padding-block: var(--section-pad-s); }
:where(#main) .section--flush-top { padding-top: 0; }
:where(#main) .section--flush-bottom { padding-bottom: 0; }
:where(#main) .section--tint { background: var(--tint); }
:where(#main) .section--ice { background: var(--ice); }
:where(#main) .section--deep + .section:not(.section--deep):not(.section--black),
:where(#main) .section--black + .section:not(.section--deep):not(.section--black),
:where(#main) .hero + .section:not(.section--deep):not(.section--black),
:where(#main) .page-hero + .section:not(.section--deep):not(.section--black),
:where(#main) .section--deep + .site-footer {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--radius-lg) * -1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: #ffffff;
}
:where(#main) .section:not(.section--deep):not(.section--black) + .section--deep,
:where(#main) .section:not(.section--deep):not(.section--black) + .section--black {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--radius-lg) * -1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
:where(#main) .section--deep + .section--tint,
:where(#main) .section--black + .section--tint,
:where(#main) .hero + .section--tint,
:where(#main) .page-hero + .section--tint { background: var(--tint); }
:where(#main) .section--deep + .section--ice,
:where(#main) .section--black + .section--ice,
:where(#main) .hero + .section--ice,
:where(#main) .page-hero + .section--ice { background: var(--ice); }
:where(#main) .section__head,
:where(#main) .section__head--split {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: clamp(4rem, 6vw, 8rem);
  text-align: center;
}
:where(#main) .section__head > * { justify-self: center; }
:where(#main) .section__head :is(h1, h2, h3) {
  max-width: 100%;
  font-size: clamp(2.8rem, 3.6vw, 4.8rem);
  letter-spacing: var(--track-h3);
  line-height: 1.04;
  text-wrap: pretty;
}
:where(#main) .section__head .lede {
  max-width: 58ch;
  margin-inline: auto;
}
:where(#main) .section__head .eyebrow { margin-bottom: var(--space-2xs); }
:where(#main) .section__head--start {
  justify-items: start;
  margin-inline: 0;
  text-align: left;
}
:where(#main) .section__head--split {
  justify-items: start;
  max-width: none;
  text-align: left;
}
:where(#main) .split {
  display: grid;
  gap: var(--space-lg);
}
:where(#main) .stack { display: grid; gap: var(--space-md); }
:where(#main) .stack--sm { gap: var(--space-sm); }
:where(#main) .stack--lg { gap: var(--space-lg); }
:where(#main) .cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
:where(#main) .cluster--lg { gap: var(--space-md); }
:where(#main) .split h2,
:where(#main) .service-panel h2,
:where(#main) .cta-final h2,
:where(#main) .split .h2 {
  font-size: var(--step-h3);
  letter-spacing: var(--track-h3);
  line-height: 1.03;
}
:where(#main) .section__head .cluster { justify-content: center; }
:where(#main) .section__head--start .cluster,
:where(#main) .section__head--split .cluster { justify-content: flex-start; }
:where(#main) .wave-divider { display: none; }
:where(#main) .site-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: calc(var(--z-drawer) + 1);
  pointer-events: none;   
}
:where(#main) .site-top > * { pointer-events: auto; }
:where(#main) .site-top.is-hidden .site-header,
:where(#main) .site-top.is-hidden .hero__ticker { transform: translateY(-120%); }
:where(#main) .site-header {
  position: relative;
  z-index: 2;
  transition: transform 400ms var(--ease-out);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  padding: 1.6rem clamp(1.6rem, 2.2vw, 3.2rem);
  pointer-events: none;
}
:where(#main) .site-header > * { pointer-events: auto; }
:where(#main) .site-logo {
  grid-column: 2;
  display: block;
  line-height: 0;
}
:where(#main) .site-logo__mark {
  width: auto;
  height: clamp(3.6rem, 3.4vw, 4.8rem);
  transition: opacity var(--dur-fast) var(--ease-out);
}
:where(#main) .site-logo {
  display: grid;
  grid-template-areas: "mark";
}
:where(#main) .site-logo__mark {
  grid-area: mark;
  transition: opacity 1s var(--ease-out);
}
:where(#main) .site-logo__mark--dark { opacity: 0; }
:where(#main) .site-logo__mark--light { opacity: 1; }
:where(#main) .site-top.is-on-light:not(.is-nav-open) .site-logo__mark--dark { opacity: 1; }
:where(#main) .site-top.is-on-light:not(.is-nav-open) .site-logo__mark--light { opacity: 0; }
:where(#main) .site-logo:hover .site-logo__mark--light { opacity: 0.75; }
:where(#main) .site-top.is-on-light .site-logo:hover .site-logo__mark--dark { opacity: 0.75; }
:where(#main) .nav-toggle {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  height: 4.4rem;
  padding: 0 1.84rem;
  border-radius: var(--radius-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #ffffff;
  font-size: var(--step-cta);
  font-weight: var(--w-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  outline: 1px solid rgba(255, 255, 255, 0);
  transition: background 1s var(--ease-out),
              color 1s var(--ease-out),
              outline-color 1s var(--ease-out);
}
:where(#main) .nav-toggle:hover { background: var(--glass-hover); }
:where(#main) .site-top.is-on-light:not(.is-nav-open) .nav-toggle {
  background: rgba(0, 40, 77, 0.1);
  color: var(--navy);
  outline: 1px solid rgba(0, 40, 77, 0);
}
:where(#main) .site-top.is-on-light:not(.is-nav-open) .nav-toggle:hover {
  background: rgba(0, 40, 77, 0.16);
  outline-color: rgba(0, 40, 77, 0.4);
}
:where(#main) .nav-toggle:hover { outline: 1px solid rgba(255, 255, 255, 0.4); }
:where(#main) .nav-toggle__icon {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}
:where(#main) .nav-toggle__bar {
  position: absolute;
  left: 1px;
  width: 11px;
  height: 1px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out),
              opacity var(--dur-press) linear;
}
:where(#main) .nav-toggle__bar:nth-child(1) { top: 3px; }
:where(#main) .nav-toggle__bar:nth-child(2) { top: 6px; }
:where(#main) .nav-toggle__bar:nth-child(3) { top: 9px; }
:where(#main) .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}
:where(#main) .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
:where(#main) .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-3px) rotate(-45deg);
}
:where(#main) .contact-pill {
  grid-column: 3;
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.96rem;
  height: 4.4rem;
  padding: 0 2.24rem;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: var(--cta-ink);
  font-size: var(--step-cta);
  font-weight: var(--w-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 10px rgba(12, 10, 9, 0);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
:where(#main) .contact-pill:hover {
  background: var(--cta-hover);
  box-shadow: var(--shadow-sm);
}
:where(#main) .contact-pill__icon {
  display: block;
  width: 1.44rem;
  height: 1.44rem;
  flex: 0 0 1.44rem;
}
:where(#main) .contact-pill__icon svg { width: 100%; height: 100%; }
@media (max-width: 47.99em) {
  :where(#main) .nav-toggle__label { display: none; }
  :where(#main) .nav-toggle { padding: 0; width: 4.4rem; justify-content: center; }
  :where(#main) .contact-pill__label { display: none; }
  :where(#main) .contact-pill { padding: 0; width: 4.4rem; justify-content: center; }
  :where(#main) .contact-pill__icon { width: 1.68rem; height: 1.68rem; flex-basis: 1.68rem; }
}
:where(#main) .primary-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--navy-deep);
  color: #ffffff;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease-out),
              visibility 0s linear 260ms;
}
:where(#main) .primary-nav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--ease-out),
              visibility 0s linear 0s;
}
:where(#main) .primary-nav[hidden] { display: none; }
:where(#main) .primary-nav::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: radial-gradient(120% 100% at 30% 100%,
              rgba(65, 128, 201, 0.22) 0%, rgba(0, 13, 26, 0) 70%);
  pointer-events: none;
}
:where(#main) .primary-nav__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-xl);
  align-content: center;
  width: 100%;
  padding-top: calc(var(--header-h) + var(--space-xl));
  padding-bottom: var(--space-xl);
}
:where(#main) .primary-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(#main) .primary-nav__item {
  overflow: hidden;
  line-height: 0;   
}
:where(#main) .primary-nav__link {
  display: inline-block;
  padding: 0.06em 0.02em 0.12em;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--step-h3);
  line-height: 1.12;
  letter-spacing: 0;
  text-decoration: none;
  font-variation-settings: "wght" 300;
  font-weight: 300;
  opacity: 0.2;
  transform: translateY(100%);
  transition:
    transform 620ms var(--ease-out),
    opacity 1s var(--ease-out),
    letter-spacing 1s var(--ease-out),
    font-variation-settings 1s var(--ease-out);
  transition-delay: 0ms;
}
:where(#main) .primary-nav.is-open .primary-nav__link {
  transform: translateY(0);
  transition-delay: calc(90ms + var(--i, 0) * 45ms);
}
:where(#main) .primary-nav:not(.is-open) .primary-nav__link {
  transition-duration: 260ms, 200ms, 200ms, 200ms;
  transition-delay: 0ms;
}
:where(#main) .primary-nav__list:hover .primary-nav__link,
:where(#main) .primary-nav__list:focus-within .primary-nav__link { opacity: 0.2; }
:where(#main) .primary-nav__link:hover,
:where(#main) .primary-nav__link:focus-visible,
:where(#main) .primary-nav__item.is-current .primary-nav__link {
  opacity: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "wght" 600;
  font-weight: 600;
}
:where(#main) .primary-nav__list:hover .primary-nav__item.is-current .primary-nav__link { opacity: 0.45; }
:where(#main) .primary-nav__list .primary-nav__link:hover { opacity: 1; }
:where(#main) .primary-nav.is-animating .primary-nav__link { will-change: transform, opacity; }
:where(#main) .primary-nav__sub-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.12rem;
}
:where(#main) .primary-nav__sub,
:where(#main) .primary-nav__foot {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: 0ms;
}
:where(#main) .primary-nav.is-open .primary-nav__sub,
:where(#main) .primary-nav.is-open .primary-nav__foot {
  opacity: 1;
  transform: none;
  transition-delay: 380ms;
}
:where(#main) .primary-nav__sub-list a {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--step-small);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .primary-nav__sub-list a:hover { color: #ffffff; }
:where(#main) .primary-nav__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
:where(#main) .primary-nav__minor,
:where(#main) .primary-nav__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(#main) .primary-nav__minor a,
:where(#main) .primary-nav__social a {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--step-small);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .primary-nav__minor a:hover,
:where(#main) .primary-nav__social a:hover { color: #ffffff; }
@media (min-width: 62em) {
  :where(#main) .primary-nav__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 35.2rem);
    gap: var(--space-2xl);
    align-items: center;
  }
  :where(#main) .primary-nav__link { font-size: clamp(4.4rem, 4.6vw, 6.8rem); }
  :where(#main) .primary-nav__sub-list {
    display: block;
    column-count: 2;
    column-gap: var(--space-md);
  }
  :where(#main) .primary-nav__sub-list li {
    break-inside: avoid;
    margin-bottom: 1.12rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(#main) .primary-nav,
:where(#main) .primary-nav__link,
:where(#main) .primary-nav__sub,
:where(#main) .primary-nav__foot {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }
  :where(#main) .primary-nav__link,
:where(#main) .primary-nav__sub,
:where(#main) .primary-nav__foot { transform: none; }
  :where(#main) .primary-nav:not(.is-open) .primary-nav__link { transform: none; opacity: 0; }
}
   :where(#main) 10  HERO
   Aquatique's hero is a full-viewport video under a navy scrim with
   everything centred on the axis: title,
:where(#main) one paragraph at plain body
   size,
:where(#main) then a scroll cue at the very bottom. No buttons in the hero at
   all on their home page - the only call to action on screen is the gold
   pill in the header,
:where(#main) which is why it works so hard.
   We keep one button pair,
:where(#main) because a quote request is the entire point
   of this site and burying it behind the overlay menu would cost real
   leads. Everything else is theirs.
   ===================================================================== */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--space-2xl));
  padding-bottom: calc(var(--space-2xl) + 4.8rem);
  overflow: hidden;
  background: var(--navy-deep);
  color: #ffffff;
  text-align: center;
  isolation: isolate;
}
:where(#main) .hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
:where(#main) .hero__media img,
:where(#main) .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(#main) .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(0, 13, 26, 0.72) 0%,
      rgba(0, 13, 26, 0.34) 32%,
      rgba(0, 13, 26, 0.38) 62%,
      rgba(0, 13, 26, 0.82) 100%),
    rgba(0, 13, 26, 0.18);
}
:where(#main) .hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 102.4rem;
}
:where(#main) .hero .eyebrow { color: var(--accent-light); }
:where(#main) .hero__title {
  margin: 0;
  color: #ffffff;
  font-size: var(--step-display);
  font-weight: var(--w-display);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  text-wrap: pretty;
}
:where(#main) .hero__lede {
  max-width: 56ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--step-body);
  line-height: 1.5;
}
:where(#main) .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-sm);
}
:where(#main) .hero__scroll {
  position: absolute;
  bottom: clamp(2.4rem, 3vw, 4rem);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.96rem;
  color: #ffffff;
  font-size: var(--step-cta);
  font-weight: var(--w-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
  transition: opacity var(--dur-fast) var(--ease-out);
}
:where(#main) .hero__scroll:hover { opacity: 0.7; }
:where(#main) .hero__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 4rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}
:where(#main) .hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: #ffffff;
  animation: scroll-cue 2.4s var(--ease-in-out) infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(220%); }
  100% { transform: translateY(220%); }
}
:where(#main) .hero__ticker {
  position: absolute;
  right: calc(clamp(1.6rem, 2.2vw, 3.2rem) + 6.8rem);
  bottom: clamp(2.4rem, 3vw, 4rem);
  z-index: 2;
  display: none;
  max-width: min(54.4rem, 42vw);
  height: 4rem;
  padding: 0 2rem;
  border-radius: var(--radius-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #ffffff;
  font-size: var(--step-cta);
  font-weight: var(--w-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-items: center;
  overflow: hidden;
}
:where(#main) .hero__ticker a { color: inherit; text-decoration: none; }
:where(#main) .hero__ticker a:hover { color: var(--accent-light); }
:where(#main) .hero__ticker-track {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  will-change: transform;
  animation: ticker 26s linear infinite;
}
:where(#main) .hero__ticker:hover .hero__ticker-track { animation-play-state: paused; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (min-width: 62em) {
  :where(#main) .hero__ticker { display: flex; }
}
:where(#main) .page-hero {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: min(60.8rem, 78vh);
  padding-top: calc(var(--header-h) + var(--space-2xl));
  padding-bottom: var(--space-2xl);
  overflow: hidden;
  background: var(--navy-deep);
  color: #ffffff;
  text-align: center;
  isolation: isolate;
}
:where(#main) .page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
:where(#main) .page-hero__media img,
:where(#main) .page-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(#main) .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(0, 13, 26, 0.76) 0%,
    rgba(0, 13, 26, 0.42) 50%,
    rgba(0, 13, 26, 0.7) 100%);
}
:where(#main) .page-hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 96rem;
}
:where(#main) .breadcrumb {
  font-size: var(--step-meta);
  color: rgba(255, 255, 255, 0.62);
}
:where(#main) .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(#main) .breadcrumb li {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
:where(#main) .breadcrumb li + li::before {
  content: "/";
  opacity: 0.45;
}
:where(#main) .breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .breadcrumb a:hover { color: #ffffff; }
:where(#main) .breadcrumb [aria-current="page"] { color: #ffffff; }
:where(#main) .section > .container > .breadcrumb,
:where(#main) .section .breadcrumb + .section__head { margin-bottom: var(--space-lg); }
:where(#main) .section .breadcrumb { color: var(--text-muted); }
:where(#main) .section .breadcrumb a:hover,
:where(#main) .section .breadcrumb [aria-current="page"] { color: var(--ink); }
:where(#main) .section .breadcrumb ol { justify-content: flex-start; }
:where(#main) .page-hero .eyebrow { color: var(--accent-light); }
:where(#main) .page-hero__title {
  margin: 0;
  color: #ffffff;
  font-size: var(--step-h1);
  font-weight: var(--w-display);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  text-wrap: pretty;
}
:where(#main) .page-hero__lede {
  max-width: 58ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--step-body);
  line-height: 1.5;
}
:where(#main) .btn {
  --btn-bg: var(--cta);
  --btn-fg: var(--cta-ink);
  --btn-bg-hover: var(--cta-hover);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 4.8rem;
  padding: 1.36rem 2.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--step-cta);
  font-weight: var(--w-ui);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
:where(#main) .btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  :where(#main) .btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
}
:where(#main) .btn--secondary {
  --btn-bg: #ffffff;
  --btn-fg: var(--navy);
  --btn-bg-hover: var(--tint);
}
:where(#main) .btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.14);
  --btn-fg: #ffffff;
  --btn-bg-hover: rgba(255, 255, 255, 0.24);
}
:where(#main) .section:not(.section--deep):not(.section--black) .btn--ghost,
:where(#main) .section--tint .btn--ghost {
  --btn-bg: rgba(0, 40, 77, 0.07);
  --btn-fg: var(--navy);
  --btn-bg-hover: rgba(0, 40, 77, 0.13);
}
:where(#main) .btn--sm {
  min-height: 4rem;
  padding: 1.04rem 2rem;
  font-size: var(--step-cta);
}
:where(#main) .btn--block {
  display: flex;
  width: 100%;
}
:where(#main) .btn__arrow {
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 1.6rem;
  transition: transform var(--dur) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :where(#main) .btn:hover .btn__arrow { transform: translateX(0.4rem); }
}
:where(#main) .btn[aria-disabled="true"],
:where(#main) .btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}
:where(#main) .link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.32rem;
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: var(--w-ui);
  text-decoration: none;
}
:where(#main) .link-arrow svg {
  width: 1.44rem;
  height: 1.44rem;
  flex: 0 0 1.44rem;
  transition: transform var(--dur) var(--ease-out);
}
:where(#main) .link-arrow::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :where(#main) .link-arrow:hover svg { transform: translateX(0.3em); }
  :where(#main) .link-arrow:hover::after { transform: scaleX(1); }
}
:where(#main) .link-arrow:focus-visible::after { transform: scaleX(1); }
:where(#main) .section--deep .link-arrow,
:where(#main) .section--black .link-arrow,
:where(#main) .site-footer .link-arrow { color: #ffffff; }
:where(#main) .link-arrow--onDark { color: var(--accent-light); }
:where(#main) .media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--tint);
}
:where(#main) .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(#main) .media--3-2 { aspect-ratio: 3 / 2; }
:where(#main) .media--4-3 { aspect-ratio: 4 / 3; }
:where(#main) .media--1-1 { aspect-ratio: 1 / 1; }
:where(#main) .media--3-4 { aspect-ratio: 3 / 4; }
:where(#main) .media--2-3 { aspect-ratio: 2 / 3; }
:where(#main) .media--16-9 { aspect-ratio: 16 / 9; }
:where(#main) .media--tile {
  background: transparent;
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
}
:where(#main) .media--tile img { object-fit: contain; }
:where(#main) .section--deep .media--tile,
:where(#main) .section--black .media--tile {
  background: var(--tile);
  border: 1px solid var(--border);
}
:where(#main) .media--zoom img {
  transition: transform 900ms var(--ease-out);
  will-change: transform;
}
:where(#main) a:hover .media--zoom img,
:where(#main) .media--zoom:hover img { transform: scale(1.045); }
:where(#main) figure { margin: 0; }
:where(#main) figcaption {
  margin-top: var(--space-sm);
  font-size: var(--step-meta);
  color: var(--text-muted);
  line-height: 1.5;
}
:where(#main) .figure-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--step-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
:where(#main) .bleed {
  position: relative;
  width: 100%;
  overflow: hidden;
}
:where(#main) .bleed img,
:where(#main) .bleed video {
  width: 100%;
  height: clamp(32rem, 62vh, 73.6rem);
  object-fit: cover;
}
:where(#main) .video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--near-black);
  cursor: pointer;
}
:where(#main) .video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
  transition: opacity var(--dur) var(--ease-out),
              transform 900ms var(--ease-out);
}
:where(#main) .video-facade:hover img { opacity: 1; transform: scale(1.03); }
:where(#main) .video-facade__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  pointer-events: none;
}
:where(#main) .video-facade__play span {
  display: grid;
  place-items: center;
  width: clamp(5.6rem, 6vw, 8rem);
  aspect-ratio: 1;
  border: 1px solid rgba(201, 169, 97, 0.8);
  border-radius: 50%;
  background: rgba(6, 22, 34, 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
:where(#main) .video-facade:hover .video-facade__play span {
  background: rgba(201, 169, 97, 0.9);
  color: var(--accent-ink);
  transform: scale(1.06);
}
:where(#main) .video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
:where(#main) .service-panels {
  display: grid;
  gap: 1px;
  background: var(--border);
}
:where(#main) .service-panel {
  position: relative;
  display: grid;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
}
:where(#main) .service-panel__media { position: relative; overflow: hidden; }
:where(#main) .service-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
:where(#main) .service-panel:hover .service-panel__media img { transform: scale(1.05); }
:where(#main) .service-panel__body {
  display: grid;
  align-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--gutter);
}
:where(#main) .service-panel__index {
  font-family: var(--font-display);
  font-size: var(--step-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
:where(#main) .service-panel__title {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color var(--dur) var(--ease-out);
}
:where(#main) .service-panel:hover .service-panel__title { color: var(--accent); }
:where(#main) .service-panel__text {
  max-width: 46ch;
  color: var(--text-secondary);
}
:where(#main) .service-panel__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.88rem;
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
:where(#main) .service-panel__cue svg { transition: transform var(--dur) var(--ease-out); }
:where(#main) .service-panel:hover .service-panel__cue svg { transform: translateX(0.35em); }
:where(#main) .service-panel--feature {
  min-height: clamp(38.4rem, 70vh, 64rem);
  border-radius: var(--radius-xl);
}
:where(#main) .service-panel--feature .service-panel__media { position: absolute; inset: 0; }
:where(#main) .service-panel--feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(6, 22, 34, 0.9) 0%,
                                      rgba(6, 22, 34, 0.4) 55%,
                                      rgba(6, 22, 34, 0.12) 100%);
}
:where(#main) .service-panel--feature .service-panel__body {
  position: relative;
  z-index: 2;
  align-content: end;
  padding-block: var(--space-xl);
}
:where(#main) .service-panel--feature .service-panel__title { color: #fff; }
:where(#main) .service-panel--feature .service-panel__text { color: rgba(255, 255, 255, 0.84); }
:where(#main) .service-panel--feature .service-panel__index,
:where(#main) .service-panel--feature .service-panel__cue { color: var(--accent); }
:where(#main) .service-panel--feature:hover .service-panel__title { color: var(--accent); }
:where(#main) .service-list { display: grid; gap: 1px; background: var(--border); }
:where(#main) .service-list__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease-out),
              padding-left var(--dur) var(--ease-out);
}
:where(#main) .service-list__item:hover {
  background: var(--surface-soft);
  padding-left: var(--space-md);
}
:where(#main) .service-list__num {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
:where(#main) .service-list__name {
  font-family: var(--font-display);
  font-size: var(--step-h6);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
:where(#main) .service-list__item svg {
  color: var(--accent);
  transition: transform var(--dur) var(--ease-out);
}
:where(#main) .service-list__item:hover svg { transform: translateX(0.35em); }
:where(#main) .gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
:where(#main) .gallery-filter {
  padding: 0.88rem 1.84rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
:where(#main) .gallery-filter:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  :where(#main) .gallery-filter:hover { border-color: var(--accent); color: var(--accent); }
}
:where(#main) .gallery-filter[aria-pressed="true"] {
  background: var(--accent-base);
  border-color: var(--accent);
  color: var(--accent-ink);
}
:where(#main) .gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
:where(#main) .gallery-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--tint);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-press) var(--ease-out);
}
:where(#main) .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out),
              opacity var(--dur) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :where(#main) .gallery-item:hover img { transform: scale(1.04); }
}
:where(#main) .gallery-item:active { transform: scale(0.99); }
:where(#main) .gallery-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(6, 22, 34, 0.8), rgba(6, 22, 34, 0) 55%);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
:where(#main) .gallery-item:hover .gallery-item__overlay,
:where(#main) .gallery-item:focus-visible .gallery-item__overlay { opacity: 1; }
:where(#main) .gallery-item.is-hidden { display: none; }
:where(#main) .lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(3, 11, 18, 0.97);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-panel) var(--ease-out),
              visibility 0s linear var(--dur-panel);
}
:where(#main) .lightbox.is-open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
:where(#main) .lightbox :focus-visible { outline-color: var(--accent); }
:where(#main) .lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--gutter);
  border-bottom: 1px solid rgba(201, 169, 97, 0.24);
}
:where(#main) .lightbox__count {
  font-family: var(--font-display);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
:where(#main) .lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-md) var(--gutter);
  min-height: 0;
}
:where(#main) .lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
:where(#main) .lightbox__foot {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--gutter) var(--space-lg);
  text-align: center;
}
:where(#main) .lightbox__title {
  font-family: var(--font-display);
  font-size: var(--step-h6);
  font-weight: 700;
  color: #fff;
}
:where(#main) .lightbox__btn {
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 50%;
  color: #fff;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
:where(#main) .lightbox__btn:hover {
  background: var(--accent-base);
  border-color: var(--accent);
  color: var(--accent-ink);
}
:where(#main) .lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
:where(#main) .lightbox__nav--prev { left: var(--space-xs); }
:where(#main) .lightbox__nav--next { right: var(--space-xs); }
:where(#main) .ba {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--near-black);
  touch-action: pan-y;         
  user-select: none;
  -webkit-user-select: none;
}
:where(#main) .ba__frame { position: relative; display: block; width: 100%; }
:where(#main) .ba__frame img {
  display: block;
  width: 100%;
  height: auto;
}
:where(#main) .ba__after {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 var(--pos, 50%));
}
:where(#main) .ba__after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(#main) .ba--fill .ba__frame img { aspect-ratio: 3 / 4; object-fit: cover; }
:where(#main) .ba__label {
  position: absolute;
  top: var(--space-sm);
  z-index: 3;
  padding: 0.64rem 1.36rem;
  background: rgba(6, 22, 34, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}
:where(#main) .ba__label--before { left: var(--space-sm); }
:where(#main) .ba__label--after { right: var(--space-sm); }
:where(#main) .ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 4;
  width: 2px;
  margin-left: -1px;
  background: var(--accent-base);
  pointer-events: none;
}
:where(#main) .ba__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: var(--accent-base);
  color: var(--accent-ink);
  box-shadow: var(--shadow-md);
}
:where(#main) .ba__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
}
:where(#main) .ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}
:where(#main) .ba__range::-moz-range-thumb {
  width: 5.2rem;
  height: 5.2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
}
:where(#main) .ba__range::-moz-range-track { background: transparent; }
:where(#main) .ba__range:focus-visible {
  outline: 2px solid var(--accent-base);
  outline-offset: -2px;
}
:where(#main) .ba__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font-size: var(--step-meta);
  color: var(--text-muted);
}
:where(#main) .testimonials { position: relative; }
:where(#main) .testimonial {
  display: none;
  max-width: 86.4rem;
}
:where(#main) .testimonial.is-active { display: block; }
:where(#main) .testimonial__quote { margin-bottom: var(--space-lg); }
:where(#main) .testimonial__quote p { margin: 0; }
:where(#main) .testimonial__cite {
  display: grid;
  gap: 0.32rem;
  font-style: normal;
}
:where(#main) .testimonial__name {
  font-family: var(--font-display);
  font-size: var(--step-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
:where(#main) .testimonial__role {
  font-family: var(--font-display);
  font-size: var(--step-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
:where(#main) .testimonial-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
:where(#main) .testimonial-controls__btn {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
:where(#main) .testimonial-controls__btn:hover {
  background: var(--accent-base);
  border-color: var(--accent);
  color: var(--accent-ink);
}
:where(#main) .testimonial-controls__count {
  font-family: var(--font-display);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
:where(#main) .accordion { border-top: 1px solid var(--border); }
:where(#main) .accordion__item { border-bottom: 1px solid var(--border); }
:where(#main) .accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-h6);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .accordion__trigger:hover { color: var(--accent); }
:where(#main) .accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--accent);
}
:where(#main) .accordion__icon::before,
:where(#main) .accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}
:where(#main) .accordion__icon::after { transform: rotate(90deg); }
:where(#main) .accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }
:where(#main) .accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}
:where(#main) .accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
:where(#main) .accordion__panel > div { overflow: hidden; }
:where(#main) .accordion__panel-inner { padding-bottom: var(--space-md); max-width: var(--measure); }
:where(#main) .form { display: grid; gap: var(--space-lg); }
:where(#main) .form__group {
  display: grid;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}
:where(#main) .form__group:last-of-type { border-bottom: 0; padding-bottom: 0; }
:where(#main) .form__legend {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
:where(#main) .field { display: grid; gap: 0.72rem; }
:where(#main) .field__label {
  font-family: var(--font-display);
  font-size: var(--step-meta);
  font-weight: 600;
  color: var(--ink);
}
:where(#main) .field__label .req { color: var(--accent); }
:where(#main) .field__hint {
  font-size: 1.36rem;
  color: var(--text-muted);
}
:where(#main) .field input[type="text"],
:where(#main) .field input[type="email"],
:where(#main) .field input[type="tel"],
:where(#main) .field input[type="number"],
:where(#main) .field input[type="url"],
:where(#main) .field select,
:where(#main) .field textarea {
  width: 100%;
  min-height: 5.2rem;
  padding: 1.36rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 1.6rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
:where(#main) .field textarea { min-height: 14.4rem; resize: vertical; line-height: 1.6; }
:where(#main) .field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23e57428' stroke-width='1.4' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  background-size: 1.2rem;
  padding-right: 4rem;
}
:where(#main) .section--deep .field select,
:where(#main) .section--black .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23f08a3c' stroke-width='1.4' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}
:where(#main) .field input:focus,
:where(#main) .field select:focus,
:where(#main) .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(229, 116, 40, 0.12);
}
:where(#main) .field input:focus-visible,
:where(#main) .field select:focus-visible,
:where(#main) .field textarea:focus-visible {
  outline: 2px solid var(--accent-base);
  outline-offset: 1px;
}
:where(#main) .field--invalid input,
:where(#main) .field--invalid select,
:where(#main) .field--invalid textarea {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.10);
}
:where(#main) .field__error {
  display: none;
  align-items: center;
  gap: 0.64rem;
  font-size: 1.36rem;
  font-weight: 600;
  color: #b3261e;
}
:where(#main) .section--deep .field--invalid input,
:where(#main) .section--black .field--invalid input,
:where(#main) .section--deep .field--invalid select,
:where(#main) .section--black .field--invalid select,
:where(#main) .section--deep .field--invalid textarea,
:where(#main) .section--black .field--invalid textarea { border-color: #f08a80; }
:where(#main) .section--deep .field__error,
:where(#main) .section--black .field__error { color: #f08a80; }
:where(#main) .field--invalid .field__error { display: flex; }
:where(#main) .field-row { display: grid; gap: var(--space-md); }
:where(#main) .choices { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
:where(#main) .choice {
  position: relative;
  display: inline-flex;
}
:where(#main) .choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
:where(#main) .choice span {
  display: inline-flex;
  align-items: center;
  min-height: 4.64rem;
  padding: 0.96rem 1.76rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--step-meta);
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
:where(#main) .choice input:active + span { transform: scale(0.97); }
:where(#main) .choice input:hover + span { border-color: var(--accent); color: var(--ink); }
:where(#main) .choice input:checked + span {
  background: var(--accent-base);
  border-color: var(--accent);
  color: var(--accent-ink);
}
:where(#main) .choice input:focus-visible + span {
  outline: 2px solid var(--accent-base);
  outline-offset: 2px;
}
:where(#main) .upload {
  display: grid;
  place-items: center;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-muted);
  background: var(--surface-soft);
}
:where(#main) .form__status {
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-soft);
  font-size: 1.6rem;
  line-height: 1.6;
}
:where(#main) .form__status[data-state="error"] {
  border-left-color: #b3261e;
  background: rgba(179, 38, 30, 0.05);
}
:where(#main) .section--deep .form__status[data-state="error"],
:where(#main) .section--black .form__status[data-state="error"] {
  border-left-color: #f08a80;
  background: rgba(240, 138, 128, 0.08);
}
:where(#main) .form__status a {
  color: var(--accent);
  font-weight: 600;
}
:where(#main) .section--deep .form__status a,
:where(#main) .section--black .form__status a { color: var(--water-pale); }
:where(#main) .form__status:empty { display: none; }
:where(#main) .contact-fab {
  position: fixed;
  right: clamp(1.6rem, 3vw, 3.2rem);
  bottom: clamp(1.6rem, 3vw, 3.2rem);
  z-index: var(--z-panel);
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
:where(#main) .contact-fab:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}
:where(#main) .contact-fab__icon { transition: opacity var(--dur-fast) var(--ease-out); }
:where(#main) .contact-fab[aria-expanded="true"] .contact-fab__icon--open { display: none; }
:where(#main) .contact-fab:not([aria-expanded="true"]) .contact-fab__icon--close { display: none; }
:where(#main) .contact-panel {
  position: fixed;
  right: clamp(1.6rem, 3vw, 3.2rem);
  bottom: calc(clamp(1.6rem, 3vw, 3.2rem) + 6.8rem);
  z-index: var(--z-panel);
  width: min(33.6rem, calc(100vw - 3.2rem));
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-md);
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.96rem);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
}
:where(#main) .contact-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
:where(#main) .contact-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}
:where(#main) .contact-panel__avatar {
  flex-shrink: 0;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--navy-deep);
}
:where(#main) .contact-panel__title {
  font-family: var(--font-display);
  font-size: var(--step-meta);
  font-weight: 700;
  color: var(--text-on-dark);
}
:where(#main) .contact-panel__sub { font-size: 1.28rem; color: var(--text-on-dark-muted); }
:where(#main) .contact-panel__list { display: grid; gap: 1px; background: var(--border); }
:where(#main) .contact-panel__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 1.36rem 0.8rem;
  background: var(--navy-raised);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: 1.44rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
:where(#main) .contact-panel__link:hover { background: rgba(229, 116, 40, 0.12); }
:where(#main) .contact-panel__link svg { flex-shrink: 0; color: var(--accent); }
:where(#main) .contact-panel__link small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-on-dark-muted);
}
:where(#main) .sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-panel);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
}
:where(#main) .sticky-cta.is-visible { transform: translateY(0); }
:where(#main) .sticky-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 5.6rem;
  background: var(--navy-deep);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
:where(#main) .sticky-cta__btn--primary { background: var(--cta); color: var(--cta-ink); }
:where(#main) .sticky-cta__btn--signal { background: var(--brand-signal); color: #20160a; }
@media (min-width: 62rem) {
  :where(#main) .sticky-cta { display: none; }
}
:where(#main) .footer-capture {
  position: relative;
  z-index: 2;
  padding-block: 0 0;
  background: transparent;
}
:where(#main) .footer-capture__panel {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  padding: clamp(2.8rem, 3.5vw, 4.4rem) clamp(2.4rem, 3vw, 4.8rem);
  border-radius: var(--radius);
  background: var(--navy);
  color: #ffffff;
  transform: translateY(50%);
}
:where(#main) .footer-capture__title {
  margin: 0;
  color: #ffffff;
  font-size: var(--step-h4);
  font-weight: var(--w-display);
  line-height: 1.1;
  letter-spacing: var(--track-h4);
}
:where(#main) .footer-capture__form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  transition: background var(--dur-fast) var(--ease-out);
}
:where(#main) .footer-capture__form:focus-within { background: rgba(255, 255, 255, 0.16); }
:where(#main) .footer-capture__input {
  flex: 1;
  min-width: 0;
  padding: 1.6rem 5.6rem 1.6rem 2.4rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #ffffff;
  font-size: var(--step-body);
}
:where(#main) .footer-capture__input::placeholder { color: rgba(255, 255, 255, 0.6); }
:where(#main) .footer-capture__input:focus { outline: none; }
:where(#main) .footer-capture__submit {
  position: absolute;
  right: 0.8rem;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
:where(#main) .footer-capture__submit svg { width: 1.76rem; height: 1.76rem; }
:where(#main) .footer-capture__submit:hover {
  background: var(--accent-base);
  color: var(--accent-ink);
}
:where(#main) .site-footer {
  position: relative;
  background: var(--navy-deep);
  color: var(--text-on-dark-muted);
}
:where(#main) .site-footer__about {
  position: relative;
  padding-block: calc(var(--space-2xl) + 4.8rem) var(--space-2xl);
  overflow: hidden;
  isolation: isolate;
}
:where(#main) .site-footer__about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/wp-content/uploads/hero-poster-desktop-1280.webp") center / cover no-repeat;
  opacity: 0.45;
}
:where(#main) .site-footer__about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(0, 13, 26, 0.85) 0%,
    rgba(0, 13, 26, 0.55) 45%,
    rgba(0, 13, 26, 0.92) 100%);
}
:where(#main) .site-footer__statement {
  max-width: 34ch;
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: var(--w-display);
  line-height: 1.12;
  letter-spacing: var(--track-h4);
}
:where(#main) .site-footer__grid {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--hairline-onDark);
}
:where(#main) .site-footer__logo img {
  width: auto;
  height: 4.4rem;
}
:where(#main) .site-footer__tagline {
  margin: var(--space-md) 0 var(--space-sm);
  color: #ffffff;
  font-size: var(--step-small);
  line-height: 1.45;
}
:where(#main) .site-footer__phone {
  display: inline-block;
  color: #ffffff;
  font-size: var(--step-h6);
  font-weight: var(--w-ui);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .site-footer__phone:hover { color: var(--accent-light); }
:where(#main) .site-footer__brand p { font-size: var(--step-small); }
:where(#main) .site-footer__brand a { color: inherit; text-decoration: none; }
:where(#main) .site-footer__brand a:hover { color: #ffffff; }
:where(#main) .site-footer__col-title {
  margin: 0 0 var(--space-sm);
  color: #ffffff;
  font-size: var(--step-small);
  font-weight: var(--w-emphasis);
  line-height: 1.3;
  letter-spacing: 0;
}
:where(#main) .site-footer__list {
  display: grid;
  gap: 0.96rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(#main) .site-footer__list a {
  color: var(--text-on-dark-muted);
  font-size: var(--step-small);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .site-footer__list a:hover { color: #ffffff; }
:where(#main) .site-footer__social {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
:where(#main) .site-footer__social a {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transition: background var(--dur-fast) var(--ease-out);
}
:where(#main) .site-footer__social a:hover { background: var(--accent-base); }
:where(#main) .site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-md);
  border-top: 1px solid var(--hairline-onDark);
  font-size: var(--step-meta);
}
:where(#main) .site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
:where(#main) .site-footer__legal a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .site-footer__legal a:hover { color: #ffffff; }
@media (min-width: 48em) {
  :where(#main) .footer-capture__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 41.6rem);
    gap: var(--space-lg);
  }
}
@media (min-width: 62em) {
  :where(#main) .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-xl);
  }
  :where(#main) .site-footer__statement { font-size: var(--step-h3); letter-spacing: var(--track-h3); }
}
:where(#main) .page--emergency .page-hero { min-height: clamp(35.2rem, 52vh, 51.2rem); }
:where(#main) .page--emergency .page-hero::after {
  background: linear-gradient(to top, rgba(6, 22, 34, 0.96) 0%,
                                      rgba(6, 22, 34, 0.66) 60%,
                                      rgba(6, 22, 34, 0.4) 100%);
}
:where(#main) .page--emergency .page-hero .eyebrow { color: var(--brand-signal); }
:where(#main) .emergency-call {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--brand-signal);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: rgba(235, 150, 34, 0.09);
}
:where(#main) .emergency-call__number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 6rem); 
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
:where(#main) .emergency-call__number:hover { color: var(--brand-signal); }
:where(#main) .page--maintenance .section { padding-block: var(--section-pad); }
:where(#main) .page--maintenance .prose { max-width: var(--measure-sm); }
:where(#main) .page--pool-panels .page-hero { min-height: clamp(48rem, 78vh, 73.6rem); }
:where(#main) .page--pool-panels .section__head { margin-bottom: var(--space-2xl); }
:where(#main) .page--pond .section--tint { background: #eef5f3; }
:where(#main) .page--quote .form { max-width: 70.4rem; }
:where(#main) .page--gallery .section { padding-block: var(--section-pad-s); }
:where(#main) .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 25.6rem), 1fr));
  gap: var(--space-md);
}
:where(#main) .product-card {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease-card),
              box-shadow var(--dur) var(--ease-card);
}
:where(#main) .rail__card {
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease-card),
              box-shadow var(--dur) var(--ease-card);
}
@media (hover: hover) and (pointer: fine) {
  :where(#main) .product-card:hover,
:where(#main) .rail__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
  }
}
:where(#main) .product-card:active { transform: translateY(-1px); }
:where(#main) .product-card__media {
  aspect-ratio: 1;
  background: transparent;
  border-radius: var(--radius);
  overflow: hidden;
}
:where(#main) .section--deep .product-card__media,
:where(#main) .section--black .product-card__media {
  background: var(--tile);
  border: 1px solid var(--border);
}
:where(#main) .product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-sm);
  transition: transform 700ms var(--ease-out);
}
:where(#main) .product-card:hover .product-card__media img { transform: scale(1.04); }
:where(#main) .product-card__name {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .product-card:hover .product-card__name { color: var(--accent); }
:where(#main) .product-card__price {
  font-family: var(--font-display);
  font-size: 1.68rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
:where(#main) .product-note {
  font-family: var(--font-display);
  font-size: var(--step-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
:where(#main) .trust-strip {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}
:where(#main) .trust-strip__item {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--border);
}
:where(#main) .trust-strip__figure {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 4vw, 4.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
:where(#main) .trust-strip__label {
  font-size: var(--step-small);
  color: var(--text-secondary);
  max-width: 34ch;
}
:where(#main) .trusted-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
:where(#main) .trusted-by__label {
  font-family: var(--font-display);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
:where(#main) .trusted-by img {
  height: clamp(1.76rem, 2vw, 2.56rem);
  width: auto;
  opacity: 0.72;
  transition: opacity var(--dur) var(--ease-out);
}
:where(#main) .section--deep .trusted-by img,
:where(#main) .section--black .trusted-by img { filter: invert(1) brightness(2); }
:where(#main) .trusted-by a:hover img { opacity: 1; }
:where(#main) .steps { display: grid; gap: 0; }
:where(#main) .steps .step {
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--border);
}
:where(#main) .steps .step:last-child { border-bottom: 1px solid var(--border); }
:where(#main) .steps .step__num {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 5vw, 5.6rem);
  font-weight: 700;
  line-height: 0.95;
  color: var(--accent);
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
:where(#main) .section--deep .step__num,
:where(#main) .section--black .step__num { opacity: 0.95; }
:where(#main) .steps .step__title {
  font-family: var(--font-display);
  font-size: var(--step-h6);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
:where(#main) .steps .step__text { max-width: 52ch; }
:where(#main) .creature-grid { display: grid; gap: var(--space-sm); }
:where(#main) .creature {
  position: relative;
  display: grid;
  align-content: end;
  min-height: clamp(32rem, 48vh, 48rem);
  padding: var(--space-lg) var(--space-md);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: #fff;
  background: var(--near-black);
}
:where(#main) .creature img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms var(--ease-out);
}
:where(#main) .creature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 22, 34, 0.88), rgba(6, 22, 34, 0.1) 70%);
}
:where(#main) .creature:hover img { transform: scale(1.05); }
:where(#main) .creature__title {
  font-family: var(--font-display);
  font-size: var(--step-h6);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .creature:hover .creature__title { color: var(--accent); }
:where(#main) .creature__text {
  margin-top: var(--space-2xs);
  max-width: 34ch;
  font-size: var(--step-meta);
  color: rgba(255, 255, 255, 0.82);
}
:where(#main) .rail {
  display: grid;
  gap: var(--space-md);
}
:where(#main) .rail + .m-film { margin-top: var(--space-lg); }
:where(#main) .rail__card {
  display: grid;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
}
:where(#main) .rail__card .media { margin-bottom: var(--space-2xs); }
:where(#main) .rail__title {
  font-family: var(--font-display);
  font-size: var(--step-h6);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#main) .rail__card:hover .rail__title { color: var(--accent); }
:where(#main) .cta-final {
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
}
:where(#main) .cta-final__title {
  font-family: var(--font-display);
  font-size: var(--step-h1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 20ch;
}
:where(#main) .js [data-reveal] {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
:where(#main) .js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
:where(#main) .js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
:where(#main) .js [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}
:where(#main) .js [data-reveal-media] { overflow: hidden; }
:where(#main) .js [data-reveal-media] img {
  transform: scale(1.08);
  opacity: 0;
  transition: transform 1100ms var(--ease-out), opacity 700ms var(--ease-out);
}
:where(#main) .js [data-reveal-media].is-visible img {
  transform: scale(1);
  opacity: 1;
}
:where(#main) .hero__inner > * {
  animation: hero-in 900ms var(--ease-out) both;
}
:where(#main) .hero__inner > *:nth-child(1) { animation-delay: 120ms; }
:where(#main) .hero__inner > *:nth-child(2) { animation-delay: 220ms; }
:where(#main) .hero__inner > *:nth-child(3) { animation-delay: 330ms; }
:where(#main) .hero__inner > *:nth-child(4) { animation-delay: 440ms; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(2.56rem); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 30rem) {
  :where(#main) .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  :where(#main) .field-row { grid-template-columns: repeat(2, 1fr); }
  :where(#main) .utility-bar__sep { display: inline; }
  :where(#main) .utility-bar__item--area { display: inline-flex; }
}
@media (min-width: 40rem) {
  :where(#main) .creature-grid { grid-template-columns: repeat(2, 1fr); }
  :where(#main) .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-lg); }
  :where(#main) .rail { grid-template-columns: repeat(2, 1fr); }
  :where(#main) .cta-final { justify-items: start; }
  :where(#main) .steps .step {
    grid-template-columns: 9.6rem 1fr;
    gap: var(--space-lg);
    align-items: start;
  }
}
@media (min-width: 48rem) {
  :where(#main) .service-panel {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
  }
  :where(#main) .service-panel__media { min-height: clamp(32rem, 42vw, 51.2rem); }
  :where(#main) .service-panel__body { padding: var(--space-xl); }
  :where(#main) .service-panel:nth-child(even) .service-panel__media { order: 2; }
  :where(#main) .service-panel--feature { grid-template-columns: 1fr; }
  :where(#main) .service-panel--feature .service-panel__body { max-width: 73.6rem; }
  :where(#main) .split--2 { grid-template-columns: repeat(2, 1fr); align-items: center; }
  :where(#main) .split--media-first > :first-child { order: -1; }
  :where(#main) .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }
  :where(#main) .gallery-item--wide { grid-column: span 2; }
  :where(#main) .gallery-item--tall { grid-row: span 2; }
  :where(#main) .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  :where(#main) .lightbox__nav--prev { left: var(--space-md); }
  :where(#main) .lightbox__nav--next { right: var(--space-md); }
}
@media (min-width: 62rem) {
  :root { --header-h: 8.4rem; }
  :where(#main) .split--editorial {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-2xl);
    align-items: center;
  }
  :where(#main) .split--offset {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-2xl);
    align-items: center;
  }
  :where(#main) .section__head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: var(--space-2xl);
    align-items: end;
  }
  :where(#main) .trust-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 var(--space-lg);
  }
  :where(#main) .creature-grid { grid-template-columns: repeat(4, 1fr); }
  :where(#main) .rail { grid-template-columns: repeat(3, 1fr); }
  :where(#main) .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  :where(#main) .service-list__item { padding-inline: var(--space-md); }
  :where(#main) .steps--2col { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-2xl); }
  :where(#main) .steps--2col .step:nth-child(2) { border-top: 1px solid var(--border); }
}
@media (min-width: 80rem) {
  :where(#main) .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  :where(#main) .product-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 120rem) {
  :root { --container: 1600px; }
}
@media (hover: none) {
  :where(#main) .gallery-item__overlay { opacity: 1; }
  :where(#main) .media--zoom img { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  
  :where(#main) *,
:where(#main) *::before,
:where(#main) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  :where(#main) .js [data-reveal],
:where(#main) .js [data-reveal-stagger] > *,
:where(#main) .js [data-reveal-media] img,
:where(#main) .hero__inner > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  :where(#main) .hero__scroll-line::after { animation: none; top: 0; }
  :where(#main) .coral-piece {
    animation: none !important;
    transform: none !important;
  }
  :where(#main) .media--zoom img,
:where(#main) .service-panel__media img,
:where(#main) .creature img,
:where(#main) .video-facade img { transition: none !important; }
  :where(#main) a:hover .media--zoom img,
:where(#main) .service-panel:hover .service-panel__media img,
:where(#main) .creature:hover img { transform: none !important; }
}
@media print {
  :where(#main) .utility-bar,
:where(#main) .site-header,
:where(#main) .primary-nav,
:where(#main) .hero__scroll,
:where(#main) .contact-fab,
:where(#main) .contact-panel,
:where(#main) .sticky-cta,
:where(#main) .lightbox,
:where(#main) .gallery-filters,
:where(#main) .video-facade,
:where(#main) .wave-divider,
:where(#main) .ba__range { display: none !important; }
  :root {
    --ink: #000;
    --text-secondary: #222;
    --text-muted: #555;
    --border: rgba(0, 0, 0, 0.25);
  }
  :where(#main) { background: #fff; color: #000; font-size: 11pt; }
  :where(#main) .section { padding-block: 2.4rem; }
  :where(#main) .section--deep,
:where(#main) .section--black,
:where(#main) .section--tint,
:where(#main) .section--ice,
:where(#main) .site-footer,
:where(#main) .creature { background: #fff !important; color: #000 !important; }
  :where(#main) .section--deep h1,
:where(#main) .section--deep h2,
:where(#main) .section--deep h3,
:where(#main) .section--black h1,
:where(#main) .section--black h2,
:where(#main) .section--black h3,
:where(#main) .creature__title,
:where(#main) .site-footer__tagline,
:where(#main) .site-footer__phone { color: #000 !important; }
  :where(#main) .creature::after { display: none !important; }
  :where(#main) .site-logo__mark--dark { display: block; }
  :where(#main) .site-logo__mark--light { display: none; }
  :where(#main) .trusted-by img { filter: none !important; }
  :where(#main) a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  :where(#main) a[href^="#"]::after,
:where(#main) a[href^="tel"]::after { content: ""; }
  :where(#main) .page-hero,
:where(#main) .hero { min-height: auto; color: #000; background: #fff; }
  :where(#main) .page-hero::after,
:where(#main) .hero::after { display: none; }
  :where(#main) .page-hero__title,
:where(#main) .hero__title { color: #000; }
}
:where(#main) .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.32rem 0.8rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-size: 1rem;
  font-weight: var(--w-ui);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
:where(#main) .tag--gold { background: var(--accent-base); color: var(--accent-ink); }
:where(#main) .tag--water { background: var(--water); }
:where(#main) .tag--purple { background: var(--coral-purple); }
:where(#main) .tag--onLight {
  background: rgba(0, 40, 77, 0.08);
  color: var(--navy);
}
:where(#main) .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  justify-content: center;
}
:where(#main) .band {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  padding-block: clamp(6.4rem, 11vw, 16rem) clamp(12.8rem, 26vw, 50rem);
  overflow: hidden;
  background: var(--navy);
  color: #ffffff;
  text-align: center;
  isolation: isolate;
}
:where(#main) .band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
:where(#main) .band__media img,
:where(#main) .band__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(#main) .band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(0, 13, 26, 0.72) 0%,
    rgba(0, 13, 26, 0.3) 45%,
    rgba(0, 13, 26, 0.55) 100%);
}
:where(#main) .band__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 73.6rem;
}
:where(#main) .band__title {
  margin: 0;
  color: #ffffff;
  font-size: var(--step-h2);
  font-weight: var(--w-display);
  line-height: 1.0;
  letter-spacing: var(--track-h2);
}
:where(#main) .band__text {
  max-width: 58ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--step-body);
  line-height: 1.5;
}
:where(#main) .band .trusted-by {
  justify-content: center;
  margin-top: var(--space-md);
}
:where(#main) .band .trusted-by__label { color: rgba(255, 255, 255, 0.7); }
:where(#main) .band .trusted-by img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
:where(#main) .band__more {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--glass);
  color: #ffffff;
  font-size: 1.76rem;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out);
}
:where(#main) .band__more:hover { background: var(--glass-hover); }
:where(#main) .showcase {
  position: relative;
  padding-block: clamp(6.4rem, 12vw, 17rem) clamp(8rem, 15vw, 22rem);
  overflow: hidden;
  background: var(--near-black);
  color: #ffffff;
  isolation: isolate;
}
:where(#main) .showcase__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  padding: 1.2rem;
}
:where(#main) .showcase__grid > * {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
:where(#main) .showcase__grid img,
:where(#main) .showcase__grid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(#main) .showcase__caption {
  position: absolute;
  inset: var(--space-md) var(--space-md) auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--step-h6);
  font-weight: var(--w-display);
  line-height: 1.15;
  letter-spacing: var(--track-h4);
  text-align: center;
}
:where(#main) .showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 50%,
      rgba(12, 10, 9, 0.94) 0%, rgba(12, 10, 9, 0.6) 55%, rgba(12, 10, 9, 0.25) 100%),
    rgba(12, 10, 9, 0.35);
}
:where(#main) .showcase__head {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  max-width: 70.4rem;
  margin-inline: auto;
  text-align: center;
}
:where(#main) .showcase__title {
  margin: 0;
  color: #ffffff;
  font-size: var(--step-h2);
  font-weight: var(--w-display);
  line-height: 1.0;
  letter-spacing: var(--track-h2);
}
:where(#main) .showcase__standfirst {
  max-width: 52ch;
  margin: 0;
  font-size: var(--step-body);
  font-weight: var(--w-emphasis);
  line-height: 1.5;
}
:where(#main) .showcase__text {
  max-width: 56ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--step-body);
  line-height: 1.5;
}
@media (min-width: 62em) {
  :where(#main) .showcase__grid { grid-template-columns: repeat(3, 1fr); }
}
:where(#main) .product-rail { position: relative; }
:where(#main) .product-rail__viewport {
  display: flex;
  gap: 1.5rem;
  padding-block-end: var(--space-xs);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
:where(#main) .product-rail__viewport::-webkit-scrollbar { display: none; }
:where(#main) .product-rail__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
:where(#main) .p-card {
  position: relative;
  flex: 0 0 29.6rem;          
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 44.4rem;           
  overflow: hidden;
  border-radius: 10px;
  scroll-snap-align: start;
  background: var(--navy-deep);
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  isolation: isolate;
}
:where(#main) .p-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
:where(#main) .p-card__media img,
:where(#main) .p-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :where(#main) .p-card:hover .p-card__media img,
:where(#main) .p-card:hover .p-card__media video { transform: scale(1.06); }
}
:where(#main) .p-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(0, 13, 26, 0.88) 0%,
    rgba(0, 13, 26, 0.45) 45%,
    rgba(0, 13, 26, 0.1) 100%);
}
:where(#main) .p-card__content {
  display: grid;
  justify-items: center;
  gap: 2.4rem;                
  padding: 3.2rem 2.4rem;       
}
:where(#main) .p-card__title {
  margin: 0;
  color: #ffffff;
  font-size: var(--step-h5);
  font-weight: var(--w-display);
  line-height: 1.06;
  letter-spacing: var(--track-h4);
}
:where(#main) .p-card__note {
  margin: 0;
  color: #ffffff;
  font-size: var(--step-meta);
  font-weight: var(--w-emphasis);
  line-height: 1.35;
}
:where(#main) .feature-card {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  padding: clamp(2.4rem, 3vw, 3.2rem);
  border-radius: var(--radius-lg);
  background: #fbf7f0;
  color: var(--navy);
}
:where(#main) .feature-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-deep);
}
:where(#main) .feature-card__media img,
:where(#main) .feature-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(#main) .feature-card__body {
  display: grid;
  align-content: center;
  gap: var(--space-sm);
  padding-right: clamp(0rem, 6vw, 9.6rem);
}
:where(#main) .feature-card__kicker {
  margin: 0;
  color: var(--navy);
  font-size: var(--step-h4);
  font-weight: var(--w-emphasis);
  line-height: 1.05;
  letter-spacing: var(--track-h4);
}
:where(#main) .feature-card__title {
  margin: 0;
  color: var(--navy);
  font-size: var(--step-h6);
  font-weight: var(--w-emphasis);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
:where(#main) .feature-card__text {
  margin: 0;
  max-width: 46ch;
  color: rgba(0, 40, 77, 0.8);
  font-size: var(--step-body);
  line-height: 1.5;
}
:where(#main) .feature-card__body .btn {
  justify-self: start;
  margin-top: var(--space-xs);
  --btn-bg: var(--navy-deep);
  --btn-fg: #ffffff;
  --btn-bg-hover: var(--navy);
}
:where(#main) .feature-card__quote {
  position: absolute;
  top: clamp(2.4rem, 3vw, 4rem);
  right: clamp(2.4rem, 3vw, 4rem);
  display: none;
  color: var(--accent-base);
  font-family: var(--font-display);
  font-size: 11.2rem;
  font-weight: var(--w-emphasis);
  line-height: 0.6;
  user-select: none;
  pointer-events: none;
}
:where(#main) .feature-card .testimonial {
  max-width: none;
  min-width: 0;
}
:where(#main) .feature-card .testimonial__quote {
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: var(--w-body);
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(0, 40, 77, 0.82);
}
:where(#main) .feature-card .testimonial__name { color: var(--navy); }
:where(#main) .feature-card .testimonial__role { color: var(--accent-dark); }
:where(#main) .feature-card__controls {
  display: flex;
  gap: var(--space-sm);
}
@media (min-width: 62em) {
  :where(#main) .feature-card {
    grid-template-columns: minmax(0, 38.4rem) minmax(0, 1fr) auto;
    align-items: stretch;
  }
  :where(#main) .feature-card__quote { display: block; }
  :where(#main) .feature-card__controls {
    flex-direction: column;
    justify-content: flex-end;
  }
}
:where(#main) .logo-strip__title {
  margin: 0 0 var(--space-lg);
  font-size: var(--step-h2);
  font-weight: var(--w-display);
  line-height: 1.0;
  letter-spacing: var(--track-h2);
}
:where(#main) .logo-strip__track {
  display: flex;
  gap: var(--space-sm);
  padding-block-end: var(--space-xs);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  scrollbar-width: none;
}
:where(#main) .logo-strip__track::-webkit-scrollbar { display: none; }
:where(#main) .logo-strip__tile {
  flex: 0 0 25rem;   
  display: grid;
  place-items: center;
  height: 20rem;       
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
}
:where(#main) .logo-strip__tile img {
  max-width: 100%;
  max-height: 8rem;
  width: auto;
  height: auto;
  object-fit: contain;
}
:where(#main) .gold-band {
  padding-block: clamp(4.8rem, 5.2vw, 7.5rem) clamp(4rem, 4.2vw, 6rem);
  background: var(--clrcta);
  color: var(--clrctaink);
}
:where(#main) .gold-band__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
:where(#main) .gold-band__title {
  margin: 0;
  color: var(--clrctaink);
  font-size: min(var(--step-h3), 4.16rem);
  font-weight: var(--w-display);
  line-height: 1.04;
  letter-spacing: var(--track-h3);
}
:where(#main) .gold-band__text {
  margin: 0 0 var(--space-md);
  color: var(--clrctaink);
  font-size: var(--step-small);
  line-height: 1.5;
}
:where(#main) .gold-band__mark img {
  width: auto;
  height: 7.2rem;
}
:where(#main) .gold-band .btn {
  --btn-bg: #ffffff;
  --btn-fg: var(--accent-dark);
  --btn-bg-hover: var(--tint);
}
@media (min-width: 75em) {
  :where(#main) .gold-band__inner {
    grid-template-columns: auto minmax(38.4rem, 1fr) minmax(0, 38.4rem);
    gap: var(--space-xl);
  }
}
:where(#main) .slider-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
:where(#main) .slider-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.25;
  pointer-events: none;
}
:where(#main) .slider-btn__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 276.46;
  stroke-dashoffset: 276.46;
  transform: rotate(-450deg);
  transform-origin: center;
  transition: stroke-dashoffset 3s var(--ease-expo),
              transform 3s var(--ease-expo);
  pointer-events: none;
}
:where(#main) .slider-btn:hover:not(:disabled) .slider-btn__ring {
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
}
:where(#main) .slider-btn__icon {
  width: 1.76rem;
  height: 1.76rem;
  pointer-events: none;
}
:where(#main) .slider-btn.-prev .slider-btn__icon { transform: rotate(180deg); }
:where(#main) .slider-btn:disabled { opacity: 0.25; cursor: default; }
:where(#main) .slider-btn--onDark,
:where(#main) .section--deep .slider-btn,
:where(#main) .section--black .slider-btn,
:where(#main) .showcase .slider-btn { color: #ffffff; }
:where(#main) .rail-controls {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-md);
}
:where(#main) .cat-selector {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  padding: 0.56rem;
  border-radius: var(--radius-pill);
  background: var(--tint);
  overflow-x: auto;
  scrollbar-width: none;
}
:where(#main) .cat-selector::-webkit-scrollbar { display: none; }
:where(#main) .cat-selector__slider {
  position: absolute;
  top: 0.56rem;
  left: 0;
  height: calc(100% - 1.12rem);
  border-radius: var(--radius-pill);
  background: var(--coral-purple);
  transition: transform var(--dur) var(--ease-out),
              width var(--dur) var(--ease-out);
  pointer-events: none;
}
:where(#main) .cat-selector .cat-selector__btn {
  position: relative;
  z-index: 1;
  padding: 1.36rem 2.4rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: var(--w-body);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :where(#main) .cat-selector .cat-selector__btn:hover {
    border-color: transparent;
    color: var(--ink);
  }
}
:where(#main) .cat-selector .cat-selector__btn[aria-pressed="true"] {
  background: transparent;
  color: #ffffff;
  font-weight: var(--w-ui);
}
:where(#main) .section--deep .cat-selector,
:where(#main) .section--black .cat-selector { background: rgba(255, 255, 255, 0.08); }
:where(#main) .section--deep .cat-selector .cat-selector__btn,
:where(#main) .section--black .cat-selector .cat-selector__btn { color: rgba(255, 255, 255, 0.6); }
:where(#main) .section--deep .cat-selector .cat-selector__btn:hover,
:where(#main) .section--black .cat-selector .cat-selector__btn:hover { color: #ffffff; }
:where(#main) .a-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-deep);
  color: #ffffff;
  text-decoration: none;
  isolation: isolate;
}
:where(#main) .a-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
:where(#main) .a-card__media img,
:where(#main) .a-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :where(#main) .a-card:hover .a-card__media img,
:where(#main) .a-card:hover .a-card__media video { transform: scale(1.06); }
}
:where(#main) .a-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 13, 26, 0.85) 0%,
    rgba(0, 13, 26, 0.15) 45%,
    rgba(0, 13, 26, 0) 70%);
}
:where(#main) .a-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  gap: 0.64rem;
  padding: var(--space-md);
}
:where(#main) .a-card__tag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
}
:where(#main) .a-card__title {
  margin: 0;
  color: #ffffff;
  font-size: var(--step-h6);
  font-weight: var(--w-display);
  line-height: 1.15;
  letter-spacing: var(--track-h4);
}
:where(#main) .a-card__meta {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--step-meta);
}
@media (prefers-reduced-motion: reduce) {
  :where(#main) .hero__ticker-track { animation: none; }
  :where(#main) .hero__scroll-line::after { animation: none; }
  :where(#main) .slider-btn__ring { transition: none; stroke-dashoffset: 276.46; }
  :where(#main) .a-card__media img,
:where(#main) .a-card__media video,
:where(#main) .p-card__media img,
:where(#main) .p-card__media video { transition: none; }
  :where(#main) .cat-selector__slider { transition: none; }
}
:where(#main) .step-track {
  background: var(--navy);
  color: #ffffff;
}
:where(#main) .step-track__list {
  display: grid;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(#main) .step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
:where(#main) .step__rail {
  position: relative;
  display: none;          
  justify-content: center;
}
:where(#main) .step__rail::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 2px;
  transform: translateX(-50%);
  background-image: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.3) 0 4px, transparent 4px 10px);
  background-size: 2px 10px;
  opacity: 0.6;
}
:where(#main) .step__rail::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 2px;
  transform: translateX(-50%) scaleY(var(--progress, 0));
  transform-origin: top;
  background-image: linear-gradient(to bottom,
    #ffffff 0 4px, transparent 4px 10px);
  background-size: 2px 10px;
  transition: transform 180ms linear;
}
:where(#main) .step__marker {
  position: sticky;
  top: 50%;
  z-index: 1;
  align-self: start;
  margin-top: 2.88rem;
}
:where(#main) .step__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
:where(#main) .step__title {
  margin: 0;
  color: #ffffff;
  font-size: var(--step-h4);
  font-weight: var(--w-emphasis);
  line-height: 1.05;
  letter-spacing: var(--track-h4);
}
:where(#main) .step__text {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--step-body);
  line-height: 1.5;
}
:where(#main) .step__images {
  position: relative;
  width: 100%;
  max-width: 54.4rem;
  margin-top: var(--space-xs);
}
:where(#main) .step__images img {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
}
:where(#main) .step__images--pair { padding-bottom: 14%; }
:where(#main) .step__images--pair > :last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  box-shadow: 0 10px 30px rgba(0, 13, 26, 0.45);
}
@media (min-width: 62em) {
  :where(#main) .step { grid-template-columns: 25% 75%; gap: 0; }
  :where(#main) .step__rail { display: flex; }
  :where(#main) .step__body { padding-bottom: var(--space-lg); }
  :where(#main) .step__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "title  images"
      "text   images"
      "link   images";
    align-content: start;
    gap: var(--space-sm) var(--space-lg);
  }
  :where(#main) .step__title { grid-area: title; }
  :where(#main) .step__text { grid-area: text; }
  :where(#main) .step__images { grid-area: images; align-self: start; max-width: none; }
  :where(#main) .step__body > .link-arrow { grid-area: link; justify-self: start; align-self: start; }
}
:where(#main) .ref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
:where(#main) .ref-card {
  --card: var(--navy-raised);
  position: relative;
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :where(#main) .ref-card:hover { transform: translateY(-4px); }
}
:where(#main) .ref-card__head { display: grid; gap: 0.16rem; }
:where(#main) .ref-card__kind {
  font-size: var(--step-h6);
  font-weight: var(--w-emphasis);
  line-height: 1.15;
  letter-spacing: var(--track-h4);
}
:where(#main) .ref-card__where {
  font-size: var(--step-h6);
  font-weight: var(--w-display);
  line-height: 1.15;
  letter-spacing: var(--track-h4);
}
:where(#main) .ref-card__media {
  position: relative;
  width: 68%;
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
}
:where(#main) .ref-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  :where(#main) .ref-card:hover .ref-card__media img { transform: scale(1.05); }
}
:where(#main) .ref-card__mark {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-inline: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
:where(#main) .ref-card__mark img { width: 60%; height: auto; }
:where(#main) .ref-card__meta {
  font-size: 1rem;
  font-weight: var(--w-ui);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
:where(#main) .ref-card:nth-child(8n + 1) { --card: #4f5c2f; }
:where(#main) .ref-card:nth-child(8n + 2) { --card: #0c0a09; }
:where(#main) .ref-card:nth-child(8n + 3) { --card: #643232; }
:where(#main) .ref-card:nth-child(8n + 4) { --card: #5c175e; }
:where(#main) .ref-card:nth-child(8n + 5) { --card: #17206b; }
:where(#main) .ref-card:nth-child(8n + 6) { --card: #00284d; }
:where(#main) .ref-card:nth-child(8n + 7) { --card: #d1701e; }
:where(#main) .ref-card:nth-child(8n + 8) { --card: #6541cb; }
@media (min-width: 40em) {
  :where(#main) .ref-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {
  :where(#main) .ref-grid { grid-template-columns: repeat(4, 1fr); }
}
:where(#main) .ref-card.is-hidden { display: none; }
:where(#main) .load-more {
  display: grid;
  justify-items: center;
  margin-top: var(--space-xl);
}
:where(#main) .page-summary {
  display: none;
  align-self: start;
  position: sticky;
  top: 40vh;
  padding-block: var(--space-md);
}
:where(#main) .page-summary__list {
  display: grid;
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(#main) .page-summary__link {
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  align-items: center;
  color: inherit;
  font-size: var(--step-cta);
  font-weight: var(--w-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 1s var(--ease-out);
}
:where(#main) .page-summary__item.is-active .page-summary__link,
:where(#main) .page-summary__link:hover { opacity: 1; }
:where(#main) .page-summary__ring {
  flex-shrink: 0;
  width: 1.76rem;
  height: 1.76rem;
  transform: rotate(-90deg);
}
:where(#main) .page-summary__ring circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
:where(#main) .page-summary__ring .-base { opacity: 0.25; }
:where(#main) .page-summary__ring .-fill {
  stroke-dasharray: 43.98;
  stroke-dashoffset: calc(43.98 - 43.98 * var(--progress, 0));
  transition: stroke-dashoffset 180ms linear;
}
@media (min-width: 62em) {
  :where(#main) .page-summary { display: block; }
  :where(#main) .has-summary {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}
:where(#main) .text-columns {
  display: grid;
  gap: var(--space-md) var(--space-xl);
}
:where(#main) .band__columns {
  width: 100%;
  max-width: 86.4rem;
  margin-inline: auto;
  text-align: left;
}
:where(#main) .band__columns > p { color: rgba(255, 255, 255, 0.9); }
:where(#main) .text-columns > p {
  margin: 0;
  max-width: 58ch;
  font-size: var(--step-body);
  line-height: 1.5;
}
@media (min-width: 48em) {
  :where(#main) .text-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:where(#main) .scatter {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(25.6rem, 34vw, 44.8rem);
  margin-block: var(--space-lg);
}
:where(#main) .scatter img {
  width: clamp(12.8rem, 17vw, 24rem);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 13, 26, 0.5);
}
:where(#main) .scatter > * { margin-inline: -2.5%; }
:where(#main) .scatter > :nth-child(1) { transform: rotate(-13deg) translateY(8%); }
:where(#main) .scatter > :nth-child(2) { transform: rotate(7deg) translateY(-4%); }
:where(#main) .scatter > :nth-child(3) { transform: rotate(-5deg) translateY(6%); z-index: 2; }
:where(#main) .scatter > :nth-child(4) { transform: rotate(12deg) translateY(-2%); }
:where(#main) .scatter > :nth-child(5) { transform: rotate(-9deg) translateY(4%); }
:where(#main) .text-scroll {
  margin-block: clamp(6.4rem, 14vw, 22.4rem);
}
:where(#main) .text-scroll__content {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: var(--w-display);
  line-height: 1.12;
  letter-spacing: var(--track-h3);
}
:where(#main) .text-scroll__word {
  opacity: 0.22;
  transition: opacity 320ms var(--ease-out);
}
:where(#main) .text-scroll__word.is-lit { opacity: 1; }
@media (min-width: 48em) { :where(#main) .text-scroll__content { width: 61.5%; } }
@media (min-width: 62em) { :where(#main) .text-scroll__content { width: 69.2%; } }
@media (prefers-reduced-motion: reduce) {
  :where(#main) .text-scroll__word { opacity: 1; transition: none; }
  :where(#main) .scatter > * { transform: none; }
}
:where(#main) .info-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
:where(#main) .info-tile {
  padding: clamp(2.4rem, 3vw, 4rem);
  border-radius: var(--radius-sm);
  background: var(--tint);
}
:where(#main) .info-tile__label {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--ink);
  font-size: var(--step-h6);
  font-weight: var(--w-display);
  letter-spacing: -0.01em;
}
:where(#main) .info-tile__value {
  margin: 0;
  color: var(--navy);
  font-size: var(--step-meta);
  font-weight: var(--w-ui);
  line-height: 1.5;
}
:where(#main) .info-tile__value a { color: inherit; text-decoration: none; }
:where(#main) .info-tile__value a:hover { text-decoration: underline; }
@media (min-width: 48em) {
  :where(#main) .info-tiles { grid-template-columns: repeat(3, 1fr); }
}
:where(#main) .page-hero .tag,
:where(#main) .hero .tag { margin-bottom: var(--space-sm); }
@media (max-width: 61.99em) {
  :where(#main) .section__head--start,
:where(#main) .section__head--split {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
  }
  :where(#main) .section__head--start .cluster,
:where(#main) .section__head--split .cluster { justify-content: center; }
  :where(#main) .cluster { justify-content: center; }
}
@media (max-width: 74.99em) {
  :where(#main) .gold-band__inner { justify-items: center; text-align: center; }
  :where(#main) .gold-band__mark img { margin-inline: auto; }
  :where(#main) .gold-band__text { margin-inline: auto; }
}
@media (max-width: 61.99em) {
  :where(#main) #main p,
:where(#main) #main .prose,
:where(#main) #main .lede,
:where(#main) #main .stack,
:where(#main) #main figcaption,
:where(#main) #main blockquote { text-align: center; }
  :where(#main) #main li,
:where(#main) #main label,
:where(#main) #main input,
:where(#main) #main textarea,
:where(#main) #main select,
:where(#main) #main th,
:where(#main) #main td,
:where(#main) #main caption,
:where(#main) #main summary,
:where(#main) #main .breadcrumbs,
:where(#main) #main .step,
:where(#main) #main .step__title,
:where(#main) #main form p { text-align: left; }
  :where(#main) #main .prose ul,
:where(#main) #main .prose ol { display: inline-block; text-align: left; }
  :where(#main) #main :is(h1, h2, h3, h4, h5),
:where(#main) #main .section__head { text-align: center; }
}
:where(#main) .sanding-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(#main) .sanding-step figure {
  display: grid;
  gap: 1.4rem;
  margin: 0;
}
:where(#main) .sanding-step img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: clamp(12px, 1.6vw, 20px);   
  box-shadow: 0 2rem 4rem -2.4rem rgba(0, 20, 40, 0.5);
}
:where(#main) .sanding-step figcaption {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  color: var(--ink);
  font-weight: var(--w-ui);
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}
:where(#main) .sanding-step__num {
  color: var(--accent);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
:where(#main) .sanding-step:last-child img { outline: 2px solid var(--accent-base); outline-offset: 3px; }
@media (min-width: 62em) {
  :where(#main) .sanding-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
:where(#main) .page-film { padding-block-start: var(--space-lg); }
:where(#main) .sanding {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
:where(#main) .sanding__reel { max-width: 32rem; }
:where(#main) .sanding .sanding-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
:where(#main) .sanding .sanding-step figure { position: relative; display: block; }
:where(#main) .sanding .sanding-step img { aspect-ratio: 1 / 1; }
:where(#main) .sanding .sanding-step figcaption {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  padding: 0.6rem 1.4rem 0.6rem 1.2rem;
  border-radius: 999px;
  background: rgba(0, 13, 26, 0.74);
  color: #ffffff;
  font-size: 1.4rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:where(#main) .sanding .sanding-step__num { color: var(--accent-base); }
@media (min-width: 62em) {
  :where(#main) .sanding { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  :where(#main) .sanding__reel { max-width: none; }
  :where(#main) .sanding .sanding-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:where(#main) .ba-extra { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
:where(#main) .ba-extra__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: var(--w-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:where(#main) .ba-extra__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
:where(#main) .ba-extra__grid figure { margin: 0; }
:where(#main) .ba-extra__grid .media { border-radius: clamp(12px, 1.6vw, 20px); overflow: hidden; }
@media (min-width: 62em) {
  :where(#main) .ba-extra__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- defaults the old markup expects (home.css resets them globally) ---- */
:where(#main) img { width: auto; }
:where(#main) :is(.prose, .legal) ul { padding-left: 2.4rem; list-style: disc; }
:where(#main) :is(.prose, .legal) ol { padding-left: 2.4rem; list-style: decimal; }
:where(#main) :is(.prose, .legal) li + li { margin-top: .8rem; }

/* ---- shared chrome on old pages ---- */
.t-legacy .t-page { background-color: #fff; }
/* Pages without a photographic hero start below the floating header. */
.t-legacy:not(.-overlay) #main { padding-top: 13rem; }
/* Legal documents: section headings at reading size, not display size. */
:is(.page--warranty, .page--refund-policy, .page--privacy-policy) #main h2 {
  font-size: clamp(2.4rem, 2.4vw, 3.2rem); line-height: 1.2; letter-spacing: -.02em;
}