/* =====================================================================
   SYMTRIQ — homepage stylesheet

   Colour strategy: the brand gradient (#F26F21 → #EC1846, lifted from the
   logo artwork) is deliberately RATIONED. Large surfaces are paper, mist,
   sand and navy; the gradient runs at full strength only on small objects —
   badges, buttons, numerals, dots, icon plates. Nothing orange is ever
   bigger than a tile, so the page stays comfortable to sit on.
   ===================================================================== */

/* ---------- 1. Tokens ------------------------------------------------ */
:root {
  --o: #f26f21;
  --r: #ec1846;
  --grad: linear-gradient(135deg, #f26f21 0%, #ec1846 100%);
  --tint: #fdf0e8;
  --tint-line: #f6d9c8;

  --paper: #fbfbfc;
  --mist: #f2f5f7;
  --sand: #f6efe9;
  --rose: #fbedef;
  --navy: #16262f;

  --ink: #0f1a21;
  --slate: #647882;
  --slate-2: #8fa0a9;
  --slate-3: #b9c4ca;
  --line: #e4eaed;
  --line-2: #d3dce1;

  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --pill: 999px;

  --sh-sm: 0 2px 8px rgba(15, 26, 33, .04);
  --sh-md: 0 10px 30px rgba(15, 26, 33, .06);
  --sh-lg: 0 24px 56px rgba(15, 26, 33, .09);

  --wrap: 1600px;
  --gutter: 32px;
  --header-h: 86px;
  --topbar-h: 44px;
  --overlap: 64px;          /* how far the three boxes ride up into the banner */
}

/* ---------- 2. Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Fluid root: body copy resolves to exactly 16px at a 1360px viewport and
   18px at 1920px, and never drops below 16px on anything smaller. Every size
   below is in rem, so the whole scale moves with it. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: clamp(1rem, 0.6964rem + 0.3571vw, 1.125rem);
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }

/* The root of three separate bugs. WordPress writes width and height
   attributes from the attachment, and they act as presentational hints, so
   anything sized by CSS width alone still renders at the attachment's
   height. That stretched the logo in the header, the drawer and the footer,
   and made the about photo 765px tall inside a 540px column. Type-level, so
   the tiles that genuinely want height:100% still win on specificity. */
img { height: auto; }

/* minmax(0, 1fr) lets a grid track shrink below its longest word, so long
   words have to be allowed to break rather than spill out of their card.
   break-word only applies when the word cannot fit as-is. */
h1, h2, h3, h4, p, li, strong, span, a, td, th { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.1rem + 2.9vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 1.45rem + 2.6vw, 3.6rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
h4 { font-size: 1.0625rem; font-weight: 600; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--o); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: 12px 20px; }
.skip-link:focus { left: 0; }

/* ---------- 3. Layout ------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 4.8vw, 96px); position: relative; }
.section--tight { padding-block: clamp(40px, 3.4vw, 62px); }

/* Two untinted bands in a row used to merge into one long field of white.
   A hairline appears only where the grounds actually match, so an editor
   who tints a section still gets a clean colour edge and no stray rule. */
.section:not(.section--mist):not(.section--sand):not(.certband)
  + .section:not(.section--mist):not(.section--sand):not(.certband) {
  border-top: 1px solid var(--line);
}

/* A standalone stats band belongs to the section above it. Left on the
   full rhythm it inherited close to 180px of dead ground and read as an
   unrelated strip floating between two sections. */
.section:has(> * > .stats--standalone) { padding-top: clamp(8px, 1vw, 18px); }
.section:has(> * > .stats--standalone) + .section { border-top: 0; }
.section--mist { background: var(--mist); }
.section--sand { background: var(--sand); }

/* The rule above skips tinted sections, so two mist bands in a row had no
   edge at all. .phero is mist itself, which made a hero and the section
   under it read as one block. Line-2 rather than line: the lighter hairline
   disappears against a tinted ground. */
.section--mist + .section--mist,
.section--sand + .section--sand,
.phero + .section--mist,
.phero + .section--sand { border-top: 1px solid var(--line-2); }

/* ---------- 4. Atoms ------------------------------------------------- */
/* eyebrow: gradient text, uppercase, no brackets */
.marker {
  display: inline-block; font-family: var(--body);
  font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 18px;
}
.marker--light { background: none; -webkit-text-fill-color: rgba(255,255,255,.6); color: rgba(255,255,255,.6); }

/* A highlighted word takes the brand gradient as its own ink rather than
   sitting on a tinted strip. It reads the same on paper, sand, mist and
   navy, so there is no dark variant for an editor to remember, and the
   accent lands on the word itself instead of a block behind it. */
.boxed {
  display: inline;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding: 0;
}

/* On navy the red end of the gradient drops to about 3.4:1. Warming both
   stops keeps the same brand read at better than 5:1. */
.range--wide .boxed, .range--feature .boxed, .fran__pitch .boxed,
.certband .boxed, .ctile--navy .boxed, .stat--navy .boxed, .footer .boxed,
.boxed--dark {
  background: linear-gradient(135deg, #ffa04a 0%, #ff7189 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead { font-size: 1.0625rem; color: var(--slate); max-width: 62ch; }

.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.sec-head__left { display: flex; flex-direction: column; align-items: flex-start; }
.sec-head__left .marker { margin-bottom: 14px; }
.sec-head__title { max-width: 17ch; }
.sec-head__title .sub { display: block; font-size: .6em; font-weight: 400; color: var(--slate-2); letter-spacing: 0; }
.sec-head--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.sec-head--center .sec-head__title { max-width: 22ch; }
.sec-head--center .lead { text-align: center; margin-inline: auto; }

.text-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1rem; color: var(--ink); padding-bottom: 3px; border-bottom: 1.5px solid var(--line-2); transition: color .2s, border-color .2s, gap .2s; }
.text-link:hover { color: var(--r); border-color: var(--r); gap: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: var(--pill);
  font-family: var(--body); font-weight: 600; font-size: 1rem;
  transition: transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s, background .22s, color .22s, border-color .22s;
  white-space: nowrap;
}
.btn svg { flex: none; }
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 10px 26px rgba(236, 24, 70, .20); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(236, 24, 70, .26); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-3px); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.btn--sm { padding: 11px 22px; font-size: 1rem; }
.btn--block { width: 100%; }

.stars { color: var(--o); letter-spacing: 1.5px; font-size: .8125rem; }

/* ---------- 5. Top bar ----------------------------------------------- */
.topbar { background: var(--navy); color: rgba(255, 255, 255, .64); font-size: 1rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; flex-wrap: wrap; }
.topbar__certs { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.topbar__certs li { display: inline-flex; align-items: center; gap: 8px; }
.topbar__certs svg { color: var(--o); flex: none; }
.topbar__contact { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar__contact a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.topbar__contact a:hover { color: #fff; }
.topbar__socials { display: flex; gap: 9px; }
.topbar__socials a { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.09); display: grid; place-items: center; transition: background .2s, color .2s; }
.topbar__socials a:hover { background: var(--grad); color: #fff; }

/* The bar carries four things and only room for so many. Rather than letting
   them wrap into two ragged rows, shed them in order of value: opening hours
   first, then the social row, then the contact labels, then the contact block
   itself. The certification never goes, because it is the reason the bar is
   there. */
@media (max-width: 1180px) {
    .topbar__certs li:not(:first-child) { display: none; } 
    .nav__list > li > a{
            padding: 11px 14px !important;
            font-size: 15px !important;
    }
}
@media (max-width: 900px)  { .topbar__socials { display: none; } }
@media (max-width: 760px)  {
  .topbar__contact a span { display: none; }
  .topbar__contact a { min-width: 26px; min-height: 26px; justify-content: center; }
}
@media (max-width: 520px)  {
  .topbar__contact { display: none; }
  .topbar__inner { justify-content: center; }
}
/* Below about 400 the certification line itself is wider than the viewport.
   Two centred lines is the honest result: shrinking it would drop under the
   type floor, and the line is the reason the bar exists. */
@media (max-width: 400px)  {
  .topbar__certs { justify-content: center; text-align: center; }
}

/* ---------- Section visibility (set per section in the editor) ------- */
@media (min-width: 1025px) { .hide-desktop { display: none !important; } }
@media (min-width: 721px) and (max-width: 1024px) { .hide-tablet { display: none !important; } }
@media (max-width: 720px) { .hide-mobile { display: none !important; } }

/* ---------- 6. Header ------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 251, 252, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s;
}
.header.is-stuck { box-shadow: var(--sh-sm); border-bottom-color: var(--line); }
.header__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand { flex: none; display: flex; align-items: center; gap: 14px; }
/* height:auto is the fix for the stretch: without it the height attribute
   WordPress writes from an uploaded attachment survives, and a logo whose
   proportions differ from the bundled file gets squashed. The width stays
   explicit because the SVGs carry a viewBox and no intrinsic size, and a
   replaced element with no intrinsic width collapses to nothing inside a
   flex row. object-fit catches anything unusually tall. */
.brand img { width: 162px; height: auto; max-height: 48px; object-fit: contain; object-position: left center; }
.brand__by { font-size: 1rem; line-height: 1.3; color: var(--slate-2); border-left: 1px solid var(--line-2); padding-left: 14px; }
.brand__by strong { display: block; color: var(--ink); font-weight: 600; }

.nav { justify-self: center; }
.nav > .nav { display: contents; }   /* a container="nav" wrapper inside our own */
.nav__list { display: flex; align-items: center; gap: 4px; }

/* Top level. Works for li.nav__item > a.nav__link and for WordPress's plain
   li.menu-item > a alike. */
.nav__list > li { position: relative; list-style: none; }
.nav__list > li > a {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px; border-radius: var(--pill);
  font-weight: 500; font-size: 1rem; color: var(--slate);
  transition: color .2s, background .2s;
}
.nav__list > li > a:hover,
.nav__list > li:focus-within > a { color: var(--ink); background: var(--mist); }

/* Current page: WordPress sets the classes, our walker sets the attribute. */
.nav__list > li > a[aria-current="page"],
.nav__list > li.current-menu-item > a,
.nav__list > li.current_page_item > a,
.nav__list > li.current-menu-ancestor > a { color: var(--ink); font-weight: 600; }

/* a small gradient dot marks the current page */
.nav__list > li > a[aria-current="page"]::after,
.nav__list > li.current-menu-item > a::after,
.nav__list > li.current_page_item > a::after,
.nav__list > li.current-menu-ancestor > a::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--grad);
}

/* Caret. Our walker prints an SVG; the default menu prints nothing, so a
   parent without one gets a pseudo-element chevron instead. */
.nav__caret { transition: transform .25s; }
.nav__list > li:hover .nav__caret,
.nav__list > li:focus-within .nav__caret { transform: rotate(180deg); }
.nav__list > li.menu-item-has-children > a:not(:has(.nav__caret))::before {
  content: ""; order: 2;
  width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s;
}
.nav__list > li.menu-item-has-children:hover > a:not(:has(.nav__caret))::before,
.nav__list > li.menu-item-has-children:focus-within > a:not(:has(.nav__caret))::before {
  transform: translateY(1px) rotate(-135deg);
}

/* A parent that links to "#" is a hover target, not a destination. Dropping
   its pointer events stops a click jumping to the top of the page; focus is
   untouched, so the keyboard path still works. */
.nav__list > li.menu-item-has-children > a[href="#"],
.nav__list > li.menu-item-has-children > a[href=""] { pointer-events: none; }

/* The panel. .dropdown is ours, .sub-menu is WordPress's. */
.nav__item--has-menu, .nav__list > li.menu-item-has-children { position: relative; }
.dropdown,
.nav__list > li > .sub-menu {
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 300px; padding: 12px; margin: 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s, transform .22s, visibility .22s;
  z-index: 40; list-style: none;
}
.dropdown--wide { min-width: 480px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; }

/* Hover keeps it usable without JavaScript; .is-open is the click and
   keyboard path. The gap above the panel would break a hover journey, so a
   transparent bridge covers it. */
.nav__list > li.menu-item-has-children::after,
.nav__item--has-menu::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}
.nav__item--has-menu:hover .dropdown,
.nav__item--has-menu:focus-within .dropdown,
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown a,
.nav__list > li > .sub-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; border-radius: var(--r-sm);
  font-size: 1rem; font-weight: 500; color: var(--ink);
  transition: background .2s;
}
.dropdown a:hover,
.nav__list > li > .sub-menu a:hover { background: var(--mist); }
.nav__list > li > .sub-menu li { list-style: none; }
.nav__list > li > .sub-menu .current-menu-item > a { background: var(--mist); color: var(--r); }
.dropdown .ico { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--tint); color: var(--r); display: grid; place-items: center; }
.dropdown .meta { display: block; font-size: 1rem; font-weight: 400; color: var(--slate-2); }

.header__actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line); background: #fff; transition: color .2s, border-color .2s, transform .2s; position: relative; }
.icon-btn:hover { border-color: var(--line-2); transform: translateY(-2px); }
.burger { display: none; }

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); z-index: 130;
  background: #fff; padding: 26px 24px 40px;
  transform: translateX(100%); transition: transform .38s cubic-bezier(.5,0,.2,1);
  overflow-y: auto; box-shadow: -20px 0 60px rgba(15,26,33,.16);
  display: flex; flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.drawer__head img { width: 150px; height: auto; max-height: 46px; object-fit: contain; object-position: left center; }

/* Every logo slot at once. An uploaded logo carries the attachment's own
   width and height attributes, and a slot that sets only the width lets
   that height through, which stretches the image. This is the backstop for
   any slot added later. */
.symtriq-logo, .brand img, .drawer__head img, .footer__brand img { height: auto; }

/* minmax(0, 1fr) lets a grid track shrink below its longest word, so long
   words have to be allowed to break rather than spill out of their card.
   break-word only applies when the word cannot fit as-is. */
h1, h2, h3, h4, p, li, strong, span, a, td, th { overflow-wrap: break-word; }
.drawer__list > li { border-bottom: 1px solid var(--line); }
.drawer__list > li > a, .drawer__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 2px; font-family: var(--display); font-weight: 600; font-size: 1.0625rem; color: var(--ink); text-align: left; }

/* A parent row needs the chevron the walker used to print as an SVG. Drawn
   here instead, so the default WordPress markup looks the same. */
.drawer__list > li.menu-item-has-children > a::after {
  content: ""; flex: none;
  width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s;
}
.drawer__list > li.menu-item-has-children.is-open > a::after { transform: translateY(1px) rotate(-135deg); }

