/* ==========================================================================
   CriticaLog 2026 — production stylesheet
   Single drop-in file. Load AFTER assets/css/styles1.min.css.

   This is the exact combination selected from the mockup:
     Styling      Apple-informed
     Appearance   Light
     Palette      B (Navy-Led)
     AA-safe      ON

   Palette (all values below derive from these two):
     Navy    #044E78   C:100 M:70 Y:30 K:15
     Orange  #F26522   C:0   M:75 Y:100 K:0

   NOTE ON THE ACTIONS COLOUR
   With AA-safe on, orange actions deepen from #F26522 to #C74A12 so white
   labels clear 4.5:1 (they measure 4.75:1; pure #F26522 measures 3.15:1 and
   fails). Pure brand orange is retained wherever it carries no text —
   rules, list markers, the logo itself.

   Nothing in styles1.min.css is edited. Remove the one <link> in header.php
   and the site reverts exactly.
   ========================================================================== */

:root{
  /* ---- brand constants ---- */
  --cl-navy:#044E78;
  --cl-navy-deep:#02273C;
  --cl-navy-mid:#033E60;
  --cl-orange:#F26522;          /* fills and rules only — never behind text */
  --cl-orange-action:#C74A12;   /* AA-safe: white label on this = 4.75:1 */
  --cl-orange-hover:#A94718;
  --cl-orange-soft:#FDF0E8;

  /* ---- Bootstrap variable overrides ---- */
  --bs-primary:#C74A12;
  --bs-primary-rgb:199,74,18;
  --bs-primary-text-emphasis:#7A330F;
  --bs-primary-bg-subtle:#FDE8DE;
  --bs-primary-border-subtle:#F9C0A3;
  --bs-secondary:#02273C;
  --bs-secondary-rgb:2,39,60;
  --bs-secondary-text-emphasis:#01141E;
  --bs-secondary-bg-subtle:#CCD4D8;
  --bs-secondary-border-subtle:#99A9B1;
  --bs-link-color:#044E78;
  --bs-link-color-rgb:4,78,120;
  --bs-link-hover-color:#C74A12;
  --bs-link-hover-color-rgb:199,74,18;
  --bs-border-radius:12px;

  /* ---- semantic surfaces ---- */
  --surface-0:#FFFFFF;
  --surface-1:#F4F6F8;
  --surface-2:#FFFFFF;
  --text-1:#0B1B26;
  --text-2:#5A6672;   /* 5.87:1 on white — replaces #828282 at 3.84:1 */
  --text-3:#7C8894;
  --hairline:rgba(11,27,38,.10);

  /* ---- type ---- */
  --cl-font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",
               Roboto,system-ui,sans-serif;
  --cl-font-display:Saira,var(--cl-font-ui);

  /* ---- 8pt grid, radii, elevation, motion ---- */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --sp-6:32px;--sp-7:40px;--sp-8:56px;--sp-9:72px;--sp-10:96px;
  --r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:26px;--r-pill:999px;
  --el-1:0 1px 2px rgba(11,27,38,.05),0 1px 1px rgba(11,27,38,.05);
  --el-2:0 4px 14px rgba(11,27,38,.07),0 1px 3px rgba(11,27,38,.05);
  --el-3:0 14px 38px rgba(11,27,38,.11),0 3px 10px rgba(11,27,38,.06);
  --ease:cubic-bezier(.32,.72,0,1);
  --dur-fast:.18s;--dur:.32s;

  /* ---- Liquid Glass, functional layer only ---- */
  --glass-bg:rgba(255,255,255,.72);
  --glass-blur:30px;
  --glass-sat:1.6;

  /* ---- header geometry, driven by the stacked lockup (see §2) ---- */
  --hdr-logo-w:176px;
  --hdr-pad:14px;
}

/* ==========================================================================
   1 · TYPOGRAPHY
   One UI family plus Saira for display. Poppins and Rubik are retired —
   remove their <link> tags in header.php too (see the deploy guide).
   ========================================================================== */
