@charset "UTF-8";
/* ===================================================================
   intro.css — the company's own introduction, home page only.

   WHERE IT SITS
   -------------
   Directly under the search card, above .svc. Everything above it on
   this page is a photograph and a form; everything below it is the
   catalogue talking. So this is the first prose a visitor reads, and
   the surface has to mark that.

   THE SURFACE: CREAM, FULL BLEED
   ------------------------------
     - Cream is the theme's soft-section band (.dest, .news, .about,
       .ts-why all use it). It is the page's first tonal change, and
       it is warm, which the copy is.
     - Full bleed, not a panel. The search card immediately above is
       a white 32px-radius slab with a 60px shadow; a second panel
       under it would stack two shadows and read as a callout box
       rather than as the company speaking. As a band it also gives
       that card something to cast onto — on white its shadow is
       invisible and the card reads as page, not as card.
     - Not the forest green. Green under a dark hero, before the page
       has said anything, is a second heavy slab; and the footer and
       .cta already carry the dark weight lower down.
     - No border, no radius: this is a band like .dest, not a card.
       The rounded-corner rule governs boxes, and there is no box here.

   TWO COLUMNS, TWO REGISTERS
   --------------------------
   Left is what YOU do — the claim, then the sensory second-person
   sequence, in the serif, in the owner's own published words. Right
   is a named colleague saying how the trips actually run, set as the
   destination-expert card the country pages carry: round portrait,
   serif heading, quiet body, signature in the logo's own script.

   The card is deliberately NOT a panel — no fill, no border, no
   shadow behind the text. It sits straight on the cream, exactly as
   it does in the country-page hero, so the two read as the same
   person speaking in two places rather than as a testimonial widget.
   The only box on the whole band is the portrait's circle.

   The short gold rule at the head of the right column is the seam
   between the registers; stacked on a phone it becomes the
   horizontal divider between the same two halves.

   Prefix: ts-intro-
   =================================================================== */

.ts-intro{
  position:relative;
  /* The silhouette is clipped to the band and cannot paint over the
     sections either side of it. */
  overflow:hidden;
  isolation:isolate;
  background:var(--cream);
  color:var(--ink);
}

/* ------------------------------------------------------------------
   THE CONTINENT, FAINT
   ------------------------------------------------------------------
   The same basemap the country heroes draw (ts_africa_paths()), at the
   same treatment the pale-band version uses there: #8C8378 at .13 on
   cream. Not the green — green at a readable opacity would look like a
   third brand colour, and green faded until it did not would just be
   grey with extra steps.

   Centred in the band and small enough to sit whole inside it. It
   started anchored into the bottom-left corner, bleeding off two edges,
   which meant the band showed a continent cut off by a straight line —
   a crop, not a mark. Whole and centred it reads as a watermark, which
   is what it is.

   It lands behind the gap between the two columns and behind the inner
   edge of each. Nothing is obscured: the portrait is opaque and paints
   over it, and the copy sits a layer above.

   z-index:0 with the content above it, pointer-events:none, and
   aria-hidden on the element itself. It is a watermark; nothing about
   it is interactive and nothing about it is information.

   CONTRAST. Where it passes under text the composite surface is
   #E9E4DF rather than #F7F3EE. Body copy measures 5.7:1 on that, over
   the 4.5:1 floor. Anything fainter than .13 stops reading as a map at
   all; anything stronger starts eating the copy.
   ------------------------------------------------------------------ */
.ts-intro-map{
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(30%,330px);
  height:auto;
  opacity:.13;
  pointer-events:none;
  fill:#8C8378;
  stroke:none;
}

/* Everything the reader is meant to see sits above the watermark. */
.ts-intro .wrap{ position:relative; z-index:1 }

/* Forced-colours mode renders decoration as solid system ink, which
   would put a black continent behind the copy. It is decoration, so it
   goes. */
@media (forced-colors:active){
  .ts-intro-map{ display:none }
}
.ts-intro *,
.ts-intro *::before,
.ts-intro *::after{box-sizing:border-box}

.ts-intro-in{
  display:grid;
  /* minmax(0,…) not 1fr: a bare 1fr floors at min-content and the two
     tracks resolve unequal the moment a long word appears. */
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(30px,4.4vw,72px);
  align-items:start;
  padding-block:clamp(62px,7.2vw,110px);
}

/* ------------------------------------------------------------------
   LEFT — the claim and the walk
   ------------------------------------------------------------------ */

.ts-intro-kick{
  margin:0 0 14px;
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ac-mid);
}

/* The house heading colour on a cream band: ink above, green serif
   below — the same two-tone pair as .h2 + .sf, built here out of the
   owner's own first two sentences rather than a strapline. */
.ts-intro-h{
  margin:0;
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(27px,3.05vw,41px);
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:19ch;
  text-wrap:balance;
}

