:root {
  --ink: #171717;
  --red: #d93636;
  --red-deep: #9b3331;
  --cream: #f5f1eb;
  --sage: #c6d6d0;
  --peach: #e6a77e;
  --sand: #eae5dc;
  --line: #17171733;
  --muted: #57524d;
  --pad: 5.5%;
  --thread: 1.5px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: inherit; }

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 5;
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
}

.skip-link:focus { top: 16px; }

.small,
.eyebrow,
.ai-kicker,
.experience-eyebrow,
.step-kicker {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

h1, h2, h3, p { overflow-wrap: anywhere; }

h1 {
  font-size: clamp(2.35rem, 9vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.07;
  margin: 16px 0 0;
}

h1 em, h2 em { color: var(--red); font-style: normal; }

header, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px var(--pad);
}

header { border-bottom: 1px solid var(--line); align-items: flex-start; }

.logo {
  color: var(--red);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
  text-decoration: none;
}

.logo-word { color: var(--ink); }

.nav { text-align: right; }

.nav summary {
  border: 1px solid var(--ink);
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  list-style: none;
  padding: 8px 14px;
  text-transform: uppercase;
}

.nav summary::-webkit-details-marker { display: none; }

.nav:not([open]) .nav-links { display: none; }

.nav-links {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  text-align: left;
}

.nav-links.nav-links--bar { display: none; }

.nav-links a {
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.nav-contact { border-bottom: 1px solid var(--red); }

.nav-links a[aria-current="page"],
.nav-links a:hover,
.project-link:hover,
.text-link:hover { color: var(--red); }

.hero {
  display: grid;
  gap: 28px;
  padding: 44px var(--pad) 28px;
}

.hero-mark {
  align-items: end;
  column-gap: 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}

.thread {
  color: var(--red);
  display: block;
  flex: none;
  overflow: visible;
}

.thread path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-width: var(--thread);
  vector-effect: non-scaling-stroke;
}

.thread--corner { height: 64px; width: 28px; }

.thread--straight { height: 8px; margin-bottom: 14px; width: 64px; }

.thread--bend { height: 40px; margin-bottom: 14px; width: 48px; }

.thread--return { height: 36px; margin-bottom: 14px; width: 40px; }

.cta .thread--corner { margin-bottom: 16px; }

html.js .thread--draw:not(.is-drawn) path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

html.js .thread--draw.is-drawn path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.15s cubic-bezier(.22, .61, .36, 1);
}

.intro {
  font-size: 1.05rem;
  line-height: 1.58;
  margin: 0;
  max-width: 38rem;
  overflow-wrap: normal;
  text-wrap: pretty;
}

.arrow {
  display: inline-block;
  font-size: 34px;
  line-height: 1;
  margin-top: 18px;
  text-decoration: none;
}

.strip {
  background: var(--ink);
  color: var(--cream);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  list-style: none;
  margin: 0;
  padding: 18px var(--pad);
}

.strip li {
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  width: 45%;
}

@media (hover: hover) {
  .strip li:hover { color: var(--red); }
}

.work, .services, .blog, .cta, .page-lead { padding: 36px var(--pad) 40px; }

