/* ==========================================================================
   CHRICEL LOGISTICS LIMITED — Core Design System
   Integrated Solutions. Sustainable Excellence.
   ==========================================================================
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons & chips
   6.  Header / navigation / mega menu / drawer
   7.  Hero
   8.  Section headings
   9.  Cards
   10. Stats, steps, lists, quote
   11. Feature split, media frames
   12. Forms
   13. Accordion, table
   14. CTA bands
   15. Footer
   16. Utilities & motion
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root{
  /* Brand */
  --navy-950:#060F22;
  --navy-900:#0B1C3A;
  --navy-850:#0E2245;
  --navy-800:#10254A;
  --navy-700:#16305C;
  --navy-600:#1D3E74;
  --blue-600:#1E5FA8;
  --blue-500:#2E7DD1;
  --blue-400:#5AA3E8;
  --blue-100:#E7F1FC;
  --blue-050:#F2F8FE;
  --red-600:#C41818;
  --red-500:#E02020;
  --red-400:#F04438;
  --amber-500:#F5A524;
  --amber-400:#FBBF4C;
  --teal-600:#0E7F7F;
  --green-500:#12855A;

  /* Neutrals */
  --ink:#0F1A2B;
  --slate-700:#3D4A5C;
  --slate-600:#556377;
  --slate-500:#6B7A90;
  --slate-400:#8D9AAE;
  --line:#E3E8F0;
  --line-soft:#EEF2F7;
  --mist:#F5F7FA;
  --mist-2:#FAFBFD;
  --white:#FFFFFF;

  /* Type */
  --font-display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Space scale */
  --s-1:4px; --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:104px;

  /* Radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Shadows */
  --sh-xs:0 1px 2px rgba(15,26,43,.06);
  --sh-sm:0 2px 8px rgba(15,26,43,.07);
  --sh-md:0 10px 30px -12px rgba(11,28,58,.22);
  --sh-lg:0 26px 60px -24px rgba(11,28,58,.32);
  --sh-xl:0 40px 90px -34px rgba(11,28,58,.42);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.42s;

  /* Structure */
  --header-h:84px;
  --topbar-h:40px;
  --maxw:1240px;
}

/* --------------------------------------------------------- 2. Reset & base */
*,*::before,*::after{box-sizing:border-box}

/* The horizontal clip has to sit on the root element, not only on the body.
   `overflow-x:hidden` on the body does not contain a `position:fixed` child, so
   the off-canvas mobile drawer - parked off the right edge with
   translateX(102%) - extended the scroll box of the page and produced a phantom
   horizontal scrollbar at every viewport width. On the root element it is
   contained for good.

   `overflow-x:clip` is preferred where supported: unlike `hidden` it does not
   turn the element into a scroll container, so the document keeps scrolling
   normally and `position:sticky` (used by the header) is unaffected. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:110px;
  overflow-x:hidden;
  overflow-x:clip;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.7;
  color:var(--slate-700);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
img{image-rendering:auto}
a{color:var(--blue-600);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--red-500)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{margin:0 0 var(--s-5);padding-left:1.15rem}
li{margin-bottom:.4rem}
hr{border:0;height:1px;background:var(--line);margin:var(--s-9) 0}
::selection{background:var(--blue-500);color:#fff}
:focus-visible{outline:3px solid var(--amber-500);outline-offset:3px;border-radius:4px}

/* -------------------------------------------------------------- 3. Type */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.022em;
  margin:0 0 var(--s-4);
}
h1{font-size:clamp(2.35rem,5.1vw,4rem);letter-spacing:-.032em;line-height:1.05}
h2{font-size:clamp(1.85rem,3.5vw,2.85rem);letter-spacing:-.028em}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.15rem;letter-spacing:-.012em}
h5{font-size:1rem}
h6{font-size:.9rem;text-transform:uppercase;letter-spacing:.14em;color:var(--slate-500)}
p{margin:0 0 var(--s-5)}
p:last-child{margin-bottom:0}
strong,b{color:var(--ink);font-weight:650}
small{font-size:.84rem}
/* Decorative pull-quotes for long-form copy only. This is deliberately scoped
   to .cl-prose: as a bare element rule it also matched the <blockquote> inside
   .cl-tcard (the testimonial cards), painting a pale-blue panel behind the
   quote and, on the dark band, leaving near-white text on it — unreadable. */
.cl-prose blockquote{
  margin:var(--s-8) 0;padding:var(--s-6) var(--s-7);
  background:var(--blue-050);border-left:4px solid var(--blue-500);
  border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink);
  font-family:var(--font-display);font-size:1.08rem;font-weight:500;
}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--mist);padding:.15em .45em;border-radius:5px;color:var(--navy-700)}

.lead{font-size:1.14rem;line-height:1.72;color:var(--slate-600);max-width:70ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:.74rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue-600);
  margin-bottom:var(--s-4);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red-500);flex:none}
.eyebrow--light{color:var(--blue-400)}
.eyebrow--center{justify-content:center}

