/* ============ BASE / TOKENS ============ */
:root{
  --ink:#0D0C0B; --ink2:#161311; --ink3:#221D19;
  --bone:#F6F2EC; --sand:#E6DCCC; --mute:#9C9289;
  --brass:#B08D4F; --brass-l:#D8B87C;
  --line:rgba(246,242,236,.10); --line-d:rgba(13,12,11,.12);
  --r:2px; --wrap:1280px;
  --ff-d:"Playfair Display",Georgia,serif;
  --ff-b:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--ff-b);
  font-size:16.5px;line-height:1.7;font-weight:350;letter-spacing:.005em;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--ff-d);font-weight:500;line-height:1.08;letter-spacing:-.015em;margin:0}
p{margin:0 0 1.1em}
.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.wrap-n{width:min(100% - 2.6rem,980px);margin-inline:auto}
section{position:relative}
::selection{background:var(--brass);color:#0D0C0B}

/* micro type */
.eyebrow{font-size:.685rem;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-l);
  font-weight:500;display:flex;align-items:center;gap:.85rem;margin-bottom:1.4rem}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--brass);flex:none;opacity:.7}
.eyebrow.c{justify-content:center}
.eyebrow.c::after{content:"";width:34px;height:1px;background:var(--brass);opacity:.7}
.h-xl{font-size:clamp(2.4rem,6.4vw,5.1rem)}
.h-l{font-size:clamp(2rem,4.4vw,3.5rem)}
.h-m{font-size:clamp(1.5rem,2.6vw,2.15rem)}
.lead{font-size:clamp(1.02rem,1.35vw,1.16rem);color:#CFC6BB;max-width:62ch}
.it{font-style:italic;color:var(--brass-l)}
.mu{color:var(--mute)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1.02rem 1.9rem;font-size:.775rem;
  letter-spacing:.19em;text-transform:uppercase;font-weight:500;border:1px solid var(--brass);
  color:var(--bone);position:relative;overflow:hidden;transition:color .45s var(--ease);border-radius:var(--r);cursor:pointer;background:none}
.btn span{position:relative;z-index:2}
.btn::after{content:"";position:absolute;inset:0;background:var(--brass);transform:translateY(101%);
  transition:transform .5s var(--ease);z-index:1}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:#0D0C0B}
.btn-fill{background:var(--brass);color:#0D0C0B;border-color:var(--brass)}
.btn-fill::after{background:var(--bone)}
.btn-sm{padding:.78rem 1.35rem;font-size:.7rem}
.arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ============ HEADER ============ */
.top{background:var(--ink2);border-bottom:1px solid var(--line);font-size:.76rem;color:var(--mute)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:1rem}
.top a:hover{color:var(--brass-l)}
.top .t-r{display:flex;gap:1.6rem;align-items:center}
header{position:sticky;top:0;z-index:90;background:rgba(13,12,11,.72);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background .4s}
header.solid{background:rgba(13,12,11,.97)}
.nav{display:flex;align-items:center;justify-content:space-between;height:82px;transition:height .4s var(--ease)}
header.solid .nav{height:70px}
.logo{display:flex;align-items:center;gap:.72rem;flex:none}
.logo .mark{width:38px;height:38px;border:1px solid var(--brass);display:grid;place-items:center;
  font-family:var(--ff-d);font-size:1.12rem;color:var(--brass-l);flex:none}
.logo b{font-family:var(--ff-d);font-weight:500;font-size:1.13rem;letter-spacing:.02em;display:block;line-height:1.1}
.logo small{display:block;font-size:.6rem;letter-spacing:.28em;color:var(--mute);text-transform:uppercase}
.menu{display:flex;gap:2.1rem;align-items:center;list-style:none;margin:0;padding:0}
.menu>li>a{font-size:.795rem;letter-spacing:.14em;text-transform:uppercase;position:relative;padding:.5rem 0;display:inline-block}
.menu>li>a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brass);transition:width .38s var(--ease)}
.menu>li>a:hover::after,.menu>li>a.on::after{width:100%}
.has-sub{position:relative}
.caret{display:inline-block;margin-left:.35rem;transition:transform .35s}
.has-sub:hover .caret{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);min-width:640px;
  background:#131110;border:1px solid var(--line);padding:1.5rem;display:grid;grid-template-columns:repeat(2,1fr);
  gap:.2rem;opacity:0;visibility:hidden;transition:.38s var(--ease);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.has-sub:hover .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sub a{display:flex;align-items:baseline;gap:.8rem;padding:.72rem .9rem;border-radius:var(--r);transition:background .3s}
.sub a:hover{background:rgba(176,141,79,.1)}
.sub a i{font-style:normal;font-family:var(--ff-d);font-size:.72rem;color:var(--brass);width:20px;flex:none}
.sub a strong{font-weight:400;font-size:.95rem;display:block}
.sub a em{font-style:normal;font-size:.75rem;color:var(--mute);display:block}
.nav-cta{display:flex;align-items:center;gap:1rem;flex:none}
.tel-nav{font-family:var(--ff-d);font-size:1.05rem;color:var(--brass-l);white-space:nowrap}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:none;cursor:pointer;
  padding:0;position:relative;flex:none;border-radius:var(--r)}
