/* 
  ==============================================
  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;
  }

  /* 2026-10-06 redesign - Figma "Wireframe - 1" (node 4142:2262, 1440 x 825). The hero still fills the screen
     (100vh, so the next section never shows); horizontal sizes are Figma px / 1440 (cqi) so they scale with the
     screen width like the rest of the site; vertical: the title block sits at Figma's 324/825 = 39.27% of the hero
     height and the breadcrumb at Figma's 47px from the bottom. No CTA button in this design. */
  .branding-hero-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 0;
  }

  /* Title & Subtitle (4142:2263 / 4142:2276) */
  .branding-hero-text-container {
    position: absolute;
    top: 39.27%;
    left: 4.0972cqi;
    /* 59/1440 */
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 65.2778cqi;
    /* 940/1440 */
    margin: 0;
  }

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

  .branding-hero-subtitle {
    font-family: "Mona Sans", sans-serif;
    font-weight: 600;
    font-size: max(20px, 2.0833cqi);
    /* 30/1440 */
    line-height: 1;
    color: #ffa726;
    margin: 0.625cqi 0 0 0.2083cqi;
    /* 9/1440 below the title line box (ink matched to Figma's render); text frame 3px right of the title's (59 -> 62) */
  }

  /* Breadcrumb (4142:2266): left 70, bottom 825 - 778 = 47 */
  .branding-hero-breadcrumb {
    position: absolute;
    left: 4.8611cqi;
    /* 70/1440 */
    bottom: 3.2639cqi;
    /* 47/1440 */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5556cqi;
    /* 8px */
    margin-bottom: 0;
  }

  /* Figma gives "Home" and "Our Services" fixed frames (55 / 117 wide), which places the arrows */
  .branding-hero-breadcrumb .breadcrumb-home {
    min-width: 3.8194cqi;
    /* 55/1440 */
  }

  .branding-hero-breadcrumb .breadcrumb-services {
    min-width: 8.125cqi;
    /* 117/1440 */
  }

  /* hero button (Figma 4257:2136, added 2026-10-07): 309 x 52 at left 1070, 54 from the hero bottom (825 - 771);
     #F0EEEA, radius 29; icon 40 x 40 at 7 / 5; label Inter Medium 22/30 #1B3834 at 58.58, centred vertically */
  .branding-hero .branding-hero-cta {
    position: absolute;
    left: 74.3056cqi;
    /* 1070/1440 */
    right: auto;
    bottom: 3.75cqi;
    /* 54/1440 */
    width: 21.4583cqi;
    /* 309/1440 */
    height: 3.6111cqi;
    /* 52/1440 */
    padding: 0;
    gap: 0;
    display: block;
    background: #F0EEEA;
    border-radius: 2.0139cqi;
    /* 29/1440 */
    overflow: hidden;
    z-index: 4;
  }

  .branding-hero .branding-hero-cta .icon-circle {
    position: absolute;
    left: 0.4861cqi;
    /* 7/1440 */
    top: 0.3472cqi;
    /* 5/1440 */
    width: 2.7778cqi;
    /* 40/1440 */
    height: 2.7778cqi;
  }

  .branding-hero .branding-hero-cta .btn-text {
    position: absolute;
    left: 4.0683cqi;
    /* 58.58/1440 */
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.5278cqi;
    /* 22/1440 */
    line-height: 2.0833cqi;
    /* 30/1440 */
    letter-spacing: 0;
    color: #1B3834;
    white-space: nowrap;
  }

  .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
     ============================================== */


  /* 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: 5.5556cqi;
    /* 80/1440 - 2026-10-06 redesign (Figma 4142:2419 starts 80 below the 825 hero) */
    padding-bottom: 5.2778cqi;
    /* 76/1440 - Figma: intro bottom 1031 -> cards 1107 */
    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;
    /* 2026-10-13: fixed column = Figma 4142:2420 width (285/1440, the Branding & Design label) so a longer
       heading wraps to the next line inside it instead of pushing the description off screen (Social Media
       Marketing ran to 1474 at 1440), and the description starts at the Figma 420 on every service page. */
    flex: 0 0 19.7917cqi;
    width: 19.7917cqi;
    position: relative;
    padding-left: 1.0417cqi;
    /* 15/1440 = bar 4 + Figma gap 11 (the bar is positioned, below) */
  }

  .branding-intro-bar {
    /* 2026-10-13: the bar runs the FULL heading height (2 lines -> covers both): pinned to the heading's box + 2.6/1440
       above and below, so one line = 30 + 5.19 = the Figma 35.19 bar centred on the label (4142:2420). Positioned
       (not a flex item) so the SVG's own 36px size can't change the height; drawn as an orange strip because the
       SVG's 4x36 drawing can't stretch (viewBox keeps its shape). */
    position: absolute;
    left: 0;
    top: -0.1802cqi;
    height: calc(100% + 0.3604cqi);
    /* -2.6/1440 above, heading height + 5.19/1440 (an SVG ignores top + bottom stretching, so an explicit height) */
    width: 0.2778cqi;
    /* 4/1440 */
    display: block;
    background-color: #FFA726;
    border-radius: 0.1389cqi;
    /* 2/1440 = the SVG rect's rx */
  }

  .branding-intro-bar rect {
    display: none;
  }

  .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;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: -1.3889cqi;
    /* -20/1440: the Figma label (Branding & Design) is exactly the 285 column, so sub-pixel / other-browser font
       widths would wrap it; it may use 20 of the 75 gap (55 still clear) before going to the next line */
    overflow-wrap: anywhere;
    /* wraps at the column end (was white-space: nowrap) */
  }

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

  .branding-intro-desc {
    width: 68.2639cqi;
    /* 983/1440 - 2026-10-06 redesign (Figma 4142:2436); wider than the right column on purpose, as in Figma */
    max-width: none;
    flex-shrink: 0;
    /* 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;
  }


  /* ==============================================
     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-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 */
  }
}

