/* Redrock Systems site stylesheet — adapted from the Redrock CAIO (ai-officer) stylesheet. Brand: Redrock style guide v1.2 */
@font-face{font-family:"Tomorrow";src:url(fonts/Tomorrow-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Tomorrow";src:url(fonts/Tomorrow-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Tomorrow";src:url(fonts/Tomorrow-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Tomorrow";src:url(fonts/Tomorrow-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* core */
  --oxblood:#6E0408; --basalt:#2B0D0D; --white:#FFFFFF;
  /* neutrals */
  --cloud:#F5F3F2; --mist:#E5E2E2; --ash:#C6C3C3; --pewter:#888585; --graphite:#575554;
  /* oxblood tints (data, chips, washes only) */
  --ox-100:#F5EBEA; --ox-200:#E5CDCA; --ox-300:#CA9D97; --ox-500:#AD6E67; --ox-600:#8F4039; --ox-900:#410103;
  --f-head:"Tomorrow",system-ui,sans-serif; --f-body:"Inter",system-ui,sans-serif;
  --radius:16px; --radius-chip:9px;
  --pad:clamp(20px,3.4vw,48px); --max:1440px; --gutter:clamp(12px,1.6vw,24px);
  --sec:clamp(96px,12vw,184px);
  --ease:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--white);color:var(--basalt);font-family:var(--f-body);font-size:17px;line-height:1.5;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- type ---------- */
.display,.h1,.h2,.h3,.num{font-family:var(--f-head);font-weight:500;letter-spacing:-.012em}
.display{font-size:clamp(46px,7.4vw,118px);line-height:.92}
.h1{font-size:clamp(40px,5.6vw,84px);line-height:.94}
.h2{font-size:clamp(32px,3.9vw,56px);line-height:.96}
.h3{font-size:clamp(21px,1.6vw,24px);line-height:1.15}
.key{color:var(--oxblood)}               /* the one Oxblood phrase in a two-tone headline */
.lede{font-size:clamp(18px,1.45vw,21px);line-height:1.45;color:var(--graphite);max-width:40em}
.body{color:var(--graphite)}
.body strong,.lede strong{color:var(--basalt);font-weight:600}
.label{white-space:nowrap;font:700 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--oxblood)}
.meta{font-size:13px;color:var(--graphite)}
.src{font-size:12px;line-height:1.35;color:var(--graphite)}
.src a{text-decoration:underline;text-decoration-color:var(--ash);text-underline-offset:2px}
.src a:hover{text-decoration-color:var(--oxblood);color:var(--oxblood)}
.rule{display:block;width:clamp(120px,12vw,172px);height:2px;background:var(--oxblood);margin-top:10px}
.colhead{font-size:14px;color:var(--basalt)}

/* placeholders: visible, highlighted, never mistaken for copy */
.ph{background:var(--ox-100);color:var(--oxblood);border-radius:4px;padding:.05em .35em;font-style:normal;font-weight:500;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ph-block{border:1.5px dashed var(--ox-300);border-radius:var(--radius);color:var(--oxblood);background:var(--white)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;height:48px;padding:0 22px;border-radius:10px;font-weight:600;font-size:15px;transition:background .25s var(--ease),color .25s var(--ease)}
.btn-dark{background:var(--basalt);color:var(--white)}
.btn-dark:hover{background:var(--oxblood)}
.btn-ghost{background:var(--cloud);color:var(--basalt)}
.btn-ghost:hover{background:var(--mist)}
.btn-block{display:flex;justify-content:center;width:100%;height:60px}
.arrow{display:inline-block;transition:transform .25s var(--ease)}
a:hover .arrow{transform:translateX(4px)}
.textlink{font-weight:600;border-bottom:1.5px solid var(--ox-300);padding-bottom:2px}
.textlink:hover{color:var(--oxblood);border-color:var(--oxblood)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:22px}
.brand img{height:34px;width:auto}
.brand .sub{font:500 13px/1.1 var(--f-head);color:var(--graphite);padding-left:22px;border-left:1px solid var(--mist)}
.pill{display:flex;align-items:center;gap:2px;background:var(--cloud);border-radius:12px;padding:5px}
.pill a{padding:9px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--basalt);transition:background .2s}
.pill a:hover{background:var(--white)}
.pill a[aria-current="page"]{color:var(--oxblood)}
.pill .cta{background:var(--basalt);color:var(--white);margin-left:6px}
.pill .cta:hover{background:var(--oxblood)}
.menu-btn{display:none;height:44px;padding:0 16px;border-radius:10px;background:var(--cloud);font-weight:600;font-size:14px}
.site-head.scrolled{box-shadow:0 1px 0 var(--mist)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(56px,9vw,140px);padding-bottom:clamp(24px,3vw,48px)}
.hero .grid{align-items:end}
.hero-copy{grid-column:1/span 9}
.hero-mark{grid-column:10/span 3;align-self:start;justify-self:end;width:100%;max-width:340px;margin-top:-8px}
.hero .eyebrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:clamp(28px,3vw,44px)}
.hero .say{font:400 14px/1 var(--f-body);color:var(--graphite)}
.hero .say b{font-weight:600;color:var(--basalt)}
.hero-foot{margin-top:clamp(36px,4vw,60px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end;border-top:1px solid var(--mist);padding-top:28px}
.hero-foot .lede{grid-column:1/span 7}
.hero-foot .ctas{grid-column:9/span 4;display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* ---------- sections ---------- */
section{padding-top:var(--sec)}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-bottom:clamp(36px,4.5vw,64px);align-items:end}
.sec-head .label{grid-column:1/-1;margin-bottom:22px}
.sec-head .h2{grid-column:1/span 8}
.sec-head .aside{grid-column:9/span 4;color:var(--graphite)}
.lead-grey{color:inherit}

/* with us / without us table (capabilities-table language) */
.hc{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter)}
.hc-col h3{font:500 15px/1 var(--f-head);padding:13px 16px;border-radius:8px;display:flex;justify-content:space-between;align-items:center}
.hc-col.hello h3{background:var(--oxblood);color:var(--white)}
.hc-col.without h3{background:var(--cloud);color:var(--basalt)}
.hc-col h3 small{font:400 12px/1 var(--f-body);opacity:.75}
.hc-col ul{list-style:none;margin-top:6px}
.hc-col li{display:flex;gap:14px;padding:15px 16px;border-bottom:1px solid var(--mist);font-size:16px}
.hc-col li span{color:var(--graphite)}
.hc-col li b{font-weight:600;min-width:12.5em}
.hc-col.without li b{color:var(--graphite);font-weight:500;text-decoration:line-through;text-decoration-color:var(--ox-300);text-decoration-thickness:1.5px}

