/* ==========================================================================
   SHANTHA HI TECH — SERVICES LANDING PAGE
   services.css

   Themed to match index.html: pure black / pure white alternation,
   'Clarkson' → Helvetica type stack, uppercase buttons at 4px radius,
   #2f2f2f cards. No warm neutrals, no accent colour — contrast does
   the work, exactly as on the main page.

   Mobile-first. Layout expands at 992px and 1024px. (992, not the more
   usual 768, so this page's desktop grids don't appear until
   css/header.css's shared nav has also switched out of its hamburger —
   both were 768 before, which put multi-column desktop content under a
   still-mobile header on any 768-991px viewport.)

   Contents
     01. Tokens
     02. Reset & base
     03. Surfaces (light / dark section themes)
     04. Utilities (container, eyebrow, buttons, links)
     05. Image placeholders
     06. Nav + mega-menu
     07. Hero + auto-scrolling strip
     08. Value pillars
     09. Tabbed feature carousel
     10. Audience showcase
     11. Deep-dive blocks
     12. Testimonials
     13. FAQ accordion
     14. Support strip
     15. Closing CTA
     16. Fat footer
     17. Motion preferences
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* Core palette — matches index.html exactly */
  --black: #000000;
  --white: #ffffff;
  --ink: #111111;          /* text on white */
  --card: #2f2f2f;         /* card fill, as .op-card */
  --card-2: #454545;       /* inner placeholder, as .op-card__image-placeholder */

  --muted-on-dark: rgba(255, 255, 255, 0.62);
  --muted-on-light: #6b6b6b;
  --line-on-dark: rgba(255, 255, 255, 0.14);
  --line-on-light: #e6e6e6;

  /* Per-surface aliases — reassigned by .surface-* below */
  --bg: var(--black);
  --fg: var(--white);
  --muted: var(--muted-on-dark);
  --line: var(--line-on-dark);

  /* Type — same stack as the main page */
  --font: "Clarkson", "Helvetica", Helvetica, Arial, sans-serif;
  --font-script: "Kaushan Script", cursive;
  --font-mont: "Montserrat", sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: clamp(17px, 0.3vw + 16px, 19px);
  --text-xl: clamp(20px, 0.9vw + 17px, 26px);
  --text-2xl: clamp(26px, 2.4vw + 18px, 44px);
  --text-3xl: clamp(30px, 4vw + 14px, 56px);
  --text-hero: clamp(38px, 6.2vw + 14px, 72px);

  /* Spacing */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;

  --section-y: 72px;
  --gutter: 24px;
  --container: 1240px;

  /* Shape — main page uses 4px buttons, 8px cards, 12px media */
  --radius-btn: 4px;
  --radius-card: 8px;
  --radius-media: 12px;

  /* Motion — main page easing */
  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 200ms;
  --mid: 380ms;
}

@media (min-width: 992px) {
  :root {
    --section-y: 104px;
    --gutter: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-y: 136px;
    --gutter: 56px;
  }
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  letter-spacing: -0.001em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

ul,
ol {
  list-style: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Headings mirror the main page: light weight, tight tracking */
h1,
h2,
h3,
h4 {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: inherit;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: var(--s2);
  z-index: 300;
  padding: var(--s2) var(--s3);
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-btn);
  font-size: var(--text-sm);
}

.skip-link:focus {
  top: var(--s2);
}

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

/* ==========================================================================
   03. SURFACES
   Two themes only — black and white — alternating down the page,
   the same rhythm the main page uses.
   ========================================================================== */

.surface-dark {
  --bg: var(--black);
  --fg: var(--white);
  --muted: var(--muted-on-dark);
  --line: var(--line-on-dark);
  background-color: var(--bg);
  color: var(--fg);
}

.surface-light {
  --bg: var(--white);
  --fg: var(--ink);
  --muted: var(--muted-on-light);
  --line: var(--line-on-light);
  background-color: var(--bg);
  color: var(--fg);
}

.section {
  padding-block: var(--section-y);
}

/* ==========================================================================
   04. UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: block;
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}

/* --- Buttons — white block, uppercase, 4px radius (as .contact-btn) --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  padding: 19px 24px;
  border-radius: var(--radius-btn);
  font-family: var(--font);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color var(--fast) var(--ease),
    color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.btn .arw {
  transition: transform var(--mid) var(--ease-out);
}

.btn:hover .arw {
  transform: translateX(4px);
}

/* Primary inverts against whatever surface it sits on */
.btn--primary {
  background-color: var(--fg);
  color: var(--bg);
}

.btn--primary:hover {
  background-color: var(--fg);
  opacity: 0.86;
}

/* ==========================================================================
   05. IMAGE PLACEHOLDERS
   Tuned to the main page's card colours. Swap each .ph for an <img>.
   ========================================================================== */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s3);
  border-radius: var(--radius-media);
  overflow: hidden;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

