/*
 * Front page (front-page.php)
 * Section styles for template-parts/home/*. Loaded after style.css, which
 * owns the tokens, base, buttons, tag, header and footer.
 */

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, calc(43.4 * var(--vw)), 833px);
  background-size: cover;
  /* Client asked for the crop to be less tight around the three people —
     less empty space above their heads, less of the girl's torso cut off
     at the bottom. Shifting the visible window down the source image
     (instead of "top") is the lightweight CSS-only fix; a true fix still
     needs a re-exported/re-cropped image from the client since we cannot
     rescale what background-size: cover already crops away. */
  background-position: center 25%;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(39, 37, 37, 0.5);
  z-index: -1;
}
.hero__content {
  width: 100%;
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(2.75rem, calc(7.3438 * var(--vw)), 8.8125rem) /* 141 */
    clamp(3.5rem, calc(10.2083 * var(--vw)), 12.25rem); /* 196 */
  color: var(--c-white);
}
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.2;
  max-width: 12.2em;
}
.hero__title .accent {
  color: var(--c-orange);
}
.hero__title .period {
  color: var(--c-white);
}
.hero__subtitle {
  margin-top: clamp(1rem, calc(1.5 * var(--vw)), 1.75rem);
  /* Identical scale to the h6 token (30 on the canvas, 18 floor) — carried by
     the token so the subtitle picks up the 1440 anchor with everything else. */
  font-size: var(--fs-h6);
  font-weight: 500;
  line-height: 1.5;
  max-width: 36em;
}
.hero__cta {
  margin-top: clamp(1.5rem, calc(3.6 * var(--vw)), 4.3rem);
}
.hero__cta .btn {
  min-width: clamp(220px, calc(16 * var(--vw)), 310px);
}

/* ==========================================================================
   Certifications
   ========================================================================== */
/* Figma SECTION 2 (node 54:42), measured on the 1920 canvas. The blue band is
   gone: two seals 43px apart hang over the hero's bottom edge, with a 30px
   SemiBold caption 21px under them that links through to Full Disclosure. The
   block's right edge sits 93px inside the wide container (1710 against 1803).
   The seals run 24% under the comp's 287px (218px), and sit lower than it. */
.hero,
.certs {
  --certs-seal: clamp(98.67px, calc(11.3348 * var(--vw)), 217.63px);
  /* 144 of the seal's 218 rides up over the photo (the comp had 231 of 287). */
  --certs-overlap: calc(0.66 * var(--certs-seal));
}
.certs {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--certs-overlap));
}
.certs__inner {
  display: flex;
  justify-content: flex-end;
}
.certs__block {
  margin-right: clamp(0px, calc(4.8438 * var(--vw)), 5.8125rem); /* 93 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.certs__seals {
  display: grid;
  grid-template-columns: repeat(2, var(--certs-seal));
  justify-items: center;
  column-gap: clamp(1.25rem, calc(2.249 * var(--vw)), 2.7rem); /* 43 */
}
.certs__seals img {
  width: var(--certs-seal);
  height: var(--certs-seal);
  object-fit: contain;
  border-radius: 50%;
  transition: transform var(--motion) ease;
}
.certs__seals img:hover {
  transform: scale(1.04);
}
.certs__text {
  margin-top: clamp(0.75rem, calc(1.1094 * var(--vw)), 1.33rem); /* 21 */
  white-space: nowrap;
  /* 18: sized so the line runs about as wide as the pair of seals above it. */
  font-size: clamp(0.9375rem, calc(0.9375 * var(--vw)), 1.125rem);
  font-weight: 600;
  line-height: 1.22;
}
.certs__text a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--motion-quick) ease;
}
.certs__text a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--motion-quick) ease;
}
.certs__text a:hover {
  color: var(--c-orange);
}
.certs__text a:hover::after {
  transform: translateX(0.2em);
}

/* ==========================================================================
   Partner / features
   ========================================================================== */
