/* ==========================================================================
   CTPL · global.css
   Design tokens, base elements and shared site chrome (trust strip, header,
   navigation, mobile menu, section scaffolding, RFQ band, footer, motion).

   Load this BEFORE a page's own <style> block: page rules of equal
   specificity come later in source order and therefore win, so a page can
   override any of these without !important.

   Contents
     1.  Design tokens
     2.  Reset and base elements
     3.  Layout helpers
     4.  Eyebrow
     5.  Buttons
     6.  Focus
     7.  Grid texture
     8.  Trust strip
     9.  Header and desktop navigation
     10. Mobile menu (base; panel lives in the 940px block)
     11. Section scaffolding
     12. RFQ / CTA band
     13. Footer
     14. Motion
     15. Breakpoint: 940px
     16. Breakpoint: 600px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root{
  /* Colour lock. The palette below is light-only by design, so opt the page
     out of every automatic dark-mode repaint: Chrome Auto Dark Theme, Android
     WebView force-dark, Samsung Internet dark mode. `only light` also keeps
     UA-painted surfaces - form fields, autofill, scrollbars - on the light
     palette, which the <meta name="color-scheme"> tag alone does not do.
     Mirrored as a meta tag in every page <head> so it applies before paint. */
  color-scheme: only light;

  --blue:#184098;        /* PRIMARY cobalt, from logo */
  --blue-2:#2A5AD6;      /* brighter cobalt for gradients */
  --blue-dark:#102C6B;
  --navy:#0B1C48;
  --navy2:#071233;
  --red:#E81820;         /* logo red: reserved accent + RFQ */
  --red-dark:#C4131A;
  --teal:#2E9E8A;        /* mint interlock, derived */
  --mint:#9FD2C6;
  --mint-soft:#E9F5F0;
  --ink:#0F1524;
  --ink-soft:#586178;
  --paper:#F5F8FD;
  --paper-2:#EAF0FB;
  --border:#DBE3F1;
  --line:#E7ECF6;
  --white:#fff;
  --fd:'Space Grotesk',system-ui,sans-serif;
  --fb:'IBM Plex Sans',system-ui,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 6px 26px rgba(15,35,90,.08);
  --shadow-lg:0 22px 60px rgba(15,35,90,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* --------------------------------------------------------------------------
   2. Reset and base elements
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--white)}
body{font-family:var(--fb);color:var(--ink);background:var(--white);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--fd);line-height:1.1;color:var(--ink);font-weight:600;letter-spacing:-.02em}
a{text-decoration:none;color:inherit}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 26px}
.mono{font-family:var(--fm)}

/* --------------------------------------------------------------------------
   4. Eyebrow
   -------------------------------------------------------------------------- */
.eyebrow{font-family:var(--fm);font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--red)}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fb);font-weight:600;font-size:.95rem;padding:.85rem 1.5rem;border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:.2s var(--ease)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(232,24,32,.26)}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,24,32,.32)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dark);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--blue);background:var(--paper)}
.btn-white{background:#fff;color:var(--blue)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* --------------------------------------------------------------------------
   6. Focus
   -------------------------------------------------------------------------- */
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:4px}

/* --------------------------------------------------------------------------
   7. Sterile grid texture
   -------------------------------------------------------------------------- */
