/* ============================================================
   KOMARI BEVERAGE — Design tokens
   Palette + type per Komari Brand Guidelines v1 (Sep 2018):
   Red PANTONE P 48-8C / Dark Gray / Silver / White.
   Typeface: Avenir (primary), Arial (fallback).
   Avenir has no open web-embed license, so Poppins (a similarly
   geometric, humanist sans) is loaded as the practical web
   substitute — swap in a licensed Avenir/Avenir Next webfont
   (e.g. via Adobe Fonts) later; only this CSS variable needs to change.
   ============================================================ */
:root{
  --red:        #ed1c24;   /* Brand Red — PANTONE P 48-8 C */
  --red-deep:   #a3151a;   /* darker tint of brand red, for hover/depth */
  --red-soft:   #f8d9da;   /* light tint of brand red, for subtle fills */
  --ink:        #141415;   /* Brand Dark Gray */
  --ink-soft:   #232324;   /* lifted tint of dark gray, for panels */
  --silver:     #d1d3d4;   /* Brand Light Gray / Silver */
  --silver-deep:#aeb1b2;   /* darker tint of silver, for borders/rules */
  --silver-soft:#f0f1f1;   /* light tint of silver, for section backgrounds */
  --white:      #ffffff;
  --text:       #141415;
  --muted:      #6b6e6e;
  --line:       rgba(20,20,21,0.14);

  --display: "Avenir Next", "Avenir", "Poppins", Arial, sans-serif;
  --body:    "Avenir Next", "Avenir", "Poppins", Arial, sans-serif;

  --wrap: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.2rem,5vw,3.8rem);}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);}
h3{font-size:clamp(1.25rem,2vw,1.55rem);}
p{margin:0 0 1em;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.82rem;
  font-weight:700;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:.9em;
  text-align:left;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:1em;height:1em;
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M16 16L40 40M40 20V40M20 40H40' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M16 16L40 40M40 20V40M20 40H40' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  vertical-align:middle;
}
.eyebrow.on-dark{color:var(--silver);}
.eyebrow.on-dark::before{color:var(--red);}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--body);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  padding:.9em 1.7em;
  border-radius:999px;
  border:1px solid currentColor;
  transition:transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn::after{
  content:"\2192";
  display:inline-block;
  transition:transform .25s ease;
  font-size:1em;
}
.btn:hover::after{transform:translateX(4px);}
.btn-solid{background:var(--red);border-color:var(--red);color:#fff;}
.btn-solid:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 24px rgba(20,20,21,.18);}
.btn-line{background:transparent;color:var(--ink);}
.btn-line:hover{background:var(--ink);color:#fff;transform:translateY(-2px);}
.btn-line-light{background:transparent;color:#fff;}
.btn-line-light:hover{background:#fff;color:var(--ink);}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.scrolled{
  background:var(--white);
  border-bottom-color:var(--line);
  box-shadow:0 8px 24px rgba(20,20,21,.1);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0;
  transition:padding .3s ease;
}
.site-header.scrolled .nav{padding:12px 0;}
.logo{display:flex;align-items:center;}
.logo img{height:42px;width:auto;display:block;transition:height .3s ease;}
.site-header.scrolled .logo img{height:32px;}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;}
.nav-links > li{position:relative;}
.nav-links > li > a:not(.btn), .nav-links > li > button{
  font-family:var(--body);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  padding:10px 14px;display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;color:#fff;
  transition:color .3s ease;
}
.site-header.scrolled .nav-links > li > a:not(.btn),
.site-header.scrolled .nav-links > li > button{color:var(--ink);}
.nav-links > li > a:not(.btn):hover, .nav-links > li > button:hover{color:var(--red);}
.caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px;}
.dropdown{
  position:absolute;top:100%;left:0;
  background:var(--white);
  border:1px solid var(--line);
  min-width:220px;
  padding:8px;
  box-shadow:0 14px 30px rgba(20,20,21,.14);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:all .18s ease;
}
.nav-links > li:hover .dropdown, .nav-links > li:focus-within .dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}
.dropdown a{display:block;padding:10px 12px;font-size:.92rem;border-radius:12px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink) !important;}
.dropdown a:hover{background:var(--silver-soft);color:var(--red) !important;}
.nav-cta{margin-left:8px;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:background .3s ease;}
.site-header.scrolled .nav-toggle span{background:var(--ink);}

