/* Harv Agency — section styles, in page order. */

/* ============ hero ============ */

.hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(7rem, 5rem + 8vw, 10rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  overflow: clip;
}

/* dawn cloud bank: three SVG layers drifting at different speeds. Drawn
   inline so there is no image request and it recolours with the palette. */
.hero__sky {
  position: absolute;
  inset: 0 -8% -6% -8%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
  mask-image: linear-gradient(180deg, black 66%, transparent 99%);
}

.hero__sky svg {
  width: 100%;
  height: 100%;
}

.sky__band { will-change: transform; }

.sky__band--far { animation: drift 78s linear infinite; opacity: 0.75; }
.sky__band--mid { animation: drift 54s linear infinite; opacity: 0.8; }
.sky__band--near { animation: drift 38s linear infinite; }

@keyframes drift {
  from { transform: translate3d(-8%, 0, 0); }
  50% { transform: translate3d(8%, 0, 0); }
  to { transform: translate3d(-8%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sky__band { animation: none; }
}

.hero .wrap { position: relative; z-index: 1; }

/* availability sits as plain type, no pill around it */
.hero__status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

/* each phrase wraps as a unit so the chip never breaks mid-sentence */
.hero__status b,
.hero__status i { white-space: nowrap; }

.hero__status b { font-weight: 600; }

.hero__status i {
  font-style: normal;
  color: var(--on-canvas-mute);
}

/* The longest word, IMPOSSIBLE, is ~6.9em wide in Archivo at this weight and
   width. Sizing off the available column instead of a blind clamp keeps the
   headline on one line at every viewport rather than running off the edge. */
.hero__head {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  font-size: min(6rem, calc((100vw - var(--gutter) * 2) / 6.9));
}

/* the drag/warp headline. Each character is its own inline-block so the
   pointer can push it around; letters stay selectable and searchable. */
.warp {
  display: block;
  cursor: grab;
  touch-action: pan-y;
}

.warp:active { cursor: grabbing; }

.warp__row { display: block; white-space: nowrap; }

.warp__c {
  display: inline-block;
  will-change: transform;
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) rotate(var(--wr, 0deg));
  transition: transform 620ms var(--out-expo);
}

.warp.is-live .warp__c { transition: none; }

.warp__c--space { width: 0.26em; }

.hero__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.1rem;
  margin-top: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--on-canvas-mute);
}

.hero__hint {
  color: color-mix(in oklab, var(--on-canvas-mute) 88%, transparent);
}

.star {
  font-family: var(--sans);
  font-size: 1.15em;
  font-weight: 500;
  color: var(--flare);
  line-height: 1;
}

.hero__grid { margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.hero__copy {
  font-size: var(--step-1);
  line-height: 1.3;
  max-width: 24ch;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
}

/* ============ how we work ============ */

.usp { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.usp__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid oklch(0.145 0 0 / 0.16);
}

.usp__item {
  position: relative;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem) clamp(1rem, 0.6rem + 1.2vw, 2rem)
           clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem) 0;
}

.usp__item + .usp__item {
  padding-left: clamp(1rem, 0.6rem + 1.2vw, 2rem);
  border-left: 1px solid oklch(0.145 0 0 / 0.16);
}

/* the rule above each item draws itself in orange on hover */
.usp__item::before {
  content: '';
  position: absolute;
  inset: -1px auto auto 0;
  width: 0;
  height: 2px;
  background: var(--flare);
  transition: width var(--mid) var(--out-quint);
}

.usp__item:hover::before { width: 100%; }

.usp__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--on-canvas-mute);
  transition: color var(--fast) var(--out-quint);
}

.usp__item:hover .usp__k { color: var(--flare); }

.usp__t {
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem);
  font-weight: 760;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.usp__item p {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--on-canvas-mute);
  max-width: 26ch;
}

@media (max-width: 900px) {
  .usp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usp__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .usp__item:nth-child(n + 3) { border-top: 1px solid oklch(0.145 0 0 / 0.16); }
  .usp__t { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
}

@media (max-width: 560px) {
  .usp__list { grid-template-columns: minmax(0, 1fr); }
  .usp__item + .usp__item {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid oklch(0.145 0 0 / 0.16);
  }
}

/* ============ ticker ============ */

.ticker {
  padding-block: 0.85rem;
  border-block: 1px solid var(--ink-line);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: slide 38s linear infinite;
}

/* two identical groups, each carrying its own trailing gap, so translating
   the track by exactly -50% lands seamlessly */
.ticker__group {
  display: flex;
  gap: 2.5rem;
  padding-right: 2.5rem;
}

.ticker__track span {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
  white-space: nowrap;
}

.ticker__track em {
  font-style: normal;
  color: var(--flare-on-ink);
}

@keyframes slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ============ work ============ */

.work { padding-block: var(--section-y); }

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}

