/* ============================================================================
   Page design — "04 — Signature"
   Warm white with gold, Playfair Display over DM Sans, and generous rounded
   cards. The most conventional of the three and the safest for a page that has
   to sell to anybody: nothing about it is a statement, which is the point.

   Styles the blocks in frontend/partials/, which every design shares - see
   frontend/templates/gsi-page.php. Nothing here changes what a block contains.
   ============================================================================ */

.gsi-skin-signature{
  --ff-d:'Playfair Display',Georgia,serif;
  --ff-b:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  --paper:#FAF8F4; --surface:#FFFFFF;
  --ink:#1A1A18; --ink-2:#6B6860; --ink-faint:#9A968E;
  --acc:#C8A45E; --acc-2:#B08D3E; --acc-txt:#8A6E2E;
  /* 01-design.html's --bd, which is the gold at 13% and not a grey. It draws
     every hairline in that design - 26 of them - so getting it wrong tints the
     whole page: #EAE4D8 was a warm grey mixed by eye, and against the gold rules
     and headings it read a shade cooler than the mockup everywhere at once. */
  --line:#C8A45E22; --radius:16px;
  --gutter:clamp(22px,5vw,80px);

  /* ── the base stylesheet's own variables, re-pointed ────────────────────
     This matters more here than in any other design, because 01-design.html
     IS the architecture golden-safari.css was built from: the same .gsec,
     .gsec-tint, .gsec-dark, .sl, .sec-p, .itin-h, .inc, and the same :root
     shape. The two differ in one thing only - the artwork runs it in Playfair
     Display over DM Sans with the gold at #C8A45E, and the base runs it in
     Cormorant Garamond over Jost with the gold at #B49A6A.

     So this design is not a stylesheet fighting the base; it is the base
     given its own values back. Without this block the page rendered in
     Cormorant and Jost whatever --ff-d said, because the base marks
     font-family !important in twenty places - the same fault found in 02 and
     03 - and every ground, rule and hairline came out a shade cool.

     The three grounds are the artwork's, not the base's: .gsec-tint is white
     rather than the base's warm sand, and .gsec-dark is the page's own ink at
     #1A1A18 rather than chocolate. A design whose only dark is its ink reads
     very differently from one with a brown band in it.
     ────────────────────────────────────────────────────────────────────── */
  --fh:'Playfair Display',Georgia,serif;
  --fb:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  --a:#C8A45E; --a2:#B08D3E; --a-txt:#8A6E2E; --a-txt2:#806528;
  --bg:#FAF8F4; --bg2:#FFFFFF; --sf:#FFFFFF;
  --tx:#1A1A18; --tx2:#6B6860; --bd:#C8A45E22;
  --choco:var(--band); --choco-deep:var(--band-deep);
  --r:16px;
  /* ── the three colours an operator can change ────────────────────────────
     --paper, --ink and --band are the contract between this stylesheet and
     the Design Template box; everything else is derived from them in PHP, in
     the relationship 01-design.html drew. The --on-* values are the writing
     over a ground somebody else chose, so they are measured rather than set -
     see colour_css() in golden-safari-itinerary.php.

     This design's band is its own ink: 01-design.html has no chocolate in it,
     and a page whose only dark is its ink reads differently from one with a
     brown band. Changing the ink therefore moves the band with it unless the
     band is given a colour of its own.

     The hero keeps plain white over its photograph, and so does the add-on
     plate: those two sit on photographs rather than on a ground this file
     controls, and white is right on a photograph whatever the page is
     printed in.
     ──────────────────────────────────────────────────────────────────────── */
  --paper-rgb:250,248,244;
  --ink-rgb:26,26,24;
  --acc-rgb:200,164,94;
  --band:#1A1A18; --band-deep:#12100E;
  --on-band:#FAF8F4; --on-band-rgb:250,248,244;
  --on-ink:#FAF8F4;  --on-ink-rgb:250,248,244;
  --on-acc:#1A1A18;  --on-acc-rgb:26,26,24;
  /* The translucent lift a card gets when it sits ON the band. 01-design.html
     draws it in pure white, not in the page's warm paper - the paper is the
     right colour for TEXT over the band and a shade too warm for a wash over
     it, and comparing the two against the artwork is what caught the
     difference. It follows the band's luminance rather than the paper, so a
     light band gets a dark lift instead of an invisible one. */
  --band-lift-rgb:255,255,255;

  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-b);
  font-size:15.5px;
  line-height:1.75;
}

