/* =========================================================================
   BLACK JACK BARBER SHOP — Vintage Dubai Barbershop system
   Espresso grounds · warm cream · brass accent · one cream rhythm section
   Type: Playfair Display (display serif) / Oswald (signage caps) / Manrope (body)
   ========================================================================= */

:root{
  /* color */
  --bg:        #14110E;   /* espresso near-black */
  --bg-2:      #1B1611;   /* raised panel */
  --bg-3:      #241D16;   /* card / hover */
  --cream:     #F1E4CC;   /* primary text on dark */
  --cream-dim: #C9BCA4;   /* secondary text on dark */
  --muted:     #9C8E78;   /* tertiary / captions */
  --gold:      #C9A24E;   /* brass accent */
  --gold-2:    #E3C57E;   /* lit gold / highlight */
  --wood:      #5A3A24;   /* walnut */
  --surface:   #F3E8D5;   /* cream section bg */
  --surface-2: #EADCC2;   /* cream panel */
  --ink:       #1A140D;   /* text on cream */
  --ink-dim:   #5E5141;   /* secondary text on cream */
  --line-d:    rgba(241,228,204,.13);  /* hairline on dark */
  --line-l:    rgba(26,20,13,.14);     /* hairline on cream */

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 72px);

  --f-display: "Playfair Display", Georgia, serif;
  --f-sign: "Oswald", "Arial Narrow", sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--bg); }

/* ---- shared layout ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ position:relative; padding-block:clamp(64px,10vw,128px); }
.section--cream{ background:var(--surface); color:var(--ink); }
.section--tight{ padding-block:clamp(40px,6vw,72px); }

/* ---- typographic atoms ---- */
.kicker{
  font-family:var(--f-sign);
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.85em;
}
.kicker::before{
  content:""; width:34px; height:1px; background:currentColor; opacity:.7;
}
.kicker--center::after{
  content:""; width:34px; height:1px; background:currentColor; opacity:.7;
}
.kicker--center{ justify-content:center; }

.h-display{
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.01em;
  font-size:clamp(2.4rem, 7vw, 5.1rem);
}
.h-2{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.01em;
  font-size:clamp(2rem, 4.4vw, 3.4rem);
}
.h-3{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.35rem,2.4vw,1.7rem);
  line-height:1.15;
}
.lede{
  font-size:clamp(1.05rem,1.5vw,1.22rem);
  color:var(--cream-dim);
  max-width:54ch;
  text-wrap:pretty;
}
.section--cream .lede{ color:var(--ink-dim); }
.serif-em{ font-style:italic; color:var(--gold-2); font-weight:500; }
.section--cream .serif-em{ color:var(--wood); }

/* ---- buttons ---- */
.btn{
  --bd:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--f-sign); font-weight:500; font-size:.86rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1.05em 1.7em; border:1px solid var(--bd);
  cursor:pointer; background:transparent; color:var(--cream);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:#1a1106; }
.btn--gold:hover{ background:var(--gold-2); border-color:var(--gold-2); }
.btn--ghost{ color:var(--cream); }
.btn--ghost:hover{ background:var(--cream); color:var(--bg); border-color:var(--cream); }
.section--cream .btn--ghost{ color:var(--ink); border-color:var(--ink); }
.section--cream .btn--ghost:hover{ background:var(--ink); color:var(--surface); }
.btn--sm{ padding:.78em 1.2em; font-size:.76rem; }
.btn .ic{ width:1.05em; height:1.05em; }

.linkarrow{
  font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.14em;
  font-size:.82rem; color:var(--gold); display:inline-flex; gap:.6em; align-items:center;
}
.linkarrow .ar{ transition:transform .3s var(--ease); }
.linkarrow:hover .ar{ transform:translateX(5px); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.topbar{
  background:#0E0B09;
  border-bottom:1px solid var(--line-d);
  font-family:var(--f-sign);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-dim);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:18px; }
.topbar .tb-item{ display:inline-flex; align-items:center; gap:.6em; white-space:nowrap; }
.topbar .tb-item .ic{ width:14px; height:14px; color:var(--gold); }
.topbar .tb-right{ display:flex; gap:26px; }
.topbar .tb-sep{ color:var(--gold); }
@media (max-width:760px){ .topbar .tb-hide{ display:none; } .topbar .wrap{ justify-content:center; } }

