/* GENERATED by build/atm-el/make_css.py - do not edit on the server. Source: build/atm-new/atm.css */
/* ATM pillar: only the components the homepage and the consulting page do not already have.
   Everything else (surfaces, heads, cards, panels, bands, quotes, team, accordion, CTA, type) is shared. */

/* ---------- 2. hero: two CTAs sit side by side ---------- */
.atm .chero .paths{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.atm .chero .paths .btn{flex:0 0 auto}
.atm .cta-core .paths.mid{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:clamp(22px,3vh,28px)}

/* ---------- 7 and 9. the two card hubs ---------- */
.svcgrid.four{grid-template-columns:repeat(4,1fr)}
.svcgrid.four .svc h3{font-size:20px}
.svcgrid.four .svc p{font-size:14.5px}

/* ---------- 16. testimonial headshots ---------- */
.tq figcaption{display:flex;align-items:center;gap:14px}
.tq figcaption img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.tq figcaption > span{display:flex;flex-direction:column;gap:3px}

/* ---------- 17. a four-up team row ---------- */
.teamgrid.four{grid-template-columns:repeat(4,1fr)}
.teamgrid.four .tbody .nm{font-size:clamp(18px,1.4vw,21px)}
.teamgrid.four .tbody p{font-size:14px}

/* the three proof cards and the census, in the shared card and band skins */
.svc.dark{background:rgba(247,242,231,.05);border-color:rgba(247,242,231,.14)}
.svc.dark h3{color:#fff;font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:0;line-height:1.5}
.svc.dark p{color:var(--on-dark-2)}
.svc.dark .sk{font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-3)}
.svc.dark .fig{font-family:var(--disp);font-weight:600;font-size:clamp(30px,2.6vw,38px);line-height:1;
  letter-spacing:-.04em;color:var(--gold)}
a.svc.dark:hover{border-color:rgba(255,176,0,.5);background:rgba(255,176,0,.06)}
.census{margin-top:clamp(26px,3.4vh,34px);padding:clamp(26px,3.4vh,34px) clamp(24px,2.6vw,34px);border-radius:14px;
  background:var(--field-navy);border:1px solid rgba(247,242,231,.12);position:relative;overflow:hidden}
.census::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 70% at 100% 0%,rgba(255,176,0,.16),rgba(255,176,0,0) 70%)}
.census h3{position:relative;font-family:var(--disp);font-weight:600;font-size:clamp(24px,2vw,30px);line-height:1.2;
  letter-spacing:-.02em;color:#fff}
.census p{position:relative;margin:12px 0 0;font-size:16px;line-height:1.8;color:var(--on-dark-2);max-width:74ch}
.census .statrow{position:relative;margin-top:clamp(22px,2.8vh,28px);border-top:0}
.statrow.three{grid-template-columns:repeat(3,1fr)}
.closeband.dark{background:rgba(247,242,231,.05);border-color:rgba(247,242,231,.14);border-left-color:var(--gold)}
.closeband.dark .ck{color:var(--gold)}
.closeband.dark blockquote p{color:#fff}
/* the film keeps its 16:9 frame, never cropped to a column's height */
.a3 .film{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 30px 70px rgba(23,29,58,.18)}
.a3 .film img{width:100%;height:100%;object-fit:cover;display:block}
.a3 .film .dur{position:absolute;right:14px;bottom:14px;font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:.08em;color:#fff;background:rgba(9,13,30,.72);border-radius:6px;padding:5px 9px}
/* the chapters, as one compact row under the film */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(20px,2.6vh,26px)}
.chips .ck{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-right:6px}
.chips .chip{font-family:var(--body);font-size:14px;font-weight:500;color:var(--navy);background:#fff;
  border:1px solid var(--line-light);border-radius:999px;padding:9px 16px;transition:border-color .2s ease}
.chips .chip:hover{border-color:rgba(255,176,0,.55)}
  letter-spacing:.08em;color:#fff;background:rgba(9,13,30,.72);border-radius:6px;padding:4px 8px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .atm .nxt p{max-width:none}
  .gcases{grid-template-columns:1fr}
  .istats{grid-template-columns:repeat(2,1fr)}
  .istat:nth-child(3){border-left:0}
  .istat:nth-child(n+3){border-top:1px solid var(--line-dark)}
  .svcgrid.four,.teamgrid.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .istats,.svcgrid.four,.teamgrid.four{grid-template-columns:1fr}
  .istat + .istat{border-left:0;border-top:1px solid var(--line-dark)}
  .atm .chero .paths,.atm .cta-core .paths.mid{flex-direction:column;align-items:stretch}
}

/* the SEO panel carries the one cross-silo link at its foot */
.side-panel .pfoot{position:relative;display:block;margin-top:auto;padding-top:16px;border-top:1px solid var(--line-dark)}
.side-panel.dark .pfoot .lnk{color:#fff}

/* long service names must not spill their card at tablet widths */
@media (max-width:900px){
  .svc h3,.aud h3,.tcard .nm{overflow-wrap:anywhere;hyphens:auto}
}

/* the work-spans panel runs two up, so it ends level with the copy beside it */
.spans.two ul{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2vw,30px)}
.spans.two li{min-height:46px}
.spans.two li:nth-child(2){border-top:0}

/* the closeband hugs its own line instead of stretching across an empty band */
.closeband{width:fit-content;max-width:100%}

/* conversion systems: a two column hairline index */
/* Horizontal rules that line up across both columns. A grid is what aligns them, and column-major flow keeps
   the reading order 01 to 04 down the left and 05 to 08 down the right. Each entry is centred in its row, so
   the height difference inside a pair reads as balance rather than a hole at the bottom. */
.sysgrid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column;
  column-gap:clamp(40px,4.6vw,76px)}
