/* BOH Concepts — Four Seasons–inspired typography system
   Implements docs/Implementing a Four Seasons–Inspired Typography System.md.
   Values verified against the production fourseasons.com/seattle stylesheet
   (property.mainCss): the site uses Neue Helvetica for display/labels and
   Monotype Garamond (Garamond MT Std) for all readable copy.

   Primary family — Neue Helvetica substitute: Inter
     - Hero/page h1 (ty-h1):    Inter 200  28–72px   1.40 / 0.14em / uppercase
     - Section h2 (ty-h2):      Inter 200  20–26px   1.29 / 0.167em / uppercase
     - Feature h3 (ty-h3):      Inter 700  13–16px   1.31 / 0.25em / uppercase
     - Small labels h5/h6:      Inter 700  10–12px   1.5  / 0.2em  / uppercase
     - Navigation:              Inter 400  10–12px        / 0.2em  / uppercase
     - Buttons/CTA (ty-c1):     Inter 700  11–12px   1.3  / 0.25em / uppercase

   Editorial serif — Monotype Garamond substitute: EB Garamond
   (this is the FS body face: all copy, eyebrows, quotes, footer titles)
     - Standard body (ty-b2):   EB Garamond 400  15–18px   1.55 / 0.03em
     - Section intro (ty-b1):   EB Garamond 400  18–22px   1.5  / 0.023em
     - Eyebrow/overline/h4:     EB Garamond 400 italic 15–18px  1.4 / 0.028em
     - Testimonials/quotes:     EB Garamond 400  20–34px   1.48

   Display serif — Saol Display substitute: Cormorant Garamond
   (decorative use only: statistics / large numerals)
     - Statistics numbers:      Cormorant 300    36–62px   1.0
*/

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --font-sans: 'Inter', 'Neue Helvetica', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-editorial: 'EB Garamond', 'Garamond MT Std', 'Monotype Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  --weight-thin: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --tracking-display: 0.14em;
  --tracking-heading: 0.167em;
  --tracking-cta: 0.25em;
  --tracking-nav: 0.2em;
  --tracking-body: 0.03em;
}

/* ── Base / defaults ───────────────────────────────────────────────────── */
html,
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Four Seasons renders all readable copy in Garamond. Paragraphs, list
   items and quotes are serif everywhere so the same tag always gets the
   same font; navigation, footer and form UI keep Inter via the rules
   further down. */
p,
li,
blockquote,
dd {
  font-family: var(--font-editorial);
}

label,
input,
textarea,
button,
select,
nav li,
.main-menu li,
.menu-area li,
.nice-select li,
.pagination li {
  font-family: var(--font-sans);
}

/* Reset heavy template weights; specific rules below override where needed. */
h1, h2, h3, h4, h5, h6, p, a, span, li, button, input, textarea, label {
  font-weight: 400 !important;
}

/* Links inside headings keep the heading's weight — the reset above would
   otherwise flatten linked headings (e.g. team-member names) to 400. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit !important;
}

/* ── Hero and page headlines (FS ty-h1: Neue Helvetica 200 caps) ──────── */
h1,
.banner-section .content-box h1,
.main-slider .content-box h1,
.page-title .title-box h1,
.boh-hero h1,
[data-typo-role="hero"] h1,
[data-typo-role="page"] h1,
[data-typo-role="page"] .page-title h1 {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-thin) !important;
  font-size: clamp(28px, calc(4vw + 16px), 72px) !important;
  line-height: 1.4;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Banner / hero headings should wrap, not truncate, within the available width */
.banner-section .content-box h1,
.main-slider .content-box h1,
[data-typo-role="hero"] h1,
[data-typo-role="page"] h1 {
  white-space: normal !important;
  overflow-wrap: break-word;
}

/* ── Section headlines (FS ty-h2: Neue Helvetica 200, 24px caps) ─────── */
h2,
.sec-title h2,
section h2,
.long-uppercase h2,
[data-typo-role="section"] h2,
[data-typo-role="page"] h2,
[data-typo-role="quote"] h2,
[data-typo-role="body"] h2,
[data-typo-role="long"] h2 {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-thin) !important;
  font-size: clamp(20px, calc(0.6vw + 15.5px), 26px) !important;
  line-height: 1.29;
  letter-spacing: var(--tracking-heading) !important;
  text-transform: uppercase !important;
  margin-bottom: 0.35em;
}

/* growth-style-two's side-column h2 was designed at 60px with 72px leading;
   style.css's higher-specificity selector kept that stale 72px line-height
   after the shared h2 tier shrank the font, tripling the gap between wrapped
   lines. Equal specificity + later load order → this wins. */
.growth-style-two .inner-column .text h2 {
  line-height: 1.29;
}

