/* ============================================================
   WOODYER CAPITAL — BASE
   Reset · design tokens · shared components · header · nav · burger.
   Loaded first on every page. Tokens are scoped to the three
   structural blocks so nothing leaks globally.
============================================================ */

*,
*::before,
*::after{ margin:0; padding:0; box-sizing:border-box; }

html,
body{
  width:100%;
  overflow-x:hidden;
  background:#0A0A0A;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{ min-height:100vh; }

img,svg,video{ max-width:100%; height:auto; display:block; }

::selection{ background:rgba(201,169,97,.26); color:#F6F3EE; }

:focus-visible{ outline:2px solid #C9A961; outline-offset:3px; }

/* Skip link (accessibility) */
.wc-skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:#0A0A0A; color:#C9A961; padding:14px 20px;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  border:1px solid rgba(201,169,97,.6);
}
.wc-skip:focus{ left:16px; top:16px; }

/* Optional self-hosted wordmark face. Drop the two font files into /fonts/
   and uncomment to enable; until then the wordmark uses the fallback stack
   in --wc-mark (system Copperplate where present, else a serif). */
/*
@font-face{
  font-family:'WC Copperplate';
  src:url('../fonts/copperplate-gothic-32bc.woff2') format('woff2'),
      url('../fonts/copperplate-gothic-32bc.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
*/

/* ---- Tokens (scoped, never :root, never bare tags) ---- */
#wc-header, #wc-footer, .wc-page{
  --wc-onyx:#0A0A0A; --wc-ink:#050505; --wc-bone:#F4EFE6; --wc-white:#F6F3EE;
  --wc-graphite:#221F1C; --wc-brass:#C9A961; --wc-brass-d:#8C7239;
  --wc-burgundy:#5C1F26; --wc-slate:#3A3A3D;
  --wc-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --wc-sans:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --wc-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --wc-mark:'WC Copperplate','Copperplate Gothic','Copperplate','Copperplate Gothic Light',serif;
  --wc-h:74px;
}

/* ---- Layout container ----
   Widens in tiers so large monitors stop stranding content in the
   centre, while inner text blocks keep their own ch-based caps. ---- */
.wc-container{
  width:100%; max-width:1440px; margin-inline:auto;
  padding-inline:clamp(22px,5vw,88px);
}
@media (min-width:1680px){ .wc-container{ max-width:1560px; } }
@media (min-width:2100px){ .wc-container{ max-width:1720px; } }
@media (min-width:2560px){ .wc-container{ max-width:1840px; } }

/* ---- Scroll reveal ----
   GSAP-independent: driven by an IntersectionObserver in base.js so it
   works even if the CDN is blocked. Only hides when JS is confirmed
   (html.wc-js, set by an inline head script) so no-JS users see content.
   Under reduced motion it degrades to a gentle opacity fade (no movement). */
html.wc-js [data-r]{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1);
}
html.wc-js [data-r].wc-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.wc-js [data-r]{ transform:none; transition:opacity .7s ease; }
}

/* ---- Shared type ---- */
.wc-eyebrow{
  font-family:var(--wc-sans); font-size:12px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--wc-brass); margin:0;
}
.wc-eyebrow--ink{ color:rgba(34,31,28,.6); }
.wc-shead{
  font-family:var(--wc-serif); font-weight:370; line-height:1.06;
  letter-spacing:-.02em; font-size:clamp(38px,5.4vw,74px); margin:0;
  color:var(--wc-white);
}
.wc-shead--ink{ color:var(--wc-graphite); }
.wc-shead em{ font-style:italic; color:var(--wc-brass); }
.wc-shead--ink em{ color:var(--wc-brass-d); }
.wc-lede{
  font-family:var(--wc-sans); font-weight:300; font-size:clamp(17px,1.6vw,21px);
  line-height:1.65; color:rgba(246,243,238,.78); margin:0;
}
.wc-lede--ink{ color:rgba(34,31,28,.8); }

/* ---- Shared hero helpers (masked line-reveal + lift) ----
   Centralised here so every page hero shares one definition. ---- */
