/* Stone AI. The look of the first Stone AI site (colours, type, spacing, motion),
   cut down to three pages: the one page, Get in touch and Staff login. One file,
   no build step. Every colour is a token. */

@font-face {
  font-family: Archivo; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%;
  font-display: swap; src: url(../fonts/archivo-vietnamese.woff2) format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301,
    U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Archivo; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%;
  font-display: swap; src: url(../fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Archivo; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%;
  font-display: swap; src: url(../fonts/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308,
    U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Fallback"; src: local(Arial);
  ascent-override: 88.96%; descent-override: 21.28%; line-gap-override: 0%; size-adjust: 98.7%;
}

:root {
  color-scheme: light;
  --orange: #ff4f00;
  --orange-deep: #bf3b00;
  --ink: #111;
  --bar: #0b0b0b;
  --paper: #f5f5f1;
  --sand: #deddd7;
  --white: #fff;
  --on-dark: #f4f2e9;
  --on-dark-soft: #d9d8d0;
  --on-dark-row: #cfcec6;
  --body: #3d3d38;
  --label: #44443f;
  --num: #6b6b64;
  --muted: #6b6b6b;
  --line: rgba(0, 0, 0, .2);
  --line-dark: rgba(255, 255, 255, .25);
  --error: #e40014;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: Archivo, "Archivo Fallback", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; font-family: var(--font);
       scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { background: var(--paper); color: var(--ink); font-variation-settings: "wdth" 100;
       font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ol, ul { list-style: none; }
img, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, textarea { font: inherit; font-variation-settings: inherit;
  letter-spacing: inherit; color: inherit; background: transparent; border-radius: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }
main { display: block; }
main:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; }
.icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
        stroke-linejoin: round; flex: none; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 10px 14px;
        background: var(--white); color: var(--ink); }
.skip:focus { left: 16px; }

.display { font-variation-settings: "wdth" 62, "wght" 850; font-weight: 850;
           text-transform: uppercase; letter-spacing: -.02em; word-spacing: .045em;
           line-height: .88; }

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ top bar */

.nav { position: absolute; inset: 0 0 auto; z-index: 20; height: 64px; padding: 0 32px;
       display: flex; align-items: center; justify-content: space-between; gap: 24px;
       background: var(--bar); color: #f5f5f1; font-size: 12px; }
.nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.nav-logo img { width: 175px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links > a:not(.nav-btn):hover, .nav-links > a[aria-current="page"]:not(.nav-btn) {
  text-decoration: underline; text-underline-offset: 4px; }
.nav .nav-btn { min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .35);
  transition: border-color .2s, background .2s, color .2s; }
.nav .nav-btn:hover, .nav .nav-btn[aria-current="page"] { border-color: var(--orange);
  background: var(--orange); color: var(--ink); }

/* ------------------------------------------------------------------- footer */

.foot { background: var(--orange); color: var(--ink); padding: 90px 32px 30px; }
.foot > p { font-size: 15px; }
.foot-cta { display: flex; align-items: center; justify-content: space-between;
  padding-block: 20px 50px; border-bottom: 1px solid rgba(0, 0, 0, .5);
  font-size: clamp(70px, 10vw, 160px); line-height: 1.3; letter-spacing: -.04em; }
.foot-cta svg { width: clamp(50px, 8vw, 120px); height: auto; fill: none; stroke: currentColor;
  stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.foot-cta:hover svg { transform: translate(6px, -6px); }
.foot-details { display: flex; justify-content: space-between; gap: 28px; padding-top: 26px;
  font-size: 12px; line-height: 1.6; }
.foot-copy { margin-top: 12px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-details a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-details a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* -------------------------------------------------------------- the one page */

/* One screen and no scroll (21 Oct 2026): the film behind, the logo at the top, the
   mission in dots in the middle, and one Get in touch at the foot. */
.page-home { height: 100svh; overflow: hidden; background: var(--ink); }
.page-home .nav { background: transparent; }
.page-home .nav-logo { visibility: hidden; }
.stage { position: relative; isolation: isolate; overflow: hidden; height: 100svh;
  min-height: 320px; background: var(--ink); color: #fff; outline: none;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.stage:focus-visible { box-shadow: inset 0 0 0 2px var(--orange); }
.hero-media { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover; object-position: 64% 65%; }
.hero-media video { visibility: hidden; }
.hero-media video.is-visible { visibility: visible; }
/* Darker than the film was on its own, and darkest behind the words, so the dots read over
   the bright sky and the peak while the film still shows round the edges. */
.hero-shade { position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 42% at 50% 52%, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 100%),
    linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .72)); }
.stage canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }

/* Centred with margins, not a transform: the logo's opening move sets its own. */
.hero-title { position: absolute; top: 14svh; inset-inline: 0; width: fit-content;
  margin-inline: auto; }
.hero-title img { width: clamp(240px, 38vw, 640px); clip-path: inset(0);
  transition: clip-path 1.1s var(--ease); }
/* The logo is hidden while it is big, wipes in, then settles. */
[data-title-phase="big"] .hero-title img { clip-path: inset(0 100% 0 0); transition: none; }

/* Where the dots spell each statement. The script fits the words to this box. */
.stage-words { position: absolute; inset: 31svh 7vw 21svh; display: grid; place-items: center;
  pointer-events: none; }
.stage-hint { position: absolute; inset: auto 0 0; color: var(--on-dark-row); text-align: center;
  text-transform: uppercase; letter-spacing: .14em; font-size: 11px;
  font-variant-numeric: tabular-nums; }
/* Before the script runs, and for reduced motion: the statements as still lines. */
.reveal-list { display: grid; gap: 8px; justify-items: center; text-align: center; }
.reveal-list li { font-variation-settings: "wdth" 62, "wght" 850; font-weight: 850;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
  font-size: clamp(15px, 1.4vw, 20px); color: var(--on-dark); }
.reveal-list li:first-child { margin-bottom: 14px; color: var(--orange); letter-spacing: -.02em;
  line-height: .9; font-size: clamp(40px, 6vw, 96px); }
.stage[data-live="true"] .reveal-list { position: absolute; width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage:not([data-live="true"]) canvas { display: none; }
.stage:not([data-live="true"]) [data-hint] { visibility: hidden; }

/* The one Get in touch, with Wiremu's number under it. */
.stage-foot { position: absolute; bottom: 5svh; inset-inline: 0; display: flex;
  flex-direction: column; align-items: center; gap: 8px; }
.stage-touch { display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 14px 28px; background: var(--orange); color: var(--ink); font-size: 16px;
  font-weight: 600; transition: background .2s; }
.stage-phone { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 8px;
  color: var(--on-dark-soft); font-size: 14px; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; }
.stage-phone:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.stage-phone:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.stage-touch:hover { background: #ff6a26; }
.stage-touch .icon { transition: transform .2s; }
.stage-touch:hover .icon { transform: translateX(.15em); }
.stage-touch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hero-toggle { position: absolute; bottom: 25px; right: 32px; display: inline-flex;
  align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .2); color: #cecec7; }
.hero-toggle:hover, .hero-toggle:focus-visible { color: #fff; background: rgba(0, 0, 0, .5);
  border-color: rgba(255, 255, 255, .5); }
.hero-toggle .i-play { display: none; }
.is-paused .i-play { display: block; }
.is-paused .i-pause { display: none; }

/* ------------------------------------- Get in touch and Staff login: a dark band */

.band { min-height: 100svh; padding: 150px 32px 96px; background: var(--ink); color: var(--on-dark); }
.band-row { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line-dark); color: var(--on-dark-row); font-size: 12px; }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw;
  align-items: start; margin-top: 56px; }
.band-big { font-variation-settings: "wdth" 62, "wght" 850; font-weight: 850; text-transform: uppercase;
  color: var(--orange); letter-spacing: -.02em; font-size: clamp(80px, 11vw, 190px); line-height: .85;
  animation: rise 1s var(--ease) both; }
.band-line { max-width: 32ch; margin-top: 32px; color: var(--on-dark-soft);
  font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; }
.band-contact { display: flex; flex-direction: column; gap: 6px; margin-top: 40px; font-size: 18px; }
.band-contact a { width: fit-content; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.band-contact a:hover { color: var(--orange); border-color: var(--orange); }
.band-card { padding: 40px; background: var(--paper); color: var(--ink);
  animation: rise 1s var(--ease) .15s both; }
form.band-card { display: grid; gap: 24px; align-content: start; }
form.band-card .form-actions { margin-top: 0; }
.card-title { margin-bottom: 16px; font-size: 44px; font-weight: 500; line-height: 1.1;
  letter-spacing: -.02em; text-wrap: balance; }
form.band-card .card-title { margin-bottom: 0; }
.card-title[tabindex]:focus { outline: none; }
.card-done { max-width: 32rem; font-size: 18px; line-height: 1.625; }
.card-note { color: var(--muted); font-size: 13px; }
.google-btn { display: flex; justify-content: center; align-items: center; min-height: 48px;
  padding: 12px 24px; background: var(--ink); color: var(--paper); font-size: 16px; }
.google-btn:hover { opacity: .9; }
.google-btn + .or { margin-top: -8px; color: var(--muted); font-size: 14px; text-align: center; }

/* Forms, as the first site drew them: a line under each answer. */
.fields { display: grid; gap: 24px; }
.field label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 14px; line-height: 1.43; }
.field input, .field textarea { width: 100%; padding: 12px 0; font-size: 16px;
  line-height: 1.5; color: var(--ink); border-bottom: 1px solid rgba(17, 17, 17, .4);
  outline: none; transition: border-color .15s; }
.field textarea { resize: none; display: block; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.form-error { margin: 0; color: var(--error); font-size: 14px; }
.band-card .form-error { padding: 10px 12px; border: 1px solid rgba(228, 0, 20, .35);
  background: rgba(228, 0, 20, .05); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin-top: 24px; }
.form-actions.roomy { margin-top: 48px; }
.btn-solid { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 24px;
  background: var(--ink); color: var(--paper); font-size: 16px; transition: opacity .15s; }
.btn-solid:hover { opacity: .9; }
.btn-solid:disabled { opacity: .4; cursor: default; }
.quiet-text { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 16px; }
.quiet-text:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------ Get in touch */

/* One clean column on the dark ground (21 Oct 2026): a heading, a line, four answers,
   Send, and the number and email beside it. Nothing else. */
.page-contact { background: var(--bar); }
.touch { min-height: 100svh; display: grid; place-items: center; padding: 120px 32px 72px;
  background: var(--bar); color: var(--on-dark); }
.touch-inner { width: min(100%, 640px); }
.touch-title { color: var(--orange); font-size: clamp(52px, 7vw, 96px); }
.touch-line { max-width: 38ch; margin-top: 18px; color: var(--on-dark-soft);
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.45; }
.touch-form { display: grid; gap: 28px; margin-top: 48px; }
.touch-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.touch .field label { color: var(--on-dark-row); font-size: 13px; }
.touch .field label span { color: #8f8e87; }
.touch .field input, .touch .field textarea { color: var(--on-dark);
  border-bottom-color: rgba(255, 255, 255, .28); caret-color: var(--orange); }
.touch .field input:focus, .touch .field textarea:focus { border-color: var(--orange); }
/* Keep the browser's autofill from painting the answers yellow or blue on the dark. */
.touch .field input:-webkit-autofill { -webkit-text-fill-color: var(--on-dark);
  box-shadow: 0 0 0 1000px var(--bar) inset; }
.touch .form-error { color: #ff8a5c; }
.touch-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; margin-top: 8px; }
.touch-send { display: inline-flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 14px 28px; background: var(--orange); color: var(--ink); font-size: 16px;
  font-weight: 600; transition: background .2s; }
.touch-send:hover { background: #ff6a26; }
.touch-send:disabled { opacity: .5; cursor: default; }
.touch-send .icon { transition: transform .2s; }
.touch-send:hover .icon { transform: translateX(.15em); }
.touch-send:focus-visible, .touch-direct a:focus-visible, .touch-back:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; }
.touch-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  color: var(--on-dark-row); font-size: 14px; font-variant-numeric: tabular-nums; }
.touch-direct a { display: inline-flex; align-items: center; min-height: 40px; }
.touch-direct a:hover, .touch-back:hover { color: #fff; text-decoration: underline;
  text-underline-offset: 4px; }
.touch-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 32px;
  color: var(--on-dark-row); font-size: 15px; }

@media (max-width: 640px) {
  .touch { place-items: start center; padding: 104px 20px 48px; }
  .touch-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .touch-form { gap: 22px; margin-top: 36px; }
}

/* -------------------------------------------------------------- narrower */

@media (max-width: 900px) {
  .band-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; }
  .band { padding: 120px 20px 64px; }
  .band-big { font-size: clamp(72px, 22vw, 130px); }
  .band-card { padding: 24px 20px; }
}

@media (max-width: 768px) {
  .nav { height: 58px; gap: 12px; padding-inline: 16px; }
  .nav-logo img { width: 108px; }
  .nav-links { gap: 14px; }
  .nav .nav-btn { padding: 0 12px; }
  .foot { padding: 60px 20px 24px; }
  .foot-cta { padding-bottom: 32px; font-size: 15vw; }
  .foot-details { flex-wrap: wrap; }
  .foot-details > div:first-child { flex-basis: 100%; }

  .hero-title { top: 12svh; }
  .hero-title img { width: min(78vw, 460px); }
  .stage-words { inset: 25svh 5vw 23svh; }
  .stage-foot { bottom: 5svh; }
  .hero-toggle { right: 20px; }
}

/* A short screen, such as a phone on its side: keep all of it on the one screen. */
@media (max-height: 560px) {
  .hero-title { top: 9svh; }
  .hero-title img { width: min(40vw, 360px); }
  .stage-words { inset: 22svh 8vw 26svh; }
  .stage-foot { bottom: 5svh; flex-direction: row; gap: 18px; }
  .stage-touch { min-height: 44px; padding-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .band-big, .band-card { animation: none; }
}