@media (max-width: 900px){
  .logo img{height:34px;}
  .site-header.scrolled .logo img{height:27px;}
  .nav-toggle{display:block;}
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:82%;max-width:340px;height:100vh;
    background:var(--ink);color:#fff;flex-direction:column;align-items:flex-start;
    padding:90px 28px 28px;gap:2px;
    transform:translateX(100%);transition:transform .3s ease;
    overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links > li{width:100%;}
  .nav-links > li > a:not(.btn), .nav-links > li > button{color:#fff !important;width:100%;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;display:none;background:transparent;border:none;box-shadow:none;padding:0 0 0 12px;}
  .nav-links > li.dd-open .dropdown{display:block;}
  .dropdown a{color:rgba(255,255,255,.75) !important;}
  .nav-cta{margin-left:0;margin-top:14px;}
}

/* ---------- Full-bleed media hero (background image, overlay, text on top) ---------- */
.media-hero{
  position:relative;min-height:82vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;color:#fff;
  padding:110px 0 50px;isolation:isolate;
}
.media-hero .wrap{width:100%;}
.media-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
}
.media-hero.overlay-ink::after{background:linear-gradient(0deg, rgba(20,20,21,.8) 10%, rgba(20,20,21,.22) 60%, rgba(20,20,21,.08) 100%);}
.media-hero.overlay-red::after{background:linear-gradient(0deg, rgba(20,20,21,.82) 5%, rgba(163,21,26,.4) 55%, rgba(237,28,36,.15) 100%);}
.media-hero.overlay-white::after{background:linear-gradient(0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.5) 45%, rgba(255,255,255,.22) 100%);}
.media-hero.overlay-white .eyebrow{color:var(--red);}
.media-hero.overlay-white .eyebrow::before{color:var(--red);}
.media-hero.overlay-white h1{color:var(--ink);}
.media-hero.overlay-white p{color:var(--muted);}
.media-hero .eyebrow{color:var(--silver);font-size:1.05rem;margin-bottom:1em;}
.media-hero .eyebrow::before{color:var(--red);font-size:1.3em;}
.media-hero h1{color:#fff;font-size:clamp(2.4rem,5.6vw,4.2rem);max-width:18ch;}
.media-hero p{color:rgba(255,255,255,.78);max-width:56ch;font-size:1.08rem;}
.media-hero.hero-home{min-height:94vh;align-items:center;}
.media-hero .hero-actions{display:flex;gap:14px;margin-top:1.6em;flex-wrap:wrap;}
@media(max-width:700px){
  .media-hero{min-height:64vh;padding:90px 0 32px;}
}

/* Rotating headline badge (home hero) */
.hero-badge{
  margin-top:1.8em;
  background:var(--red);
  color:#fff;
  padding:18px 22px;
  max-width:420px;
  border-radius:6px;
  box-shadow:0 16px 32px rgba(163,21,26,.35);
  font-size:.95rem;
  line-height:1.4;
  position:relative;
  min-height:64px;
}
.hero-badge span{
  display:block;
  position:absolute;inset:18px 22px;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease;
}
.hero-badge span.is-active{position:relative;inset:auto;opacity:1;transform:none;}

/* ---------- Content-first full-width image section (stacked, image below text, full-bleed) ---------- */
.stack-media{padding:0;}
.stack-media .stack-copy{padding:56px 0 36px;text-align:left;}
.stack-media .stack-copy h2{max-width:26ch;margin:0 0 .4em;}
.stack-media .stack-copy p{max-width:60ch;margin:0;color:var(--muted);}
.stack-media .stack-img{width:100%;height:auto;display:block;}

/* Photo-background section with a *subtle* dim + text on the left, so the
   photo stays visible on the right instead of being hidden under a full overlay */
.stack-bg-left{position:relative;overflow:hidden;line-height:0;}
.stack-bg-left img{width:100%;height:auto;display:block;}
.stack-bg-left::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg, rgba(20,20,21,.6) 0%, rgba(20,20,21,.4) 30%, rgba(20,20,21,.08) 58%, rgba(20,20,21,0) 72%);
  pointer-events:none;
}
.stack-bg-left .stack-bg-copy{
  position:absolute;top:0;left:max(28px, calc(50% - 590px + 28px));bottom:0;
  display:flex;flex-direction:column;justify-content:center;z-index:1;
  max-width:440px;padding:36px 0;margin:0;line-height:normal;
}
.stack-bg-left .eyebrow{color:var(--silver);}
.stack-bg-left .eyebrow::before{color:var(--red);}
.stack-bg-left h2{color:#fff;}
.stack-bg-left p{color:rgba(255,255,255,.85);}
@media(max-width:700px){
  .stack-bg-left::after{background:linear-gradient(0deg, rgba(20,20,21,.68) 0%, rgba(20,20,21,.5) 40%, rgba(20,20,21,.15) 75%, rgba(20,20,21,0) 100%);}
  .stack-bg-left .stack-bg-copy{position:absolute;left:0;right:0;top:auto;bottom:0;max-width:none;padding:28px;}
}

/* Light-overlay variant (used for Consumer-led development) — same no-crop
   layout as stack-bg-left, but a soft white wash instead of a dark one, with
   dark text for readability against it */
.stack-bg-light::after{
  background:linear-gradient(100deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.55) 32%, rgba(255,255,255,.18) 60%, rgba(255,255,255,0) 74%);
}
.stack-bg-light .eyebrow{color:var(--red);}
.stack-bg-light .eyebrow::before{color:var(--red);}
.stack-bg-light h2{color:var(--ink);}
.stack-bg-light p{color:var(--muted);}
@media(max-width:700px){
  .stack-bg-light::after{background:linear-gradient(0deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.6) 40%, rgba(255,255,255,.2) 75%, rgba(255,255,255,0) 100%);}
}