/* ---------- cards ---------- */
.cards{display:grid;gap:clamp(12px,1.2vw,18px)}
.card{background:var(--cloud);border-radius:var(--radius);padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;min-height:300px}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.card .fill{flex:1;min-height:36px}
.card .num{font-weight:400;font-size:clamp(48px,4.6vw,72px);line-height:.9;color:var(--basalt)}
.card .num .u{font-size:.5em;margin-left:.04em}
.card .desc{margin-top:14px;font-size:15.5px;color:var(--basalt);line-height:1.38;max-width:24em}
.card hr{border:0;border-top:1px solid var(--ash);margin:18px 0 12px}
.card.on{background:var(--oxblood);color:var(--white)}
.card.on .num,.card.on .desc,.card.on .h3{color:var(--white)}
.card.on .label{color:var(--ox-200)}
.card.on hr{border-color:var(--ox-300)}
.card.on .src,.card.on .body{color:var(--ox-200)}
.card.on .src a{text-decoration-color:var(--ox-500)}
.card.on .src a:hover{color:var(--white)}
.chip{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-chip);background:var(--ox-100);color:var(--oxblood);font:300 17px/1 var(--f-head)}
.card.on .chip{background:var(--ox-600);color:var(--white)}
.tag{display:inline-block;font:600 11.5px/1 var(--f-body);padding:6px 9px;border-radius:6px;background:var(--white);color:var(--basalt)}
.tag.red{background:var(--ox-100);color:var(--oxblood)}
.card.on .tag{background:var(--ox-600);color:var(--white)}

/* giant number */
.giant{font:400 clamp(150px,17vw,260px)/.8 var(--f-head);color:var(--oxblood);letter-spacing:-.03em;white-space:nowrap}
.giant .u{font-size:.42em;letter-spacing:0}
.giant-label{font:500 clamp(18px,1.5vw,22px)/1.2 var(--f-head);margin-top:22px;max-width:18em}

/* problem layout */
.problem{grid-template-columns:repeat(12,minmax(0,1fr))}
.problem .g{grid-column:1/span 5;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6px}
.problem .cards{grid-column:6/span 7;grid-template-columns:1fr 1fr}

/* pillars */
.pillars{grid-template-columns:repeat(3,1fr)}
.pillars .card{min-height:400px}
.pillars .h3{margin-top:auto}
.pillars .body{margin-top:14px;font-size:15.5px}
.baseband{margin-top:clamp(12px,1.2vw,18px);background:var(--cloud);border-radius:var(--radius);padding:20px 26px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.baseband .h3{font-size:20px}
.baseband .h3 .key{margin-left:.15em}

/* tiles (case-study tile language) */
.tilerow{border-top:1px solid var(--mist);padding:22px 0 clamp(40px,4vw,64px)}
.tilerow-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:16px}
.tilerow-head .h3{font-size:18px}
.tilerow-head .tags{display:flex;gap:6px;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:4fr 5fr 3fr;gap:clamp(10px,1vw,14px)}
.tile{background:var(--cloud);border-radius:var(--radius);aspect-ratio:auto;min-height:clamp(300px,27vw,420px);padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:background .35s var(--ease)}
.tile:hover{background:var(--mist)}
.tile .fill{flex:1}
.tile .price{font:400 clamp(40px,3.8vw,60px)/.95 var(--f-head);color:var(--basalt);letter-spacing:-.02em}
.tile .price .u{font-size:.42em}
.tile .price .to{color:var(--pewter)}
.tile ul{list-style:none;font-size:15px;color:var(--graphite)}
.tile li{padding:8px 0;border-top:1px solid var(--mist);display:flex;gap:10px}
.tile li::before{content:"";flex:0 0 7px;height:7px;margin-top:.6em;background:var(--oxblood);transform:rotate(45deg)}
.tile.on{background:var(--oxblood);color:var(--white)}
.tile.on .price,.tile.on .h3{color:var(--white)}
.tile.on .price .to{color:var(--ox-300)}
.tile.on ul{color:var(--ox-100)}
.tile.on li{border-color:var(--ox-600)}
.tile.on li::before{background:var(--white)}
.tile.on .label{color:var(--ox-200)}
.tile.on .meta{color:var(--ox-200)}

/* mini charts in tiles */
.bars{display:flex;align-items:flex-end;gap:14px;height:100%;min-height:170px;padding-top:24px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;height:100%}
.bars .bar{width:100%;background:var(--ash);border-radius:6px 6px 0 0;transform-origin:bottom;transition:transform 1.1s var(--ease)}
.bars .b.hi .bar{background:var(--oxblood)}
.bars .v{font:400 28px/1 var(--f-head)}
.bars .b.hi .v{color:var(--oxblood)}
.bars .k{font-size:12.5px;color:var(--graphite);line-height:1.25;min-height:2.5em}
.axis{border-top:1px solid var(--mist)}

