/* ============================================================
   iMetric — "rhythm" shared design layer (the cinematic system).
   The reusable foundation + section recipes lifted out of the homepage so
   every NEW-design page (About first, then the rest) shares one system.

   Scope: everything is under .im-rhythm (the page <main> carries it), so the
   prototype-style class names never collide with the theme's legacy .im-*.
   Load this on any page that opts into the new design; layer page-specific
   CSS (e.g. about.css under .im-about) on top.

   Brand-faithful: warm charcoal + #F79420, Anton/Poppins (self-hosted by
   tokens.css), near-black on orange, orange <=10%. Perf: NO backdrop-filter,
   NO filter on <img>, NO fixed full-viewport glow. Reduced-motion guarded.

   NOTE: the homepage currently keeps its own copy of these rules in home.css
   (under .im-home) and is intentionally NOT refactored onto this file yet, to
   keep the signed-off homepage bulletproof. Dedupe the homepage onto rhythm.*
   in a later cleanup once a couple of pages are migrated.
   ============================================================ */

:root{
  --canvas:#1C1A1A; --ground:#221F1F; --surface:#2A2727; --raised:#332F2F;
  --hairline:rgba(255,255,255,.10); --hair2:rgba(255,255,255,.16);
  --text:#F6F3F1; --muted:#A8A3A1; --dim:#9A9491; /* --dim lightened for WCAG AA (~5.5:1 on canvas) */
  --orange:#F79420; --orange-bright:#FFAD4D; --ink:#1C1A1A;
  --shell:1240px; --gut:clamp(20px, 5vw, 72px);
  --lift:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -24px rgba(0,0,0,.8);
  --font-d:'Anton',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  --font-b:'Poppins',system-ui,sans-serif;
  --h1:clamp(2.8rem, 1.2rem + 5vw, 5rem);
  --h2:clamp(2.2rem, 1.3rem + 2.6vw, 3.4rem);
  --rev-y:58px; --rev-ms:.7s;
}

/* page ground */
.im-rhythm{background:var(--canvas);color:var(--text);font-family:var(--font-b);line-height:1.55}

/* ---- primitives ---- */
.im-rhythm h1,.im-rhythm h2,.im-rhythm h3{font-family:var(--font-d);font-weight:400;line-height:.96;letter-spacing:.5px;text-transform:uppercase}
.im-rhythm .o{color:var(--orange)}
.im-rhythm a{color:inherit;text-decoration:none}
.im-rhythm img{display:block;max-width:100%}
.im-rhythm .shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.im-rhythm .eyebrow{font-family:var(--font-b);font-weight:600;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.im-rhythm .eyebrow .n{color:var(--orange);margin-inline-end:.5em}
.im-rhythm .lead{color:var(--muted);font-size:clamp(1rem, .95rem + .4vw, 1.22rem);max-width:46ch}
.im-rhythm .kicker{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.im-rhythm .kicker b{color:var(--orange);font-family:var(--font-d);font-size:1rem;letter-spacing:.06em}

/* ---- buttons (near-black text on orange) ---- */
.im-rhythm .btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;
  padding:.85rem 1.5rem;border-radius:9px;min-height:48px;transition:transform .2s,background .2s,box-shadow .2s;cursor:pointer;border:0}
.im-rhythm .btn--primary{background:var(--orange);color:var(--ink)}
.im-rhythm .btn--primary:hover{background:var(--orange-bright);transform:translateY(-2px)}
.im-rhythm .btn--ghost{background:transparent;color:var(--text);border:1px solid var(--hair2)}
.im-rhythm .btn--ghost:hover{border-color:var(--orange);color:var(--orange)}
.im-rhythm .btn--dark{background:var(--ink);color:var(--text)}
.im-rhythm .btn--dark:hover{transform:translateY(-2px)}

/* ===== through-line spine ===== */
.im-rhythm .spine{position:fixed;z-index:40;inset-inline-start:max(12px, calc((100vw - var(--shell)) / 2 - 26px));top:0;bottom:0;width:34px;pointer-events:none;display:none}
@media(min-width:1120px){.im-rhythm .spine{display:block}}
.im-rhythm .spine svg{height:100%;width:100%;overflow:visible}
.im-rhythm .spine__base{stroke:var(--hairline);stroke-width:2.4;fill:none}
.im-rhythm .spine__prog{stroke:var(--orange);stroke-width:3.4;fill:none;stroke-linecap:round}

/* ===== scroll-progress bar ===== */
.im-rhythm .sprog{position:fixed;top:0;inset-inline-start:0;height:4px;width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform;z-index:130;
  background:linear-gradient(90deg,var(--orange),var(--orange-bright));box-shadow:0 0 12px rgba(247,148,32,.7)}
[dir="rtl"] .im-rhythm .sprog{transform-origin:right center}

/* ===== section frame ===== */
.im-rhythm .sec{position:relative;padding-block:clamp(52px, 6vw, 100px)}
.im-rhythm .sec--band{background:var(--ground);border-block:1px solid var(--hairline)}
.im-rhythm .sec--deep{background:linear-gradient(180deg,var(--canvas),var(--clr-canvas-deep) 60%,var(--canvas))}
.im-rhythm .sec__head{max-width:760px;margin-bottom:clamp(34px, 5vw, 64px)}
.im-rhythm .sec__head h2{font-size:var(--h2);margin:.5rem 0 1rem}

/* ===== card depth recipe (lifted top edge) ===== */
.im-rhythm .card{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:16px;
  box-shadow:var(--lift);transition:transform .28s,border-color .28s,background .28s}
.im-rhythm .card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);opacity:.7}
.im-rhythm .card:hover{transform:translateY(-4px);border-color:rgba(247,148,32,.55);background:var(--raised)}

