/* =====================================================================
   DMT Mate — Homepage (client layout)
   Hero banner + division showcase, stats, framework, industries,
   quality, shop teaser and FAQs.
   ===================================================================== */

/* ---------- Hero banner ----------
   Matched to the client's index.html / style.css: gradient wash, two glow
   orbs, Playfair headline with the white->green gradient accent, glass
   showcase card and a full-width white stats bar. The background photograph
   sits behind the gradient. */
/* The banner sizes to its content now that the card and stat strip are
   compact — a fixed 760px min-height left dead space above and below. */
.hero--banner{position:relative;isolation:isolate;display:flex;flex-direction:column;
  justify-content:center;min-height:clamp(400px,48vh,520px);
  padding:clamp(1.3rem,2.2vw,2.4rem) 0 clamp(1.5rem,2.6vw,2.8rem)}
.hero--banner .hero__media{position:absolute;inset:0;z-index:-3;
  background-image:var(--hero-img);background-size:cover;background-position:center;
  transform:scale(1.02);filter:saturate(1.06) contrast(1.04)}
/* Brand gradient over the photograph — heavy enough on the left to carry the
   headline, then falling away so the image itself reads through the middle
   and right of the banner. */
.hero--banner .hero__scrim{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(103deg,
    rgba(4,20,45,.9) 0%,
    rgba(5,26,60,.76) 26%,
    rgba(7,38,80,.48) 52%,
    rgba(6,58,52,.34) 78%,
    rgba(6,71,46,.42) 100%)}
/* Soft vignette keeps the edges anchored without flattening the photo */
.hero--banner .hero__scrim::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 95% at 50% 45%,transparent 42%,rgba(3,14,38,.42) 100%)}
/* The client's two blurred orbs */
.hero--banner .hero__glow{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero--banner .hero__glow::before,.hero--banner .hero__glow::after{content:"";position:absolute;
  border-radius:50%;filter:blur(2px)}
.hero--banner .hero__glow::before{width:430px;height:430px;right:-120px;top:-80px;
  background:radial-gradient(circle,rgba(50,205,95,.16),transparent 68%)}
.hero--banner .hero__glow::after{width:500px;height:500px;left:32%;bottom:-300px;
  background:radial-gradient(circle,rgba(54,140,255,.13),transparent 68%)}

/* Three columns on one row: copy | divisions card | stat card */
.hero--banner .hero__inner{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.74fr) minmax(0,1fr);
  gap:clamp(.9rem,1.7vw,1.7rem);align-items:center}
.hero--banner .hero__copy{max-width:none;min-width:0;
  text-shadow:0 2px 18px rgba(3,14,38,.45)}
.hero--banner .hero__panel{min-width:0}
.hero--banner .hero__eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:.76rem}
.hero--banner h1{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1.6rem,3.1vw,3.4rem);line-height:1.02;letter-spacing:-.03em;
  margin-bottom:0;color:#fff;overflow-wrap:break-word;text-wrap:balance}
/* Gradient text on the highlighted line */
.hero--banner h1 .accent{background:linear-gradient(90deg,#fff,#6de38b);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero--banner .hero__sub{max-width:46ch;color:#c9d8e8;
  font-size:clamp(.86rem,.95vw,1rem);margin:.9rem 0 1.1rem}
/* Hero CTAs sit in a narrower column now — scale them down */
.hero--banner .hero__cta .btn{padding:.58rem .9rem;font-size:.8rem;border-radius:9px;
  letter-spacing:0}
.hero--banner .hero__cta .btn svg{width:.9rem;height:.9rem}
/* All trust badges share one row — no wrapping, type shrinks to fit */
.hero--banner .hero__trust{display:flex;flex-wrap:nowrap;align-items:center;
  gap:clamp(.5rem,.9vw,1rem);margin-top:1.15rem;min-width:0;
  color:#bfd0e2;font-size:clamp(.6rem,.66vw,.74rem);font-weight:700}
.hero--banner .hero__trust-item{display:inline-flex;align-items:center;gap:.3rem;
  white-space:nowrap;min-width:0}
.hero--banner .hero__trust svg{width:.82em;height:.82em;flex:none;color:#63dc7f}
.hero--banner .hero__trust-sep{display:none}

/* ---------- Division showcase slider ---------- */
.showcase{position:relative;width:100%;min-height:clamp(280px,22vw,330px);
  min-width:0;border-radius:22px;overflow:hidden;contain:paint;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.18);box-shadow:0 38px 100px rgba(0,0,0,.35);
  backdrop-filter:blur(18px)}
.showcase::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(135deg,rgba(26,118,255,.14),transparent 45%,rgba(46,205,91,.17))}

/* Slides stack and cross-fade, as in the client's build */
.showcase__slide{position:absolute;inset:0;z-index:2;padding:clamp(1rem,1.35vw,1.3rem);
  display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow:hidden;
  opacity:0;transform:translateX(45px);pointer-events:none;
  transition:opacity .65s ease,transform .65s ease}
.showcase__slide.is-on{opacity:1;transform:translateX(0);pointer-events:auto}
.showcase__no{position:absolute;right:1.3rem;top:1.2rem;color:#8faccc;font-size:.66rem;
  letter-spacing:.18em}
.showcase__ico{display:grid;place-items:center;
  width:clamp(42px,3.2vw,50px);height:clamp(42px,3.2vw,50px);border-radius:14px;
  color:#fff;background:linear-gradient(135deg,#1672d8,#24b84f);
  box-shadow:0 12px 26px rgba(20,151,102,.27);margin-bottom:clamp(.8rem,1.2vw,1.05rem)}
.showcase__ico svg{width:22px;height:22px}
.showcase__cat{display:block;color:#6de38b;font-size:.63rem;letter-spacing:.15em;font-weight:800;
  text-transform:uppercase}
.showcase h2{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1rem,1.2vw,1.35rem);line-height:1.12;margin:.35rem 0 .4rem;color:#fff;
  max-width:100%;overflow-wrap:anywhere;hyphens:auto}