.work__title {
  font-size: var(--step-2);
  letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 112;
  font-weight: 750;
}

.work__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

@media (max-width: 980px) {
  .work__stage { grid-template-columns: minmax(0, 1fr); }
}

/* laptop */
.laptop { perspective: 1400px; }

.laptop__lid {
  position: relative;
  padding: 1.1% 1.1% 1.1%;
  border-radius: clamp(10px, 1.1vw, 18px);
  background: linear-gradient(170deg, oklch(0.42 0.008 250), oklch(0.28 0.01 250));
  box-shadow: 0 32px 60px -28px oklch(0 0 0 / 0.75),
              0 2px 0 oklch(0.55 0.01 250 / 0.5) inset;
}

.laptop__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: clamp(6px, 0.6vw, 10px);
  overflow: hidden;
  background: var(--canvas);
}

.laptop__screen img {
  width: 100%;
  height: auto;
  transform: translate3d(0, var(--shot-y, 0px), 0);
  transition: transform 900ms var(--out-quint);
}

.laptop.is-playing .laptop__screen img {
  transition: transform 14s linear;
}

.laptop__glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, oklch(1 0 0 / 0.14) 0%, transparent 32%, transparent 70%, oklch(1 0 0 / 0.06) 100%);
}

.laptop__notch {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 16%;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: oklch(0.34 0.008 250);
}

.laptop__base {
  position: relative;
  height: clamp(9px, 0.95vw, 13px);
  margin-inline: -3.2%;
  border-radius: 0 0 clamp(7px, 0.8vw, 11px) clamp(7px, 0.8vw, 11px);
  background: linear-gradient(180deg, oklch(0.52 0.008 250), oklch(0.31 0.01 250) 58%, oklch(0.23 0.01 250));
  box-shadow: 0 26px 34px -26px oklch(0 0 0 / 0.9);
}

/* the groove the lid lifts out of */
.laptop__base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 13%;
  height: clamp(3px, 0.35vw, 5px);
  border-radius: 0 0 7px 7px;
  background: oklch(0.24 0.01 250);
}

.work__meta {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

.work__name {
  font-size: var(--step-2);
  font-weight: 780;
  font-variation-settings: 'wdth' 115;
  letter-spacing: -0.032em;
  line-height: 1;
}

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

.chip {
  padding: 0.4em 0.8em;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--on-ink-mute);
}

.work__note {
  max-width: 34ch;
  color: var(--on-ink-mute);
}

.work__slot {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  border: 1px dashed var(--ink-line);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.work__slot p {
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  max-width: 30ch;
}

/* ============ statement ============ */

.statement { padding-block: var(--section-y); }

.statement__quote {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.3rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 116;
  line-height: 0.98;
  letter-spacing: -0.038em;
  max-width: 17ch;
  text-wrap: balance;
}

.statement__quote em {
  font-style: normal;
  color: var(--flare);
}

.statement__body {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--on-canvas-mute);
}

.stmt {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 1.2rem + 4vw, 5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .stmt { grid-template-columns: minmax(0, 1fr); }
}

.stmt__panel { border-top: 1px solid oklch(0.145 0 0 / 0.16); }

.stmt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid oklch(0.145 0 0 / 0.12);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.stmt__row span { color: var(--on-canvas-mute); }
.stmt__row b { font-weight: 600; text-align: right; }

/* the tool cycles, because the studio is actually in one of them right now */
.stmt__now {
  color: var(--flare);
  transition: opacity var(--fast) linear;
}

.stmt__now.is-out { opacity: 0; }

.caps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid oklch(0.145 0 0 / 0.14);
}

.caps li {
  padding: 0.5em 1em;
  border: 1px solid oklch(0.145 0 0 / 0.18);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--on-canvas-mute);
  transition: color var(--fast) var(--out-quint),
              border-color var(--fast) var(--out-quint),
              transform var(--fast) var(--out-quint);
}

