/* Collywobble V7 — Storybook polish, book teaser and brand purpose */

/* Header: keep inner-page nav from slicing through long page screenshots/content. */
.site-header{
  position:relative;
}
.site-header .nav-wrap{
  padding-top:10px;
  padding-bottom:10px;
}
.site-header .logo .brand-logo-image{
  width:186px;
  max-height:96px;
}

/* Let the new Storybook & Warm lock-up breathe. */
.footer-brand-image{
  width:232px;
  margin-bottom:10px;
}
.footer-logo::after{
  content:"♥";
  display:inline-flex;
  width:24px;
  height:24px;
  margin-left:7px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fb8a82;
  color:#fff7e8;
  font-size:13px;
  line-height:1;
  vertical-align:8px;
  transform:rotate(-8deg);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

/* Family page refinement */
.family-page .hero{ padding-top:52px; padding-bottom:30px; }
.family-page .hero .container{ gap:54px; }
.family-page .hero-art{ min-height:430px; }
.family-page .hero-art img{
  max-height:none;
  width:min(100%,620px);
}
.family-page .section-head{ max-width:720px; }
.family-page .split-copy p{ font-size:1.035rem; line-height:1.72; }
.family-page .section.bg-soft{
  margin:24px 0;
  border-radius:42px 28px 46px 32px;
  background:
    radial-gradient(circle at 92% 15%,rgba(245,195,54,.11),transparent 17rem),
    radial-gradient(circle at 6% 88%,rgba(47,193,201,.10),transparent 18rem),
    #fffdf8;
  box-shadow:0 18px 44px rgba(73,45,94,.045);
}
.family-page #poppy{ padding-top:62px; }
.family-page #rosie .split-art{
  min-height:390px;
  border-radius:34px 44px 32px 46px;
  overflow:hidden;
  background:#f7ead8;
  box-shadow:0 18px 38px rgba(73,45,94,.08);
}
.family-page #rosie .rosie-character-art{
  width:100%;
  height:390px;
  max-height:none;
  object-fit:cover;
  object-position:57% 28%;
  transform:scale(1.34);
}
.family-page .bg-teal .card-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.family-page .family-promise{
  position:relative;
  overflow:hidden;
}
.family-page .family-promise::before,
.family-page .family-promise::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(47,193,201,.08);
  filter:blur(2px);
}
.family-page .family-promise::before{ left:-95px; top:15px; }
.family-page .family-promise::after{ right:-100px; bottom:-80px; background:rgba(245,195,54,.12); }

