/* ============================================================
   SAAREK PRODUCTIONS — brand system (matches sales deck)
   Ivory paper · brand red #94022F + blue #204B92 · gold #D7B072
   League Spartan (display) · Open Sans (body) · Oswald (labels)
   ============================================================ */

:root{
  --ivory:      #FCFCFC;
  --ivory-2:    #F1F2F4;
  --paper:      #FFFFFF;
  --ink:        #111111;
  --ink-soft:   #111111;
  --taupe:      #111111;
  --taupe-2:    #8C8C8C;
  --wine:       #93002F;
  --wine-2:     #73001F;
  --berry:      #93002F;
  --blue:       #204B92;
  --blue-deep:  #013362;
  --blue-soft:  #D7B072;
  --gold-accent:#D7B072;
  /* accent vars: --gold = blue accent on LIGHT bg; --gold-soft = gold accent on DARK bg */
  --gold:       #204B92;
  --gold-soft:  #D7B072;
  --line:       rgba(17,17,17,0.13);
  --line-soft:  rgba(17,17,17,0.07);
  --line-light: rgba(255,255,255,0.28);

  --display: "League Spartan", "Hanken Grotesk", sans-serif;
  --serif:   "League Spartan", "Hanken Grotesk", sans-serif;
  --sans:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --label:   "League Spartan", "Hanken Grotesk", sans-serif;

  --wrap: 1280px;
  --pad: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:18px;
  line-height:1.7;
  color:var(--ink-soft);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--wine); color:#fff; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); font-weight:600; margin:0; }
.display{
  font-family:var(--display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-0.005em;
  color:var(--ink);
}
.d-hero{ font-size:clamp(2.1rem, 4.2vw, 4rem); line-height:1.02; letter-spacing:-0.01em; }
.d-1{ font-size:clamp(2rem, 4vw, 3.5rem); line-height:1.05; letter-spacing:-0.01em; }
.d-2{ font-size:clamp(1.5rem, 2.9vw, 2.6rem); line-height:1.08; }
.d-3{ font-size:clamp(1.3rem, 2vw, 1.7rem); line-height:1.18; font-weight:500; }
/* Slide-style headings: uppercase + bold, like the presentation */
h1.display, h2.display{ text-transform:uppercase; letter-spacing:0; }
h3.display, .d-3{ text-transform:none; }
.serif-it{ font-style:normal; }
.ink-accent{ color:var(--wine); }

.eyebrow{
  font-family:var(--label);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--wine);
  display:inline-flex;
  align-items:center;
  gap:0.7em;
}
.eyebrow--light{ color:var(--gold-accent); text-shadow:0 1px 14px rgba(12,6,5,0.55); }
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:currentColor;
  opacity:0.7;
}
.eyebrow.no-rule::before{ display:none; }

.lead{
  /* font-size:clamp(1.15rem, 1.7vw, 1.45rem); */
  line-height:1.6;
  color:var(--ink-soft);
  font-weight:400;
}
p{ margin:0 0 1.1em; }
.muted{ color:var(--taupe); }
strong{ color:var(--ink); font-weight:600; }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding:clamp(64px, 5vw, 150px) 0; }
.section--tight{ padding:clamp(48px, 6vw, 96px) 0; }
.center{ text-align:center; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

.grid{ display:grid; gap:clamp(32px, 5vw, 84px); }
.split{ grid-template-columns:1fr 1fr; align-items:center; }
.split--40{ grid-template-columns:0.95fr 1.15fr; }
.split--60{ grid-template-columns:1.15fr 0.85fr; }
@media(max-width:1080px){
  .split,.split--40,.split--60{ grid-template-columns:1fr; gap:40px; }
}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  background:rgba(255,255,255,0.9);
  backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 var(--line-soft);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-solid{
  background:rgba(255,255,255,0.97);
  padding:12px var(--pad);
  box-shadow:0 8px 30px -20px rgba(34,27,25,0.55), 0 1px 0 var(--line-soft);
}
.brand{ display:flex; align-items:center; line-height:1; }
.brand__logo{ width:auto; display:block; }
.brand .brand__logo{ height:42px; transition:height .5s var(--ease); }
.site-header.is-solid .brand .brand__logo{ height:34px; }
.brand__logo--white{ display:none; }
.brand__logo--color{ display:block; }
@media(max-width:560px){
  .brand .brand__logo{ height:34px; }
  .site-header.is-solid .brand .brand__logo{ height:30px; }
}

.nav{ display:flex; align-items:center; gap:clamp(16px,2vw,30px); }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,1.9vw,28px); }
.nav-links a{
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  /* letter-spacing:0.14em; */
  text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  padding:6px 0;
  white-space:nowrap;
}
.site-header.on-dark .nav-links a{ color:var(--ink-soft); }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--wine); transition:right .4s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }

/* language switcher */
.lang{
  display:flex; align-items:center; gap:2px;
  font-family:var(--sans); font-size:0.7rem; font-weight:600; letter-spacing:0.08em;
}
.lang button{
  appearance:none; border:0; background:none; cursor:pointer;
  font:inherit; color:var(--taupe); padding:5px 7px; border-radius:3px;
  text-transform:uppercase; transition:color .25s, background .25s;
}
.site-header.on-dark .lang button{ color:var(--gold); font-weight: 600; }
.lang button:hover{ color:var(--wine)!important; }
.lang button.active{ color:var(--wine)!important; }
.lang .sep{ color:var(--line); }

.nav-toggle{
  display:none; appearance:none; border:0; background:none; cursor:pointer;
  width:30px; height:22px; position:relative;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s;
}
.site-header.on-dark .nav-toggle span{ background:var(--ink); }
.nav-toggle span:nth-child(1){ top:2px; }
.nav-toggle span:nth-child(2){ top:10px; }
.nav-toggle span:nth-child(3){ top:18px; }
body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* @media(max-width:1080px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; align-items:center;
    gap:30px; background:var(--ivory);
    opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
  }
  body.menu-open .nav-links{ opacity:1; pointer-events:auto; }
  .nav-links a{ font-size:1.05rem; color:var(--ink-soft) !important; }
  .nav-links a::after{ background:var(--wine) !important; }
} */

