/* JALON — shared shell: tokens, base, header, bands, footer.
   Extracted from the homepage so every page stays identical. */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --rev: 640ms;
  --gold: #EEB30D;
  --gold-deep: #DB8842;
  --gold-grad: linear-gradient(90deg, #EEB30D 0%, #DB8842 100%);
  --ink: #000000;
  --ink-soft: #1E1E1E;
  --body: #656768;
  --muted: #5D5D5D;
  --page: #FFFFFF;   /* every inner frame in the .fig is white */
  --surface: #FFFFFF;
  --grey-panel: #656768;
  --hairline: #F3EFE9;

  --container: 1280px;
  --gutter: 80px;

  --fs-display: 72px;
  --fs-h2: 46px;
  --fs-h3: 24px;
  --fs-lead: 24px;
  --fs-body: 16px;
  --fs-small: 14px;

  --sp-8: 8px;  --sp-16: 16px; --sp-24: 24px; --sp-32: 32px;
  --sp-48: 48px; --sp-64: 64px; --sp-96: 96px;

  --radius-card: 15px;
  --radius-lg: 65px;
  --radius-pill: 100px;
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --shadow-card: 0 10px 30px rgba(0,0,0,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The header is fixed, so anchor targets need to clear it */
html { scroll-padding-top: 128px; scroll-behavior: smooth; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: "DM Sans", "Noto Sans Thai", sans-serif;
  font-size: var(--fs-body);
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-deep); }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
:lang(th) { line-height: 1.5; }

/* --container is the .fig's CONTENT width (1280: bands start at x=80 in the
   1440 frame), so the gutter sits outside it rather than eating into it. */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--sp-24)); margin: 0 auto; padding: 0 var(--sp-24); }
