/* ==========================================================================
   Young Corporation — "Global Industrial Elegance" design system
   Shared across all pages. Maps to Elementor global styles later:
   - :root tokens  → Elementor Global Colors / Fonts
   - .section      → Elementor full-width Section
   - .btn variants → Elementor Button styles
   ========================================================================== */

/* ---- Design tokens ----
   Brand palette read directly from the real logo SVG
   (/images/design/logo/old/logo_old_horizontal.svg):
     navy  #202874   sky  #00B3F0
   --sky-ink is a darkened sky that passes WCAG AA (>=4.5:1) as text on
   the off-white/white backgrounds; raw --sky is reserved for dark
   backgrounds, borders, icons and small accents only. */
:root {
  /* brand */
  --navy: #202874;          /* deep navy from logo */
  --navy-800: #262f80;      /* darker navy for insets */
  --sky: #00B3F0;           /* bright sky blue from logo */
  --sky-ink: #0E6E9E;       /* AA-safe sky for text/links on light */

  /* semantic surfaces & text */
  --bg: #F7F5F1;            /* warm off-white page background */
  --surface: #FFFFFF;       /* white cards */
  --text: #1c2333;          /* body text on light */
  --text-muted: #5b6675;
  --text-inverse: #ffffff;  /* text on navy/dark */
  --line: #e4e2dc;
  --glass: rgba(255, 255, 255, 0.08);

  /* legacy aliases (kept so existing selectors resolve) */
  --navy-700: #2c3690;
  --offwhite: var(--bg);
  --paper: var(--surface);
  --ink: var(--text);
  --muted: var(--text-muted);

  --font-display: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1200px;
  --gap: clamp(1rem, 3vw, 2.5rem);
  --radius: 8px;
  --radius-sm: 4px;
  --shadow-sm: 0 2px 10px rgba(32, 40, 116, .06);
  --shadow-md: 0 14px 40px rgba(32, 40, 116, .12);
  --shadow-lg: 0 30px 70px rgba(32, 40, 116, .22);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--offwhite);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--sky-ink); text-decoration: none; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
p { margin: 0 0 1.1rem; }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--sky-ink);
  margin: 0 0 1rem;
}
.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--muted); }

/* ---- Layout ----
   ONE container utility. Header bar, hero text block and every section's
   inner content use this, so all left edges align down the page. */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 560px) { .container { padding-inline: 16px; } }
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--navy { background: var(--navy); color: #dfe6f0; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--paper { background: var(--paper); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure.center { margin-inline: auto; }
.stack > * + * { margin-top: 1rem; }

/* ---- Buttons ----
   Two canonical classes: .btn-primary and .btn-ghost, plus a
   .btn-ghost-dark variant (navy border/text) for light backgrounds.
   Legacy .btn / .btn--gold / .btn--ghost are aliased to these. */
.btn, .btn-primary, .btn-ghost, .btn-ghost-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  letter-spacing: .01em; line-height: 1.2;
  padding: 14px 28px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer; text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
}