.ts-intro-walk{
  margin:clamp(20px,2.2vw,30px) 0 0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(21px,2.05vw,29px);
  line-height:1.38;
  color:var(--ac);
  /* 37ch of Cormorant at 29px measures ~512px, within 8px of the heading's
     19ch — so the two left-hand blocks share a ragged edge instead of
     stepping in by a hundred pixels, which reads as an accident. */
  max-width:37ch;
}

/* ------------------------------------------------------------------
   RIGHT — the welcome

   The gold rule is the brand's flourish mark and the only gold on the
   band besides the signature. It is decorative, so its 2.3:1 against
   cream is fine; nothing is communicated by it that is not also
   communicated by the change of column, typeface and person.
   ------------------------------------------------------------------ */

.ts-intro-do{
  /* Optical alignment: the kicker's cap-height, not its box top. */
  padding-top:6px;
}
.ts-intro-do::before{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin-bottom:clamp(22px,2.4vw,32px);
  border-radius:999px;
  background:var(--gold-dark);
}

/* The card itself: portrait, then voice. Same shape as
   .ts-ctry-expert on the country pages, at this column's scale. */
.ts-intro-hi{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,1.8vw,24px);
  align-items:start;
}

.ts-intro-hi-pic{
  width:clamp(84px,8vw,110px);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:var(--line);
  /* The one shadow on the band, and it is holding a circle off a flat
     surface rather than lifting a panel. */
  box-shadow:0 6px 20px rgba(58,46,37,.16);
}
.ts-intro-hi-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ts-intro-hi-h{
  margin:0 0 12px;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(21px,1.95vw,27px);
  line-height:1.2;
  letter-spacing:0;
  color:var(--ink);
  max-width:22ch;
}

.ts-intro-hi-say{
  margin:0;
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.8;
  color:var(--body);
  /* 46ch of Outfit lands near 72 characters a line, the same measure
     the country card's quote is set to. */
  max-width:46ch;
}

/* THE SIGNATURE — the logo's own script, so the hand matches the
   wordmark rather than a generic Google script. Declared here as well
   as in country.css because that sheet does not load on the home page;
   same family, same file, so the browser fetches it once.

   font-display:swap — the line never blocks paint, and falls back to
   Cormorant italic, which is what the signature used before the face
   was added. */
@font-face{
  font-family:'Tranquil Script';
  src:url('../fonts/tranquil-script.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

.ts-intro-hi-sign{
  /* line-height 1.55, not the 1.05 the country card uses: this script's
     descenders drop far below the baseline, and on the country page the
     tail of the "g" crosses the role line underneath it. A taller line
     box keeps the ink clear of the next line without moving the
     signature's own position. */
  margin:22px 0 0;
  font-family:'Tranquil Script', var(--serif), cursive;
  font-style:normal;
  font-weight:400;
  font-size:clamp(28px,2.6vw,36px);
  line-height:1.3;
  color:var(--gold-ink);
}

.ts-intro-hi-role{
  /* 20px, and it is not decoration. This face's ink descends 16px below
     the baseline at 36px while its line box ends 13px above that, so the
     tail of the "g" paints outside its own box and lands on whatever
     follows. Measured on the country page, where the role line is struck
     through by the signature; 20px here leaves ~7px of clearance. */
  margin:20px 0 0;
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--muted);
}

/* ------------------------------------------------------------------
   Stacked
   ------------------------------------------------------------------ */

@media (max-width:960px){
  .ts-intro-in{
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  /* One column: the two left-hand blocks would otherwise sit at 432px and
     381px inside a 705px column while the prose below ran to 580px, which
     reads as three different measures rather than two registers. */
  .ts-intro-h{max-width:32ch}
  .ts-intro-walk{max-width:56ch}
  .ts-intro-do{
    padding-top:0;
    margin-top:clamp(28px,4.4vw,40px);
  }
  .ts-intro-do::before{
    /* Now a divider between the two halves rather than a column mark. */
    width:72px;
  }
  .ts-intro-hi-say{max-width:56ch}
  /* The map goes. One column top to bottom leaves no empty corner for it
     to fill, so wherever it went it would be behind copy — and measured
     there, the 13.5px role line under the signature falls to 4.15:1 on
     the composite surface, under the 4.5:1 floor. It is decoration; the
     copy is not. Same call the country page's aside map makes. */
  .ts-intro-map{ display:none }
}

@media (max-width:560px){
  .ts-intro-h{max-width:none}
  .ts-intro-walk{max-width:none}
  /* Portrait above the voice: side by side at 92px leaves the quote a
     ~200px measure on a 360px phone, which is four words a line. */
  .ts-intro-hi{
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }
  .ts-intro-hi-h{max-width:none}
  .ts-intro-hi-say{
    font-size:16px;
    max-width:none;
  }
}