@font-face {
  font-family:'Noto Serif SC';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/noto-serif-sc-600.woff2') format('woff2')}
:root {
  --paper:#f8f8f6;
  --ink:#23221f;
  --muted:#75746f;
  --brown:#35291f;
  --line:#d5d4ce;
  --serif:'Noto Serif SC','Songti SC',serif;
  --sans:'PingFang SC','Microsoft YaHei',sans-serif}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:35px}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:16px/1.8 var(--sans);
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit;
  color:inherit;
  cursor:pointer}
button,a,summary {
  -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid #9f5c36;
  outline-offset:6px}
::selection {
  background:var(--brown);
  color:var(--paper)}
.header {
  height:105px;
  padding:28px 4.1%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:50}
.brand {
  font:700 25px/1 var(--serif);
  letter-spacing:2px;
  display:flex;
  flex-direction:column;
  gap:8px}
.brand span {
  font:11px Arial;
  letter-spacing:3px}
.menu-toggle {
  width:44px;
  height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  border:0;
  background:none;
  padding:9px}
.menu-toggle span {
  height:2px;
  background:currentColor;
  width:27px;
  transition:transform .4s}
.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(4.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-4.5px) rotate(-45deg)}
.hero {
  height:530px;
  text-align:center;
  padding:155px 25px 0;
  position:relative}
.hero h1 {
  font:400 clamp(42px,5.1vw,78px)/1.3 var(--serif);
  letter-spacing:-.045em;
  margin:0;
  display:flex;
  justify-content:center}
.hero h1>span {
  overflow:hidden;
  display:block;
  padding:0 0 12px}
.hero h1 i {
  font-style:normal;
  display:block}
.explore {
  position:absolute;
  bottom:32px;
  right:4.2%;
  font-size:23px;
  transition:transform .3s}
.explore:hover {
  transform:translateY(7px)}
.media-section {
  padding:0 0 0;
  min-height:650px}
.media-frame {
  width:78%;
  height:clamp(540px,64vw,880px);
  margin:auto;
  position:relative;
  border-radius:13px;
  overflow:hidden;
  isolation:isolate;
  background:#a49b8c;
  will-change:width}
.slides,.slide,.media-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%}
.slide {
  object-fit:cover;
  opacity:0;
  transform:scale(1.07);
  transition:opacity .7s;
  object-position:center 45%;
  will-change:transform}
.slide.is-active {
  opacity:1}
.slide:nth-child(2) {
  object-position:center 48%}
.slide:nth-child(3) {
  object-position:center 65%}
