/* ============================================================
   FEDORA PHARMACEUTICALS — shared site stylesheet
   Loaded by every page. Design tokens, nav (with dropdowns),
   footer, and shared sub-page components live here so the
   whole site stays consistent and is edited in one place.
   ============================================================ */

@font-face{font-family:'Futura LT';src:url('https://static.parastorage.com/fonts/v2/790166f1-b347-4f16-8a29-f0c4931a7c35/v1/futura-lt-w01-book.woff2') format('woff2');font-weight:400 700;font-display:swap;}

:root{
  --ink:#2B2D42; --ink-2:#353850; --paper:#FFF9FB; --mist:#EFEDF2;
  --line:rgba(43,45,66,.13); --muted:#6A6D82;
  --teal:#9CB263; --teal-dk:#5E7136; --cobalt:#457EAC; --signal:#E5573F;
  --r:4px; --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.display{font-family:'Futura LT','Jost','Space Grotesk',sans-serif;line-height:1.14;letter-spacing:-.005em;font-weight:600}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-dk)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--teal);flex:0 0 22px}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:3px;font-weight:550;font-size:.95rem;transition:background .2s var(--ease),color .2s,border-color .2s;cursor:pointer;border:0}
.btn-primary{background:var(--teal);color:#23290f}
.btn-primary:hover{background:#8aa052}
.btn-ghost{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#3a3d57}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#efeaf0}
.btn-outline{border:1px solid var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--teal);background:rgba(156,178,99,.06)}

/* ---- scroll progress ---- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:var(--teal)}

/* ---- honeypot field (spam trap): off-screen, hidden from users & AT ---- */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* ============================================================
   NAV  — sticky banner with dropdown menus
   Banner uses a softened, translucent white so it never reads
   as a stark high-contrast block over dark hero sections.
   ============================================================ */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px);background:rgba(251,249,251,.72);border-bottom:1px solid rgba(43,45,66,.08);transition:background .3s,box-shadow .3s,border-color .3s}
header.nav.scrolled{background:rgba(251,249,251,.86);box-shadow:0 10px 30px -22px rgba(43,45,66,.5);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:.7rem}
.logo img{height:42px;width:auto;display:block}

.navlinks{display:flex;gap:.35rem;align-items:center}
.nav-item{position:relative}
.nav-item > a,.nav-item > button{display:inline-flex;align-items:center;gap:.35rem;font-size:.92rem;color:var(--ink);font-weight:500;letter-spacing:.01em;padding:.55rem .85rem;border:0;border-radius:3px;background:none;font-family:inherit;cursor:pointer;transition:color .2s,background .2s}
.nav-item > a:hover,.nav-item > button:hover,.nav-item.open > button{color:var(--teal-dk);background:rgba(156,178,99,.09)}
.nav-item.current > a{color:var(--teal-dk)}
.caret{width:9px;height:9px;transition:transform .25s var(--ease)}
.nav-item.open .caret{transform:rotate(180deg)}

/* dropdown panel */
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 26px 50px -26px rgba(43,45,66,.5);padding:7px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:60}
.nav-item:hover .dropdown,.nav-item.open .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:4px;transition:background .16s}
.dropdown a:hover{background:var(--mist)}
.dropdown a b{font-family:'Futura LT','Jost','Space Grotesk',sans-serif;font-weight:600;font-size:.92rem;color:var(--ink);letter-spacing:0}
.dropdown a span{font-size:.78rem;color:var(--muted);line-height:1.35}
.dropdown a::after{display:none}

