/* Homalabs inner pages, built in the direction's language: direction.css
   supplies the tokens, type, chrome and held phone; this file lays out the
   pages that are not one long film. Bold grounds, one big idea per section,
   the phone doing the explaining. */

.pg-s { position: relative; overflow: clip; padding: clamp(120px, 17vh, 190px) var(--m) clamp(90px, 13vh, 150px); }
.g-paper  { --fg: var(--ink);   --bg: var(--paper);  background: var(--paper);  color: var(--ink); }
.g-ink    { --fg: var(--paper); --bg: var(--ink);    background: var(--ink);    color: var(--paper); }
.g-violet { --fg: var(--ink);   --bg: var(--violet); background: var(--violet); color: var(--ink); }

/* rise in once, as the direction's copy does */
.rise { opacity: 0; translate: 0 26px; transition: opacity .7s var(--ease), translate .9s var(--ease); }
.rise.is-in { opacity: 1; translate: 0 0; }
.rise.d1 { transition-delay: .08s; } .rise.d2 { transition-delay: .16s; } .rise.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; translate: none; transition: none; } }

.pg-h1 { margin: clamp(18px, 3vh, 30px) 0 0; font-weight: 800; font-variation-settings: "wdth" 112;
  font-size: calc(var(--h) * 1.1); line-height: .95; letter-spacing: -0.035em; }
.pg-say { margin-top: clamp(18px, 3vh, 30px); max-width: 44ch; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; }
.pg-say p + p { margin-top: .5em; }

/* ---------------------------------------------------------------- contact */
/* The form on the left, the phone on the right writing the message as the
   form is filled: the studio's inbox is the object here. */
