/* Shared theme for the Emotibears page family (about, account, shop, contact, faqs,
   meet-the-bears, news, and all bear-*.html pages). Extracted from what were previously
   ~22 near-identical inline <style> blocks. Page-specific rules stay inline per page;
   this file is the shared base only -- do not add page-specific rules here. */

:root{
/* ---------------------------------------------------------------------------
   CONVERGED 8 Sep 2026. The site previously ran two palettes: this file (pastel
   sky/sun/meadow/bubblegum/berry on near-white) and styles.css (warm cream with
   coral/gold/teal/plum/navy). styles.css won -- it carries the homepage, the whole
   club and member area, and every page added this month.

   The canonical tokens below are copied verbatim from styles.css. The legacy
   pastel names underneath are kept as ALIASES pointing at them, so the ~120
   var(--sky) / var(--berry) / ... references already written across these 22
   pages keep working and did not have to be hand-edited.

   Adding a colour? Add it to styles.css first, then mirror it here.
   Hex values still need checking against Brand Guide v1.1 (not in this repo).
   --------------------------------------------------------------------------- */

/* --- canonical, mirrored from styles.css --- */
--cream:#FBF3E7; --cream-2:#F3E6D2; --ink:#2E2A24; --navy:#233A5C; --navy-deep:#151F33;
--coral:#E8734A; --coral-deep:#C85A34; --gold:#E0A937; --teal:#3E8E82; --plum:#8A5A8C;
--line:rgba(46,42,36,0.12); --radius-lg:28px; --radius-md:18px;
--coral-btn:#CE491A; --coral-btn-shadow:#A93C15;

/* --- legacy pastel names, now aliases (do not use in new code) --- */
--sky:var(--navy); --sun:var(--gold); --meadow:var(--teal);
--bubblegum:var(--coral); --berry:var(--plum);
--paper:#FFFFFF; --cream-dim:var(--cream-2); --muted:#584F40;
--accent:var(--teal);
/* Solid-fill variants for white text. --teal is 3.9:1 on white and --coral 3.0:1,
   both below the WCAG 2.2 AA 4.5:1 floor, so buttons use these deeper tones:
   --coral-btn 5.1:1, --meadow-btn 6.3:1. */
--bubblegum-btn:var(--coral-btn); --meadow-btn:#2F6B61;

/* --- type: Work Sans + JetBrains Mono dropped, matching styles.css --- */
--font-display:'Baloo 2', sans-serif;
--font-body:'Nunito Sans', sans-serif;
/* --font-mono was JetBrains Mono, used for 17 small uppercase labels. styles.css
   sets those in the body face, so the third webfont is gone; the alias remains so
   existing var(--font-mono) references still resolve. */
--font-mono:'Nunito Sans', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body); background:var(--cream); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased;}
.skip-link{position:absolute; top:-100px; left:12px; z-index:1000; background:var(--ink); color:var(--cream); padding:12px 20px; border-radius:8px; font-weight:700; text-decoration:none; transition:top .15s ease;}
.skip-link:focus{top:12px;}
/* Screen-reader-only text. Was missing from theme.css: shop.html's
   <h2 class="visually-hidden">Shop products</h2> was rendering visibly. Several pages
   defined this inline; putting it here so every theme.css page gets it. */