.gsi-skin-signature h1,
.gsi-skin-signature h2,
.gsi-skin-signature h3,
.gsi-skin-signature h4{
  font-family:var(--ff-d); font-weight:600; color:var(--ink); letter-spacing:-.015em;
}

/* ── the hero ──────────────────────────────────────────────────────────────
   .hero in 01-design.html, which is this design's source. Its numbers, not
   approximations of them: 85vh tall, the overlay black rather than the page's
   warm ink and clearing completely by half height so the photograph is still
   a photograph, and the eyebrow a gold PILL rather than loose tracked-out
   capitals - that pill is the first thing anybody recognises about this page.
   ────────────────────────────────────────────────────────────────────────── */
.gsi-skin-signature .gsi-hero{
  position:relative; min-height:85vh;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0; color:#fff; overflow:hidden; background:var(--ink);
}
.gsi-skin-signature .gsi-hero-media{ position:absolute; inset:0; }
.gsi-skin-signature .gsi-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.gsi-skin-signature .gsi-hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,transparent 100%);
}
.gsi-skin-signature .gsi-hero-in{
  position:relative; z-index:2; width:100%; max-width:1400px; margin:0 auto;
  padding:clamp(36px,6vw,60px) var(--gutter);
}
.gsi-skin-signature .gsi-hero-tag{
  display:inline-flex; align-items:center;
  padding:8px 20px; border-radius:100px;
  font-family:var(--ff-b); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--acc); background:rgba(var(--acc-rgb),.13); border:1px solid rgba(var(--acc-rgb),.27);
  margin:0 0 24px;
}
.gsi-skin-signature .gsi-hero-h{
  font-family:var(--ff-d); font-weight:700;
  font-size:clamp(36px,5vw,68px); line-height:1.1;
  color:#fff; max-width:800px; margin:0 0 16px;
}
.gsi-skin-signature .gsi-hero-h em{ color:var(--acc); font-style:italic; }
.gsi-skin-signature .gsi-hero-sub{
  font-size:18px; font-weight:300; line-height:1.6;
  color:rgba(255,255,255,.7); max-width:550px; margin:0 0 28px;
}
.gsi-skin-signature .gsi-hero-meta{
  display:flex; flex-wrap:wrap; gap:12px 30px; align-items:baseline;
  padding-top:0; border-top:0;
  color:rgba(255,255,255,.8); font-size:15px; font-weight:500;
}
.gsi-skin-signature .gsi-hero-fact{
  font-size:15px; font-weight:500; letter-spacing:0; text-transform:none;
  color:rgba(255,255,255,.8);
}
.gsi-skin-signature .gsi-hero-fact b,
.gsi-skin-signature .gsi-hero-fact strong{
  font-family:var(--ff-d); font-weight:700; margin-right:4px;
}
.gsi-skin-signature .gsi-hero-stars{ color:var(--acc); }
.gsi-skin-signature .gsi-hero-rating small{ color:rgba(255,255,255,.65); margin-left:6px; }
.gsi-skin-signature .gsi-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.gsi-skin-signature .gsi-btn{
  display:inline-flex; align-items:baseline; gap:9px; text-decoration:none;
  padding:15px 28px; border-radius:999px; font-size:12.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5); color:#fff;
}
.gsi-skin-signature .gsi-btn-solid{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
.gsi-skin-signature .gsi-btn-solid:hover{ background:var(--acc-2); border-color:var(--acc-2); }
.gsi-skin-signature .gsi-btn-ghost:hover{ background:rgba(255,255,255,.12); }
.gsi-skin-signature .gsi-btn-amt{ font-family:var(--ff-d); font-size:21px; letter-spacing:0; }
.gsi-skin-signature .gsi-btn-from,
.gsi-skin-signature .gsi-btn small{ font-size:10px; opacity:.8; }

/* ── the shared blocks ─────────────────────────────────────────────────── */
/* max-width/margin undo the base stylesheet's centred column. golden-safari.css sets
   ".gsec{padding:100px 40px;max-width:1280px;margin:0 auto}", and a design that only
   restyles the padding inherits that 1280px cap: the gutter is then measured inside a
   1280px box, so on any window wider than that the page never reaches the edge, and the
   moment a section is given a background - the alternating tint below - it paints as a
   slab floating in the middle of the page with the paper showing either side.
   The reading column is set on the section's CHILDREN, in the rule after the tint,
   which is where a measure belongs; the section runs full width and insets with the
   gutter. */
/* The measure is the artwork's 1280, and the section keeps it.
   The other two designs take the base's centred column away because they
   replace it with one of their own; this one does not - 01-design.html IS
   ".gsec{padding:100px 40px;max-width:1280px;margin:0 auto}", so undoing it
   was undoing the design. It came out at 1180 in a 85px-tall band where the
   artwork has 1280 in a 100px one: not wrong enough to see, and wrong on
   every section at once, which is how a page stops feeling drawn. */
.gsi-skin-signature .gsec,
.gsi-skin-signature section[id]{
  max-width:none; margin-inline:0;
  padding:clamp(52px,7vw,100px) var(--gutter);
  background:var(--paper);
}
/* Named grounds, not an alternation. Tinting every even block moves the
   rhythm whenever an itinerary is missing a section, so no two itineraries
   look alike and none looks like the artwork. In 01-design.html the white
   ground belongs to four named sections and .gsec-tint is white, not the
   base stylesheet's warm sand. */
.gsi-skin-signature .gsec.gsec-tint,
.gsi-skin-signature .gsi-block--addons   > section,
.gsi-skin-signature .gsi-block--besttime > section,
.gsi-skin-signature .gsi-block--extras   > section,
.gsi-skin-signature .gsi-block--faq      > section{ background:var(--surface); }

.gsi-skin-signature .gsec > *,
.gsi-skin-signature section[id] > *{ max-width:1280px; margin-inline:auto; }

.gsi-skin-signature .sl{
  font-size:12px; font-weight:600; line-height:normal; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--acc-txt); margin-bottom:12px;
}
.gsi-skin-signature .gsec h2,
.gsi-skin-signature section[id] h2{
  font-family:var(--ff-d); font-weight:600;
  font-size:clamp(28px,3vw,42px); line-height:1.2; margin:0 0 16px;
}
/* the standfirst: the artwork's own weight and colour, against a theme that
   sets 300 and a hair of negative tracking on body copy */
