/* The scroll-reveal pre-states translate elements up to 36px sideways. Past
   the container gutters that shows up as a horizontal scrollbar until they
   reveal, so clip the page box. `clip` rather than `hidden`: it does not
   create a scroll container, so the sticky header keeps working. */
.page { overflow-x: clip; }

/* ==========================================================================
   Yoosl — Page-specific layout
   Organised per page, in nav order. Shared patterns live in components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shells
   -------------------------------------------------------------------------- */

.page { padding-block-start: var(--sp-12); }

/* The cream pages run the tone edge to edge, behind the floating header */
.page--cream {
  background: var(--surface-cream);
  margin-block-start: calc((var(--header-h) + var(--sp-12)) * -1);
  padding-block-start: calc(var(--header-h) + var(--sp-16));
}

/* ==========================================================================
   ABOUT  (Figma: Desktop - 2)
   ========================================================================== */

/* Figma spaces every block of this page 200px apart (Frame 170, 284:541).
   The Desktop - 2 frame is filled #e7dcc9, a shade deeper than the cream token. */
.page--about {
  --about-gap: clamp(4rem, 0.5rem + 13.3333vw, 12.5rem);
  background: #e7dcc9;
}

/* Figma puts the hero row at y=210 on the 1440 canvas */
.about-hero { padding-block: calc(var(--section-y) - 6px) 0; }

/* Statement first (the right side in RTL), photo group on the left: 448px and
   82px apart at 1440, the photos giving way to the text on narrower screens */
.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(18.75rem, 31.1111vw, 28rem);
  gap: clamp(2rem, 1rem + 4.5833vw, 5.125rem);
  align-items: center;
}

/* Figma's `items-end` / `text-right` are the start side on this RTL page */
.about-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  text-align: start;
}
.about-hero__text h1 { font-size: var(--fs-h2); color: #000; }

/* Two photo cards fanned out — Figma 284:379, a 448 x 549 group. The interior
   shot (+1.85deg, white backing) sits behind, up and to the right; the food
   shot (-2.45deg, #e2e2e2 backing) overlaps it from the lower left. Offsets
   place the unrotated 400 x 502 cards as percentages of the group, with
   physical `left` because the fan is drawn for this RTL page. No shadow. */
.photo-stack {
  position: relative;
  display: block;
  inline-size: 100%;
  max-inline-size: 448px;
  aspect-ratio: 448 / 549;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.photo-stack:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 6px; border-radius: var(--r-lg); }
.photo-stack__card {
  position: absolute;
  inline-size: 89.286%;
  aspect-ratio: 400 / 502;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              rotate var(--dur-slow) var(--ease-out),
              left var(--dur-slow) var(--ease-out),
              right var(--dur-slow) var(--ease-out),
              top var(--dur-slow) var(--ease-out),
              z-index var(--dur-slow) step-end;
}
.photo-stack__card > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.photo-stack__card--back {
  left: 8.929%;
  top: 1.154%;
  rotate: 1.85deg;
  background: var(--white);
}
.photo-stack__card--front {
  left: 2.353%;
  top: 7.038%;
  rotate: -2.45deg;
  background: #e2e2e2;
}
.photo-stack:hover .photo-stack__card--back { rotate: 3.5deg; }
.photo-stack:hover .photo-stack__card--front { rotate: -4.5deg; }

/* Clicking the stack deals the buried photo to the top: the two cards trade
   places, rotations and stacking order, and z-index flips at the midpoint of
   the move so they read as passing over each other. */
.photo-stack__card--back { z-index: 1; }
.photo-stack__card--front { z-index: 2; }
.photo-stack.is-flipped .photo-stack__card--back {
  z-index: 2;
  left: 2.353%;
  top: 7.038%;
  rotate: -2.45deg;
}
.photo-stack.is-flipped .photo-stack__card--front {
  z-index: 1;
  left: 8.929%;
  top: 1.154%;
  rotate: 1.85deg;
}
.photo-stack.is-flipped:hover .photo-stack__card--back { rotate: -4.5deg; }
.photo-stack.is-flipped:hover .photo-stack__card--front { rotate: 3.5deg; }

/* Client logo ribbon on a white band */
.logo-band {
  background: var(--white);
  padding-block: var(--sp-3);
  margin-block-start: var(--section-y);
}
.logo-band img {
  block-size: 102px;
  inline-size: auto;
  flex: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.logo-band img:hover { filter: none; opacity: 1; }

@media (max-width: 640px) {
  .logo-band img { block-size: 68px; }
}

/* About's ribbon — Figma 528:1602. The .logo-band rules above serve the home
   page; this one is a white band with the logos in full colour, 44px apart,
   12px block padding. The frame is 1494px wide at x=-36, so the row overhangs
   the canvas by 18px on the right and 36px on the left, with no edge fade. */
.about-logos {
  --logo-scale: 1;
  background: var(--white);
  padding-block: var(--sp-3);
  margin-block-start: var(--about-gap);
  overflow: hidden;
}
.about-logos .marquee {
  gap: 0;
  margin-inline: -18px -36px;
  -webkit-mask-image: none;
  mask-image: none;
}
.about-logos .marquee__track {
  gap: calc(44px * var(--logo-scale));
  padding-inline-end: calc(44px * var(--logo-scale));
}
.about-logo {
  position: relative;
  flex: none;
  overflow: hidden;
  inline-size: calc(142px * var(--logo-scale));
  block-size: calc(102px * var(--logo-scale));
}
.about-logo > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.about-logo--davinci { inline-size: calc(102px * var(--logo-scale)); }
.about-logo--taboon { block-size: calc(118px * var(--logo-scale)); }
.about-logo--o2 {
  inline-size: calc(114px * var(--logo-scale));
  block-size: calc(118px * var(--logo-scale));
}
/* Figma crops into the middle of the O2 artwork: 197% x 191% of its box */
.about-logo--o2 > img {
  inset: auto;
  left: -47.52%;
  top: -46.9%;
  inline-size: 197.03%;
  block-size: 190.86%;
}

@media (max-width: 640px) {
  .about-logos { --logo-scale: .67; }
}

/* Vision card — navy, icon + title, body text */
.vision-card {
  background: var(--surface-dark);
  color: var(--white);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  text-align: start;   /* Figma `text-right` — the start side in RTL */
}
.vision-card__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-4);
}
.vision-card__head h2 { color: var(--white); font-size: var(--fs-h2); }
.vision-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-sm);
  background: rgba(219, 222, 240, .9);
}
.vision-card__icon img { inline-size: 32px; block-size: 32px; }
.vision-card > p { color: #cbd5e1; }

/* Three orange statement pills */
.pill-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.pill-card {
  background: var(--primary-500);
  color: var(--gray-50);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-size: var(--fs-p2);
  text-align: start;
  display: flex;
  align-items: center;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pill-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-brand); }

@media (max-width: 900px) {
  .pill-cards { grid-template-columns: 1fr; }
}
/* Figma breaks every pill onto two lines. The fallback font runs at a
   different width, so cap the measure to keep those breaks in the 3-up row. */
@media (min-width: 901px) {
  .pill-card > span { max-inline-size: 13em; }
}

/* Section rhythm: each block sits --about-gap below the one before it */
.about-section { padding-block: var(--about-gap) 0; }
/* In Figma the footer overlaps the CTA (it was never moved down when the CTA
   went in), so the gap to the footer follows Desktop - 3: 172px at 1440. */
.about-section--last { padding-block-end: clamp(4rem, 0.5rem + 11.4vw, 10.75rem); }

/* "Why we are different" — Figma 284:482: an H1-size title 44px above three
   translucent cards (components 13-15) */
.about-why {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1.25rem + 1.6667vw, 2.75rem);
}
.about-why__title { font-size: var(--fs-h1); color: #000; text-align: center; }
.about-card {
  background: rgba(255, 255, 255, .7);
  border-color: transparent;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  text-align: start;
}
.about-card:hover { background: rgba(255, 255, 255, .92); }
.about-card h3 { color: #000; }
/* Keep Figma's three-line breaks in the 3-up row (see .pill-card > span) */
@media (min-width: 961px) {
  .about-card p { max-inline-size: 16.5em; }
}

/* Translucent white card used on the cream pages */
.card--glass {
  background: rgba(255, 255, 255, .7);
  border-color: transparent;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  text-align: start;   /* Figma `text-right`: the start side in RTL */
}
.card--glass:hover { background: rgba(255, 255, 255, .92); }

/* Photo CTA with a diagonal orange wash — Figma 399:272 */
.cta-photo {
  position: relative;
  overflow: hidden;
  border-radius: 44px;
  border: 1px solid var(--gray-900);
  /* Figma: 44px block, 96px inline on a 1248px panel. The inline value is a
     percentage of the panel so it lands on 96px there and shrinks with it. */
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem) clamp(1.5rem, 7.7%, 6rem);
  min-block-size: 341px;
  display: flex;
  align-items: center;
}
.cta-photo__bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Figma frames the photo well outside the panel — 114.71% x 205%, pushed up
   and left — so the couple sits at the left edge and the table runs off the
   bottom. Percentages hold that crop at any width. Below 900px the panel goes
   tall and a plain cover reads better, so this only applies on desktop. */
@media (min-width: 901px) {
  .cta-photo__bg {
    inset: auto;
    top: -70.32%;
    left: -14.77%;
    inline-size: 114.71%;
    block-size: 205%;
    max-inline-size: none;
  }
}
.cta-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(244deg, rgb(218, 102, 54) 42.7%, rgba(229, 105, 50, 0) 93%);
}
.cta-photo__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  /* Figma's `items-end` / `text-right` are LTR terms. On this RTL page the
     block and its text belong on the inline-start side, which is the right —
     the same side the orange wash covers. */
  align-items: flex-start;
  text-align: start;
  max-inline-size: 729px;
  margin-inline-end: auto;
}
.cta-photo__inner h2 { color: var(--white); font-size: var(--fs-h2); }
/* Figma caps the copy at 628px (192:4458, 399:272, 399:311), but in the
   fallback font that pulls "تثق بنا" up onto the first line; 24em keeps the
   design's break after "تجارية". */
.cta-photo__inner p { color: var(--gray-100); max-inline-size: 24em; }

/* The phone strip (567:2752) — hidden until the phone layout takes over */
.about-strip { display: none; }

@media (max-width: 700px) {
  /* Centred statement, as the other phone page heroes */
  .about-hero__text { text-align: center; align-items: center; }
  .about-hero .photo-stack { display: none; }
  /* 536x80 drawn from x=-93, i.e. wider than the 390 screen on both sides:
     a full-bleed band 82px under the copy. */
  .about-strip {
    display: block;
    block-size: 80px;
    margin-block-start: 82px;
    overflow: hidden;
  }
  .about-strip > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center 62%;
  }
}

@media (max-width: 900px) {
  .about-hero__grid { grid-template-columns: 1fr; }
  .photo-stack { margin-inline: auto; max-inline-size: 360px; }
  .about-hero__text h1 { font-size: var(--fs-h3); }
  .cta-photo { border-radius: var(--r-xl); }
  .cta-photo__inner { align-items: stretch; }
}

/* ==========================================================================
   WORKS  (Figma: Desktop - 3)
   ========================================================================== */

/* On the cream pages the shell already supplies the tone and the header
   offset, so the hero just needs rhythm. */
.page-hero--flush {
  background: transparent;
  margin-block-start: 0;
  padding-block: var(--section-y) 0;
}
.page-hero--flush::after { display: none; }

/* Filter pills 24px apart (284:688, 479:3532). On phones (567:3115) they are
   46px tall and 16px apart, on one row. */
.tabs--end { justify-content: flex-start; gap: var(--sp-6); }

/* Outlined pill filters — Figma uses a 1px #475569 outline, orange when active.
   58px tall: the outline sits inside Figma's 12 / 24 padding. */