.drawer__sub, .drawer__list .sub-menu { display: none; padding: 0 0 12px 12px; margin: 0; list-style: none; }
.drawer__sub.is-open, .drawer__list > li.is-open > .sub-menu { display: block; }
.drawer__sub a, .drawer__list .sub-menu a { font-family: var(--body); font-size: 1rem; font-weight: 400; color: var(--slate); padding: 9px 2px; display: flex; }
.drawer__list .sub-menu li { border: 0; }
.drawer__foot { margin-top: 26px; display: grid; gap: 14px; }
.drawer__foot .contact { font-size: 1rem; }
.drawer__foot .contact strong { display: block; color: var(--ink); }
.scrim { position: fixed; inset: 0; z-index: 120; background: rgba(15,26,33,.45); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.scrim.is-open { opacity: 1; visibility: visible; }

/* ---------- 7. Banner — one bento composition ------------------------ */
/* Every element in the banner is a tile on a shared grid: nothing floats and
   nothing is left orphaned in dead space. The banner sits on a tinted ground
   so the three white cards below straddle its bottom edge. */
/* the banner is sized to the display: one screen minus the bars above it */
.hero {
  min-height: calc(100svh - var(--header-h) - var(--topbar-h));
  display: flex; align-items: center;
  padding-block: clamp(60px, 4vw, 72px) calc(var(--overlap) + clamp(60px, 4vw, 72px));
  background:
    radial-gradient(900px 540px at 88% 0%, #fdece2 0%, rgba(253, 236, 226, 0) 62%),
    radial-gradient(780px 520px at 2% 94%, #eaf2f6 0%, rgba(234, 242, 246, 0) 60%),
    var(--mist);
}
.hero { position: relative; overflow: hidden; }
.hero > .wrap { width: 100%; position: relative; z-index: 1; }
/* floating medicine line icons — decorative banner background */
.hero__float { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* every floating icon: a true 1px hairline at full brightness, no dimming */
.hero__float .fi * { vector-effect: non-scaling-stroke; }
.hero__float .fi { position: absolute; opacity: 1; animation-name: floatIcon; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes floatIcon {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-20px) rotate(var(--rot, 0deg)); }
}
.hero__bento {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.hero__left, .hero__right { display: grid; gap: 18px; }
.hero__left { position: relative; align-content: space-between; }
/* both columns stretch to the same height: the left row of tiles and the
   product tile each absorb whatever slack is left over */
.hero__right { grid-template-rows: 1fr auto; }

/* the copy now owns the full column width, so the headline can scale up */
.hero__copy { max-width: 100%; }
.hero .marker { margin-bottom: 12px; }
.hero h1 { margin-bottom: 12px; }
.hero__lead { font-size: 1rem; max-width: 46ch; margin-bottom: 18px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }



.tile { border-radius: var(--r-lg); overflow: hidden; position: relative; }


/* a few category shortcuts, inline and unboxed — creative, not a component */
.hero__cats { position: relative; z-index: 1; flex: 1 1 auto; }
.hero__cats .label { display: block; font-size: 1rem; font-weight: 600; color: var(--slate-2); margin-bottom: 10px; }
.hero__cats-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__cats-list a {
  padding: 8px 15px; border-radius: var(--pill);
  background: var(--mist); border: 1px solid transparent;
  font-size: 1rem; font-weight: 500; color: var(--slate);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.hero__cats-list a:hover { border-color: var(--tint-line); background: var(--tint); color: var(--r); transform: translateY(-2px); }
.hero__cats-list a.all { background: var(--ink); color: #fff; }
.hero__cats-list a.all:hover { background: var(--grad); color: #fff; }

/* Continuous-line illustration — outline only, drawn on once when the banner
   loads. pathLength="1" on every shape normalises the dash maths so one
   keyframe works for ellipses, rects and paths alike. Banner only. */
/* decorative only — sits beside the headline, as in the reference design,
   and is absolutely placed so it never occupies layout space */
/* bottom row: category chips on the left, drawing on the right, both sitting
   on the column floor so no empty band opens above or below the artwork */
/* chips tuck up under the buttons; the drawing is taller and defines the row,
   so leftover height falls beside the artwork instead of above the chips */
.hero__bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.hero__art { flex: 0 0 auto; width: min(46%, 400px); height: auto; pointer-events: none; animation: artFloat 12s ease-in-out infinite; }
@keyframes artFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
/* keep the line weight constant no matter how far the drawing scales down */
.hero__art [data-draw] { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.05s cubic-bezier(.45, 0, .25, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__art .g1 [data-draw] { animation-delay: .15s; }
.hero__art .g2 [data-draw] { animation-delay: .55s; }
.hero__art .g3 [data-draw] { animation-delay: .85s; }
.hero__art .g4 [data-draw] { animation-delay: 1.05s; }
.hero__art .g5 [data-draw] { animation-delay: 1.3s; }
.hero__art .g6 [data-draw] { animation-delay: 1.6s; }

.tile--product { background: var(--sand); min-height: 250px; }
.tile--product img { width: 100%; height: 100%; object-fit: cover; }
.tile--product .flag { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--grad); color: #fff; padding: 7px 14px; border-radius: var(--pill); font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.tile--product .caption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile--product .caption strong { display: block; font-family: var(--display); font-size: 1.0625rem; color: var(--ink); letter-spacing: 0; }
.tile--product .caption span { font-size: 1rem; color: var(--slate-2); }
.tile--product .caption .go { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--ink); color: #fff; display: grid; place-items: center; transition: background .25s; }
.tile--product:hover .caption .go { background: var(--grad); }

/* both stat tiles get the same weight so they read as a matched pair */
.hero__stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.tile--stat { padding: 22px 22px 20px; min-height: 146px; display: flex; flex-direction: column; }
.tile--stat.is-navy { background: var(--navy); color: rgba(255,255,255,.62); }
.tile--stat.is-line { background: #fff; border: 1px solid var(--line); color: var(--slate); }
.tile--stat .num { font-family: var(--display); font-weight: 600; letter-spacing: 0; line-height: 1; font-size: clamp(2.1rem, 1.5rem + 1.9vw, 2.9rem); margin-bottom: auto; display: flex; align-items: baseline; }
.tile--stat.is-navy .num { color: #fff; }
.tile--stat.is-line .num { color: var(--ink); }
.tile--stat .num .suffix { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tile--stat strong { display: block; font-size: 1rem; margin-top: 16px; margin-bottom: 3px; }
.tile--stat.is-navy strong { color: #fff; }
.tile--stat.is-line strong { color: var(--ink); }
.tile--stat p { font-size: 1rem; line-height: 1.5; }

/* ---------- 8. Trio panel (straddles the banner edge) ---------------- */
/* One continuous panel divided by hairlines — deliberately not three
   free-floating cards with arrow buttons. */
.boxes-band { position: relative; z-index: 5; margin-top: calc(-1 * var(--overlap)); }
.trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #fff; border-radius: var(--r-xl);
  box-shadow: 0 30px 70px rgba(15, 26, 33, .10), 0 2px 6px rgba(15, 26, 33, .04);
  overflow: hidden;
}
.trio__item {
  position: relative; isolation: isolate;
  padding: 46px 42px 40px;
  display: flex; flex-direction: column;
  transition: background .35s ease;
}
/* hairline between columns */
.trio__item + .trio__item::after {
  content: ""; position: absolute; left: 0; top: 34px; bottom: 34px;
  width: 1px; background: var(--line);
}
/* accent rule draws across the top of the hovered column */
.trio__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.trio__item:hover { background: linear-gradient(180deg, var(--tint) 0%, #fff 64%); }
.trio__item:hover::before { transform: scaleX(1); }

.trio__ico {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 26px;
  color: var(--r); background: var(--mist);
  transition: background .35s, color .35s, transform .35s cubic-bezier(.34, 1.4, .64, 1);
}
.trio__item:hover .trio__ico { background: var(--grad); color: #fff; transform: translateY(-4px); }

.trio__item h3 { font-size: 1.4rem; margin-bottom: 10px; }
.trio__item p { font-size: 1rem; margin-bottom: 26px; max-width: 30ch; }
.trio__go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 1rem; color: var(--ink);
  transition: color .25s;
}
.trio__go svg { transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); }
.trio__item:hover .trio__go { color: var(--r); }
.trio__item:hover .trio__go svg { transform: translateX(6px); }

/* ---------- 9. About us ---------------------------------------------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.about__media { position: relative; }
.about__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r-xl); }
.about__play {
  position: absolute; inset: 0; margin: auto;
  width: 78px; height: 78px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--r);
  display: grid; place-items: center;
  box-shadow: var(--sh-lg); transition: transform .25s, background .25s, color .25s;
}
.about__play:hover { transform: scale(1.08); background: var(--grad); color: #fff; }
.about__play::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.6); animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.about__points { display: grid; gap: 14px; margin: 28px 0 32px; }
.about__points li { display: flex; gap: 12px; font-size: 1rem; }
/* A plain requirements list reads better two-up than as one long column. */
.about__points--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; max-width: 62rem; }
@media (max-width: 720px) { .about__points--two { grid-template-columns: minmax(0, 1fr); } }
.about__points svg { flex: none; color: var(--r); margin-top: 4px; }

/* Stats as solid colour blocks, following the reference's treatment
   rather than a plain row of numbers on white. */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin-top: clamp(48px, 5vw, 76px);
}
.stat {
  border-radius: var(--r-lg); padding: 34px 30px 30px;
  display: flex; flex-direction: column; min-height: 224px;
  transition: transform .3s cubic-bezier(.34, 1.3, .64, 1);
}
.stat:hover { transform: translateY(-6px); }
.stat--navy { background: var(--navy); color: rgba(255, 255, 255, .6); }
.stat--sand { background: var(--sand); color: var(--slate); }
.stat--mist { background: var(--mist); color: var(--slate); }
.stat--line { background: #fff; border: 1px solid var(--line); color: var(--slate); }
.stat__num {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 1.6rem + 2.3vw, 3.6rem);
  letter-spacing: 0; line-height: 1;
  margin-bottom: auto; color: var(--ink);
  display: flex; align-items: baseline;
}
.stat--navy .stat__num { color: #fff; }
.stat__num .suffix { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat strong {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: 0;
  color: var(--ink); margin: 20px 0 7px;
}
.stat--navy strong { color: #fff; }
.stat__note { font-size: 1rem; line-height: 1.55; }

/* ---------- 10. Product range ---------------------------------------- */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.cat {
  position: relative; overflow: hidden;
  padding: 34px 30px 30px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 236px;
  transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s, border-color .3s;
}
.cat:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.cat__ico { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: var(--mist); color: var(--r); margin-bottom: auto; transition: background .3s, color .3s; }
.cat__ico svg { width: 28px; height: 28px; }
.cat:hover .cat__ico { background: var(--grad); color: #fff; }
.cat h3 { font-size: 1.375rem; margin: 26px 0 8px; letter-spacing: 0; }
.cat span { font-size: 1rem; color: var(--slate-2); transition: color .2s; }
.cat:hover span { color: var(--r); }
/* the last tile in the range grid is a call to action, not a category */
.cat--all { background: var(--navy); border-color: transparent; }
.cat--all h3 { color: #fff; }
.cat--all span { color: rgba(255,255,255,.6); }
.cat--all .cat__ico { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- 11. Why choose us ---------------------------------------- */
.why__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.why__media { position: relative; }
.why__media > img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--r-xl); }
.why__badge { position: absolute; right: -18px; bottom: 34px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 20px 24px; text-align: center; min-width: 168px; }
.why__badge .num { font-family: var(--display); font-size: 2.2rem; font-weight: 600; letter-spacing: 0; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.why__badge span { font-size: 1rem; display: block; margin-top: 6px; }

.why__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 44px; margin-top: 34px; }
.why__item { display: flex; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line); }
.why__item:nth-child(1), .why__item:nth-child(2) { border-top: 0; padding-top: 0; }
.why__ico { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--tint); color: var(--r); }
.why__item h4 { font-size: 1.125rem; margin-bottom: 9px; }
.why__item p { font-size: 1rem; line-height: 1.6; }

/* ---------- 12. Services — numbered grid ----------------------------- */
.ranges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.range {
  position: relative; overflow: hidden;
  padding: 30px 28px 26px;
  border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s, border-color .3s;
}
.range:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--line-2); }
/* Solid numeral, sized and positioned so it never collides with the title
   below it or gets clipped by the card's overflow. */
.range__num {
  position: absolute; top: 20px; right: 26px;
  font-family: var(--display); font-size: 3.25rem; font-weight: 700;
  line-height: .9; letter-spacing: 0;
  color: var(--slate-3);
  transition: color .3s;
  pointer-events: none;
}
.range:hover .range__num { color: var(--r); }
.range__ico { color: var(--r); margin-bottom: 28px; }
.range__title { font-family: var(--display); font-size: 1.1875rem; font-weight: 600; color: var(--ink); letter-spacing: 0; margin: 0 0 10px; }
.range p { font-size: 1rem; line-height: 1.62; margin-bottom: 20px; max-width: 34ch; }
.range__links { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.range__links a { font-size: 1rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.range__links a:hover { color: var(--r); border-color: var(--r); }
.range__links .muted { color: var(--slate-2); font-weight: 400; border-bottom-color: transparent; }

/* the one card that carries full-strength gradient */
.range--feature { background: var(--grad); border-color: transparent; color: rgba(255,255,255,.84); }
.range--feature::before { content: ""; position: absolute; inset: 0; background: radial-gradient(180px 180px at 80% 20%, rgba(255,255,255,.20), transparent 70%); }
.range--feature > * { position: relative; z-index: 1; }
.range--feature .range__brand { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: #fff; letter-spacing: 0; margin-bottom: 10px; }
.range--feature p { color: rgba(255,255,255,.9); font-size: 1rem; }
.range--feature .range__links { border-top-color: rgba(255,255,255,.26); }
.range--feature .range__links a { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.range--feature .range__helix { position: absolute; right: -32px; bottom: -32px; width: 190px; opacity: .2; z-index: 0; }

/* The image is absolutely positioned so it fills the tile without dictating the
   grid row height — otherwise a tall source photo stretches the whole row and
   leaves a void inside the neighbouring card. */
.range--photo { padding: 0; grid-column: span 3; min-height: 240px; border-color: transparent; }
.range--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.range--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(15,26,33,0) 46%, rgba(15,26,33,.74) 100%); }
.range--photo .cap { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 2; color: #fff; }
.range--photo .cap strong { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0; }
.range--photo .cap span { font-size: 1rem; color: rgba(255,255,255,.76); }

/* ---------- 13. Pharma franchise — bento ----------------------------- */
/* A navy pitch tile and a tall photo on the top row, with the partner kit
   broken out into five tiles beneath. */
.fran {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: 20px;
}

.fran__pitch {
  position: relative; overflow: hidden;
  background: var(--navy); color: rgba(255, 255, 255, .66);
  border-radius: var(--r-xl);
  padding: clamp(34px, 3.4vw, 62px);
  display: flex; flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.fran__pitch::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(420px 300px at 92% 4%, rgba(242, 111, 33, .22), transparent 62%),
    radial-gradient(360px 280px at 4% 100%, rgba(236, 24, 70, .16), transparent 60%);
}
.fran__pitch > * { position: relative; z-index: 1; }
.fran__pitch h2 { color: #fff; margin-bottom: 16px; }
.fran__lead { font-size: 1.0625rem; max-width: 46ch; }
.fran__points { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 30px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .13); }
.fran__points li { display: flex; align-items: center; gap: 11px; font-size: 1rem; color: rgba(255, 255, 255, .82); }
.fran__points svg { color: var(--o); flex: none; }
.fran__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: auto; padding-top: clamp(28px, 2.8vw, 42px); }
.fran__deck { color: #fff; border-bottom-color: rgba(255, 255, 255, .32); }
.fran__deck:hover { color: #fff; border-bottom-color: #fff; }
.fran__mark { position: absolute; right: -46px; bottom: -46px; width: 240px; opacity: .07; z-index: 0; }

/* the highlight needs to read on a dark ground */


.fran__photo {
  grid-row: span 2; box-shadow: var(--sh-md);
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); background: var(--mist);
  min-height: 440px;
}
.fran__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fran__badge {
  position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2;
  background: rgba(15, 26, 33, .70); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg); padding: 22px 24px;
  color: rgba(255, 255, 255, .74);
}
.fran__badge strong {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 1.35rem; letter-spacing: 0; color: #fff; margin-bottom: 7px;
}
.fran__badge p { font-size: 1rem; line-height: 1.55; }

.fran__kit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fran__item {
  background: var(--mist); border: 1px solid transparent; border-radius: var(--r-lg);
  padding: 28px 24px 26px;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .3s cubic-bezier(.34, 1.3, .64, 1), box-shadow .3s, border-color .3s;
}
.fran__item:hover { transform: translateY(-6px); background: #fff; box-shadow: var(--sh-md); border-color: var(--line); }
.fran__ico {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--r);
  transition: background .3s, color .3s;
}
.fran__item:hover .fran__ico { background: var(--grad); color: #fff; }
.fran__item strong {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  color: var(--ink); letter-spacing: 0; line-height: 1.3;
}

/* ---------- 14. Product cards ---------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; }
.tab { padding: 10px 22px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; font-weight: 500; font-size: 1rem; color: var(--slate); transition: all .22s; }
.tab:hover { border-color: var(--line-2); color: var(--ink); }
.tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.product { display: flex; flex-direction: column; }
.product.is-hidden { display: none; }
.product__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--mist); border-radius: var(--r-lg); }
.product:nth-child(4n+2) .product__media { background: var(--sand); }
.product:nth-child(4n+3) .product__media { background: var(--rose); }
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.3,0,.2,1); }
.product:hover .product__media img { transform: scale(1.06); }
.product__badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 12px; border-radius: var(--pill); font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: var(--grad); color: #fff; }
.product__badge--rx { background: var(--ink); }
.product__badge--new { background: #0f7a45; }
.product__quick { position: absolute; inset: auto 0 0; z-index: 2; display: flex; gap: 8px; justify-content: center; padding: 14px; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.product:hover .product__quick { opacity: 1; transform: translateY(0); }
.product__quick button { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: var(--sh-md); transition: background .2s, color .2s, transform .2s; }
.product__quick button:hover { background: var(--grad); color: #fff; transform: translateY(-3px); }
.product__body { padding: 18px 2px 0; display: flex; flex-direction: column; flex: 1; }
.product__cat { font-size: 1rem; font-weight: 600; color: var(--slate-2); margin-bottom: 6px; }
.product h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 7px; }
.product__form { font-size: 1rem; color: var(--slate-2); margin-bottom: 14px; }
.product__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product__add { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 600; color: var(--ink); border-bottom: 1.5px solid var(--line-2); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.product__add:hover { color: var(--r); border-color: var(--r); }
.products__more { display: flex; justify-content: center; margin-top: 48px; }

/* ---------- 15. Testimonials ----------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.quote { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s, border-color .3s; }
.quote:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.quote .stars { margin-bottom: 16px; }
.quote p { font-size: 1rem; color: var(--ink); margin-bottom: 24px; }
.quote__by { margin-top: auto; display: flex; align-items: center; gap: 13px; padding-top: 20px; border-top: 1px solid var(--line); }
.quote__av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 600; font-size: 1rem; background: var(--navy); }
.quote:nth-child(2) .quote__av { background: var(--grad); }
.quote__by strong { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; }
.quote__by span { font-size: 1rem; color: var(--slate-2); }

/* ---------- 16. Blogs ------------------------------------------------ */
.posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.post { display: flex; flex-direction: column; }
.post__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--mist); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.3,0,.2,1); }
.post:hover .post__media img { transform: scale(1.06); }
.post__body { padding: 18px 2px 0; display: flex; flex-direction: column; flex: 1; }
.post__meta { display: flex; gap: 14px; font-size: 1rem; color: var(--slate-2); margin-bottom: 10px; }
.post__meta .tag { color: var(--r); font-weight: 600; }
.post h3 { font-size: 1.0625rem; line-height: 1.32; margin-bottom: 18px; }
.post .text-link { margin-top: auto; align-self: flex-start; }

/* ---------- 17. Subscribe -------------------------------------------- */
.cta-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: clamp(24px, 2.6vw, 44px);
  /* soft mesh — brand hues at low saturation, never a solid orange field */
  background:
    radial-gradient(600px 420px at 6% 12%, #ffd9c4 0%, rgba(255,217,196,0) 62%),
    radial-gradient(560px 420px at 92% 20%, #ffd2dc 0%, rgba(255,210,220,0) 60%),
    radial-gradient(620px 460px at 60% 108%, #d9e8ef 0%, rgba(217,232,239,0) 62%),
    var(--sand);
}
.cta-card__inner { background: #fff; border-radius: var(--r-lg); padding: clamp(32px, 3.4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 44px; align-items: center; }
.cta-card h2 { margin-bottom: 12px; }
.subscribe { display: flex; gap: 10px; background: var(--mist); padding: 7px; border-radius: var(--pill); }
.subscribe input { flex: 1; min-width: 0; border: 0; background: none; padding: 13px 20px; font: inherit; font-size: 1rem; color: var(--ink); }
.subscribe input::placeholder { color: var(--slate-2); }
.subscribe input:focus { outline: none; }
.subscribe .btn { flex: none; }
.cta-note { font-size: 1rem; color: var(--slate-2); margin-top: 14px; display: flex; align-items: center; gap: 8px; }

/* ---------- 18. Footer ----------------------------------------------- */
/* Layered close: call to action, then columns, then a trust strip, then the
   legal line — each separated by a hairline so the block reads as sections
   rather than one flat slab. */
.footer { background: var(--navy); color: rgba(255, 255, 255, .56); position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 4% 0%, rgba(242, 111, 33, .15), transparent 58%),
    radial-gradient(620px 380px at 96% 8%, rgba(236, 24, 70, .10), transparent 56%);
}
.footer .wrap { position: relative; z-index: 1; }

/* -- closing CTA -- */
.footer__cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px 40px; flex-wrap: wrap;
  padding-block: clamp(38px, 3.8vw, 58px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer__cta h3 { color: #fff; font-size: clamp(1.35rem, 1rem + 1.3vw, 1.9rem); margin-bottom: 8px; }
.footer__cta p { font-size: 1rem; max-width: 52ch; }
.footer__cta-actions { display: flex; align-items: center; gap: 16px 26px; flex-wrap: wrap; }
.footer__phone {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem;
  color: #fff; letter-spacing: 0; transition: opacity .2s;
}
.footer__phone svg { color: var(--o); flex: none; }
.footer__phone:hover { opacity: .82; }

/* -- columns -- */
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1.25fr);
  gap: 56px; padding-block: clamp(48px, 4.8vw, 72px);
}
.footer__brand img { width: 178px; height: auto; max-height: 56px; object-fit: contain; object-position: left center; margin-bottom: 22px; }
.footer__brand p { font-size: 1rem; max-width: 42ch; margin-bottom: 26px; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  display: grid; place-items: center;
  transition: background .25s, color .25s, transform .25s;
}
.footer__socials a:hover { background: var(--grad); color: #fff; transform: translateY(-3px); }

.footer h4 {
  color: #fff; font-size: .8125rem; font-family: var(--body);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 22px;
}
.footer__links { display: grid; gap: 13px; }
.footer__links a { font-size: 1rem; transition: color .2s, padding-left .2s; }
.footer__links a:hover { color: #fff; padding-left: 5px; }

.footer__contact { display: grid; gap: 20px; }
.footer__contact li { display: flex; gap: 14px; font-size: 1rem; line-height: 1.55; }
.footer__contact .ico {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: rgba(255, 255, 255, .07); color: var(--o);
  display: grid; place-items: center;
}
.footer__contact strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.footer__contact a:hover { color: #fff; }

/* -- trust strip -- */
.footer__certs {
  display: flex; flex-wrap: wrap; gap: 14px 44px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 1rem;
}
.footer__certs li { display: inline-flex; align-items: center; gap: 10px; }
.footer__certs svg { color: var(--o); flex: none; }

.disclaimer {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 22px; font-size: 1rem; line-height: 1.7;
  color: rgba(255, 255, 255, .38); margin: 0;
}
.disclaimer strong { color: rgba(255, 255, 255, .62); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 24px; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
}
.footer__totop { display: inline-flex; align-items: center; gap: 9px; transition: color .2s; }
.footer__totop:hover { color: #fff; }

/* ---------- 19. Floating actions ------------------------------------- */
.float-actions { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: grid; gap: 12px; justify-items: center; }
.fab { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--sh-lg); transition: transform .25s, background .25s; }
.fab--wa { background: #25d366; color: #fff; }
.fab--wa:hover { transform: translateY(-4px) scale(1.05); }
.to-top { background: var(--ink); color: #fff; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s, transform .3s, visibility .3s, background .25s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--grad); transform: translateY(-4px); }

/* ---------- 20. Scroll reveal ---------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.6,.3,1), transform .7s cubic-bezier(.2,.6,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 21. Responsive ------------------------------------------- */
@media (max-width: 1280px) {
  .fran__kit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand img { width: 148px; }
  .brand__by { display: none; }
  .nav__link { padding: 10px 10px; font-size: 1rem; }
  .header__inner { gap: 16px; }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about__grid, .why__grid { gap: 44px; }
}

@media (max-width: 1024px) {
  :root { --header-h: 74px; --gutter: 24px; --overlap: 56px; }
  .nav, .header__cta { display: none; }
  .burger { display: grid; }
  .header__inner { grid-template-columns: auto minmax(0, 1fr); }
  .hero__bento { grid-template-columns: minmax(0, 1fr); }
  .hero__left, .hero__right { grid-template-rows: auto auto; }
  .hero { min-height: 0; display: block; }
  /* pull the float layer inward so no icon is clipped at the screen edge */
  .hero__float { right: 15%; }
  .hero__bottom { flex-direction: column; align-items: stretch; gap: 22px; }
  .hero__art { width: min(100%, 320px); margin: 0 auto; }
  .hero__copy { max-width: none; }
  .hero__copy { padding-right: 0; }
  .hero__lead { max-width: 60ch; }
  .tile--product { min-height: 340px; }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio__item { padding: 34px 30px 30px; }
  .trio__item + .trio__item::after { left: 30px; right: 30px; top: 0; bottom: auto; width: auto; height: 1px; }
  .about__grid, .why__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .fran { grid-template-columns: minmax(0, 1fr); }
  .fran__photo { grid-row: auto; min-height: 340px; }
  .fran__kit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Single column here, so a left-aligned 540px photo left a ragged gap
     down the right of the section. Centred, and squarer, since a portrait
     crop is far too tall once it has the full column to itself. */
  .about__media, .why__media { max-width: 640px; margin-inline: auto; }
  .about__media img, .why__media > img { aspect-ratio: 16 / 10; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; }
  .ranges, .products, .quotes, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range--photo { grid-column: span 2; }
  .cta-card__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
  .footer__brand { grid-column: span 2; }
  .footer__cta { flex-direction: column; align-items: flex-start; }
  .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
  .sec-head__title { max-width: 22ch; }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; --overlap: 0px; }
  .hero__stats { grid-template-columns: minmax(0, 1fr); }
  .hero__actions .btn { width: 100%; }
  .tile--stat { min-height: 0; }
  .cats, .ranges, .products, .quotes, .posts { grid-template-columns: minmax(0, 1fr); }
  /* min-height 240 from the base rule plus a 4:3 ratio resolves to a 320px
     width, which ignores the grid track and pushed the page sideways. The
     ratio is the one doing the sizing here, so the floor goes. */
  .range--photo { grid-column: span 1; aspect-ratio: 4 / 3; min-height: 0; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { min-height: 0; padding: 28px 26px 26px; }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .footer__brand { grid-column: auto; }
  .footer__certs { gap: 12px 24px; }
  .footer__cta-actions { width: 100%; }
  .footer__cta-actions .btn { width: 100%; }
  .why__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .why__item:nth-child(2) { border-top: 1px solid var(--line); padding-top: 18px; }
  .why__badge { position: static; margin-top: 16px; max-width: none; }
  .fran__kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Two columns leaves about 82px of label at 320, and the longest word needs
   113px. One per row is the honest answer on a narrow phone. */
@media (max-width: 480px) {
  .fran__kit { grid-template-columns: minmax(0, 1fr); }
  .subscribe { flex-direction: column; border-radius: var(--r-lg); }
  .subscribe .btn { width: 100%; }
}


/* =====================================================================
   22. INNER PAGES — page hero, filters, forms, contact tiles
   Uses the same tokens as the homepage; nothing here overrides the
   banner or any homepage component.
   ===================================================================== */

/* ---------- Page hero (compact — not full-screen like the banner) ---- */
.phero {
  position: relative; overflow: hidden;
  padding-block: clamp(44px, 4.4vw, 72px) clamp(52px, 5vw, 84px);
  background:
    radial-gradient(820px 420px at 88% 0%, #fdece2 0%, rgba(253, 236, 226, 0) 62%),
    radial-gradient(700px 420px at 2% 96%, #eaf2f6 0%, rgba(234, 242, 246, 0) 60%),
    var(--mist);
}
.phero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px 56px; align-items: end;
}
.phero h1 { font-size: clamp(2.2rem, 1.15rem + 2.5vw, 3.7rem); margin-bottom: 0; }
.phero .lead { margin-top: 18px; font-size: 1.0625rem; }

.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 1rem; color: var(--slate-2); margin-bottom: 20px; }
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--r); }
.crumbs svg { color: var(--slate-3); flex: none; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Filter bar ----------------------------------------------- */

.results-note { font-size: 1rem; color: var(--slate-2); margin-bottom: 26px; }
.results-note strong { color: var(--ink); font-weight: 600; }

.product__desc { font-size: 1rem; line-height: 1.55; margin-bottom: 14px; }
.product.is-hidden { display: none; }
.empty-state { padding: 60px 20px; text-align: center; color: var(--slate-2); grid-column: 1 / -1; }

/* ---------- About: values grid --------------------------------------- */
.vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.vals--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A card that is itself a link: it lifts, and the go label picks up the brand. */
.val--link { transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s, border-color .3s; }
.val--link:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.val__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; font-size: 1rem; color: var(--ink); }
.val--link:hover .val__go { color: var(--r); }
.val--link:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }

@media (max-width: 1024px) { .vals--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .vals--four { grid-template-columns: minmax(0, 1fr); } }
.val {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px 30px 30px; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.34, 1.3, .64, 1), box-shadow .3s, border-color .3s;
}
.val:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: transparent; }
.val__ico {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mist); color: var(--r); margin-bottom: 24px;
  transition: background .3s, color .3s;
}
.val:hover .val__ico { background: var(--grad); color: #fff; }
.val h3 { font-size: 1.25rem; margin-bottom: 9px; }
.val p { font-size: 1rem; }

/* ---------- Contact bento -------------------------------------------- */
.cbento { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.cform {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(28px, 3vw, 48px);
}
.cform h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: 10px; }
.cform > .lead { margin-bottom: 30px; }

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 1rem; font-weight: 600; color: var(--ink); }
.field label .req { color: var(--r); }
.field input, .field select, .field textarea {
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--slate-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--tint-line); box-shadow: 0 0 0 4px rgba(242, 111, 33, .10);
}
.field textarea { min-height: 132px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--r); }
.field__error { font-size: 1rem; color: var(--r); display: none; }
.field--error .field__error { display: block; }

.form-foot { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-top: 26px; }
.form-note { font-size: 1rem; color: var(--slate-2); display: flex; align-items: center; gap: 8px; }
.form-note svg { flex: none; color: var(--slate-3); }
.form-status { font-size: 1rem; font-weight: 600; margin-top: 18px; display: none; }
.form-status.is-ok { display: block; color: #0f7a45; }
.form-status.is-err { display: block; color: var(--r); }

/* contact info tiles */
/* An implicit grid track is minmax(auto, auto) and refuses to shrink below
   its content, which pushed the contact tiles 8px past a 320px viewport.
   The explicit track lets them compress like every other grid here. */
.cinfo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ctile { border-radius: var(--r-xl); padding: 30px 28px; }
.ctile--navy { background: var(--navy); color: rgba(255, 255, 255, .64); position: relative; overflow: hidden; }
.ctile--navy::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(300px 220px at 92% 6%, rgba(242, 111, 33, .2), transparent 62%);
}
.ctile--navy > * { position: relative; z-index: 1; }
.ctile--line { background: #fff; border: 1px solid var(--line); }
.ctile h3 { font-size: 1.1875rem; margin-bottom: 18px; }
.ctile--navy h3 { color: #fff; }
.ctile__list { display: grid; gap: 20px; }
.ctile__list li { display: flex; gap: 14px; font-size: 1rem; line-height: 1.55; }
.ctile__list .ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.ctile--navy .ico { background: rgba(255, 255, 255, .08); color: var(--o); }
.ctile--line .ico { background: var(--mist); color: var(--r); }
.ctile__list strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.ctile--navy .ctile__list strong { color: #fff; }
.ctile__list a:hover { color: var(--r); }
.ctile--navy .ctile__list a:hover { color: #fff; }

/* map tile — a styled link card, not a third-party embed */
.ctile--map { padding: 0; overflow: hidden; position: relative; min-height: 240px; background: var(--mist); }
.ctile--map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ctile--map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(15,26,33,0) 40%, rgba(15,26,33,.8) 100%); }
.ctile--map .cap { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 2; color: #fff; }
.ctile--map .cap strong { display: block; font-family: var(--display); font-size: 1.0625rem; letter-spacing: 0; margin-bottom: 10px; }
.ctile--map .btn { margin-top: 4px; }

/* ---------- Responsive ------------------------------------------------ */
@media (max-width: 1024px) {
  .phero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
  .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cbento { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .vals { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field--full { grid-column: auto; }
  .form-foot .btn { width: 100%; }
}


/* ---------- Product listing: sidebar filters + density switcher ------ */
.plist { display: grid; grid-template-columns: 306px minmax(0, 1fr); gap: 34px; align-items: start; }

.pfilters {
  position: sticky; top: calc(var(--header-h) + 18px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 28px 26px 24px;
  /* A sticky column taller than the screen hides its own lower half: the
     page scrolls past it and the element never moves. Cap it and let it
     scroll. */
  max-height: calc(100vh - var(--header-h) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
/* Webkit needs its own, and a bar this narrow reads as part of the panel. */
.pfilters::-webkit-scrollbar { width: 8px; }
.pfilters::-webkit-scrollbar-track { background: transparent; }
.pfilters::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: var(--pill);
  border: 2px solid #fff;
}
.pfilters::-webkit-scrollbar-thumb:hover { background: var(--slate-3); }

/* The toolbar pushes everything down for a logged-in editor. */
.admin-bar .pfilters {
  top: calc(var(--header-h) + 18px + 32px);
  max-height: calc(100vh - var(--header-h) - 36px - 32px);
}
@media (max-width: 782px) {
  .admin-bar .pfilters { top: calc(var(--header-h) + 18px + 46px); }
}
.pfilters__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pfilters__head h2 { font-size: 1.15rem; }
.pfilter-clear { font-size: 1rem; font-weight: 600; color: var(--slate-2); transition: color .2s; }
.pfilter-clear:hover { color: var(--r); }

.pgroup + .pgroup { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.pgroup h3 {
  font-family: var(--body); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate-2);
  margin: 18px 0 8px;
}
.pgroup__list { display: grid; }
.pgroup__list button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem; color: var(--slate);
  transition: color .2s, padding-left .2s;
}
.pgroup__list button:last-child { border-bottom: 0; }
.pgroup__list button:hover { color: var(--ink); padding-left: 6px; }
.pgroup__list button.is-active { color: var(--r); font-weight: 600; }
.pgroup__list button.is-active .n { background: var(--grad); color: #fff; border-color: transparent; }
.pgroup__list .n {
  flex: none; min-width: 26px; text-align: center;
  font-size: .75rem; font-weight: 600; color: var(--slate-2);
  border: 1px solid var(--line); border-radius: var(--pill); padding: 2px 7px;
  transition: background .2s, color .2s, border-color .2s;
}
.pgroup__list button:disabled { opacity: .38; cursor: not-allowed; }
.pgroup__list button:disabled:hover { padding-left: 0; color: var(--slate); }

/* mobile disclosure for the sidebar */
.pfilters__toggle { display: none; }

/* view bar */
.viewbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px;
}
.viewbar .results-note { margin: 0; }
.density { display: flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--pill); }
.density button {
  width: 40px; height: 34px; border-radius: var(--pill);
  display: grid; place-items: center; color: var(--slate-2);
  transition: background .2s, color .2s;
}
.density button:hover { color: var(--ink); }
.density button.is-active { background: var(--ink); color: #fff; }

/* active filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chips:empty { display: none; }
.chips button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--pill);
  background: var(--tint); color: var(--r);
  font-size: 1rem; font-weight: 600;
  transition: background .2s;
}
.chips button:hover { background: var(--tint-line); }

/* grid densities */
.products--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.products--list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.products--list .product {
  flex-direction: row; align-items: center; gap: 24px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px;
}
.products--list .product__media { width: 148px; flex: none; aspect-ratio: 1 / 1; }
.products--list .product__body { padding: 0; }
.products--list .product__foot { margin-top: 12px; }

@media (max-width: 1024px) {
  .plist { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Not sticky here, so it should grow to its natural height rather than
     scroll inside itself. */
  .pfilters { position: static; max-height: none; overflow: visible; }
  .pfilters__toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--ink);
  }
  .pfilters__toggle svg { transition: transform .25s; }
  .pfilters.is-open .pfilters__toggle svg { transform: rotate(180deg); }
  .pfilters__head { display: none; }
  .pfilters__body { display: none; padding-top: 18px; }
  .pfilters.is-open .pfilters__body { display: block; }
  .products--4, .products--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .products--4, .products--3, .products--2 { grid-template-columns: minmax(0, 1fr); }
  .density { display: none; }
}


/* ---------- List view: composition + packing (per the reference) ----- */
/* Two lines, then an ellipsis. Compositions vary from four words to forty,
   which left every card in a row a different height and the buttons out of
   line with each other. */
.product__comp {
  font-size: 1rem; line-height: 1.55; color: var(--slate);
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserves both lines even when the text only fills one, so a short
     composition does not lift its Read more button above its neighbours. */
  min-height: calc(2 * 1.55em);
}
/* The list layout has the width for more, and its own alignment. */
.products--list .product__comp {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  min-height: 0;
}
.product__pack { display: none; }
.products--list .product { gap: 28px; padding: 20px; }
.products--list .product__media { width: 190px; }
.products--list .product__body { flex-direction: row; align-items: center; gap: 28px; }
.products--list .product__main { flex: 1 1 auto; min-width: 0; }
.products--list .product h3 { font-size: 1.4rem; margin-bottom: 8px; }
.products--list .product__cat { margin-bottom: 8px; }
.products--list .product__pack {
  display: flex; align-items: flex-start; gap: 14px;
  flex: 0 0 clamp(220px, 24%, 290px);
  padding-left: 28px; border-left: 1px solid var(--line);
}
.products--list .product__pack .ico {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--mist); color: var(--r); display: grid; place-items: center;
}
.product__pack strong { display: block; font-family: var(--display); font-size: 1rem; color: var(--ink); letter-spacing: 0; margin-bottom: 3px; }
.product__pack span { font-size: 1rem; line-height: 1.5; }

@media (max-width: 1024px) {
  .products--list .product__body { flex-direction: column; align-items: flex-start; gap: 16px; }
  .products--list .product__pack { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 16px; flex: 1 1 auto; width: 100%; }
}

/* Stacked on a phone. These have to live after the base rules above: a media
   query adds no specificity, so an earlier conditioned rule loses to a later
   unconditioned one. */
@media (max-width: 720px) {
  .products--list .product { flex-direction: column; align-items: stretch; }
  .products--list .product__media { width: 100%; }
}

/* ---------- Single product ------------------------------------------- */
.psingle { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 44px; align-items: start; }
/* The column holds the picture and the thumbnail strip under it, so the
   square and the clipping belong to the picture. Left on the column they
   cropped the strip out of sight. */
.psingle__media { position: relative; }
.psingle__media .pgallery,
.psingle__media > img {
  display: block; width: 100%;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--mist); aspect-ratio: 1 / 1;
}
/* Scoped to the picture. A blanket height on every img in the column would
   defeat aspect-ratio on the thumbnails, which needs one dimension auto. */
.pgallery__slide img,
.psingle__media > img { width: 100%; height: 100%; object-fit: cover; }
.psingle__media .product__badge { top: 20px; left: 20px; }
.ptags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ptags span { padding: 7px 15px; border-radius: var(--pill); background: var(--tint); color: var(--r); font-size: 1rem; font-weight: 600; }
.psingle h1 { font-size: clamp(2rem, 1.3rem + 1.9vw, 3rem); margin-bottom: 12px; }
.psingle__comp { font-size: 1.125rem; color: var(--slate); margin-bottom: 28px; }

.pspecs { display: grid; gap: 0; margin-bottom: 32px; border-top: 1px solid var(--line); }
.pspecs li { display: flex; align-items: flex-start; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.pspecs dt, .pspecs .k { flex: 0 0 148px; font-weight: 600; color: var(--ink); }
.pspecs .v { flex: 1 1 auto; }
/* The USP list runs right up to the buttons without this. */
.psingle__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.pnote { display: flex; gap: 12px; margin-top: 28px; padding: 18px 20px; background: var(--mist); border-radius: var(--r-md); font-size: 1rem; line-height: 1.6; }
.pnote svg { flex: none; color: var(--slate-2); margin-top: 2px; }

@media (max-width: 1024px) {
  .psingle { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .psingle__media { max-width: 520px; }
}
@media (max-width: 720px) {
  .pspecs li { flex-direction: column; gap: 4px; }
  .pspecs dt, .pspecs .k { flex: none; }
  .psingle__actions .btn { width: 100%; }
}

/* ---------- About: certification band -------------------------------- */
.certband { background: var(--navy); color: rgba(255,255,255,.62); position: relative; overflow: hidden; }
.certband::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 340px at 88% 0%, rgba(242,111,33,.16), transparent 60%); }
.certband .wrap { position: relative; z-index: 1; }
.certband h2, .certband .sec-head__title { color: #fff; }

/* The shared section head cannot know which ground it landed on, so the dark
   band restyles it. Without this the intro inherits --slate and sits at
   3.36:1 against the navy. */
.certband .marker {
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, .6);
  color: rgba(255, 255, 255, .6);
}
.certband .lead { color: rgba(255, 255, 255, .62); }
.certgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.certcard { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 30px 26px; }
.certcard .ico { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--o); display: grid; place-items: center; margin-bottom: 22px; }
.certcard strong { display: block; font-family: var(--display); font-size: 1.0625rem; color: #fff; letter-spacing: 0; margin-bottom: 7px; }
.certcard p { font-size: 1rem; line-height: 1.55; }
@media (max-width: 1024px) { .certgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .certgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- About: team ---------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.tcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 30px 26px 26px; text-align: center;
  transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s, border-color .3s;
}
.tcard:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: transparent; }
.tcard__av {
  width: 104px; height: 104px; margin: 0 auto 22px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--mist); color: var(--ink);
  font-family: var(--display); font-weight: 600; font-size: 2rem; letter-spacing: 0;
  transition: background .3s, color .3s;
}
.tcard:hover .tcard__av { background: var(--grad); color: #fff; }
.tcard__av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tcard h3 { font-size: 1.15rem; margin-bottom: 5px; }
.tcard .role { font-size: 1rem; color: var(--slate-2); margin-bottom: 16px; }
.tcard__social {
  width: 38px; height: 38px; margin: 0 auto; border-radius: 50%;
  background: var(--mist); color: var(--slate); display: grid; place-items: center;
  transition: background .25s, color .25s;
}
.tcard__social:hover { background: var(--grad); color: #fff; }
@media (max-width: 1024px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .team { grid-template-columns: minmax(0, 1fr); } }


/* Services capability tile — replaces the stock photo that used to fill
   this cell. Navy ground, brand watermark, big figure and fact list. */
.range--wide {
  grid-column: span 3;
  background: var(--navy);
  border-color: transparent;
  color: rgba(255, 255, 255, .66);
  /* Generous across, restrained down: the block padding is what decides
     whether this tile out-grows the card beside it and leaves a void there. */
  padding: clamp(30px, 2.4vw, 40px) clamp(38px, 3.6vw, 60px);
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--sh-lg);
}
.range--wide::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(460px 300px at 88% 8%, rgba(242, 111, 33, .26), transparent 62%),
    radial-gradient(380px 280px at 6% 100%, rgba(236, 24, 70, .18), transparent 60%);
}
.range--wide .range__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .14; filter: grayscale(1);
}
.range--wide .range__helix {
  position: absolute; right: -40px; bottom: -50px;
  width: 240px; opacity: .1; z-index: 1;
}
.range--wide .range__wide-in {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(34px, 3.4vw, 64px);
  align-items: start;
}

/* The figure is the loudest thing on the tile, so it carries a warm-white
   gradient rather than flat white: enough lift to feel deliberate, still
   well clear of AA against the navy. */
.range--wide .range__big {
  grid-area: 1 / 1;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(3.4rem, 2.2rem + 3.6vw, 5.4rem);
  line-height: .94; letter-spacing: 0; margin-bottom: 14px;
  color: #fff;
  background: linear-gradient(140deg, #ffffff 0%, #ffd7bd 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.range--wide .range__biglabel {
  grid-area: 2 / 1; align-self: start;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.05rem + .6vw, 1.75rem);
  font-weight: 600; line-height: 1.26;
  color: #fff; letter-spacing: 0;
  max-width: 16ch; margin-bottom: 0;
}
.range--wide .range__facts {
  grid-area: 1 / 2 / 4 / 3; align-self: center;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 34px; margin: 0;
  padding-left: clamp(28px, 2.8vw, 48px);
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.range--wide .range__facts li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 1.0625rem; line-height: 1.45; letter-spacing: 0;
  color: rgba(255, 255, 255, .86);
}
.range--wide .range__facts svg { flex: none; margin-top: .28em; color: var(--o); }
.range--wide .btn { grid-area: 3 / 1; justify-self: start; align-self: end; margin-top: 24px; }

/* Below 1280 the 340px figure column left the list about 370px to split two
   ways, and three of the four facts wrapped. */
@media (max-width: 1280px) {
  .range--wide .range__wide-in { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); column-gap: 30px; }
  .range--wide .range__facts { padding-left: 26px; gap: 16px 24px; }
}

@media (max-width: 1024px) { .range--wide { grid-column: span 2; } }

/* Stacked: the rail turns into a rule above the list, and the list itself
   goes single file. Two 166px columns on a phone wrapped every line. */
@media (max-width: 900px) {
  .range--wide .range__wide-in { grid-template-columns: minmax(0, 1fr); }
  .range--wide .range__big { grid-area: auto; }
  .range--wide .range__biglabel { grid-area: auto; }
  .range--wide .btn { grid-area: auto; justify-self: start; align-self: auto; }
  .range--wide .range__facts {
    grid-area: auto;
    grid-template-columns: minmax(0, 1fr);
    margin: 28px 0 30px; padding: 26px 0 0;
    border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16);
  }
}

@media (max-width: 720px)  { .range--wide { grid-column: span 1; } }


/* ---------- Contrast fixes ------------------------------------------ */

/* .quote__by span sits at 0-1-1 and was beating .quote__av at 0-1-0, so
   the initials inherited the muted slate instead of white. Raise the
   avatar above it rather than weakening the muted rule. */
.quote__by .quote__av { color: #fff; }

/* White on the orange end of the brand gradient is about 2.9:1 and fails
   AA. A 2% darker brand red carries the same accent at 4.55:1. */
.quote:nth-child(2) .quote__av { background: #e71845; }


/* ---------- Slider (Slick) ------------------------------------------- */

/* A product track is a grid until the server decides there are more cards
   than columns, at which point it hands the same markup to Slick. The grid
   rules have to stand down, or the .slick-list ends up occupying one column
   of four. */
.products--slider { display: block; position: relative; }
.products--slider .slick-list { margin: 0 -10px; padding-bottom: 4px; }
.products--slider .slick-track { display: flex; align-items: stretch; }
.products--slider .slick-slide { height: auto; padding: 0 10px; }

/* Slick only wraps slides in a div under some options. When it does, that
   wrapper carries no class, and only then should it be stretched. Matching a
   bare "> div" also caught .product__media and .product__body and flattened
   the card. */
.products--slider .slick-slide > div:not([class]) { height: 100%; }
.products--slider .slick-slide > div:not([class]) > * { height: 100%; }

/* Controls live in a bar under the track: dots left, arrows right. Putting
   them above would mean threading them past the section heading's own link,
   which sits in the same top-right corner. */
.products--slider { padding-top: 4px; padding-bottom: 74px; }
.slider-arrow {
  position: absolute; bottom: 0; z-index: 3;
  width: 44px; height: 44px; border-radius: var(--pill);
  display: grid; place-items: center;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.slider-arrow:hover { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-2px); }
.slider-arrow:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }
.slider-arrow.slick-disabled { opacity: .4; cursor: default; }
.slick-prev.slider-arrow { right: 58px; }
.slick-next.slider-arrow { right: 0; }

/* On a dark band the arrows invert rather than punching two white holes. */
.section--navy .slider-arrow,
.ctile--navy .slider-arrow {
  background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .24);
}

.products--slider .slick-dots {
  position: absolute; left: 0; bottom: 18px;
  display: flex; gap: 9px;
  list-style: none; margin: 0; padding: 0;
}
.products--slider .slick-dots li { line-height: 0; }
.products--slider .slick-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--pill);
  background: var(--line-2); color: transparent; font-size: 0;
  cursor: pointer; transition: width .3s, background .3s;
}
.products--slider .slick-dots .slick-active button { width: 26px; background: var(--grad); }
/* The dot stays 8px; the thing you tap is 26px. */
.products--slider .slick-dots button { position: relative; }
.products--slider .slick-dots button::after { content: ""; position: absolute; inset: -9px -6px; }
.products--slider .slick-dots button:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }

/* Slick measures widths in JS, so a track that has not initialised yet would
   briefly stack every card full width. Clip it to the visible row instead. */
.js-slider:not(.slick-initialized) { display: flex; gap: 20px; overflow: hidden; }
.js-slider:not(.slick-initialized) > * { flex: 0 0 calc((100% - 60px) / 4); }

.js-slider:not(.slick-initialized)[data-cols="3"] > * { flex: 0 0 calc((100% - 40px) / 3); }
@media (max-width: 1280px) { .js-slider:not(.slick-initialized) > * { flex: 0 0 calc((100% - 40px) / 3); } }
@media (max-width: 1024px) { .js-slider:not(.slick-initialized) > * { flex: 0 0 calc((100% - 20px) / 2); } }
@media (max-width: 640px)  {
  .js-slider:not(.slick-initialized) > * { flex: 0 0 100%; }
  .products--slider .slick-dots { justify-content: flex-start; }
}

/* ---------- FAQ ------------------------------------------------------ */

/* One column, not two: a reader scans questions down a single line far more
   easily than across a grid, and long answers would leave ragged columns. */
/* Centred under a centred head, rather than hanging off the left edge of
   a 1600px container. */
.faq { max-width: 62rem; margin-inline: auto; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__q { margin: 0; font-size: 1rem; }
.faq__toggle {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  width: 100%; padding: 24px 0; text-align: left;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.35; color: var(--ink);
  transition: color .2s;
}
.faq__toggle:hover { color: var(--r); }
.faq__toggle:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }
.faq__toggle svg { flex: none; margin-top: .2em; color: var(--slate-2); transition: transform .3s cubic-bezier(.4,0,.2,1), color .2s; }
.faq__item.is-open .faq__toggle { color: var(--r); }
.faq__item.is-open .faq__toggle svg { transform: rotate(180deg); color: var(--r); }

.faq__a { padding: 0 0 26px; max-width: 68ch; }

/* .lead sometimes wraps several paragraphs rather than being one. */
.lead > p { margin: 0 0 14px; }
.lead > p:last-child { margin-bottom: 0; }
.faq__a p { margin: 0 0 14px; }
.faq__a p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .faq__toggle { gap: 16px; padding: 20px 0; }
  .faq__a { padding-bottom: 22px; }
}

/* ---------- Prose + panel -------------------------------------------- */

/* Copy on one side, one of four panels on the other. The panel carries the
   weight so a text-only band does not sit in half a 1600px container with
   the rest of the row empty. */
.ppanel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr); gap: clamp(40px, 5vw, 84px); align-items: center; }
.ppanel--left { direction: rtl; }
.ppanel--left > * { direction: ltr; }

.ppanel__prose > .marker { margin-bottom: 14px; }
.ppanel__body { margin-top: 18px; max-width: 60ch; }

.ppanel__side { position: relative; }

/* Figure: the one number in the copy worth pulling out. */
.ppanel__side--stat {
  background: var(--sand); border-radius: var(--r-xl);
  padding: clamp(32px, 3.4vw, 52px);
  text-align: left;
}
.ppanel__figure {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.8rem, 1.9rem + 3vw, 4.4rem);
  line-height: .96; letter-spacing: 0; margin: 0 0 12px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ppanel__figlabel { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.ppanel__fignote { font-size: 1rem; line-height: 1.6; color: var(--slate); margin: 0; }

/* Checklist: for copy that ends in requirements. */
.ppanel__side--list {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(28px, 2.8vw, 40px); box-shadow: var(--sh-sm);
}
.ppanel__listhead {
  display: block; font-family: var(--display); font-size: 1.125rem;
  color: var(--ink); margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.ppanel__list { display: grid; gap: 15px; }
.ppanel__list li { display: flex; gap: 12px; font-size: 1rem; line-height: 1.5; }
.ppanel__list svg { flex: none; margin-top: .22em; color: var(--r); }

/* Call to action: for the sections whose honest answer is "ask us". */
.ppanel__side--cta {
  background: var(--navy); border-radius: var(--r-xl); overflow: hidden;
  padding: clamp(32px, 3.4vw, 48px); color: rgba(255, 255, 255, .72);
}
.ppanel__side--cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 280px at 88% 6%, rgba(242, 111, 33, .28), transparent 62%);
}
.ppanel__mark { position: absolute; right: -40px; bottom: -44px; width: 200px; opacity: .1; }
.ppanel__ctain { position: relative; z-index: 2; }
.ppanel__ctain strong { display: block; font-family: var(--display); font-size: clamp(1.35rem, 1.1rem + .7vw, 1.75rem); font-weight: 600; color: #fff; line-height: 1.25; margin-bottom: 12px; }
.ppanel__ctain p { font-size: 1rem; line-height: 1.6; margin: 0 0 24px; }

/* Image: when the section just needs air. */
.ppanel__img { width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r-xl); }

@media (max-width: 1024px) {
  .ppanel { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ppanel--left { direction: ltr; }
  .ppanel__side { max-width: 640px; }
  .ppanel__side--stat, .ppanel__side--list, .ppanel__side--cta { max-width: 640px; }
}

/* ---------- Confirmation / error ------------------------------------- */

/* Centred, narrow, and quiet. These pages exist to say one thing and then
   get the reader somewhere useful. */
.confirm { text-align: center; }
.confirm__in { max-width: 60ch; margin-inline: auto; }

.confirm__plate {
  width: 82px; height: 82px; margin: 0 auto 26px;
  border-radius: 24px; display: grid; place-items: center;
  background: var(--grad); color: #fff;
  box-shadow: 0 16px 34px rgba(236, 24, 70, .22);
}

/* A 404 does not need an icon. The number is the message. */
.confirm__figure {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(5rem, 3rem + 9vw, 11rem);
  line-height: .86; letter-spacing: 0; margin: 0 0 10px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.confirm .marker { margin-bottom: 14px; }
.confirm .lead { margin: 18px auto 0; max-width: 52ch; }
.confirm__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
.confirm__note {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px; font-size: 1rem; color: var(--slate-2);
}
.confirm__note svg { flex: none; color: var(--o); }

@media (max-width: 560px) {
  .confirm__actions { flex-direction: column; align-items: stretch; }
  .confirm__actions .btn { justify-content: center; }
}

/* ---------- Contact Form 7 inside theme components -------------------- */

/* CF7's own wrappers are not part of the design and both break a flex row, so
   they step out of the box tree and let the real controls sit where the
   layout expects them. */
.subscribe > p,
.subscribe .wpcf7-form-control-wrap { display: contents; }

/* .wpcf7-form input[type="email"] is more specific than .subscribe input, so
   the borderless pill field has to out-specify it rather than rely on order. */
.wpcf7-form .subscribe input[type="email"],
.wpcf7-form .subscribe input[type="text"] {
  flex: 1; width: auto; min-width: 0;
  padding: 13px 20px;
  border: 0; border-radius: 0; background: none;
}
.wpcf7-form .subscribe input[type="email"]:focus,
.wpcf7-form .subscribe input[type="text"]:focus { background: none; box-shadow: none; }

/* The validation tip takes its own line rather than squeezing the row. */
.subscribe .wpcf7-not-valid-tip { flex: 1 0 100%; padding: 2px 20px 6px; font-size: 1rem; }
.subscribe .wpcf7-spinner { display: none; }

/* CF7 leaves the response box in the page when there is nothing to say. */
.wpcf7-response-output[aria-hidden="true"] { display: none; }
.wpcf7 form .wpcf7-response-output { margin: 18px 0 0; }

/* ---------- Product card action -------------------------------------- */

/* The arrow is a mask rather than an <svg>, so it inherits the link colour
   through the hover change without a second rule. */
:root {
  --arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}

.product__add {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background: #fff;
  font-size: 1rem; font-weight: 600; color: var(--ink);
  transition: color .22s, background .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.product__add::after {
  content: ""; flex: none;
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--arrow-icon) center / contain no-repeat;
  mask: var(--arrow-icon) center / contain no-repeat;
  transition: transform .22s;
}

.product__add:hover {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(236, 24, 70, .24);
}
.product__add:hover::after { transform: translateX(3px); }

.product__add:focus-visible {
  outline: 2px solid var(--o); outline-offset: 3px;
}

/* The card lifts as a whole, so the button follows it rather than doubling up. */
.product:hover .product__add { border-color: var(--line-2); }
.product:hover .product__add:hover { border-color: transparent; }

/* ---------- Product detail: gallery, about, USPs ---------------------- */

/* The banner carries the name only now, so it no longer needs two columns. */
.phero--product .phero__grid { grid-template-columns: minmax(0, 1fr); }

/* Gallery. One image renders as a plain image; this only applies once there
   are several and Slick has taken over. */
.pgallery { position: relative; }
.pgallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.pgallery .slick-list, .pgallery .slick-track, .pgallery .slick-slide > div { height: 100%; }
.pgallery .slick-slide img { border-radius: 0; }

.pgallery .slick-dots {
  position: absolute; left: 0; right: 0; bottom: 18px;
  display: flex; justify-content: center; gap: 8px;
  list-style: none; margin: 0; padding: 0; z-index: 3;
}
.pgallery .slick-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--pill);
  background: rgba(255, 255, 255, .55); color: transparent; font-size: 0; cursor: pointer;
  transition: width .3s, background .3s;
}
.pgallery .slick-dots .slick-active button { width: 24px; background: #fff; }
.pgallery .slick-dots button::after { content: ""; position: absolute; inset: -9px -6px; }

.pgallery .slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); bottom: auto;
  width: 40px; height: 40px; z-index: 3;
  background: rgba(255, 255, 255, .92); border-color: transparent;
  box-shadow: var(--sh-sm);
}
.pgallery .slick-prev.slider-arrow { left: 14px; right: auto; }
.pgallery .slick-next.slider-arrow { right: 14px; }
.pgallery .slider-arrow:hover { transform: translateY(-50%); background: var(--grad); color: #fff; }

/* About + USPs, under the spec table. */
/* The spec list already closes with a rule on its last row, so a border
   here drew a second line a few pixels below the first. Spacing only. */
.pabout { margin-top: 8px; }
.pabout h2 { font-size: clamp(1.4rem, 1.15rem + .6vw, 1.75rem); margin-bottom: 14px; }
.pabout p { font-size: 1rem; line-height: 1.68; color: var(--slate); margin: 0 0 14px; }
.pabout p:last-child { margin-bottom: 0; }
.pabout h3 { font-size: 1.25rem; margin: 26px 0 14px; }

.pusps { display: grid; gap: 13px; margin: 0 0 30px;}
.pusps li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; line-height: 1.55; color: var(--slate); }
.pusps svg { flex: none; margin-top: .22em; color: var(--r); }

/* ---------- Product gallery thumbnails -------------------------------- */

/* Slick puts .slick-slide on the child element itself, so the thumb button is
   the slide: the gutter goes on the button and the visual frame on the image
   inside it. */
/* Capped so a small number of images does not turn the strip into a second
   row of full-size pictures. */
.pgallery__thumbs {
  margin-top: 14px; max-width: 470px;
  display: flex; gap: 10px;
  /* Only for a long strip on a narrow screen, and only when the reader
     scrolls it. The strip never moves on its own. */
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.pgallery__thumb { scroll-snap-align: start; }
.pgallery__thumb {
  /* Sharing the row means any sensible number of images fits without the
     strip ever needing to scroll. */
  flex: 1 1 0; min-width: 60px; max-width: 150px;
  padding: 0; background: none; border: 0; cursor: pointer;
  display: block;
}
.pgallery__thumb img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  opacity: .6;
  transition: opacity .22s, border-color .22s;
}
.pgallery__thumb:hover img { opacity: 1; }
.pgallery__thumb.is-current img { opacity: 1; border-color: var(--r); }
.pgallery__thumb:focus-visible img { outline: 2px solid var(--o); outline-offset: 2px; }



/* ---------- Product name and tagline above the table ------------------ */

.psingle__name {
  font-size: clamp(1.55rem, 1.15rem + 1.2vw, 2.15rem);
  line-height: 1.15; margin: 0;
}
/* The short rule under the name, as on the reference. */
.psingle__name::after {
  content: ""; display: block;
  width: 54px; height: 3px; margin-top: 16px;
  border-radius: 2px; background: var(--grad);
}
.psingle__tagline {
  font-size: 1.0625rem; line-height: 1.6; color: var(--slate);
  margin: 18px 0 28px; max-width: 52ch;
}

/* ---------- Downloads ------------------------------------------------- */

.dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.dl__card {
  display: flex; align-items: center; gap: 18px;
  padding: 24px 24px 24px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .3s cubic-bezier(.34,1.3,.64,1), box-shadow .3s, border-color .3s;
}
.dl__card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.dl__card:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }

/* The file type as type, not clipart: a chip set in the display face. */
.dl__ext {
  flex: none; width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 16px; background: var(--tint);
  font-family: var(--display); font-size: .8125rem; font-weight: 700;
  letter-spacing: .07em; color: var(--r);
  transition: background .25s, color .25s;
}
.dl__card:hover .dl__ext { background: var(--grad); color: #fff; }

.dl__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dl__body strong { font-family: var(--display); font-size: 1.0625rem; color: var(--ink); letter-spacing: 0; }
.dl__note { font-size: 1rem; color: var(--slate-2); line-height: 1.4; }
.dl__verb { font-size: 1rem; font-weight: 600; color: var(--r); margin-top: 4px; }

.dl__go {
  flex: none; width: 40px; height: 40px; border-radius: var(--pill);
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--ink);
  transition: background .25s, color .25s, border-color .25s;
}
.dl__card:hover .dl__go { background: var(--navy); color: #fff; border-color: transparent; }

@media (max-width: 1024px) { .dl { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Product-list modal + header button ------------------------ */

.header__dl { gap: 8px; }
/* Two buttons plus the nav is too much below this; the drawer link remains. */
@media (max-width: 1280px) { .header__dl { display: none; } }

.modal { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(15, 26, 33, .5); backdrop-filter: blur(3px); }
.modal__card {
  position: relative; z-index: 1;
  width: min(600px, 100%); max-height: 90vh; overflow: auto;
  background: #fff; border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 40px); box-shadow: var(--sh-lg);
}
.modal__close { position: absolute; top: 14px; right: 14px; }
.modal__card h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); margin: 12px 0 8px; }
.modal__card .lead { margin-bottom: 22px; }
.modal__card .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .modal__card .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* the drawer's copy of the gate */
.drawer__plist { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1rem; color: var(--ink); }
.drawer__plist svg { color: var(--r); }

/* Date inputs size themselves from their text, so they end up shorter than
   their siblings unless the height is stated. */
.wpcf7-form input[type="date"],
.cform input[type="date"] {
  font-family: var(--body); font-size: 1rem;
  -webkit-appearance: none; appearance: none;
}
/* The native picker button is near-black; tint it to the brand and give it
   a hit area that matches the other controls. */
.wpcf7-form input[type="date"]::-webkit-calendar-picker-indicator,
.cform input[type="date"]::-webkit-calendar-picker-indicator {
  width: 20px; height: 20px; margin-left: 6px;
  cursor: pointer; opacity: .55;
  transition: opacity .2s;
}
.wpcf7-form input[type="date"]::-webkit-calendar-picker-indicator:hover,
.cform input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Chrome renders the empty date parts in its own grey; match the theme. */
.wpcf7-form input[type="date"]::-webkit-datetime-edit,
.cform input[type="date"]::-webkit-datetime-edit { color: var(--slate); padding: 0; }
/* The wrapper carries padding of its own in Chrome. */
.wpcf7-form input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.cform input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.wpcf7-form input[type="date"]:focus::-webkit-datetime-edit,
.cform input[type="date"]:focus::-webkit-datetime-edit { color: var(--ink); }

/* Text, date and select each size themselves from different intrinsic
   content, which left a row of mixed controls visibly ragged. One height
   for every single-line control settles it; textarea keeps its own. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"], .wpcf7-form input[type="date"],
.wpcf7-form input[type="number"], .wpcf7-form input[type="url"],
.wpcf7-form input[type="search"],
.wpcf7-form select {
  min-height: 56px;
  line-height: 1.5;
}

/* ---------- Adverse event report form (client's CF7 markup) ----------- */

/* Their body uses .col-field-wrap / .col-field / .text-box / .submit-field.
   Three columns is right for forty short fields: two leaves the form very
   tall, four makes the labels wrap. */
.wpcf7-form .col-field-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 24px;
}
.wpcf7-form .col-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wpcf7-form .col-field > label { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
/* Long labels would otherwise push their control out of line with the row. */
.wpcf7-form .col-field > label { min-height: 2.9em; display: flex; align-items: flex-end; }
.wpcf7-form .col-field .wpcf7-form-control-wrap { display: block; }

/* Anything discursive gets the full row: textareas and the long radio sets. */
.wpcf7-form .col-field.text-box,
.wpcf7-form .submit-field { grid-column: 1 / -1; }
.wpcf7-form .col-field.text-box > label { min-height: 0; }
.wpcf7-form .submit-field { margin-top: 10px; }

/* Radio sets read as choosable chips rather than loose native dots, which
   keeps the six-option seriousness list legible. */
.wpcf7-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-list-item label {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 12px 18px;
  border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--paper); cursor: pointer;
  font-size: 1rem; font-weight: 500; color: var(--ink); line-height: 1.4;
  min-height: 56px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.wpcf7-form .wpcf7-list-item label:hover { border-color: var(--tint-line); background: var(--tint); }
.wpcf7-form .wpcf7-list-item input[type="radio"] {
  width: 18px; height: 18px; margin: 0; flex: none;
  accent-color: var(--r); cursor: pointer;
}
/* :has gives the checked chip its state without any JavaScript. */
.wpcf7-form .wpcf7-list-item label:has(input:checked) {
  border-color: var(--r); background: var(--tint);
  box-shadow: 0 0 0 3px rgba(236, 24, 70, .09);
}
.wpcf7-form .wpcf7-list-item label:focus-within { outline: 2px solid var(--o); outline-offset: 2px; }

/* The submit sits alone on its row, so it does not need to stretch. */
.wpcf7-form .submit-field .wpcf7-submit { width: auto; }

@media (max-width: 1200px) {
  .wpcf7-form .col-field-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .wpcf7-form .col-field-wrap { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, every label sits directly above its own field, so the
     equal-height trick that aligned rows is no longer needed. */
  .wpcf7-form .col-field > label { min-height: 0; }
}

/* ---------- Notice Band ----------------------------------------------- */

/* A dark band cannot merge with the tinted sections either side of it, and
   on a page that is otherwise selling franchises this is the block that
   should read as the calmest thing there. */
.nband--navy { background: var(--navy); color: rgba(255, 255, 255, .74); }
.nband--light { background: var(--tint); color: var(--slate); }

.nband__head { max-width: 46ch; }
.nband__title {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  line-height: 1.1; margin: 14px 0 0;
}
.nband--navy .nband__title { color: #fff; }
.nband__lead { margin-top: 18px; font-size: 1.0625rem; line-height: 1.7; }

/* The conditions are the real message here, so they get the width of the
   section rather than sitting as a list under the prose. */
.nband__conds { margin-top: clamp(34px, 3.4vw, 52px); }
.nband__condlabel {
  display: block; margin-bottom: 20px;
  font-family: var(--display); font-size: 1rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.nband--navy .nband__condlabel { color: rgba(255, 255, 255, .5); }
.nband--light .nband__condlabel { color: var(--slate-2); }

.nband__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.nband__list li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 26px 30px 26px 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.nband--light .nband__list li { border-top-color: var(--tint-line); }
/* A rule between the columns as well, so the three read as one set. */
.nband__list li + li { border-left: 1px solid rgba(255, 255, 255, .13); padding-left: 30px; }
.nband--light .nband__list li + li { border-left-color: var(--tint-line); }

/* Numbered because these are three distinct conditions to check yourself
   against, not an unordered list of features. */
.nband__num {
  flex: none; font-family: var(--display); font-size: 1rem; font-weight: 700;
  letter-spacing: .04em; line-height: 1.5;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nband__text { font-size: 1.0625rem; line-height: 1.6; }
.nband--navy .nband__text { color: rgba(255, 255, 255, .82); }

.nband__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 26px;
  margin-top: clamp(30px, 3vw, 44px);
}
.nband__mail { margin: 0; font-size: 1.0625rem; }
.nband--navy .nband__mail { color: rgba(255, 255, 255, .6); }
.nband__mail a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.nband--navy .nband__mail a { color: #fff; }
.nband__mail a:hover { color: var(--o); }

@media (max-width: 900px) {
  .nband__list { grid-template-columns: minmax(0, 1fr); }
  .nband__list li { padding-right: 0; }
  /* Stacked, the vertical rule between columns no longer means anything. */
  .nband__list li + li { border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__art [data-draw] { stroke-dashoffset: 0; }
}

/* slim breadcrumb-only variant, used on the single product page */
.phero--slim { padding-block: 22px 0; background: none; }
.phero--slim .crumbs { margin-bottom: 0; }

/* product banner: same ground as the page heroes, with a meta row */
.phero--product .phero__grid { align-items: end; }
.phero--product h1 { font-size: clamp(2rem, 1.2rem + 2vw, 3.1rem); }
.phero__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; }
.phero__meta li { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; color: var(--slate); }
.phero__meta svg { flex: none; color: var(--r); }


/* ---------------------------------------------------------------------
   23. WORDPRESS UTILITIES
   Classes the dynamic templates need that the static HTML never used.
   --------------------------------------------------------------------- */
.wrap--full { max-width: none; padding-inline: 0; }

/* mirrored media column, driven by the About section's "Image Side" field */
.about__grid--flip { direction: rtl; }
.about__grid--flip > * { direction: ltr; }

/* trio panel without the banner overlap (used on inner pages) */
.boxes-band--flat { margin-top: 0; }

/* stats used as their own section rather than inside About */
.stats--standalone { margin-top: 0; padding-top: 0; border-top: 0; }

/* editor content */
.entry { color: var(--slate); }
.entry > * + * { margin-top: 1.1em; }
.entry h2, .entry h3, .entry h4 { margin-top: 1.8em; }
.entry a { color: var(--r); border-bottom: 1px solid var(--tint-line); }
.entry a:hover { border-bottom-color: var(--r); }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry li + li { margin-top: .4em; }
.entry img, .entry__media img { border-radius: var(--r-lg); }
.entry blockquote {
  margin: 1.6em 0; padding: 22px 26px;
  background: var(--mist); border-radius: var(--r-lg);
  font-size: 1.0625rem; color: var(--ink);
}
.entry code { background: var(--mist); padding: 2px 6px; border-radius: 5px; font-size: .9em; }

/* WordPress core alignment + caption classes */
.alignleft { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption-text, .entry figcaption { font-size: 1rem; color: var(--slate-2); margin-top: 10px; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}

/* pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination .page-numbers {
  min-width: 44px; height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--pill);
  background: #fff; font-weight: 600; font-size: 1rem; color: var(--slate);
  transition: border-color .2s, color .2s;
}
.pagination .page-numbers:hover { border-color: var(--line-2); color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* WordPress admin bar offsets the sticky header */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }

/* Contact Form 7 inherits the theme's field styling */
.wpcf7-form .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.wpcf7-form p { margin: 0 0 18px; }
.wpcf7-form label { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
/* Every text-like input, not a hand-listed three: date, number, url and
   search were falling through to browser default chrome. */
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"], .wpcf7-form input[type="number"], .wpcf7-form input[type="url"],
.wpcf7-form input[type="search"],
.wpcf7-form select, .wpcf7-form textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus {
  outline: none; background: #fff;
  border-color: var(--tint-line); box-shadow: 0 0 0 4px rgba(242, 111, 33, .10);
}
.wpcf7-form textarea { min-height: 132px; resize: vertical; }
.wpcf7-form .wpcf7-submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border: 0; border-radius: var(--pill);
  background: var(--grad); color: #fff;
  font-family: var(--body); font-weight: 600; font-size: 1rem; cursor: pointer;
  box-shadow: 0 10px 26px rgba(236, 24, 70, .20);
  transition: transform .22s, box-shadow .22s;
}
.wpcf7-form .wpcf7-submit:hover { transform: translateY(-3px); }
.wpcf7-not-valid-tip { color: var(--r); font-size: 1rem; margin-top: 6px; }
.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md); font-size: 1rem;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #0f7a45; color: #0f7a45; }
.wpcf7 form.invalid .wpcf7-response-output { border-color: var(--r); color: var(--r); }
@media (max-width: 720px) { .wpcf7-form .form-grid { grid-template-columns: minmax(0, 1fr); } }