/* ============================================================
   EZTRAK — shared stylesheet for all pages

   BRAND BLOCK — REPLACE THESE SIX VALUES WITH EZTRAK'S REAL ONES.
   In Elementor: Site Settings > Global Colors.
   Every page on the site derives from here. Nothing else to change.
   ============================================================ */
:root{
  --brand-deep:#0A0D31;   /* dark sections, header, footer  — near-black to match the logo */
  --brand-accent:#C4330C; /* links + buttons on light        — darkened orange, passes AA   */
  --brand-signal:#FE4110; /* CTA buttons, accents on dark    — sampled from the logo        */
  --brand-ink:#0A0D31;    /* body text                                                     */
  --brand-steel:#4F526F;  /* secondary text                                                */
  --brand-band:#F0F0F5;   /* alternating section background                                */
  --brand-deep-60:rgba(10,13,49,.62);
}
/* ============================================================ */

:root{ --muted:rgba(10,13,49,.45); --rule:rgba(10,13,49,.12); --paper:#FDEEE4; --ok:#2E7D5B; --sp:1.5rem; --card-pad:clamp(20px,3vw,32px); --maxw:1360px; --type-h1:clamp(2.5rem,5vw,4.25rem); --type-h2:clamp(2rem,3.2vw,3rem); --type-feature:clamp(1.5rem,2.2vw,1.875rem); --type-card:clamp(1.1rem,1.4vw,1.6rem); }
@media(max-width:640px){:root{--sp:20px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:#fff;color:var(--brand-ink);font-family:"Inter",sans-serif;font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--brand-signal); transition: 0.3s ease all;}
:focus-visible{outline:2px solid var(--brand-signal);outline-offset:2px}
.mb-0 {
  margin-bottom: 0 !important;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp)}
.narrow{max-width:820px;margin:0 auto}

h1,h2,h3,h4{font-family:"Inter Tight",sans-serif;letter-spacing:0;line-height:1.1;margin:0}
h1 em,h2 em,h3 em,h4 em{font-family:"Inter Tight",sans-serif;font-style:normal;}
h1{font-size:var(--type-h1);font-weight:600}
h2{font-size:var(--type-h2);font-weight:600}
h3{font-size:var(--type-card);font-weight:600}
h4{font-size:clamp(1rem,1.2vw,1.125rem);font-weight:600}
p{margin:0 0 1rem}
.lede{font-size:clamp(.85rem,2vw,1rem);color:var(--brand-steel);line-height:1.5}
.tag{font-family:"Inter",sans-serif;font-size:.86rem;font-weight:500;line-height:1.3;letter-spacing:.01em;text-transform:none;color:var(--brand-deep-60)}
.tag::before{content:"[ "}
.tag::after{content:" ]"}
.mono{font-family:"Inter",sans-serif}

/* ---------------- header ---------------- */
.hdr{position:sticky;top:0;z-index:80;background-color:#fff}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:.8rem var(--sp);display:flex;align-items:center;gap:1.5rem}
.logo{display:block;text-decoration:none;flex:0 0 auto}
.logo img{height:48px;width:auto;display:block}
@media(max-width:640px){.logo img{height:38px}}
.ftr .logo img{height:48px}
.nav{display:none;gap:1.5rem;margin-left:auto;align-items:center}
.nav a{color:var(--brand-deep);text-decoration:none;font-size:.9rem;font-weight:500}
.nav a.on{color:var(--brand-signal)}
.hdr-cta{min-height:44px;margin-left:auto;background:var(--brand-signal);color:#fff;text-decoration:none;font-family:"Inter Tight",sans-serif;font-weight:600;font-size:.9rem;letter-spacing:0;padding:.65rem 1.1rem;border-radius:6px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease}
@media(max-width:640px){.hdr-cta{display:none}}
@media(min-width:1000px){.nav{display:flex}.hdr-cta{margin-left:0}}

/* ---------------- buttons ---------------- */
.btn{min-height:clamp(44px,4vw,48px);display:inline-flex;align-items:center;justify-content:center;font-family:"Inter Tight",sans-serif;font-weight:500;font-size:.96rem;line-height:1.2;letter-spacing:0;padding:clamp(.7rem,1.2vw,.8rem) clamp(1rem,2vw,1.25rem);border-radius:6px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease}
@media(max-width:640px){.btn{width:100%;text-align:center}}
.btn-pri{background:var(--brand-signal);color:var(--brand-deep)}
.btn-ghost{border-color:var(--brand-deep-60);color:var(--brand-deep); background-color: #fff;}
.btn-video{gap:.55rem}
.btn-video svg{width:18px;height:18px;flex:0 0 auto}
.sec .btn-pri,.pg .btn-pri{background:var(--brand-deep);color:#fff}
.sec .btn-ghost,.pg .btn-ghost{border-color:var(--rule);color:var(--brand-ink)}
.sec-dark .btn-ghost{border-color: rgba(255,255,255,.55);
  color: #fff;
  background: rgba(255,255,255,.04);}
.btn:not(:disabled):hover,.hdr-cta:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,13,49,.18)}
.btn:not(:disabled):active,.hdr-cta:active{transform:translateY(0);box-shadow:0 3px 8px rgba(10,13,49,.12);transition-duration:.08s}
.btn:focus-visible,.hdr-cta:focus-visible{outline:3px solid rgba(255,77,31,.28);outline-offset:3px}
.video-modal{width:min(92vw,960px);max-width:none;padding:0;border:0;border-radius:8px;background:#000;box-shadow:0 24px 80px rgba(10,13,49,.45);overflow:visible}
.video-modal::backdrop{background:rgba(10,13,49,.94);backdrop-filter:blur(5px)}
.video-modal-frame{aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:8px}
.video-modal iframe{width:100%;height:100%;display:block;border:0}
.video-modal-close {
	position: absolute;
	right: 0;
	top: -40px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 4px;
	background: rgba(10,13,49,.75);
	color: #fff;
	font: 400 1.2rem/1 "Inter",sans-serif;
	cursor: pointer;
	padding-bottom: 2px;
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.video-modal-close:hover{transform:translateY(-2px);background:var(--brand-deep);border-color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.video-modal-close:active{transform:translateY(0)}
body:has(.video-modal[open]){overflow:hidden}

/* ---------------- hero ---------------- */
.hero{padding:clamp(2.8rem,6.5vw,4.8rem) 0 clamp(2.8rem,6.5vw,4.8rem);overflow:hidden;background:var(--paper)}
.hero.flat{padding-bottom:clamp(2.8rem,6.5vw,4.8rem)}
.hero h1{max-width:24ch}
.hero h1 br{display:none}
.hero h1.wide{max-width:20ch}
.hero .lede{color:var(--brand-deep-60);max-width:none;margin-top:1.1rem}
.hero .tag{color:var(--brand-signal);display:block;margin-bottom:1.1rem}
.hero-eyebrow{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.1rem;flex-wrap:wrap}
.hero-mark{font-family:"Inter",sans-serif;font-weight:600;font-size:1.05rem;color:var(--brand-signal);letter-spacing:.04em}
.hero-eyebrow .tag{color:rgba(255,255,255,.55);margin:0;display:inline}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap; margin-top:clamp(0.5rem,1vw,1rem);}
.hero-crumbs{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem;font-size:.86rem;line-height:1.3;letter-spacing:.01em}
.hero-crumbs::before{content:"[ ";color:var(--brand-deep-60)}
.hero-crumbs::after{content:" ]";color:var(--brand-deep-60)}
.hero-crumbs a{color:var(--brand-deep-60);text-decoration:none}
.hero-crumbs a:hover{color:var(--brand-deep)}
.hero-crumbs span{color:var(--brand-deep-60)}
.hero-crumbs span[aria-hidden="true"]{font-size:10px;line-height:1}
.hero-crumbs span[aria-current]{color:var(--brand-signal)}

/* Reusable centered hero variant. Add .hero-centered to any hero section. */
.hero-centered .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-centered .statement{max-width:20ch}
.hero-centered .lede{max-width:60ch}
.hero-centered .hero-cta{justify-content:center}
.hero-centered .hero-shot{width:100%;text-align:left}

/* .hero-split{padding:clamp(3.5rem,7vw,6.5rem) 0;background:#fff} */
.hero-split .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;}
.hero-split-content{max-width:620px}
.hero-split h1{max-width:13ch;font-size:var(--type-h1)}
.hero-split .lede{max-width:43ch;margin-top:clamp(1.25rem,2.5vw,1.75rem);font-size:clamp(1rem,1.5vw,1.2rem)}
.hero-split .hero-cta{justify-content:flex-start;margin-top:clamp(1.5rem,3vw,2.25rem)}
.hero-split-media{position:relative;aspect-ratio:1504/1110;overflow:hidden;background:var(--brand-band);-webkit-mask-image:url("data:image/webp;base64,UklGRoQJAABXRUJQVlA4THcJAAAv30XtEJ/HsG3bSDzc/pveDDEu6bMCgrZt4+n8mR5Dg6Bt23g6f6bH0LCRbauJpP8w51DZ2bn/fVkBpsfAbSNFy3DgfgNZSkFN/f5HirWxNtaWp4iQ6lMh5VNERMSWIiK6FEEkXNiBFJEQkZBSBAAACnIaASD14wa3EQkJCSklwMJZVXBQUBA4KKh1BwvV50cBNAxUK8YB9QvW5yBDGNf8YJNewViAlKBGDUAACBTq/7kOuMSbc2CJN5DVsTDWpKcE73seeO5OoLajJWNb0QCHaBjC/v9cpETEBGQ+oesQA7e1tmfNR6r+PZiAGbKzS0TrCZA7D5EqswELeIXU5sqEDbwCqX6lVz4R/Z8A2rZtm7arexTbtm3btm3btm0f7B3btu0cRu3k2vqV9hDR/yjBWT+9fvhdpIyfz+OqBGj7bZE5zjrx0f1ZJI+T6KjeF+njPDiuFvnjbSs0Wo8JxGIUGutFBvkUGqcpxDQ0LlOIG/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/77X8Wveu+r9/N6H6H3sXq/ofd7el+j9312T4fdS+u9lt576/263tfaPWXA7j9g9z56n673D3ZvhN3P6X2F3TMF7d4Vu8+ye9pou/fE7uvt3hK7T7J7lki7/47c0+ywey/knj7W7qeRe9YPdj+L3It9tPsd5F4RuSe/tvs55N4oWu6pXyL368i9A3I/uFfuEcuQ+1Xk/gtyzx8t96JbcXvYQ+Q+DrnXRO6HIuWecQtuD72P3K8g99rIvXGS3L+9wu0hd5H7v8i9bVDuhfbi9tRrkfst5D4QubcOyD17HG7PuhK5T0bufZB7q69yP7ADt6dYhtzHIffTyL3hZ7kX2Y7bwxch95HI/SfkXipK7mnf4vbQBch9NHI/jtxLfpR73o24PWQ2cr+E3CsF5Z5rH25PtR65T0Pu55F7hYDcDybg9vSrkftN5P4nci8fI/diu3B78grkfh2590LuZb/IPfMH3B6xBLmPQe7dkHuBKLnvf4fbwx4g9/+Re0fknu+T3DNuxu2h85D7COTeDrk3TZR7ype4PWQmch+C3NsE5V58D25P8xy5T0Xu55D7kRi559mN27M+Q+4TkfsfyL3lF7lniMXtKZYi92vI/Rfk3iJa7kW24fbwR8h9LHKvitwbRco93RvcHjofuV9B7rWQe4kkued9jdtDZiH3f5B7naDcc+/F7anWIffbyH0gcq8XkHu2eNyefhVyv4Hc+yD3Bl/lXmwnbk9ejtzHI/ffkHuZz3LP8R63RyxG7qOQ+0/IvXSU3Pe/w+1hC5H7KOR+ArkX/Cj3LJtwe8hc5H4JuR8Lyj3nPtyecgNyn47czyP3owG5N0nA7WnWIPcpyL0fcv8hRu6Fd+P2rE+R+wTk3gu5H/4i90yxuD3iMXK/itxPIff80XIvuhW3hz9E7v8j9xrIvdknuWfcgttD7yP3Eci9NnJvnCT3b69we8hd5D4YudcNyr3QHtye+gVyv4XczyH3+jFyzx6H29OvRO6TkfvvyL3VV7kf2IHbUyxD7uOQew/k3vCz3HNsx+3hi5D7WOTeCbmXipR72re4PWwBcr+M3I8j95If5Z53I24PmY3c/0HulYNyz7UPt6daj9ynIfcByL1CQO4H43F7mtXI/SZyP4vcy3+Ve+FduD15BXK/jtx/Q+5lv8g98wfcHrEEuY9B7j8i9wJRct//DreHPUDuo5B7R+R+6JPcM27G7aHzkPtF5N4+KPemibj920vcHjITuf+N3NsE5F58D25P/Ry5T0Xu/ZD7kRi559mN27M+Q+4TkXtP5N7yi9wzxOL2FEuR+zXkfgq5t4iWe5FtuD38EXIfg9yrIvdGkXJP9wa3h85H7sORexXkXiJJ7nlf4/aQWch9MHKvE5R77r24PdU65H4buf+F3OsF5J4tHrenX4XcbyD335F7ua9yL7YTtycvR+7jkXsP5F7ms9wzv8ftEYuR+zXk3hm5l46S+/63uD1sIXK/jNw7IPd8H+WeZRNuD52D3Ici92NBuefch9tTbsDtIdOR+wDkfjQg9yYJuD3NGuQ+BbmfRe4/xMg9zy7cnvUpcp+A3H9F7oe/yD1TLG6PeIzcryL3H5F782i5F92K28MfIveRyL0Gcm/2Se7ptuD20PvI/SJyr43cGyfJ/dsr3B5yF7n/jdzrBuVeaA9uT/0Cud9C7n2Re/0YuWePw+3pVyL3yci9J3Jv9VXuB3bg9hTLkPs45P4zcm/4We45tuP28EXIfQxy74TcS0XKPe1b3B62ALkPR+7HkXvJj3LPshG3h8xG7heQe+Wg3HPtw+2p1iP3acj9L+ReMSD3g/G4Pc1q5H4TufdG7uW/yr3wLtyevAK5X0fu3ZH795/lnvkDbo9YgtyvIffqyL1AlNyLvsPtYQ+Q+3/IvSNyP/RJ7hk34/bQech9KHJvH5R700Tc/u0lbg+Zidz7I/c2AbkX34PbUz9H7lOR+xnk3jpG7tl34/asz5D7ROT+K3Jv+UXuGWJxe4qlyP0acu+K3FtEy73INtwe/gi5j0TuVZF7o0i5p3uD20PnI/d/kXsV5F4iSe55X+P2kFnIfRByrxOUe+69uD3VOuR+G7n3Re71AnLPFo/b069C7jeQ+2nkXu6r3IvtxO3Jy5H7eOT+M3Iv81numd/j9ojFyH00cu+C3EtHyX3/W9wethC5D0PuHZB7vo9yz7IJt4fORe4XkPuxoNxz7sPtKTfg9pDpyP1P5H40IPcmCbg9zRrkPgW590buP8TIPc8u3J71KXKfgNy7I/fDX+SeKRa3p3iM3K8i92rIvXm03Ituxe3hD5H7f8i9BnJv9knu6bbg9tD7yH0Icq+N3Bsnyf3bK9weche590fudYNyT7kTuV9A7smf7N4Mu9fQ+0mpT/eoJ/W/PdJEOn20x3djlX7b2ifTbqPPy94NPvl8Ug5stEHms045OKzTve1fLf75PK7KJgA=");mask-image:url("data:image/webp;base64,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");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.hero-split-media img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
@media(max-width:899px){
  .hero-split{padding:clamp(2.75rem,10vw,4.5rem) 0}
  .hero-split .wrap{grid-template-columns:1fr;gap:clamp(2.25rem,8vw,3.5rem)}
  .hero-split-content{max-width:680px}
  .hero-split h1{max-width:16ch}
  .hero-split-media{-webkit-mask-image:none;mask-image:none;border-radius:8px}
}

.hero-shot{
  margin-top:clamp(3rem,6vw,4.4rem);
  padding:clamp(6px,2vw,12px);
  border-radius:12px;
  background:url("background-gradient.webp") center/cover no-repeat;
  transform:translateY(1px);
}
.hero-shot .shot{
  border-radius:8px;
  overflow:hidden;
}

.pb-0 {
  padding-bottom: 0 !important;
}
/* ---------------- screenshot frames ---------------- */
.shot{background:#fff;padding: clamp(4px,1.5vw,8px); border-radius:8px; box-shadow: 0 4px 10px #0000000d;}
.shot-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .78rem;border-bottom:1px solid var(--rule);background:#FAFBFB}
.dot{width:8px;height:8px;border-radius:50%;background:#D5DADE}
.shot-title{font-family:"Inter",sans-serif;font-size:.7rem;color:var(--muted);letter-spacing:.06em}
.shot-body{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.2rem;text-align:center;background:linear-gradient(90deg,rgba(10,13,49,.10) 1px,transparent 1px) 0 0/48px 100%,#F8F8FB}

/* ---------------- sections ---------------- */
.sec{padding:clamp(2.9rem,6.2vw,4.8rem) 0; background-color: #fff;}
.sec-band{background:var(--paper)}
main > section:not([class]){background:var(--paper)}
.sec-dark{position:relative;background:url("background-gradient.webp") center/cover no-repeat;color:#fff;border-top:0}
.sec-dark::before{content:"";position:absolute;inset:0;background:rgba(10,13,49,.88);pointer-events:none}
.sec-dark>*{position:relative;z-index:1}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .lede,.sec-dark p{color:rgba(255,255,255,.74)}
.sec-dark .tag{color:rgba(255,255,255,.55)}
.sec-head{width:100%;max-width:1110px;margin-bottom:2.3rem}
.sec-head .tag{display:block;margin-bottom:.75rem}
.sec-head h2{max-width:32ch}
.sec-head .lede{max-width:106ch;margin-top:clamp(.75rem,1.5vw,1rem)}

/* ---------------- problem grid ---------------- */
.prob-grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:780px){.prob-grid{grid-template-columns:repeat(3,1fr)}}
.prob{position:relative;overflow:hidden;background:var(--paper);padding:var(--card-pad);border-radius:8px}
.sec-band .prob{background:#fff; box-shadow: 0 4px 10px #0000000d;}
.svc-i::before,.role::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--brand-signal)}
.prob .tag{display:block;margin-bottom:.65rem;color:var(--brand-signal)}
.prob .tag::before, .prob .tag::after{display: none;}
.prob h3{margin-bottom:.5rem; margin-top:1rem}
.prob p{margin:0;color:var(--brand-steel);font-size:.95rem}
.sec-dark .prob{background:var(--brand-deep)}
.sec-dark .prob-grid{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.sec-dark .prob .tag{color:var(--brand-signal)}

/* ---------------- module cards ---------------- */
.mods{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:860px){.mods{grid-template-columns:repeat(3,1fr)}}
.mod{background:#fff;padding:var(--card-pad);display:flex;flex-direction:column; border-radius:8px; box-shadow: 0 4px 10px #0000000d;}
.mod-name{font-family:"Inter Tight",sans-serif;font-weight:600;font-size:var(--type-feature);letter-spacing:-.01em;margin-bottom:.2rem}
.mod .tag{display:block;margin-bottom:1.1rem}
.mod .tag:before, .mod .tag:after{display: none;}
.mod p{color:var(--brand-steel);font-size:.96rem;flex:1}
.mod-link{font-weight:600;font-size:.93rem;text-decoration:none;margin-top:.4rem}
.mod-rule{height:3px;background:var(--brand-signal);width:44px;margin-bottom:1.2rem}

/* ---------------- workflow diagram ---------------- */
.flow{background:#fff;border-radius:8px;box-shadow:0 4px 10px #0000000d;overflow:hidden}
.flow-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:clamp(1rem,2vw,1.4rem) clamp(1.25rem,2.5vw,2rem);border-bottom:1px solid var(--rule);background:#fff;flex-wrap:wrap}
.flow-head .tag{color:var(--brand-signal);margin:0}
.flow-lanes{display:grid;grid-template-columns:1fr;gap:clamp(2rem,7vw,3rem);padding:clamp(1rem,3vw,2rem);}
@media(min-width:880px){.flow-lanes{grid-template-columns:1fr 1.35fr 1fr;gap:36px}}
.lane{position:relative;padding:clamp(1.1rem,2vw,1.5rem);border:1px solid var(--rule);border-radius:8px;background:#fff;box-shadow:0 6px 18px rgba(10,13,49,.06)}
.lane-mid{position:relative;background:var(--brand-deep);}
.lane-mid>*{position:relative;z-index:1}
.lane-hd{display:flex;align-items:center;min-height:32px;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--rule)}
.lane-hd .tag{margin:0}
.lane-hd .tag:before,.lane-hd .tag:after {display: none;}
.lane-mid .lane-hd{border-bottom-color:rgba(255,255,255,.18)}
.lane-mid .lane-hd .tag{color:var(--brand-signal)}
.node{position:relative;background:#fff;border:1px solid var(--rule);border-left:3px solid var(--brand-steel);padding:.8rem .9rem;border-radius:6px;box-shadow:0 3px 10px rgba(10,13,49,.05)}
.lane-mid .node{border-left-color:var(--brand-signal);margin-bottom:30px}
.lane-mid .node:last-child{margin-bottom:0}
.lane-mid .node:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-21px;width:17px;height:9px;background:var(--brand-signal);clip-path:polygon(0 42%,70% 42%,70% 0,100% 50%,70% 100%,70% 58%,0 58%);transform:translateX(-50%) rotate(90deg)}
.node-t{font-weight:600;font-size:.95rem;line-height:1.3;margin-top:.15rem}
.node-s{font-size:.82rem;color:var(--muted);margin-top:.15rem;line-height:1.4}
.node-tag{font-size:.86rem;color:var(--muted);letter-spacing:.08em; font-weight: 500;}
.arrow{position:relative;width:20px;height:20px;margin:.6rem auto;font-size:0;line-height:0}
.arrow::before{content:"";position:absolute;left:0;top:50%;width:17px;height:9px;background:var(--brand-signal);clip-path:polygon(0 42%,70% 42%,70% 0,100% 50%,70% 100%,70% 58%,0 58%);transform:translateY(-50%) rotate(90deg)}
.flow-foot{padding:clamp(1rem,2vw,1.3rem) clamp(1.25rem,2.5vw,2rem);border-top:1px solid var(--rule);background:#fff;font-size:.9rem;color:var(--brand-steel)}
@media(min-width:880px){
  .lane:not(:last-child)::after{content:"";position:absolute;top:50%;right:-28px;width:20px;height:9px;background:var(--brand-signal);clip-path:polygon(0 42%,70% 42%,70% 0,100% 50%,70% 100%,70% 58%,0 58%);transform:translateY(-50%);z-index:3}
}
@media(max-width:879px){
  .lane:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-21px;width:20px;height:9px;background:var(--brand-signal);clip-path:polygon(0 42%,70% 42%,70% 0,100% 50%,70% 100%,70% 58%,0 58%);transform:translateX(-50%) rotate(90deg);z-index:3}
}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{font-size:.68rem;letter-spacing:.06em;padding:.2rem .45rem;border:1px solid var(--rule);background:#fff;color:var(--brand-steel); border-radius: 4px;}
.chip-ok{border-color:#BFDFCF;background:#F1F9F5;color:var(--ok)}
.chip-hold{border-color:#F0DBB0;background:#FDF7EA;color:#8A6410}

/* ---------------- capability rows ---------------- */
.cap-list{display:flex;flex-direction:column;gap:clamp(2rem,5vw,4rem); margin-top: 2rem;}
.cap{display:grid;gap:1.6rem;align-items:center; border-radius:8px;}
@media(min-width:900px){.cap{grid-template-columns:1fr 1.25fr;gap:3rem}.cap-flip{grid-template-columns:1.25fr 1fr}.cap-flip .cap-txt{order:2}.cap-flip .cap-img{order:1}}
.cap-txt .node-tag{display:block;margin-bottom:.75rem;color:var(--brand-signal)}
.cap-txt h3{margin-bottom:1rem;font-size:var(--type-feature)}
.cap-txt p{color:var(--brand-steel);font-size:clamp(.85rem,2vw,1rem);margin:0}

/* ---------------- integrations ---------------- */
.int-grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:760px){.int-grid{grid-template-columns:repeat(3,1fr)}}
.int{background:var(--brand-deep);padding:var(--card-pad);border-top-color: #f9f4f21a;border-width: 2px 0 0;
  border-radius:8px;
  border-style: solid;
  background-color: #f9f4f20d;
  backdrop-filter: blur(32px);}
.int h3{font-size:var(--type-card);margin-bottom:.35rem}
.int p{margin:0;font-size:.88rem;color:rgba(255,255,255,.68)}

/* ---------------- roles ---------------- */
.roles{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:780px){.roles{grid-template-columns:repeat(3,1fr)}}
.role{position:relative;overflow:hidden;padding:var(--card-pad);
  text-decoration: none;
  color: inherit;
  display: block;
  background: var(--paper);
  border-radius:8px;}
.sec-dark .role{border-top-color:var(--brand-signal)}
.role h3{font-size:var(--type-card);margin-bottom:.35rem}
.role p{margin:0;font-size:.9rem;color:var(--brand-steel)}
.sec-dark .role p{color:rgba(255,255,255,.7)}

/* ---------------- strip ---------------- */
.strip{background:#fff;padding:clamp(24px,3.5vw,40px);display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap; box-shadow: 0 4px 10px #0000000d; border-radius:8px;}
.sec-band .strip{background:#fff}
.strip p{margin:0;color:var(--brand-steel);font-size:clamp(.85rem,2vw,1rem);max-width:60ch}
.strip h3{margin-bottom:1rem;font-size:var(--type-feature)}

/* ---------------- phases ---------------- */
.phases{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:840px){.phases{grid-template-columns:repeat(4,1fr)}}
.phase{background:var(--paper);padding:var(--card-pad);border-radius:8px}
.phase-n{font-family:"Inter",sans-serif;font-size:.86rem;letter-spacing:.01em;color:var(--brand-signal);display:block;margin-bottom:.65rem; font-weight: 500;}
.phase h3{margin-top:1rem;margin-bottom:.5rem}
.phase p{margin:0;font-size:.95rem;color:var(--brand-steel)}

/* ---------------- deliverables ---------------- */
.deliv{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:780px){.deliv{grid-template-columns:repeat(2,1fr)}}
.deliv-i{background:#fff;padding:1.2rem 1.3rem;display:flex;gap:.9rem;align-items:flex-start}
.deliv-i .node-tag{padding-top:.2rem;white-space:nowrap;color:var(--brand-signal)}
.deliv-i h3{font-size:var(--type-card);margin-bottom:.25rem}
.deliv-i p{margin:0;font-size:.9rem;color:var(--brand-steel)}

/* ---------------- triggers ---------------- */
.trig{display:grid;gap:1.2rem}
@media(min-width:780px){.trig{grid-template-columns:repeat(3,1fr)}}
.trig-i{border:1px solid var(--rule);border-top:3px solid var(--brand-signal);padding:1.4rem;background:#fff}
.trig-i h3{margin-bottom:.45rem;font-size:var(--type-card)}
.trig-i p{margin:0;font-size:.94rem;color:var(--brand-steel)}

/* ---------------- crossover ---------------- */
.cross{display:grid;gap:1.6rem;align-items:center}
@media(min-width:880px){.cross{grid-template-columns:1.5fr 1fr;gap:3rem}}
.cross-card{display:flex; flex-direction: column; align-items: flex-start;border-width:2px 0 0;padding:var(--card-pad); border-top-color: #f9f4f21a; border-radius:8px; border-style: solid; background-color: #f9f4f20d; backdrop-filter: blur(32px); min-height: 250px;}
.cross-card h3{font-size:var(--type-card);margin-bottom:1rem;max-width:80%; line-height: 1.4;}
.cross-card p{margin:0 0 1.1rem;font-size:.9rem;color:rgba(255,255,255,.7); max-width: 80%}
.cross-card a{margin-top: auto;}

/* ---------------- proof / stats ---------------- */
.proof{display:grid;gap:2rem;align-items:start}

@media(min-width:900px){.proof{grid-template-columns:1.25fr 1fr;gap:3.5rem}}
.stat-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stat{border-width:2px 0 0;padding:24px;background-color: #f9f4f20d; border-style: solid;border-radius:8px;
  backdrop-filter: blur(32px);border-top-color: #f9f4f21a;}
.stat-n{font-family:"Inter",sans-serif;font-weight:600;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:#fff}
.stat-l{font-size:.9rem;color:rgba(255,255,255,.7);margin-top:.35rem}
.logos{display:flex;flex-wrap:wrap;gap:clamp(1rem,2vw,1.5rem);margin-top:1.5rem}
.logo-cell{background:var(--brand-deep);flex:1 1 160px;min-height:78px;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center}
.logo-cell .tag{color:rgba(255,255,255,.42);font-size:.66rem}

/* ---------------- services cards ---------------- */
.svc{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:780px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc-i{position:relative;overflow:hidden;padding:var(--card-pad);text-decoration:none;color:inherit;display:block;background:var(--paper);border-radius:8px}
.sec-band .svc-i{background:#fff;}
.svc-i h3{margin-bottom:.5rem}
.svc-i p{margin:0 0 .8rem;font-size:.93rem;color:var(--brand-steel)}
.svc-i span{font-weight:500;font-size:.9rem;color:var(--brand-signal)}

/* ---------------- two-col ---------------- */
.two{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:3.5rem}}
.two p{color:var(--brand-steel)}
.sec-dark .two p{color:rgba(255,255,255,.74)}

/* ---------------- prose ---------------- */
.prose{max-width:76ch}
.prose>p:first-child{font-size:1.05rem;color:var(--brand-deep);line-height:1.7}
.prose h2{font-size:clamp(1.55rem,2.3vw,2.05rem);margin:clamp(2.25rem,4vw,3rem) 0 .9rem;padding-top:clamp(1.25rem,2.5vw,1.6rem);border-top:1px solid var(--rule)}
.prose h2:first-child {border-top:  none; padding-top: 0; margin-top: 0;}
.prose h3{margin:clamp(1.8rem,3vw,2.3rem) 0 .65rem}
.prose p,.prose li{color:var(--brand-steel);line-height:1.72}
.prose p{margin-bottom:1.1rem}
.prose strong{color:var(--brand-deep)}
.prose ul{margin:1.3rem 0 1.8rem;padding:clamp(1.15rem,2.5vw,1.5rem) clamp(1.25rem,3vw,1.75rem) clamp(1.15rem,2.5vw,1.5rem) clamp(2.3rem,4vw,2.75rem);border-radius:8px;background:var(--paper)}
.prose li{margin-bottom:.7rem}
.prose li:last-child{margin-bottom:0}
.prose blockquote{margin:clamp(1.75rem,3.5vw,2.4rem) 0;padding:clamp(1.2rem,2.5vw,1.6rem);border-left:3px solid var(--brand-signal);border-radius:0 8px 8px 0;background:var(--paper);color:var(--brand-ink)}
.prose blockquote p{margin:0;color:var(--brand-ink);font-family:"Inter Tight",sans-serif;font-size:clamp(1.05rem,1.7vw,1.18rem);font-weight:500;line-height:1.55}

/* ---------------- faq ---------------- */
.faq{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.faq details{overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 4px 10px #0000000d}
.faq summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:clamp(1rem,2vw,1.35rem) clamp(1rem,2.5vw,1.5rem);cursor:pointer;list-style:none}
.faq summary h4{line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand-deep);font-family:"Inter",sans-serif;font-weight:300;font-size:clamp(1.75rem,3vw,2.25rem);line-height:1}
.faq details[open] summary{padding-bottom:.7rem}
.faq details[open] summary::after{content:"−";color:var(--brand-signal)}
.faq details p{margin:0;padding:0 clamp(1rem,2.5vw,1.5rem) clamp(1rem,2vw,1.35rem);color:var(--brand-steel);font-size:.95rem;line-height:1.55;max-width:70ch}

/* ---------------- blog ---------------- */
.feat{display:grid;overflow:hidden;border-radius:8px;background-color: var(--paper);}
@media(min-width:900px){.feat{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.feat-media{min-height:clamp(260px,40vw,460px);background:var(--brand-band);overflow:hidden}
.feat-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.feat-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(1.5rem,3.5vw,3rem)}
.feat-body>.tag{display:block;margin-bottom:.8rem;color:var(--brand-signal)}
.feat h2{max-width:18ch;font-size:clamp(1.75rem,2.6vw,2.4rem);margin-bottom:.8rem}
.feat-body>p{max-width:52ch;margin-bottom:clamp(1rem,2vw,1.4rem);color:var(--brand-steel);font-size:.95rem;line-height:1.55}
.feat-list{width:100%;margin-bottom:clamp(1.25rem,2.5vw,1.75rem);display:  flex; flex-direction: column; gap: 8px;}
.feat-list>div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:1rem;padding:1rem 1rem; background-color: #fff; border-radius: 4px;}
.feat-list span{color:var(--brand-signal);font-size:.86rem;font-weight:600; border-right: 1px solid var(--rule);}
.feat-list p{margin:0;color:var(--brand-steel);font-size:.84rem;line-height:1.45}

.news-archive .sec-head{margin-bottom:clamp(1.4rem,3vw,2rem)}
.posts{display:grid;gap:clamp(1.2rem,2.4vw,1.8rem)}
@media(min-width:700px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post{overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 4px 10px #0000000d;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.post:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(10,13,49,.11)}
.post-thumb{aspect-ratio:16/9;background:var(--brand-band);overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.post:hover .post-thumb img{transform:scale(1.025)}
.post-body{display:flex;flex:1;flex-direction:column;padding:clamp(1.15rem,2vw,1.5rem)}
.post .tag{display:block;margin-bottom:.7rem;color:var(--brand-signal)}
.post h3{margin-bottom:.6rem;font-size:var(--type-card);line-height:1.2}
.post p{font-size:.92rem;line-height:1.5;color:var(--brand-steel);flex:1;margin-bottom:1rem}
.post-meta{font-family:"Inter",sans-serif;font-size:.8rem;font-weight:600;color:var(--brand-signal);letter-spacing:0}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.filters a{font-size:.85rem;font-weight:500;text-decoration:none;color:var(--brand-steel);border:1px solid var(--rule);padding:.4rem .85rem;border-radius:4px;background:#fff}
.filters a.on{background:var(--brand-ink);color:#fff;border-color:var(--brand-ink)}
.issues{border-top:1px solid var(--rule)}
.issue{display:flex;gap:1.2rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;flex-wrap:wrap}
.issue .post-meta{min-width:110px}
.issue h3{font-size:var(--type-card);flex:1;min-width:240px}

/* ---------------- forms ---------------- */
.form{display:grid;gap:1rem;max-width:520px}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem;letter-spacing:.01em}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.95rem;padding:.7rem .8rem;border:1px solid var(--rule);border-radius:4px;background:#fff;color:var(--brand-ink)}
.field textarea{min-height:110px;resize:vertical}
.field-note{font-size:.8rem;color:var(--muted);margin-top:.3rem}
.contact-layout{align-items:start}
.contact-aside{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.contact-card{overflow:hidden;border-radius:8px;background:var(--paper);padding:clamp(1.25rem,3vw,2rem);}
.contact-card>.tag{display:block;margin-bottom:.7rem;color:var(--brand-signal)}
.contact-card h3{font-size:var(--type-feature);margin-bottom:.65rem;line-height:1.2}
.contact-card>p{max-width:56ch;margin-bottom:clamp(1rem,2vw,1.4rem);color:var(--brand-steel);font-size:.94rem;line-height:1.55}
.contact-links{display:grid;gap:.65rem}
.contact-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;border-radius:6px;background:#fff;padding:clamp(.85rem,1.8vw,1rem);color:var(--brand-deep);text-decoration:none;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.contact-links a:hover{border-color:rgba(10,13,49,.35);transform:translateY(-1px);box-shadow:0 5px 14px rgba(10,13,49,.07)}
.contact-links strong{display:block;font-family:"Inter Tight",sans-serif;font-size:.95rem;line-height:1.3}
.contact-links small{display:block;margin-top:.2rem;color:var(--brand-steel);font-size:.8rem;line-height:1.4}
.contact-link-icon{color:var(--brand-signal);font-size:1.15rem;line-height:1}
.contact-card-dark{background:var(--brand-deep);}
.contact-card-dark h3{color:#fff}
.contact-card-dark>p{color:rgba(255,255,255,.72);margin-bottom:1rem}
.contact-response{display:inline-flex;align-items:center;min-height:32px;border-radius:4px;background:var(--brand-signal);padding:.5rem .7rem;color:#fff;font-size:.76rem;font-weight:600;line-height:1.2;letter-spacing:.03em;text-transform:uppercase}
.result{border:1px solid var(--rule);border-top:3px solid var(--brand-signal);background:#fff;padding:1.6rem}
.result-n{font-family:"Inter",sans-serif;font-weight:600;font-size:clamp(2rem,5vw,2.9rem);line-height:1;color:var(--brand-ink)}
.result-l{font-size:.88rem;color:var(--brand-steel);margin-top:.4rem}
.result-row{padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.result-row:last-of-type{border-bottom:0}

/* ---------------- resources ---------------- */
.res{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:700px){.res{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.res{grid-template-columns:repeat(3,minmax(0,1fr))}}
.res-i{position:relative;overflow:hidden;border-top:3px solid var(--brand-signal);border-radius:8px;background:#fff;padding:clamp(1.25rem,2.5vw,1.75rem);display:flex;flex-direction:column;text-decoration:none;color:inherit;box-shadow:0 6px 18px rgba(10,13,49,.07);transition:transform .2s ease,box-shadow .2s ease}
.res-i:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(10,13,49,.11)}
.res-i.is-gated{background:var(--paper)}
.res-i .tag{display:block;margin-bottom:clamp(1.25rem,2.5vw,1.75rem);padding-right:125px;color:var(--brand-signal)}
.res-i h3{margin-bottom:.55rem;line-height:1.2}
.res-i p{font-size:.93rem;line-height:1.5;color:var(--brand-steel);flex:1;margin-bottom:1rem}
.res-link{font-size:.85rem;font-weight:600;color:var(--brand-signal)}
.gate{position:absolute;top:clamp(1.1rem,2vw,1.4rem);right:clamp(1.1rem,2vw,1.4rem);font-family:"Inter",sans-serif;font-size:.72rem;font-weight:600;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--brand-deep);padding:.5rem .7rem;border-radius:4px}

/* ---------------- subscribe ---------------- */
.sub{border:1px solid var(--rule);border-left:3px solid var(--brand-signal);background:var(--brand-band);padding:1.6rem;display:grid;gap:1rem}
@media(min-width:820px){.sub{grid-template-columns:1.2fr 1fr;align-items:center;gap:2rem};}
.sub h3{margin-bottom:.4rem}
.sub p{margin:0;font-size:.93rem;color:var(--brand-steel)}
.sub-form{display:flex;gap:.5rem;flex-wrap:wrap}
.sub-form input{flex:1;min-width:190px;font:inherit;font-size:.93rem;padding:.72rem .8rem;border:1px solid var(--rule);border-radius:4px}

/* ---------------- CTA ---------------- */
.cta-box{position:relative;display:flex;min-height:clamp(350px,28vw,376px);padding:clamp(2.5rem,4vw,4rem);margin-bottom:calc(clamp(88px,12vw,240px) * -1);border:0;border-radius:12px;overflow:hidden;background:var(--brand-deep) url("background-gradient.webp") center/cover no-repeat;z-index:2; justify-content: center; flex-direction: column; box-shadow: 0 4px 10px #0000000d;}
.cta-box::before{content:"";position:absolute;inset:0;background:rgba(10,13,49,.88);pointer-events:none}
.cta-box::after{content:"";position:absolute;top:clamp(2rem,3vw,3rem);right:clamp(1.5rem,2.5vw,2.5rem);bottom:-18%;width:52%;border-radius:8px 8px 0 0;background:#fff url("eztrak-dashboard.webp") center top/contain no-repeat;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.cta-box .cta-txt,.cta-box .cta-act{position:relative;z-index:1;max-width:460px}
.cta-box h2{margin-bottom:.75rem;max-width:16ch;color:#fff;font-size:clamp(2rem,3vw,2.5rem);line-height:1.08;}
.cta-box .lede{margin:0;max-width:38ch;color:rgba(255,255,255,.78);font-size:clamp(.88rem,1.2vw,1rem);line-height:1.5}
.cta-act{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.cta-box .cta-act{flex-direction:row;align-items:center;gap:.65rem;margin-top:clamp(1.5rem,2.5vw,2rem)}
.cta-box .btn-pri{background:#fff;color:var(--brand-deep)}
.cta-box .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.04)}
body:has(.cta-box) .ftr{padding-top:calc(clamp(3.25rem,10vw,10rem) + clamp(88px,9vw,150px));  border-top: none}
main > .sec:has(.cta-box){padding-bottom:0}
@media(max-width:760px){
  .sub-form {
    width: 100%;
  }
 .cta-box{min-height:clamp(700px,190vw,1000px);padding:clamp(2rem,7vw,4rem) clamp(1.25rem,6vw,3rem) clamp(400px,95vw,640px);margin-bottom:calc(clamp(64px,14vw,100px) * -1)}
 .cta-box .cta-txt,.cta-box .cta-act{width:100%;max-width:none}
 .cta-box .cta-act{flex-direction:column;gap:.65rem}
 .cta-box .cta-act .btn{width:100%; text-align: center;}
 .cta-box::after{top:auto;left:clamp(1.25rem,6vw,3rem);right:clamp(-2.5rem,-5vw,-1rem);bottom:-1px;width:auto;height:clamp(360px,95vw,620px);border-radius:8px 8px 0 0;background-position:left top;background-size:cover}
 body:has(.cta-box) .ftr{padding-top:calc(clamp(3.25rem,7vw,6rem) + clamp(64px,14vw,100px))}
}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.cta-alt{font-size:.9rem;color:var(--muted)}

/* ---------------- footer ---------------- */
.ftr{background:#fff;color:var(--brand-deep-60);padding:clamp(3.25rem,7vw,6rem) 0 clamp(1.5rem,3vw,2rem);font-size:.9rem; border-top: 1px solid var(--rule);}
.ftr-brand{margin-bottom:clamp(1rem,3.5vw,2.4rem);max-width:34ch}
.ftr-brand p{margin:clamp(.65rem,1.5vw,.9rem) 0 0}
.ftr-grid{display:grid;gap:clamp(1.5rem,3vw,2rem)}
@media(min-width:640px){.ftr-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.ftr-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1120px){.ftr-grid{grid-template-columns:repeat(5,1fr);gap:clamp(1.25rem,2.5vw,1.6rem)}}
.ftr h3{color:var(--brand-deep);font-size:1rem;font-family:"Inter Tight",sans-serif;font-weight:500;margin-bottom:clamp(.9rem,1.8vw,1.1rem)}
.ftr a{color:var(--brand-deep-60);text-decoration:none;display:block;margin-bottom:clamp(.5rem,2vw,.8rem)}
.ftr a:hover{color:var(--brand-deep)}
.ftr-btm{border-top:1px solid var(--rule);margin-top:clamp(3rem,7vw,6rem);padding-top:clamp(1rem,2vw,1.4rem);font-size:.82rem;text-align:center}

/* ============================================================
   NAVIGATION — dropdowns (desktop) + slide-out menu (mobile)
   Dev: in Elementor, build this with the Theme Builder header
   and a Mega Menu / Nav Menu widget. Structure and grouping
   below is what matters, not this exact implementation.
   ============================================================ */
.navwrap{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
.nav{display:none;gap:.1rem;align-items:center;margin:0}
@media(min-width:1040px){.nav{display:flex}}

.nav-item{position:relative}
.nav-top{
  display:flex;align-items:center;gap:.1rem;
  text-decoration:none;font-size:.93rem;font-weight:500;
  padding:.55rem .7rem;background:none;border:0;font-family:inherit;cursor:pointer;
}
.nav-top:hover,.nav-item:hover .nav-top,.nav-item:focus-within .nav-top{opacity:0.6}
.nav-top.on{color:var(--brand-signal)}
.nav-top .caret{width:16px;height:16px;display:inline-block;color:currentColor;transform:translateY(1px)}

.drop{
  position:absolute;top:120%;left:0;min-width:290px; border: 1px solid var(--rule);
  background:#fff;
  box-shadow:0 18px 44px -18px rgba(10,13,49,.35);
  padding:.5rem;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .12s ease,transform .12s ease,visibility .12s;z-index:90;border-radius:8px;
}
.nav-item:hover .drop,.nav-item:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:.6rem .7rem;text-decoration:none;color:var(--brand-ink);border-radius:4px;}
.drop a:hover{background:var(--brand-band)}
.drop .d-t{font-weight:500;font-size:.93rem;line-height:1.25;display:block}
.drop .d-s{font-size:.8rem;color:var(--muted);display:block;margin-top:.08rem;line-height:1.35; font-weight: 400;}
.drop .d-hd{
  font-size:.8rem;letter-spacing:.01em;
  color:var(--muted);padding:.55rem .7rem .3rem;display:block;
}
.drop .d-sep{display:block;height:1px;background:var(--rule);margin:.4rem .7rem}

/* mobile */
.burger{
  display:flex;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;
  padding:.5rem;margin-left:.2rem;
}
.burger span{display:block;width:20px;height:2px;background:var(--brand-deep)}
@media(min-width:1040px){.burger{display:none}}

/* Keep the desktop navigation mathematically centered between the viewport edges,
   independent of the logo and CTA widths. Mobile keeps the existing flex layout. */
@media(min-width:1040px){
  .hdr-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem}
  .logo{grid-column:1;grid-row:1;justify-self:start}
  .navwrap{display:contents}
  .nav{grid-column:2;grid-row:1;justify-self:center}
  .hdr-cta{grid-column:3;grid-row:1;justify-self:end}
}

.mob{
  display:none;background:var(--brand-deep);border-top:1px solid rgba(255,255,255,.14);
  padding:.6rem var(--sp) 1.4rem;
}
.mob.open{display:block}
@media(min-width:1040px){.mob{display:none!important}}
.mob details{border-bottom:1px solid rgba(255,255,255,.12)}
.mob summary{
  list-style:none;cursor:pointer;padding:.9rem .2rem;color:#fff;font-weight:500;font-size:1rem;
}
.mob summary::-webkit-details-marker{display:none}
.mob summary::after{content:"+";float:right;color:var(--brand-signal);font-weight:600}
.mob details[open] summary::after{content:"\2013"}
.mob .m-links{padding:0 .2rem .9rem}
.mob .m-links a{
  display:block;padding:.5rem 0;color:rgba(255,255,255,.78);text-decoration:none;font-size:.94rem;
}
.mob .m-links a:hover{color:#fff}
.mob .m-flat{
  display:block;padding:.9rem .2rem;color:#fff;font-weight:600;font-size:1rem;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12);
}
.mob .m-flat.on{color:var(--brand-signal)}


/* ============================================================
   WIDE-SCREEN LAYOUT — article + aside
   Prose alone on a wide monitor leaves the right half empty.
   Editorial sections pair the reading column with a summary rail.
   ============================================================ */
.article{display:grid;gap:2.4rem;align-items:start}
@media(min-width:1000px){.article{grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);gap:4rem}}
.rail{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.75rem;border-radius:8px;background:var(--paper);padding:clamp(1.25rem,2.5vw,1.75rem);}
.rail::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--brand-signal)}
@media(min-width:1000px){.rail{position:sticky;top:88px}}
.rail h3{font-family:"Inter",sans-serif;font-size:.86rem;letter-spacing:.01em;font-weight:500;color:var(--brand-deep-60);margin-bottom:.35rem}
.rail h3::before{content:"[ "}
.rail h3::after{content:" ]"}
.rail-i{padding:1rem;border-radius:6px;background:#fff}
.rail-n{font-family:"Inter Tight",sans-serif;font-weight:600;font-size:clamp(1.3rem,2vw,1.5rem);line-height:1;color:var(--brand-ink)}
.rail-l{font-size:.87rem;color:var(--brand-steel);margin-top:.4rem;line-height:1.45}
.rail .btn{margin-top:.5rem;width:100%;text-align:center}

/* ============================================================
   HERO EYEBROW STACK
   Letter-spacing is applied in CSS, never by typing spaces
   between letters. Spaced-out characters in the HTML break
   screen readers and stop Google reading the words.
   ============================================================ */

 

.eyebrow-stack .eb-1:only-child{margin-bottom:0}
.eb-1{
  font-size:.86rem;font-weight:500; 
  color:var(--brand-deep-60);letter-spacing: 0.01em;
  display:block;margin-bottom:1rem;
}
.eb-2{
  font-size:clamp(.82rem,1.5vw,.95rem);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;display:block;margin-bottom:.35rem;
}
.eb-3{
  font-size:.72rem;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.5);display:block;
}
.hero h1.statement{
  max-width:26ch;letter-spacing:-.02em;
  font-size:var(--type-h1);line-height:1.1;margin-top:1.1rem;
}
.hero h1.statement em{color:var(--brand-signal)}
.hero h1.wide em{color:var(--brand-signal)}


/* eyebrow stack inside a dark content section (not the hero) */
.sec-dark .eyebrow-stack{margin-bottom:1.1rem}
.sec-dark .eb-1{color:var(--brand-signal)}
.sec-dark .eb-3{color:rgba(255,255,255,.45);margin-top:.5rem}


/* hero screenshot runs wide, not tall — it is the only image on the homepage */
.hero-shot .shot-body{aspect-ratio:21/9}
@media(max-width:700px){.hero-shot .shot-body{aspect-ratio:16/10}}

/* ============================================================
   ROLE CARDS + QUALIFICATIONS (services pages)
   ============================================================ */
.rolegrid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:700px){.rolegrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.rolegrid{grid-template-columns:repeat(4,1fr)}}
.rolegrid:has(> :nth-child(2):last-child){grid-template-columns:1fr}
@media(min-width:820px){.rolegrid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}}

.rolecard{position:relative;overflow:hidden;background:var(--paper);padding:clamp(1.5rem,2.5vw,2rem) clamp(1rem,2vw,1.5rem);display:flex;flex-direction:column;border-radius:8px;}
.rolecard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--brand-signal)}
.rolecard-hd{display:flex;align-items:flex-start; flex-direction:column;gap:.85rem;margin-bottom:1.4rem}
.rolecard-n{
  width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;
  font-size:.75rem;font-weight:600;background:var(--brand-deep);color:#fff;border-radius:4px;letter-spacing:.05em;
}
.rolecard-hd h3{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.15}
.rolecard-lbl{
  font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-signal);display:block;margin-bottom:.7rem;
}
.rolecard-list{margin:0 0 1.5rem;padding:0;list-style:none;flex:1}
.rolecard-list li{position:relative;padding-left:1.15rem;font-size:.93rem;color:var(--brand-steel);margin-bottom:.65rem;line-height:1.5}
.rolecard-list li::before{content:"";position:absolute;left:0;top:.58em;width:6px;height:6px;border-radius:50%;background:var(--brand-signal)}
.rolecard-list li:last-child{margin-bottom:0}
.rolecard-dl{margin-top:auto;padding:1rem 1.05rem;border-left:3px solid var(--brand-signal);border-radius:4px;background:#fff}
.rolecard-dl .rolecard-lbl{margin-bottom:.35rem;color:var(--brand-deep-60)}
.rolecard-dl strong{font-size:.95rem;color:var(--brand-ink);display:block;line-height:1.4}

.quals{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:700px){.quals{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.quals{grid-template-columns:repeat(4,1fr)}}
.qual{background:#fff;padding:var(--card-pad); border-radius:8px; box-shadow: 0 4px 10px #0000000d;}
.qual .node-tag{display:block;margin-bottom:.65rem;color:var(--brand-signal)}
.qual h3{font-size:var(--type-card);margin-bottom:.5rem;line-height:1.2}
.qual p{margin:0;font-size:.9rem;color:var(--brand-steel)}
.sec-band .qual{background:#fff}

/* ---------------- people grid ---------------- */
.people{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:560px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.people{grid-template-columns:repeat(4,minmax(0,1fr))}}
.person{overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 6px 18px rgba(10,13,49,.07);transition:transform .2s ease,box-shadow .2s ease}
.person:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(10,13,49,.11)}
.person-ph{aspect-ratio:4/3;background:var(--brand-band);overflow:hidden}
.person-ph img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
.person:hover .person-ph img{transform:scale(1.025)}
.person-info{padding:clamp(1rem,2vw,1.3rem); text-align: center;}
.person h3{font-size:var(--type-card);margin-bottom:.35rem;line-height:1.2}
.person-meta{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
.person-role{font-size:.76rem;font-weight:600;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-signal)}
.person-linkedin{display:inline-flex;align-items:center;color:var(--brand-deep-60);line-height:1; color:var(--brand-signal)}
.person-linkedin:hover{color:var(--brand-signal)}


.shot-body:empty{aspect-ratio:21/9;background:
  linear-gradient(90deg,rgba(10,13,49,.09) 1px,transparent 1px) 0 0/56px 100%,
  linear-gradient(180deg,#FCFDFD,#F3F5F6)}
@media(max-width:700px){.shot-body:empty{aspect-ratio:16/10}}
.logo-cell:empty{min-height:78px}

/* ---------------- breadcrumbs ---------------- */
.crumbs{background:var(--brand-deep);padding:.55rem 0;font-size:.8rem;
  letter-spacing:.04em;
  border-top:1px solid rgba(255,255,255,.1)}
.crumbs .wrap{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.crumbs a{color:rgba(255,255,255,.6);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{color:rgba(255,255,255,.35)}
.crumbs span[aria-current]{color:var(--brand-signal)}


/* ============================================================
   NEWSLETTER ISSUE — comparison blocks
   ============================================================ */
.vs{display:grid;gap:clamp(.85rem,1.5vw,1.1rem);margin:clamp(1.75rem,3.5vw,2.4rem) 0}
@media(min-width:640px){.vs{grid-template-columns:1fr 1fr}}
.vs-c{border-top:3px solid var(--brand-signal);border-radius:8px;background:#fff;padding:clamp(1.15rem,2.5vw,1.5rem);box-shadow:0 5px 16px rgba(10,13,49,.06)}
.vs-c.good{border-top-color:var(--ok)}
.vs-c .tag{display:block;margin-bottom:.6rem}
.vs-c.bad .tag{color:var(--brand-signal)}
.vs-c.good .tag{color:var(--ok)}
.vs-c p{margin:0;font-size:.92rem;line-height:1.6;color:var(--brand-steel)}

/* ============================================================
   SAVINGS ESTIMATOR
   ============================================================ */
/* ===== ESTIMATOR-SPECIFIC — KEEP THESE on the live site ===== */
.calc{width:100%;max-width:1080px;margin:0 auto}
.calc-step{border-top:3px solid var(--brand-signal);border-radius:8px;background:#fff;box-shadow:0 8px 24px rgba(10,13,49,.08);padding:clamp(1.35rem,3vw,2.5rem)}
.calc-step.hide{display:none}
.calc-qnum{font-family:"Inter",sans-serif;color:var(--brand-signal);font-size:.78rem;line-height:1.3;letter-spacing:.06em;font-weight:600;text-transform:uppercase;margin-bottom:clamp(.6rem,1.2vw,.85rem)}
.calc-qt{font-family:"Inter Tight",sans-serif;font-weight:600;font-size:var(--type-feature);line-height:1.2;margin-bottom:clamp(.45rem,1vw,.65rem);color:var(--brand-ink)}
.calc-qh,.calc-intro-copy{max-width:76ch;color:var(--brand-steel);font-size:.95rem;line-height:1.55;margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
.calc-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
.calc-opts{display:grid;gap:clamp(.75rem,1.5vw,1rem)}
.calc-opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.calc-opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.calc-opt{position:relative;min-height:84px;border:1px solid var(--rule);border-radius:6px;background:#fff;padding:clamp(.9rem,1.8vw,1.15rem);cursor:pointer;text-align:left;font-family:inherit;font-size:.98rem;color:var(--brand-ink);transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .2s ease;display:flex;flex-direction:column;justify-content:center;gap:.25rem}
.calc-opt b{font-family:"Inter Tight",sans-serif;font-size:1rem;font-weight:600;line-height:1.3}
.calc-opt small{color:var(--brand-deep-60);font-size:.82rem;line-height:1.4}
.calc-opt:hover{border-color:rgba(10,13,49,.35);background:var(--brand-band);transform:translateY(-1px)}
.calc-opt.sel{border-color:var(--brand-deep);background:var(--brand-deep);color:#fff;box-shadow:inset 3px 0 var(--brand-signal)}
.calc-opt.sel small{color:rgba(255,255,255,.7)}
.calc-field{margin-top:clamp(1.25rem,2.5vw,1.75rem)}
.calc-field label{display:block;font-size:.85rem;font-weight:500;color:var(--brand-steel);margin-bottom:.45rem}
.calc-field input{width:100%;min-height:50px;border:1px solid var(--rule);border-radius:6px;background:#fff;padding:.75rem .9rem;font-size:1rem;font-family:inherit;color:var(--brand-ink);transition:border-color .2s ease,box-shadow .2s ease}
.calc-field input:focus{outline:none;border-color:var(--brand-deep);box-shadow:0 0 0 3px rgba(10,13,49,.08)}
.calc-chip{display:inline-flex;align-items:center;min-height:32px;font-family:"Inter",sans-serif;font-size:.74rem;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-deep-60);border:1px solid var(--rule);border-radius:4px;background:var(--brand-band);padding:.45rem .7rem}
.calc-adv-toggle{min-height:42px;margin-top:clamp(1.25rem,2.5vw,1.75rem);border:1px solid var(--rule);border-radius:6px;background:#fff;color:var(--brand-deep);font-size:.85rem;cursor:pointer;font-family:inherit;font-weight:600;padding:.6rem .85rem;transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease}
.calc-adv-toggle:hover{border-color:var(--brand-deep);transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,13,49,.12)}
.calc-adv-toggle:active{transform:translateY(0);box-shadow:0 3px 8px rgba(10,13,49,.08)}
.calc-adv{margin-top:1rem;padding-top:clamp(1rem,2vw,1.35rem);border-top:1px solid var(--rule);display:none;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr 1fr}
.calc-adv.show{display:grid}@media(max-width:620px){.calc-adv.show{grid-template-columns:1fr}}
.calc-adv .sl{font-size:.82rem;color:var(--brand-steel);display:flex;justify-content:space-between;margin-bottom:.3rem}
.calc-adv .sl b{font-family:"Inter",sans-serif;color:var(--brand-ink)}
.calc-adv input[type=range]{width:100%;accent-color:var(--brand-signal)}
.calc-err{display:none;color:var(--brand-signal);font-size:.82rem;margin-top:.5rem}
.calc-required{color:var(--brand-accent)}
.calc-email-field{padding-top:clamp(1rem,2vw,1.35rem);border-top:1px solid var(--rule)}
.calc-step>.btn{margin-top:clamp(1.25rem,2.5vw,1.75rem)}
.calc-step>.calc-chips+.btn{margin-top:0}
.calc-step>.btn:disabled{cursor:not-allowed;opacity:.45}
.calc-reset{min-height:clamp(44px,4vw,48px);display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--rule);border-radius:6px;color:var(--brand-deep);padding:clamp(.7rem,1.2vw,.8rem) clamp(1rem,2vw,1.25rem);font-family:"Inter Tight",sans-serif;font-size:.96rem;line-height:1.2;font-weight:500;cursor:pointer;margin-top:clamp(1.25rem,2.5vw,1.75rem);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease}
.calc-reset:hover{border-color:var(--brand-deep);background:var(--brand-band);color:var(--brand-deep);transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,13,49,.12)}
.calc-reset:active{transform:translateY(0);box-shadow:0 3px 8px rgba(10,13,49,.08)}
.calc-reset-center{display:block;margin:clamp(1.25rem,2.5vw,1.75rem) auto 0}
/* results */
#calcResults{display:none;width:100%;max-width:920px;margin:0 auto}
.calc-actions{display:flex;justify-content:flex-end;margin-bottom:clamp(.75rem,1.5vw,1rem)}
.calc-hero{border-radius:8px;background:var(--brand-deep);padding:clamp(1.75rem,4vw,3rem) clamp(1.25rem,3vw,2rem);text-align:center;margin-bottom:clamp(1rem,2vw,1.5rem);box-shadow:0 8px 24px rgba(10,13,49,.12)}
.calc-hero .l{font-family:"Inter",sans-serif;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.calc-hero .big{font-family:"Inter Tight",sans-serif;font-weight:700;font-size:clamp(2.4rem,6vw,3.75rem);line-height:1.05;margin:.55rem 0;color:#fff}
.calc-hero .big span{color:var(--brand-signal)}
.calc-hero .sub{display:inline-flex;align-items:center;min-height:30px;font-family:"Inter",sans-serif;font-size:.8rem;letter-spacing:.03em;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:4px;background:rgba(255,255,255,.08);padding:.35rem .75rem}
.calc-lines{overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 6px 20px rgba(10,13,49,.07);margin-bottom:clamp(1rem,2vw,1.5rem)}
.calc-line{display:flex;justify-content:space-between;gap:clamp(1rem,3vw,2rem);padding:clamp(1rem,2vw,1.3rem) clamp(1rem,2.5vw,1.5rem);border-bottom:1px solid var(--rule);align-items:flex-start}
.calc-line:last-child{border-bottom:0}
.calc-line .n{font-weight:600;font-size:.95rem;color:var(--brand-ink)}
.calc-line .d{color:var(--brand-deep-60);font-size:.82rem;line-height:1.5;margin-top:.25rem;max-width:600px}
.calc-line .v{font-family:"Inter Tight",sans-serif;font-weight:600;color:var(--ok);white-space:nowrap;font-size:1rem}
.calc-line.tot{background:var(--brand-band)}
.calc-line.tot .n{font-family:"Inter Tight",sans-serif;font-size:1.05rem}
.calc-line.tot .v{color:var(--brand-signal);font-size:1.15rem}
.calc-soft{border-top:3px solid var(--ok);border-radius:8px;padding:clamp(1.25rem,2.5vw,1.75rem);margin-bottom:clamp(1rem,2vw,1.5rem);background:#fff;box-shadow:0 6px 20px rgba(10,13,49,.07)}
.calc-soft .st{font-family:"Inter",sans-serif;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ok);font-weight:600;margin-bottom:1rem}
.calc-soft .si{font-size:.9rem;color:var(--brand-steel);line-height:1.55;margin-bottom:.75rem;padding-left:1.1rem;position:relative}
.calc-soft .si:last-child{margin-bottom:0}
.calc-soft .si:before{content:"+";position:absolute;left:0;color:var(--ok);font-weight:600}
.calc-soft .si b{color:var(--brand-ink)}
.calc-note{font-size:.82rem;color:var(--brand-deep-60);border:1px solid var(--rule);border-radius:8px;background:var(--brand-band);padding:clamp(1rem,2vw,1.25rem);margin-bottom:clamp(1rem,2vw,1.5rem);line-height:1.55}
.calc-note b{color:var(--brand-steel)}
.calc-cta{border-top:3px solid var(--brand-signal);border-radius:8px;padding:clamp(1.35rem,3vw,2rem);background:#fff;box-shadow:0 6px 20px rgba(10,13,49,.07);display:grid;gap:clamp(1rem,2vw,1.5rem)}
.calc-cta h2{font-size:var(--type-feature);margin-bottom:.5rem}
.calc-cta p{margin:0;color:var(--brand-steel);font-size:.95rem;line-height:1.55}
.calc-cta .btn{width:100%}
@media(min-width:760px){.calc-cta{grid-template-columns:1.5fr minmax(200px,.7fr);align-items:center;gap:clamp(2rem,4vw,3rem)}}
.calc-disc{font-size:.78rem;color:var(--muted);text-align:center;margin:clamp(1.25rem,2.5vw,1.75rem) auto 0;line-height:1.5;max-width:760px}
@media(min-width:900px){
  .calc-opts:not(.two):not(.three){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .calc-opts.two,.calc-opts.three{grid-template-columns:1fr}
  .calc-step>.btn{width:100%}
  .calc-actions .btn{width:100%}
  .calc-line{flex-direction:column;gap:.55rem}
  .calc-line .v{white-space:normal}
}
@media print{
  .hdr,.ftr,.calc-actions,.calc-reset,.calc-cta a{display:none}
  body{background:#fff}.hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:.4in}
}


/* ============================================================
   NEWSLETTER IMAGERY
   Placeholders render as neutral panels until real images land.
   Replace each with an <img> — dimensions are in the HTML comment
   above every slot, so layout does not shift when they go in.
   ============================================================ */
.issue-hero{aspect-ratio:21/9;overflow:hidden;border-radius:8px;background:var(--brand-band);}
.issue-hero img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
@media(max-width:700px){.issue-hero{aspect-ratio:16/10}}

/* ---------------- video embed ---------------- */
.video{aspect-ratio:16/9;border:1px solid var(--rule);background:
  linear-gradient(90deg,rgba(10,13,49,.08) 1px,transparent 1px) 0 0/56px 100%,
  linear-gradient(180deg,#F8F8FB,#F0F0F5)}
.video iframe{width:100%;height:100%;border:0;display:block}

.step-bottom-button {
  margin-top: 2.3rem;
}

/* ============================================================
   ROLLOUT STEPS — horizontal, with connector arrows
   ============================================================ */
.steps{display:grid;gap:clamp(1rem,2vw,1.5rem);align-items:stretch}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr);gap:1.6rem}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(4,1fr);gap:2rem}}

.step{
  position:relative;background:#fff; border-radius:8px; box-shadow: 0 4px 10px #0000000d;
  padding:var(--card-pad);display:flex;flex-direction:column;gap:.55rem;
}
.step-n{
 font-size:.86rem;letter-spacing:.01em;font-weight:500;
  color:var(--brand-signal);;
   align-self:flex-start;
}
.step h3{font-size:var(--type-card);line-height:1.2;margin:.25rem 0 0}
.step p{margin:0 0 clamp(.75rem,1.5vw,1rem);color:var(--brand-steel);font-size:.92rem;line-height:1.5}
.step-t{align-self:flex-start;font-size:.72rem;font-weight:600;line-height:1;letter-spacing:.08em;color:#fff;background:var(--brand-signal);margin-top:auto;padding:.5rem .7rem;border-radius:4px}

/* connector arrow between steps on wide screens */
@media(min-width:1000px){
  .step::after{
    content:"";position:absolute;top:50%;right:-1.65rem;
    width:20px;height:9px;transform:translateY(-50%);
    background:var(--brand-signal);clip-path:polygon(0 42%,70% 42%,70% 0,100% 50%,70% 100%,70% 58%,0 58%);
  }
  .step:last-child::after{display:none}
}


/* ---------------- capability rows: symmetrical ---------------- */
.cap{align-items:center;background-color:var(--paper);padding:clamp(24px,3vw,40px)}
.cap-txt{padding-top:.2rem}
.cap-img .shot{height:100%}
.cap-img .shot-body{aspect-ratio:16/9}

/* ============================================================
   HERO WITH PHOTOGRAPH
   Image sits behind a dark gradient so headline contrast holds.
   The gradient is heavier on the left, where the type lives.
   ============================================================ */
.hero-photo{position:relative;isolation:isolate;overflow:hidden}
.hero-photo::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:url("assets/hero-turnaround.jpg");
  background-size:cover;background-position:70% 40%;
}
 
.hero-photo .wrap{position:relative;z-index:1}
.hero-lines{
  padding-right:40px;padding-left:40px;
  object-fit:contain;object-position:50% 100%;
  width:100%;height:620px;
  position:absolute;inset:0% 0% auto;
  z-index:0;pointer-events:none;
}

@media(max-width:820px){
  .hero-photo::before{background-position:64% 30%}
  .hero-photo::after{background:
    linear-gradient(180deg, rgba(10,13,49,.82) 0%, rgba(10,13,49,.9) 45%, rgba(10,13,49,.97) 100%)}
  .hero-lines{height:390px;padding-right:20px;padding-left:20px;opacity:.14}
}

/* the dashboard now carries a real image */
.hero-shot .shot img{width:100%;height:auto;display:block;}

/* Module hero screenshots: reference-style gradient panel, without changing home. */
.hero-module .hero-shot{
  position:relative;
  padding:clamp(28px,5vw,64px) clamp(24px,6vw,80px) 0;
  border-radius:12px;
  background-image:url("background-gradient.webp");
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  display:flex;
  flex-flow:column;
  justify-content:flex-start;
  align-items:center;
  width:100%;
  overflow:clip;
}
.hero-module .hero-shot::before{content:"";position:absolute;inset:0;background:rgba(10,13,49,.88);pointer-events:none}
.hero-module .hero-shot>*{position:relative;z-index:1}
.hero-module .hero-shot .shot{width:100%;border-radius:8px 8px 0 0; margin-bottom: -50px;}

/* ============================================================
   CLIENT LOGO STRIP — full colour on white tiles
   ============================================================ */
.sec-band .logos{
  margin-top:1.8rem;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
}
@media(min-width:760px){.sec-band .logos{grid-template-columns:repeat(4,1fr)}}
.sec-band .logo-cell{
  background:#fff;min-height:122px;display:flex;align-items:center;justify-content:center;
  padding:1.2rem;
}
.sec-band .logo-cell img{
  max-height:62px;width:auto;height:auto;max-width:100%;display:block;
  filter:saturate(.92);
}

/* stats read on a light background */
.sec-band .stat{border-top:2px solid var(--brand-signal);padding-top:.9rem;margin-bottom:1.6rem}
.sec-band .stat-n{color:var(--brand-ink)}
.sec-band .stat-l{color:var(--brand-steel)}

/* clear visual break where two sections meet */
.sec-dark + .sec-band{border-top:0}
.sec-band + .sec-dark{border-top:0}

/* client logo tiles stay white on a dark section so brand colours read */
.sec-dark .logos{
  margin-top:1.8rem;display:grid;grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){.sec-dark .logos{grid-template-columns:repeat(4,1fr)}}
.sec-dark .logo-cell{
  background:#fff;min-height:122px;display:flex;align-items:center;justify-content:center;padding:1.2rem; border-radius:8px;
}
.sec-dark .logo-cell img{max-height:62px;width:auto;height:auto;max-width:100%;display:block;filter:saturate(.92)}

/* real screenshots inside the browser frame */
.shot img{width:100%;height:auto;display:block; border-radius:4px;aspect-ratio: 574/323;}
.cap-img .shot img{border-top:0}

/* Centered hero modifier — intentionally last so it wins over page-specific hero rules. */
.hero.hero-centered h1.statement{max-width:23ch;text-align:center}
.hero.hero-centered .lede{text-align:center;margin-left:auto;margin-right:auto}
.hero.hero-centered .hero-cta{justify-content:center}

.hero-inner .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hero-inner h1{max-width:22ch;margin-top:1.1rem}
.hero-inner .lede{max-width:62ch;margin-top:1.1rem}
.hero-inner .hero-cta{justify-content:flex-start}
.hero-inner .eyebrow-stack{margin-bottom:0}
.hero-inner{position:relative;isolation:isolate;overflow:hidden}
.hero-inner::after{
  content:"";
  position:absolute;
  z-index:0;
  top:50%;right:clamp(1rem,5vw,5rem);
  width:clamp(400px,40vw,600px);
  height:clamp(400px,40vw,600px);
  background:url("pattern.svg") center/contain no-repeat;
  opacity:.82;
  pointer-events:none;
  transform:translateY(-50%);
}
@media(max-width:700px){
  .hero-inner::after{display: none;}
  .hero-split-content{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero-split .lede{margin-left:auto;margin-right:auto}
  .hero-split .hero-cta{width:95%;justify-content:center; gap: .65rem;}
  .hero-inner .wrap{align-items:center;text-align:center}
  .hero-inner .lede{margin-left:auto;margin-right:auto}

}

.ftr-main{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:start}
@media(min-width:860px){
  .ftr-main{grid-template-columns:minmax(190px,.75fr) minmax(0,2.25fr)}
  .ftr-brand{margin-bottom:0}
  .ftr-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2.5rem)}
}
@media(max-width:859px){
  .ftr-main{grid-template-columns:1fr}
}
@media(max-width:639px){
  .ftr-main{text-align:center}
  .ftr-brand{margin-left:auto;margin-right:auto}
  .ftr-brand .logo{display:flex;justify-content:center}
}