/* No-overlay variant (used for Consumer-led development) — the photo shown
   plain, with no dark or light scrim at all; text relies on a soft drop
   shadow for legibility instead. Height is capped (rather than natural) so
   the section reads as a compact strip that still keeps its subject in frame */
.stack-bg-plain{position:relative;overflow:hidden;line-height:0;}
.stack-bg-plain img{width:100%;height:78vh;min-height:480px;object-fit:cover;object-position:center 38%;display:block;}
.stack-bg-plain::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg, rgba(20,20,21,.72) 0%, rgba(20,20,21,.48) 32%, rgba(20,20,21,.15) 60%, rgba(20,20,21,0) 78%);
  pointer-events:none;
}
.stack-bg-plain .stack-bg-copy{
  position:absolute;top:0;left:max(28px, calc(50% - 590px + 28px));bottom:0;
  display:flex;flex-direction:column;justify-content:center;z-index:1;
  max-width:440px;padding:36px 0;margin:0;line-height:normal;
}
.stack-bg-plain .eyebrow{color:var(--silver);}
.stack-bg-plain .eyebrow::before{color:var(--red);}
.stack-bg-plain h2{color:#fff;}
.stack-bg-plain p{color:var(--silver);}
@media(max-width:700px){
  .stack-bg-plain img{height:56vh;min-height:340px;}
  .stack-bg-plain .stack-bg-copy{left:0;right:0;top:auto;bottom:0;max-width:none;padding:28px;}
}

/* Full-bleed background variant: photo fills the whole section, text sits on top of it
   instead of the photo and text copy being two separate stacked blocks */
.stack-bg{
  position:relative;min-height:88vh;display:flex;align-items:center;
  background-size:cover;background-position:center;color:#fff;
  isolation:isolate;
}
.stack-bg::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg, rgba(20,20,21,.72) 0%, rgba(20,20,21,.5) 55%, rgba(20,20,21,.42) 100%);
}
.stack-bg .wrap{max-width:none;}
.stack-bg .wrap > *{max-width:560px;}
.stack-bg .eyebrow{color:var(--silver);}
.stack-bg .eyebrow::before{color:var(--red);}
.stack-bg h2{color:#fff;}
.stack-bg p{color:rgba(255,255,255,.82);}
@media(max-width:700px){.stack-bg{min-height:70vh;padding:44px 0;}}

/* ---------- Section rhythm ---------- */
section{padding:56px 0;}
.section-tight{padding:36px 0;}
.tone-ink{background:var(--ink);color:#fff;}
.tone-ink h2{color:#fff;}
.tone-ink p{color:rgba(255,255,255,.72);}
.tone-red{background:var(--red);color:#fff;}
.tone-red h2, .tone-red h3{color:#fff;}
.tone-red p{color:rgba(255,255,255,.88);}
.tone-red .eyebrow{color:rgba(255,255,255,.85);}
.tone-red .eyebrow::before{color:#fff;}
.tone-silver{background:var(--silver-soft);}
.tone-white{background:var(--white);}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split.reverse .split-media{order:2;}
.split-media img{border-radius:6px;width:100%;height:auto;display:block;}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:32px;}
  .split.reverse .split-media{order:0;}
}
.divider{height:1px;background:var(--line);border:none;margin:0;}

/* Stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.stat{background:var(--white);padding:32px 24px;text-align:left;border-radius:20px;}
.stat b{display:block;font-family:var(--display);font-size:2.4rem;color:var(--red);}
.stat span{font-family:var(--body);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
@media(max-width:800px){.stats{grid-template-columns:1fr 1fr;}}

/* Testimonial slider ("In their own words") — one quote visible, auto-rotating */
.testimonial-slider{position:relative;max-width:760px;min-height:220px;}
.testimonial-slide{
  position:absolute;inset:0;
  background:var(--white);border:1px solid var(--line);padding:36px 40px;
  opacity:0;transform:translateX(24px);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.testimonial-slide.is-active{opacity:1;transform:none;pointer-events:auto;position:relative;}
.testimonial-slide::before{content:"\201C";font-family:var(--display);font-size:3rem;color:var(--red);line-height:1;display:block;margin-bottom:.1em;font-weight:700;}
.testimonial-slide p{font-family:var(--display);font-weight:500;font-size:1.15rem;}
.testimonial-slide .who{font-family:var(--body);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.testimonial-dots{display:flex;gap:8px;margin-top:20px;}
.testimonial-dots button{
  width:9px;height:9px;border-radius:50%;border:none;background:var(--silver-deep);cursor:pointer;padding:0;
  transition:background .25s ease, transform .25s ease;
}
.testimonial-dots button.is-active{background:var(--red);transform:scale(1.25);}

/* Values list */
.values-list{counter-reset:val;display:grid;gap:0;}
.value-row{
  counter-increment:val;
  display:grid;grid-template-columns:80px 1fr;gap:24px;
  padding:28px 0;border-top:1px solid var(--line);
}
.value-row:last-child{border-bottom:1px solid var(--line);}
.value-row::before{
  content:counter(val,decimal-leading-zero);
  font-family:var(--display);font-size:1rem;font-weight:700;color:var(--red);align-self:start;padding-top:4px;
}
.value-row h3{font-size:1.3rem;margin-bottom:.2em;}
.value-row p{color:var(--muted);margin:0;max-width:60ch;}
.tone-red .value-row{border-top:1px solid rgba(255,255,255,.25);}
.tone-red .value-row:last-child{border-bottom:1px solid rgba(255,255,255,.25);}
.tone-red .value-row::before{color:#fff;}
.tone-red .value-row h3{color:#fff;}
.tone-red .value-row p{color:rgba(255,255,255,.78);}

/* Cards grid (leadership, careers locations) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card{background:var(--white);border:1px solid var(--line);padding:0;overflow:hidden;border-radius:28px;display:flex;flex-direction:column;}
.card img{width:100%;height:auto;display:block;}
.card-body{padding:22px;}
.card h3{font-size:1.15rem;margin-bottom:.15em;}
.card .role{font-family:var(--body);font-size:.72rem;font-weight:600;text-transform:uppercase;color:var(--red);letter-spacing:.05em;margin-bottom:.6em;display:block;}
.card p{color:var(--muted);font-size:.94rem;margin:0;}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.cards{grid-template-columns:1fr;}}

.avatar{
  width:100%;height:280px;background:linear-gradient(135deg,var(--ink),var(--red-deep));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--display);font-size:2.4rem;font-weight:700;
}

/* Featured leadership layout: CEO larger and separate, rest aligned together */
.leadership-featured{
  display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center;
  margin-bottom:24px;
  background:var(--white);border:1px solid var(--line);overflow:hidden;border-radius:28px;
}
.leadership-featured img{width:100%;height:auto;max-height:340px;object-fit:contain;padding:24px;display:block;}
.leadership-featured .card-body{padding:36px;display:flex;flex-direction:column;justify-content:center;}
.leadership-featured h3{font-size:1.7rem;}
.leadership-featured .role{font-size:.8rem;}
.leadership-featured p{font-size:1.02rem;}
@media(max-width:800px){
  .leadership-featured{grid-template-columns:1fr;}
  .leadership-featured img{min-height:320px;}
}

/* Pillars (ESG) */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.pillar{background:var(--white);border:1px solid var(--line);padding:26px 22px;text-align:left;position:relative;border-radius:6px;}
.pillar b{font-family:var(--body);color:var(--red);font-size:.72rem;font-weight:700;text-transform:uppercase;display:block;margin-bottom:.6em;}
@media(max-width:900px){.pillars{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.pillars{grid-template-columns:1fr;}}

/* CTA band */
.cta-band{background:var(--ink);color:#fff;text-align:left;padding:58px 0;}
.cta-band.cta-red{background:var(--red);}
.cta-band.cta-red .eyebrow{color:#fff;}
.cta-band.cta-video{position:relative;overflow:hidden;}
.cta-video-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.cta-band.cta-video::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(20,20,21,.85) 0%, rgba(20,20,21,.5) 50%, rgba(20,20,21,.25) 100%);
  pointer-events:none;
}
.cta-band.cta-video.pattern-edge::before{z-index:1;}
.cta-band.cta-video .wrap{position:relative;z-index:2;}
.cta-band.cta-red .eyebrow::before{color:#fff;}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);max-width:20ch;margin:0 0 .3em;}
.cta-band p{color:rgba(255,255,255,.7);max-width:52ch;margin:0 0 1.6em;}
.cta-band.cta-red p{color:rgba(255,255,255,.9);}
.cta-actions{display:flex;justify-content:flex-start;gap:14px;flex-wrap:wrap;}

/* Flavour strip (Arada) — brand-palette tints only */
.flavour-strip{display:flex;gap:2px;background:var(--line);}
.flavour-swatch{flex:1;height:120px;}
.flavour-swatch.a{background:var(--red);}
.flavour-swatch.b{background:var(--ink);}
.flavour-swatch.c{background:var(--silver-deep);}
.flavour-swatch.d{background:var(--red-deep);}

/* Forms */
.form-card{background:var(--white);border:1px solid var(--line);padding:40px;max-width:640px;border-radius:28px;}
.field{margin-bottom:20px;}
.field label{display:block;font-family:var(--body);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);background:var(--silver-soft);
  font-family:var(--body);font-size:1rem;color:var(--text);border-radius:14px;
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--red);background:#fff;}
.form-note{font-size:.85rem;color:var(--muted);margin-top:16px;}
.form-success{display:none;background:var(--red-soft);border:1px solid var(--red);color:var(--red-deep);padding:16px;font-size:.92rem;margin-top:18px;}

/* Contact split */
.or-use-these{
  font-family:var(--body);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.or-use-these::after{content:"";flex:1;height:1px;background:var(--line);}
.contact-info{display:grid;gap:18px;}
.contact-info .item{border-top:1px solid var(--line);padding-top:16px;}
.contact-info .item b{font-family:var(--body);font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--red);display:block;margin-bottom:.3em;}

/* Footer */
.site-footer{background:var(--ink);color:rgba(255,255,255,.85);padding:52px 0 22px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px;align-items:start;}
.footer-brand .logo img{height:52px;margin-bottom:1em;}
.footer-brand p{color:rgba(255,255,255,.6);max-width:32ch;font-family:var(--display);font-size:1rem;font-weight:500;}
.footer-col h4{font-family:var(--body);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:1em;}
.footer-col a{display:block;color:rgba(255,255,255,.7);padding:6px 0;font-size:.94rem;}
.footer-col a:hover{color:#fff;}
.footer-social{display:flex;gap:12px;margin-top:1em;}
.footer-social a{
  width:36px;height:36px;border:1px solid rgba(255,255,255,.25);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--body);font-size:.7rem;font-weight:700;
}
.footer-social a:hover{background:var(--red);border-color:var(--red);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  border-top:1px solid rgba(255,255,255,.14);padding-top:24px;
  font-family:var(--body);font-size:.75rem;color:rgba(255,255,255,.55);
}
.footer-bottom a{color:rgba(255,255,255,.55);}
.footer-bottom a:hover{color:#fff;}
@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .footer-top{grid-template-columns:1fr;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}

/* ============================================================
   ANIMATION LAYER
   ============================================================ */

/* Hero: staggered fade/rise entrance on load (not scroll-triggered) */
.media-hero .wrap > *{
  animation: heroFade .8s cubic-bezier(.2,.7,.2,1) both;
}
.media-hero .wrap > *:nth-child(1){animation-delay:.05s;}
.media-hero .wrap > *:nth-child(2){animation-delay:.16s;}
.media-hero .wrap > *:nth-child(3){animation-delay:.28s;}
.media-hero .wrap > *:nth-child(4){animation-delay:.4s;}
@keyframes heroFade{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:none;}
}

/* Subtle parallax on hero photography (desktop only — fixed attachment is unreliable on mobile) */
@media (min-width:900px){
  .media-hero{background-attachment:fixed;}
}

/* Scroll-reveal: applied via JS to content blocks as they enter the viewport */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{opacity:1;transform:none;}

/* Sticky header: compact + shadow once the page has scrolled */
.site-header{transition:box-shadow .25s ease;}
.site-header.scrolled{box-shadow:0 8px 24px rgba(20,20,21,.1);}
.site-header.scrolled .nav{padding:10px 0;}
.nav, .logo img{transition:padding .25s ease, height .25s ease;}

/* Card + quote hover lift */
.card{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(20,20,21,.14);}
.quote-card{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;}
.quote-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(20,20,21,.1);}
.pillar{transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.pillar:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(20,20,21,.1);border-color:var(--red);}

/* Flavour strip: swatches grow playfully on hover */
.flavour-swatch{transition:flex-grow .45s cubic-bezier(.2,.8,.2,1);cursor:default;}
.flavour-strip:hover .flavour-swatch{flex-grow:1;}
.flavour-swatch:hover{flex-grow:2.6 !important;}

/* Stat numbers: gentle pop-in handled by .reveal + a slight scale */
.stat.reveal{transform:translateY(22px) scale(.96);}
.stat.reveal.is-visible{transform:none;}

/* Value row numbers: count in with a light delay staircase (set via inline style by JS) */
.value-row{transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}


/* ---------- Age verification gate ---------- */
.age-gate{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;
  padding:24px;
}
.age-gate::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(160deg, rgba(163,21,26,.42) 0%, rgba(20,20,21,.46) 55%, rgba(20,20,21,.3) 100%);
}
.age-gate::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url('images/komari-pattern.png');
  background-repeat:repeat;background-size:260px auto;
  opacity:.14;pointer-events:none;
}
.age-gate-card{
  position:relative;z-index:1;
  background:var(--white);
  max-width:440px;width:100%;
  text-align:center;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(20,20,21,.4);
  animation:ageGateIn .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes ageGateIn{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:none;}}
.age-gate-top{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg, var(--red) 0%, var(--red-deep) 100%);
  padding:36px 36px 46px;
}
.age-gate-top::before{
  content:"";position:absolute;inset:0;
  background-image:url('images/komari-pattern.png');
  background-repeat:repeat;background-size:200px auto;
  opacity:.2;filter:brightness(0) invert(1);
}
.age-gate-top img{position:relative;height:34px;margin:0 auto 16px;display:block;filter:brightness(0) invert(1);}
.age-gate-eyebrow{
  position:relative;color:rgba(255,255,255,.9);font-family:var(--body);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;margin:0;
}
.age-gate-body{padding:36px 36px 32px;}
.age-gate-card h2{font-size:1.7rem;margin-bottom:.4em;}
.age-gate-card p{color:var(--muted);font-size:.94rem;}
.age-gate-actions{display:flex;gap:14px;justify-content:center;margin:24px 0 18px;}
.age-gate-actions .btn{flex:1;justify-content:center;}
.age-gate-actions .btn-solid{box-shadow:0 14px 28px rgba(163,21,26,.28);}
.age-gate-note{font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:4px;}
.age-gate-body.age-gate-denied h2{color:var(--red);}

/* ============================================================
   HERO SLIDER (homepage) — full-screen, fade + slow Ken Burns zoom, 3 slides
   ============================================================ */
.hero-slider{
  position:relative;height:100vh;min-height:560px;overflow:hidden;
}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity 2.2s ease;
  overflow:hidden;
}
.hero-slide.is-active{opacity:1;visibility:visible;}
.hero-slide-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1) translate(0,0);
  transition:transform 12s ease-out;
}
.hero-slide.is-active .hero-slide-bg{transform:scale(1.18) translate(-2%,-1.5%);}
.hero-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(20,20,21,.82) 0%, rgba(20,20,21,.42) 55%, rgba(20,20,21,.35) 100%);
}
.hero-slide-content{position:relative;z-index:1;height:100%;display:flex;align-items:flex-end;padding-bottom:100px;}
.hero-slide-content .wrap{width:100%;}
.hero-slide-text{
  color:#fff;font-family:var(--display);font-weight:600;
  font-size:clamp(1.9rem,3.8vw,2.9rem);
  line-height:1.22;letter-spacing:-0.01em;max-width:26ch;margin-bottom:.5em;
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease .3s, transform .9s ease .3s;
}
.hero-slide-arrow{
  display:block;color:#fff;
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease .45s, transform .9s ease .45s;
}
.hero-slide.is-active .hero-slide-text, .hero-slide.is-active .hero-slide-arrow{opacity:1;transform:none;}
.hero-slider-dots{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;gap:10px;
}
.hero-slider-dots button{
  width:34px;height:3px;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0;
  transition:background .3s ease;
}
.hero-slider-dots button.is-active{background:var(--red);}