/* bench */
.bench{grid-template-columns:repeat(4,1fr)}
.bench .card{min-height:380px}
.avatar{width:72px;height:72px;border-radius:14px;display:grid;place-items:center;background:var(--white);color:var(--pewter);font:300 13px/1.1 var(--f-head);text-align:center}
.card.on .avatar{background:var(--ox-600);color:var(--ox-200)}
.bench .who{margin-top:auto}
.bench .role{font-size:14px;color:var(--graphite);margin-top:6px}
.card.on .role{color:var(--ox-200)}

/* proof */
.proof .tiles{grid-template-columns:repeat(3,1fr)}
.logo-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:18px}
.logo-strip .ph-block{height:72px;display:grid;place-items:center;font-size:12.5px;font-weight:500}
.quote{text-align:center;max-width:980px;margin:0 auto}
.quote p{font:500 clamp(28px,3vw,44px)/1.08 var(--f-head);letter-spacing:-.01em}
.quote cite{display:block;margin-top:22px;font-style:normal;font-size:14px;color:var(--graphite)}

/* scorecard */
.score{grid-template-columns:repeat(12,minmax(0,1fr))}
.score .intro{grid-column:1/span 4}
.score ol{grid-column:6/span 7;list-style:none;counter-reset:q}
.score li{counter-increment:q;display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:baseline;padding:16px 0;border-top:1px solid var(--mist);font-size:16px}
.score li::before{content:counter(q,decimal-leading-zero);font:300 15px/1 var(--f-head);color:var(--oxblood)}
.score li .ynp{display:flex;gap:4px}
.score li .ynp i{font:500 11px/1 var(--f-body);font-style:normal;color:var(--graphite);background:var(--cloud);border-radius:5px;padding:5px 7px}

/* faq */
.faq{grid-template-columns:repeat(12,minmax(0,1fr))}
.faq .intro{grid-column:1/span 4}
.faq .list{grid-column:6/span 7}
details{border-top:1px solid var(--mist)}
details:last-child{border-bottom:1px solid var(--mist)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font:500 clamp(18px,1.45vw,21px)/1.25 var(--f-head)}
summary::-webkit-details-marker{display:none}
summary .pm{flex:0 0 28px;height:28px;border-radius:8px;background:var(--cloud);position:relative;transition:background .2s}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;background:var(--basalt);transition:transform .3s var(--ease)}
summary .pm::after{transform:rotate(90deg)}
details[open] summary .pm{background:var(--ox-100)}
details[open] summary .pm::after{transform:rotate(0)}
details .ans{padding:0 52px 26px 0;color:var(--graphite);max-width:44em}
details .ans p+p{margin-top:12px}

