/* My Wealth Key — phones, tablets and everything in between.
   Loaded after site.css; only layout and touch behaviour live here, colours
   still come from the site.css tokens so both themes keep working.
   Breakpoints: 1180 portrait tablets · 1080 menu · 880 phones/small tablets
   · 680 shelf carousel · 560 phones · 380 small phones · short landscape. */

/* ── notches and home bars (viewport-fit=cover) ─────────────────── */
:root {
  --gutter: max(clamp(16px, 5vw, 72px), env(safe-area-inset-left), env(safe-area-inset-right));
  --safe-b: env(safe-area-inset-bottom, 0px);
}
.site-footer { padding-bottom: calc(30px + var(--safe-b)); }

/* touch: no grey flash, no 300 ms wait, no accidental text selection on controls */
a, button, summary, label, input, textarea, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: none) {
  .btn:active { transform: scale(0.97); transition-duration: 0.1s; }
  .link-arrow:active { opacity: 0.7; }
}

/* ── header + full-screen menu ──────────────────────────────────── */
@media (max-width: 1080px) {
  .site-header { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 12px; }
  .site-header.solid, .inner .site-header { background: rgba(var(--bg-rgb), 0.97); }
  .nav-toggle { position: relative; z-index: 2; display: grid; place-content: center; width: 44px; height: 44px; }
  .nav-toggle span { margin: 3.5px auto; }
  .menu-open .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .menu-open .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .theme-toggle { z-index: 2; width: 44px; height: 44px; }
  .brand { position: relative; z-index: 2; }

  /* the menu becomes a quiet full page under the header bar */
  .nav-links {
    position: fixed; inset: 0; z-index: -1; margin: 0;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: calc(84px + env(safe-area-inset-top)) var(--gutter) calc(28px + var(--safe-b));
    border: 0; border-radius: 0; box-shadow: none; background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: none; clip-path: inset(0 0 100% 0);
    transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease, visibility 0s linear 0.6s;
  }
  .menu-open .nav-links { opacity: 1; visibility: visible; clip-path: inset(0); transition: clip-path 0.65s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.2s ease, visibility 0s; }
  .nav-links a {
    display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--line);
    font-family: var(--serif); font-size: clamp(30px, 8.4vw, 46px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink);
    opacity: 0; transform: translateY(26px); transition: opacity 0.35s ease, transform 0.35s ease, color 0.25s;
  }
  .nav-links a:not(.btn)::before {
    content: counter(nav, decimal-leading-zero); counter-increment: nav; order: 2; margin-left: auto;
    font-family: var(--serif); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--gold);
  }
  .nav-links { counter-reset: nav; }
  .nav-links a:hover { background: none; color: var(--green); }
  .nav-links a[aria-current="page"] { color: var(--green); }
  .nav-links a[aria-current="page"]::after { display: block; content: ""; position: static; order: 1; width: 7px; height: 7px; margin-bottom: 0.32em; border-radius: 50%; background: var(--gold); transform: none; }
  .nav-links a.btn {
    justify-content: center; margin-top: 28px; padding: 17px 24px; border-bottom: 0; border-radius: 100px;
    font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: 0.01em; color: #f6f3ea;
  }
  .nav-extra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: auto; padding-top: 32px; opacity: 0; transition: opacity 0.4s ease; }
  .nav-extra a { opacity: 1; transform: none; padding: 10px 0; border: 0; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
  .nav-extra a::before { display: none; }
  .menu-open .nav-links a, .menu-open .nav-extra { opacity: 1; transform: none; }
  .menu-open .nav-links a { transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s; }
  .menu-open .nav-links > a:nth-child(1) { transition-delay: 0.16s; }
  .menu-open .nav-links > a:nth-child(2) { transition-delay: 0.2s; }
  .menu-open .nav-links > a:nth-child(3) { transition-delay: 0.24s; }
  .menu-open .nav-links > a:nth-child(4) { transition-delay: 0.28s; }
  .menu-open .nav-links > a:nth-child(5) { transition-delay: 0.32s; }
  .menu-open .nav-links > a:nth-child(6) { transition-delay: 0.36s; }
  .menu-open .nav-links > a:nth-child(7) { transition-delay: 0.4s; }
  .menu-open .nav-extra { transition-delay: 0.45s; }
  .menu-open { overflow: hidden; }
  .menu-open .site-header { background: var(--bg); box-shadow: none; }
}
@media (min-width: 1081px) { .nav-extra { display: none; } }
@media (max-width: 380px) {
  .brand img { width: 34px; }
  .brand .word { font-size: 16.5px; }
  .brand .tag { letter-spacing: 0.24em; }
  .site-header { gap: 10px; }
  .theme-toggle, .nav-toggle { width: 40px; height: 40px; }
}

