/* PEBBLE — test site.
   Palette: base/off-white #FBF6EC · soft blue #D6EBF7 · hero tangerine #FF7417 · anchor cobalt #0057D9
   Rules: cobalt leads (text, outlines); tangerine = primary CTAs + small accents; soft blue = quiet fills. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Overpass:wght@400;600;700&display=swap');

:root{
  --green:#145E2E; --cream:#F2EDE3; --yellow:#FFDC48; --label-y:#F7C64B; --mint:#EDF3EC; --peri:#9FB8F2; --peri-deep:#98A8F0;
  /* new palette (rolling out step by step) */
  --tangerine:#FF7417; --cobalt:#0057D9; --offwhite:#FBF6EC; --softblue:#D6EBF7;
  --white:#FFFFFF; --serif:'Newsreader',Georgia,serif; --sans:'Overpass',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* native smooth-scroll duration is browser-controlled and whips over long
   distances — pebble.js runs an eased scroll instead (falls back to this
   if JS is unavailable) */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);font-size:18px;color:var(--cobalt);background:var(--white);line-height:1.55}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;text-wrap:balance}
em{font-family:var(--serif);font-style:italic}
a{color:inherit;text-decoration:none}
.caps{font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:14px}
.eyebrow{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:14px;opacity:.85;margin-bottom:14px}
.pill{display:inline-block;border:1.5px solid var(--cobalt);border-radius:999px;padding:10px 26px;font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:14px;background:transparent;color:var(--cobalt);cursor:pointer;transition:background .2s,color .2s}
.pill:hover{background:var(--cobalt);color:var(--white)}
.pill--solid{background:var(--cobalt);color:var(--white);border-color:var(--cobalt)}
.pill--solid:hover{background:#0046B0}
/* primary call-to-action — tangerine */
.pill--cta{background:var(--tangerine);border-color:var(--tangerine);color:var(--white)}
.pill--cta:hover{background:#E8620A;border-color:#E8620A;color:var(--white)}
/* sparkling accent — outline tangerine */
.pill--spark{color:var(--tangerine);border-color:var(--tangerine)}
.pill--spark:hover{background:var(--tangerine);color:var(--white)}
.center{text-align:center}
.section{padding:96px 24px}
.wrap{max-width:1200px;margin:0 auto}

/* Announcement */
.announce{background:var(--tangerine);color:#FFFFFF;text-align:center;padding:6px 16px 2px;font-family:var(--serif);font-size:17.5px}
.announce em{font-style:italic}
.announce a{border-bottom:1px solid transparent}
.announce a:hover{border-color:#FFFFFF}

/* Nav — sticky; hides on scroll down, returns on scroll up (see pebble.js) */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 32px;background:var(--white);position:sticky;top:0;z-index:50;transition:transform .28s ease,box-shadow .28s ease}
.nav--hidden{transform:translateY(-100%)}
.nav--stuck{box-shadow:0 1px 12px rgba(0,87,217,.12)}
@media (prefers-reduced-motion: reduce){.nav{transition:none}}
.nav-left,.nav-right{display:flex;gap:26px;align-items:center}
.nav-right{justify-content:flex-end}
.nav a.caps{font-size:13.5px;color:var(--cobalt)}
.wordmark{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.15;color:var(--cobalt);letter-spacing:.01em;position:relative;top:4px}

/* Hero */
.hero{position:relative;min-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--softblue) url('landingpagebackground.jpg?v=6') top center/cover no-repeat}
/* Home hero scrim — lightest of the three; the water photo already has an
   even mid-tone behind the headline, so this only needs to steady it. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 58% 42% at 50% 47%,
    rgba(10,30,55,.26) 0%, rgba(10,30,55,.18) 44%, rgba(10,30,55,.07) 68%, rgba(10,30,55,0) 84%)}
.hero--about{background:#6E92B8 url('mountain.jpg?v=3') center/cover no-repeat}
/* Scrim: soft elliptical darkening behind the headline only. Fades out well
   before the edges so the photo keeps its brightness and the effect reads as
   depth, not as an overlay. Lets white type sit on any background. */
.hero--about::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 46% at 50% 46%,
    rgba(10,30,55,.40) 0%, rgba(10,30,55,.30) 40%, rgba(10,30,55,.12) 66%, rgba(10,30,55,0) 82%)}
