@font-face {
  font-family: "IBM Plex Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("../fonts/plex.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Source Sans 3 Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("../fonts/sourcesans.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ===========================================================================
   Impact Medical — Version 03 "Standard"
   ---------------------------------------------------------------------------
   The professional, institutional treatment. This is the version that looks
   like what a hospital procurement office expects a medical supplier to look
   like, and it is built for someone who came to get something done.

   It is deliberately unlike the other two:
     - denser. More is visible per screen, and more of it is a route somewhere.
     - boxed. Panels with headers and visible borders carry the structure,
       where Version 01 uses space and Version 02 uses hairlines.
     - symmetric. Two-tier header, centred section heads, even grids.
     - entrances are choreographed, but never load-bearing. Every element is
       visible in the stylesheet's own right; the script only adds the class
       that lets it animate in. With scripting off, or with reduced motion
       asked for, the page is simply painted.

     1. Reset
     2. Tokens
     3. Base type
     4. Layout
     5. Chrome — utility bar, header, navigation
     6. Hero and the quick-action strip
     7. Section heads and panels
     8. Feature strip
     9. Category grid and the A-Z index
    10. Inner page headers
    11. Forms
    12. Prose
    13. Call to action and footer
    14. Motion — entrances, choreography, the top bar and the read line
    15. Utilities, print
   ======================================================================== */

/* ---------------------------------------------------------------- 1. reset */

*, *::before, *::after { box-sizing: border-box; }
/* Enough to clear the navigation once the utility strip has tucked away. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
/* While the wheel's momentum loop is driving the scroll position, each step it
   writes must land immediately — otherwise the browser's own smooth scrolling
   would animate toward every one of them and the two would fight. */
html.is-wheeling { scroll-behavior: auto; }
body, h1, h2, h3, h4, p, figure, dl, dd, ol, ul, fieldset, legend {
  margin: 0; padding: 0;
}
/* Lists carry no marker by default. The common `ul[class]` form of this rule
   misses an unclassed <ul> inside a classed parent — invisible in a flex
   container, which drops markers anyway, and plainly wrong in a grid one.
   Prose restores its own markers below. */
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------- 2. tokens */

:root {
  --white:    #FFFFFF;
  --tint:     #F2F3F4;   /* the page's resting surface */
  --tint-2:   #E7EAEC;   /* table stripes, placeholders */
  --line:     #E2E5E7;
  --line-2:   #C5CDD2;

  --ink:      #263037;   /* 15.6:1 on white */
  --ink-2:    #5A666E;   /*  7.7:1 — body copy */
  --ink-3:    #667179;   /*  5.9:1 on white, 5.5:1 on tint — the floor */

  --blue:     #617783;   /*  7.9:1 on white — primary */
  --blue-700: #465E6A;   /* 10.2:1 — hover */
  --blue-50:  #EEF2F3;
  --navy:     #263037;   /* header bar, footer, hero panel */
  --navy-2:   #354148;
  --on-navy:  #FFFFFF;   /* 15.4:1 */
  --navy-mut: #B0B9BD;   /*  7.9:1 on navy */
  --navy-acc: #D9DFE1;   /* 11.7:1 on navy */

  --green:    #146C43;   /*  6.5:1 on white — the shipping promise */
  --focus:    #587582;

  --font-head: "IBM Plex Sans Variable", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3 Variable", "Segoe UI", system-ui, sans-serif;

  /* A tighter scale than either of the others. This version is meant to fit
     more on a screen, so the display sizes stop well short of Version 02's. */
  --t-xs:   0.75rem;                                     /* 12px, fixed */
  --t-sm:   0.8125rem;                                   /* 13px, fixed */
  --t-base: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --t-md:   clamp(1.0625rem, 1rem + 0.24vw, 1.1875rem);
  --t-lg:   clamp(1.125rem, 1.04rem + 0.34vw, 1.3rem);
  --t-xl:   clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem);
  --t-2xl:  clamp(1.65rem, 1.42rem + 1vw, 2.25rem);
  --t-3xl:  clamp(2rem, 1.62rem + 1.8vw, 3rem);
  --t-4xl:  clamp(2.2rem, 1.7rem + 2.25vw, 3.5rem);

  /* A 4px rhythm, tighter than both of the others */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.75rem;
  --s-7: 2.25rem;
  --s-8: 3rem;
  --s-9: clamp(2.75rem, 2rem + 3vw, 4.5rem);   /* section padding */

  --container: 1360px;
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);

  --r: 6px;             /* one radius, small, everywhere */
  --r-lg: 10px;

  --shadow: 0 1px 2px rgba(38, 48, 55, 0.06);
  --shadow-2: 0 10px 26px -12px rgba(38, 48, 55, 0.28);

  --speed: 140ms;       /* quick: this version never makes you wait */
  --ease: ease-out;

  /* Motion. State changes stay at 140ms; entrances get their own, longer
     pair, on a curve that decelerates hard so nothing floats. */
  --enter: 640ms;
  --enter-slow: 880ms;
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --step: 70ms;         /* the gap between staggered siblings */

  --topbar-h: 0px;      /* height of the utility strip, measured by the script */
}

/* ------------------------------------------------------------ 3. base type */

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
h1 { font-size: var(--t-3xl); line-height: 1.12; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { max-width: 68ch; }

a { color: var(--blue); text-underline-offset: 0.16em; }
a:hover { color: var(--blue-700); }

strong, b { font-weight: 600; }

.eyebrow {
  font-family: var(--font-head);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue);
}

.skip-link {
  position: absolute; left: var(--s-3); top: var(--s-3); z-index: 300;
  transform: translateY(-150%);
  padding: 0.7rem 1.1rem; border-radius: var(--r);
  background: var(--navy); color: var(--white);
  font-family: var(--font-head); font-weight: 600; font-size: var(--t-sm);
  text-decoration: none;
  transition: transform var(--speed) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--white); }

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

/* --------------------------------------------------------------- 4. layout */

.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }

/* `clip` rather than `hidden`: it contains the horizontal entrances, which
   would otherwise push a panel past the right edge and give the whole page a
   scrollbar while it was waiting, and unlike `hidden` it does not make the
   section a scroll container, so `position: sticky` still works inside it. */
.section { padding-block: var(--s-9); overflow-x: clip; }
.section--sm { padding-block: var(--s-8); }
.section--tint { background: var(--tint); }
.section--navy { background: var(--navy); color: var(--navy-mut); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--on-navy); }

