/* Layout + components. All values reference tokens.css — rebrand never touches this file. */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--clr-text);
  background: var(--clr-bg);
  transition: background var(--t-normal), color var(--t-normal);
}
h1, h2, h3, .logo, .site-footer__wordmark {
  font-family: var(--ff-title);
  font-weight: var(--fw-display, 500);
  line-height: 1.05;
  letter-spacing: -.02em;
}
h3 { font-weight: 600; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
section { padding: var(--pad) var(--gutter); }
strong { font-weight: 700; }

/* Placeholder blocks — replaced by real assets at rebrand */
.ph--a, .ph--b, .ph--c, .ph--d, .ph--e, .ph--f { border-radius: var(--radius); }
.ph {
  display: grid; place-items: center;
  color: rgba(0 0 0 / .35); font-size: .8rem; letter-spacing: .05em;
  border-radius: var(--radius);
}
.ph--a { background: #cfe3ea; } .ph--b { background: #e8b6ad; }
.ph--c { background: #b9c7b3; } .ph--d { background: #d9d3c9; }
.ph--e { background: #1d2b23; color: rgba(255 255 255 / .4); } .ph--f { background: #c2554233; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: .9rem var(--gutter);
  background: linear-gradient(var(--clr-bg) 30%, transparent);
}
.logo { font-size: 2rem; white-space: nowrap; font-weight: 700; letter-spacing: -.01em; }
.logo svg { vertical-align: -.12em; margin-inline-end: .55rem; }
.site-nav { display: flex; gap: 1.8rem; margin-inline-start: auto; }
.site-nav a { font-size: 1rem; font-weight: 600; transition: opacity var(--t-fast); }
.site-nav a:hover { opacity: .6; }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.pill {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--clr-beige); color: var(--clr-ink);
  border: 0; border-radius: var(--radius-full);
  padding: .8rem 1.4rem; font: 600 1rem var(--ff-body); letter-spacing: -.02em;
  cursor: pointer; transition: background var(--t-fast), opacity var(--t-fast);
}
.pill:hover { opacity: .85; }
.pill--cta:hover { opacity: 1; background: var(--clr-bg); }
.pill__icon { transition: transform var(--t-fast) var(--ease-out-expo); }
.pill--cta:hover .pill__icon, .office-card__contact:hover .pill__icon { transform: rotate(-14deg); }
.pill--dark { background: var(--clr-dark); color: var(--clr-beige); }
.pill__icon {
  display: inline-grid; place-items: center;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--clr-primary); color: #fff; font-size: .9rem;
}
.circle-btn {
  width: 3rem; height: 3rem; border-radius: 50%; border: 0;
  background: var(--clr-glass); color: var(--clr-text);
  font: 600 .9rem var(--ff-body); cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background var(--t-fast);
}
.hamburger { display: none; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--clr-beige);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
}
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin-bottom: 1.6rem; }
.mobile-menu a { font-family: var(--ff-title); font-size: var(--fs-m); }
.mobile-menu .pill--dark { font-family: var(--ff-body); font-size: 1rem; }

/* Visually hidden, still read by assistive tech. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Hero ---------- */
/* A full-bleed video (the client's story as one match-cut) behind the
   headline. Everything on it is light text (dark-theme ink) over a dark
   scrim; the header turns light while it sits over the hero. */
