/* ==========================================================================
   VetMark Media — site styles
   Design tokens live in :root. Reuse these values in the Shopify theme
   (colors, fonts, radius, spacing) so the store matches this site.
   ========================================================================== */

:root{
  /* Color */
  --ivory:#F6F2E9;          /* page background */
  --ivory-deep:#EDE7D9;     /* alternate surface */
  --paper:#FCFAF5;          /* cards, inputs */
  --forest:#0E3B2A;         /* deep brand surface, primary buttons */
  --forest-deep:#0A2C1F;
  --green:#006838;          /* logo dark green */
  --lime:#8DC63F;           /* logo light green — accent only */
  --ink:#17201B;            /* body text */
  --muted:#55605A;          /* secondary text */
  --line:rgba(23,32,27,.14);
  --line-strong:rgba(23,32,27,.28);
  --on-dark:#F6F2E9;
  --on-dark-muted:rgba(246,242,233,.72);
  --line-dark:rgba(246,242,233,.16);
  --error:#A3271B;

  /* Type */
  --font-display:'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Shape & motion */
  --radius:2px;
  --radius-card:4px;
  --shadow-card:0 1px 2px rgba(14,59,42,.06), 0 18px 40px -18px rgba(14,59,42,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(20px, 5vw, 48px);
  --section:clamp(72px, 10vw, 136px);
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}
*{margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none;}
button,input,select,textarea{font:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:var(--radius);}
.on-dark :focus-visible, .site-footer :focus-visible{outline-color:var(--lime);}

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--forest); color:var(--on-dark); padding:12px 18px; border-radius:var(--radius);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

.wrap{max-width:1200px; margin-inline:auto; padding-inline:var(--gutter);}
.section{padding-block:var(--section);}
.section--tint{background:var(--ivory-deep);}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--font-display); font-weight:400; line-height:1.08; letter-spacing:-.018em; text-wrap:balance;}
h1{font-size:clamp(2.6rem, 6.2vw, 5rem); line-height:1.02; letter-spacing:-.025em;}
h2{font-size:clamp(2rem, 4.2vw, 3.25rem);}
h3{font-size:clamp(1.4rem, 2.2vw, 1.75rem); line-height:1.2;}
h4{font-size:1.2rem; line-height:1.3; letter-spacing:-.01em;}
h1 em,h2 em{font-style:italic; font-weight:300; color:var(--green);}
.on-dark h1 em,.on-dark h2 em{color:var(--lime);}
p{text-wrap:pretty;}
.lead{font-size:clamp(1.1rem, 1.5vw, 1.3rem); line-height:1.6; color:var(--muted); max-width:38em;}
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--green);
  margin-bottom:24px;
}
.eyebrow::before{content:''; width:32px; height:1px; background:currentColor; flex:none;}
.on-dark .eyebrow{color:var(--lime);}

