/* ==========================================================================
   Concept Media — Homepage sections (template-parts/home/*.php)
   Desktop-first for Milestone 2; mobile refinement is Milestone 3.
   Images are square-cornered by intent: rounded corners are reserved
   for interactive pills (buttons, chips) to avoid "card UI" feel.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-block-size: max(100svh, 760px);
  display: grid; grid-template-rows: 1fr auto;
  padding-block-start: calc(var(--header-h) + var(--space-8));
  background: var(--cm-black);
}
.hero__spot {
  position: absolute; z-index: -1; pointer-events: none;
  inline-size: 110vmax; block-size: 110vmax;
  inset-block-start: calc(var(--sy, 30%) - 55vmax);
  inset-inline-start: calc(var(--sx, 50%) - 55vmax);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025) 45%, rgba(255, 255, 255, 0) 70%);
}
.hero::after { /* ember rising from the stage floor */
  content: ""; position: absolute; inset: auto 0 0 0; block-size: 70%; z-index: -2;
  background: radial-gradient(80% 90% at 30% 100%, rgba(255, 92, 0, 0.38), rgba(90, 31, 0, 0.18) 45%, rgba(4, 4, 4, 0) 75%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1; opacity: 0.06; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__frame {
  position: relative; z-index: 1;   /* headline + description paint above the CONCEPT floor word */
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap);
  align-content: start; row-gap: var(--space-7);
  padding-block-start: clamp(0.5rem, 3vh, 2.5rem);
  inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter);
}
.hero__eyebrow { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); color: var(--cm-ink-200); margin: 0; }
.hero__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cm-orange); box-shadow: 0 0 0 4px rgba(255, 92, 0, 0.18); }

.hero__title {
  grid-column: 1 / -1;
  font-size: clamp(3.5rem, 8.6vw, 10.75rem);
  line-height: 0.9; letter-spacing: -0.05em;
}
.hero__line { display: block; overflow: hidden; padding-block-end: 0.26em; margin-block-end: -0.26em; }   /* room for descenders (g, p) inside the reveal mask */
.hero__line-in { display: inline-block; }
.hero__line--indent { padding-inline-start: calc((100% - 11 * var(--grid-gap)) / 12 + var(--grid-gap)); }
.hero__line--indent .hero__line-in { color: var(--cm-ink-100); }

.hero__aside {
  grid-column: 8 / -1; display: grid; gap: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-line-strong);
}
.hero__intro { font-size: var(--text-lead); font-weight: 300; line-height: 1.5; color: var(--cm-ink-200); max-inline-size: 34ch; }

.hero__base {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
  inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto;
  padding: var(--space-5) var(--page-gutter) var(--space-6);
}
.hero__disciplines { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 13px; font-weight: 500; color: var(--cm-ink-200); }
.hero__disciplines li { display: flex; align-items: center; gap: var(--space-5); }
.hero__disciplines li + li::before { content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--cm-orange); opacity: 0.8; }
.hero__scroll { display: flex; align-items: center; gap: var(--space-3); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--cm-ink-200); }
.hero__scroll-line { position: relative; inline-size: 1px; block-size: 44px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--cm-white); transform: translateY(-100%); animation: scroll-cue 2.4s var(--ease-in-out) infinite 2s; }
@keyframes scroll-cue { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }

.hero__word {
  position: absolute; z-index: 0; inset-inline: 0; inset-block-end: calc(-0.2em + var(--floor-raise, 0px) - var(--floor-drop, 0px));   /* --floor-drop: set by home.js only on wide, short screens */
  display: flex; justify-content: center;
  font-family: var(--font-latin); font-weight: 800; font-size: 22vw; line-height: 0.8; letter-spacing: -0.055em;
  pointer-events: none; user-select: none;
}
/* Desktop: the floor word sits a little higher so more of the letters show (still cropped).
   Phones keep their own clearance (see the <768px hero rules). */
