/* ===================================================
   TREVILLE MODERN SCHOOLS — PREMIUM v3
   Royal Blue + Brown/Gold, Glass Navigation
=================================================== */

:root{
  --navy:#0E3450;
  --navy-mid:#154A6E;
  --navy-light:#1B6690;
  --gold:#C9974F;
  --gold-light:#E9C97A;
  --brown:#6E4527;
  --brown-light:#8B5E3C;
  --cream:#F8F4EC;
  --cream-soft:#EFE6D5;
  --ink:#221C16;
  --white:#FFFFFF;
  --shadow:0 20px 60px rgba(14,52,80,0.16);
}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Playfair Display', serif; font-weight:700; color:var(--navy); line-height:1.15;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{width:min(1180px, 92%); margin:0 auto;}
section{padding:110px 0;}

/* ================= REVEAL ON SCROLL ================= */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ================= EYEBROW ================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:999px;
  background:rgba(201,151,79,0.14); color:var(--brown);
  font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
}
.hero-eyebrow{background:rgba(233,201,122,0.16); color:var(--gold-light);}

/* ================= BUTTONS ================= */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:999px; font-weight:700; font-size:0.92rem;
  white-space:nowrap; cursor:pointer; border:1px solid transparent;
  transition:transform .3s ease, box-shadow .3s ease;
}
.btn::before{
  content:""; position:absolute; left:-120%; top:0; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-25deg); transition:left .7s ease;
}
.btn:hover::before{left:140%;}
.btn:active{transform:scale(0.95);}
.btn-gold{
  background:linear-gradient(135deg, #D9A441, var(--gold-light));
  color:var(--navy); box-shadow:0 10px 28px -6px rgba(201,151,79,0.5);
}
.btn-gold:hover{transform:translateY(-3px); box-shadow:0 16px 34px -8px rgba(201,151,79,0.6);}
.btn-outline{
  border-color:rgba(255,255,255,0.5); color:var(--white); background:rgba(255,255,255,0.05);
  backdrop-filter:blur(12px);
}
.btn-outline:hover{background:rgba(255,255,255,0.14); transform:translateY(-3px);}
.btn-navy{background:var(--navy); color:var(--white);}
.btn-navy:hover{transform:translateY(-3px); box-shadow:0 14px 30px -8px rgba(14,52,80,0.5);}
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.5);
  transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none;
}
@keyframes rippleAnim{ to{transform:scale(2.6); opacity:0;} }

/* ================= CREST SIZES (fixes oversized logos) ================= */
.crest{display:block; flex-shrink:0; object-fit:contain; mix-blend-mode:multiply;}
.crest.img-fallback{background:var(--navy); border:1px solid var(--gold); border-radius:10px;}

.brand .crest{width:42px; height:42px;}
.hero-card .crest{width:60px; height:60px; margin:0 auto 14px;}
.about-statement .crest{width:72px; height:72px;}
.footer-brand .crest{width:40px; height:40px;}
.intro-crest{width:80px; height:auto; margin:0 auto;}
.hero-watermark{
  position:absolute; right:-110px; top:50%; transform:translateY(-50%);
  width:560px; opacity:0.06; pointer-events:none;
}