.sysitem{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(16px,2vh,20px) 0;border-top:1px solid var(--line-light)}
.sysitem:nth-child(1),.sysitem:nth-child(5){border-top:0;padding-top:4px}
.sysitem .sysn{display:inline-block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--gold-deep);margin-bottom:6px}
.sysitem h3{font-family:var(--disp);font-weight:600;font-size:clamp(20px,1.6vw,23px);line-height:1.2;
  letter-spacing:-.02em;color:var(--navy);margin:0}
.sysitem p{margin:10px 0 0;font-size:15px;line-height:1.8;color:var(--on-light-2);max-width:52ch}

/* the FAQ rows carry hairlines, as on the other pages */
.a18 .accs .acc{border-top:1px solid var(--line-light)}
.a18 .accs .acc:first-child{border-top:0}

@media (max-width:900px){
  .sysgrid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .sysitem:nth-child(5){border-top:1px solid var(--line-light);padding-top:clamp(16px,2vh,20px)}
  .spans.two ul{grid-template-columns:1fr}
  .spans.two li:nth-child(2){border-top:1px solid var(--line-dark)}
}

/* the head sits closer to its content: 34px was reading as a gap on the wider sections */
.atm .shead{margin-bottom:clamp(16px,2vh,22px)}
.atm .erow,.atm .prow{margin-top:clamp(18px,2.2vh,26px)}


/* ---------- Elementor parity for this page ---------- */
/* hero and final CTAs sit side by side: Elementor children stretch unless told otherwise */
.bhp-atm .paths .elementor-widget-button{width:auto;flex:0 0 auto}
.bhp-atm .paths{display:flex}
/* the FAQ rows carry the same hairlines as the other pages */
.bhp-atm .faq .elementor-accordion-item{border:0;border-top:1px solid var(--line-light)}
.bhp-atm .faq .elementor-accordion-item:first-child{border-top:0}
.bhp-atm .faq .elementor-tab-title,.bhp-atm .faq .elementor-tab-content{border:0}
/* the closeband hugs its line rather than stretching across an empty band */
.bhp-atm .closeband.e-con{width:fit-content;max-width:100%}
/* the sticky rail lives in one HTML widget; the copy blocks are native widgets */
/* the two column index: Elementor grids need the column gap and the paragraph measure spelled out */
/* aligned horizontal rules: a grid aligns them, column-major flow keeps 01-04 left and 05-08 right */
.bhp-atm .sysgrid.e-con{display:grid!important;grid-template-columns:1fr 1fr!important;
  grid-template-rows:repeat(4,auto)!important;grid-auto-flow:column!important;
  column-gap:clamp(40px,4.6vw,76px)!important;row-gap:0!important}