@media (min-width: 900px) { .hero__word { --floor-raise: clamp(30px, 2.8vw, 50px); } }
.hero__word span {
  display: block; padding-inline-end: 0.05em;
  background: linear-gradient(180deg, rgba(255, 92, 0, 0.62) 0%, rgba(150, 48, 0, 0.32) 38%, rgba(4, 4, 4, 0) 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   AGENCY
   ========================================================================== */
.agency { position: relative; overflow: hidden; padding-block: var(--space-section); }
.agency .container { position: relative; }
.agency__statement {
  margin-block: var(--space-6) var(--space-8);
  max-inline-size: 22ch;
  font-size: clamp(2.25rem, 4.5vw, 5.25rem);
  font-weight: 300; line-height: 1.06; letter-spacing: -0.035em;
  text-wrap: balance;
}
.agency__statement strong { font-weight: 700; color: var(--cm-white); }
.is-motion .agency__statement .word { opacity: 0.16; }
/* Three editorial cards: number, title, text. Soft corners with one generous
   "tab" corner (echoing the curved panels of the company profile). */
.agency__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.agency-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr; row-gap: 0;   /* number · title (aligned across cards) · text (anchored to the bottom) */
  min-block-size: clamp(22rem, 28vw, 27rem);
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-l);
  border-start-end-radius: clamp(3.5rem, 6vw, 6rem);
  background: linear-gradient(180deg, var(--cm-ink-850), var(--cm-ink-900));
  transition: transform var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-standard);
}
.agency-card::before {   /* ember glow from the stage floor, revealed on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 70% at 100% 115%, rgba(255, 92, 0, 0.26), rgba(255, 92, 0, 0) 70%);
  opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out);
}
[dir="rtl"] .agency-card::before { background: radial-gradient(90% 70% at 0% 115%, rgba(255, 92, 0, 0.26), rgba(255, 92, 0, 0) 70%); }
.agency-card__n { margin: 0; font-family: var(--font-latin); font-size: 15px; font-weight: 500; letter-spacing: 0.04em; color: var(--cm-orange); }
.agency-card__title {
  margin-block-start: clamp(3rem, 6vw, 5.5rem);
  font-size: clamp(1.9rem, 2.7vw, 3rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em;
  max-inline-size: 11ch;
}
:lang(ar) .agency-card__title { letter-spacing: 0; line-height: 1.25; max-inline-size: 14ch; }
.agency-card__text { align-self: end; margin: var(--space-6) 0 0; font-size: var(--text-body); line-height: 1.6; color: var(--cm-ink-200); max-inline-size: 36ch; }
@media (hover: hover) and (pointer: fine) {
  .agency-card:hover { transform: translateY(-6px); border-color: rgba(255, 92, 0, 0.45); }
  .agency-card:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .agency-card:hover { transform: none; }
}
.agency__mark {
  position: absolute; z-index: -1; inset-block-start: -2rem; inset-inline-end: calc(var(--page-gutter) * -1 - 8vw);
  inline-size: 44vw; block-size: 44vw; fill: var(--cm-ink-850);
}

/* WORK: see portfolio.css (Our Work gallery + client ribbon) */

/* ==========================================================================
   SERVICES — the one light scene (inverted stage)
   ========================================================================== */
.services {
  --color-text-muted: var(--cm-ink-500);
  position: relative;
  background: var(--cm-white); color: var(--cm-black);
  padding-block: var(--space-section);
}
/* Flowing lines (drawn by services-lines.js): horizontal compositions that scroll
   with the section, behind the content and never interactive. */
.services__lines { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.services__lines svg { display: block; }
.services__grid { position: relative; z-index: 1; }
.services .section-mark__n { color: var(--cm-orange-ink); }
.services ::selection { background: var(--cm-black); color: var(--cm-white); }
.services__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.services__sticky {
  grid-column: 1 / 6; position: sticky; inset-block-start: calc(var(--header-h) + var(--space-6));
  align-self: start; display: flex; flex-direction: column; gap: var(--space-7);
  block-size: calc(100vh - var(--header-h) - var(--space-9)); align-content: start;
}
.services__title { font-size: clamp(2.75rem, 4.6vw, 5.5rem); line-height: 0.98; letter-spacing: -0.045em; }
.services__title .t-thin { display: block; color: var(--cm-ink-500); }
.services__counter {
  margin-block-start: auto;
  display: flex; align-items: baseline; gap: var(--space-2);
  font-weight: 200; font-size: clamp(5rem, 11vw, 12rem); line-height: 0.8; letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.services__counter-now { display: inline-block; color: var(--cm-black); font-weight: 700; }
.services__counter > span:not(.services__counter-now) { font-size: 0.32em; color: var(--cm-ink-400); letter-spacing: 0; }
.services__c { position: absolute; inset-block-end: 0.6rem; inset-inline-end: 0; inline-size: 5.5rem; block-size: 5.5rem; fill: var(--cm-orange); }
.services__dock { display: contents; }   /* desktop: counter + C stay in the sticky column as before */

.services__list { grid-column: 7 / -1; }
.service {
  padding-block: var(--space-8);
  border-block-start: 1px solid rgba(4, 4, 4, 0.14);
  transition: opacity var(--dur-reveal) var(--ease-out);
}
.service:last-child { border-block-end: 1px solid rgba(4, 4, 4, 0.14); }
.is-motion .service { opacity: 0.4; }
.is-motion .service.is-active { opacity: 1; }
.service__name { display: flex; align-items: baseline; gap: var(--space-5); font-size: clamp(2rem, 3.4vw, 3.75rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
.service__n { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; color: var(--cm-orange-ink); font-variant-numeric: tabular-nums; }
.service__text { margin-block-start: var(--space-5); font-size: var(--text-lead); font-weight: 300; line-height: 1.5; max-inline-size: 40ch; color: var(--cm-ink-700); }
.service__tags { display: flex; flex-wrap: wrap; gap: var(--space-2) 0; margin-block-start: var(--space-5); font-size: 14px; font-weight: 500; color: var(--cm-ink-600); }
.service__tags li:not(:last-child)::after { content: "/"; margin-inline: var(--space-3); color: var(--cm-ink-300); }   /* separators trail, so wrapped lines never start with one */
.services .btn:focus-visible, .services a:focus-visible { outline-color: var(--cm-orange-ink); }

@media (max-width: 1023px) {
  .services__grid { grid-template-columns: 1fr; row-gap: var(--space-6); }
  /* The sticky column dissolves; its counter + orange C become a dock that
     stays on the stage floor while the six services scroll past. */
  .services__sticky { display: contents; }
  .services__list { grid-column: 1 / -1; }
  /* Sticky to a line one dock-height above the viewport floor: it rises into
     view after the title, then holds the bottom while the list scrolls under
     it, and comes to rest in the space reserved after the list. The list is
     pulled up over the dock row (not a negative margin on the dock, which would
     loosen its sticky limit and let it slide past the section). */
  .services {
    --dock-size: clamp(3.5rem, 15vw, 6rem);
    --dock-floor: var(--space-4);   /* gap under the counter */
    --dock-h: calc(var(--dock-size) * 0.8 + var(--space-7) + var(--dock-floor) + env(safe-area-inset-bottom, 0px));
  }
  .services__dock {
    position: sticky; z-index: 2;
    inset-block-start: calc(100vh - var(--dock-h));
    inset-block-start: calc(100dvh - var(--dock-h));
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5);
    block-size: var(--dock-h);
    padding-block: var(--space-7) calc(var(--dock-floor) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--cm-white) 62%, rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  .services .services__list { margin-block-start: calc((var(--dock-h) + var(--space-6)) * -1); padding-block-end: var(--dock-h); }   /* beats the ol[role=list] padding reset */
  .services__counter { margin: 0; font-size: var(--dock-size); }
  .services__c { position: static; flex: none; inline-size: clamp(2.75rem, 11vw, 4.25rem); block-size: clamp(2.75rem, 11vw, 4.25rem); margin-block-end: 0.15em; }
  .service { padding-block: var(--space-7); }
  .service__name { font-size: clamp(1.9rem, 7vw, 2.75rem); }
}

/* ==========================================================================
   CONTACT — C-pattern revealed under a moving spotlight
   ========================================================================== */
.contact { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--space-section); background: var(--cm-black); }
.contact::before {
  content: ""; position: absolute; inset: auto 0 0 0; block-size: 80%; z-index: -2;
  background: radial-gradient(70% 80% at 85% 110%, rgba(255, 92, 0, 0.32), rgba(4, 4, 4, 0) 70%);
}
/* Pattern: padded C tile anchored to the inline-start top corner, so the grid never
   shifts between loads or widths. Layer 1 of the mask is a fixed, eased elliptical fade
   (strong at the corner, gone before the form); layer 2 is the pointer spotlight, which
   only adds a soft lift on fine pointers and rests off-stage until the pointer moves. */
.contact__pattern {
  --pattern-tile: clamp(44px, 4.6vw, 76px);
  --pattern-x: 0%;
  --pattern-reach: 78% 100%;
  --pattern-fade: radial-gradient(ellipse var(--pattern-reach) at var(--pattern-x) 0%,
    #000 0%, rgba(0, 0, 0, 0.8) 12%, rgba(0, 0, 0, 0.54) 26%, rgba(0, 0, 0, 0.3) 41%,
    rgba(0, 0, 0, 0.13) 56%, rgba(0, 0, 0, 0.04) 71%, transparent 86%);
  --pattern-spot: radial-gradient(circle 22vw at var(--mx, -40%) var(--my, -40%), rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.12) 45%, transparent 100%);
  --pattern-edge: linear-gradient(to bottom, transparent 0, #000 clamp(96px, 14vw, 200px));
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/brand/pattern-c-tile.svg") var(--pattern-x) 0 / var(--pattern-tile) var(--pattern-tile) repeat;
  opacity: 0.1;
  /* (edge) ∩ (fade ∪ spot): the soft top edge stops the grid starting on a hard line */
  -webkit-mask-image: var(--pattern-edge), var(--pattern-fade), var(--pattern-spot);
          mask-image: var(--pattern-edge), var(--pattern-fade), var(--pattern-spot);
  -webkit-mask-composite: source-in, source-over;
          mask-composite: intersect, add;
}
[dir="rtl"] .contact__pattern { --pattern-x: 100%; }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-9); }
.contact__intro { grid-column: 1 / 7; display: grid; gap: var(--space-8); align-content: start; }
.contact__title { display: grid; font-size: clamp(3rem, 6.4vw, 7.75rem); line-height: 0.95; letter-spacing: -0.05em; }
.contact__title .t-thin { color: var(--cm-ink-200); }
.contact__channels { display: grid; gap: 0; margin: 0; max-inline-size: 34rem; }
.channel { display: grid; grid-template-columns: 8rem 1fr; align-items: baseline; padding-block: var(--space-4); border-block-start: var(--border-hair); }
.channel dt { margin: 0; }
.channel dd { margin: 0; font-size: var(--text-lead); font-weight: 300; }
.channel__link { text-decoration: none; background-image: linear-gradient(var(--cm-orange), var(--cm-orange)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; }
.channel__link[data-placeholder] { color: var(--cm-ink-300); }

/* Inquiry form */
.inquiry {
  grid-column: 8 / -1; align-self: start;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); row-gap: var(--space-5);
  padding-block-start: var(--space-4);
}
.inquiry__title { grid-column: 1 / -1; margin: 0 0 var(--space-2); color: var(--cm-orange); }
.inquiry__services { grid-column: 1 / -1; border: 0; padding: 0; margin: 0 0 var(--space-3); }
.inquiry__legend { padding: 0; margin-block-end: var(--space-4); font-size: var(--text-lead); font-weight: 300; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: var(--space-4);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
  transition: background-color var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard);
}
.chip span:hover { border-color: var(--cm-white); }
.chip input:checked + span { background: var(--cm-white); color: var(--cm-black); border-color: var(--cm-white); }
.chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.field { position: relative; display: grid; }
.field--wide { grid-column: 1 / -1; }
.field__input {
  inline-size: 100%; padding: 1.6rem 0 0.6rem;
  background: transparent; border: 0; border-block-end: 1px solid var(--color-line-strong); border-radius: 0;
  font-size: var(--text-body); color: var(--cm-white); resize: vertical;
  transition: border-color var(--dur-micro) var(--ease-standard);
}
.field__input:focus { outline: none; border-block-end-color: var(--cm-orange); }
.field__input:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--cm-orange); }
.field__label {
  position: absolute; inset-inline-start: 0; inset-block-start: 1.6rem;
  font-size: var(--text-body); color: var(--cm-ink-300); pointer-events: none;
  transform-origin: 0 0; transition: transform var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-standard);
}
[dir="rtl"] .field__label { transform-origin: 100% 0; }
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label { transform: translateY(-1.35rem) scale(0.78); color: var(--cm-ink-200); }
.field__label span { color: var(--cm-orange); }
.field__error { margin-block-start: var(--space-2); font-size: 13px; color: var(--cm-orange-glow); }
.field.is-invalid .field__input { border-block-end-color: var(--cm-orange-glow); }
.inquiry__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); margin-block-start: var(--space-4); }
.inquiry__status { grid-column: 1 / -1; min-block-size: 1.5em; font-size: 14px; color: var(--cm-ink-200); }