.ct { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 110px); align-items: start; }
.ct-phone { position: sticky; top: 12vh; height: min(76vh, 46vw); aspect-ratio: 629 / 1304; rotate: 2deg;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.22)) drop-shadow(0 6px 14px rgba(0,0,0,.12)); }
.ct-phone .ph-mail { opacity: 1; }
.ct-phone .pm-body span { white-space: pre-line; }
.ct-phone .pm-from { color: #8A8A8E; }

.form { margin-top: clamp(40px, 7vh, 72px); display: grid; gap: clamp(34px, 5.4vh, 54px); max-width: 760px; }
.q { display: grid; gap: 14px; border: 0; padding: 0; margin: 0; min-width: 0; }
.q > label, .q > legend { padding: 0; font-weight: 700; font-size: clamp(13px, .9vw, 14px); letter-spacing: .14em; text-transform: uppercase; }
.q input[type="text"], .q input[type="email"], .q textarea, .q select {
  width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1.5px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 0; background: transparent; color: inherit; font: inherit; font-weight: 500;
  font-size: clamp(20px, 1.7vw, 27px); letter-spacing: -0.01em; outline: none; transition: border-color .25s var(--ease); }
.q textarea { resize: vertical; min-height: 6.5em; line-height: 1.35; }
.q select { appearance: none; cursor: pointer; }
.q ::placeholder { color: color-mix(in srgb, currentColor 42%, transparent); }
.q input:focus, .q textarea:focus, .q select:focus { border-color: currentColor; }
.q-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.q-hint { font-size: 14px; opacity: .7; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-block; padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor;
  font-weight: 600; font-size: clamp(13px, .95vw, 15px); transition: background .2s var(--ease), color .2s var(--ease); }
.pill:hover span { background: color-mix(in srgb, currentColor 10%, transparent); }
.pill input:checked + span { background: var(--fg); color: var(--bg); }
.pill input:focus-visible + span { outline: 2px solid var(--indigo-deep); outline-offset: 3px; }
.send { justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 17px 34px; border-radius: 999px;
  background: var(--fg); color: var(--bg); font-weight: 600; font-size: clamp(16px, 1.15vw, 19px); }
.send i { font-style: normal; transition: translate .35s var(--snap); }
.send:hover { background: var(--grad); color: var(--ink); }
.send:hover i { translate: 5px 0; }
.send:focus-visible { outline: 2px solid var(--indigo-deep); outline-offset: 4px; }
.send[disabled] { opacity: .5; cursor: wait; }

/* the sent modal: a full ground, the mark, the giant word, the way on */
.sent { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--m); background: rgba(20,20,15,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .35s var(--ease); }
.sent.is-on { opacity: 1; }
.sent-card { position: relative; overflow: hidden; width: min(640px, 100%); padding: clamp(36px, 5vw, 64px); border-radius: 28px; background: var(--indigo); color: var(--paper); text-align: center;
  display: grid; justify-items: center; gap: 10px; translate: 0 30px; scale: .96; transition: translate .5s var(--ease), scale .5s var(--ease); }
.sent.is-on .sent-card { translate: 0 0; scale: 1; }
.sent-card.is-fail { background: var(--coral); color: var(--ink); }
.sent-mark { width: clamp(64px, 8vw, 88px); border-radius: 22%; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.sent-mark img { display: block; width: 100%; height: auto; }
.sent-giant { position: absolute; left: 50%; bottom: -.28em; translate: -50% 0; margin: 0; font-weight: 800; font-variation-settings: "wdth" 125; font-size: clamp(120px, 24vw, 260px); line-height: .8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px rgba(239,238,232,.28); pointer-events: none; }
.sent-h { position: relative; margin: 14px 0 0; font-weight: 600; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.02; letter-spacing: -0.03em; }
.sent-p { position: relative; margin: 0; max-width: 36ch; }
.sent-p b { font-weight: 700; } .sent-p a { color: inherit; font-weight: 700; }
.sent-ctas { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(18px, 3vh, 30px); }
.sent-ctas .cta { margin-top: 0; }
.sent-card.is-fail .cta-fill { background: var(--ink); color: var(--paper); }
body.is-sent { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sent, .sent-card { transition: none; } }

/* -------------------------------------------------------------------- FAQ */
.faq-s .giant { position: absolute; right: -2vw; top: 6vh; font-size: 24vw; color: transparent; line-height: .8;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--paper) 28%, transparent); }
.faq-list { position: relative; z-index: 2; margin-top: clamp(30px, 5vh, 56px); max-width: min(980px, 50vw);
  border-top: 1.5px solid color-mix(in srgb, var(--paper) 22%, transparent); }
.faq-i { border-bottom: 1.5px solid color-mix(in srgb, var(--paper) 22%, transparent); }
.faq-i summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(18px, 2.6vh, 26px) 0;
  cursor: pointer; list-style: none; font-weight: 600; font-size: clamp(20px, 1.9vw, 30px); letter-spacing: -0.015em; line-height: 1.2; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 40%, transparent); transition: rotate .35s var(--snap), background-color .25s; }
.faq-i[open] summary::after { rotate: 45deg; background-color: var(--coral); }
.faq-i summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.faq-a { padding: 0 0 clamp(20px, 3vh, 30px); max-width: 62ch; color: color-mix(in srgb, var(--paper) 78%, transparent);
  font-size: clamp(16px, 1.15vw, 19px); }
.faq-a p + p { margin-top: .6em; }

/* ----------------------------------------------------------------- footer */
/* The close every inner page shares: the name whole, the mark standing in it,
   the address and the ways out. */
.pg-foot { padding-bottom: clamp(30px, 5vh, 48px); }
.pf-lock { display: flex; align-items: center; justify-content: center; gap: .14em; margin: 0 0 clamp(36px, 6vh, 64px);
  font-weight: 800; font-variation-settings: "wdth" 125; font-size: min(12.5vw, 200px); letter-spacing: -0.05em; line-height: .9; }
.pf-lock img { width: .62em; height: auto; border-radius: 22%; }
.pf-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px;
  padding-top: 26px; border-top: 1.5px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 15px; }
