/** Shopify CDN: Minification failed

Line 346:0 Unexpected "0%"
Line 347:0 Unexpected "50%"
Line 348:0 Unexpected "100%"

**/
/* Argent Gates — ported verbatim from the static site's base.css.
   Layout, type scale, line heights and spacing are UNCHANGED; this is a move.
   @font-face and the :root tokens now live in snippets/css-variables.liquid:
     · fonts must go through {{ 'x.woff2' | asset_url }} (a hardcoded path 404s here)
     · colours must come from theme settings so the merchant can change them
   Change layout in this file. Change colour in Theme settings. */

/* ═══════════════════════════════════════════════════════════
   Base stylesheet. Loaded on every page.

   Rules, read before editing:
   1. Single theme, light. This is a trade site, not an app — there is no dark mode.
      All colour goes through tokens; never hardcode a hex in a page or section.
   2. Anything used by more than one section belongs HERE, not in a section's
      {% stylesheet %} — otherwise deleting that section takes the styles with it.
   ═══════════════════════════════════════════════════════════ */



*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);
  font-size:15.5px;line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.wide{max-width:1480px;margin:0 auto;padding-inline:var(--gut)}

/* ── Type scale ─────────────────────────────────────────── */
.d1{font-family:var(--bebas);font-weight:400;letter-spacing:.015em;line-height:.94;
  font-size:clamp(44px,8.4vw,104px);color:var(--ink);margin:0;text-wrap:balance}
.d2{font-family:var(--bebas);font-weight:400;letter-spacing:.025em;line-height:1;
  font-size:clamp(30px,5vw,54px);color:var(--ink);margin:0;text-wrap:balance}
.d3{font-family:var(--bebas);font-weight:400;letter-spacing:.03em;line-height:1.04;
  font-size:clamp(22px,3vw,32px);color:var(--ink);margin:0}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance}
h3{font-size:17px;font-weight:700;letter-spacing:.01em}
h4{font-size:14px;font-weight:700}
p{margin:0}
.lede{font-size:clamp(16px,1.9vw,19px);line-height:1.7;color:var(--body);max-width:60ch}
.eyebrow{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand)}
.muted{color:var(--sub)}
.code{font-family:var(--mono);font-size:12px;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}

/* ── Buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 24px;
  background:var(--brand);color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--brand);
  border-radius:999px;cursor:pointer;transition:background .3s var(--ease),
  border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand);color:#fff}
.btn.on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.on-dark:hover{background:#fff;color:var(--brand-dark);border-color:#fff}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}

/* Underlined link: the rule sweeps in from the left on hover */
.ul{position:relative;text-decoration:none;padding-bottom:2px;color:var(--ink);font-weight:600}
.ul::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease)}
.ul:hover::after{transform:scaleX(1);transform-origin:left}

/* ── Header: transparent over a dark hero, solid white once scrolled ── */
.nav{position:fixed;inset:0 0 auto;z-index:90;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),height .4s var(--ease)}
.nav.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);height:64px}
.nav .wide{display:flex;align-items:center;gap:22px;width:100%}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand svg{width:26px;height:26px;flex:0 0 auto}
/* Brandmark.
   ⚠ This rule used to be `content:url(../logo-white.webp)`, swapping the mark for a
   flat white one on dark backgrounds. That made sense when the mark was red.
   After the silver rebrand it became a bug: `content` OVERRIDES the <img src>, so the
   per-page silver marks never appeared — every dark page still showed the old flat white.
   The mark now ships in two silver weights chosen per page in Liquid. The only case
   left here is the header turning solid white on scroll, which needs the mid-tone mark. */
