/* BEMCP:ccs-design-system — managed block, do not edit inline. */
/* ==========================================================================
   Corrosion Coating Solutions — design system
   The approved Deep Navy direction, ported from the static comp. Tokens
   first, then components, then a bridge layer that maps Elementor's widget
   output onto those components so the page tree stays natively editable.

   Fonts are declared in the Elementor kit (Chivo / Plus Jakarta Sans), so
   there is no @font-face block here.
   ========================================================================== */

:root{
  --navy:#0F1E36;
  --panel:#17294A;
  --panel-2:#1F3560;
  --white:#FFFFFF;
  --mist:#C9D2DE;
  --silver:#B9C3D1;
  --slate:#4E5C74;
  --mist-tint:#E4E8EE;

  --hairline:rgba(255,255,255,.16);
  --keyline:rgba(255,255,255,.28);
  --hairline-ink:rgba(15,30,54,.16);

  --display:'Chivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --body:'Plus Jakarta Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;

  --radius:6px;
  --radius-lg:8px;
  --shell:1240px;
  --gutter:32px;

  --grade:saturate(.55) contrast(1.35) brightness(.78);
  --ease:cubic-bezier(.4,0,.2,1);
}

body{
  background:var(--navy);
  color:var(--mist);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --------------------------------------------------------------------------
   Type
   Elementor prints kit typography onto its own heading widgets, so these
   rules exist for anything the kit does not reach: shortcode output, rich
   text inside a text editor, and the theme templates.
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--white);letter-spacing:-.03em;font-weight:400;line-height:1.05;}
h1{font-size:clamp(34px,5.4vw,62px);letter-spacing:-.035em;}
h2{font-size:clamp(28px,3.6vw,44px);}
h3{font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.3;}
h4{font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35;}

/* Light sections invert the whole type ramp. */
.section--light,.section--light p,.section--light li{color:var(--slate);}
.section--light h1,.section--light h2,.section--light h3,.section--light h4{color:var(--navy);}

.mark{
  font-weight:600;background:var(--white);color:var(--navy);
  padding:0 12px;border-radius:var(--radius-lg);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.section--light .mark{background:var(--navy);color:var(--white);}

.eyebrow{
  font-family:var(--body);font-weight:500;font-size:12px;
  letter-spacing:.2em;text-transform:lowercase;color:var(--silver);
  display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--white);flex:none;margin-top:8px;}
.section--light .eyebrow{color:var(--slate);}
.section--light .eyebrow::before{background:var(--navy);}

.lede,.lede p{font-size:17.5px;color:var(--mist);}
.section--light .lede,.section--light .lede p{color:var(--slate);}
.measure{max-width:62ch;}
.measure-sm{max-width:46ch;}

/* --------------------------------------------------------------------------
   Buttons
   The design's arrow is a mask on a pseudo-element rather than inline markup,
   so a plain Elementor button widget picks it up from a class alone.
   -------------------------------------------------------------------------- */
.btn,
.ccs-btn .elementor-button{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:lowercase;
  padding:15px 26px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease);
}
.btn:active,.ccs-btn .elementor-button:active{transform:translateY(1px);}

.btn--primary,
.ccs-btn--primary .elementor-button{background:var(--white);color:var(--navy);}
.btn--primary:hover,
.ccs-btn--primary .elementor-button:hover{background:var(--silver);color:var(--navy);}
.btn--ghost,
.ccs-btn--ghost .elementor-button{background:transparent;color:var(--white);border-color:var(--keyline);}
.btn--ghost:hover,
.ccs-btn--ghost .elementor-button:hover{border-color:var(--white);background:transparent;color:var(--white);}
.btn--sm,
.ccs-btn--sm .elementor-button{padding:11px 18px;font-size:11px;}

.section--light .btn--primary,
.section--light .ccs-btn--primary .elementor-button{background:var(--navy);color:var(--white);}
.section--light .btn--primary:hover,
.section--light .ccs-btn--primary .elementor-button:hover{background:var(--panel-2);color:var(--white);}
.section--light .btn--ghost,
.section--light .ccs-btn--ghost .elementor-button{color:var(--navy);border-color:var(--hairline-ink);}
.section--light .btn--ghost:hover,
.section--light .ccs-btn--ghost .elementor-button:hover{border-color:var(--navy);color:var(--navy);}

/* Elementor renders its own icon span; the design uses a trailing arrow, so
   the arrow is drawn here and the widget carries no icon. */
.btn svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .2s var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.ccs-btn--arrow .elementor-button-text::after{
  content:"";display:inline-block;vertical-align:middle;
  width:12px;height:12px;margin-left:10px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 6h11M8 1.5L12.5 6 8 10.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 6h11M8 1.5L12.5 6 8 10.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--ease);
}
.ccs-btn--arrow .elementor-button:hover .elementor-button-text::after{transform:translateX(3px);}

.btn:focus-visible,.arrow-link:focus-visible,
.ccs-btn .elementor-button:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
.section--light .btn:focus-visible,.section--light .arrow-link:focus-visible,
.section--light .ccs-btn .elementor-button:focus-visible{outline-color:var(--navy);}

/* The rule goes on the label, never on the link. A decoration set on the link
   propagates to every in-flow descendant and a child cannot cancel it, so an
   arrow inside an underlined link always picks up the line. */
.arrow-link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:lowercase;color:var(--white);
  text-decoration:none;
}
.arrow-link__label{
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);
  text-underline-offset:5px;transition:text-decoration-color .2s var(--ease);
}
.arrow-link:hover .arrow-link__label{text-decoration-color:var(--white);}
.arrow-link__arrow{transition:transform .2s var(--ease);}
.arrow-link:hover .arrow-link__arrow,
.card:hover .arrow-link__arrow{transform:translateX(4px);}
.section--light .arrow-link{color:var(--navy);}
.section--light .arrow-link__label{text-decoration-color:rgba(15,30,54,.35);}
.section--light .arrow-link:hover .arrow-link__label{text-decoration-color:var(--navy);}

/* --------------------------------------------------------------------------
   Brand devices
   -------------------------------------------------------------------------- */
.ccs-field{position:absolute;inset:0;pointer-events:none;z-index:0;}
.above,.ccs-above{position:relative;z-index:1;}

.icon{width:56px;height:56px;flex:none;display:block;}
.icon svg{width:56px;height:56px;display:block;}
.icon--sm,.icon--sm svg{width:46px;height:46px;}

.brand{display:block;line-height:0;flex:none;color:var(--white);}
.brand svg{width:212px;height:auto;display:block;}

/* --------------------------------------------------------------------------
   Media
   Corner ticks are eight background slices rather than four inline SVGs, so
   an ordinary Elementor image widget inside a .frame container gets them.
   -------------------------------------------------------------------------- */
.frame{position:relative;border:1px solid var(--keyline);overflow:hidden;}
.frame img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--grade);}
.frame > .elementor-widget-image,
.frame > .elementor-widget-image .elementor-widget-container,
.frame > .elementor-widget-image figure,
.frame > .elementor-widget-image a{height:100%;width:100%;margin:0;}
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.08) 45%,rgba(0,0,0,.55) 100%);
}
.frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.85;
  background-image:
    linear-gradient(var(--white),var(--white)),linear-gradient(var(--white),var(--white)),
    linear-gradient(var(--white),var(--white)),linear-gradient(var(--white),var(--white)),
    linear-gradient(var(--white),var(--white)),linear-gradient(var(--white),var(--white)),
    linear-gradient(var(--white),var(--white)),linear-gradient(var(--white),var(--white));
  background-repeat:no-repeat;
  background-size:12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--panel);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);padding:32px 30px;
  display:flex;flex-direction:column;gap:16px;
  text-decoration:none;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
	pointer-events: auto;
}
.card:hover{border-color:var(--white);transform:translateY(-2px);pointer-events: auto;}
.section--light .card{background:var(--white);border-color:var(--hairline-ink);}
.section--light .card:hover{border-color:var(--navy);background:var(--mist-tint);}
.card p{font-size:14.5px;color:var(--mist); margin-bottom: 0px;}
.section--light .card p{color:var(--slate);}
.card__num{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.14em;color:var(--silver);}
.card .arrow-link{margin-top:auto;}

/* Category badge, sized to its own text rather than the card */
.badge{
  display:inline-flex;align-items:center;align-self:flex-start;
  font-family:var(--body);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--silver);
  border:1px solid var(--hairline);border-radius:999px;padding:6px 13px;
}
.section--light .badge{color:var(--slate);border-color:var(--hairline-ink);}
.section--light .card__num{color:var(--slate);}

.feature{display:flex;gap:18px;}
.feature p{font-size:14px;color:var(--mist);margin-top:5px;}
.feature__rule{flex:none;width:1px;background:var(--hairline);}

/* --------------------------------------------------------------------------
   Trust ticker
   -------------------------------------------------------------------------- */
.trust{
  background:var(--panel);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:20px 0;display:flex;align-items:center;gap:20px;max-width:100%;overflow:hidden;
}
.trust__label{
  flex:none;padding-left:var(--gutter);
  font-family:var(--body);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:lowercase;color:var(--silver);
}
.marquee{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:ccs-ticker 42s linear infinite;}
.marquee__group{display:flex;flex:none;align-items:center;}
.marquee__item{
  font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.05em;
  text-transform:lowercase;color:var(--white);white-space:nowrap;
  margin-right:16px;display:flex;align-items:center;
}
.marquee__item::after{
  content:"";width:7px;height:7px;border:1px solid rgba(255,255,255,.45);
  border-radius:50%;margin-left:16px;flex:none;
}
@keyframes ccs-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none;}}

/* --------------------------------------------------------------------------
   Global header
   -------------------------------------------------------------------------- */
.topbar{
  background:var(--white);color:var(--slate);
  font-family:var(--body);font-weight:500;font-size:11.5px;letter-spacing:.05em;
}
.topbar p{margin:0;font-size:11.5px;color:var(--slate);}
.topbar strong,.topbar b{color:var(--navy);font-weight:600;}
.topbar a{text-decoration:none;color:var(--slate);}
.topbar a:hover{color:var(--navy);}

.masthead{background:var(--navy);border-bottom:1px solid var(--hairline);}

/* Elementor's nav-menu widget, dressed as the design's nav. */
.ccs-nav .elementor-nav-menu .elementor-item{
  font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:lowercase;color:var(--silver);
  padding:9px 12px;border-radius:var(--radius);
  transition:color .2s var(--ease),background .2s var(--ease);
  fill:currentColor;
}
.ccs-nav .elementor-nav-menu .elementor-item:hover,
.ccs-nav .elementor-nav-menu .elementor-item:focus,
.ccs-nav .elementor-nav-menu .elementor-item.highlighted{color:var(--white);background:transparent;}
.ccs-nav .elementor-nav-menu .elementor-item.elementor-item-active{color:var(--white);background:rgba(255,255,255,.07);}
.ccs-nav .elementor-nav-menu--main .elementor-nav-menu ul{
  background:var(--panel);border:1px solid var(--keyline);border-radius:var(--radius);
  padding:8px;min-width:250px;box-shadow:0 20px 44px rgba(0,0,0,.5);
}
.ccs-nav .elementor-nav-menu--main .elementor-nav-menu ul .elementor-sub-item{
  font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.06em;
  text-transform:lowercase;color:var(--silver);padding:9px 12px;border-radius:var(--radius);
}
.ccs-nav .elementor-nav-menu--main .elementor-nav-menu ul .elementor-sub-item:hover{color:var(--white);background:rgba(255,255,255,.07);}
/* Mobile drawer */
.ccs-nav .elementor-nav-menu--dropdown{background:var(--navy);border-bottom:1px solid var(--hairline);}
.ccs-nav .elementor-nav-menu--dropdown a{color:var(--silver);}
.ccs-nav .elementor-nav-menu--dropdown a:hover,
.ccs-nav .elementor-nav-menu--dropdown a.elementor-item-active{color:var(--white);background:rgba(255,255,255,.07);}
.ccs-nav .elementor-menu-toggle{color:var(--white);background:transparent;border:1px solid var(--keyline);border-radius:var(--radius);width:44px;height:40px;}
.ccs-nav .elementor-menu-toggle:hover{color:var(--white);}

