/* The tourism country pages — /tourism and /tourism/<country>.
 * ---------------------------------------------------------------------------
 * GENERATED. Do not edit: `python3 tools/tourism/build.py render` overwrites
 * this file from tools/tourism/render.py and the shell it reads out of
 * cameroon.html. Edit those.
 *
 * This used to be inlined into every page. Byte for byte the same 39,949 bytes,
 * twenty-three times, because the block is a page-family stylesheet and none of
 * it varies by country — 900 KB of CSS to describe one design. Inlining is the
 * right call for a single page whose CSS is only ever loaded once; it is the
 * wrong call for a family, where the second page onward pays again for bytes
 * the browser already has. Linked, the first tourism page costs the same and
 * every one after it costs nothing.
 *
 * The tokens, reset, focus rules and motion behaviour are NOT here — they are
 * in /styles/afrinkong.css, which every page on the site already links.
 */

/* Tokens, reset, type scale, focus and motion behaviour are in
   /styles/afrinkong.css. What is left here is the Kamerun operator's own
   extension of the palette — the tokens the group system has no use for — and
   this page's layout. */
:root{
  --fj-raffia:color-mix(in srgb,var(--c-bg) 94%,var(--c-primary));
  --fj-canopy:color-mix(in srgb,var(--c-primary) 82%,var(--c-accent));
  --fj-ember:color-mix(in srgb,var(--c-accent) 14%,var(--c-bg));
  --fj-shade:#141310;
  --fj-onphoto:#FAF5EA;
  --fj-onphoto-soft:#F2EBDB;
  --fj-onphoto-dim:#EBE2CE;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fj-text);background:var(--c-bg);color:var(--c-ink);line-height:1.66;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fj-display);font-weight:700;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
p{margin:0}
ul,ol{list-style:none}
::selection{background:var(--c-accent);color:var(--c-bg)}

.fj-frame{max-width:1240px;margin:0 auto;padding:0 44px}
.fj-stamp{display:block;font-family:var(--fj-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--c-accent)}
.fj-stamp i{font-style:normal;color:var(--c-muted)}
.fj-lede{font-size:19px;color:var(--c-muted);max-width:70ch}

/* reveal — never applied to a fixed-window band or to any ancestor of one */
.fj-rise{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.fj-rise.seen{opacity:1;transform:none}
/* A control inside a block that has not been revealed yet is invisible and
   still focusable: tabbing into the enquiry form landed the cursor in a field
   at zero opacity, and the first characters were typed into nothing. Focus
   anywhere inside finishes the reveal immediately. */
.fj-rise:focus-within{opacity:1;transform:none;transition:none}


/* ---- masthead ---------------------------------------------------------------- */
/* Whose pages these are. This is one operator's site served from the group's
   domain, on addresses (/about, /pricing, /services) a visitor reads as the
   group's. The bar is the name on the door — see tools/tourism/enquiry.py. */
.fj-from{background:var(--fj-raffia);border-bottom:var(--fj-rule)}
.fj-from-in{padding:14px 0 16px}
.fj-from p{font-size:15px;line-height:1.5;max-width:72ch}
.fj-from-else{max-width:none}
.fj-from b{font-weight:400;color:var(--c-primary)}
/* .fj-from p wins on specificity over a bare .fj-from-else, so the mono line
   was rendering at 15px. Matched here rather than raised with !important. */
.fj-from p.fj-from-else{margin-top:6px;font-family:var(--fj-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
.fj-from-else a{color:var(--c-accent);
  border-bottom:1px solid color-mix(in srgb,var(--c-accent) 40%,transparent)}
.fj-from-else a:hover{border-bottom-color:var(--c-accent)}
.fj-from-else a+a{margin-left:14px}
@media(max-width:640px){.fj-from-in{padding:12px 0 13px}
  .fj-from p{font-size:14px}}
.fj-mast{position:sticky;top:0;z-index:70;background:var(--c-bg);border-bottom:2px solid var(--c-primary)}
.fj-mast-in{display:flex;align-items:center;gap:34px;padding:14px 0}
.fj-mark{margin-right:auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.fj-mark b{font-family:var(--fj-display);font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1;white-space:nowrap}
.fj-mark span{font-family:var(--fj-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-muted);white-space:nowrap}
.fj-routes{display:flex;gap:26px}
.fj-routes a{font-family:var(--fj-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--c-muted);padding:4px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.fj-routes a:hover{color:var(--c-primary);border-color:var(--c-accent)}
.fj-mast-tel{font-family:var(--fj-mono);font-size:11px;letter-spacing:.1em;color:var(--c-muted)}
.btn{font-family:var(--fj-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-bg);background:var(--c-primary);padding:12px 20px;transition:background .2s}
.btn:hover{background:var(--c-accent)}
/* The routes hide sooner than they used to, and the Explore key is why.
   This masthead is one row of mark, five route links, the key and the call,
   and the key was the item that took it past the edge: /tourism/index needed
   1,097 pixels for its own content and the browser suite caught it 73 over at
   1,024. Measured up in twenty-pixel steps — kenya wants 1,046, index wants
   1,097 — so the links go at 1,140, which leaves margin rather than landing on
   the number. Nothing is lost: the key that displaced them searches every one
   of those destinations and more, from the same row, and the footer still
   lists them.

   THIS LIVES HERE, IN THE SHELL, AND NOT ONLY IN styles/tourism.css.
   render.py lifts this  block out of this file to build that one, so
   with the fix in the generated stylesheet alone the two disagreed — 1140
   there, 1010 here — and every render silently reverted a browser-verified
   fix. It reverted twice in one session before anybody read the diff. */
@media(max-width:1140px){.fj-routes,.fj-mast-tel{display:none}}
@media(max-width:560px){
  .fj-frame{padding:0 20px}
  .fj-mast-in{gap:12px;padding:11px 0}
  .fj-mark b{font-size:20px}
  .fj-mark span{font-size:8px;letter-spacing:.16em}
  .btn{padding:10px 14px;font-size:10px;letter-spacing:.12em;white-space:nowrap}
}

/* ---- page opener -------------------------------------------------------------- */
.fj-open{padding:78px 0 66px;border-bottom:var(--fj-rule)}
.fj-open-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:end}
/* The headline is four phrases and it is meant to read as four lines. No width
   gets that from auto-wrapping — "six climates. an" fits on one line at any
   width that also fits "world to discover." — so the breaks are explicit, and
   dropped below 940px where the hero stacks and the column is narrow anyway. */
/* No max-width: the grid column already bounds it, and a ch limit is the wrong
   unit for a condensed face — 20ch measured narrower than "AN EXTRAORDINARY"
   sets at 60px and broke the line it was supposed to protect. */
.fj-open h1{font-size:clamp(32px,3.6vw,52px);margin:20px 0 0}
/* The headline is broken by hand into four lines, so its minimum width is
   the longest of them — "world to discover." at 393px, which held the whole
   opening column 393 wide inside a 320 screen and took the stamp, the lede,
   the calls and the photograph out past the edge with it. Below 480 the
   hand breaks come out and the browser wraps it where it fits. */
@media(max-width:480px){.fj-open h1 .fj-br{display:none}
  .fj-open h1{font-size:clamp(26px,7.6vw,32px)}}
@media(max-width:940px){.fj-br{display:none}}
.fj-open h1 em{font-style:normal;color:var(--c-accent)}
.fj-open .fj-lede{margin-top:24px}
.fj-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.fj-act{display:inline-block;font-family:var(--fj-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--c-primary);transition:background .2s,color .2s,border-color .2s}
.fj-act:hover{background:var(--c-primary);color:var(--c-bg)}
/* Two identical outlined buttons meant neither was the primary action. One
   filled, one outlined: the eye now has somewhere to go first. */
.fj-act.go{background:var(--c-primary);color:var(--c-bg);border-color:var(--c-primary)}
.fj-act.go:hover{background:var(--c-accent);border-color:var(--c-accent)}
.fj-act i{font-style:normal;margin-left:9px}
.fj-act.faint{border-color:var(--c-border);color:var(--c-muted)}
.fj-act.faint:hover{border-color:var(--c-primary);background:transparent;color:var(--c-primary)}
.fj-open-plate{position:relative}
/* 4:5, not 3:4. In a .88fr column at 3:4 the picture read as a narrow vertical
   slot rather than a photograph — the frame was fighting the landscape inside
   it. Wider column, shallower ratio: same layout, the picture can breathe. */
.fj-open-plate img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fj-open-tag{position:absolute;left:0;bottom:0;right:24%;background:var(--c-primary);color:var(--fj-onbasalt);padding:13px 16px}
.fj-open-tag b{display:block;font-family:var(--fj-display);font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.fj-open-tag span{display:block;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fj-onbasalt-dim);margin-top:5px}
.fj-key{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:2px solid var(--c-primary)}
.fj-key-item{padding:18px 22px 0 0}
.fj-key-item b{display:block;font-family:var(--fj-display);font-size:31px;font-weight:700;letter-spacing:-.01em;color:var(--c-primary)}
.fj-key-item span{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted);margin-top:7px}
@media(max-width:940px){.fj-open{padding:52px 0 48px}.fj-open-grid{grid-template-columns:1fr;gap:38px;align-items:start}.fj-open-plate img{aspect-ratio:4/3}.fj-key{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fj-key{grid-template-columns:1fr}.fj-key-item{padding:14px 0 12px;border-bottom:var(--fj-rule)}}

/* ---- zones and gutter-marked heads --------------------------------------------- */
.fj-zone{padding:96px 0}
.fj-zone.close{padding-top:64px}
.fj-zone.dust{background:var(--fj-dust)}
.fj-zone.basalt{background:var(--fj-basalt);color:var(--fj-onbasalt)}
.fj-zone.basalt h1,.fj-zone.basalt h2,.fj-zone.basalt h3{color:var(--c-bg)}
.fj-zone.basalt .fj-lede,.fj-zone.basalt .fj-note{color:var(--fj-onbasalt-dim)}
.fj-head{display:grid;grid-template-columns:150px 1fr;gap:40px;align-items:start;margin-bottom:54px}
.fj-head-no{border-top:2px solid var(--c-accent);padding-top:12px}
.fj-head-no b{display:block;font-family:var(--fj-display);font-size:38px;font-weight:700;line-height:1;color:var(--c-accent)}
.fj-head-no span{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);margin-top:8px}
.fj-zone.basalt .fj-head-no span{color:var(--fj-onbasalt-dim)}
.fj-head h2{font-size:clamp(30px,4vw,54px);max-width:24ch}
.fj-head h2 em{font-style:normal;color:var(--c-accent)}
/* 44em of a 17px face is 748 pixels and 96 average characters a line. The
   comfortable range for continuous prose is 45-85; past 90 the eye loses
   the start of the next line on the way back. 72ch measures 78 average
   characters in this face — ch is the width of a zero, which here is 1.09
   times the average lowercase letter, so the two are not the same number. */
.fj-note{margin-top:16px;color:var(--c-muted);max-width:72ch}
@media(max-width:880px){.fj-zone{padding:66px 0}.fj-head{grid-template-columns:1fr;gap:18px;margin-bottom:38px}.fj-head-no b{font-size:30px}}

/* ---- transect (the coast-to-Sahel gradient bar) -------------------------------- */
.fj-transect{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;align-items:end;border-bottom:2px solid var(--c-primary)}
.fj-transect-step{background:var(--fj-dust);display:flex;flex-direction:column;justify-content:flex-end}
/* The bar is made of photographs. The column heights rank by altitude — Kribi
   at sea level shortest, the 4,095 m cone tallest — which is the idea on this
   page worth keeping, so the picture inherits the height instead of the chart
   being replaced by a row of equal tiles. Indicative, not a linear scale: 0 m
   still needs a column you can see. Six climates, each showing what actually
   stands at that height. */
.fj-transect-pic{display:block;width:100%;overflow:hidden;background:var(--c-primary)}
.fj-transect-pic img{width:100%;height:100%;object-fit:cover}
/* Fixed, so the tops of the pictures still read as a gradient: without it one
   extra line of copy lifts that column's photograph and the altitude the height
   is meant to encode stops being true. */
.fj-transect-body{padding:15px 14px 14px;min-height:158px}
/* lv1..lv6 are altitude rank, low to high — 0 m, 150 m, 320 m, 1,200 m,
   1,800 m, 4,095 m — so a taller column is always a higher place. The heights
   the section inherited were not ordered that way (150 m stood taller than
   320 m), which was harmless while the labels were place names and a plain
   contradiction once the section started claiming to show height. */
.fj-transect-step.lv1 .fj-transect-pic{height:96px}
.fj-transect-step.lv2 .fj-transect-pic{height:116px}
.fj-transect-step.lv3 .fj-transect-pic{height:132px}
.fj-transect-step.lv4 .fj-transect-pic{height:170px}
.fj-transect-step.lv5 .fj-transect-pic{height:202px}
.fj-transect-step.lv6 .fj-transect-pic{height:272px}
.fj-transect-step.lv6{background:var(--c-primary);color:var(--fj-onbasalt)}
.fj-transect-alt{font-family:var(--fj-display);font-size:23px;font-weight:700;line-height:1}
.fj-transect-step.lv6 .fj-transect-alt{color:var(--c-bg)}
.fj-transect-step b{display:block;font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:10px;font-weight:400;color:var(--c-accent)}
.fj-transect-step.lv6 b{color:var(--c-accent)}
.fj-transect-step p{font-size:13.5px;line-height:1.45;color:var(--c-muted);margin-top:6px}
.fj-transect-step.lv6 p{color:var(--fj-onbasalt-dim)}
.fj-transect-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:14px;font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
@media(max-width:900px){
  .fj-transect{grid-template-columns:repeat(3,1fr)}
  .fj-transect-body{padding:13px 12px;min-height:0}
  .fj-transect-step .fj-transect-pic{height:118px !important}
}
@media(max-width:520px){.fj-transect{grid-template-columns:1fr 1fr}}

/* ==== FIXED-WINDOW BAND 1 — THE ASCENT ==========================================
   The photograph is pinned to the viewport and the section is a window travelling
   across it. clip-path keeps the fixed child inside the band — but the band must
   never BECOME that child's containing block, so do not add transform, filter,
   backdrop-filter, perspective, will-change or contain to .fj-vista, to
   .fj-vista-pic, or to anything between them and <html>: `fixed` would silently
   degrade to `absolute` and the effect would vanish with no error at all.
   background-attachment:fixed is not a substitute — iOS Safari ignores it.
   No script drives this. */
.fj-vista{position:relative;clip-path:inset(0);min-height:130svh;display:flex;align-items:center;background:var(--c-primary)}
/* The ground is the house ink, not nothing. This panel sets cream type over a
   fixed photograph, and the photograph for it has not been placed — which left
   a full-height section of cream on cream, measured at 1.03:1 and invisible.
   With a ground the panel reads either way, and the photograph covers it when
   one arrives. */
.fj-vista-pic{position:fixed;inset:0;z-index:0}
.fj-vista-pic img{width:100%;height:100%;object-fit:cover}
/* Veil 1 — nothing is laid over the photograph: no wash, no band of shade. The
   element stays because it is the documented place a scrim would go, and the
   answer for these pictures is that there isn't one. */
.fj-vista-veil{position:absolute;inset:0;background:none}
/* Band 1 carries no plate: the copy sits straight on the photograph. With no
   panel and no wash, the only thing holding the type up is a shadow on the
   glyphs themselves — two of them, a tight one for edge contrast and a wide
   soft one to lift the whole block off whatever is behind it. That is why the
   type is light here and dark in band 2. */
.fj-vista-copy{position:relative;z-index:1;width:100%;max-width:1240px;margin:0 auto;padding:0 44px;color:var(--fj-onphoto);
  text-shadow:0 1px 2px rgba(20,19,16,.7),0 2px 26px rgba(20,19,16,.6)}
.fj-vista-inner{max-width:600px}
.fj-vista-stamp{display:block;font-family:var(--fj-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--fj-onphoto)}
.fj-vista-copy h2{font-size:clamp(36px,5vw,66px);margin:18px 0 20px;color:var(--fj-onphoto)}
.fj-vista-copy p{max-width:42ch;font-size:18px;color:var(--fj-onphoto)}
/* Small type needs more help than the headline: a 66px letter carries its own
   mass against a busy frame, an 11px mono caption carries none. Same technique,
   turned up — a wider dark halo hugging the glyphs. */
.fj-vista-stamp,.fj-vista-copy p,.fj-ledger dt{
  text-shadow:0 1px 2px rgba(20,19,16,.85),0 0 12px rgba(20,19,16,.8),0 0 30px rgba(20,19,16,.6)}
.fj-ledger{display:grid;grid-template-columns:repeat(3,auto);gap:0 34px;justify-content:start;margin-top:30px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--fj-onphoto) 45%,transparent)}
.fj-ledger div{min-width:96px}
.fj-ledger dt{font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fj-onphoto-dim)}
.fj-ledger dd{font-family:var(--fj-display);font-size:26px;font-weight:700;margin-top:4px;color:var(--fj-onphoto)}
@media(max-width:1010px){
  .fj-vista-veil{background:none}
  .fj-vista-copy{padding:0 28px}
  .fj-vista-copy h2{font-size:clamp(30px,6vw,46px);margin:14px 0 16px}
  .fj-vista-copy p{font-size:16.5px}
  .fj-ledger{gap:0 24px;margin-top:22px}
  .fj-ledger dd{font-size:21px}
}
@media(max-width:520px){.fj-ledger{grid-template-columns:1fr 1fr;gap:14px 20px}}

/* ==== FIXED-WINDOW BAND 2 — THE SEAM ============================================
   Same mechanism, a different moment: the copy sits in the middle of the frame and
   the veil is a horizontal seam rather than a side wash. Every containing-block
   caution above applies here too — nothing on .fj-seam, .fj-seam-pic or any
   ancestor may carry transform / filter / backdrop-filter / perspective /
   will-change / contain. */
.fj-seam{position:relative;clip-path:inset(0);min-height:130svh;display:flex;align-items:center}
.fj-seam-pic{position:fixed;inset:0;z-index:0}
.fj-seam-pic img{width:100%;height:100%;object-fit:cover}
/* Veil 2 — as above: no wash, no band of shade. The picture is shown as it is,
   and the copy carries its own paper. */
.fj-seam-veil{position:absolute;inset:0;background:none}
.fj-seam-copy{position:relative;z-index:1;width:100%;max-width:1240px;margin:0 auto;padding:0 44px;display:flex;justify-content:center}
.fj-seam-inner{max-width:660px;text-align:center;background:var(--c-bg);color:var(--c-ink);border-top:3px solid var(--c-accent);padding:36px 44px 40px;box-shadow:0 14px 40px rgba(20,19,16,.22)}
.fj-seam-stamp{display:block;font-family:var(--fj-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--c-accent)}
.fj-seam-copy h2{font-family:var(--fj-text);font-weight:400;text-transform:none;letter-spacing:-.005em;line-height:1.16;font-size:clamp(26px,3.2vw,40px);margin:18px auto 0;color:var(--c-primary)}
.fj-seam-hr{display:block;width:64px;height:2px;margin:24px auto;background:var(--c-accent)}
.fj-seam-copy p{font-size:17px;color:var(--c-muted);max-width:52ch;margin:0 auto}
.fj-seam-cite{display:block;margin-top:22px;font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--c-muted)}
@media(max-width:1010px){
  .fj-seam-veil{background:none}
  .fj-seam-copy{padding:0 28px}
  .fj-seam-inner{padding:26px 26px 30px}
  .fj-seam-copy h2{font-size:clamp(23px,4.4vw,32px)}
  .fj-seam-copy p{font-size:16px}
  .fj-seam-hr{margin:20px auto}
}
@media(max-width:560px){.fj-seam-inner{padding:22px 20px 26px}}

