/* ============================================================
   Rx-Vet — rx-vet.com
   Tokens → base → components → sections → responsive
   ============================================================ */

:root{
  /* Brand palette */
  --olive:      #4B4D42;
  --olive-dk:   #3C3E35;
  --sage:       #9CA289;
  --sage-lt:    #B6BBA7;
  --sage-tint:  #EEF0E9;
  --orange:     #F29529;
  --orange-dk:  #D97F16;
  --cream:      #E1DAC3;
  --cream-lt:   #F3EFE4;
  --ink:        #272823;
  --ink-2:      #55584E;
  --ink-3:      #7C8074;
  --paper:      #FFFFFF;
  --line:       #E4E4DE;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Rhythm */
  --wrap: 1200px;
  --gut: 24px;
  --sp-section: 96px;
  --r-sm: 4px;
  --r-md: 6px;
  --shadow-card: 0 1px 2px rgba(39,40,35,.06), 0 12px 28px -18px rgba(39,40,35,.35);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); margin:0; line-height:1.12; letter-spacing:-.02em; font-weight:700; }
p{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }

/* Inline icons: stroked line-art */
svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ico{ width:16px; height:16px; flex:none; }
.ico--orange{ color:var(--orange); }
.arw{ display:inline-block; transition:transform .25s ease; }

/* ============================================================
   Utility bar
   ============================================================ */
