@font-face { font-family:Kerolly; src:url('/t/kerolly/assets/cormorant.woff2') format('woff2'); font-weight:400 700; font-display:swap }
@font-face { font-family:Kerolly; src:url('/t/kerolly/assets/cormorant-italic.woff2') format('woff2'); font-weight:400 700; font-style:italic; font-display:swap }
@font-face { font-family:Manrope; src:url('/t/kerolly/assets/manrope.woff2') format('woff2'); font-weight:200 800; font-display:swap }
:root { --paper:#fcfaf6; --surface:#fffdf9; --forest:#214942; --ink:#233e38; --muted:#52635c; --line:#d9d4c8; --champagne:#e8dfce; --radius:4px; --gutter:clamp(24px,4.2vw,110px); --header:74px; --ease:cubic-bezier(.16,1,.3,1); font-family:Manrope,Arial,sans-serif; color:var(--ink); background:var(--paper); color-scheme:light; line-height:1.7; font-synthesis:none; scrollbar-color:#8eaaa0 var(--paper) }
* { box-sizing:border-box }
html { scroll-padding-top:calc(var(--header) + 18px) }
body { margin:0; background:var(--paper) }
body.modal-open { overflow:hidden }
[hidden] { display:none !important }
img { display:block; max-width:100%; width:100%; height:auto }
figure,p,h1,h2,h3 { margin:0 }
button,input,textarea { font:inherit; color:inherit }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation }
button { cursor:pointer }
a { color:inherit; text-underline-offset:6px }
a,button,input,textarea,summary { scroll-margin-block:calc(var(--header) + 18px) 90px }
:focus-visible { outline:3px solid var(--forest); outline-offset:5px }
::selection { background:var(--forest); color:var(--paper) }
input,textarea { caret-color:var(--forest) }
svg { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.symbols { position:absolute; width:0; height:0; overflow:hidden }
.shell,.container { width:100%; padding-inline:var(--gutter); margin-inline:auto }
.section-space { padding-block:clamp(78px,7vw,130px) }
.skip { position:fixed; z-index:60; left:18px; top:-100px; padding:12px 20px; background:var(--surface); color:var(--forest) }
.skip:focus { top:12px }
h1,h2,h3 { font-family:Kerolly,Georgia,serif; font-weight:500; letter-spacing:-.025em; line-height:1.13; text-wrap:balance }
h2 { font-size:clamp(44px,4.3vw,68px) }
h3 { font-size:32px }
.header { height:var(--header); position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line) }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:25px }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; flex:none }
.brand img { width:41px; height:41px; object-fit:contain; mix-blend-mode:multiply }
.brand>span { font:500 29px/1.1 Kerolly,Georgia,serif; letter-spacing:-.02em }
.brand small { display:block; font:500 9px/2.4 Manrope,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase }
.navigation { display:flex; align-items:center; gap:24px; margin-left:auto }
.navigation>a { display:flex; align-items:center; min-height:44px; gap:9px; text-decoration:none; font-size:13px; white-space:nowrap }
.navigation>a:hover,.navigation>a[aria-current] { text-decoration:underline; text-decoration-thickness:1px }
.header .nav-instagram { margin-left:7px }
.header .nav-book { background:var(--forest); color:var(--surface); border-radius:var(--radius); min-height:46px; padding:10px 20px; gap:19px; font-weight:650; text-decoration:none }
.header .nav-book:hover { background:#305e54; text-decoration:none }
.menu-button { display:none; align-items:center; gap:12px; background:none; border:0; min-height:46px; padding:8px; font-size:14px }
.menu-button svg { width:26px; height:26px }
.button { display:inline-flex; align-items:center; justify-content:center; gap:23px; background:var(--forest); color:var(--surface); border:1px solid var(--forest); border-radius:var(--radius); min-height:54px; padding:14px 25px; font-size:15px; font-weight:650; text-decoration:none; line-height:1.45; white-space:nowrap }
.button:hover { background:#305e54; border-color:#305e54 }
.text-link,.text-button { display:inline-flex; align-items:center; gap:18px; min-height:44px; padding:8px 0; border:0; border-bottom:1px solid #8ba49b; background:none; text-decoration:none; font-size:14px; line-height:1.5 }
.text-link:hover,.text-button:hover { color:#356d5e; border-color:var(--forest) }
.hero { position:relative; isolation:isolate; overflow:hidden; min-height:clamp(570px,44vw,780px); display:flex; align-items:center }
.hero-scene { position:absolute; inset:0; z-index:-1 }
.hero-scene img { width:100%; height:100%; object-fit:cover; object-position:center 62% }
.hero-content { padding-block:70px; position:relative }
.hero h1 { max-width:13.5em; font-size:clamp(58px,5.25vw,88px); line-height:1.14; letter-spacing:-.03em; color:#193d37 }
.hero-description { max-width:45ch; font-size:17px; line-height:1.75; margin-top:23px }
.hero-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:30px }
.hero-discover { display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:14px 22px; min-height:54px; border:1px solid #768e84; border-radius:var(--radius); text-decoration:none; font-size:15px; font-weight:500; background:#fcfaf640 }
.hero-discover:hover { background:#fcfaf6c0 }
.hero-location { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:15px; margin-top:29px; min-height:44px }
.hero-location svg { width:20px }
.care-section { padding-block:clamp(75px,7vw,125px); background:var(--paper) }
.care-heading { max-width:1000px; margin-bottom:33px }
.care-heading>p { font-size:17px; line-height:1.7; max-width:60ch; margin-top:18px }
.care-tabs { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); margin-bottom:36px; overflow-x:auto; scrollbar-width:thin }
.care-tabs button { flex:none; min-height:56px; border:0; border-bottom:3px solid transparent; background:none; padding:14px 6px; font-size:16px; font-weight:450; white-space:nowrap; border-radius:0 }
.care-tabs button[aria-selected=true] { color:var(--forest); font-weight:750; border-bottom-color:var(--forest) }
.care-tabs button:hover { color:#356d5e }
.care-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(36px,5vw,90px) }
.care-figure { scroll-margin-top:calc(var(--header) + 12px) }
.care-figure>a { display:block; border-radius:var(--radius); overflow:hidden; background:#f0ece3; cursor:zoom-in }
.care-photo { aspect-ratio:1; object-fit:contain; width:100%; height:auto; max-height:680px }
.care-content h3 { font-size:clamp(38px,3.5vw,56px) }
.care-content>p { font-size:17px; line-height:1.75; margin-top:17px; max-width:57ch }
.care-services { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin:26px 0 31px; padding:22px 0 0; border-top:1px solid var(--line) }
.care-services li { display:flex; gap:11px; align-items:center; font-size:15px }
.care-services svg { width:18px; height:18px }
.care-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px }
.care-save { display:inline-flex; min-height:48px; align-items:center; gap:10px; font-size:14px; padding:8px 0; border-bottom:0; white-space:nowrap }
.care-save[aria-pressed=true] { font-weight:700 }
.care-save svg { width:19px }
.status { font-size:14px; line-height:1.7; color:var(--muted); margin-top:13px; max-width:65ch }
.status:empty { margin:0 }
.portfolio-section { padding-block:clamp(75px,7vw,125px); border-top:1px solid var(--line) }
.portfolio-heading { text-align:center }
.portfolio-heading>div>p { font-size:17px; max-width:65ch; margin:18px auto 0; line-height:1.75 }
.portfolio-heading .text-link { margin-top:15px }
.portfolio-controls { display:flex; justify-content:center; align-items:center; position:relative; gap:30px; margin:30px 0 38px }
.filters { display:flex; align-items:center; gap:26px }
.filters button { background:none; border:0; border-bottom:2px solid transparent; min-height:46px; padding:10px 5px; font-size:15px; border-radius:0 }
.filters button[aria-pressed=true] { border-bottom-color:var(--forest); font-weight:750 }
#result-count { font-size:13px; color:var(--muted) }
.gallery-navigation { display:none; align-items:center; gap:12px }
.gallery-navigation button,.reel-navigation button { display:grid; place-items:center; background:transparent; border:1px solid #9caf9f; width:44px; height:44px; border-radius:var(--radius) }
.gallery-navigation button:first-child svg,.reel-navigation button:first-child svg { transform:rotate(180deg) }
.gallery-navigation button:hover,.reel-navigation button:hover { background:#eee8db }
.work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px 28px; align-items:start }
.work-photo { min-width:0; margin:0 }
.work-photo>a { display:block; background:#eeeae0; border-radius:var(--radius); overflow:hidden; cursor:zoom-in }
.work-photo>a img { height:auto; width:100%; aspect-ratio:4/5; object-fit:contain }
.work-photo figcaption { display:flex; gap:18px; justify-content:space-between; align-items:flex-start; padding-top:17px }
.work-photo figcaption>div { min-width:0 }
.work-photo h3 { font-size:clamp(24px,2vw,32px); line-height:1.2 }
.photo-category { display:block; color:var(--muted); font-size:12px; margin-top:6px }
.save-reference { display:grid; place-items:center; flex:none; width:44px; height:44px; border:0; border-radius:var(--radius); background:transparent; color:var(--forest) }
.save-reference:hover { background:#eee8db }
.save-reference[aria-pressed=true] { background:var(--forest); color:var(--surface) }
.save-reference svg { width:21px; height:21px }
.portfolio-bottom { display:flex; justify-content:center; align-items:center; gap:24px; margin-top:36px }
.portfolio-bottom .text-button { border:1px solid #8ba49b; border-radius:var(--radius); padding:12px 23px; font-size:15px; min-height:50px }
.portfolio-bottom>p { color:var(--muted); font-size:14px }
.films-section { background:var(--paper); padding-block:clamp(75px,7vw,125px); border-top:1px solid var(--line) }
.films-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:25px; margin-bottom:35px }
.films-heading>div>p { font-size:17px; max-width:54ch; margin-top:17px; line-height:1.75 }
.reel-navigation { display:none; align-items:center; gap:14px; font-size:14px }
#film-position { font-size:14px; min-width:52px; text-align:center }
.reel-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 56px)/3); gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:15px; overscroll-behavior-inline:contain }
.reel { min-width:0; scroll-snap-align:start }
.reel>a { display:block; text-decoration:none }
.reel-image { position:relative; aspect-ratio:9/16; max-height:600px; border-radius:var(--radius); overflow:hidden; background:#e9e3d7 }
.reel-image img { width:100%; height:100%; object-fit:contain }
.reel-play { display:grid; place-items:center; position:absolute; bottom:23px; left:50%; transform:translateX(-50%); width:62px; height:62px; border:2px solid white; border-radius:50%; background:#193d3770; color:white }
.reel-play svg { width:25px; height:25px }
.reel-duration { display:none }
.reel-caption { display:flex; align-items:center; justify-content:space-between; padding-top:19px; gap:15px }
.reel h3 { font-size:31px }
.reel-caption>svg { width:20px }
.reel p { color:var(--muted); font-size:14px; margin-top:9px }
.film-note { text-align:center; font-size:14px; color:var(--muted); margin:26px auto 0; max-width:68ch }
.about-section { display:grid; grid-template-columns:1fr 1.1fr .9fr; align-items:center; gap:clamp(30px,3.8vw,70px); border-top:1px solid var(--line) }
.about-copy { grid-column:2; grid-row:1 }
.about-copy h2 { font-size:clamp(42px,3.8vw,60px) }
.about-copy>p { font-size:16px; line-height:1.8; margin-top:22px; max-width:48ch }
.about-copy .text-link { margin-top:22px; font-size:15px }
.founder-photo { grid-column:1; grid-row:1 }
.about-team { grid-column:3; grid-row:1 }
.founder-photo>a,.about-team>a { display:block; border-radius:var(--radius); overflow:hidden; background:#eee9df; cursor:zoom-in }
.founder-photo img,.about-team img { width:100%; height:auto; object-fit:contain }
.founder-photo figcaption,.about-team figcaption { font:500 27px/1.2 Kerolly,Georgia,serif; padding-top:17px }
.founder-photo figcaption>span,.about-team figcaption>span { display:block; font:400 12px/1.7 Manrope,Arial,sans-serif; color:var(--muted); margin-top:6px }
.selection-section { background:#f1ece2; padding-block:clamp(75px,7vw,125px) }
.selection-layout { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:clamp(38px,6vw,100px) }
.selection-intro>p { font-size:17px; line-height:1.8; margin-top:25px; max-width:44ch }
.selection-content { background:var(--paper); border-radius:var(--radius); padding:clamp(24px,3vw,46px) }
.selection-top { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:23px; border-bottom:1px solid var(--line); font-size:14px }
#selection-total { color:var(--muted); white-space:nowrap }
.selection-lists { display:grid; grid-template-columns:1fr; gap:27px; margin-block:26px }
.selection-lists h3 { display:flex; gap:15px; align-items:center; justify-content:space-between; font-size:28px; margin-bottom:15px }
.selection-lists h3>span { font:400 13px/1.6 Manrope,Arial,sans-serif; color:var(--muted) }
.selection-lists ul { list-style:none; padding:0; margin:0 }
.selection-lists li { display:flex; align-items:center; gap:13px; padding-block:10px; font-size:15px }
.selection-lists li>img { width:56px; height:56px; flex:none; object-fit:contain; border-radius:var(--radius); background:#e8e2d6 }
.selection-lists li>span { flex:1; min-width:0 }
.selection-lists li>button { flex:none; display:grid; place-items:center; min-width:44px; min-height:44px; background:none; border:0; border-radius:var(--radius) }
.selection-lists li>button:hover { background:#eee8db }
.selection-lists li.empty { font-size:14px; color:var(--muted); padding:0 0 8px }
.selection-add { display:inline-flex; align-items:center; gap:12px; min-height:44px; text-decoration:none; font-size:14px }
.selection-add svg { width:17px }
.selection-content details { padding-block:16px; border-top:1px solid var(--line) }
.selection-content summary { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:15px; min-height:44px; cursor:pointer }
summary::-webkit-details-marker { display:none }
details[open]>summary>svg { transform:rotate(45deg) }
.period-options { border:0; padding:22px 0; margin:0; display:flex; flex-wrap:wrap; gap:10px 20px; font-size:14px }
.period-options legend { margin-bottom:13px }
.period-options label { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer }
.period-options input { accent-color:var(--forest); width:18px; height:18px; margin:0 }
.personal-note { display:block; font-size:15px }
.personal-note textarea { display:block; width:100%; padding:14px; font-size:16px; line-height:1.65; margin-top:13px; border:1px solid #8fa397; border-radius:var(--radius); background:var(--surface); resize:vertical }
.personal-note textarea::placeholder { color:var(--muted) }
.personal-note small { display:block; font-size:12px; color:var(--muted); margin-top:8px }
#message-preview { white-space:pre-wrap; font-size:14px; line-height:1.75; max-width:65ch; margin-top:17px; overflow-wrap:anywhere }
.selection-content>.button { width:100%; margin-top:19px }
.selection-content>.send-note { font-size:14px; line-height:1.75; color:var(--muted); margin-top:20px; max-width:65ch }
.instagram-section { display:flex; justify-content:space-between; align-items:center; gap:50px; padding-block:62px; border-bottom:1px solid var(--line) }
.instagram-section h2 { font-size:41px }
.instagram-section p { margin-top:14px; font-size:16px; color:var(--muted) }
.instagram-section>a { display:flex; align-items:center; gap:18px; text-decoration:none; min-height:60px }
.instagram-section>a>svg:first-child { width:33px; height:33px }
.instagram-section>a>span { font-size:32px; line-height:1.3; font-weight:550 }
.instagram-section small { display:block; font-size:14px; font-weight:400; color:var(--muted); margin-top:9px }
.visit-section { padding-block:clamp(75px,7vw,125px) }
.visit-layout { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:clamp(42px,6vw,100px) }
.visit-copy h2 { max-width:8ch }
.visit-copy address { font-style:normal; display:block; margin-top:27px }
.visit-copy address strong { display:block; font-size:20px; font-weight:600 }
.visit-copy address>span { display:block; font-size:16px; color:var(--muted); margin-top:8px }
.visit-hours { display:grid; gap:7px; margin-top:26px; font-size:16px }
.visit-hours strong { font-weight:550 }
.visit-hours small { font-size:14px; color:var(--muted) }
.visit-copy>.button { margin-top:30px }
.visit-links { display:flex; align-items:center; flex-wrap:wrap; gap:18px 26px; margin-top:19px }
.visit-links a,.visit-links button { display:flex; align-items:center; gap:12px; min-height:44px; border:0; background:none; padding:7px 0; font-size:14px; text-decoration:underline; text-underline-offset:6px }
.visit-phone { font-size:16px; margin-top:15px }
.visit-view { min-width:0 }
#facade-view>a { display:block; border-radius:var(--radius); overflow:hidden; cursor:zoom-in }
#facade-view img { width:100%; height:auto; object-fit:contain }
#facade-view figcaption { font-size:13px; color:var(--muted); margin-top:12px }
.visit-switch { display:flex; justify-content:center; align-items:center; gap:20px; margin-top:20px; border-top:1px solid var(--line); padding-top:8px }
.visit-switch button { display:flex; align-items:center; gap:9px; background:none; border:0; border-bottom:2px solid transparent; min-height:48px; padding:10px 3px; font-size:14px }
.visit-switch button[aria-pressed=true] { border-bottom-color:var(--forest); font-weight:700 }
#map-view iframe { width:100%; height:430px; border:0; border-radius:var(--radius) }
#map-view p { font-size:14px; margin-top:12px }
.faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(42px,6vw,100px); padding-block:35px 95px }
.faq-section h2 { font-size:45px }
.faq-section>div>p { font-size:16px; color:var(--muted); margin-top:14px }
.faq-list details { border-bottom:1px solid var(--line) }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; padding-block:13px; font-size:17px; cursor:pointer }
.faq-list p { font-size:16px; line-height:1.8; max-width:65ch; margin:8px 0 22px }
.footer { background:var(--paper); border-top:1px solid var(--line) }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block:35px }
.footer-links { display:flex; align-items:center; gap:25px; flex-wrap:wrap }
.footer-links a { display:flex; align-items:center; gap:8px; min-height:44px; font-size:14px; text-decoration:none }
.footer-bottom { display:flex; gap:18px 26px; flex-wrap:wrap; align-items:center; padding-block:20px 86px; color:var(--muted); font-size:13px; border-top:1px solid var(--line) }
.footer-bottom .atmosphere-note { width:100%; font-size:12px; margin-top:8px }
.whatsapp { position:fixed; z-index:25; right:calc(22px + env(safe-area-inset-right)); bottom:calc(22px + env(safe-area-inset-bottom)); display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:#197548; color:white; border:2px solid var(--paper); box-shadow:0 6px 18px #00000026 }
.whatsapp svg { width:31px; height:31px }
.whatsapp:hover { background:#115b36 }
.selection-dock { display:flex; align-items:center; justify-content:space-between; gap:20px; position:fixed; z-index:24; left:calc(20px + env(safe-area-inset-left)); bottom:calc(24px + env(safe-area-inset-bottom)); background:var(--forest); color:var(--surface); padding:12px 19px; min-height:50px; border-radius:var(--radius); text-decoration:none; font-size:14px }
.selection-dock>span { display:inline-flex; align-items:center; gap:11px }
#dock-count { min-width:22px; text-align:center; font-weight:650; font-variant-numeric:tabular-nums }
dialog { padding:0; border:0; border-radius:var(--radius); color:var(--ink); background:var(--surface); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); box-shadow:0 16px 70px #00000036; overscroll-behavior:contain }
dialog::backdrop { background:#193d37c9 }
.album-dialog { width:min(1040px,94vw) }
.cinema-dialog { width:min(560px,94vw) }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 23px; border-bottom:1px solid var(--line) }
.dialog-heading h2 { font:650 16px/1.5 Manrope,Arial,sans-serif; letter-spacing:0 }
.dialog-heading button,.album-controls button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #9caf9f; background:none; border-radius:var(--radius) }
.album-stage { display:grid; place-items:center; padding:16px; min-height:120px }
.album-stage img { width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 195px); object-fit:contain }
.album-controls { display:flex; align-items:center; justify-content:center; gap:22px; padding:0 20px 20px; font-size:14px }
.album-controls button:first-child svg { transform:rotate(180deg) }
.cinema-dialog video { display:block; width:100%; max-height:calc(100dvh - 135px); background:#193d37; object-fit:contain }
.cinema-dialog>p { font-size:13px; margin:13px 20px 19px; color:var(--muted) }
#album-error,#video-error { padding:28px; font-size:16px; line-height:1.7 }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
@media(min-width:1900px) {
 .hero h1 { font-size:88px }
 .hero-description { font-size:20px }
 .hero-actions .button,.hero-discover { font-size:17px; min-height:58px }
 .hero-location { font-size:17px }
 .hero { min-height:780px }
 .care-content>p { font-size:19px }
 .care-services li { font-size:17px }
 .about-copy>p { font-size:18px }
}
@media(max-width:1000px) {
 :root { --header:70px; --gutter:30px }
 .menu-button { display:flex }
 .header-inner { gap:15px }
 .navigation { display:none; position:absolute; left:0; right:0; top:var(--header); padding:20px var(--gutter) 25px; background:var(--paper); border-bottom:1px solid var(--line); grid-template-columns:1fr 1fr; gap:12px 24px; margin:0 }
 .navigation.is-open { display:grid }
 .navigation>a { min-height:48px; font-size:15px }
 .header .nav-instagram { margin:0 }
 .header .nav-book { justify-content:center; font-size:14px }
 .hero { min-height:565px }
 .hero h1 { font-size:clamp(48px,6.5vw,65px); max-width:13.5em }
 .hero-description { font-size:16px; max-width:35ch }
 .hero-scene img { object-position:55% center }
 .care-layout { gap:30px; grid-template-columns:1fr 1fr }
 .care-content>p { font-size:16px }
 .care-services { grid-template-columns:1fr; gap:10px }
 .care-tabs button { font-size:15px; padding-inline:10px }
 .care-actions { gap:13px }
 .care-actions .button { padding-inline:19px; font-size:14px }
 .care-save { font-size:13px }
 .about-section { grid-template-columns:1fr 1.2fr; gap:32px }
 .founder-photo { grid-column:1; grid-row:1 }
 .about-copy { grid-column:2; grid-row:1 }
 .about-team { grid-column:1; grid-row:2; width:85%; justify-self:start }
 .selection-layout { grid-template-columns:.8fr 1.2fr; gap:30px }
 .selection-intro h2 { font-size:48px }
 .selection-intro>p { font-size:16px }
 .selection-content { padding:26px }
 .instagram-section { gap:30px }
 .instagram-section h2 { font-size:34px }
 .instagram-section>a>span { font-size:25px }
 .reel-navigation { display:flex }
 .reel-track { grid-auto-columns:calc((100% - 25px)/2); gap:25px }
 .visit-layout,.faq-section { gap:35px; grid-template-columns:1fr 1.2fr }
 .visit-copy h2 { font-size:48px }
 .visit-copy address strong { font-size:18px }
 .visit-copy>.button { font-size:14px; padding-inline:20px }
 .visit-switch { gap:17px }
 .visit-switch button { font-size:13px }
 .footer-links { gap:15px }
}
@media(max-width:700px) {
 :root { --header:66px; --gutter:23px }
 .brand { gap:9px }
 .brand img { width:34px; height:34px }
 .brand>span { font-size:25px }
 .brand small { font-size:8px; line-height:2.5 }
 .menu-button { font-size:13px; gap:10px }
 .menu-button svg { width:24px }
 h2 { font-size:clamp(38px,10vw,48px) }
 .section-space,.care-section,.portfolio-section,.films-section,.selection-section,.visit-section { padding-block:65px }
 .hero { display:flex; flex-direction:column; min-height:0; overflow:visible; padding:0; background:var(--paper) }
 .hero-content { padding-block:34px 22px; order:0 }
 .hero h1 { font-size:clamp(37px,10.5vw,49px); line-height:1.15; max-width:100%; letter-spacing:-.025em }
 .hero-description { margin-top:19px; font-size:16px; line-height:1.7; max-width:36ch }
 .hero-description br { display:none }
 .hero-actions { gap:13px; display:grid; grid-template-columns:1fr; margin-top:24px }
 .hero-actions .button { min-height:52px; font-size:15px }
 .hero-discover { justify-self:center; min-height:44px; font-size:14px; border:0; border-bottom:1px solid #8ba49b; border-radius:0; padding:6px 0; background:none }
 .hero-location { font-size:13px; margin-top:17px; min-height:36px }
 .hero-scene { position:relative; z-index:auto; order:1; width:100%; height:285px; display:block }
 .hero-scene img { width:100%; height:100%; object-fit:cover; object-position:88% center }
 .care-heading { margin-bottom:25px }
 .care-heading>p { font-size:16px; margin-top:19px }
 .care-tabs { justify-content:flex-start; gap:22px; margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter); margin-bottom:25px; scroll-snap-type:x proximity; padding-bottom:2px }
 .care-tabs button { padding:10px 0; font-size:14px; min-height:50px; scroll-snap-align:start }
 .care-layout { display:block }
 .care-photo { max-height:460px; width:100%; aspect-ratio:1; object-fit:contain }
 .care-content { margin-top:27px }
 .care-content h3 { font-size:40px }
 .care-content>p { font-size:16px; margin-top:17px; line-height:1.8 }
 .care-services { grid-template-columns:1fr 1fr; margin-block:24px 25px; padding-top:22px; gap:12px 18px }
 .care-services li { font-size:14px; gap:8px }
 .care-services svg { width:16px }
 .care-actions { display:block }
 .care-actions .button { width:100%; font-size:14px; min-height:53px }
 .care-save { justify-content:center; width:100%; margin-top:11px; min-height:46px; font-size:14px }
 .status { font-size:13px }
 .portfolio-heading { text-align:left }
 .portfolio-heading>div>p { font-size:16px; margin-inline:0 }
 .portfolio-heading .text-link { font-size:14px }
 .portfolio-controls { flex-wrap:wrap; justify-content:space-between; gap:18px; margin-block:24px 27px }
 .filters { justify-content:space-between; width:100%; gap:10px }
 .filters button { font-size:14px; min-height:44px; padding-inline:1px }
 .gallery-navigation { display:flex }
 #result-count { font-size:13px }
 .work-grid { display:grid; grid-auto-flow:column; grid-auto-columns:84%; grid-template-columns:none; gap:22px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter); padding-bottom:15px; scrollbar-width:thin }
 .work-photo { scroll-snap-align:start }
 .work-photo>a img { aspect-ratio:4/5; height:auto; object-fit:contain }
 .work-photo figcaption { gap:10px; padding-top:17px }
 .work-photo h3 { font-size:27px; line-height:1.17 }
 .photo-category { font-size:12px; margin-top:8px }
 .save-reference { width:44px; height:44px }
 .portfolio-bottom { display:block; margin-top:25px }
 .portfolio-bottom .text-button { font-size:14px; min-height:48px }
 .portfolio-bottom>p { font-size:13px; margin-top:15px }
 .films-heading { display:block; margin-bottom:27px }
 .films-heading>div>p { font-size:16px; margin-top:19px }
 .reel-navigation { margin-top:23px }
 .reel-track { grid-auto-columns:80%; gap:22px; margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter) }
 .reel-image { aspect-ratio:9/16; max-height:530px }
 .reel-play { width:54px; height:54px; bottom:19px }
 .reel-caption { padding-top:18px }
 .reel h3 { font-size:29px }
 .reel p { font-size:14px }
 .film-note { font-size:13px; text-align:left; margin-top:19px }
 .about-section { display:flex; flex-direction:column; align-items:stretch; gap:31px }
 .about-copy { order:0 }
 .about-copy h2 { font-size:44px }
 .about-copy>p { font-size:16px; line-height:1.8; margin-top:22px }
 .about-copy .text-link { margin-top:21px; font-size:14px }
 .founder-photo { order:1; width:100% }
 .about-team { order:2; width:100%; max-width:100% }
 .about-team img { width:100%; max-height:570px; object-fit:contain; background:#ece7dc }
 .founder-photo figcaption,.about-team figcaption { font-size:28px }
 .founder-photo figcaption>span,.about-team figcaption>span { font-size:13px }
 .selection-layout { display:block }
 .selection-intro h2 { font-size:44px }
 .selection-intro>p { font-size:16px; line-height:1.8; margin-top:21px }
 .selection-content { padding:25px 21px; margin-top:29px }
 .selection-top { font-size:13px; gap:15px; padding-bottom:20px }
 .selection-lists { gap:23px; margin-block:23px }
 .selection-lists h3 { font-size:28px }
 .selection-lists li { font-size:14px; gap:11px }
 .selection-lists li>img { width:48px; height:48px }
 .selection-content summary { font-size:14px }
 .selection-content>.button { font-size:14px; padding-inline:18px; gap:14px; min-height:53px }
 .selection-content>.send-note { font-size:13px; margin-top:19px }
 .period-options { gap:10px 15px; font-size:13px }
 .personal-note { font-size:14px }
 .personal-note textarea { font-size:16px }
 .instagram-section { display:block; padding-block:48px }
 .instagram-section h2 { font-size:37px }
 .instagram-section p { font-size:15px; margin-top:17px }
 .instagram-section>a { margin-top:25px; gap:12px }
 .instagram-section>a>span { font-size:28px }
 .instagram-section>a>svg:first-child { width:28px }
 .instagram-section>a>svg:last-child { width:20px; margin-left:auto }
 .instagram-section small { font-size:13px }
 .visit-layout { display:flex; flex-direction:column; align-items:stretch; gap:32px }
 .visit-copy h2 { font-size:48px; max-width:100% }
 .visit-copy address strong { font-size:19px }
 .visit-copy address>span { font-size:15px }
 .visit-hours { font-size:16px }
 .visit-copy>.button { width:100%; font-size:15px; min-height:53px }
 .visit-links { gap:17px 26px }
 .visit-links a,.visit-links button { font-size:14px }
 .visit-switch { gap:15px; justify-content:space-between; margin-top:18px }
 .visit-switch button { min-height:48px; font-size:13px; gap:8px }
 #map-view iframe { height:350px }
 #facade-view figcaption { font-size:13px }
 .faq-section { display:block; padding-block:0 65px }
 .faq-section h2 { font-size:43px }
 .faq-list { margin-top:26px }
 .faq-list summary { min-height:64px; font-size:16px; gap:18px }
 .faq-list p { font-size:15px; line-height:1.8 }
 .footer-top { display:block; padding-block:30px }
 .footer-links { justify-content:flex-start; gap:10px 25px; margin-top:20px }
 .footer-links a { font-size:14px }
 .footer-bottom { display:block; font-size:12px; padding-block:18px 90px }
 .footer-bottom>span,.footer-bottom>a { display:block; margin-top:10px }
 .footer-bottom .atmosphere-note { font-size:12px; margin-top:17px; max-width:44ch }
 .whatsapp { width:54px; height:54px; right:calc(16px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)) }
 .selection-dock { left:calc(15px + env(safe-area-inset-left)); bottom:calc(18px + env(safe-area-inset-bottom)); max-width:calc(100vw - 94px); font-size:13px; padding:10px 13px; gap:15px }
 .selection-dock>span { gap:8px }
 .dialog-heading { padding:11px 15px; gap:15px }
 .dialog-heading h2 { font-size:15px }
 .album-stage { padding:10px }
 .album-stage img { max-height:calc(100dvh - 175px) }
 .album-controls { padding-bottom:15px }
}
@media(max-width:360px) {
 :root { --gutter:18px }
 .brand>span { font-size:23px }
 .brand img { width:31px; height:31px }
 .hero h1 { font-size:37px }
 .hero-description { font-size:15px }
 .hero-scene { height:260px }
 .hero-location { font-size:12px }
 .care-services { grid-template-columns:1fr }
 .instagram-section>a>span { font-size:25px }
 .selection-content { padding-inline:17px }
 .selection-content>.button { font-size:13px }
}
@media(prefers-reduced-motion:no-preference) {
 .hero-content { animation:hero-enter .8s var(--ease) both }
 .hero-scene { animation:scene-enter 1s var(--ease) both }
 .care-photo.is-changing { animation:care-enter .25s var(--ease) both }
 @keyframes hero-enter { from { opacity:.8; transform:translateY(12px) } to { opacity:1; transform:none } }
 @keyframes scene-enter { from { opacity:.9; transform:translateY(7px) } to { opacity:1; transform:none } }
 @keyframes care-enter { from { opacity:.5 } to { opacity:1 } }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important } }

/* Keep screen-reader film labels inside their scrollable reel. */
.reel { position:relative }

/* Integrated public entry points, preserving Atelier typography. */
.brand small{font-size:12px}.platform-access{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding:24px}.platform-access a,.platform-link{display:inline-flex;align-items:center;min-height:44px;font-size:12px}.navigation{gap:clamp(10px,1vw,20px)}@media(min-width:1000px){.owner-link{display:none}.navigation a{font-size:12px}}

.footer-note{padding-block:24px}

.navigation a,.care-tabs button,.filters button{min-width:44px}.hero-location{min-height:44px}a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px;min-width:44px}