/* ============ FONTS (Roboto, Apache-2.0, embedded) ============ */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/roboto-400.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/roboto-500.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/roboto-700.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/roboto-900.woff2) format('woff2')}

/* ============ TOKENS ============ */
:root{
  /* ===== MIDNIGHT & CHAMPAGNE - core four (never change) ===== */
  --base:#0E1620; --surface:#F5F3EF; --accent:#B89968; --secondary:#2C3D4F;

  /* legacy aliases kept so component rules below stay readable */
  --navy:#0E1620; --navy-700:#2C3D4F; --navy-800:#151F2A; --navy-900:#0E1620;
  --navy-ink:#15181C;
  --gold:#B89968; --gold-600:#7E6C50; --gold-100:#F4F0E8;

  /* accent ramp */
  --accent-100:#F4F0E8; --accent-200:#EAE0D2; --accent-300:#D4C2A4;
  --accent-400:#C1A57A; --accent-500:#B89968; --accent-600:#A4895F;
  --accent-700:#7E6C50; --accent-800:#595040; --accent-on-dark:#C6AD86;

  /* secondary ramp */
  --secondary-700:#233241; --secondary-500:#2C3D4F; --secondary-400:#404F5F;
  --secondary-200:#90989F; --secondary-100:#D7D8D7; --secondary-wash:rgba(44,61,79,.14);

  /* ink */
  --ink:#15181C; --body:#5C5C5C; --muted:#6B6B6B;
  --ink-on-dark:#F5F3EF; --ink-on-dark-2:rgba(245,243,239,.78); --ink-on-dark-3:rgba(245,243,239,.55);

  /* surfaces */
  --surface-1:#F5F3EF; --surface-2:#ECEAE7; --surface-3:#E3E1DE;
  --surface-glass:rgba(255,255,255,.62);
  --line:#DDD8CD; --line-soft:#E4E0D8;
  --base-2:#151F2A; --base-glass:rgba(14,22,32,.84); --base-veil:rgba(44,61,79,.50);

  /* shadows: neutral black only, plus the one accent glow */
  --shadow-s:0 4px 14px rgba(0,0,0,.06);
  --shadow:0 8px 30px rgba(0,0,0,.07);
  --shadow-l:0 16px 50px rgba(0,0,0,.10);
  --shadow-xl:0 26px 56px rgba(0,0,0,.17);
  --glow-accent:0 10px 30px rgba(184,153,104,.40);
  --glow-accent-hover:0 16px 40px rgba(184,153,104,.60);

  /* shape */
  --radius-s:12px; --radius:18px; --radius-l:22px; --radius-xl:26px;
  --wrap:1240px; --gutter:clamp(18px,4vw,40px); --hdr:88px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--body);background:#fff;line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);line-height:1.14;letter-spacing:-.022em;font-weight:700}
h1{font-size:clamp(2.3rem,5.6vw,4.15rem);font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(1.85rem,3.6vw,2.85rem);letter-spacing:-.028em}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{margin:0 0 1.05em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:#1a1a1a}

/* ============ LAYOUT ============ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sect{padding:clamp(64px,8vw,110px) 0}
.sect--tight{padding:clamp(48px,6vw,80px) 0}
.sect--alt{background:var(--surface-2)}
.center{text-align:center}
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ============ TYPE HELPERS ============ */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.735rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-600);margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.eyebrow--c{justify-content:center}
.lead{font-size:clamp(1rem,1.4vw,1.125rem);color:var(--body);max-width:62ch}
.center .lead{margin-inline:auto}
.sect-head{max-width:760px;margin-bottom:clamp(34px,4.5vw,58px)}
.sect-head.center{margin-inline:auto}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-weight:700;font-size:.95rem;letter-spacing:.005em;
  border:1.5px solid transparent;cursor:pointer;transition:all .25s var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn--gold{background:var(--gold);color:#1a1206;box-shadow:0 6px 18px rgba(239,160,11,.32)}
.btn--gold:hover{background:var(--gold-600);transform:translateY(-2px);box-shadow:0 10px 26px rgba(239,160,11,.42)}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(1,69,143,.26)}
.btn--navy:hover{background:var(--navy-800);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(10px)}
.btn--ghost:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-2px)}
.btn--out{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--out:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--sm{padding:11px 22px;font-size:.875rem}
.btn--wide{width:100%}

/* ============ HEADER ============ */
.hdr{position:fixed;inset:0 0 auto;z-index:200;transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s}
.hdr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,30,62,.55),rgba(4,30,62,0));pointer-events:none;transition:opacity .35s;z-index:-1}
.hdr.is-solid{background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(14px);box-shadow:0 1px 0 var(--line),0 6px 22px rgba(10,44,86,.07)}
.hdr.is-solid::after{opacity:0}
.hdr__in{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);height:var(--hdr)}
.brand{display:flex;align-items:center;flex:none}
.brand__mark{background:var(--gold);border-radius:0 0 var(--radius) var(--radius);padding:14px 20px 12px;
  display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 6px 20px rgba(239,160,11,.3);
  transition:transform .3s var(--ease)}
.brand:hover .brand__mark{transform:translateY(2px)}
.brand__word{font-weight:900;font-size:1.32rem;letter-spacing:.055em;color:#15120b;line-height:1}
.brand__vip{font-size:.6rem;font-weight:700;letter-spacing:.42em;color:#15120b;line-height:1;
  border-top:1px solid rgba(21,18,11,.45);border-bottom:1px solid rgba(21,18,11,.45);padding:2.5px 0 2px;margin-top:1px}
.brand__tag{font-size:.335rem;letter-spacing:.2em;color:rgba(21,18,11,.72);white-space:nowrap;margin-top:2px}

.nav{display:flex;align-items:center;gap:clamp(4px,1vw,13px);margin-left:auto}
.nav__a{position:relative;padding:9px 4px;font-size:.945rem;font-weight:500;color:#fff;
  display:inline-flex;align-items:center;gap:5px;transition:color .2s;white-space:nowrap}
.hdr.is-solid .nav__a{color:var(--navy-ink)}
.nav__a::after{content:"";position:absolute;left:4px;right:4px;bottom:1px;height:2px;background:var(--gold);
  border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__a:hover,.nav__a.is-on{color:var(--gold)}
.nav__a:hover::after,.nav__a.is-on::after{transform:scaleX(1)}
.nav__a .caret{width:9px;height:9px;transition:transform .3s;opacity:.8}
.nav__item{position:relative}
.nav__item:hover .caret{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;min-width:288px;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-l);border:1px solid var(--line-soft);
  padding:9px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .28s var(--ease);z-index:60}
.nav__item:hover .drop,.nav__item:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop::before{content:"";position:absolute;inset:-12px 0 auto;height:14px}
.drop a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:10px;
  font-size:.9rem;font-weight:500;color:var(--navy-ink);transition:all .18s}
.drop a small{font-size:.775rem;font-weight:400;color:var(--muted);line-height:1.4}
.drop a:hover{background:var(--surface-2);color:var(--navy)}
.drop a:hover small{color:var(--body)}

.hdr__cta{display:flex;align-items:center;gap:10px;flex:none}
.lang{position:relative}
.lang__btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-size:.9rem;font-weight:500;color:#fff;padding:9px 6px}
.hdr.is-solid .lang__btn{color:var(--navy-ink)}
.lang__btn .flag{width:21px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang__menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border-radius:12px;
  box-shadow:var(--shadow-l);border:1px solid var(--line-soft);padding:7px;min-width:158px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s var(--ease);z-index:60}
.lang.is-open .lang__menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang__menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;
  background:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;color:var(--navy-ink);text-align:left}
.lang__menu button:hover{background:var(--surface-2)}

.burger{display:none;width:46px;height:46px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);cursor:pointer;padding:0;place-items:center}
.hdr.is-solid .burger{border-color:var(--line);background:var(--surface-2)}
.burger span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;margin:2.5px auto;transition:.3s var(--ease)}
.hdr.is-solid .burger span{background:var(--navy-ink)}
body.nav-open .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

@media(max-width:1180px){
  .nav{position:fixed;inset:var(--hdr) 0 0;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:22px var(--gutter) 60px;overflow-y:auto;transform:translateX(100%);
    transition:transform .4s var(--ease);margin:0}
  body.nav-open .nav{transform:translateX(0)}
  .nav__a{color:var(--navy-ink);font-size:1.06rem;font-weight:600;padding:15px 0;
    border-bottom:1px solid var(--line-soft);justify-content:space-between}
  .nav__a::after{display:none}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:2px 0 12px 14px;min-width:0;translate:0;display:none;background:transparent}
  .nav__item.is-open .drop{display:block}
  .nav__item.is-open .caret{transform:rotate(180deg)}
  .drop a{padding:9px 10px;font-size:.93rem}
  .burger{display:grid}
  .hdr__cta .btn--gold{display:none}
}
@media(max-width:560px){:root{--hdr:76px}.brand__word{font-size:1.12rem}.brand__mark{padding:11px 15px 10px}}

/* ============ HERO ============ */
.hero{position:relative;min-height:min(100svh,880px);display:flex;align-items:flex-end;
  padding:calc(var(--hdr) + 60px) 0 clamp(46px,7vw,86px);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(3,38,80,.95) 0%,rgba(1,69,143,.86) 42%,rgba(1,69,143,.5) 72%,rgba(2,52,110,.62) 100%)}
.hero__grain{position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(ellipse 80% 60% at 15% 85%,rgba(0,0,0,.42),transparent 70%)}
.hero__in{position:relative;max-width:830px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:9px 20px 9px 11px;border-radius:100px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(14px);
  color:#fff;font-size:.86rem;font-weight:500;margin-bottom:clamp(20px,3vw,30px)}
.badge svg{width:19px;height:19px;color:var(--gold);flex:none}
.hero h1{color:#fff;text-shadow:0 3px 26px rgba(0,20,45,.4)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero__sub{color:rgba(255,255,255,.9);font-size:clamp(1.02rem,1.65vw,1.24rem);max-width:53ch;
  margin:clamp(20px,3vw,28px) 0 clamp(28px,4vw,40px);line-height:1.6}
.hero__act{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,64px);margin-top:clamp(40px,6vw,68px);
  padding-top:clamp(26px,3.5vw,38px);border-top:1px solid rgba(255,255,255,.2)}
