@charset "utf-8";
/* Imperial Travel — imperialtravel.tours
   Colours, geometry and the brand mark are derived from the company's
   original identity card (docs/imperial-travel-company-card.pdf). */

:root{
  --green:#163529;          /* PDF: .086 .208 .161 */
  --forest:#0B2019;
  --forest-deep:#071A14;
  --gold:#AD8B3E;           /* PDF: .678 .545 .243 */
  --champagne:#C6A15B;
  --gold-soft:rgba(173,139,62,.32);
  --ivory:#FBF8F1;          /* PDF: .984 .972 .945 */
  --cream:#F0EADC;
  --charcoal:#282521;       /* PDF: .157 .145 .129 */
  --muted:#6B665C;          /* PDF: .42 .4 .36 */
  --muted-light:rgba(245,240,230,.62);
  --line-dark:rgba(22,53,41,.14);
  --line-light:rgba(245,240,230,.16);

  --display:"Cormorant Garamond","Didot","Times New Roman",Georgia,serif;
  --ui:"Manrope","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;

  /* One type scale for the whole site. Every size below comes from here,
     so RU and EN set identically and no block invents its own step. */
  --t-body:clamp(15px,1.02vw,17px);      /* default paragraph            */
  --t-lede:clamp(15px,1.16vw,19px);      /* section intro                */
  --t-sm:clamp(13.5px,.95vw,15px);       /* card + row copy              */
  --t-xs:clamp(12.5px,.86vw,13.5px);     /* captions, notes, source line */
  --t-label:clamp(9.5px,.72vw,11px);     /* kickers, dt, form labels     */
  --t-nav:clamp(11px,.82vw,12px);        /* nav, buttons, footer meta    */
  --ls-label:.22em;

  --shell:clamp(20px,5vw,88px);
  --max:1560px;
  --sec:clamp(84px,10vw,168px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--ivory);color:var(--charcoal);
  font:400 var(--t-body)/1.72 var(--ui);
  letter-spacing:.005em;overflow-x:hidden;text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  /* никаких синтетических начертаний — RU и EN должны выглядеть одинаково */
  font-synthesis:none;font-optical-sizing:auto;
}
/* Cormorant в кириллице шире латиницы: чуть плотнее трекинг на крупных
   заголовках, чтобы RU и EN держали одинаковый ритм строки */
:lang(ru) .d1,:lang(ru) .d2{letter-spacing:-.016em}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--green);text-decoration:none;transition:color .3s var(--ease)}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}
::selection{background:rgba(173,139,62,.22)}
h1,h2,h3,h4,p,ul,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
main{display:block}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--shell)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--forest);color:var(--ivory);padding:14px 22px}
.skip:focus{left:12px;top:12px}

/* ── type ─────────────────────────────────────────────── */
.kicker{
  font:500 var(--t-label)/1.5 var(--ui);
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
}
:lang(ru) .kicker{letter-spacing:.28em}
.d1{font:300 clamp(40px,7.4vw,104px)/1.02 var(--display);letter-spacing:-.012em}
.d2{font:300 clamp(32px,4.6vw,68px)/1.06 var(--display);letter-spacing:-.008em}
.d3{font:300 clamp(24px,2.5vw,38px)/1.14 var(--display)}
.lede{font-size:var(--t-lede);line-height:1.72;color:var(--muted);max-width:62ch}
.on-dark .lede,.on-dark .body{color:var(--muted-light)}
.num{font:300 clamp(30px,3.4vw,58px)/1 var(--display);color:var(--gold);letter-spacing:.02em}
em.it{font-style:italic}

.on-dark{background:var(--forest);color:var(--ivory)}
.on-dark a{color:var(--ivory)}
.on-dark a:hover{color:var(--champagne)}
.rule{height:1px;background:var(--line-dark);border:0;margin:0}
.on-dark .rule{background:var(--line-light)}

