/* ============================================================
   Hair by Christine Rene — design tokens
   ============================================================ */
:root {
  /* surfaces */
  --sd:   #0F1A24;
  --sdp:  #16222E;
  --sm:   #1D2B39;
  --sl:   #29394A;

  /* accent */
  --gold: #C79A5D;
  --glt:  #E4C08B;
  --gdk:  #A87F45;
  --gdim: rgba(199,154,93,0.14);

  /* text */
  --txt:  #F3EBDB;
  --tm:   rgba(243,235,219,0.64);
  --td:   rgba(243,235,219,0.36);

  --bdr:  rgba(199,154,93,0.18);
  --bdr2: rgba(199,154,93,0.32);

  /* rhythm */
  --radius: 10px;
  --radius-sm: 6px;
  --edge: clamp(1.5rem, 5.4vw, 6rem);
  --container: 1360px;
  --shadow: 0 24px 60px -24px rgba(0,0,0,0.55);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Reset & base
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Outfit',sans-serif;
  background:var(--sd);
  color:var(--txt);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6 { margin:0; font-weight:400; }
p { margin:0; }
ul { list-style:none; }
img { max-width:100%; }
a { color:inherit; }

::selection { background:var(--gold); color:var(--sd); }

:focus-visible {
  outline:2px solid var(--glt);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link {
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--gold); color:var(--sd);
  padding:.75rem 1.25rem; font-size:.75rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  border-radius:var(--radius-sm);
  transition:top .3s var(--ease);
}
.skip-link:focus { top:1rem; }

/* film-grain atmosphere */
.grain {
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* shared layout helpers */
.wrap { max-width:var(--container); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); }

.lbl {
  font-size:.58rem; font-weight:400; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.9rem; display:block;
}
.st {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.9rem,3.2vw,3.1rem);
  font-weight:300; line-height:1.12; color:var(--gold);
}
.st em { font-style:italic; color:var(--glt); }

