:root {
  --ink: #0e1a22;
  --ink-soft: #2d4452;
  --ink-mute: #526775;
  --line: #d6e4eb;
  --line-soft: #e8eef2;
  --bone: #f2f7f9;
  --bone-deep: #e4eef2;
  --paper: #ffffff;
  --navy: #1fb6c1;
  --navy-ink: #0a7680; /* turquoise for text on light surfaces: >=4.5:1 on paper, bone, bone-deep, turq-soft */
  --turq-soft: #e3f5f7;
  --success: #16a34a;
  --danger: #dc2626;

  --font-head: "Heebo", "Assistant", system-ui, sans-serif;
  --font-body: "Assistant", "Heebo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-serif: "Fraunces", "Heebo", serif;

  --maxw: 1440px;
  --gutter: 48px;

  /* spacing scale (8pt-based) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* radius scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* elevation — restrained, tinted with the ink hue for a crafted feel */
  --shadow-xs: 0 1px 2px rgba(14, 26, 34, 0.05);
  --shadow-sm: 0 2px 8px rgba(14, 26, 34, 0.06), 0 1px 2px rgba(14, 26, 34, 0.04);
  --shadow-md: 0 10px 30px rgba(14, 26, 34, 0.08), 0 2px 6px rgba(14, 26, 34, 0.05);
  --shadow-lg: 0 22px 60px rgba(14, 26, 34, 0.12), 0 6px 16px rgba(14, 26, 34, 0.07);
  --shadow-accent: 0 14px 34px rgba(31, 182, 193, 0.28);
  /* Tight dark halo for text over video and photos: the pixels next to each glyph stay dark on the brightest
     frames (WCAG 1.4.3), measured by the a11y harness media job. */
  --text-halo: 0 0 2px rgba(8, 16, 20, 0.9), 0 0 6px rgba(8, 16, 20, 0.7), 0 1px 14px rgba(8, 16, 20, 0.5);
  /* Denser halo for the turquoise emphasis over media (turquoise needs a darker neighbour than white). */
  --text-halo-strong: 0 0 3px rgba(8, 16, 20, 1), 0 0 6px rgba(8, 16, 20, 0.9), 0 0 12px rgba(8, 16, 20, 0.8), 0 0 24px rgba(8, 16, 20, 0.55);
  /* Densest, for that emphasis on phones (up to 640px), where the cropped video and photos put their brightest
     parts behind it: opaque close layers keep the glyph edges at 3:1 on the brightest frame. */
  --text-halo-dense: 0 0 1px #081014, 0 0 2px #081014, 0 0 2px #081014, 0 0 3px #081014, 0 0 4px #081014, 0 0 6px rgba(8, 16, 20, 0.95), 0 0 10px rgba(8, 16, 20, 0.9), 0 0 18px rgba(8, 16, 20, 0.75), 0 0 30px rgba(8, 16, 20, 0.55);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: .18s;
  --dur-2: .28s;
  --dur-3: .5s;

  /* type scale — one modular system; every heading resolves to a step here.
     Before this existed there were 34 bespoke clamp() values above 40px, and
     .h1, .h2 and .hero-title all landed on 95px — so a page showed eight
     identically-sized headings and no hierarchy at all. Steps are ~1.7x. */
  --fs-hero:  calc(clamp(44px, 5.6vw, 88px) * var(--a11y-font-scale, 1));   /* page statement, once per page */
  --fs-h2:    calc(clamp(30px, 3.4vw, 52px) * var(--a11y-font-scale, 1));   /* section heading */
  --fs-h2-sm: calc(clamp(26px, 2.7vw, 38px) * var(--a11y-font-scale, 1));   /* promoted card headline */
  --fs-h3:    calc(clamp(20px, 1.8vw, 26px) * var(--a11y-font-scale, 1));   /* card / sub-section */
  --fs-lede:  calc(clamp(17px, 1.3vw, 20px) * var(--a11y-font-scale, 1));   /* intro paragraph */
  --fs-body:  1rem;
  --fs-small: .875rem;                    /* minimum supporting text: 14px */
  --fs-label: .9375rem;                   /* metadata and field labels: 15px */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Focus moves and anchor jumps land below the sticky header (WCAG 2.4.11 with Shift+Tab). The legal pages have no
   sticky header. Sections that already carried scroll-margin-top: 84px now carry 4px, so they land where they did. */
html:has(header.header) { scroll-padding-top: 80px; }
@media (max-width: 1100px) { html:has(header.header) { scroll-padding-top: 72px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 400;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- accessibility: skip-to-content link + keyboard focus rings --- */
.skip-link {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 10000;
  transform: translateY(-130%);
  background: var(--ink);
  color: #fff;
  padding: 12px 22px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9375rem;
  border-end-end-radius: var(--radius-sm);
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #fff;
}
/* Two-tone ring (WCAG 1.4.11 / 2.4.7): a dark ring between two white ones, so one of them stands out on any
   background (worst case 4.2:1). No border-radius here: the outline follows the element's own corners. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="radio"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #fff;
}
/* Inside the gallery strips and tiles the scroller / tile clips anything outside the element: the ring is drawn
   inside (white over the photo) with a dark edge around it. */
.gal-scroll :focus-visible,
.cgal-tile :focus-visible,
.gal-tile :focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 5px var(--ink);
}

/* --- typography primitives --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.section-num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.display {
  font-size: calc(clamp(44px, 7.2vw, 112px) * var(--a11y-font-scale, 1));
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.h1 { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; }
.h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; }
.lede { font-size: var(--fs-lede); color: var(--ink-soft); max-width: 58ch; line-height: 1.5; }
.italic-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--navy-ink);
  letter-spacing: -0.02em;
  display: block;
}
/* Dark sections and photo heroes: the brand turquoise reads at 7:1 on --ink. */
.lead .italic-serif,
.projects-hi .italic-serif,
.pdetail-next .italic-serif,
.phero .italic-serif { color: var(--navy); }
.phero .italic-serif { text-shadow: var(--text-halo-strong); } /* turquoise over a photo (WCAG 1.4.3) */

/* Text styles picked in the admin (TextMarkup <span class="tm-…">, docs/superpowers/specs/2026-10-22-text-style-controls.md).
   Colours are roles: set here for light backgrounds, swapped on dark surfaces (the dark sections, and the captions and
   tags laid over photos inside light ones) and in contrast mode, so each choice reads at 4.5:1 or more wherever the text
   sits. Every stylable text on every page was measured with each colour, size and weight, in both modes, over the photos
   and six frames of the home video. Sizes are em: they follow the section, the responsive clamps and the text size. */
:root { --tm-accent: var(--navy-ink); --tm-strong: var(--ink); --tm-muted: var(--ink-mute); }
:is(.hero, .phero, .proj-hero, .lead, .projects-hi, .pdetail-next, .bento-card, .pts-wrap, .pspec-photo-tag, .pspec-detail-photo figcaption) {
  --tm-accent: var(--navy);
  --tm-strong: #fff;
  --tm-muted: rgba(251, 250, 246, 0.82);
}
html[data-a11y-contrast] :is(.hero, .phero, .proj-hero, .lead, .projects-hi, .pdetail-next, .bento-card, .pts-wrap, .pspec-photo-tag, .pspec-detail-photo figcaption) {
  --tm-accent: #fff;
  --tm-muted: #fff;
}
/* The gallery's turquoise "הגדלה" chip: only its own ink reads on it, so a colour choice keeps that ink. */
.gal-card .gopen { --tm-accent: currentColor; --tm-strong: currentColor; --tm-muted: currentColor; }
/* Captions and tags over the product photos stay white: no turquoise or grey reads over a light packshot (2.3:1). */
:is(.pchoice-caption, .pspec-detail-photo figcaption, .pspec-photo-tag) { --tm-accent: currentColor; --tm-muted: currentColor; }
/* Turquoise over the video or a photo takes the halo the site's own turquoise words have (see .hero-title em). */
:is(.hero, .phero, .proj-hero, .pdetail-next, .bento-card) .tm-c-accent { text-shadow: var(--text-halo-strong); }
@media (max-width: 640px) {
  :is(.hero, .phero, .proj-hero, .pdetail-next, .bento-card) .tm-c-accent { text-shadow: var(--text-halo-dense); }
}
.tm-c-accent { color: var(--tm-accent); }
.tm-c-strong { color: var(--tm-strong); }
.tm-c-muted { color: var(--tm-muted); }
.tm-s-sm { font-size: 0.85em; }
.tm-s-lg { font-size: 1.2em; }
.tm-s-xl { font-size: 1.45em; }
.tm-w-regular { font-weight: 400; }
.tm-w-bold { font-weight: 700; }
.tm-w-black { font-weight: 900; }

/* --- hairlines --- */
.hr {
  height: 1px;
  background: var(--line);
  width: 100%;
}
.hr-soft { background: var(--line-soft); }

/* --- buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-xs);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -0.005em;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--navy);
  color: var(--on-accent, #052a2d);
}
.btn-primary:hover { background: var(--navy-ink); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-accent); }
.btn-ink {
  background: var(--ink);
  color: #fff;
}
.btn-ink:hover { background: var(--navy); color: var(--on-accent, #0b1418); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.lead .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
.lead .btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .9375rem;
  padding: 4px 0;
  position: relative;
}
.btn-link::after {
  content: "";
  position: absolute;
  right: 0; left: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn-link:hover::after { transform: scaleX(0); transform-origin: left center; }
.btn-link .arrow { display: inline-block; transition: transform .3s; }
.btn-link:hover .arrow { transform: translateX(-4px); }

/* --- header --- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
}
.header-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: 78px;
}
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.logo-img {
  display: block;
  height: 44px;
  width: auto;
  /* PNG with hard black + brand-navy ink — preserve aspect ratio */
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 640px) {
  .logo-img { height: 36px; }
}
/* Footer variant — slightly larger; the footer has more breathing room */
.footer .logo-img { height: 56px; }
.nav {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.nav a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color .2s;
}
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); }
.nav a.active::after {
  content: "";
  position: absolute;
  right: 0; left: 0; bottom: -2px;
  height: 2px;
  background: var(--navy);
}
.header-cta {
  display: flex; align-items: center; gap: 14px;
}
/* Custom menu items (header.jsx data-extras): labels stay on one line, and a row that cannot hold them takes the
   menu button (data-crowded), as below 1100px. */
