/* Scent group pages: scent-detection, star-academy, merch, raffle-scent,
   plus the light setup screen on scent-detection-app. Loaded after modern.css. */

/* Nose photo card at the top of a page (homepage card, own padding here) */
html body section.m-nose.s-top{background:#fff;padding:var(--r-sec) 0!important}
html body .m-nose-card .btn{margin-top:var(--r-block)!important}

/* White cards inside white sections, sand cards inside sand sections, so tiles always read */
html body .k-sec:not(.k-alt) .t-sign{background:#f3f2ec}
html body .k-alt .t-sign{background:#fff}
html body .k-alt .t-steps li{background:#fff}
html body .k-sec .t-signs{margin-top:var(--r-block)!important}
html body .k-sec .t-tally{margin-top:var(--r-block)!important}
html body .k-sec .t-steps{margin-top:var(--r-block)!important}
html body .k-sec .t-faqs{margin-top:var(--r-block)!important}
html body .k-sec .m-myth-list{margin-top:var(--r-block)!important}

/* Real photo grid (no sideways scrolling) */
html body .s-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:var(--r-block)}
html body .s-photos.s-3{grid-template-columns:repeat(3,1fr)}
html body .s-photos figure{margin:0}
html body .s-photos img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;background:#e9e7df}
html body .s-photos figcaption{margin-top:8px;font-size:13.5px;line-height:1.4;color:#55594f}
@media (max-width:760px){
  html body .s-photos,html body .s-photos.s-3{grid-template-columns:1fr 1fr}
  html body .s-photos.s-3 figure:last-child{grid-column:1 / -1}
  html body .s-photos.s-3 figure:last-child img{aspect-ratio:16/10}
}
html body .s-photos + .k-tiles{margin-top:12px}

/* Checklists inside tiles */
html body .k-tile .k-checks{margin-top:6px}
html body .k-tile .k-checks li{font-size:15px}
html body .k-tile.s-yes{box-shadow:inset 0 0 0 2px var(--sage)}

/* Big number + bars on the dark science band */
html body .s-stat{margin-top:var(--r-block);display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;max-width:760px}
html body .s-num{font-family:var(--font-h);font-weight:800;font-size:60px;line-height:.95;color:#fff}
html body .s-num small{display:block;margin-top:8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft-sage)}
html body .s-bars{display:flex;flex-direction:column;gap:10px}
html body .s-bar{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;font-family:var(--font-h);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(254,254,254,.8)}
html body .s-bar i{display:block;height:12px;border-radius:6px;background:var(--sage);width:var(--w);min-width:6px}
html body .s-bars p{margin-top:2px;font-size:15px;line-height:1.5;color:rgba(254,254,254,.8)}
@media (max-width:760px){html body .s-stat{grid-template-columns:1fr;gap:16px}}
html body .k-dark .k-tile{background:rgba(255,255,255,.07)}
html body .k-dark .k-tile b{color:#fff}
html body .k-dark .k-tile span{color:rgba(254,254,254,.8)}
html body .s-stat + .k-tiles{margin-top:var(--r-block)}

/* Two option cards side by side */
html body .k-prices.s-two{grid-template-columns:repeat(2,1fr);max-width:860px}
@media (max-width:900px){html body .k-prices.s-two{grid-template-columns:1fr}}
html body .k-price .k-checks + .btn{margin-top:var(--r-block)}
html body .k-price-line + .k-checks{margin-top:16px}

/* Small chips (cast list, field trip spots, badges) */
html body .s-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--r-block);list-style:none;padding:0}
html body .s-chips li{font-family:var(--font-h);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal);background:#f3f2ec;border-radius:999px;padding:8px 14px}
html body .k-alt .s-chips li{background:#fff}
html body .s-chips + .m-myth-list{margin-top:var(--r-block)!important}

/* Quote */
html body .s-quote{margin-top:var(--r-block);max-width:680px;border-left:3px solid var(--sage);padding:4px 0 4px 18px}
html body .s-quote p{font-family:var(--font-sub);font-size:18px;line-height:1.55;color:#45493f}
html body .s-quote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--font-h);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}

/* Two-column guide block (Neo and Pepper) */
html body .s-guide{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-top:var(--r-block)}
html body .s-guide-photo{background:#fff;border-radius:var(--m-r-lg);overflow:hidden;box-shadow:var(--m-shadow)}
html body .s-guide-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;background:#fff}
html body .s-guide p{font-size:16.5px;line-height:1.6;color:#45493f}
html body .s-guide p + p{margin-top:12px}
html body .s-guide .s-chips{margin-top:16px}
html body .s-guide .k-tile{margin-top:16px}
@media (max-width:760px){html body .s-guide{grid-template-columns:1fr;gap:20px}}

/* Step cards that carry a price */
html body .t-steps .s-price{display:block;margin-top:4px;font-family:var(--font-h);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}

/* Straight talk / plain note box */
html body .s-box{margin-top:var(--r-block);max-width:720px;background:#f3f2ec;border-radius:18px;padding:18px 18px;font-size:15px;line-height:1.55;color:#45493f}
html body .k-alt .s-box{background:#fff}

/* Audition day card */
html body .s-date{margin-top:var(--r-block);background:#fff;border-radius:var(--m-r-lg);box-shadow:var(--m-shadow);padding:22px 20px;max-width:720px}
html body .s-date .k-price-name{display:block}
html body .s-date h3{margin:10px 0 0;font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:30px;line-height:1;color:var(--charcoal)}
html body .s-date p{margin-top:12px;font-size:15.5px;line-height:1.55;color:#45493f}
html body .s-slots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
html body .s-slot{background:#f3f2ec;border-radius:14px;padding:14px}
html body .s-slot b{display:block;font-family:var(--font-h);font-weight:800;font-size:24px;color:var(--charcoal)}
html body .s-slot span{display:block;margin-top:4px;font-size:13.5px;color:#55594f}

/* Forms copied byte for byte from production, restyled for a light section */
html body .k-sec .sa-wl-form,html body .k-sec .apply-form{margin-top:var(--r-block);max-width:720px;background:#fff;border-radius:var(--m-r-lg);box-shadow:var(--m-shadow);border-top:0;padding:22px 20px}
html body .k-sec .sa-wl-f label{color:var(--deep-moss,#4f5a3f)}
html body .k-sec .sa-wl-f input,html body .k-sec .sa-wl-f textarea{color:var(--charcoal);background:#f7f6f1;border:1px solid rgba(45,48,42,.18);border-radius:12px}
html body .k-sec .sa-wl-f input::placeholder,html body .k-sec .sa-wl-f textarea::placeholder{color:#8a8d82}
html body .k-sec .sa-wl-note{color:#55594f}
html body .k-sec .sa-wl-msg.ok{color:var(--charcoal)}
html body .k-sec .sa-wl-msg.err{color:#9b2c22}
html body .k-sec .sa-wl-form .btn{width:100%}
html body .k-sec .apply-form .field input,html body .k-sec .apply-form .field select,html body .k-sec .apply-form .field textarea{border-radius:12px}

/* Video grid and photo band from the original Star Academy page */
html body .k-sec .vids-grid{margin-top:var(--r-block)}
html body .k-sec .vid-card{border-top:0;border-radius:18px}
html body .k-sec .reels-row{margin-top:var(--r-block)}

/* Merch: product grid keeps its own card styles */
html body .k-sec .shop-count{margin-top:var(--r-label);font-family:var(--font-h);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
html body .k-sec #product-grid{margin-top:var(--r-block)}
html body .k-sec .shop-fallback{border-radius:18px}

/* Stat tiles (raffle) */
html body .s-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:var(--r-block);max-width:720px}
html body .s-stats div{background:#f3f2ec;border-radius:18px;padding:18px 10px;text-align:center}
html body .s-stats b{display:block;font-family:var(--font-h);font-weight:800;font-size:40px;line-height:1;color:var(--charcoal)}
html body .s-stats span{display:block;margin-top:8px;font-family:var(--font-h);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#55594f}
html body .k-sec .s-secure{margin-top:var(--r-lead);font-size:14px;color:#55594f}

/* Raffle hero: headlines stay upright */
html body .page-hero .hero-title em{font-style:normal!important;color:var(--soft-sage)}

/* Scent detection app: light first screen (setup only; the app inside stays as is) */
html body #setup-screen .hero{background:#f3f2ec}
html body #setup-screen .hero::before{display:none}
html body #setup-screen .hero-eyebrow{color:var(--sage)}
html body #setup-screen .hero-title{color:var(--charcoal)}
html body #setup-screen .hero-sub{color:#55594f}
html body #setup-screen .dog-setup{background:#fff;border:0;border-radius:24px;box-shadow:0 10px 30px rgba(26,29,24,.08)}
html body #setup-screen .dog-setup label{color:#55594f}
html body #setup-screen .dog-setup input{background:#f7f6f1;border:1px solid rgba(45,48,42,.18);border-radius:12px;color:var(--charcoal)}
html body #setup-screen .dog-setup input::placeholder{color:#8a8d82}
html body #setup-screen .dog-setup button{border-radius:999px}
html body .s-lock{width:13px;height:13px;vertical-align:-2px}

/* Closing CTA band. Its styles live only in the homepage head, so inner pages
   rendered it as a blank white block. Same rules as the homepage, scoped here. */
html body .cta-strip{background:var(--sage);position:relative;overflow:hidden}
html body .cta-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative;z-index:1}
html body .cta-strip h2{font-size:clamp(28px,4.5vw,52px);color:var(--white);margin:0 0 12px}
html body .cta-strip-sub{font-family:var(--font-sub);font-size:16px;font-style:italic;color:rgba(255,255,255,.88);max-width:540px;line-height:1.7}
html body .cta-strip-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-start;flex-shrink:0}
html body .btn-outline-white{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.6)}
@media (max-width:960px){
  html body .cta-strip-inner{flex-direction:column;text-align:center;gap:26px}
  html body .cta-strip-actions{align-items:center;width:100%}
  html body .cta-strip-actions .btn{width:100%;max-width:320px;justify-content:center}
  html body .cta-strip h2{font-size:clamp(26px,8vw,40px)}
  html body .cta-strip-sub{font-size:15px}
}

/* Links inside notes and leads read as links */
html body .k-sec .m-note a,html body .k-sec .m-lead a{color:var(--sage);text-decoration:underline;text-underline-offset:3px}
html body .k-sec.k-dark .m-note{color:rgba(254,254,254,.8)}

/* Star Academy on phones: videos two across, two reels instead of four */
@media (max-width:600px){
  html body .k-sec .vids-grid{grid-template-columns:1fr 1fr;gap:10px}
  html body .k-sec .vid-card{max-width:none;margin:0}
  html body .k-sec .vid-cap{font-size:11px}
  html body .k-sec .reels-row > :nth-child(n+3){display:none!important}
}
html body .btn-dark{background:var(--charcoal);color:var(--white)}

/* Raffle page ships its own --sk9-* variables only. Give it the kit's names
   (same brand values) so kit sections render the same as every other page. */
:root:has(.hero-lede){--charcoal:#2d302a;--charcoal-2:#232620;--deep-moss:#5f6b52;--font-body:'Bitter',serif;--font-h:'Barlow Condensed',sans-serif;
  --font-sub:'Libre Baskerville',serif;--paper:#e6e6e2;--sage:#818f6b;--soft-sage:#a9b29a;--white:#fefefe}
:root:has(.hero-lede) .k-sec,:root:has(.hero-lede) .m-nose{font-family:var(--font-body)}
:root:has(.hero-lede) .eyebrow{font-family:var(--font-h);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);display:block}
:root:has(.hero-lede) .eyebrow.light{color:var(--soft-sage)}
:root:has(.hero-lede) .k-sec h2,:root:has(.hero-lede) .m-nose h2{font-family:var(--font-h);font-weight:800;text-transform:uppercase;font-size:clamp(34px,7vw,52px);line-height:.98}
:root:has(.hero-lede) .k-sec .btn{border-radius:999px}

/* Forms: same gap before the submit button on both Star Academy forms */
html body .k-sec .apply-form .btn{margin-top:var(--r-block)!important}
html body .k-sec .apply-form .form-note,html body .k-sec .sa-wl-note{margin-top:var(--r-lead)!important}

/* Heroes kept from production, brought onto the same scale (10 / 16 / 26) */
html body .hero .hero-content .hero-ctas,html body .hero .hero-content .hero-checks{margin-top:var(--r-block)!important}
:root:has(.hero-lede) .page-hero .hero-eyebrow{margin-bottom:var(--r-label)!important}
:root:has(.hero-lede) .page-hero .hero-title{margin:0!important}
:root:has(.hero-lede) .page-hero .hero-lede{margin:16px 0 0!important}
:root:has(.hero-lede) .page-hero .hero-tags{margin:var(--r-block) 0 0!important}
:root:has(.hero-lede) .page-hero .hero-inner > .btn{margin-top:var(--r-block)!important}
html body .hero .hero-content .hero-sub,html body .hero .hero-content .hero-ctas{margin-bottom:0!important}
html body #setup-screen .hero-eyebrow{margin-bottom:var(--r-label)}
html body #setup-screen .hero-title{margin-bottom:var(--r-lead)}
html body #setup-screen .hero-sub{margin-bottom:var(--r-block)}

/* ================================================================
   Scent detection page, 2026-10-29: more to look at.
   Photo strip, count-up bars, tally meter, scent cloud, lit path.
   Everything is finished by default; html.s-js (scent.js, no
   reduced motion) starts pieces hidden and plays them once on view.
   ================================================================ */

/* Strip sits under the rounded hero */
html body .s-strip{padding:18px 0 8px}

/* Dog vs human bars grow from zero */
html.s-js body .s-grow .s-bar i{width:0;transition:width 1.8s cubic-bezier(.22,1,.36,1)}
html.s-js body .s-grow .s-bar + .s-bar i{transition-delay:.5s}
html.s-js body .s-grow.lit .s-bar i{width:var(--w)}

/* Tally meter fills as signs are tapped */
html body .s-meter{margin-top:12px;max-width:420px;height:10px;border-radius:5px;background:#e6e5dd;overflow:hidden}
html body .s-meter i{display:block;height:100%;width:0;border-radius:5px;background:var(--soft-sage);transition:width .6s cubic-bezier(.22,1,.36,1),background .4s ease}
html body .s-meter.full i{background:var(--sage)}

/* Scent cloud drawing */
html body .s-cloud{margin:var(--r-block) 0 0;max-width:720px;background:#f3f2ec;border-radius:var(--m-r-lg,22px);padding:18px 16px 16px}
html body .s-cloud svg{display:block;width:100%;height:auto;overflow:visible}
html body .s-cone{fill:rgba(129,143,107,.13)}
html body .s-puffs circle{fill:rgba(129,143,107,.32);transform-box:fill-box;transform-origin:center}
html body .s-trail{fill:none;stroke:var(--charcoal);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
html body .s-hide{fill:var(--charcoal)}
html body .s-found{fill:none;stroke:var(--sage);stroke-width:3}
html body .s-cloud text{font-family:var(--font-h);font-weight:800;font-size:17px;letter-spacing:.12em;text-transform:uppercase;fill:#55594f}
html body .s-wind path{fill:none;stroke:#8a8d82;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
html body .s-cloud figcaption{margin-top:12px;font-family:var(--font-sub);font-style:italic;font-size:16px;line-height:1.5;color:#45493f}
html body .k-alt .s-cloud{background:#fff}
/* Puffs: static spread by default */
html body .s-puffs circle:nth-child(1){transform:translate(80px,-8px) scale(1.6)}
html body .s-puffs circle:nth-child(2){transform:translate(170px,14px) scale(2.4)}
html body .s-puffs circle:nth-child(3){transform:translate(270px,-22px) scale(3.2)}
html body .s-puffs circle:nth-child(4){transform:translate(370px,20px) scale(4)}
html body .s-puffs circle:nth-child(5){transform:translate(460px,-30px) scale(4.8)}
html body .s-puffs circle:nth-child(6){transform:translate(530px,26px) scale(5.4)}
/* With JS: puffs drift downwind forever (slow, linear), trail draws once, ring settles */
/* With JS: puffs drift out from the hide once and settle, the trail draws, the ring lands */
html.s-js body .s-puffs circle{transition:transform 2.6s cubic-bezier(.22,1,.36,1),opacity 1.2s ease}
html.s-js body .s-cloud:not(.lit) .s-puffs circle{transform:none;opacity:0}
html.s-js body .s-puffs circle:nth-child(2){transition-delay:.15s}
html.s-js body .s-puffs circle:nth-child(3){transition-delay:.3s}
html.s-js body .s-puffs circle:nth-child(4){transition-delay:.45s}
html.s-js body .s-puffs circle:nth-child(5){transition-delay:.6s}
html.s-js body .s-puffs circle:nth-child(6){transition-delay:.75s}

html.s-js body .s-trail{stroke-dashoffset:1;transition:stroke-dashoffset 3.2s cubic-bezier(.45,0,.25,1) .4s}
html.s-js body .s-cloud.lit .s-trail{stroke-dashoffset:0}
html.s-js body .s-found{opacity:0;transform-origin:70px 140px;transform:scale(.6);transition:opacity .6s ease 3.4s,transform .8s cubic-bezier(.22,1,.36,1) 3.4s}
html.s-js body .s-cloud.lit .s-found{opacity:1;transform:none}
@media (max-width:600px){html body .s-cloud{padding:14px 10px 14px}html body .s-cloud text{font-size:25px}html body .s-trail{stroke-width:5}html body .s-wind path{stroke-width:4}html body .s-found{stroke-width:4}}

/* Path: numbers light up in order, a line runs down to the next step */
html body .s-path li{position:relative}
html body .s-path li:not(:last-child)::after{content:"";position:absolute;left:43px;top:70px;bottom:-30px;width:3px;border-radius:2px;background:var(--sage);z-index:1;transform-origin:top}
html.s-js body .s-path .t-n{background:#fff;color:var(--sage);box-shadow:inset 0 0 0 3px var(--sage);transition:background .5s ease,color .5s ease,box-shadow .5s ease}
html.s-js body .s-path li.lit .t-n{background:var(--sage);color:#fff;box-shadow:0 0 18px rgba(129,143,107,.45)}
html.s-js body .s-path li:not(:last-child)::after{transform:scaleY(0);transition:transform .9s cubic-bezier(.22,1,.36,1) .35s}
html.s-js body .s-path li.lit::after{transform:scaleY(1)}

/* Hero photo is portrait: show the room and logo on phones, the dog at the boxes on wide screens */
html body .s-hero .page-hero-bg{background-position:center 35%}
@media (min-width:761px){html body .s-hero .page-hero-bg{background-position:center 58%}}
html body .k-sec .s-book-line{margin-top:var(--r-block,26px);font-weight:400}

/* Christmas link under the hero (scent-work-christmas page) */
html body .s-xmas{display:flex;align-items:center;gap:14px;margin:12px 12px 0;padding:12px 18px;border-radius:18px;text-decoration:none;min-height:56px;
  background:#4f5a3f url('/img/scent/xmas/paper.jpg?v=2') center/max(100%,900px) auto no-repeat;color:#fff}
html body .s-xmas img{width:40px;height:auto;flex:0 0 auto}
html body .s-xmas span{flex:1;font-family:var(--font-sub);font-style:italic;font-size:16px;line-height:1.3}
html body .s-xmas b{display:block;font-family:var(--font-h);font-style:normal;font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#f3d9a4}
html body .s-xmas i{font-style:normal;font-size:22px;color:#f3d9a4}
@media (max-width:760px){html body .s-xmas{margin:10px 10px 0}}

/* Real class video in Every Dog Starts Here: fills its 4:5 frame */
html body .s-video{margin-top:var(--r-block,26px);max-width:420px;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#2d302a;box-shadow:0 14px 34px rgba(26,29,24,.18)}
html body .s-video video{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){html body .s-video video{display:none}html body .s-video{background:url('/img/scent/video/every-dog.jpg') center/cover}}
html body .t-steps p.s-gift-note{margin-top:8px;font-size:14.5px;color:#a9531f}
html body .t-steps p.s-gift-note a{color:#a9531f;text-decoration:underline;text-underline-offset:3px}