/* ============================================================
   NAV
   ============================================================ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--edge);
  background:rgba(15,26,36,0.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--bdr);
  transition:box-shadow .4s var(--ease), padding .3s var(--ease), background .3s var(--ease);
}
nav.scrolled { padding-top:.75rem; padding-bottom:.75rem; box-shadow:0 12px 40px -12px rgba(0,0,0,0.5); }

.nl { font-family:'Cormorant Garamond',serif; font-size:1.32rem; font-weight:400; letter-spacing:.03em; color:var(--gold); text-decoration:none; }
.nl span { color:var(--txt); font-style:italic; }

.nls { display:flex; gap:2.4rem; align-items:center; }
.nls a {
  position:relative;
  font-size:.68rem; font-weight:300; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tm); text-decoration:none; padding-bottom:4px; transition:color .3s;
}
.nls a::after {
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--glt); transition:width .35s var(--ease);
}
.nls a:hover { color:var(--glt); }
.nls a:hover::after { width:100%; }
.nls a.active { color:var(--glt); }
.nls a.active::after { width:100%; }

.nb {
  font-size:.65rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold); border-radius:var(--radius-sm);
  padding:.6rem 1.5rem; text-decoration:none; transition:all .35s var(--ease);
}
.nb:hover { background:var(--gold); color:var(--sd); box-shadow:0 8px 24px -8px rgba(199,154,93,0.55); transform:translateY(-1px); }

.nav-toggle {
  display:none; width:40px; height:40px; border:1px solid var(--bdr); border-radius:var(--radius-sm);
  background:transparent; cursor:pointer; position:relative; z-index:210;
}
.nav-toggle span {
  position:absolute; left:10px; right:10px; height:1px; background:var(--gold);
  transition:transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease);
}
.nav-toggle span:nth-child(1) { top:15px; }
.nav-toggle span:nth-child(2) { top:20px; }
.nav-toggle span:nth-child(3) { top:25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top:20px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top:20px; transform:rotate(-45deg); }

.mobile-menu {
  position:fixed; inset:0; z-index:190;
  background:rgba(15,26,36,0.98); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2rem;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu a {
  font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:400;
  color:var(--txt); text-decoration:none; letter-spacing:.02em;
  opacity:0; transform:translateY(14px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.mobile-menu.open a { opacity:1; transform:translateY(0); }
.mobile-menu a:nth-child(1){transition-delay:.05s} .mobile-menu a:nth-child(2){transition-delay:.1s}
.mobile-menu a:nth-child(3){transition-delay:.15s} .mobile-menu a:nth-child(4){transition-delay:.2s}
.mobile-menu a:hover { color:var(--gold); }
.mobile-menu .nb { margin-top:.6rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero { height:100vh; min-height:640px; display:grid; grid-template-columns:52% 48%; overflow:hidden; }
.hl { position:relative; display:flex; flex-direction:column; justify-content:center; padding:0 4rem 0 var(--edge); background:var(--sd); }
.hl::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 18% 55%, rgba(199,154,93,0.08) 0%, transparent 62%);
  pointer-events:none;
}
.hbar {
  position:absolute; left:calc(var(--edge) - 1.4rem); top:50%; transform:translateY(-50%);
  width:2px; height:90px; background:linear-gradient(to bottom,transparent,var(--gold),transparent);
  opacity:0; animation:fadeIn 1s .8s ease forwards;
}
.seo-sub { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.he { font-size:.58rem; font-weight:300; letter-spacing:.38em; text-transform:uppercase; color:var(--gold); margin-bottom:1.3rem; opacity:0; animation:fadeUp .7s .15s var(--ease) forwards; }
.ht { font-family:'Cormorant Garamond',serif; font-size:clamp(2.9rem,5vw,5rem); font-weight:300; line-height:1.06; color:var(--gold); margin-bottom:1.6rem; opacity:0; animation:fadeUp .7s .3s var(--ease) forwards; text-shadow:0 0 46px rgba(199,154,93,.28); }
.ht em { font-style:italic; color:var(--glt); }
.hs { font-size:.9rem; font-weight:300; line-height:1.9; color:var(--tm); max-width:400px; margin-bottom:2.3rem; opacity:0; animation:fadeUp .7s .45s var(--ease) forwards; }
.hc { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; opacity:0; animation:fadeUp .7s .6s var(--ease) forwards; }

.bg {
  font-size:.65rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  background:var(--gold); color:var(--sd); padding:.95rem 2.1rem; text-decoration:none;
  display:inline-block; border-radius:var(--radius-sm); transition:background .3s, transform .3s var(--ease), box-shadow .3s;
}
.bg:hover { background:var(--glt); transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(199,154,93,0.6); }
.bg.magnetic { transition:background .3s, transform .15s ease-out, box-shadow .3s; }

.bgh {
  font-size:.65rem; font-weight:300; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tm); text-decoration:none; border-bottom:1px solid var(--bdr); padding-bottom:3px;
  transition:color .3s, border-color .3s;
}
.bgh:hover { color:var(--glt); border-color:var(--glt); }

.hr2 { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; overflow:hidden; }
.hp {
  overflow:hidden;
  clip-path:inset(0 0 0 100%);
  animation:wipeIn 1s var(--ease) forwards;
}
.hp:nth-child(1) { animation-delay:.15s; }
.hp:nth-child(2) { animation-delay:.38s; }
.hp:nth-child(3) { animation-delay:.52s; }
@keyframes wipeIn { to { clip-path:inset(0 0 0 0%); } }
.hp img { width:100%; height:100%; object-fit:cover; object-position:50% 12%; transition:transform 1s var(--ease); display:block; }
.hp:hover img { transform:scale(1.045); }
.hp.tall { grid-row:span 2; }
.hp.tall img { object-position:50% 35%; }
.hp:nth-child(2) img { object-position:50% 30%; }
.hp:nth-child(3) img { object-position:50% 30%; }

/* ============================================================
   MARQUEE
   ============================================================ */