@media (max-width: 1080px) {

  .nav-links {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 999;
    transition: 0.3s ease;
  }

  body.menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-toggle {
    display: block;
    z-index: 1000;
  }

  /* The header's backdrop-filter makes it the containing block for the
     fixed overlay, trapping the menu inside the ~90px header bar and
     clipping the top links. Drop it while the menu is open so the
     overlay fills the whole viewport and every link is reachable. */
  body.menu-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Breathing room so links clear the toggle, with scroll as a safety
     net on very short (landscape) screens. */
  .nav-links {
    padding: 76px 22px 48px;
    gap: 22px;
  }
  .nav-links a {
    font-size: 1.05rem;
    padding: 8px 0;
  }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.7em;
  font-family:var(--sans); font-size:0.76rem; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  padding:1.05em 1.9em; border-radius:2px; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  border:1px solid transparent; white-space:nowrap;
}
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(5px); }
.btn--wine{ background:var(--wine); color:#fff; }
.btn--wine:hover{ background:var(--wine-2); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:none; }
.btn--ghost:hover{ border-color:var(--wine); color:var(--wine); }
.btn--light{ background:#fff; color:var(--wine); border:1px solid #fff; }
.btn--light:hover{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.7); }
.btn--outline-light{ border:1px solid rgba(255,255,255,0.6); color:#fff; background:rgba(255,255,255,0.08); }
.btn--outline-light:hover{ background:#fff; color:var(--wine); border-color:#fff; }
.linkarrow{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--sans); font-size:16px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--wine);
}
.linkarrow .arrow{ transition:transform .35s var(--ease); }
.linkarrow:hover .arrow{ transform:translateX(5px); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:clamp(120px, 16vh, 172px); padding-bottom:clamp(48px, 8vh, 116px); overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(24,15,13,0.5) 0%, rgba(24,15,13,0) 24%),
             linear-gradient(90deg, rgba(24,15,13,0.74) 0%, rgba(24,15,13,0.38) 40%, rgba(24,15,13,0) 72%),
             linear-gradient(0deg, rgba(24,15,13,0.42) 0%, rgba(24,15,13,0) 46%);
}
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero .display{ color:#fff; text-shadow:0 2px 34px rgba(12,6,5,0.42); }
.hero__sub{ color:rgba(255,255,255,0.9); text-shadow:0 1px 20px rgba(12,6,5,0.5); }
.scroll-cue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  width:1px; height:46px; background:rgba(255,255,255,0.5); overflow:hidden;
}
.scroll-cue::after{
  content:""; position:absolute; top:-46px; left:0; width:1px; height:46px; background:#fff;
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(0)} 60%,100%{transform:translateY(92px)} }

