/* ============================================================
   SAINT EIR — Design System
   Brand: DRINI GmbH
   ============================================================ */

:root{
  /* — Brand palette — */
  --cream:        #F5E8DD;   /* page background (blush) */
  --cream-50:     #FBF5EF;   /* lightest panel */
  --cream-100:    #F8EFE6;
  --cream-200:    #EEDDCE;   /* deeper blush */
  --cream-300:    #E4CDB9;

  --sage:         #93A87E;   /* primary green */
  --sage-600:     #7B9166;
  --sage-700:     #677C54;
  --sage-200:     #C8D4B9;
  --sage-100:     #DEE6D2;
  --sage-50:      #EDF1E5;

  --forest:       #2D3F31;   /* deep forest */
  --forest-800:   #243325;
  --forest-900:   #1B271D;

  --gold:         #C0904F;   /* logo gold */
  --gold-600:     #AC7E40;
  --gold-soft:    #D7B488;

  --ink:          #2B2925;   /* near-black warm */
  --muted:        #6E6A62;   /* body muted */
  --muted-2:      #908A80;
  --line:         #E2D2C2;   /* hairline on cream */
  --line-soft:    #EADDD0;

  /* — Type — */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* — Metrics — */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 80px);
  --radius: 14px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(45,63,49,.06);
  --shadow:    0 18px 50px -22px rgba(45,63,49,.30);
  --shadow-lg: 0 40px 90px -40px rgba(45,63,49,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--sage-200); color:var(--forest-900); }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:880px; margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,9vw,128px); }
.section-sm{ padding-block:clamp(44px,6vw,80px); }
.center{ text-align:center; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ margin:0; font-weight:400; color:var(--forest); letter-spacing:-.01em; }
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.13;
  letter-spacing:-.015em;
  font-size:clamp(44px,7vw,86px);
  color:var(--forest);
  text-wrap:pretty;
}
.h2{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.14;
  font-size:clamp(32px,4.4vw,54px);
  letter-spacing:-.012em;
  text-wrap:balance;
}
.h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.12;
}
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-600);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--gold);
  opacity:.7;
}
.eyebrow.no-rule::before{ display:none; }
.lead{
  font-size:clamp(18px,1.7vw,21px);
  line-height:1.6;
  color:var(--muted);
  font-weight:400;
}
.serif-em{ font-family:var(--serif); font-style:italic; font-weight:500; color:var(--gold-600); }
p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

/* ---------- Wordmark ---------- */
.wordmark{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--gold);
  line-height:1;
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
}
.wordmark .leaf{
  width:.46em; height:.46em; margin:0 .02em;
  align-self:center;
  position:relative; top:-.16em;
}
.wordmark.on-dark{ color:var(--gold-soft); }
.wordmark.green{ color:var(--sage-600); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:15px;
  letter-spacing:.01em;
  padding:14px 26px;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  line-height:1; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--forest); color:var(--cream-50); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--forest-800); box-shadow:var(--shadow); }
.btn-gold{ background:var(--gold); color:#fff; }
.btn-gold:hover{ background:var(--gold-600); }
.btn-ghost{ background:transparent; color:var(--forest); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--sage); background:var(--cream-50); }
.btn-light{ background:var(--cream-50); color:var(--forest); }
.btn-light:hover{ background:#fff; }
.btn-sm{ padding:10px 18px; font-size:13.5px; }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }

/* ---------- Chips / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  padding:7px 14px; border-radius:999px;
  background:var(--sage-50); color:var(--sage-700);
  font-size:13px; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--sage-100);
}
.pill-cream{ background:#fff; color:var(--forest); border-color:var(--line-soft); }

/* ---------- Cards ---------- */
.card{
  background:var(--cream-50);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:34px;
}

/* ---------- Hairline divider ---------- */
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Pharmacy logos ---------- */
.shoplogo{ width:auto; display:block; flex:none; }
.shoplogo.sl-sa{ height:14px; }
.shoplogo.sl-dm{ height:14px; }
.shoplogo.sl-mp{ height:18px; }

/* ---------- Photo placeholders (brief for photographer / Firefly) ---------- */
.photo-slot{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(123,145,102,.06) 13px 14px),
    linear-gradient(160deg, var(--sage-50), var(--cream-200));
  border:1px solid var(--line-soft);
  color:var(--sage-700);
}
.photo-slot .ps-inner{ padding:26px; max-width:80%; }
.photo-slot .ps-ic{ width:42px; height:42px; margin:0 auto 14px; opacity:.65; }
.photo-slot .ps-label{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:12px; letter-spacing:.01em; line-height:1.45; color:var(--sage-700);
  background:rgba(255,255,255,.62); border:1px solid var(--sage-100);
  padding:8px 13px; border-radius:12px; display:inline-block;
}
.photo-slot .ps-sub{
  margin-top:9px; font-family:ui-monospace, Menlo, monospace; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2);
}
.photo-slot.on-dark{
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(255,255,255,.04) 13px 14px),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.16); color:var(--cream-100);
}
.photo-slot.on-dark .ps-label{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:var(--cream-50); }
.photo-slot.on-dark .ps-sub{ color:color-mix(in srgb,var(--cream-100) 55%, transparent); }

