/* Single site stylesheet — ALL styling lives here (no inline styles ever).
   Base design supplied by the client (Documents/travel-again/website/index.html),
   adapted to the fleet standard: self-hosted fonts instead of Google Fonts,
   logo walls replaced by the source site's 6-across slider, and the hero
   image given the source's scroll-into-view entrance animation.
   One breakpoint collapses the nav (960px); keep it in sync with main.js. */

/* Self-hosted variable fonts (latin subset). Never Google Fonts — the
   client file linked a Google Fonts stylesheet; that request is render-blocking
   and is replaced by these local woff2 subsets, preloaded in base.njk. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/fonts/lora-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   TRAVEL AGAIN ADVISORY — HOMEPAGE
   Brand palette (from Travel Again Palette + logo files)
   ============================================================ */
:root{
  --navy:#003d5c;          /* primary — logo navy */
  --navy-deep:#002c42;
  --blue:#30638e;          /* secondary blue */
  --teal:#00798c;
  --gold:#fbcf15;          /* logo yellow / accent */
  --gold-warm:#edae49;
  --red:#d1495b;
  --ink:#1c2b36;
  --body:#41505c;
  --line:#e2e8ee;
  --bg:#ffffff;
  --bg-alt:#f5f8fa;
  --radius:6px;
  --maxw:1180px;
  --pad:24px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--body);
  background:var(--bg);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Display headings are Lora — the serif carries the brand and gives h1/h2
   presence against the Inter body. h3/h4 stay Inter so card headings and
   labels read as UI rather than display type. */