.utility{ background:var(--ink); color:#CFD2C6; font-size:13px; }
.utility__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; flex-wrap:wrap; }
.utility__tag{ display:flex; align-items:center; gap:8px; color:#CFD2C6; }
.utility__tag .ico{ color:var(--sage); }
.utility__links{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.utility__links a{ display:flex; align-items:center; gap:8px; color:#EDEEE8; transition:color .2s ease; }
.utility__links a:hover{ color:var(--orange); }

/* ============================================================
   Header + nav
   ============================================================ */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.header.is-stuck{ box-shadow:0 6px 24px -18px rgba(39,40,35,.6); border-bottom-color:var(--line); }
.header__row{ display:flex; align-items:center; gap:18px; padding-block:20px; }

.brand img{ width:auto; height:112px; transition:height .25s ease; }
.header.is-stuck .brand img{ height:86px; }

.nav{ display:flex; align-items:center; margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:2px; }
.nav__list > li > a,
.nav__toggle{
  display:flex; align-items:center; gap:5px;
  padding:9px 10px; white-space:nowrap;
  font-family:var(--display); font-weight:600; font-size:12px;
  letter-spacing:.045em; text-transform:uppercase; color:var(--ink);
  border-radius:var(--r-sm);
  transition:color .2s ease, background-color .2s ease;
}
.nav__list > li > a:hover,
.nav__toggle:hover{ color:var(--olive); background:var(--sage-tint); }
.chev{ width:14px; height:14px; stroke-width:2; }

.has-menu{ position:relative; }
.submenu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:238px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-menu:hover .submenu,
.has-menu:focus-within .submenu,
.has-menu.is-open .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu a{
  display:block; padding:9px 12px; border-radius:var(--r-sm);
  font-size:14.5px; color:var(--ink-2); border-left:2px solid transparent;
}
.submenu a:hover{ background:var(--sage-tint); color:var(--ink); border-left-color:var(--sage); }

.nav > .nav__cta{ display:none; }
.header__cta{ margin-left:14px; padding:12px 18px; font-size:11.5px; white-space:nowrap; }

.burger{ display:none; width:44px; height:44px; margin-left:auto; padding:10px; }
.burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 24px;
  font-family:var(--display); font-weight:600; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--r-sm); border:1.5px solid transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover .arw{ transform:translateX(4px); }
.btn--sage{ background:var(--sage); color:#fff; }
.btn--sage:hover{ background:var(--olive); }
.btn--olive{ background:var(--olive); color:#fff; }
.btn--olive:hover{ background:var(--ink); }
.btn--orange{ background:var(--orange); color:#fff; }
.btn--orange:hover{ background:var(--orange-dk); }
.btn--ghost{ background:var(--paper); color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--olive); background:var(--sage-tint); }
.btn--outline-orange{ color:var(--orange); border-color:var(--orange); background:transparent; }
.btn--outline-orange:hover{ background:var(--orange); color:#fff; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:600; font-size:13px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--olive);
}
.link-arrow:hover{ color:var(--orange); }
.link-arrow:hover .arw{ transform:translateX(4px); }
.link-arrow.sm{ font-size:12px; }

.eyebrow{
  font-family:var(--display); font-weight:600; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage);
  margin-bottom:14px;
}

/* ============================================================
   Image placeholders (until real photography is dropped in)
   ============================================================ */
.is-empty{
  background-color:var(--sage-tint);
  background-image:
    linear-gradient(135deg, rgba(156,162,137,.28), rgba(75,77,66,.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%239CA289' fill-opacity='.32'%3E%3Cpath d='M32 20l6 6 6-6 4 4-6 6 6 6-4 4-6-6-6 6-4-4 6-6-6-6z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto, 64px 64px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; background:var(--paper); overflow:hidden; }
.hero__media{
  position:absolute; inset:0 0 0 50%;
  overflow:hidden; background:var(--sage);
}
.hero__media img,
.hero__media.is-empty::after{
  width:100%; height:100%; object-fit:cover;
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}
.hero__media.is-empty{ background-image:none; }
.hero__media.is-empty::after{
  content:""; position:absolute; inset:0; display:block;
  background-color:var(--sage-tint);
  background-image:
    linear-gradient(135deg, rgba(156,162,137,.30), rgba(75,77,66,.16)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%239CA289' fill-opacity='.28'%3E%3Cpath d='M36 24l6 6 6-6 4 4-6 6 6 6-4 4-6-6-6 6-4-4 6-6-6-6z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto, 72px 72px;
}
.hero__wedge{ display:none; }
.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) 46%;
  padding-block:80px 0;
}
.hero__copy{ max-width:560px; grid-column:1; }
.hero h1{ text-wrap:balance; }

.hero h1{
  font-size:clamp(2.1rem, 3.9vw, 3.15rem);
  line-height:1.08;
}
.hero h1 .ln{ display:block; }
.hero h1 em{ font-style:normal; color:var(--sage); }
.lede{ margin-top:22px; font-size:17px; max-width:470px; color:var(--ink-2); }
.hero__actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.pillars{
  grid-column:1;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0; margin-top:70px; max-width:560px;
  padding-block:30px 78px;
}
.pillars li{ padding-inline:20px; border-left:1px solid var(--line); }
.pillars li:first-child{ padding-left:0; border-left:0; }
.pillar__ico{ width:30px; height:30px; color:var(--olive); margin-bottom:14px; }
.pillars h3{ font-size:13.5px; letter-spacing:.01em; margin-bottom:6px; }
.pillars p{ font-size:12.5px; line-height:1.5; color:var(--ink-3); }

/* ============================================================
   Delivery strip
   ============================================================ */
.strip{ background:var(--cream-lt); border-block:1px solid rgba(75,77,66,.09); }
.strip__row{ display:flex; align-items:center; gap:28px; padding-block:30px; flex-wrap:wrap; }
.strip__ico{ width:52px; height:40px; color:var(--orange); flex:none; }
.strip__text{ flex:1 1 320px; }
.strip h2{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); }
.strip p{ margin-top:6px; font-size:15px; }

/* ============================================================
   Who we serve
   ============================================================ */
.serve{ padding-block:var(--sp-section); }
.serve__grid{ display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start; }
.serve__intro h2{ font-size:clamp(1.7rem, 2.6vw, 2.1rem); }
.rule{ display:block; width:46px; height:3px; background:var(--orange); margin:22px 0; }
.serve__intro p{ font-size:15.5px; }
.serve__intro .link-arrow{ margin-top:26px; }

.cards{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; }
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-5px); border-color:var(--sage); box-shadow:0 22px 40px -26px rgba(39,40,35,.55); }
.card__media{ position:relative; margin:0; aspect-ratio:4/3; overflow:visible; }
.card__media img{ border-radius:5px 5px 0 0; }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__badge{
  position:absolute; left:50%; bottom:-27px; transform:translateX(-50%); z-index:3;
  width:54px; height:54px; border-radius:50%;
  background:var(--sage); border:3px solid var(--paper);
  display:grid; place-items:center; color:#fff;
}
.card__badge svg{ width:28px; height:28px; }
.card__body{ padding:40px 20px 24px; text-align:center; }
.card__body h3{ font-size:17px; }
.card__body p{ margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--ink-3); min-height:42px; }
.card__body .link-arrow{ margin-top:16px; }

/* ============================================================
   Stats band
   ============================================================ */
