/* ==========================================================================
   HLA AL RABY LLC Corporate Website

   Type:  IBM Plex Sans, single family, weights 400/500/600/700.
          Chosen for an engineering and equipment supplier: serious, squared
          off, and highly legible in the dense specification lists that make
          up most of this site. IBM Plex is NOT a variable font on Google
          Fonts, so only those four discrete weights are ever referenced.

   Scale: restrained. h1 tops out at 32px (2x body), h2 at 24px. The content
          carries the page rather than the headlines.

   Colour: sampled from the company logo.
          #A88A56 dominant gold, #B3945B highlight, #332F2F warm charcoal.
          Every text pairing meets WCAG 2.2 AA (4.5:1 body, 3:1 large/UI).
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   IBM Plex Sans is self-hosted rather than loaded from Google Fonts. That
   removes two cross-origin round trips (DNS + TLS to fonts.googleapis.com and
   fonts.gstatic.com) from the critical path, and the CSS that used to block
   rendering while it resolved. Licence: SIL Open Font Library, see
   assets/fonts/LICENSE.txt. Only the latin subset is shipped: 96KB total.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('../fonts/ibm-plex-sans-700.woff2') format('woff2');
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Gold ramp, logo derived */
  --gold:        #A88A56;   /* rules and UI accents only, 3.26:1 on white */
  --gold-light:  #C2A570;   /* on dark, 5.6:1 on --ink */
  --gold-dark:   #7E6538;   /* all gold TEXT, 5.48:1 on white */
  --gold-deep:   #6B5530;
  --gold-pale:   #F0E8D9;
  --gold-wash:   #FAF6EE;
  --gold-line:   rgba(168,138,86,.26);

  /* Neutrals, warmed to sit with the gold */
  --ink:         #332F2F;   /* 13.2:1 on white */
  --ink-soft:    #4A423D;   /* 9.6:1  */
  --body:        #5A534E;   /* 7.5:1  */
  --muted:       #6E655E;   /* 5.7:1  */
  --on-dark:     #B8ADA3;   /* 6.0:1 on --ink */
  --on-dark-dim: #A79C92;   /* 4.9:1 on --ink */

  --bg:          #FFFFFF;
  --bg-soft:     #FAF8F5;
  --bg-warm:     #F5F1EA;
  --border:      #E5DDD1;
  --border-soft: #F0EAE1;

  /* Type scale */
  --fs-xs:   .75rem;      /* 12px  labels, eyebrows, meta      */
  --fs-sm:   .875rem;     /* 14px  nav, buttons, card copy     */
  --fs-base: 1rem;        /* 16px  body                        */
  --fs-md:   1.0625rem;   /* 17px  lead paragraphs, h3         */
  --fs-lg:   1.25rem;     /* 20px  prose h2                    */
  --fs-xl:   1.5rem;      /* 24px  h2 ceiling, stat figures    */
  --fs-2xl:  2rem;        /* 32px  h1 ceiling                  */

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px;

  --radius:    3px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(51,47,47,.05);
  --shadow:    0 4px 18px rgba(51,47,47,.07);
  --shadow-lg: 0 14px 40px rgba(51,47,47,.11);

  --wrap:   1180px;
  --gutter: 24px;

  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--gold-dark); text-decoration: none; }
a:hover { color: var(--gold-deep); }
main p a, main li a, .footer-contact a, .form-note a { text-decoration: underline; text-underline-offset: 2px; }
button, summary, label { cursor: pointer; }

/* --- Type --------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--ink);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.55rem, 2.3vw, var(--fs-2xl));   /* 25px to 32px */
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.022em;
}
h2 {
  font-size: clamp(1.25rem, 1.65vw, var(--fs-xl));   /* 20px to 24px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
}
h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.4; letter-spacing: -.008em; }
h4 { font-size: .9375rem; font-weight: 600; line-height: 1.4; }

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul { margin: 0 0 1.05em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

/* --- Accessibility ------------------------------------------------------ */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 14px 22px; font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 780px; }