/* ==========================================================================
   Pre-JS / reduced-motion safety: nothing is hidden unless JS + motion run
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; transform: none; }
  .is-motion .agency__statement .word { opacity: 1; }
  .is-motion .service { opacity: 1; }
}

/* Intro hold: hides hero parts for one frame until GSAP sets start states.
   Removed by home.js, and by a 2.5s safety timeout set in <head>. */
@media (prefers-reduced-motion: no-preference) {
  .is-intro .hero__frame, .is-intro .hero__base, .is-intro .hero__word, .is-intro .site-header { opacity: 0; }
}
/* Review aid (?motion=reduce) mirrors the reduced-motion media rules */
.sim-reduced .hero__scroll-line::after { animation: none; transform: none; }
.sim-reduced *, .sim-reduced *::before, .sim-reduced *::after { transition-duration: 1ms !important; }

/* Agency cards: tablet two-up, phone stacked */
@media (min-width: 768px) and (max-width: 1023px) {
  .agency__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-card:last-child { grid-column: 1 / -1; min-block-size: 0; }
}
@media (max-width: 767px) {
  .agency__cards { grid-template-columns: 1fr; gap: var(--space-4); }
  .agency-card { min-block-size: 0; }
  .agency-card__title { margin-block-start: var(--space-6); }
  .agency-card__title { font-size: clamp(1.75rem, 8vw, 2.25rem); max-inline-size: none; }
}