.grid { display: grid; gap: var(--s-6); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.split {
  display: grid; gap: var(--s-8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split--main { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.split--aside { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 760px) {
  .split, .split--main, .split--aside { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

.shot { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--tint-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--4x3 { aspect-ratio: 4 / 3; }
.shot--3x2 { aspect-ratio: 3 / 2; }
.shot--1x1 { aspect-ratio: 1 / 1; }
.shot--wide { aspect-ratio: 5 / 2; }

/* Buttons. Three ranks, all rectangular with a 4px radius. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 46px; padding: 0.6rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--font-head); font-size: var(--t-base); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-700); color: var(--white); }

.btn--secondary { background: var(--white); color: var(--blue); border-color: var(--line-2); }
.btn--secondary:hover { background: var(--blue-50); border-color: var(--blue); color: var(--blue-700); }

.btn--onnavy { background: var(--white); color: var(--navy); }
.btn--onnavy:hover { background: var(--navy-acc); color: var(--navy); }
.btn--ghostnavy { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.btn--ghostnavy:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }

.btn--sm { min-height: 38px; padding: 0.35rem 0.9rem; font-size: var(--t-sm); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.textlink {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-head); font-weight: 600; font-size: var(--t-base);
  color: var(--blue); text-decoration: none;
}
.textlink:hover { color: var(--blue-700); text-decoration: underline; }
.textlink svg { width: 1em; height: 1em; transition: transform var(--speed) var(--ease); }
.textlink:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- 5. chrome */

/* Two tiers. The top one carries the things a visitor rings or e-mails
   about; the main one carries the navigation and the portal button. */
.utility {
  background: var(--navy); color: var(--navy-mut);
  font-size: var(--t-sm);
}
.utility .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2) var(--s-5); padding-block: 0.45rem;
}
.utility a { color: var(--on-navy); text-decoration: none; }
.utility a:hover { color: var(--navy-acc); text-decoration: underline; }
.utility ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.utility li, .utility p { display: inline-flex; align-items: center; gap: 0.45em; }
.utility svg { width: 14px; height: 14px; flex: none; opacity: 0.85; }
.utility__promise { color: var(--navy-acc); font-weight: 600; }

/* The utility strip and the navigation travel together in one sticky block.
   Once the page scrolls, the block slides up by exactly the strip's height,
   so the navigation ends flush with the top of the window and the contact
   details tuck away. It is a transform, so it costs no layout. */
.topbar {
  position: sticky; top: 0; z-index: 100;
  transition: transform 320ms var(--ease-enter);
}
.topbar.is-scrolled { transform: translateY(calc(var(--topbar-h) * -1)); }

.masthead {
  position: relative;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--speed) var(--ease);
}
.topbar.is-scrolled .masthead { box-shadow: var(--shadow-2); }

/* How far through the page the reader is, drawn on the navigation's own
   bottom edge. It is only ever a hairline, and it is decorative. */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}
.masthead .container {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 78px;
}

.brand { flex: none; display: block; }
/* Both supplied logo files are a white wordmark on transparency, so on this
   version's white header it is rendered in ink. A proper dark wordmark should
   replace the filter. */
.brand img { width: 158px; height: auto; filter: brightness(0); }
.masthead .brand img { filter: brightness(0) saturate(100%) invert(11%) sepia(24%)
                       saturate(1800%) hue-rotate(184deg) brightness(95%) contrast(95%); }

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.nav__list { display: flex; align-items: center; gap: var(--s-1); }
.nav__list a {
  display: block; padding: 0.55rem 0.75rem; border-radius: var(--r);
  font-family: var(--font-head); font-size: var(--t-base); font-weight: 500;
  color: var(--ink); text-decoration: none;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.nav__list a:hover { background: var(--tint); color: var(--blue-700); }
.nav__list a[aria-current="page"] {
  color: var(--blue); font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--blue);
}
.nav__cta { margin-left: var(--s-3); }

.nav__toggle {
  display: none; margin-left: auto;
  align-items: center; gap: 0.5em;
  min-height: 44px; padding: 0.4rem 0.8rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-family: var(--font-head); font-size: var(--t-base); font-weight: 600;
  color: var(--ink);
}
.nav__toggle svg { width: 18px; height: 18px; }

@media (max-width: 1080px) {
  .nav__toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; display: block;
    padding: var(--s-3) var(--gutter) var(--s-5);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    max-height: calc(100vh - 100px); overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav__list { display: block; }
  .nav__list a {
    padding: 0.8rem 0.5rem; border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav__list a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--blue); }
  .nav__cta { margin: var(--s-4) 0 0; display: flex; }
  .nav__cta .btn { width: 100%; }
}

/* ------------------------------------------ 6. hero and the action strip */

/* A navy copy panel on the left, the photograph on the right, and a row of
   three routes immediately under it. Nothing here is decorative. */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 12% 8%, rgba(112,134,144,.20), transparent 26rem),
    radial-gradient(circle at 78% 100%, rgba(255,255,255,.055), transparent 30rem),
    linear-gradient(135deg, #263037 0%, #2d383f 52%, #222b30 100%);
  color: var(--navy-mut);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.14);
}
/* The grid is full width, not inside the container, so the photograph reaches
   the right edge of the window. The copy column takes the container's own
   left margin as padding, which keeps it in line with every other section. */
/* Named-line grid: two content halves that add up to the container, with the
   page margins as their own tracks. The copy therefore starts on exactly the
   same line as the header and every section below, and the photograph runs
   out through the right margin to the edge of the window. */
.hero__grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] minmax(0, calc(var(--container) / 2))
    [mid] minmax(0, calc(var(--container) / 2))
    [content-end] minmax(var(--gutter), 1fr) [full-end];
  align-items: stretch;
  gap: 0;
}
.hero__copy {
  grid-column: content-start / mid;
  align-self: center;
  padding: var(--s-9) var(--s-8) var(--s-9) 0;
}
.hero__media { grid-column: mid / full-end; }
.hero h1 { color: var(--on-navy); font-size: var(--t-4xl); max-width: 15ch; }
.hero__lede { margin-top: var(--s-4); max-width: 44ch; font-size: var(--t-lg); color: var(--navy-mut); }
.hero .btn-row { margin-top: var(--s-6); }

/* The shipping promise is already in the bar above, so the hero carries the
   three assurances instead. */
.hero__pillars {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
}
.hero__pillars li {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: var(--navy-acc); font-size: var(--t-sm); font-weight: 600;
}
.hero__pillars svg { width: 15px; height: 15px; flex: none; }

/* The photograph. Cross-fades, with previous / next buttons rather than dots —
   a different control idiom from the other two versions. */
.hero__media { position: relative; overflow: hidden; min-height: 26rem; }
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 600ms var(--ease);
}
.hero__media img.is-active { opacity: 1; }
.hero__media:not(.is-ready) img:first-of-type { opacity: 1; }

.hero__controls {
  position: absolute; right: var(--s-4); bottom: var(--s-4);
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2);
  background: rgba(38, 48, 55, 0.90);
  border-radius: var(--r);
}
.hero:not(.is-ready) .hero__controls { display: none; }
.hero__btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--r);
  color: var(--white);
  transition: background var(--speed) var(--ease);
}
.hero__btn:hover { background: rgba(97, 119, 131, 0.32); border-color: rgba(255,255,255,.62); }
.hero__btn svg { width: 15px; height: 15px; }
.hero__btn .i-play { display: none; }
.hero__btn.is-paused .i-play { display: block; }
.hero__btn.is-paused .i-pause { display: none; }
.hero__count {
  font-family: var(--font-head); font-size: var(--t-sm); font-weight: 600;
  color: var(--white); font-variant-numeric: tabular-nums;
  padding-inline: var(--s-1);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { grid-column: 1; padding: var(--s-8) var(--gutter); order: 2; }
  .hero__media { grid-column: 1; min-height: 18rem; order: 1; }
}

/* Three routes, immediately under the hero, half-overlapping it on a wide
   screen. This is the version's conversion device. */
