/* ===================================================================
   demo-tickets.com - Design System
   -------------------------------------------------------------------
   Concept: the product IS a ticket, so the interface borrows its own
   vocabulary - boarding-pass stubs, perforated tear-lines, PNR-style
   monospace codes, and a verification "stamp" - rather than generic
   SaaS card/gradient conventions.

   Palette
     --navy   #12233F  primary / header / ink of authority
     --ink    #0B1220  body text
     --paper  #EEF1F5  background (cool paper, not warm cream)
     --amber  #E8A33D  primary CTA / boarding-pass accent stripe
     --teal   #1B7F68  verified / success stamp
     --slate  #5B6472  secondary text
     --line   #D8DCE3  borders / perforation

   Type
     Display : 'Big Shoulders Display' - condensed, stencil-like,
               used ONLY for large hero numerals/headlines (restraint)
     Heading : 'Inter' 700 - H2-H4
     Body    : 'Inter' 400/500
     Mono    : 'IBM Plex Mono' - PNR codes, order refs, eyebrows
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy:#12233F;
  --navy-2:#0C1A30;
  --ink:#0B1220;
  --paper:#EEF1F5;
  --paper-2:#FFFFFF;
  --amber:#E8A33D;
  --amber-dark:#C7862A;
  --teal:#1B7F68;
  --teal-light:#E3F3EE;
  --slate:#5B6472;
  --line:#D8DCE3;

  --display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(11,18,32,.06), 0 8px 24px -8px rgba(11,18,32,.12);
  --shadow-lg: 0 4px 8px rgba(11,18,32,.06), 0 24px 48px -12px rgba(11,18,32,.18);
  --maxw: 1160px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(232,163,61,.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 10%, rgba(27,127,104,.08), transparent 55%),
    var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;font-weight:800;letter-spacing:-.01em;}

:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
.section--tight{padding:56px 0;}
.section--navy{
  background:linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 65%, #0A1526 100%);
  color:#fff;
  position:relative;
}
.section--navy::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 600px 300px at 15% 0%, rgba(232,163,61,.14), transparent 60%);
}
.section--paper2{background:var(--paper-2);}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--teal);}
.section--navy .eyebrow{color:var(--amber);}
.section--navy .eyebrow::before{background:var(--amber);}

h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,6vw,72px);letter-spacing:-.01em;}
h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,44px);}
h3{font-size:22px;}
p{color:var(--slate);margin:0 0 1em;}
.section--navy p{color:#C7D0DE;}
.lede{font-size:19px;color:var(--slate);max-width:56ch;}
.section--navy .lede{color:#C7D0DE;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:8px;font-weight:700;font-size:15px;
  border:1px solid transparent;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{background:linear-gradient(180deg, #EDAE4E, var(--amber));color:var(--navy-2);box-shadow:0 2px 6px rgba(232,163,61,.35), inset 0 1px 0 rgba(255,255,255,.35);}
.btn-primary:hover{background:linear-gradient(180deg, #EDAE4E, var(--amber-dark));box-shadow:0 10px 24px -6px rgba(232,163,61,.6);transform:translateY(-1px);}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff;}
.btn-ghost:hover{border-color:#fff;}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:#fff;}
.btn-sm{padding:10px 16px;font-size:13.5px;}
.btn-block{width:100%;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(238,241,245,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(11,18,32,.02), 0 6px 20px -12px rgba(11,18,32,.15);
}
.text-gradient{
  background:linear-gradient(100deg, var(--navy) 20%, var(--teal) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--navy);}
.logo img{display:block;}
.logo .mark{
  width:30px;height:30px;border-radius:7px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;color:var(--amber);
  font-family:var(--mono);font-size:13px;font-weight:700;
}
.nav{display:flex;align-items:center;gap:28px;}
.nav a{font-size:14.5px;font-weight:600;color:var(--ink);position:relative;padding-bottom:3px;transition:color .15s ease;}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--teal);
  transition:right .2s ease;
}
.nav a:not(.btn):hover{color:var(--teal);}
.nav a:not(.btn):hover::after{right:0;}
.header-cta{display:flex;align-items:center;gap:14px;}
.header-cta .wa{font-size:13.5px;font-weight:700;color:var(--teal);display:flex;align-items:center;gap:6px;}
.nav-toggle{display:none;background:none;border:0;font-size:22px;}

@media(max-width:900px){
  .nav{display:none;}
  .nav-toggle{display:block;}
}

/* ---------- Perforated ticket-stub divider (signature element) ---------- */
.tear{
  position:relative;height:34px;
  background:
    radial-gradient(circle at 0 50%, transparent 12px, var(--paper) 12.5px) left/34px 34px no-repeat,
    radial-gradient(circle at 100% 50%, transparent 12px, var(--paper) 12.5px) right/34px 34px no-repeat;
}
.tear::after{
  content:"";position:absolute;left:34px;right:34px;top:50%;transform:translateY(-50%);
  border-top:2px dashed var(--line);
}
.section--navy + .section .tear{background:none;}