/* ---- the three ways to travel, and the four reasons ------------------------------
   Both are card rows on the same grid so they read as one system, not two
   inventions. The keyword rule under the first is the site's own mono stamp at
   full width: a spine for the section rather than decoration. */
.fj-keys{display:flex;flex-wrap:wrap;gap:0 26px;padding:16px 0 0;margin-top:26px;border-top:2px solid var(--c-primary);font-family:var(--fj-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-accent)}
.fj-keys span::after{content:" \00b7";color:var(--c-border)}
.fj-keys span:last-child::after{content:""}
.fj-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--c-primary)}
.fj-way{padding:28px 30px 26px 0;border-right:var(--fj-rule)}
.fj-way:last-child{border-right:0;padding-right:0}
.fj-way h3{font-size:21px;margin-bottom:10px}
.fj-way p{font-size:15px;color:var(--c-muted)}
.fj-way a{display:inline-block;margin-top:18px;font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--c-accent);padding-bottom:4px;transition:color .2s}
.fj-way a:hover{color:var(--c-accent)}
.fj-reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--c-primary)}
.fj-reason{padding:26px 26px 22px 0}
.fj-reason b{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent);margin-bottom:11px}
.fj-reason h3{font-size:18px;margin-bottom:8px}
.fj-reason p{font-size:14.5px;color:var(--c-muted)}
.fj-zone.basalt .fj-reason p{color:var(--fj-onbasalt-dim)}
.fj-zone.basalt .fj-reasons{border-top-color:var(--c-accent)}
@media(max-width:900px){
  .fj-ways{grid-template-columns:1fr}
  .fj-way{border-right:0;border-bottom:var(--fj-rule);padding:22px 0 20px}
  .fj-way:last-child{border-bottom:0}
  .fj-reasons{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.fj-reasons{grid-template-columns:1fr}.fj-reason{padding:20px 0 16px;border-bottom:var(--fj-rule)}}

/* ---- the fourteen-day route ----------------------------------------------------
   A route, not a feature list: six stages left to right with one rule running
   through them, so it reads as a single journey rather than six separate
   offers. The rule is the road; the dot is where you are on it. */
.fj-route{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:2px solid var(--c-primary);margin-top:6px}
.fj-leg{position:relative;padding:26px 22px 8px 0}
.fj-leg::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--c-bg);border:2px solid var(--c-accent);border-radius:50%}
.fj-leg.here::before{background:var(--c-accent)}
.fj-leg-day{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent)}
.fj-leg h3{font-size:19px;margin:9px 0 7px;color:var(--c-primary)}
.fj-leg p{font-size:13.5px;line-height:1.5;color:var(--c-muted)}
.fj-leg-alt{display:block;margin-top:9px;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.fj-route-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;padding-top:16px;border-top:var(--fj-rule);font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.fj-route-foot a{border-bottom:2px solid var(--c-accent);padding-bottom:3px;transition:color .2s}
.fj-route-foot a:hover{color:var(--c-accent)}
@media(max-width:1000px){.fj-route{grid-template-columns:repeat(3,1fr)}.fj-leg{padding-right:18px}}
@media(max-width:620px){
  .fj-route{grid-template-columns:1fr;border-top:0}
  .fj-leg{padding:16px 0 16px 26px;border-left:2px solid var(--c-border)}
  .fj-leg::before{top:20px;left:-7px}
}

/* ---- circuit slips ------------------------------------------------------------- */
.fj-slips{display:grid;gap:0;border-top:2px solid var(--c-primary)}
.fj-slip{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding:40px 0;border-bottom:var(--fj-rule);align-items:start}
.fj-slip-pic img{width:100%;aspect-ratio:5/4;object-fit:cover}
.fj-slip-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.fj-slip-code{font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;background:var(--c-primary);color:var(--c-bg);padding:5px 10px}
.fj-slip-grade{font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--c-accent);color:var(--c-accent);padding:4px 9px}
.fj-slip-days{font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.fj-slip-body h3{font-size:clamp(24px,2.7vw,34px);margin-bottom:12px}
.fj-slip-body p{color:var(--c-muted);max-width:40em}
.fj-slip-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px;margin-top:22px;border-top:var(--fj-rule);padding-top:16px}
.fj-slip-spec dt{font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted)}
.fj-slip-spec dd{font-family:var(--fj-display);font-size:19px;font-weight:700;margin-top:4px}
.fj-slip-more{display:inline-block;margin-top:22px;font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--c-accent);padding-bottom:4px;transition:color .2s}
.fj-slip-more:hover{color:var(--c-accent)}
@media(max-width:900px){.fj-slip{grid-template-columns:1fr;gap:24px;padding:30px 0}.fj-slip-spec{grid-template-columns:1fr 1fr;gap:14px 20px}}

