section { position: relative; z-index: 1; }
/* Masthead height and the hero pattern now live in global.css (inner-page masthead).
   They used to be duplicated here; the bare min-height had no media query and beat
   global's own mobile rule at every width. Do not re-add them. */
.page-hero-content p { font-family: 'Source Sans 3', sans-serif; font-size: 22px; font-weight: 400; color: #ffffff; }

/* ── BUILT AROUND YOU ── */
.built-section {
  padding: var(--section-v) 0 48px;
  background: var(--off-white);
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
}
.built-inner {
  display: grid;
  grid-template-columns: 1fr 540px;
  gap: 60px;
  align-items: stretch;
}
.built-heading-block { margin-bottom: 40px; }
.built-section .section-geo-pattern { width: 108px; height: auto; margin-bottom: 16px; }
.built-section .section-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--cerise);
  margin-bottom: 30px;
}
.built-section .section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 48px; font-weight: 900;
  color: var(--navy);
}
.built-steps { display: flex; flex-direction: column; gap: 24px; }
.built-step { display: flex; gap: 20px; align-items: flex-start; }
.built-step-icon {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 6px;
  border: 2px solid var(--cerise); border-radius: 50%;
  background: transparent;
}
.built-step-body h3 {
  font-family: 'Playfair Display', serif; font-size: 25px; font-weight: 700;
  color: var(--navy); margin-bottom: 6px;
}
.built-step-body p {
  font-family: var(--font-body); font-size: 18px; color: #505050; line-height: 1.45;
}
.built-image {
  border-radius: var(--radius); overflow: hidden;
  margin-top: 100px; /* align top with "Built Around You" heading (skip geo-pattern + eyebrow) */
  background: center bottom / cover no-repeat;
  box-shadow: 0 8px 40px rgba(0,0,0,0.14);
}

/* ── CUSTOM TOURS ── */
.custom-tours-section {
  padding: 48px 0 var(--section-v);
  background: var(--off-white);
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
}
.custom-tours-heading-block { margin-bottom: 48px; }
.custom-tours-section .section-geo-pattern { width: 72px; height: auto; margin-bottom: 16px; }
.custom-tours-section .section-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--cerise);
  margin-bottom: 30px;
}
.custom-tours-section .section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 48px; font-weight: 900;
  color: var(--navy);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.portfolio-card {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}
.portfolio-img {
  aspect-ratio: 16/10;
  background: center/cover no-repeat;
  position: relative;
}
/* No-image fallback: navy card with brand geo pattern + logo */
.portfolio-img--branded {
  background-color: var(--navy);
  background-image: url('../images/custom-tours-card-pattern.svg');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: auto calc(100% - 20px);
  position: relative;
}
.portfolio-img-brand {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portfolio-img-logo { width: 78px; height: auto; }
.portfolio-img-country {
  font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700;
  color: #fff; line-height: 1.1;
}
.portfolio-body { padding: 20px 22px 24px; }
.portfolio-dest {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cerise); margin-bottom: 6px;
}
.portfolio-title {
  font-family: var(--font-card); font-size: 20px; font-weight: 700;
  color: var(--navy); margin-bottom: 8px;
}
.portfolio-desc {
  font-family: var(--font-body); font-size: 16px; color: #505050; line-height: 1.55;
}

/* ── ENQUIRY FORM ── */
.enquiry-section {
  padding: var(--section-v) 0;
  background: var(--off-white);
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
}
.enquiry-inner {
  margin: 0 auto;
}
.enquiry-heading-block { text-align: left; margin-bottom: 48px; }
.enquiry-section .section-geo-pattern { width: 72px; height: auto; margin: 0 0 16px; }
.enquiry-section .section-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--cerise);
  margin-bottom: 30px;
}
.enquiry-section .section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 48px; font-weight: 900;
  color: var(--navy); margin-bottom: 12px;
}
.enquiry-intro {
  font-family: var(--font-body); font-size: 18px; color: #505050;
  margin-bottom: 0;
}
/* ══════════════════════════════════════════════════════════
   WISHLIST ENQUIRY FORM  —  Fluent Form "Bespoke Wishlist"
   Rebuilds the approved bespoke.html .enquiry-form design on top of Fluent
   Forms' own markup. Values below are lifted from that template unchanged; only
   the selectors differ. Scoped to .enquiry-inner so the registration forms and
   wp-admin keep FF's stock styling.
   ══════════════════════════════════════════════════════════ */

/* ── Rows. FF lays cells out with flex + an inline flex-basis; grid ignores
   both, so we get the template's exact column ratios without !important. ── */
.enquiry-inner .fluentform .ff-t-container {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}
.enquiry-inner .fluentform .ff_columns_total_1 { grid-template-columns: 1fr; }
.enquiry-inner .fluentform .ff_columns_total_2 { grid-template-columns: 1fr 1fr; }
.enquiry-inner .fluentform .ff_columns_total_3 { grid-template-columns: 1fr 1fr 1fr; }
/* Class set on the container in the form definition, not nth-child. */
.enquiry-inner .fluentform .jt-accom-row { grid-template-columns: 0.72fr 0.72fr 1.56fr; }
.enquiry-inner .fluentform .ff-t-cell { padding: 0; }