/* --------------------------------------------------------------------------
   Global footer
   -------------------------------------------------------------------------- */
.footer{background:var(--panel);border-top:1px solid var(--hairline);position:relative;overflow:hidden;}
.footer h4,.ccs-foot-head{
  font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:lowercase;color:var(--silver);margin-bottom:18px;
}
.footer a{color:var(--mist);text-decoration:none;font-size:14px;transition:color .2s var(--ease);}
.footer a:hover{color:var(--white);}
.footer p{font-size:14px;color:var(--mist);}
.footer__blurb{font-size:14px;color:var(--mist);max-width:34ch;}
.footer__brand svg{width:210px;height:auto;display:block;}
.footer__contact{display:grid;gap:5px;font-size:13.5px;color:var(--mist);}
.footer__contact p{margin:0;font-size:13.5px;}
.footer__contact .name{color:var(--white);font-weight:600;display:block;}
.footer__contact .gap{margin-bottom:10px;}

/* Footer link lists come from icon-list widgets, so the marker is removed
   and the row spacing is taken from the design rather than the widget. */
.ccs-foot-links .elementor-icon-list-items{display:grid;gap:9px;}
.ccs-foot-links .elementor-icon-list-item a,
.ccs-foot-links .elementor-icon-list-text{
  color:var(--mist);font-size:14px;font-family:var(--body);
  transition:color .2s var(--ease);
}
.ccs-foot-links .elementor-icon-list-item:hover .elementor-icon-list-text{color:var(--white);}

.social{display:flex;gap:10px;}
.social a{
  width:38px;height:38px;border:1px solid var(--keyline);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.social a:hover{border-color:var(--white);background:rgba(255,255,255,.06);}
.social svg{width:15px;height:15px;fill:currentColor;color:var(--mist);}
.social a:hover svg{color:var(--white);}
.ccs-social .elementor-social-icon{
  background:transparent;border:1px solid var(--keyline);
  width:38px;height:38px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.ccs-social .elementor-social-icon:hover{border-color:var(--white);background:rgba(255,255,255,.06);}
.ccs-social .elementor-social-icon i,.ccs-social .elementor-social-icon svg{color:var(--mist);fill:var(--mist);font-size:15px;}
.ccs-social .elementor-social-icon:hover i,.ccs-social .elementor-social-icon:hover svg{color:var(--white);fill:var(--white);}

.footer__base{
  border-top:1px solid var(--hairline);
  font-size:12.5px;color:var(--silver);
}
.footer__base p{font-size:12.5px;color:var(--silver);margin:0;}

/* --------------------------------------------------------------------------
   Page head
   Inner-page opening. Photography behind the copy under a navy scrim, which
   keeps the animated field as a homepage-only device.
   -------------------------------------------------------------------------- */
.pagehead{position:relative;overflow:hidden;min-height:460px;}
.pagehead__bg{position:absolute;inset:0;z-index:0;}
.pagehead__bg img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--grade);}
/* Weighted left, because that is where the copy sits. The second gradient
   lifts the bottom edge so the band resolves into the section below it. */
.pagehead__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,30,54,.95) 0%,rgba(15,30,54,.9) 45%,rgba(15,30,54,.66) 76%,rgba(15,30,54,.45) 100%),
             linear-gradient(0deg,rgba(15,30,54,.75) 0%,rgba(15,30,54,0) 55%);
}
.pagehead__tagline{
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.9vw,21px);
  color:var(--white);letter-spacing:-.015em;line-height:1.35;
}
.pagehead__lede{font-size:17px;color:var(--mist);max-width:68ch;}
.pagehead__meta{
  font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:lowercase;color:var(--silver);
}

/* --------------------------------------------------------------------------
   Hero
   Copy band on flat navy, media below in a keyline frame. The field is held
   inside the copy band so it can never run under the photograph.
   -------------------------------------------------------------------------- */
.hero__band{position:relative;}
/* The field's right edge lands on the grid's right edge rather than the
   viewport's, so on ultra-wide screens the composition stays tied to the
   content instead of drifting off to the side. Opacity is the single dial for
   how strongly it reads, held back so body copy over it stays legible. */
.hero__fx{
  --edge:max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  position:absolute;top:0;bottom:0;left:auto;
  right:var(--edge);
  width:min(1320px, calc(100% - var(--edge)));
  pointer-events:none;z-index:0;opacity:.7;
}
.hero__tagline{
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.9vw,21px);
  color:var(--white);letter-spacing:-.015em;line-height:1.35;
}
.hero__lede{font-size:16.5px;color:var(--mist);max-width:56ch;}
.hero__support p{font-size:14.5px;color:var(--mist);padding-left:22px;border-left:1px solid var(--hairline);}

/* --------------------------------------------------------------------------
   Closing CTA band
   Last section on every page. Field sits inside the grid, not full bleed.
   -------------------------------------------------------------------------- */
.closing{position:relative;overflow:hidden;}
.closing__fx{
  position:absolute;top:0;bottom:0;
  left:50%;right:auto;transform:translateX(-50%);
  width:calc(min(var(--shell), 100%) - var(--gutter) * 2);
  pointer-events:none;z-index:0;opacity:.5;
}

/* --------------------------------------------------------------------------
   Matrix
   Hairline grid of short titled cells. Used wherever a page lists reasons,
   commitments or benefits. Numbering is optional.
   -------------------------------------------------------------------------- */
.matrix{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);
  border-radius:var(--radius);overflow:hidden;
}
.matrix--3{grid-template-columns:repeat(3,1fr);}
.matrix__item{
  background:var(--navy);padding:30px 26px;
  display:flex;flex-direction:column;gap:9px;min-height:190px;
  transition:background .2s var(--ease);
}
.matrix__item:hover{background:var(--panel);}
.matrix__num{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.14em;color:var(--silver);}
.matrix__item p{font-size:13.5px;color:var(--mist);}
.section--light .matrix{background:var(--hairline-ink);border-color:var(--hairline-ink);}
.section--light .matrix__item{background:var(--white);}
.section--light .matrix__item:hover{background:var(--mist-tint);}
.section--light .matrix__num{color:var(--slate);}
.section--light .matrix__item p{color:var(--slate);}

/* --------------------------------------------------------------------------
   Chips, notes
   -------------------------------------------------------------------------- */
/*.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}*/
.chip{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--hairline);border-radius:100px;
  padding:16px 20px;font-weight:600;font-size:14.5px;color:var(--white);
}
.chip p {
	margin-bottom: 0px;
}
/*.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--white);flex:none;}*/
.section--light .chip{border-color:var(--hairline-ink);color:var(--navy);}
.section--light .chip::before{background:var(--navy);}

/* Reserved for content the client still has to supply. Dashed, never solid,
   so it never reads as a finished element. */
.note{
  border:1px dashed var(--keyline);border-radius:var(--radius);
  padding:18px 22px;font-size:13.5px;color:var(--silver);
}
.note p{font-size:13.5px;color:var(--silver);margin:0;}
.section--light .note,.section--light .note p{border-color:var(--hairline-ink);color:var(--slate);}

/* --------------------------------------------------------------------------
   Process
   Numbered markers joined by a rule, with an arrow running into each next
   step. The marker sits on the section background so the rule reads as
   passing behind it rather than butting into it.
   -------------------------------------------------------------------------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;}
/* align-content:start matters: without it the auto rows stretch to the
   tallest item, so a step with shorter copy drops its heading lower than
   its neighbours. */
.process__item{position:relative;padding-right:44px;display:grid;gap:12px;justify-items:start;align-content:start;}
.process__num{
  position:relative;z-index:1;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--keyline);background:var(--navy);
  display:grid;place-items:center;
  font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.12em;color:var(--white);
}
.process__item:not(:last-child)::before{
  content:"";position:absolute;top:23px;left:0px;right:18px;height:1px;background:var(--hairline);
}
.process__item:not(:last-child)::after{
  content:"";position:absolute;top:19px;right:18px;width:8px;height:8px;
  border-top:1px solid var(--keyline);border-right:1px solid var(--keyline);
  transform:rotate(45deg);
}
.process__item p{font-size:14px;color:var(--mist);}
.section--light .process__num{background:var(--white);border-color:var(--hairline-ink);color:var(--navy);}
.section--light .process__item:not(:last-child)::before{background:var(--hairline-ink);}
.section--light .process__item:not(:last-child)::after{border-color:var(--hairline-ink);}
.section--light .process__item p{color:var(--slate);}

/* --------------------------------------------------------------------------
   Stat pair
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.stat{border:1px solid var(--hairline);border-radius:var(--radius);padding:28px 30px;}
.stat__figure{
  font-family:var(--display);font-weight:400;line-height:1;
  font-size:clamp(32px,3.8vw,46px);letter-spacing:-.03em;color:var(--white);
}
.stat p{margin-top:12px;font-size:14px;color:var(--mist);}
.section--light .stat{border-color:var(--hairline-ink);}
.section--light .stat__figure{color:var(--navy);}
.section--light .stat p{color:var(--slate);}

/* --------------------------------------------------------------------------
   Table
   Scrolls inside its own wrapper on narrow screens rather than forcing the
   page sideways.
   -------------------------------------------------------------------------- */
.table__wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius);}
.table{width:100%;min-width:760px;border-collapse:collapse;font-size:14.5px;}
.table th,.table td{text-align:left;vertical-align:top;padding:16px 22px;}
.table thead th{
  font-family:var(--body);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--silver);
  background:var(--panel);white-space:nowrap;
}
.table tbody tr + tr{border-top:1px solid var(--hairline);}
.table thead + tbody tr:first-child{border-top:1px solid var(--hairline);}
.table tbody th{font-family:var(--display);font-weight:600;font-size:15px;color:var(--white);letter-spacing:-.01em;width:24%;}
.table td{color:var(--mist);}
.table__note{font-size:13px;color:var(--silver);margin-top:16px;}

/* Comparison variant: the favoured column is lifted, the alternative is held
   back. Emphasis only, no claims added. */
.table--compare th:nth-child(2),
.table--compare td:nth-child(2){
  background:var(--panel-2);
  border-left:1px solid var(--keyline);
  border-right:1px solid var(--keyline);
}
.table--compare thead th:nth-child(2){color:var(--white);border-top:2px solid var(--white);}
.table--compare td:nth-child(2){color:var(--white);}
.table--compare td:nth-child(3){color:var(--silver);}
.table--compare tbody tr:last-child th:nth-child(2),
.table--compare tbody tr:last-child td:nth-child(2){border-bottom:1px solid var(--keyline);}
.section--light .table--compare th:nth-child(2),
.section--light .table--compare td:nth-child(2){background:var(--mist-tint);border-color:var(--hairline-ink);}
.section--light .table--compare thead th:nth-child(2){color:var(--navy);border-top-color:var(--navy);}
.section--light .table--compare td:nth-child(2){color:var(--navy);}
.section--light .table--compare td:nth-child(3){color:var(--slate);}
.section--light .table__wrap{border-color:var(--hairline-ink);}
.section--light .table thead th{background:var(--mist-tint);color:var(--slate);}
.section--light .table tbody tr + tr,
.section--light .table thead + tbody tr:first-child{border-color:var(--hairline-ink);}
.section--light .table tbody th{color:var(--navy);}
.section--light .table td{color:var(--slate);}
.section--light .table__note{color:var(--slate);}

/* --------------------------------------------------------------------------
   Spec block, stack list, spec lists
   -------------------------------------------------------------------------- */