.partner {
  padding-block: clamp(
    1.8rem,
    calc(7.0313 * var(--vw)),
    8.4375rem
  ); /* 135, reduced from 225 */
}
.partner__inner {
  display: grid;
  grid-template-columns: minmax(0, 788fr) minmax(0, 635fr);
  gap: clamp(2rem, calc(5.3 * var(--vw)), 6.4rem);
  /* The comp centres the two columns on each other rather than aligning their
     tops: copy 1484..1924 (centre 1704) against features 1468..1904 (1686). */
  align-items: center;
}
.partner__heading {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.4;
}
/* Two ways to pick a word out of the headline: <em> keeps the italic the
   original comp gave "for", .accent recolours without the slant. */
.partner__heading em,
.partner__heading .accent {
  color: var(--c-orange);
}
.partner__body {
  margin-top: clamp(1.25rem, calc(2.1 * var(--vw)), 2.5rem);
  font-family: var(--font-serif);
  line-height: 1.8;
}
.partner__features {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, calc(3 * var(--vw)), 3.6rem);
}
.feature {
  display: grid;
  grid-template-columns: clamp(56px, calc(4.2 * var(--vw)), 80px) 1fr;
  gap: clamp(1.25rem, calc(2.2 * var(--vw)), 2.7rem);
  align-items: start;
}
.feature__icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform var(--motion) ease;
}
/* The features are not links, so the row does not move or change colour. Only
   the icon answers the cursor — enough to feel alive, not enough to promise a
   click that isn't there. */
.feature:hover .feature__icon img {
  transform: scale(1.08);
}
.feature__title {
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.28;
}
.feature__text {
  margin-top: 0.35em;
  line-height: 1.53;
}

/* ==========================================================================
   Audiences
   ========================================================================== */
.audiences {
  background: var(--c-cream);
  padding-block: clamp(2.25rem, calc(5.5208 * var(--vw)), 6.625rem) /* 106 */
    clamp(2.75rem, calc(7.1354 * var(--vw)), 8.5625rem); /* 137 */
}
.audiences__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  text-align: center;
}
.audiences__grid {
  margin-top: clamp(2rem, calc(3.5 * var(--vw)), 4.25rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, calc(2.9 * var(--vw)), 3.5rem);
}
.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: min(10px, calc(0.5208 * var(--vw-inset)));
  overflow: hidden;
  aspect-ratio: 379 / 465;
  /* This card is also a reveal target, and declaring a transition here would
     replace the reveal's own; var(--reveal-transition) puts it back. */
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    box-shadow var(--motion) ease;
}
/* These cards are links, so the whole card lifts, not just the photo inside
   it. Keyboard focus gets the same lift the cursor does — the overlay already
   answers :focus-visible, and the card should not be the one part of the
   interaction a keyboard misses. */
.audience-card:hover,
.audience-card:focus-visible {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4)
    rgba(20, 42, 56, 0.18);
}
/* Photo area = the card minus the label bar, so the hover scrim stops exactly
   where the label starts (Figma node 62:1638). */
.audience-card__media {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.audience-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The photos are exported at the card's own 379x465 crop, but the media box
     is the card minus its label bar, so cover has ~17% of the height to throw
     away. Centred it took half of that off the top and cut the subjects' heads;
     the comp covers the bottom of the same crop with the label and keeps the
     headroom, which is what anchoring to the top reproduces. */
  object-position: 50% 0;
  transition: transform var(--motion) ease;
}
.audience-card:hover img {
  transform: scale(1.05);
}
.audience-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 33.5px of a 379px-wide card, leaving the 312px text column from the design. */
  padding-inline: 8.8%;
  background: rgba(0, 28, 38, 0.63);
  color: var(--c-white);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.283;
  text-align: center;
  opacity: 0;
  transition: opacity var(--motion) ease;
}
.audience-card:hover .audience-card__overlay,
.audience-card:focus-visible .audience-card__overlay {
  opacity: 1;
}
.audience-card__label {
  background: var(--c-sky);
  color: var(--c-white);
  font-size: var(--fs-h6);
  font-weight: 700;
  text-align: center;
  padding: 0.55em 0.5em;
}