/* CTA panel */
.cta-panel{background:var(--cloud);border-radius:var(--radius);padding:clamp(26px,3vw,44px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(48px,7vw,110px);position:relative;overflow:hidden}
.cta-panel .h1{grid-column:1/span 9}
.cta-panel .mark{grid-column:11/span 2;justify-self:end;width:100%;max-width:180px}
.cta-panel .sub{grid-column:1/span 6;color:var(--graphite)}
.cta-panel .alt{grid-column:8/span 5;align-self:end;justify-self:end;text-align:right}
.cta-panel .btn-block{grid-column:1/-1}

/* footer */
.site-foot{padding-top:clamp(80px,9vw,140px);padding-bottom:34px}
.site-foot .grid{row-gap:40px}
.foot-brand{grid-column:1/span 4}
.foot-brand img{height:56px;width:auto}
.foot-brand p{margin-top:18px;max-width:22em}
.foot-col{grid-column:span 2}
.foot-col h4{font:400 13px/1 var(--f-body);color:var(--graphite);margin-bottom:14px}
.foot-col a,.foot-col span{display:block;font-size:14.5px;font-weight:500;padding:4px 0}
.foot-col a:hover{color:var(--oxblood)}
@media (min-width:861px){
  .site-foot .grid:not(:has(> :nth-child(5))) .foot-brand{grid-column:1/span 3}
  .site-foot .grid:not(:has(> :nth-child(5))) .foot-col{grid-column:span 3}
}
.foot-bar{margin-top:56px;border-top:1px solid var(--mist);padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12.5px;color:var(--graphite)}
.foot-bar .sym{display:flex;align-items:center;gap:10px}
.foot-bar .sym img{height:18px;width:auto}

/* page heros (inner pages) */
.page-hero{padding-top:clamp(56px,8vw,120px)}
.page-hero .label{margin-bottom:28px;display:block}
.page-hero .h1{max-width:13.5em}
.page-hero .lede{margin-top:30px}

/* process timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,18px);padding-top:38px}
.timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--mist)}
.timeline .node{position:absolute;top:2px;width:15px;height:15px;transform:rotate(45deg);background:var(--white);border:1.5px solid var(--ash)}
.timeline .step{position:relative}
.timeline .step .node{left:2px;top:-34px}
.timeline .step.on .node{background:var(--oxblood);border-color:var(--oxblood)}

/* deliverables list */
.dl{grid-template-columns:repeat(12,minmax(0,1fr))}
.dl .l{grid-column:1/span 4}
.dl .r{grid-column:6/span 7}
.dl ul{list-style:none}
.dl li{display:grid;grid-template-columns:52px 1fr;padding:16px 0;border-top:1px solid var(--mist)}
.dl li::before{content:"";width:9px;height:9px;background:var(--oxblood);transform:rotate(45deg);margin-top:.5em}
.dl li b{font-weight:600}
.dl li span{color:var(--graphite)}

/* insights page charts */
.chart-card{min-height:auto}
.hbars{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.hbar{display:grid;grid-template-columns:minmax(120px,30%) 1fr;gap:16px;align-items:center}
.hbar .k{font-size:13.5px;color:var(--graphite);line-height:1.25}
.hbar .t{position:relative;height:30px}
.hbar .t i{position:absolute;left:0;top:0;bottom:0;background:var(--ash);border-radius:0 6px 6px 0;transform-origin:left;transition:transform 1.1s var(--ease)}
.hbar.hi .t i{background:var(--oxblood)}
.hbar .t em{position:absolute;top:50%;transform:translateY(-50%);font:400 20px/1 var(--f-head);font-style:normal;padding-left:10px;white-space:nowrap}
.hbar.hi .t em{color:var(--oxblood)}
.sources{list-style:none;counter-reset:s;columns:2;column-gap:var(--gutter)}
.sources li{break-inside:avoid;padding:12px 0;border-top:1px solid var(--mist);font-size:13.5px;color:var(--graphite);display:grid;grid-template-columns:44px 1fr}
.sources li b{font:500 13px/1.4 var(--f-head);color:var(--oxblood)}
.sources a{text-decoration:underline;text-decoration-color:var(--ash);text-underline-offset:2px;word-break:break-word}

/* contact form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:16px;background:var(--white);border:1px solid var(--mist);border-radius:10px;padding:14px 16px;color:var(--basalt);outline:none;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--oxblood)}
.field textarea{min-height:140px;resize:vertical}

/* motion: fades only (brand rule) */
.js .reveal{opacity:0;transition:opacity .7s var(--ease)}
.js .reveal.in{opacity:1}
.js .bars .bar{transform:scaleY(.02)}
.js .in .bars .bar,.js .bars.in .bar{transform:scaleY(1)}
.js .hbar .t i{transform:scaleX(.01)}
.js .in .hbar .t i{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transition:none}.js .bars .bar,.js .hbar .t i{transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pill a:not(.cta){padding:9px 10px}
  .brand .sub{display:none}
  .bench{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:1fr 1fr}
  .tiles .tile:last-child{grid-column:1/-1;min-height:240px}
  .proof .tiles{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr;row-gap:56px}
}
@media (max-width:860px){
  body{font-size:16px}
  .pill{display:none}
  .menu-btn{display:block}
  .site-head .wrap{height:68px}
  .brand img{height:28px}
  .site-head.open .pill{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:var(--pad);right:var(--pad);top:68px;padding:8px;gap:2px;border:1px solid var(--mist)}
  .site-head.open .pill a{padding:14px}
  .site-head.open .pill .cta{margin:6px 0 0;text-align:center}
  .hero-copy{grid-column:1/-1}
  .hero-mark{grid-column:1/-1;grid-row:1;justify-self:start;max-width:150px;margin:0 0 34px}
  .hero-foot .lede,.hero-foot .ctas{grid-column:1/-1}
  .hero-foot .ctas{margin-top:26px}
  .sec-head .h2,.sec-head .aside{grid-column:1/-1}
  .sec-head .aside{margin-top:18px}
  .hc{grid-template-columns:1fr;row-gap:28px}
  .hc-col li b{min-width:0}
  .hc-col li{flex-direction:column;gap:2px}
  .problem .g,.problem .cards{grid-column:1/-1}
  .problem .cards{margin-top:40px}
  .pillars{grid-template-columns:1fr}
  .pillars .card{min-height:300px}
  .score .intro,.score ol,.faq .intro,.faq .list,.dl .l,.dl .r{grid-column:1/-1}
  .score ol,.faq .list,.dl .r{margin-top:30px}
  .cta-panel .h1,.cta-panel .sub,.cta-panel .alt{grid-column:1/-1}
  .cta-panel .mark{grid-column:1/-1;grid-row:1;justify-self:start;max-width:110px}
  .cta-panel .alt{justify-self:start;text-align:left}
  .cta-panel{row-gap:30px}
  .foot-brand{grid-column:1/-1}
  .foot-col{grid-column:span 6}
  .site-foot .grid:not(:has(> :nth-child(5))) .foot-col:last-child{grid-column:1/-1}
  .logo-strip{grid-template-columns:repeat(3,1fr)}
  .sources{columns:1}
  .form{grid-template-columns:1fr}
}
@media (max-width:620px){
  .problem .cards,.tiles,.proof .tiles,.bench,.timeline{grid-template-columns:1fr}
  .tiles .tile:last-child{grid-column:auto}
  .card{min-height:200px}
  .tile{min-height:0}
  .tile .fill{min-height:40px}
  .bench .card{min-height:230px}
  .pillars .card{min-height:0}
  .pillars .card .fill{min-height:48px}
  .score li{grid-template-columns:38px 1fr}
  .score li .ynp{grid-column:2}
  .details .ans{padding-right:0}
  details .ans{padding-right:0}
  .foot-bar{flex-direction:column;align-items:flex-start}
  .hbar{grid-template-columns:1fr;gap:6px}
}

/* layout utilities (card groups + column spans) */
.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}.c75{grid-template-columns:7fr 5fr}
.col-7-6{grid-column:7/span 6}
[data-col="1-8"]{grid-column:1/span 8}[data-col="9-4"]{grid-column:9/span 4}[data-col="1-7"]{grid-column:1/span 7}[data-col="8-5"]{grid-column:8/span 5}[data-col="1-6"]{grid-column:1/span 6}
@media (max-width:1100px){.c4{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.c3,.c75{grid-template-columns:1fr 1fr}.col-7-6,[data-col]{grid-column:1/-1}}
@media (max-width:620px){.c2,.c3,.c4,.c75{grid-template-columns:1fr}}
/* engagement tiers: equal-height cards, CTA pinned to the bottom */
.tiers .card{min-height:clamp(340px,30vw,440px)}
.tiers .card .btn{margin-top:4px}
.card.on .btn-ghost{background:var(--white);color:var(--oxblood)}
.card.on .btn-ghost:hover{background:var(--ox-100)}

/* big numerals: decorative step numbers overlapping the card's bottom-left edge */
.numbered{--bn:clamp(96px,9.5vw,136px);row-gap:calc(var(--bn)*.36 + 20px);margin-bottom:calc(var(--bn)*.3 + 28px)}
.numbered .card{position:relative;overflow:visible;padding-bottom:calc(var(--bn)*.62 + 20px)}
.bignum{position:absolute;left:clamp(16px,1.6vw,24px);bottom:calc(var(--bn)*-.3);font:700 var(--bn)/.8 var(--f-head);color:var(--oxblood);letter-spacing:-.02em;pointer-events:none;user-select:none}
.card.on .bignum{-webkit-text-stroke:4px var(--white);paint-order:stroke fill}
@media (max-width:620px){.numbered{--bn:72px}}

/* ---- redrocksystems.net additions ---- */
.confirm{border:1.5px dashed var(--oxblood);border-radius:6px;padding:0 4px;color:var(--oxblood);background:var(--white);font-size:.95em}
.card.on .confirm{border-color:var(--white);color:var(--white);background:transparent}
.para{margin-top:16px;max-width:46em}
.para .src,.cardbody .src,.dl-list .src,.ans .src{display:inline;font-size:13px;color:var(--graphite)}
.cardbody .body,.cardbody .para{font-size:15px;margin-top:10px}
.longcards .card{min-height:0}
.longcards .fill{min-height:24px;flex:0}
.dl-list ul{list-style:none;margin-top:18px;max-width:52em}
.dl-list li{display:grid;grid-template-columns:32px 1fr;padding:12px 0;border-top:1px solid var(--mist)}
.dl-list li::before{content:"";width:8px;height:8px;background:var(--oxblood);transform:rotate(45deg);margin-top:.55em}
.dl-list li b{font-weight:600}
.dl-list li span{color:var(--graphite)}
.dl-list.inner ul{margin-top:8px}.dl-list.inner li{padding:7px 0;font-size:14.5px}
.olist{margin:16px 0 0 1.4em;max-width:46em;color:var(--basalt)}
.olist li{padding:6px 0}
.faqlist{max-width:52em}
.quote{margin-top:24px;font:500 clamp(20px,1.8vw,26px)/1.3 var(--f-head);color:var(--basalt);border-left:3px solid var(--oxblood);padding-left:20px;max-width:36em}
.stats .num .u{font-size:.42em}
.tiers .card{min-height:clamp(260px,22vw,320px)}
.para + .tiers{margin-top:clamp(36px,4.5vw,64px)}
.logo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
@media (max-width:620px){.logo-strip{grid-template-columns:1fr 1fr}}
.cta-main{grid-column:1/-1}
.cta-main>.ph{display:inline-block;margin-top:10px}
.form input[type=file]{max-width:100%;min-width:0;font-size:14px}
.form .field{min-width:0}
.hero .home-h1{font-size:clamp(40px,5.4vw,84px);line-height:.98;max-width:15em}
/* home H1: one heading, two wordings; display:none also hides the inactive one from screen readers */
.home-h1 .h1-narrow{display:none}
@media (max-width:480px){.home-h1 .h1-wide{display:none}.home-h1 .h1-narrow{display:inline}}

/* ===================== design/mockup-a (Insight Global structure, Redrock brand) ===================== */
.util{border-bottom:1px solid var(--mist);font-size:12.5px;color:var(--graphite)}
.util .wrap{display:flex;justify-content:flex-end;gap:28px;height:38px;align-items:center}
.util b{color:var(--basalt);font-weight:600}
.util a:hover b{color:var(--oxblood)}
.site-head{border-bottom:1px solid var(--mist)}
.site-head .wrap{height:88px;gap:28px}
.mnav{margin-left:auto}
.mnav ul{list-style:none;display:flex;align-items:center;gap:6px}
.mnav li>a,.mtrig{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;font-size:15px;font-weight:500;color:var(--basalt);border-radius:999px}
.mnav li>a:hover,.mtrig:hover,.mtrig[aria-expanded="true"]{color:var(--oxblood)}
.mnav [aria-current]{color:var(--oxblood)}
.car{font-size:10px;transition:transform .2s}
.mtrig[aria-expanded="true"] .car{transform:rotate(180deg)}
.btn-pill{height:50px;padding:0 26px;border-radius:999px;background:var(--oxblood);color:var(--white)}
.btn-pill:hover{background:var(--basalt)}
.btn-pillbtn{border-radius:999px;height:52px;padding:0 26px}
.btn-ox{background:var(--oxblood);color:var(--white)}
.btn-ox:hover{background:var(--basalt)}
.btn-line{border:1.5px solid var(--basalt);color:var(--basalt);background:var(--white)}
.btn-line:hover{border-color:var(--oxblood);color:var(--oxblood)}
.m-only{display:none!important}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--mist);padding:28px 0 34px;display:none}
.has-mega.open .mega{display:block}
/* The panel is positioned against the sticky header. The trigger is centered
   in that header, so a strip of the header sits between the trigger and the
   panel and is outside the menu item. This bridge is the same width as the
   trigger and covers that strip, so the pointer never leaves the item on the
   way down. Desktop only. It is invisible and does not change the panel. */
