/* ============================================================================
   TPG site prototype — the shared shell (header, nav, footer) and the
   placeholder vocabulary. Tokens restate site/design-system.md; nothing new.
   ========================================================================== */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(fonts/PlexAr-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(fonts/PlexAr-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(fonts/PlexAr-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans";        src: url(fonts/PlexLat-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans";        src: url(fonts/PlexLat-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans";        src: url(fonts/PlexLat-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --sc-canvas: #0B1622; --sc-surface: #10243A; --sc-ink: #F3EFE4; --sc-ink-soft: #BCC2C8;
  --sc-accent: #C8102E; --sc-accent-ink: #F3EFE4;
  --tpg-kicker: #E58794; --tpg-hair: rgba(255,255,255,.16);
  --sc-font-display: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --sc-font-text:    "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --sc-shadow-color: 210 60% 4%;
  --sc-t-4xl: clamp(2.25rem, 6vw, 4.5rem);
  --sc-t-3xl: clamp(1.875rem, 4vw, 2.75rem);
  --sc-t-2xl: clamp(1.5rem, 2.6vw, 1.875rem);
  --measure: 660px;
  --gold: #B4894E;
}
html[lang="en"] {
  --sc-font-display: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --sc-font-text:    "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
}
html[lang="fa"] {
  --sc-track-tight: 0; --sc-track-snug: 0; --sc-track-normal: 0; --sc-track-wide: 0;
  --sc-leading-none: 1.45; --sc-leading-tight: 1.5; --sc-leading-body: 2;
  --sc-t-base: 18px; --measure: 680px;
}
html[lang="fa"] .sc-display { font-weight: 700; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- grounds: light site, dark moments (design-system §4.2) ---------- */
.g-dark  { --sc-canvas: #0B1622; --sc-ink: #F3EFE4; --sc-ink-soft: #BCC2C8; --tpg-kicker: #E58794; --tpg-hair: rgba(255,255,255,.16); background: #0B1622; color: var(--sc-ink); }
.g-navy  { --sc-canvas: #10243A; --sc-ink: #F3EFE4; --sc-ink-soft: #BCC2C8; --tpg-kicker: #E58794; --tpg-hair: rgba(255,255,255,.16); background: #10243A; color: var(--sc-ink); }
.g-light { --sc-canvas: #FAF8F1; --sc-ink: #23262B; --sc-ink-soft: #5E6B7A; --tpg-kicker: #C8102E; --tpg-hair: #DED9CC; background: #FAF8F1; color: var(--sc-ink); }
.g-wheat { --sc-canvas: #F3EFE4; --sc-ink: #23262B; --sc-ink-soft: #5E6B7A; --tpg-kicker: #C8102E; --tpg-hair: #DED9CC; background: #F3EFE4; color: var(--sc-ink); }

/* ---------- header ---------- */
.site-bar {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
  padding: var(--sc-4) var(--sc-gutter);
  background: linear-gradient(to bottom, rgba(11,22,34,.72), rgba(11,22,34,0));
  color: #F3EFE4; transition: background var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out);
}
body.bar-light .site-bar { background: linear-gradient(to bottom, rgba(250,248,241,.97) 55%, rgba(250,248,241,0)); color: #23262B; }
.site-bar__logo { height: 44px; width: auto; background: #fff; border-radius: var(--sc-r-sm); padding: 4px 8px; display: block; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); }
.site-nav a { color: inherit; text-decoration: none; font-size: var(--sc-t-sm); font-weight: 600; padding-block: 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--sc-accent); }
.site-nav a:hover { border-bottom-color: color-mix(in oklab, var(--sc-accent) 50%, transparent); }
.site-bar__right { display: flex; align-items: center; gap: var(--sc-4); }
.lang { color: inherit; text-decoration: none; font-size: var(--sc-t-sm); font-weight: 600; padding: var(--sc-2) var(--sc-3);
        border: 1px solid currentColor; border-radius: var(--sc-r-sm); opacity: .85; }
.cta { display: inline-block; background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none;
       font-weight: 600; font-size: var(--sc-t-sm); padding: var(--sc-3) var(--sc-5); border-radius: var(--sc-r-sm);
       white-space: nowrap; transition: transform var(--sc-d-fast) var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out); }
.cta:active { transform: translateY(1px); }
.cta--lg { font-size: var(--sc-t-base); padding: var(--sc-4) var(--sc-7); }
body.cta-yield .site-bar .cta, body.at-finale:not(.past-film) .site-bar .cta { opacity: 0; pointer-events: none; }
.menu-btn { display: none; background: none; border: 1px solid currentColor; color: inherit; border-radius: var(--sc-r-sm); padding: var(--sc-2) var(--sc-3); font-weight: 600; font-size: var(--sc-t-sm); cursor: pointer; }
@media (max-width: 1060px) {
  .site-nav { display: none; }
  .menu-btn { display: inline-block; }
  body.menu-open .site-nav { display: flex; position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #10243A; color: #F3EFE4; padding: var(--sc-4) var(--sc-gutter) var(--sc-6); box-shadow: var(--sc-e3); }
  body.menu-open .site-nav a { font-size: 18px; padding: var(--sc-4) 0; border-bottom: 1px solid rgba(255,255,255,.12); }
}
/* phones: the red Contact button stays in the bar (Amir 2026-10-24), compact so logo, Menu, language and it fit */
@media (max-width: 520px) {
  .site-bar { gap: var(--sc-3); padding-inline: 16px; }
  .site-bar__right { gap: 8px; }
  .site-bar .cta { padding: 9px 14px; font-size: 14px; white-space: nowrap; }
  .site-bar .menu-btn { padding: 7px 10px; }
}

/* ---------- shared type ---------- */
.tpg-kicker { color: var(--tpg-kicker); font-weight: 600; font-size: var(--sc-t-sm); margin: 0; }
.tpg-rule { width: 46px; height: 3px; background: var(--sc-accent); border: 0; margin: var(--sc-3) 0 var(--sc-5); }
.h2 { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); font-weight: 700; line-height: 1.18; margin: 0; text-wrap: balance; max-width: 24ch; }
html[lang="fa"] .h2 { line-height: 1.5; }
.lede { font-size: 19px; line-height: 1.7; margin: var(--sc-5) 0 0; max-width: var(--measure); text-wrap: pretty; }
html[lang="fa"] .lede { font-size: 20px; line-height: 2.05; }
.body { font-size: 17px; line-height: 1.65; color: var(--sc-ink-soft); max-width: var(--measure); margin: var(--sc-4) 0 0; }
html[lang="fa"] .body { font-size: 18px; line-height: 2; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--sc-gutter); }
.wrap--wide { max-width: 1440px; }
.blk { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.blk + .blk.g-light, .blk + .blk.g-wheat { border-top: 1px solid var(--tpg-hair); }
.g-wheat + .g-wheat, .g-light + .g-light { border-top: 1px solid var(--tpg-hair); }

/* ---------- page hero: the real site from the air, moved by scroll ---------- */
.pg-hero__img { position: absolute; inset: 0; overflow: clip; }
.pg-hero__img img { width: 100%; height: 100%; object-fit: cover; transform-origin: 55% 40%; transform: scale(calc(1.02 + var(--sc-p, 0) * 0.1)); }
.tpg-scrim { position: absolute; inset: 0; pointer-events: none; /* no z-index: it must stay UNDER the copy, rail and inserts */
  background: linear-gradient(to top, rgba(11,22,34,.94) 0%, rgba(11,22,34,.80) 30%, rgba(11,22,34,.30) 56%, rgba(11,22,34,0) 80%); }
.tpg-scrim--corner { background: radial-gradient(150% 120% at var(--tpg-corner-x, 100%) 100%, rgba(11,22,34,.96) 0%, rgba(11,22,34,.82) 34%, rgba(11,22,34,.4) 56%, rgba(11,22,34,0) 74%); }
html[lang="en"] .tpg-scrim--corner { --tpg-corner-x: 0%; }
.pg-copy { position: absolute; z-index: var(--sc-z-copy); inset-inline-start: var(--sc-gutter); bottom: clamp(4.5rem, 14vh, 9rem); max-width: 46rem; }
.pg-copy .sc-display { text-wrap: balance; max-width: 18ch; }
.pg-copy .lede { max-width: 36rem; }
.pg-hero--band { min-height: 62svh; display: flex; align-items: flex-end; padding: 140px var(--sc-gutter) clamp(48px, 8vh, 96px); }
.pg-hero--band .pg-copy { position: static; }

/* ---------- tiles ---------- */
.grid { display: grid; gap: var(--sc-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* C — full-bleed photo tile, 4:5, the hero's scrim, red rule above the title (§5.1) */
.tile-c { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--sc-r-md); overflow: clip; color: #F3EFE4; text-decoration: none; background: #10243A; }
.tile-c > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sc-ease-out); }
a.tile-c:hover > img { transform: scale(1.04); }
.tile-c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,22,34,.92) 0%, rgba(11,22,34,.55) 38%, rgba(11,22,34,0) 64%); }
.tile-c__body { position: absolute; inset-inline: var(--sc-5); bottom: var(--sc-5); z-index: 1; }
.tile-c__body i { display: block; width: 32px; height: 3px; background: var(--sc-accent); margin-bottom: var(--sc-3); }
.tile-c__body b { display: block; font-size: 20px; line-height: 1.4; }
html[lang="fa"] .tile-c__body b { line-height: 1.7; }
.tile-c__body span { display: block; font-size: 14px; color: #DCD7CB; margin-top: 2px; }
/* offer card (products & services, Amir 2026-10-14): photo on top at a fixed 4:3, text on its own solid panel below,
   so every red rule, title and description starts at the same height and reads at full size */
.offers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5); margin-top: 40px; }
.offer { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tpg-hair); border-radius: var(--sc-r-md);
         overflow: clip; color: #23262B; text-decoration: none; transition: box-shadow 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out); }
.offer:hover { box-shadow: var(--sc-e2); transform: translateY(-2px); }
.offer:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.offer__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: clip; background: #E9E4D8; }
.offer__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--sc-ease-out); }
.offer:hover .offer__img img { transform: scale(1.04); }
.offer__body { display: block; flex: 1; padding: var(--sc-5); }
.offer__body i { display: block; width: 32px; height: 3px; background: var(--sc-accent); margin-bottom: var(--sc-3); }
.offer__body b { display: block; font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: var(--sc-2); }
.offer__body span { display: block; font-size: 16px; line-height: 1.7; color: #3F4650; }
html[lang="fa"] .offer__body b { line-height: 1.7; }
html[lang="fa"] .offer__body span { font-size: 17px; line-height: 1.95; }
@media (max-width: 1100px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .offers { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .offer, .offer__img img { transition: none; } .offer:hover { transform: none; } .offer:hover .offer__img img { transform: none; } }

/* A — flat bordered tile, 3px red cap: information, never a picture (§5.1) */
.tile-a { background: #fff; border: 1px solid var(--tpg-hair); border-top: 3px solid var(--sc-accent); padding: var(--sc-5); color: #23262B; }
.g-dark .tile-a, .g-navy .tile-a { background: rgba(255,255,255,.04); color: var(--sc-ink); }
.tile-a h3 { margin: 0 0 var(--sc-2); font-size: 20px; font-weight: 600; line-height: 1.4; }
html[lang="fa"] .tile-a h3 { line-height: 1.7; }
.tile-a p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--sc-ink-soft); }
html[lang="fa"] .tile-a p { font-size: 16px; line-height: 1.95; }

/* stat row */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); margin: var(--sc-7) 0 0; padding: 0; list-style: none; }
.stat { border-top: 3px solid var(--sc-accent); padding-top: var(--sc-4); }
.stat b { display: block; font-family: var(--sc-font-display); font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
html[lang="fa"] .stat b { line-height: 1.5; }
.stat span { display: block; font-size: 15px; color: var(--sc-ink-soft); margin-top: var(--sc-1); }
/* the figures size to the row they sit in, not the window: a three-up row inside a half-width column used to let
   "200,000" run into its neighbour (Amir, 2026-10-15) */
.stats { container-type: inline-size; }
.stat { min-width: 0; }
.stat b { font-size: clamp(24px, 6.4cqi, 48px); white-space: nowrap; }
.stats-note { margin-top: var(--sc-6); max-width: 62ch; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* plan rows: one project each, status on its own tag, "today → with the plan" as the figure */
.plan { list-style: none; margin: var(--sc-6) 0 0; padding: 0; }
.plan li { border-top: 1px solid var(--tpg-hair); }
.plan li:last-child { border-bottom: 1px solid var(--tpg-hair); }
.plan__row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "head head" "fig txt"; column-gap: var(--sc-4); row-gap: 2px;
             align-items: baseline; padding: var(--sc-4) 0; color: inherit; text-decoration: none; }
.plan__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-2) var(--sc-3); }
.plan__head b { font-size: 17px; font-weight: 600; line-height: 1.5; }
.plan__tag { font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.6; padding: 1px 9px; border-radius: 99px; border: 1px solid var(--tpg-kicker); color: var(--tpg-kicker); }
.plan__tag--quiet { border-color: var(--tpg-hair); color: var(--sc-ink-soft); }
.plan__fig { grid-area: fig; display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; font-family: var(--sc-font-display); font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.plan__from { color: var(--sc-ink-soft); font-weight: 600; }
.plan__arr { color: var(--tpg-kicker); font-weight: 400; font-size: .8em; }
.plan__txt { grid-area: txt; font-size: 15px; line-height: 1.6; color: var(--sc-ink-soft); }
html[lang="fa"] .plan__head b { line-height: 1.8; }
html[lang="fa"] .plan__fig { line-height: 1.6; }
html[lang="fa"] .plan__txt { font-size: 16px; line-height: 1.9; }
.plan__row:hover .plan__head b, .plan__row:focus-visible .plan__head b { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.plan__row:focus-visible { outline: 2px solid var(--tpg-kicker); outline-offset: 4px; border-radius: 4px; }

/* build scenes: real drone frame → the plan built on it, a frame sequence scrubbed by the plan rows.
   Desktop: the stage sticks beside the rows and each row gets room to scroll; the row in focus is full strength.
   Phone: the stage sticks under the header and the rows scroll beneath it. Tag + caption never leave. */
.plan-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); grid-template-areas: "head stage" "list stage"; column-gap: var(--sc-7); row-gap: 0; }
.plan-head { grid-area: head; }
.plan--scenes { grid-area: list; }
.plan-stage { grid-area: stage; align-self: start; position: sticky; top: max(96px, calc(50vh - 220px)); }
.buildfig { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--sc-r-md); overflow: clip; background: #0B1622; }
.buildfig__c { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 450ms var(--sc-ease-out); }
.buildfig__c.is-on { opacity: 1; }
.buildfig__cap { margin: var(--sc-3) 0 0; font-size: 13px; line-height: 1.6; color: var(--sc-ink-soft); }
html[lang="fa"] .buildfig__cap { font-size: 14px; line-height: 1.9; }
.plan--scenes li { transition: opacity 300ms var(--sc-ease-out); }
@media (min-width: 861px) {
  .plan--scenes li { min-height: 46vh; }
  .plan--scenes.is-live li:not(.is-active) { opacity: .42; }
}
@media (max-width: 860px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "list"; }
  .plan-stage { top: 76px; z-index: 2; margin-top: var(--sc-5); background: #10243A; padding-bottom: var(--sc-3); }
  .plan--scenes li { min-height: 40vh; }
  .plan--scenes.is-live li:not(.is-active) { opacity: .42; }
}