.gsi-skin-signature .sec-p{
  font-size:16px; font-weight:400; line-height:1.8; letter-spacing:normal;
  color:var(--ink-2); max-width:650px; margin:0 0 40px;
}
.gsi-skin-signature .gsec h3{ font-size:clamp(18px,2vw,25px); margin:0 0 11px; }
.gsi-skin-signature p{ color:var(--ink-2); }
.gsi-skin-signature a{ color:var(--acc-txt); }

.gsi-skin-signature .card,
.gsi-skin-signature [class*="-card"],
.gsi-skin-signature .lodge,
.gsi-skin-signature .day{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px;
  box-shadow:0 1px 2px rgba(26,26,24,.03), 0 18px 40px -28px rgba(26,26,24,.35);
}
.gsi-skin-signature img{ border-radius:calc(var(--radius) - 4px); }
.gsi-skin-signature table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.gsi-skin-signature th{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acc-txt); background:var(--paper); text-align:left; padding:13px 14px;
}
.gsi-skin-signature td{ padding:13px 14px; border-top:1px solid var(--line); }

/* the reveal classes wait for JavaScript this design does not ship */
.gsi-skin-signature .rv,
.gsi-skin-signature .rv-left,
.gsi-skin-signature .rv-right{ opacity:1 !important; transform:none !important; }