.band{ background:var(--olive-dk); color:#E7E9E0; }
.band__row{ display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; padding-block:40px; }
.stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); }
.stats li{ display:flex; align-items:center; gap:14px; padding-inline:22px; border-left:1px solid rgba(255,255,255,.16); }
.stats li:first-child{ padding-left:0; border-left:0; }
.stats__ico{ width:50px; height:50px; border-radius:50%; background:var(--sage); display:grid; place-items:center; color:#fff; flex:none; }
.stats__ico--orange{ background:var(--orange); }
.stats__ico svg{ width:24px; height:24px; }
.stats strong{ display:block; font-family:var(--display); font-size:22px; color:#fff; line-height:1.15; }
.stats span{ display:block; font-size:12.5px; line-height:1.35; color:#C3C8B8; max-width:110px; }

.band__cta{ border-left:1px solid rgba(255,255,255,.16); padding-left:48px; text-align:left; }
.band__cta h2{ color:#fff; font-size:20px; margin-bottom:16px; }
.band__cta p{ margin-top:12px; font-size:13.5px; color:#C3C8B8; }
.band__cta p a{ color:#fff; font-weight:600; }
.band__cta p a:hover{ color:var(--orange); }

/* ============================================================
   Partners
   ============================================================ */
.partners{ background:var(--cream-lt); padding-block:52px; }
.partners__head{ display:flex; align-items:center; gap:24px; }
.partners__head h2{ font-size:19px; white-space:nowrap; }
.hairline{ flex:1; height:1px; background:rgba(75,77,66,.22); }
.partners__list{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
  gap:18px; margin-top:34px; align-items:center;
}
.partners__list li{
  display:flex; align-items:center; justify-content:center;
  min-height:64px; padding:12px 10px; border-radius:var(--r-sm);
  transition:background-color .2s ease;
}
.partners__list li:hover{ background:rgba(255,255,255,.75); }
.partners__list img{
  max-height:38px; max-width:100%; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.55;
  transition:opacity .25s ease;
}
.partners__list li:hover img{ opacity:.9; }
.partners__list span{
  font-family:var(--display); font-weight:600; font-size:14.5px; line-height:1.25;
  color:#8B8E85; text-align:center; letter-spacing:-.01em;
  transition:color .2s ease;
}
.partners__list li:hover span{ color:var(--olive); }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--paper); border-top:1px solid var(--line); }
.footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1.3fr;
  gap:34px; padding-block:56px;
}
.footer__brand img{ height:72px; width:auto; }
.footer__brand p{ margin-top:18px; font-size:13.5px; color:var(--ink-3); max-width:230px; }
.footer__col h3{
  font-size:12.5px; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:18px;
}
.footer__col li + li{ margin-top:11px; }
.footer__col a, .footer__col span{ font-size:14px; color:var(--ink-2); transition:color .2s ease; }
.footer__col a:hover{ color:var(--orange); }
.footer__contact li{ display:flex; }
.footer__contact a, .footer__contact span{ display:flex; align-items:center; gap:10px; }
.socials{ display:flex; gap:10px; margin-top:22px; }
.socials a{
  width:36px; height:36px; border-radius:50%; background:var(--sage);
  display:grid; place-items:center; color:#fff;
  transition:background-color .2s ease, transform .2s ease;
}
.socials a:hover{ background:var(--olive); transform:translateY(-2px); }
.socials svg{ width:18px; height:18px; }

.footer__bar{ background:var(--ink); color:#A9AD9F; }
.footer__barrow{ display:flex; justify-content:space-between; gap:16px; padding-block:16px; font-size:12.5px; flex-wrap:wrap; }
.footer__barrow a{ color:#A9AD9F; }
.footer__barrow a:hover{ color:var(--orange); }
.footer__barrow span{ margin-inline:12px; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  :root{ --sp-section:72px; }
  .serve__grid{ grid-template-columns:1fr; gap:36px; }
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .band__row{ grid-template-columns:1fr; gap:32px; }
  .band__cta{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.16); padding-top:28px; }
  .partners__list{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .footer__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width:960px){
  .header__row{ gap:14px; }
  .header__cta{ display:none; }
  .burger{ display:block; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-top:1px solid var(--line);
    box-shadow:0 18px 30px -22px rgba(39,40,35,.6);
    flex-direction:column; align-items:stretch; gap:0;
    padding:14px var(--gut) 26px;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__list > li{ border-bottom:1px solid var(--line); }
  .nav__list > li > a, .nav__toggle{ width:100%; padding:15px 4px; justify-content:space-between; }
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-radius:0; padding:0 0 10px 10px;
    display:none;
  }
  .has-menu.is-open .submenu{ display:block; }
  .has-menu:hover .submenu{ display:none; }
  .has-menu.is-open:hover .submenu{ display:block; }
  .nav__toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  .nav > .nav__cta{ display:inline-flex; justify-content:center; margin-top:20px; }

  .hero{ display:flex; flex-direction:column; }
  .hero__media{ position:relative; inset:auto; order:2; height:300px; }
  .hero__media img, .hero__media.is-empty::after{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 12%); }
  .hero__inner{ order:1; display:block; padding-block:52px 0; }
  .hero__copy{ max-width:none; }
  .hero h1 .ln{ display:inline; }
  .pillars{ margin-top:44px; padding-block:28px 56px; max-width:none; grid-template-columns:repeat(2,1fr); gap:26px 0; }
  .pillars li:nth-child(odd){ padding-left:0; border-left:0; }
}

@media (max-width:720px){
  :root{ --sp-section:60px; --gut:20px; }
  .utility__row{ justify-content:center; padding-block:8px; }
  .utility__tag{ display:none; }
  .utility__links{ gap:16px; font-size:12px; }
  .strip__row{ gap:18px; }
  .strip__ico{ width:40px; height:32px; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:26px 0; }
  .stats li:nth-child(odd){ padding-left:0; border-left:0; }
  .partners__head{ flex-wrap:wrap; gap:14px; }
  .partners__head h2{ white-space:normal; }
  .hairline{ display:none; }
  .partners__list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .footer__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px; padding-block:44px; }
}

@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .card__body p{ min-height:0; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__barrow{ justify-content:center; text-align:center; }
}

/* Header sizing on small screens */
@media (max-width:720px){
  .brand img{ height:74px; }
  .header.is-stuck .brand img{ height:62px; }
  .header__row{ padding-block:12px; }
}

/* ============================================================
   Interior pages (about, etc.)
   ============================================================ */
.page-hero{ position:relative; background:var(--ink); overflow:hidden; }
.page-hero__media{ position:absolute; inset:0; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,21,18,.10) 0%, rgba(20,21,18,.30) 50%, rgba(20,21,18,.62) 100%);
}
.page-hero__inner{ position:relative; z-index:2; padding-block:150px 56px; }
.page-hero .eyebrow{ color:var(--sage-lt); text-shadow:0 1px 10px rgba(15,16,13,.6); }
.page-hero h1{ color:#fff; font-size:clamp(2.1rem, 4.2vw, 3.1rem); max-width:16ch; text-shadow:0 2px 18px rgba(15,16,13,.55); }
.page-hero p{ margin-top:18px; color:#E4E6DD; font-size:17px; max-width:56ch; text-shadow:0 1px 12px rgba(15,16,13,.6); }

.section{ padding-block:var(--sp-section); }
.section--tint{ background:var(--cream-lt); }
.prose{ max-width:70ch; }
.prose p{ font-size:17.5px; line-height:1.75; }
.prose p + p{ margin-top:22px; }
.prose .first{ font-size:20px; color:var(--ink); }

.markets{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; margin-top:44px; }
.market{
  border:1px solid var(--line); border-left:3px solid var(--sage);
  border-radius:var(--r-md); padding:24px 22px; background:var(--paper);
  transition:border-left-color .25s ease, transform .25s ease;
}
.market:hover{ border-left-color:var(--orange); transform:translateY(-3px); }
.market h3{ font-size:16px; margin-bottom:8px; }
.market p{ font-size:13.5px; color:var(--ink-3); line-height:1.55; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split__media{ border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-card); }
.split__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }
.split h2{ font-size:clamp(1.6rem, 2.5vw, 2rem); }
.split .rule{ margin:20px 0; }
.split p{ font-size:16.5px; line-height:1.72; }
.badge-soft{
  display:inline-block; margin-bottom:16px; padding:6px 14px;
  border-radius:100px; background:var(--sage-tint); color:var(--olive);
  font-family:var(--display); font-weight:600; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase;
}

@media (max-width:1080px){
  .markets{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .split{ grid-template-columns:1fr; gap:34px; }
  .page-hero__inner{ padding-block:120px 44px; }
}
@media (max-width:560px){
  .markets{ grid-template-columns:1fr; }
  .page-hero__inner{ padding-block:100px 36px; }
}

/* ============================================================
   Video hero + solutions page
   ============================================================ */
.video-hero{ position:relative; background:var(--ink); overflow:hidden; min-height:520px; display:flex; align-items:flex-end; }
.video-hero video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
}
.video-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,21,18,.28) 0%, rgba(20,21,18,.40) 45%, rgba(20,21,18,.78) 100%);
}
.video-hero__inner{ position:relative; z-index:2; width:100%; padding-block:170px 60px; }
.video-hero .eyebrow{ color:var(--sage-lt); text-shadow:0 1px 10px rgba(15,16,13,.6); }
.video-hero h1{
  color:#fff; font-size:clamp(2.1rem, 4.2vw, 3.1rem); max-width:18ch;
  text-shadow:0 2px 18px rgba(15,16,13,.6);
}
.video-hero p{
  margin-top:18px; color:#E4E6DD; font-size:17px; max-width:58ch;
  text-shadow:0 1px 12px rgba(15,16,13,.65);
}