/* ============================================================
   BRAND PATTERN — subtle texture accents (Komari brand guideline)
   ============================================================ */
.pattern-strip{
  height:96px;
  background-color:var(--silver-soft);
  background-image:url('images/komari-pattern.png');
  background-repeat:repeat-x;background-size:auto 130%;background-position:center;
  opacity:1;
}
.tone-ink.pattern-edge, .tone-red.pattern-edge, .cta-band.pattern-edge,
.tone-silver.pattern-edge, .tone-white.pattern-edge{position:relative;}
.tone-ink.pattern-edge::before, .tone-red.pattern-edge::before, .cta-band.pattern-edge::before{
  content:"";position:absolute;inset:0;
  background-image:url('images/komari-pattern.png');
  background-repeat:repeat;background-size:340px auto;
  opacity:.24;pointer-events:none;
}
.tone-silver.pattern-edge::before, .tone-white.pattern-edge::before{
  content:"";position:absolute;inset:0;
  background-image:url('images/komari-pattern.png');
  background-repeat:repeat;background-size:340px auto;
  opacity:.16;pointer-events:none;
}
.pattern-edge .wrap{position:relative;z-index:1;}
.pattern-edge .cards, .pattern-edge .pillars, .pattern-edge .values-list{position:relative;z-index:1;}
.site-footer{position:relative;}
.site-footer::before{
  content:"";position:absolute;inset:0;
  background-image:url('images/komari-pattern.png');
  background-repeat:repeat;background-size:300px auto;background-position:top left;
  opacity:.24;pointer-events:none;
}
.site-footer .wrap{position:relative;z-index:1;}

