/* ============================================================
   Titan: Watches — Deira City Centre, Dubai
   Technical precision-luxury system. Facts cited from /research.
   ============================================================ */

:root{
  --bg:#F5F1E8;          /* surface cream */
  --surface:#FBF8F1;     /* lifted surface */
  --ink:#14181f;         /* near-black navy */
  --primary:#1B2430;     /* navy */
  --primary-2:#0f141b;   /* deeper navy */
  --text:#1a1f27;
  --muted:#68717A;
  --gold:#BFA46A;        /* secondary */
  --gold-deep:#a98f54;
  --slate:#6B7C8F;       /* accent */
  --border:#DDD6C8;
  --border-ink:rgba(255,255,255,.14);
  --focus:#6B7C8F;
  --maxw:1240px;
  --gut:clamp(20px,5vw,64px);
  --r:4px;
  --shadow-sm:0 1px 2px rgba(20,24,31,.06), 0 1px 0 rgba(20,24,31,.03);
  --shadow:0 18px 48px -28px rgba(20,24,31,.45);
  --shadow-lg:0 40px 90px -40px rgba(15,20,27,.6);
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Space Grotesk", system-ui, sans-serif;
  --sans:"Inter", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}
h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.04; letter-spacing:-.02em; margin:0; color:var(--ink)}
p{margin:0}

/* ---------- shared bits ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold-deep); font-weight:500;
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); display:inline-block}
.eyebrow.center::after{content:""; width:26px; height:1px; background:var(--gold); display:inline-block}
.eyebrow.center{justify-content:center}
.tick-rule{
  height:14px; width:100%;
  background-image:repeating-linear-gradient(90deg,var(--border) 0 1px,transparent 1px 13px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.section{padding-block:clamp(64px,9vw,128px); position:relative}
.section-head{max-width:680px; margin-bottom:clamp(36px,5vw,60px)}
.section-head h2{font-size:clamp(30px,4.6vw,52px); margin-top:18px}
.section-head p{margin-top:18px; color:var(--muted); font-size:clamp(16px,1.6vw,19px)}

.btn{
  --bc:var(--primary); --bg2:var(--primary); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:14px 24px; border-radius:var(--r); font-weight:600; font-size:15px;
  letter-spacing:.01em; background:var(--bg2); color:var(--fg);
  border:1px solid var(--bc); transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn--gold{--bg2:var(--gold); --bc:var(--gold); --fg:var(--primary-2)}
.btn--gold:hover{--bg2:var(--gold-deep); --bc:var(--gold-deep)}
.btn--ghost{--bg2:transparent; --fg:var(--ink); --bc:var(--border)}
.btn--ghost:hover{--bg2:var(--ink); --fg:#fff; --bc:var(--ink)}
.btn--ghost-light{--bg2:transparent; --fg:#fff; --bc:rgba(255,255,255,.32)}
.btn--ghost-light:hover{--bg2:#fff; --fg:var(--primary-2); --bc:#fff}
.btn--sm{padding:10px 16px; font-size:13px}

/* ---------- top utility bar ---------- */
.topbar{
  background:var(--primary-2); color:#cfd6df; font-family:var(--mono);
  font-size:12px; letter-spacing:.05em;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; min-height:38px; gap:16px}