.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(20,17,14,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-d);
  transition:background .4s var(--ease), border-color .4s;
}
.nav.is-solid{ background:rgba(14,11,9,.96); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:24px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand img{ height:38px; width:auto; }
.brand .bt{ display:flex; flex-direction:column; line-height:1; }
.brand .bt b{ font-family:var(--f-display); font-weight:800; font-size:1.18rem; letter-spacing:.01em; color:var(--cream); }
.brand .bt span{ font-family:var(--f-sign); font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-top:5px; }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-family:var(--f-sign); font-weight:400; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim);
  position:relative; padding-block:6px; transition:color .25s; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }

.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid var(--line-d);
  background:transparent; cursor:pointer; position:relative; color:var(--cream);
}
.nav-toggle span{ position:absolute; left:50%; top:50%; width:20px; height:1.5px; background:currentColor; transform:translate(-50%,-50%); transition:.3s var(--ease); }
.nav-toggle span:nth-child(1){ transform:translate(-50%,-7px); }
.nav-toggle span:nth-child(3){ transform:translate(-50%,5px); }
.nav-toggle.is-open span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }

@media (max-width:980px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:block; }
}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:70; background:#0E0B09;
  transform:translateX(100%); transition:transform .45s var(--ease);
  display:flex; flex-direction:column; padding:26px var(--gut);
  visibility:hidden;
}
.drawer.is-open{ transform:translateX(0); visibility:visible; }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; min-height:48px; }
.drawer-links{ display:flex; flex-direction:column; gap:6px; margin-top:36px; }
.drawer-links a{
  font-family:var(--f-display); font-weight:700; font-size:2rem; color:var(--cream);
  padding-block:12px; border-bottom:1px solid var(--line-d); display:flex; justify-content:space-between; align-items:center;
}
.drawer-links a span{ font-family:var(--f-sign); font-size:.7rem; letter-spacing:.2em; color:var(--gold); }
.drawer-foot{ margin-top:auto; display:grid; gap:12px; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; min-height:clamp(620px, 94svh, 940px); display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,11,9,.62) 0%, rgba(14,11,9,.18) 32%, rgba(14,11,9,.72) 78%, rgba(14,11,9,.98) 100%),
    linear-gradient(90deg, rgba(14,11,9,.78) 0%, rgba(14,11,9,.22) 56%, rgba(14,11,9,0) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(48px,8vw,96px); padding-top:120px; }
.hero__est{ margin-bottom:24px; }
.hero h1{ margin:18px 0 0; max-width:16ch; }
.hero h1 .ln{ display:block; }
.hero__sub{ margin-top:26px; max-width:46ch; font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--cream-dim); text-wrap:pretty; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero__scroll{
  position:absolute; right:var(--gut); bottom:clamp(48px,8vw,96px); z-index:2;
  writing-mode:vertical-rl; font-family:var(--f-sign); text-transform:uppercase;
  letter-spacing:.3em; font-size:.66rem; color:var(--cream-dim); display:flex; align-items:center; gap:14px;
}
.hero__scroll::after{ content:""; width:1px; height:54px; background:linear-gradient(var(--gold),transparent); }
@media (max-width:760px){ .hero__scroll{ display:none; } }

/* rating chip */
.ratechip{ display:inline-flex; align-items:center; gap:12px; padding:9px 16px; border:1px solid var(--line-d); background:rgba(14,11,9,.5); }
.ratechip .stars{ color:var(--gold); letter-spacing:2px; font-size:.95rem; }
.ratechip .rt{ font-family:var(--f-sign); letter-spacing:.06em; font-size:.82rem; color:var(--cream); text-transform:uppercase; }
.ratechip .rt b{ color:var(--gold-2); font-weight:600; }

/* =========================================================================
   MARQUEE STRIP
   ========================================================================= */
