/* ============================================================
   Cho Cho Industry (CCI) — Our Heritage page styles
   Loads AFTER css/styles.css and reuses its tokens/components:
   .wrap .section .eyebrow .center-head .h2 .lead-center .btn .vm
   .stat .link-arrow .ic
   All font-size values are even px per site convention.
   ============================================================ */

/* ============================================================
   BREADCRUMB — simple bar under the navbar
   (identical to css/news.css — same pixels/margins/padding)
   ============================================================ */
/* breadcrumb sits at the top of the hero as a 48px strip (over the image),
   transparent bg, light links, gold current crumb; the banner area BELOW it
   matches contact.html's chero height */
.crumbs{position:relative;z-index:3;background:transparent}
.crumbs__inner{display:flex;align-items:center;gap:8px;height:48px;
  font-family:"DM Sans",sans-serif;font-size:14px;white-space:nowrap;overflow:hidden}
.crumbs a{color:rgba(255,255,255,.72);font-weight:500;flex:none;transition:.15s}
.crumbs a:hover{color:#fff}
.crumbs__sep{color:rgba(255,255,255,.4);flex:none}
.crumbs__current{color:var(--gold-soft);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   HERO — full-bleed, edge to edge, dark carved-wood texture
   ============================================================ */
/* aspect-ratio locked to the source photo's own dimensions so the full
   image always shows — never cropped by a fixed-height box */
/* compact banner — same vertical size as contact.html's hero (padding-based,
   not full-viewport); breadcrumb stays overlaid at the top */
.ohero{position:relative;overflow:hidden;
  display:flex;flex-direction:column;isolation:isolate}
/* the banner is 4:1 — wider than this block at almost every width, so the crop
   is aimed at its right half (pack, bowl and the 25th-anniversary ribbon). The
   left of the artwork sits under the dark tint that carries the title anyway. */
.ohero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:76% center;z-index:0}
.ohero__bg.ph{background:linear-gradient(120deg,#2a1c14,#120c08)}
.ohero__tint{position:absolute;inset:0;z-index:1;background:
  linear-gradient(120deg,rgba(12,8,6,.9) 0%,rgba(12,8,6,.68) 46%,rgba(12,8,6,.32) 80%)}
/* banner area below the breadcrumb — its own padding gives it the same
   height as contact.html's chero */
.ohero > .wrap{position:relative;z-index:2;flex:1;display:flex;align-items:center;
  padding-top:clamp(52px,6.6vw,76px);padding-bottom:clamp(52px,6.6vw,76px)}
.ohero__content{max-width:620px}
.ohero__eyebrow{display:inline-flex;align-items:center;gap:12px;
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px}
.ohero__line{display:inline-block;width:30px;height:2px;background:var(--gold-soft);flex:none}
.ohero__title{color:#fff;font-size:clamp(32px,4.4vw,52px);font-weight:700;
  line-height:1.12;margin:4px 0 14px}
.ohero__lead{color:rgba(255,255,255,.9);font-size:16px;line-height:1.55;margin:0}

/* ============================================================
   OUR STORY — About Us copy (left) + Chairman quote card (right)
   ============================================================ */
.ostory{position:relative;overflow:hidden;min-height:calc(100vh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;padding:64px 0}
.ostory__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.ostory__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(32px,4vw,56px);align-items:start}
.ostory__text .eyebrow{margin-bottom:12px}
.ostory__text h2{margin-bottom:20px}
.ostory__text p{color:var(--ink-soft);font-size:16px;line-height:1.75;margin:0 0 18px}
.ostory__text p:last-child{margin-bottom:0}

.quote{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:38px 30px 28px;box-shadow:var(--shadow-sm);overflow:hidden}
.quote__mark{position:absolute;top:6px;left:22px;font-family:Georgia,serif;font-size:88px;
  line-height:1;color:var(--cci-blue-50);font-weight:700;z-index:0}
.quote__text{position:relative;z-index:1;font-family:"DM Sans",sans-serif;font-weight:500;
  font-size:18px;line-height:1.6;color:var(--ink);margin:22px 0 24px}
.quote__attr{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line);
  margin-bottom:20px}
/* portrait — rounded rectangle, aligned to the top so the head is never cropped */
.quote__photo{width:72px;height:92px;border-radius:14px;object-fit:cover;object-position:top center;
  flex:none;border:2px solid var(--cci-blue-50);box-shadow:var(--shadow-sm)}
.quote__attr div{display:flex;flex-direction:column}
.quote__name{font-family:"DM Sans",sans-serif;font-weight:700;font-size:16px;color:var(--cci-blue)}
.quote__role{font-size:14px;color:var(--ink-soft);margin-top:2px}
.quote__motto{background:var(--cci-blue-50);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:4px}
.quote__motto span{font-family:"DM Sans",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cci-blue-500)}
.quote__motto strong{font-family:"DM Sans",sans-serif;font-weight:700;font-size:16px;color:var(--cci-blue)}

/* ============================================================
   HERITAGE TIMELINE — deep blue year-picker carousel, circles
   overlapping the track line, product-pack imagery per milestone
   ============================================================ */
.htlwrap{position:relative;overflow:hidden;min-height:calc(100vh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;padding:64px 0;
  background:linear-gradient(135deg,var(--cci-blue) 0%,var(--cci-blue-700) 100%)}
.htlwrap__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.htlwrap .center-head{position:relative;z-index:1}
/* straight-line accents: at 1700px+ they move out to ring the section, as in
   the client's reference layout; narrower screens keep the shared corner
   positions from styles.css */
@media (min-width:1700px){
  .htlwrap .bdec--wave1{left:12%;top:13%}
  .htlwrap .bdec--wave2{right:3.5%;top:62%}
}
@media (prefers-reduced-motion:reduce){
  .htlwrap .bdec{animation:none}
}

.h2--light{color:#fff}
.lead-center--light{color:rgba(255,255,255,.82)}

.htl{margin-top:12px;position:relative;z-index:1}
.htl__years{position:relative;display:flex;justify-content:space-between;gap:6px;
  padding-bottom:30px}
.htl__track{position:absolute;left:0;right:0;bottom:7px;height:0;
  border-top:2px dotted rgba(255,255,255,.35);z-index:1}
.htl__year{position:relative;z-index:2;background:none;border:none;cursor:pointer;
  padding:0 6px 30px;flex:none;font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:16px;color:rgba(255,255,255,.6);transition:color .2s ease}
.htl__year::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--cci-blue-700);
  border:3px solid rgba(255,255,255,.45);transition:.25s ease}
.htl__year:hover{color:#fff}
.htl__year.is-active{color:#fff;font-size:22px}
.htl__year.is-active::after{background:var(--cci-yellow);border-color:var(--cci-yellow);
  width:18px;height:18px;box-shadow:0 0 0 5px rgba(245,226,31,.22)}

.htl__nav{display:flex;gap:14px;margin:20px 0 40px}
.htl__arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);display:grid;place-items:center;cursor:pointer;color:#fff;
  transition:background .2s,color .2s,transform .2s}
.htl__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.htl__arrow:hover{background:var(--cci-yellow);color:var(--cci-blue);transform:scale(1.06)}
.htl__arrow:disabled{opacity:.3;cursor:not-allowed}
.htl__arrow:disabled:hover{background:rgba(255,255,255,.08);color:#fff;transform:none}

/* fixed height so the card is identical for every milestone, whether it
   holds one image, two layered images, a logo, or just the year number */
.htl__stage{position:relative}
/* The copy block is centred in the panel AND locked to the same position on
   every milestone: reserving four paragraph lines gives .htl__panel-text a
   constant height, so centring it can't shift the year pill / heading around
   when one card's paragraph is shorter than another's. */
.htl__panel{display:none;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;
  height:340px;background:#fff;border-radius:var(--r);padding:clamp(24px,3vw,36px);
  box-shadow:var(--shadow);box-sizing:border-box}
.htl__panel-media{align-self:stretch;min-width:0}
.htl__panel-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.htl__panel.is-active{display:grid}
.htl__panel-year{display:inline-block;font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.06em;color:var(--cci-blue);background:var(--cci-blue-50);
  padding:5px 12px;border-radius:100px;margin-bottom:12px}
.htl__panel-text h3{font-size:26px;font-weight:700;margin:0 0 12px;color:var(--ink)}
/* four reserved lines = the longest milestone paragraph, so every card's copy
   block is the same height and the pill above it never moves */
/* 62ch, not 52 — the milestone copy is authored line by line (see .ln) and the
   longest line runs 66 characters, so a 52ch cap would wrap it. The text column
   is wider than this anyway, so nothing else moves. */
.htl__panel-text p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0;
  max-width:62ch;min-height:calc(4 * 1.65em)}

/* no background box behind the media — the image or logo floats free */
.htl__panel-media{position:relative;height:100%;display:flex;align-items:center;
  justify-content:center}
.htl__panel-media span{font-family:"DM Sans",sans-serif;font-weight:800;
  font-size:clamp(56px,7vw,88px);color:var(--cci-blue-500);letter-spacing:-.02em}
.htl__panel-media.has-img img{max-width:100%;max-height:216px;object-fit:contain;
  filter:drop-shadow(0 14px 20px rgba(31,26,110,.18))}
.htl__panel-media.has-photo{border-radius:16px;overflow:hidden}
.htl__panel-media.has-photo img{width:100%;height:100%;max-height:none;object-fit:cover;
  filter:none}
.htl__panel-media.is-logo img{max-width:88%;max-height:210px;filter:none}

/* two images layered together — main pack front and centre,
   a second pack/bowl leaning in front-left, both drop-shadowed */
.htl__panel-media.is-multi{justify-content:center}
.htl__panel-media-main{position:relative;z-index:2;max-width:74%;max-height:216px;
  object-fit:contain;filter:drop-shadow(0 14px 20px rgba(31,26,110,.18))}
.htl__panel-media-sub{position:absolute;left:5%;bottom:18px;z-index:3;max-width:32%;
  max-height:96px;object-fit:contain;transform:rotate(-6deg);
  filter:drop-shadow(0 10px 16px rgba(31,26,110,.2))}
/* per-milestone tweaks */
/* 2001, 2014 & 2023 — pack + bowl (.is-garnish).
   The bowl used to be pinned to the FRAME's left edge (left:19%), so the wider
   the frame the further it sat from the pack. centreMedia() then had to shove
   the whole group right to centre its bounding box, which left the pack 8-13%
   right of centre — worse the wider the frame. Anchoring the bowl to the frame
   CENTRE (where the flex-centred pack sits) makes the lock-up identical at every
   width, and centreMedia centres the pack itself for these cards. */
.htl__panel-media.is-garnish .htl__panel-media-sub{left:auto;right:50%;
  margin-right:-30px;bottom:18px;max-width:36%;max-height:120px;transform:rotate(-8deg)}
/* 2020 — the two packs are launched together, so both packs are shown at
   equal size (needs explicit max-* on both to beat the shared defaults) */
.htl__panel[data-panel="5"] .htl__panel-media-main{max-width:50%;max-height:180px}
.htl__panel[data-panel="5"] .htl__panel-media-sub{left:4%;bottom:17px;max-width:50%;
  max-height:180px;transform:rotate(-8deg)}

/* three images fanned like a hand of cards — used for milestones that
   launch more than one flavour at once */
.htl__panel-media.is-triple .htl__panel-media-main{max-width:52%;max-height:210px;z-index:3}
.htl__panel-media-l,.htl__panel-media-r{position:absolute;bottom:20px;max-width:38%;
  max-height:158px;object-fit:contain;z-index:2;
  filter:drop-shadow(0 10px 16px rgba(31,26,110,.2))}
/* inset as a % so the tilted outer packs keep the same clearance from the
   corner marks at every card size (a 12deg tilt throws the box wider than the
   pack itself, which is what used to graze the gold) */
.htl__panel-media-l{left:6%;transform:rotate(-12deg)}
.htl__panel-media-r{right:6%;transform:rotate(12deg)}
/* 2025 — three flavours launched together, so all three packs match size */
.htl__panel[data-panel="9"] .htl__panel-media-main,
.htl__panel[data-panel="9"] .htl__panel-media-l,
.htl__panel[data-panel="9"] .htl__panel-media-r{max-width:40%;max-height:180px}

/* five packs fanned like a hand of cards (2026) */
.htl__panel-media.is-fan5{position:relative;overflow:visible}

/* ============================================================
   MILESTONE IMAGERY — bright gold corner marks (client sketch)
   ------------------------------------------------------------
   Not a frame all the way round: two L-shaped corner marks only, top-right
   and bottom-left, exactly as the sketch draws them around the picture. One
   pair per milestone — around the whole image group, not one per pack, which
   would fight the layered/fanned compositions.
   The gold is the same #D9AE3C used for the Cho's Kitchen frames: brighter
   than the antique --gold, pulled back from the orange of --cci-yellow.
   ============================================================ */
.htl{--ms-gold:#D9AE3C;--ms-mark:3px;--ms-thin:1.5px;--ms-gap:6px;--ms-round:16px}
.htl__panel-media{padding:12px;box-sizing:border-box}
/* each corner is a PAIR of lines, as the sketch draws it: the media's own
   pseudo-elements carry the thick outer L, and .mscorner — inset by the gap —
   carries the fine inner one that runs parallel to it. */
.htl__panel-media::before,
.htl__panel-media::after,
.mscorner::before,
.mscorner::after{content:"";position:absolute;width:26%;height:26%;
  border:0 solid var(--ms-gold);pointer-events:none;z-index:4}
.htl__panel-media::before{top:0;right:0;
  border-top-width:var(--ms-mark);border-right-width:var(--ms-mark);
  border-top-right-radius:var(--ms-round)}
.htl__panel-media::after{bottom:0;left:0;
  border-bottom-width:var(--ms-mark);border-left-width:var(--ms-mark);
  border-bottom-left-radius:var(--ms-round)}
/* the inner pair — same corners, thinner stroke, tighter radius so the two
   lines stay parallel round the bend */
.mscorner{position:absolute;inset:var(--ms-gap);pointer-events:none;z-index:4}
.mscorner::before{top:0;right:0;
  border-top-width:var(--ms-thin);border-right-width:var(--ms-thin);
  border-top-right-radius:calc(var(--ms-round) - var(--ms-gap))}
.mscorner::after{bottom:0;left:0;
  border-bottom-width:var(--ms-thin);border-left-width:var(--ms-thin);
  border-bottom-left-radius:calc(var(--ms-round) - var(--ms-gap))}
/* js/our-heritage.js measures the pack group and parks the difference here, so
   the composition sits centred in the frame whatever the card holds. It rides
   on `translate` (not `transform`) so the packs keep their own rotations. */
.htl__panel-media > img,
.htl__panel-media > .htl__fan{translate:var(--ms-x,0px) var(--ms-y,0px)}
/* photos keep their own soft corners inside the marks */
.htl__panel-media.has-photo img{border-radius:10px}
/* the fan can lean past its box; inside a frame it has to stay in it */
.htl__panel-media.is-fan5{overflow:visible}
/* uniform HEIGHT keeps every pack the same size regardless of aspect ratio
   (Shin Shin is portrait, the Cho's Kitchen packs are 4:3) so they line up */
.htl__fan{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;max-width:100%}
.htl__fan img{height:min(100px,7.4vw);width:auto;max-width:none;object-fit:contain;
  transform-origin:50% 90%;filter:drop-shadow(0 10px 14px rgba(31,26,110,.22))}
.htl__fan img + img{margin-left:max(-52px,-3.85vw)}
.htl__fan img:nth-child(1){transform:rotate(-14deg)}
.htl__fan img:nth-child(2){transform:rotate(-7deg)}
.htl__fan img:nth-child(3){transform:rotate(0)}
.htl__fan img:nth-child(4){transform:rotate(7deg)}
.htl__fan img:nth-child(5){transform:rotate(14deg)}

/* ============================================================
   VISION & VALUES — bold icon-badge cards make vision/mission
   the visual anchor of the section
   ============================================================ */
/* no bottom padding: the full-bleed value columns finish the section, so the
   tint would otherwise show as a pale band under them. The swipe-rail
   breakpoint puts the padding back (see the 1100px block). */
.vv{position:relative;overflow:hidden;min-height:calc(100vh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;padding:64px 0 0}
.vv .center-head{position:relative;z-index:1}
/* two cards side by side — full-bleed photo as the card's own background,
   a brand-colour gradient fading in over it, icon > label > quote stacked
   on top at the base */
.vv__vm{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:28px;margin-bottom:56px}
.vmslide{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  min-height:clamp(380px,40vw,455px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,2.8vw,32px);
  border-radius:var(--r);box-shadow:var(--shadow)}
.vmslide__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;transform:scale(1.03);transition:transform .6s ease}
.vmslide:hover .vmslide__img{transform:scale(1.08)}
/* gradient layer — transparent at the top so the photo reads clearly,
   deep enough at the base to keep the copy readable */
.vmslide::after{content:"";position:absolute;inset:0;z-index:-1}
.vmslide--vision::after{background:linear-gradient(180deg,
    color-mix(in srgb,var(--cci-blue) 8%,transparent) 0%,
    color-mix(in srgb,var(--cci-blue) 55%,transparent) 42%,
    color-mix(in srgb,var(--cci-blue) 92%,transparent) 74%,
    var(--cci-blue) 100%)}
.vmslide--mission::after{background:linear-gradient(180deg,
    color-mix(in srgb,var(--gold) 8%,transparent) 0%,
    color-mix(in srgb,var(--gold) 55%,transparent) 42%,
    color-mix(in srgb,#8a6c16 92%,transparent) 74%,
    #8a6c16 100%)}
.vmslide__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.16);flex:none;margin-bottom:20px}
.vmslide__icon svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.vmslide__label{display:block;font-family:"DM Sans",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:10px}
/* height synced to match the longer card's quote — see js/our-heritage.js
   (a fixed line-count reservation can't work here: the quotes are different
   lengths, and how many lines the longer one wraps to changes with the
   viewport, so only a measured value stays correct at every width) */
.vmslide__text{margin:0;font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:clamp(20px,2.2vw,24px);line-height:1.35}

/* ---- five value columns ------------------------------------------
   A full-bleed band: each value is its own floor-to-ceiling column with
   a photo behind a brand gradient. The gradient's base colour drifts from
   cool CCI navy (01) to warm gold-brown (05) and the accent rule ramps
   blue → gold, so the five columns read as one continuous gradient. */
/* the headline belongs to the columns below it, so it keeps its distance from
   the vision/mission cards above but sits tight to the pillars */
.vv__subhead{margin-top:clamp(52px,5.5vw,80px);margin-bottom:0}
/* direct child of .vv (NOT .wrap) so it spans the full page width */
.vv__pillars{position:relative;z-index:1;width:100%;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  /* shared rows: filler | num | title | text — so the numbers, headers and
     the first line of every paragraph sit on the same baseline across columns */
  grid-template-rows:1fr auto auto auto;
  margin-top:clamp(18px,1.8vw,26px)}
.pillar{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  min-height:clamp(400px,42vw,540px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,2.1vw,34px);
  /* accent hairline along the top edge */
  box-shadow:inset 0 4px 0 0 var(--pillar-accent)}
/* photo layer */
.pillar__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(1.03);transition:transform .6s ease}
/* gradient layer — deep enough at the base to keep the copy readable */
.pillar::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--pillar-c) 20%,transparent) 0%,
    color-mix(in srgb,var(--pillar-c) 58%,transparent) 38%,
    color-mix(in srgb,var(--pillar-c) 88%,transparent) 72%,
    var(--pillar-c) 100%)}