/* ===== banner hero (reusable: image + scrim + low-left H1) ===== */
.im-rhythm .rhero{position:relative;min-height:clamp(440px, 64vh, 620px);display:flex;align-items:flex-end;
  padding-bottom:clamp(36px, 5vw, 72px);overflow:clip;background:var(--ground)}
.im-rhythm .rhero__bg{position:absolute;inset:0;z-index:0}
.im-rhythm .rhero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.im-rhythm .rhero__scrim{position:absolute;inset:0;z-index:1;
  background:
   linear-gradient(180deg,rgba(28,26,26,.45) 0%,rgba(28,26,26,.18) 34%,rgba(28,26,26,.4) 72%,rgba(28,26,26,.92) 100%),
   radial-gradient(120% 90% at 80% 30%,rgba(247,148,32,.14),transparent 60%),
   linear-gradient(90deg,rgba(28,26,26,.72) 0%,rgba(28,26,26,.28) 50%,transparent 78%)}
.im-rhythm .rhero .shell{width:100%} /* flex item: stretch to the shared 1240px rail so the hero text left-aligns with the sections below */
.im-rhythm .rhero__in{position:relative;z-index:2;max-width:62ch}
.im-rhythm .rhero h1{font-size:var(--h1);margin:.5rem 0 1.1rem;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.im-rhythm .rhero .lead{color:var(--text);max-width:54ch}
.im-rhythm .rhero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* ===== metrics formula (reusable) ===== */
.im-rhythm .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;margin-top:2.4rem}
@media(max-width:760px){.im-rhythm .flow{grid-template-columns:repeat(2,1fr)}}
.im-rhythm .fnode{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;padding:1.4rem 1.1rem;text-align:center;box-shadow:var(--lift)}
.im-rhythm .fnode .ic{width:30px;height:30px;color:var(--orange);margin:0 auto .6rem}
.im-rhythm .fnode h3{font-size:1rem;letter-spacing:.06em;margin-bottom:.4rem}
.im-rhythm .fnode .v{font-family:var(--font-b);font-weight:900;font-size:2.3rem;color:var(--orange);line-height:1}
.im-rhythm .fnode .s{font-size:.72rem;color:var(--muted);margin-top:.2rem}
.im-rhythm .fnode--res{background:var(--orange)}
.im-rhythm .fnode--res h3,.im-rhythm .fnode--res .v,.im-rhythm .fnode--res .s,.im-rhythm .fnode--res .ic{color:var(--ink)}
.im-rhythm .fconn{position:absolute;top:-18px;inset-inline:6%;height:2px;background:var(--hairline)}
.im-rhythm .fconn i{position:absolute;inset-inline-start:0;top:0;height:100%;width:0;background:var(--orange)}