/* Pillar grid — portfolio + markets */
.tiles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; margin-top:44px; }
.tile{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 22px; transition:transform .25s ease, box-shadow .25s ease;
}
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.tile__ico{ width:30px; height:30px; color:var(--olive); margin-bottom:16px; }
.tile h3{ font-size:16px; margin-bottom:8px; }
.tile p{ font-size:13.5px; color:var(--ink-3); line-height:1.55; }

/* Closing statement */
.statement{ background:var(--olive-dk); color:#E7E9E0; }
.statement__inner{ padding-block:72px; max-width:64ch; }
.statement .eyebrow{ color:var(--sage-lt); }
.statement p{ font-size:19px; line-height:1.7; color:#EDEFE6; }
.statement p strong{ color:#fff; font-weight:600; }

@media (max-width:1080px){
  .tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .video-hero{ min-height:440px; }
  .video-hero__inner{ padding-block:130px 48px; }
}
@media (max-width:560px){
  .tiles{ grid-template-columns:1fr; }
  .video-hero__inner{ padding-block:110px 40px; }
  .statement__inner{ padding-block:56px; }
}

/* ============================================================
   Sales presence map
   ============================================================ */
.presence__head{ max-width:62ch; }
.presence__map{ margin-top:28px; }
.presence__map img{ width:100%; height:auto; display:block; }
.presence__legend{
  display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:26px;
  justify-content:center;
}
.presence__legend li{
  display:flex; align-items:center; gap:9px;
  padding:9px 16px; border:1px solid var(--line); border-radius:100px;
  background:var(--paper);
  font-family:var(--display); font-weight:600; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--olive);
}
.presence__legend svg{ width:15px; height:15px; flex:none; color:#A8C19F; }
.presence__legend svg path{ fill:currentColor; stroke:none; }
.presence__note{ margin-top:20px; text-align:center; font-size:14px; color:var(--ink-3); }
@media (max-width:560px){
  .presence__legend li{ padding:8px 13px; font-size:11.5px; }
}

/* ============================================================
   Contact page
   ============================================================ */
.contact__grid{ --map-h:440px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start; margin-top:28px; }

.contact__card{
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--sage);
  border-radius:var(--r-md); padding:32px 30px; box-shadow:var(--shadow-card);
}
.contact__card h3{ font-size:17px; margin-bottom:4px; }
.contact__addr{ font-style:normal; margin-top:14px; font-size:16px; line-height:1.7; color:var(--ink-2); }
.contact__rows{ margin-top:24px; border-top:1px solid var(--line); padding-top:22px; }
.contact__rows li + li{ margin-top:16px; }
.contact__rows a, .contact__rows span{ display:flex; align-items:flex-start; gap:12px; font-size:15.5px; color:var(--ink-2); }
.contact__rows a:hover{ color:var(--orange); }
.contact__rows .ico{ width:18px; height:18px; margin-top:3px; }
.contact__rows small{
  display:block; font-family:var(--display); font-weight:600; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px;
}
.contact__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* Google map, tinted to sit on the cream section background */
.map-frame{
  position:relative; isolation:isolate;
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(75,77,66,.16);
  background:var(--cream-lt);
}
.map-frame iframe{
  display:block; width:100%; height:var(--map-h); border:0;
  filter:grayscale(1) contrast(.88) brightness(1.12);
}
/* recolours the map to the cream hue while keeping its luminance */
.map-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:var(--cream-lt);
  mix-blend-mode:color;
}
/* softens it into the section so it reads as one surface */
.map-frame::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:var(--cream-lt); opacity:.22;
}
.contact__head{ max-width:60ch; }
.contact__mapcol{ display:flex; flex-direction:column; }
.map-note{ margin-top:14px; font-size:13.5px; color:var(--ink-3); }
.map-note a{ color:var(--olive); font-weight:600; }
.map-note a:hover{ color:var(--orange); }