/* Homepage additions */
.book-teaser{
  padding:34px 0 38px;
  background:#fff8ea;
}
.book-teaser-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:26px;
  align-items:center;
  padding:34px 40px;
  border-radius:34px 42px 30px 46px;
  background:linear-gradient(125deg,#6b3fa0 0%,#51306f 100%);
  box-shadow:0 22px 44px rgba(78,46,108,.16);
}
.book-teaser-card::after{
  content:"SQUEAK!";
  position:absolute;
  right:36px;
  top:20px;
  color:rgba(255,255,255,.09);
  font-family:var(--font-display);
  font-size:clamp(3rem,7vw,6.4rem);
  font-weight:800;
  transform:rotate(-7deg);
}
.book-teaser-copy{ position:relative; z-index:1; }
.book-teaser .tag{ background:#ffe47d; color:#6b4c0c; }
.book-teaser h2{ color:#fff; font-size:clamp(2rem,4vw,3rem); margin:10px 0 8px; }
.book-teaser p{ color:rgba(255,255,255,.86); max-width:60ch; font-size:1.06rem; }
.book-teaser-mark{
  position:relative;
  z-index:1;
  justify-self:center;
  width:185px;
  height:185px;
  border-radius:50% 46% 52% 44%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#ffe47d;
  color:#51306f;
  font-family:var(--font-display);
  font-weight:800;
  transform:rotate(4deg);
  box-shadow:0 12px 0 rgba(34,19,53,.14);
}
.book-teaser-mark strong{ font-size:1.45rem; line-height:1.05; }
.book-teaser-mark span{ font-size:.8rem; margin-top:7px; letter-spacing:.06em; text-transform:uppercase; }
.book-teaser-link{text-decoration:none;transition:transform .18s ease,box-shadow .18s ease;}
.book-teaser-link:hover,.book-teaser-link:focus-visible{transform:translateY(-4px) rotate(1deg);box-shadow:0 18px 34px rgba(36,20,52,.24);}
.book-teaser-copy .btn{margin-top:13px;}

/* V26 — responsive family lineup assembled from the current character artwork. */
.family-page .family-hero-lineup{position:relative;z-index:2;width:min(690px,118%);height:430px;margin-left:-9%;display:flex;align-items:flex-end;justify-content:center;gap:0;}
.family-page .family-hero-lineup img{position:relative;width:18.5%;height:100%;max-height:none;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 16px rgba(67,43,78,.14));}
.family-page .family-hero-lineup img:nth-child(1),.family-page .family-hero-lineup img:nth-child(2){width:23%;z-index:1;}
.family-page .family-hero-lineup img:nth-child(3),.family-page .family-hero-lineup img:nth-child(4),.family-page .family-hero-lineup img:nth-child(5){z-index:3;margin-left:-4%;}
.family-page .family-hero-lineup img:nth-child(6){width:20%;z-index:2;margin-left:-3%;}
@media(max-width:900px){.family-page .family-hero-lineup{width:100%;height:330px;margin-left:0;}.family-page .family-hero-lineup img{width:18%;}.family-page .family-hero-lineup img:nth-child(1),.family-page .family-hero-lineup img:nth-child(2){width:22%;}}

.about-collywobble{
  padding:72px 0;
  background:
    radial-gradient(circle at 8% 14%,rgba(47,193,201,.10),transparent 19rem),
    radial-gradient(circle at 92% 78%,rgba(251,138,130,.12),transparent 20rem),
    #fffaf1;
}
.about-collywobble-grid{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:58px;
  align-items:center;
}
.about-collywobble-sign{
  max-width:330px;
  margin:auto;
  padding:28px 26px;
  border-radius:24px 31px 22px 34px;
  background:#c98c57;
  color:#fff8e9;
  text-align:center;
  box-shadow:0 10px 0 #8e6040,0 24px 44px rgba(89,56,37,.14);
  transform:rotate(-2deg);
}
.about-collywobble-sign .heart{ display:block; font-size:1.7rem; margin-bottom:7px; color:#ffe47d; }
.about-collywobble-sign strong{ display:block; font-family:var(--font-display); font-size:1.65rem; line-height:1.08; }
.about-collywobble-copy h2{ font-size:clamp(2rem,4vw,3rem); }
.about-collywobble-copy p{ color:#695b74; font-size:1.07rem; max-width:65ch; }

@media(max-width:980px){
  .family-page .bg-teal .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:860px){
  .site-header .logo .brand-logo-image{width:164px;max-height:84px;}
  .book-teaser-card,.about-collywobble-grid{grid-template-columns:1fr;}
  .book-teaser-card{text-align:center;padding:34px 26px;}
  .book-teaser-copy p{margin-left:auto;margin-right:auto;}
  .book-teaser-mark{width:155px;height:155px;}
  .family-page .hero-art{min-height:320px;}
  .family-page .hero-art img{width:min(100%,520px);}
}
@media(max-width:620px){
  .site-header .logo .brand-logo-image{width:145px;max-height:76px;}
  .footer-brand-image{width:205px;}
  .footer-logo::after{width:21px;height:21px;font-size:11px;vertical-align:6px;}
  .family-page .section.bg-soft{border-radius:26px 20px 30px 22px;}
  .family-page .bg-teal .card-grid{grid-template-columns:1fr;}
  .about-collywobble{padding:54px 0;}
}


/* V8 family-art breathing room
   Bella and Poppy source art previously touched the PNG edge, which made
   them appear visually cropped even though the page layout itself was intact. */
.family-page #bella .split-art,
.family-page #poppy .split-art{
  min-height:390px;
  align-items:center;
  padding:18px 20px 24px;
  overflow:visible;
}
.family-page #bella .bella-character-art,
.family-page #poppy .split-art img{
  width:auto;
  max-width:88%;
  max-height:350px;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 16px 20px rgba(75,43,114,.10));
}
@media (max-width:820px){
  .family-page #bella .split-art,
  .family-page #poppy .split-art{
    min-height:320px;
    padding:12px 14px 18px;
  }
  .family-page #bella .bella-character-art,
  .family-page #poppy .split-art img{
    max-height:300px;
    max-width:84%;
  }
}


/* V9 — Family portrait integrity.
   Every character gets a true contain layout with generous breathing room.
   Bella, Poppy and Rosie use dedicated full-silhouette storybook artwork. */