.hero {
  --hero-ink: #f4efea;          /* dark-theme ink */
  --hero-shade: 21 20 14;       /* dark canvas #15140e, as rgb channels */
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: max(100svh, 36rem); padding: 0;   /* grows with its text when zoomed (WCAG 1.4.10) */
  color: var(--hero-ink); background: var(--clr-dark);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__poster, .hero__poster img, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* The poster <picture> is the still; the video fades in over it once frames flow. */
.hero__video { opacity: 0; transition: opacity .6s ease; }
.hero--playing .hero__video { opacity: 1; }
/* Legibility: a flat dim over the whole frame, deeper under the header and
   under the text block (bottom), so the white phone scene and the sunset
   still carry light text. Checked on the brightest frames. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgb(var(--hero-shade) / .66), rgb(var(--hero-shade) / 0) 9rem),
    linear-gradient(to top, rgb(var(--hero-shade) / .78), rgb(var(--hero-shade) / .5) 45%, rgb(var(--hero-shade) / .12) 80%),
    rgb(var(--hero-shade) / .16);
}
.hero__inner {
  position: relative; flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 7rem var(--gutter) 2.2rem;
}
.hero__stages {
  list-style: none;
  display: flex; gap: .25rem; margin-bottom: 1.6rem;
  padding: .3rem; border-radius: var(--radius-full);
  background: rgb(var(--hero-shade) / .42);
  box-shadow: inset 0 0 0 1px rgb(244 239 234 / .22);
  font-size: var(--fs-body-xs);
}
.hero__stages li {
  padding: .35rem .8rem; border-radius: var(--radius-full);
  color: rgb(244 239 234 / .78); transition: background .3s ease, color .3s ease;
}
.hero__stages [aria-current] { background: var(--hero-ink); color: var(--clr-ink); font-weight: 700; }
.hero__title {
  font-size: clamp(2.75rem, 6.6vw + .5rem, 7.5rem);
  text-align: start; max-width: 12ch;
  text-shadow: 0 0 1.5rem rgb(var(--hero-shade) / .35);
}
/* Sub-line: who, for whom, what — the body-lg size of .statement__lead. */
.hero__sub {
  max-width: 38rem; margin-top: 1.4rem;
  font-size: var(--fs-body-lg); line-height: 1.55;
  text-shadow: 0 0 1rem rgb(var(--hero-shade) / .5);
}
/* Meeting pill under the sub-line: only up to 980px, where the header pill is hidden. */
.hero__cta { display: none; }
.hero__chips {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  margin-top: 2.2rem; margin-inline-start: -1rem; padding-inline-end: 4rem;
}
.hero .chip:hover { color: var(--clr-ink); }
/* Pause/play (WCAG 2.2.2): bottom end corner, keyboard reachable. */
.hero__toggle {
  position: absolute; inset-inline-end: var(--gutter); bottom: 2.2rem;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--hero-ink); background: rgb(var(--hero-shade) / .45);
  border: 1px solid rgb(244 239 234 / .45);
  transition: background var(--t-fast);
}
.hero__toggle:hover { background: rgb(var(--hero-shade) / .7); }
.hero__toggle:focus-visible, .hero .pill:focus-visible, .hero .chip:focus-visible {
  outline: 2px solid var(--hero-ink); outline-offset: 3px;
}
/* two bars = pause; a triangle when paused = play */
.hero__toggle-icon { width: 12px; height: 14px; border-inline: 4px solid currentColor; box-sizing: border-box; }
.hero__toggle[data-state="paused"] .hero__toggle-icon {
  width: 0; height: 0; border: 0; margin-inline-start: 3px;
  border-block: 7px solid transparent; border-inline-end: 12px solid currentColor;
}
/* The header turns light while it sits over the hero (main.js toggles the class). */
.site-header.is-over-hero:not(.is-menu-open) { background: transparent; color: var(--clr-beige); }
/* Portrait screens: the 9:16 cut. The top 40% of the first screen is clear
   video; the text starts below it on a deep scrim (the store scene is a white
   screen with dark text) and the hero may run past the fold, so the title,
   sub-line and meeting pill always make the first screen and the chips follow. */
@media (orientation: portrait) {
  .hero { min-height: 100svh; }
  .hero__inner { padding-top: 42svh; }
  .hero__media { bottom: auto; height: 100svh; }   /* the video covers the first screen; below it, the dark canvas */
  .hero__poster img, .hero__video { object-position: 50% 0; }
  .hero__scrim {
    background: linear-gradient(
      rgb(var(--hero-shade) / .72), rgb(var(--hero-shade) / .56) 4.5rem, rgb(var(--hero-shade) / .12) 8rem,
      rgb(var(--hero-shade) / .12) calc(42svh - 7rem), rgb(var(--hero-shade) / .72) calc(42svh + 1rem),
      rgb(var(--hero-shade) / .8) 85%, rgb(var(--hero-shade)));
  }
}