/* ── Fields ── */
.enquiry-inner .fluentform .ff-el-group { margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; }
/* FF clears floats with `.ff-el-group:before/:after{content:" ";display:table}`.
   Nothing floats in here, but in a flex column those pseudos count as flex
   items, so the 6px gap lands three times instead of once and every field
   drifts ~17px apart. Retire them rather than compensating with smaller gaps. */
.enquiry-inner .fluentform .ff-el-group::before,
.enquiry-inner .fluentform .ff-el-group::after { content: none; }
/* The 6px label→input rhythm is the flex gap above; FF also ships a 5px
   margin under the label wrapper, which would silently make it 11px. */
.enquiry-inner .fluentform .ff-el-input--label { margin-bottom: 0; }
.enquiry-inner .fluentform .ff-el-input--label label {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--navy); margin: 0; padding: 0;
  display: block; /* inline label leaves ~2px of line-box under it */
}
.enquiry-inner .fluentform .ff-el-input--label.ff-el-is-required label::after { color: var(--cerise); }

.enquiry-inner .fluentform .ff-el-form-control {
  border: 1px solid #ddd; border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px; color: var(--body);
  background: #fff;
  outline: none; transition: border-color 0.2s;
  width: 100%; box-sizing: border-box;
  height: auto;
}
.enquiry-inner .fluentform .ff-el-form-control:focus { border-color: var(--cerise); background: #fff; box-shadow: none; }
.enquiry-inner .fluentform textarea.ff-el-form-control { resize: vertical; min-height: 120px; }
.enquiry-inner .fluentform select.ff-el-form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23505050' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px;
}
/* A <select> does not derive the same box from padding + font-size as an
   <input> does — with the identical rules above it renders 42px against a 48px
   input, and Safari and Chrome disagree by a further few px. Measured 31 Jul
   2026 on /bespoke-enquiry/, which is styled by registration.css (it uses
   `.reg-inner`, not this wrapper) and carries the same rules.

   The wishlist form here has no <select> today, so this is preventative: add
   one and it will match the inputs instead of sitting 6px short.

   The :not() chain is required, not decorative: Fluent Forms ships
   `select.ff-el-form-control:not([size]):not([multiple]) { height: … }` and its
   stylesheet loads after this one, so a plainer selector ties and loses. */
.enquiry-inner .fluentform select.ff-el-form-control:not([size]):not([multiple]) {
  height: 48px;
}

/* ── Radio pills. FF renders <label><input><span>text</span></label> with no
   box element, so the template's .cb-box square is drawn as a ::before on the
   span rather than as its own node. ── */
.enquiry-inner .fluentform .ff-el-input--content:has(.ff-el-form-check) {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-top: 6px;
}
.enquiry-inner .fluentform .ff-el-form-check { margin: 0; padding: 0; }
.enquiry-inner .fluentform .ff-el-form-check-label {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--navy);
  cursor: pointer; white-space: nowrap;
  border: 1px solid #ddd; border-radius: var(--radius);
  background: #fff; padding: 9px 11px; margin: 0;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.enquiry-inner .fluentform .ff-el-form-check-label:hover { border-color: var(--navy); }
.enquiry-inner .fluentform .ff-el-form-check-label:has(input:checked) {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
  background: #F9F9F9;
}
.enquiry-inner .fluentform .ff-el-form-check-input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
/* Selector shape is deliberate. FF's default theme ships
   `.ff-default .ff-el-form-check label.ff-el-form-check-label>span:before{content:none}`
   at (0,3,3), which outguns a shorter selector and silently blanks `content`
   only — the box keeps its size and never draws. Matching its element+class
   shape takes us to (0,4,3). */
.enquiry-inner .fluentform .ff-el-form-check label.ff-el-form-check-label > span::before {
  content: ''; display: block; flex-shrink: 0;
  width: 18px; height: 18px;
  border: 2px solid #c8c8c8; border-radius: 4px;
  background: #fff;
  transition: background-color 0.15s, border-color 0.15s;
}
.enquiry-inner .fluentform .ff-el-form-check-label > span {
  display: flex; align-items: center; gap: 7px;
}
.enquiry-inner .fluentform .ff-el-form-check-label:hover > span::before { border-color: var(--navy); }
.enquiry-inner .fluentform .ff-el-form-check-label:has(input:checked) > span::before {
  background-color: var(--navy);
  border-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

/* ── Submit. The template's arrow is markup there and a ::after here — FF owns
   the button's inner text, so there is no span to style. ── */
/* display:block deliberately — this wrapper also carries .ff-el-group, whose
   column-flex would stretch the button to full width. */
.enquiry-inner .fluentform .ff_submit_btn_wrapper { display: block; text-align: left; margin-top: 32px; }
.enquiry-inner .fluentform .ff-btn-submit {
  font-family: var(--font-card); font-size: 15px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--cerise) !important; color: #fff; border: none;
  padding: 16px 28px; border-radius: 0;
  cursor: pointer; transition: background 0.2s;
  display: inline-flex; align-items: center; gap: 12px;
}
.enquiry-inner .fluentform .ff-btn-submit:hover { background: var(--cerise-dk) !important; }
.enquiry-inner .fluentform .ff-btn-submit::after {
  content: '\2192'; display: inline-flex;
  font-family: var(--font-body); letter-spacing: 0;
  transition: transform 0.2s ease;
}
.enquiry-inner .fluentform .ff-btn-submit:hover::after { animation: arrowBounceRight 0.6s ease infinite; }
@keyframes arrowBounceRight {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* ── Validation + confirmation, in the brand's voice rather than FF's blue ── */
.enquiry-inner .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--cerise); }
.enquiry-inner .fluentform .ff-message-success {
  font-family: var(--font-body); font-size: 17px; color: var(--navy);
  background: #fff; border: 1px solid #ddd; border-left: 4px solid var(--cerise);
  border-radius: var(--radius); padding: 24px 26px;
}

