:root {
  color-scheme: light;
  --blue: #0758e8;
  --blue-strong: #034ccf;
  --navy: #0b1e38;
  --ink: #142238;
  --muted: #647184;
  --line: #dbe3ed;
  --white: #fff;
  --page: 1360px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --header-height: 82px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--white); scroll-padding-top: calc(var(--header-height) + 16px); }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--white); }
body, button, a { font-family: "Segoe UI", Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { color: var(--white); background: var(--blue); }

.page-width { width: min(var(--page), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 20; top: 10px; left: 10px; padding: 12px 16px; color: var(--white); background: var(--navy); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 10; top: 0; height: var(--header-height); background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(20,34,56,.08); }
.header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 28px; }
.identity { display: grid; flex: 0 0 auto; gap: 3px; text-decoration: none; }
.identity-name { color: var(--navy); font-size: 19px; font-weight: 750; letter-spacing: -.035em; }
.identity-role { color: var(--muted); font-size: 12px; letter-spacing: .015em; }
.site-nav { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: clamp(16px, 2.25vw, 34px); }
.site-nav > a:not(.button) { position: relative; padding-block: 8px; color: #3d4c62; font-size: 13px; font-weight: 570; text-decoration: none; white-space: nowrap; }
.site-nav > a:not(.button)::after { position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: var(--blue); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.site-nav > a:not(.button):hover::after, .site-nav > a:not(.button):focus-visible::after { transform: scaleX(1); }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; padding: 0 21px; border: 1px solid var(--blue); border-radius: 3px; color: var(--white); background: var(--blue); font-size: 14px; font-weight: 650; text-decoration: none; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.button[hidden] { display: none !important; }
.button:hover { border-color: var(--blue-strong); background: var(--blue-strong); transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-small { min-height: 42px; padding-inline: 19px; font-size: 13px; }
.button-outline { color: var(--blue); background: transparent; }
.button-outline:hover { border-color: var(--blue); color: var(--blue); background-color: #eff5ff; }
.button-arrow { font-size: 18px; font-weight: 400; line-height: 1; }
.menu-toggle { display: none; }

h1, h2, h3, p, figure { margin: 0; }
.button-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.blueprint { position: absolute; background: center / contain no-repeat; opacity: .32; pointer-events: none; }
.hero { position: relative; }
.hero-scene { position: relative; overflow: hidden; }
.hero-inner { position: relative; display: flex; min-height: clamp(620px, 49vw, 730px); align-items: center; }
.hero-copy { position: relative; z-index: 2; width: 47%; max-width: 620px; padding-block: 62px 100px; }
.hero-copy::before, .section-heading::before { display: block; width: 48px; height: 2px; background: #69a8ff; content: ""; }
.hero-copy::before { margin-bottom: 23px; }
h1 { color: var(--navy); font-size: clamp(48px, 4.7vw, 68px); font-weight: 750; letter-spacing: -.055em; line-height: 1.04; }
h1 span { display: block; color: inherit; }
.hero-description { max-width: 430px; margin-top: 27px; color: #5c6a7e; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; }
.hero-actions { display: flex; gap: 16px; margin-top: 30px; }
.hero-actions .button { min-width: 170px; min-height: 56px; }
.hero-actions .button-outline { background-color: var(--white); }
.hero-actions .button-outline:hover { background-color: #eff5ff; }
.hero-photo { position: absolute; inset: 0 calc((100vw - 100%) / -2) 0 36%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.12) 5%, rgba(0,0,0,.85) 15%, #000 23%); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.proof-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; padding-block: 25px; border-bottom: 1px solid var(--line); list-style: none; }
.proof-list li { display: flex; min-height: 45px; align-items: center; gap: 16px; padding-inline: 26px; color: var(--navy); font-size: 14px; line-height: 1.35; }
.proof-list li:first-child { padding-left: 0; }
.proof-list li + li { border-left: 1px solid var(--line); }
.proof-mark { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; color: #0873ff; }
.proof-mark svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.task-band { overflow: hidden; padding-block: 15px; border-bottom: 1px solid var(--line); }
.marquee-track { display: flex; width: max-content; animation: task-marquee 30s linear infinite; }
.task-list { display: flex; flex: 0 0 auto; align-items: center; margin: 0; padding: 0; list-style: none; }
.task-list li { display: flex; align-items: center; color: var(--navy); font-size: 15px; font-weight: 620; line-height: 1.4; white-space: nowrap; }
.task-list li::after { margin-inline: 18px; color: #8aa4c7; content: "·"; }
.task-band:hover .marquee-track, .task-band:focus-within .marquee-track { animation-play-state: paused; }
@keyframes task-marquee { to { transform: translateX(-50%); } }
.part-categories { position: relative; padding-block: 32px 38px; }
.parts-heading { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.parts-heading p { color: var(--muted); font-size: 12px; }
.parts-row { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.parts-row li { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.parts-row img { width: 100%; height: auto; aspect-ratio: 1; mix-blend-mode: multiply; }
.parts-row span { max-width: 150px; color: var(--navy); font-size: 14px; font-weight: 600; line-height: 1.3; }
.categories-blueprint { bottom: 52px; left: -20px; width: 430px; height: 220px; background-image: url("./img/engineering/shaft-side.svg"); opacity: .27; }
.section-space { padding-block: clamp(58px, 6.5vw, 92px); }
.section-heading { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; }
.section-heading::before { flex: 0 0 48px; }
.section-number { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
h2 { color: var(--navy); font-size: clamp(34px, 4vw, 56px); font-weight: 740; letter-spacing: -.05em; line-height: 1.06; }
.capabilities { position: relative; overflow: clip; padding-top: 58px; padding-bottom: 80px; border-top: 1px solid var(--line); }
.capability-list { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 7%; margin: 35px 0 0; padding: 0; list-style: none; }
.capability-list li { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(0, 1fr); align-items: center; gap: 20px; min-height: 230px; }
.capability-list li:nth-child(even) { transform: translateY(24px); }
.capability-object { position: relative; }
.capability-render { position: relative; width: 100%; height: auto; mix-blend-mode: multiply; }
.capability-number { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; color: #6b9fe9; font-size: 20px; font-weight: 550; }
.capability-number::after { width: 58px; height: 1px; background: #b6c9e3; content: ""; }
.capability-list h3 { max-width: 350px; color: var(--navy); font-size: clamp(23px, 2.2vw, 32px); font-weight: 700; letter-spacing: -.045em; line-height: 1.13; }
.process { position: relative; overflow: hidden; color: var(--white); background: #09243f; }
.process-blueprint { top: -145px; right: -80px; width: 940px; height: 460px; background-image: url("./img/engineering/mechanical-section.svg"); opacity: .52; mask-image: linear-gradient(160deg, transparent 18%, #000 38%, rgba(0,0,0,.15) 74%); }
.process-inner { position: relative; padding-block: 64px 62px; }
.section-heading-light { display: block; }
.section-heading-light::before { margin-bottom: 22px; }
.section-heading-light .section-number { display: none; }
.section-heading-light h2 { color: var(--white); }
.process-list { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 30px; margin: 48px 0 0; padding: 0; list-style: none; }
.process-list li { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 15px; font-size: 16px; line-height: 1.4; }
.process-list li:not(:last-child)::after { position: absolute; top: 23px; left: 68px; width: calc(100% - 65px); height: 7px; border-top: 1px solid #62adff; content: ""; }
.process-list li:not(:last-child)::before { position: absolute; top: 20px; right: 0; width: 7px; height: 7px; border-top: 1px solid #62adff; border-right: 1px solid #62adff; transform: rotate(45deg); content: ""; }
.process-step { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #62adff; border-radius: 50%; color: var(--white); font-size: 12px; }
.gallery { padding-bottom: clamp(68px, 8vw, 112px); }
.gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 31px; }
.gallery-controls { display: flex; gap: 8px; }
.gallery-control, .lightbox-nav, .lightbox-close { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--navy); background: var(--white); font-size: 20px; cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.gallery-control:hover, .lightbox-nav:hover, .lightbox-close:hover { border-color: var(--blue); color: var(--white); background: var(--blue); }
.gallery-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; outline-offset: 7px; }
.gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-viewport:active { cursor: grabbing; }
.gallery-track { display: flex; width: max-content; gap: 16px; }
.gallery-group { display: flex; flex: 0 0 auto; gap: 16px; }
.gallery-item { position: relative; display: block; width: clamp(230px, 24vw, 310px); aspect-ratio: 1.06 / 1; overflow: hidden; padding: 0; border: 0; background: #e9edf2; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.035); }
.gallery-viewport.is-dragging { scroll-behavior: auto; user-select: none; }
.gallery-viewport.is-auto-scrolling { scroll-behavior: auto; scroll-snap-type: none; }

.lightbox { width: min(1000px, calc(100vw - 28px)); max-width: none; max-height: calc(100dvh - 28px); padding: 0; overflow: visible; border: 0; color: var(--white); background: transparent; }
.lightbox::backdrop { background: rgba(5,14,28,.9); }
.lightbox-shell { position: relative; display: grid; min-height: min(660px, calc(100dvh - 40px)); grid-template-columns: 56px minmax(0,1fr) 56px; align-items: center; gap: 12px; padding: 26px 10px 18px; }
.lightbox-close { position: absolute; z-index: 1; top: -3px; right: 4px; width: 46px; height: 46px; border-color: rgba(255,255,255,.35); color: var(--white); background: rgba(11,30,56,.72); font-size: 30px; line-height: 1; }
.lightbox-nav { border-color: rgba(255,255,255,.35); color: var(--white); background: rgba(11,30,56,.72); }
.lightbox-figure { display: grid; min-width: 0; justify-items: center; gap: 12px; }
.lightbox-image { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 112px); object-fit: contain; background: rgba(255,255,255,.03); }
.lightbox-caption { color: rgba(255,255,255,.8); font-size: 12px; text-align: center; }


.gallery { position: relative; }
.gallery-blueprint { bottom: -20px; left: 30px; width: 250px; height: 185px; background-image: url("./img/engineering/milled-housing.svg"); opacity: .3; }
.gallery .section-heading::before { position: absolute; top: -22px; left: 0; }
.gallery .section-number { display: none; }
.gallery-heading::after { order: 1; flex: 1; height: 1px; background: #c7d4e5; content: ""; }
.gallery-controls { order: 2; }
.audience { position: relative; overflow: clip; display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.55fr); align-items: start; gap: 7%; border-top: 1px solid var(--line); }
.audience-intro, .audience-list { position: relative; }
.audience-heading, .master-heading { display: block; }
.audience-heading::before, .master-heading::before { margin-bottom: 16px; }
.audience-heading .section-number, .master-heading .section-number { display: block; margin-bottom: 13px; }
.audience-photo { margin-top: 34px; }
.audience-photo img { width: 100%; height: auto; aspect-ratio: 24 / 13; object-fit: cover; }
.audience-blueprint { bottom: 35px; left: -15px; width: 400px; height: 270px; background-image: url("./img/engineering/bearing-seat.svg"); opacity: .32; }
.audience-list { margin: 0; padding: 0; list-style: none; }
.audience-list li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 20px; padding-block: 27px 31px; border-top: 1px solid var(--line); }
.audience-list li:first-child { padding-top: 18px; }
.audience-list li:last-child { border-bottom: 1px solid var(--line); }
.audience-number { padding-top: 5px; color: var(--blue); font-size: 15px; font-weight: 600; }
.audience-list li > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); gap: 28px; align-items: start; }
.audience-list h3 { color: var(--navy); font-size: clamp(26px,2.1vw,31px); font-weight: 700; letter-spacing: -.04em; line-height: 1.13; }
.audience-list p { color: #5b687a; font-size: 16px; line-height: 1.55; }
.master { overflow: hidden; border-top: 1px solid var(--line); }
.master-inner { position: relative; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-areas: "photo heading" "photo copy"; column-gap: 8%; row-gap: 28px; align-items: start; padding-bottom: 110px; }
.master-photo { position: relative; grid-area: photo; height: 100%; min-height: 520px; }
.master-photo img { width: 100%; height: 100%; max-height: 750px; object-fit: cover; object-position: 38% 25%; }
.master-heading { position: relative; grid-area: heading; }
.master-heading h2 span { display: block; margin-top: 10px; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; }
.master-copy { position: relative; grid-area: copy; display: grid; gap: 23px; padding-bottom: 14px; }
.master-lead { max-width: 580px; color: var(--navy); font-size: clamp(21px,1.7vw,25px); font-weight: 550; letter-spacing: -.02em; line-height: 1.4; }
.master-description, .master-background { max-width: 590px; color: #5b687a; font-size: 17px; line-height: 1.6; }
.master-experience { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; margin: 3px 0; padding-block: 23px; border-block: 1px solid var(--line); }
.master-experience > div + div { padding-left: 25px; border-left: 1px solid var(--line); }
.master-experience dt { color: var(--blue); font-size: 52px; font-weight: 650; letter-spacing: -.06em; line-height: 1.05; }
.master-experience dt span { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.master-experience dd { max-width: 220px; margin: 8px 0 0; color: var(--navy); font-size: 15px; line-height: 1.4; }
.master-blueprint { right: -80px; bottom: -145px; width: 430px; height: 310px; background-image: url("./img/engineering/measurement.svg"); opacity: .32; }
:focus-visible { outline: 3px solid #70a4ff; outline-offset: 3px; }
@media (min-width: 1600px) {
  .hero-photo { left: calc(50% - 190px); }
}
@media (max-width: 1100px) {
  .marquee-track { animation-duration: 42s; }
  .site-nav { gap: 16px; }
  .site-nav > a:not(.button) { font-size: 12px; }
  .hero-inner { min-height: 620px; }
  .hero-copy { width: 49%; }
  h1 { font-size: clamp(43px, 4.7vw, 55px); }
  .hero-description { max-width: 355px; font-size: 17px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { min-width: 150px; padding-inline: 15px; }
  .proof-list li { gap: 11px; padding-inline: 16px; font-size: 13px; }
  .parts-row span { font-size: 12px; }
  .capability-list { gap: 10px 4%; }
  .capability-list li { grid-template-columns: minmax(140px,.85fr) minmax(0,1fr); gap: 12px; min-height: 210px; }
  .capability-list h3 { font-size: 25px; }
  .audience { grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 6%; }
  .audience-list li > div { display: block; }
  .audience-list p { margin-top: 12px; }
  .audience-list h3 { font-size: 28px; }
  .audience-blueprint { width: 300px; height: 220px; }
  .master-inner { column-gap: 6%; row-gap: 24px; }
  .master-description, .master-background { font-size: 16px; }
  .master-experience dt { font-size: 46px; }
}
@media (max-width: 820px) {
  :root { --header-height: 72px; --gutter: 28px; }
  .menu-toggle { display: grid; width: 46px; height: 46px; align-content: center; justify-items: center; gap: 6px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); cursor: pointer; }
  .menu-toggle span { width: 18px; height: 1.5px; background: var(--navy); transition: transform .18s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .site-nav { position: absolute; top: calc(var(--header-height) - 1px); right: 0; left: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 10px var(--gutter) 20px; border-bottom: 1px solid var(--line); background: var(--white); box-shadow: 0 16px 22px rgba(11,30,56,.08); }
  .site-nav.is-open { display: flex; }
  .site-nav > a:not(.button) { padding-block: 14px; border-bottom: 1px solid #edf1f5; font-size: 15px; }
  .site-nav > a:not(.button)::after { display: none; }
  .site-nav .nav-call { margin-top: 14px; }
  .hero-inner { min-height: 0; display: block; }
  .hero-copy { width: 100%; max-width: 620px; padding-block: 48px 24px; }
  h1 { font-size: clamp(45px,6vw,52px); }
  .hero-description { max-width: 500px; }
  .hero-photo { position: relative; inset: auto; margin-inline: calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); aspect-ratio: 1.55; mask-image: linear-gradient(180deg,transparent,#000 12%); }
  .hero-photo img { object-position: center top; }
  .proof-list { grid-template-columns: repeat(2,minmax(0,1fr)); padding-block: 14px; }
  .proof-list li { min-height: 66px; padding: 12px 18px; }
  .proof-list li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .proof-list li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .marquee-track { animation-duration: 42s; }
  .parts-row { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px 8px; }
  .parts-row span { font-size: 13px; }
  .parts-row li:nth-child(n+5) { transform: translateX(50%); }
  .capability-list li { grid-template-columns: minmax(100px,.72fr) minmax(0,1fr); min-height: 170px; gap: 10px; }
  .capability-list h3 { font-size: 22px; }
  .process-list { gap: 22px; }
  .process-list li { font-size: 13px; }
  .gallery-item { width: clamp(240px,35vw,300px); }
  .audience { grid-template-columns: minmax(0,1fr); gap: 35px; }
  .audience-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: center; }
  .audience-photo { margin-top: 0; }
  .audience-list li > div { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; }
  .audience-list p { margin-top: 0; }
  .audience-blueprint { display: none; }
  .master-inner { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 24px 5%; padding-bottom: 70px; }
  .master-photo { min-height: 500px; }
  .master-experience { gap: 16px; }
  .master-experience > div + div { padding-left: 16px; }
  .master-experience dt { font-size: 40px; }
  .master-experience dt span { display: block; margin-bottom: 3px; }
  .master-blueprint { width: 280px; height: 220px; opacity: .25; }
}
@media (max-width: 600px) {
  :root { --header-height: 68px; --gutter: 21px; }
  .identity-name { font-size: 17px; }
  .identity-role { font-size: 11px; }
  .hero-inner { min-height: 0; display: block; }
  .hero-copy { width: 100%; padding-block: 33px 25px; }
  .hero-copy::before { width: 34px; margin-bottom: 18px; }
  h1 { font-size: clamp(38px,10vw,49px); letter-spacing: -.06em; line-height: 1.04; }
  .hero-description { max-width: 100%; margin-top: 20px; font-size: 16px; line-height: 1.5; }
  .hero-actions { display: grid; grid-template-columns: 1.12fr .88fr; gap: 9px; margin-top: 23px; }
  .hero-actions .button { min-width: 0; min-height: 50px; padding-inline: 9px; font-size: 13px; gap: 8px; }
  .button-icon { width: 18px; height: 18px; flex-basis: 18px; }
  .hero-photo { aspect-ratio: 1.17; }
  .hero-photo img { object-fit: cover; object-position: center 20%; }
  .proof-list li { padding: 10px 9px; gap: 8px; font-size: 12px; }
  .proof-mark { width: 32px; flex-basis: 32px; }
  .proof-mark svg { width: 28px; height: 28px; }
  .task-band { padding-block: 13px; }
  .task-list li { font-size: 13px; }
  .task-list li::after { margin-inline: 14px; }
  .part-categories { padding-block: 28px 32px; }
  .parts-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .parts-heading p { font-size: 11px; }
  .parts-row { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 8px; margin-top: 12px; }
  .parts-row li:nth-child(n+5) { transform: none; }
  .parts-row li:last-child { grid-column: 2; }
  .parts-row span { font-size: 13px; }
  .categories-blueprint, .capabilities-blueprint, .gallery-blueprint { display: none; }
  .section-space { padding-block: 48px; }
  h2 { font-size: clamp(31px,8.4vw,40px); line-height: 1.08; }
  .capabilities { padding-block: 44px 54px; }
  .capability-list { grid-template-columns: minmax(0,1fr); margin-top: 24px; gap: 16px; }
  .capability-list li { grid-template-columns: 38% minmax(0,1fr); min-height: 144px; gap: 15px; }
  .capability-list li:nth-child(even) { transform: none; }
  .capability-number { font-size: 16px; gap: 12px; margin-bottom: 9px; }
  .capability-number::after { width: 37px; }
  .capability-list h3 { font-size: 23px; }
  .process-inner { padding-block: 48px 50px; }
  .process-blueprint { top: auto; bottom: -20px; right: -100px; width: 360px; height: 230px; opacity: .28; }
  .process-list { display: flex; flex-direction: column; gap: 0; margin-top: 30px; }
  .process-list li { min-height: 66px; flex-direction: row; align-items: center; gap: 18px; font-size: 15px; }
  .process-list li:not(:last-child)::after { top: 56px; left: 22px; width: 1px; height: 20px; border: 0; background: #62adff; }
  .process-list li:not(:last-child)::before { display: none; }
  .process-step { flex: 0 0 46px; }
  .gallery { padding-block: 60px 64px; }
  .gallery-heading { gap: 12px; margin-bottom: 23px; }
  .gallery-heading::after { display: none; }
  .gallery-controls { gap: 5px; }
  .gallery-control { width: 40px; height: 40px; font-size: 18px; }
  .gallery-track, .gallery-group { gap: 11px; }
  .gallery-item { width: min(76vw,290px); aspect-ratio: 1 / 1.04; scroll-snap-align: start; }
  .gallery-viewport { scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; }
  .lightbox { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .lightbox-shell { min-height: calc(100dvh - 36px); grid-template-columns: 38px minmax(0,1fr) 38px; gap: 5px; padding: 44px 0 15px; }
  .lightbox-nav { width: 38px; height: 42px; border-radius: 3px; font-size: 18px; }
  .lightbox-close { top: 0; right: 0; width: 42px; height: 42px; }
  .lightbox-image { max-height: calc(100dvh - 130px); }
  .audience { padding-block: 44px 50px; gap: 28px; }
  .audience-intro { grid-template-columns: 1fr; gap: 24px; }
  .audience-heading .section-number, .master-heading .section-number { margin-bottom: 10px; }
  .audience-list li { grid-template-columns: 25px minmax(0,1fr); gap: 12px; padding-block: 23px; }
  .audience-list li > div { display: block; }
  .audience-number { font-size: 14px; padding-top: 3px; }
  .audience-list h3 { font-size: 26px; }
  .audience-list p { margin-top: 11px; font-size: 16px; line-height: 1.5; }
  .master-inner { grid-template-columns: minmax(0,1fr); grid-template-areas: "heading" "photo" "copy"; gap: 25px; padding-block: 44px 60px; }
  .master-heading h2 span { margin-top: 8px; }
  .master-photo { min-height: 0; height: auto; }
  .master-photo img { height: auto; aspect-ratio: 43 / 48; }
  .master-copy { gap: 19px; padding-bottom: 0; }
  .master-lead { font-size: 22px; }
  .master-experience { padding-block: 21px; }
  .master-experience dt { font-size: 44px; }
  .master-experience dd { font-size: 14px; }
  .master-blueprint { display: none; }
}
@media (max-width: 360px) {
  :root { --gutter: 17px; }
  h1 { font-size: 36px; }
  .hero-actions { grid-template-columns: 1fr; }
  .capability-list h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .task-band { overflow: visible; }
  .marquee-track { display: block; width: auto; transform: none; }
  .task-list { flex-wrap: wrap; row-gap: 8px; }
  .task-list[aria-hidden="true"] { display: none; }
}


/* Продолжение принятой дизайн-системы: документальные фото, строки цен и макет оценки. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.continuation-heading { display: block; }
.continuation-heading::before { margin-bottom: 16px; }
.continuation-heading .section-number { display: block; margin-bottom: 13px; }
.real-works, .prices { overflow: clip; border-top: 1px solid var(--line); }
.works-inner, .prices-inner, .estimate-inner { position: relative; }
.works-blueprint { top: 15px; right: -80px; width: 430px; height: 255px; background-image: url("./img/engineering/flanged-section.svg"); opacity: .27; }
.works-list { position: relative; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); align-items: start; gap: 42px 24px; margin: 36px 0 0; padding: 0; list-style: none; }
.work-wide { grid-column: span 7; }
.work-narrow { grid-column: span 5; }
.work-photo { height: clamp(300px,31vw,425px); overflow: hidden; background: #ecf0f4; }
.work-photo img { width: 100%; height: 100%; object-fit: cover; }
.work-example:nth-child(-n+2) .work-photo { height: clamp(360px,40vw,575px); }
.work-example:nth-child(n+3) .work-photo { height: clamp(290px,26vw,370px); }
.work-example:nth-child(1) img { object-position: 50% 30%; }
.work-example:nth-child(2) img { object-position: 50% 35%; }
.work-example:nth-child(3) img { object-position: 50% 48%; }
.work-example:nth-child(4) img { object-position: 50% 48%; }
.work-example figcaption { padding-top: 17px; }
.work-number { display: flex; align-items: center; gap: 16px; margin-bottom: 9px; color: #6b9fe9; font-size: 16px; font-weight: 600; }
.work-number::after { width: 42px; height: 1px; background: #b6c9e3; content: ""; }
.work-example h3 { color: var(--navy); font-size: clamp(23px,2.1vw,30px); letter-spacing: -.035em; line-height: 1.18; }
.work-example p { margin-top: 8px; color: #5b687a; font-size: 16px; line-height: 1.45; }
.prices-blueprint { top: -27px; right: -55px; width: 620px; height: 180px; background-image: url("./img/engineering/thread-profile.svg"); opacity: .2; }
.prices-heading { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.prices-heading > p { max-width: 330px; padding-bottom: 5px; color: #5b687a; font-size: 17px; line-height: 1.4; }
.price-table { position: relative; width: 100%; border-collapse: collapse; text-align: left; }
.price-table thead th { padding-bottom: 14px; color: var(--muted); font-size: 13px; font-weight: 500; }
.price-table thead th:last-child { text-align: right; }
.price-table tbody tr { border-top: 1px solid var(--line); }
.price-table tbody tr:last-child { border-bottom: 1px solid var(--line); }
.price-table tbody th { width: 30%; padding: 22px 28px 22px 0; color: var(--navy); font-size: 23px; font-weight: 700; letter-spacing: -.03em; line-height: 1.22; }
.price-table tbody td { padding: 22px 25px 22px 0; color: #5b687a; font-size: 16px; line-height: 1.45; }
.price-table tbody .price-value { width: 225px; padding-right: 0; color: var(--blue); font-size: 27px; font-weight: 650; letter-spacing: -.035em; line-height: 1.2; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prices-note { position: relative; max-width: 1090px; margin-top: 26px; padding-left: 22px; border-left: 2px solid #6b9fe9; color: #647184; font-size: 15px; line-height: 1.6; }
.estimate { overflow: clip; background: #f3f7fc; }
.estimate-inner { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 8%; align-items: start; }
.estimate-intro, .estimate-form { position: relative; }
.estimate-description { max-width: 470px; margin: 24px 0 28px; color: #5b687a; font-size: 18px; line-height: 1.6; }
.estimate-intro .button-outline { background: var(--white); }
.estimate-intro .button-outline:hover { background: #eff5ff; }
.estimate-blueprint { bottom: -36px; left: -55px; width: 475px; height: 250px; background-image: url("./img/engineering/caliper-outline.svg"); opacity: .24; }
.estimate-form { margin-top: 12px; }
.estimate-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.estimate-form label { display: block; margin-bottom: 12px; color: var(--navy); font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
.field-optional { margin-left: 5px; color: #718096; font-size: .72em; font-weight: 450; letter-spacing: 0; }
.estimate-form textarea, .estimate-form input { display: block; width: 100%; border: 1px solid #bccce1; border-radius: 4px; color: var(--navy); background: var(--white); font: inherit; font-size: 17px; line-height: 1.5; box-shadow: none; }
.estimate-form textarea { min-height: 185px; padding: 15px 18px; resize: vertical; }
.estimate-form input { min-height: 56px; padding: 13px 18px; }
.estimate-form input::placeholder { color: #8595ac; opacity: 1; }
.estimate-form .estimate-consent { display: flex; align-items: center; gap: 11px; margin: 20px 0 4px; color: #5b687a; font-size: 14px; font-weight: 450; letter-spacing: 0; }
.estimate-form .estimate-consent input { flex: 0 0 20px; width: 20px; min-height: 20px; margin: 0; padding: 0; accent-color: var(--blue); }
.estimate-status { margin-top: 14px; color: #52647c; font-size: 14px; line-height: 1.5; }
.estimate-status[hidden] { display: none; }
.estimate-form :disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
.field-help { margin: 11px 0 28px; color: #647184; font-size: 15px; line-height: 1.45; }
.estimate-submit { width: 100%; min-height: 58px; margin-top: 16px; padding-inline: 18px; font-size: 17px; line-height: 1.3; cursor: default; }
.estimate-submit:disabled:hover { background: var(--blue); }
.prototype-note { margin-top: 14px; color: #647184; font-size: 13px; line-height: 1.45; }
@media (max-width: 1100px) {
  .price-table tbody th { font-size: 21px; width: 30%; }
  .price-table tbody .price-value { width: 185px; font-size: 23px; }
  .prices-heading > p { max-width: 230px; font-size: 16px; }
  .estimate-inner { column-gap: 5%; }
  .estimate-description { font-size: 17px; }
  .estimate-submit { font-size: 16px; }
}
@media (max-width: 820px) {
  .works-list { gap: 32px 20px; }
  .work-photo, .work-example:nth-child(-n+2) .work-photo, .work-example:nth-child(n+3) .work-photo { height: 340px; }
  .work-example h3 { font-size: 24px; }
  .work-example p { font-size: 15px; }
  .prices-heading { display: block; }
  .prices-heading > p { max-width: none; margin-top: 18px; padding: 0; }
  .price-table tbody th { width: 29%; padding-right: 18px; font-size: 19px; }
  .price-table tbody td { padding-right: 18px; font-size: 15px; }
  .price-table tbody .price-value { width: 166px; font-size: 21px; }
  .estimate-inner { grid-template-columns: minmax(0,1fr); gap: 38px; }
  .estimate-description { max-width: 590px; }
  .estimate-form { margin-top: 0; }
  .estimate-blueprint { top: 28px; right: -45px; bottom: auto; left: auto; width: 230px; height: 180px; opacity: .18; }
}
@media (max-width: 600px) {
  .continuation-heading .section-number { margin-bottom: 10px; }
  .works-blueprint, .prices-blueprint, .estimate-blueprint { display: none; }
  .works-list { grid-template-columns: minmax(0,1fr); margin-top: 27px; gap: 32px; }
  .work-wide, .work-narrow { grid-column: auto; }
  .work-photo, .work-example:nth-child(-n+2) .work-photo, .work-example:nth-child(n+3) .work-photo { height: auto; aspect-ratio: 1 / 1; }
  .work-example:nth-child(2) .work-photo { aspect-ratio: 3 / 4; }
  .work-example:nth-child(2) img { object-fit: cover; }
  .work-example h3 { font-size: 26px; }
  .work-example p { font-size: 16px; }
  .prices-heading { margin-bottom: 26px; }
  .price-table, .price-table tbody { display: block; }
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .price-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; padding-block: 22px; }
  .price-table tbody th, .price-table tbody td, .price-table tbody .price-value { display: block; width: auto; padding: 0; text-align: left; }
  .price-table tbody th { font-size: 24px; }
  .price-table tbody td { font-size: 16px; }
  .price-table tbody .price-value { margin-top: 3px; font-size: 26px; white-space: normal; }
  .prices-note { margin-top: 25px; padding-left: 16px; font-size: 15px; }
  .estimate-inner { gap: 30px; }
  .estimate-description { margin-block: 22px; font-size: 17px; }
  .estimate-form label { font-size: 17px; }
  .estimate-form textarea { min-height: 180px; padding-inline: 14px; }
  .estimate-form input { padding-inline: 14px; }
  .estimate-submit { padding: 16px; font-size: 16px; }
  .prototype-note { font-size: 13px; }
}

/* Завершение страницы: путь клиента, нативное раскрытие ответов и публичные контакты. */
.workflow, .faq { overflow: clip; border-top: 1px solid var(--line); }
.workflow-inner { position: relative; }
.workflow-list { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 28px; margin: 40px 0 0; padding: 0; list-style: none; }
.workflow-number { display: flex; align-items: center; gap: 15px; margin-bottom: 19px; color: var(--blue); font-size: 38px; font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.workflow-number::after { flex: 1; height: 1px; background: #94b9eb; content: ""; }
.workflow-list h3 { color: var(--navy); font-size: 23px; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.workflow-list p { margin-top: 17px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.workflow-drawing { width: 68%; height: 190px; margin: 20px 0 -30px auto; object-fit: contain; opacity: .65; pointer-events: none; }
.faq-list { margin-top: 28px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; color: var(--navy); font-size: clamp(21px,2vw,28px); font-weight: 650; letter-spacing: -.03em; line-height: 1.3; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { content: ""; }
.faq-list summary:hover { color: var(--blue); }
.faq-toggle { position: relative; flex: 0 0 22px; width: 22px; height: 22px; color: var(--blue); }
.faq-toggle::before, .faq-toggle::after { position: absolute; top: 10px; left: 0; width: 22px; height: 2px; background: currentColor; content: ""; }
.faq-toggle::after { transform: rotate(90deg); }
.faq-list details[open] .faq-toggle::after { display: none; }
.faq-answer { max-width: 1100px; padding: 0 48px 28px 0; color: #5b687a; font-size: 18px; line-height: 1.6; }
.closing { overflow: clip; color: var(--white); background: #062243; }
.closing-inner { position: relative; min-height: 470px; padding-block: 46px; }
.closing-copy { position: relative; z-index: 1; width: 54%; max-width: 720px; }
.closing h2 { color: var(--white); }
.closing h2 span { display: block; }
.closing .section-number { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; color: #82b5fc; font-size: 18px; }
.closing-description { max-width: 630px; margin-top: 20px; color: #e0e9f7; font-size: 20px; line-height: 1.5; }
.closing-actions { display: flex; gap: 16px; margin-top: 22px; }
.closing-actions .button { min-width: 208px; min-height: 56px; font-size: 17px; }
.closing-actions .button:first-child { min-width: 242px; }
.closing-actions .button-outline { color: var(--blue); background: var(--white); }
.closing-actions .button-outline:hover { color: var(--blue); background: #eff5ff; }
.closing-contacts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.closing-contacts a { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; font-size: 18px; text-decoration: none; }
.closing-contacts a:hover { text-decoration: underline; text-underline-offset: 5px; }
.handover-note { display: flex; align-items: start; gap: 12px; margin-top: 8px; color: #92beef; font-size: 15px; line-height: 1.5; }
/* Окно исходного PNG: x=1055, y=16, ширина=928, высота=535. Рисунок не перерисовывается. */
.closing-drawing { position: absolute; top: 50%; right: -20px; width: 49%; aspect-ratio: 928 / 535; overflow: hidden; opacity: 1; transform: translateY(-50%); pointer-events: none; mix-blend-mode: lighten; }
.closing-drawing img { position: absolute; top: -2.990654%; left: -113.685345%; width: 213.685345%; max-width: none; height: auto; }
.footer-inner { padding-block: 40px 24px; }
.footer-main { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 6%; }
.footer-identity .identity-name { font-size: 25px; }
.footer-identity .identity-role { font-size: 14px; }
.footer-identity p { max-width: 390px; margin-top: 17px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.footer-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 0 22px; }
.footer-nav a, .footer-contacts a { display: flex; min-height: 44px; align-items: center; font-size: 15px; text-decoration: none; }
.footer-nav a:hover, .footer-contacts a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.footer-contacts h3 { margin-bottom: 5px; color: var(--navy); font-size: 19px; letter-spacing: -.025em; }
.footer-contacts a { overflow-wrap: anywhere; }
.footer-bottom { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-top: 30px; padding-top: 19px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; }
.privacy-policy-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  .workflow-list { gap: 22px; }
  .workflow-list h3 { font-size: 20px; }
  .workflow-list p { font-size: 15px; }
  .workflow-number { font-size: 34px; gap: 12px; }
  .closing-copy { width: 61%; }
  .closing-description { font-size: 18px; }
  .closing-drawing { right: -30px; width: 42%; opacity: 1; }
  .closing-actions .button, .closing-actions .button:first-child { min-width: 0; padding-inline: 20px; }
  .footer-main { gap: 4%; }
  .footer-nav { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .workflow-list { grid-template-columns: 1fr; max-width: 600px; gap: 0; margin-top: 30px; }
  .workflow-list li { position: relative; display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 24px; padding-block: 0 28px; }
  .workflow-list li:last-child { padding-bottom: 0; }
  .workflow-number { align-self: start; margin: 0; padding-top: 2px; }
  .workflow-number::after { position: absolute; top: 44px; bottom: 9px; left: 19px; width: 1px; height: auto; }
  .workflow-list li:last-child .workflow-number::after { display: none; }
  .workflow-list h3 { font-size: 24px; }
  .workflow-list p { margin-top: 9px; font-size: 16px; }
  .workflow-drawing { width: 80%; height: 140px; margin-block: 24px -20px; opacity: .5; }
  .closing-copy { width: 100%; max-width: 620px; }
  .closing-drawing { position: relative; top: auto; right: auto; width: min(100%,620px); margin: 32px auto 0; transform: none; }
  .closing-inner { display: flex; flex-direction: column-reverse; }
  .footer-main { grid-template-columns: 1.2fr 1fr; gap: 26px 9%; }
  .footer-identity { grid-column: 1 / -1; }
  .footer-identity p { max-width: 530px; }
  .footer-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .workflow-list li { grid-template-columns: 45px minmax(0,1fr); gap: 19px; padding-bottom: 26px; }
  .workflow-number { font-size: 32px; }
  .workflow-number::after { left: 17px; top: 41px; }
  .workflow-list h3 { font-size: 23px; }
  .workflow-drawing { display: none; }
  .closing-drawing { width: 100%; margin-top: 26px; }
  .faq-list { margin-top: 19px; }
  .faq-list summary { min-height: 80px; gap: 20px; padding-block: 21px; font-size: 21px; }
  .faq-toggle { flex-basis: 18px; width: 18px; height: 18px; }
  .faq-toggle::before, .faq-toggle::after { top: 8px; width: 18px; }
  .faq-answer { padding: 0 0 24px; font-size: 16px; line-height: 1.6; }
  .closing-description { margin-top: 22px; font-size: 18px; }
  .closing-actions { flex-direction: column; gap: 12px; margin-top: 24px; }
  .closing-actions .button { width: 100%; min-height: 56px; }
  .closing-contacts { flex-direction: column; gap: 0; margin-top: 23px; }
  .closing-contacts a { font-size: 18px; }
  .handover-note { max-width: 310px; margin-top: 12px; font-size: 15px; }
  .footer-inner { padding-block: 32px 25px; }
  .footer-main { grid-template-columns: 1fr; gap: 24px; }
  .footer-identity { grid-column: auto; }
  .footer-identity .identity-name { font-size: 25px; }
  .footer-identity p { margin-top: 14px; font-size: 15px; }
  .footer-nav { gap: 0 24px; }
  .footer-nav a, .footer-contacts a { min-height: 44px; font-size: 16px; }
  .footer-bottom { flex-direction: column; gap: 14px; margin-top: 24px; padding-top: 20px; font-size: 12px; }
}

/* Исходные Canvas-чертежи: окна PNG без перерисовки геометрии. */
.canvas-art { overflow: hidden; background-image: none; opacity: 1; pointer-events: none; mix-blend-mode: multiply; container-type: inline-size; }
.canvas-art img { position: absolute; max-width: none; height: auto; }
.canvas-symbol { position: absolute; display: flex; align-items: center; justify-content: center; color: #8eadd5; background: #fff; font: italic 2.5cqw/1 Arial,sans-serif; }
.canvas-symbol-vertical { writing-mode: vertical-rl; transform: rotate(180deg); }
.works-blueprint.canvas-art { aspect-ratio: 537 / 260; height: auto; }
.works-blueprint.canvas-art img { left: -176.908752%; top: 0.000000%; width: 276.908752%; }
.prices-blueprint.canvas-art { aspect-ratio: 1070 / 190; height: auto; }
.prices-blueprint.canvas-art img { left: -51.401869%; top: 0.000000%; width: 156.261682%; }
.estimate-blueprint.canvas-art { aspect-ratio: 905 / 235; height: auto; }
.estimate-blueprint.canvas-art img { left: 0.000000%; top: -237.446809%; width: 219.116022%; }
.workflow-drawing.canvas-art { aspect-ratio: 1145 / 280; height: auto; }
.workflow-drawing.canvas-art img { left: -71.615721%; top: -178.571429%; width: 173.187773%; }

.works-blueprint.canvas-art { top: 0; right: -64px; width: 43%; clip-path: polygon(0 0,100% 0,100% 100%,85% 100%,85% 71.5%,0 71.5%); }
.prices-blueprint.canvas-art { top: -24px; right: -40px; width: 66%; clip-path: polygon(0 0,100% 0,100% 100%,38% 100%,38% 77%,0 77%); }
.prices-blueprint .canvas-symbol { font-size: 1.75cqw; }
.estimate-blueprint.canvas-art { top: auto; bottom: 0; left: -64px; right: auto; width: 52%; clip-path: polygon(0 0,13.2% 0,13.2% 14.5%,45% 14.5%,45% 0,100% 0,100% 100%,0 100%); mix-blend-mode: darken; }
.estimate-blueprint.canvas-art img { filter: brightness(.8) contrast(2); }
.estimate-blueprint .canvas-symbol { background: #f0f6fc; font-size: 2cqw; }
.estimate-description { line-height: 1.5; }
.estimate-intro { padding-bottom: 130px; }
.workflow-drawing.canvas-art { position: relative; width: 61%; margin: 20px 0 -30px auto; }
:is(.real-works,.prices,.estimate,.workflow,.faq) .continuation-heading { display: flex; flex-wrap: wrap; align-items: center; column-gap: 17px; row-gap: 20px; }
:is(.real-works,.prices,.estimate,.workflow,.faq) .continuation-heading::before { margin: 0; }
:is(.real-works,.prices,.estimate,.workflow,.faq) .continuation-heading .section-number { margin: 0; font-size: 18px; }
:is(.real-works,.prices,.estimate,.workflow,.faq) .continuation-heading h2 { flex-basis: 100%; }
@media (max-width: 1100px) {
 .works-blueprint.canvas-art { right: -36px; }
 .prices-blueprint.canvas-art { right: -30px; width: 60%; }
 .estimate-blueprint.canvas-art { left: -35px; }
}
@media (max-width: 820px) {
 .works-blueprint.canvas-art { right: -25px; width: 40%; opacity: .7; }
 .prices-blueprint.canvas-art { width: 50%; opacity: .7; }
 .estimate-intro { padding-bottom: 0; }
 .estimate-blueprint.canvas-art { display: block; position: relative; grid-column: 1; grid-row: 2; width: min(85%,640px); left: -35px; bottom: auto; margin: 0; }
 .estimate-form { grid-row: 3; }
 .workflow-drawing.canvas-art { width: 100%; margin: 30px 0 0; opacity: 1; }
}
@media (max-width: 600px) {
 .works-blueprint.canvas-art, .prices-blueprint.canvas-art { display: none; }
 .estimate-blueprint.canvas-art { width: calc(100% + 20px); left: -20px; }
 .workflow-drawing.canvas-art { display: block; }
}

/* Numbered section markers: number precedes the shared blue line. */
.section-heading { align-items: center; row-gap: 12px; }
.section-heading::before { order: 1; margin-right: auto; }
.section-heading .section-number { order: 0; flex: 0 0 auto; margin: 0; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.section-heading h2 { order: 2; flex: 0 0 100%; }
.parts-heading .section-heading { flex: 1; }

/* Operations accordion */
.operations-intro { max-width: 760px; margin: 20px 0 28px; color: var(--muted); line-height: 1.65; }
.operations-list { border-top: 1px solid var(--line); }
.operation-group { border-bottom: 1px solid var(--line); }
.operation-group summary { display: grid; grid-template-columns: minmax(0,1fr) auto 18px; gap: 18px; align-items: center; min-height: 72px; color: var(--navy); font-size: 18px; font-weight: 650; list-style: none; cursor: pointer; }
.operation-group summary::-webkit-details-marker { display: none; }
.operation-group summary::marker { content: ""; }
.operation-group summary:hover { color: var(--blue); }
.operation-count { color: var(--muted); font-size: 13px; font-weight: 500; }
.operation-toggle { width: 14px; height: 14px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.operation-group[open] .operation-toggle { transform: rotate(225deg) translate(-2px,-1px); }
.operation-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; margin: 0; padding: 0 0 20px; list-style: none; }
.operation-list li { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding-block: 8px; border-top: 1px solid #e9eef5; color: #334760; font-size: 14px; line-height: 1.45; }
.operation-status { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #c5d4e6; border-radius: 999px; color: #647993; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Location and contact additions */
.location { border-top: 1px solid var(--line); }
.location-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(32px,6vw,88px); align-items: center; margin-top: 28px; }
.location-lead { max-width: 500px; color: var(--navy); font-size: clamp(21px,2.4vw,30px); font-weight: 650; letter-spacing: -.03em; line-height: 1.28; }
.location-address { margin-top: 22px; color: var(--navy); font-size: 19px; font-weight: 650; line-height: 1.55; }
.location-note { max-width: 500px; margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.service-area { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.service-area li { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: #40556e; font-size: 12px; }
.location-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.location-actions .button { min-height: 48px; }
.text-link { color: var(--blue); font-size: 14px; font-weight: 650; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.map-preview { position: relative; min-width: 0; min-height: 0; aspect-ratio: 1.65 / 1; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #f1f6fc; }
.map-preview iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.location-approach { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 14px; margin-top: 24px; }
.location-approach figure { display: flex; min-width: 0; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #f5f8fc; }
.location-photo-trigger { display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; background: #eaf1f9; cursor: zoom-in; }
.location-photo-trigger:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--blue); outline-offset: -3px; }
.location-photo-trigger img { display: block; width: 100%; height: 100%; object-fit: cover; }
.location-approach figcaption { display: flex; min-height: 48px; align-items: center; padding: 8px 12px; color: #526983; font-size: 13px; line-height: 1.4; }

.closing-inner.contact-hub { min-height: 0; padding-block: 48px; }
.closing-copy { width: min(100%, 900px); max-width: 900px; }
.closing .section-heading::before { display: block; }
.closing .section-heading .section-number { display: block; margin: 0; color: #82b5fc; font-size: 12px; }
.contact-methods { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 24px; }
.contact-row { display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 15px; border: 1px solid rgba(155,192,232,.28); border-radius: 8px; color: #fff; text-decoration: none; }
.contact-row span { color: #9bb5d2; font-size: 12px; }
.contact-row strong { overflow-wrap: anywhere; color: #fff; font-size: 14px; font-weight: 600; }
.contact-row:hover { border-color: #69a8ff; }
.messenger-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.messenger-card { display: flex; min-width: 0; align-items: center; gap: 16px; padding: 14px; border: 1px solid rgba(155,192,232,.28); border-radius: 8px; background: rgba(255,255,255,.035); }
.messenger-card img { width: 92px; height: 92px; flex: 0 0 92px; padding: 5px; border-radius: 5px; background: #fff; }
.messenger-card h3 { color: #fff; font-size: 16px; }
.messenger-card p { margin: 5px 0; color: #b8c9dc; font-size: 13px; }
.messenger-card a { color: #84b5ff; font-size: 13px; font-weight: 650; text-decoration: none; }
.messenger-card a.button { color: #fff; }
.closing-drawing { top: 14%; right: -5%; width: 40%; opacity: .3; }
.site-footer .copyright { margin-top: 8px; }
.release-controlled-note { color: var(--muted); font-size: 13px; }

@media (max-width: 900px) {
  .operation-group summary { min-height: 66px; }
  .location-layout { grid-template-columns: 1fr 1fr; gap: 28px; }
  .location-approach { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .location-approach figcaption { padding: 8px; font-size: 12px; }
  .closing-drawing { width: 34%; right: -8%; opacity: .2; }
}
@media (max-width: 680px) {
  .section-heading { column-gap: 12px; row-gap: 10px; }
  .section-heading::before { flex-basis: 40px; }
  .parts-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .parts-heading .section-heading { width: 100%; }
  .operation-group summary { grid-template-columns: minmax(0,1fr) 18px; gap: 10px; min-height: 64px; font-size: 16px; }
  .operation-count { grid-column: 1; grid-row: 2; margin-top: -18px; font-size: 11px; }
  .operation-toggle { grid-column: 2; grid-row: 1 / span 2; }
  .operation-list { grid-template-columns: 1fr; padding-bottom: 14px; }
  .operation-list li { align-items: flex-start; font-size: 13px; }
  .operation-status { font-size: 10px; }
  .location-layout { grid-template-columns: 1fr; gap: 24px; }
  .location-approach { grid-template-columns: 1fr; }
  .location-actions { align-items: flex-start; flex-direction: column; }
  .map-preview { order: -1; }
  .map-preview { min-height: 220px; aspect-ratio: 1.4 / 1; }
  .contact-methods { grid-template-columns: 1fr; }
  .contact-row { min-height: 68px; }
  .messenger-cards { grid-template-columns: 1fr; }
  .messenger-card img { width: 82px; height: 82px; flex-basis: 82px; }
  .closing-inner.contact-hub { padding-block: 36px; }
  .closing-drawing { top: auto; right: -12%; bottom: 0; width: 45%; opacity: .14; }
}
@media (prefers-reduced-motion: reduce) {
  .operation-toggle { transition: none; }
}
.messenger-card button:disabled { min-height: 38px; margin-top: 8px; border-color: rgba(155,192,232,.35); color: #91a8c2; background: transparent; cursor: not-allowed; }

/* Светлые чертежи закреплены в окне браузера и проявляются по мере прокрутки раздела. */
.audience,
.operations,
.faq {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background-color: #fff;
}
.audience { background-color: #f7faff; }
.audience::before,
.operations::before,
.faq::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right var(--gutter) center;
  background-size: min(44.5vw, 640px) auto;
  opacity: .34;
  content: "";
  pointer-events: none;
}
.audience::before { background-image: url("./img/owner-drawings/hydraulic-cylinder.png"); }
.operations::before { background-image: url("./img/owner-drawings/hydraulic-fitting.png"); }
.faq::before { background-image: url("./img/owner-drawings/threaded-hub.png"); }
.audience > *,
.operations > *,
.faq > .page-width { position: relative; z-index: 1; }

/* Тёмные чертежи движутся вместе со своими разделами и занимают правую треть. */
.process,
.workflow,
.closing {
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right var(--gutter) center;
  background-size: min(30vw, 430px) auto;
}
.process { background-image: url("./img/owner-drawings/flanged-housing.png"); }
.workflow { color: var(--white); background-color: #09243f; background-image: url("./img/owner-drawings/bearing-cross-section.png"); }
.closing { background-image: url("./img/owner-drawings/stepped-shaft.png"); }
.process-list,
.workflow-list { width: 68%; }
.workflow-inner { color: var(--white); }
.workflow-list h3 { color: var(--white); }
.workflow-list p { color: #c0d0e3; }
.workflow-number::after { background: #62adff; }
.closing-copy { width: 68%; max-width: 900px; }

/* One section marker rhythm: number, short blue rule, then title. */
.section-heading,
.section-heading-light {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 14px;
}
.section-heading::before,
.section-heading-light::before {
  position: static;
  order: 1;
  flex: 0 0 46px;
  width: 46px;
  height: 1px;
  margin: 0;
  background: #8db6ee;
}
.section-heading .section-number,
.section-heading-light .section-number {
  display: flex !important;
  order: 0;
  flex: 0 0 auto;
  align-items: center;
  margin: 0 !important;
  color: var(--blue);
  font-size: 16px !important;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1;
}
.section-heading h2,
.section-heading-light h2 {
  order: 2;
  flex: 0 0 100%;
  margin: 0;
}
.section-heading-light .section-number { color: #82b5fc; }
.section-heading-light h2 { color: var(--white); }
.gallery .section-heading::before { position: static; top: auto; left: auto; }
.gallery .section-number { display: flex !important; }
.closing .section-heading::before { display: block; }
.closing .section-heading .section-number { display: flex !important; color: #82b5fc; }

/* Real work photography keeps its complete source frame. */
.real-works .work-photo,
.real-works .work-example:nth-child(-n+2) .work-photo,
.real-works .work-example:nth-child(n+3) .work-photo {
  display: grid;
  height: auto;
  min-height: 280px;
  place-items: center;
  overflow: visible;
  background: #f5f7fa;
}
.real-works .work-photo img {
  width: 100%;
  height: auto;
  max-height: 580px;
  object-fit: contain;
}

/* Gallery cards remain uniform without cropping the photographed parts. */
.gallery-item { aspect-ratio: 1.06 / 1; background: #f1f4f8; }
.gallery-item img { object-fit: contain; }

@media (max-width: 820px) {
  .audience,
  .operations,
  .faq { background-size: auto; }
  .audience::before,
  .operations::before,
  .faq::before { background-size: min(42vw, 340px) auto; }
  .process,
  .workflow,
  .closing { background-size: min(34vw, 280px) auto; background-position: right var(--gutter) bottom 16px; }
  .process-list,
  .workflow-list { width: 72%; }
  .closing-copy { width: 72%; }
  .real-works .work-photo,
  .real-works .work-example:nth-child(-n+2) .work-photo,
  .real-works .work-example:nth-child(n+3) .work-photo { min-height: 220px; }
}
@media (max-width: 600px) {
  .audience,
  .operations,
  .faq { background-size: auto; }
  .audience::before,
  .operations::before,
  .faq::before { background-size: min(43vw, 175px) auto; opacity: .28; }
  .process,
  .workflow,
  .closing { background-size: min(38vw, 155px) auto; background-position: right var(--gutter) bottom 12px; }
  .process-list,
  .workflow-list,
  .closing-copy { width: 100%; }
  .section-heading, .section-heading-light { column-gap: 12px; row-gap: 12px; }
  .section-heading::before, .section-heading-light::before { flex-basis: 34px; width: 34px; }
  .section-heading .section-number, .section-heading-light .section-number { font-size: 14px !important; }
  .real-works .work-photo,
  .real-works .work-example:nth-child(-n+2) .work-photo,
  .real-works .work-example:nth-child(n+3) .work-photo { min-height: 0; aspect-ratio: auto; }
  .real-works .work-photo img,
  .real-works .work-example:nth-child(2) .work-photo img { height: auto; max-height: none; object-fit: contain; }
}

/* Финальная настройка correction pass: заголовки, чертежи и рабочий процесс. */
.section-heading h2,
.section-heading-light h2 {
  font-family: inherit;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 740;
  letter-spacing: -.05em;
  line-height: 1.06;
}
.capability-list li:nth-child(2) .capability-render {
  transform: none;
  transform-origin: right center;
}

/* Чертёж остаётся выразительным в свободном пространстве, а подложка повторяет строки текста. */
.audience::before,
.operations::before,
.faq::before {
  background-size: min(44.5vw, 640px) auto;
  opacity: .96;
}
.drawing-backplate {
  display: inline;
  padding: .02em .32em;
  background: rgba(255, 255, 255, .99);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.audience .drawing-backplate { background: rgba(247, 250, 255, .99); }
.operations-intro,
.operation-group > summary,
.operation-list li,
.faq-list summary,
.faq-answer {
  background: transparent;
}
.operations-intro { padding: 0; }
.operation-label,
.faq-question { min-width: 0; flex: 1; }

/* Слои чертежей не участвуют в сетке и остаются внутри своих секций. */
.process,
.workflow,
.closing {
  position: relative;
  isolation: isolate;
  background-image: none;
}
.process::before,
.workflow::before,
.closing::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-repeat: no-repeat;
  background-position: right var(--gutter) center;
  background-size: min(60vw, 860px) auto;
  content: "";
  filter: grayscale(1) brightness(1.55) contrast(1.16);
  opacity: .54;
  pointer-events: none;
}
.process::before {
  background-image: url("./img/owner-drawings/flanged-housing.png");
  background-size: min(36.96vw, 530px) auto;
}
.workflow::before {
  background-image: url("./img/owner-drawings/bearing-cross-section.png");
  inset: 84px var(--gutter) auto auto;
  width: min(61.6vw, 868px);
  height: 392px;
  background-position: right center;
  background-size: contain;
  -webkit-mask-image: none;
  mask-image: none;
}
.closing::before {
  background-image: url("./img/owner-drawings/stepped-shaft.png");
  background-size: min(60vw, 860px) auto;
  background-position: right center;
  opacity: .58;
}
.process-inner,
.workflow-inner,
.closing-inner { position: relative; z-index: 1; }
.workflow-list {
  width: 100%;
  gap: clamp(16px, 1.7vw, 25px);
}
.workflow-list li,
.workflow-list li > div { min-width: 0; }
.workflow-list li > div {
  padding: 0 6px 8px;
  background: rgba(9, 36, 63, .98);
}
.workflow-number {
  padding: 4px 6px 8px 0;
  background: rgba(9, 36, 63, .98);
}
.workflow-list h3 { overflow-wrap: anywhere; }
.workflow-personal {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  width: min(100%, 720px);
  margin-top: 28px;
  padding: 17px 20px;
  border-left: 2px solid #62adff;
  background: rgba(4, 24, 44, .92);
}
.workflow-personal-number {
  color: #82b5fc;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.15;
}
.workflow-personal h3 { color: #fff; font-size: 20px; line-height: 1.25; }
.workflow-personal p { margin-top: 6px; color: #d1deec; font-size: 15px; line-height: 1.5; }
.workflow-remote {
  width: fit-content;
  margin-top: 20px;
  padding: 4px 8px;
  color: #b9d7fc;
  background: rgba(9, 36, 63, .9);
  font-size: 14px;
  font-weight: 600;
}
.workflow-list { margin-top: 15px; }
.closing-copy {
  width: min(100%, 900px);
  padding: 8px 14px 12px 0;
  background: #062243;
}
.closing-description,
.contact-methods,
.messenger-cards { position: relative; }

@media (max-width: 1100px) {
  .workflow-list { gap: 15px; }
  .workflow-list h3 { font-size: 19px; }
  .workflow-list p { font-size: 14px; }
  .workflow::before {
    inset-block-start: 142px;
    width: min(21vw, 208px);
    height: 150px;
    background-position: right center;
    background-size: contain;
  }
}
@media (max-width: 1020px) {
  .workflow-personal {
    width: calc(100% - min(21vw, 208px) - 12px);
  }
}
@media (max-width: 820px) {
  .section-heading h2,
  .section-heading-light h2 {
    font-size: clamp(31px, 8.4vw, 40px);
    line-height: 1.08;
  }
  .audience::before,
  .operations::before,
  .faq::before { background-size: min(42vw, 340px) auto; }
  .process::before,
  .workflow::before,
  .closing::before {
    background-size: min(58vw, 520px) auto;
    background-position: right var(--gutter) bottom 16px;
  }
  .process::before { background-size: min(35.728vw, 320px) auto; }
  .workflow::before {
    inset-block-start: 124px;
    width: clamp(118px, 20vw, 160px);
    height: 120px;
    background-position: right center;
    background-size: contain;
  }
  .closing::before { background-size: min(68vw, 540px) auto; }
  .process-list { width: 68%; }
  .workflow-list {
    width: 100%;
    max-width: 720px;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 16px;
  }
  .workflow-personal {
    width: calc(100% - clamp(118px, 20vw, 160px) - 12px);
    margin-top: 24px;
  }
  .workflow-list li { background: transparent; }
  .workflow-list li > div { padding: 0 8px 8px; }
  .closing-copy { width: 100%; max-width: 900px; }
}
@media (max-width: 600px) {
  .section-heading h2,
  .section-heading-light h2 {
    font-size: clamp(31px, 8.4vw, 40px);
    line-height: 1.08;
  }
  .audience::before,
  .operations::before,
  .faq::before {
    background-size: min(48vw, 190px) auto;
    opacity: .9;
  }
  .process::before,
  .workflow::before,
  .closing::before {
    background-size: min(76vw, 300px) auto;
    background-position: right var(--gutter) bottom 12px;
    opacity: .42;
  }
  .process::before { background-size: min(46.816vw, 185px) auto; }
  .workflow::before {
    inset-block-start: 124px;
    width: min(24vw, 100px);
    height: 112px;
    background-position: right center;
    background-size: contain;
  }
  .closing::before { background-size: min(76vw, 310px) auto; }
  .capability-list li:nth-child(2) .capability-render {
    transform: translateX(8px);
    transform-origin: right center;
  }
  .capabilities { overflow: visible; }
  .workflow-personal {
    width: calc(100% - min(24vw, 100px) - 12px);
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 14px;
  }
  .workflow-personal-number { font-size: 22px; }
  .workflow-personal h3 { font-size: 19px; }
  .workflow-personal p { font-size: 14px; }
  .workflow-remote { font-size: 13px; }
  .closing-copy { padding-right: 0; }
}

.website-chat-widget { position: fixed; z-index: 25; right: 24px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.website-chat-toggle { display: inline-flex; min-height: 54px; align-items: center; gap: 10px; padding: 0 18px; border: 0; border-radius: 28px; color: #fff; background: var(--blue); box-shadow: 0 10px 30px rgba(7, 40, 90, .22); font-size: 14px; font-weight: 650; cursor: pointer; }
.website-chat-toggle:hover { background: var(--blue-strong); }
.chat-toggle-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.website-chat-panel { position: fixed; right: 24px; bottom: 88px; display: grid; grid-template-rows: auto minmax(80px, 1fr) auto auto auto auto auto; gap: 9px; width: min(410px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 112px)); padding: 14px; overflow: hidden; border: 1px solid #dbe3ed; border-radius: 12px; background: #fff; box-shadow: 0 22px 70px rgba(9, 30, 60, .24); }
.website-chat-panel[hidden] { display: none !important; }
.website-chat-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; color: var(--navy); }
.website-chat-header strong { font-size: 15px; }
.website-chat-header p { margin-top: 3px; color: var(--muted); font-size: 11px; }
.website-chat-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.website-chat-new-request { padding: 6px 8px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.website-chat-new-request:hover { color: var(--navy); background: #f3f6fa; }
.website-chat-new-request:disabled { color: #a0a9b6; cursor: not-allowed; }
.website-chat-close { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--navy); background: #fff; font-size: 23px; cursor: pointer; }
.website-chat-log { display: flex; min-height: 0; flex-direction: column; gap: 9px; overflow-y: auto; padding: 2px 3px 7px 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.chat-message { max-width: 90%; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.48; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-message-assistant { align-self: flex-start; border: 1px solid #e5ebf2; border-bottom-left-radius: 4px; color: var(--ink); background: #f5f8fc; }
.chat-message-user { align-self: flex-end; border-bottom-right-radius: 4px; color: #fff; background: var(--blue); }
.website-chat-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.website-chat-examples[hidden], .website-chat-new-request[hidden] { display: none !important; }
.website-chat-examples button { min-height: 40px; padding: 8px 9px; border: 1px solid #e0e7ef; border-radius: 6px; color: #36465a; background: #fafbfd; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.website-chat-examples button:hover { border-color: #bacbe0; color: var(--blue-strong); background: #f5f8fc; }
.website-chat-examples button:disabled { color: #738198; background: #f5f6f8; cursor: not-allowed; }
.website-chat-consent { display: grid; gap: 3px; color: #536176; font-size: 11px; line-height: 1.35; }
.website-chat-consent-label { display: flex; width: fit-content; align-items: flex-start; gap: 7px; cursor: pointer; }
.website-chat-consent input { flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--blue); }
.website-chat-legal-links { display: flex; align-items: center; gap: 6px; padding-left: 21px; color: #8290a2; font-size: 10px; }
.website-chat-legal-links a { color: #64758b; text-decoration: underline; text-underline-offset: 2px; }
.website-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: end; gap: 7px; }
.website-chat-form textarea { width: 100%; min-height: 44px; max-height: 100px; resize: vertical; padding: 10px 11px; border: 1px solid #d8e0e9; border-radius: 7px; color: var(--ink); background: #fff; font: inherit; font-size: 13px; line-height: 1.4; }
.website-chat-form textarea:focus { outline: 2px solid rgba(7, 88, 232, .2); border-color: #9ab7df; }
.website-chat-form textarea:disabled { background: #f7f8fa; }
.website-chat-send { display: grid; width: 44px; min-height: 44px; place-items: center; padding: 0; font-size: 20px; line-height: 1; }
.website-chat-send:disabled { border-color: #c6ced8; color: #fff; background: #c6ced8; cursor: not-allowed; }
.website-chat-status { color: var(--muted); font-size: 11px; line-height: 1.4; }
.website-chat-status[hidden], .website-chat-handoff[hidden] { display: none !important; }
.website-chat-handoff { display: grid; gap: 7px; padding-top: 8px; border-top: 1px solid var(--line); }
.website-chat-handoff label { color: var(--navy); font-size: 11px; font-weight: 600; }
.website-chat-handoff select { min-height: 38px; padding: 7px 10px; border: 1px solid #cbd6e4; border-radius: 6px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; }
.website-chat-handoff-submit, .website-chat-handoff-link { min-height: 40px; padding: 10px; font-size: 12px; }
.website-chat-handoff-submit:disabled { color: #fff; background: #aab5c3; cursor: not-allowed; }
.website-chat-handoff-status { color: var(--muted); font-size: 11px; line-height: 1.4; }

@media (max-width: 600px) {
  .website-chat-widget { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .website-chat-panel { inset: auto 0 0; width: 100%; height: min(88dvh, 720px); max-height: 88dvh; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .website-chat-toggle { min-height: 50px; padding-inline: 16px; }
  .website-chat-header { gap: 8px; }
  .website-chat-header strong { font-size: 14px; }
  .website-chat-new-request { padding-inline: 5px; font-size: 10px; }
  .website-chat-examples button { min-height: 40px; padding: 8px 7px; font-size: 14px; }
}