/* ============================================================
   SOCRAT ROAD STAR — v3  ·  inspired by summitlimo.ae bar
   Alternating near-black / warm-cream, Playfair Display + Inter,
   contained & centered, warm gold, motion-rich.
   ============================================================ */

:root{
  /* DARK sections (default) */
  --bg:    #0e0d0c;
  --bg-2:  #131210;
  --fg:    #f7f4ee;
  --muted: #c7c0b2;
  --gold:  #c8a061;
  --gold-2:#e3c485;
  --line:  rgba(243,239,231,.12);
  --line-2:rgba(243,239,231,.06);
  --card:  #17150f;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 52px);
  --sec: clamp(64px, 8vw, 120px);
  --ease: cubic-bezier(.2,.6,.2,1);
  --r: 4px;
}

/* "cream" sections now stay dark (site-wide cohesion with the cinematic
   homepage); they take a subtly different near-black tone so adjacent
   sections still read as distinct without the old light/template look. */
.cream{
  --bg:    #100e0c;
  --bg-2:  #15120f;
  --fg:    #f7f4ee;
  --muted: #c7c0b2;
  --gold:  #c8a061;
  --gold-2:#e3c485;
  --line:  rgba(243,239,231,.12);
  --line-2:rgba(243,239,231,.06);
  --card:  #1b1812;
  background:var(--bg); color:var(--fg);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.7; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  touch-action:manipulation; /* kill double-tap zoom + 300ms tap delay; keeps pinch-zoom */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; color:inherit; background:none; border:0; }