.caps li:hover {
  color: var(--carbon);
  border-color: var(--flare);
  transform: translateY(-2px);
}

/* ============ services ============ */

.services { padding-block: var(--section-y); background: var(--canvas-sunk); }

.services__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.services__title {
  font-size: var(--step-3);
  font-weight: 800;
  font-variation-settings: 'wdth' 116;
  letter-spacing: -0.038em;
  line-height: 0.95;
  max-width: 15ch;
}

.svc {
  position: relative;
  border-top: 1px solid oklch(0.145 0 0 / 0.16);
}

/* the row fills with ink from the left on hover, and stays filled while open */
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mid) var(--out-quint);
  pointer-events: none;
}

.svc:hover::before,
.svc:has([aria-expanded='true'])::before { transform: scaleX(1); }

.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 1rem clamp(0.9rem, 0.4rem + 1.8vw, 2.6rem);
  width: 100%;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem) clamp(0.9rem, 0.5rem + 1.5vw, 1.75rem);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: color var(--mid) var(--out-quint);
}

.svc:hover .svc__row,
.svc__row[aria-expanded='true'] { color: var(--on-ink); }

.svc__k {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--on-canvas-mute);
  transition: color var(--mid) var(--out-quint);
}

.svc:hover .svc__k,
.svc__row[aria-expanded='true'] .svc__k { color: var(--flare-on-ink); }

.svc__name {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  font-weight: 760;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.032em;
  line-height: 1.02;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  transition: color var(--fast) var(--out-quint);
}


.svc__lock {
  flex: none;
  width: 0.8em;
  height: 0.8em;
  margin-top: 0.17em;
  opacity: 0.55;
}

.svc:last-of-type { border-bottom: 1px solid oklch(0.145 0 0 / 0.16); }

.svc__blurb {
  color: var(--on-canvas-mute);
  max-width: 42ch;
  transition: color var(--mid) var(--out-quint);
}

.svc:hover .svc__blurb,
.svc__row[aria-expanded='true'] .svc__blurb { color: var(--on-ink-mute); }

.svc__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in oklab, currentColor 24%, transparent);
  border-radius: 50%;
  flex: none;
  transition: background var(--fast) var(--out-quint),
              color var(--fast) var(--out-quint),
              rotate var(--mid) var(--out-quint);
}

.svc__row[aria-expanded='true'] .svc__toggle {
  rotate: 45deg;
  background: var(--flare);
  color: var(--carbon);
  border-color: var(--flare);
}

.svc__panel {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mid) var(--out-quint);
}

.svc__panel > div { overflow: hidden; }

.svc__row[aria-expanded='true'] + .svc__panel { grid-template-rows: 1fr; }

.svc__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.5rem clamp(1rem, 0.5rem + 2vw, 3rem);
  padding: 0 clamp(0.9rem, 0.5rem + 1.5vw, 1.75rem)
           clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  color: var(--on-ink);
}

.svc__deliver {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-column: 2;
}

.svc__deliver li {
  padding: 0.45em 0.85em;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--on-ink-mute);
  transition: color var(--fast) var(--out-quint),
              border-color var(--fast) var(--out-quint);
}

.svc__deliver li:hover { color: var(--on-ink); border-color: var(--flare-on-ink); }

.svc__note {
  grid-column: 1;
  grid-row: 1;
  color: var(--on-ink-mute);
  max-width: 34ch;
}

@media (max-width: 860px) {
  .svc__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .svc__blurb { grid-column: 1 / -1; }
  .svc__inner { grid-template-columns: minmax(0, 1fr); }
  .svc__deliver, .svc__note { grid-column: 1; }
  .svc__note { grid-row: auto; }
}

/* Without JavaScript the toggles cannot fire, so the panels stay open and the
   plus signs disappear: everything is readable, nothing is trapped. */
html:not(.js) .svc__panel { grid-template-rows: 1fr; }

html:not(.js) .svc__toggle { display: none; }

/* the open panel is styled for the ink fill, so switch the fill on too,
   otherwise the deliverables are muted grey on a light background */
html:not(.js) .svc::before { transform: scaleX(1); }
html:not(.js) .svc__row { color: var(--on-ink); }
html:not(.js) .svc__k { color: var(--flare-on-ink); }
html:not(.js) .svc__blurb { color: var(--on-ink-mute); }