.header[data-extras] .nav { min-width: 0; }
.header[data-extras] .nav a { white-space: nowrap; }
.header[data-crowded] .header-row { grid-template-columns: auto 1fr; direction: ltr; }
.header[data-crowded] .nav { display: none; }
.header[data-crowded] .header-cta { justify-self: end; direction: rtl; gap: 10px; }
.header[data-crowded] .nav-toggle { display: inline-flex; order: -1; flex-shrink: 0; }
.phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all .2s;
}
.phone-pill:hover { border-color: var(--ink); }
.phone-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 3px rgba(31,182,193,0.22); }

/* --- Mobile hamburger toggle --- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0;
  position: relative;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: border-color .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px #fff; }
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile drawer --- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
.mobile-drawer.open { pointer-events: auto; visibility: visible; }
.mobile-drawer-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
[dir="rtl"] .mobile-drawer-panel { transform: translateX(100%); }
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-head {
  display: flex;
  direction: ltr;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.mobile-drawer-logo img {
  height: 36px;
  width: auto;
  display: block;
}
.mobile-drawer-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mobile-drawer-close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.mobile-drawer-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 6px 4px 10px;
}
.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  transition: color .2s ease, padding .2s ease;
}
.mobile-drawer-link svg { color: var(--ink-mute); transition: transform .2s ease, color .2s ease; }
.mobile-drawer-link:active { color: var(--navy-ink); }
.mobile-drawer-link.active { color: var(--navy-ink); }
.mobile-drawer-link.active svg { color: var(--navy); }
.mobile-drawer-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.mobile-drawer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.mobile-drawer-cta.phone {
  background: var(--ink);
  color: #fff;
}
.mobile-drawer-cta.wa {
  background: #25D366;
  color: #052a2d;
}

/* --- hero (full-width video, 50vh) --- */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #0b1418;
  color: #fff;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 800ms cubic-bezier(.4,0,.2,1),
              filter  800ms cubic-bezier(.4,0,.2,1);
  will-change: opacity, filter;
}
.hero-video.is-in  { opacity: 1; }
.hero-video.is-out { opacity: 0; }
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-fallback {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(31,182,193,0.22), transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(135deg, #0b1418 0%, #123241 45%, #0b1418 100%);
  overflow: hidden;
}
.hero-fallback::before, .hero-fallback::after {
  content: "";
  position: absolute; inset: -20%;
  background: repeating-linear-gradient(110deg, transparent 0 40px, rgba(255,255,255,0.03) 40px 41px);
  animation: heroDrift 24s linear infinite;
}
.hero-fallback::after {
  background: repeating-linear-gradient(70deg, transparent 0 80px, rgba(31,182,193,0.06) 80px 82px);
  animation-duration: 40s;
  animation-direction: reverse;
}
@keyframes heroDrift { to { transform: translateX(-200px); } }
@media (prefers-reduced-motion: reduce) { .hero-fallback::before, .hero-fallback::after { animation: none; } }
.hero-scrim {
  position: absolute; inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 62% 46% at 50% 54%, rgba(11,20,24,0.5) 0%, rgba(11,20,24,0.26) 60%, rgba(11,20,24,0) 100%),
    linear-gradient(180deg, rgba(11,20,24,0.35) 0%, rgba(11,20,24,0.15) 25%, rgba(11,20,24,0.35) 55%, rgba(11,20,24,0.85) 100%),
    linear-gradient(270deg, rgba(11,20,24,0.55) 0%, rgba(11,20,24,0.2) 55%);
}
/* Pause / play for the hero video (WCAG 2.2.2): the top corner of the hero, clear of the headline and buttons.
   44px target; the dark fill keeps the icon at 8:1 over the brightest frame. */
.hero-toggle {
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(11, 20, 24, 0.72);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.hero-toggle:hover { background: rgba(11, 20, 24, 0.92); }
.hero-inner {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 0 100px;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 22px;
  opacity: 0;
  animation: heroRise .9s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
.hero-kicker .live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 4px rgba(31,182,193,0.3);
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 4px rgba(31,182,193,0.3);} 50% { box-shadow: 0 0 0 8px rgba(31,182,193,0);} }
.hero-title {
  font-family: var(--font-head);
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #fff;
  max-width: 20ch;
  margin: 0 auto;
  text-align: center;
  text-shadow: var(--text-halo), 0 2px 18px rgba(8, 16, 20, 0.45);
  opacity: 0;
  animation: heroRise 1.1s cubic-bezier(.2,.7,.2,1) .35s forwards;
}
.hero-title em {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.025em;
  display: block;
  text-shadow: var(--text-halo-strong);
}
/* The turquoise emphasis over the home video and the photo heroes, on phones (WCAG 1.4.3, large text 3:1, measured
   over every hero clip and photo by the a11y harness media job: "מהמעטפת." 2.81 -> 3.44, "לכל עונה." 2.91 -> 3.35). */
@media (max-width: 640px) {
  .hero-title em,
  .phero .italic-serif { text-shadow: var(--text-halo-dense); }
}
.hero-sub {
  margin: 32px auto 0;
  font-size: calc(clamp(22px, 1.8vw, 30px) * var(--a11y-font-scale, 1));
  color: rgba(255,255,255,0.92);
  text-shadow: var(--text-halo);
  max-width: 46ch;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  animation: heroRise 1.1s cubic-bezier(.2,.7,.2,1) .5s forwards;
}
.hero-actions {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroRise 1.1s cubic-bezier(.2,.7,.2,1) .65s forwards;
}
.btn-accent {
  background: var(--navy);
  color: var(--on-accent, #052a2d);
  border: 1px solid var(--navy);
  box-shadow: 0 12px 28px -10px rgba(31, 182, 193, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.25);
}
.btn-accent:hover {
  background: var(--navy-ink);
  border-color: var(--navy-ink);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -12px rgba(31, 182, 193, 0.7), 0 4px 10px -2px rgba(0, 0, 0, 0.3);
}
.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.55);
}
.btn-outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-meta {
  position: absolute;
  top: 24px; right: var(--gutter); left: var(--gutter);
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
}
.hero-meta .sep { width: 3px; height: 3px; background: rgba(255,255,255,0.5); border-radius: 50%; margin: 0 14px; display: inline-block; vertical-align: middle; }
@keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.hero-strip {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  display: flex;
  align-items: center;
  gap: 48px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  background: var(--paper);
}
.hero-strip .sep { width: 4px; height: 4px; background: var(--ink-mute); border-radius: 50%; }

/* --- section scaffolding --- */
.section {
  padding: 110px 0;
  border-top: 1px solid var(--line-soft);
  position: relative;
  /* Stacking-reveal: each section masks in with a curved top edge */
  clip-path: inset(0 0 0 0 round 0 0 0 0);
  will-change: clip-path, transform;
}

/* ---------- Stacking Reveal System ----------
   Sections start "hidden" under a curved veil and lift into place.
   Triggered by IntersectionObserver adding .revealed. */
.section.reveal-stage {
  clip-path: inset(8% 0 0 0 round 32% 32% 0 0 / 80px 80px 0 0);
  transform: translateY(24px);
  opacity: 0;
  transition:
    clip-path 1s cubic-bezier(.22,.68,.12,1),
    transform 1s cubic-bezier(.22,.68,.12,1),
    opacity .6s ease-out;
}
.section.reveal-stage.revealed {
  clip-path: inset(0 0 0 0 round 0 0 0 0);
  transform: translateY(0);
  opacity: 1;
}

/* Cascading children: any element with [data-rise] inside a revealing section */
[data-rise] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--rise-delay, 0ms);
}
.revealed [data-rise] {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax settle — previous section drifts up slightly as new one lands */
.section.settling {
  transform: translateY(-14px);
  transition: transform 1.2s cubic-bezier(.22,.68,.12,1);
}

/* Curtain accent line that sweeps across at reveal moment */
.section.reveal-stage::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 0;
  height: 1px;
  background: var(--accent, var(--navy));
  transform: translateX(-50%);
  transition: width 1.4s cubic-bezier(.22,.68,.12,1) .2s;
  pointer-events: none;
  z-index: 2;
}
.section.reveal-stage.revealed::before {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .section.reveal-stage,
  .section.reveal-stage.revealed,
  [data-rise],
  .revealed [data-rise] {
    clip-path: none;
    transform: none;
    opacity: 1;
    filter: none;
    transition: none;
  }
}

/* On mobile, soften the dramatic curved clip-path reveal so it doesn't look
   glitchy on small screens or trigger horizontal-overflow when sections snap in. */
@media (max-width: 768px) {
  .section.reveal-stage {
    clip-path: inset(0 0 0 0);
    transform: translateY(14px);
  }
  .section.reveal-stage.revealed { transform: translateY(0); }
  [data-rise] { transform: translateY(18px); filter: none; }
}
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: 64px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  max-width: 900px;
  margin-inline: auto;
}
.section-head .title-wrap { max-width: none; }
.section-head .title-wrap .section-num { text-align: center; }
.section-head .h2 { text-align: center; text-wrap: balance; }
.section-head .aside { max-width: 52ch; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.6; text-align: center; }

/* --- categories (Bento grid) ---
   Pergolas = feature card (2×2), others = 1×1 tiles arranged in a 4×2 grid.
   Each card: full-bleed image with scrim, number/EN top-left, title + tagline +
   highlight chips + arrow CTA bottom. Cards fade up with staggered delays once
   the section enters the viewport (.bento.in), and zoom subtly on hover. */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 56px;
}
.bento-card {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--paper);
  text-decoration: none;
  background: var(--ink);
  min-height: 260px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s var(--ease),
    transform .5s var(--ease),
    box-shadow .5s var(--ease);
}
.bento.in .bento-card { opacity: 1; transform: translateY(0); }
.bento.in .bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bento-card.is-feature {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 540px;
}
.bento-card.is-wide { grid-column: span 2; }

.bento-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.bento-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  filter: saturate(1.05);
}
.bento-card:hover .bento-media img { transform: scale(1.08); }

.bento-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 26, 34, 0.0) 0%, rgba(14, 26, 34, 0.15) 35%, rgba(14, 26, 34, 0.7) 70%, rgba(14, 26, 34, 0.92) 100%),
    linear-gradient(0deg, rgba(14, 26, 34, 0.22), rgba(14, 26, 34, 0.22));
  transition: background .45s ease, opacity .45s ease;
}
.bento-card:hover .bento-scrim {
  background:
    linear-gradient(180deg, rgba(14, 26, 34, 0.2) 0%, rgba(14, 26, 34, 0.45) 40%, rgba(14, 26, 34, 0.88) 78%, rgba(14, 26, 34, 0.95) 100%),
    linear-gradient(0deg, rgba(14, 26, 34, 0.15), rgba(14, 26, 34, 0.15));
}