/* plan figure: a generated illustration, always tagged as the plan. The line drawing (traced from the render,
   so the two register exactly) sits underneath; the lit hall wipes in from the reading start as --p goes 0 → 1. */
.planfig { --p: 1; position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--sc-r-md); overflow: clip; background: #10243A; }
.planfig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.planfig__b { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
html[dir="rtl"] .planfig__b { clip-path: inset(0 0 0 calc((1 - var(--p)) * 100%)); }
.planfig__edge { position: absolute; top: 0; bottom: 0; width: 2px; margin-inline-start: -1px; inset-inline-start: calc(var(--p) * 100%);
                 background: var(--tpg-kicker); box-shadow: 0 0 12px rgba(229,135,148,.55); opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.planfig.is-moving .planfig__edge { opacity: 1; }
.planfig__tag { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 1; padding: 3px 11px; border-radius: 99px;
                background: rgba(16,36,58,.84); border: 1px solid rgba(255,255,255,.28); color: #F3EFE4; font-size: 13px; font-weight: 600; line-height: 1.7; }

/* founders: always the same size, side by side; the photo is the only thing that changes when finals arrive */
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); }
.founder { margin: 0; }
.founder__img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--sc-r-md); overflow: clip; display: block; object-fit: cover; object-position: 50% 22%; background: #E9E4D8; min-height: 0; }
.founder figcaption { margin-top: var(--sc-3); }
.founder figcaption b { display: block; font-size: 18px; font-weight: 700; line-height: 1.5; }
.founder figcaption span { display: block; font-size: 14px; color: var(--sc-ink-soft); line-height: 1.6; }
html[lang="fa"] .founder figcaption b { line-height: 1.8; }
html[lang="fa"] .founder figcaption span { font-size: 15px; line-height: 1.9; }

/* people */
.person { display: grid; grid-template-columns: clamp(96px, 11vw, 150px) minmax(0, 1fr); gap: var(--sc-5); align-items: start; }
.person__img, .namecard { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--sc-r-md); display: block; }
.person__img { object-fit: cover; background: #fff; border: 1px solid var(--tpg-hair); }
.namecard { background: #10243A; color: #F3EFE4; display: grid; place-content: center; justify-items: center; gap: var(--sc-3); }
.namecard b { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; line-height: 1; }
.namecard i { width: 36px; height: 3px; background: #C8102E; display: block; }
.person h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.4; }
html[lang="fa"] .person h3 { line-height: 1.7; }
.person p { margin: 2px 0 0; font-size: 15px; color: var(--sc-ink-soft); line-height: 1.6; }
html[lang="fa"] .person p { font-size: 16px; line-height: 1.85; }
.person p.role { color: var(--sc-ink); font-weight: 600; }
.person--lead { grid-template-columns: clamp(140px, 16vw, 210px) minmax(0, 1fr); }
.person--lead h3 { font-size: 24px; }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-7) var(--sc-6); margin-top: var(--sc-7); }

/* site card: photo tile + who runs it */
.site-card { display: grid; gap: var(--sc-4); align-content: start; }
.site-card .tile-c { aspect-ratio: 4 / 3; }
.site-card__team { display: grid; gap: var(--sc-3); }
.site-card__team .person { grid-template-columns: 64px minmax(0, 1fr); gap: var(--sc-3); }
.site-card__team .person h3 { font-size: 16px; }
.site-card__team .person p { font-size: 14px; }

.tpg-door { display: inline-block; color: inherit; font-weight: 600; font-size: var(--sc-t-sm);
            text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; }
.img { width: 100%; display: block; object-fit: cover; border-radius: var(--sc-r-md); }
.img--43 { aspect-ratio: 4 / 3; } .img--169 { aspect-ratio: 16 / 9; } .img--45 { aspect-ratio: 4 / 5; } .img--1 { aspect-ratio: 1; }
.cap { direction: inherit; font-size: 14px; color: var(--sc-ink-soft); margin: var(--sc-2) 0 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.group-h { margin: var(--sc-8) 0 var(--sc-4); font-size: 15px; font-weight: 700; color: var(--sc-ink-soft); padding-bottom: var(--sc-2); border-bottom: 1px solid var(--tpg-hair); }

/* feed range: a calm grid; each product brightens under the pointer (Amir, 2026-10-09) */
.prod { position: relative; margin: 0; }
.prod__bag { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sc-r-md); display: block;
             filter: saturate(.18) brightness(.94); transition: filter 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out); }
