/* ── Fonts (self-hosted, latin subset) ───────────────────
   Variable fonts (Archivo, Big Shoulders Display) each ship as one
   file covering their full weight range — the browser picks the
   named instance that matches the declared font-weight. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/big-shoulders-display.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Allerta Stencil';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/allerta-stencil.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --paper:   #efe6d3;
  --paper2:  #e6d9bd;
  --paper3:  #eee2c8;
  --ink:     #1c170f;
  --ink2:    #241d13;
  --rust:    #b5502c;
  --rust2:   #d97a45;
  --muted:   #6f6350;
  --line:    rgba(28,23,15,.18);
  --line2:   rgba(239,230,211,.16);
  --radius:  3px;
  --transition: .3s cubic-bezier(.4,0,.2,1);
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Archivo', sans-serif;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  counter-reset: ticket-num;
}

/* ── Ticket-stub buttons (signature component) ──────────
   Every CTA reads as a torn stub ripped off a work-order
   pad: a jagged perforation edge (clip-path), a stamped
   mono ticket number, and a hover "peel off the page"
   lift that casts a hard, unblurred ink shadow. */
.btn-primary, .btn-outline, .nav-cta, .m-cta {
  clip-path: polygon(7px 0%,100% 0%,100% 100%,7px 100%,7px 91.6%,0% 83.3%,7px 75%,0% 66.6%,7px 58.3%,0% 50%,7px 41.6%,0% 33.3%,7px 25%,0% 16.6%,7px 8.3%,7px 0%);
  transform: rotate(-1.4deg);
  transition: transform .25s cubic-bezier(.4,0,.2,1), background .25s ease, color .25s ease, border-color .25s ease, filter .25s ease;
}
.btn-primary:hover, .btn-outline:hover, .nav-cta:hover, .m-cta:hover {
  transform: rotate(0deg) translate(-4px,-4px);
  box-shadow: 4px 4px 0 currentColor;
}
.btn-primary:active, .btn-outline:active, .nav-cta:active, .m-cta:active {
  transform: rotate(0deg) translate(1px,1px) scale(.98);
  box-shadow: none;
}

/* ── Custom cursor: crosshair mark / hammer on anything clickable ──
   Static url() cursor is the no-JS fallback. Once script runs (fine
   pointer, motion allowed) html.cc-active hides it and a DOM cursor
   (#cc-cursor, built below) takes over — same two marks, but now the
   hammer actually swings and strikes on click. See the script at the
   bottom of the page. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='%23b5502c' stroke-width='1.6' stroke-linecap='round'%3E%3Cline x1='13' y1='2' x2='13' y2='9'/%3E%3Cline x1='13' y1='17' x2='13' y2='24'/%3E%3Cline x1='2' y1='13' x2='9' y2='13'/%3E%3Cline x1='17' y1='13' x2='24' y2='13'/%3E%3C/g%3E%3Ccircle cx='13' cy='13' r='2.2' fill='%23b5502c'/%3E%3C/svg%3E") 13 13, crosshair;
  }
  a, button, .lang-btn, .job-row, .fab, .hamburger,
  input, select, textarea, [role="button"], .review-card, .info-block {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg transform='rotate(35 8 24)'%3E%3Cline x1='8' y1='24' x2='20' y2='12' stroke='%231c170f' stroke-width='3.4' stroke-linecap='round'/%3E%3Cline x1='8' y1='24' x2='20' y2='12' stroke='%23b5502c' stroke-width='2.2' stroke-linecap='round'/%3E%3Crect x='15' y='6' width='11' height='4.6' rx='1' transform='rotate(48 20.5 8.3)' fill='%23b5502c' stroke='%231c170f' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") 8 26, pointer;
  }
  html.cc-active body,
  html.cc-active a, html.cc-active button, html.cc-active .lang-btn,
  html.cc-active .job-row, html.cc-active .fab, html.cc-active .hamburger,
  html.cc-active input, html.cc-active select, html.cc-active textarea,
  html.cc-active [role="button"], html.cc-active .review-card, html.cc-active .info-block {
    cursor: none;
  }
}

/* ── DOM cursor (desktop): crosshair mark that swaps for a hammer over
   anything clickable, and actually swings + strikes on click ── */