.grid-tex{position:absolute;inset:0;background-image:
    linear-gradient(rgba(24,64,152,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(24,64,152,.05) 1px,transparent 1px);
  background-size:36px 36px;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 100% at 80% 0%,#000,transparent 72%);
          mask-image:radial-gradient(120% 100% at 80% 0%,#000,transparent 72%)}

/* --------------------------------------------------------------------------
   8. Trust strip (injected by js/nav.js)
   -------------------------------------------------------------------------- */
.trust{background:var(--navy);color:#c3d0ee}
.trust .wrap{display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;padding:.55rem 26px;font-family:var(--fm);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.trust span{display:inline-flex;align-items:center;gap:.5rem}
.trust .dot{width:5px;height:5px;border-radius:50%;background:var(--mint)}

/* --------------------------------------------------------------------------
   9. Header and desktop navigation (injected by js/nav.js)
   -------------------------------------------------------------------------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
/* The menu sits with the Request Quote button, not centred between the two:
   the auto margin absorbs the free space after the wordmark, so the links and
   the CTA read as one block on the right. */
.nav{display:flex;align-items:center;padding:.7rem 26px;max-width:1200px;margin:0 auto;transition:padding .25s var(--ease)}
.nav>nav{margin-left:auto}
/* Floor for the gap the auto margin would otherwise close entirely on the
   narrowest desktop widths, where the wordmark and the first link meet. */
.nav>.logo{margin-right:1.5rem;flex:none}
header.shrink .nav{padding:.5rem 26px}
.logo{display:flex;align-items:center;gap:.65rem}
.logo img{height:36px;width:auto;display:block}
.logo .wm{font-family:var(--fd);font-weight:700;font-size:1.1rem;color:var(--ink);line-height:1;letter-spacing:-.02em}
.logo .wm small{display:block;font-family:var(--fm);font-weight:400;font-size:.57rem;letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase;margin-top:4px}
nav ul{display:flex;align-items:center;gap:.05rem;list-style:none}
nav ul li>a{padding:.55rem .8rem;border-radius:8px;font-weight:500;font-size:.93rem;color:var(--ink);display:inline-flex;align-items:center;gap:.35rem;position:relative}
nav ul li>a:hover{color:var(--blue)}
nav ul li>a.active{color:var(--blue)}
nav ul li>a.active::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;background:var(--red);border-radius:2px}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);min-width:290px;padding:.55rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s var(--ease)}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .7rem;border-radius:10px;color:var(--ink-soft)}
/* Hairline between entries, inset by the menu padding */
.dropdown-menu a + a{border-top:1px solid var(--line)}
.dropdown-menu a:hover{background:var(--paper)}
.dropdown-menu .mi{width:30px;height:30px;border-radius:8px;background:var(--mint-soft);color:var(--teal);display:grid;place-items:center;flex:none}
.dropdown-menu .mi svg{width:16px;height:16px}
.dropdown-menu strong{display:block;color:var(--ink);font-weight:600;font-size:.9rem;font-family:var(--fd);line-height:1.35}
.dropdown-menu span{display:block;font-size:.78rem;line-height:1.4;margin-top:.15rem}
/* A chevron, not the ▾ glyph: at .6rem that character rendered as a speck
   and its size varies by font. Rotates when the menu is open. */
.caret{width:11px;height:11px;flex:none;opacity:.7;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.dropdown>a:hover .caret,.dropdown>a.active .caret{opacity:1}
.dropdown:hover .caret,.dropdown:focus-within .caret{transform:rotate(180deg);opacity:1}
.nav-cta{display:flex;align-items:center;gap:.8rem;margin-left:1.25rem}
/* The CTA is a pill: let it run out of the row rather than wrap into a blob. */
.nav-cta .btn{white-space:nowrap;flex:none}
.hamburger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px}
.hamburger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease)}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   10. Mobile menu (hidden until the 940px breakpoint below)
   -------------------------------------------------------------------------- */
.mobile-menu{display:none}

/* --------------------------------------------------------------------------
   11. Section scaffolding
   -------------------------------------------------------------------------- */
section.block{padding:88px 0}
/* Any section that can be linked to clears the sticky header when jumped to.
   Individual cards that are anchor targets set this for themselves. */
