/* Israel Canada, resolutions (Ori, 26.10: "a full desktop, notebook and mobile pass").
   The base stylesheets are the 1920 design (fluid gutters). This file adapts it, loaded last:
   1. Notebook widths (1024 to 1599): the same layout, tightened where it collided.
   2. Short screens (notebook browsers leave 650 to 800 px of height): the hero, the guide and the
      lead modal fit the fold.
   3. Mobile and tablet (under 1024): journey spec §8. Sections stack, the composer and the
      contact actions wait in a bottom bar, the guide is a sheet, the project page scrolls. */

/* ═════════════ 0. Large desktop (2200 and up: 2560 monitors) ═════════════ */
/* The 1920 design at the same proportions: wider content, larger display type. */
@media (min-width: 2200px) {
  :root { --content: 1880px; --hero-col: min(1000px, calc(100vw - 2 * var(--gutter))); --hero-logo: min(380px, 31vh); }
  .hero__sub { font-size: 32px; line-height: 52px; }
  .composer__input { font-size: 20px; }
  .t-section { font-size: 44px; line-height: 52px; }
  .t-display-xl { font-size: 72px; line-height: 78px; }
  .t-display-m { font-size: 40px; line-height: 48px; }
  .dock .dock__composer { width: 720px; } /* outranks the general width rule below */
  .stat__num { font-size: 88px; line-height: 88px; }
}

/* Hidden from 1024 up: the phone's bottom bar and the project page's guide button. */
.mbar, .pid__guide { display: none; }

/* ═════════════ 1. Notebook ═════════════ */

/* The header composer keeps clear of the brand and the actions on either side (v4: the actions, WhatsApp's icon,
   "קביעת פגישה" and the share button, are the wider side at 240; the brand is 220, 180 under 1280). */
.dock__composer { width: min(624px, calc(100vw - 2 * (var(--edge) + 240px + 24px))); }

@media (max-width: 1599px) {
  .t-display-xl { font-size: 52px; line-height: 56px; }
  .group { padding-block: 96px; }
  .group__inner { gap: 72px; }
  .stat__num { font-size: 64px; line-height: 64px; }
  .finale { min-height: 920px; }
  .finale__card { grid-template-columns: minmax(0, 1fr) 544px; }
  .finale__copy { padding: 40px; }
  .footer__cols { gap: 64px; }
  .fcol__phone { font-size: 60px; line-height: 60px; }
  /* the area cards' "to the area's projects" pill becomes an arrow, so long names (מרכז ודרום תל אביב-יפו)
     keep their line */
  .acard .pill--m { width: 44px; padding: 0; flex: none; }
  .acard .pill--m .t-label-m { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the project page's window between the card and the guide narrows: the strip scrolls sideways
     (trackpad, the arrow keys) instead of slipping under the card */
  .project__strip { overflow-x: auto; scrollbar-width: none; }
  .project__strip::-webkit-scrollbar { display: none; }
  .pthumb { min-width: 52px; }
}

@media (max-width: 1279px) {
  /* the header: a smaller logo */
  .dock__logo svg { width: 120px; height: 12.61px; }
  .stat__num { font-size: 56px; line-height: 56px; }
  .finale__card { grid-template-columns: minmax(0, 1fr) 480px; }
  .finale__fields { padding: 38px 32px 32px; }
  .finale__copy { padding: 32px; }
  .footer__cols { gap: 40px; }
  .pthumb { flex: 0 0 64px; }
}

/* Small notebooks and tablets in landscape (1024 to 1199): the project page's card and guide slim
   down, so the film keeps a real window between them. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .project { --pid-w: 300px; --panel-w: 380px; }
  .project__crumbs { display: none; } /* they ran into the centred logo; the back button stays */
  .project-open .agent { --panel-w: 380px; }
  /* her name stays whole beside the tools */
  .project-open .agent__head { gap: 8px; padding-inline: 16px; }
  .project-open .agent__tool { width: 34px; }
  .project-open .agent__id .t-label-l { font-size: 15px; }
  .pid__scroll { padding-inline: 22px; }
  .pid__foot { padding-inline: 22px; }
  .pid__facts dd { font-size: 30px; line-height: 32px; }
  .pid__cta .pill--l { font-size: 15px; }
}

/* ═════════════ 2. Short screens (notebooks, desktop browsers with tall chrome) ═════════════ */