.strip{ background:#0E0B09; border-block:1px solid var(--line-d); overflow:hidden; }
.marquee{ display:flex; gap:0; white-space:nowrap; animation:marq 38s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marquee .mq{ display:inline-flex; align-items:center; gap:26px; padding:18px 26px; }
.marquee .mq b{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:1.15rem; color:var(--cream); }
.marquee .dot{ width:6px; height:6px; background:var(--gold); border-radius:50%; }
@media (prefers-reduced-motion: reduce){ .marquee{ animation:none; } }

/* =========================================================================
   ABOUT / THE SHOP
   ========================================================================= */
.about-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,76px); align-items:center; }
.about-copy p{ margin-top:22px; color:var(--cream-dim); }
.about-copy .h-2{ margin-top:18px; }
.section--cream .about-copy p{ color:var(--ink-dim); }
.about-figs{ position:relative; }
.about-figs .fig-main{ aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line-l); }
.about-figs .fig-main img{ width:100%; height:100%; object-fit:cover; }
.about-figs .fig-badge{
  position:absolute; left:-22px; bottom:-26px; background:var(--bg); color:var(--cream);
  border:1px solid var(--gold); padding:20px 24px; text-align:center; max-width:200px;
}
.about-figs .fig-badge .n{ font-family:var(--f-display); font-weight:800; font-size:2.6rem; line-height:1; color:var(--gold-2); }
.about-figs .fig-badge .l{ font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.2em; font-size:.66rem; color:var(--cream-dim); margin-top:8px; }
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
  .about-figs{ order:-1; }
  .about-figs .fig-badge{ left:auto; right:14px; bottom:-22px; }
}

.stat-row{ display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:34px; padding-top:30px; border-top:1px solid var(--line-l); }
.stat{ display:flex; flex-direction:column; }
.stat .n{ font-family:var(--f-display); font-weight:800; font-size:2rem; line-height:1; color:var(--gold); }
.section--cream .stat .n{ color:var(--wood); }
.stat .l{ font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color:var(--muted); margin-top:9px; }

/* =========================================================================
   SERVICES
   ========================================================================= */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(34px,5vw,58px); }
.sec-head .hl{ max-width:30ch; }
.sec-head .hl .h-2{ margin-top:18px; }

.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-d); border:1px solid var(--line-d); }
.svc{ background:var(--bg); padding:clamp(26px,3vw,40px) clamp(24px,2.6vw,34px); position:relative; transition:background .4s var(--ease); min-height:260px; display:flex; flex-direction:column; }
.svc:hover{ background:var(--bg-3); }
.svc .num{ font-family:var(--f-sign); font-size:.72rem; letter-spacing:.2em; color:var(--gold); }
.svc h3{ font-family:var(--f-display); font-weight:700; font-size:1.5rem; margin-top:26px; }
.svc p{ color:var(--cream-dim); font-size:.96rem; margin-top:12px; }
.svc .tags{ margin-top:auto; padding-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
.svc .tag{ font-family:var(--f-sign); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-dim); border:1px solid var(--line-d); padding:5px 10px; }
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

.svc-note{ margin-top:24px; font-size:.86rem; color:var(--muted); display:flex; align-items:center; gap:10px; }
.svc-note .ic{ width:16px; height:16px; color:var(--gold); flex:none; }

/* =========================================================================
   GALLERY
   ========================================================================= */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; }
.gcell{ position:relative; overflow:hidden; cursor:pointer; background:var(--bg-2); border:1px solid var(--line-d); }
.gcell img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s; }
.gcell::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%, rgba(14,11,9,.7)); opacity:0; transition:opacity .4s; }
.gcell:hover img{ transform:scale(1.06); }
.gcell:hover::after{ opacity:1; }
.gcell .gx{ position:absolute; left:16px; bottom:14px; z-index:2; font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--cream); opacity:0; transform:translateY(8px); transition:.4s var(--ease); }
.gcell:hover .gx{ opacity:1; transform:translateY(0); }
.gcell .gplus{ position:absolute; right:14px; top:14px; z-index:2; width:30px; height:30px; border:1px solid var(--cream); color:var(--cream); display:grid; place-items:center; opacity:0; transition:.4s; }
.gcell:hover .gplus{ opacity:1; }
.g-w2{ grid-column:span 2; }
.g-h2{ grid-row:span 2; }
@media (max-width:860px){ .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; } .g-w2{ grid-column:span 2; } .g-h2{ grid-row:span 1; } }
@media (max-width:520px){ .gallery{ grid-auto-rows:140px; } .g-w2{ grid-column:span 1; } }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:120; background:rgba(8,6,5,.95); display:none; align-items:center; justify-content:center; padding:40px; }
.lb.is-open{ display:flex; }
.lb img{ max-width:min(92vw,1100px); max-height:86vh; object-fit:contain; border:1px solid var(--line-d); }
.lb__close,.lb__nav{ position:absolute; background:transparent; border:1px solid var(--line-d); color:var(--cream); cursor:pointer; display:grid; place-items:center; transition:.3s; }
.lb__close{ top:24px; right:24px; width:50px; height:50px; }
.lb__nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; }
.lb__nav.prev{ left:24px; } .lb__nav.next{ right:24px; }
.lb__close:hover,.lb__nav:hover{ background:var(--gold); color:var(--bg); border-color:var(--gold); }
.lb__cap{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; color:var(--cream-dim); }
@media (max-width:560px){ .lb__nav{ width:44px; height:44px; } .lb__nav.prev{ left:10px; } .lb__nav.next{ right:10px; } }