@media (max-width:1080px){
  .contact__grid{ grid-template-columns:1fr; gap:36px; }
  .map-frame iframe{ height:380px; }
}
@media (max-width:560px){
  .contact__card{ padding:26px 22px; }
  .map-frame iframe{ height:320px; }
  .contact__actions .btn{ width:100%; justify-content:center; }
}

/* ---- Contact card: logo lockup, matched to the map's height ---- */
.contact__logo{ display:block; align-self:flex-start; flex:0 0 auto; width:auto; height:74px; max-width:60%; object-fit:contain; margin-bottom:8px; }
.contact__card{
  height:var(--map-h); display:flex; flex-direction:column;
}
.contact__card .contact__addr{ margin-top:10px; }
.contact__card .contact__actions{ margin-top:auto; }
@media (max-width:1080px){
  .contact__grid{ --map-h:380px; }
  .contact__card{ height:auto; }
}
@media (max-width:560px){
  .contact__grid{ --map-h:320px; }
  .contact__card{ height:auto; }
  .contact__logo{ height:62px; }
}

/* ---- Orange location pin drawn over the embed ---- */
.map-frame iframe{ pointer-events:none; }   /* keeps the pin locked to the address */
.map-pin{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-100%);
  width:32px; height:44px; z-index:5; pointer-events:none;
  filter:drop-shadow(0 4px 7px rgba(20,21,18,.38));
}
.map-pin svg{ width:100%; height:100%; display:block; }
.map-pin path{ fill:var(--orange); stroke:#FFFFFF; stroke-width:2; }
.map-pin__dot{ fill:#FFFFFF; stroke:none; }

/* ============================================================
   Products page
   ============================================================ */
.video-hero__stack{ position:absolute; inset:0; }
.video-hero__stack video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
  opacity:0; transition:opacity .7s ease;
}
.video-hero__stack video.is-active{ opacity:1; }

.prod{ padding-block:var(--sp-section); }
.prod + .prod{ border-top:1px solid var(--line); }
.prod--tint{ background:var(--cream-lt); border-top:0; }
.prod__inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.prod--flip .prod__media{ order:2; }
.prod__media{ position:relative; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-card); }
.prod__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block; }
.prod__badge{
  position:absolute; left:22px; bottom:22px;
  width:56px; height:56px; border-radius:50%;
  background:var(--sage); border:3px solid var(--paper);
  display:grid; place-items:center; color:#fff;
}
.prod__badge svg{ width:30px; height:30px; }
.prod h2{ font-size:clamp(1.6rem, 2.5vw, 2.05rem); }
.prod__lede{ margin-top:16px; font-size:16.5px; line-height:1.72; }
.prod__list{ margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.prod__list li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:14.5px; color:var(--ink-2); line-height:1.5;
}
.prod__list svg{ width:14px; height:14px; flex:none; margin-top:4px; color:#A8C19F; }
.prod__list svg path{ fill:currentColor; stroke:none; }
.prod__cta{ margin-top:28px; }

@media (max-width:1080px){
  .prod__inner{ grid-template-columns:1fr; gap:32px; }
  .prod--flip .prod__media{ order:0; }
}
@media (max-width:560px){
  .prod__list{ grid-template-columns:1fr; }
}

/* ---- Taller hero for the products page ---- */
.video-hero--tall{ min-height:700px; }
.video-hero--tall .video-hero__inner{ padding-block:250px 72px; }
/* fade length matches the JS overlap (data-fade) */
.video-hero__stack video{ transition:opacity 1.2s ease-in-out, object-position 1.2s ease-in-out; }
@media (max-width:1080px){
  .video-hero--tall{ min-height:580px; }
  .video-hero--tall .video-hero__inner{ padding-block:180px 56px; }
}
@media (max-width:560px){
  .video-hero--tall{ min-height:500px; }
  .video-hero--tall .video-hero__inner{ padding-block:140px 44px; }
}

/* ---- Products hero: frame higher so the box logo clears the headline ---- */

.video-hero--tall::after{
  background:linear-gradient(180deg, rgba(20,21,18,.14) 0%, rgba(20,21,18,.24) 40%, rgba(20,21,18,.80) 100%);
}
@media (max-width:1080px){
  
}

/* Each clip is framed differently, so each gets its own crop.
   Clip 1 (box in the warehouse) shifts up to reveal the whole box logo.
   Clip 2 (clinic counter) stays lower so the wall sign isn't cut off. */


@media (max-width:1080px){
  
  
}

/* framing is set inline per clip by main.js (data-pos) so it can animate */

/* ============================================================
   Resources page
   ============================================================ */
.res-intro{ text-align:center; max-width:66ch; margin-inline:auto; }
.res-intro h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); color:var(--olive); }
.res-intro .rule{ margin:20px auto 22px; }
.res-intro p{ font-size:17px; line-height:1.7; }