.routes { background: var(--tint); overflow-x: clip; }
.routes .container {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  padding-block: var(--s-6);
}
.route {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: start;
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.route:hover { border-color: var(--blue); box-shadow: var(--shadow-2); }
.route__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--r);
  background: var(--blue-50); color: var(--blue);
}
.route__icon svg { width: 21px; height: 21px; }
.route h2 {
  font-size: var(--t-md); font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 0.4em;
}
.route h2 svg { width: 0.9em; height: 0.9em; color: var(--blue);
                transition: transform var(--speed) var(--ease); }
.route:hover h2 svg { transform: translateX(3px); }
.route p { margin-top: 0.2rem; font-size: var(--t-sm); color: var(--ink-3); max-width: none; }

/* ----------------------------------------------- 7. section heads and panels */

/* Centred, with a rule under the heading. Version 01 left-aligns these and
   Version 02 runs them as a label and a rule; this one is symmetric. */
.sechead { text-align: center; max-width: 46rem; margin: 0 auto var(--s-7); }
.sechead h2 { margin-top: var(--s-2); }
.sechead p { margin: var(--s-3) auto 0; color: var(--ink-2); font-size: var(--t-md); }
.sechead--left { text-align: left; margin-inline: 0; }
.sechead--left p { margin-inline: 0; }

/* A bordered box with a header bar. The structural unit of this version. */
.panel {
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.panel__head {
  padding: var(--s-4) var(--s-5);
  background: var(--tint);
  border-bottom: 1px solid var(--line);
}
.panel__head h2, .panel__head h3 { font-size: var(--t-md); }
.panel__body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.panel__body p { max-width: none; }

/* A definition-style contact list, the sort a procurement office expects. */
.deflist { display: grid; gap: 0; }
.deflist > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-base);
}
.deflist > div:last-child { border-bottom: 0; }
.deflist dt {
  font-family: var(--font-head); font-weight: 600; color: var(--ink);
}
.deflist dd { margin: 0; color: var(--ink-2); }
.deflist a { text-decoration: none; }
.deflist a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .deflist > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

/* ---------------------------------------------------------- 8. feature strip */

.features { display: grid; gap: var(--s-5); }
.feature {
  display: grid; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  align-content: start;
}
.feature__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue-50); color: var(--blue);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--t-md); }
.feature p { font-size: var(--t-sm); color: var(--ink-2); max-width: none; }

/* A checked list, used for the service points and the portal benefits. */
.checks { display: grid; gap: var(--s-3); }
.checks li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.65em;
  align-items: start;
  font-size: var(--t-base); color: var(--ink-2);
}
.checks svg { width: 1.1em; height: 1.1em; margin-top: 0.28em; color: var(--green); flex: none; }

/* --------------------------------------------- 9. category grid and A-Z index */

.catalog { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 1000px) { .catalog { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* The index. Eighteen categories is enough that a jump list earns its place,
   and it is the kind of thing this version's visitor reaches for. */
.index { position: sticky; top: 100px; }
.index h2 {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--line);
}
.index ul { margin-top: var(--s-2); display: grid; }
.index a {
  display: block; padding: 0.45rem var(--s-2); border-radius: var(--r);
  font-size: var(--t-sm); color: var(--ink-2); text-decoration: none;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.index a:hover { background: var(--blue-50); color: var(--blue-700); }
@media (max-width: 1000px) {
  .index { position: static; }
  .index ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
}

.cards {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.card {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.card:hover { border-color: var(--blue); box-shadow: var(--shadow-2); }
.card__media { aspect-ratio: 4 / 3; background: var(--tint-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body {
  padding: var(--s-4); display: grid; gap: 0.3rem; align-content: start;
}
.card h3 { font-size: var(--t-base); }
.card__go {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--font-head); font-size: var(--t-sm); font-weight: 600;
  color: var(--blue);
}
.card__go svg { width: 0.95em; height: 0.95em; transition: transform var(--speed) var(--ease); }
.card:hover .card__go svg { transform: translateX(3px); }

/* Eight tiles should read as two rows of four, not five-plus-three. */
.cards--four { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

/* A fixed column count, for an editor who wants one. The min(100%, …) keeps
   a fixed count from overflowing a narrow screen before the query below. */
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

@media (max-width: 640px) {
  .cards, .cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .card__body { padding: var(--s-3); }
}

/* ------------------------------------------------- 10. inner page headers */

.pagehead {
  background: var(--tint);
  overflow-x: clip;
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-7) var(--s-8);
}
.pagehead__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-4) var(--s-8); align-items: end;
}
@media (max-width: 900px) { .pagehead__grid { grid-template-columns: minmax(0, 1fr); } }
.pagehead p { font-size: var(--t-md); color: var(--ink-2); }

.crumbs { margin-bottom: var(--s-3); font-size: var(--t-sm); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4em; list-style: none; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--blue-700); text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 0.4em; color: var(--line-2); }

/* ---------------------------------------------------------------- 11. forms */

.form { display: grid; gap: var(--s-6); }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.form legend {
  padding: 0 0 var(--s-3);
  font-family: var(--font-head); font-size: var(--t-md); font-weight: 600; color: var(--ink);
  width: 100%; border-bottom: 1px solid var(--line); margin-bottom: var(--s-2);
}

.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s-4); }

.field { display: grid; gap: 0.3rem; }
.field label {
  font-family: var(--font-head); font-size: var(--t-sm); font-weight: 600; color: var(--ink);
}
.field .req { color: #A02121; }

.field input, .field select, .field textarea {
  width: 100%; min-height: 46px;
  padding: 0.6rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-family: var(--font-body); font-size: var(--t-base); color: var(--ink);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 1rem center, right 0.65rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field__hint { font-size: var(--t-sm); color: var(--ink-3); }

.form__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  padding-top: var(--s-2);
}
.form__note { font-size: var(--t-sm); color: var(--ink-3); max-width: 34rem; }

.required-note {
  font-size: var(--t-sm); color: var(--ink-3);
  padding: var(--s-3) var(--s-4);
  background: var(--tint); border-radius: var(--r);
}
.required-note .req { color: #A02121; font-weight: 600; }

.needs-copy {
  padding: var(--s-4);
  background: var(--tint);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  font-size: var(--t-sm); color: var(--ink-2);
}
.needs-copy::before {
  content: "Copy needed from client"; display: block; margin-bottom: 0.35rem;
  font-family: var(--font-head); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue);
}
.needs-copy p { max-width: none; }
.needs-copy p + p { margin-top: 0.45rem; }

/* ---------------------------------------------------------------- 12. prose */

.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); font-size: var(--t-xl); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose ol { padding-left: 1.4em; list-style: decimal; }
.prose li + li { margin-top: 0.3rem; }
.prose p, .prose li { max-width: none; }

.sidenav { position: sticky; top: 100px; display: grid; gap: 0.1rem; }
.sidenav h2 {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); margin-bottom: var(--s-2);
}
.sidenav a {
  display: block; padding: 0.45rem var(--s-2); border-radius: var(--r);
  font-size: var(--t-sm); color: var(--ink-2); text-decoration: none;
}
.sidenav a:hover { background: var(--blue-50); color: var(--blue-700); }
@media (max-width: 900px) { .sidenav { position: static; } }

