/*!
 * yuval-graphic — enhancement layer on top of the compiled Tailwind sheet.
 * Linked last, so :root here wins.
 */

/* --- Palette -------------------------------------------------------------
 * --gold is sampled straight from the lion logo (#c08838 — the dominant
 * colour across 149,601 of its pixels) and is never altered.
 *
 * It measures 2.69:1 against the cream page, so it can never be TEXT here.
 * It carries the brand two other ways instead, both of which are compliant:
 *
 *   1. as a FILL with ink text on top   → 6.18:1  (badges, buttons, chips)
 *   2. as DECORATION                    → rules, borders, glows, marks —
 *                                         no contrast requirement applies
 *
 * Rule: never set `color: var(--gold)` on a text node.
 * ---------------------------------------------------------------------- */
:root {
  --gold: #ddac4b;
  --gold-accessible: #ddac4b;
  --price-gold: #ddac4b;

  --ink: #11100d;
  /* A lighter gold makes thin rules recede, so the alphas are raised to hold
     the same visual weight the previous #c08838 rules had (1.51 and 1.22
     against the cream). Do not lower these without re-deriving them. */
  --gold-rule: rgba(221, 172, 75, 0.7);
  --gold-rule-soft: rgba(221, 172, 75, 0.34);
}

/* --- Accessibility widget: dark mode --------------------------------------
 * The widget injects <style id="anid-dark-mode"> which flips the page
 * background to #1a1a2e with `color: #e0e0e0 !important`. That declaration
 * loses to Tailwind's utilities, which resolve their colour from these custom
 * properties — so ink-on-cream text stayed ink on a now-dark page. Measured:
 * nav links at 1.1:1, i.e. invisible. Rebinding the tokens fixes every
 * component at once instead of chasing individual selectors.
 * ------------------------------------------------------------------------- */
html:has(#anid-dark-mode) {
  --background: #1a1a2e;
  --foreground: #ece9e4;
  --card: #24243d;
  --card-foreground: #ece9e4;
  --muted: #2e2e4a;
  --muted-foreground: #bcb7af;
  --primary: #ece9e4;
  --primary-foreground: #1a1a2e;
  --border: rgba(236, 233, 228, 0.22);
  --border-strong: rgba(236, 233, 228, 0.45);

  --color-background: #1a1a2e;
  --color-foreground: #ece9e4;
  --color-card: #24243d;
  --color-card-foreground: #ece9e4;
  --color-muted: #2e2e4a;
  --color-muted-foreground: #bcb7af;
  --color-primary: #ece9e4;
  --color-primary-foreground: #1a1a2e;
}
/* The page's own dotted paper texture is tuned for cream and turns to mud. */
html:has(#anid-dark-mode) body {
  background-image: none;
}
/* Price rows tint with a gold wash that only reads on a light surface. */
html:has(#anid-dark-mode) #services ul li:hover {
  background-color: rgba(221, 172, 75, 0.14);
}
/* The widget forces `background-color: transparent !important` on everything but
   does NOT touch background-image — so the gold gradient survives while the text
   on top is forced to #e0e0e0. Light on gold measured 2.08:1. The numerals must
   stay ink, hence !important to outrank the widget. */
html:has(#anid-dark-mode) .gold-fill,
html:has(#anid-dark-mode) .gold-chip,
html:has(#anid-dark-mode) .filter-chip[aria-pressed="true"] {
  color: var(--ink) !important;
}
/* The outlined CTA keeps ink text and an ink border, which vanish on a dark
   page (1.12:1). Flip both. */
html:has(#anid-dark-mode) .btn-outline {
  color: #ece9e4 !important;
  border-color: #ece9e4 !important;
}
html:has(#anid-dark-mode) .btn-outline:hover,
html:has(#anid-dark-mode) .btn-outline:focus-visible {
  color: var(--ink) !important;
  border-color: #c39440 !important;
}

/* =========================================================================
   1. Gold as a fill — the main way the lion's colour shows up
   ========================================================================= */
/* Real gold is never flat — it has a sheen. The gradient runs light → base →
   deep so the fill reads as metal rather than a swatch. Every stop was checked
   against the ink text sitting on it; the darkest (#c39440) still gives 6.91:1,
   well clear of the 4.5:1 floor. Keep that true if you retune the stops. */
.gold-fill {
  background-color: var(--gold);
  background-image: linear-gradient(135deg, #e9c06a 0%, var(--gold) 45%, #c39440 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: var(--ink);
  transition: background-position 0.5s ease;
}
.gold-fill:hover,
.gold-fill:focus-visible {
  /* Slides the highlight across the surface instead of just darkening it. */
  background-position: 100% 50%;
}

/* Secondary CTA: outlined at rest, gold on hover. The label flips to ink rather
   than cream, because cream on gold measures 1.82:1. */
.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--gold);
  background-image: linear-gradient(135deg, #e9c06a 0%, var(--gold) 45%, #c39440 100%);
  border-color: #c39440;
  color: var(--ink);
}


/* =========================================================================
   The type scale
   The page used to carry 20 different arbitrary size combinations — nine
   distinct paragraph sizes alone (11, 12, 13, 14, 15, 16, 17, 18, 19, 21, 22,
   24) and three different section headings. That is what made it read as
   assembled rather than designed: an eye registers "someone kept adding" rather
   than "someone decided". Eight steps replace all of it, on a ~1.26 ratio.
   Every step is fluid, so there is one value per role instead of a mobile and a
   desktop value that drift apart. Sizes never fall below 16px for body copy —
   the site's own mobile floor.
   ========================================================================= */
:root {
  --fs-micro:   13px;
  --fs-small:   14px;
  --fs-body:    clamp(16px, 0.95rem + 0.15vw, 17px);
  --fs-lead:    clamp(17px, 0.95rem + 0.5vw, 21px);
  --fs-title:   clamp(20px, 1.05rem + 0.9vw, 26px);
  --fs-display: clamp(30px, 1.3rem + 3vw, 46px);
  --fs-section: clamp(38px, 1.6rem + 4.4vw, 66px);
  --fs-hero:    clamp(44px, 1.7rem + 5.4vw, 88px);
}
.t-micro   { font-size: var(--fs-micro); }
.t-small   { font-size: var(--fs-small); }
.t-body    { font-size: var(--fs-body); }
.t-lead    { font-size: var(--fs-lead); }
.t-title   { font-size: var(--fs-title); }
.t-display { font-size: var(--fs-display); }
.t-section { font-size: var(--fs-section); }
.t-hero    { font-size: var(--fs-hero); }

/* Line length. Measured at 145 characters on a wide screen, roughly double the
   65–75 that is comfortable — the single fastest way to look amateurish.
   Applied to running copy only; headings and single-line labels are exempt. */
p.t-body,
p.t-lead,
.legal-prose p,
.legal-prose li {
  max-inline-size: 70ch;
}
/* …but not where a paragraph is already the width of its own column. */
.lb-note, .svc-list li, .pf-cta__text { max-inline-size: none; }

/* =========================================================================
   Reaching the contact from anywhere
   Measured on a phone: the first call to action sat at screen 0.5 and the next
   at screen 9.7 — nine screens of portfolio with no way to make contact, because
   the header button was `hidden lg:block` and the mobile header held only a
   logo and a hamburger. Two fixes: the header button now shows at every width,
   and the portfolio closes with its own prompt.
   ========================================================================= */
.hdr-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-small);
  white-space: nowrap;
  min-block-size: 40px;
  padding-inline: 0.9rem;
}
@media (pointer: coarse) { .hdr-cta a { min-block-size: 44px; } }
@media (min-width: 768px) {
  .hdr-cta a { font-size: var(--fs-body); min-block-size: 44px; padding-inline: 1.25rem; }
}

.pf-cta {
  margin-block-start: 3.5rem;
  padding-block: 1.75rem;
  border-block-start: 1px solid var(--gold-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.pf-cta__text {
  font-size: var(--fs-lead);
  line-height: 1.7;
  max-inline-size: 34rem;
}

/* =========================================================================
   Areas of work
   Replaced the numbered rate-card rows. Yuval wanted the areas grouped rather
   than itemised one per line, and without the 01/02/03 numerals — those read as
   a price list, which is exactly what this section stopped being.
   Everything here is hand-written: the compiled Tailwind sheet only carries the
   utilities the original build happened to use, and a grid class that is absent
   fails silently with the markup still looking correct.
   ========================================================================= */
.svc-grid {
  display: grid;
  gap: 1px;                       /* the gap itself draws the rules */
  background-color: var(--gold-rule-soft);
  border: 1px solid var(--gold-rule-soft);
}
@media (min-width: 768px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  /* the last card closes the section across the full width, so no lonely
     half-row is left at the end */
  .svc-card--wide { grid-column: 1 / -1; }
}
.svc-card {
  background-color: var(--card);
  padding: 1.75rem 1.5rem;
}
@media (min-width: 768px) { .svc-card { padding: 2.25rem 2rem; } }
/* The area icons — technical line illustrations, dark ink with gold accents.
   They are drawn as a CSS background on an empty <span>, not as an <img>.
   Yuval spotted the reason: an <img> is content, so a right-click offers
   "save image as…" and the icon behaves like something to be taken rather than
   part of the interface. A background is decoration, which is what these are —
   they already carry aria-hidden because the heading underneath says the same
   thing in words. (This hides the browser's image menu; it does not and cannot
   stop anyone downloading the file. Nothing on the web can.)
   Two things were fixed on the way in, both measured:
   - **Size.** At 44px, where the first set lived, these turn to mush — the grid
     lines vanish and the gold accent is one pixel. 76/92 is Yuval's number:
     5% over the 72/88 that first made them legible.
   - **Colour.** Their gold arrived at #B8850C–#CE8F02, dull and olive next to
     the token. Repainted to #DDAC4B. Third external set in a row that needed
     this — always check the gold.
   The shipped set has real transparency (0–7 fringe pixels out of 1.57M), so
   nothing is baked and the icons sit on whatever colour the card happens to be.
   `background-image` survives the accessibility widget's high-contrast mode,
   which only forces `background-color`. */
.svc-card__icon {
  display: block;
  inline-size: 76px;
  block-size: 76px;
  margin-block-end: 1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media (min-width: 768px) { .svc-card__icon { inline-size: 92px; block-size: 92px; } }
.svc-card__icon--branding { background-image: url("/assets/svc-branding-3.webp"); }
.svc-card__icon--social   { background-image: url("/assets/svc-social-3.webp"); }
.svc-card__icon--video    { background-image: url("/assets/svc-video-3.webp"); }
.svc-card__icon--print    { background-image: url("/assets/svc-print-3.webp"); }
.svc-card__icon--digital  { background-image: url("/assets/svc-digital-3.webp"); }

.svc-card__title {
  font-size: var(--fs-title);
  font-weight: 800;
  line-height: 1.25;
}
.svc-card__lead,
.svc-list {
  margin-block-start: 1rem;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--muted-foreground);
}
.svc-list li {
  position: relative;
  padding-inline-start: 1.1rem;
  margin-block-start: 0.55rem;
}
.svc-list li:first-child { margin-block-start: 0; }
/* One factual line, for the single offering that carries a commitment. */
.svc-card__note {
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--gold-rule-soft);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--muted-foreground);
}
/* A gold dash, not a bullet — the same decorative use of gold as the rules.
   Gold is never text here; it measures 1.82:1 on cream. */
.svc-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  inline-size: 0.6rem;
  block-size: 2px;
  background-color: var(--gold);
}

