/* =====================================================================================================================
   STRATEGIC LABS — V002-R1 RESPONSIVE SYSTEM LAYER
   Loaded LAST. Desktop (≥ 1200px) keeps the premium V002 composition untouched; every rule below is scoped to the
   tablet / mobile ranges so that each viewport receives its own composition instead of a shrunken desktop.

   BREAKPOINT AUTHORITY (the only ranges this layer uses — earlier layers' scattered breakpoints are overridden here):
     mobile            ≤ 599px      (320 · 360 · 375 · 390 · 412 · 430 portrait phones)
     tablet portrait   600 – 899px  (768 · 820 · 834)
     compact landscape 900 – 1199px (1024 · 1180 — tablet landscape / small laptop)
     desktop           ≥ 1200px     (1280 · 1440 · 1920 — V002, no override)

   PRINCIPLES: shared content + shared design language + viewport-specific composition · no fixed pixel heights for
   ordinary content · no overflow:hidden to mask structure · logical properties (RTL-safe) · clamp()/minmax() sizing ·
   every navigation option always reachable · touch targets ≥ 44px on touch widths.
   ===================================================================================================================== */

/* ------------------------------------------------------------------ 0. FOUNDATION ---------------------------------- */
@media (max-width: 1199px) {
  :root { --r1-gutter: clamp(16px, 4.2vw, 28px); --r1-touch: 44px; }
  html { overflow-x: clip; }                                   /* structural bugs stay visible in QA; the page never pans */
  body { overflow-x: clip; }
  img, video, svg, picture { max-inline-size: 100%; }
  main img { block-size: auto; }
  /* long tokens (URLs, e-mails, Latin identifiers) wrap instead of forcing width */
  main p, main li, main dd, main figcaption, .site-footer p, .site-footer li { overflow-wrap: anywhere; }
  /* section vertical rhythm scales with the viewport instead of desktop constants */
  .section, .pm-section { padding-block: clamp(2.6rem, 2rem + 3vw, 5rem); }
  /* bands whose spacing lives on their inner elements (V002 desktop padding-block 0: fineprint note, question, closing CTAs,
     cinematic page heroes, chapters, article body) keep it — the rhythm clamp is for padded sections only (m7: removes ≈90px voids) */
  .hm-fineprint, .hm-question, .hm-close, .px-close, .px-hero, .chapter, .article-body { padding-block: 0; }
  .hm-hero, .vmv6 { padding-block-end: 0; }
}
@media (max-width: 599px) {
  :root { --content: calc(100% - 2 * var(--r1-gutter)); --gutter-side: var(--r1-gutter); }
  .wrap, .container { width: var(--content); }
  /* fluid, readable type on phones: headings never exceed ~2.1rem, body stays ≥ 1rem (no iOS zoom on inputs) */
  /* V002 mobile type scale is kept; headings only gain safe wrapping for long Arabic/Latin tokens */
  h1, .h1, .h-display, h2, .h2 { overflow-wrap: anywhere; }
  .lead, .article-deck, .hm-hero__lead { max-width: none; }
  input, select, textarea { font-size: 16px; }
}

