/* Site styles: concept A, "Alpine Editorial".
   Mobile-first: base rules for small screens, min-width media queries for larger ones.
   White and snow-grey, ink text, deep blue for links and buttons, sky blue for accents only.
   Motion: everything is visible by default. Animations only run when <html> has the "motion" class
   (set in the page head, and only if the visitor hasn't asked for reduced motion).
   Only transform and opacity are animated. */

/* Fonts: self-hosted, Latin subset, variable weight (Inter 400-600, Inter Tight 700-800). SIL OFL. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/inter-tight-latin-var.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* Fallbacks sized to match the web fonts, so text doesn't jump when they load. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.45%;
  ascent-override: 90.15%;
  descent-override: 22.45%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 700 800;
  size-adjust: 98.07%;
  ascent-override: 98.78%;
  descent-override: 24.59%;
  line-gap-override: 0%;
}

:root {
  --ink: #0e1a2b;
  --muted: #3a4757;
  --line: #e3e7ec;
  --line-2: #d9dee5;
  --snow: #f3f5f8;
  --sky-tint: #e9f4fb;
  --blue: #0b5cad; /* links and buttons */
  --blue-dark: #08427c;
  --sky: #2db0fe; /* accents only, too light for text on white */
  --on-ink: #c9d3df;

  --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP";
  --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, var(--jp), sans-serif;
  --font-head: "Inter Tight", "Inter Tight Fallback", system-ui, -apple-system, "Segoe UI", Roboto, var(--jp), sans-serif;

  --radius: 6px;
  --max: 77.5rem;
  --pad: 1.25rem;
  --section: 4.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--blue);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--blue-dark);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure,
blockquote {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: #fff;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Type */
.eyebrow,
.kicker {
  margin: 0 0 0.875rem;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--blue);
}

.h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 3.2vw + 1rem, 3rem);
}

.h2--wide {
  max-width: 47.5rem;
  margin-bottom: 3rem;
}

.h2--tight {
  margin-bottom: 0.5rem;
}

.proof {
  margin: 0;
  font-size: 1.125rem;
}

.h2--big {
  font-size: clamp(2.25rem, 3.6vw + 1rem, 3.25rem);
}

.h3 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

.muted {
  color: var(--muted);
}

.note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Buttons: hover only moves (transform); colour changes are instant. */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.btn:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
}

.btn--outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.btn--sky {
  background: var(--sky);
  border-color: var(--sky);
  color: var(--ink);
  font-weight: 700;
}

.btn--sky:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.btn--small {
  padding: 0.6rem 1rem;
  font-size: 0.9375rem;
}

.btn--big {
  padding: 1rem 1.75rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand__mark {
  color: var(--sky);
}

.brand__name {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav,
.lang-switcher {
  order: 3;
}

.site-nav {
  width: 100%;
}

.site-nav ul,
.lang-switcher ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.site-nav a,
.lang-switcher a,
.lang-switcher span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.site-nav a:hover,
.lang-switcher a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.lang-switcher span {
  color: var(--muted);
}

/* Hero */
.hero {
  padding: 3rem 0 3.5rem;
}

.hero__grid {
  display: grid;
  gap: 1.5rem;
}

.hero__title {
  font-size: clamp(2.75rem, 6.4vw + 0.5rem, 4.75rem);
  line-height: 1.02;
}

.hero__lead {
  margin-bottom: 1.75rem;
  font-size: 1.25rem;
  color: var(--muted);
}

.hero__art {
  position: relative;
  height: 15rem;
  margin-top: 2.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, #e9f4fb 0%, #f6f9fb 100%);
}

.hero__layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 121%;
  overflow: visible;
}

.placeholder-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  margin: 0 1rem 0 0;
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.85);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Stats strip */
.stats {
  padding-bottom: var(--section);
}

.stats__grid {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line-2);
  background: var(--line-2);
}

.stat {
  padding: 1.75rem 1.5rem;
  background: #fff;
}

