/* ============================================================
   BCG WATER  |  Site Stylesheet
   Design system built from the official mockups:
   Playfair Display (Didone) + Lato, brand blue #0E6993, brand teal #4FC2C5, charcoal #464647 (from official logo),
   blue-to-teal brand gradient, ink-wave artwork, script titles.
   ============================================================ */
:root{
  --charcoal:#464647;
  --body:#5E5F61;
  --blue:#0E6993;
  --blue-deep:#0A4F70;
  --teal:#4FC2C5;
  --teal-light:#7FD3D5;
  --teal-text:#1B7B80; /* brand teal deepened to pass WCAG AA (5:1) for small text */
  --foam:#F4FAFA;
  --white:#FFFFFF;
  --grad:linear-gradient(100deg,#0E6993 0%,#2E96AE 48%,#4FC2C5 100%);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.18rem,1.08rem + .5vw,1.42rem);
  --step-2:clamp(1.6rem,1.35rem + 1.1vw,2.2rem);
  --step-3:clamp(1.9rem,1.5rem + 2vw,3rem);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --shadow-card:0 8px 24px rgba(10,79,112,.09),0 30px 70px rgba(10,79,112,.13);
  --r:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  font-family:'Lato',system-ui,sans-serif;font-weight:400;
  font-size:var(--step-0);color:var(--body);background:var(--white);
  line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:'Playfair Display',serif;color:var(--charcoal);line-height:1.15}
a{text-decoration:none;color:var(--blue)}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(22px,5vw,52px)}
.container-narrow{max-width:860px;margin:0 auto;padding:0 clamp(22px,5vw,52px)}
.eyebrow{
  font-family:'Lato',sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--teal-text);
}
::selection{background:rgba(79,194,197,.35)}

/* ---------- loader (homepage only) ---------- */
#loader{
  position:fixed;inset:0;z-index:200;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1s var(--ease-io),visibility 1s;
}
#loader.done{opacity:0;visibility:hidden}
/* Loader: the swirl wave sits large and faded behind the page; the logo
   animation plays centered on top at full clarity. */
#loader .ld-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
#loader .ld-wave{position:absolute;left:50%;top:50%;width:clamp(1150px,185vmin,2600px);height:auto;max-width:none;
  transform-origin:52% 46%;opacity:0;transform:translate(-52%,-46%) rotate(-14deg) scale(.94);
  animation:ldWaveIn 2.2s var(--ease-out) .1s forwards,ldWaveDrift 9s var(--ease-io) 2.3s infinite alternate}
/* Loader logo: Ashley's brand animation clip. loader-logo.mp4 is cropped to the
   logo and pre-scaled (560px, 2x display size). No blend mode: blending forces the
   video through a compositing path that drops edge smoothing. Its white frame sits
   in the wave's white hollow, so no box shows. */
#loader video{position:relative;z-index:1;width:clamp(180px,17.5vw,280px);height:auto;background:#fff}
#loader.done .ld-wave{animation:none;opacity:0;transform:translate(-52%,-46%) rotate(6deg) scale(1.06);transition:opacity .9s var(--ease-io),transform 1.1s var(--ease-io)}
@keyframes ldWaveIn{to{opacity:.2;transform:translate(-52%,-46%) rotate(0) scale(1)}}
@keyframes ldWaveDrift{from{transform:translate(-52%,-46%) rotate(0) scale(1)}to{transform:translate(-52%,-46%) rotate(4deg) scale(1.02)}}
#loader .skip{
  position:absolute;bottom:34px;right:40px;background:none;border:0;cursor:pointer;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#A9AAAB;
  padding:8px 4px;transition:color .3s;font-family:'Lato',sans-serif;
}
#loader .skip:hover{color:var(--blue)}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:box-shadow .4s var(--ease-io),padding .4s var(--ease-io);
  padding:16px 0;
}
.site-header.scrolled{box-shadow:0 1px 0 rgba(70,70,71,.06),0 12px 34px rgba(70,70,71,.08);padding:9px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{display:block;flex:none}
.logo img{height:72px;width:auto;transition:height .4s var(--ease-io)}
.site-header.scrolled .logo img{height:56px}
nav.primary{display:flex;align-items:center}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item + .nav-item::before{content:"|";color:#CBCCCD;font-weight:300;margin:0 4px}
.nav-link{
  display:inline-flex;align-items:center;gap:.5em;background:none;border:0;cursor:pointer;
  font-family:'Lato',sans-serif;font-weight:400;font-size:clamp(.74rem,.56rem + .3vw,.86rem);
  letter-spacing:clamp(.12em,.26vw,.2em);text-transform:uppercase;color:var(--charcoal);white-space:nowrap;
  padding:12px clamp(8px,.85vw,14px);transition:color .3s;position:relative;
}
.site-header .header-inner{max-width:1320px}
a.nav-link{color:var(--charcoal)}
.nav-link:hover,.nav-link:focus-visible,.nav-item.active > .nav-link{color:var(--blue)}
.nav-link .caret{width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.nav-item.open .caret{transform:rotate(225deg) translateY(-1px)}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:8px;min-width:270px;
  background:#fff;border-radius:16px;padding:12px;
  box-shadow:0 10px 26px rgba(70,70,71,.10),0 34px 80px rgba(70,70,71,.14);
  border:1px solid rgba(70,70,71,.05);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-out),visibility .32s;
}
.nav-item:hover .dropdown,.nav-item.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:block;padding:10px 16px;border-radius:10px;
  font-size:.92rem;color:var(--body);letter-spacing:.02em;
  transition:background .25s,color .25s,padding-left .3s;
}
.dropdown a:hover,.dropdown a:focus-visible{background:var(--foam);color:var(--blue);padding-left:21px}
.portal-link{
  font-family:'Lato',sans-serif;font-weight:700;font-size:.88rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);padding:12px 4px;position:relative;flex:none;
}
.portal-link::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.6px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.portal-link:hover::after{transform:scaleX(1)}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:10px;z-index:120;position:relative}
.hamburger span{display:block;width:26px;height:2px;border-radius:2px;background:var(--charcoal);margin:6px 0;transition:transform .4s var(--ease-out),opacity .3s,background .4s}
body.menu-open .hamburger span{background:#fff}
body.menu-open .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .hamburger span:nth-child(2){opacity:0}
body.menu-open .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:110;background:linear-gradient(160deg,#0E6993,#3FB0B8);
  display:flex;flex-direction:column;justify-content:flex-start;padding:110px 38px 44px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease-io),visibility .45s;overflow-y:auto;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
.mobile-menu a{display:block;color:#fff;font-family:'Playfair Display',serif;font-size:1.3rem;padding:9px 0;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.mobile-menu .m-group{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:20px 0 4px;opacity:0;transition:opacity .5s var(--ease-out);font-family:'Lato',sans-serif}
body.menu-open .mobile-menu a,body.menu-open .mobile-menu .m-group{opacity:1;transform:translateY(0)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:'Lato',sans-serif;font-weight:700;font-size:.84rem;
  letter-spacing:.2em;text-transform:uppercase;
  padding:15px 32px;border-radius:6px;cursor:pointer;border:0;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background-color .35s;
}
.btn-blue{color:#fff;background:var(--blue);box-shadow:0 8px 22px rgba(14,105,147,.28)}
.btn-blue:hover{background:#0B5A7E;transform:translateY(-2px);box-shadow:0 14px 32px rgba(14,105,147,.36)}
.btn-blue:active{transform:translateY(0) scale(.985)}
.btn-outline{color:var(--blue);background:transparent;border:1.5px solid rgba(14,105,147,.45)}
.btn-outline:hover{border-color:var(--blue);background:rgba(14,105,147,.05);transform:translateY(-2px)}
.btn-sm{padding:11px 22px;font-size:.74rem}

/* ---------- home hero ---------- */
.hero{
  position:relative;z-index:2;background:transparent;text-align:center;
  padding:clamp(150px,18vh,200px) 24px 0;
  pointer-events:none;
}
.hero-kicker{
  font-family:'Lato',sans-serif;font-weight:400;color:var(--charcoal);
  font-size:clamp(.9rem,.72rem + .55vw,1.25rem);
  letter-spacing:.3em;text-transform:uppercase;
  display:block;margin-bottom:clamp(10px,1.6vw,22px);
  opacity:0;transform:translateY(20px);
  transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out);
}
.hero.ready .hero-kicker{opacity:1;transform:translateY(0)}
.hero-script{
  display:block;margin:clamp(4px,1vw,14px) auto 0;
  width:min(640px,84vw);height:auto;
  clip-path:inset(-12% 100% -12% -4%);
  filter:drop-shadow(0 8px 26px rgba(14,105,147,.16));
  mask-image:linear-gradient(to bottom,transparent 0%,#000 9%);
}
.hero.ready .hero-script{animation:writeOn 2.3s var(--ease-io) .8s forwards}
@keyframes writeOn{to{clip-path:inset(-12% -4% -12% -4%)}}
.scroll-cue{
  margin:clamp(20px,3vw,40px) auto 0;display:flex;flex-direction:column;align-items:center;gap:9px;
  color:#A9AAAB;font-size:.64rem;letter-spacing:.36em;text-transform:uppercase;
  opacity:0;transition:opacity 1s var(--ease-out) 3s;font-family:'Lato',sans-serif;
}
.hero.ready .scroll-cue{opacity:1}
.hero .scroll-cue{display:none}
.scroll-cue .dotline{width:1px;height:42px;background:linear-gradient(rgba(14,105,147,.5),transparent);position:relative;overflow:hidden}
.scroll-cue .dotline::after{content:"";position:absolute;left:0;top:-12px;width:100%;height:12px;background:var(--teal);animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{top:-14px}70%,100%{top:46px}}

/* ---------- home: four-card services (restored from the approved single-page build) ---------- */
.services{background:var(--foam);padding:clamp(90px,11vw,150px) 0}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:24px}
.svc-card{
  position:relative;background:#fff;border-radius:18px;padding:42px 32px 92px;
  box-shadow:0 3px 12px rgba(10,79,112,.06);display:block;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.svc-card::before{
  content:"";position:absolute;inset:auto 0 0 0;height:4px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out);
}
.svc-card:hover{transform:translateY(-9px);box-shadow:var(--shadow-card)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-icon{
  width:82px;height:82px;border-radius:50%;margin-bottom:26px;
  background:var(--grad);background-size:160% 100%;background-position:0 0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(10,79,112,.28);
  transition:transform .5s var(--ease-out),background-position .6s var(--ease-io);
}
.svc-card:hover .svc-icon{transform:translateY(-5px);background-position:100% 0}
.svc-icon img,.svc-icon svg{width:44px;height:44px;object-fit:contain}
.svc-card .eyebrow{display:block;font-size:.62rem;letter-spacing:.28em;margin-bottom:.7em;color:var(--teal-text)}
.svc-card h3{font-size:1.34rem;font-weight:600;margin-bottom:.55em;transition:color .35s}
.svc-card:hover h3{color:var(--blue)}
.svc-card p{font-size:.93rem;line-height:1.7}
.svc-more{
  position:absolute;left:32px;bottom:34px;
  font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--blue);
  display:inline-flex;align-items:center;gap:.6em;
}
.svc-more .arr{transition:transform .4s var(--ease-out)}
.svc-card:hover .svc-more .arr{transform:translateX(7px)}
@media (prefers-reduced-motion:reduce){.svc-card,.svc-card::before,.svc-icon,.svc-more .arr{transition:none}}

/* ---------- home wave + welcome card ---------- */
.wave-sect{position:relative;z-index:1;background:#fff}
.wave-frame{overflow:hidden}
.wave-art{width:100%;height:auto;transform-origin:50% 60%;animation:waveBreathe 18s var(--ease-io) infinite alternate;will-change:transform}
@keyframes waveBreathe{from{transform:scale(1) translateY(0)}to{transform:scale(1.045) translateY(-0.8%)}}
.card-overlay{position:absolute;inset:0;display:flex;align-items:center}
.welcome-card{
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);
  max-width:1140px;margin:0 auto;width:min(92%,1140px);
  padding:clamp(36px,4.5vw,64px);
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,4.5vw,64px);align-items:center;
}
.welcome-card h2{font-size:var(--step-3);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:.5em 0 .55em}
.welcome-card p{font-weight:400;margin-bottom:1.1em;font-size:.98rem}
.welcome-card .btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:1.8em}
/* Desktop: the wave runs from the top of the page behind the headline and
   script (as on the live site); the welcome card rides the lower wave. */
@media (min-width:921px){
  .hero{position:absolute;top:0;left:0;right:0}
  /* Mirrored so the open white water sits behind the headline and script; nudged down. */
  .wave-frame{transform:scaleX(-1);padding-top:clamp(36px,4.5vw,64px)}
  .card-overlay{position:relative;inset:auto;margin-top:calc(-1 * clamp(240px,27vw,400px));padding-bottom:clamp(50px,6vw,90px)}
}
.video-frame{
  position:relative;aspect-ratio:16/10.4;border-radius:14px;overflow:hidden;cursor:pointer;
  background:linear-gradient(150deg,#0A4F70 0%,#0E6993 55%,#3FB0B8 100%);
  box-shadow:0 16px 44px rgba(10,79,112,.28);isolation:isolate;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.video-frame:hover{transform:translateY(-5px);box-shadow:0 26px 62px rgba(10,79,112,.36)}
.video-frame .vf-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video-frame .vf-logo img{width:52%;opacity:.96}
.play-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;z-index:2;
  background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.65);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--ease-out),background .4s;
}
.video-frame:hover .play-btn{transform:translate(-50%,-50%) scale(1.09);background:rgba(255,255,255,.26)}
.play-btn::after{content:"";width:0;height:0;border-left:19px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.play-btn::before{content:"";position:absolute;inset:-13px;border-radius:50%;border:1px solid rgba(255,255,255,.45);animation:ripple 2.8s var(--ease-io) infinite}
@keyframes ripple{0%{transform:scale(.85);opacity:0}30%{opacity:1}100%{transform:scale(1.22);opacity:0}}
.confirm-chip{
  display:inline-block;margin-left:.5em;padding:3px 11px;border-radius:999px;
  background:#FFE9A8;color:#6B5400;font-size:.62rem;font-weight:700;letter-spacing:.08em;vertical-align:middle;white-space:nowrap;
  font-family:'Lato',sans-serif;text-transform:none;
}
.video-caption{position:absolute;left:18px;bottom:14px;z-index:2;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.95);font-family:'Lato',sans-serif}

