/* ============================================================================
   TRAVEE PLUS — Global Tourism Alliance pages.

   The master document asks for "international, credible, premium and
   business-focused rather than like a conventional tour-package website", and
   to "avoid excessive tourism clichés". So this is an editorial layout, not a
   brochure one: a lot of white, a serif display face, one accent colour used
   sparingly, and no photography standing in for content that does not exist.

   Everything is scoped under .al so it cannot reach the app or the existing
   public pages. Colours come from landing.css's .tv block — this file defines
   no palette of its own, which is why a brand change stays a one-file change.
   ========================================================================= */

.al { display: block; }

/* Fluid type: one clamp() per level instead of a breakpoint per level. The
   floor is what a 360px phone gets, the ceiling what a desktop gets. */
.al-h1     { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
             font-size: clamp(2.1rem, 1.2rem + 3.9vw, 4.1rem); line-height: 1.06;
             letter-spacing: -.015em; margin: 0; color: var(--ink); }
.al-title  { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
             font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.7rem); line-height: 1.14;
             letter-spacing: -.01em; margin: 0; color: var(--ink); }
.al-eyebrow{ display: inline-block; font-size: .74rem; font-weight: 600; letter-spacing: .13em;
             text-transform: uppercase; color: var(--cyan-d); margin-bottom: 14px; }

/* ---- hero ---------------------------------------------------------------
   The rule under the eyebrow is the only ornament on the page. */
.al-hero { padding: clamp(56px, 9vw, 116px) 0 clamp(40px, 6vw, 72px); position: relative; }
.al-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
                  background: var(--line); }
.al-hero.sm { padding-bottom: clamp(34px, 4vw, 54px); }
.al-hero .tv-wrap { max-width: 900px; margin-inline: auto; }
.al-hero-lead { font-size: clamp(1.02rem, .95rem + .4vw, 1.24rem); line-height: 1.62;
                color: var(--ink-2); margin: 22px 0 0; max-width: 68ch; }

/* ---- shared section head ------------------------------------------------ */
.al-head { max-width: 72ch; margin-bottom: clamp(28px, 4vw, 48px); }
.al-lead { font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.62;
           color: var(--ink-2); margin: 16px 0 0; }

/* ---- buttons ------------------------------------------------------------ */
.al-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* A row of buttons on a narrow screen becomes a stack of full-width ones —
   two half-width buttons side by side at 360px are two bad tap targets. */
@media (max-width: 460px) {
  .al-cta-row { flex-direction: column; align-items: stretch; }
  .al-cta-row .tv-btn { width: 100%; justify-content: center; }
}

/* ---- founding markets strip --------------------------------------------- */
.al-markets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
              grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.al-market a { display: flex; flex-direction: column; gap: 4px; height: 100%;
               padding: 20px 18px; background: var(--paper); border: 1px solid var(--line);
               border-radius: 14px; text-decoration: none; color: var(--ink);
               transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.al-market a:hover { border-color: var(--cyan); transform: translateY(-2px);
                     box-shadow: 0 10px 26px rgba(11,16,21,.07); }
.al-market b { font-size: 1.02rem; font-weight: 600; }
.al-market-sub { font-size: .84rem; color: var(--ink-3); }
.al-flag { font-size: 1.6rem; line-height: 1; }
.al-flag.lg { font-size: 2.3rem; }
/* An open seat is styled as an invitation, not as a gap. */
.al-market.open a { border-style: dashed; background: var(--cyan-w); border-color: var(--line-2); }
.al-market.open a:hover { border-color: var(--cyan); }

/* ---- card grid ----------------------------------------------------------- */
.al-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.al-card { padding: 26px 24px; background: var(--paper); border: 1px solid var(--line);
           border-radius: 16px; text-decoration: none; color: inherit; display: block;
           transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
a.al-card:hover { border-color: var(--cyan); transform: translateY(-2px);
                  box-shadow: 0 10px 26px rgba(11,16,21,.07); }
.al-card i  { font-size: 1.05rem; color: var(--cyan-d); margin-bottom: 16px; display: block; }
.al-card h3 { font-size: 1.04rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -.005em; }
.al-card p  { font-size: .93rem; line-height: 1.58; color: var(--ink-2); margin: 0; }

/* ---- numbered pillars ---------------------------------------------------- */
.al-pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
              grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); counter-reset: p; }
