.locksmith-page { background: #fff; }

.locksmith-hero {
  overflow: hidden;
  padding-bottom: 40px;
  background: #12315d;
  color: #fff;
  border-bottom: 4px solid var(--gyg-yellow);
}

.locksmith-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .78fr);
  gap: 60px;
  align-items: center;
}

.locksmith-hero-copy h1 {
  max-width: 720px;
  color: #fff;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.03;
  letter-spacing: -.045em;
}

.locksmith-hero-copy > p {
  max-width: 700px;
  margin-top: 18px;
  color: #d9e4f2;
  font-size: 17px;
  line-height: 1.58;
}

.locksmith-hero-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-top: 4px solid var(--gyg-yellow);
  border-radius: 14px;
}

.locksmith-visual-item { min-width: 0; text-align: center; }
.locksmith-visual-item > i {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  background: #fff;
  color: #12315d;
  border-radius: 12px;
  font-size: 29px;
}
.locksmith-visual-item:last-child > i { color: var(--gyg-orange); }
.locksmith-visual-item b, .locksmith-visual-item small { display: block; }
.locksmith-visual-item b { color: #fff; font-size: 16px; }
.locksmith-visual-item small { margin-top: 5px; color: #c8d6e7; font-size: 12px; line-height: 1.45; }
.locksmith-visual-arrow { color: var(--gyg-yellow); font-size: 20px; }

.locksmith-summary { border-bottom: 1px solid var(--gyg-line); }
.locksmith-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.locksmith-summary-grid > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 30px;
  border-right: 1px solid var(--gyg-line);
}
.locksmith-summary-grid > div:first-child { padding-left: 0; }
.locksmith-summary-grid > div:last-child { padding-right: 0; border-right: 0; }
.locksmith-summary-grid i { color: #0a7897; font-size: 20px; }
.locksmith-summary-grid b, .locksmith-summary-grid small { display: block; }
.locksmith-summary-grid b { color: var(--gyg-blue); font-size: 14px; }
.locksmith-summary-grid small { margin-top: 3px; color: var(--gyg-muted); font-size: 12px; }

.locksmith-case, .locksmith-realities { padding: var(--section-space) 0; }
.locksmith-section-heading { max-width: 850px; margin-bottom: 40px; }
.locksmith-section-heading .section-kicker { display: inline-flex; align-items: center; gap: 8px; }
.locksmith-section-heading h2 { margin-top: 12px; }
.locksmith-section-heading > p { max-width: 740px; margin-top: 14px; font-size: 17px; line-height: 1.7; }

.locksmith-case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(310px, .58fr);
  gap: 30px;
  align-items: start;
}

.locksmith-steps { border: 1px solid #ccd8e5; border-radius: 12px; overflow: hidden; }
.locksmith-steps details { border-bottom: 1px solid #d8e1eb; background: #fff; }
.locksmith-steps details:last-child { border-bottom: 0; }
.locksmith-steps summary {
  min-height: 92px;
  display: grid;
  grid-template-columns: 38px 42px minmax(180px, .75fr) minmax(160px, 1fr) 18px;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.locksmith-steps summary::-webkit-details-marker { display: none; }
.locksmith-steps summary > span {
  color: var(--gyg-orange);
  font-size: 13px;
  font-weight: 850;
}
.locksmith-steps summary > i:nth-of-type(1) {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eaf3f8;
  color: #087d9c;
}
.locksmith-steps summary b { color: var(--gyg-blue); font-size: 16px; }
.locksmith-steps summary small { color: var(--gyg-muted); font-size: 13px; }
.locksmith-steps summary > i:last-child { color: #6a7b90; transition: transform .18s ease; }
.locksmith-steps details[open] summary { background: #f4f7fa; }
.locksmith-steps details[open] summary > i:last-child { transform: rotate(180deg); }
.locksmith-step-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 0 22px 24px 130px;
  background: #f4f7fa;
}
.locksmith-step-body p { font-size: 14px; line-height: 1.65; }
.locksmith-step-body b { color: var(--gyg-blue); }

.locksmith-result {
  padding: 28px;
  background: #12315d;
  color: #fff;
  border-top: 4px solid var(--gyg-yellow);
  border-radius: 12px;
}
.locksmith-result-label { color: var(--gyg-yellow); font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.locksmith-result > i { display: block; margin: 24px 0 18px; color: var(--gyg-yellow); font-size: 34px; }
.locksmith-result h3 { max-width: 280px; color: #fff; font-size: 24px; }
.locksmith-result dl { margin-top: 26px; }
.locksmith-result dl > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.locksmith-result dt { color: #aebed2; font-size: 12px; }
.locksmith-result dd { margin: 0; color: #fff; font-size: 13px; font-weight: 750; text-align: right; }

.locksmith-realities { background: #f4f7fa; }
.locksmith-reality-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.locksmith-reality-grid article {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 32px;
  background: #fff;
  border: 1px solid #d3dde8;
  border-top: 4px solid var(--gyg-orange);
  border-radius: 12px;
}
.locksmith-reality-grid article > i {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #fff0ea;
  color: var(--gyg-orange);
  border-radius: 10px;
  font-size: 23px;
}
.locksmith-reality-grid article span { color: #087d9c; font-size: 12px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.locksmith-reality-grid article h3 { margin-top: 8px; }
.locksmith-reality-grid article p { margin-top: 12px; font-size: 14px; line-height: 1.7; }
.locksmith-reality-grid ul { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 20px 0 0; padding: 0; list-style: none; }
.locksmith-reality-grid li { color: var(--gyg-blue); font-size: 13px; font-weight: 750; }
.locksmith-reality-grid li i { margin-right: 6px; color: #078763; }

.locksmith-next { padding: 76px 0; border-top: 1px solid var(--gyg-line); }
.locksmith-next-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 50px; align-items: center; }
.locksmith-next h2 { max-width: 780px; margin-top: 10px; }
.locksmith-next p { margin-top: 14px; font-size: 16px; }
.locksmith-next-actions { display: flex; gap: 12px; }
.locksmith-outline-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 21px;
  border: 1px solid #aebdd0;
  border-radius: 8px;
  color: var(--gyg-blue);
  font-size: 14px;
  font-weight: 800;
}
.locksmith-outline-button:hover { border-color: var(--gyg-blue); background: #f4f7fa; }

.locksmith-closing { padding: 70px 0; background: #12315d; border-top: 4px solid var(--gyg-yellow); }
.locksmith-closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.locksmith-closing-label { color: var(--gyg-yellow); font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.locksmith-closing-label i { margin-right: 7px; }
.locksmith-closing h2 { max-width: 800px; margin-top: 10px; color: #fff; font-size: clamp(34px, 3.6vw, 50px); }
.locksmith-closing-actions { display: flex; gap: 12px; align-items: center; }
.locksmith-closing-actions a {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 8px;
  background: var(--gyg-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 850;
}
.locksmith-closing-actions a.is-secondary { border: 1px solid rgba(255, 255, 255, .45); background: transparent; }
.locksmith-closing-actions a.is-secondary:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

@media (max-width: 980px) {
  .locksmith-hero-grid, .locksmith-case-layout { grid-template-columns: 1fr; }
  .locksmith-hero-grid { gap: 44px; }
  .locksmith-hero-visual { max-width: 650px; }
  .locksmith-next-grid { grid-template-columns: 1fr; gap: 28px; }
  .locksmith-next-actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .locksmith-hero { padding-bottom: 36px; }
  .locksmith-hero-copy h1 { font-size: 38px; }
  .locksmith-hero-copy > p { font-size: 16px; }
  .locksmith-hero-visual { grid-template-columns: 1fr; padding: 24px; }
  .locksmith-visual-arrow { transform: rotate(90deg); justify-self: center; }
  .locksmith-summary-grid, .locksmith-reality-grid { grid-template-columns: 1fr; }
  .locksmith-summary-grid > div, .locksmith-summary-grid > div:first-child, .locksmith-summary-grid > div:last-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--gyg-line); }
  .locksmith-summary-grid > div:last-child { border-bottom: 0; }
  .locksmith-case, .locksmith-realities { padding: 68px 0; }
  .locksmith-steps summary { grid-template-columns: 34px 42px minmax(0, 1fr) 18px; gap: 10px; padding: 16px; }
  .locksmith-steps summary small { grid-column: 3 / 5; }
  .locksmith-step-body { grid-template-columns: 1fr; gap: 12px; padding: 0 16px 20px 102px; }
  .locksmith-reality-grid article { grid-template-columns: 1fr; padding: 24px; }
  .locksmith-next-actions, .locksmith-closing-grid { grid-template-columns: 1fr; }
  .locksmith-next-actions { display: grid; }
  .locksmith-closing-grid { display: grid; }
  .locksmith-closing-actions { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .locksmith-hero-copy h1 { font-size: 34px; }
  .locksmith-hero-actions { display: grid; }
  .locksmith-hero-actions .interior-button { width: 100%; }
  .locksmith-steps summary { grid-template-columns: 30px 38px minmax(0, 1fr) 14px; }
  .locksmith-steps summary > i:nth-of-type(1) { width: 38px; height: 38px; }
  .locksmith-step-body { padding-left: 16px; }
  .locksmith-result { padding: 24px; }
  .locksmith-closing-actions { display: grid; }
  .locksmith-closing-actions a { width: 100%; }
}