/*==================================================================
CUSTOM UPDATES — loaded after corrections.css, so every rule here
wins the cascade automatically (same/lower specificity, later in
source order). Keeping all of this round's changes in one file
instead of editing the historical files above.
==================================================================*/

/*------------------------------------------------------------------
EASING — every hover/interaction transition now rides the same
gentle deceleration curve as the smooth-scroll (--ease, defined in
styles.css), instead of the mix of default/linear easing they had
before. Only the timing FUNCTION is touched here, not duration.
------------------------------------------------------------------*/
.nav-link,
.nav-indicator,
.btn-nav,
.btn-primary-custom,
.btn-outline-custom,
.btn-hero,
.menu-toggle span,
.impact-card,
.offering-card,
.logo-carousel-track img,
.logo-track img,
.footer-social a,
.footer-menu a::after,
.work-services li,
.services-list li,
#header,
.navbar,
.navbar-brand img{
    transition-timing-function:var(--ease);
}

/*------------------------------------------------------------------
"WHAT WE DO" CARDS — background photo with a dark overlay so the
white text stays legible regardless of the photo underneath.
Uses a real <img class="offering-bg-img"> (see index.html) rather
than a CSS custom property holding a url() — custom properties set
inline resolve their url() against the STYLESHEET that consumes
them, not the HTML document, which 404's for any relative path; a
plain <img src="..."> always resolves against the document, so it's
the reliable option here.
------------------------------------------------------------------*/
.offering-card{
    position:relative;
    overflow:hidden;
    background:#12121a;
	/*border: 0;
	border-radius: 0;*/
}
.offering-bg-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    transition:transform 1s var(--ease);
}
.offering-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(190deg,rgba(8,8,12,.25) 0%,rgba(8,8,12,.58) 100%);
}
.offering-card:hover .offering-bg-img{
    transform:scale(1.08);
}
.offering-card > *:not(.offering-bg-img){
    position:relative;
    z-index:1;
}
.offering-card .offering-number{
    color:#fff;
    opacity:.85;
}
.offering-card h3{
    color:#fff;
}
.offering-card p{
    color:rgba(255,255,255,.82);
}

/*------------------------------------------------------------------
ABOUT US — two-column layout. Left 50% is the 4 photos from
images/about stacked one below another (plain vertical flow — NOT
position:absolute/overlapping, so there's nothing that can stack on
top of anything else), each fading up once as it scrolls into view
(see storyMediaReveal() in ibd.js — plain IntersectionObserver, not
a scroll-linked animation); right 50% is the existing copy,
left-aligned.
------------------------------------------------------------------*/
#story{
    overflow:visible;
	/*background-image: url("../../images/story-bg.jpg");*/
	background-attachment: fixed;
	background-size: cover;
}
.story-pin{
    height:auto;
    min-height:0;
    display:block;
    overflow:visible;
    padding:10px 0 10px;
}
.story-row{
    align-items:flex-start;
}

/* About copy is pinned by GSAP/ScrollTrigger on desktop. Keep all
   containing blocks visible so the pin can move freely. */