/* page hero (interior) */
.pagehero{
  position:relative; min-height:69vh; display:flex; align-items:flex-end;
  padding-top:clamp(124px,15vh,156px); padding-bottom:clamp(40px,6vw,80px); overflow:hidden;
}
.pagehero__bg{ position:absolute; inset:0; z-index:0; }
.pagehero__bg img{ width:100%; height:100%; object-fit:cover; }
.pagehero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(24,15,13,0.5) 0%, rgba(24,15,13,0) 26%),
             linear-gradient(90deg, rgba(24,15,13,0.68) 0%, rgba(24,15,13,0.28) 52%, rgba(24,15,13,0) 82%),
             linear-gradient(0deg, rgba(24,15,13,0.5) 0%, rgba(24,15,13,0) 52%);
}
.pagehero__inner{ position:relative; z-index:2; width:100%; }
.pagehero .display{ color:#fff; text-shadow:0 2px 34px rgba(12,6,5,0.42); }
.pagehero__sub{ color:rgba(255,255,255,0.9); max-width:54ch; text-shadow:0 1px 20px rgba(12,6,5,0.5); }

/* ---------- Stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(5,1fr);
}
.stat{ padding:6px clamp(22px,2.6vw,40px);  min-width:0; }
.stat:first-child{ border-left:0; padding-left:0; }
.stat__num{
  font-family:var(--serif); font-weight:500; color:var(--wine);
  font-size:clamp(2.4rem,4.4vw,3.9rem); line-height:1; letter-spacing:-0.01em;
  white-space:nowrap;
}
.stat__unit{ font-family:var(--serif); font-size:0.5em; color:var(--berry); margin-left:0.15em; }
.stat__label{ display:block; margin-top:12px; font-size:18px; line-height:1.45; color:var(--ink-soft); }
@media(max-width:1024px){
  .stats{ grid-template-columns:1fr 1fr; gap:34px 0; }
  .stat{ border-left:1px solid var(--line); padding-left:clamp(16px,4vw,30px); }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
}
@media(max-width:560px){
  .stats{ grid-template-columns:1fr; gap:28px 0; justify-items: start !important; }
  .stat,.stat:nth-child(odd){ border-left:0; padding-left:0; }
}
.stats--ondark .stat{ border-color:var(--line-light); }
.stats--ondark .stat__num{ color:#fff; }
.stats--ondark .stat__unit{ color:var(--gold-soft); }
.stats--ondark .stat__label{ color:rgba(255,255,255,0.74); }

/* certified stat (stacked label + list) */
.stat__certh{ font-family:var(--serif); font-weight:500; color:#fff; font-size:clamp(1.7rem,2.6vw,2.45rem); line-height:1.04; }
.stat__certs{ list-style:none; margin:14px 0 0; padding:0; }
.stat__certs li{ font-family:var(--sans); font-size:0.86rem; line-height:1.5; color:rgba(255,255,255,0.82); padding:1px 0; letter-spacing:0.02em; }

/* ---------- Feature list (hairline rows, no boxes) ---------- */
.flist{ border-top:1px solid var(--line); }
.flist li{ list-style:none; }
.flist .row{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,46px);
  align-items:baseline; padding:clamp(2px,1vw,34px) 0; border-bottom:1px solid var(--line);
}
.flist .row { font-family:var(--serif); font-size:18px; color:var(--gold); font-weight:500; }
.idx{ font-family:var(--serif); font-size:clamp(1.6rem, 2.9vw, 2.3rem); color:var(--gold); }
.flist .row h4{ font-size:23px; color: var(--gold); }
.flist .row p{ margin:0.4em 0 0; color:var(--taupe); font-size:20px; }
.flist ul{ margin:0; padding:0; }

/* ---------- Icon features (deck-style) ---------- */
.ic{ display:block; }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,4vw,56px) clamp(28px,4vw,50px); }
@media(max-width:860px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:540px){ .feat-grid{ grid-template-columns:1fr; } }
.feat .ic{ width:48px; height:48px; }
.feat h4{ margin-top:18px; font-size:clamp(1.3rem,1.5vw,1.3rem); line-height:1.24; }
.feat p{ margin:8px 0 0; color:var(--taupe); font-size:0.96rem; line-height:1.55; }
.feat-grid--ondark .feat h4{ color:#fff; }
.feat-grid--ondark .feat p{ color:rgba(255,255,255,0.78); }
.feat-grid--compact{ grid-template-columns:repeat(4,1fr); gap:clamp(26px,3vw,40px) clamp(22px,3vw,36px); }
.feat-grid--compact .feat .ic{ width:60px; height:60px; }
.feat-grid--compact .feat h4{ margin-top:14px; font-size:1rem; font-weight:500; line-height:1.3; }
@media(max-width:860px){ .feat-grid--compact{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .feat-grid--compact{ grid-template-columns:1fr 1fr; } }

/* inline icon + label (lists, contact) */
.ic-row{ display:flex; align-items:flex-start; gap:16px; }
.ic-row .ic{ width:30px; height:30px; flex:none; margin-top:2px; }
.ticks.ticks--icon{ border:0; }
.ticks.ticks--icon li{ position:relative; padding:0.6em 0 0.6em 64px; border-bottom:1px solid var(--line-soft); }
.ticks.ticks--icon li::before{ display:none; }
.ticks.ticks--icon li .ic{ position:absolute; left:0; top:0.55em; width:36px; height:36px; }

/* simple ticked list */
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative; padding:0.62em 0 0.62em 1.7em; border-bottom:1px solid var(--line-soft);
  color:var(--ink-soft);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:1.15em; width:8px; height:8px;
  border:1px solid var(--gold); transform:rotate(45deg);
}
.ticks.tight li{ padding-top:0.42em; padding-bottom:0.42em; }
.ticks--plain li{ border-bottom:0; }

/* columns of applications */
.cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.col{ padding:20px clamp(10px, 0vw, 30px) 10px;; border-left:1px solid var(--line); }
.col:first-child{ border-left:0; padding-left:0; }
.col h4{ font-size:1.2rem; margin-bottom:6px; }
.col .ck{ font-size:20px; letter-spacing:0.14em; text-transform:uppercase; color:var(--wine); font-weight:700; font-family:var(--label); }
.col ul{ list-style:none; margin:16px 0 0; padding:0; }
.col li{ padding:0.5em 0; border-bottom:1px solid var(--line-soft); font-size:18px; color:var(--ink-soft); }
@media(max-width:860px){
  .cols{ grid-template-columns:1fr; }
  .col{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-right:0; }
  .col:first-child{ border-top:0; }
}

/* tags / pills for tastes */
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--sans); font-size:0.92rem; letter-spacing:0.01em; color:var(--ink);
  border:1px solid var(--line); border-radius:100px; padding:0.5em 1.2em 0.5em 0.9em; background:var(--paper);
}
.tag .ic{ width:22px; height:22px; }