.tabs--end .tab {
  background: transparent;
  border: 1px solid var(--gray-600, #475569);
  color: #475569;
  font-size: var(--fs-p2);
  font-weight: var(--fw-regular);
  padding: 11px 23px;
}
.tabs--end .tab:hover { background: rgba(71, 85, 105, .08); color: #334155; }
.tabs--end .tab.is-active {
  background: var(--primary-500);
  border-color: var(--primary-500);
  color: var(--white);
}
@media (max-width: 560px) {
  /* Wrapping stays allowed: the Arabic rows fit on one line at this size,
     the longer English labels ("Restaurant Marketing") may not. */
  .tabs--end { gap: var(--sp-4); }
  .tabs--end .tab {
    font-size: var(--fs-p4);
    padding: 11px 15px;
    white-space: nowrap;
  }
  /* The phone row reads الكل · منيو إلكتروني · مواقع إلكترونية */
  .works-filters .tab[data-target="menu"] { order: 1; }
  .works-filters .tab[data-target="web"] { order: 2; }
}

/* Whole-card links. A work card, an article card and a service card each
   carry one real link (the case-study / read-more link, or the service
   title); its ::after is stretched over the card so a click anywhere on the
   photo, title or copy follows it. Clicking only worked on the small arrow
   link before (Trello, 2026-10-01). The cards are positioned so the overlay
   resolves against them, and nothing inside them is positioned in its way. */
.work-card,
.post-card,
.feat { position: relative; }
.work-card .case-link::after,
.post-card .read-link::after,
.feat .read-link::after,
.svc-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.work-card,
.post-card,
.feat,
.svc-card { cursor: pointer; }
.svc-card__link { color: inherit; }
.svc-card__link:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 4px; border-radius: 4px; }
.svc-card:hover .svc-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Case-study card */
.work-card {
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
  border-radius: 14px;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.work-card__media {
  position: relative;
  aspect-ratio: 612 / 361;
  overflow: hidden;
  background: var(--white);
}
.work-card__media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-card:hover .work-card__media > img { transform: scale(1.05); }

.work-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  justify-content: space-between;
  flex: 1;
  padding: var(--sp-4);
  text-align: end;
}
/* 609:922-924 — a hairline, then what the project delivered. The phone cards
   in the file stop at the description, so this is desktop and tablet only. */
.work-card__output {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--border-strong);
  font-size: var(--fs-p4);
  line-height: var(--lh-tight);
  color: var(--text-muted);
}
@media (max-width: 700px) {
  .work-card__output { display: none; }
}

/* Phones lay the card out as a row: the photo takes the start side at 38% of
   the width and runs the full height, the copy sits beside it (Figma
   "Article - Portfolio Card 1", 350x208 — image 130, details 219). */

.work-card__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-p2);
  color: #000;
  line-height: var(--lh-tight);
}
.work-card__metric {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-p4);
  font-weight: var(--fw-bold);
  color: var(--primary-500);
}
.work-card__metric img { flex: none; inline-size: 24px; block-size: 24px; }
.work-card__desc { font-size: var(--fs-p3); color: #6b6b6b; }

/* "تصفح دراسـة الحالـة" — navy disc + display label */
.case-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-p2);
  color: var(--tertiary-500);
  align-self: flex-start;
}
.case-link__icon {
  order: 1;          /* arrow trails the label — see .btn__icon */
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--r-pill);
  background: #141b34;
  color: var(--white);
  transform: rotate(-45deg);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.case-link__icon svg { inline-size: 20px; block-size: 20px; }
.case-link:hover .case-link__icon { background: var(--primary-500); transform: rotate(-45deg) translate(2px, -2px); }

/* 609:1029: a 350x208 card, 14px padding, a 16px bold two-line title, 8px
   down to a two-line 12px grey excerpt, and the link as plain navy text pinned
   14px off the bottom. The phone card has no metric line and no arrow disc. */
@media (max-width: 700px) {
  .work-card { flex-direction: row; align-items: stretch; min-block-size: 208px; }
  .work-card__media { flex: 0 0 37.143%; aspect-ratio: auto; }   /* 130 / 350 */
  .work-card__body { flex: 1 1 auto; padding: 14px; gap: var(--sp-3); min-inline-size: 0; }
  .work-card__body > .stack { gap: 8px; }
  .work-card__title {
    font-size: var(--fs-p4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .work-card__metric { display: none; }
  .work-card__desc,
  .works-grid .work-card__desc {
    font-size: var(--fs-p5);
    line-height: 1.25;
    color: var(--gray-500);
    max-inline-size: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .work-card .case-link {
    white-space: nowrap;
    font-size: .875rem;
    padding: 8px;
    margin-inline-start: -8px;
    color: #141b34;
  }
  .work-card .case-link__icon { display: none; }
  .works-grid { gap: var(--sp-4); }   /* 16px between cards (609:1029 / 609:1040) */
}

/* --------------------------------------------------------------------------
   Works page overrides. The rules above are shared (index, podcast and the
   other flush-hero pages use them), so Desktop - 3 is matched from here.
   -------------------------------------------------------------------------- */

.page--works {
  --works-gap: clamp(4rem, 0.5rem + 13.3333vw, 12.5rem);          /* 200 at 1440 */
  --works-footer-gap: clamp(4rem, 0.5rem + 11.4vw, 10.75rem);    /* 172 at 1440 */
}

/* Hero — Figma 284:668: title top at y=243, an 824px column and a pure black
   H1 (the 32px gap and the Gray/500 P2 lead come from the shared page hero) */
.works-hero { padding-block-start: calc(var(--section-y) + 27px); }
.works-hero .page-hero__inner { max-inline-size: 824px; }
.works-hero h1 { font-size: var(--fs-h1); color: #000; }
.works-hero .lead {
  max-inline-size: 32em;   /* keeps Figma's break after "اكتشف" */
  margin-inline: auto;
}

/* Filters 72px under the hero, cards 44px under the filters */
.works-section { padding-block: clamp(2.5rem, 1rem + 3.9vw, 4.5rem) 0; }
.works-list {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1.25rem + 1.6667vw, 2.75rem);
}

/* Card copy starts on the right (Figma `text-right`) */
.works-grid .work-card__body { text-align: start; }
/* Keep Figma's two-line breaks — the fallback font runs narrower */
.works-grid .work-card__desc { max-inline-size: 27.75em; }
/* Figma lays the -45deg disc out by its rotated bounds (45.25px), which makes
   the link 61px tall; the margin reserves that space around the 32px disc. */
.works-grid .case-link__icon { margin: 6.627px; }
.works-grid .case-link__icon img { inline-size: 20px; block-size: 20px; }

/* Newsletter panel: Desktop - 3 puts it 200px below the cards and, unlike the
   other pages, 172px above the footer. */
.page--works > .newsletter-section { padding-block: var(--works-gap) var(--works-footer-gap); }

/* ==========================================================================
   NEWSLETTER PANEL  (shared — src/_newsletter-panel.html)
   Drawn identically on Desktop - 3 / 4 / 7 / 8 / 9 / 11 (437:387, 437:1124,
   451:310, 451:294, 479:3243, 483:1335): a white card with 56px padding, the
   copy in a 628px column on the right and a 437x473 photo on the left, 71px
   apart, and 200px down to the footer.
   ========================================================================== */

/* The partial's section. The gap above the panel belongs to whatever precedes
   it (200 / 195 / 104px depending on the page), so the pages set that; the
   gap down to the footer is Figma's 200px, easing to 64 on phones. */
.newsletter-section { padding-block: 0 clamp(4rem, -0.25rem + 14.1667vw, 12.5rem); }

.newsletter-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  background: var(--white);
  border-radius: 14px;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .1));
}
.newsletter-panel__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.newsletter-panel__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* Figma's `items-end` / `text-right` are the right-hand side: start in RTL */
.newsletter-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  justify-content: space-between;
  text-align: start;
  block-size: 100%;
}
.newsletter-panel__title {
  /* 56px at 1440. The last digit is rounded up so the slope reaches the cap
     there: 3.3333vw stops at 55.9995px, which re-rasterises the glyphs. */
  font-size: clamp(2rem, 0.5rem + 3.33334vw, 3.5rem);
  color: #000;
}
.newsletter-panel__body .muted { max-inline-size: 628px; margin-inline: 0; }
/* Label 16px over the input, button 12px under it */
.newsletter-panel__form { display: flex; flex-direction: column; gap: var(--sp-3); }
.newsletter-panel__form .field { gap: var(--sp-4); }
.newsletter-panel__form .field__label { font-size: var(--fs-p2); font-weight: var(--fw-regular); color: #000; }
/* 58px tall and flat, as drawn */
.newsletter-panel__form .btn--lg { padding: var(--sp-3) var(--sp-4); box-shadow: none; }

/* Pill-shaped grey input used inside the panel */
.input--pill {
  background: #f2f2f2;
  border: 0;
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-p3);
  text-align: start;
}
.input--pill::placeholder { color: var(--gray-500); }

@media (min-width: 901px) {
  /* Copy in the first track (the right in RTL), photo in the second. Placed
     explicitly because the partial keeps the photo first, so that it tops the
     stacked layout below 901px. Under ~1270px the photo gives up width
     (41% of the row) so the copy keeps a workable measure: at 920px the form
     is still ~400px wide and the title stays within three lines. */
  .newsletter-panel {
    grid-template-columns: minmax(0, 628px) min(437px, 41%);
    justify-content: space-between;
    align-items: stretch;
  }
  .newsletter-panel__body { grid-column: 1; grid-row: 1; gap: var(--sp-12); }
  /* The ratio gives the row its 473px at 1440. Stretching the photo in both
     axes lets it fill a taller row once the copy wraps, without the ratio
     widening it out of its track. */
  .newsletter-panel__media {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 437 / 473;
    justify-self: stretch;
    align-self: stretch;
  }
  /* Almarai sets Figma's first title line ~635px wide, 7px past the 628px
     column, so the title may run 12px into the gap to keep the two lines. */
  .newsletter-panel__title { margin-inline-end: -12px; }
}

/* ==========================================================================
   PRICING  (Figma: Desktop - 4)
   ========================================================================== */

/* Three plans of one height (370:641 / 284:1000); the middle one rides 24px
   higher (mt-0 vs mt-24), so it gives up 24px underneath instead. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: stretch;
}

/* Figma's `items-end` / `text-right` are the right-hand side: start in RTL */
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  background: var(--white);
  border: 1px solid rgba(179, 179, 179, .5);
  border-radius: 14px;
  padding: 44px var(--sp-8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  text-align: start;
  margin-block-start: var(--sp-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.plan--featured {
  margin-block: 0 var(--sp-6);
  border-color: rgba(226, 107, 51, .5);
  background: linear-gradient(140deg, #e67d4c 0.9%, #e26b33 50.7%, #e67d4c 99%);
  color: var(--gray-900);
}

.plan__head { display: flex; flex-direction: column; gap: var(--sp-4); }
.plan__name { font-size: var(--fs-h4); color: var(--gray-900); }
.plan--featured .plan__name { color: var(--gray-900); }

.plan__price {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: 1.4;
  color: var(--white);
}
.plan__price--text { color: var(--primary-500); }
.plan__price--accent { color: var(--primary-500); }
/* 642:944 / 560:418 — the currency and period sit low, beside the figure:
   20px text whose baseline lines up with the bottom of the digits. */
.plan__per {
  flex: none;
  align-self: flex-end;
  margin-block-end: 10px;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-p3);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Package explainer preview — Figma 642:948, on every plan card

   A poster, not an embed: the design has no play control and no iframe, just a
   dimmed still with a duration badge. The 1px padding over the navy background
   is what draws the hairline inner edge; the poster carries its own 0.9 opacity
   on top of the 30% wash, so it reads darker than the overlay alone.
   -------------------------------------------------------------------------- */

.plan-video {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-block-start: var(--sp-6);
}
.plan-video__frame {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 284 / 173;
  padding: 1px;
  background: #0f1c2c;
  border: 1px solid #e6e2d9;
  border-radius: 8px;
  overflow: clip;
  cursor: pointer;
}
.plan-video__frame > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 7px;
}
.plan-video__frame::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  background: rgba(15, 28, 44, .3);
}
/* Physical bottom-right in both directions, as drawn */
.plan-video__time {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .8);
  backdrop-filter: blur(2px);
  font-family: "Plus Jakarta Sans", var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .8px;
  color: var(--white);
}
.plan-video figcaption {
  font-size: var(--fs-p5);
  line-height: var(--lh-tight);
  color: #1c1c16;
}
.plan-video__player {
  display: block;
  inline-size: 100%;
  aspect-ratio: 284 / 173;   /* the poster's box, so the card does not jump */
  border: 0;
  border-radius: 8px;
  background: #000;
  object-fit: contain;
}

.plan__note {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-p3);
  color: var(--gray-500);
  line-height: var(--lh-tight);
}
.plan--featured .plan__note { color: var(--gray-900); }

/* Plan CTAs: a 24px Medium label, and the arrow points up and away (↗) where
   the other buttons' points up and back (↖) */
.plan__cta { --btn-fs: var(--fs-p2); font-weight: 500; }
.plan__cta .btn__icon { transform: rotate(45deg); }
.plan__cta:hover .btn__icon { transform: rotate(45deg) translateY(-3px); }

/* Featured card flips the CTA: white pill, orange label */
.plan__cta--invert { background: var(--white); color: var(--primary-500); }
.plan__cta--invert:hover { background: var(--gray-50); box-shadow: var(--shadow-md); }

