/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/eb-garamond-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/eb-garamond-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/eb-garamond-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/eb-garamond-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/eb-garamond-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/eb-garamond-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lineUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes slowZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes ruleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes xfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: #c9a227; }
a:hover { color: #ddb84a; }
::selection { background: #c9a227; color: #14100c; }
input, select, textarea { font-family: 'EB Garamond', serif; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #c9a227; outline-offset: 3px; }
select option { background: #1c1712; color: #eae3d3; }

/* hover states lifted out of the mockup's style-hover pseudo-attributes */
.hv-1{transition:background .25s ease,color .25s ease}
.hv-1:hover,.hv-1:focus-visible{color: #c9a227;}

/* Portraits: full color, always. They were previously muted with
   `filter: saturate(0.35) contrast(1.03) sepia(0.1)` and un-muted on hover --
   removed 2026-08-25 on TJ's call, deliberately, not by oversight. Do not
   reintroduce the desaturation-plus-hover pattern: on a phone there is no
   hover, so the mobile majority only ever saw the muted state and the real
   photographs never resolved for them. If the portraits ever need to sit
   back into the palette, do it to the image files rather than with a filter
   a touch device cannot lift. */
.portrait {
  width: 100%;
  /* height:auto is load-bearing, not tidiness. The width/height ATTRIBUTES on
     these <img> tags map to presentational hints (height: 1000px on Patrick's).
     Without an explicit height here, that hint resolves the box's height, which
     makes aspect-ratio inert and lets object-fit:cover crop the photo into a
     1000px-tall frame. Removing this line silently un-squares the portraits. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Mobile collapse for the two-column rows (services, the two bios, the inquiry
   form). Those grids are declared with INLINE styles, and an inline style beats
   any stylesheet rule that is not !important -- that is the only reason these
   carry it, not carelessness.
   What breaks without this: at phone width the right column cannot shrink below
   its content, so the whole PAGE scrolls sideways. Measured 60px past a 500px
   viewport before this existed, on every build going back to the first one.
   `order` is deliberately NOT reset here. The service rows alternate
   image-left/image-right using order, and leaving it alone is exactly what makes
   every collapsed row read image-then-text instead of flipping every other one. */
@media (max-width: 860px) {
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .grid-2 > * {
    text-align: left !important;
    justify-self: start !important;
  }
}

/* ── Hero headline line grouping ─────────────────────────────────────────────
   Two different line groupings from ONE copy of the text:
     desktop   Change starts with / a conversation.
     phone     Change starts / with a / conversation.
   Note the phone grouping CROSSES the desktop line boundary -- "with" and "a"
   sit on different desktop lines but the same phone line -- so no single fixed
   pair of line-wrappers can produce both. That is why the headline is four
   inline-block word groups with <br>s toggled per breakpoint, instead of the
   two block wrappers it used to be. The alternative (two full copies of the h1,
   one hidden) would duplicate the headline text in the DOM; this doesn't.
   .hw MUST stay inline-block, not inline: `lineUp` is a transform, and
   transforms do nothing on a non-replaced inline box -- make these `inline` and
   the reveal silently stops running while still looking like valid CSS.
   overflow:hidden is the mask the slide rides behind; padding-bottom:0.06em
   keeps it off the descenders. */
.hero-h1 .hw { display: inline-block; overflow: hidden; padding-bottom: 0.06em; vertical-align: bottom; }
.hero-h1 .hw-i { display: block; }
.hero-h1 .hb-m { display: none; }

@media (max-width: 860px) {
  .hero-h1 { text-align: center; }
  .hero-h1 .hb-m { display: inline; }
  .hero-h1 .hb-d { display: none; }
  /* the eyebrow centers with it -- a left-aligned kicker over a centered
     headline over a centered CTA row reads as a bug, not as a choice */
  .hero-eyebrow { justify-content: center; }
}

/* Hero subhead + CTA, phone only. On desktop this row is `space-between` -- the
   subhead sits left, the button right. Once it wraps there is no "between" left
   to justify, so the two land ragged against the left edge under a headline that
   is doing all the visual work; centering them reads as deliberate instead.
   Both declarations need !important: the row carries an inline `justify-content`
   from the mockup, same reason .grid-2 above does. */
@media (max-width: 860px) {
  .hero-cta-row { justify-content: center !important; text-align: center !important; }
  .hero-cta-row > p { max-width: 100%; }
}

/* Cristin's row is REVERSED against Patrick's on desktop -- text left, portrait
   right -- via inline `order` on both children, so the two bios mirror rather
   than repeat. Collapsed to one column that order puts her portrait AFTER her
   entire bio and credential table, which reads as an orphan; Patrick's block
   (portrait first in source, no order set) already collapses correctly.
   This flips only her row, only on a phone. It cannot be folded into the
   `.grid-2 > *` rule above -- that one deliberately leaves `order` alone so the
   alternating service rows keep collapsing image-then-text. */
@media (max-width: 860px) {
  .bio-photo-first > figure { order: 0 !important; }
  .bio-photo-first > div    { order: 1 !important; }
}

/* the book credit in Patrick's bio -- gold rule under the title, not a browser
   underline, so it reads as editorial rather than as a raw hyperlink */
.book-link{color:#c9a227;text-decoration:none;border-bottom:1px solid rgba(201,162,39,.4);transition:color .25s ease,border-color .25s ease}
.book-link:hover,.book-link:focus-visible{color:#ddb84a;border-bottom-color:#ddb84a}

/* ── Selected work ─────────────────────────────────────────────────────── */
.cs-grid {
  display: grid;
  /* 300px floor collapses to one column before a 390px phone viewport (318px of
     content inside the section's 36px padding), which is what keeps this off
     the sideways-scroll bug documented on .grid-2 above. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.cs-card {
  display: flex;
  flex-direction: column;
  padding: 32px 30px 30px;
  border: 1px solid rgba(234,227,211,0.14);
}
.cs-kicker {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c9a227;
  margin-bottom: 18px;
}
.cs-body { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: #c7bfae; }
.cs-body:last-child { margin-bottom: 0; }