@media(min-width:992px){
    #story,
    #story .story-pin,
    #story .story-row{
        overflow:visible !important;
    }
}
.story-media-sticky{
    height:auto;
}
.story-media-stack{
    display:flex;
    flex-direction:column;
    gap:5px;
}
.story-media-img{
    display:block;
    width:100%;
    /*height:260px;*/
    object-fit:cover;
    border-radius:0;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.story-media-img.reveal-ready{
    /* FIX: root cause of "About Us doesn't load" (reproducible on
       EVERY page load, any device, not just fast mobile scroll).
       These <img> tags have no class at first paint, so they render
       at the browser default opacity:1. storyMediaReveal() (ibd.js)
       then adds this "reveal-ready" class a moment later via JS. With
       `transition` declared on this same rule as `opacity`, that
       class-add was treated as an animatable change FROM the
       already-rendered opacity:1 -- so every image visibly flashed in
       then eased back OUT to fully invisible (opacity:0) over 0.6s,
       on page load, regardless of scroll position. Only the later
       IntersectionObserver-driven ".is-visible" add (below) is meant
       to animate; the transition now lives only on that rule, so
       going ready->hidden here is an instant, imperceptible snap, and
       hidden->visible is still a smooth fade once actually revealed. */
    opacity:0;
    transform:translateY(45px);
}
.story-media-img.reveal-ready.is-visible{
    opacity:1;
    transform:translateY(0);
    transition:opacity .6s ease,transform .6s ease;
}
@media(prefers-reduced-motion:reduce){
    .story-media-img.reveal-ready{opacity:1;transform:none;transition:none}
}
/* FIX: "About Us not loading on immediate/fast scroll" (real mobile
   devices). These images start at opacity:0 and only become visible
   once storyMediaReveal()'s IntersectionObserver fires (ibd.js) — the
   same "stuck invisible" pattern already documented and fixed for the
   offering cards elsewhere in this codebase. On a real phone, a fast
   fling/momentum scroll can outrun or starve that JS callback (the
   image's own intersection state can settle mid-fling, before the
   observer's callback gets a free frame to run), leaving the images
   pinned at opacity:0 — i.e. the section looks empty until something
   else nudges a reflow. Desktop mouse-wheel scrolling doesn't have
   this failure mode, so — same convention as the hero-word and cube
   mobile gates — the JS-timed fade-in is desktop-only; mobile just
   shows the images immediately and reliably. */
@media(max-width:991.98px){
    .story-media-img.reveal-ready{opacity:1;transform:none;transition:none}
}
.story-title{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:.05em;
    font-size:clamp(1.6rem,2.4vw,2.4rem);
    letter-spacing:-1px;
}
.story-word{
    display:inline-block;
    min-width:0;
    font-size:1.3em;
    color:var(--primary);
}
.story-copy-col .story-content{
    text-align:left;
}
.story-copy-col .story-title{
    align-items:flex-start;
    text-align:left;
}
.story-copy-col .story-subtitle{
    margin:20px 0 0;
    max-width:520px;
}
@media(max-width:576px){
    .story-title{font-size:clamp(1.3rem,5vw,1.8rem)}
    .story-media-img{height:200px}
    .story-media-stack{gap:14px;margin-bottom:32px}
}
@media(max-width:991px){
    .story-media-stack{
        margin-bottom:40px;
    }
    .story-copy-col .story-title,
    .story-copy-col .story-content{
        text-align:center;
    }
    .story-copy-col .story-title{
        align-items:center;
    }
    .story-copy-col .story-subtitle{
        margin:20px auto 0;
        max-width:520px;
    }
}


/*------------------------------------------------------------------
CLIENT LOGOS (mobile) — the base rule fixes width:200px and the old
mobile override only reset height, leaving width still pinned at
200px — every logo was squashed/stretched on phones. width:auto +
object-fit:contain lets each logo keep its real aspect ratio.
------------------------------------------------------------------*/
@media(max-width:576px){
    .logo-carousel-track{gap:32px}
    .logo-carousel-track img{width:auto;max-width:110px;height:28px;object-fit:contain}
}
@media(min-width:577px) and (max-width:991px){
    .logo-carousel-track img{width:auto;max-width:150px;height:40px;object-fit:contain}
}

/*------------------------------------------------------------------
0) GLOBAL TYPE SCALE — all "big" display headings cut to exactly
   50% of their previous clamp/px values so nothing overflows a
   1366x768 laptop viewport. (Hero + About-us headline are handled
   separately below with their own specific requirements.)
------------------------------------------------------------------*/
:root{
    --display-xl:clamp(2.5rem,4.5vw,4.5rem);
    --display-lg:clamp(2rem,3.5vw,3rem);
    --display-md:clamp(1.5rem,2.5vw,2.25rem);
    --display-sm:1.2rem;
}

.footer-title{font-size:clamp(2rem,4vw,4rem)}
.footer-bg-text{font-size:11vw}
.impact-card h2{font-size:45px}
.work-content h2{font-size:36px}

/*------------------------------------------------------------------
1) NAVBAR "LET'S TALK" — ~40% smaller
------------------------------------------------------------------*/
.btn-nav{
    padding:9px 17px;
    font-size:13px;
    margin-left:20px;
}

/*------------------------------------------------------------------
2) HERO HEADLINE — 20% smaller than the current clamp, plus markup
   support for the per-word scroll animation added in
   custom-updates.js (see .hero-word below).
------------------------------------------------------------------*/
.hero-title{
    font-size:clamp(2rem,3.6vw,3.6rem);
}
.hero-word{
    display:inline-block;
    will-change:transform;
}

/*------------------------------------------------------------------
4) SHOWREEL VIDEO — bleed edge to edge (container/columns removed
   in index.html; this just strips the rounded frame + shadow so it
   reads as full-bleed rather than a floating card).
------------------------------------------------------------------*/
.showreel.showreel-bleed{
    padding:0;
}
.showreel-bleed .showreel-frame{
    width:100%;
    border-radius:0;
    box-shadow:none;
}

/*------------------------------------------------------------------
5) CUBE — 4 logo brand colors on 4 of the 6 faces.
------------------------------------------------------------------*/
.face.front{background:var(--primary);color:#fff;border-color:transparent}
.face.back{background:var(--pink);color:#fff;border-color:transparent}
.face.left{background:var(--green);color:#fff;border-color:transparent}
.face.right{background:var(--yellow);color:#fff;border-color:transparent}

/* FIX (real cube-geometry "white wedge" glitch, confirmed on a real
   iPhone 13 and reproduced/isolated here): once each face actually had
   a photo on it, a gap could appear cutting into a rotated face at
   certain angles mid-rotation. Proven NOT to be a geometry problem --
   filling every face with a plain solid CSS background (no <img> at
   all) renders as a perfectly sealed box at every rotation angle,
   every time. The gap only appears when the photo is painted via an
   <img src="..."> element (position:absolute + object-fit:cover)
   nested inside this steeply 3D-rotated face. That combination --
   object-fit on a replaced <img> element inside a preserve-3d parent
   that's rotated to an oblique angle -- is a known rendering
   inconsistency in Chromium/WebKit: the browser can compute the
   image's cover-fit box slightly wrong relative to the parent's true
   rotated projection, leaving a thin-to-large gap depending on angle.
   background-image + background-size:cover does not have this problem
   because it paints as part of the face element's own box, in the
   same transform, rather than as a separately-composited replaced
   element -- so it can never drift out of alignment with its rotated
   parent. The <img> tags stay in the HTML (untouched) purely for
   alt-text/accessibility; .face img{display:none} below hides them
   visually and this background-image is what's actually shown. */
.face.front{background-image:url("../../images/face-1.jpg");background-size:cover;background-position:center;}
.face.back{background-image:url("../../images/face-2.jpg");background-size:cover;background-position:center;}
.face.right{background-image:url("../../images/face-3.jpg");background-size:cover;background-position:center;}
/* face-4.jpg specifically: unlike the other 5 placeholder photos, this
   one is a square (500x500) shot with a large plain white/blurred
   panel baked into the left third of the FRAME ITSELF (visible by
   opening the file directly) -- not letterboxing added by our CSS.
   Because the photo and the face are both exactly square, plain
   background-size:cover has nothing to crop (source and target
   aspect ratios already match), so that white panel was passing
   straight through as a solid white patch on the rotated face. A
   deliberate overscan crop (zoom in, then re-centre on the subject)
   is the only way to cut it out of a same-aspect-ratio image; the
   other 5 faces don't need this since their own photos are already
   full-bleed with no plain background baked in. */
.face.left{background-image:url("../../images/face-4.jpg");background-size:180% 180%;background-position:85% 35%;}
.face.top{background-image:url("../../images/face-5.jpg");background-size:cover;background-position:center;}
.face.bottom{background-image:url("../../images/face-6.jpg");background-size:cover;background-position:center;}
.face img{display:none !important;}

/*------------------------------------------------------------------
CUBE SECTION — navbar clearance. #services is pinned flush at the
viewport's top edge (see the comment in ibd.js's services() for why
the pin itself can't be offset), so its flex-centered content could
render up near the fixed, semi-transparent/blurred navbar. Padding
the content area from the top — not moving the pin — keeps the
section's own box an exact viewport fit while still pushing the
centered cube/copy down clear of the navbar.
------------------------------------------------------------------*/
@media(min-width:992px){
    #services.services{
        padding-top:110px;
    }
}

/*------------------------------------------------------------------
6) FOOTER — white background + social links.
------------------------------------------------------------------*/
.footer{
    background:#ffffff;
    color:#171717;
}
.footer-bg-text{
    color:rgba(0,0,0,.035);
}
.footer p{
    color:rgba(0,0,0,.6);
}
.footer-title{
    color:#171717;
}
.footer-divider{
    background:rgba(0,0,0,.08);
}
.footer-menu a{
    color:#171717;
}
.footer-menu a::after{
    background:#171717;
}

.footer-social{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-bottom:18px;
}
.footer-social a{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1.5px solid rgba(0,0,0,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:#171717;
    transition:.3s;
}
.footer-social a:hover{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    transform:translateY(-4px);
}
.footer-links{
    text-align:center;
}
.footer-links a{
    font-weight:600;
    color:#171717;
    position:relative;
}
.footer-links a:hover{
    color:var(--primary);
}


/* ================================================================
   IBD MOBILE FIX — 2026
   Desktop layout remains untouched.
   ================================================================ */

@media (max-width: 991.98px) {

  /* overflow-x:hidden removed from html/body here too — see
     corrections.css for why (breaks position:fixed on iOS Safari,
     which both #header and the pinned mobile cube rely on).
     #ibd-scroll-guard (wrapping <body>'s content in index.html)
     handles horizontal-scroll containment instead. */
  html, body {
    width: 100%;
    max-width: 100%;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  /* ---------- HEADER / NAV ---------- */
  #header {
    width: 100%;
    left: 0;
    right: 0;
  }

  #header .navbar {
    max-width: 100% !important;
    width: 100%;
    padding: 10px 14px;
  }

  #header .navbar > .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  #header .navbar-brand img {
    max-width: 118px;
    height: auto;
  }

  #header .navbar-collapse {
    position: absolute;
    top: calc(100% - 1px);
    left: 10px;
    right: 10px;
    z-index: 9999;
    padding: 18px;
    background: rgba(255,255,255,.97);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
  }

  #header .navbar-nav {
    width: 100%;
    gap: 4px;
  }

  #header .nav-link {
    padding: 10px 4px;
  }

  #header .btn-nav {
    display: inline-flex;
    margin: 12px 0 0;
  }

  /* ---------- SECTION DEFAULTS ---------- */
  main,
  section {
    max-width: 100%;
    overflow-x: hidden;
  }

  .section {
    min-height: auto;
  }

  /* ---------- SHOWREEL ---------- */
  #showreel {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 !important;
  }

  #showreel .showreel-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  #showreel .showreel-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---------- HERO ---------- */
  #hero {
    min-height: 100svh;
    height: auto;
    padding: 110px 0 60px;
  }

  #hero .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-inner {
    min-height: calc(100svh - 170px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .hero-headline {
    width: 100%;
  }

  .hero-row,
  .hero-line-wrap {
    width: 100%;
  }

  .hero-title {
    max-width: 100%;
    margin: 0 0 10px;
    font-size: clamp(2rem, 9vw, 3.2rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
  }

  .hero-headline > p {
    display: none;
  }

  .hero-headline > .text-center {
    text-align: left !important;
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.5;
  }

  .hero-headline > .text-center h4 {
    display: inline;
    font-size: inherit;
  }

  .hero-actions {
    margin-top: 28px;
  }

  .btn-hero {
    width: auto;
  }

  /* ---------- STORY / ABOUT ---------- */
  #story {
    min-height: auto;
    padding: 70px 0;
  }

  #story .story-pin {
    position: relative;
    inset: auto;
    height: auto;
  }

  /* #story .story-row / .story-media-col / .story-copy-col /
     .story-media-sticky / .story-media-stack / .story-media-img /
     .story-content / .story-title / .story-subtitle used to all be
     redeclared right here too -- the very first layer of what turned
     into five stacked, conflicting mobile rewrites of the About
     section (see the consolidation note further down this file, near
     "MOBILE V4"). Removed along with the other two dead layers;
     #story and .story-pin just above are the only rules from this
     original block that MOBILE V4 doesn't already fully re-cover, so
     they're the only ones still here. */

  /* ---------- CLIENTS ---------- */
  #clients {
    padding: 60px 0;
  }

  #clients .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .logo-carousel {
    width: 100%;
    overflow: hidden;
  }

  .logo-carousel-track {
    gap: 28px;
    width: max-content;
  }

  .logo-carousel-track img {
    width: auto !important;
    max-width: 100px;
    height: 28px !important;
    object-fit: contain;
    flex: 0 0 auto;
  }

  /* ---------- SERVICES / CUBE ---------- */
  #services {
    min-height: 100svh;
    height: 100svh;
    padding: 80px 0;
  }

  #services .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  #services .row {
    display: flex;
    flex-direction: column;
  }

  #services .col-lg-5,
  #services .col-lg-7 {
    width: 100%;
  }

  .services-intro {
    text-align: left;
    margin-bottom: 55px;
  }

  .services-intro h2 {
    font-size: clamp(2.2rem, 10vw, 3.5rem);
    line-height: 1;
  }

  .services-intro p {
    font-size: 16px;
    line-height: 1.6;
  }

  .cube-wrapper {
    width: min(72vw, 290px);
    height: min(72vw, 290px);
    margin: 0 auto;
    transform: scale(.78);
    transform-origin: center;
  }

  .cube {
    transform-origin: center center;
  }

  /* ---------- OFFERINGS ---------- */
  #offerings {
    padding: 70px 0;
  }

  #offerings .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .offerings-grid {
    margin-top: 30px;
  }

  .offering-card {
    min-height: 310px;
    padding: 24px;
    border-radius: 20px;
  }

  .offering-card h3 {
    font-size: 23px;
    line-height: 1.15;
  }

  .offering-card p {
    font-size: 15px;
    line-height: 1.5;
  }

  /* ---------- SELECTED WORK ---------- */
  /* FIX ("mobile case studies vanished after the first one"): this used
     to also set a fixed height:100svh here -- locking the section to
     exactly one screen's height no matter how much was actually inside
     it. Mobile stacks all three case-study cards in a plain column
     (see the "no pinning/overlap on mobile" rule in mobile-stability.css),
     which is taller than one screen, but #selected-work also has
     overflow:hidden (mobile-stability.css again, to stop the desktop
     pin/scale effect's residual transforms from spilling out). Fixed
     height + overflow:hidden together silently cropped the section to
     the first screenful -- Panasonic -- and cut Syska and Morisons Baby
     Dreams off entirely, with the next section starting immediately
     after as if they'd never existed. min-height alone still guarantees
     the section is never awkwardly short, without ever capping how tall
     it's allowed to grow. */
  #selected-work {
    min-height: 100svh;
    padding: 0px 0;
  }

  #selected-work .work-stage {
    position: relative;
    min-height: 0;
    height: auto;
  }

  #selected-work .work-card {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    height: auto !important;
    min-height: 0;
    margin-bottom: 55px;
  }

  #selected-work .work-card:last-child {
    margin-bottom: 0;
  }

  #selected-work .work-card .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  #selected-work .work-card .row {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  #selected-work .work-card [class*="col-lg-"] {
    width: 100%;
    max-width: 100%;
  }

  #selected-work .work-image {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  #selected-work .work-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 58vw;
    object-fit: cover;
    border-radius: 16px;
  }

  #selected-work .work-content {
    padding: 0;
  }

  #selected-work .work-content h2 {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1;
    margin: 8px 0 14px;
  }

  #selected-work .work-content p {
    font-size: 16px;
    line-height: 1.55;
  }

  #selected-work .work-services {
    padding-left: 18px;
    margin-bottom: 22px;
  }

  /* ---------- IMPACT ---------- */
  #impact {
    padding: 70px 0;
    min-height: auto;
  }

  #impact .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  #impact .row.g-4 {
    margin-top: 25px !important;
  }

  .impact-card {
    min-height: 160px;
    padding: 25px 18px;
  }

  .impact-card h2 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .impact-card p {
    font-size: 15px;
  }

  /* ---------- CONTACT ---------- */
  #contact {
    padding: 70px 0;
  }

  #contact .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  #contact .row {
    display: flex;
    flex-direction: column;
  }

  #contact .col-lg-5,
  #contact .col-lg-7 {
    width: 100%;
    max-width: 100%;
  }

  .contact-content .section-title {
    font-size: clamp(2.2rem, 9vw, 3.4rem);
    line-height: 1.05;
  }

  .contact-content p {
    font-size: 16px;
    line-height: 1.6;
  }

  .contact-form {
    width: 100%;
    padding: 22px !important;
    border-radius: 18px;
  }

  .contact-form .form-group {
    margin-bottom: 22px;
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    max-width: 100%;
  }

  .submit-btn {
    width: 100%;
  }

  /* ---------- FOOTER ---------- */
  #footer {
    padding: 60px 0 30px;
    overflow: hidden;
  }

  .footer-bg-text {
    font-size: 30vw;
    white-space: nowrap;
  }

  .footer-title {
    font-size: clamp(2rem, 9vw, 3.1rem);
    line-height: 1.05;
  }

  .footer-btn {
    display: block;
    width: 100%;
    margin: 10px 0;
  }

  #footer .row.align-items-center {
    text-align: center !important;
  }

  #footer .col-lg-4 {
    width: 100%;
    text-align: center !important;
    margin-bottom: 24px;
  }

  .footer-logo {
    max-width: 125px;
  }

  .footer-social {
    justify-content: center;
    padding-left: 0;
  }

}