/* ---- craft feature -------------------------------------------------------------- */
.fj-craft{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.fj-craft-pic img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fj-craft-copy h2{font-size:clamp(28px,3.6vw,48px);max-width:20ch}
.fj-craft-copy h2 em{font-style:normal;color:var(--c-accent)}
.fj-craft-copy p{color:var(--c-muted);margin-top:18px;max-width:38em}
.fj-listing{margin-top:28px;border-top:2px solid var(--c-primary)}
.fj-listing li{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;padding:15px 0;border-bottom:var(--fj-rule)}
.fj-listing li b{font-family:var(--fj-display);font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.fj-listing li span{font-size:14.5px;color:var(--c-muted)}
.fj-listing li i{font-style:normal;font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent);white-space:nowrap}
@media(max-width:900px){.fj-craft{grid-template-columns:1fr;gap:30px}.fj-craft-pic img{aspect-ratio:4/3}.fj-listing li{grid-template-columns:1fr;gap:4px}}

/* ---- calendar of seasons --------------------------------------------------------- */
.fj-cal{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fj-cal-col img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fj-cal-col b{display:block;font-family:var(--fj-display);font-size:21px;font-weight:700;text-transform:uppercase;margin-top:16px}
.fj-cal-col span{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent);margin-top:6px}
.fj-cal-col p{font-size:14.5px;color:var(--c-muted);margin-top:10px}
.fj-zone.basalt .fj-cal-col p{color:var(--fj-onbasalt-dim)}
@media(max-width:900px){.fj-cal{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:520px){.fj-cal{grid-template-columns:1fr}}

/* ---- words from travellers -------------------------------------------------------- */
.fj-words{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--c-primary)}
.fj-word{padding:30px 34px 0 0}
.fj-word-q{font-size:17.5px;line-height:1.5}
.fj-word-who{display:block;margin-top:18px;font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted)}
.fj-word-who i{font-style:normal;color:var(--c-accent)}
@media(max-width:880px){.fj-words{grid-template-columns:1fr}.fj-word{padding:24px 0 22px;border-bottom:var(--fj-rule)}}