.section { padding: var(--sp-9) 0; }
.section-sm { padding: var(--sp-7) 0; }
.section-soft { background: var(--bg-soft); }
.section-warm { background: var(--bg-warm); }
.section-dark { background: var(--ink); color: var(--on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark a { color: var(--gold-light); }

.section + .section:not(.section-soft):not(.section-dark):not(.section-warm) {
  border-top: 1px solid var(--border-soft);
}

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }

/* --- Layout utilities ----------------------------------------------------
   These replace the ad-hoc inline styles the pages used to carry, so spacing
   comes from the token scale instead of arbitrary pixel values. */
.grid-split { gap: var(--sp-8); }
.items-center { align-items: center; }
.items-start { align-items: start; }
.justify-center { justify-content: center; }
.measure-wide { max-width: 900px; margin-left: auto; margin-right: auto; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.section-dark strong { color: #fff; }

@media (max-width: 940px) {
  .grid-split { gap: var(--sp-6); }
}

/* --- Eyebrow and section heads ------------------------------------------ */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 var(--sp-3);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 10px; margin-bottom: 3px;
}
.center .eyebrow::before { display: none; }
.section-dark .eyebrow { color: var(--gold-light); }
.section-dark .eyebrow::before { background: var(--gold-light); }

.lead { font-size: var(--fs-md); line-height: 1.6; color: var(--ink-soft); }
.section-dark .lead { color: var(--on-dark); }
.section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.section-head.center { margin-left: auto; margin-right: auto; }

.rule { width: 48px; height: 2px; background: var(--gold); border: 0; margin: 0 0 var(--sp-5); }
.center .rule { margin-left: auto; margin-right: auto; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font);
  font-size: var(--fs-sm); font-weight: 600;
  padding: 12px 26px; min-height: 44px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer; text-align: center;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-gold { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }
.btn-gold:hover {
  background: var(--gold-deep); border-color: var(--gold-deep); color: #fff;
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(126,101,56,.26);
}
.btn-outline { border-color: var(--border); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-wash); }
.btn-ghost-light { border-color: rgba(255,255,255,.34); color: #fff; }
.btn-ghost-light:hover { border-color: var(--gold-light); background: var(--gold-light); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: 158px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 127px; width: 148px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav > a, .nav .drop-toggle {
  font-family: var(--font);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-soft);
  padding: 10px 13px; border-radius: var(--radius);
  background: none; border: 0; cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav > a:hover, .nav .drop-toggle:hover { color: var(--gold-dark); background: var(--gold-wash); }
.nav > a[aria-current="page"],
.nav .drop-toggle[aria-current="page"] { color: var(--gold-dark); font-weight: 600; }
.nav > a[aria-current="page"]::after {
  content: ""; display: block; height: 2px;
  background: var(--gold); margin-top: 5px; border-radius: 2px;
}

.has-drop { position: relative; }
.drop-toggle::after { content: " ▾"; font-size: .7em; opacity: .6; }
.drop {
  position: absolute; top: calc(100% + 9px); left: 0;
  min-width: 272px; background: #fff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 7px; display: none;
}
.drop::before {
  /* Invisible bridge across the 9px gap between the Divisions tab and the menu,
     so moving the pointer down to the menu never crosses a dead zone that would
     drop :hover and close it. Inherits the menu's visibility, so it only
     intercepts the pointer while the menu is actually open. */
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.has-drop:hover .drop,
.has-drop:focus-within .drop { display: block; }
.drop a {
  display: block; padding: 11px 13px;
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--ink); border-radius: var(--radius);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.drop a span {
  display: block; font-weight: 400; font-size: var(--fs-xs);
  color: var(--muted); margin-top: 2px; letter-spacing: 0; text-transform: none;
}
.drop a:hover { background: var(--gold-wash); color: var(--gold-dark); }
.drop a[aria-current="page"] { background: var(--gold-pale); color: var(--gold-dark); }

.header-cta { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.header-phone { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); white-space: nowrap; margin: 0; }
.header-phone small {
  display: block; font-weight: 400; font-size: var(--fs-xs);
  color: var(--muted); letter-spacing: .12em; text-transform: uppercase;
}
.header-phone a { color: var(--ink); }
.header-phone a:hover { color: var(--gold-dark); }

.nav-toggle {
  display: none; background: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  width: 44px; height: 44px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 19px; height: 1.5px; background: var(--ink); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 1.5px; background: var(--ink);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: var(--sp-9) 0 calc(var(--sp-9) + var(--sp-2));
  background:
    radial-gradient(760px 380px at 78% 6%, rgba(168,138,86,.15), transparent 62%),
    linear-gradient(165deg, #FEFDFB 0%, var(--bg-warm) 100%);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -130px; top: -110px;
  width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid var(--gold-line); pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: var(--sp-8); align-items: center;
  position: relative; z-index: 1;
}
.hero h1 { margin-bottom: .5em; }
.hero .lead { max-width: 52ch; }
.hero .btn-row { margin-top: var(--sp-6); }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-7);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--gold-line);
  list-style: none; padding-left: 0;
}
.hero-stats li { margin: 0; }
.hero-stats strong {
  display: block;
  font-size: var(--fs-xl); font-weight: 600;
  color: var(--gold-dark); line-height: 1;
  margin-bottom: 5px; letter-spacing: -.01em;
}
.hero-stats span { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

/* Hero capability panel, in place of an empty image slot */
.hero-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-6) var(--sp-5);
}
.hero-panel > .eyebrow { margin-bottom: var(--sp-4); }
.panel-list { list-style: none; padding: 0; margin: 0; }
.panel-list li { margin: 0; border-bottom: 1px solid var(--border-soft); }
.panel-list li:last-child { border-bottom: 0; }
.panel-list a {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 13px 0; color: var(--ink);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.panel-list a:hover { color: var(--gold-dark); padding-left: 5px; }
.panel-list .n {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--gold-dark); letter-spacing: .1em;
  flex-shrink: 0; width: 22px;
}
.panel-list .t { font-weight: 600; font-size: var(--fs-base); display: block; }
.panel-list .d { font-size: var(--fs-sm); color: var(--muted); display: block; margin-top: 1px; line-height: 1.45; }
.panel-list a:hover .d { color: var(--body); }

/* --- Page hero ---------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: var(--sp-7) 0 var(--sp-8);
  background:
    radial-gradient(600px 300px at 86% 0%, rgba(168,138,86,.13), transparent 60%),
    linear-gradient(165deg, #FEFDFB 0%, var(--bg-warm) 100%);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; right: -170px; top: -190px;
  width: 400px; height: 400px; border-radius: 50%;
  border: 1px solid var(--gold-line); pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 22ch; }
.page-hero .lead { max-width: 58ch; }

/* --- Breadcrumb --------------------------------------------------------- */
.breadcrumb { margin-bottom: var(--sp-5); }
.breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0; margin: 0; font-size: var(--fs-xs); color: var(--muted);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 7px; }
.breadcrumb li + li::before { content: "/"; opacity: .5; }
.breadcrumb a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumb a:hover { color: var(--gold-dark); }
.breadcrumb [aria-current="page"] { color: var(--ink-soft); }