/* ------------------------------------------------- 13. call to action, footer */

.cta { background: var(--navy); color: var(--navy-mut); }
.cta .container {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5) var(--s-8); align-items: center;
  padding-block: var(--s-8);
}
.cta h2 { color: var(--on-navy); max-width: 22ch; }
.cta p { margin-top: var(--s-3); max-width: 52ch; }
@media (max-width: 860px) { .cta .container { grid-template-columns: minmax(0, 1fr); } }

.footer { background: var(--tint); border-top: 1px solid var(--line); color: var(--ink-2); }
.footer .container { padding-block: var(--s-8) var(--s-4); }
.footer__grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr));
  padding-bottom: var(--s-6); border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
}
.footer h2 {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-3);
}
.footer ul { display: grid; gap: 0.4rem; font-size: var(--t-base); }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--blue-700); text-decoration: underline; }
.footer address { font-style: normal; display: grid; gap: 0.4rem; font-size: var(--t-base); }
.footer__mark img { width: 170px; }
.footer__mark p { margin-top: var(--s-3); font-size: var(--t-sm); max-width: 26rem; }

.signup { margin-top: var(--s-4); display: grid; gap: 0.4rem; max-width: 22rem; }
.signup label { font-family: var(--font-head); font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.signup__row { display: flex; gap: var(--s-2); }
.signup input {
  flex: 1; min-width: 0; min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--white); font-size: var(--t-base);
}
.signup input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); outline: none; }
.signup input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5);
  padding-top: var(--s-4);
  font-size: var(--t-sm); color: var(--ink-3);
}
.footer__base p { max-width: none; }
.footer__base ul { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--t-sm); }

/* --------------------------------------------------------------- 14. motion */

/* Every entrance in this version is one of five moves, declared on the element
   as `data-anim`, and every one of them is gated on the `js` class the script
   adds to <html>. That gate is the whole contract: if the script never runs,
   never finishes, or is switched off, the stylesheet has said nothing about
   opacity and the page is simply painted. Nothing here is load-bearing.

   Only `opacity`, `transform` and `clip-path` are animated, so no entrance can
   move anything else on the page. */

.js [data-anim] { opacity: 0; }
.js [data-anim="up"]    { transform: translate3d(0, 26px, 0); }
.js [data-anim="down"]  { transform: translate3d(0, -20px, 0); }
.js [data-anim="left"]  { transform: translate3d(-32px, 0, 0); }
.js [data-anim="right"] { transform: translate3d(32px, 0, 0); }
.js [data-anim="zoom"]  { transform: scale(0.965); }

.js [data-anim].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--enter) var(--ease-enter),
              transform var(--enter) var(--ease-enter);
  transition-delay: var(--delay, 0ms);
}

/* A photograph does not fade in — it is uncovered, bottom edge upward, while
   the picture inside settles back from a slight overscale. It is the one
   flourish this version allows itself. */
.js .shot[data-anim="reveal"] { opacity: 1; clip-path: inset(0 0 101% 0); }
.js .shot[data-anim="reveal"] img { transform: scale(1.09); }
.js .shot[data-anim="reveal"].is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--enter-slow) var(--ease-enter);
  transition-delay: var(--delay, 0ms);
}
.js .shot[data-anim="reveal"].is-in img {
  transform: none;
  transition: transform 1200ms var(--ease-enter);
  transition-delay: var(--delay, 0ms);
}

/* A container marked `data-stagger` brings its own children in one after the
   other. The delays are in the stylesheet rather than written onto each node
   by the script, so the markup stays clean and a child added by hand later
   inherits the rhythm without anyone remembering to renumber it. */
.js [data-stagger] > * { opacity: 0; transform: translate3d(0, 22px, 0); }
.js [data-stagger].is-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--enter) var(--ease-enter),
              transform var(--enter) var(--ease-enter);
}
.js [data-stagger].is-in > *:nth-child(1)  { transition-delay: calc(var(--step) * 0); }
.js [data-stagger].is-in > *:nth-child(2)  { transition-delay: calc(var(--step) * 1); }
.js [data-stagger].is-in > *:nth-child(3)  { transition-delay: calc(var(--step) * 2); }
.js [data-stagger].is-in > *:nth-child(4)  { transition-delay: calc(var(--step) * 3); }
.js [data-stagger].is-in > *:nth-child(5)  { transition-delay: calc(var(--step) * 4); }
.js [data-stagger].is-in > *:nth-child(6)  { transition-delay: calc(var(--step) * 5); }
.js [data-stagger].is-in > *:nth-child(7)  { transition-delay: calc(var(--step) * 6); }
.js [data-stagger].is-in > *:nth-child(8)  { transition-delay: calc(var(--step) * 7); }
.js [data-stagger].is-in > *:nth-child(9)  { transition-delay: calc(var(--step) * 8); }
.js [data-stagger].is-in > *:nth-child(10) { transition-delay: calc(var(--step) * 9); }
.js [data-stagger].is-in > *:nth-child(11) { transition-delay: calc(var(--step) * 10); }
.js [data-stagger].is-in > *:nth-child(12) { transition-delay: calc(var(--step) * 11); }
/* Past twelve the wait stops being choreography and starts being a delay, so
   everything after the twelfth arrives with it. */
.js [data-stagger].is-in > *:nth-child(n + 13) { transition-delay: calc(var(--step) * 11); }

/* A tighter step where the items are small and there are a lot of them. */
.js [data-stagger="tight"] { --step: 45ms; }

/* The hero is above the fold, so it is not waiting for an observer: the script
   releases it on the first frame and it plays on load. */
.js .hero__copy > * { opacity: 0; transform: translate3d(0, 20px, 0); }
.js .hero.is-loaded .hero__copy > * {
  opacity: 1; transform: none;
  transition: opacity var(--enter-slow) var(--ease-enter),
              transform var(--enter-slow) var(--ease-enter);
}
.js .hero.is-loaded .hero__copy > *:nth-child(1) { transition-delay: 80ms; }
.js .hero.is-loaded .hero__copy > *:nth-child(2) { transition-delay: 160ms; }
.js .hero.is-loaded .hero__copy > *:nth-child(3) { transition-delay: 250ms; }
.js .hero.is-loaded .hero__copy > *:nth-child(4) { transition-delay: 340ms; }
.js .hero.is-loaded .hero__copy > *:nth-child(5) { transition-delay: 430ms; }

.js .hero__media { clip-path: inset(0 0 0 101%); }
.js .hero.is-loaded .hero__media {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1000ms var(--ease-enter) 120ms;
}
@media (max-width: 900px) {
  /* Stacked, the photograph is above the copy, so it is uncovered downward. */
  .js .hero__media { clip-path: inset(0 0 101% 0); }
  .js .hero.is-loaded .hero__media { clip-path: inset(0 0 0 0); }
}

/* The photograph drifts, very slowly, for as long as it is the one showing.
   Twelve seconds across seven per cent is below the rate at which motion
   reads as motion; it reads as depth. */
