/* Light, depth and material. All scroll motion is driven by app.js. */
:root {
  --tilt-perspective: 1000px;
  --tilt-return: 1000ms;
  --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-follow: 400ms;
  --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-glare-opacity: 0.32;
  --tilt-glare-fade: 300ms;
  --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --glass: #28231bb8;
  --glass-edge: #f2d9a83b;
  --depth-shadow: #0006;
}
html[data-theme=light] {
  --glass: #fff9edb8;
  --glass-edge: #fffdf5bb;
  --depth-shadow: #58402b26;
}

/* Transitions.dev card hover tilt. */
.t-tilt { touch-action: none; }
.t-tilt-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transform:
    perspective(var(--tilt-perspective))
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-return-ease);
  will-change: transform;
}
.t-tilt-card.is-tilting {
  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}
.t-tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.48), rgba(255,255,255,0.06) 52%, rgba(255,255,255,0) 84%),
    radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.22), rgba(255,255,255,0.04) 58%, rgba(255,255,255,0) 78%),
    radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.10), rgba(255,255,255,0) 88%);
  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
}
.t-tilt.is-hover .t-tilt-glare { opacity: var(--tilt-glare-opacity); }
@media (prefers-reduced-motion: reduce) {
  .t-tilt-card { transform: none !important; transition: none !important; }
}

/* The page keeps its native touch scroll; tilt is a desktop enhancement. */
.service-frame.t-tilt { touch-action: pan-y; min-width: 0; }
.service-card { width: 100%; translate: 0 var(--depth-y, 0px); border-radius: 15px;
  box-shadow: 0 3px 0 #6e5738, 0 8px 0 -3px #32291d, 0 24px 35px -18px var(--depth-shadow); }
.service-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid #f6dfb947; box-shadow: inset 0 1px 0 #fff4, inset 0 -1px 0 #0009;
  pointer-events: none; }