h1,h2,h3,h4{color:var(--navy);margin:0 0 .5em;line-height:1.2;font-weight:700;}
h1,h2{font-family:"Lora",Georgia,"Times New Roman",serif;font-weight:600;}
h1{font-size:clamp(2.15rem,4.6vw,3.35rem);letter-spacing:-.015em;line-height:1.12;}
h2{font-size:clamp(1.75rem,3.2vw,2.6rem);letter-spacing:-.012em;line-height:1.15;}
h3{font-size:1.3rem;}
h4{font-size:1.05rem;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.section{padding:84px 0;}
.section--alt{background:var(--bg-alt);}
.section--navy{background:var(--navy);color:#cfdde6;}
.section--navy h2,.section--navy h3{color:#fff;}
.center{text-align:center;}
.lede{font-size:1.08rem;max-width:820px;}
.center .lede{margin-left:auto;margin-right:auto;}
.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);margin:0 0 14px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:14px 28px;border-radius:var(--radius);
  font-weight:600;font-size:.95rem;line-height:1.2;text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{text-decoration:none;}
.btn--gold{background:var(--gold);color:var(--navy);}
.btn--gold:hover{background:#e6bd0c;}
.btn--navy{background:var(--navy);color:#fff;}
.btn--navy:hover{background:var(--navy-deep);}
.btn--ghost{border:2px solid var(--navy);color:var(--navy);padding:12px 26px;}
.btn--ghost:hover{background:var(--navy);color:#fff;}
.btn--ghost-light{border:2px solid #fff;color:#fff;padding:12px 26px;}
.btn--ghost-light:hover{background:#fff;color:var(--navy);}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;background:#fff;
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:94px;}
.logo img{height:56px;width:auto;}

.nav-toggle{
  display:none;background:none;border:0;font-size:1.6rem;line-height:1;
  color:var(--navy);cursor:pointer;padding:6px 8px;
}

.main-nav > ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;}
.main-nav a{
  display:block;padding:10px 14px;color:var(--navy);font-weight:600;font-size:.94rem;
  border-radius:4px;
}
.main-nav a:hover{color:var(--teal);text-decoration:none;}
.has-sub{position:relative;}
.has-sub > a::after{content:"›";display:inline-block;transform:rotate(90deg);margin-left:6px;font-size:.85em;opacity:.6;}
.sub-menu{
  display:none;list-style:none;margin:0;position:absolute;top:100%;left:0;min-width:250px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,61,92,.12);padding:8px;
}
.sub-menu li{width:100%;}
.sub-menu a{font-weight:500;padding:10px 14px;}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu{display:block;}
.nav-cta{margin-left:10px;}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--navy);color:#cfdde6;padding:96px 0;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.hero h1{color:#fff;margin-bottom:.35em;}
.hero .kicker{
  font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;
}
.hero .sub{font-size:1.35rem;color:#fff;font-weight:600;margin-bottom:.8em;line-height:1.35;}
.hero p{font-size:1.06rem;}
.hero .btn{margin-top:26px;}
.hero-media img{border-radius:var(--radius);}

/* ============================================================
   LOGO WALLS
   ============================================================ */
/* Logo marquee — a continuous scroll, not stepped slides. The track holds
   two identical sets and shifts by exactly -50%, so the loop is seamless.
   Duration scales with set width via --marquee-duration set in main.js.
   Keeps the design's greyscale-until-hover treatment. */
.logo-wall{margin-top:44px;}
.logo-viewport{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.logo-track{display:flex;width:max-content;animation:logo-marquee var(--marquee-duration,60s) linear infinite;}
.logo-set{display:flex;align-items:center;}
.logo-cell{flex:0 0 auto;width:180px;height:70px;display:flex;align-items:center;justify-content:center;padding:0 17px;}
/* Full colour at reduced opacity, not greyscale. Several of these marks
   are solid-fill boxes (American Express, GBTA) — greyscale turns those
   into grey rectangles, and on a moving marquee there is no hover to
   recover them. Opacity alone keeps the row restrained without flattening
   the brands. */
.logo-cell img{
  max-height:46px;width:auto;max-width:100%;object-fit:contain;
  opacity:.72;transition:opacity .2s ease;
}
.logo-cell img:hover{opacity:1;}
.logo-wall--light .logo-cell img{filter:brightness(0) invert(1);opacity:.75;}
.logo-wall--light .logo-cell img:hover{opacity:1;}
.logo-wall:hover .logo-track{animation-play-state:paused;}
@keyframes logo-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .logo-track{animation:none;}
  .logo-viewport{overflow-x:auto;}
}

/* Hero image entrance — the live site fades the paper plane up as it comes
   into view (Divi waypoint animation), then it holds. */
.hero-media img{opacity:0;transform:translateY(38px);}
.hero-media img.is-in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);}
@media (prefers-reduced-motion: reduce){
  .hero-media img{opacity:1;transform:none;}
  .logo-track{transition:none;}
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.service-card{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);
  border-radius:var(--radius);padding:40px 36px;display:flex;flex-direction:column;
}
.service-card:nth-child(2){border-top-color:var(--teal);}
.service-card h2{font-size:1.75rem;margin-bottom:.3em;}
.service-card .sub{font-weight:600;color:var(--blue);margin-bottom:1.1em;}
.card-label{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);margin:28px 0 12px;
}
.card-list{list-style:none;margin:0;padding:0;}
.card-list li{position:relative;padding-left:26px;margin-bottom:10px;}
.card-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--gold);border-radius:2px;
}
.walk-away{
  margin-top:26px;padding:20px 22px;background:var(--bg-alt);
  border-left:4px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0;
}
.walk-away .card-label{margin-top:0;}
.service-card .btn{margin-top:32px;align-self:flex-start;}

/* ============================================================
   IMPACT / CASE SNIPPETS
   ============================================================ */
.impact-head{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:44px;}
.snippet-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.snippet{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:32px;font-size:1.06rem;color:#e4eef4;
}
.snippet::before{
  content:"";display:block;width:44px;height:4px;background:var(--gold);
  border-radius:2px;margin-bottom:20px;
}

/* ============================================================
   DIFFERENTIATORS
   ============================================================ */
.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin-top:44px;}
.diff h3{display:flex;align-items:baseline;gap:12px;font-size:1.2rem;}
.diff h3 .num{
  font-size:.85rem;font-weight:800;color:var(--gold-warm);letter-spacing:.08em;
}
.diff p{margin:0;}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.quote{
  max-width:900px;margin:40px auto 0;text-align:center;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.55;color:var(--navy);
  font-weight:500;font-style:italic;
}
.quote::before{
  content:"";display:block;width:52px;height:4px;background:var(--gold);
  border-radius:2px;margin:0 auto 26px;
}

/* ============================================================
   WHO WE WORK WITH
   ============================================================ */
