/* ==========================================================================
   Double Yumm (Pvt) Ltd — corporate site
   Design system. Edit brand colour in one place: --red below.
   ========================================================================== */

:root {
  /* Brand */
  --red: #E92931;
  --red-dark: #C31C24;
  --red-deep: #8E1219;
  --red-tint: #FDF1F1;
  --red-tint-2: #FBE6E7;

  /* Neutrals */
  --ink: #16181C;
  --ink-2: #3A3F47;
  --ink-3: #6B7280;
  --line: #E7E4E1;
  --cream: #FBF8F5;
  --white: #FFFFFF;

  /* Type */
  --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Space */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --gutter: 24px;
  --section-y: clamp(56px, 8vw, 104px);

  /* Banner heights. Fixed px on purpose: a vh-based height collapses on short
     windows, and the page with the longest copy then grows past it on its own.
     The home hero leads, so it is taller; every interior page shares one height. */
  --banner-home-h: 558px;   /* home page rotating hero */
  --banner-h: 470px;        /* every other page banner */

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(22,24,28,.06), 0 2px 8px rgba(22,24,28,.05);
  --shadow-md: 0 8px 28px rgba(22,24,28,.10);
  --shadow-lg: 0 20px 56px rgba(22,24,28,.14);
  --t: .25s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }
button { font: inherit; }
h1, h2, h3, h4, h5 { color: var(--ink); margin: 0 0 .5em; line-height: 1.14; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.15rem, 5.2vw, 3.9rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -.018em; }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 5vw, 68px); }
.section--cream { background: var(--cream); }
.section--tint { background: var(--red-tint); }
.section--red { background: var(--red); color: rgba(255,255,255,.92); }
.section--red h2, .section--red h3, .section--red h4 { color: #fff; }
.section--ink { background: var(--ink); color: rgba(255,255,255,.78); }
.section--ink h2, .section--ink h3 { color: #fff; }

.grid { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.section--red .eyebrow, .section--ink .eyebrow { color: rgba(255,255,255,.8); }
.lead { font-size: clamp(1.03rem, 1.5vw, 1.18rem); color: var(--ink-3); line-height: 1.7; }
.section--red .lead, .section--ink .lead { color: rgba(255,255,255,.85); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 54px); }
.section-head.center { margin-inline: auto; text-align: center; }
.rule { width: 56px; height: 4px; background: var(--red); border-radius: 3px; margin: 0 0 22px; }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px;
  border-radius: 100px;
  font-weight: 700;
  font-size: .96rem;
  letter-spacing: -.005em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform var(--t); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(233,41,49,.3); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--red); color: var(--red); background: var(--red-tint); }
