/* ==========================================================================
   Luc Seguin LLC / chemicalcompliance.online - shared design system
   Extracted 1:1 from the Wix source (palette --color_xx, --font_x tokens).
   Fonts are loaded per page with a link tag to fonts.googleapis.com.
   Page agents may only APPEND page-scoped rules below, each under a banner
   comment beginning with the word page: followed by the page slug.
   ========================================================================== */

:root {
  /* palette - taken from the source --color_NN custom properties */
  --navy: #0b3c5d;          /* color_41 / color_18  rgb(11,60,93)   */
  --navy-deep: #082e47;     /* darker navy used for hover + shadows */
  --blue-mid: #2f80a9;      /* color_42  rgb(47,128,169)            */
  --teal: #1fa4a9;          /* color_43  rgb(31,164,169)            */
  --teal-dark: #178086;
  --ice: #f4f7fa;           /* color_44  rgb(244,247,250)           */
  --white: #ffffff;         /* color_36 / color_11                  */
  --black: #000000;         /* color_37  body copy                  */
  --grey-line: #e2e6ea;
  --grey-soft: #c7c7c7;     /* color_39                             */
  --grey-mid: #595959;      /* color_40                             */

  /* typography - Wix used Fira Sans Bold for headings, Lato for body */
  --font-head: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-h1: 60px;   /* font_0 */
  --fs-h2: 40px;   /* font_2 */
  --fs-h3: 27px;   /* font_5 */
  --fs-h6: 25px;   /* font_6 */
  --fs-body: 20px;
  --fs-small: 16px;
  --fs-tiny: 14px;

  /* rhythm */
  --wrap: 1120px;
  --wrap-narrow: 980px;
  --sec-pad: 92px;
  --gap: 24px;

  /* radii + shadows */
  --r-sm: 6px;
  --r-btn: 10px;
  --r-card: 15px;
  --r-lg: 24px;
  --shadow-card: 0 1px 4px 0 rgba(0, 0, 0, .25);
  --shadow-soft: 0 8px 24px rgba(11, 60, 93, .10);

  /* motion - the source ran Wix entrance motion at 1200ms on this curve */
  --ease-motion: cubic-bezier(.645, .045, .355, 1);
  --dur-motion: 1200ms;
  --dur-hover: .2s;
  --dur-slow: .4s;
}

/* --------------------------------------------------------------------------
   reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4em;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.4em;
  color: var(--navy);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; cursor: pointer; }

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

ul { list-style: none; margin: 0; padding: 0; }

button { font: inherit; }

.ap-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  z-index: 200;
}
.ap-skip:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   layout helpers
   -------------------------------------------------------------------------- */

.ap-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.ap-section { position: relative; padding: var(--sec-pad) 0; }
.ap-section--tight { padding: 64px 0; }
.ap-section--white { background: var(--white); }
.ap-section--ice { background: var(--ice); }
.ap-section--navy { background: var(--navy); color: var(--white); }
.ap-section--navy h1,
.ap-section--navy h2,
.ap-section--navy h3,
.ap-section--navy h4,
.ap-section--navy h5,
.ap-section--navy h6 { color: var(--white); }

/* a navy band that carries a photograph behind it at low opacity, exactly as
   the source did with --fill-layer-image-opacity on its section background */
.ap-section--photo { background: var(--navy); color: var(--white); }
.ap-section--photo > .ap-bandimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .25;
  pointer-events: none;
  z-index: 0;
}
.ap-section--photo > .ap-wrap { position: relative; z-index: 1; }
.ap-section--photo h1,
.ap-section--photo h2,
.ap-section--photo h3,
.ap-section--photo h4,
.ap-section--photo h5,
.ap-section--photo h6 { color: var(--white); }

.ap-grid { display: grid; gap: 48px; align-items: center; }
.ap-grid--2 { grid-template-columns: 1fr 1fr; }
.ap-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ap-grid--4 { grid-template-columns: repeat(4, 1fr); }

.ap-center { text-align: center; }
.ap-center .ap-eyebrow { justify-content: center; }

/* --------------------------------------------------------------------------
   eyebrow + section headings
   -------------------------------------------------------------------------- */

.ap-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4em;
  color: var(--teal);
}
.ap-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--teal);
  flex: none;
}
.ap-center .ap-eyebrow::after {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--teal);
  flex: none;
}

.ap-section-title { margin: 0 0 22px; }
.ap-section--navy .ap-eyebrow,
.ap-section--photo .ap-eyebrow { color: var(--teal); }

.ap-lead { font-size: var(--fs-body); }

/* --------------------------------------------------------------------------
   buttons - source: teal fill, 10px radius, white Lato label,
   hover to navy with 0.05em letter spacing
   -------------------------------------------------------------------------- */

.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--dur-hover) ease, letter-spacing var(--dur-hover) ease, color var(--dur-hover) ease;
}
.ap-btn:hover,
.ap-btn:focus-visible { background: var(--navy); letter-spacing: .05em; }
.ap-section--navy .ap-btn:hover,
.ap-section--photo .ap-btn:hover { background: var(--navy-deep); }

.ap-btn--sm { padding: 11px 18px; font-size: 13px; }
.ap-btn--lg { padding: 15px 26px; font-size: 14px; }

/* --------------------------------------------------------------------------
   header - white top bar with the logo, language control, LinkedIn and CTA,
   then the full-width navy navigation bar
   -------------------------------------------------------------------------- */