/* ---------- Buttons & links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 28px;
  font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--radius); cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
  touch-action:manipulation;
}
.btn:active{transform:scale(.98);}
.btn--primary{background:var(--forest); color:var(--on-dark);}
.btn--primary:hover{background:var(--green);}
.btn--ghost{border-color:var(--line-strong); color:var(--ink);}
.btn--ghost:hover{background:var(--ink); border-color:var(--ink); color:var(--ivory);}
.btn--lime{background:var(--lime); color:var(--forest-deep);}
.btn--lime:hover{background:var(--on-dark);}
.btn--small{min-height:44px; padding:0 20px; font-size:.75rem;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

.link-arrow{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green);
}
.link-arrow svg{width:18px; height:18px; transition:transform .25s var(--ease);}
.link-arrow:hover svg{transform:translateX(5px);}
.link-arrow span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .3s var(--ease); padding-bottom:3px;}
.link-arrow:hover span{background-size:100% 1px;}
.on-dark .link-arrow{color:var(--lime);}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,242,233,.9);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.site-header.is-scrolled{border-bottom-color:var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--header-h);}
.brand{display:flex; align-items:center; min-height:44px;}
.brand img{height:46px; width:auto;}
.nav-links{display:flex; align-items:center; gap:clamp(20px, 3vw, 40px);}
.nav-links a:not(.btn){
  position:relative; display:inline-flex; align-items:center; min-height:44px;
  font-size:.9375rem; font-weight:500; color:var(--ink);
}
.nav-links a:not(.btn)::after{
  content:''; position:absolute; left:0; right:0; bottom:8px; height:1px; background:var(--green);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:not(.btn):hover::after,
.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-links a[aria-current="page"]{color:var(--green);}
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-strong); border-radius:var(--radius); cursor:pointer;
}
.nav-toggle svg{width:22px; height:22px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

@media (max-width: 820px){
  .nav-toggle{display:inline-flex;}
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ivory); border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 28px;
    display:none;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a:not(.btn){min-height:56px; font-family:var(--font-display); font-size:1.5rem; border-bottom:1px solid var(--line);}
  .nav-links a:not(.btn)::after{display:none;}
  .nav-links .btn{margin-top:24px; min-height:52px;}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(48px, 7vw, 104px) clamp(56px, 8vw, 112px); overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px, 5vw, 80px); align-items:center;}
.hero .lead{margin-top:28px;}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:40px;}
.cta-note{margin-top:20px; font-size:.9rem; color:var(--muted);}

/* Illustrative collage — pure CSS, no photography required */
.collage{position:relative; aspect-ratio:1/1.05; max-width:520px; width:100%; margin-inline:auto;}
.collage::before{
  content:''; position:absolute; inset:6% 4% 4% 10%; background:var(--ivory-deep); border-radius:var(--radius-card);
}
.piece{position:absolute; border-radius:var(--radius-card); box-shadow:var(--shadow-card);}
.piece-label{font-size:.625rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;}
.piece--mailer{
  top:0; right:0; width:62%; aspect-ratio:3/2.3; padding:7% 7%;
  background:var(--forest); color:var(--on-dark); transform:rotate(3deg);
  display:flex; flex-direction:column; justify-content:space-between;
}
.piece--mailer .piece-label{color:var(--lime);}
.piece--mailer p{font-family:var(--font-display); font-size:clamp(1.05rem, 2.1vw, 1.55rem); line-height:1.15; letter-spacing:-.01em;}
.piece--mailer p em{font-weight:300; color:var(--lime);}
.piece--mailer svg{width:26px; height:auto;}
.piece--ad{
  top:39%; left:0; width:68%; padding:6% 6.5%;
  background:var(--paper); border:1px solid var(--line); transform:rotate(-2.5deg);
}
.piece--ad .piece-label{color:var(--muted); display:flex; align-items:center; gap:8px;}
.piece--ad .piece-label::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--lime);}
.piece--ad strong{display:block; margin-top:10px; font-family:var(--font-body); font-weight:600; font-size:clamp(.85rem, 1.5vw, 1.02rem); line-height:1.3; color:var(--green);}
.bars{display:grid; gap:7px; margin-top:12px;}
.bars i{display:block; height:6px; border-radius:3px; background:var(--line);}
.bars i:nth-child(2){width:82%;}
.bars i:nth-child(3){width:56%;}
.piece--plan{
  bottom:0; right:3%; width:54%; padding:6% 6%;
  background:var(--paper); border:1px solid var(--line); transform:rotate(1.5deg);
}
.piece--plan .piece-label{color:var(--green);}
.piece--plan ul{margin-top:12px; display:grid; gap:9px;}
.piece--plan li{display:flex; align-items:center; gap:10px; font-size:clamp(.72rem, 1.2vw, .875rem); line-height:1.3; color:var(--ink);}
.piece--plan li::before{content:''; flex:none; width:14px; height:14px; border-radius:50%; border:1px solid var(--green);}
.piece--plan li.done::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='%23F6F2E9' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;}