@media (max-width:860px){
  .gsi-skin-signature .gsi-hero{ min-height:auto; padding-top:clamp(80px,26vh,160px); }
}

/* ── the day-by-day section ───────────────────────────────────────────────
   The shared block carries .itin.itin-dark, painted chocolate by the base
   stylesheet for 01 — Golden Safari. This design is warm white throughout,
   and the chocolate left its day titles brown on brown. The days sit on the
   page with the cards on white, gold for the accents. Each rule re-states a
   base rule at equal or greater weight.
   ───────────────────────────────────────────────────────────────────────── */
.gsi-skin-signature .itin.itin-dark{ background:var(--paper); color:var(--ink); }
.gsi-skin-signature .itin.itin-dark .itin-h h2{ color:var(--ink); }
.gsi-skin-signature .itin.itin-dark .itin-h p{ color:var(--ink-2); }

.gsi-skin-signature .itin .jd{ border-bottom:1px solid var(--line); }
.gsi-skin-signature .itin .jd-rail::after{ background:var(--line); }
.gsi-skin-signature .itin .jd-dot{ background:var(--surface); border-color:var(--acc); }
.gsi-skin-signature .itin .jd-dot.jd-dot-on{ background:var(--acc); }
.gsi-skin-signature .itin .jd-num{ color:var(--ink-faint); }

.gsi-skin-signature .itin .jd-daylabel{ color:var(--acc-txt); }
.gsi-skin-signature .itin .jd-title{ color:var(--ink); }
.gsi-skin-signature .itin .jd-desc{ color:var(--ink-2); }

.gsi-skin-signature .itin .jd-start{
  border:1px solid var(--line); background:var(--surface); border-radius:var(--radius);
}
.gsi-skin-signature .itin .jd-start-tag{ color:var(--acc-txt); }
.gsi-skin-signature .itin .jd-start-body p{ color:var(--ink-2); }

.gsi-skin-signature .itin .jd-meals{
  border-left:3px solid var(--acc); background:var(--surface);
}
.gsi-skin-signature .itin .jd-meals-h{ color:var(--acc-txt); }
.gsi-skin-signature .itin .jd-meals p{ color:var(--ink-2); }

.gsi-skin-signature .itin .jd-meta{ border-top:1px solid var(--line); }
.gsi-skin-signature .itin .jd-meta-l{ color:var(--ink-faint); }
.gsi-skin-signature .itin .jd-meta-v{ color:var(--ink); }
.gsi-skin-signature .itin .jd-meta-night .jd-meta-v{ color:var(--acc-txt); }

/* the accordion variant of the same block */
.gsi-skin-signature .itin.itin-dark .dy-w{
  background:var(--surface); border-color:var(--line);
}
.gsi-skin-signature .itin.itin-dark .dy-t{ color:var(--ink); }
.gsi-skin-signature .itin.itin-dark .dy.active .dy-t{ color:var(--acc-txt); }
.gsi-skin-signature .itin.itin-dark .dy-l{ color:var(--ink-faint); }

/* ── the dark bands (parks, "why") ────────────────────────────────────────
   The base stylesheet paints .gsec-dark chocolate and sets its headings
   white, but this design's own ".gsec h2" rule is the more specific of the
   two, so the heading came back as dark ink on a dark band - "Where the
   Safari Takes You" was all but invisible. The band stays: it is the one
   change of key on a long page. Only the text is put back.
   ───────────────────────────────────────────────────────────────────────── */
/* The band's inherited colour, not only its headings. golden-safari.css
   writes ".gsec-dark{color:var(--sf)}" and --sf is the CARD surface -
   near-white in every design - so anything in the band without a colour rule
   of its own comes out near-white. Harmless while every band was dark, and
   invisible the moment an operator gives one a pale colour. */