/* --- Image slots --------------------------------------------------------
   Styled as an intentional brand panel, not a "missing image" box, so the
   site reads as finished before photography exists. Replace the whole .ph
   element with an <img> once real photos are available. */
.ph {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-3);
  background: radial-gradient(circle at 50% 42%, #FDFAF4 0%, var(--gold-wash) 55%, #F2EADB 100%);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  color: var(--gold-dark);
  text-align: center; padding: var(--sp-5);
  aspect-ratio: 4 / 3; overflow: hidden;
}
.ph::before, .ph::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; pointer-events: none;
}
.ph::before { width: 60%; border: 1px solid var(--gold-line); }
.ph::after  { width: 42%; border: 1px solid rgba(168,138,86,.15); }
.ph-icon { width: 26px; height: 26px; opacity: .5; position: relative; z-index: 1; }
.ph-label {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  position: relative; z-index: 1;
}
.ph-dim { font-size: var(--fs-xs); color: var(--muted); position: relative; z-index: 1; }
.ph-wide { aspect-ratio: 16 / 9; }
.ph-tall { aspect-ratio: 3 / 4; }
.ph-square { aspect-ratio: 1 / 1; }
.ph-hero { aspect-ratio: 5 / 4; }

/* --- Photos --------------------------------------------------------------
   Real imagery. Aspect-ratio modifiers crop with object-fit so mixed source
   ratios still sit in uniform grids. width/height attributes stay on the img
   for CLS; the CSS ratio wins visually. */
.photo {
  display: block; width: 100%; height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.photo-43   { aspect-ratio: 4 / 3; }
.photo-sq   { aspect-ratio: 1 / 1; }
.photo-hero { aspect-ratio: 5 / 4; }
.photo-wide { aspect-ratio: 16 / 9; }
.division-card .photo {
  border: 0; border-radius: 0;
  border-bottom: 1px solid var(--border);
}

/* --- Cards -------------------------------------------------------------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0;
  background: var(--gold); border-radius: var(--radius-lg) 0 0 0;
  transition: width .3s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-line); }
.card:hover::before { width: 42%; }
.card h3 { margin-bottom: .45em; }
.card p { font-size: var(--fs-sm); line-height: 1.6; }
.card-num {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--gold-dark); letter-spacing: .14em;
  display: block; margin-bottom: var(--sp-3); line-height: 1;
}
a.card { color: var(--body); display: block; }
a.card h3 { color: var(--ink); }
a.card:hover h3 { color: var(--gold-dark); }

.division-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.division-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold-line); }
.division-card .ph { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); }
.division-card-body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; }
.division-card-body p { font-size: var(--fs-sm); line-height: 1.6; flex: 1; }
.division-link {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-dark); margin-top: var(--sp-4);
  /* 24px minimum target height (WCAG 2.2 target size) */
  display: inline-flex; align-items: center; min-height: 24px;
  align-self: flex-start;
}
/* The whole card is the target, not just the link: people expect to click the
   picture and the heading. The overlay sits above the card but below the
   focus ring, and the card has no other links to swallow. */
.division-link::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.division-card:focus-within { outline: 3px solid var(--gold-dark); outline-offset: 3px; }
.division-link:focus-visible { outline: none; }
.division-link::after { content: " →"; transition: margin .2s var(--ease); }
.division-card:hover .division-link::after { margin-left: 5px; }

