/* OTDELKA78 V1.8.0 — PROJECT-LED design page composition */

.service-design-v180 .design-hero {
  position: relative;
  overflow: clip;
  min-height: 820px;
  padding: 132px 0 86px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 72px 72px,
    radial-gradient(circle at 80% 18%, rgba(182,144,87,.13), transparent 24%),
    #0d0f0d;
}

.service-design-v180 .design-hero::after {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  right: -290px;
  bottom: -340px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 50%;
  pointer-events: none;
}

.service-design-v180 .design-hero-shell { position: relative; z-index: 1; }
.service-design-v180 .design-hero .breadcrumbs { margin-bottom: 48px; }

.service-design-v180 .design-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(440px, .78fr);
  gap: clamp(56px, 7vw, 108px);
  align-items: end;
}

.service-design-v180 .design-hero-copy h1 {
  margin: 0;
  max-width: 860px;
  font-size: clamp(52px, 6.25vw, 92px);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 600;
  text-wrap: balance;
}

.service-design-v180 .design-hero-copy h1 > span { display: block; }
.service-design-v180 .design-hero-copy h1 small {
  display: block;
  margin-top: .18em;
  color: #d8d1c6;
  font-size: .46em;
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 500;
}

.service-design-v180 .design-hero-lead {
  max-width: 730px;
  margin: 30px 0 0;
  color: #cbc4b9;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.66;
}

.service-design-v180 .design-hero-disclaimer {
  max-width: 600px;
  margin: 18px 0 0;
  color: #857f75;
  font-size: 12px;
  line-height: 1.6;
}

.service-design-v180 .design-hero-board {
  position: relative;
  min-height: 552px;
  padding: 44px 0 0 58px;
}

.service-design-v180 .design-hero-photo {
  position: relative;
  height: 482px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-3);
  box-shadow: var(--shadow);
}

.service-design-v180 .design-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.8) contrast(1.03) brightness(.88);
}

.service-design-v180 .design-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,12,10,.73), transparent 44%);
}

.service-design-v180 .design-hero-photo figcaption {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: grid;
  gap: 5px;
}

.service-design-v180 .design-hero-photo figcaption span {
  color: #d7c8af;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.service-design-v180 .design-hero-photo figcaption strong {
  font-size: 16px;
  line-height: 1.35;
}

.service-design-v180 .design-doc-sheet {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: min(330px, 74%);
  padding: 20px 20px 18px;
  border: 1px solid rgba(17,19,17,.22);
  background: #f4f0e7;
  color: #171915;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  transform: rotate(-2deg);
}

.service-design-v180 .design-doc-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(17,19,17,.22);
  color: #79694f;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
}
.service-design-v180 .design-doc-head b { color: #171915; }

.service-design-v180 .design-doc-line {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 43px;
  border-bottom: 1px solid rgba(17,19,17,.12);
  color: #4f4b43;
  font-size: 10px;
  font-weight: 600;
}

.service-design-v180 .design-doc-line i {
  display: block;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(17,19,17,.45) 0 22px, transparent 22px 30px);
}

.service-design-v180 .design-doc-foot {
  padding-top: 15px;
  color: #9a7644;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.service-design-v180 .design-index {
  position: relative;
  z-index: 4;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #111311;
}