.family-page #riley .split-art,
.family-page #ollie .split-art,
.family-page #bella .split-art,
.family-page #poppy .split-art,
.family-page #rosie .split-art,
.family-page #gus .split-art{
  min-height:400px;
  padding:28px 34px;
  overflow:visible !important;
  align-items:center;
  justify-content:center;
  background:transparent;
  box-shadow:none;
}

.family-page .family-character-art{
  display:block;
  position:relative;
  z-index:1;
  width:auto !important;
  height:auto !important;
  max-width:76% !important;
  max-height:340px !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  margin:auto;
  border-radius:0;
}

/* These three are deliberately framed storybook portraits, not cropped group shots. */
.family-page .bella-character-art,
.family-page .poppy-character-art,
.family-page .rosie-character-art{
  max-width:82% !important;
  max-height:350px !important;
  border-radius:28px;
  box-shadow:0 16px 34px rgba(73,45,94,.07);
}

/* Riley's original source is naturally tight at the sides, so give it extra reduction. */
.family-page .riley-character-art{
  max-width:68% !important;
  max-height:330px !important;
}

@media (max-width:820px){
  .family-page #riley .split-art,
  .family-page #ollie .split-art,
  .family-page #bella .split-art,
  .family-page #poppy .split-art,
  .family-page #rosie .split-art,
  .family-page #gus .split-art{
    min-height:330px;
    padding:22px 24px;
  }
  .family-page .family-character-art{
    max-width:80% !important;
    max-height:300px !important;
  }
}


/* V10 — approved Meet the Family visual direction */
.family-page{
  background:#fffaf0;
}
.family-page .hero{
  padding-top:44px;
  padding-bottom:28px;
}
.family-page .hero .container{
  align-items:center;
}
.family-page .hero-art img{
  width:min(100%,650px);
  transform:scale(1.08);
}
.family-page .section-head{
  max-width:760px;
  text-align:center;
  margin:0 auto 28px;
}
.family-page #family > .container{
  max-width:1180px;
}
.family-page #family .section{
  margin:16px 0;
  padding:0;
  background:transparent;
}
.family-page #family .section > .container.split{
  max-width:1180px;
  min-height:390px;
  padding:30px 38px;
  border-radius:52px;
  gap:42px;
  box-shadow:0 10px 28px rgba(73,45,94,.035);
}
.family-page #riley > .container{background:#edf9fb;}
.family-page #ollie > .container{background:#fff7df;}
.family-page #bella > .container{background:#fff0ef;}
.family-page #poppy > .container{background:#f8effb;}
.family-page #rosie > .container{background:#fff0ef;}
.family-page #gus > .container{background:#f0f8e9;}

.family-page #family .split-copy{
  padding:10px 4px;
}
.family-page #family .split-copy h2{
  margin:.12em 0 .15em;
}
.family-page #family .split-copy p{
  font-size:1.02rem;
  line-height:1.58;
  max-width:560px;
}
.family-page #family .split-art{
  min-height:320px !important;
  padding:12px !important;
}
.family-page #family .family-character-art{
  max-width:88% !important;
  max-height:360px !important;
}
.family-page #bella .bella-character-art,
.family-page #poppy .poppy-character-art,
.family-page #rosie .rosie-character-art{
  width:min(100%,390px) !important;
  max-width:92% !important;
  max-height:360px !important;
  border-radius:38px;
  box-shadow:none;
}
.family-page .why-matters{
  margin-top:36px;
}
@media(max-width:820px){
  .family-page #family .section > .container.split{
    border-radius:34px;
    padding:24px 22px;
    min-height:auto;
  }
  .family-page #family .split-art{min-height:280px !important;}
  .family-page #family .family-character-art{max-height:300px !important;}
}


/* V11 — cross-site brand bridge.
   Preserve the bold homepage, but make shared brand elements unmistakably consistent. */