/* ============================================================
   FULL-SCREEN TESTIMONIAL SLIDER ("In their own words")
   ============================================================ */
.testimonial-fullscreen{
  position:relative;min-height:auto;display:flex;align-items:center;
  background:#0d0d0d;
  color:#fff;overflow:hidden;padding:58px 0;
}
.testimonial-fullscreen::before{
  content:"";position:absolute;inset:0;
  background-image:url('images/komari-pattern.png');
  background-repeat:repeat;background-size:380px auto;
  opacity:.2;pointer-events:none;
}
.testimonial-fullscreen .wrap{position:relative;z-index:1;}
.testimonial-fullscreen .eyebrow{color:var(--silver);justify-content:flex-start;}
.testimonial-fullscreen .eyebrow::before{color:var(--red);}
.testimonial-slider-full{position:relative;max-width:980px;width:100%;margin:0;min-height:150px;text-align:left;}
.testimonial-slide-full{
  position:absolute;inset:0;
  display:flex;align-items:center;gap:36px;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s ease, transform .7s ease;
  pointer-events:none;
}
.testimonial-slide-full.is-active{opacity:1;transform:none;pointer-events:auto;position:relative;}
.who-photo{
  width:104px;height:104px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(255,255,255,.25);
  flex-shrink:0;
}
.who-photo img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.testimonial-text{flex:1;min-width:0;}
.testimonial-text::before{content:"\201C";font-family:var(--display);font-size:2.6rem;color:var(--red);line-height:1;display:block;margin-bottom:.05em;font-weight:700;}
.testimonial-slide-full p{font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,2.6vw,1.6rem);color:#fff;}
.testimonial-slide-full .who{font-family:var(--body);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--silver);}
.testimonial-fullscreen .testimonial-dots{justify-content:center;margin-top:32px;}
.testimonial-fullscreen .testimonial-dots button{background:rgba(255,255,255,.25);}
.testimonial-fullscreen .testimonial-dots button.is-active{background:var(--red);}
@media(max-width:640px){
  .testimonial-slide-full{flex-direction:column;align-items:flex-start;gap:16px;}
  .who-photo{width:76px;height:76px;}
}