::selection{ background:var(--gold); color:#0e0d0c; }

/* keyboard focus (cursor:none on the atelier homepage does not affect outlines) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .frow:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:3px;
}
.blk--light :focus-visible, .blk--light-2 :focus-visible{ outline-color:#835f24; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec); position:relative; }
.center{ text-align:center; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.07; color:var(--fg); letter-spacing:.005em; }
.d1{ font-size:clamp(2.6rem,6vw,5rem); font-weight:500; line-height:1.02; }
.d2{ font-size:clamp(2rem,4vw,3.4rem); }
.d3{ font-size:clamp(1.5rem,2.3vw,2rem); }
.it{ font-style:italic; }
.gold{ color:var(--gold); }
p{ color:var(--muted); }
.lead{ font-size:clamp(1.02rem,1.25vw,1.16rem); line-height:1.7; color:var(--muted); }
.body-fg{ color:var(--fg); }

/* kicker (small gold uppercase label) */
.kick{ display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.kick--line{ position:relative; padding-top:18px; }
.kick--line::before{ content:""; position:absolute; top:0; left:0; width:42px; height:1px; background:var(--gold); }
.center .kick--line{ padding-top:0; }
.center .kick--line::before{ display:none; }

/* centered section header: kicker / serif title / gold rule / subhead */
.shead{ max-width:640px; margin-inline:auto; text-align:center; margin-bottom:clamp(40px,5vw,64px); }
.shead .kick{ margin-bottom:16px; }
.shead .rule{ width:46px; height:2px; background:var(--gold); margin:20px auto 0; transform:scaleX(0); transform-origin:center; transition:transform .9s var(--ease) .2s; }
.shead.in .rule{ transform:scaleX(1); }
.shead .lead{ margin-top:20px; }

/* pill badges */
.pills{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; }
.pill{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:9px 16px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; padding:1.05em 1.9em; border-radius:var(--r); border:1px solid transparent; transition:.35s var(--ease); white-space:nowrap; line-height:1; }
.btn svg{ width:15px; height:15px; }
.btn-gold{ background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#15110a; box-shadow:0 8px 26px -12px rgba(200,160,97,.7); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(200,160,97,.9); }
.btn-solid{ background:var(--fg); color:var(--bg); }
.btn-solid:hover{ background:var(--gold); color:#15110a; }
.btn-line{ border-color:var(--line); color:var(--fg); }
.btn-line:hover{ border-color:var(--gold); color:var(--gold); }
.btn-sm{ padding:.85em 1.4em; font-size:.7rem; }
.btn-block{ width:100%; }

.alink{ display:inline-flex; align-items:center; gap:.5em; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); transition:gap .3s var(--ease); }
.alink svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.alink:hover{ gap:.85em; } .alink:hover svg{ transform:translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.offer{ background:#080706; color:var(--muted); text-align:center; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; padding:9px 16px; border-bottom:1px solid var(--line-2); }
.offer b{ color:var(--gold); font-weight:600; }
.header{ position:sticky; top:0; z-index:90; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--pad); background:rgba(14,13,12,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); transition:padding .4s var(--ease), background .4s; }
.header.shrink{ padding-block:10px; background:rgba(10,9,8,.95); }
.header__logo img{ height:50px; width:auto; transition:height .4s var(--ease); }
.header.shrink .header__logo img{ height:42px; }
.nav{ display:flex; align-items:center; gap:30px; }
.nav__links{ display:flex; gap:28px; list-style:none; }
.nav__links a{ font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--fg); opacity:.82; position:relative; padding-block:5px; transition:.3s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .35s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current]{ opacity:1; color:var(--gold); }
/* nav links are uniform; no single highlighted item competing with the CTA */
.nav__links a.nav-hl{ color:inherit; opacity:.82; font-weight:500; }
.nav__links a.nav-hl::after{ background:var(--gold); }
.nav__links a:hover::after, .nav__links a[aria-current]::after{ width:100%; }
.burger{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:10px; min-width:44px; min-height:44px; z-index:120; }
.burger span{ width:24px; height:2px; background:var(--fg); transition:.35s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:clamp(580px,92vh,880px); display:flex; align-items:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img, .hero__bg video{ width:100%; height:100%; object-fit:cover; }
.hero__bg img{ object-position:center 58%; filter:brightness(.5) contrast(1.04) saturate(.92); animation:slowzoom 22s var(--ease) forwards; }
.hero__vid{ display:none; filter:brightness(.55) contrast(1.03) saturate(1.04); }
@keyframes slowzoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(14,13,12,.92) 0%,rgba(14,13,12,.55) 45%,rgba(14,13,12,.25) 100%),
             linear-gradient(180deg,transparent 55%,rgba(14,13,12,.85) 100%); }
.hero__in{ position:relative; z-index:2; max-width:720px; }
.hero h1{ margin-top:0; }
.hero .lead{ margin-top:24px; max-width:540px; }
.hero__lead{ color:#fff; font-weight:400; }
.hero__cta{ margin-top:36px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
/* prominent primary CTA */
.btn-lg{ padding:1.25em 2.7em; font-size:.82rem; letter-spacing:.16em; }
.pulse{ position:relative; animation:ctaGlow 2.8s ease-in-out infinite; }
@keyframes ctaGlow{ 0%,100%{ box-shadow:0 8px 26px -12px rgba(200,160,97,.7); } 50%{ box-shadow:0 10px 34px -8px rgba(200,160,97,1); } }

/* page hero (subpages) */
.phero{ position:relative; min-height:clamp(320px,46vh,460px); display:flex; align-items:center; overflow:hidden; }
.phero .hero__in{ text-align:center; margin-inline:auto; }
.crumbs{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.crumbs a:hover{ color:var(--gold); }

/* ============================================================
   STRIP
   ============================================================ */
.strip{ border-bottom:1px solid var(--line); background:var(--bg-2); }
.strip__row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px 0; padding-block:24px; }
.strip__i{ display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--fg); opacity:.92; padding:0 clamp(20px,3vw,40px); position:relative; }
.strip__i:not(:last-child)::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:18px; background:var(--line); }
.strip__i svg{ width:18px; height:18px; color:var(--gold); flex:none; }

/* ============================================================
   FLEET CARDS (with image carousel)
   ============================================================ */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,28px); }
