/* ============================================================================
   YS Trade Partners — v9 refinement layer
   Loaded last on every page. Additive only: this file changes how the existing
   site LOOKS, never what it does. No markup, forms, links or scripts depend on it.
   Principles: more air, fewer decorations, one clear hierarchy, quieter motion.
   ========================================================================== */

/* ── 1. Rhythm ──────────────────────────────────────────────────────────────
   The site used a flat 110px band on every section. Premium reads as air, so
   the vertical rhythm now scales with the viewport and the bands alternate
   weight instead of all shouting equally. */
:root{
  --pad-section: clamp(96px, 10.5vw, 168px);
  --pad-section-tight: clamp(72px, 7.5vw, 116px);
  --rule: rgba(26,21,16,.10);
  --rule-dark: rgba(247,243,236,.10);
}
section:not(.hero){ padding-top: var(--pad-section) !important;
                    padding-bottom: var(--pad-section) !important; }
.lanes{ padding-bottom: var(--pad-section-tight) !important; }

/* ── 2. Typography ──────────────────────────────────────────────────────────
   Bigger, tighter headings; a single quiet label style; leads that read as
   editorial standfirsts rather than body copy. */
.section-label{
  font-size: 11px !important; letter-spacing: 3.4px !important;
  font-weight: 500 !important; text-transform: uppercase !important;
  color: rgba(184,146,42,.85) !important; margin-bottom: 22px !important;
}
.results-section .section-label{ color: rgba(184,146,42,.80) !important; }

h2:not(.seo-about h2), .section-head{
  font-size: clamp(32px, 4.1vw, 56px) !important;
  line-height: 1.08 !important; letter-spacing: -.9px !important;
  font-weight: 400 !important; margin-bottom: 20px !important;
}
h2 em, .section-head em{ font-style: italic; }

.lead{
  font-size: clamp(16.5px, 1.35vw, 19.5px) !important;
  line-height: 1.68 !important; font-weight: 300 !important;
  max-width: 62ch !important; letter-spacing: .1px !important;
}

/* Arabic needs a shorter measure and a taller line to stay comfortable */
[dir="rtl"] h2:not(.seo-about h2), [dir="rtl"] .section-head{
  font-size: clamp(27px, 3.1vw, 42px) !important;
  line-height: 1.42 !important; letter-spacing: 0 !important; font-weight: 700 !important;
}
[dir="rtl"] .lead{ font-size: clamp(15.5px,1.2vw,18px) !important;
                   line-height: 1.85 !important; max-width: 56ch !important; }
[dir="rtl"] .section-label{ letter-spacing: 1.8px !important; }

/* ── 3. Motion ──────────────────────────────────────────────────────────────
   The reveal existed already. It was fast and bouncy; now it is a slow, short
   fade-up that you feel rather than watch. Nothing new animates. */
.anim{ transition: opacity .9s cubic-bezier(.22,.61,.36,1),
                   transform .9s cubic-bezier(.22,.61,.36,1) !important; }
