/* Adhera — shared styles for every page: fonts, tokens, header, buttons, footer,
   grain and reveal. Page-specific styles live inline in each page. */

/* Geist, self-hosted (variable weight) */
@font-face{font-family:Geist;src:url(fonts/geist-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Geist;src:url(fonts/geist-latin-ext.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* GT Alpina trial: its accented letters are blank, so the range skips them and they fall through to Fraunces */
@font-face{font-family:"GT Alpina";src:url(fonts/GT-Alpina-Standard-Regular-Trial.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00BF,U+00D7,U+00F7,U+2000-206F}
@font-face{font-family:"GT Alpina";src:url(fonts/GT-Alpina-Standard-Medium-Trial.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00BF,U+00D7,U+00F7,U+2000-206F}

:root{
  --bg:#fcfcfb;--card:#fff;--ink:#2d2d2d;--ink-hover:#3b3b3b;--body:#4d4d4f;--muted:#78787b;
  --line:#e8eaeb;--line-strong:#dfe2e4;--line-soft:#f2f3f4;
  --green:#1f9d6c;--green-bg:#e3f5ec;--amber:#b7791f;--amber-bg:#fdf1dc;--red:#c8412b;--red-bg:#fbe7e2;--blue:#3d6fd9;--blue-bg:#e5edfd;--violet:#7a55d6;--violet-bg:#efe9fd;
  --sans:Geist,system-ui,sans-serif;
  --serif:"GT Alpina",Fraunces,Geist,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--ease-out:cubic-bezier(.23,1,.32,1);--ring:#6f8dff;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a,button,input,textarea{touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0;text-wrap:pretty}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.025em}
button{font:inherit}
img{max-width:100%}
::selection{background:#dfe6ff;color:var(--ink)}
/* Rings follow each element's own radius; links get a small one */
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.nav a,.fcol-links a,.fbottom a,.brand{border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:12px;z-index:30;padding:8px 12px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:500;transform:translateY(calc(-100% - 20px));transition:transform .2s var(--ease)}
.skip:focus-visible{transform:none}

/* Faint film grain over the whole page background */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--grain);background-size:180px;opacity:.045;pointer-events:none}

.wrap{max-width:1400px;margin:0 auto;padding:0 32px}

/* Header */
/* Header with a progressive blur: six backdrop layers, each blurring twice as much as the one below and
   masked to its own band, so content softens gradually towards the top edge. The header itself has no
   backdrop-filter or opacity: either would make it the backdrop root, and the layers would blur nothing. */
.top{position:sticky;top:0;z-index:20}
.top-blur{position:absolute;left:0;right:0;top:0;height:104px;pointer-events:none}
.top-blur i{position:absolute;inset:0}
.top-blur i:nth-child(1){-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);-webkit-mask-image:linear-gradient(to top,transparent 0%,#000 12.5%,#000 25%,transparent 37.5%);mask-image:linear-gradient(to top,transparent 0%,#000 12.5%,#000 25%,transparent 37.5%)}
.top-blur i:nth-child(2){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask-image:linear-gradient(to top,transparent 12.5%,#000 25%,#000 37.5%,transparent 50%);mask-image:linear-gradient(to top,transparent 12.5%,#000 25%,#000 37.5%,transparent 50%)}
.top-blur i:nth-child(3){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask-image:linear-gradient(to top,transparent 25%,#000 37.5%,#000 50%,transparent 62.5%);mask-image:linear-gradient(to top,transparent 25%,#000 37.5%,#000 50%,transparent 62.5%)}
.top-blur i:nth-child(4){-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(to top,transparent 37.5%,#000 50%,#000 62.5%,transparent 75%);mask-image:linear-gradient(to top,transparent 37.5%,#000 50%,#000 62.5%,transparent 75%)}
.top-blur i:nth-child(5){-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(to top,transparent 50%,#000 62.5%,#000 75%,transparent 87.5%);mask-image:linear-gradient(to top,transparent 50%,#000 62.5%,#000 75%,transparent 87.5%)}
.top-blur i:nth-child(6){-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);-webkit-mask-image:linear-gradient(to top,transparent 62.5%,#000 75%);mask-image:linear-gradient(to top,transparent 62.5%,#000 75%)}
/* A light wash that follows the blur, so the nav stays readable over busy content */
.top-blur::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(252,252,251,.84),rgba(252,252,251,.62) 50%,rgba(252,252,251,0))}
.top-in{position:relative}
.top-in{max-width:1400px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center}
.brand img{display:block;height:21px;width:auto}
.nav{display:flex;gap:26px;font-size:14px;margin-left:auto}
/* Nav links: no underline, they just come up to full strength on hover */
.nav a{position:relative;color:var(--ink);opacity:.62;transition:opacity .15s ease}
.top .brand img{height:18px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:8px;background:#eef0f2;color:var(--ink);font-weight:500;font-size:13.5px;padding:9px 14px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,transform .16s var(--ease-out)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn-sm{font-size:13px;padding:7px 12px}
.btn:disabled{opacity:.6;cursor:default}

/* Type */
.display{font-size:clamp(30px,3.8vw,46px);line-height:1.08}
.lead{font-size:17px;line-height:1.6;color:var(--body)}

/* Footer */
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:28px;margin-top:72px;padding-top:32px;border-top:1px solid var(--line)}
.foot-tag{font-size:14px;line-height:1.6;color:var(--body);margin-top:14px;max-width:22em}
.fcol-title{font-size:13px;font-weight:500}
.fcol-links{display:grid;gap:9px;margin-top:12px;font-size:13px}
.fcol-links a,.fbottom a{color:var(--body);transition:color .15s}
/* This site's own entry in the family's product column */
.fcol-links a[aria-current]{color:var(--ink)}
.fbottom{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin-top:32px;padding:22px 0 32px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--muted)}
.fbottom .fb-links{display:flex;gap:18px;margin-left:auto}

/* Scroll reveal (index adds .js on <html>): blocks sit clearly quieter than the headings */
.js .rv,.js .rvc>*{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:inherit}
.js .rv.in,.js .rvc.in>*{opacity:1;transform:none}

/* Heading reveal: split by index.html into words that come into focus one by one, once */
@media (prefers-reduced-motion:no-preference){
  /* hidden only while JS is about to split it; the safety net shows it anyway after 1.6s */
  .js [data-reveal]:not(.is-split){opacity:0;animation:rv-safety 1ms 1.6s forwards}
  .is-split .w{display:inline-block;opacity:0}
  /* section h2s: the quieter variant */
  .is-split.is-in .w{opacity:1;
    animation:rv-rise-q .8s var(--ease) backwards,rv-focus-q .65s cubic-bezier(.25,.1,.25,1) backwards;
    animation-delay:calc(var(--rv-d,0ms) + var(--i) * var(--rv-st,40ms))}
  /* hero h1: the signature variant */
  .hero h1.is-in .w{animation-name:rv-rise,rv-focus;animation-duration:.9s,.75s}
}
@keyframes rv-safety{to{opacity:1}}
@keyframes rv-rise{from{transform:translateY(.2em)}}
@keyframes rv-focus{from{opacity:0;filter:blur(.13em)}}
@keyframes rv-rise-q{from{transform:translateY(.14em)}}
@keyframes rv-focus-q{from{opacity:0;filter:blur(.1em)}}

/* Hover only where there is a real pointer, so taps don't leave things stuck */
@media (hover:hover) and (pointer:fine){
  .nav a:hover{opacity:1}
  .btn:hover{background:#e2e5e8}
  .fcol-links a:hover,.fbottom a:hover{color:var(--ink)}
}

/* Brand on its own row, the four link columns beneath */
@media (max-width:1024px){
  .foot{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot>div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  .wrap,.top-in{padding:0 20px}
  .top-in{gap:20px}
  .nav{gap:18px}
  /* ~46px touch target on the header CTA */
  .top-cta{position:relative}
  .top-cta::before{content:"";position:absolute;inset:-8px -6px}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
  .fbottom .fb-links{margin-left:0}
}
@media (max-width:560px){
  .nav{display:none}
  .top-cta{margin-left:auto}
}
/* Reduced transparency: a plain bar instead of the blur */
@media (prefers-reduced-transparency:reduce){
  .top{background:var(--bg);box-shadow:0 1px 0 var(--line)}
  .top-blur{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .rvc>*{opacity:1;transform:none}
}