.stat b{display:block;font-size:clamp(1.85rem,3.4vw,2.6rem);font-weight:900;color:var(--gold);line-height:1;letter-spacing:-.03em}
.stat span{display:block;font-size:.86rem;color:rgba(255,255,255,.76);margin-top:8px;letter-spacing:.02em}
.hero__scroll{position:absolute;bottom:26px;left:50%;translate:-50% 0;color:rgba(255,255,255,.5);
  animation:bob 2.4s ease-in-out infinite}
.hero__scroll svg{width:24px;height:24px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media(max-width:900px){.hero__scroll{display:none}}

/* ============ QUOTE / BOOKING CARD ============ */
.quote{margin-top:-72px;position:relative;z-index:5}
@media(max-width:900px){.quote{margin-top:-40px}}
.quote__card{background:#fff;border-radius:var(--radius-l);box-shadow:var(--shadow-l);
  border:1px solid var(--line-soft);padding:clamp(20px,3vw,34px);overflow:hidden}
.quote__tabs{display:inline-flex;background:var(--surface-2);border-radius:100px;padding:5px;margin-bottom:22px}
.quote__tab{padding:10px 26px;border:0;background:none;border-radius:100px;cursor:pointer;
  font-size:.9rem;font-weight:700;color:var(--muted);transition:all .25s var(--ease)}
.quote__tab.is-on{background:#fff;color:var(--navy);box-shadow:var(--shadow-s)}
.quote__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
@media(max-width:1000px){.quote__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.quote__grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:.775rem;font-weight:700;color:var(--navy-ink);letter-spacing:.05em;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:12px;background:#fff;font-size:.94rem;transition:all .2s;font-family:inherit}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--navy);
  box-shadow:0 0 0 4px rgba(1,69,143,.1)}
.field input::placeholder,.field textarea::placeholder{color:#a9b4c4}
.quote__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.quote__note{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:9px;max-width:56ch}
.quote__note svg{width:17px;height:17px;color:var(--gold);flex:none}
.est{background:var(--gold-100);border:1px solid #f3dda6;border-radius:14px;padding:15px 20px;
  margin-top:18px;display:none;align-items:center;gap:14px;flex-wrap:wrap}
.est.is-on{display:flex;animation:fade .4s var(--ease)}
.est b{font-size:1.5rem;color:var(--navy);font-weight:900;letter-spacing:-.02em}
.est span{font-size:.85rem;color:#8a6a17}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============ TRUST STRIP ============ */
.trust{padding:clamp(40px,5vw,58px) 0 clamp(20px,3vw,30px)}
.trust__lbl{text-align:center;font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:26px}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(28px,6vw,72px)}
.trust__row img,.trust__row .plogo{height:34px;width:auto;opacity:.42;filter:grayscale(1);
  transition:all .3s var(--ease)}
.trust__row img:hover,.trust__row .plogo:hover{opacity:.85;filter:grayscale(0)}
.plogo{display:grid;place-items:center;font-weight:900;letter-spacing:.1em;color:var(--navy-ink);font-size:1.05rem}

/* ============ FEATURE CARDS ============ */
.feat{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-l);padding:30px 26px;
  transition:all .35s var(--ease);position:relative;overflow:hidden}
.feat::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:transparent}
.feat:hover::before{transform:scaleX(1)}
.feat__ic{width:52px;height:52px;border-radius:15px;background:var(--surface-2);color:var(--navy);
  display:grid;place-items:center;margin-bottom:20px;transition:all .35s var(--ease)}
.feat__ic svg{width:25px;height:25px}
.feat:hover .feat__ic{background:var(--gold);color:#1a1206;transform:rotate(-6deg) scale(1.06)}
.feat h3{font-size:1.1rem;margin-bottom:9px}
.feat p{font-size:.92rem;margin:0;color:var(--body)}

/* ============ SERVICE CARDS ============ */
.svc{position:relative;border-radius:var(--radius-l);overflow:hidden;min-height:340px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:#fff;
  isolation:isolate;transition:transform .45s var(--ease);cursor:pointer;border:0;text-align:left;width:100%;font:inherit}
.svc__bg{position:absolute;inset:0;z-index:-2}
.svc__bg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(3,32,68,.05) 20%,rgba(3,32,68,.72) 62%,rgba(2,26,56,.94) 100%);
  transition:opacity .4s}
.svc:hover{transform:translateY(-7px)}
.svc:hover .svc__bg img{transform:scale(1.07)}
.svc h3{color:#fff;font-size:1.28rem;margin-bottom:9px}
.svc p{font-size:.895rem;color:rgba(255,255,255,.82);margin:0 0 16px;line-height:1.55}
.svc__more{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--gold)}
.svc__more svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.svc:hover .svc__more svg{transform:translateX(5px)}
.svc--flat{background:var(--navy);min-height:340px}
.svc--flat::after{background:linear-gradient(150deg,rgba(1,69,143,.2),rgba(7,38,74,.9))}

/* ============ FLEET ============ */
.car{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-l);overflow:hidden;
  display:flex;flex-direction:column;transition:all .4s var(--ease);text-align:left;width:100%;font:inherit;
  padding:0;cursor:pointer}
.car:hover{transform:translateY(-7px);box-shadow:var(--shadow-l);border-color:transparent}
.car__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.car__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.car:hover .car__img img{transform:scale(1.06)}
.car__cls{position:absolute;top:15px;left:15px;padding:6px 14px;border-radius:100px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);font-size:.7rem;font-weight:900;
  letter-spacing:.11em;text-transform:uppercase;color:var(--navy)}