.bento-body {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: inherit;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.bento-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.4);
}
.bento-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: var(--fs-small);
  font-weight: 600;
  background: rgba(14, 26, 34, 0.55);


  text-shadow: none;
}
.bento-en { letter-spacing: 0.18em; }

.bento-bot { display: flex; flex-direction: column; gap: 10px; }
.bento-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 3px 10px rgba(0, 0, 0, 0.55),
    0 10px 28px rgba(0, 0, 0, 0.35);
}
.is-feature .bento-title { font-size: var(--fs-h2-sm); }

.bento-tag {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: #fff;
  max-width: 34ch;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.5);
  max-height: 48px;
  opacity: 0;
  overflow: hidden;
  transition: opacity .35s ease .05s;
}
.is-feature .bento-tag { font-size: 1.125rem; max-height: 60px; opacity: 1; }
.bento-card:hover .bento-tag { opacity: 1; }

.bento-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 80px;
  opacity: 0;
  overflow: hidden;
  transition: opacity .35s ease .1s;
}
.is-feature .bento-chips { opacity: 1; }
.bento-card:hover .bento-chips { opacity: 1; }
.bento-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 6px 12px;
  border: 1px solid rgba(251, 250, 246, 0.38);
  background: rgba(14, 26, 34, 0.28);


}

.bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  transition: gap .3s ease, color .3s ease;
}
.bento-cta svg { transition: transform .3s ease; }
.bento-card:hover .bento-cta { gap: 16px; color: var(--navy); }
.bento-card:hover .bento-cta svg { transform: translateX(-6px); }

/* Ken-burns on the feature card image: one slow settle at the old pace that ends within 5 s on the old resting
   frame (WCAG 2.2.2), none with prefers-reduced-motion; the menu's stop-animations ends it at once. */
@keyframes bento-drift {
  from { transform: scale(1.047) translate(-0.45%, -0.45%); }
  to   { transform: scale(1.02) translate(0, 0); }
}
.bento.in .bento-card.is-feature:not(:hover) .bento-media img {
  animation: bento-drift 5s ease-in-out 1 both;
}
@media (prefers-reduced-motion: reduce) {
  .bento.in .bento-card.is-feature:not(:hover) .bento-media img { animation: none; transform: scale(1.02); }
}

@media (max-width: 1100px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .bento-card.is-feature {
    grid-column: span 2;
    grid-row: auto;
    min-height: 420px;
  }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .bento-card { min-height: 260px; }
  .bento-card.is-feature { min-height: 320px; }
  .bento-card.is-wide { grid-column: auto; }
  .bento-tag, .bento-chips { max-height: 80px; opacity: 1; }
  .bento-body { padding: 18px 18px 20px; }
  .bento-title { font-size: var(--fs-h3); }
  .is-feature .bento-title { font-size: var(--fs-h2-sm); }
  .bento-tag { font-size: .875rem; }
  .is-feature .bento-tag { font-size: .9375rem; }
  .bento-chip { font-size: var(--fs-small); padding: 4px 10px; }
}

/* --- lead form --- */
.lead {
  background: var(--ink);
  color: var(--paper);
}
.lead .section-head .aside { color: rgba(251,250,246,0.7); }
.lead h2 { color: var(--paper); }
.lead .eyebrow, .lead .section-num { color: rgba(251,250,246,0.5); }
.lead-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: start;
}
/* was inline in leadform.jsx — declassed so mobile.css can resize it */
.lead-copy-lede { color: rgba(251,250,246,0.75); max-width: 42ch; margin-top: 28px; font-size: 1.375rem; line-height: 1.6; }
.lead-copy .stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(251,250,246,0.15);
}
.stat .n { font-family: var(--font-head); font-size: calc(clamp(32px, 3vw, 44px) * var(--a11y-font-scale, 1)); font-weight: 700; letter-spacing: -0.03em; }
.stat .l { font-family: var(--font-mono); font-size: var(--fs-small); color: rgba(251,250,246,0.55); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; }

.form {
  background: rgba(251,250,246,0.04);
  border: 1px solid rgba(251,250,246,0.14);
  padding: 40px;
}
.form h3 { color: var(--paper); margin-bottom: 4px; }
.form .sub { color: rgba(251,250,246,0.6); font-size: .875rem; margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row.full { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: rgba(251,250,246,0.6);
  letter-spacing: 0.02em; /* wide tracking hurts Hebrew legibility */
  text-transform: uppercase;
}
.field input, .field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(251,250,246,0.25);
  padding: 10px 0;
  color: var(--paper);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color .2s;
}
.field input::placeholder { color: rgba(251,250,246,0.35); }
.field input:focus, .field select:focus { border-color: var(--paper); }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fbfaf6' stroke-opacity='.75' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 4px center;
  background-size: 12px 7px;
  padding-left: 26px;
  cursor: pointer;
}
.pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; min-height: 41px; }
.pill {
  padding: 8px 14px;
  border: 1px solid rgba(251,250,246,0.2);
  font-size: var(--fs-small);
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
  color: rgba(251,250,246,0.75);
}
.pill:hover { border-color: rgba(251,250,246,0.5); color: var(--paper); }
.pill.active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.form .btn-primary { background: var(--navy); color: var(--on-accent, #0b1418); width: 100%; justify-content: center; margin-top: 28px; height: 56px; }
.form .btn-primary:hover { background: #fff; color: var(--ink); transform: none; }

/* --- category pages (Gates, Louvers, ZIP, Enclosures, Consoles) --- */
.cgal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.cgal-tile {
  margin: 0;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cgal-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.cgal-tile figcaption {
  padding: 16px 18px 18px;
}
.cgal-tile figcaption .t {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.cgal-tile figcaption .m {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
@media (max-width: 960px) { .cgal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cgal-grid { grid-template-columns: 1fr; } }

/* "Show more" affordance under a capped gallery grid. */
.cgal-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}
.cgal-more .btn {
  min-width: 220px;
  justify-content: center;
}
.cgal-count {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.chi-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.chi-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}
.chi-item:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 24px; }
.chi-item:nth-child(even) { padding-left: 24px; }
.chi-num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.chi-text {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 720px) {
  .chi-list { grid-template-columns: 1fr; }
  .chi-item:nth-child(odd) { border-right: 0; padding-right: 4px; }
  .chi-item:nth-child(even) { padding-left: 4px; }
}

.chi-cards {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.chi-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.chi-card:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: var(--shadow-md);
}
.chi-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bone-deep);
  overflow: hidden;
}
.chi-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.chi-card:hover .chi-card__media img { transform: scale(1.04); }
.chi-card__num {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 26, 34, 0.82);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;

}
.chi-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
}
.chi-card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.chi-card__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 1024px) {
  .chi-cards { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}
@media (max-width: 560px) {
  .chi-cards { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .chi-card__title { font-size: 1.125rem; }
}

/* --- about --- */
.about {
  background: var(--bone);
}
.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
}
.about-body p + p { margin-top: 1.2em; }
.about-body p { font-size: 1.3125rem; line-height: 1.7; color: var(--ink-soft); }
.about-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 36px;
  background: var(--bone-deep);
  position: relative;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stats column — replaces the empty seal */
.about-stats {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.about-stats-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.about-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.about-stat:last-of-type { border-bottom: none; padding-bottom: 0; }
.about-stat-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.about-stat-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.about-stat-sub {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 4px;
}
.about-certs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.about-cert .l {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.about-cert .t {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* --- gallery (static mosaic — gapless, full-bleed) --- */
.gal-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 0;
}
.gal-tile {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--bone);
  opacity: 0;
  transform: translateY(18px);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
  outline: 1px solid var(--paper);
}
.gal-tile.in { opacity: 1; transform: translateY(0); }
.gal-tile > .ph { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.gal-tile:hover > .ph { transform: scale(1.06); }
.gal-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,20,24,0.7) 100%);
  opacity: 0;
  transition: opacity .35s;
  z-index: 1;
}
.gal-tile:hover::after { opacity: 1; }
.gal-tile .gcat {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.92);
  padding: 6px 11px;
  color: var(--ink);
  z-index: 2;
}
.gal-tile .gtag {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 2;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: all .35s;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -0.01em;
}
.gal-tile:hover .gtag { opacity: 1; transform: translateY(0); }
.gal-tile .zoom {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-accent, #0b1418);
  display: grid; place-items: center;
  opacity: 0;
  transform: scale(.7);
  transition: all .35s;
}
.gal-tile:hover .zoom { opacity: 1; transform: scale(1); }

/* Mosaic sizing pattern — dense packing, total cols = 12 */
.gs-a { grid-column: span 6; grid-row: span 2; }
.gs-b { grid-column: span 3; grid-row: span 2; }
.gs-c { grid-column: span 3; grid-row: span 2; }
.gs-d { grid-column: span 4; grid-row: span 2; }
.gs-e { grid-column: span 4; grid-row: span 2; }
.gs-f { grid-column: span 4; grid-row: span 2; }
.gs-g { grid-column: span 6; grid-row: span 2; }
.gs-h { grid-column: span 3; grid-row: span 2; }
.gs-i { grid-column: span 3; grid-row: span 2; }
.gs-j { grid-column: span 6; grid-row: span 2; }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,20,24,0.92);

  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.lb.open { opacity: 1; pointer-events: auto; }
