/* ==========================================================================
   Arahan Enterprises — responsive layer
   Desktop-first. Breakpoints: 1280 · 1180 · 1024 · 860 · 700 · 480 · 380
   ========================================================================== */

/* ---------- ≤ 1280px ---------- */
@media (max-width: 1280px) {
  .nav__link { padding-inline: 8px; letter-spacing: 0.08em; }
  .nav__link::after { left: 8px; right: 8px; }
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comp-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- ≤ 1180px: switch to overlay menu ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .header__inner { gap: 14px; }
  .icard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx { grid-template-columns: 1fr; }
  .cx__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cx__tab { grid-template-columns: 1fr; }
  .cx__tab-no { grid-row: auto; }
}

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head .eyebrow { padding-top: 0; }

  /* The scrim has to match the sand the hero sits on: a brown wash here
     greys out the green heading once the building fills the frame. */
  .hero__veil {
    background:
      linear-gradient(90deg, rgba(216, 203, 184, 0.98) 0%, rgba(216, 203, 184, 0.93) 46%, rgba(216, 203, 184, 0.55) 72%, rgba(216, 203, 184, 0.3) 100%),
      linear-gradient(0deg, rgba(216, 203, 184, 0.96) 0%, transparent 34%);
  }

  .page-hero { min-height: auto; padding-bottom: clamp(56px, 9vw, 84px); }
  .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__visual { max-width: 560px; width: 100%; margin-inline: auto; padding: 30px 30px 0; }
  .frame3d { margin-inline: auto; }
  .card-id { margin-inline: auto; }

  .who, .split, .stack, .workforce, .contact, .map-band__inner, .cta-band__inner, .eco-wrap { grid-template-columns: 1fr; }
  .who__visual { position: relative; top: 0; max-width: 620px; }
  .stack__stage { order: -1; }
  .vgrid, .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .mini-steps::before, .mini-steps::after { display: none; }
  .mini-step { padding-top: 20px; border-top: 1px solid var(--line-dark-2); }
  .mini-step__dot { top: -6px; }
  .mini-steps { padding-top: 0; }
  .cx__panel { grid-template-columns: 1fr; }
  .cx__drawing { border-right: 0; border-bottom: 1px solid var(--line); }
  .sector, .sector:nth-child(even) { grid-template-columns: 1fr; }
  .sector:nth-child(even) .sector__media { order: 0; }
  .sector__media { max-width: 720px; }
  .regions { grid-template-columns: 1fr 1fr; }
  .region--list { grid-column: 1 / -1; }
  .nexts { grid-template-columns: 1fr; }
  .orgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org, .org:nth-child(n + 4) { grid-column: auto; }
  .org:last-child { grid-column: 1 / -1; }
  .eco-wrap .eco__detail { min-height: 0; }
  .pillars { grid-template-columns: 1fr; }
}

/* ---------- ≤ 860px ---------- */
@media (max-width: 860px) {
  :root { --header-h: 68px; }
  .site-header.is-scrolled { --header-h: 62px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 1px solid var(--line); }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cap-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv { grid-template-columns: 1fr; }
  .cx__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__hud .hud__item:nth-child(n + 2) { display: none; }
  .hud-label { font-size: 0.56rem; }
  .comp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-pair .figure--offset { margin-bottom: 0; }
}

