/* =========================================================
   AstraShilp — phone alignment
   -----------------------------------------------------------
   Loaded last on every page. Nothing here changes the desktop
   design; it only corrects what the desktop layout leaves
   behind once it stacks on a narrow screen.

   The five pages were built from separate mockups, so each one
   carried its own edge value (16px on the footers, 23px on the
   home hero, 27px on portfolio, 28px on about, 34/40px on
   services, 36/44/46px on connect). One token now sets them
   all, so every page shares a single left edge with the logo.
   ========================================================= */

:root { --edge: calc(22 * var(--u, 1px)); }

/* =========================================================
   1 · STRUCTURE — things that stack before phone width
   ========================================================= */
@media (max-width: 1105.17px) {
  /* .impact__items drops to 3 columns here, but the divider rule is
     "every item except the first", so items 4 and 7 kept a stray
     vertical line at the start of their row. */
  .imp:nth-child(3n+1) { border-left: 0; }
}

@media (max-width: 900px) {
  /* The four-up collage that needed a width reset here was replaced by a
     single studio image on 11 Sep 2026; .who-gallery is a plain block now and
     is full width at every size, so no override is needed.

     Both of these were absolutely positioned panels on the desktop slide.
     Made static they keep the width they were given, so they stop
     short of the text column above them. */
  .ab__callouts { width: 100%; }
  .ab__pillars  { width: 100%; }
}

@media (max-width: 720px) {
  /* Two columns now — same stray-divider problem as .imp above. */
  .ind:nth-child(2n+1) { border-left: 0; }
  .imp:nth-child(2n+1) { border-left: 0; }

  /* Service item + description is a 1 : 1.18 pair of columns. At this
     width that is two ~120px columns of ragged text; stacked, the
     description aligns under the item name rather than beside it. */
  .scard__list li,
  .scard__list--wide li { grid-template-columns: 1fr; gap: calc(5 * var(--u, 1px)); }
  .scard__list .ds { padding-left: calc(14 * var(--u, 1px)); }
  .scard__list { gap: calc(17 * var(--u, 1px)); }

  /* Two of the four about visuals are photographs rather than live canvases.
     The stacked layout gives every visual a 56vh box, which on a phone is
     354x472 PORTRAIT; `cover` then scales a landscape photo up and crops the
     middle out of it — About 04 lost the right half of its lit doorway and
     most of its staircase and read as a tall black column. Height auto, so
     each one keeps the aspect its own width/height attributes declare and the
     whole composition stays in frame. */
  .ab__viz--photo {
    height: auto;
    object-fit: cover;
    object-position: center;
  }
  /* 02's Earth is a centred subject in a 16:9 frame, so at its own aspect the
     globe is only ~44% of 354px — a 156px marble adrift in black. A square
     frame crops the empty sky either side and gives it back its presence. */
  #viz-eclipse { aspect-ratio: 1 / 1; }

  /* 01's interface photo carries everything that matters — the hand and the
     panel cluster — in its right-hand 60%; the left is the dark room. At its
     native 16:9 in a 354px column the panels are unreadable, so it takes a
     taller frame weighted to that side. The live layer reads object-position
     from the computed style, so its nodes and bloom follow the crop. */
  #viz-hand { aspect-ratio: 4 / 3; object-position: 72% 50%; }
}

/* =========================================================
   2 · PHONE
   ========================================================= */
