:root{
  --bg:#171717;
  --text:#d2d0cd;
  --muted:#9e9b96;
  --copper:#b97852;
  --copper-hi:#cf956d;
  --copper-deep:#4a291c;
  --teal:#1e6f79;
  --teal-hi:#2b8994;
  --line:rgba(255,255,255,.15);
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;
  min-width:1000px;
  color:var(--text);
  font:14px/1.4 Arial,Helvetica,sans-serif;
  background:#171717 url('../images/px1.jpg') center center repeat-x;
  display:grid;
  grid-template-rows:714px 51px;
  align-content:center;
}
a{color:inherit}
.site-wrap{position:relative;width:1000px;height:714px;margin:0 auto;overflow:visible}
.route-panel{display:none;position:absolute;left:0;top:0;width:1000px;height:680px;overflow:visible}
.route-panel.is-active{display:block}

/* reusable monochrome SVG masks */
.icon-mask{display:inline-block;background:currentColor;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.icon-home{mask-image:url('../images/icons/home.svg');-webkit-mask-image:url('../images/icons/home.svg')}
.icon-services{mask-image:url('../images/icons/services.svg');-webkit-mask-image:url('../images/icons/services.svg')}
.icon-reception{mask-image:url('../images/icons/reception.svg');-webkit-mask-image:url('../images/icons/reception.svg')}
.icon-contacts{mask-image:url('../images/icons/contacts.svg');-webkit-mask-image:url('../images/icons/contacts.svg')}
.icon-pin{mask-image:url('../images/icons/pin.svg');-webkit-mask-image:url('../images/icons/pin.svg')}
.icon-mail{mask-image:url('../images/icons/mail.svg');-webkit-mask-image:url('../images/icons/mail.svg')}
.icon-enter{mask-image:url('../images/icons/enter.svg');-webkit-mask-image:url('../images/icons/enter.svg')}

/* ============================= FACADE ============================= */
.facade{background:transparent}
.facade-visual{position:absolute;inset:0;overflow:visible;pointer-events:none}
.facade-paper{position:absolute;left:0;top:10px;width:999px;height:656px;z-index:1}
.facade-suit{position:absolute;left:9px;top:10px;width:688px;height:555px;z-index:2}
.facade-book{position:absolute;left:450px;top:480px;width:477px;height:234px;z-index:6}
.facade-copy{position:absolute;z-index:5;left:540px;top:62px;width:410px}
.facade-copy h1{margin:0;color:#f5f3f0;font:400 50px/1 'Times New Roman',Times,serif;letter-spacing:-.7px;white-space:nowrap}
.facade-specialty{margin:13px 0 28px;color:#c58d6d;font:400 20px/1.15 'Times New Roman',Times,serif;white-space:nowrap}
.facade-specialty::before,.facade-specialty::after{content:"";display:inline-block;width:34px;height:1px;background:var(--copper);vertical-align:middle;margin:0 10px 4px}
.facade-points{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px;color:#d2d0cd;font-size:14px}
.facade-points li{position:relative;padding-left:25px}
.facade-points li::before{content:"✓";position:absolute;left:0;top:-2px;color:var(--copper-hi);font:700 18px/1 Arial,sans-serif}
.facade-actions{display:grid;gap:9px;width:330px}
.cta{display:flex;align-items:center;gap:13px;min-height:60px;padding:9px 14px;border:1px solid rgba(255,255,255,.24);border-radius:7px;text-decoration:none;background:linear-gradient(180deg,rgba(22,22,22,.84),rgba(7,8,8,.91));box-shadow:inset 0 1px rgba(255,255,255,.04);transition:.16s ease}
.cta:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.44)}
.cta--reception{background:linear-gradient(180deg,#28818c 0%,#175963 100%);border-color:rgba(102,194,204,.55);box-shadow:inset 0 1px rgba(255,255,255,.13)}
.cta-icon{width:33px;height:33px;flex:none;color:#e8eeee;border:1px solid rgba(255,255,255,.31);border-radius:50%;padding:7px}
.cta-arrow{display:grid;place-items:center;padding:0;font-size:18px;line-height:1}
.cta strong{display:block;color:#f0eeee;font-size:18px;font-weight:400;line-height:1.1}
.cta small{display:block;margin-top:3px;color:#c6c8c7;font-size:11px;line-height:1.15}

.facade-card,.business-card{position:absolute;width:327px;height:215px;background:url('../images/paper2.png') 0 0/327px 215px no-repeat;color:#060606;font-family:'Times New Roman',Times,serif}
.facade-card{z-index:7;left:30px;top:450px}
.paper-card-copy{position:absolute;left:37px;top:30px;width:253px;height:160px;overflow:hidden}
.paper-card-copy strong{display:block;color:#050505;font-size:40px;line-height:30px;font-weight:400;white-space:nowrap}
.paper-card-copy .card-role{display:block;padding-top:13px;color:#545454;font-size:20px;line-height:10px}
.paper-card-copy hr{height:2px;border:0;background:#aeaeae;margin:10px 0}
.paper-card-copy .card-line{height:25px;color:#060606;font-size:14px;line-height:25px;white-space:nowrap}
.paper-card-copy .card-line span{font-size:20px}

/* ============================= INSIDE ============================= */
.inside{background:url('../images/paper1.png') 0 10px/999px 656px no-repeat}
.side-art{position:absolute;z-index:1;left:9px;top:10px;width:688px;height:555px;pointer-events:none;overflow:hidden}
.side-art img{display:block;width:688px;height:555px}
.brand-link{position:absolute;z-index:6;left:50px;top:48px;text-decoration:none}
.brand-link strong{display:block;color:#f2f0ed;font:400 43px/1 'Times New Roman',Times,serif;letter-spacing:-.5px}
.brand-link span{display:block;margin-top:7px;color:#9e9b96;font-size:14px}
.side-nav{position:absolute;z-index:7;left:30px;top:145px;width:300px;border:1px solid rgba(255,255,255,.14);border-radius:4px;overflow:hidden;background:rgba(11,12,12,.81);box-shadow:0 12px 23px rgba(0,0,0,.25)}
.side-nav a{display:flex;align-items:center;gap:14px;height:56px;padding:0 17px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.09);font:400 19px/1.1 'Times New Roman',Times,serif;background:linear-gradient(180deg,rgba(25,25,25,.74),rgba(12,13,13,.78));transition:.16s}
.side-nav a:last-child{border-bottom:0}
.side-nav a:hover{background:linear-gradient(90deg,rgba(45,29,21,.58) 0%,rgba(73,44,29,.58) 58%,rgba(93,58,38,.65) 100%)}
.side-nav a.active{color:#fff;background:linear-gradient(90deg,#39251c 0%,#5a3826 56%,#80583d 100%);box-shadow:inset 0 1px rgba(255,255,255,.07),inset 0 -1px rgba(0,0,0,.36)}
.side-nav a.active::after{content:"›";margin-left:auto;color:#e0a57e;font-size:25px}
.nav-icon{width:27px;height:27px;flex:none;color:#b4b1ad}
.side-nav a.active .nav-icon{color:#d79a72}
.side-nav .nav-reception .nav-icon{color:#53b4bd}
.side-nav .nav-reception:hover{background:linear-gradient(90deg,rgba(17,54,59,.52),rgba(24,84,92,.56))}
.side-nav .nav-reception.active,.side-nav .nav-reception.active:hover{color:#fff;background:linear-gradient(90deg,#153c41 0%,#1b5f68 56%,#247783 100%);box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -1px rgba(0,0,0,.30)}
.side-nav .nav-reception.active .nav-icon{color:#7dd0d7}
.side-nav .nav-reception.active::after{color:#8bd6dc}
.business-card{z-index:8;left:30px;top:450px}

.content-panel{position:absolute;z-index:5;left:430px;top:44px;width:540px;height:520px;min-width:0;background:rgba(0,0,0,.03)}
.view{display:none;position:absolute;inset:0;z-index:2}
.view.is-active{display:block}
.view-scroll{height:100%;overflow-y:auto;overflow-x:hidden;padding:0 28px 22px 0;scrollbar-width:none;-ms-overflow-style:none}
.view-scroll::-webkit-scrollbar{display:none}
.eyebrow{margin:0 0 4px;color:#aaa7a4;font-size:11px;text-transform:uppercase;letter-spacing:1.6px}
.view h2{margin:0;color:#f0eeeb;font:400 27px/1.12 'Times New Roman',Times,serif;letter-spacing:-.1px}
.view h3{margin:18px 0 8px;color:#efedeb;font:600 17px/1.25 'Times New Roman',Times,serif}
.lead{margin:8px 0 0;color:#b8b5b1;font-size:13.5px;line-height:1.42}
.service-view .lead,.lead.copper{color:#c58b68}
.title-rule{height:1px;margin:9px 0 15px;background:repeating-linear-gradient(90deg,rgba(238,238,238,.50) 0 1px,transparent 1px 4px)}

.about-copy{color:#c7c4c1;font-size:14px;line-height:1.42}
.about-copy::after{content:"";display:block;clear:both}
.portrait{float:left;width:150px;height:auto;margin:0 18px 10px 0;border:2px solid #f0f0f0}
.about-kicker{display:block;margin:0 0 3px;color:#eee;font-weight:700}
.about-copy p{margin:5px 0;color:#c7c4c1}
.home-actions{clear:both;margin:15px 0 0 168px}
.inline-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:8px 14px;border-radius:4px;text-decoration:none;font-weight:600;font-size:12.5px;line-height:1.2;transition:.16s}
.button-icon{width:20px;height:20px;flex:none}
.button--reception{color:#fff;background:linear-gradient(180deg,#2b8792 0%,#17606a 100%);border:1px solid rgba(102,194,204,.44);box-shadow:inset 0 1px rgba(255,255,255,.10)}
.button--reception:hover{filter:brightness(1.07)}
.button--ghost{color:#dedbd8;border:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(28,29,29,.72),rgba(12,13,13,.76))}
.button--ghost:hover{background:rgba(255,255,255,.075)}
.service-cta{margin-top:18px;min-width:0;max-width:none}

/* Services overview */
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.service-card{position:relative;min-height:88px;padding:13px 14px 12px 57px;border:1px solid rgba(255,255,255,.14);border-radius:5px;background:linear-gradient(180deg,rgba(29,30,30,.78) 0%,rgba(12,13,13,.83) 100%);text-decoration:none;box-shadow:inset 0 1px rgba(255,255,255,.03);transition:.16s}
.service-card:hover{transform:translateY(-1px);border-color:rgba(194,130,88,.82);background:linear-gradient(180deg,rgba(102,65,44,.64) 0%,rgba(37,26,21,.70) 100%)}
.service-num{position:absolute;left:14px;top:13px;width:32px;height:32px;border:1px solid rgba(190,126,85,.72);border-radius:4px;display:grid;place-items:center;color:#d39972;font-size:12.5px;line-height:1}
.service-card strong{display:block;color:#efedea;font:600 17px/1.18 'Times New Roman',Times,serif}
.service-card small{display:block;margin-top:5px;color:#b2aeaa;font-size:12.7px;line-height:1.3}
.service-card--price{grid-column:1/-1;min-height:74px}
.overview-cta{display:flex;justify-content:center;margin-top:15px}
.back-services{display:inline-flex;align-items:center;margin-bottom:11px;color:#c88965;text-decoration:none;font-size:13px}
.back-services:hover{color:#e0aa83;text-decoration:underline}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.check-list li{position:relative;padding-left:25px;color:#c9c6c3;font-size:14px;line-height:1.4}
.check-list li::before{content:"✓";position:absolute;left:0;top:-2px;color:#cf936b;font-size:17px;font-weight:700}

/* Digital reception menu view */
.reception-scroll{display:flex;flex-direction:column}
.reception-intro{margin-top:20px;padding:22px 24px;display:grid;grid-template-columns:54px minmax(0,1fr);gap:17px;align-items:start;border:1px solid rgba(255,255,255,.15);border-radius:6px;background:linear-gradient(180deg,rgba(27,31,31,.80),rgba(11,14,14,.86));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.reception-intro__icon{width:45px;height:45px;margin-top:1px;color:#58b7c0}
.reception-intro__copy h3{margin:0 0 8px;color:#efedeb;font:600 20px/1.2 'Times New Roman',Times,serif}
.reception-intro__copy p{margin:0;color:#c7c4c1;font-size:14px;line-height:1.48}
.reception-intro__meta{margin-top:13px!important;color:#c99572!important;font-size:12.5px!important}
.reception-enter{margin-top:18px;min-width:250px}

/* Prices */
.price-list{display:grid;gap:0;margin-bottom:21px;border-top:1px solid rgba(255,255,255,.13)}
.price-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:8px 3px;border-bottom:1px solid rgba(255,255,255,.13);align-items:start}
.price-list span{color:#c8c5c2;line-height:1.34}
.price-list strong{white-space:nowrap;color:#eee;font-weight:600}
.fine-print{color:#aaa6a2;font-size:11.5px;line-height:1.45}

/* Contacts */
.contact-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:start}
.contact-column{display:grid;grid-template-rows:auto auto;gap:11px}
.map-card,.contact-card{height:234px;border:1px solid rgba(255,255,255,.15);border-radius:5px;background:linear-gradient(180deg,rgba(24,25,25,.78),rgba(11,12,12,.82));overflow:hidden;position:relative}
.map-card{display:grid;place-items:center}
.map-lines{position:absolute;inset:0;opacity:.30;background:
  linear-gradient(26deg,transparent 0 37%,rgba(255,255,255,.13) 37% 38%,transparent 38% 100%),
  linear-gradient(116deg,transparent 0 27%,rgba(255,255,255,.11) 27% 28%,transparent 28% 100%),
  linear-gradient(0deg,transparent 0 62%,rgba(255,255,255,.08) 62% 63%,transparent 63% 100%)}
.map-pin{position:relative;width:34px;height:34px;color:#c68d69;margin-top:-22px}
.map-caption{position:absolute;left:0;right:0;bottom:19px;text-align:center}
.map-caption strong{display:block;color:#ece9e6;font:600 18px/1.1 'Times New Roman',Times,serif}
.map-caption span{display:block;margin-top:4px;color:#aaa7a4;font-size:12px}
.contact-card{padding:17px 17px}
.contact-card h3{margin:0 0 13px;color:#efedeb;font:600 18px/1.2 'Times New Roman',Times,serif}
.contact-line{display:flex;align-items:flex-start;gap:10px;margin:9px 0;color:#cfccc9;text-decoration:none;line-height:1.4}
a.contact-line:hover{color:#fff}
.contact-icon{width:19px;height:19px;flex:none;color:#bdb9b5;margin-top:1px}
.contact-online{margin-top:15px;padding-top:12px;border-top:1px solid rgba(255,255,255,.13)}
.contact-online strong{color:#c68d69;font:600 16px/1.2 'Times New Roman',Times,serif}
.contact-online p{margin:5px 0 0;color:#bdb9b6;font-size:12.5px;line-height:1.4}
.messengers{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.messengers a{height:43px;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px;border:1px solid rgba(255,255,255,.15);border-radius:5px;text-decoration:none;background:linear-gradient(180deg,rgba(27,28,28,.72),rgba(12,13,13,.78))}
.messengers a:hover{background:rgba(255,255,255,.075)}
.messengers img{width:21px;height:21px;object-fit:contain}.messengers span{font-size:11px}
.contact-reception{height:43px;width:100%}

/* Original-character internal scrollbar without legacy jQuery */
.classic-scrollbar{position:absolute;z-index:9;right:0;top:0;bottom:0;width:18px;background:url('../images/jspTrack.png') center/18px 100% no-repeat;user-select:none}
.classic-scrollbar[hidden]{display:none}
.classic-scroll-thumb{position:absolute;left:0;top:0;width:17px;height:50px;background:url('../images/jspDrag.png') center/17px 50px no-repeat;cursor:grab;touch-action:none}
.classic-scroll-thumb:active{cursor:grabbing}

/* ============================= FOOTER ============================= */
.site-footer{width:1000px;height:51px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:20px;color:#858585;font-size:12px;background:url('../images/footer_px1.jpg') 0 0 repeat-x;text-align:center}
.site-footer a{color:#a4a4a4;text-underline-offset:3px}


/* ======================== V3.2 geometry + visual corrections ======================== */
/* Keep the fixed desktop composition inside one viewport, like the original site. */
body{grid-template-rows:680px 51px;align-content:center}
.site-wrap{width:1000px;height:680px}
.route-panel{width:1000px;height:680px}
.site-footer{position:relative;z-index:20}

/* Facade: original three-dimensional layering. */
.facade-paper{left:0;top:10px;width:999px;height:656px}
.facade-suit{left:9px;top:10px;width:688px;height:555px}
.facade-book{left:450px;top:480px;width:477px;height:234px}
.facade-card{left:30px;top:450px}
.facade-copy{left:640px;top:48px;width:325px}
.facade-copy h1{font-size:45px;letter-spacing:-.5px}
.facade-specialty{margin:11px 0 24px;font-size:18px}
.facade-specialty::before,.facade-specialty::after{width:22px;margin-left:7px;margin-right:7px}
.facade-points{gap:7px;margin-bottom:18px;font-size:13.2px}
.facade-points li{padding-left:23px}
.facade-points li::before{font-size:17px}
.facade-actions{width:305px;gap:8px}
.cta{min-height:54px;padding:8px 13px;border-radius:6px}
.cta strong{font-size:17px}
.cta small{font-size:10.5px}
.cta-icon{width:25px;height:25px;padding:0;border:0;border-radius:0;color:#eef2f2}
.cta--site{position:relative;padding-right:34px}
.cta--site::after{content:"›";position:absolute;right:15px;top:50%;transform:translateY(-53%);color:#c9c6c3;font:300 27px/1 Arial,sans-serif;opacity:.9}

/* Internal left composition: restore the exact old header backdrop and image origin. */
.inside{background-position:0 10px;background-size:999px 656px}
.side-art{left:9px;top:10px;width:688px;height:555px}
.brand-link{left:7px;top:36px;width:407px;height:96px;padding:15px 0 0 50px;background:url('../images/logo_bg.png') 0 0/407px 96px no-repeat}
.brand-link strong{font-size:43px}
.brand-link span{margin-top:5px}
.side-nav{left:30px;top:145px}
.business-card{left:30px;top:450px}

/* Give the text pane a little more separation from the pocket, without losing original proportions. */
.content-panel{left:445px;top:44px;width:525px;height:520px}
.view-scroll{padding-right:28px}

/* Home: original text flow, compact typography and natural left-aligned actions. */
.about-copy{font-size:13.6px;line-height:1.38}
.about-copy p{margin:4px 0}
.portrait{width:150px;margin:0 18px 9px 0}
.home-actions{clear:both;margin:14px 0 0 0}

/* Services overview: only a very small readability increase; keep cards compact. */
.service-grid{gap:9px}
.service-card{min-height:76px;padding:10px 12px 9px 54px}
.service-num{left:13px;top:11px;width:31px;height:31px;font-size:13.5px}
.service-card strong{font-size:15.5px;line-height:1.16}
.service-card small{margin-top:4px;font-size:11.6px;line-height:1.24}
.service-card--price{min-height:65px}
.overview-cta{margin-top:11px}

/* Contact cards: text must never be clipped; map will later be cropped to this exact size. */
.map-card,.contact-card{height:278px}
.contact-card{padding:16px 17px}
.contact-card h3{margin-bottom:11px}
.contact-line{margin:8px 0;line-height:1.34}
.contact-online{margin-top:12px;padding-top:10px}
.contact-online p{margin-top:5px;font-size:12.2px;line-height:1.32}
.contact-reception{height:43px;width:100%}

/* Keep the reception icon restrained and consistent across CTAs. */
.button-icon{width:18px;height:18px}

/* Mobile traffic is redirected by .htaccess. This fallback only prevents breakage if opened directly on a narrow screen. */
@media(max-width:1000px){
  html,body{overflow:auto;min-width:0;height:auto}
  body{display:block;background:#171717}
  .site-wrap{width:100%;height:auto;min-height:100vh}
  .route-panel{position:relative;width:100%;height:auto;min-height:100vh;overflow:hidden}
  .facade{padding:34px 22px;background:#080909 url('../images/paper1.png') center top/cover no-repeat}
  .facade-visual{opacity:.25}.facade-paper,.facade-book,.facade-card{display:none}.facade-suit{left:-140px;top:0}
  .facade-copy{position:relative;left:auto;top:auto;width:min(100%,520px);margin:0 auto}.facade-actions{width:100%}
  .inside{background:#090a0a url('../images/paper1.png') center top/cover no-repeat;padding:24px}
  .side-art,.business-card{display:none}.brand-link,.side-nav,.content-panel{position:relative;left:auto;top:auto;width:100%;height:auto}
  .brand-link{display:block;margin-bottom:20px}.side-nav{margin-bottom:20px}.content-panel{min-height:70vh}
  .view{position:relative;inset:auto}.view-scroll{height:auto;overflow:visible;padding:0}.classic-scrollbar{display:none!important}
  .service-grid,.contact-columns{grid-template-columns:1fr}.service-card--price{grid-column:auto}.home-actions{margin-left:0}.portrait{float:none;margin:0 0 12px}
  .site-footer{width:100%;min-height:51px;height:auto;padding:14px 18px;flex-wrap:wrap}
}

/* ======================== V3.3 facade geometry fix ======================== */
/*
   Match the original site's vertical logic: the 680px stage is centred by
   itself, while the 51px footer is pinned to the bottom of the viewport.
   Do NOT centre stage+footer as one block — at 125% browser zoom that pushes
   the stage upward and makes the foreground book appear oversized/crowded.
*/
html,body{height:100%;overflow:hidden}
body{
  display:block;
  position:relative;
  min-width:1000px;
  background:#171717 url('../images/px1.jpg') center center repeat-x;
}
.site-wrap{
  position:absolute;
  left:50%;
  top:50%;
  width:1000px;
  height:680px;
  margin:0;
  transform:translate(-50%,-50%);
  overflow:visible;
}
.route-panel{left:0;top:0;width:1000px;height:680px}
.site-footer{
  position:absolute;
  z-index:20;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  margin:0;
}

/* Facade: keep the original-size foreground objects and restore their depth. */
.facade-paper{left:0;top:10px;width:999px;height:656px}
.facade-suit{left:9px;top:10px;width:688px;height:555px}
.facade-book{left:450px;top:480px;width:477px;height:234px}
.facade-card{left:30px;top:450px}

/* Keep all new copy completely clear of the pocket square. */
.facade-copy{left:650px;top:50px;width:305px}
.facade-copy h1{font-size:44px}
.facade-actions{width:300px}

/* Cleaner facade actions: generic message icon for reception; no decorative
   icon/roundel on the simple site-entry action. */
.facade .cta--reception .cta-icon{width:24px;height:24px;color:#eef2f2}
.facade .cta--site{padding-left:14px;padding-right:14px}
.facade .cta--site .cta-icon{display:none}
.facade .cta--site::after{content:none}

@media(max-width:1000px){
  body{position:static;display:block}
  .site-wrap{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;margin:0}
  .site-footer{position:relative;left:auto;bottom:auto;transform:none;margin:0 auto}
}


/* ======================== V3.5 facade polish ======================== */
/* Match footer width exactly to the black facade panel. */
.site-footer{width:999px}

/* Facade: lower the copy group slightly and move it a touch left for optical balance. */
.facade-copy{left:626px;top:88px;width:288px}
.facade-copy h1{font-size:43px;line-height:1.02}
.facade-specialty{margin:12px 0 23px;font-size:17px}
.facade-points{margin-bottom:20px}
.facade-actions{width:274px;gap:10px}

/* Button rhythm: slightly narrower buttons and one shared left alignment axis
   for both icons and text blocks. */
.facade .cta{justify-content:flex-start;padding:8px 16px 8px 24px}
.facade .cta > span:last-child{display:block;min-width:0}
.facade .cta strong,.facade .cta small{text-align:left}
.facade .cta-icon{width:23px;height:23px;flex:0 0 23px;color:#eef2f2}
.facade .cta--reception,.facade .cta--site{column-gap:14px}
.facade .cta--site .cta-icon{display:block}
.facade .cta--site::after{content:none}

/* Fine tune the foreground depth so the footer and stage read cleanly together. */
.facade-book{left:468px;top:494px;width:448px;height:219px}
.facade-card{left:29px;top:452px}

/* Small safety trim for the paper stage width. */
.facade-paper{width:999px}
.route-panel,.site-wrap{width:1000px}

/* ======================== INTERNAL PAGES — OLD-SITE COMPOSITION LOGIC ======================== */
/*
   The approved facade is not changed here.

   The original site did NOT darken the text area to hide the pocket square.
   On internal pages it kept man1.png at its native 688x555 size, cropped it
   inside a 980x555 viewport and moved the image itself 180px to the left.
   The content/scroller occupied a separate fixed pane on top of that stage.
   The rules below reproduce that exact composition principle for the new UI.
*/
@media(min-width:1001px){
  /* Old .main3 geometry: a fixed 980x555 crop beginning 9px from the stage. */
  .inside .side-art{
    left:9px;
    top:10px;
    width:980px;
    height:555px;
    overflow:hidden;
    z-index:1;
  }
  /* Old internal-page state: .man1 was animated to left:-180px. */
  .inside .side-art img{
    position:absolute;
    left:-180px;
    top:0;
    width:688px;
    height:555px;
    max-width:none;
  }

  /* No artificial dark veil: the image is moved/cropped just like on the old site. */
  .inside .content-panel{
    left:419px;
    top:0;
    width:570px;
    height:555px;
    overflow:hidden;
    background:transparent;
    z-index:5;
  }
  .inside .content-panel::before{content:none!important;display:none!important}

  /* Old #content / li / scroll-pane geometry adapted to the current markup. */
  .inside .content-panel .view{
    left:0;
    top:0;
    right:auto;
    bottom:auto;
    width:540px;
    height:555px;
  }
  .inside .view-scroll{
    width:540px;
    height:430px;
    margin-top:30px;
    padding:0 28px 0 0;
    overflow-y:auto;
    overflow-x:hidden;
  }

  /* Keep the custom rail exactly inside the 430px scrolling field. */
  .inside .classic-scrollbar{
    right:0;
    top:30px;
    bottom:auto;
    width:18px;
    height:430px;
  }
  .inside .classic-scroll-thumb{width:17px}

  /* Home: preserve the approved typography and allow the image shift to solve readability. */
  .home-actions{clear:both;margin:14px 0 18px 0}

  /* Slightly clearer hover, without changing button geometry. */
  .button--reception:hover{
    filter:brightness(1.17) saturate(1.04);
    transform:translateY(-1px);
    border-color:rgba(116,215,225,.78);
    box-shadow:0 5px 14px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.16);
  }
  .button--ghost:hover{
    color:#fff;
    transform:translateY(-1px);
    border-color:rgba(197,141,109,.64);
    background:linear-gradient(180deg,rgba(84,55,40,.72),rgba(31,24,21,.84));
    box-shadow:0 5px 14px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.06);
  }

  /* Services overview: CTA sits in the middle of its own free strip under the price card. */
  .view[data-view="services"] .service-grid{gap:8px}
  .view[data-view="services"] .service-card{
    min-height:72px;
    padding:9px 12px 8px 53px;
  }
  .view[data-view="services"] .service-num{top:10px}
  .view[data-view="services"] .service-card strong{font-size:15px;line-height:1.14}
  .view[data-view="services"] .service-card small{font-size:11.4px;line-height:1.22}
  .view[data-view="services"] .service-card--price{min-height:61px}
  .view[data-view="services"] .overview-cta{
    min-height:66px;
    margin:8px 0 0;
    padding:0 0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Detail pages: align CTA with list text (25px after the checkmark column). */
  .service-view .service-cta,
  .view[data-view="prices"] .service-cta{
    margin-left:25px;
    margin-top:18px;
    margin-bottom:24px;
  }

  /* Contacts: compact two-column composition that stays inside the 430px scroll field. */
  .view[data-view="contacts"] .contact-columns{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:14px;
    align-items:start;
  }
  .view[data-view="contacts"] .contact-column{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .view[data-view="contacts"] .map-card,
  .view[data-view="contacts"] .contact-card{height:260px}
  .view[data-view="contacts"] .contact-card{padding:14px 15px 14px}
  .view[data-view="contacts"] .contact-card h3{margin-bottom:9px;font-size:17px}
  .view[data-view="contacts"] .contact-line{margin:6px 0;gap:8px;line-height:1.28}
  .view[data-view="contacts"] .contact-online{margin-top:8px;padding-top:8px}
  .view[data-view="contacts"] .contact-online strong{font-size:15px}
  .view[data-view="contacts"] .contact-online p{
    margin-top:4px;
    font-size:11.6px;
    line-height:1.28;
  }
  .view[data-view="contacts"] .messengers{gap:6px}
  .view[data-view="contacts"] .messengers a{height:41px;padding:5px}
  .view[data-view="contacts"] .messengers span{font-size:10.5px}
  .view[data-view="contacts"] .contact-reception{
    position:static;
    width:100%;
    min-height:41px;
    height:auto;
    margin:0 0 18px;
    padding:7px 8px;
    gap:6px;
    font-size:11px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
  }
  .view[data-view="contacts"] .contact-reception .button-icon{
    width:16px;
    height:16px;
  }
}

/* A4 follow-up: use the full internal stage height on the two long service
   pages so the text field and its scrollbar finish near the lower edge. */
@media(min-width:1001px){
  .view[data-view="service-investigation"] .view-scroll,
  .view[data-view="service-trial"] .view-scroll,
  .view[data-view="prices"] .view-scroll{
    height:520px;
  }
  .view[data-view="service-investigation"] .classic-scrollbar,
  .view[data-view="service-trial"] .classic-scrollbar,
  .view[data-view="prices"] .classic-scrollbar{
    height:520px;
  }
}

/* ======================== V4.1 internal UX + contacts ======================== */
/* Approved facade is intentionally untouched. */
@media(min-width:1001px){
  /* Short internal pages use the available stage height and do not show a
     scrollbar merely for a few lower lines or CTA buttons. */
  .view[data-view="home"] .view-scroll,
  .view[data-view="services"] .view-scroll,
  .view[data-view="service-pretrial"] .view-scroll,
  .view[data-view="service-appeal"] .view-scroll,
  .view[data-view="service-cassation"] .view-scroll,
  .view[data-view="service-execution"] .view-scroll,
  .view[data-view="contacts"] .view-scroll{
    height:520px;
    overflow-y:hidden;
  }
  .view[data-view="home"] .classic-scrollbar,
  .view[data-view="services"] .classic-scrollbar,
  .view[data-view="service-pretrial"] .classic-scrollbar,
  .view[data-view="service-appeal"] .classic-scrollbar,
  .view[data-view="service-cassation"] .classic-scrollbar,
  .view[data-view="service-execution"] .classic-scrollbar,
  .view[data-view="contacts"] .classic-scrollbar{
    display:none!important;
  }

  /* Home CTAs must be visible immediately, without a wheel scroll. */
  .view[data-view="home"] .home-actions{
    margin-top:13px;
    margin-bottom:0;
  }

  /* Overview remains compact enough to fit fully in the non-scrolling pane. */
  .view[data-view="services"] .overview-cta{
    min-height:56px;
    margin-top:7px;
    padding-bottom:4px;
  }

  /* Price page remains scrollable; centre its final CTA in the actual text
     field, i.e. between the left content edge and the scrollbar. */
  .view[data-view="prices"] .service-cta{
    display:flex;
    width:max-content;
    margin:18px auto 24px;
  }

  /* Real static map, supplied at an exact 4x source size for this 249x260 slot. */
  .view[data-view="contacts"] .map-card{
    display:block;
    background:#111;
  }
  .view[data-view="contacts"] .map-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Contact hierarchy: office/address stays neutral; direct channels are accented. */
  .view[data-view="contacts"] .contact-card h3{
    font-size:16.5px;
    white-space:nowrap;
  }
  .view[data-view="contacts"] .contact-line--accent{
    color:#d09a76;
  }
  .view[data-view="contacts"] .contact-line--accent .contact-icon{
    color:#c88d68;
  }
}

@media(min-width:1001px){
  /* Let the overview CTA occupy the remaining free strip and sit exactly in
     its vertical centre between the price card and the bottom of the pane. */
  .view[data-view="services"] .view-scroll{
    display:flex;
    flex-direction:column;
  }
  .view[data-view="services"] .overview-cta{
    flex:1 1 auto;
    min-height:56px;
    margin-top:7px;
    padding:0;
    align-items:center;
    justify-content:center;
  }

  /* Full name may wrap naturally inside the narrow contact card. */
  .view[data-view="contacts"] .contact-card h3{
    font-size:16px;
    line-height:1.15;
    white-space:normal;
    margin-bottom:7px;
  }
}


/* ======================== V4.2 contacts final polish ======================== */
/* Approved facade and all other internal pages are intentionally untouched. */
@media(min-width:1001px){
  /* Give both contact cards a little more vertical breathing room so the
     online-contact copy is fully visible and both columns finish on one axis. */
  .view[data-view="contacts"] .map-card,
  .view[data-view="contacts"] .contact-card{
    height:286px;
  }

  /* Messenger buttons use the same restrained copper hover language as the
     secondary CTA elsewhere on the site. */
  .view[data-view="contacts"] .messengers a{
    transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease;
  }
  .view[data-view="contacts"] .messengers a:hover,
  .view[data-view="contacts"] .messengers a:focus-visible{
    color:#fff;
    transform:translateY(-1px);
    border-color:rgba(197,141,109,.62);
    background:linear-gradient(180deg,rgba(96,62,43,.82) 0%,rgba(40,27,22,.90) 100%);
    box-shadow:0 5px 14px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.07);
    outline:none;
  }

  /* The static map is intentionally clickable: the cursor and a quiet plus
     badge make enlargement discoverable without cluttering the composition. */
  .view[data-view="contacts"] .map-zoom-trigger{
    cursor:zoom-in;
  }
  .view[data-view="contacts"] .map-zoom-trigger:focus-visible{
    outline:1px solid rgba(207,149,109,.92);
    outline-offset:2px;
  }
  .view[data-view="contacts"] .map-zoom-badge{
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:2;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.42);
    border-radius:50%;
    color:#fff;
    background:rgba(22,22,22,.74);
    box-shadow:0 2px 8px rgba(0,0,0,.35);
    font:400 23px/1 Arial,Helvetica,sans-serif;
    opacity:.82;
    transition:.16s ease;
    pointer-events:none;
  }
  .view[data-view="contacts"] .map-zoom-trigger:hover .map-zoom-badge,
  .view[data-view="contacts"] .map-zoom-trigger:focus-visible .map-zoom-badge{
    opacity:1;
    color:#f2c1a0;
    border-color:rgba(207,149,109,.78);
    background:rgba(67,43,31,.88);
    transform:scale(1.06);
  }
}

/* Enlarged map overlay. It sits above the fixed desktop stage and footer. */
.map-lightbox{
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  place-items:center;
  padding:28px;
}
.map-lightbox[hidden]{display:none}
.map-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.84);
  cursor:zoom-out;
}
.map-lightbox-dialog{
  position:relative;
  z-index:1;
  max-width:min(88vw,900px);
  max-height:88vh;
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  overflow:hidden;
  background:#111;
  box-shadow:0 18px 55px rgba(0,0,0,.62);
}
.map-lightbox-dialog img{
  display:block;
  width:auto;
  height:auto;
  max-width:min(88vw,900px);
  max-height:88vh;
  object-fit:contain;
}
.map-lightbox-close{
  position:absolute;
  z-index:2;
  right:10px;
  top:10px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  color:#fff;
  background:rgba(16,16,16,.76);
  cursor:pointer;
  font:300 28px/34px Arial,Helvetica,sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.map-lightbox-close:hover,
.map-lightbox-close:focus-visible{
  color:#f2c1a0;
  border-color:rgba(207,149,109,.84);
  background:rgba(67,43,31,.92);
  outline:none;
}

/* ======================== V4.3 desktop contacts final colour hierarchy ======================== */
@media(min-width:1001px){
  .view[data-view="contacts"] .contact-online strong{
    color:#53b4bd;
  }
}


/* ======================== V4.4 facade final micro-polish ======================== */
@media(min-width:1001px){
  /* Keep the specialty text and both decorative rules on one true vertical axis. */
  .facade-specialty{
    display:flex;
    align-items:center;
    white-space:nowrap;
  }
  .facade-specialty::before,
  .facade-specialty::after{
    display:block;
    flex:0 0 22px;
    width:22px;
    height:1px;
    margin:0 7px;
    vertical-align:baseline;
  }

  /* Slightly stronger, but still restrained, feedback for the primary facade CTA. */
  .facade .cta--reception:hover,
  .facade .cta--reception:focus-visible{
    filter:brightness(1.13) saturate(1.05);
    transform:translateY(-1px);
    border-color:rgba(112,215,225,.78);
    box-shadow:0 6px 16px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.18);
    outline:none;
  }

  /* Match the secondary facade CTA hover to the approved copper language used
     by the internal “Посмотреть услуги” action. */
  .facade .cta--site:hover,
  .facade .cta--site:focus-visible{
    color:#fff;
    transform:translateY(-1px);
    border-color:rgba(197,141,109,.64);
    background:linear-gradient(180deg,rgba(84,55,40,.78) 0%,rgba(31,24,21,.90) 100%);
    box-shadow:0 5px 14px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.07);
    outline:none;
  }
}

/* ======================== V4.5 facade specialty rule optical alignment ======================== */
@media(min-width:1001px){
  /* Optical correction only: the 1px rules read slightly high against the serif text. */
  .facade-specialty::before,
  .facade-specialty::after{
    transform:translateY(1px);
  }
}