/* Contact: stack on small screens so the form never runs past the viewport
   (layout unchanged on desktop) */
@media (max-width: 767px) {
  .contact__intro, .inquiry { grid-column: 1 / -1; }
  .inquiry { grid-template-columns: 1fr; }
  .inquiry__foot { flex-wrap: wrap; }
  /* Tall stacked section: the fade spans the width and settles before the form */
  .contact__pattern { --pattern-reach: 165% 44%; }
}

/* ==========================================================================
   PHONES (<768px) — hero composition for narrow stages. Desktop untouched.
   ========================================================================== */
@media (max-width: 767px) {
  .hero { min-block-size: max(100svh, 620px); padding-block-start: calc(var(--header-h) + var(--space-6)); }
  .hero__frame { row-gap: var(--space-6); }
  .hero__dot { flex: none; }   /* stays round when the eyebrow wraps */
  .hero__title { font-size: clamp(3rem, 15.5vw, 4.75rem); }
  .hero__aside { grid-column: 1 / -1; max-inline-size: 34rem; }
  .hero__intro { max-inline-size: 30ch; }
  /* The disciplines sit on the stage, clear of the CONCEPT floor word
     (visible word height ≈ 0.6 × its 22vw font size). */
  .hero__base { padding-block: var(--space-6) calc(22vw * 0.6 + var(--space-4)); }
  .hero__disciplines { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--space-3) var(--space-7); }
  .hero__disciplines li { gap: var(--space-3); }
  .hero__disciplines li::before { content: ""; flex: none; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--cm-orange); opacity: 0.8; }
  .hero__scroll { display: none; }   /* touch screens scroll without a cue; keeps the floor clear */
}
/* Tablets in portrait (768–899px): keep the desktop floor composition on one line */
@media (min-width: 768px) and (max-width: 899px) {
  .hero__disciplines { gap: var(--space-2) var(--space-4); }
  .hero__disciplines li { gap: var(--space-4); }
  .hero__scroll { display: none; }
}
/* Small phones: contact channels stack (label above value) so the email never clips */
@media (max-width: 479px) {
  .channel { grid-template-columns: 1fr; row-gap: var(--space-1); }
}
/* 900–1023px: the desktop scene indicator (fixed, bottom start) is visible here,
   so the Services dock floats above it */