#cc-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; opacity: 0;
}
#cc-cursor .cc-mark, #cc-cursor .cc-hammer {
  position: absolute; top: 0; left: 0; transform: translate(-50%,-50%);
  transition: opacity .16s ease, transform .16s cubic-bezier(.4,0,.2,1);
}
#cc-cursor .cc-hammer {
  opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(.65);
}
#cc-cursor.cc-hover .cc-mark { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
#cc-cursor.cc-hover .cc-hammer { opacity: 1; transform: translate(-50%,-50%) rotate(-26deg) scale(1); }
#cc-cursor.cc-swing .cc-hammer { animation: ccSwing .32s cubic-bezier(.3,0,.25,1) 1; }
@keyframes ccSwing {
  0%   { transform: translate(-50%,-50%) rotate(-26deg) scale(1); }
  52%  { transform: translate(-50%,-50%) rotate(26deg) scale(1.04); }
  100% { transform: translate(-50%,-50%) rotate(-26deg) scale(1); }
}

/* ── Strike impact: hammer hit (desktop) / tap echo (mobile) ──
   A hard-edged ink burst + flying chips — consistent with the
   system's stamp/tear-lift shadow vocabulary, never a soft blur. */
.cc-impact { position: fixed; z-index: 9998; pointer-events: none; }
.cc-impact .cc-ring {
  position: absolute; top: 0; left: 0; width: 30px; height: 30px;
  margin: -15px 0 0 -15px; border-radius: 50%;
  border: 1.5px solid #b5502c;
  animation: ccRing .46s cubic-bezier(.2,.75,.3,1) forwards;
}
.cc-impact.cc-soft .cc-ring { border-color: #6f6350; }
.cc-impact .cc-chip {
  position: absolute; top: 0; left: 0; width: 5px; height: 6px;
  margin: -3px 0 0 -2.5px; background: #1c170f;
  clip-path: polygon(0 0,100% 0,60% 100%);
  animation: ccChip .46s cubic-bezier(.25,.7,.35,1) forwards;
}
/* transform + opacity only (no width/height/margin animation) to stay off the main thread */
@keyframes ccRing { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ccChip { to { transform: translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* Struck element: absorbs the hit, then springs back to its own
   resting transform (torn-stub rotation, row nudge, etc.) — never
   ends on a hardcoded transform, so it stays true to each component. */
.cc-struck { animation: ccHit .22s cubic-bezier(.3,0,.25,1); }
@keyframes ccHit {
  0%  { filter: none; }
  30% { filter: brightness(.93); transform: translate(1px,1px) scale(.97); }
  100%{ filter: none; }
}

/* ── Mobile swipe cue: a brief directional chevron where the swipe
   happened — the touch-side reaction to a vertical page swipe ── */
.cc-swipe {
  position: fixed; z-index: 9998; pointer-events: none;
  transform: translate(-50%,-50%); opacity: 0;
  animation: ccSwipeUp .55s ease forwards;
}
.cc-swipe-down { animation-name: ccSwipeDown; }
@keyframes ccSwipeUp {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
  30%  { opacity: .9; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1) translateY(-12px); }
}
@keyframes ccSwipeDown {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
  30%  { opacity: .9; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1) translateY(12px); }
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
section { padding: 100px 20px; scroll-margin-top: 88px; }
h1, h2, h3 { font-family: 'Big Shoulders Display', sans-serif; }

/* ── Scrollbar (brand, not browser default) ──────────── */
html { scrollbar-width: thin; scrollbar-color: var(--rust) var(--paper2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper2); }
::-webkit-scrollbar-thumb {
  background: var(--rust);
  border-radius: 0;
  border: 2px solid var(--paper2);
}
::-webkit-scrollbar-thumb:hover { background: var(--rust2); }
::-webkit-scrollbar-corner { background: var(--paper2); }

.quote-modal { scrollbar-color: var(--rust) var(--paper3); }
.quote-modal::-webkit-scrollbar-track { background: var(--paper3); }
.quote-modal::-webkit-scrollbar-thumb { border-color: var(--paper3); }

/* ── Lang Toggle ─────────────────────────────────────── */
#lang-toggle { display: flex; align-items: center; gap: 4px; }
.lang-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 5px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .06em;
}
.lang-btn.active, .lang-btn:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ── Navbar ──────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), padding var(--transition), border-color var(--transition);
}
nav.scrolled {
  background: rgba(239,230,211,.94);
  backdrop-filter: blur(10px);
  padding: 14px 40px;
  border-bottom: 1px solid var(--line);
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.28rem;
  text-transform: uppercase;
}
.nav-logo .logo-icon { width: 38px; height: 38px; }