:root{
  --cw-cream:#fffaf1;
  --cw-purple:#4b2b72;
  --cw-turquoise:#35b7be;
  --cw-orange:#ff7445;
}
.site-header .logo .brand-logo-image{
  width:184px;
  max-height:94px;
}
.btn-primary{
  background:var(--cw-orange);
}
.btn-secondary{
  border-color:var(--cw-purple);
  color:var(--cw-purple);
}
.site-footer{
  background:linear-gradient(120deg,#3f275e,#553277);
}
.site-footer .footer-brand-image{
  width:220px;
}
.site-footer::before{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg,var(--cw-turquoise),var(--cw-orange),#f6c84b,var(--cw-turquoise));
  opacity:.9;
}

/* Let the homepage stay graphic and dramatic, but echo the storybook identity
   through its shared header/footer and warmer cream section boundaries. */
.home-page .site-header{
  background:var(--cw-cream);
}
.home-page .site-footer{
  background:linear-gradient(120deg,#3f275e,#553277);
}
.home-page .home-book-teaser,
.home-page .home-about{
  border-top:4px solid rgba(53,183,190,.18);
}

@media(max-width:900px){
  .site-header .logo .brand-logo-image{width:164px;max-height:86px;}
}
@media(max-width:560px){
  .site-header .logo .brand-logo-image{width:145px;max-height:76px;}
}

/* V12: COLLYVALE is the canonical world name. */

/* V13 — final Collyvale identity */
.site-header .logo .brand-logo-image{
  width:210px;
  max-height:105px;
  object-fit:contain;
}
.site-footer .footer-brand-image{
  width:245px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}
@media(max-width:900px){
  .site-header .logo .brand-logo-image{width:185px;max-height:94px;}
}
@media(max-width:560px){
  .site-header .logo .brand-logo-image{width:160px;max-height:82px;}
}


/* V14 — Muddle + Collyvale world links */
.muddle-character-art {
  max-height: 650px;
  width: auto;
  object-fit: contain;
  border-radius: 28px;
}
@media (max-width: 820px) {
  .muddle-character-art { max-height: 520px; }
}


/* V15 — character cleanup, consistent family framing, stronger header logo */
.site-header .logo .brand-logo-image{
  width:245px;
  max-height:123px;
  height:auto;
  object-fit:contain;
}

/* Family cards: one visual scale, one alignment and one accent treatment. */
.home-char-strip .char-chip,
.char-strip .char-chip{
  position:relative;
  overflow:hidden;
}
.home-char-strip .char-chip::before,
.char-strip .char-chip::before{
  background:#F6C84B !important;
}
.home-char-strip .char-chip img,
.char-strip .char-chip img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:150px;
  object-fit:contain;
  object-position:center bottom;
  margin:0 auto 12px;
  filter:none;
}
.home-char-strip .char-chip::after,
.char-strip .char-chip::after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:145px;
  width:68%;
  height:16px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(58,39,76,.16);
  filter:blur(7px);
  pointer-events:none;
}
.home-char-strip .char-chip .name,
.home-char-strip .char-chip .role,
.char-strip .char-chip .name,
.char-strip .char-chip .role{
  position:relative;
  z-index:3;
}

/* A single cohesive ground shadow beneath standalone transparent characters. */
.character-shadow-stage{
  position:relative;
}
.character-shadow-stage::after{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  bottom:7%;
  width:min(58%,330px);
  height:28px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(45,31,58,.18);
  filter:blur(11px);
  pointer-events:none;
}
.character-shadow-stage > img{
  position:relative;
  z-index:1;
  filter:none !important;
}

@media(max-width:900px){
  .site-header .logo .brand-logo-image{width:220px;max-height:111px;}
  .home-char-strip .char-chip img,.char-strip .char-chip img{height:145px;}
  .home-char-strip .char-chip::after,.char-strip .char-chip::after{top:140px;}
}
@media(max-width:560px){
  .site-header .logo .brand-logo-image{width:190px;max-height:96px;}
  .home-char-strip .char-chip img,.char-strip .char-chip img{height:135px;}
  .home-char-strip .char-chip::after,.char-strip .char-chip::after{top:130px;}
}


/* V17 — immersive Collyvale homepage hero */
.site-header .logo .brand-logo-image{
  width:280px;
  max-height:140px;
  height:auto;
  object-fit:contain;
}

.home-hero-v17{
  padding:0;
  overflow:hidden;
  background:#f7f0da;
  border-bottom:1px solid rgba(43,54,74,.08);
}
.home-hero-v17 .home-hero-scene{
  width:100%;
  line-height:0;
  background:#eaf4f7;
}
.home-hero-v17 .home-hero-scene img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin:0;
}
.home-hero-v17 .home-hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding-top:18px;
  padding-bottom:20px;
}
.home-hero-v17 .home-hero-actions .btn{
  min-width:165px;
  text-align:center;
}

/* Let the transparent locked portrait sit naturally in Collyvale sections. */
.home-collyvale-art > img,
.family-hero-art > img,
.family-group-art > img{
  background:transparent !important;
}