/* Hero video with overlapping sample pieces */
.hero-media{position:relative; width:100%; max-width:440px; margin-inline:auto; justify-self:end; container-type:inline-size;}
.hero-frame{position:relative; aspect-ratio:5/7; border-radius:var(--radius-card); overflow:hidden; background:var(--ivory-deep); box-shadow:var(--shadow-card);}
.hero-video{width:100%; height:100%; object-fit:cover; object-position:50% 100%;}
.video-toggle{position:absolute; right:12px; bottom:12px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:rgba(246,242,233,.88); color:var(--forest); cursor:pointer; transition:background-color .2s var(--ease);}
.video-toggle:hover{background:var(--ivory);}
.video-toggle svg{width:14px; height:14px;}
.video-toggle .icon-play,.video-toggle.is-paused .icon-pause{display:none;}
.video-toggle.is-paused .icon-play{display:block;}
.hero-media .piece--mailer{top:auto; right:auto; bottom:17%; left:-13%; width:46%; aspect-ratio:auto; gap:10px; padding:5cqw; transform:rotate(-4deg);}
.hero-media .piece--mailer p{font-size:clamp(.75rem, 3.9cqw, 1.15rem); overflow-wrap:break-word;}
.hero-media .piece--ad{padding:4.5cqw 5cqw;}
.hero-media .piece--ad strong{font-size:clamp(.75rem, 3.5cqw, 1rem);}
.hero-media .piece-label{font-size:clamp(.5rem, 2.2cqw, .625rem);}
.hero-media .piece--ad{top:auto; bottom:-6%; left:-7%; width:56%; transform:rotate(2deg);}
.hero-media{margin-bottom:6%;}

@media (max-width: 1100px){
  .hero-media .piece--mailer{left:-3%;}
  .hero-media .piece--ad{left:2%;}
}

/* ---------- Photography ---------- */
.photo img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-card);}
.photo--landscape{aspect-ratio:3/2; box-shadow:var(--shadow-card); border-radius:var(--radius-card);}
.photo--wide{aspect-ratio:2/1;}
.photo--wide img{object-position:50% 100%;}
.photo--portrait{aspect-ratio:4/5; max-width:320px; width:100%; box-shadow:var(--shadow-card); border-radius:var(--radius-card);}
.photo-band{padding-top:clamp(32px, 5vw, 64px);}
.page-hero-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px, 6vw, 96px); align-items:center;}
.page-hero-grid > div{grid-column:1; grid-row:1;}
.page-hero-grid .photo--portrait{grid-column:2; grid-row:1; width:clamp(220px, 24vw, 320px);}

/* ---------- Sector strip ---------- */
.sectors{border-block:1px solid var(--line);}
.sectors-inner{display:flex; flex-wrap:wrap; align-items:center; gap:12px clamp(20px, 4vw, 56px); padding-block:26px;}
.sectors-label{font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);}
.sectors ul{display:flex; flex-wrap:wrap; gap:8px clamp(20px, 4vw, 56px);}
.sectors li{font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(1.15rem, 2vw, 1.5rem); color:var(--ink);}

/* ---------- Section heads ---------- */
.section-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px clamp(32px, 6vw, 96px); align-items:end; margin-bottom:clamp(40px, 6vw, 72px);}
.section-head .eyebrow{grid-column:1/-1; margin-bottom:0;}
.section-head p{color:var(--muted); max-width:30em;}