/* ================= HEADER (glass pill) ================= */
#siteHeader{
  position:fixed; top:16px; left:16px; right:16px; z-index:400;
  height:76px; border-radius:26px;
  background:rgba(14,52,80,0.42);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 14px 40px -12px rgba(0,0,0,0.35);
  transition:all .4s ease;
  overflow:hidden;
}
#siteHeader::before{
  content:""; position:absolute; left:-120%; top:0; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  transform:skewX(-25deg); transition:left 1.1s ease;
}
#siteHeader:hover::before{left:140%;}
#siteHeader.scrolled{
  top:10px; height:66px;
  background:rgba(14,52,80,0.68);
  box-shadow:0 16px 46px -10px rgba(0,0,0,0.45);
}
.nav-inner{height:100%; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-name{
  font-family:'Playfair Display',serif; font-weight:700; font-size:1.08rem; line-height:1.15;
  background:linear-gradient(90deg, #ffffff, var(--gold-light));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.brand-name span{
  display:block; margin-top:3px; font-family:'Inter',sans-serif; font-weight:500;
  font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-light); -webkit-text-fill-color:var(--gold-light);
}
.nav-apply{padding:12px 24px; font-size:0.82rem;}

/* ================= HAMBURGER (compact, top-left only) ================= */
.menu-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; padding:9px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  border-radius:10px; cursor:pointer; flex-shrink:0;
  transition:background .25s ease;
}
.menu-toggle:hover{background:rgba(255,255,255,0.16);}
.menu-toggle span{width:100%; height:2px; background:var(--white); border-radius:2px; transition:transform .3s ease, opacity .3s ease;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Small dropdown panel — NOT fullscreen */
.nav-overlay{
  position:fixed; top:78px; left:16px; z-index:390;
  width:240px; max-width:80vw;
  background:rgba(14,52,80,0.85);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;
  box-shadow:0 20px 50px -14px rgba(0,0,0,0.5);
  padding:14px;
  opacity:0; transform:translateY(-14px) scale(0.96);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.nav-overlay.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.overlay-links{display:flex; flex-direction:column; gap:2px;}
.overlay-links a{
  font-family:'Inter',sans-serif; font-weight:600; font-size:0.92rem; color:var(--cream);
  padding:11px 12px; border-radius:10px; transition:background .2s ease, color .2s ease, padding-left .2s ease;
}
.overlay-links a:hover{background:rgba(255,255,255,0.1); color:var(--gold-light); padding-left:16px;}

/* ================= INTRO SPLASH ================= */
.intro-splash{
  position:fixed; inset:0; z-index:999;
  background:linear-gradient(135deg, #0B2A40 0%, var(--navy) 32%, var(--navy-mid) 60%, var(--brown) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  overflow:hidden;
}
.intro-bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(135deg, rgba(11,42,64,0.82) 0%, rgba(14,52,80,0.75) 32%, rgba(21,74,110,0.65) 60%, rgba(110,69,39,0.82) 100%),
    url('/static/images/intro-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.intro-splash > *:not(.intro-bg){
  position:relative;
  z-index:1;
}
.intro-splash::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(233,201,122,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,201,122,0.06) 1px, transparent 1px);
  background-size:42px 42px; opacity:0.5;
}
.intro-splash.hide{animation:introFadeOut .6s ease forwards; pointer-events:none;}
@keyframes introFadeOut{ to{opacity:0; visibility:hidden;} }
.intro-crest{opacity:0; transform:translateY(-40px) scale(0.8); animation:introCrestIn 1.3s cubic-bezier(.2,.8,.2,1) .2s forwards; filter:drop-shadow(0 8px 20px rgba(0,0,0,0.4));}
@keyframes introCrestIn{ to{opacity:1; transform:translateY(0) scale(1);} }
.intro-title{
  position:relative; font-family:'Playfair Display',serif; font-size:clamp(1.5rem,7vw,3.2rem);
  font-weight:700; font-style:italic; white-space:nowrap; letter-spacing:0.01em; max-width:92vw;
  opacity:0; transform:translateX(-140%);
  background:linear-gradient(90deg, var(--gold-light) 0%, #FFFFFF 45%, var(--gold-light) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,0.4));
  animation:introSwoosh 2.4s cubic-bezier(.19,1,.22,1) .6s forwards, shimmer 2.6s linear 3s infinite;
}
@keyframes introSwoosh{ to{opacity:1; transform:translateX(0);} }
@keyframes shimmer{ 0%{background-position:220% 0;} 100%{background-position:-20% 0;} }
.intro-flourish{position:relative; display:flex; align-items:center; gap:12px; opacity:0; animation:introFadeIn .9s ease 3.1s forwards;}
.intro-flourish span{width:46px; height:1px; background:linear-gradient(90deg, transparent, var(--gold-light));}
.intro-flourish span.right{background:linear-gradient(90deg, var(--gold-light), transparent);}
.intro-flourish i{width:6px; height:6px; background:var(--gold-light); transform:rotate(45deg);}
.intro-tagline{
  position:relative; font-family:'Inter',sans-serif; color:var(--gold-light); font-size:0.72rem;
  letter-spacing:0.32em; text-transform:uppercase; opacity:0; animation:introFadeIn .9s ease 3.25s forwards;
}
@keyframes introFadeIn{ to{opacity:1;} }
body.intro-active{overflow:hidden;}
@media (prefers-reduced-motion: reduce){ .intro-splash{display:none;} }

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden;
  padding-top:150px; padding-bottom:80px;
  background:linear-gradient(150deg, #0B2A40 0%, var(--navy) 38%, var(--navy-light) 72%, #24405A 100%);
}
.hero-bg-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(233,201,122,0.14), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(110,69,39,0.35), transparent 50%);
}
.hero-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:64px; align-items:center; position:relative; z-index:2;}
.hero-title{
  font-size:clamp(2.4rem,5vw,4rem); font-weight:800; margin-bottom:22px;
  background:linear-gradient(90deg, #ffffff 0%, var(--gold-light) 50%, #ffffff 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:heroSwoosh 1.1s cubic-bezier(.19,1,.22,1) forwards, gradientMove 8s linear infinite 1.1s;
  opacity:0; transform:translateY(30px);
}
.hero-title span{display:block; margin-top:6px;}
@keyframes heroSwoosh{ to{opacity:1; transform:translateY(0);} }
@keyframes gradientMove{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} }
.hero-text{font-size:1.05rem; color:var(--cream-soft); max-width:560px; margin-bottom:36px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px;}
.hero-stats{display:flex; gap:16px; flex-wrap:wrap;}
.hero-stats div{
  background:rgba(255,255,255,0.07); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.12); padding:16px 22px; border-radius:16px;
}
.hero-stats div b{display:block; font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--gold-light);}
.hero-stats div span{font-size:0.72rem; color:var(--cream-soft); letter-spacing:0.03em;}