/* ── Brand wordmark (signature component) ────────────────
   "Casa em Ordem" is set in Allerta Stencil, not the section
   Big Shoulders Display headline face — a stencil-cut mark like
   lettering stamped on a job crate or hoarding board, reserved
   for the logotype only so it reads as a mark, not a fourth
   type voice competing with headline/body/label. */
.brand-word {
  font-family: 'Allerta Stencil', 'Big Shoulders Display', sans-serif;
  font-weight: 400; letter-spacing: .02em;
}

/* ── Animated logo mark ────────────────────────────────
   Blueprint-style draw-in, then a hammer works the roofline
   on a slow loop — quicker on hover. No glow/orb. */
.logo-mark { overflow: visible; }
.logo-mark path {
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: logoDraw .9s cubic-bezier(.65,0,.35,1) forwards;
}
.logo-mark .roof   { animation-delay: .05s; }
.logo-mark .walls  { animation-delay: .3s; }
.logo-mark .hammer-group {
  transform-box: view-box; transform-origin: 38px 7px;
  animation: hammerSwing 4.2s cubic-bezier(.5,0,.2,1) 1.05s infinite;
}
.logo-mark .impact {
  transform-box: view-box; transform-origin: 24px 10.5px;
  opacity: 0;
  animation: hammerImpact 4.2s cubic-bezier(.5,0,.2,1) 1.05s infinite;
}
.nav-logo:hover .hammer-group, .footer-logo:hover .hammer-group,
.nav-logo:hover .impact, .footer-logo:hover .impact { animation-duration: 1s; }
@keyframes logoDraw { to { stroke-dashoffset: 0; } }
@keyframes hammerSwing {
  0%, 8%    { transform: rotate(0deg); }
  28%       { transform: rotate(22deg); }
  46%       { transform: rotate(25deg); }
  64%       { transform: rotate(-44deg); }
  68%       { transform: rotate(-37deg); }
  74%, 100% { transform: rotate(0deg); }
}
@keyframes hammerImpact {
  0%, 61% { opacity: 0; transform: scale(.3) rotate(0deg); }
  63%     { opacity: 1; transform: scale(1) rotate(8deg); }
  65%     { opacity: 1; transform: scale(1.5) rotate(18deg); }
  74%     { opacity: 0; transform: scale(2) rotate(28deg); }
  100%    { opacity: 0; transform: scale(.3) rotate(0deg); }
}
.nav-links { display: flex; gap: 34px; list-style: none; align-items: center; }
.nav-links a {
  font-size: .84rem; font-weight: 600;
  color: var(--ink);
  transition: color var(--transition);
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 100%; height: 2px; background: var(--rust);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.nav-links a:hover { color: var(--rust); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  background: var(--rust); color: var(--paper) !important;
  padding: 10px 20px;
  font-weight: 700 !important; font-size: .82rem !important;
}
.nav-cta:hover { background: var(--ink) !important; }
.nav-cta::after { display: none !important; }

.nav-right { display: flex; align-items: center; gap: 14px; }

/* ── Hamburger ───────────────────────────────────────── */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 6px; z-index: 1200;
}
.hamburger span {
  display: block; width: 26px; height: 2px;
  background: var(--ink);
  transition: all .35s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; position: fixed; inset: 0;
  background: var(--paper);
  z-index: 1100; flex-direction: column;
  align-items: center; justify-content: center; gap: 32px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu-close {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: calc(20px + env(safe-area-inset-left, 0px));
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ink);
  transition: color var(--transition), transform var(--transition);
}
.mobile-menu-close svg { width: 22px; height: 22px; }
.mobile-menu-close:hover { color: var(--rust); transform: rotate(90deg); }
.mobile-menu a {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 2.1rem; font-weight: 800; text-transform: uppercase;
  color: var(--ink);
  transition: color var(--transition);
}
.mobile-menu a:hover { color: var(--rust); }
.mobile-menu .m-cta {
  background: var(--rust); color: var(--paper) !important;
  padding: 14px 40px; font-size: 1.3rem !important;
}

