/* Top Ops Consulting — site styles
   Values measured off the live site via CDP (computed styles at 1440px):
   serif display TNR at 1.0 line-height, Open Sans body 16px, Poppins 24px eyebrows,
   square corners on buttons/inputs, near-full-bleed card grids. */

:root {
  --brick: #B4553A;
  --brick-dark: #9E3B1B;
  --clay: #C97E63;
  --sage: #A3C1A3;
  --sand: #E5CEBC;
  --cream: #FCF7E6;
  --bg-light: #F5EFE6;
  --ink: #040404;
  --ink-soft: #666666;
  --line: #DDDDDD;
  --white: #FFFFFF;
  /* live sizes are fractions of the window: layout stops growing at 1600px
     wide, type at 1440px. 1 unit = 1% of the window up to that cap. */
  --u: min(1vw, 16px);
  --f: min(1vw, 14.4px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  /* sand strip behind the see-through pinned header while at the top of the page */
  background: linear-gradient(var(--sand), var(--sand)) top / 100% 160px no-repeat var(--white);
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}

.italic-accent { font-style: italic; color: var(--brick); }

a { color: var(--brick); }
a:hover { color: var(--sage); }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

/* near-full-bleed band: ~40px side margins at 1440 */
.wrap-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

section { padding: 100px 0; }

.eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 12px;
}

.btn {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 8px 15px;
  border-radius: 0;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-solid {
  background: var(--brick);
  color: var(--white);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
/* measured on live: bg brick -> sage, text -> brick, 0.4s ease */
.btn-solid:hover { background: var(--sage); color: var(--brick); }

/* ---------- motion (measured on live services page) ---------- */

@keyframes motion-expandIn {
  0.0001% { transform: scale(0.8); }
  100% { transform: scale(1); }
}
@keyframes motion-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.anim-expand-in.in-view {
  animation: motion-expandIn 1200ms cubic-bezier(0.645, 0.045, 0.355, 1) 1 backwards;
}
.anim-fade-in.in-view {
  animation: motion-fadeIn 1200ms linear 1 backwards;
}
@media (prefers-reduced-motion: reduce) {
  .anim-expand-in.in-view, .anim-fade-in.in-view { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- header ---------- */

/* live: the header rides at the top of the window with nothing behind the bar,
   so the page shows through around it. It slides away on scroll down once past
   the first section and returns on scroll up (reported by Christopher from the
   live site; the 0.4s speed is an estimate, not a measurement). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px 16px 0;
  pointer-events: none;
  transition: transform 0.4s ease;
}
/* set by /js/header.js: hidden on scroll down past the first section, back on scroll up */
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

.site-header .bar {
  pointer-events: auto;
  max-width: 1400px;
  margin: 0 auto;
  background: var(--brick);
  border: 2px solid var(--sand);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 34px;
}

.site-header .logo img { height: 60px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.site-nav a {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sand);
  text-decoration: none;
  padding-bottom: 3px;
}

/* measured on live: 1px underline in the text colour grows from the left, 0.3s;
   the current page shows it permanently, in sage */
.site-nav a::after {
  content: "";
  display: block;
  height: 1px;
  /* grown by background-size, not transform: a transform is drawn on the GPU
     while it animates, which blurs a 1px line to 2px on scaled displays and
     then snaps it back when the animation ends */
  background: linear-gradient(currentColor, currentColor) left / 0% 100% no-repeat;
  transition: background-size 0.3s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--sage); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { background-size: 100% 100%; }

/* hamburger + full-screen menu (mobile), 400ms slide per live transition */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--sand);
}
.menu-toggle svg { width: 34px; height: 34px; display: block; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--brick);
  transform: translateX(100%);
  transition: transform 400ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu .menu-close {
  align-self: flex-end;
  margin-right: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sage);
  padding: 8px;
}
.mobile-menu .menu-close svg { width: 34px; height: 34px; display: block; }

.mobile-menu nav {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}
.mobile-menu nav a {
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sand);
  text-decoration: none;
}
.mobile-menu nav a:hover { color: var(--sage); }
.mobile-menu nav a[aria-current="page"] {
  color: var(--sage);
  border-bottom: 2px solid var(--sage);
}

/* ---------- hero ---------- */

.hero {
  /* measured on live: solid sand through ~52%, fades out by ~82% (not a fade from 0%) */
  background: linear-gradient(180deg, var(--sand) 0%, var(--sand) 52%, var(--white) 82%);
  padding: 110px 0 100px;
  position: relative;
  overflow: hidden;
}

/* watermark is anchored to the centered content column (fixed px), never the viewport.
   Measured on live: opacity 0.05, no color filter, ~502px wide, positioned lower
   (not overlapping the header) -- corrected from earlier invented values. */
.hero .watermark {
  position: absolute;
  right: -50px;
  top: 66px;
  width: 502px;
  opacity: 0.05;
  pointer-events: none;
}

.hero .wrap { position: relative; }

.hero h1 {
  font-size: 79px;
  max-width: 700px;
  margin-bottom: 28px;
}

.hero .subhead {
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink);
  max-width: 700px;
  margin-bottom: 36px;
}

/* ---------- problem ---------- */

.problem { background: var(--white); text-align: center; padding-top: 110px; }

.problem .section-head { max-width: 1060px; margin: 0 auto 60px; }
.problem .eyebrow { margin-bottom: 26px; }
.problem h2 { font-size: 59px; margin-bottom: 26px; }
.problem .section-head p:not(.eyebrow) { max-width: 1050px; margin: 0 auto; font-size: 16px; line-height: 1.6; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
}

.card {
  background: var(--sand);
  border-top: 3px solid var(--sage);
  padding: 28px 22px 32px;
  min-height: 245px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  transition: background-color 0.2s ease-in-out;
}

/* measured on live: background goes to brick and text to white, 0.2s ease-in-out;
   the sage top strip does not change */
.card:hover { background: var(--brick); }
.card h3,
.card p { transition: color 0.2s ease-in-out; }
.card:hover h3,
.card:hover p { color: var(--white); }

.card .icon { width: 40px; height: 40px; color: var(--white); opacity: 0.95; }
.card .icon svg { width: 100%; height: 100%; }

.card h3 { font-size: 24.5px; line-height: 1.2; margin-bottom: 6px; }

.card p { font-size: 16px; line-height: 1.6; color: var(--ink); }

/* ---------- approach ---------- */

.approach {
  background: var(--brick);
  color: var(--white);
  position: relative;
  /* clip, not hidden: hidden makes this the scroll container and breaks sticky */
  overflow: clip;
}

.approach .arch-watermark {
  position: absolute;
  left: -120px;
  bottom: -120px;
  width: 620px;
  opacity: 0.05;
  pointer-events: none;
}

.approach .wrap {
  position: relative;
  max-width: 1298px;
  display: grid;
  grid-template-columns: 517px 453px;
  justify-content: space-between;
  gap: 40px;
  align-items: start;
}

.approach .eyebrow { color: var(--sand); }
.approach h2 {
  font-size: 59px;
  color: var(--white);
  margin-bottom: 24px;
}
.approach .intro { color: var(--white); max-width: 520px; font-size: 16px; line-height: 1.6; }

.approach-cards { display: flex; flex-direction: column; gap: 10px; }

.approach-card {
  background: var(--white);
  border-radius: 4px;
  padding: 30px 36px;
  color: var(--ink);
}

/* measured on live: the intro column and all four cards stick 15% down the
   viewport, so each card slides up over the one before it (4 visible -> 1) */
@media (min-width: 751px) {
  .approach .wrap > div:first-child,
  .approach-card { position: sticky; top: 15vh; }
}

.approach-card h3 {
  font-size: 34.5px;
  line-height: 1.2;
  color: var(--brick);
  margin-bottom: 9px;
}

.approach-card p { font-size: 16px; line-height: 1.6; }

/* ---------- testimonials ---------- */

.testimonials {
  background: var(--white);
  text-align: center;
  padding: 110px 0 130px;
}

