:root{
    --abyss:#06201E;
    --deep:#0A2C29;
    --tide:#123F3B;
    --tide-2:#19514B;
    --foam:#EEF2EC;
    --foam-dim:#DDE6DF;
    --sage:#9FB6A9;
    --ink:#15211F;
    --stone:#586862;
    --kelp:#CB9C44;
    --kelp-deep:#B0832F;
    --kelp-soft:rgba(203,156,68,.16);
    --line-dark:rgba(159,182,169,.22);
    --line-light:rgba(21,33,31,.14);
    --maxw:1180px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--foam);
    color:var(--ink);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-size:clamp(1rem,.55vw + .9rem,1.12rem);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--kelp);color:var(--abyss)}
  a{color:inherit;text-decoration:none}
  img{max-width:100%}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.4rem,4vw,3.5rem)}

  .eyebrow{
    font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;
    font-weight:600;color:var(--kelp);display:inline-flex;align-items:center;gap:.6em;
  }
  .eyebrow::before{content:"";width:1.8em;height:1px;background:var(--kelp);opacity:.7}

  h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:380;line-height:1.02;letter-spacing:-.015em}
  .lead{font-family:"Fraunces",Georgia,serif;font-weight:330;font-size:clamp(1.3rem,1.4vw + 1rem,1.85rem);line-height:1.4;letter-spacing:-.01em}

  /* ---------- focus ---------- */
  a:focus-visible,button:focus-visible{outline:2px solid var(--kelp);outline-offset:4px;border-radius:2px}

  .skip{
    position:absolute;left:1rem;top:-100%;z-index:80;
    background:var(--kelp);color:var(--abyss);font-weight:600;font-size:.9rem;
    padding:.7rem 1.2rem;border-radius:0 0 4px 4px;transition:top .2s ease;
  }
  .skip:focus{top:0}

  /* ---------- nav ---------- */
  .nav{
    position:fixed;inset:0 0 auto 0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.15rem clamp(1.4rem,4vw,3.5rem);
    transition:padding .4s ease;
  }
  /* The nav's background and blur live on a pseudo-element, NOT on .nav itself.
     backdrop-filter makes an element the containing block for position:fixed
     descendants - and the mobile menu panel is a fixed child of .nav. With the
     filter on .nav, the panel sized itself to the ~73px bar instead of the
     viewport, so its vertically-centred links overflowed off the top of the
     screen. Keeping the filter one level down fixes that and keeps the blur. */
  .nav::before{
    content:"";position:absolute;inset:0;z-index:-1;
    transition:background .4s ease,backdrop-filter .4s ease;
  }
  .nav.scrolled::before{background:rgba(8,32,30,.82);backdrop-filter:blur(10px)}
  .nav.scrolled{padding-top:.85rem;padding-bottom:.85rem}
  .brand{font-family:"Fraunces",Georgia,serif;font-size:1.32rem;font-weight:420;letter-spacing:-.01em;color:var(--foam);display:flex;align-items:center;gap:.55rem}
  .brand .dot{width:.48rem;height:.48rem;border-radius:50%;background:var(--kelp);box-shadow:0 0 0 4px rgba(203,156,68,.22)}
  .nav-links{display:flex;gap:2rem;align-items:center}
  .nav-links a{font-size:.86rem;color:var(--foam);opacity:.8;transition:opacity .25s}
  .nav-links a:hover{opacity:1}
  .nav-cta{border:1px solid rgba(238,242,236,.35);padding:.5rem 1.1rem;border-radius:100px;opacity:1!important;transition:background .25s,border-color .25s}
  .nav-cta:hover{background:var(--kelp);border-color:var(--kelp);color:var(--abyss)!important}
  .menu-btn{display:none}

  /* ---------- hero ---------- */
  .hero{
    position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(120,170,150,.18), transparent 55%),
      linear-gradient(180deg, var(--tide) 0%, var(--deep) 42%, var(--abyss) 100%);
    color:var(--foam);overflow:hidden;
  }
  .hero-kelp{position:absolute;inset:auto 0 0 0;height:70%;width:100%;z-index:1;pointer-events:none}
  .frond{transform-origin:bottom center;animation:sway 9s ease-in-out infinite;will-change:transform}
  @keyframes sway{
    0%{transform:rotate(-2.2deg) translate(0,0) scale(1)}
    25%{transform:rotate(.4deg) translate(1.5px,-3px) scale(1.012)}
    50%{transform:rotate(2.6deg) translate(3px,-1px) scale(1.02)}
    75%{transform:rotate(.6deg) translate(1px,-4px) scale(1.01)}
    100%{transform:rotate(-2.2deg) translate(0,0) scale(1)}
  }
  /* back layer: darker, slower, smaller amplitude - reads as further away */
  g[fill="url(#kg2)"] > .frond{animation-name:swayBack}
  @keyframes swayBack{
    0%{transform:rotate(-1.1deg) translate(0,0) scale(1)}
    50%{transform:rotate(1.3deg) translate(1.2px,-1.4px) scale(1.008)}
    100%{transform:rotate(-1.1deg) translate(0,0) scale(1)}
  }

  /* light shafts: soft god-rays behind the fronds, in front of the background */
  .hero-shafts{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .shaft{
    position:absolute;top:-30%;width:22vw;height:170%;
    background:radial-gradient(ellipse 55% 145% at 50% 0%, var(--foam), transparent 70%);
    opacity:.05;will-change:transform,opacity;
    animation:shaftDrift 26s ease-in-out infinite;
  }
  .shaft.s1{left:6%;--rot:-15deg;animation-duration:24s}
  .shaft.s2{left:36%;--rot:-9deg;animation-duration:31s;animation-delay:-9s}
  .shaft.s3{left:63%;--rot:-19deg;animation-duration:27s;animation-delay:-16s}
  .shaft.s4{left:84%;--rot:-7deg;animation-duration:34s;animation-delay:-22s}
  @keyframes shaftDrift{
    0%{transform:rotate(var(--rot)) translateX(0);opacity:.035}
    50%{transform:rotate(var(--rot)) translateX(2.6vw);opacity:.09}
    100%{transform:rotate(var(--rot)) translateX(0);opacity:.035}
  }

  /* rising particles: suspended sediment drifting up through the water column */
  .hero-particles{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
  .mote{
    position:absolute;bottom:-4%;left:var(--l);width:var(--sz);height:var(--sz);
    border-radius:50%;background:var(--foam);opacity:0;pointer-events:none;
    will-change:transform,opacity;
    animation:riseMote var(--dur) linear infinite;animation-delay:var(--del);
  }
  @keyframes riseMote{
    0%{transform:translate(0,0) scale(.8);opacity:0}
    12%{opacity:var(--op)}
    50%{transform:translate(var(--wx),-55vh) scale(1)}
    88%{opacity:var(--op)}
    100%{transform:translate(calc(var(--wx) * -1),-112vh) scale(.8);opacity:0}
  }

  .hero-veil{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(6,32,30,.1) 0%,transparent 30%,rgba(6,32,30,.55) 100%);pointer-events:none}

  .hero-inner{position:relative;z-index:3;padding-bottom:clamp(3.5rem,9vh,7rem);padding-top:8rem}
  .hero h1{font-size:clamp(3rem,9.5vw,7rem);font-weight:340;margin:1.4rem 0 0;max-width:14ch}
  .hero h1 em{font-style:italic;color:var(--kelp);font-weight:330}
  .hero p{margin-top:1.8rem;max-width:46ch;color:var(--foam);opacity:.86;font-size:clamp(1.05rem,.6vw + .95rem,1.25rem)}
  .hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem}

  .btn{display:inline-flex;align-items:center;gap:.6em;font-weight:500;font-size:.95rem;padding:.92rem 1.6rem;border-radius:100px;transition:transform .25s ease,background .25s,color .25s,border-color .25s;will-change:transform}
  .btn:hover{transform:translateY(-2px)}
  .btn-solid{background:var(--kelp);color:var(--abyss)}
  .btn-solid:hover{background:#dcae54}
  .btn-ghost{border:1px solid rgba(238,242,236,.35);color:var(--foam)}
  .btn-ghost:hover{border-color:var(--foam)}
  .btn .arr{transition:transform .25s}
  .btn:hover .arr{transform:translateX(3px)}

  .scrollhint{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:3;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage);display:flex;flex-direction:column;align-items:center;gap:.5rem}
  .scrollhint .bar{width:1px;height:34px;background:linear-gradient(var(--kelp),transparent);animation:drip 2.4s ease-in-out infinite}
  @keyframes drip{0%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.4}}

  /* ---------- generic section ---------- */
  section{padding:clamp(5rem,11vh,9rem) 0}
  .sec-head{max-width:24ch}
  .sec-head h2{font-size:clamp(2.1rem,4.6vw,3.5rem);margin-top:1.1rem}
  .sec-dark{background:var(--deep);color:var(--foam)}
  .sec-dark .lead,.sec-dark p{color:var(--foam)}
  .sec-dark .muted{color:var(--sage)}
  .muted{color:var(--stone)}

  /* ---------- the gap / ledger ---------- */
  .gap-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start;margin-top:.5rem}
  .gap-grid p + p{margin-top:1.2rem}
  .ledger{margin-top:3.5rem;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-light)}
  .ledger .cell{padding:1.8rem 1.6rem 0 0}
  .ledger .cell + .cell{padding-left:1.6rem;border-left:1px solid var(--line-light)}
  .ledger .fig{font-family:"Fraunces",Georgia,serif;font-weight:360;font-size:clamp(2.6rem,5vw,3.8rem);color:var(--kelp-deep);line-height:1;letter-spacing:-.02em}
  .ledger .lbl{margin-top:.7rem;font-size:.84rem;color:var(--stone);line-height:1.45}

  /* ---------- environmental ---------- */
  .env-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:end}
  .benefits{margin-top:4rem;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
  .benefit{background:var(--deep);padding:clamp(1.8rem,3vw,2.6rem)}
  .benefit .tag{font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--kelp);font-weight:600}
  .benefit h3{font-size:1.5rem;margin:.9rem 0 .7rem;font-weight:400;color:var(--foam)}
  .benefit p{font-size:.98rem;color:var(--sage);line-height:1.6}

  /* ---------- sea to soil loop ---------- */
  .loop{margin-top:3.5rem;position:relative}
  .loop-track{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative}
  .loop-track::before{content:"";position:absolute;top:1.15rem;left:8%;right:8%;height:1px;background:linear-gradient(90deg,var(--kelp),var(--kelp) 70%,transparent);opacity:.5}
  .step{position:relative}
  .step .num{position:relative;z-index:2;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--foam);border:1px solid var(--kelp);color:var(--kelp-deep);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;font-family:"Fraunces",Georgia,serif}
  .step h3{font-size:1.22rem;font-weight:450;margin:1.2rem 0 .5rem}
  .step p{font-size:.95rem;color:var(--stone)}
  .trials{margin-top:3.8rem;border-left:2px solid var(--kelp);padding:.2rem 0 .2rem 1.6rem;max-width:60ch}
  .trials .lead{font-size:clamp(1.2rem,1.4vw + .9rem,1.6rem)}
  .trials .src{margin-top:.8rem;font-size:.82rem;color:var(--stone)}

  /* ---------- site ---------- */
  .site-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:center}
  .site-facts{list-style:none;margin-top:2rem}
  .site-facts li{display:flex;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--line-dark);font-size:.98rem;color:var(--foam)}
  .site-facts li:last-child{border-bottom:1px solid var(--line-dark)}
  .site-facts .k{color:var(--kelp);min-width:9.5rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;padding-top:.15rem}
  .site-card{background:linear-gradient(165deg,var(--tide),var(--abyss));border:1px solid var(--line-dark);border-radius:6px;padding:clamp(1.8rem,3vw,2.6rem);position:relative;overflow:hidden}
  .site-card .coord{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.6rem,2.5vw,2.2rem);color:var(--foam);letter-spacing:.01em}
  .site-card .coord span{color:var(--kelp)}
  .site-card .desc{margin-top:1rem;color:var(--sage);font-size:.92rem}
  .site-card .ripple{position:absolute;right:-30%;bottom:-40%;width:90%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(203,156,68,.18);box-shadow:0 0 0 30px rgba(203,156,68,.05),0 0 0 70px rgba(203,156,68,.03)}

  /* ---------- cta ---------- */
  .cta{background:var(--kelp);color:var(--abyss);text-align:center}
  .cta h2{font-size:clamp(2.3rem,5.5vw,4rem);max-width:16ch;margin:0 auto}
  .cta p{max-width:46ch;margin:1.4rem auto 0;color:#3a2c0d}
  .cta .btn-solid{background:var(--abyss);color:var(--foam);margin-top:2.4rem}
  .cta .btn-solid:hover{background:#0a3431}
  .cta-mail{margin:1.5rem auto 0;font-size:.9rem;color:#3a2c0d}
  .cta-mail a{text-decoration:underline;text-underline-offset:3px}

  /* ---------- footer ---------- */
  footer{background:var(--abyss);color:var(--sage);padding:4.5rem 0 3rem}
  .foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2.5rem;align-items:flex-start}
  .foot-brand{font-family:"Fraunces",Georgia,serif;font-size:1.6rem;color:var(--foam);display:flex;align-items:center;gap:.55rem}
  .foot-brand .dot{width:.46rem;height:.46rem;border-radius:50%;background:var(--kelp)}
  .foot-strap{margin-top:.7rem;font-size:.92rem;max-width:30ch}
  .foot-nav{display:flex;gap:3.5rem;flex-wrap:wrap}
  .foot-col h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--kelp);font-weight:600;margin-bottom:1rem}
  .foot-col a{display:block;color:var(--sage);font-size:.92rem;padding:.28rem 0;transition:color .2s}
  .foot-col a:hover{color:var(--foam)}
  .foot-bottom{margin-top:3.5rem;padding-top:1.8rem;border-top:1px solid rgba(159,182,169,.16);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.8rem}
  /* small print, but still AA: 5.7:1 on --abyss at this opacity */
  .foot-legal{margin-top:1rem;font-size:.76rem;line-height:1.6;color:var(--sage);opacity:.82;max-width:62ch}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* ---------- responsive ---------- */
  @media(max-width:860px){
    /* On phones the nav always carries its own background. Relying on the
       .scrolled class (which a scroll event adds) meant any page arriving
       already scrolled rendered a transparent bar with content showing through
       it, leaving the brand and the burger unreadable. That happens following
       index.html#gap from the blog nav, on a restored scroll position, and with
       JS disabled. Legibility must not depend on JavaScript. */
    .nav::before{background:rgba(8,32,30,.92);backdrop-filter:blur(10px)}

    /* visibility keeps the closed panel out of the tab order. It flips to
       visible instantly on open (so focus() lands), and is deferred to the end
       of the slide on close (so the panel doesn't vanish mid-animation). */
    .nav-links{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--abyss);flex-direction:column;justify-content:center;align-items:flex-start;gap:1.6rem;padding:2rem;transform:translateX(100%);visibility:hidden;transition:transform .4s ease,visibility 0s linear .4s;z-index:60}
    .nav-links.open{transform:none;visibility:visible;transition:transform .4s ease,visibility 0s linear 0s}
    .nav-links a{font-size:1.2rem}
    .menu-btn{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;z-index:70;padding:.4rem}
    .menu-btn span{width:26px;height:2px;background:var(--foam);transition:.3s}
    .menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .menu-btn.open span:nth-child(2){opacity:0}
    .menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    /* the hint collides with the hero buttons on short viewports, and mobile
       users don't need the affordance */
    .scrollhint{display:none}
    .gap-grid,.env-intro,.site-grid{grid-template-columns:1fr}
    .benefits{grid-template-columns:1fr}
    .loop-track{grid-template-columns:1fr 1fr}
    .loop-track::before{display:none}
  }
  @media(max-width:520px){
    .ledger{grid-template-columns:1fr}
    .ledger .cell + .cell{border-left:0;border-top:1px solid var(--line-light);padding-left:0}
    .ledger .cell{padding:1.6rem 0 0}
    .loop-track{grid-template-columns:1fr}
    .site-facts .k{min-width:auto}
    .site-facts li{flex-direction:column;gap:.3rem}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
    .hero-shafts,.hero-particles{display:none}
  }

  /* ---------- text pages (privacy, and later blog posts) ---------- */
  /* The nav is transparent by default because the homepage puts a dark hero
     behind it. A light text page has nothing behind it, so the nav needs its
     own background or the links render invisible until you scroll. */
  .nav.solid::before{background:rgba(8,32,30,.92);backdrop-filter:blur(10px)}

  .page{padding-top:clamp(7rem,14vh,9rem);padding-bottom:clamp(4rem,9vh,7rem)}
  .page-head{max-width:32ch}
  .page-head h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-top:1.1rem}
  .page-head .updated{margin-top:1.2rem;font-size:.85rem;color:var(--stone)}

  .prose{max-width:68ch;margin-top:3rem}
  .prose h2{font-size:clamp(1.35rem,2vw,1.7rem);font-weight:420;margin:2.6rem 0 .9rem}
  .prose h2:first-of-type{margin-top:0}
  .prose p{margin-bottom:1rem;color:var(--stone)}
  .prose ul{margin:0 0 1rem 1.2rem;color:var(--stone)}
  .prose li{margin-bottom:.5rem;padding-left:.3rem}
  .prose a{color:var(--kelp-deep);text-decoration:underline;text-underline-offset:3px}
  .prose a:hover{color:var(--ink)}
  .prose strong{color:var(--ink);font-weight:600}
  .prose blockquote{
    margin:2rem 0;padding:.2rem 0 .2rem 1.6rem;border-left:2px solid var(--kelp);
    font-family:"Fraunces",Georgia,serif;font-weight:330;font-size:clamp(1.15rem,1.3vw + .9rem,1.45rem);
    line-height:1.45;color:var(--ink);
  }

  /* ---------- blog ---------- */
  .post-list{margin-top:3rem;border-top:1px solid var(--line-light)}
  .post-item{display:block;padding:2rem 0;border-bottom:1px solid var(--line-light);transition:padding-left .3s ease}
  .post-item:hover{padding-left:.6rem}
  .post-meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--kelp-deep);font-weight:600}
  .post-item h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:400;margin:.7rem 0 .6rem}
  .post-item:hover h2{color:var(--kelp-deep)}
  .post-item p{color:var(--stone);font-size:.98rem;max-width:60ch}

  .article-meta{margin-top:1.4rem;font-size:.85rem;color:var(--stone);display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
  .article-back{display:inline-flex;align-items:center;gap:.5em;margin-top:3.5rem;font-size:.9rem;color:var(--kelp-deep)}
  .article-back:hover{color:var(--ink)}

  /* Source notes: visibly separated from the argument, so a reader can tell
     what is established research and what is Clean Tide's own claim. */
  .sources{margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--line-light)}
  .sources h2{font-size:1.05rem;font-weight:500;margin-bottom:.8rem}
  .sources p,.sources li{font-size:.86rem;color:var(--stone);line-height:1.6}
  .sources ul{margin-left:1.1rem}

  /* inline citation markers */
  .cite{
    font-size:.7em;vertical-align:super;line-height:0;font-weight:600;
    color:var(--kelp-deep);text-decoration:none;padding:0 .12em;
  }
  .cite:hover{color:var(--ink);text-decoration:underline}
  .refs{margin:0 0 0 1.4rem}
  .refs li{margin-bottom:.85rem;font-size:.86rem;color:var(--stone);line-height:1.55}
  .refs li:target{background:var(--kelp-soft);border-radius:3px}
  .refs a{word-break:break-word}