.res-list{ margin-top:56px; }
.res-item{
  display:grid; grid-template-columns:minmax(0,.46fr) auto minmax(0,1fr);
  gap:34px; align-items:center;
  padding-block:34px;
}
.res-item + .res-item{ border-top:1px solid var(--line); }
.res-item__media{ margin:0; border-radius:var(--r-md); overflow:hidden; background:var(--sage-tint); }
.res-item__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; display:block; }
.res-item__ico{
  width:74px; height:74px; border-radius:50%; background:var(--sage);
  display:grid; place-items:center; color:#fff; flex:none;
}
.res-item__ico svg{ width:36px; height:36px; }
.res-item__body h3{ font-size:clamp(1.25rem, 2vw, 1.55rem); color:var(--olive); }
.res-item__body p{ margin-top:12px; font-size:15.5px; line-height:1.7; }
.res-item__body .link-arrow{ margin-top:16px; }

@media (max-width:1080px){
  .res-item{ grid-template-columns:minmax(0,.5fr) minmax(0,1fr); gap:26px; }
  .res-item__ico{ display:none; }
}
@media (max-width:720px){
  .res-item{ grid-template-columns:1fr; gap:18px; padding-block:28px; }
  .res-item__media img{ aspect-ratio:16/9; }
}

/* ---- Homepage hero video: inherits the diagonal cut the still image had ---- */
.hero__media video{
  width:100%; height:100%; object-fit:cover; object-position:center 50%;
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 0 100%);
  display:block;
}
@media (max-width:960px){
  .hero__media video{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 12%); }
}

/* ---- Crop the hero video's lower edge (hides the generator watermark) ---- */
.hero__media{ overflow:hidden; }
.hero__media video{
  position:absolute; top:0; left:0;
  width:100%; height:116%;          /* overflows the panel; bottom 16% is clipped away */
  object-fit:cover; object-position:center top;
}
@media (max-width:960px){
  .hero__media video{ height:118%; }
}

