/* Case study page. Loaded after media-kit.css, which supplies the brand tokens, nav, buttons,
   Reach tiles (.mk-tiles/.mk-tile), panels (.mk-two, .mk-card, .mk-bd-row, .mk-avg-row), contact and footer.
   Only case-study bits live here. Static page: nothing is drawn by JS, so there is no layout shift. */
.cs{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--tap:44px;overflow-x:clip}
.cs-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Skip link + focus */
.cs-skip{position:absolute;left:var(--sp-4);top:-100px;z-index:100;background:var(--bone);color:var(--char);padding:var(--sp-3) var(--sp-4);font-weight:600;font-size:14px;border-radius:2px}
.cs-skip:focus{top:var(--sp-4)}
.cs a:focus-visible,.cs button:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
.cs .mk-contact a:focus-visible{outline-color:var(--char)}

/* Tap targets >= 44px */
.cs .mk-btn-sm{min-height:var(--tap)}
.cs .mk-logo{display:inline-flex;align-items:center;min-height:var(--tap)}
.cs-nav-links{display:flex;align-items:center;gap:var(--sp-5)}
.cs-nav-link{display:inline-flex;align-items:center;min-height:var(--tap);font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:11.5px;font-weight:600;color:rgba(239,232,218,.8);transition:color .2s}
.cs-nav-link:hover{color:var(--tan)}
.cs .mk-nav{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.cs .mk-foot-links{gap:0 var(--sp-5)}
.cs .mk-foot-links a,.cs .mk-contact-row a{display:inline-flex;align-items:center;min-height:var(--tap)}
.cs .mk-foot-links a{min-width:var(--tap);justify-content:center}
.cs .mk-contact-row{align-items:center;padding-bottom:var(--sp-1);border-bottom:0}
.cs .mk-contact-row a{border-bottom:0;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.cs-text-link{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--tan);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(200,180,142,.5);white-space:nowrap}
.cs-text-link:hover{text-decoration-color:var(--tan)}


/* Hero */
.cs-hero{position:relative;padding:var(--sp-7) 6% var(--sp-8);overflow:hidden}
.cs-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 18%,rgba(200,180,142,.18),transparent 60%)}
.cs-hero>*{position:relative}
.cs-h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,8vw,88px);line-height:1;color:var(--bone);margin-top:var(--sp-5)}
.cs-sub{margin-top:var(--sp-5);max-width:640px;font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--tan)}
.cs-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:3px double var(--line);max-width:900px}
.cs-meta-row{min-width:0}
.cs-meta dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,232,218,.7)}
.cs-meta dd{margin-top:var(--sp-1);font-size:15px;font-weight:500;color:var(--bone)}

/* Results: media-kit Reach tiles (6 = two rows of 3 on desktop, the 6-col track spans 2 each).
   Exact figures are long, so the number scales to its tile (container units) and never overflows. */