/* ---------- Bands (full-bleed image) ---------- */
.band{ position:relative; overflow:hidden; }
.band__bg{ position:absolute; inset:0; z-index:0; }
.band__bg img{ width:100%; height:100%; object-fit:cover; }
.band__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(28,14,16,0.9) 0%, rgba(28,14,16,0.74) 50%, rgba(28,14,16,0.62) 100%), linear-gradient(0deg, rgba(28,14,16,0.42) 0%, rgba(28,14,16,0.16) 55%, rgba(28,14,16,0.08) 100%); }
.band__inner{ position:relative; z-index:2; padding:clamp(72px,5vw,170px) 0; }
.band:has(.band__bg) .band__inner .display,
.band:has(.band__bg) .band__inner h2,
.band:has(.band__bg) .band__inner h3{ text-shadow:0 2px 32px rgba(10,5,5,0.42); }
.band:has(.band__bg) .band__inner p{ text-shadow:0 1px 18px rgba(10,5,5,0.46); }
.band:has(.band__bg) .band__inner .ticks li{ text-shadow:0 1px 14px rgba(10,5,5,0.5); }
.band:has(.band__bg) .display, .band:has(.band__bg) h2, .band:has(.band__bg) h3,
.band--wine .display, .band--wine h2, .band--wine h3,
.band--blue .display, .band--blue h2, .band--blue h3,
.band--ink .display, .band--ink h2, .band--ink h3{ color:#fff; }
.band:has(.band__bg) p, .band--wine p, .band--blue p, .band--ink p{ color:rgba(255,255,255,0.82); }

.band--wine{ background:var(--wine); color:#fff; }
.band--wine .display{ color:#fff; }
.band--blue{ background:var(--blue); color:#fff; }
.band--blue .display{ color:#fff; }
.band--blue .eyebrow{ color:var(--gold-accent); }
.band--blue .stats--ondark .stat__unit{ color:var(--gold-accent);}
.band--ivory2{ background:var(--ivory-2); }
.band--ink{ background:var(--ink); }
.band--ink .display{ color:#fff; }
.band--ink p{ color:rgba(255,255,255,0.74); }

/* figure with caption */
.figure{ position:relative; }
.figure img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
.figure--tall img{ aspect-ratio:4/5; }
.figure--wide img{ aspect-ratio:16/10; }
.figcap{ margin-top:14px; font-size:18px; letter-spacing:0.14em; text-transform:uppercase; color:var(--taupe); font-family:var(--label); }

.kbox{ background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:clamp(26px,3vw,42px); }

/* embedded map */
.map-embed{ position:relative; width:100%; height:clamp(320px,46vw,520px); border-radius:4px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 64px -34px rgba(34,27,25,0.45); }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Process ---------- */
.steps{ counter-reset:step; border-top:1px solid var(--line); }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,48px);
  padding:clamp(2px, 1vw, 34px) 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.step__n{ counter-increment:step; font-family:var(--serif); font-size:clamp(1.6rem,2.9vw,2.3rem); color:var(--wine); line-height:1; }
.step__n::before{ content:counter(step,decimal-leading-zero); }
.step h4{ font-size:23px; }

/* ---------- Markets ---------- */
.markets{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); }
@media(max-width:760px){ .markets{ grid-template-columns:1fr; } }
.market h4{ font-size:1.05rem; }
.market .ck{ font-size:0.82rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--wine); font-weight:500; font-family:var(--label); display:block; margin-bottom:14px; }
.market ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:24px; }
.market li{ padding:0.4em 0; font-size:0.95rem; color:var(--ink-soft); border-bottom:1px solid var(--line-soft); }

/* markets — segments with country chips */
.markets-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
@media(max-width:680px){ .markets-2{ grid-template-columns:1fr; gap:38px; } }
.market-block .ck{ display:block; font-size:0.82rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--wine); font-weight:500; font-family:var(--label); margin-bottom:18px; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ font-family:var(--sans); font-size:0.92rem; color:var(--ink); border:1px solid var(--line); border-radius:100px; padding:0.46em 1.05em; background:var(--paper); }

/* markets — label + inline country list */
.markets-list{ border-top:1px solid var(--line); }
.market-row{ display:grid; grid-template-columns:240px 1fr; gap:clamp(16px,3vw,52px); padding:clamp(20px,2.6vw,30px) 0; border-bottom:1px solid var(--line); align-items:baseline; }
.market-row .ck{ display:block; font-size:18px; letter-spacing:0.16em; text-transform:uppercase; color:var(--wine); font-weight:500; font-family:var(--label); }
.market-row .countries{ margin:0; font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ink); line-height:1.75; }
.market-row .countries .sep{ color:var(--gold-accent); margin:0 0.55em; }
@media(max-width:680px){ .market-row{ grid-template-columns:1fr; gap:12px; } }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,0.7); padding:clamp(60px,8vw,110px) 0 40px; }
.site-footer a{ color:rgba(255,255,255,0.7); transition:color .25s; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(30px,4vw,60px); }
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:40px 30px; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid .brand-logo{ height:46px; width:auto; display:block; }
.footer-col h5{ font-family:var(--label); font-size:0.82rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 18px; font-weight:400; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ padding:0.4em 0; font-size:0.92rem; }
.footer-bottom{
  margin-top:clamp(48px,6vw,80px); padding-top:26px; border-top:1px solid rgba(255,255,255,0.12);
  display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between;
  font-size:0.78rem; letter-spacing:0.04em; color:rgba(255,255,255,0.45);
}

/* ---------- Reveal animation (progressive enhancement) ---------- */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
html.js .reveal.is-in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
.reveal.d5{ transition-delay:.40s; } .reveal.d6{ transition-delay:.48s; }
@media(prefers-reduced-motion:reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue::after{ animation:none; }
  html{ scroll-behavior:auto; }
}

.eb-line{ height:1px; background:var(--line); border:0; margin:0; }
.spacer-s{ height:clamp(18px,3vw,34px); } .spacer{ height:clamp(30px,5vw,56px); }
.pt-hero{ padding-top:148px; }
[hidden]{ display:none !important; }

/* ---------- Logo wall ---------- */
.logo-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
}
@media(max-width:980px){ .logo-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:760px){ .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:480px){ .logo-grid{ grid-template-columns:repeat(2,1fr); } }
.logo-cell{
  min-height:clamp(88px,10vw,116px); display:flex; align-items:center; justify-content:center;
  padding:clamp(10px,1.4vw,18px); background:#fcfcfc;
}
.logo-cell img{
  width:auto; height:auto; object-fit:contain !important;
  filter:saturate(1); transition:transform .4s var(--ease);
}
/* Uniform default size — applies ONLY to logos you haven't manually sized.
   Set an inline width or height on a logo to override it freely. */
.logo-cell img:not([style*="width"]):not([style*="height"]){ max-height:clamp(40px,4.8vw,58px); max-width:86%; }
.logo-cell--lg img:not([style*="width"]):not([style*="height"]){ max-height:clamp(54px,6.6vw,80px); max-width:95%; }
.logo-cell--sm img:not([style*="width"]):not([style*="height"]){ max-height:clamp(30px,3.6vw,44px); max-width:68%; }
.logo-cell:hover img{ transform:scale(1.05); }
.logo-cell--dark{ background:var(--ink); }

/* marquee variant (continuous scroll) */
.logo-marquee{ overflow:hidden; position:relative; }
.logo-marquee::before, .logo-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.logo-marquee::before{ left:0; background:linear-gradient(90deg, var(--ivory), transparent); }
.logo-marquee::after{ right:0; background:linear-gradient(270deg, var(--ivory), transparent); }
.logo-track{ display:flex; align-items:center; gap:clamp(40px,6vw,84px); width:max-content; animation:logoscroll 60s linear infinite; }
.logo-marquee:hover .logo-track{ animation-play-state:paused; }
.logo-track img{ height:clamp(34px,4vw,52px); width:auto; object-fit:contain; flex:none; }
@keyframes logoscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .logo-track{ animation:none; } }