.mbar { background:var(--gold); padding:.7rem 0; overflow:hidden; white-space:nowrap; }
.min { display:flex; align-items:center; width:max-content; animation:marquee 34s linear infinite; }
.mbar:hover .min { animation-play-state:paused; }
.mi, .md { display:flex; align-items:center; }
.mi { font-size:.58rem; font-weight:500; letter-spacing:.25em; text-transform:uppercase; color:var(--sd); padding:0 2.5rem; }
.md { width:5px; height:5px; background:var(--sd); opacity:.4; transform:rotate(45deg); flex-shrink:0; }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============================================================
   GALLERY STRIP
   ============================================================ */
.gs { background:var(--sd); padding:7rem 0 6rem; }
.gh { max-width:var(--container); margin:0 auto; padding:0 var(--edge); margin-bottom:3.2rem; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }
.gn { font-size:.76rem; font-weight:300; color:var(--td); line-height:1.9; max-width:240px; text-align:right; }

.strip-wrap { position:relative; }
.strip-wrap::before, .strip-wrap::after {
  content:''; position:absolute; top:0; bottom:1.5rem; width:var(--edge); z-index:4; pointer-events:none;
}
.strip-wrap::before { left:0; background:linear-gradient(to right, var(--sd), transparent); }
.strip-wrap::after { right:0; background:linear-gradient(to left, var(--sd), transparent); }

.scroll-hint {
  position:absolute; bottom:-2.4rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.6rem;
  font-size:.58rem; font-weight:300; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); transition:opacity .4s; pointer-events:none; z-index:5;
}
.scroll-hint.hidden { opacity:0; }
.scroll-hint svg { animation:nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%,100%{transform:translateX(0);} 50%{transform:translateX(6px);} }

.strip { display:flex; gap:3px; overflow-x:auto; padding:0 var(--edge) 1.5rem; scrollbar-width:none; cursor:grab; scroll-snap-type:x proximity; }
.strip:active { cursor:grabbing; }
.strip::-webkit-scrollbar { display:none; }
.si {
  flex:0 0 240px; height:340px; overflow:hidden; position:relative; scroll-snap-align:start;
  opacity:0; transform:translateY(28px); transition:opacity .5s ease, transform .5s ease;
  border-radius:var(--radius-sm); cursor:zoom-in;
}
.si.in-view { opacity:1; transform:translateY(0); }
.si img { width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; transition:transform .7s var(--ease); }
.si:hover img { transform:scale(1.06); }
.ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(15,26,36,.85) 0%,transparent 55%); opacity:0; transition:opacity .4s; display:flex; align-items:flex-end; padding:1rem 1.1rem; }
.si:hover .ov, .si:focus-within .ov { opacity:1; }
.ot { font-size:.55rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--glt); }
.si:nth-child(1){transition-delay:.04s} .si:nth-child(2){transition-delay:.08s} .si:nth-child(3){transition-delay:.12s}
.si:nth-child(4){transition-delay:.16s} .si:nth-child(5){transition-delay:.20s} .si:nth-child(6){transition-delay:.24s}
.si:nth-child(7){transition-delay:.28s} .si:nth-child(8){transition-delay:.32s} .si:nth-child(9){transition-delay:.36s}
.si:nth-child(10){transition-delay:.40s} .si:nth-child(11){transition-delay:.44s} .si:nth-child(12){transition-delay:.48s}
.si:nth-child(13){transition-delay:.52s} .si:nth-child(14){transition-delay:.56s} .si:nth-child(15){transition-delay:.60s}

/* ============================================================
   SERVICES
   ============================================================ */
.svcs { padding:7rem var(--edge); background:var(--sm); }
.svcs-inner { max-width:var(--container); margin:0 auto; }
.sh { text-align:center; margin-bottom:4.5rem; }
.sg { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--bdr); border-radius:var(--radius); overflow:hidden; }
.sc { background:var(--sm); padding:2.3rem 1.9rem; transition:background .3s; }
.sc:hover { background:var(--sl); }
.sicon { width:30px; height:30px; margin-bottom:1.2rem; color:var(--gold); }
.sicon svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.2; }
.snm { font-family:'Cormorant Garamond',serif; font-size:1.42rem; font-weight:400; color:var(--gold); margin-bottom:1.1rem; }
.sit li { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; font-size:.76rem; font-weight:300; color:var(--tm); padding:.46rem 0; border-bottom:1px solid var(--bdr); }
.sit li:last-child { border-bottom:none; }
.sp { font-family:'Cormorant Garamond',serif; font-size:1.02rem; font-weight:400; color:var(--gold); white-space:nowrap; }