.plan__features { display: flex; flex-direction: column; gap: var(--sp-6); }
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-p3);
  color: var(--gray-500);
  line-height: var(--lh-tight);
}
.plan__features img { flex: none; inline-size: 24px; block-size: 24px; margin-block-start: 2px; }
.plan--featured .plan__features li { color: var(--gray-900); }

/* Desktop: the cards drawn at Figma's full size read too large (user,
   2026-10-15: "zoom out"). Everything inside scales by --plan-k and the row
   narrows, so the three cards sit tighter, like the page at ~85%. Phones
   keep the drawn size. ltr.css reads --plan-k too, for the English
   "Contact Us" price and button. */
.plans { --plan-k: 1; }
@media (min-width: 1001px) {
  /* 1180px (was 1100px) with slimmer side padding: the cards gain ~8% in width
     and the explainer video ~10% (user, 2026-10-15). */
  .plans {
    --plan-k: .84;
    inline-size: 100%;
    max-inline-size: 1180px;
    margin-inline: auto;
    gap: var(--sp-5);
  }
  .plan { padding: 36px 24px; gap: 26px; }

  /* Every card is as tall as the tallest, and so is each part inside it: the
     header, button, video and feature list share one row track across the
     three cards, so a longer description (the custom plan's) no longer pushes
     its button and video below the others. Browsers without subgrid keep the
     plain equal-height flex cards. */
  @supports (grid-template-rows: subgrid) {
    .plans { grid-template-rows: repeat(4, auto); row-gap: 0; }
    .plan {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 26px;
    }
    .plan > * { align-self: start; }
  }
  .plan__head { gap: 12px; }
  .plan__name { font-size: calc(var(--fs-h4) * var(--plan-k)); }
  .plan__price { font-size: calc(var(--fs-h1) * var(--plan-k)); }
  .plan__per,
  .plan__note,
  .plan__features li { font-size: calc(var(--fs-p3) * var(--plan-k)); }
  .plan__per { margin-block-end: 8px; }
  .plan__cta { --btn-fs: calc(var(--fs-p2) * var(--plan-k)); white-space: normal; text-align: center; }
  .plan-video { margin-block-start: var(--sp-3); }
  .plan__features { gap: 18px; }
  .plan__features img { inline-size: 20px; block-size: 20px; }
}

@media (max-width: 1000px) {
  /* minmax(0, …), not 1fr: a bare 1fr track grows to its widest card's
     min-content, and the English "Request a Custom Package" button (no-wrap)
     pushed every card 23px past the right edge on phones. */
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan, .plan--featured { margin-block: 0; }
  .plan__cta { white-space: normal; text-align: center; }
}

/* --------------------------------------------------------------------------
   Service cards that stack on scroll.
   Figma pins each card with `sticky top-0`; the increasing top offset here
   leaves the previous card's edge visible as the next one slides over it.
   -------------------------------------------------------------------------- */

.svc-stack { display: flex; flex-direction: column; gap: var(--sp-6); }

/* Flat cards (192:4043 / 295:1151): the badge on the left, the copy and
   checklist flush right */
.svc-card {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-8));
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  background: var(--white);
  border-radius: 14px;
  padding: var(--sp-6);
  box-shadow: none;
}
.svc-stack > .svc-card:nth-child(2) { top: calc(var(--header-h) + var(--sp-8) + 24px); }
.svc-stack > .svc-card:nth-child(3) { top: calc(var(--header-h) + var(--sp-8) + 48px); }
/* No top bar below 901px (the phone tab bar is at the bottom), so the stack
   pins near the top of the screen instead of under a header that is gone. */
@media (max-width: 900px) {
  .svc-stack > .svc-card:nth-child(1) { top: var(--sp-4); }
  .svc-stack > .svc-card:nth-child(2) { top: calc(var(--sp-4) + 16px); }
  .svc-stack > .svc-card:nth-child(3) { top: calc(var(--sp-4) + 32px); }
}

.svc-card--dark { background: var(--surface-dark); color: var(--white); }

.svc-card__badge {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--r-pill);
  background: var(--primary-500);
  color: var(--white);
  transform: rotate(-45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.svc-card__badge svg { inline-size: 32px; block-size: 32px; }
.svc-card__badge--light { background: var(--white); color: var(--primary-500); }
.svc-card:hover .svc-card__badge { transform: rotate(-45deg) translate(3px, -3px); }

.svc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  flex: 1;
  min-inline-size: 0;
  text-align: start;
}
.svc-card__title { font-size: var(--fs-h3); color: #000; }
.svc-card__title--navy { color: var(--tertiary-500); }
.svc-card--dark .svc-card__title { color: var(--white); }
.svc-card--dark .svc-card__body > .stack > p { color: var(--gray-200); }

.svc-card__list { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.svc-card__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-p4);
  color: #000;
}
.svc-card__list img { flex: none; inline-size: 20px; block-size: 20px; }
.svc-card--dark .svc-card__list li { color: var(--white); }
/* A navy-titled card has a navy checklist too */
.svc-card:has(.svc-card__title--navy) .svc-card__list li { color: var(--tertiary-500); }

/* Figma draws the badge on the left, i.e. after the copy in this RTL row.
   Stacked on phones it stays above the title. */
@media (min-width: 721px) {
  .svc-card__badge { order: 1; }
}
@media (max-width: 720px) {
  /* The cards stack on phones too (user, 2026-10-14), pinned by the 900px
     rule above. A soft shadow separates a card from the one it slides over. */
  .svc-card { flex-direction: column; gap: var(--sp-4); box-shadow: 0 -6px 24px rgba(15, 23, 42, .08); }
  .svc-card__badge { inline-size: 44px; block-size: 44px; }
  .svc-card__badge svg { inline-size: 24px; block-size: 24px; }
}

/* --------------------------------------------------------------------------
   FAQ accordion — translucent white cards on the cream field
   -------------------------------------------------------------------------- */

.accordion--faq { gap: var(--sp-6); }
.accordion--faq .accordion__item {
  background: rgba(255, 255, 255, .9);
  border: 0;
  border-radius: var(--r-lg);
}
/* 37:699 puts the plus on the left and the question on the right; in RTL that
   is the natural order, so no row-reverse. */
.accordion--faq .accordion__trigger {
  justify-content: space-between;
  padding: var(--sp-8);
  font-size: var(--fs-h4);
  color: var(--tertiary-500);
}
.accordion--faq .accordion__icon { inline-size: 32px; block-size: 32px; background: transparent; color: var(--tertiary-500); }
.accordion--faq .accordion__icon::before { inline-size: 21.33px; }
.accordion--faq .accordion__icon::after { block-size: 21.33px; }
/* Open (37:711) is the same navy plus rotated into an x: not recoloured, and it
   keeps both arms. */
.accordion--faq .accordion__item.is-open .accordion__icon {
  background: transparent;
  color: var(--tertiary-500);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.accordion--faq .accordion__item.is-open .accordion__icon::after { transform: none; opacity: 1; }
.accordion--faq .accordion__panel > div {
  padding: 0 var(--sp-8) var(--sp-8);
  font-size: var(--fs-p3);
  color: var(--gray-500);
  line-height: var(--lh-tight);
  text-align: start;
}

@media (max-width: 640px) {
  .accordion--faq .accordion__trigger { padding: var(--sp-5); font-size: var(--fs-p2); }
  .accordion--faq .accordion__panel > div { padding: 0 var(--sp-5) var(--sp-5); }
}

/* --------------------------------------------------------------------------
   Pricing page only — hooked on .page--pricing (src/pricing.html).
   The plans, service cards and newsletter panel are shared with the home page
   and other pages, so the Desktop - 4 corrections are scoped here rather than
   made to the shared rules above.
   -------------------------------------------------------------------------- */

/* Rhythm at 1440: hero title 243px down the frame, 172px under the hero,
   200px between sections and above the footer, 44px under section titles. */
.page--pricing .page-hero--flush { padding-block: calc(var(--section-y) * 1.24) calc(var(--section-y) * .66); }
.page--pricing .section { padding-block: calc(var(--section-y) * .9); }
.page--pricing > .section:last-child { padding-block-end: calc(var(--section-y) * 1.81); }
.page--pricing .stack--12 { gap: 44px; }

/* Hero (284:832): 824px column, #0a0909 title, 24px buttons. The outlined
   button is Gray/400 here; the home hero's (267:326) stays navy, so this
   stays scoped. */
.page--pricing .page-hero__inner { max-inline-size: 824px; }
.page--pricing .page-hero h1 { color: #0a0909; }
.page--pricing .page-hero__actions { margin-block-start: 0; }
.page--pricing .page-hero__actions .btn { --btn-fs: var(--fs-p2); }
.page--pricing .page-hero__actions .btn--outline-navy { border-color: var(--gray-400); }

/* Section titles are H1-sized (64px) over a 24px lead in an 824px column */
.page--pricing .section-head { max-inline-size: 824px; gap: var(--sp-8); }
.page--pricing .section-head h2 { font-size: var(--fs-h1); }
.page--pricing .svc-head { gap: var(--sp-6); }
.page--pricing .svc-head h2 { color: var(--tertiary-500); }

/* Plans (284:1000). The shared plan rules above carry the layout; these are
   Desktop - 4's own row details. */
.page--pricing .plan--custom .plan__features li { align-items: center; }
.page--pricing .plan--custom .plan__features img { margin-block-start: 0; }
.page--pricing .plan__features .ltr { white-space: nowrap; }

@media (min-width: 1001px) {
  /* Figma narrows the featured card's last three rows to 268px, so they wrap */
  .page--pricing .plan--featured .plan__features li:nth-child(n+4) > span { max-inline-size: 11.6em; }
}

/* ==========================================================================
   CONTACT  (Figma: Desktop - 8)
   ========================================================================== */

/* 357:279 leaves 200px between the form card, the newsletter panel and the
   footer. The gap reaches 200 at 1440 and eases down to 64 on phones. */
.page--contact { --contact-gap: clamp(4rem, -0.25rem + 14.1667vw, 12.5rem); }

/* The title block sits 243px down the 1440 frame */
.contact-hero { padding-block: calc(var(--section-y) + 26px) var(--contact-gap); }

.contact-wrap {
  max-inline-size: 1036px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.contact-wrap .section-head { max-inline-size: 824px; gap: var(--sp-6); }
.contact-wrap h1 { color: #000; }

/* Figma sets this lead at 32px (P1), larger than the usual .lead */
.contact-lead {
  font-size: var(--fs-p1, clamp(1.25rem, 1rem + 1vw, 2rem));
  color: var(--gray-500);
  line-height: var(--lh-tight);
  max-inline-size: 24em;  /* keeps Figma's break after "ونخرج" with the wider fallback font */
}

.form-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 0.5rem + 5vw, 4.5rem);  /* 357:448 is flat — no shadow */
}
.form-card__form { display: flex; flex-direction: column; gap: var(--sp-8); }

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.form-card .field { gap: var(--sp-3); }
.form-card .field__label { font-size: var(--fs-p2); font-weight: var(--fw-regular); color: #000; }
/* 451:293 — "(اختياري)" is a 16px grey tag, 12px from its label */
.form-card .field__label:has(.opt) { display: flex; align-items: center; gap: var(--sp-3); }
.form-card .field__label .opt { font-size: var(--fs-p4); color: var(--gray-500); }

/* Figma spaces the rows 27 / 24 / 24, then the button 32 below them */
.contact-form__fields { display: flex; flex-direction: column; gap: 27px; }
.contact-form__group { display: flex; flex-direction: column; gap: var(--sp-6); }
.form-card .btn--lg { padding: var(--sp-3) var(--sp-4); box-shadow: none; }  /* 58px, flat */

/* Soft filled control — #f2f2f2, generous 24px radius.
   15 + 28 + 15 plus the 1px transparent border = the 60px box in 357:453. */
.input--soft,
.select--soft {
  background-color: #f2f2f2;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 15px var(--sp-4);
  font-size: var(--fs-p3);
  text-align: start;   /* placeholder and value hug the right edge (RTL start) */
}
.input--soft::placeholder { color: var(--gray-500); }
.input--soft:focus,
.select--soft:focus { background-color: var(--white); border-color: var(--primary-500); }

/* The chevron is the Figma glyph (.contact-select__icon) on the physical left,
   so the stock data-URI arrow is dropped and the clearance moves to the inline end. */
.select--soft {
  background-image: none;
  padding-inline-end: 56px;
}
/* Placeholder-ish state while the disabled first option is still selected */
.select--soft:has(option[value=""]:checked) { color: var(--gray-500); }

/* The URL field is LTR, so its start is the left edge — as in 437:581 */
.input--soft.ltr { text-align: start; }
/* Chrome renders type=tel LTR, which would put "رقـم الجوال" on the left (435:342 has it right) */
.input--soft[type="tel"] { text-align: right; }

.contact-select { position: relative; }
/* 437:569 — arrow-up-01 turned 180deg, 16px in from the left edge */
.contact-select__icon {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  inline-size: 24px;
  block-size: 24px;
  transform: translateY(-50%) rotate(180deg);
  pointer-events: none;
}

@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-wrap { gap: var(--sp-12); }
}

/* ==========================================================================
   BLOG  (Figma: Desktop - 7)
   ========================================================================== */

.blog-title { color: var(--gray-900); }

/* Figma 512:1589. The title sits 118px under the Figma header bar (page offset
   243px at 1440) and 44px above the grid; 200px then separate the grid, the
   newsletter panel and the footer (same fluid gap as contact / podcast). */
.page--blog { --blog-gap: clamp(4rem, -0.25rem + 14.1667vw, 12.5rem); }
.blog-list {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-8), 1.7214rem + 1.1429vw, 44px);
  padding-block-start: clamp(var(--sp-12), 0.22rem + 9.27vw, 137px);
}
/* The newsletter panel's section supplies the 200px down to the footer */
.page--blog > .newsletter-section { padding-block-start: var(--blog-gap); }