.cs-results{background:var(--char-2)}
.cs-tiles .mk-tile{min-width:0;container-type:inline-size}
.cs-tiles .mk-num{font-size:clamp(26px,8vw,46px);font-size:clamp(26px,14.5cqi,50px);white-space:nowrap}
/* First tile (James-approved): 163M+ / Total views / Instagram, Facebook and TikTok combined. */
.cs-tile-sub{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:#B5ACA0}
.cs-results .mk-bd-name{border-bottom:0}
.cs-avg-lead .mk-avg-lbl{color:var(--bone);font-weight:600}
.cs-avg-lead .mk-avg-val{font-size:32px}
.cs-avg-range{font-size:20px;text-align:right}
.cs-results .mk-avg-lbl{min-width:0}
.cs-results .mk-avg-val{flex:0 0 auto}
.cs-source{margin-top:10px}
@media (max-width:599px){.cs-tiles{grid-template-columns:1fr}.cs-tiles .mk-tile{padding:18px 16px}
  .cs-avg-range-row{flex-direction:column;align-items:flex-start;gap:6px}.cs-avg-range{font-size:20px;text-align:left}}

/* Prose */
.cs-prose{max-width:700px;display:grid;gap:var(--sp-4)}
.cs-prose p{font-size:17px;line-height:1.7;color:var(--bone)}
.cs-prose strong{color:var(--tan);font-weight:600}

/* Reel-by-Reel table (desktop) */
.cs-table-label{margin:14px 0 26px}
.cs-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.cs-table thead th{position:sticky;top:0;text-align:left;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C8B48E;padding:10px 10px 12px;border-bottom:1px solid var(--tan);background:var(--char);vertical-align:bottom}
.cs-table td,.cs-table tbody th{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--bone);text-align:left;font-weight:400}
.cs-table .cs-t-num{text-align:right;white-space:nowrap}
.cs-table thead .cs-t-num{text-align:right}
.cs-table .cs-t-n{color:#C8B48E;width:2.5em}
.cs-table tbody .cs-t-name{font-weight:500;min-width:220px}
.cs-table .cs-t-date,.cs-table .cs-t-place{white-space:nowrap} /* place names are all short (Dead Sea, Wadi Rum): never wrap */
.cs-table .cs-t-link{text-align:right;white-space:nowrap}
.cs-table tbody tr:hover td,.cs-table tbody tr:hover th{background:rgba(239,232,218,.03)}
.cs-table .cs-t-span{text-align:center;color:#C8B48E}
.cs-credit{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:#B5ACA0}

/* Below 1260px (the 11-column table needs ~1180px): rows become cards (Views and Likes first). ARIA roles keep table semantics. */
@media (max-width:1259px){
  .cs-table,.cs-table tbody{display:block}
  .cs-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .cs-table tbody{display:grid;gap:14px}
  .cs-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:2px;padding:18px 18px 8px}
  .cs-table tbody td,.cs-table tbody th{display:block;padding:0;border:0;text-align:left;min-width:0}
  .cs-table tbody tr:hover td,.cs-table tbody tr:hover th{background:none}
  .cs-table .cs-t-n{order:0;grid-column:1/-1;width:auto;font-size:11px;font-weight:600;letter-spacing:.2em}
  .cs-table .cs-t-n::before{content:"Reel "}
  .cs-table tbody .cs-t-name{order:1;grid-column:1/-1;min-width:0;font-family:var(--display);font-size:22px;line-height:1.2}
  .cs-table .cs-credit{font-family:var(--sans)}
  .cs-table .cs-t-place{order:2}
  .cs-table .cs-t-date{order:3}
  .cs-table .cs-t-views{order:4}.cs-table .cs-t-likes{order:5}.cs-table .cs-t-shares{order:6}
  .cs-table .cs-t-saves{order:7}.cs-table .cs-t-comments{order:8}.cs-table .cs-t-fb{order:9}
  .cs-table .cs-t-span{order:4;grid-column:1/-1;text-align:left;font-size:15px}
  .cs-table .cs-t-link{order:10;grid-column:1/-1;text-align:left;border-top:1px solid var(--line);padding-top:2px}
  .cs-table td[data-label]::before{content:attr(data-label);display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C8B48E;margin-bottom:2px}
  .cs-table .cs-t-n[data-label]::before{content:"Reel ";display:inline;font-size:inherit;letter-spacing:inherit;margin:0}
  .cs-table .cs-t-views,.cs-table .cs-t-likes{font-family:var(--display);font-size:24px;line-height:1.1;color:var(--tan-l)}
  .cs-table .cs-t-views::before,.cs-table .cs-t-likes::before{font-size:10.5px;line-height:1.6}
  .cs-table tbody .cs-t-num{font-size:15px;text-align:left}
  .cs-table tbody .cs-t-views,.cs-table tbody .cs-t-likes{font-size:24px}
}
@media (min-width:640px) and (max-width:1259px){.cs-table tbody{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Disclosure */
.cs-disc-wrap{padding-top:var(--sp-7);padding-bottom:var(--sp-7)}
.cs-disclosure{max-width:640px;padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--tan);background:rgba(200,180,142,.08);font-size:15px;line-height:1.6;color:var(--bone)}

/* Contact */
.cs .mk-contact-note{margin-top:var(--sp-3)}
.cs-contact-btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.cs-btn-choc{background:var(--char);color:var(--bone);border-color:var(--char)}
.cs-btn-choc:hover{background:var(--char-2);border-color:var(--char-2)}
.cs-btn-line{background:transparent;color:var(--char);border-color:var(--char)}
.cs-btn-line:hover{background:var(--char);color:var(--bone)}
.cs .mk-btn{min-height:var(--tap)}

@media (min-width:900px){
  .cs-hero{padding:var(--sp-9) 6% var(--sp-8)}
  .cs-meta{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media print{.cs-table thead th{position:static}.cs-skip{display:none}}

/* Journey through Jordan: inline SVG map (Natural Earth outline, self-hosted) + numbered pins + stop list.
   The map box reserves the SVG's aspect ratio (410:450), so nothing shifts while it loads. */
.jm-grid{display:grid;gap:var(--sp-6);align-items:start}
.jm-map{position:relative;width:100%;max-width:560px;aspect-ratio:410/450;margin:0 auto}
.jm-svg{display:block;width:100%;height:100%;overflow:visible}
.jm-land{fill:rgba(200,180,142,.07);stroke:#C8B48E;stroke-width:1.2;stroke-linejoin:round}
.jm-water{fill:rgba(32,18,12,.9);stroke:rgba(200,180,142,.55);stroke-width:.8}
.jm-route path{fill:none;stroke:#C8B48E;stroke-width:2;stroke-linecap:round;opacity:.75}
.jm-leader{stroke:rgba(200,180,142,.55);stroke-width:1}
.jm-dot{fill:#C8B48E;stroke:var(--char);stroke-width:1.5}
/* Pins: 32px visible disc, 44px hit area */
.jm-pin{position:absolute;transform:translate(-50%,-50%);min-width:32px;height:32px;padding:0 8px;border-radius:16px;border:1.5px solid #C8B48E;background:var(--char);
  color:#EFE8DA;font-family:var(--sans);font-size:13px;font-weight:600;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;z-index:2;transition:background .15s,color .15s}
.jm-pin::after{content:"";position:absolute;left:50%;top:50%;width:max(44px,100%);height:44px;transform:translate(-50%,-50%)}
.jm-pin:not([disabled]):hover,.jm-pin[aria-expanded="true"]{background:#C8B48E;color:var(--char)}
.jm-pin:focus-visible{outline:2px solid #EFE8DA;outline-offset:3px}
.jm-pin[disabled]{cursor:default;opacity:1;color:#EFE8DA}
.jm-pin-wide{letter-spacing:.02em}
.jm-pop{position:absolute;z-index:5;width:min(260px,calc(100vw - 32px));background:#2A1810;border:1px solid #C8B48E;border-radius:2px;padding:14px 16px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.jm-pop[hidden]{display:none}
.jm-pop-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:#EFE8DA}
.jm-pop-h+.jm-pop-h{margin-top:6px}
.jm-pop-n,.jm-stop-n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:12px;border:1.5px solid #C8B48E;font-size:12px;font-weight:600;color:#C8B48E}
.jm-pop-s,.jm-stop-s{margin-top:6px;font-size:13.5px;line-height:1.5;color:#C8B48E}
.jm-v{color:#EFE8DA;font-weight:600}
.jm-pop-c,.jm-stop-c{margin-top:6px;font-size:13px;line-height:1.5;color:#EFE8DA}
/* Stop list (always visible; the JS-off and screen-reader version of the map) */
.jm-list{list-style:none;display:grid;gap:0;counter-reset:none}
.jm-stop{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.jm-stop:first-child{padding-top:0}
.jm-stop-h{font-size:15.5px;font-weight:600;color:#EFE8DA;line-height:24px}
.jm-stop-s{margin-top:2px}
@media (min-width:1024px){.jm-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sp-8)}.jm-map{margin:0}}
@media print{.jm-pop{display:none!important}}

/* Results-led top (James 12:17 AM ET): compact hero, tiles right below it; meta row sits after the tiles. */
.cs-hero{padding-bottom:var(--sp-6)}
.cs-results{padding-top:var(--sp-7)}
.cs-results .cs-meta{margin:0 0 28px;max-width:none;padding-top:20px}
@media (min-width:600px){.cs-results .cs-meta{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){
  .cs-hero{padding:var(--sp-7) 6% var(--sp-6)}
  .cs-h1{font-size:clamp(44px,6vw,80px)}
  .cs-results{padding-top:var(--sp-7)}
  .cs-results .cs-meta{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Print (QA Low 12:27 AM ET): on narrow pages stack the panels and keep tiles 2-up, so nothing squashes or overflows. */
@media print and (max-width:899px){
  .cs .mk-two{grid-template-columns:1fr}
  .cs .mk-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs .mk-tiles>.mk-tile{grid-column:auto}
  .cs .mk-card{min-width:0;padding:18px 16px}
  .cs .mk-avg-row{flex-wrap:wrap}
  .cs .jm-grid{grid-template-columns:1fr}
}
.cs-t-fb [aria-hidden="true"]{color:#C8B48E}