/* ---------- ≤ 700px ---------- */
@media (max-width: 700px) {
  .header__cta { display: none; }
  .brand__text strong { font-size: 1.22rem; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__mark img { width: 32px; height: 32px; }

  /* The 34vh top inset here dated from the hero having the building
     rendered BEHIND the copy: the text was pushed down so it sat over the
     lower half of the scene. The building is now its own block below the
     copy (.aarahan-building-showcase, order: 2), so that inset had become
     355px of dead space at the top of every phone screen. */
  .hero { justify-content: center; }
  .hero__inner {
    padding-top: calc(var(--header-h) + clamp(18px, 4vw, 34px));
    padding-bottom: clamp(24px, 4.5vw, 40px);
  }
  .hero--page .hero__inner { padding-top: calc(var(--header-h) + clamp(20px, 5vw, 44px)); }
  /* Phones stack the copy over the building, so the scrim carries most of
     the legibility: sand, and opaque where the text actually sits. */
  .hero__veil {
    background:
      linear-gradient(0deg, rgba(216, 203, 184, 0.99) 0%, rgba(216, 203, 184, 0.96) 52%, rgba(216, 203, 184, 0.6) 76%, rgba(216, 203, 184, 0.35) 100%);
  }
  .hero__labels { display: none; }
  .hero__fallback { top: 16%; right: 50%; transform: translateX(50%); width: 86vw; }
  .hero__actions .btn, .page-hero .btn-row .btn { flex: 1 1 auto; justify-content: space-between; }

  .vgrid, .cgrid, .svc-grid, .regions, .orgs, .icard-grid { grid-template-columns: 1fr; }
  .org:last-child { grid-column: auto; }
  .mini-steps { grid-template-columns: 1fr; row-gap: 26px; }
  .sector-grid { grid-template-columns: 1fr; }
  .cap-card__list { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__domain { margin-right: 0; }
  .spec-sheet > div:not(.spec-sheet__head) { grid-template-columns: 1fr; gap: 2px; }
  .page-hero__block span:nth-child(n + 3) { display: none; }
  .frame3d__dim--y { right: -26px; }
  .media-pair { grid-template-columns: 1fr; }
  .media-pair .figure--offset { display: none; }
  .tl-count { margin-left: 0; }
  .comp-strip { grid-template-columns: 1fr; }

  /* Ecosystem becomes a compact orbit */
  .eco { --r: 34vw; --node: 20vw; }
  .eco__hub { width: 36vw; padding: 8px; }
  .eco__hub-s { display: none; }
  .eco__ring span:nth-child(3) { display: none; }
  .eco__t { font-size: 0.72rem; }
  .eco__btn { padding: 4px; }

  .cx__tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 6px; scrollbar-width: thin; }
  .cx__tab { flex: 0 0 72%; scroll-snap-align: start; }

  .colonnade__row { gap: 6px; padding-inline: 4px; }
  .colonnade__lintel { font-size: 0.56rem; letter-spacing: 0.18em; height: 44px; }
  .col3d__side { width: 10px; }
  .col3d__label { bottom: 18px; font-size: 0.86rem; gap: 8px; }

  .quote__text { font-size: 1.45rem; }
  .card-id { aspect-ratio: auto; min-height: 250px; }
  .workforce__num { font-size: 7.4rem; }
}

/* ---------- ≤ 480px ---------- */
@media (max-width: 480px) {
  .btn { padding-left: 18px; min-height: 50px; font-size: 0.74rem; letter-spacing: 0.1em; }
  .hero__name { font-size: clamp(3rem, 15.5vw, 4.4rem); }
  .hero__role { letter-spacing: 0.14em; font-size: 0.72rem; }
  .hero__role::before { width: 24px; }
  .page-hero__title { font-size: clamp(2.6rem, 12.5vw, 3.4rem); }
  .h2 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .stat { padding: 30px 16px; }
  .stat__num { font-size: 3rem; }
  .stat__note { font-size: 0.78rem; }
  .eyebrow { font-size: 0.66rem; gap: 10px; letter-spacing: 0.12em; }
  .eyebrow::after { width: 24px; }
  .strength { grid-template-columns: 44px minmax(0, 1fr); }
  .cx__tab { flex-basis: 84%; }
  .marquee__track span { font-size: 2rem; }
  .hero__hud { gap: 16px; }
  .notice { align-items: flex-start; font-size: 0.74rem; }
  .page-hero__visual { padding: 34px 26px 0 8px; }
  .quote { padding: 32px 22px; }
  .quote__text { font-size: 1.25rem; }
  .citem { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .citem__icon { width: 44px; height: 44px; }
  .tl--v .tl-viewport { padding-left: 34px; }
  .tl--v .tl__node { left: -34px; }
  .tl--v .tl-progress { left: 10px; }
}

/* ---------- ≤ 380px ---------- */
@media (max-width: 380px) {
  .brand__text small { letter-spacing: 0.3em; }
  .col3d__label { font-size: 0.74rem; }
  .colonnade__lintel span { letter-spacing: 0.1em; }
  .eco__t { font-size: 0.64rem; }
}

/* ---------- Short viewports (landscape phones, small laptops) ----------
   A 1366x768 laptop gives roughly 600-630px of real viewport once the tab
   bar, address bar and bookmarks are taken out, which is where the hero was
   being cut off mid-CTA. Type and rhythm already scale with vh (see
   .hero__name in style.css); these rules handle the index strip, which is
   absolutely positioned on the hero's bottom edge and so has to be paid for
   out of .hero__inner's padding-bottom via --hud-h. */

/* Shrink the strip rather than lose it, and tell .hero__inner its new
   height so the reserved space shrinks with it. */
@media (min-width: 861px) and (max-height: 780px) {
  /* Measured: the strip's own content is 34px, so 6+8 padding makes it 48.
     --hud-h carries that number to .hero__inner's padding-bottom, which is
     what keeps the CTA buttons clear of it. */
  .hero { --hud-h: 50px; }
  .hero__hud { padding-top: 6px; padding-bottom: 8px; }
}

@media (max-height: 620px) {
  .hero { --hud-h: 0px; }
  .hero__hud { display: none; }
  .hero__inner {
    padding-top: calc(var(--header-h) + 10px);
    padding-bottom: 20px;
  }
}

/* ---------- Large screens ---------- */
@media (min-width: 1680px) {
  :root { --container: 1440px; }
}

/* ---------- Touch devices: no hover lifts that stick ---------- */
@media (hover: none) {
  .vcard:hover { translate: none; }
  .col3d:hover { translate: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .mnav, .progress, .loader, .hero__canvas, .hero__labels, .cta-band, .marquee, .motion-toggle { display: none !important; }
  body, .section--dark, .section--ink, .page-hero, .hero, .site-footer { background: #fff !important; color: #000 !important; }
  [data-reveal], [data-split] { opacity: 1 !important; transform: none !important; }
}