/* Primary — solid navy, white text (12.99:1, AA) */
.btn-primary, .btn--gold {
  background: var(--navy); color: var(--text-inverse); border-color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn--gold:hover {
  background: #182060; border-color: #182060; color: #fff;
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}

/* Ghost — for dark/photo backgrounds: legible frosted chip, white text */
.btn-ghost, .section--navy .btn--ghost, .hero .btn--ghost {
  background: rgba(255,255,255,.08); color: #fff;
  border-color: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn-ghost:hover, .section--navy .btn--ghost:hover, .hero .btn--ghost:hover {
  background: rgba(255,255,255,.16); color: #fff; border-color: #fff;
  transform: translateY(-2px);
}

/* Ghost-dark — for light backgrounds: navy border + navy text */
.btn-ghost-dark, .btn--ghost {
  background: transparent; color: var(--navy); border-color: var(--navy);
}
.btn-ghost-dark:hover, .btn--ghost:hover {
  background: var(--navy); color: #fff; border-color: var(--navy);
  transform: translateY(-2px);
}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 245, 241, .85);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .85rem;
}
.brand { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-display); font-weight: 600; }
.brand__logo { height: 44px; width: auto; display: block; }
.brand__mark { font-size: 1.35rem; color: var(--navy); letter-spacing: -.02em; }
.brand__mark b { color: var(--sky); }
.brand__sub { font-family: var(--font-body); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.nav__links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { font-size: .95rem; font-weight: 500; color: var(--ink); position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--sky); transition: width .25s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 1rem; }
.nav__phone { font-weight: 600; }
.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: .4rem;
  flex-direction: column; gap: 5px;
}
.nav__toggle span { width: 26px; height: 2px; background: var(--navy); transition: .3s; }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--offwhite); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.25rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
  }
  .nav__links.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links li { width: 100%; border-top: 1px solid var(--line); }
  .nav__links a { display: block; padding: .9rem 0; }
  .nav__phone-text { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; color: #fff; overflow: hidden;
  /* full-bleed photo, strengthened left-to-right navy overlay for AA text */
  background: linear-gradient(90deg, rgba(11,22,58,.85), rgba(11,22,58,.25)),
              url("https://youngcorporation.com/images/hero/home/slide_3.jpg") center/cover;
}
/* text block sits inside .container (keeps its 1200px width, 24px padding
   and centering so its LEFT edge lines up with the header logo). The text
   itself is capped at 640px and pinned flush-left for comfortable measure. */
.hero__inner {
  min-height: 85vh; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; text-align: left;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.hero__inner > * { max-width: 640px; width: 100%; }
.hero h1 { color: #fff; }
.hero .eyebrow { color: var(--sky); }
.hero .lede { color: #dbe2f0; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 1.8rem; }
.hero__actions .btn, .hero__actions .btn-primary, .hero__actions .btn-ghost { min-width: 0; }
.hero--compact {
  background: linear-gradient(90deg, var(--navy), var(--navy-800));
}
.hero--compact .hero__inner { min-height: 0; padding-block: clamp(3.5rem, 9vw, 6rem) clamp(2.5rem, 6vw, 4rem); }
/* hero--photo: inline background-image carries the photo; keep the AA overlay.
   Defined here (after .hero) so the inline style only supplies the image. */
.hero--photo { background-color: var(--navy); background-size: cover; background-position: center; background-repeat: no-repeat; }
@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__actions .btn, .hero__actions .btn-primary, .hero__actions .btn-ghost { width: 100%; }
}

/* ==========================================================================
   Trust bar / stat counters
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stat {
  background: var(--glass); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius); padding: 1.6rem 1.2rem; text-align: center;
  backdrop-filter: blur(6px);
}
.stat__num { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--sky); font-weight: 600; line-height: 1; }
.stat__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: #c3cddd; margin-top: .5rem; }
@media (max-width: 680px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Bento brand grid
   ========================================================================== */
/* Uniform brand grid — one repeatable card design.
   Maps 1:1 to an Elementor Pro Loop Grid / Posts widget: 3 cols desktop,
   2 tablet, 1 mobile, equal heights. Differentiation is image + sky-blue
   eyebrow only — never card size or background. */
.brand-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem; align-items: stretch;
}
.brand-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.brand-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--sky); }
.brand-card__media {
  height: 150px; background: var(--offwhite);
  display: grid; place-items: center; padding: 1.5rem; border-bottom: 1px solid var(--line);
}
.brand-card__media img { max-height: 100%; width: auto; object-fit: contain; }
.brand-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.brand-card__cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; color: var(--sky-ink); font-weight: 600; }
.brand-card__name { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); }
.brand-card__vp { color: var(--muted); font-size: .95rem; margin: 0; flex: 1; }
.brand-card__link { margin-top: .8rem; font-weight: 600; font-size: .9rem; color: var(--sky-ink); display: inline-flex; gap: .3rem; align-self: flex-start; }
.brand-card__link::after { content: "→"; transition: transform .25s var(--ease); }
.brand-card:hover .brand-card__link::after { transform: translateX(4px); }
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Generic card grid (sectors, values, locations, blog)
   ========================================================================== */
