/* ══ Offers — direct vs OTA. Warm dark ground, the direct column in
       cream so it comes forward. Breakpoints last, on purpose. ══ */
    .page-offers .of-cmp{background:var(--dark);color:var(--cream);}
    .page-offers .of-cmp__head{text-align:center;max-width:680px;margin:0 auto var(--space-10);}
    .page-offers .of-cmp__eyebrow{display:block;font-family:var(--sans);font-size:var(--text-xs);
      font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
      margin-bottom:var(--space-5);}
    .page-offers .of-cmp__title{font-family:var(--serif);font-weight:300;
      font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.04;color:#fff;margin:0;}
    .page-offers .of-cmp__title em{font-style:italic;color:var(--gold);}
    .page-offers .of-cmp__lead,
    .page-offers .of-cmp__lead p{font-size:var(--text-base);line-height:1.85;
      color:rgba(245,241,236,.78);margin:var(--space-6) auto 0;max-width:54ch;}

    .page-offers .of-cmp__table{position:relative;max-width:940px;margin:0 auto;}
    /* the cream plinth behind the direct column */
    .page-offers .of-cmp__table::before{content:'';position:absolute;z-index:0;
      left:calc((.7 / 2.7 * 100%) - 12px);width:calc((1 / 2.7 * 100%) + 24px);
      top:-22px;bottom:-22px;border-radius:3px;
      background:linear-gradient(180deg,#fbf8f4 0%,var(--cream) 42%,#efe9e1 100%);
      box-shadow:0 50px 80px -26px rgba(0,0,0,.7),0 22px 40px -14px rgba(0,0,0,.5),
                 0 4px 10px -2px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.95);}
    .page-offers .of-cmp__row{position:relative;z-index:1;display:grid;
      grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch;}
    .page-offers .of-cmp__row > *{display:flex;align-items:center;padding:var(--space-6);}
    .page-offers .of-cmp__row:not(:last-child) > .of-cmp__label,
    .page-offers .of-cmp__row:not(:last-child) > .of-cmp__them,
    .page-offers .of-cmp__row--head > *{border-bottom:1px solid rgba(245,241,236,.16);}
    .page-offers .of-cmp__row--head > *{border-bottom-color:rgba(245,241,236,.34);
      padding-top:var(--space-5);padding-bottom:var(--space-5);font-family:var(--sans);
      font-size:var(--text-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;}
    .page-offers .of-cmp__row--head .of-cmp__us{color:var(--dark);}
    .page-offers .of-cmp__row--head .of-cmp__them{color:rgba(245,241,236,.9);}

    .page-offers .of-cmp__label{font-family:var(--sans);font-size:var(--text-xs);
      letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,236,.8);}
    .page-offers .of-cmp__us{color:var(--ink);font-family:var(--serif);
      font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:400;line-height:1.32;
      position:relative;padding-left:calc(var(--space-6) + 26px)!important;}
    .page-offers .of-cmp__row:not(:last-child) .of-cmp__us::after{content:'';position:absolute;
      left:0;right:0;bottom:0;height:1px;background:rgba(26,10,16,.10);z-index:2;}
    .page-offers .of-cmp__row:not(.of-cmp__row--head) .of-cmp__us::before{content:'\2713';
      position:absolute;left:var(--space-6);top:50%;transform:translateY(-50%);
      font-family:var(--sans);font-size:.95rem;color:var(--gold);font-weight:600;}
    .page-offers .of-cmp__them{font-family:var(--sans);font-size:var(--text-base);
      line-height:1.65;color:rgba(245,241,236,.68);position:relative;
      padding-left:calc(var(--space-6) + 26px)!important;}
    .page-offers .of-cmp__row:not(.of-cmp__row--head) .of-cmp__them::before{content:'\2014';
      position:absolute;left:var(--space-6);top:50%;transform:translateY(-50%);
      color:rgba(245,241,236,.34);}
    .page-offers .of-cmp__cta{text-align:center;margin-top:var(--space-11);}

    /* ══ Footer CTA — light on THIS page only ══════════════════════
       .home-footer-cta is site-wide and dark; here it sat directly under
       the dark comparison and the page ended in one unbroken slab.
       Scoped to .page-offers so no other page changes. ══ */
    .page-offers .home-footer-cta{background:var(--warm-white);}
    .page-offers .home-footer-cta::before{content:'';position:absolute;left:50%;top:0;
      transform:translateX(-50%);width:min(560px,72%);height:1px;
      background:linear-gradient(90deg,transparent,var(--stone),transparent);}
    .page-offers .home-footer-cta__ornament{color:var(--gold);opacity:1;}
    .page-offers .home-footer-cta__title{color:var(--ink);}
    .page-offers .home-footer-cta__sub{color:var(--mid);}
    .page-offers .home-footer-cta__sub a{color:var(--pink-dark);}
    /* the ghost button is white-on-dark by default — invert it here */
    .page-offers .home-footer-cta .btn--ghost{color:var(--ink);border-color:var(--stone);}
    .page-offers .home-footer-cta .btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--cream);}
    /* ══ Offers showcase — alternating matted splits ══ */
    .page-offers .of-offers{display:flex;flex-direction:column;gap:var(--space-12);
      margin-top:var(--space-10);}
    .page-offers .of-offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:var(--space-11);align-items:center;}
    .page-offers .of-offer--flip .of-offer__media{order:2;}
    .page-offers .of-offer--flip .of-offer__body{order:1;}

    /* the photo is matted, not boxed — an outlined frame offset behind it */
    .page-offers .of-offer__media{position:relative;aspect-ratio:4/3;}
    .page-offers .of-offer__media::before{content:'';position:absolute;z-index:0;
      inset:20px -20px -20px 20px;border:1px solid rgba(168,119,138,.5);
      transition:inset .5s var(--ease-out),border-color .5s var(--ease-out);}
    .page-offers .of-offer--flip .of-offer__media::before{inset:20px 20px -20px -20px;}
    .page-offers .of-offer:hover .of-offer__media::before{inset:28px -28px -28px 28px;
      border-color:var(--gold);}
    .page-offers .of-offer--flip:hover .of-offer__media::before{inset:28px 28px -28px -28px;}
    .page-offers .of-offer__media picture,
    .page-offers .of-offer__media > img{position:relative;z-index:1;display:block;
      width:100%;height:100%;overflow:hidden;
      box-shadow:0 36px 64px -28px rgba(42,15,26,.55),0 14px 26px -12px rgba(42,15,26,.34);}
    .page-offers .of-offer__media img,
    .page-offers .of-offer__media .placeholder-img{width:100%;height:100%;object-fit:cover;
      display:block;transition:transform 1.2s var(--ease-out);}
    .page-offers .of-offer:hover .of-offer__media img{transform:scale(1.05);}

    /* offers with no photograph get type instead of a hole */
    .page-offers .of-offer__plate{position:relative;z-index:1;width:100%;height:100%;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-5);
      background:linear-gradient(160deg,var(--pink-dark) 0%,#7d4f61 100%);color:var(--cream);
      box-shadow:0 36px 64px -28px rgba(42,15,26,.55);}
    .page-offers .of-offer__plate-mark{font-size:1.7rem;color:var(--gold);}
    .page-offers .of-offer__plate-text{font-family:var(--sans);font-size:var(--text-xs);
      font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.9);}

    .page-offers .of-offer__eyebrow{display:block;font-family:var(--sans);font-size:var(--text-xs);
      font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
      margin-bottom:var(--space-4);}
    .page-offers .of-offer__title{font-family:var(--serif);font-weight:300;
      font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.08;color:var(--ink);margin:0;}
    .page-offers .of-offer__sub{font-size:var(--text-base);line-height:1.8;color:var(--mid);
      margin:var(--space-5) 0 0;max-width:46ch;}
    .page-offers .of-offer__copy p{font-size:var(--text-sm);line-height:1.78;color:var(--mid);
      margin:var(--space-4) 0 0;max-width:46ch;}

    /* the code is the hook — set it as a token */
    .page-offers .of-offer__code{display:inline-flex;align-items:center;gap:var(--space-4);
      margin-top:var(--space-7);padding:10px 18px;border:1px dashed var(--pink-light);
      background:rgba(168,119,138,.06);}
    .page-offers .of-offer__code-label{font-family:var(--sans);font-size:var(--text-xs);
      letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,236,.8);}
    .page-offers .of-offer__code-value{font-family:var(--sans);font-size:1rem;font-weight:600;
      letter-spacing:.2em;color:var(--pink-dark);}

    .page-offers .of-offer__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);
      margin-top:var(--space-6);}
    .page-offers .of-offer__badge{font-family:var(--sans);font-size:var(--text-xs);font-weight:500;
      letter-spacing:.14em;text-transform:uppercase;color:var(--pink-dark);}
    .page-offers .of-offer__until{font-family:var(--sans);font-size:var(--text-xs);
      letter-spacing:.1em;color:var(--muted);}
    .page-offers .of-offer__cta{margin-top:var(--space-7);}

    .page-offers .of-offer__terms{margin-top:var(--space-6);}
    .page-offers .of-offer__terms summary{cursor:pointer;list-style:none;font-family:var(--sans);
      font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
      transition:color var(--mid-speed);}
    .page-offers .of-offer__terms summary::-webkit-details-marker{display:none;}
    .page-offers .of-offer__terms summary:hover{color:var(--pink-dark);}
    .page-offers .of-offer__terms p{font-size:.82rem;line-height:1.7;color:var(--muted);
      margin:var(--space-4) 0 0;max-width:56ch;}

    @media(max-width:860px){
      .page-offers .of-offers{gap:var(--space-10);}
      .page-offers .of-offer{grid-template-columns:1fr;gap:var(--space-8);}
      .page-offers .of-offer--flip .of-offer__media{order:1;}
      .page-offers .of-offer--flip .of-offer__body{order:2;}
      .page-offers .of-offer__media::before,
      .page-offers .of-offer--flip .of-offer__media::before{inset:12px -12px -12px 12px;}
    }
    @media(max-width:860px){
      .page-offers .of-cmp__table::before{display:none;}
      .page-offers .of-cmp__row{grid-template-columns:1fr;}
      .page-offers .of-cmp__row--head{display:none;}
      .page-offers .of-cmp__us{background:var(--cream);
        box-shadow:0 14px 30px -14px rgba(0,0,0,.55);}
      .page-offers .of-cmp__label{padding-bottom:0!important;}
      .page-offers .of-cmp__row:not(:last-child) .of-cmp__us::after{display:none;}
      /* the head row is hidden, so each cell says whose it is */
      .page-offers .of-cmp__row:not(.of-cmp__row--head) .of-cmp__us,
      .page-offers .of-cmp__row:not(.of-cmp__row--head) .of-cmp__them{
        display:flex;flex-direction:column;justify-content:center;}
      .page-offers .of-cmp__row:not(.of-cmp__row--head) .of-cmp__us::after,
      .page-offers .of-cmp__row:not(.of-cmp__row--head) .of-cmp__them::after{
        order:-1;position:static;height:auto;background:none;inset:auto;
        font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.18em;
        text-transform:uppercase;margin:0 0 5px;}
      .page-offers .of-cmp__row:not(.of-cmp__row--head) .of-cmp__us::after{
        content:"Booked direct";color:var(--pink-dark);}
      .page-offers .of-cmp__row:not(.of-cmp__row--head) .of-cmp__them::after{
        content:"Via Booking.com etc.";color:rgba(245,241,236,.5);}
      .page-offers .of-cmp__row:not(.of-cmp__row--head) .of-cmp__us::before,
      .page-offers .of-cmp__row:not(.of-cmp__row--head) .of-cmp__them::before{
        top:auto;bottom:var(--space-4);transform:none;}
    }
  </style>