.showcase p{color:#bdcde0;max-width:32ch;font-size:clamp(.72rem,.72vw,.8rem);
  line-height:1.48;margin:0}
.showcase__slide a{position:absolute;left:clamp(1rem,1.35vw,1.3rem);bottom:3.7rem;
  display:inline-flex;align-items:center;gap:.35rem;color:#fff;font-weight:800;font-size:.76rem}
.showcase__slide a svg{width:1.05rem;height:1.05rem;color:#65dc80;transition:transform .18s ease}
.showcase__slide a:hover svg{transform:translateX(4px)}

.showcase__controls{position:absolute;left:clamp(1rem,1.35vw,1.3rem);right:clamp(1rem,1.35vw,1.3rem);
  bottom:1.1rem;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.showcase__arrow{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;
  cursor:pointer;flex:none;transition:all .2s ease}
.showcase__arrow:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.showcase__arrow svg{width:13px;height:13px}
.showcase__arrow[data-showcase-prev] svg{transform:rotate(180deg)}
.showcase__dots{display:flex;gap:8px}
.showcase__dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.3);transition:.25s}
.showcase__dots button.is-on{width:24px;background:#5edf7b}

/* ---------- Stat card ----------
   Third column of the hero row, alongside the headline and divisions card.
   Figures run horizontally in one strip, as in the client's build, split by
   hairline rules. Type is deliberately small so four fit the narrow column. */
.hero-stats{position:relative;z-index:3;min-width:0;display:grid;
  grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  background:#fff;color:#0b2c55;border-radius:16px;overflow:hidden;
  box-shadow:0 22px 50px rgba(4,18,56,.26)}
.hero-stats div{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:.2rem;text-align:center;min-width:0;
  padding:clamp(.75rem,1vw,1.05rem) clamp(.3rem,.55vw,.62rem);
  border-right:1px solid #e8edf3}
.hero-stats div:last-child{border-right:0}
.hero-stats strong{font-family:var(--font-display,inherit);
  font-size:clamp(.95rem,1.15vw,1.3rem);line-height:1.05;color:#168341;
  letter-spacing:-.02em;white-space:nowrap}
.hero-stats span{font-size:clamp(.55rem,.6vw,.65rem);font-weight:800;color:#6d7d8e;
  line-height:1.25;letter-spacing:.02em;overflow-wrap:break-word;hyphens:auto}

/* ---------- Values ticker ---------- */
.ticker{overflow:hidden;background:var(--signal);color:var(--ink);padding:.75rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__track{display:flex;align-items:center;gap:1.6rem;width:max-content;
  animation:tickerScroll 34s linear infinite}
.ticker__track span{font-family:var(--font-display,inherit);font-weight:800;font-size:.86rem;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.ticker__track i{font-style:normal;opacity:.55}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ticker__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* ---------- About / who we are ---------- */
.section--about{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--paper) 0%,var(--mist-25,#f6f8fc) 55%,var(--paper) 100%)}
.about-orb{position:absolute;top:-18%;right:-10%;width:min(620px,60vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(101,191,5,.14),transparent 62%),
             radial-gradient(circle at 70% 70%,rgba(23,64,184,.10),transparent 60%);
  pointer-events:none;z-index:0}
.about-split{position:relative;z-index:1;display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(1.6rem,4.5vw,4rem);align-items:start}

/* Left column */
.about-intro h2{font-size:clamp(1.6rem,3.1vw,2.3rem);line-height:1.18;letter-spacing:-.015em;
  margin:.5rem 0 1.5rem;max-width:17ch;color:var(--ink)}
.about-quote{position:relative;margin:0;padding:1.5rem 1.6rem 1.5rem 3.4rem;border-radius:18px;
  background:var(--navy);color:#fff;overflow:hidden;
  box-shadow:0 18px 42px rgba(6,14,36,.22)}
.about-quote::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--signal),rgba(101,191,5,.15))}
.about-quote__mark{position:absolute;left:1.15rem;top:.35rem;font-family:Georgia,'Times New Roman',serif;
  font-size:4.2rem;line-height:1;color:var(--signal);opacity:.85}
.about-quote blockquote{margin:0;font-family:var(--font-display,inherit);
  font-size:clamp(1.1rem,2.2vw,1.42rem);font-weight:600;line-height:1.34;letter-spacing:-.01em}
.about-figure{margin-top:1.5rem;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.about-figure img{width:100%;height:auto;display:block}
.about-figure picture{display:block}

/* Right column */
.about-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.5rem,3.2vw,2.4rem);box-shadow:0 14px 40px rgba(4,28,100,.06)}
.about-body p{color:var(--slate);line-height:1.82;margin:0 0 1.15rem;font-size:1rem}
.about-body p:first-child{font-size:1.07rem;color:var(--graphite)}
.about-body p:first-child::first-letter{font-family:var(--font-display,inherit);font-weight:800;
  font-size:1.15em;color:var(--ink)}
.about-body p:last-child{margin-bottom:0}

.about-mini{display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin:1.8rem 0 1.6rem;padding-top:1.6rem;border-top:1px dashed var(--line)}
.about-pillar{position:relative;background:var(--mist-25,var(--mist));border:1px solid var(--line);
  border-radius:16px;padding:1.3rem 1.25rem 1.35rem;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.about-pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--signal),rgba(101,191,5,0));opacity:0;transition:opacity .25s ease}
