/*
Theme Name: TIM servis & Belec Vulkanizacija
Theme URI: https://tim.medico-home.hr
Author: Medico Home
Description: Brza i moderna tema za autoservis i vulkanizaciju u jednoj garaži.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: tim-belec
*/

:root {
  --ink: #101214;
  --surface: #181b1f;
  --paper: #f4f1e9;
  --accent: #f6a919;
  --white: #fff;
  --muted: #aeb4ba;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
img { display: block; max-width: 100%; }
.top-anchor { display: block; width: 0; height: 0; }
.section { padding: clamp(86px, 11vw, 150px) 0; }
#usluge, #o-nama, #kontakt { scroll-margin-top: 78px; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

.site-header {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  padding: 22px 0;
  background: rgba(12,14,16,0);
  border-bottom: 1px solid transparent;
  transition: padding 320ms cubic-bezier(.22,1,.36,1), background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease, backdrop-filter 320ms ease;
}
.site-header.is-compact {
  padding: 10px 0;
  background: rgba(12,14,16,.93);
  border-bottom-color: rgba(255,255,255,.09);
  box-shadow: 0 12px 35px rgba(0,0,0,.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header.menu-open { background: rgba(12,14,16,.97); border-bottom-color: rgba(255,255,255,.09); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 13px; font-weight: 900; letter-spacing: -.04em; }
.brand__mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 12px 4px 12px 4px;
  background: rgba(16,18,20,.7);
  color: var(--accent);
  box-shadow: inset 0 0 0 3px rgba(246,169,25,.09);
  font-size: 13px;
  letter-spacing: -.03em;
  transition: transform 340ms cubic-bezier(.22,1,.36,1), background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, width 320ms cubic-bezier(.22,1,.36,1), height 320ms cubic-bezier(.22,1,.36,1);
}
.brand__text { display: grid; line-height: 1; }
.brand__line { font-size: 14px; transition: color 300ms ease; }
.brand__line--secondary { margin-top: 5px; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
.brand:hover .brand__mark, .brand:focus-visible .brand__mark { transform: rotate(-4deg) scale(1.04); background: var(--accent); color: var(--ink); }
.brand:hover .brand__line--primary, .brand:focus-visible .brand__line--primary { color: var(--accent); }
.brand:hover .brand__line--secondary, .brand:focus-visible .brand__line--secondary { color: var(--white); }
.site-header.is-compact .brand__mark { width: 40px; height: 40px; }
.header-call { border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 11px 17px; font-size: 14px; font-weight: 800; }
.header-call:hover, .header-call:focus-visible { border-color: var(--accent); background: var(--accent); color: var(--ink); transform: translateY(-2px); }
.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-nav a { color: #d6d9dc; font-size: 14px; font-weight: 800; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); }
.site-nav__contact, .menu-toggle { display: none; }
.menu-toggle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 50%;
  background: rgba(16,18,20,.6);
  color: var(--white);
  cursor: pointer;
  transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
}
.menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 280ms cubic-bezier(.22,1,.36,1), opacity 180ms ease; }
.menu-toggle:hover, .menu-toggle:focus-visible { border-color: var(--accent); color: var(--accent); }
.menu-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero {
  position: relative;
  min-height: 760px;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: #202326 url("assets/images/hero-rugged.jpg") 60% 50% / cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,12,14,.96) 0%, rgba(10,12,14,.78) 40%, rgba(10,12,14,.18) 76%), linear-gradient(0deg, rgba(10,12,14,.82), transparent 48%);
}
.hero__content { max-width: 780px; padding: 168px 0 94px; }
.eyebrow { margin: 0 0 22px; color: var(--accent); font-size: 13px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(52px, 8vw, 106px); line-height: .9; letter-spacing: -.075em; text-transform: uppercase; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero__lead { max-width: 610px; margin: 28px 0 0; color: #e1e3e5; font-size: clamp(18px, 2vw, 23px); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; border-radius: 999px; padding: 0 23px; font-weight: 900; }
.button--primary { background: var(--accent); color: var(--ink); }
.button--ghost { border: 1px solid rgba(255,255,255,.42); background: rgba(16,18,20,.3); backdrop-filter: blur(8px); }
.button:hover, .button:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.24); }
.button--primary:hover, .button--primary:focus-visible { background: #ffc24a; }
.button--ghost:hover, .button--ghost:focus-visible { border-color: var(--accent); background: rgba(246,169,25,.12); color: var(--accent); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 34px; color: #d4d7da; font-size: 14px; font-weight: 700; }
.hero__meta span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--accent); }
.meta-location { display: inline-flex; align-items: center; gap: 7px; }
.meta-location::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; background: var(--accent); }
.meta-location i, .trust-strip__location i { display: inline-block; font-style: normal; transition: transform 180ms ease; }
.meta-location:hover, .meta-location:focus-visible { color: var(--accent); }
.meta-location:hover i, .meta-location:focus-visible i, .trust-strip__location:hover i, .trust-strip__location:focus-visible i { transform: translate(3px, -3px); }

.trust-strip { border-block: 1px solid rgba(255,255,255,.09); background: #14171a; }
.trust-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-strip__grid > * { min-height: 124px; display: flex; flex-direction: column; justify-content: center; padding: 24px 28px; border-left: 1px solid rgba(255,255,255,.09); }
.trust-strip__grid > *:last-child { border-right: 1px solid rgba(255,255,255,.09); }
.trust-strip strong { color: var(--accent); font-size: clamp(22px, 3vw, 34px); line-height: 1; letter-spacing: -.05em; }
.trust-strip span { margin-top: 9px; color: var(--muted); font-size: 13px; font-weight: 700; }
.trust-strip__location:hover, .trust-strip__location:focus-visible { background: rgba(246,169,25,.08); transform: translateY(-3px); }
.trust-strip__location:hover span, .trust-strip__location:focus-visible span { color: var(--white); }

.services { background: var(--paper); color: var(--ink); }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 30px; margin-bottom: 58px; }
.section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -6px; color: #a15e00; }
.section-heading h2, .brothers h2, .contact h2 { margin: 0; font-size: clamp(48px, 7vw, 86px); line-height: .92; letter-spacing: -.065em; text-transform: uppercase; }
.section-heading > p:last-child { margin: 0; color: #54585b; font-size: 18px; line-height: 1.6; }
.business-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.business-card { overflow: hidden; border-radius: 5px; background: var(--white); box-shadow: 0 16px 50px rgba(25,27,29,.08); }
.business-card__image { position: relative; height: 330px; overflow: hidden; }
.business-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.34), transparent 56%); }
.business-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.business-card:hover .business-card__image img { transform: scale(1.035); }
.business-card__number { position: absolute; z-index: 1; right: 24px; bottom: 14px; color: rgba(255,255,255,.88); font-size: 44px; font-weight: 950; letter-spacing: -.06em; }
.business-card__content { padding: 37px 38px 40px; }
.business-card__owner { margin: 0 0 7px; color: #9a5b00; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.business-card h3 { margin: 0; font-size: clamp(32px, 4vw, 49px); line-height: 1; letter-spacing: -.055em; }
.business-card__content > p:not(.business-card__owner) { min-height: 78px; margin: 20px 0; color: #5b5f62; line-height: 1.55; }
.check-list { display: grid; gap: 10px; margin: 26px 0 32px; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 25px; font-weight: 750; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .48em; width: 9px; height: 5px; border-left: 2px solid #b46a00; border-bottom: 2px solid #b46a00; transform: rotate(-45deg); }
.text-link { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #dedbd3; padding-top: 21px; font-weight: 900; }
.text-link span { margin-left: auto; color: #9a5b00; white-space: nowrap; }
.text-link::after { content: "→"; color: #9a5b00; font-size: 21px; transition: transform 180ms ease; }
.text-link:hover, .text-link:focus-visible { color: #9a5b00; border-color: #b46a00; }
.text-link:hover::after, .text-link:focus-visible::after { transform: translateX(6px); }
.card-call-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; border-top: 1px solid #dedbd3; padding-top: 18px; }
.card-call { position: relative; display: grid; gap: 5px; min-width: 0; border: 1px solid #dedbd3; border-radius: 4px; padding: 13px 34px 13px 13px; background: #f8f6f0; }
.card-call span { color: #8d5504; font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.card-call strong { font-size: 14px; letter-spacing: -.015em; white-space: nowrap; }
.card-call i { position: absolute; right: 12px; top: 50%; color: #9a5b00; font-size: 19px; font-style: normal; transform: translateY(-50%); transition: transform 180ms ease; }
.card-call:hover, .card-call:focus-visible { border-color: var(--accent); background: var(--accent); color: var(--ink); transform: translateY(-2px); box-shadow: 0 7px 18px rgba(25,27,29,.1); }
.card-call:hover span, .card-call:focus-visible span, .card-call:hover i, .card-call:focus-visible i { color: var(--ink); }
.card-call:hover i, .card-call:focus-visible i { transform: translate(4px, -50%); }

.towing-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: 42px 58px; margin-top: 24px; border-radius: 5px; background: #191c20; color: var(--white); padding: clamp(34px, 5vw, 58px); box-shadow: 0 16px 50px rgba(25,27,29,.12); }
.towing-card .business-card__owner { color: var(--accent); }
.towing-card__intro h3 { max-width: 560px; margin: 0; font-size: clamp(35px, 4.4vw, 58px); line-height: 1; letter-spacing: -.055em; }
.towing-card__intro > p:last-child { max-width: 590px; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.towing-card__equipment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-self: stretch; }
.towing-card__equipment > div { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 3px; background: rgba(255,255,255,.025); }
.towing-option img { width: 100%; height: 150px; object-fit: cover; }
.towing-option__label { display: flex; min-height: 92px; flex-direction: column; justify-content: space-between; gap: 15px; padding: 18px 20px 20px; }
.towing-card__equipment span { color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.towing-card__equipment strong { font-size: 18px; line-height: 1.25; }
.towing-card__footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(255,255,255,.11); padding-top: 27px; }
.oryx-note { margin: 0; color: #aeb4ba; font-size: 13px; }
.oryx-note strong { color: #dfe2e4; font-weight: 800; }
.oryx-note a { display: inline-flex; align-items: center; gap: 5px; border-radius: 4px; }
.oryx-note a i { color: var(--accent); font-style: normal; transition: transform 220ms ease; }
.oryx-note a:hover strong, .oryx-note a:focus-visible strong { color: var(--white); }
.oryx-note a:hover i, .oryx-note a:focus-visible i { transform: translate(3px, -3px); }
.towing-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.towing-card__actions .button { min-height: 46px; padding-inline: 18px; font-size: 14px; }

.brothers { position: relative; overflow: hidden; background: var(--ink); }
.brothers::after { content: "TM"; position: absolute; right: -2vw; bottom: -9vw; color: rgba(255,255,255,.025); font-size: 31vw; font-weight: 950; line-height: .8; letter-spacing: -.12em; pointer-events: none; }
.brothers__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .75fr; gap: clamp(60px, 10vw, 140px); align-items: center; }
.brothers__copy .eyebrow { margin-bottom: 25px; }
.brothers__lead { margin: 35px 0 18px; color: #eef0f1; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.45; }
.brothers__copy > p:last-child { color: var(--muted); font-size: 17px; line-height: 1.65; }
.process-card { border-top: 5px solid var(--accent); border-radius: 4px; background: #202429; padding: 36px; box-shadow: 0 24px 80px rgba(0,0,0,.23); }
.process-card__label { margin: 0 0 24px; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.process-card ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.process-card li { display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: start; padding: 21px 0; border-top: 1px solid rgba(255,255,255,.09); }
.process-card li > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(246,169,25,.45); border-radius: 50%; color: var(--accent); font-size: 13px; font-weight: 900; }
.process-card li div { display: grid; gap: 7px; }
.process-card strong { font-size: 18px; }
.process-card small { color: var(--muted); font-size: 14px; line-height: 1.45; }

.contact { background: var(--accent); color: var(--ink); }
.contact__grid { display: grid; grid-template-columns: .75fr 1fr; gap: clamp(55px, 9vw, 125px); align-items: start; }
.contact .eyebrow { color: #684100; }
.contact__intro > p:not(.eyebrow) { max-width: 480px; margin: 28px 0; font-size: 19px; line-height: 1.55; }
.directions-link { display: inline-flex; align-items: center; gap: 14px; border: 1px solid rgba(16,18,20,.35); border-radius: 999px; padding: 12px 17px; font-weight: 900; }
.directions-link span { display: inline-block; font-size: 21px; transition: transform 180ms ease; }
.directions-link:hover, .directions-link:focus-visible { background: var(--ink); color: var(--accent); transform: translateY(-2px); }
.directions-link:hover span, .directions-link:focus-visible span { transform: translate(3px, -3px); }
.contact-panel { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(16,18,20,.23); border-bottom: 0; }
.contact-panel__item { min-height: 178px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border-right: 1px solid rgba(16,18,20,.23); border-bottom: 1px solid rgba(16,18,20,.23); }
.contact-panel__item:nth-child(even) { border-right: 0; }
.contact-panel__item > span { color: #4a3000; font-size: 12px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.contact-panel__item strong { margin-top: 22px; font-size: 23px; line-height: 1.35; }
.contact-panel__item strong b { font-weight: 600; }
.contact-panel__item a { margin-top: 12px; font-size: 21px; font-weight: 950; }
.contact-panel__item a b { display: block; margin-top: 5px; font-size: 18px; font-weight: 800; }
.address-link, .contact-call { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-radius: 3px; padding: 9px 10px; margin-inline: -10px; }
.address-link strong { margin-top: 0; }
.contact-call__details { display: grid; gap: 5px; }
.contact-call__details strong, .contact-call__details b { margin: 0; }
.contact-call__details strong { font-size: 21px; line-height: 1.1; }
.contact-call__details b { font-size: 18px; line-height: 1.1; }
.address-link i { display: inline-block; font-style: normal; font-size: 23px; transition: transform 180ms ease; }
.contact-call::after { content: "→"; font-size: 24px; transition: transform 180ms ease; }
.address-link:hover, .address-link:focus-visible, .contact-call:hover, .contact-call:focus-visible { background: rgba(16,18,20,.09); transform: translateY(-2px); }
.address-link:hover i, .address-link:focus-visible i { transform: translate(3px, -3px); }
.contact-call:hover::after, .contact-call:focus-visible::after { transform: translateX(6px); }

.site-footer { background: #0c0e10; padding: 36px 0; color: #9aa0a6; }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px; }
.site-footer .brand { color: var(--white); }
.site-footer p { margin: 0; font-size: 12px; }
.site-footer__attribution { display: inline-flex; justify-self: end; flex: 0 0 auto; align-items: center; gap: 8px; color: #9ebcff; border-radius: 6px; text-decoration: none; }
.site-footer__attribution-label { color: #8c9298; font-size: 11px; font-weight: 650; }
.site-footer__attribution img { display: block; width: 32px; height: auto; transition: filter 180ms ease; }
.site-footer__attribution strong { font-size: 12px; font-weight: 800; }
.site-footer__attribution:hover, .site-footer__attribution:focus-visible { color: var(--white); }
.site-footer__attribution:hover img, .site-footer__attribution:focus-visible img { filter: brightness(1.35); }
.back-to-top {
  position: fixed;
  z-index: 35;
  right: clamp(18px, 2.5vw, 38px);
  bottom: clamp(18px, 2.5vw, 38px);
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(246,169,25,.55);
  border-radius: 50%;
  background: rgba(16,18,20,.92);
  color: var(--accent);
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 260ms ease, visibility 260ms ease, transform 320ms cubic-bezier(.22,1,.36,1), background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.back-to-top span { font-size: 22px; line-height: 1; transform: translateY(-1px); transition: transform 220ms ease; }
.back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.back-to-top:hover, .back-to-top:focus-visible { border-color: var(--accent); background: var(--accent); color: var(--ink); transform: translateY(-3px); }
.back-to-top:hover span, .back-to-top:focus-visible span { transform: translateY(-4px); }
.mobile-actions { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

@media (max-width: 900px) {
  .header-call { display: none; }
  .menu-toggle { display: grid; margin-left: auto; }
  .site-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 20px;
    left: 20px;
    display: grid;
    gap: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 5px;
    background: rgba(18,21,24,.98);
    box-shadow: 0 22px 55px rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px) scale(.985);
    transform-origin: top center;
    transition: opacity 220ms ease, visibility 220ms ease, transform 300ms cubic-bezier(.22,1,.36,1);
  }
  .site-nav a { display: flex; min-height: 60px; align-items: center; justify-content: space-between; padding: 15px 20px; font-size: 16px; }
  .site-nav a::after { content: "→"; color: var(--accent); font-size: 19px; transition: transform 180ms ease; }
  .site-nav a + a { border-top: 1px solid rgba(255,255,255,.09); }
  .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: translateX(4px); }
  .site-nav .site-nav__contact { display: flex; background: var(--accent); color: var(--ink); }
  .site-nav .site-nav__contact::after { color: var(--ink); }
  .site-nav .site-nav__contact:hover, .site-nav .site-nav__contact:focus-visible { background: #ffc24a; color: var(--ink); }
  .menu-open .site-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .trust-strip__grid { grid-template-columns: 1fr 1fr; }
  .trust-strip__grid > *:nth-child(2) { border-right: 1px solid rgba(255,255,255,.09); }
  .business-grid, .brothers__grid, .contact__grid { grid-template-columns: 1fr; }
  .towing-card { grid-template-columns: 1fr; }
  .towing-card__footer { grid-column: auto; align-items: flex-start; flex-direction: column; }
  .towing-card__actions { justify-content: flex-start; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading .eyebrow { margin-bottom: -12px; }
  .business-card__content > p:not(.business-card__owner) { min-height: 0; }
  .brothers__grid { gap: 52px; }
  .site-footer__inner { grid-template-columns: 1fr; text-align: center; }
  .site-footer .brand { justify-self: center; }
  .site-footer__attribution { justify-self: center; }
}

@media (max-width: 640px) {
  .shell { width: min(calc(100% - 28px), var(--max)); }
  .site-header { padding: 15px 0; }
  .site-header.is-compact { padding: 8px 0; }
  .site-nav { right: 14px; left: 14px; }
  .brand__mark { width: 42px; height: 42px; }
  .brand__text { font-size: 14px; }
  .header-call { padding: 10px 13px; font-size: 13px; }
  .hero { min-height: 720px; background-position: 64% center; }
  .hero::before { background: linear-gradient(90deg, rgba(10,12,14,.96) 0%, rgba(10,12,14,.78) 60%, rgba(10,12,14,.33)), linear-gradient(0deg, rgba(10,12,14,.9), transparent 58%); }
  .hero__content { padding: 140px 0 58px; }
  .hero h1 { font-size: clamp(48px, 17vw, 70px); }
  .hero__actions { display: grid; }
  .button { width: 100%; }
  .trust-strip__grid > * { min-height: 102px; padding: 19px 16px; }
  .trust-strip strong { font-size: 23px; }
  .trust-strip span { font-size: 12px; }
  .section-heading { margin-bottom: 40px; }
  .section-heading h2, .brothers h2, .contact h2 { font-size: clamp(43px, 14vw, 62px); }
  .business-card__image { height: 248px; }
  .business-card__content { padding: 29px 25px 31px; }
  .business-card h3 { font-size: 36px; }
  .text-link { align-items: flex-start; flex-direction: column; }
  .card-call { padding: 12px 29px 12px 10px; }
  .card-call strong { font-size: 12px; }
  .towing-card { gap: 30px; padding: 30px 24px; }
  .towing-card__equipment { grid-template-columns: 1fr; }
  .towing-option img { height: 210px; }
  .towing-option__label { min-height: 84px; }
  .towing-card__actions { display: grid; width: 100%; }
  .towing-card__actions .button { width: 100%; }
  .process-card { padding: 28px 23px; }
  .contact-panel { grid-template-columns: 1fr; }
  .contact-panel__item, .contact-panel__item:nth-child(even) { min-height: 155px; border-right: 0; }
  .site-footer { padding-bottom: 106px; }
  .back-to-top { right: 14px; bottom: 88px; width: 44px; height: 44px; }
  .mobile-actions { position: fixed; z-index: 30; inset: auto 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.13); background: rgba(11,13,15,.97); backdrop-filter: blur(12px); }
  .mobile-actions a { display: grid; gap: 4px; min-height: 72px; align-content: center; padding: 10px 13px; text-align: center; }
  .mobile-actions a + a { border-left: 1px solid rgba(255,255,255,.13); background: var(--accent); color: var(--ink); }
  .mobile-actions a:hover, .mobile-actions a:focus-visible { background: #2a2e33; color: var(--white); }
  .mobile-actions a + a:hover, .mobile-actions a + a:focus-visible { background: #ffc24a; color: var(--ink); }
  .mobile-actions small { color: inherit; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; opacity: .78; }
  .mobile-actions strong { font-size: 14px; }
}

body.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}