/* On black surfaces */
.surface-dark .ph {
  background-color: var(--card);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.035) 0 10px,
    transparent 10px 20px
  );
  color: rgba(255, 255, 255, 0.5);
}

/* On white surfaces */
.surface-light .ph {
  background-color: #f2f2f2;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.03) 0 10px,
    transparent 10px 20px
  );
  color: var(--muted-on-light);
}

/* Product-UI variant reads as a screen, not a photo */
.surface-dark .ph--ui {
  background-color: var(--card-2);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.surface-light .ph--ui {
  background-color: var(--white);
  border: 1px solid var(--line-on-light);
}

.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--3x4  { aspect-ratio: 3 / 4; }

/* Product UI card floating over lifestyle photography */
.stack {
  position: relative;
  padding-bottom: 44px;
  padding-right: 20px;
}

.stack__photo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-media);
  object-fit: cover;
  /* Source is a centered square render (laptop + cart + confetti); cropping
     into the 4:3 box needs no bias since the subject already sits centered. */
  object-position: center;
}

/* Contain, not cover: this is a phone-mockup UI screenshot, not a photo —
   cropping into it would cut off the top of the screen or the checkout
   button. The surrounding .ph--ui card background letterboxes it instead,
   same approach as .grow-carousel__image in style.css.

   Taken out of .ph's grid flow and sized against its padding box. As a grid
   item the image's percentage height had nothing definite to resolve against
   (the card's height comes from `aspect-ratio`), so it fell back to the
   intrinsic ratio and overflowed — and `overflow: hidden` then ate the bottom
   of the portrait mockup, including its checkout button. Absolute positioning
   makes the card the containing block, whose used size IS definite, so the
   percentages resolve and object-fit can letterbox as intended. Both offsets
   and both lengths are set because an abs-pos replaced element with `height:
   auto` ignores its offsets and uses intrinsic height instead. */
.stack__card-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stack__card {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  max-width: 320px;
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   06. NAV
   The masthead is shared with index.html and styled entirely by
   css/header.css. Nothing to declare here.
   ========================================================================== */

/* ==========================================================================
   07. HERO
   ========================================================================== */

/* The hero fills exactly the first screen: viewport minus the masthead.
   Headline sits up top, the photo strip is pushed to the bottom edge, so
   the strip's lower edge lands on the fold. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - var(--header-h, 193px));
  padding-top: var(--s7);
  padding-bottom: 0;
  text-align: center;
}

/* Matches .hero__title on the main page: weight 300, -0.06em */
.hero__title {
  font-size: var(--text-hero);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 1.04;
  max-width: 18ch;
  margin-inline: auto;
}

.hero__sub {
  margin: var(--s3) auto 0;
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--muted);
}

/* Auto-scrolling photography strip.
   margin-top is only a floor — the hero's space-between pushes the strip
   to the bottom edge on tall screens. Keeping the floor small lets the
   first screen still fit on short windows. */