/* ---------- EU / PRIA funding block ---------- */
.fund-block{ display:flex; flex-direction:column; gap:clamp(28px,3.5vw,44px); max-width:1000px; }
.fund-row{ display:grid; grid-template-columns:200px 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.fund-logo{ display:flex; align-items:center; }
.fund-logo img{ width:100%; max-width:200px; height:auto; object-fit:contain; }
.fund-text p{ font-size:0.92rem; line-height:1.6; color:var(--taupe); margin:0 0 0.8em; }
.fund-text p:last-child{ margin-bottom:0; }
@media(max-width:680px){
  .fund-row{ grid-template-columns:1fr; gap:18px; }
  .fund-logo img{ max-width:240px; }
}


/* ============================================================
   RESPONSIVE SAFETY NET — tablet & mobile only (max-width:1080px)
   The desktop layout (>1080px) is intentionally left UNTOUCHED.
   Desktop editing baked fixed-pixel widths/heights into many
   inline styles. Below the tablet breakpoint (where the hamburger
   menu takes over) those are neutralized so every heading, line of
   text and column reflows and stays fully visible on screen.
   ============================================================ */
@media (max-width:1080px){

  /* Lock background scroll while the mobile menu overlay is open. */
  body.menu-open{ overflow:hidden; }

  /* Any element carrying an EXPLICIT desktop pixel width (not a
     max-width / ch measure, and excluding headings handled below)
     must never push wider than its container or the viewport. */
  main [style*="; width:"]:not(img):not(h1):not(h2):not(h3):not(.display),
  main [style*=";width:"]:not(img):not(h1):not(h2):not(h3):not(.display),
  main [style^="width:"]:not(img):not(h1):not(h2):not(h3):not(.display){
    width:auto !important;
    max-width:100% !important;
  }

  /* Headings pinned to a desktop pixel measure: release the fixed width
     so they wrap to their natural / max-width:Xch measure instead of
     overflowing. Their inline max-width (if any) is preserved. */
  main h1[style*="width:"],
  main h2[style*="width:"],
  main h3[style*="width:"],
  main .display[style*="width:"]{ width:auto !important; }

  /* Application columns: release the fixed height so stacked content
     is never clipped. */
  main .col[style]{ height:auto !important; }

  /* Stat grids with an inline desktop column count (e.g. repeat(3,1fr))
     must still collapse, or numbers + labels overlap on small screens. */
  main .stats[style*="grid-template-columns"]{ grid-template-columns:1fr 1fr !important; }
}

/* Stats band — clear desktop inline offsets so items align when the
   grid drops to 2 columns (and then 1). */
@media (max-width:1024px){
  main .stat[style]{
    width:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}
@media (max-width:560px){
  main .stat[style]{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  main .stats[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
}


/* ============================================================
   DESKTOP-ONLY TYPE OVERRIDES (min-width:1081px)
   These titles/eyebrows use a bespoke desktop pixel size that was
   previously inline-coded. Lifting them here (desktop only) means
   that below 1080px the elements fall back to their responsive
   class size (.d-1 / .d-2 / .eyebrow clamp), so tablet & mobile
   stay consistent automatically.
   ============================================================ */
@media (min-width:1081px){
  .fs-16{ font-size:16px; }
  .fs-20{ font-size:20px; }
  .fs-40{ font-size:25px; }
  .fs-56{ font-size:56px; }
}


/* ============================================================
   ADDED COMPONENTS — timeline · certificates+lightbox ·
   facility gallery · team · flavour cards · media placeholders
   ============================================================ */
.story-copy p{ font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.75; color:var(--ink-soft); max-width:60ch; }
.story-copy p + p{ margin-top:1.1em; }
.story-copy strong{ color:var(--wine); font-weight:600; }

.timeline{ position:relative; margin-top:clamp(36px,5vw,60px); }
.timeline::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg, var(--gold-accent), rgba(215,176,114,0.25)); }
.tl-item{ position:relative; display:grid; grid-template-columns:minmax(150px,168px) 1fr; gap:clamp(18px,3vw,50px); padding:clamp(20px,2.6vw,2px) 0 clamp(20px,2.6vw,3px) clamp(26px,3vw,44px); border-bottom:1px solid var(--line-soft); }
.tl-item:last-child{ border-bottom:0; }
.tl-item::before{ content:""; position:absolute; left:-6px; top:calc(clamp(20px,2.6vw,32px) + 0.55em); width:14px; height:14px; border-radius:50%; background:var(--paper); border:3px solid var(--wine); box-shadow:0 0 0 4px var(--ivory); }
.tl-year{ font-family:var(--display); font-weight:700; color:var(--wine); font-size:clamp(1.4rem,2.3vw,2rem); line-height:1.05; letter-spacing:-0.01em; white-space:nowrap; }
.tl-body h4{ font-size:clamp(1.08rem,1.6vw,1.32rem); font-weight:500; line-height:1.35; color:var(--ink); font-family:var(--display); }
.tl-body p{ margin:8px 0 0; color:var(--taupe); font-size:0.98rem; line-height:1.6; }
@media(max-width:640px){ .tl-item{ grid-template-columns:1fr; gap:6px; } .tl-year{ font-size:1.4rem; } }

.cert-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:clamp(18px,2.4vw,28px); }
.cert-card{ display:flex; flex-direction:column; text-align:left; cursor:pointer; background:var(--paper); border:1px solid var(--line); border-radius:4px; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); appearance:none; padding:0; font:inherit; color:inherit; width:100%; }
.cert-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(34,27,25,0.5); border-color:var(--gold-accent); }
.cert-card:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; }
.cert-thumb{ position:relative; aspect-ratio:1/1.28; background:var(--ivory-2); display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--line); }
.cert-thumb img{ width:100%; height:100%; object-fit:contain; padding:14px; }
.cert-thumb .cert-zoom{ position:absolute; right:12px; bottom:12px; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px -8px rgba(0,0,0,0.4); transition:background .3s, transform .3s; }
.cert-card:hover .cert-zoom{ background:var(--wine); transform:scale(1.08); }
.cert-card:hover .cert-zoom svg{ stroke:#fff; }
.cert-zoom svg{ width:25px; height:25px; stroke:var(--wine); fill:none; stroke-width:2; transition:stroke .3s; }
.cert-meta{ padding:16px clamp(16px,1.6vw,20px) 18px; display:flex; flex-direction:column; gap:4px; }
.cert-meta .ck{ font-family:var(--label); font-size:16px; letter-spacing:0.16em; text-transform:uppercase; color:var(--wine); font-weight:500; }
.cert-meta h4{ font-family:var(--display); font-size:18px; font-weight:500; line-height:1.25; color:var(--ink); }
.cert-meta .cert-view{ margin-top:6px; font-size:16px; color:var(--taupe); display:inline-flex; align-items:center; gap:6px; }

.lightbox{ position:fixed; inset:0; z-index:2000; display:none; background:rgba(17,12,12,0.92); backdrop-filter:blur(4px); align-items:center; justify-content:center; }
.lightbox.is-open{ display:flex; animation:lbfade .3s var(--ease); }
@keyframes lbfade{ from{ opacity:0; } to{ opacity:1; } }
.lightbox__stage{ position:relative; width:min(94vw,1000px); height:min(92vh,1300px); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lightbox__img{ max-width:100%; max-height:100%; object-fit:contain; transform-origin:center center; transition:transform .18s ease-out; cursor:grab; user-select:none; -webkit-user-drag:none; background:#fff; box-shadow:0 30px 80px -30px rgba(0,0,0,0.7); touch-action:none; }
.lightbox__ctrls{ position:fixed; top:20px; right:20px; display:flex; gap:10px; z-index:2; }
.lb-btn{ width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,0.14); color:#fff; font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:background .25s; backdrop-filter:blur(6px); }
.lb-btn:hover{ background:rgba(255,255,255,0.3); }
.lightbox__hint{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.72); font-family:var(--label); font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; z-index:2;     background-color: #000000; padding: 3px 10px 3px 10px; }
.lightbox__cap{ position:fixed; top:26px; left:26px; color:#fff; z-index:2; max-width:60vw; }
.lightbox__cap .ck{ font-family:var(--label); font-size:16px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-soft); display:block; }
.lightbox__cap strong{ font-family:var(--display); font-weight:500; font-size:1.05rem; color:#fff; }
@media(max-width:560px){ .lightbox__cap{ display:none; } }

.policy-card{ display:flex; align-items:center; gap:clamp(20px,3vw,36px); flex-wrap:wrap; background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:clamp(24px,3vw,40px); box-shadow:0 20px 50px -38px rgba(34,27,25,0.5); }
.policy-icon{ flex:none; width:64px; height:64px; border-radius:50%; background:rgba(147,0,47,0.08); display:flex; align-items:center; justify-content:center; }
.policy-icon svg{ width:30px; height:30px; stroke:var(--wine); fill:none; stroke-width:1.6; }
.policy-body{ flex:1 1 300px; }
.policy-body h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.438rem,2vw,1.5rem)!important; color:var(--ink); }
.policy-body p{ margin:8px 0 0; color:var(--taupe); font-size:18px; max-width:52ch; }
.policy-card .btn{ flex:none; }

.facility-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); }
@media(max-width:860px){ .facility-gallery{ grid-template-columns:repeat(2,1fr)!important; } }
@media(max-width:520px){ .facility-gallery{ grid-template-columns:1fr!important; } }
.facility-item{ position:relative; overflow:hidden; border-radius:4px; aspect-ratio:4/3; background:var(--ivory-2); cursor:pointer; border:1px solid var(--line); margin:15px; padding:0; }
.facility-item img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.facility-item:hover img{ transform:scale(1.06); }
.facility-item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:26px 18px 16px; background:linear-gradient(0deg, rgba(18,10,10,0.82) 0%, rgba(18,10,10,0) 100%); color:#fff; font-family:var(--label); font-size:16px; letter-spacing:0.14em; text-transform:uppercase; font-weight:400; }
.facility-item .cert-zoom{ position:absolute; right:12px; top:12px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; opacity:0.50;transition:opacity .3s, transform .3s; }
.facility-item:hover .cert-zoom{ opacity:1; transform:scale(1.05); }
.facility-item .cert-zoom svg{ width:16px; height:16px; stroke:var(--wine); fill:none; stroke-width:2; }
.ph-img{ position:relative; width:100%; height:100%; background: repeating-linear-gradient(45deg, rgba(147,0,47,0.05) 0 12px, rgba(147,0,47,0.02) 12px 24px), var(--ivory-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:default; }
.facility-item.is-placeholder{ cursor:default; }
.ph-img__lbl{ font-family:var(--label); font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--wine); }
.ph-img__note{ font-family:"Courier New", monospace; font-size:0.72rem; color:var(--taupe); letter-spacing:0.02em; }