.hero__media img.is-active { animation: drift 12s linear forwards; }
@keyframes drift {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Hover and focus. Small, quick, and never more than one property moving. */
.btn { transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease),
                   color var(--speed) var(--ease), transform var(--speed) var(--ease),
                   box-shadow var(--speed) var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn svg:last-child { transition: transform var(--speed) var(--ease); }
.btn:hover svg:last-child { transform: translateX(3px); }

.card__media img { transition: transform 520ms var(--ease-enter); }
.card:hover .card__media img { transform: scale(1.06); }

.route { transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
                     transform var(--speed) var(--ease); }
.route:hover { transform: translateY(-2px); }
.route__icon { transition: background var(--speed) var(--ease), color var(--speed) var(--ease); }
.route:hover .route__icon { background: var(--blue); color: var(--white); }

.feature__icon { transition: background var(--speed) var(--ease), color var(--speed) var(--ease); }
.feature:hover .feature__icon { background: var(--blue); color: var(--white); }

/* The navigation draws its own underline on hover; the current page keeps the
   permanent one it already had. */
.nav__list a { position: relative; }
.nav__list a::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.25rem;
  height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 240ms var(--ease-enter);
}
.nav__list a:hover::after { transform: scaleX(1); }
.nav__list a[aria-current="page"]::after { display: none; }

/* --------------------------------------------------------------------------
   Reduced motion. Not a softening — a switch. Every entrance is resolved to
   its finished state, the drift stops, and the top bar does not travel.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .js [data-anim],
  .js [data-stagger] > *,
  .js .hero__copy > * { opacity: 1 !important; transform: none !important; }
  .js .shot[data-anim="reveal"],
  .js .hero__media { clip-path: none !important; }
  .js .shot[data-anim="reveal"] img { transform: none !important; }
  .hero__media img.is-active { animation: none; transform: none; }
  .topbar, .topbar.is-scrolled { transform: none; }
  .btn:hover, .route:hover { transform: none; }
  .progress { display: none; }
}

/* --------------------------------------------------------- 15. utilities */

.center { text-align: center; }
.center p, .center .btn-row { margin-inline: auto; justify-content: center; }

/* Touch. The footer's link lists are set tight on a desktop; on a phone each
   one needs a target a thumb can hit, so the hit area grows around the type. */
@media (max-width: 720px) {
  .footer ul { gap: 0; }
  .footer ul a, .footer address a, .footer__base a, .sidenav a, .index a,
  .deflist dd a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .footer address { gap: 0; }
}

@media print {
  .utility, .masthead, .topbar, .progress,
  .hero__controls, .cta, .signup, .index, .sidenav { display: none; }
  /* Nothing may be left mid-entrance on paper. */
  [data-anim], [data-stagger] > *, .hero__copy > * { opacity: 1 !important; transform: none !important; }
  .shot[data-anim="reveal"], .hero__media { clip-path: none !important; }
  body { background: #fff; color: #000; }
  .hero { background: #fff; color: #000; }
  .hero h1, .hero__lede { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ===========================================================================
   16. WordPress
   ---------------------------------------------------------------------------
   Everything below exists because the site is now WordPress rather than files
   on a disk: core block classes, the admin bar, the editor's alignment
   options, and the markup that three different form plugins emit. The design
   above is untouched.
   ======================================================================== */

/* --- the admin bar is fixed, so the sticky header has to start below it -- */
body.admin-bar .topbar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .topbar { top: 46px; }
}
body.admin-bar { --im-adminbar: 32px; }

/* --- core block alignment inside the theme's own container ---------------

   A page is a stack of two kinds of thing. The theme's own blocks each draw
   their own full-width section with a container inside it, so they must not be
   constrained here. Everything else — a paragraph, a heading, an image an
   editor dropped between two sections — has no container of its own, so it
   gets one: the same width, from the same custom property, as .container.

   The exceptions are named, so a block this theme has never seen is given a
   container rather than allowed to run edge to edge. That is the right
   default: a paragraph that is too narrow is a small mistake, and one that
   runs the full width of a 27-inch monitor is an unreadable page. */
main > .entry-content > * { margin-inline: auto; }

main > .entry-content > :not(.section, .routes, .hero, .cta, .alignfull, .alignwide) {
  width: min(100% - var(--gutter) * 2, var(--container));
}

/* A block an editor has made wide or full keeps that intent. */
main > .entry-content > .alignwide,
main > .entry-content > .alignfull { width: auto; }

/* A section heading introduces the section under it. Left alone the two each
   contribute their own vertical padding and the heading ends up floating
   midway between the section it belongs to and the one above. The heading
   takes the space; the section it introduces gives its top padding up. */
main > .entry-content > .is-style-im-sechead { padding-top: var(--s-9); }
main > .entry-content > .is-style-im-sechead + :is(.section, .routes) { padding-top: 0; }
.entry-content > .alignwide { width: min(100% - var(--gutter) * 2, 1440px); }
.entry-content > .alignfull { width: 100%; max-width: none; }
.entry-content > .alignfull > .container { margin-inline: auto; }

.wp-block-image img { height: auto; }
.wp-block-image.aligncenter { margin-inline: auto; }
.wp-block-image figcaption,
.wp-block-embed figcaption {
  font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2);
}

.wp-block-separator {
  border: 0; border-top: 1px solid var(--line); margin-block: var(--s-7);
}
.wp-block-quote {
  border-left: 3px solid var(--blue); padding-left: var(--s-5);
  margin-block: var(--s-6); font-size: var(--t-md);
}
.wp-block-quote cite {
  display: block; margin-top: var(--s-3);
  font-size: var(--t-sm); font-style: normal; color: var(--ink-3);
}
.wp-block-table { font-size: var(--t-base); }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table :is(th, td) {
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line); text-align: left;
}
.wp-block-table thead th { background: var(--tint); font-family: var(--font-head); }

/* Core buttons take the theme's button, so an editor using the normal Buttons
   block gets the real thing rather than a lookalike. */
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 46px; padding: 0.6rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--blue); color: var(--white);
  font-family: var(--font-head); font-size: var(--t-base); font-weight: 600;
  text-decoration: none;
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}
.wp-block-button__link:hover { background: var(--blue-700); color: var(--white); transform: translateY(-1px); }
.wp-block-button.is-style-outline .wp-block-button__link,
.is-style-outline > .wp-block-button__link {
  background: var(--white); color: var(--blue); border-color: var(--line-2);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--blue-50); border-color: var(--blue); color: var(--blue-700);
}
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --- block styles the theme adds ---------------------------------------- */