/* Cards (297:2109). "استراتيجيات الترويج خلال الأسبوع الأول" runs 0.4px over
   the 400px card in the fallback font; 4px of slack into the gutter keeps it
   on one line. */
.page--blog .post-card__title { margin-inline-end: -4px; }
/* 23.5em holds the excerpts' Figma line breaks in the wider fallback font */
.page--blog .post-card__excerpt { max-inline-size: 23.5em; }

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  block-size: 100%;
}

/* Figma ships an empty white 253px slot for the thumbnail */
.post-card__media {
  background: var(--white);
  border-radius: var(--r-md);
  aspect-ratio: 400 / 253;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.post-card__media > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.post-card:hover .post-card__media { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Figma's `items-end` / `text-right` are the right edge: start in RTL. Titles
   break greedily, as in Figma, rather than balanced. */
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  justify-content: space-between;
  flex: 1;
  text-align: start;
}
.post-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-p2);
  color: #000;
  line-height: var(--lh-tight);
  text-wrap: wrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.post-card:hover .post-card__title { color: var(--primary-500); }
.post-card__excerpt { font-size: var(--fs-p4); color: var(--gray-500); line-height: var(--lh-tight); }

/* Small orange "read more" affordance */
.read-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-p4);
  color: var(--primary-500);
  align-self: flex-start;
}
/* Figma's icon frame is the 33.94px bounds of a 24px box turned 45deg (a 50px
   link), holding the 16px arrow-up-02 asset at its 1.5px stroke (297:2109,
   483:1260). The home card's larger link (.read-link--lg) sizes its own. */
.read-link__icon {
  order: 1;          /* arrow trails the label — see .btn__icon */
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 33.94px;
  block-size: 33.94px;
  transform: rotate(-45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.read-link__icon img,
.read-link__icon svg { inline-size: 16px; block-size: 16px; }
.read-link:hover .read-link__icon { transform: rotate(-45deg) translate(2px, -2px); }

/* ==========================================================================
   SERVICE DETAIL  (Figma: Desktop - 5)
   ========================================================================== */

/* Full-bleed orange band. The section is a direct child of <main>, which is
   already viewport-wide, so it bleeds on its own — no 100vw offset needed.
   (An earlier 100vw + translateX trick pushed the band a full viewport to the
   side under dir="rtl" and made the page scroll horizontally.) */
.steps-band {
  position: relative;
  isolation: isolate;
  background: var(--primary-500);
  padding-block: 44px;   /* Figma 499:541: 44px of orange above the ribbon too */
  overflow: hidden;
}

/* White strip carrying the section title */
.steps-band__ribbon {
  background: var(--white);
  padding-block: var(--sp-3);
  margin-block-end: 50px;
}
.steps-band__title {
  font-size: var(--fs-h2);
  color: var(--tertiary-500);
  text-align: start;   /* right-hand side, as in Figma (justify-end in its LTR code) */
}

/* Dashed connector that snakes behind the cards (Figma 499:591): a 1440x115
   box whose stroke overhangs it by 2.5px, its bottom 77px above the band's. */
.steps-band__dash {
  position: absolute;
  inset-inline-start: -2.5px;
  inset-block-end: 74.5px;
  inline-size: calc(100% + 5px);
  max-inline-size: none;
  block-size: auto;
  z-index: -1;
  pointer-events: none;
}

.steps-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: stretch;
}

.step-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-6);
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.step-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-p2);
  color: #000;
}
.step-card__body {
  font-size: var(--fs-p4);
  font-weight: 500;
  color: var(--gray-500);
  line-height: var(--lh-tight);
}

@media (max-width: 1000px) {
  .steps-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-band__dash { display: none; }
}
@media (max-width: 560px) {
  .steps-band__grid { grid-template-columns: 1fr; }
}
@media (min-width: 1001px) {
  /* Figma fixes the row at 159px; the leftmost step keeps its content height,
     centred in the row. */
  .steps-band__grid { min-block-size: 159px; }
  .step-card:last-child { align-self: center; }
}

/* --------------------------------------------------------------------------
   Service page only — hooked on .page--service (src/services.html).
   The hero, glass cards, FAQ and photo CTA are shared components, so the
   Desktop - 5 corrections are scoped here.
   -------------------------------------------------------------------------- */

/* Rhythm at 1440: hero title 243px down the frame, 172px under the hero,
   200px between sections (the orange band included) and above the footer. */
.page--service .page-hero--flush { padding-block: calc(var(--section-y) * 1.24) calc(var(--section-y) * .66); }
.page--service .section { padding-block: calc(var(--section-y) * .9); }
.page--service > .section:last-child { padding-block-end: calc(var(--section-y) * 1.81); }
.page--service .steps-band { margin-block: calc(var(--section-y) * .91); }

/* Hero (296:1786): the title runs on one line (only the lead keeps Figma's
   854px column), 24px grey lead, 24px buttons, and the secondary button is
   filled navy rather than outlined. */
.page--service .page-hero__inner { max-inline-size: 1000px; }
.page--service .page-hero .lead {
  max-inline-size: 854px;
  margin-inline: auto;
}
.page--service .page-hero__actions .btn { --btn-fs: var(--fs-p2); }
.page--service .page-hero__actions .btn--dark { background: #2e366b; }
.page--service .page-hero__actions .btn--dark:hover { background: var(--tertiary-500); }

/* Feature cards (296:1548): H1-sized title 44px above the cards; card titles
   wrap greedily, as in Figma, rather than balanced. */
.page--service .svc-features > .container { gap: 44px; }
.page--service .svc-features h2 { font-size: var(--fs-h1); }
.page--service .svc-features .card--glass h3 { color: #000; text-wrap: wrap; }

/* ==========================================================================
   PODCAST LISTING  (Figma: Desktop - 10)
   ========================================================================== */

.pod-wrap { display: flex; flex-direction: column; gap: 72px; }
.pod-wrap h1 { color: var(--gray-900); }

/* 479:3258 puts the title 243px down the 1440 frame and the last card row
   200px above the footer; the gap eases down to 64 on phones. */
.page--podcast { --pod-gap: clamp(4rem, -0.25rem + 14.1667vw, 12.5rem); }
.pod-section { padding-block: calc(var(--section-y) + 26px) var(--pod-gap); }

/* Cover sits on the inline-start edge (right in RTL), text fills the rest;
   the host / watch row runs under both, 16px down (479:3541, 480:3657) */
.ep-card {
  display: grid;
  grid-template-columns: 182px minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-6);
  align-items: start;
  background: var(--white);
  border-radius: 12px;
  padding: var(--sp-4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ep-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.ep-card__cover {
  display: block;
  inline-size: 182px;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--white);
}
.ep-card__cover img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.ep-card:hover .ep-card__cover img { transform: scale(1.06); }

/* `display: contents` lifts the copy (and, on the listing, the host / watch
   row nested with it) onto the card's own grid, so both markups lay out the
   same way. Figma's `items-end` / `text-right` are the start side in RTL. */
.ep-card__main { display: contents; text-align: start; }
/* Cover, copy, then the host/watch row across the bottom — at every width,
   since the phone frames keep the card a row too. */
.ep-card__cover { grid-column: 1; grid-row: 1; }  /* right edge in RTL */
.ep-card__text { grid-column: 2; grid-row: 1; }
.ep-card__foot { grid-column: 1 / -1; grid-row: 2; }
.ep-card__text { display: flex; flex-direction: column; gap: var(--sp-1); }
/* 479:3545 — episode number at the start of the row, date at the end */
.ep-card__num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-p4);
  color: var(--primary-500);
}
.ep-card__date { color: var(--text-muted); font-weight: var(--fw-regular); }
/* Figma sets the copy in a 352px measure. With the wider fallback fonts the
   title needs the whole column, breaking greedily as the design does, and the
   description 24em (336px). */
.ep-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: #000;
  line-height: var(--lh-tight);
  text-wrap: wrap;
}
.ep-card__title a { transition: color var(--dur-fast) var(--ease-out); }
.ep-card__title a:hover { color: var(--primary-500); }
/* 0.5px #4d4d4d hairline, 15px under the title and 10px over the description
   (less the 4px column gap) */
.ep-card__rule {
  border: 0;
  block-size: 1px;
  background: rgba(77, 77, 77, .5);
  margin-block: 11px 6px;
}
.ep-card__desc { font-size: 14px; color: var(--gray-500); line-height: var(--lh-tight); max-inline-size: 24em; }

.ep-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.ep-card__host { font-size: var(--fs-p5); color: #4d4d4d; }
/* "مشاهدة" sits on the right, the host on the left */
.ep-card__watch {
  order: -1;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-p4);
  color: var(--primary-500);
  padding: var(--sp-2);
  border-radius: var(--r-pill);
}
.ep-card__watch:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The phone frames keep this card a row — a 132px square cover on the start
   side, the text beside it (Figma "Frame 324", 318x132) — rather than stacking. */