/* ---------- Boarding-pass hero card ---------- */
.pass{
  background:var(--paper-2);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:1fr 130px;
  overflow:hidden;
  border:1px solid var(--line);
}
.pass-main{padding:28px 26px;}
.pass-row{display:flex;justify-content:space-between;gap:18px;margin-bottom:22px;}
.pass-field{}
.pass-field .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:4px;}
.pass-field .v{font-weight:800;font-size:16px;color:var(--navy);}
.pass-field .v.big{font-family:var(--display);font-size:30px;}
.pass-route{display:flex;align-items:center;gap:14px;margin:20px 0;}
.pass-route .dots{flex:1;border-top:2px dashed var(--line);position:relative;}
.pass-route .dots::after{content:"✈";position:absolute;top:-11px;left:50%;transform:translateX(-50%);color:var(--amber);}
.pass-stub{
  background:var(--navy);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:20px 10px;
  border-left:2px dashed rgba(255,255,255,.25);
  position:relative;
}
.pass-stub .stub-code{font-family:var(--mono);font-size:12px;letter-spacing:.08em;writing-mode:vertical-rl;transform:rotate(180deg);}
.pass-stub .barcode{width:22px;height:70px;background:
  repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px);}

/* ---------- Verified stamp ---------- */
.stamp{
  display:inline-flex;align-items:center;gap:8px;
  border:2px solid var(--teal);color:var(--teal);
  font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 14px;border-radius:100px;background:var(--teal-light);
}
.stamp::before{content:"✓";font-weight:800;}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:1fr 1fr;}
@media(max-width:900px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.card:hover, .card.hoverable:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:#C9D6E0;
}
.card .num{font-family:var(--mono);color:var(--amber-dark);font-weight:700;font-size:13px;letter-spacing:.08em;margin-bottom:10px;}

.badge-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.badge{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:8px 14px;color:var(--navy);
}
.badge svg,.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);}

.avatar-row{display:flex;}
.avatar-row .a{width:34px;height:34px;border-radius:50%;background:var(--navy);border:2px solid var(--paper-2);margin-left:-10px;}
.avatar-row .a:first-child{margin-left:0;}

table.compare{width:100%;border-collapse:collapse;background:var(--paper-2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);}
table.compare th,table.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;}
table.compare th{background:var(--navy);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
table.compare td.yes{color:var(--teal);font-weight:700;}
table.compare td.no{color:#B34433;font-weight:700;}

/* ---------- Forms ---------- */
.field{margin-bottom:18px;}
.field label{display:block;font-weight:700;font-size:13.5px;margin-bottom:7px;color:var(--navy);}
.field .hint{font-size:12px;color:var(--slate);margin-top:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--sans);font-size:15px;background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);outline:none;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:640px){.field-row{grid-template-columns:1fr;}}