/* ===== proof strip (reusable) ===== */
.im-rhythm .proof__row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1rem}
@media(min-width:820px){.im-rhythm .proof__row{grid-template-columns:repeat(4,1fr)}}
.im-rhythm .proof__i{display:flex;flex-direction:column;gap:.15rem;position:relative;padding-inline-start:1.1rem}
.im-rhythm .proof__i::before{content:"";position:absolute;inset-inline-start:0;top:.2em;bottom:.2em;width:2px;background:linear-gradient(var(--orange),transparent)}
.im-rhythm .proof__i b{font-family:var(--font-b);font-weight:900;font-size:clamp(2rem, 1.4rem + 2.2vw, 3.2rem);line-height:1;color:var(--text)}
.im-rhythm .proof__i span{font-size:.78rem;color:var(--muted)}

/* ===== editorial split (sticky heading + prose) — reusable ===== */
.im-rhythm .split{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media(min-width:900px){.im-rhythm .split{grid-template-columns:.8fr 1.2fr;gap:3.2rem}}
@media(min-width:900px){.im-rhythm .split__head{position:sticky;top:96px;align-self:start;height:max-content}}
.im-rhythm .split__head h2{font-size:var(--h2);margin:.5rem 0 0}
.im-rhythm .split__body{color:var(--text-2,#D9D3D0);font-size:1.05rem;line-height:1.75;max-width:64ch}
.im-rhythm .split__body p{margin:0 0 1.1rem;color:var(--muted)}
.im-rhythm .split__body p:first-child{color:var(--text);font-size:1.12rem}
.im-rhythm .split__body a{color:var(--orange-bright);border-bottom:1px solid rgba(247,148,32,.4)}
.im-rhythm .split__body a:hover{border-color:var(--orange)}

/* ===== offices (reusable) ===== */
.im-rhythm .offices{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-top:2rem}
@media(min-width:820px){.im-rhythm .offices{grid-template-columns:repeat(4,1fr)}}
.im-rhythm .office{background:var(--surface);border:1px solid var(--hairline);border-radius:13px;padding:1.1rem 1.1rem 1.2rem;box-shadow:var(--lift)}
.im-rhythm .office h3{font-family:var(--font-d);font-size:1.3rem;letter-spacing:.04em;margin-bottom:.15rem}
.im-rhythm .office .cc{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);font-weight:600}
.im-rhythm .office p{font-size:.82rem;color:var(--muted);margin:.55rem 0 .7rem;min-height:2.4em}
.im-rhythm .office a{font-size:.82rem;color:var(--text);border-bottom:1px solid var(--hair2)}
.im-rhythm .office a:hover{color:var(--orange);border-color:var(--orange)}

/* ===== partners strip (reusable) ===== */
.im-rhythm .plats{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media(min-width:680px){.im-rhythm .plats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.im-rhythm .plats{grid-template-columns:repeat(6,1fr)}}
.im-rhythm .plat{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;background:var(--surface);border:1px solid var(--hairline);border-radius:13px;padding:1rem .95rem;min-height:108px;box-shadow:var(--lift)}
.im-rhythm .plat img{height:24px;width:auto;max-width:90px;object-fit:contain}
.im-rhythm .plat span{font-weight:700;font-size:.9rem;display:block}
.im-rhythm .plat small{color:var(--muted);font-size:.72rem;font-weight:400;line-height:1.3}

/* ===== FAQ accordion (reusable) ===== */
.im-rhythm .faq{border-top:1px solid var(--hairline);max-width:64ch}
.im-rhythm .faq__item{border-bottom:1px solid var(--hairline)}
.im-rhythm .faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:0;color:var(--text);text-align:start;cursor:pointer;
  font-family:var(--font-b);font-weight:600;font-size:1.05rem;padding:1.2rem .25rem;text-transform:none;letter-spacing:0}
.im-rhythm .faq__ic{flex:0 0 auto;width:18px;height:18px;color:var(--orange);transition:transform .3s}
.im-rhythm .faq__item.open .faq__ic{transform:rotate(45deg)}
.im-rhythm .faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.im-rhythm .faq__a p{color:var(--muted);margin:0;padding:0 .25rem 1.2rem;line-height:1.7}

/* ===== CTA panel (reusable) ===== */
.im-rhythm .cta__block{display:grid;grid-template-columns:1fr;border-radius:20px;overflow:clip;box-shadow:var(--lift)}
@media(min-width:860px){.im-rhythm .cta__block{grid-template-columns:1fr 1fr}}
.im-rhythm .cta__orange{background:var(--orange);color:var(--ink);padding:clamp(2rem, 4vw, 3.4rem)}
.im-rhythm .cta__orange .eyebrow{color:rgba(28,26,26,.82)}
.im-rhythm .cta__orange h2{font-size:clamp(1.8rem, 1.2rem + 3vw, 3.2rem);margin:.8rem 0 1rem;color:var(--ink)}
.im-rhythm .cta__orange p{color:rgba(28,26,26,.82);max-width:38ch;margin-bottom:1.6rem}
.im-rhythm .cta__photo{position:relative;min-height:240px}
.im-rhythm .cta__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== answer callout (GEO-citable summary) — reusable ===== */
.im-rhythm .answer{position:relative;max-width:72ch;background:var(--surface);border:1px solid var(--hairline);
  border-radius:14px;box-shadow:var(--lift);padding:1.15rem 1.35rem;margin-top:1.8rem}
.im-rhythm .answer::before{content:"";position:absolute;inset-block:14px;inset-inline-start:-1px;width:3px;border-radius:3px;background:var(--orange)}
.im-rhythm .answer p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.7}
.im-rhythm .answer strong{color:var(--text)}

/* ===== services grid (the 8, /services/ archive) ===== */
.im-rhythm .svcgrid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.4rem}
@media(min-width:780px){.im-rhythm .svcgrid{grid-template-columns:repeat(2,1fr)}}
.im-rhythm .svc{display:flex;flex-direction:column;gap:.6rem;padding:1.45rem 1.35rem 1.3rem}
.im-rhythm .svc__top{display:flex;align-items:center;gap:.75rem}
.im-rhythm .svc__num{font-family:var(--font-d);font-size:.95rem;letter-spacing:.08em;color:var(--muted)}
.im-rhythm .svc .ic{width:28px;height:28px;color:var(--orange);flex:0 0 auto}
.im-rhythm .svc h3{font-size:1.3rem;letter-spacing:.04em}
.im-rhythm .svc>p{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0}
.im-rhythm .svc__caps{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:.15rem 0 0;padding:0}
.im-rhythm .svc__caps li{font-size:.72rem;font-weight:600;color:var(--muted);background:var(--canvas);
  border:1px solid var(--hairline);border-radius:999px;padding:.3rem .7rem}
