/* ============================================================
   YUNIC HOSPITALITY — light editorial design system
   Cormorant SC · Cormorant italic · DM Sans
   ============================================================ */
:root{
  --paper:#F7F7F4;
  --cream:#EFEFEA;
  --sand:#E3E1DB;
  --ink:#252420;
  --body:#56554F;
  --gold:#A48760;
  --gold-deep:#8A6D4B;
  --clay:#A9623F;
  --line:rgba(41,39,31,.16);
  --line-soft:rgba(41,39,31,.09);
  --serif:'Cormorant SC',serif;
  --serif-it:'Cormorant',serif;
  --sans:'DM Sans',sans-serif;
  --pad:clamp(72px,10vw,140px);
  --ease:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  background-color:var(--paper);
  background-image:url("marble-white.jpg");
  background-repeat:no-repeat;
  background-position:top center;
  background-size:cover;
  color:var(--body);
  font:300 1.0625rem/1.75 var(--sans);
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}
::selection{background:var(--gold);color:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* film grain — the soul layer */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:2000;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-2%,2%)}40%{transform:translate(2%,-1%)}60%{transform:translate(-1%,-2%)}80%{transform:translate(1%,2%)}}

.container{width:min(1240px,92vw);margin-inline:auto}
.section{padding-block:var(--pad)}
.section--tint{background:var(--cream)}
.section--line{border-top:1px solid var(--line-soft)}

/* type */
.eyebrow{
  font:500 .6875rem/1 var(--sans);
  letter-spacing:.38em;text-transform:uppercase;color:var(--gold-deep);
  display:flex;align-items:center;gap:1rem;
}
.eyebrow::before{content:"";width:2.6rem;height:1px;background:var(--gold)}
.eyebrow--plain::before{display:none}
.display{
  font:400 clamp(2.5rem,5.2vw,4.6rem)/1.08 var(--serif);
  color:var(--ink);letter-spacing:.01em;
}
.display em,.hero-title em,.footer-title em,.band-title em,.cta-band h2 em,.page-hero .display em{
  font-family:var(--serif-it);font-style:italic;font-weight:500;
  color:var(--gold-deep);letter-spacing:0;
}
.lede{font-size:1.15rem;line-height:1.85;max-width:56ch}
.small-caps{font:500 .7rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase}

/* hand-drawn underline */
.u-line{position:relative;white-space:nowrap}
.u-line svg{position:absolute;left:-2%;bottom:-.28em;width:104%;height:.42em;overflow:visible}
.u-line path{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 1.4s var(--ease) .3s}
.in .u-line path{stroke-dashoffset:0}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}.rv-d4{transition-delay:.48s}

/* buttons & links */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font:500 .72rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--ink);border-radius:999px;
  padding:1.05rem 1.9rem;transition:all .45s var(--ease);
}
.btn span{transition:transform .45s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:hover span{transform:translate(3px,-3px)}
.btn--gold{border-color:var(--gold);color:var(--gold-deep)}
.btn--gold:hover{background:var(--gold);color:#fff}
.tlink{
  display:inline-flex;align-items:baseline;gap:.55rem;
  font:500 .74rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink);
  padding-bottom:.45rem;position:relative;
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform-origin:right;transition:transform .5s var(--ease)}
.tlink:hover::after{transform:scaleX(.35);transform-origin:left}
.tlink span{transition:transform .5s var(--ease)}
.tlink:hover span{transform:translate(4px,-4px)}

/* ============ NAV ============ */
.site-nav{
  position:fixed;inset:0 0 auto;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  transition:background .5s,box-shadow .5s,padding .5s;
}
.site-nav.scrolled{
  background:rgba(247,247,244,.86);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-soft);padding-block:.7rem;
}
.brand{display:flex;align-items:center;gap:.8rem}
.brand-mark{width:44px;height:44px;object-fit:contain}
.brand-word{font:400 1.06rem/1 var(--serif);color:var(--ink);letter-spacing:.14em;text-transform:uppercase}
.brand-word em{font-family:var(--serif-it);font-style:italic;text-transform:none;color:var(--gold-deep);letter-spacing:.02em}
.nav-links{display:flex;gap:2.4rem}
.nav-links a{
  font:500 .7rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--body);
  position:relative;padding:.4rem 0;transition:color .3s;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{
  font:500 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:.85rem 1.5rem;color:var(--ink);
  transition:all .45s var(--ease);
}
.nav-cta:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.nav-toggle{display:none;flex-direction:column;gap:6px;padding:.6rem;z-index:1100}
.nav-toggle span{width:26px;height:1.5px;background:var(--ink);transition:transform .45s var(--ease)}
.nav-toggle.open span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav-toggle.open span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.menu-overlay{
  position:fixed;inset:0;z-index:1050;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:0 8vw;
  opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility .55s;
}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-overlay a{
  font:400 clamp(2.2rem,8vw,4rem)/1.25 var(--serif);color:var(--ink);
  border-bottom:1px solid var(--line-soft);padding:1.1rem 0;
  display:flex;justify-content:space-between;align-items:center;
  transform:translateY(20px);opacity:0;transition:all .6s var(--ease);
}
.menu-overlay.open a{transform:none;opacity:1}
.menu-overlay a i{font:500 .7rem var(--sans);letter-spacing:.3em;color:var(--gold-deep);font-style:normal}
.menu-overlay a:hover{color:var(--gold-deep)}
.menu-foot{margin-top:3rem;display:flex;gap:2rem;font:500 .7rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--body)}