/* gold hairline that grows on reveal */
.grow{display:block;height:1px;background:var(--gold);width:100%;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.in .grow,.grow.in{transform:scaleX(1)}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  --bd:var(--gold);
  display:inline-flex;align-items:center;gap:12px;min-height:52px;
  padding:15px 30px;border:1px solid var(--bd);color:var(--green);
  font:500 var(--t-nav)/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  position:relative;overflow:hidden;transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn>span{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover{color:var(--ivory)}
.btn:hover::before{transform:translateY(0)}
.btn-solid{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-solid::before{background:var(--green);transform:translateY(101%)}
.btn-solid:hover{color:#fff;border-color:var(--green)}
.btn-light{color:var(--ivory);border-color:rgba(198,161,91,.6)}
.btn-light:hover{color:var(--forest)}
.btn-light::before{background:var(--champagne)}
.btn-quiet{border-color:var(--line-dark);color:var(--muted)}
.on-dark .btn-quiet{border-color:var(--line-light);color:var(--muted-light)}
.btn-sm{min-height:40px;padding:11px 18px;font-size:10.5px;letter-spacing:.14em}

/* ── header ───────────────────────────────────────────── */
.hdr{
  position:fixed;inset:0 0 auto;z-index:90;
  transition:background .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr-in{
  max-width:var(--max);margin-inline:auto;padding:clamp(14px,1.6vw,22px) var(--shell);
  display:flex;align-items:center;gap:clamp(18px,3vw,54px);
}
.hdr.stuck{background:rgba(7,26,20,.86);backdrop-filter:blur(14px) saturate(140%);border-color:var(--line-light)}
.brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand img{width:clamp(38px,3.4vw,46px);height:auto}
.brand-txt{display:flex;flex-direction:column;gap:4px}
.brand-name{font:400 clamp(13px,1.05vw,16px)/1 var(--display);letter-spacing:.3em;color:var(--ivory);white-space:nowrap}
.brand-sub{font:500 8.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,34px);margin-left:auto}
.nav a{
  font:500 var(--t-nav)/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;color:rgba(251,248,241,.82);
  position:relative;padding:6px 0;
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--champagne);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover{color:var(--ivory)}
.nav a:hover::after{transform:scaleX(1)}
.lang{display:flex;align-items:center;gap:8px;font:500 var(--t-nav)/1 var(--ui);letter-spacing:.12em}
.lang a{color:rgba(251,248,241,.5);padding:6px 2px}
.lang a[aria-current]{color:var(--champagne)}
.lang span{color:rgba(251,248,241,.28)}
.hdr .btn{min-height:44px;padding:13px 22px;color:var(--ivory);border-color:rgba(198,161,91,.55)}
.hdr .btn::before{background:var(--champagne)}
.hdr .btn:hover{color:var(--forest)}
.burger{display:none;width:44px;height:44px;margin-left:auto;position:relative;z-index:110}
.burger i{position:absolute;left:11px;right:11px;height:1px;background:var(--ivory);transition:transform .4s var(--ease),opacity .3s}
.burger i:first-child{top:18px}
.burger i:last-child{top:25px}
body.menu-open .burger i:first-child{transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* full-screen mobile menu */
.mmenu{
  position:fixed;inset:0;z-index:100;background:var(--forest-deep);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:96px var(--shell) 40px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .45s var(--ease),transform .55s var(--ease),visibility .45s;
}
body.menu-open .mmenu{opacity:1;visibility:visible;transform:none}
.mmenu a.ml{
  font:300 clamp(28px,8vw,40px)/1.28 var(--display);color:var(--ivory);
  padding:8px 0;border-bottom:1px solid rgba(245,240,230,.08);
}
.mmenu .mfoot{margin-top:34px;display:flex;flex-direction:column;gap:18px}
.mmenu .lang a{color:rgba(251,248,241,.55);font-size:13px}

/* ── hero ─────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:clip;background:var(--forest-deep);padding-top:clamp(104px,13vh,170px)}
.hero-media{position:absolute;inset:0}
/* только сама фотография, не слои розы ветров */
.hero-media>img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
@media (prefers-reduced-motion:no-preference){
  .hero-media>img{animation:slowscale 26s var(--ease) forwards}
  @keyframes slowscale{from{transform:scale(1)}to{transform:scale(1.045)}}
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,26,20,.72) 0%,rgba(7,26,20,.3) 34%,rgba(7,26,20,.55) 68%,rgba(7,26,20,.92) 100%);
}
.hero-in{position:relative;width:100%;max-width:var(--max);margin-inline:auto;padding:0 var(--shell) clamp(56px,9vh,112px);color:var(--ivory)}

/* hero: brand compass rose filling the right half.
   Геометрия вращается, буквы румбов — отдельный статичный слой,
   иначе N уезжала вниз и читалась как случайные золотые крапины. */
.hero-rose{
  position:absolute;top:50%;right:clamp(-40px,1vw,24px);translate:0 -50%;
  width:clamp(400px,42vw,680px);aspect-ratio:1;pointer-events:none;z-index:1;
}
.hero-rose::before{
  content:"";position:absolute;inset:-18%;
  background:radial-gradient(circle at 50% 50%,rgba(198,161,91,.14),rgba(198,161,91,0) 66%);
}
.hero-rose img{position:absolute;inset:0;width:100%;height:100%;opacity:.34}
.hero-rose .cardinals{opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .hero-rose .geo{animation:rose 320s linear infinite}
}
@media (max-width:1000px){
  /* опускаем розу ниже хедера: на коротких экранах ~900–1000px
     верхний румб попадал вплотную к кнопке меню */
  .hero-rose{width:min(70vw,420px);right:-12%;top:auto;bottom:clamp(30%,34vh,42%);translate:0 0;opacity:.7}
}
@media (max-width:560px){
  .hero-rose{width:min(88vw,360px);right:-24%;bottom:38%}
}
.hero h1{margin:26px 0 0;max-width:19ch}
.hero .lede{margin-top:28px;color:rgba(251,248,241,.76);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vh,46px)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,44px);margin-top:clamp(40px,6vh,64px);
  padding-top:22px;border-top:1px solid var(--line-light);
  font:500 var(--t-label)/1.6 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,241,.52);
}