/* ------------------------------------------------------- 4. Layout */
.cl-container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.cl-container--wide{max-width:1440px}
.cl-container--narrow{max-width:880px}
.cl-section{padding-block:clamp(64px,8vw,var(--s-12))}
.cl-section--tight{padding-block:clamp(48px,5.5vw,var(--s-10))}
.cl-section--mist{background:var(--mist)}
.cl-section--mist2{background:var(--mist-2)}
.cl-section--navy{background:var(--navy-900);color:#C8D4E6}
.cl-section--navy h2,.cl-section--navy h3,.cl-section--navy h4,.cl-section--navy h5{color:#fff}
.cl-section--navy p{color:#B3C2D8}
.cl-section--navy a:not(.cl-btn){color:var(--blue-400)}
.cl-section--navy a:not(.cl-btn):hover{color:#fff}
.cl-section--blue{background:var(--blue-050)}
.cl-grid{display:grid;gap:var(--s-6)}
.cl-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cl-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cl-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cl-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,var(--s-11));align-items:center}
.cl-split--wide-left{grid-template-columns:1.12fr .88fr}
.cl-split--wide-right{grid-template-columns:.88fr 1.12fr}
.cl-stack{display:flex;flex-direction:column;gap:var(--s-5)}
.cl-row{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}
.cl-rule{height:1px;background:var(--line);border:0;margin:0}

/* ------------------------------------------------------ 5. Buttons */
.cl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-size:.93rem;font-weight:600;
  letter-spacing:-.006em;line-height:1;white-space:nowrap;
  padding:15px 26px;border-radius:var(--r-sm);border:1.5px solid transparent;
  transition:transform .22s var(--ease),background-color .22s var(--ease),
             color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
  cursor:pointer;
}
.cl-btn svg{width:17px;height:17px;flex:none;transition:transform .28s var(--ease)}
.cl-btn:hover{transform:translateY(-2px);text-decoration:none}
.cl-btn:hover svg{transform:translateX(3px)}
.cl-btn--primary{background:var(--red-500);color:#fff;box-shadow:0 10px 24px -12px rgba(224,32,32,.66)}
.cl-btn--primary:hover{background:var(--red-600);color:#fff}
.cl-btn--navy{background:var(--navy-800);color:#fff;box-shadow:var(--sh-md)}
.cl-btn--navy:hover{background:var(--navy-700);color:#fff}
.cl-btn--blue{background:var(--blue-600);color:#fff}
.cl-btn--blue:hover{background:var(--blue-500);color:#fff}
.cl-btn--outline{border-color:var(--navy-700);color:var(--navy-800)}
.cl-btn--outline:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.cl-btn--outline-light{border-color:rgba(255,255,255,.42);color:#fff}
.cl-btn--outline-light:hover{background:#fff;border-color:#fff;color:var(--navy-900)}
.cl-btn--ghost{color:var(--navy-800);padding:15px 8px}
.cl-btn--ghost:hover{color:var(--red-500)}
.cl-btn--lg{padding:18px 34px;font-size:1rem}
.cl-btn--sm{padding:11px 18px;font-size:.85rem}
.cl-btn--block{width:100%}
.cl-btn-row{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}

.cl-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:600;font-family:var(--font-display);
  letter-spacing:.03em;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--blue-100);color:var(--blue-600);
}
.cl-chip--red{background:rgba(224,32,32,.1);color:var(--red-500)}
.cl-chip--amber{background:rgba(245,165,36,.15);color:#9A6412}
.cl-chip--teal{background:rgba(14,127,127,.12);color:var(--teal-600)}
.cl-chip--green{background:rgba(18,133,90,.12);color:var(--green-500)}
.cl-chip--light{background:rgba(255,255,255,.14);color:#E5EDF9}
.cl-chip--glass{
  background:rgba(255,255,255,.11);color:#DCE7F6;
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);
}

/* ------------------------------------------------------ 6. Header */
.cl-topbar{
  background:var(--navy-950);color:#9FB1CB;font-size:.79rem;
  height:var(--topbar-h);display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.cl-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);width:100%}
.cl-topbar__list{display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.cl-topbar__list li{margin:0}
.cl-topbar a{color:#9FB1CB;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.cl-topbar a:hover{color:#fff}
.cl-topbar svg{width:14px;height:14px;flex:none;opacity:.8}
.cl-topbar__right{display:flex;align-items:center;gap:var(--s-5)}
.cl-topbar__pulse{display:inline-flex;align-items:center;gap:7px;color:#8FE3B8}
.cl-topbar__pulse::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#25C77E;
  box-shadow:0 0 0 0 rgba(37,199,126,.7);animation:cl-pulse 2.4s infinite;
}
@keyframes cl-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,199,126,.65)}
  70%{box-shadow:0 0 0 9px rgba(37,199,126,0)}
  100%{box-shadow:0 0 0 0 rgba(37,199,126,0)}
}

.cl-header{
  position:sticky;top:0;z-index:900;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),background-color .3s var(--ease);
}
.cl-header.is-stuck{box-shadow:0 8px 30px -18px rgba(11,28,58,.34);background:rgba(255,255,255,.98)}
.cl-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-6);height:var(--header-h);
  transition:height .3s var(--ease);
}
.cl-header.is-stuck .cl-header__inner{height:72px}

.cl-brand{display:flex;align-items:center;gap:13px;flex:none;min-width:0}
.cl-brand:hover{text-decoration:none}
.cl-brand__mark{
  width:52px;height:52px;flex:none;border-radius:13px;
  display:grid;place-items:center;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--sh-xs);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cl-brand__mark img{width:100%;height:100%;object-fit:contain;padding:5px}
.cl-brand:hover .cl-brand__mark{transform:translateY(-2px);box-shadow:var(--sh-sm)}
.cl-brand__text{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.cl-brand__name{
  font-family:var(--font-display);font-weight:800;font-size:1.3rem;
  letter-spacing:-.01em;color:var(--navy-900);white-space:nowrap;
}
.cl-brand__sub{
  font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--slate-500);font-weight:600;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.cl-brand--light .cl-brand__name{color:#fff}
.cl-brand--light .cl-brand__sub{color:#8FA3C0}
.cl-brand--light .cl-brand__mark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}

/* Header safety net -------------------------------------------------------
   Nothing in the header row may widen the page. The sub-line under the site
   name is single-line by design; when it carried a 107-character sentence it
   could not wrap, the brand block grew to 953px, and the navigation and the
   Get a Quote action were pushed past the right edge at every viewport width.
   These rules bound every header child and pin the action group, so the button
   and the menu toggle stay reachable however long the text becomes. */
.cl-header__inner>*{min-width:0}
.cl-brand{flex:0 1 auto;max-width:100%}
.cl-brand__text{flex:none;max-width:100%;overflow:hidden}
.cl-brand__name,.cl-brand__sub{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cl-header__actions{flex:0 0 auto}

/* The phone shows twice: as a labelled block in the header row and as a
   tappable line in the top strip above it. The header-row copy cost about
   250px - the whole width of the Get a Quote button and then some - so it was
   removed from the markup. The number stays visible and tappable in the top
   strip at every width. This rule is the belt-and-braces for a child theme
   that reinstates the markup; it sits after the original block so it wins. */
.cl-brand__name,.cl-brand__sub{overflow:visible;text-overflow:clip}
.cl-brand__sub{max-width:none}

.cl-nav{display:flex;align-items:center;gap:2px;flex:none}
.cl-nav__item{position:relative}
.cl-nav__link{
  display:flex;align-items:center;gap:6px;padding:11px 15px;border-radius:var(--r-xs);
  font-family:var(--font-display);font-size:.885rem;font-weight:600;
  color:var(--navy-800);letter-spacing:-.004em;white-space:nowrap;
}
.cl-nav__link svg{width:12px;height:12px;transition:transform .3s var(--ease);opacity:.6}
.cl-nav__link:hover,.cl-nav__item.is-open>.cl-nav__link{color:var(--red-500);background:var(--blue-050)}
.cl-nav__item.is-open>.cl-nav__link svg{transform:rotate(180deg)}
.cl-nav__link.is-current{color:var(--red-500)}
.cl-nav__link.is-current::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;
  background:var(--red-500);border-radius:2px;
}

.cl-mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);
  width:min(940px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-xl);padding:var(--s-7);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),transform .3s var(--ease),visibility .26s;
  z-index:950;
}
.cl-nav__item.is-open .cl-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.cl-mega__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 22px}
.cl-mega__link{
  display:flex;gap:12px;padding:11px 12px;border-radius:var(--r-sm);
  transition:background-color .2s var(--ease);
}
.cl-mega__link:hover{background:var(--blue-050);text-decoration:none}
.cl-mega__ico{
  width:36px;height:36px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--blue-100);color:var(--blue-600);
}
.cl-mega__ico svg{width:18px;height:18px}
.cl-mega__t{font-family:var(--font-display);font-weight:650;font-size:.875rem;color:var(--ink);display:block;margin-bottom:1px}
.cl-mega__d{font-size:.76rem;color:var(--slate-500);line-height:1.45;display:block}
.cl-mega__foot{
  margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;
}
.cl-mega__foot p{margin:0;font-size:.84rem;color:var(--slate-500)}

.cl-header__actions{display:flex;align-items:center;gap:var(--s-3);flex:none}
.cl-header__phone{
  display:flex;align-items:center;gap:10px;padding-right:var(--s-4);
  border-right:1px solid var(--line);
}
.cl-header__phone svg{width:19px;height:19px;color:var(--red-500)}
.cl-header__phone span{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-400);font-weight:600}
.cl-header__phone a{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--navy-900);display:block}
.cl-header__phone a:hover{color:var(--red-500)}

.cl-navtoggle{
  display:none;width:46px;height:46px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;place-items:center;flex:none;
}
.cl-navtoggle span{display:block;width:20px;height:2px;background:var(--navy-900);border-radius:2px;position:relative;transition:background-color .2s}
.cl-navtoggle span::before,.cl-navtoggle span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy-900);
  border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease);
}
.cl-navtoggle span::before{top:-6px}
.cl-navtoggle span::after{top:6px}
body.cl-nav-open .cl-navtoggle span{background:transparent}
body.cl-nav-open .cl-navtoggle span::before{top:0;transform:rotate(45deg)}
body.cl-nav-open .cl-navtoggle span::after{top:0;transform:rotate(-45deg)}

