/* Alvaya Health — one page. Graphite + Amber on cream, Albert Sans. */

:root {
  --ink: #343235;
  --amber: #D6A23D;
  --cream: #FAF6EC;
  --taupe: #C9BEB0;
  --muted: #6f6a66;
  --sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(20px, 6vw, 110px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 18px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, p { margin: 0; }
a { color: inherit; }
::selection { background: var(--amber); color: var(--ink); }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .7em; width: max-content;
  padding: 1.05em 1.7em; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--amber); color: var(--ink); text-decoration: none;
  font: 500 17px/1 var(--sans); letter-spacing: .01em;
  transition: background .25s, color .25s;
}
.btn i { font-style: normal; transition: transform .25s var(--ease); }
.btn:hover { background: var(--ink); color: var(--cream); }
.btn:hover i { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---- The hero: the logo big, the line, the way in ------------------------ */

.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(48px, 8vh, 96px) var(--gut); text-align: center;
}
.hero__logo { margin: 0; font-size: 0; }
/* Any shape of logo fits: wide ones are held by the width, tall ones by the
   height, so an upload never needs CSS. */
.hero__logo img { width: min(560px, 78vw); height: auto; max-height: 54vh; max-height: 54svh; object-fit: contain; }
.hero__say {
  margin-top: clamp(28px, 5vh, 52px);
  font-size: clamp(22px, 2.3vw, 36px); line-height: 1.22; font-weight: 300; letter-spacing: -.01em;
}
.hero__say em { font-style: italic; }
.hero .btn { margin-top: clamp(28px, 4.5vh, 44px); }

/* The opening, once a visit: the logo rises in, then the line, then the way in. */
html.open .hero > * { animation: rise 1s var(--ease) both; }
html.open .hero > :nth-child(1) { animation-duration: 1.3s; animation-delay: .15s; }
html.open .hero > :nth-child(2) { animation-delay: .7s; }
html.open .hero > :nth-child(3) { animation-delay: 1s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ---- The note: graphite statement beside the cream form ------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 92vh; }
.split__ink, .split__form { padding: clamp(64px, 10vw, 150px) var(--gut); display: flex; flex-direction: column; justify-content: center; }
.split__ink { background: var(--ink); color: var(--cream); }

.big { font-size: clamp(40px, 5vw, 84px); line-height: 1.02; font-weight: 300; letter-spacing: -.025em; }
.big em { font-style: italic; color: var(--amber); }
.lede { margin-top: 1.5em; max-width: 26em; font-size: clamp(18px, 1.45vw, 22px); font-weight: 300; line-height: 1.55; }
.split__ink .lede { color: rgba(250, 246, 236, .78); }

.form { width: 100%; max-width: 520px; display: grid; gap: 26px; }
.field > span {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.field small { margin-left: .5em; font-size: 12.5px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: 10px 0; border: 0; border-bottom: 1.5px solid var(--taupe); border-radius: 0;
  background: transparent; color: var(--ink); font: 400 19px/1.4 var(--sans);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 3.2em; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 1.5px 0 var(--ink); }
.field.bad input { border-color: #a5432e; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { min-height: 1.4em; margin-bottom: -10px; font-size: 15px; color: #a5432e; }
.form .btn { margin-top: 2px; }

.thanks { max-width: 520px; outline: none; }
.thanks img { height: 110px; width: auto; max-width: 200px; object-fit: contain; margin-bottom: 30px; }
.thanks .lede { color: var(--muted); }
html.open .thanks:not([hidden]) > * { animation: rise .7s var(--ease) both; }

/* ---- Footer + the SIDES credit -------------------------------------------- */

.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 28px var(--gut) calc(28px + env(safe-area-inset-bottom));
  background: var(--cream); color: var(--muted); font-size: 14px;
  border-top: 1px solid var(--taupe);
}
.foot__brand { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.foot__brand img { height: 56px; width: auto; max-width: 160px; object-fit: contain; }
.foot__reach { display: flex; gap: 18px; flex-wrap: wrap; }
.foot__reach:empty { display: none; }
.foot__reach a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--taupe); }
.foot__reach a:hover { border-color: var(--ink); }

.credit { position: relative; display: inline-flex; }
.madeby {
  display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); text-decoration: none;
  letter-spacing: .08em; font-size: 12px; opacity: .8; transition: opacity .2s;
}
.madeby:hover { opacity: 1; }
.madeby img { width: auto; height: 22px; }
.ccard {
  position: absolute; right: -.5rem; bottom: calc(100% + 14px); width: min(290px, calc(100vw - 32px)); z-index: 20;
  pointer-events: none; opacity: 0; transform: translateY(10px);
  transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .3, 1.2);
}
.ccard::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.credit:hover .ccard, .credit:focus-within .ccard, .credit.open .ccard { pointer-events: auto; opacity: 1; transform: none; }
.ccard__in {
  position: relative; display: block; padding: 1px; border-radius: 14px; overflow: hidden; text-align: left;
  background: linear-gradient(135deg, #5e4f36, #e9d3a4 25%, #9c845c 45%, #f4e2bb 60%, #5e4f36 85%);
  box-shadow: 0 30px 60px -20px #000, 0 0 0 1px rgba(0, 0, 0, .6);
}
.ccard__in > * { position: relative; z-index: 1; }
.ccard__in::before {
  content: ""; position: absolute; inset: 1px; border-radius: 13px; z-index: 0;
  background: radial-gradient(300px 160px at 100% 0%, rgba(0, 209, 255, .14), transparent 70%), linear-gradient(180deg, #171717, #0b0b0b);
}
.ccard__in::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(240px circle at var(--sx, 30%) var(--sy, 0%), rgba(255, 236, 190, .22), transparent 60%);
}
.ccard__top { display: block; padding: .9rem 1.1rem 0; font: 600 .56rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #e9d3a4; }
.ccard__big { display: block; padding: .6rem 1.1rem 0; font: 600 1.45rem/.95 var(--sans); text-transform: uppercase; color: #fff; }
.ccard__say { display: block; padding: .85rem 1.1rem 0; font: 400 .74rem/1.5 system-ui, sans-serif; color: #c9c9c9; }
.ccard__url { display: inline-flex; align-items: center; gap: .4rem; margin: .8rem 1.1rem 1rem; font: 600 .72rem/1 var(--sans); letter-spacing: .04em; color: #00d1ff !important; text-decoration: none; }
.ccard__url::after { content: "\2192"; transition: transform .2s; }
.ccard__url:hover::after { transform: translateX(3px); }
.ccard__ig { display: flex; width: max-content; align-items: center; gap: .4rem; margin: -.35rem 1.1rem 1rem; font: 600 .72rem/1 var(--sans); letter-spacing: .04em; color: #c9c9c9 !important; text-decoration: none; transition: color .2s; }
.ccard__ig:hover { color: #fff !important; }
.ccard__ig svg { width: 13px; height: 13px; flex: none; display: block; }

/* ---- Phones and narrow tablets ------------------------------------------- */

@media (max-width: 860px) {
  .hero__logo img { width: 74vw; max-height: 44svh; }

  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split__ink, .split__form { padding-top: 72px; padding-bottom: 72px; }

  .foot { flex-direction: column; align-items: flex-start; }
  .ccard { right: auto; left: -.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}