.gsi-skin-signature .gsec.gsec-dark{ color:var(--on-band); }
.gsi-skin-signature .gsec.gsec-dark h2,
.gsi-skin-signature .gsec.gsec-dark h3,
.gsi-skin-signature .gsec.gsec-dark h4{ color:var(--on-band); }
.gsi-skin-signature .gsec.gsec-dark p{ color:rgba(var(--on-band-rgb),.72); }
/* The accent AS SEEN ON THE BAND. Every design puts its eyebrow and its
   numerals on the band in the accent, which reads because the band has
   always been dark. On a pale band it does not - Minimal Luxury's bronze
   measures 2.6:1 on one - so --acc-band is the same colour carried just
   far enough toward the band's own text to read, and no further. It is
   only emitted when the band has been changed; --acc is the fallback. */
.gsi-skin-signature .gsec.gsec-dark .sl,
.gsi-skin-signature .gsec.gsec-dark a{ color:var(--acc-band,var(--acc)); }

/* A card inside a dark band must not keep the design's white surface: the
   band's own text is light, and a white card under it left the park names
   white on white. Over the chocolate the cards go translucent instead. */
.gsi-skin-signature .gsec.gsec-dark .card,
.gsi-skin-signature .gsec.gsec-dark [class*="-card"],
.gsi-skin-signature .gsec.gsec-dark .lodge{
  background:rgba(var(--band-lift-rgb),.055); border-color:rgba(var(--band-lift-rgb),.16); box-shadow:none;
}

/* 01-design.html's hero stats are a flat row - "5 Days", "3 Parks" - with the
   number in the display face and no label above it, so the label is dropped
   here rather than restyled. */
.gsi-skin-signature .gsi-hero-fact{ display:inline-flex; align-items:baseline; gap:4px; }
.gsi-skin-signature .gsi-hero-fact-l{ display:none; }

/* ── the pinned action bar ────────────────────────────────────────────────
   01-design.html's: near-black, the trip name in Playfair, the price in gold,
   and a gold pill for Reserve to match the hero's call to action. */
.gsi-skin-signature .gsi-bar{ background:rgba(var(--ink-rgb),.97); }
.gsi-skin-signature .gsi-bar-title{ font-family:var(--ff-d); font-weight:600; color:var(--on-ink); }
.gsi-skin-signature .gsi-bar-price{ font-family:var(--ff-b); color:rgba(var(--on-ink-rgb),.6); }
.gsi-skin-signature .gsi-bar-price .gsi-pb-amt{
  font-family:var(--ff-d); font-weight:700; font-size:20px; color:var(--acc);
}
.gsi-skin-signature .gsi-bar-btn{
  font-family:var(--ff-b); color:rgba(var(--on-ink-rgb),.85);
  border-color:rgba(var(--on-ink-rgb),.18); border-radius:100px;
}
.gsi-skin-signature .gsi-bar-btn:hover{ border-color:var(--acc); color:var(--on-ink); }
.gsi-skin-signature .gsi-bar-reserve{
  background:var(--acc); border-color:var(--acc); color:var(--on-acc); font-weight:600;
}
.gsi-skin-signature .gsi-bar-reserve:hover{ background:var(--acc-2); border-color:var(--acc-2); }

/* ══════════════════════════════════════════════════════════════════════════
   THE COMPONENTS, AT THE ARTWORK'S OWN MEASUREMENTS
   Almost everything here is the base stylesheet already doing the right thing,
   now that the variables above point at this design's values. What is left is
   where the base has drifted from the artwork it was built out of - a size
   here, a weight there - which is invisible rule by rule and adds up to a page
   that reads a little off everywhere. Each value below came from measuring the
   artwork rather than from judging the result.
   ══════════════════════════════════════════════════════════════════════════ */

/* body copy: the theme sets weight 300 and a hair of negative tracking, on a
   face that is not this one, and it reaches every paragraph on the page */
