/* page-home2.css: study 07 homepage (the locked working design) */
:root{
  --cream:#FBF3E2;
  --cream-deep:#F4EAD3;
  --teal:#1C485A;
  --teal-deep:#16394a;
  --marigold:#F4B41A;
  --rust:#C0532B;
  --olive:#6E7A4F;
  --soot:#23201B;
  --teal-soft:rgba(28,72,90,.64);
  --teal-faint:rgba(28,72,90,.16);
  --teal-hair:rgba(28,72,90,.09);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 10px)}
body{
  background:var(--cream);color:var(--teal);
  font-family:'DM Sans',sans-serif;font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--marigold);color:var(--teal)}
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.11 0 0 0 0 0.28 0 0 0 0 0.35 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
img{max-width:100%}





/* ---------- hero ---------- */
#hero{position:relative;overflow:hidden}
.hero-scene{position:relative}
.hero-scene img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
@media(max-width:760px){
  .hero-scene img{height:56vh;min-height:340px;object-fit:cover;object-position:61% 32%}
}
.hero-scene::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:26%;
  background:linear-gradient(transparent,var(--cream));
}
.hero-copy{
  position:relative;text-align:center;
  margin-top:clamp(-70px,-6vw,-110px);z-index:5;
  padding:0 18px 10px;
}
.hero-copy h1{
  font-family:'Lobster',cursive;font-weight:400;
  font-size:clamp(42px,7vw,92px);line-height:1.04;color:var(--teal);
  transform:rotate(-1.5deg);
  text-shadow:0 2px 0 var(--cream), 0 -2px 0 var(--cream), 2px 0 0 var(--cream), -2px 0 0 var(--cream);
}
.hero-copy h1 em{font-style:normal;color:var(--rust)}
.hero-copy .sub{margin:16px auto 0;max-width:58ch;color:var(--teal-soft);font-size:clamp(15px,1.8vw,18px)}
.hero-copy .cta-row{margin:26px 0 44px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}