/* ---------- Service index (home) ---------- */
.service-list{border-top:1px solid var(--line-strong);}
.service-row{
  display:grid; grid-template-columns:120px minmax(0,1fr) minmax(0,.9fr) auto; gap:20px clamp(24px, 4vw, 56px);
  align-items:start; padding-block:clamp(32px, 4.5vw, 52px); border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease);
}
.service-row:hover{background:rgba(252,250,245,.7);}
.numeral{font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(2.4rem, 4.5vw, 3.75rem); line-height:.9; color:var(--green); font-variant-numeric:lining-nums;}
.service-row h3{margin-bottom:12px;}
.service-row p{color:var(--muted); max-width:28em;}
.ticks{display:grid; gap:10px;}
.ticks li{position:relative; padding-left:26px; font-size:.98rem;}
.ticks li::before{content:''; position:absolute; left:0; top:.72em; width:14px; height:1px; background:var(--green);}
.on-dark .ticks li::before{background:var(--lime);}
.service-row .link-arrow{align-self:center;}

/* ---------- Dark band ---------- */
.on-dark{background:var(--forest); color:var(--on-dark); position:relative; overflow:hidden;}
.on-dark p{color:var(--on-dark-muted);}
.band-mark{position:absolute; right:-6%; top:50%; width:min(46vw, 560px); transform:translateY(-50%); opacity:.07; pointer-events:none;}
.band-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px, 7vw, 112px); align-items:start;}
.band-grid h2{margin-bottom:28px;}
.band-grid p + p{margin-top:18px;}
.band-grid .link-arrow{margin-top:28px;}
.principles{display:grid; border-top:1px solid var(--line-dark);}
.principles li{display:grid; grid-template-columns:56px minmax(0,1fr); gap:8px 20px; padding-block:28px; border-bottom:1px solid var(--line-dark);}
.principles .numeral{font-size:1.75rem; color:var(--lime); padding-top:4px;}
.principles h3{font-size:1.375rem; margin-bottom:8px;}
.principles p{font-size:1rem;}
.facts{position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; margin-top:clamp(48px, 7vw, 88px); padding-top:32px; border-top:1px solid var(--line-dark);}
.facts b{display:block; font-family:var(--font-display); font-weight:300; font-size:clamp(2.25rem, 4.5vw, 3.5rem); line-height:1; color:var(--lime); letter-spacing:-.02em;}
.facts span{display:block; margin-top:10px; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-muted);}

/* ---------- Process ---------- */
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(24px, 3vw, 40px); counter-reset:step;}
.steps li{border-top:1px solid var(--line-strong); padding-top:24px; counter-increment:step;}
.steps li::before{content:'0' counter(step); display:block; font-size:.75rem; font-weight:600; letter-spacing:.2em; color:var(--green); margin-bottom:28px;}
.steps h3{font-size:1.5rem; margin-bottom:12px;}
.steps p{color:var(--muted); font-size:1rem;}

/* ---------- Shop teaser ---------- */
.shop-teaser{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 96px); align-items:center;}
.shop-teaser h2{margin-bottom:20px;}
.shop-teaser p{color:var(--muted); max-width:30em;}
.shop-teaser .link-arrow{margin-top:24px;}
.stack{position:relative; aspect-ratio:4/3; max-width:480px; width:100%; margin-inline:auto;}
.stack div{position:absolute; border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:7%; display:flex; flex-direction:column; justify-content:flex-end;}
.stack div span{font-size:.625rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;}
.stack div b{font-family:var(--font-display); font-weight:400; font-size:clamp(1rem, 1.7vw, 1.3rem); line-height:1.15; margin-top:6px;}
.stack .s1{left:0; top:10%; width:37%; height:80%; background:var(--paper); border:1px solid var(--line); transform:rotate(-4deg);}
.stack .s1 span{color:var(--green);}
.stack .s2{left:32%; top:0; width:37%; height:86%; background:var(--forest); color:var(--on-dark); transform:rotate(1.5deg);}
.stack .s2 span{color:var(--lime);}
.stack .s3{right:0; top:22%; width:34%; height:62%; background:var(--lime); color:var(--forest-deep); transform:rotate(5deg);}

