:root {
  --paper: #f7f7f3;
  --soft: #edede7;
  --ink: #191b18;
  --muted: #585e55;
  --line: #d8dcd2;
  --white: #fff;
  --accent: #dbecaa;
  --motion-dark: #171b16;
  --motion-ease: cubic-bezier(.2,.7,.2,1);
}
html { color-scheme: light; }
.site-header { background: var(--motion-dark); color: #f8f9f3; border-color: #343a31; }
.site-header .brand small { color: #b8c0b2; }
.site-header .site-nav a:hover, .site-header .site-nav summary:hover { color: var(--accent); }
.site-header .nav-popover { color: var(--ink); }
.site-header .nav-popover a:hover { color: #354421; background: #eef1e7; }
.site-header .header-cta { border-color: #737d6c; }
.site-header .header-cta:hover { color: var(--motion-dark); background: var(--accent); border-color: var(--accent); }
.page-intro { background: #e9ece4; }
.site-footer { background: #e9ece4; }
.gallery-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: min(710px, calc(100svh - 70px));
  color: #fff;
  background: #222720;
  display: grid;
  align-items: stretch;
}
.hero-scenes, .hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-scenes { z-index: -2; }
.hero-scene { opacity: 0; object-fit: cover; object-position: 50% 46%; transition: opacity .65s var(--motion-ease), transform 1.1s var(--motion-ease); transform: scale(1.035); }
.hero-scene.is-current { opacity: 1; transform: scale(1); }
.gallery-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #111710f5 2%, #121810d9 35%, #161b135c 69%, #10140d25), linear-gradient(0deg, #10140dbf, transparent 34%);
}
.gallery-hero-content { display: grid; grid-template-rows: 1fr auto; gap: 22px; align-items: center; padding-block: 56px 24px; }
.hero-message { width: min(100%, 740px); }
.motion-kicker { display: flex; gap: 10px; align-items: center; font-size: .79rem; font-weight: 750; letter-spacing: .035em; }
.motion-kicker > span { width: 23px; height: 1px; display: inline-block; background: currentColor; opacity: .7; }
.hero-message .motion-kicker { color: var(--accent); }
.hero-message h1 { font-size: clamp(2.8rem, 6.1vw, 5.8rem); letter-spacing: -.062em; line-height: .99; margin: 22px 0; font-weight: 850; }
.hero-message h1 em { color: var(--accent); font-style: normal; }
.hero-message > p:not(.motion-kicker) { font-size: clamp(1rem, 1.5vw, 1.16rem); color: #eef2e7; max-width: 39ch; }
.motion-button { display: inline-flex; align-items: center; gap: 22px; min-height: 49px; margin-top: 22px; padding: 10px 16px; border-radius: 5px; background: var(--accent); color: #1b2216; font-weight: 780; font-size: .88rem; transition: background-color .2s, transform .2s; }
.motion-button:hover { background: #eff8d8; transform: translateY(-2px); }
.motion-button span, .motion-link span { transition: transform .22s var(--motion-ease); }
.motion-button:hover span, .motion-link:hover span { transform: translate(3px,-3px); }
.hero-caption { border-top: 1px solid #ffffff55; padding-top: 13px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: .74rem; font-weight: 660; color: #f2f4ed; }
.hero-selector { display: flex; gap: 8px; }
.hero-selector button { min-width: 42px; min-height: 38px; padding: 4px; border: 1px solid #ffffff66; border-radius: 3px; background: #151a1377; color: #fff; cursor: pointer; font-weight: 700; }
.hero-selector button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.motion-section { padding-block: clamp(42px, 7vw, 102px); }
.motion-section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 27px; }
.motion-section-head h2, .work-copy h2, .motion-contact h2 { font-size: clamp(2rem, 4vw, 4.05rem); font-weight: 830; margin-top: 10px; letter-spacing: -.045em; }
.motion-link { font-size: .85rem; font-weight: 720; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 4px; border-bottom: 1px solid currentColor; }
.motion-catalog { display: grid; grid-template-columns: 1.26fr 1fr 1fr; gap: 12px; }
.motion-tile { min-width: 0; position: relative; isolation: isolate; display: flex; align-items: end; min-height: clamp(245px, 27vw, 395px); overflow: hidden; background: #3a4338; color: white; border-radius: 7px; }
.motion-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .48s var(--motion-ease); }
.motion-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #111610f5, transparent 63%); }
.motion-tile:hover img, .motion-tile:focus-visible img { transform: scale(1.06); }
.motion-tile > div { display: grid; grid-template-columns: 1fr auto; align-items: end; width: 100%; gap: 5px 12px; padding: 17px; }
.motion-tile h3 { grid-row: 2; font-size: clamp(1.05rem,1.85vw,1.5rem); }
.motion-tile > div > span:first-child { grid-column: 1; color: var(--accent); font-size: .76rem; }
.motion-tile .tile-arrow { grid-column: 2; grid-row: 2; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #fff8; border-radius: 50%; transition: background-color .2s, color .2s; }
.motion-tile:hover .tile-arrow { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.motion-work { background: var(--motion-dark); color: #f5f7f0; }
.motion-work-inner { display: grid; grid-template-columns: minmax(215px,.82fr) minmax(0,2.18fr); gap: clamp(18px, 5vw, 70px); align-items: center; padding-block: clamp(33px,6vw,84px); }
.work-copy .motion-kicker { color: var(--accent); }
.work-copy > p:not(.motion-kicker) { margin: 13px 0 16px; color: #c7d0c1; max-width: 28ch; }
.work-copy .motion-link { color: var(--accent); }
.work-carousel { min-width: 0; }
.work-track { display: grid; grid-auto-flow: column; grid-auto-columns: 63%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 6px; }
.work-track::-webkit-scrollbar { display: none; }
.work-photo { position: relative; overflow: hidden; border-radius: 6px; scroll-snap-align: start; background: #333c2e; }
.work-photo img { aspect-ratio: 1.33; object-fit: cover; width: 100%; transition: transform .4s var(--motion-ease); }
.work-photo:hover img, .work-photo:focus-visible img { transform: scale(1.035); }
.work-photo > span { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; color: var(--ink); background: var(--accent); }
.work-controls { display: flex; gap: 9px; align-items: center; margin-top: 11px; }
.work-controls > span:first-child { color: var(--accent); font-size: .77rem; font-weight: 720; font-variant-numeric: tabular-nums; }
.work-rule { height: 1px; background: #5c6558; flex: 1; }
.work-controls button { min-height: 40px; min-width: 42px; border: 1px solid #788173; border-radius: 4px; color: #f5f7f0; background: transparent; cursor: pointer; }
.work-controls button:not([disabled]):hover { background: var(--accent); color: var(--ink); }
.work-controls button[disabled] { opacity: .4; cursor: default; }
.motion-contact { display: grid; grid-template-columns: 1.25fr .75fr; align-items: start; gap: clamp(25px,7vw,115px); }
.motion-contact p:not(.motion-kicker) { margin-top: 12px; color: var(--muted); max-width: 43ch; }
.motion-contact .motion-button { background: var(--motion-dark); color: white; }
.motion-contact .motion-button:hover { background: #374430; }
.motion-contact-side { min-width: 0; }
.motion-contact-side nav { display: grid; }
.motion-contact-side nav a, .motion-quote summary { display: flex; align-items: center; justify-content: space-between; gap: 9px; border-bottom: 1px solid var(--line); min-height: 48px; padding: 7px 0; font-weight: 710; }
.motion-contact-side nav a:first-child { border-top: 1px solid var(--line); }
.motion-contact-side nav a:hover { color: #3d532c; }
.motion-quote summary { list-style: none; cursor: pointer; }
.motion-quote summary::-webkit-details-marker { display: none; }
.motion-quote summary::after { content: '+'; font-size: 1.3rem; }
.motion-quote[open] summary::after { content: '−'; }
.motion-quote form { margin-top: 12px; }
.studio-js [data-hero] .hero-message > * { animation: motion-enter .72s var(--motion-ease) both; }
.studio-js [data-hero] .hero-message > :nth-child(2) { animation-delay: .09s; }
.studio-js [data-hero] .hero-message > :nth-child(3) { animation-delay: .18s; }
.studio-js [data-hero] .hero-message > :nth-child(4) { animation-delay: .25s; }
@keyframes motion-enter { from { opacity: .62; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.motion-ready [data-motion-reveal] { transition: opacity .62s var(--motion-ease), transform .62s var(--motion-ease); }
.motion-ready [data-motion-reveal]:not(.is-visible) { opacity: 0; transform: translateY(14px); }
@media (max-width: 890px) {
  .site-header .site-nav { background: var(--motion-dark); color: #fff; border-color: #444d40; }
  .site-header .site-nav > a, .site-header .site-nav summary { border-color: #444d40; }
  .site-header .site-nav .mobile-call { color: var(--accent); }
  .site-header .menu-toggle { background: #232a21; border-color: #687464; }
  .site-header .menu-toggle > span:first-child { background: #f8f9f3; box-shadow: 0 -5px #f8f9f3, 0 5px #f8f9f3; }
  .gallery-hero { min-height: 610px; }
  .motion-work-inner { grid-template-columns: minmax(180px,.9fr) minmax(0,1.7fr); }
}
@media (max-width: 640px) {
  .gallery-hero { min-height: 625px; }
  .gallery-hero::after { background: linear-gradient(90deg, #121810f0 0%, #121810b6 58%, #12181035), linear-gradient(0deg,#10140ddb,transparent 33%); }
  .hero-scene { object-position: 58% 44%; }
  .gallery-hero-content { padding-block: 32px 16px; gap: 15px; }
  .hero-message h1 { font-size: clamp(2rem, 9vw, 3.55rem); margin: 15px 0; }
  .hero-message > p:not(.motion-kicker) { font-size: .98rem; max-width: 30ch; }
  .hero-caption { font-size: .66rem; gap: 9px; }
  .hero-selector button { min-width: 39px; min-height: 40px; }
  .motion-section-head { align-items: start; flex-direction: column; margin-bottom: 17px; gap: 9px; }
  .motion-catalog { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .motion-tile { min-height: 225px; scroll-snap-align: start; }
  .motion-work-inner, .motion-contact { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .work-track { grid-auto-columns: 78%; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-js [data-hero] .hero-message > * { animation: none; }
  .motion-ready [data-motion-reveal]:not(.is-visible) { opacity: 1; transform: none; }
  .hero-scene, .motion-tile img, .work-photo img { transform: none !important; }
}

.header-phones { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; padding-left: 15px; border-left: 1px solid #546051; font-weight: 760; font-size: .9rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.header-phones a { color: #f7f9f2; white-space: nowrap; }
.header-phones a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.header-phones a:focus-visible { outline-color: var(--accent); }
@media (max-width: 890px) {
  .header-phones { margin-left: auto; }
}
@media (max-width: 640px) {
  .header-inner { flex-wrap: wrap; gap: 0 12px; padding-top: 6px; }
  .site-header .menu-toggle { margin-left: auto; }
  .header-phones { order: 3; flex: 0 0 100%; margin: 7px 0 0; padding: 4px 0; min-height: 42px; flex-direction: row; justify-content: space-between; align-items: center; border-left: 0; border-top: 1px solid #465044; font-size: clamp(.77rem, 3.5vw, .9rem); }
  .header-phones a { display: inline-flex; align-items: center; min-height: 34px; }
}
.motion-ready [data-motion-reveal]:focus-within { opacity: 1; transform: none; }


/* A restrained type scale shared by all public pages. */
main h1 { font-size: clamp(1.7rem, 2.8vw, 2.35rem); font-weight: 750; line-height: 1.2; letter-spacing: -.025em; }
main h2 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 740; line-height: 1.24; letter-spacing: -.02em; }
main h3 { letter-spacing: -.01em; }
.page-intro { padding-block: clamp(24px, 4.4vw, 55px); }
.page-intro h1 { font-size: clamp(1.7rem, 2.9vw, 2.35rem); font-weight: 750; letter-spacing: -.025em; }
.motion-section { padding-block: clamp(35px, 5.7vw, 75px); }
.motion-section-head h2, .work-copy h2, .motion-contact h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.95rem); font-weight: 740; letter-spacing: -.025em;
}
.prose h2 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
.contact-panel h2, .contact-form-panel h2 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); }
.gallery-hero { min-height: clamp(395px, 62svh, 540px); }
.gallery-hero-content { padding-block: 37px 17px; gap: 14px; }
.gallery-hero::after {
  background: linear-gradient(90deg, #111710f2 2%, #121810c4 32%, #161b1345 67%, #10140d18),
              linear-gradient(0deg, #10140dab, transparent 30%);
}
.hero-message { width: min(100%, 480px); }
.hero-message h1 {
  font-size: clamp(1.85rem, 3.1vw, 2.55rem); font-weight: 760;
  line-height: 1.18; letter-spacing: -.025em; margin: 13px 0 12px;
}
.hero-message > p:not(.motion-kicker) { font-size: 1rem; line-height: 1.62; }
.hero-message .motion-button { margin-top: 17px; }
.hero-caption { padding-top: 10px; }
.motion-work { background: #ecefe8; color: var(--ink); border-block: 1px solid #d9dfd4; }
.motion-work-inner { display: block; padding-block: clamp(33px, 5.2vw, 68px); }
.work-copy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 22px; margin-bottom: 19px; }
.work-copy > div { min-width: 0; }
.work-copy .motion-kicker { color: #46563c; }
.work-copy .motion-link { color: #354629; flex: 0 0 auto; }
.work-track { display: flex; gap: 14px; border-radius: 8px; }
.work-photo {
  flex: 0 0 calc((100% - 28px) / 3);
  min-width: 0; border-radius: 8px; background: #d4dad0;
}
.work-photo img { aspect-ratio: 1.48; }
.work-photo > span {
  background: #fffef9; border: 1px solid #d8ddd1; color: var(--ink);
  transition: background-color .2s, transform .2s;
}
.work-photo:hover > span, .work-photo:focus-visible > span { background: var(--accent); transform: translate(2px,-2px); }
.work-controls { margin-top: 11px; }
.work-controls > span:first-child { color: #415039; }
.work-rule { background: #c4cec0; }
.work-controls button { border: 1px solid #acb8a6; color: var(--ink); background: #f7f8f4; border-radius: 6px; }
.work-controls button:not([disabled]):hover { background: var(--accent); color: var(--ink); border-color: #89987f; }
.footer-channels { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.footer-channels a {
  width: 39px; height: 39px; display: grid; place-items: center;
  color: #273125; background: #f7f8f4; border: 1px solid #cad2c5; border-radius: 8px;
  transition: color .18s, background-color .18s, border-color .18s;
}
.footer-channels a:hover { color: #fff; background: #283426; border-color: #283426; }
.footer-channels a:focus-visible { outline-color: #526a45; }
@media (max-width: 890px) {
  .work-photo { flex-basis: calc((100% - 14px) / 2); }
}
@media (max-width: 640px) {
  .gallery-hero { min-height: 420px; }
  .gallery-hero-content { padding-block: 24px 13px; }
  .hero-message h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .hero-message > p:not(.motion-kicker) { font-size: .95rem; }
  .gallery-hero::after { background: linear-gradient(90deg,#121810ed,#121810a6 57%,#12181034),linear-gradient(0deg,#10140dba,transparent 30%); }
  .work-copy { margin-bottom: 13px; }
  .work-photo { flex-basis: 82%; }
  .footer-bottom { align-items: start; }
}


/* Keep the public navigation and both phone numbers in reach. */
html { scroll-padding-top: 100px; }
.site-header { position: sticky; top: 0; z-index: 20; }
.skip-link { z-index: 30; }
@media (max-width: 890px) {
  .site-header .site-nav { max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 116px; }
  .site-header .site-nav { max-height: calc(100dvh - 112px); }
}