/* ===== ACP - shared category / service page chrome =====
   Rides the homepage design system in styles.css. Every sub-page uses this;
   only the homepage and /industries/ carry bespoke layout. */

.bar__n a.is-on{color:var(--ink)}
.bar__n a.is-on::after{width:100%}

/* ---- page hero ---- */
.phero{position:relative;min-height:66svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  padding:150px 0 clamp(52px,6vw,80px)}
.phero__bg{position:absolute;inset:0;z-index:0;background-position:center 40%;background-size:cover;background-repeat:no-repeat;transform:scale(1.04)}
.phero__vig{position:absolute;inset:0;z-index:1;background:
  radial-gradient(115% 85% at 74% 30%,transparent 0%,rgba(6,10,8,.5) 55%,rgba(6,10,8,.95) 100%),
  linear-gradient(180deg,rgba(6,10,8,.9) 0%,rgba(6,10,8,.42) 34%,rgba(6,10,8,.86) 80%,var(--bg) 100%),
  linear-gradient(90deg,rgba(6,10,8,.86) 0%,transparent 64%)}
.phero__c{position:relative;z-index:2;width:100%}
.crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;letter-spacing:.05em;color:var(--tx-2);margin-bottom:18px}
.crumb a{color:var(--mint);transition:color .3s}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;opacity:.4}
.phero__h{font-family:var(--dsp);font-weight:800;line-height:1.03;letter-spacing:-.04em;font-size:clamp(32px,5.2vw,68px);max-width:17ch;
  background:linear-gradient(96deg,#fff 46%,var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
.phero__p{margin-top:20px;font-size:16.5px;line-height:1.72;color:rgba(255,255,255,.84);max-width:68ch}
.phero__a{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
@media(max-width:680px){.phero{min-height:auto;padding:118px 0 52px}.phero__a{width:100%}.phero__a .cta{flex:1}}

/* ---- key takeaways ---- */
.keys{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-2);border-block:1px solid var(--edge);padding:clamp(34px,4vw,52px) 0}
.keys > .wrap{position:relative;z-index:1}
.keys__g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
/* the grid matches the number of takeaways, so none is ever orphaned */
/* A single takeaway reads as a stat line, not as item one of a list. */
.keys__g.k1{grid-template-columns:1fr;justify-items:center}
.keys__g.k1 .key{font-size:17px}
.keys__g.k1 .key i{display:none}
.keys__g.k2{grid-template-columns:repeat(2,1fr)}
.keys__g.k4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.keys__g.k4{grid-template-columns:repeat(2,1fr)}}
.key{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.6;color:var(--tx)}
.key i{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--green-rgb),.18);color:var(--mint);font-style:normal;font-size:11px;font-weight:700;font-family:var(--dsp)}
@media(max-width:900px){.keys__g,.keys__g.k2,.keys__g.k4{grid-template-columns:1fr}}

/* ---- generic content section ----
   Every section carries one of ACP's own photographs behind a heavy wash,
   blurred and desaturated so it reads as ground rather than competing
   detail. Body copy keeps full contrast. */
.sec{position:relative;isolation:isolate;overflow:hidden;padding:clamp(60px,7vw,92px) 0}
.sec--alt{background:var(--bg-2);border-block:1px solid var(--edge)}
.sec__bg{position:absolute;inset:-40px;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  background-attachment:fixed;filter:blur(2px) saturate(.62);opacity:.3;transform:scale(1.05)}
.sec__wash{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(6,10,8,.88) 0%,rgba(6,10,8,.7) 42%,rgba(6,10,8,.9) 100%)}
.sec--alt .sec__wash{background:linear-gradient(180deg,rgba(10,16,13,.89) 0%,rgba(10,16,13,.72) 42%,rgba(10,16,13,.91) 100%)}
.sec > .wrap{position:relative;z-index:1}
@media(max-width:1100px){.sec__bg{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){.sec__bg{background-attachment:scroll}}
.sec__h{max-width:60ch}
.sec__h .big{font-size:clamp(25px,3.2vw,42px);max-width:22ch}
.sec .say{margin-top:15px}
.sec__p{margin-top:15px;font-size:16px;line-height:1.75;color:var(--tx);max-width:68ch}
.sec__p + .sec__p{margin-top:13px}

/* ---- bullet list ---- */
.blist{display:grid;grid-template-columns:repeat(2,1fr);gap:11px 22px;margin-top:30px;list-style:none;max-width:1000px}
.blist li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6;color:var(--tx);
  padding:13px 16px;border-radius:12px;background:var(--bg-3);border:1px solid var(--edge);transition:border-color .35s,background .35s}