.section { padding: var(--sp-96) 0; }
.section-title { font-size: var(--fs-h2); font-weight: 900; line-height: 1.1; letter-spacing: -.5px; }
.section-title--bold { font-weight: 700; }
.section-intro { color: var(--muted); max-width: 848px; }
.text-center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-16);
  padding: 14px 10px 14px 24px; border: 0; border-radius: var(--radius-pill);
  font: inherit; font-weight: 700; font-size: var(--fs-body);
  text-transform: uppercase; letter-spacing: .3px; cursor: pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms ease, filter 180ms ease;
}
.btn__chevron {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 29px; height: 29px; border-radius: 50%;
}
.btn__chevron svg { width: 7px; height: 11px; }
.btn__chevron img { width: 18px; height: 18px; object-fit: contain; }
.btn:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.05); }
.btn:active { transform: translateY(0) scale(.99); filter: none; }
/* The chevron is the brand's motif — it leads on hover */
.btn__chevron { transition: transform 220ms var(--ease); }
.btn:hover .btn__chevron { transform: translateX(3px); }
.btn--primary { background: var(--gold-grad); color: #FFFFFF; box-shadow: 0 0 10px rgba(238,179,13,.55); }
.btn--primary .btn__chevron { background: #FFFFFF; color: var(--gold); }
.btn--primary:hover { box-shadow: 0 10px 24px rgba(238,179,13,.45); color: #FFFFFF; }
.btn--light { background: #FFFFFF; color: var(--ink); }
.btn--light .btn__chevron { background: var(--gold); color: #FFFFFF; }
.btn--light:hover { box-shadow: 0 10px 24px rgba(0,0,0,.18); color: var(--ink); }
.btn--outline { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.btn--outline .btn__chevron { background: var(--gold); color: #FFFFFF; }
.btn--outline:hover { color: var(--gold-deep); }
.btn--outline-light { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }
.btn--outline-light .btn__chevron { background: #FFFFFF; color: var(--grey-panel); }
.btn--outline-light:hover { color: #FFFFFF; }

/* Keyboard focus: one ring for every interactive element */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}
.site-footer :where(a, button):focus-visible,
.contact-band :where(a, button):focus-visible,
.application-card :where(a):focus-visible { outline-color: #FFFFFF; }

/* Tick list */
.tick-list { display: grid; gap: 12px; }
.tick-list li { display: grid; grid-template-columns: 23px 1fr; gap: var(--sp-16); align-items: start; }
.tick-list__mark { width: 23px; height: 23px; margin-top: 2px; }
/* Both lists share one mark size (23px) — the .fig used 16px here, which
   made the same component read at two sizes on one page. */
.tick-list--sm li { grid-template-columns: 23px 1fr; }
.tick-list--sm .tick-list__mark { width: 23px; height: 23px; margin-top: 2px; }
.tick-list b { font-weight: 700; }

/* 3. Header ------------------------------------------------------------- */
.site-header {
  position: fixed; top: 30px; left: 0; right: 0; z-index: 40;
  transition: top 220ms var(--ease);
}
/* Tightens against the viewport edge once the hero is behind it */
.site-header.is-stuck { top: 12px; }
.site-header.is-stuck .site-header__bar { box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.site-header__bar {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-32);
  max-width: 1376px; margin: 0 auto; padding: 22px var(--sp-32);
  background: #FFFFFF; border-radius: var(--radius-pill); box-shadow: var(--shadow-card);
}
/* Logo sprites — exact Figma crops (the source PNGs are 1800×1012 sheets) */
.logo-mark { display: block; background-repeat: no-repeat; flex: 0 0 auto; }
.logo-mark--header {
  width: 157px; height: 42px;
  background-image: url(./figma/assets/a3930e7c4dcd6f31.png);
  background-position: 45.457% 39.203%; background-size: 210.377% 439.914%;
}
.logo-mark--company {
  width: 357px; height: 107px;
  background-image: url(./figma/assets/a3930e7c4dcd6f31.png);
  background-position: 45.378% 41.081%; background-size: 262.824% 493.362%;
}
.logo-mark--footer {
  width: 308px; height: 94px;
  background-image: url(./figma/assets/35657e4194e39b75.png);
  background-position: 45.474% 41.064%; background-size: 261.515% 484.350%;
}
.site-header__logo { display: block; }
.primary-nav > ul { display: flex; align-items: center; gap: var(--sp-24); }
.primary-nav a { color: var(--ink-soft); font-size: var(--fs-body); white-space: nowrap; transition: color 160ms ease; }
.primary-nav a:hover { color: var(--gold); }
.primary-nav a::after {
  content: ""; display: block; height: 2px; margin-top: 3px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease);
}
.primary-nav a:hover::after, .primary-nav a.is-current::after { transform: scaleX(1); }
.primary-nav a.is-current { color: var(--gold); }
.site-header__aside { display: flex; align-items: center; gap: var(--sp-24); margin-left: auto; }
/* The header CTA must never wrap to two lines — it sets the bar's height. */
.site-header__aside .btn--primary { flex: none; white-space: nowrap; }
.site-header__aside .btn--primary span:not(.btn__chevron) { white-space: nowrap; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ink-soft);
}
.lang-switch svg { width: 9px; height: 6px; }
.nav-toggle { display: none; }
.nav-cta { display: none; }

/* 11a. Article card ------------------------------------------------------
   One card per WordPress post. Used by the homepage's Knowledge Hub strip and
   by the Knowledge Hub archive — same content type, same card. */
.article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-32); }
.article-card {
  background: var(--surface); border-radius: var(--radius-card) var(--radius-card) var(--radius-lg) var(--radius-card);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: box-shadow 260ms ease, transform 260ms var(--ease);
}
.article-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.16); }
/* display:block matters — the archive uses a <span> here, and height is
   ignored on an inline box. */
.article-card__media { display: block; height: 260px; background-position: center; background-size: cover; background-repeat: no-repeat; }
.article-card__body { padding: var(--sp-24); }
.article-card__meta { font-size: var(--fs-small); color: var(--muted); }
.article-card__title { font-size: 20px; font-weight: 700; margin: var(--sp-8) 0; color: var(--ink); }
.article-card__excerpt { color: var(--body); margin-bottom: var(--sp-16); }
.article-card__more { font-weight: 700; }
@media (max-width: 768px) { .article-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .article-card__media { height: 200px; } }

/* 11b. Sidebar furniture -------------------------------------------------
   The cream section nav and the outlined "Get in touch" card. Shared by the
   application detail template and the knowledge hub; page sheets set only
   the column width. */
.sidebar-nav { padding: 30px 28px 34px; border-radius: var(--radius-card); background: #FEF8E7; }
.sidebar-nav__heading { font-size: 20px; font-weight: 700; }
.sidebar-nav ul { margin-top: var(--sp-24); }
.sidebar-nav li + li { border-top: 1px solid rgba(238,179,13,.55); }
.sidebar-nav a {
  display: block; padding: 15px 0;
  font-size: var(--fs-body); line-height: 22px; color: var(--ink-soft);
  transition: color 160ms ease;
}
.sidebar-nav li:first-child a { padding-top: 0; }
.sidebar-nav a:hover { color: var(--gold); }
.sidebar-nav [aria-current="page"] { color: var(--gold); font-weight: 500; text-decoration: underline; }

.sidebar-contact {
  margin-top: var(--sp-24); padding: 28px;
  border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--gold);
}
.sidebar-contact__heading { font-size: 20px; font-weight: 700; }
.sidebar-contact__intro { margin-top: 10px; color: var(--body); line-height: 22px; }
.sidebar-contact dl { margin-top: var(--sp-24); display: grid; gap: 14px; }
.sidebar-contact__line { display: grid; grid-template-columns: 45px 1fr; gap: 14px; align-items: center; }
.sidebar-contact__icon {
  display: grid; place-items: center; width: 45px; height: 45px;
  border-radius: 50%; background: var(--gold); color: #FFFFFF;
}
.sidebar-contact__icon svg { width: 19px; height: 19px; }
.sidebar-contact__icon--whatsapp { background: #25D366; }
.sidebar-contact__line dt { font-weight: 700; line-height: 20px; }
.sidebar-contact__line dd { margin: 0; line-height: 20px; color: var(--ink-soft); }
.sidebar-contact__line dd a { color: var(--ink-soft); }
.sidebar-contact__line dd a:hover { color: var(--gold); }
.sidebar-contact .btn { margin-top: var(--sp-24); width: 100%; justify-content: space-between; height: 65px; }
/* The .fig sets the icon straight on the gradient — no white disc */
.sidebar-contact .btn .btn__chevron { width: 33px; height: 33px; background: none; }
.sidebar-contact .btn .btn__chevron img { width: 26px; height: 26px; }


/* Below the sidebar breakpoint the nav reads better as two short columns */
@media (max-width: 1024px) {
  .sidebar-nav ul { columns: 2; column-gap: var(--sp-32); }
  .sidebar-nav li + li { border-top: 0; }
  .sidebar-nav a { padding: 9px 0; }
}
@media (max-width: 768px) { .sidebar-nav ul { columns: 1; } }

/* 12. Contact band ------------------------------------------------------- */
/* No min-height: the band is sized by its content, so the bottom-aligned
   portrait lands flush on the section's bottom edge. */
/* 305px is the .fig's band height, and it is the DESKTOP floor only — it used
   to be an inline min-height on the section, which no breakpoint could undo.
   Below 1024 the portrait and photo are hidden, so the band sizes to content. */
.contact-band { position: relative; min-height: 305px; background: var(--gold-grad); color: #FFFFFF; overflow: hidden; }
.contact-band__inner {
  position: relative; min-height: 326px;
  display: grid; grid-template-columns: 204px 1fr; align-items: end; gap: var(--sp-32);
  padding-right: 540px; /* clears the full-bleed media */
}
/* Exact .fig crop of the 2000×2000 sprite — an <img> would squash it */
.contact-band__portrait {
  align-self: end; display: block; width: 204px; height: 326px;
  background: url(./figma/assets/4d156f450c64fc7c.png) 48.524% 100% / 171.844% 107.778% no-repeat;
}
.contact-band__content { padding: var(--sp-48) 0; }
.contact-band__title { font-size: var(--fs-h2); font-weight: 900; line-height: 51px; max-width: 553px; }
.social-row { display: flex; gap: 12px; margin-top: var(--sp-32); }
.social-row a {
  display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px #FFFFFF; color: #FFFFFF;
  transition: transform 160ms var(--ease), background 160ms ease;
}
.social-row a:hover { transform: translateY(-3px); background: rgba(255,255,255,.22); color: #FFFFFF; }
.social-row img, .social-row svg { width: 21px; height: 21px; }
/* Pinned to the section edge with the .fig's chevron notch (88.3/485.7 = 18.2%) */
.contact-band__media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 486px;
  background: url(./figma/assets/cta-products.jpg) center / cover no-repeat;
  clip-path: polygon(18.2% 0, 100% 0, 100% 100%, 18.2% 100%, 0 50%);
}

/* 13. Enquiry strip ------------------------------------------------------ */
.enquiry { background: var(--grey-panel); color: #FFFFFF; padding: var(--sp-32) 0; }
.enquiry__inner { display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap; }
.enquiry__text { display: flex; align-items: center; gap: var(--sp-16); font-size: 20px; font-weight: 700; }
.enquiry__text img { width: 34px; height: 34px; object-fit: contain; }
.enquiry__actions { display: flex; gap: var(--sp-16); margin-left: auto; }

/* 14. Footer ------------------------------------------------------------- */
.site-footer { background: var(--grey-panel); color: #FFFFFF; padding-top: var(--sp-48); }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr 1.4fr .8fr 1fr; gap: var(--sp-48); padding-bottom: var(--sp-48); }
.site-footer__logo { width: 308px; margin-bottom: var(--sp-24); }
.site-footer__tagline { font-size: 36px; font-weight: 600; text-transform: uppercase; line-height: 35px; }
.site-footer__thumbs { display: flex; gap: 12px; margin-top: var(--sp-24); }
.site-footer__thumbs img { width: 129px; height: 105px; object-fit: cover; border-radius: 10px; }
.footer-heading { font-size: var(--fs-h3); font-weight: 700; margin-bottom: var(--sp-8); }
.footer-rule { width: 56px; height: 3px; background: var(--gold); margin-bottom: var(--sp-24); }
.contact-line { display: grid; grid-template-columns: 51px 1fr; gap: var(--sp-16); align-items: center; margin-bottom: var(--sp-24); }
.contact-line__icon { display: grid; place-items: center; width: 51px; height: 51px; border-radius: 50%; background: rgba(255,255,255,.2); }
.contact-line__icon svg { width: 20px; height: 20px; }
.contact-line dt { font-weight: 700; }
.contact-line dd { margin: 0; }
.site-footer nav li + li { margin-top: var(--sp-16); }
.site-footer nav a { color: #FFFFFF; transition: color 160ms ease; }
.site-footer nav a:hover { color: var(--gold); }
.site-footer__legal {
  display: flex; justify-content: space-between; gap: var(--sp-24); flex-wrap: wrap;
  padding: var(--sp-16) 0; border-top: 1px solid rgba(255,255,255,.35); font-size: var(--fs-small);
}
.site-footer__legal a { color: #FFFFFF; }

/* Floating contact rail */
.floating-contact { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 12px; }
.floating-contact a, .floating-contact button {
  display: grid; place-items: center; width: 35px; height: 35px; padding: 0; border: 0;
  border-radius: var(--radius-pill); box-shadow: 0 4px 10px rgba(0,0,0,.25); cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms ease;
}
.floating-contact a:hover, .floating-contact button:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.floating-contact__line { background: #06C654; }
.floating-contact__whatsapp { background: #25D366; }
.floating-contact__phone, .floating-contact__email { background: linear-gradient(180deg, #EEB30D 0%, #DB8842 100%); }
.floating-contact__top { background: var(--gold); }

/* 15. Responsive --------------------------------------------------------- */
@media (max-width: 1280px) {
:root { --fs-display: 56px; --fs-h2: 40px; }
.site-header__bar { gap: var(--sp-16); padding: 18px var(--sp-24); }
.primary-nav > ul { gap: var(--sp-16); }
.primary-nav a { font-size: 15px; }
.site-header__aside { gap: var(--sp-16); }
.site-header__aside .btn--primary { padding: 12px 8px 12px 18px; font-size: 15px; }
.contact-band__inner { grid-template-columns: 160px 1fr 380px; }
}

@media (max-width: 1024px) {
/* Shell components only — homepage section overrides live in jalon-home.css
   (media queries add no specificity and that sheet loads later, so a base
   rule there would beat an override here). */
.site-header.is-stuck { top: 8px; }
.primary-nav.is-open {
  display: block; position: absolute; top: calc(100% + 12px); left: 0; right: 0;
  background: #FFFFFF; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--sp-24);
}
.primary-nav.is-open > ul { flex-direction: column; align-items: stretch; gap: var(--sp-16); }
:root { --fs-display: 44px; --fs-h2: 34px; --sp-96: 64px; }
.site-header { top: 16px; }
html { scroll-padding-top: 104px; }
.site-header__bar { padding: 14px var(--sp-24); }
.primary-nav { display: none; }
.nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer; order: 2;
  }
.nav-toggle span {
    display: block; width: 22px; height: 2px; background: var(--ink-soft);
    transition: transform 240ms var(--ease), opacity 160ms ease;
  }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* The portrait is hidden below this breakpoint, so the 326px floor it needed
   would otherwise leave dead space above the heading — align-items: end pushes
   the content to the bottom of an empty box. */
.contact-band { min-height: 0; }
.contact-band__inner { grid-template-columns: 1fr; padding-right: 0; min-height: 0; align-items: start; }
.contact-band__portrait, .contact-band__media { display: none; }
.contact-band__content { padding: var(--sp-48) 0; }
.site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
:root { --fs-display: 34px; --fs-h2: 28px; --fs-lead: 20px; --sp-96: 48px; --sp-64: 32px; }
.container { padding: 0 var(--sp-24); }
.contact-band__title { line-height: 1.15; }
.enquiry__inner { flex-direction: column; align-items: flex-start; }
.enquiry__actions { margin-left: 0; flex-wrap: wrap; }
.site-footer__grid { grid-template-columns: 1fr; }
.site-footer__logo { width: 220px; }
.site-footer__tagline { font-size: 26px; line-height: 1.15; }
}

@media (max-width: 768px) {

}

@media (max-width: 560px) {
  .logo-mark--header { width: 118px; height: 32px; }
/* Header: label-less CTA so logo + actions + toggle fit one row */
  .site-header__bar { gap: var(--sp-16); padding: 12px var(--sp-16); }
.site-header__aside { gap: var(--sp-8); }
.nav-cta { display: block; margin-top: var(--sp-8); }
.nav-cta .btn { width: 100%; justify-content: center; }
.primary-nav .nav-cta .btn--primary { color: #FFFFFF; }
.site-header__aside .btn--primary { display: none; }
}

@media (max-width: 480px) {
:root { --fs-display: 28px; --fs-h2: 24px; --fs-lead: 18px; }
.btn { padding: 12px 8px 12px 18px; font-size: var(--fs-small); }
.site-footer__thumbs img { width: 100px; height: 82px; }
.floating-contact { right: 12px; bottom: 12px; }
.enquiry__actions .btn { flex: 1 1 100%; justify-content: space-between; }
.social-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}


/* ==========================================================================
   Shared product-page furniture — used by the archive and the single page.
   ========================================================================== */
/* Page banner ------------------------------------------------------------
   One masthead for every inner page: full-bleed photo band with the gold
   hexagon plate riding over the seam. The plate's geometry is the .fig's
   rotated hexagon — points at 51.17% of the height, slanted edges meeting
   the top edge at 14.2% and the bottom at 13.56% of the width. */
.page-banner {
  position: relative; height: 385px; margin-top: 155px; overflow: hidden;
  background: var(--grey-panel);
}
.page-banner__photo {
  position: absolute; top: 0; bottom: 0; width: 52%;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.page-banner__photo--start { left: 0; }
.page-banner__photo--end { right: 0; }
.page-banner__plate {
  position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%);
  width: 668.25px;
  display: grid; place-content: center; text-align: center;
  background: var(--gold);
  clip-path: polygon(14.2% 0, 85.8% 0, 100% 51.17%, 86.44% 100%, 13.56% 100%, 0 51.17%);
}
.page-banner__plate::before {
  content: ""; position: absolute; inset: 0; opacity: .1;
  background: url(./figma/assets/app-hex-texture.jpg) center / cover no-repeat;
}
.page-banner__plate > * { position: relative; }
.page-banner__title { font-size: 46px; font-weight: 700; line-height: 1; color: #FFFFFF; }
.page-banner__title--heavy { font-weight: 900; }
.page-banner__crumbs {
  margin-top: 17px; font-size: var(--fs-body); line-height: 1;
  text-transform: uppercase; color: #FFFFFF;
}
.page-banner__crumbs a { color: rgba(255,255,255,.85); }
.page-banner__crumbs a:hover { color: #FFFFFF; }
.page-banner__crumbs [aria-current] { font-weight: 700; color: #FFFFFF; }

.eyebrow {
  display: inline-block; padding: 15px 25px; border-radius: 10px;
  background: rgba(238,179,13,.1); color: var(--gold);
  font-size: var(--fs-body); text-transform: uppercase; line-height: 1;
}

/* Solution grid — one .solution-card per WooCommerce product.
   Named apart from the homepage .product-card, which is a different card. */
.solution-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 18px; row-gap: var(--sp-64); margin-top: var(--sp-64);
}
.solution-card { display: block; color: inherit; text-align: center; }
.solution-card__media {
  display: block; height: 328px; border-radius: 10px; background: #FFFFFF center / contain no-repeat;
  transition: transform 400ms var(--ease);
}
.solution-card:hover .solution-card__media { transform: scale(1.03); }
.solution-card__cat {
  display: block; margin-top: var(--sp-24); color: var(--gold);
  font-size: var(--fs-body); letter-spacing: -.05em;
}
.solution-card__title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px; font-size: 24px; font-weight: 700; letter-spacing: -.05em; color: var(--ink);
}
.solution-card__chevron {
  display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 23px;
  border-radius: 20px; background: var(--gold); color: #FFFFFF;
  transition: transform 220ms var(--ease);
}
.solution-card__chevron svg { width: 4px; height: 9px; }
.solution-card:hover .solution-card__chevron { transform: translateX(3px); }
.solution-card:hover .solution-card__title { color: var(--gold-deep); }

/* Pagination (woocommerce_pagination) */
.pagination { display: flex; justify-content: center; gap: var(--sp-8); margin-top: var(--sp-64); }
/* Direct children only: the runtime wraps each interpolated value in its own
   span, and a descendant selector would paint that as a second pill. */
.pagination > a, .pagination > span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: var(--radius-pill); font-weight: 700; color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px #DBDBDB; transition: color 160ms ease, box-shadow 160ms ease;
}
.pagination > a:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.pagination > [aria-current="page"] { background: var(--gold-grad); color: #FFFFFF; box-shadow: none; }
.pagination__ends { letter-spacing: .5px; }


@media (max-width: 1024px) {
.page-banner { height: 300px; margin-top: 120px; }
.page-banner__plate { width: 560px; }
.page-banner__title { font-size: 34px; }
.solution-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-48); }
.solution-card__media { height: 260px; }
}
@media (max-width: 768px) {
.page-banner { height: 220px; margin-top: 104px; }
/* Too narrow for the hexagon to read — one photo plus a scrim carries it */
  .page-banner__photo--start { width: 100%; }
.page-banner__photo--end { display: none; }
.page-banner__plate { width: 100%; clip-path: none; background: none; }
.page-banner__plate::before { opacity: 1; background: rgba(30,30,30,.55); }
.page-banner__title { font-size: 28px; }
.eyebrow { padding: 12px 18px; font-size: var(--fs-small); }
.solution-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
.solution-card__title { font-size: 20px; }
}

/* --- Solutions mega-menu ------------------------------------------------- */
/* Elementor: this is the Mega Menu widget's markup contract — .has-mega > a
   is the top-level item (still a real link to the archive), .mega the panel. */
.primary-nav li.has-mega { position: relative; }
.primary-nav .has-mega > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { width: 9px; height: 6px; flex: none; transition: transform 200ms var(--ease); }
/* The literal stroke in the markup is only a pre-stylesheet fallback — from
   here the caret follows its link's colour. */
.nav-caret path, .lang-switch svg path { stroke: currentColor; }
.primary-nav .has-mega:hover .nav-caret,
.primary-nav .has-mega:focus-within .nav-caret { transform: rotate(180deg); }
.mega {
  position: absolute; top: 100%; left: -20px; z-index: 30;
  padding-top: 16px; /* hover bridge — no dead gap under the link */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
}
.primary-nav .has-mega:hover .mega,
.primary-nav .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__list {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  min-width: 328px; padding: 12px;
  background: #FFFFFF; border-radius: 18px; box-shadow: var(--shadow-card);
}
.mega__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  padding: 11px 14px; border-radius: 12px; font-size: 15px; color: var(--ink);
  white-space: nowrap; transition: background-color 160ms ease, color 160ms ease;
}
.mega__list a::after { display: none; } /* the nav underline doesn't belong in here */
.mega__list a:hover { background: rgba(238,179,13,0.10); color: var(--gold); }
.mega__list li:first-child a { font-weight: 700; }
.mega__count {
  flex: none; min-width: 24px; padding: 2px 7px; border-radius: 999px;
  background: #EFEFEF; color: var(--ink-soft); font-size: 12px; font-weight: 700; text-align: center;
}
.mega__list a:hover .mega__count { background: var(--gold); color: #FFFFFF; }

@media (max-width: 1024px) {
/* In the drawer it becomes a plain indented list — no hover to depend on. */
  .mega { position: static; opacity: 1; visibility: visible; transform: none; padding-top: var(--sp-8); }
.mega__list { min-width: 0; padding: 0 0 0 var(--sp-16); background: none; box-shadow: none; gap: 2px; }
.mega__list a { padding: 8px 0; }
.nav-caret { display: none; }
}


/* 16. Forms -------------------------------------------------------------
   Shared by the contact page's quote form and the sample-request modal, so
   the WordPress form plugin only needs these class names on its own markup:
   .form-field / .form-field--full / .form-label / .form-control /
   .form-submit / .form-status / .form-error. */
.form-field { display: grid; gap: 9px; }
.form-field--full { grid-column: 1 / -1; }
.form-label { font-family: Rubik, "DM Sans", sans-serif; font-size: var(--fs-body); line-height: 1; color: var(--ink); }
.form-label__required { color: var(--gold); }
.form-control {
  width: 100%; height: 52px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 6px; background: #FFFFFF;
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form-control::placeholder { color: #A9A9A9; }
.form-control:hover { border-color: rgba(238,179,13,.5); }
.form-control:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(238,179,13,.2);
}
textarea.form-control { height: 96px; padding: 14px 16px; line-height: 22px; resize: vertical; }
/* Native select with the .fig's own chevron */
select.form-control {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpath d='M0.5 0.5L5.5 5.5L10.5 0.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
select.form-control:invalid { color: #A9A9A9; }
/* Validation states — the plugin can toggle .is-invalid on the field */
.form-control:user-invalid,
.is-invalid .form-control { border-color: #D64545; box-shadow: 0 0 0 3px rgba(214,69,69,.15); }
.form-error { font-size: var(--fs-small); line-height: 18px; color: #D64545; }
.form-field:not(.is-invalid) .form-error { display: none; }
/* .fig submit: 51px pill, gold, gold glow */
.form-submit {
  width: 100%; height: 51px; margin-top: 20px; border: 0; border-radius: var(--radius-pill);
  background: var(--gold); box-shadow: 0 0 10px var(--gold);
  font: inherit; font-weight: 700; font-size: var(--fs-body); text-transform: uppercase;
  color: #FFFFFF; cursor: pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms ease, filter 180ms ease;
}
.form-submit:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 8px 20px rgba(238,179,13,.55); }
.form-submit:active { transform: translateY(0); }
.form-status { margin-top: 14px; font-size: var(--fs-small); line-height: 20px; }
.form-status[data-state="ok"] { color: #1B7F4B; }
.form-status[data-state="error"] { color: #D64545; }

/* 17. Sample-request modal ---------------------------------------------
   Opened by every "Get a FREE Sample" CTA (jalon-sample-modal.js). Site-wide,
   so it lives in the shell — no page stylesheet repeats it. */
.sample-modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; justify-items: center; align-items: safe center; padding: var(--sp-24);
  background: rgba(0,0,0,.62);
  opacity: 0; transition: opacity 200ms var(--ease);
  overflow: auto;
}
.sample-modal.is-open { opacity: 1; }
.sample-modal__dialog {
  width: 100%; max-width: 680px; border-radius: 14px; overflow: hidden;
  background: #FFFFFF; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: translateY(14px) scale(.985);
  transition: transform 240ms var(--ease);
}
.sample-modal.is-open .sample-modal__dialog { transform: none; }
.sample-modal__head {
  position: relative; padding: 30px 34px 26px;
  background: var(--gold-grad); color: #FFFFFF;
}
.sample-modal__eyebrow {
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; opacity: .85;
}
.sample-modal__title { margin-top: 6px; font-size: 30px; font-weight: 900; line-height: 1.1; }
.sample-modal__sub { margin-top: 10px; max-width: 46ch; font-size: var(--fs-small); line-height: 21px; opacity: .92; }
.sample-modal__close {
  position: absolute; top: 20px; right: 20px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.18);
  color: #FFFFFF; cursor: pointer; transition: background-color 160ms ease;
}
.sample-modal__close:hover { background: rgba(255,255,255,.34); }
.sample-modal__close svg { width: 13px; height: 13px; }
.sample-modal__body { padding: 28px 34px 32px; }
.sample-modal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
/* The modal sits on white, so the fields need a visible edge the contact
   panel's grey background gave them for free. */
.sample-modal .form-control { background: #FAFAFA; border-color: #E4E4E4; }
.sample-modal .form-control:focus { background: #FFFFFF; }
.sample-modal .form-submit { text-transform: none; font-size: 17px; }
.sample-modal__alt {
  margin-top: 16px; text-align: center;
  font-size: var(--fs-small); line-height: 20px; color: var(--body);
}
.sample-modal__wa { font-weight: 700; }
.sample-modal__done { padding: 48px 34px 44px; text-align: center; }
.sample-modal__tick {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto;
  border-radius: 50%; background: rgba(238,179,13,.14); color: var(--gold);
}
.sample-modal__tick svg { width: 26px; height: 26px; }
.sample-modal__done-title { margin-top: var(--sp-24); font-size: 26px; font-weight: 700; }
.sample-modal__done-text { margin-top: 10px; color: var(--body); line-height: 24px; }
.sample-modal__done-close { margin: var(--sp-24) auto 0; }
.sample-modal__done-close .btn__chevron { display: none; }

@media (max-width: 600px) {
  .sample-modal { padding: 0; justify-items: stretch; align-items: safe start; }
  .sample-modal__dialog { max-width: none; border-radius: 0; min-height: 100%; }
  .sample-modal__head { padding: 26px var(--sp-24) 22px; }
  .sample-modal__title { font-size: 24px; }
  .sample-modal__body { padding: var(--sp-24) var(--sp-24) 32px; }
  .sample-modal__grid { grid-template-columns: minmax(0, 1fr); }
}


/* 18. Motion ------------------------------------------------------------
   Entrance choreography, site-wide, CSS only.

   Scroll-driven animations (animation-timeline: view()) rather than an
   observer script: these pages render through a component runtime that
   reconciles the DOM and drops attributes it doesn't own, so any JS-applied
   reveal marker is unreliable. A view() timeline needs no marker at all.

   The whole block sits behind @supports, so a browser without scroll-driven
   animations shows the page fully visible and completely static — the
   degradation is "no motion", never "no content". Same for reduced motion.

   Reveals animate opacity / translate / scale and never transform or
   clip-path: the hexagon plates, banner plate and angled gold plates carry
   their own clip-path, and the cards carry their own hover transform. */
@keyframes rev-up    { from { opacity: 0; translate: 0 22px; } }
@keyframes rev-left  { from { opacity: 0; translate: -18px 0; } }
/* The hexagon plates are the brand's motif — they settle in from slightly
   under scale rather than sliding, so a group reads as assembling. */
@keyframes rev-plate { from { opacity: 0; translate: 0 14px; scale: .93; } }
@keyframes rev-mask  { from { opacity: 0; scale: 1.04; } }
@keyframes rev-rule  { from { scale: 0 1; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

  /* Single elements, plain rise. Selectors that match nothing on a given
     page are simply inert, so one block serves all nine pages. */
  .section-title, .section-intro, .eyebrow, .page-banner__plate,
  .contact-band__content, .enquiry__inner, .sidebar-contact, .sidebar-nav,
  .application-stat, .pagination,
  .product-card, .credentials__copy, .certified, .experience,
  .solutions__title, .feature,
  .why-eyebrow, .why-intro__title, .why-intro__lead, .why-intro__copy,
  .equipment__title, .committed__content,
  .advantage__title, .advantage__intro,
  .summary__actions, .spec-table, .product-copy, .related,
  .story-block, .office, .social-card, .quote-form, .contact-map,
  .company-intro__portrait {
    animation: rev-up 1ms linear both;
    animation-timeline: view();
    animation-range: entry 2% entry 38%;
  }

  /* Photography and media panels settle out of a slow push-in. */
  .product-band__photo, .company__collage, .manufacturing__media,
  .why-intro__media, .committed__media, .knowledge-hero {
    animation: rev-mask 1ms linear both;
    animation-timeline: view();
    animation-range: entry 2% entry 45%;
  }

  /* Hairlines and gold rules draw out from their leading edge. */
  .advantage__rule, .footer-rule, .experience__rule {
    transform-origin: left center;
    animation: rev-rule 1ms linear both;
    animation-timeline: view();
    animation-range: entry 12% entry 45%;
  }

  /* Groups: children inherit the reveal, and the nth-child ladder below
     offsets each one's range so the group assembles in order. */
  :is(.application-grid, .solution-grid, .honeycomb, .advantage__grid,
      .equipment__hexes, .credentials__media, .certifications,
      .solutions__list, .certified__marks, .knowledge-grid, .article-grid,
      .site-footer__grid, .social-row, .social-card__links, .downloads) > * {
    animation: rev-plate 1ms linear both;
    animation-timeline: view();
    animation-range: entry 2% entry 38%;
  }
  :is(.equipment__list, .tick-list, .office__lines, .application-nav ul) > * {
    animation: rev-left 1ms linear both;
    animation-timeline: view();
    animation-range: entry 2% entry 38%;
  }
  /* Text-led grids read better rising than scaling. */
  :is(.solution-grid, .knowledge-grid, .article-grid, .site-footer__grid,
      .certified__marks, .solutions__list, .downloads) > * {
    animation-name: rev-up;
  }

  }
}

/* The stagger ladder. A view() timeline has no notion of delay, so each child
   starts a little further into the scroll instead.

   Every range ends at 50% entry or earlier, and that ceiling is the whole
   point: a range end the element can never reach leaves the reveal frozen
   part-faded forever. The last row of a grid at the bottom of the page never
   becomes 90% "entered" — the document runs out of scroll first — so no range
   here may end above the halfway mark. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
  :is(.application-grid, .solution-grid, .honeycomb, .advantage__grid,
      .equipment__hexes, .credentials__media, .certifications,
      .solutions__list, .certified__marks, .knowledge-grid, .article-grid,
      .site-footer__grid, .social-row, .social-card__links, .downloads,
      .equipment__list, .tick-list, .office__lines, .application-nav ul) > *:nth-child(2) { animation-range: entry 8% entry 44%; }
  :is(.application-grid, .solution-grid, .honeycomb, .advantage__grid,
      .equipment__hexes, .credentials__media, .certifications,
      .solutions__list, .certified__marks, .knowledge-grid, .article-grid,
      .site-footer__grid, .social-row, .social-card__links, .downloads,
      .equipment__list, .tick-list, .office__lines, .application-nav ul) > *:nth-child(3) { animation-range: entry 14% entry 48%; }
  :is(.application-grid, .solution-grid, .honeycomb, .advantage__grid,
      .equipment__hexes, .credentials__media, .certifications,
      .solutions__list, .certified__marks, .knowledge-grid, .article-grid,
      .site-footer__grid, .social-row, .social-card__links, .downloads,
      .equipment__list, .tick-list, .office__lines, .application-nav ul) > *:nth-child(4) { animation-range: entry 18% entry 50%; }
  :is(.application-grid, .solution-grid, .honeycomb, .advantage__grid,
      .equipment__hexes, .credentials__media, .certifications,
      .solutions__list, .certified__marks, .knowledge-grid, .article-grid,
      .site-footer__grid, .social-row, .social-card__links, .downloads,
      .equipment__list, .tick-list, .office__lines, .application-nav ul) > *:nth-child(5) { animation-range: entry 22% entry 50%; }
  :is(.application-grid, .solution-grid, .honeycomb, .advantage__grid,
      .equipment__hexes, .credentials__media, .certifications,
      .solutions__list, .certified__marks, .knowledge-grid, .article-grid,
      .site-footer__grid, .social-row, .social-card__links, .downloads,
      .equipment__list, .tick-list, .office__lines, .application-nav ul) > *:nth-child(6) { animation-range: entry 26% entry 50%; }
  :is(.application-grid, .solution-grid, .honeycomb, .advantage__grid,
      .equipment__hexes, .credentials__media, .certifications,
      .solutions__list, .certified__marks, .knowledge-grid, .article-grid,
      .site-footer__grid, .social-row, .social-card__links, .downloads,
      .equipment__list, .tick-list, .office__lines, .application-nav ul) > *:nth-child(n+7) { animation-range: entry 30% entry 50%; }
  }
}

/* Page load, independent of any timeline: the bar drops in, banner and hero
   photography ease out of a slow push-in, the floating rail arrives last. */
.site-header { animation: bar-drop 700ms var(--ease-out-quint) both; }
@keyframes bar-drop { from { translate: 0 -18px; opacity: 0; } }
.page-banner__photo { animation: photo-settle 1600ms var(--ease-out-quint) both; }
@keyframes photo-settle { from { scale: 1.07; } }
/* The rail isn't part of the page, it's an offer — so it comes in after it. */
.floating-contact a, .floating-contact button { animation: rail-in 520ms var(--ease-out-quint) both; }
.floating-contact > :nth-child(1) { animation-delay: 700ms; }
.floating-contact > :nth-child(2) { animation-delay: 760ms; }
.floating-contact > :nth-child(3) { animation-delay: 820ms; }
.floating-contact > :nth-child(4) { animation-delay: 880ms; }
.floating-contact > :nth-child(5) { animation-delay: 940ms; }
@keyframes rail-in { from { translate: 14px 0; scale: .8; opacity: 0; } }

/* The sample/quote dialog: head and fields arrive just behind the panel, so
   opening reads as one movement rather than a slab appearing. */
.sample-modal__head, .sample-modal__grid > *, .sample-modal .form-submit {
  animation: dialog-in 480ms var(--ease-out-quint) both;
}
.sample-modal__grid > :nth-child(n+2) { animation-delay: 60ms; }
.sample-modal__grid > :nth-child(n+5) { animation-delay: 110ms; }
.sample-modal .form-submit { animation-delay: 160ms; }
@keyframes dialog-in { from { translate: 0 10px; opacity: 0; } }
.sample-modal__tick { animation: tick-in 620ms var(--ease-out-quint) both; }
@keyframes tick-in { from { scale: .5; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .site-header, .page-banner__photo, .floating-contact a, .floating-contact button,
  .sample-modal__head, .sample-modal__grid > *, .sample-modal .form-submit,
  .sample-modal__tick { animation: none !important; }
}