/* ==========================================================================
   S P Alectricals — homepage
   Requires css/sp-core.css.

   FRAME: modelled on indosolar.co.in, which the client chose as the reference.
   The things that actually make that page read as premium, in order of weight:

     1. It is LIGHT. White and a pale mint green carry ~85% of the page; dark
        appears twice (the enquiry panel and the footer) and nowhere else.
     2. Headings are LIGHT WEIGHT and often CENTRED. Size carries the emphasis,
        not weight. Nothing is set at 800.
     3. Products are CUTOUTS floating on tinted panels, not photographs inside
        boxes. Our product shots are already on pure white, so multiply blend
        drops them straight onto the mint with no masking needed.
     4. Generous vertical rhythm and large soft radii (16-28px).

   The mint is derived from the brand green #3CB448 rather than copied from the
   reference, and the dark panels stay brand navy, so the page reads as
   S P Alectricals rather than as a clone.
   ========================================================================== */

.hp{
  /* the mint scale and --m-muted come from sp-core; only the page's own dark
     panel tones are declared here */
  --m-deep:#082514; --m-deep-2:#0C3520; --m-deep-3:#0F3F29;
  background:#fff;
}

/* ============================================================ TYPE SCALE */
.hp h1, .hp h2{ font-weight:300; letter-spacing:-.022em; line-height:1.16; color:var(--ink) }
.hp h3{ font-weight:600; letter-spacing:-.015em }
/* one or two words step up a weight — never a colour shout and never a size jump */
.hp h1 span, .hp h2 em{ font-weight:500; font-style:normal; color:var(--green-dk) }

/* centred section heading — the reference centres almost every one */
.hp-c{max-width:820px;margin:0 auto clamp(30px,3.4vw,46px);text-align:center}
.hp-c h2{font-size:clamp(28px,3.8vw,42px);margin:0 0 14px}
.hp-c p{font-size:16px;color:var(--muted);max-width:66ch;margin:0 auto}

/* .hp-pill now lives in sp-core.css — About uses it too */

/* ================================================================== HERO */
/* Light, not dark. A pale mint wash with the product art on the right, which is
   how the reference opens — no photograph, no overlay, no glass. */
.hp-hero{position:relative;overflow:hidden;
  background:linear-gradient(168deg,#EFF8F1 0%,#F7FCF8 46%,#FFFFFF 100%);
  padding:clamp(52px,6vw,84px) 0 clamp(56px,6.5vw,92px)}
/* one soft green bloom, low opacity, to stop the wash reading as flat grey */
.hp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  /* centred lower than before: at 12% the bloom reached the hero's top edge
     and stopped dead against the header, drawing a faint horizontal line */
  background:radial-gradient(760px 520px at 86% 46%, rgba(60,180,72,.14), transparent 68%)}
.hp-hero > .hp-wrap{position:relative;z-index:2}
.hp-hero-grid{display:grid;gap:clamp(34px,4.5vw,56px);align-items:center}
@media(min-width:940px){.hp-hero-grid{grid-template-columns:1.02fr .98fr}}

.hp-hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.1;letter-spacing:-.028em;
  margin:0 0 20px;max-width:16ch;text-wrap:balance}
.hp-hero-lead{font-size:clamp(15.5px,1.5vw,17.5px);color:var(--muted);max-width:48ch}
.hp-hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hp-hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.hp-hero-meta span{display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--m-line);border-radius:999px;padding:8px 16px;
  font-size:13px;font-weight:500;color:var(--ink)}
.hp-hero-meta svg{width:14px;height:14px;color:var(--green-dk);flex:none}

/* --- the module stack -----------------------------------------------------
   The reference's hero art is the product itself, arranged as a staircase of
   overlapping modules. images/1-1-1b2.jpg is a 400x450 module on pure white,
   so three copies at different scales rebuild that composition with no new
   photography. Each panel is cropped past its white margin and given a real
   rectangular shadow, because a module IS a rectangle. */
.hp-hero-art{position:relative;display:grid;place-items:end center;
  min-height:clamp(260px,34vw,420px)}
.hp-hero-art figure{position:absolute;margin:0;overflow:hidden;border-radius:6px;
  background:#DDE2E8;
  box-shadow:0 2px 4px rgba(17,24,39,.10), 0 26px 50px -18px rgba(17,24,39,.42);
  animation:hp-float 9s var(--ease) infinite alternate}
/* Measured crop. In the 400x450 source the panel runs x 15..295, so the frame
   takes the panel's own 281:450 ratio and object-position lands its left edge
   at 15/(400-281) of the overflow. That removes the 26% white gutter on the
   right without touching the artwork. */
.hp-hero-art img{width:100%;height:100%;object-fit:cover;object-position:12.6% 50%;display:block}
/* smallest at the front-left, largest behind on the right, as in the reference */
.hp-hero-art figure{aspect-ratio:281/450}
.hp-hero-art .a1{width:27%;left:2%;bottom:0;z-index:3;animation-delay:0s}
.hp-hero-art .a2{width:33%;left:26%;bottom:0;z-index:2;animation-delay:-3s}
.hp-hero-art .a3{width:40%;right:2%;bottom:0;z-index:1;animation-delay:-6s}
@keyframes hp-float{ from{transform:translateY(0)} to{transform:translateY(-9px)} }
@media(max-width:939px){ .hp-hero-art{min-height:250px} }

/* Above-the-fold entrance. On a timer, not an IntersectionObserver — observers
   do not fire in a background tab, and a hero parked at opacity:0 is the worst
   possible failure. Everything below the fold uses .hp-rv instead. */
.hp-up{opacity:0;animation:hp-up .8s var(--ease) forwards}
@keyframes hp-up{from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none}}
.hp-d1{animation-delay:.05s} .hp-d2{animation-delay:.15s}
.hp-d3{animation-delay:.25s} .hp-d4{animation-delay:.35s}
@media(prefers-reduced-motion:reduce){ .hp-up{opacity:1;animation:none} }

/* ============================================================= STATEMENT */
/* The reference's second block: one centred sentence, upper case, light, wide.
   It is doing the work an "about us" paragraph normally does, in one screen. */
