@charset "UTF-8";
/* ===================================================================
   page-why-choose-us.css — /why-choose-us/ (page-why-choose-us.php)
   class prefix: wcu-
   ===================================================================

   THE PROBLEM THIS PAGE HAD TO SOLVE FIRST

   `template-parts/site-why.php` renders above the footer of THIS page
   as well as every other. It is a large forest-green panel with 22px
   corners floating on white, carrying icon discs, 01–04 ordinals and
   a darker record strip; below it sits .ts-cta on --ac-dark and then
   the footer on --ac. So by the time the reader reaches the foot of
   this page there is already a green object, a green band and a green
   footer in a row.

   Which means this page may not have a green surface of its own. A
   second green panel would read as a rehearsal for the one underneath
   it, and a green band would make the bottom third of the document a
   single slab. The page is therefore built entirely from the two
   light surfaces — white and --cream — and the whole of its weight is
   carried by type size, measure and white space.

   BANDS, AND WHY THE ORDER IS THE ORDER

     hero .............. --cream
     doors ............. #fff
     how ............... --cream
     photograph ........ #fff
     these lands ....... --cream
     ---------------------------- (then .ts-why on #fff)

   Five sections, strictly alternating, and the last one is cream
   BECAUSE .ts-why's own background is #fff. Ending this page on white
   would have handed the why block a 1,200px white run with a heading
   dropped into the middle of it — the same failure why.css was
   rewritten to avoid, arriving from the other direction.

   ONE GESTURE

   A single 2px gold rule runs the full width of the photograph
   section, behind the picture, so the photograph hangs on a thread.
   It is the only decoration in the file. There is no second gold
   mark, no icon, no badge and no ornament anywhere else: everything
   else on the page is words, hairlines and space.

   CONTRAST, computed against the two surfaces actually used
   (sRGB relative luminance, white 1.0000 / --cream 0.9002):

     --ink   #3A2E25 on --cream ....... 10.98:1
     --ink   #3A2E25 on #fff .......... 12.15:1
     --body  #5F564E on --cream ........ 6.49:1
     --body  #5F564E on #fff ........... 7.17:1
     --ac    #124933 on --cream ........ 9.47:1
     --ac    #124933 on #fff .......... 10.49:1
     --muted #7A6F66 on #fff ........... 4.89:1   PASS
     --muted #7A6F66 on --cream ........ 4.43:1   FAILS — never used

   That last line is the reason this file does not use the theme's
   .lead helper, which is --muted: on cream it is 4.43:1, seven
   hundredths under the floor. Every muted-weight run on this page is
   --body instead, and --muted appears exactly once, on the trip
   counts, which sit on white.

   Gold is decoration only. It is never text here, on any surface.

   FOCUS

   The theme's global ring is 2px --ac at 3px offset, which is 9.5:1
   against cream and 10.5:1 against white, so both surfaces take it as
   it stands. The only override is on the door links, where the ring is
   pulled inside the door so it cannot collide with the hairline of the
   door beside it.
   =================================================================== */

.wcu,
.wcu *,
.wcu *::before,
.wcu *::after { box-sizing: border-box; }

.wcu p,
.wcu h1,
.wcu h2,
.wcu h3,
.wcu figure { margin: 0; }

.wcu ul { margin: 0; padding: 0; list-style: none; }

/* The kicker is the theme's own .kick; only its rhythm changes here. */
.wcu .kick { margin-bottom: 16px; }

/*
 * The section heading is the house .h2 + .sf pair, unchanged. The gold
 * contrast problem this page originally worked around is fixed at its source
 * in style.css: .sf now takes --gold-ink on light surfaces (4.49:1 on white,
 * 4.21:1 on cream) and keeps the bright gold on the dark green bands.
 */
.wcu .h2 { letter-spacing: -.01em; }
/* The accent lines follow the site. style.css now sets .sf to --gold-ink on
   light surfaces (4.49:1 on white, 4.21:1 on cream) after the contrast
   problem this rule was written to dodge was fixed at its source, so this
   page no longer needs a colour of its own. */

