/* ==========================================================================
   Responsive pass.

   Loaded AFTER sections.css, so every rule here is an override of the desktop
   build rather than something the desktop rules have to work around. Sections
   appear in the same order as sections.css.

   The reference has FIVE authored breakpoints, not the two an earlier version
   of this comment claimed. 1024 and 767 are Elementor's and carry nearly
   everything. The other three are small, and each comes from CSS that is not
   Elementor's, which is why they sit on values Elementor never uses:

     <= 1024   tablet, Elementor
     <= 1023   the testimonial slider's gutter, 15 -> 10. Swiper's own
               breakpoints are min-width, so its 1024 lands here as 1023
     <=  991   Bootstrap md: the social pill's inset, the slider's prev arrow
               offset, and the magic cursor going off
     <=  768   Bootstrap sm: section 12's logo cards, which ship their own
               stylesheet with the HTML widget
     <=  767   mobile, Elementor

   All five were measured by capturing computed styles either side of each
   width, not inferred. Do not round any of them off to the nearest Elementor
   value: the bands between them are visible.
   ========================================================================== */

/* ==========================================================================
   1. Site header, tablet and below

   The desktop header is a row of three fixed-width columns overlaying the
   hero. At 1024 it becomes a bar in normal flow holding the brand, the
   socials and a burger, and the SAME <nav> turns into a fixed offcanvas panel
   that slides in from the left.

   The reference ships two entire header blocks and hides whichever one does
   not apply. One nav that changes shape means one menu to maintain, one
   wp_nav_menu() call in the port, and no chance of the two drifting apart.
   ========================================================================== */

@media (max-width: 1024px) {

  /* In flow now, not overlaying the hero, and carrying the reference's
     hairline. Its own gutter goes because the bar sets its own padding. */
  /* Relative, not static: the hero below is pulled up 92px to underlap this
     bar, and without a stacking position the hero's own background would
     paint straight over it. */
  .site-header {
    position: relative;
    z-index: 100;
    padding: 0;
    border-bottom: 1px solid var(--c-divider);
  }

  /* Brand hard left, socials and burger as a pair hard right. The nav is
     fixed and out of flow, so it is not part of this row at all. */
  .site-header__inner {
    max-width: none;
    justify-content: flex-end;
    gap: 20px;
    padding: 20px;
  }

  .site-header__brand {
    width: auto;
    margin-right: auto;
    padding: 0;
  }

  /* HEIGHT only, and that is a REVERSAL of what this rule used to do.
     It pinned the width at 250px because our file's ratio was only slightly
     off the reference's, so width landed closer. Cinqo's wordmark is a
     different shape outright -- 2.657:1 against 3.5:1 -- and pinning the
     width at 250 made this 94.1 tall against the old 71.4, which grew the
     header by 53.6px and spilled the mark out of the bar at 768. The brand
     column here is `width: auto; margin-right: auto`, so the logo is flush
     left and its WIDTH moves nothing; only its height does. */
  .site-logo img {
    width: auto;
    height: 71.4px;
  }

  .site-header__social {
    width: auto;
    padding: 0;
  }

  /* --- Burger ----------------------------------------------------------- */

  /* Sized outright rather than by padding: the reference's icon font carries
     an em box taller than its ink, and an explicit box reproduces the button
     without having to reproduce that font's metrics. */
  .site-header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 36.6px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 8px;
    background: none;
    color: var(--c-white);
    cursor: pointer;
  }

  .site-header__burger svg {
    height: 13.93px;
    width: auto;
  }

  .site-header__burger:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: 2px;
  }

  /* --- The nav as an offcanvas panel ------------------------------------ */

  /* `left`, not `transform`, because that is what the reference animates and
     because a transformed ancestor would become the containing block for
     anything fixed inside the panel. */
  .site-nav {
    position: fixed;
    top: 0;
    left: -100vw;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 0 10px;
    background: var(--c-accent);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: left .3s ease-in-out;
  }

  .site-nav.is-open { left: 0; }

  /* The panel's top bar. 20px of padding around a 38px button is the
     reference's 78.8px strip, border included. */
  .site-nav__bar {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    padding: 20px;
    border-bottom: 1px solid var(--c-white);
  }

  .site-nav__close {
    width: 38px;
    height: 38px;
    padding: 5px;
    border: 0;
    border-radius: 8px;
    background: var(--c-black);
    color: var(--c-white);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    cursor: pointer;
  }

  .site-nav__close:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: 2px;
  }

  /* --- The menu inside the panel ---------------------------------------- */

  .site-nav .menu {
    display: block;
    height: auto;
    margin: 10px 0;
    padding: 0;
  }

  .site-nav .menu-item > a {
    display: block;
    gap: 0;
    padding: 8px 20px;
    color: var(--c-text);
    white-space: normal;
  }

  /* WAS `var(--c-black)`, on a comment claiming black-on-accent was the
     reference's own 2.8:1 choice. IT IS NOT, and the claim came from reading
     the wrong element.

     THE REFERENCE SHIPS TWO ElementsKit NAV WIDGETS, both present in the DOM
     at every width: index 0 is the desktop bar, index 1 is the offcanvas
     panel. Only index 1 ever renders below 1025. Index 0's links are
     #160a0a, and querying `.elementskit-menu-container` without an index
     returns THAT one first, panel open or shut -- which is how near-black
     got measured and written down as the offcanvas colour.

     Driven open at 502 and read off the links that were actually on screen,
     index 1 is:

        current item (Home)   #ffffff
        other top level       #f5f5f4   <- this rule
        submenu               #ffffff   <- see the submenu rule below

     So the accessibility note was answering a question the reference never
     asked: it never had a 2.8:1 problem, we did. The current item still goes
     to pure white, which is the reference's own one-step lift. */
  .site-nav .current-menu-item > a { color: var(--c-white); }
  .site-nav .menu-item > a:hover { color: var(--c-white); }

  /* --- Submenu ---------------------------------------------------------- */

  /* The row carries the link and its toggle side by side, with the submenu
     dropping onto a line of its own underneath. */
  .site-nav .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Shrunk to its text so the toggle sits immediately after the words, where
     the reference's caret sits, rather than out at the far right. */
  .site-nav .menu-item-has-children > a {
    flex: 0 1 auto;
    padding-right: 0;
  }

  /* The caret inside the link is decorative at every width. Below 1024 the
     toggle button beside it carries the real one. */
  .site-nav .menu-item-has-children > a .menu-caret { display: none; }

  .site-nav .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 33.6px;
    margin: 8px 0;
    padding: 4px 15px;
    border: 0;
    background: none;
    color: var(--c-white);
    cursor: pointer;
  }

  .site-nav .menu-toggle:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: -2px;
  }

  .site-nav .menu-toggle .menu-caret svg {
    width: 12px;
    height: 12px;
    transition: transform var(--dur-fast) var(--ease);
  }

  .site-nav .menu-toggle[aria-expanded="true"] .menu-caret svg {
    transform: rotate(180deg);
  }

  /* Everything the desktop dropdown sets has to come off: it is absolutely
     positioned, floating and opened on hover, none of which applies here. */
  .site-nav .sub-menu {
    position: static;
    display: none;
    flex-basis: 100%;
    min-width: 0;
    margin-left: 20px;
    padding: 5px 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  /* Hover must not open it any more; only the toggle does. */
  .site-nav .menu-item-has-children:hover > .sub-menu,
  .site-nav .menu-item-has-children:focus-within > .sub-menu {
    display: none;
  }

  .site-nav .menu-item-has-children.is-open > .sub-menu,
  .site-nav .menu-item-has-children.is-open:hover > .sub-menu,
  .site-nav .menu-item-has-children.is-open:focus-within > .sub-menu {
    display: block;
  }

  /* Pure white, not `--c-text`: the reference's submenu really is #ffffff
     while its top-level rows sit a shade down on #f5f5f4. The two are 4/255
     apart and invisible side by side, but they are two separate authored
     values and this file matches both rather than flattening them. */
  .site-nav .sub-menu a {
    padding: 8px 20px 8px 10px;
    color: var(--c-white);
    white-space: normal;
  }

  .site-nav .sub-menu a:hover {
    background: none;
    color: var(--c-white);
  }

  /* While the panel is open the page behind it must not scroll.

     Only the y axis is set, but be clear about what this does: once one axis
     is locked, the other cannot stay `clip`, so the body's overflow-x
     computes to hidden for as long as the panel is open. That is gotcha 1's
     sticky-killer. It is harmless HERE only because nothing behind a
     full-screen panel can scroll or stick, and `clip` returns the moment the
     class comes off. Do not lift this rule out of the .nav-open scope. */
  body.nav-open { overflow-y: hidden; }
}

/* ==========================================================================
   1. Site header, mobile
   Same machine, smaller. Only the bar changes; the panel is identical.
   ========================================================================== */

@media (max-width: 767px) {

  /* The burger sits further in from the right edge than the logo does from
     the left. That asymmetry is the reference's: its mobile header is two
     percentage columns that add up to 91.87%, leaving 8.13% of the row dead
     on the right. Reproduced as a percentage so it holds at every mobile
     width the way the reference's does. Change this one line to
     `padding-right: 20px` if it should sit flush instead. */
  .site-header__inner {
    padding: 10px 20px;
    padding-right: calc(8.13% + 10px);
  }

  /* Height-pinned for the same reason as the 1024 rule above, and it has
     to restate the height because that rule now sets one. 35.3px is what
     123.8px wide came out to at the old 3.5:1. */
  .site-logo img { width: auto; height: 35.3px; }
}

/* ==========================================================================
   3. Hero, tablet: 768 to 1024

   Two things happen here. The header stops overlaying and the hero is pulled
   up 92px to underlap it, at every width below 1025. And the desktop hero's
   absolute layout, whose top/left values are all measured for 1440, has to
   become a flow layout or its children sit off the right-hand edge.

   The reference keeps its DESKTOP hero at tablet rather than swapping to the
   mobile one, and changes exactly three things: the two headings drop from
   101 and 90 to 40, and the rotating line goes UP, from 27 to 65. Both text
   shadows, both alignments and the play button and ring are byte-identical to
   desktop. That is the whole authored tablet design.

   What is NOT reproduced is where its layout puts them. The reference's hero
   content container is 130% of the viewport (1305.2px inside 1024), pushed
   right by a translate, so its 65px rotating line runs about 480px past the
   right edge and is cut off mid-word, and its 100px play button paints on top
   of the paragraph. Both are defects rather than design: every other section
   on the page behaves at tablet, and the only other elements that overflow
   are the two marquees and the slider, which are meant to. So the type scale
   and the arrangement are the reference's, and the geometry is authored to
   fit. Same call already made for the mobile hero's transform soup.

   Arrangement, which is desktop's: the three text blocks full width, then a
   centred row with the play button and its caption ring on the left and the
   paragraph over the button on the right.
   ========================================================================== */

/* Shared by tablet and mobile: the header is in normal flow at both, so the
   hero is pulled up under it at both. Everything below this is the tablet
   reshape only, and mobile replaces it wholesale. */
@media (max-width: 1024px) {
  .hero {
    height: auto;
    margin-top: -92px;
    padding: 175px var(--gutter) 85px;
  }
}