@media (max-width: 700px) {
  .ep-card { grid-template-columns: 132px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); }
  .ep-card__cover { inline-size: 132px; aspect-ratio: 1; }
  .ep-card__title { font-size: var(--fs-p3); }
  .ep-card__desc {
    font-size: var(--fs-p5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ep-card__rule { display: none; }
}
@media (max-width: 380px) {
  .ep-card { grid-template-columns: 104px minmax(0, 1fr); }
  .ep-card__cover { inline-size: 104px; }
}

/* Two cards side by side leave the copy column too narrow below ~1140px */
@media (max-width: 1140px) {
  .page--podcast #ep-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   ARTICLE  (Figma: Desktop - 11)
   ========================================================================== */

.article__head { display: flex; flex-direction: column; gap: var(--sp-6); }
.article__title-block { max-inline-size: 830px; display: flex; flex-direction: column; gap: var(--sp-6); text-align: end; }
.article__title-block h1 { color: var(--gray-900); }

.article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

/* Small outlined action chip — "مشاركة" / "نسخ الرابط" */
.share-group { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;  /* + the 1px border = Figma's 7px 13px box (36px tall) */
  background: var(--white);
  border: 1px solid #e6e2d9;
  border-radius: 2px;
  font-size: var(--fs-p4);
  color: #1c1c16;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--primary-500); background: var(--gray-50); }
.chip img { flex: none; }

/* Article header — Figma 482:1153: title block on the right, then byline (right)
   and share chips (left). Same 243px page offset as the episode header. */
.ar-head { padding-block: clamp(var(--sp-12), 0.22rem + 9.27vw, 137px) var(--sp-12); }
/* Figma's `items-end` / `text-right` are the right-hand side, i.e. start in RTL */
.ar-head .article__title-block { max-inline-size: none; align-items: flex-start; text-align: start; }
/* Almarai sets Figma's first line ("…الحقيقية") 940px wide, past the 830px block,
   and would need 1037px to take the next word: 15.3em keeps the two-line break,
   and greedy wrapping (not balance) keeps it where Figma has it. */
.ar-head h1 { color: #000; max-inline-size: 15.3em; text-wrap: wrap; }
.ar-head .lead { font-size: var(--fs-p2); line-height: var(--lh-tight); color: var(--gray-500); max-inline-size: 830px; }

/* Avatar first = outermost on the right; text column top-aligned beside it */
.byline { display: flex; align-items: flex-start; gap: var(--sp-3); }
.byline__text { display: flex; flex-direction: column; gap: 6px; text-align: start; }
.byline__author { font-size: var(--fs-p3); line-height: var(--lh-tight); color: #1c1c16; }
.byline__date { font-size: var(--fs-p4); line-height: var(--lh-tight); color: #5e5e5b; }
.byline__avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding-block-end: 1px;  /* Figma: 5.5px over / 6.5px under the 24px line */
  border-radius: 12px;
  background: #0f1c2c;
  color: #fdf9f0;
  font-weight: var(--fw-bold);
  font-size: 15px;
  line-height: 24px;
}

/* --------------------------------------------------------------------------
   Video player — navy frame, poster, orange play trigger
   -------------------------------------------------------------------------- */

.player {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #0f1c2c;
  border: 1px solid #0f1c2c;
  aspect-ratio: 16 / 9;
}
/* Figma drops the photo and its gradient 8px below the frame's top edge, so a
   thin navy band shows above the picture; the photo sits at 90% opacity. */
.player__poster {
  position: absolute;
  inset: 8px 0 0;
  inline-size: 100%;
  block-size: calc(100% - 8px);
  object-fit: cover;
  opacity: .9;
}
.player__scrim {
  position: absolute;
  inset: 8px 0 0;
  background: linear-gradient(to top, #0f1c2c, rgba(15, 28, 44, .4) 50%, rgba(15, 28, 44, 0));
}
.player__badge {
  position: absolute;
  inset-block-start: var(--sp-6);
  inset-inline-start: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 12px;  /* + the 1px border = Figma's 24px-tall box */
  border-radius: 2px;
  background: rgba(15, 28, 44, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(116, 119, 125, .3);
  color: #fdf9f0;
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 14px;
  letter-spacing: .8px;
  direction: ltr;
}
.player__badge i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #e45500; }

.player__play {
  position: absolute;
  inset-block-start: calc(50% + 4px);  /* centred on the photo, below the 8px band */
  /* Centring uses physical left + translate on purpose: translate is
     physical, so pairing it with inset-inline-start lands the box a
     full width off centre in one of the two directions. */
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  inline-size: 96px;
  block-size: 96px;
  border-radius: 12px;
  background: #e45500;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.player__play:hover { transform: scale(1.08); background: #cf4d00; }
/* Figma pads the button 26px left / 22px right: the triangle sits 2px right of
   centre. That is optical, so it is physical left, not inline-start. */
.player__play img { inline-size: 22px; block-size: 28px; margin-left: 4px; }
/* --------------------------------------------------------------------------
   Docked control bar — poster-state decoration (see src/_player-bar.html).
   Laid out LTR like the design and like every media transport; measurements
   come from the 1248x702 Figma frame.
   -------------------------------------------------------------------------- */

.player-bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  direction: ltr;
  pointer-events: none;
  padding: var(--sp-8) 24px var(--sp-4);
  background: linear-gradient(to top, #0f1c2c, rgba(15, 28, 44, .9) 50%, rgba(15, 28, 44, 0));
}

/* Scrubber: 19% played, 28% buffered, the rest track */
.player-bar__scrub {
  position: relative;
  block-size: 6px;
  border-radius: var(--r-pill);
  background: rgba(116, 119, 125, .4);
}
.player-bar__buffer,
.player-bar__played {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: var(--r-pill);
}
.player-bar__buffer { inline-size: 28%; background: rgba(255, 255, 255, .2); }
.player-bar__played { inline-size: 19%; background: #e45500; }
.player-bar__knob {
  position: absolute;
  inset-inline-end: -7px;
  inset-block-start: 50%;
  inline-size: 14px;
  block-size: 14px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--white);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.player:hover .player-bar__knob { opacity: 1; }

.player-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-start: var(--sp-2);
  min-block-size: 20px;
}
.player-bar__group { display: flex; align-items: center; gap: var(--sp-4); }
.player-bar__time {
  color: #c8c6c2;
  font-family: "Liberation Mono", Menlo, Consolas, "Courier New", monospace;  /* Figma: Liberation Mono Bold */
  font-weight: var(--fw-bold);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .6px;
  white-space: pre;
}
.player-bar__slash { color: #74777d; }

.player-bar__volume { display: flex; align-items: center; gap: var(--sp-2); }
.player-bar__vol {
  position: relative;
  inline-size: 64px;
  block-size: 4px;
  border-radius: var(--r-pill);
  background: rgba(116, 119, 125, .5);
}
.player-bar__vol-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 80%;
  border-radius: var(--r-pill);
  background: var(--white);
}

.player-bar__speed {
  padding: 2px 8px;
  border: 1px solid rgba(116, 119, 125, .4);
  border-radius: 2px;
  color: #c8c6c2;
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 14px;
  letter-spacing: .8px;
}

@media (max-width: 640px) {
  .player-bar { padding: var(--sp-6) var(--sp-3) var(--sp-3); }
  .player-bar__volume,
  .player-bar__speed { display: none; }
  /* On a ~200px-tall phone frame the 96px trigger would sit on the scrubber */
  .player__play { inline-size: 56px; block-size: 56px; border-radius: 10px; }
  .player__play img { inline-size: 14px; block-size: 18px; margin-left: 3px; }
}

/* The poster/scrim/badge are dropped once a real <video> takes over */
.player.is-playing .player__poster,
.player.is-playing .player__scrim,
.player.is-playing .player__badge,
.player.is-playing .player-bar,
.player.is-playing .player__play { display: none; }
/* The YouTube iframe or the <video> that replaces the poster (js/main.js).
   It fills the 16:9 frame at every width; contain, so nothing of a video in
   another ratio is cropped. */
.player__media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: #000;
}

/* A plain video frame: the case-study hero (296:1863 drew a photo) and the
   service-page heroes (user, 2026-10-14). Square corners, no podcast-style 8px
   navy band or recording badge; the poster is the video's own thumbnail. */
.player--plain {
  border: 0;
  border-radius: 0;
}
.player--plain .player__poster,
.player--plain .player__scrim { inset: 0; block-size: 100%; opacity: 1; }
.player--plain .player__scrim {
  background: linear-gradient(to top, rgba(15, 28, 44, .45), rgba(15, 28, 44, 0) 45%);
}
.player--plain .player__play { inset-block-start: 50%; }

/* Service pages: the video closes the hero, centred under the buttons and
   capped so it never towers over the heading on a wide screen. */
.svc-hero-video {
  max-inline-size: 1040px;
  margin-inline: auto;
  margin-block-start: clamp(var(--sp-8), 1rem + 3vw, var(--sp-14));
  --enter-delay: 440ms;   /* after the heading, lead and buttons */
}
@media (max-width: 700px) {
  .player--plain .player__play { inline-size: 64px; block-size: 64px; border-radius: 10px; }
  .player--plain .player__play img { inline-size: 16px; block-size: 20px; margin-left: 3px; }
}

/* --------------------------------------------------------------------------
   Article body — Figma 517:1593. The contents card sits beside the lead
   paragraph only; the numbered sections below run the full width.
   Rhythm at 1440: 48 under the player, 72 to the sections, 96 between them,
   104 between the blocks after, 200 down to the footer.
   -------------------------------------------------------------------------- */

.page--article {
  --ar-gap: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --ar-sec-gap: clamp(3rem, 1.5rem + 5vw, 6rem);
}
.ar-intro { padding-block-start: var(--sp-12); }
/* RTL grid: the paragraph is first, so it takes the right; the 400px card the left */
.ar-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--sp-6);
  align-items: start;
}
.ar-copy { font-size: var(--fs-p2); line-height: var(--lh-tight); color: #44474c; }

/* Figma "Table of Contents & Timestamps" (479:3097 / 482:1161): a white card
   with a slate hairline; the title on the right, the list glyph on the left. */
.toc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--white);
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: var(--sp-6);
}
.toc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.toc__head img { flex: none; inline-size: 12px; block-size: 10.667px; }
.toc__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-p3);
  line-height: var(--lh-tight);
  color: var(--gray-900);
}
/* Article contents (482:1191): number then title from the right; the current
   entry sits on a cream tab */
.toc__nav { display: flex; flex-direction: column; gap: var(--sp-2); }
.toc__nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: 2px;
  font-size: var(--fs-p4);
  line-height: var(--lh-tight);
  color: var(--gray-500);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.toc__nav a:hover { color: var(--tertiary-500); }
.toc__nav a.is-active { background: var(--secondary-500); color: var(--primary-500); }
.toc__num { flex: none; }

/* Numbered sections (482:1224): navy heading over a slate rule, 32px to the copy */
.ar-body { padding-block-start: clamp(2.5rem, 1.5rem + 3.3333vw, 4.5rem); }  /* 72 at 1440 */
.ar-sections { display: flex; flex-direction: column; gap: var(--ar-sec-gap); }
.ar-sec { display: flex; flex-direction: column; gap: var(--sp-8); }
.ar-sec__title {
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--gray-400);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--tertiary-500);
  text-wrap: wrap;
}
.ar-sec__num { margin-inline-end: .25em; }  /* Figma sets two spaces after the number */

/* Image break (482:1242): Figma crops the 3:2 photo to its lower 1248x511 band */
.ar-figure { display: flex; flex-direction: column; gap: var(--sp-3); }
.ar-figure img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1248 / 511;
  object-fit: cover;
  object-position: center bottom;
  background: var(--white);
  border: 1px solid #e6e2d9;
  border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.ar-figure figcaption { font-size: var(--fs-p4); line-height: var(--lh-tight); color: var(--gray-500); text-align: center; }

/* Closing share block (482:1225): a sand panel, the question on the right and
   larger navy chips on the left */
.ar-share { padding-block-start: var(--ar-gap); }
.share-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-6);
  background: #e7dcc9;
  border: 1px solid var(--secondary-500);
  border-radius: var(--r-sm);
}
.share-block__text { display: flex; flex-direction: column; gap: var(--sp-3); }
.share-block__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--tertiary-500);
}
.share-block__sub { font-size: var(--fs-p4); line-height: var(--lh-tight); color: var(--gray-500); }
/* 54px chips: 13/17 in Figma, less the 1px border */
.share-block .chip { padding: var(--sp-3) var(--sp-4); border-color: var(--secondary-500); font-size: var(--fs-p3); line-height: var(--lh-tight); color: var(--tertiary-500); }

/* Related articles (483:1260): the shared .post-card and .read-link */
.ar-related { padding-block: var(--ar-gap); }
.ar-related__inner { display: flex; flex-direction: column; gap: var(--sp-8); }
.ar-title { font-size: var(--fs-h3); line-height: var(--lh-tight); color: #1c1c16; }

@media (max-width: 900px) {
  .ar-intro__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ar-figure img { aspect-ratio: 16 / 10; }  /* the 1248x511 band is a sliver on a phone */
}

/* ==========================================================================
   PODCAST EPISODE  (Figma: Desktop - 9)
   ========================================================================== */

/* Header block — Figma 479:3044. The breadcrumb sits 118px under the Figma
   header bar; this lands it on the same page offset (243px) at 1440. */
.ep-head { padding-block: clamp(var(--sp-12), 0.22rem + 9.27vw, 137px) var(--sp-12); }
.ep-head .article__head { gap: var(--sp-8); }
/* Figma's `items-end` / `text-right` are the right-hand side, i.e. start in RTL */
.ep-head .article__title-block { max-inline-size: none; gap: var(--sp-2); align-items: flex-start; text-align: start; }
.ep-head h1 { color: #000; margin-block-end: var(--sp-4); }  /* 8px gap + 16 = Figma's 24 */
.ep-head .lead { font-size: var(--fs-p3); line-height: var(--lh-tight); color: var(--gray-500); }

.ep-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-p2);
  line-height: var(--lh-tight);
}
.ep-crumbs__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: #5e5e5b;
  transition: color var(--dur-fast) var(--ease-out);
}
.ep-crumbs__link:hover { color: var(--primary-500); }
.ep-crumbs__icon { flex: none; display: grid; place-items: center; inline-size: 24px; block-size: 24px; }
/* The exported glyph points left; Figma mirrors it (rotate 180 + flip-y) */
.ep-crumbs__icon img { inline-size: 10.667px; block-size: 10.667px; transform: scaleX(-1); }
.ep-crumbs__sep { font-size: var(--fs-p5); font-weight: 600; line-height: 16px; letter-spacing: .48px; color: #c4c6cc; }
.ep-crumbs__current { color: #1c1c16; }

.ep-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--white);
  border-radius: 4px;
  color: #e45500;
  font-size: var(--fs-p4);
  line-height: var(--lh-tight);
}
.ep-badge i { flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }

.ep-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--fs-p4);
  line-height: var(--lh-tight);
  color: #5e5e5b;
}
.ep-facts__item { display: inline-flex; align-items: center; gap: 6px; }
.ep-facts__item--strong { color: #1c1c16; }
.ep-facts__item img { flex: none; }

/* Vertical rhythm of Figma Frame 277: blocks sit 104px apart at 1440 */
.page--episode { --ep-gap: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.ep-block { padding-block-start: var(--ep-gap); }
.ep-block--lead { padding-block-start: var(--sp-12); }  /* 48px under the player */

.ep-title { font-size: var(--fs-h3); line-height: var(--lh-tight); color: #1c1c16; }

/* About + chapters — Figma 479:3240. RTL grid: the text column is first, so it
   takes the right-hand side; the 400px chapters card sits on the left. */
.ep-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--sp-6);
  align-items: start;
}
.ep-about__text,
.ep-about__copy { display: flex; flex-direction: column; gap: var(--sp-6); }
.ep-about__copy p { font-size: var(--fs-p2); line-height: var(--lh-tight); color: #44474c; }

/* Chapter rows: title on the right, time chip on the left, hairline between */
.chapters { display: flex; flex-direction: column; }
.chapters li + li { border-block-start: 1px solid #cbd5e1; }
.chapters button {
  inline-size: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;  /* also clears the UA's 6px inline button padding */
  font-size: var(--fs-p4);
  line-height: var(--lh-tight);
  color: var(--gray-900);
  text-align: start;
  transition: color var(--dur-fast) var(--ease-out);
}
.chapters button:hover { color: var(--primary-500); }
.chapters__time {
  flex: none;
  padding: 2px var(--sp-2);
  border-radius: 2px;
  background: var(--secondary-500);
  color: var(--gray-500);
  font-family: "Liberation Mono", Menlo, Consolas, "Courier New", monospace;  /* Figma: Liberation Mono Bold */
  font-weight: var(--fw-bold);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .8px;
  direction: ltr;
}
.chapters .is-active .chapters__time { color: var(--primary-500); }

/* Guests — Figma 479:3242: heading across, one 423px card on the right */
.ep-guests { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.ep-guests .ep-title { align-self: stretch; }

.guest-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  inline-size: 423px;
  max-inline-size: 100%;
  background: var(--white);
  border: 1px solid #e6e2d9;
  border-radius: 4px;
  padding: var(--sp-6);
}
/* Photo first = on the right, name block beside it */
.guest-card__top { display: flex; align-items: flex-start; gap: var(--sp-4); }
.guest-card__photo {
  flex: none;
  inline-size: 64px;
  block-size: 64px;
  border: 2px solid #e6e2d9;
  border-radius: 12px;
  object-fit: cover;
  background: var(--gray-100);
}
.guest-card__id { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.guest-card__name { font-weight: var(--fw-bold); font-size: var(--fs-p4); line-height: var(--lh-tight); color: #1c1c16; }
.guest-card__role { font-size: var(--fs-p5); line-height: var(--lh-tight); color: #5e5e5b; }
/* The English bio is LTR, but Figma sets its ragged lines flush right: `end` */
.guest-card__bio { align-self: stretch; font-size: var(--fs-p4); line-height: var(--lh-tight); color: #44474c; text-align: end; }

/* Related episodes — Figma 479:3226. The card itself is the shared .ep-card;
   only the cover radius differs here (5.34px against the listing's 8px). */
.ep-related { padding-block: var(--ep-gap); }
.ep-related__inner { display: flex; flex-direction: column; gap: var(--sp-8); }
.ep-related .ep-card__cover { border-radius: 5.34px; }

@media (max-width: 1140px) {
  .ep-related .grid--2 { grid-template-columns: minmax(0, 1fr); }  /* copy column gets too narrow side by side */
}

/* The newsletter panel follows 104px under the related block (its padding);
   the panel's own section supplies the 200px down to the footer. */

@media (max-width: 900px) {
  .ep-about { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   CASE STUDY  (Figma: Desktop - 6)
   ========================================================================== */

/* Figma Frame 211 stacks every block of the study 72px apart, so the page is
   one column with a single fluid gap instead of padded sections. The title
   sits 118px under the Figma header bar: page offset 243px at 1440. */
.case-page {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-10), 1.5rem + 3.3333vw, 72px);
  padding-block-start: clamp(var(--sp-12), 0.22rem + 9.27vw, 137px);
}

/* Title + facts — Figma 296:1892. Its `items-end` / `text-right` mean the
   right-hand side, which is inline-start on this RTL page. */
.case-head {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-6), 1rem + 1.6667vw, var(--sp-10));
  align-items: flex-start;
}
/* Figma breaks after "لمقهى". Almarai runs ~7% wider than thmanyah, so the
   measure is 14em rather than Figma's 824px, and no balancing. */
.case-title { max-inline-size: 14em; color: var(--gray-900); text-align: start; text-wrap: wrap; }

/* Client / sector / service / year. Both Figma rows share a 318px right-hand
   column and a 249px second one, each right-aligned. */
.case-facts {
  display: grid;
  grid-template-columns: minmax(0, 318fr) minmax(0, 249fr);
  row-gap: var(--sp-8);
  inline-size: min(100%, 567px);
  margin: 0;
}
.case-fact { display: flex; flex-direction: column; gap: var(--sp-4); }
.case-fact dt {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-p1);
  color: #000;
}
.case-fact dd { margin: 0; font-size: var(--fs-p2); color: #000; }

/* Full-width project shot — Figma 296:1863 / 296:1889 are square-cornered */
.case-shot {
  overflow: hidden;
  background: var(--white);
  aspect-ratio: 1248 / 715;
}
.case-shot img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Challenge / solution — Figma 296:1869 / 296:1873: a 1036px column on the
   right (inline-start), 32px from heading to copy */
.case-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  inline-size: 100%;
  max-inline-size: 1036px;
  align-self: flex-start;
}
.case-block h2 { font-size: var(--fs-h1); color: var(--gray-900); }
/* 30em keeps Figma's break after "واهتمام" in the wider fallback font */
.case-block p { font-size: var(--fs-p1); color: var(--gray-500); line-height: var(--lh-tight); max-inline-size: 30em; }
/* Deliverables — Figma 296:1888 runs the full 1248px, 24px under the heading */
.case-block--list { max-inline-size: none; gap: var(--sp-6); }

/* CTA — Figma 512:1574 sits 200px under the closing shot and above the footer */
.case-cta { padding-block: clamp(var(--sp-20), 1.25rem + 12.5vw, 200px); }

/* Paired gallery slots — empty white frames in the Figma file */
.case-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.case-duo__slot {
  background: var(--white);
  border-radius: var(--r-lg);
  aspect-ratio: 1;
  overflow: hidden;
}
.case-duo__slot img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Deliverables — rows split by hairlines */
.case-list { display: flex; flex-direction: column; }
.case-list li {
  padding: var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--gray-400);
  font-size: var(--fs-p1);
  color: var(--gray-500);
  transition: color var(--dur-fast) var(--ease-out), padding-inline-end var(--dur-fast) var(--ease-out);
}
.case-list li:last-child { border-bottom: 0; }
.case-list li:hover { color: var(--tertiary-500); padding-inline-end: var(--sp-6); }

@media (max-width: 640px) {
  .case-title { text-wrap: balance; }  /* the desktop break can't hold here */
  .case-facts { grid-template-columns: 1fr; gap: var(--sp-6); }
  .case-duo { grid-template-columns: 1fr; }
  .case-block h2 { font-size: var(--fs-h3); }
  .case-block p, .case-list li { font-size: var(--fs-p3); }
}


/* ==========================================================================
   HOME  (Figma: Desktop - 1, 192:3954)
   ========================================================================== */

.page--home {
  padding-block-start: 0;
  margin-block-start: calc((var(--header-h) + var(--sp-12)) * -1);
}

/* --------------------------------------------------------------------------
   Hero — cream field, centred statement, warm glow at the base.
   Figma draws the glow with an ellipse (267:321) and three hairlines
   (Line 3 / 4 / 5); both are cheaper and more fluid as CSS.
   -------------------------------------------------------------------------- */

/* Two ratios the hero guides and the stats band both measure from, so their
   edges stay locked together. At the 1440 reference the band's rest top edge
   sits 106px above the hero's bottom and travels 70px down over the timeline. */
.page--home {
  --band-top-gap: 7.361vw;  /* 106 / 1440 */
  --band-rise: 4.861vw;     /*  70 / 1440 */
  --band-side: 14.028%;     /* 202 / 1440 */
}

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-block-size: min(100svh, 900px);
  /* The stats band's strip rests (--band-top-gap + --band-rise) above this
     box's bottom edge. Reserve that plus clearance: on a short window the
     hero shrinks to its content, and without it the strip lands on the buttons. */
  padding-block: calc(var(--header-h) + var(--sp-20))
                 calc(var(--band-top-gap, 0px) + var(--band-rise, 0px) + var(--sp-12));
  background: var(--surface-cream);
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  /* Centring uses physical left + translate on purpose: translate is
     physical, so pairing it with inset-inline-start lands the box a
     full width off centre in one of the two directions. */
  left: 50%;
  inset-block-end: -22%;
  z-index: -1;
  inline-size: min(900px, 88%);
  aspect-ratio: 900 / 441;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
              rgba(229, 105, 50, .58) 0%,
              rgba(229, 105, 50, .30) 42%,
              rgba(229, 105, 50, 0) 72%);
  filter: blur(46px);
  pointer-events: none;
}

/* Hairline guides. These frame the stats strip at the start of the band
   timeline and then travel with its edges — the verticals out to the page
   edges, the horizontal down 70px with the band's top edge. The rest state
   below is where the timeline leaves them; css/animations.css holds the
   travel, and .stats-photo supplies the shared 14.028% / 4.861% ratios. */
.hero__rule { position: absolute; z-index: -1; background: rgba(30, 41, 59, .12); pointer-events: none; }
.hero__rule--v { inline-size: 1px; inset-block: 0; }
.hero__rule--v1 { inset-inline-start: 0; }
.hero__rule--v2 { inset-inline-end: 0; }
.hero__rule--h { block-size: 1px; inset-inline: 0; inset-block-end: var(--band-top-gap); }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
  /* Wider than the 930px the headline used to sit in, so the two-line break
     holds even on machines whose Arabic fallback runs wide. */
  max-inline-size: calc(1040px + var(--gutter) * 2);
}
/* Figma sets this at 64px, but that is with thmanyah serif display; the
   fallback Arabic faces run wider and tip it onto a third line. It also sizes
   off the window height (below), so a short laptop window still shows the
   photo strip under the buttons. 46px at 1440x900. */
/* 19em keeps the two-line break at any size: the line runs ~28em in the
   narrowest fallback and ~34em in the widest, so it never fits on one and
   never needs three. */
.hero__title { font-size: clamp(1.75rem, min(3.2vw, 6.6vh), 2.875rem); max-inline-size: 19em; color: #000; }
.hero__lead {
  font-size: var(--fs-p2);
  color: var(--gray-800);
  line-height: var(--lh-tight);
  max-inline-size: 62ch;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: var(--sp-4);
}

/* Desktop windows are often short — a laptop with the bookmarks bar open is
   about 600px tall. The strip only shows in full once the hero fits in the
   window, so on desktop the copy, spacing and buttons also scale with the
   window height and tighten up when it is short. Tablets and phones keep the
   width-based sizes. */
@media (min-width: 901px) {
  .hero {
    /* The hero slides up under the floating header: its bar ends --header-h +
       72px below the hero's top edge. Clear that, plus a gap that shrinks on
       short windows; below, reserve the strip's overlap plus clearance. */
    padding-block: calc(var(--header-h) + 72px + clamp(var(--sp-4), 4vh, var(--sp-12)))
                   calc(var(--band-top-gap, 0px) + var(--band-rise, 0px) + clamp(var(--sp-4), 3vh, var(--sp-12)));
  }
  .hero__inner { gap: clamp(var(--sp-3), 2.6vh, var(--sp-6)); }
  /* em, not ch: keeps the lead to two lines as it shrinks with the window. */
  .hero__lead { font-size: clamp(1rem, min(1.45vw, 3vh), 1.25rem); max-inline-size: 42em; }
  .hero__actions { margin-block-start: clamp(0px, 1.2vh, var(--sp-4)); }
  .hero__actions .btn { --btn-fs: clamp(1rem, min(1.25vw, 2.6vh), 1.125rem); }
}

/* --------------------------------------------------------------------------
   Numbers over the food photo (Component 7)
   -------------------------------------------------------------------------- */

.stats-photo {
  position: relative;
  z-index: 1;
  padding-block: 0;
  /* Until the band has grown, the rest of this box is bare page. Cream keeps
     it continuous with the hero above, so the strip reads as sitting on the
     hero rather than on a white gap. The finished band covers it. */
  background: var(--surface-cream);
  margin-block-start: calc(var(--band-top-gap) * -1);

  /* Timeline geometry. At the 1440 reference the strip starts 1036x176 at
     202,724: 14.028% in from each side and 176/1440 = 12.222% of the frame
     width tall. --strip-hide is what is left of the band below it, so it is
     restated per breakpoint as the band's aspect changes; the side inset and
     the rise are shares of the frame width and hold everywhere. */
  --strip-side: var(--band-side);
  --strip-hide: 67.53%;               /* 1 - 12.222/37.639 */
  --band-lift: calc(var(--band-rise) * -1);
  --photo-start: .8;                  /* the photo's zoom inside the strip at t=0 */
}

/* Figma "Line 6" (329:1764). It starts on the strip's bottom edge and slides
   down 364px (214 of its own plus the 150 Component 7 travels), disappearing
   under the band as that grows over it. */
.stats-photo__rule {
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 1px;
  background: rgba(30, 41, 59, .12);
  pointer-events: none;
}

.stats-photo__frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 1440 / 542;
}