.car__cls--e{background:#0f9d58;color:#fff}
.car__body{padding:24px;display:flex;flex-direction:column;flex:1}
.car__body h3{font-size:1.18rem;margin-bottom:8px}
.car__body p{font-size:.9rem;margin:0 0 18px;flex:1}
.car__spec{display:flex;gap:18px;padding-top:16px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.car__spec div{display:flex;align-items:center;gap:7px;font-size:.83rem;font-weight:500;color:var(--navy-ink)}
.car__spec svg{width:16px;height:16px;color:var(--gold);flex:none}

/* ============ SPLIT ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.split__img{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-l);aspect-ratio:4/3.1}
.split__img img{width:100%;height:100%;object-fit:cover}
.split__img--tall{aspect-ratio:4/4.6}
.split--rev .split__img{order:2}
@media(max-width:880px){.split--rev .split__img{order:0}}
.checks{display:flex;flex-direction:column;gap:14px;margin:26px 0 30px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:.955rem;color:var(--body)}
.checks svg{width:21px;height:21px;color:var(--gold);flex:none;margin-top:2px}
.pills{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:100px;
  background:var(--surface-2);font-size:.88rem;font-weight:700;color:var(--navy-ink)}
.pill svg{width:17px;height:17px;color:var(--gold)}

/* value cards on why-us */
.val{padding:26px;border-radius:var(--radius);background:#fff;border:1px solid var(--line-soft);transition:all .3s var(--ease)}
.val:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow)}
.val__n{font-size:.72rem;font-weight:900;letter-spacing:.14em;color:var(--gold);margin-bottom:11px}
.val h3{font-size:1.05rem;margin-bottom:8px}
.val p{font-size:.9rem;margin:0}

/* ============ PRICING TABLE ============ */
.ptable-wrap{overflow-x:auto;border-radius:var(--radius-l);border:1px solid var(--line);
  box-shadow:var(--shadow-s);background:#fff;-webkit-overflow-scrolling:touch}
table.ptable{width:100%;border-collapse:collapse;min-width:760px;font-size:.925rem}
.ptable thead th{background:var(--navy);color:#fff;text-align:left;padding:17px 20px;font-weight:700;
  font-size:.83rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;position:sticky;top:0}
.ptable thead th:first-child{width:34%}
.ptable tbody td{padding:16px 20px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable tbody tr:nth-child(even){background:#fafcfe}
.ptable tbody tr:hover{background:var(--gold-100)}
.ptable .rowname{font-weight:700;color:var(--navy-ink);display:block;margin-bottom:3px}
.ptable .rowmeta{font-size:.79rem;color:var(--muted);font-weight:400}
.ptable .net{font-weight:700;color:var(--navy-ink);display:block;white-space:nowrap}
.ptable .gross{font-size:.79rem;color:var(--muted);white-space:nowrap}
.ptable .dash{color:#c3ccd9}
.tnote{font-size:.85rem;color:var(--muted);margin-top:16px;display:flex;gap:9px;align-items:flex-start}
.tnote svg{width:17px;height:17px;color:var(--gold);flex:none;margin-top:3px}
.taxtoggle{display:inline-flex;background:var(--surface-2);border-radius:100px;padding:5px;margin-bottom:20px}
.taxtoggle button{padding:9px 22px;border:0;background:none;border-radius:100px;cursor:pointer;
  font-size:.855rem;font-weight:700;color:var(--muted);transition:all .25s}
.taxtoggle button.is-on{background:#fff;color:var(--navy);box-shadow:var(--shadow-s)}

/* ============ FAQ ============ */
.faq{max-width:860px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:all .3s var(--ease)}
.qa.is-open{border-color:var(--gold);box-shadow:var(--shadow)}
.qa__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:21px 24px;background:none;border:0;cursor:pointer;text-align:left;
  font-size:1.02rem;font-weight:700;color:var(--navy-ink);font-family:inherit}
.qa__ic{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;
  flex:none;transition:all .35s var(--ease)}
.qa__ic svg{width:15px;height:15px;color:var(--navy);transition:transform .35s var(--ease)}
.qa.is-open .qa__ic{background:var(--gold)}
.qa.is-open .qa__ic svg{transform:rotate(45deg);color:#1a1206}
.qa__a{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.qa__a p{padding:0 24px 22px;margin:0;font-size:.945rem;color:var(--body);max-width:70ch}

/* ============ CTA BAND ============ */
.band{position:relative;overflow:hidden;isolation:isolate;padding:clamp(58px,7.5vw,96px) 0;color:#fff}
.band__bg{position:absolute;inset:0;z-index:-2}
.band__bg img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(2,34,72,.96),rgba(1,69,143,.88) 55%,rgba(1,69,143,.7))}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.86);max-width:56ch}
.band__act{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}

/* ============ CONTACT ============ */
.cmethods{display:flex;flex-direction:column;gap:13px}
.cm{display:flex;align-items:center;gap:17px;padding:19px 22px;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);transition:all .3s var(--ease)}
.cm:hover{border-color:var(--gold);transform:translateX(5px);box-shadow:var(--shadow)}
.cm__ic{width:48px;height:48px;border-radius:14px;background:var(--surface-2);color:var(--navy);
  display:grid;place-items:center;flex:none;transition:all .3s}
.cm:hover .cm__ic{background:var(--gold);color:#1a1206}
.cm__ic svg{width:22px;height:22px}
.cm b{display:block;font-size:1rem;color:var(--navy-ink);line-height:1.35}
.cm span{display:block;font-size:.845rem;color:var(--muted)}
.formcard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-l);
  padding:clamp(24px,3.4vw,38px);box-shadow:var(--shadow)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formgrid .full{grid-column:1/-1}
@media(max-width:640px){.formgrid{grid-template-columns:1fr}}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.82rem;color:var(--muted);margin-top:4px}
.consent input{width:17px;height:17px;margin-top:3px;flex:none;accent-color:var(--navy)}
.formnote{margin-top:16px;padding:14px 18px;border-radius:12px;background:var(--surface-2);
  font-size:.87rem;color:var(--navy-ink);display:none;gap:10px;align-items:flex-start}
.formnote.is-on{display:flex;animation:fade .4s var(--ease)}
.formnote svg{width:18px;height:18px;color:var(--gold);flex:none;margin-top:2px}

/* ============ FOOTER ============ */
.ftr{background:var(--navy-900);color:rgba(255,255,255,.68);padding:clamp(56px,7vw,84px) 0 0;font-size:.9rem}
.ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:clamp(26px,3.5vw,50px);
  padding-bottom:clamp(40px,5vw,60px)}
@media(max-width:960px){.ftr__top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ftr__top{grid-template-columns:1fr}}
.ftr h4{color:#fff;font-size:.79rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:19px;font-weight:700}
.ftr a{transition:color .2s}
.ftr a:hover{color:var(--gold)}
.ftr__links{display:flex;flex-direction:column;gap:11px}
.ftr__brand{display:inline-flex;flex-direction:column;background:var(--gold);border-radius:12px;
  padding:12px 18px 10px;align-items:center;gap:3px;margin-bottom:20px;width:fit-content}
.ftr__brand .brand__word{font-size:1.1rem} .ftr__brand .brand__vip{font-size:.53rem}
.ftr__brand .brand__tag{font-size:.3rem}
.ftr__c{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.ftr__c a,.ftr__c div{display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.ftr__c svg{width:17px;height:17px;color:var(--gold);flex:none;margin-top:3px}
.social{display:flex;gap:10px;margin-top:22px}
.social a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.09);display:grid;
  place-items:center;transition:all .3s var(--ease)}
.social a:hover{background:var(--gold);color:#1a1206;transform:translateY(-3px)}
.social svg{width:18px;height:18px}
.ftr__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ftr__tags a{padding:6px 13px;border-radius:100px;background:rgba(255,255,255,.07);font-size:.8rem}
.ftr__tags a:hover{background:var(--gold);color:#1a1206}
.pay{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.pay span{padding:7px 13px;border-radius:8px;background:rgba(255,255,255,.09);font-size:.76rem;
  font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.82)}
.ftr__bot{border-top:1px solid rgba(255,255,255,.11);padding:24px 0;display:flex;flex-wrap:wrap;
  gap:14px;justify-content:space-between;align-items:center;font-size:.83rem}
.ftr__bot nav{display:flex;flex-wrap:wrap;gap:22px}

/* ============ PAGE ROUTER ============ */
.page{display:none}
.page.is-live{display:block;animation:pagein .45s var(--ease)}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.phead{position:relative;padding:calc(var(--hdr) + clamp(52px,7vw,86px)) 0 clamp(46px,6vw,74px);
  color:#fff;isolation:isolate;overflow:hidden}
.phead__bg{position:absolute;inset:0;z-index:-2}
.phead__bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(2,32,68,.95),rgba(1,69,143,.84))}
.phead h1{color:#fff;font-size:clamp(2rem,4.4vw,3.35rem)}
.phead p{color:rgba(255,255,255,.85);max-width:60ch;margin:18px 0 0;font-size:clamp(1rem,1.35vw,1.1rem)}
.crumb{display:flex;gap:9px;align-items:center;font-size:.83rem;color:rgba(255,255,255,.62);margin-bottom:18px}
.crumb a:hover{color:var(--gold)}
.crumb svg{width:13px;height:13px;opacity:.6}

/* detail grid for service/vehicle pages */
.detail{display:grid;grid-template-columns:1fr 340px;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:960px){.detail{grid-template-columns:1fr}}
.aside{position:sticky;top:calc(var(--hdr) + 20px);background:var(--surface-2);border-radius:var(--radius-l);
  padding:28px;border:1px solid var(--line-soft)}
@media(max-width:960px){.aside{position:static}}
.aside h3{font-size:1.1rem;margin-bottom:8px}
.aside p{font-size:.9rem;margin-bottom:20px}
.prose h3{margin:34px 0 12px}
.prose h2{margin:0 0 16px}
.prose p{max-width:70ch}
.prose ul.checks{margin:20px 0 26px}

/* misc */
.hr{height:1px;background:var(--line);border:0;margin:clamp(46px,6vw,72px) 0}
/* .reveal is defined once, scoped under html.anim, further down. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html.anim .reveal,html .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#1a1206;padding:12px 22px;
  border-radius:0 0 12px 0;font-weight:700;z-index:999}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wa{position:fixed;right:20px;bottom:20px;z-index:150;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.09) translateY(-3px)}
.wa svg{width:29px;height:29px}
@media print{.hdr,.wa,.quote,.band{display:none}}

/* ============ GDPR / DATA RESIDENCY BAND (closing block) ============ */
.gdpr{background:#061e3b;border-top:1px solid rgba(255,255,255,.09);
  padding:clamp(30px,4vw,46px) 0;color:rgba(255,255,255,.62);font-size:.87rem}
.gdpr__in{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,38px);align-items:start}
@media(max-width:760px){.gdpr__in{grid-template-columns:1fr}}
.gdpr__badge{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 20px;border:1px solid rgba(239,160,11,.34);border-radius:var(--radius);
  background:rgba(239,160,11,.07);color:var(--gold);white-space:nowrap}
.gdpr__badge svg{width:28px;height:28px}
.gdpr__badge span{font-size:.68rem;font-weight:900;letter-spacing:.14em}
.gdpr__body h4{color:#fff;font-size:.95rem;letter-spacing:0;text-transform:none;margin-bottom:10px}
.gdpr__body p{margin:0 0 14px;max-width:88ch;line-height:1.62}
.gdpr__pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 26px;margin:0 0 14px}
@media(max-width:760px){.gdpr__pts{grid-template-columns:1fr}}
.gdpr__pts li{display:flex;gap:9px;align-items:flex-start;font-size:.845rem}
.gdpr__pts svg{width:16px;height:16px;color:var(--gold);flex:none;margin-top:3px}
.gdpr__rights{font-size:.82rem;color:rgba(255,255,255,.5)}
.gdpr__rights a{color:var(--gold);font-weight:700;display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.gdpr__rights a svg{width:13px;height:13px}
.gdpr__rights a:hover{text-decoration:underline}

/* ============ VEHICLE SPEC GROUPS ============ */
/* sized by its own container, not the viewport: this grid lives in a ~563px
   column on tablets, where three viewport-keyed tracks collapsed to unequal
   min-content widths. */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(18px,2.4vw,30px);margin:26px 0 6px}

.specgrp{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px}
.specgrp h4{font-size:.73rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-600);margin:0 0 14px}
.specgrp ul{display:flex;flex-direction:column;gap:9px}
.specgrp li{display:flex;gap:9px;align-items:flex-start;font-size:.875rem;color:var(--body);line-height:1.5}
.specgrp li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);
  flex:none;margin-top:8px}

/* ============ WINE TOUR TIERS ============ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);align-items:stretch}
@media(max-width:940px){.tiers{grid-template-columns:1fr}}
.tier{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-l);padding:30px 26px;
  display:flex;flex-direction:column;transition:all .35s var(--ease);position:relative}
.tier:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.tier--hero{border-color:var(--gold);box-shadow:0 12px 40px rgba(239,160,11,.18)}
.tier__flag{position:absolute;top:-13px;left:50%;translate:-50% 0;background:var(--gold);color:#1a1206;
  font-size:.68rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 16px;border-radius:100px;white-space:nowrap}
.tier__lvl{font-size:.7rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.tier__dur{font-size:.82rem;color:var(--gold-600);font-weight:700;margin-top:4px}
.tier h3{font-size:1.35rem;margin:12px 0 10px}
.tier__d{font-size:.9rem;margin-bottom:20px}
.tier__price{font-size:2rem;font-weight:900;color:var(--navy);letter-spacing:-.03em;
  padding-top:18px;border-top:1px solid var(--line-soft);margin-top:auto}
.tier__price small{display:block;font-size:.75rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-bottom:2px}
.tier .checks{margin:0 0 22px}
.tier .checks li{font-size:.885rem}

/* ============ ESTATES + STEPS ============ */
.estate{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:26px;
  transition:all .3s var(--ease)}
.estate:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--shadow)}
.estate__n{font-size:.72rem;font-weight:900;letter-spacing:.14em;color:var(--gold);margin-bottom:11px}
.estate h3{font-size:1.08rem;margin-bottom:9px}
.estate p{font-size:.9rem;margin:0}
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,28px)}
@media(max-width:940px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:52px}
.step::before{counter-increment:st;content:"0" counter(st);position:absolute;top:0;left:0;
  font-size:1.55rem;font-weight:900;color:var(--gold);letter-spacing:-.02em}
.step::after{content:"";position:absolute;top:14px;left:44px;right:-14px;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}
.step:last-child::after{display:none}
@media(max-width:940px){.step::after{display:none}}
.step h3{font-size:1.03rem;margin-bottom:8px}
.step p{font-size:.885rem;margin:0}

/* ============ TRADE FAIR CARDS ============ */
.fair{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:24px;transition:all .3s var(--ease);height:100%}
.fair:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:var(--shadow)}
.fair__date{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;
  color:var(--gold-600);margin-bottom:10px}
.fair__date svg{width:15px;height:15px}
.fair h3{font-size:1.05rem;margin-bottom:8px}
.fair p{font-size:.875rem;margin:0 0 16px;flex:1}
.fair__venue{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:7px;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.fair__venue svg{width:14px;height:14px;color:var(--gold)}

/* ============ REVIEWS ============ */
.revsum{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(16px,3vw,34px);
  padding:26px 30px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-l);
  box-shadow:var(--shadow-s);max-width:760px;margin:0 auto}