.specblock{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;padding:44px 0;border-top:1px solid var(--hairline);}
.specblock:last-child{border-bottom:1px solid var(--hairline);}
.specblock__claim{
  font-family:var(--body);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--silver);
}
.section--light .specblock{border-color:var(--hairline-ink);}
.section--light .specblock__claim{color:var(--slate);}

.stack{list-style:none;display:grid;}
.stack__item{
  display:grid;grid-template-columns:auto 1fr;gap:0 20px;
  padding:20px 0;border-top:1px solid var(--hairline);
}
.stack__item:last-child{border-bottom:1px solid var(--hairline);}
.stack__num{
  font-family:var(--body);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;color:var(--silver);padding-top:5px;
}
.stack__item p{font-size:14px;color:var(--mist);}
.section--light .stack__item{border-color:var(--hairline-ink);}
.section--light .stack__num{color:var(--slate);}
.section--light .stack__item p{color:var(--slate);}

.speclist{list-style:none;display:grid;gap:12px;}
.speclist--2{grid-template-columns:repeat(2,1fr);gap:12px 44px;}
.speclist li{position:relative;padding-left:24px;font-size:15px;color:var(--mist);}
.speclist li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--white);}
.section--light .speclist li{color:var(--slate);}
.section--light .speclist li::before{background:var(--navy);}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq{border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;}
.faq__item + .faq__item{border-top:1px solid var(--hairline);}
.faq__q{
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 24px;font-family:var(--display);font-weight:600;font-size:16.5px;
  letter-spacing:-.01em;color:var(--white);
}
.faq__q:hover{background:var(--panel);}
.faq__q svg{flex:none;width:14px;height:14px;stroke:var(--white);stroke-width:1.6;fill:none;transition:transform .2s var(--ease);}
.faq__item.is-open .faq__q svg{transform:rotate(45deg);}
.faq__a{display:none;padding:4px 24px 26px;font-size:15px;color:var(--mist);max-width:78ch;}
.faq__item.is-open .faq__a > * + *{margin-top:14px;}
.faq__a strong{color:var(--white);font-weight:600;}
.faq__item.is-open .faq__a{display:block;}

/* --------------------------------------------------------------------------
   Forms
   Styling the Elementor Pro form widget rather than raw inputs, so the field
   set stays editable in the builder.
   -------------------------------------------------------------------------- */
.ccs-form .elementor-field-group > label,
.field label{
  font-family:var(--body);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--silver);
  margin-bottom:8px;
}
.ccs-form .elementor-field-textual,
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:15px;color:var(--white);
  background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:14px 16px;transition:border-color .2s var(--ease);
}
.ccs-form textarea.elementor-field-textual,
.field textarea{min-height:150px;resize:vertical;}
.ccs-form .elementor-field-textual:focus,
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--white);box-shadow:none;}
.ccs-form .elementor-field-textual::placeholder,
.field input::placeholder,.field textarea::placeholder{color:var(--slate);}
.ccs-form .elementor-button[type="submit"]{
  font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:lowercase;
  padding:15px 26px;border-radius:var(--radius);
  background:var(--white);color:var(--navy);border:1px solid transparent;
}
.ccs-form .elementor-button[type="submit"]:hover{background:var(--silver);color:var(--navy);}
.field__hint{font-size:12.5px;color:var(--silver);}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1040px){
  .matrix,.matrix--3{grid-template-columns:repeat(2,1fr);}
}
/* Two-up only. Bounded at the low end so the end-of-row rule does not
   suppress connectors once the steps stack. */
@media (max-width:1040px) and (min-width:901px){
  .process{grid-template-columns:repeat(2,1fr);row-gap:44px;}
  .process__item:nth-child(2n)::before,.process__item:nth-child(2n)::after{display:none;}
}