.hero-card{
  position:relative; background:rgba(255,255,255,0.08); backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.16); border-radius:26px; padding:40px 32px;
  box-shadow:var(--shadow); color:var(--white); text-align:center;
  animation:floatCard 7s ease-in-out infinite;
}
@keyframes floatCard{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.hero-card-glow{
  position:absolute; inset:-2px; border-radius:26px; z-index:-1;
  background:linear-gradient(135deg, rgba(233,201,122,0.35), transparent 60%);
  filter:blur(18px);
}
.hero-card h3{color:var(--white); font-size:1.2rem; margin-bottom:8px;}
.hero-card > p{color:var(--cream-soft); font-size:0.86rem; margin-bottom:22px;}
.tier-list{display:flex; flex-direction:column; gap:10px;}
.tier-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; background:rgba(255,255,255,0.06); border-radius:10px;
  border-left:3px solid var(--gold);
}
.tier-row span:first-child{font-weight:600; font-size:0.92rem; color:var(--white);}
.tier-row span:last-child{font-size:0.78rem; color:var(--gold-light);}

/* ================= SECTION HEAD ================= */
.section-head{max-width:680px; margin:0 auto 60px; text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem); margin:14px 0 16px; font-style:italic;}
.section-head p{color:#4a4038; font-size:1rem;}

/* ================= ABOUT ================= */
.about{background:var(--white);}
.about-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:56px;}
.tier-card{
  background:var(--cream); padding:34px 28px; border-radius:20px;
  border-bottom:4px solid var(--navy); box-shadow:0 16px 34px -18px rgba(14,52,80,0.25);
  transition:transform .3s ease;
}
.tier-card:hover{transform:translateY(-8px);}
.tier-card.gold{border-bottom-color:var(--gold);}
.tier-card.brown{border-bottom-color:var(--brown);}
.tier-card .num{font-family:'Playfair Display',serif; font-size:0.82rem; color:var(--brown); letter-spacing:0.1em;}
.tier-card h3{font-size:1.25rem; margin:10px 0 12px;}
.tier-card p{font-size:0.92rem; color:#4a4038;}
.about-statement{
  background:linear-gradient(120deg, var(--navy), var(--navy-mid));
  color:var(--white); padding:44px; border-radius:22px;
  display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center;
}
.about-statement h3{color:var(--white); font-size:1.3rem; margin-bottom:10px; font-style:italic;}
.about-statement p{color:var(--cream-soft); font-size:0.95rem;}

/* ================= ADMISSIONS ================= */
.admissions{background:#F5F1E8;}
.adm-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px;}
.step{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid rgba(34,28,22,0.1);}
.step:last-child{border-bottom:none;}
.step-num{font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--gold); font-weight:600; min-width:46px;}
.step h4{font-size:1.02rem; margin-bottom:6px;}
.step p{font-size:0.88rem; color:#4a4038;}
.req-card{background:var(--navy); color:var(--white); padding:34px 28px; border-radius:20px; height:fit-content;}
.req-card h3{color:var(--white); font-size:1.1rem; margin-bottom:16px;}
.req-card ul{list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:24px;}
.req-card li{font-size:0.86rem; color:var(--cream-soft); padding-left:18px; position:relative;}
.req-card li::before{content:"—"; position:absolute; left:0; color:var(--gold-light);}

/* ================= GALLERY ================= */
.gallery{background:var(--white);}
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.g-tile{
  aspect-ratio:1; border-radius:14px; overflow:hidden; position:relative;
  background:var(--cream-soft); display:flex; align-items:center; justify-content:center;
}
.g-tile img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.g-tile:hover img{transform:scale(1.06);}
.g-tile.empty{border:2px dashed rgba(110,69,39,0.3); flex-direction:column; gap:8px; color:var(--brown);}
.g-tile.empty svg{width:28px; height:28px; opacity:0.5;}
.g-tile.empty span{font-size:0.7rem; letter-spacing:0.04em; text-align:center; padding:0 10px;}
.g-caption{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg, rgba(14,52,80,0.88), transparent);
  color:var(--white); font-size:0.74rem; padding:20px 12px 10px; opacity:0; transition:opacity .25s ease;
}
.g-tile:hover .g-caption{opacity:1;}