/* ============================================================
   MOSAIC
   ============================================================ */
.mosaic { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2,300px); gap:3px; }
.mc { overflow:hidden; position:relative; background:var(--sdp); cursor:zoom-in; }
.mc img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .8s var(--ease); }
.mc:hover img { transform:scale(1.045); }
.mc.tall { grid-row:span 2; }
.mc.tall img { object-position:center 20%; }
.mc:nth-child(2) img { object-position:50% 45%; }
.mc:nth-child(3) img { object-position:50% 38%; }
.mc:nth-child(4) img { object-position:50% 62%; }
.mc:nth-child(5) img { object-position:50% 38%; }
.mt { position:absolute; bottom:1rem; left:1rem; font-size:.55rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--glt); opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.mc:hover .mt { opacity:1; transform:translateY(0); }

/* ============================================================
   ABOUT
   ============================================================ */
.about { padding:6.5rem var(--edge); display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; max-width:var(--container); margin:0 auto; background:var(--sdp); }
.about-imgs { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.about-imgs img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 20%; display:block; border-radius:var(--radius-sm); }
.about-imgs img:first-child { object-position:center 10%; }
.about-imgs img:last-child { object-position:center 8%; }

.at p { font-size:.9rem; font-weight:300; line-height:2; color:var(--tm); margin:1.3rem 0; }
.stats { display:flex; gap:2.4rem; margin-top:2.3rem; padding-top:1.9rem; border-top:1px solid var(--bdr); }
.sn { font-family:'Cormorant Garamond',serif; font-size:2.3rem; font-weight:300; color:var(--gold); display:block; line-height:1; margin-bottom:.35rem; }
.count { font-variant-numeric:tabular-nums; }
.sl2 { font-size:.58rem; font-weight:300; letter-spacing:.15em; text-transform:uppercase; color:var(--td); }

/* ============================================================
   BOOKING
   ============================================================ */