.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,34px); }
@media(max-width:840px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .team-grid{ grid-template-columns:1fr; } }
.team-card{ display:flex; flex-direction:column; }
.team-photo{ position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden; background:var(--ivory-2); border:1px solid var(--line); }
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-photo .ph-avatar{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: repeating-linear-gradient(45deg, rgba(32,75,146,0.05) 0 12px, rgba(32,75,146,0.02) 12px 24px), var(--ivory-2); }
.team-photo .ph-avatar span{ font-family:var(--display); font-weight:600; font-size:1.7rem; color:var(--blue); width:74px; height:74px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.team-info{ padding:16px 2px 0; }
.team-info .team-name{ font-family:var(--display); font-weight:600; font-size:25px; color:var(--ink); line-height:1.2; margin-bottom: 6px; }
.team-info .team-role{ margin-top:6px; font-size:18px; color:var(--taupe); line-height:1.4; }

.taste-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,40px) clamp(24px,3vw,48px); }
@media(max-width:820px){ .taste-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .taste-grid{ grid-template-columns:1fr; } }
.taste-card{ display:flex; align-items:flex-start; gap:clamp(14px,1.3vw,18px); }
.taste-card .taste-ico{ flex:0 0 auto; width:clamp(74px,6.2vw,90px); height:clamp(74px,6.2vw,90px); border-radius:50%; object-fit:cover; box-shadow:0 3px 10px rgba(0,0,0,.12); }
.taste-card .taste-txt{ min-width:0; }
.taste-card h4{ font-family:var(--display); font-weight:600; font-size:clamp(1.438rem,1.7vw,1.5rem); line-height:1.18; color:var(--ink); }
.taste-card p{ margin:8px 0 0; color:var(--taupe); font-size:18px; line-height:1.55; }

