/* AMANELA Living — PATCH 2.8
   Mockup fidelity + mascot story + language stability support
   Reversible staging override only. */

:root{
  --al-max:1480px;
  --al-cream:#fbf8f1;
  --al-ink:#17383a;
  --al-sage:#7f9a78;
  --al-warm:#d1784b;
  --al-gold:#d6a43a;
  --al-shadow:0 18px 40px rgba(38,55,55,.12);
  --al-char-shadow:0 18px 28px rgba(49,65,62,.18);
}

/* ---- global width repair: full-size content, not miniaturised ---- */
html,body{max-width:none!important;min-width:0!important}
body{overflow-x:hidden}
.wrap,.header-inner{
  width:min(var(--al-max),calc(100% - 64px))!important;
  max-width:var(--al-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.section,.module-section,.intro-showcase,.hero{width:100%!important;max-width:none!important}
main{width:100%!important;max-width:none!important}

/* ---- Header / logo presence ---- */
.site-header .header-inner{min-height:94px!important;gap:24px!important}
.brand-v28{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important}
.brand-v28>img{width:282px!important;max-width:none!important;height:auto!important;display:block!important}
.brand-v28 .brand-tagline{display:none!important}
.site-header .nav{flex:1 1 auto!important;justify-content:center!important}
.site-header .lang{flex:0 0 auto!important}

/* ---- PHILOSOPHY / approved mockup blueprint ---- */
.intro-showcase{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 17%,rgba(222,232,218,.46),transparent 22%),
    radial-gradient(circle at 12% 74%,rgba(240,224,202,.40),transparent 24%),
    linear-gradient(180deg,#fffdf9 0%,#fbf8f1 100%);
  padding:62px 0 78px!important;
}
.intro-showcase:after{
  content:"";position:absolute;left:-7%;bottom:-24%;width:54%;height:54%;
  background:radial-gradient(ellipse at center,rgba(135,156,118,.09),rgba(135,156,118,0) 70%);
  transform:rotate(-8deg);pointer-events:none
}
.intro-grid{
  display:grid!important;
  grid-template-columns:minmax(390px,.86fr) minmax(640px,1.62fr) minmax(130px,.32fr)!important;
  gap:34px!important;
  align-items:center!important;
  min-height:650px!important;
}
.intro-copy{position:relative;z-index:2;align-self:center!important}
.intro-copy h1{font-size:clamp(3.2rem,4.25vw,5.15rem)!important;line-height:.98!important;letter-spacing:-.035em!important;margin:12px 0 20px!important;color:var(--al-ink)!important;max-width:7.2em!important}
.intro-copy>p:not(.eyebrow){font-size:1.13rem!important;line-height:1.58!important;max-width:34em!important;color:#4b5d5e!important}
.intro-copy .checklist{margin-top:38px!important;gap:12px!important}
.intro-copy .checklist li{font-size:1rem!important;line-height:1.42!important}
.intro-copy .text-link{display:inline-block!important;margin-top:16px!important;font-size:1.02rem!important}

.intro-media.intro-scene{position:relative!important;display:grid!important;grid-template-columns:1.55fr .82fr!important;gap:18px!important;align-items:center!important;overflow:visible!important;padding:66px 66px 52px 52px!important;min-height:590px!important}
.intro-main-wrap{position:relative!important;z-index:2!important;transform:rotate(-1.25deg)!important;transform-origin:center center!important}
.intro-photo-main{width:100%!important;height:430px!important;object-fit:cover!important;border-radius:28px!important;box-shadow:var(--al-shadow)!important;border:5px solid rgba(255,255,255,.94)!important}
.intro-stack{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr!important;gap:15px!important;align-self:center!important;z-index:2!important}
.intro-stack .intro-photo{width:100%!important;height:195px!important;object-fit:cover!important;border-radius:24px!important;border:5px solid rgba(255,255,255,.96)!important;box-shadow:0 14px 30px rgba(38,55,55,.12)!important}
.intro-stack .p1{transform:rotate(1.5deg)!important}.intro-stack .p2{transform:rotate(-1deg)!important}.intro-stack .p3{transform:rotate(-1.35deg)!important}.intro-stack .p4{transform:rotate(1.15deg)!important}

.intro-speech-bubble{
  position:absolute!important;left:15%;top:0!important;z-index:8!important;
  padding:20px 34px!important;max-width:360px!important;
  background:rgba(250,241,229,.97)!important;border:1px solid rgba(199,162,122,.22)!important;
  border-radius:52% 48% 50% 46%/52% 48% 52% 48%!important;
  box-shadow:0 14px 30px rgba(50,64,62,.09)!important;
  font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive!important;
  font-size:1.32rem!important;line-height:1.25!important;color:#252b2c!important;text-align:center!important;
  transform:rotate(-2deg)!important
}
.intro-speech-bubble:after{content:"";position:absolute;left:40%;bottom:-18px;width:34px;height:28px;background:rgba(250,241,229,.97);clip-path:polygon(0 0,100% 0,38% 100%)}

.intro-scene-ami,.intro-scene-mela,.intro-scene-sunny{position:absolute!important;pointer-events:none!important;z-index:7!important;filter:drop-shadow(var(--al-char-shadow))!important;object-fit:contain!important}
.intro-scene-ami{left:-5px!important;top:128px!important;width:205px!important;transform:rotate(-3deg)!important}
.intro-scene-mela{right:62px!important;top:-10px!important;width:238px!important;transform:rotate(2deg)!important}
.intro-scene-sunny{right:18px!important;bottom:-8px!important;width:176px!important;transform:rotate(3deg)!important}

/* botanical leaf clusters: deliberately subtle */
.intro-leaf-cluster{position:absolute!important;z-index:1!important;width:150px;height:150px;opacity:.58;pointer-events:none}
.intro-leaf-cluster:before,.intro-leaf-cluster:after{content:"";position:absolute;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#b6c2a5,#78906d)}
.intro-leaf-cluster:before{width:88px;height:34px;left:12px;top:42px;transform:rotate(-32deg)}
.intro-leaf-cluster:after{width:78px;height:30px;left:65px;top:74px;transform:rotate(24deg);background:linear-gradient(135deg,#d6dcc8,#8ea083)}
.intro-leaf-cluster-a{left:1%;bottom:13%;transform:rotate(-12deg)}
.intro-leaf-cluster-b{right:0;top:12%;transform:rotate(26deg) scale(.86)}

.intro-script{position:relative!important;z-index:3!important;align-self:center!important;margin-left:-4px!important;font-size:clamp(1.7rem,2.2vw,2.65rem)!important;line-height:.98!important;color:#17383a!important}
.intro-script span{display:block!important}

/* ---- Hero: full background but properly sized inner content ---- */
.hero{min-height:470px!important;position:relative!important;overflow:hidden!important}
.hero .hero-bg{width:100%!important;height:100%!important;object-fit:cover!important;position:absolute!important;inset:0!important}
.hero-grid{min-height:470px!important;display:grid!important;grid-template-columns:minmax(0,760px) 1fr!important;align-items:center!important;gap:48px!important}
.hero-content{max-width:760px!important}
.hero-content h2{font-size:clamp(3rem,4.2vw,5.2rem)!important;line-height:.96!important}
.hero-content p{font-size:1.08rem!important;line-height:1.55!important;max-width:46em!important}
.hero-note{justify-self:end!important;font-size:clamp(1.5rem,2vw,2.4rem)!important}

/* ---- WHY AMANELA: ensure clearly visible story, not buried ---- */
.why-amanela-section{padding:78px 0!important;background:linear-gradient(180deg,#f4fbf8 0%,#fff9ef 100%)!important}
.why-amanela-grid{display:grid!important;grid-template-columns:1.08fr .92fr!important;gap:34px!important;align-items:stretch!important}
.why-amanela-copy,.why-amanela-acrostic{background:rgba(255,255,255,.9)!important;border:1px solid rgba(111,150,138,.18)!important;border-radius:30px!important;padding:34px!important;box-shadow:0 16px 34px rgba(35,55,55,.07)!important}
.why-amanela-copy h2{font-size:clamp(2.5rem,3.4vw,4.25rem)!important;line-height:1.03!important;margin:8px 0 18px!important;color:var(--al-ink)!important}
.why-amanela-copy>p{font-size:1.05rem!important;line-height:1.66!important;color:#506162!important}
.why-amanela-quote{margin:22px 0!important;padding:20px 22px!important;border-left:4px solid var(--al-gold)!important;background:#fffaf0!important;border-radius:0 18px 18px 0!important;font:600 1.08rem/1.55 Georgia,serif!important;color:var(--al-ink)!important}
.why-amanela-bridge{font-weight:700!important;color:var(--al-ink)!important}
.acrostic-card ul{list-style:none!important;padding:0!important;margin:0!important;display:grid!important;gap:11px!important}
.acrostic-card li{display:grid!important;grid-template-columns:42px 1fr!important;align-items:center!important;gap:12px!important;font-size:1.05rem!important}
.acrostic-card strong{width:42px!important;height:42px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:linear-gradient(135deg,#d27a4f,#e3a044)!important;color:#fff!important;font-size:1.2rem!important}
.why-mini-trio{position:relative!important;min-height:190px!important;margin-top:24px!important;padding:18px 18px 120px!important;border-radius:24px!important;background:#f8f3e8!important;overflow:hidden!important}
.why-mini-trio-bubble{font-size:1rem!important;line-height:1.5!important;color:#445657!important;max-width:470px!important}
.why-mini-trio-art{position:absolute!important;left:18px!important;right:18px!important;bottom:6px!important;height:112px!important}
.why-mini-trio-art img{position:absolute!important;bottom:0!important;height:108px!important;width:auto!important;filter:drop-shadow(var(--al-char-shadow))!important}
.why-mini-trio-art .ami{left:0!important}.why-mini-trio-art .mela{left:82px!important}.why-mini-trio-art .sunny{right:0!important;height:94px!important}
.mascot-story-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;margin-top:28px!important}
.mascot-story-card{display:grid!important;grid-template-columns:120px 1fr!important;gap:18px!important;align-items:center!important;padding:22px!important;border-radius:26px!important;background:#fff!important;border:1px solid rgba(111,150,138,.18)!important;box-shadow:0 12px 28px rgba(35,55,55,.06)!important}
.mascot-story-card img{width:118px!important;height:118px!important;object-fit:contain!important;filter:drop-shadow(var(--al-char-shadow))!important}

/* ---- logo footer presence ---- */
.footer-brand-logo{width:272px!important;max-width:none!important;height:auto!important}

/* ---- modules maintain generous desktop scale ---- */
.module-heading,.audience-module-heading,.everyday-module-intro,.csr7x-heading{width:min(var(--al-max),calc(100% - 64px))!important;max-width:var(--al-max)!important}

/* ---- Tablet ---- */
@media (max-width:1180px){
  :root{--al-max:1120px}
  .brand-v28>img{width:246px!important}
  .intro-grid{grid-template-columns:minmax(330px,.9fr) minmax(520px,1.45fr)!important;gap:24px!important}
  .intro-script{display:none!important}
  .intro-media.intro-scene{padding-right:24px!important}
  .intro-scene-ami{width:170px!important;left:-12px!important}
  .intro-scene-mela{width:195px!important;right:28px!important}
  .intro-scene-sunny{width:145px!important;right:-2px!important}
  .why-amanela-grid{grid-template-columns:1fr!important}
}

/* ---- Mobile / small tablet ---- */
@media (max-width:860px){
  .wrap,.header-inner{width:calc(100% - 32px)!important;max-width:none!important}
  .site-header .header-inner{min-height:86px!important;gap:12px!important}
  .brand-v28>img{width:205px!important}
  .intro-showcase{padding:34px 0 56px!important}
  .intro-grid{grid-template-columns:1fr!important;min-height:0!important;gap:32px!important}
  .intro-copy h1{font-size:clamp(2.65rem,9vw,4rem)!important;max-width:none!important}
  .intro-media.intro-scene{grid-template-columns:1.35fr .9fr!important;padding:76px 16px 64px 34px!important;min-height:520px!important}
  .intro-photo-main{height:340px!important}
  .intro-stack .intro-photo{height:156px!important}
  .intro-speech-bubble{left:8%!important;top:6px!important;font-size:1.08rem!important;padding:15px 22px!important;max-width:300px!important}
  .intro-scene-ami{left:-8px!important;top:145px!important;width:128px!important}
  .intro-scene-mela{right:14px!important;top:18px!important;width:150px!important}
  .intro-scene-sunny{right:0!important;bottom:5px!important;width:110px!important}
  .hero,.hero-grid{min-height:420px!important}
  .hero-grid{grid-template-columns:1fr!important}
  .hero-content h2{font-size:clamp(2.7rem,8vw,4.4rem)!important}
  .hero-note{display:none!important}
  .why-amanela-section{padding:56px 0!important}
  .why-amanela-copy,.why-amanela-acrostic{padding:24px!important}
  .mascot-story-grid{grid-template-columns:1fr!important}
}

@media (max-width:620px){
  .site-header .header-inner{min-height:78px!important}
  .brand-v28>img{width:188px!important}
  .intro-media.intro-scene{grid-template-columns:1fr 1fr!important;padding:68px 4px 78px 24px!important;min-height:465px!important}
  .intro-main-wrap{grid-column:1/3!important}
  .intro-photo-main{height:300px!important}
  .intro-stack{grid-column:1/3!important;grid-template-columns:repeat(4,1fr)!important;grid-template-rows:1fr!important;gap:8px!important;margin-top:8px!important}
  .intro-stack .intro-photo{height:92px!important;border-radius:16px!important;border-width:3px!important}
  .intro-speech-bubble{left:4%!important;top:4px!important;max-width:250px!important;font-size:.98rem!important;padding:12px 16px!important}
  .intro-scene-ami{left:-5px!important;top:122px!important;width:105px!important}
  .intro-scene-mela{right:6px!important;top:26px!important;width:118px!important}
  .intro-scene-sunny{right:2px!important;bottom:12px!important;width:84px!important}
  .intro-leaf-cluster{display:none!important}
  .why-amanela-copy h2{font-size:2.45rem!important}
  .mascot-story-card{grid-template-columns:82px 1fr!important;padding:18px!important}
  .mascot-story-card img{width:82px!important;height:82px!important}
  .footer-brand-logo{width:220px!important}
}