/* ==========================================================================
   Stats ("The DRx Way")
   ========================================================================== */
/* Figma SECTION 5 (node 54:95), measured on the 1920 canvas: 933px band with
   144/175 padding, 730px heading, 660px intro, divider 168px below the top
   block and 23px above the stat row. */
.stats {
  background: var(--c-ice);
  /* 86/105, reduced from 144/175 */
  padding-block: clamp(1.8rem, calc(4.5 * var(--vw)), 5.4rem)
    clamp(2.25rem, calc(5.46 * var(--vw)), 6.552rem);
}
/* This band is inset further than the shared container: Figma starts the tag,
   heading and intro at 274px on the 1920 canvas, against the container's 198px.
   The extra 76px scales with the viewport and is dropped once the two-column
   top block stacks, where the width is needed for the copy. */
.stats .container {
  padding-inline: calc(
    var(--gutter) + clamp(0rem, calc(3.96 * var(--vw)), 4.75rem)
  );
}
/* The tag sits above the two columns, not inside the left one, so the heading
   and the intro are the only grid items and their first lines can line up. */
.stats__top {
  margin-top: clamp(1.25rem, calc(1.7 * var(--vw)), 2rem);
  display: grid;
  grid-template-columns: minmax(0, 730fr) minmax(0, 660fr);
  gap: clamp(2rem, calc(4 * var(--vw)), 5rem);
  align-items: baseline;
}
/* 289x58 box with SemiBold 20 centred inside it. Scoped to this section — .tag
   is shared with four other ribbons that this Figma node does not cover. */
.stats .tag {
  min-width: 14.45em;
  padding-block: 0.81em;
  font-size: var(--fs-ui);
  text-align: center;
}
.stats__heading {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.35;
}
/* Lora Regular 35/1.5 */
.stats__intro {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h5);
  font-weight: 400;
  line-height: 1.5;
}
.stats__row {
  margin-top: clamp(2rem, calc(4.8 * var(--vw)), 5.75rem);
  border-top: 2px solid var(--c-charcoal);
  padding-top: clamp(1rem, calc(1.2 * var(--vw)), 1.44rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, calc(3 * var(--vw)), 4rem);
  text-align: center;
}
/* 168px value+label block on the design canvas */
.stat__value {
  font-size: var(--fs-hero);
  font-weight: 800;
  color: var(--c-orange);
  line-height: 1.5;
  /* Equal-width digits so the count-up animation doesn't jitter the layout. */
  font-variant-numeric: tabular-nums;
}
/* The figure is orange and the unit beside it is blue — "%" included, so
   "42%" reads the way "4.78/5" does. "%" still gets its own .percent class
   from drx_stat_suffix_html(), so it can be split back out if a value ever
   needs it to travel with the digits again. */
