/* Impeccable · industrial Swiss · Archivo + Public Sans · navy #1C2539 · gold #d3aa58 */
/* CSS-first reskin — DOM / SEO / AEO structure unchanged. */

:root{
  /* Navy-tinted neutrals (hue ~265) */
  --color-paper: oklch(98.2% 0.006 265);
  --color-paper-2: oklch(96% 0.008 265);
  --color-paper-3: oklch(93.5% 0.01 265);
  --color-rule: oklch(88% 0.012 265);
  --color-rule-2: oklch(78% 0.016 265);
  --color-muted: oklch(52% 0.02 265);
  --color-neutral: oklch(42% 0.022 265);
  --color-ink-2: oklch(32% 0.028 265);
  --color-ink: oklch(26% 0.032 265); /* ~#1C2539 */
  --color-navy: #1c2539;
  --color-accent: #d3aa58; /* gold — rare signal */
  --color-accent-ink: oklch(22% 0.03 265);
  --color-focus: #1c2539;
  --color-graphite: #1c2539;
  --color-graphite-2: oklch(18% 0.028 265);

  --font-display: "Archivo", "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-label: "Archivo Narrow", "Archivo", ui-sans-serif, system-ui, sans-serif;

  --display-weight: 600;
  --tracking-display: -0.025em;
  --tracking-label: 0.08em;
  --radius-card: 10px;
  --radius-control: 6px;
  --shadow-hair: none;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 200ms;

  /* Bridge legacy tokens */
  --pgm-navy: var(--color-navy);
  --pgm-navy2: var(--color-graphite-2);
  --pgm-gold: var(--color-accent);
  --pgm-bg: var(--color-paper);
  --pgm-text: var(--color-ink-2);
  --pgm-muted: var(--color-muted);
  --pgm-line: var(--color-rule);
  --pgm-white: var(--color-paper);
  --pgm-radius: var(--radius-card);
  --pgm-shadow: var(--shadow-hair);

  --font-body--family: var(--font-body);
  --font-heading--family: var(--font-display);
  --font-button--family: var(--font-display);

  /* Shared content column — header + hubs + catalogue + guides
     1280px: wide enough for nav + Audit CTA without crushing the logo */
  --pgm-content-max: 1280px;
  --pgm-content-pad: 24px;

  --color-foreground: var(--color-ink);
  --color-background: var(--color-paper);
  --color-primary: var(--color-navy);
  --color-primary-background: var(--color-navy);
  --color-primary-hover: oklch(32% 0.035 265);
  --color-primary-background-hover: oklch(32% 0.035 265);
  --color-primary-button-text: #fff;
  --color-primary-button-background: var(--color-navy);
  --color-primary-button-border: var(--color-navy);
  --color-primary-button-icon: var(--color-navy);
  --color-primary-button-icon-background: #fff;
  --color-primary-button-hover-text: var(--color-navy);
  --color-primary-button-hover-background: #fff;
  --color-primary-button-hover-border: var(--color-navy);
  --color-primary-button-hover-icon: #fff;
  --color-primary-button-hover-icon-background: var(--color-navy);
  --style-border-radius-buttons-primary: 6px;
  --pgm-radius-pill: 6px;
  --pgm-radius-micro: 6px;
  --pgm-radius-card: 10px;
  --pgm-radius-surface: 10px;
  --pgm-radius-input: 6px;
  --pgm-shadow-card: none;
  --pgm-shadow-panel: none;
  --pgm-shadow-cta: none;

  --bs-primary: #1c2539;
  --bs-primary-rgb: 28, 37, 57;
  --bs-link-color: #1c2539;
  --bs-link-hover-color: #956d28;
}