/* ---------- interior page hero ---------- */
.page-hero{
  position:relative;background:#fff;text-align:center;overflow:hidden;
  padding:clamp(150px,16vh,200px) 24px clamp(30px,4vw,54px);
}
.page-hero .wave-whisper{
  /* manifesto pink and gold crest (replaces the old grey pencil wave) */
  position:absolute;top:clamp(56px,6vw,84px);right:-3%;width:min(40vw,560px);height:auto;opacity:.92;pointer-events:none;
  animation:whisperBreathe 20s var(--ease-io) infinite alternate;
}
@keyframes whisperBreathe{from{transform:scale(1)}to{transform:scale(1.05) translateX(-10px)}}
.page-hero .kicker{
  font-family:'Lato',sans-serif;font-weight:300;color:var(--charcoal);
  font-size:clamp(.95rem,.7rem + 1vw,1.4rem);letter-spacing:.4em;text-transform:uppercase;
  margin-bottom:.4em;position:relative;z-index:2;
}
.page-hero .script-title{position:relative;z-index:2;display:block;margin:0 auto;height:auto}
.page-hero .script-title.art{width:min(560px,78vw)}
/* Script titles rendered from the designer's DolceVita Bold (desktop license: artwork only, no web-font embedding). */
.page-hero .script-title.gen{width:auto;height:auto;max-height:clamp(104px,12vw,172px);max-width:92vw}
.page-hero .serif-title{
  position:relative;z-index:2;font-size:clamp(2.1rem,1.6rem + 2.4vw,3.4rem);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.page-hero .subtitle{position:relative;z-index:2;font-size:.86rem;letter-spacing:.3em;text-transform:uppercase;color:#6B6C6E;margin-top:.8em;font-family:'Lato',sans-serif}
.page-hero .rule{width:90px;height:2.5px;background:var(--teal);margin:26px auto 0;opacity:.8;position:relative;z-index:2}
.page-intro{
  max-width:820px;margin:clamp(26px,3.5vw,44px) auto 0;position:relative;z-index:2;
  font-family:'Lato',sans-serif;font-weight:300;font-style:normal;
  font-size:var(--step-1);line-height:1.85;color:#58595B;letter-spacing:.01em;
}

/* ---------- prose (doctrine, vision, legal) ---------- */
.prose{padding:clamp(50px,7vw,90px) 0}
.prose h2{font-size:var(--step-2);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:2.2em 0 .7em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.08rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:1.8em 0 .5em;color:var(--blue)}
.prose p{margin-bottom:1.15em}
.prose ul{margin:0 0 1.3em 1.2em}
.prose li{margin-bottom:.5em}
.prose .divider{width:70px;height:2px;background:var(--teal);opacity:.7;margin:2.6em 0}
.prose .lede{font-family:'Lato',sans-serif;font-weight:300;font-size:var(--step-1);color:#58595B;line-height:1.85;letter-spacing:.01em}
.pull-quote{
  margin:2.6em 0;padding:1.8em 2.2em;border-left:3px solid var(--teal);background:var(--foam);border-radius:0 14px 14px 0;
  font-family:'Playfair Display',serif;font-style:italic;font-size:var(--step-1);color:var(--charcoal);line-height:1.8;
}
.pull-quote cite{display:block;margin-top:.9em;font-family:'Lato',sans-serif;font-style:normal;font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal-text)}
.next-link{
  display:block;margin:3.4em 0 0;padding:2em 2.4em;border-radius:16px;background:var(--foam);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.next-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.next-link .nl-label{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--teal-text);font-weight:700;font-family:'Lato',sans-serif}
.next-link .nl-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:600;color:var(--charcoal);margin-top:.3em;display:flex;align-items:center;gap:.5em}
.next-link .arr{color:var(--blue);transition:transform .4s var(--ease-out)}
.next-link:hover .arr{transform:translateX(7px)}

/* ---------- service rows (drop badge cards, per mockup) ---------- */
.svc-rows{padding:clamp(50px,7vw,90px) 0 clamp(80px,9vw,120px)}
.svc-row{
  position:relative;background:#fff;border-radius:16px;box-shadow:var(--shadow-card);
  margin:0 0 clamp(44px,5vw,64px) clamp(14px,2vw,24px);
  padding:clamp(52px,5.5vw,66px) clamp(26px,4vw,52px) clamp(30px,4vw,48px) clamp(30px,4vw,52px);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.svc-row:hover{transform:translateY(-6px)}
.svc-row .drop{
  /* Water drop, point up, tucked into the card's top-left corner. */
  position:absolute;left:clamp(-14px,-1.6vw,-22px);top:clamp(-18px,-2vw,-26px);
  width:clamp(58px,5.4vw,72px);height:clamp(58px,5.4vw,72px);
  background:var(--grad);background-size:170% 100%;background-position:0 0;
  border-radius:6% 50% 50% 50%;transform:rotate(45deg);
  box-shadow:0 14px 30px rgba(10,79,112,.3);
  display:flex;align-items:center;justify-content:center;
  transition:background-position .6s var(--ease-io),transform .5s var(--ease-out);
}
.svc-row:hover .drop{background-position:100% 0;transform:translateY(-4px) rotate(45deg)}
.svc-row .drop img,.svc-row .drop svg{width:54%;height:54%;transform:rotate(-45deg);object-fit:contain}
.svc-row .eyebrow{display:block;font-size:.72rem;margin-bottom:.5em}
.svc-row h2,.svc-row h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5em}
.svc-row p{font-size:.96rem;margin-bottom:1.2em}
.svc-row ul{margin:0 0 1.4em 1.2em;font-size:.94rem}
.svc-row li{margin-bottom:.4em}

/* ---------- feature cards (grid) ---------- */
.cards-sect{padding:clamp(60px,8vw,110px) 0;background:var(--foam)}
.cards-sect.on-white{background:#fff}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.f-card{
  background:#fff;border-radius:18px;padding:38px 32px;box-shadow:0 3px 12px rgba(10,79,112,.06);
  position:relative;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.f-card::before{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.f-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-card)}
.f-card:hover::before{transform:scaleX(1)}
.f-card h3{font-size:1.18rem;font-weight:600;margin-bottom:.55em}
.f-card p,.f-card li{font-size:.93rem;line-height:1.7}
.f-card ul{margin:.4em 0 0 1.1em}
.f-card li{margin-bottom:.35em}
.f-card .eyebrow{display:block;font-size:.62rem;letter-spacing:.28em;margin-bottom:.7em}

/* section head */
.section-head{max-width:760px;margin:0 auto clamp(46px,6vw,72px);text-align:center}
.section-head h2{font-size:var(--step-3);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:.55em 0 .55em}
.section-head p{font-weight:400}

/* highlight panel (compliance hub, packages) */
.panel{
  background:linear-gradient(150deg,#0A4F70 0%,#0E6993 60%,#3FB0B8 100%);
  color:#fff;border-radius:var(--r);padding:clamp(38px,5vw,64px);
  box-shadow:0 20px 50px rgba(10,79,112,.3);margin:clamp(50px,6vw,80px) 0 0;
}
.panel h2,.panel h3{color:#fff;font-size:var(--step-2);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6em}
.panel p{color:rgba(255,255,255,.94);margin-bottom:1em}
.panel ul{margin:.4em 0 1.4em 1.2em;color:rgba(255,255,255,.94)}
.panel li{margin-bottom:.5em}
.panel .eyebrow{color:#A7E3E4;display:block;margin-bottom:.6em}
.panel .btn-blue{background:#fff;color:var(--blue-deep)}
.panel .btn-blue:hover{background:#EEF8F8}
.panel-soft{background:#fff;color:var(--body);box-shadow:var(--shadow-card)}
.panel-soft h2,.panel-soft h3{color:var(--charcoal)}
.panel-soft p,.panel-soft ul{color:var(--body)}
.panel-soft .eyebrow{color:var(--teal-text)}

/* ---------- founder ---------- */
.founder-sect{position:relative;padding:clamp(40px,6vw,80px) 0 clamp(80px,10vw,130px);overflow:hidden}
.founder-wave{position:absolute;left:-8%;top:8%;width:min(60vw,820px);opacity:.4;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 100%);mask-image:linear-gradient(90deg,#000 45%,transparent 100%);
  animation:whisperBreathe 22s var(--ease-io) infinite alternate;}
.founder-grid{position:relative;z-index:2;display:grid;grid-template-columns:.72fr 1fr;gap:0;align-items:start;max-width:1080px;margin:0 auto}
.founder-photo{
  border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(10,79,112,.24);
  margin-top:clamp(40px,6vw,90px);position:relative;z-index:3;
}
.founder-photo img{width:100%;filter:grayscale(1);transition:filter 1.2s var(--ease-io)}
.founder-photo:hover img{filter:grayscale(.15)}
.founder-card{
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);
  padding:clamp(38px,5vw,66px);margin-left:clamp(-30px,-3vw,-46px);
}
.founder-card h2{font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:.4em 0 .7em}
.founder-card p{font-size:.97rem;margin-bottom:1.15em}
.founder-sig{margin-top:2em;text-align:right}
.founder-sig img{display:inline-block;width:min(260px,60%);height:auto}
.founder-sig .role{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--charcoal);font-weight:700;margin-top:.6em;font-family:'Lato',sans-serif}

/* ---------- credentials badges ---------- */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;margin-top:clamp(30px,4vw,50px)}
.badge{
  background:#fff;border-radius:18px;padding:34px 26px;text-align:center;
  box-shadow:0 3px 12px rgba(10,79,112,.06);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.badge:hover{transform:translateY(-7px);box-shadow:var(--shadow-card)}
.badge .b-abbr{
  width:74px;height:74px;margin:0 auto 18px;border-radius:50%;
  background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-weight:700;font-size:1.35rem;
  box-shadow:0 10px 24px rgba(10,79,112,.28);
}
.badge h3{font-size:.98rem;font-weight:600;letter-spacing:.06em}
.badge p{font-size:.82rem;margin-top:.4em}

/* ---------- blog ---------- */
.cat-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:clamp(26px,3vw,40px) 0}
.chip{
  padding:9px 20px;border-radius:999px;border:1.5px solid rgba(14,105,147,.3);
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:700;font-family:'Lato',sans-serif;
  transition:background .3s,color .3s,transform .3s;cursor:pointer;
}
.chip:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.post-card{
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 3px 12px rgba(10,79,112,.06);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);display:block;
}
.post-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-card)}
.post-card .pc-img{aspect-ratio:16/10;overflow:hidden}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-io)}
.post-card:hover .pc-img img{transform:scale(1.06)}
.post-card .pc-body{padding:26px 26px 30px}
.post-card .pc-cat{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal-text);font-weight:700;font-family:'Lato',sans-serif}
.post-card h3{font-size:1.14rem;font-weight:600;margin:.5em 0 .5em;color:var(--charcoal)}
.post-card p{font-size:.9rem;color:var(--body)}
.post-card .pc-more{display:inline-block;margin-top:1em;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--blue);font-family:'Lato',sans-serif}