body{
  font-family:var(--cl-font-ui);
  font-size:17px;
  line-height:1.53;
  letter-spacing:-.006em;
  color:var(--text-2);
  background:var(--surface-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--cl-font-display);
  color:var(--cl-navy);
  font-weight:700;
  letter-spacing:-.021em;
  line-height:1.14;
}
h1,.banner-title{font-size:clamp(2.6rem,5.2vw,4.25rem);letter-spacing:-.032em;line-height:1.04}
h2,.fs-2{font-size:clamp(1.9rem,3.2vw,2.6rem)!important;letter-spacing:-.026em}
h3{font-size:clamp(1.45rem,2.2vw,1.85rem)}
h4,.fs-5{font-size:1.3125rem!important;font-weight:600;letter-spacing:-.014em}
.banner-text{font-size:1.25rem;line-height:1.45;letter-spacing:-.01em}
p{max-width:68ch}
.text-center p,.container-narrow p{margin-inline:auto}
.container-narrow{max-width:760px}
.ftsz,.almove p{color:var(--text-2)}
small,.small{font-size:.8125rem;color:var(--text-3)}

/* eyebrow labels */
.text-primary{color:var(--cl-orange-action)!important}
.text-primary.fw-semibold{
  font-family:var(--cl-font-ui);font-size:.9375rem!important;font-weight:600;
  letter-spacing:.01em;text-transform:none
}
.counter-value,.stats-main h2{color:var(--cl-orange-hover)}
.ftsz,.footer-menu,.cont-inf{font-family:var(--cl-font-ui)}

/* ==========================================================================
   2 · HEADER — rebuilt for the stacked lockup
   The supplied logo is 1.768:1 (4228x2391). The lockup it replaces was
   4.3:1. At the old 250px width it would render 141px tall and break the
   navbar, so the header is rebuilt around it instead of shrinking it to
   illegibility:
     · logo 176px wide (100px tall) at rest, header ~128px
     · compacts to 132px wide (75px tall), header ~92px, once you scroll
     · the nav breakpoint moves from -md to -xl, so the burger appears
       below 1200px where the taller logo would otherwise crowd the menu
   ========================================================================== */
/* The <header> element is what sticks, not .main-header. A sticky element is
   always bounded by its parent's box, so pinning .main-header alone lets the
   whole bar scroll away once <header> ends. Sticking <header> with a negative
   top equal to the contact bar's height lets that bar scroll out of view while
   the main bar pins. --hdr-top-h is measured at runtime (see the JS). */
header{position:sticky;top:calc(-1 * var(--hdr-top-h,0px));z-index:1030}
.main-header{
  padding:var(--hdr-pad) 0;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom:1px solid transparent;
  transition:padding var(--dur) var(--ease),border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
/* HIG scroll edge — the divider appears only once content passes beneath */
.main-header.is-scrolled{border-bottom-color:var(--hairline)}
.main-header.is-scrolled{--hdr-logo-w:132px;--hdr-pad:8px}
.main-header .navbar{background:transparent!important;padding-top:0;padding-bottom:0}
.critica-logo-img{
  width:var(--hdr-logo-w);height:auto;
  transition:width var(--dur) var(--ease)
}
.navbar-brand{padding-top:0;padding-bottom:0;margin-right:var(--sp-5)}
.main-header .navbar>.container,.main-header .navbar>.container-fluid{flex-wrap:wrap;row-gap:var(--sp-2)}

/* Reading order in the header bar. The theme's DOM order is brand, CTA,
   toggler, menu; flex order puts the menu where it belongs on wide screens
   without touching the markup. */
@media (min-width:1200px){
  .main-header .navbar>.container,.main-header .navbar>.container-fluid{justify-content:space-between}
  .main-header .navbar-brand{order:1}
  .main-header .navbar-collapse{order:2;flex-grow:0;flex-basis:auto}
  .main-header .book-now-container{order:3;margin-left:var(--sp-5)}
  .main-header .navbar-nav{margin-left:0!important}
}
@media (max-width:1199.98px){
  .main-header .navbar-brand{order:1}
  .main-header .book-now-container{order:2;margin-left:auto}
  .main-header .navbar-toggler{order:3;margin-left:var(--sp-3)}
  .main-header .navbar-collapse{order:4;flex-basis:100%}
}

.header-top{background:var(--surface-1);border-bottom:1px solid var(--hairline);font-size:.8125rem}
.header-top .address{padding:6px 10px}

.nav-link{
  font-family:var(--cl-font-ui);font-weight:500;font-size:.95rem;letter-spacing:-.01em;
  padding:.6rem .7rem;border-radius:var(--r-sm);color:var(--text-1);
  min-height:44px;display:flex;align-items:center;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)
}
.nav-link:hover,.nav-link:focus{background:var(--hairline);color:var(--cl-navy)}
.navbar-nav{font-family:var(--cl-font-ui);align-items:center}
.navbar-toggler{border-color:var(--hairline);padding:.5rem .7rem}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(4,78,120,.25)}

