/* ============================================================
   Simplicity Real Estate — Calm
   Restrained typography, warm bone, soft mint. No editorial scaffolding.
   ============================================================ */

:root {
  --ink:        #023273;
  --ink-deep:   #1A2E4A;
  --ink-2:      #3D4E68;
  --ink-mute:   #7C8699;

  --bone:       #F6F2EA;
  --bone-2:     #EFE9DD;

  --mint:       #DCE8D2;
  --mint-deep:  #B6CDA9;

  --hairline:   #D4CCB9;

  --serif: "Libre Baskerville", "Baskerville", "Iowan Old Style", Georgia, serif;
  --sans:  "General Sans", "Avenir Next", -apple-system, sans-serif;

  --gutter: clamp(1.5rem, 5vw, 4rem);
  --col-max: 1320px;
  --rhythm: clamp(80px, 11vw, 140px);

  --t: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bone); }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--mint-deep); color: var(--ink); }

a { color: inherit; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: fixed; left: 1rem; top: 1rem;
  padding: .6rem .8rem;
  background: var(--ink); color: var(--bone);
  z-index: 100;
}

/* ---------- Logotype ---------- */

.logotype {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  color: var(--ink);
}
.logotype img {
  display: block;
  height: 88px;
  width: auto;
}
.nav .logotype img { height: 76px; }
.foot .logotype img { height: 112px; }
@media (max-width: 600px) {
  .nav .logotype img { height: 54px; }
  .foot .logotype img { height: 84px; }
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bone);
  transition: box-shadow .4s var(--t);
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--hairline); }

.nav__inner {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 1.4rem var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}

.nav__links {
  display: flex;
  gap: 2.25rem;
  justify-content: center;
}
.nav__links a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .92rem;
  letter-spacing: .01em;
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
  padding: .4rem 0;
  transition: color .25s var(--t);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: .2rem;
  height: 1px;
  background: var(--ink);
  transition: right .4s var(--t);
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after { right: 0; }

.nav__phone {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--ink);
  text-decoration: none;
  transition: color .25s var(--t);
}
.nav__phone:hover { color: var(--mint-deep); }

