/* =========================================================================
   Section background treatments
   -------------------------------------------------------------------------
   1. 'Dedicated travel specialists' (.tlir) — SETTLED: ultra-dark gold with
      curved dividers. No longer switchable.
   2. 'Who we work with' (.oitr) — under review. Curved dividers are applied
      in all three states; the switcher bottom-right (or ?v=a / ?v=b) changes
      only the background.
   ========================================================================= */

/* Shared curve geometry. To change the depth, edit the three 40s in each
   pair of URLs and the matching background-size below. */

/* -------------------------------------------------------------------------
   Fix: .spacing puts margin-block:128px on these sections. On .tlir the top
   half sat on the black body and read as a bar under the hero video.
   ------------------------------------------------------------------------- */
.tlir.spacing{ margin-top:0 }

/* =========================================================================
   1. DEDICATED TRAVEL SPECIALISTS — ultra-dark gold + curved dividers
      #15110c is the brand gold #ae9064 at 12% brightness, so it holds the
      hue rather than drifting to neutral grey.
   ========================================================================= */
.tlir.white-bg{
  background-color:#15110c;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V40 Q720 -40 0 40 Z' fill='%23000000'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 H1440 V0 Q720 80 0 0 Z' fill='%23000000'/%3E%3C/svg%3E");
  background-position:top center, bottom center;
  background-repeat:no-repeat, no-repeat;
  background-size:100% 40px, 100% 40px;
  padding-top:140px;
  padding-bottom:140px;
}
.tlir.white-bg h2,
.tlir.white-bg h3{ color:#fdfbf7 }
.tlir.white-bg p{ color:rgba(253,251,247,.76) }
/* The map is black artwork on transparency — flip it to white.
   The pins sit outside #map-img so they keep their gold. */
#map-img{ filter:invert(1) }

/* =========================================================================
   2. WHO WE WORK WITH — curved dividers, background still to be decided
   ========================================================================= */

/* Curves, applied in every state. Both neighbours are black, so the caps are
   black in all three. */
.oitr.white-bg{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V40 Q720 -40 0 40 Z' fill='%23000000'/%3E%3C/svg%3E");
  background-position:top center;
  background-repeat:no-repeat;
  background-size:100% 40px;
  padding-top:140px;
  padding-bottom:140px;
}

/* Bottom divider.
   The section below is split — photo on the left, dark panel on the right —
   so a single-colour cap drawn INTO it can't match. Instead the curve is
   drawn in the colour of the section being LEFT, and overlaid on top of the
   section being entered. Works against anything underneath, image included. */
/* An opaque cap laid over the next section would hide anything bleeding out
   of this one — which is why the ISON watermark stopped dead at the straight
   edge. So instead the section is pulled down over its neighbour and MASKED
   to the curve: background and content are clipped together, and the
   watermark now runs right out to the arc. */
.oitr.white-bg{
  margin-bottom:-40px !important;   /* overlap, so the mask reveals .fwiltr */
  padding-bottom:180px;             /* 140 + the 40 lost to the overlap */
  position:relative;
  z-index:2;

  --curve:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 Q720 80 0 0 Z' fill='%23fff'/%3E%3C/svg%3E");

  -webkit-mask-image:linear-gradient(#000,#000), var(--curve);
          mask-image:linear-gradient(#000,#000), var(--curve);
  -webkit-mask-position:top center, bottom center;
          mask-position:top center, bottom center;
  -webkit-mask-size:100% calc(100% - 40px), 100% 40px;
          mask-size:100% calc(100% - 40px), 100% 40px;
  -webkit-mask-repeat:no-repeat, no-repeat;
          mask-repeat:no-repeat, no-repeat;
}
/* The watermark is clipped to the section box by overflow:hidden; let it sit
   low enough to actually reach the arc. */
.oitr .logo-overlap{ bottom:-12% }

/* SETTLED: light grey to white, top to bottom.
   The gradient sits as a second background layer, under the black top cap. */
.oitr.white-bg{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V40 Q720 -40 0 40 Z' fill='%23000000'/%3E%3C/svg%3E"),
    linear-gradient(to bottom,#d5d0c7 0%,#dfdbd4 22%,#ebe8e3 48%,#f7f6f4 76%,#fff 100%);
  background-position:top center, center;
  background-repeat:no-repeat, no-repeat;
  background-size:100% 40px, 100% 100%;
}

/* =========================================================================
   3. CHOOSING ISON (.tas) — under review
   Curved dividers top AND bottom, both by the mask method, so the section
   overlaps its neighbours and reveals whatever sits behind: the split
   sustainability panel above, the white blogs section below.
   ========================================================================= */
.tas{
  padding-top:120px;      /* 80 + the 40 lost to the overlap */
  padding-bottom:100px;

  /* A light tint of the brand gold — the top stop of the grey→white ramp. */
  background-color:#d5d0c7;
  position:relative;
  z-index:2;

  --curve-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 H1440 Q720 -40 0 40 Z' fill='%23fff'/%3E%3C/svg%3E");
  --curve-bot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 Q720 80 0 0 Z' fill='%23fff'/%3E%3C/svg%3E");

  -webkit-mask-image:var(--curve-top), linear-gradient(#000,#000), var(--curve-bot);
          mask-image:var(--curve-top), linear-gradient(#000,#000), var(--curve-bot);
  -webkit-mask-position:top center, center, bottom center;
          mask-position:top center, center, bottom center;
  -webkit-mask-size:100% 40px, 100% calc(100% - 80px), 100% 40px;
          mask-size:100% 40px, 100% calc(100% - 80px), 100% 40px;
  -webkit-mask-repeat:no-repeat, no-repeat, no-repeat;
          mask-repeat:no-repeat, no-repeat, no-repeat;
}
/* The theme ships .home .tas{margin-block:0!important} — two classes, so an
   !important on .tas alone loses the specificity contest and the overlap
   silently never happens, leaving the mask to reveal the black page
   background instead of the sections either side. Match its specificity. */
.home .tas{
  margin-top:-40px !important;
  margin-bottom:-40px !important;
}

/* .tas now sits 40px over the sustainability panel — give its copy room */
.fwiltr .col-two{ padding-bottom:calc(var(--spacing) * 16) }

/* ...and 40px over the blogs section. The theme forces
   .hp-blogs{padding-top:0!important}, so this needs !important too — it wins
   on source order at equal specificity. */
.hp-blogs{ padding-top:calc(var(--spacing) * 24) !important }

/* =========================================================================
   Image corner radius — echoing the O of the wordmark
   Top-left and bottom-right squared off. The two sizes keep the original
   15:10 relationship, so setting --r-lg rescales everything.
   ========================================================================= */
:root{
  --r-lg:40px;                       /* was 15px */
  --r-sm:calc(var(--r-lg) * 2 / 3);  /* was 10px — same 3:2 ratio */
}
.cta-slider .img-size,
.tas .wp-block-cover,
.oitr .col-one .img-left.img-size img,
.oitr .col-one .img-right.img-size img{
  border-radius:0 var(--r-lg) 0 var(--r-lg);
  overflow:hidden;
}
.tas.white-bg .img-size,
.linkImg .wp-block-cover img,
.hp-blogs img.rounded-\[10px\]{
  border-radius:0 var(--r-sm) 0 var(--r-sm);
}

/* =========================================================================
   Sustainability — the heading was sitting hard against the curve
   ========================================================================= */
.fwiltr .col-two{ padding-top:calc(var(--spacing) * 24) }

/* =========================================================================
   Headings — Quicksand stand-in reads lighter than Bariol at the same weight
   ========================================================================= */
h1,h2,h3,h4,h5,h6,
.wp-block-heading,
.hero h1{ font-weight:500 }

/* =========================================================================
   Footer accreditation logos
   Each supplied logo has a different aspect ratio (114x25 through to 72x72),
   so left to themselves they sat at nine different heights. Give every cell
   a common box the height of the tallest and centre within it.
   ========================================================================= */
.logos{ align-items:center !important }
.logos .wp-block-column{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:72px;          /* the tallest of the nine */
}
.logos .wp-block-column figure{
  margin:0;
  display:flex;
  align-items:center;
}