/* ============================================================
   Cho Cho Industry (CCI) — Homepage styles
   Palette (CI): Black / White / Blue + Yellow & Gold accents
   Fonts: DM Sans (headings) + Roboto (body)
   ============================================================ */

:root{
  /* Brand */
  --cci-blue:#1f1a6e;
  --cci-blue-700:#2a2496;
  --cci-blue-500:#3f7fd6;
  --cci-blue-50:#eef1fb;
  --cci-yellow:#f5e21f;
  --gold:#c9a227;
  --gold-soft:#e7c75a;
  --gold-50:#faf3dc;
  --cream:#fdf6e3;

  /* Functional (errors only) */
  --danger:#d64533;
  --danger-soft:#fde7e3;

  /* Neutral */
  --white:#ffffff;
  --ink:#15151b;
  --ink-soft:#54545e;
  --line:#e7e7ee;
  --silver:#a8a8b0;
  --tint:#f6f7fb;

  --wrap:1320px;
  --pad:40px;
  --r:20px;
  --r-sm:12px;
  --shadow:0 18px 50px -20px rgba(31,26,110,.22);
  --shadow-sm:0 8px 24px -12px rgba(31,26,110,.18);
  --nav-h:74px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  margin:0;
  font-family:"Roboto",system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"DM Sans",sans-serif;margin:0;line-height:1.1;letter-spacing:-.025em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}