/* ── Hero ────────────────────────────────────────────── */
#hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 140px 40px 80px;
  position: relative; overflow: hidden;
}
.hero-grid {
  position: absolute; inset: -48px; z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, black, transparent 85%);
  opacity: .5;
  animation: gridDrift 34s linear infinite;
}
@keyframes gridDrift { from { background-position: 0 0; } to { background-position: 48px 48px; } }
.hero-content {
  position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center;
}
.hero-left { padding-top: 30px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  padding: 6px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem; font-weight: 600; color: var(--rust);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 28px;
  animation: fadeUp .8s ease both;
}
.hero-badge .dot {
  width: 6px; height: 6px; background: var(--rust);
  animation: pulse 2s ease infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

.hero-title {
  font-size: clamp(3rem, 7.5vw, 6.4rem);
  font-weight: 900; line-height: .95; letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink); margin-bottom: 26px;
  animation: fadeUp .8s .15s ease both;
}
.hero-title span { color: var(--rust); }
.hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--muted); max-width: 480px;
  margin-bottom: 40px; line-height: 1.65;
  animation: fadeUp .8s .28s ease both;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp .8s .4s ease both; }
.btn-primary, .btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  position: relative;
  padding: 16px 32px 16px 58px;
  border-radius: var(--radius);
  font-size: .95rem;
  counter-increment: ticket-num;
}
.btn-primary::before, .btn-outline::before {
  content: "Nº" counter(ticket-num, decimal-leading-zero);
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: .62rem; font-weight: 600;
  letter-spacing: .03em; padding-right: 11px;
  border-right: 1px dashed currentColor; opacity: .6;
}
.btn-primary { background: var(--rust); color: var(--paper); font-weight: 700; }
.btn-primary:hover { background: var(--ink); }
.btn-outline {
  background: transparent; color: var(--ink); font-weight: 600;
  border: 1.5px solid var(--ink);
}
.btn-outline:hover { border-color: var(--rust); color: var(--rust); }

/* ── Hero ticket stub ──────────────────────────────────── */
.hero-ticket {
  border: 1px dashed var(--ink);
  background: var(--paper3);
  padding: 28px 26px;
  transform: rotate(1deg);
  animation: fadeUp .8s .55s ease both;
}
.ticket-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.ticket-row:last-child { border-bottom: none; }
.ticket-num {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 2.2rem; font-weight: 900; color: var(--rust);
  font-variant-numeric: tabular-nums;
}
.ticket-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem; color: var(--muted); text-align: right;
  letter-spacing: .02em; max-width: 130px; line-height: 1.4;
}
.scroll-hint {
  position: absolute; bottom: 30px; left: 40px;
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  animation: fadeUp 1s .7s ease both;
}
.scroll-hint .arrow {
  width: 40px; height: 1px; background: linear-gradient(90deg, var(--rust), transparent);
}