/* ---------- stats / marquee / why (home) ---------- */
.stats{background:#fff;padding:clamp(90px,11vw,150px) 0;overflow:hidden}
.stats-grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(40px,6vw,90px);align-items:center}
.stats-nums{display:grid;gap:clamp(30px,4vw,46px)}
.stat{display:flex;align-items:baseline;gap:26px;border-bottom:1px solid rgba(70,70,71,.1);padding-bottom:24px}
.stat:last-child{border-bottom:0;padding-bottom:0}
.stat .num{font-family:'Playfair Display',serif;font-weight:600;color:var(--charcoal);font-size:clamp(3rem,5.2vw,4.6rem);line-height:1;min-width:2.4em}
.stat .num .suffix{color:var(--teal);font-size:.55em}
.stat .label{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:#6B6C6E;line-height:1.9;font-family:'Lato',sans-serif}
.stats-art{position:relative;display:flex;justify-content:center}
.stats-art img{width:min(100%,460px);animation:sway 9s var(--ease-io) infinite alternate}
@keyframes sway{from{transform:rotate(-1.6deg) translateY(6px)}to{transform:rotate(1.6deg) translateY(-8px)}}
.why{background:var(--foam);padding:clamp(90px,11vw,150px) 0}
.why-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(44px,7vw,100px);align-items:start}
.why-sticky{position:sticky;top:130px}
.why-sticky h2{font-size:var(--step-3);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:.55em 0 .6em}
.why-sticky p{margin-bottom:2.2em;max-width:30em}
.diff{display:flex;gap:26px;padding:32px 0;border-bottom:1px solid rgba(70,70,71,.1)}
.diff:first-child{padding-top:8px}
.diff .n{font-family:'Playfair Display',serif;font-size:1.8rem;color:var(--teal);line-height:1.1;flex:none;width:54px}
.diff h3{font-size:1rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5em}
.diff p{font-size:.94rem;line-height:1.75}
.partners{background:#fff;padding:clamp(70px,8vw,100px) 0;overflow:hidden;text-align:center}
.partners .eyebrow{display:block;margin-bottom:44px}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(52px,7vw,100px);flex:none;padding-right:clamp(52px,7vw,100px);animation:marquee 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}
.p-logo{font-family:'Playfair Display',serif;font-size:1.1rem;letter-spacing:.12em;color:#5E5F61;white-space:nowrap;transition:color .35s;cursor:default}
a.p-logo{cursor:pointer;text-decoration:none;background:linear-gradient(var(--teal),var(--teal)) left 100%/0 1px no-repeat;padding-bottom:4px;transition:color .35s,background-size .45s var(--ease-out)}
.p-logo:hover{color:var(--blue)}
a.p-logo:hover,a.p-logo:focus-visible{background-size:100% 1px;outline:none}

/* ---------- contact form ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(40px,6vw,80px);align-items:start;padding:clamp(50px,7vw,90px) 0}
.contact-info h2{font-size:var(--step-2);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:.4em 0 .8em}
.contact-info li{list-style:none;display:flex;gap:13px;align-items:flex-start;margin-bottom:18px;line-height:1.55}
.contact-info svg{width:19px;height:19px;flex:none;margin-top:4px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-form{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:clamp(32px,4vw,52px)}
.contact-form label{display:block;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--charcoal);margin:0 0 8px;font-family:'Lato',sans-serif}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;padding:14px 16px;margin-bottom:22px;border-radius:10px;
  border:1.5px solid #DDE3E3;background:var(--foam);
  font-family:'Lato',sans-serif;font-size:.95rem;color:var(--charcoal);
  transition:border-color .3s,box-shadow .3s;
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(79,194,197,.18);
}
.contact-form textarea{min-height:150px;resize:vertical}

/* ---------- CTA + footer ---------- */
.cta-band{
  background:var(--grad);background-size:220% 100%;
  animation:gradDrift 16s var(--ease-io) infinite alternate;
  color:#fff;text-align:center;position:relative;overflow:hidden;
}
@keyframes gradDrift{from{background-position:0% 0}to{background-position:100% 0}}
.cta-inner{position:relative;z-index:2;padding:clamp(84px,10vw,140px) 0}
.cta-inner .eyebrow{color:rgba(255,255,255,.9)}
.cta-inner h2{color:#fff;font-size:var(--step-3);font-weight:600;letter-spacing:.08em;text-transform:uppercase;max-width:19em;margin:.7em auto .6em}
.cta-inner p{color:rgba(255,255,255,.94);max-width:36em;margin:0 auto 2.6em}
.cta-inner .btn-blue{background:#fff;color:var(--blue-deep);box-shadow:0 12px 34px rgba(7,52,74,.3)}
.cta-inner .btn-blue:hover{background:#EEF8F8}
footer{
  background:linear-gradient(100deg,#0A4F70 0%,#0E6993 55%,#3FB0B8 100%);
  color:rgba(255,255,255,.94);font-size:.93rem;position:relative;
}
footer::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:rgba(255,255,255,.35)}
/* brand | three link columns sized to their words, sitting close together | contact */
.footer-grid{display:grid;grid-template-columns:minmax(180px,1fr) auto auto auto auto;column-gap:clamp(30px,3.4vw,52px);row-gap:40px;padding:clamp(64px,8vw,96px) 0 56px}
.f-logo img{height:92px;width:auto;margin-bottom:22px}
.footer-tag{max-width:23em;font-weight:300;font-size:.92rem;line-height:1.8;color:rgba(255,255,255,.88)}
footer h2.f-h,footer h4{color:#fff;font-family:'Lato',sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:22px}
footer ul{list-style:none}
footer li{margin-bottom:12px}
/* hover nudges the whole link (every wrapped line) without moving anything around it */
footer li a{display:inline-block;color:rgba(255,255,255,.88);transition:color .3s,transform .3s;font-weight:300}
footer li a:hover,footer li a:focus-visible{color:#fff;transform:translateX(5px)}
.f-contact li{display:flex;gap:11px;align-items:flex-start;line-height:1.55;font-weight:300}
.f-contact svg{width:17px;height:17px;flex:none;margin-top:4px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.socials{display:flex;gap:12px;margin-top:22px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s}
.socials a:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.socials svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{border-top:1px solid rgba(255,255,255,.25);padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.8)}
.footer-bottom a{color:rgba(255,255,255,.88)}
.footer-bottom a:hover{color:#fff}
.footer-bottom .legal{display:flex;gap:24px}

/* reveals */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.rv.in{opacity:1;transform:translateY(0)}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

/* responsive */
@media (max-width:1140px){
  nav.primary,.portal-link{display:none}
  .hamburger{display:block}
}
@media (max-width:1060px){
  nav.primary,.portal-link{display:none}
  .hamburger{display:block}
  .stats-grid,.why-grid,.contact-grid{grid-template-columns:1fr}
  .why-sticky{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .founder-grid{grid-template-columns:1fr;max-width:640px}
  .founder-card{margin:-40px 18px 0}
  .founder-photo{margin:0 40px}
}
@media (max-width:920px){
  .wave-frame{display:none}
  .card-overlay{position:static}
  .wave-sect{background:url(/assets/img/wave-original-1000.webp?v=20261017) center 22% / cover no-repeat;padding:clamp(60px,10vw,110px) 0}
  body.home .wave-sect{background:url(/assets/img/wave-original-1000.webp?v=20261017) center 22% / cover no-repeat}
  .welcome-card{grid-template-columns:1fr}
  .svc-row{margin-left:0;padding-left:clamp(24px,5vw,40px);padding-top:56px}
  .svc-row .drop{left:18px;top:-22px;width:56px;height:56px}
}
@media (max-width:620px){
  .footer-grid{grid-template-columns:1fr}
  .stat{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  #loader{display:none}
  .rv,.hero-kicker,.scroll-cue{opacity:1;transform:none}
  .hero-script{clip-path:none!important}
  .marquee-track,.wave-art,.stats-art img,.cta-band,.wave-whisper,.founder-wave{animation:none}
}

/* ---------- manifesto booklet (opened from any [data-manifesto] link) ---------- */
html.mf-lock,html.mf-lock body{overflow:hidden}
.mf-overlay{
  position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(7,40,58,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease-io),visibility .45s;
}
.mf-overlay.open{opacity:1;visibility:visible}
.mf-stage{flex:1;display:flex;align-items:center;justify-content:center;width:100%;perspective:2600px;padding:56px 16px 8px}
.mf-book{
  --pw:420px;--ph:544px;position:relative;width:var(--pw);height:var(--ph);cursor:pointer;
  transform-style:preserve-3d;transition:transform .7s var(--ease-io);
  transform:scale(.96);
}
.mf-overlay.open .mf-book{transform:none}
.mf-book.mf-spread{width:calc(var(--pw) * 2)}
.mf-book.mf-spread.mf-closed{transform:translateX(calc(var(--pw) * -.5))}
.mf-slot{position:absolute;top:0;height:100%;width:var(--pw)}
.mf-left{left:0;display:none}
.mf-right{left:0}
.mf-spread .mf-left{display:block}
.mf-spread .mf-right{left:var(--pw)}
.mf-page{position:absolute;inset:0;background:#fff;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.mf-page img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-select:none}
.mf-slot.mf-empty .mf-page,.mf-slot.mf-empty{box-shadow:none;background:transparent}
.mf-spread .mf-left .mf-page{border-radius:6px 0 0 6px}
.mf-spread .mf-right .mf-page{border-radius:0 6px 6px 0}
.mf-book:not(.mf-spread) .mf-page{border-radius:6px}
.mf-spine{display:none}
.mf-spread:not(.mf-closed) .mf-spine{
  display:block;position:absolute;top:0;bottom:0;left:calc(var(--pw) - 30px);width:60px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.14) 42%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.14) 58%,transparent);
}
/* the turning leaf */
.mf-leaf{position:absolute;top:0;height:100%;width:var(--pw);transform-style:preserve-3d;z-index:5;
  transition:transform .9s cubic-bezier(.45,.05,.25,1),opacity .9s;}
.mf-leaf-r{left:var(--pw);transform-origin:left center}
.mf-leaf-l{left:0;transform-origin:right center}
.mf-book:not(.mf-spread) .mf-leaf-r{left:0}
.mf-leaf.mf-go.mf-leaf-r{transform:rotateY(-180deg)}
.mf-leaf.mf-go.mf-leaf-l{transform:rotateY(180deg)}
.mf-leaf.mf-single.mf-go{transform:rotateY(-105deg);opacity:0}
.mf-leaf.mf-single.mf-in{transform:rotateY(-105deg);opacity:0}
.mf-leaf.mf-single.mf-in.mf-go{transform:none;opacity:1}
.mf-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mf-back{transform:rotateY(180deg)}
.mf-face .mf-page::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s;
  background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 40%)}
.mf-leaf.mf-go .mf-face .mf-page::after{opacity:1}
.mf-bar{display:flex;align-items:center;gap:22px;padding:14px 16px 26px;color:#fff;font-family:'Lato',sans-serif}
.mf-nav{
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;cursor:pointer;
  padding:10px 22px;font:700 .72rem/1 'Lato',sans-serif;letter-spacing:.22em;text-transform:uppercase;transition:background .3s,opacity .3s;
}
.mf-nav:hover:not(:disabled){background:rgba(255,255,255,.22)}
.mf-nav:disabled{opacity:.3;cursor:default}
.mf-count{min-width:150px;text-align:center;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.mf-close{
  position:absolute;top:16px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.1);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;z-index:2;transition:background .3s;
}
.mf-close:hover{background:rgba(255,255,255,.25)}
@media (max-width:600px){.mf-bar{gap:10px}.mf-nav{padding:9px 14px;letter-spacing:.14em}.mf-count{min-width:70px}}
@media (prefers-reduced-motion:reduce){.mf-overlay,.mf-book,.mf-leaf{transition:none}}

/* ============================================================
   COMPLIANCE HUB PAGE
   ============================================================ */
.hub-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;position:relative;z-index:2}
.hub-cta-row.left{justify-content:flex-start}
.hub-hero{padding-bottom:clamp(20px,3vw,40px)}

/* browser-style frame */
.hub-frame{position:relative;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 2px 6px rgba(10,79,112,.08),0 40px 90px rgba(10,79,112,.28);border:1px solid rgba(10,79,112,.10)}
.hub-frame img{display:block;width:100%;height:auto}
.hub-frame-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:linear-gradient(#f7fafb,#eef3f5);border-bottom:1px solid rgba(10,79,112,.08)}
.hub-frame-bar i{width:10px;height:10px;border-radius:50%;background:#d7dee2}
.hub-frame-bar i:nth-child(1){background:#f0a8a0}.hub-frame-bar i:nth-child(2){background:#f3d49a}.hub-frame-bar i:nth-child(3){background:#a9dcc6}
.hub-frame-bar span{margin-left:12px;flex:1;max-width:320px;height:20px;border-radius:999px;background:#fff;border:1px solid rgba(10,79,112,.08);
  font:400 .66rem/20px 'Lato',sans-serif;letter-spacing:.06em;color:#6B6C6E;padding-left:12px}

/* hero stage: tilted dashboard that straightens as you scroll */
.hub-stage{position:relative;padding:clamp(20px,4vw,50px) 20px clamp(40px,6vw,80px);perspective:1800px;overflow:hidden}
.hub-stage::before{content:"";position:absolute;left:50%;top:18%;width:min(1100px,90vw);height:60%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(79,194,197,.28),transparent);filter:blur(30px);pointer-events:none}
.hub-stage-inner{position:relative;max-width:1080px;margin:0 auto}
#hubTilt{transform:rotateX(var(--tilt,18deg)) scale(var(--sc,.94));transform-origin:50% 100%;transition:transform .12s linear;will-change:transform}
.hub-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:11px 17px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(10,79,112,.1);box-shadow:0 14px 34px rgba(10,79,112,.18);
  font:700 .74rem/1 'Lato',sans-serif;letter-spacing:.04em;color:var(--charcoal);animation:chipFloat 6s var(--ease-io) infinite alternate}
.hub-chip .dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.live{background:#2fa36b;box-shadow:0 0 0 0 rgba(47,163,107,.5);animation:pulse 2s infinite}
.dot.ok{background:#2fa36b}.dot.late{background:#d64545}.dot.soon{background:#e8892c}
.hub-chip.c1{top:6%;left:-4%}
.hub-chip.c2{top:34%;right:-5%;animation-delay:-2s}
.hub-chip.c3{bottom:26%;left:-6%;animation-delay:-4s}
.hub-chip.c4{bottom:6%;right:3%;animation-delay:-1s}
@keyframes chipFloat{from{transform:translateY(0)}to{transform:translateY(-12px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,163,107,.5)}70%{box-shadow:0 0 0 10px rgba(47,163,107,0)}100%{box-shadow:0 0 0 0 rgba(47,163,107,0)}}
.hub-note{text-align:center;margin-top:26px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#A9AAAB}

/* module marquee */
.hub-modules{padding:10px 0 clamp(40px,6vw,70px)}
.hub-pill{display:inline-block;margin:0 8px;padding:12px 22px;border-radius:999px;white-space:nowrap;
  background:var(--foam);border:1px solid rgba(14,105,147,.14);color:var(--blue);
  font:700 .72rem/1 'Lato',sans-serif;letter-spacing:.24em;text-transform:uppercase}

/* scroll tour */
.hub-tour{background:var(--foam);padding:clamp(80px,10vw,140px) 0}
.hub-tour-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,70px);align-items:start}
.hub-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0;opacity:.55;transition:opacity .5s var(--ease-out)}
.hub-step.is-active{opacity:1}
.hub-step:first-child{min-height:48vh}
.hub-step-num{font-family:'Playfair Display',serif;font-size:3.2rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.2px rgba(14,105,147,.45);margin-bottom:14px}
.hub-step.is-active .hub-step-num{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0}
.hub-step .eyebrow{display:block;margin-bottom:.6em}
.hub-step h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);font-weight:600;margin-bottom:.5em}
.hub-step p{max-width:440px}
.hub-step-shot{display:none}
.hub-sticky{position:sticky;top:calc(50vh - 260px)}
.hub-shots{position:relative;aspect-ratio:1277/876;background:#fff}
.hub-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;
  opacity:0;transform:scale(1.035);transition:opacity .6s var(--ease-out),transform .9s var(--ease-out)}
.hub-shot.is-active{opacity:1;transform:none}
.hub-progress{height:3px;border-radius:3px;background:rgba(14,105,147,.12);margin:18px 6px 0;overflow:hidden}
.hub-progress span{display:block;height:100%;width:11%;background:var(--grad);transition:width .5s var(--ease-out)}

/* principles */
.hub-principles{padding:clamp(80px,10vw,130px) 0;background:#fff}
.hub-p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hub-p{position:relative;padding:40px 34px;border-radius:18px;background:var(--grad);color:#fff;overflow:hidden;
  box-shadow:0 18px 44px rgba(10,79,112,.24);transition:transform .5s var(--ease-out)}
.hub-p:hover{transform:translateY(-6px)}
.hub-p::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.1)}
.hub-p-k{display:block;font-family:'Playfair Display',serif;font-size:1rem;letter-spacing:.2em;opacity:.8;margin-bottom:18px}
.hub-p h3{color:#fff;font-size:1.25rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6em}
.hub-p p{color:rgba(255,255,255,.9);font-size:.95rem}

/* login card */
.hub-login{padding:0 0 clamp(80px,10vw,130px);background:#fff}
.hub-login-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:22px;overflow:hidden;
  background:#fff;box-shadow:var(--shadow-card);align-items:center}
.hub-login-art{align-self:stretch;min-height:420px;background:#fff}
.hub-login-art img{width:100%;height:100%;object-fit:cover;object-position:left bottom;display:block}
.hub-login-copy{padding:clamp(34px,5vw,64px)}
.hub-login-copy h2{font-size:var(--step-3);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:.4em 0 .5em}

@media (max-width:920px){
  .hub-tour-grid{grid-template-columns:1fr}
  .hub-sticky{display:none}
  .hub-step,.hub-step:first-child{min-height:0;opacity:1;padding:30px 0}
  .hub-step-shot{display:block;margin:22px 0 0;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px rgba(10,79,112,.2)}
  .hub-step-shot img{display:block;width:100%;height:auto}
  .hub-p-grid{grid-template-columns:1fr}
  .hub-login-card{grid-template-columns:1fr}
  .hub-login-art{min-height:0;max-height:340px}
  .hub-chip{font-size:.64rem;padding:8px 12px}
  .hub-chip.c1{left:2%;top:-2%}.hub-chip.c2{right:2%;top:30%}.hub-chip.c3{left:2%;bottom:22%}.hub-chip.c4{right:2%;bottom:-2%}
}
@media (max-width:560px){.hub-chip.c2,.hub-chip.c3{display:none}}
@media (prefers-reduced-motion:reduce){
  #hubTilt{transform:none!important}.hub-chip,.dot.live{animation:none}
  .hub-shot,.hub-step{transition:none}
}
.hub-more{display:inline-flex;align-items:center;gap:.6em;margin-top:22px;font:700 .72rem/1 'Lato',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}
.hub-more .arr{transition:transform .4s var(--ease-out)}
.hub-more:hover .arr{transform:translateX(6px)}
.nav-link.nav-hub{color:var(--blue)}
.form-status{margin:16px 0 0;font-size:.92rem;min-height:1.2em}
.form-status.ok{color:#1f7a50}
.form-status.err{color:#b23a3a}
.contact-form.is-sent button[type="submit"]{opacity:.6;cursor:default}

/* ---------- login dropdown (Client / Staff) ---------- */
.login-dd{position:relative}
.login-dd .portal-link{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.5em}
.login-dd .caret{width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.login-dd.open .caret{transform:rotate(225deg) translateY(-1px)}
.dropdown.dropdown-right{left:auto;right:0;min-width:230px}
.login-dd .dropdown a b{display:block;font-weight:700;color:var(--charcoal);letter-spacing:.04em}
.login-dd .dropdown a small{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-text);margin-top:2px}
.login-dd .dropdown a:hover b{color:var(--blue)}
@media (max-width:1140px){.login-dd{display:none}}

/* ---------- policy pages ---------- */
.policy .policy-meta{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;color:var(--charcoal);line-height:1.9}
.policy h2{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);margin:2em 0 .6em}
.policy .policy-quote{margin:1.2em 0 1.6em;padding:1.4em 1.6em;border-left:3px solid var(--teal);background:var(--foam);border-radius:0 14px 14px 0;font-size:.96rem;line-height:1.8}
.policy .policy-shot{margin:1.4em 0 1.8em}
.policy .policy-shot img{width:min(100%,504px);height:auto;border-radius:14px;box-shadow:var(--shadow-card);border:1px solid rgba(10,79,112,.08)}
.policy a{word-break:break-word}
footer .legal a + a{margin-left:18px}

/* Compliance Hub module wheel: endless loop, driven by scroll plus a slow drift (JS) */
.hub-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.hub-track{display:flex;width:max-content;will-change:transform}
.hub-track .hub-pill{flex:none}

/* ---------- mobile menu close button ---------- */
.mm-close{position:absolute;top:22px;right:22px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center}
.mm-close span{position:absolute;width:20px;height:2px;border-radius:2px;background:#fff}
.mm-close span:first-child{transform:rotate(45deg)}.mm-close span:last-child{transform:rotate(-45deg)}
.mm-close:focus-visible,.mobile-menu a:focus-visible{outline:2px solid #fff;outline-offset:4px}
body.menu-open .hamburger{visibility:hidden}

/* ---------- contact consent ---------- */
.contact-form .consent{display:flex;gap:12px;align-items:flex-start;margin:6px 0 22px;font-size:.86rem;line-height:1.6;
  letter-spacing:0;text-transform:none;font-weight:400;color:var(--body);cursor:pointer}
.contact-form .consent input{width:18px;height:18px;flex:none;margin:3px 0 0;accent-color:var(--blue)}

html.ld-skip #loader{display:none}

/* ============================================================
   BLOG (index + article), styled to match the service cards
   ============================================================ */
.blog-list{padding:clamp(10px,2vw,24px) 0 clamp(80px,9vw,120px);background:var(--foam)}
.blog-page .page-hero{background:#fff}
.chip{font:700 .7rem/1 'Lato',sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.chip.is-on{background:var(--blue);color:#fff;border-color:var(--blue)}
.blog-count{text-align:center;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#5E5F61;margin:-6px 0 34px}
.post-card{border:1px solid rgba(14,105,147,.06);display:flex;flex-direction:column;position:relative}
.post-card::before{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out);z-index:1}
.post-card:hover::before{transform:scaleX(1)}
.post-card .pc-body{display:flex;flex-direction:column;flex:1}
.post-card h3{font-family:'Playfair Display',serif;line-height:1.3;transition:color .35s}
.post-card:hover h3{color:var(--blue)}
.post-card p{flex:1}
.post-card .pc-meta{display:block;margin-top:1.1em;font-size:.74rem;letter-spacing:.08em;color:#6B6C6E}
.post-card .pc-more .arr{display:inline-block;transition:transform .4s var(--ease-out)}
.post-card:hover .pc-more .arr{transform:translateX(6px)}
.post-card.is-hidden{display:none}

.article{padding:clamp(130px,16vh,180px) 0 clamp(40px,5vw,60px);background:#fff}
.art-head{max-width:820px;margin:0 auto;padding:0 clamp(22px,5vw,52px);text-align:center}
.art-back{display:inline-flex;gap:.5em;font:700 .7rem/1 'Lato',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#6B6C6E;margin-bottom:26px}
.art-back:hover{color:var(--blue)}
.art-cat{display:block;margin-bottom:14px}
.art-head h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);font-weight:600;line-height:1.2;color:var(--charcoal)}
.art-meta{margin-top:18px;font-size:.84rem;letter-spacing:.08em;color:#6B6C6E}
.art-cover{max-width:1040px;margin:clamp(34px,4vw,54px) auto 0;padding:0 clamp(22px,5vw,52px)}
.art-cover img{width:100%;height:auto;max-height:560px;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-card)}
.art-body{max-width:760px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(22px,5vw,52px) 0}
.art-body h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem);letter-spacing:.04em;text-transform:none;margin:2em 0 .6em}
.art-body h3{font-family:'Playfair Display',serif;font-size:1.2rem;letter-spacing:0;text-transform:none;color:var(--charcoal);margin:1.8em 0 .5em}
.art-body h4{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:1.6em 0 .4em}
.art-body p,.art-body li{font-size:1.04rem;line-height:1.85}
.art-body hr{border:0;height:2px;width:70px;background:var(--teal);opacity:.6;margin:2.6em 0}
.art-body blockquote{margin:1.8em 0;padding:1.2em 1.6em;border-left:3px solid var(--teal);background:var(--foam);border-radius:0 14px 14px 0;font-family:'Playfair Display',serif;font-style:italic;font-size:1.1rem}
.art-body a{text-decoration:underline;text-underline-offset:3px}
.art-body .table-wrap{overflow-x:auto;margin:1.6em 0}
.art-body table{width:100%;border-collapse:collapse;font-size:.92rem}
.art-body th,.art-body td{padding:12px 14px;border-bottom:1px solid #DDE3E3;text-align:left;vertical-align:top}
.art-body th{font-family:'Lato',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);background:var(--foam)}
.art-foot{max-width:760px;margin:0 auto;padding:36px clamp(22px,5vw,52px) 0}
.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.art-tag{padding:6px 14px;border-radius:999px;background:var(--foam);border:1px solid rgba(14,105,147,.12);font-size:.74rem;color:var(--blue)}
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid #DDE3E3;padding-top:28px}
.art-nav a{display:block;padding:18px 20px;border-radius:14px;background:var(--foam);font-family:'Playfair Display',serif;color:var(--charcoal);line-height:1.4;transition:background .3s}
.art-nav a:hover{background:#E6F3F4}
.art-nav small{display:block;font:700 .66rem/1 'Lato',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-text);margin-bottom:8px}
.art-next{text-align:right}
.art-related{background:var(--foam)}
@media (max-width:640px){.art-nav{grid-template-columns:1fr}.art-next{text-align:left}}
.cat-chips .chip{background:#fff}
.cat-chips .chip.is-on{background:var(--blue);color:#fff}
.notfound{padding:clamp(40px,6vw,70px) 0 clamp(90px,10vw,130px);text-align:center}
.notfound .hub-cta-row{margin-top:10px}
.post-card h2{font-family:"Playfair Display",serif;font-size:1.14rem;font-weight:600;line-height:1.3;margin:.5em 0 .5em;color:var(--charcoal);letter-spacing:0;text-transform:none;transition:color .35s}
.post-card:hover h2{color:var(--blue)}

main{display:block}

.cr-welcome{position:relative;background:var(--foam);padding:0 0 clamp(80px,9vw,120px)}
.cr-welcome .welcome-card{position:relative;z-index:1;margin:0 auto}
@media (max-width:640px){.art-body table:not(.table-wrap table){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* two-line script title (Compliance / Hub) */
.page-hero .script-title.gen.stacked{width:min(520px,80vw);max-height:none;max-width:80vw}

/* Compliance Hub modules: a steady, seamless carousel. Two identical sets slide
   exactly one set width (-50%) and loop, so there is never a jump; pure CSS, not
   tied to scrolling. Hover pauses it; reduced motion shows the pills still. */
.hub-track{animation:hubRoll 48s linear infinite}
.hub-set{display:flex;flex:none}
.hub-marquee:hover .hub-track{animation-play-state:paused}
@keyframes hubRoll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.hub-list-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0}
@media (prefers-reduced-motion:reduce){
  .hub-track{animation:none;width:auto;justify-content:center}
  .hub-marquee{-webkit-mask-image:none;mask-image:none}
  .hub-set{flex-wrap:wrap;justify-content:center;row-gap:12px}
  .hub-set+.hub-set{display:none}
}

/* ==================================================================
   NEW WAVES concept (designer mockup, Oct 5). PREVIEW ONLY.
   Off by default. Add ?look=waves to any page URL to turn it on
   (it sticks while you browse); ?look=classic turns it off.
   Each section is its own panel; only the blue/purple wave bleeds
   across section edges. Assets: nw-*.webp (from the mockup PDF,
   to be replaced with the designer's raw files).
   ================================================================== */

/* home hero: kicker + WATER on the left, the blue curl on the right */
.nw-hero{display:block;position:relative;background:#fff;overflow:hidden;
  padding:clamp(128px,15vh,176px) 0 clamp(36px,4vw,60px)}
.nw-hero-grid{display:grid;grid-template-columns:1.18fr .82fr;align-items:center;gap:clamp(16px,3vw,48px)}
.nw-hero h1{margin:0}
.nw-kicker{display:block;font:400 clamp(.8rem,.6rem + .5vw,1.02rem)/1.5 'Lato',sans-serif;letter-spacing:.26em;white-space:nowrap;
  text-transform:uppercase;color:var(--teal-text);margin-bottom:clamp(14px,1.8vw,26px)}
.nw-water{display:block;width:min(100%,560px);height:auto}
.nw-sub{margin-top:clamp(20px,2.4vw,32px);font:300 clamp(1rem,.9rem + .4vw,1.25rem)/1.5 'Lato',sans-serif;color:var(--charcoal)}
.nw-sub span{display:block;margin-top:.55em;font-size:.68em;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-text)}
.nw-curl{justify-self:end;width:min(100%,500px);height:auto;filter:drop-shadow(0 30px 40px rgba(14,74,140,.16))}
.nw-explore{display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;margin:clamp(26px,3vw,44px) auto 0;
  font:400 .66rem/1 'Lato',sans-serif;letter-spacing:.36em;text-transform:uppercase;color:#8A8B8D}
.nw-explore i{display:block;width:1px;height:46px;background:linear-gradient(var(--teal),rgba(79,194,197,0))}
/* entrance, after the loader */
.nw-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,32px)}
.nw-cta .btn{padding-left:clamp(20px,2vw,30px);padding-right:clamp(20px,2vw,30px)}
.nw-kicker,.nw-water,.nw-sub,.nw-cta,.nw-explore{opacity:0;transform:translateY(14px)}
.nw-curl{opacity:0;transform:scale(.94) rotate(-4deg)}
.nw-hero.ready .nw-kicker{animation:nwIn .9s var(--ease-out) .15s forwards}
.nw-hero.ready .nw-water{animation:nwIn 1.1s var(--ease-out) .35s forwards}
.nw-hero.ready .nw-sub{animation:nwIn .9s var(--ease-out) .8s forwards}
.nw-hero.ready .nw-cta{animation:nwIn .9s var(--ease-out) 1s forwards}
.nw-hero.ready .nw-explore{animation:nwIn .9s var(--ease-out) 1.3s forwards}
.nw-hero.ready .nw-curl{animation:nwCurlIn 1.4s var(--ease-out) .2s forwards,nwFloat 9s var(--ease-io) 1.6s infinite alternate}
@keyframes nwIn{to{opacity:1;transform:none}}
@keyframes nwCurlIn{to{opacity:1;transform:none}}
@keyframes nwFloat{from{transform:none}to{transform:translateY(-12px) rotate(2.5deg)}}

/* welcome: the card rides the teal wave */
.cr-welcome{background:#fff;position:relative;overflow:hidden;
  padding:clamp(150px,17vw,250px) 0 clamp(90px,10vw,150px)}
.cr-welcome::before{content:"";position:absolute;inset:0 -3%;pointer-events:none;
  background:url(/assets/img/nw-teal-wave.webp?v=20261017) center 18%/max(106%,1500px) auto no-repeat}
.cr-welcome .welcome-card{border-radius:4px;box-shadow:0 40px 80px rgba(8,60,90,.22)}

/* stats: a white panel on the blue/purple wave, whose splash bleeds up into Services */
.services{position:relative;z-index:0}
.stats{position:relative;z-index:1;background:transparent;overflow:visible;
  margin-top:calc(-1 * clamp(70px,9vw,140px));padding:clamp(170px,19vw,280px) 0 clamp(150px,16vw,230px)}
.stats::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background:url(/assets/img/nw-purple-wave.webp?v=20261017) center/max(100%,1300px) auto no-repeat;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.stats-grid{grid-template-columns:1fr;position:relative;z-index:1}
.stats-art{display:none}
.stats-nums{grid-template-columns:repeat(3,1fr);gap:0;background:#fff;width:100%;max-width:1120px;margin:0 auto;
  padding:clamp(40px,5vw,72px) clamp(20px,3vw,48px);box-shadow:0 40px 80px rgba(20,30,90,.22);border-radius:4px}
.stat{border-bottom:0;padding:0 clamp(14px,2.4vw,34px);border-left:1px solid rgba(70,70,71,.12);align-items:center;gap:16px}
.stat:first-child{border-left:0}
.stat .num{font-size:clamp(2.4rem,3.8vw,3.4rem);min-width:0}
.stat .label{font-size:.7rem;letter-spacing:.18em;line-height:1.8}

.cta-inner h2{text-wrap:balance}
.cta-inner .cta-close{max-width:none;margin:2.2em auto 0;font:400 .72rem/1.6 'Lato',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.88)}

@media (max-width:920px){
  .nw-hero{padding-top:clamp(110px,24vw,140px)}
  .nw-hero-grid{grid-template-columns:1fr;text-align:center;justify-items:center}
  .nw-kicker{white-space:normal}
  .nw-cta{justify-content:center}
  .nw-water{margin:0 auto;width:min(100%,440px)}
  .nw-curl{justify-self:center;width:min(78vw,380px);order:-1;margin-bottom:6px}
  .stats-nums{grid-template-columns:1fr;row-gap:26px}
  .stat{border-left:0;border-top:1px solid rgba(70,70,71,.12);padding:22px 0 0}
  .stat:first-child{border-top:0;padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .nw-kicker,.nw-water,.nw-sub,.nw-cta,.nw-explore,.nw-curl{opacity:1;transform:none;animation:none!important}
}
@media (max-width:920px){.page-hero .wave-whisper{width:min(62vw,300px);opacity:.45;right:-14%;top:64px}}

/* ==================================================================
   MANIFESTO WAVES: one wave, one idea, one place.
   Each wave sits at the bottom edge of the page header (never behind
   text) with its Manifesto line beneath it. Legal pages, 404, Thank
   You, articles and the Founder page carry no wave.
   ================================================================== */
.wave-band{position:relative;z-index:1;width:min(1100px,100%);margin:clamp(34px,4vw,56px) auto 0;
  aspect-ratio:50/11;height:auto;background:center/contain no-repeat;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 58%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 58%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-composite:intersect;
  opacity:0;transform:translateY(16px);transition:opacity 1.4s var(--ease-out),transform 1.4s var(--ease-out)}
.wave-band.in{opacity:1;transform:none}
.wave-band.wb-soft.in{opacity:.6}
.wb-splash{background-image:url(/assets/img/wave-splash-whole.webp?v=20261017);aspect-ratio:1400/937;width:min(440px,72%);-webkit-mask-image:none;mask-image:none}
.mf-line{position:relative;z-index:1;max-width:40em;margin:clamp(14px,1.6vw,20px) auto 0;text-align:center;text-wrap:balance;
  font:italic 400 clamp(1rem,.92rem + .35vw,1.2rem)/1.55 'Playfair Display',serif;color:var(--charcoal)}
.page-intro + .mf-line,.rule + .mf-line{margin-top:clamp(30px,3.6vw,48px)}
.mf-line > span{display:block;margin-top:.7em;font:400 .64rem/1 'Lato',sans-serif;font-style:normal;letter-spacing:.28em;text-transform:uppercase;color:var(--teal-text)}
@media (max-width:620px){.wave-band{margin-top:28px}}
@media (prefers-reduced-motion:reduce){.wave-band{opacity:1;transform:none;transition:none}.wave-band.wb-soft{opacity:.5}}
/* home: the Manifesto invitation, with the cover wave beside it (never behind the words) */
.mf-teaser{background:#fff;padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.mf-teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.mf-teaser h2{font-size:var(--step-3);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:.5em 0 .6em}
.mf-teaser p{max-width:30em;margin-bottom:1.8em}
.mf-teaser-art{width:min(100%,600px);height:auto;justify-self:end;border-radius:6px;box-shadow:0 30px 70px rgba(40,30,90,.16),0 6px 18px rgba(40,30,90,.08)}
@media (max-width:920px){.mf-teaser-grid{grid-template-columns:1fr}.mf-teaser-art{justify-self:center;width:min(100%,520px);order:-1}}
/* portals page */
.portals-sect{background:var(--foam);padding:clamp(60px,8vw,110px) 0}
.portal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,34px)}
.portal-card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:clamp(30px,3.6vw,48px);display:flex;flex-direction:column}
.portal-card h2{font-size:var(--step-2);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:.55em 0 .1em}
.portal-card .p-sub{font:400 .74rem/1.4 'Lato',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-text);margin-bottom:1.1em}
.portal-card p{margin-bottom:1.4em}
.portal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}
.portal-more{margin-top:1.3em;font:700 .72rem/1 'Lato',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
@media (max-width:820px){.portal-grid{grid-template-columns:1fr}}
.page-hero .serif-title{display:block;margin-top:.15em}

/* ==================================================================
   ABOUT KIT: waves, bubbles, and boxes for the About pages.
   Every wave is a whole brand image, never a crop.
   ================================================================== */
.ab-sect{position:relative;padding:clamp(70px,9vw,120px) 0;overflow:hidden}
.ab-sect.foam{background:linear-gradient(180deg,#F4FAFA 0%,#EEF7F8 100%)}
.ab-sect > .container{position:relative;z-index:1}
.ab-head{max-width:720px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.ab-head h2{font-size:var(--step-3);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:.5em 0 .45em;text-wrap:balance}
.ab-head p{font-size:var(--step-0)}

/* rising air bubbles, like looking up through water (built by main.js) */
.ab-bubbles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ab-bubbles i{position:absolute;bottom:-30px;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,0) 24%),
             radial-gradient(circle at 50% 50%,rgba(127,211,213,.10) 50%,rgba(79,194,197,.38) 78%,rgba(14,105,147,.55) 100%);
  box-shadow:inset 0 0 0 1px rgba(14,105,147,.38),0 2px 6px rgba(14,105,147,.10);
  animation:abRise var(--d,14s) cubic-bezier(.45,.05,.55,.95) var(--dl,0s) infinite}
.ab-bubbles i::after{content:"";position:absolute;inset:0;border-radius:50%;animation:abWobble var(--w,2.6s) ease-in-out infinite alternate}
@keyframes abRise{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  8%{opacity:var(--o,.85)}
  25%{transform:translate3d(var(--x1,8px),calc(var(--h,600px) * -.25),0) scale(.85)}
  50%{transform:translate3d(var(--x2,-6px),calc(var(--h,600px) * -.5),0) scale(.95)}
  75%{transform:translate3d(var(--x1,8px),calc(var(--h,600px) * -.75),0) scale(1)}
  92%{opacity:var(--o,.85)}
  100%{transform:translate3d(0,calc(var(--h,600px) * -1 - 40px),0) scale(1.05);opacity:0}}
@keyframes abWobble{from{transform:scale(1,.94)}to{transform:scale(.94,1)}}
/* wave moment: a whole wave beside a statement */
.ab-moment{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
.ab-moment.flip{grid-template-columns:.95fr 1.05fr}
.ab-moment.flip .ab-art{order:2}
.ab-art{position:relative;justify-self:center;width:100%}
.ab-art img{display:block;width:100%;height:auto}
.ab-art.float img{animation:abDrift 10s var(--ease-io) infinite alternate;filter:drop-shadow(0 30px 40px rgba(14,74,140,.16))}
.ab-art.blend img{mix-blend-mode:multiply;filter:none}
.ab-art.frame img{border-radius:6px;box-shadow:0 30px 70px rgba(40,30,90,.16),0 6px 18px rgba(40,30,90,.08)}
@keyframes abDrift{from{transform:translateY(0) rotate(0)}to{transform:translateY(-14px) rotate(-1.5deg)}}
.ab-statement .eyebrow{display:block;margin-bottom:1em}
.ab-statement .big{font:400 clamp(1.45rem,1.1rem + 1.5vw,2.25rem)/1.4 'Playfair Display',serif;color:var(--charcoal);text-wrap:balance;margin-bottom:.8em}
.ab-statement p{margin-bottom:1em}
/* quote card that overlaps a framed painting */
.ab-quote-card{position:relative;margin:-90px clamp(14px,4vw,40px) 0 auto;max-width:440px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--r);padding:clamp(24px,3vw,36px);
  box-shadow:var(--shadow-card);border:1px solid rgba(79,194,197,.25)}
.ab-quote-card q{display:block;font:italic 400 clamp(1.15rem,1rem + .7vw,1.5rem)/1.45 'Playfair Display',serif;color:var(--charcoal);quotes:"\201C" "\201D"}
.ab-quote-card cite{display:block;margin-top:1em;font:700 .68rem/1 'Lato',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--teal-text);font-style:normal}

/* principle cards with number bubbles */
.ab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px)}
.ab-grid.three{grid-template-columns:repeat(3,1fr)}
.ab-card{position:relative;background:#fff;border-radius:var(--r);padding:clamp(28px,3vw,40px);border:1px solid rgba(14,105,147,.08);
  box-shadow:0 6px 18px rgba(10,79,112,.05),0 22px 50px rgba(10,79,112,.07);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);overflow:hidden}
.ab-card::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad);opacity:.85}
.ab-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.ab-card h3{font-size:1.12rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep);margin:.9em 0 .45em;line-height:1.35}
.ab-card p{font-size:.97rem;line-height:1.7}
.ab-num{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font:600 1.05rem/1 'Playfair Display',serif;color:#fff;letter-spacing:.04em;
  background:radial-gradient(circle at 30% 26%,#7FD3D5 0%,#2E96AE 45%,#0A4F70 100%);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.45),0 10px 22px rgba(14,105,147,.28)}

/* chips: short statements as water-drop pills */
.ab-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;list-style:none;margin:0;padding:0}
.ab-chips li{display:flex;align-items:center;gap:12px;background:#fff;border-radius:999px;padding:14px 24px 14px 16px;
  font-size:.98rem;color:var(--charcoal);border:1px solid rgba(79,194,197,.3);box-shadow:0 8px 22px rgba(10,79,112,.07);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.ab-chips li:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,79,112,.12)}
.ab-chips li::before{content:"";flex:0 0 14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(135deg);background:var(--grad)}
.ab-chips.left{justify-content:flex-start}
.ab-chips.sm li{font-size:.9rem;padding:10px 18px 10px 13px;border-radius:16px;line-height:1.5}

/* fit / not-a-fit contrast boxes */
.ab-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:start}
.ab-split h2{font-size:var(--step-2);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.7em}
.ab-split p{margin-bottom:1em}
.ab-fit{display:grid;gap:18px}
.ab-fit > div{border-radius:var(--r);padding:clamp(24px,2.6vw,32px)}
.ab-fit .yes{background:linear-gradient(135deg,#E9F7F7 0%,#DDF0F4 100%);border:1px solid rgba(79,194,197,.35)}
.ab-fit .no{background:#fff;border:1px dashed rgba(70,70,71,.25)}
.ab-fit .tag{display:inline-block;font:700 .64rem/1 'Lato',sans-serif;letter-spacing:.28em;text-transform:uppercase;padding:8px 14px;border-radius:999px;margin-bottom:.9em}
.ab-fit .yes .tag{background:var(--blue);color:#fff}
.ab-fit .no .tag{background:#EDEDEE;color:var(--charcoal)}
.ab-fit p{margin:0;font-size:.98rem}

/* deep panel with bubbles */
.ab-deep{position:relative;border-radius:calc(var(--r) + 6px);overflow:hidden;color:#fff;
  background:linear-gradient(120deg,#0A4F70 0%,#0E6993 55%,#2E96AE 100%);padding:clamp(40px,6vw,80px) clamp(28px,6vw,90px);
  box-shadow:0 30px 70px rgba(10,79,112,.25)}
.ab-deep .ab-bubbles i{background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.9) 0 10%,rgba(255,255,255,0) 24%),radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,.18) 80%,rgba(255,255,255,.4) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.ab-deep > *:not(.ab-bubbles){position:relative;z-index:1}

.ab-deep h2{color:#fff;font-size:var(--step-2);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6em}
.ab-deep p{color:rgba(255,255,255,.93);max-width:46em}
.ab-deep .eyebrow{color:#A7E3E4;display:block;margin-bottom:.8em}

/* closing belief line */
.ab-close{text-align:center;max-width:820px;margin:0 auto}
.ab-close p{font:italic 400 clamp(1.3rem,1.05rem + 1.1vw,1.95rem)/1.5 'Playfair Display',serif;color:var(--charcoal);text-wrap:balance}

/* vision pillars: alternating rows */
.ab-rows{display:grid;gap:clamp(22px,3vw,34px)}
.ab-row{display:grid;grid-template-columns:auto 1fr 1.25fr;gap:clamp(20px,3vw,44px);align-items:start;background:#fff;border-radius:var(--r);
  padding:clamp(28px,3.4vw,46px);border:1px solid rgba(14,105,147,.08);box-shadow:0 6px 18px rgba(10,79,112,.05),0 22px 50px rgba(10,79,112,.07)}
.ab-row h2{font-size:1.3rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:.6em;line-height:1.3}
.ab-row .key{font:italic 400 clamp(1.15rem,1rem + .55vw,1.4rem)/1.45 'Playfair Display',serif;color:var(--charcoal)}
.ab-row .body p{margin-bottom:1em;font-size:.98rem}
.ab-row .body p:last-child{margin-bottom:0}

/* founder fact bubbles */
.ab-facts{display:grid;grid-template-columns:repeat(4,1fr);max-width:1000px;margin:0 auto;}
.ab-facts.three{grid-template-columns:repeat(3,1fr);max-width:860px}
.ab-facts{gap:clamp(16px,2.4vw,30px);text-align:center}
.ab-fact{display:flex;flex-direction:column;align-items:center}
.ab-fact .orb{width:clamp(112px,11vw,140px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;
  font:600 clamp(1.5rem,1.2rem + 1vw,2.1rem)/1 'Playfair Display',serif;color:#fff;
  background:radial-gradient(circle at 30% 26%,#9BE0E1 0%,#2E96AE 42%,#0A4F70 100%);
  box-shadow:inset 0 3px 10px rgba(255,255,255,.45),inset 0 -10px 24px rgba(5,40,60,.25),0 18px 40px rgba(14,105,147,.25);
  animation:abFloat 12s var(--ease-io) infinite alternate}
.ab-fact:nth-child(2) .orb{animation-delay:-3s}.ab-fact:nth-child(3) .orb{animation-delay:-6s}.ab-fact:nth-child(4) .orb{animation-delay:-9s}
.ab-fact h3{font:700 .74rem/1.5 'Lato',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:.35em}
.ab-fact p{font-size:.9rem;line-height:1.55;max-width:16em}

/* paired next links */
.ab-next{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ab-next .next-link{margin:0}

/* full-bleed wave ribbon (edges run off the screen, so the image reads whole) */
.ab-ribbon{height:clamp(150px,18vw,260px);background:url(/assets/img/nw-purple-wave.webp?v=20261017) center/max(110%,1200px) auto no-repeat;
  margin:clamp(10px,2vw,30px) 0 0;animation:abRibbon 22s var(--ease-io) infinite alternate}
@keyframes abRibbon{from{background-position:48% 50%}to{background-position:52% 46%}}

@media (max-width:920px){
  .ab-moment,.ab-moment.flip,.ab-split{grid-template-columns:1fr}
  .ab-moment.flip .ab-art{order:0}
  .ab-art{max-width:460px}
  .ab-grid.three{grid-template-columns:1fr}
  .ab-row{grid-template-columns:auto 1fr}
  .ab-row .body{grid-column:1 / -1}
  .ab-facts,.ab-facts.three{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .ab-quote-card{margin:-60px auto 0}
}
@media (max-width:620px){
  .ab-grid,.ab-next{grid-template-columns:1fr}
  .ab-chips li{border-radius:18px;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ab-bubbles{display:none}
  .ab-art.float img,.ab-fact .orb,.ab-ribbon{animation:none}
}

/* blog search */
.blog-search{position:relative;max-width:640px;margin:clamp(10px,2vw,20px) auto 0;display:flex;align-items:center}
.blog-search svg{position:absolute;left:22px;color:var(--blue);pointer-events:none}
.blog-search input{width:100%;font:400 1rem/1.4 'Lato',sans-serif;color:var(--charcoal);background:#fff;
  border:1px solid rgba(14,105,147,.18);border-radius:999px;padding:17px 54px 17px 56px;
  box-shadow:0 8px 24px rgba(10,79,112,.07);transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.blog-search input::placeholder{color:#8A8B8D}
.blog-search input::-webkit-search-cancel-button{display:none}
.blog-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(79,194,197,.18),0 12px 30px rgba(10,79,112,.1)}
.bs-clear{position:absolute;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:#EEF7F8;color:var(--blue-deep);font-size:1.3rem;line-height:1;cursor:pointer}
.bs-clear:hover{background:#DDF0F4}
.blog-empty{text-align:center;margin:30px auto 0;max-width:34em}
.blog-empty a{color:var(--blue)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* founder: step into the wave (full-bleed painting that dissolves into the page) */
.ab-immerse{position:relative;min-height:clamp(560px,66vw,980px);overflow:hidden;display:grid;align-items:center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 78%,transparent 100%)}
.abi-wave{position:absolute;inset:0;background:url(/assets/img/mf-wave-painting.webp?v=20261017) 50% 50%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  transform:scale(1.04);animation:abiSwell 26s var(--ease-io) infinite alternate}
@keyframes abiSwell{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.2%,-1%,0)}}
/* the quote rides the open curl of the wave */
.abi-quote{position:relative;z-index:1;margin:0;justify-self:start;margin-left:49%;max-width:min(580px,44vw);
  padding:clamp(22px,2.6vw,36px) clamp(26px,3vw,44px);border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.34));
  -webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 20px 50px rgba(40,30,90,.10);
  opacity:0;transition:opacity 1.2s var(--ease-out)}
.ab-immerse.in .abi-quote{opacity:1}
.abi-quote p{font:italic 400 clamp(1.5rem,1rem + 1.9vw,2.7rem)/1.32 'Playfair Display',serif;color:#2B2C3A;
  text-shadow:0 0 14px rgba(255,251,244,.7)}
.abi-quote .w{display:inline-block;opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out),filter 1.1s var(--ease-out)}
.abi-quote .be{font-weight:500;color:#0A4F70}
.abi-quote cite{display:block;margin-top:1.1em;font:700 .74rem/1 'Lato',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#0A4F70;font-style:normal;
  opacity:0;transition:opacity 1s var(--ease-out) 1.6s;text-shadow:0 0 14px rgba(255,251,244,.95)}
.ab-immerse.in .abi-quote .w{opacity:1;transform:none;filter:none}
.ab-immerse.in .abi-quote cite{opacity:1}
@media (max-width:920px){
  .ab-immerse{min-height:clamp(520px,135vw,760px)}
  .abi-wave{background-position:58% 50%}
  .abi-quote{margin:0 auto;max-width:88%;text-align:center}
  .abi-quote br{display:none}
  .abi-quote .be{display:block;margin-top:.15em}
}
@media (prefers-reduced-motion:reduce){.abi-wave{animation:none}.abi-quote,.abi-quote .w,.abi-quote cite{opacity:1;transform:none;filter:none;transition:none}}

/* doctrine: the manifesto's iridescent wave rises from the bottom of the closing statement */
.ab-shore{position:relative;overflow:hidden;padding-top:clamp(70px,9vw,120px);background:#fff}
.ab-shore-text{position:relative;z-index:2;text-align:center}
.ab-shore-text .eyebrow{display:block;margin-bottom:1.4em}
.ab-shore-text p{font:400 clamp(1.35rem,1rem + 1.5vw,2.25rem)/1.35 'Playfair Display',serif;color:var(--charcoal);margin:0 auto .45em;max-width:26em;text-wrap:balance}
.ab-shore-text em{font-style:italic;color:var(--blue)}
.ab-shore-wave{position:relative;z-index:1;margin-top:clamp(-40px,-3vw,-10px);height:clamp(260px,40vw,660px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%)}
.ab-shore-wave img{position:absolute;left:0;width:100%;max-width:none;height:auto;top:0;transform-origin:50% 100%;
  transform:translate3d(0,30px,0);opacity:0;transition:transform 1.6s var(--ease-out),opacity 1.6s var(--ease-out)}
.ab-shore.in .ab-shore-wave img{transform:none;opacity:1;animation:abShoreDrift 18s var(--ease-io) 1.6s infinite alternate}
@keyframes abShoreDrift{from{transform:scale(1)}to{transform:scale(1.025) translate3d(0,-6px,0)}}
@media (max-width:620px){.ab-shore-wave img{left:-25%;width:150%}}
@media (prefers-reduced-motion:reduce){.ab-shore-wave img{opacity:1;transform:none;transition:none;animation:none!important}}

/* videos page */
.vid-feature{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.vid-feature-body h2{font-size:var(--step-2);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:.5em 0 .6em;line-height:1.25}
.vid-feature-body p{margin-bottom:1.6em}
.vid-feature-body .eyebrow{display:block}
.yt-lite,.yt-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0A2E40;
  box-shadow:0 26px 60px rgba(10,79,112,.22),0 6px 16px rgba(10,79,112,.10)}
.yt-lite{border:0;padding:0;cursor:pointer}
.yt-lite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out),filter .6s}
.yt-lite::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,46,64,0) 45%,rgba(10,46,64,.45) 100%)}
.yt-lite:hover img{transform:scale(1.04);filter:saturate(1.08)}
.yt-play{position:absolute;z-index:1;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.55);
  box-shadow:0 10px 30px rgba(5,30,45,.35);transition:transform .45s var(--ease-out),background .45s}
.yt-play svg{margin-left:4px}
.yt-lite:not(.yt-big) .yt-play{width:62px;height:62px;margin:-31px 0 0 -31px}
.yt-lite:hover .yt-play,.yt-lite:focus-visible .yt-play{transform:scale(1.1);background:rgba(14,105,147,.85)}
.yt-lite:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.yt-len{position:absolute;z-index:1;right:14px;bottom:12px;font:700 .72rem/1 'Lato',sans-serif;letter-spacing:.12em;color:#fff;background:rgba(5,30,45,.6);padding:6px 9px;border-radius:999px}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(22px,3vw,36px)}
.vid-topic{margin-top:clamp(50px,6vw,80px)}
.vid-topic-head{margin-bottom:clamp(20px,2.4vw,30px);max-width:640px}
.vid-topic-head h2{font-size:var(--step-2);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--charcoal);margin-bottom:.3em}
.vid-topic-head p{font-size:.98rem}
.vid-card{background:#fff;border-radius:22px;padding:14px 14px 26px;border:1px solid rgba(14,105,147,.08);box-shadow:0 6px 18px rgba(10,79,112,.05),0 22px 50px rgba(10,79,112,.07)}
.vid-card .yt-lite,.vid-card .yt-frame{border-radius:14px;box-shadow:none}
.vid-body{padding:20px 12px 0}
.vid-body h3{font-size:1.15rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:.5em}
.vid-body p{font-size:.97rem;line-height:1.7}
.vid-sub{text-align:center;margin-top:clamp(50px,6vw,80px)}
.vid-sub p{margin-bottom:1.1em}
@media (max-width:920px){.vid-feature{grid-template-columns:1fr}}

.ab-solo{max-width:860px;margin:0 auto;text-align:center}
.ab-solo .ab-statement .big{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem)}
.ab-art.soft img{-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 52%,transparent 100%);
  animation:abDrift 12s var(--ease-io) infinite alternate}
@media (prefers-reduced-motion:reduce){.ab-art.soft img{animation:none}}

/* every Manifesto quote links to the Manifesto */
.mf-line .mf-src{display:flex;width:max-content;max-width:100%;align-items:center;gap:.45em;margin:.7em auto 0;font:400 .64rem/1 'Lato',sans-serif;font-style:normal;letter-spacing:.28em;text-transform:uppercase;
  color:var(--teal-text);text-decoration:none;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) left 100%/0 1px no-repeat;transition:background-size .45s var(--ease-out),color .3s}
.mf-line .mf-src .arr{letter-spacing:0;transition:transform .4s var(--ease-out)}
.mf-line .mf-src:hover,.mf-line .mf-src:focus-visible{background-size:100% 1px;color:var(--blue);outline:none}
.mf-line .mf-src:hover .arr{transform:translateX(4px)}
.cta-close a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) left 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease-out)}
.cta-close a:hover,.cta-close a:focus-visible{background-size:100% 1px;outline:none}
.mf-read{display:inline-flex;align-items:center;gap:.5em;margin-top:1.6em;font:700 .74rem/1 'Lato',sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--blue);text-decoration:none;
  padding:15px 26px;border:1px solid rgba(14,105,147,.35);border-radius:6px;transition:background .3s,color .3s}
.mf-read:hover,.mf-read:focus-visible{background:var(--blue);color:#fff;outline:none}

/* ==================================================================
   HOME: three full-screen water moments (Deseray's concept)
   1. hero with the curl   2. welcome card on the full-bleed wave
   3. stats card on the full-bleed splash
   Image slots (swap in Deseray's originals, same names):
     /assets/img/home-welcome-wave.webp (+ -1400)
     /assets/img/home-stats-splash.webp (+ -1400)
   ================================================================== */
.home .nw-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(110px,14vh,150px) 0 clamp(30px,5vh,56px)}
.home .nw-hero > .container{width:100%}
.home .nw-explore{margin-top:clamp(40px,7vh,80px)}

.home .cr-welcome,.home .stats{min-height:100svh;display:flex;align-items:center;margin:0;overflow:hidden;
  padding:clamp(130px,16vh,170px) 0 clamp(110px,14vh,150px)}
.home .cr-welcome > .container,.home .stats > .container{width:100%}
.home .cr-welcome::before,.home .stats::before{inset:0;-webkit-mask-image:none;mask-image:none;
  background-repeat:no-repeat;background-size:cover}
.home .cr-welcome::before{background-image:url(/assets/img/home-welcome-wave.webp?v=20261017);background-position:center 70%}
.home .stats::before{background-image:url(/assets/img/home-stats-splash.webp?v=20261017);background-position:center 55%}
/* soft white edges so each water moment breathes into the white sections around it */
.home .cr-welcome::after,.home .stats::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,#fff 100%)}
.home .cr-welcome .container,.home .stats .container{position:relative;z-index:1}
.home .cr-welcome .welcome-card{max-width:1120px;grid-template-columns:1.05fr .95fr;gap:clamp(36px,4.5vw,64px);padding:clamp(40px,4.4vw,64px) clamp(36px,4.6vw,68px);border-radius:6px;box-shadow:0 40px 90px rgba(8,50,80,.28)}
.home .stats-nums{max-width:1100px;padding:clamp(48px,5.5vw,80px) clamp(24px,3vw,52px);border-radius:6px;box-shadow:0 40px 90px rgba(8,40,90,.32)}
.home .services,.home .why{padding:clamp(120px,12vw,170px) 0}
.home .partners{padding:clamp(100px,10vw,140px) 0}
.home .mf-teaser{padding:clamp(120px,12vw,170px) 0}

/* gentle snap: lands on the three water moments when you scroll near them, never traps you */
@media (min-width:1024px) and (min-height:700px) and (prefers-reduced-motion:no-preference){
  html:has(body.home){scroll-snap-type:y proximity}
  .home .nw-hero,.home .cr-welcome,.home .stats{scroll-snap-align:start}
}
@media (max-width:920px){
  .home .cr-welcome::before{background-image:url(/assets/img/home-welcome-wave-1400.webp?v=20261017)}
  .home .stats::before{background-image:url(/assets/img/home-stats-splash-1400.webp?v=20261017)}
  .home .nw-hero,.home .cr-welcome,.home .stats{min-height:auto}
  .home .cr-welcome,.home .stats{padding:110px 0 100px}
}
.home .cr-welcome .welcome-card h2{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem)}
.home .cr-welcome .welcome-card p{font-size:.96rem;line-height:1.75}
@media (min-width:921px){.home .cr-welcome,.home .stats{padding:clamp(110px,13vh,140px) 0 clamp(60px,8vh,100px)}}

/* home: the Manifesto as a full-bleed painting (same language as the Founder page) */
.home .mf-teaser.mf-immerse{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#fff;
  padding:clamp(120px,14vh,160px) 0 clamp(90px,12vh,140px)}
.mfi-wave{position:absolute;inset:0;background:url(/assets/img/mf-wave-painting.webp?v=20261017) 50% 50%/cover no-repeat;
  transform:scale(1.04);animation:abiSwell 26s var(--ease-io) infinite alternate}
.mf-immerse::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 84%,#fff 100%)}
.mf-immerse .container{position:relative;z-index:1;width:100%}
.mfi-panel{margin-left:auto;max-width:540px;padding:clamp(32px,3.6vw,52px) clamp(30px,3.6vw,52px);border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(12px) saturate(1.05);backdrop-filter:blur(12px) saturate(1.05);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 24px 60px rgba(40,30,90,.14)}
.mfi-panel .eyebrow{display:block}
.mfi-panel h2{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.5rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:.5em 0 .55em;color:#2B2C3A;line-height:1.15}
.mfi-panel p{margin-bottom:1.7em;color:#3A3B45}
@media (min-width:1024px) and (min-height:700px) and (prefers-reduced-motion:no-preference){.home .mf-immerse{scroll-snap-align:start}}
@media (max-width:920px){.home .mf-teaser.mf-immerse{min-height:auto;padding:120px 0 110px}.mfi-panel{margin:0 auto}.mfi-wave{background-position:42% 50%}}
@media (prefers-reduced-motion:reduce){.mfi-wave{animation:none}}

/* hero paragraph squares up to the same edge as WATER on desktop */
@media (min-width:921px){.home .nw-sub{text-align:justify;text-align-last:left;hyphens:none}}