.lb-stage {
  position: relative;
  width: min(1200px, 90vw);
  aspect-ratio: 16 / 10;
  max-height: 82vh;
  background: var(--bone);
  overflow: hidden;
  transform: scale(.96);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.lb.open .lb-stage { transform: scale(1); }

/* Lightbox: show full image without cropping; the stage is the frame */
.lb-stage {
  background: #0b1418;
}
.lb-slide .ph.ph-img img {
  object-fit: contain;
  object-position: center;
  background: #0b1418;
}
.lb-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.lb-slide.active { opacity: 1; }
.lb-meta {
  position: absolute;
  right: 0; left: 0; bottom: 0;
  padding: 22px 28px;
  background: linear-gradient(180deg, transparent, rgba(11,20,24,0.85));
  color: #fff;
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px;
  z-index: 3;
}
.lb-meta .col { min-width: 0; flex: 1; }
.lb-meta .t { font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; }
.lb-meta .m { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; opacity: .75; margin-top: 4px; }
.lb-meta .count { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.06em; opacity: .75; white-space: nowrap; flex-shrink: 0; }
.lb-close {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 210;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid; place-items: center;
  border: none;
  cursor: pointer;
  transition: all .2s;
}
.lb-close:hover { background: var(--navy); color: var(--on-accent, #0b1418); }
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  display: grid; place-items: center;
  border: none;
  cursor: pointer;
  transition: all .2s;
  z-index: 210;
}
.lb-nav:hover { background: var(--navy); color: var(--on-accent, #0b1418); }
.lb-nav.prev { right: calc((100vw - min(1200px, 90vw)) / 2 - 70px); }
.lb-nav.next { left: calc((100vw - min(1200px, 90vw)) / 2 - 70px); }
@media (max-width: 900px) {
  .lb-nav.prev { right: 12px; }
  .lb-nav.next { left: 12px; }
  .gal-mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; }
  .gs-a,.gs-c,.gs-e,.gs-g,.gs-j { grid-column: span 6; grid-row: span 2; }
  .gs-b,.gs-d,.gs-f,.gs-h,.gs-i { grid-column: span 3; grid-row: span 2; }
}
.gal-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  align-items: center;
}
.gal-filter .chip {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: #fff;
  cursor: pointer;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gal-filter .chip:hover { border-color: var(--navy); color: var(--ink); }
.gal-filter .chip.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.gal-filter .chip .count {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  opacity: .75;
  font-variant-numeric: tabular-nums;
}
.gal-filter-spacer { flex: 1; }
/* Sub-category chips above category / pergola galleries. */
.gal-filter.is-sub + .cgal-grid { margin-top: 0; }
@media (max-width: 768px) {
  /* One scrollable row: long labels (gates has seven) would otherwise stack four rows deep. */
  .gal-filter.is-sub {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -4px;
    padding-block: 4px;
    padding-inline: 4px 28px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
    mask-image: linear-gradient(to right, transparent 0, #000 28px);
  }
  .gal-filter.is-sub::-webkit-scrollbar { display: none; }
  .gal-filter.is-sub .chip { flex-shrink: 0; white-space: nowrap; }
}
.gal-nav {
  display: inline-flex;
  gap: 8px;
}
.gal-nav button {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  color: var(--ink);
  transition: all .2s;
}
.gal-nav button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.gal-nav button:disabled { opacity: .3; cursor: not-allowed; }

.gal-scroll-wrap {
  position: relative;
  /* Allow the scroller to bleed past the container to the viewport edges */
  margin: 0 calc(-1 * var(--gutter));
  padding: 4px var(--gutter);
  mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.gal-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 16px;
  /* 2-row mosaic */
  align-items: stretch;
}
.gal-scroll::-webkit-scrollbar { height: 4px; }
.gal-scroll::-webkit-scrollbar-track { background: var(--line-soft); }
.gal-scroll::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 2px; }

.gal-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 280px; /* was inline in section-gallery.jsx / pergola-gallery.jsx */
}
.gal-col.wide { grid-template-rows: 1fr; width: 440px; }
.gal-col.wide .gal-card { height: 520px; }

.gal-card {
  position: relative;
  overflow: hidden;
  background: var(--bone);
  cursor: pointer;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(24px);
  transition: transform .6s var(--ease), opacity .6s ease, box-shadow .4s var(--ease);
}
.gal-card.in {
  opacity: 1;
  transform: translateY(0);
}
.gal-card:hover { box-shadow: var(--shadow-md); }
.gal-card > .ph { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.gal-card:hover > .ph { transform: scale(1.06); }
.gal-card .gcat {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.92);
  padding: 6px 11px;
  color: var(--ink);
  z-index: 2;

}
.gal-card .gtag {
  position: absolute;
  right: 16px; bottom: 16px; left: 16px;
  z-index: 2;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: all .35s;
}
.gal-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,20,24,0.75) 100%);
  opacity: 0;
  transition: opacity .35s;
  z-index: 1;
}
.gal-card:hover::after { opacity: 1; }
.gal-card:hover .gtag { opacity: 1; transform: translateY(0); }
.gal-card .gtitle { font-family: var(--font-head); font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em; }
.gal-card .gmeta { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; opacity: .8; }
.gal-card .gopen {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  background: var(--navy);
  color: var(--on-accent, #0b1418);
  padding: 8px 12px;
  white-space: nowrap;
  font-weight: 500;
}

/* --- clients --- */
.clients {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 64px 0;
  overflow: hidden;
}
.clients-head {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.clients-head .t { font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--ink-mute); }

/* Mobile CTA bar — sticky 4-button bar on mobile only (Call / WA / Viz / Quote) */
.mcta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: 5px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.96);

  border-top: 1px solid var(--line-soft);
  z-index: 80;
  transform: translateY(110%);
  transition: transform 200ms ease;
}
.mcta-bar.visible { transform: translateY(0); }
.mcta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid var(--line-soft);
  background: #fff;
  color: var(--ink);
}
.mcta-btn.mcta-quote {
  background: var(--navy, #0f2a44);
  color: var(--on-accent, #052a2d);
  border-color: transparent;
}
.mcta-btn.mcta-wa {
  background: #25D366;
  color: #052a2d;
  border-color: transparent;
}
.mcta-btn.mcta-viz {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
}
.mcta-btn.mcta-viz svg { opacity: 0.9; }
/* Trim default button label sizing on the 4-button bar — keeps labels readable on narrow phones */
.mcta-bar .mcta-btn { font-size: var(--fs-small); padding: 0 6px; }
@media (max-width: 760px) {
  .mcta-bar { display: grid; }
  /* Focus scrolling keeps the focused element above the bar (WCAG 2.4.11). While the cookie banner shows,
     consent.jsx sets the larger of the two inline. */
  html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Hide the legacy WhatsApp FAB; the mobile CTA bar replaces it on mobile. */
  .fab { display: none !important; }
  /* Give page content breathing room so the sticky bar doesn't cover the footer.
     Includes the iOS safe-area-inset so the bar sits above the home indicator. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* Resume banner — appears on Home when the user has a cached visualizer result */
.resume-banner {
  background: var(--navy, #0f2a44);
  color: var(--on-accent, #052a2d);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.resume-banner-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.resume-banner-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 40px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}
.resume-banner-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.resume-banner-copy { flex: 1 1 auto; min-width: 0; }
.resume-banner-title { font-weight: 600; font-size: .9375rem; letter-spacing: -0.01em; }
.resume-banner-sub { font-size: var(--fs-small); opacity: 0.9; margin-top: 2px; }
.resume-banner-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.resume-banner-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  padding: 4px 8px;
}
.resume-banner-close:hover { opacity: 1; }
@media (max-width: 640px) {
  .resume-banner-row { gap: 10px; padding: 10px 0; }
  .resume-banner-thumb { flex-basis: 40px; width: 40px; height: 30px; }
  .resume-banner-title { font-size: var(--fs-small); }
  .resume-banner-sub { display: none; }
  .resume-banner-actions .btn { padding: 8px 10px; font-size: var(--fs-small); }
}

/* Trust strip — slim credibility band right under the hero */
.trust-strip {
  background: var(--bone);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 22px 0;
}
.trust-strip-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.trust-strip-item {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-left: 1px solid var(--line-soft);
  text-align: center;
}
.trust-strip-item:last-child { border-left: none; }
.trust-strip-n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.trust-strip-l {
  font-size: var(--fs-small);
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}
@media (max-width: 760px) {
  .trust-strip { padding: 14px 0; }
  .trust-strip-row {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
  }
  .trust-strip-item {
    flex-direction: column;
    gap: 2px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--line-soft);
  }
  .trust-strip-item:nth-child(3n) { border-left: none; }
  .trust-strip-item:nth-last-child(-n+3) { border-bottom: none; }
  .trust-strip-n { font-size: 1rem; }
  .trust-strip-l { font-size: var(--fs-small); }
}
.clients-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-right: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.client-cell {
  height: 110px;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--line-soft);
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-mute);
  transition: color .2s, background .2s;
  font-size: 1.125rem;
}
.client-cell:last-child { border-left: none; }
.client-cell:hover { color: var(--ink); background: var(--bone); }
.client-cell .mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}

/* --- testimonials --- */
.testi-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 48px;
}
.rating-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  padding: 12px 18px;
  border-radius: 999px;
}
.rating-badge .stars { display: inline-flex; gap: 2px; color: #e8b64c; font-size: .875rem; }
.rating-badge .score { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.rating-badge .label { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-mute); letter-spacing: 0.06em; text-transform: uppercase; }

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.testi {
  padding: 40px 32px 36px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 320px;
}
.testi:last-child { border-left: none; }
.testi .q { font-family: var(--font-head); font-style: normal; font-weight: 500; font-size: 1.625rem; line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); flex: 1; }
.testi .person { display: flex; align-items: center; justify-content: space-between; }
.testi .name { font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; }
.testi .meta { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-mute); letter-spacing: 0.06em; }

/* --- footer --- */
.footer {
  background: var(--bone);
  padding: 52px 0 76px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 4px;
}
.footer-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 32px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.footer-intro h2 {
  font-size: calc(clamp(28px, 2.8vw, 40px) * var(--a11y-font-scale, 1));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.footer-inquiry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 20px;
  flex-shrink: 0;
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-xs);
  font-size: 1rem;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.footer-inquiry:hover { background: var(--ink); color: var(--paper); }