.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: var(--radius-full);
  font-size: 1.05rem; transition: background var(--t-fast);
}
.chip:hover { background: var(--clr-beige); }
.chip__icon { color: var(--clr-primary); font-size: .85rem; }

/* ---------- Statements ---------- */
.statement { text-align: center; }
.statement__title { font-size: var(--fs-xl); margin-bottom: 2rem; }
.statement__lead {
  max-width: var(--container-md); margin-inline: auto;
  font-size: var(--fs-body-lg); line-height: 1.55;
}

/* A link inside running text is underlined, so it reads as a link */
.statement__lead a, .acc__lead a, .article-body a:not(.pill) { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Work ---------- */
.work { background: var(--clr-beige); border-radius: 0; }
.work__title { font-size: var(--fs-display); font-weight: 700; line-height: 1.02;
  letter-spacing: -.02em; text-align: center; margin-bottom: calc(var(--pad) * .6); }
.work__grid {
  max-width: var(--container-xl); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4rem var(--gutter); align-items: start;
}
.work-card h3 { font-size: var(--fs-xs); margin-top: 1.4rem; }
.work-card__img { aspect-ratio: 16/9; }
.work-card--tall .work-card__img { aspect-ratio: 4/5; }
.work-card__cat { color: var(--clr-muted); font-size: var(--fs-body-sm); margin: .5rem 0 .7rem; }
.work-card__excerpt { font-size: var(--fs-body-sm); line-height: 1.5; max-width: 26rem; }
.work-card:nth-child(3) { margin-top: 8rem; }
.work-card:nth-child(6) { margin-top: -6rem; }
.micro-caption {
  align-self: end; max-width: 15rem;
  font-size: var(--fs-body-xs); text-transform: uppercase; line-height: 1.45;
}
.micro-caption--right { justify-self: end; align-self: start; margin-top: 10rem; }
.micro-caption__icon { color: var(--clr-primary); margin-inline-end: .3rem; }
.work__cta { text-align: center; margin-top: calc(var(--pad) * .5); }

/* ---------- Systems (sticky two-column) ---------- */
.systems {
  background: var(--clr-off-white);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--gutter);
  max-width: none;
}
.systems__left { position: relative; }
.systems__left > * { position: sticky; top: 7rem; }
.systems__left h2 { font-size: var(--fs-l); max-width: 28rem; }
.eyebrow {
  position: sticky; top: 5rem;
  color: var(--clr-muted); font-size: var(--fs-body-xs);
  text-transform: uppercase; letter-spacing: .02em; margin-bottom: 1rem;
}
.systems__right { display: flex; flex-direction: column; gap: 5rem; max-width: 46rem; }
.systems__block h3 { font-size: var(--fs-xs); margin-bottom: 1.2rem; }
.systems__block p { line-height: 1.6; margin-bottom: 1.4rem; }
.dots li { position: relative; padding-inline-start: 1.3rem; margin-bottom: .8rem; line-height: 1.5; }
.dots li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em;
  width: .45em; height: .45em; border-radius: 50%; background: var(--clr-primary);
}

/* ---------- Team ---------- */
.team { padding-inline: 0; padding-bottom: calc(var(--pad) * .5); }
.team__photo {
  position: relative; max-width: 46.5rem; aspect-ratio: 5/7;
  margin-inline: auto; border-radius: var(--radius);
}
.team__pill {
  position: absolute; top: 56%; inset-inline-end: -16rem;
  width: 20rem; justify-content: flex-start;
  border-radius: var(--radius-btn); padding: 1.1rem 1.5rem;
}
.marquee { overflow: hidden; margin-top: -6.5rem; position: relative; z-index: 2; }
.marquee__track {
  display: flex; gap: 1.5rem; width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.member {
  display: flex; align-items: center; gap: .9rem;
  background: rgb(246 245 244 / .5);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: var(--radius);
  padding: 16px 1.6rem 16px 16px; white-space: nowrap;
}
.member__avatar { width: 4.25rem; height: 4.25rem; border-radius: 50%; flex: none; }
.member__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--clr-status-open); flex: none; }
.member strong { display: block; font-size: 1rem; }
.member em { font-style: normal; color: var(--clr-muted); font-size: var(--fs-body-xs); }