/* ================= NEWS ================= */
.news{background:var(--cream-soft);}
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.news-card{
  background:var(--white); border-radius:18px; padding:28px;
  box-shadow:0 16px 34px -20px rgba(14,52,80,0.3); transition:transform .3s ease;
}
.news-card:hover{transform:translateY(-6px);}
.news-tag{
  display:inline-block; font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase;
  font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.news-tag.news{background:rgba(14,52,80,0.1); color:var(--navy);}
.news-tag.event{background:rgba(201,151,79,0.16); color:var(--brown-light);}
.news-card h4{font-size:1.05rem; margin-bottom:8px;}
.news-date{font-size:0.72rem; color:var(--brown); margin-bottom:12px; display:block; font-weight:600;}
.news-card p{font-size:0.87rem; color:#4a4038;}

/* ================= CONTACT ================= */
.contact{background:linear-gradient(160deg, var(--navy), var(--navy-mid) 60%, #24405A); color:var(--white);}
.contact .section-head h2{color:var(--white);}
.contact .section-head p{color:var(--cream-soft);}
.contact-grid{display:grid; grid-template-columns:1fr 0.85fr; gap:50px;}
form{
  background:rgba(255,255,255,0.07); backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,0.12); border-radius:22px; padding:34px;
}
.field{margin-bottom:18px;}
.field label{display:block; font-size:0.76rem; letter-spacing:0.04em; color:var(--cream-soft); margin-bottom:7px;}
.field input, .field textarea{
  width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  border-radius:10px; padding:13px 14px; color:var(--white); font-family:'Inter',sans-serif; font-size:0.9rem;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(246,241,231,0.4);}
.field textarea{resize:vertical; min-height:110px;}
#formMsg{font-size:0.84rem; margin-top:10px; color:var(--gold-light);}
.contact-info{background:rgba(255,255,255,0.06); border-radius:22px; padding:34px; border-top:3px solid var(--gold);}
.info-row{display:flex; gap:14px; margin-bottom:22px;}
.info-row:last-child{margin-bottom:0;}
.info-row .ic{
  width:38px; height:38px; border-radius:50%; background:rgba(201,151,79,0.18);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem;
}
.info-row b{display:block; font-size:0.9rem; margin-bottom:3px;}
.info-row span{font-size:0.83rem; color:var(--cream-soft); line-height:1.5;}

/* ================= FOOTER ================= */
footer{background:var(--navy); border-top:1px solid rgba(255,255,255,0.08); padding:50px 0 26px; color:var(--white);}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; margin-bottom:34px;}
.footer-brand{display:flex; gap:12px; align-items:center;}
.footer-cols{display:flex; gap:60px; flex-wrap:wrap;}
.footer-col h5{color:var(--gold-light); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px;}
.footer-col a, .footer-col p{display:block; color:var(--cream-soft); font-size:0.85rem; margin-bottom:9px;}
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:22px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:0.75rem; color:rgba(246,241,231,0.55); flex-wrap:wrap; gap:10px;
}
.footer-bottom a{color:rgba(246,241,231,0.55); text-decoration:underline;}

/* ================= RESPONSIVE ================= */
@media (max-width:992px){
  .hero-grid, .adm-grid, .contact-grid{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:1fr;}
  .footer-grid{flex-direction:column;}
}
@media (max-width:768px){
  .hero{text-align:center; padding-top:130px;}
  .hero-grid{justify-items:center;}
  .hero-text{margin:0 auto 36px;}
  .hero-actions{justify-content:center;}
  .hero-stats{justify-content:center;}
  .about-statement{grid-template-columns:1fr; text-align:center;}
  .about-statement .crest{margin:0 auto;}
}
@media (max-width:560px){
  section{padding:70px 0;}
  #siteHeader{left:10px; right:10px; height:66px;}
  .brand-name{font-size:0.92rem;}
  .brand-name span{font-size:0.54rem;}
  .nav-apply{padding:10px 16px !important; font-size:0.76rem !important;}
  .intro-title{font-size:clamp(1.35rem,8vw,2rem); letter-spacing:0; max-width:88vw;}
}/* ================= ABOUT OWNER PAGE ================= */
.owner-hero{
  position:relative; min-height:60vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding-top:150px; padding-bottom:140px;
  background:linear-gradient(150deg, #0B2A40 0%, var(--navy) 38%, var(--navy-light) 72%, #24405A 100%);
}
.owner-hero .hero-bg-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(233,201,122,0.14), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(110,69,39,0.35), transparent 50%);
}
.owner-hero h1{
  position:relative; z-index:2; font-size:clamp(2rem,4.5vw,3.2rem);
  background:linear-gradient(90deg, #ffffff 0%, var(--gold-light) 50%, #ffffff 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:heroSwoosh 1.1s cubic-bezier(.19,1,.22,1) forwards, gradientMove 8s linear infinite 1.1s;
  opacity:0; transform:translateY(30px);
}
.owner-subtitle{
  position:relative; z-index:2; color:var(--gold-light); font-size:0.78rem;
  letter-spacing:0.28em; text-transform:uppercase; margin-top:16px;
}

.portrait-float-wrapper{
  display:flex; justify-content:center; position:relative; z-index:10;
  margin-top:-130px;
}
.portrait-float{
  width:240px; height:300px; border-radius:20px; overflow:hidden;
  background:var(--cream); border:3px solid var(--gold);
  box-shadow:var(--shadow);
  animation:floatCard 7s ease-in-out infinite;
}
.portrait-float img{width:100%; height:100%; object-fit:cover; display:block;}

.owner-profile{background:var(--white); padding-top:70px;}
.owner-profile .wrap{max-width:700px;}
.owner-tagline{
  display:block; text-align:center; color:var(--brown);
  font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:10px;
}
.owner-profile h2{text-align:center; font-style:italic; margin-bottom:28px;}
.owner-bio p{font-size:0.98rem; color:#4a4038; margin-bottom:20px;}
.owner-bio blockquote{
  border-left:3px solid var(--gold); padding-left:20px; margin:34px 0 0;
  font-family:'Playfair Display',serif; font-style:italic; color:var(--navy); font-size:1.15rem;
}

@media (max-width:560px){
  .portrait-float{width:170px; height:220px;}
  .portrait-float-wrapper{margin-top:-90px;}
}
/* ================= MICRO-INTERACTIONS ================= */

/* Tier cards — subtle tilt + gold glow on hover */
.tier-card{transition:transform .35s ease, box-shadow .35s ease;}
.tier-card:hover{
  transform:translateY(-10px) scale(1.015);
  box-shadow:0 24px 46px -18px rgba(201,151,79,0.35);
}

/* News cards — lift + border accent sweep */
.news-card{position:relative; overflow:hidden;}
.news-card::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  transition:width .4s ease;
}
.news-card:hover::after{width:100%;}

/* Gallery tiles — zoom + caption slide already exists; add slight rotate */
.g-tile img{transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.g-tile:hover img{transform:scale(1.08) rotate(0.5deg);}

/* Hero stat cards — pop on hover */
.hero-stats div{transition:transform .3s ease, background .3s ease;}
.hero-stats div:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,0.12);
}