.testimonials .inner { max-width: 1100px; margin: 0 auto; padding: 0 28px; }

.testimonials .eyebrow {
  text-transform: none;
  font-size: 24px;
  margin-bottom: 34px;
}

.carousel {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  gap: 10px;
}

/* grid-stack all slides in the same cell so the track's height is always
   the tallest quote. Measured on live: slides move sideways, right to left,
   1s ease-in-out. The track is a size container so a slide travels one full
   track width (100cqw) and leaves the frame completely. */
.carousel .track {
  display: grid;
  min-height: 200px;
  overflow: hidden;
  container-type: inline-size;
}

.slide {
  grid-area: 1 / 1;
  max-width: 720px;
  margin: 0 auto;
  visibility: hidden;
  pointer-events: none;
}
.slide.active { visibility: visible; pointer-events: auto; }
.slide.leaving { visibility: visible; }

@keyframes slide-in-from-right { from { transform: translateX(100cqw); } to { transform: none; } }
@keyframes slide-out-to-left { from { transform: none; } to { transform: translateX(-100cqw); } }
@keyframes slide-in-from-left { from { transform: translateX(-100cqw); } to { transform: none; } }
@keyframes slide-out-to-right { from { transform: none; } to { transform: translateX(100cqw); } }

.track.next .slide.active { animation: slide-in-from-right 1s ease-in-out forwards; }
.track.next .slide.leaving { animation: slide-out-to-left 1s ease-in-out forwards; }
.track.prev .slide.active { animation: slide-in-from-left 1s ease-in-out forwards; }
.track.prev .slide.leaving { animation: slide-out-to-right 1s ease-in-out forwards; }

@media (prefers-reduced-motion: reduce) {
  .track .slide.active, .track .slide.leaving { animation: none; }
  .slide.leaving { visibility: hidden; }
}

.slide blockquote {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 34.5px;
  line-height: 1.2;
  color: #000;
  margin-bottom: 22px;
}

.slide .attribution {
  font-family: 'Open Sans', sans-serif;
  font-size: 17.7px;
  line-height: 1.4;
  color: var(--brick);
}

.carousel .arrow {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  padding: 10px;
}

.carousel .arrow:hover { color: var(--sage); }

/* ---------- field notes ---------- */

.field-notes {
  background: var(--brick);
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 90px 0 110px;
}

.field-notes .circle-watermark {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-58%);
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.field-notes .wrap-wide { position: relative; }

.field-notes .section-head { max-width: 820px; margin: 0 auto 50px; }
.field-notes .eyebrow { color: var(--sand); }
.field-notes h2 { font-size: 59px; color: var(--white); margin-bottom: 12px; }
.field-notes .section-head p:not(.eyebrow) { color: var(--white); font-size: 17.7px; line-height: 1.4; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  text-align: left;
}

.post-card {
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* measured on live: title and excerpt turn brick on hover, no transition, no lift */
.post-card:hover h3,
.post-card:hover .excerpt { color: var(--brick); }

.post-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.post-card .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
  padding: 16px 24px 0;
}

.post-card .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
}

.post-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  padding: 11px 24px 0;
  margin-bottom: 11px;
}

.post-card .excerpt {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  padding: 0 24px 24px;
}

/* ---------- contact CTA ---------- */

.contact {
  background: var(--sand);
  padding: 110px 0 90px;
  position: relative;
  overflow: hidden;
}

.contact .watermark {
  position: absolute;
  left: 120px;
  bottom: -200px;
  width: 520px;
  opacity: 0.05;
  pointer-events: none;
}

.contact .wrap {
  position: relative;
  max-width: 1288px;
  display: grid;
  grid-template-columns: 545px 1fr;
  gap: 80px;
  align-items: center;
}

.contact h2 { font-size: 79px; margin-bottom: 24px; }
.contact .lede { font-size: 21.7px; line-height: 1.4; max-width: 545px; margin-bottom: 24px; }
.contact .response-note {
  font-weight: 700;
  font-size: 17.7px;
  line-height: 1.4;
}

.contact-form {
  background: var(--brick);
  border-radius: 14px;
  padding: 44px 40px;
  display: grid;
  gap: 20px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.contact-form label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--white);
  display: block;
  margin-bottom: 8px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  height: 40px;
  padding: 8px 8px;
  border: none;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
}

.contact-form textarea { min-height: 90px; height: auto; resize: vertical; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--sand);
  outline-offset: 1px;
}

.submit-btn {
  width: 100%;
  padding: 11px 15px;
  background: var(--sand);
  color: var(--ink);
  border: none;
  border-radius: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* measured on live: sand -> black, text -> white, 0.2s ease-in-out */
.submit-btn:hover { background: #000; color: var(--white); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--sand);
  color: var(--ink);
  padding: 50px 0 30px;
}

.site-footer .wrap-wide {
  border-top: 1px solid rgba(4, 4, 4, 0.25);
  padding-top: 50px;
  display: grid;
  grid-template-columns: 0.5fr 1fr 0.42fr;
  gap: 40px;
}

.site-footer .logo img { height: 170px; width: auto; }

.site-footer h4 {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: 24.5px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 15px;
}

.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 8px; }

.site-footer a {
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
}
.site-footer a:hover { color: var(--sage); }
/* nav labels only -- an email address shouldn't get title-cased */
.site-footer ul a:not([href^="mailto:"]) { text-transform: capitalize; }

.site-footer .fineprint {
  grid-column: 1 / -1;
  text-align: right;
  font-size: 14px;
  margin-top: 30px;
}

.site-footer .fineprint a { font-size: 14px; text-decoration: underline; }

/* ---------- inner-page hero + service rows (services page) ---------- */

.page-hero {
  background: linear-gradient(180deg, rgba(229, 206, 188, 0.94), rgba(252, 247, 230, 0.9)),
              url('/images/texture-sand.jpg') center / cover;
  text-align: center;
  padding: 90px 0 100px;
}

.page-hero h1 { font-size: 59px; margin-bottom: 18px; }
.page-hero .lede { max-width: 720px; margin: 0 auto; font-size: 15px; line-height: 1.6; }

.services-list { background: var(--white); padding: 40px 0 80px; }

.service-row {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 60px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 28px;
}

.service-row .left .svc-icon { display: block; width: 62px; height: 62px; margin-bottom: 34px; color: var(--brick); }
.service-row .left .svc-icon svg { width: 100%; height: 100%; }

.service-row h2 {
  font-size: 54px;
  line-height: 1.1;
  color: var(--brick);
  margin-bottom: 24px;
}

.service-row .svc-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 19px;
  line-height: 1.4;
  color: var(--brick);
}

.service-row .right {
  border-left: 1.5px solid var(--brick);
  padding-left: 34px;
}

.service-row .right p { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }

.service-row .right .list-label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

.service-row .right ul { margin: 0 0 20px 22px; }
.service-row .right li { font-size: 15px; line-height: 1.55; margin-bottom: 5px; }

.service-row .btn { margin-top: 6px; }

@media (max-width: 960px) {
  .service-row { grid-template-columns: 1fr; gap: 30px; padding: 44px 24px; }
  .service-row h2 { font-size: 36px; }
  .service-row .right { border-left: none; padding-left: 0; }
  .page-hero h1 { font-size: 38px; }
}

/* ---------- about page ---------- */

.about-page {
  background: linear-gradient(180deg, var(--sand) 0%, var(--white) 55%, var(--bg-light) 100%);
  padding: 70px 0 60px;
}

.about-page .narrative { max-width: 1050px; }

.about-page h1 {
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1.15;
  margin-bottom: 30px;
}

.about-page h2 {
  font-size: 29px;
  color: var(--brick);
  margin: 44px 0 20px;
}

.about-page p { font-size: 15px; line-height: 1.6; margin-bottom: 16px; max-width: 940px; }

.about-page .rule {
  border: none;
  border-top: 1px solid var(--clay);
  margin: 50px 0 30px;
}

.about-page .closing {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 21px;
}