/* End Desktop Media Query */

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


  /* 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. */

  /* 2026-10-13 mobile redesign (Figma 4380:3256): hero = the 393 x 680 frame, every size in vw (Figma px / 393) so
     every phone width shows the same layout scaled (was 852px from the site-wide mobile .hero-section rule in
     style-v2.css - two classes here so it wins for the service hero only). */
  .hero-section.branding-hero {
    position: relative;
    width: 100%;
    height: 100vh !important;
    height: 100svh !important;
    min-height: 130vw !important;
    /* 2026-10-15 user: the hero = exactly the VISIBLE phone screen, top to bottom with the breadcrumb, no scrolling
       (852px was taller than a real phone's screen once the browser bars take their space). svh = the height with the
       browser bars shown (vh fallback for old browsers). min 130vw (511 at 393): title/CTA end at 105vw, so a very short
       screen (phone turned sideways) keeps a gap above the bottom-anchored breadcrumb instead of overlapping it. */
    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;
    /* Title block, breadcrumb and CTA are all positioned (below), so no padding (was 294px top for the 852 hero). */
    padding: 0;
    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 {
    /* Figma 4380:3257: title 246..289 + subtitle 289..319, no gap. Bottom-anchored at 319 so a title that wraps
       to 2+ lines (e.g. "Lead & Demand Generation") grows UPWARD and keeps the Figma 58 gap to the CTA at 377.
       left/right 24 bound the width (Figma block 325 wide at x 23). */
    position: absolute;
    left: 6.1069vw;
    right: 6.1069vw;
    /* 24/393 */
    top: auto;
    bottom: 53.0882%;
    /* 2026-10-15 (user: the hero must look the same on every phone): Figma 319 of the 680 frame = 46.91% of the hero
       height (was 319/393 vw, so the empty space under the CTA changed from phone to phone) */
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* Figma 4380:3257 has no gap (was 10px) */
  }

  .branding-hero-title {
    font-family: "Mona Sans", sans-serif;
    font-weight: 700;
    font-size: 8.7023vw !important;
    /* 34.2/393 (was clamp px) */
    line-height: 10.9415vw !important;
    /* 43/393 */
    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: 4.0712vw !important;
    /* 16/393 */
    line-height: 7.6336vw !important;
    /* 30/393 */
    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: 6.1069vw;
    right: 6.1069vw;
    /* 24/393 */
    bottom: 4.2647%;
    /* Figma 4380:3265: hero bottom (680) - breadcrumb bottom (651) = 29/680 of the hero height (was 29/393 vw) */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2.0356vw;
    /* 8/393 */
    flex-wrap: wrap;
  }

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

  .breadcrumb-icon {
    width: 5.8524vw !important;
    height: 3.8168vw !important;
    /* 23 x 15 /393 */
  }

  .branding-hero-breadcrumb .breadcrumb-current-wrapper {
    font-size: 3.3079vw;
    line-height: 7.3791vw;
    /* 13 / 29 per 393 - its own fixed 16/24 line made the row 1-2px taller on small phones */
  }

  /* ==============================================
     2. INTRO SECTION (MOBILE)
     ============================================== */


  /* 2a. INTRO SECTION (MOBILE) */
  /* 2026-10-13 mobile redesign (Figma 4380:3275): every size in vw (Figma px / 393) so all phone widths show the
     393 layout scaled. Figma: frame 352 wide at x 21, 41 below the hero; bar 3.77 x 31 at x +1.24; heading 20/30
     SemiBold, text box from x +11.59, 2.14 below the bar top; description 52 below the frame top (Inter 16/22).
     The heading wraps inside the column and the bar runs its full height (like web). */
  .branding-intro-section {
    background-color: #FFFFFF !important;
    padding-top: 10.977vw !important;
    /* 43.14/393 = 41 hero gap + 2.14 bar-to-text offset (the bar is positioned 2.14 above the heading) */
    padding-bottom: 0 !important;
    /* the next section's own top padding is the gap */
    min-height: 40.458vw !important;
    /* 159/393 = 41 + Figma's intro frame 118 (2026-10-15 Figma: 721..839, 3-line text); longer text grows the section */
    box-sizing: border-box !important;
  }

  .branding-intro-container {
    width: 100% !important;
    padding-left: 5.3435vw !important;
    padding-right: 5.0891vw !important;
    /* 21 / 20 per 393: Figma's frame is 352 wide at x 21 (centred +0.5), so the text gets the full 352 (was 351 ->
       "buyers," dropped to a 4th line) */
    box-sizing: border-box !important;
  }

  .branding-intro-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5.0534vw !important;
    /* 19.86/393: heading text bottom (32.14) to description (52) */
  }

  .branding-intro-left {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    padding-left: 2.9491vw !important;
    /* 11.59/393: bar left -> heading text */
    margin-left: 0.3155vw !important;
    /* 1.24/393: bar inset in the Figma frame */
    box-sizing: border-box !important;
  }

  .branding-intro-bar {
    position: absolute !important;
    left: 0 !important;
    top: -0.5445vw !important;
    /* -2.14/393 */
    width: 0.9583vw !important;
    /* 3.766/393 */
    height: calc(100% + 0.2545vw) !important;
    /* one line: 30 + 1 = Figma 31; two lines: covers both */
    display: block !important;
    background-color: #FFA726 !important;
    border-radius: 0.5089vw !important;
    /* 2/393 */
  }

  .branding-intro-bar rect {
    display: none !important;
  }

  .branding-intro-heading {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 5.0891vw !important;
    /* 20/393 */
    line-height: 7.6336vw !important;
    /* 30/393 */
    color: #FFA726 !important;
    margin: 0 !important;
    width: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    /* wraps at the column end (was nowrap) */
  }

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

  .branding-intro-desc {
    font-family: 'Inter', sans-serif !important;
    /* Figma 4380:3277 says Inter, but the 2026-10-01 site-wide Mona Sans rule further down (1.5.52, live) wins */
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    /* 16/393 */
    line-height: 5.598vw !important;
    /* 22/393 */
    letter-spacing: 0.01em !important;
    color: #0B0B0B !important;
    margin: 0 !important;
    width: calc(100% + 1.0178vw) !important;
    max-width: none !important;
    /* 352 + 4 slack per 393: Figma's 2nd line ("estate design that builds trust, attracts buyers,") is exactly 352.0 wide
       in Mona Sans, so at 352 it dropped "buyers," to a 4th line; 4px slack = Figma's 3 lines in every browser */
  }

  /* 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. */
  /* 2026-10-13 (Figma 4380:3260): same pill in vw - top 377 (55.44% of 680), 219 x 37, radius 29, icon 30 at 3,
     text from 44 (20.09%). */
  .branding-hero-cta {
    position: absolute !important;
    left: 6.1069vw !important;
    /* 24/393 */
    right: auto !important;
    top: 55.4412% !important;
    /* 377/680 of the hero height (same proportion on every phone, was 377/393 vw) */
    bottom: auto !important;
    width: 55.7252vw !important;
    /* 219/393 */
    height: 9.4148vw !important;
    /* 37/393 */
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2.799vw !important;
    /* 11/393: 44 (text start) - 3 (icon left) - 30 (icon width) */
    background: #ffffff !important;
    border-radius: 7.3791vw !important;
    /* 29/393 */
    padding: 0 3.5623vw 0 0.7634vw !important;
    /* 14 / 3 */
    box-sizing: border-box !important;
    text-decoration: none !important;
  }

  .branding-hero-cta .icon-circle {
    width: 7.6336vw !important;
    height: 7.6336vw !important;
    /* 30/393 */
    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: 3.5623vw !important;
    /* 14/393 */
    line-height: 7.6336vw !important;
    /* 30/393 */
    letter-spacing: 0.01em !important;
    color: #1b3834 !important;
    white-space: nowrap;
  }


  /* ==============================================
     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-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;
  }


  /* ==============================================
     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. */
  /* 2026-10-13 mobile redesign (Figma 4380:3523, 393 x 328): same flow layout as the shared rule (title, then the
     button; a longer title adds lines and the section grows, paddings stay), with this frame's values in vw (Figma px
     / 393): title box 25 from the left / 10 from the right, text from 58.5 (3 lines of 46 centred in Figma's 179 box),
     50.5 to the button (247), button 239 x 39 at x 31, 42 below it. */
  .branding-page-body .pre-footer-inner {
    padding: 14.8855vw 2.5445vw 10.687vw 6.3613vw !important;
    /* 58.5 / 10 / 42 / 25 */
    gap: 12.8499vw !important;
    /* 50.5 */
  }

  .branding-page-body .pre-footer-title {
    max-width: none !important;
    font-size: 9.1603vw !important;
    /* 36 */
    line-height: 11.7048vw !important;
    /* 46 */
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    overflow-wrap: anywhere;
  }

  .branding-page-body .btn-pre-footer {
    margin-left: 1.5267vw !important;
    /* button at 31 (title at 25) */
    height: 9.9237vw !important;
    /* 39 */
    min-width: 60.8142vw !important;
    /* 239 (Figma's text box has ~10 spare after the words); longer button text grows it */
    padding: 0 1.4249vw 0 1.2723vw !important;
    /* right 5.6 / left 5 */
    gap: 2.4173vw !important;
    /* 9.5: icon end (37) -> text (46.5) */
    border-radius: 7.3791vw !important;
    /* 29 */
    box-sizing: border-box !important;
  }

  .branding-page-body .btn-pre-footer .icon-circle {
    width: 8.1425vw !important;
    height: 7.5573vw !important;
    /* 32 x 29.7 */
    border-radius: 6.1069vw !important;
    /* 24 */
  }

  .branding-page-body .btn-pre-footer .btn-text {
    font-size: 4.0712vw !important;
    /* 16 */
    line-height: 7.6336vw !important;
    /* 30 */
  }

  /* 2026-10-13 What Our Clients Say (Figma 4380:3406 / 4380:3446), service pages only: the shared section unchanged
     (card, stars, arrows, dots), heading on ONE line - ExtraBold 27, same gradient, in Figma's 39 box 36 below the
     timeline, card 5 below it (80). Home keeps its own 2-line 47px heading. */
  .branding-page-body .testimonials-section .container {
    height: auto !important;
    margin: 9.1603vw 0 1.2723vw 0 !important;
    /* 36 / 5 (this top margin merges with the section's 15 margin-top, so it is the full 36) */
  }

  .branding-page-body .testimonials-title {
    height: 9.9237vw !important;
    /* 39 */
    font-size: 6.8702vw !important;
    /* 27 */
    line-height: 12.9771vw !important;
    /* 51 */
    white-space: nowrap !important;
  }

  .branding-page-body .testimonials-title .mobile-break {
    display: none !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) {

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


/* =============================================================================================================
   SERVICE PAGE REDESIGN 2026-10-06 - 3. CARDS (Figma 4151:3664, 1039 x 606 grid, centred; section 767 at 1440)
   WEB only (>= 768). The section is exactly one screen under the 5cqi sticky navbar, so the next section never
   shows. --u = one Figma px: the width-based scale (100cqi/1440) unless the screen is too short for the 767px
   Figma section, then the height-based scale - same proportions either way, the whole grid just fits.
   ============================================================================================================= */
@media (min-width: 768px) {
  .sv-cards-section {
    --u: min(calc(100cqi / 1440), calc((100vh - 5cqi) / 819));
    --w: calc(100cqi / 1440);
    /* 2026-10-12: grid width = Figma 4151:3664 (1039 of 1440 -> 200.5 each side, same proportion on every screen width)
       and rows a little taller (320, was 294; user request); widths follow the screen WIDTH (--w), heights + text the
       one-screen scale (--u, 76 + 320 + 18 + 320 + 85 = 819), so the section still fits one screen */
    width: 100%;
    min-height: calc(100vh - 5cqi);
    /* min-height (was height): longer card text grows the section instead of being cut (2026-10-12) */
    padding: calc(76 * var(--u)) 0 calc(85 * var(--u));
    /* Figma: intro end -> grid 76, grid -> next section 85 */
    box-sizing: border-box;
    background: #F4F5F5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .sv-cards-grid {
    width: calc(1039 * var(--w));
    display: flex;
    flex-direction: column;
    gap: calc(18 * var(--u));
  }

  .sv-cards-row {
    display: flex;
    gap: calc(18 * var(--u));
    min-height: calc(320 * var(--u));
    /* 320 (Figma 294 + a little) = the minimum; a card with more text makes its row taller (both cards of a row stay the same height)
       and keeps its own top / bottom padding (2026-10-12) */
  }

  .sv-card {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: calc(21 * var(--u));
    display: flex;
    flex-direction: column;
    padding: calc(60 * var(--u)) calc(39 * var(--u)) calc(30 * var(--u));
  }

  /* 1: wide photo card (4142:2973) */
  .sv-card--1 {
    flex: 1 1 0;
    min-width: 0;
    padding-bottom: calc(29 * var(--u));
    /* Figma content is 265 in the 294 card (60 top) -> 29 below, so Figma-length text fits the 294 row exactly */
    background: #213239 center / cover no-repeat;
    align-items: flex-start;
  }

  /* 2: narrow orange card (4151:3643) */
  .sv-card--2 {
    width: calc(320 * var(--w));
    /* Figma 320 */
    flex-shrink: 0;
    background: #FFA726;
  }

  /* 3: narrow grey card (4151:3658) - 262px content centred in the card, as in Figma (so it starts at 29, not 39) */
  .sv-card--3 {
    width: calc(320 * var(--w));
    flex-shrink: 0;
    background: #E9EAEB;
    padding-top: calc(32 * var(--u));
    align-items: center;
    justify-content: center;
  }

  /* 4: wide dark card (4151:3652) */
  .sv-card--4 {
    flex: 1 1 0;
    min-width: 0;
    background: #213239;
    padding-top: calc(32 * var(--u));
    align-items: flex-start;
  }

  .sv-card-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
  }

  /* 2026-10-12 Figma update (4151:3664): every card's text column is the full card width inside its 39 side padding
     (cards 1 / 3 / 4 had fixed 438 / 262 / 480); longer text wraps inside it and grows the card - never overflows */
  .sv-card--1 .sv-card-inner {
    width: 100%;
    gap: calc(23 * var(--u));
  }

  .sv-card--2 .sv-card-inner {
    width: 100%;
    gap: calc(11 * var(--u));
  }

  .sv-card--3 .sv-card-inner {
    width: 100%;
    min-height: calc(223 * var(--u));
    gap: calc(11 * var(--u));
  }

  .sv-card--4 .sv-card-inner {
    width: 100%;
    gap: calc(23 * var(--u));
  }

  .sv-card-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(11 * var(--u));
  }

  /* icons, Figma boxes */
  .sv-card-icon {
    display: block;
    flex-shrink: 0;
    max-width: none;
    object-fit: contain;
    object-position: left center;
    /* contain (was fill): an icon uploaded in wp-admin keeps its own shape inside the Figma icon box */
  }

  .sv-card--1 .sv-card-icon {
    width: calc(38 * var(--u));
    height: calc(47 * var(--u));
  }

  .sv-card--2 .sv-card-icon {
    width: calc(40 * var(--u));
    height: calc(36 * var(--u));
  }

  .sv-card--3 .sv-card-icon {
    width: calc(28 * var(--u));
    height: calc(42 * var(--u));
  }

  .sv-card--4 .sv-card-icon {
    width: calc(28 * var(--u));
    height: calc(37 * var(--u));
  }

  /* text: Mona Sans, 1% letter-spacing; title 28 Bold, description 20 Regular */
  .sv-card-title {
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: calc(28 * var(--u));
    line-height: calc(34 * var(--u));
    letter-spacing: 0.01em;
    color: #FFFFFF;
  }

  .sv-card--1 .sv-card-title {
    line-height: calc(40 * var(--u));
  }

  .sv-card--3 .sv-card-title {
    color: #000000;
  }

  .sv-card--4 .sv-card-title {
    width: calc(290 * var(--u));
    /* Figma's 290px title box -> "Built for Today. / Ready for Tomorrow." */
  }

  .sv-card-desc {
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: calc(24 * var(--u));
    letter-spacing: 0.01em;
    color: #FFFFFF;
  }

  .sv-card--1 .sv-card-desc,
  .sv-card--4 .sv-card-desc {
    line-height: calc(28 * var(--u));
  }

  .sv-card--3 .sv-card-desc {
    color: #0B0B0B;
  }
}

