@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --ink:#111821;
  --blue:#2e62ec;
  --blue-dark:#163a9d;
  --cream:#f6f0e5;
  --paper:#fcfaf5;
  --pink:#edd6d1;
  --lilac:#dddced;
  --line:rgba(17,24,33,.16);
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"DM Sans", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
::selection{background:var(--blue);color:#fff}

.page-progress{position:fixed;z-index:200;top:0;left:0;right:0;height:3px}
.page-progress span{display:block;height:100%;width:0;background:var(--blue)}

.site-header{
  height:78px;position:fixed;z-index:100;top:0;left:0;right:0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 3vw;border-bottom:1px solid var(--line);
  background:rgba(252,250,245,.92);backdrop-filter:blur(14px)
}
.brand img{width:150px}
.desktop-nav{display:flex;gap:34px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.desktop-nav a{position:relative}
.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--ink);transition:.25s}
.desktop-nav a:hover:after{right:0}
.header-cta{
  justify-self:end;background:var(--blue);color:#fff;padding:13px 19px;
  text-transform:uppercase;font-size:10px;letter-spacing:.12em
}
.header-cta span{margin-left:12px}

.hero{
  min-height:100svh;background:var(--cream);
  display:grid;grid-template-columns:1.02fr .98fr;gap:5vw;
  padding:145px 3vw 60px;position:relative;overflow:hidden
}
.hero-copy{align-self:center;position:relative;z-index:3}
.eyebrow,.section-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 28px}
.hero h1{font:clamp(88px,10.5vw,178px)/.77 var(--serif);letter-spacing:-.055em;margin:0}
.hero h1 em{color:var(--blue);font-weight:400}
.hero-intro{max-width:540px;font-size:17px;line-height:1.6;margin:42px 0 0}
.hero-actions{display:flex;align-items:center;gap:26px;margin-top:34px}
.button{padding:16px 22px;text-transform:uppercase;font-size:10px;letter-spacing:.13em;border:1px solid var(--ink)}
.button.primary{background:var(--ink);color:#fff}
.button span{margin-left:18px}
.text-link{font:12px var(--sans);text-transform:uppercase;letter-spacing:.13em;border-bottom:1px solid currentColor;padding-bottom:4px}
.text-link.light{color:#fff}

.hero-visual{position:relative;min-height:650px;align-self:center}
.water-card{
  position:absolute;right:-4vw;top:5%;width:78%;height:78%;overflow:hidden;
  clip-path:polygon(9% 3%,100% 0,92% 94%,0 100%)
}
.water-card img{width:112%;height:112%;object-fit:cover;filter:saturate(.7);transform:translate(var(--water-x,0),var(--water-y,0))}
.mascot-wrap{
  position:absolute;z-index:4;width:63%;aspect-ratio:1;left:3%;top:21%;
  display:grid;place-items:center
}
.mascot{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 25px rgba(0,0,0,.15));transform:rotate(var(--fish-rotate,0deg)) translateY(var(--fish-y,0))}
.mascot-label{
  position:absolute;background:var(--paper);border:1px solid var(--ink);
  border-radius:99px;padding:9px 12px;text-transform:uppercase;
  letter-spacing:.12em;font-size:9px;white-space:nowrap
}
.label-a{top:-1%;right:-14%}.label-b{left:-8%;bottom:20%}.label-c{right:-20%;bottom:3%}
.orbit-ring{position:absolute;border:1px solid rgba(17,24,33,.32);border-radius:50%}
.ring-one{width:68%;aspect-ratio:1;left:4%;top:17%}
.ring-two{width:88%;aspect-ratio:1;left:-7%;top:7%;border-style:dashed;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.bio-rescue{background:var(--lilac);padding:11vh 3vw}
.bio-rescue-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8vh}
.bio-rescue-top h2{font:clamp(62px,7.5vw,118px)/.86 var(--serif);letter-spacing:-.045em;margin:0}
.bio-rescue-top h2 em{color:var(--blue)}
.mini-mascot{width:130px;transform:rotate(8deg)}
.bio-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:18px}
.bad-bio{
  position:relative;background:var(--paper);min-height:500px;padding:70px 60px;
  display:flex;align-items:center;border:1px solid var(--line)
}
.bad-bio blockquote{
  margin:0;font:clamp(29px,3.2vw,50px)/1.24 var(--serif);max-width:820px
}
.quote-mark{position:absolute;top:28px;left:30px;color:var(--blue);font:70px/.8 var(--serif)}
.quote-mark.end{top:auto;left:auto;right:30px;bottom:12px}
.buzzer-panel{
  background:var(--pink);min-height:500px;padding:38px 45px;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end
}
.buzzer{position:absolute;top:36px;right:40px;width:135px;height:105px;border:0;background:transparent;cursor:pointer}
.buzzer-base{position:absolute;left:8px;right:8px;bottom:0;height:38px;background:#17191e;border-radius:50%;box-shadow:0 8px 0 rgba(0,0,0,.18)}
.buzzer-top{position:absolute;z-index:2;width:100px;height:62px;border-radius:50%;background:#e3373f;left:17px;top:7px;box-shadow:inset 0 8px 9px rgba(255,255,255,.28),0 10px 0 #991c22}
.buzzer:active .buzzer-top,.buzzer.is-hit .buzzer-top{transform:translateY(9px);box-shadow:inset 0 5px 8px rgba(255,255,255,.2),0 2px 0 #991c22}
.sound-caption{font-family:monospace;font-size:12px;margin:0 0 18px}
.buzzer-panel h3{font:clamp(45px,5vw,78px)/.9 var(--serif);margin:0}
.before-you-message{color:var(--blue);font-size:11px;text-transform:uppercase;letter-spacing:.15em;margin:20px 0 34px}
.inline-cta{align-self:flex-start;border-bottom:1px solid;padding-bottom:4px;text-transform:uppercase;font-size:10px;letter-spacing:.13em}

.positioning{
  padding:13vh 3vw;background:var(--paper);
  display:grid;grid-template-columns:1.45fr .55fr;gap:8vw;align-items:end
}
.positioning-copy{font:clamp(64px,9vw,150px)/.8 var(--serif);letter-spacing:-.055em}
.positioning-copy p{margin:0}.positioning-copy .blue{color:var(--blue);font-style:italic}
.positioning-side{max-width:360px;font-size:15px;line-height:1.7}

.method{background:var(--cream);padding:11vh 3vw 14vh;overflow:hidden}
.method-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10vh}
.method-heading h2{font:clamp(72px,9vw,145px)/.8 var(--serif);letter-spacing:-.055em;margin:0;text-align:right}
.method-heading h2 em{color:var(--blue)}
.method-track{display:grid;grid-template-columns:repeat(4,minmax(280px,1fr));gap:12px}
.step-card{
  min-height:540px;border:1px solid var(--ink);padding:24px;
  display:flex;flex-direction:column;transition:.35s;background:transparent
}
.step-card:hover{transform:translateY(-12px);background:var(--paper)}
.step-no{font-size:10px;letter-spacing:.16em}
.step-card h3{font:48px/.95 var(--serif);margin:90px 0 25px}
.step-card p{font-size:15px;line-height:1.6}
.step-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:15px;text-transform:uppercase;font-size:9px;letter-spacing:.14em}
.accent-card{background:var(--blue);color:#fff;border-color:var(--blue)}
.accent-card:hover{background:var(--blue-dark)}

.editorial-break{
  min-height:105vh;background:var(--ink);color:#fff;padding:10vh 3vw;
  position:relative;overflow:hidden
}
.editorial-word{position:relative;z-index:3;font:clamp(88px,14vw,220px)/.68 var(--serif);letter-spacing:-.055em}
.editorial-word:nth-child(2){padding-left:14vw}
.editorial-word:nth-child(3){padding-left:31vw}
.editorial-word.outline{color:transparent;-webkit-text-stroke:1px #fff}
.editorial-word.blue{color:#6d8fff;font-style:italic}
.texture-card{
  position:absolute;right:-3vw;bottom:-6vh;width:41vw;height:55vh;margin:0;
  transform:rotate(-5deg);overflow:hidden;opacity:.72
}
.texture-card img{width:112%;height:112%;object-fit:cover}
.break-fish{position:absolute;z-index:4;width:190px;left:8vw;bottom:7vh;filter:brightness(1.2)}

.rewrite{padding:11vh 3vw 14vh;background:var(--paper)}
.rewrite-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:7vh}
.rewrite-heading h2{font:clamp(64px,8vw,130px)/.82 var(--serif);letter-spacing:-.05em;margin:0;text-align:right}
.rewrite-heading h2 em{color:var(--blue)}
.compare{height:min(70vh,680px);position:relative;overflow:hidden;border:1px solid var(--ink);--split:50%}
.compare-side{position:absolute;inset:0;padding:38px;display:flex;flex-direction:column;justify-content:space-between}
.compare-side span{font-size:10px;letter-spacing:.16em}
.compare-side blockquote{margin:0;max-width:1000px;font:clamp(43px,6vw,92px)/.98 var(--serif);letter-spacing:-.035em}
.compare-before{background:var(--pink)}
.compare-after{background:var(--blue);color:#fff;clip-path:inset(0 0 0 var(--split))}
.compare-handle{position:absolute;z-index:3;top:0;bottom:0;left:var(--split);width:38px;transform:translateX(-50%);border:0;background:transparent;cursor:ew-resize}
.compare-handle:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--ink)}
.compare-handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:62px;background:var(--paper);border:1px solid var(--ink);border-radius:99px;display:grid;place-items:center;font-style:normal}

.people{padding:12vh 3vw;background:var(--lilac)}
.people-heading{display:grid;grid-template-columns:.8fr 1.6fr .8fr;gap:35px;align-items:end;margin-bottom:9vh}
.people-heading h2{font:clamp(58px,7vw,110px)/.86 var(--serif);letter-spacing:-.045em;margin:0}
.people-intro{font-size:14px;line-height:1.65;margin:0}
.people-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:14px;align-items:end}
.person-card{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.person-image{height:54vh;overflow:hidden}.person-card.large .person-image{height:68vh}
.person-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:.6s}
.person-card:hover img{transform:scale(1.025);filter:saturate(1)}
.person-meta{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.person-meta h3{font:32px var(--serif);margin:0}.person-meta p{font-size:9px;text-transform:uppercase;letter-spacing:.13em;margin:3px 0 0}.person-meta>span{font-size:9px}
.person-hover{position:absolute;left:0;right:0;bottom:0;background:var(--blue);color:#fff;padding:24px;font:25px/1.15 var(--serif);transform:translateY(101%);transition:.45s cubic-bezier(.76,0,.24,1)}
.person-card:hover .person-hover{transform:none}

.mascot-section{
  min-height:88vh;background:#0f1720;color:#fff;padding:11vh 3vw;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden
}
.mascot-copy h2{font:clamp(65px,8vw,125px)/.84 var(--serif);letter-spacing:-.05em;margin:0 0 35px}
.mascot-copy>p:not(.section-tag){max-width:520px;font-size:16px;line-height:1.65;margin-bottom:32px}
.mascot-stage{position:relative;height:620px;display:grid;place-items:center}
.mascot-stage>img{width:min(500px,80%);filter:brightness(1.15);animation:floatfish 6s ease-in-out infinite}
@keyframes floatfish{50%{transform:translateY(-17px) rotate(2deg)}}
.bubble{position:absolute;border:1px solid rgba(255,255,255,.75);border-radius:99px;padding:10px 13px;text-transform:uppercase;font-size:9px;letter-spacing:.14em;background:#0f1720}
.bubble-1{left:3%;top:20%}.bubble-2{right:2%;top:44%}.bubble-3{left:13%;bottom:13%;color:#8ea8ff}

.join{padding:12vh 3vw;background:var(--pink);display:grid;grid-template-columns:1.05fr .95fr;gap:10vw}
.join-copy h2{font:clamp(80px,10vw,160px)/.75 var(--serif);letter-spacing:-.055em;margin:10vh 0 45px}
.join-copy h2 em{color:var(--blue)}
.join-copy>p:last-child{max-width:520px;font-size:16px;line-height:1.65}
.join-form{padding-top:3vh}
.join-form label{display:block;padding:18px 0;border-bottom:1px solid var(--ink)}
.join-form label span{display:block;font-size:9px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px}
.join-form input,.join-form select{width:100%;background:transparent;border:0;outline:0;font:33px var(--serif);color:var(--ink)}
.join-form input::placeholder{color:rgba(17,24,33,.45)}
.join-form button{width:100%;margin-top:34px;padding:20px 22px;border:1px solid var(--ink);background:var(--ink);color:#fff;display:flex;justify-content:space-between;text-transform:uppercase;font-size:10px;letter-spacing:.14em;cursor:pointer;transition:.25s}
.join-form button:hover{background:var(--blue);border-color:var(--blue)}
.form-success{opacity:0;transform:translateY(8px);transition:.35s;font:28px var(--serif)}
.join-form.sent .form-success{opacity:1;transform:none}

footer{min-height:220px;padding:40px 3vw;background:var(--paper);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end}
footer img{width:180px}footer>p{text-align:center;font:italic 26px var(--serif);margin:0}.footer-links{justify-self:end;display:flex;gap:25px;font-size:9px;letter-spacing:.13em;text-transform:uppercase}

@media(max-width:1000px){
  .desktop-nav{display:none}.site-header{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:125px}
  .hero h1{font-size:21vw}.hero-visual{min-height:620px;margin-top:40px}
  .bio-grid,.positioning,.mascot-section,.join{grid-template-columns:1fr}
  .method-track{overflow-x:auto;grid-template-columns:repeat(4,78vw);padding-bottom:18px}
  .people-heading{grid-template-columns:1fr}.people-grid{grid-template-columns:1fr}.person-image,.person-card.large .person-image{height:72vh}
  .mascot-stage{height:520px}
}
@media(max-width:650px){
  .site-header{height:68px}.brand img{width:125px}.header-cta{font-size:9px;padding:11px 13px}
  .hero{padding:110px 5vw 55px}.hero h1{font-size:22vw;line-height:.8}.hero-intro{font-size:15px}.hero-actions{align-items:flex-start;flex-direction:column}
  .hero-visual{min-height:470px}.water-card{width:95%;right:-20%;height:72%}.mascot-wrap{width:78%;left:-4%;top:18%}.mascot-label{font-size:7px}.label-c{right:-7%}
  .bio-rescue,.method,.rewrite,.people,.join{padding-left:5vw;padding-right:5vw}
  .bio-rescue-top{align-items:flex-start}.mini-mascot{width:80px}.bio-rescue-top h2{font-size:16vw}
  .bio-grid{gap:10px}.bad-bio,.buzzer-panel{min-height:430px;padding:45px 28px}.bad-bio blockquote{font-size:8vw}.buzzer{width:105px;height:85px;right:23px}.buzzer-top{width:78px;height:50px;left:13px}.buzzer-panel h3{font-size:13vw}
  .positioning{padding:11vh 5vw}.positioning-copy{font-size:15vw}.positioning-side{margin-top:50px}
  .method-heading{display:block}.method-heading h2{text-align:left;font-size:18vw;margin-top:35px}.method-track{grid-template-columns:repeat(4,85vw)}
  .editorial-break{padding-left:5vw;padding-right:5vw;min-height:760px}.editorial-word{font-size:22vw}.editorial-word:nth-child(2),.editorial-word:nth-child(3){padding-left:0}.texture-card{width:75vw;height:35vh}.break-fish{width:120px;left:5vw}
  .rewrite-heading{display:block}.rewrite-heading h2{text-align:left;font-size:16vw;margin-top:30px}.compare{height:580px}.compare-side{padding:24px}.compare-side blockquote{font-size:11vw}
  .people-heading h2{font-size:15vw}.people-grid{gap:10px}.person-image,.person-card.large .person-image{height:65vh}
  .mascot-section{padding:10vh 5vw}.mascot-copy h2{font-size:16vw}.mascot-stage{height:410px}
  .join{padding:10vh 5vw}.join-copy h2{font-size:21vw}.join-form input,.join-form select{font-size:27px}
  footer{grid-template-columns:1fr;gap:25px;padding:35px 5vw}footer>p{text-align:left}.footer-links{justify-self:start;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* =========================================================
   LARGE-FORM TEXTURE SYSTEM
   The *_texture files are treated as materials, not pictures.
   ========================================================= */

.hero,
.bio-rescue,
.positioning,
.method,
.rewrite,
.people,
.join,
.mascot-section,
.editorial-break{
  isolation:isolate;
}

.hero::before,
.bio-rescue::before,
.positioning::before,
.method::before,
.rewrite::before,
.people::before,
.join::before,
.mascot-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* paper / water material under the opening */
.hero::before{
  background-image:url("/assets/stillwater_texture.jpg");
  opacity:.11;
  mix-blend-mode:multiply;
  background-attachment:fixed;
  transform:scale(1.035);
}

/* pale, broad water grain under the bio intervention */
.bio-rescue{
  position:relative;
}
.bio-rescue::before{
  background-image:url("/assets/waterwave_texture.jpg");
  opacity:.12;
  mix-blend-mode:screen;
  filter:saturate(.35) contrast(.9);
  background-attachment:fixed;
}

/* thin grain across the editorial statement */
.positioning{
  position:relative;
}
.positioning::before{
  background-image:url("/assets/starsfull_texture.jpg");
  opacity:.035;
  mix-blend-mode:multiply;
  background-position:50% 35%;
}

/* the process section gets a soft fixed star/water texture,
   almost like printed stock */
.method{
  position:relative;
}
.method::before{
  background-image:url("/assets/stillwater_texture.jpg");
  opacity:.07;
  mix-blend-mode:multiply;
  background-attachment:fixed;
  filter:grayscale(.25);
}

/* comparison section uses the wave image as a full bleed layer */
.rewrite{
  position:relative;
}
.rewrite::before{
  background-image:url("/assets/waterwave_texture.jpg");
  opacity:.065;
  mix-blend-mode:multiply;
  background-position:50% 20%;
  background-size:120% auto;
}

/* people section gets barely-there night texture */
.people{
  position:relative;
}
.people::before{
  background-image:url("/assets/starrysky_texture.jpg");
  opacity:.055;
  mix-blend-mode:multiply;
  background-attachment:fixed;
}

/* deeper section: texture acts as light rather than a photo */
.mascot-section{
  position:relative;
}
.mascot-section::before{
  background-image:url("/assets/starsfull_texture.jpg");
  opacity:.17;
  mix-blend-mode:screen;
  background-position:center;
}

/* final conversion area uses a large pink-tinted wave */
.join{
  position:relative;
  overflow:hidden;
}
.join::before{
  background-image:url("/assets/waterwave_texture.jpg");
  opacity:.11;
  mix-blend-mode:screen;
  background-position:75% center;
  background-size:cover;
}

/* extra print-like surface veil over lighter sections */
.bio-rescue::after,
.method::after,
.people::after,
.join::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:url("/assets/starsfull_texture.jpg");
  background-size:cover;
  opacity:.018;
  mix-blend-mode:multiply;
}


/* =========================================================
   CATFISH SCROLL JOURNEY
   ========================================================= */

.journey-mascot{
  position:absolute;
  z-index:10;
  pointer-events:none;
  opacity:0;
  transform:translateY(30px) rotate(-3deg);
  transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}

.journey-mascot.is-visible{
  opacity:1;
  transform:translateY(0) rotate(0deg);
}

.journey-mascot img{
  width:150px;
  filter:drop-shadow(0 12px 16px rgba(10,20,35,.12));
}

.fish-speech{
  position:absolute;
  min-width:220px;
  max-width:290px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--ink);
  border-radius:52% 48% 50% 46% / 50% 52% 44% 50%;
  padding:18px 22px;
  font:20px/1.05 var(--serif);
  box-shadow:0 8px 0 rgba(17,24,33,.05);
  transform:rotate(-2deg);
}

.fish-speech strong{
  color:var(--blue);
  font-weight:400;
}

.fish-speech span{
  display:inline-block;
  margin-top:6px;
  font-family:var(--sans);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.fish-speech-right{
  left:120px;
  top:-55px;
}

.fish-speech-left{
  right:120px;
  top:-55px;
  text-align:right;
}

.fish-speech-right::after,
.fish-speech-left::after,
.mascot-main-speech::after{
  content:"";
  position:absolute;
  width:25px;
  height:25px;
  background:var(--paper);
  border-bottom:1px solid var(--ink);
  border-right:1px solid var(--ink);
}

.fish-speech-right::after{
  left:4px;
  bottom:-10px;
  transform:rotate(45deg) skew(8deg,8deg);
}

.fish-speech-left::after{
  right:5px;
  bottom:-10px;
  transform:rotate(45deg) skew(8deg,8deg);
}

.bio-grid{
  position:relative;
}
.bio-mascot{
  right:3vw;
  top:-95px;
}
.bio-mascot img{
  transform:rotate(-8deg);
}

.method{
  overflow:visible;
}
.method-mascot{
  left:2.8vw;
  top:30vh;
}
.method-mascot img{
  transform:rotate(5deg);
}
.method-mascot .fish-speech{
  min-width:250px;
}

.rewrite-mascot{
  right:4vw;
  top:9vh;
}
.rewrite-mascot img{
  transform:rotate(-7deg);
}

.mascot-main-speech{
  top:8%;
  left:-7%;
  min-width:255px;
  text-align:left;
  transform:rotate(-4deg);
}
.mascot-main-speech::after{
  left:44%;
  bottom:-11px;
  transform:rotate(45deg);
}

.join-mascot{
  right:4vw;
  top:5vh;
}
.join-mascot img{
  width:135px;
  transform:rotate(8deg);
}

.bio-mascot,
.method-mascot,
.rewrite-mascot,
.join-mascot{
  animation:journeyFloat 5s ease-in-out infinite;
}

@keyframes journeyFloat{
  0%,100%{margin-top:0}
  50%{margin-top:-10px}
}

/* make the hero mascot itself feel like it is addressing the visitor */
.mascot-wrap::after{
  content:"I'm not here to judge. I'm here to get you dates.";
  position:absolute;
  right:-8%;
  top:-13%;
  width:205px;
  padding:17px 18px;
  background:var(--paper);
  border:1px solid var(--ink);
  border-radius:50%;
  color:var(--ink);
  font:19px/1.05 var(--serif);
  text-align:center;
  transform:rotate(5deg);
  box-shadow:0 8px 0 rgba(17,24,33,.04);
}

@media(max-width:1000px){
  .bio-mascot{right:8vw;top:-70px}
  .method-mascot{position:relative;left:auto;top:auto;margin:0 0 55px 12vw;width:160px}
  .rewrite-mascot{right:9vw;top:4vh}
  .join-mascot{right:8vw}
  .mascot-wrap::after{right:-2%;top:-20%;width:190px}
}

@media(max-width:650px){
  .journey-mascot img{width:95px}
  .fish-speech{min-width:165px;max-width:185px;padding:13px 15px;font-size:16px}
  .fish-speech-right{left:74px;top:-42px}
  .fish-speech-left{right:73px;top:-42px}
  .bio-mascot{right:5vw;top:-40px}
  .method-mascot{margin-left:7vw;margin-bottom:45px}
  .rewrite-mascot{right:4vw;top:3vh}
  .join-mascot{right:4vw;top:3vh}
  .mascot-main-speech{left:-2%;top:-8%;min-width:190px}
  .mascot-wrap::after{
    right:-7%;
    top:-27%;
    width:155px;
    padding:13px;
    font-size:15px;
  }
  .hero::before,
  .bio-rescue::before,
  .method::before,
  .people::before{
    background-attachment:scroll;
  }
}


/* =========================================================
   CLEAN RECOMPILE — HERO FIRST, TEXTURES AS MATERIALS ONLY
   ========================================================= */

.hero-impact{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:120px 5vw 70px;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(rgba(8,20,42,.25), rgba(8,20,42,.62)),
    url("/assets/waterwave_texture.jpg") center 52% / cover no-repeat;
  isolation:isolate;
}

.hero-impact::before{
  content:"";
  position:absolute;
  inset:-5%;
  z-index:-2;
  background:url("/assets/stillwater_texture.jpg") center / cover no-repeat;
  opacity:.28;
  mix-blend-mode:screen;
  transform:scale(1.05);
}

.hero-impact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 78% 28%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(90deg, rgba(11,21,36,.72) 0%, rgba(11,21,36,.38) 48%, rgba(11,21,36,.18) 100%);
}

.hero-impact-copy{
  width:min(980px,88vw);
  position:relative;
  z-index:2;
}

.hero-impact-kicker{
  margin:0 0 34px;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.18em;
}

.hero-impact blockquote{
  margin:0;
  max-width:920px;
  font:clamp(46px,7vw,108px)/.9 var(--serif);
  letter-spacing:-.04em;
  text-wrap:balance;
}

.hero-impact-response{
  display:flex;
  align-items:flex-start;
  gap:24px;
  margin-top:38px;
  max-width:740px;
}

.hero-impact-response span{
  flex:0 0 auto;
  font:italic 42px/1 var(--serif);
  color:#f4d5d2;
}

.hero-impact-response p{
  margin:2px 0 0;
  max-width:600px;
  font-size:16px;
  line-height:1.5;
}

.hero-impact-cta{
  display:inline-flex;
  align-items:center;
  gap:18px;
  margin-top:34px;
  padding:15px 20px;
  border:1px solid rgba(255,255,255,.75);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:10px;
  transition:.25s ease;
}
.hero-impact-cta:hover{
  background:#fff;
  color:var(--ink);
}

/* Texture images should no longer read as pictures. */
.texture-card,
.water-card,
.signal-image{
  display:none !important;
}

/* Kill all scroll-journey fish speech UI. */
.journey-mascot,
.fish-speech,
.mascot-wrap::after,
.bubble{
  display:none !important;
}

/* Keep the catfish as a clean visual mascot only. */
.mascot-stage{
  height:620px;
  display:grid;
  place-items:center;
}
.mascot-stage>img{
  width:min(520px,82%);
  filter:brightness(1.12) drop-shadow(0 28px 36px rgba(0,0,0,.18));
  animation:floatfish 6s ease-in-out infinite;
}

/* Texture-first treatment throughout the rest of the page. */
.positioning{
  background-color:var(--paper);
}
.positioning::before{
  background-image:url("/assets/starsfull_texture.jpg");
  opacity:.045;
  mix-blend-mode:multiply;
  background-size:cover;
}

.method{
  background-color:var(--cream);
}
.method::before{
  background-image:url("/assets/stillwater_texture.jpg");
  opacity:.10;
  mix-blend-mode:multiply;
  background-size:cover;
  background-position:center;
}

.editorial-break{
  background:
    linear-gradient(rgba(15,23,32,.78), rgba(15,23,32,.78)),
    url("/assets/starrysky_texture.jpg") center / cover no-repeat;
}

.rewrite{
  background-color:var(--paper);
}
.rewrite::before{
  background-image:url("/assets/waterwave_texture.jpg");
  opacity:.075;
  mix-blend-mode:multiply;
  background-size:cover;
  background-position:center;
}

.people{
  background-color:var(--lilac);
}
.people::before{
  background-image:url("/assets/starsfull_texture.jpg");
  opacity:.055;
  mix-blend-mode:multiply;
  background-size:cover;
}

.mascot-section{
  background:
    linear-gradient(rgba(10,18,28,.72), rgba(10,18,28,.78)),
    url("/assets/starrysky_texture.jpg") center / cover no-repeat;
}

.join{
  background-color:var(--pink);
}
.join::before{
  background-image:url("/assets/waterwave_texture.jpg");
  opacity:.11;
  mix-blend-mode:screen;
  background-size:cover;
  background-position:center;
}

/* Keep nav legible over the photo-first hero. */
.site-header{
  background:rgba(252,250,245,.90);
}

@media(max-width:650px){
  .hero-impact{
    min-height:92svh;
    padding:110px 5vw 55px;
    background-position:62% center;
  }
  .hero-impact-copy{width:100%}
  .hero-impact blockquote{
    font-size:11vw;
    line-height:.98;
  }
  .hero-impact-response{
    flex-direction:column;
    gap:8px;
  }
  .hero-impact-response span{font-size:34px}
  .hero-impact-response p{font-size:14px}
}


/* =========================================================
   HERO POLISH + LOVE GAME
   ========================================================= */

.hero-impact{
  display:block;
}

.hero-impact-inner{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:5vw;
  align-items:center;
}

.hero-impact-copy{
  width:100%;
  max-width:none;
}

.hero-impact blockquote{
  max-width:880px;
  font-size:clamp(42px,5.8vw,88px);
  line-height:.95;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.hero-impact-response{
  max-width:700px;
}

.hero-impact-fish{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:480px;
  position:relative;
}

.hero-impact-fish img{
  width:min(520px,95%);
  filter:drop-shadow(0 32px 46px rgba(0,0,0,.22));
  transform:rotate(-6deg);
  animation:heroFishFloat 6s ease-in-out infinite;
}

@keyframes heroFishFloat{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-16px) rotate(-3deg)}
}

/* Slightly tighten oversized editorial headings across sections */
.positioning-copy{
  font-size:clamp(58px,8vw,128px);
  line-height:.84;
}

.method-heading h2{
  font-size:clamp(66px,8vw,124px);
  line-height:.84;
}

.editorial-word{
  font-size:clamp(78px,12vw,180px);
  line-height:.72;
}

.rewrite-heading h2{
  font-size:clamp(58px,7vw,112px);
  line-height:.86;
}

.people-heading h2{
  font-size:clamp(54px,6.3vw,96px);
  line-height:.9;
}

.mascot-copy h2{
  font-size:clamp(58px,7vw,105px);
  line-height:.88;
}

.join-copy h2{
  font-size:clamp(72px,9vw,136px);
  line-height:.79;
}


/* =========================================================
   LOVE GAME
   ========================================================= */

.love-game-section{
  position:relative;
  padding:11vh 3vw 12vh;
  background:var(--cream);
  overflow:hidden;
}

.love-game-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("/assets/stillwater_texture.jpg") center / cover no-repeat;
  opacity:.08;
  mix-blend-mode:multiply;
  pointer-events:none;
}

.love-game-copy,
.love-game,
.love-game-footer{
  position:relative;
  z-index:2;
}

.love-game-copy{
  display:grid;
  grid-template-columns:.7fr 1.6fr .7fr;
  gap:30px;
  align-items:end;
  margin-bottom:7vh;
}

.love-game-copy h2{
  margin:0;
  font:clamp(54px,6.6vw,104px)/.9 var(--serif);
  letter-spacing:-.045em;
}

.love-game-copy>p:last-child{
  margin:0;
  font:italic 26px/1.15 var(--serif);
  text-align:right;
}

.love-game{
  height:min(68vh,650px);
  min-height:480px;
  position:relative;
  border:1px solid var(--ink);
  background:
    linear-gradient(rgba(255,255,255,.46),rgba(255,255,255,.46)),
    url("/assets/starsfull_texture.jpg") center / cover no-repeat;
  overflow:hidden;
  cursor:crosshair;
}

.love-target{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:170px;
  height:170px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font:italic 52px/1 var(--serif);
  box-shadow:0 18px 45px rgba(46,98,236,.25);
  user-select:none;
  transition:left .12s ease-out, top .12s ease-out, transform .18s ease;
  will-change:left,top,transform;
}

.love-target::after{
  content:"♥";
  position:absolute;
  right:-15px;
  top:-18px;
  font:26px var(--serif);
  color:var(--ink);
  transform:rotate(14deg);
}

.love-target.is-fleeing{
  transform:translate(-50%,-50%) rotate(var(--love-tilt,0deg)) scale(.97);
}

.love-game-note{
  position:absolute;
  right:24px;
  bottom:20px;
  font:italic 20px var(--serif);
  opacity:.45;
}

.love-game-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:24px;
}

.love-game-footer p{
  margin:0;
  font:28px var(--serif);
}

@media(max-width:1000px){
  .hero-impact-inner{
    grid-template-columns:1fr;
  }
  .hero-impact-fish{
    min-height:320px;
    margin-top:-20px;
  }
  .hero-impact-fish img{
    width:min(390px,72%);
  }
  .love-game-copy{
    grid-template-columns:1fr;
  }
  .love-game-copy>p:last-child{
    text-align:left;
  }
}

@media(max-width:650px){
  .hero-impact{
    min-height:auto;
  }
  .hero-impact-inner{
    gap:18px;
  }
  .hero-impact blockquote{
    font-size:10vw;
    line-height:1;
  }
  .hero-impact-fish{
    min-height:240px;
  }
  .hero-impact-fish img{
    width:min(280px,72%);
  }

  .love-game-section{
    padding:9vh 5vw;
  }
  .love-game-copy h2{
    font-size:15vw;
  }
  .love-game{
    min-height:430px;
    height:58vh;
  }
  .love-target{
    width:130px;
    height:130px;
    font-size:40px;
  }
  .love-game-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
  }
}