/* A list that reads as assurances rather than as bullets. */
.is-style-im-checks { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.is-style-im-checks li {
  position: relative; padding-left: 1.75em;
  font-size: var(--t-base); color: var(--ink-2);
}
.is-style-im-checks li::before {
  content: ""; position: absolute; left: 0; top: 0.34em;
  width: 1.05em; height: 1.05em;
  background: var(--green);
  -webkit-mask: var(--im-check) center / contain no-repeat;
          mask: var(--im-check) center / contain no-repeat;
}

/* A short aside, and the placeholder left where the client still owes copy. */
.is-style-im-note {
  padding: var(--s-4);
  background: var(--tint);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  font-size: var(--t-sm); color: var(--ink-2); max-width: none;
}

/* A lede paragraph, for the first line of a page. */
.is-style-im-lede { font-size: var(--t-md); color: var(--ink-2); }

/* The small blue label above a heading. A paragraph, not a heading: it reads
   as part of the title but it is not a level in the document outline, and a
   screen reader announcing "heading, Why Impact Medical, heading, A leader in
   the medical supply industry" is the outline lying about the page. */
.is-style-im-eyebrow {
  font-family: var(--font-head);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 0;
}

/* The centred eyebrow / title / line unit above a grid. The `sechead` class
   that carries the layout is added by inc/blocks.php; these rules only undo
   what the core layout wrapper would otherwise impose on it. */
.is-style-im-sechead { padding-inline: 0; }
.is-style-im-sechead > * { margin-block: 0; }
.is-style-im-sechead > * + * { margin-top: var(--s-2); }

/* A pulled-out remark. */
.is-style-im-callout {
  margin: 0; padding: var(--s-4) var(--s-5);
  background: var(--blue-50);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  font-size: var(--t-md); font-style: normal; color: var(--ink);
}
.is-style-im-callout cite { color: var(--ink-3); }

/* A photograph with the mount the design uses for documents and certificates. */
.is-style-im-framed img {
  padding: var(--s-2); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
}

/* A specification table: labels on the left, values on the right. */
.is-style-im-spec :is(th, td) { vertical-align: top; }
.is-style-im-spec th[scope="row"] {
  width: 32%; font-family: var(--font-head); font-weight: 600;
  color: var(--ink); background: transparent;
}

/* --- editorial content inside a theme section --------------------------- */
.entry-content > * + * { margin-top: var(--s-4); }
.entry-content > :is(h2, h3, h4) { margin-top: var(--s-7); }
.entry-content > :first-child { margin-top: 0; }

/* A theme section brings its own padding; anything else at the top or bottom
   of a page would otherwise sit flush against the page head or the closing
   band, which reads as a rendering fault rather than as a design. */
main > .entry-content > :not(.section, .routes, .hero, .cta):first-child { margin-top: var(--s-9); }
main > .entry-content > :not(.section, .routes, .hero, .cta):last-child { margin-bottom: var(--s-9); }
main > .entry-content > :is(.section, .routes, .hero, .cta) + * { margin-top: 0; }
main > .entry-content > * + :is(.section, .routes, .hero, .cta) { margin-top: 0; }
.entry-content :is(ul, ol):not([class]) { padding-left: 1.2em; }
.entry-content :is(ul, ol):not([class]) li + li { margin-top: 0.3rem; }

/* --- form plugins ------------------------------------------------------- */
/* Contact Form 7, WPForms and Gravity Forms each emit their own wrappers.
   Rather than restyling three plugins, the theme's own field rules are
   extended to their markup so a dropped-in form inherits the design. */
.wpcf7 label,
.wpforms-field-label,
.gform_wrapper .gfield_label {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--font-head); font-size: var(--t-sm); font-weight: 600; color: var(--ink);
}
.wpcf7 :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], select, textarea),
.wpforms-container :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], select, textarea),
.gform_wrapper :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], select, textarea) {
  width: 100%; min-height: 46px;
  padding: 0.6rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-family: var(--font-body); font-size: var(--t-base); color: var(--ink);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.wpcf7 :is(input, select, textarea):focus,
.wpforms-container :is(input, select, textarea):focus,
.gform_wrapper :is(input, select, textarea):focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); outline: none;
}
.wpcf7 :is(input, select, textarea):focus-visible,
.wpforms-container :is(input, select, textarea):focus-visible,
.gform_wrapper :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.wpcf7 input[type=submit],
.wpforms-submit,
.gform_wrapper .gform_button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0.6rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--blue); color: var(--white);
  font-family: var(--font-head); font-size: var(--t-base); font-weight: 600;
  cursor: pointer;
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.wpcf7 input[type=submit]:hover,
.wpforms-submit:hover,
.gform_wrapper .gform_button:hover { background: var(--blue-700); transform: translateY(-1px); }

.wpcf7-not-valid-tip,
.wpforms-error,
.gform_wrapper .gfield_description.validation_message {
  font-size: var(--t-sm); color: #A02121; margin-top: 0.3rem;
}
.wpcf7-response-output {
  margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: var(--r); font-size: var(--t-sm);
}

/* --- states the static site never had ----------------------------------- */
.im-empty {
  padding: var(--s-7) var(--s-5);
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: var(--tint);
  text-align: center; color: var(--ink-3); font-size: var(--t-base);
}
.im-empty strong { display: block; color: var(--ink); font-family: var(--font-head); margin-bottom: 0.3rem; }

.im-notice {
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--tint); border: 1px solid var(--line);
  border-left: 4px solid var(--blue); border-radius: var(--r);
  font-size: var(--t-sm); color: var(--ink-2);
}

/* Search results and the blog archive reuse the card grid. */
.im-result { padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.im-result:first-child { padding-top: 0; }
.im-result h2 { font-size: var(--t-lg); margin-bottom: 0.3rem; }
.im-result__meta { font-size: var(--t-sm); color: var(--ink-3); }
.im-result p { font-size: var(--t-base); margin-top: 0.4rem; }

.im-pagination {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-7); align-items: center;
}
.im-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--font-head); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.im-pagination .page-numbers:hover { border-color: var(--blue); color: var(--blue-700); }
.im-pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: var(--white); }

.im-search-form { display: flex; gap: var(--s-2); max-width: 30rem; }
.im-search-form input[type=search] {
  flex: 1; min-height: 46px; padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-2); border-radius: var(--r); font-size: var(--t-base);
}
.im-search-form input[type=search]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); outline: none; }

/* The check glyph used by the list block style, as a data URI so the style
   needs no sprite and no extra request. */
:root {
  --im-check: 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.4'%3E%3Cpath d='m4 12.5 5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Premium refinement — brand palette, wider rhythm and tactile micro-detail.
   The WordPress architecture remains unchanged; these are presentation-only
   improvements to bring the theme closer to the established brand.
   ------------------------------------------------------------------------- */
.container { width: min(100% - var(--gutter) * 2, var(--container)); }

.btn {
  box-shadow: 0 1px 0 rgba(38, 48, 55, 0.05);
}
.btn--primary {
  box-shadow: 0 5px 14px -8px rgba(38, 48, 55, 0.55);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(38, 48, 55, 0.65);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  transform: translateY(-1px);
}

.card {
  transition: border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.card__media img {
  transition: transform 420ms var(--ease-enter);
}
.card:hover .card__media img {
  transform: scale(1.025);
}

.entry-content--front > * + * {
  margin-top: 0;
}

@media (min-width: 1440px) {
  :root {
    --gutter: clamp(2rem, 1rem + 1.2vw, 3rem);
  }
}

@media (max-width: 767px) {
  :root {
    --container: 1360px;
  }
}

/* ========================================================================
   1.2 Premium polish — restrained gloss, depth and editorial hierarchy
   ======================================================================== */
:root {
  --glass: rgba(255,255,255,.78);
  --glass-line: rgba(255,255,255,.62);
  --glow: rgba(97,119,131,.18);
  --shadow-premium: 0 24px 60px -30px rgba(24,34,40,.42), 0 8px 24px -16px rgba(24,34,40,.24);
  --shadow-hover: 0 30px 70px -28px rgba(24,34,40,.48), 0 12px 28px -18px rgba(24,34,40,.25);
}

body {
  background:
    radial-gradient(circle at 8% -5%, rgba(97,119,131,.055), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.9), transparent 34rem),
    var(--white);
}

.container { width: min(var(--container), calc(100% - 2 * var(--gutter))); }

.masthead { box-shadow: 0 1px 0 rgba(255,255,255,.12), 0 10px 30px -24px rgba(0,0,0,.55); }

.pagehead {
  position: relative;
  background:
    radial-gradient(circle at 82% 15%, rgba(255,255,255,.82), transparent 24rem),
    linear-gradient(135deg, #f7f8f9 0%, #eef1f2 48%, #f9fafb 100%);
  border-bottom-color: rgba(97,119,131,.18);
  padding-block: clamp(3rem, 5vw, 5rem) clamp(3.25rem, 5vw, 5.25rem);
}
.pagehead::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(93,118,134,.38), transparent);
}
.pagehead h1 { letter-spacing: -.025em; text-wrap: balance; }
.pagehead p { max-width: 58rem; font-size: clamp(1.08rem, 1rem + .35vw, 1.35rem); line-height: 1.65; }