.al-pillars li { padding: 24px 22px; background: var(--paper); border: 1px solid var(--line);
                 border-radius: 16px; position: relative; }
.al-pillar-n { position: absolute; top: 18px; right: 20px; font-family: 'Instrument Serif', Georgia, serif;
               font-size: 1.5rem; color: var(--line-2); }
.al-pillars i  { font-size: 1.05rem; color: var(--cyan-d); margin-bottom: 14px; display: block; }
.al-pillars h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 7px; }
.al-pillars p  { font-size: .91rem; line-height: 1.56; color: var(--ink-2); margin: 0; }

/* ---- prose ---------------------------------------------------------------- */
.al-prose { max-width: 74ch; }
.al-prose p { font-size: clamp(1rem, .96rem + .22vw, 1.1rem); line-height: 1.72;
              color: var(--ink-2); margin: 0 0 20px; }

/* ---- bullet lists --------------------------------------------------------- */
.al-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.al-bullets.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 34px; }
.al-bullets li { display: flex; gap: 12px; align-items: flex-start;
                 font-size: .98rem; line-height: 1.58; color: var(--ink-2); }
.al-bullets li i { color: var(--cyan); font-size: .74rem; margin-top: .42em; flex: none; }

/* ---- two-column split ----------------------------------------------------- */
.al-split { display: grid; gap: clamp(24px, 4vw, 54px);
            grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.al-split-col h3 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
                   font-size: clamp(1.35rem, 1.1rem + 1vw, 1.72rem); line-height: 1.2;
                   margin: 0 0 14px; letter-spacing: -.01em; }
.al-split-col p  { font-size: 1rem; line-height: 1.68; color: var(--ink-2); margin: 0; }

/* ---- process flow ---------------------------------------------------------
   A horizontal chain on desktop; a vertical one on a phone, where six boxes in
   a row would each be 50px wide. The connector is a pseudo-element so it never
   dangles off the last step. */
.al-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
           grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); counter-reset: f; }
.al-flow li { position: relative; padding: 20px 18px; border-radius: 14px;
              background: var(--paper); border: 1px solid var(--line); display: flex;
              flex-direction: column; gap: 10px; }
.al-flow-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
             background: var(--cyan-w); color: var(--cyan-d); font-size: .78rem; font-weight: 700; }
.al-flow-t { font-size: .93rem; font-weight: 500; line-height: 1.42; }

/* ---- membership tiers ------------------------------------------------------ */
.al-tiers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.al-tier { padding: 32px 28px; border: 1px solid var(--line); border-radius: 18px;
           background: var(--paper); }
.al-tier-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
               text-transform: uppercase; color: var(--cyan-d); background: var(--cyan-w);
               padding: 5px 11px; border-radius: 999px; margin-bottom: 16px; }
.al-tier h3 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
              font-size: 1.72rem; margin: 0 0 12px; letter-spacing: -.01em; }
.al-tier p  { font-size: .98rem; line-height: 1.65; color: var(--ink-2); margin: 0; }

/* ---- pull quote ------------------------------------------------------------ */
.al-quote { margin: 0; max-width: 82ch; }
.al-quote p { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
              font-size: clamp(1.24rem, 1.05rem + .85vw, 1.78rem); line-height: 1.44;
              color: var(--ink); margin: 0; letter-spacing: -.005em; }
.al-quote cite { display: block; margin-top: 22px; font-style: normal; font-size: .86rem;
                 font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-d); }

/* ---- founder profiles ------------------------------------------------------ */
.al-founders { display: grid; gap: clamp(18px, 3vw, 30px); }
.al-founder { border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 42px);
              background: var(--paper); scroll-margin-top: 90px; }