.ap-header { position: relative; z-index: 60; background: var(--white); }

.ap-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  max-width: var(--wrap);
  margin: 0 auto;
}

.ap-logo img { width: 282px; height: 62px; object-fit: contain; }

.ap-topbar-right { display: flex; align-items: center; gap: 18px; }

/* the Wix language menu was a platform control; it is reproduced here as a
   static indicator of the active language - see CLONE-REPORT.md */
/* language menu - English / Francais, matching the source's 138x45 control */
.ap-lang { position: relative; }

.ap-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
  padding: 9px 12px;
  border: 1px solid var(--grey-soft);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ap-lang__btn svg { width: 10px; height: 6px; fill: currentColor; margin-left: auto; transition: transform var(--dur-slow) var(--ease-motion); }
.ap-lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.ap-lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 100%;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--grey-line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  display: none;
}
.ap-lang__btn[aria-expanded="true"] + .ap-lang__menu { display: block; }

.ap-lang__menu a {
  display: block;
  padding: 8px 14px;
  color: var(--navy);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.ap-lang__menu a:hover { background: var(--ice); color: var(--teal); }
.ap-lang__menu a.is-current { font-weight: 700; }

.ap-social img { width: 36px; height: 36px; }
.ap-social a { display: inline-block; transition: transform var(--dur-hover) ease; }
.ap-social a:hover { transform: translateY(-2px); }

.ap-navbar { background: var(--navy); }

.ap-nav {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.ap-nav > ul {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

.ap-nav li { position: relative; }

.ap-nav > ul > li > a {
  display: block;
  padding: 14px 18px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: .05em;
  transition: color var(--dur-hover) ease;
}
.ap-nav > ul > li > a:hover,
.ap-nav > ul > li > a:focus-visible,
.ap-nav > ul > li > a[aria-current="page"] { color: var(--teal); }

/* real CSS dropdown for the Services submenu - hover and keyboard focus */
.ap-nav .ap-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 290px;
  padding: 10px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-hover) ease, visibility var(--dur-hover) ease;
  z-index: 70;
}
.ap-nav li:hover > .ap-sub,
.ap-nav li:focus-within > .ap-sub { visibility: visible; opacity: 1; }

.ap-nav .ap-sub a {
  display: block;
  padding: 10px;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: var(--fs-small);
  letter-spacing: .05em;
  background: rgba(255, 255, 255, 0);
  transition: background var(--dur-hover) ease, color var(--dur-hover) ease;
}
.ap-nav .ap-sub a:last-child { margin-bottom: 0; }
.ap-nav .ap-sub a:hover,
.ap-nav .ap-sub a:focus-visible { background: var(--ice); color: var(--teal); }

.ap-nav-caret { display: inline-block; width: 9px; height: 6px; margin-left: 6px; fill: currentColor; }

/* mobile nav - pure CSS checkbox toggle, no script needed */
.ap-nav-toggle { display: none; }
.ap-burger { display: none; }

/* --------------------------------------------------------------------------
   page hero - the navy banner used on every interior page, with the source's
   faint photograph behind it and the angled strip under the nav
   -------------------------------------------------------------------------- */

.ap-pagehero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: 120px 0 140px;
  overflow: hidden;
  text-align: center;
}
.ap-pagehero .ap-bandimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .22;
  z-index: 0;
}
.ap-pagehero .ap-wrap { position: relative; z-index: 1; }
.ap-pagehero h1,
.ap-pagehero h2 { color: var(--white); font-size: var(--fs-h2); margin: 0 0 14px; }
.ap-pagehero p { color: var(--white); font-size: var(--fs-small); max-width: 780px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   cards
   -------------------------------------------------------------------------- */

.ap-card {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-motion), box-shadow var(--dur-slow) var(--ease-motion);
}
.ap-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(11, 60, 93, .18); }

.ap-card figure { margin: 0; overflow: hidden; }
.ap-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) cubic-bezier(.3, .13, .12, 1);
}
.ap-card:hover figure img { transform: scale(1.05); }

.ap-imgframe { border-radius: var(--r-lg); overflow: hidden; }
.ap-imgframe img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   hexagon "01 / 02 / 03" offering tiles and the numbered benefit bars
   used across the four service pages
   -------------------------------------------------------------------------- */

.ap-hexes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 351px));
  gap: 47px;
  justify-content: center;
}

/* The source draws each offering tile as one illustration - a navy hexagon,
   a thin teal hexagon outline offset around it, and the teal number disc -
   so the whole shape is a single background SVG and the copy sits on top.
   Clipping the tile itself would cut the outline off, so there is no
   clip-path here. Geometry is in per cent of the 351x390 source tile so the
   tile keeps its proportions when the column is narrower than 351px. */
.ap-hex {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 351 / 390;
  padding: 53.56% 3.99% 0;
  background: url("icons/hex-offering.svg") center / 100% 100% no-repeat;
  container-type: inline-size;
  color: var(--white);
  text-align: center;
  transition: transform var(--dur-slow) var(--ease-motion);
}
.ap-hex:hover { transform: translateY(-6px); }
.ap-hex__num {
  position: absolute;
  left: 0;
  right: 0;
  top: 19.74%;
  height: 23.59%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15.48cqw;
  color: var(--white);
}
.ap-hex h3 { color: var(--white); font-size: 7.43cqw; line-height: 1.3; margin: 0 0 4.02cqw; }
.ap-hex p { color: var(--white); font-size: 5.26cqw; line-height: 1.4; margin: 0; }

