/* Direction C: warm and local. Cream and teak with the navy of the team's shirts; Fraunces over Figtree; his photos. */
.dir-c {
  --cream: #fbf5ec; --sand: #f1e4d1; --sand-2: #e8d6bc; --navy: #1f2a5c; --clay: #c4623a; --gold: #e0a73e;
  --ink: #2a2622; --muted: #6d6358; --river: #9cc0cf;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1280px; --gut: 16px; --r: 28px;
  background: var(--cream); color: var(--ink);
}
.dir-c body { font: 400 1.0625rem/1.6 var(--sans); }
@media (min-width: 720px) { .dir-c { --gut: 40px; } }

.c-eyebrow { font: 700 0.8125rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); }
.c-h2 { margin-top: 10px; font: 600 clamp(2.3rem, 5.6vw, 4.4rem)/1.02 var(--serif); letter-spacing: -0.02em; color: var(--navy); text-wrap: balance; }
.c-btn { display: inline-block; padding: 15px 24px; border-radius: 999px; background: var(--clay); color: #fff; font-weight: 700; text-decoration: none; transition: transform 0.2s, background 0.2s; }
.c-btn:hover { transform: translateY(-2px); background: #a94e2b; }
.c-btn-soft { background: var(--sand); color: var(--navy); }
.c-btn-soft:hover { background: var(--sand-2); }

/* Header */
.c-top { max-width: var(--wrap); margin: 0 auto; padding: 16px var(--gut); display: flex; align-items: center; gap: 24px; }
.c-logo img { width: 104px; }
.c-nav { display: none; gap: 26px; margin-left: auto; font-weight: 600; color: var(--navy); }
.c-nav a { text-decoration: none; }
.c-nav a:hover { color: var(--clay); }
.c-call { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.c-call:hover { background: var(--clay); }
@media (min-width: 880px) { .c-nav { display: flex; } .c-call { margin-left: 8px; } .c-logo img { width: 124px; } }

/* Hero */
.c-hero { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gut) 56px; display: grid; gap: 48px; }
.c-hello { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--sand); color: var(--navy); font-weight: 600; font-size: 0.9375rem; }
.c-hello span { padding: 3px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-family: system-ui, sans-serif; font-weight: 600; }
.c-h1 { margin-top: 22px; font: 600 clamp(2.7rem, 6.8vw, 5.4rem)/1 var(--serif); letter-spacing: -0.025em; color: var(--navy); }
.c-h1 em { font-style: normal; color: var(--clay); }
.c-lede { margin-top: 22px; max-width: 33rem; color: var(--muted); font-size: 1.125rem; }
.c-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.c-rating { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 0.9375rem; color: var(--muted); }
.c-rating a { text-decoration: none; color: var(--ink); }
.c-rating .stars { color: var(--gold); margin-right: 4px; }

/* --p (0 to 1) is the scroll parallax, set by GSAP on the collage only. The layers read it through transform, while the
   CSS entrance uses the separate translate/rotate/scale properties, so the two never fight over one property. */
.c-collage { --p: 0; position: relative; aspect-ratio: 1 / 0.92; }
.c-shot-shop { transform: translateY(calc(var(--p) * -30px)); }
.c-shot-team { transform: translateY(calc(var(--p) * -90px)) rotate(calc(var(--p) * -2deg)); }
.c-wai { transform: translateY(calc(var(--p) * -50px)); }
.c-sticker { transform: translateY(calc(var(--p) * -120px)) rotate(calc(var(--p) * 25deg)); }
.c-shot { position: absolute; margin: 0; overflow: hidden; border-radius: var(--r); background: var(--sand); }
.c-shot img { width: 100%; height: 100%; object-fit: cover; }
.c-shot-shop { top: 0; right: 0; width: 92%; aspect-ratio: 16 / 10.5; }
.c-shot-team { left: 0; bottom: 4%; width: 68%; padding: 8px 8px 36px; border-radius: 10px; background: #fff; box-shadow: 0 18px 40px rgba(42, 38, 34, 0.18); rotate: -3deg; overflow: visible; }
.c-shot-team img { aspect-ratio: 1350 / 527; border-radius: 4px; }
.c-shot-team figcaption { position: absolute; left: 12px; bottom: 9px; font: 500 0.875rem/1 var(--serif); color: var(--muted); }
.c-wai { position: absolute; right: 1%; bottom: 0; width: 26%; max-width: 130px; }
.c-wai img { position: relative; width: 100%; }
.c-wai-disc { position: absolute; left: -8%; right: -8%; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: var(--gold); }
.c-sticker {
  position: absolute; left: 6%; top: 4%; display: grid; place-content: center; width: 104px; height: 104px; border-radius: 50%;
  background: var(--navy); color: #fff; text-align: center; font: 600 0.8rem/1.15 var(--sans); rotate: -10deg;
}
.c-sticker span:first-child { font: 600 1.5rem/1 var(--serif); }
@media (min-width: 960px) {
  .c-hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; column-gap: 56px; padding-top: 40px; min-height: calc(100svh - 92px); }
  .c-sticker { width: 124px; height: 124px; left: 0; top: 2%; }
}
@media (prefers-reduced-motion: no-preference) {
  .c-hello, .c-lede, .c-ctas, .c-rating { animation: c-rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
  .c-hello { animation-delay: 0.05s; }
  .c-lede { animation-delay: 0.45s; }
  .c-ctas { animation-delay: 0.6s; }
  .c-rating { animation-delay: 0.75s; }
  .c-shot-shop { animation: c-wipe 1.2s cubic-bezier(0.6, 0, 0.15, 1) 0.15s both; }
  .c-shot-team { animation: c-drop 1.1s cubic-bezier(0.25, 1.3, 0.5, 1) 0.75s both; }
  .c-wai { animation: c-peek 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) 1.15s both; }
  .c-sticker { animation: c-pop 0.8s cubic-bezier(0.3, 1.6, 0.5, 1) 1.3s both; }
}
@keyframes c-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes c-wipe { from { clip-path: inset(0 0 100% 0 round var(--r)); } to { clip-path: inset(0 0 0 0 round var(--r)); } }
/* Individual translate/scale/rotate, not transform: GSAP owns transform for the scroll parallax. */
@keyframes c-drop { from { opacity: 0; translate: 0 40px; rotate: 6deg; } }
@keyframes c-peek { from { opacity: 0; translate: 0 30%; } }
@keyframes c-pop { from { opacity: 0; scale: 0.3; } }

/* Team */
.c-team { max-width: var(--wrap); margin: 0 auto; padding: 72px var(--gut); display: grid; gap: 40px; }
.c-team-head p:last-child { margin-top: 16px; max-width: 32rem; color: var(--muted); }
.c-polaroids { display: flex; justify-content: center; padding: 10px 0; }
.c-polaroid { width: 31%; max-width: 210px; margin: 0 -2%; padding: 7px 7px 26px; background: #fff; border-radius: 6px; box-shadow: 0 12px 30px rgba(42, 38, 34, 0.16); }
.c-polaroid img { aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 15%; border-radius: 3px; }
.c-polaroid-1 { rotate: -6deg; }
.c-polaroid-2 { rotate: 3deg; translate: 0 18px; z-index: 1; }
.c-polaroid-3 { rotate: -2deg; }
.c-ask { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-ask li { display: flex; flex-direction: column; padding: 16px; border-radius: 18px; background: var(--sand); }
.c-ask-for { font: 700 0.75rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); }
.c-ask strong { margin-top: 8px; font: 600 1.45rem/1.05 var(--serif); color: var(--navy); }
.c-ask li > span:last-child { margin-top: 6px; font-size: 0.9375rem; line-height: 1.35; color: var(--muted); }
.c-leaders { display: grid; gap: 22px; }
.c-leaders li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.c-mono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 1.05rem/1 var(--serif); }
.c-leaders strong { display: block; font: 600 1.2rem/1.2 var(--serif); color: var(--navy); }
.c-role { display: block; font-size: 0.875rem; font-weight: 700; color: var(--clay); }
.c-leaders p { margin-top: 6px; font-size: 0.9375rem; color: var(--muted); }
@media (min-width: 720px) { .c-ask { grid-template-columns: repeat(4, 1fr); } .c-leaders { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 960px) {
  .c-team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: center; padding-top: 96px; }
  .c-ask, .c-leaders { grid-column: 1 / -1; }
}

/* Offices and the map */
.c-offices { max-width: var(--wrap); margin: 0 auto; padding: 72px var(--gut) 96px; display: grid; gap: 32px; }
.c-open { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: #fff; font-weight: 600; color: var(--navy); }
.c-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.c-open:has([data-state="open"]) .c-dot { background: #3c9a5f; box-shadow: 0 0 0 4px rgba(60, 154, 95, 0.18); }
.c-open:has([data-state="appt"]) .c-dot { background: var(--gold); }
.c-map { margin: 0; }
.c-map svg { width: 100%; height: auto; }
.c-map figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--muted); }
.c-map-bg { fill: var(--sand); }
.c-map-hills { fill: var(--sand-2); }
.c-map-roads path { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.c-map-river { fill: none; stroke: var(--river); stroke-width: 14; stroke-linecap: round; }
.c-map-moat { fill: rgba(156, 192, 207, 0.25); stroke: var(--river); stroke-width: 6; }
.c-map-label { font: 600 22px/1 var(--serif); fill: var(--navy); }
.c-map-note { font: 600 15px/1 var(--sans); fill: var(--muted); letter-spacing: 0.04em; }
.c-pin path { fill: var(--clay); }
.c-pin circle { fill: #fff; }
.c-pin text { font: 700 22px/1 var(--serif); fill: var(--navy); }
.c-pin .c-pin-sub { font: 600 15px/1 var(--sans); fill: var(--muted); }
.c-pin:hover path, .c-pin:focus-visible path { fill: var(--navy); }
.c-map-north path { fill: var(--navy); }
.c-map-north text { font: 700 14px/1 var(--sans); fill: var(--navy); }
.c-cards { display: grid; gap: 14px; }
.c-card { padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 2px 0 rgba(42, 38, 34, 0.06); }
.c-card-role { font: 700 0.75rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); }
.c-card h3 { margin-top: 8px; font: 600 1.9rem/1 var(--serif); color: var(--navy); }
.c-card address { margin-top: 12px; font-style: normal; color: var(--muted); }
.c-card-phones { margin-top: 12px; }
.c-card-phones span { display: inline-block; width: 4rem; font-size: 0.875rem; color: var(--muted); }
.c-card-phones a { font-weight: 700; color: var(--navy); text-decoration: none; }
.c-card-link { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--clay); text-decoration: none; }
.c-hours { width: 100%; border-collapse: collapse; padding: 0; }
.c-hours caption { text-align: left; padding: 8px 0; font: 600 1.2rem/1.2 var(--serif); color: var(--navy); }
.c-hours th, .c-hours td { padding: 9px 0; border-top: 1px solid var(--sand-2); text-align: left; font-weight: 400; }
.c-hours th { color: var(--muted); }
.c-hours-note { font-size: 0.875rem; color: var(--muted); }
@media (min-width: 960px) {
  .c-offices { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: 48px; }
  .c-offices-head { grid-column: 1 / -1; }
}

/* Footer */
.c-foot { background: var(--navy); color: #fff; padding: 80px var(--gut) 120px; }
.c-foot-inner { max-width: var(--wrap); margin: 0 auto; }
.c-foot-h { font: 600 clamp(2.4rem, 6vw, 4.8rem)/1 var(--serif); letter-spacing: -0.02em; }
.c-foot-lede { margin-top: 16px; max-width: 34rem; color: rgba(255, 255, 255, 0.75); }
.c-foot-links { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.c-btn-outline { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); }
.c-btn-outline:hover { background: rgba(255, 255, 255, 0.1); }
.c-foot-line, .c-foot-fb { color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.c-fine { margin-top: 48px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); }