/* The reshape is scoped to the tablet range rather than to `max-width: 1024`,
   because the mobile hero below is a full replacement rather than a set of
   overrides: left open-ended, this block's grid placement and its 26px row
   margins would leak past 767 into a layout that resets neither. Exactly one
   of the two applies at every width. */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Three sizes, and nothing else. The line heights are ratios already
     (1.2, 1.2, 1.3), so 48, 48 and 84.5 fall out of these on their own, which
     is what the reference computes. The shadows stay pointing down and right;
     only the mobile variant flips them. */
  :root {
    --hero-h1-fs:    40px;
    --hero-h2-fs:    40px;
    --hero-fancy-fs: 65px;
  }

  /* Four columns, but only two carry anything: the outer `1fr` pair is what
     centres the media and copy pair as a block, while the text blocks above
     span all four and so stay full width. Without the outer tracks the media
     would be pinned to the left edge instead of sitting where the reference
     puts it. */
  .hero__content {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    align-items: start;
    row-gap: 20px;
    height: auto;

    /* The reference renders its headline 346px below the top of the hero,
       not 175px: its inner container carries `margin: 121px 0 -240px` and
       leads with an empty 20px box, and the rest falls out of the nesting.
       That lead-in is real visible space, a wide dark band under the header,
       so it is reproduced as the one number it resolves to rather than as
       the four boxes that produce it. 175 + 171 = the reference's 346. */
    padding-top: 171px;
  }

  /* Out of the absolute layout. Every desktop top/left is measured for 1440
     and none of them survive the narrower box. */
  .hero__el {
    position: static;
    max-width: 100%;
  }

  .hero__h1,
  .hero__h2,
  .hero__fancy {
    grid-column: 1 / -1;
    width: auto;
  }

  /* Both inner elements carry a desktop indent that centred the text inside
     its own oversized box. The box is gone, so the indent has to go with it. */
  .hero__h1-inner { margin: 0; }

  .hero__h2-inner { margin: 0; }

  /* Left aligned, which is the reference's authored value at every width, and
     the one mixed alignment in the section: the two headings above it are
     centred. */
  .hero__fancy {
    text-align: left;
    white-space: normal;

    /* Three lines reserved, because the rotator changes the line count. At
       65px in a 1004px box the prefix takes two lines and the longest phrase
       ("Social Media Marketing", 741px) is forced onto a third, while a short
       one still fits on the second. Without this the hero grows and shrinks
       by a whole 84.5px line as the typewriter cycles, shunting everything
       below it. The reference never hits this because its line is laid out in
       a 1305px box that overflows the screen. */
    min-height: calc(var(--hero-fancy-fs) * var(--hero-fancy-lh) * 3);
  }

  /* Inline rather than inline-flex so the line can break between the prefix
     and the rotator. The rotator itself keeps its nowrap, matching the
     reference's own <b>, so a phrase never breaks mid-name. */
  .fancy-text {
    display: inline;
    white-space: normal;
  }

  /* --- The media and copy row ------------------------------------------- */

  /* 26px on top of the grid's own 20px row gap is the reference's 46px
     between the rotating line and this row. */
  .hero__media {
    grid-column: 2;
    grid-row: 4 / span 2;
    display: flex;
    align-items: center;
    margin-top: 26px;
    margin-right: 30px;
  }

  /* The ring used to lap the play button's right-hand side by -30px here,
     carrying the desktop relationship (ring box at 404 over a play button at
     334) across unchanged. The disc went on 2026-09-09 and the margin went
     with it: it existed only to overlap that disc, and with the ring alone in
     this flex row it would drag the badge 30px off its own alignment. The
     ring keeps its desktop size; the reference does not resize it at tablet. */

  .hero__para {
    grid-column: 3;
    grid-row: 4;
    width: 443.2px;
    margin-top: 26px;
  }

  .hero__cta {
    grid-column: 3;
    grid-row: 5;
  }
}

/* ==========================================================================
   3. Hero, mobile

   The reference ships a SECOND hero for this width and hides the desktop one.
   Same call as the header: one hero that changes shape, because the content
   is identical and only the arrangement differs. Desktop stacks its parts
   with absolute top/left; here they become a centred column in normal flow.

   The measured mobile variant, at 390: section 375.2x698, padding
   175/10/85, 20px gaps, everything centred, and the play button with the
   caption ring laid over its right-hand side.
   ========================================================================== */

@media (max-width: 767px) {

  /* Hero-only tokens, so the mobile scale is stated once rather than being
     spread through the rules below. The offset shadows change direction as
     well as size: desktop throws them down and right, mobile up and left. */
  :root {
    --hero-h1-fs:       29px;
    --hero-h2-fs:       26px;
    --hero-fancy-fs:    19px;
    --hero-h1-shadow:   -2px -1px 0 var(--c-accent);
    --hero-h2-shadow:   -3px -1px 0 var(--c-accent);
    --hero-circle-size: 108px;
  }

  .hero {
    height: auto;
    min-height: 350px;
    padding: 175px 10px 85px;
    text-align: center;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    height: auto;
  }

  /* Out of the absolute layout and into the column. Everything below is
     undoing a desktop offset rather than setting a mobile one.

     Only the text blocks lose their width: the play button and the ring take
     theirs from the tokens above, and a blanket `width: auto` here collapses
     the play button to the 25px of its own glyph. */
  .hero__el {
    position: static;
    max-width: 100%;
  }

  .hero__h1,
  .hero__h2,
  .hero__fancy,
  .hero__para,
  .hero__cta { width: auto; }

  .hero__h1-inner {
    margin: 0;
    font-weight: 700;
    letter-spacing: normal;
  }

  .hero__h2-inner {
    margin: 0;
    font-weight: 800;
    white-space: normal;
  }

  /* Two lines here rather than one, so the nowrap has to come off both the
     line and the rotator inside it. */
  .hero__fancy {
    font-weight: 300;
    white-space: normal;
  }

  .fancy-text {
    display: inline;
    white-space: normal;
  }

  .fancy-text__rotator { white-space: normal; }

  .hero__para { width: auto; }

  /* The ring is laid over the play button's right-hand side rather than set
     beside it: 32px of overlap is what the reference measures. */
  .hero__media {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The ring's text is set on a circle wider than its own SVG box and spills
     outside it, so neither the box nor the SVG rect is what the eye reads.
     The -39px here was tuned against the INK, to lap the play button by 41.5
     the way the reference's caption ring does. The disc went on 2026-09-09,
     so the lap has nothing to lap and the margin went with it: this row is
     `justify-content: center`, and -39px would push the lone badge that far
     left of the centre it should now hold. */
}

/* ==========================================================================
   The global tablet scale

   Read off the reference by capturing every computed style in its section
   wrapper at 1440 and again at 1024 and diffing the two maps, which returns
   its responsive stylesheet directly rather than by inference. Two rules run
   through nearly every section:

     every section heading   -> 40px on 1.2, whatever it was at desktop
                                (29, 31, 33, 39, 44, 45, 50, 116 all land here)
     every card/block title  -> 20px on 1.2, down from 22

   The first is the surprising one: the reference does not scale its headings
   proportionally, it collapses them onto a single tablet size, so its 116px
   display line and its 29px band heading come out identical at tablet. That
   is an Elementor global, not a per-section decision, and it is reproduced
   here as one token edit rather than as fifteen.

   Alongside them, a consistent tightening: 80px bands become 40, 40px card
   padding becomes 30, 60px icons become 50, and the 20/30/50px gaps become
   15/20/30. Those are the tokens below; the per-section blocks that follow
   carry only what does not fit the pattern.
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    /* Headings, all collapsing onto 40px. The line heights are ratios, so
       48px falls out of each on its own. */
    --fs-head:        40px;
    --fs-display:     40px;
    --fs-about-title: 40px;
    --fs-h-primary:   40px;

    /* Card and block titles. */
    --fs-block-title: 20px;
    --fs-h-secondary: 20px;

    /* Cards tighten by a quarter. The GAP between them deliberately does
       not: measured on the reference it is 30px at both widths, and it is
       what makes the two-across grids resolve to `calc(50% - 15px)`. The
       30 -> 20 the diff reports belongs to the gaps INSIDE a column, which
       are set on those columns individually below. */
    --card-pad:  30px;
    --card-icon: 50px;

    /* The hung social icon, 80 -> 60, with its glyph at 40 -> 30. */
    --social-icon: 60px;

    /* The services ticker is the one label that gets BIGGER, and by a lot. */
    --ticker-fs: 34px;
  }
}

/* ==========================================================================
   4. Services ticker
   The band grows: a 20px label on 13px of padding becomes 34px on 22px.
   ========================================================================== */

@media (max-width: 1024px) {
  /* The label's leading is exactly its own size here, not the 1.3 the
     desktop band uses: the reference computes 34px on 34px. Left at 1.3 the
     band comes out 108 against its 98. */
  .ticker__item {
    padding: 22px 0;
    line-height: 1;
  }
}

/* ==========================================================================
   5. Section heading band
   Heading only, and it comes from the token above. Nothing else moves.
   ========================================================================== */

/* ==========================================================================
   6. Intro grid
   The reference authors NOTHING here for tablet: the two columns simply get
   narrower and the copy rewraps. Left alone deliberately.
   ========================================================================== */

/* ==========================================================================
   7. About agency
   ========================================================================== */

@media (max-width: 1024px) {

  /* The reference runs 160/80 at desktop and 80/40 at tablet, so the band
     halves rather than shrinking evenly. Our desktop rule states the same
     total as one symmetrical 120, which matches the height; at tablet the
     split is reproduced, because halving 120 twice would put the content
     20px high inside the band. */
  .section-about { padding: 80px var(--gutter) 40px; }

  /* The section STACKS. Desktop is a sticky heading column beside a scrolled
     column of five blocks; at tablet the reference puts the heading full
     width at x20 and the blocks under it at x56, so the sticky travel goes
     away entirely and the two become one measure. */
  /* It is a two-column GRID, not a flex row, so this is a template change
     rather than a direction one. `flex-direction` here did nothing at all. */
  .section-about__grid { grid-template-columns: 1fr; }

  .section-about__aside,
  .section-about__main { width: 100%; }

  .section-about__aside { padding: 10px; }

  /* 46 on the left, 10 on the right. Not symmetrical, and not a guess: the
     reference's blocks run x56 to 1004 inside a container that spans 10 to
     1014. Set through the token so the timeline dots move with it. */
  :root { --about-main-pad: 46px; }

  .section-about__main { padding: 10px 10px 10px var(--about-main-pad); }

  /* 18 -> 15 over the heading and 40 -> 30 under it. */
  .section-about__title { margin: 15px 0 30px; }
}

/* ==========================================================================
   8. Stat counters
   ========================================================================== */

@media (max-width: 1024px) {

  .section-stats .container { padding: 50px 10px; }

  /* The card loses 30px of padding all round and gains a 40px gap that it
     does not have at desktop, where the heading's own 64px bottom margin
     does that job on its own. */
  .stats-card {
    gap: 40px;
    padding: 48px 50px;
  }

  /* On below 1025. The card stacks here, so the reference's divider drops
     under the counters and its 31px, plus the card's 40px gap, becomes real
     height. That is 71px this section was missing at tablet. */
  .stats-card__rule { display: block; }

  /* Zero, not 20: the card's new 40px gap is the whole distance between the
     heading and the counters on the reference, measured at 40 exactly. The
     desktop rule's 64px margin has to come off or the two stack up to 104. */
  .section-stats__title { margin-bottom: 0; }

  /* `1fr` is `minmax(auto, 1fr)`, so a long label's min-content width can
     push a cell wider than its share and the row overflows the card. At 768
     that was worth 159px off the right-hand edge. `minmax(0, 1fr)` lets the
     cells actually be a quarter each and the labels wrap instead. */
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .stat { padding: 0 15px; }
}

/* ==========================================================================
   9. Team intro
   The heading is the only authored change: 44 -> 40, off the pattern.
   ========================================================================== */

@media (max-width: 1024px) {
  .section-team-intro__title { font-size: 40px; }
}

/* ==========================================================================
   10. Services grid
   ========================================================================== */

@media (max-width: 1024px) {

  .section-services { padding: 40px var(--gutter); }

  /* The head row stops reserving space on its right and stops holding the
     cards off below it: both become the card grid's own 20px gap. */
  .section-services__head {
    gap: 15px;
    margin-bottom: 0;
  }

  /* The head row STACKS. Both of its columns go full width, so the aside
     copy sits under the heading instead of beside it. Every head row on the
     page does this at tablet: services, social, how it works and
     testimonials all measure their heading and their aside at the same x
     and the same width on the reference. */
  .section-services__head-text {
    gap: 15px;
    width: 100%;
    padding-right: 0;
  }

  .section-services__head-aside {
    width: 100%;
    gap: 20px;
  }

  /* Off the 40px pattern: this one is a section heading, not a lede, and it
     goes UP, from 23 to 40. */
  .section-services__lede { font-size: 40px; }

  /* Three across becomes two. The grid gap stays 30, so the card is
     `calc(50% - 15px)`, which is the reference's 477px at 1024. The closing
     line still rides along as a full-width final item. */
  .service-item { width: calc(50% - 15px); }

  /* The card's internals tighten by 55px, which over five rows was the whole
     284px the section was running long. Same split as desktop: this margin
     plus the card's own 20px flex gap is the icon-to-text distance, so 30
     here is the reference's 50. */
  .service-item__head { margin-bottom: 30px; }

  .service-item__title { margin-bottom: 15px; }
}

/* ==========================================================================
   11. Feature block
   Both the heading and the subheading move to 40. The 134.762% overflow that
   gives the block its stepped shape is untouched: it is a percentage of the
   column, so it narrows with it and keeps the same proportion.
   ========================================================================== */

@media (max-width: 1024px) {

  .section-feature__title,
  .section-feature__subtitle { font-size: 40px; }

  /* The stepped shape goes away entirely at tablet. Desktop runs a 64%
     column whose body is pushed back out to 134.762% of it; the reference
     puts every element in this section at the same x and the same width at
     1024, so the column and its overflow both become 100% and the block
     reads as one plain measure. Do not carry the desktop overflow down: at
     1004px it would run 350px off the right-hand edge. */
  .section-feature__row { margin-bottom: 0; }

  .section-feature__col {
    width: 100%;
    padding-right: 0;
  }

  .section-feature__wide {
    width: 100%;
    gap: 20px;
  }
}

/* ==========================================================================
   12. Clients
   One authored change in the whole section: the heading block's side margins
   come in from 250px to 42px, which is what lets the three lines of copy use
   the narrower band instead of being squeezed into the middle third.
   ========================================================================== */