@media (min-width: 900px) and (max-width: 1023px) {
  .services { --dock-floor: calc(var(--space-6) + 2.5rem); }
}

/* ==========================================================================
   ARABIC HOMEPAGE (ar/index.html) — typography and RTL composition.
   Every rule is scoped to :lang(ar), so the English pages never match.
   Arabic needs taller lines (dots and hamza above, descenders below), no
   letter-spacing, slightly larger small sizes (IBM Plex Sans Arabic has a
   smaller x-height than Poppins), and Latin digits set in Poppins.
   Layout mirrors through logical properties; the CONCEPT floor word, the
   C-marks and the Services C stay unmirrored (brand marks).
   ========================================================================== */
:lang(ar) .hero__title { font-size: clamp(3.25rem, min(8.8vw, 14vh), 11rem); line-height: 1.12; letter-spacing: 0; }   /* height cap: the taller Arabic lines must leave the floor word clear */
:lang(ar) .hero__line { padding-block: 0.1em 0.34em; margin-block: -0.1em -0.34em; }   /* curtain mask keeps dots and descenders */
:lang(ar) .hero__intro { line-height: 1.75; }
:lang(ar) .hero__disciplines { font-size: 14px; }
:lang(ar) .hero__scroll { font-size: 13px; letter-spacing: 0; text-transform: none; }