.strip {
  margin-top: var(--s4);
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.strip__track {
  display: flex;
  gap: var(--s3);
  width: max-content;
  animation: strip-scroll 48s linear infinite;
}

.strip:hover .strip__track {
  animation-play-state: paused;
}

.strip__item {
  width: 240px;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .strip__item {
    width: 320px;
  }
}

/* Each card's image/placeholder plus its caption overlay. .strip__photo
   itself carries position:relative so the scrim and label can sit on top;
   the .ph--4x3 aspect-ratio is applied directly to it for the real-photo
   card (the image fills via position:absolute below), and inherited from
   the nested .ph--4x3 placeholder for the other five. */
.strip__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.strip__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Source photo is portrait (736x960) dropped into a landscape 4:3 box, so
   cover crops out most of the top/bottom. Biased down and slightly right
   of center to keep the waterfall and koi pond — the actual subject — in
   frame rather than the plain garden wall at the top. */
.strip__image--landscaping {
  object-position: 60% 78%;
}

/* Source photo (609x784) is portrait, same crop problem as landscaping.
   Scales sit top-center and the gavel sits bottom-right, so a plain center
   crop cuts one or the other off entirely; this keeps both partially in
   frame rather than favoring one prop over the other. */
.strip__image--law {
  object-position: 60% 48%;
}

/* Source photo (736x1104) is the tallest of the strip's portrait sources.
   The camera body and lens sit in the middle third of the frame with the
   sunset above and the tabletop below, so centering vertically keeps the
   camera itself in view rather than cropping into empty sky or wood. */
.strip__image--photography {
  object-position: 48% 52%;
}

/* Source photo (408x725) is the narrowest/tallest of the strip's sources —
   almost a third of the frame at the top is empty dark background above
   the desk, with the calculator, cash and coins filling the bottom two-
   thirds. Biased well down to skip the empty space and keep the subject
   in frame. */
.strip__image--accounting {
  object-position: 50% 72%;
}

/* Source photo (736x733) is nearly square, the closest of the strip's
   sources to the 4:3 box, so only a thin sliver needs to crop off the top
   and bottom — centered is enough to keep the whole desk in frame. */
.strip__image--design {
  object-position: 50% 55%;
}

/* Source photo (736x1104) is a full room shot, tallest ratio in the strip.
   Decorative ceiling fills the top quarter with little identifying detail;
   biased down to keep the exam bed, chair and wall display — the clinical
   cues — in frame instead. */
.strip__image--physiotherapy {
  object-position: 50% 62%;
}

.strip__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 70%);
  pointer-events: none;
}

.strip__label {
  position: absolute;
  left: var(--s2);
  bottom: var(--s2);
  z-index: 1;
  margin: 0;
  color: #ffffff;
  font-family: var(--font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   08. VALUE PILLARS
   ========================================================================== */

.pillars {
  display: grid;
  gap: var(--s5);
}

.pillar__title {
  font-size: var(--text-xl);
  margin-bottom: var(--s1);
}

.pillar__body {
  color: var(--muted);
}

@media (min-width: 992px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
  }
}

/* ==========================================================================
   09. TABBED FEATURE CAROUSEL
   ========================================================================== */

.tabs__head {
  margin-bottom: var(--s5);
}

.tabs__list {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--s1);
  margin-bottom: var(--s5);
}

.tabs__list::-webkit-scrollbar {
  display: none;
}

/* Pill tabs echo .pill on the main page */
.tab {
  flex-shrink: 0;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--fast) var(--ease),
    color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.tab:hover {
  color: var(--fg);
}

.surface-dark .tab:hover { background-color: rgba(255, 255, 255, 0.08); }
.surface-light .tab:hover { background-color: rgba(0, 0, 0, 0.06); }

.tab[aria-selected="true"] {
  background-color: var(--fg);
  color: var(--bg);
}

.panel {
  display: grid;
  gap: var(--s4);
  align-items: center;
}

.panel[hidden] {
  display: none;
}

.panel__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--s2);
}

.panel__body {
  color: var(--muted);
  margin-bottom: var(--s3);
  max-width: 44ch;
}

@media (min-width: 992px) {
  .panel {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--s6);
  }
}

/* ==========================================================================
   10. AUDIENCE SHOWCASE
   ========================================================================== */

.aud__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.aud__controls {
  display: none;
  gap: var(--s1);
  flex-shrink: 0;
}