.im-rhythm .svc__scope{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted)}
.im-rhythm .svc__scope::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.im-rhythm .svc__link{margin-top:auto;padding-top:.55rem;display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;font-weight:600;font-size:.9rem;color:var(--text)}
.im-rhythm .svc__link::after{content:"";position:absolute;inset:0}
.im-rhythm .svc:hover .svc__link{color:var(--orange)}

/* ===== work grid (poster cards + sector filter, /portfolio/ archive) ===== */
.im-rhythm .filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.im-rhythm .fchip{font-family:var(--font-b);font-weight:600;font-size:.8rem;color:var(--muted);cursor:pointer;
  background:var(--surface);border:1px solid var(--hairline);border-radius:999px;padding:.5rem 1.05rem;min-height:44px;
  transition:color .2s,border-color .2s,background .2s}
.im-rhythm .fchip:hover{color:var(--text);border-color:var(--hair2)}
.im-rhythm .fchip.is-on{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.im-rhythm .wgrid{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:1.7rem}
@media(min-width:640px){.im-rhythm .wgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.im-rhythm .wgrid{grid-template-columns:repeat(3,1fr)}}
.im-rhythm .wcard{display:flex;flex-direction:column;overflow:clip}
.im-rhythm .wcard.is-hide{display:none}
.im-rhythm .wcard__media{position:relative}
.im-rhythm .wcard__media img{width:100%;aspect-ratio:4/3;max-block-size:300px;object-fit:cover;object-position:50% 0%;transition:transform .5s ease}
.im-rhythm .wcard:hover .wcard__media img{transform:scale(1.04)}
.im-rhythm .wcard__tag{position:absolute;top:12px;inset-inline-start:12px;z-index:2;font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:rgba(28,26,26,.78);
  border:1px solid var(--hair2);border-radius:999px;padding:.3rem .7rem}
.im-rhythm .wcard__body{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.05rem 1.15rem 1.2rem;flex:1}
.im-rhythm .wcard__body h3{font-family:var(--font-b);font-weight:700;font-size:1.02rem;line-height:1.35;letter-spacing:0;text-transform:none}
.im-rhythm .wcard__metric{display:flex;align-items:baseline;gap:.55rem}
.im-rhythm .wcard__metric b{font-family:var(--font-b);font-weight:900;font-size:1.95rem;line-height:1;color:var(--orange)}
.im-rhythm .wcard__metric span{font-size:.78rem;color:var(--muted)}
.im-rhythm .wcard__result{font-size:.85rem;color:var(--muted);line-height:1.55;margin:0}
.im-rhythm .wcard__more{margin-top:auto;padding-top:.5rem;font-weight:600;font-size:.88rem;color:var(--text)}
.im-rhythm .wcard__more::after{content:"";position:absolute;inset:0}
.im-rhythm .wcard:hover .wcard__more{color:var(--orange)}
.im-rhythm .note{font-size:.74rem;color:var(--dim);max-width:72ch;margin-top:1.7rem}

/* ===== contact form split ===== */
.im-rhythm .cform{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:2.4rem}
@media(min-width:920px){.im-rhythm .cform{grid-template-columns:1.15fr .85fr;gap:2.4rem;align-items:start}}
.im-rhythm .cform__panel{padding:clamp(1.3rem, 3vw, 2.1rem)}
.im-rhythm .cform__panel:hover,.im-rhythm .cform__aside .card:hover{transform:none}
.im-rhythm .cform__aside{display:grid;gap:1rem;align-content:start}
.im-rhythm .cform__aside .card{padding:1.25rem 1.3rem 1.35rem}
.im-rhythm .cform__aside h3{font-size:1.15rem;letter-spacing:.04em;margin-bottom:.35rem}
.im-rhythm .cform__aside p{color:var(--muted);font-size:.9rem;line-height:1.65;margin:0 0 .55rem}
.im-rhythm .cform__aside a{color:var(--orange-bright);font-weight:600;border-bottom:1px solid rgba(247,148,32,.4)}
.im-rhythm .cform__aside a:hover{border-color:var(--orange)}

/* office card extras (contact NAP) */
.im-rhythm .office address{font-style:normal;font-size:.78rem;color:var(--dim);line-height:1.55;margin:.45rem 0 .65rem}
.im-rhythm .office__links{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}

/* ===== hero split variant (CPT singles: poster / icon beside the title) ===== */
.im-rhythm .rhero--split{min-height:0;align-items:center;overflow:visible;
  padding-block:clamp(90px, 11vw, 140px) clamp(36px, 5vw, 64px);
  background:linear-gradient(180deg,var(--canvas),var(--clr-canvas-deep) 70%,var(--canvas));border-bottom:1px solid var(--hairline)}
.im-rhythm .rhero--split .shell{display:grid;gap:2rem;grid-template-columns:1fr;width:100%}
@media(min-width:900px){.im-rhythm .rhero--split .shell{grid-template-columns:1.2fr .8fr;align-items:center}}
.im-rhythm .rhero--split h1{text-shadow:none}
.im-rhythm .rhero__media{justify-self:center;margin:0}
.im-rhythm .rhero__media img{border-radius:18px;border:1px solid var(--hairline);box-shadow:var(--lift);max-block-size:400px;width:auto}
.im-rhythm .rhero__badge{display:flex;align-items:center;justify-content:center;background:var(--surface);
  border:1px solid var(--hairline);border-radius:22px;box-shadow:var(--lift);padding:2.6rem 3.2rem}
.im-rhythm .rhero__badge .ic{width:96px;height:96px;color:var(--orange)}
@media(max-width:899px){.im-rhythm .rhero__media,.im-rhythm .rhero__badge{display:none}}

/* ===== long-form content (CPT singles) ===== */
.im-rhythm .prose{max-width:72ch;padding-block:clamp(40px, 6vw, 80px)}
.im-rhythm .prose p{color:var(--muted);line-height:1.75;margin:0 0 1.1rem}
.im-rhythm .prose p:first-child{color:var(--text);font-size:1.1rem}
.im-rhythm .prose h2{font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);margin:2.2rem 0 .9rem}
.im-rhythm .prose h3{font-size:1.15rem;margin:1.6rem 0 .6rem}
.im-rhythm .prose a{color:var(--orange-bright);border-bottom:1px solid rgba(247,148,32,.4)}
.im-rhythm .prose a:hover{border-color:var(--orange)}
.im-rhythm .prose ul,.im-rhythm .prose ol{color:var(--muted);padding-inline-start:1.2rem;margin:0 0 1.1rem}
.im-rhythm .prose li{margin-bottom:.4rem}