.car{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:.4s var(--ease); }
.car:hover{ transform:translateY(-5px); box-shadow:0 28px 50px -28px rgba(0,0,0,.45); border-color:color-mix(in srgb,var(--gold) 50%, transparent); }
.car__slider{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#0c0b0a; }
.car__slides{ display:flex; height:100%; transition:transform .7s var(--ease); }
.car__slides img{ min-width:100%; height:100%; object-fit:cover; }
.car__dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:7px; z-index:3; }
.car__dots b{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); transition:.3s; cursor:pointer; }
.car__dots b.on{ background:#fff; width:18px; border-radius:3px; }
.car__price{ position:absolute; top:12px; right:12px; z-index:3; background:rgba(10,9,8,.72); backdrop-filter:blur(6px); border:1px solid rgba(200,160,97,.45); border-radius:99px; padding:6px 13px; font-size:.78rem; font-weight:600; color:var(--gold-2); }
.car__price span{ color:rgba(255,255,255,.6); font-weight:400; font-size:.68rem; }
.car__b{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.car__name{ font-size:1.5rem; }
.car__tag{ font-family:var(--serif); font-style:italic; color:var(--gold); font-size:1.04rem; margin-top:2px; }
.car__specs{ display:flex; gap:18px; margin:16px 0 20px; padding-top:16px; border-top:1px solid var(--line-2); }
.car__sp{ display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--fg); opacity:.85; }
.car__sp svg{ width:15px; height:15px; color:var(--gold); flex:none; }
.car__cta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ============================================================
   FEATURE GRID (hairline)
   ============================================================ */
.feat{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.feat__c{ padding:clamp(28px,3vw,42px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feat__c:nth-child(3n){ border-right:0; }
.feat__c:nth-last-child(-n+3){ border-bottom:0; }
.feat__ic{ width:36px; height:36px; color:var(--gold); margin-bottom:18px; }
.feat__ic svg{ width:100%; height:100%; }
.feat__c h3{ font-size:1.3rem; }
.feat__c p{ margin-top:10px; font-size:.92rem; }
.feat__c.is-accent{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.feat__c.is-accent .big{ font-family:var(--serif); font-style:italic; font-size:1.7rem; color:var(--gold); }
a.feat__c{ display:block; transition:background .3s var(--ease); }
a.feat__c:hover{ background:var(--card); }
a.feat__c:hover h3{ color:var(--gold); }
a.feat__c h3{ transition:color .3s; }

/* ============================================================
   SPLIT (image + text)
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.split.rev .split__media{ order:2; }
.split__text p{ margin-top:18px; }
.split__stats{ display:flex; gap:38px; margin-top:30px; flex-wrap:wrap; }
.stat .n{ font-family:var(--serif); font-size:2.4rem; line-height:1; color:var(--gold); }
.stat .l{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.split__media{ position:relative; }
.split__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r); }
.split__media .badge{ position:absolute; left:-1px; bottom:26px; background:var(--bg); border:1px solid var(--line); border-left:2px solid var(--gold); padding:12px 18px; font-size:.74rem; letter-spacing:.08em; color:var(--fg); }

/* ============================================================
   BANDS (full-bleed image CTA, parallax)
   ============================================================ */
.band{ position:relative; overflow:hidden; }
.band__bg{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.band__bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.4) saturate(.92); }
.band__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,13,12,.85),rgba(14,13,12,.45)); }
.band__in{ position:relative; z-index:2; max-width:600px; }
.band--center .band__in{ max-width:640px; margin-inline:auto; text-align:center; }
.band__in p{ margin-top:16px; }
.band__in .btn{ margin-top:28px; }

/* ============================================================
   TESTIMONIAL / QUOTE CARDS
   ============================================================ */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); }
.quote{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; position:relative; }
.quote__stars{ color:var(--gold); letter-spacing:3px; font-size:.85rem; }
.quote__t{ font-family:var(--serif); font-style:italic; font-size:1.08rem; line-height:1.6; color:var(--fg); margin-top:16px; }
.quote__a{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2); }
.quote__av{ width:40px; height:40px; border-radius:50%; background:var(--bg-2); display:flex; align-items:center; justify-content:center; font-size:.78rem; letter-spacing:.05em; color:var(--gold); }
.quote__n{ font-weight:600; font-size:.92rem; color:var(--fg); }
.quote__r{ font-size:.78rem; color:var(--muted); }

/* ============================================================
   PRICING (non-table)
   ============================================================ */