/* Hamburger toggle — hidden on desktop, visible at narrow widths */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  place-items: center;
  color: var(--ink);
}
.nav__bars {
  display: grid;
  gap: 6px;
  width: 24px;
}
.nav__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--t), opacity .25s var(--t);
  transform-origin: center;
}
.nav__toggle.is-open .nav__bars span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.nav__toggle.is-open .nav__bars span:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* Full-screen drawer */
.nav__drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--bone);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.5rem;
  padding: 6rem var(--gutter) 3rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .55s var(--t), visibility 0s linear .55s;
}
.nav__drawer.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform .55s var(--t), visibility 0s linear 0s;
}
.nav__drawer-links {
  display: grid;
  gap: 1.1rem;
}
.nav__drawer-links a {
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  font-variation-settings: "opsz" 96, "SOFT" 100;
  padding: .4rem 0;
}
.nav__drawer-phone {
  font-family: var(--mono, "JetBrains Mono", ui-monospace);
  font-size: 1rem;
  color: var(--ink-2);
  text-decoration: none;
  padding: .6rem 0;
  border-top: 1px solid var(--hairline);
  width: 100%;
  max-width: 14em;
  margin-top: 1.5rem;
  letter-spacing: .04em;
}
.nav__drawer-social {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: .6rem 0;
  letter-spacing: .01em;
  transition: color .25s var(--t);
}
.nav__drawer-social svg { width: 20px; height: 20px; display: block; }
.nav__drawer-social:hover,
.nav__drawer-social:focus-visible { color: var(--ink); }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__phone { display: none; }
  .nav__toggle { display: grid; }
  .nav__inner { grid-template-columns: 1fr auto; }
}
@media (min-width: 761px) {
  .nav__drawer { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  max-width: var(--col-max);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  min-height: calc(100vh - 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 36vw, 540px);
  grid-template-rows: auto auto;
  grid-template-areas:
    "headline portrait"
    "foot     portrait";
  align-items: start;
  align-content: start;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(.75rem, 1.5vw, 1.5rem);
}
.hero__headline { grid-area: headline; }
.hero__foot     { grid-area: foot; }

/* ---------- Square motif (site-wide accents) ---------- */

.sq, .hero__sq {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* Keep section content layered above the square accents.
   Exclude .hero__portrait — it manages its own position: absolute. */
.hero > :not(.hero__sq):not(.hero__portrait),
.section > :not(.sq),
.creed > :not(.sq) {
  position: relative;
  z-index: 1;
}

/* Hero — three squares, larger, animated in after headline */
.hero__sq {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.1s var(--t) 1.4s, transform 1.1s var(--t) 1.4s;
}
.is-ready .hero__sq { opacity: 1; transform: none; }

.hero__sq--a {
  /* Mint backdrop sitting behind Cheryl's head and upper shoulders. Anchored
     to the right column where the portrait lives. */
  top: clamp(2rem, 5vh, 4rem);
  right: clamp(2rem, 5vw, 5rem);
  width: clamp(220px, 22vw, 340px);
  height: clamp(220px, 22vw, 340px);
  background: var(--mint-deep);
}

/* Portrait — Cheryl's transparent silhouette, anchored to the right grid
   column. Her edges flow directly into the bone bg. Negative top margin
   pulls her up so the mint block (which stays put) sits behind her head. */
.hero__portrait {
  grid-area: portrait;
  position: relative;
  width: 100%;
  margin: 0;
  margin-top: clamp(-4rem, -3vw, -1.5rem);
  z-index: 1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s var(--t) 1.3s, transform 1.2s var(--t) 1.3s;
}
.is-ready .hero__portrait { opacity: 1; transform: none; }
.hero__portrait img {
  width: 100%;
  height: auto;
  display: block;
  /* Fade the bottom of the photo into the page bg so the cropped blazer
     edge doesn't read as a hard photographic cutoff. Cheryl appears to
     emerge from the page rather than end at a horizontal line. */
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 96%);
}

/* Vertical name/role caption — anchored to the portrait figure, sitting
   just past Cheryl's right arm in the bone space. Tracks the photo size. */
.hero__caption {
  position: absolute;
  top: 48%;
  right: -1.75rem;
  z-index: 2;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.1s var(--t) 1.8s;
}
.hero__caption sup {
  font-size: .55em;
  letter-spacing: 0;
}
.is-ready .hero__caption { opacity: 1; }

@media (max-width: 880px) {
  .hero__caption { display: none; }
}
/* sq--b and sq--c hidden on desktop — single backdrop composition keeps it clean */
.hero__sq--b,
.hero__sq--c { display: none; }

@media (max-width: 880px) {
  /* Hide all decorative squares on mobile */
  .hero__sq--a, .hero__sq--b, .hero__sq--c { display: none; }

  /* Reflow the hero as a 2-column grid: headline left, portrait right,
     foot (intro + CTA) spanning both columns below. */
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "headline portrait"
      "foot foot";
    align-items: start;
    gap: 1.75rem .25rem;
    min-height: 0;
    padding-top: 1rem;
  }
  .hero__headline {
    grid-area: headline;
    max-width: none;
  }
  .hero__portrait {
    /* Take out of absolute, slot into the grid */
    position: relative !important;
    grid-area: portrait;
    top: auto;
    right: auto;
    width: clamp(150px, 40vw, 220px);
    align-self: start;
    margin-top: 0;
  }
  .hero__foot {
    grid-area: foot;
  }
}

/* Color variants */
.sq--ink     { background: var(--ink-deep); }
.sq--mint    { background: var(--mint-deep); }
.sq--bone    { background: var(--bone); }
.sq--outline-ink  { border: 2px solid var(--ink-deep); background: transparent; }
.sq--outline-bone { border: 2px solid var(--bone); background: transparent; }

/* Per-section placement.
   Sections are position:relative so squares anchor to the section box.
   Full-bleed sections (.approach, .words) place from the viewport edge;
   col-max sections place from the col-max content edge. */

.section, .creed { position: relative; }

/* Approach (navy bg) — bone + mint, placed LEFT in the top padding area
   so they cluster above the title rather than overlapping it */