/* ── film: portrait tablets (881–1180) take the stacked layout ──── */
@media (min-width: 881px) and (max-width: 1180px) and (orientation: portrait) {
  .film-shade { background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.8) 0%, rgba(var(--bg-rgb), 0) 34%), linear-gradient(0deg, rgba(var(--bg-rgb), 0.8) 0%, rgba(var(--bg-rgb), 0) 30%); }
  .cap-left { top: clamp(96px, 9vh, 130px); right: var(--gutter); max-width: none; }
  .cap-left .display { max-width: 20ch; font-size: clamp(48px, 6.4vw, 72px); }
  .cap-left .lead { max-width: 56ch; font-size: 18px; }
  .cap-bottom-left { bottom: calc(4vh + var(--safe-b)); }
  .finale { left: 0; right: 0; width: min(620px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
  .lockup-word { font-size: clamp(56px, 7vw, 76px); }
  .finale .script { font-size: clamp(34px, 4.2vw, 44px); }
}

/* ── film: phones and small tablets ─────────────────────────────── */
@media (max-width: 880px) {
  .cap-left { top: calc(78px + env(safe-area-inset-top)); }
  .cap .kicker { margin-bottom: 12px; font-size: 10.5px; letter-spacing: 0.24em; }
  /* chapter copy keeps its one-line explanation, clamped to three lines */
  .cap-top .lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 40ch; font-size: 14.5px; line-height: 1.55; margin-top: 10px; }
  .cap-bottom-left, .cap-bottom-center { bottom: calc(14px + var(--safe-b)); }
  .tag i { width: 7px; height: 7px; }

  /* chapter dots: the desktop rail, folded into a slim vertical pager */
  .rail { display: flex; flex-direction: column; gap: 10px; top: 50%; bottom: auto; right: max(8px, env(safe-area-inset-right)); translate: 0 -50%; }
  .rail li span { display: none; }
  .rail li i { width: 6px; height: 6px; border-width: 1.2px; }
  .rail li.on i { height: 22px; border-radius: 4px; box-shadow: none; }
  .rail li i { transition: height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.4s, border-color 0.4s; }
}
@media (min-width: 600px) and (max-width: 880px) {
  .cap-left .display { font-size: clamp(44px, 7vw, 60px); max-width: 18ch; }
  .cap-left .lead, .cap-top .lead { font-size: 16.5px; max-width: 48ch; }
  .cap-bottom-left { left: var(--gutter); right: var(--gutter); }
  .nav-card, .corpus-card { width: min(100%, 560px); }
  .film-cards { max-width: 560px; }
  .nav-chart { max-height: 130px; }
  .tag { font-size: 13px; padding: 6px 12px 6px 10px; }
}
/* phones shorter than ~700px: the title and its card need the room */
@media (max-width: 599px) and (max-height: 700px) {
  .cap-top .lead { -webkit-line-clamp: 2; font-size: 13.5px; }
  .cap-left .display { font-size: clamp(30px, 8.6vw, 40px); }
  .mini-card .art { height: 52px; }
  .corpus-card .value { font-size: 38px; }
  .nav-chart { max-height: 74px; }
}
@media (max-width: 599px) and (max-height: 620px) {
  .cap-top .lead, .cap-left:not(.cap-top) .lead { display: none; }
  .nav-card .legend { display: none; }
}
/* the finale's logo lockup stacks centred above the tree */
@media (max-width: 880px) {
  .finale { left: 0; right: 0; width: min(560px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
  .finale .kicker { margin-bottom: 12px; }
  .lockup-word { font-size: clamp(34px, 9.6vw, 64px); }
  .lockup-rule { gap: 12px; margin-top: 12px; }
  .lockup-tag { font-size: clamp(11px, 2.9vw, 15px); letter-spacing: 0.28em; margin-right: -0.28em; }
  .lockup-icons { margin-top: 16px; }
  .lockup-icons svg { width: 34px; height: 34px; }
  .lockup-icons span { font-size: 10.5px; letter-spacing: 0.05em; }
  .finale .lockup-rule:has(.script) { margin-top: 14px; }
  .finale .script { font-size: clamp(22px, 6.2vw, 36px); }
  .finale .script .bar { margin: 0 6px; }
}
/* phones: the opening callouts already carry the service icons, so the tree keeps the room */
@media (max-width: 599px) {
  .finale .lockup-icons { display: none; }
  .finale .actions { margin-top: 18px; }
  .film-cards .mini-card { min-width: 0; }
}

/* ── film: phones on their side (short landscape) ───────────────── */
@media (orientation: landscape) and (max-height: 520px) {
  .site-header { padding-top: 8px; padding-bottom: 8px; }
  .brand .tag { display: none; }
  .brand img { width: 32px; }
  .film { height: 620vh; }
  /* the camera frames the tree on the right, the copy takes the left */
  .film-shade { background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.82) 0%, rgba(var(--bg-rgb), 0.35) 46%, rgba(var(--bg-rgb), 0) 62%); }
  .cap-left { top: 64px; right: auto; left: var(--gutter); max-width: min(48vw, 460px); }
  .cap-left .display { font-size: clamp(24px, 4.1vw, 36px); line-height: 1.04; }
  .cap .kicker { margin-bottom: 8px; font-size: 10px; }
  .cap-left .lead, .cap-top .lead { display: none; }
  .cap-left .actions { margin-top: 14px; }
  .cap-left .btn { padding: 11px 20px; font-size: 14px; }
  .cap-bottom-left { left: var(--gutter); right: auto; bottom: calc(10px + var(--safe-b)); width: min(44vw, 400px); }
  .cap-bottom-left:has(.film-cards) { display: none; }
  .nav-card { width: 100%; padding: 10px 14px 8px; }
  .nav-card header { margin-bottom: 2px; }
  .nav-chart { max-height: 72px; }
  .nav-card .legend { font-size: 10.5px; }
  .corpus-card { width: 100%; padding: 10px 14px; }
  .corpus-card .label { font-size: 14px; }
  .corpus-card .value { font-size: 34px; }
  .corpus-card .meta { margin: 0 0 8px; }
  .corpus-card .btn { padding: 9px 16px; font-size: 13px; }
  .finale { left: var(--gutter); right: auto; width: min(44vw, 400px); margin: 0; }
  .finale .kicker { margin-bottom: 6px; }
  .lockup-word { font-size: clamp(28px, 4.6vw, 40px); }
  .lockup-rule { margin-top: 8px; }
  .lockup-tag { font-size: 11px; }
  .finale .lockup-icons { display: none; }
  .finale .lockup-rule:has(.script) { margin-top: 8px; }
  .finale .script { font-size: clamp(20px, 3.2vw, 28px); }
  .finale .actions { margin-top: 12px; }
  .rail { display: none; }

  /* inner-page heroes side by side again */
  .page-hero:not(.compact) { grid-template-columns: 1fr 0.8fr; min-height: auto; padding-top: 80px; }
  .page-hero:not(.compact) .hero-3d { order: 0; height: 74vh; }
  .page-hero .display { font-size: clamp(32px, 5vw, 48px); }
  .page-hero .lead { font-size: 15px; }
  .nav-links { padding-top: 70px; }
  .nav-links a { padding: 10px 0; font-size: 28px; }
}