/* ---------- Closing CTA ---------- */
.closing{text-align:center;}
.closing .eyebrow{justify-content:center;}
.closing .eyebrow::after{content:''; width:32px; height:1px; background:currentColor;}
.closing h2{max-width:16em; margin-inline:auto;}
.closing .lead{margin:24px auto 0;}
.closing .cta-row{justify-content:center;}

/* ---------- Inner page hero ---------- */
.page-hero{padding-block:clamp(56px, 8vw, 120px) clamp(48px, 6vw, 88px); border-bottom:1px solid var(--line);}
.page-hero h1{max-width:13em; font-size:clamp(2.5rem, 5.6vw, 4.5rem);}
.page-hero .lead{margin-top:28px;}

/* ---------- Services page ---------- */
.subnav{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px;}
.subnav a{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1px solid var(--line-strong); border-radius:999px; font-size:.9rem; font-weight:500; transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);}
.subnav a:hover{background:var(--forest); border-color:var(--forest); color:var(--on-dark);}
.service-detail{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 7vw, 112px); padding-block:var(--section); border-bottom:1px solid var(--line);}
.service-detail:last-of-type{border-bottom:0;}
.service-detail header{position:sticky; top:calc(var(--header-h) + 32px); align-self:start;}
.service-detail header .numeral{display:block; margin-bottom:24px;}
.service-detail header p{margin-top:20px; color:var(--muted);}
.service-detail .lead{color:var(--ink); margin-bottom:40px;}
.included{border-top:1px solid var(--line-strong);}
.included > div{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:8px 32px; padding-block:24px; border-bottom:1px solid var(--line);}
.included dt{font-family:var(--font-display); font-size:1.25rem; line-height:1.3;}
.included dd{color:var(--muted); font-size:1rem;}
.suited{margin-top:32px; padding:24px 28px; background:var(--ivory-deep); border-left:2px solid var(--green); border-radius:var(--radius);}
.suited b{display:block; font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin-bottom:8px;}
.service-detail .btn{margin-top:36px;}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin-inline:auto; border-top:1px solid var(--line-strong);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:24px; min-height:44px; cursor:pointer; list-style:none; font-family:var(--font-display); font-size:clamp(1.2rem, 2vw, 1.45rem); line-height:1.3;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:''; flex:none; width:16px; height:16px; background:linear-gradient(var(--green),var(--green)) center/100% 1px no-repeat, linear-gradient(var(--green),var(--green)) center/1px 100% no-repeat; transition:transform .3s var(--ease);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{padding-bottom:28px; color:var(--muted); max-width:42em;}

/* ---------- About page ---------- */
.story{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 7vw, 112px);}
.story-body p{font-size:1.125rem; max-width:36em;}
.story-body p + p{margin-top:22px;}
.story-body p:first-child{font-family:var(--font-display); font-size:clamp(1.4rem, 2.4vw, 1.9rem); line-height:1.35; letter-spacing:-.01em;}
.sector-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.sector-grid li{background:var(--ivory-deep); padding:32px 28px 36px;}
.sector-grid svg{width:32px; height:32px; color:var(--green); margin-bottom:40px;}
.sector-grid h3{font-size:1.375rem; margin-bottom:10px;}
.sector-grid p{color:var(--muted); font-size:.98rem;}

/* ---------- Shop page ---------- */
.badge{display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border:1px solid var(--line-strong); border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin-bottom:28px;}
.badge::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--lime);}
.product-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 3vw, 32px);}
.product{display:flex; flex-direction:column;}
.product-art{aspect-ratio:4/5; border-radius:var(--radius-card); padding:10%; display:flex; flex-direction:column; justify-content:space-between; margin-bottom:20px;}
.product-art span{font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;}
.product-art b{font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.1; letter-spacing:-.015em;}
.product-art.a{background:var(--forest); color:var(--on-dark);}
.product-art.a span{color:var(--lime);}
.product-art.b{background:var(--paper); border:1px solid var(--line);}
.product-art.b span{color:var(--green);}
.product-art.c{background:var(--lime); color:var(--forest-deep);}
.product h3{font-size:1.375rem; margin-bottom:6px;}
.product p{color:var(--muted); font-size:1rem;}
.notify{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 96px); align-items:center;}
.notify-form{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;}
.notify-form .field{flex:1 1 240px; margin:0;}