/* ---------- Wizard ---------- */
.wizard{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:640px;margin:0 auto;overflow:hidden;}
.wizard-progress{height:5px;background:var(--line);}
.wizard-progress-bar{height:100%;background:var(--amber);transition:width .3s ease;width:25%;}
.wizard-body{padding:40px 36px;}
.wizard-step-label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:10px;}
.wizard-options{display:grid;gap:12px;margin-top:24px;}
.wizard-option{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font-weight:700;font-size:15px;color:var(--navy);transition:.15s;text-align:left;
}
.wizard-option:hover{border-color:var(--teal);background:var(--teal-light);}
.wizard-option.selected{border-color:var(--teal);background:var(--teal-light);}
.wizard-nav{display:flex;justify-content:space-between;padding:20px 36px;border-top:1px solid var(--line);}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-2);color:#C7D0DE;padding:64px 0 28px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px;}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-col h4{color:#fff;font-size:13px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;}
.foot-col a{display:block;font-size:14px;padding:5px 0;color:#AAB6C9;}
.foot-col a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#8291A6;}

/* ---------- Utility ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mx-auto{margin-left:auto;margin-right:auto;}
.small{font-size:13px;color:var(--slate);}
.flex{display:flex;align-items:center;}
.gap-8{gap:8px;}
.gap-16{gap:16px;}

@media(max-width:640px){
  .section{padding:56px 0;}
  .pass{grid-template-columns:1fr;}
  .pass-stub{flex-direction:row;border-left:none;border-top:2px dashed rgba(255,255,255,.25);}
  .pass-stub .stub-code{writing-mode:horizontal-tb;transform:none;}
}

/* ===================================================================
   Booking widget (Flight / Hotel / Both tabs)
   =================================================================== */
.booking-widget{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:22px;max-width:640px;
}
.bw-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;background:var(--paper);border-radius:10px;padding:6px;margin-bottom:18px;}
.bw-tab{
  padding:12px 10px;border-radius:7px;border:0;background:transparent;font-weight:700;font-size:13.5px;
  letter-spacing:.03em;color:var(--slate);cursor:pointer;transition:.15s;
}
.bw-tab.active{background:var(--teal);color:#fff;box-shadow:0 4px 12px -4px rgba(27,127,104,.5);}

.bw-trip-pills{display:inline-flex;background:var(--paper);border-radius:100px;padding:5px;gap:2px;margin-bottom:20px;}
.bw-pill{
  padding:9px 16px;border-radius:100px;border:0;background:transparent;font-weight:700;font-size:12.5px;
  letter-spacing:.03em;color:var(--slate);cursor:pointer;display:flex;align-items:center;gap:7px;
}
.bw-pill .ring{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);display:inline-block;position:relative;}
.bw-pill.active{color:var(--teal);}
.bw-pill.active .ring{border-color:var(--teal);}
.bw-pill.active .ring::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--teal);}

.bw-section-label{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin:18px 0 12px;display:flex;align-items:center;gap:8px;}
.bw-section-label::before{content:"";width:4px;height:14px;background:var(--amber);border-radius:2px;}

.bw-field{position:relative;margin-bottom:16px;}
.bw-field label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-bottom:7px;}
.bw-field input{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:8px;font-size:15px;
  font-family:var(--sans);background:#fff;color:var(--ink);
}
.bw-field input:focus{border-color:var(--teal);outline:none;}
.bw-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){.bw-row{grid-template-columns:1fr;}}

.bw-suggest{
  position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-lg);z-index:20;margin-top:6px;max-height:260px;overflow-y:auto;
  display:none;
}
.bw-suggest.open{display:block;}
.bw-suggest-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--line);
}
.bw-suggest-item:last-child{border-bottom:0;}
.bw-suggest-item:hover{background:var(--teal-light);}
.bw-suggest-item .main{font-weight:700;font-size:14px;color:var(--navy);}
.bw-suggest-item .sub{font-size:12px;color:var(--slate);margin-top:2px;}
.bw-suggest-item .code{font-family:var(--mono);font-size:12px;color:var(--teal);white-space:nowrap;}

.bw-route-block{border-top:1px dashed var(--line);padding-top:16px;margin-top:6px;position:relative;}
.bw-route-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.bw-route-head span{font-weight:800;font-size:13px;color:var(--navy);}
.bw-route-remove{background:none;border:0;color:var(--slate);font-size:18px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px;}
.bw-route-remove:hover{background:#FBEAEA;color:#B34433;}

.bw-add-link{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--navy);
  font-weight:700;font-size:13.5px;cursor:pointer;padding:6px 0;margin-bottom:14px;
}
.bw-add-link::before{content:"+";font-size:16px;color:var(--teal);font-weight:800;}
.bw-add-link:hover{color:var(--teal);}

