:root {
  --bg:#111210; --surface:#191a17; --gold:#d8b76d; --gold-light:#efdaa2;
  --white:#f4f3ee; --muted:#b5b6ad; --line:#ffffff18;
  --gutter:clamp(1.25rem,4vw,5rem);
  --section-space:clamp(3.5rem,6vw,6.5rem);
  --font:Arial,Helvetica,sans-serif; color-scheme:dark;
}
* { box-sizing:border-box; }
html { margin:0; padding:0; min-height:100%; background:var(--bg); scroll-padding-top:1.5rem; }
body { margin:0; padding:0; min-height:100vh; background:var(--bg); color:var(--white); font:clamp(1rem,.95rem + .15vw,1.125rem)/1.75 var(--font); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
img { display:block; max-width:100%; }
svg { flex-shrink:0; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { overflow-wrap:break-word; letter-spacing:normal; word-spacing:normal; text-wrap:balance; }
.wrap { width:min(100% - var(--gutter) * 2,100rem); margin-inline:auto; }
.gold { color:var(--gold); }
.section { padding-block:var(--section-space); }

/* Navigation changes before its links run out of room. */
.header { position:relative; z-index:10; background:var(--bg); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:.875rem; }
.brand { display:block; flex:0 0 auto; }
.brand img { display:block; width:100%; height:auto; }
.header .brand { width:clamp(15rem,25vw,21rem); max-width:calc(100% - 4rem); }
.header nav { display:flex; align-items:center; gap:clamp(1.25rem,2.5vw,2.5rem); font-size:.9375rem; }
.header nav > a { padding-block:.75rem; }
.header nav > a:hover { color:var(--gold); }
.header nav .nav-contact { display:inline-flex; align-items:center; gap:1.5rem; padding:.75rem 1.25rem; color:var(--gold); border:1px solid #d8b76d66; }
.nav-contact svg { width:1.25rem; }
.menu-toggle { display:none; }

/* Fill the hero with the photograph instead of reserving a dark left strip. */
.hero-inner { position:relative; isolation:isolate; display:flex; align-items:center; width:min(100%,112rem); min-height:clamp(36rem,48vw,48rem); padding:clamp(2rem,4vw,4rem); }
.hero-copy,.hero-media { min-width:0; }
.hero-copy { position:relative; z-index:1; display:flex; flex-direction:column; width:44%; max-width:36rem; }
.hero-heading { display:contents; }
.hero-details { order:2; }
.hero-actions { order:1; }
.eyebrow { display:flex; align-items:center; gap:.75rem; color:var(--gold); font-size:.75rem; line-height:1.6; font-weight:600; letter-spacing:.12em; margin-bottom:1.5rem; }
.eyebrow > span { flex:0 0 1.5rem; height:1px; background:var(--gold); }
h1 { font-size:clamp(2.125rem,1.25rem + 2.5vw,4rem); line-height:1.2; font-weight:500; }
h1 em { color:var(--gold); font-style:normal; }
.hero-tagline { display:block; font-size:clamp(1.125rem,.48em,2rem); line-height:1.4; letter-spacing:normal; margin-top:.45em; color:var(--white); }
.hero-description { max-width:29rem; color:var(--muted); margin-top:1.5rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; margin-top:1.75rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.625rem; min-height:2.75rem; padding:.625rem .875rem; font-size:.8125rem; line-height:1.5; font-weight:600; text-align:center; transition:background .2s; }
.button-gold { color:#161712; background:var(--gold); }
.button-gold:hover { background:var(--gold-light); }
.button svg,.text-link svg { width:1.25rem; height:1.25rem; }
.hero-actions .button { flex:0 0 auto; width:fit-content; max-width:100%; }
.hero-actions .button svg { width:1rem; height:1rem; }
.text-link { display:inline-flex; align-items:center; gap:.75rem; min-height:2.75rem; font-size:.9375rem; line-height:1.6; }
.text-link:hover { color:var(--gold-light); }
.hero-media { position:absolute; inset:0; z-index:-1; margin:0; pointer-events:none; }
.hero-photo { position:absolute; inset:0; overflow:hidden; background:var(--bg); }
.hero-photo img { position:absolute; inset:0; width:100%; height:100%; max-width:100%; object-fit:cover; object-position:right center; }
.hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#11121080 0%,transparent 18%); }
.hero-heading,.hero-description { text-shadow:0 2px 8px #000b; }

.benefits { background:#171814; border-block:1px solid var(--line); }
.benefits-inner { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.benefits-inner > div { display:flex; align-items:center; justify-content:center; gap:.875rem; padding:1.5rem 1rem; border-right:1px solid var(--line); font-size:.9375rem; line-height:1.5; }
.benefits-inner > div:first-child { padding-left:0; justify-content:flex-start; }
.benefits-inner > div:last-child { border-right:0; padding-right:0; }
.benefits svg { width:1.5rem; height:1.5rem; color:var(--gold); }
.benefit-route-label { display:grid; gap:.125rem; font-size:.75rem; line-height:1.35; }

h2 { font-size:clamp(1.75rem,1.25rem + 1.5vw,3rem); font-weight:500; line-height:1.3; }
h2 span { color:var(--muted); }
.section-heading { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr); align-items:end; gap:2rem; margin-bottom:clamp(2rem,3vw,3rem); }
.section-heading > p { max-width:26rem; justify-self:end; color:var(--muted); }
.section-heading > p br { display:none; }
.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); }
.service-card { display:flex; flex-direction:column; min-width:0; padding:clamp(1.5rem,2.2vw,2rem); background:var(--surface); border:1px solid var(--line); transition:border-color .2s; }
.service-card:hover { border-color:#d8b76d6b; }
.card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.card-top svg { width:2rem; height:2rem; color:var(--gold); }
.card-top > span { color:#a0a18f; font-size:.8125rem; }
h3 { font-size:clamp(1.25rem,1rem + .5vw,1.5rem); line-height:1.45; font-weight:500; }
.service-card p { color:var(--muted); margin-block:1rem 1.75rem; }
.service-card a { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:auto; padding-top:1.25rem; border-top:1px solid var(--line); color:var(--gold); font-size:.875rem; line-height:1.6; }
.service-card a svg { width:1.25rem; height:1.25rem; }

.routes { padding-top:0; background:#141512; border-block:1px solid var(--line); }
.route-layout { display:grid; width:100%; grid-template-columns:minmax(0,1fr); justify-items:center; gap:clamp(1.5rem,3vw,3rem); }
.route-copy { width:min(calc(100% - var(--gutter) * 2),46rem); min-width:0; text-align:center; }
.route-copy h2 { margin-bottom:1.25rem; }
.route-copy > p { max-width:40rem; margin-inline:auto; color:var(--muted); }
.route-pair { max-width:24rem; padding-block:1rem; margin:1.5rem auto 1.25rem; border-block:1px solid var(--line); font-size:.9375rem; letter-spacing:.12em; text-align:center; }
.route-directions { display:inline-grid; gap:.125rem; vertical-align:middle; }
.route-line { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:1.25rem; }
.route-line > span:first-child { text-align:right; }
.route-line > span:last-child { text-align:left; }
.route-vehicle { display:inline-flex; align-items:center; justify-content:center; color:var(--gold); }
.route-vehicle svg { width:2.75rem; height:2.75rem; stroke-width:.65; }
.route-directions--compact { gap:0; font-size:.75rem; letter-spacing:.025em; line-height:1.4; }
.route-directions--compact .route-line { gap:.4375rem; }
.route-directions--compact .route-vehicle svg { width:1.625rem; height:1.625rem; }
.route-service-label { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
.route-copy .text-link { color:var(--gold); margin-top:1rem; }
.map-panel { width:100%; min-width:0; }
.map-panel img { width:100%; height:auto; object-fit:contain; }

.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.5rem); }
.steps article { min-width:0; border-top:1px solid #d8b76d55; padding-top:1.5rem; }
.steps h3 { margin-block:0 .75rem; }
.steps p { color:var(--muted); }

.contact { background:#1d1f18; border-top:1px solid #d8b76d35; }
.contact-heading { max-width:56rem; margin-inline:auto; text-align:center; }
.contact-heading h2 { font-size:clamp(2rem,1.5rem + 2vw,3.5rem); margin-bottom:1.25rem; }
.contact-heading h2 span { color:var(--gold); }
.contact-heading > p { color:var(--muted); }
.contact-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; max-width:56rem; margin:2.5rem auto 0; }
.phone-card { display:flex; flex-direction:column; gap:1rem; min-width:0; padding:clamp(1.25rem,2.5vw,2rem); border:1px solid #d8b76d38; transition:background .2s; }
.phone-card:hover { background:#d8b76d0d; }
.phone-country { display:flex; align-items:center; gap:.625rem; color:var(--gold); font-size:.9375rem; }
.phone-country svg { width:1.125rem; height:1.125rem; }
.whatsapp-card .phone-country { color:#95d5a8; }
.phone-card strong { font-size:clamp(1.25rem,2.2vw,1.75rem); line-height:1.5; font-weight:500; }
.phone-action { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.875rem; }
.phone-action svg { width:1.125rem; height:1.125rem; }
.contact-note { max-width:48rem; margin:1.5rem auto 0; font-size:.875rem; color:var(--muted); text-align:center; }

footer { padding-block:2.5rem 1.5rem; }
.footer-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem 2rem; }
.footer-brand { width:clamp(9rem,14vw,12rem); }
.footer-inner p { color:var(--muted); font-size:.875rem; }
.back-to-top { display:inline-flex; align-items:center; justify-content:center; gap:.75rem; min-height:2.75rem; padding:.625rem 1rem; border:1px solid #d8b76d55; border-radius:999px; background:#d8b76d08; color:var(--gold); font-size:.8125rem; line-height:1.4; transition:background .2s,border-color .2s; }
.back-to-top svg { width:1rem; height:1rem; transform:rotate(-90deg); }
.back-to-top:hover { background:#d8b76d18; border-color:var(--gold); }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; padding-top:1.25rem; margin-top:1.75rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8125rem; }
.skip-link { position:absolute; top:-100px; left:1.25rem; z-index:100; padding:.75rem 1.25rem; background:var(--gold); color:var(--bg); }
.skip-link:focus { top:.625rem; }
a:focus-visible,button:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }

@media (max-width:70rem) {
  .benefits-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .benefits-inner > div { justify-content:flex-start; }
  .benefits-inner > div:nth-child(even) { border-right:0; padding-left:1.5rem; }
  .benefits-inner > div:nth-child(odd) { padding-left:0; }
  .benefits-inner > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
}

@media (max-width:62rem) {
  .header-inner { gap:1rem; padding-block:.625rem; }
  .menu-toggle { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; width:2.75rem; height:2.75rem; flex-shrink:0; background:none; border:1px solid #d8b76d55; border-radius:.25rem; color:var(--gold); }
  .menu-toggle span { width:1.125rem; height:1px; background:currentColor; }
  .header nav { display:none; position:absolute; left:0; right:0; top:100%; padding:1rem var(--gutter); background:#171814; border-bottom:1px solid var(--line); }
  .header nav.open { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .header nav > a { padding:.875rem 1rem; }
  .header nav .nav-contact { margin-top:.5rem; justify-content:space-between; }
  .hero-description { max-width:36rem; }
  .section-heading { grid-template-columns:minmax(0,1fr); gap:1.25rem; }
  .section-heading > p { justify-self:start; max-width:40rem; }
  .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-card:last-child { grid-column:1 / -1; }
  .steps { gap:1.5rem; }
}

@media (max-width:48rem) {
  /* One shared image area: heading/CTA at upper left, caption at lower left.
     The heading's bottom padding reserves room for the multiline caption. */
  .hero-inner { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto; min-height:clamp(15rem,62vw,30rem); padding:0; align-items:stretch; }
  .hero .hero-copy { display:contents; container-type:normal; }
  .hero-heading { display:block; position:relative; top:1.5rem; grid-area:1 / 1; z-index:1; align-self:start; width:48%; min-width:0; padding:.75rem 0 5rem var(--gutter); }
  .hero-copy h1 { font-size:clamp(1.1875rem,5.9vw,2.5rem); line-height:1.23; text-wrap:initial; }
  .hero-copy .hero-tagline { font-size:clamp(.8125rem,3.4vw,1.25rem); line-height:1.35; margin-top:.4em; }
  .hero-copy .eyebrow { display:flex; align-items:center; gap:.375rem; font-size:clamp(.5rem,1.9vw,.6875rem); line-height:1.45; font-weight:400; letter-spacing:.025em; margin-bottom:.5rem; }
  .hero-copy .eyebrow > span { display:block; flex:0 0 .75rem; height:1px; background:var(--gold); }
  .hero-media { position:relative; inset:auto; grid-area:1 / 1; width:100%; align-self:stretch; }
  .hero-photo img { object-position:left center; }
  .hero-photo::after { background:linear-gradient(0deg,#11121099 0%,transparent 28%); }
  .hero-details { grid-area:1 / 1; z-index:1; align-self:end; width:57%; min-width:0; padding:0 .5rem .75rem var(--gutter); background:transparent; }
  .hero-details .hero-description { max-width:24rem; font-size:clamp(.625rem,2.6vw,.875rem); line-height:1.5; margin:0; color:var(--white); text-wrap:pretty; overflow-wrap:break-word; text-shadow:0 1px 5px #000; }
  .hero-copy .hero-actions { gap:0; margin-top:.5rem; }
  .hero-heading .button { width:fit-content; max-width:100%; white-space:nowrap; font-size:clamp(.5625rem,2.2vw,.625rem); line-height:1.35; font-weight:500; min-height:1.75rem; padding:.25rem .3125rem; gap:.1875rem; }
  .hero-heading .button svg { width:.5625rem; height:.5625rem; }
}
@media (max-width:40rem) {
  .footer-brand { width:9.75rem; }
  .eyebrow { font-size:.75rem; letter-spacing:.07em; gap:.5rem; }
  .eyebrow > span { flex-basis:1rem; }
  .hero-description { margin-top:1.125rem; }
  .hero-actions { gap:.625rem 1rem; margin-top:1.5rem; }
  .benefits-inner > div { padding-block:1.125rem; padding-right:.75rem; gap:.625rem; font-size:.875rem; }
  .benefits-inner > div:nth-child(even) { padding-left:1rem; }
  .benefits svg { width:1.25rem; height:1.25rem; }
  .service-grid,.steps,.contact-options { grid-template-columns:minmax(0,1fr); }
  .service-card:last-child { grid-column:auto; }
  .card-top { margin-bottom:1.5rem; }
  .steps { gap:2rem; }
  .contact-options { margin-top:2rem; }
  .phone-card strong { font-size:1.5rem; }
  .footer-inner { align-items:center; gap:1rem; }
  .footer-inner p { order:3; flex-basis:100%; }
}

@media (max-width:23rem) {
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .benefits-inner { grid-template-columns:minmax(0,1fr); }
  .benefits-inner > div:nth-child(n) { padding:1rem 0; border-right:0; border-bottom:1px solid var(--line); }
  .benefits-inner > div:last-child { border-bottom:0; }
}

/* Headings follow their actual column width, not the whole screen.
   The rem component preserves growth with the reader's font settings. */
@supports (font-size:1cqi) {
  .hero-copy,.section-heading > div,.route-copy,.contact-heading,.service-card,.steps article { container-type:inline-size; }
  h1 { font-size:clamp(2rem,1rem + 7.5cqi,4.5rem); }
  h2 { font-size:clamp(1.75rem,1rem + 3.8cqi,3rem); }
  .contact-heading h2 { font-size:clamp(2rem,1.25rem + 4cqi,3.5rem); }
  h3 { font-size:clamp(1.25rem,.875rem + 2cqi,1.5rem); }
}

@media (min-width:48.001rem) {
  .hero-inner { padding-bottom:7rem; }
  .hero-copy h1 { font-size:clamp(2.25rem,4.8vw,5rem); }
  .hero-details { position:absolute; z-index:1; left:clamp(2rem,4vw,4rem); bottom:clamp(1.25rem,2vw,2rem); width:min(34rem,calc(100% - 8rem)); }
  .hero-details .hero-description { margin:0; max-width:none; color:var(--white); font-size:1rem; line-height:1.65; text-wrap:pretty; text-shadow:0 2px 6px #000; }
  .hero-photo::after { background:linear-gradient(0deg,#111210ed 0%,#111210b3 12%,transparent 32%); }
  @supports (font-size:1cqi) {
    .hero-copy h1 { font-size:clamp(2.25rem,1rem + 8.5cqi,5rem); }
  }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
}