/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;padding:8.5rem 0 4rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero-eyebrow{margin-bottom:2.2rem}
.hero-title{
  font:400 clamp(3.2rem,7.4vw,6.8rem)/1.02 var(--serif);
  color:var(--ink);
}
.hero-sub{margin-top:2.2rem;max-width:40ch;font-size:1.12rem;line-height:1.8}
.hero-actions{margin-top:2.8rem;display:flex;align-items:center;gap:2.2rem;flex-wrap:wrap}
.hero-visual{position:relative;justify-self:end;width:min(100%,430px)}
.arch{
  border-radius:999px 999px 0 0;overflow:hidden;position:relative;
  aspect-ratio:3/4;
}
.arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 2.2s var(--ease)}
.hero-visual:hover .arch img{transform:scale(1.01)}
.arch-frame{
  position:absolute;inset:-14px -14px auto -14px;height:calc(100% + 14px);
  border:1px solid var(--gold);border-radius:999px 999px 0 0;pointer-events:none;
  transform:translate(12px,10px);opacity:.55;
}
.stamp{position:absolute;left:-72px;bottom:34px;width:132px;height:132px;z-index:3}
.stamp svg{width:100%;height:100%;animation:spin 26s linear infinite}
.stamp svg text{font:500 12.5px var(--sans);letter-spacing:.32em;fill:var(--gold-deep);text-transform:uppercase}
.stamp img{position:absolute;inset:0;margin:auto;width:54px;height:54px;object-fit:contain}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-meta{
  position:absolute;left:0;right:0;bottom:2.2rem;
  display:flex;justify-content:space-between;align-items:center;
  font:500 .66rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--body);
}
.hero-meta .scroll-hint{display:flex;align-items:center;gap:.8rem}
.scroll-hint i{font-style:normal;animation:bob 2.4s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.side-note{
  position:absolute;right:1.4rem;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font:500 .62rem/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-deep);opacity:.8;
}

