/* ============================================================
   Evedens Notary — single stylesheet
   Light, airy, generous. Design tokens are defined once, here.
   Nothing else defines colour.
   ============================================================ */

:root {
  /* Surfaces, lightest to darkest */
  --paper: #FBFAF7;
  --paper-2: #F4F1EA;
  --white: #FFFFFF;
  --ink: #17150F;
  --ink-2: #24221B;

  /* Text */
  --body: #4A4740;
  --muted: #6E695E;
  --muted-light: #A9A499;

  /* Lines and accents */
  --line: #E8E4DA;
  --line-strong: #D8D2C5;
  --line-dark: #33302A;
  --bronze: #A8701A;          /* accents and rules, never text-on-bronze */
  --bronze-strong: #966316;   /* solid fills carrying white text (AA 5.13) */
  --bronze-deep: #8A5A12;
  --bronze-light: #C8912F;
  --bronze-soft: #F7EDDA;
  --danger: #A32D2D;

  --maxw: 1160px;
  --pad: clamp(20px, 5vw, 48px);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23, 21, 15, .05);
  --shadow-md: 0 2px 4px rgba(23, 21, 15, .04), 0 12px 28px -14px rgba(23, 21, 15, .18);
  --shadow-lg: 0 2px 6px rgba(23, 21, 15, .05), 0 28px 60px -24px rgba(23, 21, 15, .28);

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- type ---------- */
h1, h2, h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin: 0;
}
h1 { font-size: clamp(46px, 7.4vw, 92px); letter-spacing: -0.048em; }
h2 { font-size: clamp(32px, 4.6vw, 54px); }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--bronze-deep); }

.lede {
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.55;
  color: var(--body);
  max-width: 62ch;
}
.small { font-size: 15px; line-height: 1.6; color: var(--muted); }
.tiny { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.mono { font-family: var(--mono); }

/* ---------- chip eyebrow ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bronze-soft); color: var(--bronze-deep);
  padding: 9px 18px; border-radius: var(--pill);
  font-size: 13.5px; font-weight: 500;
}
.chip::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--pill);
  background: var(--bronze); flex: none;
}
/* A pill that wraps to two lines stops reading as a pill. The fix is to shrink
   the pill on small screens, never to drop words from it — mobile and desktop
   say exactly the same thing. These numbers keep the longest chip on the site
   on one line down to 320px. */
@media (max-width: 400px) {
  .chip { font-size: 12px; padding: 8px 14px; gap: 7px; }
  .chip::before { width: 6px; height: 6px; }
}

/* ---------- checkmark lists ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.checks--center { justify-content: center; }
.checks--stack { flex-direction: column; gap: 15px; }
.checks li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 16px; line-height: 1.45; color: var(--body);
}
.checks li::before {
  content: "\2713";
  flex: none; width: 23px; height: 23px; margin-top: 1px;
  display: inline-grid; place-items: center;
  border-radius: var(--pill);
  background: var(--bronze-soft); color: var(--bronze-deep);
  font-size: 12px; font-weight: 700; line-height: 1;
}

/* ---------- surfaces ---------- */
.band { padding: clamp(72px, 9.5vw, 132px) 0; }
.band--tint { background: var(--paper-2); }
.band--white { background: var(--white); }

/* These widths are in px, not ch: the wrapper inherits the 17px body size, so
   a ch-based cap here would squeeze a 54px heading into a ~320px column. */
.band__head { max-width: 640px; margin-bottom: clamp(38px, 5vw, 60px); }
.band__head--center {
  max-width: 780px; margin-left: auto; margin-right: auto; text-align: center;
}
.band__head .chip { margin-bottom: 22px; }
.band__head p { margin-top: 20px; max-width: 62ch; }
.band__head--center p { margin-left: auto; margin-right: auto; }
.band__head--center h2 { max-width: 16ch; margin-left: auto; margin-right: auto; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 250, 247, .93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 78px;
}
.mark { display: inline-flex; align-items: center; text-decoration: none; }
.mark img { height: 36px; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__links a {
  font-size: 15.5px; font-weight: 500; color: var(--body);
  text-decoration: none; transition: color .15s;
}
.nav__links a:hover { color: var(--ink); }
.nav__note { font-size: 14.5px; color: var(--muted); margin: 0; }
@media (max-width: 820px) {
  .nav__in { height: 68px; }
  .mark img { height: 27px; }
  .nav__links a:not(.btn) { display: none; }
  .nav__note { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1;
  padding: 17px 30px; border-radius: var(--pill);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.btn--primary { background: var(--ink); color: var(--white); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--ink-2); transform: translateY(-1px); }
.btn--bronze { background: var(--bronze-strong); color: var(--white); box-shadow: var(--shadow-md); }
.btn--bronze:hover { background: var(--bronze-deep); transform: translateY(-1px); }
.btn--quiet { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
.btn--quiet:hover { border-color: var(--ink); }
.btn--wide { width: 100%; padding: 19px 30px; font-size: 17px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--bronze); outline-offset: 3px;
}
.nav .btn { padding: 13px 24px; font-size: 15px; }

/* `.nav__links a` outranks the button colour rules on specificity, so buttons
   inside the nav need their colour restated or they inherit the link colour. */
.nav__links a.btn--primary, .nav__links a.btn--primary:hover,
.nav__links a.btn--bronze, .nav__links a.btn--bronze:hover { color: var(--white); }
.nav__links a.btn--quiet, .nav__links a.btn--quiet:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 116px) 0 clamp(60px, 8vw, 104px); }
.hero::before {
  content: ""; position: absolute; inset: -40% 18% auto 18%; height: 620px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(200, 145, 47, .17), rgba(200, 145, 47, 0) 70%);
  pointer-events: none;
}
.hero__in { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* `balance` evens the two lines of the hero headline instead of leaving a long
   first line over a two-word orphan. The 15ch cap sits on the h1 itself, not on
   a wrapper — see the ch-units note in README. */
.hero h1 { max-width: 15ch; margin-top: 26px; text-wrap: balance; }
.hero .lede { margin-top: 26px; max-width: 54ch; text-wrap: pretty; }
.hero .checks { margin-top: 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 40px; }
.hero__note { margin-top: 26px; }

/* ---------- grids ---------- */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* ---------- steps ---------- */
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 30px; }
.step__n {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--pill);
  background: var(--bronze-soft); color: var(--bronze-deep);
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  margin-bottom: 22px;
}
.step h3 { margin-bottom: 10px; }