/* ------------------------------------------------------------------ 1. HEADER / MOBILE NAVIGATION ------------------ */
@media (max-width: 1199px) {
  .site-header__inner { min-height: 64px; gap: var(--s3); }
  .nav-toggle { min-inline-size: var(--r1-touch); min-block-size: var(--r1-touch); }
}
@media (max-width: 599px) {
  /* menu content sits inside the gutter — no edge-flush labels, expander cue inside the tap area */
  .mnav__top { padding: .9rem var(--r1-gutter); }
  .mnav__list { padding: .25rem var(--r1-gutter) 0; }
  .mnav__list > li > a, .mnav__level, .mnav__expand { padding-inline: .25rem; min-height: 52px; display: flex; align-items: center; }
  .mnav__level { justify-content: space-between; }
  .mnav__level:not(.mnav__level--cue) > span, .mnav__expand > span:last-child { inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(26,75,68,.08); }
  .mnav__group > ul > li > a, .mnav__sub a { padding: .8rem .5rem; min-height: 48px; display: flex; align-items: center; }
  .mnav__family .mnav__expand { padding-inline: .5rem; }
  .mnav__utility { padding: var(--s5) var(--r1-gutter) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .mnav__list { padding-inline: var(--gutter-side, 28px); }
  .mnav__list > li > a, .mnav__level, .mnav__expand { padding-inline: .25rem; }
  .mnav__utility { padding-inline: var(--gutter-side, 28px); }
}

/* ------------------------------------------------------------------ 2. HERO SYSTEM -------------------------------- */
/* Home opening (hero / proof / practices) responsive composition lives in
   v5-opening.css (loaded last) — a full rebuild, not a patch on this layer.
   The compact-landscape headline rhythm below still applies (no home-opening
   dependency), and the cross-page min-block-size fix stays for every OTHER
   page hero (services/articles/about/contact/clients/capabilities). */
@media (min-width: 900px) and (max-width: 1199px) {
  .hm-hero--owner .hm-hero__title { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 3.6rem); }
}
/* every hero (phones + tablet portrait): the headline and lead must never be clipped by a viewport-height trap */
@media (max-width: 899px) {
  .hm-hero, .px-hero, .ar-hero, .in-hero, .ab-hero, .ct-hero, .cl-hero, .cp-hero { min-block-size: 0 !important; block-size: auto !important; max-block-size: none !important; }
  .hm-hero__title, .px-hero__title, .ar-hero__title { overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------ 3. RAILS / TABS / NAVIGATORS ------------------ */
/* Home practice console: the tab rail becomes a stacked selector (tablet: 2 columns, mobile: 1 column). All five
   practices visible; role="tablist" semantics preserved by the component. */
@media (max-width: 1199px) {
  .hm-console__rail { grid-auto-flow: row !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; grid-auto-columns: auto !important; overflow: visible !important; gap: .35rem; }
  .hm-console__tab { max-inline-size: none !important; min-block-size: 52px !important; }
  .hm-console__tab.is-active { box-shadow: inset 3px 0 0 var(--brand) !important; }
}
@media (max-width: 599px) {
  .hm-console__rail { grid-template-columns: 1fr !important; padding: .6rem !important; }
  .hm-console__tab { min-block-size: 50px !important; padding: .55rem .8rem !important; }
  .hm-console__tab-name { font-size: .9rem !important; }
}
/* Service pages: section navigator. compact landscape/tablet = wrapping chips (all visible, one or two rows);
   mobile = a compact disclosure ("sections of this page") whose list drops over the content — the sticky bar stays 48px. */
@media (max-width: 1199px) {
  .m2-local-nav { overflow: visible; }
  .m2-local-nav > .m2-local-nav__rail { min-width: 0; flex-wrap: wrap; justify-content: center; gap: .4rem .5rem; padding-block: .55rem; }
  .m2-local-nav__rail button { white-space: normal; text-align: center; padding: .45rem .85rem; font-size: .9rem; min-height: 40px; }
}
/* the phone disclosure exists in the markup at every width; it is rendered only ≤599 (rule below) */
.m2-local-nav__mobile { display: none; }
@media (max-width: 599px) {
  .m2-local-nav > .m2-local-nav__rail { display: none; }
  .m2-local-nav__mobile { display: block; position: relative; width: var(--content); margin-inline: auto; }
  .m2-local-nav__mobile > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; padding: .4rem .25rem; font-weight: 700; font-size: .95rem; color: var(--brand-deep); }
  .m2-local-nav__mobile > summary::-webkit-details-marker { display: none; }
  /* the generic accordion marker rule (m2-blocks `details[open] > summary::before { content: "−" }`) must not leak into this
     disclosure — its own cue is the circled + / × span */
  .m2-local-nav__mobile > summary::before, .m2-local-nav__mobile[open] > summary::before { content: none; display: none; }
  .m2-local-nav__mobile > summary > span:last-child { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-wash); color: var(--brand-deep); font-size: 1.1rem; line-height: 1; transition: transform .2s ease; }
  .m2-local-nav__mobile[open] > summary > span:last-child { transform: rotate(45deg); }
  .m2-local-nav__mobile > div { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 5; display: grid; gap: .25rem; padding: .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(7,22,20,.16); max-block-size: min(60vh, 420px); overflow: auto; }
  .m2-local-nav__mobile button { display: flex; align-items: center; justify-content: flex-start; inline-size: 100%; min-height: 46px; padding: .5rem .8rem; border-radius: 10px; text-align: start; white-space: normal; font-size: .95rem; }
}

/* ------------------------------------------------------------------ 4. GRIDS / CARDS / TIMELINES ------------------ */
/* Five practices index: tablet portrait → 2 columns (2+2+1 with the last card full-width); compact landscape →
   6-track grid so the second row is centred (2 cards × 3 tracks) instead of a hole. */