.approach .sq--a {
  top: clamp(1.5rem, 3vw, 3rem);
  left: clamp(2rem, 6vw, 6rem);
  width: clamp(80px, 8vw, 140px);
  height: clamp(80px, 8vw, 140px);
}
.approach .sq--b {
  top: clamp(5rem, 7vw, 7.5rem);
  left: clamp(11rem, 16vw, 16rem);
  width: clamp(40px, 4vw, 60px);
  height: clamp(40px, 4vw, 60px);
}
.approach .sq--c {
  top: clamp(2.5rem, 4vw, 4rem);
  left: clamp(11rem, 14vw, 14rem);
  width: clamp(22px, 2vw, 30px);
  height: clamp(22px, 2vw, 30px);
}

/* Creed (bone bg) — flanking the slogan */
.creed .sq--a {
  top: clamp(3rem, 5vw, 5rem);
  left: clamp(2rem, 8vw, 9rem);
  width: clamp(56px, 5.5vw, 88px);
  height: clamp(56px, 5.5vw, 88px);
}
.creed .sq--b {
  bottom: clamp(3rem, 5vw, 5rem);
  right: clamp(3rem, 9vw, 11rem);
  width: clamp(40px, 4vw, 60px);
  height: clamp(40px, 4vw, 60px);
}

/* Where I work — navy + mint near section head */
.work .sq--a {
  top: clamp(4rem, 8vw, 8rem);
  right: clamp(1rem, 4vw, 4rem);
  width: clamp(72px, 7vw, 120px);
  height: clamp(72px, 7vw, 120px);
}
.work .sq--b {
  top: clamp(12rem, 14vw, 16rem);
  right: clamp(8rem, 13vw, 13rem);
  width: clamp(36px, 3.6vw, 54px);
  height: clamp(36px, 3.6vw, 54px);
}

/* Words (mint bg) — navy filled + outlined */
.words .sq--a {
  top: clamp(4rem, 8vw, 8rem);
  right: clamp(2rem, 7vw, 7rem);
  width: clamp(80px, 8vw, 130px);
  height: clamp(80px, 8vw, 130px);
}
.words .sq--b {
  top: clamp(14rem, 17vw, 19rem);
  right: clamp(10rem, 15vw, 15rem);
  width: clamp(32px, 3.2vw, 48px);
  height: clamp(32px, 3.2vw, 48px);
}

/* Contact — navy + mint */
.contact .sq--a {
  top: clamp(4rem, 8vw, 8rem);
  right: clamp(1rem, 4vw, 4rem);
  width: clamp(64px, 6.5vw, 110px);
  height: clamp(64px, 6.5vw, 110px);
}
.contact .sq--b {
  top: clamp(13rem, 15vw, 17rem);
  right: clamp(8rem, 13vw, 13rem);
  width: clamp(34px, 3.4vw, 52px);
  height: clamp(34px, 3.4vw, 52px);
}

@media (max-width: 880px) {
  /* Drop the secondary and tertiary squares — keep only one accent per section */
  .approach .sq--b, .approach .sq--c,
  .work .sq--b, .words .sq--b, .contact .sq--b,
  .creed .sq--b {
    display: none;
  }
  /* Re-anchor the surviving square strictly INSIDE the section's top
     padding zone (above title/lede) so it can never sit behind text.
     Smaller size keeps it reading as an accent, not a block. */
  .approach .sq--a, .creed .sq--a {
    top: 1rem;
    left: 1rem;
    right: auto;
    bottom: auto;
    width: 52px;
    height: 52px;
  }
  .work .sq--a, .words .sq--a, .contact .sq--a {
    top: 1rem;
    right: 1rem;
    left: auto;
    bottom: auto;
    width: 52px;
    height: 52px;
  }
}

.hero__headline {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(2rem, 4.6vw, 4.4rem);
  line-height: 1.18;
  letter-spacing: -.025em;
  margin: 0;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  max-width: 16ch;
}
.hero__headline .line {
  display: block;
  overflow: hidden;
  padding-top: 0.3em;
  padding-bottom: 0.18em;
  margin-top: -0.22em;
  margin-bottom: -0.12em;
}
.hero__headline .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-top: 0.3em;
  padding-bottom: 0.18em;
}
.hero__headline .word > span {
  display: inline-block;
  transform: translateY(108%);
  opacity: 0;
  will-change: transform, opacity;
}
.hero__headline .word.italic > span {
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 380;
}
.is-ready .hero__headline .word > span {
  animation: rise 1.1s var(--t) forwards;
}
.is-ready .hero__headline .line:nth-child(1) .word:nth-child(1) > span { animation-delay: .05s; }
.is-ready .hero__headline .line:nth-child(1) .word:nth-child(2) > span { animation-delay: .15s; }
.is-ready .hero__headline .line:nth-child(1) .word:nth-child(3) > span { animation-delay: .25s; }
.is-ready .hero__headline .line:nth-child(2) .word:nth-child(1) > span { animation-delay: .35s; }
.is-ready .hero__headline .line:nth-child(2) .word:nth-child(2) > span { animation-delay: .43s; }
.is-ready .hero__headline .line:nth-child(2) .word:nth-child(3) > span { animation-delay: .53s; }
.is-ready .hero__headline .line:nth-child(3) .word:nth-child(1) > span { animation-delay: .63s; }
.is-ready .hero__headline .line:nth-child(3) .word:nth-child(2) > span { animation-delay: .73s; }