.service-design-v180 .design-index-row {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.service-design-v180 .design-index-row::-webkit-scrollbar { display: none; }

.service-design-v180 .design-index-row a {
  flex: 0 0 auto;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-right: 1px solid var(--line);
  color: #cbc4b8;
  font-size: 12px;
  font-weight: 600;
}
.service-design-v180 .design-index-row a:first-child { border-left: 1px solid var(--line); }
.service-design-v180 .design-index-row a::before { color: var(--bronze-hi); font-size: 10px; letter-spacing: .12em; }
.service-design-v180 .design-index-row a:nth-child(1)::before { content: "01"; }
.service-design-v180 .design-index-row a:nth-child(2)::before { content: "02"; }
.service-design-v180 .design-index-row a:nth-child(3)::before { content: "03"; }
.service-design-v180 .design-index-row a:nth-child(4)::before { content: "04"; }
.service-design-v180 .design-index-row a:nth-child(5)::before { content: "05"; }
.service-design-v180 .design-index-row a:hover,
.service-design-v180 .design-index-row a:focus-visible { color: var(--paper); background: rgba(255,255,255,.025); }

.service-design-v180 .design-documents {
  padding-block: var(--section);
  background: var(--paper);
  color: var(--ink);
}

.service-design-v180 .design-documents .eyebrow,
.service-design-v180 .design-cost .eyebrow,
.service-design-v180 .design-estimate .eyebrow { color: #8e6939; }

.service-design-v180 .design-documents .section-lead,
.service-design-v180 .design-cost .section-lead { color: var(--muted-dark); }

.service-design-v180 .design-documents-grid {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  gap: clamp(58px, 8vw, 130px);
  align-items: start;
}

.service-design-v180 .design-documents-intro {
  position: sticky;
  top: 108px;
}

.service-design-v180 .design-intro-note {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  color: #4f4a43;
  font-size: 14px;
  line-height: 1.7;
}

.service-design-v180 .design-document-board {
  position: relative;
  border-top: 1px solid #bdb7aa;
}

.service-design-v180 .design-document-board::before {
  content: "PROJECT DOCUMENT INDEX";
  position: absolute;
  top: -26px;
  right: 0;
  color: #9b9284;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.service-design-v180 .design-document-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 58px;
  gap: 22px;
  align-items: start;
  padding: 27px 0 29px;
  border-bottom: 1px solid #cfc8bb;
}

.service-design-v180 .design-document-no {
  padding-top: 4px;
  color: #956f40;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.service-design-v180 .design-document-row small {
  display: block;
  margin-bottom: 8px;
  color: #958b7b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}

.service-design-v180 .design-document-row h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.service-design-v180 .design-document-row p {
  max-width: 700px;
  margin: 10px 0 0;
  color: var(--muted-dark);
  font-size: 14px;
  line-height: 1.7;
}

.service-design-v180 .design-document-row > b {
  justify-self: end;
  padding-top: 4px;
  color: #b0a99d;
  font-size: 10px;
  letter-spacing: .1em;
}

.service-design-v180 .design-translation {
  padding-block: var(--section);
  background:
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 58px 58px,
    #101210;
}

.service-design-v180 .design-translation-head,
.service-design-v180 .design-materials-head {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: 72px;
  align-items: end;
}

.service-design-v180 .design-translation-head .section-lead,
.service-design-v180 .design-materials-head .section-lead {
  justify-self: end;
  margin-top: 0;
}

.service-design-v180 .design-flow {
  display: grid;
  grid-template-columns: 1fr 52px 1fr 52px 1fr;
  margin-top: 64px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.service-design-v180 .design-flow-step {
  min-height: 320px;
  padding: 30px 28px 34px;
  border-left: 1px solid var(--line);
}
.service-design-v180 .design-flow-step:last-of-type { border-right: 1px solid var(--line); }
.service-design-v180 .design-flow-step > span { color: var(--bronze-hi); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.service-design-v180 .design-flow-step small { display: block; margin-top: 88px; color: #6f6a62; font-size: 9px; letter-spacing: .16em; }
.service-design-v180 .design-flow-step h3 { margin: 10px 0 12px; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.1; }
.service-design-v180 .design-flow-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.66; }

.service-design-v180 .design-flow-arrow {
  display: grid;
  place-items: center;
  color: #8e6939;
  font-size: 22px;
}

.service-design-v180 .design-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 18px;
  margin-top: 18px;
}

.service-design-v180 .design-detail-photo {
  position: relative;
  min-height: 480px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-3);
}
.service-design-v180 .design-detail-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.03); }
.service-design-v180 .design-detail-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,12,10,.75), transparent 48%); }
.service-design-v180 .design-detail-photo figcaption { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 25px; display: grid; gap: 6px; }
.service-design-v180 .design-detail-photo figcaption span { color: #d0c2aa; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.service-design-v180 .design-detail-photo figcaption strong { font-size: 20px; line-height: 1.3; }

.service-design-v180 .design-detail-note {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.025);
}
.service-design-v180 .design-detail-note > span { color: var(--bronze-hi); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.service-design-v180 .design-detail-note h3 { margin: auto 0 18px; font-size: clamp(30px, 3vw, 44px); line-height: 1.03; letter-spacing: -.035em; }
.service-design-v180 .design-detail-note p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.68; }
.service-design-v180 .design-detail-note a { margin-top: 24px; align-self: flex-start; padding-bottom: 5px; border-bottom: 1px solid var(--bronze); color: #e6ded1; font-size: 13px; font-weight: 700; }

.service-design-v180 .design-materials {
  padding-block: var(--section);
  background: #181a17;
}

.service-design-v180 .design-contact-sheet {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  grid-template-rows: minmax(250px, 1fr) minmax(250px, 1fr);
  gap: 14px;
  margin-top: 58px;
}

.service-design-v180 .design-contact-sheet figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-3);
}

