/* ===== Concept A — Teal Industrial (granitol-led) ===== */
:root {
  --primary: #028476; --primary-hover: #026E63; --deep: #05564C; --accent: #FCB829; --accent-2: #028476;
  --surface-alt: #F2F6F5; --line: #D9DFDD; --muted: #5B6B68;
  --radius: 0; --radius-lg: 0; --radius-pill: 0;
  --shadow: 0 1px 2px rgba(5,86,76,.06), 0 12px 32px rgba(5,86,76,.10); --shadow-lg: 0 24px 56px rgba(3,40,36,.22);
  --head-transform: uppercase; --head-spacing: -.015em; --header-h: 100px; --surface-tint: #EAF4F1;
  --grid: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
}
::selection { background: var(--accent); color: var(--deep); }
.eyebrow { font-weight: 700; letter-spacing: .16em; color: var(--deep); }
.eyebrow::before { width: 32px; }
.section-head .h2::after, .eyebrow + :is(h2, .h2)::after { content: ''; display: block; width: 56px; height: 4px; background: var(--accent); margin-top: 20px; }
.checks .ic { color: var(--primary); }
img { border-radius: 0; }

/* buttons, badges, chips: square, firm */
.btn { font-weight: 700; letter-spacing: .06em; border-radius: var(--radius); }
.btn:active { transform: translateY(1px); }
.btn--sm { background: #fff; letter-spacing: .04em; }
.badge { border-radius: 2px; letter-spacing: .08em; color: var(--deep); }
.badge--eco { color: #fff; background: var(--deep); }
.chips li, .chips--nav a, .chips--select li { border-radius: 2px; }
.markets li { padding: 4px 14px; border: 0; border-left: 3px solid var(--accent); background: none; color: var(--deep); }
@media (max-width: 600px) { .markets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .markets li { padding-inline: 10px; font-size: 1rem; } }
.pager a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; white-space: nowrap; border-radius: 0; }
.pager a:hover { border-color: var(--primary); color: var(--primary); }
.toolbar select { border-radius: var(--radius); }

/* header: always white, colour logo set large, deep-teal navigation */
.site-header { box-shadow: 0 1px 0 var(--line); }
.brand__logo { height: 62px; }
.nav li > a { border-radius: 0; }
.nav li.is-active > a { box-shadow: inset 0 -2px 0 currentColor; }
.has-sub .sub { align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.sub a { border-radius: 0; }
.sub a:hover { color: var(--deep); }
@media (min-width: 1200px) { .nav li > a { color: var(--deep); } .nav li.is-active > a, .nav li > a:hover { color: var(--primary); } }
@media (min-width: 1366px) { .nav li > a { padding-inline: 10px; } }
@media (min-width: 1200px) and (max-width: 1365px) { .brand__logo { height: 52px; } }
@media (min-width: 1200px) and (max-width: 1279px) { .header-cta .ic { display: none; } .site-header__in { gap: 12px; } }
@media (max-width: 1199px) {
  :root { --header-h: 74px; }
  .brand__logo { height: 42px; }
  .nav-open .topbar { display: none; }
  .nav-open .brand, .nav-open .header-actions { position: relative; z-index: 51; }
  .nav li > a { color: var(--deep); }
  .nav li.is-active > a, .nav li > a:hover { color: var(--primary); box-shadow: none; }
  .sub__num, .sub__all a { color: var(--primary); }
}

/* home hero: amber highlight and call to action on the glass panel */
.hero .eyebrow { font-size: .72rem; letter-spacing: .08em; }
.hero .eyebrow::before { background: var(--accent); }
.hero h1 { font-size: clamp(2.1rem, 3.4vw, 3.1rem); letter-spacing: -.02em; }
.hero .lead { max-width: 62ch; }
.hero .btn--primary { background: var(--accent); color: var(--deep); }
.hero .btn--primary:hover { background: #fff; color: var(--deep); }
@media (min-width: 1366px) { .hero .eyebrow { font-size: .8rem; letter-spacing: .06em; } }
/* short laptop screens: keep the figures band clear of the bottom edge */
@media (min-width: 1100px) and (max-height: 860px) {
  .hero__in { padding-block: 28px; }
  .hero h1 { font-size: clamp(2rem, 3vw, 2.7rem); }
  .hero .lead { line-height: 1.5; }
  .hero .actions, .hero__dots { margin-top: 18px; }
  .figure { padding-block: 20px; }
}

/* series cards (category, related) */
.series-card { border-radius: 0; transition: border-color .25s, box-shadow .25s; }
.series-card:hover { transform: none; box-shadow: var(--shadow); border-color: var(--primary); }
.series-card h2, .series-card h3 { text-wrap: wrap; }
.series-card__media { border-bottom: 1px solid var(--line); overflow: hidden; }
.series-card__media img { transition: transform .4s; }
.series-card:hover .series-card__media img { transform: scale(1.05); }

/* square corners everywhere; news cards */
.promise article, .values li, .line, .leader, .faq details, .map, .news-lead, .form, .filter--help, .spec__side, .article__box, .prod-card, .sku-table-wrap, .gallery__main, .thumb, .contact__markets li { border-radius: 0; }
.news-card { border-radius: 0; border-left-width: 6px; transition: box-shadow .25s; }
.news-card:hover { box-shadow: var(--shadow); }
.news-lead { align-items: stretch; }
.news-lead__media { display: block; }
.news-lead__media img { height: 100%; aspect-ratio: auto; }
.split__media img, .article__hero img, .news-lead__media img { border-radius: 0; }

/* footer: opened by an amber rule */
.site-footer { border-top: 4px solid var(--accent); }

/* inner page head: deep-teal band with the same engineering grid as the hero */
.page-head { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(100deg, var(--deep) 0 50%, #06655A 100%); color: #fff; padding: clamp(44px, 6vw, 76px) 0 clamp(40px, 5vw, 64px); }
.page-head::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grid); background-size: 72px 72px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
.page-head h1::after { content: ''; display: block; width: 64px; height: 4px; background: var(--accent); margin-top: 22px; }
.page-head .lead, .page-head h1 small, .page-head .article__meta, .page-head .crumbs ol { color: rgba(255,255,255,.8); }
.page-head .news-card__tag { color: rgba(255,255,255,.75); }
.page-head .crumbs a:hover { color: var(--accent); }
.page-head .chips--nav a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.page-head .chips--nav a span { color: rgba(255,255,255,.7); }
.page-head .chips--nav a:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; }
.page-head .chips--nav a.is-active, .page-head .chips--nav a.is-active:hover { background: #fff; border-color: #fff; color: var(--deep); }
.page-head .chips--nav a.is-active span { color: var(--primary); }
.page-head:has(+ .capacity-hero) { padding-bottom: calc(clamp(40px, 5vw, 64px) + 48px); }
.capacity-hero { position: relative; z-index: 1; margin-top: -64px; }
.capacity-hero .wrap { overflow: hidden; box-shadow: var(--shadow-lg); }
.capacity-hero img { border-radius: 0; margin: 0; box-shadow: none; }

/* photo frames */
.article__hero, .split--rev .split__media { overflow: hidden; }
.split--rev .split__media { box-shadow: var(--shadow-lg); }
.split--rev .split__media img { box-shadow: none; }

/* products, category, product detail */
.prod-card { transition: border-color .25s, box-shadow .25s; }
.prod-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.prod-card__num { justify-self: start; background: var(--primary); color: #fff; padding: 7px 9px; font: 800 .8rem/1 var(--font-head); letter-spacing: .12em; }
.prod-card__media { background: var(--tint, var(--surface-alt)); }
.sublist a::before { width: 10px; height: 2px; border-radius: 0; }
.filter--help, .spec__side, .article__box, .leader, .form { border-top: 4px solid var(--primary); }
.product__summary .badge { justify-self: start; }
.sku-table-wrap { position: relative; }
.gallery__main, .thumb { overflow: hidden; }
.gallery__main { border: 1px solid var(--line); }
.thumb:hover { border-color: var(--primary); }
.spec-table th { color: var(--deep); }

/* quality, about, contact */
.qc__num { border-radius: 0; }
.env li { border-left-color: var(--primary); }
.timeline__year { color: var(--deep); }
.timeline li::before { width: 12px; height: 12px; top: 41px; border-radius: 0; background: var(--primary); border: 2px solid #fff; }
.values li, .line { transition: border-color .25s; }
.values li:hover, .line:hover { border-color: var(--primary); }
.info-list strong { text-transform: uppercase; font-size: .85rem; letter-spacing: .08em; color: var(--deep); }

/* home: products, production, bio */
.fam-row__name, .fam-tile__name { letter-spacing: .005em; }
.stage h3, .bio__points h3, .flow__step h3, .reason h3 { text-transform: uppercase; letter-spacing: .02em; }
.stage { transition: border-color .25s, box-shadow .25s; }
.stage:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.production .section-head, .partners .section-head { max-width: 760px; }

@media (prefers-reduced-motion: reduce) { .series-card__media img, .btn .ic, .fam-row__media img, .fam-tile__media img, .fam-row__link .ic, .fam-tile__name .ic, .map--photo img, .map__cta .ic { transition: none; } }