.ap-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; }

.ap-benefit { display: flex; align-items: stretch; min-height: 104px; }
.ap-benefit__body {
  flex: 1;
  padding: 18px 22px;
  background: var(--navy);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ap-benefit__body h3 { color: var(--white); font-size: 17px; margin: 0 0 6px; }
.ap-benefit__body p { color: var(--white); font-size: 14px; line-height: 1.5; }
.ap-benefit__num {
  flex: none;
  width: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 30px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.ap-benefit--left .ap-benefit__body { text-align: right; clip-path: polygon(6% 0, 100% 0, 100% 100%, 6% 100%, 0 50%); padding-left: 34px; }
.ap-benefit--right .ap-benefit__body { text-align: left; clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%); padding-right: 34px; }
.ap-benefit--left { flex-direction: row; }
.ap-benefit--right { flex-direction: row-reverse; }

/* --------------------------------------------------------------------------
   accordion - native details/summary so it works with no JavaScript at all
   -------------------------------------------------------------------------- */

.ap-acc { display: grid; gap: 12px; }

.ap-acc details {
  border: 1px solid var(--grey-line);
  border-radius: var(--r-sm);
  background: var(--white);
}
.ap-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  transition: color var(--dur-hover) ease;
}
.ap-acc summary::-webkit-details-marker { display: none; }
.ap-acc summary:hover { color: var(--teal); }
.ap-acc summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--dur-hover) ease;
}
.ap-acc details[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.ap-acc .ap-acc__body { padding: 0 22px 20px; font-size: 15px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   contact form - matches the source's pill inputs with a navy hairline border
   -------------------------------------------------------------------------- */

.ap-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ap-form .ap-field--full { grid-column: 1 / -1; }

.ap-form label { display: block; margin: 0 0 6px; font-size: 14px; color: var(--navy); }

.ap-form input[type="text"],
.ap-form input[type="email"],
.ap-form input[type="tel"],
.ap-form select,
.ap-form textarea {
  width: 100%;
  padding: 13px 18px;
  border: 1px solid var(--navy);
  border-radius: 22px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
  transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.ap-form textarea {
  min-height: 92px;
  border-radius: 14px;
  resize: vertical;
}
.ap-form input:focus,
.ap-form select:focus,
.ap-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(31, 164, 169, .18);
}
.ap-form ::placeholder { color: var(--navy); opacity: .85; }
.ap-form select { appearance: none; background-image: none; }

/* honeypot - off-screen, never display:none, so bots still fill it in */
.ap-hp {
  position: absolute;
  left: -9999px;
  overflow: hidden;
  width: 1px;
  height: 1px;
}

/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */

.ap-footer { background: var(--navy); color: var(--white); padding: 56px 0 0; }
.ap-footer a { color: var(--white); transition: color var(--dur-hover) ease; }
.ap-footer a:hover { color: var(--teal); }

.ap-contactbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--teal);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ap-contactbar > div {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  border-right: 1px solid rgba(255, 255, 255, .45);
}
.ap-contactbar > div:last-child { border-right: 0; }
.ap-contactbar .ap-ci {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ap-contactbar .ap-ci svg { width: 26px; height: 26px; fill: var(--teal); }
.ap-contactbar h2 {
  color: var(--white);
  font-size: 22px;
  margin: 0 0 2px;
}
.ap-contactbar p { color: var(--white); font-size: 15px; margin: 0; line-height: 1.35; }

.ap-footer-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: 48px;
  padding: 54px 0 40px;
}
.ap-footer-cols h2 { color: var(--white); font-size: 26px; margin: 0 0 20px; }
.ap-footer-cols p { font-size: 15px; line-height: 1.5; }
.ap-footer-logo img { width: 275px; height: 62px; object-fit: contain; margin-bottom: 18px; }

.ap-footer-links li { margin-bottom: 11px; }
.ap-footer-links a { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.ap-footer-links .ap-arrow {
  flex: none;
  width: 16px;
  height: 16px;
  fill: var(--teal);
  transition: transform var(--dur-hover) ease;
}
.ap-footer-links a:hover .ap-arrow { transform: translateX(3px); }

.ap-footer-social { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.ap-footer-social img { width: 32px; height: 32px; }
.ap-footer-social h2 { margin: 0; font-size: 22px; }

.ap-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .22);
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   motion
   The source ran Wix entrance animations (motion-fadeIn / motion-slideIn) at
   1200ms on cubic-bezier(.645,.045,.355,1) plus a nav flyout fade and hover
   transitions. These are reproduced below in plain CSS.

   HARD RULE: no rule in this stylesheet may hide content. Every keyframe
   below finishes at opacity 1 and is applied with animation-fill-mode both,
   so the element is always visible once the animation has run - and the
   animation always runs, because nothing gates it.

   A scroll-reveal refinement lives in assets/site.js: it applies the hidden
   state at RUNTIME and only after its IntersectionObserver has attached. If
   that script never loads, pages simply render with the on-load animation.
   -------------------------------------------------------------------------- */

@keyframes apFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes apFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes apSlideInLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes apSlideInRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes apRevealIn {
  from { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  to   { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

.ap-anim {
  animation: apFadeUp var(--dur-motion) var(--ease-motion) both;
}
.ap-anim--fade { animation-name: apFadeIn; }
.ap-anim--left { animation-name: apSlideInLeft; }
.ap-anim--right { animation-name: apSlideInRight; }
.ap-anim--reveal { animation-name: apRevealIn; }

.ap-anim.ap-d1 { animation-delay: 120ms; }
.ap-anim.ap-d2 { animation-delay: 240ms; }
.ap-anim.ap-d3 { animation-delay: 360ms; }
.ap-anim.ap-d4 { animation-delay: 480ms; }


/* the runtime scroll-reveal state, applied ONLY by assets/site.js after its
   observer is attached; it is intentionally scoped to that script's class so
   it can never hide content on its own */
html.ap-js-reveal .ap-anim[data-ap-hidden="true"] { animation: none; opacity: 0; }
html.ap-js-reveal .ap-anim[data-ap-hidden="false"] { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ap-anim { opacity: 1 !important; transform: none !important; }
  html.ap-js-reveal .ap-anim[data-ap-hidden="true"] { opacity: 1; }
}

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --fs-h1: 44px; --fs-h2: 32px; --sec-pad: 66px; }
  .ap-footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .ap-grid--2,
  .ap-grid--3,
  .ap-grid--4,
  .ap-hexes,
  .ap-benefits,
  .ap-contactbar,
  .ap-form { grid-template-columns: 1fr; }

  .ap-contactbar > div { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); }
  .ap-contactbar > div:last-child { border-bottom: 0; }

  .ap-topbar { flex-wrap: wrap; justify-content: center; }
  .ap-logo img { width: 230px; height: auto; }

  .ap-burger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 24px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 15px;
    cursor: pointer;
  }
  .ap-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
    box-shadow: 0 6px 0 var(--white), 0 -6px 0 var(--white);
  }
  .ap-nav > ul { display: none; flex-direction: column; align-items: stretch; padding-bottom: 12px; }
  .ap-nav-toggle:checked ~ .ap-nav > ul { display: flex; }
  .ap-nav .ap-sub {
    position: static;
    transform: none;
    visibility: visible;
    opacity: 1;
    min-width: 0;
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
    padding: 4px 0 4px 18px;
  }
  .ap-nav .ap-sub a { color: var(--white); }

  .ap-hexes { justify-items: center; }
  .ap-hex { width: 100%; max-width: 351px; }
  .ap-benefit--left .ap-benefit__body,
  .ap-benefit--right .ap-benefit__body { clip-path: none; text-align: left; padding: 18px 22px; }
  .ap-benefit__num { clip-path: none; border-radius: var(--r-card); }

  .ap-footer-cols { grid-template-columns: 1fr; gap: 34px; }
  .ap-pagehero { padding: 74px 0 84px; }
}

