@font-face {
  font-family: "Zina";
  src: url("fonts/Zina-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ground: #eef2ec;
  --ground-2: #e3e9e1;
  --ink: #13261f;
  --ink-2: #3c5047;
  --ink-3: #5a6d64;
  --pine: #1f4b3c;
  --pine-deep: #163a2e;
  --floor: #15302a;
  --on-floor: #e7eee8;
  --on-floor-2: #a9bcb2;
  --display: "Zina", Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: .005em; }
p { margin: 0; }
.wrap { width: 100%; max-width: 84rem; margin: 0 auto; padding: 0 var(--gutter); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 3px; }

/* ---------- bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: rgb(238 242 236 / .94);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  box-shadow: 0 1px 0 rgb(19 38 31 / .07);
}
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.mark { font-family: var(--display); font-size: 1.3rem; line-height: 1; text-decoration: none; white-space: nowrap; }
.bar-nav { display: flex; align-items: center; gap: 1.75rem; font-size: .975rem; font-weight: 500; }
.bar-nav a { text-decoration: none; color: var(--ink-2); padding: .5rem 0; transition: color .15s; }
.bar-nav a:hover { color: var(--ink); }
.bar-nav .bar-tel { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .bar-nav a:not(.bar-tel) { display: none; }
  .mark { font-size: 1.1rem; }
  .bar-nav { font-size: .95rem; }
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  align-items: end;
  gap: 2rem 4rem;
  padding-top: clamp(2.5rem, 7vh, 5rem);
  padding-bottom: clamp(2rem, 5vh, 3.25rem);
}
/* Two set lines: "local businesses." is ~8.8em wide in Zina, so size it to the column. */
.hero { container-type: inline-size; }
.hero h1 {
  font-size: min(7rem, calc((100cqi - 26rem) / 9.1));
  line-height: .95;
  letter-spacing: 0;
}
.hero-side p { color: var(--ink-2); font-size: 1.0625rem; }
.btn {
  display: inline-block;
  margin-top: 1.25rem;
  padding: .85rem 1.35rem;
  background: var(--pine);
  color: #f2f6f1;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color .15s;
}
.btn:hover { background: var(--pine-deep); }
.btn:active { background: var(--floor); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 1rem; }
  .hero h1 { max-width: none; font-size: min(5.5rem, calc(100cqi / 9.1)); }
  .hero-side { max-width: 34rem; }
}

/* ---------- work stage (the signature) ---------- */
.work { padding-bottom: clamp(4rem, 9vw, 7rem); }
.tabs { display: none; }
.site + .site { margin-top: 4rem; }               /* no-JS: all three stack, fully visible */
.shots { position: relative; }
.shot-d {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgb(19 38 31 / .10), 0 2px 3px rgb(19 38 31 / .10);
  background: var(--ground-2);
}
.shot-m {
  position: absolute;
  right: 4%;
  bottom: -9%;
  width: 21%;
  aspect-ratio: 390 / 700;
  height: auto;
  object-fit: cover;
  object-position: top;
  border-radius: 16px;
  box-shadow: 0 0 0 5px var(--ground), 0 0 0 6px rgb(19 38 31 / .10), 0 6px 8px -2px rgb(19 38 31 / .22);
  background: var(--ground-2);
  translate: 0 var(--lift, 0px);
  transition: opacity .35s var(--ease);
}
.copy { margin-top: 1.5rem; max-width: 38rem; }
.copy h2 { font-size: 1.6rem; line-height: 1.15; }
.where { color: var(--ink-3); font-size: .95rem; margin-top: .3rem; }
.copy > p:not(.where) { margin-top: .9rem; color: var(--ink-2); }
.out {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1rem; padding: .35rem 0;
  font-weight: 600; color: var(--pine); text-decoration: none;
  transition: color .15s;
}
.out svg { width: .8em; height: .8em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.out:hover { color: var(--ink); }
.out:hover svg { transform: translate(2px, -2px); }

/* With JS: a tabbed stage. Names on the left, the live homepages on the right. */
.js .tabs { display: flex; }
.js .site + .site { margin-top: 0; }
.js .site[hidden] { display: none; }
.js .copy h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .copy .where { margin-top: 0; }
.tabs button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: var(--display); font-size: 1.15rem; line-height: 1.1;
  color: var(--ink-3);
  padding: .55rem 0;
  text-align: left;
  transition: color .15s;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }

@media (max-width: 900px) {
  .js .tabs { gap: clamp(.8rem, 4.2vw, 1.4rem); margin-bottom: 1.25rem; flex-wrap: wrap; }
  .tabs button { position: relative; padding-bottom: .7rem; font-size: clamp(1rem, 4.7vw, 1.15rem); }
  .tabs button::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px;
    background: var(--ink); opacity: 0;
  }
  .tabs button[aria-selected="true"]::after { opacity: 1; }
  /* phones see the phone version of each site, the desktop shot would be unreadably small */
  .shots { display: flex; justify-content: center; padding: .25rem 0; }
  .shot-d { display: none; }
  .shot-m {
    position: static; translate: none;
    width: min(260px, 72vw);
    box-shadow: 0 0 0 1px rgb(19 38 31 / .10), 0 4px 6px -2px rgb(19 38 31 / .20);
  }
}

@media (min-width: 901px) {
  .js .work {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .js .tabs { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; padding-top: .25rem; position: relative; z-index: 1; }
  .js .tabs button { font-size: clamp(1.6rem, 2.3vw, 2.15rem); padding: .3rem 0; }
  .js .site {
    grid-column: 1 / -1; grid-row: 1 / 3;
    display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  }
  .js .site .shots { grid-column: 2; grid-row: 1 / 3; padding-bottom: 5%; }
  .js .site .copy { grid-column: 1; grid-row: 2; margin-top: 1.75rem; }
  .js .copy > p:not(.where) { font-size: 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .site:not([hidden]) .shots { animation: settle .45s var(--ease); }
}
@keyframes settle { from { transform: translateY(6px); } to { transform: none; } }

/* ---------- steps ---------- */
.steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(2rem, 4vw, 4rem);
  padding-top: clamp(1rem, 3vw, 2rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.step h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; }
.step p { margin-top: .75rem; color: var(--ink-2); max-width: 30rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
.pricing {
  background: var(--ground-2);
  padding: clamp(4rem, 9vw, 7rem) 0;
}
.pricing-head { display: grid; grid-template-columns: 17rem minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.pricing-head h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; }
.pricing-head p { color: var(--ink-2); max-width: 44rem; font-size: 1.09rem; }
.group { display: grid; grid-template-columns: 17rem minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
.group-h { font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.cols { display: grid; column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: 2.25rem; }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* equal rows across parallel columns: name, body, link */
.cols-3 .col { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.col h4 { font-family: var(--body); font-weight: 650; font-size: 1.12rem; letter-spacing: 0; }
.col > p { margin-top: .5rem; color: var(--ink-2); }
.col > .out { align-self: end; justify-self: start; margin-top: .6rem; }
.col ul { list-style: none; margin: .75rem 0 0; padding: 0; }
.col li { position: relative; padding-left: 1.1rem; color: var(--ink-2); }
.col li + li { margin-top: .45rem; }
.col li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--pine); opacity: .55; }
.col li.plus { padding-left: 0; color: var(--ink); font-weight: 550; }
.col li.plus::before { display: none; }
.col dl { margin: .75rem 0 0; }
.col dt { color: var(--ink); font-weight: 550; }
.col dt + dt, .col dd + dt { margin-top: 1rem; }
.col dd { margin: .2rem 0 0; color: var(--ink-2); font-size: .975rem; max-width: 30rem; }
@media (max-width: 900px) {
  .pricing-head, .group { grid-template-columns: 1fr; row-gap: 1rem; }
  .group-h { padding-bottom: .25rem; }
}
@media (max-width: 760px) {
  .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .cols-3 .col { grid-template-rows: none; grid-row: auto; display: block; }
}

/* ---------- free preview ---------- */
.preview { background: var(--floor); color: var(--on-floor); padding: clamp(4rem, 9vw, 6.5rem) 0; }
.preview-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.preview h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1; }
.preview-copy p { margin-top: 1rem; color: var(--on-floor-2); max-width: 30rem; }
.preview-copy .me { margin-top: 1.75rem; font-size: .975rem; }
.preview-copy .me a { color: var(--on-floor); text-underline-offset: 3px; text-decoration-color: rgb(231 238 232 / .45); }
.preview-copy .me a:hover { text-decoration-color: var(--on-floor); }
.reach { list-style: none; margin: 0; padding: 0; }
.reach li + li { margin-top: .5rem; }
.reach a {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: rgb(231 238 232 / .06);
  box-shadow: inset 0 1px 0 rgb(231 238 232 / .07);
  text-decoration: none;
  transition: background-color .15s;
}
.reach a:hover { background: rgb(231 238 232 / .12); }
.reach .how { width: 3.5rem; flex: none; font-size: .95rem; color: var(--on-floor-2); }
.reach .what { font-family: var(--body); font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--on-floor); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 860px) { .preview-in { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { background: var(--floor); color: var(--on-floor-2); font-size: .9rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding-top: 1.25rem; padding-bottom: 1.5rem; box-shadow: inset 0 1px 0 rgb(231 238 232 / .08); }

/* Lydia's phone homepage has its headline near the bottom: show the whole screen so it stays whole */
#p-lydia .shot-m { aspect-ratio: 390 / 844; }