/* ============ difference ============ */

.diff { padding-block: var(--section-y); }

.diff__title {
  font-size: var(--step-3);
  font-weight: 800;
  font-variation-settings: 'wdth' 116;
  letter-spacing: -0.038em;
  line-height: 0.95;
  max-width: 16ch;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.diff__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

.diff__col {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  border: 1px solid var(--ink-line);
  border-radius: 16px;
}

.diff__col--them { color: var(--on-ink-mute); }

.diff__col--us {
  border-color: color-mix(in oklab, var(--flare-on-ink) 55%, transparent);
  background: color-mix(in oklab, var(--flare-on-ink) 7%, transparent);
}

.diff__lab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.diff__col--us .diff__lab { color: var(--flare-on-ink); border-color: color-mix(in oklab, var(--flare-on-ink) 30%, transparent); }

.diff__list li {
  display: flex;
  gap: 0.75rem;
  padding-block: 0.7rem;
  line-height: 1.45;
}

.diff__list li + li { border-top: 1px solid color-mix(in oklab, var(--ink-line) 60%, transparent); }

.diff__list svg { flex: none; margin-top: 0.28em; }

/* ============ pricing ============ */

.price { padding-block: var(--section-y); }

.price__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.price__title {
  font-size: var(--step-3);
  font-weight: 800;
  font-variation-settings: 'wdth' 116;
  letter-spacing: -0.038em;
  line-height: 0.95;
  max-width: 12ch;
}

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: start;
}

@media (max-width: 940px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
}

.calc__panel {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  border: 1px solid oklch(0.145 0 0 / 0.16);
  border-radius: 18px;
  background: var(--canvas);
}

.calc__stopname {
  font-size: var(--step-2);
  font-weight: 780;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.03em;
  line-height: 1;
}

.calc__stopdesc {
  margin-top: 0.75rem;
  color: var(--on-canvas-mute);
  max-width: 40ch;
  min-height: 3.1em;
}

/* the lever */
.lever { margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }

.lever__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: none;
  cursor: grab;
  display: block;
}

.lever__input:active { cursor: grabbing; }

.lever__input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--flare) var(--fill, 0%), oklch(0.145 0 0 / 0.12) var(--fill, 0%));
}

.lever__input::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: oklch(0.145 0 0 / 0.12);
}

.lever__input::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--flare);
}

.lever__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border: 3px solid var(--canvas);
  border-radius: 50%;
  background: var(--carbon);
  box-shadow: 0 4px 14px -4px oklch(0 0 0 / 0.5);
  transition: scale var(--fast) var(--out-quint);
}

.lever__input::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 3px solid var(--canvas);
  border-radius: 50%;
  background: var(--carbon);
  box-shadow: 0 4px 14px -4px oklch(0 0 0 / 0.5);
}

.lever__input:active::-webkit-slider-thumb { scale: 1.12; }

/* Each label is centred on the exact point the thumb stops at, so the dot
   always sits directly above its own word. The thumb is 30px wide, so its
   centre travels from 15px to width - 15px. */
.lever__stops {
  position: relative;
  height: 52px;
  margin-top: 0.1rem;
}

.lever__stops button {
  position: absolute;
  top: 0;
  left: calc(15px + (100% - 30px) * var(--x));
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.35rem;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--on-canvas-mute);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  min-height: 44px;
  transition: color var(--fast) var(--out-quint);
}

/* the tick that ties the word to its point on the track */
.lever__stops button::before {
  content: '';
  width: 1px;
  height: 8px;
  background: oklch(0.145 0 0 / 0.22);
  transition: background var(--fast) var(--out-quint),
              height var(--fast) var(--out-quint);
}

.lever__stops button:hover { color: var(--on-canvas); }
.lever__stops button:hover::before { background: oklch(0.145 0 0 / 0.45); }

.lever__stops button[aria-current='true'] {
  color: var(--carbon);
  font-weight: 600;
}

.lever__stops button[aria-current='true']::before {
  background: var(--flare);
  height: 11px;
}

@media (max-width: 620px) {
  .lever__stops { height: 62px; }
  .lever__stops button {
    font-size: 0.64rem;
    white-space: normal;
    max-width: 5.5em;
  }
}

.addons {
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  border-top: 1px solid oklch(0.145 0 0 / 0.14);
}