/* ---------- Brief builder ---------- */
.brief { text-align: center; }
.brief__title { font-size: var(--fs-display); margin-bottom: calc(var(--pad) * .5); }
.brief__bar {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--container-md); margin-inline: auto;
  background: var(--clr-glass); border-radius: var(--radius-full);
  padding: .8rem 1rem .8rem 1.6rem;
}
.brief__label { font-size: var(--fs-body-lg); flex: none; white-space: nowrap; }
.brief__choice { font-size: var(--fs-body-lg); color: var(--clr-primary); min-width: 0; }
.brief__next { margin-inline-start: auto; background: var(--clr-surface); flex: none; white-space: nowrap; }
.brief__next:disabled { opacity: .4; cursor: default; }
.services-grid {
  max-width: var(--container-xl); margin: calc(var(--pad) * .8) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6rem 3rem;
  text-align: start;
}
.services-grid button {
  width: 100%; min-height: 44px; padding: .35rem .5rem;
  display: flex; align-items: baseline; gap: .8rem;
  color: inherit; background: transparent; border: 2px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer; text-align: start;
  -webkit-appearance: none; appearance: none;
  font-size: var(--fs-xs); font-family: var(--ff-body); font-weight: 500;
  transition: opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.services-grid button:hover { opacity: .65; }
.services-grid button[aria-pressed="true"] { background: var(--clr-beige); border-color: var(--clr-primary); }
.services-grid button:focus-visible { outline: 3px solid var(--clr-primary); outline-offset: 3px; }
.services-grid__arrow { color: var(--clr-primary); font-size: 1.1rem; }
.services-grid__plus { margin-inline-start: auto; font-size: 1.4rem; font-weight: 400; }

/* ---------- Offices ---------- */
.offices {
  background: var(--clr-beige);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter);
  align-items: stretch;
}
.office-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
  background: var(--clr-surface); border-radius: var(--radius); padding: 2.4rem;
}
.office-card__img { width: 11.5rem; aspect-ratio: 3/4; }
.office-card h3 { font-size: var(--fs-s); margin: 1rem 0 auto; }
.status-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--clr-glass); border-radius: var(--radius-full);
  padding: .45rem 1rem; font-size: var(--fs-body-xs); color: var(--clr-muted);
  width: fit-content;
}
.status-chip__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--clr-status-open); }
.status-chip.is-closed .status-chip__dot { background: var(--clr-status-closed); }
.office-card__hours { margin-top: 2.5rem; font-size: var(--fs-body-sm); }
.office-card__phone { font-size: var(--fs-body-sm); margin-top: .5rem; }
.office-card__phone span { color: var(--clr-primary); }
.office-card__contact { position: absolute; top: 2rem; inset-inline-end: 2rem; background: var(--clr-glass); }

/* ---------- Footer ---------- */
.site-footer { background: var(--clr-off-white); padding: var(--pad) var(--gutter) 2rem; }
.site-footer__cols {
  max-width: var(--container-xl); margin-inline: auto;
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2.5rem;
}
.site-footer__about { font-size: var(--fs-body-sm); line-height: 1.6; max-width: 18rem; }
.site-footer__cols nav { display: flex; flex-direction: column; gap: .7rem; }
.site-footer__cols h4 {
  font-family: var(--ff-title); font-weight: 500; color: var(--clr-muted);
  font-size: var(--fs-body); margin-bottom: .4rem;
}
.site-footer__cols nav a { font-size: var(--fs-body-sm); }
.site-footer__cols nav a:hover { opacity: .6; }
/* the one CTA label and the contact links stay on one line; the 1fr tracks give way */
.site-footer .pill, .site-footer__cols nav a { white-space: nowrap; }
.site-footer__brand { max-width: var(--container-xl); margin: 6rem auto 0; position: relative; }
.site-footer__mark { color: var(--clr-text); font-size: 2.6rem; }
.site-footer__social {
  position: absolute; top: 0; inset-inline-end: 0;
  display: flex; flex-direction: column; gap: .4rem; text-align: end;
  font-size: var(--fs-body-sm);
}
.site-footer__wordmark { font-size: var(--fs-display); line-height: .9; margin-top: 1rem; }
.site-footer__copy { text-align: end; font-size: var(--fs-body-xs); color: var(--clr-muted); }

