/* 
  ==============================================
  BRANDING & DESIGN PAGE STYLES (Responsive)
  ==============================================
*/

body.branding-page-body {
  margin: 0;
  padding: 0;
  background-color: #F4F5F5;
}

/* Apply Root Container Query */
.branding-page-body .page-container {
  container-type: inline-size;
  container-name: page;
  max-width: 100%;
  margin: 0 auto;
}

/* Base resets for fluid sections */
.branding-page-body .vw-fluid-section {
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

/* Apply Root Container Query */
.branding-page-body .page-container {
  container-type: inline-size;
  container-name: page;
  max-width: 100%;
  margin: 0;
}

/* ==============================================
   1. HERO SECTION
   ============================================== */

/* Desktop & Tablet Styles (Min-width: 992px) */
@media (min-width: 768px) {
  .branding-hero {
    position: relative;
    width: 100%;
    /* Use explicit 100vh to ensure it never exceeds one viewport on Windows/Linux/Mac */
    height: 100vh;
    min-height: 500px;
    /* Safety fallback for extremely short landscape screens */
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Push content from the bottom */
  }

  .branding-hero .hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .branding-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    /* Exact #0000001A overlay */
    z-index: 2;
  }

  .branding-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    /* Remove height 100% and let it shrink-wrap at the bottom */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Match container width mapping */
    padding-left: 4.4444cqi;
    /* 64/1440 */
    padding-bottom: 4.1667cqi;
    /* 60px bottom padding for the whole content block */
  }

  /* Title & Subtitle Container */
  .branding-hero-text-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* No artificial gap; let natural line heights dictate spacing */
    max-width: 80cqi;
    margin-bottom: 9.7222cqi;
    /* 140/1440 gap between title block and breadcrumb */
  }

  .branding-hero-title {
    font-family: "Mona Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 4.6528cqi, 67px);
    /* 67/1440 */
    line-height: clamp(42px, 4.7917cqi, 69px);
    /* 69/1440 */
    letter-spacing: 0.01em;
    color: #ffffff;
    margin: 0;
  }

  .branding-hero-subtitle {
    font-family: "Mona Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.0833cqi, 30px);
    /* 30/1440 */
    line-height: 1;
    color: #ffa726;
    margin: 0;
  }

  /* Breadcrumb */
  .branding-hero-breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5556cqi;
    /* 8px */
    margin-bottom: 0;
  }

  .branding-hero-breadcrumb a {
    text-decoration: none;
    font-family: "Mona Sans", sans-serif;
    font-weight: 400;
    font-size: 1.25cqi;
    /* 18/1440 */
    line-height: 2.0139cqi;
    /* 29/1440 */
    letter-spacing: 0.01em;
    color: #ffffff;
    transition: opacity 0.3s ease;
  }

  .branding-hero-breadcrumb a:hover {
    opacity: 0.8;
  }

  .breadcrumb-icon {
    width: 1.5972cqi;
    /* 23/1440 */
    height: 1.0417cqi;
    /* 15/1440 */
  }

  .breadcrumb-current-wrapper {
    display: flex;
    align-items: center;
  }

  .breadcrumb-current-wrapper .current {
    font-family: "Mona Sans", sans-serif;
    font-weight: 400;
    font-size: 1.25cqi;
    /* 18/1440 */
    line-height: 2.0139cqi;
    letter-spacing: 0.01em;
    color: #ffffff;
  }

  /* Hero "SPEAK TO AN EXPERT" pill — floats over the hero image, bottom-right */
  .branding-hero-cta {
    position: absolute;
    left: 69.79%;
    right: 8.75%;
    bottom: 7.64%;
    z-index: 4;
    height: 3.4703cqi;
    /* 49.973/1440 - same button as Design & Production's CTA (identical
       Figma percentages), just a different background colour */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8042cqi;
    /* 11.58/1440 */
    background: rgba(240, 238, 234, 0.85);
    border-radius: 2.0139cqi;
    /* 29/1440 */
    padding: 0 0.8174cqi 0 0.4861cqi;
    /* 0, 11.77/1440, 0, 7/1440 - icon sits 7px from the left, text ends
       11.77px from the right, per Figma's absolute positions rather than a
       symmetric guess */
    text-decoration: none;
    cursor: pointer;
  }

  .branding-hero-cta .icon-circle {
    width: 2.7778cqi;
    /* 40/1440 - was 1.7083cqi (24.6px), well under Figma's real 40px icon */
    height: 2.7778cqi;
    /* 40/1440 - this icon (orange circle, white arrow) is a perfect 40x40
       circle, not the 38.44px-tall pill shape Design & Production uses -
       they're two different icon assets, not one reused. */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .branding-hero-cta .btn-text {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 1.5278cqi;
    /* 22/1440 */
    color: #1b3834;
    white-space: nowrap;
  }

  /* ==============================================
     2. INTRO SECTION
     ============================================== */
  .social-intro-section {
    width: 100%;
    padding-top: 4.9306cqi;
    /* 71/1440 exactly matching requested gap from Hero */
    padding-bottom: 0;
    /* Gap handled by next section */
    background-color: #F4F5F5;
    display: flex;
    justify-content: center;
  }

  .social-intro-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .social-intro-row {
    width: 91.6667cqi;
    /* 1320/1440 */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5.2083cqi;
    /* 75px */
  }

  .social-intro-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.7639cqi;
    /* 11/1440 */
  }

  .social-intro-bar {
    width: 0.2778cqi;
    /* 4/1440 */
    height: 2.0833cqi;
    /* 30/1440 fixed height to match 1-line title */
    background-color: #FFA726;
    border-radius: 0;
  }

  .social-intro-heading {
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 2.0833cqi;
    /* 30/1440 */
    line-height: 2.0833cqi;
    /* 30/1440 */
    color: #FFA726;
    white-space: nowrap;
    /* "Branding & Design" is longer than the other page titles; keep it on one line */
  }

  .social-intro-right {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .social-intro-desc {
    width: 100%;
    /* Fill remaining row width so it stays flush with the row's right edge, matching the Home page intro */
    font-family: "Mona Sans", sans-serif;
    font-weight: 500;
    font-size: 2.2222cqi;
    /* 32/1440 */
    line-height: 2.9167cqi;
    /* 42/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
    margin-top: -0.3472cqi;
    /* ~5px offset to counter leading padding */
  }

  /* 2a. INTRO SECTION (actual markup classes used in branding-design.html) —
     mirrors .social-intro-* above so this page matches the other 6 service
     pages' intro layout on desktop/web. */
  .branding-intro-section {
    width: 100%;
    padding-top: 4.9306cqi;
    /* 71/1440 exactly matching requested gap from Hero */
    padding-bottom: 0;
    background-color: #F4F5F5;
    display: flex;
    justify-content: center;
  }

  .branding-intro-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .branding-intro-row {
    width: 91.6667cqi;
    /* 1320/1440 */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5.2083cqi;
    /* 75px */
  }

  .branding-intro-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.7639cqi;
    /* 11/1440 */
  }

  .branding-intro-bar {
    width: 0.2778cqi;
    /* 4/1440 */
    height: 2.4438cqi;
    /* 35.19/1440 - was 2.0833cqi (30px); Figma's bar (node 3499:788) is
       35.19px tall, matching the site's usual section-bar convention
       (sold_section_bar() defaults to a 36px-tall bar), not 30px. */
    display: block;
  }

  .branding-intro-heading {
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 2.0833cqi;
    /* 30/1440 */
    line-height: 2.0833cqi;
    /* 30/1440 */
    color: #FFA726;
    white-space: nowrap;
  }

  .branding-intro-right {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .branding-intro-desc {
    width: 62.0139cqi;
    /* 893/1440 - was 100% (fills ~959px, the row's full remaining flex
       space). Figma's paragraph (node 3499:803) has an explicit fixed
       893px width, narrower than the available space - it doesn't stretch
       to the row's right edge. */
    font-family: "Mona Sans", sans-serif;
    font-weight: 500;
    font-size: 2.2222cqi;
    /* 32/1440 */
    line-height: 2.9167cqi;
    /* 42/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
    margin-top: -0.3472cqi;
    /* ~5px offset to counter leading padding */
  }

  /* ==============================================
     3. WHERE GREAT BRANDS BEGIN (CARD GRID)
     ============================================== */
  .branding-cards-section {
    width: 100%;
    padding-top: 6.6667cqi;
    /* 96/1440 - was 5.9722cqi (86px). Figma: intro text bottom (686+126=812)
       to this heading's top (908) = 96px, not 86px. */
    padding-bottom: 10.9722cqi;
    /* 158/1440 - was 6.25cqi (90px). Figma: cards grid bottom (1035+778=1813)
       to Design & Production's top (1971) = 158px, not 90px. */
    display: flex;
    justify-content: center;
    background-color: #F4F5F5;
  }

  .branding-cards-container {
    width: 71.3194cqi;
    /* 1027/1440 - this grid (Figma node 3499:1359) is narrower than the
       1320px intro row above it, not the same width - centered independently
       on the page. Using the intro row's wider 1320px here (an earlier
       mistake) rendered every card noticeably oversized. */
    margin: 0 auto;
  }

  .branding-cards-heading {
    margin: 0 0 5.3472cqi;
    /* 77/1440 - was 4.375cqi (63px). Figma: heading bottom (908+50=958) to
       the card grid's top (1035) = 77px, not 63px. */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 3.125cqi, 45px);
    /* 45/1440 */
    line-height: clamp(36px, 3.4722cqi, 50px);
    /* 50/1440 */
    letter-spacing: 0.01em;
    color: #263238;
    text-align: center;
  }

  .branding-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.75cqi;
    /* 54/1440 */
  }

  .branding-card {
    box-sizing: border-box;
    border: 2px solid #ffa726;
    border-radius: 1.0417cqi;
    /* 15/1440 */
    padding: 4.1667cqi 3.4028cqi;
    /* 60/1440, 49/1440 */
    display: flex;
    flex-direction: column;
    gap: 2.7778cqi;
    /* 40/1440 */
    justify-content: center;
  }

  .branding-card-title {
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 2.0833cqi;
    /* 30/1440 */
    line-height: 2.0833cqi;
    color: #ffa726;
  }

  .branding-card-divider {
    display: block;
    width: 6.1806cqi;
    /* 89/1440 */
    height: 2px;
    background-color: #ffa726;
  }

  .branding-card-desc {
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.8056cqi;
    /* 26/1440 */
    line-height: 2.2222cqi;
    /* 32/1440 */
    color: #0b0b0b;
  }

  /* ==============================================
     4. DESIGN & PRODUCTION
     ============================================== */
  .branding-production-section {
    background-color: #e9eaeb;
    width: 100%;
    padding-top: 4.6528cqi;
    /* 67/1440 */
    padding-bottom: 7.5417cqi;
    /* 108.6/1440 - was 6.25cqi (90px); the section's real Figma height is
       789px and the CTA button bottom sits at 680.4px, leaving 108.6px
       below it, not 90px */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Had no rules at all - as a plain block it shrank to its widest child
     (the 578px-wide pill list), and the narrower 309px CTA button, having
     no centering of its own, sat flush against that box's left edge instead
     of centering on the section like the heading (text-align:center, which
     centers regardless of the box's own width) appeared to. Centering every
     child within this container directly fixes it instead of relying on
     text-align only working for the heading. */
  .branding-production-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .branding-production-heading {
    margin: 0 0 3.4722cqi;
    /* 50/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 3.75cqi;
    /* 54/1440 */
    line-height: 4.0972cqi;
    /* 59/1440 */
    letter-spacing: 0.01em;
    color: #263238;
    text-align: center;
  }

  .branding-production-list {
    width: 40.1389cqi;
    /* 578/1440 */
    display: flex;
    flex-direction: column;
    gap: 2.0833cqi;
    /* 30/1440 */
  }

  .branding-production-cta {
    margin-top: 1.6667cqi;
    /* 24/1440 */
    flex-shrink: 0;
    /* Was a fixed width (309/1440) sized to fit only the default "SPEAK TO
       AN EXPERT" text exactly - a longer ACF-entered CTA text visibly
       overflowed past the button (caught via a real ACF update_field()
       audit, not assumed). Auto-sizing to content instead, same pattern
       already used by .btn-pre-footer for the same reason. */
    height: 3.4703cqi;
    /* 49.973/1440 - same button as the hero CTA (identical Figma
       percentages), just solid orange instead of translucent */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8042cqi;
    /* 11.58/1440 */
    background: #ffa726;
    border-radius: 2.0139cqi;
    /* 29/1440 */
    padding: 0 0.8174cqi 0 0.4861cqi;
    /* icon 7px from the left, text 11.77px from the right - see hero CTA's
       own comment for how these were derived from Figma's absolute values */
    text-decoration: none;
  }

  .branding-production-cta .icon-circle {
    width: 2.7778cqi;
    /* 40/1440 - was 1.7083cqi (24.6px) */
    height: 2.6694cqi;
    /* 38.44/1440 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .branding-production-cta .btn-text {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 1.5278cqi;
    color: #ffffff;
    white-space: nowrap;
  }

  /* Shared bordered pill row — reused by Design & Production's list and
     the step buttons in "How We Build Your Brand" below */
  .branding-pill {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 4.3056cqi;
    /* 62/1440 */
    background: #ffffff;
    border: 0.2431cqi solid #ffa726;
    /* 3.5/1440 */
    border-radius: 3.6806cqi;
    /* 53/1440 */
    padding-left: 5.2431cqi;
    /* 75.5/1440 */
    box-sizing: border-box;
  }

  .branding-pill-icon {
    position: absolute;
    left: -0.0347cqi;
    top: 50%;
    transform: translateY(-50%);
    width: 3.8194cqi;
    /* 55/1440 */
    height: 3.8889cqi;
    /* 56/1440 */
    background: url("../assets/images/branding-pill-icon.svg") center / contain no-repeat;
  }

  .branding-pill-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.8056cqi;
    /* 26/1440 */
    line-height: 2.2222cqi;
    color: #0b0b0b;
  }

  /* ==============================================
     PORTFOLIO GALLERY (placeholder image, real assets to follow)
     ============================================== */
  .branding-gallery-section {
    width: 100%;
    padding-top: 7.6389cqi;
    /* 110/1440 */
    display: flex;
    justify-content: center;
    background-color: #f4f5f5;
  }

  .branding-gallery-container {
    width: 78.0556cqi;
    /* 1124/1440 */
  }

  .branding-gallery-img {
    display: block;
    /* Natural size: an image narrower than the container shows at its own width (centred), never
       stretched; a wider one is scaled down to the container (max-width) - aspect ratio kept either
       way. Was width:100%, which enlarged small uploads and made them soft. */
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    height: auto;
    /* Was aspect-ratio:1808/1060, this placeholder image's own natural
       ratio hardcoded - would distort or letterbox any differently-shaped
       image the other 7 service pages upload once this becomes their
       shared template. width:100% + height:auto instead uses each image's
       own intrinsic ratio automatically (the CSS default for a replaced
       element like <img> once no fixed aspect-ratio/height fights it) -
       full image, zero crop, zero distortion, for any dimensions, with no
       per-page CSS change needed. The section's own top/bottom padding
       (unrelated to the image's height) is what keeps the surrounding
       spacing identical across pages regardless of how tall a given image
       renders. */
    object-fit: contain;
    border-radius: 0;
    /* Figma's own generated code has no rounded-corner class on this node -
       was 1.0417cqi (15px), which doesn't match */
  }

  /* ==============================================
     5. HOW WE BUILD YOUR BRAND
     ============================================== */
  .branding-steps-section {
    width: 100%;
    padding-top: 9.5139cqi;
    /* 137/1440 - was 10.7639cqi (155px). A direct metadata fetch on this
       exact frame (3541:3954) gives its real top as y=3666, not the 3684
       estimated earlier - gallery bottom (3529) to 3666 = 137px. */
    padding-bottom: 9.5139cqi;
    /* 137/1440 - was 8.3333cqi (120px). Frame bottom (3666+651=4317) to the
       pre-footer's top (4455) = 138px, matching the top gap almost exactly -
       set to the same 137px for the intended symmetric spacing. */
    display: flex;
    justify-content: center;
    background-color: #f4f5f5;
  }

  .branding-steps-container {
    width: 60.3472cqi;
    /* 869/1440 */
  }

  .branding-steps-heading {
    margin: 0 0 5.5556cqi;
    /* 80/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 3.75cqi;
    /* 54/1440 */
    line-height: 4.0972cqi;
    letter-spacing: 0.01em;
    color: #263238;
    text-align: center;
  }

  .branding-steps-grid {
    display: flex;
    flex-direction: column;
    gap: 4.8611cqi;
    /* 70/1440 */
  }

  .branding-steps-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
  }

  .branding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1111cqi;
    /* 16/1440 - the number-to-pill gap (Figma groups these two together,
       node 3506:1428); was 1.3889cqi (20px), which is actually the gap
       between that group and the description below, not this one. See
       .branding-step-desc for how the 20px gap is restored there instead. */
    width: min-content;
    min-width: 19.5139cqi;
    /* 281/1440 minimum (Figma). min-content = the one-line pill's width, so
       a long label ("Content Optimisation") widens its own column instead of
       spilling out of it; the description still wraps within that width. */
    flex-shrink: 0;
  }

  .branding-step-number {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 4.1667cqi;
    /* 60/1440 */
    line-height: 4.0972cqi;
    letter-spacing: 0.01em;
    color: #ffa726;
  }

  .branding-step-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 15.2083cqi;
    /* 219/1440 minimum (Figma) - was a fixed width, so longer labels on the
       other service pages ("Content Optimisation", "Launch & Optimise")
       wrapped to 2 lines inside it. Now it grows with its text: one line
       always, with 24/1440 side padding. */
    padding: 0 1.6667cqi;
    white-space: nowrap;
    height: 4.3056cqi;
    /* 62/1440 */
    background: #ffffff;
    border: 0.2431cqi solid #ffa726;
    border-radius: 3.6806cqi;
    box-sizing: border-box;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 1.8056cqi;
    /* 26/1440 */
    color: #0b0b0b;
  }

  .branding-step-desc {
    margin: 0.2778cqi 0 0;
    /* 4/1440 - on top of the column's own 16px gap, this restores the full
       20px Figma gives specifically between the number+pill group and the
       description (the two gaps differ in Figma; flexbox gap can't apply
       two different values, so the smaller one is the base and this adds
       the difference back for just this one edge). */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.5278cqi;
    /* 22/1440 */
    line-height: 2.2222cqi;
    color: #0b0b0b;
    text-align: center;
  }

  .branding-step-arrow {
    flex-shrink: 1;
    min-width: 6.9444cqi;
    /* 100/1440 - a wider pill column takes its space from this connector
       (236px by default) rather than pushing the row past its container. */
    align-self: flex-start;
    /* was align-self:center, which centred it on the whole row's height
       (driven by whichever step is tallest) instead of a fixed offset from
       the row's own top - wrong reference point entirely. */
    margin-top: 3.3299cqi;
    /* 47.95/1440 - Figma's arrow (node 3506:1431) sits at y=59px from the
       top of the step group with the arrow itself visually spanning
       47.95-70.05 (a 0-height baseline at 59px, expanded +/-11.05px by its
       own inset), i.e. centred exactly on y=59 - which lands right at the
       bottom edge of the "01"/"02" number text, well above the pill centre.
       Previously guessed as centred on the pill instead (~107px), which put
       the whole arrow about 48px too low. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.3889cqi;
    /* 236/1440 */
    height: 1.5347cqi;
    /* 22/1440 */
  }

  .branding-step-arrow-img {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Declared after .branding-step-arrow so it wins at equal specificity -
     only bridges rows on mobile, where every step stacks in one column */
  .branding-step-arrow-connector {
    display: none;
  }

}