/* Nav overlay links — underline sweep */
.overlay-links a{position:relative;}
.overlay-links a::before{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:1px;
  background:var(--gold-light); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.overlay-links a:hover::before{transform:scaleX(1);}

/* Brand crest — gentle rotate on hover */
.brand .crest{transition:transform .5s ease;}
.brand:hover .crest{transform:rotate(-8deg) scale(1.05);}

/* Section headings — letter-spacing pulse on scroll-in (pairs with .reveal) */
.section-head h2{transition:letter-spacing .6s ease;}
.section-head.reveal.in h2{letter-spacing:0.5px;}

/* Buttons — magnetic press feedback (already has ripple, add slight scale on focus) */
.btn:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
}

/* Footer links — gold slide-in underline */
.footer-col a{position:relative; width:fit-content;}
.footer-col a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--gold-light); transition:width .3s ease;
}
.footer-col a:hover::after{width:100%;}
.footer-col a:hover{color:var(--gold-light);}

/* Scroll progress bar (optional flair along top under header) */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index:500; transition:width .1s linear;
}
/* ================= BOX-REVEAL (section container) ================= */
.box-reveal{
  opacity:0;
  transform:scale(0.9);
  transform-origin:center;
  transition:opacity .5s ease, transform .5s ease;
}
.box-reveal.in{
  opacity:1;
  transform:scale(1);
}
/* ================= FLASHY INTRO UPGRADES ================= */