.grid { display: grid; gap: 1.4rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.card__icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: rgba(0,179,240,.12); color: var(--sky-ink); margin-bottom: 1rem;
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ==========================================================================
   Supply-chain signature strip
   ========================================================================== */
.chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.chain__line {
  position: absolute; top: 46px; left: 12%; right: 12%; height: 3px;
  background: rgba(255,255,255,.18); overflow: hidden;
}
.chain__line::after {
  content: ""; position: absolute; inset: 0; width: var(--chain-progress, 0%);
  background: linear-gradient(90deg, var(--sky), var(--sky-ink));
  transition: width 1.2s var(--ease);
}
.chain__step { text-align: center; padding: 0 1rem; position: relative; z-index: 1; }
.chain__dot {
  width: 92px; height: 92px; margin: 0 auto 1.2rem; border-radius: 50%;
  background: var(--navy-800); border: 2px solid var(--sky);
  display: grid; place-items: center; color: var(--sky);
}
.chain__dot svg { width: 40px; height: 40px; }
.chain__step h3 { color: #fff; margin-bottom: .3rem; }
.chain__step p { color: #b9c4d6; font-size: .9rem; }
@media (max-width: 760px) {
  .chain { grid-template-columns: 1fr; gap: 2rem; }
  .chain__line { display: none; }
}

/* ==========================================================================
   Global footprint
   ========================================================================== */
.footprint { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .footprint { grid-template-columns: 1fr; } }
.loc-list { list-style: none; margin: 0; padding: 0; }
.loc-list li {
  display: flex; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.section--navy .loc-list li b { color: #fff; }
.loc-list .flag { font-size: 1.3rem; line-height: 1.4; }
.loc-list .loc-meta { font-size: .85rem; color: #a9b5c8; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq { max-width: 820px; margin-inline: auto; }
.acc { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 1.15rem; color: var(--navy); font-weight: 600;
  padding: 1.3rem 2.5rem 1.3rem 0; position: relative;
}
.acc__btn::after {
  content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 1.6rem; color: var(--sky-ink); transition: transform .3s;
}
.acc__btn[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.acc__panel { overflow: hidden; max-height: 0; transition: max-height .35s var(--ease); }
.acc__panel-inner { padding: 0 0 1.3rem; color: var(--muted); }

/* ==========================================================================
   Quote form
   ========================================================================== */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; padding: .8rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(0,179,240,.28);
}
.form--onnavy .field label { color: #b9c4d6; }
.form--onnavy .field input, .form--onnavy .field select, .form--onnavy .field textarea {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff;
}

/* CTA band */
.cta-band { background: linear-gradient(130deg, var(--navy), var(--navy-700)); color: #fff; }
.cta-band h2 { color: #fff; }

/* ==========================================================================
   CTA (image band above footer)
   ========================================================================== */
.cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3.5rem, 8vw, 6rem) 0; text-align: center; }
.cta__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; filter: saturate(.9);
}
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(130deg, rgba(11,18,38,.86), rgba(44,54,144,.78));
}
.cta__inner { color: #fff; display: grid; gap: 1.1rem; justify-items: center; }
.cta__title { color: #fff; margin: 0; max-width: 20ch; }
.cta__text { color: #d7deec; margin: 0; max-width: 56ch; }
.cta .btn--dark { margin-top: .6rem; }
.btn__ico { display: inline-block; margin-left: .25rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: #081627; color: #9fb0c6; padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }
.footer a { color: #9fb0c6; }
.footer a:hover { color: var(--sky); }
.footer__brand p { max-width: 34ch; font-size: .92rem; margin: 1rem 0; }
.footer__logo { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: #fff; }
.footer__logo span { color: var(--sky); }
.footer__logo:hover { color: #fff; }
.footer__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .92rem; }
.footer__label { display: block; color: #fff; font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; margin-bottom: .8rem; }
.footer__col p { font-size: .9rem; line-height: 1.6; margin: 0 0 .7rem; }
.footer__col .ico { display: inline-block; width: 1.4em; color: var(--sky); }
.footer__mark {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 12vw, 7rem); line-height: 1; color: rgba(255,255,255,.05);
  margin: 2.5rem 0 1rem; white-space: nowrap; overflow: hidden;
}
.footer__bottom {
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center;
  justify-content: space-between; font-size: .82rem;
}

/* ==========================================================================
   Article / blog
   ========================================================================== */
.article { max-width: 760px; margin-inline: auto; }
.article p, .article li { color: #2a3547; }
.article h2 { margin-top: 2.4rem; }
.article h3 { margin-top: 1.8rem; }
.article__meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; color: var(--muted); font-size: .9rem; margin-bottom: 2rem; }
.tag { display: inline-block; background: rgba(0,179,240,.14); color: var(--sky-ink); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; padding: .3rem .7rem; border-radius: var(--radius-sm); }
.answer-box { background: var(--offwhite); border-left: 4px solid var(--sky); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.2rem 1.4rem; margin: 1.2rem 0 1.6rem; font-size: 1.05rem; color: var(--ink); }
.data-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .94rem; }
.data-table th, .data-table td { border: 1px solid var(--line); padding: .8rem 1rem; text-align: left; }
.data-table th { background: var(--navy); color: #fff; font-family: var(--font-body); font-weight: 600; }
.data-table tr:nth-child(even) td { background: #faf8f4; }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.5rem 0; }
@media (max-width: 560px) { .proscons { grid-template-columns: 1fr; } }
.proscons > div { border-radius: var(--radius); padding: 1.3rem; border: 1px solid var(--line); }
.proscons .pros { background: rgba(46,125,80,.06); }
.proscons .cons { background: rgba(160,60,60,.05); }
.proscons h4 { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin-bottom: .6rem; }

/* Blog index cards */
.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post-card img { aspect-ratio: 16/10; object-fit: cover; }
.post-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-card h3 { font-size: 1.25rem; margin: 0; }
.post-card p { color: var(--muted); font-size: .92rem; margin: 0; flex: 1; }
.post-card__meta { font-size: .8rem; color: var(--muted); display: flex; gap: .8rem; margin-top: .4rem; }

/* Brand card phone line (catalog page) */
.brand-card__phone { margin: 0; font-size: .88rem; color: var(--muted); }
.brand-card__phone a { color: var(--sky-ink); font-weight: 600; }
.brand-card__phone a:hover { color: var(--navy); }

/* Category filter bar (products-and-brands) */
.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.filterbar__chip {
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--paper); color: var(--sky-ink); border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s;
}
.filterbar__chip:hover { border-color: var(--sky); color: var(--navy); }
.filterbar__chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Chip card — uniform category tiles (catalog / retail) */
.chip-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; text-align: center;
  font-weight: 600; color: var(--navy); box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.chip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sky); }

/* Location card (locations page) */
.loc-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; display: flex; flex-direction: column; gap: .45rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.loc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sky); }
.loc-card__flag { font-size: 2rem; line-height: 1; margin-bottom: .3rem; }
.loc-card h3 { margin: .2rem 0 0; font-size: 1.3rem; }
.loc-card__type { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sky-ink); font-weight: 600; }
.loc-card__addr { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }
.loc-card__addr b { color: var(--ink); font-weight: 600; }
.loc-card__phone { margin: .5rem 0 0; font-weight: 600; }
.loc-card__phone a { color: var(--sky-ink); }
.loc-card__phone a:hover { color: var(--navy); }
.loc-card.is-hidden { display: none; }

/* Contact split */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-detail { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.contact-detail .card__icon { margin: 0; flex: none; }
.contact-detail b { display: block; color: var(--navy); }
.contact-detail span { color: var(--muted); font-size: .95rem; }
.map-embed {
  background: repeating-linear-gradient(45deg, #eef1f6, #eef1f6 12px, #e7ebf2 12px, #e7ebf2 24px);
  border: 1px solid var(--line); border-radius: var(--radius); min-height: 300px;
  display: grid; place-items: center; text-align: center; color: var(--muted); padding: 2rem;
}

/* Timeline */
.timeline { position: relative; max-width: 760px; margin-inline: auto; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 2px; background: var(--line); }
.timeline li { position: relative; list-style: none; padding: 0 0 1.8rem 1.6rem; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: .35rem; width: 14px; height: 14px; border-radius: 50%; background: var(--sky); border: 3px solid var(--offwhite); }
.timeline .year { font-family: var(--font-display); color: var(--navy); font-weight: 600; font-size: 1.1rem; }
.timeline p { color: var(--muted); margin: .2rem 0 0; }

/* ==========================================================================
   Minimalist homepage components (index.html)
   Kept separate from the card-based components above, which other pages
   still use. All patterns here are plain two-column rows/grids — no
   absolute positioning or masonry — so they map directly onto Elementor
   Sections/Columns or a Loop Grid widget.
   ========================================================================== */

/* Hero slider: full-bleed rounded image stage, copy card bottom-left, brand thumbs bottom-right */
.hero-slider { padding: 0; }
.hero-slider__stage {
  position: relative; overflow: hidden;
  min-height: 80vh; background: var(--navy);
  isolation: isolate;
}
.hero-slider__slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity .7s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1); transition: transform 7s ease-out;
}
.hero-slide.is-active .hero-slide__img { transform: scale(1.12); }
.hero-slider__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,15,35,.05) 0%, rgba(8,15,35,.1) 55%, rgba(8,15,35,.55) 100%);
}

/* Container-aligned layer for copy + thumbnails */
.hero-slider__inner {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  width: min(var(--maxw), 100%); margin-inline: auto;
}
.hero-slider__inner > * { pointer-events: auto; }

/* Copy card */
.hero-slider__copy {
  position: absolute; left: 24px; bottom: clamp(1.4rem, 2.5vw, 2.2rem); z-index: 2;
  width: min(46%, 520px);
  color: #fff;
}
.hero-slider__text { font-size: clamp(.95rem, 1.2vw, 1.06rem); line-height: 1.5; color: #fff; margin: 0 0 1.4rem; max-width: 42ch; text-shadow: 0 1px 12px rgba(8,15,35,.7); }
.hero-slider__controls { display: flex; align-items: center; gap: 1.2rem; }
.hero-slider__progress { flex: 1; height: 2px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; }
.hero-slider__progress > span { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.hero-slider__arrows { display: flex; gap: .6rem; }
.hero-slider__arrow {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff;
  font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease;
}
.hero-slider__arrow:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.hero-slider__arrow:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* Brand thumbnails / selectors */
.hero-slider__thumbs {
  position: absolute; right: 24px; bottom: clamp(1rem, 2vw, 1.6rem); z-index: 2;
  display: flex; gap: .8rem;
}
.hero-thumb {
  position: relative; width: clamp(130px, 12vw, 168px); height: clamp(84px, 9vw, 104px);
  border: 0; padding: 0; cursor: pointer; border-radius: 14px; overflow: hidden;
  background: var(--navy); color: #fff; text-align: left;
  box-shadow: 0 6px 20px rgba(8,15,35,.35);
  opacity: .72; transform: translateY(0); transition: opacity .25s ease, box-shadow .25s ease, outline-color .25s ease;
  outline: 2px solid transparent; outline-offset: 0;
}
.hero-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,15,35,0) 30%, rgba(8,15,35,.8) 100%); }
.hero-thumb__meta { position: absolute; left: .7rem; bottom: .55rem; z-index: 1; display: flex; flex-direction: column; line-height: 1.2; }
.hero-thumb__meta b { font-family: var(--font-display); font-size: .9rem; }
.hero-thumb__meta small { font-size: .72rem; color: #cdd6ea; }
.hero-thumb:hover { opacity: 1; }
.hero-thumb.is-active { opacity: 1; outline-color: #fff; box-shadow: 0 8px 26px rgba(8,15,35,.5); }
.hero-thumb:focus-visible { outline-color: var(--sky); }

@media (max-width: 900px) {
  .hero-slider__copy { width: min(60%, 460px); }
  .hero-slider__thumbs .hero-thumb:nth-child(n+3) { display: none; }
}
@media (max-width: 640px) {
  .hero-slider__stage { min-height: 80vh; }
  .hero-slider__copy { width: calc(100% - 48px); bottom: 6rem; }
  .hero-slider__thumbs { right: 16px; left: 16px; justify-content: center; overflow-x: auto; }
  .hero-thumb { width: 108px; height: 66px; }
  .hero-slider__thumbs .hero-thumb:nth-child(n+3) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide__img, .hero-slide.is-active .hero-slide__img { transform: none; transition: none; }
  .hero-slider__progress > span { transition: none; }
}

/* ---- Divisions / services ---- */
.services { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--bg); }
.shell { width: min(var(--maxw), 100% - 2 * clamp(1rem, 5vw, 2.5rem)); margin-inline: auto; }
.services__head {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap);
  align-items: end; margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.services__head .h2 { margin: .4rem 0 0; }
.services__aside p { color: var(--muted); margin: 0 0 1.2rem; }

.btn--dark {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--navy); color: #fff; padding: .8rem 1.4rem; border-radius: 999px;
  font-weight: 600; font-size: .92rem; transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn--dark:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn__ico { font-size: 1.05em; line-height: 1; }

.srv {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--gap);
  align-items: center; padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--line);
}
.services .srv:last-child { border-bottom: 1px solid var(--line); }
.srv__num { font-family: var(--font-display); font-weight: 700; color: var(--sky-ink); font-size: .85rem; letter-spacing: .08em; }
.srv__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--navy); margin: .5rem 0 1.6rem; line-height: 1.1; }
.srv__foot { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.srv__foot p { color: var(--muted); margin: 0; }
.rnd {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.15rem;
  border: 1px solid var(--navy); color: var(--navy);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.rnd:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

.srv__media { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; perspective: 1200px; }
.flip { height: clamp(260px, 34vw, 420px); cursor: pointer; }
.flip__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .7s var(--ease);
}
.flip:hover .flip__inner { transform: rotateY(180deg); }
.srv__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius); display: block; box-shadow: var(--shadow-sm);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.srv__img--back { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .flip__inner, .flip:hover .flip__inner { transition: none; transform: none; }
}
@media (max-width: 900px) {
  .services__head { grid-template-columns: 1fr; align-items: start; }
  .srv { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .srv__media { grid-template-columns: 1fr; }
  .srv__img { height: clamp(220px, 60vw, 320px); }
}

/* Plain stat pairs — numbers only, no card background */
/* ==========================================================================
   About / Welcome
   ========================================================================== */
.about__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about__photo { width: 100%; aspect-ratio: 3/3.4; object-fit: cover; border-radius: 14px; }
.about__stats { display: flex; gap: clamp(2rem, 6vw, 4rem); margin-top: 1.8rem; }
.about__stat { display: flex; flex-direction: column; gap: .35rem; }
.about__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--ink); line-height: 1; }
.about__num sup { color: var(--sky-ink); font-size: .55em; top: -.55em; }
.about__label { font-size: .84rem; color: var(--muted); }