@keyframes rise {
  to { transform: translateY(0); opacity: 1; }
}

/* Mobile headline override — placed AFTER the desktop .hero__headline
   rule above so the cascade picks this up when the media query matches.
   (The mobile @media block higher up gets overridden by the desktop rule
   that comes after it due to equal specificity + later source order.) */
@media (max-width: 880px) {
  .hero__headline {
    font-size: 1.6rem;
    align-self: center;
  }
}

.hero__foot {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s var(--t) 1.2s, transform .8s var(--t) 1.2s;
}
.is-ready .hero__foot { opacity: 1; transform: none; }

.hero__intro {
  max-width: 44ch;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.hero__intro em {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "opsz" 24, "SOFT" 100;
}

@media (max-width: 720px) {
  .hero__foot { grid-template-columns: 1fr; gap: 2rem; }
}

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

.cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  padding: .25rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.cta svg { width: 28px; height: 12px; transition: transform .35s var(--t); }
.cta:hover svg, .cta:focus-visible svg { transform: translateX(6px); }
.cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(.45);
  transition: transform .5s var(--t);
}
.cta:hover::after, .cta:focus-visible::after { transform: scaleX(1); }

/* ---------- Sections (shared) ---------- */

.section {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: var(--rhythm) var(--gutter);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2rem;
  row-gap: clamp(1.75rem, 3.5vw, 3.5rem);
}

.section__head {
  grid-column: 1 / span 12;
  display: grid;
  gap: 1.25rem;
}

.contact__head {
  justify-items: start;
}
.contact__seal {
  display: block;
  height: clamp(96px, 11vw, 148px);
  width: auto;
  margin-bottom: .5rem;
  opacity: .92;
}

.section__title {
  font-family: var(--serif);
  font-weight: 330;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  font-variation-settings: "opsz" 96, "SOFT" 100;
}

.section__lede {
  font-family: var(--serif);
  font-weight: 360;
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
  max-width: 40ch;
  font-variation-settings: "opsz" 36, "SOFT" 100;
}

/* ---------- Approach (full-bleed navy) ---------- */

.approach {
  background: var(--ink-deep);
  color: var(--bone);
  max-width: none;
  margin: 0;
  padding-top: clamp(110px, 13vw, 180px);
  padding-bottom: clamp(110px, 13vw, 180px);
  padding-left: max(var(--gutter), calc(50vw - var(--col-max) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc(50vw - var(--col-max) / 2 + var(--gutter)));
}
.approach .section__title { color: var(--bone); font-weight: 340; }
.approach .section__lede { color: var(--mint-deep); }

.offerings {
  grid-column: 1 / -1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3rem;
  row-gap: 2.5rem;
}
.offering {
  display: grid;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(246, 242, 234, .22);
  position: relative;
}
.offering::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--mint-deep);
  border-radius: 50%;
}

.offering__num {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(3.25rem, 6vw, 5.25rem);
  line-height: .85;
  color: var(--mint-deep);
  opacity: .85;
  letter-spacing: -.02em;
  margin: 0 0 .25rem -.1em;
  display: block;
}
.offering__title {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  margin: 0;
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  color: var(--bone);
}
.offering p {
  margin: 0;
  color: rgba(246, 242, 234, .72);
  max-width: 34ch;
  font-size: 1.02rem;
}