.audience-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.audience-list{list-style:none;margin:26px 0 0;padding:0;}
.audience-list li{
  padding:16px 0 16px 34px;border-bottom:1px solid var(--line);position:relative;
  font-weight:600;color:var(--navy);font-size:1.08rem;
}
.audience-list li:first-child{border-top:1px solid var(--line);}
.audience-list li::before{
  content:"";position:absolute;left:0;top:1.42em;width:16px;height:3px;
  background:var(--gold);border-radius:2px;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{background:var(--navy);color:#fff;text-align:center;padding:96px 0;}
.final-cta h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1em;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .hero-grid,.audience-grid,.service-grid,.snippet-grid,.diff-grid,.footer-grid{
    grid-template-columns:1fr;
  }
  .hero-grid,.audience-grid{gap:40px;}
  .impact-head{grid-template-columns:1fr;align-items:start;}
  .section{padding:64px 0;}
  .hero{padding:72px 0;}

  .nav-toggle{display:block;}
  .main-nav{
    display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(0,61,92,.1);
    padding:12px var(--pad) 20px;
  }
  .main-nav.is-open{display:block;}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;}
  .main-nav a{padding:12px 4px;border-bottom:1px solid var(--line);border-radius:0;}
  .has-sub > a::after{display:none;}
  .sub-menu{
    display:block;position:static;border:0;box-shadow:none;padding:0 0 0 18px;min-width:0;
  }
  .sub-menu a{border-bottom:1px dashed var(--line);}
  .nav-cta{margin:14px 0 0;}
  .nav-cta .btn{display:block;text-align:center;}
  .site-header{position:relative;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .service-card{padding:30px 24px;}
  .logo-wall{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:20px;}
}

/* ============================================================
   UTILITIES (replacing the inline styles in the source design —
   no style= attributes anywhere, per CLAUDE.md)
   ============================================================ */
.mt-sm{margin-top:14px;}
.mt-md{margin-top:22px;}
.mt-lg{margin-top:36px;}
.flush{margin:0;}
.rounded{border-radius:var(--radius);}

/* Hero image sizing — the live site renders the paper plane at a fixed
   450px height with auto width, not scaled to the column. */
.hero-media{display:flex;justify-content:center;}
.hero-media img{height:450px;width:auto;max-width:100%;object-fit:contain;}
@media (max-width:960px){.hero-media img{height:320px;}}

/* Eyebrows on dark bands need the gold, not the teal — teal on navy fails
   contrast. The hero already uses .kicker for the same role. */
.section--navy .eyebrow,.final-cta .eyebrow{color:var(--gold);}
.service-card .eyebrow{margin-bottom:10px;}

/* ============================================================
   INTERIOR PAGES — page hero, cards, long-form prose.
   Same language as the homepage: navy bands, gold eyebrow,
   Lora display type, Inter for UI and body.
   ============================================================ */
.page-hero{background:var(--navy);color:#cfdde6;padding:72px 0 66px;}
.page-hero .eyebrow{color:var(--gold);}
.page-hero h1{color:#fff;margin-bottom:.28em;}
.page-hero .lede{color:#cfdde6;font-size:1.1rem;}
.page-hero--center{text-align:center;}
.page-hero--center .lede{margin-left:auto;margin-right:auto;}

.article-meta{font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0;}

/* Card grids — post, case-study and team listings */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.card-grid--2{grid-template-columns:repeat(2,1fr);}
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-top:4px solid var(--gold);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;
}
.card:hover{text-decoration:none;box-shadow:0 14px 34px rgba(0,61,92,.13);transform:translateY(-3px);}
.card:nth-child(2n){border-top-color:var(--teal);}
.card__img{width:100%;height:210px;object-fit:cover;}
.card__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;}
.card__body h3{margin:0 0 .45em;font-size:1.15rem;}
.card__body .article-meta{color:var(--blue);margin-bottom:10px;}
.card__body p{font-size:.98rem;margin:0;}
.card__more{margin-top:18px;font-weight:600;color:var(--blue);font-size:.94rem;}

/* Team cards keep a portrait crop */
.card--person .card__img{height:280px;object-fit:cover;object-position:top center;}

/* Long-form article / policy body */
.prose{max-width:760px;}
.prose > * + *{margin-top:1.15em;}
.prose h2{font-size:clamp(1.45rem,2.4vw,1.95rem);margin:1.7em 0 .2em;}
.prose h3{font-size:1.22rem;margin:1.5em 0 .1em;color:var(--navy);}
.prose h4{font-size:1.05rem;margin:1.3em 0 .1em;color:var(--navy);}
.prose ul,.prose ol{padding-left:1.2em;margin-top:.6em;}
.prose li{margin-bottom:.5em;}
.prose blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:4px solid var(--gold);
  font-style:italic;color:var(--navy);font-size:1.1rem;
}
.prose img{border-radius:var(--radius);margin:1.6em 0;}
.prose a{text-decoration:underline;text-underline-offset:2px;}
.prose .btn{text-decoration:none;}
.article-hero__img,.page-hero__img{border-radius:var(--radius);margin-bottom:34px;}

/* Third-party embeds (GoHighLevel forms and booking widgets) */
.embed{width:100%;margin:0 auto;}
.embed iframe{display:block;width:100%;border:0;border-radius:var(--radius);}

/* GoHighLevel's form_embed.js hides every iframe it adopts -- it sets
   opacity:0, visibility:hidden, pointer-events:none, position:absolute and
   left:-9999px inline -- and then only reveals it on a handshake that never
   arrives on this white-label host. Verified at launch: a bare iframe with
   the script absent renders fine, and GHL's own documented snippet is hidden
   just the same, so this is their script, not our markup.

   We still want the script, because its postMessage resize is what sizes a
   form correctly at every viewport. So override only the hide, and leave the
   height it sets alone. !important is required: the script writes inline
   styles. Every embed here is an inline layout that should always be
   visible, so unconditionally showing it is correct for this site. */
.embed iframe[data-initial-iframe-hidden]{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  position:relative !important;
  left:auto !important;
}

@media (max-width:960px){
  .card-grid,.card-grid--2{grid-template-columns:1fr;}
  .page-hero{padding:52px 0 48px;}
}
@media (max-width:560px){
  .card-grid{gap:22px;}
}

/* Generated interior pages ------------------------------------------- */
/* A bare .btn (emitted by tools/migrate/json2njk.py from Divi buttons)
   needs a default skin, or it renders as unstyled link text. */
.btn:not([class*="btn--"]){background:var(--navy);color:#fff;}
.btn:not([class*="btn--"]):hover{background:var(--navy-deep);}
.section--navy .btn:not([class*="btn--"]),
.page-hero .btn:not([class*="btn--"]){background:var(--gold);color:var(--navy);}
.prose .btn{display:inline-block;margin:.4em 0;}

/* Divi column rows carried into the design: real widths, stacking on
   mobile. Replaces the column rules that lived in the old sections.css. */
.cols{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;}
.col{flex:0 0 auto;min-width:0;}
.col > * + *{margin-top:1em;}
.col--4_4{flex-basis:100%;}
.col--3_4{flex-basis:calc(75% - 40px);}
.col--2_3{flex-basis:calc(66.66% - 40px);}
.col--1_2{flex-basis:calc(50% - 20px);}
.col--1_3{flex-basis:calc(33.33% - 27px);}
.col--1_4{flex-basis:calc(25% - 30px);}
.col--1_6{flex-basis:calc(16.66% - 34px);}
.col img{width:100%;height:auto;border-radius:var(--radius);}
@media (max-width:960px){.col{flex-basis:100% !important;}}

/* Images inside a hero band are decorative art, not full-bleed banners */
.page-hero img:not(.person-hero__img){max-height:340px;width:auto;margin:28px auto 0;}

/* Service-page components ------------------------------------------- */
/* Divi expressed these as runs of bare <h4> modules; the generator turns
   them into real lists and feature blocks (see tools/migrate/json2njk.py
   column_kind). */
.check-list{list-style:none;margin:0;padding:0;}
.check-list li{
  position:relative;padding:0 0 0 34px;margin-bottom:18px;
  font-size:1.06rem;font-weight:600;color:var(--navy);line-height:1.45;
}
.check-list li::before{
  content:"";position:absolute;left:0;top:.34em;width:18px;height:18px;
  border-radius:4px;background:var(--gold);
}
.check-list li::after{
  content:"";position:absolute;left:5px;top:.62em;width:8px;height:4px;
  border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:rotate(-45deg);
}
.section--navy .check-list li,.page-hero .check-list li{color:#fff;}
.section--navy .check-list li::after,.page-hero .check-list li::after{border-color:var(--navy);}

.feature-list{display:grid;gap:26px;}
.feature{padding-left:22px;border-left:3px solid var(--line);}
.feature h3{font-size:1.12rem;margin:0 0 .35em;color:var(--navy);font-family:var(--font-ui,inherit);}
.feature p{margin:0 0 .6em;}
.feature p:last-child{margin-bottom:0;}
.feature:nth-child(4n+1){border-left-color:var(--gold);}
.feature:nth-child(4n+2){border-left-color:var(--teal);}
.feature:nth-child(4n+3){border-left-color:var(--blue);}
.feature:nth-child(4n+4){border-left-color:var(--gold-warm);}
.section--navy .feature{border-left-color:rgba(255,255,255,.25);}
.section--navy .feature h3{color:#fff;}

/* Section heading sitting beside a list reads better pinned to the top */
.cols .col h2{margin-top:0;}

/* Tall infographics get a sensible reading width rather than filling the
   column — the process diagram is portrait and unreadable at full bleed. */
.figure-tall{display:flex;justify-content:center;}
.figure-tall img{max-width:560px;width:100%;height:auto;border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(0,61,92,.12);}

/* Listing filter ------------------------------------------------------ */
.filter{margin:0 0 34px;max-width:520px;}
.filter__label{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);margin-bottom:8px;
}
.filter__input{
  width:100%;padding:14px 16px;font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
.filter__input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.filter__count{margin:10px 0 0;font-size:.9rem;color:var(--body);}
.filter__empty{margin:0 0 34px;font-size:1.02rem;}
.linklike{
  background:none;border:0;padding:0;font:inherit;color:var(--blue);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}

/* Filter chips */
.filter{margin:0 0 34px;max-width:none;}
.filter__row{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between;}
.filter__search{flex:1 1 300px;max-width:420px;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  padding:10px 20px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--navy);transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.chip:hover{border-color:var(--teal);color:var(--teal);}
.chip.is-active{background:var(--navy);border-color:var(--navy);color:#fff;}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Leadership team grid ------------------------------------------------ */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.person{
  display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:box-shadow .2s ease,transform .2s ease;
}
.person:hover{text-decoration:none;box-shadow:0 14px 34px rgba(0,61,92,.13);transform:translateY(-3px);}
.person__img{
  width:110px;height:110px;border-radius:50%;object-fit:cover;object-position:top center;
  margin-bottom:18px;background:var(--bg-alt);
}
.person__img--none{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading,inherit);font-size:2rem;font-weight:600;
  color:var(--navy);background:var(--bg-alt);border:1px dashed var(--line);
}
.person__name{font-family:"Lora",Georgia,serif;font-size:1.2rem;font-weight:600;color:var(--navy);}
.person__role{font-size:.92rem;color:var(--body);margin:4px 0 14px;}
.pullquote{
  margin-top:22px;padding:18px 22px;background:var(--bg-alt);border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;font-weight:600;color:var(--navy);
}
.section--navy .pullquote{background:rgba(255,255,255,.07);color:#fff;}
.section--navy .check-list li{color:#fff;}
@media (max-width:960px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr;}}

/* Podcast page -------------------------------------------------------- */
.section--teal{background:var(--teal);color:#e6f4f6;}
.section--teal h2,.section--teal h3{color:#fff;}
.section--teal .eyebrow{color:var(--gold);}
.section--gold{background:var(--gold-warm);color:var(--navy);}
.section--gold h2,.section--gold h3{color:var(--navy);}
.section--gold .eyebrow{color:var(--navy-deep);}

.host-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;}
.host{display:flex;gap:20px;align-items:flex-start;}
.host__img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:top center;flex:0 0 auto;}
.host h3{margin:0 0 .35em;font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;}
.host p{margin:0;font-size:.98rem;}

.platforms{display:flex;flex-wrap:wrap;gap:34px;align-items:center;justify-content:center;}
.platform{display:flex;align-items:center;justify-content:center;height:64px;padding:0 10px;opacity:.9;transition:opacity .2s ease,transform .2s ease;}
.platform:hover{opacity:1;transform:translateY(-2px);}
.platform img{max-height:52px;width:auto;}

.guest-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;}
.guest{margin:0;text-align:center;}
.guest img{width:100%;max-width:140px;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:top center;margin:0 auto 10px;}
.guest figcaption{font-size:.92rem;font-weight:600;color:var(--navy);}

.episode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.episode__frame{position:relative;padding-top:56.25%;background:var(--navy-deep);border-radius:var(--radius);overflow:hidden;}
.episode__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.episode__title{margin:12px 0 0;font-weight:600;font-size:.98rem;color:var(--navy);}

@media (max-width:960px){
  .host-grid,.episode-grid{grid-template-columns:1fr;}
  .guest-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){.guest-grid{grid-template-columns:repeat(2,1fr);}}

/* Show cards (On The Air, Resources) */
.show-card{border-top-width:4px;}
.show-card .card__body{padding:30px 30px 34px;}
.show-card h3{font-size:1.32rem;font-family:"Lora",Georgia,serif;}
.show-card__tagline{
  font-family:"Lora",Georgia,serif;font-size:1.08rem;font-style:italic;
  color:var(--teal);margin:0 0 1em;
}
.quote--invert{color:#fff;}
.quote--invert::before{background:var(--gold);}
.section--navy .lede{color:#cfdde6;}

/* Jumpseat page ------------------------------------------------------- */
.reason-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;}
.reason{padding:30px 30px 30px 32px;background:var(--bg-alt);border-radius:var(--radius);border-left:4px solid var(--gold);}
.reason__num{display:block;font-size:.82rem;font-weight:800;letter-spacing:.12em;color:var(--teal);margin-bottom:10px;}
.reason h3{font-size:1.12rem;margin:0 0 .5em;}
.reason p{margin:0;font-size:.99rem;}
.reason:nth-child(2n){border-left-color:var(--teal);}

.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.format{padding:26px 22px;background:rgba(255,255,255,.07);border-radius:var(--radius);}
.format__time{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.format h3{font-size:1.05rem;margin:0 0 .45em;color:#fff;}
.format p{margin:0;font-size:.94rem;}

.cross-list{list-style:none;margin:0;padding:0;}
.cross-list li{position:relative;padding-left:30px;margin-bottom:14px;font-size:1rem;color:var(--body);}
.cross-list li::before{
  content:"";position:absolute;left:2px;top:.5em;width:14px;height:2px;
  background:var(--red);transform:rotate(45deg);
}
.cross-list li::after{
  content:"";position:absolute;left:2px;top:.5em;width:14px;height:2px;
  background:var(--red);transform:rotate(-45deg);
}
@media (max-width:960px){
  .reason-grid,.format-grid{grid-template-columns:1fr;}
}

/* Embeds get room to breathe; GHL's script resizes the iframe to fit. */
.embed-wrap{max-width:820px;margin:0 auto;}
.format-grid--light .format{background:var(--bg-alt);}
.format-grid--light .format h3{color:var(--navy);}
.format-grid--light .format__time{color:var(--teal);}
.format-grid--light .format p{color:var(--body);}

/* Hero artwork sits beside the copy and never dominates the band. */
.hero-art{max-height:260px;width:auto;margin-left:auto;border-radius:var(--radius);}
@media (max-width:960px){.hero-art{max-height:200px;margin:24px auto 0;}}
.service-card .eyebrow{margin-bottom:6px;}

/* Episode player sits above the transcript on video posts. */
.episode-player{max-width:900px;margin:0 auto;}
.episode-player .episode__frame{box-shadow:0 18px 44px rgba(0,61,92,.18);}

/* Reason cards on a dark band, and light-band impact snippets */
.reason-grid--invert{grid-template-columns:repeat(3,1fr);}
.reason-grid--invert .reason{background:rgba(255,255,255,.07);border-left-color:var(--gold);}
.reason-grid--invert .reason h3{color:#fff;margin:0;}
.reason-grid--invert .reason:nth-child(3n+2){border-left-color:var(--teal);}
.reason-grid--invert .reason:nth-child(3n+3){border-left-color:var(--blue);}
.snippet--light{
  background:#fff;border:1px solid var(--line);color:var(--body);
}
.snippet--light::before{background:var(--gold);}
@media (max-width:960px){.reason-grid--invert{grid-template-columns:1fr;}}

/* Numbered process steps */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.step{position:relative;padding:34px 30px 30px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);border-top:4px solid var(--gold);}
.step:nth-child(2){border-top-color:var(--teal);}
.step:nth-child(3){border-top-color:var(--blue);}
.step__num{
  display:block;font-family:"Lora",Georgia,serif;font-size:2.1rem;font-weight:600;
  line-height:1;color:var(--gold-warm);margin-bottom:14px;
}
.step:nth-child(2) .step__num{color:var(--teal);}
.step:nth-child(3) .step__num{color:var(--blue);}
.step h3{font-size:1.15rem;margin:0 0 .5em;}
.step p{margin:0;font-size:.99rem;}
@media (max-width:960px){.step-grid{grid-template-columns:1fr;}}

/* Case studies -------------------------------------------------------- */
.case-client{
  margin:18px 0 0;font-size:1.02rem;color:#cfdde6;
}
.case-client span{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-right:12px;
}
.case-hero__img{width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius);}

/* The source writes each section as an h4 label ("Challenge:", "The
   Results:"). Style them as real section headings rather than bold runs. */
.case-body h4{
  margin:2.2em 0 .5em;padding-top:1.4em;border-top:1px solid var(--line);
  font-family:"Lora",Georgia,serif;font-size:1.45rem;font-weight:600;
  color:var(--navy);letter-spacing:-.01em;
}
.case-body > h4:first-child{margin-top:0;padding-top:0;border-top:0;}
.case-body ul{list-style:none;padding:0;margin:1.2em 0;}
.case-body li{
  position:relative;padding:16px 20px 16px 52px;margin-bottom:12px;
  background:var(--bg-alt);border-radius:var(--radius);border-left:4px solid var(--gold);
}
.case-body li::before{
  content:"";position:absolute;left:22px;top:1.5em;width:10px;height:10px;
  border-radius:50%;background:var(--teal);
}
.case-body li strong{color:var(--navy);}

/* Case study list — numbered, text-forward rows. */
.case-list{list-style:none;margin:0;padding:0;display:grid;gap:28px;counter-reset:case;}
.case{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:36px;align-items:start;
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:var(--radius);padding:38px 42px;
  transition:box-shadow .2s ease,transform .2s ease;
}
.case:hover{box-shadow:0 16px 38px rgba(0,61,92,.12);transform:translateY(-2px);}
.case:nth-child(2){border-left-color:var(--teal);}
.case:nth-child(3){border-left-color:var(--blue);}
.case__index{
  font-family:"Lora",Georgia,serif;font-size:3.2rem;font-weight:600;line-height:1;
  color:var(--gold-warm);min-width:2ch;
}
.case:nth-child(2) .case__index{color:var(--teal);}
.case:nth-child(3) .case__index{color:var(--blue);}
.case__body h2{font-size:clamp(1.3rem,2vw,1.7rem);margin:.1em 0 .35em;}
.case__body h2 a{color:var(--navy);text-decoration:none;}
.case__body h2 a:hover{color:var(--teal);text-decoration:none;}
.case__client{font-size:.92rem;font-weight:600;color:var(--teal);margin:0 0 1em;}
@media (max-width:760px){
  .case{grid-template-columns:1fr;gap:12px;padding:30px 26px;}
  .case__index{font-size:2.4rem;}
}

/* Team bio pages ------------------------------------------------------ */
.person-hero{display:flex;align-items:center;gap:48px;justify-content:space-between;}
.person-hero__text{flex:1 1 auto;}
.person-hero__role{
  margin:14px 0 0;font-family:"Lora",Georgia,serif;font-size:1.25rem;
  font-style:italic;color:var(--gold);
}
/* Most bios carry a second role -- the Travel Again board seat -- under the
   outside position. Quieter so the two read as a pair, not a repeat. */
.person-hero__role--second{
  margin-top:6px;font-size:1.08rem;color:#cfdde6;
}
.person-hero__img{
  flex:0 0 auto;width:200px;height:200px;border-radius:50%;
  object-fit:cover;object-position:top center;
  border:5px solid rgba(255,255,255,.18);
}

/* The bio is an intro paragraph followed by four or five short titled
   lists. Running them down one column wastes the page, so the lists flow
   into two balanced columns with each heading kept beside its own list. */
.person-body{max-width:none;}
.person-body > p:first-of-type{
  /* Full content width so the intro and its rule line up with the two
     columns below rather than stopping short of them. */
  column-span:all;max-width:none;font-size:1.12rem;line-height:1.7;
  margin:0 0 2.4em;padding-bottom:2em;border-bottom:1px solid var(--line);
}
.person-columns{
  columns:2;column-gap:56px;
}
.person-columns h3{
  break-after:avoid;break-inside:avoid;
  margin:0 0 .6em;font-family:"Lora",Georgia,serif;font-size:1.3rem;
  font-weight:600;color:var(--navy);
}
.person-columns > *{break-inside:avoid;}
.person-columns ul{list-style:none;padding:0;margin:0 0 2.4em;}
.person-columns li{
  position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--line);
  font-size:1rem;
}
.person-columns li:last-child{border-bottom:0;}
.person-columns li::before{
  content:"";position:absolute;left:2px;top:1.22em;width:11px;height:2px;background:var(--gold);
}
.person-columns p{margin:0 0 2.2em;}
@media (max-width:860px){
  .person-columns{columns:1;}
  .person-hero{flex-direction:column-reverse;align-items:flex-start;gap:28px;}
  .person-hero__img{width:140px;height:140px;}
}

/* Closing CTA band + footer artwork ----------------------------------- */
.footer-cta{
  position:relative;overflow:hidden;background:var(--navy);color:#fff;
  text-align:center;padding:88px 0 96px;
}
.footer-cta h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 1em;}
.footer-cta .eyebrow{color:var(--gold);}
/* The plane flies in from the left as the band enters the viewport. */
.footer-cta__plane{
  position:absolute;left:0;bottom:26px;width:170px;height:auto;
  transform:translateX(-40vw);opacity:0;pointer-events:none;
}
.footer-cta.is-in .footer-cta__plane{
  transform:translateX(76vw);opacity:1;
  /* Ease-out so it arrives and settles rather than drifting; 4.5s read as
     lag rather than motion. */
  transition:transform 2.2s cubic-bezier(.16,.84,.34,1),opacity .5s ease;
}
/* ============================================================
   FOOTER — contact band over the full-bleed artwork, then a navy
   legal bar, matching the source layout.
   ============================================================ */
.site-footer{color:#fff;font-size:.98rem;}
.site-footer a{color:#fff;text-decoration:none;}
.site-footer a:hover{color:var(--gold);text-decoration:none;}
.site-footer__main{
  background:var(--teal) url("/images/footer-idea.webp") center right / cover no-repeat;
}
.site-footer__grid{
  display:flex;align-items:center;justify-content:space-between;gap:60px;
  min-height:340px;padding-top:56px;padding-bottom:56px;
}
/* The artwork has a dashed flight path across its middle. Sit the logo
   above it rather than letting the line strike through the wordmark. */
.site-footer__logo{align-self:flex-start;margin-top:6px;}
.site-footer__logo{display:block;line-height:0;flex:0 0 auto;}
.site-footer__logo img{width:250px;height:auto;}
.footer-links{list-style:none;margin:0;padding:0;flex:0 0 auto;max-width:330px;}
.footer-links li{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;}
.footer-links li:last-child{margin-bottom:0;}
.footer-links svg{
  flex:0 0 auto;width:20px;height:20px;fill:#fff;margin-top:2px;
}
.site-footer__bottom{background:var(--navy);text-align:center;padding:24px 0 26px;font-size:.9rem;}
.site-footer__bottom p{margin:0 0 6px;}
.site-footer__bottom p:last-child{margin:0;color:#cfdde6;}
.site-footer__legal a{color:var(--gold);}
.site-footer__legal span{margin:0 8px;color:#cfdde6;}
@media (max-width:860px){
  .site-footer__grid{flex-direction:column;align-items:flex-start;gap:36px;min-height:0;}
  .site-footer__main{background-position:center;}
  .footer-links{max-width:none;}
}
@media (prefers-reduced-motion: reduce){
  .footer-cta__plane{transform:translateX(70vw);opacity:.9;transition:none;}
}
@media (max-width:760px){
  .footer-cta__plane{width:110px;bottom:12px;}
  .site-footer{background-image:none;}
}