/* Smaller phones */
@media (max-width: 575.98px) {

  #header .navbar-brand img {
    max-width: 105px;
  }

  #hero {
    padding-top: 95px;
  }

  .hero-title {
    font-size: clamp(1.85rem, 9.5vw, 2.7rem);
  }

  /* #story .story-media-stack{grid-template-columns:1fr} and
     .story-media-img{height:190px} used to be here -- dead, along with
     the other superseded About-mobile layers consolidated near
     "MOBILE V4" further down (this one used a grid-based layout MOBILE
     V4 replaced with flex, so grid-template-columns no longer applies
     to anything, and its fixed height was already losing to MOBILE
     V4's height:auto !important). */

  .cube-wrapper {
    width: 260px;
    height: 260px;
    transform: scale(.68);
  }

  .offering-card {
    min-height: 280px;
  }

  #selected-work .work-image img {
    max-height: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
}

/* iOS safe-area */
@supports (padding: max(0px)) {
  @media (max-width: 991.98px) {
    #header .navbar {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
  }
}


/* Three earlier full rewrites of the About section's mobile layout
   used to follow here ("ABOUT SECTION — MOBILE REVISION", "MOBILE V3",
   plus this file's very first mobile block) — each one a complete
   re-declaration of #story .story-media-stack / .story-media-img /
   .story-title etc., stacked on top of the last without ever removing
   it. Every property they touched was ultimately re-declared with
   !important by "MOBILE V4" below (the last one in file order), so
   they were fully dead weight already — but with THIS many competing
   declarations of the same properties across five separate
   @media(max-width:991.98px) blocks, that safety net rested entirely
   on every one of them staying in perfect sync, forever, by hand.
   That's exactly the same shape of bug already called out for the
   mobile client-logo marquee elsewhere in this file (a stray
   `!important` from an early attempt silently outranking everything
   meant to replace it) — confirmed by direct inspection this round
   that it hadn't (yet) actually broken anything currently live, but
   it's the reason "recheck the About Us images" kept coming back as
   its own bug hunt round after round. Removed rather than left as
   more dead layers on the pile; MOBILE V4 below is now the single
   place that owns the About section's mobile layout, matching the
   convention already used for the marquee. */