.about-page .closing a { color: var(--brick); text-decoration: none; }
.about-page .closing a:hover { color: var(--sage); text-decoration: underline; }

/* ---------- article page ---------- */

.article-page {
  background: linear-gradient(180deg, var(--sand) 0%, var(--cream) 60%, var(--bg-light) 100%);
  padding-bottom: 90px;
}

.article-card {
  max-width: 1010px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(4, 4, 4, 0.08);
  padding: 64px 96px 70px;
}

.article-card .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 26px;
}

.article-card .meta .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
}

.article-card h1 { font-size: 35px; line-height: 1.2; margin-bottom: 10px; }

.article-card .updated { font-size: 13.5px; margin-bottom: 26px; }

.article-body p { font-size: 16px; line-height: 1.75; margin-bottom: 18px; }
.article-body h2 { font-size: 26px; line-height: 1.25; margin: 38px 0 16px; }
.article-body h3 { font-size: 21px; margin: 30px 0 12px; }
.article-body ul, .article-body ol { margin: 0 0 18px 26px; }
.article-body li { font-size: 16px; line-height: 1.65; margin-bottom: 8px; }
.article-body img { margin: 10px auto 26px; max-width: 100%; }
.article-body blockquote {
  font-style: italic;
  border-left: 3px solid var(--sand);
  padding-left: 18px;
  margin: 0 0 18px;
}

/* ---------- post tags + share row ---------- */

.tags {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(4, 4, 4, 0.08);
}
.tags .tag { color: var(--ink-soft); text-decoration: underline; }
.tags .tag:hover { color: var(--sage); }

.share-row { display: flex; gap: 14px; margin-top: 18px; }
.share-row a, .share-row button {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-light);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.share-row svg { width: 17px; height: 17px; }
.share-row a:hover, .share-row button:hover { background: var(--sage); color: var(--white); }

/* ---------- recent post (single featured card) ---------- */

.recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.recent-head h2 { font-size: 26px; }
.recent-head .see-all {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  text-decoration: underline;
}
.recent-head .see-all:hover { color: var(--sage); }

@media (max-width: 960px) {
  .article-card { padding: 40px 24px; margin: 0 16px; }
}

/* ---------- fluid scale ----------
   Measured on live at 1024, 1150, 1278, 1440, 1600, 1760, 1920, 2200 and 2560px
   wide. Type and spacing track the window, then stop (see --u and --f).
   Body copy is 16px at every width. Inside a Problem card, the icon and
   spacing are fractions of the card's own width (cqw). */
@media (min-width: 751px) {
  .site-header { padding: 25px 48px; }
  .site-header .bar { max-width: 1504px; height: 83px; padding: 0 32px 0 71px; flex-wrap: nowrap; }
  .site-nav { gap: 28px; }
  .site-nav a { font-size: 14px; letter-spacing: normal; line-height: 20px; }

  .hero h1 { font-size: min(5.5556vw, 85px); }
  .contact h2 { font-size: min(5.493vw, 80px); }
  .eyebrow, .testimonials .eyebrow { font-size: calc(1.6667 * var(--f)); }
  .problem h2, .approach h2, .field-notes h2 { font-size: calc(4.1667 * var(--f)); }
  .approach-card h3, .slide blockquote { font-size: calc(2.4306 * var(--f)); }
  .slide .attribution,
  .field-notes .section-head p:not(.eyebrow),
  .contact .response-note { font-size: calc(1.25 * var(--f)); }
  .contact .lede { font-size: min(1.5104vw, 21.75px); }

  /* hero: starts under the pinned header and is 781.6px tall at every width.
     Text block and watermark share one vertical centre, 440.55px down. */
  .hero:has(.watermark) {
    margin-top: -133px;
    height: 781.6px;
    padding: 99.5px 0 0;
    display: flex;
    align-items: center;
  }
  .hero:has(.watermark) .wrap { width: 100%; max-width: 1600px; padding: 0 52px; }
  .hero:has(.watermark) .wrap > :not(.watermark) { margin-left: 76.5px; }
  .hero:has(.watermark) .eyebrow, .hero:has(.watermark) h1, .hero:has(.watermark) .subhead { max-width: min(59.74vw - 162.7px, 802.3px); }
  .hero:has(.watermark) .eyebrow { margin-bottom: calc(0.68 * var(--u)); }
  .hero:has(.watermark) h1 { margin-bottom: calc(1.83 * var(--u)); }
  .hero:has(.watermark) .subhead { line-height: 1.36; margin-bottom: calc(1.85 * var(--u)); }
  .hero:has(.watermark) .wrap > .btn { margin-left: 78.8px; padding: 12.4px 27.5px; line-height: 1.4; }
  .hero .watermark {
    left: calc(52px + (100% - 104px) * 0.628);
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: calc((100% - 104px) * 0.382);
    opacity: 0.1;
  }

  /* live adds 10.8px above and below this section once the window passes 1440px */
  .problem {
    --wide: clamp(0px, (100vw - 1440px) * 0.0675, 10.8px);
    padding-top: var(--wide);
    padding-bottom: 100px;
  }
  .problem .wrap, .problem .wrap-wide { max-width: 1600px; padding: 0 52px; }
  .problem .section-head { max-width: none; margin-bottom: calc(3.62 * var(--u) + var(--wide)); }
  .problem .eyebrow { margin-bottom: calc(1.8 * var(--u)); }
  .problem h2 { margin-bottom: calc(1.8 * var(--u)); }
  .problem .section-head p:not(.eyebrow) { max-width: 79.8%; }

  .card-grid { gap: calc(1.7153 * var(--u)); }
  .card {
    container-type: inline-size;
    border-top-width: 4.667px;
    padding: 0;
    min-height: min(17.13vw, 274.3px);
    justify-content: flex-start;
    gap: 0;
  }
  .card .icon {
    width: 20.33cqw;
    height: 17.63cqw;
    margin: calc(4.27cqw - 3.27px) 0 0 5.46cqw;
  }
  .card > div { padding: calc(4.38cqw + 1px) 6.9cqw 3.3cqw 5.6cqw; }
  .card h3 { font-size: calc(1.7361 * var(--f)); margin-bottom: calc(4.28cqw + 1.5px); }

  /* --- our approach: columns sit at 3.9% and 56% of the content width --- */
  .approach { padding: 100px 0; }
  .approach .wrap {
    max-width: 1600px;
    padding: 0 52px;
    grid-template-columns: 3.9% 39.4% 12.85% 34.1%;
    gap: 0;
    justify-content: start;
  }
  .approach .wrap > div:first-child { grid-column: 2; }
  .approach-cards { grid-column: 4; gap: calc(0.617 * var(--u)); }
  .approach .eyebrow { margin-bottom: calc(0.69 * var(--u)); }
  .approach h2 { margin-bottom: calc(0.62 * var(--u)); }
  .approach .intro { max-width: none; }
  .approach-card {
    min-height: calc(13.56 * var(--u) + 18px);
    padding: var(--u) calc(1.73 * var(--u)) var(--u) calc(2.97 * var(--u));
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: calc(0.275 * var(--u));
  }
  .approach-card h3 { margin-bottom: calc(0.62 * var(--u)); }
  /* the ring: 70% of the content width, cropped to a band, flush with the bottom */
  .approach .arch-watermark {
    --cw: min(100% - 104px, 1496px);
    left: calc((100% - var(--cw)) / 2 + var(--cw) * 0.1663 - 34.7px);
    bottom: 0;
    width: calc(var(--cw) * 0.7027);
    aspect-ratio: 928.2 / 416.4;
    object-fit: cover;
    opacity: 0.3;
  }

  /* --- testimonials: the label rides inside each slide; arrows at the edges --- */
  .testimonials { padding: 0; }
  .testimonials .inner { max-width: 1600px; padding: 0 52px; }
  .testimonials .eyebrow { margin-bottom: 10px; }
  .carousel { display: block; }
  .slide { max-width: calc(48.65% + 62px); padding: calc(60px + 3.45 * var(--u)) 0; align-self: center; }
  .slide blockquote { margin-bottom: 20px; }
  .slide .attribution { font-size: max(16px, calc(1.25 * var(--f))); }
  .carousel .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
  /* inset grows with the content width: 13px at 1024, 49.5px at full width */
  .carousel .arrow.prev { left: calc(6.19% - 53.2px); }
  .carousel .arrow.next { right: calc(6.19% - 53.2px); }

  /* --- field notes --- */
  .field-notes { padding: calc(3.47 * var(--u)) 0 calc(68.1px + 2.38 * var(--u)); }
  .field-notes .wrap-wide { max-width: 1600px; padding: 0 48px; }
  .field-notes .section-head { max-width: none; margin-bottom: calc(2.1 * var(--u)); }
  .field-notes .eyebrow { margin-bottom: calc(0.62 * var(--u)); }
  .field-notes h2 { margin-bottom: calc(0.69 * var(--u)); }
  .field-notes .section-head p:not(.eyebrow) {
    max-width: calc((100% - 8px) * 0.603);
    margin: 0 auto;
    font-size: max(16px, calc(1.25 * var(--f)));
  }
  /* same ring image as Our Approach, centred at the top of the section */
  .field-notes .circle-watermark {
    --cw: min(100% - 104px, 1496px);
    top: 0;
    width: calc(var(--cw) * 0.694);
    height: auto;
    aspect-ratio: 1038.8 / 503.5;
    transform: translateX(-50%);
    border-radius: 0;
    background: url(/images/arch-beige.png) center / cover no-repeat;
    opacity: 0.3;
  }
  /* live shows 5 columns of 275px at full width; narrower counts are inferred */
  .post-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; }
  .post-card img { aspect-ratio: 275 / 206; }
  .post-card .meta {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 10px;
    font-size: 12px;
    line-height: 15.3px;
    padding: 29.2px 24px 0;
  }
  .post-card .avatar { width: 32px; height: 32px; grid-row: 1 / 3; }
  .post-card .who, .post-card .when { grid-column: 2; }
  .post-card .when { margin-top: 1.9px; }
  .post-card h3 { padding: 11.4px 24px 0; margin-bottom: 11px; }
  .post-card .excerpt { line-height: 21px; padding: 0 24px 24px; }
  .post-card { min-height: calc(206px + 320px); }

  /* --- contact: 772px band, fixed 580 x 614 form panel centred on the right half --- */
  .contact { padding: 0; height: 772px; }
  .contact .wrap {
    position: static;
    max-width: 1600px;
    padding: 0 52px;
    /* fitted to live at five widths: the text column and the gap give way
       first, and below about 1280px the panel sits flush right */
    grid-template-columns:
      min(13.16% - 105.5px, 5.64% - 18.2px)
      min(83.6% - 503.6px, 44.54% - 49.9px)
      1fr
      580px
      max(0px, 24.97% - 298.8px);
    gap: 0;
    align-items: start;
  }
  .contact .wrap > div { grid-column: 2; padding-top: calc(59.4px + 3.75 * var(--u)); }
  .contact h2 { font-size: min(5.5vw, 80px); margin-bottom: calc(1.54 * var(--u)); }
  .contact .lede {
    font-size: clamp(16px, 1.51vw, 22px);
    max-width: none;
    margin-bottom: calc(1.54 * var(--u));
  }
  .contact .response-note { font-size: max(16px, calc(1.25 * var(--f))); }
  /* the logo mark, 712px tall, centred behind the band */
  .contact .watermark {
    left: 50%;
    top: 60px;
    bottom: auto;
    height: 712.1px;
    width: auto;
    max-width: none;
    transform: translateX(-50%);
    opacity: 0.2;
  }
  .contact-form {
    position: relative;
    grid-column: 4;
    width: 580px;
    height: 614px;
    margin-top: calc(59.1px + 2.25 * var(--u));
    border-radius: 20px;
    padding: calc(23.6px + 4.06 * var(--u)) 86px 0 76px;
    display: block;
  }
  .contact-form > div { margin-bottom: 24.1px; }
  .form-row { grid-template-columns: 160.2px 233.8px; gap: 23.9px; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea { height: 41.3px; border: 1px solid var(--ink); }
  .contact-form label[for="message"] { margin-bottom: 16.7px; }
  .contact-form textarea { height: 76px; min-height: 0; }
  .contact-form > div:has(textarea) { margin-bottom: 32.7px; }
  .submit-btn { height: 41.2px; padding: 0 15px; font-size: 16px; }

  /* --- footer: logo at the 48px inset, columns at 25.5% and 76.4% --- */
  .site-footer { padding: 0 0 40px; }
  /* measured on live: a 1px brick rule across the 48px-inset width, 32px above the logo */
  .site-footer .wrap-wide::before {
    content: "";
    grid-column: 1 / -1;
    border-top: 1px solid var(--brick);
    margin-bottom: 31px;
  }
  .site-footer .wrap-wide {
    max-width: 1600px;
    padding: 0 48px;
    border-top: 0;
    grid-template-columns: 25.5% 50.9% 23.6%;
    gap: 0;
  }
  .site-footer .logo img { height: 189.3px; }
  .site-footer h4 { font-size: calc(1.7361 * var(--f)); letter-spacing: normal; margin-bottom: calc(1.14 * var(--u)); }
  .site-footer li { margin-bottom: 0; line-height: 25.6px; }
  .site-footer .fineprint { margin-top: 14.3px; }
}