.bk { padding:7rem var(--edge); background:var(--sd); display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; max-width:var(--container); margin:0 auto; }
.bt p { font-size:.87rem; font-weight:300; line-height:2; color:var(--tm); margin:1.3rem 0 1.9rem; max-width:420px; }
.cl { display:flex; flex-direction:column; gap:.9rem; }
.ci { display:flex; align-items:center; gap:.9rem; font-size:.8rem; font-weight:300; color:var(--tm); }
.cd { width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.ci a { color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:color .3s, border-color .3s; }
.ci a:hover { color:var(--glt); border-color:var(--glt); }

.bf { background:var(--sm); padding:2.6rem; border-radius:var(--radius); border-top:2px solid var(--gold); box-shadow:var(--shadow); }
.ftt { font-family:'Cormorant Garamond',serif; font-size:1.65rem; font-weight:300; color:var(--gold); margin-bottom:.3rem; }
.fsb { font-size:.63rem; font-weight:300; letter-spacing:.12em; text-transform:uppercase; color:var(--td); margin-bottom:1.9rem; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fg { display:flex; flex-direction:column; gap:.38rem; margin-bottom:1rem; }
.fg label { font-size:.56rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.fg input, .fg select, .fg textarea {
  font-family:'Outfit',sans-serif; font-size:.84rem; font-weight:300; color:var(--txt);
  background:rgba(0,0,0,.28); border:1px solid var(--bdr); border-radius:var(--radius-sm);
  padding:.75rem .95rem; outline:none; width:100%; transition:border-color .3s, background .3s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color:var(--gold); background:rgba(0,0,0,.4); }
.fg input.invalid, .fg select.invalid, .fg textarea.invalid { border-color:#C4694E; }
.fg select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C79A5D' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center;
}
.fg select option { background:var(--sdp); }
.fg textarea { resize:vertical; min-height:84px; }
.fg .err { display:none; font-size:.68rem; color:#D98B76; margin-top:.3rem; letter-spacing:.02em; }
.fg.has-err .err { display:block; }

.fbn {
  width:100%; font-family:'Outfit',sans-serif; font-size:.65rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  background:var(--gold); color:var(--sd); border:none; border-radius:var(--radius-sm);
  padding:1rem; cursor:pointer; transition:background .3s, transform .3s var(--ease), box-shadow .3s; margin-top:.4rem;
}
.fbn:hover:not(:disabled) { background:var(--glt); transform:translateY(-1px); box-shadow:0 14px 30px -14px rgba(199,154,93,0.6); }
.fbn:disabled { opacity:.65; cursor:not-allowed; }

.sm2, .form-error {
  display:none; border-radius:var(--radius-sm); padding:.9rem; font-size:.78rem; text-align:center; margin-top:1rem;
}
.sm2 { background:var(--gdim); border:1px solid var(--gold); color:var(--glt); }
.form-error { background:rgba(196,105,78,0.12); border:1px solid rgba(196,105,78,0.4); color:#E6A996; }

/* ============================================================
   LOCAL SEO
   ============================================================ */
.seo-local { background:var(--sdp); padding:5.5rem var(--edge); text-align:center; }
.seo-inner { max-width:760px; margin:0 auto; }
.seo-inner .lbl { margin-bottom:.6rem; }
.seo-heading { margin:12px 0 26px; }
.seo-inner p { font-size:.87rem; font-weight:300; line-height:1.9; color:var(--tm); margin-bottom:1.1rem; }
.seo-inner p:last-child { margin-bottom:0; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:var(--sd); border-top:1px solid var(--bdr); padding:4.5rem var(--edge) 2.4rem; }
.ft { max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:4rem; padding-bottom:2.6rem; border-bottom:1px solid var(--bdr); }
.flo { font-family:'Cormorant Garamond',serif; font-size:1.55rem; font-weight:300; color:var(--gold); margin-bottom:.8rem; }
.flo span { color:var(--txt); font-style:italic; }
.ftg { font-size:.76rem; font-weight:300; color:var(--td); line-height:1.9; }
.fso { display:flex; gap:.7rem; margin-top:1.4rem; }
.sb { width:34px; height:34px; border:1px solid var(--bdr); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); text-decoration:none; transition:all .3s var(--ease); }
.sb svg { width:15px; height:15px; }
.sb:hover { background:var(--gold); color:var(--sd); border-color:var(--gold); transform:translateY(-2px); }
.fc { font-size:.55rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; }
.fl { display:flex; flex-direction:column; gap:.65rem; }
.fl a { font-size:.76rem; font-weight:300; color:var(--td); text-decoration:none; transition:color .3s; }
.fl a:hover { color:var(--glt); }
.fb { max-width:var(--container); margin:0 auto; padding-top:1.9rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.fc2 { font-size:.62rem; font-weight:300; color:var(--td); letter-spacing:.04em; }

.gr { height:1px; background:linear-gradient(to right,transparent,var(--gold),transparent); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position:fixed; inset:0; z-index:300;
  background:rgba(6,10,14,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s .35s;
}
.lightbox.open { opacity:1; visibility:visible; transition:opacity .35s var(--ease); }
.lb-img {
  max-width:88vw; max-height:82vh; object-fit:contain;
  border-radius:var(--radius-sm); box-shadow:var(--shadow);
  transform:scale(.96); transition:transform .35s var(--ease);
}
.lightbox.open .lb-img { transform:scale(1); }
.lb-caption {
  position:absolute; bottom:2.2rem; left:0; right:0; text-align:center;
  font-size:.62rem; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:var(--glt);
}
.lb-close, .lb-prev, .lb-next {
  position:absolute; background:rgba(255,255,255,.04); border:1px solid var(--bdr); color:var(--gold);
  cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:50%; line-height:1;
  transition:background .3s, color .3s, border-color .3s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background:var(--gold); color:var(--sd); border-color:var(--gold); }
.lb-close { top:1.6rem; right:1.6rem; width:42px; height:42px; font-size:1.5rem; }
.lb-prev, .lb-next { top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:1.9rem; }
.lb-prev { left:1.6rem; } .lb-next { right:1.6rem; }

/* ============================================================
   MOBILE STICKY CTA
   ============================================================ */
.mobile-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  display:none; gap:.75rem;
  background:rgba(15,26,36,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--bdr);
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.mobile-cta.show { transform:translateY(0); }
.mobile-cta a {
  flex:1; text-align:center; font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:.9rem; border-radius:var(--radius-sm); text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:.45rem;
}
.mobile-cta svg { width:14px; height:14px; flex-shrink:0; }
.mc-call { border:1px solid var(--bdr2); color:var(--glt); }
.mc-book { background:var(--gold); color:var(--sd); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.rev { opacity:0; transform:translateY(20px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.rev.vis { opacity:1; transform:translateY(0); }
.rev-fade { opacity:0; transition:opacity .9s var(--ease); }
.rev-fade.vis { opacity:1; }
.rev-left { opacity:0; transform:translateX(-24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rev-left.vis { opacity:1; transform:translateX(0); }
.rev-right { opacity:0; transform:translateX(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rev-right.vis { opacity:1; transform:translateX(0); }

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width: 1080px) {
  .hero { grid-template-columns:1fr; height:auto; min-height:0; }
  .hl { padding:8rem var(--edge) 3.5rem; }
  .hr2 { grid-template-columns:1fr 1fr; grid-template-rows:220px; }
  .hr2 .hp.tall { display:none; }
  .hbar { display:none; }

  .sg { grid-template-columns:1fr 1fr; }
  .mosaic { grid-template-columns:1fr 1fr; grid-template-rows:240px 240px 240px; }
  .mc.tall { grid-column:span 2; grid-row:span 1; height:280px; }

  .about, .bk { grid-template-columns:1fr; gap:3rem; }
  .about-imgs { max-width:420px; }

  .ft { grid-template-columns:1fr 1fr; }
  .ft > div:first-child { grid-column:span 2; }
}

/* ============================================================
   RESPONSIVE — mobile
   ============================================================ */
@media (max-width: 720px) {
  nav { padding:.9rem 1.4rem; }
  .nls { display:none; }
  .nav-toggle { display:block; }
  nav > .nb { display:none; }
  .mobile-cta { display:flex; }

  .lb-prev, .lb-next { width:38px; height:38px; font-size:1.5rem; }
  .lb-close { top:1rem; right:1rem; width:38px; height:38px; }
  .lb-prev { left:.6rem; } .lb-next { right:.6rem; }

  .hl { padding:7rem 1.4rem 3rem; }
  .ht { font-size:clamp(2.3rem, 9vw, 3rem); }
  .hr2 { grid-template-columns:1fr; grid-template-rows:none; }
  .hr2 .hp.tall { display:block; grid-row:auto; height:min(58vh, 440px); }
  .hr2 .hp.tall img { object-position:50% 22%; }
  .hr2 .hp:nth-child(2), .hr2 .hp:nth-child(3) { display:none; }

  .md { display:none; }
  .mi { padding:0 1.3rem; }

  .gh { flex-direction:column; align-items:flex-start; gap:1rem; }
  .gn { text-align:left; max-width:none; }

  .sg { grid-template-columns:1fr; }
  .mosaic { grid-template-columns:1fr; grid-template-rows:none; }
  .mc, .mc.tall { grid-column:auto; height:260px; }

  .about-imgs { max-width:none; }

  .frow { grid-template-columns:1fr; }

  .ft { grid-template-columns:1fr; gap:2.2rem; }
  .ft > div:first-child { grid-column:auto; }
  .fb { flex-direction:column; text-align:center; gap:.6rem; }
}