/* ProTech Industries showcase — agent 07.
   Presentation only. No copy, links, or behaviour of the live page changes.
   Shared tokens (contract names) + per-sector identity. All text colours
   verified WCAG AA (see REPORT.md). Motion: transform + opacity only. */
:root{
  --navy:#0B1220; --teal:#20C9C0; --blue:#0E5BD6;
  --ink:#0B1220; --muted:#5B6472; --paper:#F2F4F7; --line:#E5E7EB;
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 18px 44px rgba(11,18,32,.14);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.18s; --dur-normal:.45s; --dur-slow:.7s;
}

/* ---- Per-sector identity: decorative accent, soft tint, text-safe ink ---- */
.sector-professional{--sec-accent:#0E5BD6;--sec-tint:#EEF4FF;--sec-ink:#0E5BD6}
.sector-ecommerce{--sec-accent:#20C9C0;--sec-tint:#E6F7F6;--sec-ink:#0A6B65}
.sector-backoffice{--sec-accent:#6D5DF2;--sec-tint:#EFEDFF;--sec-ink:#4F3CC9}
.sector-hr{--sec-accent:#E07856;--sec-tint:#FDF0EC;--sec-ink:#A63D24}
.sector-sales{--sec-accent:#2FA85C;--sec-tint:#EAF6EE;--sec-ink:#1B6B3A}
.sector-support{--sec-accent:#E89B2E;--sec-tint:#FDF3E3;--sec-ink:#8A4B00}
.sector-regulated{--sec-accent:#64748B;--sec-tint:#EEF1F4;--sec-ink:#475569}

/* ---- Reveal (contract classes; JS adds .reveal, then .is-visible) ---- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-normal) var(--ease-out),
    transform var(--dur-normal) var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}

/* ---- Hero motif strip: abstract arcs + dots, no text, reserved space ---- */
.hero-motif{height:110px;margin-top:34px;overflow:hidden;border-radius:var(--radius-md)}
.hero-motif svg{display:block;width:100%;height:100%}
.hero-motif .drift{transition:transform var(--dur-slow) var(--ease-out)}
.hero:hover .hero-motif .drift{transform:translateX(10px)}

/* ---- Showcase section ---- */
.industry-showcase{position:relative;overflow:hidden}
.industry-showcase .wrap{position:relative}

/* Motif band: full-width header band per sector, fixed height = no shift */
.sector-motif{height:118px;margin:0 0 26px;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--sec-tint);
  border:1px solid var(--line);position:relative}
.sector-motif svg{display:block;width:100%;height:100%}
.sector-motif .m-a,.sector-motif .m-b,.sector-motif .m-c{
  transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-normal) var(--ease-out)}
.industry-showcase:hover .sector-motif .m-a{transform:translate(6px,-4px)}
.industry-showcase:hover .sector-motif .m-b{transform:translate(-5px,3px)}
.industry-showcase:hover .sector-motif .m-c{transform:scale(1.06)}
.sector-motif .m-c{transform-box:fill-box;transform-origin:center}

/* Accent rule under the section heading + sector-coloured eyebrow */
.industry-showcase .eyebrow{color:var(--sec-ink)}
.industry-showcase h2{position:relative;padding-bottom:14px}
.industry-showcase h2::after{content:"";display:block;width:56px;height:4px;
  border-radius:2px;background:var(--sec-accent);margin-top:14px;
  transition:width var(--dur-normal) var(--ease-out)}
.industry-showcase:hover h2::after{width:88px}

/* KPI paragraph becomes a tinted callout strip (copy untouched) */
.industry-showcase p.kpi{background:var(--sec-tint);
  border-inline-start:4px solid var(--sec-accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:16px 20px;color:var(--ink)}
.industry-showcase p.kpi strong{color:var(--sec-ink)}

/* Sector CTA link after the support section */
.industry-showcase p.sector-cta{margin-top:22px}
.industry-showcase p.sector-cta a{font-weight:700;color:var(--sec-ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.industry-showcase p.sector-cta a:hover{text-decoration:underline}

/* Regulated (future only): muted, dashed treatment, no new claims */
.sector-regulated .sector-motif{border-style:dashed;border-width:2px}
.sector-regulated h2::after{background:var(--sec-accent)}

/* ---- "Also relevant across sectors" divider ---- */
.sector-divider{text-align:center}
.sector-divider h2{padding-bottom:0}
.sector-divider h2::after{content:"";display:block;width:56px;height:4px;
  border-radius:2px;background:var(--teal);margin:16px auto 0}
.sector-divider p{color:var(--muted);max-width:640px;margin-inline:auto}

/* ---- Closing CTA: navy panel with teal rule + abstract arcs ---- */
.cta-showcase .card.cta-panel{background:var(--navy);color:#fff;
  border:0;border-radius:var(--radius-lg);padding:38px 34px;position:relative;
  overflow:hidden;box-shadow:var(--shadow-lg)}
.cta-showcase .card.cta-panel h2{color:#fff}
.cta-showcase .card.cta-panel p{color:#D7DEE8}
.cta-showcase .card.cta-panel::before{content:"";display:block;width:56px;
  height:4px;background:var(--teal);border-radius:2px;margin-bottom:18px}
.cta-showcase .cta-arcs{position:absolute;inset-inline-end:-30px;top:-30px;
  width:240px;height:240px;opacity:.5;pointer-events:none;
  transition:transform var(--dur-slow) var(--ease-out)}
.cta-showcase .card.cta-panel:hover .cta-arcs{transform:rotate(8deg) scale(1.04)}
.cta-showcase .card.cta-panel .btn{position:relative}

/* ---- Responsive: motifs shrink, nothing overflows ---- */
@media(max-width:640px){
  .hero-motif{height:70px;margin-top:24px}
  .sector-motif{height:84px;margin-bottom:20px}
  .cta-showcase .card.cta-panel{padding:28px 22px}
  .cta-showcase .cta-arcs{width:170px;height:170px}
}

/* ---- Reduced motion: everything visible, nothing moves ---- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-motif .drift,.sector-motif .m-a,.sector-motif .m-b,.sector-motif .m-c,
  .industry-showcase h2::after,.cta-showcase .cta-arcs{transition:none}
  .industry-showcase:hover h2::after{width:56px}
  .industry-showcase:hover .sector-motif .m-a,
  .industry-showcase:hover .sector-motif .m-b,
  .industry-showcase:hover .sector-motif .m-c,
  .cta-showcase .card.cta-panel:hover .cta-arcs{transform:none}
}