/* ---- rate table --------------------------------------------------------------------- */
.fj-rates{border-top:2px solid var(--c-primary)}
.fj-rate{display:grid;grid-template-columns:1.5fr 1fr .9fr .9fr;gap:24px;padding:20px 0;border-bottom:var(--fj-rule);align-items:baseline}
.fj-rate-head{font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted);padding:12px 0}
.fj-rate b{display:block;font-family:var(--fj-display);font-size:20px;font-weight:700;text-transform:uppercase}
.fj-rate p{font-size:14px;color:var(--c-muted);margin-top:4px}
.fj-rate-num{font-family:var(--fj-display);font-size:24px;font-weight:700;color:var(--c-primary)}
.fj-rate-num small{display:block;font-family:var(--fj-mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin-top:4px}
.fj-rate-plain{font-family:var(--fj-mono);font-size:12px;letter-spacing:.06em;color:var(--c-muted)}
@media(max-width:880px){.fj-rate{grid-template-columns:1fr 1fr;gap:12px 20px}.fj-rate-head{display:none}}

.fj-fees{display:grid;grid-template-columns:repeat(2,1fr);gap:0 52px}
.fj-fee{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:16px 0;border-bottom:var(--fj-rule)}
.fj-fee b{font-family:var(--fj-display);font-size:18px;font-weight:700;text-transform:uppercase}
.fj-fee p{font-size:14px;color:var(--c-muted);margin-top:3px}
.fj-fee i{font-style:normal;font-family:var(--fj-mono);font-size:12px;letter-spacing:.08em;color:var(--c-accent);white-space:nowrap}
@media(max-width:820px){.fj-fees{grid-template-columns:1fr}}

.fj-incl{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.fj-incl-col b{display:block;font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-accent);padding-bottom:12px;border-bottom:2px solid var(--c-primary)}
.fj-incl-col.out b{color:var(--c-muted)}
.fj-incl-col li{padding:12px 0;border-bottom:var(--fj-rule);font-size:15.5px;color:var(--c-muted)}
.fj-incl-col li em{font-style:normal;color:var(--c-ink);font-weight:600}
@media(max-width:820px){.fj-incl{grid-template-columns:1fr;gap:36px}}

/* ---- crew and logbook (about) --------------------------------------------------------- */
.fj-crew{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.fj-crew-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.fj-crew-card b{display:block;font-family:var(--fj-display);font-size:21px;font-weight:700;text-transform:uppercase;margin-top:16px}
.fj-crew-card span{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent);margin-top:6px}
.fj-crew-card p{font-size:14.5px;color:var(--c-muted);margin-top:11px}
@media(max-width:820px){.fj-crew{grid-template-columns:1fr;gap:30px}}

.fj-log{border-top:2px solid var(--c-primary)}
.fj-log-row{display:grid;grid-template-columns:110px 1fr;gap:32px;padding:22px 0;border-bottom:var(--fj-rule)}
.fj-log-row b{font-family:var(--fj-display);font-size:22px;font-weight:700;color:var(--c-accent)}
.fj-log-row h3{font-size:19px;margin-bottom:6px}
/* 54em of a 15px face is 810 pixels and 118 average characters a line — the
   longest measure left on the site after the notes were capped. */
.fj-log-row p{color:var(--c-muted);font-size:15px;max-width:72ch}
@media(max-width:640px){.fj-log-row{grid-template-columns:1fr;gap:6px}}

.fj-prose{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.fj-prose p{color:var(--c-muted)}
.fj-prose p+p{margin-top:18px}
.fj-prose .fj-prose-open{font-size:22px;line-height:1.45;color:var(--c-ink)}
@media(max-width:860px){.fj-prose{grid-template-columns:1fr;gap:24px}}

/* ---- questions ------------------------------------------------------------------------- */
.fj-asks{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.fj-ask{border-top:var(--fj-rule);padding:22px 0 20px}
.fj-ask h3{font-size:18px;margin-bottom:8px}
.fj-ask p{color:var(--c-muted);font-size:15px}
.fj-zone.basalt .fj-ask{border-top:var(--fj-rule-dark)}
.fj-zone.basalt .fj-ask p{color:var(--fj-onbasalt-dim)}
@media(max-width:820px){.fj-asks{grid-template-columns:1fr}}

/* ---- enquiry ----------------------------------------------------------------------------- */
.fj-enq-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.fj-enq-grid h2{font-size:clamp(28px,3.6vw,48px);margin:18px 0 16px;max-width:18ch}
.fj-enq-grid h2 em{font-style:normal;color:var(--c-accent)}
.fj-enq-grid .fj-note{max-width:34em}
.fj-facts{margin-top:28px;border-top:2px solid var(--c-primary)}
.fj-facts div{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:13px 0;border-bottom:var(--fj-rule);font-size:15px}
.fj-facts dt{font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);padding-top:4px}
.fj-form{background:var(--fj-raffia);border:1px solid var(--c-primary);padding:34px 32px 30px}
.fj-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fj-cell{margin-bottom:18px}
.fj-cell label{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);margin-bottom:7px}
.fj-cell input,.fj-cell select,.fj-cell textarea{width:100%;font-family:var(--fj-text);font-size:16px;color:var(--c-ink);background:var(--c-bg);border:var(--fj-rule);padding:11px 13px;transition:border-color .2s}
.fj-cell textarea{resize:vertical}
/* Keyboard focus keeps the design system's ring; a mouse click does not.
   The colour-only version measured 2.57:1 between the resting border and the
   focused one on the two search fields, under the 3:1 WCAG 2.2 asks for a focus
   indicator, and it changed no area at all. :focus-visible is what tells the
   two apart, and the ring it restores is the same one every other control on
   the site uses. */
.fj-cell input:focus:not(:focus-visible),.fj-cell select:focus:not(:focus-visible),
.fj-cell textarea:focus:not(:focus-visible){outline:none}
.fj-cell input:focus,.fj-cell select:focus,.fj-cell textarea:focus{border-color:var(--c-accent)}
.fj-send{font-family:var(--fj-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-bg);background:var(--c-primary);border:0;padding:14px 28px;cursor:pointer;transition:background .2s}
.fj-send:hover{background:var(--c-accent)}
.fj-fine{margin-top:14px;font-size:13px;color:var(--c-muted)}
.fj-flash{display:none;margin-top:14px;font-size:14.5px;padding:12px 14px;border-left:3px solid var(--c-accent);background:var(--fj-ember);color:var(--c-ink)}
.fj-flash.show{display:block}
@media(max-width:900px){.fj-enq-grid{grid-template-columns:1fr;gap:34px}.fj-row{grid-template-columns:1fr;gap:0}.fj-form{padding:26px 20px 24px}}

/* ---- footer ------------------------------------------------------------------------------- */
.fj-foot{background:var(--fj-basalt);color:var(--fj-onbasalt);padding:66px 0 0}
.fj-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.fj-foot-brand{font-family:var(--fj-display);font-size:26px;font-weight:700;text-transform:uppercase;color:var(--c-bg)}
.fj-foot-brand span{display:block;font-family:var(--fj-mono);font-size:9.5px;font-weight:400;letter-spacing:.28em;color:var(--c-accent);margin-top:7px}
.fj-foot-grid p{margin-top:16px;font-size:14.5px;max-width:32em;color:var(--fj-onbasalt-dim)}
.fj-foot-col b{display:block;font-family:var(--fj-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-accent);margin-bottom:14px;font-weight:400}
.fj-foot-col a,.fj-foot-col span{display:block;font-size:14.5px;padding:5px 0;color:var(--fj-onbasalt-dim);transition:color .2s}
.fj-foot-col a:hover{color:var(--c-bg)}
.fj-foot-bar{margin-top:48px;padding:20px 0;border-top:var(--fj-rule-dark);font-family:var(--fj-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fj-onbasalt-dim)}
.fj-foot-bar em{font-style:normal;color:var(--c-accent)}
@media(max-width:900px){.fj-foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){.fj-foot-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;animation-iteration-count:1 !important}
  .fj-rise{opacity:1;transform:none}
}
/* WCAG 2.5.8 asks for 24x24 CSS pixels and these are 13, 17 and 23 tall — mono
   at 9 to 11px with a rule under them and no padding. Only where a finger is
   the pointer; on a mouse they keep the setting they were drawn at. */