.brandmark{width:auto;height:30px;flex:0 0 auto;display:block}.brand b{font-family:var(--bebas);font-size:21px;letter-spacing:.09em;line-height:1;display:block}
.brand i{font-style:normal;font-size:8.5px;letter-spacing:.24em;display:block;opacity:.62;margin-top:1px}
.navlinks{display:flex;gap:clamp(12px,1.7vw,26px);margin-left:auto;align-items:center}
.navlinks a{text-decoration:none;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  white-space:nowrap;position:relative;padding:6px 0;transition:opacity .25s}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease)}
.navlinks a:hover::after,.navlinks a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.navlinks a[aria-current]{color:var(--brand)}
/* Pages with a dark hero get .nav-over: the header starts white-on-image */
.nav-over .nav:not(.solid){color:#fff}
.nav-over .nav:not(.solid) .brand{color:#fff}
.navcta{margin-left:6px}
.foot-addr{display:block;padding:4px 0;color:rgba(255,255,255,.48)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid currentColor;
  background:none;border-radius:50%;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;
  height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(5px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-5px) rotate(-45deg)}

@media(max-width:980px){
  .burger{display:flex}
  .navlinks{position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;gap:0;
    background:var(--paper);padding:14px var(--gut) 26px;margin:0;
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease)}
  .nav.open .navlinks{clip-path:inset(0 0 0 0)}
  .navlinks a{color:var(--ink);font-size:16px;padding:13px 0;width:100%;
    border-bottom:1px solid var(--line)}
  /* The quote button lives OUTSIDE #navlinks in the markup so it stays visible in the
   bar on phones. Inside, clip-path hides it until the menu is opened. */
  .navcta{margin-left:auto;padding:9px 14px;font-size:12px}
  .burger{margin-left:10px}
}

/* ── Footer ────────────────────────────────────────────── */
.foot{background:var(--brand-dark);color:rgba(255,255,255,.72);margin-top:0;
  padding:44px 0 24px;font-size:13.5px}
.foot .cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px 28px}
.foot h4{color:#fff;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:14px;font-weight:700}
.foot a{text-decoration:none;display:block;padding:4px 0;transition:color .25s}
.foot a:hover{color:#fff}
.foot .brand{color:#fff;margin-bottom:14px}
.foot .fine{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:8px 26px;font-size:11.5px;color:rgba(255,255,255,.48)}
@media(max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}}

/* ── Motion ────────────────────────────────────────────── */
/* Scroll reveal. MUST be scoped under .js — otherwise the whole site renders
   blank for anyone without JavaScript. */
.js .rv{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
/* Stagger delays are dl1–dl6, NOT d1–d6. .d1/.d2/.d3 are the display type scale
   above (Bebas, 30–104px). Writing <p class="lede rv d2"> renders body copy as
   54px all-caps Bebas — and since Bebas has no lowercase, the sentence loses its
   capitalisation entirely. This has bitten us before. */
.js .rv.dl1{transition-delay:.08s}.js .rv.dl2{transition-delay:.16s}
.js .rv.dl3{transition-delay:.24s}.js .rv.dl4{transition-delay:.32s}
.js .rv.dl5{transition-delay:.40s}.js .rv.dl6{transition-delay:.48s}

/* Line-drawing stroke. --L is measured per path by site.js. */
.js .dw path,.js .dw line,.js .dw circle,.js .dw rect,
.js .dw polyline,.js .dw polygon,.js .dw ellipse{
  stroke-dasharray:var(--L);stroke-dashoffset:var(--L);
  transition:stroke-dashoffset 1.5s var(--ease)}
.js .dw.drawn path,.js .dw.drawn line,.js .dw.drawn circle,.js .dw.drawn rect,
.js .dw.drawn polyline,.js .dw.drawn polygon,.js .dw.drawn ellipse{stroke-dashoffset:0}
/* <text> inside an SVG inherits the parent stroke and comes out outlined. Kill it. */
.dw text,svg text{stroke:none!important}

/* Per-character rise. site.js splits [data-split] text into <i> elements. */
/* .sw wraps one word. No breaking inside it — the inline-block below makes every
   gap between two letters a legal line-break point, so without this a headline
   splits mid-word. */
.js [data-split] .sw{white-space:nowrap}
.js [data-split] i{display:inline-block;opacity:0;transform:translateY(.7em);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-split].in i{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .js .dw path,.js .dw line,.js .dw circle,.js .dw rect,
  .js .dw polyline,.js .dw polygon,.js .dw ellipse{stroke-dashoffset:0}
  .js [data-split] i{opacity:1;transform:none}
}

/* ── Small shared pieces ───────────────────────────────── */
.sec{padding:clamp(44px,9vw,120px) 0}
.sec-tight{padding:clamp(32px,6vw,76px) 0}
.dark{background:var(--brand-dark);color:rgba(255,255,255,.78)}
.dark h1,.dark h2,.dark h3,.dark h4,.dark .d1,.dark .d2,.dark .d3{color:#fff}
.dark .muted{color:rgba(255,255,255,.6)}
.dark .eyebrow{color:#BABABA}
.tint{background:var(--gray)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* Section heading group: number, heading, note */
/* Number and heading on row one, note ALWAYS on row two.
   This was flex-wrap with .note{flex:1 1 100%}, but max-width:62ch clamps the
   hypothetical main size to about 600px, so a short heading left room and the note
   stayed on the same line — three of five blocks had the note hanging to the right.
   Grid is deterministic: .note simply spans the full row. */
.sh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;
  align-items:baseline;margin-bottom:clamp(26px,4vw,46px)}
.sh .note{grid-column:1/-1}
.sh .k{font-family:var(--bebas);font-size:26px;color:var(--brand);line-height:1;opacity:.6}
/* The note takes a full row. flex:1 1 240px pushes it up beside the heading,
   which is not what was asked for. This lives in base.css so all pages change together. */
.sh .note{font-size:13.5px;color:var(--sub);max-width:62ch;margin-top:10px}

/* Audience accent bands, usable on any page */
.k-con{--k:var(--con);--kt:var(--con-tint)}
.k-dis{--k:var(--dis);--kt:var(--dis-tint)}
.k-own{--k:var(--own);--kt:var(--own-tint)}

/* Placeholder marker: use this where content is genuinely undecided. Never invent content. */
.tbd{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--con);border:1px solid currentColor;padding:1px 7px;
  vertical-align:2px;margin-left:7px}

/* ── Patent seal ────────────────────────────────────────
   Round toothed seal, single colour, follows currentColor.
   The tooth and star paths are computed by 51-patent-seal.py — do not hand-edit;
   28 teeth cannot be spaced evenly by hand. */
.pat-seal{width:100%;height:100%;display:block;overflow:visible}
.pat-seal-edge{fill:currentColor;opacity:.13}
.pat-seal-ring{fill:none;stroke:currentColor;stroke-width:.9;opacity:.55}
.pat-seal-ring2{stroke-width:.55;opacity:.35}
.pat-seal-star{fill:currentColor;opacity:.9}
.pat-seal-t{font-family:var(--mono);font-size:5.6px;font-weight:700;
  letter-spacing:.16em;fill:currentColor;opacity:.82;text-transform:uppercase}
.pat-seal-b{font-size:4.4px;letter-spacing:.1em;opacity:.6}

/* ═══════════════════════════════════════════════════════════
   Product mega-menu. Product lines on the left, that line's series cards on the right.
   Categories live in the menu rather than being spread across the page.
   ═══════════════════════════════════════════════════════════ */
.nd{position:relative;display:inline-flex;align-items:center}
.nd>a{display:inline-flex;align-items:center;gap:5px}
.nd-caret{width:9px;height:6px;transition:transform .3s var(--ease);opacity:.6}
.nd[data-open] .nd-caret{transform:rotate(180deg)}

.nd-panel{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);
  z-index:60;width:min(92vw,940px);
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 26px 60px rgba(20,20,20,.16)}
.nd-panel[hidden]{display:none}
/* An 18px gap sits between trigger and panel; without a transparent bridge the panel flickers shut */
.nd-panel::before{content:"";position:absolute;top:-18px;left:0;width:100%;height:18px}
.js .nd-panel{opacity:0;transform:translateX(-50%) translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.js .nd[data-open] .nd-panel{opacity:1;transform:translateX(-50%) translateY(0)}

.nd-in{display:grid;grid-template-columns:196px minmax(0,1fr);gap:0}
.nd-rail{display:flex;flex-direction:column;gap:6px;padding:18px 14px;
  border-right:1px solid var(--line);background:var(--sunk)}
.nd-line{appearance:none;background:none;border:1px solid transparent;border-radius:5px;
  cursor:pointer;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:11px 13px;color:var(--ink);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;
  transition:background .25s var(--ease),color .25s var(--ease)}
.nd-line svg{width:17px;height:17px;opacity:.6}
.nd-line i{font-style:normal;font-size:10px;letter-spacing:.04em;opacity:.5}
.nd-line:hover{background:var(--brand-tint)}
.nd-line.is-on{background:var(--brand);color:#fff}
.nd-line.is-on svg,.nd-line.is-on i{opacity:.85}

.nd-body{padding:18px 20px 16px}
.nd-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.nd-cards[hidden]{display:none}
.nd-card{display:block;text-decoration:none;color:var(--ink)}
.nd-card-i{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;
  border-radius:4px;background:var(--sunk)}
.nd-card-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.nd-card:hover .nd-card-i img{transform:scale(1.05)}
.nd-card b{display:block;margin-top:9px;font-size:12.5px;font-weight:600}
.nd-card i{display:block;font-style:normal;margin-top:1px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
.nd-card:hover b{color:var(--brand)}
/* Seal sits bottom-right of the cover. Only series that hold a patent get one. */
.nd-seal{position:absolute;right:7px;bottom:7px;width:40px;height:40px;
  color:#fff;filter:drop-shadow(0 1px 3px rgba(20,20,20,.5))}
.nd-foot{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:12px;color:var(--sub)}
.nd-foot a{color:var(--brand);white-space:nowrap}

/* The in-page trust bar uses the same seal */
.pr-trust-s{width:34px;height:34px;flex:0 0 auto;color:var(--brand);display:block}

@media(max-width:900px){
  /* No second-level panel inside the mobile drawer — a panel inside a drawer is
   impossible to hit accurately. The three lines are laid out flat instead. */
  .nd-panel{position:static;transform:none;width:100%;box-shadow:none;border:0;
    background:none}
  .js .nd-panel{opacity:1;transform:none}
  .nd-in{grid-template-columns:1fr}
  .nd-rail{flex-direction:row;flex-wrap:wrap;border-right:0;background:none;padding:8px 0}
  .nd-line{flex:1 1 auto}
  .nd-body,.nd-caret{display:none}
}

/* ── Exits from the three audience pages ─────────────────
   Those pages used to end on WhatsApp and email with no route back into the site,
   while rfq.html?who= (a deep link that pre-selects the audience) was built and unused. */
.dr-next{background:var(--sunk);border-top:1px solid var(--line2)}
.dr-next-in{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(12px,2vw,22px)}
.dr-next-h{margin:0;flex:1 1 16em;font-size:clamp(15px,1.9vw,19px);
  font-weight:600;line-height:1.45;color:var(--ink);letter-spacing:.005em}
.dr-next-b{flex:0 0 auto}
.dr-next-alt{margin:0;flex:1 1 100%;font-size:12.5px;color:var(--sub);
  padding-top:4px}
@media(max-width:640px){
  .dr-next-b{width:100%;justify-content:center}
}

/* == Shared pieces lifted out of the homepage (injected by script 104) ==
   These classes are used by several sections (stagger delays hm-s1..s6, the .sh
   heading group). Putting them in any single section would duplicate them and lose
   them all when that section is removed.
   Source: _assets-pipeline/_css-split/shared.css
   ══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   Homepage.
   Laid out like a drawing: a dark hero, then thin rules dividing each band
   rather than card shadows. All colour comes from the base tokens.

   ⚠ .d1/.d2/.d3 in base.css are BOTH the display type scale and, historically,
     stagger-delay classes. Use dl1-dl6 for stagger. Writing .d2 on body copy
     renders it as 54px all-caps Bebas.
   ═══════════════════════════════════════════════════════════ */

/* Page-local stagger. Do not use d1-d3 - those are the display type scale. */
.js .rv.hm-s1{transition-delay:.09s}
.js .rv.hm-s2{transition-delay:.18s}
.js .rv.hm-s3{transition-delay:.27s}
.js .rv.hm-s4{transition-delay:.36s}
.js .rv.hm-s5{transition-delay:.45s}
0%   {transform:scale(1.06) translateX(-1.6%)}
50%  {transform:scale(1.06) translateX(1.6%)}
100% {transform:scale(1.06) translateX(-1.6%)}
/* ═══ Trust wall ═════════════════════════════════════════ */
.hm-cert .sh .k{color:rgba(255,255,255,.42)}
.hm-cert .sh .note{color:rgba(255,255,255,.6)}
.hm-cs{color:rgba(255,255,255,.95);font-size:14.5px;font-weight:600;letter-spacing:.01em}
.hm-cd{font-size:13px;color:rgba(255,255,255,.58)}
.hm-cn{color:rgba(255,255,255,.44);letter-spacing:.06em;white-space:nowrap}
/* With the decorative 01-05 numbers removed, .sh's first (auto) column is
   empty and the heading gets squeezed into it. These four headings use a
   single column; .sh .note's grid-column:1/-1 still holds. */
.hm-doors .sh,.hm-series .sh,.hm-cases .sh,.hm-cert .sh{
  grid-template-columns:minmax(0,1fr)}
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-50%,0,0)}
.hm-sn{font-family:var(--bebas);font-size:22px;line-height:1;flex:0 0 auto;
  color:rgba(255,255,255,.38)}
.hm-badge{display:none;align-items:center;gap:8px;min-height:46px;padding:0 18px;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.hm-badge.has{display:inline-flex}
.hm-badge b{font-family:var(--mono);color:rgba(255,255,255,.95)}
@media(max-width:1080px){
  .hm-cn{grid-column:1/-1}
}
@media(max-width:640px){
  .hm-cn{white-space:normal}
}
:root{--ts-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z' fill='%23000'/%3E%3C/svg%3E")}

/* == Grid shared across sections (injected by script 105) ==
   hm-grid3 is used by both "Three doors" and "Selected work". Keeping it in only one
   section's stylesheet means the other loses its layout when that section is deleted,
   which is what theme check's ValidScopedCSSClass warns about.
   ====================================================== */
.hm-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
@media(max-width:900px){.hm-grid3{grid-template-columns:minmax(0,1fr)}}

/* ── ported: rating stars ──────────────────────────────────
   The <i> elements are drawn by masking --ts-star over a background colour, so the star
   follows --brand and tracks any palette change. Without these three rules stars.liquid
   emits five empty <i> and the row is invisible — which is exactly what shipped. */
.ts-stars{display:inline-flex;gap:3px;margin-bottom:14px}
.ts-stars i{width:12px;height:12px;background:var(--brand);
  -webkit-mask:var(--ts-star) center/contain no-repeat;
  mask:var(--ts-star) center/contain no-repeat}
.ts-stars i.off{background:var(--line2)}

/* ── ported: closing band ──────────────────────────────────
   The bloom is the only thing lifting this band off flat black. It needs the container to
   be a positioning and clipping context, and .wrap needs a stacking context or the
   pseudo-element paints over the text. */
.hm-cta{position:relative;overflow:hidden}
.hm-cta::after{content:"";position:absolute;inset:auto -10% -60% 40%;height:70%;
  pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.07),transparent 70%)}
.hm-cta .wrap{position:relative;z-index:1}

/* ── ported: richtext wrappers ─────────────────────────
   These wrappers hold a richtext value, which brings its own <p>. The wrapper is a div so
   the paragraphs nest legally; the inner <p> then needs its margins flattened or the
   block gains a blank line the static site never had. */
.note > p:first-child,
.hm-certfoot > p:first-child,
.tm-disc > p:first-child{margin-top:0}
.note > p:last-child,
.hm-certfoot > p:last-child,
.tm-disc > p:last-child{margin-bottom:0}

/* ── Stock templates: clear the fixed header ──────────────
   .nav is fixed at var(--nav-h) and <main> has no offset, so a template that does not open
   with its own hero starts underneath it. The designed pages clear it inside their first
   band; policies, search, 404, cart, product, blog and client-created pages have no such
   band. layout/theme.liquid decides which is which. */
.main--bare{
  padding-block: calc(var(--nav-h) + clamp(24px,4vw,40px)) clamp(48px,8vw,96px);
}
.main--bare > *{ padding-inline: var(--gut); }
.main--bare h1{ margin-top: 0; }