/* =====================================================================
   PLACEHOLDER BRAND: "roam"  — wordmark is a placeholder, name TBD.
   Design system referenced from gethapply.com (Rethink Sans, warm cream,
   coral accent, huge lowercase type).  Product: portable dog water bottle.
   ===================================================================== */

:root{
  --bone:      #F7F1E1;
  --bone-2:    #EFE6CF;
  --bone-3:    #E7DCC0;
  --ink:       #1B1A16;
  --ink-2:     #4A463D;
  --muted:     #8A8474;
  --white:     #ffffff;

  --coral:     #E9674C;
  --coral-deep:#D2523A;

  --pink:      #F0AEC1;
  --pink-soft: #F7D8E0;
  --pink-deep: #D97B95;

  --teal:      #47C2BD;
  --teal-soft: #CBEBE8;
  --teal-deep: #2E9C97;

  --r-lg: 34px;
  --r-md: 22px;
  --r-sm: 14px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --pad: clamp(20px, 5vw, 84px);
  --maxw: 1560px;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  font-family:"Rethink Sans", system-ui, sans-serif;
  background:var(--bone);
  color:var(--ink);
  font-size:18px;
  line-height:1.5;
  overflow-x:hidden;
  font-weight:500;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--coral); color:var(--bone); }

/* lowercase, tight display type */
h1,h2,h3,h4{
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.92;
  text-transform:lowercase;
  margin:0;
}
.lower{ text-transform:lowercase; }

/* ---------- marquee bar (static overlay on the sky; scrolls away) ---------- */
.marquee{
  position:absolute; top:0; left:0; right:0;
  background:transparent;
  color:var(--ink);
  overflow:hidden;
  white-space:nowrap;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.02em;
  text-transform:lowercase;
  padding:10px 0;
  z-index:60;
}
.marquee__track{ display:inline-flex; gap:0; animation:marq 34s linear infinite; }
.marquee__track span{ padding:0 26px; opacity:.92; }
.marquee__track span::after{ content:"·"; position:absolute; margin-left:12px; opacity:.5; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- nav (transparent over the sky, solid on scroll) ---------- */
/* on the hero: static, scrolls away with the page */
.nav{
  position:absolute; top:34px; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--pad);
  background:transparent;
  border-bottom:1px solid transparent;
}
/* re-enters as a sticky solid bar at the next section */
.nav.stuck{
  position:fixed; top:0;
  background:color-mix(in srgb, var(--bone) 90%, transparent);
  backdrop-filter:blur(12px);
  border-bottom-color:color-mix(in srgb, var(--ink) 8%, transparent);
  animation:navDrop .4s var(--ease);
}
@keyframes navDrop{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
.wordmark{
  font-weight:800; font-size:1.7rem; letter-spacing:-.05em;
  text-transform:lowercase; line-height:1;
}
.wordmark .dot{ color:var(--coral); }
.nav__links{ display:flex; gap:34px; font-weight:600; font-size:.98rem; text-transform:lowercase; }
.nav__links a{ position:relative; opacity:.85; transition:opacity .2s; }
.nav__links a:hover{ opacity:1; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0; background:var(--coral);
  transition:width .28s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:18px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--bone);
  padding:13px 22px; border-radius:100px;
  font-weight:700; font-size:.95rem; text-transform:lowercase;
  transition:transform .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); background:var(--coral); }
.btn--coral{ background:var(--coral); }
.btn--coral:hover{ background:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent); }
.btn--ghost:hover{ background:var(--ink); color:var(--bone); }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* =====================================================================
   HERO  — sky full-screen, art-directed (wide desktop / portrait mobile)
   ===================================================================== */