/* -------------------------------------------------------------------------------------------------------------
   CARDS - MOBILE (< 768), 2026-10-14, Figma 4380:3303 (Branding mobile): 316 wide at x 39, 27 below the intro, 38
   above Design & Production; card 1 full width (photo, 208), cards 2 + 3 side by side (239), card 4 full width (198),
   8 gaps. Every size in vw (Figma px / 393) so all phones show the 393 layout scaled. Heights are minimums: longer
   text grows the card (cards 2 + 3 stay the same height). Same HTML as web: the two web rows become grid items.
   ------------------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .sv-cards-section {
    width: 100%;
    padding: 11.7048vw 9.9237vw 13.9949vw;
    /* 46 / 39 / 55 per 393 (2026-10-15 Figma: intro ends 839, cards 885..1546, Design & Production 1601) */
    box-sizing: border-box;
    background: #FFFFFF;
  }

  .sv-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.0356vw;
    /* 8/393 */
  }

  .sv-cards-row {
    display: contents;
  }

  .sv-card {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
    border-radius: 3.5623vw;
    /* 14/393 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 4.5802vw 7.6336vw;
    /* sides 18, bottom 30; top per card */
  }

  /* 1: full-width photo card (4380:3305) */
  .sv-card--1 {
    grid-column: 1 / -1;
    min-height: 52.9262vw;
    /* 208/393 */
    padding-top: 11.9593vw;
    /* 47/393 */
    padding-bottom: 7.1247vw;
    /* 28/393: Figma content (47 + 133) leaves 28 in the 208 card, not its nominal 30 */
    background: #213239 center / cover no-repeat;
  }

  /* 2: orange (4380:3312), content centred vertically */
  .sv-card--2 {
    min-height: 60.8142vw;
    /* 239/393 */
    padding-top: 4.3257vw;
    /* 17/393 */
    justify-content: center;
    background: #FFA726;
  }

  /* 3: grey (4380:3318), content from the top */
  .sv-card--3 {
    min-height: 60.8142vw;
    padding-top: 6.1069vw;
    /* 24/393 */
    padding-bottom: 4.0712vw;
    /* 16/393: Figma content (24 + 199) leaves 16 in the 239 card, not its nominal 30 */
    background: #E9EAEB;
  }

  /* 4: full-width dark (4380:3325) */
  .sv-card--4 {
    grid-column: 1 / -1;
    min-height: 50.3817vw;
    /* 198/393 */
    padding-top: 8.1425vw;
    /* 32/393 */
    border-radius: 5.3435vw;
    /* 21/393 */
    background: #213239;
  }

  .sv-card-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .sv-card-text {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  /* gaps icon -> text / title -> description, per Figma card */
  .sv-card--1 .sv-card-inner { gap: 2.5445vw; }  /* 10 */
  .sv-card--1 .sv-card-text  { gap: 1.0178vw; }  /* 4 */
  .sv-card--2 .sv-card-inner { gap: 1.5267vw; }  /* 6 */
  .sv-card--2 .sv-card-text  { gap: 1.5267vw; }  /* 6 */
  .sv-card--3 .sv-card-inner { gap: 3.0534vw; }  /* 12 */
  .sv-card--3 .sv-card-text  { gap: 3.0534vw; }  /* 12 */
  .sv-card--4 .sv-card-inner { gap: 2.5445vw; }  /* 10 */
  .sv-card--4 .sv-card-text  { gap: 2.0356vw; }  /* 8 */

  /* icons, Figma boxes; contain keeps an icon uploaded in wp-admin in its own shape */
  .sv-card-icon {
    display: block;
    flex-shrink: 0;
    max-width: none;
    object-fit: contain;
    object-position: left center;
  }

  .sv-card--1 .sv-card-icon { width: 8.1425vw; height: 9.9237vw; }  /* 32 x 39 */
  .sv-card--2 .sv-card-icon { width: 8.1425vw; height: 8.1425vw; }  /* 32 x 32 */
  .sv-card--3 .sv-card-icon { width: 7.1247vw; height: 8.9059vw; }  /* 28 x 35 */
  .sv-card--4 .sv-card-icon { width: 6.6158vw; height: 7.6336vw; }  /* 26 x 30 */

  /* title: Mona Sans Bold 16, 1%; Figma's title boxes set the line breaks */
  .sv-card-title {
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 4.0712vw;
    /* 16/393 */
    line-height: 5.0891vw;
    /* 20/393 */
    letter-spacing: 0.01em;
    color: #FFFFFF;
    overflow-wrap: anywhere;
  }

  .sv-card--1 .sv-card-title { max-width: 53.6896vw; }  /* 211 */
  .sv-card--2 .sv-card-title { max-width: 28.2443vw; line-height: 4.5802vw; }  /* 111, line 18 */
  .sv-card--3 .sv-card-title { max-width: 25.1908vw; color: #000000; }  /* 99 */
  .sv-card--4 .sv-card-title { max-width: 42.7481vw; }
  /* 168: Figma's 180 box has a hard break; 168 gives the same "Built for Today. / Ready for Tomorrow." (164 fits, 173 doesn't) */

  /* description: Mona Sans Regular 13, 1% (card 1: 14 / 20, below) */
  .sv-card-desc {
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 3.3079vw;
    /* 13/393 */
    line-height: 4.0712vw;
    /* 16/393 */
    letter-spacing: 0.01em;
    color: #FFFFFF;
    overflow-wrap: anywhere;
  }

  .sv-card--1 .sv-card-desc { font-size: 3.5623vw; line-height: 5.0891vw; }  /* 14 / 20 */
  .sv-card--3 .sv-card-desc { color: #0B0B0B; }
}


/* =============================================================================================================
   SERVICE PAGE REDESIGN 2026-10-06 - 4. DESIGN & PRODUCTION (Figma 4170:3667, 1440 x 921, bg #213239)
   WEB only (>= 768). One screen under the 5cqi sticky navbar. The 1440 x 921 Figma frame is a canvas scaled by --u
   (one Figma px): width-based unless the screen is too short, then height-based; the canvas is centred, the dark
   background always spans the full width. Children use Figma's absolute positions.
   ============================================================================================================= */
@media (min-width: 768px) {
  .sv-prod-section {
    /* 2026-10-12 (user: wider, still one screen): the Figma frame scales by --u to fit one screen. Its 4 vertical gaps
       (top 60.5, heading->list 60.5, list->button 43.19, bottom 68.43 = 232.62) may shrink on short screens to
       24 / 36 / 28 / 28 (= 116, total frame 804.4 instead of 921), so the frame - and everything in it - can be ~14%
       bigger / wider on laptops. When the screen is tall enough, the spare height (--extra, up to 116.62) goes back
       into the gaps in their Figma proportion -> exact Figma spacing (e.g. 1440x1000). */
    --u: min(calc(100cqi / 1440), calc((100vh - 5cqi) / 804.4));
    --extra: min(max(0px, calc(100vh - 5cqi - 804.4 * var(--u))), calc(116.62 * var(--u)));
    /* 2026-10-15 (user: same space top and bottom, web only): --g1 = --g4 minus the ~10 the 62 line box adds above the
       heading's letters, so the visible space above the heading = below the button on every screen (Figma 68 / 68.43);
       the 6 taken from the top goes to the heading -> list gap, so the frame height and the one-screen fit are unchanged. */
    --g1: calc(18 * var(--u) + var(--extra) * 0.34668);
    --g2: calc(42 * var(--u) + var(--extra) * 0.17639);
    --g3: calc(28 * var(--u) + var(--extra) * 0.13025);
    --g4: calc(28 * var(--u) + var(--extra) * 0.34668);
    --w: calc(100cqi / 1440);
    width: 100%;
    min-height: calc(100vh - 5cqi);
    /* min-height (was height): a longer heading / list grows the section (2026-10-12) */
    background: #213239;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* 2026-10-12: heading, list and button now flow one under the other (Figma gaps kept), so longer text pushes the
     next item down instead of overlapping; at Figma text lengths every position is the same as the 921 canvas
     (60.5 + heading 62 + 60.5 + list 569 + 43.19 + button 57.38 + 68.43 = 921). The image keeps its Figma spot. */
  .sv-prod-canvas {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    width: calc(1440 * var(--u));
    /* 2026-10-12 (user): the whole Figma frame on ONE scale (--u) and centred in the section (parent is flex-centred), so
       heading / list / button / image keep the Figma composition (96 .. 1352) with equal space left and right on every
       screen, instead of the list sitting left and empty space on the right */
    min-height: calc(804.4 * var(--u) + var(--extra));
    padding: var(--g1) 0 var(--g4) calc(96 * var(--u));
  }

  /* heading (4170:3668): 56 Bold #FFA726, 47-tall box centred at y 91.5 */
  .sv-prod-heading {
    width: calc(1248 * var(--u));
    /* full width (96 each side): the heading sits above the image (image top 209), so it only wraps when very long */
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: calc(56 * var(--u));
    line-height: calc(62 * var(--u));
    /* one line = a 62 box from 60.5 -> text centred on y 91.5, exactly as the Figma 47 box at 68 */
    color: #FFA726;
  }

  /* list (4170:3675): 459 wide at 96 / 183, 13 between items */
  .sv-prod-list {
    margin-top: var(--g2);
    /* list top = 183 */
    width: calc(459 * var(--u));
    /* --u like its text / padding (2026-10-12): every item keeps the Figma 4170:3669 proportions - number at 35,
       text 323 wide, 35 right padding - on every screen (with --w the boxes got wider than their text on laptop and
       large screens -> empty space on the right) */
    display: flex;
    flex-direction: column;
    gap: calc(13 * var(--u));
  }

  .sv-prod-item {
    box-sizing: border-box;
    min-height: calc(105 * var(--u));
    /* min: a 2-3 line item grows, keeping its 22 top / bottom padding */
    padding: calc(22 * var(--u)) calc(35 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(30 * var(--u));
    background: #F0EEEB;
    border-radius: calc(17 * var(--u));
    overflow: hidden;
  }

  .sv-prod-item:last-child {
    min-height: calc(97 * var(--u));
    /* Figma's 5th item is 97 tall */
    padding-top: calc(18.5 * var(--u));
    padding-bottom: calc(18.5 * var(--u));
    /* 2 lines (2 x 30) + 37 = 97, so a 2-line 5th item still fits its Figma box and the section stays one screen
       (2026-10-12); a 1-line item is centred in the 97 exactly as before */
  }

  .sv-prod-num {
    flex-shrink: 0;
    width: calc(36 * var(--u));
    font-family: 'Mona Sans', sans-serif;
    font-weight: 500;
    font-size: calc(24 * var(--u));
    line-height: calc(30 * var(--u));
    color: #0B0B0B;
  }

  .sv-prod-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: calc(24 * var(--u));
    line-height: calc(30 * var(--u));
    letter-spacing: normal;
    color: #0B0B0B;
  }

  /* collage (4170:3685): 707 x 526 at 645 / 209, radius 17 */
  /* 2026-10-12: the box takes the IMAGE'S OWN SHAPE (--ar = real width / height, set inline by page-service.php), so
     nothing is cropped: as wide as its column allows, but never taller than 680 (one-screen units) - a tall image
     gets narrower, a wide one fills the column. Always centred on the list (y 467.5); 680 tall at most =
     127.5 .. 807.5, inside the 921 one-screen canvas.
     Column = Figma 645 .. 1352 (707), 90 after the list, on the same scale as the whole (centred) frame; an image
     narrower than the column (a tall one) is centred in it, so no empty strip is left on one side. */
  .sv-prod-image {
    --ar: 1.3441;
    --col: calc(707 * var(--u));
    --iw: min(var(--col), calc(600 * var(--u) * var(--ar)));
    /* max 600 tall: centred on the list (centre 284.5 below the list top) it stays below the heading and inside the frame */
    position: absolute;
    left: calc(645 * var(--u) + (var(--col) - var(--iw)) / 2);
    top: calc(var(--g1) + 62 * var(--u) + var(--g2) + 284.5 * var(--u));
    /* = the list's vertical centre (Figma 467.5 when the gaps are at Figma size) */
    width: var(--iw);
    height: auto;
    aspect-ratio: var(--ar);
    transform: translateY(-50%);
    max-width: none;
    object-fit: cover;
    border-radius: calc(17 * var(--u));
  }

  /* button (4170:3686): 309 x 57.38, left 159, top 795.19, #FFA726, radius 29 */
  .sv-prod-cta {
    position: relative;
    display: block;
    margin: var(--g3) 0 0 calc(63 * var(--u));
    /* Figma: 43.19 under the list, x 159 (63 in from the list, same scale as the list) */
    width: calc(309 * var(--u));
    height: calc(57.38 * var(--u));
    background: #FFA726;
    border-radius: calc(29 * var(--u));
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
  }

  .sv-prod-cta-icon {
    position: absolute;
    left: calc(7.01 * var(--u));
    top: calc(5.78 * var(--u));
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    display: block;
  }

  .sv-prod-cta-text {
    position: absolute;
    left: calc(58.59 * var(--u));
    right: calc(11.77 * var(--u));
    top: calc(14.01 * var(--u));
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: calc(22 * var(--u));
    line-height: calc(30 * var(--u));
    color: #FFFFFF;
    white-space: nowrap;
  }
}


/* -------------------------------------------------------------------------------------------------------------
   DESIGN & PRODUCTION - MOBILE (< 768), 2026-10-14, Figma 4380:3331 (Branding mobile): #213239, padding 50 / 28,
   heading (48 box) -> 30 -> list (5 x 67, gap 8) -> 32 -> button 195 x 36 (centred) -> 32 -> collage 337 wide.
   Every size in vw (Figma px / 393). Same HTML as web: the button is moved above the image with order. Items and
   heading grow with longer text; the image keeps its own shape (--ar from page-service.php, no crop).
   ------------------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .sv-prod-section {
    width: 100%;
    background: #213239;
    padding: 7.3791vw 7.1247vw 14.5038vw;
    /* 29 / 28 / 57 per 393 (2026-10-15 Figma 4380:3331: pt 29, pb 57) */
    box-sizing: border-box;
  }

  .sv-prod-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sv-prod-heading {
    order: 1;
    width: 100%;
    margin: 0 0 7.6336vw;
    /* 30/393 to the list */
    min-height: 12.2137vw;
    /* 48/393: one line = Figma's 48 box (4380:3332), the 33 line centred in it */
    padding: 0.7634vw 0;
    /* 3/393: two lines = Figma's 72 box (Lead Gen 4388:4603, 2 x 33 + 6) */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 7.1247vw;
    /* 28/393 */
    line-height: 8.3969vw;
    /* 33/393 */
    letter-spacing: 0;
    color: #FFA726;
    text-align: center;
    /* centred per Figma; a heading wider than the 337 box wraps word by word ("Lead Generation / Services") */
    overflow-wrap: break-word;
  }

  .sv-prod-list {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.0356vw;
    /* 8/393 */
  }

  /* item (4380:3336): #F0EEEB, 67 tall, 35 side padding, radius 10, number + text Mona Sans Medium 16 #0B0B0B */
  .sv-prod-item {
    box-sizing: border-box;
    min-height: 17.0483vw;
    /* 67/393 */
    padding: 2.0356vw 8.9059vw;
    /* 8 (a 2+ line item keeps space) / 35 */
    border-radius: 2.5445vw;
    /* 10/393 */
    background: #F0EEEB;
    display: flex;
    align-items: center;
    gap: 2.5445vw;
    /* 10/393 (items 1-2) */
  }

  .sv-prod-item:nth-child(n+3) {
    gap: 3.0534vw;
    /* 12/393 (Figma items 3-5) */
  }

  .sv-prod-num,
  .sv-prod-text {
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 500;
    font-size: 4.0712vw;
    /* 16/393 */
    letter-spacing: 0;
    color: #0B0B0B;
  }

  .sv-prod-num {
    flex-shrink: 0;
    line-height: 7.6336vw;
    /* 30/393 */
  }

  .sv-prod-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 4.5802vw;
    /* 18/393 (Figma items 3 + 5; one line looks the same, a wrapped item stays compact) */
    overflow-wrap: anywhere;
  }

  /* button (4380:3351): orange pill 195 x 36, white circle 29 at 4, text Inter Medium 14 white from 37 */
  .sv-prod-cta {
    order: 3;
    position: relative;
    margin-top: 11.4504vw;
    /* 45/393 (2026-10-15 Figma: list -> button 45) */
    width: 49.6183vw;
    /* 195/393 */
    height: 9.1603vw;
    /* 36/393 */
    box-sizing: border-box;
    padding: 0 1.7812vw 0 1.0178vw;
    /* right 7 / left 4 */
    border-radius: 7.3791vw;
    /* 29/393 */
    background: #FFA726;
    display: flex;
    align-items: center;
    gap: 1.0178vw;
    /* 4/393: 37 - 4 - 29 */
    text-decoration: none;
    overflow: hidden;
  }

  .sv-prod-cta-icon {
    flex-shrink: 0;
    width: 7.3791vw;
    height: 7.3791vw;
    /* 29/393 */
    border-radius: 50%;
    object-fit: contain;
  }

  .sv-prod-cta-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.5623vw;
    /* 14/393 */
    line-height: 7.6336vw;
    /* 30/393 */
    color: #FFFFFF;
    white-space: nowrap;
  }

  /* collage (4382:3654): full 337 width, own shape (Figma 337 x 251 = the default image's shape) */
  .sv-prod-image {
    order: 4;
    display: block;
    margin-top: 11.4504vw;
    /* 45/393 (2026-10-15 Figma: button -> image 45) */
    width: 100%;
    height: auto;
    aspect-ratio: var(--ar, 1.3426);
    object-fit: contain;
  }
}


