/* =========================================================
   NorthCell — phone layout
   Design reference: Figma page "Website for Phone", frames 390 wide.
   Everything is drawn on a 390-wide frame and scales with the screen:
   1 design pixel = var(--p). Loaded after styles.css, which keeps all
   the tokens; this file only overrides what the phone changes.
   ========================================================= */

@media (max-width: 700px) {

  :root {
    --p: calc(100vw / 390);              /* phone unit: 1px at 390 wide */
    --nav-h-p: calc(77 * var(--p));
    --banner-h-p: calc(124 * var(--p));
    --head-h-p: calc(201 * var(--p));    /* nav + banner on chapters */
    --head-h-hero: calc(317 * var(--p)); /* nav + taller banner on the hero */
  }

  /* ---------- 1. Page shell ---------- */
  html { scroll-padding-top: 0; }
  /* Phone/Body 2 as the base, so nothing inherits the desktop size, which
     scales down to about 4px at this width. */
  body {
    font-size: calc(14 * var(--p));
    line-height: 1.5;
  }
  body.page-landing {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* ---------- 2. Header (nav + banner) ---------- */
  .site-header { z-index: 20; }

  .nav {
    position: relative;
    display: block;
    height: var(--nav-h-p);
    padding: 0;
  }
  .nav__logo { position: absolute; left: calc(19 * var(--p)); top: calc(26 * var(--p)); }
  .nav__logo img { width: calc(120 * var(--p)); height: calc(29.2 * var(--p)); }
  .nav__right { display: none; }

  /* Hamburger: 24 x 8 of bars inside a 44 x 44 tap area */
  .nav__menu {
    position: absolute;
    right: calc(10 * var(--p));
    top: calc(20 * var(--p));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(6 * var(--p));
    width: max(44px, calc(44 * var(--p)));
    height: max(44px, calc(44 * var(--p)));
    padding: 0 calc(10 * var(--p));
    border: 0;
    background: none;
    cursor: pointer;
  }
  .nav__menu span {
    display: block;
    height: calc(2 * var(--p));
    background: var(--brand-green);
  }

  .banner {
    height: var(--banner-h-p);
    transition: height 0.5s var(--ease-out, ease);
  }
  body[data-banner="open"] .banner { height: calc(240 * var(--p)); }
  .banner__text {
    left: calc(51 * var(--p));
    top: calc(32 * var(--p));
    transform: none;
    width: calc(303 * var(--p));
    font-size: calc(14 * var(--p));
    line-height: 1.5;
  }
  .banner__links {
    display: none;
    left: calc(53 * var(--p));
    right: auto;
    top: calc(119 * var(--p));
    transform: none;
    flex-direction: column;
    width: fit-content;                  /* the column hugs the widest pill and
                                            the other stretches to match it */
    gap: calc(14 * var(--p));
    font-size: calc(18 * var(--p));      /* Phone/Link */
    line-height: 1.5;
  }
  body[data-banner="open"] .banner__links { display: flex; }
  .banner__links a {
    position: relative;
    height: calc(34 * var(--p));
    padding: 0 calc(10 * var(--p));
    border-radius: calc(50 * var(--p));
  }
  .banner__links a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }

  /* ---------- 3. Chapters: stacked, one fades out as the next fades in ---------- */
  .page-landing main {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--head-h-p);
    height: calc(100dvh - var(--head-h-p));
    padding: 0;
    transition: top 0.5s var(--ease-out, ease), height 0.5s var(--ease-out, ease);
  }
  body.page-landing[data-banner="open"] main {
    top: var(--head-h-hero);
    height: calc(100dvh - var(--head-h-hero));
  }
  .chapter {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity 0.35s ease, visibility 0.35s;
  }
  .chapter.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 3;
  }
  .chapter.is-leaving {         /* still on screen while it fades away */
    opacity: 0;
    visibility: visible;
    z-index: 2;
  }
  /* space that lets a panel scroll down to its artwork */
  .chapter::after {
    content: "";
    display: block;
    height: calc(var(--content-h, 700) * var(--p));
  }

  /* ---------- 4. Hero ---------- */
  .hero__marker { display: none; }

  /* Figma "Vector Element 1 — Perspective Warp" (292:5095): the same globe
     grid the desktop hero uses. The traced SVG has preserveAspectRatio="none",
     so giving it the phone's box (706 x 428 from x -158, y 268) bends it to
     the phone proportions instead of the desktop ones. Bottom layer, behind
     the map, as in Figma. */
  .hero__grid {
    left: calc(-158 * var(--p));
    top: calc(-49 * var(--p));           /* Figma y 268, under the 317 header */
    width: calc(706 * var(--p));
    height: calc(428 * var(--p));
    aspect-ratio: auto;
    max-width: none;
    transform: none;
  }

  .hero__map {
    left: calc(-26 * var(--p));
    top: calc(-34 * var(--p));           /* Figma y 283, under the 317 header */
    width: calc(442 * var(--p));
    height: calc(429 * var(--p));
  }
  .hero__scroll {
    left: calc(51 * var(--p));
    top: calc(50 * var(--p));
    font-size: calc(12 * var(--p));
    line-height: 1.4;
  }
  .hero__title {
    left: calc(51 * var(--p));
    top: calc(99 * var(--p));
    width: calc(295 * var(--p));
    font-size: calc(28 * var(--p));
    line-height: 1.25;
    letter-spacing: -0.005em;
  }
  .hero__underline {
    left: calc(51 * var(--p));
    top: calc(171 * var(--p));
    width: calc(156 * var(--p));
    height: auto;
  }

  /* ---------- 5. Journey list (hero) and journey pair (chapters) ---------- */
  .storyline--vertical {
    left: calc(51 * var(--p));
    top: calc(404 * var(--p));
    width: auto;
  }
  .storyline--vertical ol {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--p));
    height: auto;
  }
  .storyline--horizontal { display: none; }
  .storyline a,
  .journey-pair__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(10 * var(--p));
    height: calc(15 * var(--p));
    font-size: calc(10 * var(--p));
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--text-ui);
    text-decoration: none;
    white-space: nowrap;
  }
  .storyline a::after,
  .journey-pair__item::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }
  .storyline__diamond,
  .journey-pair__diamond {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(14.15 * var(--p));
    height: calc(14.15 * var(--p));
  }
  .storyline__diamond::before,
  .journey-pair__diamond::before {
    content: "";
    width: calc(10 * var(--p));
    height: calc(10 * var(--p));
    border: 1px solid var(--text-primary);
    transform: rotate(45deg);
  }
  /* The progress line stays put while the chapters slide past sideways, but
     travels with the copy when the chapter is scrolled up and down
     (js/phone.js feeds it the chapter's scroll position). It passes under the
     banner, which sits above it. */
  .journey-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 15;
    height: calc(104 * var(--p));
    pointer-events: none;
  }
  .journey-bar[hidden] { display: none; }
  .journey-pair {
    position: absolute;
    left: calc(51 * var(--p));
    top: calc(77 * var(--p));
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: calc(10 * var(--p));
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .journey-pair__item--current .journey-pair__diamond::before { background: var(--text-primary); }
  .journey-pair__chevron { flex: none; width: calc(6.5 * var(--p)); height: calc(13 * var(--p)); }

  /* ---------- 6. Chapter copy ---------- */
  .chapter__copy {
    left: calc(51 * var(--p));
    top: calc(112 * var(--p));
    width: calc(313 * var(--p));
    gap: calc(20 * var(--p));
    color: var(--text-secondary);
  }
  .chapter__title {
    width: calc(275 * var(--p));
    margin-left: 0;
    font-size: calc(20 * var(--p));
    line-height: 1.4;
  }
  #the-gap .chapter__title { margin-left: 0; }
  .chapter__body {
    width: calc(275 * var(--p));
    font-size: calc(14 * var(--p));
    line-height: 1.5;
  }

  /* ---------- 7. Chapter photos ----------
     Each chapter carries its own photo and the next chapter's peeking out
     behind it, so they fade in and out with the chapter. */
  .card-stage { display: none; }
  .next-button { display: none; }
  .chapter__photo {
    position: absolute;
    max-width: none;
    object-fit: cover;
  }
  .chapter__photo--main {
    left: calc(51 * var(--p));
    width: calc(265 * var(--p));
    height: calc(331 * var(--p));
    z-index: 3;
    box-shadow: calc(16 * var(--p)) calc(4 * var(--p)) calc(40 * var(--p)) calc(-16 * var(--p)) rgba(30, 58, 47, 0.8);
  }
  .chapter__photo--next {
    left: calc(167 * var(--p));
    height: calc(280 * var(--p));
    width: auto;
    z-index: 1;
  }
  #the-change .chapter__photo--next { left: calc(180 * var(--p)); }
  #the-blindspot .chapter__photo--next { left: calc(115 * var(--p)); height: calc(281 * var(--p)); }
  #the-decision .chapter__photo--main { width: calc(339 * var(--p)); height: calc(330 * var(--p)); }

  /* ---------- 8. Chapters 05 and 06 artwork ---------- */
  .gap__graphic {
    left: calc(-80 * var(--p));
    right: auto;
    top: calc(232 * var(--p));
    width: calc(539 * var(--p));
    height: calc(597 * var(--p));
  }
  .gap__logo {
    left: calc(152 * var(--p));
    right: auto;
    top: calc(487 * var(--p));
    width: calc(76 * var(--p));
    height: calc(82 * var(--p));
  }
  .gap__label {
    font-size: calc(18 * var(--p));
    line-height: 1.5;
  }
  .gap__label--enterprise { left: calc(126 * var(--p)); top: calc(372 * var(--p)); }
  .gap__label--basic { left: calc(187 * var(--p)); top: calc(646 * var(--p)); }

  .start__graphic {
    left: calc(57 * var(--p));
    right: auto;
    top: calc(375 * var(--p));
    width: calc(275 * var(--p));
    height: calc(315 * var(--p));
  }
  /* js/phone.js moves this link into the copy block, so it follows the
     paragraph instead of sitting under the artwork */
  /* Press feedback, as on the other underlined links */
  .start__next:active { color: var(--brand-coral); transition: none; }

  /* Phone/Link, 18 underlined, 27 below the body text (Figma 242:3475) */
  .start__next {
    position: static;
    align-self: flex-start;
    margin-top: calc(7 * var(--p));    /* on top of the copy block's 20 gap */
    font-size: calc(18 * var(--p));
    line-height: 1.3;
    text-box: normal;
  }
  .start__next::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: max(44px, 100%);
    transform: translateY(-50%);
  }

  /* ---------- 9. Banner toggle (the coral diamond on the banner's edge) ---------- */

  /* Figma "Next Button" (265:4445): a 35.355 square turned 45deg with a 3
     cream ring, so the diamond measures 50 across, centred on the banner's
     bottom edge at x 343. */
  .banner-toggle {
    position: absolute;
    right: calc(22 * var(--p));
    top: calc(176 * var(--p));
    z-index: 21;
    width: calc(50 * var(--p));
    height: calc(50 * var(--p));
    padding: 0;
    border: 0;
    background: none;
    color: var(--bg-cream);
    cursor: pointer;
    transition: top 0.5s var(--ease-out, ease);
  }
  /* One diamond for both buttons. Figma's "Next Button" is a 35.355 square
     turned 45deg inside a 50 box with a 3 ring, and the ring and arrow take
     the button's own colour (cream on the banner, sand on the founders).
     Both selectors share this rule so the two can never drift apart. */
  .banner-toggle::before,
  .founders__next::before {
    content: "";
    position: absolute;
    left: calc(7.32 * var(--p));
    top: calc(7.32 * var(--p));
    width: calc(35.355 * var(--p));
    height: calc(35.355 * var(--p));
    background: var(--brand-coral);
    border: calc(3 * var(--p)) solid currentColor;
    background-clip: padding-box;
    transform: rotate(45deg);
  }
  .banner-toggle::after {                 /* 44px tap area */
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }
  .banner-toggle svg,
  .founders__next svg {
    position: absolute;
    left: calc(16.67 * var(--p));
    top: calc(17.86 * var(--p));
    width: calc(16.67 * var(--p));
    height: calc(14.29 * var(--p));
    overflow: visible;
  }
  .banner-toggle svg {
    transform: rotate(90deg);             /* points down: tap to open */
    transform-origin: center;
    transition: transform 0.35s var(--ease-out, ease);
  }
  body[data-banner="open"] .banner-toggle svg { transform: rotate(-90deg); }   /* points up: tap to close */
  body[data-banner="open"] .banner-toggle { top: calc(292 * var(--p)); }

  /* ---------- 10. Footer panel ---------- */
  .chapter--footer { padding: 0; }
  .page-landing .site-footer {
    position: absolute;
    top: calc(124 * var(--p));
  }
  .site-footer {
    position: relative;
    left: calc(20 * var(--p));
    display: block;
    width: calc(350 * var(--p));
    height: auto;
    margin: 0;
    background: var(--brand-green);
  }
  .footer__main {
    width: 100%;
    height: calc(190 * var(--p));
    border-right: 0;
    border-bottom: 1px solid var(--bg-sand);
  }
  .footer__slogan {
    left: calc(29 * var(--p));
    top: calc(18 * var(--p));
    font-size: calc(24 * var(--p));
    line-height: 1.3;
  }
  .footer__address {
    left: calc(29 * var(--p));
    top: calc(79 * var(--p));
    width: calc(266 * var(--p));
    font-size: calc(14 * var(--p));
    line-height: 1.5;
  }
  .footer__legal {
    left: calc(30 * var(--p));
    top: calc(587 * var(--p));
    z-index: 1;                          /* it belongs to .footer__main, but sits
                                            over .footer__side, which would
                                            otherwise paint on top and swallow
                                            the Privacy Policy tap */
    font-size: calc(12 * var(--p));
    line-height: 1.4;
  }
  .footer__side { height: calc(440 * var(--p)); }
  .footer__logo { left: calc(30 * var(--p)); top: calc(25 * var(--p)); }
  .footer__logo img { width: calc(120 * var(--p)); height: calc(29.2 * var(--p)); }
  .footer__links {
    left: calc(30 * var(--p));
    top: calc(89 * var(--p));
    gap: calc(20 * var(--p));
  }
  .footer__links a {
    position: relative;
    height: calc(34 * var(--p));
    padding: 0 calc(20 * var(--p));
    border-radius: calc(50 * var(--p));
    font-size: calc(18 * var(--p));      /* Phone/Link */
    line-height: 1.5;
  }
  .footer__links a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }
  /* Contact Us lives in the menu on phone. Hiding the item, not just the
     link, so it stops contributing a gap to the column. */
  .footer__links li:has(.footer__contact) { display: none; }
  .footer__links .footer__contact { display: none; }
  .footer__credit {
    left: calc(30 * var(--p));
    top: calc(355 * var(--p));
    gap: calc(10 * var(--p));
    font-size: calc(14 * var(--p));
  }
  .footer__credit img { width: calc(44 * var(--p)); height: calc(26.5 * var(--p)); }
  .footer__linkedin {
    right: calc(26 * var(--p));
    top: calc(356 * var(--p));
    width: calc(25 * var(--p));
    height: calc(25 * var(--p));
  }


  /* Small links (logo, Spring, LinkedIn, Privacy Policy) keep a 44px tap area */
  /* only the ones that are not already positioned need an anchor —
     nav__logo, footer__logo and footer__linkedin are absolute, and making
     them relative knocks them out of place */
  .footer__spring,
  .footer__legal a { position: relative; }
  .nav__logo::after,
  .footer__logo::after,
  .footer__spring::after,
  .footer__linkedin::after,
  .footer__legal a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  /* These two are positioned by the footer layout above; nothing later in
     this file may knock them out of place (an enormous LinkedIn ring was the
     symptom when it did). */
  .footer__linkedin,
  .footer__logo { position: absolute; }
  .footer__linkedin img { width: 100%; height: 100%; }

  /* ---------- 11. Full-screen menu ---------- */
  .phone-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--brand-green);
    color: var(--bg-cream);
    padding: 0 calc(20 * var(--p));
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .phone-menu[hidden] { display: none; }
  .phone-menu.is-open { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .phone-menu { transition: none; }
  }
  .phone-menu__head {
    position: relative;
    height: calc(190 * var(--p));
    border-bottom: 1px solid var(--bg-cream);
  }
  .phone-menu__logo {
    position: absolute;
    left: 0;
    top: calc(27 * var(--p));
    width: calc(120 * var(--p));
    height: calc(29.2 * var(--p));
  }
  .phone-menu__close {
    position: absolute;
    right: calc(-5 * var(--p));
    top: calc(20 * var(--p));
    width: max(44px, calc(44 * var(--p)));
    height: max(44px, calc(44 * var(--p)));
    border: 0;
    background: none;
    cursor: pointer;
  }
  .phone-menu__close::before,
  .phone-menu__close::after {
    content: "";
    position: absolute;
    left: calc(13 * var(--p));
    top: calc(21 * var(--p));
    width: calc(18 * var(--p));
    height: calc(2 * var(--p));
    background: var(--bg-cream);
  }
  .phone-menu__close::before { transform: rotate(45deg); }
  .phone-menu__close::after { transform: rotate(-45deg); }
  .phone-menu__slogan {
    position: absolute;
    left: 0;
    top: calc(118 * var(--p));
    margin: 0;
    font-size: calc(24 * var(--p));
    line-height: 1.3;
    color: var(--bg-sand);
  }
  .phone-menu__slogan strong { font-weight: 700; }
  .phone-menu__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(20 * var(--p));
    margin: calc(42 * var(--p)) 0 0;
    padding: 0;
    list-style: none;
  }
  .phone-menu__links a {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(34 * var(--p));
    padding: 0 calc(20 * var(--p));
    border: 1px solid var(--bg-cream);
    border-radius: calc(50 * var(--p));
    color: var(--bg-cream);
    font-size: calc(18 * var(--p));      /* Phone/Link */
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
  }
  .phone-menu__links a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(44px, 100%); transform: translateY(-50%); }
  .phone-menu__links .phone-menu__contact {
    background: var(--bg-cream);
    color: var(--brand-green);
  }
  body.menu-open { overflow: hidden; }

  @media (prefers-reduced-motion: reduce) {
    main, .banner, .next-button { transition: none; }
  }

  /* ---------- 12. Motion ---------- */
  @media (prefers-reduced-motion: no-preference) {
    :root { --rise: calc(24 * var(--p)); }

    /* The story moves sideways here, so the copy arrives from the side it is
       travelling from instead of rising from below. */
    .js .hero__title,
    .js .hero__scroll,
    .js .chapter__title,
    .js .chapter__body,
    .js .gap__label,
    .js .start__next {
      transform: translateX(calc(var(--rise) * var(--dir)));
    }
    .js .is-active .hero__title,
    .js .is-active .hero__scroll,
    .js .is-active .chapter__title,
    .js .is-active .chapter__body,
    .js .is-active .gap__label,
    .js .is-active .start__next { transform: none; }
    html.js body .is-exiting .hero__title,
    html.js body .is-exiting .hero__scroll,
    html.js body .is-exiting .chapter__title,
    html.js body .is-exiting .chapter__body,
    html.js body .is-exiting .gap__label,
    html.js body .is-exiting .start__next {
      transform: translateX(calc(var(--rise) * var(--dir) * -1));
    }

    .js .hero__map { opacity: 0; }
    .js .is-active .hero__map { opacity: 1; }

    /* the chapter's photo settles into place and the next one slides in
       behind it, the way the desktop cards move */
    .js .chapter__photo--main {
      opacity: 0;
      transform: translateX(calc(40 * var(--p)));
      transition: opacity 0.5s ease, transform 0.9s var(--ease-out);
    }
    .js .is-active .chapter__photo--main { opacity: 1; transform: none; transition-delay: 0.15s; }
    .js .chapter__photo--next {
      opacity: 0;
      transform: translateX(calc(70 * var(--p)));
      transition: opacity 0.6s ease 0.25s, transform 0.9s var(--ease-out) 0.2s;
    }
    .js .is-active .chapter__photo--next { opacity: 1; transform: none; }


  }
}

/* The hamburger, the menu and the banner toggle only exist on the phone layout */
@media (min-width: 701px) {
  .nav__menu,
  .phone-menu,
  .banner-toggle { display: none !important; }
}