/* ---------- tablet (751 to 1000px) ----------
   Live keeps the desktop arrangement here and scales it, with its own
   constants. Measured at 768, 900 and 1000px wide. Only what differs from
   the fluid rules above is restated. */
@media (min-width: 751px) and (max-width: 1000px) {
  .site-header { padding: 2.945vw 4.9vw; }
  .site-header .bar { max-width: none; height: calc(1.81vw + 59.2px); padding: 0 24px; }

  .hero h1 { font-size: 6.4vw; line-height: 1.1; }
  .hero:has(.watermark) {
    margin-top: calc(-7.8vw - 58.3px);
    height: max(736.2px, 74.68vw);
    padding-top: 65.1px;
  }
  .hero:has(.watermark) .wrap > :not(.watermark) { margin-left: 22.7px; }
  .hero:has(.watermark) .eyebrow,
  .hero:has(.watermark) h1,
  .hero:has(.watermark) .subhead { max-width: calc(66.19vw - 93.2px); }
  .hero .subhead { font-size: clamp(16px, 2vw, 18px); }
  .hero:has(.watermark) .wrap > .btn { margin-left: 24px; }
  .hero .watermark {
    left: calc(52px + (100% - 104px) * 0.32);
    width: calc((100% - 104px) * 0.702);
    margin-top: 3.5px;
    opacity: 0.05;
  }

  /* icon and text sit as one group in the middle of a taller card */
  .card { min-height: 31.86vw; justify-content: center; }
  .card .icon { margin-top: 1px; }
  .card h3 { font-size: 2.3vw; }

  .approach .wrap { grid-template-columns: 3.9% 39.6% 10.9% 41%; }
  .approach-cards { gap: 6px; }
  .approach-card { min-height: calc(20.34vw + 16.9px); padding-top: 1.28vw; padding-bottom: 1.28vw; }
  .approach .arch-watermark {
    left: calc((100% - var(--cw)) / 2 + 5px);
    width: calc(var(--cw) * 0.976);
    aspect-ratio: 633.3 / 284;
  }

  .carousel .track { min-height: 400px; }
  .slide { max-width: calc(68.06% + 70.8px); padding: 40px 0; }
  .carousel .arrow.prev { left: calc(6.34vw - 62px); }
  .carousel .arrow.next { right: calc(6.34vw - 62px); }

  /* contact: the text sits above a centred form panel */
  .contact { height: 1000.1px; }
  .contact .wrap { display: block; }
  .contact .wrap > div {
    margin-left: calc(9.61% - 21.6px);
    width: calc(81.68% + 44.2px);
    padding-top: calc(141.1px - 8.07vw);
  }
  .contact h2 { margin-bottom: 1.28vw; }
  .contact .lede { margin-bottom: 1.28vw; }
  .contact .watermark { top: 50px; height: 950.1px; opacity: 0.15; }
  .contact-form {
    position: absolute;
    top: calc(327.6px - 2.46vw);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    height: calc(673.8px - 5.43vw);
  }
  .contact-form > div { margin-bottom: 24px; }
  .contact-form input,
  .contact-form select { height: 42px; }
  .contact-form label[for="message"] { margin-bottom: 8px; }
  .contact-form textarea { height: 92px; }
  .contact-form > div:has(textarea) { margin-bottom: 24px; }

  .site-footer { padding-bottom: 16.5px; }
  .site-footer .wrap-wide { padding: 0 25px; grid-template-columns: 33.7% 37.3% 29%; }
  .site-footer .wrap-wide::before { margin-bottom: 23px; }
  .site-footer .logo img { height: 174.2px; }
  .site-footer h4 { font-size: 18px; margin-bottom: 8.1px; }
  .site-footer .fineprint { margin-top: 3px; }
}

