/* averykolichhomes.com
   Direction: "The split stage", seed 882180843 (tasteskill v2).
   Type: Rokkitt 800 display / Literata text.  Colour: charcoal and sage.

   The one hard constraint that shapes this file: Ohio Admin. Code 1301:5-1-02
   and 1301:5-1-21 require the brokerage name at equal or greater prominence
   than the agent's and the team's. So there is no size step that the agent
   name may use and the brokerage may not. The .lockup rules below set all
   three names from the same step, and that is a legal requirement, not taste.
   Do not make "Avery Kolich" bigger. */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/assets/fonts/bodoni-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('/assets/fonts/franklin-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  --bg: #141d33;
  --surface: #1b2541;
  --ink: #f1f1ee;
  --muted: #93a0bb;
  --accent: #c2a269;
  --accent-ink: #141d33;
  --field: #e9e9e6;
  --field-ink: #1a1a18;

  --display: 'Bodoni Moda', 'Didot', Georgia, 'Times New Roman', serif;
  --text: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step-small:   clamp(0.8125rem, 0.79rem + 0.10vw, 0.9375rem);
  --step-body:    clamp(1rem,     0.95rem + 0.25vw, 1.1875rem);
  --step-lead:    clamp(1.1875rem, 1.05rem + 0.65vw, 1.5rem);
  --step-head:    clamp(1.75rem,  1.30rem + 1.70vw, 2.875rem);
  --step-display: clamp(2rem,     1.35rem + 2.70vw, 3.375rem);

  --gutter: clamp(1.125rem, 2.4vw, 2rem);
  --gap: clamp(8rem, 12vw, 15rem);
  --measure: 46ch;
  --dur: 620ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
sup { font-size: .78em; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* taste-skill-ignore: a 1px box is the screen-reader-only utility, not a rule. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 50;
  background: var(--accent); color: var(--accent-ink);
  padding: .75rem 1.25rem; font-size: var(--step-small);
  transition: top 180ms var(--ease);
}
.skip:focus { top: var(--gutter); }

/* ---------- type roles ---------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.95;
}
.lede { font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }
.small { font-size: var(--step-small); color: var(--muted); line-height: 1.5; max-width: 64ch; }

/* Section headings: modest in the reading column, per the direction. */
.sec-head {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1;
  font-size: var(--step-head);
}

/* ---------- the lockup: see the note at the top of this file ---------- */
.lockup { display: flex; flex-direction: column; gap: .55rem; }
.lockup__row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  font-size: var(--step-body);     /* one step for every name in the lockup */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}
.lockup__row > * { font-size: inherit; font-weight: inherit; }
.lockup__exp { width: 7.5em; height: auto; color: currentColor; }
.lockup__penney { width: 5.2em; height: auto; }
.lockup__sep { color: var(--muted); font-weight: 400; }

/* ---------- the split stage ---------- */
.stage {
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: var(--gutter);
  padding: var(--gutter);
  align-items: start;
}
.stage__read { min-width: 0; padding-block: clamp(2rem, 5vw, 5rem) var(--gap); }
.stage__read > * + * { margin-top: var(--gap); }

.stage__media {
  position: sticky; top: var(--gutter);
  height: calc(100svh - 2 * var(--gutter));
  background: var(--surface);
  overflow: hidden;
}
.stage__media figure { margin: 0; height: 100%; }
.plate {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 1.6s var(--ease), visibility 0s linear 1.6s;
}
.plate[data-on] { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate--map img { object-fit: contain; background: var(--field); padding: 6%; }
/* An archival postcard is an object, not a backdrop: cropping it to fill the
   column cuts through the caption printed on it. Shown whole, on a ground. */
.plate--photo img { object-fit: contain; background: var(--surface); padding: 7%; }
.stage__media > .plate__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 5rem 1.5rem 1.25rem;
  font-size: var(--step-small); color: var(--ink);
  /* taste-skill-ignore: the one permitted gradient, a neutral scrim so the
     caption stays readable over a photograph whose tone we do not control. */
  background: linear-gradient(to top, rgba(12,12,12,.88), rgba(12,12,12,0)); /* taste-skill-ignore: permitted scrim under a caption on a photograph */
}

/* ---------- hero card ---------- */
.card {
  background: var(--field); color: var(--field-ink); --muted: #4a4842;
  padding: 0 0 clamp(1.75rem, 3vw, 2.75rem);
}
.card__inner { padding: clamp(1.5rem, 3.2vw, 2.75rem); }
.lots { height: .625rem; background: var(--accent); overflow: hidden; }
.lots > i { display: none; }
.card .lockup { color: var(--field-ink); }
.card h1 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.005em; line-height: 0.98;
  font-size: var(--step-display);
  margin: 1.25rem 0 0;
  text-wrap: balance;
}
.card h1 + .lockup { margin-top: 2.25rem; }
.card .lede { margin-top: 1.75rem; color: var(--field-ink); }
.card .lede + .lede { margin-top: .9rem; }