.stat__value .suffix {
  color: var(--c-blue);
}
.stat__label {
  margin-top: 0.5em;
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* ==========================================================================
   Savings program
   ========================================================================== */
.savings {
  padding-block: clamp(1.65rem, calc(4.1563 * var(--vw)), 4.9875rem)
    /* 80, reduced from 133 */ clamp(1.65rem, calc(4.125 * var(--vw)), 4.95rem); /* 79, reduced from 132 */
}
/* Inset past the shared container to match Figma, which runs the card row from
   277px to 1643px on the 1920 canvas against the container's 198px/1722px.
   Dropped with the stacked layout, same as the stats band. */
.savings .container {
  padding-inline: calc(
    var(--gutter) + clamp(0rem, calc(4.11 * var(--vw)), 4.94rem)
  );
}
.savings__heading {
  font-size: var(--fs-hero);
  font-weight: 800;
  text-align: center;
}
.savings__intro {
  margin: clamp(1rem, calc(1.5 * var(--vw)), 1.8rem) auto 0;
  max-width: 40em;
  font-family: var(--font-serif);
  text-align: center;
  line-height: 1.8;
}
.savings__grid {
  margin-top: clamp(2.5rem, calc(4.7 * var(--vw)), 5.6rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, calc(3.7 * var(--vw)), 4.4rem);
}
.savings-card {
  background: var(--c-white);
  border: 1px solid var(--c-charcoal);
  border-radius: min(38px, calc(1.9792 * var(--vw-inset)));
  padding: clamp(2rem, calc(2.9 * var(--vw)), 3.5rem)
    clamp(1.5rem, calc(2 * var(--vw)), 2.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Reveal target too — see .audience-card. */
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    border-color var(--motion) ease,
    box-shadow var(--motion) ease;
}
/* The card rises onto the brand border. The shadow is tinted with the navy the
   section sits on rather than neutral black, so the card lifts off this page
   and not off a generic grey one. */
.savings-card:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-orange);
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4)
    rgba(20, 42, 56, 0.13);
}

.savings-card__icon {
  height: clamp(110px, calc(8.85 * var(--vw)), 170px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* The three icons are all 150 wide on the canvas but differently tall, and the
   row bottom-aligns them. Sizing them by width keeps that; sizing by height
   would equalise the wrong axis and give them three different widths. */
.savings-card__icon img {
  width: min(150px, calc(7.8125 * var(--vw-inset)));
  height: auto;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--motion) ease;
}
/* A landscape icon (the sourcing world map, 335x170) has to be sized by height
   instead, or the same 150 of width leaves it half as tall as the two portrait
   icons beside it. 157 is the tallest of those, so the three now read at one
   weight; the box height still caps it where the row itself has to shrink. */
.savings-card__icon--wide img {
  width: auto;
  height: min(157px, calc(8.1771 * var(--vw-inset)));
  max-width: 100%;
}
.savings-card:hover .savings-card__icon img {
  transform: scale(1.06);
}
/* Alternative Sourcing names three countries rather than "somewhere abroad",
   so it can show their flags instead of a globe. The row occupies the same
   box as .savings-card__icon and bottom-aligns to the same baseline, so the
   card titles still line up across the three cards. */
.savings-card__flags {
  height: clamp(110px, calc(8.85 * var(--vw)), 170px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.75rem, calc(1.15 * var(--vw)), 1.375rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.savings-flag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  /* Wide enough for "New Zealand" on one line at the design size. */
  width: min(96px, calc(5 * var(--vw-inset)));
}
.savings-flag__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(20, 42, 56, 0.2);
  transition: transform var(--motion) ease;
}
.savings-card:hover .savings-flag__img {
  transform: scale(1.06);
}
.savings-flag__label {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-navy);
  text-align: center;
}
.savings-card__title {
  margin-top: clamp(1.5rem, calc(2.8 * var(--vw)), 3.3rem);
  font-size: var(--fs-h6);
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.28;
}
.savings-card__text {
  margin-top: clamp(1rem, calc(2.4 * var(--vw)), 2.9rem);
  line-height: 1.6;
}
.savings__buttons {
  margin-top: clamp(2.5rem, calc(4 * var(--vw)), 4.9rem);
  display: flex;
  justify-content: center;
  gap: clamp(1rem, calc(1.25 * var(--vw)), 1.5rem);
  flex-wrap: wrap;
}
/* These two are the roomiest buttons on the page, so the label is taken up 22%
   to use the space. Both keep the shared min-width, so they stay the same size
   as each other and the longer label ("Explore the Savings Program") is what
   the increase has to fit — it is the ceiling for the pair. */
.savings__buttons .btn {
  min-width: clamp(280px, calc(22.6 * var(--vw)), 435px);
  font-size: calc(var(--fs-ui) * 1.22);
}

/* ==========================================================================
   Trust CTA
   ========================================================================== */