.blist li:hover{border-color:rgba(var(--green-rgb),.5);background:var(--bg-2)}
.blist li::before{content:"";flex:0 0 auto;width:19px;height:19px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9E5E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/19px 19px no-repeat}
@media(max-width:760px){.blist{grid-template-columns:1fr}}

/* ---- sub-topic cards ---- */
/* Six tracks, cards spanning two, so a leftover row can redistribute:
   a lone final card takes the full width, a final pair splits it. Works for
   any card count without per-page rules. */
.scards{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:34px}
.scard{grid-column:span 2}
.scards .scard:last-child:nth-child(3n+1){grid-column:span 6}
.scards .scard:nth-last-child(2):nth-child(3n+1){grid-column:span 3}
.scards .scard:last-child:nth-child(3n+2){grid-column:span 3}
.scard{padding:22px 21px 24px;border-radius:15px;background:var(--bg-3);border:1px solid var(--edge);
  display:flex;flex-direction:column;gap:9px;transition:transform .42s var(--e),border-color .38s,background .38s}
.scard:hover{transform:translateY(-4px);border-color:rgba(var(--green-rgb),.55);background:var(--bg-2)}
.scard__n{font-family:var(--dsp);font-weight:700;font-size:10.5px;letter-spacing:.2em;color:var(--mint)}
.scard h3{font-family:var(--dsp);font-weight:700;font-size:16.5px;line-height:1.22;letter-spacing:-.02em;color:var(--ink)}
.scard p{font-size:13.5px;line-height:1.65;color:var(--tx)}
.scard__l{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.scard__l li{position:relative;padding-left:22px;font-size:13px;line-height:1.55;color:var(--tx-2)}
.scard__l li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9E5E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px 15px no-repeat}
@media(max-width:1000px){
  .scards{grid-template-columns:repeat(2,1fr)}
  .scards .scard{grid-column:span 1}
  .scards .scard:last-child:nth-child(3n+1),
  .scards .scard:nth-last-child(2):nth-child(3n+1),
  .scards .scard:last-child:nth-child(3n+2){grid-column:span 1}
  .scards .scard:last-child:nth-child(odd){grid-column:span 2}
}
@media(max-width:620px){
  .scards{grid-template-columns:1fr}
  .scards .scard,.scards .scard:last-child:nth-child(odd){grid-column:span 1}
}

/* ---- numbered steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px;counter-reset:s}
.step{position:relative;padding:22px 20px 24px;border-radius:15px;background:var(--bg-3);border:1px solid var(--edge);
  font-size:14px;line-height:1.62;color:var(--tx);transition:border-color .35s,transform .4s var(--e)}
.step:hover{border-color:rgba(var(--green-rgb),.55);transform:translateY(-4px)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:grid;place-items:center;width:32px;height:32px;border-radius:10px;margin-bottom:12px;background:rgba(var(--green-rgb),.22);color:var(--green);font-family:var(--dsp);font-weight:800;font-size:13px;letter-spacing:0}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---- feature band ---- */
.band{position:relative;overflow:hidden;text-align:center;background:var(--bg)}
.band__bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.26}
.band__c{position:relative;z-index:2;padding:clamp(66px,8vw,110px) 0;max-width:880px;margin:0 auto}
.band__c .big{margin:0 auto;max-width:21ch}
.band__c .say{margin:16px auto 28px;text-align:center}

/* ---- area chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.chips span{padding:10px 18px;border-radius:100px;background:var(--glass);border:1px solid var(--edge);
  font-size:13.5px;font-weight:500;color:var(--tx);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .35s,border-color .35s,color .35s,transform .35s var(--e)}
.chips span:hover{background:rgba(var(--green-rgb),.2);border-color:rgba(var(--green-rgb),.6);color:var(--ink);transform:translateY(-2px)}
/* Cities in the sitemap with no page yet: shown, plainly not clickable. */
.chips a{padding:10px 18px;border-radius:100px;background:var(--glass);border:1px solid var(--edge);
  font-size:13.5px;font-weight:500;color:var(--tx);
  transition:background .3s,border-color .3s,color .3s,transform .3s}
.chips a:hover{background:rgba(var(--green-rgb),.2);border-color:rgba(var(--green-rgb),.6);color:var(--ink);transform:translateY(-2px)}
.chips .chip--off{opacity:.42;cursor:default}
.chips .chip--off:hover{background:var(--glass);border-color:var(--edge);color:var(--tx);transform:none}
@media(max-width:680px){.chips a,.chips span{padding:12px 18px}}

/* inline links inside prose */
.sec__p a,.say a,.band__c .say a{color:var(--mint);border-bottom:1px solid rgba(127,240,187,.38);transition:color .3s,border-color .3s}
.sec__p a:hover,.say a:hover,.band__c .say a:hover{color:var(--ink);border-color:#fff}
.step__h{display:block;font-family:var(--dsp);font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:5px}