.bw-hotel-block + .bw-hotel-block{border-top:1px dashed var(--line);padding-top:16px;margin-top:6px;}

.bw-actions{margin-top:6px;}

/* ===================================================================
   Airline logo marquee
   =================================================================== */
.airline-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.airline-track{display:flex;gap:56px;width:max-content;animation:airline-scroll 28s linear infinite;align-items:center;}
.airline-track:hover{animation-play-state:paused;}
.airline-chip{
  display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--navy);
  white-space:nowrap;opacity:.75;letter-spacing:.01em;
}
.airline-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);}
@keyframes airline-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .airline-track{animation:none;}
}

/* ===================================================================
   Testimonials
   =================================================================== */
.testi-card{border-radius:var(--radius-lg);padding:28px;position:relative;box-shadow:var(--shadow);}
.testi-card.dark{background:var(--navy);color:#fff;}
.testi-card.light{background:var(--paper-2);border:1px solid var(--line);}
.testi-quote{
  position:absolute;top:24px;right:24px;width:38px;height:38px;border-radius:50%;
  background:var(--teal-light);color:var(--teal);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:16px;
}
.testi-card.dark .testi-quote{background:rgba(255,255,255,.1);color:var(--amber);}
.testi-text{font-size:16px;line-height:1.6;margin-bottom:22px;max-width:85%;}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0;}
.testi-card.dark .testi-avatar{background:var(--amber);color:var(--navy-2);}
.testi-name{font-weight:800;font-size:14.5px;}
.testi-stars{color:var(--amber-dark);font-size:13px;margin-top:2px;}
.testi-card.dark .testi-stars{color:var(--amber);}

/* ===================================================================
   Booking process steps
   =================================================================== */
.process-step{text-align:center;position:relative;}
.process-icon{
  width:96px;height:96px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative;box-shadow:var(--shadow);
}
.process-icon svg{width:36px;height:36px;stroke:var(--navy);}
.process-num{
  position:absolute;top:-6px;right:-4px;width:28px;height:28px;border-radius:50%;background:var(--teal);
  color:#fff;font-family:var(--mono);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--paper-2);
}
.process-step h3{font-size:17px;margin-bottom:8px;}
.process-step p{font-size:14px;max-width:26ch;margin:0 auto;}

/* ===================================================================
   3-step order flow (Route Details / Passenger Details / Additional Details)
   =================================================================== */
.of-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;}
@media(max-width:900px){.of-layout{grid-template-columns:1fr;}}

.step-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:24px;}
@media(max-width:640px){.step-tabs{grid-template-columns:1fr;}}
.step-tab{
  display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--paper-2);font-weight:700;font-size:14px;color:var(--slate);
  cursor:default;transition:.15s;
}
.step-tab .num{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:700;background:var(--paper);color:var(--slate);flex-shrink:0;
}
.step-tab.done{background:var(--teal);border-color:var(--teal);color:#fff;}
.step-tab.done .num{background:#fff;color:var(--teal);}
.step-tab.done{cursor:pointer;}
.step-tab.active{border-color:var(--teal);color:var(--navy);}
.step-tab.active .num{background:var(--teal);color:#fff;}

.of-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:26px;}
.of-panel input[type="text"],
.of-panel input[type="email"],
.of-panel input[type="tel"],
.of-panel input[type="date"],
.of-panel select,
.of-panel textarea{
  width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:8px;font-size:15px;
  font-family:var(--sans);background:#fff;color:var(--ink);
}
.of-panel input:focus, .of-panel select:focus, .of-panel textarea:focus{border-color:var(--teal);outline:none;}
.of-field-label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);margin-bottom:6px;}
.of-section-title{font-weight:800;font-size:15px;color:var(--navy);margin-bottom:14px;}
.of-passenger-block{border-top:1px dashed var(--line);padding-top:16px;margin-top:16px;}
.of-passenger-block:first-of-type{border-top:0;padding-top:0;margin-top:0;}
.of-passenger-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.of-passenger-head span{font-weight:800;font-size:13.5px;color:var(--navy);}
.of-row-3{display:grid;grid-template-columns:110px 1fr 1fr;gap:12px;margin-bottom:14px;}
.of-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
@media(max-width:560px){.of-row-3,.of-row-2{grid-template-columns:1fr;}}
.of-phone-row{display:grid;grid-template-columns:130px 1fr;gap:12px;margin-bottom:14px;}
@media(max-width:560px){.of-phone-row{grid-template-columns:1fr;}}