/* dropdowns inherit the same surface treatment */
.dropdown-menu{
  border:1px solid var(--hairline);border-radius:var(--r-md);
  box-shadow:var(--el-3);padding:var(--sp-2);margin-top:var(--sp-2)
}
.dropdown-item{border-radius:var(--r-sm);padding:.55rem .8rem;font-size:.92rem;min-height:40px}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-1);color:var(--cl-navy)}

@media (max-width:1199.98px){
  :root{--hdr-logo-w:150px}
  .main-header.is-scrolled{--hdr-logo-w:124px}
  .navbar-collapse{
    background:var(--surface-0);border:1px solid var(--hairline);
    border-radius:var(--r-md);box-shadow:var(--el-2);
    margin-top:var(--sp-3);padding:var(--sp-2)
  }
  .navbar-nav{align-items:stretch}
}
@media (max-width:575.98px){
  :root{--hdr-logo-w:124px;--hdr-pad:10px}
  .main-header.is-scrolled{--hdr-logo-w:104px}
}

/* reduced transparency / unsupported backdrop-filter → opaque header */
@media (prefers-reduced-transparency:reduce){
  .main-header{background:var(--surface-0);-webkit-backdrop-filter:none;
    backdrop-filter:none;border-bottom-color:var(--hairline)}
}
@supports not (backdrop-filter:blur(1px)){
  .main-header{background:var(--surface-0)}
}

/* ==========================================================================
   3 · CONTROLS
   ========================================================================== */
.btn{
  font-family:var(--cl-font-ui);font-weight:600;letter-spacing:-.008em;
  border-radius:var(--r-pill);padding:.75rem 1.6rem;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease)
}
.btn-lg{padding:.95rem 2rem;font-size:1.0625rem;min-height:52px}
.btn:active{transform:scale(.97)}

.btn-primary{
  --bs-btn-color:#fff;--bs-btn-bg:var(--cl-orange-action);
  --bs-btn-border-color:var(--cl-orange-action);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--cl-orange-hover);
  --bs-btn-hover-border-color:var(--cl-orange-hover);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--cl-orange-hover);
  --bs-btn-active-border-color:var(--cl-orange-hover);
  --bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:var(--cl-orange-action);
  --bs-btn-disabled-border-color:var(--cl-orange-action);
  --bs-btn-focus-shadow-rgb:199,74,18;
  background-color:var(--cl-orange-action);border-color:var(--cl-orange-action);color:#fff;
  box-shadow:var(--el-1)
}
.btn-primary:hover{box-shadow:var(--el-2)}
.btn-outline-primary{
  --bs-btn-color:var(--cl-orange-action);--bs-btn-border-color:var(--cl-orange-action);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--cl-orange-action);
  --bs-btn-hover-border-color:var(--cl-orange-action);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--cl-orange-action);
  --bs-btn-active-border-color:var(--cl-orange-action);
  --bs-btn-disabled-color:var(--cl-orange-action);
  --bs-btn-disabled-border-color:var(--cl-orange-action)
}
.btn-secondary{
  --bs-btn-bg:var(--cl-navy);--bs-btn-border-color:var(--cl-navy);
  --bs-btn-hover-bg:var(--cl-navy-mid);--bs-btn-hover-border-color:var(--cl-navy-mid);
  --bs-btn-active-bg:var(--cl-navy-mid);--bs-btn-active-border-color:var(--cl-navy-mid);
  --bs-btn-disabled-bg:var(--cl-navy);--bs-btn-disabled-border-color:var(--cl-navy)
}
.btn-outline-secondary{
  --bs-btn-color:var(--cl-navy);--bs-btn-border-color:var(--cl-navy);
  --bs-btn-hover-bg:var(--cl-navy);--bs-btn-hover-border-color:var(--cl-navy);
  --bs-btn-active-bg:var(--cl-navy);--bs-btn-active-border-color:var(--cl-navy);
  --bs-btn-disabled-color:var(--cl-navy);--bs-btn-disabled-border-color:var(--cl-navy)
}
.btn:hover{
  background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);
  color:var(--bs-btn-hover-color)
}