/* ---------- journey ---------- */
#journey{background:var(--cream)}
.route{position:relative;max-width:860px;margin:70px auto 0}
.route .line{
  position:absolute;left:31px;top:8px;bottom:8px;width:6px;border-radius:3px;
  background:linear-gradient(var(--marigold),var(--marigold)) no-repeat;
  background-size:100% calc(var(--p,0) * 100%);
  border-left:2px dashed var(--teal-faint);border-right:2px dashed var(--teal-faint);
}
.stop{
  position:relative;padding:0 0 58px 96px;
}
.stop:last-child{padding-bottom:6px}
.stop .dot{
  position:absolute;left:8px;top:0;width:52px;height:52px;border-radius:50%;
  background:var(--teal);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-family:'Teko',sans-serif;font-weight:600;font-size:23px;padding-top:3px;
  border:3px solid var(--cream);box-shadow:0 0 0 2.5px var(--teal);
  transition:background .4s,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.stop.hit .dot{background:var(--rust);transform:scale(1.12)}
.stop h4{
  font-family:'Teko',sans-serif;font-weight:600;font-size:27px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
}
.stop .when{font-family:'Teko',sans-serif;font-weight:500;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
.stop p{margin-top:8px;color:var(--teal-soft);max-width:52ch;font-size:15.5px}
.stop .tip{
  margin-top:14px;display:flex;gap:12px;align-items:flex-start;
  background:#fff;border:1.5px solid var(--teal-faint);border-radius:10px;
  padding:12px 16px;max-width:52ch;font-size:14px;
}
.stop .tip .sunhead{font-size:18px;flex:none;color:var(--rust)}
.stop .tip b{font-family:'Teko',sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--rust)}
.stop .pose{
  position:absolute;right:-20px;top:-16px;width:clamp(100px,13vw,160px);
  transform:rotate(4deg);
  filter:drop-shadow(0 6px 12px rgba(28,72,90,.18));
}
.stop:nth-child(odd) .pose{transform:rotate(-4deg)}
@media(max-width:760px){.stop .pose{position:static;display:block;margin:14px 0 0;width:110px}}

/* ---------- sizer ---------- */
#sizer{background:var(--teal);color:var(--cream);position:relative;overflow:clip}
#sizer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background:repeating-linear-gradient(90deg,var(--marigold) 0 40px,transparent 40px 80px);
}
#sizer .sec-kick{color:var(--marigold)}
#sizer h2.script{color:var(--cream)}
#sizer .sec-sub{color:rgba(251,243,226,.75)}
.sizer-grid{
  margin-top:54px;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,60px);align-items:start;
}
@media(max-width:920px){.sizer-grid{grid-template-columns:1fr}}
.stage{
  background:var(--cream);border-radius:16px;padding:16px 16px 12px;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
@media(min-width:921px){.stage{position:sticky;top:96px}}
.house-stage{position:relative;border-radius:10px;overflow:hidden}
.house-stage img{width:100%;display:block;transition:opacity .25s}
.house-stage img.swapping{opacity:0}
.house-stage svg{position:absolute;inset:0;width:100%;height:100%}
.stage .stage-foot{
  text-align:center;font-family:'Teko',sans-serif;font-weight:500;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-soft);
  padding-top:10px;
}
.controls .grp{margin-bottom:26px}
.controls .lbl{
  font-family:'Teko',sans-serif;font-weight:600;font-size:17px;letter-spacing:.22em;text-transform:uppercase;color:var(--marigold);
  margin-bottom:12px;display:block;
}
.house-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:520px){.house-btns{grid-template-columns:1fr 1fr}}
.hbtn{
  background:rgba(251,243,226,.08);border:2px solid rgba(251,243,226,.35);border-radius:12px;
  padding:12px 6px 9px;cursor:pointer;color:var(--cream);text-align:center;
  transition:all .25s;
}
.hbtn .hthumb{
  display:block;height:56px;border-radius:8px;overflow:hidden;margin-bottom:8px;
  background:var(--cream);
}
.hbtn .hthumb img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block}
.hbtn .hn{font-family:'Teko',sans-serif;font-weight:500;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.hbtn:hover{border-color:var(--marigold)}
.hbtn.on{background:var(--marigold);color:var(--teal);border-color:var(--marigold)}
.bill-btns{display:flex;gap:10px;flex-wrap:wrap}
.bbtn{
  flex:1;min-width:100px;
  background:rgba(251,243,226,.08);border:2px solid rgba(251,243,226,.35);border-radius:26px;
  padding:11px 12px 8px;cursor:pointer;color:var(--cream);
  font-family:'Teko',sans-serif;font-weight:500;font-size:17px;letter-spacing:.1em;
  transition:all .25s;text-align:center;
}
.bbtn:hover{border-color:var(--marigold)}
.bbtn.on{background:var(--marigold);color:var(--teal);border-color:var(--marigold);font-weight:600}
.batt-row{display:flex;align-items:center;gap:14px}
.switch{
  width:62px;height:34px;border-radius:18px;border:2px solid rgba(251,243,226,.5);
  background:rgba(251,243,226,.08);cursor:pointer;position:relative;transition:background .3s,border-color .3s;
}
.switch::after{
  content:"";position:absolute;top:3px;left:4px;width:24px;height:24px;border-radius:50%;
  background:var(--cream);transition:left .3s cubic-bezier(.34,1.56,.64,1),background .3s;
}
.switch.on{background:var(--marigold);border-color:var(--marigold)}
.switch.on::after{left:30px;background:var(--teal)}
.batt-row span{font-size:14.5px;color:rgba(251,243,226,.8)}
.readout{
  margin-top:8px;background:rgba(251,243,226,.07);border:1.5px dashed rgba(251,243,226,.3);border-radius:14px;
  padding:20px 22px 16px;
}
.readout .rrow{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:7px 0;border-bottom:1px dashed rgba(251,243,226,.18);
}
.readout .rrow:last-child{border-bottom:0}
.readout .rk{font-family:'Teko',sans-serif;font-weight:500;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,243,226,.65)}
.readout .rvl{font-family:'Teko',sans-serif;font-weight:600;font-size:clamp(24px,2.6vw,32px);color:var(--marigold)}
.readout .rvl small{font-size:.55em;color:rgba(251,243,226,.6)}
.readout .rrow.total{border-top:1.5px solid rgba(251,243,226,.35);margin-top:4px;padding-top:12px}
.readout .rrow.total .rvl{font-size:clamp(29px,3.1vw,39px)}
.sizer-fine{margin-top:16px;font-size:12px;color:rgba(251,243,226,.55)}
#sizer .cta-big{display:inline-block;margin-top:22px}