/* ── Services ────────────────────────────────────────── */
#services {
  background-color: var(--paper2);
  background-image: radial-gradient(var(--line) 1px, transparent 1.4px);
  background-size: 22px 22px;
  animation: dotDrift 50s linear infinite;
  position: relative;
}
#services::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--rust) 0 8px, transparent 8px 18px);
  opacity: .45;
}
@keyframes dotDrift { from { background-position: 0 0; } to { background-position: 22px 22px; } }
.services-head {
  max-width: 1100px; margin: 0 auto 56px;
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 20px;
}
.section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .76rem; font-weight: 600;
  color: var(--rust); letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 12px;
}
.section-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900; color: var(--ink); text-transform: uppercase;
  line-height: 1;
}
.section-sub {
  color: var(--muted);
  font-size: .98rem; max-width: 380px; line-height: 1.6;
}
.job-list { max-width: 1100px; margin: 0 auto; border-top: 1px solid var(--line); }
.job-row {
  display: grid; grid-template-columns: 70px 56px 1fr auto;
  gap: 26px; align-items: center;
  padding: 30px 10px;
  border-bottom: 1px solid var(--line);
  transition: background var(--transition), padding-left var(--transition);
}
.job-row:nth-child(even) { padding-left: 40px; }
.job-row:hover { background: var(--paper3); padding-left: 30px; }
.job-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .95rem; color: var(--muted); font-weight: 600;
}
.job-icon { width: 32px; height: 32px; color: var(--rust); flex-shrink: 0; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.job-icon svg { width: 100%; height: 100%; }
.job-row:hover .job-icon { transform: scale(1.15) rotate(-6deg); }
.job-name { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.job-desc { font-size: .9rem; color: var(--muted); line-height: 1.6; max-width: 480px; }
.job-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  color: var(--rust); border: 1px solid var(--rust);
  padding: 5px 12px; white-space: nowrap; text-transform: uppercase;
}
@media (max-width: 700px) {
  .job-row { grid-template-columns: 44px 34px 1fr; }
  .job-tag { display: none; }
  .job-row:nth-child(even) { padding-left: 10px; }
}

/* ── About ───────────────────────────────────────────── */
#about {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 64px);
}
.about-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: 70px; align-items: center;
}
.about-visual { position: relative; }
.about-img-wrap {
  border: 1px solid var(--line);
  aspect-ratio: 4/3;
  background-color: var(--paper3);
  background-image: radial-gradient(var(--line) 1px, transparent 1.4px);
  background-size: 20px 20px;
  animation: dotDrift 70s linear infinite;
  overflow: hidden;
}
.about-illustration { width: 100%; height: 100%; display: block; }
.about-badge-float {
  position: absolute; bottom: -26px; right: -26px;
  background: var(--paper); color: var(--ink);
  padding: 20px 26px; text-align: center;
  border: 1.5px dashed var(--rust);
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(-4deg);
}
.about-badge-float .badge-stars { position: relative; display: inline-block; font-size: .92rem; letter-spacing: 2px; margin-bottom: 6px; color: var(--line); }
.about-badge-float .badge-stars .stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--rust); }
.about-badge-float .num { font-family: 'Big Shoulders Display', sans-serif; font-size: 2.6rem; font-weight: 900; line-height: 1; }
.about-badge-float .label { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; font-weight: 600; }
.about-badge-float .label .google-logo { font-size: .82rem; }
.about-text h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 900; color: var(--ink); margin-bottom: 24px;
  text-transform: uppercase; line-height: 1.02;
}
.about-text h2 span { color: var(--rust); }
.about-text p { color: var(--muted); line-height: 1.75; margin-bottom: 20px; font-size: .97rem; }
.about-checks { list-style: none; display: flex; flex-direction: column; margin-bottom: 36px; border-top: 1px solid var(--line); }
.about-checks li {
  display: flex; align-items: center; gap: 16px;
  font-size: .93rem; color: var(--ink);
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.check-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem; color: var(--rust); font-weight: 700;
  flex-shrink: 0;
}

/* ── Reviews ─────────────────────────────────────────── */
#reviews {
  background: var(--paper2);
  border-top: 2px dashed var(--line);
  border-bottom: 2px dashed var(--line);
}
.reviews-header { text-align: center; margin-bottom: 56px; }
.reviews-header .section-title { text-align: center; }
.google-rating {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line);
  padding: 10px 22px; margin-top: 22px;
}
.google-logo { font-weight: 700; font-size: 1rem; }
.google-logo .g-b { color: #4285f4; }
.google-logo .g-r { color: #ea4335; }
.google-logo .g-y { color: #b58a00; }
.google-logo .g-g { color: #34a853; }
.stars { color: var(--rust); font-size: 1rem; letter-spacing: 1px; }
.stars-rating { position: relative; display: inline-block; font-size: 1rem; letter-spacing: 1px; color: var(--line); }
.stars-rating .stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--rust); white-space: nowrap; }
.rating-val { font-weight: 700; color: var(--ink); }
.reviews-swipe-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto 26px; font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.reviews-swipe-hint svg { color: var(--rust); animation: swipeHintNudge 1.8s ease-in-out infinite; }
@keyframes swipeHintNudge {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}
.reviews-slider { max-width: 620px; margin: 0 auto; }
.reviews-track-wrap {
  overflow: hidden; position: relative;
  touch-action: pan-y;
  cursor: grab;
}
.reviews-track-wrap:active { cursor: grabbing; }
.reviews-track {
  display: flex;
  width: 100%;
  will-change: transform;
}
.review-slide {
  flex: 0 0 100%;
  width: 100%;
  padding: 6px 4px 4px;
  box-sizing: border-box;
}
.review-card {
  background: var(--paper); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  padding: 30px 28px;
  width: 100%; max-width: 480px; margin: 0 auto;
  box-sizing: border-box;
  transition: border-color var(--transition);
  user-select: none;
}
.review-card:hover { border-color: var(--rust); }

/* ── Pagination dots — read as sprocket-hole perforations on a ticket
   strip: hollow hairline circles, the active one punched solid rust ── */
.reviews-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-top: 34px;
}
.review-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--line); padding: 0;
  cursor: pointer; transform-origin: center;
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s ease, border-color .3s ease;
}
.review-dot:hover { border-color: var(--muted); }
.review-dot.active { background: var(--rust); border-color: var(--rust); transform: scale(1.4); }
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.reviewer-avatar {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800; font-size: 1.1rem; flex-shrink: 0;
}
.reviewer-name { font-weight: 700; font-size: .92rem; color: var(--ink); }
.review-date { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.review-stars { margin-bottom: 12px; font-size: .85rem; color: var(--rust); }
.review-text { font-size: .87rem; color: var(--ink); opacity: .8; line-height: 1.6; }

/* ── Location ────────────────────────────────────────── */
#location {
  background-color: var(--paper);
  background-image: repeating-radial-gradient(circle at 92% 8%, transparent 0 38px, var(--line) 38px 39px, transparent 39px 76px);
}
.location-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 60px; align-items: start;
}
.location-info { padding-top: 10px; }
.info-block { display: flex; gap: 16px; margin-bottom: 26px; align-items: flex-start; }
.info-icon {
  width: 22px; height: 22px; color: var(--rust); flex-shrink: 0; margin-top: 2px;
  transition: transform .3s ease, color .3s ease;
}
.info-icon svg { width: 100%; height: 100%; }
.info-block:hover .info-icon { transform: translateY(-3px); color: var(--ink); }
.info-text strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 4px; }
.info-text span { color: var(--muted); font-size: .9rem; }
.map-wrap { border: 1px solid var(--line); }
.map-wrap iframe { width: 100%; height: 420px; display: block; filter: grayscale(.55) contrast(1.03); }