.service-design-v180 .design-contact-sheet figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.02); }
.service-design-v180 .design-contact-sheet figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,11,9,.74), transparent 42%); }
.service-design-v180 .design-contact-sheet figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.service-design-v180 .design-contact-sheet figcaption b { color: #d3c4aa; font-size: 9px; letter-spacing: .14em; }
.service-design-v180 .design-contact-sheet figcaption span { font-size: 13px; font-weight: 600; }
.service-design-v180 .design-contact-main { grid-row: 1 / span 2; min-height: 620px; }
.service-design-v180 .design-contact-small { min-height: 250px; }

.service-design-v180 .design-contact-caption {
  grid-column: 2;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #101210;
}
.service-design-v180 .design-contact-caption > span { color: var(--bronze-hi); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.service-design-v180 .design-contact-caption strong { display: block; margin-top: 18px; font-size: 18px; line-height: 1.3; }
.service-design-v180 .design-contact-caption p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

/* Contact sheet uses a three-row composition: main image spans first two rows. */
.service-design-v180 .design-contact-sheet {
  grid-template-rows: minmax(250px, 1fr) minmax(250px, 1fr) auto;
}
.service-design-v180 .design-contact-main { grid-row: 1 / span 3; }
.service-design-v180 .design-contact-small:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.service-design-v180 .design-contact-small:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.service-design-v180 .design-contact-caption { grid-column: 2; grid-row: 3; }

.service-design-v180 .design-cost {
  padding-block: var(--section);
  background: var(--paper);
  color: var(--ink);
}

.service-design-v180 .design-cost-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  gap: clamp(60px, 8vw, 128px);
  align-items: start;
}

.service-design-v180 .design-cost-intro { position: sticky; top: 108px; }
.service-design-v180 .design-cost-table { border-top: 1px solid #bfb8ab; }
.service-design-v180 .design-cost-row {
  display: grid;
  grid-template-columns: minmax(210px, .78fr) 1.22fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid #d1cabe;
  align-items: start;
}
.service-design-v180 .design-cost-row strong { font-size: 14px; line-height: 1.5; }
.service-design-v180 .design-cost-row span { color: var(--muted-dark); font-size: 14px; line-height: 1.65; }
.service-design-v180 .design-cost-head { padding: 13px 0; color: #8e8475; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.service-design-v180 .design-cost-head span { color: #8e8475; font-size: 9px; line-height: 1.2; }

.service-design-v180 .design-brief {
  padding-block: var(--section);
  background: #0d0f0d;
}

.service-design-v180 .design-brief-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(56px, 8vw, 120px);
  align-items: start;
}
.service-design-v180 .design-brief-title { position: sticky; top: 108px; }
.service-design-v180 .design-brief-list { border-top: 1px solid var(--line); }
.service-design-v180 .design-brief-item {
  display: grid;
  grid-template-columns: 54px minmax(180px, .7fr) 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.service-design-v180 .design-brief-item span { color: var(--bronze-hi); font-size: 11px; letter-spacing: .13em; }
.service-design-v180 .design-brief-item strong { font-size: 18px; line-height: 1.35; }
.service-design-v180 .design-brief-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.service-design-v180 .design-faq { background: #171916; }
.service-design-v180 .design-faq .faq-item { background: transparent; }

.service-design-v180 .design-estimate { background: var(--paper); }
.service-design-v180 .design-lead-form { position: relative; }
.service-design-v180 .design-lead-form::before {
  content: "PROJECT INTAKE / GROMADIS";
  display: block;
  margin: -4px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-dark);
  color: #9a8f7f;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.service-design-v180 .design-project-assets {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.service-design-v180 .design-project-assets legend {
  margin-bottom: 12px;
  color: #5b5853;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.service-design-v180 .design-project-assets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.service-design-v180 .design-project-assets-grid label { position: relative; display: block; cursor: pointer; }
.service-design-v180 .design-project-assets-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.service-design-v180 .design-project-assets-grid span {
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 12px 15px 12px 42px;
  border: 1px solid #d4cec2;
  border-radius: 12px;
  background: #fff;
  color: #403d38;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.service-design-v180 .design-project-assets-grid span::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 15px;
  height: 15px;
  border: 1px solid #9e978b;
  border-radius: 3px;
  transform: translateY(-50%);
  background: #fff;
}
.service-design-v180 .design-project-assets-grid input:checked + span {
  border-color: #9c7341;
  background: #efe4d0;
  box-shadow: inset 0 0 0 1px rgba(156,115,65,.14);
}
.service-design-v180 .design-project-assets-grid input:checked + span::before {
  border-color: #8f6839;
  background: #8f6839;
  box-shadow: inset 0 0 0 4px #efe4d0;
}
.service-design-v180 .design-project-assets-grid input:focus-visible + span { outline: 3px solid rgba(182,144,87,.2); outline-offset: 2px; }
.service-design-v180 .design-project-assets > p { margin: 10px 0 0; color: #777067; font-size: 12px; line-height: 1.5; }

@media (max-width: 1100px) {
  .service-design-v180 .design-hero-grid { grid-template-columns: 1fr minmax(360px, .7fr); gap: 44px; }
  .service-design-v180 .design-hero-board { padding-left: 34px; }
  .service-design-v180 .design-documents-grid,
  .service-design-v180 .design-cost-grid,
  .service-design-v180 .design-brief-grid { gap: 64px; }
  .service-design-v180 .design-flow-step { padding-inline: 20px; }
  .service-design-v180 .design-flow { grid-template-columns: 1fr 34px 1fr 34px 1fr; }
}

@media (max-width: 900px) {
  .service-design-v180 .design-hero { min-height: 0; }
  .service-design-v180 .design-hero-grid,
  .service-design-v180 .design-documents-grid,
  .service-design-v180 .design-cost-grid,
  .service-design-v180 .design-brief-grid,
  .service-design-v180 .design-translation-head,
  .service-design-v180 .design-materials-head,
  .service-design-v180 .design-detail-grid {
    grid-template-columns: 1fr;
  }
  .service-design-v180 .design-hero-board { max-width: 700px; }
  .service-design-v180 .design-documents-intro,
  .service-design-v180 .design-cost-intro,
  .service-design-v180 .design-brief-title { position: static; }
  .service-design-v180 .design-translation-head .section-lead,
  .service-design-v180 .design-materials-head .section-lead { justify-self: start; margin-top: 22px; }
  .service-design-v180 .design-flow { grid-template-columns: 1fr; }
  .service-design-v180 .design-flow-arrow { min-height: 42px; transform: rotate(90deg); }
  .service-design-v180 .design-flow-step { min-height: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .service-design-v180 .design-flow-step small { margin-top: 44px; }
  .service-design-v180 .design-contact-sheet { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(420px, auto) minmax(250px, auto) auto; }
  .service-design-v180 .design-contact-main { grid-column: 1 / -1; grid-row: 1; min-height: 420px; }
  .service-design-v180 .design-contact-small:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .service-design-v180 .design-contact-small:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .service-design-v180 .design-contact-caption { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 760px) {
  .service-design-v180 .design-hero {
    padding: 112px 0 56px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / 44px 44px,
      radial-gradient(circle at 86% 16%, rgba(182,144,87,.12), transparent 26%),
      #0d0f0d;
  }
  .service-design-v180 .design-hero .breadcrumbs { margin-bottom: 34px; }
  .service-design-v180 .design-hero-grid { gap: 38px; }
  .service-design-v180 .design-hero-copy h1 { font-size: clamp(46px, 14vw, 64px); line-height: .96; letter-spacing: -.052em; }
  .service-design-v180 .design-hero-copy h1 small { font-size: .52em; line-height: 1.08; }
  .service-design-v180 .design-hero-lead { margin-top: 22px; font-size: 16px; line-height: 1.62; }
  .service-design-v180 .design-hero .hero-actions { display: grid; grid-template-columns: 1fr; }
  .service-design-v180 .design-hero .button { width: 100%; }
  .service-design-v180 .design-hero-board { min-height: 446px; padding: 30px 0 0 16px; }
  .service-design-v180 .design-hero-photo { height: 408px; }
  .service-design-v180 .design-doc-sheet { width: 74%; padding: 16px; }
  .service-design-v180 .design-doc-line { grid-template-columns: 82px 1fr; min-height: 37px; }
  .service-design-v180 .design-index-row a { min-height: 56px; padding: 0 18px; }

  .service-design-v180 .design-documents-grid { gap: 42px; }
  .service-design-v180 .design-document-board::before { display: none; }
  .service-design-v180 .design-document-row { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 22px 0 24px; }
  .service-design-v180 .design-document-row > b { display: none; }
  .service-design-v180 .design-document-row h3 { font-size: 21px; }
  .service-design-v180 .design-document-row p { font-size: 14px; line-height: 1.62; }

  .service-design-v180 .design-translation-head,
  .service-design-v180 .design-materials-head { gap: 0; }
  .service-design-v180 .design-flow { margin-top: 42px; }
  .service-design-v180 .design-flow-step { padding: 24px 22px 27px; }
  .service-design-v180 .design-flow-step small { margin-top: 34px; }
  .service-design-v180 .design-detail-grid { margin-top: 12px; gap: 12px; }
  .service-design-v180 .design-detail-photo { min-height: 360px; }
  .service-design-v180 .design-detail-note { min-height: 0; padding: 28px 24px; }
  .service-design-v180 .design-detail-note h3 { margin: 54px 0 16px; }

  .service-design-v180 .design-contact-sheet {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
    margin-top: 40px;
  }
  .service-design-v180 .design-contact-main,
  .service-design-v180 .design-contact-small:nth-of-type(2),
  .service-design-v180 .design-contact-small:nth-of-type(3),
  .service-design-v180 .design-contact-caption {
    grid-column: 1;
    grid-row: auto;
  }
  .service-design-v180 .design-contact-main { min-height: 390px; }
  .service-design-v180 .design-contact-small { min-height: 260px; }
  .service-design-v180 .design-contact-sheet figcaption { display: grid; justify-content: start; }

  .service-design-v180 .design-cost-grid { gap: 44px; }
  .service-design-v180 .design-cost-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .service-design-v180 .design-cost-head { display: none; }
  .service-design-v180 .design-brief-grid { gap: 40px; }
  .service-design-v180 .design-brief-item { grid-template-columns: 34px 1fr; gap: 12px; padding: 22px 0; }
  .service-design-v180 .design-brief-item p { grid-column: 2; }

  .service-design-v180 .design-project-assets-grid { grid-template-columns: 1fr; }
  .service-design-v180 .design-project-assets-grid span { min-height: 54px; }
  .service-design-v180 .design-lead-form::before { margin-bottom: 20px; }
}

@media (max-width: 390px) {
  .service-design-v180 .design-hero-copy h1 { font-size: 49px; }
  .service-design-v180 .design-hero-copy h1 small { font-size: 25px; }
  .service-design-v180 .design-doc-sheet { width: 78%; }
}

@media (max-width: 360px) {
  .service-design-v180 .design-hero-copy h1 { font-size: 45px; }
  .service-design-v180 .design-hero-copy h1 small { font-size: 23px; }
  .service-design-v180 .design-hero-board { padding-left: 8px; }
  .service-design-v180 .design-doc-sheet { width: 82%; }
}

/* Mobile menu on this page remains fully opaque, per the global staging UX rule. */
@media (max-width: 1080px) {
  .service-design-v180 .mobile-nav { background: #111311; }
}

/* Global stylesheet already defines scroll-padding; avoid doubling it with section scroll-margin on this composition. */
.service-design-v180 main > section[id] { scroll-margin-top: 0; }
/* V1.8.1 — mobile page-index snap fix: avoid half-cut labels after a horizontal swipe */
@media (max-width: 760px) {
  .service-design-v180 .design-index-row {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .service-design-v180 .design-index-row a {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}