.stat p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.stat .stat__num {
  margin-bottom: 0.375rem;
  font-family: var(--font-head);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.stat__title {
  margin-bottom: 0.5rem;
  font-size: 1.3125rem;
  font-weight: 700;
}

/* Sections */
.section {
  padding: var(--section) 0;
}

.section--snow {
  background: var(--snow);
}

.section--sky {
  background: var(--sky-tint);
}

.section--line {
  border-top: 1px solid var(--line);
}

.section--ink {
  background: var(--ink);
  color: #fff;
}

.duo {
  display: grid;
  gap: 2.5rem;
}

.panel {
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  background: #fff;
}

/* Fast: bars drawn to scale */
.bars {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.bar__label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.bar__value {
  font-variant-numeric: tabular-nums;
}

.bar__track {
  height: 0.875rem;
  border-radius: 999px;
  background: var(--snow);
  overflow: hidden;
}

.bar__fill {
  display: block;
  width: calc(var(--w) * 100%);
  min-width: 3px;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
  transform-origin: left center;
}

.bar__fill--old {
  background: var(--muted);
}

/* Secure: the WordPress stack. Without motion it is shown crossed out. */
.stack {
  margin-top: 1.5rem;
}

.stack__label {
  display: grid;
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}

.stack__label > span {
  grid-area: 1 / 1;
}

.stack__label-after {
  opacity: 0;
}

.stack__blocks {
  display: grid;
  gap: 0.5rem;
}

.stack__block {
  position: relative;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--muted);
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: line-through;
}

.stack__base {
  position: relative;
  z-index: 1;
  margin: 0.5rem 0 0;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

/* How updates work: steps and phone */
.steps {
  display: grid;
  gap: 1.25rem;
}

.step {
  display: flex;
  gap: 1.125rem;
}

.step p {
  margin: 0;
}

.step__num {
  min-width: 2rem;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--blue);
}

.phone-wrap {
  display: flex;
  justify-content: center;
}

.phone {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 18.75rem;
  min-height: 32.5rem;
  padding: 1.375rem 1rem 1rem;
  border: 10px solid var(--ink);
  border-radius: 2.25rem;
  background: #fff;
}

.phone__head {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
}

.phone__chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
}

.msg {
  align-self: flex-start;
  max-width: 85%;
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: 1rem 1rem 1rem 0.25rem;
  background: #eef1f5;
  font-size: 0.875rem;
  line-height: 1.45;
}

.msg--me {
  align-self: flex-end;
  border-radius: 1rem 1rem 0.25rem 1rem;
  background: var(--blue);
  color: #fff;
}

.msg--card {
  display: block;
  width: 85%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 0.75rem;
  background: #fff;
}

.msg__img {
  display: block;
  height: 5.25rem;
  background: linear-gradient(135deg, #c6d6e2, #e9f4fb);
}

.msg__body {
  display: block;
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
}

.phone__compose {
  position: relative;
  margin-top: 0.875rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.compose__typed {
  position: absolute;
  left: 0.875rem;
  top: 0.5rem;
  color: var(--ink);
  opacity: 0;
}

.compose__mask {
  position: absolute;
  inset: 0 -2px;
  background: #fff;
  transform-origin: right center;
}

/* Services */
.services {
  display: grid;
  gap: 2rem;
}

.service {
  padding-top: 1.25rem;
  border-top: 3px solid var(--ink);
}

.service .h3 {
  margin-bottom: 0.25rem;
}

.service .kicker {
  margin-bottom: 0.75rem;
}

.service p:last-child {
  margin: 0;
}

.monthly {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
}

.monthly__text {
  flex: 1 1 22rem;
}

.monthly .h3 {
  margin-bottom: 0.5rem;
  font-size: 1.625rem;
}

.monthly p {
  margin: 0;
  color: var(--on-ink);
}

.services__extra {
  margin: 1.5rem 0 0;
}

/* Japan / NZ */
.region {
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  background: #fff;
}

.region p {
  margin: 0;
  font-size: 1.1875rem;
}

/* Projects */
.projects {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}

.photo-placeholder,
.ba__placeholder {
  display: grid;
  place-items: center;
  padding: 0.75rem;
  border: 2px dashed #8795a6;
  border-radius: 4px;
  background: #e3eaf0;
  font-size: 0.875rem;
  text-align: center;
  color: var(--muted);
}

.photo-placeholder p,
.ba__placeholder p {
  margin: 0;
}

.project__shot {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}

.project .h3 {
  margin: 1rem 0 0.25rem;
}

.project .muted {
  margin: 0;
  font-size: 0.9375rem;
}

/* Cards: the hover shadow is a separate layer that fades in (opacity only). */
.project,
.region,
.panel {
  position: relative;
  isolation: isolate;
}

.project::after,
.region::after,
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(14 26 43 / 0.12);
  opacity: 0;
  pointer-events: none;
}

/* Before and after. Without JavaScript: side by side. */
.ba {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.ba__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: #fff;
}

.ba__placeholder {
  aspect-ratio: 390 / 844;
  border: 0;
  border-radius: 0;
}

.ba figcaption {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.ba__handle,
.ba__tag {
  display: none;
}

/* Slider mode (main.js adds .is-slider): both screens in one frame,
   the "before" screen trimmed from the right using transforms only. */
.ba.is-slider {
  display: block;
  max-width: 24rem;
}

.ba.is-slider .ba__after {
  position: absolute;
  inset: 0 0 auto 0;
}

.ba.is-slider .ba__before {
  position: relative;
  z-index: 1;
}

.ba.is-slider .ba__before .ba__frame {
  border-color: transparent;
  background: transparent;
}

.ba.is-slider .ba__clip {
  overflow: hidden;
  transform: translateX(calc((var(--pos) - 100) * 1%));
}

.ba.is-slider .ba__unclip {
  transform: translateX(calc((100 - var(--pos)) * 1%));
}

.ba.is-slider figcaption {
  display: none;
}

/* Keep the placeholder text on the right, where the "after" side shows. */
.ba.is-slider .ba__placeholder {
  justify-items: end;
  padding-right: 1.25rem;
  text-align: right;
}

.ba.is-slider .ba__placeholder p {
  max-width: 40%;
}

.ba.is-slider .ba__tag {
  position: absolute;
  top: 0.75rem;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}

.ba__tag--before {
  left: 0.75rem;
}

.ba__tag--after {
  right: 0.75rem;
}

.ba.is-slider .ba__handle {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
  transform: translateX(calc((var(--pos) - 100) * 1%));
}

.ba__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  width: 2px;
  background: var(--sky);
}

.ba__knob {
  position: absolute;
  top: 50%;
  right: -1.375rem;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  border: 2px solid var(--sky);
  border-radius: 50%;
  background: #fff;
}

.ba__knob::before,
.ba__knob::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -5px;
  border: 5px solid transparent;
}