/* -------------------------------------------------------------------------------------------------------------
   HOW WE BUILD YOUR BRAND - header, MOBILE (< 768), 2026-10-14, Figma 4380:3357 (Branding mobile): 47 below Design &
   Production; heading Mona Sans ExtraBold 26/28 #263238 centred in a 230 box (text from 1 in the 64 frame); subtitle
   Regular 12/17 #5D5C5C, 298 box, 72 from the frame top; timeline frame 4380:3361 46 below the subtitle. vw = Figma
   px / 393. The old mobile rule above (61 / 56 !important padding) is overridden here.
   ------------------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .branding-steps-section {
    padding-top: 10.9415vw !important;
    /* 43/393 = 42 (Figma 2026-10-15: frame 2605, Design & Production ends 2563) + the heading's 1 inside its frame */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sv-steps-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.8168vw;
    /* 15/393: heading bottom (57) -> subtitle (72) */
    margin: 0 auto 12.2137vw;
    /* 48/393 to the timeline (Figma 2026-10-15: subtitle ends 2728, timeline 2776) */
    text-align: center;
  }

  .sv-steps-heading {
    width: 100%;
    max-width: 58.5242vw;
    /* 230/393: Figma's box -> "How We Build Your / Brand" */
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    font-size: 7.1247vw;
    /* 28/393 (Figma 4380:3359) */
    line-height: 7.1247vw;
    /* 28/393 */
    letter-spacing: 0.01em;
    color: #263238;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .sv-steps-subtitle {
    width: 100%;
    max-width: 75.827vw;
    /* 298/393 */
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 3.0534vw;
    /* 12/393 */
    line-height: 4.3257vw;
    /* 17/393 */
    letter-spacing: 0.01em;
    color: #5D5C5C;
    text-align: center;
    overflow-wrap: anywhere;
  }
}