.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--bg); color: var(--ink);
  font-family: var(--text); font-weight: 600; font-size: var(--step-body);
  padding: .9rem 1.6rem; text-decoration: none;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover { background: var(--accent); color: var(--accent-ink); }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--bg); color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ---------- the live thing: compose a message ---------- */
.compose { margin-top: 2.25rem; }
.compose fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
.compose legend { font-size: var(--step-small); color: #4a4a46; padding: 0 0 .5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label {
  display: inline-block; padding: .45rem .85rem;
  background: rgba(28,28,28,.08); color: var(--field-ink);
  font-size: var(--step-small); cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.chips label:hover { background: rgba(28,28,28,.18); }
.chips input:checked + label { background: var(--bg); color: var(--ink); }
.chips input:focus-visible + label { outline: 3px solid var(--bg); outline-offset: 2px; }
.compose__out {
  background: rgba(28,28,28,.07); padding: 1rem 1.15rem;
  font-size: var(--step-small); line-height: 1.55; min-height: 5.5rem;
}

/* ---------- about: the letter ---------- */
.letter p + p { margin-top: 1.1rem; }
.letter__sign { margin-top: 1.75rem; font-style: italic; font-size: var(--step-lead); }
/* Set from the same step as the signature above it. Ohio Admin. Code
   1301:5-1-02 requires the brokerage at equal or greater prominence than the
   salesperson, and a sign-off is exactly where that gets forgotten. */
.letter__broker { font-size: inherit; font-style: normal; display: block; margin-top: .3rem; }
.letter__role { font-size: var(--step-small); color: var(--muted); font-style: normal; }
.letter__mark { background: var(--accent); color: var(--accent-ink); padding: 0 .2em; }

/* ---------- how it works: the slip ---------- */
.slip { background: var(--field); color: var(--field-ink); --muted: #4a4842; padding: clamp(1.5rem,3vw,2.25rem); }
.slip h3 {
  font-size: var(--step-body); font-weight: 600; margin: 1.75rem 0 .6rem;
  font-family: var(--text); text-transform: none; letter-spacing: 0;
}
.slip h3:first-of-type { margin-top: 0; }
.slip__row { display: flex; align-items: baseline; gap: .5rem; font-size: var(--step-small); padding: .3rem 0; }
.slip__row b { font-weight: 400; }
.slip__dots { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--muted); }
.slip__val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.slip__end {
  display: flex; justify-content: space-between; gap: 1rem;
  background: var(--bg); color: var(--ink);
  margin-top: 1.5rem; padding: .85rem 1rem; font-size: var(--step-small);
}

/* ---------- full-width sections ---------- */
.wide { padding: var(--gap) var(--gutter); }
.wide--field { background: var(--field); color: var(--field-ink); --muted: #4a4842; }
.wide--surface { background: var(--surface); }
.holder { max-width: 1400px; margin-inline: auto; }
.split12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }

/* proof: plain names in columns */
.proof__head { grid-column: 1 / span 3; }
.proof__body { grid-column: 5 / span 8; }
.sold { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem 2.5rem; }
.sold li { font-size: var(--step-lead); line-height: 1.35; }
.sold b { font-weight: 600; display: block; }
.sold span { color: var(--muted); font-size: var(--step-small); }
.towns { columns: 3; column-gap: 2rem; margin-top: 3rem; }
.towns li { font-size: var(--step-body); line-height: 1.6; break-inside: avoid; }
.towns li:first-child { color: var(--muted); }

/* testimonial */
.quotes { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; }
.quotes__pic { grid-column: 1 / span 4; }
.quotes__pic img { width: 100%; height: auto; }
.quotes__list { grid-column: 5 / span 8; margin-top: clamp(2rem, 6vw, 7.5rem); }
.quotes__list li + li { margin-top: clamp(3rem, 6vw, 5.5rem); }
.quotes blockquote { font-size: var(--step-lead); line-height: 1.3; max-width: 26ch; }
.quotes figcaption { margin-top: 1.5rem; font-size: var(--step-small); color: var(--muted); }

/* faq as reading text */
.faq__head { grid-column: 1 / span 3; }
.faq__body { grid-column: 5 / span 8; columns: 2; column-gap: 3.5rem; }
.faq__body p { break-inside: avoid; margin-bottom: 1.25rem; max-width: 40ch; }
.faq__body b { font-weight: 600; }

/* contact: address in display rows */
.rows { margin-top: clamp(2rem, 4vw, 3.5rem); }
.rows li {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1.05;
  font-size: var(--step-display);
  padding: clamp(1.1rem, 2.4vw, 2.1rem) 0 clamp(1.1rem, 2.4vw, 2.1rem) 20px;
}
.rows li:nth-child(odd) { background: rgba(241,241,239,.05); }
.wide--field .rows li:nth-child(odd) { background: rgba(28,28,28,.06); }
.rows a { text-decoration: none; }
.rows a:hover { color: var(--accent); }

/* ---------- a full-bleed picture band ---------- */
.band { position: relative; }
.band img { width: 100%; height: clamp(18rem, 52svh, 34rem); object-fit: cover; }
.band figcaption {
  padding: .9rem var(--gutter) 0;
  font-size: var(--step-small); color: var(--muted);
}

/* ---------- the form ---------- */
.form { max-width: 34rem; }
.form__field { margin-top: 1.25rem; }
.form label { display: block; font-size: var(--step-small); margin-bottom: .4rem; }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: var(--step-body);
  background: var(--bg); color: var(--ink);
  border: 2px solid #4a4a46; padding: .7rem .8rem;
}
.wide--field .form input, .wide--field .form select, .wide--field .form textarea {
  background: #fff; color: var(--field-ink); border-color: #9a978c;
}
.form textarea { min-height: 7rem; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); }
.consent { display: flex; gap: .75rem; align-items: start; margin-top: 1.5rem; }
.consent input { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--accent); }
.consent label { font-size: var(--step-small); margin: 0; line-height: 1.5; }
.form__note { font-size: var(--step-small); margin-top: 1rem; max-width: 46ch; }
/* taste-skill-ignore: a 1px box is the honeypot field, not a rule on the page. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: honeypot field, not a rule */
.form__status { margin-top: 1rem; font-size: var(--step-small); }
.form__status[data-bad] { color: #e9a08f; }
.wide--field .form__status[data-bad] { color: #8c2f16; }

/* ---------- footer ---------- */
.foot { padding: clamp(4rem, 8vw, 7rem) var(--gutter) clamp(2rem, 4vw, 3rem); }
.foot__legal {
  display: grid; grid-template-columns: minmax(0, 62ch) auto;
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.foot__legal > .foot__marks { display: grid; gap: 1rem; justify-items: end; }
.foot__legal p + p { margin-top: .9rem; }
.foot__line {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem;
  align-items: end; margin-top: clamp(3rem, 6vw, 5rem);
  font-size: var(--step-small);
}
.foot__line nav { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.foot__line > :last-child { text-align: right; color: var(--muted); }
.foot__line a { color: var(--ink); }
.foot__badge { background: var(--field); padding: .6rem .75rem; display: inline-block; }
.foot__badge img { width: 6.5em; height: auto; }

/* ---------- reading pages (privacy, accessibility) ---------- */
.paper { padding: clamp(3rem, 7vw, 6rem) var(--gutter); max-width: calc(70ch + 2 * var(--gutter)); margin-inline: auto; }
.paper h2 { font-size: var(--step-lead); font-family: var(--text); font-weight: 600; margin-top: 2.5rem; text-transform: none; letter-spacing: 0; }
.paper p + p, .paper ul { margin-top: 1rem; }
.paper li { margin-left: 1.25rem; list-style: disc; }
.paper a { color: var(--accent); }
.contact__aside a, .form__note a, .letter a { color: var(--accent); }

/* ---------- motion ----------
   Entrances are driven by the scroll position itself rather than by a script
   adding a class. That matters beyond elegance: with a class-based reveal the
   starting state is opacity 0, so anything the script has not reached yet is a
   blank screen: to a print stylesheet, to a page opened at an anchor deep in
   the document, and to any tool that captures the whole page without scrolling
   it. Here the hidden state only ever exists inside @supports, so a browser
   that cannot animate on scroll simply shows the finished page. */
.drift img { transition: transform 1.2s var(--ease); }

@keyframes rise-in {
  from { transform: translateY(26px); }
  to   { transform: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Scroll-driven, and deliberately transform-only: an entrance must never be
     the reason a section is blank. Opacity is used only on the first screen,
     below, where the animation runs on load and is finished in under a second. */
  @supports (animation-timeline: view()) {
    .rise {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 16%;
    }
    .rise:nth-child(2) { animation-range: entry 4% cover 20%; }
    .rise:nth-child(3) { animation-range: entry 8% cover 24%; }
    .rise:nth-child(4) { animation-range: entry 12% cover 28%; }
    .rise:nth-child(5) { animation-range: entry 16% cover 32%; }
  }
  .card__inner > * { animation: fade-up 620ms var(--ease) both; }
  .card__inner > *:nth-child(1) { animation-delay: 60ms; }
  .card__inner > *:nth-child(2) { animation-delay: 150ms; }
  .card__inner > *:nth-child(3) { animation-delay: 240ms; }
  .card__inner > *:nth-child(4) { animation-delay: 330ms; }
  .card__inner > *:nth-child(5) { animation-delay: 420ms; }
  .lots > i { animation: fade-up 500ms var(--ease) both; }
}

/* ---------- phone ---------- */
@media (max-width: 900px) {
  :root { --measure: 100%; }
  .plate__cap { display: none; }
  .stage { grid-template-columns: 1fr; padding: var(--gutter); }
  .stage__media { position: relative; height: 74svh; order: -1; }
  .stage__read { padding-block: var(--gutter) var(--gap); }
  .card { margin-top: -2.5rem; position: relative; }
  .lots { height: .5rem; }
  .split12, .quotes { grid-template-columns: 1fr; }
  .proof__head, .proof__body, .faq__head, .faq__body,
  .quotes__pic, .quotes__list { grid-column: 1 / -1; }
  .faq__body { columns: 1; }
  .faq__body p { max-width: none; }
  .towns { columns: 2; }
  .quotes__pic { width: 72%; }
  .quotes__list { margin-top: 2rem; }
  .rows li { font-size: clamp(2rem, 9.6vw, 3rem); padding-left: 16px; }
  .form { max-width: none; }
  .foot__line { grid-template-columns: 1fr; }
  .foot__line nav { justify-content: start; }
  .foot__line > :last-child { text-align: left; }
}

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

/* the testimonial's second, smaller picture: the place, not the speaker */
.quotes__small { grid-column: 5 / span 3; margin-top: 4rem; }
@media (max-width: 900px) {
  .quotes__small { grid-column: 1 / -1; width: 56%; margin: 3rem 0 0 auto; }
}

@media (max-width: 900px) {
  .foot__legal { grid-template-columns: 1fr; }
  .foot__legal > .foot__marks { justify-items: start; }
}

/* The quotations run long and the picture beside them does not. Rather than
   leave a column of nothing, the picture holds its place the way the hero's
   half does: the page's own device, used twice. */
@media (min-width: 901px) {
  .quotes__pic { position: sticky; top: var(--gutter); }
  .quotes__pic img { height: clamp(20rem, 58svh, 34rem); object-fit: cover; }
}

/* ---------- contact: the form and what happens next, side by side ---------- */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(3rem, 6vw, 5rem);
}
.contact__aside { max-width: 38ch; }
.contact__aside h3 {
  font-family: var(--text); font-weight: 600; font-size: var(--step-lead);
  text-transform: none; letter-spacing: 0; margin-bottom: 1rem;
}
.contact__aside p + p { margin-top: 1rem; }
.contact__aside a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- footer: the legal text spans the page, not a narrow rail ------- */
.foot__text { min-width: 0; }
.foot__cols { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); margin-top: 1.5rem; }
.foot__cols p { break-inside: avoid; margin-bottom: .9rem; }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__aside { max-width: none; }
  .foot__cols { columns: 1; }
}

@media (max-width: 600px) {
  /* the row wraps on a narrow screen, and a dangling slash reads as a typo */
  .lockup__sep { display: none; }
}

.sold__note { display: block; color: var(--field-ink); font-size: var(--step-small); margin-top: .35rem; }
.sold__side { display: block; font-size: var(--step-small); margin-top: .2rem; }

/* Brass reads well on navy and not at all on bone, so the pale sections get a
   darker member of the same family rather than a different colour. */
.wide--field a:not(.btn), .card a:not(.btn) { color: #6b5220; }
.wide--field a:not(.btn):hover, .card a:not(.btn):hover { color: var(--field-ink); }

/* the areas index: each town is a link with its own line underneath */
.sold a { text-decoration: none; display: block; }
.sold a:hover b { color: var(--accent); }
.wide--field .sold a:hover b { color: #6b5220; }

/* the areas index */
.areas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem);
}
.areas a { text-decoration: none; display: block; }
.areas img { width: 100%; height: 11rem; object-fit: cover; background: var(--field); }
.areas b { display: block; font-size: var(--step-lead); margin-top: .9rem; }
.areas span { display: block; font-size: var(--step-small); color: var(--muted); }
.areas__note { margin-top: .6rem; font-size: var(--step-body) !important; color: var(--ink) !important; }
.areas a:hover b { color: var(--accent); }

/* running prose in the reading column needs the same rhythm as the letter */
.prose p + p { margin-top: 1.1rem; }
.prose a { text-decoration-thickness: 2px; text-underline-offset: 3px; }