.ba__knob::before {
  left: 6px;
  border-right-color: var(--ink);
}

.ba__knob::after {
  right: 6px;
  border-left-color: var(--ink);
}

.ba__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.ba:has(.ba__range:focus-visible) .ba__knob {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.ba__hint {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Testimonials */
.quote--big {
  max-width: 61.25rem;
}

.quote__mark {
  color: var(--sky);
}

.quote--big blockquote p {
  margin: 1.25rem 0 1.75rem;
  font-family: var(--font-head);
  font-size: clamp(1.375rem, 1.6vw + 1rem, 2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.quote figcaption {
  color: var(--on-ink);
}

.quotes {
  display: grid;
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
}

.quotes blockquote p {
  margin: 0 0 1rem;
}

/* About */
.photo-placeholder {
  aspect-ratio: 4 / 5;
  max-width: 28rem;
}

/* Contact */
.contact__lead {
  margin-bottom: 2rem;
  font-size: 1.1875rem;
  color: var(--muted);
}

/* Footer */
.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

.site-footer p {
  margin: 0;
}

/* Wider screens */
@media (min-width: 32em) {
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48em) {
  :root {
    --pad: 2.5rem;
    --section: 6rem;
  }

  .site-nav,
  .lang-switcher {
    order: 0;
    width: auto;
  }

  .hero {
    padding: 6rem 0 4.5rem;
  }

  .hero__art {
    height: 23.75rem;
    margin-top: 4rem;
  }

  .panel,
  .region {
    padding: 2.25rem;
  }

  .monthly {
    padding: 2.25rem 2.5rem;
  }

  .services,
  .projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .projects--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ba {
    gap: 1.5rem;
  }

  .ba__placeholder {
    aspect-ratio: 1440 / 900;
  }

  .ba.is-slider {
    max-width: none;
  }
}

@media (min-width: 60em) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: end;
  }

  .hero__side {
    padding-bottom: 0.625rem;
  }

  .stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }

  .duo--center {
    align-items: center;
  }

  .quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Motion: only with the "motion" class (JavaScript on, no reduced-motion preference) ---------- */

/* Hover: buttons and cards lift slightly. */
.motion .btn,
.motion .project,
.motion .region,
.motion .panel {
  transition: transform 0.25s var(--ease);
}

.motion .btn:hover {
  transform: translateY(-2px);
}

.motion .project:hover,
.motion .region:hover,
.motion .panel:hover {
  transform: translateY(-4px);
}

.motion .project::after,
.motion .region::after,
.motion .panel::after {
  transition: opacity 0.25s var(--ease);
}

.motion .project:hover::after,
.motion .region:hover::after,
.motion .panel:hover::after {
  opacity: 1;
}

/* Sections fade and rise in. */
.motion .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Hero parallax: the mountain layers move at different speeds as the page scrolls.
   CSS scroll-driven animation where supported; main.js does the same in other browsers. */
@supports (animation-timeline: scroll()) {
  .motion .hero__layer--back {
    animation: parallax-back linear both;
    animation-timeline: scroll(root);
    animation-range: 0 600px;
  }

  .motion .hero__layer--front {
    animation: parallax-front linear both;
    animation-timeline: scroll(root);
    animation-range: 0 600px;
  }
}

@keyframes parallax-back {
  to {
    transform: translateY(70px);
  }
}

@keyframes parallax-front {
  to {
    transform: translateY(28px);
  }
}

/* Fast: the bars grow from the left. */
.motion .bar__fill {
  transform: scaleX(0);
  transition: transform 1.4s var(--ease) 0.3s;
}

.motion .bar + .bar .bar__fill {
  transition-delay: 0.7s;
}

.motion .is-in .bar__fill {
  transform: none;
}

/* Secure: the stack starts whole, then falls away, leaving HTTPS + your content. */
.motion .stack__block {
  border-style: solid;
  border-color: var(--line-2);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.8s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.8s ease-in;
  transition-delay: calc(0.8s + var(--i) * 0.18s);
}

.motion .is-in .stack__block {
  transform: translateY(9rem) rotate(var(--r));
  opacity: 0;
}

/* Then what's left rises into the space (main.js measures the distance as --lift). */
.motion .stack__base,
.motion .stack + .note {
  transition: transform 0.7s var(--ease) 2s;
}

.motion .is-in .stack__base,
.motion .is-in .stack + .note {
  transform: translateY(calc(-1 * var(--lift, 0px)));
}

.motion .stack__label > span {
  transition: opacity 0.4s ease 1.8s;
}

.motion .is-in .stack__label-before {
  opacity: 0;
}

.motion .is-in .stack__label-after {
  opacity: 1;
}

/* How updates work: the conversation plays out and the steps light up as you scroll.
   main.js adds s1 to s5 to the section as the phone moves up the screen. */
.motion [data-convo] .step {
  opacity: 0.35;
  transition: opacity 0.4s var(--ease);
}

.motion [data-convo].s1 .step--1,
.motion [data-convo].s3 .step--2,
.motion [data-convo].s4 .step--3 {
  opacity: 1;
}

.motion [data-convo] .msg {
  opacity: 0;
  transform: translateY(0.75rem) scale(0.97);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.motion [data-convo] .msg--me {
  transform-origin: right bottom;
}

.motion [data-convo] .msg:not(.msg--me) {
  transform-origin: left bottom;
}

.motion [data-convo].s2 .msg--1,
.motion [data-convo].s3 .msg--2,
.motion [data-convo].s3 .msg--3,
.motion [data-convo].s4 .msg--4,
.motion [data-convo].s5 .msg--5 {
  opacity: 1;
  transform: none;
}

.motion [data-convo].s3 .msg--3 {
  transition-delay: 0.25s;
}

.motion [data-convo].s1:not(.s2) .compose__placeholder {
  opacity: 0;
}

.motion [data-convo].s1:not(.s2) .compose__typed {
  opacity: 1;
}

.motion [data-convo].s1 .compose__mask {
  transform: scaleX(0);
  transition: transform 1.2s steps(26);
}

/* Smooth scrolling for in-page links. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------- Quote form ---------- */
.quote-wrap {
  display: grid;
  gap: 2.5rem;
}

.quote-intro .contact__lead {
  margin-bottom: 1rem;
}

.qform {
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius);
  background: #fff;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.qform__group + .qform__group {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.qform__legend {
  float: left; /* keeps the legend inside the group, so spacing is even */
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 700;
}

.qform__legend + * {
  clear: both;
}

.qform__num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 1rem;
}

.field,
.choices {
  margin-bottom: 1.25rem;
}

.field label,
.choices legend {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.field__opt {
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid #8795a6;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.field textarea {
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choices legend {
  width: 100%;
  float: left;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  line-height: 1.3;
}

.choice:hover {
  border-color: var(--blue);
}

.choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--blue);
}

.choice:has(input:checked) {
  border-color: var(--blue);
  background: var(--sky-tint);
}

.choice:has(input:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.choice input:focus-visible {
  outline: none;
}

.field__error {
  width: 100%;
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #b42318;
}

.is-invalid input,
.is-invalid textarea {
  border-color: #b42318;
}

.choices.is-invalid .choice {
  border-color: #b42318;
}

.qform__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qform__submit {
  margin-top: 1.5rem;
}

.qform__submit .btn {
  width: 100%;
  justify-content: center;
  font-size: 1.0625rem;
  cursor: pointer;
}

.qform__note {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.qform__done {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-left: 4px solid var(--sky);
  border-radius: var(--radius);
  background: var(--sky-tint);
}

.qform__done p {
  margin: 0 0 0.5rem;
}

.qform__done p:last-child {
  margin: 0;
}

@media (min-width: 48em) {
  .qform {
    padding: 2.5rem;
  }

  .qform__submit .btn {
    width: auto;
  }
}

@media (min-width: 60em) {
  .quote-wrap {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 4rem;
    align-items: start;
  }

  .quote-intro {
    position: sticky;
    top: 2rem;
  }
}

.motion .qform__done:not([hidden]) {
  animation: rise-in 0.5s var(--ease);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}