/* Animated shifting gradient background */
.intro-splash{
  background-size:300% 300%;
  animation:introGradientShift 6s ease infinite;
}
@keyframes introGradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Pulsing glow ring behind the crest */
.intro-crest-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.intro-crest-wrap::before{
  content:"";
  position:absolute;
  width:140px; height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(233,201,122,0.35), transparent 70%);
  animation:pulseGlow 2.4s ease-in-out infinite;
  z-index:0;
}
.intro-crest{position:relative; z-index:1;}
@keyframes pulseGlow{
  0%,100%{transform:scale(0.85); opacity:0.5;}
  50%{transform:scale(1.15); opacity:1;}
}

/* Floating gold sparkle particles */
.intro-particle{
  position:absolute;
  width:4px; height:4px;
  background:var(--gold-light);
  border-radius:50%;
  opacity:0;
  animation:sparkleFloat 3.5s ease-in-out infinite;
  box-shadow:0 0 8px 2px rgba(233,201,122,0.6);
}
.intro-particle:nth-child(1){left:20%; top:30%; animation-delay:0.2s;}
.intro-particle:nth-child(2){left:75%; top:25%; animation-delay:0.8s;}
.intro-particle:nth-child(3){left:15%; top:65%; animation-delay:1.4s;}
.intro-particle:nth-child(4){left:80%; top:70%; animation-delay:0.5s;}
.intro-particle:nth-child(5){left:50%; top:15%; animation-delay:1.1s;}
.intro-particle:nth-child(6){left:60%; top:80%; animation-delay:1.8s;}
@keyframes sparkleFloat{
  0%{transform:translateY(0) scale(0); opacity:0;}
  20%{opacity:1; transform:scale(1);}
  100%{transform:translateY(-60px) scale(0); opacity:0;}
}

/* Loading progress line synced to intro duration */
.intro-loadbar{
  position:relative;
  width:180px;
  height:2px;
  background:rgba(255,255,255,0.15);
  border-radius:2px;
  overflow:hidden;
  margin-top:6px;
}
.intro-loadbar-fill{
  position:absolute;
  left:0; top:0; height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  animation:introLoad 4s ease forwards;
  animation-delay:0.2s;
}
@keyframes introLoad{
  to{width:100%;}
}

@media (prefers-reduced-motion: reduce){
  .intro-splash{animation:none;}
  .intro-crest-wrap::before{animation:none;}
  .intro-particle{display:none;}
  .intro-loadbar-fill{animation:none; width:100%;}
}