/* ==========================================================================
   TrustBrick responsive layer
   Desktop is the cinematic layout; tablet simplifies; mobile is vertical,
   touch-first and never scrolls sideways.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root { --sp-8: 5rem; --sp-9: 7rem; }
  /* The hero gap override is gone: --sp-8 is 80px here, and the reference caps
     the copy-to-stage gap at 48px. home.css owns that gap now. */
}

/* --------------------------------------------------------------------------
   Small desktop / large tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .panel-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-panel__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-panel__form .btn { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Tablet: simplify the 3D, drop to two columns
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 64px; }

  /* Stacked hero: width is the only constraint that matters here. */
  .hero h1 { font-size: clamp(2.5rem, 5.6vw, 3.9rem); }
  .hero-3d { max-height: none; }

  .hero { min-height: auto; padding-block: calc(var(--header-h) + var(--sp-5)) var(--sp-6); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  /* The 3D is capped against viewport height so the stacked hero stays near
     one screen instead of the 200vh it reached on landscape tablets. The floor
     is what the chrome actually needs: a 44px control row, the metadata strip
     and the progress card, plus a band of clear frame for the building. Below
     it the overlays had nowhere to go but on top of each other. */
  .hero-3d {
    aspect-ratio: 16 / 10;
    min-height: 240px;
    max-height: min(42vh, 380px);
    margin-inline: auto;
    width: min(100%, 640px);

    /* Short and wide: the metadata reads as a strip docked to the progress
       card, not as a tall plate floating in a 320px frame. Row 2 is the clear
       band the building shows through. */
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    row-gap: 0;

    /* Lift 0: this frame is wide enough that pulling back alone clears both
       the docked plate and the top of the tower. */
    --stage-lens-lift: 0;
    --stage-zoom: 1.95;
  }
  /* The CSS scene is bottom-anchored; its clearance is the docked plate. */
  .hero-3d__fallback { inset: 0 0 44% 0; }
  .fallback-building { max-height: 72%; }
  .hero-3d__meta {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    min-width: 0;
    padding: var(--sp-3) var(--sp-4) var(--sp-2);
    /* Joins the progress card below into one plate. */
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    /* Denser than the desktop plate: here it sits directly over the tower
       rather than over empty sky, and the labels have to stay legible. */
    background: rgba(10, 19, 48, 0.78);
  }
  .hero-3d__stage {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 4;
    padding: var(--sp-2) var(--sp-4) var(--sp-3);
    border-top: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: rgba(10, 19, 48, 0.78);
  }
  .hero-3d__stage-top { margin-bottom: var(--sp-2); }
  .hero__proof { gap: var(--sp-4); padding-top: var(--sp-5); }
  .hero__lede { margin-bottom: var(--sp-5); }
  .hero__cta { margin-bottom: var(--sp-5); }

  /* Below the desktop tier the frame is narrower than the 1120px drawing, so
     scaling it to fit would put its labels back under 7px. It scrolls inside
     its own frame at close to natural size instead. */
  .console-shot {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .console-shot img { width: 1120px; max-width: none; }
  .console-shot::-webkit-scrollbar { height: 6px; }
  .console-shot::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: 3px;
  }

  .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .split--reverse .split__media { order: 0; }

  .page-hero__grid { grid-template-columns: minmax(0, 1fr); }

  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase { border-right-width: 1px; border-radius: var(--r-lg); }
  .phase:first-child, .phase:last-child { border-radius: var(--r-lg); }

  .panel-grid--2, .panel-grid--3 { grid-template-columns: minmax(0, 1fr); }

  .nav { display: none; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2.4rem is 38px - under the 44px minimum, and this is the only way into
       navigation on a phone. */
    width: 44px; height: 44px;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: var(--r-sm);
    cursor: pointer;
  }
  .nav-toggle svg { width: 1.4rem; height: 1.4rem; }

  /* Mobile navigation sheet */
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: var(--navy-900);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: var(--sp-5);
    transform: translateY(-100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
  }
  .mobile-nav[data-open="true"] { transform: none; }
  .mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
    min-height: var(--header-h);
  }
  .mobile-nav__close {
    border: 0; background: rgba(255, 255, 255, 0.08);
    color: #fff; width: 44px; height: 44px;
    border-radius: var(--r-sm); cursor: pointer;
    display: grid; place-items: center;
  }
  .mobile-nav__close svg { width: 1.3rem; height: 1.3rem; }
  .mobile-nav a {
    display: block;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    color: #fff;
    text-decoration: none;
    font-size: var(--step-1);
    font-weight: 600;
  }
  .mobile-nav a:hover { color: var(--orange-400); }
  .mobile-nav__sub {
    padding-left: var(--sp-4);
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    margin: var(--sp-2) 0 var(--sp-3);
  }
  .mobile-nav__sub a {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(185, 196, 221, 0.85);
    padding: var(--sp-2) 0;
    border-bottom: 0;
  }
  .mobile-nav__actions {
    margin-top: auto;
    padding-top: var(--sp-6);
    display: grid;
    gap: var(--sp-3);
  }
}