.bhp-atm .sysitem.e-con{justify-content:center!important;
  padding:clamp(16px,2vh,20px) 0!important;border-top:1px solid var(--line-light)!important}
.bhp-atm .sysitem.e-con:nth-child(1),.bhp-atm .sysitem.e-con:nth-child(5){
  border-top:0!important;padding-top:4px!important}
.bhp-atm .sysitem .elementor-widget-text-editor p{max-width:52ch}
.bhp-atm .sbody{gap:clamp(34px,4.4vh,54px)}
.bhp-atm .sysx .elementor-widget-text-editor p{max-width:68ch}
.bhp-atm .sysx{scroll-margin-top:calc(var(--hh) + 40px)}
/* one rule owns the head-to-content gap, so it matches the static page's 20 to 28px */
.bhp-atm .shead.e-con{margin-block-end:20px!important}
.bhp-atm .erow.e-con,.bhp-atm .prow.e-con,.bhp-atm .sysgrid.e-con{margin-block-start:0!important}
/* the industry stat row is a grid container; Elementor gives grids their own top margin */
.bhp-atm .statrow.e-con{margin-block-start:0!important}
.bhp-atm .chips .chip{background:#fff;border:1px solid var(--line-light);border-radius:999px;padding:9px 16px}
.bhp-atm .chips .ck{margin-right:6px}
.bhp-atm .film{border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(23,29,58,.18)}
.bhp-atm .film .elementor-wrapper{aspect-ratio:16/9}
.bhp-atm .film .elementor-custom-embed-image-overlay img{width:100%;height:100%;object-fit:cover}
.bhp-atm .svc.dark .fig .elementor-heading-title{color:var(--gold)}
.bhp-atm .statrow .lstat .fig .elementor-heading-title{color:var(--gold)!important}
.bhp-atm .census .statrow{border-top:0}
.bhp-atm .tq figcaption,.bhp-atm .tq .e-con:last-child{align-items:center}
.bhp-atm .tq img{border-radius:999px}
.bhp-atm .teamgrid.four .tbody p{font-size:14px}
.bhp-atm .closeband .cq p{letter-spacing:-.015em}
.bhp-atm .teamgrid .namefix .elementor-heading-title,.bhp-atm .teamgrid .namefix a{
  font-size:clamp(18px,1.4vw,21px)!important;line-height:1.2!important}
@media (max-width:900px){
  .bhp-atm :is(.svc,.side-panel,.tcard,.tq) .elementor-heading-title{overflow-wrap:anywhere;hyphens:auto}
  .bhp-atm .sysgrid.e-con{grid-template-columns:1fr!important;grid-template-rows:none!important;grid-auto-flow:row!important}
  .bhp-atm .sysitem.e-con:nth-child(5){border-top:1px solid var(--line-light)!important;padding-top:20px!important}
}
@media (max-width:640px){
  /* the census figures sit in a one-column grid on a phone, so the clamp must follow the column, not the viewport */
  .bhp-atm .statrow .lstat .fig .elementor-heading-title{font-size:clamp(30px,9vw,40px)!important}
}
/* both classes sit on the section element, so the hero rules must not be descendant selectors */
.bhp-csp.chero-el .herocol{container-type:inline-size}
.bhp-csp.chero-el .herocol > .elementor-widget-text-editor{max-width:62ch}