/* ============================================================================
   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; }
/* The owner's photograph where the desk has uploaded one, the flag where it
   has not. Same size either way, so a grid of both still lines up. */
.al-face { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none;
           border: 3px solid var(--paper-2); box-shadow: 0 6px 20px -12px rgba(11,16,21,.5); }
.al-face-init { display: grid; place-items: center; background: var(--paper-2);
                font-weight: 700; font-size: 1.5rem; color: var(--ink-3); }
/* The CEO card carries no bio and no contribution list, so its message is
   the whole body rather than one cell of a two-column grid. */
.al-msg-solo { margin-top: 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); }
/* Staff on a desk, not a seat on it. Same card, lighter: a smaller face, a
   smaller name, and two to a row where a representative gets the full width. */
.al-staff { padding: clamp(20px, 2.4vw, 28px); }
.al-staff .al-founder-hd { gap: 14px; margin-bottom: 18px; padding-bottom: 18px; }
.al-staff .al-face { width: 60px; height: 60px; }
.al-staff .al-founder-hd h3 { font-size: clamp(1.22rem, 1.1rem + .5vw, 1.44rem); margin-bottom: 5px; }
.al-staff .al-founder-role { font-size: .87rem; }
.al-staff .al-founder-body { grid-template-columns: 1fr; }
.al-staff .al-founder-body p { font-size: .93rem; margin: 0; }
/* Six columns so the staff row divides evenly: a representative takes all six,
   a colleague two — three to a row, tablet included. Below 900px the grid is
   one column and every card is full width. */
@media (min-width: 900px) {
  .al-founders { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .al-founders > .al-founder { grid-column: span 6; }
  .al-founders > .al-staff   { grid-column: span 2; align-self: stretch; }
}
.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; }