.aud__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg);
  transition: border-color var(--fast) var(--ease),
    opacity var(--fast) var(--ease);
}

.aud__btn:hover:not(:disabled) {
  border-color: var(--fg);
}

.aud__btn:disabled {
  opacity: 0.32;
  cursor: default;
}

.aud__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.aud__viewport::-webkit-scrollbar {
  display: none;
}

.aud__track {
  display: flex;
  gap: var(--s3);
  width: max-content;
}

.aud__card {
  width: 240px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.aud__label {
  margin-top: var(--s2);
  font-weight: 500;
  color: var(--fg);
}

.aud__meta {
  font-size: var(--text-sm);
  color: var(--muted);
}

@media (min-width: 992px) {
  .aud__controls { display: flex; }
  .aud__card { width: 300px; }
  .aud__viewport {
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* ==========================================================================
   11. DEEP-DIVE BLOCKS
   ========================================================================== */

.dive + .dive {
  margin-top: var(--s8);
}

.dive__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s6);
}

.dive__title {
  font-size: var(--text-2xl);
  max-width: 22ch;
}

.dive__rows {
  display: grid;
  gap: var(--s6);
}

.row {
  display: grid;
  gap: var(--s3);
  align-items: center;
}

.row__title {
  font-size: var(--text-xl);
  margin-bottom: var(--s1);
}

.row__body {
  color: var(--muted);
  max-width: 44ch;
}

@media (min-width: 992px) {
  .dive__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .row {
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
  }

  .row:nth-child(even) .row__media {
    order: -1;
  }
}

/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */

.quotes {
  display: grid;
  gap: var(--s7);
}

.quote {
  display: grid;
  gap: var(--s4);
  align-items: center;
}

.quote__text {
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.04em;
  color: var(--fg);
  max-width: 22ch;
}

.quote__who {
  margin-top: var(--s3);
}

.quote__name {
  font-weight: 500;
  color: var(--fg);
}

.quote__co {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--s3);
}

.quote__portrait {
  max-width: 340px;
}

@media (min-width: 992px) {
  .quote {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s6);
  }

  .quote:nth-child(even) .quote__portrait {
    order: -1;
  }
}

/* ==========================================================================
   13. FAQ ACCORDION
   ========================================================================== */

.faq {
  max-width: 820px;
  margin-inline: auto;
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s3);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__sign {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 5px;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--mid) var(--ease-out);
}

.faq__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__a {
  padding-bottom: var(--s3);
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.6;
}

/* ==========================================================================
   14. SUPPORT STRIP
   ========================================================================== */

.support {
  display: grid;
  gap: var(--s5);
}

.support__col h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--s1);
}

.support__col p {
  color: var(--muted);
  margin-bottom: var(--s3);
}

@media (min-width: 992px) {
  .support {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s6);
  }
}

/* ==========================================================================
   15. CLOSING CTA
   ========================================================================== */

.close-cta {
  text-align: center;
}

.close-cta__title {
  font-size: var(--text-3xl);
  font-weight: 300;
  letter-spacing: -0.05em;
  max-width: 16ch;
  margin-inline: auto;
}

.close-cta__micro {
  margin-top: var(--s2);
  font-size: var(--text-sm);
  color: var(--muted);
}

.close-cta .btn {
  margin-top: var(--s5);
}

/* ==========================================================================
   16. FAT FOOTER
   ========================================================================== */

.foot {
  --bg: var(--white);
  --fg: var(--ink);
  --muted: var(--muted-on-light);
  --line: var(--line-on-light);
  background-color: var(--bg);
  color: var(--fg);
  padding-top: var(--s7);
  padding-bottom: var(--s4);
}

.foot__brand {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  align-items: flex-start;
  margin-bottom: var(--s6);
}

/* Footer sits on white; the logo artwork (images/logo/shantha-logo.png) is a
   fixed white-ink raster, so invert it to near-black instead of recolouring
   an inline <text> fill. */
.foot__brand .brand-mark {
  height: 52px;
  width: auto;
  filter: invert(1);
}