.cl-drawer{
  position:fixed;inset:0 0 0 auto;width:min(420px,88vw);background:#fff;z-index:1000;
  transform:translateX(102%);visibility:hidden;
  transition:transform .4s var(--ease-out),visibility .4s var(--ease-out);
  display:flex;flex-direction:column;box-shadow:var(--sh-xl);overflow-y:auto;
}
body.cl-nav-open .cl-drawer{transform:translateX(0);visibility:visible}
.cl-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);flex:none;
}
.cl-drawer__close{width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line);display:grid;place-items:center;font-size:1.3rem;color:var(--navy-900)}
.cl-drawer__body{padding:var(--s-5) var(--s-5) var(--s-9);flex:1}
.cl-drawer__group{border-bottom:1px solid var(--line-soft);padding-block:4px}
.cl-drawer__link{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:14px 2px;font-family:var(--font-display);font-weight:650;font-size:.98rem;
  color:var(--navy-900);text-align:left;
}
.cl-drawer__link:hover{color:var(--red-500)}
.cl-drawer__sub{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
.cl-drawer__group.is-open .cl-drawer__sub{max-height:560px}
.cl-drawer__sub a{
  display:block;padding:9px 2px 9px 16px;font-size:.88rem;color:var(--slate-600);
  border-left:2px solid var(--line);
}
.cl-drawer__sub a:hover{color:var(--red-500);border-left-color:var(--red-500)}
.cl-drawer__cta{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)}
.cl-drawer__meta{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line-soft);font-size:.85rem}
.cl-drawer__meta a{display:flex;align-items:center;gap:9px;padding:7px 0;color:var(--slate-600)}
.cl-drawer__meta svg{width:16px;height:16px;color:var(--red-500);flex:none}
.cl-scrim{
  position:fixed;inset:0;background:rgba(6,15,34,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;z-index:990;
}
body.cl-nav-open .cl-scrim{opacity:1;visibility:visible}
body.cl-nav-open{overflow:hidden}

/* ------------------------------------------------------- 7. Hero */
.cl-hero{position:relative;background:var(--navy-950);overflow:hidden;isolation:isolate}
.cl-hero__media{position:absolute;inset:0;z-index:-2}
.cl-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.cl-hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(105deg,rgba(6,15,34,.95) 0%,rgba(11,28,58,.86) 34%,rgba(11,28,58,.42) 66%,rgba(6,15,34,.62) 100%),
    linear-gradient(180deg,rgba(6,15,34,.5) 0%,rgba(6,15,34,0) 30%,rgba(6,15,34,.72) 100%);
}
.cl-hero__inner{
  position:relative;padding-block:clamp(72px,11vw,148px) clamp(64px,9vw,124px);
  max-width:800px;
}
.cl-hero h1{color:#fff;margin-bottom:var(--s-5);text-shadow:0 2px 30px rgba(0,0,0,.28)}
.cl-hero h1 em{font-style:normal;color:var(--amber-400)}
.cl-hero__lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:#C6D4E8;max-width:62ch;margin-bottom:var(--s-8)}
.cl-hero__badge{
  display:inline-flex;align-items:center;gap:11px;padding:9px 18px 9px 11px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);
  color:#E2EBF8;font-size:.82rem;font-weight:500;margin-bottom:var(--s-6);
}
.cl-hero__badge b{font-weight:700;color:#fff}
.cl-hero__badge .cl-hero__badgedot{
  width:26px;height:26px;border-radius:50%;background:var(--red-500);
  display:grid;place-items:center;flex:none;
}
.cl-hero__badge svg{width:14px;height:14px;color:#fff}
.cl-hero__actions{margin-bottom:var(--s-10)}

.cl-hero__strip{
  position:relative;border-top:1px solid rgba(255,255,255,.13);
  background:rgba(6,15,34,.42);backdrop-filter:blur(12px);
}
.cl-hero__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding-block:var(--s-7);gap:var(--s-6);
}
.cl-hero__stat{position:relative;padding-left:var(--s-6)}
.cl-hero__stat:first-child{padding-left:0}
.cl-hero__stat:not(:first-child)::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.24),transparent);
}
.cl-hero__stat b{
  display:block;font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.35rem);
  font-weight:800;color:#fff;line-height:1;letter-spacing:-.03em;
}
.cl-hero__stat b i{font-style:normal;color:var(--amber-400)}
.cl-hero__stat span{
  display:block;margin-top:7px;font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;color:#9FB3D0;font-weight:600;
}