@media (max-width: 560px) {
  :root { --fs-h1: 34px; --fs-h2: 26px; --fs-body: 17px; }
  .ap-wrap { padding: 0 18px; }
}

/* ==========================================================================
   Page-scoped rules are appended below this line by the per-page agents.
   ==========================================================================  */

/* page: home */

/* ---------------------------------------------------------------------- */
/* 1. hero                                                                  */
/* ---------------------------------------------------------------------- */

.home-hero {
  position: relative;
  padding: 110px 0 130px;
  background-image: url("orig/03.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: var(--ice);
}
.home-hero__text {
  /* the source gives the hero copy a 613px column in both languages */
  max-width: 613px;
}
.home-hero__text .ap-eyebrow { color: var(--teal); }
.home-hero__text h1 {
  color: var(--navy);
  margin: 0 0 18px;
}
.home-hero__text p {
  color: var(--black);
  margin: 0 0 28px;
}
.home-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.home-hero__btn-navy {
  background: var(--navy);
  color: var(--white);
}
.home-hero__btn-white {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-card);
}

@media (max-width: 900px) {
  .home-hero { padding: 70px 0 260px; background-position: center; }
  .home-hero__text { max-width: 100%; }
}

/* ---------------------------------------------------------------------- */
/* 2. trust strip                                                           */
/* ---------------------------------------------------------------------- */

.home-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.home-trust__col {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 34px 30px;
  color: var(--white);
}
.home-trust__col--navy { background: var(--navy); }
.home-trust__col--teal { background: var(--teal); }
.home-trust__col svg {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--white);
}
.home-trust__col p {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .home-trust { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* 3. my services                                                           */
/* ---------------------------------------------------------------------- */

.home-services__grid {
  align-items: stretch;
}
/* Service cards. In the source the white panel is a separate rounded tile
   inset over the bottom of the photo, with the teal icon disc straddling its
   top edge; the description and the Learn More button appear on hover and the
   panel - anchored to the card's bottom - grows upward to make room, taking
   the disc with it. Metrics are the source's 289x342 photo / 262x125 panel.

   The old rule pinned .home-card__icon to `bottom: -27px` of the CARD rather
   than of the photo, so .ap-card's overflow:hidden clipped the disc away. */
.home-card {
  position: relative;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding-bottom: 71px;
  text-align: center;
}
.home-card:hover { transform: none; box-shadow: none; }

.home-card figure {
  position: relative;
  aspect-ratio: 289 / 342;
  border-radius: var(--r-card);
  overflow: hidden;
}

.home-card__panel {
  position: absolute;
  left: 4.5%;
  right: 4.5%;
  bottom: 0;
  min-height: 125px;
  box-sizing: border-box;
  padding: 49px 16px 20px;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.home-card__icon {
  position: absolute;
  left: 50%;
  top: -22px;
  margin-left: -31px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}
.home-card__icon img { display: block; }

.home-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  color: var(--navy);
}

/* revealed on hover; the panel grows upward because it is bottom-anchored */
.home-card__more {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-motion),
              opacity var(--dur-slow) var(--ease-motion);
}
.home-card:hover .home-card__more,
.home-card:focus-within .home-card__more {
  max-height: 260px;
  opacity: 1;
}

.home-card p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey-mid);
}
.home-card .ap-btn { margin: 16px auto 0; }
.home-services__cta {
  margin-top: 48px;
}

/* ---------------------------------------------------------------------- */
/* 4. about me                                                              */
/* ---------------------------------------------------------------------- */

.home-about__media {
  position: relative;
  max-width: 480px;
}
.home-badge {
  position: absolute;
  right: 8px;
  bottom: 28px;
  background: var(--teal);
  color: var(--white);
  padding: 18px 26px;
  border-radius: 20px 20px 4px 20px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.home-badge__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
}
.home-badge__label {
  display: block;
  font-size: 14px;
}
.home-about__copy p {
  color: var(--black);
}

/* ---------------------------------------------------------------------- */
/* 5. regional compliance + compliance table                               */
/* ---------------------------------------------------------------------- */

.home-regional > .ap-bandimg { opacity: .27; }
.home-regional__cta { margin-top: 40px; }

.home-ctable {
  --ct-box: rgba(255, 255, 255, .95);
  --ct-border: #e2e6ea;
  --ct-text: #1f2933;
  --ct-muted: #5f6c7b;
  --ct-accent: #1E9AA4;
  width: 100%;
  max-width: 1120px;
  margin: 44px auto 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ct-border);
  text-align: left;
  color: var(--ct-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.home-ctable__header {
  display: grid;
  grid-template-columns: 1.2fr 2fr 2.6fr;
  background: rgb(249, 250, 251);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.home-ctable__header div {
  padding: 18px 20px;
  border-right: 1px solid var(--ct-border);
}
.home-ctable__header div:last-child { border-right: none; }
.home-ctable__row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 2.6fr;
}
.home-ctable__cell {
  padding: 22px 20px;
  background: var(--ct-box);
  border-top: 1px solid var(--ct-border);
  border-right: 1px solid var(--ct-border);
}
.home-ctable__cell:last-child { border-right: none; }
.home-ctable__region { font-weight: 600; }
.home-ctable__desc {
  color: var(--ct-muted);
  line-height: 1.6;
  font-size: 15px;
}
.home-ctable__equation {
  background: rgb(242, 238, 233);
  border-left: 4px solid var(--ct-accent);
  padding: 14px 16px;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  transition: background .25s, box-shadow .25s;
  color: var(--ct-text);
}
.home-ctable__equation:hover {
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}
@media (max-width: 900px) {
  .home-ctable__header, .home-ctable__row { grid-template-columns: 1fr 1.5fr 2fr; }
  .home-ctable__equation { font-size: 13px; }
}
@media (max-width: 640px) {
  .home-ctable__header { display: none; }
  .home-ctable__row { grid-template-columns: 1fr; border-bottom: 1px solid var(--ct-border); }
  .home-ctable__cell { border-right: none; border-top: none; padding: 16px; }
  .home-ctable__cell::before {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgb(107, 114, 128);
    margin-bottom: 6px;
  }
  .home-ctable__region::before { content: "Region"; }
  .home-ctable__desc::before { content: "Simplified Explanation"; }
  .home-ctable__equation-cell::before { content: "Equation Components"; }
  .home-ctable__equation { white-space: normal; }
}

/* ---------------------------------------------------------------------- */
/* 6. why clients choose                                                    */
/* ---------------------------------------------------------------------- */

.home-why__media img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------- */
/* 7. regulatory translations                                               */
/* ---------------------------------------------------------------------- */

.home-translations > .ap-bandimg { opacity: .12; }
.home-translations__lead {
  max-width: 820px;
  margin: 0 auto 8px;
}
.home-translations__tag {
  font-family: var(--font-head);
  font-weight: 700;
  margin: 0 0 32px;
}
/* the GLTaC logo card is 1095x316 in the source with the logo filling it,
   and the call to action is a vertical teal tab inside the card's left edge
   rather than a separate button underneath it */
.home-gltac-card {
  position: relative;
  display: block;
  width: 1095px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--white);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.home-gltac-card img { display: block; width: 100%; height: auto; }

.home-gltac-visit {
  position: absolute;
  left: 6.12%;
  top: 20.25%;
  width: 5.02%;
  min-width: 32px;
  height: 57.9%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .02em;
  text-decoration: none;
  /* reads bottom-to-top, which also turns the arrow to point upward */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: background var(--dur-slow) var(--ease-motion);
}
.home-gltac-visit:hover { background: var(--teal-dark); }

/* ---------------------------------------------------------------------- */
/* 9. pricing                                                               */
/* ---------------------------------------------------------------------- */

.home-pricing__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 74px;
  flex-wrap: wrap;
  margin-top: 20px;
}
/* the two price tiles are their own illustration in the source: a navy
   pentagon with a teal lower edge and the teal price disc riding over its
   top-left corner. Same treatment as .ap-hex - one background SVG, copy on
   top - with the source's 381x348 metrics. */