/* ============ INTRO SPLIT ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,7rem);align-items:start}
.split .display{position:sticky;top:8rem}
.split-body{padding-top:.8rem;display:grid;gap:1.6rem}
.split-body p strong{color:var(--ink);font-weight:500}

/* ============ SERVICES MENU ============ */
.svc-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:clamp(2.5rem,5vw,4.5rem);flex-wrap:wrap}
.svc-list{border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:3.4rem 1fr auto 3.2rem;align-items:center;gap:clamp(1rem,2.5vw,2.5rem);
  padding:1.9rem .6rem;border-bottom:1px solid var(--line);position:relative;
  transition:background .45s var(--ease),padding .45s var(--ease);
}
.svc-row::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:var(--cream);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);z-index:-1}
.svc-row:hover::before{transform:scaleY(1)}
.svc-row:hover{padding-left:1.4rem}
.svc-num{font:400 .95rem var(--serif-it);font-style:italic;color:var(--gold-deep)}
.svc-name{font:400 clamp(1.5rem,2.8vw,2.3rem)/1.1 var(--serif);color:var(--ink);transition:color .3s}
.svc-row:hover .svc-name{color:var(--gold-deep)}
.svc-desc{font-size:.92rem;color:var(--body);max-width:34ch;text-align:right;line-height:1.6}
.svc-arrow{
  width:3rem;height:3rem;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:1rem;color:var(--ink);
  transition:all .45s var(--ease);
}
.svc-row:hover .svc-arrow{background:var(--gold);border-color:var(--gold);color:#fff;transform:rotate(45deg)}

/* ============ PHOTO BAND ============ */
.band{position:relative;height:clamp(420px,64vh,620px);overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:115%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(246,243,237,.94) 6%,rgba(246,243,237,.55) 42%,rgba(246,243,237,0) 75%)}
.band-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:1.4rem}
.band-title{font:400 clamp(2rem,4.4vw,3.6rem)/1.12 var(--serif);color:var(--ink);max-width:15ch}
.band p{max-width:44ch;color:#3d3a30}

/* ============ APPROACH ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(3rem,5vw,4.5rem)}
.step{border-top:1px solid var(--line);padding-top:1.6rem;position:relative}
.step-num{
  font:400 clamp(3.4rem,5.5vw,5rem)/1 var(--serif);
  color:transparent;-webkit-text-stroke:1px var(--gold);
  display:block;margin-bottom:1.1rem;
}
.step h3{font:400 1.5rem var(--serif);color:var(--ink);margin-bottom:.6rem}
.step p{font-size:.95rem;line-height:1.7}
.approach-note{
  margin-top:clamp(3rem,5vw,4.5rem);padding:2.2rem 0 0;border-top:1px solid var(--line);
  display:flex;gap:1.6rem;align-items:baseline;flex-wrap:wrap;
}
.approach-note p{font:500 clamp(1.2rem,2vw,1.6rem)/1.5 var(--serif-it);font-style:italic;color:var(--gold-deep);max-width:52ch}

/* ============ FEATURE (dinner) ============ */
.feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
.feature-visual{position:relative}
.feature-visual .offset-img{border-radius:2px;box-shadow:24px 24px 0 var(--sand)}
.feature-body{display:grid;gap:1.6rem;justify-items:start}
.feature-body .display{font-size:clamp(2.3rem,4.6vw,4rem)}

/* ============ ABOUT ============ */
.about-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.founder{position:relative;max-width:400px;justify-self:center;width:100%}
.founder .arch{aspect-ratio:4/5}
.founder-caption{
  position:absolute;left:50%;bottom:-1px;transform:translate(-50%,50%);
  background:rgba(247,247,244,.9);border:1px solid var(--line);padding:1.1rem 1.8rem;text-align:center;
  min-width:78%;
}
.founder-caption h3{font:400 1.35rem var(--serif);color:var(--ink)}
.founder-caption p{font:500 .64rem/1.6 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);margin-top:.4rem}
.about-body{display:grid;gap:1.5rem}
.about-body .display{font-size:clamp(2.1rem,4vw,3.4rem);margin-bottom:.6rem}
.about-body p{max-width:62ch}
.founder-note{
  margin-top:1rem;padding:1.4rem 1.6rem;border-left:2px solid var(--gold);
  font:500 1.05rem/1.65 var(--serif-it);font-style:italic;color:var(--gold-deep);
}

