:root{--ink:#11110f;--cream:#f7f2e9;--gold:#a76618;--gold2:#ddb763;--line:rgba(181,121,24,.48)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:Montserrat,Arial,sans-serif;overflow-x:hidden;min-height:100vh;position:relative}
/* V4.6 — smoother intro: logo fades from blur to sharp without scale growth */
.intro-splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#071521;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease,visibility 1s ease}
.intro-pending .intro-splash{opacity:1;visibility:visible;pointer-events:auto}
.intro-pending body{overflow:hidden}
.intro-inner{position:relative;display:grid;place-items:center;width:min(620px,88vw);min-height:min(620px,88vw);transform:translateY(4px);overflow:visible}
.intro-logo-stage{isolation:isolate}
.intro-logo{position:relative;z-index:3;display:block;width:min(470px,72vw);height:auto;object-fit:contain;opacity:0;transform:translateY(10px);filter:blur(26px) drop-shadow(0 18px 38px rgba(0,0,0,.24));animation:introLogoReveal 2.35s cubic-bezier(.22,.74,.2,1) .74s forwards,introLogoFloat 3.8s ease-in-out 4.35s infinite alternate}
.intro-glow{position:absolute;z-index:1;width:min(520px,78vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(75,183,255,.38) 0%,rgba(52,135,255,.21) 28%,rgba(23,98,190,.10) 48%,rgba(7,21,33,0) 72%);filter:blur(24px);opacity:0;transform:scale(.82);animation:introGlowIn 2.25s cubic-bezier(.22,.74,.2,1) .9s forwards,introGlowPulse 2.8s ease-in-out 4.55s infinite alternate}
.intro-light-track{position:absolute;z-index:4;left:50%;bottom:-12px;width:100vw;height:34px;transform:translateX(-50%);overflow:hidden;opacity:1;pointer-events:none}
.intro-light-track::before{content:none}
.intro-light-ray{position:absolute;top:50%;left:-30vw;width:min(250px,18vw);height:2.5px;transform:translateY(-50%);border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(138,215,255,.06) 18%,rgba(166,229,255,.32) 40%,rgba(255,255,255,.88) 52%,rgba(166,229,255,.32) 64%,rgba(138,215,255,.06) 82%,rgba(255,255,255,0) 100%);filter:blur(1.1px);box-shadow:0 0 8px rgba(227,247,255,.72),0 0 16px rgba(114,204,255,.32),0 0 24px rgba(114,204,255,.10);opacity:0;animation:introLightSweepFull 3.1s cubic-bezier(.2,.55,.22,.98) 3.08s forwards}
.intro-sparkle{position:absolute;z-index:5;width:24px;height:24px;opacity:0;filter:drop-shadow(0 0 10px rgba(223,246,255,.82))}
.intro-sparkle::before,.intro-sparkle::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.92),rgba(127,219,255,.26),rgba(255,255,255,0));transform:translate(-50%,-50%);border-radius:999px}
.intro-sparkle::before{width:2px;height:100%}
.intro-sparkle::after{width:100%;height:2px}
.intro-sparkle.sparkle-a{top:19%;left:68%;animation:introSparkleTwinkle .88s ease 5.45s 1 both}
.intro-sparkle.sparkle-b{top:26%;left:75%;width:16px;height:16px;animation:introSparkleTwinkle .76s ease 5.76s 1 both}
.intro-splash.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
@keyframes introLogoReveal{0%{opacity:0;transform:translateY(10px);filter:blur(26px) drop-shadow(0 18px 38px rgba(0,0,0,.16))}28%{opacity:.14;transform:translateY(8px);filter:blur(20px) drop-shadow(0 18px 38px rgba(0,0,0,.18))}62%{opacity:.64;transform:translateY(3px);filter:blur(8px) drop-shadow(0 18px 38px rgba(0,0,0,.22))}86%{opacity:.94;transform:translateY(0);filter:blur(2px) drop-shadow(0 18px 38px rgba(0,0,0,.26))}100%{opacity:1;transform:translateY(0);filter:blur(0) drop-shadow(0 18px 38px rgba(0,0,0,.28))}}
@keyframes introLogoFloat{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes introGlowIn{0%{opacity:0;transform:scale(.82)}100%{opacity:1;transform:scale(1)}}
@keyframes introGlowPulse{from{opacity:.56;transform:scale(.985)}to{opacity:.88;transform:scale(1.035)}}
@keyframes introLightSweepFull{0%{left:-30vw;opacity:0}10%{opacity:.92}84%{opacity:.92}100%{left:108vw;opacity:0}}
@keyframes introSparkleTwinkle{0%{opacity:0;transform:scale(.2) rotate(0deg)}22%{opacity:1;transform:scale(.98) rotate(45deg)}52%{opacity:.74;transform:scale(.76) rotate(45deg)}76%{opacity:1;transform:scale(.9) rotate(45deg)}100%{opacity:0;transform:scale(.28) rotate(45deg)}}
@media(max-width:720px){.intro-inner{width:92vw;min-height:92vw}.intro-logo{width:min(390px,78vw)}.intro-light-track{bottom:-8px;height:28px}.intro-light-ray{width:min(200px,39vw)}.intro-sparkle.sparkle-a{top:20%;left:69%}.intro-sparkle.sparkle-b{top:27%;left:77%}}
@media (prefers-reduced-motion:reduce){.intro-logo,.intro-glow,.intro-light-ray,.intro-sparkle{animation-duration:.01ms!important;animation-delay:0s!important}.intro-splash{transition-duration:.15s}}

body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 2%,rgba(255,255,255,.98),transparent 32%),radial-gradient(circle at 72% 14%,rgba(232,218,193,.32),transparent 36%),linear-gradient(140deg,rgba(255,255,255,.74),transparent 45%);z-index:-8}
.ambient{position:fixed;pointer-events:none;z-index:-7;filter:blur(45px)}.ambient-a{width:620px;height:720px;right:-70px;top:-80px;background:radial-gradient(circle at 46% 38%,rgba(134,105,64,.14),transparent 64%)}.ambient-b{width:560px;height:500px;left:-180px;bottom:-120px;background:radial-gradient(circle,rgba(201,169,112,.13),transparent 68%)}
/* V2.2 — sunlight through a real leafy branch: soft photographic silhouette, not hard blocks. */
.sun-shadow{position:fixed;inset:0;z-index:-5;pointer-events:none;overflow:hidden;mix-blend-mode:multiply;opacity:.72}
.frame-shadow{position:absolute;right:-4vw;top:-10vh;width:61vw;height:60vh;transform:rotate(-7deg);filter:blur(17px);opacity:.42;background:linear-gradient(90deg,transparent 0 12%,rgba(78,65,47,.24) 13% 18%,transparent 19% 38%,rgba(78,65,47,.20) 39% 44%,transparent 45% 67%,rgba(78,65,47,.16) 68% 73%,transparent 74%),linear-gradient(0deg,transparent 0 25%,rgba(78,65,47,.18) 27% 34%,transparent 36% 59%,rgba(78,65,47,.15) 61% 68%,transparent 70%);mask-image:linear-gradient(125deg,transparent 0%,#000 22%,#000 80%,transparent 100%)}
/* Organic branch made from overlapping soft leaves. Each leaf has a different angle/blur so the eye reads it as foliage. */
.leaf{position:absolute;background:rgba(65,58,43,.30);border-radius:100% 0 100% 0;transform-origin:95% 90%;filter:blur(7px);box-shadow:0 0 16px rgba(65,58,43,.08)}
.l1{top:1vh;right:1vw;width:13vw;height:5.4vw;transform:rotate(-28deg)}
.l2{top:8vh;right:8vw;width:10vw;height:4.2vw;transform:rotate(18deg);opacity:.82}
.l3{top:16vh;right:-1vw;width:15vw;height:5.8vw;transform:rotate(-11deg);opacity:.92}
.l4{top:27vh;right:7vw;width:11vw;height:4.4vw;transform:rotate(31deg);opacity:.76}
.l5{top:39vh;right:-2vw;width:14vw;height:5.3vw;transform:rotate(-20deg);opacity:.82}
.stem{position:absolute;right:5vw;top:-6vh;width:24vw;height:69vh;border-radius:52% 48% 0 0;border-left:1.15vw solid rgba(63,56,42,.22);transform:rotate(-19deg);filter:blur(7px);opacity:.8}
.sun-shadow::before,.sun-shadow::after{content:"";position:absolute;right:-2vw;width:30vw;height:34vw;filter:blur(9px);opacity:.75;background:radial-gradient(ellipse at 70% 12%,rgba(63,56,42,.27) 0 7%,transparent 8%),radial-gradient(ellipse at 44% 20%,rgba(63,56,42,.24) 0 6%,transparent 7%),radial-gradient(ellipse at 78% 30%,rgba(63,56,42,.29) 0 8%,transparent 9%),radial-gradient(ellipse at 52% 39%,rgba(63,56,42,.22) 0 7%,transparent 8%),radial-gradient(ellipse at 88% 48%,rgba(63,56,42,.25) 0 7%,transparent 8%),radial-gradient(ellipse at 63% 59%,rgba(63,56,42,.24) 0 8%,transparent 9%),radial-gradient(ellipse at 84% 72%,rgba(63,56,42,.28) 0 7%,transparent 8%),radial-gradient(ellipse at 50% 78%,rgba(63,56,42,.19) 0 6%,transparent 7%)}
.sun-shadow::before{top:-5vh;transform:rotate(-18deg) scale(1.16)}
.sun-shadow::after{top:23vh;right:-7vw;transform:rotate(14deg) scale(.92);opacity:.52;filter:blur(13px)}
.topbar{position:relative;z-index:5;width:min(1420px,92vw);margin:auto;padding:30px 0 0;display:flex}.menu-btn{width:54px;height:54px;border:1px solid rgba(20,20,20,.22);border-radius:50%;background:rgba(255,255,255,.34);display:grid;place-content:center;gap:7px;cursor:pointer;backdrop-filter:blur(7px);transition:.3s}.menu-btn span{display:block;width:23px;height:2px;background:#111}.menu-btn:hover{transform:rotate(4deg) scale(1.04);border-color:var(--gold)}
.shell{width:min(1420px,92vw);margin:0 auto}.hero{text-align:center;margin-top:-20px}.hero h1{margin:0;font-family:"Cormorant Garamond",serif;font-size:clamp(116px,13vw,208px);font-weight:600;line-height:.77;letter-spacing:.015em}
/* Uses Cherolina when installed on the Windows PC. No font file is bundled. */
.script-title{font-family:"Cherolina","Andaman","Italianno","Segoe Script",cursive;font-size:clamp(109px,12.2vw,190px);font-weight:400;line-height:.52;color:#8e4e16;margin-top:-24px;letter-spacing:.006em;white-space:nowrap;transform:scaleX(1.16);transform-origin:center;text-shadow:0 2px 12px rgba(151,91,25,.08)}
.module-line{margin-top:38px;font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.35em;font-size:16px}.module-line i{font-style:normal;color:#a98855;margin:0 12px}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:34px auto 0;perspective:1200px}.module-card{position:relative;aspect-ratio:1.72/1;border-radius:31px;overflow:hidden;border:1px solid rgba(221,179,93,.9);background-image:var(--bg);background-size:cover;background-position:center;text-decoration:none;color:white;box-shadow:0 15px 31px rgba(67,45,17,.13),0 0 0 1px rgba(255,255,255,.05) inset;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s;background-color:#1b1712;isolation:isolate}.module-card::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s;z-index:-2}.module-card:hover::before{transform:scale(1.065);filter:saturate(1.08) contrast(1.03)}.card-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,3,3,.02) 14%,rgba(4,4,4,.18) 47%,rgba(4,4,4,.84) 100%);z-index:-1}.module-card:hover{transform:translateY(-8px) rotateX(.8deg);box-shadow:0 24px 48px rgba(63,42,18,.22),0 0 0 1px rgba(238,197,107,.2);border-color:#efca77}.shine{position:absolute;inset:-40% -65%;background:linear-gradient(110deg,transparent 43%,rgba(255,237,194,.23) 50%,transparent 57%);transform:translateX(-46%) rotate(2deg);transition:transform .8s ease;pointer-events:none}.module-card:hover .shine{transform:translateX(48%) rotate(2deg)}.card-copy{position:absolute;left:24px;bottom:20px;right:88px}.card-copy h2{margin:0 0 6px;font-family:"Cormorant Garamond",serif;font-size:clamp(34px,2.6vw,48px);font-weight:600;line-height:.9;letter-spacing:.02em}.card-copy p{margin:0;max-width:330px;font-family:"Cormorant Garamond",serif;font-size:clamp(17px,1.3vw,21px);line-height:1.12;color:rgba(255,255,255,.92)}.arrow{position:absolute;right:22px;bottom:20px;width:52px;height:52px;border:1px solid #e1b957;border-radius:50%;display:grid;place-items:center;font-size:28px;transition:.35s;background:rgba(8,8,8,.16);backdrop-filter:blur(5px)}.module-card:hover .arrow{transform:translateX(4px) rotate(-6deg);background:rgba(217,172,75,.16);box-shadow:0 0 22px rgba(224,184,94,.25)}
.footer{display:grid;grid-template-columns:1fr 1.55fr 1fr;align-items:end;gap:20px;padding:48px 0 32px}.copyright{font-family:"Cormorant Garamond",serif;font-size:17px}.copyright span{font-size:14px;opacity:.75}.signature-wrap{text-align:center}.motto-row{display:grid;grid-template-columns:minmax(58px,1fr) auto minmax(58px,1fr);align-items:center;gap:26px}.motto-line{height:1px;background:var(--line);width:100%}.motto{font-family:"Cormorant Garamond",serif;font-weight:600;letter-spacing:.34em;font-size:18px;white-space:nowrap}.signature{font-family:"VL Smooth Handwriting","Segoe Script","Bradley Hand ITC",cursive;color:#8e4e16;font-size:82px;font-weight:400;line-height:.72;margin-top:24px;letter-spacing:.01em;transform:scaleX(1.22) rotate(-5deg);transform-origin:center;text-shadow:0 3px 14px rgba(145,86,18,.08)}.socials{justify-self:end;display:flex;gap:14px;align-items:center}.social{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#111;color:white;text-decoration:none;font-weight:700;font-size:20px;transition:.25s}.social:hover{transform:translateY(-3px) scale(1.05);background:#a97520}.social.z{font-size:11px;border-radius:12px}.social.yt{font-size:15px}
@media(max-width:1100px){.cards-grid{grid-template-columns:repeat(2,1fr)}.module-line{letter-spacing:.2em}.footer{grid-template-columns:1fr;justify-items:center;text-align:center}.socials{justify-self:center}.motto-row{grid-template-columns:70px auto 70px}.signature{font-size:62px}.script-title{transform:scaleX(1.06)}}
@media(max-width:720px){.topbar{padding:20px 0 0}.shell{width:92vw}.hero{margin-top:8px}.hero h1{font-size:100px}.script-title{font-size:94px;margin-top:-10px;transform:none}.module-line{font-size:12px;line-height:2;letter-spacing:.14em;margin-top:28px}.module-line i{margin:0 4px}.cards-grid{grid-template-columns:1fr;gap:16px;margin-top:28px}.module-card{border-radius:24px}.card-copy h2{font-size:38px}.motto{font-size:14px;letter-spacing:.2em}.motto-row{grid-template-columns:38px auto 38px;gap:12px}.footer{padding-top:34px}.sun-shadow{opacity:.34;filter:blur(16px)}}


/* =========================================================
   BÙI STUDIO V4.7 — MOBILE RESPONSIVE REFRESH
   Mobile only. Desktop layout intentionally unchanged.
   ========================================================= */
@media (max-width:720px){
  /* Intro: lift the whole identity into the visual sweet spot. */
  .intro-inner{width:92vw;min-height:92vw;transform:translateY(-9vh)}
  .intro-logo{width:min(360px,74vw)}
  .intro-glow{width:min(450px,88vw)}
  .intro-light-track{bottom:-5px;height:26px}
  .intro-light-ray{width:min(190px,37vw)}

  /* Home identity: lift the whole composition and remove the unused round menu button on phones. */
  .topbar{display:none}
  .hero{margin-top:46px}
  .hero h1{font-size:clamp(74px,21vw,92px);line-height:.76}
  .script-title{font-size:clamp(68px,19vw,86px);line-height:.56;margin-top:-6px;white-space:nowrap}
  .module-line{font-size:9.5px;line-height:1.55;letter-spacing:.09em;margin:17px auto 0;max-width:94vw}

  /* 2 x 3 module grid on phones, made shallower so footer/social icons remain visible. */
  .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
  .module-card{aspect-ratio:1.55/1;border-radius:15px;min-width:0}
  .card-copy{left:11px;right:8px;bottom:8px}
  .card-copy h2{font-size:clamp(18px,5.7vw,23px);margin-bottom:0;letter-spacing:.01em;line-height:.9}
  .card-copy p{display:none}
  .arrow{right:7px;top:7px;bottom:auto;width:27px;height:27px;font-size:15px;border-color:rgba(225,185,87,.82);background:rgba(8,8,8,.22)}
  .footer{padding:18px 0 12px;gap:10px}
  .copyright{font-size:13px;line-height:1.15}
  .copyright span{font-size:11px}
  .motto-row{gap:9px}
  .motto{font-size:12px;letter-spacing:.16em}
  .signature{font-size:44px;margin-top:14px}
  .socials{gap:10px;margin-top:0}
  .social{width:34px;height:34px;font-size:17px}
}
@media (min-width:721px) and (max-width:1100px){
  .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}