/* NOTE: the mobile client-logo marquee used to be redefined five more
   times below this point (a static grid, several scrolling attempts
   with different durations/sizes) — all superseded, none removed. The
   very first of those left `transform: none !important` on
   #clients .logo-carousel-track with nothing later in this file able
   to out-rank it, which silently froze the marquee in place no matter
   which `animation` won the cascade. All of those attempts have been
   removed; assets/css/mobile-final-fix.css is now the single place
   that owns the mobile marquee's motion and layout.
   (This block used to also carry a full "ABOUT: COPY FIRST, IMAGES
   AFTER" mobile revision for #story -- removed for the same reason
   as the block above: fully superseded by MOBILE V4 below, and one
   less copy of the same properties to keep in sync by hand.)
   ------------------------------------------------------------ */


/* ================================================================
   MOBILE V4
   ABOUT: PARAGRAPHS FIRST, SQUARE IMAGES BELOW
   CLIENTS: KEEP MARQUEE, TWO LOGOS VISIBLE
   Desktop remains untouched.
   ================================================================ */

@media (max-width: 991.98px) {

  /* ------------------------------------------------
     ABOUT
     ------------------------------------------------ */

  #story {
    padding: 72px 0 85px;
    overflow: hidden;
  }

  #story .story-row {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  /* Text first */
  #story .story-copy-col {
    order: 1;
    width: 100%;
    max-width: 100%;
    padding: 0 20px !important;
  }

  #story .story-content {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* On mobile, remove the oversized display treatment.
     Each paragraph gets its own clean reading rhythm. */
  #story .story-title {
    font-size: 0 !important;
    line-height: 1 !important;
    margin: 0 0 28px !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: left !important;
    overflow: visible !important;
  }

  #story .story-title .story-word {
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: clamp(2.3rem, 11vw, 3.4rem) !important;
    line-height: .95 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  #story .story-title::before {
    content: "We create";
    display: block;
    font-size: clamp(2.3rem, 11vw, 3.4rem);
    line-height: .95;
    margin-bottom: 5px;
  }

  #story .story-subtitle {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #666;
    opacity: 1;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  #story .story-subtitle:last-child {
    margin-bottom: 0 !important;
  }

  /* Images below text, one square image per row */
  #story .story-media-col {
    order: 2;
    width: 100%;
    max-width: 100%;
    padding: 0 20px !important;
    margin-top: 46px;
  }

  #story .story-media-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    width: 100%;
  }

  #story .story-media-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    width: 100%;
    height: auto !important;
    margin: 0;
  }

  /* FIX ("About Us images broken on mobile"): per request, mobile no
     longer shares the GSAP/IntersectionObserver reveal desktop uses
     (storyMediaReveal() in ibd.js now skips mobile widths entirely --
     see the FIX note there). These four images instead get a plain
     CSS fade-in-up, staggered one after another, that starts playing
     the instant each image paints -- no JS, no observer, nothing that
     depends on scroll timing or can be raced/starved by a fast fling.
     animation-fill-mode:both holds the "from" state (opacity:0) before
     each one's delay elapses, so there's no flash of the fully-opaque
     browser default before the animation takes over, and holds the
     "to" state (opacity:1, its natural position) forever after. */
  #story .story-media-img,
  #story .story-media-img:nth-child(1),
  #story .story-media-img:nth-child(2),
  #story .story-media-img:nth-child(3),
  #story .story-media-img:nth-child(4) {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 16px;
    animation: ibdStoryImgFadeIn .6s ease both;
  }

  #story .story-media-img:nth-child(1) { animation-delay: 0s; }
  #story .story-media-img:nth-child(2) { animation-delay: .12s; }
  #story .story-media-img:nth-child(3) { animation-delay: .24s; }
  #story .story-media-img:nth-child(4) { animation-delay: .36s; }
}