.trust {
  background: var(--c-cream);
  padding-block: clamp(2.5rem, calc(6.1979 * var(--vw)), 7.4375rem) /* 119 */
    clamp(2.5rem, calc(6.1458 * var(--vw)), 7.375rem); /* 118 */
}
/* The redrawn illustration is 685px on the design canvas, so the pair sits on
   its own 1368px measure (685 art + 85 gap + 598 copy) centred inside the
   1524px container rather than spanning the full container. */
.trust__inner {
  /* .trust__inner is itself the .container, so the measure has to carry the
     gutter the way .container does or the tracks lose it. */
  max-width: calc(var(--measure-narrow) + 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 685fr) minmax(0, 598fr);
  gap: clamp(2rem, calc(4.43 * var(--vw)), 5.3125rem);
  align-items: center;
}
.trust__heading {
  font-size: var(--fs-hero);
  font-weight: 800;
  color: var(--c-orange);
  line-height: 1.0625;
}
/* This band already carries the orange headline and the illustration, so the
   two CTAs sit side by side in the quiet outline treatment rather than as
   stacked blue slabs. They drop to a column only once the row can no longer hold them. */
.trust__buttons {
  margin-top: clamp(1.75rem, calc(2.1 * var(--vw)), 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, calc(1.1 * var(--vw)), 1.3125rem);
}
.trust__buttons .btn {
  min-width: clamp(170px, calc(11.6 * var(--vw)), 223px);
  padding-inline: 1.5em;
}

/* ==========================================================================
   Disclosure ("In Writing")
   ========================================================================== */
.disclosure {
  background: var(--c-navy);
  color: var(--c-white);
  padding-block: clamp(2.1rem, calc(5.3438 * var(--vw)), 6.4125rem)
    /* 103, reduced from 171 */ clamp(2.4rem, calc(6.75 * var(--vw)), 8.1rem); /* 130, reduced from 216 */
}
/* The tag sits above the grid, so the margin that separates it from the heading
   belongs to the grid rather than to the heading inside the left column. */
.disclosure__inner {
  margin-top: clamp(1.5rem, calc(2.7 * var(--vw)), 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 893fr) minmax(0, 611fr);
  gap: clamp(2.5rem, calc(5 * var(--vw)), 6rem);
  align-items: center;
}
.disclosure__heading {
  margin-top: 0;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.49;
}
.disclosure__intro {
  margin-top: clamp(1rem, calc(2 * var(--vw)), 2.4rem);
  font-family: var(--font-serif);
  line-height: 1.99;
  max-width: 32em;
}
.disclosure__items {
  margin-top: clamp(1.75rem, calc(3.2 * var(--vw)), 3.9rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, calc(2.9 * var(--vw)), 3.4rem);
}
.disclosure-item {
  display: grid;
  grid-template-columns: clamp(36px, calc(2.6 * var(--vw)), 50px) 1fr;
  gap: clamp(1rem, calc(1.5 * var(--vw)), 1.75rem);
  align-items: start;
}
.disclosure-item__icon img {
  width: 100%;
  height: auto;
  transition: transform var(--motion) ease;
}
.disclosure-item:hover .disclosure-item__icon img {
  transform: scale(1.12);
}
.disclosure-item__title {
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.4;
}
.disclosure-item__text {
  margin-top: 0.3em;
  line-height: 1.6;
}
.disclosure__boxes {
  display: flex;
  flex-direction: column;
}
.disclosure-box {
  background: rgba(217, 217, 217, 0.1);
  border: 1px solid var(--c-white);
  padding: clamp(1.5rem, calc(2 * var(--vw)), 2.4rem)
    clamp(1.25rem, calc(1.5 * var(--vw)), 1.8rem);
  text-align: center;
  /* Reveal target too — see .audience-card. */
  transition:
    var(--reveal-transition),
    background-color var(--motion) ease;
}
/* The boxes are not links, so nothing moves — the panel just catches a little
   more light as the cursor crosses it, in the same translucent white it is
   already built from. */