.btn--white { background: #fff; color: var(--red); border-color: #fff; }
.btn--white:hover { background: rgba(255,255,255,.9); color: var(--red-dark); transform: translateY(-2px); }
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--outline-white:hover { background: #fff; color: var(--red); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-row.center { justify-content: center; }

.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .95rem; }
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--t); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.announce {
  background: var(--ink); color: rgba(255,255,255,.9);
  font-size: .86rem; text-align: center; padding: 9px 16px;
}
.announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 84px; }
.brand-logo { display: flex; align-items: center; flex: none; }
.brand-logo img { height: 54px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* :not(.btn) throughout — the "Contact us" button also lives inside .nav, and
   without this these link rules override its own colour and underline it. */
.nav a:not(.btn) {
  display: block; padding: 10px 14px;
  color: var(--ink); font-weight: 600; font-size: .95rem;
  border-radius: 8px; position: relative;
  transition: var(--t);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2.5px; background: var(--red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.nav a:not(.btn):hover, .nav a:not(.btn).is-active { color: var(--red); }
.nav a:not(.btn):hover::after, .nav a:not(.btn).is-active::after { transform: scaleX(1); }
.header-cta { margin-left: 14px; }
.header-cta .btn { padding: 11px 22px; font-size: .9rem; position: relative; }
/* Matches the underline the nav links use, in white. No lift, no colour shift. */
.header-cta .btn--primary::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 7px;
  height: 2px; background: #fff; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.header-cta .btn--primary:hover,
.header-cta .btn--primary:focus-visible {
  background: var(--red); border-color: var(--red); color: #fff;
  transform: none; box-shadow: none;
}
.header-cta .btn--primary:hover::after,
.header-cta .btn--primary:focus-visible::after,
.header-cta .btn--primary.is-active::after { transform: scaleX(1); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 19px; height: 2px; background: var(--ink); position: relative; transition: var(--t); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: var(--ink); transition: var(--t);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: 0 0 auto; top: var(--header-h, 76px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 24px;
    box-shadow: var(--shadow-md);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: var(--t); max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.02rem; }
  .nav a:not(.btn)::after { display: none; }
  .header-cta { margin: 18px 0 0; }
  .header-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
/* One fixed height for the whole banner. Slides are stacked in the same box,
   so a slide with a longer headline can never make the page jump height when
   the rotation moves on. */
.hero-slides { position: relative; height: var(--banner-home-h); }
.hero-slide { position: absolute; inset: 0; display: none; }
.hero-slide.is-active { display: block; animation: fadeUp .6s ease both; }
@keyframes fadeUp { from { opacity: 0; } to { opacity: 1; } }

.hero-bg { position: absolute; inset: 0; }
.hero-bg picture { display: block; width: 100%; height: 100%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Darkens the left so white headline text stays readable, then lifts to the
   right so the photograph itself still reads. Tuned against real banner images. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(18,9,10,.84) 0%, rgba(18,9,10,.60) 44%, rgba(18,9,10,.12) 100%);
}
@media (max-width: 860px) {
  /* A wide 2:1 photo crops hard on a phone. Rather than dim the whole thing,
     keep the top of the frame clear so the picture reads, and sink the copy
     onto a dark base at the bottom. */
  /* Taller on phones: the copy is bottom-anchored, so extra height becomes a
     clear band of photograph at the top rather than more dead space. */
  .hero-slides { height: 76vh; }              /* photo needs room, artwork needs less */
  .page-hero-inner { min-height: clamp(320px, 44vh, 400px); }
  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(18,9,10,.20) 0%,
      rgba(18,9,10,.28) 13%,
      rgba(18,9,10,.82) 23%,
      rgba(18,9,10,.93) 40%,
      rgba(18,9,10,.96) 100%);
  }
  .hero-bg img { object-position: 70% 16%; }
  .hero-inner { align-items: flex-end; padding-bottom: 56px; }
}
/* ---- Artwork slides ----
   For a designed banner supplied as finished artwork (product range shots,
   campaign key visuals). The artwork already carries its own branding and
   layout, so the whole image is shown uncropped on white, the dark photo
   overlay is switched off, and the headline text is not laid over it. */
.hero-slide--artwork { background: #fff; }   /* overridden per slide by its own colour */
.hero-slide--artwork .hero-bg::after { background: none; }
.hero-slide--artwork .hero-bg img { object-fit: contain; object-position: center; }
.hero-slide--artwork .eyebrow,
.hero-slide--artwork h1,
.hero-slide--artwork .hero-copy > p { display: none; }
/* With no headline above it the button would float to the middle of the frame.
   This drops it to the same height as the buttons on the photograph slides. */
.hero-slide--artwork .hero-inner {
  align-items: flex-end;
  padding-bottom: calc(var(--banner-home-h) * 0.19 - 8px);
}
.hero-slide--artwork .btn-row { margin-top: 0; margin-bottom: 8px; }
/* On a light artwork the white button and white dots would disappear, so the
   slider measures each slide's own background and flips them. */
.hero.is-light .hero-dots button { background: rgba(22,24,28,.22); }
.hero.is-light .hero-dots button.is-active { background: var(--red); }
.hero-slide--artwork.on-light .btn--white {
  background: var(--red); color: #fff; border-color: var(--red);
}
.hero-slide--artwork.on-light .btn--white:hover { background: var(--red-dark); border-color: var(--red-dark); }
.hero-slide--artwork.on-light .btn--outline-white { color: var(--ink); border-color: var(--line); }
.hero-slide--artwork.on-light .btn--outline-white:hover { background: var(--red); color: #fff; border-color: var(--red); }

@media (max-width: 860px) {
  /* Artwork fills most of a phone screen, so sit it at the top and leave the
     band below it clear for the button rather than laying one over the other.
     This block sits after the rules above so it wins on equal specificity. */
  .hero-slide--artwork .hero-bg img { object-position: center top; }
  .hero-slide--artwork .hero-inner { padding-bottom: 40px; }
  .hero-slide--artwork .btn-row { margin-bottom: 0; }
}

.hero-bg--pattern {
  background:
    radial-gradient(900px 520px at 88% 12%, rgba(255,255,255,.13), transparent 62%),
    linear-gradient(125deg, var(--red-deep) 0%, var(--red-dark) 45%, var(--red) 100%);
}
.hero-bg--pattern::after { background: none; }
.hero-pattern { position: absolute; inset: 0; opacity: .1; }

.hero-inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; align-items: center;
  padding-block: clamp(32px, 4vw, 52px);
}
.hero-copy { max-width: 660px; }
.hero .eyebrow { color: rgba(255,255,255,.85); }
/* Slightly tighter than the page h1 scale so a three-line headline still fits
   the fixed banner height without crowding the button. */
.hero h1 { color: #fff; margin-bottom: 18px; font-size: clamp(2rem, 4.4vw, 3.35rem); }
.hero p { color: rgba(255,255,255,.9); font-size: clamp(1.03rem, 1.6vw, 1.2rem); max-width: 560px; }

.hero-dots { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3; display: flex; gap: 9px; justify-content: center; }
.hero-dots button {
  width: 32px; height: 4px; border: 0; border-radius: 3px; padding: 0;
  background: rgba(255,255,255,.38); cursor: pointer; transition: var(--t);
}
.hero-dots button.is-active { background: #fff; width: 46px; }

/* Page hero (interior pages) — same height as the home banner, set by
   --banner-h so every banner on the site stays in step. */
.page-hero { position: relative; background: var(--red); color: #fff; overflow: hidden; }
.page-hero .hero-bg--pattern { position: absolute; inset: 0; }
.page-hero-inner {
  position: relative; z-index: 2;
  min-height: var(--banner-h);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(32px, 4vw, 52px);
}
.page-hero h1 {
  color: #fff; margin-bottom: 16px; max-width: 20ch;
  font-size: clamp(2rem, 4.4vw, 3.35rem);
}
.page-hero p { color: rgba(255,255,255,.9); max-width: 620px; font-size: clamp(1rem, 1.5vw, 1.14rem); }
.page-hero .eyebrow { color: rgba(255,255,255,.82); }

/* Breadcrumb */
.crumbs { font-size: .84rem; color: rgba(255,255,255,.75); margin-bottom: 18px; }
.crumbs a { color: rgba(255,255,255,.85); }
.crumbs a:hover { color: #fff; }
.crumbs span { opacity: .55; margin: 0 7px; }

/* ---------- Stats ---------- */
.stats { background: var(--red); color: #fff; }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: clamp(34px, 4.5vw, 52px); }
.stat { text-align: center; }
.stat-value { font-size: clamp(2.2rem, 4.4vw, 3.1rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; color: #fff; }
.stat-label { font-size: .84rem; margin-top: 9px; color: rgba(255,255,255,.82); font-weight: 600; letter-spacing: .01em; }
@media (max-width: 700px) { .stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; } }

/* ---------- Split (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.split--reverse .split-media { order: 2; }
.split-media img, .split-media .ph { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
}

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; transition: var(--t); height: 100%;
}
.card:hover { border-color: var(--red-tint-2); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--ink-3); font-size: .96rem; margin: 0; }
.section--cream .card { background: #fff; }

.icon-badge {
  width: 50px; height: 50px; border-radius: 13px;
  background: var(--red-tint); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.icon-badge svg { width: 25px; height: 25px; }
.section--red .icon-badge { background: rgba(255,255,255,.16); color: #fff; }

/* Numbered value cards */
.value-card { position: relative; padding-top: 34px; }
.value-num {
  position: absolute; top: 22px; right: 24px;
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  color: var(--red-tint-2); letter-spacing: -.05em;
}

/* ---------- Brand tiles ---------- */
.brand-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 30px); }
@media (max-width: 820px) { .brand-tiles { grid-template-columns: 1fr; } }

.brand-tile {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: #fff; transition: var(--t);
}
.brand-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }
.brand-tile-media { aspect-ratio: 16/9; background: var(--cream); position: relative; overflow: hidden; }
.brand-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.brand-tile:hover .brand-tile-media img { transform: scale(1.04); }
.brand-tile-body { padding: 30px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.brand-tile-logo { height: 58px; width: auto; margin-bottom: 18px; object-fit: contain; object-position: left; }
.brand-chip {
  display: inline-block; align-self: flex-start;
  background: var(--red-tint); color: var(--red);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px; margin-bottom: 14px;
}
.brand-tile h3 { font-size: 1.35rem; }
.brand-tile p { color: var(--ink-3); font-size: .97rem; flex: 1; }
.brand-tile .link-arrow { margin-top: 20px; }

/* ---------- Products ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.filter-btn {
  padding: 9px 18px; border-radius: 100px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink-2); font-weight: 650; font-size: .89rem;
  cursor: pointer; transition: var(--t);
}
.filter-btn:hover { border-color: var(--red); color: var(--red); }
.filter-btn.is-active { background: var(--red); border-color: var(--red); color: #fff; }

.product-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; transition: var(--t); display: flex; flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--red-tint-2); }
.product-media { aspect-ratio: 1/1; background: var(--cream); overflow: hidden; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.product-card:hover .product-media img { transform: scale(1.05); }
.product-body { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.product-cat { font-size: .71rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--red); margin-bottom: 7px; }
.product-body h3 { font-size: 1.06rem; margin-bottom: 7px; }
.product-body p { font-size: .89rem; color: var(--ink-3); margin: 0; flex: 1; }
.product-size { margin-top: 12px; font-size: .82rem; font-weight: 700; color: var(--ink-2); }

/* Image placeholder */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--red-tint) 0%, var(--red-tint-2) 100%);
  color: var(--red); width: 100%; height: 100%;
  overflow: hidden;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(233,41,49,.05) 0 12px, transparent 12px 24px);
}
.ph svg { width: 34%; max-width: 92px; height: auto; opacity: .32; position: relative; }
.ph-label {
  position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(233,41,49,.55);
}

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--red-tint-2); }
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -34px; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 4px solid var(--red);
}
.tl-year { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 5px; }
.tl-item h3 { font-size: 1.15rem; margin-bottom: 6px; }
.tl-item p { color: var(--ink-3); font-size: .95rem; margin: 0; }