.hp-say{padding:clamp(38px,4vw,54px) 0;background:#fff}
/* Held to two lines. At 29px on a 34ch measure the old sentence ran to four,
   which is what made this block feel like dead space. The measure is set in px
   because ch is the width of a zero — uppercase runs much wider than that. */
.hp-say p{margin:0 auto clamp(26px,2.8vw,38px);text-align:center;
  font-family:var(--h);font-weight:300;color:var(--ink);
  font-size:clamp(18px,2.1vw,26px);line-height:1.36;letter-spacing:-.012em;
  text-transform:uppercase;max-width:620px;text-wrap:balance}
.hp-say b{font-weight:500;color:var(--green-dk)}

/* ================================================================= STATS */
/* A single soft mint panel with hairline dividers — not four separate cards. */
/* now lives inside .hp-say; the wrapper is kept only so old markup, if any
   is still cached, does not lose its background */
.hp-figs{padding:0;background:#fff}
.hp-figs-panel{background:linear-gradient(160deg,var(--m-card),var(--m-card-2));
  border:1px solid var(--m-line);border-radius:22px;
  padding:clamp(26px,3.4vw,42px) clamp(20px,3vw,34px);
  display:grid;gap:26px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.hp-figs-panel{grid-template-columns:repeat(4,1fr);gap:0}}
/* flex-start, not center: the first label wraps to two lines, which made its
   column taller and pushed that icon down while the others stayed put. Top
   alignment locks every icon and every number to the same baseline no matter
   how many lines the label below them runs to. */
.hp-fig{display:flex;align-items:center;gap:14px;justify-content:flex-start;text-align:left}
@media(min-width:900px){
  .hp-fig{padding:0 24px;border-left:1px solid var(--m-line)}
  .hp-fig:first-child{border-left:0;padding-left:8px}
}
.hp-fig-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:#fff;border:1px solid var(--m-line);flex:none;
  box-shadow:0 2px 6px rgba(17,24,39,.05)}
/* the glyphs were lost inside the plate at 22px */
.hp-fig-ic svg{width:21px;height:21px;color:var(--green-dk);stroke-width:2.2}
.hp-fig b{display:block;font-family:var(--h);font-weight:400;color:var(--ink);
  font-size:clamp(24px,2.9vw,32px);letter-spacing:-.032em;line-height:1.05;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Direct path only. ".hp-fig span" also matched .hp-fig-ic, which is itself a
   <span>; at (0,1,1) it outranked .hp-fig-ic (0,1,0) and forced display:block
   onto the plate, collapsing its grid so the icon fell into the top-left
   corner instead of centring. Same trap as .hp-spec div and .hp-enq-list div. */
.hp-fig > div > span{display:block;margin-top:5px;font-size:12.5px;color:var(--m-muted);
  line-height:1.4;max-width:22ch;
  /* two lines reserved, so a one-line label still makes a cell of the same
     height and every icon lands on the same centre line */
  min-height:2.8em}
@media(max-width:899px){ .hp-fig > div > span{min-height:0} }
/* two-up on a phone left the labels wrapping to four lines at uneven heights */
@media(max-width:559px){
  .hp-figs-panel{grid-template-columns:1fr;gap:18px}
  .hp-fig{justify-content:flex-start}
}

/* ==================================================== PRODUCT CATEGORIES */
/* Two large pale cards, product cutout centred inside — the reference's
   "Mono PERC / N-Type" block, carrying our two actual lines of business. */
.hp-cats{padding:clamp(44px,4.8vw,64px) 0;background:var(--m-wash)}
.hp-cats-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:800px){.hp-cats-grid{grid-template-columns:repeat(2,1fr)}}
/* The card was a mint gradient sitting on a mint band — barely a card at all.
   White separates it cleanly and matches the product cards further down. */
.hp-cat{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--border);border-radius:24px;padding:clamp(24px,3vw,34px);
  box-shadow:0 1px 2px rgba(17,24,39,.04);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.hp-cat:hover{transform:translateY(-4px);border-color:rgba(41,126,50,.42);
  box-shadow:0 2px 4px rgba(17,24,39,.05), 0 26px 54px -22px rgba(17,24,39,.28)}
.hp-cat h3{font-size:clamp(19px,2.2vw,24px);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.hp-cat p{margin-top:11px;font-size:14.5px;color:var(--m-muted);max-width:46ch;line-height:1.6}
.hp-cat .hp-pill{margin-top:22px;align-self:flex-start}
.hp-cat-im{margin-top:24px;border-radius:16px;border:1px solid var(--m-line);
  background:linear-gradient(165deg,var(--m-card),#F5FBF7);
  aspect-ratio:16/10;display:grid;place-items:center;padding:20px;overflow:hidden}
.hp-cat-im img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .45s var(--ease)}
.hp-cat:hover .hp-cat-im img{transform:scale(1.05)}

/* ============================================================== PRODUCTS */
.hp-prods{padding:clamp(44px,4.8vw,64px) 0;background:#fff}
.hp-bento-prod{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.hp-bento-prod{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.hp-bento-prod{grid-template-columns:repeat(4,1fr)}}
.hp-prod{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--border);border-radius:20px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.hp-prod:hover{transform:translateY(-5px);border-color:rgba(41,126,50,.38);
  box-shadow:0 2px 4px rgba(17,24,39,.05), 0 24px 50px -22px rgba(17,24,39,.3)}
/* the cutouts float on mint, exactly as in the reference */
.hp-prod-im{aspect-ratio:4/3;display:grid;place-items:center;padding:24px;overflow:hidden;
  background:linear-gradient(165deg,var(--m-card),#F5FBF7)}
.hp-prod-im img{max-width:170px;max-height:100%;width:auto;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .45s var(--ease)}
/* Two of the ten shots are photographs, not white-background cutouts
   (bc.jpg, bos.jpg). Multiply tints those mint and muddies them, so they fill
   the well edge to edge instead, the way the project cards do. */
.hp-prod-im--photo{padding:0}
.hp-prod-im--photo img{max-width:none;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:normal}
.hp-prod:hover .hp-prod-im img{transform:scale(1.07)}
.hp-prod-tx{padding:18px 19px 21px;display:flex;flex-direction:column;flex:1}
.hp-prod h3{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.hp-prod p{font-size:13px;color:var(--muted);line-height:1.55;flex:1}
.hp-prod-go{display:inline-flex;align-items:center;gap:7px;margin-top:15px;
  font-size:12.5px;font-weight:600;color:var(--green-dk)}
.hp-prod-go svg{width:13px;height:13px;transition:transform .22s var(--ease)}
.hp-prod:hover .hp-prod-go svg{transform:translateX(4px)}
@media(min-width:760px){
  .hp-prod--wide{grid-column:span 2;flex-direction:row}
  .hp-prod--wide .hp-prod-im{aspect-ratio:auto;flex:0 0 46%;padding:26px}
  .hp-prod--wide .hp-prod-im img{max-width:210px}
  .hp-prod--wide .hp-prod-tx{justify-content:center;padding:28px}
  .hp-prod--wide h3{font-size:20px;font-weight:500}
  .hp-prod--wide p{flex:0}
}

/* ========================================================== INSTITUTIONS */
/* The reference runs a client logo band here. We have no logo licences — and
   using government emblems would be a real problem — so the institutions are
   set as names, which reads as a credential list rather than a gap. */
.hp-inst{padding:clamp(44px,5vw,68px) 0;background:var(--m-card)}
.hp-inst h2{text-align:center;font-size:clamp(24px,3vw,34px);margin:0 0 8px}
.hp-inst > .hp-wrap > p{text-align:center;font-size:15px;color:var(--m-muted);margin:0 auto 34px;max-width:60ch}
.hp-inst-row{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.hp-inst-row{grid-template-columns:repeat(4,1fr)}}
.hp-inst-c{background:#fff;border:1px solid var(--m-line);border-radius:16px;
  padding:20px 18px;text-align:center;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.hp-inst-c:hover{transform:translateY(-3px);box-shadow:0 18px 38px -20px rgba(17,24,39,.32)}
.hp-inst-c b{display:block;font-family:var(--h);font-size:14.5px;font-weight:600;
  color:var(--ink);letter-spacing:-.012em;line-height:1.32}
.hp-inst-c span{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.hp-inst-c i{display:inline-block;margin-top:10px;font-style:normal;font-size:12px;
  font-weight:600;color:var(--green-dk);background:var(--m-card);
  border-radius:999px;padding:4px 12px}

/* ============================================================== PROJECTS */
/* The reference's "Resources" card: image on top, small category label, title,
   then a pill. Light card on white — no dark scrim, no text over photo. */
.hp-projs{padding:clamp(44px,4.8vw,64px) 0;background:#fff}
.hp-pgrid{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media(min-width:960px){.hp-pgrid{grid-template-columns:repeat(4,1fr)}}
.hp-pc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:20px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.hp-pc:hover{transform:translateY(-5px);border-color:rgba(41,126,50,.38);
  box-shadow:0 2px 4px rgba(17,24,39,.05), 0 24px 50px -22px rgba(17,24,39,.3)}
.hp-pc-im{position:relative;overflow:hidden;background:var(--m-card)}
.hp-pc-im img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.hp-pc:hover .hp-pc-im img{transform:scale(1.05)}
.hp-pc-kw{position:absolute;left:12px;top:12px;z-index:2;background:#fff;
  border-radius:999px;padding:5px 13px;font-family:var(--b);font-size:11.5px;
  font-weight:700;color:var(--green-dk);box-shadow:0 4px 12px rgba(17,24,39,.18)}
.hp-pc-tx{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.hp-pc-cat{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-dk)}
.hp-pc h3{margin-top:9px;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.hp-pc-loc{display:block;margin-top:5px;font-size:12.5px;color:var(--muted);flex:1}
.hp-pc .hp-pill{margin-top:16px;align-self:flex-start;padding:6px 17px 6px 6px;font-size:13px}
.hp-pc .hp-pill i{width:24px;height:24px}
.hp-pc .hp-pill svg{width:13px;height:13px}

/* =============================================================== PROCESS */
.hp-proc-sec{padding:clamp(44px,4.8vw,64px) 0;background:var(--m-wash)}
.hp-steps{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:660px){.hp-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.hp-steps{grid-template-columns:repeat(4,1fr)}}
.hp-st{background:#fff;border:1px solid var(--m-line);border-radius:20px;padding:26px 24px;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.hp-st:hover{transform:translateY(-4px);box-shadow:0 22px 46px -22px rgba(17,24,39,.3)}
/* #297E32 on the mint chip measured 4.23:1 — one step darker clears AA */
.hp-st b{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:var(--m-card-2);color:var(--green-dkr);font-family:var(--h);font-size:14px;
  font-weight:600;font-variant-numeric:tabular-nums}
.hp-st h3{margin-top:18px;font-size:16.5px;font-weight:600;color:var(--ink)}
.hp-st p{margin-top:9px;font-size:14px;color:var(--muted);line-height:1.6}

/* =================================================================== FAQ */
.hp-faq{padding:clamp(44px,4.8vw,64px) 0;background:#fff}
.hp-faq-grid{display:grid;gap:clamp(28px,4vw,54px);align-items:start}
@media(min-width:940px){.hp-faq-grid{grid-template-columns:1.25fr .75fr}}
.hp-q{background:var(--m-wash);border:1px solid var(--m-line);border-radius:16px;
  margin-bottom:11px;overflow:hidden;transition:background .26s var(--ease)}
.hp-q[open]{background:var(--m-card)}
.hp-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:17px 20px;font-family:var(--h);font-size:15px;font-weight:500;color:var(--ink)}
.hp-q summary::-webkit-details-marker{display:none}
.hp-q summary::after{content:"";margin-left:auto;flex:none;width:26px;height:26px;
  border-radius:50%;background:#fff center/11px 11px no-repeat;border:1px solid var(--m-line);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23297E32' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .3s var(--ease)}
.hp-q[open] summary::after{transform:rotate(180deg)}
/* --muted on the open card's mint measured 4.48:1, a hair under AA */
.hp-q p{padding:0 20px 19px 20px;font-size:14.5px;color:#5C6577;line-height:1.68;max-width:70ch}
/* the reference balances the accordion with a large graphic; ours is a quiet
   mint plate carrying the direct-contact route instead of decorative art */
.hp-faq-side{background:linear-gradient(165deg,var(--m-card),var(--m-card-2));
  border:1px solid var(--m-line);border-radius:22px;padding:28px 26px}
.hp-faq-side h3{font-size:19px;font-weight:500;color:var(--ink)}
.hp-faq-side p{margin-top:10px;font-size:14.5px;color:var(--m-muted);line-height:1.6}
.hp-faq-side .hp-pill{margin-top:20px}
.hp-faq-side a.hp-faq-tel{display:flex;align-items:center;gap:11px;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--m-line);font-size:14.5px;
  font-weight:600;color:var(--ink)}
.hp-faq-side a.hp-faq-tel:hover{color:var(--green-dk)}
.hp-faq-side a.hp-faq-tel svg{width:17px;height:17px;color:var(--green-dk);flex:none}

/* ============================================================== ENQUIRY */
/* The one dark moment on the page, exactly as the reference does it: a deep
   rounded panel sitting on a soft photographic band. */
.hp-enq{position:relative;padding:clamp(44px,4.8vw,64px) 0;background:var(--m-wash);overflow:hidden}
.hp-enq-bg{position:absolute;inset:0;z-index:0}
.hp-enq-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  filter:saturate(.7)}
.hp-enq::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(245,251,246,.94),rgba(245,251,246,.86))}
.hp-enq > .hp-wrap{position:relative;z-index:2}
.hp-enq-panel{background:linear-gradient(158deg,var(--m-deep),var(--m-deep-2) 62%,var(--m-deep-3));
  border-radius:26px;padding:clamp(30px,4vw,52px);color:#fff;position:relative;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(14,26,58,.7)}
.hp-enq-panel::before{content:"";position:absolute;inset:0;
  background:radial-gradient(620px 340px at 88% 8%, rgba(60,180,72,.24), transparent 66%)}
.hp-enq-in{position:relative;z-index:2;display:grid;gap:clamp(26px,3.4vw,48px);align-items:center}
@media(min-width:880px){.hp-enq-in{grid-template-columns:1.05fr .95fr}}
.hp-enq h2{color:#fff;font-size:clamp(26px,3.4vw,38px);margin:0 0 14px;max-width:16ch}
.hp-enq h2 em{color:#8FE39A}
/* measured on the panel's lightest stop with the green bloom on top */
.hp-enq p{color:#C3D8C9;font-size:15.5px;max-width:48ch;line-height:1.65}
.hp-enq-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hp-enq-acts .hp-pill--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.hp-enq-acts .hp-pill--ghost i{background:rgba(255,255,255,.14);color:#fff}
.hp-enq-acts .hp-pill--ghost:hover{background:rgba(255,255,255,.1);color:#fff;
  border-color:rgba(255,255,255,.55)}
/* the credentials list beside the copy */
.hp-enq-list{display:grid;gap:11px}
/* Direct child only — '.hp-enq-list div' also matched the inner text wrapper
   and turned it into a second flex row, putting the label beside its text. */
.hp-enq-list > div{display:flex;align-items:flex-start;gap:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:15px 17px}
.hp-enq-list svg{width:17px;height:17px;color:#8FE39A;flex:none;margin-top:2px}
.hp-enq-list b{display:block;font-family:var(--h);font-size:14.5px;font-weight:500;color:#fff}
/* these sit on a rgba(255,255,255,.07) card, which lifts the backdrop again */
.hp-enq-list span{display:block;margin-top:2px;font-size:12.5px;color:#C9DECF;line-height:1.5}

/* --------------------------------------------------------- motion opt-out */
@media(prefers-reduced-motion:reduce){
  .hp-hero-art figure{animation:none}
  .hp-prod,.hp-cat,.hp-pc,.hp-st,.hp-inst-c,.hp-prod-im img,.hp-pc-im img{transition:none}
}