/* Meiotic, Inc. — one stylesheet. Tokens match vablet.com / vabletnotes.com. */
:root{
  --blue:#0061D5; --navy:#02137D; --violet:#6714E3;
  --atlantis:#A2DC26; --turquoise:#3DDDDC; --coral:#FF7A59;
  --grad-mid:#013EAE;
  --dark:#0F172A; --slate:#5A6478; --divider:#E2E8F0; --soft:#F5F8FC; --white:#fff;
  --font:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-cta:"Lato","Source Sans 3","Segoe UI",Arial,sans-serif;
  --font-logo:"Jost","Futura","Century Gothic","Source Sans 3",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--dark);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.1;letter-spacing:-.02em}
p{font-size:1.0625rem}
a{color:var(--blue)}a:hover{color:var(--navy)}
ul{list-style:none}
.wordmark{font-family:var(--font-logo);font-weight:700;letter-spacing:-.01em}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(2,19,125,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:1.15rem;text-decoration:none;white-space:nowrap}
.brand:hover{color:#fff}
.mark{display:block;color:#fff;flex:none}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{color:rgba(255,255,255,.84);text-decoration:none;font-size:.95rem}
.navlinks a:hover{color:#fff}

/* buttons */
.btn{display:inline-block;font-family:var(--font-cta);font-weight:700;font-size:.95rem;padding:14px 28px;border-radius:6px;text-decoration:none;white-space:nowrap;transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn-primary{background:var(--atlantis);color:var(--navy)}
.btn-primary:hover{color:var(--navy)}
.btn-sm{padding:9px 18px;font-size:.875rem}

/* eyebrows */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--atlantis);margin-bottom:14px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--atlantis)}
.eyebrow.dark{color:var(--violet)}.eyebrow.dark::before{background:var(--violet)}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(125deg,var(--navy) 0%,var(--grad-mid) 52%,var(--violet) 100%)}
.hexes{position:absolute;inset:0;width:100%;height:100%;opacity:.18;pointer-events:none}
.hero-inner{position:relative;z-index:2;min-height:620px;display:flex;flex-direction:column;justify-content:space-between;padding:56px 24px 60px}
.hero h1{font-size:clamp(3.4rem,10.4vw,10.5rem);line-height:1;letter-spacing:-.025em;color:#fff}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:48px}
.hero-foot > div{max-width:30em}
.hero .lede{font-size:1.32rem;line-height:1.4;color:rgba(255,255,255,.92)}

/* sections */
section{padding:92px 0}
.sec-navy{background:var(--navy);color:#fff}
.sec-soft{background:var(--soft)}
h2{font-size:clamp(2rem,3.4vw,3rem);font-weight:700;line-height:1.08;text-transform:uppercase;color:var(--navy);text-wrap:pretty}
.sec-navy h2{color:#fff;font-size:clamp(2.1rem,3.6vw,3.25rem)}
.sub{color:var(--slate);max-width:38em;margin-top:18px;font-size:1.1rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.statement{display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-height:100%}
.statement p{color:rgba(255,255,255,.84);max-width:34em}
.statement p + p{margin-top:16px}

/* products */
.prow{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:20px 0;border-top:1px solid rgba(255,255,255,.14)}
.prow:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.prow h3{font-size:1.25rem;color:#fff}
.prow p{color:rgba(255,255,255,.72);font-size:1rem;margin-top:4px}
.prow .go{color:var(--turquoise);font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap;padding-top:3px}
.prow .go:hover{color:#fff}

/* work tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:48px}
.tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--divider)}
.tile .art{height:220px;display:flex;align-items:center;justify-content:center;background:var(--soft)}
.tile .art svg{width:72px;height:72px}
.tile .cap{background:var(--navy);color:#fff;padding:18px 20px;flex:1}
.tile h3{color:#fff;font-size:.86rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.tile .cap p{color:rgba(255,255,255,.72);font-size:.95rem;margin-top:6px;line-height:1.45}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.contact-grid .btn{margin-top:32px}
.details{font-style:normal;display:grid;gap:22px;border-left:1px solid var(--divider);padding-left:40px}
.details .label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.details a{font-size:1.35rem;font-weight:600;color:var(--blue);text-decoration:none}
.details a:hover{text-decoration:underline}
.details p{font-size:1.2rem;font-weight:600;color:var(--navy);line-height:1.35}

/* contact form */
.cform{background:var(--soft);border:1px solid var(--divider);padding:28px}
.req-note{font-size:.9rem;color:var(--slate);margin-bottom:16px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.field .opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--slate)}
.field input,.field textarea{font:inherit;font-size:1rem;color:var(--dark);background:#fff;border:1px solid #C3D0E2;border-radius:6px;padding:12px 14px;min-height:46px}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field input:user-invalid{border-color:var(--coral)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.actions .btn{border:0;cursor:pointer;font-size:.95rem}
.actions .btn:disabled{opacity:.6;cursor:default;transform:none}
.status{font-size:.95rem;color:var(--slate);margin:0}
.fineprint{font-size:.85rem;color:var(--slate);margin-top:18px}
.form-done{background:var(--soft);border:1px solid var(--divider);padding:32px}
.form-done h3{color:var(--navy);font-size:1.5rem;margin-bottom:8px}
.form-done:focus{outline:2px solid var(--blue)}
.details{margin-top:36px}

/* content pages */
.page{padding:56px 24px 90px;max-width:760px}
.page h1{font-size:clamp(2rem,4.4vw,2.7rem);color:var(--navy);margin-bottom:8px;letter-spacing:-.02em}
.dateline{color:var(--slate);font-size:.95rem;margin-bottom:32px}
.page h2{font-size:1.3rem;margin:40px 0 12px;text-transform:none}
.page p,.page li{margin:0 0 14px;font-size:1.0625rem}
.page ul{margin:0 0 18px;padding-left:22px}
.page li{margin-bottom:8px}
.topbar{background:var(--navy);height:64px;display:flex;align-items:center}
.topbar .brand{font-size:1.1rem}

/* footer */
footer{background:var(--navy);color:rgba(255,255,255,.7)}
.accent-bar{height:4px;background:var(--atlantis)}
.foot-grid{padding:52px 24px 40px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer .brand{margin-bottom:14px;font-size:1.1rem}
footer p{max-width:30em;font-size:.95rem}
footer .addr{margin-top:14px;font-size:.85rem;color:rgba(255,255,255,.5)}
footer h4{color:#fff;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:15px}
footer a{color:rgba(255,255,255,.7);text-decoration:none;display:block;margin-bottom:9px;font-size:.93rem}
footer a:hover{color:var(--atlantis)}
.legal{border-top:1px solid rgba(255,255,255,.13);padding:22px 24px;font-size:.85rem;color:rgba(255,255,255,.5)}
.legal .wrap{padding:0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* responsive */
@media (max-width:880px){
  .split,.contact-grid{grid-template-columns:1fr;gap:44px}
  .tiles{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:760px){
  .navlinks a.plain{display:none}
  .hero-inner{min-height:520px;padding:40px 20px 44px}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:22px}
  section{padding:64px 0}
  .details{border-left:0;padding-left:0}
  .row2{grid-template-columns:1fr;gap:0}
  .cform{padding:20px}
  .legal .wrap{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}