.offering__cta {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--mint-deep);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .98rem;
  margin-top: .35rem;
  padding-bottom: 2px;
  position: relative;
  width: max-content;
}
.offering__cta svg { width: 26px; height: 11px; transition: transform .35s var(--t); }
.offering__cta:hover svg, .offering__cta:focus-visible svg { transform: translateX(6px); }
.offering__cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(.4);
  transition: transform .5s var(--t);
}
.offering__cta:hover::after, .offering__cta:focus-visible::after { transform: scaleX(1); }

@media (max-width: 880px) {
  .offerings { grid-template-columns: 1fr; row-gap: 2.25rem; }
  .offering--low, .offering--high, .offering--mid { margin-top: 0; }
}

/* ---------- Where (towns) ---------- */

.grid {
  grid-column: 1 / -1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2rem;
  row-gap: clamp(3rem, 6vw, 6rem);
}
.card {
  display: grid;
  gap: 1rem;
}
.card:nth-child(1) { grid-column: 1 / span 7; }
.card:nth-child(2) { grid-column: 9 / span 4; margin-top: 5rem; }
.card:nth-child(3) { grid-column: 3 / span 7; margin-top: -1rem; }
.card:nth-child(4) { grid-column: 2 / span 5; margin-top: 3rem; }
.card:nth-child(5) { grid-column: 8 / span 5; margin-top: -2rem; }

.card__frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bone-2);
}
.card:nth-child(2) .card__frame { aspect-ratio: 4 / 5; }
.card:nth-child(3) .card__frame { aspect-ratio: 16 / 9; }
.card:nth-child(4) .card__frame { aspect-ratio: 5 / 4; }
.card:nth-child(5) .card__frame { aspect-ratio: 4 / 3; }

.card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(.95);
  transition: filter .6s var(--t);
}

/* Parallax on the "Areas I service" cards — image scaled slightly so it has
   room to shift inside its frame as the page scrolls. --py is set by JS. */
.work .card__frame img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.18);
  transition: filter .6s var(--t), transform .25s linear;
}
.work .card:hover .card__frame img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.22);
}


.card__town {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  margin: .5rem 0 0;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 36, "SOFT" 100;
}
.card__town span {
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 360;
}
.card__note {
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
  max-width: 36ch;
}

@media (max-width: 880px) {
  .grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 2rem;
  }
  .card:nth-child(n) { grid-column: auto; margin-top: 0; }
  /* 5th card spans both columns since it would sit alone in row 3 */
  .card:nth-child(5) { grid-column: 1 / -1; }
}

/* ---------- Creed (slogan band) ---------- */

.creed {
  padding: clamp(80px, 11vw, 160px) var(--gutter);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.creed__line {
  max-width: var(--col-max);
  margin: 0 auto;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.7rem, 4.2vw, 3.4rem);
  line-height: 1.18;
  letter-spacing: -.018em;
  color: var(--ink);
  font-variation-settings: "opsz" 96, "SOFT" 100;
}
.creed__row {
  display: block;
}
.creed__tail {
  color: var(--ink-2);
}
.creed__tail em {
  font-style: italic;
  position: relative;
  color: var(--ink);
  font-weight: 420;
}
.creed__tail em::after {
  content: "";
  position: absolute;
  left: -.05em; right: -.05em;
  bottom: .08em;
  height: 8px;
  background: var(--mint-deep);
  z-index: -1;
  opacity: .55;
}

/* ---------- Words (testimonials, mint wash) ---------- */

.words {
  background: var(--mint);
  max-width: none;
  margin: 0;
  padding-left: max(var(--gutter), calc(50vw - var(--col-max) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc(50vw - var(--col-max) / 2 + var(--gutter)));
}

.pullquote {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
}
.pullquote blockquote { margin: 0; }
.pullquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 96, "SOFT" 100;
  max-width: 14em;
}
.pullquote p em {
  font-style: italic;
  font-weight: 420;
}
.pullquote figcaption {
  margin-top: 1.75rem;
  color: var(--ink-2);
  font-style: italic;
  font-family: var(--serif);
  font-weight: 360;
  font-size: 1rem;
}

/* Solo variant — single hero testimonial with portrait, used until 4+ reviews accumulate */
.pullquote--solo {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.pullquote--solo .pullquote__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mint-deep);
}
.pullquote--solo .pullquote__media::after {
  content: "";
  position: absolute;
  inset: auto -10px -10px auto;
  width: 60%;
  height: 60%;
  border: 1px solid var(--ink);
  opacity: .35;
  pointer-events: none;
}
.pullquote--solo .pullquote__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9) contrast(1.02);
}
.pullquote--solo .pullquote__body { min-width: 0; }
.pullquote--solo p {
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  max-width: 28em;
  font-variation-settings: "opsz" 48, "SOFT" 100;
}
.pullquote--solo figcaption { margin-top: 1.25rem; }
@media (max-width: 760px) {
  .pullquote--solo {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .pullquote--solo .pullquote__media {
    max-width: 340px;
    aspect-ratio: 4 / 5;
  }
}

.quotes {
  grid-column: 1 / -1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3rem;
  row-gap: 2.5rem;
}
.quotes li {
  display: grid;
  gap: 1rem;
  transition: opacity .75s var(--t);
}
/* Rotation fade — pullquote fades together with the three small slots */
.pullquote { transition: opacity .75s var(--t); }
.quotes blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 380;
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.45;
  font-variation-settings: "opsz" 24, "SOFT" 100;
}
.quotes blockquote p { margin: 0; }
.cite {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 360;
  font-size: .98rem;
}
.words__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .85rem;
  color: var(--ink-mute);
  font-style: italic;
}
@media (max-width: 880px) {
  .quotes { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- Contact ---------- */

.contact__lines {
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: 0;
}
.contact__line {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 1.5rem;
  text-decoration: none;
  color: var(--ink);
  padding: .25rem 0;
  position: relative;
  transition: padding-left .5s var(--t);
}
.contact__line:hover { padding-left: .75rem; }
.contact__lbl {
  align-self: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .82rem;
  color: var(--ink-mute);
}
.contact__big {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.8rem, 5.2vw, 3.6rem);
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: 1.05;
  word-break: break-word;
  position: relative;
  display: inline-block;
}
.contact__big::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: .12em;
  height: 1px;
  background: var(--ink);
  transition: right .55s var(--t);
}
.contact__line:hover .contact__big::after { right: 0; }

@media (max-width: 600px) {
  .contact__line { grid-template-columns: 1fr; gap: .4rem; }
}

/* Form */
.inquiry {
  grid-column: 1 / -1;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.5rem;
}
.field { display: grid; gap: .55rem; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .85rem;
  color: var(--ink-mute);
}
.field input,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: .7rem 0;
  resize: vertical;
  transition: border-color .35s var(--t);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.inquiry .cta { justify-self: start; margin-top: 1rem; }

@media (max-width: 720px) {
  .inquiry { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */

.foot {
  border-top: 1px solid var(--hairline);
  margin-top: 0;
  background: var(--bone);
}
.foot__inner {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 3rem 3rem;
  align-items: start;
}
.foot__col { display: grid; gap: 1.1rem; align-content: start; }
.foot__col--end { justify-self: end; text-align: right; align-items: end; }

.foot__tag {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink-2);
  font-variation-settings: "opsz" 24, "SOFT" 100;
  max-width: 22ch;
}
.foot__tag em {
  font-style: italic;
  color: var(--ink);
  font-weight: 420;
}

.foot__lbl {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
}

.broker {
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  align-self: start;
  justify-self: start;
  line-height: 0;
  transition: opacity .25s var(--t);
}
.broker:hover { opacity: .7; }
.broker img {
  display: block;
  height: 68px;
  width: auto;
}

.foot__line {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.foot__line--muted { color: var(--ink-mute); font-size: .8rem; }

.foot__social {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--ink-2);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .01em;
  transition: color .25s var(--t);
  justify-self: end;
}
.foot__social svg {
  width: 18px;
  height: 18px;
  display: block;
}
.foot__social:hover,
.foot__social:focus-visible { color: var(--ink); }

@media (max-width: 880px) {
  .foot__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }
  .foot__col--end { grid-column: 1 / -1; justify-self: start; text-align: left; }
}
@media (max-width: 560px) {
  .foot__inner { grid-template-columns: 1fr; }
  .foot__col--end { grid-column: auto; }
}

/* ============================================================
   Scroll-triggered reveals — text everywhere, soft and staggered
   ============================================================ */

