/* Smart Repairs — mobile first */
:root {
  --paper: #F6F2EC;
  --ink: #14100D;
  --muted: #6B6259;
  --body: #4B443C;
  --hair: #E4DACD;
  --white: #FFFFFF;
  --copper: #B4622C;
  --amber: #E08A3C;
  --deep: #8A4519;
  --green: #1F8A5A;
  --sand: #F3E6D8;
  --serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --sans: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;                 /* follows the visitor's own text-size setting */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* room under the floating buttons */
}

/* Tracking is size-specific: tight on display sizes, near zero on small headings. */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; font-optical-sizing: auto; }
h1 { letter-spacing: -.03em; }
h2 { letter-spacing: -.018em; }
h3 { letter-spacing: -.004em; }
p { margin: 0; }
a { color: var(--copper); text-decoration: none; }
a:hover { color: var(--deep); }
img, iframe { max-width: 100%; }

.wrap { padding: 0 20px; }
.small { font-size: 0.8125rem; }
.muted { color: var(--muted); }
.kicker { font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--copper); }
.kicker.amber, .amber { color: var(--amber); }
.kicker.deep { color: var(--deep); }
.card { background: var(--white); border: 1px solid var(--hair); border-radius: 14px; }
.hours-note { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; line-height: 1.45; }
.hours-note svg { width: 14px; height: 14px; flex: none; margin-top: 3px; opacity: .7; }
.hours-note a { font-weight: 600; text-decoration: underline; text-decoration-color: #D9C3A6; text-underline-offset: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 56px; padding: 0 20px; border-radius: 12px;
  font-size: 1.0625rem; font-weight: 700; font-family: var(--sans);
  border: 1px solid transparent; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease-out, background-color .12s ease, border-color .12s ease;
}
/* Feedback lands on the press, not on release. */
.btn:active { transform: scale(.97); }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { background: #EC9A4E; color: var(--ink); }
.btn-ghost { background: transparent; color: var(--paper); border-color: #46403A; }
.btn-ghost:hover { color: var(--paper); border-color: #6B6259; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { color: var(--paper); background: #2A241E; }
.btn-line { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn-line:hover { color: var(--ink); }
.btn-wa { background: var(--green); color: #FFFFFF; }
.btn-wa:hover { color: #FFFFFF; background: #1B7B50; }

/* Keyboard focus must be visible; the ring brightens on dark surfaces. */
:root { --ring: var(--copper); }
.hero, .band, .btn-ghost, .fab-call { --ring: var(--amber); }
a:focus-visible, button:focus-visible, .btn:focus-visible, .fab:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 6px;
}

/* Lift only where a real pointer can hover — on touch it would stick after the tap. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .lang:hover { border-color: var(--copper); color: var(--copper); }
}

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 242, 236, .8);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* The edge appears only once content actually runs under the bar. */
.hdr.is-stuck {
  background: rgba(246, 242, 236, .88);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 14px rgba(20, 16, 13, .05);
}
.hdr-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 20px;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-name { display: block; font-family: var(--serif); font-weight: 900; font-size: 1.125rem; line-height: 1; }
.brand-sub { display: block; font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.nav { display: none; }
.hdr-right { display: flex; align-items: center; gap: 12px; }
.langs { display: flex; gap: 5px; }
.lang {
  display: flex; align-items: center; justify-content: center;
  height: 44px; min-width: 44px; padding: 0 6px;
  border: 1px solid var(--hair); border-radius: 10px; background: transparent;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; color: var(--muted); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease-out, border-color .12s ease, color .12s ease;
}
.lang:active { transform: scale(.94); }
.lang[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hdr-call { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero-art { position: absolute; width: 236px; inset-inline-end: -62px; top: 74px; opacity: .22; }
.hero-in { position: relative; padding-top: 32px; padding-bottom: 34px; }
.hero h1 {
  font-size: clamp(2.375rem, 10.5vw, 2.75rem); line-height: 1.03; font-weight: 900;
  letter-spacing: -.025em; margin-top: 14px; text-wrap: pretty;
}
.hero h1 span { color: var(--amber); }
.hero-sub { margin-top: 16px; font-size: 1rem; line-height: 1.55; color: #CFC5B8; max-width: 34ch; }
.hero-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600;
  color: #CFC5B8; border: 1px solid #3A342E; border-radius: 999px; padding: 7px 12px;
}

/* ---------- review strip ---------- */
.strip-wrap { margin-top: -20px; position: relative; z-index: 5; }
.strip { padding: 15px 16px; box-shadow: 0 8px 22px rgba(20, 16, 13, .10); }
.strip-quote { display: flex; gap: 13px; align-items: flex-start; }
.strip-text { font-size: 0.9375rem; line-height: 1.45; margin-top: 6px; font-weight: 600; }
.strip-quote .small { margin-top: 5px; }
.stars { line-height: 0; }
.avatar {
  flex: none; width: 38px; height: 38px; border-radius: 999px; background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700;
}
.stats { display: none; }
.stat { display: flex; flex-direction: column; text-align: center; }
.stat-v { font-family: var(--serif); font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.stat-l { font-size: 0.8125rem; color: var(--muted); }
.stat-sep { width: 1px; align-self: stretch; background: var(--hair); }

/* ---------- sections ---------- */
.sec { padding-top: 42px; }
.sec-head { display: flex; align-items: baseline; gap: 10px; }
.num { font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; color: var(--copper); }
.sec h2 { font-size: clamp(1.625rem, 7.4vw, 1.875rem); line-height: 1.12; margin-top: 10px; }
.lead { font-size: 0.9375rem; line-height: 1.5; margin-top: 10px; }
.grid { display: grid; gap: 10px; margin-top: 18px; }

.svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 128px; }
.svc svg { width: 24px; height: 24px; flex: none; }
.svc-t { font-size: 0.9375rem; font-weight: 700; line-height: 1.25; }
.svc-s { font-size: 0.75rem; color: var(--muted); line-height: 1.35; }
.svc-wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 13px; }

.ticket { border: 1px dashed #C99C6B; background: var(--sand); border-radius: 14px; padding: 16px; margin-top: 14px; }
.ticket-t { font-size: 0.9375rem; line-height: 1.5; margin-top: 8px; font-weight: 600; }
.ticket-t u { text-decoration-color: #C99C6B; text-underline-offset: 3px; }

.dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dev { padding: 16px; }
.dev-t { font-family: var(--serif); font-size: 1.1875rem; font-weight: 700; }
.dev .svc-s { margin-top: 4px; }

.rating { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.rating .stars { align-self: center; }
.rating-v { font-family: var(--serif); font-size: 1.375rem; font-weight: 900; line-height: 1; }
.rating-l { font-size: 0.8125rem; color: var(--muted); }
.rev-grid { grid-template-columns: 1fr; }
.rev { padding: 16px; }
.rev-h { display: flex; align-items: center; gap: 11px; }
.rev-n { font-size: 0.9375rem; font-weight: 700; }
.rev-t { font-size: 0.9375rem; line-height: 1.5; margin-top: 11px; }
.rev-more { display: flex; align-items: center; padding: 4px 0; }
.rev-more a { font-size: 0.9375rem; font-weight: 700; }

/* ---------- dark band ---------- */
.band { background: var(--ink); color: var(--paper); margin-top: 44px; padding: 36px 0; }
.band h2.on-dark { color: var(--paper); font-size: clamp(1.625rem, 7.4vw, 1.875rem); line-height: 1.12; margin-top: 10px; }
.photo {
  margin: 18px 0; border-radius: 14px; overflow: hidden; height: 200px;
  background: #211B16; border: 1px solid #2E2721;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.86) contrast(1.04) brightness(.96); }
.band-t { font-size: 1rem; line-height: 1.55; color: #CFC5B8; margin-top: 4px; }
.ticks { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.tick { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.45; }
.tick svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }

/* ---------- sim ---------- */
.sim-grid { grid-template-columns: 1fr; }
.sim { padding: 16px; }
.sim-s { font-size: 0.9375rem; line-height: 1.5; margin-top: 7px; color: var(--body); }
.carriers { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pill {
  font-size: 0.75rem; font-weight: 700; color: var(--muted); background: var(--white);
  border: 1px solid var(--hair); border-radius: 999px; padding: 8px 12px;
}

/* ---------- find us ---------- */
.find-grid { display: grid; gap: 10px; margin-top: 18px; }
.map { overflow: hidden; height: 220px; padding: 0; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(.96); }
.info { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.info-row { display: flex; gap: 11px; align-items: flex-start; }
.info-row svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.info-t { font-size: 0.9375rem; font-weight: 700; }
.info-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }

/* ---------- footer ---------- */
.ftr { margin-top: 44px; border-top: 1px solid var(--hair); padding: 24px 0 30px; }
.ftr-in { display: flex; flex-direction: column; gap: 14px; }
.ftr-t { line-height: 1.55; margin-top: 8px; }
.ftr-langs { display: flex; gap: 14px; }
.lang-link {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; color: var(--copper);
}
.lang-link[aria-current="page"] { color: var(--ink); }
.ftr-c { margin-top: 16px; }

/* ---------- floating contact buttons (mobile) ---------- */
.fabs {
  position: fixed; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 50; display: flex; justify-content: space-between; pointer-events: none;
}
.fab {
  pointer-events: auto; width: 54px; height: 54px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(20, 16, 13, .3);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease-out;
}
.fab:active { transform: scale(.94); }
.fab svg { width: 25px; height: 25px; }
.fab-call { background: var(--ink); color: var(--paper); }
.fab-call:hover { color: var(--paper); }
.fab-wa { background: var(--green); color: #FFFFFF; }
.fab-wa:hover { color: #FFFFFF; }

/* ---------- language swap ---------- */
main { transition: opacity .2s ease; }
main.swapping { opacity: .4; transition-duration: .08s; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; }
  .fabs { display: none; }
  html { scroll-padding-top: 92px; }

  .hdr-in { padding: 14px 40px; max-width: 1140px; margin: 0 auto; }
  .nav { display: flex; gap: 26px; }
  .nav a { font-size: 0.9375rem; font-weight: 600; color: var(--body); }
  .nav a:hover { color: var(--copper); }
  .hdr-call { display: inline-flex; min-height: 46px; font-size: 0.9375rem; }
  .brand-name { font-size: 1.25rem; }

  .hero-art { width: 330px; inset-inline-end: 130px; top: 46px; opacity: .28; }
  .hero-in { padding-top: 76px; padding-bottom: 84px; }
  .hero h1 { font-size: clamp(3rem, 5vw, 4.25rem); letter-spacing: -.03em; margin-top: 18px; max-width: 12ch; }
  .hero-sub { font-size: 1.1875rem; margin-top: 22px; max-width: 48ch; }
  .hero-cta { flex-direction: row; margin-top: 30px; }
  .chips { margin-top: 28px; }
  .chip { font-size: 0.8125rem; padding: 9px 14px; }

  .strip-wrap { margin-top: -34px; }
  .strip { padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
  .strip-quote { align-items: center; gap: 14px; }
  .strip-text { font-size: 1rem; }
  .stats { display: flex; align-items: center; gap: 26px; }

  .sec { padding-top: 88px; }
  .sec h2 { font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1.08; margin-top: 12px; }
  .sec-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .sec-top > div { max-width: 620px; }
  .lead { font-size: 1rem; line-height: 1.55; max-width: 400px; margin-top: 0; }
  .rating { margin-top: 0; padding-bottom: 6px; }
  .grid, .find-grid { gap: 16px; margin-top: 32px; }

  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc { padding: 22px; gap: 12px; }
  .svc svg { width: 26px; height: 26px; }
  .svc-t { font-size: 1.0625rem; }
  .svc-s { font-size: 0.8125rem; }
  .svc-wide { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .ticket { display: flex; align-items: center; gap: 24px; padding: 24px 28px; margin-top: 16px; }
  .ticket .kicker { flex: none; }
  .ticket-t { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.45; margin-top: 0; }

  .dev-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dev { padding: 24px; }
  .dev-t { font-size: 1.5rem; }

  .rev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .rev { padding: 22px; }
  .rev-more { padding: 22px; }
  .rev-more a { font-size: 1.0625rem; }

  .band { margin-top: 96px; padding: 76px 0; }
  .band-in { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 56px; align-items: center; }
  .band h2.on-dark { font-size: clamp(2rem, 3vw, 2.5rem); }
  .photo { height: 320px; margin: 0; }
  .rating-v { font-size: 1.625rem; }
  .band-t { font-size: 1.125rem; line-height: 1.6; margin-top: 20px; max-width: 60ch; }
  .ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
  .tick { font-size: 1rem; }

  .sim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim { padding: 26px; }
  .sim-s { font-size: 1rem; line-height: 1.55; margin-top: 10px; }
  .carriers { gap: 8px; margin-top: 16px; }
  .pill { font-size: 0.8125rem; padding: 9px 16px; }

  .find-grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .map { height: 340px; }
  .info { padding: 26px; gap: 20px; }
  .info-t { font-size: 1rem; }
  .info-cta { margin-top: auto; }

  .ftr { margin-top: 88px; padding: 34px 0 30px; }
  .ftr-in { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px; }
  .ftr-langs { gap: 18px; }
  .lang-link { font-size: 0.875rem; }
}

/* ---------- RTL ---------- */
[dir="rtl"] .rev-t, [dir="rtl"] .strip-text { direction: ltr; text-align: start; }
[dir="rtl"] .hero h1, [dir="rtl"] .sec h2 { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .lang, .fab, .hdr, main { transition: none; }
  .btn:hover, .btn:active, .lang:active, .fab:active { transform: none; }
  main.swapping { opacity: 1; }
}

/* Frost the glass instead of blurring it. */
@media (prefers-reduced-transparency: reduce) {
  .hdr, .hdr.is-stuck { background: var(--paper); backdrop-filter: none; }
}

/* Solid surfaces and defined edges. */
@media (prefers-contrast: more) {
  :root { --hair: #B9AC99; --muted: #4A443C; }
  .hdr, .hdr.is-stuck { background: var(--paper); backdrop-filter: none; border-bottom-color: var(--hair); }
  .card, .pill { border-width: 1.5px; }
  .btn-ghost { border-color: var(--paper); }
  a { text-decoration: underline; text-underline-offset: 2px; }
  .nav a, .btn, .brand { text-decoration: none; }
}