.visually-hidden{position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;}
img,svg,video,canvas{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
ul{list-style:none;}
/* pill form, matching styles.css. Pages that override .eyebrow{color:...} still work --
   only the text colour changes, the pill itself comes from here. */
.eyebrow{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); padding:7px 14px; border-radius:999px; font-weight:800; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--coral-deep);}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(16px, 4vw, 28px);}
.reveal{opacity:1; transform:none;}
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--reveal-delay, 0s);}
.js .reveal.is-visible{opacity:1; transform:translateY(0);}
@keyframes floaty{ 0%,100%{ transform:translateY(0) translateX(0); } 50%{ transform:translateY(-18px) translateX(10px); } }
@keyframes floaty-rev{ 0%,100%{ transform:translateY(0) translateX(0); } 50%{ transform:translateY(14px) translateX(-12px); } }
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
@keyframes hop{ 0%,100%{ transform:translateY(0) scale(1); } 35%{ transform:translateY(-14px) scale(1.05); } 60%{ transform:translateY(2px) scale(.98); } }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,115,74,.45); } 50%{ box-shadow:0 0 0 10px rgba(232,115,74,0); } }
@keyframes barPulse{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
@keyframes waveArrow{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(8px); opacity:1; } }
@keyframes letterHop{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes spinSlow{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes fadeInDown{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
header{position:sticky; top:0; z-index:50; background:rgba(251,243,231,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); animation:fadeInDown .6s ease both;}
/* .header-inner is this family's header wrapper; styles.css calls it .wrap > .nav-row.
   Metrics below are matched to .nav-row so the sticky bar is the same height on every
   page of the site. */
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px clamp(16px, 4vw, 28px); max-width:1180px; margin:0 auto; gap:16px;}
.logo{display:flex; align-items:center;}
.logo img{height:56px; width:auto;}
nav.primary-nav{display:flex; gap:24px; font-weight:700; font-size:.92rem; color:var(--navy); flex-wrap:wrap;}
nav.primary-nav a{opacity:.82; padding:6px 2px; border-bottom:2px solid transparent; transition:opacity .15s, border-color .15s;}
nav.primary-nav a:hover{opacity:1; border-color:var(--coral);}
nav.primary-nav a[aria-current="page"]{opacity:1; color:var(--coral-deep); border-color:var(--coral);}
.header-right{display:flex; align-items:center; gap:14px;}
.icon-btn{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--cream-2); border:1px solid var(--line); color:var(--navy); transition:background .2s ease, transform .2s ease;}
.icon-btn svg{width:16px; height:16px;}
/* icon strokes follow the button colour instead of a baked-in hex */
.icon-btn svg circle, .icon-btn svg path{stroke:currentColor;}
.icon-btn:hover{background:var(--sun); transform:translateY(-2px);}
.social-row{display:flex; gap:8px;}
.social-row a{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--navy); color:var(--cream); transition:transform .2s ease, background .2s ease;}
.social-row a:hover{transform:translateY(-2px); background:var(--bubblegum-btn);}
.social-row svg{width:16px; height:16px;}
.nav-toggle{display:none; background:none; border:none;}
.hero{position:relative; overflow:hidden; padding:70px 28px 60px; background:linear-gradient(180deg, #F3E6D2 0%, var(--cream) 65%);}
.hero-blob{position:absolute; border-radius:50%; filter:blur(2px); opacity:.5;}
.blob1{width:180px; height:180px; background:var(--sun); top:40px; left:6%; opacity:.35; animation:floaty 7s ease-in-out infinite;}
.blob2{width:140px; height:140px; background:var(--bubblegum); bottom:20px; right:8%; opacity:.3; animation:floaty-rev 8.5s ease-in-out infinite;}
.blob3{width:90px; height:90px; background:var(--sky); top:120px; right:18%; opacity:.35; animation:floaty 6s ease-in-out infinite; animation-delay:.6s;}
.scroll-cue{position:relative; z-index:2; margin-top:38px; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;}
.scroll-cue svg{animation:waveArrow 1.6s ease-in-out infinite;}
.hero-inner{position:relative; z-index:2; max-width:1180px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center;}
.hero .eyebrow{color:var(--berry); margin-bottom:14px;}
.hero h1{font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.08; max-width:16ch; color:var(--navy);}
.hero p.sub{max-width:52ch; margin:18px auto 30px; color:var(--muted); font-size:1.06rem;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:8px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:800; font-size:.95rem; border:2px solid transparent; transition:transform .12s ease, box-shadow .2s ease;}
/* .btn-primary here is the same button as .btn-coral in styles.css. Both names are
   defined so either spelling renders identically anywhere on the site. */
.btn-primary, .btn-coral{background:var(--coral-btn); color:#fff; box-shadow:0 6px 0 var(--coral-btn-shadow);}
.btn-primary:hover, .btn-coral:hover{transform:translateY(-2px);}
.btn-primary:active, .btn-coral:active{transform:translateY(2px); box-shadow:0 2px 0 var(--coral-btn-shadow);}
.btn-pulse{animation:pulseGlow 2.4s ease-out infinite;}
.btn-pulse:hover{animation:none;}
.btn-outline{border:2px solid var(--navy); color:var(--navy); background:transparent; font-weight:800;}
/* styles.css calls this variant .btn-ghost; theme.css only had .btn-outline, so
   account.html's .btn-ghost button rendered borderless. Aliased rather than renamed
   so both stylesheets accept either name. */
.btn-ghost{border:2px solid var(--navy); color:var(--navy); background:transparent; font-weight:800;}
.btn-sm{padding:9px 18px; font-size:.82rem;}
.page-hero{position:relative; overflow:hidden; padding:56px 28px 50px; background:linear-gradient(180deg, #F3E6D2 0%, var(--cream) 80%); text-align:center;}
.page-hero .eyebrow{color:var(--berry);}
.page-hero h1{font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,4vw,2.7rem); margin-top:10px; color:var(--navy);}
.page-hero p{max-width:56ch; margin:14px auto 0; color:var(--muted); font-size:1.02rem;}
/* Meet the Bears intro (client copy 4 Sep 2026) - several stacked paragraphs, so give the
   closing tagline a little separation from the body text above it. */
/* ---- Meet the Bears intro (reformatted 4 Sep 2026) ----
   The client copy is six paragraphs. Centred, at hero width, that was an unreadable slab:
   only the short welcome line stays centred in the hero; the body sits left-aligned on a
   62ch measure, and the closing line becomes a pull-quote rather than another paragraph. */
.page-hero .hero-lead{max-width:46ch; font-size:1.14rem; font-weight:600; color:var(--ink);}

.meet-intro{background:var(--paper); padding:64px 0 56px;}
.meet-intro-body{max-width:62ch; margin:0 auto; text-align:left;}
.meet-intro-body p{color:var(--muted); font-size:1.05rem; line-height:1.78; margin-bottom:20px;}
.meet-intro-body p:last-child{margin-bottom:0;}
/* first paragraph carries a little more weight so the block has an entry point */
.meet-intro-body p:first-child{color:var(--ink); font-size:1.1rem;}

.meet-tagline{max-width:62ch; margin:38px auto 0; padding-top:28px; text-align:center;
  border-top:2px solid var(--line);
  font-family:var(--font-display); font-weight:800; color:var(--berry);
  font-size:clamp(1.15rem,2.4vw,1.45rem); line-height:1.4;}

@media (max-width:560px){
  .meet-intro{padding:44px 0 40px;}
  .meet-intro-body p{font-size:1rem; line-height:1.72;}
}
.page-hero .hero-blob{opacity:.28;}
.meet{padding:90px 0 60px;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head .eyebrow{color:var(--coral-deep); margin-bottom:14px;}
.section-head h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.2vw,2.4rem); margin-top:8px; color:var(--navy);}
.section-head p{margin-top:14px; color:var(--muted); font-size:1rem; max-width:56ch;}
.section-head.center p{margin-left:auto; margin-right:auto;}
.bear-picker{display:grid; grid-template-columns:230px 1fr; gap:48px; align-items:center;}
.bear-stage{position:relative; width:210px; height:210px; margin:0 auto;}
.bear-glow{position:absolute; inset:-22px; border-radius:50%; background:var(--accent); filter:blur(34px); opacity:.4; transition:background .6s ease; animation:breathe 4.5s ease-in-out infinite;}
.bear-svg{position:relative; z-index:2; width:100%; height:100%; animation:breathe 4.5s ease-in-out infinite; transform-origin:center;}
.bear-stage.hop .bear-svg{animation:hop .55s ease;}
.face-set{transition:opacity .3s ease;}
.face-set[data-hidden="true"]{opacity:0; pointer-events:none;}
.face-set[data-hidden="false"]{opacity:1;}
.value-btns{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px;}
.value-btn{font-family:var(--font-mono); font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; padding:10px 18px; border-radius:999px; border:2px solid var(--line); background:var(--paper); color:var(--ink); transition:all .25s ease;}
.value-btn:hover{border-color:var(--accent);}
.value-btn[aria-pressed="true"]{background:var(--meadow-btn); color:#fff; border-color:var(--meadow-btn); box-shadow:0 8px 18px -8px var(--meadow-btn);}
.value-btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible{outline:3px solid var(--sun); outline-offset:3px;}
.value-copy h3{font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--ink); margin-bottom:8px; transition:color .4s ease;}
.value-copy p{color:var(--muted); max-width:46ch;}
.bio-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; margin-top:20px;}
.bio-card{background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:24px; transition:transform .25s ease, box-shadow .25s ease;}
.bio-card:hover{transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(46,42,36,.25);}
.bio-card h3{font-family:var(--font-display); font-size:1.15rem; margin-bottom:4px;}
.bio-card .role{font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--berry); margin-bottom:10px; display:block;}
.bio-card p{color:var(--muted); font-size:.9rem;}
/* Bear strapline (client wireframe, 4 Sep 2026) - only the four confirmed bears have one,
   so this must read as an optional extra line, not a missing field on the others. */
.bio-card .bio-strapline{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--ink);}
.shop{background:var(--paper); padding:90px 0;}
.filter-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;}
.filter-tab{font-family:var(--font-mono); font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; padding:9px 16px; border-radius:999px; border:2px solid var(--line); background:var(--cream); color:var(--ink); transition:all .25s ease;}
.filter-tab:hover{border-color:var(--bubblegum);}
.filter-tab[aria-pressed="true"]{background:var(--ink); color:var(--cream); border-color:var(--ink);}
.shop-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px;}
.product-card{background:var(--cream); border-radius:22px; padding:20px; border:1px solid var(--line); transition:transform .25s ease, box-shadow .25s ease;}
.product-card:hover{transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(46,42,36,.25);}
.swatch{height:140px; border-radius:16px; margin-bottom:16px; display:flex; align-items:center; justify-content:center; font-size:3rem; transition:transform .3s ease; overflow:hidden;}
.product-card:hover .swatch{transform:scale(1.06);}
.swatch-img{background:var(--cream-dim); padding:0;}
.swatch-img img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
/* Class names are kept (shop.html references .sky/.sun/.meadow/.bubblegum/.berry on
   30 product cards) but the gradients are now tints of the converged accents. */