.about__heading { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; font-weight: 800; color: var(--ink); margin: 0 0 1rem; letter-spacing: -.01em; }
.about__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.28; font-weight: 800; color: var(--ink); margin: 0; }
.about__title-sub { color: var(--muted); font-weight: 700; }

.about__feature { position: relative; isolation: isolate; overflow: hidden; border-radius: 14px; display: flex; margin-top: clamp(2rem, 5vw, 3.5rem); aspect-ratio: 16/7; }
.about__feature-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.about__feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(8,12,26,.55), rgba(8,12,26,.15)); }
.about__feature-body { align-self: flex-end; padding: clamp(1.2rem, 3vw, 2rem); }
.about__more { justify-self: start; }

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
}

/* Split rows — index + copy + logo strip, paired with two photos */
.split-list { display: flex; flex-direction: column; }
.split-row {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--gap);
  padding: 2.6rem 0; border-top: 1px solid var(--line); align-items: center;
}
.split-list > .split-row:last-child { border-bottom: 1px solid var(--line); }
.split-row__index { font-family: var(--font-display); font-weight: 700; color: var(--sky-ink); font-size: .9rem; letter-spacing: .08em; }
.split-row__text h3 { margin: .5rem 0 .4rem; }
.split-row__text p { color: var(--muted); margin: 0; }
.split-row__media { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.split-row__media img, .split-row__media .photo-ph { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius); }
.split-row__media > :nth-child(2) { margin-top: 1.6rem; }
.logo-inline { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: 1.1rem; }
.logo-inline img { height: 26px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
.logo-inline img:hover { filter: none; opacity: 1; }
@media (max-width: 820px) {
  .split-row { grid-template-columns: 1fr; padding: 2rem 0; }
  .split-row__media { order: -1; }
  .split-row__media > :nth-child(2) { margin-top: 0; }
}

/* Photography placeholder tile — for slots awaiting real/AI-generated photos */
.photo-ph {
  background: linear-gradient(135deg, rgba(32, 40, 116, .92), rgba(0, 179, 240, .5));
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 26px),
    linear-gradient(135deg, rgba(32, 40, 116, .92), rgba(0, 179, 240, .5));
  border-radius: var(--radius); display: flex; align-items: flex-end; padding: 1rem;
}
.photo-ph span { color: #fff; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; opacity: .9; }

/* Sector gallery — photo + caption below, no overlay text or card border */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.gallery-tile { margin: 0; }
.gallery-tile img, .gallery-tile .photo-ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.gallery-tile figcaption { margin-top: .9rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.gallery-tile figcaption span { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.05rem; white-space: nowrap; }
.gallery-tile figcaption p { margin: 0; color: var(--muted); font-size: .88rem; }
@media (max-width: 680px) { .gallery-grid { grid-template-columns: 1fr; } }

/* Plain numbered steps — replaces icon-in-circle chain for a lighter look */
.steps-plain { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.step-plain { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 1.4rem; }
.step-plain__ico { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border-radius: 10px; background: rgba(0,179,240,.12); color: var(--sky); }
.step-plain__ico svg { width: 1.4rem; height: 1.4rem; }
.step-plain__num { font-family: var(--font-display); font-weight: 700; color: var(--sky); font-size: 1.1rem; }
.step-plain h3 { color: #fff; margin: .6rem 0 .4rem; }
.step-plain p { color: #b9c4d6; font-size: .92rem; margin: 0; }
@media (max-width: 760px) { .steps-plain { grid-template-columns: 1fr; } }

/* Text link with arrow — minimal secondary action, no pill chrome */
.link-arrow { font-weight: 600; font-size: .95rem; color: var(--sky-ink); display: inline-flex; gap: .35rem; align-items: center; }
.link-arrow::after { content: "→"; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .chain__line::after { width: 100% !important; }
  .wa-float { animation: none !important; }
}

/* ==========================================================================
   Floating WhatsApp button (shared across all pages)
   ========================================================================== */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 999;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  animation: wa-pulse 2.4s ease-in-out infinite;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.34); }
.wa-float svg { width: 32px; height: 32px; display: block; }
@keyframes wa-pulse {
  0% { box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.55); }
  70% { box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 560px) { .wa-float { right: 16px; bottom: 16px; } }