/* ===================================================================
Sagamité — Shared Mobile System (mobile.css)
Loaded on every page. Desktop is untouched: all rules live inside
@media (max-width:767px) or under .is-mobile on .
Palette: --black #0b1012 · --cream #f3f0ec · --gold #c8a464
=================================================================== */
:root{
--safe-t: env(safe-area-inset-top, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-l: env(safe-area-inset-left, 0px);
--safe-r: env(safe-area-inset-right, 0px);
--m-ease: cubic-bezier(.16,1,.3,1); /* expo-out, native-feeling */
--m-ease-spring: cubic-bezier(.22,1.2,.36,1);
}
/* ---- Global mobile guards ---------------------------------------- */
.no-3d .viewer-canvas,
.no-3d #model-canvas,
.no-3d .lanyard-mount canvas,
.no-3d canvas.viewer-canvas{ display:none !important; }
/* Mobile replacement blocks are hidden on desktop, shown on mobile. */
.m-only{ display:none; }
@media (max-width:767px){ .m-only{ display:block; } .d-only{ display:none !important; } }
/* Coarse-pointer tablets (768–900) get .no-3d but not the phone
breakpoint: kill the dead 3D chrome they'd otherwise stare at. */
.no-3d .viewer-loading{ display:none !important; }
.no-3d .m-hero-img{ display:block; }
/* Touch has no hover: the overlay nav's dim rest state (14% white)
only works on devices that can hover-reveal it. */
@media (hover:none), (max-width:767px){
#menu-overlay .menu-list li a{ color:rgba(255,255,255,.85); }
#menu-overlay .menu-list li.menu-active a{ color:var(--gold,#c8a464); }
}
/* Closed overlays must not hold invisible tab stops (WCAG 2.4.3/2.4.7) */
#menu-overlay{
visibility:hidden;
transition:opacity .5s var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1)), visibility 0s .5s;
}
#menu-overlay.open{
visibility:visible;
transition:opacity .5s var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1)), visibility 0s;
}
#reserve-dropdown{ visibility:hidden; transition:opacity .18s, transform .18s, visibility 0s .18s; }
#reserve-dropdown.open{ visibility:visible; transition:opacity .18s, transform .18s, visibility 0s; }
.cs-overlay{ visibility:hidden; transition:opacity .35s cubic-bezier(.4,0,.2,1), visibility 0s .35s; }
.cs-overlay.is-open{ visibility:visible; transition:opacity .35s cubic-bezier(.4,0,.2,1), visibility 0s; }
@media (max-width:767px){
html,body{ max-width:100%; overflow-x:clip; }
html{ -webkit-text-size-adjust:100%; }
/* Anchor jumps + keyboard focus must clear the fixed chrome
(top pills / bottom dock) — WCAG 2.4.11 Focus Not Obscured */
html{ scroll-padding-top:84px; scroll-padding-bottom:calc(110px + var(--safe-b)); }
/* Kill horizontal bleed from wide desktop grids */
img,svg,video,canvas{ max-width:100%; }
/* Touch targets: every interactive element ≥44px hit area */
a,button,[role="button"],[role="menuitem"]{ touch-action:manipulation; }
.top-pill{ min-height:44px; }
.btn-primary,.btn-secondary,.btn-dark,.arrow-btn,.rp-cta,.cs-reserve-btn,
.res-drop-item,.m-card-cta{ min-height:44px; display:inline-flex; align-items:center; }
/* ---- Top nav: compact, safe-area aware ------------------------- */
#top-nav{
top:calc(14px + var(--safe-t));
right:calc(14px + var(--safe-r));
gap:6px;
}
.top-pill{ padding:11px 15px; font-size:11px; min-height:44px; }
.top-pill-reserve{ min-height:44px; }
/* On mobile the reserve pill opens the bottom-sheet, not the hover dropdown */
#reserve-dropdown{ display:none !important; }
/* ---- Bottom dock: safe-area + bigger targets ------------------- */
#dock{
bottom:calc(16px + var(--safe-b));
padding:4px 4px 4px 16px;
max-width:calc(100vw - 28px);
}
/* Logo anchor wraps a 13px mark — give it a real hit area */
.dock-logo{
min-width:44px; min-height:44px; margin-left:-12px;
display:inline-flex; align-items:center; justify-content:center;
}
.dock-menu-btn{ width:44px; height:44px; }
.dock-menu-btn:active{ transform:scale(.9); background:rgba(255,255,255,.18); }
.dock-menu-btn svg{ width:20px; height:20px; }
/* ---- Full-screen menu overlay: safe-area + thumb list ---------- */
#menu-overlay .menu-list li a{ font-size:clamp(2rem,10vw,3.4rem); padding:6px 0; }
#menu-overlay .menu-close-btn{ top:calc(18px + var(--safe-t)); width:44px; height:44px; }
#menu-overlay .menu-close-btn:focus-visible{
outline:2px solid rgba(200,164,100,.85); outline-offset:3px; border-radius:50%;
}
#menu-overlay .menu-close-btn:focus:not(:focus-visible){ outline:none; }
/* Contact row: stack vertically — a 40px-gap row wraps the phone
number onto 3 lines at 390px. Column + nowrap keeps both tappable. */
#menu-overlay .menu-bottom{
bottom:calc(24px + var(--safe-b));
flex-direction:column; align-items:center; gap:2px;
width:max-content; max-width:calc(100vw - 48px);
}
#menu-overlay .menu-bottom a{
white-space:nowrap; min-height:44px;
display:inline-flex; align-items:center;
}
/* ---- Hero bottom cluster: clear the floating dock --------------- */
/* The dock spans ~54px + 16px margin above the safe area. The hero's
decorative bottom bar sits inside that zone at phone heights — drop
it, and lift the scroll cue + editorial meta above the dock. */
.hero-bottom-bar{ display:none; }
.hero-scroll{ bottom:calc(96px + var(--safe-b)); }
/* ---- Small-target fixes (WCAG 2.5.8 / platform 44px) ------------ */
/* Coming-soon modal close: 32px circle → 44px hit area */
.cs-close{ width:44px; height:44px; top:8px; right:8px; }
/* Footer nav + tel links: 14px text rows → 44px tappable rows */
.foot-nav a, .foot-info a[href^="tel"]{
display:inline-flex; align-items:center; min-height:44px;
}
.foot-nav li + li{ margin-top:0; }
/* Prestige source links + model-page back link */
.award-row-source a, .press-source a{
display:inline-flex; align-items:center; min-height:44px;
}
.back-link{ min-height:44px; display:inline-flex; align-items:center; }
/* Reduce desktop section vertical padding a touch for phone rhythm */
.sec{ padding-left:max(20px,var(--safe-l)); padding-right:max(20px,var(--safe-r)); }
/* Two-column editorial grids stack on mobile — desktop column gaps
(60-100px) become dead vertical space between headline and body. */
.about-grid, .philosophy-grid, .intro-grid{ gap:26px !important; }
/* ---- Editorial hierarchy: sections must announce themselves ------ */
/* Desktop scales headers with vw; at 390px they collapsed to ~18px —
weaker than the body copy. Fixed px on mobile: gold eyebrow, big
confident header. */
.sec-label,
.sec-dark .sec-label,
.sec-black .sec-label{
font-size:12px; font-weight:700; letter-spacing:.34em;
color:var(--gold,#c8a464);
margin-bottom:12px;
}
/* Gold on cream is 2.07:1 — light sections keep the desktop dark ink */
.sec-light .sec-label{
font-size:12px; font-weight:700; letter-spacing:.34em;
color:rgba(33,35,37,.82);
margin-bottom:12px;
}
.display-text{
font-size:33px; font-weight:500;
letter-spacing:-0.02em; line-height:1.08;
}
.body-text{ font-size:15px; line-height:1.55; }
/* ---- Condensed rhythm: shorter scroll, same story ---------------- */
/* Desktop air (72–100px section pads, 4/5 media) reads as dead space
on a phone. IDs style sections per page, hence !important. */
.sec{ padding-top:48px !important; padding-bottom:52px !important; }
#quote{ padding-top:60px !important; padding-bottom:60px !important; }
.res-img{ aspect-ratio:16/10; }
/* ---- Footer: brand row on top, locations side by side ------------ */
#footer{
padding:44px max(20px,var(--safe-l)) calc(96px + var(--safe-b)) max(20px,var(--safe-r)) !important;
}
/* Pages with the Menu Midi fab (bottom-left) need extra clearance so
the © line is never covered */
body.has-mm #footer{
padding-bottom:calc(148px + var(--safe-b)) !important;
}
.footer-inner{
display:grid; grid-template-columns:1fr 1fr;
gap:28px 18px; margin-bottom:28px;
}
.footer-inner > div:first-child{ grid-column:1 / -1; }
.foot-mark{ margin-bottom:10px; }
.foot-brand{ margin-bottom:6px; }
.foot-col-label{ margin-bottom:10px; }
.foot-links li + li{ margin-top:4px; }
/* Address = one two-line Maps link; phone keeps the full-height target */
.foot-links{ list-style:none; }
.foot-links a{ display:inline-block; padding:2px 0; font-size:13px; line-height:1.55; color:rgba(255,255,255,.75); }
.foot-links a[href^="tel"]{
display:inline-flex; align-items:center; min-height:44px; padding:0;
}
.footer-bottom{
flex-direction:column; align-items:flex-start; gap:4px;
padding-top:20px;
}
.footer-copy, .foot-copy{ font-size:10px; }
/* Dish copy legibility: desktop's low-alpha ink falls under 4.5:1 */
.fn-row-desc{ color:rgba(33,35,37,.75); }
.fn-yatista-note{ color:rgba(33,35,37,.72); }
.fn-row-opt{ color:rgba(33,35,37,.72); }
.award-row-sub{ color:rgba(33,35,37,.72); }
.m-chip{ color:rgba(33,35,37,.8); }
.rp-strip-label{ font-size:10px; }
.footer-inner{ gap:18px; margin-bottom:18px; }
.foot-nav li{ margin:0; }
#footer .foot-info p{ margin-bottom:4px; }
#footer .foot-info br{ display:none; } /*
spacers between blocks */
.body-text{ margin-bottom:12px; }
/* ---- Model-hero pages: un-clip the title block -------------------- */
/* .model-hero-body is forced position:relative on mobile (to stack
over the poster img) but keeps its desktop `bottom:42px`, which as
a relative offset shifts the whole block 42px ABOVE the viewport —
"La Carte." arrived clipped, eyebrow invisible. Anchor it in flow,
clear of the notch + top pills. */
#model-hero .model-hero-body{
top:auto; bottom:auto; left:auto; right:auto;
padding:calc(84px + var(--safe-t)) 20px 0;
}
/* Title block sits at the TOP on mobile — photo heroes (potence flames,
bright interiors) need top darkening the desktop scrim never had. */
#model-hero .model-scrim{
background:
linear-gradient(to bottom, rgba(8,5,2,.82) 0%, rgba(8,5,2,.35) 32%, transparent 48%),
linear-gradient(to top, rgba(10,5,2,.9) 0%, transparent 55%);
}
}
/* ===================================================================
RESERVE BOTTOM-SHEET (injected by mobile.js, used site-wide)
Vaul-style drag-to-dismiss, snap, safe-area, focus-trapped.
=================================================================== */
#m-reserve-root{ position:fixed; inset:0; z-index:9000; pointer-events:none; }
#m-reserve-root[hidden]{ display:none; }
.mrs-backdrop{
position:absolute; inset:0; background:rgba(6,9,10,.55);
opacity:0; transition:opacity .4s var(--m-ease);
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
#m-reserve-root.open .mrs-backdrop{ opacity:1; pointer-events:auto; }
.mrs-sheet{
position:absolute; left:0; right:0; bottom:0;
background:var(--cream,#f3f0ec);
border-radius:26px 26px 0 0;
padding:10px 22px calc(26px + var(--safe-b));
box-shadow:0 -24px 60px rgba(0,0,0,.35);
transform:translateY(101%);
transition:transform .48s var(--m-ease);
pointer-events:auto;
will-change:transform;
max-height:88vh; overflow-y:auto; overscroll-behavior:contain;
touch-action:pan-y;
}
#m-reserve-root.open .mrs-sheet{ transform:translateY(0); }
#m-reserve-root.dragging .mrs-sheet{ transition:none; }
.mrs-handle{
width:42px; height:5px; border-radius:100px;
background:rgba(11,16,18,.18); margin:6px auto 16px;
}
.mrs-title{
font-family:var(--ff-sans,'DM Sans',sans-serif);
font-weight:300; letter-spacing:-.02em;
font-size:clamp(1.7rem,7vw,2.2rem); color:var(--black,#0b1012);
line-height:1.05; margin-bottom:4px;
}
.mrs-sub{
font-family:var(--ff-mono,'DM Mono',monospace);
font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color:rgba(33,35,37,.72); margin-bottom:20px;
}
.mrs-loc{
border-top:1px solid rgba(11,16,18,.1); padding:18px 0;
}
.mrs-loc:last-of-type{ border-bottom:1px solid rgba(11,16,18,.1); }
.mrs-loc-name{
font-family:var(--ff-sans,'DM Sans',sans-serif); font-weight:400;
font-size:1.15rem; color:var(--black,#0b1012); margin-bottom:2px;
}
.mrs-loc-meta{
font-family:var(--ff-mono,'DM Mono',monospace);
font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
color:rgba(33,35,37,.72); margin-bottom:14px;
}
.mrs-actions{ display:flex; gap:10px; }
.mrs-btn{
flex:1; min-height:52px;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-family:var(--ff-mono,'DM Mono',monospace);
font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
border-radius:100px; text-decoration:none; text-align:center;
transition:transform .18s var(--m-ease-spring), background .2s, opacity .2s;
}
.mrs-btn:active{ transform:scale(.96); }
.mrs-btn-book{ background:var(--black,#0b1012); color:#fff; border:1px solid var(--black,#0b1012); }
.mrs-btn-call{ background:transparent; color:var(--black,#0b1012); border:1px solid rgba(11,16,18,.28); }
.mrs-foot{
margin-top:20px; text-align:center;
font-family:var(--ff-mono,'DM Mono',monospace);
font-size:10px; letter-spacing:.2em; text-transform:uppercase;
color:rgba(33,35,37,.62);
}
@media (prefers-reduced-motion:reduce){
.mrs-sheet,.mrs-backdrop{ transition-duration:.01ms; }
/* Mobile-wide: collapse CSS animations/transitions (scroll-cue ticker,
grain drifts, press states). GSAP side is handled in mobile.js. */
.is-mobile *, .is-mobile *::before, .is-mobile *::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
}
/* ===================================================================
MOBILE 3D REPLACEMENTS (shared components used across pages)
Desktop 3D wrappers are hidden ≤767px; each page provides .m-only
replacement blocks below.
=================================================================== */
@media (max-width:767px){
.viewer-wrap, .rest-grid, .viewer-canvas, .lanyard-mount{ display:none !important; }
.split-row, .split-row.reverse{ display:block !important; }
.split-text{ margin-bottom:0; }
/* ---- Parallax poster (replaces a GLB viewer) ------------------- */
.m-poster{
position:relative; margin-top:22px;
border-radius:16px; overflow:hidden;
aspect-ratio:1/1; background:#0b1012;
box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
}
.m-poster img{
position:absolute; inset:-6% -6% -6% -6%;
width:112%; height:112%; object-fit:cover;
will-change:transform; transition:transform .1s linear;
}
.m-poster::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(11,16,18,0) 45%,rgba(11,16,18,.55) 100%);
pointer-events:none;
}
.m-poster-tag{
position:absolute; left:16px; bottom:14px; z-index:2;
font-family:var(--ff-mono,'DM Mono',monospace);
font-size:10px; letter-spacing:.24em; text-transform:uppercase;
color:rgba(255,255,255,.82);
}
/* Film grain to keep it tactile, matches desktop hero grain */
.m-poster-grain{
position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
/* ---- Swipe carousel (replaces the two 3D "lanyard" cards) ------ */
.m-carousel{
display:flex; gap:14px; margin-top:20px;
padding:4px 20px 18px; margin-left:-20px; margin-right:-20px;
overflow-x:auto; scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.m-carousel::-webkit-scrollbar{ display:none; }
.m-card{
position:relative; flex:0 0 82%; scroll-snap-align:center;
border-radius:18px; overflow:hidden; aspect-ratio:3/4;
background:#0b1012; box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
text-decoration:none; color:#fff;
transform:translateZ(0);
}
.m-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.m-card-scrim{
position:absolute; inset:0;
background:linear-gradient(180deg,rgba(11,16,18,.05) 30%,rgba(11,16,18,.82) 100%);
}
.m-card-body{ position:absolute; left:18px; right:18px; bottom:18px; z-index:2; }
.m-card-kicker{
font-family:var(--ff-mono,'DM Mono',monospace);
font-size:10px; letter-spacing:.24em; text-transform:uppercase;
color:var(--gold,#c8a464); margin-bottom:6px;
}
.m-card-name{
font-family:var(--ff-sans,'DM Sans',sans-serif); font-weight:300;
font-size:1.7rem; letter-spacing:-.02em; line-height:1.05; margin-bottom:4px;
}
.m-card-meta{
font-family:var(--ff-mono,'DM Mono',monospace);
font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.66); margin-bottom:14px;
}
.m-card-cta{
display:inline-flex; align-items:center; gap:7px;
font-family:var(--ff-mono,'DM Mono',monospace);
font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
color:#fff; border:1px solid rgba(255,255,255,.4);
padding:11px 16px; border-radius:100px; min-height:44px;
}
.m-carousel-hint{
display:flex; gap:6px; justify-content:center; margin-top:4px;
}
.m-carousel-hint span{ width:6px; height:6px; border-radius:50%; background:rgba(11,16,18,.2); }
.m-carousel-hint span.on{ background:var(--gold,#c8a464); }
/* ---- Mobile hero background (replaces #model-canvas hero) ------- */
#model-hero, #hero.model-hero{ min-height:100svh; }
.m-hero-img{
position:absolute; inset:0; z-index:0;
width:100%; height:100%; object-fit:cover;
will-change:transform;
}
.m-hero-img + .model-scrim,
#model-hero .model-scrim{ z-index:1; }
#model-hero .model-hero-body,
#model-hero .back-link,
#model-hero .model-hint{ position:relative; z-index:2; }
}