.icon-tile {
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--gold-pale);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
}
.icon-tile svg { width: 20px; height: 20px; stroke: var(--gold-dark); }

/* --- Lists -------------------------------------------------------------- */
.list-check { list-style: none; padding: 0; margin: 0; }
.list-check li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: var(--fs-sm); line-height: 1.6; }
.list-check li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
}
.section-dark .list-check li::before { border-color: var(--gold-light); }
.list-cols { columns: 2; column-gap: var(--sp-6); }
.list-cols li { break-inside: avoid; }

.spec-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.spec-block h3 {
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dark);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--gold-line);
  margin-bottom: var(--sp-4);
}

/* --- Process steps ------------------------------------------------------ */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step {
  position: relative;
  padding-left: 64px; padding-bottom: var(--sp-6);
  border-left: 1px solid var(--border);
  margin-left: 20px;
}
.step:last-child { border-left-color: transparent; padding-bottom: 0; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: -20px; top: -4px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--gold);
  color: var(--gold-dark);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { margin-bottom: .3em; }
.step p { font-size: var(--fs-sm); line-height: 1.6; }

/* --- Industries --------------------------------------------------------- */
.industry {
  display: flex; gap: var(--sp-5);
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--border);
}
.industry:last-child { border-bottom: 0; }
.industry-num {
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--gold-dark); letter-spacing: .1em;
  line-height: 1.6; flex-shrink: 0; width: 34px;
}
.industry h3 { margin-bottom: .25em; }
.industry p { font-size: var(--fs-sm); line-height: 1.6; margin: 0; }

.tag-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.tag-grid li { margin: 0; }
.tag {
  display: inline-block;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.tag:hover { border-color: var(--gold); color: var(--gold-dark); }
.section-dark .tag { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #E4DED7; }
.section-dark .tag:hover { border-color: var(--gold-light); color: #fff; }

/* --- Brand logo grid ---------------------------------------------------- */
.brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }
.brand-grid li { margin: 0; }
.brand-slot {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 10px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.brand-slot:hover { border-color: var(--gold-line); color: var(--gold-dark); }

/* --- FAQ ---------------------------------------------------------------- */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff; margin-bottom: var(--sp-3); overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item[open] { border-color: var(--gold-line); box-shadow: var(--shadow-sm); }
.faq-item summary {
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600; font-size: var(--fs-base); color: var(--ink);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); min-height: 44px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex-shrink: 0;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--gold-dark);
  border-bottom: 1.5px solid var(--gold-dark);
  transform: rotate(45deg); margin-top: -4px;
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.faq-item summary:hover { background: var(--gold-wash); color: var(--gold-dark); }
.faq-answer { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-sm); line-height: 1.65; }
.faq-answer p:last-child { margin-bottom: 0; }

/* --- Prose (legal pages) ------------------------------------------------ */
.prose h2 { margin-top: 1.9em; font-size: var(--fs-lg); }
.prose h3 { margin-top: 1.6em; font-size: var(--fs-base); }
.prose h2:first-child { margin-top: 0; }
/* Long-form legal copy: 16px and a measure capped around 68 characters.
   At 14px in the full container this ran to ~103 characters per line, which
   is well past comfortable reading for dense terms. */
.prose { max-width: 68ch; }
.prose p, .prose li { font-size: var(--fs-base); line-height: 1.7; }
.prose .table-scroll { max-width: none; }
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); background: var(--gold-wash); }
.prose caption { caption-side: bottom; font-size: var(--fs-xs); color: var(--muted); padding-top: 10px; text-align: left; }
.table-scroll { overflow-x: auto; }

.note {
  border-left: 2px solid var(--gold);
  background: var(--gold-wash);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm); margin: 1.6em 0;
}

/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  position: relative;
  background:
    radial-gradient(680px 300px at 14% 18%, rgba(168,138,86,.2), transparent 62%),
    var(--ink);
  color: var(--on-dark);
  padding: var(--sp-8) 0;
  overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; right: -110px; bottom: -170px;
  width: 400px; height: 400px; border-radius: 50%;
  border: 1px solid rgba(194,165,112,.18); pointer-events: none;
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band .lead { color: var(--on-dark); max-width: 50ch; }
.cta-inner { display: grid; grid-template-columns: 1.3fr auto; gap: var(--sp-7); align-items: center; position: relative; z-index: 1; }

