/* Responsive hardening - loaded after the main stylesheet */
html { -webkit-text-size-adjust: 100%; }
img, video, canvas, svg, iframe { max-width: 100%; }
h1, h2, h3, h4, p, li, a, span, label { overflow-wrap: break-word; }

/* Never let a flex/grid child force a row wider than its card */
.group.cursor-pointer, .group.cursor-pointer > * { min-width: 0; }
.text-2xl { overflow-wrap: anywhere; }

/* Keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #e05e0b; outline-offset: 3px;
}

/* Small phones (<=480px) */
@media (max-width: 480px) {
  .group.cursor-pointer.gap-\[20px\] { gap: 14px; }
  .group.cursor-pointer .text-2xl { font-size: 1.1rem; line-height: 1.3; }
}

/* Phones and small tablets: decorative offset frames must stay inside the viewport */
@media (max-width: 767px) {
  .left-\[-20px\] { left: 0 !important; }
  .right-\[-20px\] { right: 0 !important; }
  .top-\[-20px\] { top: 0 !important; }
  .bottom-\[-20px\] { bottom: 0 !important; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Consistency ---- */
/* Heading weights: one scale across every page */
main h2, section h2 { font-weight: 500; }
main h3, section h3 { font-weight: 500; }

/* Micro-text floor: nothing below 11px */
[class*="text-[7px]"], [class*="text-[8px]"], [class*="text-[9px]"], [class*="text-[10px]"] { font-size: 11px !important; line-height: 1.5; }

/* Low-opacity text was under accessible contrast on the dark background */
.opacity-25, .opacity-30, .opacity-35 { opacity: .5 !important; }
.opacity-40, .opacity-45 { opacity: .6 !important; }
.opacity-50, .opacity-55 { opacity: .7 !important; }

/* Floating section navigation on detail pages (left list, right indicator) overlaps the text below 1800px wide */
@media (max-width: 1799px) {
  aside[style*="position: fixed"],
  div[style*="position: fixed"][style*="left: clamp(12px, 2vw, 28px)"] { display: none !important; }
}

/* Section rhythm: one vertical spacing token for tailwind py-[80px] sections */
.py-\[80px\] { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }

/* One button system (classes are applied by ui-consistency.v5.js) */
.ui-btn {
  font-size: 12px !important; letter-spacing: .24em !important; font-weight: 700 !important;
  padding: 14px 28px !important; min-height: 46px !important; line-height: 1.2 !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
  border-width: 1px !important; border-style: solid !important; text-align: center; white-space: nowrap;
  text-decoration: none; cursor: pointer;
}
@media (max-width: 480px) { .ui-btn { font-size: 11px !important; padding: 13px 20px !important; letter-spacing: .2em !important; } }
.py-18 { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }

/* Page transition curtain */
#page-curtain {
  position: fixed; inset: 0; z-index: 99990; background: #080808;
  transform: translateY(100%); visibility: hidden; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
#page-curtain img { width: clamp(96px, 14vw, 140px); height: auto; opacity: 0; transition: opacity .3s .2s; }
#page-curtain.in { visibility: visible; transform: translateY(0); transition: transform .34s cubic-bezier(.65, 0, .35, 1); pointer-events: all; }
#page-curtain.in img { opacity: 1; }
#page-curtain.out { visibility: visible; transform: translateY(-100%); transition: transform .45s cubic-bezier(.65, 0, .35, 1); }

/* position: sticky needs the body not to be its own scroll container (html already clips the x-axis) */
body { overflow: visible !important; }
.lg\:sticky.lg\:top-\[160px\] { top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
.sticky.top-\[160px\] { top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }

/* Scroll reveal (scroll-reveal.v5.js) */
.rv-init { opacity: 0; transform: translateY(26px); }
.rv-done { transition: opacity .75s cubic-bezier(.16, 1, .3, 1) var(--rv-delay, 0ms), transform .75s cubic-bezier(.16, 1, .3, 1) var(--rv-delay, 0ms); }

/* Section rhythm: the global 150px section margin was stacking (and applying to nested sections) */
section section { padding-inline: 0 !important; margin-bottom: 0 !important; }

/* Process timeline on phones: line at the left edge (set by the site), one column, dots centred on the line */
@media (max-width: 767px) {
  #process .space-y-28 > .relative.flex > div { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; }
  #process .space-y-28 > .relative.flex > div > p { margin-left: 0 !important; max-width: none !important; font-size: 16px; }
  #process .absolute[class*="calc"] { left: -36px !important; right: auto !important; }
}

/* Smoother rendering */
html { scroll-behavior: auto; }
.rv-done { transition-duration: .55s, .55s; }

/* No empty hole while a photo downloads */
img { background-color: #161616; }
img[src$=".png"], img[alt=""], nav img, footer img { background-color: transparent; }




/* =====================================================================
   One section rhythm for the whole site.
   --sg is the ONLY vertical gap between two page blocks (and above the footer), on every page and
   every screen size. Blocks set a top margin only, so nothing stacks or collapses unpredictably.
   ===================================================================== */
:root { --sg: clamp(48px, 7vw, 104px); }

#root > section,
#root > .container,
#root > div.container,
#root > div.aos-init {
  margin-top: var(--sg) !important;
  margin-bottom: 0 !important;
}
/* the hero sits directly under the navigation */
#root > #page-hero-sentinel { margin-top: 0 !important; }
#root > footer { margin-top: var(--sg) !important; }
/* sections nested inside a block never add their own margin */
#root > * section, #root > * .container > section { margin-top: 0; }

/* =====================================================================
   Grids must be able to shrink: text columns wrap instead of pushing the page wider than the screen
   ===================================================================== */
#root { overflow-x: clip; }
#root [style*="display: grid"] > *, #root .grid > * { min-width: 0; }
#root [style*="display: grid"] :is(p, h2, h3, h4, span, a) { overflow-wrap: break-word; }

/* inline 3- and 4-column grids: one column on phones, two on tablets */
@media (max-width: 767px) {
  #root [style*="repeat(3, 1fr)"], #root [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #root [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* "Challenges" rows on service and industry pages: five cards side by side only fit on wide screens.
   Below 1024px they stack (and the thin divider lines between them are dropped). */
@media (max-width: 1023px) {
  #challenges > * > div[style*="display: flex"][style*="align-items: flex-start"] { flex-direction: column; align-items: stretch !important; }
  #challenges > * > div[style*="display: flex"][style*="align-items: flex-start"] > div:not([data-aos]):not([class*="aos"]) { display: none; }
  #challenges > * > div[style*="display: flex"][style*="align-items: flex-start"] > div { flex: 0 0 auto !important; width: 100%; }
}

/* The animated hero title on service / industry / article pages is a decorative element (the real <h1> is a screen-reader
   heading that stays on the page), so it gets the same responsive sizes the global h1 rules give a heading. */
@media (max-width: 1023px) { .h1-visual { font-size: clamp(28px, 5.5vw, 52px) !important; } }
@media (max-width: 767px)  { .h1-visual { font-size: clamp(26px, 7.5vw, 40px) !important; } }
@media (max-width: 360px)  { .h1-visual { font-size: clamp(22px, 8vw, 32px) !important; } }