/* ============ MARQUEE ============ */
.marquee{border-block:1px solid var(--line);padding:1.35rem 0;overflow:hidden;background:var(--paper)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:mq 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font:400 1.3rem/1 var(--serif);color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:3rem}
.marquee-track span i{font:500 .8rem var(--serif-it);color:var(--gold);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ TESTIMONIAL ============ */
.testimonial{text-align:center;max-width:900px;margin-inline:auto;display:grid;gap:2.2rem;justify-items:center}
.quote-mark{font:400 7rem/0.4 var(--serif);color:var(--gold);height:2.6rem}
.testimonial blockquote{font:400 clamp(1.6rem,3.2vw,2.5rem)/1.4 var(--serif);color:var(--ink)}
.testimonial cite{font:500 .72rem/1.9 var(--sans);letter-spacing:.28em;text-transform:uppercase;font-style:normal;color:var(--body)}
.testimonial cite b{color:var(--gold-deep);font-weight:500}

/* ============ NOT LIST ============ */
.not-list{display:grid}
.not-row{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2rem;
  padding:2.1rem 0;border-bottom:1px solid var(--line);
}
.not-row:first-child{border-top:1px solid var(--line)}
.not-line{font:400 clamp(1.9rem,4.4vw,3.4rem)/1.1 var(--serif);color:var(--ink);position:relative;width:max-content;max-width:100%}
.not-line::after{
  content:"";position:absolute;left:-1%;top:54%;height:2px;width:0;background:var(--clay);
  transition:width 1.1s var(--ease) .25s;
}
.in .not-line::after{width:102%}
.not-note{font-style:italic;font-family:var(--serif-it);font-size:1.05rem;color:var(--gold-deep);text-align:right}

/* ============ FOOTER ============ */
.site-footer{border-top:1px solid var(--line);background:var(--cream)}
.footer-cta{padding:var(--pad) 0 clamp(3rem,5vw,4.5rem);display:grid;gap:2.6rem}
.footer-title{font:400 clamp(2.4rem,5.4vw,4.8rem)/1.1 var(--serif);color:var(--ink);max-width:16ch}
.contact-rows{border-top:1px solid var(--line)}
.contact-row{
  display:grid;grid-template-columns:10rem 1fr 3rem;align-items:center;gap:1.5rem;
  padding:1.5rem .4rem;border-bottom:1px solid var(--line);transition:padding .4s var(--ease),background .4s;
}
.contact-row:hover{background:rgba(164,135,96,.07);padding-left:1.2rem}
.cr-label{font:500 .66rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep)}
.cr-value{font:400 clamp(1.2rem,2.6vw,1.8rem)/1.2 var(--serif);color:var(--ink)}
.cr-arrow{justify-self:end;width:2.7rem;height:2.7rem;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:all .4s var(--ease)}
.contact-row:hover .cr-arrow{background:var(--gold);border-color:var(--gold);color:#fff;transform:rotate(45deg)}
.footer-base{
  border-top:1px solid var(--line);padding:2.4rem 0 2.8rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.footer-base img{width:40px;height:40px;object-fit:contain}
.footer-base p{font:500 .64rem/1.8 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--body)}
.footer-motto{color:var(--gold-deep)!important}

/* ============ SUBPAGE HERO ============ */
.page-hero{padding:11rem 0 clamp(3rem,6vw,5rem)}
.page-hero .crumbs{font:500 .66rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--body);margin-bottom:2rem;display:flex;gap:.9rem;align-items:center}
.crumbs a:hover{color:var(--gold-deep)}
.crumbs i{font-style:normal;color:var(--gold)}
.page-hero .display{font-size:clamp(2.8rem,6.4vw,5.6rem);max-width:14ch}
.page-hero .lede{margin-top:1.8rem}
.page-meta{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;gap:2.6rem;flex-wrap:wrap;
  font:500 .64rem/1.7 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--body);
}
.page-meta b{color:var(--gold-deep);font-weight:500}

/* two-col content block */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.duo.reverse>.duo-media{order:2}
.duo-media{position:relative}
.duo-media img{border-radius:2px}
.duo-media .arch{aspect-ratio:4/5}
.duo-body{display:grid;gap:1.4rem;justify-items:start}
.duo-body h2{font:400 clamp(1.9rem,3.4vw,2.9rem)/1.15 var(--serif);color:var(--ink)}