/* ------------------------------------------------------------------
   1. Hero — --cream

   One column, left aligned, and nothing in it but the three lines.
   The heading is the loudest thing on the page and is meant to be:
   it is the owner's own first claim ("every traveler is unique") put
   as a sentence, and the rest of the page is its argument.
   ------------------------------------------------------------------ */

.wcu-hero {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(52px, 6.4vw, 100px);
}

.wcu-h1 {
  font-weight: 700;
  font-size: clamp(38px, 6.1vw, 74px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink);
  max-width: 16ch;
}

.wcu-h1 .sf {
  font-size: 1.04em;
  letter-spacing: -.005em;
}

.wcu-lede {
  margin-top: clamp(24px, 2.8vw, 38px);
  max-width: 62ch;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.72;
  color: var(--body);
}

/* ------------------------------------------------------------------
   2. The three doors — #fff

   The owner's second paragraph, split at its own three clauses. Each
   clause is a person, and each person is pointed at the activity
   archive that actually collects that kind of trip, with that
   archive's live count under it.

   Not cards. There is no box, no fill, no shadow and no corner in
   here — three columns of a ruled page, divided by the same 1px
   --line hairline the rest of the theme uses, and the outer two run
   flush to the wrap so the band reads as a table of contents rather
   than as three objects sitting on a surface.
   ------------------------------------------------------------------ */

.wcu-doors {
  background: #fff;
  padding-block: clamp(52px, 6.4vw, 100px);
}

.wcu-doors-lede {
  margin-top: 20px;
  max-width: 54ch;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.75;
  color: var(--body);
}

.wcu-door-list {
  margin-top: clamp(38px, 4.6vw, 62px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wcu-door + .wcu-door { border-inline-start: 1px solid var(--line); }

.wcu-door-in {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(28px, 2.6vw, 40px) clamp(20px, 2.2vw, 34px);
  border-radius: 18px;
}

.wcu-door:first-child .wcu-door-in { padding-inline-start: 0; }
.wcu-door:last-child  .wcu-door-in { padding-inline-end: 0; }

/*
 * The whole door is the link, so the ring has to be the door. Pulled
 * inside rather than offset outwards: at 3px outside it would cross
 * the hairline of the neighbouring door.
 */
.wcu-door-in:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: -3px;
  /*
   * style.css's global ring is `a:focus-visible { border-radius: 4px }`,
   * which outranks .wcu-door-in on specificity and was squaring the ring
   * off on a 200px-tall door. Measured: 4px before, 18px after.
   */
  border-radius: 18px;
}

/*
 * Serif and green — the same pairing the theme's .sf span uses for
 * the second line of every heading, borrowed here so the three names
 * read as display type rather than as three link labels.
 */
.wcu-door-who {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(27px, 2.6vw, 36px);
  line-height: 1.08;
  color: var(--ac);
  transition: color .2s ease;
}

.wcu-door-what {
  margin-top: 14px;
  font-size: clamp(15.5px, 1.05vw, 16.5px);
  line-height: 1.7;
  color: var(--body);
}

/* margin-top:auto pins the three call-outs to one line across the row. */
.wcu-door-go {
  margin-top: auto;
  padding-top: clamp(26px, 2.6vw, 38px);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.wcu-door-go-t {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ac);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.wcu-door-go-n {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);          /* 4.89:1 on #fff */
  letter-spacing: .01em;
}

.wcu-arrow {
  width: 17px;
  height: 17px;
  flex: none;
  align-self: center;
  transition: transform .2s ease;
}

.wcu-door-in:hover .wcu-door-who { color: var(--ac-mid); }
.wcu-door-in:hover .wcu-door-go-t { text-decoration-thickness: 2px; }
.wcu-door-in:hover .wcu-arrow { transform: translateX(4px); }

/* ------------------------------------------------------------------
   3. What tailor-made actually means — --cream

   Three ruled rows, heading in the first column and the paragraph in
   the second. This is where the page and the why block below it make
   the same three claims, so the two are deliberately built in
   different shapes: the block quarters a green panel and numbers its
   points 01–04; this is an unnumbered definition list on cream, with
   the claim stated at length in the owner's own wording.
   ------------------------------------------------------------------ */

.wcu-how {
  background: var(--cream);
  padding-block: clamp(52px, 6.4vw, 100px);
}

.wcu-how-rows {
  margin-top: clamp(34px, 4.2vw, 58px);
  border-bottom: 1px solid var(--line);
}

.wcu-row {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.28fr);
  gap: clamp(18px, 3.4vw, 64px);
  padding-block: clamp(30px, 3.2vw, 46px);
  border-top: 1px solid var(--line);
}