/* ---------- Product catalog (shop preview) ---------- */
.catalog{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px, 2.5vw, 32px);}
.catalog-img{aspect-ratio:1/1; background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; margin-bottom:16px;}
.catalog-img img{width:100%; height:100%; object-fit:contain; transition:transform .5s var(--ease);}
.catalog li:hover .catalog-img img{transform:scale(1.04);}
.catalog h3{font-size:1.2rem;}
.catalog-note{margin-top:32px; font-size:.9rem; color:var(--muted);}

/* ---------- Founder ---------- */
.founder{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 7vw, 112px); align-items:center;}
.founder-photo{max-width:440px; width:100%;}
.founder-photo img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-card); box-shadow:var(--shadow-card);}
.founder h2{margin-bottom:24px;}
.founder .lead{color:var(--ink); margin-bottom:18px;}
.founder p{color:var(--muted); max-width:36em;}
.founder p + p{margin-top:16px;}
.founder-facts{display:flex; flex-wrap:wrap; gap:16px 48px; margin-block:32px 20px; padding-top:28px; border-top:1px solid var(--line-strong);}
.founder-facts dt{font-family:var(--font-display); font-size:1.5rem; line-height:1.2; color:var(--green);}
.founder-facts dd{font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:6px;}

/* ---------- Legal pages ---------- */
.legal{max-width:calc(760px + 2 * var(--gutter));}
.legal h2{font-size:clamp(1.4rem, 2.2vw, 1.75rem); margin:48px 0 14px;}
.legal p,.legal li{color:var(--muted); max-width:44em;}
.legal p + p{margin-top:16px;}
.legal ul{display:grid; gap:10px; margin-top:8px;}
.legal li{position:relative; padding-left:26px;}
.legal li::before{content:''; position:absolute; left:0; top:.8em; width:14px; height:1px; background:var(--green);}
.legal strong{color:var(--ink); font-weight:600;}
.legal a{color:var(--green); text-decoration:underline; text-underline-offset:3px;}