.service-frame:last-child h3 { font-size: 46px; }
.service-frame:not(:last-child) .service-copy h3 { font-size: 54px; }
.service-copy { text-shadow: 0 3px 12px #0009; }
.card-index { padding: 7px 10px; top: 17px; left: 17px; border-radius: 20px;
  background: #17141066; border: 1px solid #ffffff30; backdrop-filter: blur(14px); color: #fff0d7; }
.card-arrow { background: linear-gradient(140deg, #f1d7aa, #c69b59);
  box-shadow: inset 0 1px 1px #fff9, 0 3px 0 #795e38, 0 8px 16px #0005; }
.service-frame.is-hover .service-card { box-shadow: 0 3px 0 #806641, 0 8px 0 -3px #32291d, 0 32px 48px -16px var(--depth-shadow); }
.service-card:focus-visible { outline-offset: 8px; }

.hero { box-shadow: inset 0 1px 0 #ffffff22, 0 18px 55px -30px var(--depth-shadow); }
.hero-media img { transform: translateY(var(--parallax, 0px)) scale(1.16); }
.hero-content { translate: 0 var(--copy-y, 0px); }
.hero h1 { text-shadow: 0 2px 0 #0002, 0 12px 30px #0002; }
.hero-orbit { display: block; position: absolute; inset: -17% -13% auto auto; width: 46%; height: 130%;
  border: 0; border-radius: 0; pointer-events: none; z-index: 1; opacity: .75;
  transform: perspective(1000px) translateY(var(--orbit-y, 0px)) rotateY(-30deg) rotateZ(-20deg); }
.hero-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #c5a267;
  border-top-color: #f5dfaa; border-left-color: #8d6b342b; border-bottom-color: #806035;
  box-shadow: 2px 1px 1px #f3daa55c, 7px 10px 20px #0003, inset -2px 0 2px #0005; }
.hero-orbit i:nth-child(2) { inset: 6% 8%; opacity: .55; border-width: 1px; }
.hero-orbit i:nth-child(3) { inset: -5% -8%; opacity: .35; border-width: 1px; }
.hero-stamp { z-index: 2; background: linear-gradient(135deg, #fff3, transparent 45%), #211c1680;
  border-color: #ecd2a47a; backdrop-filter: blur(20px) saturate(1.25);
  transform: perspective(800px) translateY(var(--stamp-y, 0px)) rotateY(-12deg) rotateZ(10deg);
  box-shadow: inset 0 2px 2px #fff3, inset 0 -2px 1px #0005, 0 0 0 7px #0001, 0 0 0 8px #d8b5744a, 10px 24px 35px #0006; }
html[data-theme=light] .hero-stamp { background: linear-gradient(135deg, #fff8, transparent 55%), #f5e5ce88;
  color: #543b22; border-color: #fff8; box-shadow: inset 0 2px 2px #fffa, 0 0 0 7px #8e62300c, 0 0 0 8px #9c784544, 10px 24px 35px #63492c33; }
.editorial-caption, html[data-theme=light] .editorial-caption { z-index: 2; color: #f4ead9;
  background: #18140fb3; padding: 4px 7px; border-radius: 5px; backdrop-filter: blur(10px); }
.hero-cta, .header-book { background-image: linear-gradient(160deg, #ffffff30, transparent 60%, #00000018);
  box-shadow: inset 0 1px 1px #fff5, 0 3px 0 color-mix(in srgb, var(--accent) 65%, #000), 0 12px 22px #0003; }
.hero-cta:active, .header-book:active { transform: translateY(2px); box-shadow: inset 0 1px 4px #0003; }
.button-orb { box-shadow: inset 0 2px 5px #0008, 0 1px 0 #fff4; }

.process-photo { translate: 0 var(--photo-y, 0px); transform: perspective(1200px) rotateY(-3deg);
  border: 1px solid var(--glass-edge); box-shadow: 6px 6px 0 -2px var(--surface-2), 0 25px 40px -22px var(--depth-shadow); }
.photo-badge { background: #f9e9d0ad; border: 1px solid #fff7; backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 #fff8, 0 6px 16px #0003; }
.dimension { position: relative; isolation: isolate; border: 1px solid var(--glass-edge);
  background: radial-gradient(ellipse at 88% 24%, #d8b57414, transparent 65%), var(--surface);
  box-shadow: inset 0 1px 0 #fff1, 0 22px 45px -30px var(--depth-shadow); }
.strand-stage { transform: perspective(1200px) translateY(var(--stage-y, 0px)) rotateX(var(--stage-angle, 0deg)); }
.strand-stage::before, .strand-stage::after { content: ''; position: absolute; pointer-events: none; z-index: -1;
  left: 5%; right: 5%; height: 37%; top: 34%; border: 1px solid var(--glass-edge); border-radius: 50%;
  transform: rotate(-24deg); box-shadow: inset 0 1px 0 #ffffff0a; }
.strand-stage::after { left: 14%; right: 14%; top: 31%; height: 45%; transform: rotate(32deg); opacity: .45; }
.stage-controls { background: var(--glass); backdrop-filter: blur(18px); border: 1px solid var(--glass-edge);
  padding: 7px 8px 7px 18px; border-radius: 30px; box-shadow: inset 0 1px 0 #ffffff16, 0 8px 18px var(--depth-shadow); }
.tone { background: var(--glass); box-shadow: inset 0 1px 0 #fff1; }
.tone i { box-shadow: inset 0 2px 2px #fff7, inset 0 -2px 3px #0005, 0 1px 2px #0005; }
.gallery-track figure { box-shadow: 0 3px 0 var(--surface-2), 0 12px 24px -12px var(--depth-shadow);
  border: 1px solid var(--glass-edge); }
.gallery-track figure:nth-child(odd) { translate: 0 var(--gallery-y, 0px); }
.gallery-track figure:nth-child(even) { translate: 0 calc(var(--gallery-y, 0px) * -1); }
.address-card { position: relative; background: linear-gradient(135deg, #d8b57418, transparent), var(--glass);
  border: 1px solid var(--glass-edge); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 #ffffff24, 0 16px 32px -20px var(--depth-shadow); }
.mobile-nav { background: var(--glass); border-color: var(--glass-edge); backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: inset 0 1px 0 #ffffff29, 0 12px 30px #0005; }

@media (max-width: 1100px) {
  .service-frame:not(:last-child) .service-copy h3 { font-size: 48px; }
  .service-frame:last-child .service-copy h3 { font-size: 38px; }
}
@media (max-width: 760px) {
  .hero-orbit { width: 270px; height: 490px; top: auto; bottom: -40px; right: -110px; opacity: .55; }
  .hero-media img { transform: translateY(var(--parallax, 0px)) scale(1.08); }
  .hero-stamp { right: 25px; }
  .services-grid { gap: 25px; }
  .service-frame:not(:last-child) .service-copy h3 { font-size: 64px; }
  .service-frame:last-child .service-copy h3 { font-size: clamp(43px, 14vw, 55px); }
  .process-photo { transform: none; }
  .gallery-track { padding-top: 9px; padding-bottom: 20px; }
  .stage-controls { padding-left: 13px; gap: 10px; }
}
@media (min-width: 500px) and (max-width: 760px) {
  .services-grid { gap: 10px; }
  .service-frame:not(:last-child) .service-copy h3 { font-size: 32px; }
  .service-frame:last-child .service-copy h3 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content, .service-card, .process-photo, .gallery-track figure { translate: none !important; }
  .hero-orbit { transform: perspective(1000px) rotateY(-30deg) rotateZ(-20deg); }
  .hero-stamp { transform: rotate(10deg); }
  .strand-stage { transform: none; }
  .t-tilt-glare { display: none; }
}