.plist{ max-width:820px; margin-inline:auto; }
.prow{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 6px; border-bottom:1px solid var(--line); transition:.35s var(--ease); }
.prow:first-child{ border-top:1px solid var(--line); }
.prow:hover{ padding-inline:16px; }
.prow__n{ font-family:var(--serif); font-size:1.45rem; color:var(--fg); }
.prow__m{ font-size:.8rem; color:var(--muted); margin-top:3px; }
.prow__a .v{ font-family:var(--serif); font-size:1.9rem; color:var(--gold); }
.prow__a .u{ display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:right; }
.pinfo{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:clamp(40px,4vw,56px); }
.pinfo__c{ background:var(--bg); padding:clamp(24px,2.6vw,34px); }
.pinfo__c h4{ font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.pinfo__c p{ margin-top:12px; font-size:.92rem; line-height:1.75; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,4vw,60px); }
.cinfo .row{ display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.cinfo .row:first-child{ border-top:1px solid var(--line); }
.cinfo .ic{ width:20px; height:20px; color:var(--gold); flex:none; margin-top:3px; }
.cinfo .k{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.cinfo .v{ font-size:1rem; color:var(--fg); margin-top:3px; }
.cinfo .v a:hover{ color:var(--gold); }
.cmap{ margin-top:22px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.cmap iframe{ width:100%; height:220px; border:0; display:block; }
.form{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,2.8vw,38px); }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); color:var(--fg); font-family:var(--sans); font-size:.95rem; padding:12px 14px; transition:border-color .3s; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field select{ appearance:none; }
.field textarea{ resize:vertical; min-height:100px; }
.fnote{ font-size:.76rem; color:var(--muted); margin-top:12px; }
.fmsg{ display:none; margin-top:16px; padding:13px 16px; border:1px solid var(--gold); border-radius:var(--r); color:var(--gold); font-size:.88rem; }
.fmsg.show{ display:block; }

/* ============================================================
   ARTICLE prose
   ============================================================ */
.prose{ max-width:720px; margin-inline:auto; }
.prose p{ margin-top:18px; font-size:1.04rem; line-height:1.85; }
.prose h2{ font-size:1.7rem; margin-top:38px; }
.prose ul{ margin-top:16px; padding-left:20px; } .prose li{ margin-top:8px; color:var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding-block:clamp(52px,5vw,76px) 32px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer__logo img{ height:58px; margin-bottom:18px; }
.footer__about{ font-size:.88rem; max-width:300px; color:var(--muted); }
.footer__col h5{ font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer__col a, .footer__col li{ font-size:.88rem; color:var(--muted); transition:color .3s; }
.footer__col a:hover{ color:var(--fg); }
.footer__bot{ margin-top:clamp(38px,4vw,56px); padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--muted); }

/* ============================================================
   PREMIUM TOUCHES + ANIMATIONS
   ============================================================ */
.split__media{ overflow:hidden; }
.split__media img{ transition:transform 1.3s var(--ease); }
.split__media:hover img{ transform:scale(1.05); }
.btn-gold{ position:relative; overflow:hidden; }
.btn-gold::after{ content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transition:left .7s var(--ease); pointer-events:none; }
.btn-gold:hover::after{ left:150%; }
.car__name{ transition:color .3s; }
.car:hover .car__name{ color:var(--gold); }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.rv1{ transition-delay:.08s; } .rv2{ transition-delay:.16s; } .rv3{ transition-delay:.24s; } .rv4{ transition-delay:.32s; } .rv5{ transition-delay:.4s; }
@media (prefers-reduced-motion:reduce){ .reveal,.shead .rule{ opacity:1!important; transform:none!important; transition:none!important; } .hero__bg img{ animation:none; } *{ scroll-behavior:auto!important; } }

/* ============================================================
   CONCIERGE LAUNCHER (FAB) + proactive nudge
   ============================================================ */
.float{ position:fixed; right:22px; bottom:22px; z-index:320; opacity:0; transform:translateY(22px) scale(.9);
  animation:fabIn .7s var(--ease) .9s forwards; }
.menu-open .float{ opacity:0!important; pointer-events:none; transform:translateY(22px) scale(.9)!important; }
@keyframes fabIn{ to{ opacity:1; transform:none; } }
.fab{ position:relative; display:flex; align-items:center; justify-content:center; width:62px; height:62px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(140deg,var(--gold-2),var(--gold)); color:#15110a;
  box-shadow:0 16px 36px -10px rgba(0,0,0,.55), 0 5px 16px -4px rgba(200,160,97,.55);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.fab:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 22px 46px -10px rgba(0,0,0,.6), 0 9px 22px -4px rgba(200,160,97,.7); }
.fab:active{ transform:scale(.97); }
.fab__ic{ position:absolute; width:27px; height:27px; transition:opacity .3s var(--ease), transform .4s var(--ease); }
.fab__ic--close{ opacity:0; transform:rotate(-90deg) scale(.5); }
.cc-open .fab__ic--chat{ opacity:0; transform:rotate(90deg) scale(.5); }
.cc-open .fab__ic--close{ opacity:1; transform:none; }
.fab__dot{ position:absolute; top:12px; right:12px; width:12px; height:12px; border-radius:50%; background:#34d27b; border:2.5px solid #b8893f; animation:ccPresence 2.6s ease-out infinite; }
.cc-open .fab__dot{ display:none; }
@keyframes ccPresence{ 0%{ box-shadow:0 0 0 0 rgba(52,210,123,.55);} 70%{ box-shadow:0 0 0 7px rgba(52,210,123,0);} 100%{ box-shadow:0 0 0 0 rgba(52,210,123,0);} }
.fab__ring{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(200,160,97,.45); animation:fabPulse 3.4s ease-out infinite; pointer-events:none; }
.cc-open .fab__ring{ animation:none; }
@keyframes fabPulse{ 0%{ box-shadow:0 0 0 0 rgba(200,160,97,.4);} 70%{ box-shadow:0 0 0 15px rgba(200,160,97,0);} 100%{ box-shadow:0 0 0 0 rgba(200,160,97,0);} }
.cc__nudge{ position:absolute; right:4px; bottom:76px; width:max-content; max-width:232px; background:#fff; color:#1a1814;
  border-radius:14px 14px 4px 14px; padding:12px 32px 12px 15px; box-shadow:0 18px 44px -14px rgba(0,0,0,.45);
  opacity:0; transform:translateY(10px) scale(.95); transform-origin:bottom right; transition:opacity .4s var(--ease), transform .4s var(--ease); pointer-events:none; }
.cc__nudge.show{ opacity:1; transform:none; pointer-events:auto; }
.cc__nudge p{ margin:0; font-size:.85rem; line-height:1.45; color:#1a1814; cursor:pointer; }
.cc__nudge-x{ position:absolute; top:4px; right:7px; width:22px; height:22px; padding:0; border:0; background:none; color:#9a948a; font-size:18px; line-height:1; cursor:pointer; }
.cc__nudge-x:hover{ color:#1a1814; }
@media (prefers-reduced-motion:reduce){ .float{ animation:none; opacity:1; transform:none; } .fab__ring,.fab__dot{ animation:none; } .cc__nudge{ transition:opacity .2s; transform:none; } }
/* mobile: bigger, more present launcher; anchored above the iOS home bar so it stays put while scrolling */
@media (max-width:560px){
  .float{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); }
  .fab{ width:66px; height:66px; box-shadow:0 18px 40px -10px rgba(0,0,0,.6), 0 6px 18px -4px rgba(200,160,97,.65); }
  .fab__ic{ width:29px; height:29px; }
  .fab__dot{ top:13px; right:13px; width:13px; height:13px; }
}

/* mobile nav close X (injected) */
.nav-x{ position:absolute; top:20px; right:22px; width:44px; height:44px; display:none; align-items:center; justify-content:center; color:#fff; background:none; border:0; cursor:pointer; }
.nav-x svg{ width:28px; height:28px; }
.nav.open .nav-x{ display:flex; }

/* ============================================================
   CONCIERGE PANEL (chat) — opens from the launcher
   ============================================================ */
.cc{ position:fixed; inset:0; z-index:300; display:none; }
.cc.open{ display:block; }
.cc__backdrop{ position:absolute; inset:0; background:transparent; }
.cc__panel{ position:absolute; right:22px; bottom:98px; width:380px; max-width:calc(100vw - 32px); height:min(560px,72vh);
  display:flex; flex-direction:column; overflow:hidden; background:#15120e; border:1px solid rgba(243,239,231,.13);
  border-radius:18px; box-shadow:0 34px 80px -24px rgba(0,0,0,.7); transform:translateY(20px) scale(.96); opacity:0; transform-origin:bottom right;
  transition:transform .42s var(--ease), opacity .42s var(--ease); }
.cc.open .cc__panel{ transform:none; opacity:1; }
.cc__head{ flex:none; display:flex; align-items:center; gap:12px; padding:15px 14px 14px;
  background:linear-gradient(180deg,rgba(200,160,97,.16),rgba(200,160,97,0)); border-bottom:1px solid rgba(243,239,231,.1); }
.cc__avatar{ position:relative; flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1rem; letter-spacing:.03em; color:#15110a; background:linear-gradient(140deg,var(--gold-2),var(--gold)); }
.cc__avatar .cc__dot{ position:absolute; bottom:1px; right:1px; width:11px; height:11px; border-radius:50%; background:#34d27b; border:2px solid #15120e; }
.cc__id{ display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0; }
.cc__id b{ font-family:var(--sans); font-weight:600; font-size:.94rem; color:#f7f4ee; }
.cc__id i{ font-style:normal; font-size:.74rem; color:#a59f93; }
.cc__x{ flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:0; background:none; color:#a59f93; cursor:pointer; border-radius:9px; transition:color .3s,background .3s; }
.cc__x:hover{ color:#f7f4ee; background:rgba(243,239,231,.08); } .cc__x svg{ width:20px; height:20px; }
.cc__body{ flex:1; overflow-y:auto; padding:18px 15px; display:flex; flex-direction:column; gap:10px;
  background:radial-gradient(130% 55% at 50% 0%, rgba(200,160,97,.05), transparent 60%); }
.cc__msg{ max-width:85%; padding:11px 14px; font-size:.9rem; line-height:1.5; border-radius:16px; animation:ccIn .35s var(--ease); }
@keyframes ccIn{ from{ opacity:0; transform:translateY(8px); } }
.cc__msg--bot{ align-self:flex-start; background:#231e16; color:#ece7db; border:1px solid rgba(243,239,231,.08); border-bottom-left-radius:5px; }
.cc__msg--user{ align-self:flex-end; background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#15110a; font-weight:500; border-bottom-right-radius:5px; }
.cc__msg--bot a{ color:var(--gold-2); font-weight:600; } .cc__msg--bot a:hover{ color:var(--gold); }
.cc__msg--user a{ color:#15110a; text-decoration:underline; }
.cc__typing{ display:flex; gap:5px; align-items:center; }
.cc__typing span{ width:7px; height:7px; border-radius:50%; background:#8c8576; animation:ccDot 1.1s infinite; }
.cc__typing span:nth-child(2){ animation-delay:.16s; } .cc__typing span:nth-child(3){ animation-delay:.32s; }
@keyframes ccDot{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }
.cc__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.cc__chip{ font-family:var(--sans); font-size:.82rem; color:#ece7db; background:rgba(243,239,231,.04); border:1px solid rgba(200,160,97,.4); border-radius:20px; padding:8px 14px; cursor:pointer; transition:.25s var(--ease); }
.cc__chip:hover{ background:var(--gold); color:#15110a; border-color:var(--gold); transform:translateY(-1px); }
.cc__form{ display:flex; flex-direction:column; gap:10px; margin-top:2px; animation:ccIn .35s var(--ease); }
.cc__row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cc__form .field{ display:flex; flex-direction:column; gap:5px; }
.cc__form label{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#a59f93; }
.cc__form input{ background:#0e0c0a; border:1px solid rgba(243,239,231,.14); border-radius:9px; color:#f3efe7; font-family:var(--sans); font-size:.92rem; padding:11px 12px; transition:border-color .3s; width:100%; box-sizing:border-box; min-width:0; }
.cc__form input:focus{ outline:none; border-color:var(--gold); }
.cc__form input[type="datetime-local"], .form input[type="datetime-local"], input[type="datetime-local"]{ color-scheme:dark; }
input[type="date"], input[type="time"]{ color-scheme:dark; color:#f3efe7; }
input[type="date"]::-webkit-datetime-edit, input[type="time"]::-webkit-datetime-edit{ color:#f3efe7; }
.cc__form input[type="date"], .cc__form input[type="time"], .field input[type="date"], .field input[type="time"]{ color:#f3efe7; }
.cc__form .btn{ margin-top:2px; }
.cc__foot{ flex:none; padding:11px 15px; text-align:center; font-size:.8rem; color:#8c8576; border-top:1px solid rgba(243,239,231,.08); }
.cc__foot a{ color:var(--gold-2); font-weight:600; }
@media (max-width:560px){
  .cc__backdrop{ background:rgba(6,6,7,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
  .cc__panel{ right:0; left:0; bottom:0; width:100%; max-width:100%; height:min(86vh,660px); border-radius:18px 18px 0 0; border-left:0; border-right:0; border-bottom:0; transform:translateY(100%); }
  .cc.open .cc__panel{ transform:none; }
  .cc__row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .cc__msg,.cc__form{ animation:none; } .cc__typing span{ animation:none; }
  .cc__panel{ transition:opacity .2s; } .cc.open .cc__panel{ transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .grid3,.feat,.quotes{ grid-template-columns:repeat(2,1fr); }
  .feat__c:nth-child(3n){ border-right:1px solid var(--line); }
  .feat__c:nth-child(2n){ border-right:0; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
/* Nav collapses to the overlay at 1024 (before 8 links + CTA can crowd/overflow on small laptops) */
@media (max-width:1024px){
  /* drop backdrop-filter so the fixed nav escapes the header's containing block and fills the viewport */
  .header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(10,9,8,.97); }
  .nav__links{ display:none; }
  .burger{ display:flex; margin-left:auto; } /* keep burger pinned far-right (fixed .nav is out of flow) */
  .nav{ position:fixed; inset:0; width:100%; height:100%; z-index:200; background:#0c0b0a; flex-direction:column; justify-content:center; align-items:center; gap:28px; transform:translateX(100%); transition:transform .6s cubic-bezier(.16,1,.3,1); padding:var(--pad); }
  .nav.open{ transform:none; }
  .nav.open .nav__links{ display:flex; flex-direction:column; gap:6px; text-align:center; }
  .nav.open .nav__links a{ font-family:var(--serif); font-size:1.7rem; text-transform:none; letter-spacing:0; padding:11px 0; opacity:1; color:var(--fg); }
  .nav.open .nav__links a::after{ display:none; }
  .nav .btn{ font-size:.8rem; padding:1.1em 2.4em; }
  /* staggered cascade so the menu feels alive, not static */
  .nav.open .nav__links li, .nav.open .btn{ opacity:0; transform:translateX(26px); animation:navItemIn .6s cubic-bezier(.16,1,.3,1) forwards; }
  .nav.open .nav__links li:nth-child(1){ animation-delay:.18s } .nav.open .nav__links li:nth-child(2){ animation-delay:.23s }
  .nav.open .nav__links li:nth-child(3){ animation-delay:.28s } .nav.open .nav__links li:nth-child(4){ animation-delay:.33s }
  .nav.open .nav__links li:nth-child(5){ animation-delay:.38s } .nav.open .nav__links li:nth-child(6){ animation-delay:.43s }
  .nav.open .nav__links li:nth-child(7){ animation-delay:.48s } .nav.open .nav__links li:nth-child(8){ animation-delay:.53s }
  .nav.open .btn{ transform:translateY(16px); animation-delay:.58s }
}
@keyframes navItemIn{ to{ opacity:1; transform:none; } }
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
  .nav{ transition:none; } .nav.open .nav__links li, .nav.open .btn{ animation:none; opacity:1; transform:none; }
}
@media (max-width:860px){
  .hero__vid{ display:block; } .hero__still{ display:none; }
  .split,.contact{ grid-template-columns:1fr; }
  .split.rev .split__media{ order:0; }
  .split__media{ max-width:380px; margin-inline:auto; } .split__media img{ aspect-ratio:4/3; }
  .split__text{ text-align:center; } .split__text .kick--line{ padding-top:0; } .split__text .kick--line::before{ left:50%; transform:translateX(-50%); }
  .split__stats{ justify-content:center; gap:24px; } .split.rev .split__text{ text-align:center; }
  .alink{ justify-content:center; }
}
@media (max-width:620px){
  .grid3,.grid2,.feat,.quotes{ grid-template-columns:1fr; }
  .feat__c{ border-right:0!important; }
  .pinfo,.fgrid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__cta{ flex-direction:column; } .hero__cta .btn{ width:100%; }
}

/* ============================================================
   COMPAT SHIM — keep v1 blog pages presentable until regenerated
   ============================================================ */
.eyebrow{ display:inline-flex; align-items:center; gap:.7em; font-size:.72rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; }
.eyebrow.center{ justify-content:center; } .eyebrow.center::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; }
.num{ font-family:var(--serif); font-style:italic; color:var(--gold); opacity:.6; }
.section-head{ max-width:680px; margin-bottom:clamp(34px,4vw,52px); } .section-head.center{ margin-inline:auto; text-align:center; }
.btn-ghost{ border:1px solid var(--line); color:var(--fg); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.link-arrow{ display:inline-flex; align-items:center; gap:.5em; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.link-arrow svg{ width:15px; height:15px; }
.nav__cta{ display:flex; align-items:center; gap:16px; }
.nav__phone{ font-size:.82rem; font-weight:600; color:var(--fg); display:flex; align-items:center; gap:.5em; } .nav__phone svg{ color:var(--gold); }
.header.scrolled{ padding-block:10px; }
.gold-text{ color:var(--gold); }
.footer__brand,.footer__bottom,.footer__about{ }

.footer__bot a{ color:inherit; text-decoration:underline; text-underline-offset:2px; } .footer__bot a:hover{ color:var(--gold); }
.footer__legal a{ color:var(--muted); } .footer__legal a:hover{ color:var(--gold); }

/* language switcher (flags) */
.nav__lang{ display:inline-flex; align-items:center; gap:9px; }
.nav__lang .lang-flag{ display:block; width:23px; height:15px; border-radius:2px; background-size:cover; background-position:center; opacity:.5; transition:opacity .3s,box-shadow .3s,transform .3s; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.nav__lang a.lang-flag:hover{ opacity:1; transform:translateY(-1px); }
.nav__lang .lang-flag.on{ opacity:1; box-shadow:0 0 0 1.5px var(--gold); }
.nav__lang .lang--rs{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23fff'/%3E%3Crect width='9' height='4' fill='%230C4076'/%3E%3Crect width='9' height='2' fill='%23C6363C'/%3E%3C/svg%3E"); }
.nav__lang .lang--en{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='3'/%3E%3Crect x='25' width='10' height='30' fill='%23fff'/%3E%3Crect y='10' width='60' height='10' fill='%23fff'/%3E%3Crect x='27' width='6' height='30' fill='%23C8102E'/%3E%3Crect y='12' width='60' height='6' fill='%23C8102E'/%3E%3C/svg%3E"); }
.nav__lang .lang--ru{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23D52B1E'/%3E%3Crect width='9' height='4' fill='%230039A6'/%3E%3Crect width='9' height='2' fill='%23fff'/%3E%3C/svg%3E"); }
@media (max-width:1024px){ .nav.open .nav__lang{ margin-top:14px; gap:16px; } .nav.open .nav__lang .lang-flag{ width:34px; height:23px; } }

/* iOS: kill double-tap-to-zoom on tappable elements (touch-action doesn't inherit, so set it directly); 16px inputs avoid focus-zoom */
a, button, .btn, input, select, textarea, summary, label, [role="button"], .lang-flag, .fab, .burger, .frow, .car, .cc__chip, [data-concierge]{ touch-action:manipulation; }
@media (max-width:600px){
  .field input, .field select, .field textarea, .cc__form input, input[type="datetime-local"]{ font-size:16px; }
  .cc__form input[type="datetime-local"]{ min-height:48px; }
}

/* date/time picker with visible placeholder overlay (native fields show nothing when empty on iOS) */
.dtf{ position:relative; }
.dtf > input{ width:100%; }
.dtf .dtf__ph{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#8a8478; pointer-events:none; font-size:16px; }
.dtf > input.filled ~ .dtf__ph{ opacity:0; }
.dtf > input:not(.filled)::-webkit-datetime-edit{ color:transparent; }
.dtf > input.filled::-webkit-datetime-edit{ color:#f3efe7; }
/* iOS Safari: kill native chrome + fix the value alignment iOS breaks by default */
.dtf > input[type="datetime-local"]{ -webkit-appearance:none; appearance:none; cursor:pointer; box-sizing:border-box; min-height:48px; line-height:normal; }
.dtf > input[type="datetime-local"]::-webkit-date-and-time-value{ text-align:left; margin:0; padding:0; }
.dtf > input[type="datetime-local"]::-webkit-datetime-edit{ padding:0; }
.dtf > input::-webkit-calendar-picker-indicator{ filter:invert(0.65) sepia(1) saturate(0) brightness(1.1); cursor:pointer; opacity:.85; margin-left:6px; }
.dtf > input::-webkit-calendar-picker-indicator:hover{ opacity:1; }