/* =====================================================================
   Brizz4life — layout stylesheet
   Design system: minimal, midnight-navy + oxygen-cyan accent.
   Display: Space Grotesk · Body: Inter
   ===================================================================== */

:root {
  --ink:    #0B1B2B;   /* midnight — protection / depth */
  --navy:   #12365E;   /* brand blue — matches CTA buttons */
  --navy-2: #1B4C82;
  --breath: #2FB5C4;   /* oxygen cyan accent */
  --breath-d:#1F8C99;
  --paper:  #FBFBFA;   /* page background */
  --mist:   #EEF2F5;   /* light section background */
  --line:   #DCE3E8;
  --ink-70: #33485A;
  --muted:  #5A6B78;
  --white:  #FFFFFF;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -24px rgba(11,27,43,.45);
  --shadow-sm: 0 8px 20px -14px rgba(11,27,43,.4);

  --t: 0.28s cubic-bezier(.2,.7,.3,1);

  --ff-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--ff-display); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-family: var(--ff-display);
  font-size: .76rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--breath-d);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--breath); display:inline-block; }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: #DCE7EE; }
.lead { color: var(--muted); font-size: 1.06rem; max-width: 60ch; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lead { margin-inline: auto; }

.btn {
  --bg: var(--navy); --fg: #fff;
  font-family: var(--ff-display); font-weight: 600; font-size: .92rem;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .72em 1.4em; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  border: 1.5px solid var(--bg);
  transition: transform var(--t), background var(--t), box-shadow var(--t), border-color var(--t);
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn .ar { transition: transform var(--t); }
.btn:hover .ar { transform: translateX(3px); }
.btn--breath { --bg: var(--breath); --fg: #04222A; border-color: var(--breath); }
.btn--ghost { --bg: transparent; --fg: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); }
.btn--on-dark { --bg: transparent; --fg: #fff; border-color: rgba(255,255,255,.35); }
.btn--on-dark:hover { background: rgba(255,255,255,.08); border-color: #fff; }

.textlink {
  font-family: var(--ff-display); font-weight: 600; font-size: .9rem;
  color: var(--navy); display: inline-flex; align-items: center; gap: .45em;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: gap var(--t), border-color var(--t), color var(--t);
}
.textlink:hover { gap: .75em; border-color: var(--breath); color: var(--navy-2); }

/* =====================================================================
   Header
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,251,250,.82);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -20px rgba(11,27,43,.6); }
.nav {
  display: flex; align-items: center; gap: 1.5rem;
  height: 70px;
}
.brand { display: inline-flex; align-items: baseline; gap: .12em; font-family: var(--ff-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.02em; }
.brand .b { color: var(--ink); }
.brand .l { color: var(--breath-d); font-weight: 500; }
.brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--breath); align-self: center; margin: 0 .15em; }
.nav-links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-links a {
  font-family: var(--ff-display); font-size: .94rem; font-weight: 500; color: var(--ink-70);
  position: relative; padding-block: 6px; transition: color var(--t);
}
.nav-links a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--breath); transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { margin-left: .4rem; }
.nav-toggle { display: none; }

/* mobile nav */
.menu-btn {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--white); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.menu-btn span { width: 20px; height: 2px; background: var(--ink); transition: transform var(--t), opacity var(--t); }

@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-toggle:checked ~ .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .menu-btn span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu { display: none; }
  .nav-toggle:checked ~ .mobile-menu { display: block; }
}
.mobile-menu {
  display: none;
  border-top: 1px solid var(--line); background: var(--paper);
}
.mobile-menu .wrap { padding-block: 14px; }
.mobile-menu a {
  display: block; padding: 12px 4px; font-family: var(--ff-display); font-weight: 500;
  border-bottom: 1px solid var(--line); color: var(--ink-70);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .btn { margin-top: 14px; width: 100%; justify-content: center; }

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  position: relative; color: #EAF4F7; overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero::after { /* gradient veil */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(47,181,196,.16), transparent 55%),
    linear-gradient(180deg, rgba(11,27,43,.55) 0%, rgba(11,27,43,.82) 100%);
}
.hero .wrap { position: relative; padding-block: clamp(84px, 14vw, 168px); }
.hero__inner { max-width: 760px; }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem); line-height: .98; letter-spacing: -.025em;
  color: #fff; margin-top: 18px;
}
.hero h1 .accent { color: var(--breath); }
.hero__sub { margin-top: 22px; font-size: clamp(1.02rem, 2vw, 1.22rem); color: #C4D6E0; max-width: 54ch; }
.hero__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__meta { margin-top: 46px; display: flex; gap: clamp(20px,4vw,52px); flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; }
.hero__meta div { min-width: 0; }
.hero__meta .k { font-family: var(--ff-display); font-size: 1.9rem; font-weight: 600; color: #fff; }
.hero__meta .v { font-size: .86rem; color: #9DB7C9; letter-spacing: .02em; }
.hero__eyebrow { color: var(--breath); }
.hero__eyebrow::before { background: var(--breath); }

/* =====================================================================
   Scenario cards (two worlds)
   ===================================================================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

.scard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.scard__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.scard__media img { width:100%; height:100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.scard:hover .scard__media img { transform: scale(1.04); }
.scard__tag {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--ff-display); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(11,27,43,.72); color: #EAF4F7; padding: .4em .8em; border-radius: 999px; backdrop-filter: blur(4px);
}
.scard__body { padding: 26px clamp(22px,3vw,30px) 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.scard__body h3 { font-size: 1.5rem; }
.scard__body p { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.chip {
  font-size: .76rem; color: var(--ink-70); background: var(--mist);
  border: 1px solid var(--line); padding: .35em .7em; border-radius: 999px;
}
.scard__foot { margin-top: auto; padding-top: 8px; }

/* =====================================================================
   Product cards
   ===================================================================== */
.pcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pcard__media { aspect-ratio: 16/11; background: var(--mist); }
.pcard__media img { width:100%; height:100%; object-fit: cover; }
.pcard__body { padding: 24px clamp(20px,3vw,28px) 28px; display:flex; flex-direction:column; gap:10px; }
.pcard__body h3 { font-size: 1.3rem; }
.pcard__body p { color: var(--muted); font-size: .98rem; }
.pcard__body .btn { margin-top: 8px; align-self: flex-start; }

/* =====================================================================
   About
   ===================================================================== */
.about { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; }
@media (max-width: 880px) { .about { grid-template-columns: 1fr; } }
.about__collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.about__collage img { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); width: 100%; height: 100%; object-fit: cover; }
.about__collage .tall { grid-row: span 2; }
.about__text h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 14px; }
.about__text p { color: var(--muted); margin-top: 18px; }
.about__text .btn { margin-top: 26px; }

/* =====================================================================
   Article list (section pages)
   ===================================================================== */
.page-hero { background: var(--ink); color: #EAF4F7; position: relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; inset:0; background: radial-gradient(100% 120% at 90% -10%, rgba(47,181,196,.18), transparent 55%); }
.page-hero .wrap { position: relative; padding-block: clamp(64px, 10vw, 110px); }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); color: #fff; margin-top: 16px; max-width: 18ch; }
.page-hero p { color: #C4D6E0; margin-top: 18px; max-width: 60ch; }
.breadcrumb { font-size: .85rem; color: #9DB7C9; font-family: var(--ff-display); display:flex; gap:.5em; align-items:center; }
.breadcrumb a:hover { color:#fff; }

.keyword-strip { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 26px; }
.keyword-strip .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color:#Bcd6e2; }

.articles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px,3vw,30px); }
@media (max-width: 760px) { .articles { grid-template-columns: 1fr; } }
.acard { background: var(--white); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; transition: transform var(--t), box-shadow var(--t); }
.acard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.acard__media { aspect-ratio: 16/10; overflow:hidden; }
.acard__media img { width:100%; height:100%; object-fit:cover; transition: transform .6s; }
.acard:hover .acard__media img { transform: scale(1.04); }
.acard__body { padding: 22px clamp(20px,2.4vw,26px) 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.acard__meta { font-family: var(--ff-display); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color: var(--breath-d); }
.acard__body h3 { font-size: 1.22rem; }
.acard__body p { color: var(--muted); font-size:.96rem; }
.acard__body .textlink { margin-top:auto; padding-top: 6px; }

/* =====================================================================
   Article (single)
   ===================================================================== */
.article { max-width: 760px; margin-inline:auto; }
.article__hero { aspect-ratio: 21/9; border-radius: var(--radius); overflow:hidden; margin-bottom: 36px; box-shadow: var(--shadow); }
.article__hero img { width:100%; height:100%; object-fit:cover; }
.prose { font-size: 1.08rem; color: var(--ink-70); }
.prose h2 { font-size: 1.6rem; color: var(--ink); margin-top: 2em; margin-bottom: .5em; }
.prose h3 { font-size: 1.22rem; color: var(--ink); margin-top: 1.6em; margin-bottom: .4em; }
.prose p { margin-top: 1em; }
.prose ul { margin-top: 1em; display: grid; gap: .5em; }
.prose ul li { position: relative; padding-left: 1.5em; }
.prose ul li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background: var(--breath); }
.prose strong { color: var(--ink); }
.prose blockquote {
  margin: 1.8em 0; padding: 1em 1.4em; border-left: 3px solid var(--breath);
  background: var(--mist); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-70); font-style: italic;
}

/* =====================================================================
   Contacts
   ===================================================================== */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items:start; }
@media (max-width: 820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list { display:grid; gap: 22px; }
.contact-item { display:flex; gap:16px; align-items:flex-start; }
.contact-item .ic { flex:0 0 44px; height:44px; border-radius:12px; background: var(--mist); border:1px solid var(--line); display:grid; place-items:center; color: var(--navy); }
.contact-item .k { font-family: var(--ff-display); font-weight:600; }
.contact-item .v { color: var(--muted); font-size:.98rem; }
.form { display:grid; gap: 16px; background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(22px,3vw,32px); }
.field { display:grid; gap:6px; }
.field label { font-family: var(--ff-display); font-size:.84rem; font-weight:600; color: var(--ink-70); }
.field input, .field textarea {
  font-family: var(--ff-body); font-size:1rem; color: var(--ink);
  border:1.5px solid var(--line); border-radius: 10px; padding: .7em .9em; background: var(--paper);
  transition: border-color var(--t), box-shadow var(--t);
}
.field input:focus, .field textarea:focus { outline:none; border-color: var(--breath); box-shadow: 0 0 0 3px rgba(47,181,196,.18); }
.field textarea { resize: vertical; min-height: 120px; }
.form .btn { justify-self:start; }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background: var(--ink); color: #AEC3D1; padding-block: clamp(48px,7vw,76px) 28px; }
.footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(24px,4vw,48px); }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand .brand .b { color:#fff; }
.footer-brand .brand .l { color: var(--breath); }
.footer-brand p { margin-top:14px; color:#8FA8B8; font-size:.95rem; max-width: 34ch; }
.footer-col h4 { font-family: var(--ff-display); font-size:.8rem; text-transform:uppercase; letter-spacing:.16em; color:#fff; margin-bottom: 16px; }
.footer-col a { display:block; padding: 7px 0; color:#AEC3D1; font-size:.95rem; transition: color var(--t); }
.footer-col a:hover { color: var(--breath); }
.footer-shop { background: rgba(47,181,196,.08); border:1px solid rgba(47,181,196,.25); border-radius: var(--radius); padding: 22px; }
.footer-shop h4 { color:#fff; }
.footer-shop p { color:#9FBAC8; font-size:.92rem; margin-bottom:16px; }
.footer-bottom {
  margin-top: clamp(36px,5vw,56px); padding-top: 22px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap: 16px; flex-wrap:wrap; font-size:.85rem; color:#7E97A7;
}

/* =====================================================================
   Scroll reveal
   ===================================================================== */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js .reveal { opacity:1; transform:none; } }

/* skip link */
.skip { position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100; }
.skip:focus { left:0; }