/* scrim does the work now, so the text-shadow can be lighter */
.hero--about .eyebrow{color:var(--white);text-shadow:0 1px 8px rgba(10,30,55,.40);opacity:1}
.hero--about h1{color:var(--white);text-shadow:0 1px 14px rgba(10,30,55,.30)}
.hero-inner{position:relative;z-index:1;text-align:center;padding:40px 20px}
.hero h1{color:var(--white);font-size:clamp(44px,7vw,76px);margin-bottom:56px;text-shadow:0 1px 22px rgba(15,40,70,.26)}
.hero .pill{background:var(--white);border-color:var(--white);color:var(--cobalt)}
.hero .pill:hover{background:var(--offwhite);color:var(--cobalt)}

/* Meet Pebble section waves */
.meet .wave{color:var(--softblue)}

/* Standard pillars */
.pillars-head h2{font-size:clamp(32px,4.2vw,54px);max-width:820px;margin:0 auto 56px}
.pillars{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:56px}
.pillar{width:150px;text-align:center}
.pillar .caps{font-size:13.5px;line-height:1.5}
.wave{flex-shrink:0;color:var(--softblue)}
.pillar-ic{width:52px;height:52px;margin:0 auto 12px}

/* Product tiles — the photo IS the panel; whole card sized so image + name share the frame */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:1020px;margin:0 auto;padding:0 24px}
.tile{border-radius:6px;overflow:hidden;text-align:center}
.tile-art{display:block;overflow:hidden}
.tile-art img{width:100%;height:auto;display:block}
.tile--still .tile-art{background:#FAF6EB}
.tile--sparkling .tile-art{background:#FAF6EB}
.tile h3{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.6vw,54px);margin:32px 0 4px}
.tile .price{font-family:var(--sans);font-size:16px;letter-spacing:.06em;margin-bottom:14px}
.tile .pill{margin-bottom:36px}

/* Banner */
.banner{background:var(--offwhite);text-align:center;padding:110px 24px}
.banner h2{font-size:clamp(34px,4.2vw,54px);margin-bottom:14px}
.banner p{font-size:19px;max-width:620px;margin:0 auto 34px}

/* Standard numbered (about/landing shared) */
.std{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1150px;margin:0 auto 90px;padding:0 24px}
.std:nth-child(even) .std-art{order:2}
.std-art{border-radius:6px;min-height:380px}
.std h3{font-size:clamp(30px,3.6vw,46px);margin:6px 0 18px}
.std .num{font-family:var(--sans);font-weight:700;color:var(--tangerine);letter-spacing:.08em}

/* Bottle feature overlay (Loonen-style shoppable image) */
.bottle-shot{position:relative;max-width:1150px;margin:56px auto 0;border-radius:8px;overflow:hidden}
.bottle-shot>img{width:100%;display:block}
/* white cards so they separate from the cream photo ground they sit on */
.feat{background:var(--white);border:1px solid rgba(0,87,217,.13);border-radius:10px;
      padding:15px 17px;text-align:left}
.feat .caps{display:block;margin:8px 0 6px;font-size:13px}
.feat p{font-size:13.5px;line-height:1.5;margin:0}
.feat-ic{width:34px;height:34px;display:block}
.bottle-shot .feat{position:absolute;width:clamp(170px,20.5%,242px);
                   box-shadow:0 5px 20px rgba(0,40,90,.13)}
/* Four callouts, 2 left / 2 right, pulled in tight to the bottle.
   Bottle occupies 42.8%–60.2% of the image width (measured), so these
   offsets leave an equal ~6% breathing gap on each side. */
.feat--p1{top:10%;left:16%}     /* Unpainted Cap */
.feat--p2{top:56%;left:16%}     /* Fits Your Cupholder */
.feat--p5{top:10%;right:13%}    /* Always Glass */
.feat--p3{top:56%;right:13%}    /* Ripples for Grip */
@media(max-width:880px){
  .bottle-shot{overflow:visible}
  .bottle-shot>img{border-radius:8px}
  .bottle-shot .feat{position:static;width:auto;box-shadow:none;margin-top:10px}
}

/* Launching — warm off-white ground, cobalt text, tangerine CTA */
.launch{background:var(--offwhite);color:var(--cobalt);text-align:center;padding:110px 24px}
.launch .eyebrow{color:var(--tangerine)}
.launch h2{font-size:clamp(34px,4.2vw,54px);color:var(--cobalt);margin-bottom:16px}
.launch p{max-width:520px;margin:0 auto 34px;font-size:18px;color:var(--cobalt)}
.launch .pill{background:var(--tangerine);border-color:var(--tangerine);color:var(--white)}
.launch .pill:hover{background:#E8620A;border-color:#E8620A;color:var(--white)}

/* Why the pebble */
.why{position:relative;background:linear-gradient(180deg,var(--offwhite) 0%,var(--softblue) 62%,#C2E2F3 100%);text-align:center;padding:120px 24px 150px;overflow:hidden}
.why .scene g[stroke]{stroke:#FFFFFF;opacity:.9}
.why h2{font-size:clamp(34px,4.2vw,54px);max-width:760px;margin:0 auto 20px}
.why p{max-width:600px;margin:0 auto;font-size:18.5px}
.why svg.scene{display:block;margin:56px auto 0}

/* Footer */
.footer{background:var(--offwhite);color:var(--cobalt);padding:80px 32px 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;max-width:1280px;margin:0 auto 70px}
.foot-grid h3{font-size:30px;font-style:italic;margin-bottom:18px}
.foot-grid h4{font-family:var(--serif);font-size:26px;margin-bottom:16px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:10px}
.foot-grid li a{font-family:var(--sans);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.sub-row{display:flex;background:var(--white);border-radius:999px;overflow:hidden;max-width:460px}
.sub-row input{flex:1;border:0;outline:0;padding:16px 22px;font-family:var(--sans);font-size:16px;letter-spacing:.06em;color:var(--cobalt);background:transparent}
.sub-row button{border:0;background:var(--cobalt);color:var(--white);font-family:var(--serif);font-size:18px;padding:0 30px;border-radius:999px;cursor:pointer}
.sub-row button:hover{background:#0046B0}
.sub-note{font-size:14px;margin-top:12px;font-weight:600}
.foot-legal{display:flex;justify-content:space-between;padding:18px 0 26px;font-size:12.5px;letter-spacing:.08em;max-width:1280px;margin:0 auto}

/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(0,28,74,.45);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility 0s linear .26s}
.modal-back.open{opacity:1;visibility:visible;transition:opacity .26s ease}
.modal-back .modal{transform:translateY(16px);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.modal-back.open .modal{transform:none}
@media (prefers-reduced-motion: reduce){
  .modal-back,.modal-back .modal{transition:none}
  .modal-back .modal{transform:none}
}
.modal{background:var(--offwhite);border-radius:14px;max-width:480px;width:100%;padding:44px 40px;text-align:center;position:relative}
.modal h3{font-size:32px;margin-bottom:12px}
.modal p{font-size:16.5px;margin-bottom:26px}
.modal input{width:100%;border:1.5px solid var(--cobalt);border-radius:999px;padding:14px 20px;font-family:var(--sans);font-size:16px;color:var(--cobalt);background:var(--white);margin-bottom:12px;outline:0}
.modal .pill{width:100%;margin-top:6px}
/* The submit is the site's primary conversion (fires AllocationLead), so it
   takes tangerine — and matches the tangerine triggers that open this modal.
   Close button and inputs stay cobalt. */
.modal form .pill--solid{background:var(--tangerine);border-color:var(--tangerine);color:var(--white)}
.modal form .pill--solid:hover{background:#E8620A;border-color:#E8620A}
.modal .close{position:absolute;top:14px;right:20px;background:none;border:0;font-size:26px;color:var(--cobalt);cursor:pointer;font-family:var(--serif)}
/* On-palette cobalt at full strength; it recedes by size, not by fading. */
.modal .fine{font-size:12.5px;color:var(--cobalt);margin-top:14px;margin-bottom:0}
.modal .ok{display:none;font-family:var(--serif);font-size:22px;padding:8px 0 2px}
.modal.modal--done > p:not(.fine){display:none}   /* intro is redundant after success */
.modal.modal--done h3{margin-bottom:18px}

/* Results page */
.res-hero{position:relative;background:var(--softblue) url('landingpagebackground.jpg?v=6') top center/cover no-repeat;text-align:center;padding:150px 24px 120px;color:var(--white)}
/* Scrim — wider and flatter than the other heroes because this band is short
   and the headline runs nearly its full width. */
.res-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 76% 82% at 50% 44%,
    rgba(10,30,55,.42) 0%, rgba(10,30,55,.32) 42%, rgba(10,30,55,.14) 68%, rgba(10,30,55,0) 86%)}
.res-hero h1,.res-hero p{position:relative;z-index:1}
.res-hero h1{font-size:clamp(40px,6vw,68px);margin-bottom:10px;color:var(--white);text-shadow:0 1px 14px rgba(10,30,55,.30)}
.res-hero p{font-family:var(--serif);font-size:24px;text-shadow:0 1px 10px rgba(10,30,55,.30)}
.tbl-wrap{max-width:1150px;margin:0 auto;padding:0 24px}
.tbl-title{font-size:clamp(30px,3.8vw,44px);margin:80px 0 26px}
table.res{width:100%;border-collapse:collapse}
table.res th{background:var(--softblue);color:var(--cobalt);font-family:var(--sans);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13.5px;text-align:left;padding:16px 18px;border:1px solid #BFDCEE}
table.res td{padding:16px 18px;border:1px solid #E4DDCE;font-size:15.5px;vertical-align:top;background:var(--offwhite);color:var(--cobalt);position:relative}
table.res tr.cat td{background:var(--cobalt);color:#FFFFFF;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;border-color:var(--cobalt)}
table.res .why-care{font-size:13.5px;opacity:.8;display:block;margin-top:6px}
table.res .sub{font-size:12.5px;opacity:.75;display:block;margin-top:4px;line-height:1.6}
.legend{background:var(--offwhite);border-radius:10px;padding:22px 26px;font-size:14px;line-height:1.7;margin:24px 0 8px}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1150px;margin:90px auto;padding:0 24px;text-align:center}
.tri h3{font-size:28px;margin:0 0 12px}
.tri p{font-size:15.5px}
.reports{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin:20px 0 8px}
.rep-date{font-size:14px;letter-spacing:.06em;margin-top:10px}
.methods{max-width:860px;margin:70px auto 90px;padding:0 24px;font-size:14.5px;line-height:1.7;opacity:.9}

/* About page */
.letter{background:var(--offwhite);padding:100px 24px;font-size:19px}
.letter>*{max-width:720px;margin-left:auto;margin-right:auto}
.letter p{margin-bottom:22px}
.letter .sign{font-family:var(--serif);font-style:italic;font-size:24px;margin-top:30px}
.prob{background:var(--white);padding:110px 24px}
.prob h2{font-size:clamp(34px,4.2vw,54px);margin-bottom:12px}
.prob-sub{font-size:18px;margin-bottom:80px}
.prob .std h3{font-size:clamp(30px,4vw,46px);margin-bottom:14px}
/* Warm accents on About — tangerine marks the emphasised word in each problem
   heading, giving the page the same rhythm the 01–05 numerals give the home
   page. Deliberately not used in .why (orange on the soft-blue gradient
   vibrates at that size). */
.prob .std h3 em{color:var(--tangerine)}
.sol .eyebrow{color:var(--tangerine)}   /* matches the CTA section on home */
.sol{background:var(--offwhite);text-align:center;padding:110px 24px}
.sol h2{font-size:clamp(34px,4.2vw,54px);margin-bottom:18px}
.sol p{max-width:620px;margin:0 auto 34px;font-size:18px}

@media(max-width:880px){
  .tiles,.std,.foot-grid,.tri{grid-template-columns:1fr}
  .std:nth-child(even) .std-art{order:0}
  .nav{grid-template-columns:auto 1fr auto;padding:7px 12px}
  .nav-left{gap:10px}.nav-right{gap:10px}
  .nav a.caps{font-size:11px;letter-spacing:.06em}
  .wordmark{font-size:28px;top:3px}
  /* (stale .tile-art{height:400px} removed — it cropped the bottle base) */
  .section{padding:64px 18px}
  .hero{min-height:calc(100vh - 88px);min-height:calc(100svh - 88px)}
}

/* sparkling tile — tangerine name, price and CTA (still tile stays cobalt) */
.tile--sparkling h3,.tile--sparkling .price{color:var(--tangerine)}
.tile--sparkling .pill--solid{background:var(--tangerine);border-color:var(--tangerine);color:var(--white)}
.tile--sparkling .pill--solid:hover{background:#E8620A;border-color:#E8620A}

/* focus & hover polish */
a.caps{transition:opacity .2s}
a.caps:hover,.foot-grid li a:hover{opacity:.6}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.pill:focus-visible{outline-offset:4px}
.sub-row:focus-within{box-shadow:0 0 0 2px rgba(0,87,217,.55)}
.sub-row input:focus-visible{outline:none}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
/* Full-bleed sections never move or fade themselves — otherwise the 30px slide
   exposes the white body background as a seam between bands meant to blend.
   Their contents animate instead; children that are their own reveal targets
   (.std, .tile, .banner > *) are excluded so they keep independent timing. */
section.reveal{opacity:1;transform:none}
section.reveal > *:not(.reveal){opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
section.reveal.in > *:not(.reveal){opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal,section.reveal > *:not(.reveal){opacity:1 !important;transform:none !important;transition:none}
}

/* media blocks & cohesion */
.std-art{border-radius:8px;overflow:hidden;min-height:480px;display:flex;align-items:stretch}
.std-art img{width:100%;height:100%;min-height:480px;object-fit:cover;display:block}
.tile-art{border-radius:8px}
.pillar{width:170px}
/* desktop-only line breaks (Loonen two-line subheads) */
@media(max-width:560px){.br-d{display:none}}
@media(max-width:880px){.std-art{min-height:340px}.std-art img{min-height:340px}}

/* ---- phone density (390px is the primary ad surface) ---- */
@media(max-width:560px){
  .section{padding:60px 20px}
  .banner{padding:64px 20px}
  .launch{padding:64px 20px}
  .why{padding:66px 20px 82px}
  .prob{padding:66px 20px}
  .sol{padding:66px 20px}
  .letter{padding:66px 22px}

  /* pillars: two tidy rows, drop the inline wave dividers */
  /* Loonen's mobile pillars, copied: two abreast, wave squiggles under them,
     the odd one centred, waves again, final two abreast. Labels keep their
     hard break so every item is a uniform two-line stack. */
  .pillars{display:grid;grid-template-columns:1fr 1fr;row-gap:12px;column-gap:8px;
    margin:0 auto 44px;max-width:340px;justify-items:center;align-items:center}
  .pillar{width:auto}
  .pillar .caps{font-size:12.5px;letter-spacing:.1em;line-height:1.5}
  .pillars .wave{display:block}
  div.pillar:nth-of-type(1){grid-area:1/1}
  div.pillar:nth-of-type(2){grid-area:1/2}
  svg.wave:nth-of-type(1){grid-area:2/1}
  svg.wave:nth-of-type(2){grid-area:2/2}
  div.pillar:nth-of-type(3){grid-row:3;grid-column:1 / -1}
  svg.wave:nth-of-type(3){grid-area:4/1}
  svg.wave:nth-of-type(4){grid-area:4/2}
  div.pillar:nth-of-type(4){grid-area:5/1}
  div.pillar:nth-of-type(5){grid-area:5/2}
  .pillars-head h2{margin-bottom:34px}

  /* numbered standard blocks */
  .std{margin-bottom:44px;gap:20px}
  .std-art,.std-art img{min-height:210px}
  .std h3{margin:2px 0 12px}

  /* product tiles */
  .tiles{gap:18px}
  .tile h3{margin:18px 0 4px}
  .tile .price{margin-bottom:14px}
  .tile .pill{margin-bottom:26px}

  /* bottle feature cards */
  .bottle-shot{margin-top:34px}
  .feat{padding:16px 14px}

  /* footer */
  .footer{padding:56px 22px 0}
  .foot-grid{gap:30px;margin-bottom:44px}
}


/* ---- iPhone / small-screen fixes ---- */
/* Inputs must be >=16px or iOS Safari zooms the whole page on focus (see .modal
   input and .sub-row input above). */

@media(max-width:560px){
  /* the results table was content-sized to 360px inside a 327px column, pushing
     the page 9px wide on a 375px iPhone SE */
  table.res{table-layout:fixed}
  table.res th,table.res td{padding:13px 10px;overflow-wrap:anywhere}
  table.res .sub,table.res .why-care{overflow-wrap:anywhere}
}

/* Apple HIG wants ~44pt touch targets. Extend the hit area with a pseudo-element
   so the tap zone grows without changing the nav's height or the layout. */
.nav a.caps,.announce a,.foot-grid li a{position:relative}
.nav a.caps::after,.announce a::after,.foot-grid li a::after{
  content:"";position:absolute;left:-6px;right:-6px;top:-13px;bottom:-13px}


/* ================= MOBILE NAV (Loonen pattern: hamburger left, wordmark centre) ========= */
.nav-toggle{display:none;background:none;border:0;padding:10px 4px;cursor:pointer;
  width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--cobalt);border-radius:2px;
  transition:transform .28s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-menu{position:fixed;left:0;right:0;top:0;bottom:0;z-index:55;background:var(--offwhite);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 28px;
  opacity:0;pointer-events:none;transition:opacity .25s ease}
.nav-menu.open{opacity:1;pointer-events:auto}
/* .nav has its own stacking context (z-index:50), so the toggle can't rise above
   the panel from inside it — lift the whole header instead while the menu is
   open, which also keeps the wordmark visible like Loonen's. */
body.menu-open .nav{z-index:60;background:transparent;box-shadow:none;transform:none}
/* same treatment as the desktop nav links (.caps): sans, semibold, uppercase,
   letter-spaced — just scaled up for touch */
.nav-menu a{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.4;color:var(--cobalt);padding:14px 0}
.nav-menu a:last-child{color:var(--tangerine)}
body.menu-open{overflow:hidden}

@media(max-width:880px){
  /* links move into the panel; header keeps only hamburger + wordmark */
  .nav{grid-template-columns:40px 1fr 40px;padding:6px 16px}
  .nav-toggle{display:flex;position:relative;z-index:56}
  .nav-left,.nav-right{display:none}
  /* the anchor stretches across the grid column, so centre its glyphs */
  .wordmark{font-size:34px;top:2px;text-align:center}
}
@media(min-width:881px){ .nav-menu{display:none} }


/* ================= MOBILE TYPE + DENSITY (measured against loonen.com @390px) =========
   Their values: hero headline 50px, product name 36px, section h2 ~36px, hero 100vh.
   Ours were 44 / 30 / 34 and a 64vh hero, which read undersized next to theirs. */
@media(max-width:560px){
  .hero h1{font-size:50px;margin-bottom:40px}
  .hero--about h1{font-size:42px}          /* longer headline, needs to stay 2 lines */
  .tile h3{font-size:36px;margin:20px 0 4px}
  .banner h2,.launch h2,.prob h2,.sol h2{font-size:36px}
  .why h2{font-size:32px}   /* longest heading on the page; 36px wrapped it into three stubs */
  .pillars-head h2{font-size:30px}
  .std h3{font-size:30px}   /* lets 'Always Spring Sourced' etc. sit on one line */
  /* problem-card headings: 26px keeps "We drink plastic every day." on one
     line down to a 375px iPhone (needs 281px; the column there is 287px) */
  .prob .std h3{font-size:26px}
  /* sub-line break position is set in the markup (after "that,") */

  /* Our Bottle: the wide photo shrinks to a thin band on a phone and the four
     callouts stacked full-width ran ~550px. Two-up keeps them scannable. */
  /* rows 2+3 share one fr sizing so all four cards get identical height */
  .bottle-shot{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;
    gap:12px;align-items:stretch}
  .bottle-shot>img{grid-column:1 / -1}
  /* equal-height cards; the title carries the card, the body supports it */
  .bottle-shot .feat{margin-top:0;padding:18px 16px;height:100%;
    display:flex;flex-direction:column;gap:7px}
  .bottle-shot .feat-ic{width:28px;height:28px}
  .bottle-shot .feat .caps{font-size:14px;font-weight:700;letter-spacing:.08em;margin:2px 0 0}
  .bottle-shot .feat p{font-size:12.5px;line-height:1.45;color:rgba(0,87,217,.78)}

  /* tighten the overall rhythm — our page ran 9,043px against their 6,843px */
  .section{padding:56px 20px}
  .banner{padding:56px 20px}
  .launch{padding:56px 20px}
  .why{padding:60px 20px 70px}
  .std{margin-bottom:38px}
  .tile .pill{margin-bottom:30px}
}


/* Tile anchors land with air above them, so the bottle cap clears the sticky
   nav if it reappears. Native cross-page jumps honour this; pebble.js reads it
   for same-page eased scrolls. #buy has none, keeping Pour One's exact landing. */
#still,#sparkling{scroll-margin-top:74px}


/* mobile-only line break (inverse of .br-d) */
.br-m{display:none}
@media(max-width:560px){
  .br-m{display:inline}
  /* 34px is the largest size where "We should know what's" holds one line
     (measured 331px in the 350px column), so the hero breaks at the phrase —
     same place as desktop — instead of after "know" */
  .hero--about h1{font-size:34px}
}