.hero{ position:relative; overflow:hidden; height:100svh; min-height:600px; background:#BFE0F2; }
.hero__img{ position:absolute; inset:0; z-index:0; }
.hero__img picture{ display:block; width:100%; height:100%; }
.hero__img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center center; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(200,228,244,.5) 0%, rgba(200,228,244,.12) 34%, rgba(200,228,244,0) 55%);
}
.hero__inner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,5vw,72px);
}
.hero__copy{ max-width:24ch; }
.hero__eyebrow{
  text-transform:lowercase; font-weight:700; font-size:.9rem; letter-spacing:.02em;
  color:var(--coral); margin-bottom:12px;
}
.hero__copy h1{ font-size:clamp(2.4rem,5.2vw,5rem); text-shadow:0 2px 30px rgba(255,255,255,.35); }
.hero__copy h1 em{ font-style:normal; color:var(--coral); }
.hero__sub{
  margin-top:20px; max-width:32ch; color:var(--ink-2); font-weight:600;
  font-size:clamp(1.02rem,1.15vw,1.18rem); text-transform:none; line-height:1.5;
}
.hero__cta{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__trust{ margin-top:26px; display:flex; gap:24px; flex-wrap:wrap; padding-top:0; }
.hero__trust span{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; font-size:.92rem; text-transform:lowercase; }
.hero__trust b{ color:var(--coral); }
/* mobile: portrait sky shot, copy centered up on the sky */
@media (max-width:820px){
  .hero__img img{ object-position:center top; }
  .hero__scrim{ background:linear-gradient(180deg, rgba(200,228,244,.55) 0%, rgba(200,228,244,.12) 34%, rgba(200,228,244,0) 55%); }
  .hero__inner{ justify-content:flex-start; padding-top:clamp(48px,12vh,110px); text-align:center; }
  .hero__copy{ max-width:none; margin:0 auto; }
  .hero__copy h1{ font-size:clamp(2.6rem,10vw,4rem); }
  .hero__cta{ justify-content:center; }
  .hero__trust{ justify-content:center; gap:12px 20px; }
}

/* =====================================================================
   SECTION scaffolding
   ===================================================================== */
section{ position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.eyebrow{
  text-transform:lowercase; font-weight:700; font-size:.85rem; letter-spacing:.04em;
  color:var(--coral); margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--coral); display:inline-block; }
.reveal{ opacity:0; transform:translateY(28px); }

/* ---------- color showcase (pink / teal panels) ---------- */
.showcase{ padding-top:clamp(60px,9vw,130px); padding-bottom:clamp(30px,5vw,60px); }
.showcase__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:44px; }
.showcase__head h2{ font-size:clamp(2.4rem,6vw,5.2rem); max-width:16ch; }
.showcase__head p{ max-width:32ch; color:var(--ink-2); text-transform:none; }
.cards2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pcard{
  border-radius:var(--r-lg); padding:clamp(24px,3vw,44px);
  position:relative; overflow:hidden; min-height:440px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.pcard.pink{ background:linear-gradient(160deg,var(--pink-soft),var(--pink)); }
.pcard.teal{ background:linear-gradient(160deg,var(--teal-soft),var(--teal)); }
.pcard__top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:2; }
.pcard__name{ font-size:clamp(1.6rem,2.6vw,2.4rem); }
.pcard__price{ font-weight:800; font-size:1.2rem; background:var(--white); padding:8px 15px; border-radius:100px; }
.pcard__img{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.pcard__img img{ width:82%; max-width:540px; mix-blend-mode:multiply; transition:transform .6s var(--ease); }
.pcard:hover .pcard__img img{ transform:scale(1.05) rotate(-2deg); }
.pcard__foot{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.pcard__tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{ background:color-mix(in srgb,var(--white) 55%, transparent); border-radius:100px; padding:6px 13px; font-weight:700; font-size:.82rem; text-transform:lowercase; }

/* ---------- feature grid ---------- */
.features{ padding-block:clamp(50px,7vw,100px); }
.fgrid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1.5px solid var(--bone-3); }
.fcell{
  padding:34px 30px 40px; border-left:1.5px solid var(--bone-3);
  min-height:280px; display:flex; flex-direction:column;
}
.fcell:first-child{ border-left:none; }
.fcell .ico{ width:34px; height:34px; margin-bottom:auto; color:var(--ink); }
.fcell h3{ font-size:1.5rem; margin:64px 0 10px; }
.fcell p{ color:var(--ink-2); font-size:1rem; text-transform:none; }

/* ---------- bento ---------- */
.bento{ padding-block:clamp(50px,7vw,100px); }
.bgrid{
  display:grid; gap:16px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(150px,auto);
}
.bcell{
  border:1.5px solid var(--bone-3); border-radius:var(--r-md);
  padding:26px; display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; position:relative; background:var(--white);
}
.bcell .num{ font-size:clamp(2.6rem,4.4vw,4.6rem); font-weight:800; letter-spacing:-.04em; line-height:.9; }
.bcell .lbl{ color:var(--ink-2); font-size:.98rem; text-transform:none; margin-top:10px; }
.bcell.coral{ background:var(--coral); color:var(--bone); border-color:var(--coral); }
.bcell.ink{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.bcell.teal{ background:var(--teal); color:#083b39; border-color:var(--teal); }
.bcell.img{ padding:0; }
.bcell.img img{ width:100%; height:100%; object-fit:cover; }
.b-span2{ grid-column:span 2; }
.b-row2{ grid-row:span 2; }

/* ---------- how it works ---------- */
.how{ padding-block:clamp(50px,7vw,100px); }
.how h2{ font-size:clamp(2.2rem,5vw,4.4rem); margin-bottom:44px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step{ }
.step__img{ border-radius:var(--r-md); overflow:hidden; background:var(--white); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.step__img.tealbg{ background:var(--teal); }
.step__img img{ width:100%; height:100%; object-fit:cover; }
.step__n{ font-weight:800; color:var(--coral); font-size:1rem; margin:18px 0 6px; }
.step h3{ font-size:1.5rem; margin-bottom:8px; }
.step p{ color:var(--ink-2); text-transform:none; font-size:1rem; }

/* ---------- story / before-after ---------- */
.story{ padding-block:clamp(50px,7vw,110px); }
.story__panel{
  background:var(--ink); color:var(--bone); border-radius:var(--r-lg);
  padding:clamp(36px,6vw,90px); display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center;
}
.story__panel h2{ font-size:clamp(2rem,4.4vw,3.8rem); }
.story__panel p{ color:color-mix(in srgb,var(--bone) 74%, transparent); text-transform:none; margin-top:20px; max-width:44ch; }
.story__img{ border-radius:var(--r-md); overflow:hidden; }
.story__img img{ width:100%; }

/* ---------- collage ---------- */
.collage{ padding-block:clamp(60px,9vw,140px); text-align:center; position:relative; }
.collage h2{ font-size:clamp(3rem,11vw,10rem); position:relative; z-index:2; }
.collage p{ max-width:46ch; margin:24px auto 30px; color:var(--ink-2); text-transform:none; position:relative; z-index:2; }
.collage .btn{ position:relative; z-index:2; }
.ctile{ position:absolute; border-radius:var(--r-md); overflow:hidden; box-shadow:0 24px 44px rgba(40,30,20,.14); z-index:1; }
.ctile img{ width:100%; height:100%; object-fit:cover; }
.ctile.t1{ width:190px; height:230px; left:3%;  top:8%;  transform:rotate(-6deg); }
.ctile.t2{ width:170px; height:170px; left:14%; bottom:8%; transform:rotate(5deg); }
.ctile.t3{ width:200px; height:250px; right:3%; top:6%;  transform:rotate(6deg); }
.ctile.t4{ width:180px; height:180px; right:12%;bottom:8%; transform:rotate(-5deg); }

/* ---------- footer ---------- */
.footer{ background:var(--coral); color:var(--bone); padding:clamp(40px,6vw,70px) 0 0; margin-top:20px; overflow:hidden; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.footer h2{ font-size:clamp(2rem,4vw,3.2rem); }
.footer__sub{ text-transform:none; color:color-mix(in srgb,var(--bone) 82%, transparent); margin:16px 0 20px; max-width:30ch; }
.sub{ display:flex; gap:10px; max-width:420px; }
.sub input{
  flex:1; border:none; border-radius:100px; padding:14px 20px; font-family:inherit; font-size:1rem;
  background:color-mix(in srgb,var(--bone) 92%, transparent); color:var(--ink);
}
.sub input::placeholder{ color:var(--muted); }
.sub button{ background:var(--ink); color:var(--bone); border-radius:100px; padding:0 24px; font-weight:700; text-transform:lowercase; }
.fcol h4{ text-transform:lowercase; font-size:.82rem; letter-spacing:.04em; opacity:.7; margin-bottom:16px; font-weight:700; }
.fcol a{ display:block; margin-bottom:11px; font-weight:600; opacity:.94; text-transform:lowercase; }
.fcol a:hover{ text-decoration:underline; }
.footer__wm{
  font-weight:800; letter-spacing:-.05em; text-transform:lowercase; line-height:.8;
  font-size:min(30vw,24rem); color:color-mix(in srgb,var(--bone) 90%, var(--coral));
  margin:30px 0 -3vw; text-align:center; white-space:nowrap;
}
.footer__legal{
  border-top:1px solid color-mix(in srgb,var(--bone) 30%, transparent);
  padding:18px 0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:.82rem; text-transform:none; color:color-mix(in srgb,var(--bone) 78%, transparent);
}
.footer__legal.plain{ text-transform:none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .fgrid{ grid-template-columns:repeat(2,1fr); }
  .fcell:nth-child(3){ border-left:none; }
  .bgrid{ grid-template-columns:repeat(2,1fr); }
  .story__panel{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer h2{ grid-column:1/-1; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .nav__links{ display:none; }
  /* hide the shop button over the hero; let it drop in with the sticky bar at "pick your walking buddy" */
  .nav__right{ display:none; }
  .nav.stuck .nav__right{ display:flex; }
  .cards2{ grid-template-columns:1fr; }
  .fgrid{ grid-template-columns:1fr; }
  .fcell{ border-left:none; border-top:1.5px solid var(--bone-3); min-height:auto; }
  .fcell h3{ margin-top:40px; }
  .bgrid{ grid-template-columns:1fr; }
  .b-span2{ grid-column:auto; }
  .steps{ grid-template-columns:1fr; }
  .collage h2{ font-size:clamp(2.6rem,15vw,5rem); }
  .ctile{ display:none; }
  .footer__top{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s!important; transition-duration:.001s!important; }
}