/* ============================================================
   TRAMIGO TRAVELS · Version A layer · September 2026
   Loaded last on every page, so it wins over each page's own copy
   of the design system. One file, so the header, colours and the
   Message button can never drift apart between pages again.
   Source: designer's build notes (20 Sep) and Version A decisions.
   ============================================================ */

/* ---------- 1. Colour tokens: readable in sunlight ----------
   Measured against every light background on the site. The old greys
   failed on 168 blocks of text across seven pages (4.3:1 and 2.5:1).
   Every value here clears 4.5:1 on cream, paper and white. The bright
   copper stays for headlines, where large type only needs 3:1; small
   copper text uses the deeper --copper-ink. */
:root{
  --paper:#F6F1EA;
  --ink-soft:#3A342E;
  --muted:#5F5249;
  --muted-2:#6B5E54;
  --copper-ink:#9A4F2B;
  --line:rgba(24,21,15,.12);
  --line-strong:rgba(24,21,15,.2);
  --nav-h:72px;
}
@media(max-width:900px){ :root{ --nav-h:56px; } } /* designer: ~72px desktop, ~56px phone */

body{background:var(--paper)}
/* Small copper labels on cream: deeper copper, same family. */
.eyebrow:not(.on-dark){color:var(--copper-ink)}

/* ---------- 2. Motion: quiet ----------
   Locked: no parallax, no preloaders. Designer punch list, Preview 3:
   nothing starts invisible. The old scroll fade left the price block,
   How it works and the closing section at opacity 0 for some viewers,
   so every section now paints fully visible and stays put. The night
   scene stays, it just stops following the pointer and scroll. */