.topbar a{display:inline-flex; align-items:center; gap:.5em; transition:color .2s}
.topbar a:hover{color:var(--gold)}
.topbar .dot{color:var(--gold)}
.topbar .t-left{display:inline-flex; align-items:center; gap:.6em; opacity:.85}
@media (max-width:680px){ .topbar .t-left span.hide-sm{display:none} }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s, background .3s;
}
.nav.scrolled{box-shadow:0 10px 30px -20px rgba(20,24,31,.45); background:color-mix(in srgb,var(--bg) 94%, transparent)}
.nav .wrap{display:flex; align-items:center; gap:28px; min-height:74px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand img{width:42px; height:42px}
.brand .bt{display:flex; flex-direction:column; line-height:1}
.brand .bt b{font-family:var(--serif); font-weight:700; font-size:18px; letter-spacing:.01em; color:var(--ink)}
.brand .bt small{font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.navlinks{display:flex; align-items:center; gap:30px}
.navlinks a{font-size:14.5px; font-weight:500; color:var(--text); position:relative; padding:6px 0; transition:color .2s}
.navlinks a::after{content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--gold); transition:width .28s var(--ease)}
.navlinks a:hover{color:var(--ink)} .navlinks a:hover::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:12px}
.burger{display:none; width:44px; height:44px; border:1px solid var(--border); border-radius:var(--r); align-items:center; justify-content:center; flex-direction:column; gap:5px}
.burger span{width:20px; height:1.6px; background:var(--ink); transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

@media (max-width:980px){
  .navlinks, .nav-cta .btn{display:none}
  .burger{display:flex}
}
/* mobile menu */
.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:70;
  background:var(--primary); color:#eef1f5; transform:translateX(100%);
  transition:transform .42s var(--ease); display:flex; flex-direction:column;
  padding:90px 30px 40px; gap:6px; box-shadow:var(--shadow-lg);
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{font-family:var(--serif); font-size:24px; padding:14px 0; border-bottom:1px solid var(--border-ink); display:flex; justify-content:space-between; align-items:center}
.mobile-menu a .n{font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.1em}
.mobile-menu .mm-cta{margin-top:auto; display:flex; flex-direction:column; gap:12px}
.scrim{position:fixed; inset:0; background:rgba(10,13,18,.5); opacity:0; visibility:hidden; transition:.35s; z-index:65; backdrop-filter:blur(2px)}
.scrim.open{opacity:1; visibility:visible}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--primary-2); color:#eef1f5; overflow:hidden}
.hero::before{ /* faint gear/tick texture */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(120% 90% at 90% 10%, rgba(191,164,106,.16), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(107,124,143,.18), transparent 60%);
}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; padding-block:clamp(56px,8vw,104px)}
.hero-copy{max-width:560px}
.hero-copy .eyebrow{color:var(--gold)}
.hero-copy h1{color:#fff; font-size:clamp(40px,6.4vw,76px); margin-top:22px; letter-spacing:-.03em}
.hero-copy h1 em{font-style:normal; color:var(--gold); display:block}
.hero-copy .lede{margin-top:24px; color:#c4ccd6; font-size:clamp(16px,1.7vw,19px); max-width:46ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero-stats{display:flex; gap:30px; margin-top:42px; padding-top:30px; border-top:1px solid var(--border-ink); flex-wrap:wrap}
.hstat .v{font-family:var(--serif); font-size:30px; color:#fff; line-height:1; display:flex; align-items:baseline; gap:6px}
.hstat .v small{font-family:var(--mono); font-size:13px; color:var(--gold)}
.hstat .k{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#9aa4b1; margin-top:9px}

.hero-art{position:relative; justify-self:end; width:100%; max-width:480px}
.hero-frame{position:relative; border:1px solid rgba(191,164,106,.4); border-radius:6px; padding:12px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.hero-frame img{width:100%; height:clamp(380px,52vw,560px); object-fit:cover; border-radius:3px}
.hero-frame .cnr{position:absolute; width:16px; height:16px; border:1px solid var(--gold)}
.hero-frame .cnr.tl{top:-1px; left:-1px; border-right:0; border-bottom:0}
.hero-frame .cnr.tr{top:-1px; right:-1px; border-left:0; border-bottom:0}
.hero-frame .cnr.bl{bottom:-1px; left:-1px; border-right:0; border-top:0}
.hero-frame .cnr.br{bottom:-1px; right:-1px; border-left:0; border-top:0}
.hero-tag{
  position:absolute; left:-14px; bottom:34px; background:var(--gold); color:var(--primary-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 14px; border-radius:3px; font-weight:600; box-shadow:var(--shadow);
}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr; gap:40px}
  .hero-art{justify-self:stretch; max-width:none; order:-1}
  .hero-frame img{height:clamp(300px,70vw,420px)}
}

/* ---------- marquee trust strip ---------- */
.strip{background:var(--primary); color:#dfe4ea; border-block:1px solid var(--border-ink); overflow:hidden}
.strip .row{display:flex; gap:0; align-items:stretch; white-space:nowrap; animation:scrollx 38s linear infinite}
.strip:hover .row{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ .strip .row{animation:none; flex-wrap:wrap; white-space:normal; justify-content:center} }
.strip .item{display:inline-flex; align-items:center; gap:12px; padding:18px 34px; font-family:var(--mono); font-size:13px; letter-spacing:.08em}
.strip .item svg{flex:none}
.strip .sep{color:var(--gold); align-self:center}
@keyframes scrollx{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- collections / filter ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:38px}
.chip{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--border); border-radius:100px; color:var(--muted);
  background:var(--surface); transition:.25s var(--ease);
}
.chip:hover{border-color:var(--gold); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--primary); color:#fff; border-color:var(--primary)}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media (max-width:1040px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .grid{grid-template-columns:repeat(2,1fr); gap:14px} }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.card.hide{display:none}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold)}
.card .ph{position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card .tag{
  position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; background:rgba(20,24,31,.82); color:#fff; padding:5px 9px; border-radius:2px;
}
.card .body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1}
.card .body h3{font-size:19px; letter-spacing:-.01em}
.card .body p{font-size:13.5px; color:var(--muted); font-family:var(--mono); letter-spacing:.02em}
.card .ask{
  margin-top:14px; align-self:flex-start; font-size:13px; font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:.5em; border-bottom:1.5px solid var(--gold); padding-bottom:3px;
  transition:gap .25s var(--ease);
}
.card .ask:hover{gap:.9em}
.empty-note{grid-column:1/-1; text-align:center; color:var(--muted); font-family:var(--mono); font-size:13px; padding:40px 0; display:none}

/* ---------- gallery / counter ---------- */
.gallery{columns:3; column-gap:18px}
@media (max-width:900px){ .gallery{columns:2; column-gap:14px} }
@media (max-width:520px){ .gallery{columns:1} }
.gitem{
  break-inside:avoid; margin-bottom:18px; position:relative; border-radius:6px; overflow:hidden;
  border:1px solid var(--border); cursor:zoom-in; background:var(--primary);
}
.gitem img{width:100%; height:auto; transition:transform .7s var(--ease), opacity .5s}
.gitem:hover img{transform:scale(1.04)}
.gitem figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 16px 14px;
  background:linear-gradient(transparent, rgba(10,13,18,.82)); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); transition:.35s var(--ease);
}
.gitem:hover figcaption{opacity:1; transform:none}

/* lightbox */
.lb{position:fixed; inset:0; z-index:90; background:rgba(8,11,15,.94); display:none; align-items:center; justify-content:center; padding:28px; backdrop-filter:blur(4px)}
.lb.open{display:flex; animation:fade .3s}
@keyframes fade{from{opacity:0} to{opacity:1}}
.lb img{max-width:92vw; max-height:84vh; object-fit:contain; border-radius:4px; box-shadow:var(--shadow-lg)}
.lb-cap{position:absolute; bottom:24px; left:0; right:0; text-align:center; color:#cfd6df; font-family:var(--mono); font-size:12px; letter-spacing:.08em}
.lb-btn{position:absolute; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; transition:.25s; border:1px solid rgba(255,255,255,.18)}
.lb-btn:hover{background:var(--gold); color:var(--primary-2); border-color:var(--gold)}
.lb-close{top:22px; right:22px}
.lb-prev{left:22px; top:50%; transform:translateY(-50%)}
.lb-next{right:22px; top:50%; transform:translateY(-50%)}
@media (max-width:620px){ .lb-prev{left:10px} .lb-next{right:10px} .lb-btn{width:44px; height:44px} }

/* ---------- about ---------- */
.about{background:var(--surface); border-block:1px solid var(--border)}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr; gap:36px} }
.about-img{position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--border)}
.about-img img{width:100%; height:clamp(320px,46vw,520px); object-fit:cover}
.about-copy h2{font-size:clamp(28px,4vw,46px); margin-top:18px}
.about-copy p{margin-top:18px; color:var(--text); font-size:17px}
.about-copy p.muted{color:var(--muted); font-size:15.5px}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; padding-top:30px; border-top:1px solid var(--border)}
.fact .v{font-family:var(--serif); font-size:clamp(26px,3vw,36px); color:var(--ink); line-height:1}
.fact .v small{font-family:var(--mono); font-size:13px; color:var(--gold-deep)}
.fact .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:8px}
@media (max-width:520px){ .facts{grid-template-columns:1fr 1fr} }