/* Book Your Shipment — the one primary action carrying colour in the header.
   !important is required because these rules live in an inline <style> block
   inside header.php. The deploy guide has the cleaner alternative. */
.book-now-btn{
  background-color:var(--cl-orange-action)!important;
  border-radius:var(--r-pill)!important;
  font-family:var(--cl-font-ui)!important;
  font-weight:600!important;font-size:.9375rem!important;
  padding:.7rem 1.4rem!important;min-height:44px;
  display:inline-flex!important;align-items:center;
  box-shadow:var(--el-2);
  animation:none!important;              /* kills the infinite pulse */
  transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)
}
.book-now-btn:hover{background-color:var(--cl-orange-hover)!important;transform:translateY(-1px)}

/* the "New" badge stops blinking — WCAG 2.2.2 and HIG Motion */
.badge-new{
  animation:none!important;position:static!important;
  display:inline-flex;align-items:center;margin-left:var(--sp-2);
  background:var(--hairline)!important;color:var(--text-2)!important;
  border-radius:var(--r-pill)!important;padding:.2rem .55rem!important;
  font-size:.6875rem!important;font-weight:600;letter-spacing:.02em
}
.book-now-container{display:inline-flex!important;align-items:center}

/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--cl-navy);outline-offset:3px;border-radius:var(--r-sm)
}
.accordion-button:focus-visible{box-shadow:0 0 0 3px rgba(4,78,120,.3)}

/* form controls */
.form-control,.form-select{
  border-radius:var(--r-md);border-color:var(--hairline);min-height:48px;
  font-family:var(--cl-font-ui);font-size:1rem;padding:.7rem 1rem
}
.form-control:focus,.form-select:focus{
  border-color:var(--cl-navy);box-shadow:0 0 0 3px rgba(4,78,120,.16)
}

/* ==========================================================================
   4 · CONTENT LAYER — standard materials, never glass
   ========================================================================== */
section{padding-block:var(--sp-10)}
.stats-main{
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:var(--r-xl);box-shadow:var(--el-3);
  overflow:hidden;padding:var(--sp-3) 0
}
.sec-whychoose,.tab-txt{background:var(--surface-1)}
.sec-whychoose{border-block:1px solid var(--hairline)}
.cor-serv-img-inr,.tech-enabled-img,.my_card .flipper,.vision,
.icon-w-txt,.track-order,.tab-txt,.guide-inner img,.post-img img{
  border-radius:var(--r-lg);overflow:hidden
}
.cor-serv-img-inr{box-shadow:var(--el-2)}
.cor-serv-img{transition:transform var(--dur) var(--ease)}
.cor-serv-img:hover{transform:translateY(-4px)}
.cor-serv-img-inr p{background-color:rgba(2,39,60,.62);transition:.42s var(--ease)}
.vision,.icon-w-txt{border:1px solid var(--hairline);background:var(--surface-1)}
.icon-w-txt{border-color:var(--cl-orange)}

.list-border{
  border-top-color:var(--hairline);padding:var(--sp-3) 0;
  min-height:44px;display:flex;align-items:center
}
.list-border a{color:var(--text-1)}
.list-border a:hover{color:var(--cl-orange-action)}
.list-arrow li:before{color:var(--cl-orange)}
@media (min-width:768px){.br-rgt{border-right-color:var(--cl-orange)}}

.bs-icon.bs-icon-primary{background:var(--cl-orange-action);color:#fff}
.bs-icon.bs-icon-primary-light{color:var(--cl-orange-action);background:rgba(199,74,18,.12)}
.bs-icon{color:var(--cl-orange-action)}
.front{background:var(--cl-navy)}
.back{background:var(--cl-orange-action)}
.flipper{transition:.55s var(--ease)}

.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{
  background-color:var(--cl-navy);border-color:var(--cl-navy);color:#fff
}
.track .step.active::before,.track .step.active .icon{background:var(--cl-orange-action)}

/* the floating chrome */
.back-to-top .btn{
  background:var(--glass-bg)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--hairline)!important;
  color:var(--text-1)!important;border-radius:var(--r-pill)
}
.buttonizer-button a{border-radius:var(--r-pill)}