.gsi-skin-signature p{ font-weight:400; letter-spacing:normal; }

/* the camps: a camp's name is set in the display face */
.gsi-skin-signature .gsi-block--lodges .ac-item b,
.gsi-skin-signature .camp-n{
  font-family:var(--ff-d); font-weight:600; font-size:19px; line-height:1.25;
  letter-spacing:-.02em; color:var(--ink);
}
.gsi-skin-signature .gsi-block--lodges .ac-item .ac-k,
.gsi-skin-signature .camp-l{
  font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--acc-txt);
}

/* The add-ons keep their caption burned into the plate here, unlike 02 and 03
   where the artwork lifts it onto the paper. This design is the one the block
   was drawn for, so the base's overlay is right and only its type falls short
   of the artwork's. */
/* ".gsec h3" is two classes and an element; ".bey-title" alone is one class
   and lost to it, so the add-on titles came out at the section-h3 size. */
.gsi-skin-signature .gsec .bey-title,
.gsi-skin-signature .bey-title{
  font-size:clamp(24px,2.2vw,32px); line-height:1.1; color:#fff;
}
.gsi-skin-signature .bey-title em{ color:var(--acc); font-style:italic; }
.gsi-skin-signature .bey-grid{ grid-template-columns:1.6fr 1fr; }

/* ── the dark band ────────────────────────────────────────────────────────
   .gsec-dark is the page's own ink here, not a brown, and its light text is
   the paper colour rather than a flat white - #FAF8F4 on #1A1A18, which is
   what keeps the band part of the document instead of a hole cut in it. The
   base uses #fff throughout and reads a shade cold.
   ───────────────────────────────────────────────────────────────────────── */
.gsi-skin-signature .gsec.gsec-dark,
.gsi-skin-signature .gsec.gsec-rates{ background:var(--band); color:var(--on-band); }
.gsi-skin-signature .gsec.gsec-dark h2,
.gsi-skin-signature .gsec.gsec-dark h3,
.gsi-skin-signature .gsec.gsec-dark h4{ color:var(--on-band); }
.gsi-skin-signature .gsec.gsec-dark p,
.gsi-skin-signature .gsec.gsec-dark .sec-p{ color:rgba(var(--on-band-rgb),.68); }

.gsi-skin-signature .why-grid{ gap:24px; }
.gsi-skin-signature .why-c{
  background:rgba(var(--band-lift-rgb),.04); border-color:rgba(var(--acc-rgb),.22);
  padding-bottom:34px;
}
.gsi-skin-signature .why-n{ font-size:48px; line-height:1; }
.gsi-skin-signature .gsec .why-t,
.gsi-skin-signature .why-t{
  font-size:21px; line-height:1.25; color:var(--on-band);
}
.gsi-skin-signature .why-b{
  font-weight:400; font-size:14.5px; line-height:1.8; letter-spacing:normal;
  color:rgba(var(--on-band-rgb),.68);
}
/* Twemoji serves these as full-colour pictures and this page has exactly one
   colour. The numeral above already marks the row. */
.gsi-skin-signature .why-i{ display:none; }

/* ── the parks ────────────────────────────────────────────────────────────
   The block arrives carrying .gsec-dark as well as .gsec-ground, so it is
   painted like the "why" band. The artwork's own parks section is
   .gsec.gsec-ground and nothing else: it runs on the paper like the rest of
   the document, and its standfirst was coming out white on cream. */
.gsi-skin-signature .gsi-block--parks > section{ background:var(--paper); color:var(--ink); }
.gsi-skin-signature .gsi-block--parks h2,
.gsi-skin-signature .gsi-block--parks h3,
.gsi-skin-signature .gsi-block--parks h4{ color:var(--ink); }
.gsi-skin-signature .gsi-block--parks p,
.gsi-skin-signature .gsi-block--parks .sec-p{ color:var(--ink-2); }
/* The parks here sit on the band (#where.gsec-dark). The design's grey stays
   exactly as drawn; a company's band gets a quiet voice measured for it. */