.about-pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent;
  background:var(--paper)}
.about-pillar:hover::before{opacity:1}
.about-pillar__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:rgba(101,191,5,.13);color:var(--signal-700,#3f7a12);margin-bottom:.85rem}
.about-pillar__ico svg{width:20px;height:20px}
.about-pillar__label{display:block;margin:0 0 .45rem;font-family:var(--font-display,inherit);
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--royal)}
.about-pillar__text{display:block;margin:0;font-size:.91rem;color:var(--slate);line-height:1.62}

.about-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.94rem;
  color:var(--royal);padding-bottom:.15rem;border-bottom:2px solid transparent;transition:all .2s ease}
.about-link:hover{color:var(--signal-700,#3f7a12);border-bottom-color:var(--signal)}
.about-link svg{width:1.05em;height:1.05em;transition:transform .2s ease}
.about-link:hover svg{transform:translateX(4px)}

/* ---------- Divisions grid ---------- */
/* ---------- Divisions showcase (client's tabbed dark section) ----------
   Tabs across the top, a spotlight panel per division, then that division's
   catalogue items pulled from the shop, and the detailed-service links. */
.dv-showcase{position:relative;isolation:isolate;overflow:hidden;
  background:var(--navy);color:#c3cee4}
.dv-showcase__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(720px 480px at 88% -10%,rgba(101,191,5,.18),transparent 60%),
             radial-gradient(760px 520px at 2% 108%,rgba(23,64,184,.3),transparent 58%)}
.dv-showcase::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 25%,transparent 76%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 25%,transparent 76%)}
.dv-showcase .section-head h2{color:#fff}
.dv-showcase .section-head .lead{color:#a9bade}
.dv-showcase .eyebrow.dark{color:var(--signal)}

/* ---- Tabs ---- */
.dv-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;
  margin:0 0 clamp(1.4rem,3vw,2.2rem)}
.dv-tab{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font:inherit;
  font-family:var(--font-display,inherit);font-weight:700;font-size:.86rem;white-space:nowrap;
  padding:.65rem 1.15rem;border-radius:999px;color:#c3cee4;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  transition:transform .22s ease,background .24s ease,color .24s ease,border-color .24s ease,box-shadow .24s ease}
.dv-tab svg{width:1.05rem;height:1.05rem;flex:none;color:var(--signal);transition:color .24s ease}
.dv-tab:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fff}
.dv-tab.is-on{background:var(--signal);border-color:var(--signal);color:var(--ink);
  box-shadow:0 12px 28px rgba(101,191,5,.3)}
.dv-tab.is-on svg{color:var(--ink)}

/* ---- Panels ---- */
.dv-panel{animation:dvIn .45s cubic-bezier(.2,.8,.2,1) both}
.dv-panel[hidden]{display:none}
@keyframes dvIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- Spotlight ---- */
.dv-spot{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.2rem,2.6vw,2.2rem);align-items:stretch;margin-bottom:clamp(1.4rem,3vw,2.2rem);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:24px;overflow:hidden;backdrop-filter:blur(14px)}
.dv-spot__copy{padding:clamp(1.4rem,2.6vw,2.2rem);min-width:0}
.dv-spot__cat{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);margin-bottom:.55rem}
.dv-spot__copy h3{color:#fff;font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.15;
  letter-spacing:-.02em;margin:0 0 .7rem}
.dv-spot__copy > p{color:#b6c6dc;font-size:.95rem;line-height:1.72;margin:0 0 1.2rem;max-width:62ch}

.dv-points{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem;margin-bottom:1.4rem}
.dv-points span{display:flex;align-items:flex-start;gap:.5rem;font-size:.85rem;line-height:1.45;
  color:#d3dded}
.dv-points svg{width:1rem;height:1rem;flex:none;margin-top:.15rem;color:var(--signal)}

.dv-spot__cta{display:flex;gap:.6rem;flex-wrap:wrap}
.dv-spot__cta .btn{padding:.7rem 1.15rem;font-size:.87rem}
.dv-spot__cta .btn svg{width:1rem;height:1rem}

.dv-spot__media{position:relative;min-height:230px;
  background-image:var(--dv-shot);background-size:cover;background-position:center;
  background-color:rgba(255,255,255,.04)}
.dv-spot__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(255deg,transparent 30%,rgba(7,26,75,.55) 100%)}
.dv-spot__ghost{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.22)}
.dv-spot__ghost svg{width:74px;height:74px}

/* ---- Catalogue items ---- */
.dv-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.dv-product{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,border-color .3s ease,box-shadow .3s ease}
.dv-product:hover{transform:translateY(-6px);background:rgba(255,255,255,.09);
  border-color:rgba(101,191,5,.4);box-shadow:0 26px 50px rgba(0,0,0,.32)}
.dv-product__visual{position:relative;aspect-ratio:16/10;display:grid;place-items:center;
  background-image:var(--dv-img);background-size:cover;background-position:center;
  background-color:rgba(4,18,56,.55)}