/* ── Contact CTA ─────────────────────────────────────── */
#cta {
  background-color: var(--ink2);
  background-image:
    linear-gradient(var(--line2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line2) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: gridDriftDark 40s linear infinite;
  border-top: 1px solid var(--line2);
  position: relative;
}
@keyframes gridDriftDark { from { background-position: 0 0; } to { background-position: -56px 56px; } }
.cta-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr .7fr;
  gap: 60px; align-items: center;
}
#cta h2 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  font-weight: 900; color: var(--paper); margin-bottom: 18px;
  text-transform: uppercase; line-height: 1;
}
#cta h2 span { color: var(--rust2); }
#cta p { color: rgba(239,230,211,.65); max-width: 480px; margin-bottom: 40px; line-height: 1.7; }
.cta-btns { display: flex; gap: 16px; flex-wrap: wrap; }
#cta .btn-outline { color: var(--paper); border-color: rgba(239,230,211,.35); }
#cta .btn-outline:hover { border-color: var(--rust2); color: var(--rust2); }
.cta-seal {
  justify-self: end;
  background: transparent; color: var(--paper);
  padding: 22px 28px; text-align: center;
  border: 1.5px dashed var(--rust2);
  transform: rotate(-4deg);
  animation: fadeUp .8s .2s ease both;
}
.cta-seal .badge-stars { position: relative; display: inline-block; font-size: .92rem; letter-spacing: 2px; margin-bottom: 6px; color: rgba(239,230,211,.25); }
.cta-seal .badge-stars .stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--rust2); }
.cta-seal .num { font-family: 'Big Shoulders Display', sans-serif; font-size: 2.6rem; font-weight: 900; line-height: 1; }
.cta-seal .label { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; font-weight: 600; }