/* Hero scroll cue */
.cl-hero__cue{
  position:absolute;right:clamp(18px,4vw,40px);bottom:34px;z-index:2;
  display:flex;align-items:center;gap:12px;color:#9FB3D0;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl;
}
.cl-hero__cue::after{
  content:"";width:1px;height:56px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);
  animation:cl-cue 2.6s var(--ease) infinite;
}
@keyframes cl-cue{0%,100%{transform:scaleY(.35);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* ------------------------------------------------- 8. Section headings */
.cl-head{max-width:760px;margin-bottom:clamp(36px,4.5vw,64px)}
.cl-head--center{margin-inline:auto;text-align:center}
.cl-head--center .eyebrow{justify-content:center}
.cl-head h2{margin-bottom:var(--s-5)}
.cl-head p{font-size:1.06rem;color:var(--slate-600)}
.cl-head--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-8);max-width:none;
}
.cl-head--split>div:first-child{max-width:660px}
.cl-section--navy .cl-head p{color:#A8BAD4}

/* ------------------------------------------------------------ 9. Cards */
.cl-card{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  height:100%;
}
.cl-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent}
.cl-card__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--mist);flex:none}
.cl-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.cl-card:hover .cl-card__media img{transform:scale(1.07)}
.cl-card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,28,58,0) 42%,rgba(11,28,58,.62) 100%);
  opacity:.85;transition:opacity .4s var(--ease);
}
.cl-card__tag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  color:var(--navy-800);font-size:.7rem;font-weight:700;font-family:var(--font-display);
  letter-spacing:.09em;text-transform:uppercase;padding:6px 11px;border-radius:var(--r-xs);
}
.cl-card__num{
  position:absolute;bottom:12px;right:16px;z-index:2;
  font-family:var(--font-display);font-size:2.6rem;font-weight:800;line-height:1;
  color:rgba(255,255,255,.3);letter-spacing:-.04em;
}
.cl-card__body{padding:var(--s-6);display:flex;flex-direction:column;flex:1;gap:var(--s-3)}
.cl-card__title{font-size:1.16rem;margin:0;letter-spacing:-.016em}
.cl-card__title a{color:var(--ink)}
.cl-card__title a:hover{color:var(--red-500)}
.cl-card__text{font-size:.94rem;color:var(--slate-600);margin:0;line-height:1.65}
.cl-card__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cl-card__list li{margin:0}
.cl-card__list span{
  display:inline-block;font-size:.75rem;color:var(--slate-600);
  background:var(--mist);padding:4px 10px;border-radius:var(--r-pill);font-weight:500;
}
.cl-card__foot{
  margin-top:auto;padding-top:var(--s-5);border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
}
.cl-card__more{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-size:.86rem;font-weight:650;color:var(--navy-800);
}
.cl-card__more svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.cl-card:hover .cl-card__more{color:var(--red-500)}
.cl-card:hover .cl-card__more svg{transform:translateX(4px)}
.cl-card__arrow{
  width:38px;height:38px;border-radius:50%;background:var(--blue-050);color:var(--navy-800);
  display:grid;place-items:center;flex:none;transition:background-color .3s var(--ease),color .3s var(--ease);
}
.cl-card__arrow svg{width:16px;height:16px}
.cl-card:hover .cl-card__arrow{background:var(--red-500);color:#fff}

/* Compact / icon card */
.cl-card--icon{background:#fff;padding:var(--s-7);border-radius:var(--r-lg);border:1px solid var(--line)}
.cl-card--icon .cl-card__icon{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:var(--blue-100);color:var(--blue-600);margin-bottom:var(--s-5);
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.cl-card--icon .cl-card__icon svg{width:26px;height:26px}
.cl-card--icon:hover .cl-card__icon{background:var(--red-500);color:#fff;transform:translateY(-3px) rotate(-4deg)}
.cl-card--icon h3{font-size:1.1rem;margin-bottom:var(--s-3)}
.cl-card--icon p{font-size:.93rem;margin:0;color:var(--slate-600)}

/* Ghost / flat card */
.cl-card--flat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-7);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.cl-card--flat:hover{border-color:var(--blue-400);box-shadow:var(--sh-md);transform:translateY(-4px)}
.cl-card--navy{background:var(--navy-850);border-color:rgba(255,255,255,.09);color:#BDCCE2}
.cl-card--navy:hover{background:var(--navy-800);border-color:rgba(255,255,255,.18)}
.cl-card--navy h3,.cl-card--navy h4{color:#fff}
.cl-card--navy p{color:#A9BCD6}
.cl-card--navy .cl-card__icon{background:rgba(90,163,232,.16);color:var(--blue-400)}
.cl-card--navy:hover .cl-card__icon{background:var(--red-500);color:#fff}

/* ------------------------------------------------- 10. Stats / steps */
.cl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}
.cl-stat{
  padding:var(--s-7) var(--s-6);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);text-align:center;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.cl-stat:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.cl-stat b{
  display:block;font-family:var(--font-display);font-size:clamp(2rem,3.6vw,2.9rem);
  font-weight:800;color:var(--navy-900);line-height:1;letter-spacing:-.04em;
}
.cl-stat b i{font-style:normal;color:var(--red-500)}
.cl-stat span{
  display:block;margin-top:10px;font-size:.79rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate-500);font-weight:650;
}
.cl-stat--navy{background:var(--navy-850);border-color:rgba(255,255,255,.08)}
.cl-stat--navy b{color:#fff}
.cl-stat--navy span{color:#93A8C6}

.cl-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6);position:relative}
.cl-step{position:relative;padding-top:var(--s-7)}
.cl-step::before{
  content:"";position:absolute;top:26px;left:56px;right:-24px;height:2px;
  background:linear-gradient(90deg,var(--line) 0%,var(--line) 100%);z-index:0;
}
.cl-step:last-child::before{display:none}
.cl-step__num{
  position:relative;z-index:1;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:2px solid var(--line);
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--navy-900);
  transition:all .35s var(--ease);
}
.cl-step:hover .cl-step__num{background:var(--red-500);border-color:var(--red-500);color:#fff;transform:scale(1.06)}
.cl-step h4{margin:var(--s-6) 0 var(--s-3);font-size:1.06rem}
.cl-step p{font-size:.92rem;color:var(--slate-600);margin:0}
.cl-section--navy .cl-step__num{background:var(--navy-800);border-color:rgba(255,255,255,.18);color:#fff}
.cl-section--navy .cl-step::before{background:rgba(255,255,255,.14)}
.cl-section--navy .cl-step p{color:#A9BCD6}

.cl-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.cl-list li{position:relative;padding-left:34px;margin:0;color:var(--slate-700);font-size:.97rem;line-height:1.6}
.cl-list li::before{
  content:"";position:absolute;left:0;top:4px;width:21px;height:21px;border-radius:50%;
  background:var(--blue-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5FA8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.cl-list--red li::before{
  background-color:rgba(224,32,32,.1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E02020' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.cl-list--light li{color:#C2D1E6}
.cl-list--light li::before{
  background-color:rgba(90,163,232,.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235AA3E8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.cl-list--2col{grid-template-columns:repeat(2,minmax(0,1fr))}

.cl-quote{
  position:relative;background:#fff;border-radius:var(--r-lg);padding:var(--s-8);
  border:1px solid var(--line);box-shadow:var(--sh-sm);
}
.cl-quote::before{
  content:"";position:absolute;top:var(--s-8);left:var(--s-7);
  width:34px;height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='%23E02020' opacity='.24'%3E%3Cpath d='M0 30V16C0 7 5 1 15 0v6c-5 1-8 4-8 8h8v16H0zm22 0V16C22 7 27 1 37 0v6c-5 1-8 4-8 8h8v16H22z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.cl-quote p{
  font-family:var(--font-display);font-size:1.08rem;line-height:1.62;
  color:var(--ink);font-weight:500;margin:var(--s-6) 0 var(--s-5);
}
.cl-quote__by{display:flex;align-items:center;gap:13px;margin-top:var(--s-5)}
.cl-quote__by b{font-family:var(--font-display);font-size:.92rem;color:var(--ink);display:block}
.cl-quote__by span{font-size:.82rem;color:var(--slate-500)}
.cl-quote__av{
  width:46px;height:46px;border-radius:50%;flex:none;background:var(--navy-800);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;
}

/* --------------------------------------- 11. Feature split / media frames */
.cl-feature{position:relative}
.cl-feature__media{position:relative}
.cl-feature__media img{width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-lg);position:relative;z-index:1}
.cl-feature__media--offset::before{
  content:"";position:absolute;inset:auto -26px -26px auto;width:62%;height:62%;
  border-radius:var(--r-lg);background:var(--blue-100);z-index:0;
}
.cl-feature__media--dots::after{
  content:"";position:absolute;top:-28px;left:-28px;width:150px;height:150px;z-index:0;
  background-image:radial-gradient(var(--blue-400) 1.7px,transparent 1.7px);
  background-size:15px 15px;opacity:.55;
}
.cl-feature__badge{
  position:absolute;z-index:3;bottom:-22px;left:-22px;background:#fff;
  border-radius:var(--r-md);box-shadow:var(--sh-xl);padding:var(--s-5) var(--s-6);
  display:flex;align-items:center;gap:14px;border:1px solid var(--line);
}
.cl-feature__badge b{
  font-family:var(--font-display);font-size:1.9rem;font-weight:800;
  color:var(--navy-900);line-height:1;letter-spacing:-.03em;
}
.cl-feature__badge span{font-size:.78rem;color:var(--slate-500);font-weight:600;text-transform:uppercase;letter-spacing:.08em;line-height:1.35}

.cl-bignum{
  font-family:var(--font-display);font-size:clamp(3.4rem,7vw,5.4rem);font-weight:800;
  line-height:.9;letter-spacing:-.05em;color:var(--navy-900);
}
.cl-bignum i{font-style:normal;color:var(--red-500)}

/* Ticker / marquee */
.cl-marquee{overflow:hidden;position:relative;padding-block:var(--s-6)}
.cl-marquee::before,.cl-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.cl-marquee::before{left:0;background:linear-gradient(90deg,var(--white),transparent)}
.cl-marquee::after{right:0;background:linear-gradient(270deg,var(--white),transparent)}
.cl-marquee__track{display:flex;gap:var(--s-10);width:max-content;animation:cl-marquee 42s linear infinite}
.cl-marquee:hover .cl-marquee__track{animation-play-state:paused}
.cl-marquee__item{
  font-family:var(--font-display);font-size:1.02rem;font-weight:700;color:var(--slate-400);
  letter-spacing:.04em;white-space:nowrap;display:flex;align-items:center;gap:var(--s-10);
}
.cl-marquee__item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}
@keyframes cl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ 12. Forms */
.cl-form{display:grid;gap:var(--s-5)}
.cl-form--2col{grid-template-columns:repeat(2,minmax(0,1fr))}
.cl-field{display:flex;flex-direction:column;gap:8px}
.cl-field--full{grid-column:1/-1}
.cl-label{font-family:var(--font-display);font-size:.83rem;font-weight:650;color:var(--navy-900)}
.cl-label span{color:var(--red-500)}
.cl-input,.cl-select,.cl-textarea{
  width:100%;font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  appearance:none;
}
.cl-textarea{min-height:140px;resize:vertical;line-height:1.6}
.cl-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556377' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px;
}
.cl-input:focus,.cl-select:focus,.cl-textarea:focus{
  outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(46,125,209,.13);
}
.cl-input::placeholder,.cl-textarea::placeholder{color:var(--slate-400)}
.cl-check{display:flex;gap:11px;align-items:flex-start;font-size:.87rem;color:var(--slate-600)}
.cl-check input{width:19px;height:19px;accent-color:var(--blue-600);margin-top:2px;flex:none}
/* Honeypot: off-screen and hidden from assistive tech, so only a bot fills it. */
.cl-check__field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cl-check__field input{width:1px;height:1px;border:0;padding:0}
.cl-form__note{font-size:.8rem;color:var(--slate-500)}
.cl-formcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,4vw,var(--s-9));box-shadow:var(--sh-lg);
}

/* ------------------------------------------------------ 13. Accordion */
.cl-acc{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.cl-acc__item{border-bottom:1px solid var(--line-soft)}
.cl-acc__item:last-child{border-bottom:0}
.cl-acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding:var(--s-5) var(--s-6);text-align:left;font-family:var(--font-display);
  font-size:1rem;font-weight:650;color:var(--ink);transition:background-color .2s var(--ease);
}
.cl-acc__q:hover{background:var(--blue-050)}
.cl-acc__q i{
  width:28px;height:28px;flex:none;border-radius:50%;background:var(--mist);
  display:grid;place-items:center;transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
  font-style:normal;font-size:1.15rem;line-height:1;color:var(--navy-800);
}
.cl-acc__item.is-open .cl-acc__q{background:var(--blue-050)}
.cl-acc__item.is-open .cl-acc__q i{transform:rotate(45deg);background:var(--red-500);color:#fff}
.cl-acc__a{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.cl-acc__a>div{padding:0 var(--s-6) var(--s-6);font-size:.95rem;color:var(--slate-600);line-height:1.7}

.cl-table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
.cl-table th{
  text-align:left;font-family:var(--font-display);font-size:.76rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500);
  padding:13px var(--s-5);background:var(--mist);border-bottom:1px solid var(--line);
}
.cl-table td{padding:15px var(--s-5);border-bottom:1px solid var(--line-soft);color:var(--slate-700);vertical-align:top}
.cl-table tr:last-child td{border-bottom:0}
.cl-table tbody tr:hover{background:var(--blue-050)}

/* --------------------------------------------------------- 14. CTA band */
.cl-cta{position:relative;background:var(--navy-900);overflow:hidden;isolation:isolate}
.cl-cta__glow{
  position:absolute;z-index:-1;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,125,209,.42) 0%,rgba(46,125,209,0) 68%);
  top:-280px;right:-160px;
}
.cl-cta__glow--2{
  background:radial-gradient(circle,rgba(224,32,32,.3) 0%,rgba(224,32,32,0) 68%);
  bottom:-320px;left:-180px;top:auto;right:auto;
}
.cl-cta__inner{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,var(--s-11));
  align-items:center;padding-block:clamp(56px,7vw,var(--s-11));
}
.cl-cta h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:var(--s-5)}
.cl-cta p{color:#B0C1D9;font-size:1.05rem;max-width:58ch}
.cl-cta__card{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:var(--s-7);backdrop-filter:blur(10px);
}
.cl-cta__contact{list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;gap:var(--s-5)}
.cl-cta__contact li{display:flex;gap:13px;align-items:flex-start;margin:0}
.cl-cta__contact svg{width:19px;height:19px;color:var(--amber-400);flex:none;margin-top:3px}
.cl-cta__contact b{display:block;font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8FA3C0;margin-bottom:3px;font-weight:700}
.cl-cta__contact a,.cl-cta__contact span{color:#fff;font-size:.96rem}
.cl-cta__contact a:hover{color:var(--amber-400)}

/* ----------------------------------------------------------- 15. Footer */
.cl-footer{background:var(--navy-950);color:#93A6C2;font-size:.92rem;position:relative;overflow:hidden}
.cl-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,163,232,.5),transparent);
}
.cl-footer__top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,var(--s-10));
  padding-block:clamp(52px,6vw,var(--s-11));
}
.cl-footer h4{
  color:#fff;font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;
  margin-bottom:var(--s-6);font-weight:700;
}
.cl-footer p{color:#8FA3C0;font-size:.9rem;line-height:1.72}
.cl-footer a{color:#A8BAD4}
.cl-footer a:hover{color:#fff}
.cl-footer__links{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.cl-footer__links li{margin:0}
.cl-footer__links a{display:inline-flex;align-items:center;gap:9px;font-size:.9rem}
.cl-footer__links a::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-600);
  flex:none;transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.cl-footer__links a:hover::before{background:var(--red-500);transform:scale(1.4)}
.cl-footer__brand{margin-bottom:var(--s-6)}
.cl-footer__social{display:flex;gap:10px;margin-top:var(--s-6)}
.cl-footer__social a{
  width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
}
.cl-footer__social a:hover{background:var(--red-500);border-color:var(--red-500);color:#fff}
.cl-footer__social svg{width:17px;height:17px}
.cl-footer__webmail{margin-top:var(--s-6)}
.cl-footer a.cl-footer__webmail{color:#fff}
.cl-footer a.cl-footer__webmail:hover{color:#fff}
.cl-footer__contact{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5)}
.cl-footer__contact li{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:.9rem}
.cl-footer__contact svg{width:17px;height:17px;color:var(--blue-400);flex:none;margin-top:3px}
.cl-footer__bottom{
  border-top:1px solid rgba(255,255,255,.08);padding-block:var(--s-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;
  font-size:.83rem;
}
.cl-footer__bottom ul{list-style:none;display:flex;gap:var(--s-6);margin:0;padding:0;flex-wrap:wrap}
.cl-footer__bottom li{margin:0}

.cl-certstrip{
  display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;
  padding:var(--s-4) 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#7C90AE;font-weight:600;
}
.cl-certstrip b{color:#B9C9DF;font-weight:700}

/* Back-to-top */
.cl-top{
  position:fixed;right:22px;bottom:22px;z-index:800;width:48px;height:48px;border-radius:50%;
  background:var(--navy-900);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all .32s var(--ease);
}
.cl-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.cl-top:hover{background:var(--red-500);color:#fff;transform:translateY(-3px)}
.cl-top svg{width:19px;height:19px}

/* ------------------------------------------------- 16. Utilities & motion */
.cl-center{text-align:center}
.cl-mt-0{margin-top:0}.cl-mt-4{margin-top:var(--s-4)}.cl-mt-6{margin-top:var(--s-6)}
.cl-mt-8{margin-top:var(--s-8)}.cl-mt-10{margin-top:var(--s-10)}
.cl-mb-0{margin-bottom:0}.cl-mb-6{margin-bottom:var(--s-6)}.cl-mb-8{margin-bottom:var(--s-8)}
.cl-text-light{color:#fff}
.cl-muted{color:var(--slate-500)}
.cl-full{width:100%}
.cl-note{
  background:var(--amber-400);background:rgba(245,165,36,.12);
  border-left:3px solid var(--amber-500);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s-5) var(--s-6);font-size:.93rem;color:#7A4E0A;
}
.cl-note strong{color:#5C3A06}

/* Entrance animation, gated behind .cl-anim which the script adds to <html>
   once it is running - without JS the content is simply visible. The animation
   always runs to completion, so no section can ever be left invisible by a
   missed scroll event, a tall embed or a full-page capture. */
.cl-anim .cl-reveal{animation:clRise .7s var(--ease-out) both}
.cl-anim .cl-reveal[data-delay="1"]{animation-delay:.08s}
.cl-anim .cl-reveal[data-delay="2"]{animation-delay:.16s}
.cl-anim .cl-reveal[data-delay="3"]{animation-delay:.24s}
.cl-anim .cl-reveal[data-delay="4"]{animation-delay:.32s}
@keyframes clRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .cl-anim .cl-reveal{animation:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
  .cl-marquee__track{animation:none}
}

/* ------------------------------------------------------------ Responsive */
@media (max-width:1180px){
  .cl-mega__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  :root{--header-h:74px}
  .cl-nav{display:none}
  .cl-navtoggle{display:grid}
  .cl-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-split,.cl-split--wide-left,.cl-split--wide-right{grid-template-columns:1fr}
  .cl-hero__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
  .cl-hero__stat:nth-child(3){padding-left:0}
  .cl-hero__stat:nth-child(3)::before{display:none}
  .cl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}
  .cl-step:nth-child(2)::before{display:none}
  .cl-cta__inner{grid-template-columns:1fr}
  .cl-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-head--split{flex-direction:column;align-items:flex-start;gap:var(--s-6)}
  .cl-topbar__list li.cl-topbar__hide-md{display:none}

  /* Below the nav breakpoint the header row is only logo + Quote + toggle.
     Stretch the brand across the free space so the site name and its sub-line
     are never clipped - a truncated "Chri..." is worse than a long row. */
  .cl-header__inner{gap:var(--s-4)}
  .cl-brand{flex:1 1 auto}
  .cl-brand__name,.cl-brand__sub{overflow:visible;text-overflow:clip}
}
@media (max-width:720px){
  body{font-size:16px}
  .cl-grid--2,.cl-grid--3,.cl-grid--4{grid-template-columns:1fr}
  .cl-stats,.cl-steps{grid-template-columns:1fr}
  .cl-step::before{display:none}
  .cl-hero__stats{grid-template-columns:1fr;gap:var(--s-5)}
  .cl-hero__stat{padding-left:0!important;padding-bottom:var(--s-5);border-bottom:1px solid rgba(255,255,255,.1)}
  .cl-hero__stat:last-child{border-bottom:0;padding-bottom:0}
  .cl-hero__stat:not(:first-child)::before{display:none}
  .cl-hero__cue{display:none}
  .cl-footer__top{grid-template-columns:1fr}
  .cl-footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--s-4)}
  .cl-footer__bottom ul{gap:var(--s-4)}
  .cl-form--2col{grid-template-columns:1fr}
  .cl-list--2col{grid-template-columns:1fr}
  .cl-feature__badge{left:0;bottom:-16px;padding:var(--s-4) var(--s-5)}
  .cl-feature__badge b{font-size:1.5rem}
  .cl-feature__media--offset::before,.cl-feature__media--dots::after{display:none}
  .cl-topbar{height:auto;padding-block:8px}
  .cl-topbar__right{display:none}
  .cl-quote{padding:var(--s-6)}
}
@media (max-width:420px){
  .cl-btn{padding:14px 20px;font-size:.88rem}
  .cl-brand__mark{width:44px;height:44px;border-radius:11px}
  .cl-brand__name{font-size:1.12rem}
  /* On the narrowest phones the row is tight: keep the brand fully readable by
     trimming the sub-line and the button to their essential sizes, and never
     let a label wrap onto a second line. */
  .cl-brand__sub{font-size:.52rem;letter-spacing:.08em}
  .cl-header__actions .cl-btn{padding:12px 14px;font-size:.8rem;white-space:nowrap}
  .cl-navtoggle{width:40px;height:40px}
}

/* Header fit ladder -------------------------------------------------------
   The row carries four things: the brand lock-up, up to eight nav items, the
   phone block and the Get a Quote action. Each breakpoint below is the point
   at which the next thing stops fitting, measured rather than guessed. The nav
   is pinned with flex:none so it can never shrink and wrap its links onto a
   second line - that wrapping was what made the bar look distorted. */

/* Room to spare: the brand takes its natural width, so the sub-line is never
   squashed into an ellipsis. */
@media (min-width:1240px){
  .cl-brand{flex:0 0 auto}
}

/* Between 1240 and 1360 the full row still fits, but only after the nav links
   give up some horizontal padding - measured: the eight links cost 30px of
   padding each at their default size, and the row runs short by under 100px. */
@media (min-width:1240px) and (max-width:1360px){
  .cl-nav__link{padding:11px 10px;font-size:.86rem}
}

/* Below 1240 the nav items plus the brand and the action no longer fit on one
   line, so the drawer takes over. The old breakpoint was 1024, which left a
   band where all three had to share a row they were too wide for. */
@media (max-width:1239px){
  .cl-nav{display:none}
  .cl-navtoggle{display:grid}
}

/* Phone widths: the sub-line is decorative and is the first thing to go, so the
   site name and the Quote button keep the space they need. */
@media (max-width:760px){
  .cl-brand__sub{display:none}
}

@media (max-width:520px){
  .cl-header__inner{gap:10px}
  .cl-brand{gap:10px}
  .cl-brand__mark{width:42px;height:42px;border-radius:11px}
  .cl-brand__name{font-size:1.04rem}
  .cl-header__actions .cl-btn{padding:11px 13px;font-size:.78rem;white-space:nowrap}
  .cl-navtoggle{width:40px;height:40px}
}

/* Smallest phones: mark, action and menu toggle. There is no width left for a
   wordmark beside a labelled button, and an overlapping logo reads as broken,
   so the mark alone carries the brand at this size, with the action and the
   toggle trimmed to keep the row inside the screen. */
@media (max-width:430px){
  .cl-brand__text{display:none}
  .cl-header__inner{gap:8px}
  .cl-brand__mark{width:38px;height:38px;border-radius:10px}
  .cl-header__actions{gap:8px}
  .cl-header__actions .cl-btn{padding:10px 11px;font-size:.74rem}
  .cl-header__actions .cl-btn svg{width:13px;height:13px}
  .cl-navtoggle{width:38px;height:38px}
}

/* Retire the duplicate phone block last, so it beats the original rule further
   up the sheet. */
.cl-header__phone{display:none}

/* ==========================================================================
   PART 2 — Page patterns
   Banner, page heros, blog, forms feedback, track & trace, misc
   ========================================================================== */

/* ---- Banner (interior page header) ---- */
.cl-banner{
  position:relative;background-size:cover;background-position:center;
  padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,80px);
  color:#fff;overflow:hidden;
}
.cl-banner__inner{max-width:820px}
.cl-banner__title{color:#fff;margin-bottom:var(--s-4);font-size:clamp(2rem,4.2vw,3.2rem)}
.cl-banner__sub{color:#C1D0E6;font-size:1.08rem;max-width:64ch;margin-bottom:var(--s-6)}
.cl-breadcrumb{
  display:flex;align-items:center;gap:10px;font-size:.84rem;color:#95A9C6;
  letter-spacing:.02em;
}
.cl-breadcrumb a{color:#C1D0E6}
.cl-breadcrumb a:hover{color:#fff}
.cl-breadcrumb span[aria-hidden]{opacity:.5}

/* ---- Page hero variant with cream background ---- */
.cl-pagehero{background:var(--mist);padding-block:clamp(48px,6vw,88px);border-bottom:1px solid var(--line)}
.cl-pagehero h1{margin-bottom:var(--s-5);max-width:24ch}
.cl-pagehero .lead{margin-bottom:0}

/* ---- Two-column content + sidebar ---- */
.cl-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,var(--s-10));align-items:start}
.cl-layout--flip{grid-template-columns:340px minmax(0,1fr)}
.cl-sidebar{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:var(--s-6)}
.cl-widget{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6)}
.cl-widget__title{font-size:1rem;margin-bottom:var(--s-5)}
.cl-widget ul{list-style:none;margin:0;padding:0}
.cl-widget li{margin:0}
.cl-widget li a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;font-size:.9rem;color:var(--slate-700);border-bottom:1px solid var(--line-soft);
}
.cl-widget li:last-child a{border-bottom:0}
.cl-widget li a:hover{color:var(--red-500)}
.cl-widget li a svg{width:14px;height:14px;opacity:.4;flex:none}

/* ---- Article / prose ---- */
.cl-prose{max-width:none}
.cl-prose h2{margin-top:var(--s-10);margin-bottom:var(--s-5)}
.cl-prose h2:first-child{margin-top:0}
.cl-prose h3{margin-top:var(--s-8);margin-bottom:var(--s-4)}
.cl-prose p{font-size:1.03rem;line-height:1.78}
.cl-prose img{border-radius:var(--r-lg);margin-block:var(--s-7)}
.cl-prose ul,.cl-prose ol{padding-left:1.3rem}
.cl-prose li{margin-bottom:.6rem}
.cl-prose table{width:100%;border-collapse:collapse;margin-block:var(--s-7);font-size:.94rem}
.cl-prose th,.cl-prose td{padding:12px 16px;border:1px solid var(--line);text-align:left}
.cl-prose th{background:var(--mist);font-family:var(--font-display);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}

/* ---- Feature list panel ---- */
.cl-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,var(--s-8));box-shadow:var(--sh-sm);
}
.cl-panel h3{margin-bottom:var(--s-5);font-size:1.16rem}
.cl-panel--navy{background:var(--navy-850);border-color:rgba(255,255,255,.1);color:#BDCCE2}
.cl-panel--navy h3{color:#fff}
.cl-panel--navy .cl-list li{color:#B7C6DC}

/* ---- Spec strip ---- */
.cl-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cl-specs__item{background:#fff;padding:var(--s-6)}
.cl-specs__item b{
  display:block;font-family:var(--font-display);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-400);margin-bottom:7px;font-weight:700;
}
.cl-specs__item span{font-size:.95rem;color:var(--navy-900);font-weight:500}

/* ---- Services archive nav / filter chips ---- */
.cl-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s-8)}
.cl-filter{
  padding:9px 17px;border-radius:var(--r-pill);border:1.5px solid var(--line);
  background:#fff;font-family:var(--font-display);font-size:.84rem;font-weight:600;
  color:var(--slate-600);transition:all .22s var(--ease);
}
.cl-filter:hover{border-color:var(--navy-700);color:var(--navy-900)}
.cl-filter.is-active{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

/* ---- Track & trace ---- */
.cl-trackbox{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,4vw,var(--s-9));box-shadow:var(--sh-lg);
}
.cl-trackform{display:flex;gap:var(--s-3);flex-wrap:wrap}
.cl-trackform .cl-input{flex:1 1 260px}
.cl-track__result{margin-top:var(--s-7)}
.cl-track__out{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6);
  background:var(--mist-2);font-size:.95rem;
}
.cl-track__out.is-error{border-color:#F5C2C2;background:#FEF4F4;color:#8C2020}
.cl-track__out.is-pending{border-color:#F2D9A8;background:#FFFBF2;color:#7A4E0A}
.cl-timeline{list-style:none;margin:var(--s-6) 0 0;padding:0}
.cl-timeline li{
  position:relative;padding:0 0 var(--s-6) 34px;margin:0;border-left:2px solid var(--line);
}
.cl-timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.cl-timeline li::before{
  content:"";position:absolute;left:-8px;top:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2.5px solid var(--line);
}
.cl-timeline li.is-done::before{background:var(--green-500);border-color:var(--green-500)}
.cl-timeline li.is-active::before{background:var(--red-500);border-color:var(--red-500);box-shadow:0 0 0 4px rgba(224,32,32,.15)}
.cl-timeline b{display:block;font-family:var(--font-display);font-size:.95rem;color:var(--ink)}
.cl-timeline span{font-size:.85rem;color:var(--slate-500)}

/* ---- Form feedback ---- */
.cl-form__result{
  margin-top:var(--s-5);padding:var(--s-5) var(--s-6);border-radius:var(--r-sm);
  font-size:.94rem;border:1px solid transparent;
}
.cl-form__result.is-ok{background:#F1FBF6;border-color:#B7E6CD;color:#0B6B44}
.cl-form__result.is-err{background:#FEF4F4;border-color:#F5C2C2;color:#8C2020}
.cl-form__result[hidden]{display:none}
.cl-enquiry.is-sending{opacity:.65;pointer-events:none}
.cl-enquiry .is-invalid{border-color:#E5787E;box-shadow:0 0 0 4px rgba(224,32,32,.1)}

/* ---- Blog / archive ---- */
.cl-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7)}
.cl-post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.cl-post:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.cl-post__media{aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.cl-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.cl-post:hover .cl-post__media img{transform:scale(1.06)}
.cl-post__body{padding:var(--s-6);display:flex;flex-direction:column;gap:11px;flex:1}
.cl-post__meta{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-400);font-weight:650}
.cl-post__title{font-size:1.1rem;margin:0}
.cl-post__title a{color:var(--ink)}
.cl-post__title a:hover{color:var(--red-500)}
.cl-post__excerpt{font-size:.92rem;color:var(--slate-600);margin:0;flex:1}

.cl-pagination{display:flex;gap:8px;justify-content:center;margin-top:var(--s-10);flex-wrap:wrap}
.cl-pagination .page-numbers{
  min-width:44px;height:44px;display:grid;place-items:center;padding:0 12px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;
  font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--navy-800);
}
.cl-pagination .page-numbers:hover{border-color:var(--navy-700);color:var(--red-500)}
.cl-pagination .page-numbers.current{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

/* ---- 404 ---- */
.cl-404{
  min-height:72vh;display:grid;place-items:center;text-align:center;
  padding-block:var(--s-12);background:var(--mist);
}
.cl-404__code{
  font-family:var(--font-display);font-size:clamp(6rem,18vw,13rem);font-weight:800;
  line-height:.85;letter-spacing:-.06em;color:var(--navy-900);margin:0;
}
.cl-404__code i{font-style:normal;color:var(--red-500)}

/* ---- Quote summary list ---- */
.cl-summary{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cl-summary li{display:flex;gap:14px;align-items:flex-start;padding:var(--s-5) 0;border-bottom:1px solid var(--line-soft);margin:0}
.cl-summary li:last-child{border-bottom:0}
.cl-summary__ico{width:40px;height:40px;border-radius:11px;background:var(--blue-100);color:var(--blue-600);display:grid;place-items:center;flex:none}
.cl-summary__ico svg{width:19px;height:19px}
.cl-summary b{display:block;font-family:var(--font-display);font-size:.95rem;color:var(--ink);margin-bottom:2px}
.cl-summary span{font-size:.88rem;color:var(--slate-500)}

/* ---- Contact cards ---- */
.cl-contactcard{
  display:flex;gap:16px;align-items:flex-start;padding:var(--s-6);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.cl-contactcard:hover{border-color:var(--blue-400);box-shadow:var(--sh-sm)}
.cl-contactcard__ico{
  width:48px;height:48px;border-radius:13px;background:var(--navy-900);color:#fff;
  display:grid;place-items:center;flex:none;
}
.cl-contactcard__ico svg{width:21px;height:21px}
.cl-contactcard b{display:block;font-family:var(--font-display);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-400);margin-bottom:5px}
.cl-contactcard a,.cl-contactcard span{color:var(--navy-900);font-weight:600;font-size:.98rem;line-height:1.5}
.cl-contactcard a:hover{color:var(--red-500)}

.cl-map{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--mist);min-height:340px;display:grid;place-items:center;text-align:center;
  padding:var(--s-8);
}
.cl-map__ph{max-width:420px}
.cl-map__ph svg{width:44px;height:44px;color:var(--blue-500);margin:0 auto var(--s-5)}
.cl-map__ph b{display:block;font-family:var(--font-display);color:var(--ink);margin-bottom:8px}
.cl-map__ph span{font-size:.9rem;color:var(--slate-500)}

/* ---- Logo strip ---- */
.cl-logostrip{
  display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,var(--s-11));
  flex-wrap:wrap;padding-block:var(--s-8);
}
.cl-logostrip span{
  font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--slate-400);
  letter-spacing:.05em;opacity:.75;transition:opacity .3s var(--ease),color .3s var(--ease);
}
.cl-logostrip span:hover{opacity:1;color:var(--navy-800)}

@media (max-width:1024px){
  .cl-layout,.cl-layout--flip{grid-template-columns:1fr}
  .cl-sidebar{position:static}
  .cl-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .cl-posts{grid-template-columns:1fr}
  .cl-specs{grid-template-columns:1fr}
}

/* ==========================================================================
   PART 3 — Structural and utility additions
   ========================================================================== */

.cl-main{display:block;min-height:60vh}
.cl-nav__item--mega{position:static}

/* Service group wrappers used by the services archive filter */
.cl-svcgroup{scroll-margin-top:calc(var(--header-h) + 24px)}
.cl-svcgroup.is-hidden{display:none}
.cl-svcgroup + .cl-svcgroup{margin-top:var(--s-4)}

/* Comments block */
.cl-comments{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,var(--s-8))}
.cl-comments h2{margin-bottom:var(--s-6)}
.cl-comment__body{font-size:.96rem;line-height:1.7;color:var(--slate-700)}
.cl-comment__body p:last-child{margin-bottom:0}
.cl-comment__meta{clear:none;overflow:hidden}

/* Footer widget column (for classic widgets dropped into the footer) */
.cl-footer__widget h4{font-family:var(--font-display);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:var(--s-5)}
.cl-footer__widget ul{list-style:none;padding:0;margin:0}
.cl-footer__widget li{margin-bottom:11px}
.cl-footer__widget a{color:#A7B8D1;font-size:.92rem}
.cl-footer__widget a:hover{color:var(--blue-400)}

/* ==========================================================================
   PART 4 — Offices, maps, phone lists and testimonials
   ========================================================================== */

/* ---- Top bar responsive helpers ---- */
@media (max-width:900px){.cl-topbar__hide-md{display:none}}
@media (max-width:620px){.cl-topbar__hide-sm{display:none}}

/* ---- Dark band variant (testimonials on the homepage) ---- */
.cl-section--navy2{
  background:
    radial-gradient(1100px 460px at 82% -12%,rgba(46,125,209,.24),transparent 62%),
    radial-gradient(760px 420px at 6% 108%,rgba(224,32,32,.14),transparent 60%),
    var(--navy-950);
  color:#C8D4E6;
}
.cl-section--navy2 h2,.cl-section--navy2 h3,.cl-section--navy2 h4{color:#fff}
.cl-section--navy2 p{color:#B3C2D8}
.cl-section--navy2 .cl-heading p{color:#A7B8D1}

/* ---- Embedded Google Map ---- */
.cl-mapembed{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--mist);
  height:var(--map-h,340px);box-shadow:var(--sh-xs);
}
.cl-mapembed iframe{
  display:block;width:100%;height:100%;border:0;
  filter:grayscale(.16) contrast(1.02);
  transition:filter .4s var(--ease);
}
.cl-mapembed:hover iframe{filter:grayscale(0) contrast(1)}
.cl-section--navy2 .cl-mapembed{border-color:rgba(255,255,255,.14)}

/* ---- Phone lists ---- */
.cl-phonelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cl-phonelist li{margin:0}
.cl-phonelist a{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.93rem;font-weight:500;color:var(--navy-800);
  transition:color .2s var(--ease);
}
.cl-phonelist a svg{width:15px;height:15px;flex:none;color:var(--blue-500)}
.cl-phonelist a:hover{color:var(--red-500)}
.cl-phonelist a:hover svg{color:var(--red-500)}
.cl-phonelist--footer a{color:#A7B8D1;font-size:.88rem}
.cl-phonelist--footer a:hover{color:var(--blue-400)}
.cl-phonelist--footer a:hover svg{color:var(--blue-400)}
.cl-phonelist--grid a{font-size:.9rem}

/* ---- Office cards (Contact page) ---- */
.cl-officegrid{align-items:start}
.cl-officecard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,var(--s-8));
  display:flex;flex-direction:column;gap:var(--s-5);
  box-shadow:var(--sh-xs);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);
}
.cl-officecard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--blue-100)}
.cl-officecard__head{display:flex;align-items:center;gap:var(--s-5)}
.cl-officecard__ico{
  flex:none;width:52px;height:52px;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--blue-100);color:var(--blue-600);
}
.cl-officecard__ico svg{width:24px;height:24px}
.cl-officecard__label{
  display:block;font-family:var(--font-display);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-500);margin-bottom:4px;
}
.cl-officecard h3{
  font-size:clamp(1.1rem,1.6vw,1.3rem);margin:0;line-height:1.25;
}
.cl-officecard__meta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.cl-officecard__meta li{display:flex;gap:11px;align-items:flex-start;margin:0}
.cl-officecard__meta li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--blue-500)}
.cl-officecard__meta li span{font-size:.93rem;line-height:1.6;color:var(--slate-700)}
.cl-officecard__phones{
  padding-top:var(--s-5);border-top:1px solid var(--line-soft);
}
.cl-officecard__phlabel{
  display:block;font-family:var(--font-display);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-500);margin-bottom:11px;
}
.cl-officecard__mail{
  display:inline-flex;align-items:center;gap:9px;font-size:.93rem;font-weight:500;
  color:var(--navy-800);word-break:break-word;
}
.cl-officecard__mail svg{width:16px;height:16px;flex:none;color:var(--blue-500)}
.cl-officecard__mail:hover{color:var(--red-500)}
.cl-officecard__note{
  font-size:.9rem;line-height:1.65;color:var(--slate-600);margin:0;
}
.cl-officecard__actions{margin-top:0}

