/* HATORI HILLS | Violet Gold Edition 4.0 | responsive glassmorphism */
:root {
 --bg:#09051a;--bg2:#130923;--surface:#241439;--surface2:#291846;
 --text:#f9f3ff;--muted:#c4b9d8;--line:rgba(230,195,143,.25);
 --accent:#e5bf86;--blue:#c4a5ff;--gold:#e3bb7b;--gold-light:#f7d9a2;
 --gold-edge:rgba(247,210,150,.48);--max:1220px;
}
html {scroll-padding-top:105px}
body {
 background:radial-gradient(ellipse 70% 19% at 82% 37%,rgba(102,50,166,.22),transparent 75%),
 radial-gradient(ellipse 70% 29% at -15% 73%,rgba(87,36,148,.24),transparent 70%),#0b061b;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
 color:var(--text);
}
header {top:0;background:rgba(9,5,25,.72);border-bottom:1px solid rgba(218,172,112,.24);box-shadow:0 10px 35px #03000b55;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}
.nav {height:81px;gap:18px}
.brand {gap:10px}
.brand-mark {height:45px;width:45px;border:1px solid var(--gold-edge);background:rgba(9,5,22,.62);box-shadow:0 0 24px #be85ff29;border-radius:12px}
.brand-mark img {width:38px;height:38px;object-fit:cover}
.brand-word{color:#f5e6ca;font-weight:660;font-size:17px;letter-spacing:.18em}
.brand-sub{color:#d3badb;font-size:7px;letter-spacing:.25em}
.navlinks{gap:28px}.navlinks a{color:#e8dcf4;font-weight:570;font-size:12px}.navlinks a:hover{color:var(--gold-light)}
.nav-cta {color:#1d0d24!important;background:linear-gradient(135deg,#ffe6b6,#be8859)!important;border:1px solid #f9d1a1;border-radius:10px;box-shadow:0 6px 20px #bb86402e;font-weight:780}
.nav-cta:hover{filter:brightness(1.13)}
.lang-switch {border-color:rgba(230,196,150,.3)!important;background:rgba(18,8,35,.75)!important}
.lang-option[aria-pressed=true]{background:rgba(226,186,129,.21)!important;color:var(--gold-light)!important}
.hero {position:relative;min-height:615px;isolation:isolate;display:flex;align-items:center;padding:68px 0 70px!important;background:linear-gradient(100deg,#090519 3%,#150b30 47%,#140d31 100%)!important;border-bottom:1px solid rgba(223,186,122,.34)}
.hero-scene {position:absolute;inset:0 0 0 38%;z-index:-3;background-image:linear-gradient(0deg,#0b061b 0%,transparent 24%,rgba(13,7,32,.06) 78%,#0b061b 100%),url('assets/hero-moon.png');background-size:100% 100%,cover;background-position:center,center center;opacity:.98}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#0b061b 0%,rgba(12,6,29,.95) 22%,rgba(10,5,26,.24) 52%,transparent 79%),radial-gradient(circle at 90% 10%,rgba(180,112,255,.12),transparent 34%)}
.hero::after{content:'';position:absolute;left:-40px;right:-40px;bottom:12px;height:1px;background:linear-gradient(90deg,transparent,#efbf76,rgba(247,213,166,.46),transparent);opacity:.75;pointer-events:none}
.hero-grid{grid-template-columns: minmax(0,610px) 1fr;gap:24px;align-items:center}
.hero-intro {position:relative;padding:44px 43px 38px;border-radius:21px;overflow:hidden;min-height:430px;background:linear-gradient(127deg,rgba(54,31,76,.66),rgba(21,10,44,.66) 75%);box-shadow:0 16px 60px rgba(0,0,0,.36),0 0 48px rgba(180,117,237,.1);border:1px solid rgba(244,199,144,.46);backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px)}
.glass-premium::before {content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(132deg,rgba(255,235,217,.21),transparent 31%,transparent 72%,rgba(247,209,153,.10));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);opacity:.8}
.hero-intro::after {content:'';position:absolute;inset:0;pointer-events:none;border-radius:21px;box-shadow:inset 0 1px 0 rgba(255,246,234,.27),inset 0 -1px 0 rgba(255,208,154,.16)}
.hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:480;letter-spacing:-.043em;font-size:clamp(52px,4.7vw,74px);line-height:1.08;margin:22px 0 20px;max-width:540px}
.hero h1 em{font-style:normal;display:block;letter-spacing:-.034em;background:linear-gradient(100deg,#f3dba9,#dbac75,#ffe6b6);background-clip:text;-webkit-background-clip:text;color:transparent}
.eyebrow {color:var(--gold-light);letter-spacing:.21em;font-size:10px;font-weight:660}
.eyebrow .dot{background:var(--gold);box-shadow:0 0 13px rgba(247,204,146,.6)}
.hero-description{color:#e0d2e8;max-width:475px;font-size:14px;line-height:1.8;margin:0}
.actions{margin-top:27px;gap:10px}
.btn{border-radius:10px;padding:13px 18px;font-size:12px;letter-spacing:.006em}
.btn.primary,.nav-cta{background:linear-gradient(120deg,#ffebc3,#d2a16b)!important;color:#28162e!important;border:1px solid rgba(255,237,208,.61)!important;box-shadow:0 7px 24px rgba(226,169,110,.24)}
.btn.primary:hover{background:linear-gradient(120deg,#fff1d3,#e7b37a)!important;box-shadow:0 9px 32px rgba(243,178,109,.38)}
.telegram-btn,.telegram-outline{background:rgba(20,8,41,.55)!important;border:1px solid rgba(238,192,123,.64)!important;color:#f2dcbd!important}
.telegram-btn:hover,.telegram-outline:hover{background:rgba(157,105,200,.19)!important}
.hero-perks{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(232,191,133,.30);color:#d8c6df;font-size:10px;letter-spacing:.015em}
.hero-perks span::first-letter{color:var(--gold-light)}
.hero-breathing{min-height:400px}
.hero-gold-divider{height:4px;background:linear-gradient(90deg,transparent 1%,rgba(232,174,95,.95) 19%,rgba(226,192,155,.43) 61%,transparent 94%);filter:drop-shadow(0 1px 10px #f2af746c)}
.ticker{background:rgba(13,7,31,.93);border-block:1px solid rgba(219,169,107,.23)}
.ticker-inner{color:#b9a7cc;padding:17px 0;font-size:10px;letter-spacing:.19em}
.ticker-inner span b{color:#edc286}
section.content-section{padding:84px 0;background:transparent!important}
.section-heading{margin:13px 0 27px}
.section-heading h2,.process-heading h2,.final-cta h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(39px,4.2vw,58px);font-weight:480;letter-spacing:-.04em;line-height:1.08;color:#fff1dd}
.section-heading p {font-size:13px;line-height:1.75;max-width:390px;color:#d6c5df}
.service-grid{gap:14px}
.service{position:relative;min-height:244px;padding:25px 22px 22px;overflow:hidden;border:1px solid rgba(237,193,139,.37);background:linear-gradient(130deg,rgba(73,45,108,.42),rgba(22,10,47,.80));border-radius:16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 12px 39px rgba(0,0,0,.2),inset 0 1px 0 rgba(252,238,255,.10)}
.service::before{content:'';position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 42%,rgba(240,207,249,.10) 51%,transparent 58%);transform:translateX(-60%) rotate(7deg);transition:transform .6s;pointer-events:none}
.service:hover::before{transform:translateX(40%) rotate(7deg)}
.service:hover{border-color:#f5cf9a;box-shadow:0 17px 44px rgba(151,91,189,.19),0 0 18px rgba(247,187,117,.08)}
.service-icon,.service:nth-child(2) .service-icon,.service:nth-child(3) .service-icon,.service:nth-child(4) .service-icon{border-radius:11px;color:#f4d196;background:linear-gradient(145deg,#3c275a,#1a0b37);border:1px solid rgba(242,195,130,.43);box-shadow:0 5px 20px #0802115c;font-size:23px}
.service h3{font-size:17px;letter-spacing:-.02em}.service p{color:#cdbfda;font-size:12px;line-height:1.75}
.service-link{color:#f2c98f;font-weight:690}.service-link:hover{color:#ffe2b5}
.portfolio-section{padding-top:30px!important}
.filter{background:rgba(49,27,80,.50);color:#d8c7e7;border-color:rgba(235,195,144,.27)}
.filter:hover{background:rgba(71,39,110,.70);border-color:rgba(243,203,156,.65)}
.filter[aria-pressed=true]{background:linear-gradient(110deg,#fae3b9,#cfa16a);color:#2e1934;border-color:transparent}
.projects{gap:18px}
.project{overflow:hidden;border:1px solid rgba(234,191,139,.32);border-radius:17px;background:linear-gradient(147deg,rgba(48,27,81,.92),rgba(18,8,35,.95));box-shadow:0 13px 38px rgba(0,0,0,.2)}
.project:hover{border-color:#f6c98f;box-shadow:0 22px 55px rgba(79,34,132,.26)}
.project-cover{height:218px}.project-cover::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -22px 36px rgba(15,6,34,.15)}
.project-label{z-index:2;border:1px solid rgba(242,215,179,.5);background:rgba(14,7,32,.45);color:#fff2d8;backdrop-filter:blur(7px)}
.project-body{padding:19px 21px 20px}.project-body h3{color:#fff4e2}.project-body p{color:#cbb7da}
.round-arrow{border:1px solid rgba(244,199,139,.57);background:rgba(32,15,58,.85);color:#f6cf96}
.round-arrow:hover{background:linear-gradient(140deg,#f7dda9,#cf985f)!important;color:#24122c}
.process-section{border-block:1px solid rgba(235,183,124,.25)!important;background:radial-gradient(circle at 80% 20%,rgba(129,73,196,.24),transparent 43%),linear-gradient(120deg,rgba(28,11,52,.96),rgba(38,16,68,.96))!important}
.step{border-top-color:rgba(232,185,122,.54)}.step p{color:#cbbed8;font-size:13px}
.cabinet-preview{background:linear-gradient(135deg,rgba(74,43,111,.70),rgba(24,10,47,.83))!important;border:1px solid rgba(239,195,133,.40);backdrop-filter:blur(16px)}
.cabinet-header{background:rgba(63,37,92,.58)!important;color:#f7dcbb}.cabinet-text p{color:#d8cbe1}
.cabinet-points span{border-color:rgba(231,182,115,.3)!important;color:#dcc7e3}
.cta-section{padding:55px 0 100px;background:radial-gradient(ellipse at 45% 65%,rgba(91,52,154,.21),transparent 65%)}
.contact-layout{display:grid;grid-template-columns:.9fr 1.23fr .75fr;gap:19px;align-items:stretch}
.contact-copy{padding:12px 8px 15px 0}.contact-copy h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,3.4vw,54px);line-height:1.06;letter-spacing:-.04em;font-weight:480;color:#fff1db;margin:22px 0}
.contact-copy h2 em{font-style:normal;color:#ecc187}.contact-copy p{color:#d0c0da;line-height:1.75;font-size:13px;max-width:330px}
.contact-line{width:100px;height:1px;margin:21px 0;background:linear-gradient(90deg,#f8d69c,transparent)}
.contact-copy small{color:#a99bbd;display:block;font-size:10px;line-height:1.6;max-width:280px}
.quick-form,.contact-telegram{position:relative;border:1px solid rgba(235,191,131,.48);border-radius:17px;background:linear-gradient(130deg,rgba(84,49,112,.35),rgba(21,9,42,.78));backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);box-shadow:0 18px 47px #06011352,inset 0 1px rgba(255,247,232,.13)}
.quick-form{padding:25px}
.contact-form-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;color:#f4d8af;font-size:13px;font-weight:620;letter-spacing:.03em}
.small-gold{color:#f4d08c;font-size:18px}
.quick-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-form label{display:block;color:#d5c4df;font-size:10px;margin-bottom:6px}
.quick-form input,.quick-form textarea{display:block;background:rgba(17,7,39,.55);border:1px solid rgba(214,184,223,.28);color:#f9f2ff;border-radius:9px;padding:12px;width:100%;font-size:12px;resize:vertical;min-width:0}
.quick-form input::placeholder,.quick-form textarea::placeholder{color:#9d8daf}.quick-form input:focus,.quick-form textarea:focus{border-color:#efc58a!important;outline:2px solid rgba(239,197,138,.38)}
.quick-form >div:nth-of-type(3){margin-top:13px}.quick-form textarea{min-height:89px}
.quick-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.quick-footer small{font-size:10px;color:#ac9ebe;max-width:160px;line-height:1.5}
.quick-footer button{white-space:nowrap}
.contact-telegram{padding:25px 19px;display:flex;flex-direction:column;align-items:flex-start}
.contact-eyebrow{font-size:9px;color:#e3c49d;letter-spacing:.19em;margin-bottom:23px}
.tg-symbol{height:48px;width:48px;display:grid;place-items:center;background:linear-gradient(135deg,#4d9fea,#116cb3);border-radius:14px;font-size:26px;color:#fff;transform:rotate(-20deg);box-shadow:0 7px 25px rgba(67,140,224,.3);margin-bottom:21px}
.contact-telegram strong{font-size:19px;letter-spacing:-.04em;color:#fff1df}
.contact-telegram p{color:#c6b5d3;line-height:1.7;font-size:12px;margin:12px 0 20px}
.contact-telegram .btn{font-size:12px;width:100%}
.tg-note{display:block;margin-top:auto;padding-top:20px;color:#aa97bf;font-size:10px}
footer{background:rgba(9,5,23,.95)!important;border-top:1px solid rgba(241,192,126,.4)}.footer-telegram,.to-top{color:#f4d3a1}
.modal{background:linear-gradient(130deg,rgba(52,29,79,.98),rgba(17,8,33,.99))!important;border:1px solid rgba(241,194,128,.53);box-shadow:0 24px 100px #030008b5}
.modal input,.modal textarea,.modal select{background:rgba(10,5,27,.55)!important;color:#fff1ff!important;border:1px solid rgba(221,194,230,.32)!important}
.modal .helper{color:#ab9cbb}.modal-telegram{border-color:#d8ad79;color:#f1d09e}.modal-telegram:hover{background:rgba(239,191,134,.14)}
@media(max-width:1130px){.navlinks{gap:15px}.nav{gap:12px}.brand-word{font-size:14px;letter-spacing:.12em}.hero-grid{grid-template-columns:55% 45%}.contact-layout{grid-template-columns:1fr 1.3fr}.contact-telegram{grid-column:2;display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:8px 15px;padding:15px 20px}.contact-eyebrow,.tg-note{display:none}.tg-symbol{grid-row:1/3;margin:0;width:44px;height:44px}.contact-telegram p{grid-column:2;margin:0}.contact-telegram .btn{grid-row:1/3;grid-column:3;width:auto}.contact-telegram strong{font-size:16px}}
@media(max-width:790px){.navlinks{gap:11px}.nav-cta{padding:10px 11px!important;font-size:11px}.brand-sub{display:none}.hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}.hero{min-height:650px;padding:65px 0 65px!important}.hero-scene{inset:0 0 0 18%;background-position:center,center center;opacity:.74}.hero::before{background:linear-gradient(90deg,rgba(9,5,23,.92),rgba(14,5,28,.56) 70%,rgba(14,5,28,.33))}.hero-intro{width:min(100%,610px)}.hero-breathing{display:none}.service-grid{grid-template-columns:repeat(2,1fr)}.projects{grid-template-columns:repeat(2,1fr)}.contact-layout{grid-template-columns:1fr 1fr}.contact-copy{grid-column:1/-1}.contact-copy h2{max-width:550px}.contact-telegram{grid-column:2;display:flex;padding:23px}.contact-eyebrow,.tg-note{display:block}.contact-telegram .btn{width:100%}.contact-telegram p{margin:12px 0 20px}.tg-symbol{margin-bottom:18px}.quick-fields{grid-template-columns:1fr}}
@media(max-width:740px){.nav{height:68px}.navlinks{background:rgba(16,7,35,.98)!important;border:1px solid rgba(231,185,121,.35);border-radius:12px;top:65px;left:12px;right:12px;padding:22px;backdrop-filter:blur(16px)}.menu-toggle{border:1px solid rgba(227,182,120,.34);border-radius:10px;color:#edcfac;background:rgba(35,14,65,.6)}.hero{padding:49px 0 65px!important}.hero-intro{padding:37px 32px;min-height:auto}.hero h1{font-size:clamp(48px,8.9vw,69px)}}
@media(max-width:550px){.brand-mark{width:38px;height:38px}.brand-word{font-size:11px;letter-spacing:.1em}.brand-mark img{width:32px;height:32px}.hero{min-height:695px;padding:300px 0 55px!important;align-items:flex-end}.hero-scene{inset:0 0 auto; height:385px;background-image:linear-gradient(0deg,#0b061b 0%,transparent 32%,rgba(9,5,21,.10) 100%),url('assets/hero-moon.png');background-position:center, center center;background-size:100% 100%,cover;opacity:.93}.hero::before{background:linear-gradient(0deg,#0b061b 0%,rgba(11,6,26,.17) 60%,transparent 100%)}.hero-grid{align-items:end}.hero-intro{padding:25px 23px 26px;border-radius:16px;background:linear-gradient(120deg,rgba(54,28,82,.78),rgba(17,7,37,.84));box-shadow:0 16px 39px rgba(1,0,6,.56)}.hero h1{font-size:clamp(43px,10vw,57px);line-height:1.05;margin:16px 0}.hero-description{font-size:12px;line-height:1.65}.hero .btn{padding:12px 13px;font-size:11px}.hero-perks{font-size:9px;gap:9px;margin-top:18px}.eyebrow{font-size:9px}.service-grid,.projects{grid-template-columns:1fr}.project-cover{height:235px}.section-heading h2,.process-heading h2{font-size:42px}.contact-layout{grid-template-columns:1fr}.contact-copy{grid-column:auto}.contact-copy h2{margin:14px 0}.contact-telegram{grid-column:auto;display:flex}.quick-fields{grid-template-columns:1fr 1fr}.quick-footer{flex-direction:column;align-items:stretch}.quick-footer small{max-width:none}.quick-footer button{width:100%}.cta-section{padding-bottom:65px}.section-heading p{margin-bottom:4px}}
@media(max-width:365px){.quick-fields{grid-template-columns:1fr}.nav-cta{display:none}.hero{padding-top:260px!important}.hero h1{font-size:41px}.actions{flex-direction:column;align-items:stretch}.actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.service::before{transition:none}}

/* v4 fine-tuning — the full wordmark appears against scenery, not as an H above it */
.hero-breathing{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding-bottom:50px;gap:7px;min-width:0}
.backbrand-name{display:block;font-family:Georgia,'Times New Roman',serif;letter-spacing:.23em;white-space:nowrap;color:#f5e6f4;font-size:clamp(24px,2.6vw,37px);text-shadow:0 1px 18px rgba(15,2,34,.95),0 0 16px rgba(219,169,239,.40)}
.backbrand-tag{color:#f1dbee;font-size:10px;letter-spacing:.23em;white-space:nowrap;text-shadow:0 1px 12px rgba(15,2,34,.93)}
@media(max-width:950px){.backbrand-name{font-size:clamp(22px,3vw,30px);letter-spacing:.16em}.backbrand-tag{font-size:8px;letter-spacing:.16em}}
@media(max-width:740px){.nav-cta{display:none!important}.hero-breathing{display:none}}
@media(max-width:550px){.hero-breathing{display:flex;position:absolute;inset:164px 0 auto;min-height:auto;align-items:center;justify-content:center;padding:0 10px;gap:4px}.backbrand-name{font-size:clamp(19px,6.2vw,27px);letter-spacing:.15em}.backbrand-tag{font-size:8px;letter-spacing:.13em}}


/* -------------------------------------------------------------
   HATORI HILLS — VIOLET GOLD EDITION 4.1
   Approved layout corrections; English copy unchanged.
   ------------------------------------------------------------- */

/* Continuous mountain-and-lake scene across the entire hero. */
.hero {
  background:#0b061b !important;
  isolation:isolate;
}
.hero-scene {
  inset:0 !important;
  background-image:
    linear-gradient(180deg,rgba(9,5,24,.20) 0%,rgba(12,5,28,.10) 43%,rgba(13,5,30,.35) 100%),
    url('assets/hero-moon.png') !important;
  background-position:center,center center !important;
  background-size:100% 100%,cover !important;
  opacity:1 !important;
}
.hero::before {
  inset:0 !important;
  background:linear-gradient(90deg,rgba(9,4,23,.43) 0%,rgba(12,6,28,.25) 40%,rgba(15,7,31,.05) 85%) !important;
}
/* Clearer, genuinely translucent lavender glass in front of the scenery. */
.hero-intro {
  background:linear-gradient(125deg,rgba(59,31,83,.43),rgba(21,9,44,.45) 90%) !important;
  border-color:rgba(249,210,153,.56);
  backdrop-filter:blur(13px) saturate(120%);
  -webkit-backdrop-filter:blur(13px) saturate(120%);
  box-shadow:0 20px 58px rgba(6,2,25,.32),inset 0 1px rgba(255,236,206,.17);
}
/* Place the brand wordmark vertically in the center of the right-hand scene. */
.hero-breathing {
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:center !important;
  padding:0 4px !important;
  gap:8px;
  transform:translateY(-2px);
}
.backbrand-name {text-shadow:0 2px 16px rgba(12,3,32,.98),0 0 10px rgba(214,170,243,.45)}
.backbrand-tag {text-shadow:0 1px 10px rgba(12,3,32,.98)}

/* Navigation — one visual step larger while preserving its hierarchy. */
.nav {height:92px;gap:20px}
.brand{gap:12px}
.brand-mark{height:53px;width:53px;border-radius:14px}
.brand-mark img{height:46px;width:46px}
.brand-word{font-size:18px;letter-spacing:.16em}
.brand-sub{font-size:8px;letter-spacing:.22em}
.navlinks{gap:22px}
.navlinks a{font-size:13px}
.nav-cta{font-size:13px;padding:14px 17px}
.lang-option{font-size:12px;min-width:37px;padding:8px 10px}

/* Two approved Russian headings: one consistent face, all caps, warm gold. */
html:lang(ru) .portfolio-section .section-heading h2,
html:lang(ru) .process-section .process-heading h2 {
  color:#f2c37c !important;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:480;
  letter-spacing:.015em;
  text-transform:uppercase;
  text-shadow:0 0 22px rgba(211,145,66,.15);
  overflow-wrap:normal;
}
html:lang(ru) .process-section .process-heading h2 {max-width:100%;}

@media(max-width:1190px) and (min-width:741px) {
  .nav{gap:10px}
  .brand-mark{width:47px;height:47px}
  .brand-mark img{width:40px;height:40px}
  .brand-word{font-size:15px;letter-spacing:.13em}
  .brand-sub{font-size:7px}
  .navlinks{gap:12px}
  .navlinks a{font-size:12px}
  .nav-cta{font-size:11px;padding:12px 10px}
  .lang-option{font-size:11px;min-width:31px;padding:7px 8px}
}
@media(max-width:900px) and (min-width:741px) {
  .navlinks{gap:8px}
  .navlinks a{font-size:11px}
  .brand-word{font-size:13px}
  .brand-sub{display:none}
  .hero-grid{grid-template-columns:55% 45%;gap:8px}
  .hero-breathing{min-height:400px}
  .backbrand-name{font-size:clamp(18px,2.6vw,25px);letter-spacing:.13em}
  .backbrand-tag{font-size:7px;letter-spacing:.1em}
}
@media(max-width:740px) {
  /* Fixed to the hero rather than the lower card's grid: no text overlap. */
  .nav{height:78px;gap:10px}
  .brand-mark{height:46px;width:46px}
  .brand-mark img{height:40px;width:40px}
  .brand-word{font-size:13px;letter-spacing:.1em}
  .brand-sub{display:none}
  .lang-option{font-size:12px;min-width:35px;padding:8px 9px}
  .menu-toggle{padding:12px 13px;font-size:18px}
  .navlinks{top:75px}
  .hero {padding:305px 0 66px!important;min-height:0!important;display:block}
  .hero-scene{inset:0!important;height:100%!important;background-position:center,center center!important;background-size:100% 100%,cover!important;opacity:1!important}
  .hero::before{background:linear-gradient(180deg,rgba(13,5,28,.09) 0%,rgba(13,5,28,.14) 40%,rgba(12,5,29,.43) 100%)!important}
  .hero-grid{position:static!important;display:block}
  .hero-intro{width:100%;min-height:0!important;padding:34px 30px!important;background:linear-gradient(125deg,rgba(53,25,83,.43),rgba(18,7,39,.56))!important}
  .hero-breathing{
    position:absolute!important;
    display:flex!important;
    inset:108px 8px auto 8px!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    transform:none!important;
    text-align:center;
    gap:5px;
    pointer-events:none;
  }
  .backbrand-name{font-size:clamp(21px,4.4vw,34px);letter-spacing:.12em;white-space:nowrap}
  .backbrand-tag{font-size:8px;letter-spacing:.11em;white-space:nowrap}
}
@media(max-width:550px){
  .nav{height:74px}
  .brand-mark{height:45px;width:45px}
  .brand-mark img{height:39px;width:39px}
  .brand-word{font-size:12px;letter-spacing:.07em}
  .lang-option{font-size:11px;min-width:30px;padding:7px 8px}
  .hero{padding:296px 0 55px!important;min-height:0!important}
  .hero-scene{inset:0!important;height:100%!important;background-position:center,center center!important;background-size:100% 100%,cover!important}
  .hero-breathing{inset:108px 8px auto 8px!important;opacity:.86}
  .backbrand-name{font-size:clamp(21px,5.45vw,28px);letter-spacing:.1em}
  .backbrand-tag{font-size:7px;letter-spacing:.12em}
  .hero-intro{padding:27px 22px!important;background:linear-gradient(125deg,rgba(59,31,84,.48),rgba(20,8,41,.61))!important}
  .hero h1{font-size:clamp(43px,10vw,57px)}
  .hero .btn{font-size:11px}
  html:lang(ru) .portfolio-section .section-heading h2,
  html:lang(ru) .process-section .process-heading h2{font-size:clamp(30px,7.7vw,42px);letter-spacing:0}
}
@media(max-width:365px){
  .brand-word{font-size:10.5px;letter-spacing:.035em}
  .brand-mark{height:40px;width:40px}
  .brand-mark img{height:35px;width:35px}
  .menu-toggle{padding:9px 10px}
  .hero{padding-top:272px!important}
  .hero-breathing{inset:103px 5px auto 5px!important}
  .backbrand-name{font-size:19px}
  .backbrand-tag{font-size:6px}
}

/* Mobile art direction: retain the mountain horizon above the glass panel. */
@media(max-width:550px){
  .hero-scene{
    background-image:
      linear-gradient(180deg,rgba(12,5,28,.11) 0%,rgba(12,5,28,.06) 30%,rgba(12,5,28,.55) 57%,#0b061b 85%),
      url('assets/hero-moon.png') !important;
    background-size:100% 100%,auto 455px !important;
    background-position:center top,center top !important;
    background-repeat:no-repeat !important;
    background-color:#0b061b !important;
  }
}

/* v4.1 approved background-only update: the new hero image already contains
   the HATORI HILLS lettering, so suppress the duplicate HTML lettering. */
.hero-breathing{display:none!important}
/* Phone crop: show the actual moon, not a clipped fragment of the baked-in wordmark. */
@media (max-width: 550px) {
  .hero-scene {background-position: center top, left top !important;}
}