/* The food photo is not cover-fitted. The timeline ends with Figma's 1440x810
   layer grown to 1653x930 at scale .93 and shifted, which lands as a
   1537.6x865.4 box at -50,-260 inside the finished 1440x542 band. */
.stats-photo__frame > .stats-photo__bg {
  position: absolute;
  inset: auto;
  inset-inline-end: -3.47%;    /*  -50 / 1440 */
  inset-block-start: -47.86%;  /* -260 /  543 */
  inline-size: 106.78%;        /* 1537.6 / 1440 */
  block-size: auto;            /* the source is 1440:810, so this is exact */
  max-inline-size: none;
}

/* --------------------------------------------------------------------------
   The photographer and his flash — Figma "image animation" (316:337).

   Figma masks the group to the band, which cuts him down to a camera, two
   hands and a forearm. Here he is shown whole instead: the box is the full
   height of the band and takes its width from the cut-out's own 994:1024
   ratio, pinned to the physical start edge (`inset-inline-end` is the left
   under dir="rtl"). Keeping the flash inside this box rather than positioning
   it against the frame is what keeps it on his lens as the band changes ratio
   at the breakpoints below.
   -------------------------------------------------------------------------- */

/* 107% of the band, anchored to its floor — the same ratio Figma places him at
   (579 in a 541 band). The source photo is cut off at its own top and bottom
   edges, so sizing him to exactly the band height puts those cuts right on the
   boundary and they read as a flat slice through his cap. Overflowing instead
   pushes both cut edges outside the band, where the frame clips them. */
.stats-photo__shot {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  /* The entrance ends on a 0.83 -> 1 scale. Around the default centre that
     pulls his left edge inwards by ~11px on the last frames, which uncovers
     the photo's own cut edge as a straight line over the food. Scaling from
     the bottom-left corner keeps that edge pinned to the band's edge. */
  transform-origin: 0 100%;
  block-size: 107%;
  aspect-ratio: 994 / 1024;
  z-index: 2;
  pointer-events: none;
}

/* Two classes so this outranks any `.stats-photo__frame > img` sizing. */
.stats-photo__shot > .stats-photo__shooter {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
  object-position: bottom left;
}

/* Centred on the lens, measured at 95.5% across and 48.5% down the cut-out, so
   the bloom reads as light leaving the camera rather than sitting behind him.
   Half the 232% diameter is 116%: 95.5 - 116 = -20.5% horizontally, and
   48.5 - (116 * 994/1024) = -64.1% vertically, since the percentages resolve
   against the box's width and height respectively.
   Negative z-index keeps it behind him, the order the file uses. */
.stats-photo__flash {
  position: absolute;
  inset-inline-end: -20.5%;
  inset-block-start: -64.1%;
  inline-size: 232%;
  aspect-ratio: 1;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, .95) 0%,
    rgba(255, 255, 255, .62) 26%,
    rgba(255, 255, 255, .24) 46%,
    rgba(255, 255, 255, .06) 62%,
    rgba(255, 255, 255, 0) 74%);
}

/* Keeps the white figures legible over the photo. Figma's own overlay is a
   black 0->1 gradient at 30% layer opacity, which by the bottom of the masked
   band has only reached about 8% — too little to carry white text on the
   brighter parts of the dish. This is the compromise: confined to the lower
   half like the design's, but deep enough at the very bottom to hold the
   figures at an accessible contrast. */
.stats-photo__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(15, 23, 42, .62) 0%,
    rgba(15, 23, 42, .26) 26%,
    rgba(15, 23, 42, 0) 52%);
}

.stats-photo__figures {
  position: absolute;
  z-index: 4;                  /* above the flash and the shooter */
  inset-inline: 0;
  inset-block-end: 0;
}
.stats-photo__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  padding-block: var(--sp-6);
}
/* On desktop the figures sit on the right, clear of the photographer on the
   left, instead of running across the whole band (user, 2026-09-19; Figma's
   Frame 58 also sits right of centre rather than full width). */
@media (min-width: 901px) {
  .stats-photo__grid { max-inline-size: 62%; margin-inline-end: auto; }
}
.stat-o { display: flex; flex-direction: column; gap: var(--sp-1); text-align: center; }
.stat-o__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  color: var(--white);
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.stat-o__label {
  font-size: var(--fs-p4);
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* The design's 2.66:1 band gets too short to hold four figures once the page
   narrows, so the ratio opens up in steps. Do this rather than adding a
   min-block-size: a minimum height fights `aspect-ratio` and grows the box's
   *width* instead, which pushed the frame past the viewport and left the page
   scrolling sideways between roughly 700px and 815px.

   The strip stays 1036x176 of the frame throughout, so each new band ratio
   needs the two timeline ratios restated: the strip is 12.222% of the frame
   width tall and starts 4.861% of it higher, both divided by the band height
   as a share of that width. */
@media (max-width: 900px) {
  .stats-photo__frame { aspect-ratio: 2 / 1; }
  .stats-photo { --strip-hide: 75.56%; }   /* 1 - 12.222/50 */

  /* The Figma box above is derived from the design's 1072:343 band. Once the
     band changes ratio that box no longer reaches the bottom edge and the
     photo stops covering the frame, so below here it goes back to a plain
     cover fit — these ratios are not in the design anyway. */
  .stats-photo__frame > .stats-photo__bg {
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* The band turns squarer as it narrows, so a full-height photographer would
     take two thirds of its width and sit right under the figures. Shrink him
     and move him to the top edge instead, leaving the lower half to the grid.
     He stays whole either way — only the scale changes. */
  .stats-photo__shot {
    block-size: 82%;
    inset-block-start: auto;
    inset-block-end: 0;
  }
  /* At 82% the top of the cut-out sits inside the band, and the source is
     cropped flat across his cap. Fade that edge out so it never reads as a
     straight cut through his head. Phones go back to full height below. */
  .stats-photo__shot > .stats-photo__shooter {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  }

  /* The flash is sized off the photographer, and he takes a larger share of a
     squarer band — left alone the bloom would cover the whole photo. Shrinking
     it here keeps the dish readable. Offsets keep it centred on the lens:
     inline = 95.5% - size/2, block = 48.5% - (size/2 * 994/1024). */
  .stats-photo__flash {
    inline-size: 170%;
    inset-inline-end: 10.5%;
    inset-block-start: -34%;
  }
}

/* 562:1170 — the phone hero keeps both buttons on one row, 41px tall */
@media (max-width: 700px) {
  .hero__actions { flex-wrap: nowrap; gap: var(--sp-3); }
  .hero__actions .btn {
    --btn-fs: .875rem;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    white-space: nowrap;
  }
  .hero__actions .btn__icon { inline-size: 18px; block-size: 18px; }
}

/* Phones follow the mobile band the file draws loose on the canvas (667:1109
   + its two photos): a 390x219 band, the photographer full height on the start
   edge at 227 wide, and the four figures in one row across the bottom 90px.
   The strip start and the timeline are the desktop ones, restated for this
   ratio — the phone keeps the same animation, only smaller. */
@media (max-width: 700px) {
  .stats-photo__frame { aspect-ratio: 390 / 219; }
  .stats-photo { --strip-hide: 78.23%; }   /* 1 - 12.222/56.15 */

  /* Whole, floor to ceiling, as in the drawn mobile band */
  .stats-photo__shot {
    block-size: 107%;
    inset-block-start: auto;
    inset-block-end: 0;
  }
  .stats-photo__shot > .stats-photo__shooter { -webkit-mask-image: none; mask-image: none; }
  /* He is full height again, so the desktop bloom geometry applies */
  .stats-photo__flash {
    inline-size: 232%;
    inset-inline-end: -20.5%;
    inset-block-start: -64.1%;
  }

  /* 667:1110-667:1121 — four cards in a row, 22px figures over 10px labels */
  .stats-photo__grid {
    gap: var(--sp-1);
    padding-block: var(--sp-3);
    padding-inline: var(--sp-2);
  }
  .stat-o { gap: 2px; }
  .stat-o__value { font-size: 1.375rem; }
  .stat-o__label { font-size: .625rem; line-height: 1.3; }
}

/* Equal air above and below the logos: it was 76px above and 12px below, so
   the row looked like it had drifted down onto the orange band. */
.logo-band--cream {
  background: transparent;
  margin-block-start: 0;
  padding-block: clamp(var(--sp-6), 3vw, var(--sp-10));
}

/* --------------------------------------------------------------------------
   Why we are different — full-bleed orange band with diagonal stripes
   and a cream card floating on top (Frame 244)
   -------------------------------------------------------------------------- */

.why {
  position: relative;
  isolation: isolate;
  background: var(--primary-500);
  padding-block: var(--sp-14);
  overflow: hidden;
}

/* Parallel dark bars behind the card, taken from the Figma frame (453:327):
   one bar shape (the <symbol> in the view) at 1:1 scale, 27px thick and
   rising at 22.4deg. Positions are measured from the card's top corner on
   the far side (the left on the Arabic page): every bar's slanted end sits
   44px outside the card, at 22.68/45.38/66.24/87.29% of its height. The
   card is shorter here than in Figma, so the stub copies show only their
   end beside the card, and two more copies keep the top margin exactly as
   designed: bar 1 crossing the band edge, bar 2 ending inside it.
   The English page mirrors them. */
.why__frame { position: relative; }
.why__stripe-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.why__stripe {
  position: absolute;
  z-index: -1;
  display: block;
  inset-inline-end: -44px;
  color: #b54817;
  color: oklch(from var(--primary-500) calc(l - .1218) calc(c * .908) calc(h - 1.16));
  fill: currentColor;
  pointer-events: none;
}
[dir="ltr"] .why__stripe { transform: scaleX(-1); }
.why__stripe--1,
.why__stripe--2,
.why__stripe--3,
.why__stripe--4 { clip-path: inset(0 calc(100% - 80px) 0 0); }
.why__stripe--1 { inset-block-start: calc(22.68% - 284.62px); }
.why__stripe--2 { inset-block-start: calc(45.38% - 284.62px); }
.why__stripe--3 { inset-block-start: calc(66.24% - 284.62px); }
.why__stripe--4 { inset-block-start: calc(87.29% - 284.62px); }
.why__stripe--top,
.why__stripe--tip { clip-path: inset(0 0 0 80px); }
.why__stripe--top { inset-block-start: -161px; }
.why__stripe--tip { inset-block-start: -37.31px; }

.why__card {
  background: var(--surface-cream);
  border-radius: 44px;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, 1rem + 2vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.why__head { display: flex; flex-direction: column; gap: var(--sp-3); text-align: center; align-items: center; }
.why__head h2 { color: var(--tertiary-500); }
.why__sub { font-size: var(--fs-p2); color: var(--gray-500); max-inline-size: 62ch; }

.why-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: end;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.why-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-p2);
  color: var(--gray-900);
}
.why-card__body { font-size: var(--fs-p4); color: var(--gray-500); line-height: 1.6; }

@media (max-width: 640px) {
  .why__card { border-radius: var(--r-xl); }
  .why__stripe { display: none; }
}

/* --------------------------------------------------------------------------
   Cream body band (Frame 294, 512:1587)

   In Figma everything from the services list down to the articles sits on one
   cream slab, so it is one background here rather than a modifier repeated on
   each section. Sections keep their own padding, so they merge seamlessly.
   -------------------------------------------------------------------------- */

.body-band { background: var(--surface-cream); }

/* --------------------------------------------------------------------------
   Testimonials — heading beside a horizontally scrolling rail (Frame 194:4496)

   Figma: the row is `justify-end` and far wider than the 1440 frame, so the
   heading is pinned to the RTL start (right) and the white cards run off the
   opposite edge. Here the rail keeps that bleed but is scrollable.
   The lead card is the plain card scaled 1.3x (496->644.8, 32->41.6, 16->20.8,
   24->31.2, 48->62.4, 56->72.8, 20px->26px), so one --testi-k drives both.
   -------------------------------------------------------------------------- */

.testi {
  display: grid;
  grid-template-columns: clamp(340px, 43.9%, 547px) minmax(0, 1fr);  /* 547px at a 1248px container */
  gap: var(--sp-8);
  align-items: center;
}
.testi__head { display: flex; flex-direction: column; gap: var(--sp-6); text-align: start; }
.testi__head h2 { font-size: var(--fs-h1); color: var(--tertiary-500); }
.testi__head .lead { max-width: 518px; font-size: var(--fs-p2); line-height: var(--lh-tight); }

/* Not in the file: the rail scrolls, so it needs a control. The right arrow
   walks back toward the first card, the left one forward. */
.testi__nav { display: flex; gap: var(--sp-3); margin-block-start: var(--sp-2); }
.testi__arrow {
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--tertiary-500);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.testi__arrow svg { inline-size: 24px; block-size: 24px; }
.testi__arrow:hover { background: var(--primary-500); color: var(--white); transform: translateY(-2px); }
.testi__arrow:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 3px; }
.testi__arrow[disabled] {
  opacity: .3;
  cursor: default;
  background: var(--white);
  color: var(--tertiary-500);
  transform: none;
}