/* ── signature moment ─────────────────────────────────── */
.signature{background:var(--ivory);text-align:center;padding:clamp(72px,10vw,150px) 0;position:relative;overflow:hidden;isolation:isolate}
.signature .wrap{position:relative;z-index:1}
.signature .mark{width:clamp(58px,6vw,84px);margin:0 auto 30px}
.signature .wm{
  position:absolute;left:50%;top:50%;width:min(120vw,1180px);translate:-50% -50%;
  opacity:.035;pointer-events:none;
}
.signature h2{margin:0 auto;max-width:22ch}
.signature p{margin:26px auto 0;max-width:52ch}
.hair{width:1px;height:clamp(52px,7vw,88px);background:linear-gradient(180deg,transparent,var(--gold));margin:0 auto}

/* ── section heads ────────────────────────────────────── */
.sec{padding:var(--sec) 0}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(24px,4vw,72px);align-items:end}
.head .kicker{margin-bottom:22px;display:block}
.head-rule{margin-top:clamp(40px,5vw,64px)}

/* ── services ─────────────────────────────────────────── */
.svc{border-top:1px solid var(--line-dark)}
.svc-row{
  display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,1.1fr) 120px;
  gap:clamp(16px,3vw,48px);align-items:center;
  padding:clamp(24px,2.6vw,38px) 0;border-bottom:1px solid var(--line-dark);
  position:relative;transition:padding-left .5s var(--ease),color .4s var(--ease);
}
.svc-row>*{position:relative;z-index:2}
.svc-row .num{font-size:clamp(20px,1.7vw,26px);transition:color .4s var(--ease)}
.svc-row h3{font:300 clamp(22px,2.1vw,33px)/1.16 var(--display);transition:color .4s var(--ease)}
.svc-row p{color:var(--muted);font-size:var(--t-sm);transition:color .4s var(--ease)}
.svc-row .arrow{justify-self:end;color:var(--gold);opacity:0;transform:translateX(-14px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.svc-bg{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:0;transition:opacity .6s var(--ease)}
.svc-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,32,25,.94),rgba(11,32,25,.6))}
.svc-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease)}
@media (hover:hover){
  .svc-row:hover{padding-left:clamp(16px,2vw,34px)}
  .svc-row:hover .svc-bg{opacity:1}
  .svc-row:hover .svc-bg img{transform:scale(1)}
  .svc-row:hover h3{color:var(--ivory)}
  .svc-row:hover p{color:rgba(251,248,241,.72)}
  .svc-row:hover .num{color:var(--champagne)}
  .svc-row:hover .arrow{opacity:1;transform:none}
}