/* ==========================================================================
   5 · OVERLAYS
   Deep navy at 82%, and the hero uses a bottom-weighted gradient so the
   photograph survives while headline contrast improves.
   ========================================================================== */
.expertise:after,.overlay:after,.page-header:after,.cta-section:after{
  background-color:var(--cl-navy-deep);opacity:.82
}
.overlay:after,.page-header:after{
  background:linear-gradient(180deg,rgba(2,39,60,.58) 0%,rgba(2,39,60,.88) 100%);
  opacity:1
}
.slide-overlay{min-height:74vh}
.banner-title{max-width:19ch}
.banner-text{max-width:46ch}

/* ==========================================================================
   6 · FOOTER
   The stacked lockup sits naturally here. The footer-btm bar stays white, so
   the full-colour logo is correct; the knockout is supplied for dark use.
   ========================================================================== */
footer.bg-secondary{background-color:var(--cl-navy-deep)!important}
footer.bg-secondary h3{color:#fff}
.contact-info-item{border-bottom-color:rgba(255,255,255,.14)}
/* the address is a flex item with a long unbroken place name; without
   these it pushes the footer wider than the viewport at ~768px */
.contact-info-item span{min-width:0;overflow-wrap:anywhere}
@media (min-width:768px){.br-rgt-drk{border-right-color:rgba(255,255,255,.14)}}
.cont-inf,.cont-inf a,.ft-links ul li a{color:#C9D6DE!important}
.cont-a:hover,.ft-links ul li a:hover,.list-article li a:hover{color:var(--cl-orange)!important}
.footer-menu li a,.ft-links ul li a{display:inline-flex;align-items:center;min-height:34px}
.social-icons a{width:40px;height:40px;line-height:40px;border-radius:var(--r-pill)}
.footer-btm{background:var(--surface-0)}
.footer-btm img{max-width:150px;height:auto}
.footer-btm-left,.footer-btm-right{border-top-color:var(--hairline)}

/* ==========================================================================
   7 · MOTION
   ========================================================================== */
a,button,.guide-inner img,.post-img img{
  transition-timing-function:var(--ease);transition-duration:var(--dur)
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
  .flipper:hover{transform:none}
  [data-aos]{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   8 · PRINT — consignment details and contact pages get printed a lot
   ========================================================================== */
@media print{
  .main-header,.header-top,.back-to-top,.buttonizer-button,.great-place,
  .book-now-container,footer{display:none!important}
  body{font-size:11pt;color:#000}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ==========================================================================
   9 · RECONCILIATION WITH styles1.min.css
   Leftover hardcoded values in the existing theme that the sections above
   don't already reach. Grouped here so they're easy to audit later.
   ========================================================================== */

/* remaining Saira body text — the type system is one UI family plus display */
.cor-serv-img a,.fam-saira,.navbar-nav,.btn{font-family:var(--cl-font-ui)}
.cor-serv-img a{font-weight:600;font-size:1rem;color:var(--cl-navy)}
.cor-serv-img a:hover{color:var(--cl-orange-action)}
.almove h3{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:700}

/* the theme sets letter-spacing:1px on headings, buttons and nav links —
   tracking should tighten as type grows, not loosen */
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{letter-spacing:-.021em}
.btn,.nav-link{letter-spacing:-.008em}

/* black overlay on expertise headers → deep navy, for one overlay colour */
.expertise-header:after{background-color:var(--cl-navy-deep);opacity:.82}

/* list markers and dividers */
.list-article li{border-bottom-color:var(--hairline)}
.list-article li:before{color:var(--cl-orange)}
.accordion-item{border-bottom-color:var(--hairline)}
.vision{border-color:var(--hairline)}
.guide-inner p{border-color:var(--hairline)}
.track-order{border-color:var(--hairline)}
.track{background-color:var(--hairline);border-bottom-color:var(--hairline)}
.track .icon,.track1 .icon{background:#DCE3E8}

/* the tracking widget signals status by colour alone — add a shape so the
   state survives for colour-blind users (HIG Accessibility) */
.track .step.active .icon:after{
  content:"\2713";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:1rem
}

/* section rhythm: the theme's 2rem/3.125rem is tighter than the 8pt scale */
@media (min-width:1200px){section{padding-top:var(--sp-10);padding-bottom:var(--sp-10)}}

/* header-top spacing on the 8pt grid */
.header-top-inr{padding:var(--sp-2) 0;gap:var(--sp-4)}

/* the white bar that lets .stats-main overlap needs to match the new surface */
.sec-always:after{background-color:var(--surface-0)}

/* card hover uses a magic pixel value that breaks at other card heights */
@media (min-width:768px){
  .cor-serv-img-inr p{bottom:auto;top:0;transform:translateY(100%);font-size:.8125rem}
  .cor-serv-img:hover p{transform:translateY(0)}
}


/* ==========================================================================
   10 · HERO SLIDER
   Replaces the Swiper dependency. Slides cross-fade; several banners are
   designed artwork with the copy already in the image, so the text overlay
   only renders when the CMS fields carried something.
   ========================================================================== */
.cl-slider{position:relative;overflow:hidden}
.cl-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.cl-slide.is-active{position:relative;opacity:1;pointer-events:auto}
.cl-slider .slide-img{background-size:cover;background-position:center}
/* slides that are finished artwork show whole, at their own aspect ratio */
.cl-slide .cl-art{width:100%;height:auto;display:block}
.cl-slider .slide-overlay{min-height:clamp(320px,46vw,660px)}
.cl-dots{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:center;
  gap:10px;z-index:10}
.cl-dot{width:10px;height:10px;border-radius:var(--r-pill);border:0;padding:0;
  background:rgba(255,255,255,.45);cursor:pointer;transition:.25s var(--ease)}
.cl-dot.is-active{background:var(--cl-orange);width:26px}
.cl-dot:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.cl-slide{transition:none}}


/* ==========================================================================
   11 · MULTI-LEVEL MENU
   The old menu nests six deep (About > Investors > Financial Statement >
   FY 20xx-xx > document). Bootstrap only does one level, so submenus flyout
   on wide screens and indent inline on narrow ones.
   ========================================================================== */
.cl-submenu{position:absolute;top:0;left:100%;margin:0 0 0 2px;display:none}
.cl-has-sub{position:relative}
.cl-has-sub>.dropdown-item{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cl-caret{opacity:.5;font-size:.8em}
@media (min-width:1200px){
  .cl-has-sub:hover>.cl-submenu,
  .cl-has-sub:focus-within>.cl-submenu{display:block}
  .dropdown-menu{min-width:250px}
  /* flip the last columns back inwards so deep branches stay on screen */
  .navbar-nav>.nav-item:nth-last-child(-n+3) .cl-submenu{left:auto;right:100%;margin:0 2px 0 0}
}
@media (max-width:1199.98px){
  /* no hover on touch: show every level, indented */
  .main-header .dropdown-menu{display:block;position:static;border:0;box-shadow:none;
    padding:0 0 0 var(--sp-4);margin:0;background:transparent}
  .main-header .cl-submenu{display:block;position:static;margin:0 0 0 var(--sp-4)}
  .main-header .dropdown-toggle::after{display:none}
  .main-header .dropdown-item{white-space:normal}
  .cl-caret{display:none}
}

/* ==========================================================================
   12 · FLOATING CHROME
   Great Place To Work badge and the careers shortcut, both carried over.
   ========================================================================== */
.great-place{position:fixed;left:16px;bottom:16px;z-index:1020;width:clamp(70px,8vw,104px)}
.great-place img{width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(11,27,38,.22))}
.buttonizer-button{position:fixed;right:16px;bottom:76px;z-index:1020}
.buttonizer-button a{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:var(--r-pill);background:var(--cl-navy);color:#fff;
  box-shadow:var(--el-2);transition:transform var(--dur-fast) var(--ease)}
.buttonizer-button a:hover{transform:translateY(-2px);color:#fff}
.back-to-top{position:fixed;right:16px;bottom:16px;z-index:1020}
@media (max-width:575.98px){
  .great-place{width:62px;left:10px;bottom:10px}
  .buttonizer-button{right:10px;bottom:66px}
  .back-to-top{right:10px;bottom:10px}
}
@media print{.great-place{display:none!important}}