.wcu-row-h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.14;
  color: var(--ink);
  max-width: 22ch;
}

.wcu-row-p {
  font-size: clamp(16px, 1.15vw, 17.5px);
  line-height: 1.85;
  color: var(--body);
  max-width: 64ch;
}

.wcu-row-a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ac);
}

.wcu-row-a span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.wcu-row-a:hover span { text-decoration-thickness: 2px; }
.wcu-row-a:hover .wcu-arrow { transform: translateX(4px); }

/* ------------------------------------------------------------------
   4. The photograph — #fff, and the page's one gesture

   The picture is the only one on the page and it is the argument for
   the section under it: the company's vehicle, a guest, a guide, and
   a village going about its afternoon, all in one frame.

   It is contained rather than full-bleed. The source is 4:3 and the
   two people stand full height in it; a full-bleed band at this
   width would be near 3:1 and would take their heads off. 3:2 costs
   eleven per cent of the height and nothing that matters.

   The gold rule is drawn with left/right rather than a 100vw width:
   100vw ignores the scrollbar and would push the document 15px wide
   on Windows, which is precisely the overflow this page is measured
   for.
   ------------------------------------------------------------------ */

.wcu-plate {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding-block: clamp(48px, 6vw, 92px);
}

.wcu-plate::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  height: 2px;
  margin-block-start: -1px;
  background: var(--gold);
  pointer-events: none;
  z-index: 0;
}

.wcu-figure {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin-inline: auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(58, 46, 37, .10), 0 18px 48px rgba(58, 46, 37, .16);
}

.wcu-figure-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 38%;
}

/* ------------------------------------------------------------------
   5. These lands are somebody's home — --cream

   The close, and the owner's own two paragraphs on responsible
   tourism, unaltered. His first paragraph is set at display size
   because it is the page's thesis; the second follows it at reading
   size. Nothing is pulled out as a quotation: lifting a line out of
   two paragraphs and printing it twice, six centimetres apart, is
   padding dressed as emphasis.
   ------------------------------------------------------------------ */

.wcu-home {
  background: var(--cream);
  padding-block: clamp(52px, 6.4vw, 100px);
}

.wcu-home .wrap {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4.6vw, 78px);
  align-items: start;
}

.wcu-home-p {
  font-size: clamp(16.5px, 1.2vw, 18px);
  line-height: 1.85;
  color: var(--body);
  max-width: 64ch;
}

.wcu-home-p + .wcu-home-p { margin-top: 22px; }

.wcu-home-p--first {
  font-size: clamp(19px, 1.75vw, 25px);
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--ink);
}

/* ------------------------------------------------------------------
   Responsive

   Two breakpoints, both set where the content stops fitting rather
   than at a device width. 940px is where the three doors drop below
   roughly 20 characters a line; 720px is where the two-column rows
   stop having a second column worth having.
   ------------------------------------------------------------------ */

@media (max-width: 940px) {
  .wcu-home .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3vw, 30px);
  }
}

@media (max-width: 860px) {
  .wcu-door-list { grid-template-columns: minmax(0, 1fr); }

  .wcu-door + .wcu-door {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }

  .wcu-door-in {
    padding-inline: 0;
    padding-block: clamp(24px, 4vw, 32px);
  }

  .wcu-door-go { padding-top: 20px; }

  .wcu-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .wcu-row-h { max-width: 28ch; }
}

@media (max-width: 700px) {
  .wcu-h1 { max-width: none; }

  .wcu-figure-img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .wcu-door-who,
  .wcu-arrow { transition: none; }

  .wcu-door-in:hover .wcu-arrow,
  .wcu-row-a:hover .wcu-arrow { transform: none; }
}