/* ==========================================================
   intone inc — Design System v2.0
   Source of truth: figma.com/design/iKSh7ZAvz6Pfj62AInqDgq/Intone.com

   Structure:
     1.  Primitive color tokens  (:root)
     2.  Semantic tokens + base scope  (.intone-page)
     3.  Box-sizing reset
     4.  Buttons  (.btn-primary / .btn-secondary)
     5.  Section header pattern  (.section-header)
     6.  Scroll-reveal animation  (.reveal)
     7.  Responsive overrides (legacy)
     ── Shared global components ────────────────────────
     8.  Contact marquee component  (.intone-contact-marquee)
     9.  Footer  (.intone-footer)
     10. Service page shared components (.home-hero, .home-intro, .home-service-row,
         .home-ready, .home-ticker)
     10b.Expert card component  (.contact-expert-section / card)
     11. Shared callout pattern  (.intone-callout)
     12. Inner page hero  (.page-hero)
     13. Article card  (.article-card)
     14. Responsive overrides (marquee, footer, home/service)
   ========================================================== */


/* ============================================================
   1. PRIMITIVE COLOR TOKENS
   ============================================================ */
:root {
  /* ----------------------------------------------------------------------
     REBRANDED FOR INTONECCM.COM — 2026-08-24.
     This theme arrived carrying intone.com's palette (orange #ff5c02 /
     blue-violet #4d00ff / gold #f6b43f). None of those three appear
     anywhere on intoneccm.com. Every value below is taken from the LIVE
     intoneccm.com theme (hello-elementor-child), by frequency of real use
     — nothing here is invented. Original intone.com values are kept in the
     comments so the provenance of the swap stays auditable.
     ---------------------------------------------------------------------- */

  /* --- Primary / Brand teal   (was Orange: ffc9ab/ff9256/ff5c02/c74700/8d3200)
     The teal half of the intoneccm brand gradient. -300 (#6ac2b7) is the
     single most-used brand colour on the live site (98 occurrences) and is
     the gradient's 0% stop + the header CTA's border colour.
     -100/-200 are the gradient's own lighter stops; -400/-500 are the
     darker teals the live site uses for gradient-clipped display text. */
  --ds-primary-100: #8adbbb;   /* gradient 75% stop  (47 uses) */
  --ds-primary-200: #8ad6c0;   /* gradient 50% stop  (69 uses) */
  --ds-primary-300: #6ac2b7;   /* gradient  0% stop  (98 uses) — PRIMARY */
  --ds-primary-400: #4fb799;   /* text-gradient stop (38 uses) */
  --ds-primary-500: #47b0a3;   /* text-gradient stop (32 uses) */
  --ds-primary-10: rgba(106, 194, 183, 0.1);

  /* --- Secondary / Brand lime  (was Blue-Violet: abb3ff/5661ff/4d00ff/37277a/2d1f62)
     The lime/green half of the same gradient — its 93.75%→100% stops.
     Used together with --ds-primary-* these reproduce the brand gradient. */
  --ds-secondary-100: #95e091;  /* gradient 96.88% stop (46 uses) */
  --ds-secondary-200: #84dda5;  /* gradient 93.75% stop (46 uses) */
  --ds-secondary-300: #9fdd5f;  /* gradient   100% stop (62 uses) — LIME END */
  --ds-secondary-400: #84ba4c;  /* text-gradient stop   (25 uses) */
  --ds-secondary-500: #58aa2b;  /* darkest brand green  (11 uses) */
  --ds-secondary-10: rgba(159, 221, 95, 0.1);

  /* --- Neutral --- */
  --ds-neutral-100: #ffffff;
  --ds-neutral-200: #e8e8e8;
  --ds-neutral-300: #d2d2d2;
  --ds-neutral-400: #bbbbbb;
  --ds-neutral-500: #a4a4a4;
  --ds-neutral-600: #8e8e8e;
  --ds-neutral-700: #777777;
  --ds-neutral-800: #606060;
  --ds-neutral-900: #4a4a4a;
  --ds-neutral-1000: #333333;
  --ds-neutral-10: rgba(51, 51, 51, 0.1);
  --ds-black-10: #141414;
  --ds-black: #000000;

  /* --- Semantic status --- */
  --ds-red-100: #fb3748;
  --ds-red-200: #d00416;
  --ds-red-10: rgba(251, 55, 72, 0.1);

  --ds-yellow-100: #ffdb43;
  --ds-yellow-200: #f6b43f;
  --ds-yellow-300: #dfb400;
  --ds-yellow-10: rgba(255, 219, 67, 0.1);

  --ds-green-100: #84ebb4;
  --ds-green-200: #1fc16b;
  --ds-green-10: rgba(31, 193, 107, 0.1);

  /* --- Typography --- */
  --ds-font-heading: 'Public Sans', sans-serif;
  --ds-font-body: 'Public Sans', sans-serif;

  /* --- Border radius --- */
  --ds-radius-zero: 0px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 20px;
  --ds-radius-xl: 24px;

  /* --- Dark palette (Homepage design) --- */
  --ds-dark-900: #141414;
  /* primary dark section bg    */
  --ds-dark-800: #202022;
  /* dark card / callout bg     */
  --ds-navy: #1e2e4c;
  /* body/heading navy — already matches intoneccm (79 uses live) */
  --ds-navy-primary: #233963;
  /* interactive navy — links, outline buttons, labels (38 uses live) */

  /* --- Brand accent  (was the intone.com "Gold palette": #f6b43f / #b07613)
     intoneccm's accent is a GRADIENT, not a single hue, so it resolves into
     two tokens: a solid for borders/bullets/fills, and the gradient itself
     for surfaces. --ds-brand is the gradient's 0% stop, which is also what
     the live header CTA uses as its solid border colour.
     CONTRAST NOTE: #6ac2b7 is 2.10:1 on white — decorative only, never
     light-mode body text. That is the same role gold held (1.82:1), so this
     is a like-for-like swap, not a regression. */
  --ds-brand: #6ac2b7;
  --ds-brand-dark: #47b0a3;
  /* darker teal for hover/pressed states (2.62:1 — still decorative) */

  /* The two real intoneccm gradients, copied verbatim from the live theme.
     -gradient  = the brand gradient (header CTA, hover frames, badges).
     -gradient-text = the darker, denser variant the live site uses for
     gradient-clipped DISPLAY text, where the pastel one is illegible. */
  --ds-brand-gradient: linear-gradient(90deg, #6ac2b7 0%, #8ad6c0 50%, #8adbbb 75%, #86dcaf 87.5%, #84dda5 93.75%, #95e091 96.88%, #9fdd5f 100%);
  --ds-brand-gradient-text: linear-gradient(90deg, #47b0a3 0%, #4fb799 30.4%, #4cc86f 77.4%, #84ba4c 100%);

  /* Back-compat aliases. ~149 declarations across this theme still say
     var(--ds-gold) / var(--ds-gold-label); re-pointing them here rebrands
     every one at once instead of touching 40+ files. Prefer --ds-brand in
     new code — these two names are retained only so nothing silently falls
     back to gold, and should be retired once the consumers are renamed. */
  /* --ds-accent: consumed only by the Resource System plugin (9 refs, each
     with an inline #6ac2b7 fallback) and aliased there as
     `--ds-gold: var(--ds-accent)` with NO fallback — which resolved to an
     invalid value while nothing defined it. Defined here 2026-09-01 so the
     plugin tracks the real brand token instead of a frozen literal. */
  --ds-accent: var(--ds-brand);

  --ds-gold: var(--ds-brand);
  /* --ds-gold-label was a TEXT colour (.home-section-label 24/700,
     .home-section-cta 18/600). No intoneccm brand teal reaches even 3:1 on
     white, so a teal here would be unreadable; the live site sets label and
     CTA text in navy. Navy is 11.43:1 — this also FIXES the AA failure the
     old #233963 (3.86:1) shipped with. */
  --ds-gold-label: var(--ds-navy-primary);

  /* --- Light surfaces --- */
  --ds-light-100: #f3f4f5;
  /* light section bg           */
  --ds-light-200: #f4f6f9;
  /* alternate light bg         */

  /* --- Layout tokens (shared by all page templates) --- */
  --gutter: clamp(20px, 4vw, 50px);
  /* horizontal edge padding for hero, breadcrumb, header */
  --content: 1352px;
  /* max inner content width                              */
}


/* ============================================================
   2. SEMANTIC TOKENS  (scoped to any Intone page wrapper)
   ============================================================ */
.intone-page {
  /* brand */
  --primary: var(--ds-primary-300);
  --primary-light: var(--ds-primary-200);
  --primary-dark: var(--ds-primary-400);
  --secondary: var(--ds-secondary-300);
  --secondary-light: var(--ds-secondary-200);
  --secondary-dark: var(--ds-secondary-400);
  /* Re-pointed from the status-yellow ramp (--ds-yellow-200/-300) to the
     brand accent, 2026-08-24. These are BRAND tokens that happened to be
     wired to the status palette on intone.com because its brand colour was
     gold; on intoneccm that coupling would resurrect gold on every button.
     The --ds-yellow-* primitives stay true yellows for real status use. */
  --gold-primary: var(--ds-brand);
  --gold-dark: var(--ds-brand-dark);


  /* surface */
  --bg: var(--ds-neutral-100);
  --bg-alt: #f5f5f5;

  /* text */
  --text: var(--ds-neutral-1000);
  --muted: var(--ds-neutral-600);

  /* border */
  --rule: var(--ds-neutral-200);

  /* status */
  --success: var(--ds-green-200);
  --warning: var(--ds-yellow-100);
  --error: var(--ds-red-100);

  /* typography */
  --heading-font: var(--ds-font-heading);
  --body-font: var(--ds-font-body);

  overflow-x: hidden;
}

.share-question-section__conclusion {
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 5.5vw, 36px);
  font-weight: 300;
  /* font-style: italic; */
  line-height: 1.2em;
  /* color: #141414; */
  text-transform: uppercase;
  margin: 0;
  /* max-width: 749px; */
}

.share-question-section__conclusion-regular {
  font-family: var(--ds-font-heading);
  font-size: clamp(20px, 2.5vw, 36px);
  color: #818994;
  font-weight: 300;
}

.share-question-section__conclusion-bold {
  font-family: var(--ds-font-heading);
  font-size: clamp(20px, 2.5vw, 36px);
  color: #818994;
  font-weight: 700;
}

.share-intro-row .share-btn-cta-dark {
  background: var(--ds-dark-900, #141414);
  border-color: var(--ds-dark-900, #141414);
  color: #ffffff;
}

.share-btn-cta-dark {
  border: 2px solid #fff;
  padding: 16px 32px;
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 600;
  line-height: normal;
  /* text-transform: uppercase; */
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.ms-intro-row .ms-btn-cta-dark:hover {
  background: var(--ds-gold, #6ac2b7);
  border-color: var(--ds-gold, #6ac2b7);
  color: #000000;
}

.share-btn-cta-outline {
  background: #ffffff;
  border: 1.5px solid var(--ms-dark);
  color: var(--ms-dark);
  padding: 14px 24px;
  font-family: var(--ds-font-heading);
  font-size: 26px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms, color 200ms;
}

.share-intro-row .share-btn-cta-outline:hover {
  background: var(--ms-dark);
  color: var(--ms-light);
  text-decoration: none;
}

/* ============================================================
   3. BOX-SIZING RESET
   ============================================================ */
.intone-page *,
.intone-page *::before,
.intone-page *::after {
  box-sizing: border-box;
}


/* ============================================================
   3b. RESET CORRECTIONS
   The parent theme's reset.css ships hardcoded rose-pink values
   (#c36) on links and buttons, and a mid-grey (#666) border on
   every input element.  These override those three rules with
   neutral/token-based defaults.

   This section loads after the reset (priority 1) and before
   any page CSS.  DS class selectors (.btn-primary,
   .apply-form__submit, .job-card__apply-btn, etc.) all carry
   higher specificity and re-apply their full styles on top —
   nothing here breaks those components.
   ============================================================ */

/* ── Links ─────────────────────────────────────────────────
   Inherit the parent element's colour instead of #c36.
   Any component that wants a specific link colour sets it
   explicitly (e.g. .intone-footer-links li a, nav links).     */
a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

/* ── Buttons ────────────────────────────────────────────────
   Strip the #c36 baseline completely.  A bare <button> now
   looks invisible/neutral rather than rose-pink; DS classes
   re-apply background, border, colour, padding from scratch.

   :where() zeroes out the element's specificity contribution
   so the hover rule sits at (0,0,0)+(0,1,0) = (0,1,0).
   Any class rule on the same element — e.g.
     .apply-form__submit  { color: #fff }       → (0,1,0)
     .job-card__apply-btn { color: #fff }        → (0,1,0)
   — loaded later (page CSS after DS) wins the tie, keeping
   the white text on dark-background buttons during hover.   */
:where(button, [type="button"], [type="reset"], [type="submit"]) {
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: inherit;
}

:where(button, [type="button"], [type="reset"], [type="submit"]):hover {
  background: none;
  color: inherit;
  text-decoration: none;
}

/* ── Inputs / selects / textareas ───────────────────────────
   Replace the hardcoded #666 border with the DS semantic
   border token so un-classed fields look on-brand in both
   light and dark modes.  Width:100% from the reset is kept —
   it is a useful default.                                     */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  border-color: var(--t-border-strong, rgba(9, 16, 29, 0.14));
}


/* ── Screen-reader-only utility ─────────────────────────────
   ADDED 2026-09-01 — this was a REAL VISIBLE REGRESSION from the
   Elementor removal, not a tidy-up.

   header.php emits <a class="skip-link screen-reader-text">Skip to
   content</a> on every page, and home.php emits a
   .screen-reader-text <label> on the blog archive. Under the old
   parent those were hidden by hello-elementor/assets/css/theme.css,
   which hello_elementor_scripts_styles() enqueued as the
   `hello-elementor-theme-style` handle. The Mr.Dev parent ships no
   equivalent — its reset.css is a normalize, nothing more — so after
   the theme switch the class matched no rule at all and "Skip to
   content" rendered as plain visible text at the top of every page
   on the site.

   Rules copied verbatim from that theme.css so focus behaviour is
   unchanged: visually hidden but still reachable by keyboard and
   announced by screen readers, and fully visible once focused.

   Worth knowing: theme.css was the ONLY other stylesheet the old
   parent contributed. Everything else in it — .alignwide/.alignfull,
   .wp-caption, comments, .pagination, hello-elementor's own
   .site-header/.site-footer — was checked and is emitted nowhere on
   this site (every pagination/sticky class here is namespaced,
   e.g. .blogs-pagination, .eet-sticky-row). This was the one orphan.
   ─────────────────────────────────────────────────────────── */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #333;
  display: block;
  font-size: 1rem;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 12px 24px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}


/* ============================================================
   4. BUTTONS
   ============================================================ */
/* Rebranded 2026-08-24: was a flat gold fill. intoneccm's primary button is
   the brand GRADIENT with a solid-teal border and white label — copied from
   the live header "GET A DEMO" CTA, which is the canonical primary button on
   intoneccm.com. Hover mirrors that CTA's outlined state (translucent white
   fill + teal glow), but resolves the label to solid NAVY rather than
   gradient-clipped text: the header can clip its gradient onto a child
   .text span, whereas this button's label is the element's own text, where
   background-clip:text fights the button fill and blanks the label. */
.intone-page .btn-primary {
  background: var(--ds-brand-gradient);
  color: #ffffff;
  padding: 16px 36px;
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* border-radius: var(--ds-radius-md); */
  border: 2px solid var(--ds-brand);
  transition: all 0.25s;
}

.intone-page .btn-primary:hover {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--ds-primary-200);
  box-shadow: 0 4px 18px -8px rgba(106, 194, 183, 0.5);
  color: var(--ds-navy-primary);
  text-decoration: none;
}

.intone-page .btn-primary svg {
  transition: transform 0.25s;
}

.intone-page .btn-primary:hover svg {
  transform: translateX(4px);
}

.intone-page .btn-secondary {
  color: var(--text);
  padding: 16px 36px;
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--rule);
  border-radius: var(--ds-radius-zero);
  transition: all 0.25s;
}

.intone-page .btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}


/* ============================================================
   5. SECTION HEADER  (section-number + title two-column layout)
   ============================================================ */
.intone-page .section-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  margin-bottom: 80px;
  align-items: start;
}

.intone-page .section-num {
  font-family: var(--body-font);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 600;
  padding-top: 12px;
}

.intone-page .section-title {
  font-family: var(--heading-font);
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.intone-page .section-title em {
  font-style: italic;
  color: var(--gold-primary);
}


/* ============================================================
   6. SCROLL-REVEAL ANIMATION
   ============================================================ */
.intone-page .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.2, 0.6, 0.2, 1),
    transform 0.85s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.intone-page .reveal.in {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .intone-page .section-header {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 56px;
  }
}


/* ============================================================
   8. CONTACT MARQUEE  (global reusable component)
      Usage: get_template_part('template-parts/intone-contact-marquee')
   ============================================================ */
.intone-contact-marquee {
  background: var(--ds-gold, #6ac2b7);
  overflow: hidden;
  padding: 32px 0;
}

.intone-contact-marquee__track {
  display: flex;
  width: max-content;
  animation: intone-marquee-scroll 32s linear infinite;
  will-change: transform;
}

.intone-contact-marquee__track:hover {
  animation-play-state: paused;
}

.intone-contact-marquee__track span {
  font-family: var(--ds-font-heading);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 700;
  line-height: 0.9;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.03em;
  padding-right: 0.3em;
}

@keyframes intone-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intone-contact-marquee__track {
    animation: none;
  }
}


/* ============================================================
   9. FOOTER
   ============================================================ */
.intone-footer *,
.intone-footer *::before,
.intone-footer *::after {
  box-sizing: border-box;
}

.intone-footer {
  overflow: hidden;
}

/* ── Main body ── */
.intone-footer-main {
  /* background: var(--ds-gold, #6ac2b7); */
  padding: 64px 80px 56px;
}