.sectiontop {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.sectiontop h2, .approach h2, .services h2, .blog h2, .cta h2,
.experience-intro h2, .ai-discovery h2, .house-invite h2, .local-faq h2,
.shift h2, .approach-steps h2, .invite h2, .contact-card h2, .visit-close h2, .offer h2, .warm-close h2, .page-lead h1 {
  font-size: clamp(2rem, 8vw, 3.25rem);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.13;
  margin: 12px 0 0;
}

.page-lead h1 { margin-top: 0; max-width: 16ch; }

.page-lead p { font-size: 1.05rem; line-height: 1.6; max-width: 40rem; }

.project {
  align-items: center;
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 22px;
}

.project--sand { background: var(--sand); }
.project--sage { background: #e2eae6; }
.project--peach { background: #f0e2da; }

.project h3 {
  font-size: clamp(1.8rem, 7vw, 2.75rem);
  letter-spacing: -.05em;
  line-height: 1.05;
  margin: 8px 0 14px;
}

.project p, .service p, .article h3 { line-height: 1.5; }

.project p { font-size: 1.05rem; margin: 0 0 16px; max-width: 38rem; }

.visual {
  aspect-ratio: 1587 / 946;
  background: transparent;
  box-shadow: 0 3px 22px #17171712;
}

a.visual {
  color: inherit;
  display: block;
  text-decoration: none;
}

.visual img {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.project-link, .text-link, .service-link, .ai-link {
  font-size: 13px;
  font-weight: 700;
  text-underline-offset: 4px;
}

.project-link { border-bottom: 1px solid currentColor; text-decoration: none; }

.work-note, .insights-note { font-size: 12px; }

.button {
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 650;
  gap: 16px;
  line-height: 1.2;
  padding: 16px 23px;
  text-decoration: none;
}

.button:hover { background: var(--red); }

.button--sage { background: var(--sage); color: var(--ink); }

.button--sage:hover { background: #a3bab3; color: var(--ink); }

.button--outline {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  margin-top: 8px;
  padding: 15px 22px;
}

.button--outline:hover { background: transparent; color: var(--red); border-color: var(--red); }

.button--red { background: var(--red); color: #fff; }

.button--red:hover { background: #b92b2b; }

.button--light { background: #fff; color: var(--ink); }

.button--light:hover { background: var(--ink); color: #fff; }

.ai-discovery {
  background: #e7eeea;
  padding: 70px var(--pad);
}

.ai-grid { display: grid; gap: 28px; }

.ai-copy { font-size: 1.05rem; line-height: 1.65; margin: 0 0 16px; }

.ai-small { color: #535b56; font-size: 1.05rem; line-height: 1.65; }

.ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.ai-tags li {
  border: 1px solid #9eaaa4;
  border-radius: 40px;
  font-size: 13px;
  padding: 9px 16px;
}

.ai-link {
  border-bottom: 1px solid var(--ink);
  display: inline-flex;
  gap: 12px;
  padding-bottom: 8px;
  text-decoration: none;
}

.ai-link:hover { border-color: var(--red); color: var(--red); }

.quote-band {
  background: var(--red);
  color: #fff;
  padding: 76px 24px;
  text-align: center;
}

.quote-band :focus-visible,
.cta :focus-visible,
.strip :focus-visible { outline-color: #fff; }

.quote-band__inner { margin: auto; max-width: 930px; }

.quote-band__mark {
  color: #fff;
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 66px;
  line-height: .7;
  margin-bottom: 18px;
}

.quote-band blockquote {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0;
}

.quote-band p { margin: 0; }

.quote-band cite {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .16em;
  margin-top: 28px;
  text-transform: uppercase;
}

.experience-band {
  border-bottom: 1px solid #ded9d2;
  border-top: 1px solid #ded9d2;
  padding: 70px 6%;
}

.experience-inner { display: grid; gap: 36px; }

.experience-intro h2 { margin-top: 0; }

.experience-intro p:not(.experience-eyebrow) { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin: 22px 0 0; max-width: 36rem; }

.experience-facts { border-bottom: 1px solid #c9c1b8; border-top: 1px solid #c9c1b8; display: grid; grid-template-columns: 1fr 1fr; }

.experience-fact { min-width: 0; padding: 28px 20px 28px 0; }

.experience-fact + .experience-fact { border-left: 1px solid #c9c1b8; padding-left: 28px; padding-right: 0; }

.experience-line-icon { color: var(--red); font-size: 1.75rem; }

.experience-fact .experience-number {
  font-size: clamp(3.1rem, 8vw, 6.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: .9;
  margin: 10px 0 14px;
}

.experience-plus, .experience-dot { color: var(--red); }

.experience-fact p { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 650; line-height: 1.25; margin: 0; }

.experience-fact small { color: #6a625d; display: inline-block; font-size: 15px; font-weight: 400; line-height: 1.4; margin-top: 8px; }

.approach { background: var(--sage); display: grid; gap: 28px; padding: 48px var(--pad); }

.approach .right { padding-top: 20px; }

.approach p:not(.small) { font-size: 1.05rem; line-height: 1.5; margin: 0 0 16px; }

.service {
  border-top: 1px solid #17171740;
  display: grid;
  gap: 8px 16px;
  grid-template-columns: 36px 1fr;
  padding: 22px 0;
}

.service h3 {
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  letter-spacing: -.04em;
  margin: 0;
}

.service .small { margin: 4px 0 0; }

.service div { grid-column: 2; }

.service p { font-size: 1.05rem; margin: 0; }

.service-link { color: var(--red); display: inline-block; margin-top: 10px; }

.service-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }

.text-link { font-weight: 700; text-underline-offset: 5px; }

.blog { background: #eeeae4; }

.articles { display: grid; gap: 24px; }

.pic { background: #e2dbd2; height: 220px; overflow: hidden; }

.pic img {
  filter: grayscale(1);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.article h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); letter-spacing: -.04em; line-height: 1.25; margin: 10px 0 0; }

.article h3 a { color: inherit; text-decoration: none; }

.article h3 a:hover { color: var(--red); }

.article .small { margin-top: 0; }

.article > p:not(.small) { font-size: 1.05rem; line-height: 1.55; margin: 12px 0 0; }

.house-invite { background: var(--sage); display: grid; }

.house-photo { min-height: 280px; overflow: hidden; }

.house-photo img { display: block; height: 100%; min-height: 280px; object-fit: cover; width: 100%; }

.house-copy { padding: 42px 6% 55px; }

.house-invite h2 { margin: 0 0 18px; }

.house-invite .house-copy > p:not(.eyebrow) { font-size: 1.05rem; line-height: 1.6; margin: 0 0 28px; max-width: 36rem; }

.cta { background: var(--ink); color: var(--cream); }

.cta .small { color: var(--cream); }

.local-faq { padding: 56px var(--pad) 72px; }

.local-faq-inner { max-width: none; }

.local-faq h2 { margin-bottom: 28px; }

.local-faq details { border-top: 1px solid #d8d0c8; padding: 20px 0; }

.local-faq details:last-child { border-bottom: 1px solid #d8d0c8; }

.local-faq summary {
  cursor: pointer;
  display: flex;
  font-size: 1.05rem;
  font-weight: 650;
  gap: 20px;
  justify-content: space-between;
  list-style: none;
}

.local-faq summary::-webkit-details-marker { display: none; }

.local-faq summary::after { color: var(--red); content: "+"; font-size: 1.4rem; }

.local-faq details[open] summary::after { content: "−"; }

.local-faq details p { color: #49443f; font-size: 1.05rem; line-height: 1.75; margin: 14px 0 0; max-width: 46rem; }

.page-hero { padding: 44px var(--pad) 28px; }

.page-hero.not-found { padding-bottom: 72px; }

.not-found .button { margin-top: 28px; }

.page-hero h1 { margin-top: 16px; max-width: 14em; }

.page-hero--split .lead { margin-top: 22px; }

.ref-bar {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
  gap: 8px 24px;
  justify-content: space-between;
  letter-spacing: .08em;
  padding: 14px var(--pad);
  text-transform: uppercase;
}

.project h3 a { color: inherit; text-decoration: none; }

.project h3 a:hover { color: var(--red); }

.project-shot {
  align-items: flex-start;
  container-type: inline-size;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0 var(--pad) 12px;
}

.device { flex: 0 0 auto; }

.device-body,
.device--phone {
  background: var(--ink);
  box-shadow: 0 4px 14px #17171710;
}

.device-body {
  border-radius: 6px;
  padding: 2px;
}

.device-screen {
  background: var(--cream);
  border-radius: 5px;
  box-shadow: none;
  margin: 0;
  max-width: none;
  overflow: hidden;
}

.project-shot:has(.device--phone) .device-screen {
  height: min(calc(190px * 844 / 390), calc((100cqw - 36px) / (1587 / 946 + 390 / 844)));
  width: auto;
}

.project-shot:not(:has(.device--phone)) .device--imac { width: min(100%, 860px); }

.project-shot:not(:has(.device--phone)) .device-screen {
  height: auto;
  width: 100%;
}

.device--phone {
  border-radius: 20px;
  padding: 2px;
  position: relative;
}

.device--phone .device-screen {
  aspect-ratio: 390 / 844;
  border-radius: 18px;
}

.device--phone::after {
  background: var(--ink);
  border-radius: 999px;
  content: "";
  height: 7px;
  left: 50%;
  position: absolute;
  top: 7px;
  transform: translateX(-50%);
  width: 26%;
}

.project-shot .device--imac .device-screen {
  background: var(--ink);
}

.project-shot .device--imac .device-screen img {
  object-fit: cover;
  object-position: center;
}

.project-shot .device-screen img { object-position: center; }

@media (max-width: 759px) {
  .project-shot {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-shot .device--imac { width: min(100%, 640px); }

  .project-shot .device--imac .device-screen,
  .project-shot .device--phone .device-screen {
    height: auto;
    width: 100%;
  }

  .project-shot .device--phone { width: 156px; }
}

.project-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
  padding: 28px var(--pad) 72px;
}

.story { padding: 12px var(--pad) 8px; }

.story-step {
  padding: 0 0 36px 26px;
  position: relative;
}

.story-step:last-child { padding-bottom: 0; }

.story-step::before,
.story-step::after {
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
}

.story-step::before {
  background: var(--line);
  width: 1px;
}

.story-step::after {
  background: var(--red);
  transform: translateX(-50%) scaleY(var(--step-draw, 0));
  transform-origin: top center;
  width: var(--thread);
}

.story-step:first-child::before,
.story-step:first-child::after { top: .7rem; }

html:not(.js) .story-step,
.story-step:only-child { --step-draw: 1; }

.story h2 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing: -.03em;
  margin: 0 0 8px;
}

.story p { font-size: 1.05rem; line-height: 1.7; margin: 0 0 12px; max-width: 80%; }

.page-hero--project .lead { max-width: 80%; }

.service-list { padding: 0; }

.service-band {
  display: grid;
  column-gap: 18px;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  padding: 34px var(--pad) 30px;
}

.service-band:nth-child(even) { background: var(--sand); }

.service-index {
  color: var(--red);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
  margin: 0;
}

.service-band h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.15;
  margin: 0 0 12px;
}

.service-band__body { grid-column: 2; }

.service-band__body p { font-size: 1.05rem; line-height: 1.65; margin: 0 0 14px; max-width: 36rem; }

.offer { background: var(--sage); padding: 36px var(--pad) 48px; }

.offer-work {
  display: grid;
  gap: 22px;
  list-style: none;
  margin: 28px 0 8px;
  padding: 0;
}

.offer-work a { color: inherit; display: block; text-decoration: none; }

.offer-work .visual {
  background: var(--cream);
  box-shadow: none;
  display: block;
  overflow: hidden;
  position: relative;
}

.offer-work .visual img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.offer-work__name { display: block; font-size: 13px; font-weight: 700; margin-top: 10px; }

.offer-work a:hover .offer-work__name { color: var(--red); }

#offer-title { margin-bottom: 28px; }

.offer p { font-size: 1.05rem; line-height: 1.7; margin: 0 0 16px; max-width: 46rem; }

.offer .button { margin-top: 8px; }

.process-list { padding: 0; }

.process-grid { display: grid; }

.process-step {
  --rail: 4.25rem;
  display: grid;
  column-gap: 18px;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  padding: 34px var(--pad) 30px;
  position: relative;
}

.process-step::before {
  background: var(--line);
  bottom: 0;
  content: "";
  left: calc(var(--pad) + (var(--rail) / 2));
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 1px;
}

.process-step:first-child::before { top: 42px; }

.process-step:last-child::before { bottom: auto; height: 58px; }

.process-step::after {
  background: var(--red);
  bottom: 0;
  content: "";
  left: calc(var(--pad) + (var(--rail) / 2));
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%) scaleY(var(--step-draw, 0));
  transform-origin: top center;
  width: var(--thread);
}

.process-step:first-child::after { top: 42px; }

.process-step:last-child::after { bottom: auto; height: 58px; }

.process-step:nth-child(2) { background: var(--sand); }

.process-step:nth-child(3) { background: var(--sage); }

.step-index {
  background: var(--cream);
  color: var(--red);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: 800;
  justify-self: center;
  align-self: start;
  white-space: nowrap;
  letter-spacing: -.05em;
  line-height: .9;
  margin: 0;
  padding: 0 4px 12px;
  position: relative;
  z-index: 1;
}

.process-step:nth-child(2) .step-index { background: var(--sand); }

.process-step:nth-child(3) .step-index { background: var(--sage); }

.step-kicker { margin: 2px 0 10px; }

.process-step h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.15;
  margin: 0 0 12px;
}

.process-text { font-size: 1.05rem; line-height: 1.65; margin: 0; max-width: 36rem; }

.process-photo { margin: 18px 0 0; max-width: 28rem; overflow: hidden; }

.process-photo img {
  display: block;
  height: 190px;
  object-fit: cover;
  object-position: center 42%;
  width: 100%;
}

.warm-close { background: #f0e2da; padding: 36px var(--pad) 48px; }

.warm-close p { font-size: 1.05rem; line-height: 1.7; margin: 16px 0 22px; max-width: 42rem; }

.insight-list { padding: 8px var(--pad) 36px; }

.insight-grid { display: grid; }

.insight-card { border-top: 1px solid #17171766; padding: 28px 0 8px; }

.insight-card h2 {
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.2;
  margin: 8px 0 14px;
}

.insight-card h2 a { color: inherit; text-decoration: none; }

.insight-card h2 a:hover { color: var(--red); }

.insight-card p { font-size: 1.05rem; line-height: 1.65; margin: 0 0 14px; max-width: 36rem; }

.insight-note { color: var(--muted); font-size: 13px; margin: 0; }

.insight-note--page { margin: 0 var(--pad) 8px; max-width: 40rem; }

.article-figure { margin: 0 var(--pad) 28px; max-width: 40rem; }

.article-figure img { display: block; height: auto; width: 100%; }

.article-body { padding: 0 var(--pad) 12px; }

.article-body p { font-size: 1.05rem; line-height: 1.75; margin: 0 0 16px; max-width: 40rem; }

.lead { font-size: 1.05rem; line-height: 1.58; margin: 22px 0 0; max-width: 40rem; }

.shift, .approach-steps, .nuance, .invite { padding: 36px var(--pad) 40px; }

.shift { background: var(--sage); display: grid; gap: 28px; }

.shift p:not(.eyebrow), .approach-steps > p:not(.eyebrow), .invite > p:not(.eyebrow) { font-size: 1.05rem; line-height: 1.75; margin: 0 0 16px; max-width: 38rem; }

.shift p:last-child, .invite > p:last-of-type { margin-bottom: 0; }

.approach-steps { padding-bottom: 0; }

.steps {
  list-style: none;
  margin: 32px calc(var(--pad) * -1) 0;
  padding: 0;
}

.steps li {
  display: grid;
  column-gap: 18px;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  padding: 34px var(--pad) 30px;
}

.steps li:nth-child(even) { background: var(--sand); }

.step-number {
  color: var(--red);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
}

.steps h3 {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.15;
  margin: 0 0 12px;
}

.steps p { font-size: 1.05rem; line-height: 1.65; margin: 0; max-width: 36rem; }

.nuance { background: var(--ink); color: var(--cream); }

.nuance .eyebrow { color: var(--cream); }

.nuance p:not(.eyebrow) { font-size: clamp(1.35rem, 2.2vw, 2rem); letter-spacing: -.03em; line-height: 1.35; margin: 16px 0 0; max-width: 46rem; }

.invite { background: var(--red); color: #fff; }

.invite .eyebrow { color: #fff; }

.invite h2 { max-width: 12em; }

.invite > p { margin-top: 18px; max-width: 36rem; }

.invite .button { margin-top: 28px; }

.eyebrow--inverse { color: #fff; }

.contact-house { padding: 0 var(--pad) 8px; }

.contact-house .house-photo,
.contact-house .house-photo img { max-height: 280px; min-height: 200px; }

.contact-layout {
  display: grid;
  gap: 36px;
  padding: 8px var(--pad) 48px;
}

.contact-card h2 { margin-top: 0; }

.contact-card p { font-size: 1.05rem; line-height: 1.7; margin: 0 0 16px; }

.contact-card a { text-underline-offset: 3px; }

.inquiry { display: grid; gap: 16px; max-width: 40rem; }

.inquiry label { display: grid; font-size: 14px; font-weight: 700; gap: 6px; }

.inquiry input,
.inquiry select,
.inquiry textarea {
  background: #fff;
  border: 1px solid #17171755;
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  padding: 12px;
  width: 100%;
}

.inquiry textarea { min-height: 130px; resize: vertical; }

.inquiry .check { align-items: flex-start; display: flex; font-size: .95rem; font-weight: 400; gap: 10px; }

.inquiry .check input { margin-top: 4px; width: auto; }

.field-error { color: var(--red); display: block; font-size: 13px; font-weight: 400; }

.form-note { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 0; }

.form-success { border-top: 1px solid #17171733; padding-top: 8px; }

.hp-field { height: 0; left: -10000px; overflow: hidden; position: absolute; }

.visit-close { background: var(--sage); padding: 36px var(--pad) 48px; }

.visit-close p { font-size: 1.05rem; line-height: 1.7; margin: 16px 0 22px; max-width: 40rem; }

footer { font-size: 13px; flex-wrap: wrap; }

@media (min-width: 760px) {
  h1 { font-size: clamp(2.65rem, 5.4vw, 5.4rem); letter-spacing: -.055em; }

  .sectiontop h2, .approach h2, .services h2, .blog h2, .cta h2,
  .experience-intro h2, .ai-discovery h2, .house-invite h2, .local-faq h2,
  .shift h2, .approach-steps h2, .invite h2, .contact-card h2, .visit-close h2, .offer h2, .warm-close h2 {
    font-size: clamp(2rem, 3.3vw, 3.25rem);
  }

  .service-band {
    align-items: start;
    column-gap: 36px;
    grid-template-columns: 4.25rem minmax(14rem, 22rem) minmax(0, 36rem);
    padding: 48px var(--pad);
  }

  .service-band h2 { margin: 0; }

  .service-band__body { grid-column: auto; }

  .offer-work { gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .process-step { column-gap: 28px; padding: 48px var(--pad) 42px; }

  .process-step:first-child::before,
  .process-step:first-child::after { top: 56px; }

  .process-step:last-child::before,
  .process-step:last-child::after { height: 72px; }

  .process-step--photo .process-copy {
    align-items: end;
    column-gap: 40px;
    display: grid;
    grid-template-areas:
      "kicker photo"
      "title photo"
      "text photo";
    grid-template-columns: minmax(0, 36rem) minmax(200px, 280px);
  }

  .process-step--photo .step-kicker { grid-area: kicker; }

  .process-step--photo h2 { grid-area: title; }

  .process-step--photo .process-text { grid-area: text; }

  .process-step--photo .process-photo { grid-area: photo; margin: 0; max-width: none; }

  .process-photo img { height: 220px; }

  .insight-grid { column-gap: 64px; grid-template-columns: 1fr 1fr; }

  .insight-list { padding-bottom: clamp(48px, 6vw, 72px); }

  .warm-close { padding: clamp(48px, 6vw, 72px) var(--pad); }

  .offer { padding: clamp(48px, 6vw, 72px) var(--pad); }

  .contact-house .house-photo,
  .contact-house .house-photo img { max-height: 420px; min-height: 280px; }

  .contact-layout { align-items: start; gap: 64px; grid-template-columns: .9fr 1.1fr; padding-top: 12px; }

  .visit-close { padding: clamp(48px, 6vw, 72px) var(--pad); }

  .page-hero { padding: clamp(50px, 6vw, 80px) var(--pad) clamp(35px, 4vw, 58px); }

  .page-hero--split {
    align-items: end;
    display: grid;
    gap: 28px 48px;
    grid-template-columns: 1.35fr .8fr;
  }

  .page-hero--split .lead { margin-top: 0; }

  .shift { align-items: start; gap: clamp(35px, 6vw, 96px); grid-template-columns: 1fr 1fr; }

  .shift, .approach-steps, .nuance, .invite { padding: clamp(48px, 6vw, 72px) var(--pad); }

  .approach-steps { padding-bottom: 0; }

  .steps li {
    align-items: start;
    column-gap: 36px;
    padding: 48px var(--pad);
  }

  .steps li > div {
    align-items: start;
    column-gap: 36px;
    display: grid;
    grid-template-columns: minmax(14rem, 22rem) minmax(0, 36rem);
  }

  .steps h3 { margin: 0; }

  header, footer { align-items: center; padding: 29px var(--pad); }

  .logo { font-size: 25px; }

  header nav { display: flex; flex: 1; justify-content: flex-end; min-width: 0; }

  .nav { display: none; }

  .nav-links.nav-links--bar {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 34px;
    justify-content: flex-end;
    margin: 0;
    width: 100%;
  }

  .hero { padding: clamp(50px, 6vw, 80px) var(--pad) clamp(35px, 4vw, 58px); }

  .hero .intro { line-height: 1.55; max-width: 40rem; }

  .strip { flex-wrap: nowrap; justify-content: space-between; }

  .strip li { width: auto; }

  .work, .services, .blog, .cta, .page-lead { padding: clamp(48px, 6vw, 72px) var(--pad); }

  .project { gap: clamp(22px, 4vw, 64px); grid-template-columns: 1fr 1fr; padding: clamp(22px, 3vw, 46px); }

  .project--flip .visual { order: 2; }

  .service { align-items: center; grid-template-columns: 60px 1fr 1fr; }

  .service div { grid-column: auto; }

  .articles { column-gap: 64px; grid-template-columns: 1fr 1fr; }

  .pic { height: 245px; }

  .house-invite { grid-template-columns: 1.15fr .85fr; }

  .house-photo, .house-photo img { min-height: 420px; }

  .house-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 6vw, 80px); }

  .cta {
    align-items: center;
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    padding-left: 0;
    padding-right: 0;
  }

  .cta .small {
    grid-column: 1 / -1;
    margin-left: 5.5cqw;
    margin-right: 5.5cqw;
  }

  .cta h2 {
    align-self: center;
    grid-column: 1;
    grid-row: 2;
    margin: 18px 5.5cqw 0;
  }

  .cta .button {
    align-self: center;
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 18px 0 0 clamp(36px, 6vw, 80px);
  }

  .cta.cta--paired {
    column-gap: clamp(35px, 6vw, 96px);
    grid-template-columns: 1fr 1fr;
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  .cta.cta--paired h2,
  .cta.cta--paired .button {
    grid-row: 1;
    margin: 0;
  }

  .experience-inner { align-items: center; grid-template-columns: 1fr 1.25fr; }

  .experience-band { padding: clamp(72px, 9vw, 110px) 5%; }

  .approach { grid-template-columns: 1fr 1fr; gap: 64px; padding: clamp(64px, 8vw, 96px) var(--pad); }

  .quote-band { padding: clamp(72px, 10vw, 120px) 7vw; }

  .quote-band__mark { font-size: 88px; }
}

@media (min-width: 1080px) {
  .hero {
    align-items: end;
    column-gap: clamp(40px, 4vw, 72px);
    grid-template-columns: minmax(16rem, 1.25fr) minmax(20rem, 28rem);
  }

  .hero .intro { max-width: none; }
}

@media (min-width: 760px) and (max-width: 980px) {
  .nav-links { gap: 12px 16px; }
  .nav-links a { font-size: 12px; }
}

@keyframes arrow-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .arrow { animation: arrow-nudge 1.8s ease-in-out infinite; }

  .js .project,
  .js .house-invite,
  .js .process-step {
    opacity: 0;
    transform: translateY(12px);
  }

  .js .project.is-in,
  .js .house-invite.is-in,
  .js .process-step.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .55s ease;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .visual img, .pic img, .house-photo img, .process-photo img { transition: transform .55s ease; }
  .visual:hover img, .article:hover .pic img, .house-photo:hover img, .process-photo:hover img { transform: scale(1.025); }
  .project-shot .visual:hover img { transform: none; }
  .article:hover .pic img { filter: grayscale(.8); }
}

.legal { padding: 8px var(--pad) 28px; }

.legal-block { max-width: 40rem; }

.legal-block + .legal-block { margin-top: 28px; }

.legal h2 {
  font-size: 1.35rem;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 0 0 10px;
}

.legal p { font-size: 1.05rem; line-height: 1.7; margin: 0 0 12px; }

.legal-updated { color: var(--muted); font-size: .9rem; margin: 18px 0 0; }

.legal { padding-bottom: 64px; }

.form-note a { text-underline-offset: 3px; }

.footer-legal { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 16px; }

.footer-legal a,
.footer-legal button {
  align-items: center;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  line-height: 1;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-bar {
  background: var(--cream);
  border-top: 1px solid var(--line);
  bottom: 0;
  display: none;
  left: 0;
  padding: 18px var(--pad) 20px;
  position: fixed;
  right: 0;
  z-index: 30;
}

html:not(.has-consent) .cookie-bar,
.cookie-bar.is-open { display: block; }

html:not(.has-consent) body,
html.cookie-open body { padding-bottom: 18rem; }

.cookie-bar p { font-size: 1rem; line-height: 1.55; margin: 0; max-width: 42rem; }

.cookie-actions {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-top: 14px;
}

.cookie-actions .button,
.cookie-actions .text-link {
  align-items: center;
  display: flex;
  font-size: .95rem;
  font-weight: 650;
  justify-content: center;
  line-height: 1.2;
  margin: 0;
  min-height: 48px;
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.cookie-actions .text-link { border: 1px solid var(--ink); color: var(--ink); }

.cookie-actions .text-link:hover { border-color: var(--red); color: var(--red); }

@media (min-width: 760px) {
  html:not(.has-consent) body,
  html.cookie-open body { padding-bottom: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .thread--draw:not(.is-drawn) path { stroke-dashoffset: 0; }
  .story-step { --step-draw: 1; }
}