@media (min-width: 600px) and (max-width: 899px) {
  .hm-index { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hm-index > li:last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hm-index { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .hm-index > li { grid-column: span 2; }
  .hm-index > li:nth-last-child(2) { grid-column: 1 / span 3; }
  .hm-index > li:last-child { grid-column: 4 / span 3; }
}
/* HR reward-flow spokes (5 items): tablet → 2 + 2 + 1 */
@media (min-width: 600px) and (max-width: 899px) {
  .hub4__spokes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hub4__spokes > li:last-child { grid-column: 1 / -1; }
}
/* generic card grids driven by auto-fit keep working; explicit 3-column grids drop to 2 on tablet portrait */
@media (min-width: 600px) and (max-width: 899px) {
  .pub-grid, .px-rows--grid, .cl-grid, .in-grid, .ab-principles__grid, .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* card shadows/hover must not be clipped by section overflow on touch widths; no hover-only affordances */
@media (max-width: 1199px) {
  .hm-index > li, .pub-item, .px-row, .foot-group { overflow: visible; }
}
@media (hover: none) {
  .hm-strip__item:hover .hm-strip__ico, .hm-strip__item:hover .hm-strip__arrow, .practice-explorer__tab:hover, .px-row__link:hover { transform: none; }
}

/* ------------------------------------------------------------------ 5. DIAGRAMS (HR ring · canvas · spine) --------- */
@media (max-width: 599px) {
  /* the ring scales with the viewport and never extends beyond it; outer node labels wrap inside their pill */
  .ring5 { inline-size: min(100% - 8px, 330px) !important; margin-inline: auto; }
  .ring5__outer > li > span { max-inline-size: 5.6rem; white-space: normal; text-align: center; line-height: 1.2; font-size: .78rem; }
  .ring5__grid { padding-inline: 4px; }
}
@media (max-width: 379px) {
  .ring5 { inline-size: min(100% - 8px, 300px) !important; }
  .ring5__outer > li > span { font-size: .72rem; max-inline-size: 5rem; }
}

/* ------------------------------------------------------------------ 6. FOOTER ------------------------------------ */
@media (max-width: 599px) {
  .site-footer__top { gap: var(--s5); padding-block: var(--s6) var(--s5); }
  .site-footer__brand img { max-inline-size: 180px; }
  .site-footer__cols { gap: 0 !important; }
  .foot-group { padding-block: 0 !important; border-block-start: 1px solid var(--line-dark); }
  .foot-group:first-child { border-block-start: 0; }
  .foot-group__title { margin: 0 !important; }
  .foot-group__toggle { min-height: 54px !important; padding-block: .6rem !important; font-size: 1rem; }
  .foot-group .foot-list { padding-block: .1rem .9rem !important; gap: 2px; }
  .foot-group .foot-list a { display: flex; align-items: center; min-height: 44px; padding-inline: .25rem; }
  .foot-bottom { flex-direction: column; gap: .35rem; align-items: flex-start; padding-block: var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .site-footer__top { grid-template-columns: 1fr; gap: var(--s6); }
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--s5) !important; }
  .foot-group .foot-list { display: grid !important; }
  .foot-group__toggle { pointer-events: none; }
  .foot-group__cue { display: none; }
}

/* ------------------------------------------------------------------ 7. FORMS / CONTACT ---------------------------- */
@media (max-width: 599px) {
  .cj-step__actions, .request-actions, .form-actions { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .cj-step__actions .btn, .request-actions .btn, .form-actions .btn { inline-size: 100%; min-height: 48px; }
  .cj-progress { gap: .35rem; }
  fieldset { min-inline-size: 0; padding-inline: 0; }
  input, select, textarea { max-inline-size: 100%; min-height: 48px; }
  textarea { min-height: 128px; }
  .cj-field small, .cj-field .hint, .field-error { overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------ 8. TYPOGRAPHY / RTL / TOUCH -------------------- */
@media (max-width: 1199px) {
  /* no forced single-line Arabic UI labels outside compact chips */
  .hm-console__tab-name, .practice-explorer__tab, .hm-strip__name, .foot-group__toggle, .m2-local-nav button { white-space: normal; }
  .lat { direction: ltr; unicode-bidi: isolate; }
  /* CMS link labels that are spaced phone numbers (no strong character, e.g. "+966 54 546 4331") resolve LTR as a plaintext
     paragraph — in the RTL footer list the digit groups were visually reordered (pre-existing on desktop; ≤1199 corrected here) */
  .site-footer a[href^="tel:"], main a[href^="tel:"] { unicode-bidi: plaintext; }
  a, button { -webkit-tap-highlight-color: rgba(68,188,167,.18); }
  :where(main, footer, header) :is(a, button):focus-visible { outline: 3px solid var(--mint, #44bca7); outline-offset: 2px; }
}
/* D-01 (Professor-authorized closure, reconciliation wave) — the tel-number bidi fix above (R1-18) was intentionally
   scoped to <=1199px under the R1 desktop-preservation mandate. Same declaration, unconditional: the spaced phone
   label ("+966 54 546 4331") resolves as an LTR plaintext run wherever it appears, desktop included. This is the
   only desktop-width rule added by the reconciliation wave; no other desktop styling is touched. */
.site-footer a[href^="tel:"], main a[href^="tel:"] { unicode-bidi: plaintext; }
@media (max-width: 599px) {
  /* every interactive control on a phone is comfortably tappable */
  main :is(a.btn, .btn, button:not(.nav-toggle):not(.mnav__close)), .site-footer a { min-block-size: var(--r1-touch); }
  .px-row__link, .pub-item a, .hm-index a { min-block-size: var(--r1-touch); }
}
@media (prefers-reduced-motion: reduce) {
  .m2-local-nav__mobile > summary > span:last-child { transition: none; }
}

/* ------------------------------------------------------------------ 9. SERVICE PAGES: EXPLORER RAIL · STAGES · CANVAS - */
/* Practice explorer on the services index and service pages (.hm--page): stacked selector instead of a clipped scroller */
@media (max-width: 1199px) {
  .hm--page .practice-explorer__rail { grid-auto-flow: row !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important; grid-auto-columns: auto !important; overflow: visible !important; gap: .4rem !important; padding-bottom: 0 !important; }
  .hm--page .practice-explorer__tab { max-inline-size: none; min-height: 52px; white-space: normal; text-align: start; }
}
@media (max-width: 599px) {
  .hm--page .practice-explorer__rail { grid-template-columns: 1fr !important; }
}
/* Startup stages (5 steps): tablet portrait → 2 + 2 + 1 */
@media (min-width: 600px) and (max-width: 899px) {
  .stairs4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start; }
  .stairs4 > li.stairs4__step:last-child { grid-column: 1 / -1 !important; }
}
/* Business Model Canvas on tablets: the nine-block canvas keeps its geometry with tablet-sized labels (no 3-line wraps) */
@media (min-width: 600px) and (max-width: 1023px) {
  .bmc__title { font-size: .88rem !important; line-height: 1.25; }
  .bmc__zone--value .bmc__title { font-size: 1.12rem !important; }
  .bmc__zone { padding: .8rem .8rem !important; }
  .bmc__axis { font-size: .7rem; padding-inline: .6rem; }
}

/* ------------------------------------------------------------------ 10. ITERATION 2 — tablet compositions ------------ */
/* explorer rails on tablet portrait: 2 columns, fifth option full-width (no hole) */
@media (min-width: 600px) and (max-width: 899px) {
  .hm-console__rail, .hm--page .practice-explorer__rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hm-console__rail > :last-child, .hm--page .practice-explorer__rail > :last-child { grid-column: 1 / -1; }
}
/* Business Model Canvas on compact landscape: value block title sized for the narrower canvas (two lines max) */
@media (min-width: 900px) and (max-width: 1199px) {
  .bmc__zone--value .bmc__title { font-size: 1.2rem !important; line-height: 1.25; }
  .bmc__title { font-size: .92rem !important; line-height: 1.25; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .bmc__zone--value .bmc__title { font-size: 1rem !important; }
  .bmc__zone--value .bmc__ico { inline-size: 44px !important; block-size: 44px !important; }
}
/* about: values block rhythm on tablets/phones — no desktop-sized trailing void before the next chapter */
@media (max-width: 899px) {
  .vmv6__values { padding-block-end: clamp(1.25rem, 1rem + 1.5vw, 2.5rem) !important; }
  .vmv6__mission--editorial { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important; }
}
/* editorial 12-column compositions (ed5): single reading column on tablets/phones — no half-width text beside a void */
@media (max-width: 899px) {
  .ed5__grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: var(--s4); }
  .ed5__head, .ed5__body, .ed5--question .ed5__head, .ed5--question .ed5__body { grid-column: 1 / -1 !important; }
  .ed5__body, .ed5__body p { max-width: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hm--page .ed5 { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) !important; }
}

/* ------------------------------------------------------------------ 11. MOBILE MENU — services row (link + expand cue) */
@media (max-width: 1199px) {
  .mnav__level-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .mnav__level-row > a { flex: 1 1 auto; display: flex; align-items: center; min-height: 52px; padding-inline: .25rem; font-size: 1.12rem; font-weight: 700; }
  .mnav__level--cue { flex: none; inline-size: 44px; block-size: 44px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(26,75,68,.08); color: var(--brand-deep); font-size: 1.35rem; line-height: 1; }
  .mnav__level--cue > span { display: block; transition: transform .2s ease; }
  .mnav__level--cue[aria-expanded="true"] > span { transform: rotate(45deg); }
  .mnav__family .mnav__expand > span:last-child { transition: transform .2s ease; }
  .mnav__family .mnav__expand[aria-expanded="true"] > span:last-child { transform: rotate(180deg); }
  .mnav__sub { padding-inline-start: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .mnav__level--cue > span, .mnav__family .mnav__expand > span:last-child { transition: none; } }