.footer-description {
  max-width: 29ch;
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr 1.15fr;
  grid-template-areas: "brand products info contact";
  gap: 36px;
  margin-bottom: 32px;
}
.footer-grid > * { min-width: 0; }
.footer-brand { grid-area: brand; }
.footer-products { grid-area: products; }
.footer-info { grid-area: info; }
.footer-contact { grid-area: contact; }
.footer h3 {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  letter-spacing: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 14px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin: 0; font-size: 1rem; line-height: 1.5; }
.footer li a { display: inline-block; padding: 7px 0; color: var(--ink-soft); transition: color .2s; }
.footer li a:hover { color: var(--navy-ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-socials { margin-top: 16px; }
.footer .socials a { width: 44px; height: 44px; background: var(--paper); }
.footer-contact-actions { display: grid; gap: 8px; }
.footer-contact-actions a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--paper);
}
.footer-contact-actions a:hover { border-color: var(--navy-ink); }
.footer-contact-actions svg { flex-shrink: 0; }
.footer-contact-actions .footer-whatsapp { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.footer-email { display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; font-size: 1rem; padding: 8px 0; }
.footer-location { margin-top: 16px; font-size: 1rem; color: var(--ink-soft); }
.footer-hours { margin: 6px 0 0; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.footer-hours div { display: flex; justify-content: space-between; gap: 16px; max-width: 240px; }
.footer-hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.footer-hours dt { font-weight: 400; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.footer-legal a, .footer-legal button { font: inherit; padding: 8px 0; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.footer-legal a:hover, .footer-legal button:hover { color: var(--ink); }
.footer-copyright { line-height: 1.6; }
.footer .logo-img { height: 52px; width: auto; }
.footer .logo { width: fit-content; }
.footer .footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--ink-mute);
  letter-spacing: 0;
  line-height: 1.5;
}
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "brand brand brand" "products info contact"; gap: 28px; }
  .footer-brand { display: flex; align-items: center; gap: 24px; }
  .footer-description { margin: 0; max-width: 40ch; }
  .footer-socials { margin: 0; margin-inline-start: auto; }
}
@media (max-width: 600px) {
  .footer { padding: 32px 0 28px; }
  .footer-intro { display: block; padding-bottom: 24px; margin-bottom: 26px; }
  .footer-intro h2 { font-size: 1.75rem; max-width: 22ch; line-height: 1.35; }
  .footer-inquiry { padding: 8px 16px; margin-top: 16px; font-size: 1.0625rem; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "brand brand" "products info" "contact contact"; gap: 26px 24px; margin-bottom: 24px; }
  .footer-brand { display: block; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .footer-description { max-width: 34ch; margin-top: 12px; font-size: 1.0625rem; line-height: 1.6; }
  .footer-socials { margin-top: 14px; }
  .footer h3 { font-size: 1.125rem; margin-bottom: 10px; }
  .footer li { font-size: 1.0625rem; }
  .footer li a { padding: 9px 0; min-height: 44px; }
  .footer-contact { border-top: 1px solid var(--line); padding-top: 24px; }
  .footer-contact-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .footer-contact-actions a { min-height: 48px; }
  .footer-hours { font-size: 1.0625rem; max-width: 270px; }
  .footer-hours div { max-width: none; }
  .footer .footer-meta { align-items: flex-start; gap: 14px; font-size: .9375rem; padding-bottom: 38px; }
  .footer-legal { gap: 0 18px; }
  .footer-legal a, .footer-legal button { min-height: 44px; }
}
.socials { display: flex; gap: 12px; }
.socials a {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  border-radius: 50%;
  transition: all .2s;
}
.socials a:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* --- WhatsApp FAB --- */
.fab {
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 60;
  background: var(--navy);
  color: var(--on-accent, #0b1418);
  padding: 14px 20px 14px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .875rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transition: transform .25s;
}
.fab:hover { transform: translateY(-2px); }
.fab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent, #0b1418); box-shadow: 0 0 0 4px rgba(11,20,24,0.18); }

/* --- placeholder striped image --- */
.ph {
  position: absolute; inset: 0;
  background: var(--bone-deep);
  display: flex;
  align-items: end;
  justify-content: flex-start;
  padding: 14px;
}
.ph .ph-stripe {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-35deg,
    transparent 0 12px,
    rgba(20,23,26,0.04) 12px 13px);
}
.ph .ph-dot {
  position: absolute;
  top: 14px; right: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(20,23,26,0.35);
}
.ph .ph-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-transform: uppercase;
  background: rgba(251,250,246,0.7);
  padding: 6px 10px;

  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph.ph-img {
  background: var(--bone-deep);
  padding: 0;
}
.ph.ph-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- tweaks panel --- */
.tweaks {
  position: fixed;
  bottom: 28px; left: 28px;
  width: 300px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 20px;
  z-index: 70;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  font-family: var(--font-body);
}
.tweaks h5 {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink-mute);
  font-weight: 500;
  display: flex; justify-content: space-between;
}
.tweaks .group { margin-bottom: 16px; }
.tweaks .group > label { font-size: var(--fs-small); color: var(--ink-mute); display: block; margin-bottom: 6px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.tweaks .swatches { display: flex; gap: 8px; }
.tweaks .swatch { width: 28px; height: 28px; border: 1px solid var(--line); cursor: pointer; border-radius: 50%; }
.tweaks .swatch.active { outline: 2px solid var(--ink); outline-offset: 2px; }
.tweaks .opts { display: flex; gap: 6px; }
.tweaks .opt { flex: 1; padding: 8px; border: 1px solid var(--line); font-size: var(--fs-small); text-align: center; cursor: pointer; }
.tweaks .opt.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* hide tweaks when not active */
body:not(.tweaks-on) .tweaks { display: none; }

/* --- responsive --- */
@media (max-width: 1100px) {
  :root { --gutter: 28px; }
  .header-row { grid-template-columns: auto 1fr auto; gap: 16px; height: 68px; }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero-frame { grid-template-columns: 1fr; gap: 32px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .lead-grid { grid-template-columns: 1fr; gap: 40px; }
  .testi-grid { grid-template-columns: 1fr; }
  .testi { border-left: none; border-bottom: 1px solid var(--line); }
  .clients-strip { grid-template-columns: repeat(3, 1fr); }
  .client-cell { border-bottom: 1px solid var(--line-soft); }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 36px; padding-bottom: 18px; gap: 12px; }
  .section-head .h2 { white-space: normal; }
  .section-head .aside { font-size: 1rem; line-height: 1.55; }
  .h2 { font-size: calc(clamp(28px, 7.2vw, 40px) * var(--a11y-font-scale, 1)); }
  .h3 { font-size: calc(clamp(20px, 4.6vw, 26px) * var(--a11y-font-scale, 1)); }
  .lede { font-size: 1rem; line-height: 1.55; }
  .hero { min-height: 78vh; }
  .hero-inner { min-height: 78vh; padding: 84px 0 56px; }
  .hero-title { font-size: calc(clamp(40px, 11vw, 60px) * var(--a11y-font-scale, 1)); }
  .hero-sub { font-size: calc(clamp(15px, 4.4vw, 18px) * var(--a11y-font-scale, 1)); margin-top: 22px; line-height: 1.5; }
  .hero-kicker { font-size: var(--fs-small); margin-bottom: 16px; }
  .hero-meta { font-size: var(--fs-small); top: 14px; }
  .hero-meta .sep { margin: 0 8px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-ctas .btn { width: 100%; text-align: center; }
  .hero-actions { flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
  .hero-actions .btn { width: 100%; justify-content: center; height: 50px; font-size: .9375rem; }
  .btn { height: 48px; padding: 0 20px; font-size: .875rem; }
  .gal-mosaic { grid-auto-rows: 110px; }
  .gs-a, .gs-b, .gs-c, .gs-d, .gs-e, .gs-f, .gs-g, .gs-h, .gs-i, .gs-j {
    grid-column: span 6;
    grid-row: span 2;
  }
  .lead-copy .stat-row { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; padding-top: 22px; }
  .stat .n { font-size: 1.75rem; }
  .stat .l { font-size: var(--fs-small); }
  .form { padding: 24px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .clients-strip { grid-template-columns: repeat(2, 1fr); }
  .client-cell { height: 84px; font-size: .9375rem; }
  .filter-chips { flex-wrap: wrap; gap: 8px; }
  .chip { font-size: var(--fs-small); padding: 8px 14px; }
  .lb-arrow { width: 44px; height: 44px; }
  .lb-close { width: 44px; height: 44px; }
  .lb-meta { padding: 16px 18px; gap: 12px; }
  .lb-meta .t { font-size: 1rem; }
  .lb-meta .m { font-size: var(--fs-small); }
  .lb-meta .count { font-size: var(--fs-small); }
  .tweaks { display: none !important; }
  .fab { display: none; }
  .testi { padding: 30px 22px 28px; min-height: 0; }
  .testi .q { font-size: 1.25rem; line-height: 1.4; }
  .testi .name { font-size: 1rem; }
  .phone-pill { padding: 8px 12px; gap: 6px; }
  .phone-pill .dot { width: 6px; height: 6px; }
  .phone-pill-num { font-size: var(--fs-small); }
  .clients-head .t { font-size: 1rem; }
  .rating-badge { padding: 10px 14px; gap: 10px; }
  .rating-badge .score { font-size: .875rem; }
  .rating-badge .label { font-size: var(--fs-small); }
  .testi-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
}

@media (max-width: 520px) {
  .phone-pill { padding: 0; border: 1px solid var(--line); width: 44px; height: 44px; justify-content: center; border-radius: 12px; }
  .phone-pill .dot { display: none; }
  .phone-pill-num { display: none; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section-num { font-size: var(--fs-small); }
  .hero-title { font-size: calc(clamp(36px, 13vw, 56px) * var(--a11y-font-scale, 1)); line-height: 0.95; }
  .cat-card { aspect-ratio: 5 / 4; }
  .cat-title { font-size: 1.625rem; }
  .lead-copy .stat-row { grid-template-columns: 1fr; }
  .about-stats { padding: 28px 22px; gap: 22px; }
  .about-stat-num { font-size: 2.75rem; }
  .about-stat-label { font-size: 1rem; }
  .about-body p { font-size: 1.0625rem; line-height: 1.65; }
}

/* ========================================
   SECTION-KIT — components shared across category pages
   ======================================== */

/* --- SectionModelSwitcher (.pms) ---
   Horizontal strip of model cards. Clicking one hoists selectedModel to app state. */
.pms { padding-top: 72px; padding-bottom: 72px; }
.pms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.pms-card {
  text-align: right;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font: inherit;
  color: inherit;
}
.pms-card:hover { border-color: var(--ink-soft); transform: translateY(-2px); box-shadow: 0 18px 34px -26px rgba(14,26,34,.28); }
.pms-card.active {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(31,182,193,.15), 0 24px 40px -28px rgba(14,26,34,.3);
}
.pms-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bone); }
.pms-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.pms-card:hover .pms-img img { transform: scale(1.03); }
.pms-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.pms-he {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pms-blurb {
  font-size: .90625rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.pms-card.active .pms-he { color: var(--navy-ink); }

/* --- SectionTwoState (.pts) ---
   Before/after image compositor with a drag-to-reveal slider. */
.pts { padding-top: 72px; padding-bottom: 72px; }
.pts-wrap {
  position: relative;
  margin-top: 32px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  user-select: none;
  cursor: ew-resize;
  touch-action: none;
  border-radius: 2px;
}
.pts-wrap.drag { cursor: grabbing; }
.pts-layer { position: absolute; inset: 0; }
.pts-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.pts-chip {
  position: absolute;
  top: 20px;
  padding: 6px 12px;
  background: rgba(11,20,24,0.72);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  border: none;
  cursor: pointer;

  transition: background-color .18s ease;
}
.pts-chip:hover { background: rgba(11,20,24,0.9); }
.pts-chip.on { background: var(--navy); }
.pts-chip-a { inset-inline-start: 20px; }
.pts-chip-b { inset-inline-end: 20px; }
.pts-divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(255,255,255,0.9);
  pointer-events: none;
  box-shadow: 0 0 18px rgba(0,0,0,0.35);
}
.pts-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.pts-handle .arr { opacity: 0.7; }
@media (max-width: 640px) {
  .pts-wrap { aspect-ratio: 4 / 5; }
  .pts-chip { font-size: var(--fs-small); padding: 5px 10px; top: 14px; }
  .pts-chip-a { inset-inline-start: 14px; }
  .pts-chip-b { inset-inline-end: 14px; }
  .pms-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   PROJECTS — home highlight strip + index page + detail pages
   ============================================================ */

/* Home page Projects highlight strip */
.projects-hi {
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
}
.projects-hi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.projects-hi-card {
  display: block;
  text-decoration: none;
  color: #fff;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1),
              transform .9s cubic-bezier(.2,.7,.2,1);
}
.projects-hi-card.in { opacity: 1; transform: translateY(0); }
.projects-hi-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #1a2025;
  margin-bottom: 18px;
}
.projects-hi-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter 600ms ease;
  filter: saturate(0.95);
}
.projects-hi-card:hover .projects-hi-img img {
  transform: scale(1.05);
  filter: saturate(1.05);
}
.projects-hi-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.projects-hi-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 12px;
}
.projects-hi-eyebrow .sep {
  width: 3px; height: 3px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
}
.projects-hi-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 4px;
}
.projects-hi-sub {
  font-size: .9375rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
}
.projects-hi-cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

@media (max-width: 880px) {
  .projects-hi-grid { grid-template-columns: 1fr; gap: 28px; }
  .projects-hi-img { aspect-ratio: 4 / 3; }
  .projects-hi { padding-top: 56px; padding-bottom: 56px; }
  .projects-hi-title { font-size: 1.375rem; }
  .projects-hi-sub { font-size: .875rem; }
  .projects-hi-cta { margin-top: 36px; }
}



/* Projects index hero */
.proj-hero {
  background: var(--ink);
  color: #fff;
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.proj-hero > .container,
.proj-grid-section > .container { max-width: 1280px; }
.proj-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
.proj-hero-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(clamp(40px, 4.5vw, 64px) * var(--a11y-font-scale, 1));
  line-height: 1.2;
  letter-spacing: -0.035em;
  margin: 0;
  color: #fff;
}
.proj-hero-sub {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: #d6e4eb;
  max-width: 48ch;
}

/* Index grid of project cards */
.proj-grid-section {
  background: var(--paper);
  padding: 48px 0 80px;
}
.proj-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 32px;
}
.proj-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.proj-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 8 / 5;
  background: var(--bone-deep);
  margin-bottom: 22px;
}
.proj-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter 600ms ease;
}
.proj-card:hover .proj-card-img img { transform: scale(1.04); }
.proj-card-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proj-card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 12px;
}
.proj-card-eyebrow .sep {
  width: 3px; height: 3px; background: var(--ink-mute); border-radius: 50%;
}
.proj-card-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(clamp(22px, 2vw, 30px) * var(--a11y-font-scale, 1));
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 4px;
}
.proj-card-sub {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.proj-card-cta {
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  align-self: flex-start;
  transition: gap 240ms ease, border-color 240ms ease;
}
.proj-card:hover .proj-card-cta { gap: 14px; border-color: var(--ink); }

/* ============================================================
   PROJECT DETAIL — single project page
   ============================================================ */

.pdetail-hero {
  position: relative;
  width: 100%;
  height: 55vh;
  min-height: 360px;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.pdetail-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pdetail-hero-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  /* One continuous veil: the photo stays sharp with no panel edge. */
  background:
    linear-gradient(0deg, rgba(11,20,24,.76) 0%, rgba(11,20,24,.46) 40%, rgba(11,20,24,.12) 66%, transparent 82%),
    linear-gradient(270deg, rgba(11,20,24,.3) 0%, transparent 72%);
}
.pdetail-hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 48px;
}
.pdetail-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: var(--text-halo), 0 1px 4px rgba(0,0,0,0.45);
  margin-bottom: 14px;
}
.pdetail-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: calc(clamp(38px, 4.4vw, 68px) * var(--a11y-font-scale, 1));
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 12px;
  max-width: 22ch;
  color: #fff;
  text-shadow:
    var(--text-halo),
    0 2px 10px rgba(0,0,0,0.35);
}
.pdetail-sub {
  font-size: calc(clamp(18px, 1.4vw, 21px) * var(--a11y-font-scale, 1));
  line-height: 1.55;
  color: #fff;
  text-shadow: var(--text-halo), 0 1px 4px rgba(0,0,0,0.4);
  margin: 0;
  max-width: 50ch;
}