@media (max-width:1024px){
  :root{--gutter:22px;}
  .speclist--2{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .specblock{grid-template-columns:1fr;gap:26px;}
  /* Stacked: the marker lifts out of flow and the copy indents past it, so
     the connector has a clear lane instead of running behind the text. */
  .process{grid-template-columns:1fr;gap:32px;}
  .process__item{padding-right:0;padding-left:70px;}
  .process__num{position:absolute;left:0;top:0;}
  .process__item:not(:last-child)::before{display: none;}
  .process__item:not(:last-child)::after{display: none;}
  .pagehead{min-height:340px;}
  /* One column stacks the copy over the whole band, so the field pulls back. */
  .hero__fx{width:78%;opacity:.5;}
  .hero__support p{padding-left:0;border-left:none;border-top:1px solid var(--hairline);padding-top:16px;}
  .brand svg,.footer__brand svg{width:176px;}
}

@media (max-width:620px){
  .matrix,.matrix--3{grid-template-columns:1fr;}
  .chips{grid-template-columns:1fr;}
  .trust{flex-direction:column;align-items:flex-start;gap:12px;}
  .trust__label{padding-left:var(--gutter);}
}
/* /BEMCP:ccs-design-system */

/* BEMCP:ccs-elementor-layout — managed block, do not edit inline. */
/* ==========================================================================
   Elementor layout bridge
   Elementor grid containers read their tracks from --e-con-grid-template-columns,
   so the design's column ratios are set through that variable rather than by
   fighting the builder's own display rules.
   ========================================================================== */

/* Header ------------------------------------------------------------------ */
.masthead{position:sticky;top:0;z-index:80;}
.masthead__brand{line-height:0;}
.ccs-nav__cta .elementor-button{white-space:nowrap;}
/* The nav row must not stretch the logo, and must sit hard right. */
.masthead .e-con-inner > .masthead__brand{flex:none;}

/* Footer ------------------------------------------------------------------ */
.footer__grid{--e-con-grid-template-columns:1.5fr 1fr 1fr 1.2fr;}
@media (max-width:1040px){.footer__grid{--e-con-grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.footer__grid{--e-con-grid-template-columns:1fr;}}

/* Hero -------------------------------------------------------------------- */
.hero__grid{--e-con-grid-template-columns:1.15fr .85fr;}
.hero__frame{height:min(56vw,540px);border-left:none;border-right:none;}
.hero__ctas{align-items:center;}

/* Positioning statement --------------------------------------------------- */
.position__grid{--e-con-grid-template-columns:1.05fr .95fr;}
.position__frame{height:min(64vw,600px);}
/* Operator is hard right in this frame, so a centre crop cuts them out */
.position__frame img{object-position:right center;}
.position__badge{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px dashed var(--keyline);border-radius:var(--radius);
  min-width:210px;min-height:76px;padding:16px 22px;text-align:center;
  font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  text-transform:lowercase;color:var(--silver);line-height:1.5;align-self:flex-start;
}
.position__badge p{margin:0;font-size:10.5px;color:var(--silver);}

/* Services ---------------------------------------------------------------- */
.services__grid{--e-con-grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.services__grid{--e-con-grid-template-columns:1fr;}}

/* Why choose CCS ---------------------------------------------------------- */
.matrix{--e-con-grid-template-columns:repeat(4,1fr);}
.matrix p {margin-bottom: 0px;}
@media (max-width:1040px){.matrix{--e-con-grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.matrix{--e-con-grid-template-columns:1fr;}}
/* As an Elementor grid container the hairlines come from the gap showing the
   wrapper behind, exactly as in the comp. */
.matrix{gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;}
.matrix > .e-con{background:var(--navy);transition:background .2s var(--ease);}
.matrix > .e-con:hover{background:var(--panel);}
.section--light .matrix{background:var(--hairline-ink);border-color:var(--hairline-ink);}
.section--light .matrix > .e-con{background:var(--white);}
.section--light .matrix > .e-con:hover{background:var(--mist-tint);}

/* Capability -------------------------------------------------------------- */
.capability__grid{--e-con-grid-template-columns:1.1fr .9fr;}
.capability__frame{height:min(52vw,470px);}

@media (max-width:900px){
  .hero__grid,.position__grid,.capability__grid{--e-con-grid-template-columns:1fr;}
  .hero__frame{height:64vw;}
  .position__frame,.capability__frame{height:70vw;}
}

/* A card is a whole clickable container, so the hover state has to be driven
   from the container rather than an inner anchor. */
.card > a.e-con-full-link,.card > a{position:absolute;inset:0;z-index:2;}
/* /BEMCP:ccs-elementor-layout */

/* BEMCP:ccs-elementor-fixes — managed block, do not edit inline. */
/* ==========================================================================
   Build corrections
   Small adjustments that only surface once the design system is running on
   Elementor's own markup.
   ========================================================================== */

.card{position:relative;}

/* Closing band: the copy keeps a reading measure inside the centred column. */
.closing__copy{max-width:52ch;margin-left:auto;margin-right:auto;}
.closing__copy p{font-size:17.5px;color:var(--mist);}

/* The eyebrow is a paragraph inside a text editor, so the flex row that draws
   its rule has to be re-established on the paragraph itself. */
.elementor-widget-text-editor p.eyebrow{display:flex;}

/* A boxed Elementor container centres its own inner wrapper, so the trust bar
   must not inherit a max width from anywhere above it. */
.trust{width:100%;}

/* Image widgets inside a frame fill it rather than sitting at intrinsic size. */
.frame .elementor-widget-image img{width:100%;height:100%;object-fit:cover;}

/* Grid children stretch by default; the matrix cells rely on that to keep the
   hairlines unbroken, but a flex column inside still needs to start at the top. */
.matrix > .e-con{align-content:flex-start;}

/* The home positioning intro is the comp's hero__support copy. It was built as
   a 60%-wide centre-aligned block, which read as a deliberate centred band
   until the copy itself was set left — at which point it was just indented text
   floating in an empty row. Now at the gutter with a reading measure, the same
   as every other body block on the site. */
.position__intro{max-width:72ch;}
/* /BEMCP:ccs-elementor-fixes */

/* BEMCP:ccs-widget-colour — managed block, do not edit inline. */
/* ==========================================================================
   Widget colour bindings
   Elementor's heading and text widgets colour themselves from the kit globals
   rather than from the element tag, so the design system has to state the
   intent again at the widget level. Everything here mirrors the plain-element
   rules further up; it exists only to out-specify the builder's own defaults.

   The two bare widget rules carry a `body` prefix. Without it they sit at the
   same specificity as Elementor's own kit defaults and the winner is decided
   by source order — which is NOT reliable. Elementor reprints the unscoped
   defaults for text-editor, heading and button inside every loop template's
   stylesheet, and that stylesheet is emitted in the BODY, after this file. On
   the one page carrying a loop grid the kit was winning and the footer labels
   came out white against mist everywhere else. The extra element takes the
   decision away from ordering.
   ========================================================================== */

body .elementor-widget-heading .elementor-heading-title{color:var(--white);}
body .elementor-widget-text-editor,
body .elementor-widget-text-editor p{color:var(--mist);}

/* The light band inverts the whole ramp. */
.section--light .elementor-widget-heading .elementor-heading-title{color:var(--navy);}
.section--light .elementor-widget-text-editor,
.section--light .elementor-widget-text-editor p{color:var(--slate);}
.section--light .elementor-widget-text-editor p.matrix__num{color:var(--slate);}

/* Type ramp per level, since the kit's tag styles do not reach the widget.
   These already clear the kit's defaults on the tag selector, so they need no
   extra qualification. */
.elementor-widget-heading h1.elementor-heading-title{font-family:var(--display);font-weight:400;letter-spacing:-.035em;line-height:1.05;}
.elementor-widget-heading h2.elementor-heading-title{font-family:var(--display);font-weight:400;letter-spacing:-.03em;line-height:1.05;}
.elementor-widget-heading h3.elementor-heading-title{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.015em;line-height:1.3;}
.elementor-widget-heading h4.elementor-heading-title{font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.01em;line-height:1.35;}

/* Utility paragraphs keep their own colour regardless of the wrapper. */
.elementor-widget-text-editor p.eyebrow{color:var(--silver);}
.section--light .elementor-widget-text-editor p.eyebrow{color:var(--slate);}
.elementor-widget-text-editor p.hero__tagline,
.elementor-widget-text-editor p.pagehead__tagline{color:var(--white);}
.elementor-widget-text-editor p.matrix__num,
.elementor-widget-text-editor p.card__num{color:var(--silver);}
.card .elementor-widget-text-editor p{font-size:14.5px;}
.matrix .elementor-widget-text-editor p{font-size:13.5px;}

/* --------------------------------------------------------------------------
   Header row
   The logo holds its size, the CTA never shrinks, and only the menu is allowed
   to give way — otherwise a long menu pushes the button past the grid edge.
   -------------------------------------------------------------------------- */
.masthead .e-con-inner{min-width:0;}
.masthead__brand{flex:0 0 auto;}
.ccs-nav{flex:1 1 auto;min-width:0;}
.ccs-nav__cta{flex:0 0 auto;}
.ccs-nav .ccs-nav__menu{min-width:0;}
.ccs-nav .elementor-nav-menu--main .elementor-nav-menu{flex-wrap:nowrap;}
@media (max-width:1200px){
  .ccs-nav .elementor-nav-menu .elementor-item{padding-left:9px;padding-right:9px;letter-spacing:.04em;}
}
/* /BEMCP:ccs-widget-colour */

/* BEMCP:ccs-fonts — managed block, do not edit inline. */
/* ==========================================================================
   Brand faces
   Self-hosted rather than pulled from Google, so typography matches the
   signed-off comp exactly and the first paint does not depend on a third
   party. Both files are variable, which is why one @font-face covers the
   whole weight range each.
   ========================================================================== */
@font-face{
  font-family:'Chivo';
  src:url('/wp-content/uploads/2026/08/chivo-vf.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('/wp-content/uploads/2026/08/plus-jakarta-sans-latin.woff2') format('woff2-variations');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
/* /BEMCP:ccs-fonts */

/* BEMCP:ccs-token-namespace — managed block, do not edit inline. */
/* ==========================================================================
   Token namespacing
   Elementor gives every container `--display: flex` and sets `display` from
   it, so a design token also called `--display` is overwritten on everything
   inside a container. Headings then resolved to `font-family: flex`, which is
   invalid, and fell back to the browser's default serif.

   The brand faces therefore live on namespaced tokens. This block loads last,
   so these declarations win over the earlier ones at equal specificity, and
   nothing in the design system depends on the clobbered names any more.
   ========================================================================== */
:root{
  --ccs-display:'Chivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --ccs-body:'Plus Jakarta Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
}

/* Display face ------------------------------------------------------------ */
h1,h2,h3,h4,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.hero__tagline,
.elementor-widget-text-editor p.hero__tagline,
.pagehead__tagline,
.elementor-widget-text-editor p.pagehead__tagline,
.stat__figure,
.table tbody th,
.faq__q{font-family:var(--ccs-display);}

/* Text face --------------------------------------------------------------- */
body,
.eyebrow,
.elementor-widget-text-editor p.eyebrow,
.btn,
.ccs-btn .elementor-button,
.arrow-link,
.card__num,
.badge,
.trust__label,
.marquee__item,
.topbar,
.topbar p,
.ccs-nav .elementor-nav-menu .elementor-item,
.ccs-nav .elementor-nav-menu--main .elementor-nav-menu ul .elementor-sub-item,
.footer h4,
.ccs-foot-head,
.ccs-foot-links .elementor-icon-list-item a,
.ccs-foot-links .elementor-icon-list-text,
.pagehead__meta,
.matrix__num,
.elementor-widget-text-editor p.matrix__num,
.process__num,
.table thead th,
.specblock__claim,
.stack__num,
.stack__num,
.position__badge,
.position__badge p,
.field label,
.field input,
.field select,
.field textarea,
.ccs-form .elementor-field-group > label,
.ccs-form .elementor-field-textual,
.ccs-form .elementor-button[type="submit"]{font-family:var(--ccs-body);}
/* /BEMCP:ccs-token-namespace */

/* BEMCP:ccs-header-row — managed block, do not edit inline. */
/* ==========================================================================
   Header row sizing
   A full-width Elementor container takes width:100% of its parent, so the nav
   wrapper measured the full 1240px grid and pushed the CTA past the right
   edge. Sizing it to its content and letting the parent's space-between do
   the alignment is what keeps the row inside the shell.
   ========================================================================== */
.ccs-nav{width:auto;flex:0 1 auto;min-width:0;}
.ccs-nav > .elementor-widget{width:auto;max-width:100%;}
.ccs-nav > .elementor-widget-nav-menu{flex:0 1 auto;min-width:0;}
.ccs-nav > .elementor-widget-button{flex:0 0 auto;}
.ccs-nav .elementor-nav-menu--main .elementor-nav-menu{flex-wrap:nowrap;}
.masthead .e-con-inner{flex-wrap:nowrap;min-width:0;}
.masthead .elementor-widget-shortcode{flex:0 0 auto;}
.masthead .brand svg{width:212px;max-width:100%;}

@media (max-width:1180px){
  .masthead .brand svg{width:176px;}
  .ccs-nav .elementor-nav-menu .elementor-item{padding-left:8px;padding-right:8px;letter-spacing:.04em;}
}

/* ==========================================================================
   Brand field positioning context
   The field is absolutely positioned, but Elementor makes every widget
   wrapper position:relative — so it was sizing against a zero-height wrapper
   instead of the band. Taking the wrapper out of the positioning chain lets
   the canvas fill the section, which is what the design intends.
   ========================================================================== */
.hero__band > .elementor-widget-shortcode,
.closing > .elementor-widget-shortcode{position:static;}
/* /BEMCP:ccs-header-row */


/* BEMCP:ccs-footer-heads — managed block, do not edit inline. */
/* ==========================================================================
   Footer column labels
   These are set as h4 widgets so they stay real headings for structure, but
   the design treats them as micro-labels. The type has to be stated on the
   heading element itself, since the widget's own h4 rule out-specifies a
   class on the wrapper.

   The widget class is carried here as well. `.ccs-foot-head
   .elementor-heading-title` alone ties with Elementor's unscoped
   `.elementor-widget-heading .elementor-heading-title`, which loop templates
   reprint from the body — after this file. That flipped these labels to the
   kit's white on the careers page while every other page kept silver.
   ========================================================================== */
.elementor-widget-heading.ccs-foot-head .elementor-heading-title{
  font-family:var(--ccs-body);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.16em;
  line-height:1.4;
  text-transform:lowercase;
  color:var(--silver);
}
.ccs-foot-head{margin-bottom:18px;}
/* /BEMCP:ccs-footer-heads */

/* BEMCP:ccs-mobile-fixes — managed block, do not edit inline. */
/* ==========================================================================
   Mobile
   The logo steps down with the viewport too, but that sits in
   ccs-native-elements alongside its base size: all four rules need the same
   weight to clear Elementor's own SVG sizing, and equal weight is settled by
   source order.
   ========================================================================== */

/* The trust bar stacks below 620, and a column flex container sizes its items
   to their content — which let the marquee grow to its full 2000px track and
   pushed the page sideways. Stretching the items keeps the mask doing its job
   while the label stays left-aligned. */
@media (max-width:620px){
  .trust{flex-direction:column;align-items:stretch;gap:12px;}
  .trust__label{align-self:flex-start;}
  .marquee{width:100%;max-width:100%;}
}

/* Header: the logo, burger and CTA have to share a narrow row, so the button
   tightens rather than pushing the row wider than the screen. */
@media (max-width:767px){
  .ccs-nav{gap:6px;}
  .ccs-nav__cta .elementor-button{padding:10px 13px;font-size:10.5px;letter-spacing:.06em;}
  .ccs-nav__cta .elementor-button-text::after{display:none;}
}
@media (max-width:400px){
  .ccs-nav__cta .elementor-button{padding:9px 10px;font-size:10px;}
}

/* Nothing in the design is allowed to set the page's horizontal scroll. */
.marquee,
.trust{max-width:100%;}
.hero__band,
.closing{max-width:100vw;}
/* /BEMCP:ccs-mobile-fixes */

/* BEMCP:ccs-native-elements — managed block, do not edit inline. */
/* ==========================================================================
   Native widget bridge
   The logo, the service icons and the arrow links are Elementor widgets, not
   shortcodes, so the design system's classes are restated here against the
   markup Elementor actually emits.
   ========================================================================== */

/* Logo ---------------------------------------------------------------------
   A Site Logo widget, so the file is set once in Site Settings > Site
   Identity and both the header and the footer follow it.

   Two things need heading off. The mark carries a viewBox and no width or
   height, so WordPress stores no dimensions and writes width="1" height="1"
   onto the tag; left alone the UA stylesheet takes its ratio from those
   attributes and squares the logo off. And Elementor pins any linked SVG in an
   image widget to 48px through a selector of its own, so every rule that sizes
   the mark — including the responsive steps at the foot of this block — has to
   out-specify it rather than merely follow it. */
.masthead__brand,.footer__brand{line-height:0;flex:none;}
.masthead__brand .elementor-widget-container,
.footer__brand .elementor-widget-container{line-height:0;}
.masthead__brand a,.footer__brand a{display:block;line-height:0;}
.masthead__brand img,.footer__brand img,
.elementor-widget-image.masthead__brand a img[src$=".svg"],
.elementor-widget-image.footer__brand a img[src$=".svg"]{
  width:212px;height:auto;aspect-ratio:2943.99/808.45;
  display:block;max-width:none;
}

/* Service icons ------------------------------------------------------------
   Unlinked, so Elementor's SVG rule does not reach them, but the qualified
   selector is here so it stays that way if one ever gets a link. */
.ccs-icon{flex:none;line-height:0;}
.ccs-icon .elementor-widget-container{line-height:0;}
.ccs-icon img,
.elementor-widget-image.ccs-icon a img[src$=".svg"]{
  width:56px;height:56px;display:block;max-width:none;
}
.ccs-icon--sm img,
.elementor-widget-image.ccs-icon--sm a img[src$=".svg"]{width:46px;height:46px;}

/* Arrow links --------------------------------------------------------------
   A button widget stripped back to a text link. The rule goes on the label
   span, never on the anchor: a decoration set on the link propagates to every
   in-flow descendant and the arrow cannot cancel it. */
.ccs-link.elementor-widget-button .elementor-button{
  position:static;
  display:inline-flex;align-items:center;gap:9px;
  background:none;border:0;border-radius:0;padding:0;
  font-family:var(--ccs-body);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:lowercase;color:var(--white);
  text-decoration:none;box-shadow:none;
}
.ccs-link.elementor-widget-button .elementor-button:hover,
.ccs-link.elementor-widget-button .elementor-button:focus{background:none;color:var(--white);}
.ccs-link.elementor-widget-button .elementor-button:active{transform:none;}
.ccs-link.elementor-widget-button .elementor-button:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
/* The wrapper is dropped from the box tree so the label and the arrow sit as
   siblings in the same flex row. */
.ccs-link .elementor-button-content-wrapper{display:contents;}
.ccs-link .elementor-button-text{
  flex-grow:0;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);
  text-underline-offset:5px;transition:text-decoration-color .2s var(--ease);
}
.ccs-link .elementor-button:hover .elementor-button-text{text-decoration-color:var(--white);}
.ccs-link .elementor-button::after{
  content:"\2192";font-size:13px;line-height:1;
  transition:transform .2s var(--ease);
}
.ccs-link .elementor-button:hover::after,
.card:hover .ccs-link .elementor-button::after{transform:translateX(4px);}

.section--light .ccs-link.elementor-widget-button .elementor-button,
.section--light .ccs-link.elementor-widget-button .elementor-button:hover{color:var(--navy);}
.section--light .ccs-link .elementor-button-text{text-decoration-color:rgba(15,30,54,.35);}
.section--light .ccs-link .elementor-button:hover .elementor-button-text{text-decoration-color:var(--navy);}
.section--light .ccs-link.elementor-widget-button .elementor-button:focus-visible{outline-color:var(--navy);}

/* Card stretched link ------------------------------------------------------
   The Learn more anchor carries the destination and its pseudo-element covers
   the card, so the whole card is clickable while screen readers still get real
   link text instead of an empty overlay. The card is the containing block, so
   the anchor itself must stay unpositioned. */
.card > .ccs-link{margin-top:auto;}
.card .ccs-link .elementor-button::before{content:"";position:absolute;inset:0;z-index:1;}

/* Logo, responsive ---------------------------------------------------------
   Last in the block, so equal weight resolves in these rules' favour. */
@media (max-width:767px){
  .masthead__brand img,
  .elementor-widget-image.masthead__brand a img[src$=".svg"]{width:150px;}
}
@media (max-width:400px){
  .masthead__brand img,
  .elementor-widget-image.masthead__brand a img[src$=".svg"]{width:128px;}
  .footer__brand img,
  .elementor-widget-image.footer__brand a img[src$=".svg"]{width:180px;}
}
/* /BEMCP:ccs-native-elements */

/* BEMCP:ccs-inner-pages — managed block, do not edit inline. */
/* ==========================================================================
   Inner pages
   Composition for about, capability statement, careers, contact and the
   position template.

   Two rules of thumb run through this block.

   Grid tracks are NOT set here. Elementor writes
   --e-con-grid-template-columns at .elementor-NNN .elementor-element.<id>,
   which outranks any class rule in this file, so every ratio and every
   breakpoint is set on the container itself (Layout > Columns, with the unit
   switched to custom for ratios like "1.05fr .95fr").

   Anything that restyles a widget's own chrome is qualified with the widget
   class. Elementor and its Pro stylesheets target the same parts at two
   classes, which ties on specificity and is then settled by load order — a tie
   this file kept losing. Adding the widget class puts the question beyond
   order.
   ========================================================================== */

/* Buttons ------------------------------------------------------------------
   A ghost button was rendering as a solid white block because the kit's
   background was winning that tie. */
.elementor-widget-button.ccs-btn--primary .elementor-button{background:var(--white);color:var(--navy);}
.elementor-widget-button.ccs-btn--primary .elementor-button:hover{background:var(--silver);color:var(--navy);}
.elementor-widget-button.ccs-btn--ghost .elementor-button{
  background:transparent;color:var(--white);border:1px solid var(--keyline);
}
.elementor-widget-button.ccs-btn--ghost .elementor-button:hover{
  background:transparent;color:var(--white);border-color:var(--white);
}
.section--light .elementor-widget-button.ccs-btn--primary .elementor-button{background:var(--navy);color:var(--white);}
.section--light .elementor-widget-button.ccs-btn--primary .elementor-button:hover{background:var(--panel-2);color:var(--white);}
.section--light .elementor-widget-button.ccs-btn--ghost .elementor-button{color:var(--navy);border-color:var(--hairline-ink);}
.section--light .elementor-widget-button.ccs-btn--ghost .elementor-button:hover{color:var(--navy);border-color:var(--navy);}

/* Page head ----------------------------------------------------------------
   The band is a full-width column container justified to its end, so the copy
   sits on the bottom edge and the backdrop can size to the whole band. The
   image widget already carries pagehead__bg, which is absolute, so only its
   inner wrapper needs to be told to fill. */
.pagehead__bg .elementor-widget-container{height:100%;}
.pagehead h1,
.pagehead .elementor-widget-heading h1.elementor-heading-title{font-size:clamp(30px,4.2vw,50px);}
.pagehead__in{max-width:70%;}
@media (max-width:1024px){.pagehead__in{max-width:100%;}}

/* Section heads ------------------------------------------------------------- */
.why__head{max-width:18ch;}
.caps__head{max-width:62ch;}
.offer__head{max-width:60ch;}
.roles__head{max-width:64ch;}

/* Media frames -------------------------------------------------------------- */
.safety__frame{height:min(56vw,480px);}
.commit__frame{height:min(56vw,470px);}
@media (max-width:1024px){
  .safety__frame{height:64vw;}
  .commit__frame{height:64vw;}
}

/* Numbered stack -----------------------------------------------------------
   Three widgets per item rather than a nested wrapper: the number is pinned to
   the first column across both rows and everything else falls into the second,
   which gets the comp's layout without an extra container per row. */
.stack__item{border-top:1px solid var(--hairline);}
.stack > .e-con:last-child{border-bottom:1px solid var(--hairline);}
.stack__item > .stack__num{grid-column:1;grid-row:1 / span 2;align-self:start;padding-top:5px;}
.stack__item > *:not(.stack__num){grid-column:2;}
.stack__item .elementor-widget-text-editor p{font-size:14px;color:var(--mist);}
.stack__item .stack__num p{font-size:10.5px;letter-spacing:.14em;color:var(--silver);}
.section--light .stack__item{border-color:var(--hairline-ink);}
.section--light .stack > .e-con:last-child{border-bottom-color:var(--hairline-ink);}

/* Application process ------------------------------------------------------
   The connectors between steps are drawn on .process__item in the design
   system. They only need re-pointing as the grid drops to two columns and then
   to one, where the run turns vertical. */
.process__item{padding-right:44px;}
.process .elementor-widget-text-editor p{font-size:14px;color:var(--mist);}
@media (max-width:1024px){
  .process__item:nth-child(2n)::before,
  .process__item:nth-child(2n)::after{display:none;}
}
@media (max-width:767px){
  .process__item{padding-right:0;padding-left:70px;}
  .process__num{position:absolute;left:0;top:0;}
  .process__item:not(:last-child)::before{
    display:block;top:54px;bottom:-44px;left:23px;right:auto;width:1px;height:auto;
  }
  .process__item:not(:last-child)::after{
    display:none;
  }
}

/* Contact details ----------------------------------------------------------- */
.details{
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  border-radius:var(--radius);overflow:hidden;
}
.details > .e-con{background:var(--navy);}
.detail__name p{
  font-family:var(--ccs-display);font-weight:600;font-size:17px;
  color:var(--white);letter-spacing:-.015em;
}
.detail__role p{
  font-family:var(--ccs-body);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--silver);
}
.detail__link a{
  color:var(--mist);font-size:15px;text-decoration:none;
  border-bottom:1px solid var(--hairline);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.detail__link a:hover{color:var(--white);border-color:var(--white);}
.detail p{font-size:14.5px;color:var(--mist);}

/* Position template --------------------------------------------------------- */
.role__rail{position:sticky;top:32px;}
.elementor-widget-icon-list.role__rail .elementor-icon-list-item{margin:0;}
.elementor-widget-icon-list.role__rail .elementor-icon-list-icon{display:none;}
.elementor-widget-icon-list.role__rail .elementor-icon-list-item > a{
  display:block;font-size:13.5px;color:var(--mist);text-decoration:none;
  padding:7px 0 7px 16px;border-left:1px solid var(--hairline);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.elementor-widget-icon-list.role__rail .elementor-icon-list-item > a:hover{
  color:var(--white);border-color:var(--white);
}
.role__block h2,
.role__block .elementor-widget-heading h2.elementor-heading-title{font-size:clamp(22px,2.4vw,28px);}
.role__block .elementor-widget-text-editor p{color:var(--mist);font-size:15.5px;}
.apply__lede p{color:var(--mist);font-size:15.5px;}
@media (max-width:1024px){.role__rail{position:static;}}

/* Spec lists ---------------------------------------------------------------
   Any list inside a text editor or an ACF-bound block takes the design's rule
   marker, so the client writes an ordinary bulleted list and it comes out
   right. */
.ccs-list ul,
.role__block ul{list-style:none;display:grid;gap:6px;padding-left:0;margin:0;}
.ccs-list ul li,
.role__block ul li{position:relative;padding-left:24px;font-size:15px;color:var(--mist);}
.ccs-list ul li::before,
.role__block ul li::before{
  content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--white);
}
.section--light .ccs-list ul li,
.section--light .role__block ul li{color:var(--slate);}
.section--light .ccs-list ul li::before,
.section--light .role__block ul li::before{background:var(--navy);}

/* Forms --------------------------------------------------------------------
   Elementor's form widget draws its own field chrome, so the design's .field
   rules are restated against .elementor-field-group. Row and column gaps come
   from the widget's own controls rather than being fought here. */
.elementor-widget-form.ccs-form .elementor-field-group > label.elementor-field-label{
  font-family:var(--ccs-body);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--silver);
  padding-bottom:8px;
}
.elementor-widget-form.ccs-form .elementor-mark-required .elementor-field-label::after{
  color:var(--silver);margin-inline-start:3px;
}
.elementor-widget-form.ccs-form .elementor-field-textual,
.elementor-widget-form.ccs-form select.elementor-field{
  width:100%;font-family:var(--ccs-body);font-size:15px;line-height:1.4;
  color:var(--white);background:var(--panel);
  border:1px solid var(--hairline);border-radius:var(--radius);
  padding:14px 16px;transition:border-color .2s var(--ease);
}
.elementor-widget-form.ccs-form textarea.elementor-field-textual{min-height:150px;resize:vertical;}
.elementor-widget-form.ccs-form .elementor-field-textual:focus,
.elementor-widget-form.ccs-form select.elementor-field:focus{
  outline:none;border-color:var(--white);box-shadow:none;
}
.elementor-widget-form.ccs-form .elementor-field-textual::placeholder{color:var(--slate);}
.elementor-widget-form.ccs-form select.elementor-field{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--silver) 50%),
    linear-gradient(135deg,var(--silver) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.elementor-widget-form.ccs-form input[type="file"].elementor-field{
  padding:10px 14px;font-size:14px;color:var(--silver);cursor:pointer;
  background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius);
}
.elementor-widget-form.ccs-form input[type="file"].elementor-field::file-selector-button{
  font-family:var(--ccs-body);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:lowercase;
  color:var(--navy);background:var(--white);border:none;border-radius:var(--radius);
  padding:9px 15px;margin-right:14px;cursor:pointer;
  transition:background .2s var(--ease);
}
.elementor-widget-form.ccs-form input[type="file"].elementor-field::file-selector-button:hover{background:var(--silver);}
.elementor-widget-form.ccs-form .elementor-field-description{font-size:12.5px;color:var(--silver);margin-top:6px;}
.elementor-widget-form.ccs-form .elementor-message{font-family:var(--ccs-body);font-size:14px;color:var(--mist);}
.elementor-widget-form.ccs-form .elementor-message.elementor-message-success{color:var(--white);}
.elementor-widget-form.ccs-form .elementor-field-type-submit{margin-top:6px;}
.elementor-widget-form.ccs-form .elementor-button[type="submit"]{
  font-family:var(--ccs-body);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:lowercase;
  padding:15px 26px;border-radius:var(--radius);border:1px solid transparent;
  background:var(--white);color:var(--navy);
}
.elementor-widget-form.ccs-form .elementor-button[type="submit"]:hover{background:var(--silver);color:var(--navy);}
.section--light .elementor-widget-form.ccs-form .elementor-button[type="submit"]{background:var(--navy);color:var(--white);}
.section--light .elementor-widget-form.ccs-form .elementor-button[type="submit"]:hover{background:var(--panel-2);color:var(--white);}

/* FAQ ----------------------------------------------------------------------
   The accordion carries no icon, so the plus is drawn here rather than pulling
   in a whole icon font for one mark. With the icon control emptied Elementor
   renders no icon span at all, so the mark hangs off the title row itself and
   rotates into a cross when the item opens. */
.elementor-widget-accordion.ccs-faq .elementor-accordion{
  border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;
}
.elementor-widget-accordion.ccs-faq .elementor-accordion-item{border:0;}
.elementor-widget-accordion.ccs-faq .elementor-accordion-item + .elementor-accordion-item{
  border-top:1px solid var(--hairline);
}
.elementor-widget-accordion.ccs-faq .elementor-tab-title{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 24px;background:none;border:0;margin:0;cursor:pointer;
  transition:background .2s var(--ease);
}
.elementor-widget-accordion.ccs-faq .elementor-tab-title:hover{background:var(--panel);}
.elementor-widget-accordion.ccs-faq .elementor-accordion-title{
  font-family:var(--ccs-display);font-weight:600;font-size:16.5px;
  letter-spacing:-.01em;color:var(--white);line-height:1.35;
}
.elementor-widget-accordion.ccs-faq .elementor-tab-title::after{
  content:"";flex:none;width:14px;height:14px;background:var(--white);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M7 1v12M1 7h12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M7 1v12M1 7h12'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--ease);
}
.elementor-widget-accordion.ccs-faq .elementor-tab-title.elementor-active::after,
.elementor-widget-accordion.ccs-faq .elementor-tab-title[aria-expanded="true"]::after{transform:rotate(45deg);}
.elementor-widget-accordion.ccs-faq .elementor-tab-content{
  padding:4px 24px 26px;font-size:15px;color:var(--mist);max-width:78ch;
  border:0;background:none;
}
.elementor-widget-accordion.ccs-faq .elementor-tab-content p{font-size:15px;color:var(--mist);}
.elementor-widget-accordion.ccs-faq .elementor-tab-content strong{color:var(--white);font-weight:600;}

.section--light .elementor-widget-accordion.ccs-faq .elementor-accordion{border-color:var(--hairline-ink);}
.section--light .elementor-widget-accordion.ccs-faq .elementor-accordion-item + .elementor-accordion-item{border-top-color:var(--hairline-ink);}
.section--light .elementor-widget-accordion.ccs-faq .elementor-accordion-title{color:var(--navy);}
.section--light .elementor-widget-accordion.ccs-faq .elementor-tab-title:hover{background:var(--mist-tint);}
.section--light .elementor-widget-accordion.ccs-faq .elementor-tab-title::after{background:var(--navy);}
.section--light .elementor-widget-accordion.ccs-faq .elementor-tab-content,
.section--light .elementor-widget-accordion.ccs-faq .elementor-tab-content p{color:var(--slate);}
.section--light .elementor-widget-accordion.ccs-faq .elementor-tab-content strong{color:var(--navy);}
/* /BEMCP:ccs-inner-pages */

/* BEMCP:ccs-position-empty — managed block, do not edit inline. */
/* ==========================================================================
   Position template, empty state
   The child theme drops the body of any role block whose ACF field has not been
   filled in yet (see ccs-position-empty-blocks in functions.php). Elementor
   offers no way to stop the container or its heading rendering, so the block is
   collapsed here the moment its body is missing, which takes the heading and
   the eyebrow with it. An empty flex child would otherwise still claim its
   share of the parent's gap.
   ========================================================================== */
.role__block:not(:has(.role__body)),
.pagehead__meta:not(:has(*)){display:none;}
/* /BEMCP:ccs-position-empty */

/* BEMCP:ccs-service-pages — managed block, do not edit inline. */
/* ==========================================================================
   Service pages
   Composition for the six service pages. As with the other inner pages, grid
   tracks are set on the containers themselves rather than here — Elementor
   writes --e-con-grid-template-columns at a weight no class rule can beat.
   What lives here is the styling Elementor has no control for.
   ========================================================================== */

/* Section heads and measures ------------------------------------------------ */
.lead{max-width:64ch;}
.lead .elementor-widget-text-editor p{color:var(--mist);font-size:16.5px;}
.section--light .lead .elementor-widget-text-editor p{color:var(--slate);}
.compare__intro,
.materials__intro,
.why__intro,
.digital__intro,
.deliver__lede{max-width:64ch;}

/* Media frames -------------------------------------------------------------- */
.overview__frame{height:min(48vw,460px);}
.deliver__frame{height:min(56vw,540px);}
.calib__frame{height:min(52vw,470px);}
/* The column is near-square while the source is 5:3, so cover crops hard.
   Biasing left keeps the operator in frame rather than clipping them. */
.deliver__frame img{object-position:25% center;}
@media (max-width:1024px){
  .overview__frame,
  .deliver__frame,
  .calib__frame{height:64vw;}
}

/* Boxout -------------------------------------------------------------------
   A white card dropped into a dark section, so everything inside it flips to
   the light palette without the section itself changing. */
.boxout{background:var(--white);border-radius:var(--radius);}
.boxout h2,.boxout h3,.boxout h4,
.boxout .elementor-widget-heading .elementor-heading-title{color:var(--navy);}
.boxout p,
.boxout .elementor-widget-text-editor p{color:var(--slate);}
.boxout .ccs-list ul li{color:var(--slate);}
.boxout .ccs-list ul li::before{background:var(--navy);}
.boxout .eyebrow{color:var(--slate);}
.boxout .eyebrow::before{background:var(--navy);}

/* Key/value pairs ----------------------------------------------------------- */
.keyvals{
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);
  border-radius:var(--radius);overflow:hidden;
}
.keyvals > .e-con{background:var(--navy);}
.keyval__k p{
  font-family:var(--ccs-body);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--silver);
}
.keyval__v p{
  font-family:var(--ccs-display);font-weight:600;font-size:17px;
  letter-spacing:-.015em;line-height:1.35;color:var(--white);
}
.section--light .keyvals{background:var(--hairline-ink);border-color:var(--hairline-ink);}
.section--light .keyvals > .e-con{background:var(--white);}
.section--light .keyval__k p{color:var(--slate);}
.section--light .keyval__v p{color:var(--navy);}
/* The navy variant keeps its dark cells inside a light section. */
.section--light .keyvals--navy{background:var(--panel-2);border-color:var(--navy);}
.section--light .keyvals--navy > .e-con{background:var(--navy);}
.section--light .keyvals--navy .keyval__k p{color:var(--silver);}
.section--light .keyvals--navy .keyval__v p{color:var(--white);}

