/* The inner pages. Words rise on the scroll with the same travel and distance as the close chapter's. */
html { interpolate-size: allow-keywords; }

.topbar-nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.topbar-menu nav a[aria-current] { font-weight: 700; }
.room-copy h2 a { text-decoration: none; }
.room-copy h2 a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; }

/* First screens */
.head { display: grid; min-height: 100svh; padding-block: calc(var(--bar-h) + 16px) var(--margin); }
.head h1, .split h1 { font-weight: 600; }
.head h1 { font-size: var(--type-giant); }
.head h1 span, .split h1 span { display: block; white-space: nowrap; }
.head-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: stretch; overflow-x: clip; }
.head-text { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 30px); }
.head-text > p { max-width: 30em; font-size: var(--body-big); font-weight: 500; line-height: 1.4; }

/* Services */
.svc-head { grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
.svc-title { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 5vw, 80px); }
.svc-title p { max-width: 24em; font-size: var(--body-big); font-weight: 500; line-height: 1.4; }
.svc-index { display: grid; align-content: end; gap: clamp(6px, 1.5vh, 16px); }
.svc-index a { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 2px clamp(24px, 5vw, 80px); align-items: baseline; text-decoration: none; }
.svc-index b { font-size: var(--type-big); line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; white-space: nowrap; }
.svc-index span { color: var(--ink-2); font-size: var(--body-big); }
.svc-index a:hover b { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; }

.rail { position: sticky; top: var(--bar-h); z-index: 5; display: flex; gap: clamp(16px, 2.6vw, 40px); padding-block: 12px; background: var(--ground); overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail a { flex: none; color: var(--ink-2); font-size: 16px; font-weight: 500; text-decoration: none; }
.rail a:hover, .rail a[aria-current] { color: var(--ink); }
.rail a[aria-current] { font-weight: 700; }

.svc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4.4vw, 72px); padding-inline: var(--margin); scroll-margin-top: calc(var(--bar-h) + 52px); }
.svc + .svc { margin-top: clamp(64px, 12vh, 140px); }
.svc-panel { position: sticky; top: calc(var(--bar-h) + 52px); display: grid; place-items: center; height: calc(100svh - var(--bar-h) - 52px - var(--margin)); background: var(--ground-2); overflow: clip; perspective: 1400px; }
.svc-screen { position: relative; width: 82%; height: auto; border-radius: 10px; }
.svc-copy { display: grid; gap: clamp(20px, 3.4vh, 36px); align-content: start; justify-items: start; padding-block: clamp(4px, 2vh, 20px); }
.svc-line { font-size: var(--type-mid); line-height: 1.12; letter-spacing: -0.025em; font-weight: 500; }
.svc-text, .svc-why p { font-size: var(--body-big); line-height: 1.45; }
.svc-lists { display: grid; gap: clamp(20px, 3.4vh, 36px); }
.svc-copy h3 { margin-bottom: 8px; font-size: var(--body-big); letter-spacing: -0.015em; }
.svc-lists li { padding-block: 3px; }
.svc-lists li { color: var(--ink-2); }

/* Products */
/* Three real phones, the middle one in front. */
.head-phones { position: relative; min-height: 0; }
.head-phones img { position: absolute; left: 22%; top: 50%; width: auto; height: 68%; max-width: none; translate: -50% -50%; border-radius: clamp(14px, 1.8vw, 28px); }
.head-phones img:nth-child(2) { z-index: 1; left: 50%; height: 88%; box-shadow: 0 0 0 6px var(--ground); }
.head-phones img:nth-child(3) { left: 78%; }