.pf-mail { font-weight: 700; font-size: clamp(20px, 2vw, 32px); letter-spacing: -0.02em; }
.pf-mail:hover { color: var(--coral); }
.pf-nav { display: flex; flex-wrap: wrap; gap: 22px; font-weight: 600; }
.pf-nav a:hover { color: var(--coral); }
.pf-small { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; opacity: .6; font-size: 13px; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 860px) {
  .ct { grid-template-columns: 1fr; }
  .ct-phone { display: none; }
  .q-row { grid-template-columns: 1fr; }
  .faq-s .giant { font-size: 44vw; top: 4vh; }
  .faq-list { max-width: none; }
}

/* =========================================================================
   SCENES: pinned, scroll-driven sections in the home page's language
   ========================================================================= */
.pin { position: relative; }
.pin .s-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pin .col { position: absolute; z-index: 4; left: var(--m); display: grid; justify-items: start; }
.c-bl { bottom: 8vh; } .c-ml { top: 30vh; }
.pin .head { max-width: 15ch; }
.pin .body + .body { margin-top: .6em; }
.cue-link { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(18px, 3vh, 30px);
  font-weight: 700; font-size: var(--c); letter-spacing: .16em; text-transform: uppercase; }
.cue-link i { font-style: normal; transition: translate .35s var(--snap); }
.cue-link:hover i { translate: 5px 0; }

/* the held phone, standing in a scene (not the home page's fixed one) */
.hold { position: absolute; z-index: 3; height: 70vh; aspect-ratio: 629 / 1304; translate: -50% -50%; left: 72%; top: 50%;
  rotate: var(--hr, -2deg); filter: drop-shadow(0 40px 60px rgba(0,0,0,.32)) drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
.hold .ph-vid, .hold .ph-mail { opacity: 1; }

/* ---------------------------------------------------------------- Homa Pod */
.pod-hero .room video { scale: 1.04; }
.pod-hero .room::after { background: linear-gradient(0deg, rgba(20,20,15,.95) 0%, rgba(20,20,15,.7) 32%, rgba(20,20,15,.15) 62%, rgba(20,20,15,.3) 100%); }
.pod-h1 { margin-top: clamp(12px, 2vh, 20px); font-weight: 800; font-variation-settings: "wdth" 118;
  font-size: calc(var(--h) * 1.25); line-height: .9; letter-spacing: -0.04em; max-width: 12ch; }
.pod-play { margin-top: clamp(22px, 3.4vh, 34px); }

/* episodes: the ground takes each episode's ink as the scroll walks through */
.eps-s .s-pin { background: var(--ep, var(--indigo-deep)); transition: background .8s var(--ease); }
.eps-s[data-ep="1"] { --ep: var(--coral); }
.eps-s[data-ep="2"] { --ep: var(--violet); }
.eps-s[data-ep="1"] .s-pin, .eps-s[data-ep="2"] .s-pin { color: var(--ink); }
.ep-num { position: absolute; z-index: 1; right: -2vw; bottom: -6vh; margin: 0; font-weight: 800; font-variation-settings: "wdth" 125;
  font-size: 46vw; line-height: .8; letter-spacing: -0.06em; color: transparent;
  -webkit-text-stroke: 2px rgba(239, 238, 232, .32); }
.eps-s[data-ep="1"] .ep-num, .eps-s[data-ep="2"] .ep-num { -webkit-text-stroke-color: rgba(20, 20, 15, .3); }
.ep-note { margin-top: 12px; max-width: 40ch; font-size: clamp(14px, 1vw, 16px); opacity: .78; }
.ep-meta { margin-top: clamp(26px, 4.4vh, 44px); font-weight: 700; font-size: var(--c); letter-spacing: .16em; text-transform: uppercase; }
.ep-guest { margin-top: 14px; font-size: clamp(14px, 1vw, 16px); font-weight: 600; }
.eps-s .segs { margin-top: 18px; }
.ep-swap { transition: opacity .3s var(--ease), translate .5s var(--ease); }
.is-swap .ep-swap { opacity: 0; translate: 0 16px; }

/* be a guest: the phone types the suggestion to the studio */
.guest .hold { left: 74%; }

/* ------------------------------------------------------------- Initiatives */
.in-hero .s-pin { background: var(--indigo-deep); }
.in-hero .cascade7 { right: 6vw; top: 17vh; width: 48vw; }
.in-track .s-pin { background: var(--coral); color: var(--ink); }
.in-track .track { top: 30vh; }
.in-track .tk-run { border-top-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.in-track .tk-stop::before { background: var(--coral); box-shadow: inset 0 0 0 1.5px var(--ink); }
.in-track .tk-stop.is-now::before { background: var(--ink); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 18%, transparent); }
.in-track .tk-word { -webkit-text-stroke-color: color-mix(in srgb, var(--ink) 70%, transparent); }
.in-track .tk-stop.is-now .tk-word { color: var(--ink); }

/* a sentence big enough to be the visual */
.say-big { margin: clamp(20px, 3.4vh, 34px) 0 0; font-weight: 800; font-variation-settings: "wdth" 118;
  font-size: calc(var(--h) * 1.15); line-height: .92; letter-spacing: -0.04em; max-width: 13ch; }
.say-big em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--fg, var(--ink)); }
.two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: end; }
.two .pg-say { margin-top: 0; }

