/* ================================================================
   13 Mitchell Shire Taxis — Total Redesign v2
   Theme: #F97316 orange · #0D0D0D black · #FFFFFF white
   Design Language: Geometric / Diagonal / Automotive Premium
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;600;700;800&family=DM+Sans:wght@400;500&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --orange:        #F97316;
  --orange-dark:   #D95F08;
  --orange-glow:   rgba(249,115,22,.22);
  --orange-tint:   rgba(249,115,22,.09);
  --ink:           #0D0D0D;
  --ink-2:         #1A1A1A;
  --ink-3:         #2A2A2A;
  --mist:          #F5F5F5;
  --mist-2:        #ECECEC;
  --ash:           #7A7A7A;
  --white:         #FFFFFF;
  --red:           #DC2626;

  --display:   'Bebas Neue', sans-serif;
  --head:      'Manrope', sans-serif;
  --body:      'DM Sans', sans-serif;

  --r-sm:      6px;
  --r-md:      10px;
  --r-lg:      16px;

  --ease:      .28s cubic-bezier(.4,0,.2,1);
  --ease-out:  .38s cubic-bezier(.0,0,.2,1);
  --ease-spring: .5s cubic-bezier(.34,1.56,.64,1);
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
a  { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.container { max-width:1200px; margin:0 auto; padding:0 28px; }

/* ── Scroll reveal ───────────────────────────────────────────── */
[data-reveal] {
  opacity:0;
  transform:translateY(36px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].visible { opacity:1; transform:none; }
[data-reveal][data-delay="2"] { transition-delay:.18s; }
[data-reveal][data-delay="3"] { transition-delay:.32s; }
[data-reveal][data-delay="4"] { transition-delay:.46s; }

/* ================================================================
   HEADER — Dark bar, left-pinned brand, right nav
================================================================ */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:1060;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-3);
  transition: background var(--ease), box-shadow var(--ease);
}
.site-header.scrolled {
  box-shadow: 0 2px 40px rgba(0,0,0,.55);
  background: rgba(13,13,13,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-inner {
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 28px; max-width:1200px; margin:0 auto; height:68px;
}

/* Logo */
.logo {
  display: flex; align-items:center; gap:14px;
  flex:none;
  transition: opacity var(--ease);
}
.logo:hover { opacity:.8; }
.logo-mark { width:44px; height:44px; flex:none; display:block; }
.logo-text {
  display:flex; flex-direction:column; line-height:1.1;
}
.logo-text > span {
  font-family: var(--head); font-weight:800; font-size:.98rem;
  color: var(--white); letter-spacing:.01em;
}
.logo-text .brand-13 { color: var(--orange); }
.logo-text small {
  font-family: var(--head); font-weight:500; font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase; color: var(--ash);
}

/* Nav */
nav.main-nav ul { display:flex; gap:4px; list-style:none; }
nav.main-nav a {
  font-family: var(--head); font-weight:600; font-size:.83rem;
  color: #b0b0b0;
  padding: 6px 14px; border-radius: var(--r-sm);
  transition: color var(--ease), background var(--ease);
  letter-spacing:.02em;
}
nav.main-nav a:hover {
  color: var(--white);
  background: rgba(255,255,255,.07);
}

.header-cta { display:flex; align-items:center; gap:10px; }
.phone-link {
  font-family: var(--head); font-weight:700; font-size:.84rem;
  display: flex; align-items:center; gap:8px; color: var(--white);
  transition: color var(--ease);
  letter-spacing:.01em;
}
.phone-link:hover { color: var(--orange); }
.phone-link svg { flex:none; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--head); font-weight:700; font-size:.88rem;
  padding: 13px 28px;
  background: var(--orange); color: var(--white);
  border: 2px solid var(--orange); border-radius: var(--r-sm);
  cursor: pointer; letter-spacing:.03em;
  position:relative; overflow:hidden;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease), border-color var(--ease);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent);
  opacity:0; transition:opacity var(--ease);
}
.btn:hover::before { opacity:1; }
.btn:hover {
  background: var(--orange-dark); border-color: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(249,115,22,.45);
}
.btn:active { transform: translateY(0); }
.btn:disabled {
  background: #303030; border-color: #303030; color: #666;
  cursor: not-allowed; transform:none; box-shadow:none;
}
.btn:disabled::before { display:none; }