.catalogue { padding-block: clamp(20px, 3vh, 32px) clamp(64px, 10vh, 120px); }
.filters { position: sticky; top: var(--bar-h); z-index: 5; display: flex; gap: 8px; margin-inline: calc(var(--margin) * -1); padding: 10px var(--margin); background: var(--ground); overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px; background: var(--ground-2); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.filters button[aria-pressed='true'] { background: var(--ink); color: var(--ground); }
.apps-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(32px, 5vh, 56px) clamp(12px, 1.8vw, 28px); margin-top: 16px; }
.app { --span: 6; grid-column: span var(--span); min-width: 0; }
.app:nth-child(-n + 3) { --span: 4; }
.app[hidden] { display: none; }
.app a { display: grid; gap: 4px; text-decoration: none; }
.app-shot { position: relative; display: block; margin-bottom: 12px; aspect-ratio: 16 / 10; background: var(--ground-2); overflow: clip; }
.app-admin { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: scale 0.7s var(--ease); }
.app-phone { position: absolute; right: 5%; top: 12%; width: 23%; height: auto; border-radius: clamp(8px, 1vw, 16px); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5); transition: translate 0.7s var(--ease); }
.app a:hover .app-admin { scale: 1.03; }
.app a:hover .app-phone { translate: 0 -3%; }
.app h3 { font-size: var(--type-mid); }
.app-line { max-width: 34em; color: var(--ink-2); }

.inside { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4.4vw, 72px); padding-block: clamp(40px, 8vh, 100px); }
.inside-shot { position: sticky; top: calc(var(--bar-h) + 16px); height: calc(100svh - var(--bar-h) - 16px - var(--margin)); overflow: clip; }
.inside-shot .still { opacity: 0; transition: opacity 0.6s var(--ease); }
.inside-shot .still.on { opacity: 1; }
.inside-copy { display: grid; gap: clamp(32px, 7vh, 80px); }
.inside-parts { display: grid; gap: clamp(72px, 20svh, 200px); padding-bottom: 36svh; }
.inside-parts h3 { font-size: var(--type-big); line-height: 1.06; letter-spacing: -0.03em; }
.inside-parts p { margin-top: 10px; font-size: var(--body-big); }

.skin { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 80px); min-height: 100svh; padding-block: calc(var(--bar-h) + 16px) var(--margin); }
.skin-text { display: grid; gap: clamp(20px, 4vh, 36px); }
.skin h2 { font-size: var(--type-giant); }

/* About */
.about-lead { width: min(46vw, 660px); }
.beliefs { position: relative; z-index: 1; padding-block: clamp(32px, 6vh, 72px); }
/* The words arrive over the dust as it breaks up. */
.tier-full .beliefs { margin-top: -26vh; }
.beliefs-intro { max-width: 22em; font-size: var(--type-mid); line-height: 1.16; letter-spacing: -0.025em; font-weight: 500; color: var(--ink-2); }
.belief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px clamp(24px, 5vw, 80px); align-items: start; margin-top: clamp(56px, 12vh, 130px); scroll-margin-top: calc(var(--bar-h) + 24px); }
.belief h2 { font-size: var(--type-big); }
.belief p { font-size: var(--type-mid); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; }

.story { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4.4vw, 72px); padding-block: clamp(40px, 8vh, 100px); scroll-margin-top: var(--bar-h); }
.story-shot { position: sticky; top: calc(var(--bar-h) + 16px); height: calc(100svh - var(--bar-h) - 16px - var(--margin)); overflow: clip; }
.story-copy { display: grid; gap: clamp(18px, 3vh, 30px); align-content: start; }
.story-copy p { font-size: var(--body-big); line-height: 1.5; }
.story-copy .story-title { font-size: var(--type-mid); line-height: 1.14; letter-spacing: -0.025em; font-weight: 500; }

.values { padding-block: clamp(48px, 9vh, 110px); scroll-margin-top: var(--bar-h); }
.values-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 5vw, 80px); align-items: end; }
.values-head p { font-size: var(--body-big); line-height: 1.4; }
.values-list { display: grid; gap: clamp(20px, 3.6vh, 40px); margin-top: clamp(32px, 7vh, 80px); }
.values-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px clamp(24px, 5vw, 80px); align-items: baseline; }
.values-list h3 { font-size: var(--type-big); line-height: 1.06; letter-spacing: -0.03em; }
.values-list p { font-size: var(--body-big); line-height: 1.4; }

