/* =====================================================================
   LOUISIANA LIFE — Homepage
   Brand-locked: colors & type follow the 2025 Brand Guide exactly.
   Colors:  Gold #AE9142 · Navy #143865 · Gray #75787B · Cool Gray #C8C9C7
   Type:    MADE Mirage (only). System serif fallback until font is added.
   ===================================================================== */

/* ---------- FONT ---------- */
/* Drop the licensed MADE Mirage web files into /fonts/ to go fully brand-correct.
   Until then an elegant high-contrast system serif stands in. */
@font-face {
  font-family: 'MADE Mirage';
  src: url('../fonts/MADEMirage-Thin.woff2') format('woff2');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MADE Mirage';
  src: url('../fonts/MADEMirage-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MADE Mirage';
  src: url('../fonts/MADEMirage-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'MADE Mirage';
  src: url('../fonts/MADEMirage-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- TOKENS ---------- */
:root{
  --gold:#AE9142;
  --navy:#143865;
  --gray:#75787B;
  --cool:#C8C9C7;
  --white:#FFFFFF;

  /* tints derived from brand hues (no new colors introduced) */
  --navy-veil: rgba(20,56,101,.62);
  --navy-veil-strong: rgba(20,56,101,.86);
  --ink-veil: rgba(8,20,38,.55);
  --gray-panel: rgba(117,120,123,.06);
  --gold-soft: rgba(174,145,66,.16);
  --line-light: rgba(20,56,101,.14);
  --line-dark: rgba(255,255,255,.16);

  --serif:'MADE Mirage','Didot','Bodoni 72','Bodoni MT','Hoefler Text',Georgia,'Times New Roman',serif;

  --pad: clamp(22px, 5vw, 90px);
  --maxw: 1320px;
  --ease: cubic-bezier(.6,.01,.05,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--serif);
  background:var(--white);
  color:var(--navy);
  line-height:1.5;
  overflow-x:hidden;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; height:100vh; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
em{ font-style:italic; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

/* hide native cursor when custom is active (desktop) */
@media (hover:hover) and (pointer:fine){
  body.cursor-on, body.cursor-on a, body.cursor-on button{ cursor:none; }
}

/* ---------- SHARED TYPE ---------- */
.kicker{
  font-size:.74rem; font-weight:500; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.9em;
}
.kicker::before{
  content:""; width:34px; height:1px; background:var(--gold); opacity:.8;
}
.kicker--light{ color:var(--gold); }

.section-head{ margin-bottom:clamp(48px,7vw,96px); }
.section-head__title{
  font-weight:400; line-height:1.02; letter-spacing:-.01em;
  font-size:clamp(2.4rem,6vw,5rem); margin-top:.4em; color:var(--navy);
}

/* ---------- BUTTONS ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1.05em 2.1em; border-radius:100px; font-size:.92rem; font-weight:500;
  letter-spacing:.02em; overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease);
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn::after{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease);
}
.btn--gold{ background:var(--gold); color:var(--navy); }
.btn--gold::after{ background:var(--navy); }
.btn--gold:hover{ color:var(--white); }
.btn--gold:hover::after{ transform:scaleY(1); }

.btn--ghost{ color:var(--white); border:1px solid var(--line-dark); }
.btn--ghost::after{ background:var(--white); }
.btn--ghost:hover{ color:var(--navy); }
.btn--ghost:hover::after{ transform:scaleY(1); }

.link-more{
  display:inline-flex; align-items:center; gap:.6em; font-size:.95rem; font-weight:500;
  color:var(--navy); position:relative;
}
.link-more i{ transition:transform .45s var(--ease); font-style:normal; color:var(--gold); }
.link-more::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background:currentColor; opacity:.25; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.link-more:hover i{ transform:translateX(6px); }
.link-more:hover::after{ transform:scaleX(1); }

/* =====================================================================
   PRELOADER
   ===================================================================== */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--navy);
  display:grid; place-items:center;
}
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap:30px; width:min(280px,70vw); }
.preloader__mark{ width:72px; opacity:0; transform:translateY(14px); }
.preloader__bar{ width:100%; height:1px; background:var(--line-dark); position:relative; overflow:hidden; }
.preloader__fill{ position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left; }
.preloader__count{
  font-size:.8rem; letter-spacing:.2em; color:var(--cool); display:flex; align-items:baseline; gap:1px;
}
.preloader__count i{ font-style:normal; opacity:.6; font-size:.7rem; }
.preloader.is-done{ pointer-events:none; }

/* =====================================================================
   CUSTOM CURSOR
   ===================================================================== */
.cursor{ position:fixed; top:0; left:0; z-index:9000; pointer-events:none; mix-blend-mode:difference; }
.cursor__dot{
  position:fixed; top:0; left:0; width:7px; height:7px; border-radius:50%;
  background:var(--white); transform:translate(-50%,-50%);
}
.cursor__ring{
  position:fixed; top:0; left:0; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6); transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-color .35s;
}
body.cursor-hover .cursor__ring{ width:64px; height:64px; background:rgba(255,255,255,.08); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:800;
  transition:background .55s var(--ease), backdrop-filter .55s, padding .55s var(--ease);
  padding:22px 0;
}
.nav__inner{
  width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand{ display:flex; align-items:center; gap:13px; }
.nav__mark{ width:38px; height:auto; transition:width .5s var(--ease); }
.nav__wordmark{
  color:var(--white); height:18px; width:auto; display:block;
  transition:height .5s var(--ease); margin-top:2px;
}
.nav__links{ display:flex; gap:38px; margin-left:auto; margin-right:38px; }
.nav__links a{
  color:var(--white); font-size:.95rem; letter-spacing:.02em; position:relative; opacity:.85;
  transition:opacity .4s, color .55s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{ padding:.78em 1.5em; font-size:.86rem; }

/* scrolled state */
.nav.is-scrolled{
  background:rgba(20,56,101,.9); backdrop-filter:blur(14px) saturate(120%);
  padding:14px 0; box-shadow:0 1px 0 var(--line-dark);
}
.nav.is-scrolled .nav__mark{ width:32px; }
.nav.is-scrolled .nav__wordmark{ height:15px; }

/* hide nav while menu open on mobile handled below */
.nav__burger{ display:none; width:34px; height:34px; position:relative; }
.nav__burger span{
  position:absolute; left:6px; right:6px; height:1.5px; background:var(--white);
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__burger span:nth-child(1){ top:13px; }
.nav__burger span:nth-child(2){ bottom:13px; }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:790; background:var(--navy);
  display:flex; flex-direction:column; justify-content:center; gap:40px;
  padding:var(--pad); clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease);
  pointer-events:none;
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__links{ display:flex; flex-direction:column; gap:18px; }
.menu__links a{
  color:var(--white); font-size:clamp(2rem,9vw,3.4rem); font-weight:400; display:flex; align-items:baseline; gap:18px;
}
.menu__links a span{ font-size:.85rem; color:var(--gold); letter-spacing:.2em; }
.menu__cta{ align-self:flex-start; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(48px,9vh,120px); overflow:hidden; color:var(--white);
}
.hero__media{ position:absolute; inset:-10% 0 0 0; z-index:0; will-change:transform; }
.hero__img{ width:100%; height:115%; object-fit:cover; object-position:center 35%; }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--navy-veil) 0%, rgba(20,56,101,.18) 30%, var(--navy-veil) 78%, var(--navy) 100%),
    linear-gradient(90deg, var(--ink-veil) 0%, rgba(8,20,38,0) 55%);
}
.hero__content{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.hero__title{
  font-weight:400; line-height:.98; letter-spacing:-.02em;
  font-size:clamp(3rem,9.2vw,8.4rem); margin:.32em 0 .5em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line em{ color:var(--gold); }
.hero__sub{
  max-width:46ch; font-size:clamp(1.02rem,1.5vw,1.28rem); line-height:1.6;
  color:rgba(255,255,255,.86); font-weight:400;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:2.4em; }

.hero__scroll{
  position:absolute; bottom:34px; right:var(--pad); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.7);
}
.hero__scrollline{ width:1px; height:60px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; }
.hero__scrollline::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--gold);
  animation:scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(250%);} }