/* ── destinations ─────────────────────────────────────── */
.dest{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,28px);margin-top:clamp(40px,5vw,72px)}
.dcard{position:relative;display:block;overflow:hidden;background:var(--green)}
.dcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease),filter 1.2s var(--ease);filter:saturate(.92)}
.dcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,20,.05) 30%,rgba(7,26,20,.8) 100%)}
.dcard .cap{position:absolute;left:clamp(18px,2vw,32px);right:20px;bottom:clamp(18px,2vw,30px);z-index:2;color:var(--ivory)}
.dcard .cap h3{font:300 clamp(21px,2vw,32px)/1.1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.dcard .cap .reg{margin-top:9px;font:500 var(--t-label)/1.5 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.dcard .cap .atm{margin-top:12px;max-width:34ch;font-size:var(--t-sm);line-height:1.6;color:rgba(251,248,241,.72);opacity:0;max-height:0;transition:opacity .5s var(--ease),max-height .6s var(--ease)}
@media (hover:hover){
  .dcard:hover img{transform:scale(1.045);filter:saturate(1)}
  .dcard:hover .cap .atm{opacity:1;max-height:8em}
}
.d-tall{grid-column:span 5;aspect-ratio:4/5}
.d-wide{grid-column:span 7;aspect-ratio:16/11}
.d-half{grid-column:span 6;aspect-ratio:16/10}
.d-third{grid-column:span 4;aspect-ratio:4/5}

/* ── bespoke editorial ────────────────────────────────── */
/* overflow:hidden убран — он делал секцию scroll-контейнером; клиппинг живёт в .sec-ground */
.bespoke{background:var(--forest);color:var(--ivory)}
/* Фото слева тянется на всю высоту строки, текст и сценарий — справа:
   сколько бы ни было текста, пустого поля не остаётся ни с одной стороны. */
.bespoke-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,96px);align-items:stretch}
.bespoke .txt>.journey{margin-top:clamp(26px,3vw,42px)}
.bespoke-grid>.col-media{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px)}
/* Левая колонка — только фотография */
.bespoke .txt{padding-top:clamp(0px,2vw,32px)}
/* Закрываем остаток правой колонки фирменным блоком — не декор,
   а работающий CTA в нужном месте. */
.bespoke .aside{
  margin-top:clamp(30px,4vw,48px);padding-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--line-light);
  display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);
}
.bespoke .aside dl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin:0}
.bespoke .aside dt{font:500 var(--t-label)/1.5 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.bespoke .aside dd{margin:6px 0 0;font:300 clamp(17px,1.4vw,22px)/1.25 var(--display);color:var(--ivory)}
.bespoke .aside .ask{font-size:var(--t-sm);color:var(--muted-light);max-width:40ch}
/* Фото держится в своих пропорциях (без экстремального кропа и апскейла)
   и прилипает к верху, пока пролистывается текстовая колонка. */
.bespoke figure{
  position:sticky;top:clamp(96px,12vh,150px);align-self:start;
  overflow:hidden;aspect-ratio:4/5;height:auto;
}
.bespoke figure img{width:100%;height:100%;object-fit:cover}

/* bespoke: the journey panel that stands in for the photograph */
.journey{
  position:relative;border:1px solid var(--gold-soft);
  background:linear-gradient(160deg,rgba(251,248,241,.045),rgba(251,248,241,.012) 58%,rgba(7,26,20,.2));
  padding:clamp(30px,3.4vw,56px) clamp(24px,3vw,50px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(24px,2.8vw,38px);text-align:center;
}
.journey::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(173,139,62,.14);pointer-events:none;
}
.journey .j-hd{display:flex;flex-direction:column;align-items:center;gap:16px}
.journey .j-hd img{width:clamp(48px,4.2vw,62px);height:auto;opacity:.95}
.journey ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;width:100%;max-width:34ch}
.journey li{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:clamp(15px,1.7vw,22px) 0;border-top:1px solid var(--line-light);
}
.journey li:last-child{border-bottom:1px solid var(--line-light)}
.journey li .jn{font:300 clamp(17px,1.35vw,22px)/1 var(--display);color:var(--gold);letter-spacing:.08em}
.journey li .jt{font:300 clamp(22px,1.85vw,30px)/1.18 var(--display);color:var(--ivory)}
.journey li .js{
  font:500 var(--t-label)/1.5 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,248,241,.52);
}
.journey .j-ft{font:500 var(--t-label)/1.6 var(--ui);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--champagne)}
.bespoke .txt h2{margin-bottom:30px}
.bespoke .txt p+p{margin-top:20px}
.bespoke .qt{
  margin-top:clamp(30px,4vw,48px);padding-top:26px;border-top:1px solid var(--line-light);
  font:300 clamp(18px,1.5vw,23px)/1.5 var(--display);color:var(--champagne);max-width:34ch;
}