.pdetail-meta {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.pdetail-meta-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 28px 0;
}
.pdetail-meta .meta-item .l {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.pdetail-meta .meta-item .t {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.pdetail-intro { background: var(--paper); padding: 80px 0 60px; }
.pdetail-prose {
  max-width: 64ch;
  margin: 0 auto;
  font-size: calc(clamp(20px, 1.6vw, 26px) * var(--a11y-font-scale, 1));
  line-height: 1.7;
  color: var(--ink-soft);
  text-align: center;
}

.pdetail-gallery { padding-top: 60px; padding-bottom: 100px; }

/* Components-used chip strip */
.pdetail-components { padding: 80px 0 100px; }
.pdetail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.pdetail-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  transition: gap 240ms ease, border-color 240ms ease, background 240ms ease;
}
.pdetail-chip:hover {
  gap: 18px;
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

/* Next project tease */
.pdetail-next {
  position: relative;
  height: 42vh;
  min-height: 295px;
  overflow: hidden;
}
.pdetail-next-link {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
}
.pdetail-next-link img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.pdetail-next-link:hover img { transform: scale(1.05); }
.pdetail-next-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,20,24,0.5) 0%, rgba(11,20,24,0.5) 35%, rgba(11,20,24,0.62) 65%, rgba(11,20,24,0.88) 100%);
}
.pdetail-next-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 var(--gutter) 60px;
  text-align: center;
}
.pdetail-next-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: var(--text-halo), 0 1px 4px rgba(0,0,0,0.45);
  margin-bottom: 14px;
}
.pdetail-next-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(clamp(28px, 3.4vw, 48px) * var(--a11y-font-scale, 1));
  letter-spacing: -0.025em;
  margin-bottom: 16px;
  text-shadow:
    var(--text-halo),
    0 2px 10px rgba(0,0,0,0.35);
}
.pdetail-next-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 28px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  background: transparent;
  text-shadow: var(--text-halo);
  transition: gap 240ms ease, background 240ms ease, border-color 240ms ease;
}
.pdetail-next-link:hover .pdetail-next-cta {
  gap: 14px;
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

@media (max-width: 880px) {
  .pdetail-hero { height: 50vh; min-height: 320px; }
  .pdetail-hero-content { padding-bottom: 32px; }
  .pdetail-title { font-size: calc(clamp(28px, 8vw, 44px) * var(--a11y-font-scale, 1)); margin-bottom: 10px; }
  .pdetail-meta-row { grid-template-columns: repeat(2, 1fr); gap: 18px 20px; padding: 20px 0; }
  .pdetail-intro { padding: 44px 0 28px; }
  .pdetail-components { padding: 44px 0 56px; }
  .pdetail-next { height: 35vh; min-height: 250px; }
}


/* ============================================================
   Accessibility menu (DIY) + a11y preference hooks.
   Mounted by src/accessibility-menu.jsx. Wired on every page.
   ============================================================ */

/* User-controlled root prefs. Text size: the menu sets --a11y-font-scale on <html> (1 to 1.5). Every font size on
   the site is rem or calc(... * var(--a11y-font-scale, 1)), so all the text follows it; spacing stays as it is. */
html { font-size: calc(16px * var(--a11y-font-scale, 1)); }

/* !important: Home's Tweaks write --navy/--bone inline on <html> (app.jsx); an !important declaration beats them,
   so the mode reaches Home too. The dark contrast accent carries white text (--on-accent, 6.17:1). */
html[data-a11y-contrast] {
  --ink: #000000 !important;
  --ink-soft: #111111 !important;
  --ink-mute: #222222 !important;
  --paper: #ffffff !important;
  --bone: #ffffff !important;
  --bone-deep: #f0f0f0 !important;
  --line: #000000 !important;
  --line-soft: #444444 !important;
  --navy: #006c75 !important;
  --navy-ink: #004a52 !important;
  --on-accent: #ffffff !important;
}
html[data-a11y-contrast] img,
html[data-a11y-contrast] video { filter: contrast(1.15) saturate(1.1); }
/* On dark sections and over photos the dark contrast accent would fall below the normal-mode turquoise: white. */
html[data-a11y-contrast] .lead .italic-serif,
html[data-a11y-contrast] .projects-hi .italic-serif,
html[data-a11y-contrast] .pdetail-next .italic-serif,
html[data-a11y-contrast] .phero .italic-serif,
html[data-a11y-contrast] .hero-title em,
html[data-a11y-contrast] .pchoice-models legend > span,
html[data-a11y-contrast] .pchoice-step > span,
html[data-a11y-contrast] .bento-card:hover .bento-cta { color: #fff !important; }

html[data-a11y-links] a:not(.btn):not(.bento-card):not(.cgal-tile):not(.projects-hi-card):not(.a11y-statement-link) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* Readable font: one plain sans for all the text, no italics (the icons are SVG). */
html[data-a11y-font] body,
html[data-a11y-font] body * { font-family: Arial, "Heebo", sans-serif !important; font-style: normal !important; }

/* Text spacing at the WCAG 1.4.12 values. */
html[data-a11y-spacing] body * {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
html[data-a11y-spacing] body p { margin-bottom: 2em !important; }

/* Big cursor (pointer devices only; the toggle is hidden on touch screens). Text fields keep the text cursor. */
html[data-a11y-cursor],
html[data-a11y-cursor] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3 L6 33 L13.5 26 L18.5 37.5 L24 35 L19 23.5 L29.5 23.5 Z' fill='black' stroke='white' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; }
html[data-a11y-cursor] :is(a[href], button, [role="button"], summary, label, select,
  input[type="checkbox"], input[type="radio"], input[type="submit"]) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M15 4.5c-1.9 0-3.3 1.5-3.3 3.3v15.6l-2.2-2.3c-1.3-1.3-3.4-1.3-4.7 0s-1.3 3.4 0 4.7l8 8.2c1.7 1.7 4 2.7 6.4 2.7h6.3c4.6 0 8.3-3.7 8.3-8.3v-9.8c0-1.8-1.5-3.3-3.3-3.3s-3.3 1.5-3.3 3.3v-1.6c0-1.8-1.5-3.3-3.3-3.3s-3.3 1.5-3.3 3.3v-1.4c0-1.8-1.5-3.3-3.3-3.3-.4 0-.8.1-1.2.2V7.8c0-1.8-1.4-3.3-3.3-3.3z' fill='black' stroke='white' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 15 4, pointer !important;
}
html[data-a11y-cursor] :is(textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"])) { cursor: text !important; }

/* Bigger text, text spacing or the readable font: the few fixed boxes grow instead of clipping, and the form rows
   stack until the screen has room for two enlarged fields (no sideways scroll). */
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) body { overflow-wrap: anywhere; } /* long words, emails and links wrap instead of pushing the page sideways */
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) :is(.bento-tag, .phero) { max-height: none; }
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) :is(.form-row, .gal-card .gtag, .footer-contact-actions a) > * { min-width: 0; }
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .gal-card .gtag { flex-wrap: wrap; }
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .btn { height: auto; min-height: 48px; padding-block: 10px; white-space: normal; text-align: center; justify-content: center; }
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .pchoice-packshot-inner { min-width: 0; }
/* Photo with a tag on top and a caption at the bottom: both stay in the flow, so the photo grows to hold them. */
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .pspec-detail-photo { display: flex; flex-direction: column; justify-content: space-between; }
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .pspec-photo-tag { position: relative; inset: auto; align-self: flex-start; margin: 24px 24px 0; }
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .pspec-detail-photo figcaption { position: relative; }
/* "Next project": the photo grows with its text instead of cutting the top off. */
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .pdetail-next { height: auto; }
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .pdetail-next-link { height: auto; min-height: inherit; display: flex; flex-direction: column; justify-content: flex-end; }
html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .pdetail-next-text { position: relative; inset: auto; padding-top: 72px; }
@media (max-width: 1279px) {
  html[data-a11y-text] .form-row { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the 4:3 frames (colour card, spec photo) keep their size as a minimum and grow with their text. */
@media (max-width: 960px) {
  html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .pchoice-main:has(> .pchoice-packshot) { aspect-ratio: auto; min-height: 70vw; display: flex; flex-direction: column; }
  html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .pchoice-main > .pchoice-packshot { flex: 1 0 auto; height: auto; }
}
@media (max-width: 760px) {
  html:is([data-a11y-text], [data-a11y-spacing], [data-a11y-font]) .pspec-detail-photo { aspect-ratio: auto; min-height: 70vw; }
}

html[data-a11y-motion] *,
html[data-a11y-motion] *::before,
html[data-a11y-motion] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Floating action button (FAB) — bottom-start in RTL = bottom-right visually */
.a11y-fab {
  position: fixed;
  bottom: 22px;
  inset-inline-start: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  border: 0;
  cursor: pointer;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px -4px rgba(14, 26, 34, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.25);
  transition: transform 200ms ease, background 200ms ease;
}
.a11y-fab:hover { transform: translateY(-2px); background: var(--navy-ink); }
.a11y-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px #fff; }

/* Panel. Every placement below (the corner, above "דברו איתנו", above the cookie banner, phones) sets only
   --a11y-panel-bottom; the height follows it, so the panel always fits between that offset and the top of the
   screen and scrolls inside itself when it cannot (short screens, zoom: WCAG 1.4.10, 2.4.11). It stacks over the
   promo banner (9000) and under open dialogs (10050). */
.a11y-panel {
  --a11y-panel-bottom: 86px;
  position: fixed;
  bottom: var(--a11y-panel-bottom);
  inset-inline-start: 22px;
  width: 300px;
  max-height: calc(100vh - var(--a11y-panel-bottom) - 12px);
  max-height: calc(100dvh - var(--a11y-panel-bottom) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  border: 1px solid var(--line);
  z-index: 9500;
  padding: 18px 18px 14px;
  box-shadow: 0 24px 56px -20px rgba(14, 26, 34, 0.35), 0 4px 12px -4px rgba(0, 0, 0, 0.2);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.a11y-panel > * { flex-shrink: 0; }
.a11y-panel[hidden] { display: none; }

.a11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.a11y-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.a11y-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-mute);
  padding: 0 6px;
}
.a11y-close:hover { color: var(--ink); }

/* Text size row. The panel keeps px sizes, so it does not grow under the pointer while A+ is pressed. */
.a11y-size { display: flex; flex-direction: column; gap: 8px; }
.a11y-size-head { display: flex; align-items: baseline; justify-content: space-between; }
.a11y-size-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.a11y-size-value { font-family: var(--font-mono); font-size: 14px; color: var(--ink); direction: ltr; unicode-bidi: isolate; }
.a11y-size-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-size-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  background: var(--bone);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.a11y-size-btn:hover { background: var(--bone-deep); }
.a11y-size-btn[aria-disabled="true"] { background: transparent; color: var(--ink-mute); cursor: default; }
.a11y-size-sym { font-family: var(--font-head); font-size: 17px; font-weight: 800; line-height: 1; }
@media (hover: none) and (pointer: coarse) { .a11y-toggle[data-act="cursor"] { display: none; } }

/* The browser's own zoom enlarges the whole page; the hint says how. */
.a11y-hint {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute);
}
/* Polite announcements of menu changes: read by screen readers, not shown. */
.a11y-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bone);
  border: 1px solid var(--line);
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink);
  text-align: start;
}
.a11y-toggle:hover { background: var(--bone-deep); }
.a11y-toggle.on { background: var(--navy); border-color: var(--navy); color: var(--on-accent, #052a2d); }
.a11y-toggle-label { font-size: 14px; font-weight: 500; }
.a11y-toggle-state {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.a11y-reset {
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0;
  margin-top: 2px;
}
.a11y-reset:hover { color: var(--ink); }

.a11y-statement-link {
  display: block;
  font-size: 14px;
  color: var(--ink-mute);
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  margin-top: 2px;
}
.a11y-statement-link:hover { color: var(--ink); }

/* F29: from 769px the "דברו איתנו" button (.fab) shares the bottom-right corner; the trigger and its panel sit above it. */
@media (min-width: 769px) {
  body:has(.fab) .a11y-fab { bottom: 90px; }
  body:has(.fab) .a11y-panel { --a11y-panel-bottom: 154px; }
}
/* While the cookie banner shows, only the accessibility trigger and its panel sit above it. The other corner
   controls stay where they are, under the banner: the "דברו איתנו" button and the mobile CTA bar are part of #root,
   which golive prerenders and React adopts as is, and any move would also be a layout shift for every new visitor;
   "my list" stays put as well, so it never hides a focused control just above the banner. The controls the banner
   covers leave the keyboard order until it closes (WCAG 2.4.11; consent.jsx, ui.jsx useBannerCover). consent.jsx
   sets data-consent-open on <body>; accessibility-menu.jsx gives the trigger and the panel --consent-h (the
   banner's height). */
body[data-consent-open] .a11y-fab { bottom: calc(var(--consent-h, 0px) + 22px); }
body[data-consent-open] .a11y-panel { --a11y-panel-bottom: calc(var(--consent-h, 0px) + 86px); }
@media (max-width: 760px) {
  body[data-consent-open] .a11y-fab { bottom: calc(var(--consent-h, 0px) + 12px); }
  body[data-consent-open] .a11y-panel { --a11y-panel-bottom: calc(var(--consent-h, 0px) + 76px); }
}
/* Phones: the corner controls rest near the bottom edge and rise above the mobile CTA bar only while it shows
   (mobile-cta-bar.jsx shows it past 60% of a screen and hides it next to the lead form). A fixed lift for a bar that
   is mostly hidden left "הרשימה שלי" and this trigger floating 74-86 px up at the top of every page. The bar is
   8 + 44 + 8 px and a 1 px border; the lift adds 12 px above it. While the cookie banner shows, the rules above win. */
@media (max-width: 760px) {
  :root { --mcta-lift: calc(73px + env(safe-area-inset-bottom, 0px)); }
  .a11y-fab { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .a11y-panel { --a11y-panel-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 16px; width: calc(100vw - 32px); max-width: 360px; }
  body:not([data-consent-open]):has(.mcta-bar.visible) .a11y-fab { bottom: var(--mcta-lift); }
  body:not([data-consent-open]):has(.mcta-bar.visible) .a11y-panel { --a11y-panel-bottom: calc(var(--mcta-lift) + 66px); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .a11y-fab { transition: transform 200ms ease, background 200ms ease, bottom 200ms ease; }
}


/* ============================================================
   SectionHowWeWork — five-step horizontal process timeline.
   Horizontal track on desktop with connector lines; vertical
   stack with side-line on mobile. RTL-native (reads R→L).
   ============================================================ */
.how-we-work { padding-top: 96px; padding-bottom: 96px; }

.hww-track {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
}
.hww-track::before {
  content: "";
  position: absolute;
  top: 26px;
  inset-inline-start: 5%;
  inset-inline-end: 5%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.hww-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.2,0.6,0.2,1), transform 600ms cubic-bezier(0.2,0.6,0.2,1);
  transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.revealed .hww-step,
.how-we-work .hww-step { opacity: 1; transform: none; }
.reveal-stage .hww-step { opacity: 0; transform: translateY(16px); }
.reveal-stage.revealed .hww-step { opacity: 1; transform: none; }

.hww-marker {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: border-color 240ms ease, background 240ms ease;
}
.hww-step:hover .hww-marker {
  border-color: var(--navy);
  background: var(--navy);
}
.hww-num {
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  transition: color 240ms ease;
}
.hww-step:hover .hww-num { color: var(--paper); }

.hww-body { display: flex; flex-direction: column; gap: 8px; max-width: 220px; }
.hww-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.hww-desc {
  font-size: .90625rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.hww-duration {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--navy-ink);
  margin-top: 6px;
}

@media (max-width: 960px) {
  .hww-track {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 40px;
  }
  .hww-track::before {
    top: 26px;
    bottom: 26px;
    height: auto;
    width: 1px;
    inset-inline-start: 26px;
    inset-inline-end: auto;
  }
  .hww-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: start;
    gap: 24px;
    padding: 18px 0;
  }
  .hww-marker {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .hww-body { max-width: none; flex: 1; }
}


/* --- other products (cross-sell strip at the bottom of every product page) ---
   This component shipped without any CSS: `.pother-grid` fell back to block
   layout, so each card rendered its image at full container width and intrinsic
   height — the portrait gates card (893×1600) alone was ~1600px tall and the
   whole section ran to ~3900px. Styled here to match the `.chi-card` language
   used elsewhere on the site (same radius/shadow/hover/aspect conventions). */
.pother-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  margin-top: 56px;
}
.pother-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pother-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.pother-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bone-deep);
  overflow: hidden;
}
.pother-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.pother-card:hover .pother-img img { transform: scale(1.04); }
.pother-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
}
.pother-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pother-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.pother-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy-ink);
}
.pother-link svg { transition: transform var(--dur-2) var(--ease); }
.pother-card:hover .pother-link svg { transform: translateX(-4px); }