/* banner strip */
.banner{position:relative; height:clamp(180px,28vw,300px); overflow:hidden; border-block:1px solid var(--border-ink)}
.banner img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.banner .ov{position:absolute; inset:0; background:linear-gradient(90deg,rgba(15,20,27,.78),rgba(15,20,27,.15)); display:flex; align-items:center}
.banner .ov .wrap{width:100%}
.banner blockquote{margin:0; max-width:560px; color:#fff; font-family:var(--serif); font-size:clamp(20px,2.6vw,32px); line-height:1.25; letter-spacing:-.01em}
.banner cite{display:block; margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--gold); font-style:normal}

/* ---------- services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:920px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .svc-grid{grid-template-columns:1fr} }
.svc{padding:30px 24px; background:var(--surface); border:1px solid var(--border); border-radius:6px; transition:.35s var(--ease)}
.svc:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--gold)}
.svc .ic{width:46px; height:46px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-deep); margin-bottom:20px}
.svc .num{font-family:var(--mono); font-size:11px; color:var(--gold-deep); letter-spacing:.16em; float:right}
.svc h3{font-size:20px; margin-bottom:10px}
.svc p{font-size:14.5px; color:var(--muted)}

/* ---------- visit ---------- */
.visit{background:var(--primary-2); color:#dfe4ea}
.visit .eyebrow{color:var(--gold)}
.visit h2{color:#fff}
.visit-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:start; margin-top:46px}
@media (max-width:860px){ .visit-grid{grid-template-columns:1fr} }
.info-list{display:flex; flex-direction:column; gap:2px}
.info{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--border-ink); align-items:flex-start}
.info .ic{flex:none; width:42px; height:42px; border:1px solid rgba(191,164,106,.45); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold)}
.info .k{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#9aa4b1}
.info .v{font-size:17px; color:#fff; margin-top:5px; line-height:1.45}
.info .v a:hover{color:var(--gold)}
.info .v small{display:block; color:#9aa4b1; font-size:13px; margin-top:4px; font-family:var(--mono)}
.map-ph{
  position:relative; border:1px solid var(--border-ink); border-radius:6px; overflow:hidden;
  min-height:340px; background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 14px, transparent 14px 28px),
    radial-gradient(120% 120% at 30% 20%, rgba(107,124,143,.22), transparent 60%),
    var(--primary);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:36px;
}
.map-ph .ring{width:64px; height:64px; border-radius:50%; border:1px dashed var(--gold); display:flex; align-items:center; justify-content:center; color:var(--gold)}
.map-ph .lab{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#aeb7c2}
.map-ph .addr{color:#fff; font-size:15px; max-width:320px}

/* ---------- enquiry form ---------- */
.enquire{background:var(--surface); border-top:1px solid var(--border)}
.form-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,72px); align-items:start}
@media (max-width:860px){ .form-grid{grid-template-columns:1fr; gap:36px} }
.form-aside h2{font-size:clamp(28px,4vw,46px); margin-top:18px}
.form-aside p{margin-top:18px; color:var(--muted)}
.form-aside .quick{margin-top:30px; display:flex; flex-direction:column; gap:12px}
.qrow{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--border); border-radius:6px; background:var(--bg); transition:.3s var(--ease)}
.qrow:hover{border-color:var(--gold); transform:translateX(4px)}
.qrow .ic{width:40px; height:40px; flex:none; border-radius:50%; background:var(--primary); color:var(--gold); display:flex; align-items:center; justify-content:center}
.qrow .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.qrow .v{font-weight:600; color:var(--ink); font-size:15.5px}

form.enq{background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:clamp(24px,4vw,40px); box-shadow:var(--shadow-sm)}
.field{margin-bottom:20px}
.field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px}
.field label .req{color:var(--gold-deep)}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--border); border-radius:var(--r);
  background:var(--surface); color:var(--text); font-family:var(--sans); font-size:15.5px; transition:.2s;
}
.field textarea{resize:vertical; min-height:110px}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(191,164,106,.2)}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:#c0473f; box-shadow:0 0 0 3px rgba(192,71,63,.14)}
.field .err{display:none; color:#c0473f; font-size:12.5px; margin-top:6px; font-family:var(--mono)}
.field.invalid .err{display:block}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:520px){ .two{grid-template-columns:1fr} }
.radio-row{display:flex; gap:10px; flex-wrap:wrap}
.radio-row label{
  flex:1; min-width:120px; cursor:pointer; display:flex; align-items:center; gap:9px; justify-content:center;
  padding:12px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface);
  font-family:var(--sans); font-size:14px; text-transform:none; letter-spacing:0; color:var(--text); margin:0; transition:.25s var(--ease);
}
.radio-row input{position:absolute; opacity:0; width:0; height:0}
.radio-row label:has(input:checked){border-color:var(--primary); background:var(--primary); color:#fff}
.radio-row label:hover{border-color:var(--gold)}
.form-success{display:none; text-align:center; padding:24px 8px}
.form-success.show{display:block; animation:fade .4s}
.form-success .check{width:66px; height:66px; margin:0 auto 20px; border-radius:50%; background:var(--primary); color:var(--gold); display:flex; align-items:center; justify-content:center}
.form-success h3{font-size:26px; margin-bottom:10px}
.form-success p{color:var(--muted)}
.consent{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:6px; line-height:1.5}

/* ---------- footer ---------- */
.footer{background:var(--primary-2); color:#aeb7c2; padding-top:clamp(56px,7vw,84px)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:48px}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }
.foot-brand img{width:48px; height:48px; margin-bottom:16px}
.foot-brand b{font-family:var(--serif); color:#fff; font-size:20px; display:block}
.foot-brand p{font-size:14px; margin-top:12px; max-width:34ch}
.fcol h4{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:500}
.fcol a, .fcol p{display:block; font-size:14.5px; padding:6px 0; color:#aeb7c2; transition:color .2s}
.fcol a:hover{color:#fff}
.socials{display:flex; gap:12px; margin-top:6px}
.socials a{width:42px; height:42px; border:1px solid var(--border-ink); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#aeb7c2; transition:.25s}
.socials a:hover{background:var(--gold); color:var(--primary-2); border-color:var(--gold); transform:translateY(-3px)}
.foot-bottom{border-top:1px solid var(--border-ink); padding:24px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em}
.foot-bottom .note{max-width:70ch; color:#7e8896; line-height:1.6}

/* ---------- mobile action bar ---------- */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  background:color-mix(in srgb,var(--primary-2) 96%, transparent); backdrop-filter:blur(10px);
  border-top:1px solid var(--border-ink); padding:8px; gap:8px;
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.6);
}
.actionbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; color:#dfe4ea; border-radius:var(--r); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; transition:.2s}
.actionbar a.primary{background:var(--gold); color:var(--primary-2)}
.actionbar a:active{transform:scale(.96)}
@media (max-width:980px){ .actionbar{display:flex} body{padding-bottom:70px} }

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

/* BytesGlue QA map patch */
.bg-map-embed{display:block!important;position:relative!important;width:100%!important;min-height:240px!important;border-radius:12px!important;overflow:hidden!important;background:#e9edf1!important;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset!important}
.bg-map-embed iframe{display:block!important;width:100%!important;min-height:260px!important;border:0!important}
.bg-map-embed + .bg-map-embed,
.bg-map-embed + .pin,
.bg-map-embed + .lbl,
.bg-map-embed + .corner-note,
.bg-map-embed + .placeholder,
.bg-map-embed + .center,
.bg-map-embed + [class*="map-note"],
.bg-map-embed + [class*="map-tag"]{display:none!important}
.map .placeholder .pin,.map-ph .pin,.map-pin,.map-marker,.map-ph__pin,.map-ph__pin .dot,.map-ph__pin .pin,.map-ph .mi{max-width:18px!important;max-height:18px!important;width:18px!important;height:18px!important;box-shadow:none!important}
.map .placeholder .pin svg,.map-ph .pin svg,.map-pin svg,.map-marker svg,.map-ph__pin svg,.map-ph .mi{width:12px!important;height:12px!important}
.map-note,.map-tag,[class*="map-note"],[class*="map-tag"]{display:none!important}