.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  background:var(--button);
  color:var(--on-button);
  border:1px solid transparent;
  min-height:52px;
  padding:12px 25px;
  border-radius:var(--radius);
  font-size:.87rem;
  font-weight:600;
  transition:background .2s,transform .2s
}
.button.secondary {
  background:transparent;
  color:var(--ink);
  border-color:var(--line)
}
.button.small {
  min-height:44px;
  padding:9px 18px;
  font-size:.8rem;
  gap:16px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:25px;
  min-height:44px;
  font-size:.9rem;
  border-block-end:1px solid var(--line);
  padding-block:8px;
  font-weight:500
}
.text-link:hover {
  border-color:var(--ink)
}
.icon-button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:1.35rem
}
.icon-button:hover {
  background:var(--surface-alt)
}
.actions {
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap
}
.service-card {
  display:block;
  position:relative
}
.service-card .image-wrap {
  overflow:hidden;
  aspect-ratio:4/3;
  border-radius:var(--radius);
  background:var(--surface-alt)
}
.service-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s
}
.service-card .card-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:18px;
  margin-block:20px 10px
}
.service-card .card-heading .arrow {
  padding-block-start:4px
}
.service-card p {
  font-size:.85rem;
  line-height:1.7
}
.card-caption {
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-block-start:18px
}
.tag {
  display:inline-block;
  font-size:.72rem;
  background:var(--accent-soft);
  color:var(--accent);
  padding:5px 11px;
  border-radius:3px
}
.faq {
  max-width:920px
}
.faq details {
  border-block-end:1px solid var(--line)
}
.faq summary {
  padding-block:24px;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:1rem;
  line-height:1.6
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq details p {
  padding-block:0 24px;
  max-inline-size:750px;
  font-size:.95rem
}
.inquiry-card {
  background:var(--surface-alt);
  border:1px solid var(--line);
  padding:30px;
  border-radius:var(--radius)
}
.inquiry-card h2 {
  font-size:1.8rem
}
.inquiry-card p {
  font-size:.9rem;
  margin-block:18px 24px
}
.inquiry-card .button {
  width:100%
}
.inquiry-card .direct {
  display:block;
  margin-block-start:20px;
  font-size:.9rem
}
.inquiry-card .direct:hover {
  text-decoration:underline
}
.field {
  display:flex;
  flex-direction:column;
  gap:8px
}
.field label {
  font-size:.88rem;
  font-weight:600
}
.field input,.field select,.field textarea {
  width:100%;
  min-height:52px;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--input-border);
  border-radius:var(--radius);
  padding:12px 15px
}
.field textarea {
  resize:vertical;
  min-height:150px
}
.field input::placeholder,.field textarea::placeholder {
  color:var(--muted)
}
.field [aria-invalid=true] {
  border-color:var(--error)
}
.field-error {
  font-size:.8rem;
  color:var(--error);
  min-height:0
}
.field-error:not(:empty) {
  min-height:20px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.full {
  grid-column:1/-1
}
.check {
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:.84rem;
  color:var(--muted)
}
.check input {
  width:20px;
  height:20px;
  flex-shrink:0;
  accent-color:var(--accent);
  margin-block-start:4px
}
.check a {
  text-decoration:underline
}
.form-note {
  font-size:.82rem
}
.status {
  font-size:.87rem;
  color:var(--accent);
  margin-block-start:12px
}
.error-status {
  color:var(--error)
}
dialog {
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  max-width:620px;
  width:calc(100% - 32px);
  max-height:90dvh;
  padding:32px;
  box-shadow:var(--shadow)
}
dialog::backdrop {
  background:#11242bd9
}
#draft-dialog { padding:0; overflow:hidden; }
#draft-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.draft-heading { display:flex; flex-direction:row-reverse; align-items:center; gap:16px; padding:16px 24px; border-bottom:1px solid var(--line); }
.draft-heading h2 { font-size:1.5rem; margin:0; flex:1; }
.draft-heading button { flex:none; }
.draft-body { overflow:auto; padding:20px 24px; overscroll-behavior:contain; }
.draft-body p { font-size:.88rem; }
dialog textarea { width:100%; height:220px; min-height:100px; resize:vertical; background:var(--bg); color:var(--ink); border:1px solid var(--input-border); padding:15px; border-radius:4px; margin-block:16px 0; }
.draft-footer { padding:12px 24px; border-top:1px solid var(--line); background:var(--surface); }
.draft-footer .status:empty { display:none; }
.draft-footer .actions { gap:10px; }
.draft-footer .button { flex:1; padding-inline:12px; }
@media(max-height:420px) {
.draft-heading {padding-block:8px}
.draft-body {padding-block:10px}
.draft-footer {padding-block:8px} }
.notice {
  padding:20px 24px;
  border-inline-start:3px solid var(--accent);
  background:var(--surface-alt);
  font-size:.9rem;
  margin-block:25px;
  color:var(--muted)
}
:is(.button,.icon-button,.service-result,.service-card,.quick-path,.hero-discovery,.category-index button):active {
  box-shadow:inset 0 0 0 2px var(--accent);
}
:is(.service-result,.service-card,.hero-discovery,.quick-path):focus-visible {
  outline:3px solid var(--focus); outline-offset:5px;
}
@media(hover:hover) and (pointer:fine) {
:is(.service-card,.service-result):hover { border-color:var(--accent); }
a:hover :is(.image-wrap,.result-photo) img { transform:scale(1.025); }
:is(.button,.text-link):hover .arrow { transform:translateY(-2px); }
.button:hover { box-shadow:inset 0 0 0 2px var(--accent); }
}
@media(prefers-reduced-motion:reduce) {
a:hover :is(.image-wrap,.result-photo) img,:is(.button,.text-link):hover .arrow { transform:none; }
}


/* Shared original SVG icon grid; foreground follows the actual component surface. */
.icon { display:inline-block; inline-size:20px; block-size:20px; flex:none; vertical-align:middle; color:inherit; }
.icon-button { flex:none; }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.disclosure-icon { transition:transform var(--duration); color:var(--icon-accent); }
.faq details[open] .disclosure-icon { transform:rotate(45deg); }
:is(.language-picker summary,.language-options a,.theme-control,.drawer-nav a,.drawer-categories a):active { box-shadow:inset 0 0 0 2px var(--accent); }
@media(prefers-reduced-motion:reduce) { .disclosure-icon {transition:none} }

.button[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }