/* Shared renderer: composition changes structure; appearance comes from validated design tokens. */
html { scroll-behavior: smooth; scroll-padding-top: var(--ref-anchor-offset,0px); }
body.restaurant-site-body { margin: 0; background: #f6f8f7; }
.reference-site { --ref-line: color-mix(in srgb, var(--ref-text) 22%, transparent); --ref-surface: color-mix(in srgb, var(--ref-bg) 94%, var(--ref-text)); position: relative; font-family: var(--ref-body-font); }
.ref-preview-note { margin: 0; font-family: system-ui,sans-serif; font-size: 14px; }
.reference-site *, .reference-site *::before, .reference-site *::after { box-sizing: border-box; }
.reference-site :is(h1,h2,h3,.ref-brand,.ref-footer-brand) { font-family: var(--ref-heading-font); }
.reference-site a:focus-visible, .reference-site button:focus-visible, .reference-site summary:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.reference-site .ref-hero { height: auto; min-height: max(660px,88svh); max-height: none; }
.reference-site .ref-hero-shade { background: linear-gradient(180deg,#0008, #0004 40%, #000c); }
.reference-site .ref-hero h1 { font-size: clamp(32px,6vw,var(--ref-heading-size)); overflow-wrap: anywhere; }
.ref-hero-subtitle { max-width: 55ch; font-size: clamp(18px,2vw,25px); }
.reference-site .ref-copy p { opacity: 1; }
.ref-reservation-widget { display: block; width: 100%; height: 720px; border: 0; border-radius: var(--ref-radius); background: #fff; }
.ref-reservation-fallback { margin: 16px 0 0; font-size: 15px; }
.ref-reservation-fallback a { text-decoration: underline; }
.reference-site .ref-eyebrow { font-size: clamp(16px,2vw,26px); }
.reference-site .ref-section { scroll-margin-top: 0; }
.reference-site .ref-section :is(.ref-split-media,.ref-split-media img,.ref-split-media video,.ref-gallery img,.ref-dish>div,.ref-branch>img,.ref-panel-background) { border-radius: var(--ref-photo-radius,var(--ref-radius)); }
.reference-site .ref-variant--background.ref-section--text-photo,
.reference-site .ref-section--reviews { background: var(--ref-surface); }
.reference-site :is(.ref-review,.ref-section--reviews .ref-review,.ref-branch,.ref-branch-tabs a,.ref-more>div) { color: var(--ref-text); background: var(--ref-bg); }
.reference-site .ref-branch-tabs a[aria-current=true] { outline-color: var(--ref-text); background: var(--ref-surface); }
.reference-site .ref-button--outline { color: var(--ref-text)!important; border-color: var(--ref-line); }
.reference-site .ref-faq details { border-color: var(--ref-line); }
.reference-site .ref-nav-shell, .reference-site .ref-header.is-scrolled { color: var(--ref-text); background: var(--ref-bg); }
.reference-site .ref-header.is-scrolled .ref-brand { color: var(--ref-text)!important; }
.reference-site .ref-footer { color: var(--ref-text); background: var(--ref-surface); }
.reference-site .ref-footer-bottom { border-color: currentColor; }
.reference-site .ref-header-inner { gap: 16px; }
.reference-site .ref-brand { flex-basis: 160px; }
.reference-site .ref-brand img { height: 72px; }
.reference-site .ref-navigation { gap: clamp(12px,1.8vw,28px); }
.reference-site .ref-navigation>a:not(.ref-button) { font-size: var(--ref-nav-font-size-desktop,15px); }
.reference-site .ref-navigation .ref-button { font-size: var(--ref-button-font-size-desktop,16px); }
.reference-site .ref-more, .reference-site .ref-more>div>a { font-size: var(--ref-nav-font-size-desktop,inherit); }
.reference-site .ref-navigation .ref-language-bar { font-size: var(--ref-nav-font-size-desktop,14px); }

/* Four compositions share content while retaining distinct geometry. */
.reference-site .ref-hero { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 40px; min-height: 0; padding: 170px max(24px,calc((100% - var(--ref-width))/2)) 64px; color: var(--ref-text); background: var(--ref-bg); }
.reference-site .ref-hero-content { position: relative; inset: auto; transform: none; grid-column: 1; grid-row: 1; width: auto; max-width: none; padding: 32px; }
.reference-site .ref-hero h1 { font-size: clamp(32px,5vw,var(--ref-heading-size)); }
.reference-site .ref-hero-media { position: relative; grid-column: 2; grid-row: 1; min-width: 0; width: 100%; height: clamp(380px,40vw,580px); overflow: hidden; border-radius: var(--ref-radius); }
.ref-hero-photo { position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: hidden; border-radius: inherit; }
/* Centered zoom keeps the overscan around every edge; object-position retains the selected crop. */
.ref-hero-photo img { transform-origin: 50% 50%; }
.reference-site .ref-hero-shade { display: none; }
.reference-site .ref-hero-tile { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: var(--ref-focus); }
.reference-site:not(.layout-immersive):not(.ref-header--contrast) .ref-header { background: var(--ref-bg); }
.reference-site:not(.layout-immersive):not(.ref-header--contrast) .ref-header .ref-brand { color: var(--ref-text)!important; }
.reference-site:not(.layout-immersive) .ref-header .ref-nav-shell { color: var(--ref-text); background: var(--ref-bg); }
.reference-site:not(.layout-immersive) .ref-header .ref-logo-normal { display: block!important; }
.reference-site:not(.layout-immersive) .ref-header .ref-logo-overlay { display: none!important; }
.reference-site:is(.ref-header--solid,.ref-header--minimal,.ref-header--split) .ref-hero { padding-top: 64px; }
.reference-site.ref-header--centered:not(.layout-immersive) .ref-hero { padding-top: 170px; }
.layout-signature .ref-section:nth-of-type(odd) { background: var(--ref-surface); }
.reference-site.layout-mosaic .ref-hero { grid-template-columns: .85fr 1.15fr; gap: 28px; }
.layout-mosaic .ref-hero-content { border-left: 4px solid var(--ref-accent); }
.reference-site.layout-mosaic .ref-hero-media { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; border-radius: 0; }
.reference-site.layout-mosaic .ref-hero-image { position: static; grid-row: span 2; min-height: 0; border-radius: var(--ref-radius); }
.reference-site.layout-mosaic .ref-hero-photo { position: relative; inset: auto; border-radius: var(--ref-radius); }
.reference-site.layout-mosaic .ref-hero-photo--cover { grid-row: span 2; }
.layout-mosaic .ref-hero-tile { border-radius: var(--ref-radius); }
.reference-site.layout-mosaic .ref-hero-media--1 { grid-template-columns: 1fr; }
.reference-site.layout-mosaic .ref-hero-media--2 { grid-template-rows: 1fr; }
.reference-site.layout-mosaic .ref-hero-media--2 .ref-hero-image { grid-row: auto; }
.reference-site.layout-mosaic .ref-hero-media--2 .ref-hero-photo--cover { grid-row: auto; }
.layout-mosaic .ref-split { gap: 32px; padding: 28px; border: 1px solid var(--ref-line); border-radius: var(--ref-radius); background: var(--ref-surface); }
.layout-mosaic .ref-gallery { grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 180px; }
.layout-mosaic .ref-gallery a:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
.layout-mosaic .ref-gallery img { height: 100%; aspect-ratio: auto; }
.reference-site.layout-studio .ref-hero { display: flex; flex-direction: column; gap: 28px; }
.reference-site.layout-studio .ref-hero-content { order: 0; text-align: center; max-width: 850px; padding: 0 16px; }
.reference-site.layout-studio .ref-hero :is(h1,.ref-hero-subtitle) { margin-inline: auto; }
.reference-site.layout-studio .ref-hero-media { order: 1; max-width: min(1100px,var(--ref-width)); height: 300px; }
.layout-studio .ref-section .ref-container { max-width: min(960px,var(--ref-width)); }
.layout-studio .ref-section + .ref-section { border-top: 1px solid var(--ref-line); }
.layout-studio .ref-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
.reference-site.layout-immersive .ref-hero { display: grid; grid-template-columns: 1fr; min-height: clamp(580px,92svh,900px); padding: 0; color: white; background: #182420; }
.reference-site.layout-immersive .ref-hero-media { position: absolute; inset: 0; grid-column: 1; height: 100%; border-radius: 0; }
.reference-site.layout-immersive .ref-hero-content { grid-column: 1; align-self: end; padding: 220px 24px 80px; margin-inline: auto; text-align: center; width: min(100%,1000px); }
.reference-site.layout-immersive .ref-hero :is(h1,.ref-hero-subtitle) { margin-inline: auto; }
.reference-site.layout-immersive .ref-hero-shade { display: block; background: linear-gradient(180deg,#0008,#0004 35%,#000d); }
.layout-immersive .ref-section:nth-of-type(even) { background: var(--ref-surface); }
.layout-immersive .ref-section-heading { justify-content: center; text-align: center; }
.layout-immersive .ref-gallery { gap: 6px; }
.reference-site .ref-section-content { width: 100%; min-width: 0; }
.reference-site .ref-split { gap: clamp(24px,5vw,72px); }
.reference-site .ref-split-media { width: 100%; min-width: 0; }
.reference-site .ref-split-media>img { width: 100%; height: auto; aspect-ratio: 3/2; max-height: 380px; object-fit: cover; }
.reference-site .ref-section--photo-panel { display: block; min-height: 0; }
.reference-site .ref-section--photo-panel .ref-split { display: grid; }
.reference-site .ref-section--photo-panel .ref-copy { padding: 24px; background: transparent; }
.reference-site .ref-brand img { width: auto; max-width: 160px; height: auto; max-height: 72px; border-radius: var(--ref-header-logo-radius,0%); }
.reference-site .ref-footer-brand img { width: auto; height: auto; max-width: 160px; max-height: 100px; object-fit: contain; border-radius: var(--ref-footer-logo-radius,0%); }
.ref-language-bar { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--ref-bg); color: var(--ref-text); font: 600 14px/1 system-ui,sans-serif; }
.ref-language-bar a { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 8px; }
.ref-language-bar a[aria-current=page] { background: var(--ref-primary); color: var(--ref-button-text); }
.ref-contact-page>.ref-language-bar { justify-content: flex-end; max-width: var(--ref-width,1560px); margin-inline: auto; }
.reference-site .ref-header { top: 0; }
.reference-site .ref-header.is-scrolled { position: fixed; top: 0; }
.reference-site:is(.ref-header--solid,.ref-header--minimal,.ref-header--split) .ref-header:not(.is-scrolled) { top: 0; }
.reference-site.ref-header--floating .ref-header { top: 16px; }
.reference-site.ref-header--framed .ref-header { top: 16px; }
.reference-site.ref-header--floating .ref-header.is-scrolled { top: 12px; }
.reference-site.ref-header--framed .ref-header.is-scrolled { top: 0; }
.reference-site .ref-skip { z-index: 110; }
.reference-site .ref-section { overflow: clip; }
.reference-site .ref-section:focus-within [data-scroll-content] { opacity: 1; }

/* Section choices override the composition defaults. */
.reference-site .ref-variant--left .ref-section-heading { justify-content: flex-start; text-align: left; }
.reference-site .ref-variant--center .ref-split { grid-template-columns: 1fr; text-align: center; }
.reference-site .ref-variant--background .ref-split { grid-template-columns: 1fr 1fr; }
.reference-site .ref-variant--right .ref-split-media { order: 2; }
.reference-site .ref-section--gallery.ref-variant--center .ref-gallery { grid-template-columns: repeat(4,minmax(0,1fr)); }
.reference-site .ref-section--gallery.ref-variant--center .ref-gallery a:nth-child(5n+1) { grid-column: span 2; }
.reference-site .ref-section--gallery.ref-variant--right .ref-gallery { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
.reference-site .ref-section--gallery.ref-variant--right .ref-gallery a { flex: 0 0 32%; scroll-snap-align: start; }
.reference-site .ref-variant--center :is(.ref-service-links,.ref-section-heading) { justify-content: center; text-align: center; }
.reference-site .ref-section--text-photo.ref-variant--background { position: relative; isolation: isolate; min-height: 380px; display: grid; align-items: center; }
.reference-site .ref-section--text-photo.ref-variant--background .ref-split { display: block; background: transparent; overflow: visible; }
.reference-site .ref-section--text-photo.ref-variant--background .ref-split-media { position: absolute; inset: 0; z-index: -1; }
.reference-site .ref-section--text-photo.ref-variant--background .ref-split-media img { height: 100%; aspect-ratio: auto; }
.reference-site .ref-section--text-photo.ref-variant--background .ref-copy { background: var(--ref-bg); border-radius: var(--ref-radius); }

/* Section colours and captions are independent of the selected composition. */
.reference-site .ref-section.ref-section--custom-colours { background: var(--ref-section-bg); color: var(--ref-text); }
.ref-photo-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.ref-photo-overlay { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 340px; overflow: hidden; isolation: isolate; border-radius: var(--ref-photo-radius,var(--ref-radius)); }
.ref-photo-overlay--large { min-height: 440px; }
.ref-photo-overlay .ref-overlay-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.reference-site .ref-overlay-copy { position: relative; isolation: isolate; padding: 24px; color: var(--ref-overlay-text,#fff); overflow-wrap: anywhere; }
.ref-overlay-copy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ref-overlay-shade,#000); opacity: var(--ref-overlay-opacity,.65); }
.ref-overlay-copy :is(h2,h3,p) { color: inherit; }
.ref-overlay-copy p { margin: 0 0 16px; }
.ref-overlay-copy :last-child { margin-bottom: 0; }
.reference-site .ref-overlay-link { display: inline-block; padding-block: 8px; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.reference-site .ref-dish-figure { position: relative; margin: 0; }
.reference-site .ref-dish-image { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ref-surface); border-radius: var(--ref-photo-radius,var(--ref-radius)); }
.ref-dish-figure>figcaption { margin-top: 12px; }
.ref-dish--overlay .ref-dish-figure { display: grid; min-height: 270px; overflow: hidden; border-radius: var(--ref-photo-radius,var(--ref-radius)); }
.ref-dish--overlay .ref-dish-image { grid-area: 1 / 1; height: 100%; min-height: 270px; aspect-ratio: auto; }
.ref-dish--overlay .ref-dish-image img { position: absolute; inset: 0; }
.reference-site .ref-dish--overlay figcaption { grid-area: 1 / 1; align-self: end; margin: 0; padding: 16px; }
.ref-dish--overlay .ref-dish-action { top: 8px; bottom: auto; }
@media(max-width:700px) {
    .ref-photo-cards { grid-template-columns: 1fr; gap: 16px; }
    .ref-photo-overlay { min-height: 300px; }
    .ref-photo-overlay--large { min-height: 360px; }
    .reference-site .ref-overlay-copy { padding: 20px; }
}

/* Header choices share one navigation and work with every theme. */
.ref-header--classic .ref-nav-shell, .ref-header--framed .ref-nav-shell, .ref-header--mercado .ref-nav-shell { background: transparent; color: white; }
.ref-header--centered .ref-navigation { justify-content: center; }
.ref-header--centered .ref-brand { flex-basis: auto; text-align: center; }
.ref-header--centered .ref-nav-shell { max-width: 100%; }
.ref-header--floating .ref-header { inset: 20px 24px auto; border-radius: 24px; background: #0008; }
.ref-header--floating .ref-header.is-scrolled { top: 12px; background: var(--ref-bg); }
.ref-header--solid .ref-header, .ref-header--minimal .ref-header, .ref-header--split .ref-header { position: relative; background: var(--ref-bg); }
.ref-header--solid .ref-brand, .ref-header--minimal .ref-brand, .ref-header--split .ref-brand { color: var(--ref-text)!important; }
.ref-header--split .ref-logo-normal, .ref-header--contrast .ref-logo-normal { display: block!important; }
.ref-header--split .ref-header-inner { border-left: 12px solid var(--ref-primary); padding-left: 20px; }
.ref-header--framed .ref-header { inset: 16px 16px auto; border: 1px solid #fffa; border-radius: 8px; }
.ref-header--framed .ref-header.is-scrolled { top: 0; border-color: var(--ref-primary); }
.ref-header--minimal .ref-header, .ref-header--compact .ref-header { padding-block: 12px; }
.ref-header--compact .ref-brand img { height: 42px; }
.ref-header--contrast .ref-header { background: var(--ref-secondary); }
.ref-header--contrast .ref-brand { color: var(--ref-on-secondary)!important; }
.ref-header--editorial .ref-header-inner { align-items: center; padding-bottom: 16px; border-bottom: 1px solid #fff8; }
.ref-header--editorial .ref-brand { font-size: 26px; }
.ref-header--mercado .ref-header { background: linear-gradient(#0009,transparent); }
.reference-site .ref-header.is-scrolled .ref-nav-shell { background: transparent; color: var(--ref-text); }
.reference-site .ref-nav-shell { flex: 0 1 auto; margin-left: auto; max-width: none; }
.reference-site .ref-navigation { gap: clamp(8px,1.2vw,20px); }
.reference-site .ref-navigation { justify-content: flex-end; }
.reference-site .ref-navigation>a:not(.ref-button) { flex: 0 0 auto; }
.ref-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ref-header-actions .ref-button { padding: 12px 16px; font-size: var(--ref-button-font-size-desktop,clamp(14px,1.3vw,18px)); white-space: nowrap; min-height: 48px; }
.reference-site:is(.ref-header--floating,.ref-header--centered,.ref-header--compact,.ref-header--contrast,.ref-header--editorial) .ref-nav-shell { padding-inline: 32px; }
.reference-site .ref-header-inner { display: flex; flex-direction: row; align-items: center; }

/* Hover decoration reserves its space so navigation measurements remain stable. */
.reference-site[data-navigation-hover]:not([data-navigation-hover=auto]) .ref-navigation :is(a:not(.ref-button),.ref-more>summary) { border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; text-decoration: none; }
.reference-site[data-navigation-hover=underline] .ref-navigation :is(a:not(.ref-button),.ref-more>summary):is(:hover,:focus-visible) { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.reference-site[data-navigation-hover=border] .ref-navigation :is(a:not(.ref-button),.ref-more>summary):is(:hover,:focus-visible) { border-color: currentColor; }
.reference-site[data-navigation-hover=background] .ref-navigation :is(a:not(.ref-button),.ref-more>summary):is(:hover,:focus-visible) { background: var(--ref-nav-hover-bg,var(--ref-bg)); color: var(--ref-nav-hover-text,var(--ref-text)); }
.reference-site .ref-navigation :is(a,.ref-more>summary):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ref-new-tab-hint { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip-path: inset(50%)!important; white-space: nowrap!important; border: 0!important; }

/* Each device retains its automatic typography unless an explicit size is supplied. */
@media(min-width:52.001rem) {
    .reference-site .ref-hero-content h1 { font-size: var(--ref-hero-title-desktop,clamp(32px,5vw,var(--ref-heading-size))); }
    .reference-site .ref-hero-content .ref-hero-subtitle { font-size: var(--ref-hero-body-desktop,clamp(18px,2vw,25px)); }
    .reference-site .ref-hero-content .ref-eyebrow { font-size: var(--ref-hero-eyebrow-desktop,clamp(16px,2vw,26px)); }
}

/* Footer choices retain all content while changing emphasis and arrangement. */
.ref-footer--accent .ref-footer { background: var(--ref-primary); color: var(--ref-button-text); }
.ref-footer--split .ref-footer { background: linear-gradient(90deg,var(--ref-surface) 50%,var(--ref-bg) 50%); }
.ref-footer--stacked .ref-footer-main { display: flex; flex-direction: column; gap: 28px; }
.ref-footer--framed .ref-footer { margin: 20px; border: 1px solid var(--ref-primary); border-radius: var(--ref-radius); }
.ref-footer--light .ref-footer, .ref-footer--minimal .ref-footer { background: var(--ref-bg); border-top: 1px solid var(--ref-line); }
.reference-site.ref-footer--minimal .ref-footer nav.ref-footer-home-navigation { display: flex; justify-content: flex-end; }
.ref-footer--compact .ref-footer { padding-block: 24px; font-size: 14px; }
.ref-footer--compact .ref-footer-main { gap: 24px; }
.ref-footer--compact .ref-socials { margin-block: 20px; }
.ref-footer--editorial .ref-footer-brand { font-size: clamp(30px,6vw,72px); line-height: 1.1; }
.ref-footer--editorial .ref-footer-main { grid-template-columns: 1fr 1fr; }
.ref-footer--mercado .ref-footer { border-top: 8px solid var(--ref-accent); background: var(--ref-secondary); color: var(--ref-on-secondary); }

@media(min-width:52.001rem) {
    :is(.reference-site,.ref-contact-frame).ref-button-size-desktop .ref-button { font-size: var(--ref-button-font-size-desktop); }
    .reference-site .ref-header .ref-brand { flex: 0 0 160px; min-width: 0; overflow-wrap: anywhere; }
    .reference-site .ref-header .ref-brand img { max-width: 100%; }
    .reference-site .ref-nav-shell, .reference-site .ref-navigation { min-width: 0; }
    .reference-site .ref-nav-shell { display:flex; align-items:center; gap:clamp(8px,1vw,16px); }
    .reference-site .ref-navigation { flex:1 1 auto; }
    .reference-site .ref-nav-shell>.ref-language-bar { flex:0 0 auto; font-size:var(--ref-nav-font-size-desktop,14px); }
    .reference-site .ref-navigation>a:not(.ref-button) { min-width: max-content; overflow: visible; text-overflow: clip; }
    .reference-site .ref-navigation>:is(.ref-button,.ref-more) { flex-shrink: 0; }
    .reference-site:not(.is-enhanced) .ref-header { position: relative; }
    .reference-site:not(.is-enhanced) .ref-navigation { flex-wrap: wrap; }
    .reference-site:not(.is-enhanced) .ref-navigation>a:not(.ref-button) { flex: 1 1 120px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
    .reference-site:not(.is-enhanced) .ref-more { flex-basis: 100%; }
    .reference-site:not(.is-enhanced) .ref-more>div { position: static; width: auto; max-height: none; box-shadow: none; }
    .reference-site:not(.is-enhanced) .ref-hero { padding-top: 32px; }
}
/* Last-resort desktop burger uses the same flat menu without moving the header CTAs. */
.reference-site.has-compact-navigation .ref-header .ref-brand { flex: 0 1 160px; min-width: 64px; }
.reference-site.has-compact-navigation .ref-nav-shell { flex: 0 0 auto; margin-left: auto; padding: 4px 12px; }
.reference-site.has-compact-navigation .ref-menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 14px; background: transparent; color: inherit; padding: 12px; cursor: pointer; }
.reference-site.has-compact-navigation .ref-menu-toggle span { height: 2px; width: 22px; border-radius: 2px; background: currentColor; transition: transform .2s,opacity .2s; }
.reference-site.has-compact-navigation .ref-menu-toggle[aria-expanded=true] span:first-child { transform: translateY(7px) rotate(45deg); }
.reference-site.has-compact-navigation .ref-menu-toggle[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.reference-site.has-compact-navigation .ref-menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-7px) rotate(-45deg); }
.reference-site.has-compact-navigation .ref-navigation { position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: 8px; padding: 20px 32px; max-height: max(48px,calc(100svh - var(--ref-header-bottom,100px))); overflow-y: auto; overscroll-behavior: contain; background: var(--ref-bg); color: var(--ref-text); box-shadow: 0 8px 16px #0002; border-radius: 0 0 var(--ref-radius) var(--ref-radius); }
.reference-site.has-compact-navigation .ref-navigation:not(.is-open) { display: none; }
.reference-site.has-compact-navigation .ref-navigation>a { display: flex; align-items: center; min-height: 48px; padding-block: 12px; white-space: normal; min-width: 0; flex: 0 0 auto; }
.reference-site.has-compact-navigation .ref-language-bar { flex-shrink: 0; }
@media(max-width:52rem) {
    .reference-site:has(.ref-mobile-action) { padding-bottom: var(--ref-mobile-action-height,calc(84px + env(safe-area-inset-bottom))); }
    .reference-site .ref-hero, .reference-site.layout-mosaic .ref-hero { display: flex; flex-direction: column; gap: 24px; padding: 140px 24px 32px; }
    .reference-site:is(.ref-header--solid,.ref-header--minimal,.ref-header--split) .ref-hero { padding-top: 32px; }
    .reference-site.ref-header--centered:not(.layout-immersive) .ref-hero { padding-top: 140px; }
    .reference-site .ref-hero-content { order: 0; padding: 0; width: 100%; }
    .reference-site .ref-hero h1 { font-size: clamp(32px,9vw,var(--ref-heading-size)); }
    .reference-site .ref-hero-content h1 { font-size: var(--ref-hero-title-mobile,clamp(32px,9vw,var(--ref-heading-size))); }
    .reference-site .ref-hero-content .ref-hero-subtitle { font-size: var(--ref-hero-body-mobile,clamp(18px,2vw,25px)); }
    .reference-site .ref-hero-content .ref-eyebrow { font-size: var(--ref-hero-eyebrow-mobile,clamp(16px,2vw,26px)); }
    .reference-site .ref-hero-media { order: 1; height: 260px; min-height: 0; flex-shrink: 0; }
    .reference-site .ref-hero :is(.ref-hero-image,.ref-hero-video,.ref-hero-tile) { object-position: var(--ref-mobile-focus); }
    .reference-site.layout-mosaic .ref-hero-content { padding-left: 16px; }
    .reference-site.layout-mosaic .ref-hero-media { height: 300px; gap: 8px; }
    .reference-site.layout-studio .ref-hero-media { height: 200px; }
    .reference-site.layout-immersive .ref-hero { display: grid; min-height: min(85svh,760px); padding: 0; }
    .reference-site.layout-immersive .ref-hero-media { height: 100%; }
    .reference-site.layout-immersive .ref-hero-content { padding: 160px 24px 64px; }
    .reference-site .ref-split, .reference-site .ref-variant--background .ref-split { grid-template-columns: 1fr; gap: 24px; }
    .reference-site .ref-split-media>img { max-height: 240px; }
    .reference-site .ref-variant--right .ref-split-media { order: 0; }
    .reference-site .ref-copy { padding: 12px 0; }
    .layout-mosaic .ref-split { padding: 16px; }
    .reference-site .ref-gallery, .reference-site .ref-section--gallery.ref-variant--center .ref-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .layout-mosaic .ref-gallery { grid-auto-rows: 120px; }
    .reference-site .ref-section--gallery.ref-variant--right .ref-gallery a { flex-basis: 80%; }
    .reference-site .ref-header-inner, .reference-site.ref-header--centered .ref-header-inner { display: flex; flex-direction: row; align-items: center; }
    .reference-site .ref-header { padding-block: 12px; }
    .reference-site .ref-header.is-scrolled { padding-block: 8px; }
    .reference-site .ref-header .ref-brand { flex-basis: 120px; }
    .reference-site .ref-header .ref-brand img { max-width: 120px; max-height: 60px; height: auto; }
    .reference-site .ref-header-actions { display: none; }
    .reference-site .ref-nav-shell { flex: 0 0 auto; margin-left: auto; }
    .reference-site .ref-navigation.is-open, .reference-site:not(.is-enhanced) .ref-navigation { background: var(--ref-bg); color: var(--ref-text); }
    .reference-site .ref-navigation>a { border-color: var(--ref-line); }
    .reference-site .ref-navigation { row-gap: 8px; max-height: max(48px,calc(100svh - var(--ref-header-bottom,100px) - var(--ref-mobile-action-height,calc(84px + env(safe-area-inset-bottom))))); overflow-y: auto; overscroll-behavior: contain; }
    .reference-site .ref-navigation>a:not(.ref-button) { font-size: var(--ref-nav-font-size-mobile,15px); white-space: normal; overflow: visible; text-overflow: clip; }
    .reference-site .ref-navigation>a { display: flex; align-items: center; min-height: 48px; padding-block: 12px; }
    .reference-site .ref-navigation .ref-language-bar { font-size: var(--ref-nav-font-size-mobile,14px); flex-shrink: 0; }
    .reference-site .ref-more, .reference-site .ref-more>div>a { font-size: var(--ref-nav-font-size-mobile,inherit); }
    :is(.reference-site,.ref-contact-frame).ref-button-size-mobile .ref-button { font-size: var(--ref-button-font-size-mobile); }
    .reference-site .ref-navigation .ref-button { font-size: var(--ref-button-font-size-mobile,16px); white-space: normal; }
    .reference-site:is(.ref-header--floating,.ref-header--centered,.ref-header--compact,.ref-header--contrast,.ref-header--editorial) .ref-nav-shell { padding-inline: 12px; }
    /* Native details remain usable when JavaScript is unavailable. */
    .reference-site:not(.is-enhanced) .ref-header-inner { flex-direction: column; align-items: stretch; }
    .reference-site:not(.is-enhanced) .ref-header .ref-brand { flex-basis: auto; }
    .reference-site:not(.is-enhanced) .ref-nav-shell { display: block; width: 100%; margin: 0; }
    .reference-site:not(.is-enhanced) .ref-menu-toggle { display: none; }
    .reference-site:not(.is-enhanced) .ref-hero { padding-top: 32px; }
    .reference-site:not(.is-enhanced) .ref-more>summary { display: none; }
    .reference-site:not(.is-enhanced) .ref-more { display: contents; }
    .reference-site:not(.is-enhanced) .ref-more>div { position: static; width: auto; padding: 0; background: transparent; box-shadow: none; }
    .reference-site:not(.is-enhanced) .ref-more>div>a { min-height: 48px; padding-block: 12px; }
    .reference-site .ref-footer-main { display: flex; flex-direction: column; gap: 28px; }
    .reference-site .ref-footer nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .reference-site.ref-footer--minimal .ref-footer nav.ref-footer-home-navigation { justify-content: flex-start; }
    .reference-site.ref-header--floating .ref-header { inset: 10px 10px auto; }
    .reference-site.ref-header--floating .ref-header.is-scrolled { top: 10px; }
    .reference-site .ref-mobile-action { display: flex; align-items: stretch; gap: 8px; background: var(--ref-bg); }
    .reference-site .ref-mobile-action .ref-button { flex: 1 1 0; width: auto; min-width: 0; padding: 12px 8px; font-size: var(--ref-button-font-size-mobile,clamp(14px,4vw,18px)); overflow-wrap: anywhere; }
}
.reference-site:not(.is-enhanced) .ref-header { inset: auto; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }