/* Brand fonts: Okine (headings) + Aeonik (body).
   Both are licensed fonts. Put the purchased files in assets/fonts/brand/ with these names
   and they take over automatically. Until then Outfit and Hanken Grotesk (free) stand in. */
@font-face { font-family:"Okine"; src:local("Okine"), url(fonts/brand/okine-regular.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Okine"; src:local("Okine Medium"), url(fonts/brand/okine-medium.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Okine"; src:local("Okine Bold"), url(fonts/brand/okine-bold.woff2) format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Aeonik"; src:local("Aeonik"), url(fonts/brand/aeonik-regular.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Aeonik"; src:local("Aeonik Medium"), url(fonts/brand/aeonik-medium.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Aeonik"; src:local("Aeonik Bold"), url(fonts/brand/aeonik-bold.woff2) format("woff2"); font-weight:700; font-display:swap; }

:root {
  --display: "Okine", "Outfit", system-ui, sans-serif;
  --body: "Aeonik", "Hanken Grotesk", system-ui, sans-serif;
}
body { font-family:var(--body); }
h1, h2, h3, .resource strong, .footer-brand, .stats strong, .marquee-track, .statement p, .quotes blockquote, .steps li b, .checks li b, .kick, .gauge strong, #tier, .tip b {
  font-family:var(--display);
  font-style:normal;
}
h1, h2, h3 { font-weight:500; letter-spacing:-.035em; line-height:1.02; }
em, h1 em, h2 em, h3 em { font-style:normal; font-weight:inherit; }
.resource strong { font-weight:500; letter-spacing:-.03em; line-height:1.05; }
.steps li b, .kick { font-style:normal; font-weight:500; }
.kick { font-size:17px; letter-spacing:-.01em; }
.marquee-track { font-weight:500; letter-spacing:-.02em; font-size:22px; }
.statement p { font-weight:500; letter-spacing:-.035em; line-height:1.08; font-size:34px; }
.stats strong { font-weight:500; letter-spacing:-.03em; }
.button { font-family:var(--body); font-weight:600; letter-spacing:0; }

/* sizes retuned for a wider sans than the old serif */
h2 { font-size:36px; }
section h2 { font-size:36px; }
.grid-title { font-size:34px; }
.glow-card h2 { font-size:34px; }
.resource-panel h2 { font-size:32px; }
.hero-copy h1 { font-size:40px; line-height:1.04; }
.resource strong { font-size:24px; }
.compact-card strong { font-size:20px; }
.steps h3 { font-size:22px; }
.gate h3 { font-size:24px; }
#q-title { font-size:24px; }
.about h2 { font-size:30px; }
.checks li b { font-size:20px; }
@media(max-width:680px) {
  h2, section h2 { font-size:32px; }
  .grid-title { font-size:30px; }
  .hero-copy h1 { font-size:35px; }
  .statement p { font-size:29px; }
  .resource strong { font-size:21px; }
  .compact-card strong { font-size:18px; }
  .about h2 { font-size:27px; }
}
@media(max-width:370px) { .hero-copy h1 { font-size:31px; } }

/* ---------- Header: readable by construction ---------- */
.hero { --ph:clamp(400px,118vw,600px); display:block; min-height:0; padding:0 0 30px; text-align:center; position:relative; }
.hero-photo { position:absolute; top:0; left:0; width:100%; height:var(--ph); object-fit:cover; object-position:50% 22%; }
.hero-shade { position:absolute; top:0; left:0; right:0; height:var(--ph); background:linear-gradient(180deg,#111111b3 0,#11111100 22%,#11111100 52%,#111111d9 82%,#111 100%); }
.hero-copy { position:relative; padding:calc(var(--ph) - 96px) 24px 0; margin:0; }
.hero-copy .kick { text-shadow:0 1px 14px #000; }
.hero-copy h1 { text-shadow:0 2px 24px #000a; }
.hero-copy .sub { color:#ececE6; }

/* ---------- POLIN logo ---------- */
.brand { position:absolute; top:22px; left:50%; transform:translateX(-50%); z-index:3; display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 9px; border-radius:999px; background:#111111b8; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid #ffffff2e; text-decoration:none; color:#fff; text-shadow:none; font-size:0; line-height:1; opacity:1 !important; }
.brand .mark, .footer-brand .mark { width:30px; height:30px; border-radius:50%; background:var(--lime); color:#111; display:grid; place-items:center; font:700 17px/1 var(--display); letter-spacing:-.04em; padding-bottom:1px; }
.brand .word, .footer-brand .word { font:700 21px/1 var(--display); letter-spacing:-.045em; text-transform:lowercase; color:#fff; }
.brand .word i, .footer-brand .word i { font-style:normal; color:var(--lime); }
.brand>span { margin:0; letter-spacing:-.045em; }
.share-button { top:24px; right:20px; width:40px; height:40px; background:#111111b8; border-color:#ffffff40; z-index:3; }
.footer-brand { display:inline-flex; align-items:center; gap:10px; font-size:0; text-decoration:none; }
.footer-brand .mark { width:36px; height:36px; font-size:20px; }
.footer-brand .word { font-size:28px; }
@media(max-width:680px) { .brand { top:18px; } .share-button { top:19px; right:16px; } .hero-copy { padding-inline:20px; } }

.hero-photo { -webkit-mask-image:linear-gradient(#000 68%,#0000 99%); mask-image:linear-gradient(#000 68%,#0000 99%); }
.hero-shade { height:calc(var(--ph) + 2px); }

/* refined P monogram */
.brand .mark, .footer-brand .mark { width:34px; height:34px; padding:0; background:var(--lime); color:#111; box-shadow:inset 0 0 0 1px #00000014; }
.footer-brand .mark { width:40px; height:40px; }
.mark svg { width:100%; height:100%; display:block; transform:translateX(1px); }
.brand { padding:7px 16px 7px 7px; gap:10px; }

/* P monogram v3: lighter stroke, open bowl, optically centred */
.mark svg { transform:translate(1.2px,.4px); }
.brand .mark { width:34px; height:34px; }

/* P. monogram v4: rounded square, P plus the brand dot */
.brand .mark, .footer-brand .mark { border-radius:11px; }
.brand .mark { width:36px; height:36px; }
.footer-brand .mark { width:42px; height:42px; border-radius:13px; }
.mark svg { transform:none; }
.brand { padding:6px 16px 6px 6px; }

/* back to circle mark (v3) */
.brand .mark, .footer-brand .mark { border-radius:50%; }
.brand .mark { width:34px; height:34px; }
.footer-brand .mark { width:40px; height:40px; }
.mark svg { transform:translate(1.2px,.4px); }
.brand { padding:7px 16px 7px 7px; }