/* included list */
.inc-list{display:grid;border-top:1px solid var(--line);margin-top:.6rem}
.inc-item{display:grid;grid-template-columns:3rem 1fr;gap:1.2rem;padding:1.35rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.inc-item i{font:400 .95rem var(--serif-it);font-style:italic;color:var(--gold-deep)}
.inc-item p{color:var(--ink);font-weight:400}
.inc-item p small{display:block;color:var(--body);font-weight:300;font-size:.92rem;margin-top:.25rem}

/* CTA band mid-page */
.cta-band{
  border:1px solid var(--line);background:var(--cream);
  padding:clamp(2.5rem,5vw,4rem);display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
}
.cta-band h2{font:400 clamp(1.8rem,3.6vw,3rem)/1.15 var(--serif);color:var(--ink);max-width:20ch}

/* ============ MEDIA ============ */
.media-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
.media-card{position:relative;display:block;border:1px solid var(--line);overflow:hidden;background:var(--cream)}
.media-card .mc-img{aspect-ratio:4/3;overflow:hidden}
.media-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.media-card:hover img{transform:scale(1.05)}
.media-card .mc-body{padding:1.8rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--line)}
.media-card h3{font:400 1.7rem var(--serif);color:var(--ink)}
.media-card p{font-size:.9rem;margin-top:.3rem}
.mc-arrow{width:2.8rem;height:2.8rem;flex:none;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:all .4s var(--ease)}
.media-card:hover .mc-arrow{background:var(--gold);border-color:var(--gold);color:#fff;transform:rotate(45deg)}
.media-note{margin-top:2.6rem;display:flex;justify-content:center}

/* journey entries */
.j-entry{
  display:grid;grid-template-columns:6rem 1fr 1.1fr;gap:clamp(1.5rem,4vw,4rem);
  padding:2.6rem 0;border-bottom:1px solid var(--line);align-items:start;
}
.j-entry:first-of-type{border-top:1px solid var(--line)}
.j-num{font:400 clamp(2.2rem,4vw,3.4rem)/1 var(--serif);color:transparent;-webkit-text-stroke:1px var(--gold)}
.j-place h3{font:400 clamp(1.6rem,3vw,2.3rem)/1.15 var(--serif);color:var(--ink)}
.j-place p{font:500 .66rem/1.7 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);margin-top:.6rem}
.j-text{font-size:1rem;line-height:1.8}
.j-soon{font:500 1.05rem var(--serif-it);font-style:italic;color:var(--gold-deep)}