/* ── Feature / card titles (FS ty-h3: Neue Helvetica 700, ~16px caps) ── */
h3,
.single-item h3,
.wfs-card h3,
.pricing-block-one h3,
.ip-item h3,
.process-block-one h3,
.testimonial-block-one h3 {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-bold) !important;
  font-size: clamp(13px, calc(0.25vw + 11.6px), 16px) !important;
  line-height: 1.31;
  letter-spacing: var(--tracking-cta) !important;
  text-transform: uppercase !important;
}

/* ── h4 (FS ty-h4: Monotype Garamond italic, 18px — footer titles etc.) ─ */
h4 {
  font-family: var(--font-editorial) !important;
  font-weight: var(--weight-regular) !important;
  font-style: italic !important;
  font-size: 18px !important;
  line-height: 1.5;
  letter-spacing: 0.028em;
  text-transform: none !important;
}

/* ── h5 / h6 (FS ty-c1 labels: Neue Helvetica 700, small tracked caps) ── */
h5,
h6,
.counter-block h6 {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-bold) !important;
  font-size: clamp(10px, calc(0.24vw + 9.09px), 12px) !important;
  line-height: 1.5;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* ── Eyebrows / overlines (FS labels-overline + hero eyebrow:
   Monotype Garamond italic, ~16–18px — the "Four Seasons Hotel" line) ── */
.top-title,
.sec-title .top-title,
.wfs-eyebrow,
.section-label,
.eyebrow,
.boh-hero-eyebrow,
.banner-section .content-box > span,
/* Component-scoped eyebrows on inner pages — same serif-italic tier. */
.cta-eyebrow,
.at-eyebrow,
.aff-cta-eyebrow,
.fp-card__eyebrow,
.jf-eyebrow,
.jo-eyebrow,
.jh-eyebrow,
.pjx-eyebrow,
.oae-eyebrow,
.oae-cta-eyebrow,
.cf-eyebrow {
  font-family: var(--font-editorial) !important;
  font-weight: var(--weight-regular) !important;
  font-style: italic !important;
  font-size: clamp(15px, calc(0.4vw + 13.5px), 18px) !important;
  line-height: 1.4;
  letter-spacing: 0.028em;
  text-transform: none !important;
}

/* Hero support line (FS Heading-subtitle: Neue Helvetica 400, 12px,
   .25em tracking, uppercase) */
.banner-section .content-box .support-line,
.boh-hero .boh-hero-support {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: var(--weight-regular) !important;
  font-size: 12px !important;
  letter-spacing: 0.25em;
  line-height: 1.5;
  text-transform: uppercase !important;
}

/* Functional small labels (FS labels-label: Neue Helvetica 500 caps) —
   for label-style paragraphs, not the serif overline. The qualified
   variant is needed because `[data-typo-role="body"] p` (below) ties this
   rule's specificity and would otherwise flip these labels to serif. */
p.tab-eyebrow,
[data-typo-role] p.tab-eyebrow {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: 0.15em;
  text-transform: uppercase !important;
}

/* The template's decorative corner squares were drawn for the original
   15px/26px label; at this smaller label size the 50px square spilled past
   the eyebrow's margin and overlapped the heading below. Resized to keep
   the same accent while clearing the h2. (Left offsets intentionally
   untouched so responsive.css's mobile repositioning still applies.) */
.sec-title .top-title:before {
  width: 40px;
  height: 40px;
}

.sec-title .top-title:after {
  width: 20px;
  height: 20px;
}

/* ── Section intro / lede (FS ty-b1: Garamond 22px, lh 1.5) ─────────── */
/* A `.sec-title p` / `.title-inner p` is always the intro paragraph under a
   section heading, so it takes the lede size in every content role — not
   just "section". The "quote" role is intentionally absent (see the
   carve-out below): on the landing page the testimonial band's `.sec-title p`
   stays at standard body size, and inner pages must match that. The "page"
   role is included because PageLayout's `<main data-typo-role="page">` wraps
   ALL inner-page content — element pages render their sections without an
   inner role wrapper, so this is what gives them ledes. */
[data-typo-role="section"] .sec-title p,
[data-typo-role="section"] .title-inner p,
[data-typo-role="section"] .subheadline,
[data-typo-role="body"] .sec-title p,
[data-typo-role="body"] .title-inner p,
[data-typo-role="body"] .subheadline,
[data-typo-role="subheadline"] .sec-title p,
[data-typo-role="subheadline"] .title-inner p,
[data-typo-role="subheadline"] .subheadline,
[data-typo-role="nav"] .sec-title p,
[data-typo-role="nav"] .title-inner p,
[data-typo-role="label"] .sec-title p,
[data-typo-role="label"] .title-inner p,
[data-typo-role="page"] .sec-title p,
[data-typo-role="page"] .title-inner p,
[data-typo-role="page"] .subheadline,
.editorial,
.welcome-section .sec-title p,
.about-section .sec-title p,
.mission-section .sec-title p,
.values-section .sec-title p {
  font-family: var(--font-editorial) !important;
  font-weight: 400 !important;
  font-size: clamp(18px, calc(0.8vw + 14px), 22px) !important;
  line-height: 1.5;
  letter-spacing: 0.023em;
}

