/*
 * Extracted verbatim from the archived production Code Modules.
 * Source order is preserved for visual parity and browser caching.
 */

/* body-01.html */
/* =========================================================
   OSPREY — BOOKING PAGE
   FIXES:
   ✅ Removed grey hero background
   ✅ Dark gray heading
   ✅ Larger squiggle
   ✅ Much wider Bookeo embed so it doesn't get smashed
   ✅ Kept cards centered side-by-side below
========================================================= */

:root{
  --os-navy:#193258;
  --os-gold:#d6b05c;
  --os-gold-dark:#b6903f;
  --os-cream:#f8f3e8;
  --os-white:#ffffff;
  --os-text:#1b2c45;
  --os-muted:#6f7b8c;
  --os-dark-gray:#4f5965;
  --os-shadow:0 18px 45px rgba(12,27,51,.14);
  --os-max:1280px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--os-cream);
  font-family:Arial, Helvetica, sans-serif;
  color:var(--os-text);
}

.os-booking-page{
  width:100%;
  overflow:hidden;
  background:linear-gradient(180deg,#f8f3e8 0%, #f6efdf 100%);
}

/* =========================================================
   HERO
========================================================= */
.os-booking-hero{
  padding:3.5rem 1.5rem 2.1rem;
  text-align:center;
  background:transparent;
}

.os-booking-hero__inner{
  max-width:var(--os-max);
  margin:0 auto;
}

.os-booking-title{
  margin:0;
  font-family:"Bungee", Impact, sans-serif;
  font-size:clamp(2.2rem,4.8vw,4.35rem);
  line-height:1.03;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--os-dark-gray);
}

.os-booking-squiggle{
  display:block;
  width:150px;
  max-width:36vw;
  margin:1.1rem auto 0;
}

/* =========================================================
   MAIN
========================================================= */
.os-booking-main{
  max-width:var(--os-max);
  margin:0 auto;
  padding:0 1.5rem 4.25rem;
}

/* =========================================================
   BOOKEO EMBED
========================================================= */
.os-booking-widgetShell{
  width:min(100%, 1120px);
  margin:0 auto;
}

.os-booking-widgetWrap{
  position:relative;
  width:100%;
  padding:1.35rem;
  border-radius:30px;
  background:#f4f4f4;
  border:1px solid rgba(25,50,88,.08);
  box-shadow:var(--os-shadow);
}

.os-booking-widget{
  width:100%;
  border-radius:22px;
  overflow:visible;
  background:#fff;
}

/* IMPORTANT:
   The earlier narrow container was crushing the Bookeo layout.
   Here we let it breathe and avoid forcing a tiny width.
*/
.os-booking-widget iframe{
  width:100% !important;
  min-width:100% !important;
  display:block;
  border:0 !important;
  background:#fff;
  overflow:visible !important;
}

/* In case Bookeo injects wrapper tables/divs */
.os-booking-widget > div,
.os-booking-widget table{
  width:100% !important;
  max-width:100% !important;
}

/* =========================================================
   LOWER CARDS
========================================================= */
.os-booking-lower{
  display:grid;
  grid-template-columns:repeat(2, minmax(320px, 420px));
  justify-content:center;
  gap:1.25rem;
  margin-top:1.7rem;
  align-items:stretch;
}

.os-booking-card{
  background:#fff;
  border:1px solid rgba(25,50,88,.08);
  border-radius:26px;
  box-shadow:var(--os-shadow);
  padding:1.35rem 1.25rem 1.3rem;
  display:flex;
  flex-direction:column;
  height:100%;
}

.os-booking-eyebrow{
  margin:0 0 .45rem;
  font-family:"Caviar Dreams", Arial, sans-serif;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--os-gold-dark);
}

.os-booking-title-small{
  margin:0 0 .8rem;
  font-family:"Anton", Impact, sans-serif;
  font-size:1.68rem;
  line-height:1.05;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--os-navy);
}

.os-booking-text{
  font-size:.98rem;
  line-height:1.72;
  color:var(--os-muted);
}

.os-booking-steps{
  counter-reset:step;
  display:grid;
  gap:.95rem;
  margin-top:.9rem;
}

.os-booking-step{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:.85rem;
  align-items:start;
}

.os-booking-step::before{
  counter-increment:step;
  content:counter(step);
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--os-navy);
  color:#fff;
  font-family:"Anton", Impact, sans-serif;
  font-size:1.1rem;
  letter-spacing:.04em;
}

.os-booking-step strong{
  display:block;
  margin:.15rem 0 .22rem;
  color:var(--os-navy);
  font-size:1rem;
  line-height:1.3;
}

.os-booking-step span{
  display:block;
  color:var(--os-muted);
  line-height:1.6;
  font-size:.95rem;
}

.os-booking-card__body{
  display:flex;
  flex-direction:column;
  height:100%;
}

.os-booking-note{
  margin:.15rem 0 1rem;
  padding:.95rem 1rem;
  border-radius:14px;
  background:rgba(214,176,92,.12);
  border:1px solid rgba(214,176,92,.28);
  color:var(--os-text);
  font-size:.93rem;
  line-height:1.65;
}

.os-booking-spacer{
  flex:1 1 auto;
}

.os-booking-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:14px 32px;
  border-radius:8px;
  background:#d6b05c;
  color:#0a1533 !important;
  text-decoration:none;
  font-family:"Big Shoulders Display","Anton",Arial,sans-serif;
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:0 12px 22px rgba(214,176,92,0.25);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.os-booking-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 28px rgba(214,176,92,0.32);
  background:#dfbb6d;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1200px){
  .os-booking-widgetShell{
    width:min(100%, 1000px);
  }
}

@media (max-width:980px){
  .os-booking-widgetShell{
    width:100%;
  }

  .os-booking-lower{
    grid-template-columns:1fr;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:767px){
  .os-booking-hero{
    padding:2.9rem 1rem 1.65rem;
  }

  .os-booking-main{
    padding:0 1rem 3.8rem;
  }

  .os-booking-title{
    font-size:clamp(1.9rem,9vw,3rem);
  }

  .os-booking-squiggle{
    width:112px;
    margin-top:.9rem;
  }

  .os-booking-widgetWrap{
    padding:.8rem;
    border-radius:22px;
  }

  .os-booking-widget{
    border-radius:16px;
  }

  .os-booking-card{
    border-radius:20px;
    padding:1.1rem 1rem;
  }

  .os-booking-btn{
    width:100%;
  }
}