.swatch.sky{background:linear-gradient(160deg,#DDE4EE,#A9B9D1);}
.swatch.sun{background:linear-gradient(160deg,#F8ECD0,#F0CE7E);}
.swatch.meadow{background:linear-gradient(160deg,#DCEBE8,#A5CCC5);}
.swatch.bubblegum{background:linear-gradient(160deg,#FAE3D8,#F2B08D);}
.swatch.berry{background:linear-gradient(160deg,#EDE0EE,#C9A8CB);}
.age-tag{font-family:var(--font-mono); font-size:.68rem; color:var(--berry); font-weight:600; letter-spacing:.04em;}
.product-card h3{font-family:var(--font-display); font-size:1.05rem; font-weight:700; margin:6px 0 6px;}
.product-card p{font-size:.88rem; color:var(--muted); margin-bottom:14px;}
.product-foot{display:flex; align-items:center; justify-content:space-between;}
.price{font-family:var(--font-mono); font-weight:600; font-size:.92rem;}
.add-btn{font-family:var(--font-mono); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; background:var(--ink); color:var(--cream); border-radius:999px; padding:9px 14px; transition:background .2s ease;}
.add-btn:hover{background:var(--navy);}
.shop-more{text-align:center; margin-top:36px;}
.news{padding:90px 0;}
.news-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px;}
.news-card{background:var(--paper); border-radius:20px; padding:24px; border:1px solid var(--line); transition:transform .25s ease, box-shadow .25s ease;}
.news-card:hover{transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(46,42,36,.2);}
.news-card .date{font-family:var(--font-mono); font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
.news-card .cat{display:inline-block; margin-left:8px; font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:999px; background:var(--cream-dim); color:var(--berry);}
.news-card h3{font-family:var(--font-display); font-size:1.1rem; margin:8px 0 8px;}
.news-card p{font-size:.9rem; color:var(--muted);}
/* full-width dark band: navy-deep, matching .members-inner and the footer in
   styles.css. Small chips and the skip link keep var(--ink). */
.hub{background:var(--navy-deep); color:var(--cream); padding:90px 0;}
/* the .eyebrow pill is white, which does not work on this dark band -- invert it
   rather than leaving gold text on white at 1.9:1 */
.hub .section-head .eyebrow{background:rgba(251,243,231,.10); border-color:rgba(251,243,231,.22); color:var(--gold);}
.hub .section-head h2{color:var(--cream);}
.hub .section-head p{color:#C7CFDD;}
.countdown{display:flex; gap:14px; margin:8px 0 44px; flex-wrap:wrap;}
.cd-unit{background:rgba(251,243,231,.06); border:1px solid rgba(251,243,231,.15); border-radius:16px; padding:16px 22px; min-width:84px; text-align:center;}
.cd-unit .num{font-family:var(--font-mono); font-size:1.7rem; font-weight:600; color:var(--sun);}
.cd-unit .label{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#C7CFDD; margin-top:4px;}
.hub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin-bottom:44px;}
.hub-card{position:relative; border-radius:20px; overflow:hidden; background:#22334D; border:1px solid rgba(251,243,231,.08); padding:22px; min-height:180px; display:flex; flex-direction:column; justify-content:flex-end;}
.hub-card .tag{font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:#C7CFDD; margin-bottom:6px;}
.hub-card .lock{position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; background:rgba(251,243,231,.1); display:flex; align-items:center; justify-content:center; font-size:.85rem;}
.waveform{position:absolute; inset:0; display:flex; align-items:flex-end; gap:3px; padding:20px; opacity:.4;}
.waveform span{flex:1; background:var(--meadow); border-radius:2px; transform-origin:bottom; animation:barPulse 1.2s ease-in-out infinite;}
.video-thumb{position:absolute; inset:0; background:linear-gradient(160deg, rgba(35,58,92,.3), rgba(35,58,92,.05));}
.video-thumb::after{content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; border-radius:50%; background:rgba(251,243,231,.14); border:1px solid rgba(251,243,231,.3);}
.gallery-grid{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:2px; opacity:.45; filter:blur(1px);}
.gallery-grid div{background:var(--bubblegum);}
.gallery-grid div:nth-child(2){background:var(--sun);}
.gallery-grid div:nth-child(3){background:var(--berry);}
.gallery-grid div:nth-child(4){background:var(--meadow);}
.list-lines{position:absolute; inset:20px; opacity:.28;}
.list-lines div{height:8px; background:#C7CFDD; border-radius:4px; margin-bottom:10px;}
.list-lines div:nth-child(2){width:70%;}
.list-lines div:nth-child(3){width:85%;}
.notify-form{display:flex; gap:10px; flex-wrap:wrap; max-width:440px;}
.notify-form input{flex:1; min-width:200px; padding:14px 18px; border-radius:999px; border:1px solid rgba(251,243,231,.25); background:rgba(251,243,231,.06); color:var(--cream); font-family:var(--font-body);}
.notify-form input::placeholder{color:#C7CFDD;}
.notify-note{font-family:var(--font-mono); font-size:.7rem; color:#C7CFDD; margin-top:10px;}
.about{background:var(--cream-dim); padding:80px 0;}
.about-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center;}
.about h2{font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; margin-bottom:14px;}
.about p{color:var(--muted); max-width:50ch;}
.about-badges{display:flex; flex-direction:column; gap:14px;}
.badge{background:var(--paper); border-radius:16px; padding:16px 18px; border:1px solid var(--line); font-size:.9rem; display:flex; gap:12px; align-items:flex-start;}
.badge .dot{width:10px; height:10px; border-radius:50%; margin-top:6px; flex-shrink:0;}
.values-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:16px;}
.value-card{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:20px; text-align:center;}
.value-card .mark{width:44px; height:44px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem;}
.value-card h4{font-family:var(--font-display); font-size:1rem; margin-bottom:6px;}
.value-card p{font-size:.85rem; color:var(--muted);}
.timeline{margin-top:16px; border-left:2px solid var(--line); padding-left:24px; display:flex; flex-direction:column; gap:26px;}
.timeline-item .yr{font-family:var(--font-mono); font-size:.72rem; color:var(--berry); font-weight:600;}
.timeline-item h4{font-family:var(--font-display); font-size:1.05rem; margin:4px 0 4px;}
.timeline-item p{color:var(--muted); font-size:.9rem;}
.faqs{padding:90px 0;}
.faq-list{max-width:760px; display:flex; flex-direction:column; gap:12px;}
.faq-item{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:6px 22px; transition:box-shadow .25s ease;}
.faq-item[open]{box-shadow:0 14px 30px -18px rgba(46,42,36,.25);}
.faq-item summary{cursor:pointer; list-style:none; padding:16px 0; font-family:var(--font-display); font-weight:700; font-size:1rem; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--cream-dim); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); transition:transform .3s ease;}
.faq-item[open] summary .plus{transform:rotate(45deg); background:var(--sun);}
.faq-item p{color:var(--muted); font-size:.92rem; padding-bottom:18px;}
.contact{padding:90px 0;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.form-field{margin-bottom:16px; display:flex; flex-direction:column; gap:6px;}
.form-field label{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.form-field input, .form-field textarea{padding:13px 16px; border-radius:12px; border:1px solid var(--line); background:var(--paper); font-family:var(--font-body); font-size:.95rem; color:var(--ink);}
.form-field textarea{resize:vertical; min-height:120px;}
.contact-info{display:flex; flex-direction:column; gap:18px;}
.info-card{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:20px; display:flex; gap:14px; align-items:flex-start;}
.info-card .ico{width:38px; height:38px; border-radius:50%; background:var(--cream-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.info-card p{font-size:.87rem; color:var(--muted);}
.account{padding:90px 0;}
.account-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--paper); border:1px solid var(--line); border-radius:26px; overflow:hidden;}
.account-panel{padding:44px;}
.account-panel.brand{background:linear-gradient(160deg,var(--sky),var(--berry)); color:#fff; display:flex; flex-direction:column; justify-content:center;}
.account-panel.brand h2{font-family:var(--font-display); font-size:1.7rem; margin-bottom:12px;}
.account-panel.brand p{opacity:.92; font-size:.95rem;}
.account-tabs{display:flex; gap:8px; margin-bottom:24px;}
.account-tab{font-family:var(--font-mono); font-size:.76rem; font-weight:600; text-transform:uppercase; padding:9px 16px; border-radius:999px; border:2px solid var(--line); background:var(--cream); color:var(--ink);}
.account-tab[aria-pressed="true"]{background:var(--ink); color:var(--cream); border-color:var(--ink);}
/* Footer. Mirrored from styles.css so the single site footer (index.html's) renders
   identically on this family's 22 pages. Keep the two blocks in sync. */
footer{background:var(--navy-deep); color:#C7CFDD; padding:56px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:40px;}
.foot-grid h2, .foot-grid h3, .foot-grid h4{color:#fff; font-family:var(--font-display); font-size:1rem; margin-bottom:14px;}
.foot-grid ul{display:flex; flex-direction:column; gap:9px; font-size:.88rem;}
.foot-grid ul a{opacity:.82; transition:opacity .15s;}
.foot-grid ul a:hover{opacity:1; color:var(--gold);}
.foot-logo img{height:40px; width:auto; max-width:140px; margin-bottom:12px;}
.socials{display:flex; gap:10px; margin-top:16px;}
.socials a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background .15s;}
.socials a:hover{background:var(--coral);}
.socials svg{width:16px; height:16px; fill:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; justify-content:space-between; font-size:.8rem; flex-wrap:wrap; gap:10px; color:#8a92a6;}
.footer-credit{opacity:.75;}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .foot-grid{grid-template-columns:1fr;} .foot-bottom{font-size:.72rem;} }

@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1; transform:none; transition:none;}
  *{scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important;}
}
@media (max-width:900px){
  .js nav.primary-nav{position:fixed; inset:62px 0 0 0; background:var(--cream); flex-direction:column; padding:30px 28px; gap:20px; transform:translateX(100%); transition:transform .3s ease; overflow-y:auto; z-index:40;}
  .js nav.primary-nav.open{transform:translateX(0);}
  .js .nav-toggle{display:block;}
}
@media (max-width:640px){
  .page-hero, .hero{padding:40px 16px 36px;}
  .section-head{margin-bottom:30px;}
  .shop-grid, .news-grid, .hub-grid, .bio-grid, .values-grid, .timeline-cards{grid-template-columns:1fr;}
  .account-panel{padding:28px 20px;}
}
@media (max-width:480px){
  .header-inner{padding:12px 14px; gap:10px;}
  .header-right{gap:8px;}
  .header-right .social-row{display:none;}
  .icon-btn{width:30px; height:30px;}
  .btn{padding:9px 14px; font-size:.82rem;}
  .btn-sm{padding:8px 11px; font-size:.75rem;}
  .hero p.sub, .page-hero p{font-size:.94rem;}
}
@media (min-width:900px) and (max-width:1200px) and (orientation:landscape){
  .header-inner{padding:12px 20px;}
  nav.primary-nav{gap:14px; font-size:.84rem;}
  .hero-inner, .about-hero .wrap, .story-layout, .contact-grid, .account-grid{gap:28px;}
}

/* ---------- Shop not-yet-open placeholder banner (shop.html, 10 Oct 2026) ---------- */
.shop-closed-banner{background:#FFF4D6; border-bottom:2px solid var(--gold); padding:18px 0;}
.shop-closed-banner .wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.shop-closed-banner .wrap > div{flex:1 1 320px;}
.shop-closed-icon{font-size:2rem; line-height:1;}
.shop-closed-banner p{margin:0; color:var(--ink); line-height:1.55;}
.shop-closed-banner .shop-closed-title{font-family:'Baloo 2', sans-serif; font-weight:700; font-size:1.25rem; color:var(--navy);}

/* SHOP CLOSED UNTIL 1 NOV 2026 (Colin, 10 Oct): every link to shop.html carries data-shop-hidden.
   On opening day DELETE THIS RULE (in styles.css AND theme.css) and the links come back. */
[data-shop-hidden]{display:none !important;}

/* Emotibears "Paws 4 Hugs" logo in page headers - replaced the decorative hero blobs
   (client request, Eileen Debenham 11 Oct 2026). Beside the heading on wide screens,
   centred above it on phones. */
.hero-logo{position:absolute; top:34px; width:clamp(96px, 10vw, 140px); height:auto; z-index:1;}
.hero-logo--left{left:6%;}
.hero-logo--right{right:7%;}
@media (max-width:760px){
  .hero-logo{position:static; display:block; width:84px; margin:0 auto 14px;}
}

/* Bears revealed behind the doors (renderRealBearGrid in script.js, 12 Oct 2026) */
.bio-card--new{position:relative;}
.bio-card .bio-new{display:inline-block; margin:2px 0 8px; padding:3px 10px; border-radius:999px; background:var(--gold); color:var(--navy-deep, #151F33); font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;}

/* "At home with <bear>" house picture on bear pages (client art, 12 Oct 2026) */
.bear-home{padding:8px 0 34px;}
.bear-home-figure{margin:0 auto; max-width:900px; text-align:center;}
.bear-home-figure img{width:100%; height:auto; border-radius:24px; border:4px solid #fff; box-shadow:0 24px 44px -26px rgba(46,42,36,.45);}
.bear-home-figure figcaption{margin-top:14px; color:var(--muted); line-height:1.5;}
.bear-home-figure figcaption strong{display:block; font-family:var(--font-display); font-size:1.25rem; color:var(--navy);}
.bear-home-where{display:block; font-size:.95rem;}