/* the three promises */
.promises { margin-top: clamp(36px, 6vh, 64px); border-top: 1.5px solid color-mix(in srgb, currentColor 22%, transparent); }
.promise { display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 54px); align-items: baseline;
  padding: clamp(26px, 4.4vh, 46px) 0; border-bottom: 1.5px solid color-mix(in srgb, currentColor 22%, transparent); }
.promise b { font-weight: 700; font-size: var(--c); letter-spacing: .16em; opacity: .6; }
.promise h3 { margin: 0; font-weight: 700; font-size: clamp(28px, 3.4vw, 54px); line-height: 1; letter-spacing: -0.03em; }
.promise p { font-size: clamp(16px, 1.15vw, 19px); }
.promise .tag { display: inline-block; margin-top: 14px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--coral); color: var(--ink); }

/* the next round: a live status */
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(22px, 3.4vh, 34px); padding: 10px 18px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor; font-weight: 600; font-size: 15px; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); animation: rec 1.4s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .status i { animation: none; } }

.g-coral { --fg: var(--ink); --bg: var(--coral); background: var(--coral); color: var(--ink); }
.big-cta { margin-top: clamp(24px, 4vh, 40px); }

@media (max-width: 860px) {
  .hold { height: 36vh; left: 50%; top: 25%; }
  .pin .col { top: 49vh !important; bottom: auto !important; right: var(--m); }
  .ep-num { font-size: 70vw; bottom: auto; top: 6vh; }
  .in-hero .cascade7 { left: 4vw; right: auto; width: 130vw; top: 16vh; }
  .in-track .track { top: 18vh; }
  .two, .promise { grid-template-columns: 1fr; gap: 14px; }
  .guest .hold { left: 50%; }
}
.guest-go { margin-top: clamp(22px, 3.6vh, 36px); }
/* short phones: a smaller phone, the copy higher, the run note left out */
@media (max-width: 860px) and (max-height: 700px) {
  .eps-s .hold { height: 29vh; top: 19%; }
  .eps-s .col { top: 37vh !important; }
  .eps-s .ep-note { display: none; }
  .eps-s .ep-meta { margin-top: 14px; }
}

/* =========================================================================
   THE END: the home page's close, on every inner page
   ========================================================================= */