/* ---- Testimonial cards ---- */
.cl-tgrid{
  display:grid;gap:var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
}
.cl-tcard{
  position:relative;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,var(--s-8));
  display:flex;flex-direction:column;gap:var(--s-5);
  box-shadow:var(--sh-xs);overflow:hidden;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);
}
.cl-tcard::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--red-500),var(--blue-500));
  opacity:0;transition:opacity .32s var(--ease);
}
.cl-tcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--blue-100)}
.cl-tcard:hover::before{opacity:1}
/* The mark sits in its own line box; a fixed height used to clip the glyph. */
.cl-tcard__mark{
  font-family:var(--font-display);font-size:2.75rem;line-height:1;
  color:var(--blue-100);font-weight:700;
  display:block;height:auto;margin-bottom:calc(var(--s-4) * -1);
}
/* Reset every prose-quote property so the card's own surface shows through. */
.cl-tcard__quote{
  margin:0;flex:1;min-width:0;
  background:none;border:0;padding:0;box-shadow:none;
}
.cl-tcard__quote p{
  font-size:1.02rem;line-height:1.72;color:var(--ink);
  margin:0;font-weight:400;
}
.cl-tcard__quote footer,.cl-tcard__quote cite{
  display:block;font-style:normal;font-size:.85rem;color:var(--slate-500);margin-top:var(--s-3);
}
.cl-tcard__by{
  display:flex;align-items:center;gap:var(--s-4);
  padding-top:var(--s-5);border-top:1px solid var(--line-soft);
}
/* Let the author block shrink so long names and roles wrap instead of
   overflowing the card. */