/* filled photos (real images in the slot positions) */
.photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--cream-200); border:1px solid var(--line-soft); }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo.on-dark{ border-color:rgba(255,255,255,.14); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, #fff 88%, transparent);
  backdrop-filter:saturate(1.2) blur(14px);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{ border-bottom-color:var(--line); background:color-mix(in srgb, #fff 96%, transparent); }
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo{ font-size:27px; display:inline-flex; align-items:center; }
.logo-img{ display:block; width:auto; }
.nav-logo .logo-img{ height:24px; }
.foot-brand .logo-img{ height:30px; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--ink);
  padding:9px 15px; border-radius:999px;
  transition:background .2s, color .2s; position:relative;
}
.nav-links a:hover{ color:var(--forest); background:color-mix(in srgb, var(--sage-50) 70%, transparent); }
.nav-links a.active{ color:var(--forest); }
.nav-links a.active::after{
  content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--gold);
}
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-cta{ }
.nav-burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--cream-50); align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.nav-burger span{ width:18px; height:1.6px; background:var(--forest); border-radius:2px; transition:.25s; }
.nav-burger.open span:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }

.mobile-menu{
  display:none; position:fixed; inset:74px 0 auto 0; z-index:55;
  background:#fff; border-bottom:1px solid var(--line);
  padding:14px var(--gut) 26px; flex-direction:column; gap:4px;
  transform:translateY(-12px); opacity:0; pointer-events:none; transition:.28s var(--ease);
}
.mobile-menu.open{ transform:translateZ(0); opacity:1; pointer-events:auto; }
.mobile-menu a.btn-primary{ color:var(--cream-50); }
body:has(.mobile-menu.open) .hero-video{ visibility:hidden; }
.mobile-menu a{ padding:14px 4px; font-size:18px; font-family:var(--serif); color:var(--forest); border-bottom:1px solid var(--line-soft); }
.mobile-menu a:last-of-type{ border-bottom:0; }
.mobile-menu .btn{ margin-top:14px; }

@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .mobile-menu{ display:flex; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--forest); color:var(--cream-100); padding-block:clamp(56px,7vw,86px) 30px; }
.foot a{ color:color-mix(in srgb, var(--cream-100) 80%, transparent); transition:color .2s; }
.foot a:hover{ color:#fff; }
.foot-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; }
.foot-brand .wordmark{ font-size:30px; }
.foot-brand p{ color:color-mix(in srgb,var(--cream-100) 66%, transparent); font-size:14.5px; max-width:30ch; margin-top:16px; }
.foot-col h4{ color:var(--cream-50); font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; opacity:.7; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot-col ul li a{ font-size:14.5px; }
.foot-shops{ display:flex; flex-direction:column; gap:10px; }
.foot-shop{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 15px; border:1px solid rgba(255,255,255,.14); border-radius:12px; font-size:13.5px; font-weight:600; color:var(--cream-50); transition:.22s; }
.foot-shop:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); transform:translateY(-1px); }
.foot-shop .arr{ opacity:.5; }
.foot-bottom{ margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot-bottom p{ font-size:13px; color:color-mix(in srgb,var(--cream-100) 55%, transparent); }
.foot-legal-links{ display:flex; gap:20px; flex-wrap:wrap; }
.foot-legal-links a{ font-size:13px; }
.foot-disc{ margin-top:18px; font-size:12px; color:color-mix(in srgb,var(--cream-100) 42%, transparent); max-width:80ch; line-height:1.55; }
@media (max-width:880px){
  .foot-top{ grid-template-columns:1fr 1fr; gap:34px; }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){ .foot-top{ grid-template-columns:1fr; } }

/* ============================================================
   Reusable section bits
   ============================================================ */
.section-head{ max-width:720px; }
.section-head.center{ margin-inline:auto; }
.section-head .h2{ margin-top:16px; }
.section-head .lead{ margin-top:18px; }

/* feature grid */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; }
@media (max-width:820px){ .feat-grid{ grid-template-columns:1fr; gap:16px; } }
.feat{
  background:var(--cream-50); border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); padding:32px 30px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.feat:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--sage-100); }
.feat-ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--sage-50); color:var(--sage-700); margin-bottom:20px; border:1px solid var(--sage-100); }
.feat-ic svg{ width:24px; height:24px; }
.feat h3{ font-family:var(--serif); font-size:23px; font-weight:600; color:var(--forest); margin-bottom:8px; }
.feat p{ font-size:15px; color:var(--muted); }

/* badge row */
.badge-row{ display:flex; flex-wrap:wrap; gap:12px; }
.badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px; border-radius:999px; background:#fff;
  border:1px solid var(--line-soft); font-size:13.5px; font-weight:600; color:var(--forest);
}
.badge svg{ width:17px; height:17px; color:var(--sage-600); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* utility */
.mt-0{ margin-top:0; } .mt-s{ margin-top:14px; } .mt-m{ margin-top:26px; } .mt-l{ margin-top:40px; }
.flex{ display:flex; } .gap-s{ gap:10px; } .gap-m{ gap:18px; } .wrap-flex{ flex-wrap:wrap; }
.items-center{ align-items:center; }