/* Stat blocks --------------------------------------------------------------
   The border and padding come from the design system. What is needed here is
   the label rule, and then a figure rule that can outrank it. The label reads
   every text editor in the stat at (0,3,0), so a plainer .stat__figure
   selector loses and the headline number comes out at label size. Carrying
   the widget class on the figure settles it. */
.stat .elementor-widget-text-editor p{font-size:14px;color:var(--mist);}
.stat .stat__figure.elementor-widget-text-editor p{
  font-family:var(--ccs-display);font-weight:400;line-height:1;
  font-size:clamp(32px,3.8vw,46px);letter-spacing:-.03em;color:var(--white);
}
.section--light .stat .elementor-widget-text-editor p{color:var(--slate);}
.section--light .stat .stat__figure.elementor-widget-text-editor p{color:var(--navy);}

/* Spec blocks --------------------------------------------------------------- */
.specblock{border-top:1px solid var(--hairline);}
.specblock:last-child{border-bottom:1px solid var(--hairline);}
.specblock__claim p{
  font-family:var(--ccs-body);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--silver);
}
.specblock__head .elementor-widget-text-editor p{font-size:14.5px;color:var(--mist);}
.section--light .specblock{border-color:var(--hairline-ink);}
.section--light .specblock__claim p,
.section--light .specblock__head .elementor-widget-text-editor p{color:var(--slate);}