/* ── inner page heroes on phones: copy first in view, 3D as a header ── */
@media (max-width: 880px) and (orientation: portrait), (max-width: 599px) {
  .page-hero { padding-top: calc(88px + env(safe-area-inset-top)); gap: 8px; }
  .page-hero:not(.compact) .hero-3d { height: clamp(220px, 34vh, 360px); margin: 0 calc(-1 * var(--side)); }
  .page-hero:not(.compact) .hero-3d.has-lockup { height: clamp(400px, 62vh, 540px); }
  .hero-lockup { padding: 0 var(--side); }
  .page-hero .copy .actions { margin-top: 22px; }
  .page-hero.compact { padding-bottom: 0; }
  .page-hero.compact .display { font-size: clamp(40px, 11.5vw, 72px); }
}
@media (max-width: 599px) {
  .page-hero .copy .actions .btn { flex: 1 1 auto; justify-content: center; }
  .display { font-size: clamp(36px, 10.4vw, 52px); }
  .lead { font-size: 15.5px; }
}

/* ── editorial sections on small screens ────────────────────────── */
@media (max-width: 880px) {
  .section { padding-top: clamp(56px, 8vh, 88px); padding-bottom: clamp(56px, 8vh, 88px); }
  .ed-head { margin-bottom: clamp(36px, 6vh, 64px); }
  .statement { padding-top: clamp(80px, 12vh, 140px); }
  .statement-foot { margin-top: 44px; }
  .svc { padding: 28px 0; }
  .svc-go .arw { width: 42px; height: 42px; padding: 12px; }
  .proof { margin-top: 72px; }
  /* the sum reads as one line of three figures on tablets, stacked rows on phones */
  .proof-figs { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 18px; row-gap: 6px; }
  .proof-figs > div { display: contents; }
  .proof-figs .fig { grid-column: 1; font-size: clamp(52px, 15vw, 96px); }
  .proof-figs p { grid-column: 2; margin: 0; }
  .proof-figs .op { display: none; }
  .proof-figs > .total { display: block; grid-column: 1 / -1; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--on-dark-line); }
  .proof-figs > .total p { margin-top: 10px; }
  .cta-band { padding-top: clamp(80px, 12vh, 140px); }
  .cta-row .actions { gap: 18px 28px; }
  .signature .script { white-space: nowrap; font-size: clamp(28px, 8.6vw, 72px); }
  .member { column-gap: 18px; }
  .avatar { width: 72px; height: 72px; font-size: 26px; }
}
/* portrait tablets: three short columns read better than one very wide one */
@media (min-width: 600px) and (max-width: 860px) {
  .process, .portfolio { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; }
  .process-n { font-size: 72px; }
  .process h3, .pcard h3 { font-size: 24px; }
  .process p, .pcard p { font-size: 14.5px; }
  .pcard .body { padding-top: 16px; }
}
@media (max-width: 599px) {
  .ed-h { font-size: clamp(36px, 10.6vw, 56px); }
  .statement-text { font-size: clamp(42px, 12.4vw, 72px); }
  .cta-h { font-size: clamp(44px, 13vw, 80px); }
  .cta-row .actions { width: 100%; }
  .cta-row .actions .btn { flex: 1 1 100%; justify-content: center; padding: 16px 24px; }
  .nl .form-row .btn { justify-self: stretch; justify-content: center; }
  .contact-form .btn { width: 100%; justify-content: center; }
  .process > li { padding-top: 26px; }
  .process-n { font-size: 64px; }
  .process h3 { margin-top: 16px; }
  .values { row-gap: 36px; }
  .val-item .ic { margin: 22px 0 14px; }
  .team { row-gap: 28px; }
  .map { height: 300px; margin-left: calc(-1 * var(--side)); margin-right: calc(-1 * var(--side)); border-radius: 0; }
  .info-row b { font-size: 18px; }
}