/* ---------- Cursor badge (work cards) ---------- */
.cursor-badge {
  position: fixed; top: 0; left: 0; z-index: 7;
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--clr-primary);
  display: grid; place-items: center; font-size: 1rem;
  pointer-events: none; opacity: 0;
  transition: opacity var(--t-fast);
  transform: translate(-50%, -50%);
}
.cursor-badge.is-on { opacity: 1; }
.work-card__img { position: relative; overflow: hidden; cursor: none; }
.work-card__img::after {
  content: ""; position: absolute; inset: 0;
  background: var(--clr-primary); opacity: 0;
  transition: opacity var(--t-normal) var(--ease-out-expo);
}
.work-card:hover .work-card__img::after { opacity: .55; }

/* Insight card symbols: one small hairline icon, centred on a quiet surface.
   The SVG box is a fixed share of the card, so the symbol keeps its size and
   centre in both the 16:9 and the 4:5 box. */
.insight-art {
  --ia-line: color-mix(in srgb, var(--clr-text) 22%, transparent);
  background: var(--clr-glass); border-radius: var(--radius);
}
.insight-art .ia { position: absolute; left: 14%; top: 22%; width: 72%; height: 56%; overflow: visible; }
/* The tall card's row of nodes is sized by width alone, so it fills half the
   box and stays centred whatever the box's height. */
.insight-art .ia--wide { left: 23%; top: 50%; width: 54%; height: auto; transform: translateY(-50%); }
/* The article hero is a very wide 21:9 band: a shorter, narrower symbol box
   keeps each symbol at the same visual weight as on the cards. */