/* The grid deliberately has NO uniform frame.
   A 4:5 frame was built to align the rows — first cropping to fill, then matting
   with `contain`. Yuval rejected both: cropping hides part of the work, and
   matting shrinks it. Each card sizes to its own artwork, and the rows are
   ragged by choice. Do not "fix" the raggedness; it was measured, seen and kept.
   ========================================================================= */

/* =========================================================================
   The lightbox spec panel
   Clicking a portfolio card opens the artwork beside a short read on it: what
   the piece does, the palette sampled from the artwork itself, and the format.
   This is markup rather than a baked image on purpose — a flat image cannot
   reflow for a phone, and the Hebrew here has to be real selectable text that a
   screen reader can announce.
   It sits on the dialog's dark scrim, so every colour here is a token: under the
   accessibility widget's dark mode `--primary-foreground` flips with the scrim
   and the panel stays readable without a second rule.
   ========================================================================= */
.lb-body {
  flex: 1;
  min-block-size: 0;
  display: flex;
  gap: 1.5rem;
  padding-block: 1rem;
}
.lb-stage {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  user-select: none;
}
.lb-spec {
  flex: none;
  inline-size: 20rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  color: var(--primary-foreground);
  /* RTL: inline-start is the right edge — the side facing the artwork. */
  border-inline-start: 1px solid var(--gold-rule);
  padding-inline-start: 1.5rem;
}
/* Each block is a panel on the sheet, divided by a hairline like the printed
   brand sheet this is modelled on. */
.lb-block + .lb-block,
.lb-block + .lb-note {
  border-block-start: 1px solid var(--gold-rule-soft);
  padding-block-start: 1.5rem;
}
.lb-detail {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--gold-rule-soft);
}
.lb-stage { overflow: hidden; }
.lb-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lb-note { font-size: var(--fs-body); line-height: 1.75; }
.lb-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: var(--fs-micro);
  opacity: 0.72;
  margin-block-end: 0.75rem;
}
.lb-swatches { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.lb-swatch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0.25rem;
  margin: -0.25rem;
  color: inherit;
  cursor: pointer;
  border-radius: 3px;
  /* 24px is the WCAG 2.5.8 floor; the padding above is what gets it there
     without moving the swatches apart visually. */
  min-block-size: 24px;
}
.lb-swatch:hover .lb-hex { text-decoration: underline; text-underline-offset: 3px; }
.lb-swatch.is-copied { background: rgba(127, 127, 127, 0.28); }
@media (pointer: coarse) { .lb-swatch { min-block-size: 44px; } }
.lb-chip {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 2px;
  /* An edge, so a near-black chip reads on the scrim and a near-white one does
     too. It is a real border and not an inset shadow on purpose: the widget's
     high-contrast mode sets `box-shadow: none !important` and forces every
     background to white, which would leave the chips invisible — it only
     recolours borders, so a border survives as a visible outline. The hex label
     beside each chip is what actually carries the colour in that mode. */
  border: 1px solid rgba(127, 127, 127, 0.55);
}
.lb-hex { font-size: var(--fs-micro); letter-spacing: 0.04em; }
.lb-meta { font-size: var(--fs-small); letter-spacing: 0.04em; }

/* Phone: the panel drops below the artwork and the pair scrolls together.
   The stage is capped so the panel is never pushed off-screen. */
@media (max-width: 767px) {
  .lb-body {
    flex-direction: column;
    overflow-y: auto;
    gap: 1.25rem;
  }
  .lb-stage { flex: none; max-block-size: 52vh; }
  .lb-spec {
    inline-size: auto;
    overflow: visible;
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--gold-rule);
    padding-block-start: 1.25rem;
    gap: 1.25rem;
  }
  .lb-block + .lb-block,
  .lb-block + .lb-note { padding-block-start: 1.25rem; }
  /* the crop is a supporting note on a phone, not a second hero */
  .lb-detail { max-inline-size: 22rem; }
}

/* The offer card's side panel.
   It was laid out back when it held the price, and three things aged badly once
   a button replaced the number:
   - `border-l` is a *physical* border. The page is RTL, so the panel sits on the
     card's left and that rule landed on the outer edge instead of between the
     columns — measured as a 97px stub floating in the padding.
   - The row was `items-start`, so the panel hugged the top and left ~120px of
     dead space between the button and the copy.
   - `order-1` put it first on a phone, so the card opened with a button for an
     offer the visitor had not read yet.
   Logical properties fix the side without hard-coding direction: in RTL
   `inline-start` resolves to the right, which is the edge facing the copy. */
.offer-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--gold-rule);
}
/* Blockified flex items stretch on their own, but the anchor carries
   `inline-flex` from a utility — state the width so it cannot depend on that. */
.offer-cta > a { inline-size: 100%; }

@media (min-width: 768px) {
  .offer-cta {
    padding-block-start: 0;
    border-block-start: 0;
    padding-inline-start: 2rem;
    border-inline-start: 1px solid var(--gold-rule);
  }
}

/* Small numbered marker: gold square, ink numeral. */
.gold-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2rem;
  min-block-size: 2rem;
  background-color: var(--gold);
  background-image: linear-gradient(135deg, #e9c06a 0%, var(--gold) 45%, #c39440 100%);
  color: var(--ink);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* =========================================================================
   2. Gold as structure — rules, ticks, borders
   ========================================================================= */
.rule-gold {
  border-color: var(--gold-rule) !important;
}
.rule-gold-soft {
  border-color: var(--gold-rule-soft) !important;
}
/* Short gold dash that opens a section label. */
.tick-gold::before {
  content: "";
  display: inline-block;
  inline-size: 1.75rem;
  block-size: 2px;
  background: var(--gold);
  vertical-align: middle;
  margin-inline-end: 0.75rem;
}
/* Gold underline that sits beneath a heading without colouring the text.
   Drawn as a pseudo-element so it can sweep in on scroll (see 2d). */
.underline-gold {
  padding-block-end: 0.6rem;
  display: inline-block;
  position: relative;
}
/* The sweep animates inline-size rather than a transform. Chrome's
   getComputedStyle cannot read `transform` off a pseudo-element, so a scaleX
   version is unverifiable from a script; width reports correctly and this bar
   is 3px tall on five headings, so the layout cost is irrelevant. */
.underline-gold::after {
  content: "";
  position: absolute;
  inset-inline-start: 0; /* RTL: anchored right, grows leftward */
  inset-block-end: 0;
  inline-size: 100%;
  block-size: 3px;
  background: var(--gold);
  transition: inline-size 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* =========================================================================
   2d. Micro-interactions
   Restrained on purpose: nothing moves unless the user points at it, every
   duration is short, and the whole block is disabled under reduced-motion.
   ========================================================================= */

/* 1 · Portfolio cards lift and the artwork breathes. .pf-shot clips the zoom. */
.pf-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pf-card .pf-shot img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pf-card:hover,
.pf-card:focus-visible {
  transform: translateY(-4px);
}
.pf-card:hover .pf-shot img,
.pf-card:focus-visible .pf-shot img {
  transform: scale(1.045);
}

/* 2 · Price rows respond to the pointer and the tag nudges up a touch. */
#services ul li {
  transition: background-color 0.25s ease;
}
#services ul li:hover {
  background-color: rgba(221, 172, 75, 0.07);
}
#services ul li .gold-fill {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-position 0.5s ease;
}
#services ul li:hover .gold-fill {
  transform: scale(1.05);
}

/* 3 · The heading rule sweeps in — but only while its section is still waiting
      to be revealed, so it is simply present when JS or motion is off. */
.js-reveal .reveal:not(.is-in) .underline-gold::after {
  inline-size: 0;
}

