:root{
  --bg:#fffaf3;
  --header-bg:#ffffff;
  --ink:#000000;
  --ink-soft:#333333;
  --accent:#981230;
  --rule:#000000;
  --footer-bg:#000000;
  --footer-ink:#ffffff;
  --display:"Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --sans:"Poppins", "Helvetica Neue", Arial, sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 56px);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--header-bg)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:var(--header-bg);border-bottom:1px solid var(--rule)}
.site-header__inner{height:40px;max-width:1280px;margin:0 auto;padding:0 25px 0 10px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:block;color:var(--ink);line-height:0}
.brand svg{width:91.1582px;height:20px}
.header-actions{display:flex;align-items:center;gap:clamp(14px, 3vw, 24px)}
.menu-toggle{appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;color:var(--ink);line-height:0}
.menu-toggle svg{width:20px;height:17.9845px}
.menu-toggle line{stroke:currentColor;stroke-width:2;transition:transform .25s ease, opacity .2s ease;transform-origin:center}
.menu-toggle[aria-expanded="true"] .l1{transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .l2{opacity:0}
.menu-toggle[aria-expanded="true"] .l3{transform:translateY(-8px) rotate(-45deg)}

.menu{position:fixed;inset:calc(env(safe-area-inset-top, 0px) + 41px) 0 0;z-index:19;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:40px 24px calc(40px + env(safe-area-inset-bottom, 0px))}
.menu[hidden]{display:none}
.menu a{font-family:var(--display);font-size:clamp(36px, 9vw, 56px);text-decoration:none;color:var(--ink);text-transform:uppercase;letter-spacing:.02em}
.menu a:hover{color:var(--accent)}

/* Page */
main{display:block}

/* Hero: media slot (key visual image now, video later). Aspect ratios match the Figma frames
   (mobile 402x536, desktop 1280x720) so nothing baked into the key visual is cropped. */
.hero{position:relative;width:100%;aspect-ratio:402/536;overflow:hidden;background:#000;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:52px 24px}
@media (min-width:768px){.hero{aspect-ratio:1280/720;justify-content:center;padding:clamp(52px, 7vh, 80px) 24px}}
.hero__media{position:absolute;inset:0}
.hero__media picture{display:contents}
.hero__img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Injected by hero.js; fades in over the key visual once it is actually playing. */
.hero__video{opacity:0;transition:opacity .8s ease}
.hero__video.is-playing{opacity:1}
@media (prefers-reduced-motion: reduce){.hero__video{display:none}}
/* Optional live headline (meta box "Hero headline"), placed like the former STAY TUNED title. */
.hero__title{position:relative;margin:0;max-width:16ch;font-family:var(--display);font-weight:400;text-transform:uppercase;text-align:center;
  font-size:clamp(44px, 8vw, 96px);line-height:.9;letter-spacing:0;text-wrap:balance;overflow-wrap:break-word}
@media (prefers-reduced-motion: no-preference){
  .hero__title{opacity:0;transform:translateY(14px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
}
@keyframes rise{to{opacity:1;transform:none}}

/* Access */
.access{display:flex;flex-direction:column;align-items:center;padding:48px 15px 40px}
.access__title{margin:0;font:400 44px/.8 var(--display);color:var(--ink);text-transform:uppercase;text-align:center}
.access__body{display:flex;flex-direction:column;align-items:center;gap:40px;margin-top:40px;width:100%}
.access__map{width:372px;max-width:100%;height:auto}
.access__info{display:flex;flex-direction:column;align-items:center;gap:40px}
.info{width:162.689px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--ink);font:400 10px/normal var(--sans);letter-spacing:0}
.info h3{margin:0;width:100%;padding-bottom:9.5px;border-bottom:1px solid var(--rule);font:500 12px/normal var(--sans);text-transform:uppercase;color:var(--ink)}
.info p{margin:0}
/* Figma 263:931 / 263:806: Poppins 400 10px, line-height normal, 162.689px column, one address line per row. */
.address span{display:block;white-space:nowrap}
.info strong{font-weight:700}
.btn-map,.btn-contact{display:inline-flex;align-items:center;gap:10px;border:.5px solid var(--ink);padding:5px 10px;text-decoration:none;color:var(--ink);font:300 8px/normal var(--sans)}
.btn-map svg{width:15.3467px;height:22px;flex:none}
.btn-map:hover,.btn-contact:hover{border-color:var(--accent)}

@media (min-width:768px){
  .access{padding:40px 24px 161px}
  .access__body{display:grid;grid-template-columns:162.689px minmax(0, 497.78px);justify-content:space-between;align-items:start;
    column-gap:40px;width:min(854px, 100%);margin-top:86px}
  .access__map{grid-column:2;grid-row:1;width:100%}
  .access__info{grid-column:1;grid-row:1;align-items:flex-start;gap:70.7px;padding-top:31.1px}
  .info{align-items:flex-start;text-align:left}
  .btn-contact{display:none}
  /* Desktop header (Figma 263:733) shows only the logo. */
  .menu-toggle,.menu{display:none!important}
}

/* Footer */
.site-footer{background:var(--footer-bg);color:var(--footer-ink);width:100%;padding:30px 24px calc(18px + env(safe-area-inset-bottom, 0px))}
.site-footer__inner{max-width:402px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.social{display:flex;align-items:center;gap:20px;line-height:0}
.social a{display:block;color:#fff}
.social .ig{width:21.5907px;height:21.5907px}
.social .yt{width:28.666px;height:20.0674px}
.site-footer .logos{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px}
/* Footer logo links: scoped to .site-footer .logos so no generic "a" rule can override them. */
.site-footer .logos .frame-logo{display:flex;align-items:center;gap:14px;line-height:0;color:inherit;text-decoration:none}
.site-footer .logos .sivans-link{display:block;line-height:0;color:inherit;text-decoration:none}
.frame-logo .mark{width:20.2384px;height:21.6304px}
.frame-logo .word{width:109.267px;height:15.8627px}
/* The SivanS letters sit in the lower part of the 27px box (y 10.2-27; the red swoosh fills the top),
   so centring the boxes leaves the letters ~5px low. Shift up so the letters' centre lines up with
   THE FRAME wordmark, as in Figma (footer 231:603 / 263:688). */
.sivans{width:64px;height:27px;transform:translateY(-5.08px)}
.footer-rule{width:280.652px;max-width:100%;height:.5px;background:#fff;margin:38px 0 39px;border:0}
.footer-links{display:grid;grid-template-columns:119.818px 119.818px;column-gap:28px;width:267.126px;font-size:12px;line-height:normal}
.footer-links a{text-decoration:none;display:block}
.footer-links a:hover{text-decoration:underline}
.copyright{margin:20px 0 0;font:italic 300 8px/normal var(--sans);text-align:center}

/* WordPress admin bar (logged-in users only) */
.admin-bar .site-header{top:calc(env(safe-area-inset-top, 0px) + 32px)}
.admin-bar .menu{top:calc(env(safe-area-inset-top, 0px) + 73px)}
@media screen and (max-width:782px){
  .admin-bar .site-header{top:calc(env(safe-area-inset-top, 0px) + 46px)}
  .admin-bar .menu{top:calc(env(safe-area-inset-top, 0px) + 87px)}
}
@media screen and (max-width:600px){
  .admin-bar .site-header{top:env(safe-area-inset-top, 0px)}
}