@media (hover:hover) and (min-width:861px){
  .mtrig{position:relative}
  .mtrig::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px}
  .has-mega:hover:not(.shut) .mega,
  .has-mega:focus-within:not(.shut) .mega{display:block}
}
.mega-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mega-card{display:flex;flex-direction:column;gap:8px;background:var(--cloud);border-radius:var(--radius);padding:22px;min-height:210px;color:var(--basalt)}
.mega-card .mt{font:500 22px/1.1 var(--f-head)}
.mega-card .md{font-size:14px;color:var(--graphite);line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mega-card .more{margin-top:auto;font-weight:600;font-size:14px;color:var(--oxblood)}
.mega-card:hover{background:var(--mist)}
.mega-card.on{background:var(--oxblood);color:var(--white)}
.mega-card.on .label,.mega-card.on .md,.mega-card.on .more{color:var(--white)}
.mega-card.on:hover{background:var(--basalt)}
.lrule{display:block}
.lrule::after{content:"";display:block;width:36px;height:2px;background:var(--oxblood);margin:14px 0 22px}
.lrule.bare::after{margin-top:0}
.sec-head .para{margin-top:20px;max-width:40em}
/* home hero: copy sits at the bottom of the photo, in the same column as the nav */
.hero-c{display:flex;flex-direction:column;justify-content:flex-end;text-align:left;min-height:clamp(620px,52vw,800px);padding-top:clamp(36px,4vw,64px);padding-bottom:clamp(28px,3.2vw,48px)}
.hero-c .home-h1{font-size:clamp(32px,3.5vw,52px);line-height:1.05;max-width:13em;margin:12px 0 0}
.hero-c .lede{margin:14px 0 0;max-width:32em}
.hero-c .ctas{margin-top:16px;display:flex;justify-content:flex-start}
/* inner page hero */
.crumb{font-size:13px;color:var(--graphite);padding-top:22px}
.crumb a:hover{color:var(--oxblood)}
.page-hero2{padding-bottom:clamp(48px,6vw,88px)}
.ph-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(36px,4vw,56px)}
.page-hero2 .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.page-hero2 .ctas .ph{font-size:13px}
/* eyebrow blocks */
.eblock{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5.5vw,80px);align-items:center;padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(36px,4vw,56px)}
.eblock .art{min-height:380px;justify-content:space-between}
.eblock .art>img{width:110px}
.eblock .h2{font-size:clamp(32px,3.3vw,48px)}
.eblock .para{margin-top:22px;max-width:32em}
/* chips */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.wchip{border:1px solid var(--mist);border-radius:999px;padding:11px 20px;font-size:14.5px;font-weight:500}
.ph-chip{border-style:dashed;border-color:var(--ox-300)}
.ph-tag{display:inline-block;vertical-align:middle;font:700 10px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--oxblood);border:1.5px dashed var(--ox-300);border-radius:999px;padding:4px 8px;margin-left:6px}
/* stories */
.story{min-height:0}
.story-art{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:var(--white)}
.story-art img{width:64px;opacity:.9}
.ph-quote{margin-top:28px;border:1.5px dashed var(--ox-300);border-radius:var(--radius);padding:30px;font:400 clamp(20px,1.8vw,26px)/1.3 var(--f-head);text-align:center}
/* help form */
.help{border-top:1px solid var(--mist);padding-top:clamp(64px,7vw,104px)}
.help-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:start}
.help-card{background:var(--cloud);border-radius:var(--radius);padding:clamp(20px,2.2vw,32px)}
/* trust band */
.tb-grid{display:grid;grid-template-columns:1fr 2.6fr;gap:var(--gutter);align-items:stretch}
.tb-grid:has(> :only-child){grid-template-columns:1fr}
.tb-stat{min-height:0}
.tb-stat .num{margin-top:22px;color:var(--oxblood)}
.trusted .meta{margin-bottom:12px}
.logo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.logo-ph{border:1.5px dashed var(--ox-300);border-radius:12px;min-height:76px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-size:13px}
@media (max-width:1100px){.mega-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
  .d-only{display:none!important}.m-only{display:block!important}
  .util .wrap{justify-content:space-between;height:34px}
  .site-head .wrap{height:68px}
  .mnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--mist);padding:8px var(--pad) 20px;max-height:calc(100vh - 110px);overflow:auto}
  .site-head.open .mnav{display:block}
  .mnav ul{flex-direction:column;align-items:stretch;gap:0}
  .mnav li>a,.mtrig{width:100%;justify-content:space-between;height:52px;padding:0 4px;border-radius:0;border-bottom:1px solid var(--mist)}
  .mega{position:static;border:0;padding:12px 0}
  .mega-grid{grid-template-columns:1fr;padding:0;gap:8px}
  .mega-card{min-height:0;padding:16px}
  .mnav .btn-pill{width:100%;justify-content:center;margin-top:14px}
  .ph-grid,.eblock,.help-grid,.tb-grid{grid-template-columns:1fr}
  .eblock .art{min-height:200px;order:-1}
  .eblock.flip .art{order:-1}
}
@media (max-width:620px){
  .util .wrap span,.util{font-size:12px}
  .hero-c .home-h1{font-size:clamp(34px,10vw,46px)}
  .eblock .art{min-height:160px}.eblock .art>img{width:72px}
  .logo-row{grid-template-columns:1fr 1fr}
}
.wchip{max-width:100%;min-width:0}.wchip .ph{white-space:normal;overflow-wrap:anywhere}
.stories .sec-head,.chips-sec .sec-head{display:block}
.page-hero2{padding-top:0}.hero-c .ctas{flex-wrap:wrap;gap:10px;align-items:center}
section.tight{padding-top:0}
.site-head .mega .wrap.mega-grid{display:grid;height:auto;align-items:stretch}
.mnav li>a.btn-pill{color:var(--white);border-radius:999px;border-bottom:0}
.mega{box-shadow:0 1px 0 var(--mist)}
@media (max-width:860px){.site-head .mega .wrap.mega-grid{grid-template-columns:1fr;padding:0}.mnav li>a.btn-pill{justify-content:center}}

/* ===================== images/photos-v1 ===================== */
/* Full-bleed cover. The photo is not washed. On desktop the copy sits in a
   translucent white box (see "Hero copy box" below), with no fade.
   On mobile the copy sits on white and the photo is a band under the button,
   so the person and some of the diagram show below the text. The mobile crop
   is used at 768px and narrower.
   Home hero photo: Pexels 7368 by Startup Stock Photos. Pexels License:
   commercial use permitted, attribution not required. Desktop crop is the
   full width, y 250–1917. Mobile crop is x 1580–2504, full height.
   The photo is desaturated about 78 percent. See img/MANIFEST.md. */
.hero-bg{
  max-width:none;
  background-color:var(--white);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:right bottom;
  background-image:url(img/hero-arch2-1440.jpg?v=b9a06f6);
  background-image:image-set(
    url(img/hero-arch2-1440.webp?v=b9a06f6) type("image/webp") 1x,
    url(img/hero-arch2-2880.webp?v=b9a06f6) type("image/webp") 2x,
    url(img/hero-arch2-1440.jpg?v=b9a06f6) type("image/jpeg") 1x,
    url(img/hero-arch2-2880.jpg?v=b9a06f6) type("image/jpeg") 2x);
}
.hero-bg>.wrap{width:100%;max-width:var(--max);margin-left:auto;margin-right:auto}
.hero-c.hero-bg{padding-bottom:clamp(28px,3.2vw,48px)}
@media (max-width:768px){
  .hero-c{justify-content:flex-start;min-height:0;padding-top:clamp(24px,5vw,40px)}
  .hero-c.hero-bg{
    position:relative;
    padding-bottom:352px;
    padding-left:var(--pad);
    padding-right:var(--pad);
    background-image:none;
    background-color:#fff;
  }
  .hero-bg>.wrap{display:contents}
  .hero-c.hero-bg::after{
    content:"";
    position:absolute;
    z-index:0;
    left:0;right:0;bottom:0;
    height:320px;
    pointer-events:none;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 84%;
    background-image:url(img/hero-arch2-mobile-540.jpg?v=b9a06f6);
    background-image:image-set(
      url(img/hero-arch2-mobile-540.webp?v=b9a06f6) type("image/webp") 1x,
      url(img/hero-arch2-mobile-1080.webp?v=b9a06f6) type("image/webp") 2x,
      url(img/hero-arch2-mobile-540.jpg?v=b9a06f6) type("image/jpeg") 1x,
      url(img/hero-arch2-mobile-1080.jpg?v=b9a06f6) type("image/jpeg") 2x);
  }
  .hero-c.hero-bg>*{position:relative;z-index:1}
}
/* Hero copy box. The headline, paragraph and button sit in a translucent
   white box with rounded corners. On desktop the box moves right, into the
   blank lower-left and center of the whiteboard, and stays clear of the
   man's hand (about 60 percent across the photo). Between 769px and 1099px
   the box narrows instead of moving, because the hand is closer to center.
   On a phone the same box spans the width minus the page margins. */