/* --- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-item { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); margin: 0; }
.contact-item:last-child { border-bottom: 0; }
.contact-item .icon-tile { margin-bottom: 0; flex-shrink: 0; width: 40px; height: 40px; }
.contact-item h3 {
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px; font-weight: 600;
}
.contact-item a, .contact-item p {
  font-size: var(--fs-base); font-weight: 600; color: var(--ink); margin: 0; display: block;
}
.contact-item a { text-decoration: none; }
.contact-item a:hover { color: var(--gold-dark); text-decoration: underline; }
.contact-alt { margin: 4px 0 0; }
.contact-alt a {
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px;
}

form { display: grid; gap: var(--sp-4); }
.field label {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink); margin-bottom: 7px;
  letter-spacing: .08em; text-transform: uppercase;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font); font-size: var(--fs-base);
  color: var(--ink); background: #fff;
  border: 1px solid #CFC5B6; border-radius: var(--radius);
  padding: 12px 14px; min-height: 44px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(126,101,56,.16);
}
.field textarea { resize: vertical; min-height: 132px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-note { font-size: var(--fs-sm); color: var(--muted); }
.req { color: #A8322A; }

.form-status {
  display: none; padding: 14px 16px; border-radius: var(--radius);
  font-size: var(--fs-sm); background: var(--gold-pale);
  border-left: 2px solid var(--gold); color: #5C4A28; margin-bottom: var(--sp-4);
}
.form-status.show { display: block; }

.wa-float {
  position: fixed; right: 20px; bottom: calc(20px + var(--install-offset, 0px)); z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  background: #128C7E;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(18,140,126,.38);
  transition: transform .2s var(--ease);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 26px; height: 26px; fill: #fff; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: var(--on-dark);
  padding: var(--sp-8) 0 0; font-size: var(--fs-sm);
  border-top: 3px solid var(--gold);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-7); padding-bottom: var(--sp-7); }
.footer-logo { background: #fff; border-radius: var(--radius); padding: 12px 14px; display: inline-block; margin-bottom: var(--sp-4); }
.footer-logo img { height: 72px; width: 85px; }
.site-footer h2 {
  color: #fff; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--sp-4);
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 2px; }
.footer-links a {
  display: inline-block; padding: 4px 0;
  color: var(--on-dark); font-size: var(--fs-sm);
}
.footer-links a:hover { color: var(--gold-light); text-decoration: underline; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { margin-bottom: 1px; }
.footer-contact a { display: inline-block; padding: 4px 0; color: var(--on-dark); }
.footer-more { margin: var(--sp-3) 0 0; }
.footer-more a {
  font-size: var(--fs-xs); color: var(--gold-light);
  text-decoration: underline; text-underline-offset: 2px;
}
.footer-contact a:hover { color: var(--gold-light); }
.footer-tagline {
  color: var(--gold-light);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: var(--sp-5) 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: space-between;
  font-size: var(--fs-xs); color: var(--on-dark-dim);
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--on-dark-dim); text-decoration: underline; }
.footer-bottom a:hover { color: var(--gold-light); }
.footer-legal { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* --- Reveal on scroll ---------------------------------------------------
   Content is VISIBLE BY DEFAULT. main.js adds .js-reveal to <html> only after
   confirming IntersectionObserver actually delivers callbacks, and removes it
   again if it does not, so no section can ever be permanently invisible. */
.js-reveal .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Motion --------------------------------------------------------------
   Rules: transform and opacity only, so everything stays on the compositor
   thread. Hover displacement stays under 3px so it reads as feedback, not
   movement. Every animation is disabled wholesale by the reduced-motion block
   at the end of this section. Nothing here is required to read the page.
   -------------------------------------------------------------------------- */

/* Staggered children. main.js tags the children of a revealed grid and sets
   a per-item delay, so cards arrive in sequence rather than all at once. */
.js-reveal .reveal.has-stagger { opacity: 1; transform: none; }
.js-reveal .reveal.has-stagger > .rv-child {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js-reveal .reveal.has-stagger.in > .rv-child { opacity: 1; transform: none; }

/* Header condenses once the page is scrolled */
.site-header { transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(51,47,47,.08); }
.brand img { transition: transform .3s var(--ease); transform-origin: left center; }
.site-header.is-scrolled .brand img { transform: scale(.9); }

/* Nav underline slides in */
.nav > a { position: relative; }
.nav > a::before {
  content: ; position: absolute;
  left: 13px; right: 13px; bottom: 4px; height: 1.5px;
  background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease);
}
.nav > a:hover::before { transform: scaleX(1); }
.nav > a[aria-current=page]::before { display: none; }

/* Dropdown fades and lifts instead of snapping */
.drop {
  display: block;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  /* visibility is deliberately NOT transitioned. Transitioning it means the
     property only reaches "visible" once the transition actually runs, so in
     any context where transitions are throttled or disabled the submenu would
     stay permanently hidden. Opacity and transform animate; visibility flips
     instantly, which keeps the menu reachable no matter what. */
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.has-drop:hover .drop,
.has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.drop a { transition: background .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease); }
.drop a:hover { padding-left: 17px; }