.pillar:hover .pillar__img{transform:scale(1.08)}
/* cool → warm ramp across the band */
.pillar{--pillar-c:#12103f;--pillar-accent:#5f93dd}
.pillar:nth-child(2){--pillar-c:#171338;--pillar-accent:#87a6d8}
.pillar:nth-child(3){--pillar-c:#1e1731;--pillar-accent:#b3a78d}
.pillar:nth-child(4){--pillar-c:#251b27;--pillar-accent:#d4ad38}
.pillar:nth-child(5){--pillar-c:#2c1f1c;--pillar-accent:#e8ad43}
.pillar__num{display:block;font-family:"DM Sans",sans-serif;font-weight:800;font-size:14px;
  letter-spacing:.14em;color:var(--pillar-accent);margin-bottom:10px}
.pillar__title{font-size:clamp(20px,1.7vw,24px);font-weight:700;margin:0 0 10px;color:#fff}
.pillar__text{margin:0;font-size:14px;line-height:1.7;color:rgba(255,255,255,.84)}
/* align num / title / first paragraph line across the five columns — each
   pillar adopts the parent's shared rows (filler | num | title | text) */
@supports (grid-template-rows:subgrid){
  /* a spanning item's min-height is ignored when it crosses the 1fr filler
     track, so the container carries the card height instead — same
     clamp as .pillar, keeping the columns exactly as tall as before */
  .vv__pillars{min-height:clamp(400px,42vw,540px)}
  .pillar{display:grid;grid-template-rows:subgrid;grid-row:span 4;
    justify-content:normal;align-content:normal}
  .pillar__num{grid-row:2}
  .pillar__title{grid-row:3}
  .pillar__text{grid-row:4;align-self:start}
}

/* ============================================================
   AWARDS & RECOGNITION — gold-tinted section (premium accent
   per brand guidelines), real certificate photography
   ============================================================ */
/* deep brand-navy stage — the gold cards read as awards on a gala backdrop */
.awards{padding:0 0 clamp(64px,7vw,110px);color:#fff;
  background:radial-gradient(120% 80% at 78% 18%,#2a2496 0%,transparent 62%),
             linear-gradient(180deg,#231d80 0%,var(--cci-blue) 46%,#141043 100%);
  /* the front card exits to the right — clip (NOT hidden, which would break
     the sticky pin) so it never causes a horizontal scrollbar */
  overflow-x:clip}
.awards .eyebrow{color:var(--gold-soft)}
.awards .h2{color:#fff}

/* ---- auto-playing award deck ---------------------------------------
   The page no longer pins while you scroll: js/our-heritage.js moves the
   front card on a timer and writes the transform/opacity of every .acard.
   The block keeps its near-full-screen height so the layout (and the air
   above the heading) is unchanged. */
.adeck{position:relative}
/* a shade under a full screen so the deck doesn't leave a tall empty band
   between the last card and the stats below */
.adeck__pin{position:relative;
  min-height:calc(100vh - var(--nav-h) - 72px);display:flex;align-items:center}
/* prev / next — same buttons as the Heritage Timeline on this page */
.adeck__nav{display:flex;gap:14px;margin-top:26px}
.adeck__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(40px,5vw,86px);align-items:center;width:100%}
.adeck__lead{color:rgba(255,255,255,.72);font-size:16px;line-height:1.75;
  margin:18px 0 30px;max-width:46ch}
.adeck__count{margin:0;font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.adeck__count em{font-style:normal;font-size:34px;line-height:1;color:var(--gold-soft);
  margin-right:8px;vertical-align:-4px}
.adeck__bar{position:relative;height:3px;border-radius:3px;background:rgba(255,255,255,.16);
  margin-top:16px;max-width:320px;overflow:hidden}
.adeck__bar span{position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  border-radius:3px;transition:width .3s ease}

/* nudged down: the cards waiting behind fan UPWARDS, so centring the front
   card left the top of the stack almost touching the navbar */
.adeck__stage{position:relative;height:clamp(420px,56vh,560px);
  transform:translateY(clamp(20px,6vh,64px))}
/* gold award plates — no coloured cap; the stack peeks as bare gold edges */
.acard{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;
  width:min(100%,440px);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:24px;
  background:linear-gradient(158deg,var(--acc-hi) 0%,var(--acc) 52%,var(--acc-lo) 100%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 34px 70px -26px rgba(6,4,32,.72),
             inset 0 1px 0 rgba(255,255,255,.42);
  transform-origin:50% 50%;backface-visibility:hidden;
  will-change:transform,opacity}
/* gold ramp so the stacked edges read as depth, not as flat repeats */
.acard{--acc-hi:#e3c460;--acc:#c9a227;--acc-lo:#9d7a17;--acc-ink:#33280a}
.acard:nth-child(2){--acc-hi:#ddba52;--acc:#c09a22;--acc-lo:#947214}
.acard:nth-child(3){--acc-hi:#d7b249;--acc:#b8921e;--acc-lo:#8c6b12}
.acard:nth-child(4){--acc-hi:#d1aa41;--acc:#b08a1b;--acc-lo:#846410}
.acard:nth-child(5){--acc-hi:#cba33a;--acc:#a88218;--acc-lo:#7d5e0e}
.acard:nth-child(6){--acc-hi:#c59b33;--acc:#a07a15;--acc-lo:#75570c}
/* the certificate photo sits on a bright plate inset in the gold */
.acard__media{flex:1 1 auto;min-height:0;margin:14px 14px 0;border-radius:14px;
  background:#fbfaf5;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;padding:16px}
.acard__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* a certification mark is artwork, not a document — cap it so it reads as a
   logo on the plate instead of stretching to fill it like a scanned page */
.acard__media--logo img{max-width:60%;max-height:74%}
/* the map reads better full-bleed than as a document floating on a plate, so it
   covers the whole inset panel. `overflow` is what keeps the covered image
   inside the plate's 14px corners. */
.acard__media--fill{padding:0;overflow:hidden}
.acard__media--fill img{width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover}
.acard__body{flex:none;padding:20px 26px 26px}
.acard--seal .acard__body{flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:center;padding:34px 30px}
.acard__year{display:inline-block;align-self:flex-start;width:max-content;
  font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-ink);
  background:rgba(255,255,255,.58);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  padding:5px 12px;border-radius:100px;margin-bottom:12px}
.acard__title{font-size:clamp(19px,1.6vw,23px);font-weight:700;line-height:1.2;
  margin:0 0 10px;color:#231a02;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.acard__desc{margin:0;font-size:14px;line-height:1.65;color:rgba(35,26,2,.78)}
.acard__issuer{display:block;margin-top:14px;font-family:"DM Sans",sans-serif;
  font-weight:600;font-size:12px;letter-spacing:.06em;color:rgba(35,26,2,.62)}
/* oversized watermark seal on the text-only cards */
.acard__seal{position:absolute;right:-26px;bottom:-30px;width:190px;height:190px;
  fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;
  opacity:.24;pointer-events:none}

/* The three stat boxes that used to close this section (25+ Years / 3 Power
   Brands / ISO Certified) were removed from our-heritage.html, so their
   .awards .stat* overrides went with them. The shared .stats / .stat styles
   still live in css/styles.css for the pages that do use them. */

/* ============================================================
   QUALITY & FOOD SAFETY
   ============================================================ */
.quality{min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;
  justify-content:center;padding:64px 0;background:var(--tint)}
/* 1.35fr matches .ostory__grid — and the copy needs it: two of the authored
   lines (see .ln) run ~667px, which the old 1.2fr split cut off at 646px. */
.quality__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,4vw,56px);align-items:center}
.quality__text .eyebrow{margin-bottom:12px}
.quality__text h2{margin-bottom:20px}
.quality__text p{color:var(--ink-soft);font-size:16px;line-height:1.75;margin:0 0 18px}
.quality__text p:last-child{margin-bottom:0}
.quality__pillars{display:flex;flex-direction:column;gap:16px}
/* grid so the description column starts at the SAME x on every pillar
   (fixed title column) — regardless of how long the title wraps */
.qpillar{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;display:grid;grid-template-columns:36px minmax(150px,180px) 1fr;
  grid-template-areas:"num title desc";column-gap:16px;align-items:center;transition:.2s ease}
.qpillar:hover{border-color:var(--cci-blue-500);box-shadow:var(--shadow-sm)}
.qpillar__num{grid-area:num;flex:none;width:36px;height:36px;border-radius:50%;background:var(--cci-blue-50);
  color:var(--cci-blue);display:grid;place-items:center;font-family:"DM Sans",sans-serif;
  font-weight:700;font-size:16px}
.qpillar h3{grid-area:title;font-size:16px;font-weight:700;margin:0;color:var(--ink)}
.qpillar p{grid-area:desc;font-size:14px;color:var(--ink-soft);margin:0;line-height:1.55}

/* ============================================================
   OUR IMPACTS — community & environment (from Letter.docx)
   ============================================================ */
.impacts{min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;
  justify-content:center;padding:64px 0}
.impacts__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4vw,56px);align-items:center}
.impacts__text .eyebrow{margin-bottom:12px}
.impacts__text h2{margin-bottom:20px}
.impacts__text p{color:var(--ink-soft);font-size:16px;line-height:1.75;margin:0 0 18px}
.impacts__text p:last-child{margin-bottom:0}
.impacts__grid-media{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.impacts__grid-media img{width:100%;height:220px;object-fit:cover;border-radius:var(--r);
  box-shadow:var(--shadow-sm);display:block}
.impacts{position:relative;overflow:hidden}
.impacts__grid{position:relative;z-index:1}

/* ============================================================
   RESPONSIVE — same breakpoints as styles.css
   ============================================================ */
@media (max-width:1100px){
  .ostory__grid{grid-template-columns:1fr}
  /* stacked, the quote card runs the full width while its authored lines are
     barely half that — a ragged column with dead space beside it. Flow them
     back into a paragraph; the story copy beside it is long enough to keep its
     own lines all the way down to the 720px collapse. */
  .quote__text .ln{display:inline;text-wrap:pretty}
  /* the timeline panel keeps its 1.3fr/1fr split down to 720px, so the copy
     column narrows with the viewport — ~513px at 1100px, already short of the
     longest authored line. Flow them as a paragraph from here down. */
  .htl__panel-text p .ln{display:inline;text-wrap:pretty}
  /* Same story for every other block of authored copy on this page, for one of
     two opposite reasons: the export / quality grids stack, so the column grows
     to ~905px and the lines leave 250-630px of dead space beside them; the award
     cards shrink instead, and the lines no longer fit. Both want a paragraph.
     Only the headings keep their break — two lines reads as a heading at any
     width. */
  .quality__text p .ln,
  .adeck__lead .ln,
  .acard__desc .ln{display:inline;text-wrap:pretty}
  .quality__grid{grid-template-columns:1fr}
  .impacts__grid{grid-template-columns:1fr}
  /* stacked: copy + artwork are centred in the card as one group. Both rows
     have a fixed height (four reserved paragraph lines + a fixed media box)
     so centring still lands every card on the same position. */
  .htl__panel{grid-template-columns:1fr;grid-template-rows:auto auto;
    align-content:center;height:460px;gap:16px}
  .htl__panel-media{height:170px;padding:10px;--ms-round:13px;--ms-gap:5px}
  .htl__panel-media span{font-size:clamp(56px,14vw,90px)}
  .htl__panel-media.has-img img,.htl__panel-media-main{max-height:142px}
  .htl__panel-media-sub{max-height:76px;bottom:13px}
  .htl__panel-media-l,.htl__panel-media-r{max-height:112px;bottom:15px}
  /* the 2020 / 2025 cards carry their own desktop sizes, which are taller than
     the stacked card's picture box — inside the gold frame they have to come
     back to the same ceiling as everything else */
  .htl__panel[data-panel="5"] .htl__panel-media-main,
  .htl__panel[data-panel="5"] .htl__panel-media-sub{max-width:46%;max-height:118px}
  .htl__panel[data-panel="9"] .htl__panel-media-main,
  .htl__panel[data-panel="9"] .htl__panel-media-l,
  .htl__panel[data-panel="9"] .htl__panel-media-r{max-width:38%;max-height:112px}
  .htl__fan img{height:104px}
  .htl__fan img + img{margin-left:-54px}
}
/* five value columns → horizontal swipe rail once a fifth of the screen is
   too narrow to set the copy comfortably (same breakpoint as the rest of
   the page's two-column → one-column switches) */
@media (max-width:1100px){
  .vv__pillars{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;gap:14px;
    padding-inline:var(--pad);scroll-padding-inline:var(--pad);
    scrollbar-width:none;-ms-overflow-style:none;
    /* the desktop card-height clamp lives on the container now — the rail
       cards carry their own min-height, so release it here */
    min-height:0}
  .vv__pillars::-webkit-scrollbar{display:none}
  .pillar{flex:0 0 min(76vw,320px);scroll-snap-align:center;
    border-radius:20px;min-height:clamp(380px,92vw,440px);
    padding:24px 22px;
    /* the rail is a flex row — undo the desktop subgrid alignment */
    display:flex;flex-direction:column;justify-content:flex-end;grid-row:auto}
  .pillar__text{font-size:14px}
  /* no hover on touch — keep the photo steady */
  .pillar:hover .pillar__img{transform:scale(1.03)}

  /* award deck → swipe rail. The pin is released and every card becomes a
     normal flex item; js/our-heritage.js strips its inline transforms and
     the track height at this width. */
  /* the pillars become a swipe rail here, so the section needs its bottom
     padding back — the columns no longer run to the section's edge */
  .vv{padding-bottom:64px}
  /* the pin no longer supplies the top air, so pad the section symmetrically
     (it used to be padding-top:0 / padding-bottom:64px on phones) */
  .awards{padding-top:clamp(64px,7vw,110px)}
  .adeck__pin{position:static;min-height:0}
  .adeck__grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .adeck__lead{margin-bottom:0;max-width:none}
  .adeck__count,.adeck__bar{display:none}
  .adeck__nav{margin-top:4px}
  .adeck__stage{height:auto;transform:none;display:flex;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;gap:16px;
    margin-inline:calc(var(--pad) * -1);
    padding:6px var(--pad) 26px;scroll-padding-inline:var(--pad);
    scrollbar-width:none;-ms-overflow-style:none}
  .adeck__stage::-webkit-scrollbar{display:none}
  .acard{position:relative;inset:auto;margin:0;
    flex:0 0 min(78vw,330px);width:auto;
    height:clamp(400px,108vw,480px);scroll-snap-align:center;
    box-shadow:0 20px 40px -22px rgba(21,21,27,.4)}
  .acard__seal{width:150px;height:150px;right:-20px;bottom:-24px}
}
@media (max-width:720px){
  /* decorative accents would overlap stacked mobile text — hide them */
  .ostory__decor{display:none}
  /* one-screen-per-section is a desktop pattern — on mobile let each
     section size to its own content instead of forcing full-viewport gaps */
  .ostory,.htlwrap,.vv,.awards,.quality,.impacts{min-height:0}
  /* banner area matches contact.html's mobile chero height */
  .ohero > .wrap{padding-top:107px;padding-bottom:107px}
  /* a phone-shaped frame keeps roughly a fifth of this 4:1 banner: aim it at
     the monochrome archive half so the title isn't sitting on the packshot,
     and swap the diagonal tint for a vertical one that covers the whole slice */
  .ohero__bg{object-position:34% center}
  .ohero__tint{background:linear-gradient(180deg,rgba(12,8,6,.55) 0%,rgba(12,8,6,.72) 46%,rgba(12,8,6,.88) 100%)}
  .ohero__title{font-size:26px;margin-bottom:10px}
  .ohero__eyebrow{margin-bottom:10px}
  .ohero__lead{font-size:14px;line-height:1.5}
  .ostory{padding-top:40px}
  .ostory__text p{font-size:14px}
  .quote{padding:30px 22px 24px}
  .quote__text{font-size:16px}
  .htl__years{overflow-x:auto;justify-content:flex-start;gap:26px;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .htl__year{scroll-snap-align:center}
  .htl__panel{padding:20px 18px;gap:14px;height:480px}
  .htl__panel-media{height:150px;padding:9px;--ms-gap:4px}
  .htl__panel-media.has-img img,.htl__panel-media-main{max-height:124px}
  .htl__panel-media-sub{max-height:62px;bottom:13px}
  .htl__panel-media-l,.htl__panel-media-r{max-height:98px;bottom:12px}
  .htl__panel[data-panel="5"] .htl__panel-media-main,
  .htl__panel[data-panel="5"] .htl__panel-media-sub{max-height:102px}
  .htl__panel[data-panel="9"] .htl__panel-media-main,
  .htl__panel[data-panel="9"] .htl__panel-media-l,
  .htl__panel[data-panel="9"] .htl__panel-media-r{max-height:98px}
  /* the fan comes in another notch on a phone so it clears the gold frame */
  .htl__fan img{height:60px}
  .htl__fan img + img{margin-left:-30px}
  .htl__panel-text h3{font-size:22px}
  .htl__panel-text p{font-size:14px}
  .vv__vm{grid-template-columns:1fr;gap:24px;margin-bottom:36px}
  .quality__pillars{gap:12px}
  /* stack the description full-width under the num + title on phones */
  .qpillar{grid-template-columns:36px 1fr;grid-template-areas:"num title" "desc desc";row-gap:8px}
  .impacts__grid-media{gap:10px}
  .impacts__grid-media img{height:140px}
}