.hero-c .hero-text{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  background:rgba(255,255,255,.82);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(28,20,20,.06),0 12px 32px rgba(28,20,20,.10);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
@media (min-width:769px){
  .hero-c.hero-bg{position:relative}
  .hero-c .hero-text{
    width:100%;
    max-width:min(560px,46vw);
    padding:clamp(28px,2.4vw,36px);
    margin-left:clamp(0px,calc(24vw - 260px),200px);
  }
  .hero-c .hero-text .home-h1{max-width:none;font-size:clamp(30px,2.6vw,40px);line-height:1.06}
  .hero-c .hero-text .lede{max-width:none}
}
@media (max-width:768px){
  .hero-c .hero-text{
    display:block;
    width:auto;
    margin:0;
    padding:clamp(22px,6vw,28px);
  }
  .hero-c .hero-text .home-h1{font-size:clamp(30px,9vw,40px)}
}

/* About and services: the card is the picture, at the art's own 1168/760 crop.
   Cloud stays on the card so an illustration drawn on Cloud meets the edges. */
.eblock .art.card[class*="img-"]{
  position:relative;display:block;padding:0;overflow:hidden;min-height:0;
  aspect-ratio:584/380;background:var(--cloud);
}
.eblock .art.card[class*="img-"] .art-pic,
.eblock .art.card[class*="img-"] .art-pic img{
  position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
}
.eblock .art.card[class*="img-"] .art-pic img{object-fit:cover;object-position:center}

/* Stories: the art's own 678/240 crop, edge to edge, on the Cloud card. */
.card.story{padding:0 0 clamp(22px,2vw,30px);overflow:hidden;min-height:0;background:var(--cloud)}
.card.story .story-art{
  position:relative;display:block;width:100%;height:auto;aspect-ratio:339/120;
  margin:0 0 18px;border-radius:0;overflow:hidden;background:var(--cloud);
}
.card.story .story-pic,
.card.story .story-pic img{
  position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;opacity:1;
}
.card.story .story-pic img{object-fit:cover;object-position:center}
.card.story>.label,
.card.story>.h3,
.card.story>.body{margin-left:clamp(22px,2vw,30px);margin-right:clamp(22px,2vw,30px)}

.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;font-size:15px}
.form-status:empty{display:none}
.form-status.ok{color:var(--basalt)}
.form-status.err{color:var(--oxblood)}
.btn:disabled{opacity:.55;cursor:default}

.policy{max-width:46rem;padding-bottom:clamp(48px,6vw,80px)}
.policy h1{font-family:var(--f-head);font-weight:500;font-size:clamp(36px,4vw,48px);line-height:1.05;letter-spacing:-.012em;margin:8px 0 16px}
.policy h2{font-family:var(--f-head);font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.2;margin:2.2em 0 .5em}
.policy h2::after{content:"";display:block;width:8rem;border-top:1.5px solid var(--oxblood);margin-top:10px}
.policy h3{font-family:var(--f-head);font-weight:500;font-size:18px;line-height:1.3;margin:1.5em 0 .4em}
.policy p{margin:0 0 12px;max-width:42em}
.policy ul{margin:0 0 14px;padding-left:1.2em;max-width:42em}
.policy li{margin:0 0 6px}
.policy li::marker{color:var(--oxblood)}
.policy a{color:var(--oxblood)}