@media (max-width: 560px) {

  /* ---- 2.1 one left edge, every page ---- */
  .nav { padding-left: var(--edge); padding-right: var(--edge); }

  /* home + portfolio */
  .container,
  .who-grid,
  .build-inner,
  .footer-grid,
  .footer-bottom,
  .trusted,
  .hero-inner,
  .pf-copy { padding-left: var(--edge); padding-right: var(--edge); }

  /* about */
  .ab { padding-left: var(--edge); padding-right: var(--edge); }

  /* services */
  .svc-hero__copy,
  .svc-services,
  .svc-extra { padding-left: var(--edge); padding-right: var(--edge); }

  /* connect */
  .cn-hero,
  .cn-form,
  .cn-cta { padding-left: var(--edge); padding-right: var(--edge); }

  /* ---- 2.2 the menu stays reachable ---- */
  /* It was display:none below 560px, which left phone visitors with a
     logo and no way off the page. Kept as one row under the logo,
     tight enough not to wrap, on the shared left edge. */
  .nav { flex-wrap: wrap; gap: calc(10 * var(--u, 1px)); padding-top: calc(14 * var(--u, 1px)); padding-bottom: calc(12 * var(--u, 1px)); }
  .nav-links {
    display: flex; order: 3; width: 100%;
    justify-content: space-between; flex-wrap: nowrap;
    gap: 0; margin: 0; padding: 0; list-style: none;
  }
  .nav-links a {
    font-size: calc(10 * var(--u, 1px)); letter-spacing: .08em; padding-bottom: calc(3 * var(--u, 1px));
    white-space: nowrap;
  }

  /* ---- 2.3 nothing starts underneath the menu bar ---- */
  /* The bar is position:absolute on four of the five pages, so it sits
     over whatever the first section puts at its top. One clearance
     value for all of them; connect's bar is sticky and already in
     flow, so it only needs its own breathing room. */
  .hero-inner     { padding-top: calc(116 * var(--u, 1px)); }
  .svc-hero__copy { padding-top: calc(112 * var(--u, 1px)); padding-bottom: calc(34 * var(--u, 1px)); }
  .pf-copy        { padding-top: calc(112 * var(--u, 1px)); }
  .ab             { padding-top: calc(34 * var(--u, 1px)); }
  #s1.ab          { padding-top: calc(112 * var(--u, 1px)); }
  .cn-hero        { padding-top: calc(34 * var(--u, 1px)); }

  /* ---- 2.4 the section label sits above its section ---- */
  /* .sechead--top is absolutely placed over a full-bleed visual. Once
     the visual moves below the copy the label lands on top of the
     heading — the glow rule was drawing straight through the words
     "the" and "stories" on about, and over the hero image on connect.
     In flow, and on the same left edge as the heading it introduces. */
  .sechead--top {
    position: static;
    margin: 0 0 clamp(calc(26 * var(--u, 1px)), 4vh, calc(38 * var(--u, 1px)));
  }
  .sechead, .sechead__eb { text-align: left; }
  .sechead__rule { margin-left: 0; margin-right: auto; }
  .sechead--gap { margin-top: clamp(calc(46 * var(--u, 1px)), 7vh, calc(72 * var(--u, 1px))); }

  /* ---- 2.5 copy wraps to the screen, not to the desktop ---- */
  /* Every body paragraph carries the mockup's line breaks. At 390px
     they land mid-sentence and leave orphans ("and grow", "through",
     "campaign,"). Headlines keep their breaks; body copy reflows. */
  .hero-lead br,
  .hero-sub br,
  .who-body br,
  .who-accent br,
  .sec-sub br,
  .build-copy br,
  .ab__body br,
  .callout__text p br,
  .pillar p br,
  .svc-hero__body br,
  .scard__sub br,
  .engage__txt p br,
  .impact__lead p br,
  .cn-lede br,
  .cn-cta__sub br,
  .pf-body br { display: none; }

  /* ---- 2.6 about: the two panels under the copy ---- */
  /* .pillar is a fixed 150px box with 18px of side padding, so the
     first one sat 18px in from the text above it and the pair stopped
     62px short of the right edge. A two-up grid instead, flush both
     sides, with the divider only between the columns. */
  .ab__pillars {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 0; row-gap: calc(34 * var(--u, 1px)); align-items: start;
  }
  .pillar { width: auto; padding: 0; }
  .pillar + .pillar { border-left: 0; }
  .ab__pillars .pillar:nth-child(2n+1) { padding-right: calc(18 * var(--u, 1px)); }
  .ab__pillars .pillar:nth-child(2n) {
    padding-left: calc(18 * var(--u, 1px));
    border-left: calc(1 * var(--u, 1px)) solid rgba(150, 180, 220, .22);
  }
  .ab__callouts { gap: calc(30 * var(--u, 1px)); }

  /* ---- 2.7 connect: the form column lines up ---- */
  /* The contact row is a wrapping flex line, so email / location /
     follow landed at three different left edges depending on what
     fitted beside what. Stacked, they share the page edge. */
  .cn-contact { display: flex; flex-direction: column; align-items: flex-start; gap: calc(26 * var(--u, 1px)); }
  .cn-contact__sep { display: none; }          /* a 44px rule left hanging once the row wrapped */
  .cn-contact__follow { margin-left: 0; }      /* socials sat 10px in from the rest */
  .cn-submit {
    width: 100%; margin-left: 0; margin-right: 0;
    padding-left: calc(24 * var(--u, 1px)); padding-right: calc(24 * var(--u, 1px));   /* was auto-centred: 8px right of the fields */
  }

  /* ---- 2.8 one heading rhythm, every page ----
     Measured at 390px before this block, the label-to-underline gap was 14px on
     most pages but 34px on the services hero and 57px on portfolio; the
     underline-to-heading gap was 14, 17, 30, 34, 46, 64 and 68px depending on
     which page and which section you were looking at. Every one of those numbers
     came from a desktop composition value (a vh margin, a negative nudge) that
     had no reason to survive the stack. Two numbers now: 14 under the label,
     28 under the rule. */

  /* label -> underline: 14px */
  .sechead__rule   { margin-top: calc(14 * var(--u, 1px)); }
  .center-rule     { margin-top: calc(14 * var(--u, 1px)); }
  .svc-hero__rule  { margin-top: calc(14 * var(--u, 1px)); }   /* was 34 */
  .pf .eyebrow     { margin-bottom: 0; }   /* was 3.4vh */
  .pf .rule-glow   { margin-top: calc(14 * var(--u, 1px)); }   /* was 2.6vh */

  /* underline -> whatever comes next: 28px */
  .sechead--top    { margin-bottom: calc(28 * var(--u, 1px)); }
  .sechead--gap    { margin-bottom: calc(28 * var(--u, 1px)); }
  .sechead--inline { margin-bottom: calc(28 * var(--u, 1px)); }   /* .ab__title's top margin is 0 here */
  .ab__title       { margin-top: 0; }      /* was 30, on top of the gap above it */
  .ab--wave .ab__copy { margin-top: 0; }   /* a -4vh desktop nudge made About 03
                                              30px tighter than its own siblings */
  .who-top         { margin-bottom: calc(28 * var(--u, 1px)); }/* was 5vh */
  .who-head        { margin-top: 0; }      /* was 3vh, added on top of that */
  .sec-head        { margin-top: calc(28 * var(--u, 1px)); }   /* was 2vh */
  .frame .sec-head.big { margin-top: calc(28 * var(--u, 1px)); } /* was 1.6vh */
  .pf .rule-glow   { margin-bottom: calc(28 * var(--u, 1px)); }
  .pf-head         { margin-top: 0; }
  .svc-hero__title { margin-top: calc(28 * var(--u, 1px)); }   /* was 34 */
  .scards, .industries, .engage, .impact { margin-top: calc(28 * var(--u, 1px)); }

  /* ---- 2.9 home ---- */
  /* The hero is one two-line lock-up now, sized by script.js to the
     width of the line beneath it. At 28px the inherited em-based
     margins collapse to ~5px, so the sub-headline crowds it. */
  .hero-title { margin: .3em 0 .5em; }
  .hero-lead  { margin-top: 4.4vh; }

  /* "WHO WE ARE" was the one centred label on the page sitting over a
     left-aligned heading. The other two sections are centred through
     and through, so they are left alone. */
  .who-top .eyebrow { text-align: left; }
  .who-top .center-rule { margin-left: 0; margin-right: auto; }
}

/* =========================================================
   3 · SMALL PHONES (iPhone SE / Android 360)
   ========================================================= */
@media (max-width: 400px) {
  :root { --edge: calc(18 * var(--u, 1px)); }
  .nav-links a { font-size: calc(9.5 * var(--u, 1px)); letter-spacing: .05em; }

  /* The about headlines hold their written line breaks down to 390px; at 360
     "The world is entering" started splitting after "is". */
  .ab__title { font-size: calc(32 * var(--u, 1px)); }
}