/* Contact */
.reach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-block: calc(var(--bar-h) + clamp(16px, 4vh, 48px)) clamp(40px, 8vh, 96px); }
.reach-side { position: sticky; top: calc(var(--bar-h) + 16px); align-self: start; display: grid; gap: 18px; }
.reach-side h1 { font-size: var(--type-big); font-weight: 600; }
.reach-side > p { font-size: var(--body-big); }
.reach-list { display: grid; gap: 18px; margin-top: clamp(8px, 2vh, 24px); }
.reach-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.reach-text { display: grid; min-width: 0; }
.reach-text b { font-size: 15px; font-weight: 600; }
.reach-text a, .reach-text span { overflow-wrap: anywhere; text-decoration: none; color: var(--ink-2); }
.reach-text a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.reach-copy { flex: none; min-width: 72px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--ground-2); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }

.enquiry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding: clamp(16px, 2.4vw, 36px); background: var(--ground-2); }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field:has(select), .field-wide { grid-column: 1 / -1; }
.field label { font-size: 15px; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--ground); color: var(--ink); font: inherit; }
.field textarea { min-height: 136px; resize: vertical; }
.field ::placeholder { color: var(--ink-2); opacity: 1; }
.field [aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--ink); }
.field-error { font-size: 14px; font-weight: 600; }
.field-error:empty { display: none; }
.pick { position: relative; display: block; }
.pick select { appearance: none; padding-right: 44px; cursor: pointer; }
.pick::after { content: ''; position: absolute; right: 19px; top: 21px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; pointer-events: none; }
.send { position: relative; grid-column: 1 / -1; min-height: 56px; border: 0; border-radius: 999px; background: var(--ground-3); color: #fff; font: inherit; font-weight: 600; cursor: pointer; overflow: clip; }
.send::before { content: ''; position: absolute; inset: 0; background: var(--ink); transform-origin: left; scale: var(--fill, 0) 1; transition: scale 0.6s var(--ease); }
.send span { position: relative; mix-blend-mode: difference; }
.send-note { grid-column: 1 / -1; font-weight: 600; text-align: center; }
.send-note:empty { display: none; }

/* The Contact page has its details above, so its footer needs no room for them. */
.close-bare { padding-top: 40px; }
.tier-full .close-bare { grid-template-rows: auto minmax(0, 1fr); min-height: 100svh; padding-top: calc(var(--bar-h) + 40px); }

/* FAQ, Terms and Privacy */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 80px); min-height: 100svh; padding-block: calc(var(--bar-h) + clamp(16px, 4vh, 48px)) clamp(40px, 8vh, 96px); }
.split-side { position: sticky; top: calc(var(--bar-h) + 16px); align-self: start; display: flex; flex-direction: column; gap: 16px; max-height: calc(100svh - var(--bar-h) - 32px); }
.split h1 { font-size: var(--type-big); }
.split-side > p { font-size: var(--body-big); line-height: 1.4; }
.answers { display: grid; gap: clamp(8px, 1.6vh, 18px); align-content: start; }
.answers summary { display: flex; justify-content: space-between; gap: 20px; padding-block: 10px; font-size: var(--type-mid); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; cursor: pointer; list-style: none; }
.answers summary::-webkit-details-marker { display: none; }
.answers summary::after { content: '+'; flex: none; align-self: flex-start; font-weight: 400; transition: rotate 0.5s var(--ease); }
.answers details[open] summary::after { rotate: 45deg; }
.answers p { max-width: 38em; padding-bottom: 16px; font-size: var(--body-big); line-height: 1.45; }
.answers details::details-content { block-size: 0; overflow: clip; transition: block-size 0.5s var(--ease), content-visibility 0.5s allow-discrete; }
.answers details[open]::details-content { block-size: auto; }