.revsum__score{font-size:2.6rem;font-weight:900;color:var(--navy);letter-spacing:-.03em;line-height:1}
.revsum__stars{display:flex;gap:3px;color:var(--gold);margin-bottom:5px}
.revsum__stars svg{width:19px;height:19px}
.revsum__meta{font-size:.85rem;color:var(--muted)}
.revsum__meta b{color:var(--navy-ink);display:block;font-size:.95rem}

/* ==================================================================
   MIDNIGHT & CHAMPAGNE - component corrections
   Applied after the base rules so the palette wins.
   ================================================================== */

body{background:var(--surface);color:var(--body)}

/* ---- ATMOSPHERE: three fixed drifting orbs behind all content ---- */
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orbs i{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.orbs i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-16vh;
  background:rgba(184,153,104,.20);animation:drift1 34s ease-in-out infinite alternate}
.orbs i:nth-child(2){width:44vw;height:44vw;right:-12vw;top:28vh;
  background:rgba(44,61,79,.24);animation:drift2 42s ease-in-out infinite alternate}
.orbs i:nth-child(3){width:38vw;height:38vw;left:22vw;bottom:-20vh;
  background:rgba(14,22,32,.14);animation:drift3 50s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,7vh,0) scale(1.12)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-8vw,-9vh,0) scale(.96)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,-6vh,0) scale(1.15)}}
header,main,footer{position:relative;z-index:1}

/* ---- FOCUS: gold on dark grounds, accent-700 on light (3:1 minimum) ---- */
:focus-visible{outline:2px solid var(--accent-700);outline-offset:2px}
.hero :focus-visible,.band :focus-visible,.hdr :focus-visible,.ftr :focus-visible,
.gdpr :focus-visible,.phead :focus-visible,.svc:focus-visible{outline-color:var(--accent)}

/* ---- BUTTONS: every filled gold surface carries midnight text, never white ---- */
.btn--gold{background:var(--accent);color:var(--base);box-shadow:var(--glow-accent)}
.btn--gold:hover{background:var(--accent-400);color:var(--base);box-shadow:var(--glow-accent-hover)}
.btn--gold:active{background:var(--accent-600);transform:translateY(-1px)}
.btn--navy{background:var(--base);color:var(--surface);box-shadow:var(--shadow)}
.btn--navy:hover{background:var(--secondary);color:var(--surface)}
.btn--ghost{background:rgba(245,243,239,.08);color:var(--surface);border-color:rgba(245,243,239,.35)}
.btn--ghost:hover{background:rgba(245,243,239,.18);border-color:var(--surface)}
.btn--out{background:transparent;color:var(--accent-700);border-color:var(--accent)}
.btn--out:hover{background:var(--accent-200);color:var(--accent-800);border-color:var(--accent)}

/* ---- HEADER: glass midnight with a gold hairline ---- */
.hdr.is-solid{background:var(--base-glass);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(184,153,104,.35);box-shadow:none}
.hdr.is-solid .nav__a,.hdr.is-solid .lang__btn{color:rgba(245,243,239,.85)}
.hdr.is-solid .nav__a:hover,.hdr.is-solid .nav__a.is-on{color:var(--accent)}
.hdr.is-solid .burger{border-color:rgba(245,243,239,.3);background:rgba(245,243,239,.08)}
.hdr.is-solid .burger span{background:var(--surface)}
.brand__mark{background:var(--accent);box-shadow:0 6px 20px rgba(184,153,104,.32)}
.brand__word,.brand__vip{color:var(--base)}
.brand__vip{border-color:rgba(14,22,32,.45)}
.brand__tag{color:rgba(14,22,32,.72)}
.drop{background:var(--surface);border-color:var(--line)}
.drop a{color:var(--ink)} .drop a:hover{background:var(--surface-2);color:var(--accent-700)}
.lang__menu{background:var(--surface);border-color:var(--line)}
.lang__menu a,.lang__menu button{color:var(--ink)}
.lang__menu a:hover{background:var(--surface-2)}