@media (max-width: 1024px) {

  /* The reference's 42px inset at 1024 is not an authored 42: the block is a
     centred max-width, and 42 is what half the slack happens to be in a
     1004px container. It reads 26 at 992 and 0 at 768, which only a
     max-width explains. Stated as one, so it holds at every width instead of
     only at the one it was measured at. */
  .clients__heading {
    max-width: 920px;
    margin: 0 auto 40px;
  }
}

/* ==========================================================================
   13. Longform copy
   Heading only, 27 -> 40. The 83.024% body column is a percentage and holds.
   ========================================================================== */

@media (max-width: 1024px) {
  .section-seo__title { font-size: 40px; }
}

/* ==========================================================================
   14. Social cards
   ========================================================================== */

@media (max-width: 1024px) {

  .section-social { padding: 40px var(--gutter); }

  .section-social__head {
    gap: 15px;
    margin-bottom: 0;
  }

  .section-social__head-text {
    gap: 15px;
    width: 100%;
    padding-right: 0;
  }

  .section-social__head-aside { width: 100%; }

  /* Three pills across becomes two, on the same 30px gap as every other
     card grid. */
  .social-card { width: calc(50% - 15px); }

  /* The pill tightens on every side, and by different amounts: the 70px left
     inset that clears the hung icon comes down to 50, because the icon
     shrinks too. Its MARGIN does not change: an earlier note in the handoff
     had it going to 20px at tablet, but the reference computes 30px 0 0 30px
     at 1024, the same as desktop. Measured, not inherited. */
  .social-card__pill { padding: 20px 30px 20px 50px; }

  /* The hung icon's own tablet offsets, measured against the pill's border
     box rather than taken from the reference's authored `top`/`left`, which
     resolve against a different box and do not describe where it lands.
     They are not a scaling of the desktop -30/-30: at 60px the icon hangs
     almost entirely outside the pill's left edge rather than lapping into
     its padding. */
  .social-card__icon {
    top: -39px;
    left: -49px;
  }

  .social-card__icon svg { height: 30px; }
}

/* ==========================================================================
   16. Founder message, tablet and mobile

   This section has THREE states on the reference, not two, and the two
   breakpoints do different jobs.

   At 1024 the Elementor BLOCK swaps: child 15 gives way to child 16. That is
   a content change, and the only thing it actually changes is that the
   founder's name line disappears. Child 16 is still a two-column row, and
   stays one all the way down to 768.

   At 767 that row STACKS into a single centred column.

   An earlier pass here read the block swap as the stack and put the whole
   mobile treatment at 1024, which left the portrait spanning a 1004px column
   and the section 2104px tall against the reference's 1090. The two are
   separate events and are now split accordingly.

   Measured off the reference, per state:

                      desktop >=1025   tablet 768-1024    mobile <=767
     media column        51%              50%               100%
     text column         45.788%          45.788%           100%
     portrait            58% of column    column less 80px  100%
     name line           shown            hidden            hidden
     title               45/500 on 54     40/500 on 48 L    40/500 on 48 C
     body                15/400 on 30     16/400 on 32 L    16/400 on 32 C
     closing line        20/500 on 24     40/500 on 48 L    30/500 on 36 L
     button              229.6 x 50.4     229.6 x 50.4      229.6 x 50.4

   Every type change is a font-size change and nothing else: both line
   heights are ratios (1.2 and 2), so 48, 32 and 36 fall out on their own.
   ========================================================================== */

/* --- Shared by tablet and mobile: the block swap ------------------------- */

@media (max-width: 1024px) {

  /* The reference's second block simply has no name line. It is a content
     difference rather than a layout one: delete this rule to keep the name
     on small screens. */
  .founder__name { display: none; }

  /* The one column width that moves, and only by a point. */
  .founder__col--media { width: 50%; }

  .founder__title { font-size: 40px; }

  .founder__body { font-size: 16px; }

  /* Desktop reserves a 50px row and then renders the badge 147px higher so
     it lands on the portrait. The reference's second block drops that
     transform at every width and lets the badge sit in the flow under the
     portrait. */
  .founder__social-link { transform: none; }
}

/* --- Tablet only: still a row --------------------------------------------
   Everything here would be wrong at mobile, where the card stacks.
   ------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {

  /* The reference's card gains 50px of padding at tablet, on top of the 10px
     its inner row already carries. Ours is one box where the reference is
     two, so the two numbers are added: 60px all round puts the columns at
     x 71 in an 882px content box at 1024, which is the reference's exactly,
     and holds at every tablet width because both layers are flat pixels. */
  .founder-card__inner { padding: 60px; }

  /* Inset by a flat 40px each side rather than the desktop card's 58%, which
     in a half-width column would leave the portrait too small to read. At
     1024 that is 341px inside a 421px column, which is the reference's. */
  .founder__portrait img { width: calc(100% - 80px); }

  /* Twice the desktop size, and the one place where the closing line is the
     same size as the heading above it. It drops back to 30px at mobile. */
  .founder__cta-title { font-size: 40px; }
}

/* --- Mobile only: the stack ---------------------------------------------- */

@media (max-width: 767px) {

  .founder-card {
    flex-direction: column;
    align-items: stretch;
  }

  /* 20px of vertical padding here against the desktop card's 10px all round,
     which is what opens the gap between the portrait and the message. */
  .founder-card__inner {
    flex-direction: column;
    padding: 20px 0;
  }

  .founder__col--media,
  .founder__col--text { width: 100%; }

  .founder__col--text { padding: 10px 0 0; }

  /* Full width of its column now, not the tablet card's 40px inset nor the
     desktop card's 58%. The radius and the hard offset shadow both stay. */
  .founder__portrait img { width: 100%; }

  .founder__title {
    margin: 0;
    text-align: center;
  }

  .founder__body {
    margin: 0 20px 20px;
    text-align: center;
  }

  /* Every other block in this column centres; this one does not, and it is
     the only type size that differs from tablet. That is the reference's,
     not an oversight. */
  .founder__cta-title {
    font-size: 30px;
    text-align: left;
  }
}

/* ==========================================================================
   18. Display headline

   The biggest single drop on the page: 116px to 40px, which is the global
   tablet heading size, so this line ends up the same size as the band
   heading in section 5. The band halves with it, 80 -> 40.

   The reference reaches one line here by swapping in a second heading block
   for tablet; this build has one heading and an explicit <br>, so the break
   is suppressed instead. At 40px the whole line measures about 600px, well
   inside 728 at the narrow end of the range, so it never wraps back.
   ========================================================================== */

@media (max-width: 1024px) {

  .section-numbers .container { padding: 40px 0; }

  .section-numbers__title { font-size: 40px; }

  .section-numbers__title br { display: none; }
}

/* ==========================================================================
   19. How it works
   ========================================================================== */

@media (max-width: 1024px) {

  /* The band carries the padding, not the section: putting it on the section
     would look identical until the rotating shape's `top: 40%` resolved
     against the wrong height. */
  .section-process__band { padding: 40px 10px; }

  /* Two gaps move, not one: the head ROW gains a 15px gap it does not have
     at desktop, and the text column inside it comes down from 20 to 15.

     `flex-wrap: wrap` is what actually stacks it. Unlike the services and
     social head rows this one is nowrap at desktop, so two children at
     `width: 100%` just shrink back to their old proportions and the row
     looks untouched. Caught by eye in a screenshot, not by the height
     numbers, which barely moved. */
  .section-process__head {
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 0;
  }

  .section-process__head-main {
    gap: 15px;
    width: 100%;
    padding-right: 0;
  }

  .section-process__head-aside { width: 100%; }

  .process-grid { flex-wrap: wrap; }

  /* Three across becomes two, and the third card wraps to a row of its own
     rather than stretching. 964 less the 30px gap, halved, is the
     reference's 467. */
  .process-item { width: calc(50% - 15px); }

  .process-item { padding: var(--card-pad); }

  .process-item__title { margin-bottom: 30px; }

  /* The one number in this section that is neither a heading nor a card
     title, and it has its own tablet value: 40/48 becomes 34/40.8, which is
     the same 1.2 ratio. */
  .process-item__step-num {
    font-size: 34px;
    line-height: 40.8px;
  }

  .process-item__icon svg {
    width: var(--card-icon);
    height: var(--card-icon);
  }
}

/* ==========================================================================
   20. Testimonials
   ========================================================================== */

@media (max-width: 1024px) {

  .section-testimonials .container { padding: 40px 10px; }

  /* The container takes on 10px of horizontal padding here that it does not
     carry at desktop, and the body was still adding its own 10px on top, so
     both blocks inside it sat 20px narrower than the reference's at every
     width below 1025. The section-height gate could not see it: a narrower
     column only shows up through where the copy wraps, and the copy differs
     anyway. With the horizontal half dropped the card and the slider land at
     x20 and 984 at 1024, and x20 and 728 at 768, which is the reference's. */
  .section-testimonials__body { padding: 10px 0; }

  .section-testimonials__head {
    gap: 15px;
    margin-bottom: 0;
  }

  .section-testimonials__head-main {
    gap: 15px;
    width: 100%;
    padding-right: 0;
  }

  /* Section 11's overflow trick a second time, unwound the same way: the
     86% column and the 138.618% block inside it both go full width. */
  .section-testimonials__lede { width: 100%; }

  /* The BODY stacks as well as the head. Desktop sits the stat card beside
     the slider; at tablet the reference puts both at x20 and 984 wide, card
     above slider. Missed on the first pass, and it was the single largest
     error left in the page: the slider kept a 640px column and the section
     came out 310px short. */
  .section-testimonials__body {
    flex-direction: column;
    align-items: stretch;
  }

  /* Stacking is not enough on its own: both blocks carry an explicit desktop
     width (32% and `calc(68% - 15px)`) that survives the direction change and
     leaves them sitting in the left two thirds of a full-width column. The
     reference measures both at 984 at 1024. */
  .review-card,
  .testimonial-slider { width: 100%; }

  /* 50 -> 30, which is a bigger cut than the 40 -> 30 the other cards take. */
  .review-card { padding: 30px; }

  .review-card__score { font-size: 60px; }

  /* The slide stops being indented, and its quote drops to the card-title
     size. Keep exactly one placeholder quote at the tallest line count: the
     slider's autoHeight is off, so the longest quote sets the section. */
  .testimonial { padding-left: 0; }

  /* 40 -> 30 under the quote. Read off the reference's own quote paragraph,
     which computes `20px 0 30px` at 1024; the 30 -> 20 in the diff belongs
     to a different box inside the slide. */
  .testimonial__quote { margin: 20px 0 30px; }

  .testimonial__quote p { font-size: 20px; }

  /* The arrows shrink with the section: 60 -> 50, and the glyph box with
     them, 24 -> 18, which puts the arrow ink at the reference's 16px. The
     pair stays hung off the right edge and the 90px offset holds, so the gap
     between the two buttons opens from 30 to 40. That is the reference's own
     arithmetic, not a rounding here: it drops the offset to 80 one
     breakpoint further down. */
  .testimonial-slider__nav {
    width: 50px;
    height: 50px;
  }

  .testimonial-slider__nav svg { width: 18px; height: 18px; }
}

/* The arrows stop hugging the right edge at mobile and CENTRE as a pair under
   the slider, at 45px with the 30px gap back. The two offsets look arbitrary
   and are not: they are what centres a 45 + 30 + 45 run on the slider's own
   midpoint, and they were read off the reference's computed `right` at two
   widths (378.5px in a 727px slider, 190px in a 350px one) rather than
   guessed, so they hold at every width in the band instead of only at the one
   they were measured at. */
@media (max-width: 767px) {

  .testimonial-slider__nav {
    width: 45px;
    height: 45px;
  }

  .testimonial-slider__nav svg { width: 17px; height: 17px; }

  .testimonial-slider__nav[data-slider-prev] { right: calc(50% + 15px); }
  .testimonial-slider__nav[data-slider-next] { right: calc(50% - 60px); }
}

/* ==========================================================================
   21. FAQ heading
   39 -> 40, the smallest heading change on the page. Sections 21 to 25 carry
   no band padding at any width, so nothing else moves here.
   ========================================================================== */

@media (max-width: 1024px) {
  .section-faq-head__title { font-size: 40px; }

  /* THE REFERENCE PULLS THIS HEADING UP 5px, and only below 1024. Measured
     either side of the boundary: at 1025 its widget container sits at
     margin-top 0 and the band is 66.8, at 1024 the container carries
     margin-top: -5px and the band is 63. So this is the Elementor tablet
     breakpoint, not one of the other four.

     Their -5px sits on `.elementor-widget-container`, a block wrapper we do
     not have; ours goes on the heading itself, which is the direct flex child
     of `.container`, and lands on the same 63. Without it the band reads
     +5.0px at 1024, 768 AND 390 -- constant across widths, which is what
     separated it from the copy-length gaps around it, since those all vary.
     The type was identical on both sides throughout (h2, 40px/300,
     line-height 48). */
  .section-faq-head__title { margin-top: -5px; }
}