.toc { display: grid; gap: 4px; min-height: 0; margin-top: 8px; overflow-y: auto; scrollbar-width: none; }
.toc a { color: var(--ink-2); font-size: 15px; line-height: 1.3; text-decoration: none; }
.toc a:hover, .toc a[aria-current] { color: var(--ink); }
.toc a[aria-current] { font-weight: 700; }
.legal-text { display: grid; gap: clamp(36px, 6vh, 64px); align-content: start; max-width: 44em; }
.legal-text section { display: grid; gap: 12px; scroll-margin-top: calc(var(--bar-h) + 16px); }
.legal-text h2 { font-size: var(--type-mid); line-height: 1.1; letter-spacing: -0.025em; }
.legal-text h3 { padding-top: 8px; font-size: var(--body-big); letter-spacing: -0.015em; }
.legal-text ul { display: grid; gap: 6px; padding-left: 1.2em; list-style: disc; }
.legal-table { overflow-x: auto; }
.legal-text table { width: 100%; border-collapse: collapse; font-size: 16px; }
.legal-text th, .legal-text td { padding: 10px 14px; text-align: left; vertical-align: top; }
.legal-text th { background: var(--ground-2); }
.legal-text tbody tr:nth-child(even) { background: var(--ground-2); }
.legal-text dl { display: grid; gap: 10px; margin: 0; }
.legal-text dt { font-weight: 600; }
.legal-text dd { margin: 0; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .answers details::details-content, .send::before, .app-admin, .app-phone { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .app-in { animation: app-in 0.5s var(--ease) backwards; }
  @keyframes app-in { from { opacity: 0; translate: 0 16px; } }

  @supports (animation-timeline: view()) {
    @keyframes rise { from { opacity: 0; translate: 0 26px; } }
    @keyframes settle { from { transform: rotateY(-20deg) rotateX(8deg) scale(0.8); opacity: 0.35; } }
    @keyframes shot { from { scale: 1.14; translate: 0 -4%; } to { scale: 1.02; translate: 0 4%; } }

    [data-rise] { animation: rise ease-in-out both; animation-timeline: view(); animation-range: cover 4vh cover 28vh; }
    .svc { view-timeline: --service block; }
    .svc-screen { animation: settle ease-out both; animation-timeline: --service; animation-range: cover 6vh cover 80vh; }
    .svc-panel .still img, .inside-shot .still img, .story-shot .still img { animation: shot linear both; animation-timeline: --shot; }
    .svc-panel, .inside-shot, .story-shot { view-timeline: --shot block; }
  }
}

@media (max-width: 760px) {
  .head { min-height: 0; padding-bottom: 40px; }
  .svc-title { display: grid; }
  .svc-index a { grid-template-columns: minmax(0, 1fr); }
  .head-phones { height: 100vw; }
  .inside { grid-template-columns: minmax(0, 1fr); }
  .inside-shot { z-index: 4; height: 58vw; margin-inline: calc(var(--margin) * -1); }
  .inside-parts { gap: 44svh; padding-bottom: 30svh; }
  .head-split, .skin, .belief, .story, .values-head, .values-list li, .reach, .split, .svc { grid-template-columns: minmax(0, 1fr); }
  .svc { gap: 20px; }
  .svc-panel { position: relative; top: auto; height: auto; aspect-ratio: 16 / 12; }
  .app, .app:nth-child(-n + 3) { grid-column: 1 / -1; }
  .skin { min-height: 0; padding-top: 32px; }
  .about-lead { width: auto; }
  .hero:has(.about-lead) h1 { font-size: var(--type-giant); }
  .story-shot { position: relative; top: auto; height: auto; aspect-ratio: 16 / 12; }
  .reach-side, .split-side { position: static; max-height: none; }
  .enquiry { grid-template-columns: minmax(0, 1fr); margin-inline: calc(var(--margin) * -1); padding: 20px var(--margin); }
  .split { min-height: 0; }
  .toc { max-height: 240px; }
}

/* The page for an address that does not exist. */
.lost { display: grid; align-content: center; justify-items: start; gap: clamp(18px, 3vh, 30px); min-height: 100svh; padding-block: calc(var(--bar-h) + 24px) 40px; }
.lost-code { font-size: clamp(96px, 15vw, 220px); line-height: 0.9; letter-spacing: -0.04em; font-weight: 700; }
.lost h1 { font-size: var(--type-mid); line-height: 1.16; letter-spacing: -0.025em; font-weight: 500; }