.btn-outline {
  background: transparent; color: var(--white); border-color: rgba(255,255,255,.35);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-outline:hover {
  background: var(--white); color: var(--ink); border-color: var(--white);
  box-shadow: none;
}

/* Spinner */
.spinner {
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  animation:spin .7s linear infinite; display:none; flex:none;
}
.btn.loading .spinner { display:inline-block; }
@keyframes spin { to{transform:rotate(360deg);} }

/* ── Hamburger ────────────────────────────────────────────────── */
.nav-toggle {
  display:none; background:none; border:2px solid var(--ink-3);
  cursor:pointer; width:44px; height:44px; border-radius: var(--r-sm);
  flex:none; position:relative; z-index:1200; padding:0;
  transition: border-color var(--ease);
}
.nav-toggle:hover { border-color: var(--orange); }
.nav-toggle .bar {
  display:block; position:absolute; left:10px; right:10px; height:2px;
  background: var(--white); border-radius:2px;
  transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .28s ease, top .38s cubic-bezier(.4,0,.2,1);
}
.nav-toggle .bar:nth-child(1) { top:14px; }
.nav-toggle .bar:nth-child(2) { top:21px; }
.nav-toggle .bar:nth-child(3) { top:28px; }
.nav-toggle.active .bar { background: var(--orange); }
.nav-toggle.active .bar:nth-child(1) { top:21px; transform:rotate(45deg); }
.nav-toggle.active .bar:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.active .bar:nth-child(3) { top:21px; transform:rotate(-45deg); }

#navOverlay {
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  z-index:1050; opacity:0; visibility:hidden;
  transition:opacity .38s ease, visibility .38s ease;
}
#navOverlay.show { opacity:1; visibility:visible; }
body.nav-open { overflow:hidden; }

/* ================================================================
   HERO — Full dark panel, angled split
================================================================ */
.hero {
  background: var(--ink);
  padding: 0;
  position:relative;
  overflow:hidden;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}

/* Subtle grid texture */
.hero::before {
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Orange diagonal stripe at bottom */
.hero::after {
  content:"";
  position:absolute; bottom:-2px; left:0; right:0; z-index:1;
  height:120px;
  background: var(--white);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
}

.hero-topbar { display:none; }

.container.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
  padding-top: 130px;
  padding-bottom: 160px;
  position:relative; z-index:2;
}

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items:center; gap:10px;
  font-family: var(--head); font-weight:700; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--orange); margin-bottom:20px;
}
.eyebrow::before {
  content:""; width:20px; height:2px;
  background: var(--orange); border-radius:2px;
}

/* Discount badge */
.discount-badge {
  display: inline-flex; align-items:center; gap:8px;
  border: 1.5px solid var(--orange); color: var(--orange);
  font-family: var(--head); font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding: 6px 16px; border-radius: var(--r-sm);
  margin-bottom: 22px;
  animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(249,115,22,.4); }
  50%{ box-shadow: 0 0 0 8px rgba(249,115,22,0); }
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(3.2rem, 6vw, 6rem);
  line-height: .95;
  letter-spacing:.04em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero h1 span { color: var(--orange); }

.hero p.lead {
  font-size: 1rem; color: #9a9a9a;
  max-width: 500px; margin-bottom: 34px; line-height:1.8;
}

/* Hero badges */
.hero-badges { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.hero-badges .badge {
  display: flex; align-items:center; gap:10px;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-sm); padding: 10px 16px;
  font-family: var(--head); font-weight:600; font-size:.8rem;
  color: var(--white);
  background: rgba(255,255,255,.04);
  transition: border-color var(--ease), background var(--ease);
}
.hero-badges .badge:hover {
  border-color: var(--orange);
  background: var(--orange-tint);
}
.hero-badges .badge .ic {
  width:30px; height:30px; border-radius: var(--r-sm);
  background: var(--orange-tint);
  display:flex; align-items:center; justify-content:center; flex:none;
}

.hero-cta-row { display:flex; gap:12px; flex-wrap:wrap; }

/* ── Booking card ─────────────────────────────────────────────── */
.booking-card {
  background: var(--white);
  border: 1px solid var(--mist-2);
  border-radius: var(--r-md);
  padding: 32px 28px;
  position:relative;
  box-shadow: 0 40px 80px rgba(0,0,0,.4);
}

/* Orange left border accent */
.booking-card::before {
  content:""; position:absolute; top:24px; left:0; bottom:24px; width:3px;
  background: var(--orange); border-radius:0 3px 3px 0;
}

.booking-card h2 {
  font-family: var(--head); font-size:1.25rem; font-weight:800;
  margin-bottom:4px; color: var(--ink);
}
.booking-card .sub { color: var(--ash); font-size:.83rem; margin-bottom:22px; }

