@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--paper:#faf7f3;--ink:#281b31;--plum:#422552;--violet:#6e447e;--lilac:#eae0f0;--rule:#d9ccdc;--serif:"Instrument Serif",Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.65 "DM Sans",system-ui,sans-serif}a{color:inherit}a:focus-visible{outline:3px solid #9362a8;outline-offset:5px}.wrap{width:min(1160px,calc(100% - 72px));margin:auto}header{border-bottom:1px solid var(--rule)}header .wrap{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font:32px/1 var(--serif);text-decoration:none;white-space:nowrap}nav{display:flex;gap:24px;align-items:center;font-size:14px}nav a{text-decoration:none}nav a:hover,.textlink:hover{text-decoration:underline}.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid var(--plum);text-decoration:none;font-weight:600;font-size:14px;min-height:48px;background:var(--plum);color:white}.button:hover{background:#583269}.outline{background:transparent;color:var(--plum)}.outline:hover{background:var(--lilac)}.hero{display:grid;place-items:center;text-align:center;min-height:500px;margin-block:26px 45px;padding:62px 30px;background:var(--lilac)}
.hero>div{max-width:760px}
.hero .lead{margin-inline:auto;max-width:55ch}
.hero .actions{justify-content:center}
@media(max-width:640px){.hero{min-height:0;margin-block:16px 28px;padding:44px 18px}.hero h1{font-size:clamp(43px,12vw,58px)}}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--violet);margin:0 0 20px}h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.02}h1{font-size:clamp(58px,7.4vw,108px);letter-spacing:-.025em}h1 em{color:var(--violet);font-weight:400}.lead{font-size:18px;max-width:43ch;margin:24px 0 29px}.actions{display:flex;flex-wrap:wrap;gap:12px}.paths{border-top:1px solid var(--rule);padding-block:47px 70px}.paths h2,.med h2,.about h2,.contact h2{font-size:clamp(43px,6vw,70px)}.grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;gap:12px}.card{display:flex;flex-direction:column;min-height:230px;border:1px solid var(--rule);padding:25px;text-decoration:none}.card:hover{background:#f1e9f3}.card.feature{background:var(--lilac);border-color:#c4acce}.card h3{font-size:36px}.card p{flex:1}.arrow{font-weight:600;color:var(--plum)}.med{background:var(--plum);color:white;padding:78px 0}.med .eyebrow{color:#e2c6ef}.split{display:grid;grid-template-columns:1fr .85fr;gap:64px;align-items:center}.med p{font-size:17px}.med .button,.contact .button{background:#f2e5f6;color:var(--plum);border-color:#f2e5f6}.med .button:hover,.contact .button:hover{background:white}.about{padding:76px 0}.contact{background:#eae0f0;padding:58px 0}.contact .button{background:var(--plum);color:white;border-color:var(--plum)}footer{padding:23px 0;font-size:14px;border-top:1px solid var(--rule)}footer .wrap{display:flex;justify-content:space-between;gap:16px}.inner{padding:68px 0 72px;max-width:850px}.inner h1{font-size:clamp(54px,9vw,96px)}.inner h2{font-size:40px;margin-top:36px}.inner p,.inner ul{max-width:65ch}.inner .button{margin-top:16px}.back{display:inline-block;margin-bottom:33px}.step{padding-bottom:17px;border-bottom:1px solid var(--rule)}@media(max-width:850px){.grid{grid-template-columns:1fr}.card{min-height:0}.split{gap:25px}}@media(max-width:640px){.wrap{width:calc(100% - 36px)}header .wrap{align-items:flex-start;flex-direction:column;gap:13px;padding-block:19px}nav{gap:12px 19px;flex-wrap:wrap}nav .button{padding:5px 12px;min-height:34px}.split{grid-template-columns:1fr}.paths,.about,.med,.contact,.inner{padding-block:43px}.lead{font-size:17px}footer .wrap{flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.fees{border-top:1px solid var(--rule);padding:58px 0}
.fees h2{font-size:clamp(43px,6vw,70px)}
.fees p{margin:0 0 18px}
@media(max-width:640px){.fees{padding:43px 0}}

@media (prefers-reduced-motion: no-preference) {
  @keyframes arrive {
    from { opacity: .35; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes hero-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .hero > div {
    animation: hero-fade-in 850ms cubic-bezier(.22, .61, .36, 1) both;
  }

  .hero > div:focus-within { animation: none; }

  .inner { animation: arrive 360ms ease-out both; }

  .button, .card {
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  @media (hover: hover) {
    .button:hover, .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px #4225521f;
    }
  }

  @supports (animation-timeline: view()) {
    .paths > h2, .paths > .grid, .med > .split,
    .about > .split, .fees > .split, .contact > .split, .inner .step {
      animation: arrive linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 65%;
    }
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 230ms;
  }
}

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0s; }
}

.office-map{display:block;width:100%;max-width:100%;border:1px solid var(--rule);border-radius:8px}


.hero .hero-art {
  display: block;
  width: min(270px, 70%);
  height: auto;
  margin: 0 auto 12px;
}
.inner.art-backed {
  position: relative;
  isolation: isolate;
}
.inner .service-art {
  position: absolute;
  top: 56px;
  right: 0;
  z-index: -1;
  width: min(56%, 430px);
  height: auto;
  opacity: .15;
  pointer-events: none;
}
.contact .split { align-items: start; }
@media (max-width: 640px) {
  .hero .hero-art { width: min(190px, 65%); }
  .inner .service-art { top: 96px; width: 78%; opacity: .1; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes family-ink-in {
    from { transform: translateY(5px) scale(.97); }
    to { transform: translateY(0) scale(1); }
  }
  .hero .hero-art { animation: family-ink-in 1050ms cubic-bezier(.22, .61, .36, 1) both; }
}

/* Keep the portrait illustration within the opening area. */
.hero .hero-art {
  max-height: 220px;
  object-fit: contain;
}
@media (max-width: 640px) {
  .hero .hero-art { max-height: 155px; }
}

@media (max-width: 960px) {
  header .wrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding-block: 19px;
  }
  header nav { flex-wrap: wrap; gap: 12px 19px; }
  header .brand {
    max-width: 100%;
    white-space: normal;
    font-size: clamp(25px, 7vw, 32px);
  }
  .brand-title {
    display: block;
    margin-bottom: 5px;
    font-size: .6em;
  }
  .brand-name { display: block; }
}