/* End Desktop Media Query */

/* ==============================================
   MOBILE STYLES (Max-width: 991px)
   ============================================== */
@media (max-width: 767px) {

  /* UNIVERSAL MOBILE INTRO OVERRIDES */
  .social-intro-left {
    gap: 11px !important;
  }

  .social-intro-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .social-intro-desc {
    max-width: 352px !important;
    line-height: 22px !important;
    /* Force explicit figma text bound */
  }

  /* NOTE: this used to have a second, near-duplicate set of rules for
     .branding-hero-breadcrumb / .branding-hero-text-container / -title /
     -subtitle right here ("UNIVERSAL MOBILE BREADCRUMB OVERRIDES"), from
     before this page had its own precise mobile values. Removed - it was
     silently live and conflicting with the real rules further down (which
     already redeclare all of these correctly): its breadcrumb `gap: 11px
     !important` was actually WINNING over the correct `gap: 8px` set later
     (an earlier !important beats a later non-!important declaration
     regardless of source order), so the breadcrumb was rendering with the
     wrong gap despite the "fixed" value sitting right there in the file.
     Everything else in the removed block was either an exact duplicate or
     equivalent to the CSS default (margin-left:0, opacity:1, object-fit:
     fill), so nothing else changes by deleting it. */

  .branding-hero {
    position: relative;
    width: 100%;
    height: 100svh;
    /* Explicit height to prevent stretching past one viewport */
    min-height: 500px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Changed from flex-end */
  }

  .branding-hero .hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .branding-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 2;
  }

  .branding-hero-content {
    position: relative;
    z-index: 3;
    /* This page's content block is short (179px), so sitting at Home's 201px
       left the lower half of the hero empty. Centred slightly above the
       middle instead: block centre at 45% of the 852px hero = 383px, so
       top = 383 - 179/2 = 294px. Hero height here is a fixed 852px at any
       phone height, so a fixed px value holds 45% everywhere.
       Only the start moved - all inner gaps are untouched. */
    padding: 294px 24px 40px 24px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    /* Needed so the breadcrumb's position:absolute (see .branding-hero-
       breadcrumb) resolves against the hero's real height, not just this
       element's own shorter, content-sized height. */
    box-sizing: border-box;
  }

  .branding-hero-text-container {
    /* Bottom-anchored instead of flowing down from the 294px padding-top:
       the CTA below is pinned at top:435px, so a title that wraps to 2+
       lines (e.g. "Lead & Demand Generation") must grow UPWARD or it runs
       into the button. Bottom edge stays at 377px (294 + 43 title + 10 gap
       + 30 subtitle, the original single-line position), keeping the same
       58px gap to the CTA for any title length. left/right 24px bound the
       width so wrapped text never touches the screen edge. */
    position: absolute;
    left: 24px;
    right: 24px;
    top: auto;
    bottom: calc(100% - 377px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    /* Figma gap is 10px */
  }

  .branding-hero-title {
    font-family: "Mona Sans", sans-serif;
    font-weight: 700;
    /* "Branding & Design" at the Figma 34.2px spec is 324px wide, but the
       320/360px-wide phones only have 272/312px available (24px padding
       each side) - it was wrapping to 2 lines there. clamp() keeps the
       full 34.2px size (matches Figma) from ~393px up, where it already
       fits, and only shrinks below that down to a measured-safe ~26.8px
       at 320px. white-space:nowrap is a hard guarantee on top of the
       sizing, not a substitute for it - sizing alone keeps it from
       overflowing past the viewport edge, which nowrap alone wouldn't. */
    font-size: clamp(26px, 8.7vw, 34.2px) !important;
    line-height: 1.2573 !important;
    /* 43/34.2 - unitless so it scales proportionally with the clamped size */
    letter-spacing: 0.02em;
    color: #ffffff;
    margin: 0;
    text-align: left;
    /* Was nowrap - fine for "Branding & Design" but longer titles on the
       other service pages ("Social Media Marketing", "Lead & Demand
       Generation") ran past the right edge. Wraps within the container's
       24px side gutters instead. */
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .branding-hero-subtitle {
    font-family: "Mona Sans", sans-serif;
    font-weight: 600;
    font-size: 16px !important;
    line-height: 30px !important;
    color: #ffa726;
    margin: 0;
    text-align: left;
  }

  /* Breadcrumb Mobile - independently positioned near the bottom of the
     hero (Figma node 3548:3977, y=622 of a 680-tall frame), well below the
     CTA button (~y=371-408) - was still grouped inside .branding-hero-content
     right after the title block with only a 60px gap, which put it ABOVE
     the CTA instead of below it. Pulled out of that flow with
     position:absolute so it can sit at its own correct spot regardless of
     the title block's height/position. */
  .branding-hero-breadcrumb {
    position: absolute;
    left: 24px;
    bottom: 29px;
    /* Figma: hero bottom (680) - breadcrumb's own bottom edge (622+29=651)
       = 29px clear space beneath it. */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }

  .branding-hero-breadcrumb a,
  .breadcrumb-current-wrapper .current {
    font-family: "Mona Sans", sans-serif;
    font-weight: 400;
    font-size: 13px !important;
    line-height: 29px !important;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-decoration: none !important;
  }

  .breadcrumb-icon {
    width: 23px !important;
    height: 15px !important;
  }

  /* ==============================================
     2. INTRO SECTION (MOBILE)
     ============================================== */
  .social-intro-section {
    background-color: #FFFFFF !important;
    padding-top: 60px !important;
    padding-bottom: 34px !important;
  }

  .social-intro-container {
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  .social-intro-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .social-intro-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px !important;
  }

  .social-intro-bar {
    width: 4px !important;
    height: 31px !important;
    background-color: #FFA726 !important;
  }

  .social-intro-heading {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    margin: 0 !important;
    width: auto !important;
  }

  .social-intro-right {
    width: 100% !important;
  }

  .social-intro-desc {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    letter-spacing: 0.01em !important;
    color: #0B0B0B !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 2a. INTRO SECTION (MOBILE) */
  .branding-intro-section {
    background-color: #FFFFFF !important;
    padding-top: 41px !important;
    /* Hero (node 3548:3971, 680 tall at y=0) to this intro frame (node
       3548:4092, y=721) = 41px - was 60px, a stale guess from before this
       was measured directly against Figma. */
    padding-bottom: 0 !important;
    /* Was 34px - .branding-cards-section right after it ALSO has its own
       46px padding-top, and since both sections share the same white
       background there's no visual seam between them, so those two
       paddings just stacked into one 80px gap (34+46) between the intro
       paragraph and "Where Great Brands Begin" - Figma's actual gap here
       (node 3548:4092 bottom to 3548:4123 top) is 46px total. Zeroing this
       one out leaves the cards section's own 46px top padding as the
       full, correct gap. */
  }

  .branding-intro-container {
    width: 100% !important;
    padding-left: 21px !important;
    padding-right: 21px !important;
    /* 21px, matching Figma's frame inset (x=21 of the 393-wide page) -
       was 24px, a generic guess from the copied pattern. */
    box-sizing: border-box !important;
  }

  .branding-intro-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .branding-intro-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px !important;
  }

  .branding-intro-bar {
    width: 4px !important;
    height: 31px !important;
    display: block !important;
  }

  .branding-intro-heading {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    margin: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  .branding-intro-right {
    width: 100% !important;
  }

  .branding-intro-desc {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    letter-spacing: 0.01em !important;
    color: #0B0B0B !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 352px !important;
  }

  /* Hero "SPEAK TO AN EXPERT" pill (mobile) — full redeclare, this class
     has no unscoped base rule, only the desktop block above defines one.
     Figma (node 3548:4303) spec: width 219, height 37, border-radius 29,
     background #FFFFFF, left 24. The box was previously positioned with
     top/right/bottom/left PERCENTAGES of the 100svh hero - since this
     hero's real height (~852px on typical phones) never matches Figma's
     680px reference frame, that produced a 46px-tall button (too tall) and
     an 88px gap to the text block above it instead of the requested 58px.
     Fixed px now, matching this hero's existing convention (padding-top:
     294px on .branding-hero-content, breadcrumb's bottom:29px are fixed
     too, not percentage-derived) - measured text block bottom (377px from
     hero top at 390x844) + 58px gap = 435px. Icon is 30x30 sitting ~3px
     from the left edge, text starts 44px from the left - an asymmetric,
     left-packed layout, not a centered icon+text block. */
  .branding-hero-cta {
    position: absolute !important;
    left: 24px !important;
    right: auto !important;
    top: 435px !important;
    bottom: auto !important;
    width: 219px !important;
    height: 37px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    /* 44 (text start) - 3 (icon left) - 30 (icon width) = 11 */
    background: #ffffff !important;
    border-radius: 29px !important;
    padding: 0 14px 0 3px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }

  .branding-hero-cta .icon-circle {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .branding-hero-cta .btn-text {
    font-family: "Inter", sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.14px !important;
    color: #1b3834 !important;
    white-space: nowrap;
  }

  /* ==============================================
     3. WHERE GREAT BRANDS BEGIN (MOBILE CARD GRID)
     ============================================== */
  .branding-cards-section {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    padding: 46px 41px 33px !important;
  }

  .branding-cards-container {
    width: 100% !important;
    padding: 0 !important;
  }

  .branding-cards-heading {
    margin: 0 auto 33px !important;
    /* Was max-width:199px - sized so "Where Great Brands Begin" splits into
       Figma's 2 lines, but it forced longer headings on the other service
       pages ("Why Our Leads Convert Better", "SEO & GEO Transforms Sales")
       into 3. Full width + balance lets every heading use 2 even lines. */
    max-width: 100% !important;
    text-wrap: balance;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(24px, 7.13vw, 28px) !important;
    /* Figma 28px from ~393px up; eases down to 24px on the narrowest phones
       so longer headings still fit 2 lines at 320px. */
    line-height: 1.107 !important;
    /* 31/28 - unitless so it scales with the clamped size */
    letter-spacing: 0.01em !important;
    color: #263238 !important;
    text-align: center !important;
  }

  .branding-cards-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .branding-card {
    box-sizing: border-box;
    border: 2px solid #ffa726 !important;
    border-radius: 15px !important;
    padding: 20px !important;
    /* Real padding on all 4 sides now (was 0 top/bottom, faked via a fixed
       min-height per card pair instead - see below). This page's own 4
       cards happened to fit a Figma-exact paired-height look (197px for
       cards 1-2, 234px for cards 3-4), but that only worked for THIS
       page's specific text lengths - a different service page reusing this
       same template with longer or shorter card copy needs the box to
       genuinely grow/shrink with its own content, not clip against or
       float inside a height tuned to a different page's words. Real
       padding keeps the gap above/below the text constant regardless of
       how many lines it wraps to, on any page. */
    display: flex !important;
    flex-direction: column !important;
    gap: 21px !important;
  }

  .branding-card-title {
    margin: 0;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 23px !important;
    line-height: 30px !important;
    color: #ffa726 !important;
    /* One rule for every card, on every service page. Previously cards 1-2
       were white-space:nowrap with per-card font-size clamps tuned to the
       Branding page's own words, so longer titles on the other pages
       ("Become the Brand Everyone Talks About", "Found Everywhere Your
       Customers Search") ran past the card's right border. Now every title
       wraps at the card edge; an editor's ACF line break is output as a
       real <br> by page-service.php (nl2br), so it no longer needs
       pre-line. break-word covers a single over-long word. */
    white-space: normal !important;
    overflow-wrap: break-word;
    min-width: 0;
  }

  .branding-card-divider {
    display: block;
    width: 89px !important;
    height: 2px !important;
    background-color: #ffa726;
  }

  .branding-card-desc {
    margin: 0;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: #0b0b0b !important;
  }

  /* ==============================================
     4. DESIGN & PRODUCTION (MOBILE)
     ============================================== */
  .branding-production-section {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background-color: #e9eaeb !important;
    padding: 39px 30px 36px !important;
    /* was 33px 30px 45px. Figma (node 3548:4124, 392x480): heading top=39px
       (not 33), and section bottom - CTA bottom (480-444.3=35.7) = 36px
       (not 45). Left/right 30px was already correct (list is 333px wide,
       centered in the 392px-wide frame: (392-333)/2=30). */
    box-sizing: border-box;
  }

  /* Same missing-rules bug as the desktop container (see the desktop block's
     own comment) - never had a mobile equivalent added, so the button sat
     flush-left inside the list's own (narrower) box instead of centering on
     the section like the heading does. */
  .branding-production-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .branding-production-heading {
    margin: 0 0 28px !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 28px !important;
    letter-spacing: 0.01em !important;
    color: #263238 !important;
    text-align: center !important;
  }

  .branding-production-list {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  .branding-production-cta {
    margin-top: 46px !important;
    /* was 20px. Figma: list bottom (95+260=355) to CTA top (401.05) = 46px. */
    flex-shrink: 0;
    /* Was a fixed 231px width sized to fit only the default "SPEAK TO AN
       EXPERT" text exactly - a longer ACF-entered CTA text visibly
       overflowed past the button (caught via a real ACF update_field()
       audit, not assumed). Auto-sizing to content instead. */
    height: 43px !important;
    /* Figma node 3548:4353 is 231x43.24 - was unset (derived from 8px
       vertical padding + a 32px icon = 48px), same "box too tall" issue as
       the hero CTA button. */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    /* icon left(5) + icon width(32) + gap = text start(44.1) -> gap ~7 */
    background: #ffa726 !important;
    border-radius: 29px !important;
    padding: 0 16px 0 5px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    /* justify-content:flex-start + a fixed left/right padding instead of
       centered content - Figma's icon sits 5px from the left edge, not
       centered as one block with the text (same left-packed layout as the
       hero CTA button, node 3548:4303). */
  }

  .branding-production-cta .icon-circle {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    /* Without this, the flex row (button is only 231px wide, and "SPEAK TO
       AN EXPERT" at 16px doesn't leave much room) squeezed the icon down
       to ~18px wide instead of respecting the 32px set above - caught by
       measuring the actual rendered width, not assumed from the CSS alone.
       Was also accidentally shared with .branding-hero-cta .icon-circle at
       32x29.71 (a value borrowed from a third, unrelated component) - that
       combined selector was also silently overriding the hero button's own
       correct 22x22 mobile icon rule declared earlier in this file, since
       this one comes later and wins at equal specificity. Figma's actual
       icon for this button (node 3548:4354) is a plain 32x32 square, not
       29.71 tall - and the hero icon needed its own separate rule back. */
  }

  .branding-production-cta .btn-text {
    font-family: "Inter", sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: #ffffff !important;
    white-space: nowrap;
  }

  /* Shared pill row (mobile) — full redeclare */
  .branding-pill {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 40px !important;
    background: #ffffff !important;
    border: 2px solid #ffa726 !important;
    border-radius: 53px !important;
    padding-left: clamp(46px, 15.0127cqi, 59px) !important;
    /* Figma's pill text (e.g. node 3548:4340) starts at x=61 from the pill's
       outer edge - with box-sizing:border-box, the 2px border sits outside
       the padding, so padding-left needs to be 61-2=59, not 61 directly
       (tried 61 first, which measured out to 63px total - overshot).
       Fluid below the 393px reference (15.0127cqi = 59/393) so the pill
       keeps proportionally the same free width for text on narrower phones
       instead of losing it all to the fixed section side-padding - that
       loss was what made "Project Branding & Collaterals" wrap to 2 lines
       at 320-360px even before white-space:nowrap was added below. Clamped
       to 59px so nothing changes at/above the 393px reference width. */
    box-sizing: border-box;
  }

  .branding-pill-icon {
    position: absolute !important;
    left: -1px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    /* image comes from the inline style (Service page -> Production -> Pill Icon, default branding-pill-icon.svg);
       this used to be a background shorthand with the default url + !important, which hid the admin image on mobile */
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  .branding-pill-text {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(13px, 4.0712cqi, 16px) !important;
    color: #0b0b0b !important;
    white-space: nowrap !important;
    /* Figma (node 3548:4340 etc.) sets whitespace-nowrap on this text itself -
       it's meant to always be one line. Left as auto-wrap before, it broke
       to 2 lines for the two longest labels at 320-360px viewports. Paired
       with the fluid padding-left above so the text shrinks together with
       its available room instead of overflowing past the pill's edge. */
  }

  /* ==============================================
     PORTFOLIO GALLERY (MOBILE)
     ============================================== */
  .branding-gallery-section {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    /* Figma node 3560:4358 - was #f4f5f5, a copied-pattern guess */
    padding: 33px 37px 0 !important;
  }

  .branding-gallery-container {
    width: 100% !important;
  }

  .branding-gallery-img {
    display: block;
    /* Natural size, only scaled down when wider than the container (same as desktop) */
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    height: auto !important;
    /* Was also aspect-ratio:1808/1060 !important - same fix as desktop,
       see that rule's comment. Removing it here too so a differently-
       shaped image uploaded on another service page isn't distorted or
       letterboxed on mobile either. */
    object-fit: contain !important;
    border-radius: 0 !important;
  }

  /* ==============================================
     5. HOW WE BUILD YOUR BRAND (MOBILE)
     ============================================== */
  .branding-steps-section {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    /* Figma node 3560:4427 - was #f4f5f5, a copied-pattern guess */
    padding: 61px 56px 42px !important;
    /* Was 60px - full-page frame (3548:3970) gives the last step's content
       bottom at y=3833 and the pre-footer's top at y=3875 = 42px, not 60. */
  }

  .branding-steps-container {
    width: 100% !important;
  }

  .branding-steps-heading {
    margin: 0 auto 33px !important;
    max-width: 199px !important;
    /* Figma (node 3560:4359) sets this text box to a fixed 199px, forcing
       the break after "Build" - "How We Build / Your Brand". Left
       unconstrained before, so the browser wrapped wherever the full
       container width allowed, giving a DIFFERENT break ("How We Build
       Your / Brand") on wider phones (414-430px) than on narrower ones
       (320-375px) - same text, inconsistent look across screens. */
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 31px !important;
    letter-spacing: 0.01em !important;
    color: #263238 !important;
    text-align: center !important;
  }

  .branding-steps-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 19px !important;
    /* The connector arrow between step 02 and 03 (.branding-step-arrow-
       connector) sits directly in this grid, not inside a .branding-steps-
       row - without align-items:center here it defaulted to stretch/flex-
       start, so that one arrow (fixed at 22px wide) sat flush against the
       LEFT edge of the full-width grid instead of centered like the other
       two arrows, which get centered by .branding-steps-row's own
       align-items:center. */
  }

  .branding-steps-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 19px !important;
    width: 100% !important;
  }

  /* On mobile every step stacks in one column, so the connector between
     rows becomes a real, visible arrow too - not just decorative padding */
  .branding-step-arrow-connector {
    display: flex !important;
  }

  .branding-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 7px !important;
  }

  .branding-step-number {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 40px !important;
    line-height: 59px !important;
    letter-spacing: 0.01em !important;
    color: #ffa726 !important;
  }

  .branding-step-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 113px !important;
    /* Figma width is now the minimum; the pill grows with its label and
       stays on one line (was a fixed 113px). */
    padding: 0 20px !important;
    white-space: nowrap !important;
    height: 40px !important;
    background: #ffffff !important;
    border: 1.5px solid #ffa726 !important;
    border-radius: 53px !important;
    box-sizing: border-box;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #0b0b0b !important;
  }

  .branding-step-desc {
    margin: 13px 0 0 !important;
    /* .branding-step's flex `gap: 7px` already gives every child pair 7px
       (correct for number-to-pill, Figma 66-59=7). Pill-to-description is
       actually 20px in Figma (text y=126, pill block bottom=106) - this
       adds the remaining 13px (20-7) on top of the inherited gap instead
       of changing the shared gap value, which would have thrown off the
       number-to-pill spacing above it. */
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 25px !important;
    color: #0b0b0b !important;
    text-align: center !important;
  }

  .branding-step-arrow {
    flex-shrink: 0;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 59px !important;
    overflow: visible;
  }

  /* Wrapper reserves the ROTATED footprint (22 wide x 59 tall); the img
     keeps the arrow's own natural horizontal proportions and is what
     actually rotates, so it renders correctly centered instead of
     stretched/distorted or overflowing its reserved space. */
  .branding-step-arrow-img {
    display: block !important;
    width: 59px !important;
    height: 22px !important;
    transform: rotate(90deg);
    content: url("../assets/images/branding-step-arrow-mobile.svg") !important;
    /* The shared branding-step-arrow.svg file is the DESKTOP asset - its
       arrowhead sits inside a 237.5-wide canvas because desktop's arrow is
       a long horizontal connector between columns (236px, no rotation).
       Reusing it here at a fixed 59x22 box (preserveAspectRatio="none" on
       the file itself) squeezed that whole 237.5-wide canvas down ~4x
       horizontally, shrinking the arrowhead chevron to a barely-visible
       sliver - the "arrow head not seeing" bug. This mobile-only file has
       the identical shape traced at the actual 60.5-wide canvas mobile
       needs, so the ~59px box barely scales it at all and the head renders
       at full size. */
  }

  /* ==============================================
     8. FAQ OVERRIDES (MOBILE)
     ============================================== */
  .branding-page-body .faq-mobile-container {
    padding: 0 22.5px !important;
    gap: 36px !important;
  }

  .branding-page-body .faq-mobile-header {
    gap: 9px !important;
  }

  .branding-page-body .faq-mobile-bar {
    width: 2px !important;
    height: 22px !important;
  }

  .branding-page-body .faq-mobile-label {
    font-size: 20px !important;
    line-height: 30px !important;
  }

  .branding-page-body .faq-mobile-list {
    gap: 9px !important;
  }

  .branding-page-body .faq-mobile-item {
    padding-top: 10px !important;
    padding-bottom: 21px !important;
  }

  .branding-page-body .faq-mobile-question-text {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .branding-page-body .faq-mobile-answer p {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .branding-page-body .faq-mobile-item.active .faq-mobile-answer {
    margin-top: 12px !important;
  }

  /* ==============================================
     9. PRE-FOOTER OVERRIDES (MOBILE) — Figma node 2468:6072
     Was a full fixed-height/absolute-position override (top/left offsets
     for the title and button) - the shared base (style-v2.css) now handles
     the box's height, spacing and button layout dynamically for every
     page, this one included. Kept: the genuine design differences this
     page's Figma spec has that the shared default doesn't - a wider max
     wrap-width, uppercase styling, and its own slightly larger type size. */
  .branding-page-body .pre-footer-title {
    max-width: calc(100% - 45px) !important;
    font-size: 36px !important;
    line-height: 46px !important;
    text-transform: uppercase !important;
  }

}

/* End Mobile Media Query */

/* ==============================================
   GLOBAL OVERRIDES FOR BRANDING PAGE
   ============================================== */
@media (min-width: 768px) {
  .branding-page-body .faq-section {
    background-color: #E9EAEB !important;
    padding: 3.75cqi 0 2.2222cqi !important;
    /* Was 81/1440 top, 65/1440 bottom - a full-page metadata fetch on the
       actual desktop frame (3499:628) gives: pre-footer bottom (4709) to
       the "Have Questions?" bar top (4763) = 54px, and the FAQ list's
       bottom (5355) to the divider (5408) = 53px total. Top: 54/1440 =
       3.75cqi, no stacking issue (the label-wrap has no margin of its
       own). Bottom: same "last item keeps its own padding" issue as the
       mobile FAQ fix - .faq-item:last-child keeps a 21px padding-bottom,
       so this needed 53-21=32px, not the full 53: 32/1440 = 2.2222cqi. */
    display: flex !important;
    justify-content: center !important;
  }

  .branding-page-body .faq-section .faq-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.3889cqi !important;
    /* 20/1440 (Figma 20px gap) */
  }

  .branding-page-body .faq-section .faq-item {
    padding: 0.6944cqi 0 1.4583cqi !important;
    /* 10px 0 21px (Figma 10px top, 21px bottom) */
    border-bottom: 1px solid rgba(162, 162, 162, 0.32) !important;
  }

  .branding-page-body .faq-section .faq-item:last-child {
    border-bottom: none !important;
  }

  /* Pre-footer Overrides - was a full fixed-height/absolute-position
     override, same as mobile above; the shared base now handles sizing,
     centering and spacing dynamically. Kept: this page's own wider max
     wrap-width (matches every other page's own override to the same
     749/1440 value). */
  .branding-page-body .pre-footer-title {
    max-width: 52.0138cqi !important;
    /* 749/1440 */
  }
}

.branding-page-body .faq-section-mobile {
  background-color: #E9EAEB !important;
  padding-top: 47px !important;
  padding-bottom: 26px !important;
  /* Figma node 3548:3993 (x=23, y=47) - the shared rule in style-v2.css
     (:is(.services-page-body, ...) .faq-section-mobile) uses 56px/50px,
     tuned for other pages, not this one's own Figma spec - both gaps here
     (pre-footer to FAQ, FAQ to the .faq-footer-divider line) should be
     47px. Top matches directly (no stacking). Bottom needed 47 - 21: the
     last FAQ item (.faq-mobile-item:last-child) drops its border but
     keeps its own padding-bottom:21px, so that 21px was stacking on top
     of this section's own padding-bottom - 47px here read as 68px total,
     the same "two paddings stacking" issue as the intro section above. */
}

.branding-page-body .faq-section .faq-container {
  margin: 0 !important;
}

/* =============================================================
   TABLET (768-1199px)
   Breadcrumb floor. These per-page files load after style-v2.css, so
   their own .*-hero-breadcrumb rules win over the shared floor there.
   ============================================================= */
@container (min-width: 768px) and (max-width: 1199px) {

  .social-hero-breadcrumb .breadcrumb-home,
  .social-hero-breadcrumb .current,
  .social-hero-breadcrumb a,
  .social-hero-breadcrumb .ws-breadcrumb-home,
  .branding-hero-breadcrumb .breadcrumb-home,
  .branding-hero-breadcrumb .current,
  .branding-hero-breadcrumb a,
  .branding-hero-breadcrumb .ws-breadcrumb-home,
  .services-hero-breadcrumb .breadcrumb-home,
  .services-hero-breadcrumb .current {
    font-size: max(12px, 1.25cqi);
  }

  /* Service page body copy (1.5277cqi -> 11.7px at 768) */
  .social-feature-desc,
  .social-success-item-desc,
  .social-services-item-text,
  .social-intro-desc,
  .branding-feature-desc,
  .branding-success-item-desc,
  .branding-intro-desc,
  .branding-card-desc,
  .branding-pill-text,
  .branding-step-desc {
    font-size: max(12px, 1.5277cqi);
  }
}

/* Service pages intro description - mobile uses Mona Sans like web (was
   Inter); mobile size, weight and line height unchanged. */
@media (max-width: 767px) {
  .branding-intro-desc {
    font-family: 'Mona Sans', sans-serif !important;
  }
}

/* ==========================================================================
   SEO heading structure - Branding & Design (client sheet, 2026-10-05): tags changed, design unchanged.
   page-service.php ($seo_bd) turned these spans into headings. New h3s would pick up Bootstrap/global heading
   defaults (margin-bottom .5rem, heading font, weight 500, line-height 1.2, size, colour) the spans never had ->
   inherit like the span did. :where() = tag-level priority, so every class rule still wins exactly as before.
   FAQ h2/h3 (.faq-mobile-label / .faq-mobile-question-text) reuse the existing reset in style-v2.css.
   ========================================================================== */
h3:where(.branding-pill-text),
h3:where(.branding-step-heading) {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* "01" + "Discover" are one h3, but stay two separate items of the .branding-step flex column */
h3:where(.branding-step-heading) {
  display: contents;
}

/* Card title whose mobile wording differs from the web one: drawn from data-alt, so the heading reads once */
.sold-alt-text::before {
  content: attr(data-alt);
  white-space: pre-line;
}