/* 4 · Portfolio tiles arrive in sequence instead of all at once. */
.js-reveal .pf-item.reveal {
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* 5 · Buttons acknowledge the press. */
.gold-fill:active,
.btn-outline:active,
.filter-chip:active {
  transform: translateY(1px);
}

/* Latin caps and numerals only — Hebrew has no monospace face and falls back
   to an arbitrary system font, which looks broken. Never put Hebrew in .mono. */
.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
}
/* Hebrew micro-labels: same role as .mono, but stays in Heebo. */
.label-he {
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* =========================================================================
   2c. Utilities the compiled Tailwind sheet never emitted
   That sheet only contains classes the original build happened to use. Every
   selector below appears in the markup but produced NO css, so the browser
   silently used the inherited value — stacked price rows, invisible gold rules,
   16px numerals. Found by diffing the classes in the DOM against the classes
   defined in the loaded stylesheets. Re-run that diff after adding markup.
   ========================================================================= */
/* The catalogue rows were "number | service | price". The price column is gone,
   so they are two tracks now — an empty third track would still get a gap. */
.grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; }
.text-\[11px\] { font-size: 11px; }
.text-\[34px\] { font-size: 34px; }
.border-t-\[3px\] { border-top-width: 3px; }
.border-y-2 { border-block-width: 2px; border-block-style: solid; }
.mt-7 { margin-block-start: 1.75rem; }
.mb-7 { margin-block-end: 1.75rem; }
.mb-5 { margin-block-end: 1.25rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-3 { row-gap: 0.75rem; }
/* The process step numerals. They were 0.3 alpha, which measures 1.99:1 on the
   card — a 1.4.3 fail at 40px/900 (needs 3:1). They are aria-hidden, so a
   "pure decoration" exemption is arguable, but the accessibility statement
   claims AA and this is cheaper than the argument. 0.5 measures 3.5:1. */
.text-foreground\/50 { color: rgba(17, 16, 13, 0.5); }
.hover\:opacity-70:hover { opacity: 0.7; }

/* …and the set the legal pages needed. Without these the statements rendered as
   a wall of text: no gap between paragraphs, section headings at body size, and
   no page padding at all. */
.py-16 { padding-block: 4rem; }
.pt-8 { padding-block-start: 2rem; }
.pt-2 { padding-block-start: 0.5rem; }
.mb-8 { margin-block-end: 2rem; }
.leading-\[1\.85\] { line-height: 1.85; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-block-start: 1.5rem; }
.text-\[24px\] { font-size: 24px; }

/* …and the ones only the 404 page uses. */
.py-10 { padding-block: 2.5rem; }
.gap-x-8 { column-gap: 2rem; }

@media (min-width: 768px) {
  .md\:text-\[40px\] { font-size: 40px; }
  .md\:text-\[30px\] { font-size: 30px; }
  .md\:text-\[64px\] { font-size: 64px; }
  .md\:py-24 { padding-block: 6rem; }
  .md\:py-32 { padding-block: 8rem; }
}
@media (min-width: 1024px) {
  .lg\:text-\[78px\] { font-size: 78px; }
}

/* =========================================================================
   3. Portfolio: filtering + gold glow on hover
   ========================================================================= */
/* WCAG 1.4.11 wants 3:1 on a component boundary, so the resting border is not
   the near-invisible hairline it started as. */
.filter-chip {
  border: 1px solid rgba(17, 16, 13, 0.55);
  transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.filter-chip:hover {
  border-color: var(--ink);
}
.filter-chip[aria-pressed="true"] {
  background-color: var(--gold);
  background-image: linear-gradient(135deg, #e9c06a 0%, var(--gold) 45%, #c39440 100%);
  border-color: #c39440;
  color: var(--ink);
}
.pf-item[hidden] {
  display: none;
}
.pf-shot {
  transition: box-shadow 0.28s ease;
}
.pf-card:hover .pf-shot,
.pf-card:focus-visible .pf-shot {
  box-shadow: 0 0 0 2px var(--gold), 0 12px 30px -12px rgba(192, 136, 56, 0.75);
}

/* =========================================================================
   4. Scroll progress
   ========================================================================= */
#progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: 60;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center; /* RTL */
  will-change: transform;
}

/* =========================================================================
   5. Scroll reveal — opt-in, so content stays visible without JS
   ========================================================================= */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   5b. Platform features — modern where supported, invisible where not
   Every rule here degrades to "nothing happens" on older browsers.
   ========================================================================= */

/* Cross-document view transitions: moving between the homepage and the legal
   pages cross-fades instead of flashing white. One declaration, no JS. */
@view-transition {
  navigation: auto;
}

/* Typographic polish: headings break into even lines instead of leaving a
   single orphan word, and paragraphs avoid short last lines. */
h1,
h2,
h3,
summary {
  text-wrap: balance;
}
p,
li,
figcaption {
  text-wrap: pretty;
}

/* Selecting text picks up the brand gold rather than the browser blue. */
::selection {
  background: var(--gold);
  color: var(--ink);
}

/* =========================================================================
   6. Accessibility baseline
   ========================================================================= */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
video:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--foreground);
  outline-offset: 3px;
  border-radius: 2px;
}
/* The lightbox sits on a near-black scrim; the mobile menu is a light panel. */
[role="dialog"]:not(#mobile-menu) a:focus-visible,
[role="dialog"]:not(#mobile-menu) button:focus-visible,
[role="dialog"]:not(#mobile-menu) video:focus-visible {
  outline-color: var(--background);
}

/* WCAG 2.2 (2.5.8) target size */
[role="dialog"] button,
[data-menu-toggle],
.filter-chip {
  min-inline-size: 44px;
  min-block-size: 44px;
}
/* Standalone nav links sat at 22–23px — a pixel or two under the 24px floor.
   Links that live inside a sentence (the legal line in the footer) are exempt
   under the "inline" exception and are deliberately left alone. */
header nav a,
footer nav a,
footer ul a,
nav[aria-label="מסלול ניווט"] a {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}

/* --- UX PRO MAX audit findings -------------------------------------------
 * Two guidelines are stricter than the WCAG floor the site already clears.
 * Both are fixed only where they actually bite, so desktop is untouched.
 * ---------------------------------------------------------------------- */

/* "Minimum 44x44px touch targets" (WCAG 2.2 AA only demands 24). Applied on
   touch pointers alone — a 24px link is fine with a mouse, not with a thumb. */
@media (pointer: coarse) {
  header nav a,
  footer nav a,
  footer ul a,
  nav[aria-label="מסלול ניווט"] a,
  #contact a[href^="https://mail"] {
    min-block-size: 44px;
  }
  header a[aria-label="חזרה לראש העמוד"],
  header a[aria-label="חזרה לדף הבית"] {
    min-inline-size: 44px;
  }
}

/* "Minimum 16px body text on mobile."
   The old version of this rule targeted `#services .text-[15px]` — classes that
   no longer exist now that everything draws from the type scale, so it had
   quietly become dead. The scale enforces the floor directly instead: --fs-body
   never drops below 16px, and body copy uses it. Only genuine fine print
   (--fs-micro / --fs-small) sits smaller, which is what the rule always
   intended. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  #progress { display: none; }
  /* The universal rule below cannot reach view-transition pseudo-elements. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .gold-fill { transition: none; background-position: 0% 50%; }
  /* Micro-interactions off: no lift, no zoom, no sweep, no stagger. */
  .pf-card:hover, .pf-card:focus-visible,
  .pf-card:hover .pf-shot img, .pf-card:focus-visible .pf-shot img,
  #services ul li:hover .gold-fill,
  .gold-fill:active, .btn-outline:active, .filter-chip:active { transform: none; }
  .underline-gold::after,
  .js-reveal .reveal:not(.is-in) .underline-gold::after { inline-size: 100%; transition: none; }
  .js-reveal .pf-item.reveal { transition-delay: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   7. Long-form legal pages
   ========================================================================= */
.legal-prose { max-inline-size: 72ch; }
.legal-prose h2 { scroll-margin-block-start: 6rem; }
.legal-prose a { text-underline-offset: 4px; }
.legal-prose ul { padding-inline-start: 1.5rem; list-style-position: outside; }

.ltr-inline {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* =========================================================================
   8. Print
   ========================================================================= */
@media print {
  header, footer nav, [data-menu-toggle], #opennagish-widget, #progress,
  .filter-bar, .no-print { display: none !important; }
  body { background: #fff !important; background-image: none !important; color: #000 !important; }
  main { padding: 0 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}

/* =========================================================================
   Section rhythm
   Every section carried an identical 112px of padding top and bottom. Uniform
   spacing reads flat — the eye gets no signal about what opens a chapter and
   what continues one. The hero's closer and the contact block now breathe more
   than the sections that simply follow on.
   ========================================================================= */
#portfolio { padding-block: clamp(4.5rem, 9vw, 9rem); }
#services  { padding-block: clamp(4rem, 7.5vw, 7.5rem); }
#about     { padding-block: clamp(3.5rem, 6.5vw, 6.5rem); }
#process   { padding-block: clamp(3.5rem, 6.5vw, 6.5rem); }
#contact   { padding-block: clamp(5rem, 10vw, 10rem); }

/* The hero is the one place where the site should feel unhurried. */
#top .mx-auto { padding-block-start: clamp(3rem, 6vw, 7rem); }
#hero-title { letter-spacing: -0.03em; line-height: 0.96; }

/* The staggered grid reveal asked for here already existed: site.js sets `--i`
   on every portfolio item and rule 4 above turns it into a transition-delay.
   A second mechanism was written before that was noticed, and removed again —
   it would have overridden the working one. Check for `--i` before adding any
   more stagger.
   ========================================================================= */

/* =========================================================================
   Making the artwork behave like part of the page, not like a file
   Yuval asked for what other sites do so images "can't be downloaded".
   Nothing can prevent that — the browser has already downloaded the file in
   order to paint it. What these two rules DO stop is the browser's own
   right-click image menu, which is how almost everyone would try:
   a transparent layer sits over each image, so the pointer never lands on the
   <img> and "save image as…" is never offered.
   Chosen over blocking the `contextmenu` event on purpose: that also kills
   right-click on text and links, is a known irritation, and is trivially
   disabled. This costs nothing — the cards are already buttons and the lightbox
   image is not interactive.
   It is NOT protection. Anyone who opens devtools has the URL in one step, and
   that is true of every site on the web, Facebook included.
   ========================================================================= */
.pf-shot,
.lb-stage {
  position: relative;
}
.pf-shot::after,
.lb-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  /* transparent, but it is the topmost hit target over the artwork */
  background: transparent;
}

/* YG PRODUCTION SKIN — NO-SLOP */
/* Demo-only visual layer. The production markup, content and behaviour stay frozen. */
@font-face {
  font-family: "Rubik YG";
  src: url("rubik-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Rubik YG";
  src: url("rubik-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Rubik YG";
  src: url("rubik-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Rubik YG";
  src: url("rubik-800.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Rubik YG";
  src: url("rubik-900.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Heebo;
  src: url("heebo-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}

body:has(#portfolio) {
  --yg-primary: #0b45ff;
  --yg-primary-dark: #0736ca;
  --yg-ink: #080b12;
  --yg-paper: #f2f0eb;
  --yg-white: #ffffff;
  --yg-muted: #596271;
  --yg-line: #d3d0c9;
  --yg-dark-line: #3c4350;
  --yg-glass: rgba(255, 255, 255, 0.72);
  --yg-glass-strong: rgba(255, 255, 255, 0.88);
  --yg-material-shadow: 0 18px 54px rgba(42, 38, 29, 0.07), inset 0 1px rgba(255, 255, 255, 0.92);
  --background: #ffffff;
  --foreground: #080b12;
  --card: #f3f4f6;
  --muted-foreground: #596271;
  --gold: var(--yg-primary);
  --gold-rule: var(--yg-line);
  background-color: var(--yg-paper);
  background-image: url("yg-material-field-1920.webp");
  background-image: image-set(
    url("yg-material-field-1920.avif") type("image/avif") 1x,
    url("yg-material-field-4k.avif") type("image/avif") 2x,
    url("yg-material-field-1920.webp") type("image/webp") 1x,
    url("yg-material-field-4k.webp") type("image/webp") 2x
  );
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--yg-ink);
  font-family: Heebo, Arial, sans-serif;
}

body:has(#portfolio) h1,
body:has(#portfolio) h2,
body:has(#portfolio) h3,
body:has(#portfolio) .gold-fill,
body:has(#portfolio) .filter-chip,
body:has(#portfolio) header nav {
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  letter-spacing: 0;
}

body:has(#portfolio) :focus-visible {
  outline: 3px solid var(--yg-primary);
  outline-offset: 4px;
}

body:has(#portfolio) ::selection {
  background: #d9dde5;
  color: var(--yg-ink);
}

body:has(#portfolio) #progress {
  background: var(--yg-primary);
  height: 3px;
}

body:has(#portfolio) header {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--yg-line);
  border-width: 0 0 1px;
  backdrop-filter: blur(12px);
}

body:has(#portfolio) header > div > div {
  min-height: 76px;
}

body:has(#portfolio) header img {
  width: 88px !important;
  height: 50px !important;
  object-fit: contain;
}

body:has(#portfolio) header nav a {
  color: var(--yg-ink);
  font-size: 1rem;
  font-weight: 600;
  position: relative;
}

body:has(#portfolio) header nav a::after {
  background: var(--yg-primary);
  content: "";
  height: 2px;
  inset-inline: 0;
  position: absolute;
  top: calc(100% + 7px);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 200ms ease;
}

body:has(#portfolio) header nav a:hover::after,
body:has(#portfolio) header nav a:focus-visible::after {
  transform: scaleX(1);
}

body:has(#portfolio) .gold-fill {
  background: var(--yg-primary) !important;
  border: 1px solid var(--yg-primary) !important;
  border-radius: 4px !important;
  color: var(--yg-white) !important;
  text-decoration: none;
}

body:has(#portfolio) a.gold-fill {
  gap: 12px;
  overflow: hidden;
}

body:has(#portfolio) a.gold-fill::after {
  content: "←";
  direction: ltr;
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

body:has(#portfolio) a.gold-fill:hover::after,
body:has(#portfolio) a.gold-fill:focus-visible::after {
  transform: translateX(-5px);
}

body:has(#portfolio) a.gold-fill:hover,
body:has(#portfolio) button.gold-fill:hover {
  background: var(--yg-ink) !important;
  border-color: var(--yg-ink) !important;
}

body:has(#portfolio) .btn-outline {
  background: transparent;
  border: 1px solid var(--yg-ink) !important;
  border-radius: 4px;
  color: var(--yg-ink);
}

body:has(#portfolio) .btn-outline:hover {
  background: var(--yg-ink);
  color: var(--yg-white);
}

body:has(#portfolio) .rule-gold,
body:has(#portfolio) .rule-gold-soft {
  border-color: var(--yg-line) !important;
}

body:has(#portfolio) .tick-gold::before {
  background: var(--yg-primary) !important;
}

body:has(#portfolio) .underline-gold {
  background-image: none !important;
  display: inline-block;
  position: relative;
}

body:has(#portfolio) .underline-gold::after {
  background: var(--yg-primary);
  bottom: -12px;
  content: "";
  height: 5px;
  inset-inline-start: 0;
  position: absolute;
  width: 54px;
}

/* Hero: the selected material YG scene is the section itself, never a boxed mockup. */
body:has(#portfolio) #top {
  background: var(--yg-white);
  min-height: 700px;
  overflow: hidden;
  position: relative;
}

body:has(#portfolio) #top::before {
  background-image: url("yg-hero-material-1920.webp");
  background-image: image-set(
    url("yg-hero-material-1920.avif") type("image/avif") 1x,
    url("yg-hero-material-4k.avif") type("image/avif") 2x,
    url("yg-hero-material-1920.webp") type("image/webp") 1x,
    url("yg-hero-material-4k.webp") type("image/webp") 2x
  );
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: "";
  inset: 0;
  position: absolute;
}

body:has(#portfolio) #top > div {
  margin-inline: auto;
  max-width: 1280px;
  min-height: 700px;
  padding-bottom: 96px !important;
  padding-top: 96px !important;
  position: relative;
  width: 100%;
  z-index: 1;
}

body:has(#portfolio) #top .grid > div {
  max-width: 660px;
  width: 56%;
}

body:has(#portfolio) #top .tick-gold {
  color: var(--yg-muted);
  font-weight: 700;
}

body:has(#portfolio) #hero-title {
  color: var(--yg-ink);
  font-size: clamp(3.8rem, 6.5vw, 6.7rem);
  line-height: 0.93;
  max-width: 680px;
}

body:has(#portfolio) #hero-title span {
  color: var(--yg-primary);
}

body:has(#portfolio) #top .t-title {
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.35;
}

body:has(#portfolio) #top .t-lead {
  color: var(--yg-muted);
  max-width: 530px;
}

/* Portfolio: consistent gallery rhythm; content and lightbox data are untouched. */
body:has(#portfolio) #portfolio {
  background: var(--yg-paper);
  padding-block: 112px;
}

body:has(#portfolio) #portfolio > div > .max-w-\[720px\] {
  max-width: 830px;
}

body:has(#portfolio) #portfolio-title,
body:has(#portfolio) #services-title,
body:has(#portfolio) #about-title,
body:has(#portfolio) #process-title,
body:has(#portfolio) #contact-title {
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 0.98;
}

body:has(#portfolio) .filter-bar {
  border-bottom: 1px solid var(--yg-line);
  padding-bottom: 22px;
}

body:has(#portfolio) .filter-chip {
  background: transparent;
  border: 1px solid var(--yg-line);
  border-radius: 4px;
  color: var(--yg-ink);
  font-weight: 650;
  min-height: 42px;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

body:has(#portfolio) .filter-chip:hover {
  border-color: var(--yg-ink);
}

body:has(#portfolio) .filter-chip[aria-pressed="true"] {
  background: var(--yg-primary);
  border-color: var(--yg-primary);
  color: var(--yg-white);
}

body:has(#portfolio) #portfolio ul.mt-14 {
  display: grid;
  gap: 42px 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:has(#portfolio) .pf-card {
  color: var(--yg-ink);
  position: relative;
}

body:has(#portfolio) .pf-card::after,
body:has(#portfolio) .pf-card::before {
  background: var(--yg-white);
  border: 1px solid var(--yg-ink);
  bottom: 62px;
  color: var(--yg-ink);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}

body:has(#portfolio) .pf-card::after {
  content: attr(data-title);
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 750;
  inset-inline-start: 16px;
  padding: 10px 13px;
}

body:has(#portfolio) .pf-card::before {
  content: attr(data-sub);
  font-size: 0.72rem;
  font-weight: 650;
  inset-inline-end: 16px;
  padding: 8px 10px;
}

body:has(#portfolio) .pf-card:hover::after,
body:has(#portfolio) .pf-card:hover::before,
body:has(#portfolio) .pf-card:focus-visible::after,
body:has(#portfolio) .pf-card:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  body:has(#portfolio) .pf-card > .mt-3 {
    display: none;
  }

  body:has(#portfolio) .pf-card::after,
  body:has(#portfolio) .pf-card::before {
    bottom: 16px;
  }
}

@media (hover: none) {
  body:has(#portfolio) .pf-card::after,
  body:has(#portfolio) .pf-card::before {
    display: none;
  }
}

body:has(#portfolio) .pf-shot {
  aspect-ratio: 1 / 1 !important;
  background: var(--yg-white) !important;
  border: 1px solid var(--yg-line) !important;
  border-radius: 2px;
}

body:has(#portfolio) .pf-shot > img {
  height: 100% !important;
  object-fit: cover;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100% !important;
}

body:has(#portfolio) .pf-item[data-tag="לוגו"] .pf-shot > img {
  object-fit: contain;
  padding: 8%;
}

body:has(#portfolio) .pf-card:hover .pf-shot > img,
body:has(#portfolio) .pf-card:focus-visible .pf-shot > img {
  transform: scale(1.025);
}

body:has(#portfolio) .pf-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

body:has(#portfolio) .pf-card .label-he {
  color: var(--yg-muted);
  font-weight: 600;
}

/* Services: one featured conversion unit followed by numbered capability cards. */
body:has(#portfolio) #services {
  background: var(--yg-ink);
  color: var(--yg-white);
  padding-block: 112px;
}

body:has(#portfolio) #services .text-muted-foreground {
  color: #bac2ce !important;
}

body:has(#portfolio) #services > div > .border-2 {
  background: var(--yg-white) !important;
  border: 1px solid var(--yg-dark-line) !important;
  border-radius: 8px;
  color: var(--yg-ink);
}

body:has(#portfolio) #services > div > .border-2 .text-muted-foreground {
  color: var(--yg-muted) !important;
}

body:has(#portfolio) #services mark.gold-fill {
  padding-inline: 6px;
}

body:has(#portfolio) .svc-grid {
  counter-reset: yg-service;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:has(#portfolio) .svc-card {
  background: #10151f;
  border: 1px solid var(--yg-dark-line);
  border-radius: 6px;
  color: var(--yg-white);
  counter-increment: yg-service;
  min-height: 240px;
  padding: 32px;
  position: relative;
}

body:has(#portfolio) .svc-card::before {
  color: #7f8a9a;
  content: "0" counter(yg-service);
  direction: ltr;
  font-family: "Rubik YG", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  left: 30px;
  position: absolute;
  top: 30px;
}

body:has(#portfolio) .svc-card__icon {
  display: none;
}

body:has(#portfolio) .svc-card__title {
  border-bottom: 1px solid var(--yg-dark-line);
  font-size: 1.65rem;
  margin-bottom: 24px;
  padding-bottom: 22px;
  padding-inline-end: 46px;
}

body:has(#portfolio) .svc-list {
  color: #dbe0e8;
}

body:has(#portfolio) .svc-list li::marker {
  color: var(--yg-primary);
}

body:has(#portfolio) .svc-card--wide {
  grid-column: span 2;
}

body:has(#portfolio) .svc-card__note {
  border-top: 1px solid var(--yg-dark-line);
  color: #bac2ce;
  margin-top: 24px;
  padding-top: 18px;
}

/* About: an asymmetric blue editorial block, built from the existing two columns. */
body:has(#portfolio) #about {
  background: var(--yg-white);
  padding-block: 112px;
}

body:has(#portfolio) #about .grid {
  background: var(--yg-white);
  border: 1px solid var(--yg-line);
  gap: 0;
}

body:has(#portfolio) #about .grid > div:first-child {
  background: var(--yg-primary);
  color: var(--yg-white);
  padding: clamp(36px, 5vw, 72px);
}

body:has(#portfolio) #about .grid > div:first-child .text-muted-foreground {
  color: var(--yg-white) !important;
}

body:has(#portfolio) #about .grid > div:first-child .tick-gold::before {
  background: var(--yg-white) !important;
}

body:has(#portfolio) #about .grid > div:first-child .underline-gold::after {
  background: var(--yg-white);
}

body:has(#portfolio) #about .grid > div:last-child {
  color: var(--yg-ink) !important;
  padding: clamp(36px, 5vw, 72px);
}

/* Process: quiet horizontal timeline. */
body:has(#portfolio) #process {
  background: var(--yg-paper) !important;
  padding-block: 112px;
}

body:has(#portfolio) #process ol {
  gap: 0;
  position: relative;
}

body:has(#portfolio) #process ol::before {
  background: var(--yg-line);
  content: "";
  height: 1px;
  inset-inline: 7%;
  position: absolute;
  top: 19px;
}

body:has(#portfolio) #process li {
  align-items: flex-start;
  border: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 18px;
  position: relative;
}

body:has(#portfolio) #process li > span:first-child {
  align-items: center;
  background: var(--yg-white);
  border: 1px solid var(--yg-primary);
  border-radius: 50%;
  color: var(--yg-primary) !important;
  display: inline-flex;
  font-size: 0.76rem;
  height: 40px;
  justify-content: center;
  width: 40px;
  z-index: 1;
}

body:has(#portfolio) #process li > span:last-child {
  font-size: 1.15rem;
}

/* Contact: one clear conversion card on the brand field. */
body:has(#portfolio) #contact {
  background: var(--yg-primary);
  border: 0 !important;
  padding-block: 112px;
}

body:has(#portfolio) #contact > div > div {
  background: var(--yg-white);
  border: 1px solid var(--yg-ink);
  border-radius: 8px;
  max-width: 900px;
  padding: clamp(34px, 6vw, 76px);
}

body:has(#portfolio) #contact .gold-fill {
  background: var(--yg-ink) !important;
  border-color: var(--yg-ink) !important;
}

body:has(#portfolio) #contact .gold-fill:hover {
  background: var(--yg-primary) !important;
  border-color: var(--yg-primary) !important;
}

body:has(#portfolio) #contact a[aria-label*="טיקטוק"] {
  border: 1px solid var(--yg-line) !important;
  border-radius: 4px;
}

body:has(#portfolio) #contact a[aria-label*="טיקטוק"] .gold-fill {
  border-radius: 50% !important;
}

body:has(#portfolio) footer {
  background: var(--yg-ink) !important;
  border-color: var(--yg-dark-line) !important;
  color: var(--yg-white);
}

body:has(#portfolio) footer .text-muted-foreground {
  color: #bac2ce !important;
}

body:has(#portfolio) footer img {
  filter: brightness(0) invert(1);
  height: auto;
  object-fit: contain;
  width: 120px !important;
}

body:has(#portfolio) footer a:hover {
  color: #aebfff;
  opacity: 1;
}

/* Overlays may use depth; page cards deliberately do not. */
body:has(#portfolio) #mobile-menu,
body:has(#portfolio) .lb-shell {
  border: 1px solid var(--yg-dark-line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

body:has(#portfolio) #mobile-menu {
  background: var(--yg-white);
}

body:has(#portfolio) .lb-body {
  background: var(--yg-white);
  color: var(--yg-ink);
}

body:has(#portfolio) .lb-stage {
  background: #e9ebef;
}

body:has(#portfolio) .lb-tool {
  border-color: var(--yg-line);
  border-radius: 4px;
}

/* Material system C: one continuous mineral canvas with blue and black inlays. */
body:has(#portfolio) #main {
  position: relative;
  isolation: isolate;
  background-color: var(--yg-paper);
  background-image: url("yg-material-field-1920.webp");
  background-image: image-set(
    url("yg-material-field-1920.avif") type("image/avif") 1x,
    url("yg-material-field-4k.avif") type("image/avif") 2x,
    url("yg-material-field-1920.webp") type("image/webp") 1x,
    url("yg-material-field-4k.webp") type("image/webp") 2x
  );
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

body:has(#portfolio) #portfolio {
  isolation: isolate;
  overflow: clip;
  position: relative;
}

body:has(#portfolio) #portfolio::before {
  background-image: url("yg-canvas-bridge-1920.webp");
  background-image: image-set(
    url("yg-canvas-bridge-1920.avif") type("image/avif") 1x,
    url("yg-canvas-bridge-4k.avif") type("image/avif") 2x,
    url("yg-canvas-bridge-1920.webp") type("image/webp") 1x,
    url("yg-canvas-bridge-4k.webp") type("image/webp") 2x
  );
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: "";
  height: min(37.5vw, 1440px);
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

body:has(#portfolio) #portfolio > div {
  position: relative;
  z-index: 1;
}

body:has(#portfolio) #portfolio,
body:has(#portfolio) #services,
body:has(#portfolio) #about,
body:has(#portfolio) #process,
body:has(#portfolio) #contact {
  background: transparent !important;
  border-top: 0 !important;
  box-shadow: none;
}

body:has(#portfolio) #portfolio .pf-shot {
  background: var(--yg-glass-strong) !important;
  border-color: rgba(113, 108, 97, 0.26) !important;
  border-radius: 12px;
  box-shadow: var(--yg-material-shadow);
  overflow: hidden;
}

body:has(#portfolio) .pf-card::after,
body:has(#portfolio) .pf-card::before {
  background: var(--yg-glass-strong);
  border-color: rgba(8, 11, 18, 0.42);
  border-radius: 5px;
  box-shadow: 0 8px 26px rgba(42, 38, 29, 0.1);
}

body:has(#portfolio) #services {
  color: var(--yg-ink);
}

body:has(#portfolio) #services .text-muted-foreground,
body:has(#portfolio) #services > div > .border-2 .text-muted-foreground {
  color: var(--yg-muted) !important;
}

body:has(#portfolio) #services > div > .border-2,
body:has(#portfolio) .svc-card {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(113, 108, 97, 0.28) !important;
  box-shadow: var(--yg-material-shadow);
}

body:has(#portfolio) #services > div > .border-2 {
  border-radius: 18px;
}

body:has(#portfolio) .svc-card {
  background: rgba(255, 255, 255, 0.72) !important;
  border-radius: 14px;
  color: var(--yg-ink);
}

body:has(#portfolio) .svc-card::before {
  color: var(--yg-primary);
}

body:has(#portfolio) .svc-card__title,
body:has(#portfolio) .svc-card__note {
  border-color: rgba(113, 108, 97, 0.25);
}

body:has(#portfolio) .svc-list,
body:has(#portfolio) .svc-card__note {
  color: var(--yg-muted);
}

body:has(#portfolio) #about .grid {
  background: var(--yg-glass);
  border-color: rgba(113, 108, 97, 0.28);
  border-radius: 20px;
  box-shadow: var(--yg-material-shadow);
  overflow: hidden;
}

body:has(#portfolio) #about .grid > div:first-child {
  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.2), inset 0 1px rgba(255, 255, 255, 0.24);
}

body:has(#portfolio) #about .grid > div:last-child {
  background: rgba(255, 255, 255, 0.42);
}

body:has(#portfolio) #process li > span:first-child {
  background: var(--yg-glass-strong);
  box-shadow: 0 7px 20px rgba(42, 38, 29, 0.08), inset 0 1px var(--yg-white);
}

body:has(#portfolio) #contact > div > div {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(113, 108, 97, 0.32);
  border-radius: 20px;
  box-shadow: var(--yg-material-shadow);
}

body:has(#portfolio) footer {
  border-top: 0 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.11);
}

@media (max-width: 1023px) {
  body:has(#portfolio) #main {
    background-image: url("yg-material-field-mobile.webp");
    background-image: image-set(
      url("yg-material-field-mobile.avif") type("image/avif") 1x,
      url("yg-material-field-1920.avif") type("image/avif") 2x,
      url("yg-material-field-mobile.webp") type("image/webp") 1x,
      url("yg-material-field-1920.webp") type("image/webp") 2x
    );
    background-attachment: scroll;
  }

  body:has(#portfolio) #portfolio::before {
    background-image: url("yg-canvas-bridge-mobile.webp");
    background-image: image-set(
      url("yg-canvas-bridge-mobile.avif") type("image/avif") 1x,
      url("yg-canvas-bridge-1920.avif") type("image/avif") 2x,
      url("yg-canvas-bridge-mobile.webp") type("image/webp") 1x,
      url("yg-canvas-bridge-1920.webp") type("image/webp") 2x
    );
  }

  body:has(#portfolio) #top {
    min-height: auto;
    padding-bottom: min(56.25vw, 540px);
  }

  body:has(#portfolio) #top::before {
    background-image: url("yg-hero-material-mobile.webp");
    background-image: image-set(
      url("yg-hero-material-mobile.avif") type("image/avif") 1x,
      url("yg-hero-material-1920.avif") type("image/avif") 2x,
      url("yg-hero-material-mobile.webp") type("image/webp") 1x,
      url("yg-hero-material-1920.webp") type("image/webp") 2x
    );
    background-position: left center;
    background-size: 100% auto;
    bottom: 0;
    height: min(56.25vw, 540px);
    left: 0;
    right: 0;
    top: auto;
    width: auto;
  }

  body:has(#portfolio) #top > div {
    min-height: auto;
    padding-bottom: 74px !important;
    padding-top: 74px !important;
  }

  body:has(#portfolio) #top .grid > div {
    max-width: 720px;
    width: 100%;
  }

  body:has(#portfolio) #portfolio ul.mt-14 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(#portfolio) .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body:has(#portfolio) header > div > div {
    min-height: 68px;
  }

  body:has(#portfolio) header img {
    height: 42px !important;
    width: 74px !important;
  }

  body:has(#portfolio) #top {
    padding-bottom: 56.25vw;
  }

  body:has(#portfolio) #top::before {
    bottom: 0;
    height: 56.25vw;
    left: 0;
    right: 0;
  }

  body:has(#portfolio) #top > div {
    padding-bottom: 56px !important;
    padding-top: 56px !important;
  }

  body:has(#portfolio) #hero-title {
    font-size: clamp(3.2rem, 15vw, 5rem);
    line-height: 0.94;
  }

  body:has(#portfolio) #portfolio,
  body:has(#portfolio) #services,
  body:has(#portfolio) #about,
  body:has(#portfolio) #process,
  body:has(#portfolio) #contact {
    padding-block: 80px;
  }

  body:has(#portfolio) #portfolio ul.mt-14,
  body:has(#portfolio) .svc-grid {
    grid-template-columns: 1fr;
  }

  body:has(#portfolio) .svc-card--wide {
    grid-column: auto;
  }

  body:has(#portfolio) #about .grid > div:first-child,
  body:has(#portfolio) #about .grid > div:last-child {
    padding: 36px 28px;
  }

  body:has(#portfolio) #process ol {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr;
    padding-inline-start: 0;
  }

  body:has(#portfolio) #process ol::before {
    bottom: 20px;
    height: auto;
    inset-inline-start: 19px;
    inset-inline-end: auto;
    top: 20px;
    width: 1px;
  }

  body:has(#portfolio) #process li {
    align-items: center;
    flex-direction: row;
    gap: 18px;
    padding: 0;
  }
}

@media (max-width: 360px) {
  body:has(#portfolio) #hero-title {
    font-size: 3rem;
  }

  body:has(#portfolio) #top {
    padding-bottom: 56.25vw;
  }

  body:has(#portfolio) #top::before {
    height: 56.25vw;
  }

  body:has(#portfolio) .svc-card {
    min-height: 0;
    padding: 26px;
  }

  body:has(#portfolio) #contact > div > div {
    padding: 30px 22px;
  }
}

/* YG refinement pass: typography, expertise, portfolio viewer and closing plate. */
body:has(#portfolio) #main {
  background: transparent;
}

body:has(#portfolio) header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(8, 11, 18, 0.18);
  backdrop-filter: blur(18px) saturate(1.08);
}

body:has(#portfolio) #top {
  background: transparent;
  margin-top: 0;
}

body:has(#portfolio) #top::before {
  background-image: url("yg-hero-integrated-1920.webp");
  background-image: image-set(
    url("yg-hero-integrated-1920.avif") type("image/avif") 1x,
    url("yg-hero-integrated-4k.avif") type("image/avif") 2x,
    url("yg-hero-integrated-1920.webp") type("image/webp") 1x,
    url("yg-hero-integrated-4k.webp") type("image/webp") 2x
  );
}

body:has(#portfolio) #hero-title,
body:has(#portfolio) #portfolio-title,
body:has(#portfolio) #services-title,
body:has(#portfolio) #about-title,
body:has(#portfolio) #process-title,
body:has(#portfolio) #contact-title {
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-wrap: balance;
}

body:has(#portfolio) #hero-title {
  line-height: 0.9;
}

body:has(#portfolio) #portfolio-title,
body:has(#portfolio) #services-title,
body:has(#portfolio) #about-title,
body:has(#portfolio) #process-title,
body:has(#portfolio) #contact-title {
  color: var(--yg-ink);
  font-size: clamp(2.75rem, 5.4vw, 5rem);
  line-height: 0.94;
}

body:has(#portfolio) .label-he,
body:has(#portfolio) .mono {
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

body:has(#portfolio) .underline-gold::after {
  height: 6px;
  width: 72px;
}

/* Expertise: cool white architectural panels, not warm generic cards. */
body:has(#portfolio) #services .svc-grid {
  align-items: stretch;
  gap: 18px;
}

body:has(#portfolio) #services > div > .border-2,
body:has(#portfolio) #services .svc-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(8, 11, 18, 0.16) !important;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(8, 11, 18, 0.07), inset 0 4px var(--yg-primary);
  color: var(--yg-ink);
}

body:has(#portfolio) #services .svc-card {
  min-height: 0;
  padding: 34px 34px 38px;
}

body:has(#portfolio) #services .svc-card::before {
  color: var(--yg-primary);
  font-size: 0.78rem;
  left: 32px;
  top: 34px;
}

body:has(#portfolio) #services .svc-card__title {
  border-bottom: 1px solid rgba(8, 11, 18, 0.17);
  color: var(--yg-ink);
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 850;
  line-height: 1.05;
  margin-bottom: 22px;
  padding-bottom: 20px;
}

body:has(#portfolio) #services .svc-list {
  color: #343b47;
  font-size: 1.02rem;
  line-height: 1.5;
}

body:has(#portfolio) #services .svc-list li {
  border-bottom: 1px solid rgba(8, 11, 18, 0.08);
  margin: 0;
  padding: 9px 0;
}

body:has(#portfolio) #services .svc-list li:last-child {
  border-bottom: 0;
}

/* Portfolio captions: one editorial plate instead of two floating labels. */
body:has(#portfolio) .pf-card::after,
body:has(#portfolio) .pf-card::before {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body:has(#portfolio) .pf-card > .mt-3 {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(8, 11, 18, 0.22);
    border-radius: 8px;
    bottom: 14px;
    box-shadow: 0 12px 34px rgba(8, 11, 18, 0.14);
    display: flex !important;
    inset-inline: 14px;
    margin: 0;
    opacity: 0;
    padding: 12px 14px;
    position: absolute;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 4;
  }

  body:has(#portfolio) .pf-card:hover > .mt-3,
  body:has(#portfolio) .pf-card:focus-visible > .mt-3 {
    opacity: 1;
    transform: translateY(0);
  }
}

body:has(#portfolio) .pf-card > .mt-3 h3 {
  color: var(--yg-ink);
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
}

body:has(#portfolio) .pf-card > .mt-3 .label-he {
  color: var(--yg-primary);
  font-size: 0.78rem;
  font-weight: 750;
}

/* Full-screen case-study viewer. */
.yg-viewer {
  display: grid;
  padding: clamp(10px, 2vw, 28px);
  place-items: center;
}

.yg-viewer__backdrop {
  background: rgba(8, 11, 18, 0.6);
  backdrop-filter: blur(14px);
}

body:has(#portfolio) .yg-viewer__shell {
  background: rgba(244, 246, 249, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  box-shadow: 0 30px 100px rgba(8, 11, 18, 0.34), inset 0 4px var(--yg-primary);
  color: var(--yg-ink);
  height: min(94dvh, 980px) !important;
  max-width: 1600px;
  overflow: hidden;
  padding: 0 !important;
  width: min(96vw, 1600px) !important;
}

.yg-viewer__bar {
  border-bottom: 1px solid rgba(8, 11, 18, 0.13);
  min-height: 92px;
  padding: 18px 22px;
}

.yg-viewer__eyebrow {
  color: var(--yg-primary);
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.yg-viewer__title {
  color: var(--yg-ink);
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  font-weight: 900;
  line-height: 1.05;
}

.yg-viewer__subtitle {
  color: var(--yg-muted);
  font-size: 0.92rem;
  margin-top: 4px;
}

.yg-viewer__actions button,
.yg-viewer__step {
  align-items: center;
  border: 1px solid rgba(8, 11, 18, 0.18);
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  min-height: 46px;
}

.yg-viewer__close {
  background: var(--yg-primary);
  color: var(--yg-white);
  font-size: 1.25rem;
  height: 46px;
  width: 46px;
}

body:has(#portfolio) .yg-viewer__body {
  background: transparent;
  direction: ltr;
  display: grid;
  flex: 1;
  gap: 16px;
  grid-template-areas: "art details";
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  padding: 16px;
}

body:has(#portfolio) .yg-viewer__stage {
  background: #edf0f4;
  border: 1px solid rgba(8, 11, 18, 0.13);
  border-radius: 14px;
  grid-area: art;
  min-height: 0;
  overflow: hidden;
}

body:has(#portfolio) .yg-viewer__stage .lb-img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

body:has(#portfolio) .yg-viewer__details {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(8, 11, 18, 0.13);
  border-radius: 14px;
  direction: rtl;
  grid-area: details;
  overflow: auto;
  padding: 22px;
}

body:has(#portfolio) .yg-viewer__details .lb-block {
  border-color: rgba(8, 11, 18, 0.12);
}

body:has(#portfolio) .yg-viewer__details .lb-label {
  color: var(--yg-primary);
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
}

body:has(#portfolio) .yg-viewer__details .lb-note {
  color: #303744;
  font-size: 1rem;
  line-height: 1.65;
}

.yg-viewer__nav {
  border-top: 1px solid rgba(8, 11, 18, 0.13);
  min-height: 70px;
  padding: 12px 18px;
}

.yg-viewer__step {
  background: var(--yg-white);
  color: var(--yg-ink);
  font-size: 1.2rem;
  font-weight: 800;
  height: 46px;
  width: 52px;
}

.yg-viewer__step:hover,
.yg-viewer__step:focus-visible {
  background: var(--yg-primary);
  color: var(--yg-white);
}

.yg-viewer__counter {
  color: var(--yg-muted);
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}

/* The material field closes the page; the footer is an inlaid plate, not a black band. */
body:has(#portfolio) footer {
  background: transparent !important;
  color: var(--yg-ink);
  padding: 20px clamp(12px, 2vw, 28px) 28px;
}

body:has(#portfolio) footer > div {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(8, 11, 18, 0.16);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(8, 11, 18, 0.08), inset 0 4px var(--yg-primary);
}

body:has(#portfolio) footer .text-muted-foreground {
  color: var(--yg-muted) !important;
}

body:has(#portfolio) footer img {
  filter: none;
  width: 96px !important;
}

body:has(#portfolio) footer h2 {
  color: var(--yg-primary);
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-weight: 800;
}

body:has(#portfolio) footer a {
  color: var(--yg-ink);
}

body:has(#portfolio) footer a:hover {
  color: var(--yg-primary);
}

@media (max-width: 1023px) {
  body:has(#portfolio) {
    background-image: url("yg-material-field-mobile.webp");
    background-image: image-set(
      url("yg-material-field-mobile.avif") type("image/avif") 1x,
      url("yg-material-field-1920.avif") type("image/avif") 2x,
      url("yg-material-field-mobile.webp") type("image/webp") 1x,
      url("yg-material-field-1920.webp") type("image/webp") 2x
    );
    background-attachment: scroll;
  }

  body:has(#portfolio) #top::before {
    background-image: url("yg-hero-integrated-mobile.webp");
    background-image: image-set(
      url("yg-hero-integrated-mobile.avif") type("image/avif") 1x,
      url("yg-hero-integrated-1920.avif") type("image/avif") 2x,
      url("yg-hero-integrated-mobile.webp") type("image/webp") 1x,
      url("yg-hero-integrated-1920.webp") type("image/webp") 2x
    );
  }
}

@media (max-width: 900px) {
  .yg-viewer {
    padding: 0;
  }

  body:has(#portfolio) .yg-viewer__shell {
    border: 0;
    border-radius: 0;
    height: 100dvh !important;
    width: 100vw !important;
  }

  .yg-viewer__bar {
    min-height: 82px;
    padding: 14px 16px;
  }

  body:has(#portfolio) .yg-viewer__body {
    direction: rtl;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 12px;
  }

  body:has(#portfolio) .yg-viewer__stage {
    flex: 0 0 min(55svh, 620px);
    max-block-size: none;
  }

  body:has(#portfolio) .yg-viewer__details {
    flex: none;
    overflow: visible;
  }
}

@media (hover: none), (max-width: 767px) {
  body:has(#portfolio) .pf-card > .mt-3 {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex !important;
    margin-top: 12px;
    opacity: 1;
    padding: 0 2px;
    position: static;
    transform: none;
  }
}

/* YG SINGLE CANVAS PASS */
body:has(#portfolio) {
  background-color: #f8fafc;
  background-image: url("yg-page-background-desktop.webp");
  background-image: image-set(
    url("yg-page-background-desktop.avif") type("image/avif"),
    url("yg-page-background-desktop.webp") type("image/webp")
  );
  background-attachment: scroll;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

body:has(#portfolio) header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(15, 23, 42, 0.16);
}

body:has(#portfolio) #top {
  background: transparent !important;
  min-height: calc(100svh - 72px);
}

body:has(#portfolio) #top::before {
  background: none !important;
}

body:has(#portfolio) #portfolio::before {
  background: none !important;
  content: none !important;
}

body:has(#portfolio) #portfolio,
body:has(#portfolio) #services,
body:has(#portfolio) #about,
body:has(#portfolio) #process,
body:has(#portfolio) #contact {
  background: transparent !important;
}

body:has(#portfolio) #top > div {
  min-height: calc(100svh - 72px);
  padding-bottom: clamp(52px, 8vh, 96px);
  padding-top: clamp(52px, 8vh, 96px);
}

body:has(#portfolio) .yg-hero-copy {
  position: relative;
  z-index: 2;
}

body:has(#portfolio) .yg-hero-art {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 0;
}

body:has(#portfolio) .yg-hero-mark {
  display: block;
  filter: drop-shadow(0 30px 46px rgba(8, 11, 18, 0.22));
  height: auto;
  max-height: min(66vh, 720px);
  object-fit: contain;
  width: min(100%, 720px);
}

body:has(#portfolio) #hero-title {
  font-size: clamp(3.25rem, 6vw, 6.5rem);
  line-height: 0.94;
}

body:has(#portfolio) .yg-hero-tagline {
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  line-height: 1.32;
}

body:has(#portfolio) .yg-hero-lead {
  color: #475569;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.7;
}

body:has(#portfolio) #services .svc-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

body:has(#portfolio) #services .svc-card::before {
  display: none !important;
}

body:has(#portfolio) #services .svc-list li {
  padding-inline-start: 0;
}

body:has(#portfolio) #services .svc-list li::before {
  content: none !important;
  display: none !important;
}

body:has(#portfolio) #services .svc-grid {
  background: transparent !important;
}

body:has(#portfolio) #services-title .underline-gold {
  padding-block-end: 0;
}

body:has(#portfolio) #services-title .underline-gold::after {
  content: none !important;
  display: none !important;
}

body:has(#portfolio) #portfolio .pf-shot {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body:has(#portfolio) #portfolio .pf-card:hover .pf-shot,
body:has(#portfolio) #portfolio .pf-card:focus-visible .pf-shot {
  box-shadow: none !important;
}

body:has(#portfolio) .yg-contact-actions {
  align-items: stretch;
  flex-wrap: nowrap !important;
}

body:has(#portfolio) #services .svc-list li:hover {
  background-color: rgba(11, 69, 255, 0.055);
}

body:has(#portfolio) #contact > div > div,
body:has(#portfolio) footer > div {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.08);
}

body:has(#portfolio) #about .grid > div {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body:has(#portfolio) #process ol {
  gap: clamp(1.75rem, 3vw, 3rem);
}

body:has(#portfolio) #process ol li {
  align-items: flex-start;
  padding-top: clamp(1.35rem, 2vw, 1.75rem);
}

body:has(#portfolio) #process ol li span:first-child {
  align-items: initial;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  display: block;
  font-size: clamp(3.1rem, 4.7vw, 4.35rem);
  height: auto;
  justify-content: initial;
  width: auto;
}

body:has(#portfolio) #process ol li span:last-child {
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  line-height: 1.28;
}

body:has(#portfolio) .pf-cta {
  align-items: end;
  background: transparent !important;
  border: 0;
  border-block: 1px solid rgba(15, 23, 42, 0.24);
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) auto;
  margin-block-start: clamp(4rem, 8vw, 7.5rem);
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
}

body:has(#portfolio) .pf-cta__copy {
  max-inline-size: 54rem;
}

body:has(#portfolio) .pf-cta__eyebrow {
  color: #0b45ff;
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  margin-block-end: 0.9rem;
}

body:has(#portfolio) .pf-cta__title {
  color: #090d16;
  font-family: var(--yg-display);
  font-size: clamp(2.1rem, 4vw, 4.75rem);
  font-weight: 900;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

body:has(#portfolio) .pf-cta__link {
  align-items: center;
  background: #0b45ff;
  color: #ffffff;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 850;
  gap: 1.1rem;
  justify-content: center;
  min-height: 56px;
  padding: 0.9rem 1.35rem;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}

body:has(#portfolio) .pf-cta__link::after {
  content: "←";
  font-size: 1.25em;
  line-height: 1;
}

body:has(#portfolio) .pf-cta__link:hover,
body:has(#portfolio) .pf-cta__link:focus-visible {
  background: #0838d1;
  transform: translateX(-3px);
}

body:has(#portfolio) .pf-cta__link:focus-visible {
  outline: 3px solid #090d16;
  outline-offset: 4px;
}

body:has(#portfolio) .yg-viewer__stage {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body:has(#portfolio) .yg-viewer__body {
  align-items: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body:has(#portfolio) .yg-viewer__details {
  background: #ffffff;
  border-color: #d9e0e8;
  color: #111827;
  justify-content: flex-start;
  overflow: visible;
}

body:has(#portfolio) .yg-viewer__details .lb-label {
  color: #0647d8;
  opacity: 1;
}

@media (max-width: 767px) {
  body:has(#portfolio) .yg-viewer__nav {
    padding-left: max(84px, env(safe-area-inset-left));
  }
}

body:has(#portfolio) .yg-viewer__details .lb-meta {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #111827;
  display: inline-flex;
  font-weight: 800;
  margin-top: 8px;
  padding: 8px 10px;
}

body:has(#portfolio) .yg-viewer__details .lb-note {
  color: #1f2937;
}

@media (min-width: 1024px) {
  body:has(#portfolio) .yg-hero-copy,
  body:has(#portfolio) .yg-hero-art {
    grid-column: span 6 / span 6;
  }
}

@media (max-width: 767px) {
  body:has(#portfolio) {
    background-image: url("yg-page-background-mobile.webp");
    background-image: image-set(
      url("yg-page-background-mobile.avif") type("image/avif"),
      url("yg-page-background-mobile.webp") type("image/webp")
    );
    background-attachment: scroll;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  body:has(#portfolio) #top,
  body:has(#portfolio) #top > div {
    min-height: 0;
  }

  body:has(#portfolio) .yg-hero-art {
    block-size: 340px;
    margin-top: 36px;
    order: initial;
  }

  body:has(#portfolio) .yg-hero-mark {
    max-height: 42vh;
    width: min(88vw, 520px);
  }

  body:has(#portfolio) #hero-title {
    font-size: clamp(3rem, 15vw, 4.65rem);
  }

  body:has(#portfolio) .pf-cta {
    align-items: start;
    grid-template-columns: 1fr;
  }

  body:has(#portfolio) .pf-cta__title {
    font-size: clamp(2.15rem, 10vw, 3.35rem);
  }

  body:has(#portfolio) .pf-cta__link {
    justify-self: stretch;
  }

  body:has(#portfolio) .yg-contact-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body:has(#portfolio) .yg-contact-actions > a {
    padding-inline: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#portfolio) *,
  body:has(#portfolio) *::before,
  body:has(#portfolio) *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* YG LEGAL PAGES */
body.yg-legal-page {
  --yg-primary: #0b45ff;
  --yg-primary-dark: #0736ca;
  --yg-ink: #080b12;
  --yg-paper: #f8fafc;
  --yg-white: #ffffff;
  --yg-muted: #526071;
  --yg-line: rgba(15, 23, 42, 0.16);
  --background: #ffffff;
  --foreground: #080b12;
  --card: #ffffff;
  --muted-foreground: #526071;
  --gold: var(--yg-primary);
  --gold-rule: var(--yg-line);
  background-color: var(--yg-paper);
  background-image: url("yg-page-background-desktop.webp");
  background-image: image-set(
    url("yg-page-background-desktop.avif") type("image/avif"),
    url("yg-page-background-desktop.webp") type("image/webp")
  );
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--yg-ink);
  font-family: Heebo, Arial, sans-serif;
}

.yg-legal-page h1,
.yg-legal-page h2,
.yg-legal-page header nav,
.yg-legal-page .gold-fill,
.yg-legal-page footer h2 {
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  letter-spacing: 0;
}

.yg-legal-page :focus-visible {
  outline: 3px solid var(--yg-primary);
  outline-offset: 4px;
}

.yg-legal-page ::selection {
  background: #d9dde5;
  color: var(--yg-ink);
}

.yg-legal-page #progress {
  background: var(--yg-primary);
  height: 3px;
}

.yg-legal-page header {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid var(--yg-line) !important;
  backdrop-filter: blur(14px);
}

.yg-legal-page header > div > div {
  min-height: 76px;
}

.yg-legal-page header img {
  height: 50px !important;
  object-fit: contain;
  width: 88px !important;
}

.yg-legal-page header nav a {
  color: var(--yg-ink) !important;
  font-weight: 700;
  position: relative;
}

.yg-legal-page header nav a::after {
  background: var(--yg-primary);
  bottom: -10px;
  content: "";
  height: 2px;
  inset-inline: 50%;
  position: absolute;
  transition: inset-inline 180ms ease;
}

.yg-legal-page header nav a:hover::after,
.yg-legal-page header nav a:focus-visible::after {
  inset-inline: 0;
}

.yg-legal-page .gold-fill {
  background: var(--yg-primary) !important;
  border: 1px solid var(--yg-primary) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  min-height: 48px;
  padding: 0.75rem 1.2rem !important;
  transition: background-color 180ms ease, transform 180ms ease;
}

.yg-legal-page a.gold-fill::after {
  content: "←";
  font-size: 1.1em;
  margin-inline-start: 0.8rem;
}

.yg-legal-page .gold-fill:hover,
.yg-legal-page .gold-fill:focus-visible {
  background: var(--yg-primary-dark) !important;
  transform: translateX(-2px);
}

.yg-legal-page main {
  padding: clamp(2.25rem, 6vw, 5.5rem) clamp(0.75rem, 2vw, 1.75rem);
}

.yg-legal-page main > div {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--yg-line);
  border-radius: 20px;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.09), inset 0 4px var(--yg-primary);
  max-width: 980px !important;
  padding: clamp(2rem, 5vw, 4.75rem) !important;
}

.yg-legal-page main nav[aria-label="מסלול ניווט"] {
  border-bottom: 1px solid var(--yg-line);
  color: var(--yg-muted) !important;
  margin-bottom: clamp(2rem, 4vw, 3.25rem) !important;
  padding-bottom: 1.1rem;
}

.yg-legal-page main nav[aria-label="מסלול ניווט"] a {
  color: var(--yg-ink);
  font-weight: 700;
  text-decoration-color: var(--yg-primary);
}

.yg-legal-page main h1 {
  color: var(--yg-ink);
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  line-height: 1;
  max-width: 820px;
}

.yg-legal-page main > div > p.mt-4 {
  color: var(--yg-muted) !important;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.75;
  margin-top: 1.35rem !important;
  max-width: 760px !important;
}

.yg-legal-page .legal-prose {
  color: #202838 !important;
  font-size: 1.075rem;
  line-height: 1.95 !important;
  margin-top: clamp(3rem, 6vw, 5.25rem) !important;
  max-width: 780px;
}

.yg-legal-page .legal-prose h2 {
  border-top: 1px solid var(--yg-line);
  color: var(--yg-ink) !important;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  line-height: 1.35;
  margin-bottom: 1rem !important;
  margin-top: clamp(2.75rem, 5vw, 4rem) !important;
  padding-top: 1.35rem;
  position: relative;
}

.yg-legal-page .legal-prose h2::before {
  background: var(--yg-primary);
  content: "";
  height: 3px;
  position: absolute;
  right: 0;
  top: -2px;
  width: 74px;
}

.yg-legal-page .legal-prose p,
.yg-legal-page .legal-prose li {
  text-wrap: pretty;
}

.yg-legal-page .legal-prose ul {
  padding-inline-start: 1.35rem;
}

.yg-legal-page .legal-prose li {
  margin-block: 0.55rem;
}

.yg-legal-page .legal-prose li::marker {
  color: var(--yg-primary);
}

.yg-legal-page .legal-prose a {
  color: #0647d8;
  font-weight: 700;
  text-decoration-color: rgba(6, 71, 216, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.yg-legal-page .legal-prose a:hover {
  color: var(--yg-primary-dark);
  text-decoration-thickness: 2px;
}

.yg-legal-page footer {
  background: transparent !important;
  border: 0 !important;
  color: var(--yg-ink);
  padding: 0 clamp(0.75rem, 2vw, 1.75rem) 1.75rem;
}

.yg-legal-page footer > div {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--yg-line);
  border-radius: 20px;
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.08), inset 0 4px var(--yg-primary);
}

.yg-legal-page footer img {
  filter: none;
  width: 96px !important;
}

.yg-legal-page footer h2 {
  color: var(--yg-primary);
  font-weight: 800;
}

.yg-legal-page footer a {
  color: var(--yg-ink);
}

.yg-legal-page footer a:hover,
.yg-legal-page footer a:focus-visible {
  color: var(--yg-primary);
}

.yg-legal-page footer .text-muted-foreground {
  color: var(--yg-muted) !important;
}

html:has(#anid-dark-mode) body.yg-legal-page {
  --yg-ink: #ece9e4;
  --yg-muted: #c5c9d2;
  --yg-line: rgba(236, 233, 228, 0.24);
  background-color: #1a1a2e;
  background-image: none;
}

html:has(#anid-dark-mode) .yg-legal-page header,
html:has(#anid-dark-mode) .yg-legal-page main > div,
html:has(#anid-dark-mode) .yg-legal-page footer > div {
  background: #24243d !important;
  color: #ece9e4 !important;
}

html:has(#anid-dark-mode) .yg-legal-page .legal-prose {
  color: #ece9e4 !important;
}

html:has(#anid-dark-mode) .yg-legal-page .legal-prose a {
  color: #9eb8ff !important;
}

@media (max-width: 767px) {
  body.yg-legal-page {
    background-image: url("yg-page-background-mobile.webp");
    background-image: image-set(
      url("yg-page-background-mobile.avif") type("image/avif"),
      url("yg-page-background-mobile.webp") type("image/webp")
    );
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .yg-legal-page header > div > div {
    min-height: 68px;
  }

  .yg-legal-page header img {
    height: 44px !important;
    width: 76px !important;
  }

  .yg-legal-page main {
    padding-inline: 0.65rem;
    padding-top: 1.25rem;
  }

  .yg-legal-page main > div {
    border-radius: 14px;
    padding: 1.5rem 1.15rem 2.25rem !important;
  }

  .yg-legal-page main h1 {
    font-size: clamp(2.25rem, 13vw, 3.25rem);
  }

  .yg-legal-page .legal-prose {
    font-size: 1rem;
    line-height: 1.85 !important;
  }

  .yg-legal-page .legal-prose h2 {
    font-size: 1.28rem;
  }

  .yg-legal-page footer {
    padding-inline: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yg-legal-page *,
  .yg-legal-page *::before,
  .yg-legal-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================================
   Component study — v0 / shadcn interaction patterns, adapted to YG
   ======================================================================== */

/* Hover Card pattern: added detail, but never the only way to reach a work. */
body:has(#portfolio) .pf-shot {
  position: relative;
}

body:has(#portfolio) .pf-hover-card {
  background: rgba(8, 11, 18, 0.72);
  color: #fff;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: end;
  opacity: 0;
  padding: 20px;
  position: absolute;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}

body:has(#portfolio) .pf-hover-card__tag {
  color: #b9c9ff;
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
}

body:has(#portfolio) .pf-hover-card__title {
  font-family: var(--yg-display);
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 900;
  line-height: 1.05;
  margin-block-start: 0.25rem;
}

body:has(#portfolio) .pf-hover-card__action {
  font-size: 0.82rem;
  font-weight: 750;
  margin-block-start: 0.65rem;
}

@media (hover: hover) and (pointer: fine) {
  body:has(#portfolio) .pf-card:hover .pf-hover-card,
  body:has(#portfolio) .pf-card:focus-visible .pf-hover-card {
    opacity: 1;
    transform: translateY(0);
  }

  body:has(#portfolio) .pf-card > .mt-3 {
    align-items: baseline;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex !important;
    inset: auto;
    margin-top: 12px;
    opacity: 1;
    padding: 0 2px;
    position: static;
    transform: none;
  }
}

/* Dialog + Sheet on desktop. */
body:has(#portfolio) .yg-viewer[data-pattern="dialog"] {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 24px;
}

body:has(#portfolio) .yg-viewer[data-pattern="dialog"] .yg-viewer__shell {
  height: min(900px, calc(100dvh - 48px)) !important;
  max-width: 1320px;
  width: min(1320px, calc(100vw - 48px)) !important;
}

.yg-viewer__handle {
  display: none;
}

.yg-viewer__details-toggle {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(8, 11, 18, 0.22);
  color: var(--yg-ink);
  display: inline-flex;
  font-family: "Rubik YG", Heebo, Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  gap: 0.45rem;
  min-height: 46px;
  padding-inline: 0.9rem;
}

.yg-viewer__details-icon {
  display: block;
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
}

.yg-viewer__details-toggle:hover,
.yg-viewer__details-toggle:focus-visible,
.yg-viewer__details-toggle[aria-expanded="true"] {
  background: #e9efff;
  border-color: var(--yg-primary);
  color: #073cca;
}

body:has(#portfolio) .yg-viewer.is-sheet-collapsed .yg-viewer__body {
  grid-template-areas: "art";
  grid-template-columns: minmax(0, 1fr);
}

body:has(#portfolio) .yg-viewer.is-sheet-collapsed [data-project-sheet] {
  display: none;
}

/* Drawer on mobile: a clear bottom surface, never a full-screen trap. */
@media (max-width: 767px) {
  body:has(#portfolio) .pf-hover-card {
    display: none;
  }

  body:has(#portfolio) .yg-viewer[data-pattern="drawer"] {
    align-items: flex-end;
    display: flex;
    justify-content: stretch;
    padding: 0;
  }

  body:has(#portfolio) .yg-viewer[data-pattern="drawer"] .yg-viewer__backdrop {
    background: rgba(8, 11, 18, 0.68);
    backdrop-filter: blur(8px);
  }

  body:has(#portfolio) .yg-viewer[data-pattern="drawer"] .yg-viewer__shell {
    border: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -24px 70px rgba(8, 11, 18, 0.28), inset 0 4px var(--yg-primary);
    height: 94dvh !important;
    max-height: 94dvh;
    width: 100vw !important;
  }

  .yg-viewer[data-pattern="drawer"] .yg-viewer__handle {
    background: #9aa4b2;
    border-radius: 999px;
    display: block;
    height: 4px;
    left: 50%;
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    width: 46px;
    z-index: 3;
  }

  .yg-viewer[data-pattern="drawer"] .yg-viewer__bar {
    min-height: 88px;
    padding: 22px 12px 10px;
  }

  .yg-viewer[data-pattern="drawer"] .yg-viewer__identity {
    min-width: 0;
  }

  .yg-viewer[data-pattern="drawer"] .yg-viewer__title,
  .yg-viewer[data-pattern="drawer"] .yg-viewer__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .yg-viewer[data-pattern="drawer"] .yg-viewer__actions {
    flex: 0 0 auto;
  }

  .yg-viewer[data-pattern="drawer"] .yg-viewer__details-toggle {
    min-height: 46px;
    padding-inline: 0.75rem;
  }

  .yg-viewer[data-pattern="drawer"] .yg-viewer__details-toggle span:last-child {
    font-size: 0;
    padding-inline: 0;
    width: 46px;
  }

  .yg-viewer[data-pattern="drawer"] .yg-viewer__details-toggle .yg-viewer__details-icon {
    height: 20px;
    width: 20px;
  }

  body:has(#portfolio) .yg-viewer[data-pattern="drawer"] .yg-viewer__body {
    direction: rtl;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 12px;
  }

  body:has(#portfolio) .yg-viewer[data-pattern="drawer"] .yg-viewer__stage {
    flex: 0 0 min(48svh, 480px);
  }

  body:has(#portfolio) .yg-viewer[data-pattern="drawer"] .yg-viewer__details {
    flex: none;
    overflow: visible;
  }

  body:has(#portfolio) .yg-viewer[data-pattern="drawer"].is-sheet-collapsed [data-project-sheet] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#portfolio) .pf-hover-card {
    transition: none;
  }
}

/* Messenger CTAs use a clean text label; other editorial links keep their arrows. */
a.gold-fill[href*="messenger.com"]::after {
  content: none !important;
  display: none !important;
}