.disclosure-box:hover {
  background: rgba(217, 217, 217, 0.18);
}
.disclosure-box + .disclosure-box {
  border-top: 0;
}
.disclosure-box__value {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--c-orange);
  line-height: 1.25;
  /* Equal-width digits so the count-up animation doesn't jitter the layout. */
  font-variant-numeric: tabular-nums;
}
.disclosure-box__value .alt {
  color: var(--c-sky);
}
.disclosure-box__label {
  margin-top: 0.5em;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
}

/* ==========================================================================
   Photo band
   ========================================================================== */
.photo-band {
  height: clamp(320px, calc(41.7 * var(--vw)), 800px);
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   Testimonial
   ========================================================================== */
.testimonial {
  padding-block: clamp(2.75rem, calc(6.9271 * var(--vw)), 8.3125rem) /* 133 */
    clamp(2.75rem, calc(6.875 * var(--vw)), 8.25rem); /* 132 */
}
.testimonial__inner {
  display: grid;
  grid-template-columns: minmax(0, 731fr) minmax(0, 751fr);
  gap: clamp(2rem, calc(3.7 * var(--vw)), 4.4rem);
  align-items: center;
}
/* The artwork is narrower than its column on the canvas, so it has to carry its
   own canvas share — left to `max-width: 100%` it would stop shrinking as soon
   as the column passed under its intrinsic 554px and sit oversized next to the
   quote. */
.testimonial__illustration img {
  width: min(554px, calc(28.8542 * var(--vw-inset)));
}
.testimonial__heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--c-blue);
}
/* Slides stack in one grid cell so the section keeps the height of the tallest
   quote and nothing shifts as they change. */
.testimonial__slides {
  display: grid;
}
/* Every slide sits in the same grid cell, so the box is as tall as the longest
   quote and the shorter ones have space left over. Centring them spends that
   space evenly above and below rather than banking it all under the last line,
   where it reads as a hole in the section. */
.testimonial__slide {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--motion-slide) ease,
    visibility var(--motion-slide);
}
.testimonial__slide.is-active {
  opacity: 1;
  visibility: visible;
}
.testimonial__quote {
  margin: clamp(1.25rem, calc(3 * var(--vw)), 3.6rem) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h6);
  line-height: 1.7;
}
/* A quote long enough to read as a paragraph is set a size down again: at pull
   quote size a 600-character testimonial sets the height of every other slide
   in the slider. See DRX_TESTIMONIAL_LONG in template-parts/home/testimonial.php. */
.testimonial__slide--long .testimonial__quote {
  font-size: var(--fs-body);
  line-height: 1.65;
}
.testimonial__author {
  margin-top: clamp(1rem, calc(2.3 * var(--vw)), 2.8rem);
  font-size: var(--fs-body);
  font-weight: 700;
}
.testimonial__dots {
  margin-top: clamp(1rem, calc(2.2 * var(--vw)), 2.6rem);
  display: flex;
  gap: min(13px, calc(0.6771 * var(--vw-inset)));
}
.testimonial__dot {
  width: min(19px, calc(0.9896 * var(--vw-inset)));
  height: min(19px, calc(0.9896 * var(--vw-inset)));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d9d9d9;
  cursor: pointer;
  transition: background-color var(--motion-quick) ease;
}
.testimonial__dot:hover {
  background: #c4c4c4;
}
.testimonial__dot.is-active {
  background: var(--c-orange);
}

/* A visitor who has asked for reduced motion still gets the feedback, just not
   the movement: the colour, border and shadow changes stay, and only the parts
   that travel or scale are dropped. The scroll reveals are already handled at
   the source — drx_reveal_flag() never arms them. */