.capcard-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); margin-top:clamp(28px,3vw,40px); }
.capcard-grid .capcard:last-child:nth-child(3n+1){ grid-column:2; }
@media(max-width:820px){ .capcard-grid{ grid-template-columns:repeat(2,1fr); } .capcard-grid .capcard:last-child:nth-child(3n+1){ grid-column:auto; } .capcard-grid .capcard:last-child:nth-child(odd){ grid-column:1/-1; margin:0 auto; } }
@media(max-width:460px){ .capcard-grid{ grid-template-columns:1fr; } .capcard-grid .capcard:last-child{ grid-column:auto; max-width:none; margin:0; } }
.capcard{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:clamp(22px,2.4vw,30px); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.capcard:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -34px rgba(34,27,25,0.5); border-color:var(--gold-accent); }
.capcard .ic{ width:64px; height:64px; }
.capcard h4{ margin-top:16px; font-family:var(--display); font-weight:600; font-size:23px; line-height:1.25; color:var(--ink); }
.capcard p{ margin:8px 0 0; color:var(--taupe); font-size:18px; line-height:1.55; }



/* TASTE MOVING GALLERY */

.taste-flow {
  overflow:hidden;
  width:100%;
  cursor:grab;
  user-select:none;
}

.taste-flow:active {
  cursor:grabbing;
}


.taste-track {
  display:flex;
  margin-top:30px;
  gap:45px;
  width:max-content;

  transform:translateX(0);
  will-change:transform;
}


.taste-item {
  flex:0 0 auto;
  width:200px;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;

  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}


.taste-item img {
  width:190px;
  height:190px;
  padding-top: 5px;
  /* object-fit:contain; */
  border-radius: 10px;

  pointer-events:none;
  user-select:none;
}

.taste-track,
.taste-item,
.taste-item img {
  -webkit-user-drag:none;
}

.taste-item span {
  min-height:42px;
  display:flex;
  justify-content:center;
  text-align:center;
  font-weight: 600;
  padding-top: 5px;
}

/* static dessert flavours */
.taste-static {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.taste-static-list {
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  margin-top:30px;
}

@media(max-width:460px){
    .taste-static-list {
         display:flex;
         gap:40px;
         flex-wrap:wrap;
         margin-top:30px;
         justify-content: center;
    }

    .taste-item img {
        width: 190px;
        height: 190px;
         object-fit: contain;
         display: block;
        margin: 0 auto 14px;
    }

    .taste-item span {
        padding-top: 0px;
    }
}

/* ============================================================
   HOME — key facts, product-development numbers, sector row
   ============================================================ */

.factrow{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:clamp(20px,2.6vw,38px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(26px,3vw,40px) 0;
}
.fact{ padding:6px 0; min-width:0; }
.fact__num{
  font-family:var(--serif);
  font-weight:500;
  line-height:1;
  color:var(--wine);
  font-size:clamp(2rem,3.5vw,3.3rem);
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.fact__num--word{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.3vw,2.2rem); line-height:1.04; color:var(--blue); white-space:normal; }
.fact__label{
  display:block;
  margin-top:12px;
  font-size:18px;
  line-height:1.45;
  color:var(--ink-soft);
  text-wrap:pretty;
}

.devgrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(22px,2.4vw,34px);
}
.devcard{
  border-top:2px solid var(--wine);
  padding-top:22px;
}
.devcard__num{
  font-family:var(--serif);
  font-weight:500;
  line-height:1;
  color:var(--wine);
  font-size:clamp(2.2rem,3.6vw,3.2rem);
  letter-spacing:-0.01em;
}
.devcard h4{
  margin-top:16px;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.2rem,1.5vw,1.3rem);
  line-height:1.24;
  color:var(--blue);
}
.devcard p{
  margin:10px 0 0;
  font-size:0.96rem;
  line-height:1.55;
  color:var(--taupe);
}

.sectorrow{
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.sectorrow .ck{
  font-family:var(--label);
  font-size:20px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--blue);
}


/* ============================================================
   OUR CLIENTS — reference lists
   ============================================================ */

.reflist{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(28px,3vw,48px);
}
.refgroup{ border-top:1px solid var(--line); padding-top:20px; }
.refgroup > .ck{
  display:block;
  font-family:var(--label);
  font-size:20px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--wine);
}
.refgroup ul{ list-style:none; margin:18px 0 0; padding:0; }
.refgroup li{
  font-size:18px;
  line-height:1.5;
  color:var(--ink-soft);
  padding:0.5em 0;
  border-bottom:1px solid var(--line-soft);
}
.refgroup li a{
  font-family:var(--display);
  font-weight:600;
  color:var(--wine);
  text-decoration:none;
}
.refgroup li a:hover{ text-decoration:underline; }


/* ============================================================
   HOW WE WORK — process flow
   ============================================================ */