/* =========================================================================
   FEATURE / SPLIT BANNER
   ========================================================================= */
.feature{ position:relative; overflow:hidden; }
.feature__bg{ position:absolute; inset:0; z-index:0; }
.feature__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.feature__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,11,9,.95) 0%, rgba(14,11,9,.78) 42%, rgba(14,11,9,.35) 100%); }
.feature .wrap{ position:relative; z-index:2; }
.feature__card{ max-width:540px; }
.feature__card .h-2{ margin-top:18px; }
.feature__card p{ color:var(--cream-dim); margin-top:20px; }
.feature__card .hours{ margin-top:30px; display:grid; gap:2px; border:1px solid var(--line-d); }
.feature__card .hrow{ display:flex; justify-content:space-between; align-items:center; padding:13px 18px; background:rgba(14,11,9,.45); }
.feature__card .hrow span:first-child{ font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; color:var(--cream-dim); }
.feature__card .hrow span:last-child{ font-family:var(--f-body); color:var(--cream); font-weight:500; }
.feature__card .hrow .open{ color:var(--gold-2); }

/* =========================================================================
   REVIEW / QUOTE
   ========================================================================= */
.quote{ text-align:center; }
.quote .stars{ color:var(--gold); letter-spacing:5px; font-size:1.2rem; }
.quote blockquote{ font-family:var(--f-display); font-weight:600; font-style:italic; font-size:clamp(1.7rem,4vw,3rem); line-height:1.22; max-width:18ch; margin:26px auto 0; text-wrap:balance; }
.section--cream .quote blockquote{ color:var(--ink); }
.quote cite{ display:block; margin-top:26px; font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; color:var(--muted); font-style:normal; }

/* =========================================================================
   VISIT / CONTACT
   ========================================================================= */
.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); }
@media (max-width:920px){ .visit-grid{ grid-template-columns:1fr; gap:48px; } }

.info-block{ margin-top:30px; display:grid; gap:24px; }
.info-item{ display:flex; gap:18px; align-items:flex-start; padding-bottom:24px; border-bottom:1px solid var(--line-d); }
.info-item:last-child{ border-bottom:0; padding-bottom:0; }
.info-item .ic{ width:22px; height:22px; color:var(--gold); flex:none; margin-top:3px; }
.info-item .lab{ font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.18em; font-size:.68rem; color:var(--muted); }
.info-item .val{ font-size:1.08rem; color:var(--cream); margin-top:5px; }
.info-item .val a:hover{ color:var(--gold-2); }
.info-item .sub{ font-size:.85rem; color:var(--muted); margin-top:4px; }
.info-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.mapbox{ margin-top:30px; position:relative; aspect-ratio:16/10; border:1px solid var(--line-d); overflow:hidden; background:
   repeating-linear-gradient(45deg, #17120D 0 13px, #1B1610 13px 26px); }
.mapbox .grid-lines{ position:absolute; inset:0; background-image:linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg,var(--line-d) 1px, transparent 1px); background-size:46px 46px; opacity:.5; }
.mapbox .pin{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:10px; }
.mapbox .pin .dot{ width:18px; height:18px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 7px rgba(201,162,78,.22), 0 0 0 16px rgba(201,162,78,.1); }
.mapbox .pin .pl{ font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--cream); background:rgba(14,11,9,.7); padding:6px 12px; border:1px solid var(--line-d); }
.mapbox .tag{ position:absolute; left:14px; bottom:14px; font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.16em; font-size:.62rem; color:var(--muted); }