/* Comparison and data tables ------------------------------------------------
   The table is written as markup inside a text editor, which is the right
   editing surface for tabular content, so the design system's own rules reach
   it directly.

   The scroll frame sits on the widget element, not on an inner wrapper.
   Elementor 4 renders widgets without the .elementor-widget-container div that
   earlier versions emitted, so anything aimed at that wrapper matches nothing.

   The width pin matters as much as the overflow. Containers do not stretch
   their children by default, so an unpinned widget takes the table's 760px
   intrinsic width and pushes the whole document sideways on narrow screens. */
.ccs-table.elementor-widget{
  width:100%;max-width:100%;min-width:0;align-self:stretch;
  overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius);
}
.section--light .ccs-table.elementor-widget{border-color:var(--hairline-ink);}
.ccs-table table{width:100%;min-width:760px;border-collapse:collapse;font-size:14.5px;}
.ccs-table th,.ccs-table td{text-align:left;vertical-align:top;padding:16px 22px;}
.ccs-table thead th{
  font-family:var(--ccs-body);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--silver);
  background:var(--panel);white-space:nowrap;
}
.ccs-table tbody tr + tr,
.ccs-table thead + tbody tr:first-child{border-top:1px solid var(--hairline);}
.ccs-table tbody th{
  font-family:var(--ccs-display);font-weight:600;font-size:15px;
  color:var(--white);letter-spacing:-.01em;width:24%;
}
.ccs-table td{color:var(--mist);}
.section--light .ccs-table thead th{background:var(--mist-tint);color:var(--slate);}
.section--light .ccs-table tbody tr + tr,
.section--light .ccs-table thead + tbody tr:first-child{border-top-color:var(--hairline-ink);}
.section--light .ccs-table tbody th{color:var(--navy);}
.section--light .ccs-table td{color:var(--slate);}
.table__note p{font-size:13px;color:var(--silver);}
.section--light .table__note p{color:var(--slate);}
/* /BEMCP:ccs-service-pages */

/* BEMCP:ccs-service-extras — managed block, do not edit inline. */
/* ==========================================================================
   Service page extras
   Variants that only one or two of the service pages call for.
   ========================================================================== */

/* Two-column spec list, for the long digital QA set. */
.ccs-list--2 ul{grid-template-columns:repeat(2,1fr);column-gap:36px;}
@media (max-width:767px){.ccs-list--2 ul{grid-template-columns:1fr;}}

/* The gauge shot is the only genuine inspection image in the library and the
   QA page needs it twice. The head band shows a narrow slice, so pulling that
   slice up stops it reading as the same photo as the calibration frame. */
.pagehead__bg--top img{object-position:center 18%;}

/* Closing copy under the digital QA set. */
.digital__foot{max-width:74ch;}
.digital__foot p{color:var(--mist);font-size:15.5px;}
.digital__intro{max-width:74ch;}
.digital__intro .elementor-widget-text-editor p{color:var(--mist);font-size:15.5px;}

/* The calibration eyebrow sits in a gapped column, so its own bottom margin
   would stack on top of the gap. */
.calib__copy .eyebrow{margin-bottom:0;}
.calib__copy .elementor-widget-text-editor p{color:var(--mist);font-size:15.5px;}

/* V-Deck comparison ---------------------------------------------------------
   V-Deck runs a longer argument than the other service pages: an intro, a
   stat pair, the comparison table, an indicative figures block, then the
   caveat about picking the right access method. */
.compare__intro{max-width:74ch;}
.compare__intro .elementor-widget-text-editor p{font-size:15.5px;}
.keyvals__label p{
  font-family:var(--ccs-body);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:lowercase;color:var(--silver);
}
.section--light .keyvals__label p{color:var(--slate);}
.selecting{border-top:1px solid var(--hairline);max-width:74ch;}
.section--light .selecting{border-top-color:var(--hairline-ink);}
.selecting .elementor-widget-text-editor p{font-size:15.5px;}
/* /BEMCP:ccs-service-extras */

/* BEMCP:ccs-stack-contrast — managed block, do not edit inline. */
/* ==========================================================================
   Numbered stack on light sections
   The stack's own colour rules in ccs-inner-pages reach the text through the
   widget class, which puts them at a weight the earlier .section--light pair
   in the design system cannot match. Dropped onto white that leaves body copy
   in mist and the numerals in silver, both well under contrast. These carry
   the widget class too so the light palette wins where it should.
   Applies wherever a .stack sits inside .section--light: rope access, V-Deck
   and any later page that reuses the pattern.
   ========================================================================== */
.section--light .stack__item .elementor-widget-text-editor p{color:var(--slate);}
.section--light .stack__item .stack__num p{color:var(--slate);}
.section--light .stack__item h4,
.section--light .stack__item .elementor-widget-heading .elementor-heading-title{color:var(--navy);}
/* /BEMCP:ccs-stack-contrast */