/* Buttons: arrow nudge and a soft sheen */
.btn { position: relative; overflow: hidden; }
.btn-gold::after {
  content: ; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
}
.btn-gold:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px); }

/* Photos lift on hover; division cards get a true zoom because the card clips */
.photo { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.grid > .photo:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.division-card .photo { transition: transform .55s var(--ease); }
.division-card:hover .photo { transform: scale(1.05); }

/* Section heading gets a gold rule that draws in when revealed */
.section-head h2 { position: relative; padding-bottom: 14px; }
.section-head h2::after {
  content: ; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0; background: var(--gold);
  transition: width .7s var(--ease) .15s;
}
.section-head.center h2::after { left: 50%; transform: translateX(-50%); }
.js-reveal .reveal:not(.in) .section-head h2::after { width: 0; }
.section-head h2::after, .reveal.in .section-head h2::after { width: 46px; }

/* Icon tiles and step markers respond to their card */
.icon-tile { transition: background .26s var(--ease), transform .26s var(--ease); }
.card:hover .icon-tile { background: var(--gold); transform: translateY(-2px); }
.card:hover .icon-tile svg { stroke: #fff; }
.icon-tile svg { transition: stroke .26s var(--ease); }
.step::before { transition: background .26s var(--ease), color .26s var(--ease), transform .26s var(--ease); }
.step:hover::before { background: var(--gold); color: #fff; transform: scale(1.06); }

/* Tags */
.tag { transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); }
.tag:hover { transform: translateY(-2px); }

/* FAQ answer eases in when the panel opens */
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq-item[open] .faq-answer { animation: faq-in .3s var(--ease); }

/* Hero content arrives on load, staggered by depth */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.js-anim .hero .eyebrow  { animation: hero-in .6s var(--ease) both; }
.js-anim .hero h1        { animation: hero-in .6s var(--ease) .08s both; }
.js-anim .hero .lead     { animation: hero-in .6s var(--ease) .16s both; }
.js-anim .hero .btn-row  { animation: hero-in .6s var(--ease) .24s both; }
.js-anim .hero-stats     { animation: hero-in .6s var(--ease) .32s both; }
.js-anim .hero-panel     { animation: hero-in .7s var(--ease) .18s both; }

/* The decorative logo ring drifts very slowly */
@keyframes ring-drift {
  from { transform: rotate(0deg)   translateX(0)    rotate(0deg); }
  to   { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}
.hero::after { animation: ring-drift 44s linear infinite; }

/* WhatsApp button breathes, and pulses a ring outward */
@keyframes wa-ring {
  0%   { box-shadow: 0 0 0 0 rgba(18,140,126,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(18,140,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,140,126,0); }
}
.wa-float::before {
  content: ; position: absolute; inset: 0; border-radius: 50%;
  animation: wa-ring 2.8s var(--ease) infinite;
}
.wa-float:hover { transform: scale(1.09) rotate(-6deg); }

/* Panel list rows */
.panel-list .n { transition: color .2s var(--ease), transform .2s var(--ease); }
.panel-list a:hover .n { transform: translateX(2px); }

/* Footer links */
.footer-links a, .footer-contact a { transition: color .2s var(--ease), transform .2s var(--ease); }
.footer-links a:hover { transform: translateX(3px); }

/* Turn all of it off for anyone who asks */
@media (prefers-reduced-motion: reduce) {
  .hero::after, .wa-float::before { animation: none; }
  .js-anim .hero .eyebrow, .js-anim .hero h1, .js-anim .hero .lead,
  .js-anim .hero .btn-row, .js-anim .hero-stats, .js-anim .hero-panel { animation: none; }
  .faq-item[open] .faq-answer { animation: none; }
  .js-reveal .reveal.has-stagger > .rv-child { opacity: 1 !important; transform: none !important; }
  .section-head h2::after { transition: none; width: 46px; }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  /* the larger logo plus seven nav items needs the tighter spacing here */
  .nav > a, .nav .drop-toggle { padding: 10px 8px; font-size: 13px; }
  .header-phone { display: none; }
  .brand img { height: 105px; width: 123px; }
  .header-inner { min-height: 134px; }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-grid { gap: var(--sp-6); }
}

@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 10px;
    max-height: calc(100vh - 120px); overflow-y: auto;
    display: none;
  }
  .nav.open { display: flex; }
  .nav > a, .nav .drop-toggle { padding: 14px 13px; font-size: var(--fs-base); text-align: left; }
  .nav > a[aria-current="page"]::after { display: none; }
  .has-drop { position: static; }
  .drop {
    position: static; display: block;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--gold-pale);
    padding: 0 0 0 13px; min-width: 0;
    margin: 4px 0 8px 13px; border-radius: 0;
  }
  .drop::before { content: none; }
  .drop-toggle { pointer-events: auto; }
  .drop-toggle::after { display: none; }
  .header-cta .btn { display: none; }

  .hero-grid, .contact-grid, .cta-inner { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .section { padding: var(--sp-8) 0; }
  .hero { padding: var(--sp-8) 0; }
  .hero::after, .page-hero::after { display: none; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .list-cols { columns: 1; }
  .field-row { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-stats { gap: var(--sp-5); }
  .spec-block { padding: var(--sp-5); }
  .section { padding: var(--sp-7) 0; }
  .step { padding-left: 54px; }
  .industry { gap: var(--sp-3); }
  .faq-item summary { padding: var(--sp-4); font-size: var(--fs-sm); }
  .faq-answer { padding: 0 var(--sp-4) var(--sp-4); }
}

@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .wa-float { right: 14px; bottom: calc(14px + var(--install-offset, 0px)); }
}

/* --- Interactive components ----------------------------------------------
   Everything here is an enhancement layered on markup that already works.
   Nothing below is required to read the page or reach any content.
   -------------------------------------------------------------------------- */

/* Scroll progress. Pure CSS via a scroll-driven animation, so there is no
   scroll listener and no jank. Browsers without support simply never show it. */
.scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    display: block;
    position: fixed; inset: 0 0 auto 0;
    height: 3px; z-index: 150;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold));
    transform: scaleX(0); transform-origin: 0 50%;
    animation: scroll-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes scroll-progress { to { transform: scaleX(1); } }
}

