/* ============================================================
   Divano - Mobile design layer (phones ≤ 600px)
   Loaded after every other stylesheet. Desktop is untouched.
   Goal: every component re-designed for a 390px canvas - swipeable
   card rails, compact steppers and two-column footers instead
   of full-width desktop blocks stacked on top of each other.
   ============================================================ */

@media (max-width: 600px) {

  /* ---------- 0 · TYPE & RHYTHM ---------- */
  h1.ot_custom_heading { font-size: clamp(1.65rem, 7.5vw, 2rem) !important; letter-spacing: 0.04em; }
  .spacer-single { height: 22px !important; }
  .spacer-double { height: 40px !important; }

  /* compact fixed header - the big logo was eating a tenth of the screen */
  header.site-header { padding: 5px 0 !important; }
  header.site-header #logo img { max-height: 38px !important; width: auto !important; }

  /* ---------- 1 · WHAT WE DO - swipeable card rail ---------- */
  .servicesGrid .display-table {
    display: flex !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px 22px;
    scrollbar-width: none;
  }
  .servicesGrid .display-table::-webkit-scrollbar { display: none; }
  .servicesGrid .box-four-columns {
    position: relative;
    flex: 0 0 84%;
    width: 84% !important;
    height: auto !important;
    min-height: 440px;
    scroll-snap-align: center;
    border-radius: 8px;
    overflow: hidden;
    display: flex !important;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
  }
  .servicesGrid .box-four-columns .padding40 {
    padding: 26px 22px 24px !important;
    width: 100%;
  }
  .servicesGrid .box-four-columns h3 { font-size: 20px; margin-bottom: 10px; }
  .servicesGrid .box-four-columns .service-excerpt p { font-size: 14px; line-height: 1.7; }
  .servicesGrid .box-four-columns .btn-line { margin-top: 14px; }

  /* portrait crop of the smart-controls scene: the landscape cover loses its
     composition in a card this tall */
  .servicesGrid .box-four-columns.sv-cover-smart {
    background-image: url(/images/site/services/smart-cover-mobile.jpg) !important;
  }

  /* ---------- 2 · OUR PROCESS - compact 2-up stepper ---------- */
  .processGrid .de_nav.process-circle-textonly {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
  }
  .processGrid .de_nav.process-circle-textonly::before,
  .processGrid .de_nav.process-circle-textonly::after { display: none !important; content: none !important; }
  .processGrid .de_nav.process-circle-textonly li {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .processGrid .de_nav.process-circle-textonly li:last-child { grid-column: 1 / -1; }
  .processGrid .de_nav.process-circle-textonly li span.content-mid {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 64px !important;
    min-height: 0 !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
  }
  .processGrid .de_nav.process-circle-textonly li .inner {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.04em;
  }
  .processGrid .de_nav li .v-border { display: none !important; }
  .processGrid .de_tab_content_inner p { font-size: 15px; line-height: 1.8; }

  /* ---------- 3 · PROJECTS - horizontal swipe rail (like suggested
     videos), never a tall stack of full-width cards ---------- */
  .homeProjectsGrid { padding-top: 52px !important; padding-bottom: 52px !important; }
  /* Homepage keeps the horizontal swipe rail; the Projects page stacks
     full-width banners (scoped below), so only scope the rail to the home band. */
  .homeProjectsGrid .pf-grid {
    display: flex !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 22px;
    scrollbar-width: none;
  }
  .homeProjectsGrid .pf-grid::-webkit-scrollbar { display: none; }
  .homeProjectsGrid .pf-grid .pf-card {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: center;
  }
  /* "You may also like" on a case study: the three closest projects side by
     side on a swipe rail, the way suggested videos work - not three cards
     stacked at the bottom of an already long page. Bleeds to the screen edges
     past .cs-col's padding so the next card peeks in. */
  .cs-rel__rail {
    display: flex !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 18px;
    margin-inline: calc(-1 * clamp(20px, 4vw, 40px));
    padding-inline: clamp(20px, 4vw, 40px);
  }
  .cs-rel__rail::-webkit-scrollbar { display: none; }
  .cs-rel__rail > .pf-card {
    display: block !important;   /* the desktop rule hides the 4th onwards */
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: center;
  }

  /* card crop is NOT set here - the 4:3 ratio lives in projects.css alone
     (single source of truth, identical on desktop, tablet and phone) */
  .pf-card__body { padding: 14px 16px; }
  .pf-card__name { font-size: 19px; }
  .pf-card__cat { font-size: 10px; margin-bottom: 3px; }
  .pf-card__meta { margin-top: 3px; font-size: 11px; }
  .pf-card__badge { top: 12px; left: 12px; padding: 6px 12px; font-size: 10px; }
  /* no hover on touch - always show the CTA */
  .pf-card__view { max-height: 40px !important; opacity: 1 !important; margin-top: 10px !important; }

  /* ---------- 4 · TESTIMONIALS ---------- */
  /* the swipe rail itself lives in the ≤992px block below so it also
     covers tablets / wide phones; keep the phone type sizing here */
  .de_testi blockquote { padding: 24px 20px 20px !important; font-size: 15.5px !important; line-height: 1.75 !important; }
  /* the serif-italic quote body is 20px by design (desktop) - too large for a
     phone card; higher-specificity override beats the !important base rule */
  .testimonial__carousel .de_testi blockquote p,
  .ab-tst__grid .ab-quote p { font-size: 16px !important; line-height: 1.6 !important; }

  /* ---------- 6 · CASE STUDY - compact editorial ----------
     Body copy on a phone was running 16.5px at 1.85 line-height - reads huge
     and never stops scrolling. Bring prose to ~15px / 1.6. */
  .cs-lead { font-size: 15.5px !important; line-height: 1.6 !important; }
  .cs-story2__body p, .cs-story__body p, .cs-section p, .cs-body p { font-size: 15px !important; line-height: 1.62 !important; }
  .cs-section { padding-top: 42px !important; }
  /* Timeline: the 44px number column plus the 30px rail ate a quarter of the
     screen and squeezed every step photo into ~245px. On a phone the number
     becomes a small kicker above the step title and the photo takes the full
     content width. */
  .cs-tl { padding-left: 17px; }
  [dir="rtl"] .cs-tl { padding-left: 0; padding-right: 17px; }
  .cs-tl__item { grid-template-columns: 1fr !important; padding: 18px 0; gap: 10px; align-items: start; }
  .cs-tl__item::before { top: 27px !important; left: -13px !important; transform: translate(-50%, 0) !important; width: 7px !important; height: 7px !important; box-shadow: 0 0 0 4px rgba(228,211,192,0.14) !important; }
  [dir="rtl"] .cs-tl__item::before { left: auto !important; right: -13px !important; transform: translate(50%, 0) !important; }
  .cs-tl__n {
    font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.2em;
    color: rgba(228,211,192,0.7); line-height: 1;
  }
  .cs-tl__img { grid-column: 1 !important; }
  .cs-tl__txt h3 { font-size: 17px; margin-bottom: 6px; }
  .cs-tl__txt p { font-size: 14px; line-height: 1.6; }
  .cs-pal { gap: 14px 12px; }
  .cs-pal__card h3 { font-size: 11px; margin-top: 10px; }
  .cs-pal__card p { font-size: 12.5px; line-height: 1.55; }
  .cs-hl { columns: 1; }
  .cs-hl li { font-size: 14.5px; line-height: 1.6; }

  /* ---------- 7 · SERVICE PAGES ---------- */
  .sv-points__grid { gap: 22px; }
  .sv-point p { font-size: 14px; }

  /* ---------- 8 · HOME HERO - full-width action buttons ---------- */
  /* home.css loads AFTER this file and its shorthand (padding: 120px … 60px)
     was quietly winning the (0,1,0) tie on source order, so this trim never
     landed - the hero still rendered 60px of bottom padding. !important fixes
     it. padding-top is left to home.css: its 140px clears the fixed header. */
  .hm-hero__inner { padding-bottom: 40px !important; }
  .hm-hero__lead { font-size: 15.5px !important; line-height: 1.7 !important; }
  /* the two CTAs share one row - equal halves, one line of type each
     (the arrow glyph is dropped: it costs ~22px we need for the label) */
  .hm-hero__actions { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 9px; }
  .hm-hero__actions .hm-btn {
    flex: 1 1 0; min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding: 13px 6px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
  }
  .hm-hero__actions .hm-btn span[aria-hidden] { display: none; }
}
/* 320px-class phones: BOOK CONSULTATION was clipped by ~3px inside its half */
@media (max-width: 360px) {
  .hm-hero__actions { gap: 8px; }
  .hm-hero__actions .hm-btn {
    font-size: 9.8px !important; letter-spacing: 0.02em !important; padding: 13px 4px !important;
  }
  footer .social-icons ul { gap: 5px; }
  footer .social-icons ul li a { width: 31px !important; height: 31px !important; }
}

@media (max-width: 600px) {
  /* ---------- 9 · CASE STUDY HERO ----------
     The desktop hero says everything three times: the kicker (type · year),
     a facts panel (type / category / year / status) and then the facts row
     under the photo (place / area / year). On a 390px screen that buried the
     cover photo under a wall of repeated text plus three buttons on two rows.
     The phone keeps one of each: kicker → title → byline → two actions,
     and hands the details to the facts row below the photo.                */
  .cs-hero { min-height: 62svh !important; }
  .cs-hero__inner { padding-top: 110px !important; padding-bottom: 34px !important; }
  .cs-hero__grid { gap: 18px !important; }
  .cs-hero__cat { font-size: 10px !important; letter-spacing: 0.2em !important; }
  .cs-hero__title {
    font-size: clamp(1.75rem, 8.2vw, 2.2rem) !important;
    line-height: 1.12 !important;
    margin-top: 10px !important;
  }
  .cs-hero__loc { font-size: 13.5px !important; margin-top: 8px !important; }

  /* type/category/year/status - all of it repeats the kicker and the facts
     row, so the panel goes; area and duration still show further down */
  .cs-hero__facts { display: none !important; }
  /* scope chips wrapped to two lines over the photo - the facts row carries
     the same list on one line instead (see .cs-fact--opt below) */
  .cs-hero__tags { display: none !important; }

  /* two actions on one line; the 3D preview sits under them as a quiet
     full-width bar so the row reads solid → outline → ghost.
     .cs-hero__main is a flex item of the hero grid and shrink-wraps to its
     text, which left the button row 238px wide inside a 335px column - both
     it and the row need the full width before flex: 1 means anything. */
  .cs-hero__grid { align-items: stretch !important; }
  .cs-hero__main { width: 100%; }
  .cs-hero__actions { display: flex !important; width: 100%; flex-wrap: wrap; gap: 8px; margin-top: 20px !important; }
  .cs-hero__actions .cs-btn {
    flex: 1 1 0; min-width: 0;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    padding: 12px 6px !important;
    /* "WATCH TRANSFORMATION" is 20 characters wide in a half-row */
    font-size: 10.5px !important;
    letter-spacing: 0.04em !important;
    margin: 0 !important;
  }
  .cs-hero__actions .dv3d-btn {
    flex: 1 0 100%;
    justify-content: center;
    background: transparent !important;
    border: 1px solid rgba(228,211,192,0.45) !important;
    color: #E4D3C0 !important;
    padding: 11px 10px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
    margin: 0 !important;
  }
  .cs-hero__actions .dv3d-btn svg { opacity: 0.8; }

  /* ---------- Project facts - the essentials, one per line ----------
     A wrapped label+value reads as two half-facts, so each fact keeps to a
     single row. The services line is back on (the hero no longer shows the
     scope chips) and truncates rather than wrapping. */
  .cs-facts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 16px 0 !important;
    margin-top: 22px !important;
  }
  .cs-fact { gap: 8px !important; justify-content: space-between; }
  .cs-fact .k { font-size: 9.5px !important; letter-spacing: 0.14em !important; flex: 0 0 auto; }
  .cs-fact .v {
    font-size: 13px !important; line-height: 1.35 !important; text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  [dir="rtl"] .cs-fact .v { text-align: left; }

  /* ---------- 10 · PROJECTS PAGE - filters on ONE line ---------- */
  .pf-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 20px !important;
    margin-bottom: 22px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pf-filters::-webkit-scrollbar { display: none; }
  .pf-filters button { font-size: 11px !important; letter-spacing: 0.1em !important; white-space: nowrap; }

  /* ---------- 11 · PROCESS description panel, phone sizing ---------- */
  .tab_steps .de_tab_content_inner p {
    padding: 18px 18px !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }

  /* ---------- 12 · SERVICE PAGES - readable, tighter ---------- */
  /* The theme's subheader banner reserved 190px top + 120px bottom padding
     around a one-line title - a near-empty half-screen on a phone. Trim it to
     a tidy banner (top padding still clears the fixed header). */
  #subheader { padding-top: 116px !important; padding-bottom: 56px !important; }
  #subheader .ot_custom_heading, #subheader h1 { margin: 0 !important; }
  /* justified text tears into rivers on a narrow column */
  .service-template-default #content p { text-align: left !important; }
  .sv-intro { padding: 40px 0 26px !important; }
  /* services.css also loads AFTER this file, so its clamp() section paddings
     beat these three on source order and they had never actually applied:
     .sv-band rendered 50px, .sv-points 30px, .sv-others 80px. !important lands
     them. Values are nudged up from the never-rendered originals (34/14) so the
     bands still read as separate next to .sv-intro's 40/26. */
  .sv-band { padding: 40px 0 !important; }
  .sv-points { padding: 18px 0 !important; }
  .sv-others { padding-bottom: 54px !important; }
  .sv h2 { font-size: 1.5rem; margin-bottom: 14px; }
  .sv-lead { font-size: 15px !important; line-height: 1.62 !important; }
  .sv-intro__txt p, .sv-band__txt p { font-size: 14.5px !important; line-height: 1.62 !important; }

  /* (services.html overview rail lives in services.css @600px, where the
     grid is defined - it out-specifies rules here) */

  /* ---------- 13 · ABOUT - compact hero, stats & feature cards ---------- */
  .ab-hero { min-height: 56svh !important; }
  .ab-hero h1 {
    font-size: clamp(1.6rem, 6.6vw, 2rem) !important;
    line-height: 1.22 !important;
    max-width: 18ch !important;
    text-wrap: balance;
    padding: 0 8px;
  }
  .ab-hero .ey { font-size: 11px !important; letter-spacing: 0.24em !important; }
  .ab-hero__tag { font-size: 10.5px !important; letter-spacing: 0.12em !important; gap: 3px 8px !important; margin-top: 16px !important; }
  .ab-stats { gap: 14px !important; }
  .ab-stat .n { font-size: 30px !important; }
  .ab-stat .l { font-size: 11px !important; }
  .ab-card { padding: 24px 20px !important; }
  .ab-card p { font-size: 14.5px !important; line-height: 1.62 !important; }
  /* "Read all our reviews on Google" - the row-flex left the stars stranded
     on the left, vertically centred against the wrapped 2-line text. Stack
     them: stars on their own line, centred, text below. */
  .ab-tst__google a { flex-direction: column; gap: 7px !important; text-align: center; }
  .ab-tst__gstars { letter-spacing: 0.3em !important; }
  .ab-intro p, .ab-story p { font-size: 15px !important; line-height: 1.62 !important; }
  .ab-why__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }
  .ab-feat { padding: 20px 12px !important; }
  .ab-feat__ico { width: 44px !important; height: 44px !important; margin-bottom: 12px !important; }
  .ab-feat__ico svg { width: 20px !important; height: 20px !important; }
  .ab-feat h3 { font-size: 12.5px !important; letter-spacing: 0.06em !important; }

  /* ---------- 14 · CONTACT - tighter form rhythm ---------- */
  .ct-card { padding: 20px 16px !important; }
  .ct-field { margin-bottom: 14px !important; }
  .ct-field input, .ct-field textarea, .ct-field select { font-size: 15px !important; padding-top: 12px !important; }
  .ct-field textarea { min-height: 90px !important; }
  .ct-form__sub { font-size: 14px !important; }

  /* ---------- 15 · SECTION BAND PADDING - the dead vertical space ----------
     WPBakery bakes each row's padding into an inline
     <style data-type="vc_shortcodes-custom-css"> in every page's <head>, at
     desktop values (90px) and flagged !important. That block sits AFTER this
     stylesheet, so a bare `.vc_custom_…` override here would only tie on
     specificity (0,1,0) and lose on source order. Every rule below therefore
     pairs the vc class with the row's own semantic class - (0,2,0) - so it
     wins on specificity and is immune to load order (which differs between
     the EN and AR pages). Language-neutral: no dir/lang selectors involved.

     The theme's own wp-custom-css already trims three of these to 50px, but
     only inside `@media (max-width: 480px)`; from 481-600px the full 90px
     desktop bands were still rendering. Matching 50px here closes that gap
     without changing what a ≤480px phone already shows.

     (a) plain bands */
  .servicesGrid.vc_custom_1710362502217,        /* home - WHAT WE DO   90/60 */
  .call-to-action.vc_custom_1453975681358,      /* services - CTA band 60/60 */
  .wpb_row.vc_custom_1710272000093,             /* not on any element today - */
  .wpb_row.vc_custom_1710963865393 {            /* kept in step if it returns */
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  /* (b) photo-backed bands keep marginally more air so the background image
         still reads as a band rather than a strip behind the text */
  .processGrid.vc_custom_1711312616158,         /* home - OUR PROCESS  90/90 */
  .testimonialsGrid.vc_custom_1711312665200 {   /* home - CUSTOMER SAYS 90/90 */
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }
  /* (c) top band of services.html (the only page that puts this class on an
         element; projects / project / privacy-policy only carry the unused
         rule in their <head>). Under 480px the theme pins this with an
         #wrapper > div > section… selector (1,4,2) that already lands at
         40px/0 - deliberately not outranked, it is not the complaint.
         This closes the 481-600px gap. */
  .servicesPageGrid.vc_custom_1711312859000 {   /* 90/30 */
    padding-top: 48px !important;
    padding-bottom: 24px !important;
  }

  /* (d) the 2026 hand-built bands. home.css loads AFTER this file, so its
         clamp() paddings need !important to be trimmed. On a 375px screen
         these were the worst offenders left: 70px and 64px, top AND bottom. */
  .dm-factory { padding-top: 54px !important; padding-bottom: 54px !important; }
  .dm-clients { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* CONTACT - form + info panel side by side (like the laptop) on any screen
   WIDE ENOUGH to hold both: tablets and landscape / large phones. Below that a
   two-column split clips the info text and squeezes the inputs, so we keep the
   form full width but lay the info cards out two-up instead of one tall stack. */
@media (min-width: 640px) and (max-width: 900px) {
  .ct-card { grid-template-columns: 1.35fr 1fr !important; }
  .ct-form { padding: 30px 26px !important; }
  .ct-info { padding: 26px 22px !important; border-left: 1px solid rgba(228,211,192,0.16) !important; border-top: 0 !important; }
}
@media (max-width: 639px) {
  /* Two-up, but with the icon stacked ABOVE the text so each card gets its
     full width for the address - smaller type keeps it readable, not broken. */
  .ct-info { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 14px 12px !important; align-content: start; }
  .ct-info__item { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 14px 12px !important; margin: 0 !important; min-width: 0 !important; }
  .ct-info__ico { width: 38px !important; height: 38px !important; }
  .ct-info__ico svg { width: 17px !important; height: 17px !important; }
  .ct-info__item h4 { font-size: 11.5px !important; letter-spacing: 0.08em !important; margin: 0 0 2px !important; }
  .ct-info__item p, .ct-info__item a { font-size: 12px !important; line-height: 1.45 !important; word-break: break-word; }
}

/* ============================================================
   FOOTER - compact card on every handheld (phones AND tablets):
   logo · one row of links · two contact lines · socials · ©
   ============================================================ */
@media (max-width: 992px) {

  /* ---------- TESTIMONIALS - horizontal swipe rail (phones + tablets) ----------
     Owl Carousel 1.x (.owl-wrapper-outer / .owl-wrapper / .owl-item /
     .owl-controls) crams two half-width reviews into the viewport and,
     narrower still, stacks them. Neutralise its inline widths + transform
     and turn the wrapper into a scroll-snap rail: one review shown, the
     next peeking, swipeable - pagination dots dropped. */
  .testimonialsGrid .testimonial__carousel {
    width: 100% !important; max-width: 100% !important; overflow: visible !important;
  }
  .testimonialsGrid .owl-wrapper-outer {
    width: 100% !important; max-width: 100% !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 6px;
  }
  .testimonialsGrid .owl-wrapper-outer::-webkit-scrollbar { display: none; }
  .testimonialsGrid .owl-wrapper {
    display: flex !important; gap: 16px;
    width: auto !important; transform: none !important;
  }
  .testimonialsGrid .owl-item {
    flex: 0 0 min(86%, 420px) !important; width: min(86%, 420px) !important;
    min-width: 0 !important; margin: 0 !important; float: none !important;
    scroll-snap-align: center;
  }
  .testimonialsGrid .owl-item > .item { width: 100% !important; }
  .testimonialsGrid .owl-controls,
  .testimonialsGrid .owl-pagination { display: none !important; }

  /* ---- Footer: 2-column layout on phones (info side-by-side, not a long stack) ---- */
  footer .main-footer { padding: 40px 0 10px !important; }
  footer .main-footer .row { display: flex !important; flex-wrap: wrap; align-items: flex-start; }
  footer .main-footer [class*="col-"] {
    float: none !important;
    box-sizing: border-box !important;
    width: 50% !important; max-width: 50% !important;
    padding: 0 12px !important; margin: 0 0 16px !important;
    text-align: left;
  }
  /* brand: logo column full-width, centered, sitting on top */
  footer .main-footer .row > [class*="col-"]:first-child { width: 100% !important; max-width: 100% !important; order: -1; text-align: center !important; margin-bottom: 18px !important; }
  footer #custom_html-1 .textwidget { font-size: 0; line-height: 0; }
  footer #custom_html-1 .textwidget img { max-width: 155px; margin: 0 auto; display: block; }
  /* small column titles so each side reads clearly */
  footer .main-footer h3 {
    display: block !important; font-family: 'Dosis', sans-serif;
    font-size: 12.5px !important; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: #E4D3C0; margin: 0 0 12px !important;
  }
  footer .main-footer .widget { margin: 0 !important; padding: 0 !important; }

  /* navigation (left column): vertical list */
  footer #nav_menu-2 ul.menu { display: block !important; margin: 0; padding: 0; }
  footer #nav_menu-2 ul.menu li { list-style: none; padding: 3px 0 !important; margin: 0 !important; border: none !important; }
  footer #nav_menu-2 ul.menu li a { font-size: 13px !important; letter-spacing: 0.04em; }

  /* the services list duplicates the Services page - hide its whole column
     (3rd) so Navigation and Contact become the two side-by-side columns */
  footer .main-footer .row > [class*="col-"]:nth-child(3) { display: none !important; }
  footer #nav_menu-3 { display: none !important; }

  /* contact (right column): address + tappable phone/email + socials.
     Contact needs the wider half - "+971 50 507 2008" beside its label is the
     longest line in the footer; Navigation is five short words. */
  footer .main-footer .row > [class*="col-"]:nth-child(2) { width: 40% !important; max-width: 40% !important; }
  footer .main-footer .row > [class*="col-"]:nth-child(4) { width: 60% !important; max-width: 60% !important; }
  footer #custom_html-2 address { margin: 0 0 12px; }
  footer #custom_html-2 address span { display: block; font-size: 12px !important; line-height: 1.7; }
  footer #custom_html-2 address span:nth-of-type(6) { display: none; }  /* Web: www.divano.ae */
  /* the 64px label column was squeezing the numbers onto a second line */
  footer #custom_html-2 address strong {
    font-weight: 600; margin-right: 5px; min-width: 0 !important;
    font-size: 11.5px !important; letter-spacing: 0.08em !important;
  }

  /* Socials: six pills never fit inside the 50%-wide contact column, so the
     block breaks out of it and takes its own full-width centred line under
     both columns. Logical margin => works unchanged in RTL (where the contact
     column sits on the left). */
  /* 166.67% + 16px == the full row width, because the contact column is 60% of it */
  footer #custom_html-2 .social-icons {
    width: calc(166.67% + 16px);
    margin-inline-start: calc(-66.67% - 16px);
    margin-top: 16px !important;
  }
  footer .social-icons ul {
    display: flex !important; flex-wrap: nowrap; justify-content: center;
    gap: 7px; margin: 0; padding: 0;
  }
  footer .social-icons ul li a { width: 33px !important; height: 33px !important; }
  /* RTL: mirror the column text alignment */
  [dir="rtl"] footer .main-footer [class*="col-"] { text-align: right; }

  /* subfooter: single centered line */
  footer .subfooter { padding: 12px 0 !important; }
  footer .subfooter [class*="col-"] { width: 100% !important; float: none !important; text-align: center !important; }
  footer .subfooter { font-size: 11.5px !important; letter-spacing: 0.06em; }
}

/* ============================================================
   BUTTONS - sized down for a phone (were oversized/exaggerated):
   trim padding, drop a point of type, keep tap targets ~42-46px.
   ============================================================ */
@media (max-width: 600px) {
  .ct-btn, .ct-form button[type="submit"] {
    padding: 13px 22px !important; font-size: 12px !important; letter-spacing: 0.12em !important;
  }
  /* the submit was wrapping to two lines (h≈82) - give it full width + one line */
  .ct-form button[type="submit"] { width: 100% !important; white-space: nowrap; }
  .hm-btn { padding: 12px 16px !important; font-size: 11px !important; letter-spacing: 0.14em !important; }
  /* "Start Your Project" wrapped to 2 lines and overflow:hidden clipped the
     word PROJECT - force one line and shrink so it fits */
  .sv-btn { padding: 11px 22px !important; font-size: 11.5px !important; letter-spacing: 0.12em !important; white-space: nowrap !important; }
  .btn-line, a.btn-line { font-size: 11.5px !important; letter-spacing: 0.14em !important; }
  .services-masonry .item .btn-line.btn-fullwidth { padding: 9px 20px !important; }
}

/* ============================================================
   BEFORE/AFTER PAIR TABS - side by side, not stacked.
   The row is already flex, but a tab's natural width (52px thumb +
   gap + an uppercase label at 0.14em) exceeds half a phone, so the
   pairs wrapped onto separate lines. Half-width tiles with the
   thumb and type scaled down keep two on a row; a third pair drops
   to its own centred half-width tile rather than stretching.
   ============================================================ */
@media (max-width: 600px) {
  .cs-ba__thumbs { gap: 8px; }
  .cs-ba__thumbs .cs-ba__thumb {
    /* 10px of slack, not 4: at exactly half the row the pair still wrapped,
       because flex breaks lines before it shrinks anything */
    flex: 0 1 calc(50% - 10px); min-width: 0;
    gap: 8px; padding: 6px 8px 6px 6px;
    font-size: 11px; letter-spacing: 0.08em; line-height: 1.25;
  }
  .cs-ba__thumbs .cs-ba__thumb img { width: 40px; height: 30px; flex: none; }
}