.anim:not(.visible){ transform: translateY(14px) !important; }
.anim-d1{ transition-delay: .06s !important; }
.anim-d2{ transition-delay: .12s !important; }
.anim-d3{ transition-delay: .18s !important; }
.anim-d4{ transition-delay: .24s !important; }
@media (prefers-reduced-motion: reduce){
  .anim{ transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ── 4. Buttons ─────────────────────────────────────────────────────────────
   The gold buttons carried a permanent shimmer + pulse animation. A premium
   advisory site does not blink at you. Flat gold, ink text (6.2:1, WCAG AA),
   movement only on hover. */
.btn-gold{
  background: #B8922A !important; background-image: none !important;
  border: 1px solid #B8922A !important; color: #1A1510 !important;
  animation: none !important; box-shadow: none !important;
  border-radius: 3px !important;
  transition: background .35s ease, transform .35s ease, box-shadow .35s ease !important;
}
.btn-gold:hover{
  background: #C9A23A !important; background-image: none !important;
  border-color: #C9A23A !important; color: #1A1510 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(184,146,42,.26) !important;
}
.btn-ghost-white{ border-radius: 3px !important; transition: all .35s ease !important; }

/* ── 5. Cards → editorial blocks ────────────────────────────────────────────
   Heavy borders, rounded corners and drop shadows read as a template. These
   become flat panels separated by hairlines and space. */
.lane, .result-card, .faq-item, .res-card, .article-card, .dc-card{
  border-radius: 3px !important;
  box-shadow: none !important;
}
.lane{
  padding: clamp(32px, 3.4vw, 52px) !important;
  transition: border-color .4s ease, transform .4s ease !important;
}
/* Two doors, two weights — the light card is market entry, the dark one is M&A.
   That contrast is the existing design's idea; it is kept and sharpened, not flattened. */
.lane-a{ background: #FFFDFA !important; border: 1px solid var(--rule) !important; }
.lane-a:hover{ border-color: rgba(184,146,42,.42) !important; transform: translateY(-3px) !important; }
/* Warm espresso, not black. #14110D read as a hole in the page and the body copy
   disappeared into it. #2A241C keeps the two doors distinct while staying legible:
   body copy is now 8.9:1 against it, the hairlines actually show. */
.lane-b{ background: #2A241C !important; border: 1px solid #2A241C !important; }
.lane-b:hover{ border-color: rgba(201,162,58,.55) !important; transform: translateY(-3px) !important; }
.lane-b h3{ color: #FBF8F3 !important; }
.lane-b p{ color: rgba(247,243,236,.80) !important; }
.lane-b .lane-eyebrow{ color: #D4A843 !important; }
.lane-b ul li{ color: rgba(247,243,236,.88) !important;
  border-top-color: rgba(247,243,236,.16) !important; }
.lane-b ul li:last-child{ border-bottom-color: rgba(247,243,236,.16) !important; }
.lane-b .lane-sub{ color: rgba(247,243,236,.72) !important; }
.lane-b .lane-sub:hover{ color: #C9A23A !important; }
.lane-b .routes-row,
.lane-b .route-item + .route-item{ border-color: var(--rule-dark) !important; }
.lane-grid{ gap: clamp(20px, 2.2vw, 34px) !important; }
.lane h3{
  font-size: clamp(22px, 1.9vw, 27px) !important; line-height: 1.24 !important;
  letter-spacing: -.3px !important; font-weight: 400 !important; margin-bottom: 14px !important;
}
[dir="rtl"] .lane h3{ font-size: clamp(19px,1.6vw,23px) !important;
                      line-height: 1.5 !important; letter-spacing: 0 !important; font-weight: 700 !important; }
.lane-eyebrow{
  font-size: 10.5px !important; letter-spacing: 2.6px !important; text-transform: uppercase !important;
  color: rgba(107,93,79,.75) !important; margin-bottom: 18px !important;
}
[dir="rtl"] .lane-eyebrow{ letter-spacing: 1.2px !important; font-size: 11px !important; }
.lane ul{ margin: 22px 0 !important; padding: 0 !important; list-style: none !important; }
.lane ul li{
  font-size: 14px !important; line-height: 1.5 !important; color: #6B5D4F !important;
  padding: 11px 0 !important; border-top: 1px solid var(--rule) !important;
}
.lane ul li:last-child{ border-bottom: 1px solid var(--rule) !important; }

/* ── 6. The three routes ────────────────────────────────────────────────────
   Stated once, plainly. No icons, no cards — three columns and two hairlines. */
.routes-row{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin: 4px 0 26px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.route-item{ padding: 18px 20px 18px 0; }
.route-item + .route-item{ padding-left: 20px; border-left: 1px solid var(--rule); }
[dir="rtl"] .route-item{ padding: 18px 0 18px 20px; }
[dir="rtl"] .route-item + .route-item{ padding-right: 20px; padding-left: 0;
  border-left: 0; border-right: 1px solid var(--rule); }
.route-pair{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(16px, 1.32vw, 20px); font-weight: 500;
  color: #12100D; letter-spacing: .2px; line-height: 1.3; white-space: nowrap;
}
[dir="rtl"] .route-pair{ font-family: inherit; font-size: clamp(13px,1.05vw,15.5px);
  font-weight: 600; white-space: normal; }
.route-arrow{ color: rgba(184,146,42,.9); padding: 0 3px; }
.route-note{ font-size: 12.5px; line-height: 1.5; color: rgba(107,93,79,.85); margin-top: 6px; }
[dir="rtl"] .route-note{ font-size: 12px; }
@media (max-width: 720px){
  .routes-row{ grid-template-columns: 1fr; }
  .route-item{ padding: 14px 0 !important; border-left: 0 !important; border-right: 0 !important; }
  .route-item + .route-item{ border-top: 1px solid var(--rule) !important; padding-left: 0 !important; padding-right: 0 !important; }
  .route-pair{ white-space: nowrap; }
}

/* ── 7. Dark bands ──────────────────────────────────────────────────────────
   The "How It Works" band is the one dark moment on the page. Let it breathe
   and drop the card chrome. */
/* SCOPED TO #results — the homepage's dark band. /deals uses the same class on a
   CREAM background, so forcing light text there made "Mandates" invisible.
   The homepage h2 already carries its own inline cream colour, so none is set here. */
#results .result-card{
  background: transparent !important;
  border: 0 !important; border-top: 1px solid var(--rule-dark) !important;
  padding: 30px 0 0 !important;
}
#results .results-grid{ gap: clamp(26px, 3vw, 54px) !important; }
#results .result-cat{
  font-size: 10.5px !important; letter-spacing: 2.6px !important; text-transform: uppercase !important;
  color: rgba(184,146,42,.85) !important; margin-bottom: 14px !important;
}
[dir="rtl"] #results .result-cat{ letter-spacing: 1.2px !important; }
#results .result-head{
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(20px, 1.7vw, 25px) !important; line-height: 1.26 !important;
  font-weight: 400 !important; color: #F7F3EC !important; margin-bottom: 12px !important;
}
[dir="rtl"] #results .result-head{ font-family: inherit !important; font-weight: 700 !important;
  font-size: clamp(17px,1.4vw,21px) !important; line-height: 1.5 !important; }
#results .result-quote{ font-size: 14.5px !important; line-height: 1.72 !important;
  color: rgba(247,243,236,.56) !important; font-weight: 300 !important; }
#results .result-num-val{ font-weight: 400 !important; letter-spacing: -.5px !important; }
#results .result-num-lbl, #results .result-disc{ color: rgba(247,243,236,.38) !important; }

/* ── 8. FAQ ─────────────────────────────────────────────────────────────────
   Hairline list, no boxes. */
.faq-item{
  border: 0 !important; border-bottom: 1px solid var(--rule) !important;
  background: transparent !important; padding: 0 !important;
}
.faq-item:first-of-type{ border-top: 1px solid var(--rule) !important; }
.faq-q{ padding: 26px 0 !important; font-size: clamp(16px,1.25vw,18.5px) !important;
  font-weight: 400 !important; letter-spacing: -.1px !important; }
.faq-a{ font-size: 15px !important; line-height: 1.75 !important;
  color: #6B5D4F !important; font-weight: 300 !important; }

/* ── 9. Footer ──────────────────────────────────────────────────────────────
   Five columns now (brand + the two businesses + company + legal). Quieter
   type, clearer heads, one hairline. */
.footer-top{ grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr !important;
  gap: clamp(28px, 2.6vw, 52px) !important;
  padding-bottom: 54px !important; border-bottom: 1px solid var(--rule-dark) !important; }
.footer-col h4{
  font-size: 10.5px !important; letter-spacing: 2.4px !important; text-transform: uppercase !important;
  font-weight: 500 !important; color: rgba(184,146,42,.82) !important; margin-bottom: 18px !important;
}
[dir="rtl"] .footer-col h4{ letter-spacing: 1.2px !important; font-size: 11.5px !important; }
.footer-col ul li{ margin-bottom: 11px !important; }
.footer-col a, .footer-col button{
  font-size: 13.5px !important; line-height: 1.5 !important; font-weight: 300 !important;
  color: rgba(247,243,236,.58) !important; transition: color .3s ease !important;
}
.footer-col a:hover, .footer-col button:hover{ color: #C9A23A !important; }
.footer-logo{ font-size: 23px !important; letter-spacing: .3px !important; }
.footer-desc{ font-size: 13.5px !important; line-height: 1.8 !important; font-weight: 300 !important;
  color: rgba(247,243,236,.48) !important; max-width: 46ch !important; }
.footer-info a, .footer-info span{ font-size: 13px !important; line-height: 1.9 !important;
  color: rgba(247,243,236,.44) !important; }
.footer-bottom p{ font-size: 11.5px !important; color: rgba(247,243,236,.32) !important; }
@media (max-width: 1100px){ .footer-top{ grid-template-columns: 1fr 1fr 1fr !important; } }
@media (max-width: 760px){ .footer-top{ grid-template-columns: 1fr 1fr !important;
  gap: 30px !important; padding-bottom: 38px !important; } }

/* ── 10. Links & focus ──────────────────────────────────────────────────────
   Quieter underlines, and a visible focus ring — keyboard users and the
   German accessibility rules both need it. */
.lane-sub{ font-size: 13.5px !important; color: rgba(107,93,79,.9) !important; }
.lane-sub:hover{ color: #B8922A !important; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline: 2px solid #B8922A !important; outline-offset: 3px !important; border-radius: 2px;
}

/* ── 11. Intro strip ────────────────────────────────────────────────────────
   Quiet ticker, not a banner. */
.intro-strip{ padding: 18px 0 !important; }
.intro-strip-label, .intro-item{ font-size: 11.5px !important; letter-spacing: 1.4px !important; }

/* ── 12. Lane balance ───────────────────────────────────────────────────────
   The two doors must read as equal offers: same height, CTA pinned to the
   same baseline, list flush to the bottom of the copy block. */
.lane-grid{ align-items: stretch !important; }
.lane{ display: flex !important; flex-direction: column !important; }
.lane .lane-cta{ margin-top: auto !important; padding-top: 26px !important;
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 14px !important; }
[dir="rtl"] .lane .lane-cta{ align-items: flex-end !important; }
.lane ul{ margin-bottom: 0 !important; }
.lane ul li::before{ content: none !important; }
.routes-row{ margin: 22px 0 4px !important; }
/* Arabic route pairs: keep all three cells the same height */
[dir="rtl"] .route-pair{ font-size: clamp(12px,.95vw,14px) !important; white-space: nowrap !important; }
[dir="rtl"] .route-note{ font-size: 11.5px !important; }
/* lane-b hairlines need a touch more presence on the dark card */
.lane-b ul li{ border-top-color: rgba(247,243,236,.16) !important; }
.lane-b ul li:last-child{ border-bottom-color: rgba(247,243,236,.16) !important; }

/* ── 13. Guardrails ─────────────────────────────────────────────────────────
   The refinement layer loads last, so it must not reach into the footer SEO
   band (its headings are deliberate 11px labels) and must respect the 11px
   legibility floor everywhere. */
.seo-about h2, .seo-about h3{
  font-size: 11px !important; line-height: 1.5 !important; font-weight: 500 !important;
  letter-spacing: 2.4px !important; text-transform: uppercase !important;
  color: rgba(184,146,42,.60) !important; margin: 30px auto 10px !important;
}
[dir="rtl"] .seo-about h2, [dir="rtl"] .seo-about h3{
  font-size: 11.5px !important; line-height: 1.6 !important; letter-spacing: 1.2px !important;
}
/* 11px floor — no label anywhere drops below it */
.lane-eyebrow, #results .result-cat, .footer-col h4, .section-label,
.intro-strip-label, .intro-item, .route-note{ font-size: 11px !important; }
.lane-eyebrow{ letter-spacing: 2.4px !important; }
#results .result-cat{ letter-spacing: 2.4px !important; }
.footer-col h4{ letter-spacing: 2.2px !important; }
.route-note{ font-size: 12.5px !important; }
[dir="rtl"] .route-note{ font-size: 11.5px !important; }
[dir="rtl"] .lane-eyebrow, [dir="rtl"] #results .result-cat,
[dir="rtl"] .footer-col h4{ font-size: 11.5px !important; letter-spacing: 1.2px !important; }

/* ── 14. FAQ groups ─────────────────────────────────────────────────────────
   Thirteen questions read as a wall. Four labelled clusters read as a map.
   All thirteen stay on the page (the JSON-LD FAQPage lists the same thirteen,
   and Google requires schema to match visible content) — they are just sorted. */
.faq-group{ margin-bottom: 40px; }
.faq-group:last-child{ margin-bottom: 0; }
.faq-group-head{
  font-family: 'Outfit','Helvetica Neue',Arial,sans-serif !important;
  font-size: 11px !important; letter-spacing: 2.4px !important;
  text-transform: uppercase !important; font-weight: 500 !important;
  color: rgba(184,146,42,.9) !important;
  margin: 0 0 6px !important; padding-bottom: 0 !important;
}
[dir="rtl"] .faq-group-head{ font-size: 11.5px !important; letter-spacing: 1.2px !important; }
.faq-group details.faq:first-of-type{ border-top: 1px solid var(--rule) !important; }
.faq-group summary.faq-q{ padding: 20px 0 !important;
  font-size: clamp(15px,1.15vw,17px) !important; }
[dir="rtl"] .faq-group summary.faq-q{ font-size: clamp(14px,1.05vw,16px) !important; }
.faq-group .faq-a{ font-size: 14.5px !important; line-height: 1.8 !important;
  padding-bottom: 20px !important; }
@media (max-width: 760px){ .faq-group{ margin-bottom: 30px; } }

/* ── 15. M&A card, final word ───────────────────────────────────────────────
   The generic `.lane ul li` rule sits later in this file and was winning on equal
   specificity, dropping the dark card's list to #6B5D4F — 2.42:1, unreadable.
   Re-asserted here, at the end, where nothing overrides it. */
.lane-b ul li{ color: rgba(247,243,236,.88) !important;
  border-top-color: rgba(247,243,236,.16) !important; }
.lane-b ul li:last-child{ border-bottom-color: rgba(247,243,236,.16) !important; }
.lane-b .route-note{ color: rgba(247,243,236,.70) !important; }
.lane-b .route-pair{ color: #FBF8F3 !important; }

/* ── 16. Section seams ──────────────────────────────────────────────────────
   Two cream sections stacked = 151px bottom padding + 151px top padding = a
   ~300px void, which is what the gap above "Mandates Currently Open" was.
   Where the seam is invisible anyway, halve it. */
#deals{ padding-top: clamp(40px, 4vw, 64px) !important; }
.deals-page .why-section ~ #deals{ padding-top: clamp(40px, 4vw, 64px) !important; }

/* /deals live-mandates block: same left edge for label, heading and lead */
#deals .section-label,
#deals > div > h2,
#deals .lead{ text-align: start !important; margin-left: 0 !important; margin-right: 0 !important; }
[dir="rtl"] #deals .lead{ margin-right: 0 !important; margin-left: auto !important; }
#deals > div > h2{ max-width: 22ch; }
[dir="rtl"] #deals > div > h2{ max-width: none; }
/* the band directly above the mandates also carries a full 151px bottom pad — at an
   invisible seam that reads as dead space. :has() is safe here: unsupported browsers
   simply keep the current (larger) padding, nothing breaks. */
.why-section:has(~ #deals){ padding-bottom: clamp(48px, 5vw, 76px) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v11 — /deals. A private-market transaction page, not a listings board.
   Everything here is presentation only; the cards, data and forms are unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Path bar: the three doors, stated once, no icons, no boxes-with-shadows ── */
.deal-paths{ background: #FDFBF8; border-bottom: 1px solid var(--rule); }
.deal-paths-inner{
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.path-card{
  display: block; padding: 30px 30px 32px; text-decoration: none;
  border-left: 1px solid var(--rule);
  transition: background .35s ease;
}
.path-card:first-child{ border-left: 0; }
[dir="rtl"] .path-card{ border-left: 0; border-right: 1px solid var(--rule); }
[dir="rtl"] .path-card:first-child{ border-right: 0; }
.path-card:hover{ background: #F7F3EC; }
.path-name{
  display: block; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(21px, 1.8vw, 26px); font-weight: 500; color: #12100D;
  letter-spacing: -.2px; margin-bottom: 5px;
}
[dir="rtl"] .path-name{ font-family: inherit; font-weight: 700; font-size: clamp(18px,1.5vw,22px); }
.path-note{
  display: block; font-size: 13.5px; line-height: 1.55;
  color: rgba(107,93,79,.95); font-weight: 300;
}
.path-card::after{
  content: "→"; display: inline-block; margin-top: 12px;
  color: rgba(184,146,42,.85); font-size: 15px;
  transform: translateX(0); transition: transform .35s ease;
}
[dir="rtl"] .path-card::after{ content: "←"; }
.path-card:hover::after{ transform: translateX(5px); }
[dir="rtl"] .path-card:hover::after{ transform: translateX(-5px); }
@media (max-width: 760px){
  .deal-paths-inner{ grid-template-columns: 1fr; }
  .path-card{ border-left: 0 !important; border-right: 0 !important;
    border-top: 1px solid var(--rule); padding: 22px var(--gutter, 24px) 24px; }
  .path-card:first-child{ border-top: 0; }
  .path-card::after{ margin-top: 8px; }
}

/* ── Sector filter ────────────────────────────────────────────────────────── */
.dc-filter{ display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 34px; }
.dc-chip{
  font-family: 'Outfit','Helvetica Neue',Arial,sans-serif;
  font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 500;
  color: rgba(107,93,79,.95); background: transparent;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 9px 17px; cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
[dir="rtl"] .dc-chip{ letter-spacing: .4px; font-size: 12.5px; }
.dc-chip:hover{ border-color: rgba(184,146,42,.6); color: #12100D; }
.dc-chip.is-on{ background: #1A1510; border-color: #1A1510; color: #F7F3EC; }

/* ── Deal cards ───────────────────────────────────────────────────────────── */
.dc-grid{ display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px); align-items: stretch; }
.dc{
  display: flex; flex-direction: column;
  background: #FDFBF8; border: 1px solid var(--rule) !important;
  border-radius: 3px !important; box-shadow: none !important;
  padding: clamp(24px, 2.2vw, 32px) !important;
  transition: border-color .4s ease, transform .4s ease;
}
.dc:hover{ border-color: rgba(184,146,42,.45) !important; transform: translateY(-3px); }
.dc[hidden]{ display: none !important; }
.dc-cat{
  font-size: 11px !important; letter-spacing: 2.2px !important; text-transform: uppercase !important;
  font-weight: 500 !important; color: rgba(184,146,42,.95) !important; margin-bottom: 14px !important;
}
[dir="rtl"] .dc-cat{ letter-spacing: .6px !important; font-size: 11.5px !important; }
.dc-name{
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(23px, 1.9vw, 28px) !important; font-weight: 400 !important;
  letter-spacing: -.3px !important; color: #12100D !important; margin: 0 0 12px !important;
}
[dir="rtl"] .dc-name{ font-family: inherit !important; font-weight: 700 !important;
  font-size: clamp(19px,1.6vw,23px) !important; letter-spacing: 0 !important; }
.dc-desc{
  font-size: 14px !important; line-height: 1.72 !important; font-weight: 300 !important;
  color: rgba(107,93,79,.98) !important; margin: 0 0 22px !important;
}
.dc-rows{ margin-top: auto; }
.dc-row{
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--rule);
}
.dc-row:last-child{ border-bottom: 1px solid var(--rule); }
.dc-row > span:first-child{
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(107,93,79,.78); font-weight: 500; white-space: nowrap;
}
[dir="rtl"] .dc-row > span:first-child{ letter-spacing: .4px; font-size: 11.5px; }
.dc-row > span:last-child{
  font-size: 13.5px; color: #12100D; font-weight: 400; text-align: end;
}
.dc-btn{
  margin-top: 24px; width: 100%;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px; font-weight: 500; letter-spacing: .2px;
  background: transparent; color: #12100D;
  border: 1px solid rgba(26,21,16,.28); border-radius: 3px;
  padding: 13px 18px; cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
[dir="rtl"] .dc-btn{ font-family: inherit; font-size: 15px; font-weight: 600; }
.dc-btn:hover{ background: #B8922A; border-color: #B8922A; color: #1A1510; }
.dc-note{
  margin-top: 30px !important; font-size: 12.5px !important; line-height: 1.75 !important;
  color: rgba(107,93,79,.85) !important; font-weight: 300 !important; max-width: 84ch;
}
@media (max-width: 1000px){ .dc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){
  .dc-grid{ grid-template-columns: 1fr; }
  .dc-filter{ margin: 24px 0 26px; gap: 7px; }
  .dc-chip{ padding: 8px 14px; font-size: 11.5px; }
}

/* ── Empty state: designed, not an accident ───────────────────────────────── */
.dc-empty{
  border: 1px dashed rgba(107,93,79,.30); border-radius: 3px;
  padding: clamp(40px, 5vw, 68px) clamp(24px, 3vw, 48px);
  text-align: center; background: rgba(253,251,248,.6);
}
.dc-empty[hidden]{ display: none !important; }
.dc-empty-h{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(21px, 1.9vw, 27px); font-weight: 400; color: #12100D;
  margin: 0 0 12px; letter-spacing: -.2px;
}
[dir="rtl"] .dc-empty-h{ font-family: inherit; font-weight: 700; font-size: clamp(18px,1.6vw,22px); }
.dc-empty-p{
  font-size: 14px; line-height: 1.75; font-weight: 300;
  color: rgba(107,93,79,.95); margin: 0 auto 24px; max-width: 54ch;
}
.dc-empty-cta{
  display: inline-block; text-decoration: none;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 500;
  color: #12100D; border-bottom: 1px solid rgba(184,146,42,.7); padding-bottom: 3px;
  transition: color .3s ease, border-color .3s ease;
}
[dir="rtl"] .dc-empty-cta{ font-family: inherit; font-size: 15px; font-weight: 600; }
.dc-empty-cta:hover{ color: #B8922A; border-color: #B8922A; }

/* the mandates block now sits directly under the path bar — tighten its top */
#deals{ padding-top: clamp(56px, 5.5vw, 88px) !important; }

/* ── /deals: quiet the closing CTA band ───────────────────────────────────────
   A solid gold slab was the loudest object on a page whose whole argument is
   restraint. Same message, stated once, on a hairline. */
#deals .results-cta-box{
  background: transparent !important; background-image: none !important;
  border: 0 !important; border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 34px 0 0 !important; margin-top: 34px !important;
  display: flex !important; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 14px 32px; text-align: start !important;
}
#deals .results-cta-box p{
  margin: 0 !important; max-width: 62ch;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(18px, 1.5vw, 23px) !important; line-height: 1.4 !important;
  font-weight: 400 !important; color: #12100D !important;
}
[dir="rtl"] #deals .results-cta-box p{ font-family: inherit !important;
  font-weight: 600 !important; font-size: clamp(16px,1.3vw,19px) !important; line-height: 1.65 !important; }
#deals .results-cta-box a{
  background: transparent !important; background-image: none !important;
  color: #12100D !important; border: 0 !important;
  border-bottom: 1px solid rgba(184,146,42,.75) !important; border-radius: 0 !important;
  padding: 0 0 3px !important; white-space: nowrap;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 17px !important; font-weight: 500 !important; letter-spacing: .2px !important;
  text-transform: none !important; box-shadow: none !important; animation: none !important;
  transition: color .3s ease, border-color .3s ease !important;
}
[dir="rtl"] #deals .results-cta-box a{ font-family: inherit !important;
  font-size: 15px !important; font-weight: 600 !important; }
#deals .results-cta-box a:hover{
  background: transparent !important; color: #B8922A !important;
  border-bottom-color: #B8922A !important; transform: none !important; box-shadow: none !important;
}
@media (max-width: 700px){ #deals .results-cta-box{ display: block !important; }
  #deals .results-cta-box a{ display: inline-block; margin-top: 16px; } }

/* ── /deals hero: same CTA language as the homepage hero ─────────────────── */
.hero .hero-buttons .btn-gold,
.hero .hero-buttons .btn-ghost-white{
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(17px, 1.4vw, 20px) !important; font-weight: 500 !important;
  letter-spacing: .2px !important; text-transform: none !important;
  padding: 14px 32px !important; border-radius: 3px !important;
}
[dir="rtl"] .hero .hero-buttons .btn-gold,
[dir="rtl"] .hero .hero-buttons .btn-ghost-white{
  font-family: inherit !important; font-weight: 600 !important;
  font-size: clamp(15px,1.2vw,17px) !important; }
.hero .hero-buttons .btn-gold{
  background: #B8922A !important; background-image: none !important;
  border: 1px solid #B8922A !important; color: #1A1510 !important;
  animation: none !important; box-shadow: none !important; }
.hero .hero-buttons .btn-gold:hover{
  background: #C9A23A !important; border-color: #C9A23A !important; color: #1A1510 !important;
  animation: none !important; }

/* ── /deals path bar: arrow sits with the line, not orphaned below ───────── */
.path-note{ display: inline; }
.path-card::after{ margin-top: 0; margin-inline-start: 8px; vertical-align: baseline; }

/* ═══════════════════════════════════════════════════════════════════════════
   v12 — MOBILE HERO. Two real defects reported from a live phone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. ALIGNMENT. .hero-text-plate carries 20px of its own horizontal padding, so
      the eyebrow, headline and sub sat at x=40 while the route line and the two
      buttons sat at x=20. One column, one left edge. */
@media (max-width: 760px){
  .hero-v8 .hero-text-plate{ padding-left: 0 !important; padding-right: 0 !important; }
  .hero-v8 .hero-eyebrow{ padding-left: 0 !important; padding-right: 0 !important; }
  .hero-v8 .hero-buttons{ padding-left: 0 !important; padding-right: 0 !important; }
  [dir="rtl"] .hero-v8 .hero-routes{ margin-left: 0 !important; margin-right: 0 !important;
    width: 100% !important; justify-content: flex-start !important; }
}

/* 2. THE PHOTO. The cream was held at 93% opacity for the first 430px, which on a
      phone is most of the screen — the hero read as a blank page with a ghost of a
      skyline. Cream is now roughly halved at the top and fades sooner, so the
      picture is actually visible. Text stays readable because the type is darkened
      to near-ink rather than propped up by more wash. */
@media (max-width: 760px){
  .hero-v8 .hero-bg,
  [dir="rtl"] .hero-v8 .hero-bg{
    background-image:
      linear-gradient(to bottom,
        rgba(250,247,241,.62) 0px,
        rgba(250,247,241,.58) 300px,
        rgba(250,247,241,.46) 430px,
        rgba(250,247,241,.24) 560px,
        rgba(250,247,241,.06) 660px,
        rgba(250,247,241,0) 740px),
      var(--hero-mob-img) !important;
    background-size: auto, cover !important;
    background-position: center top, center top !important;
    background-repeat: no-repeat, no-repeat !important;
  }
  /* type carries its own contrast now, instead of leaning on the wash */
  .hero-v8 h1{ color: #0E0C09 !important; }
  .hero-v8 .hero-sub{ color: #2C261F !important; font-weight: 400 !important; }
  .hero-v8 .hero-eyebrow span{ color: #1A1510 !important; }
  .hero-v8 .hero-routes,
  .hero-v8 .hero-routes a{ color: #2C261F !important; font-weight: 500 !important; }
  .hero-v8 .hero-routes .sep{ color: rgba(44,38,31,.45) !important; }
}