/* ---------- Forms ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px, 6vw, 96px); align-items:start;}
.contact-points{margin-top:36px; border-top:1px solid var(--line);}
.contact-points li{display:flex; gap:16px; padding-block:18px; border-bottom:1px solid var(--line);}
.contact-points svg{flex:none; width:22px; height:22px; color:var(--green); margin-top:3px;}
.form-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-card); padding:clamp(24px, 4vw, 48px); box-shadow:var(--shadow-card);}
.form-card h2{font-size:clamp(1.6rem, 2.6vw, 2rem); margin-bottom:8px;}
.form-card > p{color:var(--muted); margin-bottom:32px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field{margin-bottom:22px;}
.field label{display:block; font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px;}
.field label .req{color:var(--green);}
.field label .opt{font-weight:400; letter-spacing:.04em; text-transform:none; color:var(--muted);}
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:13px 16px; font-size:1rem;
  background:var(--ivory); border:1px solid var(--line-strong); border-radius:var(--radius);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field select{appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2317201B' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:14px;}
.field textarea{min-height:140px; resize:vertical; line-height:1.55;}
.field ::placeholder{color:#636C66; opacity:1;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--green); background-color:#fff; box-shadow:0 0 0 3px rgba(0,104,56,.16);}
.field .error{display:none; margin-top:8px; font-size:.9rem; color:var(--error);}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--error);}
.field.is-invalid .error{display:block;}
.form-card .btn{width:100%;}
.form-note{margin-top:16px; font-size:.875rem; color:var(--muted); text-align:center;}
.form-status{margin-top:16px; padding:14px 16px; border-radius:var(--radius); font-size:.95rem; border-left:2px solid var(--error); background:rgba(163,39,27,.07); color:var(--error);}
.form-status:empty{display:none;}
.form-success{text-align:center; padding-block:32px;}
.form-success svg{width:52px; height:52px; margin:0 auto 24px; color:var(--green);}
.form-success h2{margin-bottom:12px;}
.form-success p{color:var(--muted); max-width:28em; margin-inline:auto;}

/* ---------- Footer ---------- */
.site-footer{background:var(--forest-deep); color:var(--on-dark); padding-block:clamp(56px, 7vw, 88px) 32px;}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr)); gap:40px clamp(24px, 4vw, 64px);}
.footer-brand img{height:52px; width:auto; margin-left:-4px;}
.footer-brand p{margin-top:20px; max-width:24em; color:var(--on-dark-muted); font-size:1rem;}
.site-footer h2{font-family:var(--font-body); font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--lime); margin-bottom:14px;}
.site-footer li a{display:inline-flex; align-items:center; min-height:40px; color:var(--on-dark-muted); font-size:1rem; transition:color .2s var(--ease);}
.site-footer li a:hover{color:var(--on-dark);}
.footer-legal{display:flex; flex-wrap:wrap; gap:4px 24px;}
.site-footer .footer-legal a{min-height:32px; font-size:.875rem;}
.footer-base{align-items:center; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:clamp(40px, 6vw, 72px); padding-top:24px; border-top:1px solid var(--line-dark); font-size:.875rem; color:var(--on-dark-muted);}

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d, 0ms);}
.js [data-reveal].is-in{opacity:1; transform:none;}

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .service-row{grid-template-columns:72px minmax(0,1fr);}
  .service-row .ticks,.service-row .link-arrow{grid-column:2;}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:40px;}
  .catalog{grid-template-columns:repeat(3, minmax(0,1fr));}
  .sector-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .footer-grid{grid-template-columns:repeat(3, minmax(0,1fr));}
  .footer-brand{grid-column:1/-1;}
}
@media (max-width: 820px){
  :root{--header-h:68px;}
  .brand img{height:40px;}
  .hero-grid,.section-head,.band-grid,.shop-teaser,.service-detail,.story,.notify,.contact-grid,.founder{grid-template-columns:minmax(0,1fr);}
  .collage{max-width:420px; margin-top:16px; aspect-ratio:1/1.22;}
  .hero-media{max-width:340px; justify-self:center; margin-top:16px;}
  .hero-media .piece--mailer{left:-5%;}
  .hero-media .piece--ad{left:-3%; width:60%;}
  .page-hero-grid{grid-template-columns:minmax(0,1fr);}
  .page-hero-grid .photo--portrait{grid-column:1; grid-row:2; width:220px;}
  .photo--wide{aspect-ratio:3/2;}
  .piece--ad{top:36%;}
  .service-detail header{position:static;}
  .band-mark{display:none;}
  .product-grid{grid-template-columns:minmax(0,1fr); max-width:420px;}
  .product-art{aspect-ratio:4/3;}
}
@media (max-width: 560px){
  .cta-row .btn{width:100%;}
  .service-row{grid-template-columns:minmax(0,1fr);}
  .service-row .ticks,.service-row .link-arrow{grid-column:1;}
  .steps,.sector-grid,.field-row{grid-template-columns:minmax(0,1fr);}
  .catalog{grid-template-columns:repeat(2, minmax(0,1fr));}
  .field-row{gap:0;}
  .included > div{grid-template-columns:minmax(0,1fr);}
  .facts{grid-template-columns:minmax(0,1fr); gap:28px;}
  .footer-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .sector-grid svg{margin-bottom:24px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;}
  .js [data-reveal]{opacity:1; transform:none;}
}