@keyframes ibdStoryImgFadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  #story .story-media-img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 991.98px) {
  /* CLIENTS marquee: see the note near the top of the previous mobile
     block — superseded, removed. Owned by mobile-final-fix.css now. */
}

@media (max-width: 575.98px) {

  #story {
    padding-top: 62px;
  }

  #story .story-copy-col {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #story .story-media-col {
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-top: 40px;
  }

  #story .story-subtitle {
    font-size: 15.5px !important;
    line-height: 1.67 !important;
    margin-bottom: 22px !important;
  }

  #story .story-media-stack {
    gap: 14px;
  }

  #story .story-media-img,
  #story .story-media-img:nth-child(1),
  #story .story-media-img:nth-child(2),
  #story .story-media-img:nth-child(3),
  #story .story-media-img:nth-child(4) {
    border-radius: 14px;
  }
}


/* Three more full re-implementations of the mobile client-logo marquee
   used to follow here (22s/9s durations, different logo sizes, a
   hover/active pause, a "V5" that disabled the animation for JS to
   drive instead) — all superseded by later attempts, none removed.
   See the note earlier in this file: assets/css/mobile-final-fix.css
   is now the single place that owns this. */


/* ================================================================
   SERVICES VIDEO BACKGROUND — MOBILE FIX
   The video was only using its natural aspect-ratio height because
   the parent had 100vh but the <video> itself had width:100% only.
   ================================================================ */

@media (max-width: 991.98px) {

  #services {
    position: relative !important;
    min-height: 100svh !important;
    height: 100svh;
    overflow: visible !important;
    isolation: isolate;
    padding: 80px 0 !important;
  }

  #services #service-bg,
  #services .video-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
  }

  #services #service-bg video,
  #services .video-bg video {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  #services > .container {
    position: relative !important;
    z-index: 2 !important;
  }

  #services .services-intro,
  #services .cube-wrapper {
    position: relative;
    z-index: 2;
  }

  /* Soft white veil keeps the video visible without overpowering text/cube. */
  #services::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255,255,255,.58);
    pointer-events: none;
  }

  #services > .container {
    isolation: isolate;
  }

  #services .cube-wrapper {
    margin-top: 10px;
  }
}

@media (max-width: 575.98px) {

  #services {
    min-height: 100svh !important;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  #services #service-bg video,
  #services .video-bg video {
    object-position: center center !important;
  }

  #services::after {
    background: rgba(255,255,255,.62);
  }
}