/* ===== rich office card (Where We Work: intro + caps + contact) ===== */
.im-rhythm .office--rich{display:flex;flex-direction:column}
.im-rhythm .office--rich .role{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);font-weight:600}
.im-rhythm .office--rich h3{margin:.15rem 0 .5rem}
.im-rhythm .office--rich .intro{font-size:.85rem;color:var(--muted);line-height:1.6;margin:0 0 .8rem}
.im-rhythm .office__caps{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 .9rem;padding:0}
.im-rhythm .office__caps li{font-size:.68rem;font-weight:600;color:var(--muted);background:var(--canvas);border:1px solid var(--hairline);border-radius:999px;padding:.28rem .65rem}
.im-rhythm .office__nap{margin-top:auto;display:flex;flex-direction:column;gap:.3rem}
.im-rhythm .office__nap a{font-size:.82rem;color:var(--text);border-bottom:1px solid var(--hair2);align-self:flex-start}
.im-rhythm .office__nap a:hover{color:var(--orange);border-color:var(--orange)}

/* ===== client logo wall (server-rendered mono marks) ===== */
.im-rhythm .logowall{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:2.4rem;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:16px;overflow:clip}
@media(min-width:560px){.im-rhythm .logowall{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.im-rhythm .logowall{grid-template-columns:repeat(6,1fr)}}
.im-rhythm .logowall__c{display:flex;align-items:center;justify-content:center;background:var(--canvas);
  min-height:96px;padding:1.1rem;transition:background .25s}
.im-rhythm .logowall__c:hover{background:var(--surface)}
.im-rhythm .logowall__c img{max-height:34px;max-width:108px;width:auto;opacity:.74;transition:opacity .25s}
.im-rhythm .logowall__c:hover img{opacity:1}

/* ===== post grid (Insights hub + single related) ===== */
.im-rhythm .postgrid{display:grid;grid-template-columns:1fr;gap:1.3rem;margin-top:2.4rem}
@media(min-width:640px){.im-rhythm .postgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.im-rhythm .postgrid{grid-template-columns:repeat(3,1fr)}}
.im-rhythm .pcard{display:flex;flex-direction:column;overflow:clip}
.im-rhythm .pcard__media{position:relative;aspect-ratio:16/10;background:var(--ground)}
.im-rhythm .pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.im-rhythm .pcard:hover .pcard__media img{transform:scale(1.04)}
.im-rhythm .pcard__cat{position:absolute;top:12px;inset-inline-start:12px;font-size:.64rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--orange);border-radius:999px;padding:.28rem .65rem}
.im-rhythm .pcard__body{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem 1.25rem;flex:1}
.im-rhythm .pcard__meta{font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.im-rhythm .pcard__body h3{font-family:var(--font-b);font-weight:700;font-size:1.05rem;line-height:1.35;letter-spacing:0;text-transform:none}
.im-rhythm .pcard__ex{font-size:.86rem;color:var(--muted);line-height:1.6;margin:0}
.im-rhythm .pcard__more{margin-top:auto;padding-top:.4rem;font-weight:600;font-size:.85rem;color:var(--text)}
.im-rhythm .pcard__more::after{content:"";position:absolute;inset:0}
.im-rhythm .pcard:hover .pcard__more{color:var(--orange)}

/* ===== blog post LAYOUT VARIANTS (per-post selectable templates) ===== */
/* 1. Cover hero — featured image fills the top, title overlaid */
.im-rhythm .pcover{position:relative;min-height:clamp(420px,60vh,600px);display:flex;align-items:flex-end;
  overflow:clip;border-radius:0 0 22px 22px;margin-bottom:clamp(30px,5vw,52px)}
.im-rhythm .pcover__bg{position:absolute;inset:0;z-index:0}
.im-rhythm .pcover__bg img{width:100%;height:100%;object-fit:cover}
.im-rhythm .pcover__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,26,26,.25),rgba(28,26,26,.4) 45%,rgba(28,26,26,.95))}
.im-rhythm .pcover__in{position:relative;z-index:2;padding-bottom:clamp(26px,4vw,52px)}
.im-rhythm .pcover h1{font-size:clamp(2.2rem,1.2rem + 4.4vw,4.4rem);max-width:22ch;margin:.6rem 0 0;text-shadow:0 4px 30px rgba(0,0,0,.6)}
/* 2. Focused read — narrow, centred, text-forward */
.im-rhythm .pfocus{max-width:680px;margin-inline:auto;text-align:center;padding-top:clamp(40px,7vw,80px)}
.im-rhythm .pfocus h1{font-size:clamp(2rem,1.2rem + 3vw,3.2rem);max-width:none;margin:.6rem 0 0}
.im-rhythm .pfocus .postmeta{justify-content:center}
.im-rhythm .pfocus .postfeat{margin-top:clamp(24px,4vw,40px)}
.im-rhythm .im-post--focus .prose{max-width:62ch;margin-inline:auto}
/* 3. With sidebar */
.im-rhythm .psidebar{display:grid;grid-template-columns:1fr;gap:2.2rem}
@media(min-width:920px){.im-rhythm .psidebar{grid-template-columns:minmax(0,1fr) 280px}}
.im-rhythm .psidebar .prose{max-width:none;padding-block:clamp(30px,4vw,48px) 0}
.im-rhythm .pside{align-self:start}
@media(min-width:920px){.im-rhythm .pside{position:sticky;top:96px;padding-top:clamp(30px,4vw,48px)}}
.im-rhythm .pside .card{padding:1.15rem 1.25rem 1.3rem;margin-bottom:1rem}
.im-rhythm .pside .card h3{font-family:var(--font-b);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.im-rhythm .pside .auth{display:flex;align-items:center;gap:.7rem}
.im-rhythm .pside .auth .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange-bright));flex:0 0 auto}
.im-rhythm .pside .auth b{font-size:.92rem}
.im-rhythm .pside .rel a{display:block;color:var(--text);font-weight:600;font-size:.88rem;padding:.5rem 0;border-bottom:1px solid var(--hairline)}
.im-rhythm .pside .rel a:last-child{border-bottom:0}
.im-rhythm .pside .rel a:hover{color:var(--orange)}

