/* ============================================================
   Naftoon — Responsive overrides
   Below 1280px the 1440px scaled-page approach is disabled and
   pages render with a real responsive layout. Desktop (1280+)
   is untouched — visual identity is preserved.
   Breakpoint must match MOBILE_BREAKPOINT (1280) in chrome.js.
   ============================================================ */

/* ----- Mobile drawer: hidden by default at every viewport.
   The drawer markup is always emitted by chrome.js so that resizing
   from desktop -> mobile keeps the menu available, but it must never
   render on desktop. The media query below opens it (with .is-open). */
.mobile-nav,
.nav-toggle,
.mobile-menu-fab {
  display: none !important;
}

@media (max-width: 1279.98px) {
  /* Prevent any horizontal scroll — every element capped to its parent's width. */
  html, body { overflow-x: hidden; }
  body, .stage, .stage .page, .stage .inner-page, section, header, footer, main, .content {
    max-width: 100vw;
  }

  /* Stop the page from being scaled — let real CSS layout drive it. */
  .stage {
    height: auto !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  .stage .page,
  .stage .inner-page {
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  /* Force ALL sections inside the page to be width-constrained */
  .page > *,
  .inner-page > * {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  /* Content wrappers */
  .content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Defensive: break long words to prevent overflow */
  h1, h2, h3, h4, p { word-wrap: break-word; overflow-wrap: break-word; }

  /* ---- Site header (absolute -> sticky flex flow) ----
     On mobile the header is sticky to the top of the viewport so users always
     have nav access, even though in the DOM it lives inside <section.hero>. */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    inset: auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    z-index: 60;
    /* Pull header to top of its parent section visually */
    margin: 0 0 -1px 0;
  }
  .site-header.on-dark {
    background: var(--dark);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  /* Hero sections house the header in DOM — give them flex column so header stays at top */
  .hero,
  .inner-hero {
    display: flex !important;
    flex-direction: column;
  }
  .hero .site-header,
  .inner-hero .site-header {
    order: -1;
  }
  /* Inner hero content sits below the sticky header */
  .inner-hero .content {
    flex: 1;
    padding-top: 24px !important;
  }
  .site-header .logo-badge {
    position: static !important;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .site-header .logo-badge .shield { display: none; }
  .site-header .logo-badge img {
    position: static !important;
    width: 36px;
    height: 36px;
  }
  .site-header .logo-badge .name {
    position: static !important;
    width: auto;
    color: var(--ink);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-align: left;
  }
  .site-header.on-dark .logo-badge .name { color: #fff; }

  /* Desktop nav hidden; hamburger takes over */
  .site-nav { display: none !important; }
  .header-pill { display: none !important; }
  .header-search { display: none !important; }

  /* Hamburger button (created by chrome.js) — re-enable on mobile */
  .nav-toggle {
    display: none !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    padding: 0 !important;
  }
  .site-header.on-dark .nav-toggle {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff;
  }
  .nav-toggle svg { width: 22px; height: 22px; }

  /* Mobile nav drawer — only relevant inside this media query */
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    color: var(--ink);
    /* Keep hidden until opened — overrides the global !important via same selector specificity in cascade order */
    display: none !important;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px 20px 32px;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav.is-open { display: flex !important; }
  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
  .mobile-nav-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .mobile-nav-header .brand img { width: 30px; height: 30px; }
  .mobile-nav .close-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .mobile-nav li > a,
  .mobile-nav li > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 4px;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-align: left;
    border: 0;
    background: transparent;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav li > a.is-active { color: var(--red); font-weight: 600; }
  .mobile-nav li > a.is-active::after,
  .mobile-nav li > button.is-active::after { content: none; }
  .mobile-nav .sub {
    display: none;
    padding-left: 12px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav .sub.is-open { display: block; }
  .mobile-nav .sub-group { padding: 10px 0; }
  .mobile-nav .sub-group .sub-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--red);
    text-transform: uppercase;
    margin: 4px 0 6px;
  }
  .mobile-nav .sub-group a {
    display: block;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-2);
  }
  .mobile-nav .nav-extras {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mobile-nav .nav-extras a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 13px;
    color: var(--text-2);
  }
  .mobile-nav .nav-extras a svg { width: 16px; height: 16px; }
  body.no-scroll { overflow: hidden; }

  /* ---- HOME hero — drop most decorative absolute pieces ---- */
  .hero {
    width: 100% !important;
    height: auto !important;
    padding: 32px 20px 56px !important;
    overflow: hidden;
  }
  .hero .stage-bg,
  .hero .pattern,
  .hero .red-pill,
  .hero .ambient,
  .hero .ellipse,
  .hero .red-tri,
  .hero .video-circle,
  .hero .circle-glass,
  .hero .arc,
  .hero .red-flag {
    display: none !important;
  }
  .hero .workers {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 280px !important;
    background-size: contain !important;
    background-position: center bottom !important;
    margin-top: 20px;
  }
  .hero .copy {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 600px;
  }
  .hero .copy h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  .hero .pager,
  .hero .indicators {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-top: 16px;
  }
  .hero .pager { gap: 10px; }
  .hero .indicators { display: none !important; }

  /* ---- HOME — Discover & subsequent sections ---- */
  .discover,
  .vision,
  .partners,
  .news-strip,
  .map-cta,
  .contact-block {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 56px 20px !important;
    overflow: visible !important;
  }
  .discover .rings,
  .discover .title-motif {
    display: none !important;
  }
  .discover-grid,
  .discover .grid,
  .grid-3,
  .grid-2,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  @media (min-width: 640px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* ---- INNER hero — shorter, simpler ---- */
  .inner-hero {
    height: auto !important;
    min-height: 360px;
    padding: 0 0 48px;
  }
  .inner-hero .content {
    padding-top: 32px !important;
  }
  .inner-hero h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
  .inner-hero p { font-size: 13px !important; }
  .inner-hero .red-stripe {
    width: 18px !important;
    height: 120px !important;
    top: 80px !important;
  }

  /* ---- Sections ---- */
  section.section,
  section.block {
    /* Use longhand so we don't clobber any horizontal padding from .content */
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .section h2 { font-size: 22px !important; }
  .section .lead { font-size: 13px; max-width: 100%; }
  .split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .split .img { height: 240px !important; }
  .kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    padding: 36px 0 !important;
  }
  .kpi .v { font-size: 32px !important; }

  /* ---- Cards ---- */
  .card { height: auto !important; min-height: 220px; padding: 18px !important; }
  .card.media { height: 240px !important; }

  /* ---- Timeline (centered line -> single column) ---- */
  .timeline::before { left: 18px !important; }
  .timeline .item {
    grid-template-columns: 36px 1fr !important;
    gap: 14px !important;
  }
  .timeline .item .l,
  .timeline .item .r { order: unset !important; text-align: left !important; }
  .timeline .item.left .l { display: none; }
  .timeline .item.right .r { display: none; }
  .timeline .item .dot { margin: 8px 0 0 !important; }
  .timeline .item .y { font-size: 24px !important; }

  /* ---- Feature strip ---- */
  .feature-strip {
    height: auto !important;
    flex-direction: column;
    align-items: flex-start !important;
    padding: 32px 24px !important;
    gap: 18px;
  }
  .feature-strip h3 { font-size: 20px !important; }

  /* ---- Pagination & filters ---- */
  .filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    margin-bottom: 24px !important;
    padding-bottom: 4px;
  }
  .filter-bar a {
    flex: none;
    white-space: nowrap;
    padding: 8px 16px !important;
    font-size: 11px !important;
  }
  .pagination { flex-wrap: wrap; }

  /* ---- Form ---- */
  .form { grid-template-columns: 1fr !important; }
  .form .full { grid-column: auto !important; }

  /* ---- Price widget (auto-injected above footer) ---- */
  .price-widget {
    width: 100% !important;
    padding: 48px 20px !important;
  }
  .price-widget .pw-inner {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 32px 24px !important;
    gap: 28px !important;
  }
  .price-widget .pw-head h2 { font-size: 22px !important; }
  .price-widget .pw-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .price-widget .pw-canvas { height: 200px !important; }
  .price-widget .pw-ranges { justify-content: flex-start !important; }
  .price-widget .pw-tab { padding: 6px 11px !important; font-size: 10px !important; }

  /* ---- Footer ---- */
  .site-footer {
    width: 100% !important;
    padding: 48px 20px 16px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 0 !important;
    text-align: center;
  }
  .footer-desc { max-width: 100%; text-align: center; }
  .footer-logo {
    width: 140px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .footer-logo .pad {
    position: static !important;
    width: 100% !important;
    height: 100px !important;
    border-radius: 0 0 0 20px;
  }
  .footer-logo img {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%);
    width: 140px !important;
    height: 140px !important;
  }
  .footer-logo span {
    position: relative !important;
    top: auto !important;
    margin-top: 8px;
    letter-spacing: 0.15em;
    font-size: 13px;
  }
  .social {
    width: auto !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .footer-companies {
    gap: 24px !important;
    flex-wrap: wrap;
  }
  .footer-company {
    font-size: 14px !important;
    gap: 12px;
  }
  .footer-company img { width: 56px !important; }
  .footer-copyright {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    height: auto !important;
    padding: 18px 12px !important;
    line-height: 1.5;
  }
  .footer-copyright::after { display: none; }

  /* ---- Misc decorative elements that don't translate ---- */
  .hero-arc,
  .red-block,
  .title-motif .vline,
  .title-motif .ring,
  .title-motif .arrow-down { display: none !important; }
}

/* ============================================================
   Small phones (≤480) — fine-tuning above the tiny breakpoint
   ============================================================ */
@media (max-width: 480px) {
  .hero .copy h1,
  .inner-hero h1 {
    font-size: 26px !important;
    letter-spacing: 0.02em !important;
  }
  .section h2 { font-size: 20px !important; }
  .price-widget .pw-head h2 { font-size: 20px !important; }
  .price-widget .pw-inner { padding: 24px 18px !important; }
  .price-widget .pw-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi .v { font-size: 26px !important; }
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .filter-bar a { padding: 7px 14px !important; }
  .crumbs { font-size: 11px !important; margin-bottom: 16px !important; }
  .inner-hero .red-stripe {
    width: 12px !important;
    height: 80px !important;
    top: 60px !important;
  }
  .footer-companies { gap: 16px !important; }
  .footer-company { font-size: 12px !important; gap: 8px; }
  .footer-company img { width: 44px !important; }
}

/* ============================================================
   Tablet refinements (640–1100)
   ============================================================ */
@media (min-width: 640px) and (max-width: 1279.98px) {
  .price-widget .pw-kpis {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr !important;
    text-align: left;
  }
  .footer-desc { text-align: left; }
  .social { justify-content: flex-end !important; }
}

/* ============================================================
   Universal polish — applies at all sizes
   ============================================================ */

/* Skip to content (a11y) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--red);
  color: #fff;
  padding: 10px 16px;
  z-index: 9999;
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* Visible focus indicator everywhere */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.site-header.on-dark :focus-visible {
  outline-color: #fff;
}

/* Smoother default transitions */
.card,
.page-tile,
.filter-bar a,
.pagination a,
.social a,
.btn-more,
.mm-col a {
  transition:
    transform 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Better link hover for footer pieces */
.site-footer a:hover { color: var(--red); }

/* Buttons that are visually buttons but semantically links */
button.link-as-button { all: unset; cursor: pointer; }

/* Mega menu — slight spacing fix */
.mega-menu .mm-col ul a { padding: 4px 0; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mobile-nav { transition: none !important; }
}

/* ============================================================
   Touch-target minimums (≤1100px) — ui-ux-pro-max guideline:
   "Touch Target Size" HIGH severity, min 44×44px on mobile.
   Expands the *hit area* via padding without changing visual
   typography or layout. Pure-additive: no existing rule overridden.
   ============================================================ */
@media (max-width: 1279.98px) {
  /* Inline "read more" CTAs across the home page sections.
     Visual stays the same; clickable area grows vertically. */
  .magazine .head .more,
  .row-block .more,
  .reports .titles .more,
  a.more,
  a.btn-more,
  .btn-more {
    min-height: 44px;
    padding: 12px 0 !important;
    box-sizing: content-box;
  }
  /* "Read More" buttons inside article cards. */
  .row-block .ncard .info button,
  .row-block .ncard button {
    min-height: 44px;
    padding: 14px 22px !important;
  }
  /* Hamburger button — bump 40→44. */
  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
  }
  /* Footer social icons — bump 40→44. */
  .site-footer .social a {
    width: 44px !important;
    height: 44px !important;
  }
  /* Price-widget time-range pills (24h/7d/30d/90d/1y). */
  .price-widget .pw-range {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px !important;
  }
  /* Hero ring buttons on the home slider (43→44). */
  .hero .pager .ring,
  .hero .video-circle,
  .hero .circle-glass {
    min-width: 44px;
    min-height: 44px;
  }
  /* Same-side touch targets need ≥8px spacing — already guaranteed by gap
     utilities everywhere we use them; nothing to override. */
}

/* ============================================================
   HOME — absolute Figma-canvas sections reflowed to vertical flow.
   The home page is a 1440px artboard with section content placed via
   position:absolute at fixed pixel coordinates. Below the breakpoint the
   transform-scale is off, so without these rules the content keeps its
   desktop coordinates and is clipped by the section's overflow:hidden.
   Strategy: neutralise the SECTION-LEVEL absolute positioning so content
   flows in source order; hide purely-decorative absolute pieces; keep the
   card-internal overlays (.bg/.info/.desc/.tag) untouched. No content,
   colours or copy are changed — only layout adapts to width.
   ============================================================ */
@media (max-width: 1279.98px) {

  /* ---- 02 Discover: title column + 5 service cards ---- */
  .discover { padding: 48px 20px !important; }
  .discover .title-col {
    position: static !important;
    width: 100% !important;
    max-width: 640px;
    margin: 0 auto 26px;
  }
  .discover .title-col .ring,
  .discover .title-col .arrow,
  .discover .title-col .vl,
  .discover .title-col .dotpat { display: none !important; }
  .discover .title-col h2 {
    position: static !important;
    width: auto !important;
    font-size: 26px !important;
    line-height: 1.18 !important;
    margin: 0 0 12px !important;
  }
  .discover .title-col p {
    position: static !important;
    width: auto !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--text-2) !important;
    margin: 0 !important;
  }
  .discover .grid {
    position: static !important;
    left: auto !important; top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .discover .grid .svc {
    position: relative !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 300px;
  }

  /* ---- 03 Counter: stat pill + paragraph + video thumb (dark) ---- */
  .counter {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 56px 20px !important;
    background: var(--dark) !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    overflow: visible !important;
  }
  .counter::after { display: none !important; }
  .counter .bg-text,
  .counter .map,
  .counter .angled,
  .counter .ring-deco,
  .counter .ring-deco-2,
  .counter .tri,
  .counter .eyebrow-w { display: none !important; }
  .counter > * {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
  }
  .counter .badge-naftoon { order: 1; font-size: 13px; letter-spacing: .05em; }
  .counter .pill { order: 2; width: 100% !important; }
  .counter .pill .label {
    position: static !important;
    width: max-content !important; height: auto !important;
    padding: 7px 15px; margin-bottom: 10px;
  }
  .counter .pill .num-bg { display: none !important; }
  .counter .pill .num {
    position: static !important;
    width: auto !important; height: auto !important;
    font-size: 42px !important;
  }
  .counter .desc {
    order: 3;
    width: auto !important; max-width: 560px;
    font-size: 14px !important; line-height: 1.8 !important;
  }
  .counter .video {
    order: 4;
    position: relative !important;
    width: 100% !important; max-width: 420px; height: 200px !important;
  }
  .counter .video .play-circ {
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%);
  }

  /* ---- 04 Believe: intro + two card rows ---- */
  .believe {
    position: relative !important;
    height: auto !important;
    padding: 56px 20px !important;
    display: flex !important;
    flex-direction: column;
    gap: 22px;
    overflow: visible !important;
  }
  .believe .title {
    position: static !important;
    width: 100% !important; max-width: 600px;
  }
  .believe .title .vl,
  .believe .title .ring { display: none !important; }
  .believe .title h2 {
    position: static !important;
    left: auto !important; top: auto !important;
    font-size: 24px !important; margin: 0 0 12px !important;
  }
  .believe .title p {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important;
    font-size: 14px !important; line-height: 1.7 !important;
    color: var(--muted-2) !important;
  }
  .believe .row1,
  .believe .row2 {
    position: static !important;
    left: auto !important; top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .believe .row1 .card,
  .believe .row2 .card,
  .believe .row2 .card.first {
    width: 100% !important; height: 240px !important;
  }
  .believe .arc { display: none !important; }

  /* ---- 05 Magazine: header + 5-card grid ---- */
  .magazine {
    position: relative !important;
    height: auto !important;
    padding: 56px 20px !important;
    overflow: visible !important;
  }
  .magazine .bg-word { display: none !important; }
  .magazine .head {
    position: static !important;
    width: 100% !important; margin-bottom: 26px;
  }
  .magazine .head .vl,
  .magazine .head .ring { display: none !important; }
  .magazine .head .eyebrow {
    position: static !important;
    left: auto !important; top: auto !important;
    display: block; margin-bottom: 8px;
  }
  .magazine .head h2 {
    position: static !important;
    left: auto !important; top: auto !important;
    font-size: 22px !important; margin: 0 0 14px !important;
  }
  .magazine .head .more {
    position: static !important;
    left: auto !important; top: auto !important;
  }
  .magazine .grid {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
  }
  .magazine .grid .lg {
    grid-column: auto !important; grid-row: auto !important;
    height: 280px !important;
  }
  .magazine .grid .card { height: 240px !important; }

  /* ---- 06/07 Row blocks (Sustainability + News) ---- */
  .row-block { padding: 48px 20px !important; }
  .row-block .inner { width: 100% !important; }
  .row-block .head-row {
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }
  .row-block .titles { width: 100% !important; }
  .row-block .desc {
    max-width: 100% !important;
    margin-top: 0 !important;
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  .row-block .cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ---- 08 Reports + Stats ---- */
  .info-row { padding: 48px 20px !important; }
  .info-row .inner {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .reports .titles {
    flex-direction: column !important;
    gap: 12px;
  }
  .reports .titles .more { margin-top: 8px !important; }
  .reports .row { height: auto !important; padding: 18px !important; }
  .stats .row3 { grid-template-columns: 1fr !important; gap: 18px !important; }
  .stats h3 { font-size: 38px !important; }
  .stats .photo {
    width: 100% !important; max-width: 280px;
    margin: 24px auto 0 !important;
  }

  /* ---- Data tables (Products / Supply / Sales): contained horizontal
     scroll instead of bleeding past the viewport. Keeps table layout and
     column alignment via the anonymous table box. ---- */
  .content > .table,
  .section .table,
  table.table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   TABLET TIER (768–1279.98) — make tablets feel designed for tablet:
   two-column grids, roomier gutters and larger headings, rather than a
   single stacked phone column. Phones (<768) keep the single-column rules.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .content {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  /* Home grids → 2-up */
  .discover .grid,
  .believe .row1,
  .believe .row2,
  .magazine .grid,
  .cats .grid { grid-template-columns: repeat(2, 1fr) !important; }
  .magazine .grid .lg { grid-column: 1 / -1 !important; height: 320px !important; }
  .row-block .cards { grid-template-columns: repeat(2, 1fr) !important; }
  /* Reports + stats can sit side by side again on wider tablets */
  .info-row .inner { grid-template-columns: 1.4fr 1fr !important; }
  .stats .row3 { grid-template-columns: repeat(3, 1fr) !important; }
  /* Inner-page grids → 2-up (overrides the phone single-column default) */
  .section .grid-3,
  .section .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  /* Slightly larger display type on tablets */
  .hero .copy h1,
  .inner-hero h1 { font-size: 40px !important; }
  .section h2 { font-size: 26px !important; }
}

/* ============================================================
   MOBILE PATCH — targeted repairs after live QA.
   Keep desktop (1280+) unchanged. These rules intentionally sit at the
   end so they override earlier broad responsive fallbacks and inline page
   styles that were causing phone overflow.
   ============================================================ */
@media (max-width: 1279.98px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .stage,
  .page,
  .inner-page {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Shared mobile header: full-bleed inside padded hero artboards. */
  .site-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .hero .site-header {
    width: calc(100% + 40px) !important;
    max-width: calc(100% + 40px) !important;
    margin: -32px -20px 24px !important;
  }

  .site-header .logo-badge {
    min-width: 0 !important;
    max-width: calc(100% - 60px) !important;
    overflow: hidden !important;
  }

  .site-header .logo-badge .name {
    min-width: 0 !important;
    max-width: 180px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nav-toggle {
    display: inline-flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-left: auto !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    z-index: 70 !important;
  }

  .mobile-menu-fab {
    position: fixed !important;
    right: 16px !important;
    top: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-left: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    padding: 0 !important;
    z-index: 10000 !important;
  }

  .mobile-menu-fab svg {
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-nav {
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Home hero headline: keep the same hierarchy without clipped words. */
  .hero {
    box-sizing: border-box !important;
  }

  .hero .copy {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .hero .copy h1 {
    max-width: 100% !important;
    width: min(100%, calc(100vw - 40px)) !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    letter-spacing: 0 !important;
  }

  /* About history: readable stacked items instead of crushed timeline text. */
  .timeline {
    padding: 18px 0 0 !important;
  }

  .timeline::before {
    left: 10px !important;
    top: 18px !important;
    bottom: 18px !important;
  }

  .timeline .item {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 22px 0 !important;
    align-items: flex-start !important;
  }

  .timeline .item .dot {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 14px !important;
    height: 14px !important;
    margin: 6px auto 0 !important;
    top: auto !important;
  }

  .timeline .item.right .l,
  .timeline .item.left .r {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 2 !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  .timeline .item.right .r,
  .timeline .item.left .l {
    display: none !important;
  }

  .timeline .item .y {
    font-size: 30px !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
  }

  .timeline .item h4,
  .timeline .item p {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .timeline .item h4 {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .timeline .item p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--text-2) !important;
  }

  /* Services: neutralize desktop spans and inline two-column lists on phones. */
  .cats,
  .cats .inner,
  .cats .grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .cats .inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  .cats .grid {
    grid-template-columns: 1fr !important;
  }

  .cat-card {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .cat-card ul[style*="grid-template-columns"] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  .cat-card h3,
  .cat-card li,
  .cat-card a {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .section.content > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .section .grid-2,
  .section .grid-3,
  .section .grid-4 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
  }

  /* Supply/Sales/Product tables: contained horizontal scroll, no page bleed. */
  table.table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    border: 1px solid var(--line) !important;
    background:
      linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat,
      linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat;
    -webkit-overflow-scrolling: touch;
  }

  table.table thead,
  table.table tbody {
    display: table !important;
    min-width: 640px !important;
    width: max-content !important;
  }

  table.table tr {
    display: table-row !important;
  }

  table.table th,
  table.table td {
    display: table-cell !important;
    white-space: nowrap !important;
  }

  /* Contact and shared forms: stack fields cleanly on phones. */
  .form,
  .contact-form-wrap .form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
  }

  .form > *,
  .form .full,
  .form-result {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  .form input,
  .form select,
  .form textarea {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .contact-form-wrap .actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .contact-form-wrap button[type=submit],
  .form button[type=submit] {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Footer logo: keep branding, remove the awkward pale block. */
  .footer-logo {
    width: 118px !important;
    min-height: 150px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .footer-logo .pad {
    display: none !important;
  }

  .footer-logo img {
    position: static !important;
    transform: none !important;
    width: 86px !important;
    height: 86px !important;
    object-fit: contain !important;
    padding: 8px !important;
    border: 1px solid var(--line) !important;
    background: #fff !important;
  }

  .footer-logo span {
    position: static !important;
    margin: 0 !important;
    width: auto !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 480px) {
  .hero .copy h1 {
    font-size: 22px !important;
    line-height: 1.22 !important;
  }

  .hero .pager .lbl {
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
  }

  .hero .pager .bar {
    width: 90px !important;
    max-width: 35vw !important;
  }

  .inner-hero h1 {
    font-size: 25px !important;
    line-height: 1.18 !important;
  }

  .section.content,
  .content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ============================================================
   VISUAL QA REPAIR PASS — late overrides for readability, tables,
   footer wrapping and intentional mobile/tablet affordances.
   ============================================================ */

.section .lead,
.section .card p,
.cats .top p,
.cat-card ul li a,
.contact-card p,
.loc-card .addr,
.loc-card .meta a,
.contact-form-wrap .form .hint {
  color: #5f6975 !important;
}

.card .num,
.kpi small,
.form label,
.contact-card .num,
.loc-card .city {
  color: #7a8290 !important;
}

.card.media p {
  color: rgba(255, 255, 255, 0.88) !important;
}

.inner-hero::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35)) !important;
}

.inner-hero p {
  color: #e1e6eb !important;
}

.footer-company,
.footer-copyright {
  opacity: 1 !important;
}

.footer-company {
  color: #8a929d !important;
}

.footer-copyright {
  color: #8a929d !important;
}

.footer-copy-year {
  white-space: nowrap;
}

.footer-copy-text {
  white-space: normal;
}

.table-scroll {
  position: relative;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1279.98px) {
  .hero::before {
    opacity: 0.72 !important;
  }

  .hero .copy p,
  .hero .pager .lbl,
  .inner-hero p {
    color: #e0e6ec !important;
  }

  .table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 34px;
    margin-top: 24px;
    border: 1px solid var(--line);
    background: #fff;
  }

  .table-scroll > .table {
    margin-top: 0 !important;
  }

  .table-scroll::before {
    content: attr(data-scroll-label);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    color: #6c7480;
    background: #f6f7f9;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .table-scroll::after {
    content: "";
    position: absolute;
    top: 34px;
    right: 0;
    bottom: 0;
    width: 42px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  }

  .table-scroll > table.table {
    display: table !important;
    width: max-content !important;
    min-width: 680px !important;
    max-width: none !important;
    overflow: visible !important;
    border: 0 !important;
    white-space: nowrap !important;
    background: #fff !important;
  }

  .table-scroll > .table:not(table) {
    min-width: 760px !important;
    max-width: none !important;
  }

  .table-scroll table.table thead,
  .table-scroll table.table tbody {
    display: table-header-group !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .table-scroll table.table tbody {
    display: table-row-group !important;
  }

  .table-scroll table.table th,
  .table-scroll table.table td {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .site-footer {
    padding-top: 38px !important;
    padding-bottom: 18px !important;
  }

  .footer-grid {
    gap: 22px !important;
  }

  .footer-desc {
    color: #3f4853 !important;
    line-height: 1.7 !important;
  }

  .footer-companies {
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
  }

  .footer-company {
    color: #8a929d !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
  }

  .footer-copyright {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px 10px !important;
    padding: 16px 12px 8px !important;
    line-height: 1.45 !important;
    color: #8a929d !important;
    letter-spacing: 0.08em !important;
  }
}

@media (min-width: 640px) and (max-width: 1279.98px) {
  .footer-grid {
    align-items: center !important;
  }

  .footer-logo {
    margin: 0 auto !important;
  }

  .social {
    justify-content: center !important;
  }

  .footer-companies {
    gap: 34px !important;
  }

  .footer-copyright {
    max-width: 100% !important;
  }
}

@media (min-width: 1280px) {
  .table-scroll {
    overflow: visible;
  }

  .table-scroll::before,
  .table-scroll::after {
    display: none;
  }
}