/* Cream paper, softly blended colours from the Maskotko identity. */
:root { --paper:#fcf6ed; --pink:#e8b4c0; --pink-dark:#93546a; --yellow:#ead49f; --aqua:#aed5cf; --violet:#c6b5d9; --ink:#51473f; --muted:#6e625a; --shadow:0 12px 30px #79645312; }
body,main { background:var(--paper); }
.site-header { background:#fcf6edf5; border-bottom:1px solid #ece1d6; }
.button { background:#e8b4c0; color:#58394a; border:1px solid #d9a6b3; box-shadow:0 4px 12px #8b596218; }
.button:hover { background:#df9fb0; box-shadow:0 6px 16px #8b596223; }
.button-whatsapp { background:#d1e5dd; color:#365a4e; border-color:#b7d0c5; }
.welcome-banner { position:relative; margin-top:94px; background:#fcf7f1; padding-bottom:24px; }
.welcome-banner > img { width:100%; height:auto; max-height:780px; object-fit:contain; }
.banner-button { position:absolute; bottom:5%; left:50%; transform:translateX(-50%); min-width:210px; min-height:58px; font-size:1.1rem; }
.banner-button:hover { transform:translate(-50%,-2px); }
.hero { padding:76px 0 88px; border:0; background:linear-gradient(#fcf7f1,var(--paper) 8%,#f8d9e4 46%,#fce9ca 76%,var(--paper)); }
.hero::after,.confetti { display:none; }
.hero-photo-wrap::before { background:#d5c2e6; }
.hero-photo-wrap { aspect-ratio:1; }
.hero-photo-wrap::before { inset:-10px; border-radius:50%; transform:none; }
.hero-photo { width:100%; height:auto; aspect-ratio:1; object-fit:contain; padding:12%; border:8px solid #fffaf4; border-radius:50%; background:#fffaf4; box-shadow:var(--shadow); }
.trust-list li,.trust-list li:nth-child(2),.trust-list li:nth-child(3) { border-color:#dfcfc6; }
.intro,.pricing-section,.faq-section,.news-section,.contact-section,.booking-section { background:var(--paper); }
.intro::before,.pricing-section::before,.faq-section::before,.booking-section::before,.news-section::before,.contact-section::before { display:none; }
.intro { background:linear-gradient(var(--paper),#fff0c6 50%,var(--paper)); }
.mascots-section { background:linear-gradient(var(--paper),#d4eee8 25%,#e1d5ef 65%,var(--paper)); }
.mascots-section::before { opacity:.23; inset:0 0 auto auto; width:230px; height:180px; background-image:radial-gradient(circle,#d8a8b6 0 3px,transparent 4px); background-size:36px 36px; mask-image:radial-gradient(ellipse at top right,black,transparent 72%); }
.gallery-section { color:var(--ink); background:linear-gradient(var(--paper),#cfece5 23%,#d7e9ef 75%,var(--paper)); }
.section-heading.light .eyebrow { color:var(--pink-dark); }
.section-heading.light > p { color:var(--muted); }
.faq-section { background:linear-gradient(var(--paper),#e5d6f0 50%,var(--paper)); }
.contact-section { background:linear-gradient(var(--paper),#f6d5df 50%,var(--paper)); }
.mascot-card,.price-card,.news-card,.contact-form,.date-checker { box-shadow:var(--shadow); border:1px solid #e8dcd2; }
.mascot-card:nth-child(4n+1) { background:#fce5eb; border-bottom:3px solid #e8a7b9; }
.mascot-card:nth-child(4n+2) { background:#e0f3ed; border-bottom:3px solid #91c9be; }
.mascot-card:nth-child(4n+3) { background:#fff0c8; border-bottom:3px solid #e9ce84; }
.mascot-card:nth-child(4n) { background:#eee2f6; border-bottom:3px solid #bda0d5; }
.gallery-item { border-color:#fffaf4; box-shadow:var(--shadow); }
.booking-card { position:relative; background:linear-gradient(125deg,#f6d8e1,#eee0f3 55%,#d8eee7); border:1px solid #ead5da; border-radius:32px; box-shadow:var(--shadow); }
.date-checker,.contact-form { background:#fffaf4; }
.faq-cta,.accessory-note { background:#f4ede4; border-color:#e0d2c4; }
.intro h2,.pricing-section h2,.faq-section h2,.booking-section h2,.contact-section h2 { color:#93546a; }
.mascots-section h2,.section-heading h2 { color:#577f78; }
.booking-balloons { position:absolute; width:110px; height:165px; object-fit:contain; left:-42px; top:-90px; pointer-events:none; transform-origin:50% 100%; animation:balloon-drift 6s ease-in-out infinite; }
.site-footer { background:#566d65; }
@keyframes balloon-drift { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-14px) rotate(5deg); } }
@media(max-width:980px) { .main-nav { background:#fcf6eefa; }.intro-grid { grid-template-columns:minmax(0,1fr); }.booking-balloons { left:0; width:85px; } }
@media(max-width:680px) { .welcome-banner { margin-top:80px; padding-bottom:83px; }.banner-button { bottom:17px; min-height:50px; min-width:190px; font-size:1rem; }.hero { padding:46px 0 64px; }.section { padding:64px 0; }.booking-section { padding-top:104px; }.booking-balloons { left:12px; top:-102px; width:78px; height:125px; }.intro-copy { font-size:1.0625rem; line-height:1.7; }.hero h1 { font-size:clamp(2.4rem,10vw,3.2rem); } }
@media(prefers-reduced-motion:reduce) { .booking-balloons { animation:none; } }

/* Soft geometric accents and visible, gently floating balloons. */
.welcome-pastel { min-height:240px; padding:0; overflow:hidden; background:radial-gradient(ellipse at 20% 40%,#f5d2df,transparent 48%),radial-gradient(ellipse at 80% 30%,#d4eae5,transparent 48%),#fcf7f1; }
.welcome-pastel .banner-button { bottom:38px; z-index:2; }
.welcome-pastel > .welcome-balloons { position:absolute; width:130px; height:195px; object-fit:contain; top:12px; pointer-events:none; animation:balloon-drift 5s ease-in-out infinite; }
.balloons-left { left:calc(50% - 300px); }
.welcome-pastel > .balloons-right { right:calc(50% - 300px); animation-delay:-2.5s; }
.intro::after,.faq-section::after { content:""; position:absolute; pointer-events:none; z-index:0; width:210px; height:210px; border-radius:50%; right:-80px; bottom:30px; background:#d3c2e6; opacity:.5; }
.faq-section::after { right:auto; left:-110px; top:50px; background:#f0c6d5; width:240px; height:300px; border-radius:42% 58% 64% 36%; transform:rotate(20deg); }
.mascots-section::after { content:""; position:absolute; pointer-events:none; z-index:0; width:220px; height:180px; left:-95px; bottom:20px; background:#f3dfa8; opacity:.6; border-radius:46% 54% 35% 65%; transform:rotate(-20deg); }
.gallery-section::after { content:""; position:absolute; pointer-events:none; z-index:0; width:190px; height:190px; right:-75px; top:35px; border:38px solid #c5b2dd; border-radius:50%; opacity:.5; }
@media(max-width:680px) { .welcome-pastel { min-height:225px; }.welcome-pastel > .welcome-balloons { width:92px; height:145px; top:7px; }.balloons-left { left:8px; }.welcome-pastel > .balloons-right { right:8px; }.welcome-pastel .banner-button { bottom:22px; }.intro::after { width:140px; height:140px; right:-90px; opacity:.3; } }
@media(prefers-reduced-motion:reduce) { .welcome-pastel > .welcome-balloons { animation:none; } }

.party-balloons { position:absolute; z-index:0; object-fit:contain; pointer-events:none; transform-origin:50% 100%; animation:cartoon-bob 5.5s ease-in-out infinite; }
.story-balloons { width:88px; height:140px; right:3%; top:6px; animation-delay:-1.8s; }
.gallery-balloons { width:115px; height:175px; left:1%; bottom:25px; animation-duration:7s; }
.booking-balloons { animation:cartoon-bob 6.3s -3s ease-in-out infinite; }
@keyframes cartoon-bob { 0%,100% { transform:translate(0,0) rotate(-7deg); } 35% { transform:translate(8px,-18px) rotate(5deg); } 70% { transform:translate(-5px,-8px) rotate(-2deg); } }
@media(max-width:680px) { .story-balloons { width:58px; height:90px; right:8px; top:0; opacity:.85; }.gallery-balloons { width:64px; height:98px; left:5px; bottom:0; }.hero-visual { width:100%; }.hero-photo-wrap { width:min(360px,100%); } }
@media(prefers-reduced-motion:reduce) { .party-balloons,.booking-balloons { animation:none; } }

/* A large storybook bear paired with the original headline. */
.hero-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:48px; }
.hero-illustration { position:relative; isolation:isolate; width:100%; max-width:540px; margin-inline:auto; }
.hero-illustration::before { content:""; position:absolute; z-index:-1; inset:12% -3% 9%; border-radius:43% 57% 61% 39% / 54% 39% 61% 46%; background:radial-gradient(ellipse at 65% 30%,#f2cad9,transparent 70%),linear-gradient(140deg,#fff1da,#f8e1df); transform:rotate(-5deg); }
.hero-bear { display:block; width:100%; height:auto; max-height:600px; object-fit:contain; animation:bear-float 7s ease-in-out infinite; }
.bear-caption { position:relative; margin:8px auto 0; width:fit-content; max-width:100%; padding:9px 18px; border:1px solid #ead8d1; border-radius:999px; background:#fff9f0; font-size:.875rem; font-weight:800; text-align:center; }
.hero-actions { flex-wrap:wrap; gap:14px; }
.button-outline { background:#fff8f0; color:#657d77; border-color:#aaccc3; box-shadow:none; }
.button-outline:hover { background:#deeee7; box-shadow:none; }
@keyframes bear-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-9px) rotate(1deg); } }
@media(max-width:980px) { .hero-grid { grid-template-columns:minmax(0,1fr); gap:30px; }.hero-illustration { max-width:460px; } }
@media(max-width:680px) { .hero-actions { flex-direction:row; align-items:center; gap:10px; }.hero-actions .button { padding-inline:18px; font-size:.9375rem; }.hero-illustration { max-width:360px; }.hero-illustration::before { inset:14% 0 8%; }.hero-bear { max-height:440px; } }
@media(prefers-reduced-motion:reduce) { .hero-bear { animation:none; } }
.hero-illustration::before { display:none; }
.hero-illustration { isolation:auto; mix-blend-mode:multiply; }
.hero-bear-original { mix-blend-mode:multiply; border-radius:0; }

/* Fuller pastel colour on cream, matching the supplied reference. */
:root { --paper:#fff9e9; --pink:#ffc0c5; --aqua:#a7d3e1; --yellow:#ffca91; --violet:#d1bfe7; }
.site-header { background:#fff9e9f5; border-bottom-color:#eee4cf; }
.hero { background:linear-gradient(#fcf7f1,var(--paper) 20%,#ffe5dc 65%,var(--paper)); }
.button { background:#ffc0c5; border-color:#e9a4ae; color:#633b4b; }
.button:hover { background:#f5adb7; }
.button-outline { background:#a7d3e1; border-color:#94becb; color:#34535c; }
.button-outline:hover { background:#95c8d8; }
.mascot-card:nth-child(4n+1) { background:#ffc0c5; border-color:#ffc0c5; }
.mascot-card:nth-child(4n+2) { background:#a7d3e1; border-color:#a7d3e1; }
.mascot-card:nth-child(4n+3) { background:#ffca91; border-color:#ffca91; }
.mascot-card:nth-child(4n) { background:#d1bfe7; border-color:#d1bfe7; }
.mascot-card { border-radius:32px; box-shadow:none; }
.mascot-card h3,.mascot-card p,.mascot-card .card-kicker { color:#51433e; }
.mascots-section { background:linear-gradient(var(--paper),#fff3de 50%,var(--paper)); }
.gallery-section { background:linear-gradient(var(--paper),#d4eaf1 20%,#d4eaf1 80%,var(--paper)); }
.faq-section { background:linear-gradient(var(--paper),#eee1f5 50%,var(--paper)); }
.booking-card { background:#ffc0c5; border-color:#efb1b7; }
.faq-cta { background:#a7d3e1; border-color:#a7d3e1; }
.accessory-note { background:#ffca91; border-color:#ffca91; }
.contact-form { background:#ffe0ba; border-color:#f3d0a7; }
.intro::after { background:#ffc0c5; opacity:.8; }
.faq-section::after { background:#ffca91; opacity:.7; }
.mascots-section::after { background:#a7d3e1; opacity:.8; }
.gallery-section::after { border-color:#d1bfe7; opacity:.8; }
.site-footer { background:#a7d3e1; color:#344f59; }
.footer-grid p,.footer-bottom { color:#344f59; }

/* First three sections: playful Maskotko storybook composition. */
.hero { min-height:680px; display:flex; align-items:center; overflow:hidden; padding:138px 0 74px; background:radial-gradient(ellipse at 82% 39%,#d8eff3 0 16%,transparent 16.3%),radial-gradient(ellipse at 73% 73%,#dcd1ef 0 19%,transparent 19.3%),radial-gradient(ellipse at 8% 75%,#ffd2d8 0 15%,transparent 15.3%),linear-gradient(130deg,#fff9e9 0%,#fff9e9 52%,#fdf0eb 100%); }
.hero::before { content:""; position:absolute; width:295px; height:330px; right:-145px; top:120px; border-radius:48% 52% 58% 42%; background:#ffc0c5; opacity:.6; transform:rotate(24deg); }
.hero-grid { position:relative; z-index:1; gap:22px; }
.hero-copy { padding-top:8px; }
.hero h1 { max-width:620px; color:#3f3b3e; font-size:clamp(3.25rem,6vw,5.55rem); }
.hero h1::first-line { color:#3f3b3e; }
.hero-lead { max-width:470px; font-size:1.12rem; }
.hero-actions { margin-top:24px; }
.hero-actions .button { min-width:172px; }
.trust-list { margin-top:35px; }
.hero-illustration { align-self:end; max-width:520px; min-height:470px; margin-bottom:-75px; }
.hero-bear-cutout { max-height:650px; width:100%; object-fit:contain; filter:drop-shadow(0 18px 16px rgba(92,63,38,.14)); animation:bear-float 7s ease-in-out infinite; }
.hero-bubble { position:absolute; top:70px; right:-12px; width:126px; padding:21px 14px; border-radius:50% 46% 55% 43%; background:#d3e8ed; color:#67868e; font:800 1rem/1.15 "Baloo 2",sans-serif; text-align:center; transform:rotate(8deg); }
.hero-bubble::after { content:"♡"; display:block; margin-top:4px; color:#b191c7; font-size:1.3rem; }
.intro { padding:110px 0; background:linear-gradient(90deg,#d3ebef 0 2.5%,#fff9e9 2.5% 100%); }
.intro-grid { grid-template-columns:minmax(0,.95fr) minmax(330px,1.05fr); gap:72px; align-items:center; }
.intro-photo-wrap { position:relative; overflow:hidden; min-height:435px; border-radius:42% 58% 48% 52% / 45% 42% 58% 55%; box-shadow:0 20px 48px rgba(98,70,44,.15); }
.intro-photo-wrap::after { content:""; position:absolute; inset:0; background:linear-gradient(130deg,transparent 45%,#fff9e9d9 100%); }
.intro-photo-wrap img { width:100%; height:100%; object-fit:cover; object-position:42% center; }
.intro h2 { max-width:530px; color:#4c4441; }
.intro h2::first-line { color:#4c4441; }
.intro-tagline { margin:14px 0 22px; color:#c7849a; font:700 clamp(1.25rem,2.2vw,1.8rem)/1.2 "Baloo 2",sans-serif; }
.intro-copy { max-width:560px; font-size:1rem; }
.mascots-section { padding:112px 0; background:linear-gradient(#fff9e9 0 20%,#e0f0f4 20% 86%,#fff9e9 86%); }
.mascots-section .section-heading { padding:0 20px; }
.mascots-section .section-heading h2 { color:#4c4441; }
.mascot-grid { gap:22px; }
.mascot-card { overflow:hidden; min-height:100%; border-radius:35px; transition:transform .25s ease,box-shadow .25s ease; }
.mascot-card:hover { transform:translateY(-6px) rotate(-1deg); box-shadow:0 16px 28px rgba(85,63,52,.12); }
.mascot-card img { aspect-ratio:1/.85; object-fit:cover; }
.mascot-card > div { padding:22px; }
@media(max-width:980px) { .hero { min-height:auto; }.hero-illustration { margin-bottom:-30px; }.intro-grid { grid-template-columns:minmax(0,1fr); gap:38px; }.intro-photo-wrap { min-height:360px; max-width:600px; width:100%; }.intro-copy { max-width:none; } }
@media(max-width:680px) { .hero { padding:112px 0 30px; }.hero h1 { font-size:clamp(2.8rem,13.5vw,4rem); }.hero-illustration { min-height:0; max-width:335px; margin-bottom:-34px; }.hero-bear-cutout { max-height:455px; }.hero-bubble { top:40px; right:-18px; width:105px; padding:16px 9px; font-size:.82rem; }.trust-list { margin-top:26px; }.intro { padding:68px 0; }.intro-photo-wrap { min-height:285px; border-radius:35px; }.intro-tagline { font-size:1.25rem; }.mascots-section { padding:70px 0; }.mascots-section .section-heading { padding:0; } }

/* Natural image transitions: no coloured edge around either bear. */
.hero-illustration { background:#fff9e9; }
.hero-bear-tuxedo { display:block; width:100%; max-height:650px; object-fit:contain; mix-blend-mode:multiply; filter:none; animation:bear-float 7s ease-in-out infinite; }
.intro-photo-wrap { overflow:visible; border-radius:0; box-shadow:none; min-height:470px; }
.intro-photo-wrap::after { inset:-1px; background:linear-gradient(90deg,transparent 35%,#fff9e9 97%),linear-gradient(0deg,#fff9e9 0%,transparent 34%); pointer-events:none; }
.intro-photo-wrap img { border-radius:0; mask-image:linear-gradient(90deg,#000 0 60%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,#000 0 60%,transparent 100%); }
@media(max-width:680px) { .hero-bear-tuxedo { max-height:455px; }.intro-photo-wrap { min-height:305px; }.intro-photo-wrap img { mask-image:linear-gradient(90deg,#000 0 75%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,#000 0 75%,transparent 100%); } }


/* Refined first-three-section artwork: photographic bears blend into the page, never into a frame. */
.hero-illustration {
  background:transparent;
  max-width:600px;
  min-height:560px;
  margin-bottom:-82px;
  overflow:visible;
}
.hero-bear-tuxedo {
  width:100%;
  max-height:720px;
  object-fit:contain;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 88% 84% at 50% 53%,#000 58%,rgba(0,0,0,.92) 69%,transparent 100%);
  mask-image:radial-gradient(ellipse 88% 84% at 50% 53%,#000 58%,rgba(0,0,0,.92) 69%,transparent 100%);
}
.intro {
  background:
    radial-gradient(ellipse 23% 27% at 4% 82%,rgba(192,226,231,.78) 0 60%,transparent 61%),
    radial-gradient(ellipse 14% 19% at 96% 8%,rgba(244,207,218,.62) 0 60%,transparent 61%),
    #fff9ef;
}
.intro-photo-wrap { min-height:525px; max-width:610px; }
.intro-photo-wrap::after { display:none; }
.intro-photo-wrap img {
  width:100%; height:100%; object-fit:cover; object-position:42% center;
  -webkit-mask-image:radial-gradient(ellipse 92% 84% at 40% 48%,#000 46%,rgba(0,0,0,.94) 62%,rgba(0,0,0,.5) 76%,transparent 97%);
  mask-image:radial-gradient(ellipse 92% 84% at 40% 48%,#000 46%,rgba(0,0,0,.94) 62%,rgba(0,0,0,.5) 76%,transparent 97%);
}
.mascots-section {
  background:
    radial-gradient(ellipse 21% 18% at 5% 100%,rgba(252,211,218,.58) 0 65%,transparent 66%),
    radial-gradient(ellipse 19% 18% at 92% 100%,rgba(210,231,237,.78) 0 65%,transparent 66%),
    #fff9ef;
}
.mascot-card { background:#fffdfa; border:1px solid #eee5dc; box-shadow:0 10px 26px rgba(93,71,56,.08); }
.mascot-card:nth-child(1) { border-bottom:5px solid #edbbc4; }
.mascot-card:nth-child(2) { border-bottom:5px solid #b9dce4; }
.mascot-card:nth-child(3) { border-bottom:5px solid #f3d298; }
.mascot-card:nth-child(4) { border-bottom:5px solid #d5c8e8; }
@media(max-width:980px) {
  .hero-illustration { max-width:480px; min-height:430px; margin-bottom:-32px; }
  .intro-photo-wrap { min-height:445px; }
}
@media(max-width:680px) {
  .hero-illustration { max-width:355px; min-height:390px; margin-bottom:-35px; }
  .hero-bear-tuxedo { max-height:500px; }
  .intro-photo-wrap { min-height:410px; max-width:100%; }
  .intro-photo-wrap img { object-position:38% center; }
}


/* Hero rebuilt to follow the supplied Maskotko reference: typographic title left, integrated 3D mascot right. */
.hero {
  min-height:660px;
  padding:118px 0 48px;
  background:
    radial-gradient(ellipse 16% 25% at 1% 82%,#c5e6ed 0 70%,transparent 71%),
    radial-gradient(ellipse 16% 22% at 3% 94%,#fde49a 0 70%,transparent 71%),
    radial-gradient(ellipse 18% 29% at 98% 68%,#f7d9df 0 70%,transparent 71%),
    radial-gradient(ellipse 18% 25% at 84% 81%,#d8cbe9 0 70%,transparent 71%),
    #fffaf0;
}
.hero::before { width:240px; height:275px; top:80px; right:-105px; background:#cae7ec; opacity:.7; }
.hero-grid { grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr); gap:0; align-items:center; }
.hero-copy { position:relative; z-index:2; padding-top:22px; }
.hero .eyebrow { display:none; }
.hero-title-art { display:flex; flex-direction:column; gap:0; max-width:590px; margin:0; color:#3e3b40; font-family:"Baloo 2",sans-serif; letter-spacing:-.045em; line-height:.94; }
.hero-title-top { font-size:clamp(3.15rem,5.25vw,5.05rem); font-weight:800; }
.hero-title-friend { display:block; margin-top:3px; font-size:clamp(3.55rem,6.25vw,5.95rem); font-weight:800; letter-spacing:-.055em; background:linear-gradient(90deg,#e894a5 0 19%,#f3ce72 27% 41%,#93d9da 48% 62%,#a99ad6 70% 84%,#8abfd6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-title-friend b { font-family:"Nunito",sans-serif; font-weight:600; color:#9baad0; -webkit-text-fill-color:#9baad0; font-size:.72em; vertical-align:10%; margin-left:7px; }
.hero-title-bottom { margin-top:4px; font-family:"Nunito",sans-serif; font-size:clamp(1.75rem,3vw,3rem); letter-spacing:.005em; font-weight:500; line-height:1.05; }
.hero-lead { max-width:435px; margin-top:25px; font-size:1.05rem; }
.hero-actions { margin-top:19px; }
.hero-actions .button:first-child { background:#e98e9f; box-shadow:0 8px 18px rgba(214,126,145,.2); }
.hero-actions .button-outline { border-color:#e9c9ce; background:rgba(255,255,255,.45); }
.trust-list { display:none; }
.hero-illustration { position:relative; isolation:isolate; align-self:end; max-width:650px; min-height:535px; margin:0 -48px -48px 0; background:transparent; mix-blend-mode:normal; }
.hero-illustration::before { display:block; content:""; z-index:-1; position:absolute; inset:14% 3% 1% 4%; border-radius:48% 52% 46% 54% / 45% 44% 56% 55%; background:radial-gradient(ellipse at 29% 68%,#f5df90 0 17%,transparent 17.5%),radial-gradient(ellipse at 47% 77%,#bde3e6 0 24%,transparent 24.5%),radial-gradient(ellipse at 78% 68%,#d8cbe9 0 24%,transparent 24.5%),radial-gradient(ellipse at 93% 38%,#f5d7df 0 22%,transparent 22.5%); }
.hero-bear-tuxedo { position:absolute; z-index:1; inset:auto 3% -2% 1%; width:96%; max-height:none; height:calc(100% + 44px); object-fit:contain; object-position:center bottom; mix-blend-mode:normal; -webkit-mask-image:none; mask-image:none; filter:drop-shadow(0 16px 13px rgba(118,83,43,.13)); }
.hero-bubble { z-index:2; top:13%; right:4%; width:135px; background:rgba(205,235,238,.88); color:#7b9ca2; box-shadow:none; }
@media(max-width:980px) { .hero { min-height:auto; padding-top:108px; }.hero-grid { grid-template-columns:1fr; gap:0; }.hero-copy { max-width:620px; }.hero-illustration { width:100%; max-width:530px; min-height:470px; margin:0 auto -40px; }.hero-title-top { font-size:clamp(2.9rem,10vw,4.5rem); }.hero-title-friend { font-size:clamp(3.3rem,12vw,5.2rem); }.hero-title-bottom { font-size:clamp(1.65rem,6vw,2.4rem); } }
@media(max-width:680px) { .hero { padding:92px 0 24px; }.hero-copy { padding-top:0; }.hero-title-art { line-height:.96; }.hero-title-top { font-size:clamp(2.85rem,13vw,3.85rem); }.hero-title-friend { font-size:clamp(3.15rem,15vw,4.6rem); }.hero-title-bottom { font-size:clamp(1.55rem,7vw,2.15rem); }.hero-lead { margin-top:18px; font-size:1rem; }.hero-actions { gap:9px; }.hero-actions .button { min-width:auto; }.hero-illustration { max-width:385px; min-height:400px; margin-bottom:-24px; }.hero-illustration::before { inset:12% 0 1%; }.hero-bear-tuxedo { inset:auto -1% -1% -2%; width:103%; height:calc(100% + 18px); }.hero-bubble { width:103px; padding:14px 8px; right:-3px; top:10%; font-size:.8rem; } }


/* Story section rebuilt from the supplied reference. */
.intro {
  position:relative;
  overflow:hidden;
  padding:86px 0 74px;
  background:
    radial-gradient(ellipse 15% 28% at 1% 5%,rgba(251,219,143,.78) 0 65%,transparent 66%),
    radial-gradient(ellipse 18% 24% at 100% 10%,rgba(189,225,227,.8) 0 65%,transparent 66%),
    radial-gradient(ellipse 21% 26% at 96% 87%,rgba(225,214,237,.72) 0 65%,transparent 66%),
    radial-gradient(ellipse 13% 17% at 4% 84%,rgba(192,226,231,.78) 0 65%,transparent 66%),
    #fffaf0;
}
.intro-grid { position:relative; z-index:1; grid-template-columns:minmax(440px,1.12fr) minmax(380px,.88fr); gap:72px; align-items:center; }
.intro-photo-wrap { align-self:stretch; width:100%; max-width:none; min-height:490px; }
.intro-photo-wrap img { object-position:38% center; -webkit-mask-image:radial-gradient(ellipse 98% 93% at 38% 48%,#000 42%,rgba(0,0,0,.96) 59%,rgba(0,0,0,.52) 75%,transparent 98%); mask-image:radial-gradient(ellipse 98% 93% at 38% 48%,#000 42%,rgba(0,0,0,.96) 59%,rgba(0,0,0,.52) 75%,transparent 98%); }
.intro-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:17px; color:#7a7673; letter-spacing:.16em; }
.intro-eyebrow::after { content:""; display:block; width:72px; height:2px; border-radius:4px; background:#b9d7d5; }
.intro-title-art { position:relative; display:flex; flex-direction:column; max-width:570px; margin:0; color:#403d40; font:800 clamp(2.35rem,4vw,4.15rem)/.98 "Baloo 2",sans-serif; letter-spacing:-.04em; }
.intro-title-art em { color:#df9bab; font-family:"Baloo 2",sans-serif; font-style:normal; }
.intro-title-art b { position:absolute; left:calc(100% + 13px); bottom:3px; color:#a79bc7; font:400 1.15em/1 "Nunito",sans-serif; }
.intro-tagline { margin:17px 0 20px; color:#494548; font:500 clamp(1.3rem,2.1vw,1.85rem)/1.2 "Nunito",sans-serif; }
.intro-copy { max-width:510px; font-size:1rem; line-height:1.56; }
.intro-copy p { margin:0 0 14px; }
.intro-signoff { margin:19px 0 0; color:#c48fa8; font:600 clamp(1.35rem,2.35vw,2rem)/1.1 "Baloo 2",sans-serif; }
.intro-signoff span { color:#8fcfd0; }
.intro-memory { position:absolute; right:-28px; bottom:4px; display:flex; flex-direction:column; align-items:center; gap:2px; color:#998bba; text-align:center; text-transform:uppercase; letter-spacing:.17em; }
.intro-memory span { font-size:2rem; transform:rotate(180deg); color:#a59ace; }
.intro-memory small { font:700 .62rem/1.35 "Nunito",sans-serif; }
@media(max-width:980px) { .intro { padding:76px 0; }.intro-grid { grid-template-columns:1fr; gap:24px; }.intro-photo-wrap { min-height:480px; max-width:690px; }.intro-copy { max-width:620px; }.intro-memory { right:20px; bottom:0; } }
@media(max-width:680px) { .intro { padding:62px 0 70px; }.intro-grid { gap:18px; }.intro-photo-wrap { min-height:395px; }.intro-photo-wrap img { object-position:38% center; }.intro-title-art { font-size:clamp(2.35rem,11vw,3.35rem); }.intro-title-art b { left:auto; right:3%; bottom:-2px; font-size:.95em; }.intro-tagline { font-size:1.25rem; }.intro-copy { font-size:.98rem; }.intro-memory { display:none; } }

/* Keep the 3D mascot clear of the calls-to-action on phones. */
@media(max-width:680px) {
  .hero-illustration { min-height:438px; margin-top:18px; }
  .hero-bear-tuxedo { transform:translateY(28px); }
  .hero-bubble { transform:translateY(18px) rotate(8deg); }
}

/* Feather the story photograph into the cream page on every side. */
.intro-photo-wrap { overflow:visible; }
.intro-photo-wrap::after {
  display:block;
  content:"";
  position:absolute;
  pointer-events:none;
  inset:-2px;
  background:
    linear-gradient(90deg,rgba(255,250,240,0) 22%,rgba(255,250,240,.18) 49%,#fffaf0 96%),
    linear-gradient(180deg,#fffaf0 0%,rgba(255,250,240,0) 16%,rgba(255,250,240,0) 69%,#fffaf0 100%);
}
.intro-photo-wrap img {
  -webkit-mask-image:radial-gradient(ellipse 92% 92% at 35% 48%,#000 28%,rgba(0,0,0,.92) 48%,rgba(0,0,0,.48) 69%,transparent 100%);
  mask-image:radial-gradient(ellipse 92% 92% at 35% 48%,#000 28%,rgba(0,0,0,.92) 48%,rgba(0,0,0,.48) 69%,transparent 100%);
}


/* Small pastel paw-print motifs. */
.paw-mark { position:absolute; z-index:0; width:58px; height:58px; fill:#9c91c5; opacity:.32; }
.paw-mark-top { right:9%; top:29%; transform:rotate(-13deg); }
.paw-mark-bottom { right:3%; bottom:11%; width:45px; height:45px; fill:#84c8cd; opacity:.42; transform:rotate(15deg); }
@media(max-width:680px) { .paw-mark-top { right:6%; top:11%; width:42px; height:42px; }.paw-mark-bottom { right:6%; bottom:4%; width:34px; height:34px; } }


/* The prepared story image already carries its own feathered edges; blend its pale field into the section instead of cropping it. */
.intro-photo-wrap { min-height:535px; }
.intro-photo-wrap::after { display:none; }
.intro-photo-wrap img { object-position:center; mix-blend-mode:multiply; -webkit-mask-image:none; mask-image:none; }
@media(max-width:980px) { .intro-photo-wrap { min-height:500px; } }
@media(max-width:680px) { .intro-photo-wrap { min-height:440px; } }


/* Opening collage retained above the 3D teddy hero. */
/* Reserve the header's actual height so the full banner begins below it. */
.site-header.home-header { position:sticky; top:0; }
.welcome-banner { position:relative; margin-top:0; padding:0 0 34px; overflow:hidden; background:#fffaf0; }
.welcome-banner > img { display:block; width:100%; max-width:1600px; height:auto; max-height:none; margin:0 auto; object-fit:contain; }
.welcome-banner .banner-button { bottom:4.5%; z-index:2; min-width:190px; min-height:48px; background:#e78f9f; color:#fff; border:0; box-shadow:0 7px 16px rgba(204,118,137,.22); }
@media(max-width:680px) { .welcome-banner { padding-bottom:70px; }.welcome-banner .banner-button { bottom:14px; min-width:172px; min-height:44px; font-size:.94rem; } }


/* The story photo is a surface of the section itself, not a framed image. */
.intro { background-color:#fff; }
.intro-photo-wrap {
  background:#fff url("images/story-bear-blended.jpeg") center center / cover no-repeat;
  mix-blend-mode:multiply;
}
.intro-photo-wrap img { display:none; }

/* No photo container at all: the story photograph is now painted directly into the section background. */
.intro { isolation:isolate; }
.intro::before {
  display:block !important;
  content:"";
  position:absolute;
  z-index:0;
  inset:0 auto 0 0;
  width:58%;
  background:#fff url("images/story-bear-blended.jpeg") center center / cover no-repeat;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 100% 108% at 34% 49%,#000 30%,rgba(0,0,0,.94) 49%,rgba(0,0,0,.48) 70%,transparent 100%);
  mask-image:radial-gradient(ellipse 100% 108% at 34% 49%,#000 30%,rgba(0,0,0,.94) 49%,rgba(0,0,0,.48) 70%,transparent 100%);
  pointer-events:none;
}
.intro-photo-wrap { background:none !important; opacity:0; pointer-events:none; }
.intro-grid { z-index:1; }
@media(max-width:980px) {
  .intro::before { position:relative; display:block; width:100%; height:490px; margin-bottom:-472px; background-size:cover; background-position:center; }
  .intro-photo-wrap { min-height:490px; }
}
@media(max-width:680px) {
  .intro::before { height:430px; margin-bottom:-413px; }
  .intro-photo-wrap { min-height:430px; }
}

/* Final story treatment: use only the supplied image's natural all-edge fade — no CSS shape or frame. */
.intro { background-color:#fff; }
.intro::before {
  width:57%;
  background-color:#fff;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  mix-blend-mode:normal;
  -webkit-mask-image:none;
  mask-image:none;
}
@media(max-width:980px) { .intro::before { width:100%; background-size:cover; } }

/* Crisp centre, invisible edges: the actual photo stays clear and only dissolves into the page at its boundaries. */
.intro::before {
  width:57%;
  background-image:url("images/story-bear-event-clean.jpeg");
  background-color:transparent;
  background-size:cover;
  background-position:40% center;
  opacity:1;
  -webkit-mask-image:
    linear-gradient(to right,#000 0%,#000 61%,rgba(0,0,0,.9) 72%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.9) 12%,#000 23%,#000 77%,rgba(0,0,0,.9) 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,#000 0%,#000 61%,rgba(0,0,0,.9) 72%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.9) 12%,#000 23%,#000 77%,rgba(0,0,0,.9) 88%,transparent 100%);
  mask-composite:intersect;
}
@media(max-width:980px) {
  .intro::before {
    width:100%;
    background-position:center center;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 11%,#000 78%,transparent 100%);
  }
}

/* Let the first two sections flow as one cream scene; show more of the story photo. */
.hero { position:relative; z-index:1; padding-bottom:88px; }
.intro {
  margin-top:-36px;
  padding-top:122px;
  background:
    radial-gradient(ellipse 15% 28% at 1% 5%,rgba(251,219,143,.78) 0 65%,transparent 66%),
    radial-gradient(ellipse 18% 24% at 100% 10%,rgba(189,225,227,.8) 0 65%,transparent 66%),
    radial-gradient(ellipse 21% 26% at 96% 87%,rgba(225,214,237,.72) 0 65%,transparent 66%),
    linear-gradient(to bottom,#fffaf0 0,#fff 150px);
}
@media(min-width:981px) {
  .intro::before {
    width:56%;
    background-size:contain;
    background-position:left center;
  }
}
@media(max-width:980px) { .intro { margin-top:-20px; padding-top:92px; } }
@media(max-width:680px) { .intro { margin-top:0; padding-top:68px; } }

/* Seamless scroll transition: no hard line between hero and story. */
.hero::after {
  display:block;
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
  left:0;
  right:0;
  bottom:-108px;
  height:190px;
  background:linear-gradient(to bottom,rgba(255,250,240,0) 0%,rgba(255,250,240,.42) 37%,#fff 92%);
}
.intro {
  margin-top:-42px;
  padding-top:128px;
  background:transparent;
  isolation:isolate;
}
.intro::before {
  top:-32px;
  bottom:auto;
  height:calc(100% + 32px);
  background-size:cover;
  background-position:40% center;
  filter:blur(2px);
  transform:scale(1.015);
  transform-origin:left center;
  -webkit-mask-image:radial-gradient(ellipse 105% 108% at 31% 50%,#000 34%,rgba(0,0,0,.9) 54%,rgba(0,0,0,.45) 76%,transparent 100%);
  mask-image:radial-gradient(ellipse 105% 108% at 31% 50%,#000 34%,rgba(0,0,0,.9) 54%,rgba(0,0,0,.45) 76%,transparent 100%);
}
.intro-grid { position:relative; z-index:2; }
@media(min-width:981px) { .intro::before { background-size:cover; } }
@media(max-width:980px) { .hero::after { bottom:-75px; height:130px; }.intro { margin-top:-22px; padding-top:100px; }.intro::before { top:0; height:490px; filter:blur(1px); transform:none; -webkit-mask-image:radial-gradient(ellipse 115% 100% at 50% 50%,#000 38%,rgba(0,0,0,.75) 70%,transparent 100%); mask-image:radial-gradient(ellipse 115% 100% at 50% 50%,#000 38%,rgba(0,0,0,.75) 70%,transparent 100%); } }
@media(max-width:680px) { .hero::after { display:none; }.intro { margin-top:0; padding-top:68px; } }

/* One continuous cream canvas: sections no longer read as separate coloured panels. */
html,
body,
main { background:#fffaf0; }

.welcome-banner,
.hero,
.intro,
.mascots-section,
.gallery-section,
.faq-section,
.booking-section,
.contact-section,
.pricing-section,
.news-section { background-color:#fffaf0; }

.welcome-banner { padding-bottom:0; }
.hero {
  background-image:
    radial-gradient(ellipse 16% 25% at 1% 82%,rgba(197,230,237,.74) 0 70%,transparent 71%),
    radial-gradient(ellipse 16% 22% at 3% 94%,rgba(253,228,154,.62) 0 70%,transparent 71%),
    radial-gradient(ellipse 18% 29% at 98% 68%,rgba(247,217,223,.52) 0 70%,transparent 71%),
    radial-gradient(ellipse 18% 25% at 84% 81%,rgba(216,203,233,.58) 0 70%,transparent 71%);
}
.hero::after { display:none; }

.intro {
  margin-top:0;
  padding-top:92px;
  background-image:
    radial-gradient(ellipse 15% 28% at 1% 5%,rgba(251,219,143,.58) 0 65%,transparent 66%),
    radial-gradient(ellipse 18% 24% at 100% 10%,rgba(189,225,227,.54) 0 65%,transparent 66%),
    radial-gradient(ellipse 21% 26% at 96% 87%,rgba(225,214,237,.46) 0 65%,transparent 66%);
}

.mascots-section,
.gallery-section,
.faq-section,
.booking-section,
.contact-section,
.pricing-section,
.news-section { background-image:none; }

/* The photograph lives in the story background, with a soft feathered edge so the copy remains dominant. */
.intro::before {
  top:0;
  width:59%;
  height:100%;
  background-image:url("images/story-bear-event-clean.jpeg");
  background-color:transparent;
  background-size:cover;
  background-position:39% center;
  filter:none;
  opacity:.96;
  transform:none;
  -webkit-mask-image:radial-gradient(ellipse 108% 108% at 31% 50%,#000 34%,rgba(0,0,0,.92) 54%,rgba(0,0,0,.48) 76%,transparent 100%);
  mask-image:radial-gradient(ellipse 108% 108% at 31% 50%,#000 34%,rgba(0,0,0,.92) 54%,rgba(0,0,0,.48) 76%,transparent 100%);
}
.intro-grid { grid-template-columns:minmax(440px,1.12fr) minmax(380px,.88fr); }
.intro-grid > :last-child { position:relative; z-index:2; }

@media(max-width:980px) {
  .intro { padding-top:76px; }
  .intro::before { width:100%; height:490px; background-position:center; }
}
@media(max-width:680px) {
  .intro { padding-top:62px; }
  .intro::before { height:430px; }
}

/* Clean story section: no decorative blobs or photograph that could imply a separate panel. */
.intro {
  padding-block:96px;
  background:#fffaf0;
}
.intro::before,
.intro::after { display:none !important; }
.intro .paw-mark { display:none; }
.intro-grid { display:block; }
.intro-photo-wrap { display:none; }
.intro-grid > :last-child { max-width:680px; margin-inline:auto; }
.intro-title-art { max-width:620px; }
.intro-copy { max-width:620px; }
.intro-memory { display:none; }

@media(max-width:680px) {
  .intro { padding-block:68px; }
}

/* Carry the lower-left hero artwork into the story section so the curve is never cut at the scroll boundary. */
.intro { position:relative; overflow:hidden; isolation:isolate; }
.intro::before {
  display:block !important;
  content:"";
  position:absolute;
  z-index:1;
  top:-185px;
  left:-305px;
  width:900px;
  height:535px;
  background:
    radial-gradient(ellipse 56% 68% at 42% 33%,#c5e6ed 0 65%,transparent 65.5%),
    radial-gradient(ellipse 45% 42% at 58% 73%,#fde49a 0 64%,transparent 64.5%);
  opacity:.74;
  pointer-events:none;
}
.intro-grid { position:relative; z-index:2; }

@media(max-width:680px) {
  .intro::before { top:-145px; left:-360px; width:760px; height:450px; opacity:.62; }
}

/* Final continuous background: no decorative panel is allowed to cross a section boundary. */
body, main,
.welcome-banner, .hero, .intro, .mascots-section, .gallery-section,
.pricing-section, .news-section, .faq-section, .booking-section, .contact-section {
  background:#fffaf0 !important;
  background-image:none !important;
}
.hero::before, .hero::after,
.intro::before, .intro::after,
.mascots-section::before, .mascots-section::after,
.gallery-section::before, .gallery-section::after,
.pricing-section::before, .pricing-section::after,
.news-section::before, .news-section::after,
.faq-section::before, .faq-section::after,
.booking-section::before, .booking-section::after,
.contact-section::before, .contact-section::after { display:none !important; }

/* Mascot cards follow the supplied reference: simple white cards, portrait-first crop and a colour cue per character. */
.mascots-section { padding-block:96px; }
.mascots-section .section-heading { align-items:flex-start; margin-bottom:38px; }
.mascots-section .section-heading > p { width:auto; max-width:740px; margin:14px 0 0; font-size:1.25rem; }
.mascot-grid { gap:20px; }
.mascot-card {
  display:flex;
  flex-direction:column;
  min-height:100%;
  overflow:hidden;
  border:10px solid rgba(255,255,255,.92);
  border-radius:30px;
  background:#fffdfa !important;
  box-shadow:0 12px 34px rgba(87,70,58,.09);
}
.mascot-card img {
  width:100%;
  aspect-ratio:1.12 / 1;
  object-fit:cover;
  background:#f1efed;
}
.mascot-card:nth-child(1) img { object-position:50% 26%; }
.mascot-card:nth-child(2) img { object-position:50% 37%; }
.mascot-card:nth-child(3) img { object-position:50% 23%; }
.mascot-card:nth-child(4) img { object-position:50% 29%; }
.mascot-card > div { display:flex; flex:1; flex-direction:column; padding:17px 15px 15px; }
.mascot-card .card-kicker { display:none; }
.mascot-card h3 { margin:0 0 12px; color:#45404a; font-size:1.7rem; }
.mascot-card h3::after { content:""; display:block; width:45px; height:4px; margin-top:8px; border-radius:999px; background:#e8b7c1; }
.mascot-card:nth-child(2) h3::after { background:#b8dce4; }
.mascot-card:nth-child(3) h3::after { background:#f2d199; }
.mascot-card:nth-child(4) h3::after { background:#d3c4e8; }
.mascot-card p { margin:0; color:#625c58; font-size:.96rem; line-height:1.5; }
.mascot-gallery-hint {
  width:100%;
  justify-content:center;
  margin-top:auto;
  padding:12px 14px;
  border-radius:999px;
  background:#f8d0d7;
  color:#764c58;
  font-size:.9rem;
}
.mascot-card:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(87,70,58,.14); }
.accessory-note { display:none; }
@media(max-width:980px) { .mascot-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px) {
  .mascots-section { padding-block:68px; }
  .mascot-grid { grid-template-columns:1fr; }
  .mascot-card img { aspect-ratio:1.4 / 1; }
}

/* Naša priča: the photograph softly dissolves into the same cream page on every edge. */
.intro {
  padding-block:54px 86px;
}
.intro-grid {
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(390px,.86fr);
  gap:36px;
  align-items:center;
}
.intro-photo-wrap {
  display:block;
  opacity:1;
  min-height:570px;
  width:100%;
  max-width:none;
  background-image:url("images/story-bear-blended.jpeg") !important;
  background-position:42% center;
  background-repeat:no-repeat;
  background-size:cover;
  -webkit-mask-image:radial-gradient(ellipse 92% 91% at 46% 50%, #000 35%, rgba(0,0,0,.96) 54%, rgba(0,0,0,.67) 71%, transparent 100%);
  mask-image:radial-gradient(ellipse 92% 91% at 46% 50%, #000 35%, rgba(0,0,0,.96) 54%, rgba(0,0,0,.67) 71%, transparent 100%);
}
.intro-photo-wrap::after { display:none; }
.intro-grid > :last-child {
  max-width:575px;
  padding:32px 28px 32px 0;
}
@media(max-width:980px) {
  .intro { padding-block:38px 72px; }
  .intro-grid { grid-template-columns:1fr; gap:14px; }
  .intro-photo-wrap { min-height:475px; max-width:700px; margin-inline:auto; }
  .intro-grid > :last-child { max-width:670px; padding:12px 24px 0; margin-inline:auto; }
}
@media(max-width:680px) {
  .intro-photo-wrap {
    min-height:0;
    aspect-ratio:1.08 / 1;
    background-position:center;
    background-size:contain;
    -webkit-mask-image:radial-gradient(ellipse 84% 90% at 50% 50%, #000 32%, rgba(0,0,0,.9) 59%, rgba(0,0,0,.42) 78%, transparent 100%);
    mask-image:radial-gradient(ellipse 84% 90% at 50% 50%, #000 32%, rgba(0,0,0,.9) 59%, rgba(0,0,0,.42) 78%, transparent 100%);
  }
  .intro-grid > :last-child { padding-inline:20px; }
}

/* Keep the story image as one large, blended part of the section — never as a small card. */
.intro-grid { grid-template-columns:52% 48%; gap:0; min-height:650px; }
.intro-photo-wrap { min-height:650px; background:none !important; overflow:visible; display:block; }
.intro-photo-wrap .intro-story-photo {
  display:block !important;
  width:100%;
  height:650px;
  object-fit:cover;
  object-position:42% center;
  -webkit-mask-image:radial-gradient(ellipse 94% 94% at 44% 50%,#000 39%,rgba(0,0,0,.94) 59%,rgba(0,0,0,.55) 77%,transparent 100%);
  mask-image:radial-gradient(ellipse 94% 94% at 44% 50%,#000 39%,rgba(0,0,0,.94) 59%,rgba(0,0,0,.55) 77%,transparent 100%);
}
.intro-grid > :last-child { padding:52px 52px 52px 34px; }
@media(max-width:980px) {
  .intro-grid { grid-template-columns:1fr; min-height:0; gap:0; }
  .intro-photo-wrap { min-height:0; width:min(100%,680px); aspect-ratio:1.06 / 1; margin-inline:auto; }
  .intro-photo-wrap .intro-story-photo {
    width:100%; height:100%; object-fit:contain; object-position:center;
    -webkit-mask-image:radial-gradient(ellipse 89% 92% at 50% 50%,#000 36%,rgba(0,0,0,.9) 62%,rgba(0,0,0,.45) 80%,transparent 100%);
    mask-image:radial-gradient(ellipse 89% 92% at 50% 50%,#000 36%,rgba(0,0,0,.9) 62%,rgba(0,0,0,.45) 80%,transparent 100%);
  }
  .intro-grid > :last-child { max-width:670px; padding:12px 24px 0; margin-inline:auto; }
}

/* Final photographic blend: a wide cream veil removes the rectangular image edge. */
.intro-photo-wrap {
  position:relative;
  isolation:isolate;
  background:transparent !important;
}
.intro-photo-wrap .intro-story-photo {
  position:relative;
  z-index:1;
  opacity:.98;
  -webkit-mask-image:radial-gradient(ellipse 88% 91% at 45% 50%,#000 29%,rgba(0,0,0,.98) 47%,rgba(0,0,0,.76) 63%,rgba(0,0,0,.31) 80%,transparent 100%);
  mask-image:radial-gradient(ellipse 88% 91% at 45% 50%,#000 29%,rgba(0,0,0,.98) 47%,rgba(0,0,0,.76) 63%,rgba(0,0,0,.31) 80%,transparent 100%);
}
.intro-photo-wrap::after {
  content:"";
  display:block;
  position:absolute;
  z-index:2;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(to right,#fffaf0 0%,rgba(255,250,240,.52) 10%,transparent 25%,transparent 70%,rgba(255,250,240,.6) 90%,#fffaf0 100%),
    linear-gradient(to bottom,#fffaf0 0%,rgba(255,250,240,.3) 13%,transparent 28%,transparent 72%,rgba(255,250,240,.42) 89%,#fffaf0 100%);
}
@media(max-width:980px) {
  .intro-photo-wrap .intro-story-photo {
    -webkit-mask-image:radial-gradient(ellipse 86% 90% at 50% 50%,#000 29%,rgba(0,0,0,.97) 48%,rgba(0,0,0,.7) 66%,rgba(0,0,0,.24) 84%,transparent 100%);
    mask-image:radial-gradient(ellipse 86% 90% at 50% 50%,#000 29%,rgba(0,0,0,.97) 48%,rgba(0,0,0,.7) 66%,rgba(0,0,0,.24) 84%,transparent 100%);
  }
}

/* An organic wave gives the photo its own gentle silhouette; the cream fade still hides every edge. */
.intro-photo-wrap {
  -webkit-clip-path:polygon(0 10%,8% 4%,20% 1%,35% 4%,49% 1%,63% 4%,76% 2%,89% 7%,100% 15%,97% 30%,100% 45%,96% 59%,100% 73%,95% 88%,84% 97%,69% 94%,56% 99%,42% 95%,29% 99%,15% 95%,4% 87%,1% 71%,4% 56%,0 42%,3% 27%);
  clip-path:polygon(0 10%,8% 4%,20% 1%,35% 4%,49% 1%,63% 4%,76% 2%,89% 7%,100% 15%,97% 30%,100% 45%,96% 59%,100% 73%,95% 88%,84% 97%,69% 94%,56% 99%,42% 95%,29% 99%,15% 95%,4% 87%,1% 71%,4% 56%,0 42%,3% 27%);
}
@media(max-width:980px) {
  .intro-photo-wrap {
    -webkit-clip-path:polygon(0 9%,13% 3%,30% 5%,47% 1%,66% 5%,84% 3%,100% 12%,96% 31%,100% 49%,96% 67%,100% 86%,82% 97%,62% 94%,43% 99%,24% 95%,7% 91%,2% 72%,5% 53%,0 36%);
    clip-path:polygon(0 9%,13% 3%,30% 5%,47% 1%,66% 5%,84% 3%,100% 12%,96% 31%,100% 49%,96% 67%,100% 86%,82% 97%,62% 94%,43% 99%,24% 95%,7% 91%,2% 72%,5% 53%,0 36%);
  }
}

/* The blurred SVG mask creates a real wavy lower edge that dissolves into the cream background. */
.intro-photo-wrap {
  -webkit-clip-path:none;
  clip-path:none;
}
.intro-photo-wrap .intro-story-photo {
  -webkit-mask-image:url("images/story-wave-mask.svg");
  mask-image:url("images/story-wave-mask.svg");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-position:center;
  mask-position:center;
}
.intro-photo-wrap::after {
  background:
    linear-gradient(to right,#fffaf0 0%,rgba(255,250,240,.46) 11%,transparent 27%,transparent 70%,rgba(255,250,240,.56) 89%,#fffaf0 100%),
    linear-gradient(to bottom,#fffaf0 0%,rgba(255,250,240,.25) 13%,transparent 28%,transparent 66%,rgba(255,250,240,.5) 82%,#fffaf0 100%);
}

/* Make the bottom silhouette visibly wavy as well, while the existing fade keeps it soft. */
.intro-photo-wrap {
  -webkit-clip-path:polygon(0 10%,8% 4%,20% 1%,35% 4%,49% 1%,63% 4%,76% 2%,89% 7%,100% 15%,97% 30%,100% 45%,96% 59%,100% 73%,95% 82%,99% 89%,91% 94%,83% 91%,75% 98%,67% 93%,58% 100%,49% 94%,40% 99%,31% 92%,22% 97%,14% 90%,6% 93%,1% 84%,3% 71%,0 57%,4% 43%,0 30%);
  clip-path:polygon(0 10%,8% 4%,20% 1%,35% 4%,49% 1%,63% 4%,76% 2%,89% 7%,100% 15%,97% 30%,100% 45%,96% 59%,100% 73%,95% 82%,99% 89%,91% 94%,83% 91%,75% 98%,67% 93%,58% 100%,49% 94%,40% 99%,31% 92%,22% 97%,14% 90%,6% 93%,1% 84%,3% 71%,0 57%,4% 43%,0 30%);
}
@media(max-width:980px) {
  .intro-photo-wrap {
    -webkit-clip-path:polygon(0 9%,13% 3%,30% 5%,47% 1%,66% 5%,84% 3%,100% 12%,96% 31%,100% 49%,96% 67%,100% 81%,95% 89%,86% 94%,77% 91%,68% 98%,58% 93%,48% 100%,38% 94%,28% 98%,18% 92%,8% 94%,2% 84%,5% 70%,0 55%,4% 38%);
    clip-path:polygon(0 9%,13% 3%,30% 5%,47% 1%,66% 5%,84% 3%,100% 12%,96% 31%,100% 49%,96% 67%,100% 81%,95% 89%,86% 94%,77% 91%,68% 98%,58% 93%,48% 100%,38% 94%,28% 98%,18% 92%,8% 94%,2% 84%,5% 70%,0 55%,4% 38%);
  }
}

/* Character colours shared by the frame, underline and gallery control. */
.mascot-grid .mascot-card:nth-child(1) { --character-frame:#e5c694; --character-soft:#f7e9d0; --character-ink:#765127; }
.mascot-grid .mascot-card:nth-child(2) { --character-frame:#ea9ca8; --character-soft:#fbe0e5; --character-ink:#913b4c; }
.mascot-grid .mascot-card:nth-child(3) { --character-frame:#8dc8e7; --character-soft:#dff1fb; --character-ink:#285f80; }
.mascot-grid .mascot-card:nth-child(4) { --character-frame:#95d5d3; --character-soft:#def3f1; --character-ink:#2c6866; }
.mascot-grid .mascot-card { border:6px solid var(--character-frame); }
.mascot-grid .mascot-card h3::after { background:var(--character-frame); }
.mascot-grid .mascot-card .mascot-gallery-hint { background:var(--character-soft); color:var(--character-ink); }
.mascot-grid .mascot-card img { aspect-ratio:1; height:auto; object-fit:contain; object-position:center; padding:8px; background:#fff; }

.events-section { background:#fffaf0; }
.event-album { padding:32px; border:1px solid #e7d5bd; border-radius:24px; background:#fffdf8; margin-top:24px; }
.event-album h3 { font-size:clamp(1.5rem,3vw,2.2rem); margin:8px 0 16px; }
.event-empty { color:#786c63; margin:0; }
.event-details summary { cursor:pointer; color:#765127; padding:12px 0; font-weight:700; }
.event-photos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px; }
.event-photos img { width:100%; aspect-ratio:1; object-fit:cover; }
.designer-credit a { text-underline-offset:4px; }
@media(max-width:680px) { .event-album { padding:24px; } .event-photos { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.events-page { padding-top:160px; min-height:65vh; }
.events-page h1 { font-size:clamp(2.6rem,6vw,4.5rem); line-height:1.1; margin:10px 0 20px; }
.main-nav a[aria-current="page"] { color:#a65169; text-decoration:underline; text-underline-offset:7px; }
@media(max-width:680px) { .events-page { padding-top:125px; } }


/* Mobile story layout: photograph and opening thought share the first view, then the readable text follows. */
.intro-top, .intro-body { grid-column:2; }
.intro-photo-wrap { grid-column:1; grid-row:1 / span 2; }
@media(max-width:680px) {
  .intro { padding:42px 0 62px; }
  .intro::before { display:none !important; }
  .intro-grid {
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:28px 16px;
    align-items:start;
  }
  .intro-photo-wrap {
    grid-column:1;
    grid-row:1;
    display:block;
    min-height:292px;
    height:292px;
    margin:0;
    opacity:1;
    background:#fffaf0 url("images/story-bear-event-clean.jpeg") 42% center / cover no-repeat !important;
    mix-blend-mode:normal;
    pointer-events:auto;
    -webkit-clip-path:none;
    clip-path:none;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 68%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 11%,#000 84%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,#000 0%,#000 68%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 11%,#000 84%,transparent 100%);
    mask-composite:intersect;
  }
  .intro-top { grid-column:2; grid-row:1; padding-top:18px; }
  .intro-body { grid-column:1 / -1; grid-row:2; position:relative; }
  .intro-eyebrow { margin:0 0 10px; font-size:.66rem; letter-spacing:.13em; }
  .intro-eyebrow::after { width:37px; }
  .intro-title-art { font-size:clamp(1.68rem,8.5vw,2.2rem); line-height:1.02; letter-spacing:-.045em; }
  .intro-title-art b { display:none; }
  .intro-tagline { margin:12px 0 0; font-size:1.02rem; line-height:1.25; }
  .intro-copy { max-width:100%; font-size:1rem; line-height:1.62; }
  .intro-signoff { margin-top:17px; }
}

/* Phone hero: keep the complete mascot visible rather than clipping its head or feet. */
@media(max-width:680px) {
  .hero { overflow:visible; padding-bottom:34px; }
  .hero-illustration { min-height:490px; margin:20px auto -20px; }
  .hero-bear-tuxedo {
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    object-position:center center;
  }
}

/* Spiderman uses the same six-pixel frame as every other mascot, in softer superhero colours. */
.mascot-grid .mascot-card.mascot-spiderman {
  border-width:6px;
  border-top-color:#b85265;
  border-right-color:#729abd;
  border-bottom-color:#b85265;
  border-left-color:#729abd;
}
.mascot-spiderman::after { display:none; }

/* Mobile story composition: photograph and headline sit alongside each other without overlap. */
@media(max-width:680px) {
  .intro { padding:42px 0 62px; }
  .intro-grid {
    display:grid;
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
    gap:28px 16px;
    align-items:start;
  }
  .intro-photo-wrap {
    grid-column:1;
    grid-row:1;
    min-height:286px;
    height:286px;
    background:#fffaf0 url("images/story-bear-event-clean.jpeg") 39% center / cover no-repeat !important;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 72%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 86%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,#000 0%,#000 72%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 86%,transparent 100%);
    mask-composite:intersect;
  }
  .intro-top {
    grid-column:2;
    grid-row:1;
    width:auto;
    margin:0;
    padding:18px 0 0;
    background:none;
  }
  .intro-body { grid-column:1 / -1; grid-row:2; }
  .intro-eyebrow { margin-bottom:9px; }
  .intro-title-art { font-size:clamp(1.75rem,8.5vw,2.25rem); line-height:1.02; }
  .intro-tagline { margin-top:12px; font-size:1.03rem; line-height:1.27; }
}

/* Restore Spiderman's visible frame at the same weight as the other mascot cards. */
.mascot-grid .mascot-card.mascot-spiderman {
  border:6px solid #b55c70;
  border-left-color:#759dc1;
  border-right-color:#759dc1;
}

/* Mobile story composition: one compact image-and-title scene, with no detached mascot crop. */
@media(max-width:680px) {
  .intro { padding:38px 0 62px; }
  .intro-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
  }
  .intro-photo-wrap {
    grid-column:1;
    grid-row:1;
    width:100%;
    min-height:322px;
    height:322px;
    margin:0;
    background:#fffaf0 url("images/story-bear-event-clean.jpeg") 38% center / cover no-repeat !important;
    -webkit-mask-image:radial-gradient(ellipse 96% 91% at 45% 50%,#000 42%,rgba(0,0,0,.88) 65%,transparent 100%);
    mask-image:radial-gradient(ellipse 96% 91% at 45% 50%,#000 42%,rgba(0,0,0,.88) 65%,transparent 100%);
  }
  .intro-top {
    grid-column:1;
    grid-row:1;
    z-index:3;
    align-self:center;
    justify-self:end;
    width:62%;
    padding:18px 0 18px 20px;
    background:linear-gradient(to right,rgba(255,250,240,0),#fffaf0 19%,#fffaf0 100%);
  }
  .intro-body { grid-column:1; grid-row:2; }
  .intro-eyebrow { margin-bottom:9px; }
  .intro-title-art { font-size:clamp(2rem,9.5vw,2.65rem); }
  .intro-tagline { font-size:1.08rem; }
}

/* Mobile story: one photograph beside the heading, never a second background image. */
@media(max-width:680px) {
  .intro { padding:54px 0 72px; }
  .intro-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:22px 12px; align-items:center; }
  .intro-photo-wrap {
    grid-column:1;
    grid-row:1;
    min-height:0;
    height:290px;
    transform:translateY(-28px);
    aspect-ratio:auto;
    background:none !important;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .intro-photo-wrap .intro-story-photo {
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
  .intro-top {
    grid-column:2;
    grid-row:1;
    align-self:start;
    justify-self:stretch;
    width:auto;
    margin:0;
    padding:0;
    background:none;
  }
  .intro-body { grid-column:1 / -1; grid-row:2; }
  .intro-eyebrow { font-size:.75rem; margin-bottom:12px; gap:8px; }
  .intro-eyebrow::after { width:24px; }
  .intro-title-art { font-size:clamp(1.5rem,7vw,2rem); line-height:1.06; overflow-wrap:anywhere; }
  .intro-tagline { margin:14px 0 0; font-size:1rem; line-height:1.3; }
}