.cinema .layer{transform:none!important;margin-bottom:0!important}
.tilt3d{transform:none!important}
.reveal,.reveal.in{opacity:1!important;transform:none!important;transition:none!important}
.card{transition:box-shadow .2s ease,transform .2s ease}
#splash{display:none!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- 3. One header, every page ---------- */
.nav,.mobile-menu,.hamburger{display:none!important} /* the old headers, if any survive */
.tg-nav{
  position:fixed;top:0;left:0;right:0;z-index:230;height:var(--nav-h);
  display:flex;align-items:center;gap:1.4rem;padding:0 2rem;
  background:rgba(246,241,234,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
}
.tg-brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:#18150F;flex-shrink:0;min-height:44px}
.tg-brand img{height:36px;width:auto;display:block}
.tg-words{display:flex;flex-direction:column;line-height:1}
.tg-name{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:1.22rem;letter-spacing:-.01em;white-space:nowrap;color:#18150F}
.tg-name em{font-style:italic;font-weight:500;color:var(--copper-ink)}
.tg-tag{font-size:.64rem;font-weight:500;letter-spacing:.08em;color:#6B5E54;margin-top:.28rem;white-space:nowrap}
.tg-links{display:flex;align-items:center;gap:1.5rem;margin:0 auto}
.tg-links a{font-size:.9rem;color:#5F5249;text-decoration:none;padding:.55rem 0;border-bottom:2px solid transparent;transition:color .15s ease}
.tg-links a:hover{color:#18150F}
.tg-links a[aria-current="page"]{color:#18150F;font-weight:500;border-bottom-color:var(--copper-ink)}
.tg-links .tg-quiet{font-size:.82rem;color:#6B5E54;display:inline-flex;align-items:center;gap:.35rem}
.tg-links .tg-quiet::before{content:"";width:1px;height:14px;background:var(--line-strong);margin-right:.9rem}
.tg-links .tg-quiet svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.tg-right{display:flex;align-items:center;gap:1.1rem;flex-shrink:0;margin-left:auto}
.tg-links + .tg-right{margin-left:0}
.tg-call{font-size:.88rem;color:#18150F;text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.tg-call:hover{color:var(--copper-ink)}
.tg-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 1.25rem;border-radius:999px;background:#18150F;color:#F6F1EA;font-size:.88rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s ease}
.tg-cta:hover{background:#3A342E}
.tg-exit{min-height:44px;padding:0 .2rem;background:none;border:0;color:#18150F;font:500 .9rem 'DM Sans',system-ui,sans-serif;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer;white-space:nowrap}
.tg-exit:hover{color:var(--copper-ink)}
.tg-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;margin-right:-8px}
.tg-burger span{display:block;width:22px;height:2px;background:#18150F;border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.tg-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tg-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.tg-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.tg-menu{position:fixed;top:var(--nav-h);left:0;right:0;z-index:229;background:#F6F1EA;border-bottom:1px solid var(--line);padding:.4rem 1.25rem 1.3rem;display:flex;flex-direction:column;box-shadow:0 24px 40px -28px rgba(24,21,15,.35);font-family:'DM Sans',system-ui,sans-serif}
.tg-menu[hidden]{display:none}
.tg-menu a{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:1rem;color:#3A342E;text-decoration:none}
.tg-menu a[aria-current="page"]{color:#18150F;font-weight:500}
.tg-menu a.tg-menu-cta{margin-top:1rem;border:0;border-radius:999px;background:#18150F;color:#F6F1EA;text-align:center;font-weight:500;padding:.9rem}
.tg-menu a.tg-menu-msg{border-bottom:0}
body.tg-pad{padding-top:var(--nav-h)}

@media(max-width:1100px){ .tg-call{display:none} .tg-links{gap:1.15rem} }
@media(max-width:900px){
  .tg-links{display:none}
  .tg-burger{display:inline-flex}
  .tg-nav{padding:0 1rem;gap:.5rem}
  .tg-brand{gap:.5rem}
  .tg-brand img{height:28px}
  .tg-name{font-size:1rem}
  .tg-tag{font-size:.56rem;margin-top:.22rem}
  .tg-right{gap:.35rem}
  .tg-cta{padding:0 1rem;font-size:.82rem}
}
@media(max-width:440px){ .tg-long{display:none} }
@media(max-width:350px){ .tg-tag{display:none} .tg-brand img{height:24px} .tg-name{font-size:.94rem} .tg-cta{padding:0 .8rem} }

/* ---------- 4. Message Tramigo ----------
   A person, not a green disc. Lower left on wide screens; on phones it
   lives in the footer and the menu so it never covers a button. */
.wa-float{display:none!important}
.tg-msg{position:fixed;left:20px;bottom:20px;z-index:225;display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 1.15rem 0 .95rem;border-radius:999px;background:#18150F;color:#F6F1EA;border:1px solid rgba(246,241,234,.14);font:500 .88rem 'DM Sans',system-ui,sans-serif;text-decoration:none;box-shadow:0 14px 34px -16px rgba(0,0,0,.55);transition:background .15s ease}
/* site.js steps it aside whenever it would sit on a button, a field or a
   card. No fade: it is simply there, or not. It starts hidden in the page
   so it can never flash over the hero's Continue before that first check. */
.tg-msg.tg-msg-off{visibility:hidden;pointer-events:none}
.tg-msg:hover{background:#3A342E}
.tg-msg svg{width:17px;height:17px;fill:currentColor;opacity:.8;flex-shrink:0}
.tg-msg .tg-via{font-size:.7rem;font-weight:400;color:rgba(246,241,234,.72)}
@media(max-width:760px){ .tg-msg{display:none} }
.footer-contact .tg-footer-msg{font-weight:500}

/* ---------- 5. Focus and tap targets ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--copper-ink);outline-offset:3px;border-radius:4px}
.hero a:focus-visible,.hero button:focus-visible,.hero input:focus-visible,.hero textarea:focus-visible,
.footer a:focus-visible,.qcard a:focus-visible,.qcard button:focus-visible,.qcard input:focus-visible,.qcard textarea:focus-visible,
.tg-msg:focus-visible{outline-color:#F6F1EA}
.footer-contact a{min-height:44px;display:inline-flex;align-items:center}
button,input,textarea,select{font-family:inherit}

/* ---------- 6. Small copper type on cream ----------
   Found by the contrast audit after the build: the bright copper and its
   darker twin both fall under 4.5:1 at label sizes on cream and white. */
.qa-group > .gl,.compare .good,.team-card .trole,.note-card .sig,
.day .dc .dplace,.tile .tb .cat,.brand .bw em{color:var(--copper-ink)}
.tab.active{color:var(--copper-ink);border-bottom-color:var(--copper-ink)}
.fr-card a[href^="tel:"]{color:var(--copper-ink)!important}
.feel-tag{color:#3D6558}
/* Dark footers: the small print sat at 3.7:1. */
.footer small{color:rgba(250,248,243,.68)}