/* ============================================================
   About hero motion — slow pan + scroll parallax
   ============================================================ */
.page-hero{ isolation:isolate; }
/* overscan gives the layer room to move without exposing an edge */
.page-hero__media{
  top:-14%; height:128%;
  will-change:transform;
}
.page-hero__media img{
  animation:heroDrift 34s ease-in-out infinite alternate;
  transform-origin:60% 55%;
  will-change:transform;
}
@keyframes heroDrift{
  from{ transform:scale(1.05) translate3d(-1.4%, 0.6%, 0); }
  to  { transform:scale(1.13) translate3d(1.4%, -1.2%, 0); }
}
@media (prefers-reduced-motion: reduce){
  .page-hero__media{ top:0; height:100%; transform:none !important; }
  .page-hero__media img{ animation:none; transform:none; }
}

/* ---- Stat band: larger figures, steadier during animation ---- */
.stats strong{
  font-size:clamp(1.6rem, 2.5vw, 2.1rem);
  line-height:1.1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.stats span{ font-size:13px; max-width:130px; }
.stats li{ gap:16px; }
.stats__ico{ width:56px; height:56px; }
.stats__ico svg{ width:26px; height:26px; }
@media (max-width:720px){
  .stats strong{ font-size:1.55rem; }
  .stats span{ max-width:none; }
}

/* ---- About hero video: tall frame, watermark cropped off the bottom ---- */
.page-hero--tall{ min-height:760px; }
.page-hero--tall .page-hero__inner{ padding-block:300px 64px; }
.page-hero__media video{
  position:absolute; top:0; left:0;
  width:100%; height:118%;        /* overhangs the frame; bottom 18% is clipped */
  object-fit:cover; object-position:center top;
  display:block;
}
/* the Ken Burns drift is for the still image only — the video moves on its own */
.page-hero__media video{ animation:none; }
@media (max-width:1080px){
  .page-hero--tall{ min-height:600px; }
  .page-hero--tall .page-hero__inner{ padding-block:210px 52px; }
  .page-hero__media video{ height:120%; }
}
@media (max-width:560px){
  .page-hero--tall{ min-height:500px; }
  .page-hero--tall .page-hero__inner{ padding-block:160px 44px; }
}

/* ---- Customer service split: give the photo more room ---- */
.split--media-lg{ grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; }
.split--media-lg .split__media img{ aspect-ratio:4/3; }
@media (max-width:1080px){
  .split--media-lg{ grid-template-columns:1fr; }
  .split--media-lg .split__media img{ aspect-ratio:3/2; }
}

/* ---- Partner logos: transparent PNGs on the cream band ---- */
.partners__list img{
  max-height:46px; max-width:82%; width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.62;
  mix-blend-mode:multiply;      /* keeps any residual edge from reading as a white box */
  transition:opacity .25s ease;
}
.partners__list li:hover img{ opacity:.95; }
.partners__list li{ min-height:74px; }
@media (max-width:720px){
  .partners__list img{ max-height:38px; }
}

/* ---- Homepage intro statement ---- */
#better-health .res-intro h2{ font-size:clamp(1.8rem, 3.1vw, 2.45rem); }
.prose-2col{
  display:grid; grid-template-columns:1fr 1fr; gap:20px 48px;
  max-width:1040px; margin:34px auto 0;
}
.prose-2col p{ font-size:16.5px; line-height:1.75; }
@media (max-width:860px){
  .prose-2col{ grid-template-columns:1fr; gap:18px; margin-top:26px; }
}

/* ---- Homepage intro: heading left, copy right, tops aligned ---- */
.intro-split{ display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:56px; align-items:start; }
.intro-split__head h2{
  font-size:clamp(1.7rem, 2.8vw, 2.25rem);
  text-align:left; margin:0;
}
.intro-split__head .rule{ margin:20px 0 0; }
.intro-split__body p{ font-size:16.5px; line-height:1.75; margin:0; }
.intro-split__body p + p{ margin-top:18px; }
@media (max-width:900px){
  .intro-split{ grid-template-columns:1fr; gap:24px; }
}

/* ---- Stat band: keep long words inside their own column ---- */
.stats li{ min-width:0; }
.stats li > div{ min-width:0; }
.stats strong{ display:block; max-width:100%; }
.stats strong.is-long{
  font-size:clamp(1.1rem, 1.5vw, 1.42rem);
  letter-spacing:-.02em;
}
@media (max-width:720px){
  .stats strong.is-long{ font-size:1.15rem; }
}

/* ============================================================
   FAQ page
   ============================================================ */
.page-hero--plain .page-hero__media{ top:0; height:100%; }
.page-hero--plain .page-hero__media img{ animation:none; transform:none; }

.faq-group + .faq-group{ margin-top:48px; }
.faq-group__title{
  font-family:var(--display); font-weight:600; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage);
  padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.faq{
  border-bottom:1px solid var(--line);
}
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 4px;
  font-family:var(--display); font-weight:600; font-size:17px; color:var(--ink);
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--olive); }
.faq__sign{
  position:relative; flex:none; width:20px; height:20px; margin-top:3px;
}
.faq__sign::before, .faq__sign::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--orange); border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .2s ease;
}
.faq__sign::before{ width:15px; height:2.4px; }
.faq__sign::after{ width:2.4px; height:15px; }
.faq[open] .faq__sign::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq__a{ padding:0 4px 22px 40px; }
.faq__a p{ font-size:15.8px; line-height:1.72; }
.faq__a p + p{ margin-top:12px; }
.faq__a ul{ margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; }
.faq__a li{
  position:relative; padding-left:18px; font-size:15px; color:var(--ink-2);
}
.faq__a li::before{
  content:""; position:absolute; left:0; top:8px;
  width:7px; height:7px; background:#A8C19F; border-radius:1px;
  transform:rotate(45deg);
}
.faq__a address{ font-style:normal; margin-top:10px; line-height:1.7; }
.faq-back{ margin-top:56px; text-align:center; }
@media (max-width:640px){
  .faq__a{ padding-left:0; }
  .faq__a ul{ grid-template-columns:1fr; }
  .faq summary{ font-size:16px; }
}