.burger i{position:absolute;left:12px;width:20px;height:1px;background:var(--bone);transition:.35s var(--ease)}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
body.mnav .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.mnav .burger i:nth-child(2){opacity:0}
body.mnav .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;inset:0;background:var(--ink);z-index:80;padding:120px 1.6rem 3rem;overflow-y:auto;
  transform:translateY(-100%);transition:transform .55s var(--ease);display:none}
body.mnav .drawer{transform:translateY(0)}
.drawer a{display:block;padding:.9rem 0;border-bottom:1px solid var(--line);font-size:1.28rem;font-family:var(--ff-d)}
.drawer .dsub a{font-size:.98rem;font-family:var(--ff-b);color:var(--mute);padding-left:1.1rem}

/* ============ HERO ============ */
.hero{min-height:calc(100svh - 122px);display:flex;align-items:center;padding:6rem 0 4.5rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 90% at 78% 12%,rgba(176,141,79,.20) 0%,transparent 58%),
  radial-gradient(90% 70% at 10% 96%,rgba(176,141,79,.10) 0%,transparent 60%),
  linear-gradient(160deg,#151211 0%,#0D0C0B 60%)}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:3.6rem;align-items:center}
.hero h1{font-size:clamp(2.6rem,6.1vw,5.05rem);letter-spacing:-.025em}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block;transform:translateY(105%);animation:up 1s var(--ease) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.11s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.22s}
@keyframes up{to{transform:translateY(0)}}
.fade-in{opacity:0;animation:fi .9s var(--ease) forwards}
@keyframes fi{to{opacity:1}}
.d1{animation-delay:.45s}.d2{animation-delay:.6s}.d3{animation-delay:.75s}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.3rem}
.hero-stats{display:flex;gap:2.6rem;margin-top:3.2rem;padding-top:1.9rem;border-top:1px solid var(--line);flex-wrap:wrap}
.hero-stats b{display:block;font-family:var(--ff-d);font-size:2.1rem;color:var(--brass-l);line-height:1}
.hero-stats span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
/* hero visual card */
.hframe{position:relative;aspect-ratio:4/5;border:1px solid var(--line);overflow:hidden;background:var(--ink2)}
.hframe img{width:100%;height:100%;object-fit:cover}
.hframe .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;
  background:linear-gradient(150deg,#1E1A16,#0F0D0C);color:var(--mute);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.hframe .ph::before{content:"";position:absolute;inset:14px;border:1px solid var(--line)}
.hbadge{position:absolute;left:-1px;bottom:-1px;background:var(--brass);color:#0D0C0B;padding:1.05rem 1.5rem;
  font-family:var(--ff-d);font-size:1.42rem;line-height:1.05;max-width:74%}
.hbadge em{display:block;font-style:normal;font-family:var(--ff-b);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.75;margin-top:.25rem}
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);font-size:.62rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mute);display:flex;flex-direction:column;
  align-items:center;gap:.6rem;z-index:3}
