/* WOODVALE FACILITY — shared styles
   Layout concept: an event-package booklet — cream "inside pages" between dark forest-green "covers",
   centred gold-ruled titles like the printed packages, split spreads for spaces and features.
   Single committed look (the brand's print palette), so colours are set explicitly rather than themed. */
:root{
  color-scheme:light;
  --paper:#f6f1e7;      /* inside pages */
  --paper-2:#eee4d1;    /* kraft tint — highlighted boxes */
  --card:#fffdf8;
  --ink:#16221b;        /* text on paper */
  --ink-2:#4c574e;      /* secondary text */
  --green:#0f1c16;      /* covers */
  --green-2:#17281f;
  --cream:#f3ead8;      /* text on green */
  --cream-2:#c9c1ae;
  --gold:#9c7b43;       /* gold on paper */
  --gold-lt:#c7a467;    /* gold on green */
  --line:rgba(156,123,67,.38);
  --line-g:rgba(199,164,103,.28);
  --display:'Cormorant Garamond','Cormorant',Garamond,Georgia,serif;
  --body:'EB Garamond',Garamond,Georgia,serif;
  --label:'Jost','Futura','Avenir Next',Arial,sans-serif;
  --gutter:clamp(16px,4.5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
::selection{background:rgba(199,164,103,.4)}
.wrap{max-width:1220px;margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:900px}

/* Type devices from the printed packages */
.eyebrow{font:500 11px/1.4 var(--label);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.dark .eyebrow,.cover .eyebrow{color:var(--gold-lt)}
.rule{display:block;width:48px;height:1px;background:var(--gold);margin:18px auto 0}
.dark .rule{background:var(--gold-lt)}
.h2{font:500 clamp(36px,4.6vw,60px)/1.02 var(--display);letter-spacing:-.01em;text-wrap:balance}
.h2 i{font-weight:400;color:var(--gold)}
.dark .h2 i{color:var(--gold-lt)}
.head{text-align:center;max-width:760px;margin:0 auto}
.head .h2{margin-top:14px}
.head p.sub{margin-top:18px;font:italic 400 clamp(18px,1.8vw,21px)/1.5 var(--body);color:var(--ink-2)}
.dark .head p.sub{color:var(--cream-2)}
.diam li{position:relative;padding-left:22px}
.diam li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.dark .diam li::before{background:var(--gold-lt)}

/* Sections */
.sec{padding-block:clamp(64px,9vw,120px)}
.dark{background:var(--green);color:var(--cream)}
.tint{background:var(--paper-2)}

/* Announcement */
.announce{position:relative;background:var(--green);color:var(--cream);text-align:center;padding:10px 48px;font:400 15px/1.4 var(--body);border-bottom:1px solid var(--line-g)}
.announce b{font:500 11.5px/1 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);margin-right:10px}
.announce a{border-bottom:1px solid var(--line-g);font-style:italic}
.announce a:hover{color:var(--gold-lt)}
.announce button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;background:none;border:0;color:var(--cream-2);font:300 18px/1 var(--label)}
.announce.gone{display:none}

/* Header */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(246,241,231,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{width:46px;height:46px;display:block}
.brand span{font:600 15px/1.05 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.brand span small{display:block;margin-top:3px;font:500 9.5px/1 var(--label);letter-spacing:.34em;color:var(--gold)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{white-space:nowrap;font:500 11px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding:8px 0;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.nav a:hover,.nav a[aria-current]{border-color:var(--gold);color:var(--gold)}
.nav .req{padding:13px 18px;border:1px solid var(--green);background:var(--green);color:var(--cream)}
.nav .req:hover{background:var(--green-2);color:var(--gold-lt);border-color:var(--green-2)}
.burger{display:none;background:none;border:0;padding:12px 2px;width:46px}
.burger span{display:block;height:1px;background:var(--ink);margin:8px 0;transition:transform .35s var(--ease)}
.open .burger span:first-child{transform:translateY(4.5px) rotate(45deg)}
.open .burger span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:35;background:var(--green);color:var(--cream);overflow:auto;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.open .overlay{opacity:1;pointer-events:auto}
.overlay .wrap{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:40px}
.overlay nav a{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-g);font:500 clamp(34px,9vw,54px)/1 var(--display);color:var(--cream)}
.overlay nav a small{margin-left:auto;font:500 10px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt)}
.overlay p{margin-top:28px;font:italic 400 18px/1.6 var(--body);color:var(--cream-2)}
.open .topbar{background:var(--green);border-color:var(--line-g)}
.open .brand span{color:var(--cream)}
.open .burger span{background:var(--cream)}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:16px 28px;border:1px solid var(--green);font:500 12px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);transition:background-color .3s var(--ease),color .3s,border-color .3s}
.btn:hover{background:var(--green);color:var(--cream)}
.btn.solid{background:var(--green);color:var(--cream)}
.btn.solid:hover{background:var(--green-2);color:var(--gold-lt)}
.dark .btn{border-color:var(--gold-lt);color:var(--cream)}
.dark .btn:hover{background:rgba(199,164,103,.12);color:var(--gold-lt)}
.dark .btn.solid{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--green)}
.dark .btn.solid:hover{background:#d6b67a;border-color:#d6b67a;color:var(--green)}
.btn .arr{font:400 16px/1 var(--label);letter-spacing:0;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.tlink{display:inline-flex;gap:10px;font:500 11px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:7px;transition:color .25s,gap .3s var(--ease)}
.tlink:hover{gap:14px}
.dark .tlink{color:var(--gold-lt);border-color:var(--line-g)}

/* Photo frame — thin inset keyline, as on the sales sheet */
.ph{position:relative;overflow:hidden;background:var(--green-2);max-width:100%}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.ph::after{content:'';position:absolute;inset:10px;border:1px solid rgba(246,241,231,.35);pointer-events:none}
.ph:hover img{transform:scale(1.03)}

/* Inner-page title (green cover) */
.cover{background:var(--green);color:var(--cream);text-align:center;padding-block:clamp(56px,8vw,104px)}
.cover .mark{width:72px;margin:0 auto 22px;display:block}
.cover h1{margin-top:18px;font:400 clamp(50px,8.4vw,108px)/.95 var(--display);letter-spacing:-.015em;text-wrap:balance}
.cover h1 i{color:var(--gold-lt)}
.cover .intro{max-width:44ch;margin:24px auto 0;font:400 clamp(18px,1.9vw,21px)/1.55 var(--body);color:var(--cream-2)}
.cover .btns{justify-content:center;margin-top:34px}

/* Package box — kraft highlight from the PDFs */
.pkg{background:var(--paper-2);border:1px solid var(--line);padding:clamp(24px,3.4vw,40px);text-align:center}
.pkg h3{font:500 clamp(26px,2.6vw,32px)/1.1 var(--display)}
.pkg p{margin-top:10px;color:var(--ink-2)}
.chip{display:inline-block;margin-top:16px;padding:8px 16px;border-radius:999px;background:var(--green);color:var(--gold-lt);font:500 11px/1 var(--label);letter-spacing:.16em;text-transform:uppercase}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.card{background:var(--card);border:1px solid rgba(156,123,67,.22);padding:26px 24px}
.card h3{font:600 13px/1.3 var(--label);letter-spacing:.18em;text-transform:uppercase}
.card p,.card li{margin-top:10px;font-size:17px;color:var(--ink-2)}
.card ul{margin-top:12px;display:grid;gap:6px}
.card ul li{margin-top:0}
.dark .card{background:var(--green-2);border-color:var(--line-g)}
.dark .card h3{color:var(--gold-lt)}
.dark .card p,.dark .card li{color:var(--cream-2)}

/* Reel */
.reel{position:relative;overflow:hidden}
.reel::before,.reel::after{content:'';position:absolute;top:0;bottom:0;width:clamp(20px,6vw,80px);z-index:2;pointer-events:none}
.reel::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.reel::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.reel-track{display:flex;width:max-content;animation:reel 80s linear infinite}
.reel:hover .reel-track,.reel.hold .reel-track{animation-play-state:paused}
.reel-dup{display:flex}
@keyframes reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tile{position:relative;flex:0 0 auto;height:clamp(280px,40vw,460px);aspect-ratio:3/4;margin:0 6px;overflow:hidden;background:var(--green-2)}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:'';position:absolute;inset:8px;border:1px solid rgba(246,241,231,.3);pointer-events:none}

/* Footer */
.footer{background:var(--green);color:var(--cream-2);border-top:1px solid var(--line-g)}
.footer .wrap{padding-block:clamp(56px,7vw,88px) 32px}
.f-top{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:36px 28px;align-items:start}
.f-brand img{width:96px}
.f-brand p{margin-top:16px;font:italic 400 20px/1.4 var(--display);color:var(--gold-lt);max-width:22ch}
.fcol h4{margin-bottom:12px;font:500 11px/1 var(--label);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-lt)}
.fcol p,.fcol a{display:block;font:400 17px/1.65 var(--body);color:var(--cream-2)}
.fcol a{width:max-content;max-width:100%;transition:color .25s}
.fcol a:hover{color:var(--cream)}
.family{margin-top:clamp(40px,5vw,56px);padding:22px 0;border-top:1px solid var(--line-g);border-bottom:1px solid var(--line-g);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 28px;font:italic 400 18px/1.45 var(--body)}
.family b{font-style:normal;font-weight:500;color:var(--cream)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:28px;font:400 12px/1.5 var(--label);letter-spacing:.04em;color:#8f9a8c}
.legal nav{display:flex;gap:8px 20px;flex-wrap:wrap}
.legal a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}