/* ---- FAQ hero: darken only the band the headline sits on ---- */
.page-hero--plain::after{
  background:
    /* strong on the left where the text sits, clearing by ~60% across */
    linear-gradient(90deg,
      rgba(18,19,16,.86) 0%,
      rgba(18,19,16,.78) 26%,
      rgba(18,19,16,.42) 46%,
      rgba(18,19,16,.10) 62%,
      rgba(18,19,16,0)   74%),
    /* a light floor so the image still grounds at the bottom */
    linear-gradient(180deg, rgba(18,19,16,0) 55%, rgba(18,19,16,.28) 100%);
}
/* on narrow screens the text spans the width, so fall back to an even veil */
@media (max-width:860px){
  .page-hero--plain::after{
    background:linear-gradient(180deg, rgba(18,19,16,.34) 0%, rgba(18,19,16,.62) 60%, rgba(18,19,16,.80) 100%);
  }
}

/* keeps a hyphenated name from breaking across two lines */
.nb{ white-space:nowrap; }










/* ============================================================
   Product portfolio band — single source of truth
   Copy + 2x2 tiles on the left, ANI.mp4 on the right.
   Section colour equals the clip's own field (#B4AC9A) and the
   clip's edges are feathered, so no rectangle is visible.
   ============================================================ */
#portfolio{ background:#B4AC9A; }
#portfolio .tile{ background:#F8F7F3; border-color:rgba(75,77,66,.13); }

.portfolio-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
}
.portfolio-main{ min-width:0; }
.portfolio-main .prose{ max-width:100%; }   /* paragraph can't outrun the tiles */
.portfolio-main .tiles--2x2{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px;
}

.portfolio-anim{
  position:relative;
  height:640px;                /* taller than the copy column, so it sets the band height */
  overflow:hidden;
  background:transparent;
  border:0; border-radius:0; box-shadow:none;
}
.portfolio-anim video{
  position:absolute; top:50%; left:50%;
  width:100%; height:100%;
  transform:translate(-50%,-50%) scale(1.02);
  object-fit:cover;
  display:block;
  border:0; background:transparent;
  -webkit-mask-image:radial-gradient(112% 112% at 50% 50%, #000 42%, rgba(0,0,0,.45) 70%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(112% 112% at 50% 50%, #000 42%, rgba(0,0,0,.45) 70%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
}
.portfolio-anim::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right,  #B4AC9A 0%, rgba(180,172,154,0) 20%, rgba(180,172,154,0) 80%, #B4AC9A 100%),
    linear-gradient(to bottom, #B4AC9A 0%, rgba(180,172,154,0) 20%, rgba(180,172,154,0) 80%, #B4AC9A 100%);
}

@media (max-width:1080px){
  .portfolio-layout{ grid-template-columns:1fr; gap:26px; }
  .portfolio-anim{ height:340px; order:-1; }
}
@media (max-width:560px){
  .portfolio-main .tiles--2x2{ grid-template-columns:1fr; }
  .portfolio-anim{ height:260px; }
}

/* "Product portfolio" eyebrow: sage was too low-contrast on the tan band */
#portfolio .eyebrow{ color:#FFFFFF; }

/* Reverse a split: copy on the left, image on the right */
.split--flip .split__media{ order:2; }
@media (max-width:1080px){
  .split--flip .split__media{ order:0; }   /* stacked: image back on top */
}

/* When a media-lg split is flipped, the wider column has to move too,
   otherwise the image lands in the narrow side and shrinks. */
.split--media-lg.split--flip{ grid-template-columns:1fr 1.25fr; }
@media (max-width:1080px){
  .split--media-lg.split--flip{ grid-template-columns:1fr; }
}