/* Initial hidden state (only when JS is active, so no-JS users see content) */
.js .section .section__title,
.js .section .section__lede,
.js .section .offerings > *,
.js .section .grid > *,
.js .section .pullquote,
.js .section .words__note,
.js .section .contact__lines > *,
.js .section .inquiry,
.js .creed .creed__row,
.js .approach .section__title,
.js .approach .section__lede {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--t), transform 1.1s var(--t);
  will-change: opacity, transform;
}

/* Squares scale + fade in */
.js .section .sq,
.js .creed .sq {
  opacity: 0;
  transform: scale(.5);
  transform-origin: center;
  transition: opacity 1.2s var(--t), transform 1.2s var(--t);
}

/* When the section is in view, everything plays */
.section.is-in .section__title { opacity: 1; transform: none; }
.section.is-in .section__lede  { opacity: 1; transform: none; transition-delay: .15s; }
.section.is-in .pullquote      { opacity: 1; transform: none; transition-delay: .2s; }
.section.is-in .inquiry        { opacity: 1; transform: none; transition-delay: .6s; }
.section.is-in .words__note    { opacity: 1; transform: none; transition-delay: .8s; }

/* Staggered groups */
.section.is-in .offerings > * { opacity: 1; transform: none; }
.section.is-in .offerings > *:nth-child(1) { transition-delay: .25s; }
.section.is-in .offerings > *:nth-child(2) { transition-delay: .40s; }
.section.is-in .offerings > *:nth-child(3) { transition-delay: .55s; }

.section.is-in .grid > * { opacity: 1; transform: none; }
.section.is-in .grid > *:nth-child(1) { transition-delay: .25s; }
.section.is-in .grid > *:nth-child(2) { transition-delay: .40s; }
.section.is-in .grid > *:nth-child(3) { transition-delay: .55s; }
.section.is-in .grid > *:nth-child(4) { transition-delay: .70s; }

.section.is-in .contact__lines > * { opacity: 1; transform: none; }
.section.is-in .contact__lines > *:nth-child(1) { transition-delay: .25s; }
.section.is-in .contact__lines > *:nth-child(2) { transition-delay: .40s; }

/* Squares reveal */
.section.is-in .sq, .creed.is-in .sq { opacity: 1; transform: scale(1); }
.section.is-in .sq--a, .creed.is-in .sq--a { transition-delay: .20s; }
.section.is-in .sq--b, .creed.is-in .sq--b { transition-delay: .40s; }
.section.is-in .sq--c, .creed.is-in .sq--c { transition-delay: .55s; }

/* Creed slogan: per-row stagger */
.creed.is-in .creed__row { opacity: 1; transform: none; }
.creed.is-in .creed__row:nth-child(1) { transition-delay: .15s; }
.creed.is-in .creed__row:nth-child(2) { transition-delay: .40s; }
.creed.is-in .creed__row:nth-child(3) { transition-delay: .65s; }

/* Mint underline on "Idaho." in the slogan draws in */
.js .creed__tail em::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--t);
}
.creed.is-in .creed__tail em::after {
  transform: scaleX(1);
  transition-delay: 1.05s;
}

/* Mint highlight in the pull-quote draws in */
.js .pullquote p em::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--t);
}
.words.is-in .pullquote p em::after {
  transform: scaleX(1);
  transition-delay: 1.1s;
}

/* Micro-interactions: gentle card + offering lift on hover */
.offering, .card {
  transition: transform .5s var(--t);
}
.offering:hover, .card:hover {
  transform: translateY(-4px);
}

/* ============================================================
   Area detail modals
   ============================================================ */

/* Click affordance on cards */
.work .card {
  cursor: pointer;
  outline-offset: 6px;
}
.work .card:focus-visible {
  outline: 2px solid var(--ink);
}

.card__more {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .85rem;
  color: var(--ink-2);
  margin-top: .35rem;
  letter-spacing: .01em;
  transition: color .3s var(--t), transform .4s var(--t);
}
.work .card:hover .card__more {
  color: var(--ink);
  transform: translateX(4px);
}