/* =====================================================================
   MARQUEE
   ===================================================================== */
.marquee{ background:var(--navy); color:var(--white); overflow:hidden; padding:26px 0; border-bottom:1px solid var(--line-dark); }
.marquee__track{
  display:flex; align-items:center; gap:38px; white-space:nowrap; width:max-content;
  animation:marquee 26s linear infinite;
}
.marquee__track span{ font-size:clamp(1.4rem,3vw,2.4rem); font-weight:400; letter-spacing:.01em; }
.marquee__track b{ color:var(--gold); font-size:1rem; }
@keyframes marquee{ to{ transform:translateX(-50%);} }

/* =====================================================================
   STATEMENT / ABOUT
   ===================================================================== */
.statement{ padding:clamp(90px,16vh,200px) 0; background:var(--white); }
.statement__text{
  font-weight:400; line-height:1.16; letter-spacing:-.01em;
  font-size:clamp(1.8rem,4.4vw,3.7rem); max-width:18ch; margin:.6em 0 1em; color:var(--navy);
}
.statement__text em, .statement__text .w-gold{ color:var(--gold); }
.statement__foot{}

/* word-reveal mechanics */
[data-word-reveal]{ }
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; }

/* =====================================================================
   PRODUCTS
   ===================================================================== */
.products{ padding:clamp(70px,11vh,140px) 0 clamp(90px,14vh,180px); background:var(--gray-panel); }
.products__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.product{
  position:relative; padding:48px 40px 56px; min-height:340px;
  display:flex; flex-direction:column; align-items:flex-start;
  transition:background .5s var(--ease), transform .6s var(--ease);
  border-left:1px solid var(--line-light);
}
.products__grid .product:last-child{ border-right:1px solid var(--line-light); }
.product__num{ font-size:.8rem; letter-spacing:.2em; color:var(--gold); margin-bottom:auto; }
.product__title{
  font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:400; line-height:1.1; color:var(--navy);
  margin:48px 0 .55em; letter-spacing:-.01em;
}
.product__desc{ color:var(--gray); font-size:1.02rem; line-height:1.6; margin-bottom:1.6em; max-width:34ch; }
.product .link-more{ margin-top:auto; }
.product__line{
  position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.product:hover{ background:var(--white); }
.product:hover .product__line{ transform:scaleX(1); }

/* =====================================================================
   CINEMATIC BREAK
   ===================================================================== */
.break{ position:relative; height:92vh; min-height:560px; overflow:hidden; display:grid; place-items:center; color:var(--white); }
.break__media{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.break__media img{ width:100%; height:124%; object-fit:cover; object-position:center; }
.break__veil{ position:absolute; inset:0; background:linear-gradient(180deg,var(--navy-veil) 0%, rgba(20,56,101,.35) 50%, var(--navy-veil) 100%); }
.break__content{ position:relative; z-index:2; text-align:center; padding-inline:var(--pad); }
.break__quote{ font-weight:400; line-height:1.0; letter-spacing:-.01em; font-size:clamp(2.6rem,8vw,7rem); }
.break__quote .line{ display:block; overflow:hidden; }
.break__quote .line:nth-child(2){ color:var(--gold); }

/* =====================================================================
   HERITAGE
   ===================================================================== */
.heritage{ padding:clamp(90px,15vh,200px) 0; background:var(--navy); color:var(--white); }
.heritage__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); align-items:center; }
.heritage__title{ font-weight:400; line-height:1.0; font-size:clamp(2.6rem,5.5vw,4.6rem); margin:.34em 0 .5em; letter-spacing:-.01em; }
.heritage__body{ color:rgba(255,255,255,.78); font-size:1.1rem; line-height:1.65; max-width:42ch; margin-bottom:2em; }
.heritage .link-more{ color:var(--white); }
.heritage__imgwrap{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px; }
.heritage__imgwrap img{ width:100%; height:118%; object-fit:cover; will-change:transform; }
.heritage__imgwrap::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 120px rgba(8,20,38,.5); }