/* Form */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid .full { grid-column:1 / -1; }
.field { position:relative; }
.field label {
  display:block; font-family: var(--head); font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.1em; color: #444;
  margin-bottom:5px;
}
.field input,
.field select,
.field textarea {
  width:100%; border:1.5px solid var(--mist-2);
  background: var(--mist); border-radius: var(--r-sm);
  padding:11px 14px;
  font-family: var(--body); font-size:.9rem; color: var(--ink);
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
  outline:none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--orange-tint);
}
.field textarea { resize:vertical; min-height:80px; }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--red); background:#fff8f8; }
.field-error {
  display:none; color: var(--red); font-size:.7rem;
  font-family: var(--head); font-weight:600; margin-top:4px;
}
.field.invalid .field-error { display:block; }
.booking-card .btn { width:100%; margin-top:6px; padding:15px; font-size:.95rem; }
.form-note { font-size:.74rem; color: var(--ash); margin-top:10px; text-align:center; }

/* ================================================================
   DIAGONAL SECTION DIVIDER UTILITY
================================================================ */
.diagonal-down,
.diagonal-up {
  position:relative; overflow:hidden;
}
.diagonal-down::after {
  content:""; position:absolute; bottom:-2px; left:0; right:0;
  height:80px; background: var(--mist);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index:2;
}
.diagonal-dark-to-light::after {
  background: var(--white);
}

/* ================================================================
   SECTION BASE
================================================================ */
.section { padding: 100px 0; }
.section-head {
  max-width:640px; margin:0 auto 56px; text-align:center;
}
.section-head .eyebrow { justify-content:center; color: var(--orange); }
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: .95; letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:14px; color: var(--ink);
}
.section-head p { color: var(--ash); font-size:.97rem; }
.bg-tint { background: var(--mist); }

/* ================================================================
   PAYMENT LOGOS
================================================================ */
#services:first-of-type {
  background: var(--mist);
  padding-top: 90px; padding-bottom: 40px;
}
.payment-logos {
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:20px; margin-top:28px;
}
.payment-logos img {
  max-width:110px; width:100%; height:auto; object-fit:contain;
  filter: grayscale(30%);
  transition: filter var(--ease), transform var(--ease);
  border-radius: var(--r-sm);
}
.payment-logos img:hover { filter:none; transform:scale(1.08); }

/* ================================================================
   ABOUT — Sideways strip
================================================================ */
.about-grid {
  display:grid; grid-template-columns: 0.95fr 1.05fr;
  gap:60px; align-items:center;
}
.about-art {
  position:relative; border-radius: var(--r-md);
  overflow:hidden; background: var(--ink-2); min-height:400px;
  display:flex; align-items:flex-end;
}
.about-art img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.6;
}
.about-art-pattern {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(13,13,13,.85) 0%, transparent 60%);
  z-index:1;
}
.about-art .tag {
  background: var(--orange); color: var(--white);
  font-family: var(--head); font-weight:800;
  padding: 14px 22px; font-size:.9rem;
  position:relative; z-index:2;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.about-copy h2 {
  font-family: var(--display);
  font-size: clamp(2rem,4.5vw,3.4rem);
  line-height:.92; letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:18px; color: var(--ink);
}
.about-copy p { color: var(--ash); margin-bottom:16px; font-size:.95rem; }

.about-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin-top:32px; background: var(--mist-2); border-radius: var(--r-md); overflow:hidden;
}
.about-stats .stat {
  background: var(--white); padding:22px 14px; text-align:center;
  border-right:2px solid var(--mist-2); transition: background var(--ease);
}
.about-stats .stat:last-child { border-right:none; }
.about-stats .stat:hover { background: var(--orange-tint); }
.about-stats .stat strong {
  display:block; font-family: var(--display);
  font-size:2.2rem; letter-spacing:.04em; color: var(--orange);
}
.about-stats .stat span {
  font-size:.72rem; color: var(--ash); font-family: var(--head);
  font-weight:600; text-transform:uppercase; letter-spacing:.1em;
}

/* ================================================================
   SERVICES — Horizontal card rail
================================================================ */
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background: var(--mist-2); border-radius: var(--r-md); overflow:hidden;
}
.service-card {
  background: var(--white); padding:36px 28px;
  position:relative; overflow:hidden;
  transition: background var(--ease);
}
.service-card::after {
  content:""; position:absolute; top:0; left:0; width:4px; bottom:0;
  background: var(--orange); transform:scaleY(0); transform-origin:bottom;
  transition: transform .35s var(--ease-out);
}
.service-card:hover::after { transform:scaleY(1); }
.service-card:hover { background: var(--mist); }