/* ---------- cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 34px 32px;
  display: flex; flex-direction: column;
}
.card--feature { border-color: var(--bronze); box-shadow: var(--shadow-lg); position: relative; }
.tag {
  position: absolute; top: -14px; left: 32px;
  background: var(--bronze-strong); color: var(--white);
  font-size: 12.5px; font-weight: 500;
  padding: 6px 14px; border-radius: var(--pill);
}
.price {
  font-family: var(--mono); font-size: 46px; font-weight: 500;
  letter-spacing: -0.045em; line-height: 1; color: var(--ink);
  margin: 20px 0 6px;
}
.price sub {
  font-family: var(--sans); font-size: 14px; font-weight: 400;
  color: var(--muted); letter-spacing: 0; vertical-align: baseline;
}
.card ul { list-style: none; margin: 24px 0 0; padding: 0; }
.card li {
  font-size: 15.5px; color: var(--body);
  padding: 12px 0; border-top: 1px solid var(--line);
}
.card li:first-child { border-top: 0; padding-top: 0; }

/* ---------- borough pills ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 12px; }
.pills span {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--pill); padding: 13px 26px;
  font-size: 16px; color: var(--ink);
}

/* ---------- forms ---------- */
.form {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: clamp(26px, 3.4vw, 40px);
}
.form__head { margin-bottom: 28px; }
.form__head h2 { font-size: clamp(26px, 2.9vw, 34px); }
.form__head p { margin-top: 12px; }
.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block; font-size: 14.5px; font-weight: 500;
  color: var(--ink); margin-bottom: 8px;
}
input, select, textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 15px 16px; border: 1px solid var(--line-strong);
  border-radius: var(--r-md); background: var(--paper);
  transition: border-color .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted-light); }
input:focus, select:focus, textarea:focus { background: var(--white); border-color: var(--bronze); }
textarea { resize: vertical; min-height: 96px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 18px; }
.total {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 26px;
}
.total__amt {
  font-family: var(--mono); font-size: 32px; font-weight: 500;
  letter-spacing: -0.03em; color: var(--ink); display: block; margin: 4px 0 2px;
}
.total__lbl { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.err { color: var(--danger); font-size: 14.5px; margin-top: 14px; min-height: 1px; }
.legal { font-size: 13px; color: var(--muted); margin-top: 18px; line-height: 1.6; }

/* ---------- booking band ---------- */
.booking__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
@media (max-width: 960px) { .booking__in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- ad landing page (book.html) ---------- */
.lander { padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.lander::before {
  content: ""; position: absolute; inset: -30% 45% auto -10%; height: 560px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(200, 145, 47, .18), rgba(200, 145, 47, 0) 70%);
  pointer-events: none;
}
.split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  grid-template-areas: "head form" "detail form";
  grid-template-rows: auto 1fr;
  gap: clamp(26px, 3vw, 38px) clamp(34px, 4.5vw, 68px);
  align-items: start;
}
.split__head   { grid-area: head; }
.split__detail { grid-area: detail; }
.split__form   { grid-area: form; }
.split h1 { font-size: clamp(40px, 5vw, 64px); max-width: 14ch; margin-top: 24px; }
.split .lede { margin-top: 22px; max-width: 46ch; }

/* On a phone the pitch must not bury the form. Order becomes: the hook, then
   the form, then the supporting detail for anyone still deciding. */
@media (max-width: 980px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "form" "detail";
    grid-template-rows: auto auto auto;
    gap: 34px;
  }
}