/* ---------- responsive ---------- */

@media (max-width: 750px) {
  section { padding: 64px 0; }
  .hero { padding: 80px 0 70px; }
  .hero .watermark { display: none; }
  .hero h1, .problem h2, .approach h2, .field-notes h2 { font-size: clamp(36px, 7vw, 59px); }
  .contact h2 { font-size: clamp(40px, 8vw, 79px); }
  .card-grid, .post-grid { grid-template-columns: 1fr 1fr; }
  .approach .wrap { grid-template-columns: 1fr; justify-content: stretch; }
  .contact .wrap { grid-template-columns: 1fr; }
  .site-footer .wrap-wide { grid-template-columns: 1fr; }
  .site-footer .fineprint { text-align: left; }
  .carousel { grid-template-columns: 40px 1fr 40px; }
  .eyebrow { font-size: 19px; }
}

/* live collapses the menu to a hamburger at 1000px and below */
@media (max-width: 1000px) {
  .site-nav { display: none; }
  .menu-toggle { display: block; }
}

/* Wix mobile breakpoint is 750px: separately-composed centered single column */
@media (max-width: 750px) {
  .site-nav { display: none; }
  .menu-toggle { display: block; }
  .site-header .logo img { height: 44px; }

  .hero { text-align: center; padding: 56px 0 48px; }
  .hero h1 { font-size: 30px; max-width: none; margin-bottom: 18px; }
  .hero .subhead { font-size: 14px; max-width: none; margin-bottom: 26px; }
  .eyebrow { font-size: 15px; }

  .problem h2, .approach h2, .field-notes h2 { font-size: 28px; }
  .card-grid, .post-grid { grid-template-columns: 1fr; }
  .card { text-align: center; align-items: center; min-height: 0; gap: 18px; }
  .card .icon { margin: 0 auto; }
  .card h3 { font-size: 20px; }

  .approach-card h3 { font-size: 24px; }

  .testimonials { padding: 70px 0; }
  .carousel { grid-template-columns: 28px 1fr 28px; gap: 4px; }
  .slide blockquote { font-size: 17px; }
  .slide .attribution { font-size: 14px; }

  .contact h2 { font-size: 32px; }
  .contact .lede { font-size: 16px; }
  .contact-form { padding: 28px 22px; }
  .form-row { grid-template-columns: 1fr; }

  .site-footer .wrap-wide { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-footer .logo img { height: 90px; }
  .site-footer .wrap-wide > div:first-child { grid-column: 1 / -1; }
  .site-footer .fineprint { text-align: center; }
}

/* ---------- phone (750px and below) ----------
   Live is one centred column whose spacing scales with the screen: every
   length measured at a 375px-wide screen is multiplied by --m. Type scales
   the same way and stops at its desktop size. Measured at 390, 600 and 740
   (375, 585 and 725px of screen once the scrollbar is removed). */
@media (max-width: 750px) {
  :root { --m: calc(100vw / 375); }

  .site-header { padding: calc(18.8 * var(--m)) calc(30 * var(--m)); }
  .site-header .bar {
    max-width: none;
    height: calc(73.1 * var(--m));
    padding: 0 calc(23.4 * var(--m)) 0 calc(16.4 * var(--m));
    flex-wrap: nowrap;
  }
  .site-header .logo img { height: calc(45.4 * var(--m)); }
  .menu-toggle { padding: 0; }
  .menu-toggle svg { width: 30px; height: 30px; }

  .hero:has(.watermark) {
    margin-top: calc(-110.6 * var(--m));
    padding: 160px 0 36.3px;
    text-align: center;
  }
  .hero:has(.watermark) .wrap { padding: 0 calc(19 * var(--m)); }
  .hero:has(.watermark) .eyebrow {
    font-size: min(calc(15.4 * var(--m)), 24px);
    max-width: 76.6%;
    margin: 0 auto calc(9.6 * var(--m));
  }
  .hero:has(.watermark) h1 {
    font-size: calc(36.5 * var(--m));
    line-height: 1.1;
    margin-bottom: calc(19.3 * var(--m));
  }
  .hero:has(.watermark) .subhead {
    font-size: min(calc(14 * var(--m)), 18px);
    line-height: 1.357;
    margin-bottom: calc(16 * var(--m));
  }
  .hero:has(.watermark) .btn { font-size: 14px; padding: 12.4px 27.5px; line-height: 1.4; }

  /* above a 375px screen, live opens up extra room that grows with the width */
  .problem { padding: max(0px, calc((100vw - 375px) * 0.4914)) 0 26.1px; }
  .problem .wrap { padding: 0 calc(57.4 * var(--m)); }
  .problem .section-head { margin-bottom: calc(13.7px + max(0px, (100vw - 375px) * 0.528)); }
  .problem .eyebrow { font-size: min(calc(15.4 * var(--m)), 24px); margin-bottom: calc(6.8 * var(--m)); }
  .problem h2, .approach h2, .field-notes h2 { font-size: max(25px, 4.1667vw); line-height: 1; }
  .problem h2 { margin-bottom: calc(6.1 * var(--m)); }
  .problem .wrap-wide { padding: 0 calc(24 * var(--m)); }
  .card-grid { grid-template-columns: 1fr; gap: calc(6.5 * var(--m)); }
  .card {
    min-height: calc(165.9 * var(--m));
    padding: 0;
    border-top-width: 5px;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  .card .icon { width: calc(46.4 * var(--m)); height: calc(40 * var(--m)); margin: calc(4.3 * var(--m)) auto 0; }
  .card > div { padding: calc(4 * var(--m)) calc(12.5 * var(--m)) calc(8.8 * var(--m)); }
  .card h3 { font-size: min(calc(19.2 * var(--m)), 25px); line-height: 1.2; margin-bottom: calc(3.9 * var(--m)); }

  .approach { padding: calc(26.5px + max(0px, (100vw - 380px) * 0.38)) 0 26.1px; overflow: clip; }
  .approach .wrap { display: block; padding: 0; }
  .approach .wrap > div:first-child { margin: 0 calc(51.3 * var(--m)) 0 calc(61.9 * var(--m)); }
  .approach .eyebrow { font-size: min(calc(15.4 * var(--m)), 24px); margin-bottom: calc(9.6 * var(--m)); }
  .approach h2 { margin-bottom: calc(9.6 * var(--m)); }
  .approach .intro { max-width: none; }
  .approach-cards { margin: calc(9.6 * var(--m) + max(0px, (100vw - 375px) * 0.322)) calc(45.7 * var(--m)) 0; gap: calc(9.6 * var(--m)); }
  .approach-card {
    min-height: calc(206 * var(--m));
    padding: calc(21.3 * var(--m)) calc(15.5 * var(--m)) calc(2.6 * var(--m)) calc(24.4 * var(--m));
    border: 1px solid var(--brick);
    border-radius: 1px;
  }
  .approach-card h3 { font-size: min(calc(19.2 * var(--m)), 35px); line-height: 1.2; margin-bottom: calc(2.3 * var(--m)); }
  .approach .arch-watermark {
    left: 50%;
    bottom: calc(-52.3 * var(--m));
    width: 179.4vw;
    max-width: none;
    aspect-ratio: 672.7 / 301.8;
    object-fit: cover;
    transform: translateX(-50%);
    opacity: 0.29;
  }

  .testimonials { padding: 0; }
  .testimonials .inner { padding: 0; }
  .testimonials .eyebrow { font-size: min(calc(15.4 * var(--m)), 24px); margin-bottom: 10px; }
  .carousel { display: block; }
  .slide { max-width: calc(224.4 * var(--m)); padding: calc(73 * var(--m)) 0; align-self: center; }
  .slide blockquote { font-size: clamp(16px, 4.1vw, 35px); line-height: 1.2; margin-bottom: 20px; }
  .slide .attribution { font-size: min(calc(14 * var(--m)), 18px); line-height: 1.4; }
  .carousel .arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
  .carousel .arrow.prev { left: calc(24.7 * var(--m) - 10px); }
  .carousel .arrow.next { right: calc(24.7 * var(--m) - 10px); }

  .field-notes { padding: calc(23 * var(--m)) 0 60px; }
  .field-notes .eyebrow { font-size: min(calc(15.4 * var(--m)), 24px); margin-bottom: calc(9.5 * var(--m)); }
  .field-notes h2 { margin-bottom: 10px; }
  .field-notes .section-head { margin-bottom: calc(24 * var(--m)); }
  .field-notes .section-head p:not(.eyebrow) { font-size: 16px; max-width: calc(249.6 * var(--m)); margin: 0 auto; }
  .field-notes .circle-watermark {
    top: 0;
    width: 64.3vw;
    height: auto;
    aspect-ratio: 241 / 116.8;
    transform: translateX(-50%);
    border-radius: 0;
    background: url(/images/arch-beige.png) center / cover no-repeat;
    opacity: 0.29;
  }

  .contact { padding: 0 0 20.4px; }
  .contact .wrap { display: block; padding: 0 calc(41 * var(--m)); position: static; }
  .contact .wrap > div { padding-top: 35.7px; }
  .contact h2 { font-size: max(25px, 5.45vw); line-height: 1; margin-bottom: calc(19.2 * var(--m)); }
  .contact .lede { font-size: 16px; max-width: none; margin-bottom: calc(19.3 * var(--m)); }
  .contact .response-note { font-size: 16px; }
  .contact .watermark {
    display: block;
    left: 0;
    top: 25px;
    bottom: auto;
    width: 100%;
    height: 881.2px;
    max-width: none;
    object-fit: contain;
    opacity: 0.15;
  }
  .contact-form {
    position: relative;
    width: 292px;
    height: 639.2px;
    margin: 30px auto 0;
    border-radius: 20px;
    padding: 39.2px 28px 0 34.3px;
    display: block;
  }
  .contact-form > div { margin-bottom: 24px; }
  .form-row { grid-template-columns: 96px 144px; gap: 24px; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea { height: 42px; border: 1px solid var(--ink); }
  .contact-form textarea { display: block; height: 92px; min-height: 0; }
  .submit-btn { height: 41.2px; padding: 0 15px; font-size: 16px; }

  .site-footer { padding: 0 0 129px; }
  .site-footer .wrap-wide {
    padding: 59px calc(23.6 * var(--m)) 0;
    border-top: 0;
    grid-template-columns: 59.5% 40.5%;
    gap: 0;
  }
  .site-footer .wrap-wide > div:first-child { grid-column: 1 / -1; margin: 0 0 6.7px calc(-5.7 * var(--m)); }
  .site-footer .logo img { height: 56.4px; }
  .site-footer h4 { font-size: 18px; letter-spacing: normal; margin-bottom: 8.1px; }
  .site-footer li { margin-bottom: 0; }
  .site-footer li, .site-footer a { font-size: min(calc(12 * var(--m)), 16px); line-height: 1.6; }
  .site-footer .fineprint { font-size: 12px; text-align: center; margin-top: 13px; }
}

/* ---------- about page, matched to live ----------
   Measured at 390, 768, 1024, 1440 and 1760px wide. The page starts under
   the header, on the same sand-to-white wash as live. */
.about-page .rule { display: none; }
.about-page p { margin-bottom: 0; }
.about-page p + p { margin-top: 22.4px; }

@media (min-width: 751px) {
  .about-page {
    margin-top: -133px;
    padding: calc(46.4px + 9.42 * var(--u)) 0 48px;
    background: linear-gradient(var(--sand) 18.176%, var(--white) 62.7552%);
  }
  .about-page .wrap { max-width: 1600px; padding: 0 52px; }
  .about-page .narrative { max-width: none; margin-left: 5.72%; }
  .about-page .eyebrow { font-size: calc(1.6667 * var(--f)); line-height: 1.2; max-width: none; margin-bottom: calc(1.375 * var(--u)); }
  .about-page h1 {
    font-size: min(5.5556vw, 85px);
    line-height: 1;
    max-width: 96.7%;
    margin-bottom: calc(1.72 * var(--u));
  }
  .about-page h1 + p { font-size: max(16px, calc(1.25 * var(--f))); line-height: 1.333; max-width: 90.05%; }
  .about-page h2 { font-size: calc(2.4306 * var(--f)); line-height: 1.2; max-width: none; margin: calc(2.06 * var(--u)) 0; }
  .about-page h1 + p + h2 { margin-top: calc(2.75 * var(--u)); }
  .about-page p { font-size: 16px; line-height: 22.4px; max-width: 86.13%; }
  .about-page .closing {
    font-size: calc(1.7361 * var(--f));
    line-height: 1.2;
    max-width: none;
    margin: calc(3.5 * var(--u)) 0 0;
    padding: 0;
    border: 0;
  }
}
@media (min-width: 751px) and (max-width: 1000px) {
  .about-page { margin-top: calc(-7.8vw - 58.3px); padding-top: 147.3px; }
  .about-page h2 { font-size: 2.55vw; }
  .about-page h1 + p + h2 { margin-top: 4.13vw; }
}
@media (max-width: 750px) {
  .about-page {
    margin-top: calc(-110.6 * var(--m));
    padding: calc(135.5 * var(--m)) 0 47.5px;
    background: linear-gradient(var(--sand) 18.176%, var(--white) 62.7552%);
  }
  .about-page .wrap { padding: 0 calc(48 * var(--m)); }
  .about-page .narrative { max-width: none; }
  .about-page .eyebrow { font-size: min(calc(15.4 * var(--m)), 24px); line-height: 1.2; margin: 0 0 calc(4.9 * var(--m)) calc(5.9 * var(--m)); }
  .about-page h1 {
    font-size: calc(30 * var(--m));
    line-height: 1;
    max-width: calc(264 * var(--m));
    margin: 0 0 calc(6.5 * var(--m)) calc(5.4 * var(--m));
  }
  .about-page h1 + p { font-size: 16px; line-height: 22px; max-width: calc(264 * var(--m)); margin-left: calc(4.1 * var(--m)); }
  .about-page h2 { font-size: min(calc(19.2 * var(--m)), 35px); line-height: 1.2; max-width: none; margin: 7.8px 0 7.7px; }
  .about-page h1 + p + h2 { margin-top: 15.8px; }
  .about-page p { font-size: 16px; line-height: 22.4px; max-width: calc(252 * var(--m)); }
  .about-page .closing { font-size: min(calc(17.3 * var(--m)), 25px); line-height: 1.2; max-width: none; margin: 14px 0 0; padding: 0; border: 0; }
}

/* ---------- services page, matched to live ----------
   Measured at 390, 768, 1024, 1440 and 1760px wide. Live has no rule between
   the columns, regular-weight list labels, and black body copy. */
.page-hero {
  background: linear-gradient(rgba(229, 206, 188, 0.91) 32.7577%, rgba(255, 255, 255, 0.91) 70.3468%),
              url('/images/texture-sand.jpg') center / cover;
}
.services-list { padding: 0; }
.service-row .right { border-left: 0; padding-left: 0; }
.service-row .right p,
.service-row .right li { font-size: 16px; line-height: 25.6px; color: #000; margin-bottom: 0; }
.service-row .right .list-label { font-size: 16px; font-weight: 400; margin: 25.6px 0 0; }
.service-row .right ul { margin: 0 0 0 28.8px; }
.service-row .left .svc-icon svg { display: block; }
/* icon boxes as drawn on live: --iw/--ih in desktop units, --pw/--ph on a 375px phone */
.service-row:nth-of-type(1) { --iw: 5.96; --ih: 7.82; --pw: 47.2; --ph: 54.5; }
.service-row:nth-of-type(2) { --iw: 6.38; --ih: 7.67; --pw: 55.3; --ph: 53; }
.service-row:nth-of-type(3) { --iw: 5.6; --ih: 7.63; --pw: 52.7; --ph: 52.8; }
.service-row:nth-of-type(4) { --iw: 5.74; --ih: 5.74; --pw: 38.7; --ph: 39.7; }
.service-row:nth-of-type(5) { --iw: 5.73; --ih: 6.15; --pw: 39.7; --ph: 42.5; }
.service-row:nth-of-type(6) { --iw: 5.73; --ih: 6.15; --pw: 43; --ph: 42.5; }
.service-row:nth-of-type(7) { --iw: 5.73; --ih: 6.15; --pw: 39.7; --ph: 42.5; }
.service-row h2 { line-height: 1; }
.service-row .svc-sub { line-height: 1.2; }

@media (min-width: 751px) {
  .page-hero {
    margin-top: -133px;
    height: calc(31.88 * var(--u));
    padding: calc(12.3 * var(--u)) 0 0;
  }
  .page-hero .wrap { max-width: 1600px; padding: 0 52px; }
  .page-hero .eyebrow { line-height: 1.2; margin-bottom: calc(0.62 * var(--u)); }
  .page-hero h1 { font-size: min(5.5556vw, 85px); line-height: 1; margin-bottom: calc(0.62 * var(--u)); }
  .page-hero .lede { font-size: 16px; line-height: 25.6px; max-width: 49.4%; }

  .service-row {
    --left: calc(6.95 * var(--u) - 53px);
    max-width: 1600px;
    padding: calc(3.44 * var(--u)) 52px;
    gap: 0;
    grid-template-columns: var(--left) 33.2% calc(17.6% - var(--left)) calc(42.65% + 40.7px);
    align-items: start;
  }
  .service-row .left { grid-column: 2; }
  .service-row .right { grid-column: 4; }
  .service-row:nth-of-type(2) { padding-top: 0; }
  /* live keeps "Business Systems" on one line, running into the gutter */
  .service-row:nth-of-type(2) h2 { width: 135%; }
  .service-row .left .svc-icon {
    width: calc(var(--iw) * var(--ik, 1) * var(--u));
    height: calc(var(--ih) * var(--ik, 1) * var(--u));
    margin-bottom: calc(1.72 * var(--u));
  }
  /* a little slack so two-word titles break where live breaks them */
  .service-row h2 { font-size: min(5.5vw, 80px); width: calc(100% + 16px); margin-bottom: calc(1.72 * var(--u)); }
  .service-row .svc-sub { font-size: calc(1.7875 * var(--u)); }
  .service-row .btn { margin-top: 28px; padding: 12.4px 56px; line-height: 1.4; }
}
/* each row's designed height on live; content takes over when it is taller */
@media (min-width: 1001px) {
  .service-row:nth-of-type(1) { min-height: 612.8px; }
  .service-row:nth-of-type(2) { min-height: 549.8px; }
  .service-row:nth-of-type(3),
  .service-row:nth-of-type(4) { min-height: 648.8px; }
  .service-row:nth-of-type(5),
  .service-row:nth-of-type(6) { min-height: 766.5px; }
  .service-row:nth-of-type(7) { min-height: 817.7px; }
}
@media (min-width: 751px) and (max-width: 1000px) {
  .page-hero { margin-top: calc(-7.8vw - 58.3px); height: 356.6px; padding-top: 125.6px; }
  .page-hero .lede { max-width: 53.2%; }
  .page-hero .eyebrow, .about-page .eyebrow { font-size: 2.04vw; }
  .service-row { --left: 6.8px; --ik: 0.93; padding-top: 58.9px; padding-bottom: 58.9px; grid-template-columns: var(--left) 33.6% calc(17.3% - var(--left)) 48%; }
  .service-row:nth-of-type(2) { padding-top: 58.9px; }
}
@media (max-width: 750px) {
  .page-hero { margin-top: calc(-110.6 * var(--m)); padding: calc(141.4 * var(--m)) calc(48.4 * var(--m)) 14.6px; }
  .page-hero .wrap { padding: 0; }
  .page-hero .eyebrow { font-size: min(calc(15.4 * var(--m)), 24px); line-height: 1.2; margin-bottom: calc(2.3 * var(--m)); }
  .page-hero h1 { font-size: calc(30 * var(--m)); line-height: 1; margin-bottom: calc(2.3 * var(--m)); }
  .page-hero .lede { font-size: 16px; line-height: 25.6px; max-width: none; }

  .service-row { display: block; padding: calc(38.5 * var(--m)) calc(38.5 * var(--m)) 38.4px; }
  .service-row .left .svc-icon { width: calc(var(--pw) * var(--m)); height: calc(var(--ph) * var(--m)); margin-bottom: calc(6.4 * var(--m)); }
  .service-row h2 { font-size: calc(28.8 * var(--m)); margin-bottom: calc(6.6 * var(--m)); }
  .service-row .svc-sub { font-size: calc(13.5 * var(--m)); }
  .service-row .right { margin: calc(31.9 * var(--m)) 0 0 calc(5.3 * var(--m)); }
  .service-row .btn { margin-top: 28px; font-size: 14px; padding: 8.7px 36px; line-height: 1.4; }
}

/* ---------- post pages, matched to live ----------
   Measured at 390, 768 and 1440px wide. */

.article-page { padding-top: 20px; }
.article-card {
  width: calc(80% - 40px);
  max-width: 940px;
  border: 1px solid rgba(229, 206, 188, 0.75);
  padding: 61px 100px 70px;
}
.article-card .meta { font-size: 14px; line-height: 21px; margin-bottom: 23.5px; }
.article-card h1 { font-size: 40px; line-height: 56px; margin-bottom: 47px; }
.article-body p { font-size: 18px; line-height: 27px; margin-bottom: 27px; }
.article-body h2 { font-size: 28px; line-height: 39.2px; margin: 0; }
.article-body ul, .article-body ol { margin: 0 0 27px 36px; }
.article-body li { font-size: 18px; line-height: 27px; margin-bottom: 0; }
.article-body img { margin: 0 auto 27px; }

@media (min-width: 751px) and (max-width: 1000px) {
  .article-card { padding-left: 61px; padding-right: 61px; }
}
@media (max-width: 750px) {
  .article-card { padding: 61px 19px 40px; margin-left: auto; margin-right: auto; }
}

/* ---------- contact form: Bloom embed ----------
   The form itself renders inside Bloom's frame and is styled in Bloom
   (Design tab). Here the panel only frames it and grows to fit. */
.contact-form.contact-embed {
  display: block;
  height: auto;
  min-height: 0;
  /* the Bloom form paints its own white card; we only round its corners */
  padding: 0;
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
}
.contact-embed > div { margin: 0; }
.contact-embed iframe { display: block; }
.contact:has(.contact-embed) { height: auto; }
@media (min-width: 1001px) { .contact:has(.contact-embed) { min-height: 772px; padding-bottom: 60px; } }
@media (min-width: 751px) and (max-width: 1000px) {
  .contact:has(.contact-embed) { min-height: 1000.1px; padding-bottom: 60px; }
  .contact-form.contact-embed { position: relative; top: auto; left: auto; transform: none; margin: 40px auto 0; }
}

/* ---------- post bodies, matched to live ----------
   Block styles read from the live posts. The four posts carried over from
   Wix (.wix) keep Wix's own blank-line blocks, so their blocks carry no
   margins of their own. */
.article-body h3 { font-size: 22px; line-height: 30.8px; margin: 0; }
.article-body h4 { font-size: 20px; line-height: 28px; margin: 0; }
.article-body pre {
  font: 16px/24px Inconsolata, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  padding: 2px 25px;
  margin: 15px 18px;
  min-height: 29px;
  background: rgba(130, 130, 130, 0.06);
}
/* live puts 14px between two code blocks, on top of their margins */
.article-body pre + pre { margin-top: 44px; }
.article-body hr {
  border: 0; height: 29px; margin: 0;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}
.article-body img.framed { border: 2px solid #000624; box-sizing: border-box; }
.article-body.wix p, .article-body.wix ul, .article-body.wix ol, .article-body.wix img { margin-bottom: 0; }
.article-body.wix .gap { height: 27px; }
.article-body .center { text-align: center; }
.article-body .right { text-align: right; }
.article-body .justify { text-align: justify; }
/* live adds 14px above a post that opens with an image */
.article-body.wix:has(> img:first-child) { padding-top: 14px; }

/* title block and text column: 740px of text inside the 940px card */
@media (min-width: 1001px) { .article-card { padding-left: 99px; padding-right: 99px; padding-bottom: 60px; } }
/* an older narrow-screen rule left the card against the left edge on tablets */
@media (min-width: 751px) and (max-width: 1000px) { .article-card { margin-left: auto; margin-right: auto; } }
.article-card .meta { margin-bottom: 17px; }
.article-card h1 { margin-bottom: 20px; }
.article-card .updated { font-size: 14px; line-height: 21px; margin: -2px 0 20px; }

/* under the body: category links, then the share row between two rules.
   Live also has tag pills and view/comment/like counters (Wix features). */
.article-card .tags { margin-top: 20px; padding-top: 0; border-top: 0; line-height: 21px; }
.article-card .share-row {
  margin-top: 24px; height: 66px; gap: 30px; align-items: center;
  border-top: 1px solid rgba(4, 4, 4, 0.2);
  border-bottom: 1px solid rgba(4, 4, 4, 0.2);
}
.article-card .share-row a, .article-card .share-row button {
  width: 19px; height: 19px; border-radius: 0; background: none; padding: 0;
}
.article-card .share-row a:hover, .article-card .share-row button:hover { background: none; color: var(--sage); }
.article-card .share-row svg { width: 19px; height: 19px; }
.article-body.wix img:not(.framed) { width: 100%; }

/* ---------- blog index and post surroundings, redesigned ----------
   Our own layout, not the one carried over from Wix: a feature post, cards
   with a summary, quiet category filters. One column edge for everything,
   lined up with the logo and menu in the header. */
.bi-wrap { width: calc(min(100% - 104px, 1496px) - 140px); margin: 0 auto; }

.bi-hero {
  margin-top: -133px;
  padding: 205px 0 64px;
  background: linear-gradient(180deg, rgba(229, 206, 188, 0.92), rgba(252, 247, 230, 0.88)),
              url('/images/texture-dunes.jpg') center top / cover;
}
.bi-hero .eyebrow { font-size: 18px; letter-spacing: 0.06em; margin-bottom: 14px; }
.bi-hero h1 { font-size: clamp(44px, 5.2vw, 76px); line-height: 1.05; }
.bi-hero .lede { max-width: 620px; margin-top: 20px; font-size: 18px; line-height: 1.6; }

.bi-list { padding: 0 0 96px; }
.bi-filters {
  display: flex; flex-wrap: wrap; gap: 4px 30px;
  padding: 26px 0 22px;
  border-bottom: 1px solid rgba(4, 4, 4, 0.12);
}
.bi-filters button {
  font: 15px/1.4 'Open Sans', sans-serif;
  color: var(--ink-soft);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 6px 0; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bi-filters button:hover { color: var(--ink); }
.bi-filters .active { color: var(--ink); border-bottom-color: var(--brick); }
.bi-filters .count { margin-left: 5px; font-size: 12px; color: var(--ink-soft); }

.bi-card { display: block; color: var(--ink); text-decoration: none; }
.bi-card span { display: block; }
.bi-card .pic { overflow: hidden; background: var(--bg-light); aspect-ratio: 3 / 2; margin-bottom: 20px; }
.bi-card .pic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.bi-card:hover .pic img { transform: scale(1.03); }
.bi-card h2, .bi-card h3 { transition: color 0.2s ease; }
.bi-card:hover h2, .bi-card:hover h3 { color: var(--brick); }
.bi-card h2 { font-size: 26px; line-height: 1.2; margin-bottom: 10px; }

.bi-cats {
  font: 13px/1.4 'Poppins', sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 12px;
}
.bi-excerpt {
  color: #333; font-size: 16px; line-height: 1.55; margin-bottom: 14px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.bi-meta { font-size: 14px; color: var(--ink-soft); }
.bi-more { display: none; margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--brick); }

.bi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; padding-top: 56px; }
.bi-card.hidden { display: none; }

/* the first post showing is the feature: full width, picture beside the text */
.bi-card.is-feature {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(4, 4, 4, 0.12);
}
.bi-card.is-feature .pic { aspect-ratio: 16 / 10; margin-bottom: 0; }
.bi-card.is-feature h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.1; margin-bottom: 18px; }
.bi-card.is-feature .bi-excerpt { font-size: 18px; line-height: 1.6; margin-bottom: 20px; -webkit-line-clamp: 5; }
.bi-card.is-feature .bi-more { display: block; }

/* choosing a category: cards glide to their new places and the rest fade */
::view-transition-group(*) { animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.3s; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* post page: a way back above the article, three more posts below it */
.post-back, .more-posts { width: calc(80% - 40px); max-width: 940px; margin-left: auto; margin-right: auto; }
.post-back { padding: 26px 0 18px; font-size: 14px; }
.post-back a { color: var(--ink); text-decoration: none; }
.post-back a:hover { color: var(--brick); }
.more-posts { margin-top: 64px; }
.more-posts .recent-head { padding-bottom: 14px; border-bottom: 1px solid rgba(4, 4, 4, 0.15); margin-bottom: 0; }
.more-posts .recent-head .see-all { color: var(--ink); }
.more-posts .recent-head .see-all:hover { color: var(--brick); }
.more-posts .bi-grid { gap: 32px 28px; padding-top: 28px; }
.more-posts .bi-card .pic { margin-bottom: 14px; }
.more-posts .bi-card h3 { font-size: 21px; line-height: 1.2; margin-bottom: 8px; }
.more-posts .bi-cats { font-size: 11px; margin-bottom: 8px; }

@media (max-width: 1000px) {
  .bi-wrap { width: calc(100% - 104px); }
  .bi-hero { margin-top: calc(-7.8vw - 58.3px); padding-top: calc(7.8vw + 110px); }
  .bi-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 28px; padding-top: 40px; }
  .bi-card.is-feature { grid-template-columns: 1fr; gap: 26px; padding-bottom: 40px; }
}
@media (max-width: 750px) {
  .bi-wrap { width: calc(100% - 44px); }
  .bi-hero { margin-top: calc(-110.6 * var(--m)); padding: calc(110.6 * var(--m) + 44px) 0 40px; }
  .bi-hero .eyebrow { font-size: 14px; }
  .bi-hero .lede { font-size: 16px; }
  .bi-filters { flex-wrap: nowrap; overflow-x: auto; gap: 0 22px; scrollbar-width: none; }
  .bi-filters button { white-space: nowrap; flex: none; }
  .bi-grid, .more-posts .bi-grid { grid-template-columns: 1fr; gap: 40px; }
  .bi-card.is-feature .bi-excerpt { font-size: 16px; }
  .post-back, .more-posts { width: calc(100% - 44px); }
  .bi-list { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}