/* Order summary sidebar */
.summary-panel{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);position:sticky;top:96px;}
.summary-head{background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;font-size:14.5px;letter-spacing:.03em;padding:14px 16px;}
.currency-select{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:12px;font-weight:700;padding:6px 10px;border-radius:100px;cursor:pointer;
  max-width:150px;font-family:var(--sans);
}
.currency-select option{color:var(--ink);background:#fff;}
.summary-body{background:var(--paper-2);padding:0;}
.summary-type{background:var(--paper);text-align:center;font-weight:700;font-size:13px;color:var(--navy);padding:10px;letter-spacing:.04em;text-transform:uppercase;}
.summary-route-block{padding:16px 18px;border-bottom:1px solid var(--line);}
.summary-route-line{font-size:13.5px;color:var(--navy);font-weight:600;}
.summary-route-arrow{color:var(--teal);text-align:center;margin:4px 0;font-size:14px;}
.summary-route-date{font-size:12px;color:var(--slate);margin-top:4px;}
.summary-rows{padding:14px 18px;}
.summary-row{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;padding:8px 0;color:var(--navy);}
.summary-row .badge-count{background:var(--teal);color:#fff;font-size:11px;font-weight:700;border-radius:100px;padding:1px 8px;margin-left:6px;}
.summary-row .badge-pct{background:var(--amber);color:var(--navy-2);font-size:11px;font-weight:700;border-radius:100px;padding:1px 8px;margin-left:6px;}
.summary-divider{border-top:1px dashed var(--line);margin:6px 0;}
.summary-total{display:flex;justify-content:space-between;align-items:center;background:var(--paper);padding:14px 18px;font-weight:800;font-size:15.5px;color:var(--navy);}

.of-empty-note{color:var(--slate);font-size:13.5px;padding:20px;text-align:center;}

/* ===================================================================
   Blog article body (rendered HTML content from blog_posts.content)
   =================================================================== */
.blog-content{font-size:17px;line-height:1.75;color:var(--ink);}
.blog-content p{margin:0 0 1.4em;color:var(--ink);}
.blog-content h2{font-size:26px;margin:1.6em 0 .6em;}
.blog-content h3{font-size:20px;margin:1.4em 0 .5em;}
.blog-content a{color:var(--teal);text-decoration:underline;}
.blog-content ul,.blog-content ol{margin:0 0 1.4em;padding-left:1.4em;}
.blog-content li{margin-bottom:.5em;}
.blog-content img{max-width:100%;border-radius:10px;margin:1.2em 0;}
.blog-content blockquote{border-left:3px solid var(--amber);padding-left:18px;margin:1.4em 0;color:var(--slate);font-style:italic;}

/* ===================================================================
   Blog headings - the global h1 (clamp 40-72px) is sized for hero
   sections, too large for a blog index title or article headline.
   =================================================================== */
.blog-h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,42px);letter-spacing:-.01em;line-height:1.2;}
.blog-page-title{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,36px);line-height:1.25;margin-bottom:14px;}

/* ===================================================================
   Blog post layout: article + "Recent Posts" sidebar
   =================================================================== */
.blog-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;}
@media(max-width:900px){.blog-layout{grid-template-columns:1fr;}}

.recent-posts-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px;position:sticky;top:96px;}
.recent-posts-panel h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);margin-bottom:16px;}
.recent-post-item{display:flex;gap:12px;text-decoration:none;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);}
.recent-post-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.recent-post-item img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--paper);}
.recent-post-item .thumb-fallback{width:64px;height:64px;border-radius:8px;flex-shrink:0;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--slate);font-size:11px;text-align:center;}
.recent-post-item h4{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.35;margin:0 0 4px;}
.recent-post-item .rp-date{font-size:11.5px;color:var(--slate);}