.article-hero .insight-art .ia { left: 25%; top: 24%; width: 50%; height: 52%; }
.article-hero .insight-art .ia--wide { left: 30%; top: 50%; width: 40%; height: auto; }
.ia-line { fill: none; stroke: var(--ia-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ia-node, .ia-tile { fill: var(--clr-surface); stroke: var(--ia-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ia-bar { fill: color-mix(in srgb, var(--clr-text) 11%, transparent); }
.ia-bar--strong { fill: color-mix(in srgb, var(--clr-text) 26%, transparent); }
.ia-dot { fill: color-mix(in srgb, var(--clr-text) 70%, transparent); }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(50px); transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo); }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

/* Line-mask headline reveal: main.js wraps each rendered line of a
   [data-line-reveal] heading (never single letters — Hebrew) in a mask.
   The mask only clips paint, so the heading's layout is unchanged; the
   intact text stays in a visually hidden label for assistive tech. */
.line-mask { display: block; clip-path: inset(-.35em -.5em -.2em); }
.line-mask__inner { display: block; }
.line-mask__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .line-mask__inner {
    transform: translateY(140%);
    transition: transform .8s var(--ease-out-expo) calc(var(--i, 0) * 80ms);
  }
  [data-line-reveal].is-in .line-mask__inner { transform: none; }
}

/* ---------- Responsive ---------- */
/* Touch selector: every screen that is not a wide screen with a fine
   pointer — tablets, touch screens and phones. */
@media not all and (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .brief__bar { flex-wrap: wrap; border-radius: 1.75rem; row-gap: .4rem; }
  .brief__choice { flex: 1 1 12rem; min-width: 0; text-align: start; }
  .brief__next { min-height: 3rem; }
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 2.5rem; }
  .services-grid button {
    min-height: 3.5rem; padding: .85rem 1.1rem; align-items: center;
    background: var(--clr-surface); font-size: var(--fs-body-lg);
    border: 1px solid color-mix(in srgb, var(--clr-text) 16%, transparent);
    -webkit-tap-highlight-color: transparent;
  }
  .services-grid button { height: 100%; }
  .services-grid button:hover { opacity: 1; }
  .services-grid button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--clr-primary); }
}
@media (width <= 980px) {
  .site-nav, .header-actions .pill--cta { display: none; }
  /* Same width as the header pill hides: never both, never neither. */
  .hero__cta { display: inline-flex; margin-top: 1.6rem; }
  .hamburger { display: inline-grid; }
  .work__grid { grid-template-columns: 1fr 1fr; }
  .work-card:nth-child(3), .work-card:nth-child(6) { margin-top: 0; }
  .systems { grid-template-columns: 1fr; }
  .systems__left > * { position: static; }
  .offices { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (width <= 767px) {
  .logo { font-size: 1.3rem; }
  .team__pill { inset-inline-end: 1rem; width: auto; }
  .work__grid { grid-template-columns: 1fr; }
  .micro-caption--right { margin-top: 0; }
  .team__pill { inset-inline-end: 1rem; }
  .services-grid { grid-template-columns: 1fr; }
  .office-card { grid-template-columns: 1fr; }
  .office-card__contact { top: auto; bottom: 2rem; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__social { position: static; text-align: start; flex-direction: row; gap: 1.2rem; margin-top: 2rem; }
}

/* Hebrew pass additions */
.brief__lead {
  max-width: var(--container-md);
  margin: -1.6rem auto 2.4rem;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

/* Footer: closes on the scheme's beige — the same surface as the insights
   section — restoring the surface rhythm after the offices band was removed */
.site-footer {
  background: var(--clr-beige);
}

/* CTA band — measured from the reference: inset rounded card (16px),
   67px padding, two-column grid; headline top-start, icon top-end,
   narrow paragraph mid-start, pill bottom-end */
.cta-band-wrap { padding: calc(var(--pad) * .5) var(--gutter); }
.cta-band {
  background: var(--clr-beige);
  border-radius: 16px;
  padding: clamp(2.2rem, 4.7vw, 4.2rem);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 3rem;
  row-gap: 2.6rem;
  align-items: start;
}
.cta-band h2 {
  grid-column: 1; grid-row: 1;
  font-size: var(--fs-m); font-weight: var(--fw-display);
  line-height: 1.2; max-width: 24ch;
}
.cta-band__icon {
  grid-column: 2; grid-row: 1;
  justify-self: end;
  color: var(--clr-text); font-size: 3rem; line-height: 1;
}
.cta-band p {
  grid-column: 1; grid-row: 2;
  max-width: 34rem; font-size: var(--fs-body-sm); line-height: 1.55;
}
.cta-band .pill {
  grid-column: 2; grid-row: 2;
  justify-self: end; align-self: end;
}
/* phones: one column, the icon gets a row of its own above the heading so it
   never sits on the text (sharing row 1 with the full-width heading overlapped it) */
@media (width <= 700px) {
  .cta-band { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
  .cta-band__icon { grid-column: 1; grid-row: 1; justify-self: end; }
  .cta-band h2 { grid-row: 2; }
  .cta-band p { grid-row: 3; }
  .cta-band .pill { grid-column: 1; grid-row: 4; justify-self: start; }
}

/* ---------- Reads: related-articles close (shared across inner pages) ----------
   One design for the blog surface everywhere: cards speak the homepage insights
   language (same image tints, same primary hover overlay, same cursor badge). */
.reads { max-width: var(--container-xl); margin-inline: auto;
  padding: 0 var(--gutter) calc(var(--pad) * .5); }
.reads__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; margin-bottom: 2.6rem; }
.reads__head h2 { font-size: var(--fs-l); font-weight: var(--fw-display); }
.reads__grid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter); align-items: start; }
.reads__card { display: block; }
.reads__card .img { aspect-ratio: 16/9; }
.reads__card h3 { font-size: var(--fs-xs); margin-top: 1.4rem; line-height: 1.3; max-width: 26ch; }
.reads__card .cat { color: var(--clr-muted); font-size: var(--fs-body-sm); margin-top: .5rem; }
.reads__card:hover .work-card__img::after { opacity: .55; }
@media (max-width: 700px) {
  .reads__head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .reads__grid { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* ---------- Article template (shared by all insight pages) ---------- */
.article-head { max-width: var(--container-md); margin-inline: auto; text-align: center;
  padding: calc(76px + var(--pad) * .35) var(--gutter) 0; }
.article-head .crumbs { display: block; width: fit-content; margin-inline: auto 0;
  font-size: var(--fs-body-xs); color: var(--clr-muted); letter-spacing: .05em;
  margin-bottom: 2.2rem; transition: opacity var(--t-fast); }
.article-head .crumbs:hover { opacity: .6; }
.article-head .eyebrow { position: static; display: block; margin-bottom: 1.2rem; }
.article-head h1 { font-size: var(--fs-l); font-weight: var(--fw-display); line-height: 1.15; }
.article-head .meta { display: flex; justify-content: center; gap: 1.6rem; margin-top: 1.6rem;
  font-size: var(--fs-body-xs); color: var(--clr-muted); }
.article-hero { max-width: var(--container-lg); margin: calc(var(--pad) * .35) auto 0;
  padding-inline: var(--gutter); }
.article-hero .img { aspect-ratio: 21/9; }
.article-body { max-width: 44rem; margin-inline: auto;
  padding: calc(var(--pad) * .4) var(--gutter) calc(var(--pad) * .5);
  font-size: var(--fs-body); line-height: 1.75; }
.article-body p + p { margin-top: 1.15rem; }
.article-body h2 { font-size: var(--fs-s); font-weight: var(--fw-display); line-height: 1.25;
  margin: 2.8rem 0 1.1rem; }
.article-body ul { margin: 1.15rem 0; list-style: none; }
.article-body blockquote { margin: 2.2rem 0; padding-inline-start: 1.6rem;
  border-inline-start: 3px solid var(--clr-primary);
  font-size: var(--fs-xs); font-weight: var(--fw-display); line-height: 1.45; }

/* ---------- Service detail template (shared by the three service pages) ---------- */
    .sd-hero { padding: calc(76px + var(--pad) * .45) var(--gutter) calc(var(--pad) * .4); text-align: center; }
    .sd-hero .back { display: block; width: fit-content; margin-inline-start: 0; text-align: start;
      font-size: var(--fs-body-xs); color: var(--clr-muted);
      letter-spacing: .05em; margin-bottom: 2.4rem; transition: opacity var(--t-fast); }
    .sd-hero .back:hover { opacity: .6; }
    .sd-hero .mark { display: block; color: var(--clr-text); font-size: 1.5rem; margin-bottom: 1rem; }
    .sd-hero h1 { font-size: var(--fs-xxl); }
    .sd-hero__tags { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
    .sd-hero__tags span { border: 1px solid var(--clr-muted); border-radius: var(--radius-full);
      padding: .35rem 1rem; font-size: var(--fs-body-xs); color: var(--clr-text); }

    .sd-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--gutter);
      max-width: var(--container-xl); margin-inline: auto; padding-block: calc(var(--pad) * .4); }
    .sd-split__intro p { font-size: var(--fs-body); line-height: 1.65; max-width: 30rem; }
    .sd-split__intro p + p { margin-top: 1.2rem; }
    .acc__item { border-block-end: 1px solid var(--clr-muted); }
    .acc__item:first-child { border-block-start: 1px solid var(--clr-muted); }
    .acc__head { width: 100%; background: none; border: 0; cursor: pointer;
      display: flex; align-items: center; gap: .8rem; padding: 1.25rem 0;
      font: 500 var(--fs-body-lg) var(--ff-body); color: var(--clr-text); text-align: start; }
    .acc__head .arrow { color: var(--clr-primary); }
    .acc__head .plus { margin-inline-start: auto; font-size: 1.3rem; font-weight: 300;
      transition: transform var(--t-normal) var(--ease-out-expo); }
    .acc__item.is-open .plus { transform: rotate(45deg); }
    .acc__body { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease-out-expo); }
    .acc__body p { padding: 0 1.9rem 1.3rem; font-size: var(--fs-body-sm); line-height: 1.6; max-width: 34rem; }
    .acc__head:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }

    .sd-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: center;
      max-width: var(--container-xl); margin-inline: auto; padding-block: calc(var(--pad) * .5); }
    .sd-feature__img { aspect-ratio: 4/3; border-radius: var(--radius); background-size: cover; background-position: center; }
    .sd-feature h2 { font-size: var(--fs-l); font-weight: var(--fw-display); margin-bottom: 1.4rem; }
    .sd-feature p { font-size: var(--fs-body); line-height: 1.65; max-width: 30rem; }

    .process { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--gutter);
      max-width: var(--container-xl); margin-inline: auto; }
    .process__left .eyebrow { position: static; margin-bottom: 1rem; }
    .process__left h2 { font-size: var(--fs-l); font-weight: var(--fw-display); max-width: 24rem;
      position: sticky; top: 7rem; }
    .process__right { display: flex; flex-direction: column; gap: 4rem; max-width: 42rem; }
    .process__step h3 { font-weight: var(--fw-display); font-size: var(--fs-xs); margin-bottom: 1rem; }
    .process__step p { font-size: var(--fs-body); line-height: 1.65; margin-bottom: 1rem; }
    .process__step .dots li { margin-bottom: .55rem; font-size: var(--fs-body-sm); }


    .others { max-width: var(--container-xl); margin-inline: auto; padding-block: 0 var(--pad); }
    .others h2 { font-size: var(--fs-xl); font-weight: var(--fw-display); margin-bottom: 2rem; }
    .others a { display: flex; align-items: center; gap: .9rem; padding: 1.4rem 0;
      border-block-end: 1px solid var(--clr-muted); font-size: var(--fs-xs); font-weight: 500;
      transition: opacity var(--t-fast); }
    .others a:first-of-type { border-block-start: 1px solid var(--clr-muted); }
    .others a:hover { opacity: .65; }
    .others .dot { color: var(--clr-primary); font-size: .8rem; }
    .others .explore { margin-inline-start: auto; font-size: var(--fs-body-xs); color: var(--clr-muted); letter-spacing: .06em; }

    @media (width <= 980px) {
      .sd-split, .sd-feature, .process { grid-template-columns: 1fr; }
      .process__left h2 { position: static; }
    }