.prod__media { position: relative; }
.prod__pel { position: absolute; width: 40%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; inset-inline-end: -8px; bottom: -14px;
             border: 3px solid #F3EFE4; box-shadow: var(--sc-e2); filter: saturate(.3); transition: filter 420ms var(--sc-ease-out); }
.prod:hover .prod__bag, .prod:focus-within .prod__bag { filter: none; transform: translateY(-4px); }
.prod:hover .prod__pel, .prod:focus-within .prod__pel { filter: none; }
@media (hover: none) { .prod__bag, .prod__pel { filter: none; } }
.prod figcaption { margin-top: var(--sc-5); }
.prod figcaption b { display: block; font-size: 19px; line-height: 1.5; }
.prod figcaption span { display: block; font-size: 14px; color: var(--sc-ink-soft); }

/* the door to the next link in the chain (the chain never loops: the last door goes to the customer) */
.next { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-5); padding: var(--sc-7) var(--sc-gutter); text-decoration: none; color: #F3EFE4; background: #10243A; }
.next span { font-size: 14px; color: #BCC2C8; display: block; }
.next b { font-size: var(--sc-t-2xl); font-weight: 700; display: block; line-height: 1.5; }
.next::after { content: "←"; font-size: 32px; color: #E58794; }
html[dir="ltr"] .next::after { content: "→"; }
.next:hover b { text-decoration: underline; text-decoration-color: #C8102E; text-underline-offset: 8px; }

/* ---- footer: the belt (v2, Amir ✔ 2026-10-24) ---- */
.site-foot { background: #10243A; color: #BCC2C8; padding: 0 0 var(--sc-5); position: relative; z-index: 30; }
.site-foot a { color: #F3EFE4; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-decoration-color: #C8102E; text-underline-offset: 5px; }
/* sign-off band: cream, so the logo sits on its own white-free ground (multiply drops the file's white) */
.foot-sign { background: #F3EFE4; color: #10243A; border-top: 3px solid #C8102E; }
.foot-sign__in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-7); padding-block: var(--sc-7); }
.foot-sign__logo img { display: block; width: 104px; height: auto; mix-blend-mode: multiply; }
.foot-sign__slogan { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.4; color: #10243A; }
.foot-sign__sub { margin: var(--sc-2) 0 0; font-size: 15px; color: #5E6B7A; }
.site-foot .foot-sign__cta { color: #fff; white-space: nowrap; }
.site-foot .foot-sign__cta:hover { text-decoration: none; }
/* four columns */
.foot-cols { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1.3fr; gap: var(--sc-7); padding-block: var(--sc-8) var(--sc-7); }
.site-foot h4 { margin: 0 0 var(--sc-4); color: #F3EFE4; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.site-foot h4::after { content: ""; display: block; width: 24px; height: 2px; background: #C8102E; margin-top: var(--sc-2); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); font-size: 15px; line-height: 1.6; }
/* the chain column: four stops on one line, top to bottom (a line, never a loop) */
.foot-chain { position: relative; gap: var(--sc-4); }
.foot-chain::before { content: ""; position: absolute; inset-inline-start: 15px; top: 16px; bottom: 16px; border-inline-start: 1px dashed rgba(243,239,228,.32); }
.foot-chain a { display: flex; align-items: center; gap: var(--sc-3); }
.foot-chain__dot { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #10243A; border: 1px solid rgba(243,239,228,.32); display: grid; place-items: center; transition: border-color .2s, background .2s; }
.foot-chain a:hover .foot-chain__dot { border-color: #C8102E; background: #15304D; }
.fico { width: 18px; height: 18px; flex: none; fill: currentColor; }
.fico--line { fill: none; stroke: #E8DFC9; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* reach lists (sales team, head office) */
.foot-reach li, .foot-reach a { display: flex; align-items: flex-start; gap: var(--sc-3); }
.foot-reach .fico { margin-top: 3px; color: #E58794; }
.foot-reach li > span, .foot-reach li { color: #BCC2C8; }
.foot-reach a { color: #F3EFE4; }
.foot-reach a.foot-go { display: inline-flex; gap: 8px; font-weight: 600; margin-inline-start: calc(18px + var(--sc-3)); }
.foot-go::after { content: "←"; color: #E58794; }
html[dir="ltr"] .foot-go::after { content: "→"; }
/* bottom line */
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4) var(--sc-6); flex-wrap: wrap; padding-top: var(--sc-5); border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.foot-bottom__links { display: flex; gap: var(--sc-5); }
.foot-social { display: flex; gap: var(--sc-2); }
.foot-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(243,239,228,.24); display: grid; place-items: center; color: #F3EFE4; transition: border-color .2s, background .2s; }
.foot-social a:hover { border-color: #C8102E; background: #15304D; }
.foot-social .is-soon { width: 38px; height: 38px; border-radius: 50%; border: 1px dashed rgba(243,239,228,.24); display: grid; place-items: center; color: rgba(243,239,228,.5); cursor: default; }
.foot-social .fico { width: 18px; height: 18px; }
.foot-up { margin-inline-start: var(--sc-3); }
@media (max-width: 900px) {
  .foot-sign__in { grid-template-columns: auto 1fr; }
  .foot-sign__cta { grid-column: 1 / -1; justify-self: start; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot-sign__in { gap: var(--sc-5); }
  .foot-sign__logo img { width: 76px; }
  .foot-sign__cta { justify-self: stretch; text-align: center; }
  .foot-cols { grid-template-columns: 1fr; gap: var(--sc-6); }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   PLACEHOLDER VOCABULARY (prototype only — hidden with the Notes switch)
   ========================================================================== */
.note { direction: ltr; text-align: left; unicode-bidi: isolate; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 13px; line-height: 1.55;
        background: #FFF6D8; color: #3A3320; border: 1px dashed #C9A94A; border-radius: 8px; padding: 10px 12px; margin: 0 0 var(--sc-5); max-width: 760px; letter-spacing: 0; }
.note b { font-weight: 700; }
.note .st { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin: 2px 4px 0 0; }
.st.ok { background: #DDEFD9; color: #24532A; } .st.gap { background: #F6DADA; color: #7A1E24; } .st.ask { background: #E3E8F2; color: #22385E; } .st.scene { background: #F1E3CC; color: #6A4A17; }
.note--float { position: absolute; z-index: 25; top: 96px; inset-inline-end: var(--sc-gutter); max-width: 360px; }
.note--tag { display: inline-block; margin: 0 0 var(--sc-3); padding: 4px 9px; }
body.notes-off .note { display: none; }
.slot { position: relative; border-radius: var(--sc-r-md); display: grid; place-content: center; text-align: center; padding: var(--sc-6); min-height: 220px; }
.slot span, .slot small { direction: ltr; unicode-bidi: isolate; font-family: "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0; }
.slot span { font-weight: 700; font-size: 14px; }
.slot small { display: block; font-size: 13px; margin-top: 6px; max-width: 34rem; line-height: 1.55; }
.slot--gap { border: 2px dashed #9AA3AD; background: repeating-linear-gradient(135deg, rgba(154,163,173,.10) 0 10px, transparent 10px 20px); color: #4A5560; }
.slot--scene { border: 2px dashed var(--gold); background: rgba(180,137,78,.08); color: #6A4A17; }
.g-dark .slot--gap, .g-navy .slot--gap { color: #BCC2C8; }
.g-dark .slot--scene, .g-navy .slot--scene { color: #E2C38F; }
body.notes-off .slot small { display: none; }
.notes-toggle { position: fixed; z-index: 70; bottom: 16px; inset-inline-end: 16px; direction: ltr; font: 600 12px/1 "IBM Plex Sans", system-ui, sans-serif;
                background: #FFF6D8; color: #3A3320; border: 1px solid #C9A94A; border-radius: 99px; padding: 9px 14px; cursor: pointer; box-shadow: var(--sc-e2); }

/* ---------- the flock trace (mother-hen page, Amir 2026-10-15) ----------
   An instrument trace, drawn LTR and mirrored for RTL. Without .is-live (phones, reduced motion, no JS) everything is
   drawn and every step shows; .is-live pins the stage and draws it as the visitor scrolls. */
.flock { position: relative; }
.flock__stage { padding-block: clamp(64px, 9vw, 120px); }
.flock__trace { position: relative; margin-top: clamp(18px, 3vh, 36px); aspect-ratio: 1200 / 340; border-radius: var(--sc-r-md);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 10%,
    rgba(255,255,255,.015); }
/* v4: the warm wash covers the laying period only, week 24 (48%) to week 64 (96%) */
.flock__trace::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 46%, rgba(226,195,143,.10) 51%, rgba(226,195,143,.06) 95%, transparent 98%); transition: opacity 900ms var(--sc-ease-out); }
html[dir="rtl"] .flock__trace::before { background: linear-gradient(-90deg, transparent 46%, rgba(226,195,143,.10) 51%, rgba(226,195,143,.06) 95%, transparent 98%); }
.flock__trace.is-lit::before, .flock:not(.is-live) .flock__trace::before { opacity: 1; }
.flock__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html[dir="rtl"] .flock__svg { transform: scaleX(-1); }
.flock__s { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.flock__s--hen, .flock__s--one { stroke: #F3EFE4; }
.flock__s--roo { stroke: #D9B27A; }
.flock__s--side { stroke: rgba(243,239,228,.5); stroke-width: 1.6; }
.flock__s--out { stroke: #E58794; stroke-width: 1.6; }
.flock__light { fill: none; stroke: #E2C38F; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(226,195,143,.6)); }
.flock__axis { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.flock__tick { stroke: rgba(255,255,255,.18); stroke-width: 1; }
.flock__gate line { stroke: #E58794; stroke-width: 3; stroke-linecap: round; }
.flock__egg { fill: #F3EFE4; transition: opacity 400ms var(--sc-ease-out); }
.flock__egg.is-small { fill: rgba(243,239,228,.55); }
.flock__egg.is-out { fill: none; stroke: #E58794; stroke-width: 1.5; }
.flock__node circle { fill: #10243A; stroke: rgba(255,255,255,.4); stroke-width: 1.5; transition: fill 300ms, stroke 300ms; }
.flock__node.is-active circle { fill: var(--sc-accent); stroke: var(--sc-accent); }
.flock__labs { position: absolute; inset: 0; pointer-events: none; }
.flock__lab { position: absolute; inset-inline-start: var(--x); top: var(--y); transform: translate(var(--tx, 0), -50%); white-space: nowrap;
  font-size: 13px; line-height: 1.4; color: #BCC2C8; transition: opacity 400ms var(--sc-ease-out); }
html[lang="fa"] .flock__lab { font-size: 14px; }
.flock__lab.is-mid { --tx: -50%; } html[dir="rtl"] .flock__lab.is-mid { --tx: 50%; }
.flock__lab.is-end { --tx: -100%; } html[dir="rtl"] .flock__lab.is-end { --tx: 100%; }
.flock__lab.is-strand { color: #F3EFE4; font-weight: 600; }
.flock__lab.is-roo { color: #D9B27A; }
.flock__lab.is-lux { color: #E2C38F; font-weight: 600; }
.flock__lab.is-chan, .flock__lab.is-axis { color: #8C97A3; font-size: 12px; }
html[lang="fa"] .flock__lab.is-chan, html[lang="fa"] .flock__lab.is-axis { font-size: 13px; }
.flock__lab.is-out { color: #E58794; }
.flock__lab.is-exit { color: #F3EFE4; font-weight: 700; }
.flock__steps { list-style: none; margin: clamp(20px, 3.5vh, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-5); }
.flock__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sc-3); align-items: start; transition: opacity 400ms var(--sc-ease-out); }
.flock__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.4);
  font-family: var(--sc-font-display); font-size: 14px; font-weight: 700; transition: background 300ms, border-color 300ms; }
.flock__step h3 { margin: 2px 0 4px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.flock__step p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--sc-ink-soft); }
html[lang="fa"] .flock__step h3 { line-height: 1.8; }
html[lang="fa"] .flock__step p { font-size: 15px; line-height: 1.9; }
.flock.is-live { height: 380vh; }
.flock.is-live .flock__stage { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-block: 88px 32px; }
.flock.is-live .flock__stage > .wrap { width: 100%; }
.flock.is-live [data-at]:not(.is-on) { opacity: 0; }
.flock.is-live .flock__step { opacity: .4; }
.flock.is-live .flock__step.is-active { opacity: 1; }
.flock.is-live .flock__step.is-active .flock__n { background: var(--sc-accent); border-color: var(--sc-accent); }
.flock .h2 { max-width: none; font-size: clamp(28px, 2.7vw, 40px); }
.flock__lede { margin: var(--sc-3) 0 0; max-width: 66ch; font-size: 16px; line-height: 1.75; color: var(--sc-ink-soft); text-wrap: pretty; }
html[lang="fa"] .flock__lede { font-size: 17px; line-height: 1.95; }
.flock__guide { stroke: rgba(229,135,148,.45); stroke-width: 1; stroke-dasharray: 3 5; }
.flock__tick.is-major { stroke: rgba(255,255,255,.4); }
.flock__tick.is-24 { stroke: #E58794; stroke-width: 2.5; stroke-linecap: round; }
.flock__lab.is-legend { font-weight: 600; color: #F3EFE4; }
.flock__lab.is-legend.is-lux { color: #E2C38F; }
.flock__lab.is-legend.is-roo { color: #D9B27A; }
.flock__lab.is-unit { font-weight: 600; color: #BCC2C8; }
.flock__lab.is-24 { color: #E58794; font-weight: 700; }
.flock__lab.is-node { font-family: var(--sc-font-display); font-size: 12px; font-weight: 700; color: #F3EFE4; line-height: 1; }
html[lang="fa"] .flock__lab.is-node { font-size: 13px; }
.flock__detail { display: none; }
.flock.is-live .flock__step p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flock.is-live .flock__detail { display: block; margin: var(--sc-4) 0 0; max-width: 70ch; min-height: 3.6em; font-size: 17px; line-height: 1.8; color: #F3EFE4; }
html[lang="fa"] .flock.is-live .flock__detail { font-size: 18px; line-height: 2; }

/* flock trace v4 (2026-10-15): the whole cycle, weeks 0–64 — the "before the flock" panel, vaccinations, the surplus
   roosters, the 5% mark, period spans, the end cap and the week counter that rides the ruler */
.flock__grid { stroke: rgba(255,255,255,.05); stroke-width: 1; }
.flock__pre { fill: url(#flockHatch); stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 3 4; }
#flockHatch line { stroke: rgba(255,255,255,.05); stroke-width: 3; }
.flock__prelink { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.flock__pre-base { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.flock__s--vac { stroke: #9FC3D6; stroke-width: 1.6; }
.flock__s--surplus { stroke: rgba(217,178,122,.7); stroke-width: 1.5; }
.flock__span { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.flock__mark { stroke: #E58794; stroke-width: 2.5; stroke-linecap: round; }
.flock__endcap { stroke: #F3EFE4; stroke-width: 3; stroke-linecap: round; }
.flock__lab.is-pre { white-space: normal; width: var(--w); text-align: center; font-weight: 700; color: #F3EFE4; line-height: 1.45; font-size: 12px; }
html[lang="fa"] .flock__lab.is-pre { font-size: 13px; line-height: 1.7; }
.flock__lab.is-prestep { color: #DCD7CB; font-size: 12px; }
html[lang="fa"] .flock__lab.is-prestep { font-size: 13px; }
.flock__lab.is-legend.is-vac { color: #9FC3D6; }
.flock__lab.is-surplus { color: #D9B27A; font-size: 12px; }
html[lang="fa"] .flock__lab.is-surplus { font-size: 13px; }
.flock__lab.is-mark { color: #E58794; font-weight: 600; }
.flock__lab.is-endlab { color: #F3EFE4; font-weight: 700; }
.flock__lab.is-span { color: #8C97A3; font-size: 12px; background: #10243A; padding: 0 8px; }
html[lang="fa"] .flock__lab.is-span { font-size: 13px; }
.flock__cursor { position: absolute; top: 3%; height: 89%; inset-inline-start: var(--x, 0); width: 0; pointer-events: none;
  border-inline-start: 1px solid rgba(243,239,228,.35); opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.flock__cursor span { position: absolute; top: 0; inset-inline-start: 0; transform: translate(-50%, -100%); white-space: nowrap;
  background: #F3EFE4; color: #10243A; font-size: 12px; font-weight: 700; line-height: 1.6; padding: 1px 9px; border-radius: 99px; }
html[dir="rtl"] .flock__cursor span { transform: translate(50%, -100%); }
html[lang="fa"] .flock__cursor span { font-size: 13px; line-height: 1.8; }
.flock.is-live .flock__cursor.is-on { opacity: 1; }
.flock__deck { position: relative; }
.flock__pin { display: none; }
.flock__cards { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-4); }
.flock__card { position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--sc-r-md);
  padding: var(--sc-4) var(--sc-4) var(--sc-5); box-shadow: 0 18px 40px -24px rgba(0,0,0,.6); }
.flock__cap { position: absolute; top: -1px; inset-inline-start: var(--sc-4); width: 32px; height: 3px; background: var(--sc-accent); }
.flock__head { display: flex; align-items: center; gap: var(--sc-3); }
.flock__card h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; }
html[lang="fa"] .flock__card h3 { font-size: 18px; line-height: 1.8; }
.flock__card .flock__n { flex: none; background: var(--sc-accent); border-color: var(--sc-accent); }
.flock__fig { margin: var(--sc-3) 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--sc-2); }
.flock__fig b { font-family: var(--sc-font-display); font-size: 30px; font-weight: 700; line-height: 1.2; color: #E2C38F; }
.flock__fig span { font-size: 13px; color: var(--sc-ink-soft); }
html[lang="fa"] .flock__fig span { font-size: 14px; }
.flock__txt { margin: var(--sc-2) 0 0; font-size: 14.5px; line-height: 1.75; color: #DCD7CB; }
html[lang="fa"] .flock__txt { font-size: 15.5px; line-height: 1.95; }
.flock__node.is-done circle { fill: #F3EFE4; stroke: #F3EFE4; }
.flock__lab.is-node.is-done { color: #10243A; }
.flock.is-live .flock__deck { height: var(--deck-h, 214px); margin-top: 26px; }
.flock__notes { padding-top: clamp(40px, 6vw, 72px); }
.flock__notes .note { margin: 0; }
.flock.is-live .flock__stage { padding-block: 84px 24px; }
.flock.is-live .flock__pin { display: block; position: absolute; width: 1.5px; background: var(--sc-accent); border-radius: 1px;
  transition: left 450ms var(--sc-ease-out); }
.flock.is-live .flock__cards { display: block; position: relative; height: 100%; margin: 0; }
.flock.is-live .flock__card { position: absolute; top: 0; width: min(500px, 100%); opacity: 0; transform: translateY(14px);
  transition: opacity 350ms var(--sc-ease-out), transform 500ms var(--sc-ease-out); pointer-events: none; }
.flock.is-live .flock__card.is-active { opacity: 1; transform: none; pointer-events: auto; }
@media (max-height: 920px) { .flock.is-live .flock__lede { display: none; } }
/* v4: short laptop screens keep the pinned trace and its card inside the viewport */
@media (max-height: 780px) { .flock.is-live .flock__stage .tpg-kicker, .flock.is-live .flock__stage .tpg-rule { display: none; }
  .flock.is-live .flock__stage { padding-block: 72px 12px; } .flock.is-live .flock__deck { margin-top: 18px; } }
@media (max-height: 700px) { .flock.is-live .flock__trace { width: min(100%, calc((100vh - 400px) * 3.53)); } }

/* the egg's road (mother-hen page): a looping illustration with captions that follow the shots */
.eggroad__fig { position: relative; margin: var(--sc-6) 0 0; aspect-ratio: 16 / 9; border-radius: var(--sc-r-md); overflow: clip; background: #0B1622; }
.eggroad__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.eggroad__fig::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11,22,34,.92) 0%, rgba(11,22,34,.7) 22%, rgba(11,22,34,.25) 40%, rgba(11,22,34,0) 55%); }
.eggroad__caps { list-style: none; margin: 0; padding: 0; position: absolute; inset-inline: var(--sc-5); bottom: var(--sc-5); z-index: 1;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-3); }
.eggroad__caps li { display: grid; gap: 6px; align-content: start; border-top: 2px solid rgba(255,255,255,.25); padding-top: var(--sc-2);
  color: rgba(243,239,228,.68); font-size: 14px; line-height: 1.6; transition: color 400ms var(--sc-ease-out), border-color 400ms var(--sc-ease-out); }
html[lang="fa"] .eggroad__caps li { font-size: 15px; line-height: 1.85; }
.eggroad__caps li b { font-family: var(--sc-font-display); font-size: 13px; font-weight: 700; }
.eggroad__caps li.is-on { color: #F3EFE4; border-top-color: var(--sc-accent); }
@media (max-width: 860px) {
  .eggroad__caps { position: static; grid-template-columns: minmax(0, 1fr); padding: var(--sc-4); background: #0B1622; }
  .eggroad__fig { aspect-ratio: auto; }
  .eggroad__v { position: relative; aspect-ratio: 16 / 9; height: auto; }
  .eggroad__fig::after { display: none; }
  .eggroad__caps li { color: #DCD7CB; }
}

/* the flock → the egg's road: one ground, one line. The trace's line runs on down the page with an egg on it. */
.flock + .eggroad { padding-top: 0; border-top: 0; }
.eggroad > .wrap { position: relative; }
.bridge { position: relative; height: clamp(110px, 16vh, 160px); }
/* drawn in page pixels by site.js: from node 3 of the flock trace (laying begins) to the start of the lead line */
.bridge__svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity 500ms var(--sc-ease-out); }
.bridge.is-on .bridge__svg { opacity: 1; }
.bridge__path { fill: none; stroke: rgba(243,239,228,.6); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.bridge__egg { fill: #F3EFE4; filter: drop-shadow(0 0 5px rgba(243,239,228,.5)); }
.flock__node.is-origin circle { stroke: var(--sc-accent); stroke-width: 3; }
.bridge__line { display: none; }
.bridge__lead { margin: var(--sc-3) 0 var(--sc-6); font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.6; color: #F3EFE4; max-width: 40ch; }
html[lang="fa"] .bridge__lead { line-height: 1.9; }
@media (max-width: 860px) {
  .bridge { height: 90px; margin-inline-start: 22px; }
  .bridge__svg { display: none; }
  .bridge__line { display: block; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2px; background: linear-gradient(to bottom, rgba(243,239,228,.05), rgba(243,239,228,.7)); }
}
@media (prefers-reduced-motion: reduce) { .bridge__egg { display: none; } }

/* ---------- the chain rail: the "next link" on every chain page (Amir, 2026-10-15; v2) ---------- */
.chain { background: #0B1622; color: #F3EFE4; padding-block: clamp(48px, 7vw, 88px) clamp(36px, 5vw, 64px); }
.chain__prev { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--sc-5); padding: 7px 14px 7px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); color: #BCC2C8; font-size: 14px; text-decoration: none; transition: border-color 250ms, color 250ms, background 250ms; }
.chain__prev b { color: #F3EFE4; font-weight: 600; }
.chain__prev i { font-style: normal; transition: transform 250ms var(--sc-ease-out); }
.chain__prev:hover, .chain__prev:focus-visible { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.05); color: #F3EFE4; }
.chain__prev:hover i { transform: translateX(-3px); } html[dir="rtl"] .chain__prev:hover i { transform: translateX(3px); }
.chain__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sc-5) var(--sc-7); flex-wrap: wrap; }
.chain__kick { margin: 0; font-size: 14px; font-weight: 600; color: #8C97A3; }
.chain__title { margin: 2px 0 0; font-family: var(--sc-font-display); font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; line-height: 1.3; }
html[lang="fa"] .chain__title { line-height: 1.6; }
.chain__sub { margin: 6px 0 0; font-size: 17px; line-height: 1.7; color: #BCC2C8; }
html[lang="fa"] .chain__sub { font-size: 18px; line-height: 1.9; }
.chain__cta { --prox: 0; --mx: 50%; --my: 50%; --tx: 0px; --ty: 0px; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 28px; border-radius: 999px; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none;
  background: radial-gradient(160px circle at var(--mx) var(--my), rgba(255,255,255, calc(.08 + .22 * var(--prox))), transparent 60%), var(--sc-accent);
  transform: translate(var(--tx), var(--ty));
  box-shadow: 0 10px 30px -12px rgba(200,16,46,.7), 0 0 calc(10px + 34px * var(--prox)) calc(2px * var(--prox)) rgba(229,64,90, calc(.15 + .45 * var(--prox)));
  filter: brightness(calc(1 + .14 * var(--prox)));
  transition: transform 220ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out), filter 300ms; }
.chain__cta i { font-style: normal; display: inline-block; transition: transform 300ms var(--sc-ease-out); }
.chain__cta:hover i { transform: translateX(5px); } html[dir="rtl"] .chain__cta:hover i { transform: translateX(-5px); }
.chain__cta:focus-visible { outline: 2px solid #F3EFE4; outline-offset: 4px; }
.chain__rail { --pad: 28px; position: relative; height: 196px; margin-top: clamp(24px, 4vw, 40px); }
.chain__track, .chain__done, .chain__ahead { position: absolute; top: 124px; height: 2px; inset-inline-start: var(--pad); }
.chain__track { inset-inline-end: var(--pad); background: rgba(255,255,255,.14); }
.chain__done { width: calc(var(--cur) * (100% - 2 * var(--pad))); background: #F3EFE4; }
.chain__ahead { inset-inline-start: calc(var(--pad) + var(--cur) * (100% - 2 * var(--pad))); width: calc(.25 * (100% - 2 * var(--pad)));
  background: repeating-linear-gradient(90deg, #E58794 0 6px, transparent 6px 12px); background-size: 12px 2px; animation: chainAhead 900ms linear infinite; }
@keyframes chainAhead { to { background-position: 12px 0; } }
html[dir="rtl"] .chain__ahead { animation-direction: reverse; }
.chain__stops { list-style: none; margin: 0; padding: 0; position: absolute; inset-inline: 0; top: 98px; display: flex; justify-content: space-between; }
.chain__stop { width: 56px; position: relative; }
.chain__stop > a, .chain__stop > span { display: grid; justify-items: center; color: inherit; text-decoration: none; }
.chain__dot { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #0B1622; border: 1.5px solid rgba(255,255,255,.22);
  color: rgba(243,239,228,.45); transition: background 300ms, border-color 300ms, color 300ms, transform 250ms var(--sc-ease-out); }
.chain__dot svg { width: 26px; height: 26px; }
.chain__stop > a:hover .chain__dot, .chain__stop > a:focus-visible .chain__dot { transform: scale(1.08); border-color: rgba(255,255,255,.6); color: #F3EFE4; }
.chain__stop > a:focus-visible { outline: none; }
.chain__name { position: absolute; top: 62px; white-space: nowrap; font-size: 13px; color: rgba(243,239,228,.5); text-align: center; transition: color 250ms; }
html[lang="fa"] .chain__name { font-size: 14px; }
.chain__stop > a:hover .chain__name { color: #F3EFE4; }
.chain__name b { font-family: var(--sc-font-display); font-weight: 700; margin-inline-end: 6px; }
.chain__stop:first-child .chain__name { inset-inline-start: 0; } .chain__stop:last-child .chain__name { inset-inline-end: 0; }
.chain__stop.is-done .chain__dot { background: #F3EFE4; border-color: #F3EFE4; color: #10243A; }
.chain__stop.is-here .chain__dot { border: 3px solid var(--sc-accent); color: #F3EFE4; }
.chain__stop.is-here .chain__name { color: #F3EFE4; font-weight: 700; }
.chain__stop.is-next .chain__dot { border-color: #E58794; color: #F3EFE4; animation: chainPulse 1.8s ease-out infinite; }
.chain__stop.is-next .chain__name { color: #F3EFE4; }
@keyframes chainPulse { 0% { box-shadow: 0 0 0 0 rgba(229,135,148,.55); } 100% { box-shadow: 0 0 0 14px rgba(229,135,148,0); } }
.chain__stop.is-arriving .chain__dot { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; animation: none; transform: scale(1.12); }
/* the truck */
.chain__truck { --at: 0; --dur: 1000ms; position: absolute; top: 4px; width: 150px; height: 71px; inset-inline-start: calc(var(--pad) + var(--at) * (100% - 2 * var(--pad)));
  transform: translateX(-50%); transition: inset-inline-start var(--dur) cubic-bezier(.55,0,.2,1), opacity 300ms; pointer-events: none; }
html[dir="rtl"] .chain__truck { transform: translateX(50%); }
.chain__truck.is-out { opacity: 0; }
.chain__veh { --face: 1; width: 100%; height: 100%; display: block; overflow: visible; transform: scaleX(var(--face)); transition: transform 280ms var(--sc-ease-out); }
.chain__logo { transform-box: fill-box; transform-origin: center; transform: scaleX(var(--face)); }
.chain__body { animation: chainIdle 520ms ease-in-out infinite alternate; }
@keyframes chainIdle { to { transform: translateY(.5px); } }
.chain__puffs { opacity: 0; }
.chain__truck.is-driving .chain__body { animation: chainBob 240ms ease-in-out infinite alternate; }
.chain__truck.is-driving .chain__wheel { animation: chainWheel 420ms linear infinite; }
.chain__truck.is-driving .chain__puffs { animation: chainPuff 600ms ease-out infinite; }
.chain__truck.is-eager .chain__beam { opacity: 1; }
.chain__beam { opacity: .35; transition: opacity 300ms; }
@keyframes chainBob { to { transform: translateY(-1.2px); } }
@keyframes chainWheel { to { transform: rotate(360deg); } }
@keyframes chainPuff { 0% { opacity: .9; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-14px, -8px) scale(1.4); } }
.chain__here { margin: 6px 0 0; font-size: 13px; color: rgba(243,239,228,.5); }
.chain__here b { color: #F3EFE4; font-weight: 600; }
@media (max-width: 700px) {
  .chain__rail { --pad: 20px; height: 150px; }
  .chain__dot { width: 40px; height: 40px; } .chain__dot svg { width: 20px; height: 20px; }
  .chain__stop { width: 40px; }
  .chain__stops { top: 84px; } .chain__track, .chain__done, .chain__ahead { top: 104px; }
  .chain__name { display: none; }
  .chain__truck { width: 104px; height: 49px; top: 22px; }
  .chain__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .chain__ahead, .chain__stop.is-next .chain__dot, .chain__body { animation: none; }
  .chain__truck { transition: none; }
}

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .pg-copy { inset-inline: var(--sc-gutter); max-width: none; bottom: clamp(3.5rem, 10vh, 6rem); }
  .pg-copy .sc-display { font-size: var(--sc-t-3xl); max-width: none; }
  .tpg-scrim { background: linear-gradient(to top, rgba(11,22,34,.97) 0%, rgba(11,22,34,.9) 40%, rgba(11,22,34,.45) 62%, rgba(11,22,34,0) 82%); }
  .grid--2, .grid--3, .people, .split { grid-template-columns: minmax(0, 1fr); }
  .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flock__trace { display: none; }
  .flock__cards { grid-template-columns: minmax(0, 1fr); }
  .flock__steps { grid-template-columns: minmax(0, 1fr); gap: var(--sc-5); position: relative; }
  .flock__steps::before { content: ""; position: absolute; inset-block: 15px; inset-inline-start: 14px; width: 1.5px; background: rgba(255,255,255,.2); }
  .flock__n { position: relative; background: #10243A; }
  .plan__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "txt"; }
  .stats--3 > li:last-child { grid-column: 1 / -1; }
  .note--float { position: static; margin: 0; max-width: none; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .pg-hero__img img { transform: none; } }

/* the toll film (hatchery page, 2026-10-16): text column, a lead line, then the egg's-road film full width */
.toll__text { max-width: 760px; }
.toll__lead { margin: clamp(36px, 5vw, 64px) 0 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1.6; color: var(--sc-ink); }
html[lang="fa"] .toll__lead { line-height: 1.9; }
.toll__fig { margin-top: var(--sc-4); }
.eggroad__caps--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 860px) { .eggroad__caps--6 { grid-template-columns: minmax(0, 1fr); } }


/* buyer's checks as chips (hatchery section 4, 2026-10-18) */
.chips { list-style: none; margin: var(--sc-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 14px; border-radius: 999px; font-weight: 700; font-size: 16px;
  line-height: 1.5; background: #FFFFFF; border: 1px solid var(--tpg-hair); color: var(--sc-ink); box-shadow: 0 6px 16px -12px rgba(16,36,58,.35); }
html[lang="fa"] .chips li { font-size: 17px; line-height: 1.7; padding: 6px 14px 6px 16px; }
.chips li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--sc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.3 5-5.2' fill='none' stroke='%23F3EFE4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.chips__cta { margin: var(--sc-6) 0 0; }

/* hatchery section 5 v2 (2026-10-18): the aerial build scene full width under the text */
.hplan__fig { margin-top: clamp(36px, 5vw, 64px); }
.hplan__wider { margin-top: var(--sc-5); }
.hplan__wider a { color: #F3EFE4; font-weight: 700; white-space: nowrap; text-underline-offset: .3em; }

/* ===== the machine (hatchery section 3, generated by site-gen/machine.py) ===== */
.mc .h2 { max-width: none; }
.mc__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.mc__stagewrap { padding-top: 64px; }
.mc__stage { position: relative; aspect-ratio: 1000 / 560; }
.mc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
html[dir="rtl"] .mc__svg { transform: scaleX(-1); }
.mc__floor { stroke: rgba(255,255,255,.14); stroke-width: 2; }
.mc__body { fill: url(#mcBody); } .mc__side { fill: #B9B5AA; } .mc__head { fill: #ECE9E1; }
.mc__disp { fill: #0B141D; } .mc__plate { fill: #DCD8CE; stroke: rgba(0,0,0,.08); }
.mc__led { fill: #D2232A; transition: fill .4s; }
.is-run-setter .mc__setter .mc__led, .is-run-hatcher .mc__hatcher .mc__led { fill: #3DDC84; filter: drop-shadow(0 0 4px #3DDC84); }
.mc__cavity { fill: #121B25; } .mc__inner line { stroke: rgba(255,255,255,.05); stroke-width: 2; }
.mc__plinth { fill: #8E949C; }
.mc__door { fill: url(#mcDoor); } .mc__panel { fill: none; stroke: rgba(0,0,0,.13); stroke-width: 2; }
.mc__shade { fill: #000; opacity: 0; transition: opacity .9s; }
.mc__handle { fill: #4B4F55; } .mc__rim { fill: #A8844A; } .mc__glass { fill: #2A3440; transition: fill .6s; }
.mc__glint { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 2; stroke-linecap: round; }
.is-run-setter .mc__setter ~ .mc__doors--setter .mc__glass, .is-run-setter .mc__doors--setter .mc__glass,
.is-run-hatcher .mc__doors--hatcher .mc__glass { fill: #E9A24E; animation: mcGlow 1.6s ease-in-out infinite alternate; }
@keyframes mcGlow { from { fill: #D88C3C; } to { fill: #F3B866; } }
.mc__leaf { transform-box: fill-box; transition: transform .9s cubic-bezier(.5,0,.2,1); }
.mc__leaf--l { transform-origin: left center; } .mc__leaf--r { transform-origin: right center; }
.is-setter-open .mc__doors--setter .mc__leaf, .is-hatcher-open .mc__doors--hatcher .mc__leaf { transform: scaleX(.1); }
.is-setter-open .mc__doors--setter .mc__shade, .is-hatcher-open .mc__doors--hatcher .mc__shade { opacity: .35; }
.mc__post { fill: #7B8592; } .mc__tray { fill: #CFC6B0; } .mc__wheel { fill: #262C34; }
.mc__egg { fill: #F2E6CE; stroke: rgba(0,0,0,.18); stroke-width: .8; } .mc__egg.is-b { fill: #E4CBA0; }
.mc__rack { transform: translateX(-316px); transition: transform 1.3s cubic-bezier(.45,0,.2,1), opacity .5s; }
.is-rack-in .mc__rack { transform: none; }
.is-rack-gone .mc__rack { transform: translateX(-316px); opacity: 0; }
.mc__bsk { fill: #3C9A4D; } .mc__slat { stroke: #2A7A3A; stroke-width: 2; }
.mc__baskets { transform: translateX(300px); opacity: 0; transition: transform 1.3s cubic-bezier(.45,0,.2,1), opacity .4s; }
.is-baskets-in .mc__baskets { transform: none; opacity: 1; }
.mc__chicks { opacity: 0; transition: opacity .8s .4s; } .mc__beggs { transition: opacity .6s .4s; }
.is-hatched .mc__chicks { opacity: 1; } .is-hatched .mc__beggs { opacity: 0; }
.mc__chick circle { fill: #F7D54A; } .mc__chick .mc__chead { fill: #F9DD62; } .mc__beak { fill: #E08A1E; }
/* overlays on the drawing: names and the day counter on the display */
.mc__ov { position: absolute; inset-inline-start: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; }
html[dir="rtl"] .mc__ov { transform: translate(50%, -50%); }
.mc__name { font-size: clamp(10px, 1.15vw, 14px); font-weight: 700; color: #3B4148; }
.mc__count { font-family: var(--sc-font-display); font-size: clamp(11px, 1.35vw, 17px); font-weight: 700; color: #FFB547; text-shadow: 0 0 6px rgba(255,181,71,.55); opacity: 0; transition: opacity .3s; }
.mc__count.is-on { opacity: 1; }
/* the button sits on top of the active machine */
.mc__btn { position: absolute; inset-inline-start: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, calc(-100% - 12px));
  transition: inset-inline-start .6s cubic-bezier(.5,0,.2,1), background .3s, opacity .3s;
  font: inherit; font-weight: 700; font-size: 15px; line-height: 1.4; color: #F3EFE4; background: var(--sc-accent); border: 0; border-radius: 999px;
  padding: 11px 22px; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(200,16,46,.7); }
html[dir="rtl"] .mc__btn { transform: translate(50%, calc(-100% - 12px)); }
html[lang="fa"] .mc__btn { font-size: 16px; }
.mc__btn::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid rgba(200,16,46,.55); animation: mcPing 1.8s ease-out infinite; pointer-events: none; }
@keyframes mcPing { from { opacity: .9; transform: scale(.96); } to { opacity: 0; transform: scale(1.12); } }
.mc__btn:hover:not(:disabled) { background: #DF1A39; }
.mc__btn:disabled { background: #33465A; color: #BCC2C8; cursor: default; box-shadow: none; }
.mc__btn:disabled::after { display: none; }
.mc:not(.is-js) .mc__btn, .mc:not(.is-js) .mc__info { display: none; }
/* the info column */
.mc__tag { margin: 0; font-size: 13px; font-weight: 700; color: var(--tpg-kicker); }
.mc__title { margin: 6px 0 0; font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.4; }
html[lang="fa"] .mc__title { line-height: 1.7; }
.mc__text { margin: 10px 0 0; font-size: 17px; line-height: 1.75; color: var(--sc-ink-soft); }
html[lang="fa"] .mc__text { font-size: 18px; line-height: 2; }
.mc__lens { display: none; margin: 20px 0 0; }
.mc[data-step="3"] .mc__lens, .mc[data-step="4"] .mc__lens, .mc[data-step="5"] .mc__lens, .mc[data-step="6"] .mc__lens { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
.mc__candle { width: 132px; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 34px -6px rgba(244,174,87,.45); }
.mc__lens-cap { font-size: 13px; color: var(--sc-ink-soft); }
.mc__egg-g { transform-box: view-box; transform-origin: 100px 130px; transition: transform 1.2s cubic-bezier(.5,0,.2,1); }
.is-run-setter .mc__egg-g { transition: none; }
.is-flat .mc__egg-g { transform: rotate(90deg); }
.mc__shell { fill: none; stroke: rgba(255,240,210,.55); stroke-width: 1.5; }
.mc__mass { fill: #4A1A0C; } .mc__dark { fill: #2E0F06; opacity: 0; }
.mc__air { fill: #FFF4DC; opacity: .62; } .mc__airline { fill: none; stroke: rgba(120,60,20,.5); stroke-width: 1.2; }
.mc__beakd { fill: #24100A; opacity: 0; } .mc__eye { fill: #1B0A05; } .mc__crack { fill: none; stroke: #24100A; stroke-width: 2.2; stroke-linejoin: round; opacity: 0; }
.mc__heart { fill: #E0301E; transform-box: fill-box; transform-origin: center; animation: mcBeat .9s ease-in-out infinite; }
@keyframes mcBeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.7); } }
.mc__tick { display: none; margin: 16px 0 0; padding: 16px 18px; border-radius: var(--sc-r-md); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.mc[data-step="3"] .mc__tick, .mc[data-step="4"] .mc__tick, .mc[data-step="5"] .mc__tick, .mc[data-step="6"] .mc__tick { display: block; }
.mc[data-step="4"] .mc__tick, .mc[data-step="6"] .mc__tick { opacity: .55; }
.mc__day { display: inline-block; font-family: var(--sc-font-display); font-weight: 700; font-size: 13px; color: #10243A; background: #FFB547; border-radius: 99px; padding: 1px 10px; }
.mc__fact { margin: 8px 0 0; min-height: 3.6em; font-size: 16.5px; line-height: 1.75; color: #F3EFE4; }
html[lang="fa"] .mc__fact { font-size: 17.5px; line-height: 2; }
.mc__fact.is-in { animation: mcIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes mcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mc__dots { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 6px; }
.mc__dots li { width: 18px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); transition: background .3s; }
.mc__dots li.is-done { background: rgba(255,181,71,.6); } .mc__dots li.is-on { background: #FFB547; }
.mc__skip { margin: 10px 0 0; font: inherit; font-size: 13px; font-weight: 600; color: #BCC2C8; background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: 3px 12px; cursor: pointer; }
.mc__skip:hover { color: #F3EFE4; border-color: rgba(255,255,255,.4); }
.mc__quote { display: none; margin: 20px 0 0; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; padding: 16px; border-radius: var(--sc-r-md); background: rgba(255,255,255,.05); border-inline-start: 3px solid var(--sc-accent); }
.mc[data-step="2"] .mc__quote { display: grid; animation: mcIn .5s cubic-bezier(.2,.7,.2,1); }
.mc__quote img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; grid-row: span 2; }
.mc__quote blockquote { margin: 0; } .mc__quote blockquote p { margin: 0; font-size: 15.5px; line-height: 1.8; color: #F3EFE4; }
html[lang="fa"] .mc__quote blockquote p { font-size: 16.5px; line-height: 2; }
.mc__quote figcaption { display: grid; gap: 2px; font-size: 13px; color: var(--sc-ink-soft); }
.mc__quote figcaption b { color: #F3EFE4; font-size: 14px; } .mc__quote small { font-size: 12.5px; }
.mc__next { display: none; margin: 18px 0 0; font-weight: 700; color: #F3EFE4; }
.mc[data-step="6"] .mc__next { display: inline-block; }
.mc__all { margin: clamp(28px, 4vw, 44px) 0 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; color: var(--sc-ink-soft); }
.mc__all summary { cursor: pointer; font-weight: 600; color: #F3EFE4; }
.mc__all h3 { margin: 18px 0 4px; font-size: 16px; color: #F3EFE4; }
.mc__all ol { margin: 0; padding-inline-start: 0; list-style: none; display: grid; gap: 4px; }
.mc__all li b { color: #FFB547; font-weight: 700; margin-inline-end: 6px; }
.mc__all p { margin: 4px 0 0; max-width: 70ch; } .mc__src { font-size: 13px; opacity: .8; margin-top: 16px !important; }
@media (max-width: 860px) {
  .mc__grid { grid-template-columns: minmax(0, 1fr); }
  .mc__stagewrap { padding-top: 0; }
  .mc__btn { position: relative; inset-inline-start: auto; top: auto; transform: none !important; display: block; width: 100%; margin-top: 14px; white-space: normal; }
  .mc__stage { margin-bottom: 64px; }
  .mc__stage .mc__btn { position: absolute; top: 100%; inset-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mc__leaf, .mc__rack, .mc__baskets, .mc__egg-g, .mc__btn { transition: none !important; }
  .mc__btn::after, .mc__heart, .mc__glass { animation: none !important; }
}
/* ===== end machine ===== */

/* keep a number with its unit on one line (feed copy v2, 2026-10-19) */
.nw { white-space: nowrap; }

/* broiler farms v2 (2026-10-19): farm cards that show the home map's 3D model until a real photo arrives */
.tile-c--model { background: radial-gradient(120% 90% at 50% 35%, #F3EEE2 0%, #DCD3C1 60%, #C9BEA8 100%); }
.tile-c--model > img { inset: 4% 8% 30% 8%; width: 84%; height: 66%; object-fit: contain; }
.tile-c--model .planfig__tag { z-index: 2; }
/* farm cards on phones (2026-10-19): two columns at 4/3 cut the titles; give them height and smaller type */
@media (max-width: 560px) {
  .grid--4 > .site-card .tile-c { aspect-ratio: 3 / 4; }
  .grid--4 > .site-card .tile-c__body { inset-inline: var(--sc-3); bottom: var(--sc-3); }
  .grid--4 > .site-card .tile-c__body i { margin-bottom: var(--sc-2); }
  .grid--4 > .site-card .tile-c__body b { font-size: 16px; }
  .grid--4 > .site-card .tile-c__body span { font-size: 12px; }
}

/* the feed claim (2026-10-19): the number inside the heading, at the old stat's size */
.h2--claim { line-height: 1.35; max-width: none; text-wrap: wrap; }
.h2__big { font-size: clamp(52px, 7vw, 96px); line-height: 1.05; font-variant-numeric: tabular-nums; margin-inline-end: .14em; }
html[lang="fa"] .h2--claim { line-height: 1.6; }
/* About team groups (2026-10-19): three across on desktop, two on tablets, one on phones (was an inline style that beat the phone rule) */
.people--3 { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .people--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .people--3 { grid-template-columns: minmax(0, 1fr); } }
/* farm cards with no photo yet (2026-10-19): a realistic view built from the satellite image, always tagged «تصویرسازی» */
.tile-c--illus .planfig__tag { z-index: 2; }

/* about v2 (2026-10-20): the founders in the hero, side by side on every screen; six-step timeline; the «امروز» tile links on */
.about-hero { width: 100%; max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 5vw, 80px); align-items: end; }
.founders--hero { gap: var(--sc-4); }
.founders--hero .note { grid-column: 1 / -1; }
@media (max-width: 860px) { .about-hero { grid-template-columns: minmax(0, 1fr); } .founders--hero { max-width: 520px; } }
.grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* two rows of three: six columns broke the place names */
@media (max-width: 600px) { .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile-a--go { display: block; text-decoration: none; transition: border-color .2s, transform .2s; }
.tile-a--go:hover, .tile-a--go:focus-visible { transform: translateY(-2px); border-color: var(--sc-accent); }
html[lang="fa"] .tile-a--go h3::after { content: " ←"; color: var(--sc-accent); }
html[lang="en"] .tile-a--go h3::after { content: " →"; color: var(--sc-accent); }
@media (max-width: 520px) { .founders--hero figcaption b { font-size: 15px; } .founders--hero figcaption span { font-size: 12.5px; } }   /* both names on one line, so neither founder looks bigger */

/* licences (2026-10-20): one card per site, real dates, no scans */
.lics .tile-a h3 { margin-bottom: var(--sc-3); }
.lic__kind { font-size: 13px !important; font-weight: 600; color: var(--sc-accent) !important; margin-bottom: 2px !important; }
.lic__by { font-size: 13.5px !important; }
.lic__until { margin-top: var(--sc-3) !important; color: #23262B !important; font-weight: 600; }
.lic__no { font-size: 13px !important; }
@media (max-width: 860px) { .lics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lics { grid-template-columns: minmax(0, 1fr); } }

/* badges (2026-10-20): one family of round marks in the brand's own type and colours; no third-party logos */
.badges { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 32px); }
.badge { width: 148px; aspect-ratio: 1; border-radius: 50%; background: #fff; color: #10243A; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 18px; gap: 4px;
  border: 2px solid #10243A; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px rgba(16,36,58,.35); }
.badge__t { font-size: 12px; font-weight: 600; line-height: 1.35; color: #5E6B7A; }
.badge__m { font-family: var(--sc-font-display); font-size: 19px; font-weight: 700; line-height: 1.3; }
.badge--latin .badge__m { font-size: 30px; letter-spacing: .02em; }
.badge--latin .badge__t, .badge__b { font-family: var(--sc-font-display); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: #10243A; }
.badge__r { display: block; width: 22px; height: 3px; background: var(--sc-accent); border-radius: 2px; margin-top: 4px; }
html[lang="en"] .badge__m { font-size: 17px; }
html[lang="en"] .badge--latin .badge__m { font-size: 30px; }
@media (max-width: 560px) { .badges { gap: 12px; justify-content: center; } .badge { width: 104px; padding: 10px; }
  .badge__m { font-size: 14px; } .badge--latin .badge__m { font-size: 22px; } .badge__t { font-size: 10.5px; } .badge__b, .badge--latin .badge__t { font-size: 11px; }
  html[lang="en"] .badge__m { font-size: 13px; } html[lang="en"] .badge--latin .badge__m { font-size: 22px; } }
.lic-list { width: 100%; max-width: 760px; margin-top: 20px; border-collapse: collapse; font-size: 14.5px; }
.lic-list th { text-align: start; font-size: 12.5px; font-weight: 600; color: var(--sc-ink-soft); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--tpg-hair); }
.lic-list td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--tpg-hair); white-space: nowrap; }
.lic-list td.ltr { font-size: 13px; color: var(--sc-ink-soft); text-align: start; }
@media (max-width: 560px) { .lic-list { font-size: 13px; } .lic-list th, .lic-list td { padding-inline-end: 8px; } .lic-list th:nth-child(4), .lic-list td:nth-child(4) { display: none; } .lic-list td:nth-child(-n+2) { white-space: normal; } }   /* EN names are long: let site + licence wrap on phones (2026-10-24) */

/* official marks (2026-10-20): logos at one optical height, no frames, nothing written under them */
.marks { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3.4vw, 48px); }
.mark { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mark img { height: 112px; width: auto; display: block; }
.mark--iso img { height: 86px; }
.mark--iso span { font-family: "IBM Plex Sans", Arial, sans-serif; font-weight: 700; font-size: 17px; color: #022899; letter-spacing: .02em; }
.mark--emblem img { height: 100px; }
@media (max-width: 560px) { .marks { gap: 18px 22px; justify-content: center; } .mark img { height: 78px; } .mark--iso img { height: 60px; }
  .mark--iso span { font-size: 13px; } .mark--emblem img { height: 70px; } }

/* story photo + recognition shelf (2026-10-20) */
.story-split { align-items: start; margin-top: 4px; }
.archive { margin: 8px 0 0; }
.archive img { width: 100%; display: block; border-radius: var(--sc-r-md); box-shadow: 0 18px 40px -22px rgba(16,36,58,.55); }
.archive figcaption { margin-top: 10px; font-size: 14px; color: var(--sc-ink-soft); }
.trophies { --rx: 0deg; --ry: 0deg; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(40px, 8vw, 120px);
  margin-top: 40px; padding: 40px 0 0; perspective: 1100px;
  background: radial-gradient(60% 40% at 50% 100%, rgba(255,255,255,.07), transparent 70%); border-bottom: 1px solid rgba(255,255,255,.14); }
.trophy { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 320px; }
.trophy__obj { transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.trophy__obj img { display: block; height: clamp(260px, 30vw, 380px); width: auto; filter: drop-shadow(0 24px 22px rgba(0,0,0,.55));
  -webkit-box-reflect: below 2px linear-gradient(transparent 72%, rgba(255,255,255,.16)); }
.trophy figcaption { margin-top: 64px; font-size: 14px; line-height: 1.7; color: var(--sc-ink-soft); text-align: center; }
@media (max-width: 560px) { .trophies { gap: 36px; } .trophy__obj img { height: 240px; } .trophy figcaption { margin-top: 48px; } }
@media (prefers-reduced-motion: reduce) { .trophy__obj { transition: none; transform: none; } }
.trophies { align-items: flex-start; }
.trophy__obj { height: clamp(260px, 30vw, 380px); display: flex; align-items: flex-end; justify-content: center; }   /* both stand on one shelf line; captions start level */
@media (max-width: 560px) { .trophy__obj { height: 240px; } }

/* contact v2 (2026-10-21): one-tap contact buttons, the enquiry form, map apps */
.contact-hero { min-height: auto; padding-top: 150px; }
/* contact card (Amir 2026-10-24: one neat card instead of six loose buttons) */
.ccard { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 6px 26px; }
.ccard__row { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); color: var(--sc-ink); text-decoration: none; }
.ccard__row:first-child { border-top: 0; }
.ccard__row--tel { align-items: flex-start; }
.ccard__ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(229,135,148,.13); color: #E58794; }
.ccard__ico svg { width: 20px; height: 20px; fill: currentColor; }
.ccard__ico--wa { background: rgba(31,168,85,.18); color: #3DD07A; }
.ccard__body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ccard__label { margin: 0; font-size: 13px; color: var(--sc-ink-soft); }
.ccard__val { font-size: 18px; font-weight: 600; }
.ccard__val.ltr { justify-self: start; }   /* numbers and the address read LTR but sit on the reading side, under their label */
.ccard__tels { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 30px; margin-top: 2px; }
.ccard__tels a { color: var(--sc-ink); text-decoration: none; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ccard__tels a:hover, .ccard__tels a:focus-visible, a.ccard__row:hover .ccard__val, a.ccard__row:focus-visible .ccard__val { text-decoration: underline; text-decoration-color: #C8102E; text-underline-offset: 6px; }
.ccard__go::after { content: "←"; color: #E58794; font-size: 18px; display: inline-block; transition: transform .2s; }
html[dir="ltr"] .ccard__go::after { content: "→"; }
a.ccard__row:hover .ccard__go::after { transform: translateX(-4px); }
html[dir="ltr"] a.ccard__row:hover .ccard__go::after { transform: translateX(4px); }
.enq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.enq__form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; background: #fff; border: 1px solid var(--tpg-hair); border-top: 3px solid var(--sc-accent);
  border-radius: var(--sc-r-md); padding: clamp(20px, 3vw, 36px); }
.fld { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fld > span, .fld legend { font-size: 14px; font-weight: 600; color: #23262B; padding: 0; }
.fld input, .fld textarea { font: inherit; font-size: 16px; color: #23262B; background: #FAF8F1; border: 1px solid #D9D3C4; border-radius: 10px; padding: 12px 14px; width: 100%; }
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; background: #fff; }
.fld textarea { resize: vertical; min-height: 110px; }
.fld--need, .fld--wide, .enq__send, .enq__msg, .enq__privacy { grid-column: 1 / -1; }
.fld--need { display: flex; flex-wrap: wrap; gap: 8px; }
.fld--need legend { width: 100%; margin-bottom: 8px; float: inline-start; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; }
.chip span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid #D9D3C4; background: #FAF8F1; font-size: 15px; cursor: pointer; transition: all .15s; }
.chip input:checked + span { background: #10243A; border-color: #10243A; color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.fld.is-bad input, .fld.is-bad textarea, .fld--need.is-bad .chip span { border-color: var(--sc-accent); }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.enq__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.enq__send .cta { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.enq__send .cta[disabled] { opacity: .6; cursor: progress; }
.enq__alt { color: #1A9149; font-weight: 600; font-size: 15px; }
.enq__msg { margin: 0; font-size: 15px; font-weight: 600; min-height: 1px; }
.enq__msg.is-ok { color: #1A7A3E; } .enq__msg.is-err { color: var(--sc-accent); }
.enq__privacy { margin: 0; font-size: 13px; color: #5E6B7A; }
@media (max-width: 860px) { .enq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .enq__form { grid-template-columns: minmax(0, 1fr); } .ccard { padding: 4px 18px; } .ccard__ico { width: 38px; height: 38px; } .ccard__tels { gap: 8px 18px; } .ccard__tels a, .ccard__val { font-size: 16px; } }
.maps-h { margin: 24px 0 10px; font-size: 14px; font-weight: 600; color: var(--sc-ink-soft); }
.maps { display: flex; flex-wrap: wrap; gap: 10px; }
.mapbtn { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid #D9D3C4; background: #fff; color: #23262B; text-decoration: none; font-weight: 600; font-size: 15px; }
.mapbtn:hover, .mapbtn:focus-visible { border-color: var(--sc-accent); color: var(--sc-accent); }
.office-fig { position: relative; margin: 0; }
.office-fig img { width: 100%; max-width: 520px; display: block; margin-inline: auto; filter: drop-shadow(0 22px 26px rgba(16,36,58,.18)); }

/* contact: hero with the team photo beside the buttons; the head office with a live map (2026-10-21) */
.contact-hero__grid { width: 100%; max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.contact-hero__grid .pg-copy { max-width: none; }
.contact-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); }   /* copy | contact card (2026-10-24) */
.contact-team-slot { grid-column: 1 / -1; }   /* the team photo (a note until it arrives) spans below both */
@media (max-width: 900px) { .contact-hero__grid { grid-template-columns: minmax(0, 1fr); } }
.office-addr { margin-top: 14px; }
.office-mark { margin-top: 6px; color: var(--sc-ink-soft); }
.office-map { border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--tpg-hair); box-shadow: 0 18px 40px -24px rgba(16,36,58,.45); background: #E9E4D8; aspect-ratio: 4 / 3; }
.office-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* privacy page (Amir ✔ 2026-10-24) */
.pg-hero--short { min-height: 40svh; padding-inline: 0; }
.pg-hero--short h1 { margin: 0; }
.privacy { max-width: 46rem; display: grid; gap: var(--sc-5); }
.privacy p { margin: 0; font-size: 18px; line-height: 1.85; }
.privacy a { color: inherit; text-decoration-color: #C8102E; text-underline-offset: 4px; }

/* the renewal line under the ISO / HACCP / GMP badges (2026-10-24) */
.marks__renew { margin: 14px 0 0; font-size: 14px; color: var(--sc-ink-soft); }