@media (max-width: 1024px) {
  .pother-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; margin-top: 40px; }
}
@media (max-width: 560px) {
  .pother-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .pother-name { font-size: 1.125rem; }
}

/* ── Primitives that were referenced in JSX but never had rules ──────────────
   .phone-pill-lg is the highest-intent CTA in the funnel and was rendering at
   the same size as an ordinary pill. .arr-l / .arr-r are the paired scroller
   arrows and were unstyled entirely. */
.phone-pill-lg {
  font-size: calc(clamp(19px, 1.7vw, 24px) * var(--a11y-font-scale, 1));
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 16px 30px;
  gap: 12px;
  min-height: 56px;
  border-radius: var(--radius-pill);
}
.phone-pill-lg svg { width: 20px; height: 20px; }

.arr-l,
.arr-r {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.arr-l:hover,
.arr-r:hover { border-color: var(--navy); background: var(--turq-soft); }
.arr-l:disabled,
.arr-r:disabled { opacity: 0.38; cursor: not-allowed; }

/* Readable supporting copy, including the smaller responsive variants above. */
.eyebrow,
.hero-kicker,
.hero-meta,
.stat .l,
.field label,
.footer h4,
.footer-meta,
.testi .meta,
.rating-badge .label,
.projects-hi-eyebrow,
.proj-card-eyebrow,
.pdetail-next-eyebrow,
.cgal-count,
.cgal-tile figcaption .m,
.chi-card__meta,
.pother-meta,
.hww-duration,
.about-cert .l {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: .015em;
  line-height: 1.5;
}
.field label { color: rgba(251,250,246,.85); }
.form .sub, .stat .l { color: rgba(251,250,246,.8); }
.field input::placeholder { color: rgba(251,250,246,.65); }
.hww-desc, .about-stat-sub, .projects-hi-sub { font-size: 1rem; }
.proj-card-eyebrow { gap: 8px; }
.bento-chip { background: linear-gradient(180deg, rgba(14,26,34,.35), rgba(14,26,34,.6)); }
.bento-num, .chi-card__num, .pts-chip { background: linear-gradient(180deg, rgba(14,26,34,.52), rgba(14,26,34,.76)); }
.pts-chip.on { background: var(--navy-ink); }

/* ── Interest list — floating collector + drawer ───────────────────────────
   The FAB sits bottom-right like .fab but on the opposite side (bottom-left
   in LTR terms; inset-inline-start in RTL = visually left), so the two never
   collide. On phones it lifts above the sticky mobile CTA bar. */
.ilist-fab {
  position: fixed;
  inset-inline-end: 28px;
  bottom: 28px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.ilist-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ilist-fab.has-items { background: var(--navy); color: var(--on-accent, #0b1418); }
.ilist-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: .71875rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  .ilist-fab { inset-inline-end: 16px; padding: 10px 14px; }
}
@media (max-width: 760px) {
  .ilist-fab { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  body:not([data-consent-open]):has(.mcta-bar.visible) .ilist-fab { bottom: var(--mcta-lift); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .ilist-fab { transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), bottom 200ms ease; }
}

.ilist-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14, 26, 34, 0.45);
}
.ilist-drawer {
  position: absolute; top: 0; bottom: 0; inset-inline-start: 0;
  width: min(420px, 92vw);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  padding: 26px 24px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.ilist-head { display: flex; align-items: center; justify-content: space-between; }
.ilist-head h3 { margin: 0; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; }
.ilist-close {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink); cursor: pointer;
}
.ilist-empty { color: var(--ink-soft); font-size: .9375rem; line-height: 1.6; margin: 0; }
.ilist-count {
  margin-inline-start: 10px;
  font-family: var(--font-mono); font-size: .71875rem; font-weight: 500;
  color: var(--ink-mute); letter-spacing: 0.06em;
  background: var(--bone); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 3px 9px;
  vertical-align: 3px;
}
.ilist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ilist-items li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}
.ilist-items .thumb {
  flex: 0 0 auto; width: 54px; height: 54px;
  border-radius: var(--radius-sm); object-fit: cover; display: block;
  border: 1px solid var(--line);
  background: var(--bone-deep);
}
.ilist-items .thumb-ph {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-mute);
}
.ilist-items .txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ilist-items .txt .p { font-family: var(--font-head); font-weight: 700; font-size: .90625rem; color: var(--ink); line-height: 1.3; }
.ilist-items .txt .m { font-size: .8125rem; color: var(--ink-soft); line-height: 1.4; overflow-wrap: anywhere; }
.ilist-items .rm {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink-mute); cursor: pointer;
}
.ilist-items .rm:hover { color: var(--danger); border-color: var(--danger); }
.ilist-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ilist-form-label {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); margin: 6px 0 2px;
}
.ilist-note { color: var(--ink-mute); font-size: .8125rem; line-height: 1.5; text-align: center; }
.ilist-form input {
  padding: 13px 14px; font-family: var(--font-body); font-size: .9375rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bone); color: var(--ink);
  /* type=tel defaults to LTR in WebKit — keep all three fields aligned like
     the page. plaintext lets typed digits/latin emails render naturally. */
  direction: rtl; text-align: right; unicode-bidi: plaintext;
}
.ilist-form input:focus { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px #fff; }
.ilist-send { justify-content: center; }
.ilist-err { color: var(--danger); font-size: .84375rem; }
.ilist-done .t { margin: 0; font-size: 1.125rem; font-weight: 700; }
.ilist-done .m { margin: 6px 0 0; color: var(--ink-soft); font-size: .90625rem; line-height: 1.6; }

/* "add to list" button inside the selectors. Solid green so it reads as the
   action (client request 18.10); clicking flips it to the transparent state
   while the "נוסף ✓" confirmation shows. #15803d = --success darkened so the
   white label passes AA contrast. Content-width, never a full-column bar. */
.ilist-add {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  width: fit-content;
  padding: 11px 20px;
  background: #15803d; border: 1px solid #15803d; border-radius: var(--radius-pill);
  color: #fff; font-family: var(--font-head); font-size: .875rem; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ilist-add:hover { background: var(--success); border-color: var(--success); }
.ilist-add.added { background: transparent; border-color: var(--success); color: var(--success); }

/* Inside the dark .lead sections only the transparent "added" state needs a
   brighter green to stay legible. */
.lead .ilist-add.added { border-color: #7ad48e; color: #7ad48e; }

/* Bento small cards: .bento-bot is bottom-anchored, so when one card's chips
   wrap to two rows (pergolas, zip) its TITLE floated 41px higher than its
   neighbours'. Reserve a two-row chip area on every small card so the four
   titles sit on one line. 77px = two 36px chip rows + the 5px gap, measured;
   scoped off mobile, where cards are full-width and single-row. */
@media (min-width: 641px) {
  .bento-card:not(.is-feature) .bento-chips { min-height: 77px; align-content: flex-start; }
}

/* Interest strip — the add-to-list entry point for categories that have no
   colour selector (zip, enclosures). */
.ilist-strip { background: var(--bone); padding-block: 40px; }
.ilist-strip-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.ilist-strip-copy { margin: 0; font-size: 1rem; color: var(--ink-soft); max-width: 56ch; line-height: 1.6; }
@media (max-width: 640px) {
  .ilist-strip-row { flex-direction: column; align-items: flex-start; }
}

/* === a11y-ui: dialogs, gallery tile buttons, drawer labels (accessibility spec v2 §5-7) =================== */

/* Read by screen readers only: gallery tile names, the lightbox "תמונה N מתוך M" announcement. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Open dialogs stack above the cookie banner (9999), the skip link (10000) and the mobile menu (10001): the
   banner is inert while a dialog is open, so it must never cover the dialog's close or submit controls.
   The lightbox drops back only after its fade-out. The quote sheet's rule is at the end of pergolas.css. */
.lb { transition: opacity .3s, z-index 0s linear .3s; }
.lb.open { z-index: 10050; transition: opacity .3s, z-index 0s; }
#interest-root .ilist-overlay { z-index: 10050; }

/* Elements focused from script, not controls (dialog titles, success headings, <main> as the last fallback):
   no ring; the next Tab lands on a control. */
[data-focus-target][tabindex]:focus,
[data-focus-target][tabindex]:focus-visible,
main#main[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* Gallery tiles that open the lightbox: TileOpenButton (ui.jsx) is a transparent button over the whole tile, for the
   keyboard. The pointer goes through it to the photo: a right click or a long press still offers the image's own
   menu, and the click still reaches the tile's handler (the tiles have their own pointer cursor). */
.cgal-tile { position: relative; }
.tile-open {
  position: absolute; inset: 0; z-index: 3;
  margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: transparent; color: inherit; font: inherit;
  cursor: pointer;
  pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
/* The tiles clip anything drawn outside them, so the two-tone ring sits inside the edge. */
button.tile-open:focus-visible {
  outline: 3px solid var(--ink); outline-offset: -6px;
  box-shadow: inset 0 0 0 3px #fff;
  border-radius: inherit;
}
/* Keyboard focus shows what hover shows. */
.gal-card:has(> .tile-open:focus-visible) .gtag,
.gal-tile:has(> .tile-open:focus-visible) .gtag { opacity: 1; transform: translateY(0); }
.gal-card:has(> .tile-open:focus-visible)::after,
.gal-tile:has(> .tile-open:focus-visible)::after { opacity: 1; }
.gal-tile:has(> .tile-open:focus-visible) .zoom { opacity: 1; transform: scale(1); }

/* "דלג על הגלריה" before a strip of tiles: hidden until it has focus, then a pill over the strip's top. */
.gal-skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.gal-skip:focus {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff;
  font-family: var(--font-head); font-size: .9375rem; font-weight: 600; white-space: nowrap;
}

/* Choice pills that used to be <span> (Louvers form): as buttons they keep the span's text
   metrics, so they look exactly as before. */
.pill.pill-btn {
  line-height: inherit; letter-spacing: inherit; word-spacing: inherit;
  font-weight: inherit; font-style: inherit;
  text-transform: inherit; text-indent: inherit; text-shadow: inherit; text-rendering: inherit;
}

/* Interest-list drawer: a visible label over each field (F22). */
.ilist-field { display: flex; flex-direction: column; gap: 6px; }
.ilist-field label { font-size: .875rem; font-weight: 600; color: var(--ink-soft); line-height: 1.4; }
/* === end a11y-ui ========================================================================================= */