/* people groups */
.p-group{margin-bottom:clamp(3rem,6vw,5rem)}
.p-group-head{display:flex;align-items:baseline;gap:1.6rem;border-bottom:1px solid var(--line);padding-bottom:1.2rem;margin-bottom:0}
.p-group-head span{font:400 .95rem var(--serif-it);font-style:italic;color:var(--gold-deep)}
.p-group-head h2{font:400 clamp(1.7rem,3.2vw,2.6rem) var(--serif);color:var(--ink)}
.p-row{display:grid;grid-template-columns:1fr auto;gap:2rem;padding:1.6rem 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.p-row p{color:var(--body)}
.p-row .j-soon{font-size:.95rem}

/* gallery */
.gal-filters{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.6rem}
.gal-filters button{
  font:500 .68rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:.8rem 1.4rem;color:var(--body);
  transition:all .35s;
}
.gal-filters button.active,.gal-filters button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gal-grid{columns:3;column-gap:1.4rem}
.gal-item{break-inside:avoid;margin-bottom:1.4rem;overflow:hidden;border-radius:2px;position:relative}
.gal-item img{width:100%;transition:transform 1.4s var(--ease)}
.gal-item:hover img{transform:scale(1.04)}
.gal-item figcaption{
  position:absolute;inset:auto 0 0;padding:2rem 1.2rem .9rem;
  background:linear-gradient(transparent,rgba(41,39,31,.72));color:#fff;
  font:500 .64rem/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:all .5s var(--ease);
}
.gal-item:hover figcaption{opacity:1;transform:none}
.gal-item.hide{display:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .gal-grid{columns:2}
}
@media(max-width:920px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .hero{padding-top:7.5rem}
  .hero-grid,.split,.feature,.about-grid,.duo,.media-cards{grid-template-columns:1fr}
  .hero-visual{justify-self:center;margin-top:1rem;width:min(88vw,380px)}
  .stamp{left:auto;right:-14px;bottom:-24px;width:108px;height:108px}
  .split .display{position:static}
  .duo.reverse>.duo-media{order:0}
  .founder{margin-bottom:3rem}
  .svc-row{grid-template-columns:2.6rem 1fr 2.8rem;grid-template-areas:"num name arrow" "num desc arrow"}
  .svc-num{grid-area:num}.svc-name{grid-area:name}.svc-desc{grid-area:desc;text-align:left;margin-top:.4rem;max-width:none}.svc-arrow{grid-area:arrow}
  .j-entry{grid-template-columns:1fr;gap:.9rem}
  .side-note{display:none}
  .contact-row{grid-template-columns:1fr 2.6rem;grid-template-areas:"label arrow" "value arrow"}
  .cr-label{grid-area:label}.cr-value{grid-area:value}.cr-arrow{grid-area:arrow}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  .gal-grid{columns:1}
  .not-row{grid-template-columns:1fr;gap:.5rem}
  .not-note{text-align:left}
  .hero-meta{display:none}
}
@media(max-width:480px){
  .container{width:94vw}
  .site-nav{padding-inline:1rem}
  .brand{gap:.55rem}
  .brand-mark{width:36px;height:36px}
  .brand-word{font-size:.82rem;letter-spacing:.08em}
  .nav-toggle{padding:.75rem .5rem}
  .hero{padding-top:6.5rem}
  .hero-title{font-size:clamp(2.5rem,11vw,3.4rem)}
  .hero-sub{font-size:1rem}
  .hero-actions{gap:1.3rem}
  .page-hero{padding:8rem 0 clamp(2.2rem,6vw,3rem)}
  .page-hero .display{font-size:clamp(2.2rem,9vw,3rem)}
  .page-meta{gap:1.4rem}
  .btn{padding:.85rem 1.3rem;font-size:.66rem;letter-spacing:.18em}
  .cta-band{flex-direction:column;align-items:flex-start;padding:clamp(1.8rem,6vw,2.5rem)}
  .cta-band h2{font-size:clamp(1.5rem,6.5vw,2.1rem)}
  .media-card .mc-body{flex-wrap:wrap;gap:.8rem;padding:1.3rem}
  .media-card h3{font-size:1.35rem}
  .p-row{grid-template-columns:1fr;gap:.4rem}
  .p-row .j-soon{font-size:.85rem}
  .contact-row{grid-template-columns:1fr 2.2rem}
  .cr-value{font-size:1.15rem}
  .footer-base{justify-content:center;text-align:center}
  .svc-desc{font-size:.86rem}
  .founder-caption{padding:.9rem 1.1rem;min-width:88%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ============ MUSIC TOGGLE ============ */
.music-toggle{
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:900;
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(247,247,244,.18);
  background:rgba(37,36,32,.88);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.music-toggle:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 26px rgba(0,0,0,.24)}
.mt-bars{display:flex;align-items:flex-end;gap:3px;height:16px}
.mt-bars i{display:block;width:3px;border-radius:2px;background:var(--gold);height:5px;transition:height .25s ease}
.music-toggle.is-playing .mt-bars i{animation:mtBar 1s ease-in-out infinite}
.music-toggle.is-playing .mt-bars i:nth-child(1){animation-delay:-.6s}
.music-toggle.is-playing .mt-bars i:nth-child(2){animation-delay:-.3s}
.music-toggle.is-playing .mt-bars i:nth-child(3){animation-delay:0s}
@keyframes mtBar{
  0%,100%{height:5px}
  50%{height:16px}
}
@media(max-width:480px){
  .music-toggle{right:1.1rem;bottom:1.1rem;width:46px;height:46px}
}

/* ============ ENTRY GATE ============ */
.entry-gate{
  position:fixed;inset:0;z-index:2200;
  display:flex;align-items:center;justify-content:center;
  background-color:var(--paper);
  background-image:url("marble-white.jpg");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  animation:egIn .8s var(--ease);
}
.entry-gate::before{
  content:'';position:absolute;inset:0;background:rgba(37,36,32,.35);
}
.entry-gate.closing{animation:egOut .6s var(--ease) forwards}
@keyframes egIn{from{opacity:0}to{opacity:1}}
@keyframes egOut{from{opacity:1}to{opacity:0}}
.eg-inner{
  position:relative;z-index:1;text-align:center;color:var(--paper);
  display:flex;flex-direction:column;align-items:center;gap:1.3rem;
  padding:2rem;
}
.eg-logo{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.25))}
.eg-word{
  font:400 1.05rem/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);margin:0;
}
.eg-enter{color:var(--paper);border-color:var(--paper)}
.eg-enter:hover{background:var(--paper);color:var(--ink)}
.eg-skip{
  background:none;border:none;color:rgba(247,247,244,.75);
  font:400 .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;padding:.4rem;text-decoration:underline;text-underline-offset:4px;
  transition:color .3s var(--ease);
}
.eg-skip:hover{color:var(--paper)}
@media(max-width:480px){
  .eg-logo{width:52px;height:52px}
  .eg-word{font-size:.92rem;letter-spacing:.12em}
  .eg-inner{gap:1.1rem;padding:1.5rem}
}