.home-hex {
  width: 381px;
  aspect-ratio: 381 / 348;
  /* the tile is a flex item, so a percentage padding here would resolve
     against the row, not the tile - keep the source's pixel metrics */
  padding: 160px 40px 0;
  background-image: url("icons/pricing-card.svg");
  container-type: inline-size;
}
.home-hex .ap-hex__num {
  left: 8.92%;
  right: 19.69%;
  top: 14.66%;
  height: auto;
  width: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 13.29cqw;
  line-height: 1.3;
}
.home-hex h3 { font-size: 7.31cqw; line-height: 1.3; margin: 0 0 4.32cqw; }
.home-hex p { font-size: 5.98cqw; line-height: 1.3; margin: 0; }

@media (max-width: 640px) {
  .home-hex { width: 100%; max-width: 381px; }
}

/* page: about */

/* --------------------------------------------------------------------------
   Trusted Expertise - portrait with the teal "35+" speech-bubble badge
   -------------------------------------------------------------------------- */

.about-portrait {
  position: relative;
  max-width: 570px;
}

.about-portrait img {
  border-radius: var(--r-card);
  width: 100%;
  height: auto;
}

.about-badge {
  position: absolute;
  right: -18px;
  bottom: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 190px;
  padding: 20px 18px 26px;
  background: var(--teal);
  color: var(--white);
  border-radius: 22px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.about-badge::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -16px;
  width: 0;
  height: 0;
  border-width: 16px 12px 0 0;
  border-style: solid;
  border-color: var(--teal) transparent transparent transparent;
}
.about-badge strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
}
.about-badge span {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
}

.about-cta { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Our Clients - navy diamond tiles
   -------------------------------------------------------------------------- */

/* Who We Support Globally: in the source this is one illustration - five
   overlapping navy diamonds - with the teal number badge and the label laid
   over each. Drawing five separate clip-path diamonds cannot reproduce the
   overlap, so the row is the source SVG and the copy is positioned on it.
   Percentages are of the source's 1191x264 artboard. */
.about-clients-wrap { margin-top: 56px; }

.about-clients {
  position: relative;
  width: 1191px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1191 / 264;
  background: url("icons/our-clients.svg") center / 100% 100% no-repeat;
  container-type: inline-size;
}

/* the cells carry .ap-anim, whose reveal animates transform, so they are
   placed by `left` alone - a centring translateX() would be overwritten.
   Each left is the diamond's centre minus half the cell width (9.855%). */
.about-diamond {
  position: absolute;
  top: 0;
  height: 100%;
  width: 19.71%;
  text-align: center;
}
.about-diamond:nth-child(1) { left: 0; }
.about-diamond:nth-child(2) { left: 20.065%; }
.about-diamond:nth-child(3) { left: 40.145%; }
.about-diamond:nth-child(4) { left: 60.215%; }
.about-diamond:nth-child(5) { left: 80.285%; }

.about-diamond__num {
  position: absolute;
  left: 50%;
  top: 16.29%;
  transform: translateX(-50%);
  width: 21.3%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("icons/client-badge.svg") center / 100% 100% no-repeat;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.85cqw;
}

.about-diamond__label {
  position: absolute;
  left: 50%;
  top: 43.18%;
  transform: translateX(-50%);
  width: 72%;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.85cqw;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Professional Background - angled navy/photo band with the breakout portrait
   -------------------------------------------------------------------------- */

/* The band's top edge slopes down to the right. The clip lives on the band's
   own layers rather than on the section, because the source lets the portrait
   break out past the band's top edge - clipping the section would cut it off. */
.about-background {
  background: none;
  padding-top: 150px;
}
.about-background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 14%, 100% 100%, 0 100%);
}
.about-background > .ap-bandimg {
  opacity: .35;
  clip-path: polygon(0 0, 100% 14%, 100% 100%, 0 100%);
}

/* the portrait is 553x705 in the source and sits flush with the bottom edge
   of the band, so the column's share of the section padding is cancelled */
.about-consultant-wrap {
  display: flex;
  justify-content: center;
  align-self: end;
  margin-bottom: calc(var(--sec-pad) * -1);
}

.about-consultant {
  position: relative;
  display: block;
  width: 100%;
  max-width: 553px;
  height: auto;
  margin-top: -160px;
}

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .about-badge { right: 10px; bottom: 20px; width: 160px; }

  .about-clients-wrap { overflow-x: auto; }
  .about-clients { width: 900px; max-width: none; }

  .about-consultant { margin-top: 24px; max-width: 360px; }
  .about-consultant-wrap { align-self: auto; margin-bottom: 0; }
}

/* page: services */

/* ---------------------------------------------------------------------- */
/* 1. page hero band                                                       */
/* ---------------------------------------------------------------------- */

.services-heroimg { object-position: center 30%; }

/* ---------------------------------------------------------------------- */
/* 2. alternating service rows                                             */
/* ---------------------------------------------------------------------- */

.services-block { overflow: hidden; }

.services-row { align-items: center; }

.services-media { min-width: 0; }

.services-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: cover;
}

.services-photo--493 { aspect-ratio: 578 / 493; }
.services-photo--508 { aspect-ratio: 578 / 508; }

.services-copy { min-width: 0; }

.services-copy h2 {
  color: var(--navy);
  margin: 0 0 18px;
}

.services-copy p {
  margin: 0 0 28px;
}

.services-btn { display: inline-flex; }