@media(max-width:900px){
  .site-header .logo .brand-logo-image{
    width:240px;
    max-height:120px;
  }
}
@media(max-width:560px){
  .site-header .logo .brand-logo-image{
    width:205px;
    max-height:104px;
  }
  .home-hero-v17 .home-hero-scene{
    overflow:hidden;
  }
  .home-hero-v17 .home-hero-scene img{
    width:100%;
    height:auto;
  }
  .home-hero-v17 .home-hero-actions{
    padding:14px 14px 16px;
    gap:9px;
  }
  .home-hero-v17 .home-hero-actions .btn{
    min-width:0;
    flex:1 1 145px;
  }
}


/* V18 — interactive Collyvale signpost navigation */
.signpost-navigation-section{
  padding:48px 0 56px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.94), rgba(255,248,226,.86) 54%, rgba(244,236,207,.92));
}
.signpost-nav-heading{
  text-align:center;
  max-width:720px;
  margin:0 auto 24px;
}
.signpost-nav-heading h2{ margin:8px 0 7px; }
.signpost-nav-heading p{ margin:0; }

.signpost-nav-wrap{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  overflow:hidden;
  border-radius:28px;
  box-shadow:0 20px 48px rgba(38,54,70,.18);
  background:#dff0f2;
  isolation:isolate;
}
.signpost-nav-wrap picture,
.signpost-nav-image{
  display:block;
  width:100%;
  height:auto;
}
.signpost-hotspots{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.sign-hotspot{
  position:absolute;
  left:6.5%;
  width:34%;
  height:8.9%;
  z-index:2;
  pointer-events:auto;
  border-radius:18px;
  text-decoration:none;
  color:transparent;
  outline:none;
  transform-origin:center left;
  transition:transform .16s ease, filter .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.sign-hotspot span{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.sign-hotspot:hover,
.sign-hotspot:focus-visible{
  transform:translateX(7px) rotate(-.15deg);
  background:rgba(255,210,74,.16);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55), 0 7px 14px rgba(66,42,12,.16);
  backdrop-filter:saturate(1.1) brightness(1.04);
}
.sign-hotspot:active{
  transform:translateX(4px) scale(.985);
  background:rgba(255,184,45,.22);
}
.sign-home{top:20.5%;}
.sign-ollie{top:30.4%;}
.sign-family{top:40.5%;}
.sign-story{top:50.6%;}
.sign-books{top:60.8%;}
.sign-contact{top:70.9%;}

@media (max-width:760px){
  .signpost-navigation-section{padding:32px 0 38px;}
  .signpost-nav-wrap{border-radius:18px;}
  .sign-hotspot{
    left:5.8%;
    width:36%;
    border-radius:12px;
  }
  .sign-hotspot:hover,
  .sign-hotspot:focus-visible{
    transform:translateX(4px);
  }
}
@media (prefers-reduced-motion:reduce){
  .sign-hotspot{transition:none;}
  .sign-hotspot:hover,
  .sign-hotspot:focus-visible,
  .sign-hotspot:active{transform:none;}
}


/* V19 — signpost is the homepage hero; compact signpost navigation sitewide */
.signpost-home-hero{
  padding-top:34px;
  padding-bottom:48px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.98), rgba(255,248,226,.9) 54%, rgba(244,236,207,.96));
}
.signpost-home-hero .signpost-nav-heading{
  margin-bottom:20px;
}
.signpost-home-hero .signpost-nav-heading h1{
  margin:8px 0 7px;
  font-size:clamp(2rem,5vw,4.2rem);
  line-height:1.02;
}
.signpost-home-hero .signpost-nav-wrap{
  max-width:1180px;
}