/* Carve-out: quote/testimonial bands nested inside a page-role wrapper (i.e.
   every quote section on inner pages, since `<main>` carries the page role)
   keep their intro copy at standard body size — matching the landing page. */
[data-typo-role="quote"] .sec-title p,
[data-typo-role="quote"] .title-inner p,
[data-typo-role="quote"] .subheadline {
  font-size: clamp(15px, calc(0.34vw + 12.2px), 18px) !important;
  line-height: 1.55;
  letter-spacing: var(--tracking-body);
}

/* ── Standard body copy (FS ty-b2/b3: Garamond 15–18px, lh ~1.5–1.67) ── */
p,
[data-typo-role="body"] p,
[data-typo-role="body"] .text p,
.wfs-body,
.fact-counter p,
.services-section p,
.industries-section p,
/* The industries card `jobs_label` span now carries full descriptive
   sentences — it is prose, so it takes the editorial face (template's
   own italic/color/size still apply). */
.industries-section .content-box .text span,
.ceo-quote .body,
.body-copy {
  font-family: var(--font-editorial) !important;
  font-weight: var(--weight-regular) !important;
  font-size: clamp(15px, calc(0.34vw + 12.2px), 18px) !important;
  line-height: 1.55;
  letter-spacing: var(--tracking-body);
}

/* ── Testimonials and executive quotes (EB Garamond editorial) ─────────── */
[data-typo-role="quote"] .text p,
[data-typo-role="quote"] .quote,
[data-typo-role="quote"] blockquote p,
.testimonial-block-one .text p,
.testimonials .text p,
.ceo-quote .quote,
blockquote p {
  font-family: var(--font-editorial) !important;
  font-weight: 400 !important;
  font-size: clamp(20px, calc(1.7vw + 13.6px), 34px) !important;
  line-height: 1.48;
}

/* Names and titles under quotes stay Inter */
.testimonial-block-one h3,
.testimonial-block-one span,
.testimonial-block-one .author,
[data-typo-role="quote"] h3,
[data-typo-role="quote"] .author,
[data-typo-role="quote"] .role {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-medium) !important;
  font-size: clamp(11px, calc(0.12vw + 10.55px), 12px);
  letter-spacing: 0.03em;
}

/* Team member cards: the role sits beneath a spaced-caps Inter name, so it
   takes the same quiet "title under a name" treatment as quote roles —
   small Inter medium. The template's 17px default rendered larger than the
   15px name above it, inverting the hierarchy. */
.team-block-one .inner-box .lower-content .designation {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-medium) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
}

/* ── Statistics and impact numbers (Cormorant Garamond display) ────────── */
/* Covers the template counters plus the same tier rendered with component-
   scoped class names on inner pages (team stat cards, foundation donate
   stats, who-we-are impact stats). */
.count-outer,
.count-outer span,
.counter-block .count-outer,
.counter-block .count-text,
.team-stat .stat-value,
.foundation-page .fp-stat__value,
.wwa .wwa-stat .wwa-value {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-light) !important;
  font-size: clamp(36px, calc(3.15vw + 24.2px), 62px) !important;
  line-height: 1;
}

/* ── Navigation (FS Navigation-link: Neue Helvetica 400, ~10–12px caps) ─ */
nav a,
.main-menu a,
.navigation a,
.main-header a,
.menu-area a {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-regular) !important;
  font-size: clamp(11px, calc(0.1212vw + 10.55px), 12px) !important;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

/* ── Buttons and calls to action (FS ty-c1: Neue Helvetica 700,
   10–12px, .25em tracking, uppercase) ─────────────────────────────────── */
.theme-btn-one,
.theme-btn-two,
.theme-btn,
.main-header a.theme-btn-one,
.main-header a.theme-btn-two,
button,
input[type="submit"],
.wfs-card-cta,
.employers-cta a.primary,
.employers-cta a.secondary {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-bold) !important;
  font-size: clamp(11px, calc(0.1212vw + 10.55px), 12px) !important;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* FS footer: column titles are Garamond italic (ty-h4); the links beneath
   them are plain Neue Helvetica. */
.main-footer h3 {
  font-family: var(--font-editorial) !important;
  font-weight: var(--weight-regular) !important;
  font-style: italic !important;
  font-size: 18px !important;
  letter-spacing: 0.028em;
  line-height: 1.5;
  text-transform: none !important;
}

.main-footer a,
.footer-bottom a,
.footer-nav a {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-regular) !important;
  font-size: clamp(12px, calc(0.24vw + 9.09px), 13px) !important;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.follow-us-label {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-bold) !important;
  text-transform: uppercase;
}