@media (prefers-reduced-motion: reduce) {
  .testimonial__slide {
    transition: none;
  }
  .savings-card:hover,
  .audience-card:hover,
  .audience-card:focus-visible,
  .certs__seals img:hover,
  .savings-card:hover .savings-card__icon img,
  .feature:hover .feature__icon img,
  .disclosure-item:hover .disclosure-item__icon img,
  .audience-card:hover img,
  .story__founder:hover .story__founder-photo img {
    transform: none;
  }
}

/* ==========================================================================
   Our story
   ========================================================================== */
.story {
  padding-block: clamp(2.75rem, calc(7.1875 * var(--vw)), 8.625rem) /* 138 */
    clamp(2.75rem, calc(7.1354 * var(--vw)), 8.5625rem); /* 137 */
}
/* Unlike .disclosure__inner, the "Our Story" tag is not a label sitting above
   the whole band — the comp keeps it inside the copy column, and centres that
   column against the taller image beside it: image 8860..9376 and copy
   8931..9306 share a centre at 9118. Holding the tag outside the grid instead
   pushed the image down by its whole height, so the two halves no longer read
   as one row. */
/* Plain bold label — replaces the pill/badge shape the "Our Story" ribbon
   used to share with .tag. Only "Read More" keeps a pill now. */
.story__label {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-orange);
}
.story__inner {
  display: grid;
  grid-template-columns: minmax(0, 750fr) minmax(0, 921fr);
  /* The comp leaves only 16px of gutter between the copy and the image, so the
     image keeps its 921 of canvas width and reaches the container edge. The row
     gap is the one the stacked layout below 992 falls back to. */
  column-gap: clamp(0.75rem, calc(0.83 * var(--vw)), 1rem);
  row-gap: clamp(2rem, calc(6 * var(--vw)), 7rem);
  /* Top-aligned rather than centered, so the copy column starts level with
     the top of the photo instead of floating above it. */
  align-items: start;
}
.story__heading {
  /* 55 of the canvas below the tag, matching the gap the comp leaves between
     the button and the heading above it. */
  margin-top: clamp(1.5rem, calc(2.86 * var(--vw)), 3.44rem);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
}
.story__body {
  margin-top: clamp(1.25rem, calc(2.6 * var(--vw)), 3.1rem);
  font-family: var(--font-serif);
  line-height: 1.7;
  max-width: 27em;
}
.story__body p + p {
  margin-top: 1em;
}
.story__cta {
  margin-top: clamp(1.75rem, calc(3 * var(--vw)), 3.6rem);
}
.story__cta .btn {
  min-width: clamp(240px, calc(16.3 * var(--vw)), 313px);
}
/* Three founder headshots. Each photo falls back to a flat gray placeholder
   until the client supplies that founder's labeled photo file (see
   story.php). */
.story__founders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, calc(1 * var(--vw)), 1rem);
}
.story__founder {
  margin: 0;
}
.story__founder-photo {
  aspect-ratio: 234.079 / 283.801;
  border-radius: min(10px, calc(0.5208 * var(--vw-inset)));
  overflow: hidden;
  background: #d9d9d9;
}
.story__founder-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.story__founder:hover .story__founder-photo img {
  transform: scale(1.03);
}
.story__founder figcaption {
  margin-top: 0.75em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  background: var(--c-cream);
  padding-block: clamp(2.25rem, calc(5.1563 * var(--vw)), 6.1875rem); /* 99 */
}
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 637fr) minmax(0, 866fr);
  gap: clamp(2.5rem, calc(6.6 * var(--vw)), 7.9rem);
  align-items: center;
}
.contact__heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--c-orange);
  line-height: 1.33;
}
.contact__intro {
  margin-top: clamp(1rem, calc(2.9 * var(--vw)), 3.5rem);
}
.contact__form {
  margin-top: clamp(1.5rem, calc(2.4 * var(--vw)), 2.9rem);
}
.contact__illustration img {
  width: 100%;
  height: auto;
}