/* ============================================================
   STATS — richer, better-aligned, on brand-dark band
   ============================================================ */
.stats-band{background:var(--ink);color:#fff;padding:0;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:transparent;border:none;}
.stat{
  background:transparent;padding:52px 32px;text-align:left;
  border-left:1px solid rgba(255,255,255,.14);
}
.stat:first-child{border-left:none;}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.2rem,4vw,3rem);color:var(--red);margin-bottom:.15em;}
.stat span{font-family:var(--body);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.65);}
@media(max-width:800px){
  .stats{grid-template-columns:1fr 1fr;}
  .stat{border-left:none;border-top:1px solid rgba(255,255,255,.14);}
  .stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.14);}
}

/* ============================================================
   LEADERSHIP — paired rows so nobody sits alone at the bottom
   ============================================================ */
.leadership-pairs{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.leadership-pairs .card img{
  width:100%;height:auto;max-height:260px;object-fit:contain;
  padding:20px;background:var(--silver-soft);
}
@media(max-width:700px){.leadership-pairs{grid-template-columns:1fr;}}

/* Pattern banner — replaces a photo with the Komari design pattern itself as the visual */
.pattern-banner{
  position:relative;padding:78px 0;background:var(--white);overflow:hidden;
  min-height:88vh;display:flex;align-items:center;
}
.pattern-banner::before{
  content:"";position:absolute;inset:0;
  background-image:url('images/komari-pattern.png');
  background-repeat:repeat;background-size:420px auto;
  opacity:.16;
}
.pattern-banner .wrap{position:relative;z-index:1;width:100%;}
.pattern-banner .eyebrow{color:var(--red);}
.pattern-banner .eyebrow::before{color:var(--red);}
.pattern-banner h2{color:var(--ink);max-width:20ch;}
.pattern-banner p{color:var(--muted);font-size:1.1rem;max-width:60ch;}

/* ============================================================
   SCROLL-SNAP PAGE — opt-in per page via body.scroll-snap-page,
   turns each top-level section into a full 100vh snap point.
   Scoped so it never affects the shared components (.media-hero,
   .pattern-banner, .stack-bg-plain, .cta-band) on other pages that
   reuse them without opting in.
   ============================================================ */
body.scroll-snap-page{scroll-snap-type:y mandatory;}
body.scroll-snap-page .media-hero{height:100vh;scroll-snap-align:start;}
body.scroll-snap-page .pattern-banner{
  min-height:100vh;display:flex;align-items:center;
  scroll-snap-align:start;
}
body.scroll-snap-page .pattern-banner .wrap{width:100%;}
body.scroll-snap-page .stack-bg-plain{height:100vh;scroll-snap-align:start;}
body.scroll-snap-page .stack-bg-plain img{height:100%;}
body.scroll-snap-page .cta-band{
  min-height:100vh;display:flex;align-items:center;
  scroll-snap-align:start;
}
body.scroll-snap-page .cta-band .wrap{width:100%;}
body.scroll-snap-page .cta-band.cta-compact{min-height:auto;padding:58px 0;}
body.scroll-snap-page section.tone-white,
body.scroll-snap-page section.tone-silver{
  min-height:100vh;display:flex;align-items:center;
  scroll-snap-align:start;
}
body.scroll-snap-page section.tone-white .wrap,
body.scroll-snap-page section.tone-silver .wrap{width:100%;}
body.scroll-snap-page .stack-bg-left{height:100vh;scroll-snap-align:start;}
body.scroll-snap-page .stack-bg-left img{height:100%;object-fit:cover;}

/* Scale up image and text presence within the full-screen sections above,
   so content fills the taller viewport rather than looking small and
   centered. Note: giving split-layout photos a min-height + cover here
   does mean a slight crop on these specific images (versus the natural,
   uncropped sizing used everywhere else on the site) — that trade-off is
   what makes them read as "larger" within a full screen. */
body.scroll-snap-page section.tone-white .split-media img,
body.scroll-snap-page section.tone-silver .split-media img{
  min-height:56vh;object-fit:cover;
}
body.scroll-snap-page section.tone-white h1,
body.scroll-snap-page section.tone-white h2,
body.scroll-snap-page section.tone-silver h1,
body.scroll-snap-page section.tone-silver h2{
  font-size:clamp(2.3rem,4.3vw,3.2rem);
}
body.scroll-snap-page section.tone-white p,
body.scroll-snap-page section.tone-silver p{
  font-size:1.1rem;
}
body.scroll-snap-page .media-hero h1{font-size:clamp(2.8rem,6.4vw,4.8rem);}
body.scroll-snap-page .media-hero p{font-size:1.22rem;}
body.scroll-snap-page .card img{min-height:240px;object-fit:cover;}
body.scroll-snap-page .cards{gap:32px;}
body.scroll-snap-page .pillars{gap:20px;}
body.scroll-snap-page .pillar{padding:32px 26px;font-size:1.05rem;}