/* Footer body copy follows the Inter interface style. */
.main-footer p,
.main-footer li,
.main-footer .text,
.footer-bottom,
.footer-tagline,
.footer-widget .text p,
.main-footer .subscribe-form .consent-group label,
.main-footer .subscribe-form .subscribe-notice {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-regular) !important;
  font-size: clamp(13px, calc(0.24vw + 10.09px), 15px) !important;
  line-height: 1.65;
}

/* Keep the subscribe input in Inter so it matches the button. */
.main-footer .subscribe-form input {
  font-family: var(--font-sans) !important;
  font-weight: var(--weight-regular) !important;
}

/* ── WCAG AA contrast fixes ─────────────────────────────────────────────
   This file loads after style.css/color.css, so these overrides win.
   White text on the #E06A42 brand orange is only ~3.3:1 — below the 4.5:1
   required for normal-size text. Navy (#0C1E33) on the same orange is
   ~5.3:1, so buttons/badges that keep the orange background switch to navy
   text. The muted mauve #a38f96 (~3.4:1 on white) is darkened to #6E5B60
   (~6.3:1) where it is used for readable text. */

#content_block_2 .content-box .inner-box a{
  color: #0C1E33;
}

.pagination li a:hover,
.pagination li a.active{
  color: #0C1E33;
}

.single-job-post .job-header .number p{
  color: #A03D12;
}

.single-job-post:hover .job-header .number p{
  color: #E06A42;
}

.main-header .header-top .location-box .location-carousel p{
  color: #4A3B41;
}

.main-header.fixed-header .header-lower > .outer-box {
  visibility: hidden;
}

.blog-details-content .comment-box .comment .comment-inner .comment-info .comment-time{
  color: #6E5B60;
  border-bottom-color: #6E5B60;
}

.blog-details-content .comment-box .comment .comment-inner .reply-btn{
  color: #A03D12;
}

.blog-details-content .comment-box .comment .comment-inner .reply-btn:hover{
  color: #0C1E33;
}

.blog-details-content .post-share-option .tag-list li a,
.blog-details-content .nav-btn-box .inner a,
.single-job-post .job-inner span{
  color: #6E5B60;
}

.blog-details-content .post-share-option .tag-list li a:hover{
  color: #fff;
}

.blog-sidebar .post-widget .widget-content .post .post-date{
  color: #6E5B60;
}

.blog-sidebar .post-widget .widget-content .post h3 a,
.blog-sidebar .post-widget .widget-content .post h4 a,
.blog-sidebar .post-widget .widget-content .post h5 a{
  color: #0C1E33;
}

.blog-sidebar .post-widget .widget-content .post h3 a:hover,
.blog-sidebar .post-widget .widget-content .post h4 a:hover,
.blog-sidebar .post-widget .widget-content .post h5 a:hover{
  color: #A03D12;
}

/* Links inside body prose must be distinguishable without relying on
   colour alone (WCAG 1.4.1) and meet 4.5:1 against white. CMS-authored
   copy (e.g. the ADP apply link inside accordion text) renders as a plain
   inline link — give it an underline and the darker brand orange. */