section[id]{scroll-margin-top:90px}
.sec-head{max-width:720px;margin-bottom:46px}
.sec-head.center{margin:0 auto 52px;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-size:2.35rem;margin:.85rem 0 .6rem;font-weight:700}
.sec-head p{color:var(--ink-soft);font-size:1.08rem}
.alt{background:linear-gradient(180deg,var(--paper) 0%,#fff 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* --------------------------------------------------------------------------
   12. RFQ / CTA band

   The band is injected by js/ui/rfq.js; pages pass only their copy and CTA
   targets. Everything visual is defined here so the card looks identical on
   every page. Two themes and an optional right-hand watermark cover the
   variants that previously lived in per-page <style> blocks.
   -------------------------------------------------------------------------- */
.cta-wrap{padding:0 26px;max-width:1200px;margin:0 auto}
.cta-band{position:relative;overflow:hidden;background:
    radial-gradient(640px 340px at 88% 6%,rgba(232,24,32,.34),transparent 60%),
    linear-gradient(120deg,var(--blue) 0%,var(--blue-dark) 55%,var(--navy) 100%);
    color:#fff;border-radius:30px;padding:64px 52px;text-align:center;box-shadow:var(--shadow-lg)}
.cta-band .crings{position:absolute;left:-56px;bottom:-64px;width:270px;opacity:.14;pointer-events:none}
.cta-band .eyebrow{color:var(--mint);justify-content:center;position:relative}
.cta-band .eyebrow::before{background:var(--mint)}
.cta-band h2{color:#fff;font-size:2.4rem;font-weight:700;margin:.65rem 0 .8rem;position:relative}
.cta-band p{color:#dbe3f7;max-width:44rem;margin:0 auto 2rem;position:relative}
.cta-band .cta-btns{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;position:relative}
.cta-band .hero-cta{justify-content:center;position:relative}

/* Theme: deeper navy, no red wash (DECONTI) */
.cta-band--navy{background:linear-gradient(135deg,var(--blue-dark) 0%,var(--navy) 60%,var(--navy2) 100%)}

/* Watermark in the opposite corner */
.cta-band--rings-right .crings{left:auto;right:-46px;bottom:-56px;opacity:.12}

/* Optional direct-contact line under the buttons */
.cta-band .contact-line{margin-top:1.6rem;font-family:var(--fm);font-size:.8rem;letter-spacing:.06em;color:#aebbde;position:relative}
.cta-band .contact-line a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}

/* Optional signature line under the card */
.cta-band .brand-sign{display:block;margin-top:1.8rem;font-family:var(--fm);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);position:relative}

/* Extra breathing room when the card closes the page */
.rfq-block--tail{padding-bottom:96px}

/* --------------------------------------------------------------------------
   13. Footer (injected by js/footer.js)
   -------------------------------------------------------------------------- */
footer{background:var(--navy2);color:#95a2c8;padding:66px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}
footer h5{font-family:var(--fm);color:#fff;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:500}
footer ul{list-style:none}
footer ul li{margin-bottom:.6rem;font-size:.9rem}
footer ul li a:hover{color:var(--mint)}
.foot-brand .logo{margin-bottom:1rem}
.foot-brand .logo img{height:40px;background:#fff;border-radius:9px;padding:6px 9px}
.foot-brand p{font-size:.88rem;max-width:23rem;margin-bottom:1.1rem;color:#95a2c8}
.foot-cert{display:flex;flex-wrap:wrap;gap:.5rem}
.foot-cert span{font-family:var(--fm);font-size:.64rem;letter-spacing:.06em;border:1px solid rgba(255,255,255,.18);padding:.3rem .55rem;border-radius:7px;color:#c2cdec}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.8rem;font-family:var(--fm);letter-spacing:.04em}
.foot-bottom .tag{color:var(--mint)}

/* --------------------------------------------------------------------------
   14. Motion
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hi{opacity:0;animation:heroIn .85s var(--ease) forwards}
.hi.d1{animation-delay:.05s}.hi.d2{animation-delay:.14s}.hi.d3{animation-delay:.24s}.hi.d4{animation-delay:.34s}.hi.d5{animation-delay:.2s}
@media(prefers-reduced-motion:reduce){.reveal,.hi{opacity:1!important;transform:none!important;animation:none!important}}

/* --------------------------------------------------------------------------
   15. Breakpoint: 940px: desktop nav collapses into the mobile panel
   -------------------------------------------------------------------------- */
/* Tighten the links just above the mobile breakpoint, where the menu, the
   wordmark and the CTA are competing for the same row. */
@media(max-width:1080px){
  nav ul li>a{padding:.55rem .55rem}
  nav ul li>a.active::after{left:.55rem;right:.55rem}
  .nav>.logo{margin-right:1rem}
  .nav-cta{margin-left:1rem}
  .nav-cta .btn{padding:.8rem 1.15rem}
}

@media(max-width:940px){
  nav ul{display:none}
  .hamburger{display:flex}
  section.block{padding:64px 0}
  .foot-grid{grid-template-columns:1fr 1fr}

  .mobile-menu{display:block;position:fixed;inset:0 0 auto 0;z-index:45;background:#fff;
    transform:translateY(-102%);transition:transform .34s var(--ease);visibility:hidden;
    padding:94px 26px 34px;box-shadow:var(--shadow-lg);max-height:100dvh;overflow-y:auto}
  .mobile-menu.open{transform:translateY(0);visibility:visible}
  .mm-link{display:block;font-family:var(--fd);font-weight:600;font-size:1.18rem;color:var(--ink);padding:.85rem 0;border-bottom:1px solid var(--line)}
  .mm-link.active{color:var(--blue)}
  .mm-acc{border-bottom:1px solid var(--line)}
  .mm-acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:0;cursor:pointer;font-family:var(--fd);font-weight:600;font-size:1.18rem;color:var(--ink);padding:.85rem 0;text-align:left}
  .mm-acc-head svg{width:22px;height:22px;color:var(--ink-soft);transition:transform .3s var(--ease);flex:none}
  .mm-acc.open .mm-acc-head{color:var(--blue)}
  .mm-acc.open .mm-acc-head svg{transform:rotate(180deg);color:var(--blue)}
  .mm-acc-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
  .mm-acc-body a{display:block;font-family:var(--fb);font-weight:500;font-size:1rem;color:var(--ink-soft);padding:.5rem 0 .5rem .95rem;border-left:2px solid var(--line);margin-left:2px}
  .mm-acc-body a:first-child{margin-top:.3rem}
  .mm-acc-body a:last-child{margin-bottom:.9rem}
  .mm-acc-body a:hover{color:var(--blue);border-color:var(--mint)}
  .mobile-menu .btn{width:100%;justify-content:center;margin-top:1.5rem;font-size:1.02rem;padding:1rem}
}

/* --------------------------------------------------------------------------
   16. Breakpoint: 600px: phone
   -------------------------------------------------------------------------- */
@media(max-width:600px){
  .wrap{padding:0 20px}
  section.block{padding:54px 0}
  .trust .wrap{gap:.4rem 1rem;font-size:.64rem;padding:.5rem 20px}
  .logo .wm small{display:none}
  .logo .wm{font-size:1rem}
  .logo img{height:32px}
  .sec-head h2{font-size:1.72rem}
  .cta-band{padding:40px 24px;border-radius:22px}
  .cta-band h2{font-size:1.85rem}
  .cta-band p{font-size:.97rem}
  .cta-band .cta-btns{flex-direction:column;align-items:stretch;gap:.65rem}
  .cta-band .cta-btns .btn{width:100%;justify-content:center}
  .rfq-block--tail{padding-bottom:64px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .nav-cta .btn{display:none}
  body.menu-open{overflow:hidden}
}