@media(pointer:coarse){
  .fj-mark{padding:5px 0}
  .fj-slip-more,.fj-way a{display:inline-block;padding-top:6px;padding-bottom:8px}
  .fj-route-foot a{display:inline-block;padding:5px 0 7px}
  .fj-foot-bar a{padding-block:6px;display:inline-block}
}

/* ---- tourism country pages -------------------------------------------------- */
/* The mark names the group first and the country second, so a page reached from
   a search result says whose site it is and what it is about, in that order. */
.fj-mark i{display:block;font-style:normal;font-family:var(--fj-mono);font-size:8.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--c-accent)}
.fj-mast-tel{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-muted);white-space:nowrap}
@media(max-width:1100px){.fj-mast-tel{display:none}}
.tq-hero{position:relative;background:var(--fj-basalt);color:var(--fj-onphoto)}
.tq-hero-pic{position:absolute;inset:0;overflow:hidden}
.tq-hero-pic img{width:100%;height:100%;object-fit:cover}
.tq-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,16,.22),rgba(20,19,16,.72))}
.tq-hero-in{position:relative;padding:132px 0 56px;min-height:clamp(440px,66vh,760px);display:flex;flex-direction:column;justify-content:flex-end}
.tq-hero h1{font-size:clamp(42px,7vw,88px);color:var(--fj-onphoto);max-width:14em}
.tq-hero .tq-lede{margin-top:18px;max-width:38em;color:var(--fj-onphoto-soft);font-size:19px}
.tq-hero .fj-stamp{color:var(--fj-onphoto-dim);margin-bottom:18px}
.tq-facts{display:flex;flex-wrap:wrap;gap:34px;margin-top:34px;padding-top:22px;border-top:var(--fj-rule-dark)}
.tq-facts div b{display:block;font-family:var(--fj-display);font-size:24px;letter-spacing:.01em}
.tq-facts div span{font-family:var(--fj-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fj-onphoto-dim)}