.pg-end { position: relative; overflow: clip; min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto; background: var(--ink); color: var(--paper); --fg: var(--paper); --bg: var(--ink); }
/* the stage: the name parts, the phone lands in the gap. Flow layout, so the copy can never sit under the phone. */
.pe-stage { position: relative; min-height: 60vh; --ph: 46vh; --gap: calc(var(--ph) * .62); }
.pe-lock { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 0;
  font-weight: 800; font-variation-settings: "wdth" 125; letter-spacing: -0.05em; line-height: .8; color: var(--paper);
  font-size: min(12vw, calc((46vw - var(--gap) / 2) / 3.2)); transition: column-gap 1.1s var(--ease); }
.pe-lock span:first-child { justify-self: end; } .pe-lock span:last-child { justify-self: start; }
.pg-end.is-in .pe-lock { column-gap: var(--gap); }
.pe-phone { left: 50%; top: 50%; height: var(--ph); --hr: 0deg; translate: -50% calc(-50% + 30vh); opacity: 0;
  transition: translate 1.1s var(--ease), opacity .6s var(--ease); }
.pg-end.is-in .pe-phone { translate: -50% -50%; opacity: 1; }
.pe-phone .ph-end { opacity: 1; visibility: visible; }
.pe-copy { display: grid; justify-items: center; text-align: center; padding: clamp(8px, 2vh, 24px) var(--m) 0; }
.pe-copy .head-c { margin-top: 0; font-size: calc(var(--h) * .84); }
@media (min-width: 861px) and (max-height: 820px) { .pe-stage { min-height: 54vh; --ph: 40vh; } }
@media (max-width: 860px) {
  /* phones: the phone first, the whole name under it, like the home close */
  .pe-stage { min-height: 0; display: grid; justify-items: center; gap: 3vh; padding: 8vh 0 0; --ph: 36vh; }
  .pe-phone { position: relative; left: auto; top: auto; translate: 0 5vh; }
  .pg-end.is-in .pe-phone { translate: 0 0; }
  .pe-lock { position: relative; top: auto; translate: none; display: block; text-align: center; white-space: nowrap; font-size: 15vw; }
  .pg-end.is-in .pe-lock { column-gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .pe-phone, .pe-lock { transition: none; } }

/* =========================================================================
   THE FILM between scenes (site.js sets --e arrived, --x left, --sp passing)
   ========================================================================= */
/* the held object arrives from below with a turn, and lifts away as its
   scene leaves; on top of that it leans toward the pointer (--tx, --ty) */
.pg .hold:not(.wk-devs .hold):not(.hp-cphone):not(.pe-phone), .pg .mac:not(.wk-devs .mac), .pg .hp-thumb, .pg .ir, .pg .cascade7, .pg .wk-devs {
  transform: translate3d(0, calc((1 - var(--e, 1)) * 22vh - var(--x, 0) * 14vh), 0) rotate(calc((1 - var(--e, 1)) * 9deg))
             perspective(1400px) rotateY(calc(var(--ty, 0) * 1deg)) rotateX(calc(var(--tx, 0) * 1deg));
  transition: transform .25s linear;
}
.pg .wk-devs .hold, .pg .wk-devs .mac {
  transform: perspective(1400px) rotateY(calc(var(--ty, 0) * 1deg)) rotateX(calc(var(--tx, 0) * 1deg)); transition: transform .25s linear, opacity .5s, scale .5s, filter .5s;
}
/* giant words slide across as the scene passes, like the reference's type */
.pg .hp-giant, .pg .wk-word, .pg .hp-word, .pg .ep-num, .pg .in-big, .pg .in-two, .pg .in-qmark, .pg .faq-s .giant {
  transform: translateX(calc((.5 - var(--sp, .5)) * 18vw));
}
/* copy fades as its scene leaves, as on the home page */
.pg .hp-c, .pg .hp-two, .pg .ct > div:first-child { opacity: calc(1 - var(--x, 0) * 1.7); }
@media (prefers-reduced-motion: reduce) {
  .pg .hold, .pg .mac, .pg .hp-thumb, .pg .ir, .pg .cascade7, .pg .wk-devs, .pg .hp-giant, .pg .wk-word, .pg .hp-word { transform: none !important; }
}