.foot__tagline {
  font-size: var(--text-sm);
  color: var(--muted);
}

.foot__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s4);
  padding-bottom: var(--s6);
}

.foot__group {
  flex: 1 1 140px;
  min-width: 140px;
}

/* Website and Business carry 8 links each — twice the other groups — so
   they get double the flex-basis and split their own list into two short
   columns instead of towering over Company/Follow's 4-item lists. */
.foot__group--split {
  flex: 2 1 280px;
  min-width: 280px;
}

.foot__sublists {
  display: flex;
  gap: var(--s4);
}

.foot__sublists .foot__list {
  flex: 1 1 0;
  min-width: 0;
}

.foot__title {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.foot__list {
  display: flex;
  flex-direction: column;
  /* Links themselves now carry the spacing via padding (below), so the list
     gap can drop — otherwise padding + gap would double up the space
     between rows. */
  gap: 0;
}

.foot__list a {
  font-size: var(--text-sm);
  color: var(--fg);
  opacity: 0.72;
  transition: opacity var(--fast) var(--ease);
  /* WCAG 2.2 SC 2.5.5 (Target Size, Enhanced) wants 44px; the text line box
     alone was ~16px tall. min-height (not padding) so font metrics can't
     leave it a pixel short. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.foot__list a:hover {
  opacity: 1;
}

.foot__utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s4);
  border-top: 1px solid var(--line);
}

.select {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 42px;
  padding-inline: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background-color: transparent;
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--text-sm);
  cursor: pointer;
}

.select option {
  color: var(--ink);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-left: auto;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
}

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: center;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--muted);
}

.foot__legal a {
  transition: color var(--fast) var(--ease);
  /* WCAG 2.2 SC 2.5.8 wants 24px; min-height (not padding) so font metrics
     can't leave it a pixel short — matches .foot__list a's treatment
     elsewhere in the codebase. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.foot__legal a:hover {
  color: var(--fg);
}

.foot__copy {
  margin-right: auto;
}

@media (max-width: 480px) {
  /* Below one clean row, the Website/Business split reads as two thin,
     cramped lists — stack them back into a single column per group. */
  .foot__sublists {
    flex-direction: column;
    gap: 0;
  }
}

/* ==========================================================================
   17. MOTION PREFERENCES
   ========================================================================== */

@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;
  }

  .strip__track {
    animation: none;
    transform: none;
  }

  .strip {
    overflow-x: auto;
  }
}

/* ==========================================================================
   19. FRAMES — one viewport screen per Business submenu item
   Frame 1 is the hero (#services). Frames 2-8 use .frame below.
   Anchored navigation: services.html#online-store, #institutions, etc.
   ========================================================================== */

.frame {
  /* svh after vh: unsupporting browsers discard the second line and keep
     the first; supporting ones get the mobile-toolbar-visible height rather
     than the taller, toolbar-hidden 100vh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s6);
}

.frame__inner {
  display: grid;
  gap: var(--s5);
  align-items: center;
}

.frame__title {
  font-size: var(--text-3xl);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1.04;
  max-width: 16ch;
}

.frame__sub {
  margin-top: var(--s3);
  font-size: var(--text-lg);
  color: var(--muted);
  max-width: 46ch;
}

.frame__points {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s4);
}

.frame__point {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 44ch;
}

.frame__point b {
  font-weight: 500;
  color: var(--fg);
  flex-shrink: 0;
  min-width: 8.5em;
}

@media (min-width: 992px) {
  .frame__inner {
    grid-template-columns: 1fr 1.05fr;
    gap: var(--s7);
  }
}

/* ==========================================================================
   20. FRAME 1 BACKGROUND
   Photographic ground for #services. A white veil sits between the photo
   and the content so the black headline stays legible; the veil is the
   ::before layer, lifted above the image but behind everything else.
   ========================================================================== */

.hero--bg {
  position: relative;
  isolation: isolate;
  background-image: url("../images/services-hero-compressed.jpg");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}

.hero--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.66) 45%,
    rgba(255, 255, 255, 0.78) 100%
  );
}