.media-shade {
  background:linear-gradient(0deg,#0007,transparent 70%)}
.media-copy {
  position:absolute;
  left:6%;
  bottom:105px;
  color:white;
  font:40px/1.5 var(--serif);
  display:flex;
  flex-direction:column}
.media-controls {
  position:absolute;
  bottom:35px;
  left:6%;
  right:6%;
  display:flex;
  gap:17px;
  align-items:center;
  color:white;
  font:12px Arial}
.media-controls button {
  background:transparent;
  border:1px solid #ffffff70;
  border-radius:50%;
  width:33px;
  height:33px;
  font-size:17px;
  display:grid;
  place-items:center;
  transition:background .2s}
.media-controls button:hover {
  background:#ffffff30}
.media-controls .pause {
  font-size:12px}
.progress {
  height:1px;
  background:#fff5;
  width:100px;
  margin-right:auto;
  overflow:hidden}
.progress i {
  height:100%;
  width:100%;
  display:block;
  transform:scaleX(0);
  transform-origin:left;
  background:#fff}
.section {
  padding:135px 8%}
.eyebrow {
  font-size:12px;
  letter-spacing:.7px;
  margin:0 0 39px}
h2 {
  font:600 clamp(42px,3.6vw,48px)/1.45 var(--serif);
  letter-spacing:-.05em;
  margin:0}
.services {
  padding-top:65px}
.services>h2 {
  max-width:650px;
  margin-bottom:65px}
.service-list details {
  border-top:1px solid var(--line);
  transition:background .35s,color .35s,border-radius .35s,box-shadow .35s;
  position:relative}
.service-list details:last-child {
  border-bottom:1px solid var(--line)}
.service-list details:hover,.service-list details[open] {
  background:var(--brown);
  color:#fff;
  border-color:transparent;
  border-radius:13px;
  box-shadow:0 17px 26px #35291f15;
  z-index:1}
.service-list summary {
  padding:36px 24px;
  list-style:none;
  display:grid;
  grid-template-columns:1.1fr 1.15fr 32px;
  align-items:center;
  gap:20px;
  cursor:pointer}
.service-list summary::-webkit-details-marker {
  display:none}
.service-name {
  font:31px var(--serif);
  display:flex;
  flex-direction:column;
  gap:9px}
.service-name small {
  font:11px Arial;
  letter-spacing:1px;
  opacity:.6}
.benefit {
  font-size:12px}
.arrow {
  font:27px Arial;
  transition:transform .35s}
.service-body {
  overflow:hidden}
.service-body>div {
  padding:0 80px 35px 49%;
  font-size:12px}
.service-body p {
  margin:0 0 18px;
  max-width:400px;
  line-height:2}
.service-body span {
  font-size:12px;
  opacity:.6}
.principle-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5%}
.principle-grid>div {
  border-top:1px solid var(--line);
  padding-top:20px}
.principle-grid span {
  font-size:12px}
.principle-grid h3 {
  font:21px/1.5 var(--serif);
  margin:30px 0 15px}
.principle-grid p {
  font-size:12px;
  line-height:2;
  color:var(--muted);
  max-width:280px}
.client-names {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px}
.client-names span {
  font:600 24px var(--serif)}
.contact {
  background:#eeede8;
  padding-top:90px;
  padding-bottom:0}
.contact>h2 {
  font-size:clamp(35px,4.8vw,72px)}
.contact-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:30px;
  margin:70px 0 95px;
  font-size:12px}
.contact-grid>p {
  font:19px/1.7 var(--serif);
  margin:0}
.contact-grid>div>span {
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-bottom:16px}
.contact-grid address {
  font-style:normal}
.contact-grid p {
  margin:0}
.contact-grid small {
  font:11px Arial}
.footer-wordmark {
  font:700 clamp(70px,18.6vw,280px)/1.22 var(--serif);
  letter-spacing:-.06em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  white-space:nowrap}
.footer-wordmark>span {
  font:400 .4em Arial;
  transition:transform .35s}
.footer-wordmark:hover>span {
  transform:translate(8px,-8px)}
footer {
  padding:25px 4.1%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:12px}
footer a:hover {
  text-decoration:underline}
.menu {
  position:fixed;
  inset:0;
  background:var(--brown);
  color:var(--paper);
  z-index:40;
  padding:145px 10% 45px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .65s cubic-bezier(.76,0,.24,1);
  overflow:auto}
.menu[hidden] {
  display:none}
.menu.is-open {
  clip-path:inset(0)}
.menu nav {
  display:flex;
  flex-direction:column}
.menu nav a {
  font:clamp(32px,5vw,74px)/1.65 var(--serif);
  border-bottom:1px solid #ffffff30;
  display:flex;
  gap:35px;
  align-items:center;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .5s,transform .6s}
.menu.is-open nav a {
  opacity:1;
  transform:none}
.menu nav a:nth-child(2) {
  transition-delay:.08s}
.menu nav a:nth-child(3) {
  transition-delay:.16s}
.menu nav a:nth-child(4) {
  transition-delay:.24s}
.menu nav small {
  font:12px Arial}
.menu p {
  font-size:12px;
  display:flex;
  justify-content:space-between;
  margin-top:35px}
.menu-open {
  overflow:hidden}
.menu-open .header {
  position:fixed;
  inset:0 0 auto;
  color:var(--paper)}
.menu-open main {
  margin-top:105px}
@keyframes fade-enter {
  from {
  opacity:0;
  transform:translateY(15px)}
to {
  opacity:1;
  transform:translateY(0)}
}
@media(min-width:1600px) {
  .hero {
  height:630px;
  padding-top:190px}
}
@media(max-width:760px) {
  .header {
  height:90px;
  padding:23px 6%}
.brand {
  font-size:22px}
.brand span {
  font-size:6px;
  letter-spacing:2.5px}
.hero {
  height:500px;
  padding-top:114px}
.hero h1 {
  display:block;
  font-size:clamp(37px,8.6vw,62px);
  line-height:1.45}
.hero h1>span {
  padding-bottom:0}
.explore {
  bottom:23px;
  right:6%}
.media-section {
  min-height:0}
.media-frame {
  width:88%;
  height:590px;
  border-radius:9px}
.media-copy {
  font-size:28px;
  bottom:95px;
  left:7%}
.media-controls {
  left:7%;
  right:7%;
  gap:10px;
  bottom:25px}
.progress {
  width:45px}
.media-controls button {
  width:30px;
  height:30px}
.section {
  padding:80px 6%}
.eyebrow {
  font-size:12px;
  margin-bottom:30px}
h2 {
  font-size:37px}
.services {
  padding-top:30px}
.services>h2 {
  margin-bottom:40px}
.service-list summary {
  padding:28px 15px;
  grid-template-columns:1fr 25px;
  gap:14px}
.service-name {
  font-size:25px;
  gap:7px}
.service-name small {
  font-size:7px}
.benefit {
  grid-row:2;
  grid-column:1;
  font-size:12px;
  opacity:.7}
.arrow {
  grid-column:2;
  grid-row:1/3}
.service-body>div {
  padding:0 30px 28px 15px;
  font-size:12px}
.principle-grid {
  grid-template-columns:1fr;
  gap:25px}
.principle-grid h3 {
  font-size:20px;
  margin:18px 0 10px}
.principle-grid p {
  max-width:100%;
  margin-bottom:0}
.client-names {
  justify-content:center;
  flex-wrap:wrap;
  gap:25px 30px}
.client-names span {
  font-size:21px}
.contact {
  padding-top:65px;
  padding-bottom:0}
.contact>h2 {
  font-size:35px}
.contact-grid {
  grid-template-columns:1fr 1fr;
  gap:35px 20px;
  margin:45px 0 65px;
  font-size:12px}
.contact-grid>p {
  grid-column:1/3;
  font-size:19px}
.contact-grid small {
  font-size:12px}
.footer-wordmark {
  font-size:19vw;
  line-height:1.4;
  letter-spacing:-.06em}
footer {
  padding:20px 6%;
  flex-wrap:wrap;
  font-size:12px;
  gap:10px}
footer>span:first-child {
  width:100%}
footer>a {
  margin-left:auto}
.menu {
  padding:125px 7% 35px}
.menu nav a {
  font-size:35px;
  line-height:1.9;
  gap:20px}
.menu p {
  font-size:12px}
.menu-open main {
  margin-top:90px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important}
.media-frame {
  will-change:auto}
.slide {
  transform:none!important}
.menu nav a {
  transform:none}
}
/* Clear positioning and client relationships are visible before the first image. */
.hero {
  height:490px;
  padding:62px 6% 0;
  text-align:center}
.hero-kicker {
  font-size:12px;
  letter-spacing:1.2px;
  margin:0 0 20px;
  color:#66655f}
.hero h1 {
  font-size:62px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.035em}
.hero h1>span {
  padding-bottom:5px}
.hero-description {
  font-size:16px;
  line-height:1.8;
  margin:16px auto 0;
  color:#62615b}
.hero-clients {
  max-width:960px;
  margin:38px auto 0;
  border-top:1px solid var(--line);
  padding-top:20px}
.hero-clients>p {
  font-size:12px;
  color:var(--muted);
  margin:0 0 17px;
  letter-spacing:1px}
.client-names {
  justify-content:space-between;
  gap:28px}
.client-names span {
  font:500 24px/1.6 var(--sans);
  white-space:nowrap}
.explore {
  bottom:26px}
.principle-grid p {
  font-size:16px;
  line-height:1.8}
.benefit,.service-body>div,.contact-grid {
  font-size:15px}
.service-body span,.contact-grid>div>span,.contact-grid small {
  font-size:12px}
.service-name {
  font-size:30px}
.service-name small {
  font-size:11px}
.contact>h2 {
  font-size:48px}
.principle-grid h3 {
  font-size:23px}
.menu nav a {
  font-size:clamp(32px,4vw,52px)}
.brand span {
  font-size:10px;
  letter-spacing:2px}
.media-copy {
  font-size:36px}
.slide:nth-child(1) {
  object-position:center 50%}
.slide:nth-child(2) {
  object-position:center 50%}
.slide:nth-child(3) {
  object-position:center 45%}
footer {
  font-size:11px}
@media(min-width:1600px) {
  .hero {
  height:520px;
  padding-top:76px}
}
@media(max-width:760px) {
  body {
  font-size:15px}
.header {
  height:88px}
.brand span {
  font-size:9px}
.hero {
  height:488px;
  padding:40px 6% 0}
.hero-kicker {
  font-size:11px;
  letter-spacing:.3px;
  margin-bottom:20px}
.hero h1 {
  display:flex;
  flex-direction:column;
  font-size:38px;
  line-height:1.45;
  letter-spacing:-.02em}
.hero h1>span {
  padding:0}
.hero-description {
  font-size:15px;
  line-height:1.8;
  max-width:310px;
  margin-top:20px}
.hero-clients {
  margin-top:29px;
  padding-top:18px}
.hero-clients>p {
  font-size:12px;
  margin-bottom:15px}
.client-names {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px 15px;
  justify-items:center}
.client-names span {
  font-size:17px}
.explore {
  bottom:18px;
  font-size:21px}
h2,.contact>h2 {
  font-size:32px;
  line-height:1.5}
.principle-grid p {
  font-size:15px;
  line-height:1.8}
.service-name {
  font-size:26px}
.service-name small {
  font-size:11px}
.benefit {
  font-size:13px}
.service-body>div {
  font-size:15px}
.service-body span {
  font-size:12px}
.contact-grid {
  font-size:15px}
.principle-grid h3 {
  font-size:22px}
.contact-grid small {
  font-size:11px}
.eyebrow {
  font-size:12px}
.media-copy {
  font-size:27px}
.menu p {
  font-size:12px}
footer {
  font-size:11px}
.contact-grid>div>span {
  font-size:12px}
}
.slide:nth-child(2) {
  object-position:center 62%}
/* Concise firm profile: display typography,compact functional content. */
.skip-link {
   position:fixed;
   left:20px;
   top:-80px;
   z-index:100;
   background:var(--brown);
   color:white;
   padding:10px 20px;
}
.skip-link:focus {
   top:16px;
}
.desktop-nav {
   display:flex;
   align-items:center;
   gap:34px;
   font-size:14px;
}
.desktop-nav a:hover,.hero-link:hover {
   text-decoration:underline;
   text-underline-offset:5px;
}
.nav-contact {
   background:var(--brown);
   color:white;
   padding:10px 22px;
   border-radius:28px;
}
.nav-contact span {
   margin-left:15px;
}
.menu-toggle {
   display:none;
}
.hero {
   height:490px;
   padding-top:48px;
}
.hero-description {
   max-width:650px;
}
.hero-link {
   display:inline-block;
   font-size:13px;
   margin-top:13px;
}
.hero-link span {
   margin-left:12px;
}
.hero-clients {
   margin-top:27px;
}
.media-section {
   min-height:0;
}
.media-frame {
   height:clamp(420px,42vw,610px);
}
.slide {
   filter:saturate(.48) sepia(.13) brightness(.88);
}
.media-shade {
   background:linear-gradient(0deg,#20170e8c,transparent 75%);
}
.media-controls button {
   width:44px;
   height:44px;
   flex:0 0 44px;
}
.media-copy {
   font-size:32px;
}
.section {
   padding:84px 8%;
}
.eyebrow {
   margin-bottom:26px;
}
.services {
   padding-top:84px;
   padding-bottom:72px;
}
.services>h2 {
   margin-bottom:40px;
}
.service-list summary {
   padding:26px 24px;
}
.service-name {
   font:500 27px/1.5 var(--sans);
}
.service-name small {
   font-size:10px;
}
.arrow {
   position:relative;
   width:24px;
   height:24px;
   transform:none!important;
}
.arrow::before,.arrow::after {
   content:'';
   position:absolute;
   background:currentColor;
   left:3px;
   top:11px;
   width:18px;
   height:1px;
   transition:transform .3s;
}
.arrow::after {
   transform:rotate(90deg);
}
details[open] .arrow::after {
   transform:rotate(0);
}
.service-body>div {
   padding-bottom:26px;
}
.about {
   border-top:1px solid var(--line);
   padding-top:72px;
}
.about-intro {
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:9%;
   margin-bottom:52px;
}
.about-copy p {
   margin:0 0 16px;
   color:var(--muted);
   line-height:1.9;
}
.principle-grid h3 {
   font:500 20px/1.6 var(--sans);
   margin:20px 0 10px;
}
.principle-grid p {
   font-size:14px;
   margin:0;
}
.honors {
   border-top:1px solid var(--line);
   margin-top:44px;
   padding-top:25px;
   display:grid;
   grid-template-columns:.8fr 1fr 1.2fr;
   gap:30px;
   font-size:13px;
}
.honors>p {
   color:var(--muted);
   margin:0;
}
.honors>div {
   display:flex;
   gap:18px;
}
.honors span {
   color:var(--muted);
   font:13px/1.8 Arial;
}
.honors p {
   margin:0;
}
.honors strong {
   font-weight:500;
}
.contact {
   padding-top:68px;
   padding-bottom:0;
}
.contact>h2 {
   font-size:clamp(30px,3.6vw,48px);
}
.contact-grid {
   margin:40px 0 45px;
}
.contact-grid>p {
   font:15px/1.9 var(--sans);
}
.footer-wordmark {
   font-size:clamp(65px,15vw,215px);
}
@media(min-width:1600px)  {
  .hero {
   height:510px;
   padding-top:60px;
}
}
@media(max-width:760px)  {
  .desktop-nav {
   display:none;
}
.menu-toggle {
   display:flex;
}
.hero {
   height:500px;
   padding:30px 6% 0;
}
.hero-kicker {
   margin-bottom:16px;
}
.hero-description {
   margin-top:15px;
}
.hero-link {
   margin-top:10px;
}
.hero-clients {
   margin-top:21px;
   padding-top:16px;
}
.hero-clients>p {
   margin-bottom:11px;
}
.client-names {
   gap:10px 12px;
}
.client-names span {
   font-size:17px;
}
.media-frame {
   height:440px;
}
.media-copy {
   font-size:26px;
   bottom:105px;
}
.media-controls {
   gap:9px;
}
.progress {
   width:30px;
}
.section {
   padding:58px 6%;
}
.services>h2 {
   margin-bottom:30px;
}
.service-list summary {
   padding:22px 15px;
}
.service-name {
   font-size:24px;
}
.about-intro {
   grid-template-columns:1fr;
   gap:26px;
   margin-bottom:32px;
}
.about-copy p {
   font-size:15px;
}
.principle-grid {
   gap:24px;
}
.principle-grid h3 {
   font-size:19px;
   margin:12px 0 8px;
}
.honors {
   grid-template-columns:1fr;
   gap:18px;
   margin-top:30px;
}
.honors>div {
   gap:22px;
}
.contact {
   padding-bottom:0;
}
.contact-grid {
   margin:30px 0 36px;
   gap:28px 16px;
}
.contact-grid>p {
   font-size:15px;
}
}

/* Contact channels */
.contact-methods {
  margin-top:36px;
  font-family:var(--sans);
}
.contact-method-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  margin:0;
}
.contact-method-list>div {
  border-top:1px solid var(--line);
  padding-top:18px;
}
.contact-method-list dt {
  font-size:16px;
  margin-bottom:8px;
}
.contact-method-list dd {
  margin:0;
  font-size:clamp(19px,1.85vw,25px);
  line-height:1.6;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.contact-method-list a:hover { text-decoration:underline; text-underline-offset:4px; }
.contact-qr-link { display:inline-block; vertical-align:top; }
.contact-qr-link img { display:block; width:min(240px,100%); height:auto; }
@media(max-width:760px) {
  .contact-methods { margin-top:28px; }
  .contact-method-list { grid-template-columns:1fr; gap:22px; }
  .contact-method-list>div { padding-top:15px; }
  .contact-method-list dd { font-size:24px; }
}

/* One continuous native document: only the material and lettering have depth. */
.envelope { position:relative; height:100vh; height:100dvh; min-height:0; overflow:hidden; isolation:isolate; background:#1c2022; color:#d7bc7d; display:grid; place-items:center; }
.envelope-paper,.envelope-light,.envelope-seam { position:absolute; pointer-events:none; inset:-7%; z-index:-1; }
.envelope-paper { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncG type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncB type='linear' slope='3.2' intercept='-1.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' d='M0 0h240v240H0z'/%3E%3C/svg%3E"); background-size:180px 180px; opacity:.48; mix-blend-mode:soft-light; }
.envelope-light { background:radial-gradient(ellipse at 83% 15%,#a7acaa20,transparent 61%),linear-gradient(112deg,#0008 0%,transparent 45%,#a5a9a408 70%,#0005); }
.envelope-seam { inset:0; box-shadow:inset 24px 0 35px #0005,inset 0 -9px 20px #0008; }
.envelope-seam::before { content:''; position:absolute; inset:0 auto 0 4%; width:1px; background:#0506078a; box-shadow:1px 0 1px #b1bbb61c,6px 0 16px #0006; transform:skewX(-2deg); }
.envelope-title { -webkit-text-stroke:.35px #e8cc8b40; position:relative; margin:0; padding:12px 0 12px .2em; font:600 clamp(48px,6.4vw,98px)/1.6 var(--serif); letter-spacing:.2em; color:#cfb46c; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpath opacity='.65' fill='%23a39774' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"),linear-gradient(118deg,#654416 2%,#d9bd79 12%,#f6e9b5 19%,#a88238 25%,#62461e 35%,#dcc68b 43%,#fff5cc 47%,#af8d43 52%,#795623 62%,#f0dda3 77%,#b79a53 86%,#6c4b20 100%); background-blend-mode:soft-light,normal; background-size:115px 115px,140% 100%; background-position:0 0,55% 50%; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 -1px 0 #050607) drop-shadow(0 1px .35px #e9ce8d55); transform:none; }
.envelope-hint { position:absolute; bottom:max(35px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:60px; padding:8px 18px; color:#c7b99a; font:12px/1.8 var(--sans); letter-spacing:1.6px; white-space:nowrap; opacity:0; visibility:hidden; transition:opacity .6s,visibility .6s; }
.envelope.is-idle .envelope-hint,.envelope-hint:focus-visible { opacity:1; visibility:visible; }
.envelope-hint:focus-visible { outline-color:#c6a35e; }
.hint-arrow { font:20px/1.2 Arial; animation:envelope-nudge 2.8s ease-in-out infinite; }
.hint-mobile { display:none; }
.header#top { scroll-margin-top:-35px; }
.envelope.is-motion-paused .hint-arrow { animation-play-state:paused; }
@keyframes envelope-nudge { 0%,100% { transform:translateY(0); opacity:.45; } 50% { transform:translateY(6px); opacity:1; } }
@media(max-width:760px) {
 .envelope-title { font-size:clamp(34px,10vw,65px); letter-spacing:.16em; padding-left:.16em; }
 .hint-desktop { display:none; } .hint-mobile { display:inline; }
 .hint-arrow { transform:rotate(180deg); animation-name:envelope-nudge-up; }
 .envelope-hint { bottom:max(30px,env(safe-area-inset-bottom)); }
}
@keyframes envelope-nudge-up { 0%,100% { transform:rotate(180deg) translateY(0); opacity:.45; } 50% { transform:rotate(180deg) translateY(6px); opacity:1; } }
@media(prefers-reduced-motion:reduce) {
 .envelope-title { transform:none; }
 .hint-arrow { animation:none; }
 .envelope-hint { transition:none; }
 }

/* Scroll owns these transforms; body copy, anchors and controls stay in normal flow. */
.js .reveal { opacity:1; transform:none; transition:none; }
.scroll-heading { transform:translateY(var(--heading-drift,0px))!important; transition:none!important; }
.media-frame { will-change:auto; }
.media-copy { transform:translateY(var(--media-copy-drift,0px)); }
@media(prefers-reduced-motion:reduce) {
 .scroll-heading,.media-copy { transform:none!important; }
}

/* Connected editorial chapters: content moves naturally past the steady left rail. */
.hero-intro { margin-bottom:40px; transform:translateY(var(--hero-intro-drift,0px)); }
.media-frame { width:92%; clip-path:inset(0 var(--media-inset,8%) round 13px); }
.services,.about { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); column-gap:7%; align-items:start; }
.services { padding-top:54px; padding-bottom:76px; }
.chapter-heading { position:sticky; top:65px; align-self:start; }
.chapter-heading h2 { font-size:clamp(30px,3.1vw,42px); line-height:1.55; }
.chapter-heading .eyebrow { margin-bottom:24px; }
.service-list { min-width:0; }
.service-list summary { grid-template-columns:1fr 24px; gap:10px 18px; padding:26px 20px; }
.service-list .service-name { font-size:26px; }
.service-list .benefit { grid-column:1; grid-row:2; font-size:14px; }
.service-list .arrow { grid-column:2; grid-row:1/3; }
.service-body>div { padding:0 25px 28px 20px; }
.about { position:relative; isolation:isolate; padding-top:72px; padding-bottom:76px; }
.about .chapter-heading::after { content:''; display:block; width:72px; height:1px; background:#a98c53; margin-top:34px; }
.about-body { min-width:0; }
.about-copy { margin-bottom:34px; }
.about-body .principle-grid { grid-template-columns:1fr; gap:26px; }
.about-body .principle-grid h3 { margin-top:14px; }
.about-body .principle-grid p { max-width:none; }
.about-body .honors { grid-template-columns:1fr; gap:18px; margin-top:34px; }
.about-year { position:absolute; left:5%; top:300px; z-index:-1; font:clamp(100px,17vw,240px)/1 Georgia,serif; letter-spacing:-.07em; color:#bca47b20; transform:translateY(var(--about-year-drift,0px)); pointer-events:none; user-select:none; }
.chapter-heading .scroll-heading { transform:none!important; }
@media(max-width:760px) {
 .hero-intro { margin-bottom:34px; }
 .media-frame { width:94%; clip-path:inset(0 var(--media-inset,6%) round 9px); }
 .services,.about { grid-template-columns:1fr; gap:30px; }
 .services { padding-top:44px; padding-bottom:54px; }
 .chapter-heading { position:static; transform:translateY(var(--chapter-drift,0px)); }
 .chapter-heading h2 { font-size:32px; }
 .chapter-heading .eyebrow { margin-bottom:22px; }
 .service-list summary { padding:23px 15px; }
 .service-list .service-name { font-size:24px; }
 .service-list .benefit { font-size:13px; }
 .service-body>div { padding-left:15px; }
 .about { padding-top:54px; padding-bottom:54px; }
 .about-year { top:220px; right:6%; left:auto; font-size:116px; color:#bca47b16; }
 .about .chapter-heading::after { margin-top:22px; }
 .about-copy { margin-bottom:26px; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-intro,.chapter-heading,.about-year { transform:none; }
 .chapter-heading { position:static; }
 .media-frame { clip-path:none; }
}

/* Reserve the editorial drift so it never crosses the stationary client/CTA rows. */
.hero { height:530px; }
@media(min-width:1600px) { .hero { height:550px; } }
@media(max-width:760px) { .hero { height:534px; } .about-year { top:100px; left:6%; right:auto; font-size:100px; } }