/* ==========================================================================
   22. FAQ accordion
   Nothing authored. The bars are full width already and the copy rewraps.
   The transparent .8px border stays: it is a 1px border quantised by the
   display's 1.25 device pixel ratio, not a strange authored value.
   ========================================================================== */

/* ==========================================================================
   23 to 25. Closing CTA
   The heading goes 33 -> 40 and nothing else in the run changes. The empty
   schema box at the end of section 25 still renders nothing and is still
   worth 20px of section height.
   ========================================================================== */

@media (max-width: 1024px) {
  .section-cta-head__title { font-size: 40px; }
}

/* ==========================================================================
   21 and 23. FAQ heading and CTA heading
   Both drop from the tablet 40 onto the common 30. They are the only two
   headings that do not move at all between desktop and tablet, which makes
   it easy to assume they hold here too. They do not.
   ========================================================================== */

@media (max-width: 767px) {

  .section-faq-head__title { font-size: 30px; }

  .section-cta-head__title { font-size: 30px; }
}

/* ==========================================================================
   26. Work together

   The display heading drops 180 -> 120, which is the one heading on the page
   that does NOT collapse onto 40: it is far enough above the rest that the
   reference gives it its own tablet value.
   ========================================================================== */

@media (max-width: 1024px) {

  .section-work-together .container { padding: 40px 0; }

  .work-together { gap: 10px; }

  .work-together__title { font-size: 120px; }
}

/* ==========================================================================
   27. Footer columns
   ========================================================================== */

@media (max-width: 1024px) {

  .section-footer .container { padding: 40px 0 0; }

  .footer-cols {
    gap: 20px;
    margin-bottom: 10px;
  }

  /* Elementor pays for the column gaps out of the percentages, so a narrower
     gap means wider columns: three 20px gaps across four columns is 15px
     each, where desktop's three 30px gaps were 22.5. */
  .footer-col { width: calc(16.67% - 15px); }
  .footer-col--brand,
  .footer-col--wide { width: calc(33.33% - 15px); }

  /* The brand column spaces its rows further apart than the rest at every
     width; it tightens with them. */
  .footer-col--brand { gap: 20px; }

  /* The address row is set in different type from the two rows above it at
     desktop, 17/25.5 against 22/26.4. At tablet the reference collapses that
     distinction: every contact row is 20px, and the address alone keeps its
     looser 1.5 leading. */
  .footer-contact--address .footer-contact__text {
    font-size: 20px;
    line-height: 1.5;
  }
}

/* ==========================================================================
   28. Footer base
   Nothing authored. It is 20px of nothing at every width.
   ========================================================================== */

/* ==========================================================================
   The slider's own breakpoint: 1023

   Swiper carries its breakpoints in JS rather than in CSS, and the reference
   declares three of them (320, 768, 1024) against `min-width`. Only one of
   the three changes anything: the gutter between slides is 15px at 1024 and
   above and 10px below it. Because Swiper's are min-width and everything else
   in this file is max-width, the boundary lands on 1023 rather than on the
   1024 the rest of the tablet rules use. Measured either side: 1024 renders
   15, 1023 renders 10.

   main.js reads this value back off the computed style rather than holding a
   constant of its own, so the stride it scrolls by follows the rule instead
   of having to be kept in step with it.
   ========================================================================== */

@media (max-width: 1023px) {
  .testimonial-slider__track { gap: 10px; }
}

/* ==========================================================================
   The reference's other two breakpoints: 991 and 768

   The handoff recorded the reference as having exactly two breakpoints, 1024
   and 767, and everything else in its stylesheets as unused Bootstrap
   boilerplate. That is very nearly right but not quite: walking the computed
   styles across 1024, 992, 991, 800, 769 and 768 turns up real changes at
   991 and at 768. Both are small, and both come from CSS that is not
   Elementor's: 991 and 768 are Bootstrap's own md and sm values, and section
   12 is a hand-pasted HTML widget that ships with them.

   Four rules between the two of them, so they are reproduced rather than
   rounded off to the nearest Elementor breakpoint.
   ========================================================================== */

@media (max-width: 991px) {

  /* The pill's inset, which holds at 30px all the way down from desktop and
     drops here rather than at 1024. An earlier note in the handoff put this
     at tablet; it is this breakpoint, not that one. */
  .social-card__pill { margin: 20px 0 0 20px; }

  /* The hung icon comes in with it. Without this it keeps the -39/-49 of the
     wider tablet band and pokes 8px off the left edge of the viewport, which
     the reference never does. Rendered offsets again, not the reference's
     authored `top: -40px; left: -75px`, which resolve against a box that is
     not the pill. */
  .social-card__icon {
    top: -19px;
    left: -24px;
  }

  /* The magic cursor goes off here, and the reference does it on WIDTH, not
     on pointer capability: its whole `#magic-cursor` container is
     `display: none` from 991 down, with the follower left in the DOM and
     never moved again. Ours was already off on touch hardware through the
     `(hover: hover) and (pointer: fine)` query in sections.css; this is the
     other half, and it is what a desktop window dragged narrow now gets.
     main.js holds the same width so the frame loop stops rather than easing a
     dot nobody can see. */
  .magic-cursor { display: none; }
}

/* The slider's prev arrow moves in from 90 to 80, which closes the gap between
   the two buttons back to the 30px it has at desktop. It shares 991 with the
   social pill above rather than the 1024 the arrow's own size change uses, so
   between 1024 and 992 the reference really does run a 40px gap. Reproduced
   rather than tidied.

   The band is CLOSED at the bottom on purpose. Below 768 the pair centres
   instead of hugging the right edge, and that rule sits earlier in this file
   with the rest of section 20; left open-ended, this one is later and equally
   specific, so it wins and puts prev to the RIGHT of next. Same trap as the
   footer column selectors, resolved the other way: scope, not order, because
   the two rules belong to different sections of the file. */
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-slider__nav[data-slider-prev] { right: 80px; }
}

@media (max-width: 768px) {

  /* All of these belong to section 12's own stylesheet, which is why they
     land on 768 and not on the 767 everything else in this file uses. */
  .clients__carousel-title { font-size: 22.4px; }

  :root {
    --logo-card-w: 180px;
    --logo-card-h: 80px;

    /* The cards get smaller, so the track gets shorter, and holding the
       duration would silently slow the marquee down. Speed is the thing to
       preserve, not time. NINE cards on a 200px stride is a 1790px travel
       (n*cardW + (n-1)*gap + gap/2), and 1790 / 37.02px per second is 48.35s.
       Same px/s as every other width.

       The figure this replaces, 42.78s, was carried over from the eight-mark
       set and its comment still described TWELVE cards at 64.3s, two counts
       out of date. The formula above reproduces the desktop 55.91s at eight
       marks exactly, which is why it is trusted here. */
    --logo-dur: 48.35s;
  }

  .logo-card { padding: 12px; }
}

/* ==========================================================================
   MOBILE, 767 and below: sections 4 to 28

   The offcanvas header, the hero and the founder card already have their
   mobile forms above. This is the rest of the page.

   Two things happen everywhere. Every multi-column row becomes ONE column:
   the intro, the team intro, the footer's link columns aside, and all three
   card grids, which went three across at desktop and two at tablet. And the
   type steps down a second time.

   Unlike tablet, the mobile heading scale is NOT one number. Tablet collapses
   every section heading onto 40px; mobile spreads them again:

     section headings   40 -> 30      (stats, team intro, services, feature,
                                       SEO, social, process, testimonials)
     band heading       40 -> 23      (section 5, the smallest on the page)
     about heading      40 -> 22      (smaller still, and the only one under 23)
     display headline   40 -> 42      (section 18, the only one that goes UP)
     work together      120 -> 55
     card/block titles  20 -> 18
     FAQ and CTA heads  40 -> 30      (back onto the common size)

   So the tokens carry the 30 and the 18, and the five exceptions are stated
   per section.
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --fs-display:     30px;
    --fs-h-primary:   30px;
    --fs-block-title: 18px;
    --fs-h-secondary: 18px;
    --fs-about-title: 22px;
    --fs-head:        23px;
    --card-pad:       20px;
    --social-icon:    50px;

    /* The ticker unwinds its whole tablet enlargement and then some: 20 at
       desktop, 34 at tablet, 16 here, which is the smallest of the three. */
    --ticker-fs:      16px;

    /* AND THE DURATION HAS TO FOLLOW IT, at this width only.
       `--ticker-dur` is 35.3s everywhere else and that is right: measured
       against the reference we match at 1440 (78.9 against 80.4), at 1024
       (118.9 against 117.1) and at 768 (117.6 against 119.6). Mobile was the
       one width that did not, at 66.7 against their 52.3, about 28% fast.

       THIS IS NOT THE SAME QUESTION AS THE LOGO MARQUEES. There the two
       builds disagree on principle -- they hold DURATION and we hold SPEED,
       so theirs crawls at 9.0 px/s at 390 and ours holds 37.6, which the user
       settled in our favour. Here both builds hold duration; the tracks just
       shrink by different amounts between tablet and mobile, theirs 3079 ->
       2025.5 and ours 5447.4 -> 4657.9, because the label set and the
       separator differ. So matching costs nothing on principle.

       The keyframe travels -50%, so speed is half the track width over the
       duration: 4657.9 / 2 / 45 = 51.8 px/s, and it measures 52.3 against
       their 52.3, at 768 unchanged. TIED TO THE TRACK WIDTH like the desktop value above it --
       change `.ticker__sep`, the padding, or the label set and this has to be
       recomputed.

       RECOMPUTED 2026-09-07 WITH THE CINQO LABEL SET. Measured at 390 rather
       than scaled from the desktop ratio, because the two tracks do not
       shrink by the same proportion: 4657.9 -> 4567.3 here against
       5447.4 -> 5334.0 there. Holding the same 51.76 px/s:
       4567.3 / 2 / 51.76 = 44.12s.

       RECOMPUTED AGAIN 2026-09-08, when Local SEO became Social Media
       Management: 4567.3 -> 4819.4 here against 5334.0 -> 5649.1 there, which
       is once more a different proportion. Holding the same 51.76 px/s:
       4819.4 / 2 / 51.76 = 46.56s. */
    --ticker-dur:     46.56s;
  }
}

/* ==========================================================================
   4. Services ticker
   Back to the desktop padding around a smaller label, and the asterisk
   separators lose their symmetry: 40 on the left against 20 on the right.
   ========================================================================== */

@media (max-width: 767px) {

  .ticker__item { padding: 13px 0; }

  .ticker__sep { margin: 0 20px 0 40px; }
}

/* ==========================================================================
   5 + 6. Showreel
   991 is where the entire desktop treatment switches off: no runway, no pin,
   no grow. A 1:1 square at the page gutter, the poster, and a button.

   991 is already one of this build's five authored breakpoints (Bootstrap
   md), so this adds no sixth. Do not round it off. It also matches humaan's
   own switch, which they write as `min-width: 992`.
   ========================================================================== */

@media (max-width: 991px) {
  .showreel__wrapper { height: auto; }

  .showreel__pin {
    position: relative;
    height: auto;
  }

  /* The square is why `poster-square.webp` exists as a separate file: a 1:1
     box fed the 16:9 source under `object-fit: cover` discards 43.75% of the
     width, so the still is cut deliberately rather than centred by the
     browser. `left`/`right` are returned to `auto` or the desktop insets
     would still apply against a now-static box. */
  .showreel__inner {
    position: relative;
    aspect-ratio: 1 / 1;
    left: auto;
    right: auto;
    margin-inline: var(--gutter);
    border-radius: var(--showreel-radius);
  }

  /* Never autoplayed at these widths, so the element holds no frames and
     would paint black over the poster it is stacked on. `is-playing` reveals
     it once the button has been pressed. */
  .showreel__video { opacity: 0; }

  .showreel__play { display: inline-flex; }

  /* humaan hide the pill outright below 991, and for their default state
     that is right: nothing is playing, so there is nothing to pause.
     **Ours comes back once the visitor has pressed play**, because
     otherwise leaving fullscreen strands them with an unmuted looping video
     and no control at all. Their own rule is defeated by source order
     anyway, so their pill renders at 390 on top of their own button. */
  .showreel__controls { display: none; }

  .showreel__inner.is-playing .showreel__controls { display: flex; }
}

/* ==========================================================================
   7. About agency
   Already stacked at tablet. Only the inset and the type move again.
   ========================================================================== */

@media (max-width: 767px) {
  :root { --about-main-pad: 20px; }

  .section-about__main { padding: 10px 10px 10px var(--about-main-pad); }
}

/* ==========================================================================
   8. Stat counters
   Four across becomes one down, so the hairline rules between the cells have
   nothing left to separate and come off with them.
   ========================================================================== */