/* ── section grounds ──────────────────────────────────────
   No section is a flat fill: each carries the same brand depth
   as the hero — a soft light field plus a hairline compass motif
   at 2–4% — so the page reads as one lit space, not stacked boxes. */
.sec{position:relative;isolation:isolate}
.sec>.wrap{position:relative;z-index:1}
.sec-ground{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sec-ground img{
  position:absolute;width:min(120vw,1100px);height:auto;
  opacity:.038;filter:none;
}
.on-dark .sec-ground img,.desk .sec-ground img{opacity:.05}
.sec-ground::before{content:"";position:absolute;inset:0}

/* light sections: warm ivory lit from one side */
.sec:not(.on-dark):not(.desk):not(.legal) .sec-ground::before{
  background:
    radial-gradient(58% 74% at 82% 12%,rgba(173,139,62,.075),rgba(173,139,62,0) 62%),
    radial-gradient(52% 62% at 4% 88%,rgba(22,53,41,.055),rgba(22,53,41,0) 64%);
}
.legal .sec-ground::before{
  background:
    radial-gradient(56% 70% at 10% 6%,rgba(173,139,62,.09),rgba(173,139,62,0) 60%),
    radial-gradient(60% 66% at 92% 94%,rgba(22,53,41,.06),rgba(22,53,41,0) 64%);
}
/* dark sections: green depth + champagne glow */
.on-dark .sec-ground::before,.desk .sec-ground::before{
  background:
    radial-gradient(56% 66% at 88% 14%,rgba(198,161,91,.13),rgba(198,161,91,0) 62%),
    radial-gradient(64% 72% at 6% 92%,rgba(28,74,58,.5),rgba(28,74,58,0) 66%);
}
.signature .sec-ground::before{
  background:
    radial-gradient(48% 58% at 50% 30%,rgba(173,139,62,.085),rgba(173,139,62,0) 64%);
}

/* placement variants so no two sections look alike */
.sec-ground.g-right img{right:-16%;top:-24%}
.sec-ground.g-left img{left:-22%;bottom:-30%}
.sec-ground.g-center img{left:50%;top:50%;translate:-50% -50%;width:min(130vw,1280px)}
.sec-ground.g-tr img{right:-24%;top:-32%;width:min(96vw,880px)}
.sec-ground.g-bl img{left:-18%;bottom:-34%;width:min(96vw,880px)}
@media (prefers-reduced-motion:no-preference){
  .sec-ground.spin img{animation:rose 460s linear infinite}
}
@keyframes rose{to{transform:rotate(360deg)}}

/* ── process ──────────────────────────────────────────── */
.steps{margin-top:clamp(44px,5vw,80px);border-top:1px solid var(--line-dark)}
.step{
  display:grid;grid-template-columns:130px minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(16px,3vw,56px);align-items:start;padding:clamp(30px,3.4vw,52px) 0;
  border-bottom:1px solid var(--line-dark);
}
.step h3{font:300 clamp(21px,1.9vw,29px)/1.2 var(--display)}
.step .sname{margin-top:8px;font:500 var(--t-label)/1 var(--ui);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold)}
.step p{color:var(--muted);font-size:var(--t-sm)}