:lang(ar) .agency__statement { line-height: 1.45; letter-spacing: 0; max-inline-size: 24ch; }
:lang(ar) .agency-card__text { font-size: 1.0625rem; line-height: 1.85; }

:lang(ar) .services__title { line-height: 1.25; letter-spacing: 0; }
:lang(ar) .services__counter { direction: ltr; justify-content: flex-end; font-family: var(--font-latin); }   /* "01/06" reads as a figure, as in Arabic text */
:lang(ar) .service__name { line-height: 1.35; letter-spacing: 0; }
:lang(ar) .service__n { font-family: var(--font-latin); }
:lang(ar) .service__text { line-height: 1.8; }
:lang(ar) .service__tags { font-size: 15px; }

:lang(ar) .contact__title { line-height: 1.25; letter-spacing: 0; }
:lang(ar) .chip span { font-size: 15px; }
:lang(ar) .field__input[type="email"], :lang(ar) .field__input[type="tel"] { direction: ltr; text-align: right; }   /* addresses and numbers type left-to-right, aligned with the label */
:lang(ar) .site-footer__line { line-height: 1.35; }
:lang(ar) .scene { font-size: 13px; letter-spacing: 0; text-transform: none; }
@media (min-width: 900px) {
  :lang(ar) .site-nav a { font-size: 15px; }
}
@media (max-width: 767px) {
  /* The Arabic line is shorter than the English, so it runs larger on phones
     and fills the stage the way the four-line English title does. */
  :lang(ar) .hero__title { font-size: clamp(3.25rem, 17vw, 5.25rem); }
}
/* Arabic line breaking: no orphaned last words, balanced multi-line titles */
:lang(ar) .hero__intro, :lang(ar) .agency-card__text, :lang(ar) .service__text { text-wrap: pretty; }
:lang(ar) .agency-card__title { text-wrap: balance; }