/* --------------------------------------------------------------------------
   Scroll story: side by side until there is genuinely no room
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) and (min-width: 901px) {
  .story__inner { gap: var(--sp-6); }
  .story__scene { max-height: 54vh; }
  .story__step { min-height: 14vh; padding-block: var(--sp-4); }
}

@media (max-width: 900px) {
  /* Stacked: the scene pins under the header and the steps run beneath it, so
     the visual is still on screen while its step is being read. */
  .story__inner { grid-template-columns: minmax(0, 1fr); }
  .story__viz {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-3));
    z-index: 1;
    padding-bottom: var(--sp-3);
    background: var(--navy-900);
  }
  .story__scene { aspect-ratio: 16 / 9; max-height: 38vh; }
  .story__steps { padding-block: var(--sp-4); }
  .story__step { min-height: auto; padding-block: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --sp-7: 2.25rem;
    --sp-8: 3rem;
    --sp-9: 3.5rem;
  }

  .container { padding-inline: var(--sp-4); }

  .hero { padding-block: calc(var(--header-h) + var(--sp-4)) var(--sp-5); }
  .hero h1 { font-size: clamp(2.5rem, 10vw, 3.4rem); margin-bottom: var(--sp-4); }
  /* Every gap in the stack was tuned for desktop. Tightening them, shortening
     the 3D and railing the proof list brings the phone hero from roughly 150vh
     to a little over one screen. */
  .hero__eyebrow { margin-bottom: var(--sp-4); }
  .hero__lede { font-size: var(--step-0); margin-bottom: var(--sp-4); }
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: var(--sp-4);
  }
  .hero__cta .btn { width: 100%; }

  /* A swipe rail keeps all four proof points instead of stacking them into a
     255px block. */
  .hero__proof {
    display: grid;
    /* The desktop rule leaves two explicit 1fr tracks behind. Without clearing
       them, column auto-flow packs items into those two cells and they draw on
       top of each other. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    gap: var(--sp-4);
    padding-top: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--sp-4));
    padding-inline: var(--sp-4);
    scrollbar-width: none;
  }
  .hero__proof::-webkit-scrollbar { display: none; }
  .hero__proof-item { scroll-snap-align: start; }

  /* 27vh left 216px for 203px of chrome. The frame is sized off the chrome it
     has to hold now, so the tower keeps a clear band of its own. */
  .hero-3d {
    aspect-ratio: 16 / 11;
    min-height: 320px;
    max-height: min(46vh, 380px);
    padding: var(--sp-3);

    --stage-lens-lift: 0.18;
    --stage-zoom: 1.5;
  }
  .hero-3d__fallback { inset: 0 0 48% 0; }
  .hero-3d__meta {
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
  }
  .hero-3d__meta dd { font-size: 0.9rem; }
  .hero-3d__stage { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .hero-3d__stage-top { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }

  .search-panel { margin-top: var(--sp-5); }
  .search-panel__card { padding: var(--sp-4); border-radius: var(--r-lg); }
  .search-panel__form { grid-template-columns: minmax(0, 1fr); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: var(--sp-4); }

  .section-head { flex-direction: column; align-items: flex-start; }

  .positioning { grid-template-columns: minmax(0, 1fr); }
  .phases { grid-template-columns: minmax(0, 1fr); }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .flashes {
    top: auto;
    bottom: var(--sp-4);
    right: var(--sp-4);
    left: var(--sp-4);
    width: auto;
  }

  /* Swipeable property rail on small screens */
  .swipe-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-4);
    margin-inline: calc(-1 * var(--sp-4));
    padding-inline: var(--sp-4);
    scrollbar-width: none;
  }
  .swipe-rail::-webkit-scrollbar { display: none; }
  .swipe-rail > * { scroll-snap-align: start; }

  .steps { flex-direction: column; }
  .steps li { flex: 1 1 auto; }

  .cta-band { padding: var(--sp-6) var(--sp-4); }
  .cta-band__actions { flex-direction: column; }
  .cta-band__actions .btn { width: 100%; }

  .modal { padding: 0; align-items: flex-end; }
  .modal__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .modal__head, .modal__body, .modal__foot { padding-inline: var(--sp-4); }
  .modal__foot { border-radius: 0; }

  .drawer__panel { width: 100vw; }
  .drawer__head, .drawer__body, .drawer__foot { padding-inline: var(--sp-4); }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3, .span-4, .span-6, .span-8, .span-9, .span-12 { grid-column: span 1; }

  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .stat { padding: var(--sp-4); }
  .stat__value { font-size: var(--step-2); }

  .console-main { padding: var(--sp-4) var(--sp-3); }
  .console-head { flex-direction: column; }
  .console-head__actions { width: 100%; }
  .console-head__actions .btn { flex: 1; }

  .grid-toolbar { padding: var(--sp-3); }
  .grid-toolbar__actions { margin-left: 0; width: 100%; }
  .grid-toolbar__actions .btn { flex: 1; }
  .grid-toolbar__filters { width: 100%; }
  .grid-toolbar__filters .select { flex: 1 1 46%; min-width: 0; }

  .property-card__foot { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .property-card__foot .btn { width: 100%; }

  .pipeline__stage::after { display: none; }
  .pipeline__stage { flex: 1 1 45%; }

  .story__step { padding-block: var(--sp-4); }
  .story__scene { max-height: 32vh; }

  .accordion__trigger { font-size: var(--step-0); }

  .search-overlay { padding-top: 6vh; }
  .search-overlay__panel { width: calc(100vw - 2 * var(--sp-4)); }

  .table-wrap { border-radius: var(--r-md); }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .hero__proof-item { flex: 1 1 100%; }
  .counter-grid { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Columns that hide on narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .data-grid .hide-sm { display: none; }
  .data-grid { min-width: 0; }
}

/* --------------------------------------------------------------------------
   Coarse pointers: bigger touch targets
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn { padding-block: 0.8rem; }
  .btn--sm { padding-block: 0.55rem; }
  .nav__link, .menu__link, .console-nav a { padding-block: 0.7rem; }
  .icon-btn { width: 2.25rem; height: 2.25rem; }
}

/* --------------------------------------------------------------------------
   Very small phones: the header must fit 360px
   -------------------------------------------------------------------------- */
@media (max-width: 419px) {
  /* Logo + search + a 161px CTA + burger overflowed a 360px viewport by 25px.
     Below 420px the header keeps the logo, one action and the menu toggle;
     "Explore Products" stays reachable from the menu sheet. */
  .header__cta { display: none; }
  .header__inner { gap: var(--sp-2); padding-inline: var(--sp-4); }
  .logo__img { height: 44px; }
}

/* The supplied lockup is a stacked mark: below ~520px the tagline stops being
   legible at any header-appropriate height, so the header gains a little room
   rather than the logo being redrawn or cropped. */
@media (max-width: 520px) {
  :root { --header-h: 68px; }
}

/* --------------------------------------------------------------------------
   High contrast
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --line: #9aa4b6;
    --line-strong: #6b7688;
    --ink-500: #3c4658;
  }
  .btn { border-width: 2px; }
}

/* --------------------------------------------------------------------------
   Minimum tap targets, last word
   -------------------------------------------------------------------------- */
/* main.css carries the same floor, but this file is loaded after both main.css
   and the per-page stylesheet, so component rules in home.css were winning and
   several controls sat at 32-38px. Anything a finger has to hit lands here. */
@media (pointer: coarse), (max-width: 1024px) {
  .btn,
  .header__action,
  .nav-toggle,
  .chip,
  .icon-btn,
  .accordion__trigger,
  .finder__option,
  .console-tab {
    min-height: 44px;
  }
  .btn { padding-block: 0.72rem; }
  .btn--sm { padding-block: 0.6rem; }
  .chip { display: inline-flex; align-items: center; padding-block: 0.6rem; }
  .console-tab { display: inline-flex; align-items: center; }

  .icon-btn,
  .header__action,
  .nav-toggle,
  .mobile-nav__close,
  .hero-3d__btn,
  .solution-card__cta,
  .property-card__fav,
  .gallery__thumb {
    width: 44px;
    height: 44px;
  }
  /* The glyph inside stays its original size; only the hit area grows. */
  .hero-3d__btn svg { width: 1.05rem; height: 1.05rem; }
  .property-card__fav svg { width: 1.2rem; height: 1.2rem; }
}

/* --------------------------------------------------------------------------
   Minimum control size on every pointer
   -------------------------------------------------------------------------- */
/* The 44px floor above is gated on coarse pointers, which left the mouse
   versions of these controls at 32-43px. Size is a hit-accuracy question
   before it is a touch question, so the floor applies everywhere. */
/* --sm changes the type and the horizontal padding, not the hit area: these
   are the product and property card CTAs. */
.btn, .btn--sm { min-height: 44px; }
.header__action,
.nav-toggle,
.hero-3d__btn,
.solution-card__cta,
.property-card__fav {
  width: 44px;
  height: 44px;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.console-tab { display: inline-flex; align-items: center; min-height: 44px; }

/* Landscape tablets are wide but short. The stacked hero has to fit its whole
   chrome into ~768px of height, so the frame and the surrounding rhythm each
   give a little back rather than pushing the fold well past one screen. The
   240px 3D floor from the block above still holds - this only lowers the cap. */
@media (max-width: 1024px) and (min-width: 861px) and (max-height: 850px) {
  .hero { padding-block: calc(var(--header-h) + var(--sp-4)) var(--sp-5); }
  .hero__inner { gap: var(--sp-4); }
  .hero-3d { max-height: min(36vh, 320px); }
  .hero__proof { gap: var(--sp-3) var(--sp-5); }
}