/* ---------------------------------------------------------------------- */
/* 3. responsive stacking                                                  */
/* ---------------------------------------------------------------------- */

@media (max-width: 860px) {
  .services-row { grid-template-columns: 1fr; }
  .services-row .services-media { order: -1; }
}

/* page: documentation-excellence */

/* Introduction + Advanced Compliance Documentation photos: the source used a
   flat, square-cornered frame here (no radius), unlike the rounded card
   frames used elsewhere on the site. */
.docx-imgframe { border-radius: 0; }

/* page: strategic-product-registration */

.spr-imgframe {
  border-radius: 0;
  width: 100%;
}

.spr-imgframe img { display: block; }

/* External Expertise band. In the source the photo is the section's own
   background - a black base with the image at 42% over it - pinned to the
   viewport while the section scrolls past. The clone had it as a 190px strip
   across the top with the copy on black beneath, which reads as the
   background sitting above the section. */
.spr-external {
  position: relative;
  padding: 94px 0;
  background-color: #000;
  background-image:
    linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)),
    url("orig/34.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.spr-external-content {
  position: relative;
  z-index: 1;
  color: var(--white);
}

.spr-external-content .ap-eyebrow { justify-content: center; }

.spr-external-title {
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 32px;
  margin: 0 0 18px;
}

.spr-external-body {
  color: var(--white);
  max-width: 720px;
  margin: 0 auto 26px;
}

@media (max-width: 900px) {
  .spr-external { padding: 66px 0; }
  .spr-external-title { font-size: 26px; }
}

/* page: precision-labeling */

/* page: knowledge-transfer-consultation */

/* page: regulatory-news-portal */

/* --------------------------------------------------------------------------
   page hero - source used --fill-layer-image-opacity: .25 on this band
   (the shared .ap-pagehero rule defaults to .22, so nudge it up here only)
   -------------------------------------------------------------------------- */

.rnp-hero .ap-bandimg { opacity: .25; }

/* --------------------------------------------------------------------------
   Welcome + Regulatory Secrets + Consumer Chemicals image frames
   -------------------------------------------------------------------------- */

.rnp-imgframe {
  width: 100%;
  max-width: 578px;
  margin: 0 auto;
}
.rnp-imgframe img { display: block; }

.rnp-frame-41 { aspect-ratio: 578 / 588; }
.rnp-frame-46 { aspect-ratio: 578 / 615; }
.rnp-frame-47 { aspect-ratio: 492 / 388; max-width: 492px; }
.rnp-frame-48 { aspect-ratio: 523 / 524; max-width: 523px; }
.rnp-frame-49 { aspect-ratio: 523 / 443; max-width: 523px; }

/* --------------------------------------------------------------------------
   The Latest News - three static blog-post cards
   -------------------------------------------------------------------------- */

.rnp-news { margin-top: 40px; }

.rnp-news-card { display: flex; flex-direction: column; height: 100%; }

.rnp-news-card figure {
  aspect-ratio: 16 / 10;
}
.rnp-news-card figure img { width: 100%; height: 100%; object-fit: cover; }

.rnp-news-body { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; }

.rnp-news-body h3 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.35;
}
.rnp-news-body h3 a {
  color: var(--navy);
  text-decoration: none;
  transition: color var(--dur-hover) ease;
}
.rnp-news-body h3 a:hover,
.rnp-news-body h3 a:focus-visible { color: var(--teal); }

.rnp-news-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--black);
}

/* --------------------------------------------------------------------------
   GHS Revision 11 band - centred copy over the faint background photo,
   then a full-width sponsor banner beneath it
   -------------------------------------------------------------------------- */

.rnp-ghs-bg { opacity: .12; }

.rnp-cta { margin: 26px 0 0; }

.rnp-banner-link {
  display: block;
  width: 100%;
  margin-top: 56px;
  border-radius: var(--r-card);
  overflow: hidden;
}
.rnp-banner {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Canadian Consumer Chemicals - three static section-label pills, then
   three alternating two-column blocks
   -------------------------------------------------------------------------- */

/* the three topics are a real tab strip in the source - one panel at a time,
   left aligned, inside a white rounded panel box */
.rnp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.rnp-pill {
  padding: 6px 30px;
  border: 2px solid var(--navy);
  border-radius: 99px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  cursor: pointer;
  transition: background var(--dur-slow) var(--ease-motion),
              border-color var(--dur-slow) var(--ease-motion),
              color var(--dur-slow) var(--ease-motion);
}
.rnp-pill:hover { border-color: var(--teal); color: var(--teal); }
.rnp-pill[aria-selected="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.rnp-panels {
  background: var(--white);
  border: 2px solid #e6e6e6;
  border-radius: 30px;
  padding: 48px 40px;
}
.rnp-panel[hidden] { display: none; }

.rnp-block { margin-bottom: 64px; }
.rnp-block:last-child { margin-bottom: 0; }
.rnp-block p { margin: 0 0 14px; }
.rnp-block p:last-of-type { margin-bottom: 0; }

@media (max-width: 900px) {
  .rnp-order-first { order: -1; }
}

/* page: faqs */

.faqs-hero-title {
  font-size: 45px;
}

.faqs-list {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

@media (max-width: 560px) {
  .faqs-hero-title {
    font-size: 30px;
  }
}

/* page: testimonials */

/* --------------------------------------------------------------------------
   Testimonial cards - a CSS approximation of the source's navy "note" vector
   shape (a 375x245 filled vector with a teal accent edge and torn-corner
   pointer tail). Reproduced here with rounded corners, a teal top/left
   accent bar and a small teal pointer triangle at the bottom-left.
   -------------------------------------------------------------------------- */

.tst-wrap.tst-wrap { max-width: 1150px; }

.tst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}

.tst-card {
  position: relative;
  background: var(--navy);
  border-radius: 18px;
  padding: 40px 28px 34px;
  min-height: 245px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  overflow: visible;
}

/* teal top+left accent edge, drawn as a two-sided border overlay so a
   single pseudo-element can carry it and ::after is free for the tail */
.tst-card::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: 18px;
  border-top: 6px solid var(--teal);
  border-left: 6px solid var(--teal);
  pointer-events: none;
}