.addons__lab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  color: var(--on-canvas-mute);
}

.addons__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.addon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.55em 1em;
  border: 1px solid oklch(0.145 0 0 / 0.18);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--fast) var(--out-quint),
              background var(--fast) var(--out-quint);
}

.addon:hover { border-color: oklch(0.145 0 0 / 0.4); }

.addon input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.addon__box {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid oklch(0.145 0 0 / 0.32);
  border-radius: 5px;
  transition: background var(--fast) var(--out-quint),
              border-color var(--fast) var(--out-quint);
}

.addon__box::after {
  content: '';
  position: absolute;
  inset: 3px 3px 4px;
  border-left: 2px solid var(--carbon);
  border-bottom: 2px solid var(--carbon);
  rotate: -45deg;
  opacity: 0;
  transition: opacity var(--fast) linear;
}

.addon input:checked ~ .addon__box { background: var(--flare); border-color: var(--flare); }
.addon input:checked ~ .addon__box::after { opacity: 1; }
.addon input:checked ~ .addon__name { font-weight: 600; }
.addon:has(input:checked) { border-color: var(--flare); background: color-mix(in oklab, var(--flare) 9%, transparent); }
.addon input:focus-visible ~ .addon__box { outline: 2px solid var(--focus); outline-offset: 3px; }

.addon__name { font-size: 0.9rem; }

.addon__cost {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--on-canvas-mute);
}

.addon--locked { cursor: default; border-style: dashed; }
.addon--locked:hover { border-color: oklch(0.145 0 0 / 0.18); }

/* total */
.total {
  position: sticky;
  top: 96px;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  border-radius: 18px;
  background: var(--ink);
  color: var(--on-ink);
}

.total__fig {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  margin-top: 0.75rem;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.2rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 104;
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--flare-on-ink);
}

.total__plus {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0;
  transition: opacity var(--fast) linear;
}

.total.is-max .total__plus { opacity: 1; }

.total__terms {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--on-ink-mute);
}

.total__lines {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--on-ink-mute);
}

.total__lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.3rem;
}

.total__lines li span:last-child { color: var(--on-ink); font-variant-numeric: tabular-nums; }

.total__head {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink-line);
}

.total__extra span:first-child::before {
  content: '+ ';
  color: var(--flare-on-ink);
}

.total__hint span:first-child {
  max-width: 30ch;
  line-height: 1.5;
}

.addons__note {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--on-canvas-mute);
}

.total .btn { margin-top: 1.5rem; width: 100%; justify-content: center; }

@media (max-width: 940px) {
  .total { position: static; }
}

/* care plans */
.care {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

@media (max-width: 760px) {
  .care { grid-template-columns: minmax(0, 1fr); }
}

.care__intro {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.care__intro h3 {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.care__intro p { color: var(--on-canvas-mute); max-width: 46ch; }

.plan {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  border: 1px solid oklch(0.145 0 0 / 0.16);
  border-radius: 16px;
}

.plan--lead { background: var(--ink); color: var(--on-ink); border-color: transparent; }

.plan__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.plan__name { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; }

.plan__cost {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan--lead .plan__cost { color: var(--flare-on-ink); }

.plan__list { display: grid; gap: 0.55rem; }

.plan__list li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.94rem;
  line-height: 1.45;
}

.plan__list svg { flex: none; margin-top: 0.32em; opacity: 0.55; }

/* ============ how it starts ============ */

.intake {
  padding-block: var(--section-y);
  background: var(--canvas-sunk);
}

.intake__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.intake__title {
  font-size: var(--step-3);
  font-weight: 800;
  font-variation-settings: 'wdth' 116;
  letter-spacing: -0.038em;
  line-height: 0.95;
}

.intake__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.intake__step {
  position: relative;
  padding-top: 2.6rem;
}

/* one line runs the length of the row, with a node per step */
.intake__step::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  right: calc(-1 * clamp(1rem, 0.5rem + 1.5vw, 2rem));
  height: 1px;
  background: oklch(0.145 0 0 / 0.18);
}

.intake__step:last-child::before { right: 0; }

.intake__step::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border: 1px solid oklch(0.145 0 0 / 0.28);
  border-radius: 50%;
  background: var(--canvas-sunk);
  transition: background var(--mid) var(--out-quint),
              border-color var(--mid) var(--out-quint),
              scale var(--mid) var(--out-quint);
}

.intake__step:hover::after {
  background: var(--flare);
  border-color: var(--flare);
  scale: 1.25;
}

.intake__k {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--on-canvas-mute);
  transition: color var(--fast) var(--out-quint);
}