.testi__rail {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Bleed out of the container on the trailing side only, so the cards run off
     the screen edge as in Figma: cancel the container padding, plus its auto
     margin once the container stops growing. The leading side is left alone --
     Chrome renders no leading inset at all in an RTL scroller (padding and
     margin are both dropped there), so the rail simply starts at the column
     edge and the first card lines up with the rest of the page. */
  margin-inline-end: min(
    calc(var(--gutter) * -1),
    calc((var(--container) + var(--gutter) * 2 - 100vw) / 2 - var(--gutter))
  );
  padding-inline-end: var(--gutter);
  padding-block: var(--sp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.testi__rail::-webkit-scrollbar { block-size: 6px; }
.testi__rail::-webkit-scrollbar-track { background: transparent; }
.testi__rail::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }

/* Registered so the whole card — width, padding, radius, type — can ease
   between the plain and the lead scale instead of snapping. */
@property --testi-k {
  syntax: "<number>";
  /* The quote, avatar, type and gaps inside the card all scale off this, so it
     has to reach them. */
  inherits: true;
  initial-value: 1;
}

.testi-card {
  --testi-k: 1;
  /* 560ms matches the scroll tween in initTestiRail(), so they move as one. */
  transition: --testi-k 560ms var(--ease-out);
  flex: 0 0 min(calc(496px * var(--testi-k)), 84vw);
  min-inline-size: 0;
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* RTL: cross-start is the right edge */
  gap: calc(16px * var(--testi-k));
  padding: calc(32px * var(--testi-k));
  background: var(--white);
  border-radius: calc(16px * var(--testi-k));
  text-align: start;
}
/* The markup marks the first card; js/animations.js moves `is-lead` along the
   rail as it scrolls. */
.testi-card--lead,
.testi-card.is-lead { --testi-k: 1.3; }
@media (prefers-reduced-motion: reduce) {
  .testi-card { transition: none; }
}

.testi-card__quote {
  inline-size: calc(24px * var(--testi-k));
  block-size: calc(24px * var(--testi-k));
  flex: none;
}

/* The quote sits tight to the top; the caption is pushed to the bottom by the
   48px gap, which grows with the card like everything else. */
.testi-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;   /* RTL: right edge */
  gap: calc(48px * var(--testi-k));
  inline-size: 100%;
}
.testi-card blockquote {
  margin: 0;
  inline-size: 100%;
  font-size: calc(20px * var(--testi-k));
  color: var(--gray-500);
  line-height: var(--lh-tight);
  overflow-wrap: break-word;
}
.testi-card figcaption {
  display: flex;
  align-items: flex-start;
  gap: calc(12px * var(--testi-k));
  margin-block-start: auto;
}
.testi-card__avatar {
  flex: none;
  inline-size: calc(56px * var(--testi-k));
  block-size: calc(56px * var(--testi-k));
  border-radius: 50%;
  background: #d9d9d9;
}
.testi-card__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* RTL: right edge */
  gap: calc(6px * var(--testi-k));
  color: var(--gray-900);
  line-height: var(--lh-tight);
  overflow-wrap: break-word;
}
.testi-card__who b { font-size: calc(20px * var(--testi-k)); font-weight: var(--fw-regular); }
.testi-card__who i { font-style: normal; font-size: var(--fs-p5); }

/* A card with no role line centres its caption on the avatar. Keyed off the
   content rather than the lead class, which now travels with the scroll. */
.testi-card figcaption:not(:has(i)) { align-items: center; gap: calc(16px * var(--testi-k)); }

/* The heading moves above the rail; the rail keeps scrolling and still bleeds
   off the trailing edge, and the lead card drops to the plain card's scale. */
@media (max-width: 1000px) {
  .testi { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .testi-card--lead,
  .testi-card.is-lead { --testi-k: 1; }
}

@media (max-width: 560px) {
  .testi-card { flex-basis: min(400px, 86vw); padding: var(--sp-6); }
  .testi-card__body { gap: var(--sp-8); }
}

/* --------------------------------------------------------------------------
   Featured article (Frame 279)
   -------------------------------------------------------------------------- */

/* 458:955 is a white card: 32px padding, 24px radius, 499px tall, two equal
   580px columns 24px apart, text on the right and media on the left. */
.feat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: stretch;
  min-block-size: 499px;
  padding: var(--sp-8);
  background: var(--white);
  border-radius: var(--r-lg);
}
.feat__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6); text-align: start; }
.feat__title { font-size: var(--fs-h2); color: var(--gray-900); }
.feat__excerpt { font-size: var(--fs-p2); color: var(--gray-500); line-height: var(--lh-tight); }

/* Empty slot in Figma — add an img element to fill it */
.feat__media {
  background: #d9d9d9;
  border-radius: var(--r-md);
  overflow: hidden;
}
.feat__media > img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.read-link--lg { font-size: var(--fs-p2); align-self: flex-start; }
.read-link--lg .read-link__icon { inline-size: 28px; block-size: 28px; }
.read-link--lg .read-link__icon svg { inline-size: 20px; block-size: 20px; }

.more-link {
  font-size: var(--fs-p3);
  color: var(--gray-900);
  text-decoration: underline;
  text-underline-offset: 5px;
  transition: color var(--dur-fast) var(--ease-out);
}
.more-link:hover { color: var(--primary-500); }

@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; min-block-size: 0; padding: var(--sp-5); }
  .feat__media { order: -1; aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   Closing form over a restaurant photo (Frame 231)
   -------------------------------------------------------------------------- */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 72px;
}

/* 437:592 frames the photo at 124.03% height, nudged up and slightly right,
   and knocks it back to 90% before the wash. */
.closing__bg {
  position: absolute;
  inset: auto;
  top: -12.02%;
  left: .07%;
  z-index: -2;
  inline-size: 100%;
  block-size: 124.03%;
  max-inline-size: none;
  object-fit: cover;
  opacity: .9;
}
.closing__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Flat wash, not a ramp: black 30% over navy 63%. */
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
              linear-gradient(rgba(31, 36, 71, .63), rgba(31, 36, 71, .63));
}

.closing__inner {
  display: grid;
  grid-template-columns: 612fr 636fr;  /* text 612 right, card 636 left, no gutter */
  gap: 0;
  align-items: center;
}
.closing__text { display: flex; flex-direction: column; gap: var(--sp-6); text-align: start; }
.closing__text h2 { color: var(--white); font-size: var(--fs-h1); }
.closing__text p { font-size: var(--fs-p2); color: var(--gray-200); line-height: var(--lh-tight); }

/* Frosted panel holding the form */
/* 437:594 is white at 10% with a 50px blur and no stroke. */
.closing__card {
  background: rgba(255, 255, 255, .1);
  border: 0;
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}
.closing__card .field__label { color: var(--white); font-size: var(--fs-p2); font-weight: var(--fw-regular); }
.closing__card .field__label .opt { font-size: var(--fs-p4); color: var(--gray-200); }
.closing__card .form-card__form { gap: 27px; }
.closing__card .field { gap: var(--sp-3); }
.closing__card .btn--lg { padding: var(--sp-3) var(--sp-4); box-shadow: none; }

/* White pill controls, as in the design */
.input--glass,
.select--glass {
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  /* 15 + 28 + 15 plus the 1px focus border = the 60px box in 437:599. */
  padding: 15px var(--sp-4);
  font-size: var(--fs-p3);
  color: var(--gray-900);
  text-align: start;
}
.input--glass::placeholder { color: var(--gray-500); }
.input--glass:focus,
.select--glass:focus { border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(229, 105, 50, .25); }
/* Chevron sits on the physical left, so the clearance is on the inline end. */
.select--glass { background-position: left var(--sp-4) center; padding-inline-end: var(--sp-12); }
.select--glass:has(option[value=""]:checked) { color: var(--gray-500); }
.input--glass.ltr { text-align: start; }

@media (max-width: 1000px) {
  .closing__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .closing__text h2 { font-size: var(--fs-h2); }
}
@media (max-width: 900px) {
  .hero {
    min-block-size: 0;
    padding-block: calc(var(--header-h) + var(--sp-16))
                   calc(var(--band-top-gap, 0px) + var(--band-rise, 0px) + var(--sp-8));
  }
  .hero__title { font-size: var(--fs-h2); }
}

/* Top of the page on phones.

   The cream pages pull themselves up by --header-h + --sp-12 so the tone runs
   behind the floating header. Below 900px that header is hidden and the bottom
   tab bar stands in for it (components.css), but the pull-up stayed -- so the
   first heading landed 16-90px from the top edge, tight under the phone's URL
   bar, instead of the gap the mobile frames give it: 116px on every inner page
   (Frame 309/322/323/331/240/305/299 all start at y=116 on the 390 frames) and
   156px on the home hero (563:2204).

   So: drop the pull-up, drop the first section's own top padding, and set the
   design's gap once on the page itself. Scoped to .js for the same reason the
   header-hiding rule is -- without JS the top header is still there and still
   needs the cream behind it.

   The home hero is the one deliberate departure from the frames: 116px rather
   than the 156px at 563:2204, asked for directly off a phone, which also lines
   its heading up with every other page. */
@media (max-width: 900px) {
  .js .page--cream,
  .js .page--home { margin-block-start: 0; }

  .js .page--cream { padding-block-start: 116px; }
  .js .page--cream > :first-child { padding-block-start: 0; }

  .js .page--home .hero { padding-block-start: 116px; }
}

/* ==========================================================================
   TERMS / PRIVACY  (no Figma frame — the footer links to them)
   A centred hero, then the contents list beside one white reading card.
   The list is sticky on desktop and highlights the section in view
   (data-spy, js/animations.js); on phones it sits above the card.
   ========================================================================== */

.legal-hero .page-hero__inner { max-inline-size: 760px; }
.legal-hero__date {
  font-size: var(--fs-p4);
  color: var(--text-faint);
}

.legal-section { padding-block-end: var(--sp-24); }

.legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 1001px) {
  .legal {
    grid-template-columns: 17rem minmax(0, 52rem);
    justify-content: center;
    gap: var(--sp-10);
  }
  .legal__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-8));
  }
}

.legal__toc {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--border);
}
.legal__toc-title {
  margin-block-end: var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-p3);
  color: var(--text-strong);
}
.legal__toc ol { display: flex; flex-direction: column; gap: 2px; counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: flex;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-p4);
  line-height: var(--lh-tight);
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.legal__toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.legal__toc a:hover { background: rgba(255, 255, 255, .8); color: var(--text-strong); }
.legal__toc a.is-active { background: var(--white); color: var(--primary-500); }
.legal__toc a.is-active::before { color: var(--primary-500); }

/* Phones: a 2-column list is enough to jump around; the card follows */
@media (max-width: 700px) {
  .legal__toc { padding: var(--sp-4); }
  .legal__toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-2); }
  .legal__toc a { padding: 6px var(--sp-1); font-size: .875rem; }
}

.legal__body {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--sp-6), 2rem + 2vw, var(--sp-12));
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  counter-reset: legal;
}

.legal__item {
  counter-increment: legal;
  padding-block: var(--sp-8);
  border-block-end: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + var(--sp-8));
}
.legal__item:first-child { padding-block-start: 0; }
.legal__item:last-of-type { border-block-end: 0; }

.legal__item h2 {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
  font-size: var(--fs-h4);
  color: var(--text-strong);
}
.legal__item h2::before {
  content: counter(legal, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: var(--fs-p4);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--primary-500);
}

.legal__item p,
.legal__item li {
  font-size: var(--fs-p3);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-inline-size: 46em;
}
.legal__item p + p,
.legal__item ul + p { margin-block-start: var(--sp-3); }
.legal__item ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
}
.legal__item li {
  position: relative;
  padding-inline-start: var(--sp-6);
}
.legal__item li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: .75em;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--primary-500);
}

.legal__cta { align-self: flex-start; margin-block-start: var(--sp-8); }