@import url("base.css");


/* Variant layer. Original HTML, copy and photographs are preserved. */
:root { color-scheme: light; }
body { overflow-x: hidden; }
.hero, .service-card, .conditions-card, .gallery-item, .about, .final-contact { isolation: isolate; }
.hero-visual img, .service-card-media img, .gallery-item img { image-rendering: auto; }
.hero-action-row, .other-task, .contact-options > a { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: variant-rise .65s cubic-bezier(.22,.72,.2,1) both; }
  .hero-visual { animation: variant-rise .8s .08s cubic-bezier(.22,.72,.2,1) both; }
  .service-card { animation: variant-rise .6s cubic-bezier(.22,.72,.2,1) both; }
  .service-card:nth-child(2) { animation-delay: .05s; }
  .service-card:nth-child(3) { animation-delay: .1s; }
  .service-card:nth-child(4) { animation-delay: .15s; }
  @keyframes variant-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}

:root { --paper:#f7f3eb; --paper-deep:#e9e2d6; --ink:#172330; --ink-soft:#667078; --line:rgba(23,35,48,.15); --white:#fffdf8; --accent:#b7864d; --accent-dark:#8c6538; --radius-lg:2px; --radius-md:2px; }
body { background:#f7f3eb; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
.container { width:min(1280px,calc(100% - 62px)); }
.site-header { background:rgba(247,243,235,.9); border-bottom:1px solid rgba(23,35,48,.12); backdrop-filter:blur(18px); }
.header-inner { min-height:70px; }
.brand strong { font-family:Arial,Helvetica,sans-serif; font-size:23px; font-weight:700; }
.desktop-nav { gap:28px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.header-cta { border-radius:0; border:1px solid var(--ink); background:transparent; color:var(--ink); padding:11px 18px; }
.hero { min-height:690px; grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr); gap:56px; padding-block:70px 50px; }
.eyebrow { font-size:11px; color:#42515d; letter-spacing:.18em; }
.eyebrow span { width:34px; height:1px; border-radius:0; box-shadow:none; background:var(--accent); }
.hero h1 { font-family:Arial,Helvetica,sans-serif; font-size:clamp(60px,6.4vw,92px); font-weight:700; color:#18293a; line-height:.92; letter-spacing:-.065em; }
.hero-description { max-width:580px; margin-top:26px; font-family:Arial,Helvetica,sans-serif; font-size:18px; color:#424d56; }
.hero-action-row { margin-top:34px; }
.button { border-radius:0; min-height:50px; }
.button-primary { background:#17293a; }
.hero-visual { min-height:610px; border-radius:0 0 0 96px; box-shadow:0 18px 60px rgba(47,40,31,.11); }
.hero-visual::before { background:linear-gradient(180deg,transparent 66%,rgba(16,24,31,.38)); }
.hero-visual figcaption { right:0; bottom:0; left:auto; padding:14px 18px; background:#f7f3eb; color:var(--ink); }
.hero-visual figcaption span { color:var(--ink-soft); }
.services { padding-block:64px 82px; background:#fbf9f5; color:var(--ink); border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; }
.section-heading h2,.gallery-heading h2,.about h2,.final-contact h2 { font-family:Arial,Helvetica,sans-serif; font-weight:700; letter-spacing:-.055em; }
.light-heading h2 { grid-column:auto; }
.service-grid { margin-top:34px; grid-template-columns:repeat(4,1fr); gap:18px; }
.service-card { min-height:430px; padding:0 0 18px; border:0; border-top:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); }
.service-card:hover { background:transparent; border-color:var(--accent-dark); transform:none; }
.service-card-top { display:none; }
.card-mark { border:0; width:auto; height:auto; color:var(--accent-dark); }
.service-card-media { margin:0; border-radius:0; aspect-ratio:4/3; }
.service-card-media img { filter:saturate(.88) contrast(.98); }
.service-card h3 { margin:17px 0 9px; font-family:Arial,Helvetica,sans-serif; font-size:24px; font-weight:700; letter-spacing:-.035em; }
.service-card p { color:#5f686e; font-size:13px; }
.other-task { margin-top:24px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); border-radius:0; padding:20px 0; background:transparent; color:var(--ink); }
.other-task strong { font-family:Arial,Helvetica,sans-serif; font-weight:700; }
.button-light { width:auto; border:1px solid var(--ink); border-radius:0; background:transparent; }
.process { padding-block:88px 104px; }
.process-layout { grid-template-columns:minmax(0,.72fr) minmax(560px,1.28fr); gap:58px; }
.process-heading h2 { margin-top:0; font-size:50px; }
.steps-list { margin-top:34px; }
.steps-list li { grid-template-columns:50px 1fr; padding-block:23px; }
.steps-list > li > span { font-family:Arial,Helvetica,sans-serif; font-size:18px; }
.steps-list h3 { font-family:Arial,Helvetica,sans-serif; font-size:22px; font-weight:700; letter-spacing:-.025em; }
.conditions-card { position:static; border:1px solid var(--line); border-radius:0; padding:34px 38px; background:#f1ece3; }
.conditions-card h3 { font-family:Arial,Helvetica,sans-serif; font-size:44px; font-weight:700; letter-spacing:-.05em; }
.work-gallery { padding-block:72px 88px; background:#17293a; color:#fff; }
.gallery-heading > p { display:none; }
.gallery-grid { grid-template-columns:repeat(6,1fr); grid-auto-rows:190px; gap:8px; }
.gallery-item-a,.gallery-item-b,.gallery-item-c,.gallery-item-d,.gallery-item-e,.gallery-item-f { grid-column:span 1; grid-row:span 1; border-radius:0; }
.gallery-item figcaption { display:block; font-family:Arial,Helvetica,sans-serif; }
.about { position:relative; min-height:430px; overflow:hidden; padding-block:74px; background:#f7f3eb; color:var(--ink); }
.about::before { content:""; position:absolute; left:0; top:0; bottom:0; width:30%; background:url("dmitry-hero.webp") 56% 36%/cover no-repeat; filter:saturate(.72) contrast(.95); }
.about::after { content:""; position:absolute; left:30%; top:0; bottom:0; width:1px; background:var(--line); }
.about-layout { position:relative; z-index:1; grid-template-columns:32% 1fr; gap:6%; }
.about h2 { grid-column:2; font-size:52px; }
.about-copy { grid-column:2; padding-top:0; max-width:720px; }
.about-copy .about-lead { font-family:Arial,Helvetica,sans-serif; font-size:27px; font-weight:700; letter-spacing:-.025em; }
.final-contact { padding-block:74px; background:#f1ece3; color:var(--ink); }
.final-contact-layout { grid-template-columns:.75fr 1.25fr; align-items:start; }
.final-contact h2 { font-size:52px; }
.contact-copy > p:last-child { color:#626c73; }
.contact-options { border-top:1px solid var(--ink); }
.contact-options > a { min-height:66px; border:0; border-bottom:1px solid var(--ink); border-radius:0; color:var(--ink); padding-inline:0; }
.contact-options > a:hover { background:rgba(23,41,58,.045); transform:none; }
.contact-options small,.contact-options em { color:#707b83; }
.contact-options b { color:var(--accent-dark); }
.site-footer { background:#17293a; }
.cookie-banner { background:#17293a; border-radius:0; }
.mobile-contact { border-radius:0; background:#17293a; }
.legal-page { background:#f7f3eb; }
.legal-document h1,.legal-document h2 { font-family:Arial,Helvetica,sans-serif; font-weight:700; letter-spacing:-.045em; }
@media(max-width:980px){ .service-grid{grid-template-columns:repeat(2,1fr)}.process-layout{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(3,1fr)} .gallery-item-a,.gallery-item-b,.gallery-item-c,.gallery-item-d,.gallery-item-e,.gallery-item-f{grid-column:span 1!important;grid-row:span 1!important}.about::before{width:38%}.about::after{left:38%}.about-layout{grid-template-columns:40% 1fr}.about h2,.about-copy{grid-column:2} }
@media(max-width:760px){ .hero{grid-template-columns:1fr}.hero h1 span{white-space:normal}.hero-visual{border-radius:0 0 0 50px}.service-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.about{padding-top:300px}.about::before{width:100%;height:260px;bottom:auto}.about::after{display:none}.about-layout{grid-template-columns:1fr}.about h2,.about-copy{grid-column:1}.final-contact-layout{grid-template-columns:1fr} }

/* Mobile refinement: keep the desktop editorial design intact, but make the
   mobile layout use one consistent content width and never crop/overflow photos. */
@media (max-width: 760px) {
  html,
  body,
  main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .container {
    width: min(calc(100% - 28px), 620px);
    max-width: 100%;
  }

  .header-inner {
    gap: 12px;
  }

  .brand {
    min-width: 0;
  }

  .brand strong {
    font-size: 15px;
  }

  .header-cta {
    min-width: 0;
    padding: 9px 11px;
    font-size: 11px;
    white-space: nowrap;
  }

  .hero,
  .hero-copy,
  .hero-visual,
  .service-card,
  .process-main,
  .conditions-card,
  .gallery-grid,
  .about-layout,
  .about-copy,
  .final-contact-layout,
  .contact-copy,
  .contact-options {
    min-width: 0;
    max-width: 100%;
  }

  .hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-block: 34px 50px;
  }

  .hero-copy {
    padding-block: 0;
  }

  .eyebrow {
    margin-bottom: 18px;
    font-size: 9px;
    letter-spacing: .13em;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(34px, 9.5vw, 40px);
    line-height: .98;
    letter-spacing: -.045em;
  }

  .hero h1 span {
    white-space: nowrap;
  }

  .hero-description {
    max-width: 100%;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.42;
  }

  .hero-action-row {
    margin-top: 24px;
    gap: 12px;
  }

  .button {
    min-height: 46px;
    padding-inline: 18px;
    font-size: 14px;
  }

  .hero-action-row p {
    font-size: 12px;
  }

  .hero-visual {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0 0 0 34px;
  }

  .hero-visual img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
  }

  .hero-visual figcaption {
    right: 0;
    bottom: 0;
    left: auto;
    max-width: 72%;
    padding: 10px 12px;
    font-size: 12px;
  }

  .hero-visual figcaption span {
    font-size: 9px;
  }

  .services {
    padding-block: 50px 56px;
  }

  .section-heading h2,
  .gallery-heading h2,
  .about h2,
  .final-contact h2,
  .process-heading h2 {
    font-size: clamp(34px, 9vw, 40px);
    line-height: 1;
    letter-spacing: -.04em;
  }

  .service-grid {
    margin-top: 28px;
    gap: 24px;
  }

  .service-card {
    min-height: 0;
    padding-bottom: 15px;
  }

  .service-card-media {
    aspect-ratio: 16 / 10;
  }

  .service-card h3 {
    margin-top: 13px;
    font-size: 21px;
  }

  .service-card p {
    font-size: 13px;
    line-height: 1.5;
  }

  .other-task {
    margin-top: 20px;
    padding-block: 17px;
    gap: 14px;
  }

  .process {
    padding-block: 54px 60px;
  }

  .process-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .steps-list {
    margin-top: 26px;
  }

  .steps-list li {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-block: 16px;
  }

  .steps-list > li > span {
    font-size: 15px;
  }

  .steps-list h3 {
    font-size: 19px;
  }

  .steps-list p {
    font-size: 13px;
  }

  .conditions-card {
    padding: 24px 20px;
  }

  .conditions-card h3 {
    font-size: 34px;
  }

  .price-list,
  .conditions-list,
  .conditions-card small {
    font-size: 12px;
  }

  .work-gallery {
    padding-block: 52px 58px;
  }

  .gallery-grid {
    margin-top: 26px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 150px;
    gap: 7px;
  }

  .gallery-item-a,
  .gallery-item-b,
  .gallery-item-c,
  .gallery-item-d,
  .gallery-item-e,
  .gallery-item-f {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-width: 0;
  }

  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gallery-item figcaption {
    right: 6px;
    bottom: 6px;
    left: 6px;
    padding: 5px 7px;
    font-size: 9px;
    line-height: 1.2;
  }

  .about {
    min-height: 0;
    padding-top: calc(min(calc(100vw - 28px), 620px) + 36px);
    padding-bottom: 54px;
  }

  .about::before {
    top: 0;
    left: 14px;
    width: min(calc(100% - 28px), 620px);
    height: min(calc(100vw - 28px), 620px);
    max-height: 620px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: saturate(.78) contrast(.97);
  }

  .about-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .about h2,
  .about-copy {
    grid-column: 1;
  }

  .about-copy .about-lead {
    font-size: 22px;
    line-height: 1.15;
  }

  .about-copy p {
    font-size: 14px;
    line-height: 1.58;
  }

  .final-contact {
    padding-block: 52px 58px;
  }

  .final-contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .contact-copy > p:last-child {
    font-size: 14px;
    line-height: 1.55;
  }

  .contact-options > a {
    min-height: 58px;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    padding-inline: 0;
    font-size: 14px;
  }

  .contact-options > a > span {
    min-width: 0;
  }

  .contact-options em {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .footer-inner {
    gap: 18px;
  }

  .legal-document h1 {
    font-size: clamp(34px, 9.5vw, 42px);
    line-height: 1;
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: 32px;
    white-space: normal;
  }

  .hero h1 span {
    white-space: normal;
  }

  .header-cta {
    font-size: 10px;
    padding-inline: 9px;
  }
}