@media (max-width: 767px) {

  .stats-card {
    gap: 30px;
    padding: 38px 30px;
  }

  /* The card's gap drops to 30 here but the distance from the heading to the
     counters stays 40, because on the reference those are two different
     boxes: its card gap moves and its heading margin does not. Flattened into
     one card, the heading has to make up the 10px itself, or the counters
     ride up under the heading while the rule below them keeps its 30. */
  .section-stats__title { margin-bottom: 10px; }

  .stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* The border-left and the side padding are both there to divide cells that
     sit beside each other. Stacked, they read as a stray rule down the left
     of every row. */
  .stat {
    padding: 0;
    border-left: 0;
  }
}

/* ==========================================================================
   9. Team intro
   ========================================================================== */

@media (max-width: 767px) {

  .section-team-intro__grid { flex-direction: column; }

  .section-team-intro__col--text,
  .section-team-intro__col--media {
    width: 100%;
    margin-left: 0;
  }

  .section-team-intro__title { font-size: 30px; }
}

/* ==========================================================================
   10. Services grid
   ========================================================================== */

@media (max-width: 767px) {

  .section-services__lede { font-size: 30px; }

  .service-item { width: 100%; }

  /* The closing line drops to 12px, the smallest body size on the page. */
  .service-footer { font-size: 12px; }
}

/* ==========================================================================
   11. Feature block
   ========================================================================== */

@media (max-width: 767px) {
  .section-feature__title,
  .section-feature__subtitle { font-size: 30px; }
}

/* ==========================================================================
   13. Longform copy
   The one section that is neither the 1300px container nor full bleed: at
   desktop it is 97.572% with auto margins. At mobile the reference drops that
   inset entirely and lets it run the full width.
   ========================================================================== */

@media (max-width: 767px) {

  .section-seo { width: 100%; }

  .section-seo__title { font-size: 30px; }
}

/* ==========================================================================
   14. Social cards
   ========================================================================== */

@media (max-width: 767px) {

  .social-card { width: 100%; }

  .social-card__pill { margin: 15px 0 0 15px; }

  /* Third and last position for the hung icon, and the only width where it
     shrinks below 60px. Rendered offsets, as at the other two breakpoints. */
  .social-card__icon {
    top: -14px;
    left: -13px;
  }

  .social-card__icon svg { height: 20px; }
}

/* ==========================================================================
   18. Display headline
   The only heading on the page that gets BIGGER at mobile than at tablet,
   40 -> 42, and the only one still carrying its 8px of word spacing. Two
   lines again here, so the <br> that tablet suppresses comes back.
   ========================================================================== */

@media (max-width: 767px) {

  .section-numbers__title { font-size: 42px; }

  .section-numbers__title br { display: inline; }

  .section-numbers__box { padding: 10px 10px 40px; }
}

/* ==========================================================================
   19. How it works
   ========================================================================== */

@media (max-width: 767px) {

  .process-item {
    width: 100%;
    gap: 25px;
  }

  .process-item__title { margin-bottom: 30px; }

  .process-item__step-num {
    font-size: 28px;
    line-height: 33.6px;
  }
}

/* ==========================================================================
   20. Testimonials
   ========================================================================== */

@media (max-width: 767px) {

  .review-card {
    gap: 15px;
    padding: 20px;
  }

  .review-card__score { font-size: 40px; }

  .review-card__count { margin: 0 0 5px; }

  .review-card__title { margin-bottom: 10px; }

  .testimonial__quote { margin: 20px 0 15px; }
}

/* ==========================================================================
   26. Work together
   The display heading takes the largest single cut on the page, 120 -> 55,
   and the disc button's label drops to 12px with it.
   ========================================================================== */

@media (max-width: 767px) {

  .work-together__title { font-size: 55px; }

  .work-together__disc { font-size: 12px; }
}

/* ==========================================================================
   27. Footer columns

   Not a plain stack. The brand column and the newsletter go full width, but
   the two link menus stay SIDE BY SIDE at half each, which is the one place
   on the page where a two-column row survives to 390.
   ========================================================================== */

@media (max-width: 767px) {

  .footer-cols {
    gap: 30px 20px;
    margin-bottom: 0;
  }

  /* Order matters here. Both modifiers also carry `.footer-col`, and all
     three selectors are (0,1,0), so the base rule has to come FIRST or it
     wins on source order and puts the brand column in a 165px half-row. */
  .footer-col {
    width: calc(50% - 10px);
    gap: 15px;
  }

  .footer-col--brand,
  .footer-col--wide { width: 100%; }

  .footer-contact--address .footer-contact__text { font-size: 18px; }
}

/* ==========================================================================
   PHASE 3. Inner pages, responsive.

   Authored alongside the desktop rules rather than as a second pass, which is
   the method this build settled on: the responsive work lands with the
   section or it becomes an archaeology exercise later.

   The TYPE needs almost nothing here, because the contact page's headings sit
   on --fs-h-primary and --fs-h-secondary and the :root blocks above already
   step those 50 -> 40 -> 30 and 22 -> 20 -> 18. What is left is the grids,
   which have to be told how many columns to be, and --card-pad, which the
   cards already inherit.
   ========================================================================== */

@media (max-width: 1024px) {
  /* THE PULL COMES BACK BELOW 1024, and it is the reference's own -92px.
     At desktop the header is absolute, so `<main>` starts at 0 and the band
     needs no margin to sit flush with the top of the page. Here the header is
     IN FLOW -- measured, `<main>` starts at 112.4 at 1024 and 57.6 at 390 --
     so without a pull the band drops below the bar instead of running under
     it. The reference applies -92 at both widths and so does this: it lands
     our band at 20.4 at 1024, which is theirs exactly, and at -34.4 at 390
     against their -33.6, the 0.8px being the difference between the two
     headers' heights. */
  .page-banner {
    margin-top: -92px;
  }

  /* The reference's own tablet padding, and it uses the SAME values down at
     mobile, so the 767 block below states no padding of its own. */
  .page-banner__inner {
    padding: 172px 0 70px;
  }

  /* 44px, INTERPOLATED, and this is the one number on this component that is
     not the reference's. Theirs reads 51 at desktop and 70 here -- a heading
     that grows as the viewport shrinks, stable at 1440/1366/1200/1100/1025
     and flipping exactly at Elementor's 1024 boundary, which is what a
     desktop value typed into the wrong breakpoint field looks like. Its
     desktop 51 and its mobile 34 are the two values that agree with each
     other; 44 sits between them on the same 1.1 leading, so the heading
     descends 51 -> 44 -> 34 instead of jumping up 19px at 1024. */
  .page-banner__title {
    font-size: 44px;
    line-height: 48.4px;
  }

  /* Three across becomes two, on the same 30px gap the rest of the site
     keeps at tablet. See the --card-pad note in the :root block above: the
     gap deliberately does NOT tighten with the padding. */
  .contact-card {
    flex: 0 0 calc(50% - (var(--card-gap) / 2));
  }

  .section-contact__inner {
    padding: 60px var(--gutter);
  }

  /* ------------------------------------------------------------------------
     FAQs page.

     THE CARD MOVES ABOVE THE ACCORDIONS HERE, and that is the reference's own
     behaviour, not a simplification: its body container is `row` at desktop
     and `column-reverse` at 1024 and below. Reproduced with the same
     mechanism, one line, because the two children were kept separate for it.

     What is NOT reproduced is the `margin-top: -127px` the reference hangs on
     the accordion column. At desktop it only eats the container's padding; at
     this width it pulls the accordions UP THROUGH the card -- measured
     overlap 97px, the card ending at y827.8 with the first group starting at
     y730.8. See faqs.astro.
     ------------------------------------------------------------------------ */
  .faqs-body__inner {
    flex-direction: column-reverse;
    gap: 40px;
    padding: 60px var(--gutter);
  }

  /* The reference's own halving: 80 -> 40 between groups, 40 -> 30 between a
     heading and its cards. The heading itself follows --fs-h-primary down to
     40/48 unaided, which is the reference's tablet value exactly. */
  .faqs-body__groups { gap: 40px; }

  .faq-group { gap: 30px; }

  /* The card's padding steps with --card-pad's own 40 -> 30; stated because
     the desktop value is the reference's 50, not the token's 40. */
  .faq-cta { padding: 30px; }

  .faq-cta__icon { margin-bottom: 30px; }

  .faq-cta__icon svg { height: 50px; }

  .faq-cta__title { margin-bottom: 10px; }
}

@media (max-width: 767px) {
  /* NO PADDING RULE HERE ON PURPOSE. The reference runs the same
     `172px 0 70px` at mobile as at tablet, which the 1024 block above already
     applies at every width below it. */

  /* 34/37.4, the reference's own mobile value. */
  .page-banner__title {
    font-size: 34px;
    line-height: 37.4px;
  }

  .page-banner__crumb-list {
    flex-wrap: wrap;
  }

  /* One column. Everything on this page stacks at mobile except nothing --
     unlike the footer's two link menus, there is no pair here worth keeping
     side by side at 390. */
  .contact-card,
  .contact-form__row--half {
    flex: 0 0 100%;
  }

  .contact-card__icon svg {
    height: 40px;
  }

  .section-contact__inner {
    padding: 40px var(--gutter);
  }

  .section-contact__cards {
    margin-top: 30px;
  }

  .contact-form {
    margin-top: 30px;
  }

  /* Full-width tap target, and it stops a long label wrapping inside a pill
     that was sized for one line. */
  .contact-form__submit {
    width: 100%;
  }

  /* The map loses a third of its height rather than staying a 450px slab on
     a 390px-wide screen. */
  .section-map__embed {
    height: 300px;
  }

  /* ------------------------------------------------------------------------
     FAQs page, mobile.

     The accordion tightens on every axis the reference tightens it on:
     30 -> 20 between cards, 17/55/17/20 -> 12/45/12/12 inside the toggler,
     and a 24px icon down to 20. The TYPE needs nothing -- `--fs-h-secondary`
     is already 18 in the :root block above, which is the reference's value.
     ------------------------------------------------------------------------ */
  .faqs-body__inner {
    gap: 30px;
    padding: 40px var(--gutter);
  }

  .faqs-body__groups { gap: 40px; }

  .faq--outline .faq__item { margin-bottom: 20px; }

  .faq--outline .faq__toggle { padding: 12px 45px 12px 12px; }

  .faq--outline .faq__icon {
    margin-right: 12px;
    width: 20px;
  }

  /* The glyph follows the box: the reference's icon group measures 20 x 22
     at 390 against its 24 x 26.4 at desktop. */
  .faq--outline .faq__chev {
    width: 20px;
    height: 20px;
  }

  .faq--outline .faq__body { padding: 0 12px 12px; }

  .faq-cta { padding: 20px; }

  .faq-cta__icon { margin-bottom: 25px; }

  .faq-cta__icon svg { height: 40px; }

  /* Full-width pill, same reasoning as the contact form's submit: a long
     label should not wrap inside a button sized for one line. */
  .faq-cta__action .btn { width: 100%; }
}

/* ==========================================================================
   Privacy policy page.

   TWO BREAKPOINTS, NOT FIVE. Diffed with `delta.py 1440 1024` and
   `delta.py 1024 767` on the reference's own page, every change on it lands
   at Elementor's 1024 and 767. Nothing on this page moves at 1023, 991 or
   768 — the testimonial slider's gutter, the social pill's inset and the
   logo cards are the three rules that live at those widths, and none of them
   is on this page. Checked rather than assumed, because CLAUDE.md records
   the breakpoint count being written down wrong twice already.
   ========================================================================== */

@media (max-width: 1024px) {
  /* EVERY HEADING ON THE PAGE CONVERGES ON 40px, which means two of them
     shrink and TEN GROW: the prose stack is 32 at desktop and 40 here. That
     looks like a mistake and is a single global tablet value in the
     reference's Elementor kit, applied consistently to all twelve. It is not
     the FAQs banner's contradiction — there, one page's desktop value was
     smaller than its own tablet value; here every page agrees. Reproduced. */
  .privacy-intro__title,
  .privacy-who__title,
  .privacy-collect__title,
  .privacy-prose__title,
  .privacy-talk__title {
    font-size: 40px;
    line-height: 48px;
  }

  .privacy-prose__body h3 {
    font-size: 26.944px;
    line-height: 32.3328px;
  }

  /* The intro card and the prose stack lose their outer margins here and are
     held by `max-width` plus the 10px gutter instead, so neither needs a rule.
     The collect head DOES: it keeps an 851px box where everything else opens
     out, which is why its inset is authored per breakpoint. `max-width` in
     `sections.css` already holds it — this is the note, not a rule.

     The talk block's percentage padding tracks on its own: 1.148% is 11.75px
     at 1024, which is the reference's measured margin there. */
}