/* ---------- story ---------- */
#story{background:var(--cream-deep)}
.duo-story{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:860px){.duo-story{grid-template-columns:1fr}}
.print.big{max-width:360px;margin:0 auto;--tilt:-1.6deg}
.print.big img{width:100%;height:auto;display:block;border-radius:2px}
.sec-kick.left{justify-content:flex-start}
h2.script.left{text-align:left;transform:rotate(-1deg)}
.story-p{color:var(--teal-soft);max-width:54ch}
.creds-list{list-style:none;margin-top:22px}
.story-more{margin-top:24px}
.creds-list li{
  padding:12px 2px;border-bottom:1px solid var(--teal-faint);
  display:flex;gap:14px;align-items:baseline;font-size:15px;color:var(--teal-soft);
}
.creds-list li::before{content:"☀";color:var(--rust);font-size:14px;flex:none}
.creds-list b{color:var(--teal);font-weight:600}

/* ---------- commercial band ---------- */
#commercial{position:relative;background:var(--cream-deep)}
#commercial > img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
#commercial .overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding-bottom:clamp(20px,4vw,54px)}
#commercial .inner{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
#commercial .card{
  max-width:380px;margin-left:auto;background:var(--teal);color:var(--cream);
  border-radius:14px;padding:28px 28px 26px;
  box-shadow:0 18px 44px rgba(28,72,90,.35);
}
#commercial .no{font-family:'Teko',sans-serif;font-weight:600;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--marigold)}
#commercial h3{font-family:'Lobster',cursive;font-weight:400;font-size:clamp(26px,3.4vw,40px);margin:6px 0 10px;transform:rotate(-1deg)}
#commercial p{font-size:14.5px;line-height:1.65;color:rgba(251,243,226,.85)}
#commercial .cta-ghost{display:inline-block;margin-top:16px;color:var(--cream);border-color:var(--marigold);font-size:17px;padding:11px 22px 9px}
#commercial .cta-ghost:hover{background:var(--marigold);color:var(--teal)}
@media(max-width:820px){
  #commercial .overlay{position:static}
  #commercial .inner{padding:0}
  #commercial .card{max-width:none;border-radius:0;box-shadow:none;padding:26px clamp(18px,4vw,48px) 30px}
}

/* ---------- (removed) night interlude ---------- */
#night{padding:0;background:var(--teal-deep);position:relative}
#night img{display:block;width:100%;height:auto;opacity:.96}
#night .overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(transparent 40%, rgba(22,57,74,.88));
}
#night .overlay .inner{
  width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,48px) clamp(26px,5vh,54px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
}
#night h3{
  font-family:'Lobster',cursive;font-weight:400;font-size:clamp(26px,4vw,46px);color:var(--cream);transform:rotate(-1deg);
}
#night p{color:rgba(251,243,226,.8);max-width:44ch;font-size:15px}
#night .sleep{width:clamp(90px,11vw,150px);flex:none;transform:rotate(-3deg)}

/* ---------- final CTA ---------- */
#final{text-align:center;position:relative}
#final .mascot-final{width:clamp(150px,18vw,230px);margin:0 auto 6px;display:block}
#final .mascot-final img{width:100%;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
#final .mascot-final:hover img{transform:rotate(-5deg) scale(1.05)}
#final h2{font-family:'Lobster',cursive;font-weight:400;font-size:clamp(40px,6.4vw,76px);color:var(--teal);transform:rotate(-1.4deg)}
#final h2 em{font-style:normal;color:var(--rust)}
#final .sub{margin:14px auto 0;max-width:52ch;color:var(--teal-soft)}
#final .cta-row{margin-top:30px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
#final .phone{
  margin-top:22px;font-family:'Teko',sans-serif;font-weight:500;font-size:19px;letter-spacing:.16em;color:var(--teal-soft);
}
#final .phone a{color:var(--rust);text-decoration:none}

/* footer: production chrome via prodchrome.css */


/* ---------- mobile polish (pass 1 review) ---------- */
@media(max-width:760px){
  .hero-copy{margin-top:-56px}
  .hero-copy h1{font-size:clamp(38px,11vw,54px)}
  .route .line{left:24px}
  .stop{padding-left:66px;padding-bottom:44px}
  .stop .dot{left:2px;width:44px;height:44px;font-size:20px}
  .stop .pose{width:96px}
  section{padding:clamp(48px,7vh,80px) 0}
  .sec-sub{padding:0 6px}
  .spread{margin-top:44px}
  .copy-side h3{margin-top:-4px}
  .jobcard{padding:22px 20px 18px}
  #final .cta-row{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}