/* ---------- Moments strip ---------- */
.moment {
  border-left: 3px solid var(--red); padding: 4px 0 4px 22px;
}
.moment h3 { font-size: 1.08rem; margin-bottom: 6px; }
.moment p { color: var(--ink-3); font-size: .94rem; margin: 0; }

/* ---------- Prose ---------- */
.prose { max-width: 74ch; }
.prose p { font-size: 1.04rem; color: var(--ink-2); }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul li { margin-bottom: .4em; }

/* ---------- News ---------- */
.news-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: var(--t); }
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.news-media { aspect-ratio: 16/10; background: var(--cream); overflow: hidden; }
.news-media img { width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: 24px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.news-date { font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--red); margin-bottom: 9px; }
.news-body h3 { font-size: 1.14rem; margin-bottom: 9px; }
.news-body p { color: var(--ink-3); font-size: .93rem; flex: 1; margin: 0 0 16px; }

/* ---------- Careers ---------- */
.job {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; transition: var(--t); margin-bottom: 12px;
}
.job:hover { border-color: var(--red); box-shadow: var(--shadow-sm); }
.job-main { flex: 1; min-width: 220px; }
.job h3 { font-size: 1.1rem; margin-bottom: 5px; }
.job-meta { font-size: .87rem; color: var(--ink-3); }
.empty-note { padding: 34px; border: 1.5px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--ink-3); background: var(--cream); }