main p a,
.acc-content a{
  color: #A03D12;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile header layout (≤991px)

   The template absolutely positions .menu-right-content over the floated
   hamburger row, which pushed the toggler off the right edge, and each
   control had its own padding/line-height so heights varied 26–56px.

   Rework as flex rows:
     row 1: logo
     row 2: search / language / CTA controls + hamburger at the right end,
            all a uniform height (≥44px touch target, WCAG 2.5.5)
   .menu-area is flattened with display:contents so the toggler becomes a
   flex item of .outer-box and can sit on the same line as the controls.
   ───────────────────────────────────────────────────────────────────────── */
@media only screen and (min-width: 1400px) and (max-width: 1749px) {
  /* Keep the navy header as a single row on large laptops. The template's
     default 1749px breakpoint drops the menu onto a second bar, which looks
     like a "double header". Shrink the menu/buttons just enough so everything
     shares one line between 1400px and 1749px. */
  .main-header .header-lower > .outer-box,
  .sticky-header > .outer-box {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .main-header .header-lower > .outer-box > .menu-area,
  .sticky-header > .outer-box > .menu-area {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .main-header .header-lower > .outer-box > .menu-area .logo-box,
  .sticky-header > .outer-box > .menu-area .logo-box {
    float: none !important;
    margin-right: 20px !important;
    padding: 15px 20px !important;
    border-radius: 0 !important;
    flex: 0 0 auto !important;
  }

  .main-header .header-lower > .outer-box > .menu-area .main-menu,
  .sticky-header > .outer-box > .menu-area .main-menu {
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .main-header .header-lower > .outer-box > .menu-right-content,
  .sticky-header > .outer-box > .menu-right-content {
    position: static !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 15px 0 0 !important;
    flex: 0 0 auto !important;
  }

  .main-header .header-lower .main-menu .navigation,
  .sticky-header .main-menu .navigation {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .main-header .header-lower .main-menu .navigation > li,
  .sticky-header .main-menu .navigation > li {
    padding: 0 8px !important;
    flex: 0 0 auto !important;
  }

  .main-header .header-lower .main-menu .navigation > li > a,
  .sticky-header .main-menu .navigation > li > a {
    font-size: 12px !important;
  }

  .main-header .header-lower > .outer-box > .menu-right-content .theme-btn-one,
  .main-header .header-lower > .outer-box > .menu-right-content .theme-btn-two,
  .sticky-header > .outer-box > .menu-right-content .theme-btn-one,
  .sticky-header > .outer-box > .menu-right-content .theme-btn-two {
    padding: 10px 14px !important;
    font-size: 11px !important;
  }

  .main-header .header-lower > .outer-box > .menu-right-content .language,
  .sticky-header > .outer-box > .menu-right-content .language {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

@media only screen and (max-width: 1399px) {
  /* Collapse the full desktop nav into a hamburger menu. Keep the sticky
     header visible on 992–1399px as a compact hamburger + CTA bar. */
  .main-header .header-lower .main-menu,
  .main-header .sticky-header .main-menu {
    display: none !important;
  }

  .main-header .header-lower > .outer-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  .main-header .header-lower > .outer-box > .menu-area {
    display: contents;
  }

  .main-header .header-lower > .outer-box > .menu-right-content {
    position: static;
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0;
    margin-left: auto;
    padding: 0 15px 0 0;
    box-sizing: border-box;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  /* Keep every control on one row: logo | controls | hamburger. */
  .main-header .header-lower > .outer-box .logo-box {
    order: 1;
  }

  .main-header .header-lower > .outer-box > .menu-right-content {
    order: 2;
  }

  .main-header .header-lower > .outer-box .mobile-nav-toggler,
  .sticky-header > .outer-box .mobile-nav-toggler {
    float: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    width: 48px;
    min-height: 44px;
    padding: 0;
    margin: 15px 15px 15px 0;
    box-sizing: border-box;
    font-size: 0;
    line-height: 0;
    order: 3;
    align-self: center;
    background: #fff;
    border: none;
    border-radius: 4px;
  }

  .main-header .header-lower > .outer-box .mobile-nav-toggler .icon-bar,
  .sticky-header > .outer-box .mobile-nav-toggler .icon-bar {
    margin-bottom: 0;
    width: 22px;
    height: 2px;
    background-color: #0c1e33;
  }

  /* Phones: hamburger moves onto the controls line, right of "Apply Now". */
  @media only screen and (max-width: 767px) {
    .main-header .header-lower > .outer-box .logo-box {
      order: 1;
    }

    .main-header .header-lower > .outer-box > .menu-right-content {
      order: 2;
      flex: 0 1 auto;
      width: auto;
      /* Leave room for the 48px toggler + 15px gap on the same flex line. */
      max-width: calc(100% - 63px);
      margin-left: auto;
    }

    .main-header .header-lower > .outer-box .mobile-nav-toggler {
      order: 3;
      margin: 0 15px 10px 0;
      align-self: center;
    }
  }

  .main-header .header-lower > .outer-box > .menu-right-content > li {
    display: flex;
    align-items: stretch;
    margin: 0;
    min-width: 0;
  }

  /* Search + language keep their natural size; the CTA buttons flex-shrink
     so the whole row stays on one line at any viewport width. */
  .main-header .header-lower > .outer-box > .menu-right-content > li:has(.search-btn),
  .main-header .header-lower > .outer-box > .menu-right-content > li:has(.language) {
    flex: 0 0 auto;
  }

  .main-header .header-lower > .outer-box > .menu-right-content .language {
    margin: 0;
  }

  .main-header .header-lower > .outer-box > .menu-right-content .search-btn button,
  .main-header .header-lower > .outer-box > .menu-right-content .lang-btn,
  .main-header .header-lower > .outer-box > .menu-right-content .theme-btn-one,
  .main-header .header-lower > .outer-box > .menu-right-content .theme-btn-two {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 44px;
    box-sizing: border-box;
    line-height: 1.2;
    padding-top: 0;
    padding-bottom: 0;
    top: 0;
    vertical-align: middle;
  }

  .main-header .header-lower > .outer-box > .menu-right-content .search-btn button {
    width: 44px;
    padding: 0;
    font-size: 18px;
  }

  .main-header .header-lower > .outer-box > .menu-right-content .lang-btn {
    padding: 0 12px;
  }

  .main-header .header-lower > .outer-box > .menu-right-content .theme-btn-one,
  .main-header .header-lower > .outer-box > .menu-right-content .theme-btn-two {
    padding: 0 16px;
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
    font-size: clamp(8px, 1.6vw, 11px);
  }
}

@media only screen and (min-width: 992px) and (max-width: 1399px) {
  /* Sticky header becomes a compact hamburger + CTA bar on tablets and small
     laptops. The full desktop nav doesn't fit here, so keep navigation
     reachable without creating a second menu row. */
  .main-header .sticky-header {
    display: block !important;
    background: #0C1E33;
  }

  .main-header .sticky-header .main-menu {
    display: none !important;
  }

  .main-header .sticky-header .mobile-nav-toggler {
    display: inline-flex !important;
  }

  .main-header .sticky-header > .outer-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
  }

  .main-header .sticky-header > .outer-box > .menu-area {
    float: none;
    display: flex;
    align-items: center;
    padding-left: 0;
  }

  .main-header .sticky-header > .outer-box > .menu-right-content {
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 10px 0;
  }

  .main-header .sticky-header > .outer-box > .menu-right-content .theme-btn-one,
  .main-header .sticky-header > .outer-box > .menu-right-content .theme-btn-two {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* Prevent the hover "fill" pseudo-element from leaving a 1px subpixel ghost
     on the compact sticky header buttons at certain viewport widths. */
  .main-header .sticky-header > .outer-box > .menu-right-content .theme-btn-one:after,
  .main-header .sticky-header > .outer-box > .menu-right-content .theme-btn-two:after {
    opacity: 0;
  }

  .main-header .sticky-header > .outer-box > .menu-right-content .theme-btn-one:hover:after,
  .main-header .sticky-header > .outer-box > .menu-right-content .theme-btn-two:hover:after {
    opacity: 1;
  }
}

/* Very narrow phones: tighten gaps/padding so the single row fits ~320px. */
@media only screen and (max-width: 499px) {
  .main-header .header-lower > .outer-box > .menu-right-content {
    gap: 8px;
    justify-content: center;
  }

  .main-header .header-lower > .outer-box > .menu-right-content .theme-btn-one,
  .main-header .header-lower > .outer-box > .menu-right-content .theme-btn-two {
    padding: 0 10px;
    letter-spacing: 0.3px;
  }

  .main-header .header-lower > .outer-box > .menu-right-content .lang-btn {
    padding: 0 10px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Banner text wrap on large tablets / small laptops (992–1199px)

   Below xl the slide's content column becomes col-lg-12 (100% wide) while
   the image-layer still occupies the right 43% (style-one) or left 43%
   (style-two), so the heading/paragraph spill over the image. Constrain the
   column to the free side in that range.
   ───────────────────────────────────────────────────────────────────────── */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .banner-section .banner-carousel .slide-item.style-one .content-column {
    flex: 0 0 55%;
    max-width: 55%;
  }

  .banner-section .banner-carousel .slide-item.style-two .content-column {
    flex: 0 0 55%;
    max-width: 55%;
    margin-left: 45%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Contact page mobile responsiveness

   - Long unbroken strings (email addresses) must wrap inside info cards
     instead of painting past the card edge.
   - Tighten the icon indent on narrow phones so the text column is wider.
   - Shrink the fixed "scroll to top" pill so it stops covering card text
     and form fields on small screens.
   ───────────────────────────────────────────────────────────────────────── */
#content_block_6 .content-box .info-list li .inner p,
#content_block_6 .content-box .info-list li .inner p a,
.locations-section .single-item .inner-box .text,
.locations-section .single-item .inner-box a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media only screen and (max-width: 479px) {
  #content_block_6 .content-box .info-list li {
    padding-left: 68px;
  }

  #content_block_6 .content-box .info-list li .inner {
    padding-left: 20px;
  }

  .scroll-top {
    width: 46px;
    height: 58px;
    right: 14px;
    font-size: 10px;
  }

  .scroll-top i {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .scroll-top.open {
    bottom: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile hero: fill the first viewport

   The template's .header-top (call/mail bar, tagline, quick links, socials)
   spends ~138px of the mobile viewport before the nav even starts — its
   links are all reachable from the hamburger menu and footer, so hide it
   on mobile/tablet. The slide then gets min-height = viewport − header so
   the hero occupies the whole first screen; content taller than that still
   grows the slide (min-height, not height).
   ───────────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 991px) {
  .main-header .header-top {
    display: none;
  }

  .main-header .header-lower > .outer-box > .menu-right-content {
    padding-bottom: 10px;
  }

  .banner-section.style-one .banner-carousel .slide-item,
  .banner-section.style-two .banner-carousel .slide-item {
    min-height: calc(100vh - 150px);
    min-height: calc(100svh - 150px);
    padding-top: 20px;
    padding-bottom: 24px;
  }

  .banner-section .banner-carousel .content-box .support-line {
    margin-top: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile hero typography (≤767px)

   Keeps the hero copy from growing too tall on phones so the whole hero fits
   the first screen.
   ───────────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 767px) {
  .banner-section .banner-carousel .content-box > span {
    font-size: 15px !important;
    letter-spacing: 0.028em;
  }

  .banner-section .banner-carousel .content-box > p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 14px;
  }

  .banner-section .banner-carousel .content-box .support-line {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-top: 10px !important;
  }

  .banner-section .banner-carousel .btn-box {
    gap: 10px;
  }

  .banner-section .banner-carousel .btn-box .theme-btn-one,
  .banner-section .banner-carousel .btn-box .theme-btn-two {
    padding: 9px 16px;
    font-size: 12px;
    line-height: 22px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile hero: centred, compact layout

   - Header CTAs are duplicated inside the hero, so on phones the header
     drops them: one row of [logo] [EN] [menu].
   - Hero content centres for a calmer look: spaced-caps eyebrow, centred
     copy and buttons.
   ───────────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 767px) {
  /* Hide the two header CTAs on phones — hero carries them. */
  .main-header .header-lower .menu-right-content > li:has(.theme-btn-one),
  .main-header .header-lower .menu-right-content > li:has(.theme-btn-two) {
    display: none;
  }

  /* Collapse to a single header row: logo | EN | menu */
  .main-header .header-lower > .outer-box > .menu-right-content {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-left: auto;
    padding: 0;
  }

  .main-header .header-lower > .outer-box .mobile-nav-toggler {
    order: 3;
    margin: 0 15px 0 8px;
    align-self: center;
  }

  /* Slightly smaller logo so logo + EN + menu share one row at 320px. */
  .main-header .header-lower .logo-box {
    max-width: 175px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .main-header .header-lower .logo-box img {
    max-width: 100%;
    height: auto;
  }

  /* Centred editorial hero */
  .banner-section .banner-carousel .content-box {
    text-align: center;
  }

  .banner-section .banner-carousel .content-box > span {
    font-size: 15px !important;
    letter-spacing: 0.028em;
  }

  .banner-section .banner-carousel .content-box > p {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .banner-section .banner-carousel .content-box .support-line {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .banner-section .banner-carousel .btn-box {
    justify-content: center;
  }
}

/* Very small phones: tighter logo/controls so the single header row fits. */
@media only screen and (max-width: 360px) {
  .main-header .header-lower .logo-box {
    max-width: 150px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .main-header .header-lower > .outer-box .mobile-nav-toggler {
    margin-right: 10px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile hero: banded layout (image → navy title band → cream CTA band)

   Mirrors the reference design: the photo gets its own band at the top,
   the heading sits on a navy band, and the copy + CTAs fill the remaining
   space on cream — so content is distributed uniformly across the viewport
   instead of crowding at the top. Phone only (≤767px).
   ───────────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 767px) {
  .banner-section.style-one .banner-carousel .slide-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: calc(100svh - 100px);
  }

  /* Remove the full-slide white wash — bands handle contrast now. */
  .banner-section.style-one .banner-carousel .slide-item:before {
    display: none;
  }

  /* Band 1: the photo, full width, roughly the top third. */
  .banner-section.style-one .banner-carousel .slide-item .image-layer {
    position: relative;
    left: 0;
    right: 0;
    order: 1;
    flex: none;
    width: 100%;
    height: 28svh !important;
    min-height: 190px;
    transform: none !important;
  }

  .banner-section.style-one .banner-carousel .slide-item .auto-container {
    order: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .banner-section.style-one .banner-carousel .slide-item .auto-container .row {
    display: flex;
    flex: 1;
    margin: 0;
  }

  .banner-section.style-one .banner-carousel .slide-item .content-column {
    flex: 1 1 100%;
    max-width: 100%;
    display: flex;
    padding: 0;
  }

  .banner-section.style-one .banner-carousel .slide-item .content-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f4efe8;
  }

  /* Band 2 (navy): eyebrow + heading. Consecutive same-colour backgrounds
     read as one continuous band — margins must stay zero. */
  .banner-section .banner-carousel .slide-item .content-box > span {
    margin: 0;
    padding: 22px 20px 2px;
    background: #0c1e33;
    color: #e9d8c4;
    font-family: "EB Garamond", "Cormorant", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 1.4;
    letter-spacing: 0.028em;
    text-transform: none;
  }

  .banner-section .banner-carousel .slide-item .content-box > h1 {
    margin: 0;
    padding: 4px 20px 24px;
    background: #0c1e33;
    color: #ffffff;
    font-size: clamp(25px, 7vw, 30px) !important;
    line-height: 1.4;
    letter-spacing: 0.14em;
  }

  /* Band 3 (cream): description, CTAs, support line — spread evenly via
     auto margins so the band fills the remaining viewport. */
  .banner-section .banner-carousel .slide-item .content-box > p {
    margin-top: auto;
    margin-bottom: 0;
    padding: 8px 24px 0;
    max-width: none;
    font-size: 14px;
    line-height: 1.55;
    color: #3d4450;
  }

  .banner-section .banner-carousel .slide-item .content-box .btn-box {
    margin-top: auto;
    padding: 8px 16px 0;
    gap: 10px;
  }

  /* Compact CTAs so both can share a row like the reference's single CTA. */
  .banner-section .banner-carousel .slide-item .content-box .btn-box a {
    padding: 10px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.1em;
  }

  .banner-section .banner-carousel .slide-item .content-box .support-line {
    margin-top: auto !important;
    margin-bottom: 0;
    padding: 8px 20px 20px;
    max-width: none;
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b7280;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Consistent mobile body/footer scale

   Normalizes the template's scattered mobile font sizes for body text and
   footer copy. Headings now use the same clamp scale as desktop.
   ───────────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 767px) {
  body,
  p,
  li,
  dd,
  td {
    font-size: 16px;
  }

  p,
  li {
    line-height: 1.6;
  }

  /* Form fields at 16px — also the iOS threshold that avoids auto-zoom. */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Footer: quiet, uniform small text. */
  .main-footer p,
  .main-footer li,
  .main-footer a,
  .main-footer .text {
    font-size: 13px;
    line-height: 1.7;
  }
}

/* Mobile scale — catch the section-level paragraph rules that out-specify
   the plain `p` selector (intro copy, page-banner leads, footer legal). */
@media only screen and (max-width: 767px) {
  /* All body paragraphs inside page sections: one size. */
  section p {
    font-size: 16px !important;
    line-height: 1.6;
  }

  section li {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Subpage banner: lead paragraph. */
  .page-title p {
    font-size: 16px !important;
    line-height: 1.7;
  }

  /* Label-style paragraphs keep the 11px spaced-cap treatment. */
  p.tab-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* Hero support line stays small (its banded rule lacks !important). */
  .banner-section .support-line {
    font-size: 12px !important;
  }

  /* Footer: uniform 13px including copyright/legal. */
  .main-footer p,
  .main-footer .footer-bottom p {
    font-size: 13px !important;
    line-height: 1.7;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Desktop/tablet scale (≥768px) — same normalization as mobile, sized for
   larger screens. Catches elements that sit outside the data-typo-role
   system: page-banner titles/leads, section intro copy, tab eyebrows,
   footer legal, and section-level h2s that exceed the scale's cap.
   ───────────────────────────────────────────────────────────────────────── */
@media only screen and (min-width: 768px) {
  /* Body paragraphs: one size everywhere a section doesn't opt out.
     (FS ty-b2 is 18px Garamond; EB Garamond's smaller x-height reads
     equivalent at ~16–17px.) */
  section p {
    font-size: 17px !important;
    line-height: 1.6;
  }

  section li {
    font-size: 17px;
    line-height: 1.6;
  }

  .page-title p {
    font-size: 16px !important;
    line-height: 1.7;
  }

  /* Label-style paragraphs: 12px spaced caps. */
  p.tab-eyebrow {
    font-size: 12px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* Footer: quiet, uniform small text. */
  .main-footer p,
  .main-footer .footer-bottom p {
    font-size: 14px !important;
    line-height: 1.7;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Mobile scale — remaining hierarchy outliers: sidebar links/labels, tab
   titles, and footer accents that still render at desktop sizes on phones.
   (Decorative step/stat numerals and EB Garamond editorial/quote tiers are
   intentionally left larger.) */
@media only screen and (max-width: 767px) {
  /* FS tracks the mobile hero a touch wider than desktop (.21em at 28px);
     0.18em keeps long BOH headlines from overflowing small screens. */
  h1,
  .banner-section .content-box h1,
  .page-title .title-box h1,
  [data-typo-role="hero"] h1,
  [data-typo-role="page"] h1 {
    letter-spacing: 0.18em;
  }

  /* Service-details sidebar: category links + subscribe-widget labels. */
  .service-sidebar .categories-list a,
  .service-details .sidebar-widget a {
    font-size: 14px !important;
  }

  .service-sidebar .subscribe-widget label,
  .service-details label {
    font-size: 13px !important;
  }

  /* Industries / welcome tab titles and item descriptions. */
  .welcome-section .tab-btn-title,
  .industries-section .tab-btn-title {
    font-size: 13px !important;
    letter-spacing: 0.08em;
  }

  .industries-section .content-box .text span,
  .industries-section .content-box .text h3 {
    font-size: 14px !important;
  }

  /* Job-board category list items. */
  .findjob-section li,
  .findjob-section li a {
    font-size: 14px !important;
  }

  /* CEO designation + footer "Follow Us" accent text. */
  .designation,
  .main-footer .follow-us-label {
    font-size: 13px !important;
  }
}