/* BEMCP:ccs-refinements — managed block, do not edit inline. */
/* ==========================================================================
   Client review refinements
   Loaded last, so equal-specificity ties resolve in favour of what is here.
   ========================================================================== */

/* Page hero separation ------------------------------------------------------
   A hairline under every hero so the band reads as its own block rather than
   bleeding into the section beneath it. */
.pagehead,
.hero__band{border-bottom:1px solid var(--hairline);}

/* The home hero's field canvas is sized off an --edge that goes negative once
   the band is narrower than the shell, so it hung 78px past the viewport and
   the whole document scrolled sideways on a phone. .pagehead has always
   clipped its own field; the home band never did. Same treatment. */
.hero__band{overflow:hidden;}

/* The sticky bar has to out-stack anything in the page body, or the open
   mobile drawer ends up behind hero content that carries its own z-index. */
.masthead{z-index:120;}

/* Header height ------------------------------------------------------------
   Elementor sets container display via `.e-con{display:var(--display)}` at
   (0,1,0). On the home page that resolved to the initial value instead of
   flex, so the bar rendered as an inline box: 142px tall with the nav row
   floating in the middle of it, against 95px everywhere else. Stating the
   display on the bar itself at (0,2,0) makes it independent of whether the
   custom property reaches the element. */
.masthead.e-con{display:flex;}

/* Button typography vs the kit ---------------------------------------------
   Elementor reprints its unscoped `.elementor-widget-button .elementor-button`
   defaults inside every loop template's stylesheet, and that stylesheet is
   emitted in the BODY — after this file. On a page carrying a loop grid the
   kit therefore WINS the (0,2,0) tie against `.ccs-btn .elementor-button`,
   which is how the careers CTA came out at the kit's 12px accent size while
   every other page used the design's 11px. Carrying the widget class settles
   it at (0,3,0).

   These MIRROR `.ccs-btn` / `.ccs-btn--sm` in ccs-design-system and are
   deliberately limited to the five properties the kit rule actually sets —
   font-family, font-size, font-weight, letter-spacing, text-transform — so
   everything else (padding, radius, colour) stays single-sourced there.
   Change a value in the design system and change it here too. */
.elementor-widget-button.ccs-btn .elementor-button{
  font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:lowercase;
}
.elementor-widget-button.ccs-btn--sm .elementor-button{
  font-size:11px;
}
/* The responsive steps have to be re-qualified too, or they now lose to the
   rules directly above. */
@media (max-width:767px){
  .elementor-widget-button.ccs-nav__cta .elementor-button{
    padding:10px 13px;font-size:10.5px;letter-spacing:.06em;
  }
}
@media (max-width:400px){
  .elementor-widget-button.ccs-nav__cta .elementor-button{
    padding:9px 10px;font-size:10px;
  }
}

/* Nav item padding on hover -------------------------------------------------
   Elementor ships
     .elementor-nav-menu--main .elementor-nav-menu a:hover{padding:13px 20px}
   at (0,3,1). The design's own padding rule is (0,3,0), so it wins in the
   resting state and LOSES on hover — every item jumped 4px taller and 8px
   wider as the pointer crossed it, shoving the rest of the row sideways.
   Stating the same padding for the interactive states at (0,4,0) settles it. */
.ccs-nav .elementor-nav-menu .elementor-item,
.ccs-nav .elementor-nav-menu .elementor-item:hover,
.ccs-nav .elementor-nav-menu .elementor-item:focus,
.ccs-nav .elementor-nav-menu .elementor-item:active,
.ccs-nav .elementor-nav-menu .elementor-item.highlighted,
.ccs-nav .elementor-nav-menu .elementor-item.elementor-item-active{
  padding:9px 12px;
}
@media (max-width:1180px){
  .ccs-nav .elementor-nav-menu .elementor-item,
  .ccs-nav .elementor-nav-menu .elementor-item:hover,
  .ccs-nav .elementor-nav-menu .elementor-item:focus,
  .ccs-nav .elementor-nav-menu .elementor-item.highlighted,
  .ccs-nav .elementor-nav-menu .elementor-item.elementor-item-active{
    padding-left:8px;padding-right:8px;
  }
}

/* Burger toggle -------------------------------------------------------------
   Elementor paints the glyph with a literal `.elementor-menu-toggle
   .e-font-icon-svg{fill:#33373d}` at (0,2,0), so setting `color` on the toggle
   never reached it and the icon sat near-black on the navy bar. */
.ccs-nav .elementor-menu-toggle{
  --nav-menu-icon-color:var(--white);
  color:var(--white);
  align-self:center;
  margin-top:0;margin-bottom:0;
}
.ccs-nav .elementor-menu-toggle .e-font-icon-svg,
.ccs-nav .elementor-menu-toggle svg{fill:var(--white);color:var(--white);}
.ccs-nav .elementor-menu-toggle:hover .e-font-icon-svg,
.ccs-nav .elementor-menu-toggle:hover svg{fill:var(--white);}

/* Below the dropdown breakpoint the CTA leads and the burger closes the row,
   and the nav widget stops stretching so the toggle centres against the logo.
   The widget is a flex column (Elementor's own rule), hence align-items on it
   rather than on the toggle alone. */
@media (max-width:1024px){
  .ccs-nav{align-items:center;}
  .ccs-nav > .elementor-widget-button{order:1;}
  .ccs-nav > .elementor-widget-nav-menu{order:2;align-self:center;}
  .ccs-nav > .elementor-widget-nav-menu.elementor-widget{
    display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  }
  .ccs-nav .elementor-menu-toggle{margin-left:0;}

  /* The drawer is a sibling of the toggle INSIDE the nav widget, so left to
     itself it opens inside that narrow column and gets clipped. Absolute
     positioning alone does not fix it: Elementor makes every widget element
     position:relative, so the widget, not the bar, was the containing block.
     Taking the nav out of the positioning chain lets the drawer resolve
     against .masthead, which is already sticky and therefore positioned. */
  .ccs-nav,
  .ccs-nav > .elementor-widget-nav-menu.elementor-widget{position:static;}
  .ccs-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container{
    position:absolute;left:0;right:0;top:100%;width:auto;margin-top:0;z-index:10;
    background:var(--navy);
  }
  /* Opening the drawer is driven off the toggle's sibling selector in
     Elementor's own CSS, which stopped resolving once the panel was taken out
     of normal flow: measured live, the open panel still computed
     max-height:0 and transform:scaleY(0). The toggle's aria-hidden flag does
     flip reliably, so the open state keys off that instead. The extra class in
     the chain is there to clear (0,4,0) on Elementor's closed-state rule. */
  .ccs-nav .elementor-nav-menu--toggle nav.elementor-nav-menu--dropdown[aria-hidden="false"]{
    max-height:min(80vh, 640px);
    transform:none;
    overflow-y:auto;
  }
}

/* Eyebrows ------------------------------------------------------------------
   Kept in the hero bands only. Where the eyebrow is the sole content of its
   text editor the whole widget goes, so the parent's row gap closes with it;
   the bare paragraph rule catches any that share a widget with other copy. */
p.eyebrow,
.elementor-widget-text-editor p.eyebrow{display:none;}
.elementor-widget-text-editor:has(> p.eyebrow:only-child){display:none;}

.pagehead p.eyebrow,
.hero__band p.eyebrow,
.pagehead .elementor-widget-text-editor p.eyebrow,
.hero__band .elementor-widget-text-editor p.eyebrow{display:flex;}
.pagehead .elementor-widget-text-editor:has(> p.eyebrow:only-child),
.hero__band .elementor-widget-text-editor:has(> p.eyebrow:only-child){display:block;}

/* The leading dash was pinned with a magic margin against flex-start, which
   left it riding high on the cap. Centring it against the line box is what
   the single-line hero eyebrow actually wants. */
.eyebrow,
.elementor-widget-text-editor p.eyebrow{align-items:center;}
.eyebrow::before{margin-top:0;}

/* Position cards ------------------------------------------------------------
   Loop items are grid children, so they already stretch; the card inside has
   to be told to fill the item, and the link pushed to the foot, or cards with
   shorter summaries leave their CTA floating mid-cell. */
.elementor-loop-container > .e-loop-item{display:flex;}
.elementor-loop-container > .e-loop-item > .card{width:100%;height:100%;}
.elementor-loop-container .card > .ccs-link{margin-top:auto;}

/* Position detail with nothing filled in ------------------------------------
   The per-block empty state already hides each unfilled block, but the section
   holding them kept its own padding and left a dead band under the hero. When
   not one block has a body, the whole section goes. */
.section:has(.role__grid):not(:has(.role__body)){display:none;}
/* /BEMCP:ccs-refinements */

/* BEMCP:ccs-responsive-type — managed block, do not edit inline. */
/* ==========================================================================
   Responsive type

   Fluid sizing via clamp(min, Apx + Bvw, max). The floor is reached at a
   400px viewport and the cap at 1240px, so type scales smoothly instead of
   stepping at the 1024px and 767px breakpoints.

   Only sizes 15px and above are scaled. Eyebrows, labels and micro type
   (10.5-14.5px) are already at the legibility floor and are left alone, as
   are form inputs (see the note at the end of this block).
   ========================================================================== */

/* Kit global typography. Elementor resolves these through custom properties,
   so redefining them here makes every element wired to the Body or Lede
   global fluid without touching the elements themselves. The label globals
   (accent 12px, eyebrow 12px, micro 10.5px) stay fixed on purpose. */
body.elementor-kit-8{
  --e-global-typography-text-font-size:clamp(15px, 14.52px + 0.12vw, 16px);
  --e-global-typography-ccslede-font-size:clamp(16px, 15.29px + 0.18vw, 17.5px);
  font-size:clamp(15px, 14.52px + 0.12vw, 16px);
}

/* Tag-level ramp. The kit prints .elementor-kit-8 h1..h4 with fixed sizes and
   its own breakpoint steps, which outranked the bare h1/h2 clamps further up
   this file. Qualifying with body wins that back and restores the fluid
   intent those clamps were written for. */
body.elementor-kit-8 h1{font-size:clamp(34px, 5.4vw, 62px);}
body.elementor-kit-8 h2{font-size:clamp(28px, 3.6vw, 44px);}
body.elementor-kit-8 h3{font-size:clamp(18px, 17.05px + 0.24vw, 20px);}
body.elementor-kit-8 h4{font-size:clamp(15.5px, 15.02px + 0.12vw, 16.5px);}

/* Heading widgets. Elementor renders headings inside a widget wrapper that
   the tag ramp above does not reach. */
.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(34px, 5.4vw, 62px);}
.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(28px, 3.6vw, 44px);}

/* 20px -> 18px : h3 / card and tile headings */
h3,
.elementor-widget-heading h3.elementor-heading-title{font-size:clamp(18px, 17.05px + 0.24vw, 20px);}

/* 17.5px -> 16px : lede */
.lede,
.lede p,
.closing__copy p{font-size:clamp(16px, 15.29px + 0.18vw, 17.5px);}

/* 17px -> 15.5px : pagehead lede, keyval, detail name */
.pagehead__lede,
.detail__name p,
.keyval__v p{font-size:clamp(15.5px, 14.79px + 0.18vw, 17px);}

/* 16.5px -> 15.5px : h4, hero lede, FAQ question */
h4,
.elementor-widget-heading h4.elementor-heading-title,
.hero__lede,
.faq__q,
.elementor-widget-accordion.ccs-faq .elementor-accordion-title,
.lead .elementor-widget-text-editor p{font-size:clamp(15.5px, 15.02px + 0.12vw, 16.5px);}

/* 15.5px -> 14.5px : long-form body copy */
.apply__lede p,
.digital__foot p,
.role__block .elementor-widget-text-editor p,
.digital__intro .elementor-widget-text-editor p,
.calib__copy .elementor-widget-text-editor p,
.compare__intro .elementor-widget-text-editor p,
.selecting .elementor-widget-text-editor p{font-size:clamp(14.5px, 14.02px + 0.12vw, 15.5px);}