/* Back to top */
.to-top {
  position: fixed; right: 22px; bottom: calc(94px + var(--install-offset, 0px)); z-index: 89;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--gold-dark);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--gold); background: var(--gold-wash); }
.to-top svg { width: 20px; height: 20px; }
.footer-top-link { margin-left: auto; }

/* FAQ filter */
.faq-filter { margin-bottom: var(--sp-5); }
.faq-filter label {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 7px;
}
.faq-filter input {
  width: 100%; font-family: var(--font); font-size: var(--fs-base);
  color: var(--ink); background: #fff;
  border: 1px solid #CFC5B6; border-radius: var(--radius);
  padding: 12px 14px; min-height: 44px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.faq-filter input:focus {
  outline: none; border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(126,101,56,.16);
}
.faq-count { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-3) 0 0; min-height: 1.2em; }
.faq-filter.has-no-results .faq-count { color: #A8322A; }
.faq-item[hidden] { display: none; }

/* Copy to clipboard */
.copy-row { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-dark); background: var(--gold-wash);
  border: 1px solid var(--gold-line); border-radius: var(--radius);
  padding: 6px 10px; min-height: 28px; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.copy-btn:hover { background: var(--gold-pale); border-color: var(--gold); }
.copy-btn svg { width: 13px; height: 13px; }
.copy-btn.is-copied { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }

/* Zoomable gallery images */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; }

.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: min(94vw, 1200px); max-height: 92vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(31,28,28,.86); }
.lightbox figure { margin: 0; }
.lightbox img {
  display: block; max-width: 100%; max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-lg); background: var(--ink);
}
.lightbox figcaption {
  color: #fff; font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-2) 0; text-align: center;
}
.lightbox-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--ink);
  border: 1px solid var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.lightbox-close:hover { background: var(--gold-wash); color: var(--gold-dark); }
.lightbox-close svg { width: 18px; height: 18px; }

/* Inline field validation */
.field-error {
  margin: 7px 0 0; font-size: var(--fs-sm); color: #A8322A;
}
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid {
  border-color: #A8322A;
}
.field input.is-invalid:focus, .field select.is-invalid:focus, .field textarea.is-invalid:focus {
  border-color: #A8322A; box-shadow: 0 0 0 3px rgba(168,50,42,.15);
}

