/* Elementor <-> yewho-web-effects bridge for tiaramass homepage
   Keeps effects from fighting Elementor layout; never hides approved content. */

/* ghost watermark tuned for our dark bands */
.tm-ghost{
  font-weight:900; letter-spacing:.02em;
  font-size:clamp(72px,16vw,220px);
  top:46%;
  white-space:nowrap;
}

/* embers canvas must sit above the section background image but below content.
   Elementor puts the bg on the element itself + a ::before overlay, so lift real content. */
.md-embers > .e-con-inner{ position:relative; z-index:2; }
.md-embers > .elementor-background-overlay{ z-index:1 !important; }

/* .u flowing-light phrase stays inline inside the H1 */
.hero h1 .u{ display:inline; }
.hero h1 .u .w{ display:inline-block; }

/* tilt: give cards a smooth base + contain the glare highlight to the card */
.md-tilt{ transform-style:preserve-3d; will-change:transform; }
.md-tilt > *{ transform:translateZ(0); }

/* magnetic button wrapper must not clip the pull */
.elementor-button.mag{ will-change:transform; }

/* SAFETY: if JS fails, html.js is stripped -> everything below reverts to visible.
   Also guarantee decode headings never render empty before JS (fallback text stays). */
.no-js .md-decode{ }

/* scroll cue colour on the photographic hero */
.hero .md-cue::before{ background:#fff; }
.hero .md-cue{ opacity:.85; }

/* reduced-motion / low-power: kill ambient, keep content */
:root[data-motion="off"] .md-embers-cv,
:root[data-motion="lite"] .md-embers-cv{ display:none; }
:root[data-motion="off"] .tm-ghost{ opacity:.05; }

/* ============ hover system ============ */
:root{ --ease: cubic-bezier(.22,.61,.2,1); }

/* card lift on hover (glow comes from .md-glow in hover.css) */
.tm-card{ transition: transform .45s var(--ease), box-shadow .45s var(--ease); will-change: transform; }
@media (hover:hover){ .tm-card:hover{ transform: translateY(-7px); } }

/* image zoom inside a card (clip to the image widget, scale the img) */
.tm-zoom .elementor-widget-image,
.tm-zoom figure.elementor-image-box-img{ overflow:hidden; }
.tm-zoom .elementor-widget-image img,
.tm-zoom figure.elementor-image-box-img img{ transition: transform .6s var(--ease); }
@media (hover:hover){
  .tm-zoom:hover .elementor-widget-image img,
  .tm-zoom:hover figure.elementor-image-box-img img{ transform: scale(1.07); }
}

/* ============ uniform hero banner height (match Freight Services ~676px) ============ */
.tm-hero{
  min-height:650px !important;
  padding-top:166px !important;   /* clears the transparent sticky header + breathing room
                                     under the nav; every hero title is normalised to the
                                     same offset, so this shifts them all as one. */
  padding-bottom:60px !important;
}
/* neutralise any inner vertical padding so all heroes settle to the same height */
.tm-hero > .e-con-inner{ padding-top:0 !important; padding-bottom:0 !important; }
/* tablet/mobile: header condenses to a large logo + hamburger -> needs more top clearance */
@media (max-width:1024px){ .tm-hero{ min-height:540px !important; padding-top:174px !important; } }
/* At <=767px the hero also carries Elementor's own responsive --margin-top:-254px
   (an inherited "hero bleeds under the header" rule, correct at desktop/tablet where
   it gives 36-38px clearance below the header). padding-top here was set to 128px
   (matching the header's own height) without accounting for that -254px already
   pulling the box up - net effect put the title at y=2, hidden behind the header.
   header(128) + margin(-254) + padding(291) = ~165, matching the desktop/tablet
   clearance ratio. Verify with getComputedStyle after any future change here -
   this box model is easy to get numerically wrong without measuring it. */
@media (max-width:767px){  .tm-hero{ min-height:440px !important; padding-top:291px !important; padding-bottom:48px !important; } }

/* hero banner text: flash / fade in on load (replaces the typewriter) */
@keyframes tmFlash{
  0%{ opacity:0; transform:translateY(16px) scale(.99); filter:blur(6px); }
  55%{ filter:blur(0); }
  100%{ opacity:1; transform:none; filter:blur(0); }
}
@keyframes tmFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.tm-hero .tm-flash{ animation:tmFlash .9s var(--ease) both; }
.tm-hero .elementor-widget-text-editor{ animation:tmFadeUp .8s var(--ease) .22s both; }
.tm-hero .elementor-widget-button,
.tm-hero .elementor-widget-form{ animation:tmFadeUp .8s var(--ease) .38s both; }
@media (prefers-reduced-motion:reduce){
  .tm-hero .tm-flash,
  .tm-hero .elementor-widget-text-editor,
  .tm-hero .elementor-widget-button,
  .tm-hero .elementor-widget-form{ animation:none !important; }
}

/* gentle photo zoom-on-hover for standalone content photos */
.tm-imgzoom{ overflow:hidden; border-radius:14px; }
.tm-imgzoom img{ display:block; transition: transform .6s var(--ease); will-change: transform; }
@media (hover:hover){ .tm-imgzoom:hover img{ transform: scale(1.06); } }

/* icon pop on the "Why Choose Us" items */
.tm-pop .elementor-icon-box-icon{ transition: transform .4s var(--ease); }
@media (hover:hover){ .tm-pop:hover .elementor-icon-box-icon{ transform: translateY(-4px) scale(1.1); } }

/* ============ flip: service photo tiles ============ */
.tm-flip .md-flip-front img{ display:block; width:100%; height:auto; border-radius:12px; }
.tm-flip .md-flip-back{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:12px; padding:18px; text-align:center;
  background:linear-gradient(140deg,#C8102E 0%,#8a0c1f 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.tm-back{ color:#fff; text-decoration:none; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.tm-back-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border:1.5px solid rgba(255,255,255,.75); border-radius:999px; padding:10px 20px;
  transition: background .3s var(--ease), color .3s var(--ease), gap .3s var(--ease);
}
.tm-back-cta b{ font-weight:400; transition: transform .3s var(--ease); }
@media (hover:hover){ .md-flip:hover .tm-back-cta{ background:#fff; color:#C8102E; gap:12px; } }
/* touch / reduced-motion: no hover flip -> the photo (front) + existing arrow stay usable */
@media (hover:none){ .tm-flip .md-flip-inner{ transform:none !important; } }

/* ============ nav underline sweep ============ */
.nav-area .elementor-item{ position:relative; }
.nav-area .elementor-item::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:#C8102E; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
@media (hover:hover){ .nav-area .elementor-item:hover::after{ transform:scaleX(1); } }
.nav-area .elementor-item.elementor-item-active::after{ transform:scaleX(1); }

/* ============ main-nav dropdown =====================================
   The mirror never boots Elementor's SmartMenus JS, so the "Service"
   sub-menu had no way to open. Pure-CSS hover dropdown (no JS needed).
   display:block !important neutralises any inline display:none.
   ==================================================================== */
@media (min-width:1025px){
  .elementor-widget-nav-menu,
  .elementor-widget-nav-menu .elementor-widget-container,
  .elementor-nav-menu--main,
  .elementor-nav-menu--main .elementor-nav-menu{ overflow:visible !important; }

  .elementor-nav-menu--main .menu-item-has-children{ position:relative; }
  .elementor-nav-menu--main .menu-item-has-children > .sub-menu{
    display:block !important;
    position:absolute; top:100%; left:0;
    width:auto !important; min-width:230px;
    /* theme forces margin-top:35px !important -> leaves a dead zone that drops the
       hover before the cursor reaches the panel. Close it up. */
    margin:0 !important; padding:8px 0; list-style:none;
    background-color:#052B38 !important;   /* match the header bar; beats theme specificity */
    border:1px solid rgba(255,255,255,.08); border-radius:10px;
    box-shadow:0 18px 42px rgba(0,0,0,.45);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
    z-index:9999;
  }
  .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
  .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  .elementor-nav-menu--main .sub-menu li{ margin:0; width:100%; }
  .elementor-nav-menu--main .sub-menu a.elementor-sub-item{
    display:block; padding:11px 18px; white-space:nowrap;
    color:rgba(255,255,255,.82); font-size:14px; line-height:1.3; text-decoration:none;
    transition:background-color .2s, color .2s, padding-left .2s;
  }
  .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
  .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus{
    background:#e11d38; color:#fff; padding-left:23px;
  }
}

/* ============ uniform hero title position ===========================
   Align every hero H1 to the same spot as Home/Service (top = 159px).
   Several pages previously overlapped the nav (freight-services -54px).
   Desktop only; tablet/mobile keep their existing spacing.
   ==================================================================== */
@media (min-width:1025px){
  .tm-hero .elementor-element-7a6a7f31{ padding-top:70px !important; } /* about-us */
  .tm-hero .elementor-element-e8270f1 { padding-top:70px !important; } /* careers */
  .tm-hero .elementor-element-beb15f0 { padding-top:70px !important; } /* contact-us */
  .tm-hero .elementor-element-02fd0c8 { padding-top:80px !important; } /* freight-services */
  .tm-hero .elementor-element-6f12555 { padding-top:80px !important; } /* logistics-equipment */
  .tm-hero .elementor-element-3e13288a{ padding-top:80px !important; } /* moving-packing */
  .tm-hero .elementor-element-2c0cd99 { padding-top:80px !important; } /* our-branches */
  .tm-hero .elementor-element-5c977fa { padding-top:80px !important; } /* transportation */
}

/* ============ homepage hero forklift vs red icon band ===============
   The forklift image is absolutely positioned (top:-56px) and hung 113px
   down into the red band, covering the "Reliable Fleet & Equipment" and
   "Secure Handling" icons. Band top = 615, icons start at 637, forklift
   bottom was 728. Rest it on the band edge so both icons are clear.
   Only desktop collides (<=1009px never overlapped), so scope it.
   ==================================================================== */
@media (min-width:1025px){
  .elementor-element-bcafe1e{ top:-169px !important; }
}

/* ============ enquiry form (replaces the dead Contact Form 7 markup) ==========
   Matches the site's own language (DM Sans inherited, brand red, pill CTA) while
   following the kit conventions: real labels, visible focus, >=48px targets.
   ============================================================================= */
/* the theme styles the OLD CF7 markup with `.contact-home form{display:flex;flex-flow:wrap}`,
   which out-specifies .tm-form and turns our grid into a shrink-to-fit flex item. Override it. */
.tm-form{
  display:block !important; width:100%;
  --tmr:#C8102E; --tmr-d:#A60D26; max-width:900px; margin:0 auto; text-align:left;
}
.tm-form .tm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; width:100%; }
@media (max-width:760px){ .tm-form .tm-grid{ grid-template-columns:1fr; } }
.tm-form .tm-full{ grid-column:1 / -1; }

.tm-form label{
  display:block; margin:0 0 7px; font-size:13.5px; font-weight:600;
  color:#111823; letter-spacing:.01em; line-height:1.3;
}
.tm-form .tm-req{ color:var(--tmr); }
.tm-form input, .tm-form textarea{
  width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:#111823;
  background:#F6F7F9; border:1px solid #E2E6EC; border-radius:10px;
  padding:13px 15px; min-height:48px; outline:none; -webkit-appearance:none;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.tm-form textarea{ resize:vertical; min-height:140px; line-height:1.6; }
.tm-form input::placeholder, .tm-form textarea::placeholder{ color:#98A1AE; }
.tm-form input:hover, .tm-form textarea:hover{ border-color:#cfd6df; }
.tm-form input:focus, .tm-form textarea:focus{
  background:#fff; border-color:var(--tmr); box-shadow:0 0 0 3px rgba(200,16,46,.14);
}
/* error state */
.tm-form .tm-err{ display:none; margin-top:6px; font-size:12.5px; font-weight:500; color:var(--tmr); }
.tm-form .tm-field.is-bad input, .tm-form .tm-field.is-bad textarea{
  border-color:var(--tmr); background:#fff; box-shadow:0 0 0 3px rgba(200,16,46,.10);
}
.tm-form .tm-field.is-bad .tm-err{ display:block; }

/* honeypot - off-screen, never shown to humans */
.tm-hp{ position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* actions */
.tm-form .tm-actions{ margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.tm-form .tm-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 36px; border:0; border-radius:50px; cursor:pointer;
  background:var(--tmr); color:#fff; font:inherit; font-size:14.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 10px 26px rgba(200,16,46,.30);
  transition:transform .25s var(--ease), box-shadow .25s, background-color .25s;
}
@media (hover:hover){ .tm-form .tm-submit:hover{ background:var(--tmr-d); transform:translateY(-2px); box-shadow:0 14px 32px rgba(200,16,46,.40); } }
.tm-form .tm-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.tm-form .tm-spin{
  width:16px; height:16px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  border-radius:50%; display:none; animation:tmSpin .7s linear infinite;
}
.tm-form.is-sending .tm-spin{ display:inline-block; }
@keyframes tmSpin{ to{ transform:rotate(360deg); } }
.tm-form .tm-note{ margin:0; font-size:12.5px; color:#98A1AE; text-align:center; }

/* status message */
.tm-form .tm-status{ margin-top:16px; border-radius:10px; font-size:14.5px; line-height:1.55; text-align:center; }
.tm-form .tm-status.ok{ padding:14px 16px; background:#ECFDF3; border:1px solid #ABEFC6; color:#067647; }
.tm-form .tm-status.bad{ padding:14px 16px; background:#FEF3F2; border:1px solid #FECDC9; color:#B42318; }

@media (prefers-reduced-motion:reduce){
  .tm-form .tm-submit{ transition:none; }
  .tm-form .tm-spin{ animation-duration:1.6s; }
}

/* ============ live Google reviews (Featurable) ======================
   Replaces the old static testimonial swiper. The widget renders its own
   heading, so the section keeps its Elementor heading above and we simply
   give the embed room to breathe.
   ==================================================================== */
.tm-reviews{ width:100%; }
.tm-reviews-inner{ max-width:1120px; margin:0 auto; min-height:220px; }

/* reviews band ran ~912px tall. The Featurable widget's own py-16 (64px top+bottom) is
   trimmed via a style injected into its shadow root; this trims the band's own padding. */
.elementor-element-48fbad3{ --padding-top:28px !important; --padding-bottom:28px !important; }
.tm-reviews-inner{ min-height:0; }

/* About Us hero: subline under the centred H1 (matches the Service hero's type scale) */
.tm-hero .tm-hero-sub{
  max-width:660px; margin:14px auto 0; text-align:center;
  font-family:"DM Sans", Sans-serif; font-size:20px; font-weight:400; line-height:30px; color:#FFFFFF;
}
.tm-hero .tm-hero-sub p{ margin:0; }
@media (max-width:767px){ .tm-hero .tm-hero-sub{ font-size:16px; line-height:26px; max-width:92%; } }

/* About Us hero title: keep it off the screen edges (it is a long line) */
.tm-hero .elementor-element-7a6a7f31 .elementor-heading-title{
  max-width:900px; margin-left:auto; margin-right:auto;
}

/* About Us hero was the only centred one; align it left like every other page. */
.tm-hero .elementor-element-7a6a7f31{ text-align:left !important; }
.tm-hero .elementor-element-7a6a7f31 .elementor-heading-title{ margin-left:0; margin-right:0; max-width:820px; }
.tm-hero .tm-hero-sub{ text-align:left; margin-left:0; margin-right:0; max-width:640px; }

/* Hero CTA pair: the standard pages wrap their two buttons in a flex row. The heroes we
   added buttons to had them as direct children of a column container, so they stacked and
   pushed the hero past its 660px. Row them up. */
.tm-hero .tm-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:8px; }
.tm-hero .tm-cta-row > .elementor-widget-button{ width:auto; max-width:none; margin:0; }

/* ============ hero CTA pair: ONE standard on every page =====================
   Elementor scopes button colours per page (.elementor-1757 .elementor-element-...),
   so copied widgets lost their styling and fell back to theme defaults (the grey /
   green buttons). Style them here by role instead, so all pages match.
   Standard taken from the Service hero: red primary + translucent white secondary.
   ========================================================================== */
.tm-hero .elementor-widget-button .elementor-button{
  font-family:"DM Sans", Sans-serif; font-size:13px; font-weight:500; line-height:20px;
  text-transform:uppercase; letter-spacing:.01em;
  border-style:solid; border-width:1px; border-radius:20px;
  padding:12px 30px; color:#FFFFFF !important;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.tm-hero .elementor-widget-button .elementor-button svg path{ fill:#FFFFFF; }

/* primary */
.tm-hero .tm-cta-primary .elementor-button{
  background-color:#CA1F26 !important; border-color:#CA1F26 !important;
}
@media (hover:hover){ .tm-hero .tm-cta-primary .elementor-button:hover{ background-color:#a8171d !important; border-color:#a8171d !important; transform:translateY(-2px); } }

/* secondary */
.tm-hero .tm-cta-secondary .elementor-button{
  background-color:#FFFFFF1F !important; border-color:#FFFFFF24 !important;
}
@media (hover:hover){ .tm-hero .tm-cta-secondary .elementor-button:hover{ background-color:#FFFFFF33 !important; border-color:#FFFFFF5C !important; transform:translateY(-2px); } }

/* copied widgets carried width:100%/50% rules from their source page; let them size to content */
.tm-hero .tm-cta-primary, .tm-hero .tm-cta-secondary{ width:auto !important; max-width:none !important; margin:0 !important; }

/* Even gap between the two hero CTAs on EVERY page. On the pages where the two button
   widgets share an Elementor flexbox (no gap), margin:0 above made them touch and the
   magnetic-hover buttons overlapped. Space adjacent CTAs; .tm-cta-row pages already use
   flex gap, so zero the margin there to avoid doubling. */
.tm-hero .tm-cta-primary + .tm-cta-secondary,
.tm-hero .tm-cta-secondary + .tm-cta-primary{ margin-left:14px !important; }
.tm-hero .tm-cta-row .tm-cta-primary + .tm-cta-secondary,
.tm-hero .tm-cta-row .tm-cta-secondary + .tm-cta-primary{ margin-left:0 !important; }

/* ============ header top bar (desktop only) =========================
   The theme builds this bar as a FIXED 534px block with deliberately uneven
   decorative ends: a 30px skewed tab left (:before) and an 80px skewed tail
   right (:after). The map pin used to fill that right side; once it was removed
   the tail read as dead space (23px padding left vs 79px right).
   Fix: drop the pin's empty column, tighten the bar to the remaining content and
   halve the tail -> measured 23px / 19px. Then re-centre the bar over the menu.

   EVERYTHING here is desktop-only. These rules must NOT leak below 1200px: the
   theme switches the bar to max-width:100% for tablet/mobile, and overriding that
   pins it at 500px and leaves white space beside it.
   ================================================================== */
@media (min-width:1200px){
  .header-top .elementor-element-d7ce9cf{ display:none !important; }   /* removed pin's slot */
  .header-top{
    max-width:500px !important;
    margin-left:auto !important;
    margin-right:calc((100% - 1140px)/2 + 91px) !important;            /* centre over the menu */
  }
  /* cut off BOTH skewed decorative ends (:before = 30px tab left, :after = 80px tail
     right). They were never symmetric, which is what made the bar look off-centre.
     Without them the bar is a clean rectangle and sits visibly centred.
     (The theme already hides these below 1024px.) */
  .header-top:before, .header-top:after{ display:none !important; }
  .header-top > .elementor-container{ justify-content:center !important; }
  /* never set width:auto on the columns - it lets the phone column shrink and wraps
     "Call now : +60 3-78316889" onto two lines */
  .header-top .elementor-column > .elementor-widget-wrap{ white-space:nowrap; }
  /* phone column pads 18px left, email column only 15px right -> even it up.
     Target the email column by id: :last-of-type would hit the hidden pin column. */
  .header-top .elementor-element-c01db0e > .elementor-widget-wrap{ padding-right:22px !important; }
}

/* The theme sets .header-top .elementor-column{width:auto} at <=1024px, which lets the
   phone column shrink until "+60 3-78316889" splits across two lines (pre-existing).
   Keep the number intact at every width. */
.header-top .elementor-image-box-title{ white-space:nowrap; }

/* ============ Our Logistics Equipment: photo cards ==================
   3 of the 4 image widgets hard-code img{height:231px} (only the forklift
   didn't), which squashed the new 3:4 portrait photos and left the cards
   uneven. Let all four follow the photo's own ratio so they match.
   ================================================================== */
.elementor-element-277d7cd img,
.elementor-element-237fdd0 img,
.elementor-element-43fd8a6 img,
.elementor-element-2536c39 img{ height:auto !important; }

/* ============ our-branches: branch map cards =======================
   Cards 1 & 2 (Bukit Jelutong HQ, Seksyen 30) had NO title/location/description
   under their map, unlike cards 3 & 4. Their map iframes were also 582px tall
   (vs 328px on cards 3 & 4), filling the card and leaving no room for the text.
   Match card 3's map height so all four cards read the same.
   ================================================================== */
.elementor-element-e2f17a4 iframe,
.elementor-element-a4927b9 iframe{ height:328px !important; }

/* ============ "Your Freight Forwarding & Mover Specialist" section bg ============
   Bright world-routes background behind the About block. The image is already very
   light (pale wash), so only a whisper of white overlay is needed to keep the dark
   heading + body text crisp over the plane/ship areas. */
.elementor-element-23142c6{
  background-image:
    url('../wp-content/uploads/2026/07/about-section-bg.jpg?v=2') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ================= HERO — STRICT SHARED STANDARD (every page) =================
   ONE source of truth for hero typography. Elementor scopes hero type per page,
   and it had drifted: the about-us subtitle was 15px/#161616 (dark text on a dark
   photo) and contact-us was 25px, against the 20px/#FFFFFF used by the other eight.
   Locked here with !important so all 10 heroes are identical.

   RULE: hero type is set HERE and nowhere else. Do not add per-page hero font
   rules — change this block instead.

   NOTE: the per-page hero *title padding* further up is deliberately calibrated
   (70/80px) so every H1 lands on the same baseline despite differing Elementor
   inner padding. That is intentional — do NOT collapse it to a single value.
   ============================================================================= */
.tm-hero .elementor-widget-heading .elementor-heading-title{
  font-family:"DM Sans", Sans-serif !important;
  font-size:50px !important;
  font-weight:600 !important;
  line-height:60px !important;
  color:#FFFFFF !important;
}
.tm-hero .elementor-widget-text-editor,
.tm-hero .elementor-widget-text-editor p,
.tm-hero .tm-hero-sub{
  font-family:"DM Sans", Sans-serif !important;
  font-size:20px !important;
  font-weight:400 !important;
  line-height:30px !important;
  color:#FFFFFF !important;
}

/* contact-us has the longest headline on the site ("Get in Touch with Tiara Mass
   Shipping & Logistic Sdn. Bhd."). It was wrapping to THREE lines, which pushed that
   hero to 680px while every other page sat at 650. Give it the full hero width so it
   wraps to two lines and the hero matches the 650 standard. The real constraint is
   the heading WIDGET, which Elementor caps at 65.292% (= 695px), not the text. */
.tm-hero .elementor-element-beb15f0{
  width:100% !important; max-width:100% !important;
  --container-widget-width:100% !important;
}
.tm-hero .elementor-element-beb15f0 .elementor-heading-title{ max-width:none !important; }

/* ============ "Worldwide Service Coverage" section bg (homepage) ============
   Bright globe/routes backdrop. Same treatment as the About section above it so
   the two read as one system: image at full opacity, no white wash (the source is
   already a pale high-key wash), contrast boosted in the JPEG itself. */
.elementor-element-f5cf5ec{
  background-image: url('../wp-content/uploads/2026/07/worldwide-section-bg.jpg?v=1') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ============ flip-card backs: a scene per service ============================
   The back face was a flat red gradient on all four. Each card now carries its own
   red-duotone photo (sliced from one generated sheet) so the reveal means something.
   A red scrim sits over the photo so the white "View Service" label and its outlined
   button keep their contrast on every card.
   ============================================================================= */
.tm-flip .md-flip-back{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.elementor-element-a7f2335 .md-flip-back{        /* Transportation Services */
  background-image:linear-gradient(140deg,rgba(150,12,34,.30) 0%,rgba(35,4,10,.58) 100%),
    url('../wp-content/uploads/2026/07/flipback-transportation.jpg') !important;
}
.elementor-element-57446e5 .md-flip-back{        /* Freight Services */
  background-image:linear-gradient(140deg,rgba(150,12,34,.30) 0%,rgba(35,4,10,.58) 100%),
    url('../wp-content/uploads/2026/07/flipback-freight.jpg') !important;
}
.elementor-element-a9dc3c8 .md-flip-back{        /* Moving & Relocation Services */
  background-image:linear-gradient(140deg,rgba(150,12,34,.30) 0%,rgba(35,4,10,.58) 100%),
    url('../wp-content/uploads/2026/07/flipback-moving.jpg') !important;
}
.elementor-element-b00d69f .md-flip-back{        /* Warehousing */
  background-image:linear-gradient(140deg,rgba(150,12,34,.30) 0%,rgba(35,4,10,.58) 100%),
    url('../wp-content/uploads/2026/07/flipback-warehousing.jpg') !important;
}

/* ============ "Our Branches" section bg (homepage) ==========================
   Dotted Malaysia map (peninsula + Sabah/Sarawak on Borneo) with pins on the three
   branch regions. Same treatment as the other section backgrounds so the page reads
   as one system. Kept pale: the heading is dark and the branch cards are white. */
.elementor-element-c5a9fde{
  /* cover, not contain: contain shrank the map, lost the pins and left visible seams
     at the section edges. cover fills edge-to-edge and keeps the pins readable. */
  background-image: url('../wp-content/uploads/2026/07/branches-section-bg.jpg?v=3') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ============ "What Our Customers Say" section bg (homepage) ================
   Soft quote-mark + star motif (trust/reviews theme, deliberately different from
   the map/globe motif used in About / Worldwide Coverage / Branches so the page
   doesn't repeat the same idea four times). Image is pre-padded vertically to the
   section's own ratio so `cover` never crops the corner quote marks. The live
   Google-reviews widget drops in white cards on top; kept very pale so any card
   height still sits cleanly. */
.elementor-element-48fbad3{
  background-image: url('../wp-content/uploads/2026/07/reviews-section-bg.jpg?v=1') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ============ "Frequently Asked Questions" section bg (homepage) ============
   Soft question-mark motif, natural cousin to the reviews section's quote marks.
   Ratio was already close to the section's, so no vertical padding was needed here
   (unlike the reviews/branches images) - cover trims only ~22px of empty margin.
   Kept pale: accordion rows expand/collapse with dark text on top. */
.elementor-element-2a26e52{
  background-image: url('../wp-content/uploads/2026/07/faq-section-bg.jpg?v=1') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ============ same-topic section backgrounds reused across pages ============
   Where a section's TOPIC repeats on another page (FAQ, Worldwide Coverage, the
   company "About" intro), it gets the same background image and treatment as the
   homepage version, so the same subject always looks the same across the site.
   Appended after the original single-page rules; same selectors here win by
   source order (equal specificity, both !important). */

/* FAQ accordion — question-mark motif */
.elementor-element-2a26e52,          /* home */
.elementor-element-8378df3,          /* freight-services */
.elementor-element-2f57c33,          /* logistics-equipment */
.elementor-element-238ccd57,         /* moving-packing */
.elementor-element-2572492,          /* service */
.elementor-element-d65226c{          /* transportation */
  background-image: url('../wp-content/uploads/2026/07/faq-section-bg.jpg?v=1') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Worldwide Coverage / Worldwide Logistics Support — globe motif.
   Globe artwork sits on the RIGHT of the source image; bias crop to the right so
   mismatched section ratios trim empty left sky instead of the globe itself. */
.elementor-element-f5cf5ec,          /* home: Worldwide Service Coverage */
.elementor-element-721c6c11,         /* about-us: Worldwide Service Coverage */
.elementor-element-bfdf697,          /* service: Worldwide Service Coverage */
.elementor-element-a86458e{          /* our-branches: Worldwide Logistics Support */
  background-image: url('../wp-content/uploads/2026/07/worldwide-section-bg.jpg?v=1') !important;
  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
}

/* Company "About / Mover Specialist" intro — world map + plane + ship motif */
.elementor-element-23142c6,          /* home */
.elementor-element-64e9078b{         /* about-us: About Tiara Mass Shipping & Logistics */
  background-image: url('../wp-content/uploads/2026/07/about-section-bg.jpg?v=2') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Bonded Lorry "3 tonne" chip: cloned as a new element id (3ee0031) to add the
   missing capacity, so it had no matching per-id style from Elementor (post-12.css
   styles each capacity pill by its own specific id, not a shared class). Mirror the
   sibling chip's exact rule here. */
.elementor-element-3ee0031{
  background-color:#FFFFFF1A; margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;
  padding:6px 15px 6px 15px; grid-column:span 1; grid-row:span 1;
  border-radius:20px 20px 20px 20px; text-align:center;
}
.elementor-element-3ee0031:hover{ background-color:transparent; background-image:linear-gradient(180deg, #CA1F26 0%, #CA1F26 100%); }
.elementor-element-3ee0031.elementor-element{ --align-self:center; }
.elementor-element-3ee0031 .elementor-heading-title{
  font-family:"DM Sans", Sans-serif; font-size:16px; font-weight:400; line-height:24px; color:#FFFFFF !important;
}