.intone-footer-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* ── Logo column ── */
.intone-footer-col--logo {
  flex: 0 0 338px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Subtle vertical divider between the 3 side-by-side columns on desktop
   (Quick Links | Resources | Contact) — neutralized below 860px, where
   columns wrap/stack and a stray left border would no longer sit between
   two adjacent columns. */
.intone-footer-col:not(.intone-footer-col--logo) {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  padding-left: 40px;
}

.intone-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.intone-footer-logo {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
}

.intone-footer-logo__img {
  height: 34px !important;
  width: auto !important;
  max-height: 34px !important;
  display: block;
}

.intone-footer-logo__wordmark {
  font-family: var(--ds-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.intone-footer-tagline {
  font-family: var(--ds-font-heading);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.875;
  color: #000;
  margin: 0;
}

/* ── Social icons ── */
.intone-footer-social {
  display: flex;
  gap: 20px;
  align-items: center;
}

.intone-footer-social__icon {
  width: 35px;
  height: 35px;
  border: 1px solid var(--ds-gold);
  background-color: #203864;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ds-gold, #6ac2b7);
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.intone-footer-social__icon:hover {
  opacity: 0.75;
  text-decoration: none;
  color: var(--ds-gold, #6ac2b7);
}

.intone-footer-social__icon svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* ── Generic columns ── */
.intone-footer-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intone-footer-col__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.intone-footer-col__title {
  font-family: var(--ds-font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #000;
  text-transform: capitalize;
  margin: 0;
}

.intone-footer-col__divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  margin: 0;
}

/* ── Quick links ── */
.intone-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intone-footer-links li a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ds-font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #000;
  text-decoration: none;
  text-transform: capitalize;
  transition: opacity 0.2s;
}

.intone-footer-links li a:hover {
  opacity: 0.65;
  text-decoration: none;
}

/* ── Blog posts ── */
.intone-footer-posts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.intone-footer-post {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  text-decoration: none;
  color: #000;
  transition: opacity 0.2s;
}

.intone-footer-post:hover {
  opacity: 0.65;
  text-decoration: none;
  color: #000;
}

.intone-footer-post__arrow {
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 0;
}

.intone-footer-post__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intone-footer-post__title {
  font-family: var(--ds-font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
  text-transform: capitalize;
  margin: 0;
  word-break: break-word;
  white-space: normal;
}

.intone-footer-post__date {
  font-family: var(--ds-font-heading);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
}

/* ── Contact info ── */
.intone-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intone-footer-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-decoration: none;
  color: #000;
  transition: opacity 0.2s;
}

a.intone-footer-contact__item:hover {
  opacity: 0.65;
  text-decoration: none;
  color: #000;
}

.intone-footer-contact__icon {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.intone-footer-contact__icon svg {
  display: block;
  width: 25px;
  height: 25px;
}

.intone-footer-contact__text {
  font-family: var(--ds-font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
  margin: 0;
  text-transform: capitalize;
}

a.intone-footer-contact__item .intone-footer-contact__text {
  text-transform: none;
}

/* ── Copyright bar ── */
.intone-footer-bottom {
  /* background: var(--ds-gold, #6ac2b7); */
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding: 16px 80px;
}

.intone-footer-bottom__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.intone-footer-bottom__copy {
  font-family: var(--ds-font-heading);
  font-size: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

.intone-footer-bottom__nav {
  display: flex;
  gap: 24px;
}

.intone-footer-bottom__nav a {
  font-family: var(--ds-font-heading);
  font-size: 13px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.intone-footer-bottom__nav a:hover {
  color: #000;
}


/* ══════════════════════════════════════════════════════════════
   SERVICE-LINE HERO (.svc-hero) — same visual treatment as the home
   page hero: top rule, huge clip-text title (image shows through the
   letterforms), optional short subtitle, and a full-width image band
   below. Shared by the "What We Do" service-line landing pages: IT
   Staffing, Legacy Modernization, Application Development, Microsoft
   Cloud & Business Transformation.

   Deliberately NOT reusing .home-hero/.home-hero__title — that older
   fixed-height component is also used by page-deliverables-it-services.php
   with page-specific color/background overrides that assume its current
   sizing; changing it here would ripple into that page too.
   ══════════════════════════════════════════════════════════════ */
.svc-hero {
  background: var(--t-bg);
  padding: clamp(90px, 12vw, 100px) var(--gutter) clamp(40px, 5vw, 72px);
}
/* .svc-hero__inner {
  margin: 0 auto;
} */
.svc-hero__rule {
  display: block;
  height: 1px;
  margin-bottom: clamp(40px, 7vw, 96px);
}
.svc-hero__title {
  font-family: var(--ds-font-heading);
  font-size: clamp(44px, 8vw, 130px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--t-text);
}
/* Image shows through the letterforms; fixed attachment makes the hero
   image + the band below it read as one continuous, parallaxing window.
   A solid background-COLOUR sits under the image so the H1 stays visible
   even if the image fails to load. */
.svc-hero__title.is-clip-text {
  background-color: var(--t-text);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  filter: brightness(0.65);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.svc-hero__subtitle {
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--t-text);
  margin: clamp(20px, 3vw, 36px) 0 0;
}
.svc-hero__cta {
  margin-top: clamp(24px, 3vw, 40px);
}
.svc-hero__band {
  margin: clamp(36px, 5vw, 64px) auto 0;
  height: clamp(160px, 22vw, 300px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Touch devices (and small screens) — fixed background-attachment is ignored
   on iOS and janks on Android, so pin it to scroll regardless of width. */
@media (hover: none), (max-width: 1024px) {
  .svc-hero__title.is-clip-text,
  .svc-hero__band { background-attachment: scroll; }
}

@media (max-width: 860px) {
  /* clip-text unreliable on mobile → solid heading. Must also clear
     background-color: the is-clip-text rule sets it as an image-load
     fallback; when we unset background-clip here, that dark colour would
     show as the element background and hide same-coloured text. */
  .svc-hero__title.is-clip-text {
    background-image: none !important;
    background-color: transparent;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--t-text);
    color: var(--t-text);
  }
  .svc-hero { padding-top: clamp(110px, 20vw, 130px); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero__title.is-clip-text,
  .svc-hero__band { background-attachment: scroll; }
}


.svc-hero-tagline {
  background: #fff;
  padding: clamp(48px, 5vw, 80px) 80px;
}

.svc-hero-tagline__bold {
  font-family: var(--ds-font-heading);
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.35;
  color: #000;
  text-transform: uppercase;
  margin: 0 0 28px;
  max-width: 1000px;
}

.svc-hero-tagline__body {
  font-family: var(--ds-font-heading);
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1.35;
  color: #000;
  margin: 0;
  max-width: 900px;
}

@media (max-width: 960px) {
  .svc-hero-tagline {
    padding: 48px 44px;
  }
}

@media (max-width: 640px) {
  .svc-hero-tagline {
    padding: 40px 20px;
  }

  .svc-hero-tagline__bold,
  .svc-hero-tagline__body {
    font-size: clamp(15px, 4vw, 19px);
  }

  .svc-hero-tagline__bold {
    margin-bottom: 20px;
  }
}

.intone-callout ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.intone-callout ul li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: var(--ds-font-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.36;
  color: #000;
  /* text-transform: uppercase; */
}

/* .intone-callout ul li::before {
  content: '\2022';
  color: var(--ds-gold, #6ac2b7);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  flex-shrink: 0;
} */

/* CTA buttons on dark bg */
.btn-hero-fill {
  background: #fff;
  color: #000;
  border: 2px solid #fff;
  padding: 16px 32px;
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.btn-stay-left {
  align-items: flex-start;
}

.btn-stay-right {
  align-items: flex-end;
}

.btn-hero-fill:hover {
  background: var(--ds-gold, #6ac2b7);
  border-color: var(--ds-gold, #6ac2b7);
  color: #000;
  text-decoration: none;
}

.btn-hero-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 16px 32px;
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn-hero-outline:hover {
  background: #fff;
  color: #000;
  text-decoration: none;
}

.btn-cta-white {
  background: #fff;
  color: #000;
  border: none;
  padding: 0 56px;
  height: 52px;
  /* Figma: h-[52px] */
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 1.5vw, 24px);
  /* Figma: 24px Bold */
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.btn-cta-white:hover {
  background: var(--ds-gold, #6ac2b7);
  color: #000;
  text-decoration: none;
}

/* CTA section — white outline button (paired with btn-cta-white) */
.btn-cta-outline {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  padding: 0 33px;
  height: 52px;
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-cta-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: #fff;
}

/* Sharp-corner override — used on service page CTA buttons */
.btn-cta-white--rounded {
  border-radius: 0;
  padding: 0 32px;
}


/* ============================================================
   EXPERT CARD COMPONENT  (.contact-expert-section / card)
   Used by: contact page, IT staffing landing
   ============================================================ */
.contact-expert-section {
  background: #f4f6f9;
  padding: 56px 20px 56px 40px;
}

.contact-expert-cards {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.contact-expert-card {
  flex: 1;
  min-width: 280px;
  max-width: 659px;
  /* background: var(--ds-dark-800, #202022); */
  border-left: 11px solid var(--ds-gold, #6ac2b7);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-expert-card__title {
  font-family: var(--ds-font-heading);
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 700;
  line-height: normal;
  /* color: #fff; */
  margin: 0;
  text-transform: uppercase;
}

.contact-expert-card__body {
  font-family: var(--ds-font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.36;
  /* color: #fff; */
  margin: 0;
  max-width: 412px;
}

/* Expert cards responsive */
@media (max-width: 860px) {
  .contact-expert-cards {
    flex-direction: column;
  }

  .contact-expert-card {
    max-width: 100%;
    min-width: unset;
  }

  .contact-expert-section {
    padding: 48px 24px;
  }
}

@media (max-width: 540px) {
  .contact-expert-section {
    padding: 40px 20px;
  }

  .contact-expert-card {
    padding: 28px 20px 28px 24px;
    border-left-width: 6px;
  }
}

/* ============================================================
   10b. BREADCRUMB  (.intone-breadcrumb — shared across all pages)
   Used by: all page templates + template-parts/breadcrumbs.php
   ============================================================ */
.intone-breadcrumb {
  padding: 14px var(--gutter) 16px;
  /* max-width: 1440px; */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.intone-breadcrumb__link {
  font-family: 'Public Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #7b88a1;
  text-decoration: none;
  line-height: 24px;
  transition: color 0.2s;
}

.intone-breadcrumb__link:hover {
  color: #233963;
}

.intone-breadcrumb__current {
  font-family: 'Public Sans', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #233963;
  line-height: 24px;
}

@media (max-width: 768px) {
  .intone-breadcrumb {
    padding: 12px var(--gutter);
  }
}

/* ── Float-over-hero variant: POSITION only (colour handled separately) ──
   Activated by `intone-breadcrumb--over-hero` (set in breadcrumbs.php for
   every hero-led Page). The breadcrumb is taken out of flow so the hero
   fills y=0 and the transparent fixed header sees the hero — not a white
   page gap. .intone-page is the containing block (made relative below).
   This is applied to BOTH light and dark heroes; only the text colour
   differs (see --over-dark). Content-led views (blog posts, 404) do not
   get this class, so they keep the normal-flow white breadcrumb bar.
   ── */
.intone-page {
  position: relative;
  /* containing block for the absolute breadcrumb */
}

.intone-breadcrumb--over-hero {
  position: absolute;
  top: 100px;
  /* 72px header height + 12px breathing room */
  left: 0;
  right: 0;
  /* margin: auto centres the breadcrumb's max-width box the same way
     .ihn-inner does — so the left text edge tracks the logo at all
     viewport widths, including >1440px where the header is centered. */
  margin: 0 auto;
  z-index: 10;
  /* above hero content, well below header (z-index: 9990) */
  background: transparent;
}

/* Legibility aid over varied hero imagery (light and dark heroes alike) */
/* .intone-breadcrumb--over-hero .intone-breadcrumb__link,
.intone-breadcrumb--over-hero .intone-breadcrumb__current {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
} */

/* ── Dark-hero COLOUR variant: white text (position comes from --over-hero) ──
   Set when Header Style (Desktop) = 'dark'. DESKTOP ONLY (min-width: 861px) —
   mobile reads Header Style (Mobile) instead via --over-dark-m below. ── */
@media (min-width: 861px) {
  .intone-breadcrumb--over-dark {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  .intone-breadcrumb--over-dark .intone-breadcrumb__link {
    color: rgba(255, 255, 255, 0.70);
  }

  .intone-breadcrumb--over-dark .intone-breadcrumb__link:hover {
    color: #ffffff;
  }

  .intone-breadcrumb--over-dark .intone-breadcrumb__current {
    color: rgba(255, 255, 255, 0.92);
  }
}

/* ── Mobile (max-width: 860px) equivalents — driven by Header Style (Mobile),
   independent from the desktop rules above. Same colours, same logic, just a
   separate admin-controlled trigger class (--over-dark-m / --over-theme-m). ── */
@media (max-width: 860px) {
  .intone-breadcrumb--over-dark-m {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  .intone-breadcrumb--over-dark-m .intone-breadcrumb__link {
    color: rgba(255, 255, 255, 0.70);
  }

  .intone-breadcrumb--over-dark-m .intone-breadcrumb__link:hover {
    color: #ffffff;
  }

  .intone-breadcrumb--over-dark-m .intone-breadcrumb__current {
    color: rgba(255, 255, 255, 0.92);
  }
}

/* Mobile: header shrinks to 64px at 640px, adjust absolute top accordingly */
@media (max-width: 640px) {
  .intone-breadcrumb--over-hero {
    top: 72px;
    /* 64px mobile header + 8px */
  }

  /* Root-cause fix for hero/breadcrumb overlap: the trail's wrapped height is
     unpredictable (a long parent + child title, e.g. "GRC Monitoring
     Services / Internal Audit Automation & Continuous Controls Testing",
     can wrap to 2-3 lines and blow past whatever top-padding a hero reserves
     for it). Keep it to one bounded, scrollable line instead so its height
     is always ~48px regardless of trail length — pages then only need to
     clear that one fixed number, not guess at wrap height per title. */
  .intone-breadcrumb--over-hero {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .intone-breadcrumb--over-hero::-webkit-scrollbar {
    display: none;
  }

  .intone-breadcrumb--over-hero .intone-breadcrumb__link,
  .intone-breadcrumb--over-hero .intone-breadcrumb__current {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}


/* ============================================================
   11. SHARED CALLOUT  (.intone-callout — gold left border box)
   ============================================================ */
.intone-callout {
  border-left: 11px solid var(--ds-gold, #6ac2b7);
  padding: 32px 20px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.intone-callout--dark-bg {
  background: var(--ds-light-200, #f4f6f9);
}

.intone-callout--light-bg {
  background: #fff;
}

.intone-callout__heading {
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 700;
  line-height: normal;
  color: #000;
  margin: 0;
}

.intone-callout__list {
  font-family: var(--ds-font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #000;
  text-transform: uppercase;
  margin: 0;
  white-space: pre-line;
}


/* ============================================================
   12. INNER PAGE HERO  (contact, resources, careers, etc.)
   ============================================================ */
.page-hero {
  position: relative;
  height: clamp(480px, 55vw, 800px);
  overflow: hidden;
  background: var(--ds-navy, #1e2e4c);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(227deg, rgba(0, 0, 0, 0) 40.8%, rgba(0, 0, 0, 0.4) 76%);
}

.page-hero__content {
  position: absolute;
  left: 44px;
  bottom: clamp(48px, 6vw, 80px);
  right: 44px;
}

.page-hero__title {
  font-family: var(--ds-font-heading);
  font-size: clamp(56px, 9.5vw, 130px);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}

.page-hero__subtitle {
  font-family: var(--ds-font-heading);
  font-size: clamp(14px, 1.5vw, 24px);
  font-weight: 700;
  line-height: 1.36;
  color: #fff;
  margin: 8px 0 0;
}




/* ============================================================
   13. ARTICLE CARD  (resources case studies + generic)
   ============================================================ */
.article-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-card__image {
  width: 100%;
  overflow: hidden;
  background: #d9d9d9;
  position: relative;
}

.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.article-card:hover .article-card__image img {
  transform: scale(1.04);
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.article-card__category {
  background: var(--ds-light-100, #f3f4f5);
  padding: 3px 12px;
  font-family: var(--ds-font-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ds-navy, #1e2e4c);
  display: inline-block;
  white-space: nowrap;
}

.article-card__title {
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  line-height: normal;
  color: var(--ds-navy, #1e2e4c);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  display: block;
  transition: opacity 0.2s;
}

.article-card__title:hover {
  opacity: 0.75;
  text-decoration: none;
  color: var(--ds-navy, #1e2e4c);
}



/* ============================================================
   14. RESPONSIVE — marquee / footer / home-service shared
   ============================================================ */

/* Marquee */
@media (max-width: 600px) {
  .intone-contact-marquee__track span {
    font-size: clamp(52px, 18vw, 80px);
  }
}

/* Footer */
@media (max-width: 1100px) {
  .intone-footer-main {
    padding: 56px 44px 48px;
  }

  .intone-footer-bottom {
    padding: 16px 44px;
  }

  .intone-footer-grid {
    gap: 48px;
  }

  .intone-footer-col--logo {
    flex: 0 0 280px;
  }
}

@media (max-width: 860px) {
  .intone-footer-grid {
    flex-wrap: wrap;
    gap: 40px;
  }

  .intone-footer-col--logo {
    flex: 0 0 100%;
  }

  .intone-footer-col {
    flex: 0 0 calc(50% - 20px);
  }

  .intone-footer-main {
    padding: 48px 32px 40px;
  }

  .intone-footer-bottom {
    padding: 16px 32px;
  }

  /* Columns wrap 2-per-row here (and the 3rd sits alone) rather than
     staying in one straight line, so a left border would land next to
     nothing for the first column in each wrapped row — the vertical
     divider below is a desktop-only (single-row) treatment. */
  .intone-footer-col {
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 540px) {
  .intone-footer-col {
    flex: 0 0 100%;
  }

  /* At this width every column stacks full-width in one flow, so the last
     Quick Links item, the Resources title, and its "Stay tuned for
     insights" fallback line all sit back-to-back — a small nudge of extra
     vertical room (40px -> 48px) keeps them from reading as one run-on
     block, without disturbing the rest of the footer's spacing rhythm. */
  .intone-footer-grid {
    row-gap: 48px;
  }

  /* Desktop's vertical column dividers (below) don't make sense once
     columns stack full-width — neutralize them here and at the 860px
     tablet-wrap breakpoint below. */
  .intone-footer-col {
    border-left: none;
    padding-left: 0;
  }

  .intone-footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .intone-footer-main {
    padding: 40px 20px 32px;
  }

  .intone-footer-bottom {
    padding: 16px 20px;
  }
}


/* Page hero responsive */
@media (max-width: 768px) {
  .page-hero__content {
    left: 24px;
    right: 24px;
  }
}

@media (max-width: 540px) {
  .page-hero__content {
    left: 20px;
    right: 20px;
  }
}

/* Article cards responsive */
@media (max-width: 760px) {
  .article-card__title {
    font-size: clamp(16px, 4vw, 20px);
  }
}

/* ============================================================
   10. SERVICE PAGE SHARED COMPONENTS
   home-hero, home-intro, home-service-row, home-ready, home-ticker
   Used by: home, legacy-modernization, ms-cloud, it-staffing
   ============================================================ */

/* ── Hero ── */
.home-hero {
  position: relative;
  height: clamp(480px, 80vw, 850px);
  overflow: hidden;
  background-color: var(--ds-navy, #1e2e4c);
  /* Background image set via inline style; attachment:fixed creates the
     parallax / "taller-than-container" effect described in the Figma */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: flex-start;
  /* content sizes to its own height, exposes bg image at bottom */
  /* padding: 0 44px 80px; */
}

/* .home-hero__bg kept as CSS-only fallback for browsers that block fixed bg */
.home-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* .home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,16,29,0.05) 0%, rgba(9,16,29,0.45) 100%);
  pointer-events: none;
} */
.home-hero__content {
  position: relative;
  background-color: white;
  height: auto;
  /* was 110vh — now sizes to content so bg image shows at bottom */
  padding: 0 var(--gutter) clamp(56px, 7vw, 100px);
  /* bottom padding = breathing room before bg strip */
  justify-content: center;
  align-content: flex-start;
  z-index: 2;
  /* 1440px matches .ihn-inner max-width so the title left edge tracks
     the logo at all viewport widths, including ultra-wide screens. */
  /* max-width: 1440px; */
  width: 100%;
}

/* ── Hero content wrapper ── */
.home-hero__content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}

/* ── Hero title
 *
 * Clip-text technique (matches user's CSS):
 *   background-image is set as INLINE STYLE directly on the <h1>
 *   (NOT inherited from parent) so background-clip:text works correctly.
 *   background-attachment: fixed pins the image to the viewport, creating
 *   the "taller-than-container / parallax window" effect.
 *
 * Default (no image / mobile / fallback): solid white text.
 * Image provided + clip supported + desktop: image shows through letters.
 * ─────────────────────────────────────────────────────────────────────── */
.home-hero__title {
  font-family: var(--ds-font-heading);
  font-size: clamp(64px, 8vw, 180px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  padding-top: 8vw;
  /* Default: dark on white hero content background.
     is-clip-text overrides to transparent (image shows through). */
  color: #141414;
  -webkit-text-fill-color: #141414;
}

.home-hero__title--smallpad {
  padding-top: 1vw;
}

.home-hero__title--nopad {
  padding-top: 0;
}

/* Applied by PHP only when a hero image is available (via class + inline bg) */
.home-hero__title.is-clip-text {
  filter: brightness(0.65);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: 0% 0%;
  background-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Mobile: fixed bg-attachment + background-clip:text unreliable on iOS/Android.
   Fix: make hero image visible (remove white overlay), shrink margin, revert clip-text to solid white. */
@media (max-width: 860px) {
  .home-hero {
    background-attachment: scroll;
  }

  /* Remove white overlay so hero image shows; reset 110vh to auto so flex
     container height (not viewport height) controls the section height. */
  .home-hero__content {
    background-color: transparent;
    height: auto;
    padding: 0 var(--gutter);
  }

  /* Reduce top margin — 140px was too large relative to mobile hero heights.
     Restore white fill: on mobile the content bg becomes transparent so the
     hero's own dark background shows — text must be white to remain legible.
     margin-top raised from 80px: the absolute .intone-breadcrumb--over-hero
     sits at top:72px and can run to ~120px, so 80px let the H1's top edge
     overlap the breadcrumb trail on pages using this hero. */
  .home-hero__title {
    margin-top: 130px;
    line-height: 1.15;
    font-size: clamp(36px, 8vw, 108px);
    color: #fff;
    -webkit-text-fill-color: #fff;
  }

  /* Revert clip-text on mobile.
     background-image is an inline style on the <h1> — !important is required to override it.
     Without it, the image renders as a plain background box behind the text (no clipping). */
  .home-hero__title.is-clip-text {
    background-image: none !important;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
}

@supports not (background-clip: text) {
  .home-hero__title.is-clip-text {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
}

/* ── Dark intro section ── */
.home-intro {
  /* background: #141414; */
  overflow: hidden;
}

.home-intro__inner {
  padding: clamp(80px, 12vw, 100px) var(--gutter) clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.home-intro__body {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.home-intro__text-block {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.home-intro__lead {
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.35;
  /* color: #fff; */
  /* text-transform: uppercase; */
  margin: 0;
  max-width: 960px;
}

.home-intro__points {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-intro__point {
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.35;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
}

.home-intro__cta-block {
  display: flex;
  flex-direction: column;
  gap: 51px;
}

.home-intro__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  margin: 0;
}

.home-intro__buttons {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* ── Service page dark-intro extras ──
   Used on Legacy Modernisation and similar service pages.           */
.home-intro__heading {
  font-family: var(--ds-font-heading);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

.home-intro__quote {
  font-family: var(--ds-font-heading);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  /* color: #fff; */
  margin: 0;
  max-width: 1280px;
}

/* Flex container for the body text stack in service-page intros */
.home-intro__text-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 3-image strip */
.home-intro__images {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  height: 436px;
  overflow: hidden;
  width: 100%;
  gap: 2px;
}

.home-intro__image-item {
  overflow: hidden;
  background: #1e2e4c;
  position: relative;
}

.home-intro__image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Ticker ── */
.home-ticker {
  position: relative;
  overflow: hidden;
  height: 428px;
  background: var(--ds-navy, #1e2e4c);
}

.home-ticker__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.home-ticker__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 16, 29, 0.55);
}

.home-ticker__track {
  position: absolute;
  bottom: 20px;
  left: 0;
  display: flex;
  width: max-content;
  animation: home-ticker-scroll 40s linear infinite;
  will-change: transform;
}

.home-ticker__track:hover {
  animation-play-state: paused;
}

.home-ticker__track span {
  font-family: var(--ds-font-heading);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 700;
  line-height: 0.9;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  padding-right: 0.4em;
  opacity: 0.9;
}

@keyframes home-ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-ticker__track {
    animation: none;
  }
}

/* ── Scroll-driven headline band (.intone-scrollband)
   Shared full-bleed band whose headline scrolls horizontally (right→left)
   as the band passes through the viewport — driven by intone-scrollband.js,
   which adds .is-hscroll. Default (no JS / reduced-motion) = wrapped, fully
   visible heading. Used by it-staffing & ms-cloud (and any page that opts in).
   ── */
.intone-scrollband {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(240px, 30vw, 428px);
  padding: 0 clamp(20px, 4vw, 44px);
  overflow: hidden;
  background-color: var(--ds-dark-900, #141414);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.intone-scrollband__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 12, 20, 0.6) 0%, rgba(10, 12, 20, 0.2) 55%, rgba(10, 12, 20, 0.05) 100%);
}

.intone-scrollband__text {
  position: relative;
  font-family: var(--ds-font-heading);
  font-size: clamp(40px, 8.5vw, 128px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  max-width: 18ch;
}

.intone-scrollband.is-hscroll .intone-scrollband__text {
  max-width: none;
  white-space: nowrap;
  will-change: transform;
}

@media (hover: none),
(max-width: 1024px) {
  .intone-scrollband {
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intone-scrollband {
    background-attachment: scroll;
  }
}

/* ── Section label header (.home-section-header / .home-section-label / .home-section-cta)
   Used by: home page, page-blogs (Case Studies / Articles row), page-resources
   Responsive overrides live in the 960/768/540 breakpoint blocks above.
   ── */
.home-section-header {
  padding: 80px 44px 51px;
}

.home-section-header__inner {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 21px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  /* max-width: 1440px; */
}

.home-section-label {
  font-family: var(--ds-font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  color: var(--ds-gold-label, #233963);
  /* text-transform: uppercase; */
  margin: 0;
}

.home-section-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ds-font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  color: var(--ds-gold-label, #233963);
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
}

.home-section-cta:hover {
  opacity: 0.75;
  text-decoration: none;
  color: var(--ds-gold-label, #233963);
}


/* ── Service rows (IT Staffing / How We Deliver / Industries) ── */
.home-service-row {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.home-service-row__image {
  flex: 0 0 360px;
  min-height: 697px;
  overflow: hidden;
  background: #d9d9d9;
  position: relative;
}

.home-service-row__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-service-row__content {
  flex: 1;
  padding: 80px 56px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  background: var(--ds-light-200, #f4f6f9);
  min-height: 697px;
}

/* Image on right: content uses white bg, starts with extra left indent */
.home-service-row--image-right .home-service-row__content {
  background: #fff;
  padding-left: 100px;
}

.home-service-row--image-right .home-service-row__image {
  order: 1;
}

.home-service-row__heading {
  font-family: var(--ds-font-heading);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 700;
  line-height: normal;
  color: var(--ds-navy, #1e2e4c);
  text-transform: uppercase;
  margin: 0;
}

.home-service-row__text-stack {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Buttons inside a text-stack column should shrink to content, not stretch full-width */
.home-service-row__text-stack [class*="btn-"] {
  align-self: flex-start;
}

.home-service-row__body {
  font-family: var(--ds-font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.36;
  color: #000;
  /* text-transform: uppercase; */
  margin: 0;
}

.home-service-row__tagline {
  display: flex;
  gap: 7px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: clamp(18px, 2vw, 24px);
  text-transform: uppercase;
  line-height: normal;
  color: #000;
}


.home-service-row__tagline-regular {
  font-family: var(--ds-font-heading);
  font-weight: 400;
}

.home-service-row__tagline-bold {
  font-family: var(--ds-font-heading);
  font-weight: 700;
}

/* ── Ready for the Transformation CTA ── */
.home-ready {
  position: relative;
  /* background-color: var(--ds-dark-900, #141414); */
  /* base colour for blend-mode */
  /* background-image set via inline style when CTA bg image is available */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  background-attachment: fixed;
  background-blend-mode: overlay;
  /* Figma: 750px total container */
  min-height: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  /* layout driven by arch height, not padding */
}

/* Dark arch — "Subtract" shape from Figma (623 / 750 = 83.1% of height)
   When a background image is set on the section, the arch sits on top
   covering the dark portion; the bg image shows below the curved edge.
   When no image → arch blends with solid bg, invisible by design.       */
.home-ready__arch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 700px;
  /* Figma: 623px */
  background: #ffffff;
  z-index: 1;
  /* Gentle elliptical bottom edge — approximates the Figma "Subtract" */
  /* border-radius: 0 0 50% 50% / 0 0 100px 100px; */
}

/* Large decorative clip-text heading — sits above arch, below content */
.home-ready__bg-text {
  /* position: absolute; */
  /* inset: 0; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  gap: 0;
  user-select: none;
  z-index: 2;
}

/* Default (no image): very subtle ghost text on dark bg */
.home-ready__bg-text span {
  font-family: var(--ds-font-heading);
  font-size: clamp(32px, 10vw, 95px);
  font-weight: 800;
  text-transform: uppercase;
  white-space: normal;
  text-align: center;
  max-width: 90vw;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.06);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.06);

}

/* Clip-text variant — image shows through letters when bg image is set */
.home-ready__bg-text.is-clip-text span {
  filter: brightness(0.65);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: 0% 0%;
  background-color: transparent;
  background-blend-mode: overlay;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #ffffff66;
  color: transparent;
}

@supports not (background-clip: text) {
  .home-ready__bg-text.is-clip-text span {
    background: none;
    color: rgba(255, 255, 255, 0.08);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.08);
  }
}

/* Mobile: background-attachment:fixed unsupported with background-clip:text on iOS — switch to scroll */
@media (max-width: 860px) {
  .home-ready__bg-text.is-clip-text span {
    background-attachment: scroll;
    background-position: center center;
  }
}

/* Actual CTA content — sits above everything */
.home-ready__content {
  position: relative;
  z-index: 3;
  max-width: 920px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 44px;
  /* Vertically centred within the arch (623px), not the full section */
  margin-top: -100px;
  /* pull content up into arch area */
}

.home-ready__text {
  font-family: var(--ds-font-heading);
  font-size: clamp(15px, 1.7vw, 24px);
  line-height: 1.4;
  /* color: #fff; */
  /* text-transform: uppercase; */
  margin: 0;
  text-align: center;
}

/* Button group row in CTA section */
.home-ready__cta-btns {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}



/* ══════════════════════════════════════════════════════════
   HOME PAGE + LEGAL CTA — COMPREHENSIVE RESPONSIVE
   Shared rules for .home-ready and .legal-cta (same design).
   Breakpoints: 1200 | 960 | 768 | 640 | 480 | 360
   ══════════════════════════════════════════════════════════ */

/* ── 1200px: Large tablet / small desktop ── */
@media (max-width: 1200px) {
  .home-services-block__sidebar {
    flex: 0 0 280px;
  }

  .home-services-wrapper {
    padding: 0 44px 64px;
  }

  /* CTA (home + legal) — arch scales with section */
  .home-ready,
  .legal-cta {
    min-height: 680px;
  }

  .home-ready__arch,
  .legal-cta__arch {
    height: 540px;
  }
}

/* ── 960px: Tablet ── */
@media (max-width: 960px) {

  /* Hero */
  .home-hero {
    height: clamp(400px, 85vw, 650px);
  }

  /* Dark intro */
  .home-intro__inner {
    padding: 100px var(--gutter);
    gap: 80px;
  }

  .home-intro__images {
    height: 200px;
  }

  .home-execution-card {
    padding: 40px 20px 40px 28px;
    border-left-width: 8px;
  }

  /* Section header */
  .home-section-header {
    padding: 56px 24px 40px;
  }

  /* Services block */
  .home-services-wrapper {
    padding: 0 24px 56px;
  }

  .home-services-block {
    flex-direction: column;
  }

  .home-services-block__sidebar {
    flex: none;
    height: 100px;
    min-height: unset;
    width: 100%;
  }

  .home-services-block__sidebar-text {
    transform: none;
    font-size: clamp(28px, 5vw, 40px);
  }

  .home-services-block__content {
    padding: 48px 32px;
  }

  /* Service rows */
  .home-service-row {
    flex-direction: column;
  }

  .home-service-row__image {
    flex: none;
    height: 280px;
    min-height: unset;
    width: 100%;
    position: relative;
  }

  .home-service-row--image-right .home-service-row__image {
    order: 0;
  }

  .home-service-row__content {
    padding: 48px var(--gutter);
    min-height: unset;
  }

  .home-service-row--image-right .home-service-row__content {
    padding-left: var(--gutter);
  }

  .home-service-row__heading {
    font-size: clamp(32px, 5vw, 56px);
  }

  /* CTA — bg-text now in normal flow so only size + margin needed */
  .home-ready,
  .legal-cta {
    min-height: 560px;
    background-attachment: scroll;
  }

  .home-ready__arch,
  .legal-cta__arch {
    height: 440px;
  }

  .home-ready__bg-text span,
  .legal-cta__bg-text span {
    font-size: clamp(44px, 8vw, 88px);
  }

  .home-ready__content,
  .legal-cta__content {
    margin-top: -60px;
    gap: 32px;
    padding: 0 32px;
  }

  /* Revert clip-text — background-attachment: fixed unreliable at this size */
  .legal-cta__bg-text.is-clip-text span {
    background: none;
    color: rgba(255, 255, 255, 0.08);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.08);
  }

  .legal-cta__text.is-clip-text {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
}

/* ── 768px: Large phone / small tablet ── */
@media (max-width: 768px) {

  /* Hero */
  .home-hero {
    padding: 0 0 48px;
  }

  /* CTA */
  .home-ready,
  .legal-cta {
    min-height: 480px;
  }

  .home-ready__arch,
  .legal-cta__arch {
    height: 360px;
  }

  .home-ready__bg-text span,
  .legal-cta__bg-text span {
    font-size: clamp(38px, 9vw, 72px);
  }

  .home-ready__content,
  .legal-cta__content {
    margin-top: -40px;
    padding: 0 24px;
  }

  .home-ready__text,
  .legal-cta__text {
    font-size: clamp(14px, 3.5vw, 20px);
  }
}

/* ── 640px: Phone ── */
@media (max-width: 640px) {

  /* Hero */
  .home-hero {
    height: clamp(300px, 75vw, 440px);
    padding: 0 0 40px;
  }

  /* .home-hero__title.is-clip-text {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  } */

  /* .home-ready__bg-text.is-clip-text span {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: 0% 0%;
    background-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  } */

  /* Dark intro */
  .home-intro__inner {
    gap: 56px;
  }

  .home-intro__lead {
    font-size: clamp(15px, 4vw, 18px);
  }

  .home-intro__point {
    font-size: clamp(15px, 4vw, 18px);
    white-space: normal;
  }

  .home-intro__images {
    display: none;
  }

  .home-intro__buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-hero-fill,
  .btn-hero-outline {
    font-size: clamp(16px, 4vw, 20px);
    padding: 14px 24px;
    /* Base rule forces nowrap for short hero CTAs ("Contact Us" etc.);
       longer button copy (e.g. Legacy Modernization's intro-row CTA)
       has no room to stay on one line at phone widths and pushed the
       button past the viewport edge. Letting it wrap is a no-op for
       short labels and fixes the long ones. */
    white-space: normal;
    max-width: 100%;
  }

  /* Execution card */
  .home-execution-card {
    padding: 36px 20px 36px 24px;
    border-left-width: 6px;
    gap: 28px;
  }

  .home-execution-card__title {
    font-size: clamp(22px, 5vw, 32px);
  }

  .home-execution-card__tagline {
    font-size: clamp(18px, 5vw, 26px);
  }

  /* Section header */
  .home-section-header {
    padding: 48px 20px 32px;
  }

  .home-section-label {
    font-size: 18px;
  }

  .home-section-cta {
    font-size: 15px;
  }

  /* Services */
  .home-services-wrapper {
    padding: 0 20px 48px;
  }

  .home-services-block__heading {
    font-size: clamp(32px, 7vw, 48px);
  }

  /* Service rows */
  .home-service-row__content {
    padding: 40px var(--gutter);
  }

  .home-service-row--image-right .home-service-row__content {
    padding-left: var(--gutter);
  }

  .home-service-row__heading {
    font-size: clamp(28px, 7vw, 44px);
  }

  .home-service-row__body {
    font-size: 15px;
  }

  /* Callouts */
  .intone-callout {
    padding: 24px 16px 24px 22px;
    border-left-width: 6px;
  }

  .home-execution-card {
    border-left-width: 6px;
  }

  /* CTA — spans wrap on small screens to prevent overflow */
  .home-ready,
  .legal-cta {
    min-height: 400px;
  }

  .home-ready__arch,
  .legal-cta__arch {
    height: 300px;
  }

  .home-ready__bg-text span,
  .legal-cta__bg-text span {
    font-size: clamp(28px, 9vw, 56px);
    white-space: normal;
    /* allow wrapping */
    text-align: center;
    max-width: 90vw;
    overflow: hidden;
  }

  .home-ready__content,
  .legal-cta__content {
    margin-top: -24px;
    gap: 24px;
    padding: 0 20px;
  }

  .home-ready__text,
  .legal-cta__text {
    font-size: clamp(13px, 3.5vw, 17px);
  }

  .btn-cta-white,
  .legal-cta__btn {
    height: 48px;
    padding: 0 32px;
    font-size: 18px;
  }
}

/* ── 480px: Small phone ── */
@media (max-width: 480px) {

  /* Hero */
  .home-hero {
    height: clamp(260px, 80vw, 360px);
    /* padding: 0 16px 36px; */
  }

  /* Intro */
  .home-intro__inner {
    padding: 48px var(--gutter);
    gap: 48px;
  }

  .home-intro__buttons {
    gap: 12px;
  }

  .btn-hero-fill,
  .btn-hero-outline {
    font-size: 16px;
  }

  /* Services */
  .home-services-wrapper {
    padding: 0 16px 40px;
  }

  .home-section-header {
    padding: 40px 16px 28px;
  }

  .home-service-row__image {
    height: 240px;
  }

  /* CTA */
  .home-ready,
  .legal-cta {
    min-height: 360px;
  }

  .home-ready__arch,
  .legal-cta__arch {
    height: 240px;
  }

  .home-ready__bg-text span,
  .legal-cta__bg-text span {
    font-size: clamp(22px, 8vw, 44px);
  }

  .home-ready__content,
  .legal-cta__content {
    padding: 0 16px;
    margin-top: -16px;
  }

  .btn-cta-white,
  .legal-cta__btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* ── 360px: Very small phone ── */
@media (max-width: 360px) {

  /* Hero */
  .home-ready__arch,
  .legal-cta__arch {
    height: 200px;
  }

  .home-ready__bg-text span,
  .legal-cta__bg-text span {
    font-size: clamp(18px, 8vw, 36px);
  }

  .home-ready__text,
  .legal-cta__text {
    font-size: 13px;
  }

  .btn-cta-white,
  .legal-cta__btn {
    font-size: 16px;
    height: 44px;
  }
}

/* ============================================================
   14b. SHARED INDUSTRIES PAGE COMPONENTS
   intone-ind-*  /  intone-row  /  intone-readmore
   ─────────────────────────────────────────────────────────────
   CANONICAL REFERENCE: page-healthcare-industries.php, synced to
   Figma iKSh7ZAvz6Pfj62AInqDgq node 2072:3312 (2026-06-10).
   New industries pages reuse these classes with NO overrides.

   Used by:
     intone-ind-*       page-healthcare-industries.php,
                        page-bfsi-industries.php (BFSI keeps its own
                        Figma-2018:3765 rendering via .intone-bfsi-page
                        overrides in page-bfsi-industries.css)
     intone-row         page-bfsi-industries.php, page-careers.php
     intone-readmore    healthcare + BFSI card links
   ============================================================ */

/* ── Card "Read more" link (12px / 1.2px tracking / 14px arrow) ── */
.intone-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  margin-top: auto;
  /* pins link to card bottom */
  padding-top: 1rem;
  font-family: var(--ds-font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
  color: #070e16;
  text-decoration: none;
  transition: color 0.2s;
}

.intone-readmore svg {
  flex-shrink: 0;
}

.intone-readmore:hover {
  color: var(--ds-gold);
}

.intone-readmore--light {
  color: var(--ds-neutral-100, #fff);
}

.intone-readmore--light:hover {
  color: var(--ds-gold);
}

/* ── Industries hero (white, label row + display heading) ──
   111px top padding floats the label border below the fixed
   header + breadcrumb zone; 200px bottom gap to the next band. */
.intone-ind-hero {
  background: var(--ds-neutral-100, #fff);
  overflow: hidden;
}

.intone-ind-hero__inner {
  /* max-width: 1440px; */
  margin: 0 auto;
  padding: 6.9375rem var(--gutter) 12.5rem;
}

.intone-ind-hero__label-row {
  /* border-top: 1px solid #d3dae4; */
  padding-top: 1rem;
  margin-top: 4rem;
}

.intone-ind-hero__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #233963;
  text-transform: none;
  letter-spacing: 0;
}

.intone-ind-hero__heading {
  font-family: var(--ds-font-heading);
  font-size: clamp(2.75rem, 6.7vw, 5.7rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #000;
  line-height: 1.175;
  max-width: 1324px;
}

/* ── Credentials bar ── Figma (BFSI 2018:3765, Healthcare 2072:3312)
   shows this as a LIGHT #f4f6f9 bar with dark #141414 text — was built
   as a solid-black ticker instead, inverted from every Figma sample
   checked across the industries-page family. */
.intone-ind-credentials {
  background: #f4f6f9;
  min-height: 9.625rem;
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
  overflow: hidden;
}

.intone-ind-credentials__track {
  display: flex;
  width: max-content;
  animation: intone-ind-credentials-scroll 26s linear infinite;
  will-change: transform;
}

.intone-ind-credentials__track:hover {
  animation-play-state: paused;
}

.intone-ind-credentials__text {
  font-family: var(--ds-font-heading);
  font-size: clamp(0.75rem, 2.9vw, 2.625rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #141414;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 0.6em;
  margin: 0;
}

@keyframes intone-ind-credentials-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intone-ind-credentials__track {
    animation: none;
  }
}

/* ── Dark intro band (INSET 1352px block, 44px gutters) ──
   Same inversion as the credentials bar: Figma's "DarkBackground" frame
   name is stale — its actual fill is #f4f6f9 (light), confirmed by
   rendering the frame to PNG on both the BFSI and Healthcare Figma
   nodes. Renamed in spirit only (kept the class name to avoid touching
   markup/JS); every color below flips from the old all-dark treatment
   to match. */
.intone-ind-dark-section {
  background: transparent;
  padding: 0 2.75rem;
  color: #141414;
}

.intone-ind-dark-section__inner {
  background: #f4f6f9;
  /* max-width: 1352px; */
  margin: 0 auto;
  padding: 6.25rem 2.125rem;
  display: flex;
  flex-direction: column;
  gap: 6.25rem;
}

.intone-ind-dark-section__intro {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.intone-ind-dark-section__intro-text {
  font-size: clamp(1rem, 1.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.35;
  color: #141414;
  max-width: 1183px;
}

.intone-ind-dark-section__rule {
  border: 0;
  border-top: 1px solid #141414;
  margin: 5rem 0 0;
  /* 80px below intro text */
}

.intone-ind-dark-section__ctas {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 3.1875rem;
  /* 51px below rule */
}

/* The shared .btn-cta-white/.btn-cta-outline defaults are built for a
   dark surrounding section (white-fill / white-outline) — invisible
   now that this band is light. Figma's own button fills confirm the
   swap: primary is dark-fill/white-text, secondary is white-fill/
   dark-text with no border (verified via the BFSI Figma node). */
.intone-ind-dark-section__ctas .btn-cta-white {
  background: #141414;
  color: #fff;
}

.intone-ind-dark-section__ctas .btn-cta-white:hover {
  background: var(--ds-gold, #6ac2b7);
  color: #000;
}

.intone-ind-dark-section__ctas .btn-cta-outline {
  background: #fff;
  color: #141414;
  border-color: #fff;
}

.intone-ind-dark-section__ctas .btn-cta-outline:hover {
  background: #ececf0;
  color: #141414;
}

.intone-ind-dark-section__image-strip {
  width: 100%;
  height: 436px;
  overflow: hidden;
  border-radius: 0;
  margin-top: 2rem;
  /* 132px total above (100 gap + 32) */
}

.intone-ind-dark-section__image-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Problem card (10px gold bar; 40px heading→body rhythm)
   Figma: white card (not --ds-dark-800), #141414 text — same
   light-section inversion as .intone-ind-dark-section above. */
.intone-ind-problem-card {
  background: #ffffff;
  border-left: 10px solid var(--ds-gold);
  padding: 3.5rem 1.25rem 3.5rem 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intone-ind-problem-card__heading {
  font-family: var(--ds-font-heading);
  font-size: clamp(1.5rem, 3vw, 2.625rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #141414;
  line-height: 1.175;
  max-width: 872px;
  margin-bottom: 1.5rem;
}
.intone-ind-problem-card__heading.intone-ihc-special-case {
  text-transform: none; /* override the uppercase */
}

.intone-ind-problem-card__heading.intone-ihc-special-case span {
  text-transform: uppercase; /* keep PHI uppercase */
}

.intone-ind-problem-card__body {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.36;
  color: #141414;
  max-width: 1224px;
}

/* ── Approach section (label row + intro + service cards) ── */
.intone-ind-approach-section {
  background: var(--ds-neutral-100, #fff);
  padding: 6.25rem 0;
}

.intone-ind-approach-section__inner {
  /* max-width: 1440px; */
  margin: 0 auto;
  padding: 0 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 3.375rem;
}

.intone-ind-approach-section__header {
  display: flex;
  flex-direction: column;
  gap: 5.375rem;
  /* 86px label row → intro */
}

.intone-ind-approach-section__label-row {
  border-top: 1px solid #181818;
  padding-top: 0.8125rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* sub starts at container midline */
  column-gap: 1rem;
  align-items: start;
}

.intone-ind-approach-section__label {
  font-family: var(--ds-font-heading);
  font-size: 2.375rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #181818;
  white-space: nowrap;
}

.intone-ind-approach-section__label-sub {
  font-size: 1.125rem;
  font-weight: 400;
  color: #303030;
  text-align-last: end;
}

.intone-ind-approach-section__intro {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.36;
  color: var(--ds-dark-900);
  text-align-last: end;
}

/* Service cards grid: 4-per-row, 24px rows / 35px columns */
.intone-ind-service-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2.1875rem;
}

.intone-ind-service-card {
  background: var(--ds-light-200);
  border-left: 8px solid var(--ds-gold);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.intone-ind-service-card__tag {
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.12875rem;
  text-transform: uppercase;
  color: #4d5660;
  display: block;
}

.intone-ind-service-card__title {
  font-family: var(--ds-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  color: #000;
  margin: 0;
}

.intone-ind-service-card__body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  color: #596068;
  margin: 0;
}

/* ── Read-more accordion (industry service cards + problem card) ──
   intone-readmore.js toggles .is-rm-open; inside a [data-rm-group] only
   one card stays open. Cards hold the FULL copy, clamped when collapsed. */
.intone-ind-service-cards {
  align-items: start;
}

.intone-ind-service-card__body {
  max-height: 5.4em;
  /* ~4 lines collapsed */
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.intone-ind-service-card.is-rm-open .intone-ind-service-card__body {
  max-height: 720px;
}

.intone-ind-problem-card__body {
  max-height: 6.2em;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.intone-ind-problem-card.is-rm-open .intone-ind-problem-card__body {
  max-height: 1400px;
}

/* .intone-readmore rendered as a <button> toggle */
button.intone-readmore {
  background: none;
  border: 0;
  cursor: pointer;
}

.intone-readmore svg {
  transition: transform 0.3s ease;
}

.is-rm-open>.js-rm-toggle svg {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {

  .intone-ind-service-card__body,
  .intone-ind-problem-card__body {
    transition: none;
  }
}

/* ── Proof section (INSET: gold stat panel + 24px gap + dark study) ── */
.intone-ind-proof-section {
  overflow: hidden;
  padding: 0 2.75rem;
}

.intone-ind-proof-section__inner {
  display: flex;
  align-items: stretch;
  min-height: 828px;
  /* max-width: 1352px; */
  margin: 0 auto;
  gap: 1.5rem;
}

.intone-ind-proof-section__gold-panel {
  flex: 0 0 360px;
  background: var(--ds-gold);
  padding: 3.375rem 2.1875rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.intone-ind-proof-label-row {
  border-top: 1px solid #000;
  padding: 1rem 0 4.0625rem;
  /* 65px down to the stat rule */
}

.intone-ind-proof-label {
  font-family: var(--ds-font-heading);
  font-size: 1.65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
}

.intone-ind-proof-stat {
  font-family: var(--ds-font-heading);
  font-size: clamp(4rem, 9vw, 7.9375rem);
  font-weight: 200;
  text-transform: uppercase;
  color: #000;
  line-height: 0.9;
  letter-spacing: 0.1875rem;
  border-top: 1px solid #000;
  /* second rule above the stat */
  padding: 1rem 0 0;
  display: block;
}

.intone-ind-proof-stat__desc {
  font-size: 0.96875rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ds-dark-900);
  line-height: 1.35;
  margin: 1.4375rem 0 0;
  max-width: 274px;
}

/* Figma names this "dark-panel" but it has no fill of its own — it
   sits directly on the page's white background (confirmed via the
   BFSI Figma node: no background rectangle behind the panel, only the
   inner case-study card carries a tint). Same stale-name inversion as
   .intone-ind-dark-section; class name kept, color corrected. */
.intone-ind-proof-section__dark-panel {
  flex: 1 1 0;
  background: #ffffff;
  padding: 3.375rem 2.125rem 3.375rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.intone-ind-proof-dark__heading {
  font-family: var(--ds-font-heading);
  font-size: clamp(1.5rem, 3vw, 2.625rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #141414;
  line-height: 1.2;
  max-width: 792px;
}

.intone-ind-proof-dark__intro {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.625;
  color: #596068;
}

.intone-ind-proof-dark__card {
  background: #f4f6f9;
  border-left: 10px solid var(--ds-gold);
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.intone-ind-proof-dark__card-title {
  font-family: var(--ds-font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: #141414;
  line-height: 1.2;
}

.intone-ind-proof-dark__card-body {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.625;
  color: #596068;
}

/* Button flips to dark-fill/white-text now that its card is light —
   was white-fill/black-text, correct only against the old dark card. */
.intone-ind-proof-dark__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #141414;
  color: #fff;
  font-family: var(--ds-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1rem 2rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.intone-ind-proof-dark__cta:hover {
  background: var(--ds-gold);
}

.intone-ind-proof-dark__cta svg {
  flex-shrink: 0;
}

/* ── Two-column row (360px image panel + content panel) ──
   Shared by BFSI delivery rows and Careers rows. */
.intone-row {
  overflow: hidden;
}

.intone-row__content {
  flex: 1 1 0;
  background: var(--ds-light-200);
  padding: 4.9375rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  justify-content: center;
}

.intone-row__image {
  flex: 0 0 360px;
  background: #ececf0;
  overflow: hidden;
  position: relative;
  min-height: 697px;
}

.intone-row__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.intone-row--content-left {
  display: flex;
  flex-direction: row;
}

.intone-row--image-left {
  display: flex;
  flex-direction: row;
}

.intone-row__heading {
  font-family: var(--ds-font-heading);
  font-size: clamp(2rem, 5vw, 4.25rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ds-navy);
  line-height: 1.1;
  margin: 0;
}

.intone-row__sub {
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #000;
  margin: 0;
}

.intone-row__body {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.36;
  /* text-transform: uppercase; */
  color: #000;
  margin: 0;
}

.intone-row__card {
  background: var(--ds-neutral-100, #fff);
  border-left: 10px solid var(--ds-gold);
  padding: 2rem 1.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intone-row__card-title {
  font-family: var(--ds-font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.intone-row__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.intone-row__list li {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.36;
  /* text-transform: uppercase; */
  color: #000;
}

/* ── Industries components — responsive ── */
@media (max-width: 1024px) {
  .intone-ind-service-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .intone-ind-proof-section__inner {
    flex-direction: column;
    min-height: auto;
  }

  .intone-ind-proof-section__gold-panel {
    flex: none;
    min-height: auto;
  }

  .intone-row,
  .intone-row--content-left,
  .intone-row--image-left {
    flex-direction: column;
    min-height: auto;
  }

  .intone-row__image {
    flex: none;
    min-height: 340px;
    position: relative;
    width: 100%;
  }

  .intone-row__image img {
    position: static;
    width: 100%;
    height: 340px;
    object-fit: cover;
  }

  .intone-ind-credentials__text {
    font-size: 1.125rem;
  }
}

@media (max-width: 640px) {
  .intone-ind-hero__inner {
    padding: 6.875rem 1.25rem 3rem;
  }

  .intone-ind-hero__label-row {
    margin-bottom: 2rem;
  }

  .intone-ind-service-cards {
    grid-template-columns: 1fr;
  }

  .intone-ind-dark-section {
    padding: 0 1.25rem;
  }

  .intone-ind-dark-section__inner {
    padding: 3rem 1.25rem;
    gap: 3rem;
  }

  .intone-ind-dark-section__rule {
    margin-top: 2.5rem;
  }

  .intone-ind-dark-section__ctas {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1.5rem;
  }

  .intone-ind-dark-section__image-strip {
    height: 220px;
    margin-top: 0;
  }

  .intone-ind-problem-card {
    padding: 2rem 1.25rem 2rem 1.5rem;
  }

  .intone-ind-proof-section {
    padding: 0 1.25rem;
  }

  .intone-ind-proof-dark__card {
    padding: 2rem 1.25rem 2rem 2rem;
  }

  .intone-ind-approach-section__label-row {
    justify-items: flex-start;
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .intone-ind-approach-section__header {
    gap: 2.5rem;
  }

  .intone-row__content {
    padding: 2.5rem 1.25rem;
  }
}