@font-face { font-family:"DM Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/dm-sans.woff2") format("woff2"); }
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:600 700; font-display:swap; src:url("/fonts/playfair-display.woff2") format("woff2"); }
@font-face { font-family:"Playfair Display"; font-style:italic; font-weight:600; font-display:swap; src:url("/fonts/playfair-display-italic.woff2") format("woff2"); }

@property --beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --metal-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --press { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --zoom { syntax: "<number>"; inherits: false; initial-value: 1; }

:root { --ink:#171714; --green:#26382f; --cream:#ede9df; --paper:#f8f6f0; --gold:#b89152; --line:#d5cdbd; --muted:#6e6b62; --deepgold:#7a552c; }
* { box-sizing:border-box; }
html { scrollbar-color:#aa824c #f2eee5; scrollbar-width:thin; scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
::-webkit-scrollbar { width:12px; }
::-webkit-scrollbar-track { background:#f2eee5; border-left:1px solid #e3dccd; }
::-webkit-scrollbar-thumb { min-height:54px; border:3px solid #f2eee5; border-radius:999px; background:linear-gradient(180deg,#c6a36d,#876336); }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#d6b47d,#72512d); }
body { margin:0; min-width:320px; color:var(--ink); background:var(--cream); font-family:"DM Sans",Arial,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
a[href], button { -webkit-tap-highlight-color:transparent; }
.wrap { width:min(1120px,calc(100% - 40px)); margin:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.scroll-progress { position:fixed; z-index:100; top:0; right:0; left:0; height:3px; overflow:hidden; background:#1d211d15; pointer-events:none; }
.scroll-progress span { display:block; width:100%; height:100%; background:linear-gradient(90deg,#8e6838,#d9b978,#8e6838); box-shadow:0 0 12px #caa66c8c; transform:scaleX(0); transform-origin:left; will-change:transform; }
.floating-call { display:none; }
.back-to-top { position:fixed; z-index:89; right:24px; bottom:24px; display:grid; place-items:center; width:54px; height:54px; padding:2px; border:0; border-radius:50%; color:#f7ead4; background:conic-gradient(#d5af6b var(--back-progress,0deg),#1c211d20 0); box-shadow:0 10px 24px #15171324; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(12px) scale(.86); transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease; }
.back-to-top span { display:grid; place-items:center; width:100%; height:100%; border:1px solid #d8b676; border-radius:50%; background:#1c211d; font-size:20px; line-height:1; }
.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }

.availability-ribbon { position:relative; overflow:hidden; min-height:38px; color:#f8efdf; background:linear-gradient(104deg,#171d19,#2c3026 49%,#171d19); border-bottom:1px solid #b9945d66; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.availability-ribbon::before { position:absolute; inset:0; background:linear-gradient(105deg,transparent 31%,#e5c98e25 48%,transparent 65%); content:""; transform:translateX(-130%); animation:ribbon-shine 6.6s ease-in-out infinite; }
.availability-ribbon .wrap { position:relative; display:flex; align-items:center; justify-content:center; gap:13px; min-height:38px; text-align:center; }
.availability-dot { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:#d9b56e; box-shadow:0 0 0 0 #d9b56e85; animation:availability-pulse 2.8s ease-out infinite; }
.availability-divider { color:#d9b56e; opacity:.75; }
@keyframes ribbon-shine { 0%,36% { transform:translateX(-130%); } 60%,100% { transform:translateX(130%); } }
@keyframes availability-pulse { 0% { box-shadow:0 0 0 0 #d9b56e75; } 55%,100% { box-shadow:0 0 0 7px #d9b56e00; } }

header { padding:22px 0; background:var(--paper); border-bottom:1px solid #e8e2d5; }
nav { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { position:relative; display:flex; align-items:center; gap:12px; font-size:13px; font-weight:700; letter-spacing:.12em; }
.mark { position:relative; display:grid; place-items:center; width:37px; height:37px; overflow:hidden; color:var(--gold); background:var(--ink); border:1px solid #4c4b42; border-radius:50%; box-shadow:0 0 0 0 #b9945d00; font-family:"Playfair Display",serif; font-size:21px; isolation:isolate; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease; animation:mark-intro .85s cubic-bezier(.2,.8,.2,1) both,mark-glow 5s 1.1s ease-in-out infinite; }
.mark::after { position:absolute; inset:0; z-index:2; border-radius:50%; padding:1.5px; background:conic-gradient(from var(--metal-angle),#7a7670 0%,#e8d5a8 18%,#fff 30%,#c9a36a 46%,#4d4b46 64%,#f3d08a 82%,#7a7670 100%); content:""; pointer-events:none; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:metal-spin 5.2s linear infinite; }
.mark:before { position:absolute; z-index:-1; top:-50%; bottom:-50%; left:-38%; width:22%; background:linear-gradient(90deg,transparent,#f8ddb080,transparent); content:""; transform:skewX(-23deg) translateX(-450%); animation:mark-shine 5s 1.7s ease-in-out infinite; }
.mark.sparkle-unlocked { border-color:#f4d38f; box-shadow:0 0 0 7px #d9ad6530,0 0 28px #d9ad6570; }
.logo-sparkle { position:fixed; z-index:130; color:#f3d08a; font-size:16px; line-height:1; pointer-events:none; text-shadow:0 0 11px #f2c46ccc; animation:logo-sparkle .95s cubic-bezier(.18,.8,.27,1) forwards; }
.navlinks { display:flex; gap:30px; color:#5c5a51; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.navlinks a[aria-current=page] { color:var(--deepgold); }
.menu-toggle,.mobile-menu { display:none; }
.menu-toggle { width:44px; height:44px; padding:0; border:1px solid #cdbd9f; color:var(--ink); background:transparent; cursor:pointer; font-size:20px; }
.mobile-menu { border-top:1px solid var(--line); background:#fffdf8; }
.mobile-menu a { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 20px; border-bottom:1px solid var(--line); font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.mobile-menu a::after { color:#8c693a; content:"↗"; }
.mobile-menu.is-open { display:block; }
.phone { position:relative; display:inline-flex; align-items:center; min-height:44px; padding:11px 18px; overflow:hidden; border:1px solid var(--gold); border-radius:0; color:var(--ink); font-size:12px; font-weight:700; letter-spacing:.07em; }
.phone::after { position:absolute; inset:-20% auto -20% -35%; width:26%; background:linear-gradient(90deg,transparent,#f3d08a88,transparent); content:""; transform:skewX(-20deg) translateX(-350%); transition:transform .65s ease; pointer-events:none; }

.eyebrow { margin:0 0 18px; color:#7a552c; font-size:11px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; }
h1,h2 { font-family:"Playfair Display",Georgia,serif; font-weight:700; line-height:1.04; }
h1 { max-width:650px; margin:0; font-size:clamp(48px,6vw,78px); letter-spacing:-.055em; }
h2 { margin:0; font-size:clamp(34px,4vw,51px); letter-spacing:-.04em; }
.accent { color:#8e6838; font-style:italic; }
.buttons { display:flex; flex-wrap:wrap; gap:13px; }
.button { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 23px; overflow:hidden; border:0; border-radius:0; background:var(--ink); color:#fff; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; touch-action:manipulation; isolation:isolate; --press:1; transition:transform .5s cubic-bezier(.34,1.56,.64,1),--press .5s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,background-color .22s ease,border-color .22s ease; }
.button:not(.alt)::before { position:absolute; inset:0; z-index:1; padding:1px; background:conic-gradient(from var(--beam-angle),transparent 0 72%,#d8b575 82%,#fff8e4 88%,#c9a36a 94%,transparent 100%); content:""; pointer-events:none; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:gold-beam 2.8s linear infinite; }
.button::after { position:absolute; inset:-20% auto -20% -35%; width:26%; background:linear-gradient(90deg,transparent,#f3d08a88,transparent); content:""; transform:skewX(-20deg) translateX(-350%); transition:transform .65s ease; pointer-events:none; }
.button,.phone,.floating-call { --mx:0px; --my:0px; }
.button,.floating-call { --press:1; }
.button:not(.alt) { transform:translate3d(var(--mx),var(--my),0) scale(var(--press)); }
.button:not(.alt):active { --press:.9; transition:transform .08s ease-out,--press .08s ease-out,box-shadow .08s ease-out,background-color .22s ease,border-color .22s ease; }
.button.alt { background:transparent; color:var(--ink); border:1px solid var(--line); }

section { padding:92px 0; }
main section:not(.hero):not(.contact-hero) { content-visibility:auto; contain-intrinsic-size:auto 900px; }
main section:not(.hero):not(.contact-hero) h2 { position:relative; display:inline-block; }
main section:not(.hero):not(.contact-hero) h2::after { position:absolute; bottom:-15px; left:1px; width:54px; height:2px; background:var(--gold); content:""; transform:scaleX(0); transform-origin:left; transition:transform .75s cubic-bezier(.2,.8,.2,1); }
main section.is-visible h2::after { transform:scaleX(1); }

.hours-status { display:inline-flex; align-items:center; gap:7px; margin:0 0 8px; font-size:12px; font-weight:700; }
.hours-status::before { width:7px; height:7px; border-radius:50%; background:#bd9256; box-shadow:0 0 0 4px #bd925624; content:""; }
.hours-status.is-open::before { background:#a6c57a; box-shadow:0 0 0 4px #a6c57a24; }

footer { padding:27px 0; color:#a9a79d; background:#101310; font-size:12px; }
footer .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; }
footer p { margin:0; }
footer strong { color:#e5d2a6; }
footer a { color:#f8f1e0; text-decoration:underline; text-underline-offset:2px; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .72s ease,transform .72s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }

.filter-emoji-burst { position:fixed; z-index:200; inset:0; overflow:hidden; pointer-events:none; }
.filter-emoji { position:absolute; top:var(--start-y); left:var(--start-x); display:block; font-size:clamp(22px,3.4vw,46px); line-height:1; filter:drop-shadow(0 6px 9px #201a112b); opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(0deg); animation:filter-emoji-pop 1.18s cubic-bezier(.18,.74,.28,1) forwards; animation-delay:var(--delay); }
.logo-sparkle-shower .filter-emoji { color:#f3d08a; font-family:"Playfair Display",serif; text-shadow:0 0 15px #f2c46ccc; }
@keyframes filter-emoji-pop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(0deg); } 14% { opacity:1; } 72% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--travel-x)),calc(-50% + var(--travel-y))) scale(1.08) rotate(var(--spin)); } }
@keyframes mark-intro { from { opacity:0; transform:rotate(-30deg) scale(.55); } to { opacity:1; transform:rotate(0) scale(1); } }
@keyframes mark-glow { 0%,100% { box-shadow:0 0 0 0 #b9945d00; } 50% { box-shadow:0 0 0 6px #b9945d1a,0 0 20px #b9945d22; } }
@keyframes mark-shine { 0%,28% { transform:skewX(-23deg) translateX(-450%); } 45%,100% { transform:skewX(-23deg) translateX(700%); } }
@keyframes floating-call-pulse { 0%,100% { transform:translateY(0) scale(var(--press)); box-shadow:0 12px 26px #11150f4a,0 0 0 5px #c69b5a20; } 50% { transform:translateY(-3px) scale(var(--press)); box-shadow:0 16px 30px #11150f5e,0 0 0 8px #c69b5a12; } }
@keyframes gold-sheen { 0%,68% { transform:skewX(-20deg) translateX(-350%); } 88%,100% { transform:skewX(-20deg) translateX(650%); } }
@keyframes gold-beam { to { --beam-angle: 360deg; } }
@keyframes metal-spin { to { --metal-angle: 360deg; } }
@keyframes logo-sparkle { 0% { opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(-18deg); } 18% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(1.15) rotate(135deg); } }

@media (hover:hover) and (pointer:fine) {
  .button:not(.alt)::before { opacity:0; }
  .button:not(.alt):hover::before { opacity:1; }
  .button:hover { transform:translate3d(var(--mx),calc(-3px + var(--my)),0) scale(var(--press)); box-shadow:0 12px 22px #1617102e; }
  .button:hover::after,.phone:hover::after,.floating-call:hover::after { transform:skewX(-20deg) translateX(650%); }
  .button.alt:hover { background:#fffdf7; border-color:#b9945d; }
  .brand:hover .mark { border-color:#d7ad69; box-shadow:0 0 0 7px #b9945d1f,0 0 25px #b9945d30; transform:rotate(8deg) scale(1.1); animation-play-state:paused; }
  .brand:hover .mark:before { animation:mark-shine .85s ease forwards; }
  .phone { transition:transform .2s ease,box-shadow .2s ease; }
  .phone:hover { transform:translate3d(var(--mx),calc(-2px + var(--my)),0); box-shadow:0 8px 18px #17171417; }
  .navlinks a { position:relative; transition:color .2s ease; }
  .navlinks a::after { position:absolute; right:0; bottom:-7px; left:0; height:1px; background:var(--gold); content:""; transform:scaleX(0); transform-origin:right; transition:transform .22s ease; }
  .navlinks a:hover { color:#8c693a; }
  .navlinks a:hover::after, .navlinks a[aria-current=page]::after { transform:scaleX(1); transform-origin:left; }
  footer a { transition:color .2s ease,text-decoration-color .2s ease; }
  footer a:hover { color:#fff8ea; text-decoration-color:currentColor; }
}
@media (hover:none) {
  .brand:active .mark { transform:scale(.92); box-shadow:0 0 0 5px #b9945d22; }
}
@media (max-width:760px) {
  .back-to-top { right:auto; bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px)); left:18px; }
  .navlinks { display:none; }
  .menu-toggle { display:grid; place-items:center; }
  .phone { display:none; }
  .floating-call { position:fixed; z-index:90; right:18px; bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px)); display:inline-flex; align-items:center; gap:9px; min-height:50px; padding:0 18px; overflow:hidden; border:1px solid #e0bc7f; border-radius:999px; color:#fff; background:#1c211d; box-shadow:0 12px 26px #11150f4a,0 0 0 5px #c69b5a20; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; --press:1; transition:--press .5s cubic-bezier(.34,1.56,.64,1); animation:floating-call-pulse 3.4s ease-in-out infinite; }
  .floating-call:active { --press:.92; transition:--press .08s ease-out; }
  .floating-call::after { position:absolute; inset:-20% auto -20% -35%; width:26%; background:linear-gradient(90deg,transparent,#f3d08a88,transparent); content:""; transform:skewX(-20deg) translateX(-350%); pointer-events:none; animation:gold-sheen 4.8s ease-in-out infinite; }
  .floating-call i { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#1c211d; background:#d8b575; font-style:normal; font-size:12px; }
  footer { padding-bottom:max(118px, calc(env(safe-area-inset-bottom) + 92px)); }
  footer .wrap { display:block; }
  footer p { margin:0 0 10px; }
}
@media (max-width:520px) {
  .wrap { width:min(100% - 28px,1120px); }
  .availability-ribbon,.availability-ribbon .wrap { min-height:34px; }
  .availability-ribbon { font-size:10px; letter-spacing:.08em; }
  .availability-ribbon .wrap { gap:8px; }
  .availability-divider { display:none; }
  header { position:sticky; z-index:20; top:0; padding:12px 0; box-shadow:0 5px 16px #1717140a; }
  nav { gap:9px; }
  .brand { min-width:0; gap:8px; font-size:11px; letter-spacing:.065em; white-space:nowrap; }
  .mark { flex:0 0 auto; width:32px; height:32px; font-size:18px; }
  h1 { font-size:clamp(42px,13vw,57px); line-height:1.02; }
  section { padding:62px 0; }
  .buttons { display:grid; grid-template-columns:1fr; gap:10px; }
  .button { width:100%; min-height:54px; }
}

.faq details > .faq-answer:has(.faq-answer-inner) { display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows .28s cubic-bezier(.2,.8,.2,1); }
.faq details[open] > .faq-answer:has(.faq-answer-inner) { grid-template-rows:1fr; }
.faq-answer-inner { min-height:0; overflow:hidden; }

.service-card { --sx:50%; --sy:18%; --rx:0deg; --ry:0deg; --lift:0px; --zoom:1; isolation:isolate; }
.service-card > * { position:relative; z-index:1; }
.service-card::before { z-index:2; }
.service-card::after { position:absolute; inset:-1px; z-index:0; pointer-events:none; opacity:0; background:radial-gradient(240px circle at var(--sx) var(--sy),#f8e2b070 0%,#f3d08a30 38%,transparent 68%),linear-gradient(125deg,transparent 40%,#fffaf0a8 50%,transparent 60%); background-size:auto,220% 220%; background-position:0 0,var(--sx) var(--sy); content:""; transition:opacity .22s ease; }
@media (hover:hover) and (pointer:fine) {
  .service-card.reveal.is-visible,.service-card:not(.reveal) { transform:perspective(860px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)) scale(var(--zoom)); transition:--rx .1s ease-out,--ry .1s ease-out,--lift .45s cubic-bezier(.34,1.56,.64,1),--zoom .45s cubic-bezier(.34,1.56,.64,1),opacity .25s ease,filter .25s ease,border-color .2s ease; }
  .service-card:hover::after { opacity:1; }
  .service-grid:has(.service-card:hover) .service-card:not(:hover) { --zoom:.98; opacity:.68; filter:saturate(.88); }
  .service-card:hover { z-index:1; --lift:-6px; --zoom:1.015; border-color:#b9945d; }
}

.call-ripple { position:absolute; z-index:2; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#f3d08a73; pointer-events:none; animation:call-ripple .55s ease-out forwards; }
@keyframes call-ripple { from { transform:scale(.4); opacity:.9; } to { transform:scale(22); opacity:0; } }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
  main section:not(.hero) h2::after { transform:scaleX(1); }
  .filter-emoji-burst { display:none; }
  .faq details > .faq-answer { transition:none; }
  .service-card::after { display:none; }
  .service-card { --rx:0deg; --ry:0deg; --lift:0px; --zoom:1; }
  .call-ripple { display:none; }
  .button:not(.alt)::before,.mark::after { animation:none; }
  .button:not(.alt):active,.floating-call:active { --press:1; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

.project h2, .copy h2, .modal-copy h2, .lightbox-copy h2 { display:block; }
.project h2::after, .copy h2::after, .modal-copy h2::after, .lightbox-copy h2::after { display:none; content:none; }

body.modal-open .floating-call,
body.modal-open .back-to-top,
body.lightbox-open .floating-call,
body.lightbox-open .back-to-top { display:none !important; }