/* ===== single post header + meta ===== */
.im-rhythm .posthead{padding-block:clamp(90px, 11vw, 150px) clamp(28px, 4vw, 48px);
  background:linear-gradient(180deg,var(--canvas),var(--clr-canvas-deep) 70%,var(--canvas));border-bottom:1px solid var(--hairline)}
.im-rhythm .posthead .cat{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.8rem}
.im-rhythm .posthead h1{font-size:clamp(2.2rem, 1.2rem + 4vw, 4rem);max-width:20ch}
.im-rhythm .postmeta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1.2rem;color:var(--muted);font-size:.85rem}
.im-rhythm .postmeta .dot{color:var(--dim)}
.im-rhythm .postfeat{margin-top:clamp(28px,4vw,48px);border-radius:18px;overflow:clip;border:1px solid var(--hairline);box-shadow:var(--lift)}
.im-rhythm .postfeat img{width:100%;height:auto;display:block;aspect-ratio:16/8;object-fit:cover}
.im-rhythm .postback{display:inline-flex;align-items:center;gap:.4rem;margin-top:2.4rem;font-weight:600;color:var(--muted)}
.im-rhythm .postback:hover{color:var(--orange)}
.im-rhythm .sample-note{margin-top:1.6rem;font-size:.74rem;color:var(--dim);border-inline-start:2px solid var(--orange);padding-inline-start:.8rem}