.al-founder-hd { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 24px;
                 padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.al-founder-hd .al-eyebrow { margin-bottom: 6px; }
.al-founder-hd h3 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
                    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); line-height: 1.16;
                    margin: 0 0 8px; letter-spacing: -.01em; }
.al-founder-role { font-size: .93rem; line-height: 1.55; color: var(--ink-3); margin: 0; }
/* Two columns once there is room: biography left, the rest right. Below that a
   single column, which is what a phone gets. */
.al-founder-body { display: grid; gap: clamp(18px, 3vw, 34px); }
@media (min-width: 900px) { .al-founder-body { grid-template-columns: 1fr 1fr; } }
.al-founder-body p  { font-size: .98rem; line-height: 1.68; color: var(--ink-2); margin: 0 0 15px; }
.al-founder-body h4 { font-size: .76rem; font-weight: 700; letter-spacing: .12em;
                      text-transform: uppercase; color: var(--ink-3); margin: 0 0 15px; }
.al-founder-body > ul { align-self: start; }
.al-msg { grid-column: 1 / -1; margin: 6px 0 0; padding: 26px 28px; border-radius: 16px;
          background: var(--paper-2); border-left: 3px solid var(--cyan); }
.al-msg p { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(1.06rem, 1rem + .4vw, 1.28rem);
            line-height: 1.55; color: var(--ink); margin: 0 0 16px; }
.al-msg cite { font-style: normal; font-size: .84rem; font-weight: 600; color: var(--cyan-d); }
.al-open { font-size: 1rem; line-height: 1.68; color: var(--ink-2); margin: 0 0 22px; max-width: 70ch; }
.al-note { font-size: .9rem; color: var(--ink-3); margin: 22px 0 0; }

/* ---- enquiry form ----------------------------------------------------------- */
.al-form { max-width: 760px; }
.al-form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
                margin-bottom: 16px; }
.al-form .field { display: block; margin-bottom: 16px; }
.al-form .field > span { display: block; font-size: .84rem; font-weight: 600; color: var(--ink-2);
                         margin-bottom: 7px; }
.al-form input, .al-form textarea {
  width: 100%; padding: 13px 15px; font: inherit; font-size: .97rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 11px;
  transition: border-color .15s ease, box-shadow .15s ease; }
.al-form input:focus, .al-form textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37,168,203,.16); }
.al-form textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
/* The honeypot. Off-screen rather than display:none — some bots skip anything
   the CSS hides outright, and this one is meant to be filled in. */
.al-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.al-form-msg:empty { display: none; }
.al-form-msg { margin: 16px 0 0; font-size: .93rem; padding: 12px 15px; border-radius: 11px;
               background: var(--paper-2); color: var(--ink-2); }
.al-form-msg.ok  { background: var(--cyan-w); color: var(--cyan-d); font-weight: 500; }
.al-form-msg.err { background: #FDECEC; color: #A32323; }

/* ---- closing band ------------------------------------------------------------ */
.al-band { background: var(--ink); color: #fff; padding: clamp(56px, 8vw, 96px) 0; text-align: center; }
.al-band h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
              font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); line-height: 1.12;
              margin: 0; letter-spacing: -.015em; }
.al-band p { font-size: clamp(1rem, .95rem + .3vw, 1.12rem); line-height: 1.62;
             color: rgba(255,255,255,.72); margin: 18px auto 0; max-width: 62ch; }
.al-band .al-cta-row { justify-content: center; }
.al-band .tv-btn.tv-line { border-color: rgba(255,255,255,.3); color: #fff; background: transparent; }
.al-band .tv-btn.tv-line:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ---- accessibility ------------------------------------------------------------
   A visible focus ring on every interactive thing in here. The card and market
   tiles are links with no underline, so without this a keyboard user crossing
   the grid has no idea where they are. */
.al a:focus-visible, .al button:focus-visible, .al input:focus-visible, .al textarea:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .al * { transition: none !important; }
  .al-card:hover, .al-market a:hover { transform: none; }
}

/* The path the visitor asked for, echoed on the 404. */
.al-404-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
               background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px;
               padding: 2px 7px; word-break: break-all; }