@media (max-width: 767px) {
  /* All five multi-column blocks go to one column. On the reference this is
     `flex-wrap: wrap` on containers whose columns are already 100% wide at
     this width; expressed here as the wrap, because that is what it is. */
  .privacy-intro,
  .privacy-who,
  .privacy-collect,
  .privacy-talk {
    flex-wrap: wrap;
  }

  .privacy-intro__col,
  .privacy-who__col,
  .privacy-talk__col,
  .privacy-talk__col--text {
    flex-basis: 100%;
  }

  /* The heading keeps its 42% share and its -41px, and the body goes full
     width beneath it. Measured at 767: heading 313.7 of a 747 container,
     which is the same 42%, and the body 747. */
  .privacy-collect__body {
    flex-basis: 100%;
  }

  .privacy-card {
    flex-basis: calc(100% - 20px);
  }

  /* THE BODY COPY GROWS FROM 15px TO 23px, and the leading with it. That is
     the reference's own rule at this width and it is a large jump — worth
     stating plainly, because a 53% step in body size reads as a typo in a
     diff and is not one. It applies to every text-editor on the page. */
  .privacy-who__body p,
  .privacy-collect__body p,
  .privacy-prose__body,
  .privacy-talk__text {
    font-size: 23px;
    line-height: 39.1px;
  }

  .privacy-who__body p { margin-bottom: 39.1px; }
  .privacy-prose__body p { margin-bottom: 39.1px; }

  .privacy-intro__title,
  .privacy-who__title,
  .privacy-collect__title,
  .privacy-prose__title,
  .privacy-talk__title {
    font-size: 30px;
    line-height: 36px;
  }
}

/* ==========================================================================
   About page. TWO breakpoints, 1024 and 767, and that was checked rather than
   assumed: `delta.py` captures at 1440, 1024, 1023, 991, 768 and 767 put every
   one of this page's own changes at Elementor's two. What moves at 1023 is the
   testimonial slider's gutter and at 991 the testimonial internals -- both
   shared components that already handle it, and both reached here only because
   this page reuses that section.

   EVERY COLUMN ARRANGEMENT BELOW IS MEASURED OFF THE REFERENCE AT 1024 AND
   390, not inferred from the type scale. That distinction cost a rewrite: the
   first pass read the breakpoints off `delta.py`, which reports font sizes,
   padding and gaps faithfully and says nothing about WHICH ROWS REFLOW. Four
   sections were wrong in ways the desktop map cannot see -- the pillars stayed
   a three-up row where the reference goes two-up, and the closing photograph
   ran to 3144px because a 1920 x 2560 portrait at `height: auto` in a
   full-width column is 1333px tall. Images here are ratio-driven for exactly
   that reason; see `.about-best__img` in sections.css.
   ========================================================================== */

@media (max-width: 1024px) {
  /* THE WHOLE PAGE CONVERGES ON ONE HEADING SIZE. Six different desktop
     values -- 43, 28, 35, 50, 34 and 45 -- all become 40/48 here, which means
     four of them GROW as the viewport shrinks. That is the reference's,
     measured, and the same shape as the privacy page's ten prose headings
     going 32 -> 40 at this width. */
  .about-intro__title,
  .about-why__title,
  .about-grow__title,
  .about-approach__title,
  .about-best__title {
    font-size: 40px;
    line-height: 48px;
  }

  /* Card titles step 22 -> 20 together. */
  .pillar__title,
  .feature-card__title,
  .about-best__point-title {
    font-size: 20px;
    line-height: 24px;
  }

  .about-intro__title,
  .about-why__title,
  .pillar__title {
    margin-bottom: 15px;
  }

  /* The 55px right inset goes and the blocks pick up a 10px bottom margin. */
  .about-intro__block,
  .about-why__block {
    margin-bottom: 10px;
    padding: 10px;
  }

  .about-intro__col,
  .about-why__col {
    gap: 15px;
  }

  /* --- c6: THE THREE CARDS GO TWO-UP, not narrower. Measured: 487 wide at
     x10 and x527 with the third wrapping to x10 on a second row, cards on a
     30px gap and 30px of padding. */
  .pillars { flex-wrap: wrap; }

  .pillar {
    flex: 0 0 calc(50% - 15px);
    gap: 15px;
    padding: 30px;
  }

  /* --- c7: the two halves stack, each full width. */
  .about-grow {
    flex-wrap: wrap;
    padding: 40px 0;
  }

  .about-grow__main {
    flex: 1 1 100%;
    gap: 30px;
    padding: 10px;
  }

  .about-grow__head { gap: 15px; }

  .about-grow__media { flex-wrap: wrap; }

  .about-grow__video,
  .about-grow__review {
    flex: 1 1 calc(50% - 0.1px);
  }

  .about-grow__facts {
    flex: 1 1 100%;
    gap: 40px;
  }

  .funfacts { gap: 40px; }

  /* The stagger SURVIVES this breakpoint and shrinks with the gap ladder:
     measured, the second column still starts 40px below the first, not level
     with it. */
  .funfacts--lead  { margin-bottom: 40px; }
  .funfacts--trail { margin-top: 40px; }

  .funfact__value {
    font-size: 40px;
    line-height: 48px;
  }

  .funfact__icon { margin-bottom: 20px; }

  /* --- c8: the card's two columns stack.

     THIS COMMENT WAS UNTERMINATED FROM THE DAY IT WAS WRITTEN -- f7511ee,
     the /about/ build -- so it has never worked. It ran on and swallowed two
     things: the rest of its own line, which read
     `{ padding: 50px calc(var(--gutter) * 2); }` with its SELECTOR already
     missing, and then the whole of the c9 comment below, whose terminator is
     the only thing that ever closed it. As far as a CSS parser is concerned
     c9 has never existed, and the declaration above has never applied.

     CLOSED 2026-09-04 WITH NO RENDERING CHANGE. The orphaned declaration is
     kept here as text rather than restored: its selector was never committed,
     so any selector now would be a guess, and guessing one would move the
     geometry of a page that is signed off. Measured before and after -- every
     section of /about/ reads identically at 1440, 1024, 768 and 390.

     Whether anything is genuinely MISSING is a separate question, measured
     and recorded in HANDOFF.md rather than answered by restoring a guess. */

  /* --- c9: the head's two columns stack; the feature cards stay side by
     side but at authored widths of 515.2 and 418.8 rather than 726 and 474,
     which is not the same ratio and so cannot be a percentage of the row. */
  .about-approach { padding: 50px 10px; }

  .about-approach__head {
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 0;
  }

  .about-approach__lede,
  .about-approach__aside {
    flex: 1 1 100%;
    padding-right: 0;
  }

  .about-approach__aside { gap: 20px; }

  .about-approach__features { gap: 30px; }

  .feature-card { padding: 30px; }

  /* The proportion tightens here: 515.2 and 418.8 of the 934 left after the
     30px gap, so 55.16% and 44.84% against the desktop 60.5/39.5. Kept as a
     proportion so the row still fits at 768, where it lands on 374.0 / 304.0
     against the reference's 374.4 / 303.6. */
  .feature-card--wide   { flex: 0 0 calc((100% - 30px) * 0.5516); }
  .feature-card--narrow { flex: 0 0 calc((100% - 30px) * 0.4484); }

  /* THE FRAME CARRIES THIS, NOT THE IMAGE. With the margin on the image it
     stacks INSIDE the frame's own, so the gap became 37.2 + 20 rather than
     stepping down to it -- worth +30 on the section here. 27.2 is the
     reference's authored 20 plus the 7.2 of recovered descent, the same sum
     the desktop rule makes. */
  .feature-card__frame { margin-bottom: 27.2px; }

  /* --- c12: both rows stack. */
  .about-best { padding: 40px 0; }

  .about-best__head {
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 0;
  }

  .about-best__title,
  .about-best__lede,
  .about-best__points,
  .about-best__media {
    flex: 1 1 100%;
    padding-right: 0;
  }

  .about-best__body {
    flex-wrap: wrap;
    gap: 30px;
  }

  .about-best__points { gap: 30px; }

  .about-best__point { padding: 15px 20px; }

  /* The reviews head stops being two columns when the page is no longer wide
     enough for a 746.6 + 533.2 split; the grid falls back to the stacked flow
     the homepage uses at every width. */
  .section-testimonials--split .section-testimonials__head-main {
    display: flex;
  }
}

/* THE ABOUT PAGE HAS A THIRD BREAKPOINT AND IT IS 991, WHICH THIS FILE
   ORIGINALLY DENIED. The claim that the page moves only at 1024 and 767 came
   from `delta.py`, and it was wrong for one reason worth remembering:
   `delta.py`'s property list does not include `aspect-ratio`. It tracks type,
   display, flex, gap, padding, margin and position faithfully and is blind to
   this, so a sweep at 1024/1023/991/768/767 reported nothing here.

   Three of the page's images are given an authored ratio per breakpoint, and
   the step lands exactly on 991 — measured either side, 992 against 991, so
   it is the known Bootstrap md breakpoint rather than a new one:

                    >= 992      <= 991      <= 767
     c9 wide        1 / 0.455   1 / 0.63    1 / 0.745
     c9 narrow      1 / 0.713   1 / 0.73    1 / 0.745
     c12 photo      1 / 0.9     1 / 0.74    1 / 0.74

   The pillars' 1/0.78 and the video poster's 1/0.71 hold at every width, so
   they are not here. Missing this was worth 116.5px on `about-best` at 768
   alone. */
@media (max-width: 991px) {
  .feature-card--wide .feature-card__img   { aspect-ratio: 1 / 0.63; }
  .feature-card--narrow .feature-card__img { aspect-ratio: 1 / 0.73; }
  .about-best__img { aspect-ratio: 1 / 0.74; }
}

/* ==========================================================================
   /digital-marketing-services/ -- the services hub

   THIS BLOCK IS DELIBERATELY PLACED ABOVE THE FINAL 767 QUERY RATHER THAN AT
   THE END OF THE FILE, and the reason is a defect in that query rather than
   anything about these rules: its last comment is never closed, so a CSS
   parser swallows everything from it to EOF. Anything appended after it is
   dead. Raised with the user rather than fixed here, because closing that
   comment brings three currently-dead rules back to life and changes how a
   signed-off page renders at mobile. See HANDOFF.md.

   The system is the site's own, so this is short: headings converge on 40/48
   at 1024 and 30/36 at 767, columns stack, the 80px band halves, and the
   card grid's own steps (`.service-item` to 50% then 100%, the 80px head
   margin to 30, `--card-pad` 40 -> 30 -> 20, `--card-icon` 60 -> 50) all come
   from section 10's existing rules and the token redefinitions above.
   ========================================================================== */

@media (max-width: 1024px) {
  /* Both blocks keep their percentage width; only their side margins shrink,
     which the percentage already does on its own. */
  .services-grid__title,
  .services-intro__title,
  .services-what__title,
  .services-list__title,
  .services-local__title,
  .services-process__title,
  .services-why__title,
  .services-results__title,
  .services-industries__title,
  .services-cost__title,
  .services-faq-head__title,
  /* THE COMPACT GROW HEADING HAS TO BE RE-STATED HERE, and the reason is
     specificity rather than anything responsive. `.section-about-grow--compact
     .about-grow__title` is two classes; the tablet rule that takes every
     heading to 40/48 is one. So the desktop 27/32.4 won at EVERY width and the
     section came out 41px short of the reference at 1024 -- on top of the 57.2
     that /about/'s own instance is already out by, which is pre-existing and
     not this page's. */
  .section-about-grow--compact .about-grow__title {
    font-size: 40px;
    line-height: 48px;
  }

  .services-grid__head { margin-bottom: 0; }

  .services-grid__head-text {
    width: 100%;
    gap: 15px;
    padding-right: 0;
  }

  /* 20 -> 10 above the pill. The card's other steps are section 10's. */
  .service-item__cta { margin-top: 10px; }

  /* THE BAND HALVES, once for all eleven rebuilt sections. */
  .section-services-intro,
  .section-services-what,
  .section-services-list,
  .section-services-local,
  .section-services-process,
  .section-services-why,
  .section-services-results,
  .section-services-industries,
  .section-services-cost,
  .section-services-faq-head,
  .section-services-faq {
    padding: 40px var(--gutter);
  }

  /* THE FOUR TWO-COLUMN ROWS STACK, and they stack by BASIS rather than by
     `flex-direction`. Each row is `flex-wrap: wrap` at every width with its
     children grown from a zero basis, so there is no direction to change --
     setting the basis to 100% is what wraps them. This is the second blind
     spot the service-detail page paid for: `delta.py` excludes `width`
     outright, so a sweep is SILENT through exactly this rearrangement. If
     geometry will not settle below 1024, suspect it before the layout. */
  .services-intro__body,
  .services-intro__panel,
  .services-what__text,
  .services-what__media,
  .services-local__text,
  .services-local__media,
  .services-why__text,
  .services-why__media {
    flex: 1 1 100%;
  }

  .services-intro__cols,
  .services-what,
  .services-local,
  .services-why {
    gap: 30px;
  }

  .services-intro__lede { font-size: 17px !important; }

  /* The list's third column goes under the first two rather than beside
     them, so the row is an index against a stacked name and detail. */
  .services-list__row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px 16px;
  }

  .services-list__detail { grid-column: 2; }

  /* The rail moves in with the label column. Dot and rail are positioned
     against the same number, so both move together or the dot floats off it. */
  .services-process__step { grid-template-columns: 96px minmax(0, 1fr); gap: 24px; }
  .services-process__steps::before { left: 99px; }
  .services-process__step::before { left: 95px; }

  .services-cost__factors { grid-template-columns: minmax(0, 1fr); }

  .services-results__blocks { gap: 28px; }

  /* The card skin's own step, matching what the deleted block carried. */
  .services-intro__panel,
  .services-what__card,
  .services-local__card,
  .services-cost__factor {
    padding: 15px 20px;
  }

  /* --- the review of 2026-09-04 ---------------------------------------- */

  /* The intro's heading takes the page's 40/48 from the list above; only its
     measure needs widening, because 20ch at 40px is a narrower column than
     it was at 46 and would break the line in a different place. */
  .services-intro__title { max-width: 24ch; }

  .services-intro__cta {
    margin-top: 34px;
    padding-top: 26px;
    gap: 18px;
  }

  .services-list__panel { padding: 40px 30px; }

  /* The stat strip goes two by two. The right border has to come off the
     SECOND cell as well once it is the end of a row, or the strip shows a
     rule down its right edge. */
  .services-results__stat { flex: 1 1 44%; }
  .services-results__stat:nth-child(2n) { border-right: 0; }
  .services-results__stat:nth-child(-n + 2) { border-bottom: 1px solid var(--c-divider); }

  .services-industries { gap: 34px; }
  .services-industries__text,
  .services-industries__list { flex: 1 1 100%; }
}