/* small pointer tail at the bottom-left, like a torn note corner */
.tst-card::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -14px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 10px 0 0;
  border-color: var(--teal) transparent transparent transparent;
}

.tst-card h6 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
}

.tst-card p {
  margin: 0;
  color: var(--white);
  font-size: 16px;
  line-height: 1.2;
}

.tst-stars {
  fill: var(--teal);
  display: block;
}

@media (max-width: 900px) {
  .tst-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .tst-grid { grid-template-columns: 1fr; }
}

/* page: contact */

/* ---------------------------------------------------------------------- */
/* 1. contact cards                                                        */
/* ---------------------------------------------------------------------- */

.contact-cards { align-items: stretch; }

.contact-card {
  padding: 40px 30px;
  text-align: center;
}
.contact-card h6 {
  margin: 0 0 8px;
  font-size: var(--fs-h6);
}
.contact-card h6 a { color: var(--navy); }
.contact-card p { color: var(--black); font-size: var(--fs-small); }
.contact-card p a { color: var(--black); }
.contact-card p a:hover,
.contact-card h6 a:hover { color: var(--teal); }

.contact-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 22px;
}
.contact-icon svg { width: 100%; height: 100%; }
.contact-icon .contact-blob { fill: var(--teal); }
.contact-icon .contact-dots { fill: var(--navy); }

/* ---------------------------------------------------------------------- */
/* 2. consultation form section                                            */
/* ---------------------------------------------------------------------- */

.contact-formgrid { align-items: start; }

.contact-formcol h2 { margin: 0 0 18px; }
.contact-formcol > p { color: var(--black); margin: 0 0 30px; }

.contact-formcol .ap-form { margin-top: 4px; }

.contact-imgframe {
  aspect-ratio: 564 / 597;
}

@media (max-width: 900px) {
  .contact-cards { grid-template-columns: 1fr; }
  .contact-formgrid { grid-template-columns: 1fr; }
  .contact-imgframe { order: -1; }
}

/* page: blog */

/* feed header: single active "All Posts" tab, left-aligned, teal underline,
   with a hairline rule spanning the full viewport width beneath it */
.blog-feedhead { padding-bottom: 0; }
.blog-tabs { display: flex; }
.blog-tab {
  display: inline-block;
  padding: 0 0 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.blog-tab--active { border-bottom-color: var(--teal); }
.blog-hairline { width: 100%; height: 1px; background: var(--grey-line); }

/* post grid */
.blog-feed { padding-top: 48px; }
.blog-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; gap: 34px; }

.blog-card { display: flex; flex-direction: column; }

.blog-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-card-body { padding: 24px 26px 28px; }

.blog-card-title { margin: 0 0 12px; font-size: 20px; line-height: 1.3; }
.blog-card-title a {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.blog-card-title a:hover { color: var(--teal); }

.blog-card-excerpt {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--black);
  line-height: 1.6;
}

.blog-card-meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: #6b7076;
}

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* page: post */

/* Individual blog posts. The source renders each one in a bordered white card
   940px wide with a 740px text column, Fira Sans headings and Lato body. */
.post-section { padding-top: 40px; }

.post-back {
  display: inline-block;
  max-width: 940px;
  width: 100%;
  margin: 0 auto 16px;
  color: var(--grey-mid);
  font-size: 15px;
  text-decoration: none;
}
.post-back:hover { color: var(--teal); }

.post-card {
  max-width: 940px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 40px 100px 60px;
  background: var(--white);
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.post-meta {
  margin: 0 0 22px;
  color: var(--grey-mid);
  font-size: 14px;
}

.post-title {
  margin: 0 0 26px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.4;
  color: var(--black);
}

.post-body { font-size: 18px; line-height: 1.5; color: var(--black); }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 20px; }
.post-body h2,
.post-body h3,
.post-body h4 {
  margin: 34px 0 14px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--black);
  line-height: 1.4;
}
.post-body h2 { font-size: 26px; }
.post-body h3 { font-size: 22px; }
.post-body h4 { font-size: 19px; }
.post-body ul,
.post-body ol { margin: 0 0 20px; padding-left: 24px; }
.post-body li { margin: 0 0 8px; }
.post-body li > p { margin: 0; }
.post-body a { color: var(--blue-mid); }
.post-body figure { margin: 26px 0; }
.post-body img { display: block; width: 100%; height: auto; border-radius: 4px; }
.post-body blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--teal);
  color: var(--grey-mid);
}

.post-backlink { max-width: 940px; margin: 34px auto 0; }

@media (max-width: 900px) {
  .post-card { padding: 28px 24px 40px; }
  .post-title { font-size: 30px; }
  .post-body { font-size: 17px; }
}