/* Native dialog reset */
.area-modal {
  padding: 0;
  border: 0;
  margin: auto;
  width: min(96vw, 920px);
  max-height: 90vh;
  background: var(--bone);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 32px 120px -24px rgba(18, 30, 60, .4);
  position: fixed;
  inset: 0;
}
.area-modal::backdrop {
  background: rgba(18, 30, 60, .68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Entrance animation when dialog opens */
.area-modal[open] {
  animation: modal-in .55s var(--t);
}
.area-modal[open]::backdrop {
  animation: backdrop-in .35s var(--t);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.area-modal__close {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--bone);
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 300;
  padding: 0;
  display: grid;
  place-items: center;
  transition: background .25s var(--t), color .25s var(--t);
}
.area-modal__close:hover,
.area-modal__close:focus-visible {
  background: var(--ink);
  color: var(--bone);
  outline: none;
}

.area-modal__inner {
  overflow-y: auto;
  max-height: 90vh;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.area-modal__head { display: grid; gap: .5rem; max-width: 32em; }
.area-modal__kicker {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.area-modal__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96, "SOFT" 100;
}
.area-modal__sub {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--ink-2);
  font-variation-settings: "opsz" 36, "SOFT" 100;
}

.area-modal__hero {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: clip;
  width: 100%;
}
.area-modal__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(.95);
}

.area-modal__body {
  display: grid;
  gap: 1.1rem;
  max-width: 62ch;
}
.area-modal__body p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink-2);
}

/* Quick facts panel */
.area-modal__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.4rem 2rem;
  margin: 0;
  padding: 1.6rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.area-modal__facts > div { display: grid; gap: .35rem; }
.area-modal__facts dt {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.area-modal__facts dd {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--ink);
  font-variation-settings: "opsz" 24, "SOFT" 100;
}

/* Two-up sub-sections (Who moves here / What you'll find) */
.area-modal__sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
.area-modal__bit { display: grid; gap: .7rem; }
.area-modal__bit h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  color: var(--ink);
}
.area-modal__bit p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
  font-size: 1rem;
}

@media (max-width: 720px) {
  .area-modal__sections { grid-template-columns: 1fr; gap: 1.5rem; }
}

.area-modal__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.area-modal__gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: contrast(1.02) saturate(.95);
}

/* Closing line — italic, single statement that summarizes the area */
.area-modal__close-line {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 380;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--ink);
  font-variation-settings: "opsz" 36, "SOFT" 100;
  max-width: 50ch;
}

@media (max-width: 600px) {
  .area-modal {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
  }
  .area-modal__inner {
    max-height: 100vh;
    padding: clamp(1.5rem, 5vw, 2rem);
    padding-top: 4rem;
  }
}

/* ============================================================
   Mobile refinements
   ============================================================ */

@media (max-width: 880px) {
  /* Cards: uniform 4:3 ratio when stacked — gets rid of the busy
     mixed-aspect feel on a single-column phone layout */
  .card:nth-child(1) .card__frame,
  .card:nth-child(2) .card__frame,
  .card:nth-child(3) .card__frame,
  .card:nth-child(4) .card__frame,
  .card:nth-child(5) .card__frame {
    aspect-ratio: 4 / 3;
  }

  /* Mobile cards: no scale or hover transform — parallax is already
     disabled here, and a scaled image can visually bleed out of its frame
     on touch devices once the tap-triggered :hover state sticks. */
  .work .card__frame img,
  .work .card:hover .card__frame img,
  .work .card:focus-visible .card__frame img {
    transform: none;
  }

  /* Extra safety: enforce the clip even if a child stacking context
     would otherwise let a transformed image render past the frame edge. */
  .card__frame { position: relative; overflow: clip; }

  /* Form inputs: larger tap area + 16px text to prevent iOS auto-zoom */
  .field input,
  .field textarea {
    font-size: 16px;
    padding: .95rem 0;
  }

  /* "Read more →" hint gets its own tap height */
  .card__more {
    padding: .35rem 0;
    font-size: .95rem;
  }

  /* CTA min-height */
  .cta {
    min-height: 44px;
    align-items: center;
  }

  /* Nav phone in drawer respects 44px tap height */
  .nav__drawer-phone { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__headline .word > span,
  .hero__foot,
  .hero__sq,
  .js .section .section__title,
  .js .section .section__lede,
  .js .section .offerings > *,
  .js .section .grid > *,
  .js .section .pullquote,
  .js .section .words__note,
  .js .section .contact__lines > *,
  .js .section .inquiry,
  .js .creed .creed__row,
  .js .section .sq,
  .js .creed .sq,
  .js .creed__tail em::after,
  .js .pullquote p em::after,
  .offering,
  .card,
  .work .card__frame img {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}