/* form */
.form-card{ background:var(--bg-2); border:1px solid var(--line-d); padding:clamp(26px,3.4vw,42px); }
.form-card .h-3{ margin-bottom:6px; }
.form-card .fc-sub{ color:var(--cream-dim); font-size:.92rem; margin-bottom:26px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color:var(--cream-dim); margin-bottom:9px; }
.field input, .field select, .field textarea{
  width:100%; background:#100D0A; border:1px solid var(--line-d); color:var(--cream);
  font-family:var(--f-body); font-size:1rem; padding:13px 15px; transition:border-color .25s, box-shadow .25s;
}
.field textarea{ resize:vertical; min-height:104px; }
.field input::placeholder, .field textarea::placeholder{ color:#6c6051; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,78,.16); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A24E' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:38px; }
.field.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .field.row2{ grid-template-columns:1fr; } }
.field.err input, .field.err select, .field.err textarea{ border-color:#C0593F; }
.field .msg{ font-size:.76rem; color:#D98363; margin-top:7px; display:none; }
.field.err .msg{ display:block; }
.form-actions{ margin-top:8px; }
.form-actions .btn{ width:100%; }
.form-note{ font-size:.78rem; color:var(--muted); margin-top:16px; text-align:center; }
.form-success{ display:none; text-align:center; padding:30px 10px; }
.form-success.show{ display:block; }
.form-success .tick{ width:62px; height:62px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; margin:0 auto 22px; color:var(--gold); }
.form-success h3{ font-family:var(--f-display); font-weight:700; font-size:1.7rem; }
.form-success p{ color:var(--cream-dim); margin-top:12px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{ background:#0E0B09; border-top:1px solid var(--line-d); padding-top:clamp(56px,7vw,84px); }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:54px; border-bottom:1px solid var(--line-d); }
.foot__brand img{ height:46px; margin-bottom:22px; }
.foot__brand p{ color:var(--cream-dim); max-width:34ch; font-size:.95rem; }
.foot__brand .socials{ display:flex; gap:12px; margin-top:24px; }
.foot__brand .socials a{ width:44px; height:44px; border:1px solid var(--line-d); display:grid; place-items:center; color:var(--cream-dim); transition:.3s; }
.foot__brand .socials a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.foot__col h4{ font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--gold); margin-bottom:20px; }
.foot__col a, .foot__col p{ display:block; color:var(--cream-dim); font-size:.95rem; margin-bottom:12px; transition:color .25s; }
.foot__col a:hover{ color:var(--cream); }
.foot__bot{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-block:26px; }
.foot__bot p{ font-size:.78rem; color:var(--muted); }
.foot__bot .disc{ max-width:60ch; }
@media (max-width:760px){ .foot__top{ grid-template-columns:1fr; gap:38px; } }

/* =========================================================================
   MOBILE BOTTOM ACTION BAR
   ========================================================================= */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:none; grid-template-columns:1fr 1fr 1fr;
  background:rgba(14,11,9,.97); backdrop-filter:blur(10px); border-top:1px solid var(--line-d);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.actionbar.show{ transform:translateY(0); }
.actionbar a{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 6px calc(11px + env(safe-area-inset-bottom)); font-family:var(--f-sign); text-transform:uppercase; letter-spacing:.1em; font-size:.62rem; color:var(--cream-dim); border-right:1px solid var(--line-d); }
.actionbar a:last-child{ border-right:0; }
.actionbar a .ic{ width:21px; height:21px; color:var(--gold); }
.actionbar a.primary{ background:var(--gold); color:#1a1106; }
.actionbar a.primary .ic{ color:#1a1106; }
@media (max-width:980px){ .actionbar{ display:grid; } body{ padding-bottom:64px; } }

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* divider ornament */
.ornament{ display:flex; align-items:center; justify-content:center; gap:16px; color:var(--gold); }
.ornament::before,.ornament::after{ content:""; height:1px; width:min(120px,18vw); background:linear-gradient(90deg,transparent,var(--gold)); }
.ornament::after{ background:linear-gradient(90deg,var(--gold),transparent); }
.ornament .di{ width:7px; height:7px; transform:rotate(45deg); border:1px solid var(--gold); }