/* ============================================================
   VALNOR — Field Occupational Medicine
   Shared design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Libre+Franklin:wght@300;400;500;600;700&family=Spectral:wght@400;500;600;700&family=Lora:wght@400;500;600;700&display=swap');

:root{
  /* palette */
  --navy:#0B1F3A;
  --navy-deep:#081729;
  --navy-panel:#102a4c;
  --ink:#10151C;
  --slate:#5A6470;
  --slate-light:#8a93a0;
  --line:#D8D2C6;
  --offwhite:#FBFAF7;
  --white:#FFFFFF;

  /* gold — driven by Tweaks (intensity) */
  --gold:#B8902E;
  --gold-rgb:184,144,46;
  --gold-on-navy:#C9A24A;

  /* type — --serif driven by Tweaks */
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Libre Franklin', system-ui, -apple-system, sans-serif;

  --maxw:1240px;
  --gutter:clamp(20px,5vw,64px);

  /* motion — driven by Tweaks (set to 0s when motion off) */
  --reveal-dur:0.9s;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--offwhite);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.container--wide{ max-width:1440px; }
.container--narrow{ max-width:880px; }

.section{ padding-block:clamp(50px,6vw,92px); position:relative; scroll-margin-top:96px; }
.section--tight{ padding-block:clamp(34px,4vw,58px); }
.section--navy{ background:var(--navy); color:var(--white); }
.section--navy-deep{ background:var(--navy-deep); color:var(--white); }
.section--offwhite{ background:var(--offwhite); color:var(--ink); }
.section--parch{ background:#ECE4D3; color:var(--ink); }
.section--white{ background:var(--white); color:var(--ink); }

.section--navy .lead, .section--navy-deep .lead{ color:#c4cdd9; }
.section--navy h1,.section--navy h2,.section--navy h3,
.section--navy-deep h1,.section--navy-deep h2,.section--navy-deep h3{ color:var(--white); }

/* topographic texture overlay for dark sections without photos */
.topo-bg{ position:relative; }
.topo-bg::before{
  content:""; position:absolute; inset:0;
  background:url('assets/topo.webp') center/cover no-repeat;
  opacity:0.04; mix-blend-mode:screen; pointer-events:none;
}
.topo-bg > *{ position:relative; z-index:1; }

/* ---------- typography ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-0.012em; margin:0; color:var(--ink); }
h1{ font-size:clamp(2.5rem,5.4vw,4.7rem); }
h2{ font-size:clamp(1.9rem,3.6vw,3.05rem); line-height:1.12; }
h3{ font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.2; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--sans);
  font-size:0.78rem; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold);
  display:inline-flex; align-items:center; gap:14px;
  margin:0 0 22px;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--gold); display:inline-block; }
.eyebrow--center{ justify-content:center; }
.eyebrow--plain{ color:var(--slate); }
.eyebrow--plain::before{ background:var(--line); }
.section--navy .eyebrow, .section--navy-deep .eyebrow{ color:var(--gold-on-navy); }
.section--navy .eyebrow::before, .section--navy-deep .eyebrow::before{ background:var(--gold-on-navy); }

.lead{ font-size:clamp(1.15rem,1.5vw,1.4rem); line-height:1.55; color:var(--slate); font-weight:400; }
.section--navy .lead{ color:#bcc6d4; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

.serif-accent{ font-family:var(--serif); font-style:italic; }
.gold-word{ color:var(--gold); }
.section--navy .gold-word, .section--navy-deep .gold-word{ color:var(--gold-on-navy); }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans); font-weight:600; font-size:0.92rem;
  letter-spacing:0.03em;
  display:inline-flex; align-items:center; gap:11px;
  padding:16px 30px; border:1px solid transparent; cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
  border-radius:2px; line-height:1;
}
.btn svg{ width:16px; height:16px; transition:transform .25s ease; }
.btn:hover svg{ transform:translateX(4px); }
.btn--gold{ background:var(--gold); color:#1a1407; }
.btn--gold:hover{ background:#caa039; }
.btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.4); }
.btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.7); }
.btn--ink{ background:var(--navy); color:#fff; }
.btn--ink:hover{ background:#13294a; }
.btn--outline-ink{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn--outline-ink:hover{ border-color:var(--navy); }

.txtlink{
  font-family:var(--sans); font-weight:600; font-size:0.92rem; letter-spacing:0.03em;
  display:inline-flex; align-items:center; gap:9px; color:var(--gold);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .25s,gap .25s;
}
.txtlink svg{ width:15px; height:15px; }
.txtlink:hover{ gap:14px; border-color:var(--gold); }
.section--navy .txtlink, .section--navy-deep .txtlink{ color:var(--gold-on-navy); }
.section--navy .txtlink:hover, .section--navy-deep .txtlink:hover{ border-color:var(--gold-on-navy); }

/* ---------- header / nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-solid{ background:rgba(8,18,33,.93); backdrop-filter:blur(10px); border-bottom-color:rgba(255,255,255,.08); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand .brand-logo{ height:50px; width:auto; display:block; }
@media (max-width:560px){ .brand .brand-logo{ height:46px; } }
.brand .mark{ width:34px; height:34px; flex:none; }
.brand .wordmark{ display:flex; flex-direction:column; line-height:1; }
.brand .wm-name{ font-family:var(--serif); color:#fff; font-size:1.32rem; font-weight:600; letter-spacing:0.2em; }
.brand .wm-sub{ font-family:var(--sans); color:var(--gold-on-navy); font-size:0.52rem; font-weight:600; letter-spacing:0.34em; text-transform:uppercase; margin-top:4px; }

.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--sans); font-size:0.88rem; font-weight:500; letter-spacing:0.01em;
  color:rgba(255,255,255,.82); padding:6px 0; position:relative; transition:color .2s; white-space:nowrap;
}
.nav-links a:hover{ color:#fff; }
.nav-links a.active{ color:#fff; }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--gold-on-navy); }
.nav-cta{ display:flex; align-items:center; gap:20px; }
.nav-cta .btn{ padding:13px 24px; font-size:0.85rem; white-space:nowrap; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:26px; height:2px; background:#fff; margin:5px 0; transition:.3s; }

@media (max-width:1180px){
  .nav-links{ gap:22px; }
  .brand .wm-sub{ display:none; }
}
@media (max-width:980px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:block; }
  .mobile-menu{ display:flex; }
}

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:190; background:var(--navy-deep);
  flex-direction:column; justify-content:center; gap:8px; padding:40px;
  transform:translateY(-100%); transition:transform .4s cubic-bezier(.6,.05,.2,1); display:none;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--serif); font-size:1.7rem; color:#fff; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-menu a .gold-word{ color:var(--gold-on-navy); }
.mobile-menu .btn{ margin-top:24px; align-self:flex-start; }
@media (max-width:980px){ .mobile-menu{ display:flex; } }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-deep); color:#aeb8c6; padding-block:72px 36px; border-top:1px solid rgba(var(--gold-rgb),.55); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:54px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .wm-name{ font-family:var(--serif); color:#fff; font-size:1.5rem; letter-spacing:0.2em; }
.footer-tag{ color:var(--gold-on-navy); font-size:0.8rem; letter-spacing:0.18em; text-transform:uppercase; margin-top:16px; font-weight:600; }
.footer-blurb{ margin-top:18px; font-size:0.92rem; max-width:34ch; line-height:1.6; }
.footer-col h4{ font-family:var(--sans); font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase; color:#fff; margin-bottom:18px; font-weight:600; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:0.92rem; color:#aeb8c6; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-trust{ padding-top:30px; font-size:0.82rem; color:#7f8a99; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.footer-trust .dot{ width:3px; height:3px; border-radius:50%; background:var(--gold-on-navy); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:34px; font-size:0.8rem; color:#67717f; }
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- reveal animation ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity var(--reveal-dur) cubic-bezier(.2,.65,.3,1), transform var(--reveal-dur) cubic-bezier(.2,.65,.3,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
body.motion-off [data-reveal]{ opacity:1; transform:none; transition:none; }

/* ---------- dividers ---------- */
.rule-gold{ width:54px; height:2px; background:var(--gold); border:0; margin:0 0 26px; }
.rule-gold--center{ margin-inline:auto; }
.hairline{ height:1px; background:var(--line); border:0; margin:0; }
.section--navy .hairline{ background:rgba(255,255,255,.12); }

/* ---------- stats ---------- */
.stat-num{ font-family:var(--serif); font-weight:600; font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; letter-spacing:-0.02em; color:var(--navy); }
.section--navy .stat-num, .section--navy-deep .stat-num{ color:#fff; }
.stat-num .unit{ font-size:0.5em; color:var(--gold); margin-left:2px; }
.section--navy .stat-num .unit{ color:var(--gold-on-navy); }
.stat-label{ font-family:var(--sans); font-size:0.86rem; line-height:1.45; color:var(--slate); margin-top:12px; }
.section--navy .stat-label{ color:#9fb4c7; }

/* ---------- service / feature cards ---------- */
.grid{ display:grid; gap:1px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr;} }

.svc-grid{ border:1px solid var(--line); background:var(--line); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; }
@media (max-width:860px){ .svc-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr;} }
.svc-card{ background:var(--white); padding:38px 34px; position:relative; display:block; overflow:hidden; isolation:isolate; transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, z-index 0s; cursor:pointer; }
.svc-card::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--navy); transform:translateY(101%); transition:transform .45s cubic-bezier(.5,.05,.2,1); }
.svc-card:hover, .svc-card:focus-visible{ transform:translateY(-6px); box-shadow:0 26px 50px -18px rgba(8,18,33,.5); z-index:2; outline:none; }
.svc-card:hover::before, .svc-card:focus-visible::before{ transform:translateY(0); }
.svc-icon{ width:38px; height:38px; color:var(--navy); margin-bottom:22px; transition:color .4s ease, transform .45s cubic-bezier(.2,.7,.3,1); }
.svc-icon svg{ width:100%; height:100%; stroke:var(--navy); stroke-width:1.4; fill:none; transition:stroke .4s ease; }
.svc-card h3{ font-size:1.18rem; margin-bottom:10px; transition:color .4s ease; }
.svc-card p{ font-size:0.95rem; color:var(--slate); margin:0; line-height:1.55; transition:color .4s ease; }
.svc-card .num{ transition:color .4s ease; }
.svc-card .svc-go{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--sans); font-size:0.82rem; font-weight:600; letter-spacing:0.04em; color:var(--gold-on-navy); opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1); }
.svc-card .svc-go svg{ width:15px; height:15px; stroke:var(--gold-on-navy); }
.svc-card:hover .svc-go, .svc-card:focus-visible .svc-go{ opacity:1; transform:none; }
.svc-card:hover .num, .svc-card:focus-visible .num{ color:var(--gold-on-navy); }
.svc-card:hover .svc-icon, .svc-card:focus-visible .svc-icon{ color:#fff; transform:scale(1.06); }
.svc-card:hover .svc-icon svg, .svc-card:focus-visible .svc-icon svg{ stroke:var(--gold-on-navy); }
.svc-card:hover h3, .svc-card:focus-visible h3{ color:#fff; }
.svc-card:hover p, .svc-card:focus-visible p{ color:#aebbcb; }
body.motion-off .svc-card, body.motion-off .svc-card::before, body.motion-off .svc-card *{ transition:none; }
.svc-card .num{ font-family:var(--sans); font-size:0.72rem; letter-spacing:0.14em; color:var(--gold); font-weight:600; display:block; margin-bottom:18px; }

/* ---------- figure ---------- */
.figure{ position:relative; overflow:hidden; }
.figure img{ width:100%; height:100%; object-fit:cover; }
.figure--bordered{ border:1px solid var(--line); }

/* image + text split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,84px); align-items:center; }
.split--media-right .split-media{ order:2; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:34px; } .split--media-right .split-media{ order:0; } }
.split-media{ aspect-ratio:4/3; }
.split-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- full-bleed photo band ---------- */
.bleed{ position:relative; min-height:560px; display:flex; align-items:center; overflow:hidden; color:#fff; }
.bleed-img{ position:absolute; inset:0; }
.bleed-img img{ width:100%; height:100%; object-fit:cover; }
.bleed-scrim{ position:absolute; inset:0; }
.bleed .container{ position:relative; z-index:2; }

/* trust strip */
.trust-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.trust-strip .ts-item{ font-size:0.86rem; letter-spacing:0.02em; color:var(--slate); display:flex; align-items:center; gap:14px; }
.trust-strip .ts-item strong{ color:var(--navy); font-weight:600; }
.trust-strip .ts-sep{ width:4px; height:4px; border-radius:50%; background:var(--gold); }

/* eyebrow tag chips */
.kicker-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-family:var(--sans); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:var(--slate); border:1px solid var(--line); padding:8px 14px; border-radius:2px; }
.section--navy .chip{ color:#bcc6d4; border-color:rgba(255,255,255,.18); }

/* generic spacing helpers */
.mt-s{ margin-top:18px; } .mt-m{ margin-top:32px; } .mt-l{ margin-top:54px; }
.center{ text-align:center; }
.cta-row{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:38px; }
.section-head{ max-width:760px; margin-bottom:clamp(28px,3.2vw,46px); }
.section-head.center{ margin-inline:auto; }

/* page hero (interior) */
.page-hero{ position:relative; padding-top:122px; padding-bottom:clamp(46px,5vw,78px); overflow:hidden; }
.page-hero--photo{ color:#fff; min-height:52vh; display:flex; align-items:flex-end; }
.page-hero--photo h1, .page-hero--photo h2{ color:#fff; }
/* parallax image layers (targeted) */
[data-parallax]{ will-change:transform; }
.bleed-img[data-parallax], .closing-cta .bg[data-parallax], .backing-cta .bg[data-parallax], .page-hero--photo .bleed-img[data-parallax]{ top:-13%; bottom:-13%; height:auto; }
body.motion-off [data-parallax]{ transform:none !important; }
.page-hero--photo .bleed-img{ position:absolute; inset:0; }
.page-hero h1{ font-size:clamp(2.4rem,4.6vw,4rem); }

/* tags list / definition rows */
.def-rows{ border-top:1px solid var(--line); }
.def-row{ display:grid; grid-template-columns:64px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--line); }
.def-row .idx{ font-family:var(--serif); color:var(--gold); font-size:1.3rem; font-weight:600; }
.def-row h3{ margin-bottom:8px; }
.def-row p{ color:var(--slate); margin:0; }
.section--navy .def-rows,.section--navy .def-row{ border-color:rgba(255,255,255,.12); }
.section--navy .def-row p{ color:#9fb4c7; }