/* ---------- Cookie consent (built by main.js on every page) ---------- */
.pill--ghost { background: none; border: 1px solid var(--clr-muted); color: var(--clr-text); }
.pill--ghost:hover { border-color: var(--clr-text); }
.consent { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2rem;
  width: min(36rem, calc(100vw - 2rem)); z-index: 90;
  background: var(--clr-surface); border-radius: var(--radius);
  box-shadow: 0 30px 70px -25px rgba(18, 17, 11, .4);
  padding: 1.6rem 1.7rem; }
.consent h2 { font-size: var(--fs-body-lg); font-weight: 600; margin-bottom: .7rem; }
.consent > p { font-size: var(--fs-body-xs); line-height: 1.6; color: var(--clr-text); }
.consent__rows { margin-top: 1.1rem; }
.consent__row { display: flex; align-items: center; gap: 1rem; padding: .85rem 0;
  border-block-start: 1px solid color-mix(in srgb, var(--clr-text) 10%, transparent);
  font-size: var(--fs-body-sm); }
.consent__row .state { margin-inline-start: auto; font-size: var(--fs-body-xs); color: var(--clr-muted); }
.consent__row input[type="checkbox"] { appearance: none; margin-inline-start: auto;
  width: 2.4rem; height: 1.35rem; border-radius: var(--radius-full); cursor: pointer;
  background: color-mix(in srgb, var(--clr-text) 18%, transparent); position: relative;
  transition: background var(--t-normal); }
.consent__row input[type="checkbox"]::after { content: ""; position: absolute; top: .16rem;
  inset-inline-start: .18rem; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--clr-surface); transition: transform var(--t-normal) var(--ease-out-expo); }
.consent__row input[type="checkbox"]:checked { background: var(--clr-primary); }
.consent__row input[type="checkbox"]:checked::after { transform: translateX(-1.0rem); }
.consent__row input[type="checkbox"]:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.consent__actions .pill { font-size: var(--fs-body-xs); padding: .55rem 1.15rem; }
@media (max-width: 500px) { .consent { padding: 1.2rem; } .consent__actions .pill { flex: 1 1 auto; text-align: center; } }