.wc-m{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.wc-ml{ display:block; }
.wc-lift{ display:block; overflow:hidden; padding-bottom:.04em; }
.wc-lift > span{ display:block; }

/* ---- Buttons ---- */
.wc-btn{
  display:inline-flex; align-items:center; gap:14px; padding:19px 34px;
  border:1px solid rgba(246,243,238,.32); border-radius:0; background:transparent;
  font-family:var(--wc-sans); font-size:11.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; color:var(--wc-white); cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.wc-btn__a{ transition:transform .22s ease; }
.wc-btn:hover .wc-btn__a{ transform:translateX(5px); }
.wc-btn:hover{ background:var(--wc-white); border-color:var(--wc-white); color:var(--wc-onyx); }
.wc-btn--brass{ border-color:var(--wc-brass); color:var(--wc-brass); }
.wc-btn--brass:hover{ background:var(--wc-brass); border-color:var(--wc-brass); color:var(--wc-onyx); }
.wc-btn--brass:active{ background:var(--wc-brass-d); border-color:var(--wc-brass-d); }
.wc-btn--ink{ border-color:rgba(34,31,28,.4); color:var(--wc-graphite); }
.wc-btn--ink:hover{ background:var(--wc-graphite); border-color:var(--wc-graphite); color:var(--wc-bone); }

/* ---- Inline link (brass underline draws L-to-R) ---- */
.wc-linkline{
  font-family:var(--wc-sans); font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; padding-bottom:6px; color:inherit;
  background-image:linear-gradient(var(--wc-brass),var(--wc-brass));
  background-repeat:no-repeat; background-position:left bottom; background-size:0% 1px;
  transition:background-size .35s ease,color .2s ease;
}
.wc-linkline:hover{ background-size:100% 1px; color:var(--wc-brass); }

/* ---- Tags ---- */
.wc-tag{
  display:inline-flex; align-items:center; gap:9px; padding:8px 15px;
  border:1px solid var(--wc-slate); font-family:var(--wc-sans); font-size:11px;
  font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--wc-white);
}
.wc-tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.wc-tag--brass{ border-color:var(--wc-brass); color:var(--wc-brass); }
.wc-tag--burgundy{ border-color:#7d3a41; background:rgba(92,31,38,.3); color:#e3b9bd; }
.wc-tag--slate{ border-color:var(--wc-slate); color:rgba(246,243,238,.6); }

/* ---- Evidence-grade ring badge (A-D motif) ---- */
.wc-badge{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px; }
.wc-badge svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.wc-badge circle{ fill:none; stroke-width:1.5; }
.wc-badge__l{ font-family:var(--wc-serif); font-size:28px; font-weight:500; }
.wc-badge--a circle{ stroke:var(--wc-brass); } .wc-badge--a .wc-badge__l{ color:var(--wc-brass); }
.wc-badge--b circle{ stroke:#a98b4e; } .wc-badge--b .wc-badge__l{ color:#a98b4e; }
.wc-badge--c circle{ stroke:#7a7057; } .wc-badge--c .wc-badge__l{ color:#8f866c; }
.wc-badge--d circle{ stroke:#57544d; } .wc-badge--d .wc-badge__l{ color:#6c685f; }

/* ============================================================
   HEADER BAR
============================================================ */
#wc-header{
  position:fixed; top:0; left:0; right:0; z-index:9990;
  background:rgba(10,10,10,0); backdrop-filter:blur(0px);
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom:1px solid rgba(246,243,238,0);
}
#wc-header.is-scrolled{
  background:rgba(8,8,8,.86); backdrop-filter:blur(14px);
  border-bottom-color:rgba(246,243,238,.09);
}
.wc-header__bar{
  max-width:1440px; margin:0 auto; height:var(--wc-h);
  padding:0 clamp(20px,4vw,56px); display:flex; align-items:center;
  justify-content:space-between; gap:24px;
}
@media (min-width:1680px){ .wc-header__bar{ max-width:1560px; } }
@media (min-width:2100px){ .wc-header__bar{ max-width:1720px; } }
@media (min-width:2560px){ .wc-header__bar{ max-width:1840px; } }

.wc-brand{ text-decoration:none; display:inline-flex; align-items:center; }
.wc-brand__mark{
  font-family:var(--wc-mark); font-size:17px; letter-spacing:.34em;
  color:var(--wc-white); white-space:nowrap;
  transition:color .25s ease, opacity .25s ease;
}
.wc-brand:hover .wc-brand__mark{ color:var(--wc-brass); }

.wc-nav{ display:flex; align-items:center; gap:clamp(20px,2.6vw,44px); }
.wc-nav__a{
  position:relative; font-family:var(--wc-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:rgba(246,243,238,.66); padding:6px 0; transition:color .2s ease;
}
.wc-nav__a span{ position:relative; }
.wc-nav__a span::after{
  content:''; position:absolute; left:0; bottom:-5px; height:1px; width:100%;
  background:var(--wc-brass); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.wc-nav__a:hover{ color:var(--wc-white); }
.wc-nav__a:hover span::after{ transform:scaleX(1); }
.wc-nav__a.is-active{ color:var(--wc-brass); }
.wc-nav__a.is-active span::after{ transform:scaleX(1); }
.wc-nav__cta{
  font-family:var(--wc-sans); font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; color:var(--wc-brass);
  border:1px solid rgba(201,169,97,.55); padding:11px 20px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.wc-nav__cta:hover, .wc-nav__cta.is-active{ background:var(--wc-brass); color:var(--wc-onyx); border-color:var(--wc-brass); }

/* ---- Burger ---- */
.wc-burger{
  display:none; position:relative; width:46px; height:46px; margin-right:-8px;
  background:none; border:0; padding:0; cursor:pointer;
}
.wc-burger span{
  position:absolute; left:11px; right:11px; height:1.5px; background:var(--wc-white);
  transition:transform .34s cubic-bezier(.4,0,.2,1), top .34s cubic-bezier(.4,0,.2,1), opacity .2s ease, background-color .3s ease;
}
.wc-burger span:nth-child(1){ top:18px; }
.wc-burger span:nth-child(2){ top:27px; }
#wc-header.is-open .wc-burger span{ background:var(--wc-brass); }
#wc-header.is-open .wc-burger span:nth-child(1){ top:22px; transform:rotate(45deg); }
#wc-header.is-open .wc-burger span:nth-child(2){ top:22px; transform:rotate(-45deg); }

/* ============================================================
   MOBILE OVERLAY MENU
============================================================ */
.wc-overlay{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201,169,97,.10) 0%, rgba(201,169,97,0) 46%),
    radial-gradient(90% 80% at 0% 100%, rgba(92,31,38,.18) 0%, rgba(92,31,38,0) 55%),
    var(--wc-ink);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(28px,5vh,44px);
  padding:calc(var(--wc-h) + 8px) clamp(28px,9vw,110px) 40px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden;
  transition:opacity .42s ease, visibility 0s linear .42s;
}
#wc-header.is-open .wc-overlay{
  z-index:9989; opacity:1; visibility:visible;
  transition:opacity .42s ease;
}
.wc-overlay__nav{ display:flex; flex-direction:column; }
.wc-overlay__a{
  display:flex; align-items:baseline; gap:22px; padding:clamp(13px,2.1vh,20px) 0;
  border-bottom:1px solid rgba(246,243,238,.08); font-family:var(--wc-serif);
  font-size:clamp(30px,7vw,52px); font-weight:380; line-height:1; text-decoration:none;
  color:var(--wc-white); opacity:0; transform:translateY(22px);
  transition:opacity .5s ease,transform .5s ease,color .2s ease;
}
#wc-header.is-open .wc-overlay__a{ opacity:1; transform:none; }
#wc-header.is-open .wc-overlay__a:nth-child(1){ transition-delay:.10s; }
#wc-header.is-open .wc-overlay__a:nth-child(2){ transition-delay:.17s; }
#wc-header.is-open .wc-overlay__a:nth-child(3){ transition-delay:.24s; }
#wc-header.is-open .wc-overlay__a:nth-child(4){ transition-delay:.31s; }
#wc-header.is-open .wc-overlay__a:nth-child(5){ transition-delay:.38s; }
.wc-overlay__a:hover, .wc-overlay__a:focus-visible, .wc-overlay__a.is-active{ color:var(--wc-brass); }
.wc-overlay__a i{
  font-family:var(--wc-sans); font-style:normal; font-size:12px;
  font-weight:600; letter-spacing:.2em; color:var(--wc-brass-d);
}
.wc-overlay__a.is-active i{ color:var(--wc-brass); }
.wc-overlay__mail{
  font-family:var(--wc-sans); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--wc-brass);
  opacity:0; transform:translateY(22px);
  transition:opacity .5s ease .44s, transform .5s ease .44s, color .2s ease;
}
#wc-header.is-open .wc-overlay__mail{ opacity:1; transform:none; }
.wc-overlay__mail:hover{ color:var(--wc-white); }

@media (max-width:980px){ .wc-nav{ display:none; } .wc-burger{ display:block; } }
@media (max-width:480px){ .wc-brand__mark{ font-size:13.5px; letter-spacing:.28em; } }

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
  #wc-header, #wc-header *{ transition:none!important; }
  .wc-overlay__a, .wc-overlay__mail{ opacity:1; transform:none; transition:none!important; }
  html{ scroll-behavior:auto; }
}