/* CAIO sample engagement. The long eyebrow has to wrap; other labels stay on one line. */
.sec-head .sample-label{white-space:normal;text-transform:none;letter-spacing:.02em;font-size:13px;line-height:1.45;max-width:40em}
.sample-rule{border:0;height:0;border-top:1px solid var(--mist);width:calc(100% - 2 * var(--pad));max-width:calc(var(--max) - 2 * var(--pad));margin:clamp(48px,6vw,88px) auto 0}
.sample-engagement{padding-top:clamp(48px,6vw,88px)}
.sample-block,.sample-close{margin-top:clamp(32px,3.6vw,52px);max-width:52em}
.sample-close .body,.sample-step .body{margin-top:8px}
.sample-steps{list-style:none;counter-reset:phase;display:flex;flex-direction:column;gap:clamp(12px,1.2vw,16px);margin-top:16px}
.sample-step{counter-increment:phase;background:var(--cloud);border-radius:var(--radius);padding:clamp(18px,2vw,26px);display:grid;grid-template-columns:auto 1fr;column-gap:clamp(14px,1.6vw,22px);align-items:start}
.sample-step::before{content:counter(phase);font:700 clamp(28px,2.6vw,40px)/1 var(--f-head);color:var(--oxblood);letter-spacing:-.02em;grid-row:1 / span 3}
.sample-step .h3,.sample-step .body,.sample-receive{grid-column:2}
.sample-receive{margin-top:14px;background:var(--white);border-left:3px solid var(--oxblood);border-radius:0 10px 10px 0;padding:12px 16px;color:var(--basalt);font-size:15.5px;line-height:1.45}
.sample-receive b{color:var(--oxblood);font-weight:600}
.sample-engagement .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}
@media (max-width:620px){
  .sample-receive{grid-column:1 / -1}
  .sample-engagement .ctas .btn{width:100%;justify-content:center}
}

/* Redrock Argonaut preview. New selectors only, so other pages stay as they are. */
.signal-product-mark{display:block;height:26px;width:auto;max-width:100%;margin:0 0 14px}
.signal-wordmark{margin:0 0 14px;max-width:100%;font:500 40px/1.05 var(--f-head);letter-spacing:-.02em;color:var(--basalt)}
.signal-hero{position:relative;max-width:var(--max);margin:0 auto}
.signal-hero-crop{position:relative;width:100%;aspect-ratio:390/290;overflow:hidden;border-bottom:1px solid var(--mist)}
.signal-hero-art{position:absolute;width:calc(450 / 390 * 100%);max-width:none;height:auto;left:calc(-65 / 390 * 100%);top:calc(-4 / 290 * 100%)}
.signal-hero-copy{position:relative;z-index:1}
.signal-hero .label{white-space:normal;max-width:36em}
.signal-hero .h1{max-width:16em;margin-bottom:.45em}
.signal-hero .h1 .key{display:block}
.signal-hero .banner{margin:0 0 8px;max-width:40em}
.signal-hero .src{margin-top:16px}
svg.arrow{width:1em;height:1em;vertical-align:-0.125em}
@media (min-width:1100px){
  .signal-hero{min-height:630px}
  .signal-product-mark{height:32px}
  .signal-hero-crop{position:absolute;right:0;top:0;width:62.5%;max-width:900px;aspect-ratio:900/630;height:auto;overflow:visible;border:0;z-index:0;pointer-events:none}
  .signal-hero-art{position:static;width:100%;max-width:100%;left:auto;top:auto}
  /* 720px fits "Every system has" on one line and still ends left of the hull. The vw cap does the same from 1100px up. */
  .signal-hero .h1,
  .signal-hero-copy>*{max-width:min(720px, calc(61.5vw - var(--pad) - 36px))}
}
.signal-gap{margin-top:12px}
.signal-block{margin-top:clamp(48px,6vw,72px)}
.signal-after{margin-top:14px}
.signal-steps .body{margin-top:10px}
.signal-foot{margin-top:18px}
.signal-points{margin:16px 0 8px;padding-left:1.2em;max-width:42em}
.signal-points li{margin:0 0 10px}
.signal-points li::marker{color:var(--oxblood)}
.signal-road{list-style:none;display:flex;flex-direction:column;gap:12px;max-width:52em}
.signal-road li{background:var(--cloud);border-radius:var(--radius);padding:16px 20px}
.signal-road .tag,.signal-fine .tag,.signal-hero .tag,.signal-table .tag{vertical-align:middle;margin:0 6px 4px 0}
.signal-scroll{overflow-x:auto;margin-top:18px}
.signal-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15.5px;line-height:1.45}
.signal-table th,.signal-table td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--mist);overflow-wrap:break-word}
.signal-table thead th{font:700 11px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--oxblood);background:var(--cloud)}
.signal-table tbody th{font:600 15.5px/1.35 var(--f-body);letter-spacing:0;text-transform:none;color:var(--basalt);background:var(--white)}
.signal-table td{background:var(--white);color:var(--graphite)}
@media (max-width:860px){
  .signal-table{font-size:14px}
  .signal-table th,.signal-table td{padding:10px 8px}
  .signal-table tbody th{font-size:14px}
}
.signal-price{display:inline-block;margin:4px 0 18px;padding:10px 16px;border-radius:8px;background:var(--ox-100);color:var(--oxblood);font:500 clamp(28px,3vw,44px)/1.1 var(--f-head);letter-spacing:-.02em}
.signal-mark{background:var(--ox-100);color:var(--oxblood);border-radius:4px;padding:.05em .35em;font-weight:500}
.signal-follow{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:22px}
.signal-fine{max-width:48em;font-size:13.5px;line-height:1.55;color:var(--graphite)}
.signal-fine h3{font:500 16px/1.3 var(--f-head);color:var(--basalt);margin:1.4em 0 .35em}
.signal-fine p{margin:0 0 10px}
.signal-fine cite{font-style:italic}
.signal-fine a{color:var(--oxblood);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}