html{overflow-x:hidden}
body{
  background:var(--color-paper);
  color:var(--color-ink-2);
  font-family:var(--font-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Marketing pages keep a quiet paper field (no photo wallpaper / no glass) */
body.pgm-home,
body.pgm-inner,
body.pgm-aeo.pgm-inner,
body.pgm-aeo.pgm-home{
  background-color:var(--color-paper);
  background-image:none;
}

/* —— Bordered nav (industrial, not floating pill) —— */
.header-2{
  --top: 0 !important;
  --header-radius: 0 !important;
  --header-padding: 0 24px !important;
  --color-background: color-mix(in oklch, var(--color-paper) 94%, transparent) !important;
  --color-foreground: var(--color-ink) !important;
  --color-border: var(--color-rule) !important;
  --color-primary-button-background: var(--color-navy) !important;
  --color-primary-button-border: var(--color-navy) !important;
  --color-primary-button-text: #fff !important;
  --style-border-radius-buttons-primary: 6px !important;
}
/* No backdrop-filter on .header-2: it traps position:fixed .header-nav inside ~72px */
.header-2.header-floating,
.header-2{
  background: color-mix(in oklch, var(--color-paper) 96%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}
.header-2 .header-grid,
.header-2.header-floating .header-grid,
.header-2.header-floating:hover .header-grid,
.header-2.header-sticky.scrolled-past-header .header-grid{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: var(--pgm-content-max);
  margin-inline: auto;
  width: 100%;
  grid-template-columns: max-content minmax(0,1fr) max-content !important;
  align-items: center;
  padding-inline: var(--pgm-content-pad);
  min-height: 72px;
  gap: 16px !important;
}
.header-2 .header-logo{
  flex-shrink: 0 !important;
  min-width: 150px !important;
  max-width: 190px !important;
  width: auto !important;
}
.header-2 .header-logo img{
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 40px !important;
  aspect-ratio: auto !important;
}
.header-2 .header-nav,
.header-2 .header-menu{
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(8px, 0.9vw, 18px);
  min-width: 0;
}
.header-2 .header-actions{
  flex-shrink: 0 !important;
  justify-self: end;
  gap: 12px !important;
}
.header-2 .header-actions > .button.button--primary,
.header-2 .header-actions > .button.button--slim{
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  height: auto !important;
  max-height: none !important;
  writing-mode: horizontal-tb !important;
}
.header-2 .menu-link-main{
  white-space: nowrap;
  font-size: 14px !important;
}
.header-2 .menu-link-main,
.header-2 .link{
  font-family: var(--font-body) !important;
  font-weight: 500;
  color: var(--color-ink) !important;
}
.header-2 .menu-link-main:hover,
.header-2 .link:hover{
  color: #956d28 !important;
}
.header-2 .button--primary,
.button.button--primary{
  background: var(--color-navy) !important;
  border-color: var(--color-navy) !important;
  color: #fff !important;
  border-radius: var(--radius-control) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.header-2 .button--primary:hover,
.button.button--primary:hover{
  background: #fff !important;
  color: var(--color-navy) !important;
  border-color: var(--color-navy) !important;
}
.header-2 .button--primary .svg-wrapper,
.button.button--primary .svg-wrapper{
  background: #fff !important;
  color: var(--color-navy) !important;
  border-radius: 4px !important;
}
.header-2 .button--primary:hover .svg-wrapper,
.button.button--primary:hover .svg-wrapper{
  background: var(--color-navy) !important;
  color: #fff !important;
}

.button,
.button--slim{
  border-radius: var(--radius-control) !important;
  font-family: var(--font-display) !important;
}
.button--secondary,
.button.button--secondary{
  background: transparent !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-rule-2) !important;
  border-radius: var(--radius-control) !important;
}
.button--secondary:hover,
.button.button--secondary:hover{
  border-color: var(--color-navy) !important;
  color: var(--color-navy) !important;
}

/* Footer — navy graphite */
.footer-main{
  background: var(--color-navy) !important;
  color: oklch(78% 0.015 265) !important;
  border-top: 1px solid oklch(32% 0.025 265);
}
.footer-main .text,
.footer-main p,
.footer-widget p{
  color: oklch(72% 0.015 265) !important;
}
.footer-main a,
.footer-main .social-link{
  color: oklch(84% 0.012 265) !important;
}
.footer-main a:hover,
.footer-main .social-link:hover{
  color: var(--color-accent) !important;
}
.footer-bottom{
  border-top: 1px solid oklch(32% 0.025 265) !important;
  color: oklch(62% 0.015 265) !important;
}

h1,h2,h3,h4,.h1,.h2,.h3{
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  font-weight: var(--display-weight);
}

a{color:var(--color-ink)}
a:hover{color:#956d28}

.btn-primary{
  --bs-btn-bg: #1c2539;
  --bs-btn-border-color: #1c2539;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #1c2539;
  --bs-btn-hover-color: #1c2539;
  border-radius: 6px !important;
}

:focus-visible{
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

/* —— Unified header height + mobile chrome —— */
:root{--header-height:96px}
@media (max-width:991px){
  :root{--header-height:64px}
  body.pgm-home{--header-height:64px}
}

/* Keep Audit CTA visible until the drawer breakpoint (theme hid it from 1365px) */
@media (min-width:992px) and (max-width:1365px){
  .header-2 .header-actions > .button.button--primary{
    display:inline-flex !important;
    white-space:nowrap !important;
  }
  .header-2 .header-actions > a.link{
    display:inline !important;
  }
  /* Theme switches to repeat(3,auto) here — keep stable columns */
  .header-2 .header-grid,
  .header-2.header-floating .header-grid,
  .header-2.header-sticky.scrolled-past-header .header-grid{
    grid-template-columns: max-content minmax(0,1fr) max-content !important;
  }
}
@media (min-width:992px) and (max-width:1199px){
  .header-2 .menu-link-main{
    font-size:13px !important;
    padding-inline:6px !important;
  }
}
@media (max-width:991px){
  .header-2 .header-actions > .button.button--primary{
    display:none !important;
  }
  .header-2 .menu-open{
    width:44px;height:44px;min-width:44px;
    display:inline-flex !important;
    align-items:center;justify-content:center;
  }
  .header-2 .menu-open svg{width:40px;height:40px}
  .header-logo{max-width:168px !important}
  .header-logo img{height:34px;width:auto}
  /* One spacing rule under fixed header — neutralize app.min duplicates */
  body:not(.pgm-aeo) main,
  body.pgm-aeo main{
    padding-top:0 !important;
  }
  body.pgm-inner main > .pgm-section:first-child{
    padding-top:calc(var(--header-height) + 48px);
  }
  body.pgm-inner .pgm-breadcrumb{
    padding-top:calc(var(--header-height) + 36px);
  }
}

.header-drawer-actions{
  display:none;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  padding:24px 20px 28px;
  border-top:1px solid var(--color-rule);
  margin-top:8px;
}
@media (max-width:991px){
  .header-nav .header-drawer-actions{
    display:flex;
  }
}
.header-drawer-actions .button{
  justify-content:center;
  width:100%;
  min-height:48px;
}
.header-drawer-actions .link{
  text-align:center;
  text-decoration:none;
  font-weight:600;
  padding:12px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* —— Mobile drawer open state (escape header stacking) —— */
@media (max-width:991px){
  .header-nav.drawer-menu,
  nav.header-nav.drawer-menu{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    width:min(100vw,420px) !important;
    max-width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    z-index:1000 !important;
    -webkit-transform:translate3d(100%,0,0) !important;
    transform:translate3d(100%,0,0) !important;
    background:var(--color-paper) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    visibility:visible !important;
  }
  /* Open only via .show (not body.scroll-lock alone) */
  .header-nav.drawer-menu.show,
  nav.header-nav.drawer-menu.show{
    -webkit-transform:translate3d(0,0,0) !important;
    transform:translate3d(0,0,0) !important;
  }
  /* Beat theme: #drawer-overlay { display:none } under 991px */
  #drawer-overlay,
  drawer-opener#drawer-overlay{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:999 !important;
    background:rgba(0,0,0,.35) !important;
    display:none !important;
    pointer-events:none !important;
  }
  #drawer-overlay.show,
  drawer-opener#drawer-overlay.show{
    display:block !important;
    pointer-events:auto !important;
  }
  .header-2 .menu-close,
  .header-2 .menu-open{
    cursor:pointer;
    pointer-events:auto !important;
  }
}

/* Footer columns — consistent mobile stack */
@media (max-width:991px){
  .footer-main .footer-custom-row,
  .footer-main .row{
    row-gap:28px;
  }
  .footer-widget .widget-heading{
    margin-bottom:14px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}