/* -------------------------------------------------------------------------------------------------------------
   HOW WE BUILD YOUR BRAND - timeline, MOBILE (< 768), 2026-10-14, Figma 4380:3361 (339 wide, centred): circle 36
   (#FFA726, number Mona Sans ExtraBold 20 #24323A) -> 100 -> card 290 x 174 (#FFA726, radius 10, padding 16/26/19,
   content centred) -> 100 -> next circle ...; line 3 #263238 from the first circle's bottom to 28 above the orange
   plus (11, 134 below the last card). Flow layout (not absolute): a longer step text grows its card and moves the rest
   down. Cards always shown (the open-on-scroll animation is web only). vw = Figma px / 393.
   ------------------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .branding-steps-section {
    padding-bottom: 13.9949vw !important;
    /* 55/393: plus bottom (Figma 2026-10-15: 4440) -> What Our Clients Say frame (4495) */
  }

  .sv-timeline {
    position: relative;
    width: 86.2595vw;
    /* 339/393 */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sv-tl-line {
    position: absolute;
    left: 50%;
    top: 9.1603vw;
    /* 36/393: first circle's bottom */
    bottom: 4.5802vw;
    /* 18/393: ends 7 above the 11 plus (Figma 2026-10-15: line ends 1646, plus at 1653 in the frame) */
    width: 0.7634vw;
    /* 3/393 */
    transform: translateX(-50%);
    background: #263238;
    z-index: 0;
  }

  .sv-tl-dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 9.1603vw;
    height: 9.1603vw;
    /* 36/393 */
    border-radius: 50%;
    background: #FFA726;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    font-size: 5.0891vw;
    /* 20/393 */
    line-height: 4.8346vw;
    /* 19/393 */
    letter-spacing: 0.01em;
    color: #24323A;
  }

  .sv-tl-dot ~ .sv-tl-dot {
    margin-top: 25.4453vw;
    /* 100/393 from the card above */
  }

  .sv-tl-card {
    position: relative;
    z-index: 1;
    width: 73.7913vw;
    /* 290/393 (4380:3379), centred on the line */
    min-height: 44.2748vw;
    /* 174/393 */
    margin-top: 25.4453vw;
    /* 100/393 below its circle */
    box-sizing: border-box;
    padding: 4.0712vw 6.6158vw 4.8346vw;
    /* 16 / 26 / 19: Figma's 238 text column (4380:3380) in the 290 card */
    border-radius: 2.5445vw;
    /* 10/393 */
    background: #FFA726;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .sv-tl-card-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.2901vw;
    /* 9/393 */
  }

  /* "01. Discover": Mona Sans Bold 16, -0.64 tracking, number in a 25 box, in a 38 row */
  .sv-tl-title {
    margin: 0;
    min-height: 9.6692vw;
    /* 38/393 */
    display: flex;
    align-items: center;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 4.0712vw;
    /* 16/393 */
    line-height: 5.0891vw;
    /* 20/393 */
    letter-spacing: -0.04em;
    color: #000000;
  }

  .sv-tl-num {
    flex-shrink: 0;
    width: 6.3613vw;
    /* 25/393 */
  }

  .sv-tl-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .sv-tl-desc {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 4.0712vw;
    /* 16/393 */
    line-height: 6.1069vw;
    /* 24/393 */
    letter-spacing: 0.01em;
    color: #000000;
    overflow-wrap: anywhere;
  }

  .sv-tl-plus {
    position: relative;
    z-index: 1;
    display: block;
    flex-shrink: 0;
    width: 2.799vw;
    height: 2.799vw;
    /* 11/393 */
    margin-top: 28.7532vw;
    /* 113/393 below the last card (Figma 2026-10-15: card ends 1540, plus 1653) */
  }
}