/* ===== editable drop-in KIT blocks (Inserter patterns, built from core blocks) =====
   These are inserted by editors into rhythm pages and styled here via .im-rhythm. */
.im-rhythm .kit-cta{background:var(--orange);color:var(--ink);border-radius:16px;
  padding:clamp(1.6rem, 4vw, 2.8rem);max-width:680px;margin-block:1.4rem}
.im-rhythm .kit-cta h2,.im-rhythm .kit-cta h3{color:var(--ink);text-transform:uppercase}
.im-rhythm .kit-cta p{color:rgba(28,26,26,.82);max-width:42ch}
.im-rhythm .kit-cta .wp-block-button__link{background:var(--ink);color:var(--text);
  border-radius:9px;padding:.75rem 1.4rem;font-weight:600;font-family:var(--font-b)}
.im-rhythm .kit-cta .wp-block-button__link:hover{background:var(--clr-canvas);color:var(--orange-bright)}

.im-rhythm .kit-feat{margin-block:1.4rem}
.im-rhythm .kit-feat .wp-block-column{background:var(--surface);border:1px solid var(--hairline);
  border-radius:14px;padding:1.3rem 1.3rem 1.4rem;box-shadow:var(--lift)}
.im-rhythm .kit-feat .wp-block-column h3{font-size:1.15rem;letter-spacing:.04em;margin:0 0 .4rem}
.im-rhythm .kit-feat .wp-block-column p{color:var(--muted);font-size:.9rem;margin:0}
.im-rhythm .kit-feat .wp-block-column>h3:first-child{color:var(--orange)}