.ratebar {
  margin-top: 30px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 26px; box-shadow: var(--shadow-sm);
  display: flex; flex-wrap: wrap; gap: 18px 34px;
}
.ratebar div { font-size: 13.5px; color: var(--muted); }
.ratebar b {
  display: block; font-family: var(--mono); font-size: 24px; font-weight: 500;
  letter-spacing: -0.03em; color: var(--ink); margin-bottom: 4px;
}
.ratebar p { flex-basis: 100%; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 14px; }
.faq details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 4px 26px;
  transition: border-color .15s;
}
.faq details[open] { border-color: var(--line-strong); }
.faq summary {
  cursor: pointer; padding: 22px 0; font-size: 17.5px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.02em; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 22px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; color: var(--bronze-deep);
  font-size: 22px; font-weight: 400; line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq p { padding: 0 0 24px; color: var(--body); max-width: 68ch; font-size: 16px; }

/* ---------- legal pages ----------
   These are documents, not landing pages. Someone opens them to check one
   clause, so they get their own type scale rather than inheriting the hero's.

   The cap that broke this lived on .doc__head, not on the h1: 26ch of the
   wrapper's inherited 17px resolves to 253px, so a 62px headline wrapped to
   seven lines and used 10% of the viewport at 2560px. Any ch cap intended for
   a heading belongs ON the heading, where ch scales with the heading's size. */
.doc { padding: clamp(52px, 7vw, 92px) 0 clamp(64px, 9vw, 110px); }
.doc__head { margin-bottom: 46px; }
.doc__head h1 { font-size: clamp(30px, 4vw, 52px); max-width: 24ch; }
.doc__head .chip { margin-bottom: 24px; }
.doc__head .lede { margin-top: 22px; max-width: 56ch; }
.doc__stamp { font-size: 14px; color: var(--muted); margin-top: 24px; }
.doc section {
  max-width: 68ch; padding-top: 36px;
  border-top: 1px solid var(--line); margin-top: 36px;
}
.doc section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.doc h2 { font-size: 22px; letter-spacing: -0.03em; margin-bottom: 16px; }
.doc h3 { margin: 28px 0 10px; font-size: 17px; }
.doc p { margin-bottom: 16px; }
.doc p:last-child { margin-bottom: 0; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 10px; }

/* ---------- confirmation ---------- */
.confirm { padding: clamp(64px, 9vw, 120px) 0; }
.confirm__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.confirm h1 { max-width: 16ch; margin-top: 26px; font-size: clamp(40px, 6vw, 72px); }
.confirm .lede { margin-top: 24px; }
.confirm .grid { margin-top: 52px; text-align: left; width: 100%; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--muted-light); padding: clamp(56px, 7vw, 84px) 0 48px; }
.foot__in {
  display: flex; flex-wrap: wrap; gap: 28px;
  justify-content: space-between; align-items: flex-start;
}
.foot img { height: 30px; width: auto; display: block; }
.foot a { color: var(--muted-light); text-decoration: none; }
.foot a:hover { color: var(--white); }
.foot__links { display: flex; flex-wrap: wrap; gap: 26px; font-size: 15.5px; }
.foot .tiny {
  margin-top: 40px; border-top: 1px solid var(--line-dark);
  padding-top: 26px; color: var(--muted-light); max-width: 80ch;
}
.foot .mono { display: block; margin-top: 12px; font-size: 12.5px; color: var(--muted-light); }

/* ============================================================
   Photography
   ------------------------------------------------------------
   Four slots. Each ships with a warm placeholder file at the final
   dimensions, so aspect ratio, spacing and layout are already correct and
   nothing 404s. Replacing a photo means dropping a file over the same
   filename in /assets/img — no markup change and no layout shift, because
   width and height are declared on every <img>.
   ============================================================ */

.shot {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--paper-2);
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.shot--wide  { aspect-ratio: 8 / 3; }
.shot--panel { aspect-ratio: 4 / 3; }

/* The hero column centres its children, so the panel has to opt out of that
   to span the full container width. */
.hero__shot {
  align-self: stretch; width: 100%;
  margin-top: clamp(44px, 6vw, 76px);
  box-shadow: var(--shadow-lg);
}

/* Full-bleed breather between sections. Deliberately edge to edge and square,
   so it reads as a rule rather than as another card. */
.strip { display: block; width: 100%; height: auto; aspect-ratio: 16 / 3; object-fit: cover; }

.media-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 900px) { .media-split { grid-template-columns: minmax(0, 1fr); } }

.booking-shot { margin-bottom: 30px; }