.cl-tcard__by > span:last-child{min-width:0}
.cl-tcard__av{
  flex:none;width:46px;height:46px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--navy-800);color:#fff;
  font-family:var(--font-display);font-size:.9rem;font-weight:700;letter-spacing:.02em;
}
.cl-tcard__by b{
  display:block;font-family:var(--font-display);font-size:.95rem;
  color:var(--ink);line-height:1.35;overflow-wrap:anywhere;
}
.cl-tcard__by span span{
  display:block;font-size:.85rem;color:var(--slate-500);line-height:1.45;
  overflow-wrap:anywhere;
}

/* Dark band: keep the cards light so quotes stay legible */
.cl-section--navy2 .cl-tcard{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
}
.cl-section--navy2 .cl-tcard:hover{
  background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.24);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.6);
}
.cl-section--navy2 .cl-tcard__mark{color:rgba(90,163,232,.42)}
.cl-section--navy2 .cl-tcard__quote p{color:#E4ECF7}
.cl-section--navy2 .cl-tcard__by{border-top-color:rgba(255,255,255,.12)}
.cl-section--navy2 .cl-tcard__av{background:var(--blue-500);color:#fff}
.cl-section--navy2 .cl-tcard__by b{color:#fff}
.cl-section--navy2 .cl-tcard__by span span{color:#A7B8D1}

.cl-tgrid--wide{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

/* ---- Inline text link with arrow ---- */
.cl-textlink{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:.93rem;font-weight:600;
  color:var(--navy-800);
}
.cl-textlink svg{width:16px;height:16px;transition:transform .26s var(--ease)}
.cl-textlink:hover{color:var(--red-500)}
.cl-textlink:hover svg{transform:translateX(3px)}

/* ---- Centred button row ---- */
.cl-centerrow{justify-content:center}

/* ---- Empty-state note ---- */
.cl-note{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--amber-500);
  border-radius:var(--r-md);padding:clamp(22px,2.6vw,var(--s-8));
  box-shadow:var(--sh-xs);max-width:760px;
}
.cl-note h2{font-size:clamp(1.15rem,1.8vw,1.4rem);margin-bottom:var(--s-4)}
.cl-note p{margin:0;color:var(--slate-600)}

/* ---- Footer: offices and maps ---- */
.cl-footer__office{margin-bottom:var(--s-6)}
.cl-footer__office:last-of-type{margin-bottom:0}
.cl-footer__office b{
  display:block;font-family:var(--font-display);font-size:.82rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:7px;
}
.cl-footer__office > span{
  display:block;font-size:.88rem;line-height:1.62;color:#A7B8D1;margin-bottom:11px;
}
.cl-footer__maillink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.88rem;color:#A7B8D1;word-break:break-word;
}
.cl-footer__maillink svg{width:15px;height:15px;flex:none;color:var(--blue-400)}
.cl-footer__maillink:hover{color:var(--blue-400)}

.cl-footer__maps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--s-6);margin-top:var(--s-9);padding-top:var(--s-9);
  border-top:1px solid rgba(255,255,255,.1);
}
.cl-footer__map{display:flex;flex-direction:column;gap:var(--s-4)}
.cl-footer__maphead{
  display:flex;flex-direction:column;gap:6px;
}
.cl-footer__maphead b{
  font-family:var(--font-display);font-size:.82rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;
}
.cl-footer__maphead span{font-size:.84rem;line-height:1.6;color:#8FA3C0}
.cl-footer__maphead a{
  display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--blue-400);
}
.cl-footer__maphead a svg{width:14px;height:14px;transition:transform .26s var(--ease)}
.cl-footer__maphead a:hover{color:#fff}
.cl-footer__maphead a:hover svg{transform:translateX(3px)}
.cl-footer__maps .cl-mapembed{border-color:rgba(255,255,255,.14)}

@media (max-width:720px){
  .cl-tgrid,.cl-tgrid--wide{grid-template-columns:1fr}
  .cl-officecard__head{gap:var(--s-4)}
  .cl-footer__maps{grid-template-columns:1fr}
  /* Stack the avatar against the top of a wrapped author block. */
  .cl-tcard__by{align-items:flex-start;gap:var(--s-3)}
  .cl-tcard__av{width:40px;height:40px;font-size:.84rem}
  .cl-tcard{padding:var(--s-6)}
}

/* ---------------------------------------------------------------------------
   Accessibility utilities.
   The skip link and any visually-hidden label in the markup depend on these.
   Without them the skip link renders as ordinary visible text at the top of
   every page, so they are part of the design system rather than optional.
   --------------------------------------------------------------------------- */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:fixed !important;top:var(--s-3);left:var(--s-3);
  width:auto;height:auto;margin:0;padding:.7rem 1.1rem;
  overflow:visible;clip:auto;clip-path:none;white-space:normal;
  background:var(--navy-900);color:#fff;font-size:.9rem;font-weight:600;
  border-radius:var(--r-sm);box-shadow:0 10px 30px rgba(6,15,34,.32);
  z-index:9999;text-decoration:none;
}
.skip-link:focus-visible{outline:3px solid var(--blue-400);outline-offset:3px}