.tq-sec{padding:84px 0;border-bottom:var(--fj-rule)}
.tq-sec-head{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-bottom:44px;align-items:start}
.tq-sec-head .tq-no{font-family:var(--fj-display);font-size:34px;color:var(--c-accent);line-height:1}
.tq-sec-head h2{font-size:clamp(26px,3.4vw,42px);max-width:16em}
.tq-sec-head p{margin-top:12px;color:var(--c-muted);max-width:40em}

.tq-grid{display:grid;gap:26px}
.tq-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.tq-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.tq-item{display:flex;flex-direction:column}
.tq-item figure{margin:0;position:relative;overflow:hidden;background:var(--fj-dust)}
.tq-item img{width:100%;height:100%;display:block;object-fit:cover}
.tq-item h3{margin-top:14px;font-size:17px;letter-spacing:.02em}
.tq-item p{margin-top:6px;color:var(--c-muted);font-size:15px}
.tq-tag{position:absolute;left:0;bottom:0;background:var(--fj-basalt);color:var(--fj-onphoto);
  font-family:var(--fj-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:7px 11px}

.tq-feature{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:34px}
.tq-feature:nth-child(even) .tq-feature-txt{order:-1}
.tq-feature figure{margin:0;overflow:hidden;background:var(--fj-dust)}
.tq-feature img{width:100%;height:100%;object-fit:cover;display:block}
.tq-feature h3{font-size:clamp(22px,2.6vw,30px)}
.tq-feature p{margin-top:12px;color:var(--c-muted)}

.tq-band{position:relative;overflow:hidden;background:var(--fj-basalt)}
.tq-band img{width:100%;display:block;object-fit:cover}
.tq-band-txt{position:absolute;inset:auto 0 0 0;padding:44px 0;
  background:linear-gradient(180deg,rgba(20,19,16,0),rgba(20,19,16,.78))}
.tq-band-txt h3{color:var(--fj-onphoto);font-size:clamp(24px,3.4vw,40px)}
.tq-band-txt p{color:var(--fj-onphoto-soft);max-width:40em;margin-top:10px}

.tq-hero-pic .tq-empty{width:100%;height:100%;aspect-ratio:auto;align-items:flex-start;
  justify-content:flex-end;padding:100px 28px 0;background:var(--fj-basalt);border:0;
  color:var(--fj-onphoto-dim)}
.tq-empty em{display:block;margin-top:8px;font-style:normal;text-transform:none;
  letter-spacing:.02em;font-family:var(--fj-text);font-size:13px;opacity:.75}
.tq-empty{display:flex;align-items:center;justify-content:center;background:var(--fj-raffia);
  border:1px dashed var(--c-border);color:var(--c-muted);font-family:var(--fj-mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:20px}
.tq-credit{margin-top:6px;font-family:var(--fj-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-muted)}
.tq-credit a{border-bottom:1px solid var(--c-border)}

.tq-cta{padding:84px 0;text-align:center}
.tq-cta h2{font-size:clamp(28px,4vw,54px);max-width:16em;margin:0 auto}
.tq-cta p{margin:16px auto 0;color:var(--c-muted);max-width:40em}
.tq-cta .btn{margin-top:28px;display:inline-block}
/* THE WAY OUT. This page had one real outbound link and it went to /journey;
   everything else on it was a font. Deliberately below the button and quieter
   than it — "build a journey" is still what this page is for, and these are
   for the reader who is not ready to and would otherwise close the tab.
   Centred because the section is, rules rather than boxes because the site has
   twelve card classes already. */
.tq-else{margin:56px auto 0;max-width:60em;border-top:var(--fj-rule);
  display:grid;grid-template-columns:repeat(3,1fr);text-align:left}
.tq-else-h{grid-column:1/-1;font-family:var(--fj-mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted);
  margin:18px 0 4px;text-align:left}
.tq-else-a{display:flex;flex-direction:column;gap:6px;padding:18px 22px 22px 0;
  border-right:var(--fj-rule)}
.tq-else-a:last-child{border-right:0}
.tq-else-a + .tq-else-a{padding-left:22px}
.tq-else-a span{font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-accent)}
.tq-else-a b{font-family:var(--fj-display);font-size:18px;font-weight:700;
  line-height:1.2;color:var(--c-primary)}
.tq-else-a:hover b{color:var(--c-accent)}
@media(max-width:760px){
  .tq-else{grid-template-columns:1fr}
  .tq-else-a,.tq-else-a + .tq-else-a{border-right:0;padding:16px 0}
  .tq-else-a + .tq-else-a{border-top:var(--fj-rule)}
}

.tq-countries{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tq-countries a{display:block}
.tq-countries figure{margin:0;overflow:hidden;background:var(--fj-dust)}
.tq-countries img{width:100%;height:100%;object-fit:cover;display:block}
.tq-countries h3{margin-top:12px;font-size:19px}
.tq-countries p{color:var(--c-muted);font-size:15px;margin-top:4px}

@media(max-width:1000px){
  .tq-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .tq-countries{grid-template-columns:repeat(2,1fr)}
  .tq-feature{grid-template-columns:1fr;gap:22px}
  .tq-feature:nth-child(even) .tq-feature-txt{order:0}
  .tq-sec-head{grid-template-columns:1fr;gap:10px}
}
@media(max-width:640px){
  .tq-grid.cols-3,.tq-grid.cols-2,.tq-countries{grid-template-columns:1fr}
  .tq-sec{padding:56px 0}
  .tq-hero-in{padding:96px 0 40px;min-height:clamp(380px,60vh,620px)}
}
/* The empty frame. A slot whose photograph has not been resolved yet is a
   finished state, not a hole: the accent wash and the caption make it read as
   a plate awaiting its picture, which is what it is. */
.tq-empty{position:relative;display:flex;align-items:flex-start;padding:14px 16px;overflow:hidden;
  /* color-mix() is fine as a colour but is dropped inside a gradient by some
     engines, which silently left this frame with no background at all. The tint
     is a background-color; the hatch over it is neutral and needs no mixing. */
  background-color:color-mix(in srgb,var(--c-accent) 11%,var(--c-bg));
  background-image:repeating-linear-gradient(135deg,
    rgba(0,0,0,.035) 0 9px, rgba(0,0,0,0) 9px 18px);
  box-shadow:inset 0 0 0 1px var(--c-border)}
.tq-empty span{display:block;font-family:var(--fj-mono);font-size:9.5px;letter-spacing:.12em;
  line-height:1.6;text-transform:uppercase;text-align:left;
  color:color-mix(in srgb,var(--c-primary) 62%,var(--c-accent))}
@media(prefers-reduced-motion:reduce){.fj-rise{transition:none}}