/* ============================================================
   HELIOCASTLE — RESPONSIVE
   Every media query, widest first: 1180 (menu collapses), 760
   (single column), 380 (small phones), short landscape, and the
   reduced-motion block.
   ============================================================ */

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {
  /* --- service pages --- */
  .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-shot { width: 66%; right: calc(var(--pad-x) * -0.8); opacity: 0.9; }
  .svc-hero-copy { max-width: 60%; }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the card goes full width, but the laptop stays a backdrop: on a tablet
     the column still has empty space to the right of the short lines, and
     dropping the composite into the flow leaves it stranded down there */
  .showcase { grid-template-columns: 1fr; }
  .showcase-devices { right: 0; top: 38%; width: min(52%, 330px); }

  /* --- primary nav becomes a slide-down panel ---
     The bar is fixed so the menu button stays reachable after scrolling
     (it was absolute, and scrolled away with the page). */
  .nav {
    position: fixed;
    gap: 14px;
    padding-top: 18px;
    padding-bottom: 18px;
    background: rgb(var(--bg-rgb) / 0.72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: background 0.4s, border-color 0.4s;
  }
  .nav.is-open { background: transparent; backdrop-filter: none; }
  /* solid once the page has scrolled, so text never sits on busy content */
  .nav.is-stuck { background: rgb(var(--bg-rgb) / 0.93); border-bottom-color: var(--line); }

  /* keep the brand and buttons above the sliding panel */
  .brand, .nav-toggle { position: relative; z-index: 12; }
  /* margin-left:auto used to sit on the theme switch, which stood to
     the burger's left and pushed the pair to the far edge. The switch
     is gone, so the burger carries it. */
  .nav-toggle { display: block; margin-left: auto; }

  .nav-links {
    position: fixed;
    inset: 0 0 auto 0;
    transform: translateY(-100%);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 104px var(--pad-x) 34px;
    background: rgb(var(--bg-rgb) / 0.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 70px rgb(var(--shadow-rgb) / calc(0.7 * var(--shadow-a)));
    transition: transform 0.5s var(--ease), visibility 0.5s;
    visibility: hidden;
    max-height: 100dvh;
    overflow-y: auto;
    z-index: 8;
  }
  .nav.is-open .nav-links { transform: translateY(0); visibility: visible; }

  .nav-links a {
    font-size: 15px;
    letter-spacing: 0.2em;
    padding: 18px 0;            /* comfortable 56px tap target */
    border-bottom: 1px solid var(--line);
  }
  .nav-links a::after { display: none; }
  .nav-links a.is-active { color: var(--gold); }

  /* JS relocates the CTA into the panel; hide it while it still sits
     in the header bar so it never crowds the burger */
  .nav > .nav-cta, .nav-spark { display: none; }
  .nav-links .nav-cta {
    width: 100%;
    justify-content: center;
    margin-top: 26px;
    padding: 17px 26px;
  }
  body.nav-locked { overflow: hidden; }

  .strip-inner { grid-template-columns: 1fr 1fr; }
  .pillar { border-top: 1px solid var(--line); }
  .projects-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .service-arrow { display: none; }
  .service { grid-template-columns: auto 46px 1fr; }
  /* not enough width for a side-by-side tag column */
  .service-body { grid-template-columns: 1fr; }
  .tags {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    max-width: none;
    margin-top: 16px;
  }
}

@media (max-width: 760px) {
  /* --- service pages --- */
  .plan-hero { padding-top: 116px; }
  .plan-hero-inner { grid-template-columns: 1fr; }
  .plan-shot { order: -1; width: min(76%, 300px); margin: 0 auto 8px; }
  .pillar-grid { grid-template-columns: 1fr; }
  .carries { grid-template-columns: 1fr; }
  /* One column is finally too narrow to hide anything behind, so the
     laptop rejoins the flow and goes to the end. It sits between the
     description and the list in the markup (that is what puts it behind
     them on a wider screen), so getting it last here needs flex order. */
  .showcase-info { display: flex; flex-direction: column; }
  .showcase-info > * { align-self: flex-start; }   /* keep natural widths */
  .showcase-desc,
  .showcase-list { align-self: stretch; }
  .showcase-devices {
    order: 9;
    align-self: flex-end;
    /* relative, NOT static: the laptop and phone inside are absolutely
       positioned, so this element has to stay their containing block. Make
       it static and they anchor to .showcase-info instead — which lands the
       laptop straight on top of the list. */
    position: relative;
    inset: auto;
    width: min(100%, 340px);
    margin: 30px 0 0;
    opacity: 1;
  }

  .svc-hero { padding-top: 116px; }
  /* the shot stops floating and leads the section */
  .svc-hero-inner { display: flex; flex-direction: column; min-height: 0; }
  .hero-shot {
    position: static;
    order: -1;
    /* the cut-out is trimmed flush to the devices, so it keeps the gutters
       here — bleeding it edge to edge clips the laptop and the phone */
    width: 100%;
    margin: 0 0 30px;
    transform: none;
  }
  .svc-hero-copy { max-width: none; }
  .svc-hero-title { font-size: clamp(24px, 7.4vw, 34px); }
  .svc-hero-title br { display: none; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-big { grid-template-columns: 1fr; }
  .plan-big-side { justify-items: start; text-align: left; }
  .why-grid { grid-template-columns: 1fr; }
  .poss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-inner { grid-template-columns: 1fr; }
  .foot-bar-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot-bar .brand { margin-right: 0; }
  .poss-art .mock { transform: none; }

  .hero { padding-top: 130px; }
  .hero-title { font-size: clamp(24px, 7.6vw, 34px); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; min-height: 34vh; }
  .hero-logo-wrap { width: min(52vw, 260px); }
  .strip-inner { grid-template-columns: 1fr; }
  .pillar { border-left: none; }
  .projects-grid { grid-template-columns: 1fr; }

  /* --- comfortable touch targets --- */
  .footer-nav { gap: 4px 18px; }
  .footer-nav a { padding: 12px 6px; }        /* 18px text -> ~42px tap area */
  .link-arrow { padding: 10px 0; }
  .socials a { width: 52px; height: 52px; }

  /* --- keep long words from forcing a sideways scroll --- */
  .hero-title, .section-title { overflow-wrap: break-word; }
  .hero-sub { overflow-wrap: break-word; }
  .contact-grid { grid-template-columns: 1fr; }
  /* services stack: number + icon on one line, text below */
  .service {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 14px 18px;
    padding-left: 0;
  }
  .service:hover { padding-left: 0; }
  .service-icon { width: 38px; height: 38px; }
  .service-body {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
  .tags {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    max-width: none;
    margin-top: 16px;
  }
}

/* static-capture mode (?snap): settle all reveals instantly */
.snap { scroll-behavior: auto; }
.snap .hero { min-height: 864px; }
.snap .reveal, .snap .reveal-nav, .snap .reveal-up { opacity: 1; transform: none; animation: none; }

/* ---------- very small phones (360px and below) ---------- */
@media (max-width: 380px) {
  /* --- service pages --- */
  .plan-hero .btn { width: 100%; justify-content: center; }
  .tag-cloud li { padding: 10px 14px; font-size: 12.5px; }
  .poss-grid { grid-template-columns: 1fr; }
  .svc-hero-actions .btn, .plan-big-side .btn, .cta-inner .btn { width: 100%; justify-content: center; }
  .why-note { letter-spacing: 0.18em; white-space: normal; text-align: center; }

  :root { --pad-x: 18px; }
  .brand-mark { width: 28px; }
  .brand-name { font-size: 15px; }
  .brand-tag { font-size: 8px; letter-spacing: 0.26em; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .btn { padding: 16px 22px; font-size: 11.5px; }
}

/* ---------- short/landscape phones ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 110px; padding-bottom: 60px; }
  .hero-visual { min-height: 40vh; }
  .nav-links { padding-top: 88px; padding-bottom: 24px; }
  .nav-links a { padding: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    /* An infinite animation squeezed into 0.001s is not stopped, it is a
       strobe at a thousand cycles a second — the opposite of what was
       asked for. Run each one once and let it end. */
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }

  .reveal, .reveal-nav, .reveal-up { opacity: 1; transform: none; }

  /* Every drawn icon on the site is held invisible by a dash offset until
     its animation runs. With the animations stopped, some would never be
     drawn at all — a looping one ends its single pass back at hidden — so
     the dash is taken off and the artwork simply shown. */
  .feat-icon *,
  .pillar-icon > *,
  .carry li svg path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .pillar-icon .pi-dot { opacity: 1 !important; }
}