/* =============================================================================================================
   SERVICE PAGE REDESIGN 2026-10-06 - 5. HOW WE BUILD YOUR BRAND - header (Figma 4182:3743: 869 wide, centred)
   WEB only (>= 768). Taller than a screen (scrolls), so sizes follow the screen width (Figma px / 1440 in cqi) like
   the hero and intro. Figma: 111 below Design & Production; heading 54/59 Bold #263238; 23; subtitle 22/27 #0B0B0B;
   98 to the timeline.
   ============================================================================================================= */
@media (min-width: 768px) {
  .branding-steps-section {
    padding-top: 6.3194cqi;
    /* 91/1440 (2026-10-15 user + Figma API: 4170:3667 ends y 41793, 4182:3743 starts 41884 = 91; was 111) */
  }

  .sv-steps-head {
    width: 60.3472cqi;
    /* 869/1440 */
    margin: 0 auto 6.8056cqi;
    /* 98/1440 to the timeline */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5972cqi;
    /* 23/1440 */
    text-align: center;
  }

  .sv-steps-heading {
    width: 100%;
    margin: 0;
    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;
  }

  .sv-steps-subtitle {
    width: 100%;
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.5278cqi;
    /* 22/1440 */
    line-height: 1.875cqi;
    /* 27/1440 */
    letter-spacing: 0.01em;
    color: #0B0B0B;
  }
}


/* =============================================================================================================
   SERVICE PAGE REDESIGN 2026-10-06 - 5. HOW WE BUILD YOUR BRAND - timeline (Figma 4170:3692, 1209 x 2013 at x 116)
   WEB only (>= 768). Scrolls (taller than a screen). --k = one Figma px at the screen width. Line 6px #263238 from
   y 53 to 1859 at x 583; circles 54 #FFA726 at y 0 / 450 / 910 / 1370 (x 558); cards 503 wide #FFA726 radius 26:
   1 & 3 at x 706 (y 150 / 998), 2 & 4 at x 0 (y 573 / 1453); orange + at 577 / 1876.
   ============================================================================================================= */