/* Contact Form 7 styling to match the design */
.contact .wpcf7 .drx-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, calc(2.3 * var(--vw)), 2.8rem);
}
.contact .wpcf7 .drx-form__field {
  margin-bottom: clamp(1.5rem, calc(2.3 * var(--vw)), 2.8rem);
}
.contact .wpcf7 .drx-form__field label {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-charcoal);
  display: block;
}
.contact .wpcf7 .wpcf7-form-control-wrap {
  display: block;
}
.contact .wpcf7 input[type="text"],
.contact .wpcf7 input[type="email"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--c-charcoal);
  background: transparent;
  padding: 0.5em 0;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  color: var(--c-charcoal);
  outline: none;
  border-radius: 0;
}
.contact .wpcf7 input:focus {
  border-bottom-color: var(--c-blue);
}
/* The underline travels to blue rather than snapping, and thickens under the
   cursor so a field reads as reachable before it is focused. */
.contact .wpcf7 input[type="text"],
.contact .wpcf7 input[type="email"],
.contact .wpcf7 textarea {
  transition: border-bottom-color var(--motion-quick) ease;
}
.contact .wpcf7 input[type="text"]:hover,
.contact .wpcf7 input[type="email"]:hover,
.contact .wpcf7 textarea:hover {
  border-bottom-color: var(--c-blue);
}
.contact .wpcf7 .drx-form__privacy {
  font-size: clamp(0.8125rem, calc(0.78125 * var(--vw)), 0.9375rem); /* 15 */
  font-style: italic;
  color: #000;
  line-height: 1.35;
  margin-bottom: clamp(1.5rem, calc(2.5 * var(--vw)), 3rem);
}
.contact .wpcf7 .wpcf7-submit {
  min-width: clamp(240px, calc(15.6 * var(--vw)), 299px);
}
.contact .wpcf7 .wpcf7-not-valid-tip {
  font-size: 0.8em;
  color: var(--c-orange);
  margin-top: 0.3em;
}
.contact .wpcf7 .wpcf7-response-output {
  margin: 1.5em 0 0;
  padding: 0.75em 1em;
  border: 1px solid var(--c-blue);
  border-radius: min(8px, calc(0.4167 * var(--vw-inset)));
  font-size: var(--fs-ui);
}
.contact .wpcf7 .wpcf7-spinner {
  display: block;
  margin: 0.5em 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .partner__inner,
  .stats__top,
  .trust__inner,
  .disclosure__inner,
  .testimonial__inner,
  .story__inner,
  .contact__inner {
    grid-template-columns: 1fr;
  }

  /* Stacked: the hero copy runs full width, so the seals centre under it and
     only half of them rides up over the photo. The hero grows by that half so
     they never land on the Request a Call button. */
  .hero,
  .certs {
    --certs-overlap: calc(0.5 * var(--certs-seal));
  }
  .hero__content {
    padding-bottom: calc(var(--certs-overlap) + 2.5rem);
  }
  .certs__inner {
    justify-content: center;
  }
  .certs__block {
    margin-right: 0;
  }
  .certs__text {
    white-space: normal;
    text-wrap: balance;
  }

  .audiences__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .savings__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
  .savings__grid {
    margin-top: clamp(2.5rem, calc(4.7 * var(--vw)), 5.6rem);
  }
  .stats .container,
  .savings .container {
    padding-inline: var(--gutter);
  }
  .stats__row {
    grid-template-columns: 1fr;
  }
  .trust__illustration {
    order: 2;
  }
  .contact__illustration {
    order: 2;
  }
}

@media (max-width: 575px) {
  .audiences__grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin-inline: auto;
  }
  .audiences__grid {
    margin-top: clamp(2rem, calc(3.5 * var(--vw)), 4.25rem);
  }
  .savings__buttons {
    flex-direction: column;
    width: 100%;
  }
  .savings__buttons .btn,
  .trust__buttons .btn {
    width: 100%;
    min-width: 0;
  }
  .contact .wpcf7 .drx-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact .wpcf7 .wpcf7-submit {
    width: 100%;
  }
}