.section{padding:108px 0}
.section--tint{background:var(--tint)}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-block;font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cci-blue-500);margin-bottom:16px;
}
.eyebrow--light{color:var(--gold-soft)}
.eyebrow--gold{color:var(--gold)}
.h2{font-size:clamp(32px,3.6vw,50px);font-weight:700;margin-bottom:18px}
.h2--light{color:#fff}
.ink-blue{color:var(--cci-blue)}
.ink-gold{color:var(--gold)}
.center-head{text-align:center;max-width:780px;margin-inline:auto;margin-bottom:54px}
.h2--oneline{white-space:nowrap}
.lead-center{color:var(--ink-soft);font-size:18px;text-wrap:pretty}

/* AUTHORED LINE — body copy that is written line by line, so the phrasing
   breaks exactly where the brand voice intends instead of wherever the column
   happens to run out. Every line is kept short enough to fit its column whole;
   `balance` is the safety net, splitting evenly rather than orphaning a word if
   a future edit runs one long. Collapses to a flowing paragraph on phones (see
   the 720px block) where no column is wide enough to hold an authored line. */
.ln{display:block;text-wrap:balance}
/* variant for copy whose column is a fixed width rather than a share of the
   viewport — a phone is no narrower than desktop there, so the authored break
   holds at every size and must survive the phone collapse below. */
.ln.ln--always{display:block;text-wrap:balance}

.ic{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:16px;
  padding:15px 30px;border-radius:100px;border:2px solid transparent;
  cursor:pointer;transition:.2s ease;white-space:nowrap;
}
.btn--primary{background:var(--cci-blue);color:#fff}
.btn--primary:hover{background:var(--cci-blue-700);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--outline{background:transparent;color:var(--cci-blue);border-color:var(--cci-blue)}
.btn--outline:hover{background:var(--cci-blue);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost:hover{background:#fff;color:var(--cci-blue);border-color:#fff}
.btn--light{background:#fff;color:var(--cci-blue)}
.btn--light:hover{background:var(--cci-yellow);color:var(--cci-blue);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--full{width:100%;margin-top:6px}

.link-arrow{
  display:inline-flex;align-items:center;gap:.6em;font-family:"DM Sans",sans-serif;
  font-weight:600;color:var(--cci-blue);transition:.2s;
}
.link-arrow::after{content:"→";display:inline-grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:50%;background:var(--cci-blue);color:#fff;font-size:.92em;line-height:1;
  transition:transform .2s ease,box-shadow .2s ease}
.link-arrow:hover::after{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.link-arrow--gold{color:var(--gold)}
.link-arrow--gold::after{background:var(--gold)}
.link-arrow--light{color:#fff}
.link-arrow--light::after{background:#fff;color:var(--cci-blue)}
.link-arrow--sm{font-size:14px}
.link-arrow--sm::after{width:26px;height:26px}
/* group the label + round arrow together, pushed to the right edge of the box */
.about__text .link-arrow,
.bcard__body .link-arrow,
.ncard__body .link-arrow{display:flex;width:100%;justify-content:flex-start;align-items:center}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.nav__inner{
  position:relative;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:var(--nav-h);
  display:flex;align-items:center;gap:24px;
}
.nav__logo{display:flex;align-items:center;flex:none;margin-right:8px}
.nav__logo img{height:38px}
.nav__logo-fallback{
  display:none;font-family:"DM Sans",sans-serif;font-weight:700;font-size:26px;
  color:var(--cci-blue);letter-spacing:-.04em;align-items:center;
}
.nav__logo-fallback b{color:var(--cci-blue);position:relative}
.nav__logo-fallback b::after{content:"";position:absolute;top:-2px;right:-3px;
  width:7px;height:7px;background:var(--cci-yellow);border-radius:2px}

/* center the menu in the page; logo stays left, language switch stays right */
.nav__menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
/* the menu is absolutely positioned from left:50%, so its shrink-to-fit width
   is capped at half the navbar — without nowrap the two-word labels break onto
   a second line there instead of letting the menu grow past that cap */
.nav__list > li > a,.nav__top{
  font-family:"DM Sans",sans-serif;font-weight:500;font-size:16px;color:var(--ink);
  background:none;border:0;cursor:pointer;padding:9px 11px;border-radius:9px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:.15s;
}
.nav__list > li > a:hover,.nav__top:hover{color:var(--cci-blue);background:var(--cci-blue-50)}
.caret{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.has-drop:hover .caret{transform:rotate(180deg)}

.drop{
  position:absolute;margin-top:10px;min-width:230px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.18s ease;z-index:60;
}
.has-drop{position:relative}
/* invisible bridge across the 10px gap so hover stays continuous */
.drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:10px 14px;border-radius:9px;font-size:14px;color:var(--ink-soft);transition:.12s}
.drop a:hover{background:var(--cci-blue-50);color:var(--cci-blue)}
/* Cho's Kitchen submenu — Taste of Myanmar / Pantry, indented under the parent link */
.drop a.drop__sub{padding-left:26px;font-size:13px;opacity:.82}
.drop a.drop__sub:hover{opacity:1}
.drop__div{display:block;height:1px;background:var(--line);margin:6px 8px}

.nav__right{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}

/* language — three circles */
.lang{display:flex;gap:7px}
.lang__btn{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;cursor:pointer;font-family:"DM Sans",sans-serif;font-weight:600;
  font-size:12px;color:var(--ink-soft);transition:.18s;display:flex;
  align-items:center;justify-content:center;padding:0;
}
.lang__btn:hover{border-color:var(--cci-blue-500);color:var(--cci-blue)}
.lang__btn.is-active{background:var(--cci-blue);border-color:var(--cci-blue);color:#fff}

.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;
  cursor:pointer;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--cci-blue);border-radius:2px;transition:.25s}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- mobile drawer ---------- */
.drawer{position:fixed;inset:var(--nav-h) 0 0;background:#fff;z-index:45;
  transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;visibility:hidden}
.drawer.is-open{transform:translateX(0);visibility:visible}
.drawer__nav{padding:18px 24px 60px;display:flex;flex-direction:column}
.drawer__nav > a,.drawer__nav summary{
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:16px;
  padding:15px 4px;border-bottom:1px solid var(--line);cursor:pointer;list-style:none;
}
.drawer__nav summary::-webkit-details-marker{display:none}
.drawer__nav summary::after{content:"+";float:right;color:var(--cci-blue-500);font-weight:400}
.drawer__nav details[open] summary::after{content:"–"}
.drawer__nav details a{display:block;padding:10px 16px;color:var(--ink-soft);font-size:16px}
.drawer__nav details a.drawer__sub{padding-left:30px;font-size:14px;opacity:.82}
.drawer__lang{display:flex;gap:10px;margin-top:24px}

/* ============================================================
   HERO — full-bleed image + overlaid text (right)
   ============================================================ */
.hero{position:relative;display:flex;align-items:center;
  min-height:calc(100vh - var(--nav-h));overflow:hidden;background:var(--cci-blue)}
.hero__slides{position:absolute;inset:0;z-index:0}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease}
.hero__bg.is-active{opacity:1}
/* slider controls — bottom-left cluster */
.hero__controls{position:absolute;left:40px;bottom:34px;z-index:3;
  display:flex;align-items:center;gap:16px}
.hero__arrow{width:44px;height:44px;border-radius:50%;flex:none;cursor:pointer;
  border:1.5px solid rgba(247,241,230,.5);background:rgba(53,49,40,.3);color:#f7f1e6;
  display:flex;align-items:center;justify-content:center;transition:.2s;backdrop-filter:blur(4px)}
.hero__arrow:hover{background:rgba(53,49,40,.6);border-color:rgba(247,241,230,.8)}
.hero__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.hero__dots{display:flex;gap:9px}
.hero__dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(247,241,230,.45);transition:.25s}
.hero__dots button:hover{background:rgba(247,241,230,.7)}
.hero__dots button.is-active{background:#f7f1e6;width:26px;border-radius:5px}
/* dark warm gradient (#353128) — full behind the text (right), fading to clear over the bowl (left) */
.hero__tint{position:absolute;inset:0;
  background:linear-gradient(to left,rgba(53,49,40,.94) 0%,rgba(53,49,40,.78) 26%,rgba(53,49,40,.34) 52%,rgba(53,49,40,0) 78%)}
.hero__badge{position:absolute;left:40px;top:36px;z-index:2;color:#f7f1e6;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:clamp(13px,1.05vw,16px);
  letter-spacing:.2em;
  text-transform:uppercase;padding:clamp(11px,1vw,15px) clamp(20px,1.9vw,28px);
  border:1.5px solid rgba(247,241,230,.5);
  border-radius:100px;backdrop-filter:blur(4px)}

.hero__inner{position:relative;z-index:2;display:flex;justify-content:flex-end}
.hero__panel-inner{max-width:560px;display:none}
/* both slides share the height of the taller one (--hero-panel-min, measured
   by the script), so the vertically-centred panel starts at the same y and
   the logo row lands identically. The actions are pushed to the bottom of
   that shared box, so the buttons line up too — a shorter headline just
   leaves more room above them */
.hero__panel-inner.is-active{display:flex;flex-direction:column;
  min-height:var(--hero-panel-min,0px)}
/* brand mark above the eyebrow — the CCI logo is already in the header, so the
   banner carries only the brand of the slide, at a size that can lead the panel */
/* min-height tracks the TALLER of the two slide marks (Cho's Kitchen) so the
   eyebrow below it lands on the same line as the hero cycles between slides */
.hero__logos{display:flex;align-items:center;gap:16px;margin:0 0 20px;
  min-height:clamp(80px,9.4vw,118px)}
.hero__logo{display:block;height:clamp(44px,5vw,64px);width:auto;margin:0}
.hero__logo--brand{height:clamp(80px,9.4vw,118px)}
/* SS-outline.png is a 1350x1080 canvas whose lettering fills only ~91% of the
   width and ~34% of the height, so sizing by height rendered a mark less than
   half the size it looked. Crop to the artwork with a content-ratio frame and
   size by width — the same treatment .sshero__logo img and .bcard__mark--ss
   already use for this file. */
.hero__logo--ss{height:auto;width:clamp(156px,18.7vw,240px);
  aspect-ratio:34/10;object-fit:cover;object-position:center}
.hero__title{color:#f7f1e6;font-size:clamp(32px,3.7vw,52px);font-weight:700;line-height:1.12;margin:6px 0 24px}
.hero__title .hl{color:var(--gold-soft)}
.hero__lead{color:rgba(247,241,230,.9);max-width:560px;font-size:18px;line-height:1.65;margin:0 0 34px;text-wrap:pretty}
/* the hero copy is authored line by line — see .ln */
/* hero text sits on the dark tint — keep accents light for contrast */
.hero .eyebrow--light{color:var(--gold-soft)}
.hero .btn--ghost{color:#f7f1e6;border-color:rgba(247,241,230,.55)}
.hero .btn--ghost:hover{background:#f7f1e6;color:#353128;border-color:#f7f1e6}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto}

/* scroll cue — minimal white steaming bowl */
.hero__scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff}
.hero__scroll span{font-family:"DM Sans",sans-serif;font-weight:600;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.bowl{width:50px;height:44px}

/* hero product — pack pops up (bottom-left) */
.hero__product{position:absolute;left:clamp(6px,2.4vw,46px);bottom:clamp(24px,5vh,56px);z-index:2;
  width:clamp(180px,22vw,320px);height:clamp(180px,22vw,320px);pointer-events:none}
.hero__pack{position:absolute;inset:0;opacity:0;transform:translateY(26px) scale(.9);
  transition:opacity .7s ease,transform .8s cubic-bezier(.18,.9,.24,1)}
.hero__pack.is-active{opacity:1;transform:translateY(0) scale(1)}
/* pack shakes in bursts, like someone rattling it — soft white glow at the edges */
.hero__packimg{position:absolute;inset:0;margin:auto;width:70%;height:70%;object-fit:contain;
  transform-origin:50% 22%;animation:heroPackShake 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.60)) drop-shadow(0 0 5px rgba(255,255,255,.72))
    drop-shadow(0 0 2px rgba(255,255,255,.76))}
@keyframes heroPackShake{
  0%,34%,100%{transform:rotate(0deg)}
  4%{transform:rotate(-4deg)}
  9%{transform:rotate(3.5deg)}
  14%{transform:rotate(-3deg)}
  19%{transform:rotate(2.5deg)}
  24%{transform:rotate(-1.5deg)}
  29%{transform:rotate(1deg)}
}
.bowl__body{fill:none;stroke:#fff;stroke-width:2.4;stroke-linejoin:round}
.bowl__rim{stroke:#fff;stroke-width:2.4;stroke-linecap:round;fill:none}
.bowl__steam path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;
  opacity:.85;animation:steam 2.4s ease-in-out infinite}
.bowl__steam path:nth-child(2){animation-delay:.5s}
.bowl__steam path:nth-child(3){animation-delay:1s}
@keyframes steam{
  0%{opacity:0;transform:translateY(4px)}
  35%{opacity:.9}
  100%{opacity:0;transform:translateY(-5px)}
}

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:stretch}
/* the copy is shorter than the photo, so centre it against the image rather
   than letting it hang from the top with a long gap underneath */
.about__text{align-self:center}
.about__text p{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0 0 26px;text-wrap:pretty}
.pillars{list-style:none;margin:0 0 28px;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:14px}
/* homepage: two pillars on the first row, Consumer-Centric on the second */
.about .pillars{grid-template-columns:repeat(2,max-content);gap:16px 34px}
.pillars li{display:flex;align-items:center;gap:10px;font-family:"DM Sans",sans-serif;
  font-weight:600;font-size:16px}
.pillars .ic{color:var(--cci-blue-500)}
.about__media{position:relative}
/* image fills the column so its height matches the about__text column */
.about__media img{width:100%;height:100%;min-height:460px;object-fit:cover;
  border-radius:var(--r);box-shadow:var(--shadow);display:block}
.about__badge{position:absolute;right:18px;top:18px;background:var(--cci-blue);color:#fff;
  border-radius:16px;padding:18px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.about__badge strong{font-family:"DM Sans",sans-serif;font-size:28px;line-height:1}
.about__badge span{font-size:12px;opacity:.85;margin-top:4px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:84px;
  padding-top:52px;border-top:1px solid var(--line);align-items:stretch}
/* stats are clickable links — reset link styling + clear hover affordance.
   flex column + margin-top:auto on the thumbnail keeps the three boxes on one
   grid: icons, numbers and images all line up even when the copy wraps. */
.stat{text-align:center;display:flex;flex-direction:column;align-items:center;height:100%;
  text-decoration:none;color:inherit;cursor:pointer;
  padding:30px 18px 30px;border-radius:16px;justify-content:flex-start;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.stat:hover{transform:translateY(-5px);background:var(--cci-blue-50);box-shadow:var(--shadow-sm)}
.stat:hover .stat__lbl{color:var(--cci-blue)}
.stat:focus-visible{outline:2px solid var(--cci-blue);outline-offset:3px}
/* icon badge above the figure */
.stat__ic{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:16px;
  background:var(--cci-blue-50);color:var(--cci-blue);margin-bottom:16px}
.stat__ic .ic{width:26px;height:26px;stroke-width:1.7}
.stat__num{display:block;font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:clamp(38px,4vw,54px);color:var(--cci-blue);line-height:1}
.stat__num em{color:var(--cci-yellow);font-style:normal}
.stat__lbl{display:block;margin-top:8px;font-family:"DM Sans",sans-serif;font-weight:600;
  color:var(--ink);font-size:16px}
.stat__desc{display:block;margin:6px auto 0;max-width:250px;color:var(--ink-soft);
  font-size:13px;line-height:1.55}
/* The supporting thumbnails were removed from these three boxes, so the copy
   is all there is — the trailing 16px that used to separate the text from the
   image goes with them, and the box padding is evened up top and bottom. */

/* ============================================================
   BURST DIVIDER — gold & white sunburst + floating bowl
   ============================================================ */
/* flat background with a clean geometric composition (Nongshim-style) */
.burst{position:relative;overflow:hidden;text-align:center;padding:90px 24px 96px;
  --burst-bg:#fbf5ec;background:var(--burst-bg)}
.burst__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.bd{position:absolute}
/* product stage panel — anchors the carousel so the space isn't empty */
.bd--stage{left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(1140px,95%);height:min(540px,70%);background:#f6ead0;border-radius:36px}
/* straight three-line accents — one gold, one CCI blue. The wavy versions
   were removed at the client's request; these straight ones stay. */
.bd--orange,.bd--red{
  width:clamp(96px,12vw,150px);height:clamp(52px,7vw,82px);
  background-repeat:no-repeat;background-position:center;background-size:contain}
.bd--orange{left:10px;top:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 78'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M14 20H126'/%3E%3Cpath d='M14 42H126'/%3E%3Cpath d='M14 64H126'/%3E%3C/g%3E%3C/svg%3E");
  animation:bdFloat 7s ease-in-out infinite}
.bd--red{right:3%;bottom:64px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 78'%3E%3Cg fill='none' stroke='%231f1a6e' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M14 20H126'/%3E%3Cpath d='M14 42H126'/%3E%3Cpath d='M14 64H126'/%3E%3C/g%3E%3C/svg%3E");
  animation:bdFloat 8.5s ease-in-out infinite reverse}
/* ---- fresh-ingredient accents ---------------------------------------
   Motifs tucked into the vertical gutters either side of the product panel,
   where the corner line-motifs leave the section empty. Two chillies and two
   coriander sprigs — each rotated to a different angle and held at low opacity
   so they read as texture behind the carousel, never as foreground.
   Both SVGs ship as flat #70a843 artwork, which is off-brand, so they are
   painted as MASKS rather than images: the file supplies the silhouette and
   background-color supplies the brand colour. */
.bd--chilli,.bd--coriander{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.bd--chilli{-webkit-mask-image:url("../assets/icon/chilli.svg");
  mask-image:url("../assets/icon/chilli.svg");background:var(--gold)}
.bd--coriander{-webkit-mask-image:url("../assets/icon/coriander.svg");
  mask-image:url("../assets/icon/coriander.svg");background:var(--cci-blue)}
/* Stroke weight is baked into the artwork, so the only lever on it is the
   rendered size. Measured on a 200px canvas the coriander's lines run 6px
   against the chilli's 5px, so the sprig is held at 1/1.2 of the chilli's box
   — and every instance of a motif shares one size. Both clamps keep that 6:5
   ratio at their floor, their vw slope and their ceiling, so the two motifs
   draw at the same line weight at every viewport width. */
.bd--chilli{width:clamp(96px,10vw,144px);height:clamp(96px,10vw,144px)}
.bd--coriander{width:clamp(80px,8.34vw,120px);height:clamp(80px,8.34vw,120px)}
/* Placement note: the rotated box reaches ~1.26x the element's width, so the
   inset has to clear that or the motif is cut off by the viewport edge. And
   the product artwork fills the right-hand side from ~73% of the section
   downwards, so the right-side motifs both sit above that line. */
.bd--chilli1{left:2.6%;top:36%;opacity:.5;transform:rotate(-18deg);
  animation:bdFloat 8s ease-in-out infinite}
/* The chilli is anchored to the VIEWPORT edge, not the product panel: the
   panel-tracking calc() parked it 224px in from the edge on a 1900px screen,
   which read as floating in the middle of the gutter rather than framing it.
   2% clears the rotated bounding box — a 24deg turn widens the box to ~1.32x,
   so it overhangs ~23px past the element on each side — at every width the
   motif is shown at. */
.bd--chilli2{right:2%;
  top:48%;opacity:.42;transform:rotate(24deg);
  animation:bdFloat 9.5s ease-in-out infinite reverse}
.bd--coriander1{left:1.8%;top:64%;opacity:.3;transform:rotate(-12deg);
  animation:bdFloat 7s ease-in-out infinite .6s}
.bd--coriander2{right:max(2.6%,calc(50% - min(570px,47.5%) - 12px - 120px));
  top:27%;opacity:.26;transform:rotate(32deg);
  animation:bdFloat 8.5s ease-in-out infinite 1.2s}
/* the shared float keyframe only translates, so each motif keeps its own
   rotation via a wrapper-free transform on the animation itself */
@keyframes bdFloatChilli1{0%,100%{transform:rotate(-18deg) translateY(0)}50%{transform:rotate(-18deg) translateY(-14px)}}
@keyframes bdFloatChilli2{0%,100%{transform:rotate(24deg) translateY(0)}50%{transform:rotate(24deg) translateY(-11px)}}
@keyframes bdFloatCori1{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-12deg) translateY(-10px)}}
@keyframes bdFloatCori2{0%,100%{transform:rotate(32deg) translateY(0)}50%{transform:rotate(32deg) translateY(-8px)}}
.bd--chilli1{animation-name:bdFloatChilli1}
.bd--chilli2{animation-name:bdFloatChilli2}
.bd--coriander1{animation-name:bdFloatCori1}
.bd--coriander2{animation-name:bdFloatCori2}

@keyframes bdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes bdSpin{to{transform:rotate(360deg)}}
.burst__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}

/* ---- section headline — sits above the wave slogan of every slide ----
   Deep navy with the second word in gold italic (the site's accent pattern),
   closed off by a slim gold hairline so it reads premium rather than busy. */
/* The headline is taken OUT OF FLOW and parked in the empty band above the
   product panel, so the pack + bowl keep their original position — adding it
   in flow pushed the whole carousel down. */
.burst__head{position:absolute;left:0;right:0;top:0;z-index:2;text-align:center;
  pointer-events:none}
.burst__title{color:var(--cci-blue);margin-bottom:0;
  font-size:clamp(24px,2.5vw,36px);font-weight:700;letter-spacing:-.02em}
.burst__title em{font-style:italic;font-weight:700;
  /* flat gold — see .news__title em for why this is not a clipped gradient */
  color:var(--gold);display:inline-block;line-height:1.34}

/* slogan — one line of text riding an SVG wave path; colour follows each
   product's sachet colour (--pack-color set per slide) */
.burst__wavedef{position:absolute;width:0;height:0;overflow:hidden}
.burst__line{display:block;width:clamp(320px,64vw,900px);max-width:100%;height:auto;overflow:visible;margin:0}
/* stacked 2nd wave line — pulled up so the two waves sit close */
.burst__line + .burst__line{margin-top:-56px}
.burst__line text{font-family:"DM Sans",sans-serif;font-weight:800;font-style:italic;
  fill:var(--pack-color,var(--cci-blue));font-size:48px;letter-spacing:-.01em;text-anchor:middle}
/* tagline (2nd sentence) — a touch smaller than the name, still fits the wave */
.burst__line--sub text{font-size:28px;font-weight:700}
.burst__caption .burst__line--sub{margin-top:-46px}
/* Burmese line (mock) — sits under the English slogan */
.burst__my{font-family:"Padauk","Myanmar Text","Noto Sans Myanmar","Pyidaungsu",sans-serif;
  color:var(--pack-color,var(--cci-blue));opacity:.9;font-weight:600;
  font-size:clamp(16px,1.5vw,18px);line-height:1.6;margin:8px 0 0;padding:0 24px}

/* carousel stage — caption top-left, arrows top-right, images below */
.burst__stage{position:relative;width:100%;max-width:var(--wrap);margin:18px auto 0;
  min-height:clamp(560px,60vw,760px)}
/* viewport stacks the slides. clip-path clips the LEFT/RIGHT edges (so slides
   still fly off to the sides) while letting the artwork's drop-shadow spill
   past the top/bottom instead of being sliced off by overflow:hidden */
.burst__viewport{position:relative;width:100%;min-height:clamp(560px,60vw,760px);
  overflow:visible;clip-path:inset(-24px 0 -110px 0)}
/* slides crossfade like Nissin's swiper-fade (text just fades with the slide) */
.burst__slide{position:absolute;top:0;left:0;width:100%;
  display:flex;flex-direction:column;align-items:stretch;gap:clamp(14px,2vw,28px);
  min-height:clamp(560px,60vw,760px);
  opacity:0;pointer-events:none;transition:opacity .8s ease}
.burst__slide.is-active{opacity:1;pointer-events:auto;z-index:2}
.burst__media{display:flex;flex-direction:row-reverse;
  align-items:center;justify-content:center;gap:0;width:100%;
  /* nudge the product + bowl up a little — kept small so the tilted sachet's
     top corner never rides up into the slogan / tagline */
  margin-top:clamp(-30px,-2.2vw,-12px)}
/* per-product name + slogan — centred on the page, waves in on each slide */
.burst__caption{align-self:center;text-align:center;max-width:min(92%,900px);margin-inline:auto;
  padding-top:clamp(12px,2vw,28px);position:relative;z-index:4}
.burst__caption .burst__line{padding:0;max-width:none;margin-inline:auto}
.burst__caption .burst__line + .burst__line{margin-top:-56px}
.burst__caption .burst__my{padding:0;max-width:none}
/* per-letter water ripple: each glyph is a .wletter tspan whose dy is driven
   by a travelling sine wave in JS (see js/script.js). Kept on the #ccWave path. */
.burst__name{font-family:"DM Sans",sans-serif;font-weight:800;color:var(--gold);
  font-size:clamp(16px,1.6vw,22px);letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 6px}

/* dish (right) & tilted pack (left).
   Every sachet / bowl artwork named assets/images/burst-*.png has been re-cut onto a
   shared canvas so the product inside covers the SAME area on every slide
   (1180x920 landscape sachet · 920x1180 upright sachet · 900x680 bowl).
   One scale unit --bu (= px per 1000 canvas units) therefore keeps all ten
   slides identical in size — no slide is bigger or smaller than the next. */
.burst__media{--bu:clamp(240px,39vw,500px);
  /* reserve the tallest artwork (upright sachet) so slides never jump */
  min-height:calc(var(--bu)*1.00)}
.burst__dish{flex:none;width:calc(var(--bu)*.90);height:calc(var(--bu)*.68);
  max-width:none;max-height:none;object-fit:contain;
  z-index:3;margin-left:-4%;filter:drop-shadow(0 26px 30px rgba(31,26,110,.24))}
.burst__pack{flex:none;width:calc(var(--bu)*1.18);height:calc(var(--bu)*.92);
  max-width:none;max-height:none;object-fit:contain;
  z-index:2;filter:drop-shadow(0 24px 28px rgba(31,26,110,.26))}
/* upright sachets — portrait canvas, capped to the SAME height as a landscape
   sachet so the bag's top corner sits on the same line on every slide and
   never crowds the slogan above it */
.burst__pack--tall{width:calc(var(--bu)*.72);height:calc(var(--bu)*.92)}

/* ── Nissin-style image transition ──────────────────────────────
   images swoop in from the right, settle into a slight fan, swoop
   out to the left. Same easing as nissinfoods.com (.item-img-wrap). */
.burst__dish,.burst__pack{will-change:transform,opacity;
  transition:transform 1.3s cubic-bezier(.36,.1,0,1),opacity .8s ease}
/* settled — active slide */
.burst__slide.is-active .burst__pack{transform:rotate(-9deg) translate3d(0,0,0) scale(1);opacity:1}
.burst__slide.is-active .burst__dish{transform:rotate(5deg) translate3d(0,0,0) scale(1);opacity:1}
/* incoming — parked off to the right */
.burst__slide.is-next .burst__pack{transform:rotate(22deg) translate3d(150%,0,0) scale(.6);opacity:0}
.burst__slide.is-next .burst__dish{transform:rotate(28deg) translate3d(175%,0,0) scale(.6);opacity:0}
/* outgoing — flown off to the left */
.burst__slide.is-prev .burst__pack{transform:rotate(-34deg) translate3d(-160%,0,0) scale(.6);opacity:0}
.burst__slide.is-prev .burst__dish{transform:rotate(-26deg) translate3d(-150%,0,0) scale(.6);opacity:0}

/* arrows — grouped at the top-right of the stage */
.burst__nav{position:absolute;top:0;right:0;z-index:6;display:flex;gap:10px}
.burst__arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--cci-blue);
  box-shadow:var(--shadow-sm);transition:background .2s,color .2s,transform .2s}
.burst__arrow:hover{background:var(--cci-blue);color:#fff;transform:scale(1.07)}
.burst__arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* dots */
.burst__dots{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;gap:8px}
.burst__dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--gold-soft);opacity:.5;transition:.2s}
.burst__dots button.is-active{opacity:1;background:var(--gold);transform:scale(1.15)}

/* ============================================================
   BRANDS — image cards with white gradient
   ============================================================ */
/* section background — soft sachet-coloured glows so it isn't flat & empty */
/* content block centred in the section — equal, generous space above the
   heading and below the category chips (symmetric padding, all screens) */
.brands{position:relative;overflow:hidden;padding-block:140px}
/* the homepage block opens and closes on the same 108px as every other
   .section; our-brands.html keeps the 140px above. Declared before the
   720px rule so the 68px phone padding still wins there. */
.brands--static{padding-block:108px}
.brands > .wrap{position:relative;z-index:1}
/* scattered straight-line accents (positions differ from burst) */
.brands__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.bdec{position:absolute}
.bdec--wave1,.bdec--wave2{background-repeat:no-repeat;background-position:center;background-size:contain}
.bdec--wave1{left:2.5%;top:12%;width:clamp(80px,9vw,132px);height:clamp(44px,5vw,72px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 78'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M14 20H126'/%3E%3Cpath d='M14 42H126'/%3E%3Cpath d='M14 64H126'/%3E%3C/g%3E%3C/svg%3E");
  animation:bdFloat 7.5s ease-in-out infinite}
.bdec--wave2{right:1.5%;top:45%;width:clamp(80px,9vw,132px);height:clamp(44px,5vw,72px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 78'%3E%3Cg fill='none' stroke='%231f1a6e' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M14 20H126'/%3E%3Cpath d='M14 42H126'/%3E%3Cpath d='M14 64H126'/%3E%3C/g%3E%3C/svg%3E");
  animation:bdFloat 8.5s ease-in-out infinite reverse}
.brands::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-150px;top:-100px;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(201,162,39,.14),transparent 72%)}
.brands::after{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-170px;bottom:-130px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(31,26,110,.10),transparent 72%)}
/* Our Brands page: the client asked for the circular glows to go — they read as
   dots/circles, which is off the brand tone. Scoped with :not(--static) so the
   homepage block, which is a separate item in the same brief, is untouched
   here. */
.brands:not(.brands--static)::before,
.brands:not(.brands--static)::after{display:none}
.brand-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.bcard{position:relative;border-radius:var(--r);overflow:hidden;min-height:492px;
  box-shadow:var(--shadow-sm);border:1px solid var(--line);display:flex;
  flex-direction:column;justify-content:flex-end;background:var(--tint);transition:.3s}
.bcard__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .5s ease}
/* cards WITHOUT a .bcard__media wrapper (other pages) keep the original
   white wash that fades the photo out behind the copy */
.bcard:not(:has(.bcard__media))::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top,#fff 30%,rgba(255,255,255,.86) 44%,rgba(255,255,255,.30) 60%,rgba(255,255,255,0) 78%)}

/* ---- split card: full-strength food photo on top, solid white copy panel
   below. No wash over the food, so the dish reads at full contrast. ---- */
.bcard:has(.bcard__media){min-height:576px}
.bcard__media{position:relative;flex:1 1 auto;min-height:300px;overflow:hidden;
  display:flex;flex-direction:column;background:var(--tint)}
/* The dish is shown at the original ZOOM — object-fit:cover fills the media
   band edge to edge, exactly as before the card was split, so the bowl reads
   large rather than floating small inside the frame. What changed from the
   original is only the wash: the photo now keeps its full contrast. */
.bcard__media{background:linear-gradient(to bottom,#fff 0%,
  color-mix(in srgb,var(--brand,var(--cci-blue)) 9%,#fff) 100%)}
.bcard__media .bcard__bg{inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
/* bowl.png is not centred inside its own canvas: it carries 212px of empty
   pixels on the right but only 6px on the left, putting the bowl's optical
   centre at 46.4% of the canvas instead of 50%. `cover` scales this image by
   WIDTH (source 1.28:1 into a 1.68:1 box), so there is no horizontal slack for
   object-position to work with. Instead the image is drawn 7.5% wider than the
   frame, which pushes the dead strip past the right edge and lands the bowl's
   own centre on the frame's centre. Layer-9.png is already centred (50.0%), so
   this is scoped to the ShinShin card. */
.bcard--blue .bcard__media .bcard__bg{left:.2%;right:auto;width:107.5%;max-width:none}

/* a short, light scrim behind the lock-up band only — enough to keep the mark
   legible over the photo, nowhere near the heavy white wash it replaced */
.bcard__media::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.42),rgba(255,255,255,.16) 56%,rgba(255,255,255,0))}
/* lock-up occupies its own band at the top of the media area (flex:none, so it
   takes only the height it needs); the dish gets everything below it.
   NB in the stacked variant the lock-up is a COLUMN, so it is `justify-content`
   — not `align-items` — that pins it to the top. */
.bcard__media .bcard__logo{flex:0 0 auto;align-items:flex-start;
  justify-content:center;padding:26px 30px 0}
.bcard__media .bcard__logo--stack{align-items:center;justify-content:flex-start}
.bcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--brand)}
.bcard:hover .bcard__bg{transform:scale(1.05)}
/* …but the homepage brands block is deliberately static — no hover lift,
   no image zoom, no chip lift (scoped so other pages keep theirs) */
.brands--static .bcard,.brands--static .bcard__bg,.brands--static .cat{transition:none}
.brands--static .bcard:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--line)}
.brands--static .bcard:hover .bcard__bg{transform:none}
.brands--static .cat:hover{transform:none;border-color:var(--line);color:inherit}
/* the lock-up is a flex item (not absolutely positioned) so it always fills
   exactly the space left above .bcard__body — it can never collide with the
   title, however tall the copy grows on narrow screens */
.bcard__logo{position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:28px 30px 10px;pointer-events:none}
.bcard__logo img{max-width:78%;max-height:118px;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(20,16,79,.22))}
.bcard__logo--white img{filter:brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0,0,0,.4))}
/* stacked lock-up: brand mark on top, supporting artwork underneath */
.bcard__logo--stack{flex-direction:column;gap:clamp(10px,1.1vw,14px)}
.bcard__logo--stack .bcard__mark{max-width:70%;max-height:clamp(84px,8.8vw,126px)}
.bcard__logo--stack .bcard__sub{max-width:clamp(140px,14.5vw,186px);max-height:none}
/* the Shin Shin outline logo ships with a lot of transparent padding — crop it
   to its lettering with a content-ratio frame so it reads at the same optical
   size as the Cho's Kitchen lock-up opposite */
