/* Doctor Guitar mobile: desktop identity, existing mobile content and controls. */
:root {
  color-scheme: dark;
  --bg: #101010;
  --panel: #1c1c1c;
  --cream: #f8f8f8;
  --muted: #c4c4c4;
  --copper: #fa4b55;
  --ink: #fff;
  --line: #ffffff26;
  --red: #fa4b55;
  --red-dark: #cf2335;
}

html { scroll-padding-top: 90px; }
body {
  background: #101010 url('/images/index_bg.jpg') center top / cover no-repeat;
  color: var(--cream);
  font-family: Arial, 'Segoe UI', sans-serif;
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
h1, h2, h3 { letter-spacing: -.025em; }
p { color: var(--muted); }
.shell { width: min(1180px, calc(100% - 40px)); }

/* The desktop logo and its original Since 2011 ornament. */
.masthead {
  padding: 12px 20px 22px;
  border-bottom: 0;
  background: transparent;
}
.masthead > a { width: 228px; max-width: 80%; }
.masthead img { width: 100%; height: auto; aspect-ratio: 450 / 338; }
.masthead > a::after {
  content: '';
  position: absolute;
  bottom: -18px;
  inset-inline-end: -32.4px;
  width: 134.4px;
  height: 44.4px;
  background: url('/images/since_icon.png') center / contain no-repeat;
  pointer-events: none;
}
.masthead .logo-animation, .masthead .logo-motion-toggle { display: none; }

/* Preserve the mobile menu and language buttons in the sticky toolbar. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #292929f7, #191919fa);
  border-block: 1px solid #ffffff2d;
  box-shadow: 0 8px 26px #0006;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-wrap {
  height: 70px;
  gap: 18px;
}
.toolbar-brand { font-size: 16px; color: #fff; min-width: 0; }
.toolbar-brand span { color: #c4c4c4; font-size: 10px; line-height: 1.4; }
.dg-mobile-langs {
  padding: 4px;
  gap: 5px;
  border-color: #ffffff26;
  background: #111b;
  box-shadow: inset 0 1px 0 #ffffff0c;
}
.dg-mobile-langs a {
  min-width: 42px;
  height: 38px;
  padding-inline: 8px;
  border-color: #ffffff38;
  background: linear-gradient(#303030, #1d1d1d);
  color: #fff;
  font-size: 11px;
}
.dg-mobile-langs a:hover, .dg-mobile-langs a:focus-visible,
.dg-mobile-langs a.active {
  color: #fff;
  background: linear-gradient(135deg, #dc3043, #b91f32);
  border-color: #ff8990;
}
.menu-toggle {
  border: 1px solid #ff7b85;
  background: linear-gradient(135deg, #dc3043, #b91f32);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 14px #fa4b552b;
  flex: none;
}
#navigation a { color: #e2e2e2; }
#navigation a:hover, #navigation a[aria-current] { color: #ff858e; }
.header-call { color: #fff; }

/* Existing hero copy and photograph, presented as the desktop's two panels. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  min-height: 0;
  padding-block: 30px 26px;
  background: transparent;
  overflow: visible;
}
.hero-content { order: 0; padding-block: 0; }
.hero .eyebrow { color: #ff7b85; margin-bottom: 16px; }
.hero h1 { max-width: 100%; font-size: clamp(36px, 5.5vw, 68px); font-weight: 900; line-height: 1.08; }
.hero h1 em { color: var(--red); }
.hero p { color: #ddd; max-width: 640px; margin: 19px 0; }
.hero .actions { gap: 10px; }
.hero-photo {
  order: 2;
  position: relative;
  inset: auto;
  width: min(1180px, calc(100% - 40px));
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  min-height: 0;
  border: 1px solid #ffffff4d;
  border-radius: 12px;
  background: #171717 url('../images/bg_S.jpg') center / cover no-repeat;
  filter: none;
  opacity: 1;
  box-shadow: 0 16px 36px #0008, inset 0 1px 0 #ffffff0d;
}
.hero-note:empty { display: none; }
.hero-caption {
  order: 3;
  position: static;
  align-self: center;
  color: #aaa;
  font-size: 9px;
  letter-spacing: 3px;
}
.hero .google-review-proof-mobile {
  order: 1;
  position: static;
  inset: auto;
  transform: none;
  align-self: flex-start;
  width: min(315px, calc(100% - 40px));
  margin-inline: 20px;
  border-color: #ffffff30;
  background: linear-gradient(145deg, #252525f5, #141414f5);
}

/* Desktop palette, buttons and dark panels, without changing page structure. */
.eyebrow { color: #ff7b85; }
.button {
  min-height: 48px;
  border: 1px solid #ff8990;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(125deg, #dc3043, #b91f32);
  box-shadow: 0 5px 20px #d72d4030;
}
.button:hover { background: linear-gradient(125deg, #da3043, #c51f33); }
.button.ghost, .button.outline {
  background: #ffffff09;
  border-color: #ffffff4d;
  color: #f8f8f8;
  box-shadow: none;
}
.button.ghost:hover, .button.outline:hover { background: #ffffff16; }
.button[href*='wa.me'] {
  color: #fff;
  background: #15804b;
  border-color: #39c97a;
  box-shadow: 0 5px 20px #128c4526;
}
.button[href*='wa.me']:hover { background: #17834e; }
.trust-strip {
  background: #151515d9;
  border-color: var(--line);
  padding-block: 18px;
}
.trust-strip .shell { color: #ddd; }
.trust-strip .shell > span { color: #ddd !important; }
.section { padding-block: 65px; }
.section-heading h2::after, .about h2::after,
.reviews h2::after, .article-gallery h2::after,
.contact-band h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 13px;
  border-radius: 2px;
  background: var(--red);
}
.service-card, .note-card, .chapter-contents, .photo-grid a {
  border-color: #ffffff29;
  border-radius: 12px;
  background: linear-gradient(145deg, #252525f5, #151515f5);
  box-shadow: 0 10px 26px #0003;
}
.card-image img, .portrait img, .lesson-banner img { filter: none; }
.card-image > span {
  background: #161616d9;
  border-color: #ff737b66;
  color: #fff;
}
.card-copy h3 { line-height: 1.25; }
.card-copy p { color: #d0d0d0; }
.portrait img, .lesson-banner img, .video { border-radius: 12px; }
.portrait > span {
  background: #151515ed;
  border-inline-start: 3px solid var(--red);
  border-inline-end: 0;
  border-radius: 8px;
  color: #fff;
}
.text-link { color: #ff858e; border-color: #fa4b5566; }
.reviews {
  background: #141414c7;
  color: #f8f8f8;
  border-block: 1px solid var(--line);
  padding-block: 52px;
}
.reviews .eyebrow { color: #ff7b85; }
.quote-grid { gap: 20px; }
.quote-grid blockquote, .legacy-quotes blockquote {
  padding: 24px;
  border: 1px solid #ffffff29;
  border-radius: 12px;
  background: linear-gradient(145deg, #252525, #181818);
}
blockquote p, .legacy-quotes blockquote p { color: #e0e0e0; }
.quote-mark { color: var(--red); }
cite { color: #f4f4f4; }
cite small { color: #aaa; }
.contact-band {
  background: linear-gradient(135deg, #252525ee, #141414f5);
  border-color: #ffffff2b;
}
.footer { border-top: 1px solid #ffffff1f; }
.footer-logo img {
  width: 180px;
  height: auto;
  aspect-ratio: 450 / 338;
  mix-blend-mode: normal;
  object-fit: contain;
}
.page-intro {
  margin-top: 26px;
  margin-bottom: 20px;
  padding: 30px;
  border: 1px solid #ffffff29;
  border-radius: 12px;
  background: linear-gradient(145deg, #232323f5, #151515f5);
}
.page-intro h1 { font-weight: 900; line-height: 1.18; }
.page-intro p { color: #d5d5d5; }
.feature-list { color: #d1d1d1; }
.chapter-nav a[aria-current] { color: #fff; }
.more-pages a { color: #ff858e; border-radius: 8px; }
.email { text-align: start; }

/* Persistent contact controls, including the phone safe area. */
.mobile-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  gap: 10px;
  padding: 10px max(14px, calc((100vw - 700px) / 2)) calc(10px + env(safe-area-inset-bottom, 0px));
  background: #111111f5;
  border-top: 1px solid #ffffff2d;
  box-shadow: 0 -8px 28px #0007;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mobile-contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 12px;
  border-radius: 26px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
  color: #fff;
}
.mobile-contact .mobile-phone {
  border: 1px solid #ff8990;
  background: linear-gradient(125deg, #dc3043, #b91f32);
}
.mobile-contact .mobile-whatsapp {
  border: 1px solid #39c97a;
  background: #15804b;
  color: #fff;
}
.mobile-contact a:hover { filter: brightness(1.12); }

@media (max-width: 760px) {
  .shell { width: calc(100% - 32px); }
  .masthead { padding-block: 8px 23px; }
  .masthead > a { width: 206.4px; }
  .masthead > a::after { width: 120px; height: 39.6px; bottom: -16.8px; }
  .nav-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: calc(100% - 28px);
    height: 68px;
    gap: 8px;
  }
  .toolbar-brand {
    display: flex;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
    gap: 4px;
  }
  .toolbar-brand span { font-size: 9px; }
  .dg-mobile-langs { gap: 4px; padding: 3px; }
  .dg-mobile-langs a { min-width: 40px; height: 38px; padding-inline: 6px; }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 78px;
    height: 46px;
    padding: 0 7px;
    font-size: 12px;
  }
  .menu-toggle span:first-child { font-size: 22px; line-height: 1; }
  #navigation {
    position: absolute;
    top: calc(100% + 7px);
    inset-inline: 12px;
    padding: 10px 15px 15px;
    background: linear-gradient(145deg, #292929, #171717);
    border: 1px solid #ffffff36;
    border-radius: 12px;
    box-shadow: 0 16px 32px #000b;
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #navigation.open { display: flex; flex-direction: column; gap: 0; }
  #navigation a { padding: 13px 12px; font-size: 16px; }
  #navigation a[aria-current] {
    color: #fff;
    background: linear-gradient(125deg, #dc3043, #b91f32);
    border-radius: 7px;
  }
  .hero { padding-top: 25px; gap: 18px; }
  .hero .eyebrow { font-size: 10px; line-height: 1.6; margin-bottom: 13px; }
  .hero h1 { font-size: clamp(35px, 10.5vw, 50px); letter-spacing: -.035em; }
  .hero p { font-size: 16px; line-height: 1.8; margin-block: 17px; }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .button { width: 100%; min-height: 48px; padding: 11px 16px; font-size: 14px; }
  .hero-photo { width: calc(100% - 32px); }
  .hero .google-review-proof-mobile { margin-inline: 16px; width: min(315px, calc(100% - 32px)); }
  .section { padding-block: 48px; }
  .section-heading h2 { max-width: 100%; font-size: 32px; }
  .card-image { height: auto; aspect-ratio: 16 / 10; }
  .card-copy { padding: 23px; }
  .card-copy h3 { font-size: 25px; }
  .about { padding-block: 4px 48px; }
  .about h2 { font-size: 34px; }
  .portrait > span { inset-inline-start: 18px; inset-inline-end: auto; bottom: 18px; }
  .reviews { padding-block: 42px; }
  .reviews h2 { font-size: 32px; }
  .quote-grid { margin-top: 26px; }
  blockquote p { font-size: 18px; }
  .lesson-banner h2, .lesson-banner h3 { line-height: 1.25; }
  .contact-band h2 { font-size: 30px; line-height: 1.25; }
  .contact-band .actions { width: 100%; }
  .contact-band .button { flex: 1 1 100%; }
  .page-intro { padding: 25px 21px; }
  .page-intro h1 { font-size: clamp(33px, 9.6vw, 46px); margin-bottom: 18px; }
  .page-intro p { font-size: 16px; line-height: 1.85; }
  .note-card { padding: 24px; }
  .article-copy { font-size: 16px; line-height: 1.95; }
  .chapter-nav a { border-radius: 7px; }
  .footer { align-items: center; text-align: center; }
  .footer-logo img { width: 168px; }
  html[dir='ltr'] .hero h1 { font-size: clamp(32px, 9.2vw, 46px); letter-spacing: -.035em; }
  html[lang='ru'] .hero h1 { font-size: clamp(31px, 8.8vw, 44px); }
  html[dir='ltr'] .portrait > span { left: 18px; right: auto; }
}

@media (max-width: 360px) {
  .toolbar-brand { font-size: 12px; }
  .toolbar-brand span { font-size: 8px; }
  .nav-wrap { gap: 6px; }
  .dg-mobile-langs a { min-width: 38px; padding-inline: 5px; font-size: 10px; }
  .menu-toggle { width: 72px; font-size: 11px; gap: 5px; }
  .hero h1 { font-size: 35px; }
  .page-intro { padding-inline: 18px; }
  .mobile-contact a { font-size: 13px; }
}

@media (max-width: 760px) and (max-height: 650px) {
  #navigation { max-height: calc(100vh - 360px); max-height: calc(100dvh - 360px); }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover, .dg-mobile-langs a:hover { transform: none; }
}