/* ── Footer ──────────────────────────────────────────── */
footer {
  background-color: var(--ink);
  background-image: repeating-linear-gradient(-45deg, var(--line2) 0 1px, transparent 1px 64px);
  padding: 50px 30px 30px;
}
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 40px;
  justify-content: space-between; align-items: flex-start;
}
.footer-brand { max-width: 280px; }
.footer-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800; font-size: 1.15rem; margin-bottom: 14px;
  color: var(--paper); text-transform: uppercase;
}
.footer-logo .logo-icon { width: 32px; height: 32px; }
.footer-brand p { color: rgba(239,230,211,.55); font-size: .85rem; line-height: 1.65; }
.footer-links h4 { color: var(--paper); font-weight: 700; margin-bottom: 16px; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-links li a { display: flex; align-items: center; gap: 10px; color: rgba(239,230,211,.55); font-size: .85rem; transition: color var(--transition); }
.footer-links li a svg { width: 15px; height: 15px; flex-shrink: 0; }
.footer-links li a:hover { color: var(--rust2); }
.footer-bottom {
  max-width: 1100px; margin: 40px auto 0;
  padding-top: 22px; border-top: 1px solid var(--line2);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.footer-bottom p { color: rgba(239,230,211,.45); font-size: .78rem; }
.footer-bottom .webeyah-credit a { color: var(--rust2); font-weight: 600; text-decoration: none; }
.footer-bottom .webeyah-credit a:hover { text-decoration: underline; }

/* ── Floating Buttons ────────────────────────────────── */
.floating-btns {
  position: fixed; bottom: 28px; right: 24px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 900;
  opacity: .8;
  transition: opacity var(--transition);
}
.floating-btns:hover, .floating-btns:focus-within { opacity: 1; }
/* Docked above the footer (position swapped to absolute via JS once
   the footer scrolls into view) so the cluster never sits on top of
   the footer's contact links. Laid out as a row instead of a column
   so its short, shallow footprint clears the space above the footer
   regardless of how much whitespace that section happens to have. */
.floating-btns.docked { position: absolute; bottom: auto; flex-direction: row; }
.fab {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; cursor: pointer;
  box-shadow: 0 6px 20px rgba(28,23,15,.25);
  transition: all var(--transition);
  text-decoration: none; border: none;
  position: relative;
}
.fab:hover { transform: translateY(-3px); }
.fab-tooltip {
  position: absolute; right: calc(100% + 14px);
  background: var(--ink);
  color: var(--paper); font-size: .75rem; font-weight: 500;
  padding: 6px 12px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s; transform: translateX(4px);
}
.fab:hover .fab-tooltip { opacity: 1; transform: translateX(0); }
.fab-wp { background: #25d366; color: white; }
.fab-wp::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366;
  animation: fabPing 2.6s cubic-bezier(.3,.6,.4,1) infinite;
}
@keyframes fabPing {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.7); opacity: 0; }
}
.fab-tel { background: var(--rust); color: var(--paper); }
.fab-tel:hover { background: var(--ink); }
.fab-top {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.fab-top.visible { opacity: 1; pointer-events: all; }
.fab-top:hover { background: var(--ink); color: var(--paper); }

/* ── Animations ──────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }
.reveal-delay-4 { transition-delay: .48s; }
.reveal-delay-5 { transition-delay: .60s; }

/* Job manifest rows slide in from the margin, like items being
   entered on a ledger, instead of the page-wide fade-up. */
.job-row.reveal { transform: translateX(-32px); }
.job-row.reveal.visible { transform: translateX(0); }

/* ── Lang Loader ─────────────────────────────────────── */
#lang-loader {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(28,23,15,.9);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
#lang-loader.visible { opacity: 1; pointer-events: all; }
.loader-logo-wrap { width: 70px; height: 70px; position: relative; }
.loader-svg { width: 100%; height: 100%; animation: loaderSpin 1s linear infinite; }
@keyframes loaderSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Quote Request Modal (signature "work order" form) ──────────
   Reads as the ticket itself being filled out: dashed perforation
   top edge, stamped ticket number, mono step tabs, torn-stub actions
   shared with the rest of the button system. */
.quote-overlay {
  position: fixed; inset: 0; z-index: 2500;
  background: rgba(28,23,15,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.quote-overlay.visible { opacity: 1; pointer-events: all; }
.quote-modal {
  width: min(94vw, 560px); max-height: 88vh; overflow-y: auto;
  background: var(--paper3);
  border: 1px solid var(--line);
  border-top: 3px dashed var(--rust);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  padding: 40px 34px 30px;
  position: relative;
  transform: scale(.95) translateY(14px);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.quote-overlay.visible .quote-modal { transform: scale(1) translateY(0); }
.quote-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; background: none; border: none;
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s ease, transform .2s ease;
}
.quote-close svg { width: 18px; height: 18px; }
.quote-close:hover { color: var(--rust); transform: rotate(90deg); }

.quote-head { margin-bottom: 22px; padding-right: 30px; }
.quote-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rust); margin-bottom: 6px;
}
.quote-head h3 {
  font-size: clamp(1.4rem, 4vw, 1.8rem); font-weight: 900;
  text-transform: uppercase; line-height: 1.05; color: var(--ink);
}
.quote-ticket-no {
  display: inline-block; margin-top: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: .74rem;
  color: var(--muted); letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.quote-steps {
  display: flex; gap: 6px; margin-bottom: 26px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.quote-step-dot {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
  font-family: 'IBM Plex Mono', monospace;
  opacity: .4; cursor: default; transition: opacity .2s ease;
  background: none; border: none; text-align: left;
}
.quote-step-dot em { font-style: normal; font-size: .68rem; color: var(--rust); }
.quote-step-dot b { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.quote-step-dot.active, .quote-step-dot.done { opacity: 1; }
.quote-step-dot.done { cursor: pointer; }

.quote-q {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 1.3rem; font-weight: 800; text-transform: uppercase;
  color: var(--ink); margin-bottom: 18px;
}
.quote-panel[hidden] { display: none; }

.quote-services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quote-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.quote-chip:hover { border-color: var(--muted); }
.quote-chip:has(input:checked) { border-color: var(--rust); background: var(--paper3); }
.quote-chip input { width: 17px; height: 17px; accent-color: var(--rust); flex-shrink: 0; }
.chip-num {
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem;
  color: var(--muted); flex-shrink: 0;
}
.quote-chip:has(input:checked) .chip-num { color: var(--rust); }
.chip-label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.quote-hint {
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  color: var(--muted); margin-top: 14px;
}

.quote-field { display: block; margin-bottom: 18px; }
.quote-field > span {
  display: inline; font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.quote-field small { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: var(--muted); }
.quote-req { color: var(--rust); font-style: normal; }
.quote-field input, .quote-field select, .quote-field textarea {
  display: block; width: 100%; margin-top: 8px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
  font-family: 'Archivo', sans-serif; font-size: .93rem; color: var(--ink);
  transition: border-color .2s ease;
}
.quote-field textarea { resize: vertical; min-height: 74px; }
.quote-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231c170f' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 34px;
}
.quote-field input:focus, .quote-field select:focus, .quote-field textarea:focus {
  outline: none; border-color: var(--rust);
}
.quote-field input:focus-visible, .quote-field select:focus-visible, .quote-field textarea:focus-visible,
.quote-chip input:focus-visible, .quote-close:focus-visible, .quote-step-dot.done:focus-visible {
  outline: 2px solid var(--rust); outline-offset: 2px;
}

.quote-summary {
  margin-top: 22px; padding: 16px 18px;
  border: 1px dashed var(--ink); background: var(--paper2);
}
.quote-summary p { font-size: .82rem; color: var(--ink); line-height: 1.6; }
.quote-summary p:not(:last-child) { margin-bottom: 4px; }
.quote-summary strong { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.quote-actions {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 28px;
}
.quote-actions .btn-outline, .quote-actions .btn-primary {
  padding: 14px 26px 14px 50px; font-size: .88rem;
}
.quote-actions button[hidden] { display: none; }
.quote-actions button[disabled] { opacity: .4; pointer-events: none; }
#quoteNext, #quoteSubmit { margin-left: auto; }

@media (max-width: 560px) {
  .quote-modal { padding: 34px 22px 24px; }
  .quote-services { grid-template-columns: 1fr; }
  .quote-step-dot b { display: none; }
}

/* ── Reduced motion: every animation on the site gets a static/instant
   alternative here, in one place ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .logo-mark path { stroke-dashoffset: 0; }
  .hero-badge .dot { opacity: 1; }
  .reveal { transition: opacity .2s ease !important; transform: none !important; }
  .quote-modal, .quote-overlay { transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  nav { padding: 16px 22px; }
  nav.scrolled { padding: 12px 22px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }
  .hero-content { grid-template-columns: 1fr; }
  .hero-ticket { transform: none; }
  .about-inner { grid-template-columns: 1fr; gap: 48px; }
  .about-visual { order: -1; }
  .about-badge-float { right: 0; bottom: -16px; }
  .location-inner { grid-template-columns: 1fr; }
  section { padding: 70px 20px; }
  .services-head { flex-direction: column; align-items: flex-start; }
  .cta-inner { grid-template-columns: 1fr; text-align: center; gap: 36px; }
  .cta-seal { justify-self: center; }
  #cta p { margin-left: auto; margin-right: auto; }
  .cta-btns { justify-content: center; }
}
@media (max-width: 500px) {
  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns a { justify-content: center; }
  .cta-btns { flex-direction: column; align-items: center; }
  .footer-inner { flex-direction: column; }
}