@media (max-width: 640px) {
  .to-top { right: 14px; bottom: calc(84px + var(--install-offset, 0px)); width: 42px; height: 42px; }
  .lightbox-close { top: -10px; right: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .to-top { transition: none; }
}

/* --- Install banner -------------------------------------------------------
   Shown only when the browser reports the site is installable. Sits above the
   floating buttons and pushes nothing, so it cannot shift the page. */
.install-banner {
  position: fixed; z-index: 95;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.install-banner.is-open { opacity: 1; transform: none; }
.install-banner[hidden] { display: none; }

.install-icon { flex-shrink: 0; border-radius: var(--radius); }
.install-copy { flex: 1; min-width: 0; }
.install-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin: 0 0 2px; }
.install-text { font-size: var(--fs-xs); color: var(--muted); margin: 0; line-height: 1.45; }

.install-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.install-actions .btn { padding: 9px 18px; min-height: 38px; font-size: var(--fs-xs); }
.install-dismiss {
  font-family: var(--font); font-size: var(--fs-xs); font-weight: 500;
  color: var(--muted); background: none; border: 0;
  padding: 6px 8px; min-height: 28px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.install-dismiss:hover { color: var(--ink); }

/* The banner occupies the same corner as the floating buttons. Its height
   changes with wrapping, so main.js measures it and publishes the value as
   --install-offset rather than us guessing a fixed number here. */

@media (max-width: 520px) {
  .install-banner { flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-4); }
  .install-actions { flex-direction: row; width: 100%; align-items: center; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .install-banner { transition: none; }
}

/* --- Forced colours (Windows High Contrast) ------------------------------
   These modes discard box-shadow and background images, so anything relying
   on them for meaning needs a real border or outline instead. The form fields
   are the important case: they suppress the outline in favour of a gold glow,
   which would otherwise leave no visible focus indicator at all. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }

  .field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid CanvasText;
    outline-offset: 1px;
  }

  /* buttons and cards are distinguished by fill, which gets flattened */
  .btn, .tag, .card, .spec-block, .faq-item, .hero-panel { border: 1px solid CanvasText; }

  .division-card:focus-within { outline: 3px solid CanvasText; }

  /* decorative rings and tints carry no meaning in this mode */
  .hero::after, .page-hero::after, .cta-band::after,
  .ph::before, .ph::after { display: none; }
}

/* --- Print -------------------------------------------------------------- */
/* --- Print -----------------------------------------------------------------
   One shared stylesheet, so these rules apply consistently to every page.
   Goal: clean, ink-light, single-column documents with no interactive chrome,
   readable link targets, and no content split awkwardly across page breaks. */
@page { margin: 16mm; }

@media print {
  /* strip interactive / decorative chrome */
  .site-header, .site-footer, .wa-float, .cta-band, .skip-link,
  .nav-toggle, #install-banner, .hero-grid-bg, .hero-schematic, .hero-dim,
  .breadcrumb, .btn-row, .drop, form .btn, .copy-row button { display: none !important; }

  /* neutral, ink-saving base */
  *, *::before, *::after {
    background: #fff !important; color: #000 !important;
    box-shadow: none !important; text-shadow: none !important;
    -webkit-filter: none !important; filter: none !important;
  }
  html, body { width: 100%; margin: 0; padding: 0;
    font-size: 11pt; line-height: 1.45; background: #fff; color: #000; }

  main, .container { max-width: 100% !important; width: auto !important;
    margin: 0 !important; padding: 0 !important; }
  .section, .page-hero, .section-soft, .section-dark { padding: 12pt 0 !important; }

  /* typography + hierarchy */
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12pt; }
  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* keep coherent blocks together across page breaks */
  .card, .spec-block, .industry, .step, figure, .cat-row, table, img, .division-card {
    page-break-inside: avoid; break-inside: avoid;
  }
  img, .photo { max-width: 100% !important; height: auto !important; }

  /* borders/rules print as light grey hairlines, not heavy fills */
  .card, .spec-block, table, th, td { border: 1px solid #bbb !important; }

  /* readable link targets, but only where the URL adds value */
  a { text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  a[href^="#"]::after, a[href^="tel:"]::after, a[href^="mailto:"]::after,
  a[href$=".html"]::after, nav a::after { content: "" !important; }

  .grid, .grid-2, .grid-3, .grid-4, .grid-split, .hero-grid, .cta-inner {
    display: block !important;
  }
}

/* --- Location map (click-to-load) ------------------------------------------
   Responsive 16:9 frame on desktop, taller 4:3 on small screens so the map
   and the placeholder controls stay comfortably legible. */
.map-embed {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-soft);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); text-align: center; padding: var(--sp-6);
}
.map-pin { width: 40px; height: 40px; color: var(--gold-dark); }
.map-addr { margin: 0; font-weight: 600; color: var(--ink); max-width: 34ch; }
.map-note { margin: 0; font-size: var(--fs-xs); color: var(--muted); max-width: 44ch; }
.map-note a { color: var(--gold-dark); }
@media (max-width: 640px) { .map-embed { aspect-ratio: 4 / 3; } }

/* --- Partner brand logos (V2) ---------------------------------------------
   The .brand-slot is a fixed 3:2 white card; the logo scales to fit inside it
   with object-fit so mixed logo shapes (wide wordmarks, square marks) all sit
   consistently. Until a logo file is added, the img's alt (the brand name)
   shows as the card's text fallback. */
.brand-logo {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}

/* --- Brand card hover ------------------------------------------------------
   Gentle lift + scale + soft shadow. Transform/opacity only, so no layout
   shift and it stays on the compositor thread. The scroll-reveal fade-and-rise
   for these cards is the shared .rv-child stagger (main.js opts the logo grids
   in with a capped left-to-right wave). Both are disabled under reduced motion. */
.brand-slot {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease);
}
@media (hover: hover) {
  .brand-slot:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-slot:hover { transform: none; box-shadow: none; }
}