@media (max-height: 820px) and (min-width: 1024px) {
  .hero { min-height: 600px; }
  .hero__bar { top: 24px; }
  .hero__content { padding-bottom: 64px; }
  .hero__brand { margin-bottom: 28px; }
  .hero__sub { font-size: 26px; line-height: 36px; }
  .composer { margin-top: 20px; }
  .hero__chips { margin-top: 16px; }
  /* the guide: the expanded modal and the call use the height they have */
  .agent { --panel-top: 88px; }
  .agent[data-view='expanded'] .agent__panel { top: 16px; bottom: 16px; }
  .agent__call { gap: 12px; padding: 16px 20px 18px; }
  /* docked on the right (or beside a project page): a lower top row, chip band and controls give the picture the
     height (v4) */
  .agent[data-view='docked'] .agent__call { grid-template-rows: 20px minmax(0, 1fr) 104px 56px; gap: 10px; padding: 12px 18px 16px; }
  .agent[data-view='docked'] .call__choices .choice { height: 36px; padding-inline: 14px; }
  .agent[data-view='docked'] .agent__call .call-btn { width: 46px; height: 46px; }
  .agent[data-view='docked'] .call__controls { gap: 6px; padding: 5px; }
  .agent__voice { gap: 10px; }
  .voice__orb { width: 140px; height: 140px; }
  .voice__orb img { width: 112px; height: 112px; }
  /* the lead modal's render no longer sets the panel's height */
  .lead-modal { padding: 16px; }
  .lead-modal__media { min-height: 0; }
  .lead-modal__form { gap: 14px; padding: 32px 36px 28px; }
  .lead-modal__form .field__control { height: 48px; }
  /* the project page: a lower top bar, level with the guide's panel (--panel-top above) */
  .project { --top: 88px; }
}

/* ═════════════ 3. Mobile and tablet ═════════════ */