.intake__step:hover .intake__k { color: var(--flare); }

.intake__step h3 {
  margin-top: 0.7rem;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  font-weight: 720;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

.intake__step p {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--on-canvas-mute);
}

@media (max-width: 900px) {
  .intake__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intake__step::before { right: 0; }
}

@media (max-width: 520px) {
  .intake__list { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

/* ============ booking page ============ */

.bk { padding-block: clamp(6.5rem, 5rem + 7vw, 9rem) var(--section-y); }

/* calendar on the right, in view from the first paint; everything you would
   want to read while deciding sits beside it, not above it */
.bk__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: start;
}

@media (max-width: 1080px) {
  .bk__grid { grid-template-columns: minmax(0, 1fr); }
}

.bk__title {
  margin-top: clamp(1.1rem, 0.9rem + 1.2vw, 1.75rem);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem);
}

.bk__lede {
  margin-top: clamp(1.1rem, 0.9rem + 1.2vw, 1.6rem);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--on-canvas-mute);
  max-width: 48ch;
  text-wrap: pretty;
}

/* one striped list shared by the facts and the steps */
.bk__rows {
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  border-top: 1px solid oklch(0.145 0 0 / 0.16);
}

.bk__rows > div,
.bk__rows > li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0.6rem;
  margin-inline: -0.6rem;
  border-bottom: 1px solid oklch(0.145 0 0 / 0.12);
  transition: background var(--fast) var(--out-quint);
}

.bk__rows > div:hover,
.bk__rows > li:hover { background: var(--canvas-sunk); }

.bk__facts > div { justify-content: space-between; }

.bk__facts dt {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--on-canvas-mute);
}

.bk__facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
}

.bk__h2 {
  margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  font-size: var(--step-1);
  font-weight: 720;
  letter-spacing: -0.024em;
}

.bk__n {
  flex: none;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--flare);
}

.bk__steps p {
  margin: 0;
  line-height: 1.5;
  color: var(--on-canvas-mute);
}

.bk__prep {
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--on-canvas-mute);
  text-wrap: pretty;
}

.bk__alt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid oklch(0.145 0 0 / 0.16);
}

.bk__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--flare);
  text-decoration: none;
  transition: color var(--fast) var(--out-quint);
}

.bk__link:hover { color: var(--carbon); }

.bk__brief {
  margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  border-radius: 14px;
  background: var(--ink);
  color: var(--on-ink);
}

.bk__brief .label { color: var(--flare-on-ink); }

.bk__scope {
  margin-top: 0.5rem;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bk__extras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.bk__extras li {
  padding: 0.35em 0.7em;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--on-ink-mute);
}

.bk__briefnote {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--on-ink-mute);
}

/* the calendar. Height is reserved up front so the embed does not shove the
   page around when it mounts. */
.bk__cal {
  position: relative;
  min-height: 1060px;
  padding: clamp(0.35rem, 0.25rem + 0.5vw, 0.7rem);
  border: 1px solid oklch(0.145 0 0 / 0.16);
  border-radius: 18px;
  background: var(--canvas);
  overflow: hidden;
}

@media (max-width: 620px) { .bk__cal { min-height: 900px; } }

#harv-cal-inline { min-height: 1040px; }

.bk__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  pointer-events: none;
  transition: opacity var(--mid) var(--out-quint);
}

.bk__loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--canvas-sunk);
  opacity: 0.55;
}

.bk__loading span {
  position: relative;
  width: 46%;
  height: 10px;
  border-radius: 5px;
  background: oklch(0.145 0 0 / 0.1);
  animation: shimmer 1.5s ease-in-out infinite;
}

.bk__loading span:nth-child(2) { width: 34%; animation-delay: 0.15s; }
.bk__loading span:nth-child(3) { width: 40%; animation-delay: 0.3s; }

.bk__loading p {
  position: relative;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--on-canvas-mute);
}

@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.bk__cal.is-ready .bk__loading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .bk__loading span { animation: none; }
}

.bk__nojs {
  position: relative;
  padding: 2rem;
  color: var(--on-canvas-mute);
  line-height: 1.6;
}