.section { position: relative; }

.panel.premium-panel,
.card,
.feature,
.route {
  box-shadow: var(--shadow);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.panel.premium-panel {
  border-color: rgba(97,119,131,.20);
  box-shadow: var(--shadow-premium);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,251,.96));
}
.panel.premium-panel .panel__head {
  position: relative;
  padding: 1.35rem 1.5rem;
  background: linear-gradient(135deg, rgba(97,119,131,.12), rgba(255,255,255,.82) 70%);
  border-bottom-color: rgba(97,119,131,.16);
}
.panel.premium-panel .panel__head::before {
  content: "";
  position: absolute; left: 0; top: 0; width: 38%; height: 2px;
  background: linear-gradient(90deg, var(--blue), rgba(93,118,134,0));
}
.panel.premium-panel .panel__head h2 { font-size: clamp(1.3rem, 1.15rem + .45vw, 1.65rem); margin-top: .2rem; }
.panel.premium-panel .panel__body { padding: clamp(1.35rem, 1rem + 1vw, 2rem); }

.premium-shot {
  border: 1px solid rgba(97,119,131,.18);
  box-shadow: var(--shadow-premium);
  background: #e9edef;
}
.premium-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 35%, rgba(38,48,55,.08));
  mix-blend-mode: soft-light;
}
.premium-shot img { transition: transform 700ms var(--ease), filter 700ms var(--ease); }
.premium-shot:hover img { transform: scale(1.025); filter: saturate(1.04) contrast(1.02); }

.contact-layout,
.portal-layout { gap: clamp(1.5rem, 3vw, 3.5rem); }
.contact-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.contact-aside { display: grid; gap: 1.25rem; align-content: start; }
.portal-layout { grid-template-columns: minmax(19rem, .78fr) minmax(0, 1.22fr); }
.portal-info { padding: clamp(.25rem, 1vw, 1rem) 0; }
.portal-info h2 { margin-top: .35rem; font-size: clamp(2rem, 1.6rem + 1.5vw, 3.2rem); text-wrap: balance; }
.portal-intro { margin-top: 1rem; color: var(--ink-2); font-size: var(--t-md); max-width: 50ch; }
.premium-checks { margin-top: 1.5rem; gap: .9rem; }
.premium-checks li { padding: .7rem .8rem; border: 1px solid rgba(97,119,131,.12); border-radius: .65rem; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(242,245,246,.72)); }
.premium-checks svg { color: var(--blue); }
.portal-shot { margin-top: 1.75rem; }
.portal-note { margin-top: 1rem; color: var(--ink-3); font-size: var(--t-sm); }