.nav-cta{padding:.58rem 1.15rem;font-size:.88rem}
.nav-right{display:flex;align-items:center;gap:1rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   SUB-PAGE HERO  (interior pages)
   ============================================================ */
.subhero{position:relative;background:var(--ink);color:#fff;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.subhero::after{content:"";position:absolute;inset:0;background:url('/assets/hero-structure.png') right center/cover no-repeat;opacity:.32;pointer-events:none}
.subhero .wrap{position:relative;z-index:2;padding:90px 28px 76px}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.82rem;color:#9DB0CC;margin-bottom:1rem}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.5}
.subhero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:820px}
.subhero p.lead{margin-top:1.1rem;font-size:1.15rem;color:#C4D2E6;max-width:640px;line-height:1.55}
/* photo-hero variant: per-page background image (via --subhero-img) under a dark gradient for legible white text */
.subhero.has-photo::before{content:"";position:absolute;inset:0;z-index:0;background:var(--subhero-img) center/cover no-repeat}
.subhero.has-photo::after{z-index:1;opacity:1;background:linear-gradient(90deg,rgba(18,19,30,.93),rgba(18,19,30,.68) 46%,rgba(18,19,30,.36) 100%),linear-gradient(0deg,rgba(18,19,30,.55),rgba(18,19,30,0) 62%)}
.subhero.has-photo .wrap{padding-top:108px;padding-bottom:96px}
/* Shared by Contact and the three legal pages. That photo is far brighter than every
   other hero and carries the Fedora mark on the right, so the overlay eases off there
   to keep the logo readable while the left stays dark enough for the white heading. */
.subhero.lobby-hero::after{background:linear-gradient(90deg,rgba(18,19,30,.92),rgba(18,19,30,.82) 45%,rgba(18,19,30,.50) 68%,rgba(18,19,30,.12) 100%),linear-gradient(0deg,rgba(18,19,30,.45),rgba(18,19,30,.10))}
/* For heroes whose photo is bright behind the copy. The standard .has-photo overlay left the
   lead at 4.54:1, a hair over the 4.5 minimum; this deepens it without muddying the image. */
.subhero.photo-bright::after{background:linear-gradient(90deg,rgba(18,19,30,.94),rgba(18,19,30,.74) 46%,rgba(18,19,30,.44) 100%),linear-gradient(0deg,rgba(18,19,30,.58),rgba(18,19,30,0) 62%)}
@media(max-width:860px){.subhero.lobby-hero::after{background:linear-gradient(0deg,rgba(18,19,30,.86),rgba(18,19,30,.62))}}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{background:var(--ink);color:#9DB0CC;padding:72px 0 0}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site .f-brand .logo{color:#fff;margin-bottom:1rem;font-family:'Futura LT','Jost','Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem}
footer.site .f-brand p{max-width:300px;font-size:.95rem}
footer.site a{transition:color .2s}
footer.site a:hover{color:#fff}
footer.site h4{color:#fff;font-family:'Futura LT','Jost','Space Grotesk',sans-serif;font-size:.95rem;margin-bottom:1rem;letter-spacing:.02em}
footer.site li{list-style:none;margin-bottom:.6rem;font-size:.93rem}
.f-bot{padding:26px 0 34px;display:flex;justify-content:space-between;font-size:.85rem;flex-wrap:wrap;gap:10px}

/* ---- attribution bar ---- */
.attrib{background:#1f2031;border-top:1px solid rgba(255,255,255,.06);padding:18px 0}
.attrib-in{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.attrib-by{color:#647b9a;font-size:.84rem;letter-spacing:.02em}
.gd{display:inline-flex;align-items:center;gap:9px;transition:opacity .2s}
.gd:hover{opacity:.85}
.gd-logo{height:28px;width:auto;display:block}
.gd-name{font-family:'Futura LT','Jost','Space Grotesk',sans-serif;color:#e6edf6;font-weight:500;letter-spacing:.01em;font-size:.96rem}
.gd-name b{font-weight:700}
.attrib-partner{margin-left:4px}
.we{display:inline-flex;align-items:center;transition:opacity .2s}
.we:hover{opacity:.82}
.we-logo{height:34px;width:auto;display:block;opacity:.92}
@media(max-width:560px){.attrib-in{gap:8px 10px}.we-logo{height:28px}}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   MOBILE
   ============================================================ */
@media(max-width:940px){
  .nav-right .nav-cta{display:none}
  .burger{display:flex}
  /* NOTE: header.nav has backdrop-filter, which makes it the containing block
     for this position:fixed panel — so we size with an explicit height (not
     bottom:0, which would resolve against the 72px header) and lift it above
     page content with a high z-index. */
  /* Hide the closed panel with visibility/opacity (NOT an off-screen
     translateX) so it never adds horizontal scroll — an off-screen panel
     widens the layout viewport and also breaks position:fixed modals. */
  .navlinks{position:fixed;top:72px;left:0;right:0;height:calc(100vh - 72px);height:calc(100dvh - 72px);z-index:60;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding:14px 20px 40px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;border-top:1px solid var(--line)}
  body.menu-open .navlinks{opacity:1;visibility:visible;transform:none}
  .nav-item{border-bottom:1px solid var(--line)}
  .nav-item > a,.nav-item > button{width:100%;justify-content:space-between;padding:16px 6px;font-size:1.05rem;border-radius:0}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 10px 10px;min-width:0;display:none}
  .nav-item.open .dropdown{display:block}
  .f-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:560px){
  .f-grid{grid-template-columns:1fr}
  .subhero .wrap{padding:64px 28px 52px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .progress{display:none}
}

/* Greek beta: Futura LT has no glyph for it, so it falls back to a font with a
   real bold and renders heavier than the single-weight Futura around it.
   Pin it to normal weight so it matches its neighbours. */
.gk{font-weight:400}

/* The UA [hidden] rule loses to any author display rule, so anything given the
   hidden attribute could still render. This makes hidden mean hidden. */
[hidden]{display:none !important}