/* ── private desk ─────────────────────────────────────── */
.desk{background:var(--green);color:var(--ivory);position:relative;overflow:hidden}
.desk a{color:var(--champagne)}
.desk a:hover{color:var(--ivory)}
.form-note a{color:var(--champagne);text-decoration:underline;text-underline-offset:3px}
.desk .wm{position:absolute;right:-8%;top:-14%;width:min(78vw,760px);opacity:.045;pointer-events:none}
.desk-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,110px)}
.desk h2{margin:24px 0 26px}
.desk .contacts{margin-top:clamp(34px,4vw,52px);display:flex;flex-direction:column;gap:18px}
.tel{font:300 clamp(26px,2.7vw,42px)/1 var(--display);letter-spacing:.02em;color:var(--ivory)}
.desk-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}

/* ── form ─────────────────────────────────────────────── */
.form{background:rgba(251,248,241,.045);border:1px solid var(--line-light);padding:clamp(24px,2.6vw,44px)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1/-1}
.field label{font:500 var(--t-label)/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.field .req{color:var(--gold)}
.field input,.field textarea,.field select{
  background:transparent;border:0;border-bottom:1px solid rgba(245,240,230,.24);
  padding:12px 2px;color:var(--ivory);font:400 var(--t-body)/1.5 var(--ui);border-radius:0;
  transition:border-color .35s var(--ease);width:100%;
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--champagne)}
.field input::placeholder,.field textarea::placeholder{color:rgba(251,248,241,.34)}
.field select option{color:var(--charcoal)}
.field .err{font:400 var(--t-xs)/1.45 var(--ui);color:#E4B27A;min-height:0;display:none}
.field[data-invalid] input,.field[data-invalid] textarea{border-bottom-color:#E4B27A}
.field[data-invalid] .err{display:block}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:clamp(22px,2.4vw,32px)}
.form-note{font-size:var(--t-xs);line-height:1.65;color:rgba(251,248,241,.5);max-width:44ch}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-done{display:none;padding:clamp(28px,4vw,56px) 0;text-align:left}
.form.sent .f-grid,.form.sent .form-foot{display:none}
.form.sent .form-done{display:block}
.form-done .mark{width:56px;margin-bottom:22px}
.form-done h3{font:300 clamp(24px,2.2vw,34px)/1.2 var(--display);margin-bottom:14px}
.form-done p{color:var(--muted-light);max-width:44ch}

/* ── about + details ──────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,96px);align-items:start}
.about figure{aspect-ratio:3/4;overflow:hidden;background:var(--cream)}
.about figure img{width:100%;height:100%;object-fit:cover}
.legal{background:var(--cream)}
.legal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(30px,5vw,90px);align-items:start}
.dl{border-top:1px solid var(--line-dark)}
.dl-row{
  display:grid;grid-template-columns:minmax(140px,.6fr) minmax(0,1fr) 80px;
  gap:clamp(12px,2vw,32px);align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-dark);
}
.dl-row dt{font:500 var(--t-label)/1.5 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.dl-row dd{margin:0;font-size:var(--t-sm);color:var(--charcoal)}
.dl-row dd.mono{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.on-dark .dl,.on-dark .dl-row{border-color:var(--line-light)}
.on-dark .dl-row dd{color:var(--ivory)}
.copy{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--line-dark);
  font:500 9.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:0 0 auto;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);white-space:nowrap;
}
.copy:hover{color:var(--green);border-color:var(--gold)}
.copy[data-done]{color:var(--gold);border-color:var(--gold)}
.on-dark .copy{border-color:var(--line-light);color:var(--muted-light)}
.on-dark .copy:hover{color:var(--ivory);border-color:var(--champagne)}

/* ── footer ───────────────────────────────────────────── */
.ftr{background:var(--forest-deep);color:var(--ivory);padding:clamp(56px,7vw,104px) 0 34px}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(2,minmax(0,.8fr));gap:clamp(30px,4vw,72px)}
.ftr .brand-name{font-size:clamp(15px,1.2vw,19px)}
.ftr h4{font:500 var(--t-label)/1 var(--ui);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--champagne);margin-bottom:22px}
.ftr li+li{margin-top:11px}
.ftr li a,.ftr .body{font-size:var(--t-sm);color:rgba(251,248,241,.66)}
.ftr li a:hover{color:var(--ivory)}
.ftr-bot{
  margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--line-light);
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;
  font:400 var(--t-xs)/1.6 var(--ui);letter-spacing:.06em;color:rgba(251,248,241,.42);
}