@media (max-width: 1023px) {
  /* Safe areas (viewport-fit=cover, 28.10): the pictures run to the screen's edges, the content keeps clear of a
     phone's notch and rounded corners in landscape (--safe-x, both sides alike), and the bars at the bottom of the
     home indicator (env(safe-area-inset-bottom) below). */
  :root {
    --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --gutter: max(20px, var(--safe-x)); --edge: max(16px, var(--safe-x)); --dock-h: 56px;
    --hero-col: calc(100vw - 2 * var(--edge)); --hero-logo: min(56vw, 240px);
  }
  html { scroll-padding-top: 56px; scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); } /* bottom: focus stays clear of the bar (2.11) */

  /* Type: the display sizes ease down on small phones, and headings break into even lines (no word left alone) */
  .t-display-xl { font-size: clamp(34px, 10vw, 40px); line-height: 1.1; }
  .t-display-m { font-size: 28px; line-height: 36px; }
  .t-section { font-size: 28px; line-height: 36px; }
  .t-h1 { font-size: 26px; line-height: 34px; }
  :is(.t-display-xl, .t-display-m, .t-section, .t-h1, .t-h2) { text-wrap: balance; }
  .eyebrow { gap: 10px; height: 28px; }
  .eyebrow { --eb: 24px; }

  /* ───── Hero ───── */
  .hero { min-height: 600px; max-height: none; }
  .hero__bar { top: 14px; inset-inline: var(--edge); height: 44px; }
  .hero__bar .pill--round, .hero__bar .round { width: 44px; height: 44px; }
  .hero__bar .pill--meet { height: 44px; padding-inline: 16px; }
  .hero__content { padding: 0 0 72px; }
  .hero__brand { margin-top: -24px; margin-bottom: 44px; } /* the logo sits a little higher, the rest stays (v4, Ori) */
  .hero__sub { max-width: 340px; padding-inline: var(--edge); font-size: 20px; line-height: 28px; }
  .composer { margin-top: 22px; border-radius: 16px; }
  .composer__card { gap: 12px; padding: 13px 13px 7px 7px; border-radius: 12px; }
  .composer__input { font-size: 16px; line-height: 24px; }
  .composer__caret { top: 10px; height: 20px; }
  .composer__actions { height: 44px; }
  .composer .round { width: 44px; height: 44px; }
  /* the starter chips: one row that swipes, edge to edge */
  .hero__chips {
    align-self: stretch; margin-top: 16px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
    padding-inline: var(--edge); scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--edge);
  }
  .hero__chips::-webkit-scrollbar { display: none; }
  .hero__chips .chip { flex: none; height: 40px; padding-inline: 14px; scroll-snap-align: start; }

  /* ───── Rows that swipe (the hero's chips, LUXURY, the project filter: main.js wraps them) ─────
     One hint for all three: while a row has more to show, its far end (the left, in Hebrew) fades and a small
     chevron sits there on a clear strip, centred on the row (--mid, from main.js); a tap moves the row on. It nudges twice the first
     time it's seen, and goes when the row reaches its end. Glass on the dark hero and LUXURY, white on the filter. */
  .swipe { display: block; position: relative; min-width: 0; }
  .hero__content > .swipe { align-self: stretch; }
  .filterbar > .swipe { flex: 1; }
  .swipe.has-more > .swipe__track {
    -webkit-mask-image: linear-gradient(to right, transparent 0 18px, #000 76px); mask-image: linear-gradient(to right, transparent 0 18px, #000 76px);
  }
  .swipe__next {
    display: grid; place-items: center; position: absolute; z-index: 2; top: var(--mid, 50%); inset-inline-end: 6px;
    width: 32px; height: 32px; margin-top: -16px; padding: 0; border-radius: 50%;
    background: var(--glass-subtle); border: 1px solid var(--glass-border); color: #fff; box-shadow: var(--fx-glass-subtle);
    -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
    opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-standard);
  }
  .swipe.has-more > .swipe__next { opacity: 1; pointer-events: auto; }
  .swipe--light > .swipe__next {
    background: #fff; border-color: var(--border); color: var(--ink); box-shadow: 0 4px 12px -4px rgba(25, 25, 25, .25);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .swipe.is-nudging > .swipe__next .i { animation: swipe-nudge 1100ms var(--ease-standard) 2; }
  @keyframes swipe-nudge { 50% { transform: translateX(-4px); } }
  /* the hero's waits for its chips to rise in */
  body:not(.is-ready) .hero .swipe__next { opacity: 0; }
  .hero .swipe__next { transition-delay: 1400ms; }
  .is-settled .hero .swipe__next { transition-delay: 0ms; }
  .hero__tab { width: 120px; height: 44px; }
  .hero__play { bottom: 20px; }

  /* ───── Top bar: the brand, WhatsApp and "קביעת פגישה" (v4, Ori: both "appear in mobile scrolled header"); the
     composer lives in the bottom bar, the share button in the hero's bar ───── */
  .dock__inner { padding-inline: var(--edge); }
  .dock__brand { gap: 12px; }
  .dock__brand .round { width: 40px; height: 40px; }
  .dock__logo svg { width: 120px; height: 12.61px; }
  .dock__composer, .dock__actions [data-share] { display: none; }
  .dock__actions .round { width: 40px; height: 40px; }
  .dock__actions .pill--meet { height: 40px; padding-inline: 13px; font-size: 15px; }

  /* ───── Bottom bar ───── */
  .mbar {
    position: fixed; z-index: 48; inset-inline: 0; bottom: 0;
    display: flex; align-items: center; gap: 8px; padding: 10px max(12px, var(--safe-x)) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .86); box-shadow: 0 -1px 0 var(--border), 0 -12px 32px -20px rgba(25, 25, 25, .3);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    transform: translateY(110%); visibility: hidden;
    transition: transform var(--d-morph) var(--ease-out), visibility 0s linear var(--d-morph);
  }
  .mbar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
  .agent-open .mbar, .project-open .mbar { transform: translateY(110%); visibility: hidden; }
  .mbar__composer {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding-inline: 4px;
    border-radius: 9999px; background: var(--muted); border: 1px solid var(--border);
  }
  .mbar__composer:focus-within { background: #fff; border-color: var(--input); }
  .mbar__avatar { width: 38px; height: 38px; box-shadow: 0 0 0 1px var(--accent); }
  .mbar__composer input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font-size: 16px; line-height: 24px; caret-color: var(--accent); }
  .mbar__composer input::placeholder { color: var(--muted-fg); opacity: 1; }
  .mbar__composer .round { width: 38px; height: 38px; }
  .mbar__composer .round--ghost:hover { background: var(--secondary-hover); }
  /* a conversation is waiting: her ring turns solid, with the unread dot when she said something new */
  .has-conversation .mbar__avatar { box-shadow: 0 0 0 2px var(--accent); }
  .mbar__avatar::after {
    content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform var(--d-slow) var(--ease-out);
  }
  .mbar__avatar { overflow: visible; }
  .mbar__avatar img { border-radius: 50%; }
  .has-unread .mbar__avatar::after { transform: scale(1); }
  .footer { padding-bottom: 0; }
  .footer__base { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } /* clear of the bottom bar */
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }

  /* ───── LUXURY: a row that swipes (the glitter runs here too, thinner: main.js) ───── */
  .luxury { padding: 8px; }
  .luxury__panel { border-radius: 14px; padding: 44px 0 40px; }
  .luxury__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; padding-inline: var(--gutter); }
  .ask-btn { height: 48px; }
  .luxury__cards {
    display: flex; gap: 12px; overflow-x: auto; padding-inline: var(--gutter); scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .luxury__cards::-webkit-scrollbar { display: none; }
  .lcard { flex: 0 0 min(80vw, 360px); scroll-snap-align: start; cursor: pointer; }
  .lcard__inner { padding: 12px; }
  .lcard__caption { padding: 15px; gap: 6px; }
  .lcard__brand { padding-bottom: 148px; }

  /* ───── Areas: stacked ───── */
  .areas { padding-block: 64px; }
  .areas .sec-head, .flagship .sec-head { margin-bottom: 24px; }
  .bento { display: flex; flex-direction: column; gap: 12px; aspect-ratio: auto; }
  .bento__col { display: flex; flex-direction: column; gap: 12px; }
  .acard { aspect-ratio: 4 / 3; }
  .acard__content { inset: auto 16px 16px; align-items: flex-end; gap: 12px; }
  .acard__text { display: flex; flex-direction: column; }
  .acard__count { position: static; order: 2; opacity: 1; transform: none; }
  .acard .pill--m { width: 44px; padding: 0; flex: none; }
  .acard .pill--m .t-label-m { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ───── Projects: one column (two on tablets), the filter scrolls sideways ───── */
  .flagship { padding-block: 64px; }
  .filterbar { gap: 12px; height: 60px; margin-bottom: 24px; }
  /* the chips that don't fit fade toward the view toggle (the shared swipe hint below); the end padding lets the
     last chip clear the chevron */
  .filterbar__chips { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-block: 2px; padding-inline-end: 28px; }
  .filterbar__chips::-webkit-scrollbar { display: none; }
  .filterbar__chips .chip { flex: none; height: 38px; padding-inline: 14px; }
  .viewtoggle button { width: 40px; height: 40px; } /* a thumb's size */
  .save { width: 40px; height: 40px; }
  /* the text links keep their look, with a taller hit area */
  :is(.ask, .textlink) { padding-block: 10px; margin-block: -10px; }
  .grid { grid-template-columns: 1fr; row-gap: 36px; }
  /* one column: every card takes the row; a wide card stacks its copy under the picture like the rest */
  .pcard, .pcard.is-feature, .pcard.is-wide { grid-column: 1 / -1; }
  .pcard.is-wide { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .pcard:is(.is-feature, .is-wide) .pcard__media { aspect-ratio: 4 / 5; } /* one column: the leaders stand taller than the rest */
  .pcard.is-wide .pcard__body { padding-bottom: 0; }
  .pcard.is-wide .pcard__logo { display: none; }
  .pcard:is(.is-feature, .is-wide) .pcard__name { font-size: 26px; line-height: 34px; }
  .pcard.is-wide .pcard__tagline { margin-top: 0; }
  .grid__head--rest { margin-top: 12px; }
  .pcard__media { cursor: pointer; }
  /* the leaders: squares here too, a tighter caption */
  .grid .pcard.is-lead, .grid .pcard.is-lead.is-wide { aspect-ratio: 1; }
  .pcard.is-lead .pcard__top { inset: 12px 12px auto; }
  .pcard.is-lead .pcard__body, .pcard.is-lead.is-wide .pcard__body { inset: auto 12px 12px; width: auto; padding: 11px 17px 13px; gap: 2px; }
  .grid .pcard.is-lead .pcard__name { font-size: 26px; line-height: 34px; padding-inline-end: 32px; }
  .grid .pcard.is-lead .pcard__tagline { font-size: 14px; line-height: 20px; }
  .pcard.is-lead .pcard__go { inset-block-start: 11px; inset-inline-end: 17px; height: 34px; }
  .pcard.is-lead .pcard__go .i { --s: 14; }
  .pcard.is-lead .pcard__brand, .pcard.is-lead.is-wide .pcard__brand { padding-bottom: var(--cap-b, 34%); }
  .mapview { height: max(420px, calc(100svh - 56px - 60px - 70px)); }
  .mcard { width: 240px; }

  /* ───── The group: the red band, the figures under the copy ───── */
  .group { padding-block: 64px; }
  .group__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .group__title { margin-top: 16px; font-size: clamp(32px, 8.6vw, 44px); line-height: 1.14; }
  .group__body { margin-top: 20px; font-size: 18px; line-height: 28px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .stat { padding-top: 18px; }
  .stat__cap { font-size: 15px; line-height: 22px; }
  .stat__num { font-size: 48px; line-height: 48px; }
  .stat__cap br { display: none; } /* the desktop's line breaks left a word alone on narrow phones */
  .textlink { margin-top: 16px; }

  /* ───── Lead finale ───── */
  .finale { min-height: 0; }
  .finale__bg { inset: -4% 0; }
  .finale__grid { padding-block: 72px 168px; }
  /* the block on top of the fields */
  .finale__copy { gap: 24px; padding: 28px 18px; }
  .finale__intro { gap: 16px; }
  .finale__title { font-size: min(44px, 11.4cqw); }
  .finale__fields { gap: 16px; padding: 24px 18px; }
  .leadform { width: 100%; padding: 6px; border-radius: 16px; }
  .leadform__card { padding: 24px 18px; gap: 16px; border-radius: 12px; }
  .leadform__card.finale__card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .fields__row { grid-template-columns: 1fr; gap: 8px; }
  .field__control { height: 50px; }

  /* ───── Footer ───── */
  .footer { padding-top: 64px; }
  .footer__top { flex-direction: column; align-items: stretch; gap: 40px; }
  .footer__top > .pill { align-self: flex-start; }
  .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer__cols > :first-child { grid-column: 1 / -1; }
  .fcol { gap: 4px; }
  .fcol__title { margin-bottom: 4px; }
  .fcol a.t-body-s, .fcol__row { padding-block: 6px; } /* 32px rows a finger can hit, at the same rhythm */
  .fcol__phone { font-size: 56px; line-height: 56px; }
  .footer__sig { margin-top: 56px; }
  .sig--wide { display: none; }
  .sig--narrow { display: block; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 24px; }
  .footer__legal, .footer__credits { gap: 8px 10px; } /* was 14 (2.11) */
  /* the legal line takes its own row, so no separator hangs at its end; the pages and the credits share one rhythm */
  .footer__legal > p { flex-basis: 100%; text-wrap: balance; }
  .footer__legal > p + .footer__sep { display: none; }
  .footer__legal a, .footer__credits a { padding-block: 8px; margin-block: -8px; }

  /* ───── Lead modal: a full-screen sheet with a slim render on top ───── */
  .lead-modal { padding: 0; }
  .lead-modal[open] { place-items: stretch; }
  /* square corners, so nothing to clip: the sheet always takes its full height and the dialog scrolls it, also where
     overflow: clip isn't supported (iOS before 16) */
  .lead-modal__panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; width: 100%; min-height: 100%; border-radius: 0; overflow: visible; }
  .lead-modal__media { order: -1; min-height: 0; height: 132px; padding: 20px var(--gutter); }
  .lead-modal__media::after, .lead-modal__contact { display: none; }
  .lead-modal__logo { --w: 143px; }
  .lead-modal__form { gap: 16px; padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
  .lead-modal__done { padding: 32px var(--gutter); }
  .lead-modal__close { top: 14px; inset-inline-end: var(--edge); width: 44px; height: 44px; }
  #lm-title:focus-visible { outline: none; } /* it takes focus on a phone instead of the name field (main.js) */

  /* ───── The guide: a full-screen sheet (a half sheet over a project page, below) ───── */
  .agent { --panel-top: 0px; }
  .agent__panel { inset: 0; width: 100%; border-radius: 0; transform: translateY(40px); transform-origin: 50% 100%; }
  .agent[data-view='expanded'] .agent__panel { --w: 100%; width: 100%; right: 0; }
  .agent:not(.has-project) [data-agent-expand] { display: none; } /* on the homepage the sheet is already full */
  .agent__head { gap: 12px; padding: 12px max(12px, var(--safe-x)) 12px max(16px, var(--safe-x)); }
  .agent__tool { width: 40px; height: 40px; }
  /* a sheet is put away downward: the chevron instead of the desktop's minus (same button, "מזעור") */
  .agent__tool-desk { display: none; }
  .agent__tool-sheet { display: inline; }
  .agent__context { padding-inline: max(16px, var(--safe-x)); }
  .agent__stream { padding: 20px max(16px, var(--safe-x)) 12px; }
  .agent[data-view='expanded'] .agent__stream { padding-inline: max(16px, var(--safe-x)); }
  .msg-agent__text { font-size: 17px; line-height: 27px; }
  .msg-indent { margin-inline-start: 0; }
  .agent[data-view='expanded'] .recos { grid-template-columns: 1fr; }
  .reco__body { padding: 16px; }
  .compare { font-size: 13px; }
  .agent__composer { margin: 0 max(12px, var(--safe-x)); }
  .agent__disclaimer { padding: 6px max(16px, var(--safe-x)) calc(10px + env(safe-area-inset-bottom)); }
  .agent__launcher { display: none; } /* the bottom bar (or the project page's guide button) brings her back */
  /* voice and video fill the sheet */
  .agent__voice { padding: 16px max(16px, var(--safe-x)) calc(16px + env(safe-area-inset-bottom)); }
  /* centred while it fits, scrolling from the top when it doesn't (short phones; centring would cut its top off) */
  .agent__voice { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
  .agent__voice > :first-child { margin-top: auto; }
  .agent__voice > :last-child { margin-bottom: auto; }
  .voice__orb { width: 140px; height: 140px; }
  .voice__orb img { width: 112px; height: 112px; }
  .agent__call, .agent[data-view='docked'] .agent__call { grid-template-rows: 24px minmax(0, 1fr) 112px 64px; gap: 12px; padding: 12px max(16px, var(--safe-x)) calc(16px + env(safe-area-inset-bottom)); }
  .call__choices .mode-chips { flex-wrap: wrap; }
  /* the call covers the screen here, so its ground is solid: no full-screen blur for a phone to draw under two videos */
  .agent[data-mode='video'] .agent__panel { background: #161616; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .call__captions p { font-size: 17px; line-height: 26px; height: 52px; }

  /* ───── Project page: a page that scrolls (the film on top, the card under it) ───── */
  .project {
    --top: 64px;
    display: grid; grid-template-columns: 100%; grid-template-rows: 66svh auto; align-content: start;
    overflow-y: auto; overscroll-behavior: contain; background: #0d0d0d;
    scroll-padding: var(--top) 0 calc(72px + env(safe-area-inset-bottom)); /* focus clear of the bar and the CTAs (2.11) */
  }
  .project__media { position: relative; grid-area: 1 / 1; inset: auto; }
  .project__shade { background: linear-gradient(180deg, rgba(8, 8, 8, .55) 0, rgba(8, 8, 8, 0) 140px), linear-gradient(0deg, rgba(8, 8, 8, .5) 0, rgba(8, 8, 8, 0) 200px); }
  .project__bar { position: fixed; z-index: 6; padding-inline: max(12px, var(--safe-x)); height: var(--top); transition: background-color var(--d-slow) var(--ease-standard), box-shadow var(--d-slow) var(--ease-standard); }
  .project.is-scrolled .project__bar {
    background: rgba(13, 13, 13, .78); box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  }
  .project__crumbs { display: none; }
  .project__back { height: 40px; padding-inline: 12px 16px; }
  .project__logo { width: 128px; height: 13.45px; }
  .project__tools .round { width: 40px; height: 40px; }
  .project__gallery {
    position: relative; grid-area: 1 / 1; align-self: end; left: auto; right: auto; bottom: auto;
    gap: 10px; padding: 0 0 40px; pointer-events: auto; min-width: 0;
  }
  .project__deck { gap: 10px; max-width: calc(100% - 2 * var(--edge)); } /* the strip's inset from the edges, so the film's button sits at its end */
  .project__strip { max-width: 100%; overflow-x: auto; padding: 6px; border-radius: 16px; scrollbar-width: none; }
  .project__strip::-webkit-scrollbar { display: none; }
  .pthumb { flex: 0 0 64px; border-radius: 9px; }
  .project:not([data-state='open']) .pid { transform: translateY(32px); }
  .pid {
    position: relative; grid-area: 2 / 1; top: auto; bottom: auto; left: auto; width: auto; max-height: none;
    margin-top: -24px; overflow: visible; border: 0; border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, .96); box-shadow: 0 -16px 40px -20px rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .pid__scroll { overflow: visible; gap: 16px; padding: 28px var(--gutter) 28px; }
  .pid__title { font-size: 22px; line-height: 30px; }
  .pid__facts dd { font-size: 34px; line-height: 36px; }
  /* the CTAs stay at the foot of the screen, in one row (v4, Ori): the form, WhatsApp's icon and the guide */
  .pid__foot {
    position: sticky; bottom: 0; z-index: 2; padding: 10px max(12px, var(--safe-x)) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .9); border-top: 1px solid rgba(25, 25, 25, .08);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  }
  .pid__foot::before { display: none; }
  .pid__cta .pill--l { height: 50px; }
  .pid__cta .round--wa { width: 50px; height: 50px; }
  .pid__guide { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; }
  .pid__guide { position: relative; padding: 0; box-shadow: 0 0 0 2px var(--accent); }
  .pid__guide img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
  .pid__guide::after { content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform var(--d-slow) var(--ease-out); }
  .has-unread .pid__guide::after { transform: scale(1); }
  .pid__cta-badge { top: -40px; }
  .pid__cta.is-lit { box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), 0 0 0 8px var(--accent); }
  /* beside a project page the guide is a half sheet: the film stays in view above her */
  .project-open .agent[data-view='docked'] .agent__panel {
    top: auto; height: 62svh; border-radius: 22px 22px 0 0;
    box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .6);
  }
  .project-open .agent[data-view='expanded'] .agent__panel { border-radius: 0; }
}

/* Tablets: two columns where there is room */
/* ───── Narrow phones (under 390px): the footer's credits keep to one line, so no separator hangs at a line's end ───── */
@media (max-width: 389px) {
  .footer__credits { gap: 8px 8px; } /* was 10; three credits since 2.11 (AI by Enso) */
  .agent__head { gap: 8px; }
  .agent__tools { gap: 0; }
  .agent__tool { width: 36px; }
  .agent__id { gap: 10px; }
  .agent__id .t-label-l { font-size: 15px; }
  /* the header keeps air between the logo and WhatsApp */
  .dock__brand { gap: 10px; }
  .dock__logo svg { width: 104px; height: 10.93px; }
  .dock__actions { gap: 6px; }
  .dock__actions .round { width: 38px; height: 38px; }
}
/* the smallest phones: the links and credits wrap, so they drop their separators and stand apart */
@media (max-width: 359px) {
  .stat__num { font-size: 40px; line-height: 40px; } /* 35,300 keeps within its half of the row */
  .dock__logo .dock__word { display: none; }
  .dock__logo .dock__mark { display: block; }
  .footer__bottom .footer__sep { display: none; }
  .footer__legal, .footer__credits { gap: 8px 16px; } /* was 20 (2.11) */
}

@media (min-width: 640px) and (max-width: 1023px) {
  .grid { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .pcard { grid-column: span 1; }
  .pcard.is-feature, .pcard.is-wide { grid-column: 1 / -1; } /* a lone project after the leaders takes the width */
  .pcard:is(.is-feature, .is-wide) .pcard__media { aspect-ratio: 16 / 10; }
  /* the leaders: squares two to a row, a lone one across the row */
  .grid .pcard.is-lead.is-feature { grid-column: span 1; }
  .grid .pcard.is-lead.is-wide { aspect-ratio: 16 / 10; }
  .pcard.is-lead.is-wide .pcard__body { inset-inline-end: auto; width: calc((100% - 16px) / 2 - 24px); } /* a square's caption: gap 16, insets 12 */
  .pcard.is-lead.is-wide .pcard__brand { padding-bottom: var(--cap-b, 0px); }
  .acard { aspect-ratio: 16 / 9; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
  .lead-modal__panel { width: min(640px, 100%); min-height: 0; margin: auto; border-radius: 24px; overflow: hidden; overflow: clip; }
  .lead-modal { padding: 24px; }
  .lead-modal[open] { place-items: center; }
  /* the guide's sheet keeps a reading column instead of stretching across a tablet */
  .agent .agent__stream, .agent[data-view='expanded'] .agent__stream { padding-inline: max(24px, calc((100% - 680px) / 2)); }
  .agent .agent__composer { width: calc(100% - 48px); max-width: 680px; margin-inline: auto; }
  /* so do the project page's card and its action bar, and the forms put name and phone side by side */
  .pid__scroll { padding-inline: max(var(--gutter), calc((100% - 680px) / 2)); }
  .pid__cta { width: 100%; max-width: 680px; margin-inline: auto; }
  .fields__row { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ═════════════ 4. Phones on their side (landscape, 28.10) ═════════════ */
/* 320 to 540 px of height between the browser's bars: each part fits the screen between the top bar and the
   bottom bar, and the wide screen is used side by side where the portrait layout stacked. */
@media (max-width: 1023px) and (max-height: 540px) and (orientation: landscape) {
  /* Hero, one screen: a smaller logo, the composer is one row, and the copy sits down on the tab */
  :root { --hero-col: min(640px, calc(100vw - 2 * var(--edge))); --hero-logo: min(180px, 40svh); }
  .hero__content { justify-content: flex-end; padding-bottom: 60px; }
  .hero__brand { margin-top: 0; margin-bottom: 12px; }
  .hero__sub { max-width: none; font-size: 17px; line-height: 24px; }
  .composer { margin-top: 14px; }
  .composer__card { flex-direction: row; align-items: center; gap: 8px; padding: 6px; border-radius: 26px; }
  .composer__row { flex: 1; min-width: 0; }
  .composer__actions { flex: none; }
  .hero__chips { margin-top: 12px; }
  .hero__chips > :first-child { margin-inline-start: auto; } /* centred while they fit, swiping when they don't */
  .hero__chips > :last-child { margin-inline-end: auto; }

  /* The header works as on a desktop (the guide's composer in the middle, the actions beside it), so there is
     no bottom bar taking a sixth of the height. Her avatar carries the unread dot instead. */
  .dock__logo svg { width: 96px; height: 10.09px; }
  .dock__composer { display: flex; top: 4px; width: min(560px, calc(100vw - 2 * var(--edge) - 2 * 172px - 24px)); }
  .mbar { display: none; }
  .dock__avatar { overflow: visible; }
  .dock__avatar img { border-radius: 50%; }
  .dock__avatar::after {
    content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px #fff; transform: scale(0); transition: transform var(--d-slow) var(--ease-out);
  }
  .has-unread .dock__avatar::after { transform: scale(1); }
  .footer__base { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }

  /* LUXURY: landscape cards as tall as the space under the header */
  .luxury__panel { padding: 28px 0 24px; }
  .luxury__head { flex-direction: row; align-items: flex-end; margin-bottom: 20px; }
  .lcard { flex: 0 0 auto; height: max(210px, calc(100svh - 56px - 48px)); aspect-ratio: 4 / 3; }

  /* Areas: wide cards of the same height */
  .acard { aspect-ratio: auto; height: max(200px, calc(100svh - 56px - 48px)); }

  /* Projects: every card at one size (the heads still mark the leaders); a lone leader sets its copy beside it */
  .pcard.is-feature { grid-column: span 1; }
  .pcard:is(.is-feature, .is-wide) .pcard__media { aspect-ratio: 4 / 3; }
  .pcard.is-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: end; }
  .pcard.is-wide .pcard__body { padding-bottom: 4px; }
  /* the leaders: a frame that fits the low screen */
  .grid .pcard.is-lead { aspect-ratio: 4 / 3; }
  .grid .pcard.is-lead.is-wide { grid-column: 1 / -1; display: block; aspect-ratio: 21 / 9; }
  .mapview { height: max(240px, calc(100svh - 56px - 60px)); }
  /* the minicard lies on its side, so it fits above its pin on the low map */
  .mcard { width: 340px; display: grid; grid-template-columns: 132px minmax(0, 1fr); }
  .mcard__media { aspect-ratio: auto; border-radius: 0 14px 14px 0; }
  .mcard__tags { flex-wrap: wrap; top: 8px; inset-inline: 8px; }
  .mcard__body { padding: 10px 14px 12px; }

  /* The group: the copy and the figures side by side, as on a desktop */
  .group__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }

  /* The lead form: a full sheet without the picture, its fields in a reading column */
  .lead-modal { padding: 0; }
  .lead-modal[open] { place-items: stretch; }
  .lead-modal__panel { width: 100%; min-height: 100%; margin: 0; border-radius: 0; overflow: visible; }
  .lead-modal__media { display: none; }
  .lead-modal__form { width: min(100%, 720px); margin-inline: auto; }
  .lead-modal__close { background: var(--muted); border-color: var(--border); color: var(--ink); box-shadow: none; }

  /* The project page: the film fills the screen above the card; the guide beside it takes the full height */
  .project { grid-template-rows: calc(100svh - 64px) auto; }
  .project-open .agent[data-view='docked'] .agent__panel { top: 0; height: auto; border-radius: 0; }

  /* The guide's voice and video calls go side by side: her picture on one side; the words, the choices and the
     controls on the other (stacked, they were taller than the screen) */
  .agent__voice {
    display: grid; grid-template-columns: auto minmax(0, 460px); grid-template-areas: 'orb caption' 'orb choices' 'status controls';
    justify-content: center; align-content: center; align-content: safe center; column-gap: 40px; row-gap: 8px;
  }
  .agent__voice > :nth-child(n) { margin-block: 0; }
  .voice__orb { grid-area: orb; align-self: center; }
  .voice__state { grid-area: status; align-self: start; justify-self: center; }
  .voice__wave { grid-area: status; align-self: end; justify-self: center; }
  .voice__caption { grid-area: caption; }
  .voice__choices { grid-area: choices; }
  .voice__controls { grid-area: controls; justify-self: center; }
  .agent__call, .agent[data-view='docked'] .agent__call {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 24px minmax(0, 1fr) 64px;
    grid-template-areas: 'stage top' 'stage choices' 'stage controls'; column-gap: 24px;
  }
  .call__top { grid-area: top; }
  .call__stage { grid-area: stage; }
  .call__choices { grid-area: choices; align-self: center; }
  .call__controls { grid-area: controls; }
}
@media (max-width: 1023px) and (max-height: 359px) and (orientation: landscape) {
  .hero__chips { display: none; }
}