.field input, .field select, .field textarea {
  min-height: 50px;
  border-color: rgba(93,118,134,.30);
  background: linear-gradient(180deg, #fff, #fbfcfc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(38,48,55,.03);
}
.field textarea { min-height: 10rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(97,119,131,.12), 0 8px 20px -14px rgba(38,48,55,.45);
}
.btn--primary {
  background: linear-gradient(135deg, #6a838e 0%, #526a76 100%);
  border-color: #526a76;
  box-shadow: 0 10px 24px -14px rgba(55,77,88,.7), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:hover { background: linear-gradient(135deg, #78909a, #465e6a); }
.btn--secondary { box-shadow: 0 8px 20px -16px rgba(38,48,55,.35); }

.card:hover, .feature:hover, .route:hover, .panel.premium-panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

@media (max-width: 760px) {
  .contact-layout, .portal-layout { grid-template-columns: 1fr; }
  .contact-aside { order: 0; }
}
@media (max-width: 640px) {
  .pagehead { padding-block: 2.75rem 3.25rem; }
  .panel.premium-panel .panel__body { padding: 1.15rem; }
}


/* ========================================================================
   1.3 Premium brand refinement — polished slate, not generic blue
   ======================================================================== */
:root {
  --brand-deep: #263037;
  --brand-slate: #617783;
  --brand-slate-deep: #465E6A;
  --brand-silver: #D9DFE1;
  --brand-mist: #EEF2F3;
  --brand-pearl: #F7F9F9;
  --brand-border: rgba(97,119,131,.18);
  --brand-glass: rgba(255,255,255,.76);
  --shadow-gloss: 0 22px 55px -30px rgba(31,41,47,.46), 0 8px 22px -15px rgba(31,41,47,.22);
}

body {
  background:
    radial-gradient(circle at 0% 0%, rgba(97,119,131,.045), transparent 30rem),
    radial-gradient(circle at 100% 18%, rgba(255,255,255,.95), transparent 32rem),
    #fff;
}

/* Keep every interactive brand surface in the same charcoal/slate family. */
a, .textlink { color: var(--brand-slate-deep); }
a:hover, .textlink:hover { color: var(--brand-deep); }
.eyebrow, .is-style-im-eyebrow { color: var(--brand-slate-deep); }

.btn--primary,
.wp-block-button__link,
.wpcf7 input[type=submit],
.wpforms-submit,
.gform_wrapper .gform_button {
  background: linear-gradient(135deg, #6A838E 0%, #526A76 55%, #465E6A 100%);
  border-color: #526A76;
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(38,48,55,.72), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn--primary:hover,
.btn--primary:focus-visible,
.wp-block-button__link:hover,
.wpcf7 input[type=submit]:hover,
.wpforms-submit:hover,
.gform_wrapper .gform_button:hover {
  background: linear-gradient(135deg, #78909A 0%, #5B7480 55%, #465E6A 100%);
  border-color: #465E6A;
}

.btn--secondary {
  background: linear-gradient(180deg, #fff, #F3F6F7);
  color: var(--brand-slate-deep);
  border-color: #C7D0D4;
}
.btn--secondary:hover { background: #EEF2F3; border-color: #617783; color: #263037; }

/* Hero CTAs intentionally have no blue fill. */
.hero .btn--onnavy {
  background: linear-gradient(180deg, #FFFFFF, #E9EEF0);
  color: #263037;
  border-color: rgba(255,255,255,.74);
  box-shadow: 0 12px 26px -18px rgba(0,0,0,.72), inset 0 1px 0 #fff;
}
.hero .btn--onnavy:hover { background: #fff; color: #263037; transform: translateY(-1px); }
.hero .btn--ghostnavy {
  background: rgba(255,255,255,.035);
  color: #fff;
  border-color: rgba(255,255,255,.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.hero .btn--ghostnavy:hover { background: rgba(97,119,131,.28); border-color: rgba(255,255,255,.62); color: #fff; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.035), transparent 24%, transparent 72%, rgba(255,255,255,.025));
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(38,48,55,.10), transparent 30%, transparent 70%, rgba(38,48,55,.12));
}
.hero__controls { border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); }
.hero__btn { background: rgba(255,255,255,.055); }

.pagehead {
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.95), transparent 24rem),
    radial-gradient(circle at 10% 100%, rgba(97,119,131,.07), transparent 28rem),
    linear-gradient(135deg, #F6F8F8 0%, #EDF1F2 52%, #F9FAFA 100%);
  border-bottom-color: rgba(97,119,131,.16);
}
.pagehead::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}

.panel.premium-panel {
  border-color: var(--brand-border);
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,249,249,.97));
  box-shadow: var(--shadow-gloss);
}
.panel.premium-panel .panel__head {
  background: linear-gradient(135deg, rgba(97,119,131,.105), rgba(255,255,255,.88) 72%);
  border-bottom-color: rgba(97,119,131,.14);
}
.panel.premium-panel .panel__head::before {
  background: linear-gradient(90deg, #617783, rgba(97,119,131,0));
}

.field input, .field select, .field textarea {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFA 100%);
  border-color: #C9D1D5;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #8EA0A8; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #617783;
  box-shadow: 0 0 0 4px rgba(97,119,131,.12), 0 8px 22px -16px rgba(38,48,55,.45);
}

.premium-checks li {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,243,244,.80));
  border-color: rgba(97,119,131,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.premium-checks svg { color: #617783; }

/* The portal/contact composition should feel like one deliberate system. */
.contact-layout, .portal-layout { align-items: start; }
.contact-form-panel, .portal-login-panel { position: relative; }
.contact-form-panel::after, .portal-login-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.34), transparent 26%);
}

/* Privacy/legal pages: editorial reading layout, never heading/paragraph side-by-side. */
.privacy-layout { align-items: start; }
.privacy-prose {
  max-width: none;
  width: 100%;
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
  border: 1px solid rgba(97,119,131,.13);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,250,250,.96));
  box-shadow: 0 18px 46px -34px rgba(38,48,55,.38);
}
.privacy-prose h2 {
  font-size: clamp(1.35rem, 1.15rem + .5vw, 1.85rem);
  line-height: 1.25;
  margin-top: clamp(2rem, 3vw, 3rem);
  padding-top: .25rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgba(97,119,131,.12);
}
.privacy-prose h2:first-child { margin-top: 0; }
.privacy-prose p { max-width: 76ch; font-size: var(--t-base); color: #56636A; }
.sidenav {
  padding: 1rem;
  border: 1px solid rgba(97,119,131,.14);
  border-radius: 10px;
  background: linear-gradient(145deg, #fff, #F4F7F7);
  box-shadow: 0 16px 40px -30px rgba(38,48,55,.38);
}
.sidenav a { border-left: 2px solid transparent; }
.sidenav a:hover { border-left-color: #617783; background: #EEF2F3; }

/* Make the application page a polished two-column workspace on desktop/tablet. */
.application-layout { align-items: start; }
.application-aside { display: grid; gap: 1rem; align-content: start; }
.application-aside .panel { box-shadow: 0 16px 40px -30px rgba(38,48,55,.34); }

@media (max-width: 760px) {
  .privacy-layout { grid-template-columns: 1fr; }
  .privacy-prose { padding: 1.15rem; }
}

/* Closing bands use the same restrained slate treatment as the hero. */
.cta {
  position: relative;
  background:
    radial-gradient(circle at 85% 15%, rgba(97,119,131,.22), transparent 24rem),
    linear-gradient(135deg, #263037 0%, #303B42 56%, #252F35 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), inset 0 -1px 0 rgba(0,0,0,.12);
}
.cta::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,.025), transparent 32%, rgba(255,255,255,.018));
}
.footer {
  background: linear-gradient(180deg, #F2F5F5 0%, #E9EDEE 100%);
  border-top: 1px solid rgba(97,119,131,.14);
}
.footer a:hover { color: #263037; }

/* The endpoint notice is an implementation hint, not page content. Keep it
   available in source/admin configuration without making the public layout
   look like a broken form. */
.premium-panel .im-notice { display: none; }

/* More deliberate glossy surface for the portal/login and application cards. */
.portal-login-panel,
.contact-form-panel,
.application-panel {
  overflow: hidden;
}
.portal-login-panel::before,
.contact-form-panel::before,
.application-panel::before {
  content: "";
  position: absolute;
  width: 14rem; height: 14rem;
  top: -8rem; right: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(97,119,131,.13), transparent 68%);
  pointer-events: none;
}

@media (min-width: 1100px) {
  .portal-login-panel { position: sticky; top: 110px; }
}


/* -------------------------------------------------------------------------
 * Editor-safe placeholders and final brand polish
 * ---------------------------------------------------------------------- */
.im-editor-form-placeholder {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.1rem;
	border: 1px dashed var(--line2);
	border-radius: var(--radius);
	background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,242,243,.92));
	color: var(--ink2);
	font-size: .95rem;
}
.im-editor-form-placeholder strong { color: var(--ink); }
.im-editor-form-placeholder span { opacity: .8; }

/* ========================================================================
   1.3.4 — deterministic editorial layouts and catalogue density
   ======================================================================== */
@media (min-width: 761px) {
  .section.contact-layout-section .contact-layout,
  .section.portal-layout-section .portal-layout,
  .section.application-section .application-layout {
    display: grid !important;
    align-items: start;
    gap: clamp(2rem, 3.2vw, 4rem);
  }

  .section.contact-layout-section .contact-layout {
    grid-template-columns: minmax(0, 7fr) minmax(21rem, 5fr) !important;
  }

  .section.portal-layout-section .portal-layout {
    grid-template-columns: minmax(20rem, 5fr) minmax(0, 7fr) !important;
  }

  .section.application-section .application-layout {
    grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr) !important;
  }
}

/* Keep the related-category row intentionally four-up. Four items should not
   create a mysterious fifth empty track on wide screens. */
.cards--four {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* The complete catalogue is a four-column editorial grid beside the index. */
.product-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1120px) and (min-width: 761px) {
  .product-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--four { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .cards--four,
  .product-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .cards--four,
  .product-category-grid { grid-template-columns: 1fr; }
}

/* Give the three editorial forms the same proportions as the original
   Standard HTML design, even if a stale cached stylesheet is present. */
.contact-form-panel,
.application-panel { min-width: 0; }
.contact-aside,
.application-aside,
.portal-info { min-width: 0; }

/* Footer fallback columns remain visually identical to real WordPress menus. */
.footer__fallback-menu { display: grid; gap: .4rem; font-size: var(--t-base); margin: 0; padding: 0; list-style: none; }
.footer__fallback-menu a { color: var(--ink-2); text-decoration: none; }
.footer__fallback-menu a:hover { color: var(--blue-700); text-decoration: underline; }