/*.dv-product__visual::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(23,64,184,.4),rgba(6,58,52,.5))}*/
 .dv-product__visual::after {
  display: none;
} 
.dv-product__ico{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;
  border-radius:14px;color:#fff;background:rgba(7,26,75,.55);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dv-product__ico svg{width:23px;height:23px}
.dv-product:hover .dv-product__ico{transform:scale(1.1) translateY(-2px)*/}

.dv-product__body{display:flex;flex-direction:column;flex:1;padding:.9rem 1rem 1rem}
.dv-product__body h4{color:#fff;font-size:.94rem;line-height:1.3;margin:0 0 .35rem;letter-spacing:-.01em}
.dv-product__body p{color:#a8b9d0;font-size:.8rem;line-height:1.5;margin:0 0 .9rem}
.dv-product__actions{display:flex;gap:.45rem;margin-top:auto}
.dv-product__wa{flex:1;justify-content:center;padding:.55rem .6rem;font-size:.76rem;border-radius:10px}
.dv-product__wa svg{width:1rem;height:1rem}
.dv-product__buy{display:inline-flex;align-items:center;justify-content:center;flex:none;
  padding:.55rem .8rem;border-radius:10px;font-size:.76rem;font-weight:700;color:#fff;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.05);transition:all .2s ease}
.dv-product__buy:hover{background:#fff;color:var(--ink);border-color:#fff}

.dv-more{display:flex;justify-content:center;margin-top:1.4rem}

/* ---- Detailed service links ---- */
.dv-seo{margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid rgba(255,255,255,.12)}
.dv-seo h3{color:#fff;font-size:clamp(1.1rem,2vw,1.5rem);margin:0 0 .3rem;text-align:center}
.dv-seo > p{color:#9fb1cb;font-size:.9rem;margin:0 0 1.4rem;text-align:center}
.dv-seo__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.dv-seo__grid a{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.05rem;border-radius:16px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  transition:all .25s ease}
.dv-seo__grid a:hover{background:rgba(255,255,255,.09);border-color:rgba(101,191,5,.38);
  transform:translateY(-3px)}
.dv-seo__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none;
  color:var(--signal);background:rgba(101,191,5,.13);border:1px solid rgba(101,191,5,.26)}
.dv-seo__ico svg{width:19px;height:19px}
.dv-seo__txt{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.dv-seo__txt strong{color:#fff;font-size:.88rem;font-weight:700}
.dv-seo__txt span{color:#9fb1cb;font-size:.78rem;line-height:1.45}
.dv-seo__grid a > svg{width:1rem;height:1rem;flex:none;margin-top:.55rem;color:var(--signal);
  transition:transform .2s ease}
.dv-seo__grid a:hover > svg{transform:translateX(4px)}

@media(max-width:1080px){
  .dv-products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dv-seo__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .dv-spot{grid-template-columns:1fr}
  .dv-spot__media{min-height:200px;order:-1}
  .dv-products{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .dv-points{grid-template-columns:1fr}
  .dv-seo__grid{grid-template-columns:1fr}
  .dv-tab{font-size:.8rem;padding:.55rem .9rem}
  .dv-spot__cta .btn{width:100%;justify-content:center}
}
@media(max-width:430px){
  .dv-products{grid-template-columns:1fr}
}

.section--divisions{position:relative;overflow:hidden;background:var(--paper)}
.section--divisions::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(circle at 1px 1px,rgba(4,28,100,.10) 1px,transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(80% 55% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(80% 55% at 50% 0%,#000,transparent 75%)}
.section--divisions .container{position:relative;z-index:1}

.division-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}

.division-card{--dc-x:50%;--dc-y:0%;
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:1.7rem 1.6rem 1.5rem;display:flex;flex-direction:column;
  box-shadow:0 6px 22px rgba(4,28,100,.05);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
.division-card:hover,.division-card:focus-within{transform:translateY(-8px);
  box-shadow:0 30px 60px rgba(4,28,100,.16);border-color:transparent}

/* Cursor-following spotlight */
.division-card__glow{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--dc-x) var(--dc-y),rgba(101,191,5,.16),transparent 62%)}
.division-card:hover .division-card__glow{opacity:1}

/* Gradient hairline that draws itself in on hover */
.division-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--royal),var(--signal) 60%,rgba(101,191,5,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .35s ease}
.division-card:hover::before,.division-card:focus-within::before{opacity:1}

/* Oversized ghost numeral */
.division-card__watermark{position:absolute;right:.6rem;bottom:-1.6rem;z-index:-1;
  font-family:var(--font-display,inherit);font-size:7.5rem;font-weight:800;line-height:1;
  color:var(--royal);opacity:.045;letter-spacing:-.05em;pointer-events:none;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.division-card:hover .division-card__watermark{transform:translate(-.25rem,-.5rem) scale(1.06);opacity:.07}

.division-card__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.division-card__ico{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:17px;
  color:#fff;background:linear-gradient(140deg,var(--royal),var(--royal-600,#1740b8));
  box-shadow:0 10px 24px rgba(4,28,100,.28);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background .35s ease}
.division-card__ico::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(140deg,rgba(255,255,255,.28),transparent 55%)}
.division-card__ico svg{width:27px;height:27px;position:relative;z-index:1}
.division-card:hover .division-card__ico{transform:translateY(-3px) rotate(-6deg) scale(1.06);
  background:linear-gradient(140deg,var(--signal-700,#3f7a12),var(--signal));
  box-shadow:0 14px 30px rgba(101,191,5,.34)}

.division-card__no{display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--font-display,inherit);font-weight:800;font-size:.74rem;letter-spacing:.1em;
  color:var(--steel);padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line);
  background:var(--mist-25,var(--mist));transition:all .35s ease}
.division-card__no i{font-style:normal;opacity:.45}
.division-card:hover .division-card__no{color:var(--royal);border-color:rgba(4,28,100,.18)}

.division-card__cat{display:block;font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal-700,#3f7a12);margin-bottom:.4rem}
.division-card h3{font-size:1.18rem;line-height:1.28;letter-spacing:-.015em;margin:0 0 .5rem;color:var(--ink);
  transition:color .25s ease}
.division-card:hover h3{color:var(--royal)}
.division-card p{color:var(--slate);font-size:.93rem;line-height:1.65;margin:0 0 1.3rem}

/* The whole card is the click target; the pill is just the affordance */
.division-card__link{margin-top:auto}
.division-card__link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2}
.division-card__cta{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.1rem;border-radius:999px;
  font-family:var(--font-display,inherit);font-weight:700;font-size:.88rem;
  color:var(--royal);background:var(--mist-25,var(--mist));border:1px solid var(--line);
  transition:all .3s cubic-bezier(.2,.8,.2,1)}
.division-card__cta svg{width:1rem;height:1rem;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.division-card:hover .division-card__cta{background:var(--royal);border-color:var(--royal);color:#fff;
  box-shadow:0 8px 20px rgba(4,28,100,.28)}
.division-card:hover .division-card__cta svg{transform:translateX(4px)}
.division-card__link:focus-visible{outline:none}
.division-card:focus-within .division-card__cta{outline:3px solid var(--signal);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  .division-card,.division-card__ico,.division-card__watermark,.division-card__cta{transition:none}
  .division-card:hover{transform:none}
  .division-card:hover .division-card__ico{transform:none}
}

/* ---------- Solutions framework ---------- */
.section--framework{background:var(--paper)}
/* A single journey line with every step sitting on it. */
.framework{position:relative;list-style:none;margin:0;padding:2.6rem 0 0;display:grid;
  grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.5rem}

/* The rail the steps sit on: navy travelling into signal green */
.framework__rail{position:absolute;left:6%;right:6%;top:calc(2.6rem + 32px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(4,28,100,.14),rgba(4,28,100,.4) 35%,rgba(101,191,5,.55) 78%,rgba(101,191,5,.16));
  overflow:hidden}
.framework__rail i{position:absolute;top:0;left:-22%;width:22%;height:100%;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);
  animation:fwFlow 4.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes fwFlow{0%{left:-22%}60%,100%{left:100%}}

.framework__step{position:relative;min-width:0;text-align:center;padding:0 .35rem 1.1rem;
  border-radius:16px;background:transparent;border:1px solid transparent;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),background .32s ease,
             box-shadow .32s ease,border-color .32s ease}
.framework__step:hover{transform:translateY(-6px);background:var(--paper);
  border-color:var(--line);box-shadow:0 20px 44px rgba(4,28,100,.13)}

/* Icon tile sits ON the rail, with a ring that punches through it */
.framework__ico{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;
  margin:0 auto .95rem;border-radius:20px;color:var(--royal);background:var(--paper);
  border:1px solid var(--line);box-shadow:0 0 0 6px var(--paper),0 8px 20px rgba(4,28,100,.08);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),background .32s ease,color .32s ease,
             box-shadow .32s ease,border-color .32s ease}
.framework__ico svg{width:24px;height:24px;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.framework__step:hover .framework__ico{color:#fff;border-color:transparent;
  background:linear-gradient(140deg,var(--royal),var(--signal-700,#3f7a12) 70%,var(--signal));
  box-shadow:0 0 0 6px var(--paper),0 14px 30px rgba(4,28,100,.3);
  transform:translateY(-3px) scale(1.06)}
.framework__step:hover .framework__ico svg{transform:scale(1.08)}

/* Number badge clipped to the tile's corner */
.framework__no{position:absolute;top:-9px;right:-9px;min-width:26px;height:26px;padding:0 .3rem;
  display:grid;place-items:center;border-radius:999px;
  font-family:var(--font-display,inherit);font-size:.66rem;font-weight:800;letter-spacing:.04em;
  color:var(--signal-700,#3f7a12);background:var(--signal-50,#f0f8e6);
  border:1px solid var(--signal-100,#ddeec6);box-shadow:0 2px 6px rgba(4,28,100,.08);
  transition:all .32s cubic-bezier(.2,.8,.2,1)}
.framework__step:hover .framework__no{color:var(--ink);background:var(--signal);
  border-color:var(--signal);transform:scale(1.08)}

.framework__step h3{font-size:.98rem;margin:0 0 .3rem;color:var(--ink);line-height:1.25;
  letter-spacing:-.01em;transition:color .25s ease}
.framework__step:hover h3{color:var(--royal)}
.framework__step p{margin:0 auto;font-size:.79rem;color:var(--slate);line-height:1.55;max-width:19ch}

/* Staggered entrance as the row scrolls in */
.framework .reveal{transition-delay:calc(var(--fw-i) * 70ms)}

/* Narrower desktops: keep one row but let it scroll rather than squash. */
@media(max-width:1100px){
  .framework{grid-auto-columns:minmax(160px,1fr);overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:.8rem;margin-inline:calc(var(--gutter,1.5rem) * -1);
    padding-inline:var(--gutter,1.5rem);scrollbar-width:thin}
  .framework__rail{left:calc(var(--gutter,1.5rem) + 6%);right:auto;width:200%}
  .framework__step{scroll-snap-align:center}
  .framework__step:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .framework__rail i{animation:none;display:none}
  .framework__step:hover,.framework__step:hover .framework__ico{transform:none}
}

/* ---------- Industries ----------
   Client's green band: linear-gradient(135deg,#3ea61b,#8bd94c) with frosted
   white tiles and navy icon discs. */
.section--industries{position:relative;overflow:hidden;
  background:linear-gradient(135deg,#3ea61b 0%,#6cc733 45%,#8bd94c 100%);color:#061324}
.section--industries::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 460px at 88% -20%,rgba(255,255,255,.34),transparent 62%),
             radial-gradient(620px 420px at 4% 118%,rgba(6,19,36,.14),transparent 60%)}
.section--industries .container{position:relative;z-index:1}
.section--industries h2{color:#061324;max-width:20ch}
.section--industries .eyebrow{color:#0d3a10}
.section--industries .eyebrow::before{background:#061324}

.industry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem}
.industry{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-radius:14px;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.6);
  color:#061324;font-weight:700;font-size:.94rem;line-height:1.3;
  backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(6,19,36,.07);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.industry:hover{background:#fff;transform:translateY(-3px);box-shadow:0 14px 32px rgba(6,19,36,.16)}

/* Navy disc behind each icon, as the client has it */
.industry .industry__ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#06143f,#0b347c);box-shadow:0 4px 12px rgba(6,20,63,.28)}
.industry .industry__ico svg{width:16px;height:16px;color:#fff}

/* ---------- Quality ---------- */
.section--quality{background:var(--navy);color:#c3cee4}
.section--quality h2{color:#fff}
.section--quality .lead{color:#aebbd6}
.quality-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.quality-list{display:grid;gap:.9rem}
.quality-item{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.2rem;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark-2)}
.quality-item__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:rgba(101,191,5,.14);color:var(--signal);flex:none}
.quality-item__ico svg{width:20px;height:20px}
.quality-item strong{display:block;color:#fff;font-size:.98rem;margin-bottom:.15rem}
.quality-item span{font-size:.9rem;line-height:1.55;color:#aab6d1}

/* ---------- Shop teaser ---------- */
.section--shop-teaser{position:relative;overflow:hidden;background:var(--paper)}
.section--shop-teaser::before{content:"";position:absolute;left:50%;bottom:-30%;width:min(1000px,95vw);
  aspect-ratio:2/1;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,28,100,.07),transparent 70%)}
.section--shop-teaser .container{position:relative;z-index:1}

.shop-teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:1rem}

.shop-tile{--dc-x:50%;--dc-y:0%;
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;
  padding:1.7rem 1rem 2.7rem;border-radius:20px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 6px 20px rgba(4,28,100,.05);
  transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .34s ease,border-color .34s ease}
.shop-tile:hover{transform:translateY(-7px);box-shadow:0 28px 54px rgba(4,28,100,.15);
  border-color:transparent;color:var(--ink)}

.shop-tile__glow{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .34s ease;
  background:radial-gradient(320px circle at var(--dc-x) var(--dc-y),rgba(101,191,5,.16),transparent 62%)}
.shop-tile:hover .shop-tile__glow{opacity:1}
.shop-tile::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,var(--royal),var(--signal) 65%,rgba(101,191,5,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .34s ease}
.shop-tile:hover::before{opacity:1}

.shop-tile__ico{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;margin-bottom:.4rem;
  color:var(--royal);background:var(--mist-25,var(--mist));border:1px solid var(--line);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),background .32s ease,color .32s ease,
             box-shadow .32s ease,border-color .32s ease}
.shop-tile__ico svg{width:26px;height:26px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.shop-tile:hover .shop-tile__ico{color:#fff;border-color:transparent;
  background:linear-gradient(140deg,var(--royal),var(--signal-700,#3f7a12) 72%,var(--signal));
  box-shadow:0 14px 28px rgba(4,28,100,.28);transform:translateY(-3px) scale(1.07)}
.shop-tile:hover .shop-tile__ico svg{transform:scale(1.08)}

.shop-tile strong{font-size:.95rem;line-height:1.3;font-weight:700;letter-spacing:-.01em;
  transition:color .25s ease}
.shop-tile:hover strong{color:var(--royal)}
.shop-tile__meta{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);transition:color .25s ease}
.shop-tile:hover .shop-tile__meta{color:var(--signal-700,#3f7a12)}

/* Arrow chip that rises out of the card foot on hover */
.shop-tile__go{position:absolute;left:50%;bottom:.55rem;transform:translate(-50%,140%);
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--signal);color:var(--ink);box-shadow:0 6px 16px rgba(101,191,5,.4);
  opacity:0;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .28s ease}
.shop-tile__go svg{width:14px;height:14px}
.shop-tile:hover .shop-tile__go{transform:translate(-50%,0);opacity:1}

.shop-teaser-grid .reveal{transition-delay:calc(var(--fw-i) * 60ms)}
.center-action{text-align:center;margin-top:2rem}

@media(prefers-reduced-motion:reduce){
  .shop-tile,.shop-tile__ico,.shop-tile__go{transition:none}
  .shop-tile:hover{transform:none}
  .shop-tile:hover .shop-tile__ico{transform:none}
}

/* ---------- FAQ ---------- */
.section--faq{background:var(--mist)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.faq[open]{border-color:var(--royal);box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 3rem 1.1rem 1.3rem;position:relative;
  font-weight:600;color:var(--ink);font-size:.98rem;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq__mark{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);width:16px;height:16px}
.faq__mark::before,.faq__mark::after{content:"";position:absolute;background:var(--royal);border-radius:2px;
  transition:transform .22s ease,opacity .22s ease}
.faq__mark::before{left:0;top:7px;width:16px;height:2px}
.faq__mark::after{left:7px;top:0;width:2px;height:16px}
.faq[open] .faq__mark::after{transform:rotate(90deg);opacity:0}
.faq__a{padding:0 1.3rem 1.2rem;color:var(--slate);line-height:1.7;font-size:.93rem}

/* ---------- Why us / core values ---------- */
.section--why{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--paper) 0%,var(--mist-25,#f6f8fc) 100%)}
.section--why::before{content:"";position:absolute;left:50%;top:-12%;width:min(900px,90vw);aspect-ratio:2/1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(101,191,5,.13),transparent 70%)}
.section--why .container{position:relative;z-index:1}

.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}

.feature{--dc-x:50%;--dc-y:0%;
  position:relative;isolation:isolate;overflow:hidden;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:2rem 1.8rem 1.9rem;display:flex;flex-direction:column;
  box-shadow:0 8px 26px rgba(4,28,100,.05);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s ease,border-color .38s ease}
.feature:hover{transform:translateY(-8px);box-shadow:0 32px 64px rgba(4,28,100,.15);border-color:transparent}

/* Cursor spotlight + gradient hairline, matching the divisions cards */
.feature__glow{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .38s ease;
  background:radial-gradient(440px circle at var(--dc-x) var(--dc-y),rgba(101,191,5,.15),transparent 62%)}
.feature:hover .feature__glow{opacity:1}
.feature::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--royal),var(--signal) 62%,rgba(101,191,5,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .38s ease}
.feature:hover::before{opacity:1}

/* Icon: hexagon-ish squircle that flips from green tint to navy gradient */
.feature__ico{position:relative;display:grid;place-items:center;width:62px;height:62px;margin-bottom:1.3rem;
  border-radius:20px;color:var(--signal-700,#3f7a12);background:var(--signal-50,#f0f8e6);
  border:1px solid var(--signal-100,#ddeec6);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),background .35s ease,color .35s ease,
             box-shadow .35s ease,border-color .35s ease}
.feature__ico::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:linear-gradient(140deg,rgba(255,255,255,.3),transparent 55%);transition:opacity .35s ease}
.feature__ico svg{width:27px;height:27px;position:relative;z-index:1;
  transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.feature:hover .feature__ico{color:#fff;border-color:transparent;
  background:linear-gradient(140deg,var(--royal),var(--signal-700,#3f7a12) 72%,var(--signal));
  box-shadow:0 16px 32px rgba(4,28,100,.3);transform:translateY(-4px) rotate(-5deg) scale(1.06)}
.feature:hover .feature__ico::after{opacity:1}
.feature:hover .feature__ico svg{transform:scale(1.1)}

.feature__label{display:block;font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal-700,#3f7a12);margin-bottom:.45rem}
.feature h3{font-size:1.22rem;line-height:1.25;letter-spacing:-.015em;margin:0 0 .55rem;color:var(--ink);
  transition:color .25s ease}
.feature:hover h3{color:var(--royal)}
.feature p{margin:0 0 1.3rem;color:var(--slate);font-size:.95rem;line-height:1.7}

/* Rule that draws itself across the card foot */
.feature__rule{display:block;margin-top:auto;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--royal),var(--signal));
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.feature:hover .feature__rule{transform:scaleX(1)}

.feature-grid .reveal{transition-delay:calc(var(--fw-i) * 90ms)}

@media(prefers-reduced-motion:reduce){
  .feature,.feature__ico,.feature__rule{transition:none}
  .feature:hover{transform:none}
  .feature:hover .feature__ico{transform:none}
}

/* ---------- Featured projects ---------- */
.section--projects{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--mist) 0%,var(--mist-25,#f6f8fc) 60%,var(--paper) 100%)}
.hp-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:stretch}

.hp-project{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 30px rgba(4,28,100,.05);
  transition:transform .3s var(--ease-out,ease),box-shadow .3s ease,border-color .3s ease}
.hp-project:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(4,28,100,.13);border-color:transparent}
.hp-project::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--signal),rgba(101,191,5,0));opacity:0;transition:opacity .3s ease;z-index:3}
.hp-project:hover::after{opacity:1}

/* Drag-to-compare before/after, same control as the projects pages */
.hp-project__media{position:relative;border-bottom:1px solid var(--line)}
.hp-project__media .ba{aspect-ratio:4/3;border-radius:0}
.hp-project__media .ba__handle{width:36px;height:36px}
.hp-project__media .ba__handle svg{width:16px;height:16px}
.hp-project__media .ba__tag{font-size:.6rem;padding:.22rem .55rem;bottom:.55rem}
.hp-project__media .ba__tag--before{left:.55rem}
.hp-project__media .ba__tag--after{right:.55rem}
.hp-project__media .ba__hint{font-size:.64rem;padding:.24rem .7rem;top:.55rem}
.hp-project__media .pf-single{aspect-ratio:4/3}
.hp-project__media .pf-single img{width:100%;height:100%;object-fit:cover;display:block}

.hp-status{position:absolute;top:.7rem;left:.7rem;z-index:6;display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .8rem;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(6,14,36,.18)}
.hp-status::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor}
.hp-status--completed{background:rgba(238,248,228,.94);color:var(--signal-700,#3f7a12)}
.hp-status--ongoing{background:rgba(255,244,224,.94);color:#9a5f00}
.hp-status--upcoming{background:rgba(238,242,255,.94);color:var(--royal)}

.hp-project__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.hp-project h3{font-size:1.1rem;margin:0;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.hp-project h3 a{color:inherit}
.hp-project h3 a:hover{color:var(--royal)}

.hp-project__meta{list-style:none;margin:0;padding:.85rem 0;display:grid;grid-template-columns:1fr 1fr;
  gap:.6rem .9rem;font-size:.79rem;color:var(--slate);line-height:1.4;
  border-top:1px solid var(--line-2,var(--line));border-bottom:1px solid var(--line-2,var(--line))}
.hp-project__meta li{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.hp-project__meta strong{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel)}
.hp-project__scope{margin:0;font-size:.87rem;color:var(--slate);line-height:1.62}
.hp-project__scope strong{color:var(--graphite);font-weight:700}
.hp-project__link{margin-top:auto;padding-top:.3rem;display:inline-flex;align-items:center;gap:.45rem;
  color:var(--signal-700,#3f7a12);font-weight:700;font-size:.86rem;align-self:flex-start;
  border-bottom:2px solid transparent;transition:border-color .2s ease}
.hp-project__link:hover{border-bottom-color:var(--signal)}
.hp-project__link svg{width:1em;height:1em;transition:transform .18s ease}
.hp-project__link:hover svg{transform:translateX(4px)}

/* ---------- Consultancy & enquiries ---------- */
.section--enquiry{background:var(--mist)}
.enq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,4.5vw,4rem);align-items:start}
.enq-copy h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.02em;
  margin:.4rem 0 1.1rem;max-width:15ch;color:var(--ink)}
.enq-copy .lead{max-width:44ch;margin-bottom:1.6rem}
.enq-chips{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.enq-chips a{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;color:var(--ink);font-size:.98rem}
.enq-chips a:hover{color:var(--royal)}
.enq-chips svg{width:1.05rem;height:1.05rem;color:var(--signal-700,#3f7a12);flex:none}

.enq-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 18px 46px rgba(4,28,100,.07)}
.enq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enq-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.enq-card label{display:block;font-weight:600;font-size:.83rem;color:var(--graphite);margin-bottom:1rem}
.enq-card label span{color:var(--danger)}
.enq-card input,.enq-card select,.enq-card textarea{width:100%;margin-top:.4rem;padding:.7rem .9rem;
  border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.93rem;font-weight:400;
  background:var(--paper);color:var(--graphite);transition:border-color .18s ease,box-shadow .18s ease}
.enq-card textarea{resize:vertical;min-height:130px}
.enq-card input:focus,.enq-card select:focus,.enq-card textarea:focus{outline:none;border-color:var(--royal);
  box-shadow:0 0 0 4px rgba(4,28,100,.07)}
.enq-card input::placeholder,.enq-card textarea::placeholder{color:var(--steel);opacity:.75}

.enq-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.4rem}
.enq-actions .btn svg{width:1.1em;height:1.1em}
.enq-note{border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.92rem;line-height:1.55}
.enq-note--ok{background:var(--signal-50,#f0f8e6);border:1px solid var(--signal-100,#ddeec6);color:var(--signal-700,#3f7a12)}
.enq-note--err{background:#fdecea;border:1px solid #f3c2bc;color:var(--danger)}
.enq-note--err p{margin:0}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  /* Not enough room for three columns — copy on top, card + stats beneath */
  .hero--banner .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero--banner .hero__copy{grid-column:1/-1}
}
@media(max-width:820px){
  .hero--banner{min-height:0}
  .hero--banner .hero__trust{flex-wrap:wrap;gap:.6rem 1.1rem;font-size:.74rem}
  .hero--banner .hero__cta .btn{padding:.7rem 1.05rem;font-size:.88rem}
  .hero--banner .hero__inner{grid-template-columns:1fr}
  .hero--banner .hero__sub{max-width:none}

  /* Below the two-column layout the card is too narrow for absolutely
     positioned slides — the link and controls collided with the copy.
     Switch the whole card to normal flow so it grows with its content. */
  .showcase{min-height:0}
  .showcase__slide{position:static;opacity:1;transform:none;pointer-events:auto;display:none}
  .showcase__slide.is-on{display:flex;animation:showcaseIn .45s ease both}
  .showcase__no{position:static;align-self:flex-end;margin-bottom:.5rem}
  .showcase__slide a{position:static;margin-top:1.3rem}
  .showcase__controls{position:static;margin-top:1.4rem;padding-top:1.1rem;
    border-top:1px solid rgba(255,255,255,.14)}
  .showcase p{max-width:none}
  .quality-grid{grid-template-columns:1fr;gap:1.4rem}
  .about-split{grid-template-columns:1fr;gap:1.4rem}
  .about-intro h2{max-width:none}
  .enq-grid{grid-template-columns:1fr;gap:1.6rem}
  .enq-copy h2{max-width:none}
  .hp-projects{grid-template-columns:1fr 1fr}
  .division-grid{grid-template-columns:1fr 1fr}
  .feature-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .hero-stats{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .hero-stats div:nth-child(2n){border-right:0}
  .hero-stats div:nth-child(-n+2){border-bottom:1px solid #e8edf3}
}
@media(max-width:760px){
  .hero-stats strong{font-size:1.05rem}
  .hero-stats span{font-size:.6rem}
  .hero-stats div{padding:.75rem .4rem}
  .showcase__ico{width:68px;height:68px;border-radius:18px}
  .showcase__ico svg{width:30px;height:30px}
  .showcase h2{font-size:1.55rem}
  .faq-grid{grid-template-columns:1fr}
  .about-mini{grid-template-columns:1fr}
  .enq-row{grid-template-columns:1fr;gap:0}
  .enq-actions .btn{width:100%;justify-content:center}
  .hp-projects{grid-template-columns:1fr}
  .hp-project__meta{grid-template-columns:1fr 1fr}
  .division-grid{grid-template-columns:1fr;gap:1rem}
  .division-card{padding:1.4rem 1.3rem 1.3rem}
  .division-card__watermark{font-size:6rem}
  .feature-grid{grid-template-columns:1fr;gap:1rem}
  .feature{padding:1.6rem 1.4rem 1.5rem}
  .hero--banner .hero__scrim{background:linear-gradient(180deg,rgba(7,26,75,.9),rgba(4,18,56,.95))}
}
@media(max-width:480px){
  .shop-teaser-grid{grid-template-columns:1fr 1fr}
  .industry-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .industry{font-size:.82rem;padding:.75rem .8rem;gap:.6rem}
  .industry .industry__ico{width:28px;height:28px}
  .industry .industry__ico svg{width:14px;height:14px}
}