/* ── sticky mobile whatsapp ───────────────────────────── */
.sticky-wa{
  position:fixed;right:16px;bottom:16px;z-index:80;display:none;
  align-items:center;gap:9px;padding:14px 18px;background:var(--green);color:var(--ivory);
  border:1px solid rgba(198,161,91,.5);
  font:500 var(--t-nav)/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 14px 34px rgba(7,26,20,.32);
  transform:translateY(140%);transition:transform .5s var(--ease);
}
.sticky-wa.on{transform:none}
.sticky-wa svg{width:16px;height:16px;flex:0 0 auto}

/* ── consent notice ───────────────────────────────────────
   Не fake cookie-баннер: сайт не ставит трекеров, поэтому здесь
   честное уведомление об обработке данных формы и технических
   cookies, с одной кнопкой согласия. Выбор хранится локально. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:rgba(7,26,20,.94);backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--gold-soft);color:var(--ivory);
  transform:translateY(102%);transition:transform .6s var(--ease);
}
.consent.on{transform:none}
/* Резервируем высоту плашки в потоке, пока она видна: иначе fixed-бар
   ложится на CTA hero, которые прижаты к низу экрана. */
html.has-consent{scroll-padding-bottom:var(--consent-h,104px)}
html.has-consent body{padding-bottom:var(--consent-h,104px)}
html.has-consent .err404{min-height:calc(100svh - var(--consent-h,104px))}
/* Hero прижат к низу, поэтому отдаём место плашке в его собственном
   боксе: нижний паддинг резервирует её высоту, а декоративная мета-строка
   (город · телефон · tagline) убирается — всё это есть ниже и в футере. */
html.has-consent .hero{min-height:calc(100svh - var(--consent-h,104px));padding-top:clamp(88px,11vh,140px)}
html.has-consent .hero-in{padding-bottom:calc(clamp(18px,3vh,38px) + var(--consent-h,104px))}
html.has-consent .hero-meta{display:none}
/* Низкие экраны: сжимаем и hero, и саму плашку */
@media (max-height:700px){
  html.has-consent .hero{padding-top:clamp(76px,10vh,104px)}
  html.has-consent .hero h1{font-size:clamp(30px,5vw,52px)}
  html.has-consent .hero .lede{font-size:var(--t-sm);max-width:46ch;margin-top:20px}
  html.has-consent .hero-cta{margin-top:24px}
  .consent-in{padding:12px var(--shell)}
  .consent p{font-size:11.5px;line-height:1.5}
  .consent .btn{min-height:38px;padding:10px 18px}
}
@media (prefers-reduced-motion:no-preference){
  html.has-consent body{transition:padding-bottom .6s var(--ease)}
}
.consent-in{
  max-width:var(--max);margin-inline:auto;
  padding:clamp(16px,1.8vw,24px) var(--shell);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2vw,34px);align-items:center;
}
.consent img{width:34px;height:auto;opacity:.9}
.consent p{font-size:var(--t-xs);line-height:1.65;color:rgba(251,248,241,.72);max-width:82ch}
.consent p a{color:var(--champagne);text-decoration:underline;text-underline-offset:3px}
.consent p a:hover{color:var(--ivory)}
.consent .consent-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.consent .btn{min-height:42px;padding:12px 22px;color:var(--ivory);border-color:rgba(198,161,91,.55)}
.consent .btn::before{background:var(--champagne)}
.consent .btn:hover{color:var(--forest)}
/* sticky-WhatsApp тоже fixed — поднимаем его над плашкой */
html.has-consent .sticky-wa{bottom:calc(16px + var(--consent-h,104px))}
@media (max-width:900px){
  .consent-in{grid-template-columns:1fr;gap:14px;text-align:left}
  .consent img{display:none}
  .consent .consent-cta .btn{flex:1 1 auto;justify-content:center}
}

