/* =========================================================
   AstraShilp — one hero line for all five pages (13 Sep 2026)
   ---------------------------------------------------------
   Every page's first headline now starts on the line About Us is
   built on: its section padding, clamp(36px, 6.2vw, 120px), or
   clamp(28px, 6vw, 60px) once About stacks at 1080px and below.
   Before this, at 1536px the headline ink started 73px in on home,
   96 on services, 98 on portfolio, 100 on about and 150 on connect.

   Box and ink are not the same edge: a capital's left side-bearing
   sets its stroke several px inside its box, by a different amount
   for each letter and typeface. So each headline is also pulled left
   by its own first letter's side-bearing (in em, so it holds at any
   size) — the ink sits on the line the label and body copy start on.
   If a headline's first letter changes, re-measure its margin.

   Phones (560px and below) keep mobile.css's shared 22px edge;
   mobile.css loads after this file and restates it.
   ========================================================= */
:root { --hero-line: clamp(calc(36 * var(--u, 1px)), 6.2vw, calc(120 * var(--u, 1px))); }
@media (max-width: 1054.37px) { :root { --hero-line: clamp(calc(28 * var(--u, 1px)), 6vw, calc(60 * var(--u, 1px))); } }

/* home: the hero copy is absolutely placed above 900px, in flow below it */
@media (min-width: 901px) { .hero-inner { left: var(--hero-line); } }
@media (min-width: 561px) and (max-width: 900px) {
  .hero-inner { padding-left: var(--hero-line); padding-right: var(--hero-line); }
}

/* services */
.svc-hero__copy { padding-left: var(--hero-line); }

/* portfolio */
.pf-copy { padding-left: var(--hero-line); }

/* connect: was a centred 1400px box, which put its headline 345px in at 1920 */
.cn-hero { max-width: none; padding-left: var(--hero-line); padding-right: var(--hero-line); }

/* the ink on the line: each headline's first capital, side-bearing in em */
@media (min-width: 561px) {
  .hero-title      { margin-left: -.122em; }   /* N  Montserrat 300 */
  #s1 .ab__title   { margin-left: -.084em; }   /* B  Jost 300 */
  .svc-hero__title { margin-left: -.084em; }   /* F  Jost 300 */
  .pf-head         { margin-left: -.044em; }   /* S  Jost 300 (was Montserrat, -.052em) */
  .cn-title        { margin-left: -.0845em; }  /* L  Jost 300 */
}

/* =========================================================
   About · Services · Portfolio — one hero copy block (13 Sep 2026, night)
   ---------------------------------------------------------
   The three pages' opening copy came from three mockups: a different
   label face, a label-to-rule gap of 14 / 34 / ~60px, headlines in
   Jost 62px / Jost 45px / Montserrat 58px, body copy in three sizes,
   colours and line spacings, and each block centred in its section, so
   it started at a different height on every page. They are now one
   component, set the way About Us was:

     label      Montserrat 500, 12-16px, .42em tracking, cyan
     rule       14px under the label
     headline   30px under the rule; Jost 300, line-height 1.1
     body       26px under the headline and between paragraphs;
                Jost 300, 15-18px, line-height 1.62
     position   the label starts 16vh below the menu bar, from 1106px
                up (where all three pages are side by side)

   One departure from About: the headline scales at 3.4vw (still capped
   at 62px). The services headline is three long lines in a 47% column,
   and About's 4.4vw broke it into ragged extra lines on laptops.
   Phones (560px and below) keep mobile.css's rhythm.
   ========================================================= */
@media (min-width: 561px) {
  #s1 .sechead__eb, .svc-hero .eyebrow, .pf .eyebrow {
    font-family: 'Montserrat', system-ui, sans-serif; font-weight: 500;
    font-size: clamp(calc(12 * var(--u, 1px)), 1.05vw, calc(16 * var(--u, 1px)));
    line-height: 1.4; letter-spacing: .42em; color: #36d4ff; text-transform: uppercase;
    margin: 0;
  }
  #s1 .sechead--inline { margin-bottom: 0; }
  #s1 .sechead__rule, .svc-hero__rule, .pf .rule-glow {
    width: calc(120 * var(--u, 1px)); margin-top: calc(14 * var(--u, 1px)); margin-bottom: 0;
  }
  #s1 .ab__title, .svc-hero__title, .pf-head {
    margin-top: calc(30 * var(--u, 1px)); margin-bottom: 0;
    font-family: 'Jost', system-ui, sans-serif; font-weight: 300;
    font-size: clamp(calc(32 * var(--u, 1px)), 3.4vw, calc(62 * var(--u, 1px)));
    line-height: 1.1; letter-spacing: .005em; color: #f3f7fd;
  }
  #s1 .ab__body, .svc-hero__body, .pf-body {
    margin-top: calc(26 * var(--u, 1px)); margin-bottom: 0;
    font-family: 'Jost', system-ui, sans-serif; font-weight: 300;
    font-size: clamp(calc(15 * var(--u, 1px)), 1.12vw, calc(18 * var(--u, 1px)));
    line-height: 1.62;
  }
  .svc-hero__body, .pf-body { color: #c3cdda; }   /* About's body colour (its accent line keeps cyan) */
  .pf-actions { margin-top: calc(40 * var(--u, 1px)); }
}
@media (min-width: 1105.66px) {
  #s1.ab          { align-items: flex-start; }
  #s1 .ab__copy   { margin-top: calc(var(--nav-h, 0px) + 16vh); }
  .svc-hero__copy { align-self: start; padding-top: calc(var(--nav-h, 0px) + 16vh); }
  .pf-copy        { justify-content: flex-start; padding-top: calc(var(--nav-h, 0px) + 16vh); }
}