.scroll-cue i{width:1px;height:42px;background:linear-gradient(var(--brass),transparent);animation:sc 2.1s infinite}
@keyframes sc{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ MARQUEE ============ */
.marq{border-block:1px solid var(--line);background:var(--ink2);overflow:hidden;padding:1.05rem 0}
.marq-in{display:flex;gap:3.2rem;width:max-content;animation:mv 34s linear infinite}
.marq span{font-family:var(--ff-d);font-size:1.18rem;color:#5B534B;white-space:nowrap;display:flex;align-items:center;gap:3.2rem}
.marq span::after{content:"◆";color:var(--brass);font-size:.6rem}
@keyframes mv{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.sec{padding:clamp(4.4rem,9vw,8rem) 0}
.sec-light{background:var(--bone);color:#181513}
.sec-light h1,.sec-light h2,.sec-light h3{color:#12100E}
.sec-light .mu,.sec-light .lead{color:#5E564E}
.sec-light .eyebrow{color:#8A6A2E}
.sec-light .eyebrow::before,.sec-light .eyebrow::after{background:#B08D4F}
.sec-light .btn{border-color:#B08D4F;color:#181513}
.sec-light .btn:hover{color:var(--bone)}
.sec-light .btn::after{background:#181513}
.sec-alt{background:var(--ink2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.6rem);align-items:center}
.mb-h{margin-bottom:3.2rem}

/* ============ CATALOG BENTO ============ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat{position:relative;overflow:hidden;border:1px solid var(--line);min-height:250px;display:flex;
  align-items:flex-end;background:var(--ink2);isolation:isolate}
.cat:nth-child(1){grid-column:span 2;grid-row:span 2;min-height:520px}
.cat:nth-child(6){grid-column:span 2}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--ease);filter:saturate(.85)}
.cat:hover img{transform:scale(1.06)}
.cat .glow{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(9,8,7,.92) 8%,rgba(9,8,7,.25) 60%,transparent);transition:.5s}
.cat:hover .glow{background:linear-gradient(to top,rgba(9,8,7,.95) 12%,rgba(30,22,12,.42) 65%,rgba(176,141,79,.10))}
.cat .fill{position:absolute;inset:0;z-index:-2;background:linear-gradient(155deg,#211C17,#0E0C0B)}
.cat .body{padding:1.7rem;width:100%}
.cat .num{font-family:var(--ff-d);font-size:.75rem;color:var(--brass);letter-spacing:.1em}
.cat h3{font-size:clamp(1.3rem,2.2vw,1.9rem);margin:.35rem 0 .3rem}
.cat p{font-size:.85rem;color:#B6ADA3;margin:0;max-width:44ch}
.cat .go{margin-top:1rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-l);
  display:inline-flex;gap:.5rem;align-items:center;opacity:0;transform:translateY(8px);transition:.45s var(--ease)}
.cat:hover .go{opacity:1;transform:translateY(0)}
.cat::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:.5s}
.cat:hover::after{border-color:rgba(176,141,79,.45)}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}

/* ============ MATERIALS CONFIGURATOR ============ */
.mat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.mat-view{position:relative;aspect-ratio:5/4;border:1px solid var(--line);overflow:hidden;background:#151211}
.mat-surface{position:absolute;inset:0;transition:background 1s var(--ease),box-shadow 1s}
.mat-view .door{position:absolute;inset:9%;border-radius:2px;transition:background 1s var(--ease),box-shadow .8s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 60px rgba(0,0,0,.5)}
.mat-view .door::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(0,0,0,.22)}
.mat-view .handle{position:absolute;top:38%;height:22%;width:5px;border-radius:4px;background:linear-gradient(180deg,#E4CFA5,#9C7C42);
  box-shadow:0 2px 8px rgba(0,0,0,.5);transition:background .6s}
.mat-view .handle.l{left:calc(50% - 16px)}.mat-view .handle.r{left:calc(50% + 11px)}
.mat-view.chrome .handle{background:linear-gradient(180deg,#EDEDED,#8C8C8C)}
.mat-view.black .handle{background:linear-gradient(180deg,#4A4A4A,#141414)}
.mat-label{position:absolute;left:0;bottom:0;background:rgba(13,12,11,.85);backdrop-filter:blur(6px);
  padding:.75rem 1.15rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);border-top:1px solid var(--line);border-right:1px solid var(--line)}
.swatches{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 2rem}
.sw{width:52px;height:52px;border:1px solid rgba(246,242,236,.18);cursor:pointer;position:relative;
  transition:transform .35s var(--ease),border-color .35s;border-radius:2px}
.sw:hover{transform:translateY(-4px)}
.sw.on{border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,141,79,.22)}
.sw.on::after{content:"";position:absolute;inset:auto 0 -12px 0;height:2px;background:var(--brass)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-bottom:1.4rem}
.seg button{background:none;border:0;color:var(--mute);padding:.62rem 1.05rem;font:inherit;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.3s;font-family:var(--ff-b)}
.seg button.on{background:var(--brass);color:#0D0C0B}
.mat-facts{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.65rem}
.mat-facts li{display:flex;gap:.8rem;font-size:.92rem;color:#C3BAB0;align-items:flex-start}
.mat-facts li::before{content:"✓";color:var(--brass);font-size:.85rem;line-height:1.6}

/* ============ VALUES / ICON CARDS ============ */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.card{background:var(--ink);padding:2.3rem 1.7rem;transition:background .5s var(--ease);position:relative}
.card:hover{background:var(--ink3)}
.sec-light .card{background:var(--bone)}
.sec-light .cards{background:rgba(24,21,19,.14)}
.sec-light .card:hover{background:#EFE9E0}
.card .ic{width:44px;height:44px;margin-bottom:1.2rem;color:var(--brass)}
.card h3{font-size:1.16rem;margin-bottom:.5rem}
.card p{font-size:.88rem;color:#A79E94;margin:0}
.sec-light .card p{color:#6A6259}

/* ============ NUMBERS ============ */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.nums b{font-family:var(--ff-d);font-size:clamp(2.6rem,5.4vw,4.2rem);color:var(--brass-l);display:block;line-height:1}
.nums span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* ============ PROCESS ============ */
.proc{display:grid;grid-template-columns:270px 1fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:start}
.steps{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.steps li{position:relative}
.steps button{background:none;border:0;color:var(--mute);font:inherit;text-align:left;width:100%;
  padding:.95rem 1.2rem;cursor:pointer;display:flex;gap:.85rem;align-items:baseline;transition:.35s;font-family:var(--ff-b)}
.steps button:hover{color:var(--bone)}
.steps button.on{color:var(--bone)}
.steps li::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--brass);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.steps li.on::before{transform:scaleY(1)}
.steps i{font-style:normal;font-family:var(--ff-d);font-size:.76rem;color:var(--brass);width:52px;flex:none}
.proc-panel{border:1px solid var(--line);padding:clamp(1.8rem,3.5vw,3rem);background:var(--ink2);min-height:290px}
.proc-panel .day{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-l);margin-bottom:.9rem}
.proc-panel h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.9rem}
.proc-panel p{color:#BDB4AA;max-width:58ch}
.proc-fade{animation:pf .55s var(--ease)}
@keyframes pf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line-d)}
.sec:not(.sec-light) .faq{border-color:var(--line)}
.q{border-bottom:1px solid var(--line-d)}
.sec:not(.sec-light) .q{border-color:var(--line)}
.q>button{width:100%;background:none;border:0;text-align:left;padding:1.4rem 2.6rem 1.4rem 0;cursor:pointer;
  font-family:var(--ff-d);font-size:clamp(1.02rem,1.6vw,1.25rem);color:inherit;position:relative;transition:color .3s}
.q>button:hover{color:var(--brass)}
.q>button::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font-family:var(--ff-b);font-size:1.35rem;color:var(--brass);transition:transform .4s var(--ease)}
.q.open>button::after{transform:translateY(-50%) rotate(45deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.q .a p{padding:0 3rem .1rem 0;font-size:.95rem;color:#6A6259}
.sec:not(.sec-light) .q .a p{color:#ABA298}

/* ============ CONTACT ============ */
.contact{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,4.6vw,4rem)}
.cbox{display:grid;gap:1.5rem}
.cline{display:flex;gap:1rem;align-items:flex-start;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.cline .ic{width:20px;color:var(--brass);flex:none;margin-top:.28rem}
.cline small{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.cline b{font-weight:400;font-family:var(--ff-d);font-size:1.24rem}
.navbtns{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.4rem}
.navbtn{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1rem;border:1px solid var(--line);
  font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;transition:.4s var(--ease);border-radius:2px}
.navbtn:hover{border-color:var(--brass);background:rgba(176,141,79,.1);transform:translateY(-2px)}
.navbtn svg{width:17px;flex:none}
.ngm{color:#E8E2D8}.nwz{color:#E8E2D8}
.frm{display:grid;gap:1rem}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.frm label{display:block;font-size:.67rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:.45rem}
.frm input,.frm select,.frm textarea{width:100%;background:rgba(246,242,236,.04);border:1px solid var(--line);
  color:var(--bone);padding:.92rem 1rem;font:inherit;font-size:.95rem;border-radius:2px;transition:.35s;font-family:var(--ff-b)}
.frm textarea{min-height:120px;resize:vertical}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:0;border-color:var(--brass);background:rgba(176,141,79,.07)}
.frm select option{background:#161311;color:var(--bone)}
.frm .note{font-size:.74rem;color:var(--mute)}
.frm .note a{color:var(--brass-l);text-decoration:underline}
.fmsg{padding:.9rem 1.1rem;border:1px solid var(--brass);background:rgba(176,141,79,.12);font-size:.9rem;display:none}
.map{border:1px solid var(--line);filter:grayscale(1) contrast(.9) brightness(.82);transition:filter .6s}
.map:hover{filter:none}
.map iframe{display:block;width:100%;height:340px;border:0}

/* ============ FOOTER ============ */
footer{background:#0A0908;border-top:1px solid var(--line);padding:4.4rem 0 0}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.4rem;padding-bottom:3rem}
footer h4{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-l);
  font-family:var(--ff-b);font-weight:500;margin-bottom:1.15rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
footer a{font-size:.9rem;color:#9A9188;transition:color .3s}
footer a:hover{color:var(--brass-l)}
footer p{font-size:.9rem;color:#9A9188;max-width:38ch}
.fbot{border-top:1px solid var(--line);padding:1.4rem 0;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.78rem;color:#6E655C}
.fbot a{font-size:.78rem}

/* ============ MODAL ============ */
.modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:1.2rem}
.modal.on{display:grid}
.modal-bd{position:absolute;inset:0;background:rgba(6,5,5,.82);backdrop-filter:blur(5px);animation:fi .35s var(--ease) forwards;opacity:0}
.modal-in{position:relative;width:min(100%,560px);background:#141110;border:1px solid var(--line);
  padding:clamp(1.6rem,3.4vw,2.6rem);max-height:92vh;overflow-y:auto;animation:pf .45s var(--ease)}
.modal-x{position:absolute;top:.85rem;right:.85rem;width:38px;height:38px;background:none;border:1px solid var(--line);
  color:var(--bone);cursor:pointer;font-size:1.2rem;line-height:1;border-radius:2px;transition:.3s}
.modal-x:hover{border-color:var(--brass);color:var(--brass)}
.fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:70;display:none;gap:.6rem}
.fab a,.fab button{width:52px;height:52px;display:grid;place-items:center;background:var(--brass);color:#0D0C0B;
  border:0;border-radius:50%;box-shadow:0 10px 26px rgba(0,0,0,.5);cursor:pointer}
.fab svg{width:22px}

/* ============ PAGE HERO (inner) ============ */
.phero{padding:5.6rem 0 3.6rem;background:
  radial-gradient(90% 120% at 82% 0%,rgba(176,141,79,.16),transparent 62%),linear-gradient(#141110,#0D0C0B)}
.crumbs{font-size:.73rem;color:var(--mute);letter-spacing:.1em;margin-bottom:1.5rem}
.crumbs a:hover{color:var(--brass-l)}
.phero h1{font-size:clamp(2.15rem,5vw,3.9rem);max-width:20ch}
.phero .lead{margin-top:1.2rem}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);background:var(--ink2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal figure:hover img{transform:scale(1.07)}
.gal .ph{position:absolute;inset:0;display:grid;place-items:center;color:#4E463F;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;background:linear-gradient(150deg,#1C1815,#100E0D)}
.ulist{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 2rem;list-style:none;padding:0;margin:0}
.ulist li{display:flex;gap:.85rem;font-size:.95rem;color:#BDB4AA;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.ulist li::before{content:"—";color:var(--brass)}
.cta-band{background:linear-gradient(105deg,#1A1613,#0D0C0B 70%);border-block:1px solid var(--line);text-align:center}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr;gap:2.8rem}
  .hframe{aspect-ratio:16/11;max-width:560px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .cat:nth-child(1){grid-column:span 2;grid-row:auto;min-height:340px}
  .cat:nth-child(6){grid-column:span 2}
  .cards{grid-template-columns:repeat(2,1fr)}
  .mat,.contact,.grid2{grid-template-columns:1fr}
  .proc{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .menu,.tel-nav,.nav-cta .btn{display:none}
  .burger,.drawer{display:block}
  .fab{display:flex}
  .top .t-r a:not(.t-tel){display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap,.wrap-n{width:min(100% - 1.8rem,var(--wrap))}
  .hero{min-height:auto;padding:3.4rem 0 3.4rem}
  .hero-stats{gap:1.6rem}
  .hero-stats b{font-size:1.75rem}
  .bento,.cards,.nums,.gal,.f2,.ulist{grid-template-columns:1fr}
  .cat:nth-child(n){grid-column:auto;min-height:250px}
  .nums{gap:2.2rem}
  .fgrid{grid-template-columns:1fr;gap:2rem}
  .navbtns{grid-template-columns:1fr}
  .scroll-cue{display:none}
  .btn{padding:.95rem 1.4rem;font-size:.72rem}
  .top .wrap{font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* fix: counters inside <b> must inherit display size */
.nums b span,.hero-stats b span{font-size:inherit;letter-spacing:inherit;text-transform:none;color:inherit;font-family:inherit}

/* fix: малки телефони (320-420px) */
@media (max-width:520px){
  .top .wrap{justify-content:flex-end}
  .top .wrap>span:first-child{display:none}
}
@media (max-width:420px){
  .logo .mark{width:32px;height:32px;font-size:.98rem}
  .logo b{font-size:.96rem}
  .logo small{font-size:.5rem;letter-spacing:.16em}
  .nav{height:68px}
  .burger{width:40px;height:40px}
  .burger i{left:10px}
  .btn{letter-spacing:.14em}
}

/* лого изображение в хедъра/футъра */
.logo img.mark{width:auto;height:44px;border:0;padding:0;display:block}
header.solid .logo img.mark{height:40px}
@media (max-width:420px){.logo img.mark{height:36px}}
.logo b{letter-spacing:.155em;font-size:1.03rem}
.logo small{letter-spacing:.22em;font-size:.575rem}
.logo img.mark{height:48px}
header.solid .logo img.mark{height:42px}
@media (max-width:420px){.logo b{font-size:.85rem;letter-spacing:.12em}.logo small{font-size:.48rem}}
.hframe-w{aspect-ratio:4/3}
@media (max-width:1080px){.hframe-w{aspect-ratio:4/3;max-width:640px}}

/* ================= HERO v2 (full-bleed + hotspots) ================= */
.hero2{position:relative;min-height:calc(100svh - 122px);display:flex;align-items:center;
  padding:5rem 0 5.5rem;overflow:hidden;background:linear-gradient(140deg,#161211 0%,#0C0B0A 62%)}
.hero2::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 60% at 6% 88%,rgba(176,141,79,.13),transparent 62%)}
.hero2-media{position:absolute;right:0;top:0;bottom:0;width:47%;overflow:hidden;z-index:1}
.hero2-media picture,.hero2-media img{width:100%;height:100%;display:block;object-fit:cover}
.hero2-media img{transform:scale(1.06);transition:transform .9s var(--ease);will-change:transform;
  animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.14) translate(-1.2%,-1%)}}
.hero2-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#0C0B0A 0%,rgba(12,11,10,.86) 16%,rgba(12,11,10,.30) 46%,rgba(12,11,10,.12) 72%,rgba(12,11,10,.42) 100%)}
.hero2-cap{position:absolute;left:auto;right:1.4rem;bottom:1.4rem;z-index:4;display:flex;align-items:baseline;gap:.7rem;
  background:rgba(10,9,8,.62);backdrop-filter:blur(8px);border:1px solid var(--line);padding:.62rem 1rem}
.hero2-cap span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#E4DCD0}
.hero2-cap em{font-style:normal;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-l)}
.hero2-in{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,50%) 1fr}
.hero2 h1{font-size:clamp(2.5rem,5.2vw,4.5rem);letter-spacing:-.025em}
.hero2 h1 .ln{display:block;overflow:hidden}
.hero2 h1 .ln>span{display:block;transform:translateY(105%);animation:up 1s var(--ease) forwards}
.hero2 h1 .ln:nth-child(2)>span{animation-delay:.1s}
.hero2 h1 .ln:nth-child(3)>span{animation-delay:.2s}

/* hotspots */
.hs{position:absolute;z-index:5;left:var(--x);top:var(--y);width:34px;height:34px;margin:-17px 0 0 -17px;
  padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.hs i{width:11px;height:11px;border-radius:50%;background:var(--brass-l);position:relative;display:block;
  box-shadow:0 0 0 1px rgba(12,11,10,.5)}
.hs i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(216,184,124,.85);
  animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.hs .tip{position:absolute;left:26px;top:50%;transform:translate(-6px,-50%);width:236px;text-align:left;
  background:rgba(10,9,8,.92);backdrop-filter:blur(10px);border:1px solid rgba(176,141,79,.4);
  padding:.85rem 1rem;opacity:0;visibility:hidden;transition:.4s var(--ease);pointer-events:none}
.hs.l .tip{left:auto;right:26px;transform:translate(6px,-50%)}
.hs:hover .tip,.hs:focus-visible .tip,.hs.on .tip{opacity:1;visibility:visible;transform:translate(0,-50%)}
.hs .tip b{display:block;font-family:var(--ff-d);font-size:1rem;color:var(--bone);font-weight:500;margin-bottom:.2rem}
.hs .tip em{font-style:normal;font-size:.8rem;color:#B3AAA0;line-height:1.5;display:block}
.hs:hover i,.hs.on i{background:#fff}
.hs-hint{position:absolute;z-index:4;right:1.4rem;top:1.4rem;font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:#C9BFB3;background:rgba(10,9,8,.55);backdrop-filter:blur(6px);
  border:1px solid var(--line);padding:.5rem .8rem;display:flex;gap:.5rem;align-items:center}
.hs-hint b{color:var(--brass-l);font-weight:400}

@media (max-width:1080px){
  .hero2{min-height:auto;padding:3.2rem 0 0;display:block}
  .hero2-media{position:relative;width:100%;height:auto;aspect-ratio:4/3;margin-top:2.6rem}
  .hero2-scrim{background:linear-gradient(180deg,rgba(12,11,10,.55) 0%,transparent 30%,rgba(12,11,10,.35) 100%)}
  .hero2-in{grid-template-columns:1fr}
  .hero2 h1{font-size:clamp(2.3rem,7.4vw,3.4rem)}
}
@media (max-width:640px){
  .hero2-media{aspect-ratio:3/2}
  .hs{width:30px;height:30px}
  .hs .tip{width:200px;font-size:.9rem}
  .hs-hint{right:.8rem;top:.8rem;font-size:.56rem}
  .hero2-cap{right:.8rem;bottom:.8rem;padding:.5rem .75rem}
}
@media (max-width:1080px){
  .hero2{padding:0}
  .hero2-media{margin-top:0}
  .hero2-in{padding-top:2.6rem;padding-bottom:.5rem}
}

/* ================= HERO v3 (full-bleed background) ================= */
.hero3{position:relative;min-height:calc(100svh - 122px);display:flex;align-items:center;
  padding:5.5rem 0 6.5rem;overflow:hidden;background:#0C0B0A}
.hero3-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero3-media picture,.hero3-media img{width:100%;height:100%;display:block;object-fit:cover}
.hero3-media img{animation:kb 30s ease-in-out infinite alternate;will-change:transform;
  transition:transform .9s var(--ease)}
.hero3-scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(9,8,7,.94) 0%,rgba(9,8,7,.88) 26%,rgba(9,8,7,.62) 52%,rgba(9,8,7,.34) 74%,rgba(9,8,7,.55) 100%),
  linear-gradient(180deg,rgba(9,8,7,.55) 0%,transparent 28%,transparent 62%,rgba(9,8,7,.72) 100%)}
.hero3-in{position:relative;z-index:3;max-width:670px}
.hero3 h1{font-size:clamp(2.5rem,5.4vw,4.6rem);letter-spacing:-.025em;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.hero3 h1 .ln{display:block;overflow:hidden}
.hero3 h1 .ln>span{display:block;transform:translateY(105%);animation:up 1s var(--ease) forwards}
.hero3 h1 .ln:nth-child(2)>span{animation-delay:.1s}
.hero3 h1 .ln:nth-child(3)>span{animation-delay:.2s}
.hero3 .lead{color:#DED5C9;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hero3-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid var(--line);
  background:rgba(9,8,7,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero3-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  padding:1.05rem 0;flex-wrap:wrap}
.hero3-bar .st{display:flex;gap:2.6rem;flex-wrap:wrap}
.hero3-bar b{font-family:var(--ff-d);font-size:1.55rem;color:var(--brass-l);line-height:1;display:block}
.hero3-bar small{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#A79E94;display:block;margin-top:.2rem}
.hero3-cap{display:flex;align-items:baseline;gap:.7rem}
.hero3-cap span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#CFC5B9}
.hero3-cap em{font-style:normal;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-l)}
@media (max-width:1080px){
  .hero3{min-height:86svh;padding:4rem 0 8.5rem}
  .hero3-scrim{background:linear-gradient(180deg,rgba(9,8,7,.72) 0%,rgba(9,8,7,.55) 34%,rgba(9,8,7,.78) 100%)}
  .hero3-in{max-width:none}
  .hero3-bar .wrap{padding:.9rem 0}
  .hero3-bar .st{gap:1.5rem}
  .hero3-bar b{font-size:1.25rem}
}
@media (max-width:640px){
  .hero3{min-height:88svh;padding:3rem 0 9rem}
  .hero3 h1{font-size:clamp(2.1rem,8vw,3rem)}
  .hero3-bar .st{gap:1.1rem;width:100%;justify-content:space-between}
  .hero3-bar small{font-size:.56rem;letter-spacing:.12em}
  .hero3-cap{display:none}
}
.hero3-media img{object-position:50% 58%;animation:kb3 34s ease-in-out infinite alternate}
@keyframes kb3{from{transform:scale(1.01)}to{transform:scale(1.07)}}
.hero3-scrim{background:
  linear-gradient(90deg,rgba(9,8,7,.86) 0%,rgba(9,8,7,.70) 28%,rgba(9,8,7,.44) 55%,rgba(9,8,7,.24) 78%,rgba(9,8,7,.40) 100%),
  linear-gradient(180deg,rgba(9,8,7,.50) 0%,transparent 26%,transparent 60%,rgba(9,8,7,.68) 100%)}
@media (max-width:1080px){.hero3-scrim{background:linear-gradient(180deg,rgba(9,8,7,.62) 0%,rgba(9,8,7,.48) 34%,rgba(9,8,7,.80) 100%)}}
/* тултипите на hotspot-ите се отварят надясно, за да не покриват заглавието */
.hero3 .hs .tip{left:26px;right:auto;transform:translate(-6px,-50%)}
.hero3 .hs:hover .tip,.hero3 .hs:focus-visible .tip,.hero3 .hs.on .tip{transform:translate(0,-50%)}
@media (max-width:1080px){
  .hero3 .hs .tip{left:50%;right:auto;top:auto;bottom:28px;width:min(66vw,240px);transform:translate(-50%,8px)}
  .hero3 .hs:hover .tip,.hero3 .hs:focus-visible .tip,.hero3 .hs.on .tip{transform:translate(-50%,0)}
}
@media (max-width:1080px){
  .hero3 .hs .tip{width:min(72vw,250px);bottom:30px;top:auto}
  .hero3 .hs.a-r .tip{left:auto;right:-2px;transform:translate(0,8px)}
  .hero3 .hs.a-r:hover .tip,.hero3 .hs.a-r:focus-visible .tip,.hero3 .hs.a-r.on .tip{transform:translate(0,0)}
}
@media (max-width:640px){.hero3-bar .wrap{padding-right:74px}}

/* по-лека сянка върху херо снимката */
.hero3-scrim{background:
  linear-gradient(90deg,rgba(9,8,7,.60) 0%,rgba(9,8,7,.46) 30%,rgba(9,8,7,.24) 58%,rgba(9,8,7,.10) 80%,rgba(9,8,7,.22) 100%),
  linear-gradient(180deg,rgba(9,8,7,.34) 0%,transparent 26%,transparent 64%,rgba(9,8,7,.50) 100%)}
.hero3 h1{text-shadow:0 2px 18px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.45)}
.hero3 .lead{color:#E6DED4;text-shadow:0 1px 10px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.5)}
.hero3 .eyebrow{text-shadow:0 1px 8px rgba(0,0,0,.8)}
@media (max-width:1080px){.hero3-scrim{background:linear-gradient(180deg,rgba(9,8,7,.48) 0%,rgba(9,8,7,.34) 34%,rgba(9,8,7,.62) 100%)}}

/* по-плътен градиент в плочките със снимки, за да се чете текстът */
.cat .glow{background:linear-gradient(to top,rgba(8,7,6,.96) 0%,rgba(8,7,6,.90) 26%,rgba(8,7,6,.58) 52%,rgba(8,7,6,.20) 78%,transparent 100%)}
.cat:hover .glow{background:linear-gradient(to top,rgba(8,7,6,.96) 0%,rgba(8,7,6,.88) 26%,rgba(30,22,12,.55) 56%,rgba(176,141,79,.14) 100%)}
.cat h3,.cat p,.cat .num{text-shadow:0 1px 12px rgba(0,0,0,.75)}

/* съвсем лека сянка в плочките от каталога */
.cat .glow{background:linear-gradient(to top,rgba(8,7,6,.80) 0%,rgba(8,7,6,.52) 24%,rgba(8,7,6,.20) 50%,transparent 74%)}
.cat:hover .glow{background:linear-gradient(to top,rgba(8,7,6,.84) 0%,rgba(8,7,6,.54) 24%,rgba(30,22,12,.24) 56%,rgba(176,141,79,.12) 100%)}
.cat h3{text-shadow:0 2px 14px rgba(0,0,0,.92),0 1px 3px rgba(0,0,0,.75)}
.cat p,.cat .num,.cat .go{text-shadow:0 1px 10px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.8)}
/* сянката пада само зад текстовия блок, снимката остава чиста */
.cat .glow{background:linear-gradient(to top,rgba(8,7,6,.42) 0%,rgba(8,7,6,.18) 30%,transparent 60%)}
.cat:hover .glow{background:linear-gradient(to top,rgba(8,7,6,.46) 0%,rgba(30,22,12,.20) 40%,rgba(176,141,79,.10) 100%)}
.cat .body{background:linear-gradient(to top,rgba(8,7,6,.94) 0%,rgba(8,7,6,.86) 45%,rgba(8,7,6,.62) 75%,rgba(8,7,6,0) 100%);
  padding-top:3.2rem}
@media (min-width:1081px){.cat{min-height:295px}.cat:nth-child(1){min-height:604px}}

/* ===== плочки без сянка върху снимката: текстът е под нея ===== */
.cat{display:flex;flex-direction:column;align-items:stretch;background:var(--ink2)}
.cat .glow{display:none}
.cat picture{position:relative;display:block;flex:1 1 auto;min-height:0;overflow:hidden}
.cat picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 1.1s var(--ease);filter:none}
.cat:hover picture img{transform:scale(1.06)}
.cat .fill{position:relative;inset:auto;flex:1 1 auto;min-height:110px;display:block;z-index:0}
.cat .body{position:relative;z-index:1;background:var(--ink2);padding:1.35rem 1.6rem 1.6rem;flex:0 0 auto}
.cat h3,.cat p,.cat .num,.cat .go{text-shadow:none}
.cat:hover .body{background:#1E1915}
.cat .body{transition:background .5s var(--ease)}
@media (min-width:1081px){.cat{min-height:384px}.cat:nth-child(1){min-height:782px}}
@media (max-width:1080px){.cat{min-height:330px}.cat:nth-child(1){min-height:380px}}
/* по-големи карти, за да доминира снимката */
@media (min-width:1081px){.cat{min-height:452px}.cat:nth-child(1){min-height:918px}}
@media (max-width:1080px){.cat{min-height:420px}.cat:nth-child(1){min-height:470px}}
@media (max-width:640px){.cat{min-height:400px}.cat:nth-child(1){min-height:400px}}
/* галерия с надписи */
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:.85rem 1rem;font-size:.78rem;color:#E4DCD0;
  background:linear-gradient(to top,rgba(8,7,6,.92),rgba(8,7,6,.55) 60%,transparent);letter-spacing:.02em}
.gal figure{position:relative}
.gal picture{position:absolute;inset:0;display:block}
.gal picture img{width:100%;height:100%;object-fit:cover}
.gal figcaption{z-index:2}

/* голям банер в страница Проекти */
.banner{position:relative;border:1px solid var(--line);overflow:hidden;background:var(--ink2)}
.banner img{width:100%;height:auto;display:block}
.banner .ph{aspect-ratio:16/7;display:grid;place-items:center;color:#4E463F;font-size:.75rem;
  letter-spacing:.22em;text-transform:uppercase;background:linear-gradient(150deg,#1C1815,#100E0D);text-align:center;padding:1.5rem}
.gal-4{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.gal-4{grid-template-columns:1fr}}
.gal-4{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.gal-4{grid-template-columns:1fr}}
/* картата е цветна постоянно */
.map,.map:hover{filter:none}

/* ===== мобилна версия: изчистване ===== */
@media (max-width:640px){
  /* картите в каталога: снимка 4:3 + текст, без фиксирана височина */
  .cat:nth-child(n){min-height:0}
  .cat picture{flex:0 0 auto;aspect-ratio:4/3}
  .cat .fill{flex:0 0 auto;aspect-ratio:4/3;min-height:0}
  /* лентата под херото: 3 колони + място за плаващите бутони */
  .hero3-bar .wrap{padding:.9rem 0 4.4rem}
  .hero3-bar .st{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%}
  .hero3-bar b{font-size:1.12rem}
  .hero3-bar small{font-size:.52rem;letter-spacing:.1em;line-height:1.25}
}
@media (max-width:640px){
  .hero3{min-height:82svh}
  .hero3-media img{object-position:50% 52%}
  /* банерът в Проекти става разгледаем чрез плъзгане */
  .banner{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .banner picture{display:block;min-width:760px}
  .banner img{min-width:760px}
  .banner-hint{display:block}
}
.banner-hint{display:none;font-size:.75rem;color:var(--mute);margin-top:.7rem}
@media (max-width:640px){
  /* празното заглавие във втората колона на футъра прави дупка на телефон */
  footer .fgrid>div:nth-child(3) h4{display:none}
  footer .fgrid{gap:1.6rem}
  footer .fgrid>div:nth-child(3){margin-top:-1rem}
  /* място за плаващите бутони */
  .fbot{padding-bottom:5rem}
}
/* новото лого е по-широко от старото */
.logo img.mark{height:42px}
header.solid .logo img.mark{height:36px}
@media (max-width:420px){.logo img.mark{height:32px}.logo b{font-size:.9rem}}