/* THIS PAGE'S THIRD BREAKPOINT IS GONE, and the note stays so nobody
   concludes the trap behind it was solved. The rule here was
   `.services-why__figure img` restepping `1 / 0.9` to `1 / 0.74` at 991 --
   invisible to `delta.py`, whose property list has no `aspect-ratio`, and the
   same hole that cost /about/ 116.5px. The reference's 2026-09-02 rebuild
   DELETED the two-column why-choose block those images lived in, so there is
   nothing left on this page that steps at 991.

   The trap is untouched and still live everywhere else. If any page's
   geometry will not settle below 1024, suspect `aspect-ratio` and `width`
   before suspecting the layout. */

@media (max-width: 767px) {
  .services-grid__title,
  .services-intro__title,
  .services-what__title,
  .services-list__title,
  .services-local__title,
  .services-process__title,
  .services-why__title,
  .services-results__title,
  .services-industries__title,
  .services-cost__title,
  .services-faq-head__title,
  .section-about-grow--compact .about-grow__title {
    font-size: 30px;
    line-height: 36px;
  }

  /* The band's second step. */
  .section-services-intro,
  .section-services-what,
  .section-services-list,
  .section-services-local,
  .section-services-process,
  .section-services-why,
  .section-services-results,
  .section-services-industries,
  .section-services-cost,
  .section-services-faq-head,
  .section-services-faq {
    padding: 30px var(--gutter);
  }

  .services-what__cards,
  .services-results__figures {
    flex-direction: column;
    gap: 14px;
  }

  /* THE PROCESS RAIL COMES OUT AT MOBILE rather than shrinking again. At a
     390 column a 96px label gutter is a quarter of the width, and the rail
     plus its dots read as clutter beside a single stacked column. The WHEN
     label goes above the step instead, which is the arrangement the
     reference's own mobile twin of this block uses. */
  .services-process__step {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .services-process__steps::before,
  .services-process__step::before {
    display: none;
  }

  .services-process__steps { padding-left: 0; }

  .services-list__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .services-list__detail { grid-column: 1; }

  /* --- the review of 2026-09-04 ---------------------------------------- */

  .services-intro__title { max-width: none; }

  .services-intro__cta { gap: 14px; }

  .services-list__panel { padding: 30px 20px; }

  /* THE BEFORE AND AFTER FRAMES STACK, and the arrow between them turns to
     point DOWN rather than staying horizontal across a vertical stack. It is
     a text glyph, so it is rotated rather than swapped for another
     character.

     `align-items` MUST GO BACK TO STRETCH HERE, and it is load-bearing.
     The base rule centres the frames for the side-by-side row, and a centred
     COLUMN child is shrink-to-fit: the image is `position: absolute` and the
     head row is short, so each figure ends up as wide as its own
     FIGCAPTION'S MAX-CONTENT WIDTH. That makes the two frames different
     widths whenever the two captions render differently, which is a ragged
     stack rather than a layout. Measured 2026-09-08 with the real Soul
     Imaging captions: 427.3 against 468.8 at 767, from captions only TWO
     characters apart, because max-content follows GLYPHS and not character
     count. Stretch makes both full width at every stacked size. */
  .services-results__frames { flex-direction: column; align-items: stretch; }
  .services-results__arrow { transform: rotate(90deg); }

  /* One cell per row: every right border goes, and every border-bottom but
     the last one stays. */
  .services-results__stat { flex: 1 1 100%; border-right: 0; }
  .services-results__stat:nth-child(-n + 3) { border-bottom: 1px solid var(--c-divider); }

  .services-results__case-head { gap: 6px; }

  .services-industries__list { grid-template-columns: minmax(0, 1fr); }
}


@media (max-width: 767px) {
  .feature-card--wide .feature-card__img,
  .feature-card--narrow .feature-card__img {
    aspect-ratio: 1 / 0.745;
  }

  /* Headings step again, to 30/36; card titles to 18/21.6. */
  .about-intro__title,
  .about-why__title,
  .about-grow__title,
  .about-approach__title,
  .about-best__title {
    font-size: 30px;
    line-height: 36px;
  }

  .pillar__title,
  .feature-card__title,
  .about-best__point-title {
    font-size: 18px;
    line-height: 21.6px;
  }

  /* Everything that was still sharing a row goes full width. Measured at 390:
     the pillars stack one per row on 20px of padding, the fun-fact columns
     stack rather than sitting side by side, and both feature cards run the
     full 330. */
  .pillar {
    flex: 1 1 100%;
    padding: 20px;
  }

  .about-grow__video,
  .about-grow__review,
  .funfacts,
  .feature-card--wide,
  .feature-card--narrow {
    flex: 1 1 100%;
  }

  /* The two counter columns stack, and BOTH the column gap and the cards'
     padding step down with them: measured at 390, each column is
     175.2 + 30 + 172.2 and each card carries 20px of padding, not the 40 and
     30 they hold at 1024. */
  .about-grow__facts {
    flex-wrap: wrap;
    gap: 30px;
  }

  .funfacts { gap: 30px; }

  .funfact { padding: 20px; }

  /* The counter's number follows the heading ladder down: 50 -> 40 -> 30,
     measured as a 60 / 48 / 36 line box on the reference. The icon's margin
     goes the other way, 20 -> 30, which is what lands their card on 175.2. */
  .funfact__value {
    font-size: 30px;
    line-height: 36px;
  }

  /* 20 here too: the reference's icon block is a constant 60 (a 40px mark on
     20px of margin) at 1440, 1024 AND 767, so this never steps. It used to
     read 30, which paired with a missing 10 under the number to land the same
     total at desktop only. */
  .funfact__icon { margin-bottom: 20px; }

  .funfacts--lead  { margin-bottom: 0; }
  .funfacts--trail { margin-top: 0; }

  .about-grow__media { gap: 20px; }

  .about-grow__review { padding-left: 0; }

  /* THIS COMMENT USED TO BE UNTERMINATED AND IT WAS EATING THE REST OF THE
     FILE. It ran "...and the section 150px short{" where it should have
     closed the comment and then opened a selector, so from here to EOF there
     was no closing delimiter at all and a CSS parser swallowed everything
     after it: the two rules below, this media query's own closing brace, and
     anything a later session appended.

     AND DO NOT WRITE THE CLOSING DELIMITER INSIDE A COMMENT TO DESCRIBE ONE.
     The first repair of this block quoted the two characters verbatim to
     explain the fix, which ended the comment early and left the rest of the
     prose to be parsed as a selector -- it then ate the
     `.about-approach__features` rule immediately below, so the wrap silently
     did not apply while `.feature-card` two rules further down did. Exactly
     the defect being repaired, reintroduced by the repair, and caught only
     because the computed `flex-wrap` was read back afterwards rather than
     assumed. Both surviving rules were dead at <= 767 on a
     signed-off page, and `about-approach` measured -303.0 against the
     reference at 390 because of it.

     THE ORPHANED DECLARATIONS THAT SAT HERE WERE DELETED RATHER THAN GIVEN A
     SELECTOR BACK. They read `flex: 1 1 calc(50% - 10px); height: 100px`, a
     two-across wrapping grid of 100-tall cells, and the comment describes a
     "logo block 288 x 580 at 390, five rows of 100 on four 20px gaps". That
     is not the block this page still has: measured on the reference's own
     /about/ at 390, the surviving client wall is a horizontal MARQUEE of
     180 x 80 cards on one row, which is what `.logo-card` already renders.
     The described grid is almost certainly the PARTNER STRIP, cut on the
     user's review of 2026-09-02 — the same edit that removed "component,
     data, CSS, its reveal selector and its restcheck entry" is where the
     selector went missing and took the comment's closing delimiter with it. Reattaching these
     declarations to any selector that still exists would diverge from the
     reference rather than match it, so they are gone.

     The homepage cannot be affected either way: `_reference/assets/css/
     responsive.css` carries none of these rules, and `.feature-card` appears
     on no homepage section. Verified before touching this. */

  .about-approach__features {
    flex-wrap: wrap;
    gap: 30px;
  }

  .feature-card { padding: 20px; }
}

/* ==========================================================================
   The SERVICE-DETAIL template, responsive.

   THREE BREAKPOINTS, and only two of them are visible to `delta.py`. Sweeps
   at 1440/1024, 1024/991, 991/768 and 768/767 report every authored change on
   Elementor's 1024 and 767 and NOTHING between 1023 and 768 -- while two of
   this page's three images restep at 991. That is the same hole that cost
   /about/ 116.5px and the hub its third breakpoint, and it is structural:
   delta.py tracks fifteen properties and `aspect-ratio` is not one of them.

   A SECOND BLIND SPOT OF THE SAME FAMILY SHOWED UP HERE. The two columns
   restack at 1024 by both going to 100% inside a container that is
   `flex-wrap: wrap` at every width -- so there is no flex-direction change to
   report, and delta.py EXCLUDES `width` outright because a narrower viewport
   changes nearly every element's. Measured directly: main is 673.3 at 1025
   and 1004 at 1024. Suspect `width` and `aspect-ratio` before the layout.
   ========================================================================== */

@media (max-width: 1024px) {
  /* THE COLUMNS RESTACK. Both go full width; the container's own gap becomes
     the space between them. */
  .service-detail {
    gap: 20px;
    padding: 80px 0 40px;
  }

  .service-detail__main {
    width: 100%;
    padding: 10px;
  }

  .service-detail__side { width: 100%; }

  .service-detail__title {
    font-size: 40px;
    line-height: 48px;
  }

  .service-block--feature,
  .service-block--faq { gap: 30px; }

  /* `10px 0`, NOT `10px 0 20px`. The entry row and the process grid both
     carry `0 0 20px` at desktop and delta.py collapses them into one line, so
     the sweep cannot say which of the two keeps its bottom margin here.
     Measured per block: the entry row drops its 20 and the grid keeps it,
     which is worth 9.7px on the column at every width below 1025. */
  .service-block--entry {
    gap: 20px;
    margin: 10px 0;
  }

  .service-included li { padding-bottom: 7.5px; }
  .service-included li + li { margin-top: 7.5px; }
  .service-included__mark svg { height: 16px; }

  .service-process { margin: 10px 0 20px; }

  .service-process__step {
    gap: 50px;
    padding: 30px;
  }

  .service-process__icon svg { height: 48px; }

  .service-process__n-label,
  .service-process__n-value,
  .service-process__title {
    font-size: 20px;
    line-height: 24px;
  }

  .service-side { gap: 40px; }

  .service-cats__head { padding: 30px 30px 20px; }
  .service-cats__body { padding: 20px 30px 30px; }

  .service-cats__title {
    font-size: 20px;
    line-height: 24px;
  }

  .service-cats__item { padding-bottom: 20px; }
  .service-cats__item + .service-cats__item { margin-top: 20px; }
}

/* THE 991 BREAKPOINT, AND IT IS `aspect-ratio` ONLY. Nothing else on this
   page changes between 1023 and 768 -- the full sweep is empty in both
   directions. Two of the three ratios restep and the third does NOT, which is
   why they are listed separately rather than as one rule:

       feature   1 / 0.67  ->  1 / 0.6
       step      1 / 0.9   ->  1 / 0.82
       entry     1 / 0.89      unchanged, all the way down to 768

   Measured at 992 and 991 either side, not inferred. */
@media (max-width: 991px) {
  .service-feature img { aspect-ratio: 1 / 0.6; }
  .service-process__figure img { aspect-ratio: 1 / 0.82; }
}

@media (max-width: 767px) {
  .service-detail__title {
    font-size: 30px;
    line-height: 36px;
  }

  /* The list row stacks: both children go full width and the row's gap grows
     rather than shrinking, 20 -> 30. */
  .service-block--entry {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  /* Released from the proportional split rather than given a width: the row
     is `column` here, so a flex-basis of 0 would collapse both to nothing. */
  .service-included,
  .service-entry { flex: 0 0 auto; }

  /* 14px on the 1.7 leading is 23.8, which is their measured line box, so the
     line-height needs no rule of its own. */
  .service-included li { font-size: 14px; }

  /* The grid stacks. The DOM is already in reading order -- step, its image,
     step, its image -- so the desktop `order` rules simply stop applying and
     nothing here has to undo them.

     THE GAP AND MARGIN COME OFF THEIR MOBILE BLOCK, NOT THEIR DESKTOP ONE,
     and that is the whole point of the duplicate-widget trap: block 5 holds
     30px and 10px 0 20px all the way down, but block 5 is `display: none`
     here and block 6 is what renders -- at 20px on 0 0 10px. Reading the
     block that is still in the DOM rather than the one on screen was worth
     110px across eleven gaps, and it looks like nothing at all. */
  .service-process__cell { flex: 0 0 100%; }

  .service-process {
    gap: 20px;
    margin: 0 0 10px;
  }

  .service-process__step { padding: 20px; }
  .service-process__icon svg { height: 36px; }

  .service-process__n-label,
  .service-process__n-value,
  .service-process__title {
    font-size: 18px;
    line-height: 21.6px;
  }

  .service-process__title { margin-bottom: 15px; }

  .service-feature img { aspect-ratio: 1 / 0.8; }
  .service-entry img { aspect-ratio: 1 / 0.7; }
  .service-process__figure img { aspect-ratio: 1 / 0.74; }

  .service-side { gap: 30px; }

  .service-cats__head,
  .service-cats__body { padding: 20px; }

  .service-cats__title {
    font-size: 18px;
    line-height: 21.6px;
  }
}

/* --- /testimonial/ ------------------------------------------------------
   Two authored steps, both measured off the reference at 1440 / 1024 / 767.
   The 991 breakpoint does not exist on this page and neither does 1023.

   THE RESTACK AT 767 IS THE ONE `delta.py` CANNOT REPORT. Its property list
   excludes `width` outright, and the card is `flex-wrap: wrap` at every
   width, so a full sweep 1024 -> 767 shows a gap and a padding change and
   says nothing whatever about the two columns becoming two rows. It was
   caught by measuring the boxes instead: at 767 the portrait drops to 120
   square and centres, and the text takes the full 695 and centres with it.
   Suspect this hole before suspecting the layout, every time. */
@media (max-width: 1024px) {

  /* DOUBLE GUTTER, NOT THE SINGLE ONE THE DESKTOP RULE CARRIES. Their
     container insets 20px each side at every width below 1025 -- 984 at
     1024, 727 at 767, 350 at 390 -- and `--gutter` is 10. A single gutter
     here left every card 20px wider than theirs, which no overflow check
     could see (the page still fits) and which the height map would only
     ever report as a copy-length difference, because a wider column moves
     the wrap rather than the box. */
  .section-testimonial-list { padding: 80px calc(var(--gutter) * 2) 40px; }

  .testimonial-list__rows { gap: 40px; }

  .testimonial-card {
    gap: 30px;
    padding: 40px 30px;
  }

  /* The tablet band's own slope. 32vw - 47.65 gives 280.03 at 1024 and
     198.11 at 768, both measured; see the table in `sections.css`. The
     desktop rule's `min()` cap does not apply in this band -- it never
     reaches 273.61 below 1025 -- so this is a bare `calc`.

     ONLY THE BASE MOVES HERE. `--portrait-scale` stays wherever the two
     shrunken cards set it, and `flex-basis` and `width` recompute from the
     base on their own, which is why this band needs one line rather than
     four and why the scale cannot fall out of step with it. */
  .testimonial-card__media { --portrait: calc(32vw - 47.65px); }

  /* The rating block goes 18 -> 13: see the note in `sections.css`. */
  .testimonial-card__stars { margin-bottom: 0; }

  .testimonial-card__quote p {
    font-size: 18px;
    line-height: 30.6px;
    margin-bottom: 28.8px;
  }

  .testimonial-card__name {
    font-size: 20px;
    line-height: 24px;
  }
}

@media (max-width: 767px) {

  /* `flex-wrap: wrap` IS THE RULE THAT DOES THE STACKING, and leaving it out
     is silent in both directions: the card stays in one row while every
     other value below says mobile, and nothing overflows either, because the
     body still fits beside a 120px portrait. Measured, not assumed -- the
     first pass here set the basis without the wrap and read `stacked: false`
     at 767 and 390 with a clean overflow check on both. */
  .testimonial-card {
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding: 20px 15px;
    text-align: center;
  }

  .testimonial-card__media { --portrait: 120px; }

  /* `flex-basis: 100%` is what actually forces the second row. Without it
     the body still fits beside a 120px portrait -- 550px of the 695 is free
     -- and the card would stay in one row while every other value here said
     mobile. The wrap is the layout; the numbers around it are the skin. */
  .testimonial-card__body {
    flex: 1 0 100%;
    align-items: center;
  }

  /* And 13 -> 8, the negative half of the same three-step margin. */
  .testimonial-card__stars { margin-bottom: -5px; }

  .testimonial-card__quote p {
    font-size: 16px;
    line-height: 27.2px;
    margin-bottom: 25.6px;
  }

  .testimonial-card__name {
    font-size: 18px;
    line-height: 21.6px;
  }
}

/* ==========================================================================
   /book-your-consultation/ : the scheduler panel
   The heading needs nothing here -- it rides `--fs-h-primary`, which the
   :root blocks above already step 50 to 40 at 1024 and 40 to 30 at 767.
   Measured against the reference at 50/300/60, 40/300/48 and 30/300/36.

   Only the panel's padding and the frame's reserved height are authored,
   and BOTH of the reference's steps are real:

              panel pad   frame     panel      container
     1440         40      260.2     342.2        362.2
     1024         30      828.2     890.2        910.2
      768         30      828.2     890.2        910.2
      767         20      828.2     870.2        890.2
      390         20      828.2     870.2        890.2

   The frame's jump is the PROVIDER's, not a layout rule: the booking widget
   goes from a two-column layout to a stacked one as the frame narrows, and
   with no auto-resize on a plain iframe we reserve the height ourselves.

   RETUNED FOR CALENDLY 2026-09-04, replacing the reference's 828.2. Measured
   on the BOOKING FORM step, which below 1025 is taller than the calendar
   step (1195.8 against 1139.2) and is therefore what sets this number. See
   the long note in sections.css for the method and for why this is the
   maximum rather than a per-width fit.
   ========================================================================== */

@media (max-width: 1024px) {
  .booking-slot__panel {
    --booking-frame-h: 1195.8px;
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .booking-slot__panel { padding: 20px; }
}

/* ==========================================================================
   /careers/ : the page body
   Every number below is measured off the reference at 1440, 1024, 768, 767
   and 390. Three of them are things `delta.py` structurally cannot report --
   the two column widths in block C and the figure's fixed height at mobile --
   so they were found by measuring boxes rather than by diffing styles.
   ========================================================================== */

@media (max-width: 1024px) {
  /* The section's own padding inverts: light top, heavy bottom becomes the
     other way round. */
  .section-careers .container { padding: 80px 0 40px; }

  /* The asymmetric 50px right padding flattens to an even 10. */
  .careers__column { padding: 10px; }

  .careers__block--lede { gap: 30px; }

  .careers__join-title,
  .careers__roles-title {
    font-size: var(--fs-h-primary);
    line-height: var(--lh-h-primary);
  }

  /* Block C's gap halves and its margin moves from the bottom to the top --
     `0 0 20` becomes `10 0`, which is a 30px swing and reads in a delta sweep
     only as an unnamed div. */
  /* `10px 0` is TOP AND BOTTOM, not top only. The two-value shorthand on the
     reference sets both, and reading it as a top margin loses exactly 10px at
     1024, 768 and 390 -- the last residual on this page after every block
     already measured +0.0. */
  .careers__intro {
    gap: 20px;
    margin: 10px 0;
  }

  .careers__intro-figure { width: calc(45% - 10px); }

  .careers__grid { margin: 10px 0 20px; }

  .careers-card {
    gap: 50px;
    padding: 30px;
  }

  .careers-card__icon-row { height: 48px; }

  .careers-card__icon svg {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 767px) {
  /* The column's padding goes to nothing, so the blocks take the full 747. */
  .careers__column { padding: 0; }

  /* Block C stacks. Its gap goes UP to 30 as it does, which is the opposite
     direction to every other gap on the page at this width. */
  .careers__intro { gap: 30px; }

  .careers__intro-copy { width: 100%; }

  .careers__intro-copy p {
    font-size: 23px;
    line-height: 39.1px;
  }

  /* A FIXED 406px BOX at every width below 767, not a ratio -- measured 747
     wide at 767 and 370 wide at 390, both 406 tall. The desktop aspect-ratio
     has to be cleared or it fights the height. */
  .careers__intro-figure {
    width: 100%;
    aspect-ratio: auto;
    height: 406px;
  }

  /* One column, and the grid's gap drops while its margin moves again. */
  .careers__grid {
    gap: 20px;
    margin: 0 0 10px;
  }

  .careers-card {
    flex: 1 1 100%;
    padding: 20px;
  }

  /* One column, so the empty cell becomes its own row and contributes the
     gap above it. Worth exactly 20px at 767 and below. */
  .careers__grid-slot { flex: 0 0 100%; }

  /* The title's bottom margin halves with everything else at mobile: the
     cards run exactly 15.4 short with the desktop 30 left in place. */
  .careers-card__title { margin-bottom: 15px; }

  .careers-card__icon-row { height: 36px; }

  .careers-card__icon svg {
    width: 36px;
    height: 36px;
  }
}

/* --- /blog/ : 991 -------------------------------------------------------
   THIS PAGE'S BREAKPOINTS ARE 991 AND 767, AND 1024 IS NOT ONE OF THEM.
   The theme lays the archive out on the Bootstrap grid rather than
   Elementor's, so `col-lg-4` drops to `col-md-6` at 992 and to one column at
   768. Both numbers are already among the site's five, but on every other
   page the first change happens at 1024 -- here 1024 and 1440 measure
   identically, so the habitual two-width sample sees nothing at all.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .section-blog-archive { padding: 80px 0 40px; }

  /* Two up. The 15px inset and the 30px column gap are unchanged. */
  .blog__grid { grid-template-columns: repeat(2, 1fr); }

  /* Every one of the card's four vertical measures drops together at 991:
     the card's own margin 40 -> 30, the image's 30 -> 20 and the title's
     20 -> 15. Verified against their body heights, which go 101 to 91.1 with
     the title at 2 lines both sides. */
  .blog-card { margin-bottom: 30px; }
  .blog-card__media { margin-bottom: 20px; }

  .blog-card__title {
    margin-bottom: 15px;
    font-size: 20px;
  }
}

/* --- /blog/ : 767 -------------------------------------------------------
   One column, and the ONLY other thing that moves is the title's size. The
   card is then the full container width, so its 4:3 image is 552.8 tall at
   767 -- which is why the page is TALLER at 767 than at 390, where the same
   card is 360 wide and the image only 270.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .blog__grid { grid-template-columns: 1fr; }

  .blog-card__title { font-size: 18px; }
}

/* ==========================================================================
   /our-team/ -- the hidden team page.

   Appended at the end on purpose. Nothing else in this file targets these
   selectors, so adding media queries here cannot disturb the seven :root
   blocks above, whose order IS load-bearing.
   ========================================================================== */

@media (max-width: 1024px) {
  .our-team-body__grid { grid-template-columns: repeat(3, 1fr); }

  .our-team-body__title,
  .our-team-body__grid-title,
  .our-team-body__award-title,
  .our-team-why__title,
  .our-team-trust__title,
  .our-team-experience__title { font-size: 30px; }
}

@media (max-width: 767px) {
  .our-team-body__grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 40px 0;
  }

  .our-team-body__title,
  .our-team-body__grid-title,
  .our-team-body__award-title,
  .our-team-why__title,
  .our-team-trust__title,
  .our-team-experience__title { font-size: 26px; }

  .our-team-why__list-title { font-size: 22px; }
}

@media (max-width: 480px) {
  .our-team-body__grid { grid-template-columns: 1fr; }
}