/* ══════════════════════════════════════
   RESPONSIVE — page-specific overrides
   (shared nav/footer/hero handled by global.css)
   ══════════════════════════════════════ */

/* ── 1024px ── */
@media (max-width: 1024px) {
  /* "How It Works" 2-col. The image column was 420px — WIDER than the ~304px
     text column, cramping the heading + step copy. Rebalance: give the text
     the flexible column and keep the image at a sensible ~330px. */
  .built-inner { grid-template-columns: 1fr 330px; gap: 44px; }
  .built-section .section-heading,
  .custom-tours-section .section-heading,
  .enquiry-section .section-heading { font-size: 40px; }
  /* Built image: the grid stretches it to the tall text column, cropping the
     landscape photo into a portrait sliver. Pin it to its own height and cap
     to a landscape band so more of the photo shows (330w × 230h ≈ 1.4:1). */
  .built-image { align-self: start; height: 230px; margin-top: 84px; }
  /* Portfolio: keep 3-col through the tablet band — there are exactly 3 cards,
     so 2-col orphans the 3rd on its own row. They read fine at ~230px. */
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  /* Tighten the big vertical void below the portfolio cards (was ~96+96px of
     stacked section padding). */
  .custom-tours-section { padding: 48px 0 56px; }
  .enquiry-section { padding: 56px 0; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  /* Stack How-It-Works list + image */
  .built-inner { grid-template-columns: 1fr; gap: 32px; }
  .built-image {
    margin-top: 0;
    min-height: 280px;
    max-width: 100%;
  }
  .built-section { padding: 56px 0 40px; }
  .custom-tours-section { padding: 40px 0 56px; }
  .enquiry-section { padding: 56px 0; }

  .built-section .section-heading,
  .custom-tours-section .section-heading,
  .enquiry-section .section-heading { font-size: 34px; }
  .built-step-body h3 { font-size: 22px; }
  .built-step-body p { font-size: 17px; }

  /* Portfolio: 2 → 1 col */
  .portfolio-grid { grid-template-columns: 1fr; gap: 24px; }

  /* Form rows: all → single column */

  /* Inputs stay tap-friendly (min-height via padding + 16px font avoids iOS zoom) */
}

/* ── 480px ── */
@media (max-width: 480px) {
  .built-section .section-heading,
  .custom-tours-section .section-heading,
  .enquiry-section .section-heading { font-size: 28px; }
  .built-section .section-geo-pattern { width: 88px; }
  .built-step { gap: 14px; }
  .built-image { min-height: 220px; }

  .enquiry-intro { font-size: 16px; }

  /* Checkbox/radio pills wrap and can go full-width for tap targets */
}
/* ══════════════════════════════════════════════════════════
   MOBILE — the Fluent Forms rebuild
   ══════════════════════════════════════════════════════════
   The media blocks above still target .form-row / .form-submit .btn-primary,
   the hand-rolled classes from the approved template. The enquiry form was
   rebuilt on Fluent Forms, so those selectors match NOTHING and the form never
   collapsed to one column on any phone or tablet: three-across rows rendered at
   103px per field and the accommodation row at 53px/53px/197px, clipping
   placeholders like "your@email.com".

   The desktop rules at ~:171 were re-pointed at the FF selectors during the
   port; the media blocks were not. The comment at ~:163 claiming the template's
   values were "lifted unchanged; only the selectors differ" is true of the
   desktop block and false of these — which is likely how it passed review.

   Appended at the end so source order settles the equal-specificity ties.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* restores .form-row{grid-template-columns:1fr} */
  .enquiry-inner .fluentform .ff_columns_total_2,
  .enquiry-inner .fluentform .ff_columns_total_3,
  .enquiry-inner .fluentform .jt-accom-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  /* restores .form-submit .btn-primary{width:100%} — FF renders .ff-btn-submit,
     so the button sat at 260px (67% of a 390px viewport) instead of full width. */
  .enquiry-inner .fluentform .ff-btn-submit {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
  /* restores .checkbox-label{white-space:normal} for FF's own label element. */
  .enquiry-inner .fluentform .ff-el-form-check-label { white-space: normal; }
}