@media (min-width: 768px) {
  .branding-steps-section {
    padding-bottom: 0;
  }

  /* 2026-10-12: grid instead of absolute tops, so a card with more text pushes everything below it down and the
     line grows with it. Columns: left cards 503 | 55 | circles 54 | 94 | right cards 503 (= x 0 / 558 / 706).
     Rows = Figma gaps; with Figma-length text (cards 219) every position is the same as the old 2013 canvas. */
  .sv-timeline {
    --k: calc(100cqi / 1440);
    position: relative;
    display: grid;
    grid-template-columns: calc(503 * var(--k)) calc(55 * var(--k)) calc(54 * var(--k)) calc(94 * var(--k)) calc(503 * var(--k));
    grid-template-rows:
      calc(54 * var(--k)) calc(96 * var(--k)) auto calc(81 * var(--k))
      calc(54 * var(--k)) calc(69 * var(--k)) auto calc(118 * var(--k))
      calc(54 * var(--k)) calc(34 * var(--k)) auto calc(153 * var(--k))
      calc(54 * var(--k)) calc(29 * var(--k)) auto calc(187 * var(--k))
      calc(17 * var(--k)) calc(14 * var(--k)) calc(123 * var(--k));
    width: calc(1209 * var(--k));
    margin: 0 0 0 calc(50% - 604.5 * var(--k));
    /* Figma x 116 = centred in 1440 ((1440 - 1209) / 2 = 115.5); centred on the (narrower, centred) steps
       container's middle so it can be wider than that container */
    flex-shrink: 0;
    align-self: flex-start;
  }

  .sv-tl-line {
    grid-column: 3;
    grid-row: 1 / 17;
    /* from circle 1 to 187 below the last card */
    margin: calc(53 * var(--k)) 0 0 calc(25 * var(--k));
    width: calc(6 * var(--k));
    background: #263238;
  }

  .sv-tl-dot {
    position: relative;
    grid-column: 3;
    width: calc(54 * var(--k));
    height: calc(54 * var(--k));
    border-radius: 50%;
    background: #FFA726;
  }

  .sv-tl-dot--1 { grid-row: 1; }
  .sv-tl-dot--2 { grid-row: 5; }
  .sv-tl-dot--3 { grid-row: 9; }
  .sv-tl-dot--4 { grid-row: 13; }

  /* number (4170:3698): ExtraBold 30 #24323A, 15-wide box at x 19, centred on y 25.5 */
  .sv-tl-dot span {
    position: absolute;
    left: calc(19 * var(--k));
    top: calc(16 * var(--k));
    width: calc(15 * var(--k));
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    font-size: calc(30 * var(--k));
    line-height: calc(19 * var(--k));
    letter-spacing: 0.01em;
    color: #24323A;
  }

  .sv-tl-card {
    position: relative;
    box-sizing: border-box;
    width: calc(503 * var(--k));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(40 * var(--k)) calc(50 * var(--k));
    background: #FFA726;
    border-radius: calc(26 * var(--k));
    overflow: hidden;
  }

  .sv-tl-card--1 { grid-column: 5; grid-row: 3; }
  .sv-tl-card--3 { grid-column: 5; grid-row: 11; }

  .sv-tl-card--2,
  .sv-tl-card--4 {
    min-height: calc(219 * var(--k));
    padding-left: calc(52 * var(--k));
  }

  .sv-tl-card--2 { grid-column: 1; grid-row: 7; }
  .sv-tl-card--4 { grid-column: 1; grid-row: 15; }

  .sv-tl-card-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--k));
    align-items: flex-start;
  }

  .sv-tl-card--2 .sv-tl-card-inner,
  .sv-tl-card--4 .sv-tl-card-inner {
    width: calc(403 * var(--k));
    flex-shrink: 0;
  }

  /* title row: "01." + label, Bold 28, -4% letter-spacing; row 61 tall (cards 1 & 3) / 43 (cards 2 & 4) */
  .sv-tl-title {
    margin: 0;
    width: 100%;
    min-height: calc(61 * var(--k));
    display: flex;
    align-items: center;
    gap: calc(16 * var(--k));
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: calc(28 * var(--k));
    line-height: calc(34 * var(--k));
    /* was 80 (centred in the row, so one line sits in the same place); 34 lets a long label wrap neatly */
    letter-spacing: -0.04em;
    color: #000000;
  }

  .sv-tl-num {
    flex-shrink: 0;
  }

  .sv-tl-card--2 .sv-tl-title,
  .sv-tl-card--4 .sv-tl-title {
    min-height: calc(43 * var(--k));
  }

  .sv-tl-desc {
    margin: 0;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: calc(21 * var(--k));
    line-height: calc(31 * var(--k));
    letter-spacing: 0.01em;
    color: #000000;
  }

  .sv-tl-plus {
    grid-column: 3;
    grid-row: 18;
    margin-left: calc(21 * var(--k));
    /* centred under the line (line 583-589, centre 586; plus 14 wide -> 579 = 558 + 21), 17 below its end */
    width: calc(14 * var(--k));
    height: calc(14 * var(--k));
    display: block;
    overflow: visible;
  }
}


/* =============================================================================================================
   SERVICE PAGE REDESIGN 2026-10-07 - 7. PRE-FOOTER (Figma 4142:2316, 1440 x 254, #263238) - WEB only, service pages
   only (this file). Title 49/55 Bold white at left 74, text top 72.6; button 364 x 51.5, #F0EEEA, radius 29, left 997
   (79 from the right), bottom 40; icon 43.68 x 40.4 at 11.43 / 5.05; label Inter Medium 25 #1B3834 at 72.8.
   ============================================================================================================= */
@media (min-width: 768px) {
  .branding-page-body .pre-footer-inner {
    padding: 5.0417cqi 5.4861cqi 2.7778cqi 5.1389cqi;
    /* 72.6 top (title text), 79 right (button), 40 bottom (button), 74 left */
  }

  .branding-page-body .pre-footer-title {
    margin: 0 0 2.1806cqi 0 !important;
    /* 31.4: title bottom (182.6) -> 214 (section 254 - 40) */
  }

  .branding-page-body .btn-pre-footer {
    position: relative;
    width: 25.2778cqi;
    /* 364 */
    height: 3.5764cqi;
    /* 51.5 */
    padding: 0;
    gap: 0;
    background: #F0EEEA;
    border-radius: 2.0139cqi;
    /* 29 */
  }

  .branding-page-body .btn-pre-footer .icon-circle {
    position: absolute;
    left: 0.7938cqi;
    /* 11.43 */
    top: 0.3507cqi;
    /* 5.05 */
    width: 3.0333cqi;
    /* 43.68 */
    height: 2.8056cqi;
    /* 40.4 */
    background: transparent;
    border-radius: 0;
  }

  .branding-page-body .btn-pre-footer .sv-pref-icon {
    width: 100%;
    height: 100%;
    display: block;
  }

  .branding-page-body .btn-pre-footer .btn-text {
    position: absolute;
    left: 5.0556cqi;
    /* 72.8 (20%) */
    top: calc(50% + 0.0167cqi);
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.7361cqi;
    /* 25 */
    line-height: 2.0833cqi;
    /* 30 */
    letter-spacing: 0;
    color: #1B3834;
  }
}


/* Timeline cards: open / close swing on scroll (web) - same values as style-v2.css "3D Card Swing Animation".
   Only active once the script has added .sv-tl-anim (no JS / reduced motion = cards always shown). */
@media (min-width: 768px) {
  .sv-tl-anim .sv-tl-card {
    will-change: transform, opacity;
    backface-visibility: hidden;
    opacity: 0.3;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* right-side cards (1, 3) hinge on the edge next to the line */
  .sv-tl-anim .sv-tl-card--1,
  .sv-tl-anim .sv-tl-card--3 {
    transform-origin: left center;
    transform: perspective(1200px) rotateY(60deg);
  }

  /* left-side cards (2, 4) */
  .sv-tl-anim .sv-tl-card--2,
  .sv-tl-anim .sv-tl-card--4 {
    transform-origin: right center;
    transform: perspective(1200px) rotateY(-60deg);
  }

  .sv-tl-anim .sv-tl-card.visible {
    transform: perspective(1200px) rotateY(0deg);
    opacity: 1;
  }
}


/* =============================================================================================================
   SERVICE PAGE - no overflow with any editor text (2026-10-12): a very long word / URL breaks inside its box instead
   of running out of the card, list item or timeline card. Normal text wraps exactly as before.
   ============================================================================================================= */
@media (min-width: 768px) {
  .sv-card-title,
  .sv-card-desc,
  .sv-prod-heading,
  .sv-prod-text,
  .sv-steps-heading,
  .sv-steps-subtitle,
  .sv-tl-label,
  .sv-tl-desc {
    overflow-wrap: anywhere;
  }

  .sv-tl-label {
    min-width: 0;
  }
}


/* Cards section H2 (2026-10-15, SEO) - the old design's visible heading above the cards, kept for search engines and
   screen readers only: the new design (Figma) has no heading here. Standard visually-hidden pattern (as WordPress's
   .screen-reader-text): takes no space, so the cards section looks exactly as before. All widths. */
.sv-cards-section .sv-cards-heading {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 2026-10-15 user: service testimonials slider bar touched both screen edges on mobile -> same as Home.
   Home gets the scaled, centred controls from style.css (max-width 767); the service pages load style-v2.css, whose
   fixed 331px bar + 36px arrows with left:50%/translateX overflowed the 295px box. Same values as style.css, #testimonials
   so they win over style-v2's !important rules. Mobile only. */
@media (max-width: 767px) {
  #testimonials .testimonials-controls {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(331px, 100%) !important;
    container-type: inline-size;
    height: 41px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 1.511cqi !important;
    /* 5/331 */
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #testimonials .testimonials-controls .carousel-btn {
    width: 10.876cqi !important;
    /* 36/331 */
    min-width: 24px !important;
    height: 10.575cqi !important;
    /* 35/331 */
  }

  #testimonials .testimonials-controls .carousel-btn svg {
    width: 6.344cqi !important;
    /* 21/331 */
    height: 6.344cqi !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }

  #testimonials .carousel-track-line {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #testimonials .carousel-dots-center {
    gap: 0.604cqi !important;
    /* 2/331 */
    max-width: 100% !important;
  }

  #testimonials .carousel-dots-center::before {
    width: 22.253cqi !important;
    /* 73.64/331 */
    min-width: 12px !important;
    flex-shrink: 1 !important;
  }

  #testimonials .carousel-dots-center::after {
    width: 23.072cqi !important;
    /* 76.36/331 */
    min-width: 12px !important;
    flex-shrink: 1 !important;
  }

  #testimonials .carousel-dots-center .dot {
    width: 4.834cqi !important;
    /* 16/331 */
    height: 5.019cqi !important;
    /* 16.61/331 */
    min-width: 9px !important;
    min-height: 9px !important;
    flex-shrink: 0 !important;
  }

  #testimonials .carousel-dots-center .dot.active {
    width: 16px !important;
    height: 16.61px !important;
  }
}