.gsi-skin-signature #where.gsec-dark p,
.gsi-skin-signature #where.gsec-dark .sec-p{ color:var(--on-band-faint,var(--ink-2)); }
.gsi-skin-signature .gsi-block--parks .sl{ color:var(--acc-txt); }

/* the enquiry closes the page on the ink, as the artwork's reservation band
   does. Addressed by id, because "section[id]" outranks a class - the trap
   that cost a round on 02 and again on 03. */
.gsi-skin-signature #enquiry{ background:var(--band); color:var(--on-band); }
.gsi-skin-signature #enquiry h2{ color:var(--on-band); }
.gsi-skin-signature #enquiry .sl{ color:var(--acc-band,var(--acc)); }
.gsi-skin-signature #enquiry .sec-p{ color:rgba(var(--on-band-rgb),.7); }
.gsi-skin-signature #enquiry .gsi-enq-in{ max-width:760px; margin-inline:auto; }
.gsi-skin-signature #enquiry .gsg-eq-wrap,
.gsi-skin-signature #enquiry .gsg-eq-form{
  background:transparent; border:0; box-shadow:none; padding:0;
}
.gsi-skin-signature #enquiry .gsg-eq-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.gsi-skin-signature #enquiry .gsg-eq-row-3{ grid-template-columns:repeat(3,1fr); }
/* Every field, not a list of the types that existed when this was
   written. The party-size boxes are input[type=number] and were in
   none of these lists, so on all four designs Adults and Children
   rendered as raw browser inputs with a grey #767676 border in the
   middle of the form - found by scanning the page for colours that do
   not follow the design. A type added to the form later inherits the
   styling now instead of arriving naked. */
.gsi-skin-signature #enquiry :is(input:not([type=hidden]):not([type=submit]):not([type=button]),
                             textarea, select){
  width:100%; margin:0 0 16px; padding:14px 16px;
  background:rgba(var(--on-band-rgb),.06); color:var(--on-band);
  border:1px solid rgba(var(--acc-rgb),.3); border-radius:10px;
  font-family:var(--ff-b); font-size:15px;
}
/* background-color, never the shorthand: the shorthand resets the arrow the
   base paints on a select, and it then tiles across the field */
.gsi-skin-signature #enquiry select{ background-color:rgba(var(--on-band-rgb),.06); }
.gsi-skin-signature #enquiry select option{ background:var(--band); color:var(--on-band); }
.gsi-skin-signature #enquiry input::placeholder,
.gsi-skin-signature #enquiry textarea::placeholder{ color:rgba(var(--on-band-rgb),.45); }
.gsi-skin-signature #enquiry :is(input,textarea,select):focus{
  outline:none; border-color:var(--acc);
}
.gsi-skin-signature #enquiry .gsg-eq-lbl{
  display:block; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-band-soft,rgba(var(--on-band-rgb),.6)); margin-bottom:5px;
}
.gsi-skin-signature #enquiry .gsg-eq-btn,
.gsi-skin-signature #enquiry button,
.gsi-skin-signature #enquiry input[type=submit]{
  width:auto; margin-top:14px; padding:15px 30px;
  background:var(--acc); color:var(--on-acc); border:1px solid var(--acc);
  border-radius:999px; font-family:var(--ff-b); font-size:12.5px;
  font-weight:500; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}
.gsi-skin-signature #enquiry .gsg-eq-btn:hover,
.gsi-skin-signature #enquiry button:hover{ background:var(--acc-2); border-color:var(--acc-2); }
.gsi-skin-signature .gsi-block--enquiry + .gsi-block--download > section{
  background:var(--band); padding-top:0;
}

@media(max-width:760px){
  .gsi-skin-signature .bey-grid{ grid-template-columns:1fr; }
  .gsi-skin-signature #enquiry .gsg-eq-row,
  .gsi-skin-signature #enquiry .gsg-eq-row-3{ grid-template-columns:1fr; }
}