/* Back to home */
.home-btn{display:none;align-items:center;gap:8px;margin-left:auto;padding:11px 14px;border:1px solid var(--line);font:500 10.5px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.home-btn span{font:400 15px/1 var(--label);letter-spacing:0;color:var(--gold)}
.home-btn:hover{border-color:var(--gold);color:var(--gold)}
.open .home-btn{color:var(--cream);border-color:var(--line-g)}
@media (max-width:980px){.home-btn{display:inline-flex}.topbar .wrap{gap:12px}}
@media (max-width:360px){.brand span{display:none}}

/* Slim footer */
.footer.slim .wrap{padding-block:40px 26px}
.slim-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.slim-row img{width:72px}
.slim-row p{font:400 16.5px/1.6 var(--body);color:var(--cream-2)}
.slim-row .sl{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:6px}
.slim-row .sl a{font:500 10.5px/1.8 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt)}
.footer.slim .legal{margin-top:24px}

/* Reveal (starts visible; only nudges up) */
.rv{transition:transform .9s var(--ease),opacity .9s var(--ease)}
.js .rv:not(.in){opacity:.001;transform:translateY(14px)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{animation:rise 1.1s var(--ease) both;animation-delay:var(--d,0s)}

@media (max-width:980px){
  .nav a:not(.req){display:none}
  .f-top{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:17px}
  .nav{display:none}
  .burger{display:block}
  .brand img{width:40px;height:40px}
  .brand span{font-size:14px}
  .announce{padding:9px 40px 9px 14px;font-size:14px}
  .announce b{display:block;margin:0 0 4px}
  .btns{flex-direction:column;align-items:stretch}
  .tile{margin:0 4px}
  .ph::after{inset:7px}
  .f-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.js .rv:not(.in){opacity:1;transform:none}.reel{overflow-x:auto}.reel-dup{display:none}}