.im-rhythm .kit-quote{border-inline-start:3px solid var(--orange);padding-inline-start:1.3rem;
  margin-block:1.6rem;max-width:62ch}
.im-rhythm .kit-quote p{font-family:var(--font-d);text-transform:none;font-weight:400;
  font-size:clamp(1.3rem, 1rem + 1.4vw, 1.9rem);line-height:1.28;color:var(--text);margin:0 0 .7rem}
.im-rhythm .kit-quote cite{color:var(--muted);font-style:normal;font-size:.85rem}

.im-rhythm .kit-faq{max-width:64ch;margin-block:1.6rem;border-top:1px solid var(--hairline)}
.im-rhythm .kit-faq .wp-block-details{border-bottom:1px solid var(--hairline);padding:1.05rem .2rem}
.im-rhythm .kit-faq summary{font-weight:600;font-size:1.02rem;cursor:pointer;color:var(--text);list-style:none}
.im-rhythm .kit-faq summary::-webkit-details-marker{display:none}
.im-rhythm .kit-faq summary::after{content:"+";color:var(--orange);float:inline-end;font-size:1.2rem;line-height:1}
.im-rhythm .kit-faq .wp-block-details[open] summary::after{content:"–"}
.im-rhythm .kit-faq .wp-block-details>*:not(summary){color:var(--muted);margin-top:.6rem}

.im-rhythm .wp-block-media-text{margin-block:1.6rem;border-radius:14px;overflow:clip;border:1px solid var(--hairline);background:var(--surface)}
.im-rhythm .wp-block-media-text__content{padding:clamp(1.2rem, 3vw, 2rem)}
.im-rhythm .wp-block-media-text h3{font-size:clamp(1.4rem, 1rem + 1.4vw, 2rem);margin:0 0 .5rem}
.im-rhythm .wp-block-media-text p{color:var(--muted);margin:0}

/* explicit focus-visible for the bordered/transparent controls (defeats any specificity race with tokens.css) */
.im-rhythm .fchip:focus-visible,.im-rhythm .faq__q:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ===== reveal ===== */
.im-rhythm [data-rev]{opacity:0;transform:translateY(var(--rev-y));transition:opacity var(--rev-ms) ease,transform var(--rev-ms) ease}
.im-rhythm [data-rev].in{opacity:1;transform:none}
.im-rhythm .stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.im-rhythm .stagger.in>*{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .im-rhythm [data-rev],.im-rhythm .stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .im-rhythm *{animation:none!important}
}

/* ===== RTL / Arabic (logical props already mirror; typography restored) =====
   Anton + Poppins are Latin-only. tokens.css's [dir="rtl"] overrides lose to the
   later-loading .im-rhythm rules (equal specificity, later sheet), so re-assert
   the Arabic font, letter joining (zero tracking) and case here. AR-only. */
[dir="rtl"] .im-rhythm{font-family:var(--font-arabic)}
[dir="rtl"] .im-rhythm h1,[dir="rtl"] .im-rhythm h2,[dir="rtl"] .im-rhythm h3{
  font-family:var(--font-arabic);letter-spacing:0;line-height:1.4;text-transform:none;overflow-wrap:anywhere}
/* mirror the interior hero's lateral dark-fade in RTL */
[dir="rtl"] .im-rhythm .rhero__scrim{
  background:
   linear-gradient(180deg,rgba(28,26,26,.45) 0%,rgba(28,26,26,.18) 34%,rgba(28,26,26,.4) 72%,rgba(28,26,26,.92) 100%),
   radial-gradient(120% 90% at 20% 30%,rgba(247,148,32,.14),transparent 60%),
   linear-gradient(270deg,rgba(28,26,26,.72) 0%,rgba(28,26,26,.28) 50%,transparent 78%)}
[dir="rtl"] .im-rhythm .eyebrow,[dir="rtl"] .im-rhythm .kicker{letter-spacing:0;text-transform:none;font-weight:700}
[dir="rtl"] .im-rhythm .wcard__tag,[dir="rtl"] .im-rhythm .office .cc{letter-spacing:0;text-transform:none}
[dir="rtl"] .im-rhythm .faq__q{text-align:start}