.flowsteps{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);
  align-items:stretch;
  padding-top:34px;
}
.flowstep{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:48px 16px 26px;
  text-align:center;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.flowstep:nth-child(odd){ border-color:rgba(148,2,47,.34); }
.flowstep:nth-child(even){ border-color:rgba(32,75,146,.34); }
.flowstep__ic{
  position:absolute;
  top:-34px;
  left:50%;
  transform:translateX(-50%);
  width:68px;
  height:68px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.flowstep__ic--wine{ background:var(--wine); }
.flowstep__ic--blue{ background:var(--blue); }
.flowstep__ic img{ display:block; }
.flowstep h4{
  font-family:var(--display);
  font-weight:600;
  font-size:1.05rem;
  line-height:1.28;
  color:var(--ink);
  text-wrap:balance;
}

.flowbanner{
  position:relative;
  margin-top:clamp(22px,2.6vw,34px);
  background:var(--wine);
  color:#fff;
  text-align:center;
  padding:20px clamp(46px,5vw,72px);
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(15px,1.35vw,20px);
  letter-spacing:0.04em;
  text-transform:uppercase;
  line-height:1.35;
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%, 34px 50%);
}

/* iteration loop: feedback -> back to sample development */
.flowloop{
  position:absolute;
  top:-80px;
  left:-34%;
  width:80%;
  pointer-events:none;
  z-index:3;
}
.flowstep--loop{ z-index:3; }
.flowloop svg{ width:100%; height:auto; display:block; }

/* ---- Tablet / mobile: the process runs top to bottom ---- */
@media(max-width:1100px){
  .flowsteps{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding-top:0;
    max-width:620px;
    margin:0 auto;
  }
  .flowstep{
    display:grid;
    grid-template-columns:68px minmax(0,1fr);
    align-items:center;
    gap:18px;
    text-align:left;
    padding:18px 20px;
  }
  .flowstep__ic{
    position:static;
    transform:none;
    width:56px;
    height:56px;
  }
  .flowstep h4{ font-size:1.15rem; }
  /* down connector between steps */
  .flowstep + .flowstep::before{
    content:"";
    position:absolute;
    top:-26px;
    left:46px;
    width:2px;
    height:26px;
    background:var(--line);
  }
  .flowstep + .flowstep::after{
    content:"";
    position:absolute;
    top:-12px;
    left:41px;
    width:0;
    height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:9px solid var(--wine);
  }
  .flowsteps .flowstep{ margin-top:26px; }
  .flowsteps .flowstep:first-child{ margin-top:0; }

  /* loop arrow sits on the right, curving back up one step */
  .flowloop{
    top:-52px;
    left:auto;
    right:-24px;
    width:24px;
    height:calc(50% + 52px);
    transform:none;
    border:2px solid var(--blue);
    border-left:0;
    border-radius:0 12px 12px 0;
  }
  .flowloop svg{ display:none; }
  .flowloop::after{
    content:"";
    position:absolute;
    top:-7px;
    left:-3px;
    width:0;
    height:0;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-right:10px solid var(--blue);
  }

  .flowbanner{
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
    padding:20px 26px 34px;
  }
}
@media(max-width:520px){
  .flowstep{ grid-template-columns:54px minmax(0,1fr); gap:14px; }
  .flowstep__ic{ width:46px; height:46px; }
  .flowstep__ic img{ width:26px; height:26px; }
  .flowstep + .flowstep::before{ left:39px; }
  .flowstep + .flowstep::after{ left:34px; }
}
.factrow--dark{
  border-top-color:rgba(255,255,255,0.22);
  border-bottom-color:rgba(255,255,255,0.22);
}


/* icon variant of the numbered feature list */
.flist--icon .row{ display:flex; align-items:center; gap:18px; }
.flist--icon .row .ic{ flex:0 0 auto; }


/* ============================================================
   CONTACT — Norway primary contact
   ============================================================ */

.nocontact{
  display:grid;
  grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(24px,3vw,44px);
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:clamp(24px,3vw,36px);
}
.nocontact__photo{ width:100%; aspect-ratio:4/5; }
/* same footprint as a team-grid card photo */
.kbox .nocontact__photo{ width:100%; max-width:calc((1120px - 68px) / 3); }
@media(max-width:1180px){ .kbox .nocontact__photo{ max-width:calc((100% - 68px) / 1); } }
@media(max-width:860px){ .kbox .nocontact__photo{ max-width:100%; } }
@media (max-width:520px){
  .nocontact{ grid-template-columns:minmax(0,1fr); }
  .nocontact__photo{ max-width:190px; }
}


/* ---------- Column behaviour for the added grids (no orphan cells) ---------- */
.factrow--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* logo grid without cell boxes — logos sit on the section background */
.logo-grid--plain .logo-cell{ background:none; }

.feat-grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

@media(max-width:1080px){
  .feat-grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:860px){
  .devgrid{ grid-template-columns:minmax(0,1fr); }
  .reflist{ grid-template-columns:minmax(0,1fr); }
}
@media(max-width:700px){
  .factrow--3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:560px){
  .factrow--3, .feat-grid--4{ grid-template-columns:minmax(0,1fr); }
}


/* applications columns: two-up on tablet before stacking */
@media(min-width:861px) and (max-width:1080px){
  .cols{ grid-template-columns:repeat(2,1fr); }
  .col{ padding-left:clamp(14px,2vw,30px); }
  .col:nth-child(odd){ border-left:0; padding-left:0; }
  .col:nth-child(n+3){ border-top:1px solid var(--line); }
}


/* icon rows inside contact boxes — icon and text share a baseline-ish alignment */
.kbox .ic-row{ display:flex; align-items:center; gap:14px; }
.kbox .ic-row .ic{ flex:0 0 auto; }


/* number row stays on one line down to small tablets */
@media(max-width:1024px){ .factrow{ grid-template-columns:1fr 1fr; gap:34px clamp(20px,2.6vw,38px); } }
@media(max-width:520px){ .factrow{ grid-template-columns:minmax(0,1fr); } }