/* ── inner pages ──────────────────────────────────────── */
.page-hd{background:var(--forest);color:var(--ivory);padding:calc(clamp(96px,11vw,150px) + 40px) 0 clamp(56px,7vw,96px)}
.page-hd h1{margin-top:24px;max-width:24ch}
.page-hd .lede{margin-top:24px;color:rgba(251,248,241,.72)}
.crumb{font:500 var(--t-label)/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,241,.5)}
.prose{max-width:76ch}
.prose h2{font:300 clamp(23px,2.1vw,32px)/1.2 var(--display);margin:clamp(40px,4vw,64px) 0 16px}
.prose h3{font:500 var(--t-nav)/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:32px 0 12px}
.prose p,.prose li{color:var(--muted);font-size:var(--t-body)}
.prose p+p{margin-top:16px}
.prose ul{margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.prose li{padding-left:20px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--gold)}
.prose .upd{margin-top:36px;font-size:var(--t-xs);color:var(--muted);letter-spacing:.06em}
.prose code{
  font:400 .92em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:rgba(22,53,41,.06);border:1px solid var(--line-dark);
  padding:1px 6px;color:var(--green);
}
.bank-card{border:1px solid var(--line-dark);padding:clamp(22px,2.6vw,40px)}
.bank-card+.bank-card{margin-top:clamp(18px,2vw,28px)}
.bank-card h3{font:500 var(--t-nav)/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.bank-card .src{margin-top:18px;font-size:var(--t-xs);color:var(--muted);line-height:1.65}
.bank-card .note{color:var(--muted);font-size:var(--t-xs);margin-bottom:10px}
.err404{min-height:100svh;display:grid;place-items:center;text-align:center;background:var(--forest-deep);color:var(--ivory);padding:120px var(--shell) 60px}
.err404 .mark{width:72px;margin:0 auto 30px}
.err404 .num404{font:300 clamp(72px,14vw,180px)/1 var(--display);color:var(--gold);opacity:.9}

/* ── reveal ───────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.35s var(--ease)}
.clip.in{clip-path:inset(0 0 0 0)}
.d1x{transition-delay:.09s}.d2x{transition-delay:.18s}.d3x{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}.clip{clip-path:none}.grow{transform:none}
}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:1180px){
  .svc-row{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr) 40px}
  .step{grid-template-columns:100px minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:1000px){
  .sec-ground img{width:min(150vw,760px)}
  .nav,.hdr .btn,.hdr>.hdr-in>.lang{display:none}
  .burger{display:block}
  .head,.bespoke-grid,.desk-grid,.about-grid,.legal-grid{grid-template-columns:1fr}
  .head{gap:20px;align-items:start}
  .bespoke figure{position:static;top:auto;height:auto;min-height:0;aspect-ratio:16/11;order:-1}
  .journey{order:2}
  .about figure{aspect-ratio:16/11}
  .d-tall,.d-wide,.d-half,.d-third{grid-column:span 6}
  .d-tall,.d-third{aspect-ratio:4/5}
  .d-wide,.d-half{aspect-ratio:16/11}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .sticky-wa{display:inline-flex}
}
@media (max-width:720px){
  .svc-row{grid-template-columns:48px minmax(0,1fr);gap:14px 18px;padding:22px 0}
  .svc-row p{grid-column:2}
  .svc-row .arrow{display:none}
  .step{grid-template-columns:64px minmax(0,1fr);gap:10px 18px}
  .step p{grid-column:2}
  .f-grid{grid-template-columns:1fr}
  .dcard .cap .atm{opacity:1;max-height:8em}
  .d-tall,.d-wide,.d-half,.d-third{grid-column:span 12}
  .ftr-grid{grid-template-columns:1fr}
  .dl-row{grid-template-columns:1fr auto;gap:6px 14px}
  .dl-row dd{grid-column:1}
  .dl-row .copy{grid-row:1/3;grid-column:2;align-self:center}
  .hero{min-height:92svh}
  .form{padding:22px 18px;margin-inline:calc(var(--shell) * -.25)}
}
@media (max-width:380px){
  .brand-txt{gap:3px}
  .brand-name{font-size:12px;letter-spacing:.24em}
  .hero-meta{gap:12px;font-size:9.5px;letter-spacing:.16em}
}
@media print{
  html.has-consent body{padding-bottom:0}
  html.has-consent .hero{min-height:auto}
  .hdr,.mmenu,.sticky-wa,.hero-media,.copy,.consent,.sec-ground,.hero-rose{display:none!important}
  body{background:#fff;color:#000}
  .on-dark,.desk,.ftr,.page-hd,.bespoke{background:#fff!important;color:#000!important}
}