/* Strip cards turn translucent so the photograph reads through them */
.hero--bg .strip .ph {
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   20b. FRAME 2 BACKGROUND — Online Store
   Same photographic-ground + veil treatment as .hero--bg above, applied to
   the whole #online-store frame rather than just its media slot.
   ========================================================================== */

.frame--bg-online-store {
  position: relative;
  isolation: isolate;
  background-image: url("../images/online-store-bg-compressed.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

.frame--bg-online-store::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.72) 45%,
    rgba(255, 255, 255, 0.86) 100%
  );
}

/* ==========================================================================
   20c. FRAME 3 BACKGROUND — Institutions
   Same photographic-ground treatment as .frame--bg-online-store, but veiled
   in black rather than white — #institutions is surface-dark, so its text
   is white and needs a dark scrim to stay legible over the photo instead of
   a light one.
   ========================================================================== */

.frame--bg-institutions {
  position: relative;
  isolation: isolate;
  background-image: url("../images/institutions-bg-compressed.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

.frame--bg-institutions::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.86) 0%,
    rgba(0, 0, 0, 0.72) 45%,
    rgba(0, 0, 0, 0.86) 100%
  );
}

/* ==========================================================================
   20d. FRAME 4 BACKGROUND — Organizations
   #organizations is surface-light (ink-on-white text), so this takes the
   white veil like .frame--bg-online-store rather than the black one above.
   The veil runs heavier here — 0.90/0.82 against online-store's 0.86/0.72 —
   because the photograph is a night shot of a lit office tower, and a
   lighter veil left the dark text sitting on near-black window glass.
   ========================================================================== */

.frame--bg-organizations {
  position: relative;
  isolation: isolate;
  background-image: url("../images/organizations-bg-compressed.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

.frame--bg-organizations::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.82) 45%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

/* ==========================================================================
   20e. FRAME 5 BACKGROUND — Donations
   #donations is surface-dark, so this takes the black veil like
   .frame--bg-institutions. The source photograph is small (534x401) and gets
   scaled well past its native size at full-bleed; the veil covers most of
   the resulting softness, and the subject is a shallow-focus close-up that
   was never sharp edge to edge anyway.
   ========================================================================== */

.frame--bg-donations {
  position: relative;
  isolation: isolate;
  background-image: url("../images/donations-bg-compressed.jpg");
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}

.frame--bg-donations::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.86) 0%,
    rgba(0, 0, 0, 0.72) 45%,
    rgba(0, 0, 0, 0.86) 100%
  );
}

/* ==========================================================================
   20f. FRAME 6 BACKGROUND — Memberships
   #memberships is surface-light, so white veil. Held at .frame--bg-online-store
   strength (0.86/0.72) rather than the heavier .frame--bg-organizations mix:
   this photograph is a sunlit interior that is already bright, and the heavier
   veil erased it entirely instead of just quieting it.
   ========================================================================== */

.frame--bg-memberships {
  position: relative;
  isolation: isolate;
  background-image: url("../images/memberships-bg-compressed.jpg");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

.frame--bg-memberships::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.72) 45%,
    rgba(255, 255, 255, 0.86) 100%
  );
}

/* ==========================================================================
   20g. FRAME 7 BACKGROUND — Portfolio
   #portfolio is surface-light, same white veil as .frame--bg-memberships at
   the same strength — this source photo is a bright, high-key scattered
   photo-grid mockup and needs no heavier treatment to stay legible under it.
   ========================================================================== */

.frame--bg-portfolio {
  position: relative;
  isolation: isolate;
  background-image: url("../images/portfolio-bg-compressed.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

.frame--bg-portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.72) 45%,
    rgba(255, 255, 255, 0.86) 100%
  );
}

/* ==========================================================================
   21. SPACING MODIFIERS
   Replaces style="" attributes that previously carried these one-off
   margins, so the CSP can drop 'unsafe-inline' from style-src.
   ========================================================================== */

.dive__title--gap-xl { margin-bottom: var(--s7); }
.dive__title--gap    { margin-bottom: var(--s5); }