/* ---------- Contact / forms ---------- */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 4vw, 58px); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .89rem; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .96rem; color: var(--ink);
  background: #fff; transition: var(--t);
}
.field textarea { min-height: 138px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(233,41,49,.13); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.info-block { background: var(--cream); border-radius: var(--radius-lg); padding: 30px 28px; }
.info-item { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.info-item:last-child { border-bottom: 0; padding-bottom: 0; }
.info-item:first-child { padding-top: 0; }
.info-item svg { width: 19px; height: 19px; color: var(--red); flex: none; margin-top: 3px; }
.info-item .k { font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.info-item .v { color: var(--ink); font-weight: 600; font-size: .97rem; }

.form-note { font-size: .84rem; color: var(--ink-3); margin-top: 14px; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: .93rem; font-weight: 600; display: none; }
.form-status.ok { display: block; background: #E9F7EF; color: #1A7F45; border: 1px solid #BFE7CE; }
.form-status.err { display: block; background: var(--red-tint); color: var(--red-dark); border: 1px solid var(--red-tint-2); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--red-deep) 0%, var(--red-dark) 50%, var(--red) 100%); color: #fff; position: relative; overflow: hidden; }
.cta-band .wrap { position: relative; z-index: 2; text-align: center; padding-block: clamp(50px, 6.5vw, 82px); }
.cta-band h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 54ch; margin-inline: auto; font-size: 1.05rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.66); font-size: .93rem; }
.footer-top { padding-block: clamp(46px, 6vw, 72px); display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 940px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-logo img { height: 60px; width: auto; margin-bottom: 18px; }
.footer-blurb { max-width: 40ch; line-height: 1.65; }
.footer-col h4 { color: #fff; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 16px; font-weight: 800; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,.66); }
.footer-col a:hover { color: #fff; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.09); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: var(--t);
}
.socials a:hover { background: var(--red); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.11);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: center;
  font-size: .85rem; color: rgba(255,255,255,.5);
}
.footer-bottom a { color: rgba(255,255,255,.6); }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--red); color: #fff; padding: 11px 18px; border-radius: 0 0 8px 8px;
  font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }
.todo {
  display: inline-block; background: #FFF4D6; color: #8A6100;
  border: 1px solid #F2DFA8; border-radius: 6px;
  padding: 1px 8px; font-size: .78rem; font-weight: 700;
}