/* ---- HERO: midnight gradient, video stripped of its own hue ---- */
.hero{background:linear-gradient(160deg,#0E1620 0%,#151F2A 100%);min-height:min(86vh,880px)}
.hero__bg::after{background:none}
.hero__video,.hero__bg img{width:100%;height:100%;object-fit:cover;
  opacity:.28;mix-blend-mode:luminosity}
.hero__grain{background:radial-gradient(1100px 520px at 78% 8%,var(--base-veil),transparent 60%)}
.hero h1{color:var(--surface);text-shadow:none}
.hero h1 em{color:var(--accent)}
.hero__sub{color:rgba(245,243,239,.80)}
.hero__stats{border-top-color:rgba(245,243,239,.18)}
.stat b{color:var(--accent)} .stat span{color:rgba(245,243,239,.75)}
.badge{background:rgba(245,243,239,.08);border-color:rgba(245,243,239,.18);color:var(--surface)}
.badge svg{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.hero__video{display:none}}

/* ---- SECTIONS: alternating bands, glass cards on light ---- */
.sect--alt{background:var(--secondary-wash)}
.feat,.car,.val,.estate,.fair,.qa,.formcard,.cm,.revsum{
  background:var(--surface-glass);backdrop-filter:blur(16px) saturate(150%);
  border-color:rgba(255,255,255,.70)}
.feat:hover,.car:hover,.val:hover,.estate:hover,.fair:hover{box-shadow:var(--shadow-xl)}
.feat::before{background:var(--accent)}
.feat__ic{background:var(--accent);color:var(--base);border-radius:12px}
.feat:hover .feat__ic{background:var(--accent-400);color:var(--base)}
.eyebrow{color:var(--accent-700)} .eyebrow::before{background:var(--accent)}
.tier{background:var(--surface-glass);backdrop-filter:blur(16px) saturate(150%)}
.tier--hero{border-color:var(--accent);box-shadow:var(--glow-accent)}
.tier__flag{background:var(--accent);color:var(--base)}
.tier__price{color:var(--base)}
.tier__dur,.estate__n,.val__n,.fair__date,.specgrp h4{color:var(--accent-700)}
.checks svg,.pill svg,.tnote svg,.gdpr__pts svg,.car__spec svg,.fair__venue svg{color:var(--accent)}
.specgrp{background:var(--surface-2);border-color:var(--line)}
.specgrp li::before{background:var(--accent)}
.aside{background:var(--surface-2);border-color:var(--line)}
.pill{background:var(--surface-2);color:var(--ink)}
.car__cls{background:rgba(14,22,32,.72);color:var(--surface);backdrop-filter:blur(10px)}
.car__cls--e{background:var(--accent);color:var(--base)}
.svc::after{background:linear-gradient(180deg,rgba(14,22,32,.05) 20%,rgba(14,22,32,.74) 62%,rgba(14,22,32,.94) 100%)}
.svc__more{color:var(--accent)}
.qa.is-open{border-color:var(--accent);box-shadow:var(--shadow)}
.qa__ic{background:var(--surface-2)} .qa__ic svg{color:var(--accent-700)}
.qa.is-open .qa__ic{background:var(--accent)} .qa.is-open .qa__ic svg{color:var(--base)}
.cm:hover{border-color:var(--accent)}
.cm__ic{background:var(--surface-2);color:var(--accent-700)}
.cm:hover .cm__ic{background:var(--accent);color:var(--base)}
.revsum__stars{color:var(--accent)} .revsum__score{color:var(--base)}

/* ---- TRUST BAND / CTA: floating midnight object, inset and rounded ---- */
.band{border-radius:var(--radius-xl);margin-inline:4vw;overflow:hidden;
  background:linear-gradient(150deg,#0E1620,#151F2A)}
.band::after{background:linear-gradient(150deg,rgba(14,22,32,.86),rgba(44,61,79,.72))}
.band__bg img{opacity:.26;mix-blend-mode:luminosity}
.band h2{color:var(--surface)} .band p{color:rgba(245,243,239,.78)}

/* ---- PAGE HEADERS ---- */
.phead{background:linear-gradient(160deg,#0E1620 0%,#151F2A 100%)}
.phead::after{background:linear-gradient(150deg,rgba(14,22,32,.84),rgba(44,61,79,.62))}
.phead__bg img{opacity:.28;mix-blend-mode:luminosity}
.crumb{color:rgba(245,243,239,.62)} .crumb a:hover{color:var(--accent)}
.phead p{color:rgba(245,243,239,.82)}

/* ---- TABLES ---- */
.ptable thead th{background:var(--base);color:var(--surface)}
.ptable-wrap{background:var(--surface-glass);border-color:var(--line)}
.ptable tbody td{border-bottom-color:var(--line)}
.ptable tbody tr:nth-child(even){background:rgba(255,255,255,.35)}
.ptable tbody tr:hover{background:var(--accent-100)}
.ptable .rowname,.ptable .net{color:var(--ink)}
.taxtoggle{background:var(--surface-2)}
.taxtoggle button.is-on,.quote__tab.is-on{background:var(--surface);color:var(--accent-700)}

/* ---- FORMS ---- */
.field label{color:var(--muted);font-size:.72rem;letter-spacing:.1em}
.field input,.field select,.field textarea{background:#fff;border-color:var(--line-soft);color:var(--ink)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--accent)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent-700);box-shadow:0 0 0 3px rgba(126,108,80,.14)}
.consent input{accent-color:var(--accent-700)}
.formnote{background:var(--surface-2);color:var(--ink)} .formnote svg{color:var(--accent-700)}
.formnote.is-ok{background:#E8EDE8;color:#3C5744} .formnote.is-ok svg{color:#4A6B52}
.formnote.is-err{background:#F2E5E3;color:#7A3232} .formnote.is-err svg{color:#8C3A3A}

/* ---- FOOTER + GDPR BAND ---- */
.ftr{background:var(--base);color:rgba(245,243,239,.78)}
.ftr h4{color:var(--surface)} .ftr a:hover{color:var(--accent)}
.ftr__bot{border-top-color:rgba(245,243,239,.15);color:rgba(245,243,239,.55)}
.ftr__brand{background:var(--accent)}
.social a{background:rgba(245,243,239,.08)}
.social a:hover{background:var(--accent);color:var(--base)}
.ftr__tags a{background:rgba(245,243,239,.07)}
.ftr__tags a:hover{background:var(--accent);color:var(--base)}
.pay span{background:transparent;border:1px solid rgba(245,243,239,.25);color:rgba(245,243,239,.82)}
.gdpr{background:var(--base);border-top-color:rgba(245,243,239,.15)}
.gdpr__badge{border-color:rgba(184,153,104,.35);background:rgba(184,153,104,.08);color:var(--accent)}
.gdpr__rights a{color:var(--accent)}
.trust__row .plogo{color:var(--ink)}
.wa{box-shadow:0 8px 26px rgba(0,0,0,.24)}
::selection{background:var(--accent);color:var(--base)}

/* ---- HERO MEDIA: poster carries the design, video fades in over it ---- */
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--base)}
.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 60%;opacity:.28;mix-blend-mode:luminosity}
.hero__video{opacity:0;transition:opacity 1.1s var(--ease)}
.hero__video.is-ready{opacity:.28}
.hero__video.is-ready ~ .hero__poster,
.hero__bg:has(.hero__video.is-ready) .hero__poster{opacity:0;transition:opacity 1.1s var(--ease)}
@media(max-width:900px){.hero__video{display:none}}
@media(prefers-reduced-motion:reduce){.hero__video{display:none}.hero__poster{opacity:.28}}

/* Flags sit in flex rows; without flex-none they collapse under max-width:100%. */
.flag{flex:none;width:21px;height:14px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang__btn .flag,.lang__menu .flag{flex:none;width:21px;height:14px}
.lang__menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:.9rem;font-weight:500}

/* ==================================================================
   CALL CARD - ringing phone with waveform.
   Ported from the Avaton concept and recoloured to champagne gold.
   ================================================================== */
.callcard{position:relative;overflow:hidden;border-radius:var(--radius-l);
  background:linear-gradient(160deg,#0E1620 0%,#151F2A 100%);
  border:1px solid rgba(184,153,104,.30);padding:30px 26px 26px;text-align:center;
  margin-bottom:14px}
.callcard__head{display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,243,239,.55)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px rgba(184,153,104,.9);animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

.phone-stage{position:relative;height:112px;display:flex;align-items:center;
  justify-content:center;margin:14px 0 6px}
.ring-pulse{position:absolute;top:50%;left:50%;width:56px;height:56px;
  transform:translate(-50%,-50%);border:1px solid rgba(184,153,104,.55);border-radius:50%;
  animation:phoneRing 2.4s ease-out infinite}
.ring-pulse.r2{animation-delay:.8s}
.ring-pulse.r3{animation-delay:1.6s}
@keyframes phoneRing{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1;border-color:rgba(184,153,104,.7)}
  100%{transform:translate(-50%,-50%) scale(2.6);opacity:0;border-color:rgba(184,153,104,0)}}

.phone-icon-wrap{position:relative;z-index:2;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  background:radial-gradient(circle at 30% 30%,rgba(198,173,134,.34),rgba(184,153,104,.10));
  border:1px solid rgba(184,153,104,.45);
  box-shadow:0 0 28px rgba(184,153,104,.38)}
.phone-icon-wrap svg{width:24px;height:24px}

.mini-wave{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:26px;margin-top:8px}
.mini-wave span{width:2px;background:var(--accent);border-radius:1px;opacity:.85;
  animation:wave 1s ease-in-out infinite;transform-origin:center bottom}
@keyframes wave{0%,100%{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1.4);opacity:1}}
.mini-wave span:nth-child(1){height:35%;animation-delay:0s}
.mini-wave span:nth-child(2){height:60%;animation-delay:.1s}
.mini-wave span:nth-child(3){height:90%;animation-delay:.05s}
.mini-wave span:nth-child(4){height:50%;animation-delay:.15s}
.mini-wave span:nth-child(5){height:75%;animation-delay:.2s}
.mini-wave span:nth-child(6){height:40%;animation-delay:.1s}
.mini-wave span:nth-child(7){height:85%;animation-delay:0s}
.mini-wave span:nth-child(8){height:55%;animation-delay:.15s}
.mini-wave span:nth-child(9){height:70%;animation-delay:.05s}
.mini-wave span:nth-child(10){height:35%;animation-delay:.2s}
.mini-wave span:nth-child(11){height:60%;animation-delay:.1s}
.mini-wave span:nth-child(12){height:80%;animation-delay:0s}

.callcard__num{display:inline-block;margin-top:14px;font-size:1.32rem;font-weight:700;
  color:var(--surface);letter-spacing:.01em;transition:color .25s var(--ease)}
.callcard__num:hover{color:var(--accent)}
.callcard__sub{font-size:.8rem;color:rgba(245,243,239,.55);margin-top:5px;letter-spacing:.03em}

@media(prefers-reduced-motion:reduce){
  .ring-pulse,.mini-wave span,.live-dot{animation:none}
  .ring-pulse{opacity:.35}
  .mini-wave span{transform:scaleY(1)}
}

/* ==================================================================
   LOCATION SEARCH
   ================================================================== */
.field--place{position:relative}
.ac{position:relative}
.ac input{padding-right:38px}
.ac__clear{position:absolute;right:10px;top:50%;translate:0 -50%;width:22px;height:22px;
  border:0;border-radius:50%;background:var(--surface-2);color:var(--muted);cursor:pointer;
  font-size:15px;line-height:1;display:grid;place-items:center;padding:0}
.ac__clear:hover{background:var(--accent);color:var(--base)}
.ac__list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;margin:0;padding:6px;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-l);max-height:326px;overflow-y:auto}
.ac__list li{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  cursor:pointer;transition:background .15s}
.ac__list li.is-active,.ac__list li:hover{background:var(--accent-100)}
.ac__txt{display:flex;flex-direction:column;min-width:0}
.ac__txt b{font-size:.9rem;font-weight:600;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ac__txt small{font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.ac__ic{flex:none;width:28px;height:28px;border-radius:8px;background:var(--surface-2);
  display:grid;place-items:center;background-repeat:no-repeat;background-position:center;
  background-size:15px 15px}
.ac__ic--air{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E6C50' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.1 2.1 0 0 0-3-3L13 8 4.8 6.2a.7.7 0 0 0-.7 1.1L8 11l-2 2-2.5-.5a.6.6 0 0 0-.5 1L5 16l2.5 2 1.5-.5.5 2.5a.6.6 0 0 0 1-.5L13 18l2-2 3.7 3.9a.7.7 0 0 0 1.1-.7Z'/%3E%3C/svg%3E")}
.ac__ic--rail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E6C50' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='3' width='14' height='13' rx='2'/%3E%3Cpath d='M8 19l-2 2M16 19l2 2M5 11h14'/%3E%3C/svg%3E")}
.ac__ic--fair{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E6C50' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6'/%3E%3C/svg%3E")}
.ac__ic--hotel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E6C50' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 20V6h18v14M3 12h18M7 9h.01M7 16h.01'/%3E%3C/svg%3E")}
.ac__ic--spot{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E6C50' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.ac__ic--wine{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E6C50' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 3h8l-1 7a3 3 0 0 1-6 0zM12 13v7M9 21h6'/%3E%3C/svg%3E")}

/* ==================================================================
   SCROLL CHOREOGRAPHY
   ================================================================== */
/* Hidden ONLY once JS confirms it can animate. If the script fails, never runs,
   or IntersectionObserver misbehaves, content stays visible rather than vanishing. */
html.anim .reveal{opacity:0;transform:translateY(26px)}
html.anim .reveal.in{opacity:1;transform:none;
  transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
html.anim .split__img.reveal{transform:translateY(26px) scale(.97)}
html.anim .split__img.reveal.in{transform:none}
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;background:var(--accent);
  transform:scaleX(0);transform-origin:left;will-change:transform;pointer-events:none}
.band__bg,.phead__bg{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .scrollbar{display:none}
  .band__bg,.phead__bg{transform:none!important}
}


/* Final guarantee. Repeated appends above can re-declare .reveal; this is the
   last word, so an element that has been revealed can never stay invisible. */
html.anim .reveal.in,html.anim .split__img.reveal.in{opacity:1;transform:none}
html:not(.anim) .reveal{opacity:1;transform:none}

/* Short explainer under the contact methods, for visitors who do not know
   that Eschborn sits on Frankfurt's western edge. */
.locnote{display:flex;gap:10px;align-items:flex-start;margin:16px 2px 0;
  font-size:.85rem;color:var(--muted);line-height:1.55}
.locnote svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:3px}
.cm__fra{display:inline-block;margin-top:4px;font-style:normal;font-size:.78rem;font-weight:700;
  color:var(--accent-700);letter-spacing:.02em}

/* ---- Messenger dock: WhatsApp + Signal ---- */
.msgdock{position:fixed;right:20px;bottom:20px;z-index:150;display:flex;flex-direction:column;gap:10px}
.msgdock__btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.msgdock__btn svg{width:27px;height:27px}
.msgdock__btn--wa{background:#25D366;box-shadow:0 8px 24px rgba(37,211,102,.40)}
.msgdock__btn--sig{background:#3A76F0;box-shadow:0 8px 24px rgba(58,118,240,.40)}
.msgdock__btn:hover{transform:scale(1.09) translateY(-3px)}
.msgdock__btn--wa:hover{box-shadow:0 12px 30px rgba(37,211,102,.55)}
.msgdock__btn--sig:hover{box-shadow:0 12px 30px rgba(58,118,240,.55)}
@media(max-width:560px){.msgdock{right:14px;bottom:14px}.msgdock__btn{width:46px;height:46px}
  .msgdock__btn svg{width:23px;height:23px}}
/* brand tints on the contact rows */
.cm__ic--wa{color:#1DA851} .cm:hover .cm__ic--wa{background:#25D366;color:#fff}
.cm__ic--sig{color:#3A76F0} .cm:hover .cm__ic--sig{background:#3A76F0;color:#fff}

/* ==================================================================
   LOGO MOTION
   The mark is designed to hang from the top edge like a luggage tag, so
   it settles into place on load and catches a slow highlight on hover.
   Deliberately restrained: no bounce, no loop, nothing that draws the eye
   away from the headline.
   ================================================================== */
.brand__mark{position:relative;overflow:hidden;
  animation:logoSettle .9s cubic-bezier(.22,.9,.3,1) both;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
@keyframes logoSettle{
  0%  {transform:translateY(-118%)}
  70% {transform:translateY(3px)}
  100%{transform:translateY(0)}
}
/* highlight sweep, hover only */
.brand__mark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-130%);opacity:0}
.brand:hover .brand__mark{transform:translateY(3px);box-shadow:0 10px 28px rgba(184,153,104,.42)}
.brand:hover .brand__mark::after{animation:logoShine .85s var(--ease) forwards}
@keyframes logoShine{
  0%  {transform:translateX(-130%);opacity:0}
  18% {opacity:1}
  100%{transform:translateX(130%);opacity:0}
}
/* the rules above and below VIP draw themselves in behind the settle */
.brand__vip{position:relative;overflow:hidden}
.brand__vip::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:var(--accent);transform-origin:right;
  animation:vipWipe .55s cubic-bezier(.65,0,.35,1) .45s both}
@keyframes vipWipe{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media(prefers-reduced-motion:reduce){
  .brand__mark{animation:none}
  .brand__vip::before{animation:none;display:none}
  .brand:hover .brand__mark::after{animation:none}
}

/* ==================================================================
   SERVICE TILES - hover
   The grid parent carries the perspective so each tile tilts on its own
   axis. Default state stays calm; everything below only fires on hover.
   ================================================================== */
.svcgrid,.grid.g3{perspective:1200px}

.svc{transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  box-shadow:0 6px 18px rgba(0,0,0,.10)}
.svc__bg img{transition:transform .7s var(--ease),filter .7s var(--ease)}
.svc::after{transition:opacity .45s var(--ease),background .45s var(--ease)}

/* thin gold rule that draws itself under the heading */
.svc h3{position:relative;padding-bottom:10px;transition:transform .4s var(--ease)}
.svc h3::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.svc p{transition:transform .4s var(--ease),opacity .4s var(--ease)}
.svc__more{transition:transform .4s var(--ease),color .3s}
.svc__more svg{transition:transform .35s var(--ease)}

.svc:hover,.svc:focus-visible{
  transform:translateY(-9px) rotateX(1.6deg);
  box-shadow:0 26px 56px rgba(0,0,0,.30),0 0 0 1px rgba(184,153,104,.45)}
.svc:hover .svc__bg img{transform:scale(1.09);filter:saturate(1.12) brightness(1.06)}
/* scrim eases off the top so more of the photograph shows through */
.svc:hover::after{
  background:linear-gradient(180deg,rgba(14,22,32,0) 8%,rgba(14,22,32,.58) 52%,rgba(14,22,32,.96) 100%)}
.svc:hover h3{transform:translateY(-3px)}
.svc:hover h3::after{transform:scaleX(1)}
.svc:hover p{transform:translateY(-2px);opacity:1}
.svc:hover .svc__more{transform:translateY(-1px);color:var(--accent-on-dark)}
.svc:hover .svc__more svg{transform:translateX(6px)}

@media(hover:none){
  .svc:hover{transform:none;box-shadow:0 6px 18px rgba(0,0,0,.10)}
  .svc:hover .svc__bg img{transform:none;filter:none}
  .svc h3::after{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){
  .svc,.svc__bg img,.svc h3,.svc p,.svc__more,.svc__more svg{transition:none}
  .svc:hover{transform:none}
  .svc:hover .svc__bg img{transform:none}
}

/* secondary service links under the six tiles */
.morelist{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px;
  padding-top:26px;border-top:1px solid var(--line)}
.morelist__lbl{font-size:.72rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-right:6px}
.morelist a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:100px;
  background:var(--surface-2);border:1px solid transparent;font-size:.86rem;font-weight:600;
  color:var(--ink);transition:all .28s var(--ease)}
.morelist a svg{width:13px;height:13px;color:var(--accent);transition:transform .28s var(--ease)}
.morelist a:hover{border-color:var(--accent);background:var(--accent-100);color:var(--accent-800)}
.morelist a:hover svg{transform:translateX(4px)}

/* ==================================================================
   LIQUID GLASS
   Depth comes from how a real pane of glass behaves: it catches a
   specular highlight along its top edge, tints what sits behind it,
   and casts a soft shadow. Restraint is the point - the palette still
   reads 60% light ground, and glass never competes with photography.
   ================================================================== */
:root{
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.85);      /* top edge catch  */
  --glass-lo: inset 0 -1px 0 rgba(14,22,32,.05);        /* grounded base   */
  --glass-bg: linear-gradient(158deg, rgba(255,255,255,.78) 0%,
                                       rgba(255,255,255,.50) 46%,
                                       rgba(255,255,255,.62) 100%);
  --glass-edge: 1px solid rgba(255,255,255,.72);
  --glass-blur: blur(22px) saturate(178%);
  /* on midnight grounds */
  --glassD-bg: linear-gradient(158deg, rgba(245,243,239,.10) 0%,
                                        rgba(245,243,239,.05) 55%,
                                        rgba(245,243,239,.08) 100%);
  --glassD-hi: inset 0 1px 0 rgba(245,243,239,.16);
  --glassD-edge: 1px solid rgba(245,243,239,.16);
}

/* --- panes on the light ground --- */
.feat,.car,.val,.estate,.fair,.formcard,.revsum,.tier,.qa,.cm,.aside,.ptable-wrap,.quote__card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:var(--glass-edge);
  box-shadow:var(--glass-hi),var(--glass-lo),0 10px 34px rgba(14,22,32,.07)}

.feat:hover,.car:hover,.val:hover,.estate:hover,.fair:hover{
  box-shadow:var(--glass-hi),var(--glass-lo),0 26px 56px rgba(14,22,32,.15)}

/* the aside and spec blocks read as slightly frostier, set-back panes */
.aside,.specgrp{background:linear-gradient(158deg,rgba(255,255,255,.62),rgba(236,234,231,.55));
  border:1px solid rgba(255,255,255,.6);box-shadow:var(--glass-hi),0 6px 20px rgba(14,22,32,.05)}

/* --- panes on midnight grounds --- */
.badge,.btn--ghost,.gdpr__badge{
  background:var(--glassD-bg);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:var(--glassD-edge);
  box-shadow:var(--glassD-hi)}
/* Solid midnight ground: this card sits on a light section, so a translucent
   film would wash it out and take the white text with it. */
.callcard{background:linear-gradient(160deg,#0E1620 0%,#1B2635 100%);
  border:1px solid rgba(184,153,104,.30);
  box-shadow:inset 0 1px 0 rgba(245,243,239,.10),0 18px 44px rgba(14,22,32,.34)}
.gdpr__badge{border-color:rgba(184,153,104,.34)}

/* header: a true glass shelf, with the gold hairline as its lit lower edge */
.hdr.is-solid{
  background:linear-gradient(180deg,rgba(14,22,32,.90),rgba(14,22,32,.78));
  -webkit-backdrop-filter:blur(20px) saturate(165%);
  backdrop-filter:blur(20px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(245,243,239,.08),0 8px 30px rgba(0,0,0,.22)}

/* dropdowns and the location list float above the page rather than sit on it */
.drop,.lang__menu,.ac__list{
  background:linear-gradient(158deg,rgba(255,255,255,.94),rgba(245,243,239,.90));
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:var(--glass-edge);
  box-shadow:var(--glass-hi),0 20px 48px rgba(14,22,32,.20)}

/* form fields sit *in* the glass, not on top of it */
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 2px rgba(14,22,32,.05)}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff}

/* service tiles gain a glass rim so they read as panes over photography */
.svc{box-shadow:inset 0 1px 0 rgba(245,243,239,.12),0 10px 30px rgba(0,0,0,.16)}
.svc:hover,.svc:focus-visible{
  box-shadow:inset 0 1px 0 rgba(245,243,239,.20),
             0 30px 60px rgba(0,0,0,.32),
             0 0 0 1px rgba(184,153,104,.42)}

/* Fallback: without backdrop-filter the panes would read as milky rectangles,
   so give them an opaque surface instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .feat,.car,.val,.estate,.fair,.formcard,.revsum,.tier,.qa,.cm,.aside,
  .ptable-wrap,.quote__card,.drop,.lang__menu,.ac__list{background:#fff}
  .badge,.btn--ghost,.callcard{background:rgba(21,31,42,.92)}
  .hdr.is-solid{background:#0E1620}
}

/* ==================================================================
   ICON SIZING SAFETY NET
   Inline SVGs with only a viewBox expand to fill their container when no
   sizing rule matches. Icons now carry intrinsic width/height, and this
   caps anything that still slips through. Explicit rules above win.
   ================================================================== */
svg:not([class*="flag"]):not(.orbs svg){max-width:100%;max-height:100%}
a > svg,button > svg,span > svg,li > svg,p > svg{width:1em;height:1em;flex:none}
.btn svg{width:18px;height:18px;flex:none}
.cm__ic svg{width:22px;height:22px;flex:none}
.social a svg{width:18px;height:18px;flex:none}
.checks svg,.gdpr__pts svg{width:20px;height:20px;flex:none}
.svc__more svg,.morelist a svg,.gdpr__rights a svg{width:14px;height:14px;flex:none}
.car__spec svg,.fair__venue svg,.fair__date svg,.pill svg,.tnote svg,.locnote svg{
  width:16px;height:16px;flex:none}
.phone-icon-wrap svg{width:24px;height:24px}
.qa__ic svg{width:15px;height:15px}
.crumb svg{width:13px;height:13px;flex:none}
.feat__ic svg{width:25px;height:25px}
.hero__act .btn svg,.band__act .btn svg{width:18px;height:18px}
.caret{width:9px;height:9px;flex:none}

/* ==================================================================
   CONTACT COLUMNS - equal height, no dead space
   The form column stretches to match the contact rows, and the message
   field absorbs whatever slack is left. Bigger box, nothing empty.
   ================================================================== */
#contactBlock .split,.sect .split:has(.formcard){align-items:stretch}
.formcard{display:flex;flex-direction:column}
.formcard form{flex:1;display:flex;flex-direction:column}
.formcard .formgrid{flex:1;align-content:start}
.field--grow{display:flex;flex-direction:column;min-height:0}
.field--grow textarea{flex:1;min-height:150px;resize:vertical}
@media(max-width:880px){.field--grow textarea{min-height:140px}}

/* ---- quick-start topic buttons ----
   Even widths on a grid so they align in tidy rows instead of a ragged
   inline wrap, with real button affordance rather than a bare outline. */
.topics{margin-top:2px}
.topics__lbl{display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.topics__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
@media(max-width:640px){.topics__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.topics__row{grid-template-columns:1fr}}
.topic{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:44px;padding:9px 12px;border-radius:12px;
  border:1px solid var(--line);background:#fff;
  font-family:inherit;font-size:.83rem;font-weight:600;line-height:1.25;color:var(--ink);
  cursor:pointer;box-shadow:0 1px 2px rgba(14,22,32,.05);
  transition:border-color .22s var(--ease),background .22s var(--ease),
             color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.topic:hover{border-color:var(--accent);background:var(--accent-100);
  color:var(--accent-800);transform:translateY(-1px);box-shadow:0 4px 12px rgba(14,22,32,.08)}
.topic:active{transform:translateY(0)}
.topic.is-on{background:var(--accent);border-color:var(--accent);color:var(--base);
  box-shadow:0 6px 16px rgba(184,153,104,.32)}
.topic:focus-visible{outline:2px solid var(--accent-700);outline-offset:2px}

/* ---- field feedback: a quiet tick once a field is valid ---- */
.field{position:relative}
.field.is-valid > input,.field.is-valid > textarea{border-color:#9bb7a3}
.field.is-valid::after{content:"";position:absolute;right:12px;top:34px;width:15px;height:15px;
  background-repeat:no-repeat;background-size:15px;opacity:.85;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6B52' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.field--grow.is-valid::after{display:none}
.field input:focus,.field textarea:focus,.field select:focus{
  box-shadow:0 0 0 3px rgba(126,108,80,.16),inset 0 1px 2px rgba(14,22,32,.04)}

/* ==================================================================
   FOOTER - calmer, aligned columns
   Capsule pills scattered at every width made the footer look noisy and
   wrapped badly. Regions and airports are now plain aligned links; the
   payment marks sit in one uniform row above the legal line.
   ================================================================== */
.ftr__links--2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 18px}
@media(max-width:600px){.ftr__links--2col{grid-template-columns:1fr}}
.ftr__hint{font-size:.8rem;color:rgba(245,243,239,.5);margin:20px 0 0;line-height:1.55;max-width:34ch}
.ftr__tags{display:none}

.ftr__pay{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:20px 0;border-top:1px solid rgba(245,243,239,.11)}
.ftr__pay-lbl{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(245,243,239,.45)}
.pay{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pay span{display:inline-flex;align-items:center;justify-content:center;
  min-width:74px;height:30px;padding:0 12px;border-radius:6px;
  border:1px solid rgba(245,243,239,.20);background:transparent;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;color:rgba(245,243,239,.78);
  white-space:nowrap}

/* ---- contact columns: the earlier selector missed the contact page ---- */
.split:has(.formcard){align-items:stretch}
.split:has(.formcard) > div{min-width:0}

/* Contact: the two columns match height, and the message field takes the slack. */
.split--contact{align-items:stretch}
.split--contact > div{min-width:0}
.split--contact .formcard{height:100%}

/* The message row must take the leftover height, so the taller the left
   column gets, the bigger the box the visitor types into. */
.split--contact .formcard .formgrid{align-content:stretch;grid-auto-rows:min-content}
.split--contact .formcard .formgrid .field--grow{grid-row:auto;align-self:stretch}
.split--contact .formcard .formgrid{grid-template-rows:auto auto auto auto 1fr auto}
.split--contact .field--grow{display:flex;flex-direction:column;min-height:0}
.split--contact .field--grow textarea{flex:1 1 auto;height:100%;min-height:170px}

/* ==================================================================
   BOOKING BAND - copy left, live call card right
   The band had dead space on the right; the ringing card now fills it and
   gives the section one prominent animated focal point.
   ================================================================== */
.band__in{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);
  align-items:center}
@media(max-width:900px){.band__in{grid-template-columns:1fr;gap:32px}}
.band__copy{min-width:0}
.band__copy h2{margin-bottom:12px}
.band__copy p{margin-bottom:0}
.band__act{margin-top:28px}

/* contact block no longer carries the card, so the rows start flush */
.split--contact .cmethods{margin-top:0}

/* ==================================================================
   REVEAL - deterministic end state
   Toggling a class and relying on a transition left elements parked
   mid-transform (49 of 51 sat 26px low, throwing off vertical centring).
   A keyframe with `both` ends at a fixed state that cannot be left half
   applied, so a revealed element is always exactly where the layout puts it.
   ================================================================== */
@keyframes revealIn{
  from{opacity:0;transform:translateY(26px)}
  to  {opacity:1;transform:none}
}
html.anim .reveal{opacity:0;transform:translateY(26px)}
html.anim .reveal.in{
  animation:revealIn .7s var(--ease) var(--d,0ms) both;
  transition:none}
/* images had their own scale variant; keep it, same deterministic ending */
@keyframes revealInImg{
  from{opacity:0;transform:translateY(26px) scale(.97)}
  to  {opacity:1;transform:none}
}
html.anim .split__img.reveal{transform:translateY(26px) scale(.97)}
html.anim .split__img.reveal.in{animation:revealInImg .75s var(--ease) var(--d,0ms) both}
@media(prefers-reduced-motion:reduce){
  html.anim .reveal,html.anim .reveal.in,
  html.anim .split__img.reveal,html.anim .split__img.reveal.in{
    animation:none;opacity:1;transform:none}
}

/* ==================================================================
   CALL STRIP - live line beside the booking copy
   Scaled to read as a peer of the CTA buttons rather than a footnote:
   same pill language, a touch taller because it carries two lines.
   ================================================================== */
.band__in{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:900px){.band__in{grid-template-columns:1fr;gap:30px}}

.callstrip{justify-self:end;display:inline-flex;align-items:center;gap:26px;
  padding:24px 42px 24px 26px;border-radius:100px;
  background:rgba(245,243,239,.07);border:1px solid rgba(184,153,104,.30);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(245,243,239,.14),0 14px 34px rgba(0,0,0,.26);
  color:var(--surface);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.callstrip:hover{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(245,243,239,.18),0 20px 44px rgba(0,0,0,.32)}
@media(max-width:900px){.callstrip{justify-self:start}}

.callstrip__ring{position:relative;flex:none;width:82px;height:82px;display:grid;place-items:center}
.callstrip__ring .ring-pulse{width:82px;height:82px}
.callstrip__ring .phone-icon-wrap{width:82px;height:82px;
  box-shadow:0 0 24px rgba(184,153,104,.34)}
.callstrip__ring .phone-icon-wrap svg{width:34px;height:34px}

.callstrip__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.callstrip__lbl{display:flex;align-items:center;gap:9px;font-size:.76rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(245,243,239,.58)}
.callstrip__lbl .live-dot{width:6px;height:6px}
.callstrip__txt strong{font-size:1.78rem;font-weight:700;letter-spacing:.005em;
  white-space:nowrap;line-height:1.15}
.callstrip .mini-wave{height:18px;gap:3px;margin-top:7px;justify-content:flex-start}
.callstrip .mini-wave span{width:2.5px}

@media(max-width:560px){
  .callstrip{gap:18px;padding:18px 30px 18px 18px}
  .callstrip__ring,.callstrip__ring .ring-pulse,
  .callstrip__ring .phone-icon-wrap{width:66px;height:66px}
  .callstrip__ring .phone-icon-wrap svg{width:28px;height:28px}
  .callstrip__txt strong{font-size:1.45rem}
}
@media(max-width:400px){
  .callstrip{width:100%;justify-content:flex-start}
  .callstrip__txt strong{font-size:1.25rem}
}

/* ---- guided enquiry: follow-up step ----
   Revealed only after a topic is chosen. Slides in so the change is legible
   rather than a jump, and never leaves the form taller than the column beside it. */
.topicstep{margin-top:12px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.55);border:1px solid var(--line-soft)}
.topicstep[hidden]{display:none}
.topicstep.is-in{animation:stepIn .32s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.topicstep__q{display:block;font-size:.78rem;font-weight:700;color:var(--navy-ink);
  margin-bottom:9px}
.topicstep .topics__row{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
@media(max-width:640px){.topicstep .topics__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.topic--opt{min-height:38px;font-size:.79rem;padding:7px 10px;border-radius:10px;
  background:rgba(255,255,255,.8)}
@media(prefers-reduced-motion:reduce){.topicstep.is-in{animation:none}}

/* Keep the form column from outgrowing the contact rows beside it: the message
   box gives up height instead of the card pushing the whole row taller. */
.split--contact .field--grow textarea{min-height:120px}
.split--contact .formcard{max-height:100%}

/* ---- dated option buttons (trade fairs) ----
   Two lines: the fair, then when it runs. The date is the thing a visitor is
   actually checking, so it sits on the button rather than in a tooltip. */
.topic--opt{flex-direction:column;gap:2px;line-height:1.25}
.topic--dated{min-height:52px;padding:8px 10px}
.topic__main{font-weight:700;font-size:.82rem}
.topic__sub{font-size:.68rem;font-weight:500;color:var(--muted);letter-spacing:.01em;
  white-space:nowrap}
.topic--dated:hover .topic__sub{color:var(--accent-800)}
.topic--dated.is-on .topic__sub{color:rgba(14,22,32,.72)}
.topicstep--dated .topics__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:1100px){.topicstep--dated .topics__row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){
  .topicstep--dated .topics__row{grid-template-columns:1fr}
  .topic__sub{white-space:normal}
}

/* ==================================================================
   BOOKING WIDGET
   Segmented service selector over an inline field row. The row changes
   with the service so a six-service flow never looks like one long form.
   Underlined fields on glass: the labels carry the structure, so borders
   are unnecessary and the bar stays quiet over photography.
   ================================================================== */
.bk{border-radius:var(--radius-l);padding:clamp(16px,2vw,22px);
  background:var(--glassD-bg);border:1px solid rgba(245,243,239,.14);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(245,243,239,.14),0 20px 50px rgba(0,0,0,.30)}

/* --- segmented selector --- */
.bk__tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;margin-bottom:16px;
  background:rgba(14,22,32,.42);border-radius:100px;width:fit-content;max-width:100%}
.bk__tab{padding:10px 20px;border-radius:100px;cursor:pointer;white-space:nowrap;
  font-size:.875rem;font-weight:600;color:rgba(245,243,239,.72);
  transition:background .25s var(--ease),color .25s var(--ease)}
.bk__tab:hover{color:var(--surface)}
.bk__radio:checked + .bk__tab{background:var(--accent);color:var(--base);
  box-shadow:0 4px 14px rgba(184,153,104,.34)}
.bk__radio:focus-visible + .bk__tab{outline:2px solid var(--accent);outline-offset:2px}

/* --- panels: only the checked service is shown (CSS-only fallback) --- */
.bk__panel{display:block}          /* no-JS: every panel is a usable form */
.bk.is-live .bk__panel{display:none}
.bk.is-live .bk__panel.is-on{display:block;animation:bkIn .3s var(--ease) both}
@keyframes bkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bk.is-live .bk__panel.is-on{animation:none}}

/* --- inline field row --- */
.bk__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:4px 2px;align-items:end}
.bkf{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 14px;
  border-radius:12px;transition:background .2s var(--ease)}
.bkf:hover,.bkf:focus-within{background:rgba(245,243,239,.06)}
.bkf label{font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:rgba(245,243,239,.62);text-transform:none}
.bkf input,.bkf select{width:100%;padding:6px 0;border:0;border-bottom:1px solid rgba(245,243,239,.22);
  border-radius:0;background:transparent;color:var(--surface);
  font-size:.98rem;font-weight:600;box-shadow:none;
  transition:border-color .25s var(--ease)}
.bkf input::placeholder{color:rgba(245,243,239,.40);font-weight:400}
.bkf input:hover,.bkf select:hover{border-bottom-color:rgba(184,153,104,.6)}
.bkf input:focus,.bkf select:focus{outline:0;border-bottom-color:var(--accent);
  box-shadow:0 1px 0 0 var(--accent)}
.bkf select option{background:var(--base);color:var(--surface)}
.bkf .ac__list{background:linear-gradient(158deg,rgba(255,255,255,.96),rgba(245,243,239,.93))}
.bkf .ac__clear{top:auto;bottom:6px;background:rgba(245,243,239,.14);color:rgba(245,243,239,.8)}
.bkf .ac__clear:hover{background:var(--accent);color:var(--base)}
/* the native date/time widgets need a light indicator on a dark ground */
.bkf input[type="date"],.bkf input[type="time"]{color-scheme:dark}

.bk__go{display:flex;justify-content:flex-end;margin-top:14px}
.bk__go .btn{min-height:52px;padding-inline:34px}
.bk__note{margin:14px 2px 0;font-size:.8rem;color:rgba(245,243,239,.55);line-height:1.55}
.bk .formnote{background:rgba(245,243,239,.10);color:var(--surface);margin-top:12px}
.bk .formnote svg{color:var(--accent)}
.bk .formnote.is-ok{background:rgba(74,107,82,.22);color:#DDEBDF}
.bk .formnote.is-err{background:rgba(140,58,58,.22);color:#F4DedE}

@media(max-width:900px){
  /* All six services stay visible. A horizontal scroll strip would push Event,
     Messe and "Etwas anderes" off the right edge - precisely the enquiries a
     personal operator most wants, and the ones an instant-price competitor
     cannot serve. A 3x2 grid costs less CSS and hides nothing. */
  .bk__tabs{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;border-radius:var(--radius)}
  .bk__tab{text-align:center;padding:12px 10px;font-size:.83rem;border-radius:10px}
  .bk__row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .bk__go{justify-content:stretch}
  .bk__go .btn{width:100%}
}
@media(max-width:560px){.bk__row{grid-template-columns:1fr}}

/* on light grounds (the booking page) the same widget inverts */
.bk--light{background:var(--glass-bg);border:var(--glass-edge);
  box-shadow:var(--glass-hi),0 14px 40px rgba(14,22,32,.10)}
.bk--light .bk__tabs{background:var(--surface-2)}
.bk--light .bk__tab{color:var(--muted)}
.bk--light .bk__tab:hover{color:var(--ink)}
.bk--light .bkf label{color:var(--muted)}
.bk--light .bkf input,.bk--light .bkf select{color:var(--ink);
  border-bottom-color:var(--line)}
.bk--light .bkf input::placeholder{color:#a9b4c4}
.bk--light .bkf input[type="date"],.bk--light .bkf input[type="time"]{color-scheme:light}
.bk--light .bkf:hover,.bk--light .bkf:focus-within{background:rgba(255,255,255,.6)}
.bk--light .bk__note{color:var(--muted)}
.bk--light .bkf select option{background:#fff;color:var(--ink)}

/* hero booking bar: sits below the headline, over the photography */
.hero__bk{margin-top:clamp(26px,3.5vw,38px);max-width:1040px}
.hero{align-items:center;padding-bottom:clamp(56px,8vw,96px)}
@media(max-width:900px){.hero__bk{margin-top:24px}}

/* ==================================================================
   HERO BOOKING BAR
   The bar is the point of the hero, so it breaks out of the narrow text
   column and spans the full content width. Headline sits above it, proof
   points below, and the whole hero tightens so the bar is visible without
   scrolling on a laptop.
   ================================================================== */
.hero{align-items:center;min-height:auto;
  padding:calc(var(--hdr) + clamp(48px,6vw,86px)) 0 clamp(44px,5vw,68px)}
.hero__in{max-width:none}
.hero h1{max-width:16ch}
.hero__sub{max-width:52ch;margin-bottom:clamp(22px,3vw,30px)}
.hero__act{margin-bottom:0}
.hero__bk{margin-top:clamp(22px,3vw,32px);max-width:none;width:100%}
.hero__stats{margin-top:clamp(28px,3.5vw,44px);padding-top:clamp(20px,2.5vw,30px)}

/* the bar itself gets more room per field now that it is full width */
.hero__bk .bk__row{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media(max-width:1100px){.hero__bk .bk__row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
@media(max-width:560px){.hero__bk .bk__row{grid-template-columns:1fr}}

/* on very short viewports drop the proof row so the bar stays above the fold */
@media(max-height:760px) and (min-width:900px){
  .hero__stats{display:none}
  .hero h1{font-size:clamp(2rem,3.6vw,3.1rem)}
}

/* Bar above the fold: the hero's job is to get someone into the booking bar,
   so the type is sized to leave room for it on a laptop rather than filling
   the viewport with a headline. */
.hero{padding:calc(var(--hdr) + clamp(28px,3.5vw,52px)) 0 clamp(36px,4vw,56px)}
.hero h1{font-size:clamp(2rem,3.5vw,3.15rem);max-width:18ch}
.hero__sub{font-size:clamp(.98rem,1.25vw,1.1rem);max-width:56ch;
  margin:clamp(14px,1.8vw,20px) 0 clamp(20px,2.4vw,26px)}
.badge{margin-bottom:clamp(14px,1.8vw,20px)}
.hero__bk{margin-top:0}
.hero__stats{margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(16px,2vw,24px);
  gap:clamp(22px,4vw,52px)}
.stat b{font-size:clamp(1.5rem,2.4vw,2rem)}
@media(max-height:820px) and (min-width:900px){
  .hero h1{font-size:clamp(1.85rem,3vw,2.6rem)}
  .hero__sub{display:none}
}

/* Filled fields recede so the eye is drawn to what is still empty. */
.bkf input:not(:placeholder-shown):not(:focus){border-bottom-color:rgba(245,243,239,.34)}
.bk--light .bkf input:not(:placeholder-shown):not(:focus){border-bottom-color:var(--line)}

/* ==================================================================
   AUDIT FIXES A - CONTRAST & FOCUS
   Every ratio below was measured by the audit. Text targets 4.5:1,
   control boundaries and focus rings target 3:1.
   ================================================================== */

/* #4 placeholder was off-palette blue-grey at 2.08:1 */
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}

/* #5 input boundary was 1.30:1 - effectively invisible */
.field input,.field select,.field textarea{border-color:#8A8579}
.bk--light .bkf input,.bk--light .bkf select{border-bottom-color:#8A8579}

/* #7 outline:0 was cancelling the design system's focus ring on every control */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.bkf input:focus-visible,.bkf select:focus-visible{
  outline:2px solid var(--accent-700);outline-offset:2px}
.bk:not(.bk--light) .bkf input:focus-visible,
.bk:not(.bk--light) .bkf select:focus-visible{outline-color:var(--accent)}

/* #6 gold ring was landing on the light dropdown panels at 2.68:1 */
.drop :focus-visible,.lang__menu :focus-visible{outline-color:var(--accent-700)}

/* #8 current mobile-menu link was gold on white at 2.69:1 */
@media(max-width:1180px){
  .nav__a:hover,.nav__a.is-on,
  .hdr.is-solid .nav__a:hover,.hdr.is-solid .nav__a.is-on{color:var(--accent-700)}
}

/* #9 the fixed orb layer was tinting light bands and dragging text under 4.5:1.
   Content sections now sit on an opaque surface; the orbs stay behind the hero
   and the dark bands, where they were always meant to live. */
.orbs i:nth-child(1){background:rgba(184,153,104,.10)}
.orbs i:nth-child(2){background:rgba(44,61,79,.12)}
.orbs i:nth-child(3){background:rgba(14,22,32,.08)}
.sect{background:var(--surface);position:relative;z-index:1}
.sect--alt{background:#EFEDE9}

/* #10 inactive segmented label 4.44:1  ·  #11 footer payment label 4.18:1 */
.taxtoggle button{color:var(--body)}
.ftr__pay-lbl{color:rgba(245,243,239,.55)}

/* #35 the validity tick was painted on top of the autocomplete clear button */
.field--place.is-valid::after{display:none}

/* ==================================================================
   AUDIT FIXES B - MOTION, NO-JS, KEYBOARD
   ================================================================== */

/* #13 reduced-motion was restarting the orbs rather than stopping them, which
   made them flicker - worse than ignoring the preference outright. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-iteration-count:1!important}
  .orbs i{animation:none!important}
  .hero__scroll{animation:none!important}
  .live-dot,.ring-pulse,.mini-wave span{animation:none!important}
  .ring-pulse{opacity:.32}
}

/* #12 + #29 the closed mobile nav stayed in the tab order off-screen: eight
   invisible tab stops. visibility removes it; the slide still animates. */
@media(max-width:1180px){
  .nav{visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s}
  body.nav-open .nav{visibility:visible;transition:transform .4s var(--ease),visibility 0s 0s}
  /* no-JS fallback: :target opens the panel without any script */
  .nav:target{visibility:visible;transform:translateX(0)}
}

/* #14 + #28 FAQ answers were clipped by default, so with JS off they were
   unreachable yet still announced as collapsed. The clamp is now conditional
   on JS being present; without it every answer is simply open. */
html.js .qa__a{max-height:0;overflow:hidden}
html:not(.js) .qa__a{max-height:none;overflow:visible}
html:not(.js) .qa__ic{display:none}
.qa.is-open .qa__a{max-height:1400px}