/* 2026-10-15 user: on TABLET the cards + Design & Production sections had far too much space (each was stretched to one
   full screen, content centred -> 300-400px empty above / below on a portrait iPad). Portrait tablets only (web +
   mobile + landscape unchanged): no full-screen min-height, scale = screen width, so each section is the Figma 1440 frame
   scaled down with Figma's own spacing - cards 76 above / 85 below (4151:3664), Design & Production 921 tall with
   60.5 / 68.43 (4170:3667, --extra at its Figma maximum). Both still fit one screen. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .sv-cards-section {
    --u: calc(100cqi / 1440);
    min-height: 0;
  }

  .sv-prod-section {
    --u: calc(100cqi / 1440);
    --extra: calc(116.62 * var(--u));
    min-height: 0;
  }
}

/* 2026-10-15 user (Figma 4170:3667 / 3668 / 3686): Design & Production on WEB = 68px above the heading and 68px below
   the button on EVERY screen, and the whole section inside one screen. The gaps are fixed 68px (--g1 is 10.3 units less:
   the 62 line box puts ~10.3 above the heading's letters, so the VISIBLE gap is 68; measured 67-69 on all 8 pages); the content (heading 62 + 60.5 +
   list 569 + 43.19 + button 57.38 = 792.07, minus those 10 = 782.07 Figma units) scales with --u to fit what is left of
   the screen under the 5cqi navbar, never wider than the 1440 frame. The section is content + 136, so it never
   stretches (the gaps can't grow) and never exceeds the screen. Portrait tablets keep their own block above. */
@media (min-width: 1200px), (min-width: 768px) and (orientation: landscape) {
  .sv-prod-section {
    --u: min(calc(100cqi / 1440), calc((100vh - 5cqi - 136px) / 782.07));
    --extra: 0px;
    --g1: calc(68px - 10.3 * var(--u));
    --g2: calc(60.5 * var(--u));
    --g3: calc(43.19 * var(--u));
    --g4: 68px;
    min-height: 0;
  }

  .sv-prod-canvas {
    min-height: 0;
  }
}

/* 2026-10-15 user (Figma 4142:2419 -> 4151:3664): on WEB the space between the intro text and the cards = Figma 76 (the
   intro's own 76/1440 bottom padding). The cards section added a second 76 on top and was stretched to one screen with the
   grid centred (155 at 1440x900). Now no top padding and no stretching: grid right under the intro, 85 below it (Figma:
   grid -> next section), card sizes unchanged (same --u). Portrait tablets keep their own block above. */
@media (min-width: 1200px), (min-width: 768px) and (orientation: landscape) {
  .sv-cards-section {
    min-height: 0;
    padding-top: 0;
  }
}

/* 2026-10-15 user: Design & Production -> How We Build Your Brand = a FIXED 91px on every web screen (Figma 4170:3667
   ends y 41793, 4182:3743 starts 41884 = 91), like the fixed 68px gaps inside Design & Production. Same screens as that
   block (1200+ or landscape 768+); portrait tablets keep the scaled 91/1440, mobile has its own rule. */
@media (min-width: 1200px), (min-width: 768px) and (orientation: landscape) {
  .branding-steps-section {
    padding-top: 60px;
    /* 2026-10-16 user: 60px (was 91, then 68) above How We Build Your Brand */
  }
}

/* 2026-10-16 user: on WEB the "Design & Production" heading = the size of "How We Build Your Brand" (Figma 54, 3.75cqi -
   51px at 1366): it was on the one-screen scale --u (30px at 1366x768). Heading on the screen-width scale --w, Figma 62
   line box kept; only the list / image / button shrink to fit the screen. --u and --g1 recalculated for it so the section
   still = one screen with 68px above the heading letters and 68px below the button (--HV = space above the letters in
   the 62 box at 54px, measured). Portrait tablets and mobile unchanged. */
@media (min-width: 1200px), (min-width: 768px) and (orientation: landscape) {
  .sv-prod-section {
    --HV: 11.6;
    --u: min(calc(100cqi / 1440), calc((100vh - 5cqi - 136px - (62 - var(--HV)) * 100cqi / 1440) / 730.07));
    --g1: calc(68px - var(--HV) * var(--w));
  }

  .sv-prod-heading {
    width: calc(1248 * var(--w));
    font-size: calc(54 * var(--w));
    line-height: calc(62 * var(--w));
  }

  .sv-prod-image {
    top: calc(var(--g1) + 62 * var(--w) + var(--g2) + 284.5 * var(--u));
    left: calc(645 * var(--u) + (var(--col) - var(--iw)) / 2 + 10px);
    /* 2026-10-16 user: 10px more space between the left side (heading / list / button) and the image */
  }
}

/* 2026-10-16 user: "SPEAK TO AN EXPERT" WEB + TABLET - the label sat 13px (hero) / 11.5px (Design & Production) from the
   pill's right end at 1440 (7.5px on an iPad). Both pills now size to their label: icon + label start unchanged, then
   28/1440 after the text (= the pre-footer button's space), so any label length keeps the same end space. Mobile unchanged. */
@media (min-width: 768px) {
  .branding-hero .branding-hero-cta {
    width: auto;
    padding: 0 1.9444cqi 0 4.0683cqi;
    /* right 28/1440, left 58.58/1440 = label start */
  }

  .branding-hero .branding-hero-cta .btn-text {
    position: static;
    display: block;
    transform: none;
    line-height: 3.6111cqi;
    /* = pill height 52/1440, label centred vertically */
  }

  .sv-prod-cta {
    width: fit-content;
    padding: 0 calc(28 * var(--u)) 0 calc(58.59 * var(--u));
  }

  .sv-prod-cta-text {
    position: static;
    display: block;
    line-height: calc(57.38 * var(--u));
    /* = pill height, label centred vertically */
  }
}


/* Web / mobile content (2026-10-19, page-service.php + sold_sv_text() / sold_sv_img()): when the wp-admin Mobile
   Content tab has its own text or image, the page holds both copies - the web one shows from 768px (computers + tablets,
   where the web layout starts), the phone one under 768px. Card 1's phone photo comes in as --sv-bg-mob. */
@media (max-width: 767px) {
  .sv-only-web {
    display: none !important;
  }

  .sv-card--1[style*="--sv-bg-mob"] {
    background-image: var(--sv-bg-mob) !important;
  }
}

@media (min-width: 768px) {
  .sv-only-mob {
    display: none !important;
  }
}

/* 2026-10-21 user: Design & Production "SPEAK TO AN EXPERT" - the white arrow circle looked cut (8 service pages, every
   screen). The circle fills its 44x44 viewBox edge to edge and the svg box sits on fractional pixels, so the svg's own
   overflow clipping trimmed its soft edge (flat bottom / left). Let the circle draw fully; it stays inside the button. */
.sv-prod-cta .sv-prod-cta-icon {
  overflow: visible;
}

/* 2026-10-21 user: the 4 cards (8 service pages, WEB + TABLET) - icon + text sat too high. The rows are 320 tall (user
   request 2026-10-12; Figma 294) but the content kept Figma's 294 positions, so all 26 extra px ended up under it. The
   extra height is now shared evenly: cards 1, 2 and 4 move down 13 (Figma top 60 / 60 / 32 -> 73 / 73 / 45) and get 13
   more at the bottom, so the icons of a row stay level like Figma and a card with more text still grows evenly. Card 3
   is centred in its card (as Figma), so it already sits right. Phones unchanged. */
@media (min-width: 768px) {
  .sv-card--1 {
    padding-top: calc(73 * var(--u));
    padding-bottom: calc(42 * var(--u));
  }

  .sv-card--2 {
    padding-top: calc(73 * var(--u));
    padding-bottom: calc(43 * var(--u));
  }

  .sv-card--4 {
    padding-top: calc(45 * var(--u));
    padding-bottom: calc(43 * var(--u));
  }
}