.bcard__logo .bcard__mark--ss{width:68%;max-width:68%;height:auto;max-height:none;
  aspect-ratio:34/10;object-fit:cover;object-position:center;
  filter:drop-shadow(0 8px 16px rgba(20,16,79,.28))}
.bcard__body{position:relative;z-index:2;padding:26px;display:flex;flex-direction:column;gap:9px;
  /* lock title/description/button to the same level across both cards */
  min-height:214px}
/* the copy panel is its own solid white block (no gradient over the photo),
   separated from the image by a hairline in the card's brand colour */
.bcard__media + .bcard__body{background:#fff;flex:none;
  border-top:2px solid color-mix(in srgb,var(--brand,var(--cci-blue)) 34%,#fff)}

/* the card's visible name IS the brand logo in the lock-up above — no plain
   text brand name anywhere on the card. The heading is kept for screen
   readers and search engines only. */
.bcard__name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.bcard__tag{font-family:"DM Sans",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;width:max-content;
  padding:5px 12px;border-radius:100px}
.bcard h3{font-size:24px;margin:2px 0}
.bcard p{color:var(--ink-soft);font-size:16px;line-height:1.6;margin:0 0 8px;text-wrap:pretty}
/* brand cards — gold (Cho's Kitchen) & blue (Shin Shin) */
.bcard--gold{--brand:var(--gold)}
.bcard--blue{--brand:var(--cci-blue)}
.bcard--dna{--brand:var(--gold)}
.bcard__tag{background:color-mix(in srgb,var(--brand,var(--cci-blue)) 13%,#fff);
  color:var(--brand,var(--cci-blue))}
.bcard__body .link-arrow{color:var(--brand,var(--cci-blue));margin-top:auto}
.bcard__body .link-arrow::after{background:var(--brand,var(--cci-blue))}
.soon{position:absolute;top:16px;right:16px;z-index:3;background:var(--cci-blue);color:#fff;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:12px;padding:6px 13px;border-radius:100px}

.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
.cat{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:18px 20px;font-family:"DM Sans",sans-serif;
  font-weight:600;font-size:16px;transition:.2s}
.cat:hover{border-color:var(--cci-blue-500);color:var(--cci-blue);transform:translateY(-3px)}
.cat .ic{color:var(--cci-blue-500);width:26px;height:26px}

/* ------------------------------------------------------------
   HOMEPAGE BRANDS — the whole block reads on one screen, and the
   brand mark sits in the middle of the dish photo.
   Everything here is scoped to .brands--static, which only
   index.html carries, so our-brands.html keeps its own layout.
   ------------------------------------------------------------ */
/* the lock-up fills the photo band and centres in it, instead of
   sitting in a flex:none strip pinned to the top edge. In the
   stacked variant the lock-up is a COLUMN, so it is
   `justify-content` — not `align-items` — that centres it. */
.brands--static .bcard__media .bcard__logo{flex:1 1 auto;min-height:0;
  align-items:center;justify-content:center;padding:clamp(12px,2vh,26px) 30px}
.brands--static .bcard__media .bcard__logo--stack{align-items:center;justify-content:center}
/* the photo band is sized from the viewport below, so the marks are
   capped as a share of it as well as in px — otherwise the stacked
   Cho's Kitchen lock-up overflows its band on a short screen. The
   px cap still wins on a tall one, keeping both marks at the size
   the design intends. */
/* nothing competes with the marks now, so they are allowed to run larger.
   The base rules cap width at 70%/68% of the card — lifted here too, or the
   height caps below would never be reached. */
/* Caps are px-only on purpose. A percentage max-height here resolves against
   .bcard__logo, which is itself a flex item with an indefinite height — the
   cycle made the band size to the mark's WIDTH-bound height before the cap was
   applied, so on the one-column layout the gold card grew to 630px while the
   ShinShin card stayed at 576px. */
.brands--static .bcard__logo--stack .bcard__mark{
  max-width:86%;max-height:clamp(116px,12vw,176px)}
.brands--static .bcard__logo--stack .bcard__sub{
  max-width:clamp(176px,18vw,232px);max-height:clamp(72px,7.4vw,106px)}
.brands--static .bcard__logo .bcard__mark--ss{width:84%;max-width:84%}
/* re-proportioned: the card keeps its 492px height, but the copy panel no
   longer carries a title, so it hands ~38px back to the colour panel. */
.brands--static .bcard__body{min-height:176px}
/* The dish photo has been removed from these cards: the media band is now a
   flat brand-coloured wash that fades to white where it meets the copy panel,
   so the two halves read as one card rather than a photo stuck on a box. The
   colour is held at 58% at the top so the marks keep their contrast — a fully
   saturated blue would swallow the white-outlined ShinShin wordmark. */
/* Vertical, not diagonal: a 163deg sweep left the bottom-left corner still
   tinted, so the seam with the white copy panel showed. Straight down means the
   whole bottom edge lands on pure #fff and the two halves read as one surface. */
.brands--static .bcard__media{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--wash,var(--brand)) 60%,#fff) 0%,
    color-mix(in srgb,var(--wash,var(--brand)) 34%,#fff) 40%,
    color-mix(in srgb,var(--wash,var(--brand)) 12%,#fff) 72%,
    #fff 94%,#fff 100%)}
/* no rule between the wash and the copy panel — the gradient IS the transition */
.brands--static .bcard__media + .bcard__body{border-top:0}

/* ---- faint chilli / coriander motifs scattered in the colour band ----
   Both SVGs ship as flat #70a843 artwork, so — as with the burst section —
   they are painted as MASKS and take their colour from background-color: each
   card's own --wash, i.e. gold on Cho's Kitchen and blue on ShinShin.
   They sit in the LEFT AND RIGHT GUTTERS only. The lock-ups fill the band
   almost edge to edge vertically (11px clear above and below the Cho's
   Kitchen stack) but leave 167px/74px free at the sides, so the gutters are
   the one zone that is reliably clear of a logo on both cards. */
.bcard__motif{position:absolute;z-index:0;pointer-events:none;
  background:var(--wash,var(--brand));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.bcard__motif--chilli{-webkit-mask-image:url("../assets/icon/chilli.svg");
  mask-image:url("../assets/icon/chilli.svg")}
.bcard__motif--coriander{-webkit-mask-image:url("../assets/icon/coriander.svg");
  mask-image:url("../assets/icon/coriander.svg")}
/* Sized off the card so they shrink with it. These are roughly double the
   first pass — at 46px they were too small to register as anything. They now
   run wider than the ShinShin gutter, so they can reach under that wordmark's
   bounding box; the letters do not fill their own corners and the motifs sit
   at z-index 0 behind them, so nothing is actually obscured. */
/* Opacity is pitched against the WASH, not against white: at the top of the
   band the ground is already 60% of this same colour, so anything under ~.2
   disappears there even though it reads fine lower down where the gradient has
   faded out. These values stay quiet on white and still register on colour. */
.bcard__motif--m1{left:1.5%;top:5%;width:clamp(58px,15%,104px);aspect-ratio:1;
  opacity:.3;transform:rotate(-22deg)}
.bcard__motif--m2{right:2%;top:8%;width:clamp(52px,13.4%,94px);aspect-ratio:1;
  opacity:.26;transform:rotate(20deg)}
.bcard__motif--m3{left:3%;bottom:6%;width:clamp(46px,12%,84px);aspect-ratio:1;
  opacity:.22;transform:rotate(-38deg)}
.bcard__motif--m4{right:2.5%;bottom:4%;width:clamp(50px,12.8%,90px);aspect-ratio:1;
  opacity:.24;transform:rotate(30deg)}
/* ShinShin's brand colour is the deep navy used for its type; washed back to
   58% it reads as grey slate rather than the sky blue the brand is known for.
   The wash uses the brighter brand blue instead — the hairline, arrow and link
   on the copy panel still take the navy from --brand. */
.brands--static .bcard--blue{--wash:var(--cci-blue-500)}
/* no scrim needed without a photo underneath */
.brands--static .bcard__media::before{content:none}
/* No white halo behind the marks — it read as a stroke outlining each logo.
   The wash is held light enough at the top that both marks carry themselves;
   a plain soft shadow gives depth without drawing an edge. */
.brands--static .bcard__logo img{
  filter:drop-shadow(0 6px 14px rgba(20,16,79,.14))}

/* .brands__screen holds the heading and the two cards — the part that has to
   read on one screen. The category chips sit outside it and carry on into the
   next scroll, so they never eat into the cards' height. The wrapper takes
   over the z-index that `.brands > .wrap` used to give the blocks it now
   contains, at every screen size. */
.brands__screen{position:relative;z-index:1}

/* card height matches chochoindustry.yesdemo.co/allpages-6 — 606x492 at the
   1320px wrap. The split card carries a 214px copy panel, so the photo band
   takes the remaining 278px. The one-screen treatment that used to live here
   is off: it sized the block to the viewport and centred it, which made the
   real gap above the heading drift away from the 108px set below. */
/* pinned, not floored: the grid row is auto-sized, and the cards' max-content
   height resolves to ~600px (the marks fall back to their intrinsic size when
   the media band has no definite height). Everything fits inside 492px once
   the height is fixed — the percentage caps on the marks above then size them
   against the real band. Phones keep their own stacked min-heights below. */
/* The brand name heading is not shown on these cards — the logo in the panel
   above is the name. The base .bcard__name rule keeps it for screen readers
   and search engines, so nothing is lost semantically. */

@media (min-width:721px){
  .brands--static .bcard:has(.bcard__media){height:492px;min-height:0}
  /* the base 300px floor on the photo band is taller than the 278px left over
     after the copy panel, and the card stacks from the bottom — so the floor
     would push the top of the photo out of the card and clip it. The band
     takes whatever the copy panel leaves instead. */
  .brands--static .bcard__media{min-height:0}
}

/* ============================================================
   MANUFACTURING
   ============================================================ */
.mfg{background:var(--cci-blue);color:#fff}
.mfg__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center}
.mfg__media img{width:100%;height:500px;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow)}
.mfg__lead{color:rgba(255,255,255,.86);font-size:16px;margin:0 0 30px}
.mfg__feats{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-bottom:30px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat .ic{color:var(--cci-yellow);width:26px;height:26px;margin-top:2px}
.feat strong{display:block;font-family:"DM Sans",sans-serif;font-size:16px}
.feat span{color:rgba(255,255,255,.78);font-size:14px}

/* ============================================================
   EXPORT
   ============================================================ */
.export__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.export__text p{color:var(--ink-soft);font-size:16px;margin:0 0 24px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.chip{background:#fff;border:1px solid var(--line);border-radius:100px;padding:9px 16px;
  font-size:14px;font-family:"DM Sans",sans-serif;font-weight:500}
.export__media{position:relative;border-radius:var(--r);overflow:hidden;min-height:360px;
  background:#fff;border:1px solid var(--line)}
.export__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.export__media--ph{background:radial-gradient(circle at 30% 40%,var(--cci-blue-50),#fff 70%)}
.export__pins{position:absolute;inset:0}
.pin{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;border-radius:50%;
  background:var(--cci-blue-500);box-shadow:0 0 0 0 rgba(63,127,214,.5)}
.pin--home{background:var(--gold);width:15px;height:15px;animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(201,162,39,.5)}70%{box-shadow:0 0 0 16px rgba(201,162,39,0)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}

/* ============================================================
   INNOVATION
   ============================================================ */
.innov__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.icard{background:var(--cci-blue-50);border-radius:var(--r);padding:32px 30px;transition:.25s}
.icard:nth-child(2){background:#FFE0D8}
.icard:nth-child(3){background:#fff9d6}
.icard:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)}
.icard__ic{display:inline-flex;width:54px;height:54px;border-radius:16px;background:#fff;
  align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.icard__ic svg{width:26px;height:26px;fill:none;stroke:var(--cci-blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.icard:nth-child(2) .icard__ic svg{stroke:#F35235}
.icard:nth-child(3) .icard__ic svg{stroke:var(--gold)}
.icard h3{font-size:20px;margin-bottom:8px}
.icard p{color:var(--ink-soft);font-size:16px;margin:0}
/* section is exactly one screen; the bowl fills the leftover space below the cards */
.innov{position:relative;overflow:hidden;height:100vh;min-height:640px;
  display:flex;flex-direction:column;padding:108px 0 0}
.innov > .wrap{position:relative;z-index:2;flex:none}
.innov .center-head{margin-bottom:22px}
/* bowl enlarged, sits close under the cards and is cropped by the section's bottom edge */
.innov__bowl{position:relative;z-index:2;flex:none;align-self:center;margin-top:72px;
  width:min(760px,60%);height:auto;object-fit:cover;object-position:top center;
  filter:drop-shadow(0 -8px 26px rgba(31,26,110,.1))}
/* chives — smaller pieces kept to the side edges, gently spilling inward then fading out */
.innov__chive{position:absolute;top:0;bottom:0;z-index:1;width:min(22%,300px);
  background-image:url('../assets/images/chive.png');background-repeat:repeat-y;
  background-size:auto 64%;opacity:.78;pointer-events:none}
.innov__chive--l{left:0;background-position:left center;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 40%,transparent 100%);
          mask-image:linear-gradient(to right,#000 0%,#000 40%,transparent 100%)}
.innov__chive--r{right:0;background-position:right center;transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 40%,transparent 100%);
          mask-image:linear-gradient(to right,#000 0%,#000 40%,transparent 100%)}

/* ============================================================
   CSR
   ============================================================ */
.csr__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:center}
.csr__media img{width:100%;height:480px;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow)}
.csr__text p{color:var(--ink-soft);font-size:16px;margin:0 0 26px}
.csr__items{display:flex;flex-direction:column;gap:18px;margin-bottom:26px}
.csr__item{display:flex;gap:14px;align-items:flex-start}
.csr__item .ic{color:var(--cci-blue-500);width:26px;height:26px;margin-top:2px}
.csr__item strong{display:block;font-family:"DM Sans",sans-serif;font-size:16px}
.csr__item span{color:var(--ink-soft);font-size:14px}

/* ============================================================
   NEWS
   ============================================================ */
.news__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;gap:24px}
.news__head .h2{margin-bottom:0}
/* ---- "Latest from CCI" — the brand initials are set in gold italic. The
   client asked for the wavy underline beneath them to go, so the colour and
   italic alone carry the emphasis. */
.news__title{color:var(--cci-blue)}
.news__title em{position:relative;display:inline-block;font-style:italic;font-weight:700;
  /* Flat gold, NOT a background-clip:text gradient. The italic glyphs overhang
     their advance box on both sides (measured: 4.4px left, 6px right at 46px)
     and background-clip:text paints only inside that box, so the outer strokes
     of the C and I were sheared off. A plain colour has no such box. */
  color:var(--gold);line-height:1.34}
.news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ncard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.25s}
.ncard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.ncard__media{display:block;height:200px;overflow:hidden}
.ncard__media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.ncard__media img.ph,.ncard__media .ph{background:linear-gradient(135deg,var(--cci-blue-50),var(--tint))}
.ncard:hover .ncard__media img{transform:scale(1.05)}
.ncard__body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.ncard__meta{font-size:14px;color:var(--silver);display:flex;align-items:center;gap:8px}
.tag{font-family:"DM Sans",sans-serif;font-weight:600;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 10px;border-radius:100px}
.tag--blue{background:var(--cci-blue-50);color:var(--cci-blue)}
.tag--gold{background:#f7eecb;color:var(--gold)}
.tag--yellow{background:#fbf3b0;color:#8a7400}
.ncard h3{font-size:18px;line-height:1.3}
.ncard h3 a:hover{color:var(--cci-blue)}
.ncard p{color:var(--ink-soft);font-size:14px;margin:0}
/* excerpt locked to exactly 2 lines: longer copy ends in "…", shorter copy
   still reserves both lines, so every card keeps the same height whatever the
   post says. line-height 1.7 (not 1.6) leaves room for Burmese stacked vowel
   marks, which the clip would otherwise shave off the second line. */
.ncard p{line-height:1.7;height:3.4em;flex:none;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden}
/* Read more sits on the card's bottom edge, so a title that runs to an extra
   line never leaves the buttons out of step across the row */
.ncard .link-arrow{margin-top:auto;padding-top:6px}

/* ============================================================
   CONTACT
   ============================================================ */
/* dark contact section */
.contact--dark{background:var(--cci-blue);color:#fff}
.contact--dark .eyebrow{color:var(--gold-soft)}
.contact--dark .h2{color:#fff}
.contact--dark .ink-blue{color:var(--gold-soft)}
.contact--dark .contact__info p{color:rgba(255,255,255,.78)}
.contact--dark .contact__list .ic{color:var(--gold-soft)}
.contact--dark .contact__list span{color:rgba(255,255,255,.78)}
.contact--dark .contact__social a{background:rgba(255,255,255,.12)}
.contact--dark .contact__social a:hover{background:rgba(255,255,255,.24)}
.contact--dark .contact__form{color:var(--ink)}
.contact--dark .contact__form label{color:var(--ink)}
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}
.contact__info p{color:var(--ink-soft);margin:0 0 24px}
.contact__list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:18px}
.contact__list li{display:flex;gap:14px;align-items:flex-start}
.contact__list .ic{color:var(--cci-blue-500);margin-top:2px}
.contact__list span{color:var(--ink-soft);font-size:16px}
.contact__social{display:flex;gap:12px}
.contact__social a{width:42px;height:42px;border-radius:12px;background:var(--cci-blue);
  display:flex;align-items:center;justify-content:center;transition:.2s}
.contact__social a:hover{background:var(--cci-blue-700);transform:translateY(-2px)}
.contact__social svg{width:20px;height:20px;fill:#fff}
.contact__social .ig{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact__social .ig .dot{fill:#fff;stroke:none}
.contact__social--foot a{background:var(--cci-blue)}
.contact__social--foot a:hover{background:var(--cci-blue-700)}

.contact__form{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:36px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:18px;display:flex;flex-direction:column}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;margin-bottom:7px}
.field label em{color:var(--danger);font-style:normal}
.field input,.field select,.field textarea{
  font-family:"Roboto",sans-serif;font-size:16px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background-color:var(--tint);transition:.15s;width:100%;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cci-blue);background-color:#fff;box-shadow:0 0 0 3px var(--cci-blue-50)}
.field textarea{resize:vertical}
/* custom-styled select — matches the country-code dropdown & navbar style */
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2354545e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px 7px}
.field select:hover{border-color:var(--cci-blue-500)}
.phone-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch}
/* custom country-code dropdown — styled like the navbar dropdowns */
.ccdrop{position:relative}
.ccdrop__btn{display:flex;align-items:center;gap:7px;height:100%;min-height:46px;
  padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--tint);
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:16px;color:var(--ink);
  cursor:pointer;transition:.15s;white-space:nowrap}
.ccdrop__btn:hover{border-color:var(--cci-blue-500)}
.ccdrop.is-open .ccdrop__btn{border-color:var(--cci-blue);background:#fff;box-shadow:0 0 0 3px var(--cci-blue-50)}
.ccdrop__flag{font-size:18px;line-height:1}
.ccdrop__btn .caret{width:9px;height:6px;fill:none;stroke:var(--ink-soft);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;margin-left:1px}
.ccdrop.is-open .ccdrop__btn .caret{transform:rotate(180deg)}
.ccdrop__list{position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:288px;max-height:296px;
  overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:8px;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.ccdrop.is-open .ccdrop__list{opacity:1;visibility:visible;transform:translateY(0)}
.ccdrop__list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  font-size:14px;color:var(--ink-soft);cursor:pointer;transition:.12s}
.ccdrop__list li:hover,.ccdrop__list li.is-active{background:var(--cci-blue-50);color:var(--cci-blue)}
.ccdrop__list li .flag{font-size:20px;line-height:1;flex:none}
.ccdrop__list li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccdrop__list li .cd{font-family:"DM Sans",sans-serif;font-weight:600;color:var(--ink)}
.ccdrop__list li.is-active .cd{color:var(--cci-blue)}
.err{color:var(--danger);font-size:12px;margin-top:5px;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea{border-color:var(--danger)}
.form-ok{background:var(--cci-blue-50);color:var(--cci-blue);border-radius:10px;padding:14px 16px;
  margin:14px 0 0;font-size:14px;font-weight:500}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--tint);color:var(--ink-soft);padding:80px 0 0}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:52px;
  max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.foot__logo{height:46px;width:auto;margin-bottom:18px}
.foot__logo-fallback{display:none;font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:28px;color:var(--cci-blue);margin-bottom:18px}
.foot__brand p{font-size:16px;max-width:320px;margin:0 0 20px}
.foot__col h4{font-family:"DM Sans",sans-serif;color:var(--ink);font-size:16px;margin-bottom:16px}
.foot__col a{display:block;padding:6px 0;font-size:14px;transition:.15s}
.foot__col a:hover{color:var(--cci-blue)}
.foot__bar{border-top:1px solid var(--line);padding:22px 0;
  display:flex;justify-content:space-between;font-size:14px;
  max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);flex-wrap:wrap;gap:10px}
.foot__legal{display:flex;gap:18px}
.foot__legal a:hover{color:var(--cci-blue)}
/* agency credit in the legal line — set as a quiet note, not a link, so it
   reads as a byline beside Privacy / Terms (per the Yes! design agreement) */
.foot__by{opacity:.75;white-space:nowrap}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .nav__menu{display:none}
  .nav__burger{display:flex}
  /* mobile top bar: logo left, hamburger right; language switch lives in the drawer */
  .nav__right{margin-left:auto}
  .nav__right .lang{display:none}
  /* a phone-shaped frame shows less than a third of this 16:9 photo, so aim it
     at the join between the bowl and the open table — the copy then sits on
     wood rather than on the busiest part of the dish */
  .hero__bg{object-position:44% center}
  .hero{min-height:600px;align-items:flex-start}
  .hero__inner{justify-content:flex-start;padding-top:108px;padding-bottom:52px}
  .hero__panel-inner{max-width:600px}
  .hero__badge{left:var(--pad);top:24px}
  /* the banner mark is much larger now — trim it a little once the panel
     moves to the left and shares the width with the photo */
  .hero__logos{min-height:clamp(66px,9.6vw,92px);margin-bottom:16px}
  .hero__logo--brand{height:clamp(66px,9.6vw,92px)}
  .hero__logo--ss{height:auto;width:clamp(130px,16.9vw,184px)}
  .hero__tint{background:linear-gradient(to top,rgba(53,49,40,.93) 0%,rgba(53,49,40,.68) 58%,rgba(53,49,40,.52) 100%)}
  .hero__scroll{display:none}
  .about__grid,.mfg__grid,.export__grid,.csr__grid,.contact__grid{
    grid-template-columns:1fr;gap:44px}
  .mfg__feats{grid-template-columns:1fr 1fr}
  .brand-cards,.innov__grid,.news__grid{grid-template-columns:1fr 1fr}
  /* brand cards: two columns at this width leaves the body ~335px — too narrow
     to hold an authored line, so flow the copy as a normal paragraph. The
     centred section lead still has its full 700px and keeps its own lines. */
  .bcard p .ln{display:inline;text-wrap:pretty}
  .cats{grid-template-columns:1fr 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .about__media img,.mfg__media img,.csr__media img{height:400px}
  .bcard--dna{grid-column:span 2}
}
@media (max-width:720px){
  :root{--pad:22px}
  .section{padding:68px 0}
  /* brands: normal mobile spacing */
  .brands{padding-block:68px}
  /* minmax(0,1fr) keeps both stat columns exactly equal even though
     "ISO+GHP" has a wide min-content width */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .stat{padding:22px 10px 22px}
  .stat__num{font-size:clamp(30px,7.5vw,40px)}
  .stat__ic{width:46px;height:46px;border-radius:14px;margin-bottom:12px}
  .brand-cards,.innov__grid,.news__grid,.cats,.pillars,.mfg__feats,.field-row{grid-template-columns:1fr}
  /* three pillars stack into one column on phones like every other list */
  .about .pillars{grid-template-columns:1fr;gap:12px}
  .bcard--dna{grid-column:auto}
  /* single column on phones: the copy runs 5-6 lines, so give the card enough
     height for the stacked lock-up to sit clear of the title */
  .bcard{min-height:480px}
  /* the photo needs a guaranteed share of the card or the copy panel eats it */
  .bcard__media{min-height:230px}
  .bcard__logo{padding:22px 24px 8px}
  .bcard__body{padding:22px;min-height:0}
  /* banner mark: sized off the viewport so it never overruns a phone width */
  .hero__logos{min-height:clamp(66px,19vw,94px);margin-bottom:14px}
  .hero__logo--brand{height:clamp(66px,19vw,94px)}
  .hero__logo--ss{height:auto;width:clamp(130px,33.4vw,166px)}
  .hero__badge{font-size:11px;letter-spacing:.16em;padding:9px 15px}
  /* product headline: tighter above the stage on phones */
  .burst__title{font-size:clamp(22px,6.2vw,30px)}
  .news__head{flex-direction:column;align-items:flex-start;gap:8px}
  .about__badge{right:14px;top:14px;padding:14px 18px}
  .foot__grid{grid-template-columns:1fr;gap:30px}
  /* burst: drop every scattered accent on phones — only the stage panel stays.
     They crowd the caption / arrows and flank the dots at this width. */
  .bd--orange,.bd--red,.bd--chilli,.bd--coriander{display:none}
  /* brands: drop the scattered accents on mobile — with one column the
     decor lands right on top of the heading / paragraph copy */
  .bdec--wave1,.bdec--wave2{display:none}
  .bd--stage{height:min(440px,74%)}
  /* mobile: slogan sits BELOW the product images */
  .burst__slide{justify-content:center}
  /* one scale unit keeps every sachet + bowl identical on phones too */
  .burst__media{gap:14px;--bu:min(43vw,260px);min-height:calc(var(--bu)*1.00);order:1}
  /* full-width caption: the wave SVG used to be wider than its 64% box, so the
     auto margins collapsed and the slogan sat off-centre — let it fill instead */
  .burst__caption{width:100%;max-width:100%;order:2;padding-top:0;margin-top:8px}
  .burst__caption .burst__line{width:100%;max-width:100%}
  /* 2-line slogans: the desktop -56px overlap is too much for the small,
     shorter SVG lines on mobile — tighten it to a readable gap */
  .burst__caption .burst__line + .burst__line{margin-top:-4px}
  /* keep stage / viewport / slide the same height so images aren't clipped */
  .burst__stage,.burst__viewport,.burst__slide{min-height:clamp(340px,82vw,520px)}
  .burst__slide{gap:12px}
  .burst__arrow{width:38px;height:38px}
  .burst__arrow svg{width:18px;height:18px}
  .h2--oneline{white-space:normal}
  /* hero product: tucked right into the top-right corner, above the copy.
     The pack image also fills more of its box (86% instead of the desktop
     70%), which is most of what closes the gap to the corner. */
  .hero__product{left:auto;right:2px;bottom:auto;top:8px;
    width:clamp(104px,30vw,136px);height:clamp(104px,30vw,136px)}
  .hero__packimg{width:86%;height:86%}
  /* authored lines: the column is too narrow to hold one, so each would wrap
     two or three times — flow them back into a normal paragraph instead */
  .ln{display:inline;text-wrap:pretty}
  /* hero CTAs: stack full-width so both buttons are equal */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
  /* innovation: more breathing room above the heading, balanced with the section's bottom space */
  .innov{height:auto;min-height:0;padding:52px 0 52px}
  /* mobile: show the whole bowl (no crop) */
  .innov__bowl{flex:none;margin:16px auto 0;width:min(420px,88%);aspect-ratio:auto;height:auto;object-fit:contain}
  .innov__chive{width:26%;background-size:auto 60%;opacity:.5}
  .ccdrop__list{width:min(280px,80vw)}
  @keyframes floatPackSm{0%,100%{transform:translateY(0) rotate(-12deg)}
    50%{transform:translateY(-8px) rotate(-12deg)}}
}
@media (min-width:721px){
  /* balance the whitespace around the stat strip: 84+52 = 136px sits above it,
     so the tail must add up to the same — the section's 108px bottom padding
     stacked with the news section's 108px top padding made it 216px */
  .about.section{padding-bottom:30px}
}
@media (max-width:560px){
  /* phones: one stat per row so the figure, copy and thumbnail all breathe */
  .stats{grid-template-columns:1fr;gap:30px;max-width:420px;margin-inline:auto}
  .stat{padding:24px 14px 24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}