/* 15px -> 14px : lists, FAQ answers, table headers */
.speclist li,
.ccs-list ul li,
.role__block ul li,
.faq__a,
.elementor-widget-accordion.ccs-faq .elementor-tab-content,
.elementor-widget-accordion.ccs-faq .elementor-tab-content p,
.detail__link a,
.table tbody th,
.ccs-table tbody th{font-size:clamp(14px, 13.52px + 0.12vw, 15px);}

/* Form fields hold at 15px. iOS zooms the viewport when a focused input is
   under 16px, so shrinking these would make that worse, not better. Raising
   them to 16px would stop it, but that is a visual change worth deciding on
   separately. */
.ccs-form .elementor-field-textual,
.elementor-widget-form.ccs-form .elementor-field-textual,
.elementor-widget-form.ccs-form select.elementor-field,
.field input,
.field select,
.field textarea{font-size:15px;}
/* /BEMCP:ccs-responsive-type */

/* BEMCP:ccs-responsive-component-padding — managed block, do not edit inline. */
/* ==========================================================================
   Responsive component padding

   Two jobs here.

   1. custom.css loads after Elementor's frontend.min.css, and Elementor
      consumes its container padding through .e-con / .e-con-full at (0,1,0).
      So a plain .card{padding:...} in this file outranked the padding set on
      the container in Elementor, which meant the tablet and mobile values on
      cards, stats and stack items were saved but never rendered. Those three
      now read Elementor's own variables instead, so the panel is the single
      source of truth and the responsive steps apply. Desktop fallbacks keep
      any container that has no padding set (e.g. a loop template item) on its
      current values.

   2. Components whose padding only ever lived in CSS - buttons, chips, FAQ
      rows, table cells, list indents - get tablet and mobile steps on the same
      1024px / 767px breakpoints the container spacing uses.

   Deliberately left fixed, with reasons:
     - buttons and accordion rows keep their vertical padding so the 44px
       minimum tap target survives; only the horizontal padding tightens
     - form fields, file inputs and their buttons keep all padding, same reason
     - .badge (6px 13px) and .role__rail items (7px) are already at the floor
     - .ccs-nav items and .process__item already have bespoke breakpoint rules
       further up this file and are left to them
   ========================================================================== */

/* 1. Hand these back to the Elementor container settings. */
.card{
  padding:var(--padding-top, 32px) var(--padding-right, 30px) var(--padding-bottom, 32px) var(--padding-left, 30px);
}
.stat{
  padding:var(--padding-top, 28px) var(--padding-right, 30px) var(--padding-bottom, 28px) var(--padding-left, 30px);
}
.stack__item{
  padding:var(--padding-top, 20px) var(--padding-right, 0px) var(--padding-bottom, 20px) var(--padding-left, 0px);
}

/* 2. CSS-only components. */
@media (max-width:1024px){
  /* Buttons: horizontal only, vertical holds the tap target. */
  .btn,
  .ccs-btn .elementor-button,
  .ccs-form .elementor-button[type="submit"],
  .elementor-widget-form.ccs-form .elementor-button[type="submit"]{padding:15px 22px;}
  .btn--sm,
  .ccs-btn--sm .elementor-button{padding:11px 16px;}

  /* Pills. */
  .chip{padding:14px 18px;}

  /* FAQ / accordion rows. */
  .faq__q,
  .elementor-widget-accordion.ccs-faq .elementor-tab-title{padding:20px 22px;}
  .faq__a,
  .elementor-widget-accordion.ccs-faq .elementor-tab-content{padding:4px 22px 24px;}

  /* Tables scroll horizontally, so tighter cells buy real width. */
  .table th,.table td,
  .ccs-table th,.ccs-table td{padding:14px 20px;}

  /* Bullet indents. */
  .speclist li,
  .ccs-list ul li,
  .role__block ul li{padding-left:22px;}

  .position__badge{padding:14px 20px;}
}

@media (max-width:767px){
  .btn,
  .ccs-btn .elementor-button,
  .ccs-form .elementor-button[type="submit"],
  .elementor-widget-form.ccs-form .elementor-button[type="submit"]{padding:15px 20px;}
  .btn--sm,
  .ccs-btn--sm .elementor-button{padding:11px 14px;}

  .chip{padding:12px 16px;}

  .faq__q,
  .elementor-widget-accordion.ccs-faq .elementor-tab-title{padding:16px 18px;}
  .faq__a,
  .elementor-widget-accordion.ccs-faq .elementor-tab-content{padding:4px 18px 20px;}

  .table th,.table td,
  .ccs-table th,.ccs-table td{padding:12px 16px;}

  .speclist li,
  .ccs-list ul li,
  .role__block ul li{padding-left:20px;}

  .position__badge{padding:12px 18px;}
}
/* /BEMCP:ccs-responsive-component-padding */

/* BEMCP:ccs-news — managed block, do not edit inline. */
/* ==========================================================================
   News listing and single post

   The posts widget and theme-post-content render their own markup, so this
   maps them onto the existing card and body-copy language. Padding steps use
   the same 1024px / 767px breakpoints as the rest of the site.
   ========================================================================== */

/* --- Listing ------------------------------------------------------------- */
.ccs-posts .elementor-post{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.ccs-posts .elementor-post:hover{border-color:var(--white);}
.section--light .ccs-posts .elementor-post{background:var(--white);border-color:var(--hairline-ink);}

.ccs-posts .elementor-post__thumbnail{border-radius:0;}
.ccs-posts .elementor-post__thumbnail img{filter:var(--grade);}
.ccs-posts .elementor-post:hover .elementor-post__thumbnail img{filter:none;}

.ccs-posts .elementor-post__text{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:26px 28px 28px;
  margin:0;
}
.ccs-posts .elementor-post__meta-data{
  margin:0 0 10px;
  padding:0;
  border:none;
  font-family:var(--ccs-body);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--silver);
}
.ccs-posts .elementor-post__title{margin:0 0 10px;}
.ccs-posts .elementor-post__title a{
  font-family:var(--ccs-display);
  font-weight:600;
  font-size:clamp(18px, 17.05px + 0.24vw, 20px);
  letter-spacing:-.015em;
  line-height:1.3;
  color:var(--white);
  text-decoration:none;
}
.section--light .ccs-posts .elementor-post__title a{color:var(--navy);}
.ccs-posts .elementor-post__excerpt{margin:0;}
.ccs-posts .elementor-post__excerpt p{
  font-size:clamp(14px, 13.52px + 0.12vw, 15px);
  color:var(--mist);
  margin:0;
}
.ccs-posts .elementor-post__read-more{
  margin-top:auto;
  padding-top:16px;
  font-family:var(--ccs-body);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--white);
  text-decoration:none;
}
.ccs-posts .elementor-post__read-more::after{content:"\2192";margin-left:7px;}

/* Nothing-found state keeps the body voice rather than theme defaults. */
.ccs-posts .elementor-posts-nothing-found{
  padding:30px 26px;
  border:1px dashed var(--hairline);
  border-radius:var(--radius);
  color:var(--silver);
  font-size:15px;
}

/* --- Single post body ---------------------------------------------------- */
.post__body{color:var(--mist);}
.post__body p{
  font-size:clamp(15px, 14.52px + 0.18vw, 16.5px);
  line-height:1.7;
  margin:0 0 20px;
}
.post__body p:last-child{margin-bottom:0;}
.post__body h2{margin:34px 0 14px;}
.post__body h3{margin:28px 0 12px;}
.post__body ul,.post__body ol{margin:0 0 20px;padding-left:22px;}
.post__body li{
  font-size:clamp(14px, 13.52px + 0.12vw, 15px);
  margin-bottom:8px;
}
.post__body a{color:var(--white);text-decoration:underline;text-decoration-color:var(--keyline);}
.post__body a:hover{text-decoration-color:var(--white);}
.post__body img{max-width:100%;height:auto;border-radius:var(--radius);}
.post__body blockquote{
  margin:26px 0;
  padding:20px 24px;
  border-left:2px solid var(--keyline);
  background:var(--panel);
  border-radius:0 var(--radius) var(--radius) 0;
}

@media (max-width:1024px){
  .ccs-posts .elementor-post__text{padding:24px 24px 26px;}
  .ccs-posts .elementor-posts-nothing-found{padding:26px 24px;}
  .post__body blockquote{padding:18px 22px;}
}

@media (max-width:767px){
  .ccs-posts .elementor-post__text{padding:20px 20px 22px;}
  .ccs-posts .elementor-posts-nothing-found{padding:22px 20px;}
  .post__body blockquote{padding:16px 18px;}
  .post__body h2{margin:28px 0 12px;}
  .post__body h3{margin:24px 0 10px;}
}
/* /BEMCP:ccs-news */

/* BEMCP:ccs-card-full-link — managed block, do not edit inline. */
/* ==========================================================================
   Full-card links

   Two card sets are meant to be clickable end to end: the six service cards on
   the home page and the position cards in the careers loop. Both are the only
   `.card` instances that contain a `.ccs-link` button, so that child is what
   scopes this. The cards on Capability Statement, Ground-Based and Equipment
   Supply have no button inside them and stay unlinked, which is why this needs
   no page-specific selectors.

   The theme already stretched the button's ::before across `inset:0` further
   up this file, but Elementor sets `.elementor-widget{position:relative}`, so
   that box was resolving against the button widget and only ever covered the
   button. Taking just that wrapper out of the positioning chain lets it
   resolve against `.card`, which is already position:relative.

   Elementor's own container Link setting is filled in on these containers too,
   but 4.2 does not render an anchor for it on this install, so this is what
   actually does the work.
   ========================================================================== */
.card > .ccs-link{position:static;}

/* The whole card is now a click target, so give keyboard users the same
   affordance the mouse hover state provides. */
.card:focus-within{border-color:var(--white);}
.section--light .card:focus-within{border-color:var(--navy);}
/* /BEMCP:ccs-card-full-link */

/* BEMCP:ccs-header-hide-on-scroll — managed block, do not edit inline. */
/* ==========================================================================
   Header, sticky and hide on scroll down

   `.masthead` carried position:sticky further up this file but never actually
   stuck. A sticky element only travels within its containing block, and the
   masthead's parent is <header class="elementor-location-header">, which is
   exactly as tall as the masthead itself. No room to move, so it unstuck
   immediately and scrolled away with the page.

   That wrapper is a direct child of <body>, which spans the whole document,
   so that is where sticky belongs. The collapse has to ride on the same
   element: translating the inner bar instead would leave the wrapper pinned
   across the top of the page as an invisible strip that swallows clicks.
   ========================================================================== */
.elementor-location-header{
  position:sticky;
  top:0;
  z-index:120;
  transition:transform .28s var(--ease);
}
.elementor-location-header.is-hidden{transform:translateY(-100%);}

/* Two cases where it must stay put, both after .is-hidden so they win:
   1. the mobile drawer is positioned against the masthead, so hiding the
      header would take an open menu with it
   2. keyboard focus is inside. :focus-visible rather than :focus-within on
      purpose - after a TAP on the burger, focus lingers on the toggle, and
      :focus-within would pin the header open for the rest of the session. */
.elementor-location-header.is-menu-open,
.elementor-location-header:has(:focus-visible){transform:none;}

/* The inner bar keeps a positioning context, because the mobile drawer is
   absolutely positioned against it, but it no longer claims to be sticky. */
.masthead{position:relative;top:auto;}

/* overflow-x:hidden on body normally propagates to the viewport and leaves
   body itself visible, but where it does not, body becomes a scroll container
   and sticky dies inside it. clip does the same clipping job without ever
   creating one. The hidden declaration stays first as the fallback for
   browsers that do not know clip. */
body{overflow-x:hidden;overflow-x:clip;}

@media (prefers-reduced-motion:reduce){
  .elementor-location-header{transition:none;}
}
/* /BEMCP:ccs-header-hide-on-scroll */