.stats{ display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,56px); margin-top:3em; }
.stat{ display:flex; flex-direction:column; gap:.5em; }
.stat__num{ font-size:clamp(2.6rem,5vw,4rem); font-weight:400; color:var(--gold); line-height:1; letter-spacing:-.01em; }
.stat__label{ font-size:.82rem; letter-spacing:.06em; color:rgba(255,255,255,.62); line-height:1.4; }

/* =====================================================================
   CTA
   ===================================================================== */
.cta{ position:relative; padding:clamp(110px,20vh,260px) 0; overflow:hidden; color:var(--white); text-align:center; }
.cta__media{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.cta__media img{ width:100%; height:124%; object-fit:cover; object-position:center 40%; }
.cta__veil{ position:absolute; inset:0; background:linear-gradient(180deg,var(--navy-veil-strong),rgba(20,56,101,.7)); }
.cta__content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.cta__title{ font-weight:400; line-height:1.0; font-size:clamp(2.8rem,8vw,7rem); letter-spacing:-.02em; margin:.3em 0 .4em; }
.cta__title .line{ display:block; overflow:hidden; }
.cta__title .line:nth-child(2){ color:var(--gold); }
.cta__sub{ max-width:40ch; color:rgba(255,255,255,.85); font-size:1.15rem; line-height:1.6; margin-bottom:2.4em; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ background:var(--navy); color:var(--white); padding:clamp(60px,9vh,110px) 0 40px; border-top:1px solid var(--line-dark); }
.footer__top{ display:grid; grid-template-columns:1.1fr 1.6fr; gap:60px; padding-bottom:60px; border-bottom:1px solid var(--line-dark); }
.footer__logo{ width:clamp(140px,16vw,210px); }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.footer__col h4{ font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:1.4em; }
.footer__col a{ display:block; color:rgba(255,255,255,.72); font-size:1rem; margin-bottom:.85em; width:fit-content; transition:color .3s; }
.footer__col a:hover{ color:var(--white); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:30px; flex-wrap:wrap; }
.footer__bottom p{ font-size:.84rem; color:rgba(255,255,255,.5); }
.footer__legal{ display:flex; gap:28px; }
.footer__legal a{ font-size:.84rem; color:rgba(255,255,255,.5); transition:color .3s; }
.footer__legal a:hover{ color:var(--gold); }

/* =====================================================================
   VERSION SWITCHER
   ===================================================================== */
.vswitch{ position:fixed; right:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px); z-index:850; display:flex; border:1px solid var(--line-light); background:var(--white); border-radius:100px; overflow:hidden; }
.vswitch a{ width:38px; height:38px; display:grid; place-items:center; font-size:.78rem; color:var(--gray); transition:background .3s,color .3s; }
.vswitch a.is-active{ background:var(--navy); color:var(--gold); }
.vswitch a:hover:not(.is-active){ background:var(--gold); color:var(--navy); }

/* =====================================================================
   REVEAL DEFAULTS (pre-animation states; JS adds .ready when GSAP runs)
   ===================================================================== */
[data-reveal]{ opacity:0; transform:translateY(28px); }
.hero__title .line .inner,
.break__quote .line .inner,
.cta__title .line .inner{ display:block; transform:translateY(110%); }
html.no-js [data-reveal]{ opacity:1; transform:none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .products__grid{ grid-template-columns:1fr; }
  .product{ border-left:none; border-top:1px solid var(--line-light); min-height:unset; }
  .products__grid .product:last-child{ border-right:none; border-bottom:1px solid var(--line-light); }
  .product__title{ margin-top:30px; }
  .heritage__grid{ grid-template-columns:1fr; gap:54px; }
  .heritage__media{ order:-1; }
  .footer__top{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width:600px){
  .hero{ align-items:flex-end; }
  .hero__scroll{ display:none; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; }
  .hero__actions .btn, .cta__actions .btn{ width:auto; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__title .line .inner,.break__quote .line .inner,.cta__title .line .inner{ transform:none !important; }
}