.service-icon {
  width:52px; height:52px;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; border-radius: var(--r-sm);
  transition: background var(--ease), transform var(--ease);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.service-card:hover .service-icon {
  background: var(--orange); transform:scale(1.05);
}
.service-card:hover .service-icon svg path,
.service-card:hover .service-icon svg rect,
.service-card:hover .service-icon svg circle { stroke:#fff; }

.service-card h3 {
  font-family: var(--head); font-size:1.08rem; font-weight:800;
  margin-bottom:12px; color: var(--ink);
}
.service-card p { color: var(--ash); font-size:.9rem; margin-bottom:20px; line-height:1.7; }
.service-card .more {
  font-family: var(--head); font-weight:700; font-size:.82rem; color: var(--orange);
  display:inline-flex; align-items:center; gap:6px;
  transition: gap var(--ease);
}
.service-card:hover .more { gap:12px; }
.service-card .ribbon {
  position:absolute; top:14px; right:-28px;
  background: var(--orange); color: var(--white);
  font-family: var(--head); font-weight:700; font-size:.62rem; letter-spacing:.08em;
  padding:4px 36px; transform:rotate(40deg); text-transform:uppercase;
}

/* ================================================================
   WHY CHOOSE US — Full dark panel
================================================================ */
.why-wrap {
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  border-radius: var(--r-md); overflow:hidden;
}
.why-left {
  background: var(--white); padding:60px 48px;
}
.why-left .eyebrow { color: var(--orange); }
.why-heading {
  font-family: var(--display);
  font-size: clamp(2rem,4vw,3.2rem);
  line-height:.92; letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:36px; color: var(--ink);
}
.why-list { display:flex; flex-direction:column; gap:0; }
.why-item {
  display:flex; gap:20px; align-items:flex-start;
  padding: 22px 0; border-bottom:1px solid var(--mist-2);
}
.why-item:last-child { border-bottom:none; }
.why-item .num {
  flex:none; width:44px; height:44px;
  font-family: var(--display); font-size:1.4rem; letter-spacing:.04em;
  color: var(--orange); display:flex; align-items:center; justify-content:center;
  border: 1.5px solid var(--mist-2); border-radius: var(--r-sm);
  flex-shrink:0;
}
.why-item h3 { font-family: var(--head); font-size:1rem; font-weight:800; margin-bottom:4px; }
.why-item p  { color: var(--ash); font-size:.87rem; line-height:1.65; }

.why-panel {
  background: var(--ink); color: var(--white);
  padding:60px 48px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.why-panel::before {
  content:"";
  position:absolute; top:0; right:0; width:300px; height:300px;
  background: radial-gradient(circle at 100% 0%, var(--orange-glow) 0%, transparent 70%);
}
.why-panel::after {
  content:"";
  position:absolute; bottom:0; left:0; width:200px; height:200px;
  background: radial-gradient(circle at 0% 100%, rgba(249,115,22,.08) 0%, transparent 70%);
}
.why-panel h3 {
  font-family: var(--display);
  font-size: clamp(1.8rem,3.5vw,2.6rem);
  letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:16px; position:relative; z-index:2;
}
.why-panel p {
  color: #8a8a8a; margin-bottom:28px; font-size:.92rem;
  line-height:1.75; position:relative; z-index:2;
}
.why-panel .quote-mark {
  font-family: var(--display); font-size:5rem; color: var(--orange);
  line-height:.6; display:block; margin-bottom:22px; position:relative; z-index:2;
}
.why-panel .person {
  font-family: var(--head); font-weight:800; font-size:.88rem;
  position:relative; z-index:2; color: var(--white);
}
.why-panel .person small {
  display:block; color: #606060; font-weight:400; font-size:.76rem; margin-top:3px;
}

/* ================================================================
   TESTIMONIALS — Staggered card wall
================================================================ */
.testi-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.testi-card {
  background: var(--white); border:1.5px solid var(--mist-2);
  border-radius: var(--r-md); padding:28px 24px;
  position:relative; overflow:hidden;
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.testi-card::before {
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--mist-2);
  transition: background var(--ease);
}
.testi-card:hover::before { background: var(--orange); }
.testi-card:hover {
  border-color: transparent;
  box-shadow: 0 16px 48px rgba(0,0,0,.1);
  transform: translateY(-4px);
}
.testi-stars {
  color: var(--orange); font-size:.85rem; margin-bottom:14px; letter-spacing:3px;
}
.testi-card p { color: #444; font-size:.91rem; margin-bottom:20px; line-height:1.75; }
.testi-person { display:flex; align-items:center; gap:12px; }
.testi-avatar {
  width:42px; height:42px;
  background: var(--ink);
  color: var(--orange); font-family: var(--display); font-weight:700;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; flex:none;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.testi-person strong { font-family: var(--head); font-size:.88rem; display:block; font-weight:800; }
.testi-person span { font-size:.74rem; color: var(--ash); }

/* ================================================================
   CONTACT
================================================================ */
.contact-wrap {
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
}
.contact-info h2 {
  font-family: var(--display);
  font-size: clamp(2rem,4.5vw,3.4rem);
  line-height:.92; letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:16px; color: var(--ink);
}
.contact-info p { color: var(--ash); margin-bottom:28px; line-height:1.75; }

.contact-list { list-style:none; display:flex; flex-direction:column; gap:16px; }
.contact-list li { display:flex; gap:14px; align-items:flex-start; }
.contact-list .ic {
  width:46px; height:46px;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center; flex:none;
  border-radius: var(--r-sm);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  transition: background var(--ease);
}
.contact-list li:hover .ic { background: var(--orange); }
.contact-list .ic svg path,
.contact-list .ic svg circle { stroke: var(--orange); }
.contact-list li:hover .ic svg path,
.contact-list li:hover .ic svg circle { stroke: var(--white); }
.contact-list strong { font-family: var(--head); font-weight:800; font-size:.88rem; display:block; }
.contact-list span, .contact-list a { color: var(--ash); font-size:.85rem; line-height:1.6; }
.contact-list a:hover { color: var(--orange); }

.area-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:24px; }
.area-tags span {
  background: var(--mist); border:1px solid var(--mist-2); border-radius: var(--r-sm);
  padding:5px 12px; font-size:.72rem; font-family: var(--head); font-weight:700;
  color: #555; letter-spacing:.04em;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.area-tags span:hover {
  background: var(--orange); border-color: var(--orange); color: var(--white);
}

.contact-form {
  background: var(--ink); border-radius: var(--r-md); padding:40px;
  position:relative; overflow:hidden;
}
.contact-form::before {
  content:""; position:absolute; top:0; right:0;
  width:200px; height:200px;
  background: radial-gradient(circle at 100% 0%, var(--orange-glow) 0%, transparent 70%);
}
.contact-form h3 {
  font-family: var(--display); font-size:1.8rem; letter-spacing:.04em;
  text-transform:uppercase; color: var(--white); margin-bottom:24px;
  position:relative; z-index:2;
}
.contact-form .form-grid { grid-template-columns:1fr 1fr; position:relative; z-index:2; }
.contact-form .field label { color: #8a8a8a; }
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea {
  background: var(--ink-2); border-color: var(--ink-3); color: var(--white);
}
.contact-form .field input:focus,
.contact-form .field select,
.contact-form .field textarea:focus {
  border-color: var(--orange); background: var(--ink-3);
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder { color: #555; }
.contact-form .btn { width:100%; margin-top:8px; position:relative; z-index:2; }

/* ================================================================
   FOOTER
================================================================ */
footer {
  background: var(--ink); color: var(--white); padding: 64px 0 28px;
  border-top: 1px solid var(--ink-3);
}
.footer-grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px; margin-bottom:44px;
}
.footer-logo {
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  font-family: var(--head); font-weight:800; font-size:1rem; color: var(--white);
}
.footer-logo .logo-mark { width:38px; height:38px; flex:none; }
.footer-logo .brand-13 { color: var(--orange); }
.footer-col p,
.footer-col li,
.footer-col a { color: #666; font-size:.83rem; line-height:1.8; }
.footer-col h4 {
  font-family: var(--display); font-size:1.1rem; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:18px; color: var(--white);
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-col ul a { transition:color var(--ease); }
.footer-col ul a:hover { color: var(--orange); }
.footer-bottom {
  border-top:1px solid var(--ink-3); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.75rem; color: #444;
}
.footer-bottom a { color: #444; transition:color var(--ease); }
.footer-bottom a:hover { color: var(--orange); }

/* ================================================================
   STICKY CALL BUTTON
================================================================ */
.sticky-call {
  display:none; position:fixed; bottom:22px; right:22px; z-index:999;
  background: var(--orange); color: var(--white);
  width:58px; height:58px; border-radius: var(--r-sm);
  align-items:center; justify-content:center;
  box-shadow: 0 8px 28px rgba(249,115,22,.5);
  animation: stickPulse 2.5s ease-in-out infinite;
  transition: transform var(--ease), box-shadow var(--ease);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.sticky-call:hover { transform:scale(1.08); box-shadow:0 12px 36px rgba(249,115,22,.65); }
@keyframes stickPulse {
  0%,100%{ box-shadow:0 8px 28px rgba(249,115,22,.5); }
  50%{ box-shadow:0 8px 28px rgba(249,115,22,.2), 0 0 0 12px rgba(249,115,22,.06); }
}

/* ================================================================
   MODAL
================================================================ */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.modal-overlay.show { opacity:1; visibility:visible; }
body.modal-open { overflow:hidden; }
.modal-card {
  background: var(--white); border-radius: var(--r-md); max-width:420px; width:100%;
  padding:40px 32px 30px; text-align:center; position:relative;
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
  transform: translateY(24px) scale(.96); opacity:0;
  transition: transform .4s var(--ease-spring), opacity .32s ease;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.modal-overlay.show .modal-card { transform:none; opacity:1; }
.modal-card::before {
  content:""; position:absolute; top:0; left:28px; right:28px; height:4px;
  background: var(--orange);
}
.modal-card.error::before { background: var(--red); }
.modal-icon {
  width:66px; height:66px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:10px auto 18px; background: var(--orange-tint);
}
.modal-card.error .modal-icon { background: rgba(220,38,38,.1); }
.modal-icon svg { width:32px; height:32px; }
.modal-card h3 { font-family: var(--head); font-weight:800; font-size:1.2rem; margin-bottom:10px; }
.modal-card p  { color: var(--ash); font-size:.9rem; margin-bottom:22px; }
.modal-card .btn { padding:12px 30px; }
.modal-close {
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius: var(--r-sm);
  border:none; background: var(--mist); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--ease);
}
.modal-close:hover { background: var(--mist-2); }
.modal-progress {
  position:absolute; bottom:0; left:0; height:3px;
  background: var(--orange); border-radius:0;
  width:100%; transform-origin:left; animation:none;
}
.modal-card.error .modal-progress { background: var(--red); }
.modal-overlay.show .modal-progress.run {
  animation: shrinkBar 4.5s linear forwards;
}
@keyframes shrinkBar { from{transform:scaleX(1);} to{transform:scaleX(0);} }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width:457px){
  .hidemobile { display:none; }
}

@media (max-width:980px){
  .header-cta .phone-link { display:none; }
  .nav-toggle { display:block; }

  nav.main-nav {
    position:fixed; top:0; right:0;
    height:100vh; width:min(80vw, 300px);
    background: var(--ink-2);
    display:flex; flex-direction:column; justify-content:center;
    padding:40px 32px;
    box-shadow: -24px 0 60px rgba(0,0,0,.5);
    transform: translateX(110%);
    transition: transform .42s cubic-bezier(.4,0,.2,1);
    z-index:1100;
  }
  nav.main-nav.open { transform:translateX(0); }
  nav.main-nav ul { flex-direction:column; gap:6px; }
  nav.main-nav a { font-size:1.1rem; color: var(--white); padding:10px 14px; }

  .container.hero-grid { grid-template-columns:1fr; gap:40px; padding-bottom:180px; }
  .hero::after { height:100px; }

  .about-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr 1fr; gap:2px; }
  .testi-grid { grid-template-columns:1fr 1fr; }
  .why-wrap { grid-template-columns:1fr; }
  .why-left, .why-panel { padding:44px 32px; }
  .contact-wrap { grid-template-columns:1fr; gap:40px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .sticky-call { display:flex; }
  .about-stats { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:640px){
  .header-inner { padding:0 18px; }
  .header-cta { gap:8px; }
  .header-cta .btn { padding:10px 16px; font-size:.8rem; }
  .hero { min-height:auto; }
  .container.hero-grid { padding-top:108px; padding-bottom:160px; }
  .form-grid, .contact-form .form-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .about-stats { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .logo-text small { display:none; }
  .payment-logos img { max-width:80px; }
  .payment-logos { gap:14px; }
  .booking-card { padding:22px 18px; }
  .contact-form { padding:28px 22px; }
  .why-left, .why-panel { padding:36px 22px; }
}