/* Compact interactive signpost used on internal pages */
.compact-signpost-section{
  padding:22px 0 26px;
  background:linear-gradient(180deg,#fff9e9 0%,#f6efd9 100%);
  border-bottom:1px solid rgba(43,54,74,.08);
}
.compact-signpost-grid{
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(420px,1.3fr);
  align-items:center;
  gap:28px;
}
.compact-signpost-copy h2{
  margin:8px 0 7px;
  font-size:clamp(1.55rem,2.5vw,2.35rem);
}
.compact-signpost-copy p{
  margin:0;
  max-width:430px;
}
.compact-signpost-wrap{
  position:relative;
  width:100%;
  max-width:650px;
  margin-left:auto;
  overflow:hidden;
  border-radius:20px;
  box-shadow:0 13px 28px rgba(38,54,70,.15);
  background:#dff0f2;
  isolation:isolate;
}
.compact-signpost-wrap picture,
.compact-signpost-image{
  display:block;
  width:100%;
  height:auto;
}
.compact-signpost-hotspots{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.compact-sign{
  position:absolute;
  left:6.5%;
  width:34%;
  height:8.9%;
  z-index:2;
  pointer-events:auto;
  border-radius:13px;
  text-decoration:none;
  color:transparent;
  outline:none;
  transform-origin:center left;
  transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.compact-sign span{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.compact-sign:hover,
.compact-sign:focus-visible{
  transform:translateX(5px);
  background:rgba(255,210,74,.16);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6), 0 5px 12px rgba(66,42,12,.14);
}
.compact-sign:active{
  transform:translateX(3px) scale(.986);
  background:rgba(255,184,45,.22);
}
.compact-home{top:20.5%;}
.compact-ollie{top:30.4%;}
.compact-family{top:40.5%;}
.compact-story{top:50.6%;}
.compact-books{top:60.8%;}
.compact-contact{top:70.9%;}

@media(max-width:820px){
  .compact-signpost-section{padding:18px 0 22px;}
  .compact-signpost-grid{
    grid-template-columns:1fr;
    gap:15px;
  }
  .compact-signpost-copy{
    text-align:center;
  }
  .compact-signpost-copy p{
    margin-left:auto;
    margin-right:auto;
  }
  .compact-signpost-wrap{
    max-width:560px;
    margin:0 auto;
  }
}
@media(max-width:560px){
  .signpost-home-hero{
    padding-top:22px;
    padding-bottom:30px;
  }
  .signpost-home-hero .signpost-nav-heading{
    margin-bottom:14px;
  }
  .compact-signpost-copy p{
    font-size:.94rem;
  }
  .compact-signpost-wrap{
    border-radius:15px;
  }
}
@media(prefers-reduced-motion:reduce){
  .compact-sign{transition:none;}
  .compact-sign:hover,
  .compact-sign:focus-visible,
  .compact-sign:active{transform:none;}
}

/* V25 — consistent Collywobble navigation; the illustrated overlay is homepage-only. */
.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;}
body:not(.home-page) .site-header{position:relative;z-index:50;background:#fffaf1;border-bottom:1px solid rgba(84,55,99,.10);box-shadow:0 5px 18px rgba(58,38,69,.07);}
body:not(.home-page) .site-header .nav-wrap{width:min(100% - 32px,1240px);max-width:1240px;margin:0 auto;padding:9px 0;display:flex;align-items:center;justify-content:space-between;gap:22px;}
body:not(.home-page) .site-header .logo{flex:0 0 auto;}
body:not(.home-page) .site-header .logo .brand-logo-image{width:210px;max-height:104px;object-fit:contain;}
body:not(.home-page) .main-nav ul{display:flex;align-items:center;gap:9px;margin:0;padding:0;list-style:none;}
body:not(.home-page) .main-nav a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 15px;border:1px solid rgba(73,48,91,.08);border-radius:999px;color:#503060;font-weight:800;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:0 4px 10px rgba(65,42,78,.08);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;}
body:not(.home-page) .main-nav a::before{font-size:1rem;line-height:1;}
body:not(.home-page) .main-nav .nav-ollie{background:#ffd8d2;color:#9d2e2b;}
body:not(.home-page) .main-nav .nav-ollie::before{content:"●";}
body:not(.home-page) .main-nav .nav-family{background:#e6d5ff;color:#7141a2;}
body:not(.home-page) .main-nav .nav-family::before{content:"◆";}
body:not(.home-page) .main-nav .nav-residents{background:#ccefee;color:#166b70;}
body:not(.home-page) .main-nav .nav-residents::before{content:"❧";}
body:not(.home-page) .main-nav .nav-creatures{background:#cfddff;color:#284f9c;}
body:not(.home-page) .main-nav .nav-creatures::before{content:"●";}
body:not(.home-page) .main-nav .nav-things{background:#ffe5a8;color:#955312;}
body:not(.home-page) .main-nav .nav-things::before{content:"★";}
body:not(.home-page) .main-nav a:hover,body:not(.home-page) .main-nav a:focus-visible{transform:translateY(-2px);filter:saturate(1.06);box-shadow:0 7px 15px rgba(65,42,78,.13);}
body:not(.home-page) .main-nav a[aria-current="page"]{outline:3px solid rgba(88,54,112,.22);outline-offset:2px;}
@media(max-width:1000px){body:not(.home-page) .site-header .logo .brand-logo-image{width:175px;}body:not(.home-page) .main-nav a{padding:9px 11px;font-size:.88rem;}}
@media(max-width:760px){body:not(.home-page) .site-header .nav-wrap{width:100%;padding:7px 16px;flex-wrap:wrap;}body:not(.home-page) .site-header .logo .brand-logo-image{width:160px;max-height:80px;}body:not(.home-page) .nav-toggle{display:block;margin-left:auto;}body:not(.home-page) .main-nav{flex-basis:100%;width:100%;}body:not(.home-page) .main-nav ul{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:10px 0 7px;}body:not(.home-page) .main-nav a{display:flex;width:100%;min-height:44px;}}


/* V20 — free colouring download */
.free-colouring-download{
  padding:24px 0 34px;
  background:#fffdf7;
}
.free-colouring-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 28px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 30px rgba(38,54,70,.10);
  border:1px solid rgba(43,54,74,.08);
}
.free-colouring-card h2{
  margin:7px 0 6px;
}
.free-colouring-card p{
  margin:0;
  max-width:720px;
}
.free-colouring-card .btn{
  flex:0 0 auto;
  white-space:nowrap;
}
@media(max-width:720px){
  .free-colouring-card{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    padding:22px 18px;
  }
  .free-colouring-card .btn{
    width:100%;
  }
}
\n\n/* V21 — mobile navigation reliability, shallower homepage hero, refreshed buttons */\n.signpost-home-hero{padding-top:18px;padding-bottom:24px;}\n.signpost-home-hero .signpost-nav-heading{margin-bottom:12px;}\n.signpost-home-hero .signpost-nav-heading h1{font-size:clamp(1.8rem,4vw,3rem);}\n.signpost-home-hero .signpost-nav-wrap{max-width:1080px;height:clamp(320px,42vw,500px);}\n.signpost-home-hero .signpost-nav-wrap picture{height:100%;}\n.signpost-home-hero .signpost-nav-image{width:100%;height:100%;object-fit:cover;object-position:center 46%;}\n\n.btn-primary,a.btn-primary,button.btn-primary{\n  background:linear-gradient(180deg,#2f95df 0%,#1778c8 100%) !important;\n  color:#fff !important;border:1px solid #1269b2 !important;border-radius:999px !important;\n  box-shadow:0 6px 0 #0d5d9f,0 10px 20px rgba(18,105,178,.18) !important;\n  font-weight:800;letter-spacing:.01em;transform:translateY(0);\n  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;\n}\n.btn-primary:hover,a.btn-primary:hover,button.btn-primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 8px 0 #0d5d9f,0 14px 24px rgba(18,105,178,.2) !important;}\n.btn-primary:active,a.btn-primary:active,button.btn-primary:active{transform:translateY(3px);box-shadow:0 3px 0 #0d5d9f,0 6px 12px rgba(18,105,178,.16) !important;}\n.btn-secondary,a.btn-secondary{border-radius:999px !important;border:1px solid rgba(32,56,84,.18) !important;background:#fffdf5 !important;color:#173f69 !important;box-shadow:0 5px 14px rgba(38,54,70,.08);}\n.mobile-wood-nav{display:none;}\n@media(max-width:760px){\n  .signpost-hotspots,.compact-signpost-hotspots{display:none !important;}\n  .signpost-home-hero{padding-top:14px;padding-bottom:18px;}\n  .signpost-home-hero .signpost-nav-heading{padding:0 14px;margin-bottom:10px;}\n  .signpost-home-hero .signpost-nav-heading h1{font-size:1.65rem;}\n  .signpost-home-hero .signpost-nav-heading p{font-size:.95rem;}\n  .signpost-home-hero .signpost-nav-wrap{height:245px;margin:0 12px;width:auto;border-radius:18px;}\n  .signpost-home-hero .signpost-nav-image{object-position:27% 47%;}\n  .mobile-wood-nav{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 12px 0;}\n  .mobile-wood-nav a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 12px;text-align:center;text-decoration:none;color:#2a1b0c;font-weight:800;line-height:1.05;border:1px solid #a86f2a;border-radius:11px 5px 11px 5px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)),repeating-linear-gradient(0deg,#e4ad62 0px,#e4ad62 11px,#dda154 12px,#dda154 13px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(112,67,17,.18),0 4px 8px rgba(75,48,15,.12);transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;}\n  .mobile-wood-nav a:nth-child(even){transform:rotate(.35deg);}\n  .mobile-wood-nav a:nth-child(odd){transform:rotate(-.35deg);}\n  .mobile-wood-nav a:active{transform:translateY(2px) scale(.985);filter:brightness(.96) saturate(1.05);box-shadow:inset 0 2px 4px rgba(75,48,15,.15);}\n  .compact-signpost-section{padding:14px 0 18px;}\n  .compact-signpost-grid{gap:10px;}\n  .compact-signpost-copy h2{font-size:1.4rem;margin:6px 0 4px;}\n  .compact-signpost-copy p{font-size:.9rem;}\n  .compact-signpost-wrap{max-width:100%;height:170px;border-radius:14px;}\n  .compact-signpost-wrap picture{height:100%;}\n  .compact-signpost-image{width:100%;height:100%;object-fit:cover;object-position:24% 48%;}\n  .internal-mobile-wood-nav{padding-top:12px;}\n}\n@media(max-width:430px){.mobile-wood-nav{grid-template-columns:1fr;}.mobile-wood-nav a{min-height:44px;}.signpost-home-hero .signpost-nav-wrap{height:220px;}}\n@media(prefers-reduced-motion:reduce){.btn-primary,.mobile-wood-nav a{transition:none;}}\n

/* V22 — Collyvale wooden signpost button system */
.btn-primary,
a.btn-primary,
button.btn-primary{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 42%),
    repeating-linear-gradient(
      0deg,
      #e7b46f 0px,
      #e7b46f 10px,
      #dda35a 11px,
      #dda35a 13px
    ) !important;
  color:#2d1b0c !important;
  border:1px solid #a66b28 !important;
  border-radius:13px 5px 13px 5px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -2px 0 rgba(113,69,20,.16),
    0 5px 0 #8c581f,
    0 9px 16px rgba(73,46,15,.16) !important;
  font-weight:800 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  padding:.82rem 1.35rem !important;
  transform:rotate(-.35deg) translateY(0);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}

.btn-primary::before,
a.btn-primary::before,
button.btn-primary::before{
  content:"";
  position:absolute;
  inset:5px 9px;
  border-top:1px solid rgba(111,66,18,.16);
  border-bottom:1px solid rgba(255,255,255,.15);
  pointer-events:none;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:focus-visible,
a.btn-primary:focus-visible,
button.btn-primary:focus-visible{
  color:#2d1b0c !important;
  filter:brightness(1.04) saturate(1.04);
  transform:rotate(.15deg) translate(4px,-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -2px 0 rgba(113,69,20,.16),
    0 7px 0 #8c581f,
    0 13px 20px rgba(73,46,15,.18) !important;
}

.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active{
  transform:rotate(0deg) translate(2px,3px) scale(.985);
  filter:brightness(.96);
  box-shadow:
    inset 0 2px 3px rgba(80,46,12,.14),
    0 2px 0 #8c581f,
    0 5px 10px rgba(73,46,15,.14) !important;
}

/* Secondary actions: lighter timber so paired buttons still read as separate choices. */
.btn-secondary,
a.btn-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.04)),
    repeating-linear-gradient(
      0deg,
      #f3d39e 0px,
      #f3d39e 10px,
      #ecc68a 11px,
      #ecc68a 13px
    ) !important;
  color:#3c2916 !important;
  border:1px solid #ba8646 !important;
  border-radius:13px 5px 13px 5px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 4px 0 #a87538,
    0 8px 14px rgba(73,46,15,.12) !important;
  font-weight:800 !important;
  transform:rotate(.25deg);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}
.btn-secondary:hover,
a.btn-secondary:hover,
.btn-secondary:focus-visible,
a.btn-secondary:focus-visible{
  transform:rotate(-.15deg) translate(3px,-2px);
  filter:brightness(1.035);
}
.btn-secondary:active,
a.btn-secondary:active{
  transform:translate(1px,2px) scale(.99);
  box-shadow:0 2px 0 #a87538, 0 4px 8px rgba(73,46,15,.12) !important;
}

@media(max-width:760px){
  .btn-primary,
  a.btn-primary,
  button.btn-primary,
  .btn-secondary,
  a.btn-secondary{
    min-height:46px;
    justify-content:center;
    text-align:center;
    width:auto;
    max-width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  .btn-primary,
  a.btn-primary,
  button.btn-primary,
  .btn-secondary,
  a.btn-secondary{
    transition:none !important;
    transform:none !important;
  }
}