/* bigger tap targets wherever a finger lands (min 44px tall) */
@media (pointer: coarse) {
  .link-arrow { padding-top: 10px; padding-bottom: 10px; background-position: 0 calc(100% - 6px); }
  .link-arrow:hover { background-position: 100% calc(100% - 6px); }
  .footer-grid a { padding: 8px 0; margin-bottom: 0; }
  .footer-bottom a { display: inline-block; padding: 10px 0; }
  .sc-presets button { min-height: 44px; padding: 10px 18px; }
  .pf-clear { width: 36px; height: 36px; }
}

/* ── footer on phones ───────────────────────────────────────────── */
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .footer-grid > .foot-intro, .footer-grid > div:nth-child(4) { grid-column: 1 / -1 !important; }
  .footer-grid a { font-size: 14.5px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── product shelf: each group becomes a swipeable row on phones ── */
.pf-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
@media (min-width: 1081px) { .pf-tabs { -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 1080px) {
  .pf-bar { top: calc(68px + env(safe-area-inset-top)); }
  .pf-tabs { scroll-padding-inline: 16px; }
}
@media (max-width: 680px) {
  .pf-head .pf-search { margin-top: 6px; }
  .pf-bar { margin-bottom: 40px; }
  .pf-intro { row-gap: 22px; margin-bottom: 52px; }
  .pf-visual svg { max-width: 140px; }
  .pf-title { font-size: clamp(42px, 12vw, 64px); }
  .pf-group + .pf-group { margin-top: 48px; }
  .pf-group > header { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 12px; margin-bottom: 18px; padding-top: 18px; }
  .pf-group > header p { grid-column: 1 / -1; margin-top: 8px; }
  .pf-group > header::after {
    content: "Swipe \2192"; grid-row: 1; grid-column: 2; padding-bottom: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
    animation: pf-nudge 2.6s ease-in-out infinite;
  }
  .pf-group:not(:has(.pf-card:not([hidden]) ~ .pf-card:not([hidden]))) > header::after { display: none; }
  @keyframes pf-nudge { 0%, 55%, 100% { translate: 0 0; } 25% { translate: 5px 0; } }

  .pf-grid {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--side); scrollbar-width: none;
    margin: 0 calc(-1 * var(--side)); padding: 2px var(--side) 8px;
  }
  .pf-grid::-webkit-scrollbar { display: none; }
  .pf-card {
    flex: 0 0 min(80%, 330px); scroll-snap-align: start; min-height: 236px;
    padding: 20px 20px 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  }
  .pf-card::before { top: -1px; left: 12px; right: 12px; height: 2px; border-radius: 2px; }
  .pf-card:only-child { flex-basis: 100%; }
  .pf-card p { font-size: 14px; }
  .pf-risk { margin-left: 0; }
  .pf-meta { margin-top: 14px; }
  .pf-searching .pf-label { font-size: 30px; }
}

/* ── scroll focus: what hover does on desktop, scrolling does on touch ──
   site.js marks the row crossing the middle of the screen with .in-focus */
@media (hover: none) {
  .svc.in-focus::before { transform: scaleY(1); }
  .svc.in-focus .svc-name { transform: translateX(10px); }
  .svc.in-focus .svc-go { color: var(--ink); }
  .svc.in-focus .svc-go .arw { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: rotate(-45deg); }
  .pf-card.in-focus::before { transform: scaleX(1); }
  .pf-card.in-focus h5 { color: var(--accent); }
  .pcard.in-focus .visual svg { transform: scale(1.06); }
  .info-row.in-focus b { color: var(--green); }
  .val-item.in-focus .ic { color: var(--gold); transform: translateY(-4px); }
  .val-item .ic { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.4s; }
  .process > li.in-focus .process-n { color: var(--gold-bright); }
  .process-plain > li.in-focus .process-n { color: var(--gold); }
  .process-n { transition: color 0.7s ease; }
}

/* reveals travel less on small screens, so they never look like a lag */
@media (max-width: 880px) {
  [data-reveal] { transform: translate3d(0, 24px, 0); transition-duration: 0.9s, 1s; }
}

/* tiny screens (Galaxy Fold cover, 280–330px) */
@media (max-width: 340px) {
  :root { --gutter: 14px; }
  .brand .tag { display: none; }
  .pf-card { flex-basis: 86%; }
  .sc-presets button { padding: 10px 14px; }
  .corpus-card .value { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-links a, .nav-extra { transition: none !important; }
  .pf-group > header::after { animation: none; }
}

/* film callouts on phones: title only, slimmer */
@media (max-width: 599px) {
  /* title-only (compact) mode is chosen per callout by home.js from the room it has */
  .tag.callout { max-width: 150px; }
  .tag.callout b { font-size: 11.5px; }
}

/* ── phones + tablets: no scroll film ───────────────────────────────
   The scroll-driven story is for laptops and desktops (a mouse or trackpad and
   more than 1080px). Here the hero is one screen: the headline over the tree,
   which stays alive in place (leaves in a breeze, the key turning, golden motes;
   js/home.js). Same query as CALM in home.js. Callouts and the other chapters'
   copy are hidden so nothing covers the tree. */
@media (hover: none), (pointer: coarse), (max-width: 1080px) {
  .film { height: auto; }
  .film-stage { position: relative; }
  .film .cap:not(.cap-hero), .film .tag, .film .tag-lines, .film .rail, .film .scroll-cue { display: none; }
  .film .cap-hero { opacity: 1 !important; visibility: visible !important; --dy: 0px; }
  .film .cap-hero, .film .cap-hero * { pointer-events: auto; }
}