:root { font-family: 'Be Vietnam Pro', sans-serif; color: #49352e; background: #fbf9f6; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; --cream: #f8f5f0; --ivory: #fbf9f6; --rose: #c69b85; --brown: #49352e; --muted: #857b73; --line: #ded7ce; --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0; min-width: 320px; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #9a694b; outline-offset: 3px; }
::selection { background: #e0c3b4; color: #372a24; }
.container { width: min(1250px, calc(100% - 112px)); margin-inline: auto; }
.container-wide { width: min(1460px, calc(100% - 112px)); margin-inline: auto; }
.section-pad { padding-block: 118px; }
.micro-label, .eyebrow, .top-note, .hero-kicker, .photo-label, .service-en, .service-num, .gallery-overlay small, .gallery-bottom>span, .marquee, .footer, .brand-caption, .hero-small-note, .hero-vertical, .contact-photo-text { letter-spacing: .17em; }
.reveal { transition: opacity 750ms ease, transform 750ms cubic-bezier(.2,.65,.2,1); }
.has-reveal .reveal:not(.in-view) { opacity: 0; transform: translateY(24px); }
.top-note { height: 31px; display:flex; justify-content:center; align-items:center; background: #49352e; color:#f7eee8; font-size:9px; font-weight:500; letter-spacing:.24em; gap: 12px; }
.top-note span { font-size: 11px; color: #d5bba8; }
.header { background: rgba(251,249,246,.97); position: sticky; top:0; z-index: 40; border-bottom: 1px solid rgba(73,53,46,.08); transition: box-shadow .3s, background .3s; }
.header.header-scrolled { box-shadow: 0 10px 30px rgba(49,35,28,.07); background: rgba(251,249,246,.97); backdrop-filter: blur(14px); }
.header-inner { height: 88px; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.brand { width: fit-content; display:inline-flex; flex-direction:column; align-items:center; color:var(--brown); flex-shrink:0; line-height:1; }
.brand-mark { font-family:var(--serif); font-size:43px; font-weight:500; letter-spacing:.09em; }
.brand-dot { font-size:25px; color:var(--rose); position:relative; top:-4px; margin-inline:1px; }
.brand-caption { font-size:7.5px; margin-top:0; letter-spacing:.39em; font-weight:600; }
.desktop-nav { display:flex; align-items:center; gap:32px; margin-left:auto; }
.desktop-nav a { font-size:11px; font-weight:500; white-space:nowrap; transition:color .25s; }
.desktop-nav a:hover { color:#b37f68; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:13px; font-size:11px; font-weight:600; letter-spacing:.035em; padding:14px 21px; border:1px solid transparent; background:transparent; transition:background .25s, color .25s, transform .25s, border-color .25s; white-space:nowrap; }
.button:hover { transform:translateY(-2px); }
.button-dark { background:var(--brown); color:#fff; }
.button-dark:hover { background:#6d4d40; }
.button-large { padding:19px 25px; font-size:11px; }
.button-outline { border:1px solid var(--brown); color:var(--brown); }
.button-outline:hover { background:var(--brown); color:white; }
.button-cream { background:#f8f5f0; color:#49352e; }
.button-cream:hover { background:#e9d9c8; }
.menu-toggle { display:none; padding:8px; background:transparent; border:0; color:var(--brown); }
.mobile-nav { display:none; }
.hero { min-height:690px; height:min(770px, calc(100svh - 119px)); display:grid; grid-template-columns:45% 55%; background:var(--cream); }
.hero-copy { display:flex; align-items:center; justify-content:flex-end; min-width:0; }
.hero-copy-inner { padding:40px clamp(28px, 6.2vw, 105px) 36px max(56px, calc((100vw - 1250px)/2)); width:100%; position:relative; }
.hero-kicker { display:flex; align-items:center; gap:13px; font-size:10px; font-weight:600; letter-spacing:.22em; color:#9b7665; margin-bottom:37px; }
.tiny-star { font-size:19px; font-weight:400; }
.hero h1, .section-title, .contact h2, .booking-intro h2 { font-family:var(--serif); font-weight:500; }
.hero h1 { font-size:clamp(77px, 7.6vw, 132px); line-height:.83; letter-spacing:-.045em; margin:0 0 36px; }
.hero h1 span, .hero h1 em { display:block; }
.hero h1 em { color:#bd9078; font-weight:400; margin-left:29px; letter-spacing:-.065em; }
.hero-copy p { color:#75685f; line-height:2.1; max-width:370px; font-size:12px; margin:0 0 30px; }
.hero-actions { display:flex; align-items:center; gap:32px; }
.text-link { display:inline-flex; gap:10px; align-items:center; font-size:11px; font-weight:600; border-bottom:1px solid currentColor; padding:7px 0 9px; transition: gap .2s,color .2s; }
.text-link:hover { gap:17px; color:#b37f68; }
.text-link-brown { color:var(--brown); }
.hero-small-note { font-size:9px; color:#92857b; margin-top:67px; letter-spacing:.09em; }
.hero-small-note span { color:#bc8d73; font-weight:700; }
.hero-image-area { position:relative; min-width:0; overflow:hidden; background:#d6c4b8; }
.image-shell { position:relative; overflow:hidden; background:linear-gradient(120deg,#e9d9d0,#a88877); }
.image-shell img { display:block; width:100%; height:100%; object-fit:cover; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
.image-fallback { width:100%; height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; color:#f8ede4; background:linear-gradient(135deg,#a67f70,#dbc5b7 53%,#80665c); }
.image-fallback span { font-family:var(--serif); font-size:70px; letter-spacing:.06em; }
.image-fallback small { font-size:10px; letter-spacing:.4em; }
.hero-image { height:100%; width:100%; }
.hero-image img { object-position:center 28%; filter:saturate(.79) sepia(.04); }
.hero-image-frame { position:absolute; pointer-events:none; inset:22px; border:1px solid rgba(255,255,255,.3); }
.photo-label { position:absolute; z-index:2; color:#fff; text-shadow:0 1px 5px #0007; font-size:9px; font-weight:600; padding:6px 8px; background:rgba(36,29,26,.4); backdrop-filter: blur(4px); letter-spacing:.07em; }
.hero-photo-label { top:39px; left:39px; }
.hero-vertical { position:absolute; right:28px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; font-size:9px; color:white; letter-spacing:.24em; text-shadow:0 1px 9px #0005; }
.hero-vertical span { margin-block:12px; }
.hero-scroll { position:absolute; z-index:2; bottom:44px; left:44px; background:#fbf9f6; color:var(--brown); width:56px; height:56px; display:grid; place-items:center; transition:background .2s; }
.hero-scroll:hover { background:#e8d6ca; }
.marquee { overflow:hidden; background:#e9ded5; color:#674b3d; height:54px; display:flex; align-items:center; font-family:var(--serif); font-size:18px; font-weight:600; font-style:italic; white-space:nowrap; letter-spacing:.13em; }
.marquee-track { display:flex; width:max-content; animation:marquee 48s linear infinite; }
.marquee span { margin-right:55px; }
.marquee b { margin-inline:40px; font-size:16px; font-style:normal; font-weight:400; color:#b78f79; }
@keyframes marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
.eyebrow { display:inline-flex; align-items:center; gap:13px; font-weight:600; font-size:9px; color:#a77e68; letter-spacing:.22em; white-space:normal; }
.eyebrow-line { display:inline-block; width:23px; height:1px; background:currentColor; flex-shrink:0; }
.eyebrow-light { color:#e5cbb9; }
.section-title { font-size:clamp(56px, 6vw, 92px); line-height:.94; letter-spacing:-.038em; margin:23px 0 26px; }
.section-title em { color:#bb8b75; font-weight:400; }
.period { color:#be947d; }
.about { background:#fffefa; }
.about-grid { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(60px, 9vw, 150px); align-items:center; }
.about-visual { height:670px; position:relative; max-width:540px; }
.about-visual-main { position:absolute; top:0; left:0; width:82%; height:82%; }
.about-visual-main .image-shell { width:100%; height:100%; }
.about-visual-accent { position:absolute; right:-2%; bottom:4%; width:48%; height:48%; border:10px solid #fffefa; box-shadow:0 16px 55px #30201420; }
.about-visual-accent .image-shell { width:100%; height:100%; }
.about-curve { position:absolute; bottom:5%; left:4%; z-index:3; font:italic 50px/.8 var(--serif); color:var(--brown); transform:rotate(-9deg); }
.about-curve em { color:#b17e64; font-size:68px; font-weight:400; }
.about-photo-label { left:12px; top:12px; }
.about-copy { max-width:480px; }
.about-copy .section-title { margin-bottom:18px; }
.decorative-quote { display:block; font:110px/.6 var(--serif); color:#c5a28d; margin:45px 0 10px; }
.about-copy h3 { font:italic 36px/1.07 var(--serif); font-weight:400; color:#583e33; margin:0 0 24px; max-width:365px; }
.about-copy p { font-size:12px; line-height:2.3; color:#796e65; margin-bottom:16px; }
.about-copy .text-link { margin-top:16px; }
.about-signature { font:italic 22px var(--serif); color:#a68270; margin-top:49px; }
.about-signature strong { font-size:35px; font-weight:500; margin-left:6px; }
.services { background:#f5f0ea; }
.section-heading { margin-bottom:55px; }
.heading-centered { text-align:center; }
.heading-centered .eyebrow { justify-content:center; }
.section-heading p { font-size:12px; line-height:1.9; color:#83776e; margin:0 auto; max-width:520px; }
.section-heading .data-note { color:#977e6b; font-size:10px; margin-top:10px; }
.service-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:19px; }
.service-card { background:#fffefa; border:1px solid #eee8e2; transition:transform .3s,box-shadow .3s; }
.service-card:hover { transform:translateY(-6px); box-shadow:0 16px 34px #30201910; }
.service-image { height:310px; position:relative; overflow:hidden; background:#e6d3c7; }
.service-image>.image-shell { height:100%; }
.service-card:hover .image-shell img { transform:scale(1.055); }
.service-num { position:absolute; left:17px; top:16px; z-index:2; border:1px solid #ffffff98; color:white; padding:9px; font-size:10px; letter-spacing:0; backdrop-filter:blur(3px); }
.service-photo-label { right:12px; bottom:12px; }
.service-content { padding:26px 22px 22px; }
.service-en { color:#bb937c; font:italic 15px var(--serif); letter-spacing:.06em; }
.service-content h3 { font:500 29px var(--serif); line-height:1; margin:10px 0 11px; }
.service-content p { font-size:11px; color:#8d7e73; line-height:1.9; min-height:63px; }
.service-bottom { margin-top:17px; padding-top:18px; border-top:1px solid #ece4dc; display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:600; }
.service-bottom button { background:#f0e5dd; width:37px; height:37px; display:grid; place-items:center; border:0; transition:background .2s, transform .2s; }
.service-bottom button:hover { background:#dbc1b2; transform:rotate(45deg); }
.portfolio { background:#fffefa; }
.portfolio-top { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:36px; }
.portfolio-top .section-title { margin-bottom:0; }
.portfolio-intro { width:315px; flex-shrink:0; padding-bottom:7px; }
.portfolio-intro p { font-size:11px; line-height:2.1; color:#82766e; margin-bottom:15px; }
.portfolio-intro .text-link { font-size:10px; }
.sample-notice { display:flex; gap:11px; align-items:center; background:#f5ebe4; color:#86604d; font-size:10px; padding:13px 16px; margin-bottom:33px; line-height:1.7; }
.sample-notice svg { flex-shrink:0; }
.sample-notice code { background:#e9d8ce; padding:1px 4px; }
.gallery-filter { display:flex; align-items:center; gap:36px; margin-bottom:32px; flex-wrap:wrap; }
.gallery-filter button { background:none; border:0; padding:8px 0 14px; font-size:11px; font-weight:500; color:#85766b; position:relative; }
.gallery-filter button::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--brown); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.gallery-filter button.active { color:var(--brown); }
.gallery-filter button.active::after, .gallery-filter button:hover::after { transform:scaleX(1); }
.gallery-filter button span { font-size:8px; vertical-align:super; margin-left:6px; color:#bb9881; }
.gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:160px; grid-auto-flow:dense; gap:15px; }
.gallery-item { position:relative; display:block; border:0; padding:0; background:#e4d0c5; min-width:0; overflow:hidden; text-align:left; }
.gallery-item>.image-shell { height:100%; width:100%; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-item-0 { grid-column: span 2; grid-row:span 3; }
.gallery-item-1, .gallery-item-2 { grid-row:span 2; }
.gallery-item-3 { grid-row:span 2; }
.gallery-item-4 { grid-row:span 2; }
.gallery-item-5 { grid-column: span 2; grid-row:span 2; }
.gallery-item-6,.gallery-item-7 { grid-row:span 2; }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(26,18,15,.7),transparent 52%); color:white; display:flex; align-items:flex-end; justify-content:space-between; padding:25px; opacity:.85; transition:background .3s; }
.gallery-overlay>span:first-child { display:flex; flex-direction:column; gap:5px; }
.gallery-overlay small { font-size:8px; opacity:.78; }
.gallery-overlay strong { font:italic 29px var(--serif); letter-spacing:0; }
.gallery-open { display:grid; place-items:center; border:1px solid #fff9; width:39px; height:39px; border-radius:50%; transition:background .2s; }
.gallery-item:hover .gallery-open { background:#fff; color:#49352e; }
.gallery-photo-label { top:9px; right:9px; font-size:8px; }
.gallery-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:39px; }
.gallery-bottom>span { color:#b49c8d; font-size:10px; }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(20,14,12,.96); display:flex; align-items:center; justify-content:center; color:white; padding:55px 95px; }
.lightbox-content { height:100%; max-width:min(840px,90vw); display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; }
.lightbox-content img { max-width:100%; max-height:calc(100% - 50px); object-fit:contain; }
.lightbox-content p { font:italic 26px var(--serif); text-align:center; margin:15px 0 0; }
.lightbox-content p span { font:10px 'Be Vietnam Pro',sans-serif; color:#c5b2a7; margin-left:10px; }
.lightbox-close,.lightbox-prev,.lightbox-next { position:absolute; background:transparent; color:white; border:1px solid #ffffff52; width:48px; height:48px; display:grid; place-items:center; }
.lightbox-close { right:30px; top:28px; }
.lightbox-prev { left:26px; top:50%; transform:translateY(-50%); }
.lightbox-next { right:26px; top:50%; transform:translateY(-50%); }
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover { background:#ffffff23; }
.philosophy { height:520px; position:relative; color:white; display:grid; place-items:center; overflow:hidden; }
.philosophy-image,.philosophy-image .image-shell,.philosophy-overlay { position:absolute; inset:0; width:100%; height:100%; }
.philosophy-image img { object-position:center 35%; filter:saturate(.65); }
.philosophy-overlay { background:linear-gradient(90deg,rgba(29,20,17,.72),rgba(45,31,27,.43)); }
.philosophy-image .photo-label { left:23px; bottom:22px; }
.philosophy-content { z-index:2; text-align:center; padding:25px; }
.philosophy-content>span { font-size:10px; letter-spacing:.24em; }
.philosophy-content h2 { font:500 clamp(62px,7.4vw,116px)/.86 var(--serif); margin:30px 0; letter-spacing:-.03em; }
.philosophy-content h2 em { font-weight:400; color:#e6c0a8; }
.philosophy-content p { font-size:12px; letter-spacing:.04em; }
.philosophy-star { font-size:31px; color:#e5c0a8; margin-top:28px; }
.process { background:#fbf8f3; }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:60px; }
.process-step { text-align:center; padding:16px 35px 30px; position:relative; }
.process-step+.process-step::before { content:''; position:absolute; left:-12px; top:40px; bottom:30px; width:1px; background:#e6d9cd; }
.process-num { font-size:10px; color:#af8974; letter-spacing:.3em; }
.process-flower { margin:18px auto 22px; display:grid; place-items:center; color:#a78571; border:1px solid #ccb5a5; border-radius:50%; width:92px; height:92px; font:49px var(--serif); }
.process-step h3 { font:500 34px var(--serif); margin:0 0 13px; }
.process-step p { color:#857970; font-size:11px; line-height:2; max-width:270px; margin:auto; }
.reviews { background:#f1e9e2; }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.reviews-grid blockquote { background:white; margin:0; padding:35px; }
.reviews-grid blockquote>span { font:90px/.6 var(--serif); color:#ba9883; }
.reviews-grid p { font:italic 24px/1.4 var(--serif); }
.reviews-grid footer { font-size:11px; color:#9c7f70; }
.faq { background:#fffefa; }
.faq-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:120px; }
.faq-heading p { font-size:12px; color:#85766e; line-height:2; max-width:290px; margin:12px 0 18px; }
.faq-heading .section-title { font-size:clamp(56px,5vw,78px); }
.faq-item { border-bottom:1px solid #e7ded6; }
.faq-item:first-child { border-top:1px solid #e7ded6; }
.faq-item button { display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left; background:transparent; border:0; padding:25px 3px; gap:16px; color:#4b3930; font-size:12px; font-weight:600; }
.faq-item button svg { flex-shrink:0; color:#bd9077; }
.faq-item p { font-size:11px; line-height:2.1; color:#82736a; padding:0 34px 25px 3px; margin:0; max-width:560px; }
.contact-grid { display:grid; grid-template-columns: 58% 42%; min-height:575px; }
.contact-left { display:flex; align-items:center; justify-content:center; background:#49352e; color:#fbf5ee; }
.contact-left-inner { width:min(570px, calc(100% - 96px)); padding:55px 0; }
.contact h2 { font-size:clamp(57px,5.6vw,95px); line-height:.91; letter-spacing:-.027em; margin:27px 0 25px; }
.contact h2 em { color:#e4bea7; font-weight:400; }
.contact-left p { font-size:12px; color:#ead5c7; line-height:2; max-width:390px; margin:0 0 30px; }
.contact-social { margin-top:48px; border-top:1px solid #ffffff3b; padding-top:24px; display:flex; align-items:center; flex-wrap:wrap; gap:18px 24px; }
.contact-social a,.contact-social span { display:inline-flex; align-items:center; gap:8px; font-size:11px; color:#e9d6c9; transition:color .2s; }
.contact-social a:hover { color:#fff; }
.contact-photo { overflow:hidden; position:relative; }
.contact-photo>.image-shell { width:100%; height:100%; position:absolute; inset:0; }
.contact-photo .image-shell img { filter:sepia(.08) saturate(.8); }
.contact-photo .photo-label { top:23px; right:22px; }
.contact-photo-text { position:absolute; bottom:47px; left:44px; color:white; font:500 62px/.8 var(--serif); text-shadow:0 1px 12px #0005; letter-spacing:-.03em; }
.contact-photo-text em { color:#f5d4ba; }
.footer { background:#30231f; color:#ecdfd5; }
.footer-top { display:flex; justify-content:space-between; align-items:center; padding:37px 0; border-bottom:1px solid #ffffff23; }
.brand-light { color:#f7eae0; }
.footer-top>span { font:italic 22px var(--serif); letter-spacing:.12em; color:#c6ac9d; }
.back-to-top { width:42px; height:42px; border:1px solid #ffffff7d; display:grid; place-items:center; transition:background .2s; }
.back-to-top:hover { background:#ffffff27; }
.footer-bottom { padding:22px 0; display:flex; gap:20px; align-items:center; justify-content:space-between; font-size:9px; letter-spacing:.05em; color:#c5b2a6; }
.footer-bottom a { display:flex; gap:4px; align-items:center; }
.footer-bottom a:hover { color:#fff; }
.floating-contact { position:fixed; z-index:39; bottom:25px; right:25px; }
.floating-contact button { display:flex; align-items:center; gap:9px; border:1px solid #f6e9df; box-shadow:0 10px 35px #2c1a1a30; border-radius:32px; background:#49352e; color:white; padding:14px 20px; font-size:12px; font-weight:600; transition:transform .2s,background .2s; }
.floating-contact button:hover { transform:translateY(-3px); background:#705143; }
.booking-backdrop { position:fixed; inset:0; background:#1c1411b8; z-index:120; display:flex; justify-content:center; align-items:center; overflow-y:auto; padding:20px; backdrop-filter:blur(6px); }
.booking-dialog { background:#fbf9f6; color:#49352e; width:min(680px,100%); max-height:min(93svh,1000px); overflow:auto; position:relative; padding:40px 46px 34px; box-shadow:0 20px 100px #0005; }
.booking-close { position:absolute; top:17px; right:17px; border:0; background:transparent; padding:8px; }
.booking-intro { text-align:center; }
.booking-intro .micro-label { font-size:9px; color:#bb8e76; }
.booking-intro h2 { font-size:57px; line-height:.9; letter-spacing:-.03em; margin:11px 0 15px; }
.booking-intro h2 em { color:#ba8e76; font-weight:400; }
.booking-intro p { font-size:10px; color:#8c8077; line-height:1.8; margin-bottom:27px; }
.booking-form { display:grid; gap:16px; }
.booking-form label { display:grid; gap:7px; font-size:10px; color:#675349; font-weight:600; }
.booking-form input,.booking-form select,.booking-form textarea { width:100%; border:1px solid #dfd4cb; padding:11px 12px; border-radius:0; background:#fff; color:#49352e; font-size:12px; outline-color:#b68a74; }
.booking-form textarea { resize:vertical; }
.booking-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.booking-form .message-preview-label { margin-top:3px; }
.booking-message { background:#f3e9e2!important; line-height:1.8; color:#765e53!important; }
.booking-actions { display:flex; gap:12px; flex-wrap:wrap; }
.booking-actions .button { flex:1; }
.booking-help { line-height:1.9; color:#927d6f; font-size:10px; margin:0; }
@media (min-width:1600px) { .hero-copy-inner { padding-left: max(70px,calc((100vw - 1350px) / 2)); } }
@media (max-width:1250px) { .container,.container-wide { width:calc(100% - 76px); } .desktop-nav { gap:20px; } .hero-copy-inner { padding-left:50px; padding-right:35px; } .hero h1 { font-size:clamp(72px,7.3vw,100px); } .about-grid { gap:65px; } .about-visual { height:570px; } .service-image { height:260px; } .gallery-grid { grid-auto-rows:138px; } .faq-grid { gap:70px; } }
@media (max-width:1000px) { .desktop-nav { display:none; } .header-book { margin-left:auto; } .menu-toggle { display:block; } .mobile-nav { position:fixed; z-index:38; top:119px; left:0; right:0; bottom:0; display:block; background:#f8f5f0; overflow:auto; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .25s, transform .25s,visibility .25s; } .mobile-nav.is-open { opacity:1; visibility:visible; transform:none; } .mobile-nav-inner { padding:44px max(35px,9vw); display:flex; flex-direction:column; align-items:stretch; } .mobile-nav-inner .micro-label { font-size:10px; margin-bottom:25px; color:#b7876d; } .mobile-nav-inner>a { display:flex; align-items:center; gap:20px; font:500 48px var(--serif); border-bottom:1px solid #dbcfc5; padding:12px 0; } .mobile-nav-inner>a span { font:10px 'Be Vietnam Pro',sans-serif; color:#bd947e; } .mobile-nav-inner>a svg { margin-left:auto; } .mobile-nav-inner button { margin-top:35px; } .mobile-nav-inner p { margin-top:20px; font:italic 23px var(--serif); color:#ba9681; text-align:center; } .hero { min-height:610px; height:calc(100svh - 119px); grid-template-columns:47% 53%; } .hero-copy-inner { padding-left:38px; padding-right:20px; } .hero h1 { font-size:clamp(63px,8.5vw,92px); } .hero-actions { flex-wrap:wrap; gap:16px; } .hero-small-note { margin-top:40px; } .service-grid { grid-template-columns:repeat(2,1fr); } .service-image { height:300px; } .about-visual { height:500px; } .about-grid { gap:45px; } .about-copy h3 { font-size:30px; } .gallery-grid { grid-auto-rows:117px; } .faq-grid { grid-template-columns:.9fr 1.1fr; gap:40px; } }
@media (max-width:700px) { html { scroll-padding-top:75px; } .container,.container-wide { width:calc(100% - 42px); } .section-pad { padding-block:75px; } .top-note { height:25px; font-size:7px; letter-spacing:.11em; } .header-inner { height:68px; } .header-book { display:none; } .header .brand-mark { font-size:37px; } .header .brand-caption { font-size:6px; } .mobile-nav { top:93px; } .mobile-nav-inner { padding:30px 27px; } .mobile-nav-inner>a { font-size:43px; } .hero { min-height:0; height:auto; display:flex; flex-direction:column-reverse; } .hero-image-area { height:clamp(340px,88vw,510px); } .hero-image-frame { inset:14px; } .hero-photo-label { top:22px; left:22px; } .hero-vertical { font-size:7px; right:18px; } .hero-scroll { width:42px; height:42px; bottom:26px; left:26px; } .hero-copy-inner { padding:51px 27px 45px; } .hero-kicker { font-size:8px; margin-bottom:22px; } .hero h1 { font-size:clamp(79px,18vw,128px); margin:0 0 22px; } .hero h1 em { margin-left:25px; } .hero-copy p { font-size:11px; margin-bottom:24px; } .hero-actions { gap:22px; } .hero-actions .button { padding:16px 17px; } .hero-small-note { margin-top:37px; } .marquee { height:44px; font-size:15px; } .marquee span { margin-right:29px; } .marquee b { margin-inline:20px; } .about-grid { grid-template-columns:1fr; gap:50px; } .about-visual { height:510px; width:min(95%,500px); } .about-copy { padding:0 5px; } .about-copy .section-title { margin-top:16px; } .section-title { font-size:clamp(54px,12vw,82px); line-height:.95; } .about-copy h3 { font-size:34px; } .decorative-quote { margin-top:35px; } .about-signature { margin-top:28px; } .section-heading { margin-bottom:34px; } .section-heading p { font-size:11px; } .service-grid { grid-template-columns:repeat(2,1fr); gap:11px; } .service-image { height:clamp(185px,44vw,265px); } .service-num { top:9px; left:9px; padding:6px; } .service-photo-label { bottom:7px; right:7px; font-size:7px; } .service-content { padding:19px 13px 15px; } .service-content h3 { font-size:24px; } .service-content p { font-size:10px; line-height:1.8; min-height:76px; } .service-bottom { font-size:9px; } .service-bottom button { width:32px; height:32px; } .portfolio-top { display:block; margin-bottom:20px; } .portfolio-intro { padding-top:4px; width:auto; } .portfolio-top .section-title { margin-bottom:18px; } .sample-notice { font-size:9px; } .gallery-filter { gap:18px; margin-bottom:22px; } .gallery-filter button { font-size:10px; } .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(90px,25vw,155px); gap:9px; } .gallery-item-0 { grid-column:span 2; grid-row:span 3; } .gallery-item-1,.gallery-item-2,.gallery-item-3,.gallery-item-4,.gallery-item-5,.gallery-item-6,.gallery-item-7 { grid-column:span 1; grid-row:span 2; } .gallery-overlay { padding:12px; } .gallery-overlay small { font-size:7px; } .gallery-overlay strong { font-size:23px; } .gallery-open { width:30px; height:30px; } .gallery-photo-label { font-size:7px; } .gallery-bottom { align-items:flex-start; gap:18px; flex-direction:column; margin-top:25px; } .gallery-bottom .button { width:100%; } .lightbox { padding:70px 56px; } .lightbox-prev { left:7px; } .lightbox-next { right:7px; } .lightbox-close { top:14px; right:13px; } .lightbox-content p { font-size:20px; } .lightbox-content p span { display:block; margin:5px 0 0; } .philosophy { height:410px; } .philosophy-content h2 { font-size:clamp(59px,11vw,83px); } .process-grid { grid-template-columns:1fr; gap:10px; margin-top:30px; } .process-step { padding:20px 18px 27px; } .process-step+.process-step::before { top:0; left:calc(50% - 29px); right:calc(50% - 29px); bottom:auto; width:58px; height:1px; } .process-flower { margin:12px auto; width:78px; height:78px; font-size:43px; } .process-step h3 { font-size:32px; } .reviews-grid { grid-template-columns:1fr; } .faq-grid { grid-template-columns:1fr; gap:25px; } .faq-heading .section-title { margin-bottom:14px; } .faq-item button { font-size:11px; padding:21px 2px; } .contact-grid { grid-template-columns:1fr; } .contact-left-inner { width:calc(100% - 54px); padding:75px 0 62px; } .contact h2 { font-size:clamp(65px,12vw,90px); } .contact-photo { height:410px; } .contact-photo-text { font-size:55px; left:22px; bottom:30px; } .footer-top { padding:28px 0; } .footer-top>span { font-size:14px; text-align:center; } .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; padding:25px 0 95px; } .floating-contact { bottom:16px; right:16px; } .floating-contact button { padding:12px 16px; font-size:11px; } .booking-backdrop { padding:8px; align-items:center; } .booking-dialog { padding:35px 20px 25px; max-height:96svh; } .booking-intro h2 { font-size:45px; } .booking-row { grid-template-columns:1fr; } .booking-actions { flex-direction:column; } .booking-actions .button { width:100%; } }
@media (max-width:380px) { .hero h1 { font-size:72px; } .service-content h3 { font-size:21px; } .service-content p { min-height:90px; } .gallery-filter { gap:13px; } .contact h2 { font-size:59px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } .has-reveal .reveal { opacity:1!important; transform:none!important; } }

.gallery-filter button sup { font-size:8px; margin-left:6px; color:#bb9881; }
.image-shell .image-fallback-behind {position:absolute;inset:0;z-index:0;}
.image-shell>img {position:relative;z-index:1;}